/* --------------------
 Front
-------------------- */
.intro {
    background-color: var(--color-brown);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
}

.intro:before {
    border: 0.8021390374vw solid var(--color-bronze);
    bottom: 5.3475935829vw;
    content: "";
    display: block;
    left: 5.3475935829vw;
    pointer-events: none;
    position: absolute;
    right: 5.3475935829vw;
    top: 5.3475935829vw;
}

@media (min-width: 768px) {
    .intro:before {
        border-width: 3px;
        bottom: 20px;
        left: 20px;
        right: 20px;
        top: 20px;
    }
}

.intro:after {
    border: 0.2673796791vw solid var(--color-bronze);
    bottom: 7.2192513369vw;
    content: "";
    display: block;
    left: 7.2192513369vw;
    pointer-events: none;
    position: absolute;
    right: 7.2192513369vw;
    top: 7.2192513369vw;
}

@media (min-width: 768px) {
    .intro:after {
        border-width: 1px;
        bottom: 27px;
        left: 27px;
        right: 27px;
        top: 27px;
    }
}

.intro-container {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.intro__main {
    width: 100%;
}

.intro__main__logo {
    margin: 0 0 9.6256684492vw;
    text-align: center;
}

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

.intro__main__logo img {
    width: 28.8770053476vw;
}

@media (min-width: 768px) {
    .intro__main__logo img {
        width: 128px;
    }
}

.intro__main__text {
    color: var(--color-bronze);
    display: block;
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs13);
    font-weight: 400;
    letter-spacing: 0.46em;
    line-height: 2.3;
    text-align: center;
}

@media (min-width: 768px) {
    .intro__main__text {
        line-height: 1.2;
    }
}

.video {
    bottom: 0;
    font-size: 10px;
    height: auto;
    left: 0;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 90vh;
    transform: scale(1.01);
    width: 100vw;
    z-index: -1;
}

@media (min-width: 768px) {
    .video {
        height: 100vh;
        right: auto;
        top: auto;
        transform: none;
    }
}

.video__bg {
    bottom: auto;
    display: block;
    height: 100vh;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: none;
    transform-origin: center bottom;
    width: 100%;
}

@media (min-width: 768px) {
    .video__bg {
        bottom: 0;
        height: 100%;
        right: auto;
        top: auto;
        transform: scale(0.476635514);
        transform-origin: left bottom;
    }
}

.video__overlay {
    background-color: var(--color-black);
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: none;
    transform-origin: center bottom;
    z-index: 1;
}

@media (min-width: 768px) {
    .video__overlay {
        transform: scale(0.476635514);
        transform-origin: left bottom;
    }
}

.video video {
    display: block;
    height: 100lvh;
    margin: 0;
    object-fit: cover;
    object-position: center;
    transform: none;
    transform-origin: center bottom;
    width: 100%;
}

@media (min-width: 768px) {
    .video video {
        height: 100%;
        transform: scale(0.476635514);
        transform-origin: left bottom;
    }
}

.fv__hero {
    height: 100svh;
    width: 100%;
}

