.front_page {
    background: #f4f4f4;
}

.front_page .ec-layoutRole__contents {
    width: calc(100% - 30px);
    margin-inline: auto;
}
@media only screen and (min-width: 768px) {
    .front_page .ec-layoutRole__contents {
        width: 93.75%;
        max-width: 1200px;
    }
}

.front_page .ec-footerRole {
    padding-top: 0;
    margin-top: 0;
}

/* component */
.o-button {
    position: relative;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 500;

    display: inline-block;
    color: #333;
    font-size: 18px;
    width: 7em;
    padding-block: 0.5em;
    /* transition: color .3s; */
    text-align: left;
}

.o-button::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: #ccc;
    height: 1px;
    width: 100%;
}
.o-button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: #333;
    height: 1px;
    width: 100%;
    transform-origin: left;
    transition: transform .3s;
}

.o-button span::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - 6px);
    width: 13px;
    height: 12px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12"><g><path style="fill: %23040000" d="M7.04,12c-.14,0-.28-.05-.38-.16-.21-.21-.21-.56,0-.77l5.03-5.07L6.66.93c-.21-.21-.21-.56,0-.77.21-.21.55-.21.77,0l5.42,5.46c.1.1.16.24.16.39s-.06.28-.16.39l-5.42,5.45c-.11.11-.24.16-.38.16Z"/><path style="fill: %23040000" d="M12.46,6.55H.54c-.3,0-.54-.24-.54-.55s.24-.55.54-.55h11.92c.3,0,.54.24.54.55s-.24.55-.54.55Z"/></g></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    /* transition: background-image .3s; */
}

.o-button:hover {
    color: #333;
    text-decoration: none;
}

.o-button:hover::after {
    transform: scaleX(0);
    transform-origin: right;
}

/* .o-button:hover span::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 12"><g><path style="fill: %237e7e7e" d="M7.04,12c-.14,0-.28-.05-.38-.16-.21-.21-.21-.56,0-.77l5.03-5.07L6.66.93c-.21-.21-.21-.56,0-.77.21-.21.55-.21.77,0l5.42,5.46c.1.1.16.24.16.39s-.06.28-.16.39l-5.42,5.45c-.11.11-.24.16-.38.16Z"/><path style="fill: %237e7e7e" d="M12.46,6.55H.54c-.3,0-.54-.24-.54-.55s.24-.55.54-.55h11.92c.3,0,.54.24.54.55s-.24.55-.54.55Z"/></g></svg>');
} */

.o-button--noBorder::before,.o-button--noBorder::after {
    display: none;
}

/* fv */
.c-top-marquee {
    width: 400vw;
    display: flex;
    width: max-content;
}
.c-top-marquee__inner {
    width: 200vw;
    padding-right: 2.2%;
}
@media only screen and (min-width: 768px) {
    .c-top-marquee {
        width: calc(3620/1920*100vw);
    }
    .c-top-marquee__inner {
        width: calc(1810/1920*100vw);
    }
}

.t-top-fv {
    position: relative;
    height: 100vh;
    min-height: 177vw;
    max-height: calc(50vh + 85vw);
}
@media only screen and (min-width: 768px) {
    .t-top-fv {
        min-height: 48vw;
        max-height: 66vw;
    }
}

.t-top-fv__inner {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 85%;
    max-width: 1200px;
    margin-inline: auto;
}
@media only screen and (min-width: 768px) {
    .t-top-fv__inner {
        justify-content: center;
        align-items: flex-end;
    }
}

.t-top-fv__content {
    position: relative;
    z-index: 2;
    min-width: calc(434/16*1em);
    font-size: clamp(10px,calc(16/1200*100vw),16px);
    margin-top: max(80px, 15vh);
}
@media only screen and (min-width: 768px) {
    .t-top-fv__content {
        width: calc(485/1200*100%);
        transform: translateY(-20%);
        margin-top: 0;
    }
}

.t-top-fv__content .__logo {
    width: calc(434/485*100%);
    margin: 0;
}

.t-top-fv__content .__logo img {
    width: 100%;
    height: auto;
    margin: 0;
    will-change: transform, opacity;
}

.t-top-fv__content .__title {
    font-size: calc(22/16*1em);
    letter-spacing: 0.2em;
    margin-top: 1.2em;
}

.t-top-fv__content .__desc {
    font-size: max(10px,calc(14/16*1em));
    letter-spacing: 0.3em;
    color: #7e7e7e;
    margin-top: 0.5em;
}

.t-top-fv__content .__logo,
.t-top-fv__content .__title,
.t-top-fv__content .__desc {
    display: block;
    position: relative;
    overflow: hidden;
}
.t-top-fv__content .__logo img,
.t-top-fv__content .__title span,
.t-top-fv__content .__desc span {
    display: block;
    visibility: hidden;
    opacity: 0;
    will-change: transform, opacity;
}

