/* --------------------
 Front
-------------------- */
.intro {
    align-items: center;
    bottom: 0;
    display: flex;
    flex-flow: row nowrap;
    height: auto;
    justify-content: center;
    left: 0;
    margin: 0;
    padding: 0 0 50px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 98;
}

@media (min-width: 768px) {
    .intro {
        padding: 0 0 60px;
    }
}

.intro__bg {
    background-color: #ffffff;
    bottom: auto;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

.intro__logo {
    position: relative;
    width: 100%;
    z-index: 1;
}

@media (min-width: 768px) {
    .intro__logo {
        width: auto;
    }
}

@media (min-width: 768px) {
    .intro__logo__large {
        margin: 0 0 30px;
    }
}

.intro__logo__large img {
    display: block;
    margin: 0 auto;
    width: min(137.5px, 30.5555555556vw);
}

@media (min-width: 768px) {
    .intro__logo__large img {
        height: min(55.2svh, 414px);
        width: auto;
    }
}

.intro__logo__small {
    left: 0;
    position: absolute;
    right: 0;
    top: calc(100% + min(13.3333333333svh, 100px));
}

@media (min-width: 768px) {
    .intro__logo__small {
        inset: auto;
        position: static;
    }
}

.intro__logo__small img {
    display: block;
    margin: 0 auto;
    width: min(300px, 66.6666666667vw);
}

@media (min-width: 768px) {
    .intro__logo__small img {
        height: min(6.9333333333svh, 52px);
        width: auto;
    }
}

.hero {
    height: calc(100svh + 300px);
    margin: 0 0 -200px;
    position: relative;
    z-index: 0;
}

.hero__main {
    align-items: center;
    bottom: auto;
    display: flex;
    flex-flow: row nowrap;
    height: 100dvh;
    justify-content: center;
    left: 0;
    margin: 0;
    padding: 0 0 120px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 98;
}

@media (min-width: 768px) {
    .hero__main {
        padding: 0;
    }
}

.hero__main__logo {
    opacity: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

@media (min-width: 768px) {
    .hero__main__logo {
        width: auto;
    }
}

.hero__main__logo__large picture {
    display: block;
}

.hero__main__logo__large img {
    display: block;
    margin: 0 auto;
    width: min(156.8px, 31.1111111111vw);
}

@media (min-width: 768px) {
    .hero__main__logo__large img {
        height: min(198.431372549svh, 510px);
        width: auto;
    }
}

.hero__main__logo__small {
    left: 0;
    position: absolute;
    right: 0;
    top: calc(100% + min(12.8svh, 96px));
}

@media (min-width: 768px) {
    .hero__main__logo__small {
        display: none;
        inset: auto;
        position: static;
    }
}

.hero__main__logo__small img {
    display: block;
    margin: 0 auto;
    width: min(298px, 82.7777777778vw);
}

@media (min-width: 768px) {
    .hero__main__logo__small img {
        height: min(6.9333333333svh, 60px);
        width: auto;
    }
}

.hero__video {
    bottom: auto;
    height: 100lvh;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -1px;
    z-index: 0;
}

@media (min-width: 768px) {
    .hero__video {
        bottom: 0;
        height: auto;
    }
}

.hero__video:before {
    background-image: url(../images/pages/front/front-video-overlay.webp);
    background-position: center;
    background-repeat: repeat;
    background-size: 2px 2px;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: 1;
}

.hero__video:after {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.27) 44%, rgb(1, 4, 11) 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: 2;
}

.hero__video iframe {
    height: 56.25vw;
    left: 50%;
    min-height: 100vh;
    min-width: 177.77vh;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    z-index: 0;
}

.contents {
    background: linear-gradient(to bottom, #000314 0px, #000314 var(--topics-height), #ffffff var(--topics-height));
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .contents {
        background: none;
        background-image: url(../images/pages/front/front-bg-01.webp);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% var(--contents-bg1-height, auto);
    }
}

.contents:after {
    background: linear-gradient(to top, #000314, rgba(0, 3, 20, 0));
    bottom: auto;
    content: "";
    display: block;
    height: 200px;
    left: 0;
    position: absolute;
    right: 0;
    top: -198px;
    z-index: 1;
}

@media (min-width: 768px) {
    .contents:after {
        display: none;
    }
}

.contents:before {
    background-image: url(../images/pages/front/front-bg-02-mb.webp);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    bottom: auto;
    content: "";
    display: block;
    height: var(--contents-bg2-height, auto);
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: var(--contents-bg2-top, 200px);
    z-index: 0;
}

@media (min-width: 768px) {
    .contents:before {
        background-image: url(../images/pages/front/front-bg-02.webp);
        height: calc(var(--contents-bg2-height, auto) - 199px);
        top: 200px;
    }
}

.topics {
    margin: 0 0 100px;
    padding: 0 var(--c-pad);
}

@media (min-width: 768px) {
    .topics {
        margin: 0 0 260px;
        padding: 0;
    }
}

.topics #topics-slider {
    --f-carousel-gap: 36px;
    --f-carousel-slide-width: 100%;
}

@media (min-width: 768px) {
    .topics #topics-slider {
        --f-carousel-slide-width: 260px;
    }
}

@media (min-width: 1240px) {
    .topics #topics-slider {
        --f-carousel-slide-width: 300px;
    }
}

