@charset "utf-8";
/*---------------------------------------------------------------------
PC Style
pc.css
-----------------------------------------------------------------------
Copyright 2025 (c) linkpath Allrights Reserved.
Coding: Hinako Hayashi
Last Update: 2025.06.12
---------------------------------------------------------------------*/
/*===========================================================
    font-size
===========================================================*/
.article-concept__detail h2 {
    font-size: 300%;
}
.point-content h2,
.varietal-contents h2,
.varietal-content dt,
.special-title h2 {
    font-size: 200%;
}

.special-label dt {
    font-size: 120%;
}

.article-concept__detail p {
    font-size: 110%;
}

.point-content p,
.varietal-contents p {
    font-size: 105%;
}

.article-concept__detail h2 span,
.point-content h2 span,
.varietal-contents h2 span,
.special-title h2 span {
    font-size: 50%;
}


/*===========================================================
    parts
===========================================================*/
/* triangle-mark */
.triangle-mark {
    width: 1.5em;
    height: 1em;
    display: block;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/*===========================================================
    article-concept
===========================================================*/
.article-concept {
    padding-bottom: 10em;
}
/* article-concept__detail */
.article-concept__detail {
    padding: 7.5em 0;
}
.article-concept__detail h2 {
    text-align: center;
    line-height: 1.25em;
}
.article-concept__detail p {
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 6em;
    padding-top: 2.5em;
}

/*===========================================================
    article-about
===========================================================*/
.article-about {
    padding: 7.5em 0;
}
/* article-about__point */
.article-about__point {
    gap: 3em;
    padding-bottom: 7.5em;
}
.article-about__point .section-sticky__left {
    width: 50%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.point-contents {
    display: flex;
    flex-direction: column;
    gap: 5em;
    margin-right: clamp(5%, calc((100% - 1350px) / 2), 9999px);
}
.point-content h2 {
    line-height: 1.25em;
}
.point-content p,
.point-content a {
    margin-top: 2em;
}
.point-content p {
    line-height: 2em;
}

/* article-about__varietal */
.article-about__varietal {
    gap: 3em;
    padding-bottom: 7.5em;
}
.article-about__varietal .section-sticky__right {
    width: 50%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.varietal-contents {
    display: flex;
    flex-direction: column;
    gap: 3em;
    margin-left: clamp(5%, calc((100% - 1350px) / 2), 9999px);
}
.varietal-contents h2 {
    line-height: 1.25em;
}
.varietal-contents p {
    margin-top: -1em;
}
.varietal-content {
    border-bottom: solid 1px var(--color-accent);
    padding-bottom: 3em;
}
.varietal-content:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.varietal-content dd {
    line-height: 2em;
    margin-top: 2em;
}
.varietal-content dd .link-btn {
    margin-top: 2em;
}

/* article-about__special */
.article-about__special {
    max-width: 1080px;
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 3em;
    border-radius: 3em;
    padding: 7.5em 5em;
    margin: 0 auto;
}
.special-title {
    width: fit-content;
    text-align: center;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.special-title h2 {
    line-height: 1.25em;
}
.special-title .title-img {
    width: auto;
    height: 120%;
    position: absolute;
    top: 50%;
    left: -3em;
    transform: translateY(-50%);
    z-index: -1;
}
.article-about__special > p {
    text-align: center;
    line-height: 2em;
}
.special-list {
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-top: solid 1px var(--color-main);
    margin: 0 auto;
}
.special-list li {
    text-align: center;
    border-bottom: solid 1px var(--color-main);
    padding: 2em;
}
.article-about__special .triangle-mark {
    margin: 0 auto;
}

.special-detail {
    margin-top: 3em;
}

.special-detail__content > p {
    line-height: 2em;
}
.special-detail__content > p span {
    display: block;
    padding-top: 1em;
}

.special-label {
    border-radius: 1.5em;
    padding: 2em;
    margin-top: 2em;
}
.special-label dt {
    border-bottom: solid 1px var(--color-accent);
    padding-bottom: 1em;
    margin-bottom: 1em;
}
.label-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.special-summary {
    line-height: 2em;
    margin-top: 2em;
}
.special-summary__img {
    width: auto;
    height: 7em;
    float: right;
    margin-left: 2em;
    margin-bottom: 2em;
}
.special-summary__img img {
    width: auto;
    height: 100%;
}

.special-detail__img {
    width: 50%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.special-detail__img img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.special-detail__img img:first-child {
    width: 70%;
}
.special-detail__img img:last-child {
    width: 50%;
    margin-top: 40%;
    margin-left: -30%;
}