.t-top-fv__visual {
    position: absolute;
    z-index: 2;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
}
.t-top-fv__visual.--out {
    z-index: 1;
    overflow: hidden;
    height: 50%;
}
.t-top-fv__visual.--in {
    /* height: 50%; */
    aspect-ratio: 100 / 159;
}
@media only screen and (min-width: 768px) {
    .t-top-fv__visual {
        top: 0;
        bottom: auto;
    }
    .t-top-fv__visual.--out {
        height: 118%;
    }
    .t-top-fv__visual.--in {
        width: 50%;
        /* height: 100%; */
    }
}

.t-top-fv__visual .__item {
    position: absolute;
}

.t-top-fv__visual .__item img {
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}

.t-top-fv__visual .__item.--pol {
    width: calc(383/600*100%);
    left: 29%;
    top: 48%;
    transform: translate(-50%,-50%);
    z-index: 7;
}
.t-top-fv__visual .__item.--lam {
    width: calc(430/600*100%);
    left: 58%;
    top: 58%;
    transform: translate(-50%,-50%);
    z-index: 6;
}
.t-top-fv__visual .__item.--deco1 {
    width: calc(401/1920*100%);
    left: 2%;
    bottom: 0;
    z-index: 5;
}
.t-top-fv__visual .__item.--deco2 {
    width: calc(51/600*100%);
    left: -6%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 4;
}
.t-top-fv__visual .__item.--deco3 {
    width: calc(33/600*100%);
    left: 46%;
    top: 32%;
    transform: translate(-50%,-50%);
    z-index: 3;
}
.t-top-fv__visual .__item.--deco4 {
    width: calc(86/600*100%);
    left: 98%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
}
.t-top-fv__visual .__item.--glass {
    width: calc(395/1920*100%);
    right: -6%;
    bottom: 15%;
    z-index: 1;
}
.t-top-fv__visual .__item.--text {
    width: max-content;
    left: 0;
    bottom: 25%;
    z-index: 0;
}

.t-top-fv__bg {
    position: absolute;
    z-index: 0;
    top: 20%;
    left: 0;
    width: 100%;
    overflow: hidden;
}
.t-top-fv__bg img {
    width: 250%;
    height: auto;
    margin-left: -75%;
}
@media (max-width: 767px) {
    .t-top-fv__visual .__item.--deco1 {
        width: min(calc(401/1200*100%),401px);
        left: -11%;
    }
    .t-top-fv__visual .__item.--glass {
        width: min(calc(395/1200*100%),395px);
    }
}
@media only screen and (min-width: 768px) {
    .t-top-fv__bg {
        top: 33%;
        height: 135%;
    }
    .t-top-fv__bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin-left: 0;
    }
}