@media (max-width: 767px) {
    .topics .f-carousel__viewport {
        display: block;
    }
}

@media (max-width: 767px) {
    .topics .f-carousel__slide {
        margin: 0 0 30px;
    }

    .topics .f-carousel__slide:last-child {
        margin-bottom: 0;
    }
}

.news {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    margin: 0 auto 25vw;
    max-width: calc(1160px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .news {
        flex-wrap: nowrap;
        margin: 0 auto 120px;
        padding: 0 var(--c-pad);
    }
}

.news__head {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .news__head {
        flex: 0 0 180px;
    }
}

@media (min-width: 1240px) {
    .news__head {
        flex: 0 0 240px;
    }
}

.news__head__title {
    color: rgba(var(--color-black-rgb), 0.5);
    font-family: var(--ff-din);
    font-size: 13.8888888889vw;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.05;
    margin: 0 0 2.2222222222vw;
    text-align: center;
    text-shadow: 1.6666666667vw 1.6666666667vw 1.1111111111vw rgba(var(--color-white-rgb), 0.1);
}

@media (min-width: 768px) {
    .news__head__title {
        font-size: 2.625rem;
        margin: 0 0 8px;
        text-align: left;
        text-shadow: 6px 6px 4px rgba(var(--color-white-rgb), 0.1);
    }
}

@media (min-width: 1240px) {
    .news__head__title {
        font-size: 3.125rem;
    }
}

.news__head__sns {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    gap: 4.4444444444vw;
    justify-content: center;
}

@media (min-width: 768px) {
    .news__head__sns {
        gap: 12px;
        justify-content: flex-start;
    }
}

@media (min-width: 1240px) {
    .news__head__sns {
        gap: 16px;
    }
}

.news__head__sns a {
    display: block;
    text-decoration: none;
    transition: opacity var(--duration) var(--cubic) 0s;
}

.news__head__sns a:focus {
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .news__head__sns a:hover {
        opacity: 0.65;
    }
}

.news__head__sns a img {
    width: 10vw;
}

@media (min-width: 768px) {
    .news__head__sns a img {
        width: 32px;
    }
}

@media (min-width: 1240px) {
    .news__head__sns a img {
        width: 36px;
    }
}

.news__main {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .news__main {
        flex: 1 1 auto;
    }
}

.news__main__list {
    margin: 0 0 11.1111111111vw;
}

@media (min-width: 768px) {
    .news__main__list {
        margin: 0 0 40px;
    }
}

.news__main__list__item {
    margin: 0 0 11.1111111111vw;
    position: relative;
}

@media (min-width: 768px) {
    .news__main__list__item {
        margin: 0 0 20px;
    }
}

.news__main__list__item:last-child {
    margin-bottom: 0;
}

.news__main__list__item--new:before {
    color: var(--color-white);
    content: "new";
    display: block;
    font-family: var(--ff-din);
    font-size: 6.6666666667vw;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.05;
    margin: 0 0 2.2222222222vw;
    text-shadow: 0.5555555556vw 0.5555555556vw 0.2777777778vw rgba(var(--color-black-rgb), 0.3);
}

@media (min-width: 768px) {
    .news__main__list__item--new:before {
        font-size: var(--fs18);
        left: -12px;
        margin: 0;
        position: absolute;
        text-shadow: 2px 2px 1px rgba(var(--color-black-rgb), 0.3);
        top: 1px;
        transform: translateX(-100%);
    }
}

@media (min-width: 1240px) {
    .news__main__list__item--new:before {
        font-size: var(--fs20);
        top: -1px;
    }
}

.news__main__list__item a {
    align-items: flex-start;
    color: inherit;
    display: flex;
    flex-flow: row wrap;
    gap: 1.1111111111vw 0;
    justify-content: flex-start;
    text-decoration: none;
    transition: opacity var(--duration) var(--cubic) 0s;
}

@media (min-width: 768px) {
    .news__main__list__item a {
        flex-wrap: nowrap;
        gap: 0;
    }
}

.news__main__list__item a time {
    display: block;
    flex: 0 0 100%;
    font-size: 3.6111111111vw;
    letter-spacing: 0.12em;
    line-height: 1.4;
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .news__main__list__item a time {
        flex: 0 0 110px;
        font-size: var(--fs12);
        padding: 3px 0 0;
    }
}

@media (min-width: 1240px) {
    .news__main__list__item a time {
        flex: 0 0 120px;
        font-size: var(--fs13);
        padding: 4px 0 0;
    }
}

.news__main__list__item a span {
    display: block;
    flex: 0 0 100%;
    font-size: 5vw;
    letter-spacing: 0.12em;
    line-height: 1.4;
    margin: 0;
    text-decoration: underline;
    -webkit-text-decoration-color: color-mix(in srgb, currentColor, transparent 100%);
    text-decoration-color: color-mix(in srgb, currentColor, transparent 100%);
    transition: -webkit-text-decoration-color var(--duration) var(--cubic) 0s;
    transition: text-decoration-color var(--duration) var(--cubic) 0s;
    transition: text-decoration-color var(--duration) var(--cubic) 0s, -webkit-text-decoration-color var(--duration) var(--cubic) 0s;
}

@media (min-width: 768px) {
    .news__main__list__item a span {
        flex: 1 1 auto;
        font-size: var(--fs16);
    }
}

@media (min-width: 1240px) {
    .news__main__list__item a span {
        font-size: var(--fs18);
    }
}

.news__main__list__item a span:focus {
    -webkit-text-decoration-color: currentColor;
    text-decoration-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
    .news__main__list__item a span:hover {
        -webkit-text-decoration-color: currentColor;
        text-decoration-color: currentColor;
    }
}

.news__main__list__item a:focus {
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .news__main__list__item a:hover {
        opacity: 0.65;
    }
}

.news__main__action .com-link {
    margin: 0 auto;
}

@media (min-width: 768px) {
    .news__main__action .com-link {
        margin: 0 0 0 auto;
    }
}

.news__main__action .com-link__text {
    color: var(--color-white);
    mix-blend-mode: difference;
}

.product {
    margin: 0 0 16.6666666667vw;
    width: 100%;
}

@media (min-width: 768px) {
    .product {
        margin: 0 0 100px;
    }
}

.product__main {
    position: relative;
}

.product__main-container {
    margin: 0 auto 11.1111111111vw;
    max-width: calc(1160px + var(--c-pad)*2);
    padding: 0 3.3333333333vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .product__main-container {
        margin: 0 auto 60px;
        padding: 0 var(--c-pad);
    }
}

.product__main-container-inner {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    position: relative;
}

@media (min-width: 768px) {
    .product__main-container-inner {
        border-left: 1px solid var(--color-black);
        padding: 0 0 0 30px;
    }
}

@media (min-width: 992px) {
    .product__main-container-inner {
        flex-wrap: nowrap;
    }
}

.product__main__canvas {
    bottom: -16.6666666667vw;
    left: 0;
    -webkit-mask-image: url(../images/commons/com-smoke-mask.webp);
    mask-image: url(../images/commons/com-smoke-mask.webp);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 2;
}

@media (min-width: 768px) {
    .product__main__canvas {
        bottom: -120px;
    }
}

.product__main__canvas canvas {
    max-width: 100%;
    width: 100%;
}

.product__main__title {
    flex: 0 0 100%;
    margin: 0 0 5.5555555556vw;
}

@media (min-width: 768px) {
    .product__main__title {
        margin: 0;
    }
}

@media (min-width: 992px) {
    .product__main__title {
        flex: 0 0 auto;
    }
}

.product__main__title__ja {
    font-size: 19.4444444444vw;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.05;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .product__main__title__ja {
        font-size: 3.6rem;
        text-align: left;
        transform: translateX(-0.2em);
    }
}

@media (min-width: 992px) {
    .product__main__title__ja {
        font-size: 4.2rem;
    }
}

@media (min-width: 1240px) {
    .product__main__title__ja {
        font-size: 6rem;
    }
}

.product__main__title__ja span:nth-child(1) {
    letter-spacing: -0.06em;
}

.product__main__title__ja span:nth-child(2) {
    letter-spacing: 0.04em;
}

.product__main__title__en {
    font-family: var(--ff-copperplate);
    font-size: 3.3333333333vw;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .product__main__title__en {
        font-size: var(--fs12);
        text-align: left;
    }
}

@media (min-width: 992px) {
    .product__main__title__en {
        font-size: var(--fs13);
    }
}

@media (min-width: 1240px) {
    .product__main__title__en {
        font-size: var(--fs16);
    }
}

.product__main__title__en span {
    display: inline-block;
    vertical-align: baseline;
}

.product__main__title__en em {
    display: inline-block;
    font-size: 10vw;
    font-style: normal;
    font-weight: inherit;
    margin: 0 0 0 1.6666666667vw;
    transform: translateY(0.015em);
    vertical-align: baseline;
}

@media (min-width: 768px) {
    .product__main__title__en em {
        font-size: 1.5625rem;
        margin: 0 0 0 6px;
    }
}

@media (min-width: 992px) {
    .product__main__title__en em {
        font-size: 1.875rem;
        margin: 0 0 0 8px;
    }
}

@media (min-width: 1240px) {
    .product__main__title__en em {
        font-size: 3.125rem;
    }
}

.product__main__list {
    align-items: flex-end;
    display: flex;
    flex: 0 0 100%;
    flex-flow: row nowrap;
    gap: 0;
    justify-content: center;
}

@media (min-width: 768px) {
    .product__main__list {
        justify-content: flex-end;
        max-width: 768px;
        padding: 30px 0 0 0;
    }
}

@media (min-width: 992px) {
    .product__main__list {
        flex: 1 1 auto;
    }
}

.product__main__list__item {
    flex: 0 1 auto;
}

@media (min-width: 768px) {
    .product__main__list__item {
        padding: 0 20px;
    }
}

@media (min-width: 1240px) {
    .product__main__list__item {
        padding: 0 24px;
    }
}

.product__main__list__item a {
    display: block;
    padding: 0 6.9444444444vw 0 0;
    position: relative;
    text-align: center;
    text-decoration: none;
}

@media (min-width: 768px) {
    .product__main__list__item a {
        padding: 0 45px 0 0;
    }
}

@media (min-width: 1240px) {
    .product__main__list__item a {
        padding: 0 55px 0 0;
    }
}

.product__main__list__item a .com-circle {
    bottom: 0.5555555556vw;
    right: 0vw;
}

@media (min-width: 768px) {
    .product__main__list__item a .com-circle {
        bottom: 6px;
        right: 16px;
    }
}

@media (max-width: 767px) {
    .product__main__list__item--01 {
        flex-basis: 96.6666666667vw;
    }
}

@media (min-width: 768px) {
    .product__main__list__item--01 a {
        padding-right: calc(11.21076vw - 81.09865px);
    }
}

@media (min-width: 992px) {
    .product__main__list__item--01 a {
        padding-right: calc(16.19433vw - 120.64777px);
    }
}

@media (min-width: 1240px) {
    .product__main__list__item--01 a {
        padding-right: calc(18.75vw - 167.5px);
    }
}

@media (min-width: 1401px) {
    .product__main__list__item--01 a {
        padding-right: 95px;
    }
}

@media (max-width: 767px) {
    .product__main__list__item--01 a img {
        width: 100%;
    }
}

.product__list {
    margin: 0 auto 11.1111111111vw;
    max-width: calc(1160px + var(--c-pad)*2);
    padding: 0 3.3333333333vw;
    position: relative;
    width: 100%;
    z-index: 3;
}

@media (min-width: 768px) {
    .product__list {
        margin: 0 auto 60px;
        padding: 0 var(--c-pad);
    }
}

.product__list-inner {
    align-items: stretch;
    display: flex;
    flex-flow: row nowrap;
    margin: 0 -3.3333333333vw;
}

@media (min-width: 768px) {
    .product__list-inner {
        margin: 0;
    }
}

.product__list__item {
    align-items: stretch;
    border-left: max(1px, 0.2777777778vw) solid var(--color-black);
    display: flex;
    flex: 0 0 33.3333333333%;
    flex-flow: column nowrap;
    justify-content: space-between;
    padding: 0 3.3333333333vw;
}

@media (max-width: 767px) {
    .product__list__item:first-child {
        border-left: none;
    }
}

@media (min-width: 768px) {
    .product__list__item {
        border-left-width: 1px;
        padding: 0 24px;
    }
}

.product__list__item__title {
    margin: 0 0 8.3333333333vw;
}

@media (min-width: 768px) {
    .product__list__item__title {
        margin: 0 0 30px;
    }
}

.product__list__item__title__en {
    font-family: var(--ff-copperplate);
    font-size: 2.7777777778vw;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 1.6666666667vw;
}

@media (min-width: 768px) {
    .product__list__item__title__en {
        font-size: var(--fs14);
        margin: 0 0 10px;
    }
}

@media (min-width: 992px) {
    .product__list__item__title__en {
        font-size: var(--fs16);
    }
}

@media (min-width: 1240px) {
    .product__list__item__title__en {
        font-size: var(--fs18);
    }
}

.product__list__item__title__ja {
    font-size: 5.8333333333vw;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1;
    margin: 0;
}

@media (min-width: 768px) {
    .product__list__item__title__ja {
        font-size: var(--fs30);
    }
}

@media (min-width: 992px) {
    .product__list__item__title__ja {
        font-size: 2.625rem;
    }
}

@media (min-width: 1240px) {
    .product__list__item__title__ja {
        font-size: 3rem;
    }
}

.product__list__item__item a {
    display: block;
    padding: 0 5.5555555556vw 0 0;
    position: relative;
    text-align: left;
    text-decoration: none;
    width: 100%;
}

@media (min-width: 768px) {
    .product__list__item__item a {
        padding: 0;
        text-align: center;
    }
}

.product__list__item__item a .com-circle {
    bottom: 2px;
    right: 0;
}

@media (min-width: 768px) {
    .product__list__item__item a .com-circle {
        bottom: 6px;
        right: 16px;
    }
}

@media (max-width: 767px) {
    .product__list__item__item a img {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .product__list__item--shochu .product__list__item__item img {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .product__list__item--plum-wine .product__list__item__item img {
        width: 62%;
    }
}

.product__list__item--whisky .product__list__item__title__ja {
    letter-spacing: -0.2em;
}

@media (min-width: 768px) {
    .product__list__item--whisky .product__list__item__title__ja {
        letter-spacing: -0.06em;
    }
}

@media (max-width: 767px) {
    .product__list__item--whisky .product__list__item__item img {
        width: 90%;
    }
}

.product__action .com-link {
    margin: 0 auto;
}

.product__action .com-link__line:before {
    background-color: var(--color-black);
}

.product__action .com-link:focus .com-link__line__circle:after {
    border-color: var(--color-black);
}

@media (hover: hover) and (pointer: fine) {
    .product__action .com-link:hover .com-link__line__circle:after {
        border-color: var(--color-black);
    }
}

.menu {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    gap: 0;
    margin: 0 auto 11.1111111111vw;
    max-width: calc(1160px + var(--c-pad)*2);
    padding: 0 5.5555555556vw;
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .menu {
        gap: 4.6875vw;
        margin: 0 auto 5.859375vw;
        padding: 0 var(--c-pad);
    }
}

@media (min-width: 992px) {
    .menu {
        align-items: flex-end;
        flex-wrap: nowrap;
        gap: min(36px, 2.5714285714vw);
        margin: 0 auto min(45px, 3.2142857143vw);
    }
}

.menu .com-circle {
    height: 7.2222222222vw;
    width: 7.2222222222vw;
}

@media (min-width: 768px) {
    .menu .com-circle {
        height: 3.3854166667vw;
        width: 3.3854166667vw;
    }
}

@media (min-width: 992px) {
    .menu .com-circle {
        height: min(26px, 1.8571428571vw);
        width: min(26px, 1.8571428571vw);
    }
}

.menu .com-circle:before {
    bottom: 0.5555555556vw;
    height: 1.6666666667vw;
    width: 5.5555555556vw;
}

@media (min-width: 768px) {
    .menu .com-circle:before {
        bottom: 0.2604166667vw;
        height: 0.78125vw;
        width: 2.6041666667vw;
    }
}

@media (min-width: 992px) {
    .menu .com-circle:before {
        bottom: min(2px, 0.1428571429vw);
        height: min(6px, 0.4285714286vw);
        width: min(20px, 1.4285714286vw);
    }
}

.menu-main {
    width: 100%;
}

@media (min-width: 992px) {
    .menu-main {
        width: calc(50% - min(36px, 2.5714285714vw)*0.5);
    }
}

.menu-sub {
    align-items: stretch;
    display: flex;
    flex-flow: row wrap;
    gap: 5.5555555556vw 3.3333333333vw;
    width: 100%;
}

@media (min-width: 768px) {
    .menu-sub {
        gap: 3.125vw 2.6041666667vw;
    }
}

@media (min-width: 992px) {
    .menu-sub {
        gap: min(24px, 1.7142857143vw) min(20px, 1.4285714286vw);
        width: calc(50% - min(36px, 2.5714285714vw)*0.5);
    }
}

.menu__about {
    background-image: url(../images/pages/front/front-menu-about-bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5.5555555556vw;
    color: inherit;
    display: block;
    padding: 8.3333333333vw 5.5555555556vw 5.5555555556vw;
    position: relative;
    text-decoration: none;
    width: 100%;
}

@media (min-width: 768px) {
    .menu__about {
        border-radius: 3.90625vw;
        padding: 6.5104166667vw 5.2083333333vw 3.90625vw;
    }
}

@media (min-width: 992px) {
    .menu__about {
        border-radius: min(30px, 2.1428571429vw);
        padding: min(50px, 3.5714285714vw) min(40px, 2.8571428571vw) min(30px, 2.1428571429vw);
    }
}

.menu__about__title {
    margin: 0 0 11.1111111111vw;
}

@media (min-width: 768px) {
    .menu__about__title {
        margin: 0 0 14.3229166667vw;
    }
}

@media (min-width: 992px) {
    .menu__about__title {
        margin: 0 0 min(110px, 7.8571428571vw);
    }
}

.menu__about__title__ja {
    font-size: 8.3333333333vw;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.05;
    margin: 0 0 2.2222222222vw;
    position: relative;
    text-align: center;
}

@media (min-width: 768px) {
    .menu__about__title__ja {
        font-size: 5.859375vw;
        margin: 0 0 1.0416666667vw;
        padding: 0 0 0 6.9010416667vw;
        text-align: left;
    }
}

@media (min-width: 992px) {
    .menu__about__title__ja {
        font-size: min(2.8125rem, 3.2142857143vw);
        margin: 0 0 min(8px, 0.5714285714vw);
        padding: 0 0 0 min(53px, 3.7857142857vw);
    }
}

.menu__about__title__ja:before {
    background-image: url(../images/logos/logo-symbol.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 13.8888888889vw;
    margin: 0 auto 5.5555555556vw;
    width: 13.8888888889vw;
}

@media (min-width: 768px) {
    .menu__about__title__ja:before {
        height: 5.3385416667vw;
        left: 0;
        margin: 0;
        position: absolute;
        top: 0.390625vw;
        width: 5.3385416667vw;
    }
}

@media (min-width: 992px) {
    .menu__about__title__ja:before {
        height: min(41px, 2.9285714286vw);
        top: min(3px, 0.2142857143vw);
        width: min(41px, 2.9285714286vw);
    }
}

.menu__about__title__en {
    color: var(--color-light-gray);
    font-family: var(--ff-copperplate);
    font-size: 3.6111111111vw;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .menu__about__title__en {
        font-size: 1.953125vw;
        text-align: left;
    }
}

@media (min-width: 992px) {
    .menu__about__title__en {
        font-size: min(var(--fs15), 1.0714285714vw);
    }
}

.menu__about__subtitle {
    padding: 0 1.1111111111vw;
}

@media (min-width: 768px) {
    .menu__about__subtitle {
        padding: 0;
    }
}

.menu__about__subtitle span {
    background-color: var(--color-black);
    color: var(--color-white);
    display: block;
    font-size: 6.6666666667vw;
    letter-spacing: 0.12em;
    line-height: 1.05;
    margin: 0 0 1.1111111111vw;
    padding: 1.6666666667vw 0.5555555556vw 1.6666666667vw calc(0.12em + 0.55556vw);
    white-space: nowrap;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .menu__about__subtitle span {
        font-size: 4.4270833333vw;
        margin: 0 0 1.0416666667vw;
        padding: 1.0416666667vw 0.5208333333vw 1.0416666667vw calc(0.12em + 0.52083vw);
    }
}

@media (min-width: 992px) {
    .menu__about__subtitle span {
        font-size: min(var(--fs34), 2.4285714286vw);
        margin: 0 0 min(8px, 0.5714285714vw);
        padding: min(8px, 0.5714285714vw) min(4px, 0.2857142857vw) min(8px, 0.5714285714vw) calc(0.12em + min(4px, 0.2857142857vw));
    }
}

.menu__about__subtitle span:last-child {
    margin-bottom: 0;
}

.menu__about .com-circle {
    --color-bg: var(--color-dark-gray);
    bottom: 5.5555555556vw;
    right: 5.5555555556vw;
}

@media (max-width: 767px) {
    .menu__about .com-circle {
        height: 7.2222222222vw;
        width: 7.2222222222vw;
    }
}

@media (min-width: 768px) {
    .menu__about .com-circle {
        bottom: 3.90625vw;
        right: 3.90625vw;
    }
}

@media (min-width: 992px) {
    .menu__about .com-circle {
        bottom: min(30px, 2.1428571429vw);
        right: min(30px, 2.1428571429vw);
    }
}

@media (max-width: 767px) {
    .menu__about .com-circle:before {
        bottom: 0.5555555556vw;
        height: 1.6666666667vw;
        width: 5.5555555556vw;
    }
}

.menu__award {
    background-image: url(../images/pages/front/front-menu-award-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 9.4444444444vw;
    color: var(--color-white);
    display: block;
    margin: 25vw 0 0;
    padding: 23.6111111111vw 0 13.8888888889vw;
    position: relative;
    text-decoration: none;
    width: 100%;
}

@media (min-width: 768px) {
    .menu__award {
        border-radius: 3.90625vw;
        margin: 3.90625vw 0 0;
        padding: 5.2083333333vw 0 5.2083333333vw;
    }
}

@media (min-width: 992px) {
    .menu__award {
        border-radius: min(30px, 2.1428571429vw);
        margin: 0;
        padding: min(40px, 2.8571428571vw) 0 min(40px, 2.8571428571vw);
    }
}

.menu__award:before {
    background-image: url(../images/pages/front/front-menu-award-01.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: block;
    filter: drop-shadow(1.1111111111vw 1.1111111111vw 0.2777777778vw rgba(var(--color-black-rgb), 0.2));
    height: 31.1111111111vw;
    left: 0;
    margin: 0 auto;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: -16.6666666667vw;
    width: 59.1666666667vw;
}

@media (min-width: 768px) {
    .menu__award:before {
        filter: drop-shadow(0.5208333333vw 0.5208333333vw 0.1302083333vw rgba(var(--color-black-rgb), 0.2));
        height: 20.8333333333vw;
        left: 20.8333333333vw;
        margin: 0;
        right: auto;
        top: -5.859375vw;
        width: 39.5833333333vw;
    }
}

@media (min-width: 992px) {
    .menu__award:before {
        filter: drop-shadow(min(4px, 0.2857142857vw) min(4px, 0.2857142857vw) min(1px, 0.0714285714vw) rgba(var(--color-black-rgb), 0.2));
        height: min(160px, 11.4285714286vw);
        left: min(160px, 11.4285714286vw);
        top: max(-45px, -3.2142857143vw);
        width: min(304px, 21.7142857143vw);
    }
}

.menu__award__title {
    margin: 0;
    padding: 0;
}

@media (min-width: 768px) {
    .menu__award__title {
        padding: 0 3.90625vw;
    }
}

@media (min-width: 992px) {
    .menu__award__title {
        padding: 0 min(30px, 2.1428571429vw);
    }
}

.menu__award__title__ja {
    flex: 0 0 100%;
    font-size: 9.4444444444vw;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.05;
    margin: 0 0 4.4444444444vw;
    text-align: center;
}

@media (min-width: 768px) {
    .menu__award__title__ja {
        flex: 0 0 auto;
        font-size: 4.4270833333vw;
        margin: 0 0 2.0833333333vw;
        text-align: left;
    }
}

@media (min-width: 992px) {
    .menu__award__title__ja {
        font-size: min(var(--fs34), 2.4285714286vw);
        margin: 0 0 min(16px, 1.1428571429vw);
    }
}

.menu__award__title__en {
    font-family: var(--ff-din);
    font-size: 4.1666666667vw;
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .menu__award__title__en {
        font-size: 1.953125vw;
        text-align: left;
    }
}

@media (min-width: 992px) {
    .menu__award__title__en {
        font-size: min(var(--fs15), 1.0714285714vw);
    }
}

.menu__award__circle {
    background-color: var(--color-white);
    border-radius: 50%;
    bottom: 5.5555555556vw;
    display: block;
    height: 7.2222222222vw;
    overflow: hidden;
    position: absolute;
    right: 5.5555555556vw;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 7.2222222222vw;
    z-index: 1;
}

@media (min-width: 768px) {
    .menu__award__circle {
        bottom: 3.3854166667vw;
        height: 3.3854166667vw;
        right: 3.3854166667vw;
        width: 3.3854166667vw;
    }
}

@media (min-width: 992px) {
    .menu__award__circle {
        bottom: min(26px, 1.8571428571vw);
        height: min(26px, 1.8571428571vw);
        right: min(26px, 1.8571428571vw);
        width: min(26px, 1.8571428571vw);
    }
}

.menu__award__circle:before {
    background-color: #04152c;
    bottom: 0.5555555556vw;
    content: "";
    display: block;
    height: 1.6666666667vw;
    left: 0;
    margin: auto 0;
    -webkit-mask-image: url(../images/commons/com-circle-white-angle-right-thick.svg);
    mask-image: url(../images/commons/com-circle-white-angle-right-thick.svg);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    position: absolute;
    top: 0;
    transition: background-color var(--duration) var(--cubic) 0s;
    width: 5.5555555556vw;
}

@media (min-width: 768px) {
    .menu__award__circle:before {
        bottom: 0.2604166667vw;
        height: 0.78125vw;
        width: 2.6041666667vw;
    }
}

@media (min-width: 992px) {
    .menu__award__circle:before {
        bottom: min(2px, 0.1428571429vw);
        height: min(6px, 0.4285714286vw);
        width: min(20px, 1.4285714286vw);
    }
}

.menu__award:focus .menu__award__circle {
    background-color: #04152c;
}

.menu__award:focus .menu__award__circle:before {
    background-color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
    .menu__award:hover .menu__award__circle {
        background-color: #04152c;
    }

    .menu__award:hover .menu__award__circle:before {
        background-color: var(--color-white);
    }
}

.menu__contact {
    border-radius: 8.3333333333vw;
    color: var(--color-dark-gray);
    font-family: var(--ff-din);
    font-size: 7.2222222222vw;
    font-weight: 400;
    height: 33.3333333333vw;
    letter-spacing: 0;
    line-height: 1.05;
    margin: 0;
    overflow: hidden;
    padding: 4.4444444444vw;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: calc(50% - 1.66667vw);
}

@media (min-width: 768px) {
    .menu__contact {
        border-radius: 3.90625vw;
        font-size: 5.9895833333vw;
        height: 26.6927083333vw;
        padding: 3.515625vw;
        width: calc(50% - 1.5625vw);
    }
}

@media (min-width: 992px) {
    .menu__contact {
        border-radius: min(30px, 2.1428571429vw);
        font-size: min(2.875rem, 3.2857142857vw);
        height: min(205px, 14.6428571429vw);
        padding: min(27px, 1.9285714286vw);
        width: calc(50% - min(24px, 1.7142857143vw)*0.5);
    }
}

.menu__contact:before {
    border: 2.2222222222vw solid #f2f2f2;
    border-radius: 8.3333333333vw;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

@media (min-width: 768px) {
    .menu__contact:before {
        border-radius: 3.90625vw;
        border-width: 1.953125vw;
    }
}

@media (min-width: 992px) {
    .menu__contact:before {
        border-radius: min(30px, 2.1428571429vw);
        border-width: min(15px, 1.0714285714vw);
    }
}

.menu__contact:after {
    background-image: url(../images/pages/front/front-menu-contact-01.webp);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    content: "";
    display: block;
    height: auto;
    left: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 12.5vw;
    width: auto;
}

@media (min-width: 768px) {
    .menu__contact:after {
        background-size: 50.390625vw 18.2291666667vw;
        bottom: auto;
        height: 18.2291666667vw;
        top: 9.765625vw;
    }
}

@media (min-width: 992px) {
    .menu__contact:after {
        background-size: min(387px, 27.6428571429vw) min(140px, 10vw);
        height: min(140px, 10vw);
        top: min(75px, 5.3571428571vw);
    }
}

.menu__contact .com-circle {
    --color-bg: var(--color-dark-gray);
    bottom: 4.4444444444vw;
    left: 0;
    margin: 0 auto;
    right: 0;
}

@media (min-width: 768px) {
    .menu__contact .com-circle {
        bottom: 3.90625vw;
    }
}

@media (min-width: 992px) {
    .menu__contact .com-circle {
        bottom: min(30px, 2.1428571429vw);
    }
}

@media (max-width: 767px) {
    .menu__contact .com-circle {
        height: 16px;
        width: 16px;
    }
}

@media (max-width: 767px) {
    .menu__contact .com-circle:before {
        bottom: 2px;
        height: 4px;
        width: 12px;
    }
}

.menu__english {
    background-image: url(../images/pages/front/front-menu-english-bg.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8.3333333333vw;
    color: #b4c6cc;
    height: 33.3333333333vw;
    margin: 0;
    overflow: hidden;
    padding: 4.4444444444vw;
    position: relative;
    text-decoration: none;
    transition: opacity var(--duration) var(--cubic) 0s;
    width: calc(50% - 1.66667vw);
}

@media (min-width: 768px) {
    .menu__english {
        border-radius: 3.90625vw;
        height: 26.6927083333vw;
        padding: 3.515625vw 3.90625vw;
        width: calc(50% - 1.5625vw);
    }
}

@media (min-width: 992px) {
    .menu__english {
        border-radius: min(30px, 2.1428571429vw);
        height: min(205px, 14.6428571429vw);
        padding: min(27px, 1.9285714286vw) min(30px, 2.1428571429vw);
        width: calc(50% - min(24px, 1.7142857143vw)*0.5);
    }
}

.menu__english__title {
    font-family: var(--ff-din);
    font-size: 7.2222222222vw;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0 0 6.6666666667vw;
}

@media (min-width: 768px) {
    .menu__english__title {
        font-size: 5.9895833333vw;
        margin: 0 0 0.5208333333vw;
    }
}

@media (min-width: 992px) {
    .menu__english__title {
        font-size: min(2.875rem, 3.2857142857vw);
        margin: 0 0 min(4px, 0.2857142857vw);
    }
}

.menu__english__subtitle {
    font-size: 3.3333333333vw;
    letter-spacing: 0.12em;
    line-height: 1.5;
    margin: 0;
}

@media (min-width: 768px) {
    .menu__english__subtitle {
        font-size: 2.0833333333vw;
        margin: 0 0 3.125vw;
    }
}

@media (min-width: 992px) {
    .menu__english__subtitle {
        font-size: min(var(--fs16), 1.1428571429vw);
        margin: 0 0 min(24px, 1.7142857143vw);
    }
}

.menu__english__content {
    display: none;
    max-width: 22.1354166667vw;
}

@media (min-width: 768px) {
    .menu__english__content {
        display: block;
    }
}

@media (min-width: 992px) {
    .menu__english__content {
        max-width: min(170px, 12.1428571429vw);
    }
}

.menu__english__content p {
    font-size: 3.3333333333vw;
    letter-spacing: 0.12em;
    line-height: 1.33;
    margin: 0;
}

@media (min-width: 768px) {
    .menu__english__content p {
        font-size: 1.5625vw;
    }
}

@media (min-width: 992px) {
    .menu__english__content p {
        font-size: min(var(--fs12), 0.8571428571vw);
    }
}

.menu__english:focus {
    opacity: 0.65;
}

@media (hover: hover) and (pointer: fine) {
    .menu__english:hover {
        opacity: 0.65;
    }
}