.fv__hero-container {
    height: 100%;
    margin: 0 auto;
    max-width: calc(750px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.fv__hero__main {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    height: 100%;
    justify-content: center;
    margin: 0 auto;
    padding: 0 0 9.6256684492vw;
    position: relative;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .fv__hero__main {
        margin: 0 0 0 auto;
        padding: 50px 0 0;
    }
}

.fv__hero__main__title {
    font-size: 10px;
    font-weight: inherit;
    line-height: 1.2;
    margin: 0;
    pointer-events: none;
}

.fv__hero__main__title img, .fv__hero__main__title svg {
    width: 31.550802139vw;
}

@media (min-width: 768px) {
    .fv__hero__main__title img, .fv__hero__main__title svg {
        width: 146px;
    }
}

.fv__hero__main__title svg > g {
    -webkit-clip-path: inset(0px);
    clip-path: inset(0px);
    display: block;
}

.fv__hero__main__scroll {
    bottom: 0;
    display: none;
    left: 0;
    margin: 0 auto;
    max-width: calc(750px + var(--c-pad)*2);
    opacity: 0;
    padding: 0 80px 0 0;
    position: fixed;
    right: 0;
    width: 100%;
}

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

.fv__hero__main__scroll a {
    display: block;
    font-size: 10px;
    line-height: 1.2;
    margin: 0 0 0 auto;
    padding: 0 0 14.7058823529vw;
    position: relative;
    transition: opacity var(--duration) var(--cubic) 0s;
    width: -webkit-fit-content;
    width: fit-content;
}

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

.fv__hero__main__scroll a:after {
    background-color: var(--color-black);
    bottom: 0;
    content: "";
    display: block;
    height: 13.3689839572vw;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: auto;
    width: 0.2673796791vw;
}

@media (min-width: 768px) {
    .fv__hero__main__scroll a:after {
        height: 50px;
        width: 1px;
    }
}

.fv__hero__main__scroll a:focus {
    opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
    .fv__hero__main__scroll a:hover {
        opacity: 0.7;
    }
}

.fv__spacer {
    height: 300vh;
}

.fv__overview {
    padding: 42.7807486631vw 0 34.7593582888vw;
}

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

.fv__overview-container {
    margin: 0 auto;
    max-width: calc(904px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.fv__overview__title {
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs18);
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.14;
    margin: 0 auto 25.4010695187vw;
    text-orientation: upright;
    white-space: nowrap;
    width: -webkit-fit-content;
    width: fit-content;
    writing-mode: vertical-rl;
}

@media (min-width: 768px) {
    .fv__overview__title {
        font-size: var(--fs20);
        letter-spacing: 0.16em;
        margin: 0 0 80px;
        width: auto;
    }
}

.fv__overview__title > span {
    color: var(--color-white);
    display: block;
    margin: 0 4.8128342246vw 0 0;
}

@media (min-width: 768px) {
    .fv__overview__title > span {
        margin: 0 12px 0 0;
    }
}

.fv__overview__title > span:first-child {
    margin: 0;
}

.fv__overview__content {
    margin: 0 0 10.6951871658vw;
}

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

.fv__overview__content p {
    color: var(--color-white);
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs13);
    font-weight: 400;
    letter-spacing: 0.26em;
    line-height: 2.15;
    margin: 0;
}

@media (min-width: 768px) {
    .fv__overview__content p {
        font-size: var(--fs15);
        letter-spacing: 0.2em;
        line-height: 2;
    }
}

.fv__overview__action a {
    color: var(--color-white);
    display: block;
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs13);
    font-weight: 400;
    letter-spacing: 0.48em;
    line-height: 1.2;
    margin: 0;
    padding: 0 0 0 16.0427807487vw;
    position: relative;
    text-decoration: none;
    transition: opacity var(--duration) var(--cubic) 0s;
    width: -webkit-fit-content;
    width: fit-content;
}

@media (min-width: 768px) {
    .fv__overview__action a {
        font-size: var(--fs15);
        padding: 0 0 0 60px;
    }
}

.fv__overview__action a:before {
    background-color: var(--color-white);
    bottom: 0;
    content: "";
    display: block;
    height: 0.2673796791vw;
    left: 0;
    margin: auto 0;
    position: absolute;
    right: auto;
    top: 0;
    width: 13.3689839572vw;
}

@media (min-width: 768px) {
    .fv__overview__action a:before {
        height: 1px;
        width: 50px;
    }
}

.fv__overview__action a > span {
    display: block;
}

.fv__overview__action a:focus {
    opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
    .fv__overview__action a:hover {
        opacity: 0.7;
    }
}

.product {
    background-color: var(--color-white);
    margin: 0 0 -0.2673796791vw;
    padding: 88.2352941176vw 0 77.5401069519vw;
    position: relative;
}

@media (min-width: 768px) {
    .product {
        margin: 0 0 -1px;
        padding: 400px 0 370px;
    }
}

.detail {
    background-color: var(--color-white);
    margin: 0 0 -0.2673796791vw;
    padding: 0 0 41.4438502674vw;
}

@media (min-width: 768px) {
    .detail {
        margin: 0 0 -1px;
        padding: 0 0 250px;
    }
}

.detail-container {
    margin: 0 auto;
    max-width: calc(1164px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.detail__content {
    margin: 0 0 38.5026737968vw;
}

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

.detail__content p {
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs15);
    font-weight: 400;
    letter-spacing: 0.38em;
    line-height: 2.66;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .detail__content p {
        font-size: var(--fs20);
        letter-spacing: 0.48em;
        line-height: 2.25;
    }
}

.detail__item-wrapper {
    margin: 0 calc(var(--c-pad)*-1);
}

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

.detail__item {
    margin: 0 auto 16.0427807487vw;
    max-width: 904px;
    width: 100%;
}

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

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

.detail__item-inner {
    align-items: flex-start;
    display: flex;
    flex-flow: row nowrap;
    gap: 4.2780748663vw;
    justify-content: center;
    margin: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .detail__item-inner {
        gap: 96px;
        max-width: 736px;
    }
}

.detail__item__title {
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs18);
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.08;
    margin: 0;
    padding: 0 var(--c-pad);
    text-orientation: upright;
    white-space: nowrap;
    writing-mode: vertical-rl;
}

@media (min-width: 768px) {
    .detail__item__title {
        font-size: var(--fs23);
        padding: 0;
    }
}

.detail__item__title > span {
    display: block;
}

.detail__item__main {
    padding: 21.3903743316vw 0 0;
    width: 100%;
}

@media (min-width: 768px) {
    .detail__item__main {
        max-width: 602px;
        padding: 80px 0 0;
    }
}

.detail__item__main__fig {
    margin: 0 0 6.4171122995vw;
}

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

.detail__item__main__content {
    width: -webkit-fit-content;
    width: fit-content;
}

.detail__item__main__content p {
    font-size: var(--fs12);
    letter-spacing: 0.25em;
    line-height: 2.08;
    margin: 0;
}

@media (min-width: 768px) {
    .detail__item__main__content p {
        font-size: var(--fs15);
        line-height: 1.86;
    }
}

.detail__item--1 .detail__item-inner {
    flex-direction: row-reverse;
}

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

@media (max-width: 767px) {
    .detail__item--1 .detail__item__main__content {
        padding-left: var(--c-pad);
    }
}

@media (min-width: 768px) {
    .detail__item--2 {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 768px) {
    .detail__item--2 .detail__item-inner {
        flex-direction: row-reverse;
    }
}

@media (max-width: 767px) {
    .detail__item--2 .detail__item__main__content {
        padding-right: var(--c-pad);
    }
}

@media (min-width: 768px) {
    .detail__item--2 .detail__item__main__content {
        margin-left: auto;
        margin-right: 0;
    }

    .detail__item--2 .detail__item__main__content p {
        letter-spacing: 0.2em;
    }
}

@media (min-width: 768px) {
    .detail__item--3 {
        margin-left: auto;
        margin-right: 0;
    }
}

.detail__item--3 .detail__item-inner {
    flex-direction: row-reverse;
}

@media (min-width: 768px) {
    .detail__item--3 .detail__item-inner {
        flex-direction: row;
        margin: 0 0 0 auto;
    }
}

@media (max-width: 767px) {
    .detail__item--3 .detail__item__main__content {
        padding-left: var(--c-pad);
    }
}

@media (max-width: 767px) {
    .detail__item--4 .detail__item__main__content {
        padding-right: var(--c-pad);
    }
}

.menu {
    background-color: var(--color-white);
    margin: 0 0 -0.2673796791vw;
}

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

.msg {
    background-color: var(--color-white);
    margin: 0 0 -0.2673796791vw;
    padding: 77.5401069519vw 0 66.8449197861vw;
}

@media (min-width: 768px) {
    .msg {
        margin: 0 0 -1px;
        padding: 375px 0 300px;
    }
}

.msg-container {
    margin: 0 auto;
    max-width: calc(1164px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

.msg__lead {
    margin: 0 0 18.7165775401vw;
}

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

.msg__lead p {
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs13);
    font-weight: 400;
    letter-spacing: 0.36em;
    line-height: 2.84;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .msg__lead p {
        font-size: var(--fs15);
        line-height: 2;
    }
}

.msg__main p {
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs15);
    font-weight: 400;
    letter-spacing: 0.48em;
    line-height: 2.66;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .msg__main p {
        font-size: var(--fs20);
        line-height: 2.25;
    }
}

.spacer {
    height: 150svh;
}

@media (min-width: 768px) {
    .spacer {
        height: 200svh;
    }
}

.news {
    background-color: var(--color-white);
    margin: 0 0 -0.2673796791vw;
    padding: 45.4545454545vw 0 45.4545454545vw;
}

@media (min-width: 768px) {
    .news {
        margin: 0 0 -1px;
        padding: 170px 0 220px;
    }
}

.news-container {
    align-items: flex-start;
    display: flex;
    flex-flow: row-reverse nowrap;
    gap: 7.486631016vw;
    justify-content: space-between;
    margin: 0 auto;
    max-width: calc(904px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 768px) {
    .news-container {
        gap: 70px;
    }
}

@media (min-width: 992px) {
    .news-container {
        gap: 140px;
    }
}

.news__head {
    flex: 0 0 9.0909090909vw;
    margin: 0;
    min-width: 0px;
}

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

.news__head__title {
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs26);
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1.16;
    margin: 0 0 22.7272727273vw;
    text-orientation: upright;
    white-space: nowrap;
    width: -webkit-fit-content;
    width: fit-content;
    writing-mode: vertical-rl;
}

@media (min-width: 768px) {
    .news__head__title {
        font-size: var(--fs30);
        margin: 0 0 64px;
    }
}

.news__head__title > span {
    display: block;
}

.news__head__action a {
    color: inherit;
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs13);
    font-weight: 400;
    letter-spacing: 0.32em;
    line-height: 1.33;
    margin: 0;
    padding: 17.3796791444vw 0 0;
    position: relative;
    text-decoration: none;
    text-orientation: upright;
    transform: translateX(5.3475935829vw);
    transition: opacity var(--duration) var(--cubic) 0s;
    white-space: nowrap;
    width: -webkit-fit-content;
    width: fit-content;
    writing-mode: vertical-rl;
}

@media (min-width: 768px) {
    .news__head__action a {
        font-size: var(--fs15);
        padding: 65px 0 0;
        transform: translateX(8px);
    }
}

.news__head__action a:before {
    background-color: var(--color-black);
    bottom: auto;
    content: "";
    display: block;
    height: 13.3689839572vw;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 0.2673796791vw;
}

@media (min-width: 768px) {
    .news__head__action a:before {
        height: 50px;
        width: 1px;
    }
}

.news__head__action a > span {
    display: block;
}

.news__head__action a:focus {
    opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
    .news__head__action a:hover {
        opacity: 0.7;
    }
}

.news__list {
    flex: 0 0 calc(100% - 16.57754vw);
    min-width: 0px;
    padding: 17.1122994652vw 0 0;
}

@media (min-width: 768px) {
    .news__list {
        flex: 0 0 calc(100% - 104px);
        padding: 120px 0 0;
    }
}

@media (min-width: 992px) {
    .news__list {
        flex: 0 0 calc(100% - 174px);
    }
}

.news__list__item {
    border-bottom: 0.2673796791vw solid var(--color-black);
    margin: 0 0 4.8128342246vw;
}

@media (min-width: 768px) {
    .news__list__item {
        border-bottom-width: 1px;
        margin: 0 0 30px;
    }
}

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

.news__list__item a {
    align-items: flex-start;
    color: inherit;
    display: flex;
    flex-flow: row wrap;
    gap: 1.3368983957vw;
    padding: 2.6737967914vw 0;
    text-decoration: none;
    transition: opacity var(--duration) var(--cubic) 0s;
    width: 100%;
}

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

.news__list__item a > time {
    display: block;
    flex: 0 0 100%;
    font-size: var(--fs12);
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 0;
    min-width: 0px;
}

@media (min-width: 768px) {
    .news__list__item a > time {
        flex: 0 0 90px;
        font-size: var(--fs13);
    }
}

.news__list__item a > span {
    display: block;
    flex: 1 1 100%;
    font-size: var(--fs12);
    letter-spacing: 0.14em;
    line-height: 1.4;
    margin: 0;
    min-width: 0px;
}

@media (min-width: 768px) {
    .news__list__item a > span {
        font-size: var(--fs13);
        letter-spacing: 0.16em;
    }
}

.news__list__item a:focus {
    opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
    .news__list__item a:hover {
        opacity: 0.7;
    }
}

.group {
    background-color: var(--color-white);
    padding: 0 0 45.4545454545vw;
}

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

.group-container {
    align-items: flex-start;
    display: flex;
    flex-flow: row-reverse nowrap;
    gap: 5.3475935829vw;
    justify-content: space-between;
    margin: 0 auto;
    max-width: calc(904px + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 768px) {
    .group-container {
        gap: 70px;
    }
}

@media (min-width: 992px) {
    .group-container {
        gap: 140px;
    }
}

.group__head {
    flex: 0 0 9.0909090909vw;
    margin: 0;
    min-width: 0px;
}

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

.group__head__title {
    font-family: var(--ff-fot-tbom-pr6-r);
    font-size: var(--fs26);
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1.16;
    margin: 0;
    text-orientation: upright;
    white-space: nowrap;
    writing-mode: vertical-rl;
}

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

.group__head__title > span {
    display: block;
}

.group__list {
    align-items: flex-start;
    display: flex;
    flex: 0 0 calc(100% - 14.4385vw);
    flex-flow: row wrap;
    gap: 11.7647058824vw 5.3475935829vw;
    justify-content: center;
    min-width: 0px;
}

@media (min-width: 768px) {
    .group__list {
        flex: 0 0 calc(100% - 104px);
        flex-wrap: nowrap;
        gap: 20px;
    }
}

@media (min-width: 992px) {
    .group__list {
        flex: 0 0 calc(100% - 174px);
        gap: 32px;
    }
}

.group__list__item {
    flex: 0 0 calc(50% - 2.6738vw);
}

@media (min-width: 768px) {
    .group__list__item {
        flex: 0 0 calc(25% - 15px);
    }
}

@media (min-width: 992px) {
    .group__list__item {
        flex: 0 0 calc(25% - 24px);
    }
}

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

.group__list__item__link__logo {
    margin: 0 0 5.3475935829vw;
    text-align: center;
}

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

.group__list__item__link__logo img {
    width: 21.3903743316vw;
}

@media (min-width: 768px) {
    .group__list__item__link__logo img {
        width: 90px;
    }
}

.group__list__item__link__title {
    font-size: var(--fs11);
    letter-spacing: 0.06em;
    line-height: 2.18;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .group__list__item__link__title {
        letter-spacing: 0.1em;
    }
}

@media (min-width: 992px) {
    .group__list__item__link__title {
        font-size: var(--fs13);
        line-height: 2;
    }
}

.group__list__item__link:focus {
    opacity: 0.7;
}

@media (hover: hover) and (pointer: fine) {
    .group__list__item__link:hover {
        opacity: 0.7;
    }
}