/* about */
.t-top-about {
    position: relative;
    padding-top: 70px;
    overflow: hidden;
}
@media only screen and (min-width: 768px) {
    .t-top-about__layout {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.t-top-about__content {
    position: relative;
    z-index: 1;
}
@media only screen and (min-width: 768px) {
    .t-top-about__content {
        max-width: 478px;
        margin-right: 4%;
    }
}

.t-top-about__content .__title {
    font-size: clamp(19px,calc(28/1200*100vw),28px);
    margin-bottom: 0.5em;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.t-top-about__content .__desc {
    font-size: var(--base-font-size);
    line-height: 2;
    letter-spacing: 0.05em;
    margin-bottom: 1em;
}

.t-top-about__visual {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-right: calc(50% - 50vw);
    margin-top: 30px;
}
@media only screen and (min-width: 768px) {
    .t-top-about__visual {
        width: calc(746/1200*100%);
        margin-top: 0;
    }
}

.c-top-aboutSlide {
    position: relative;
    width: 100%;
    aspect-ratio: 242 / 412;
}

.c-top-aboutSlide__item {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.c-top-aboutSlide__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    transform: scale(1.05) translateY(0);
    clip-path: polygon(0% 0%,100% 0%,0% 0%,0% 100%);
}

.c-top-aboutSlide__item.is-before img {
    position: relative;
    z-index: 2;
    clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    transition-timing-function: linear;
}

.c-top-aboutSlide__item.is-active img {
    position: relative;
    z-index: 3;
    animation-name: aboutSlide;
    animation-duration: 3s;
    transition-timing-function: linear;
}

.c-top-aboutSlide.--reverse .c-top-aboutSlide__item img {
    clip-path: polygon(0% 100%,100% 100%,100% 100%,0% 100%);
}
.c-top-aboutSlide.--reverse .c-top-aboutSlide__item.is-before img {
    clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
.c-top-aboutSlide.--reverse .c-top-aboutSlide__item.is-active img {
    animation-name: aboutSlide_r;
}

@keyframes aboutSlide {
    0% {
      clip-path: polygon(0% 0%,100% 0%,100% 0%,0% 0%);
      transform: scale(1.05) translateY(-4%);
    }
    50% {
      clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    }
    100% {
      clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
      transform: scale(1.05) translateY(0);
    }
}
@keyframes aboutSlide_r {
    0% {
      clip-path: polygon(0% 100%,100% 100%,100% 100%,0% 100%);
      transform: scale(1.05) translateY(4%);
    }
    50% {
      clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
    }
    100% {
      clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
      transform: scale(1.05) translateY(0%);
    }
}


/* product */
.c-top-productVisual {
    position: relative;
}
.c-top-productVisual__inner {
    position: relative;
    width: 80%;
    max-width: 465px;
    margin-inline: auto;
}
@media only screen and (min-width: 768px) {
    .c-top-productVisual {
        position: sticky;
        left: 0;
        width: 100%;
        height: 100vh;
        min-height: 675px;
        top: 0;

        display: grid;
        justify-content: center;
        align-items: center;
        z-index: -1;
    }
    .c-top-productVisual__inner {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        width: 100%;
        aspect-ratio: 465 / 445;
    }
}

.c-top-productVisual .__square {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-top-productVisual .__bottle {
    position: absolute;
    right: -14%;
    top: 53%;
    transform: translateY(-50%);
    height: auto;
    width: calc(212/465*100%);
}

.c-top-productContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-inline: auto;
    font-size: var(--base-font-size);
    padding-block: 2em;
    width: 80%;
    min-width: 330px;
    max-width: 465px;
}
@media only screen and (min-width: 768px) {
    .c-top-productContent {
        min-height: 675px;
        height: 100vh;
        padding-block: 0;
        width: 100%;
    }
}
.c-top-productContent .__logo {
    margin-bottom: 40px;
}
.c-top-productContent .__logo img {
    height: calc(152/16*1em);
    width: auto;
}
.c-top-productContent .__title {
    font-size: calc(24/16*1em);
    letter-spacing: 0.05em;
    margin-bottom: .5em;
}
.c-top-productContent .__small {
    font-size: calc(14/24*1em);
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    position: relative;
    vertical-align: middle;
    margin-left: 20px;
}
.c-top-productContent .__small::before {
    display: inline-block;
    content: "";
    height: 1px;
    width: 8px;
    background-color: #b19468;
    vertical-align: middle;
    margin-right: 12px;
}
.c-top-productContent .__small::after {
    display: inline-block;
    content: "";
    height: 1px;
    width: 8px;
    background-color: #b19468;
    vertical-align: middle;
    margin-left: 12px;
}
.c-top-productContent .__desc {
    font-size: calc(16/16*1em);
    line-height: 1.87;
    margin-bottom: 1.5em;
    letter-spacing: 0.05em;
}


.t-top-product {
    padding-top: 80px;
    position: relative;
    padding-bottom: 50px;
}

.t-top-product__layout {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 60px;
}
@media only screen and (min-width: 768px) {
    .t-top-product__layout {
        margin-top: 0;
        display: grid;
        grid-template-columns: repeat(2, 45%);
        justify-content: space-between;
    }
}
.t-top-product__visual {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 465px;
}
.t-top-product__content {
    display: grid;
    max-width: 455px;
}
@media (max-width: 767px) {
    .c-top-productVisual {
        display: contents;
    }
    .c-top-productVisual__inner.--lam {
        order: 1;
        margin-top: 60px;
    }
    .c-top-productContent.--lam {
        order: 2;
    }
    .t-top-product__visual {
        display: contents;
    }
    .t-top-product__content {
        display: contents;
    }
}

.t-top-product__bg {
    position: absolute;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    top: -230px;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
}
.t-top-product__bg .__deco {
    position: absolute;
    right: -9%;
    top: 0;
    width: calc(408/1920*100%);
    height: auto;
}

.t-top-productBottom {
    --gap: 15px;
    display: flex;
    padding-block: max(100px,calc(200/1200*100%));
    column-gap: var(--gap);
    margin-left: calc(50% - 50vw);
}
@media (min-width: 768px) {
    .t-top-productBottom {
        --gap: 20px;
    }
}
.t-top-productBottom__inner {
    width: 200vw;
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(4, 1fr);
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .t-top-productBottom__inner {
        width: calc(100vw + var(--gap) * 3);
    }
}



.t-top-productBottom img {
    width: 100%;
    height: auto;
}

/* topics */
.t-top-topics {
    position: relative;
    padding-top: max(75px,calc(150/1920*100%));
    padding-bottom: max(100px,calc(200/1920*100%));
}
.t-top-topics__list {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: space-between;
    gap: 15px;
}
@media (min-width: 768px) {
    .t-top-topics__list {
        grid-template-columns: repeat(2,1fr);
        gap: min(3.125vw,48px);
    }
}


.t-top-topics__list .__item:first-child:last-child {
    grid-column: span 2;
    max-width: 576px;
    justify-self: center;
}
.t-top-topics__list .__item img {
    width: 100%;
    height: auto;
}

/* news */

.t-top-news {
    position: relative;
    padding-bottom: max(100px,calc(200/1200*100%));
}
.t-top-news__button {
    text-align: right;
    margin-top: 20px;
}
.t-top-news__list {
    margin-top: 20px;
}

.t-top-news__deco {
    width: calc(449/1920*100vw);
    position: absolute;
    left: calc(50% - 58vw);
    top: 0;
    z-index: -1;
}

.t-top-news__deco img {
    width: 100%;
    height: auto;
}