@charset "utf-8";
/* CSS Document */

/* base
-----------------------------------------------*/
/* ========== base style ========== */

/* common parts
-----------------------------------------------*/
/* ========== text ========== */
/* ========== border ========== */
/* ========== float ========== */
/* ========== display ========== */
/* ========== position ========== */
/* ========== overflow ========== */
/* ========== width ========== */
/* ========== margin ========== */
/* ========== background ========== */
/* ========== device displaying ========== */
/* ========== animation for ScrollTrigger.min.js  ========== */

/* other style
-----------------------------------------------*/

/* ========== device displaying ========== */
.sp_none{ display: none; }
img.sp_none{ display: none; }
.sp_only{ display: block; }
img.sp_only{ display: block; }
@media (min-width:768px){
	.sp_none{display: block;}
	img.sp_none{display: block;}
	.tab_none { display: none; }
	img.tab_none { display: none; }
	.sp_only{display: none;}
	img.sp_only{display: none;}
	.sp_only{display: none;}
	img.sp_only{display: none;}
}
.spc_none{ display: block; }
@media (min-width:720px){.pc_none{display: block;}}
.pc_only{ display: none; }
@media (min-width:721px){.pc_none{display: none;}
.pc_only{display: block;}
.tab_none{ display: block; }
}

/* ========== animation for ScrollTrigger.min.js  ========== */
.invisible {
transition: opacity 1s ease;
opacity: 0.0;
}
.visible {
transition: opacity 1s ease;
opacity: 1.0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.main-visual.visible .main-visual__images {
    visibility: visible;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}
.main-visual.visible .main-visual__title {
    visibility: visible;
    animation-duration: 1s;
    animation-delay: 0.7s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

.visible.anime-inview{
    visibility: visible;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-fill-mode: both;
    animation-name: fadeIn;
}

/* font
-----------------------------------------------*/
.lead__text {
font-family: sawarabi-gothic, sans-serif;
font-style: normal;
font-weight: 500;
}
.look__title,
.outro__bnt-label,
.role,
.modal {
font-family: oswald, sans-serif;
font-style: normal;
font-weight: 300;
}

/* グリッドレイアウト */
.look {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* SP: 2列 */
    gap: 10px;
}

@media (min-width: 768px) {
}

/* モーダルの表示制御（背景・オーバーレイ） */
.modal-content {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 中央寄せから「上合わせ」に変更（重要） */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    overflow-y: auto; /* 縦方向にスクロールを許可 */
}

/* モーダルの中身を包むラッパー */
.modal-content__wrapper {
    position: relative;
    max-width: 90%; /* 画面端に余裕を持たせる */
    margin: auto;   /* 縦幅が画面内なら中央、超えたら上から配置される */
}

/* モーダルがアクティブな時 */
.modal-content.is-active {
    opacity: 1;
    visibility: visible;
}

/* 個別のモーダルの中身 */
.modal {
    display: none;
}
.modal.is-active {
    display: block;
}

/* other style
-----------------------------------------------*/
body{margin:0;}
img{vertical-align: top;}
.main{background-color: #464E20;}

/* スクリーンサイズが767px以下の場合に適用 */
@media screen and (max-width: 767px) {
    .main-visual{position:relative;width:100vw;z-index:2;}
    .main-visual__logo{position:absolute;top:5.9vw;left:50%;transform:translateX(-50%);width:30.77vw;}
    .main-visual__logo-item{width:30.77vw;height:5.13vw;}
    .main-visual__title{position:absolute;top:100.77vw;left:50%;transform:translateX(-50%);width:68.98vw;}
    .main-visual__title-item{width:68.98vw;height:24.11vw;}
    .main-visual__image{width:100vw;}
    .main-visual__image-item{width:100vw;height:148.72vw;}
    .lead{padding:11.8vw 0 11.54vw;text-align: center;}
    .lead__text{color:#fff;margin:0;font-size:3.08vw;line-height:2.25;letter-spacing:0.02em;}
    .lead__text + .lead__text{margin-top:6.93vw;}
    .look {position:relative;width:100%;display:grid;gap:0;grid-template-columns: repeat(2, 1fr);z-index:1;}
    .look__item{position:relative;cursor: pointer;}
    .look__item.--filler{display:flex;justify-content:center;align-items: center;cursor: auto;}
    .look__title{position:absolute;bottom:3.08vw;left:3.59vw;margin:0;display:flex;gap: 1.29vw 0;flex-direction: column;align-items:center;color:#fff;}
    .look__title-look{font-size:6.16vw;line-height: 1;letter-spacing: 0.02em;}
    .look__title-number{font-size:7.7vw;line-height: 1;letter-spacing: 0.02em;}
    .look__item-image{width:100%;height: auto;}
    .look__item-image.--filler{width:34.36vw;height:12.06vw;}
    .outro{position:relative;}
    .outro__image{width:100vw;}
    .outro__image-item{width:100vw;height:148.72vw;}
    .outro__wrapper{position:absolute;top:62.56vw;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;justify-content: center;}
    a.outro__btn{width:38.46vw;height:10.51vw;border:1px solid #fff;display:flex;justify-content: center;align-items:center;font-size:4.62vw;line-height:1;letter-spacing:0.2em;text-decoration: none;color:#fff;}
    .outro__bnt-label{}
    .role{margin:30.77vw 0 0;font-size:3.08vw;line-height:1.86;letter-spacing:0.03em;text-align:center;color:#fff;}
    .role__title{text-decoration:underline;}
    .role__item{margin:0;}
    .modal-content__wrapper{max-width: 100vw;}
    .modal__wrapper{}
    .modal__look-image{display:none;}
    .modal__credit-wrapper{position:relative;}
    .modal__credit-wrapper:before{position:absolute;top:0;left:0;content:"";width:100%;height:100%;background-color:#666;mix-blend-mode: multiply;}
    .credit-wrapper{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:0 0 14.62vw;}
    .credit {display: grid;gap:0;grid-template-columns: auto auto auto;width: fit-content;margin: 0;padding:0;border-top:1px solid #fff;}
    .credit__row {display: contents;}
    .credit__name {position: relative;margin:0;padding: 2.56vw 0 3.08vw 0.69vw;display: flex;align-items: center;font-size:4.1vw;line-height: 1;letter-spacing:0.1em;color:#fff;white-space: nowrap;}
    .credit__price {position: relative;margin:0;padding: 2.56vw 0 3.08vw 7.69vw;display: flex;align-items: center;justify-content: flex-end;font-size:4.1vw;line-height: 1;letter-spacing:0.1em;color:#fff;}
    .credit__link {position: relative;margin:0;padding: 2.56vw 0 3.08vw 14.1vw;display: flex;align-items: center;}
    .credit__name::after,
    .credit__price::after,
    .credit__link::after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;border-bottom: 1px solid #fff;}
    a.credit__link-btn{margin:0;padding:0;width:19.23vw;height:5.38vw;display:flex;justify-content:center;align-items:center;background:#859D17;color:#fff;font-size:3.59vw;line-height: 1;letter-spacing: 0;text-decoration:none;transition: transform 0.5s;}
    a.credit__link-btn:hover{opacity: 0.7;}
    .credit__link-btn-item{display:block;transform: translateY(-0.5vw);}
    .credit__btn-area{}
    a.credit__btn{margin:12.31vw auto 0;width:31.54vw;height:7.95vw;display:flex;justify-content: center;align-items: center;background:#859D17;color:#fff;font-size:3.59vw;line-height: 1;letter-spacing: 0;text-decoration:none;transition: transform 0.5s;}
    a.credit__btn:hover{opacity: 0.7;}
    .credit__bnt-label{display:block;transform: translateY(-0.25vw);}

    .modal__image{width:100vw;height:149.74vw;}
    .modal-close-btn {position: absolute;top: 2.56vw; right: 2.56vw;width:6.41vw;height:6.41vw;display:flex;justify-content:center;align-items:center;background-color:#859D17;border-radius:9999px;border:none;cursor: pointer;z-index: 1001;}
    .modal-close-btn__item{width:4.87vw;height:4.87vw;transform: translate(0.1vw, 0.1vw);}
}/* スクリーンサイズが767px以下の場合に適用 */

/* スクリーンサイズが768px以上の場合に適用 */
@media screen and (min-width: 768px) {
    .main-visual{position:relative;width:100%;;z-index:2;}
    .main-visual__logo{position:absolute;top:1.39vw;left:50%;transform:translateX(-50%);width:10.79vw;}
    .main-visual__logo-item{width:10.79vw;height:1.81vw;}
    .main-visual__title{position:absolute;top:31.94vw;right:13.8vw;width:24.38vw;}
    .main-visual__title-item{width:24.38vw;height:7.5vw;}
    .main-visual__image{width:100%;}
    .main-visual__image-item{width:100%;height:71.46vw;}
    .lead{padding:4.3vw 4.3vw 4.7vw;text-align: center;}
    .lead__text{color:#fff;margin:0;font-size:1.04vw;line-height:2.67;letter-spacing:0.02em;}
    .look {position:relative;width:100%;display:grid;gap:0;grid-template-columns: repeat(3, 1fr);z-index:1;}
    .look__item{position:relative;cursor: pointer;}
    .look__item.--filler{display:none;}
    .look__title{position:absolute;top:2.08vw;right:2.08vw;margin:0;display:flex;gap: 0.56vw 0;flex-direction: column;align-items:center;color:#fff;}
    .look__title-look{font-size:2.2vw;line-height: 1;letter-spacing: 0.02em;}
    .look__title-number{font-size:2.78vw;line-height: 1;letter-spacing: 0.02em;}
    .look__item-image{width:100%;height: auto;}
    .outro{position:relative;}
    .outro__image{width:100%;}
    .outro__image-item{width:100%;height:71.46vw;}
    .outro__wrapper{position:absolute;top:33.96vw;right:19.58vw;display:flex;flex-direction:column;justify-content: center;}
    a.outro__btn{width:14.93vw;height:3.54vw;border:1px solid #fff;display:flex;justify-content: center;align-items:center;font-size:1.39vw;line-height:1;letter-spacing:0.2em;text-decoration: none;color:#fff;}
    .outro__bnt-label{transform:translateY(-0.1vw);}
    .role{margin:15.63vw 0 0;font-size:0.97vw;line-height:1.86;letter-spacing:0.03em;text-align:center;color:#fff;}
    .role__title{text-decoration:underline;}
    .role__item{margin:0;}
    .modal__wrapper{display:flex;}
    .modal__look-image{width:38.1vw;height:56.9vw;}
    .modal__credit-wrapper{position:relative;}
    .modal__credit-wrapper:before{position:absolute;top:0;left:0;content:"";width:100%;height:100%;background-color:#666;mix-blend-mode: multiply;}
    .credit-wrapper{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:0 0 10.42vw;}
    .credit {display: grid;gap:0;grid-template-columns: auto auto auto;width: fit-content;margin: 0;padding:0;border-top:1px solid #fff;}
    .credit__row {display: contents;}
    .credit__name {position: relative;margin:0;padding: 0.7vw 0 0.8vw 0.69vw;display: flex;align-items: center;font-size:1.11vw;line-height: 1;letter-spacing:0.1em;color:#fff;white-space: nowrap;}
    .credit__price {position: relative;margin:0;padding: 0.7vw 0 0.8vw 1.9vw;display: flex;align-items: center;justify-content: flex-end;font-size:1.11vw;line-height: 1;letter-spacing:0.1em;color:#fff;}
    .credit__link {position: relative;margin:0;padding: 0.7vw 0 0.8vw 3.8vw;display: flex;align-items: center;}
    .credit__name::after,
    .credit__price::after,
    .credit__link::after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;border-bottom: 1px solid #fff;}
    a.credit__link-btn{margin:0;padding:0;width:5.2vw;height:1.5vw;display:flex;justify-content:center;align-items:center;background:#859D17;color:#fff;font-size:0.97vw;line-height: 1;letter-spacing: 0;text-decoration:none;transition: transform 0.5s;}
    a.credit__link-btn:hover{opacity: 0.7;}
    .credit__link-btn-item{display:block;}
    .credit__btn-area{}
    a.credit__btn{margin:3.33vw auto 0;width:8.6vw;height:2.2vw;display:flex;justify-content: center;align-items: center;background:#859D17;color:#fff;font-size:0.97vw;line-height: 1;letter-spacing: 0;text-decoration:none;transition: transform 0.5s;}
    a.credit__btn:hover{opacity: 0.7;}
    .credit__bnt-label{display:block;}

    .modal__image{width:38.1vw;height:56.9vw;}
    .modal-close-btn {position: absolute;top: 1.38vw; right: 1.38vw;width:1.74vw;height:1.74vw;display:flex;justify-content:center;align-items:center;background-color:#859D17;border-radius:9999px;border:none;cursor: pointer;z-index: 1001;}
    .modal-close-btn__item{width:1.32vw;height:1.32vw;transform: translate(0.03vw, 0.03vw);}
}/* スクリーンサイズが768px以上の場合に適用 */