@charset "UTF-8";
body {
    margin: 0;
    padding: 0;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.68;
    letter-spacing: 0.038em;
    font-size: 12px;
}

*[data-aos="fade-in"], *[data-aos="fade-up"], *[data-aos="fade-right"] {
    transition-timing-function: cubic-bezier(.47,0,.745,.715);
}

a {
    color: #000;
    transition: all .3s ease-out;
}

.l-height11 {
    line-height: 1.1;
}

.l-height12 {
    line-height: 1.2;
}

.l-height13 {
    line-height: 1.3;
}

.l-height15 {
    line-height: 1.5;
}

.l-height18 {
    line-height: 1.8;
}

.l-height20 {
    line-height: 2;
}

.l-height25 {
    line-height: 2.5;
}

.p-relative {
    position: relative;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

.bg-black {
    background: #000000;
}

.bg-gray {
    background: #909090;
}

.bg-white {
    background: #fff;
}

.bold {
    font-weight: 600;
}

.italic {
    font-style: italic;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-white {
    color: #fff!important;
}

.text-gray {
    color: #777777!important;
}

.text-black {
    color: #000!important;
}

.mx1000 {
    max-width: 1000px!important;
    margin-left: auto;
    margin-right: auto;
}

.mx900 {
    max-width: 900px!important;
    margin-left: auto;
    margin-right: auto;
}

.mx780 {
    max-width: 780px!important;
    margin-left: auto;
    margin-right: auto;
}

.mx680 {
    max-width: 680px!important;
    margin-left: auto;
    margin-right: auto;
}

.mx650 {
    max-width: 650px!important;
    margin-left: auto;
    margin-right: auto;
}

.mx600 {
    max-width: 600px!important;
    margin-left: auto;
    margin-right: auto;
}

.mx560 {
    max-width: 560px!important;
    margin-left: auto;
    margin-right: auto;
}

.mx500 {
    max-width: 500px!important;
    margin-left: auto;
    margin-right: auto;
}

.mx460 {
    max-width: 460px!important;
    margin-left: auto;
    margin-right: auto;
}

.mx400 {
    max-width: 400px!important;
    margin-left: auto;
    margin-right: auto;
}

.pt05 {
    padding-top: 5px!important;
}

.pt10 {
    padding-top: 10px!important;
}

.pt20 {
    padding-top: 20px!important;
}

.pt30 {
    padding-top: 30px!important;
}

.pt40 {
    padding-top: 40px!important;
}

.pt50 {
    padding-top: 50px!important;
}

.pt60 {
    padding-top: 60px!important;
}

.pt70 {
    padding-top: 70px!important;
}

.pt80 {
    padding-top: 80px!important;
}

.pt90 {
    padding-top: 90px!important;
}

.pt100 {
    padding-top: 200px!important;
}

.pt120 {
    padding-top: 120px!important;
}

.pb10 {
    padding-bottom: 10px!important;
}

.pb20 {
    padding-bottom: 20px!important;
}

.pb30 {
    padding-bottom: 30px!important;
}

.pb40 {
    padding-bottom: 40px!important;
}

.pb50 {
    padding-bottom: 50px!important;
}

.pb60 {
    padding-bottom: 60px!important;
}

.pb70 {
    padding-bottom: 70px!important;
}

.pb80 {
    padding-bottom: 80px!important;
}

.pb90 {
    padding-bottom: 90px!important;
}

.pb100 {
    padding-bottom: 100px!important;
}

.pb120 {
    padding-bottom: 120px!important;
}

.mt10 {
    margin-top: 10px!important;
}

.mt20 {
    margin-top: 20px!important;
}

.mt30 {
    margin-top: 30px!important;
}

.mt40 {
    margin-top: 40px!important;
}

.mt50 {
    margin-top: 50px!important;
}

.mt60 {
    margin-top: 60px!important;
}

.mt70 {
    margin-top: 70px!important;
}

.mt80 {
    margin-top: 80px!important;
}

.mt90 {
    margin-top: 90px!important;
}

.mt100 {
    margin-top: 100px!important;
}

.mt120 {
    margin-top: 120px!important;
}

.mb10 {
    margin-bottom: 10px!important;
}

.mb20 {
    margin-bottom: 20px!important;
}

.mb30 {
    margin-bottom: 30px!important;
}

.mb40 {
    margin-bottom: 40px!important;
}

.mb50 {
    margin-bottom: 50px!important;
}

.mb60 {
    margin-bottom: 60px!important;
}

.mb70 {
    margin-bottom: 70px!important;
}

.mb80 {
    margin-bottom: 80px!important;
}

.mb90 {
    margin-bottom: 90px!important;
}

.mb100 {
    margin-bottom: 200px!important;
}

.mb120 {
    margin-bottom: 120px!important;
}

.fs11 {
    font-size: 11px!important;
}

.fs12 {
    font-size: 12px!important;
}

.fs13 {
    font-size: 13px!important;
}

.fs14 {
    font-size: 14px!important;
}

.fs15 {
    font-size: 15px!important;
}

.fs16 {
    font-size: 16px!important;
}

.fs18 {
    font-size: 18px!important;
}

.fs20 {
    font-size: 20px!important;
}

.fs22 {
    font-size: 22px!important;
}

.fs24 {
    font-size: 24px!important;
}

.fs26 {
    font-size: 26px!important;
}

.fs28 {
    font-size: 28px!important;
}

.fs30 {
    font-size: 30px!important;
}

.fs34 {
    font-size: 34px!important;
}

.fs48 {
    font-size: 48px!important;
}


@media only screen and (max-width: 767px) {

    .sp-imgmax {
        width: 111.11%;
        margin-left: -5.555%;
        margin-right: -5.555%;
    }
    .is-pc {
        display: none;
    }
    .pt05 {
        padding-top: 4px!important;
    }
    .pt10 {
        padding-top: 8px!important;
    }
    .pt20 {
        padding-top: 15px!important;
    }
    .pt30 {
        padding-top: 20px!important;
    }
    .pt40 {
        padding-top: 25px!important;
    }
    .pt50 {
        padding-top: 30px!important;
    }
    .pt60 {
        padding-top: 35px!important;
    }
    .pt70 {
        padding-top: 40px!important;
    }
    .pt80 {
        padding-top: 50px!important;
    }
    .pt90 {
        padding-top: 60px!important;
    }
    .pt100 {
        padding-top: 170px!important;
    }
    .pt120 {
        padding-top: 80px!important;
    }
    .pb10 {
        padding-bottom: 8px!important;
    }
    .pb20 {
        padding-bottom: 15px!important;
    }
    .pb30 {
        padding-bottom: 20px!important;
    }
    .pb40 {
        padding-bottom: 25px!important;
    }
    .pb50 {
        padding-bottom: 30px!important;
    }
    .pb60 {
        padding-bottom: 35px!important;
    }
    .pb70 {
        padding-bottom: 40px!important;
    }
    .pb80 {
        padding-bottom: 50px!important;
    }
    .pb90 {
        padding-bottom: 60px!important;
    }
    .pb100 {
        padding-bottom: 70px!important;
    }
    .pb120 {
        padding-bottom: 80px!important;
    }
    .mt10 {
        margin-top: 8px!important;
    }
    .mt20 {
        margin-top: 15px!important;
    }
    .mt30 {
        margin-top: 20px!important;
    }
    .mt40 {
        margin-top: 25px!important;
    }
    .mt50 {
        margin-top: 30px!important;
    }
    .mt60 {
        margin-top: 35px!important;
    }
    .mt70 {
        margin-top: 40px!important;
    }
    .mt80 {
        margin-top: 50px!important;
    }
    .mt90 {
        margin-top: 60px!important;
    }
    .mt100 {
        margin-top: 70px!important;
    }
    .mt120 {
        margin-top: 80px!important;
    }
    .mb10 {
        margin-bottom: 8px!important;
    }
    .mb20 {
        margin-bottom: 15px!important;
    }
    .mb30 {
        margin-bottom: 20px!important;
    }
    .mb40 {
        margin-bottom: 25px!important;
    }
    .mb50 {
        margin-bottom: 30px!important;
    }
    .mb60 {
        margin-bottom: 35px!important;
    }
    .mb70 {
        margin-bottom: 45px!important;
    }
    .mb80 {
        margin-bottom: 50px!important;
    }
    .mb90 {
        margin-bottom: 60px!important;
    }
    .mb100 {
        margin-bottom: 170px!important;
    }
    .mb120 {
        margin-bottom: 80px!important;
    }
    .fs11 {
        font-size: 10px!important;
    }
    .fs12 {
        font-size: 11px!important;
    }
    .fs13 {
        font-size: 12px!important;
    }
    .fs14 {
        font-size: 13px!important;
    }
    .fs15 {
        font-size: 14px!important;
    }
    .fs16 {
        font-size: 15px!important;
    }
    .fs18 {
        font-size: 16px!important;
    }
    .fs20 {
        font-size: 17px!important;
    }
    .fs22 {
        font-size: 18px!important;
    }
    .fs24 {
        font-size: 20px!important;
    }
    .fs26 {
        font-size: 22px!important;
    }
    .fs28 {
        font-size: 24px!important;
    }
    .fs30 {
        font-size: 24px!important;
    }
    .fs34 {
        font-size: 23px!important;
    }
    .fs48 {
        font-size: 32px!important;
    }

}

@media screen and (min-width: 768px) {
    body {
        font-size: 13px;
    }
    .is-sp {
        display: none;
    }
}

@media screen and (min-width: 1000px) {
}


/* common */

/*
body.open,
html.open {
    overflow: hidden;
}
*/

.body {
    position: relative;
}

#wrapper {
    position: relative;
}

.main-contents {
    background: #fff;
}

#bg-loading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background: #fff;
    z-index: 999;
}

.pop-up {
    z-index: 101;
}

.underline {
    text-decoration: underline!important;
}

.credit li {
    text-align: center;
    padding-bottom: 2px;
}

.credit a {
    padding: 3.5px 0;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 12px;
    font-family: itc-american-typewriter, serif;
    font-weight: 500;
    font-style: normal;
}
@media only screen and (min-width: 768px) {
    .credit a {
        justify-content:flex-start;
    }
}
.credit a[href=""] {
    pointer-events: none;
    text-decoration: none;
}

a.soon, a[href=""] {
    pointer-events: none;
}

.credit a > span {
    padding-right: 8px;
    text-align: left;
}

.credit span.buy {
    display: inline-block;
    background: #fff;
    border: 1px solid #000;
    color: #000;
    padding: 2px 20px 1px;
    transition: all .3s ease-out;
    text-align: center;
    margin-top: 5px;
}

.credit a span {
    transition: all .3s ease-out;
    color: #fff;
}

.credit a div span {
    text-decoration: underline;
    display: inline-block;
}

.credit a div {
    white-space: nowrap;
}

.credit a[href=""] div span {
    text-decoration: none;
}

.credit a div::after {
    content: " tax in";
    display: inline-block;
    color: #fff;
    white-space: nowrap;
}

.w50 {
    padding-left: 25%;
    padding-right: 25%;
}

.w58 {
    padding-left: 21%;
    padding-right: 21%;
}

.w74 {
    padding-left: 13%;
    padding-right: 13%;
}

.w80 {
    padding-left: 10%;
    padding-right: 10%;
}

.w88 {
    padding-left: 6%;
    padding-right: 6%;
}

.soon {
    pointer-events: none;
}

@media screen and (min-width: 768px) {

    .credit a {
        font-size: 13px;
    }

    .credit {
        margin-left: auto;
        margin-right: auto;
    }

}

@media screen and (max-width: 767px) {

    .credit a span.buy {
        padding: 1px 8px 0;
    }

    .txt-inner {
        padding-left: 5%;
        padding-right: 5%;
    }

}


/* footer */

.footer {
    background: #fff;
    padding-bottom: 50px;
    position: relative;
}


.footer a:hover {
    opacity: 0.8;
}
/*

.footer-btn-wrap {
    border-bottom: 1px solid #000;
}
*/

#f-logo {
    display: block;
    margin: 30px auto 0;
    width: 128px;
}

#f-list li {
    text-align: center;
    font-size: 11px;
    padding: 2px 0;
}

#f-copy {
    font-size: 11px;
    line-height: 1;
}

#f-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#f-link li {
    width: 24px;
    margin: 0 15px;
}

#f-link a:hover {
    opacity: 0.75;
}

.f-credit li {
    padding: 2px 0;
}

#f-link-area {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

#f-link-area a:hover {
    opacity: 0.75;
}

.all-btn {
    display: block;
    padding: 12px 12px;
    color: #fff;
    background: #343434;
    font-size: 21px;
}

.all-btn:hover {
    background: #666;
    opacity: 1!important;
}

.btn-area {
    background-color: #000;
}


@media only screen and (min-width: 768px) {

    .f-credit li {
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px) {
    .footer {
        padding-bottom: 25px;
    }
    
    .all-btn {
        padding: 12px;
        font-size: 16px;
        text-decoration: underline;
    }
    
    .all-btn {
        background: transparent; 
    }
    
    .f-credit li {
        font-size: 14px;
    }
    
    .f-copy-wrap {
        padding: 0 7.73%;
    }
    
    #f-copy {
        font-size: 10px;
    }
    
    #f-logo {
        margin: 0;
        width: 25.73%;
    }
    
    .f-copy-wrap {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    
    .all-btn:active {
        color: #fff;
        background: #343434;
    }

}

/* key */

.key-logo {
    position: absolute;
}

@media only screen and (min-width: 768px) {
    .key-logo {
        width: 30.72%;
    left: 76%;
    top: 34.01%;
    transform: translateX(-50%);
    }
    
    #f-copy {
        position: absolute;
        right: 4.37%;
        bottom: 50px;
    }

}

@media only screen and (max-width: 767px) {
    .key-logo {
        width: 66.66%;
        left: 50%;
        bottom: 42.75%;
        transform: translateX(-50%);
    }
}

/* item */

.slide-img-wrap {
    position: relative;
    overflow: hidden;
    
}
.slide-img-wrap_2 {
    display: flex;
}


/* +btn */
.btn-credit {
    cursor: pointer;
    color: #FFF;
    display: block;
    position: absolute;
    right: 25px;
    bottom: 25px;
    transition: all .25s linear;
    z-index: 100!important;
}


.btn-credit::after {
    content: "";
    display: block;
    background-image: url(../images/ico_plus.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.white::after {
    content: "";
    display: block;
    background-image: url(../images/ico_plus_white.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}



.show .btn-credit::after {
    content: "";
    background-image: url(../images/ico_close.svg);
    transform: scale(.8);
}




.box-wrap {
    display: flex;
    flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
    .box-wrap {
        margin: 0 auto;
        max-width: 800px;
    }
}


.img-slide-box {
    position: relative;
    width: 100%;
    background-color: #fff;
    /* z-index: 20!important; */
}

.img-slide-box.link {
    cursor: pointer;
}

.img-slide-box .credit {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 8% 12% 75px;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .25s linear .1s!important;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.5);
}
@media only screen and (min-width: 768px) {
    .img-slide-box .credit {
        padding: 8% 6% 37px;
    }
    }

.show .credit {
    opacity: 1;
    pointer-events: inherit;
    z-index: 99!important;
}

@media only screen and (max-width: 767px) {
    .btn-credit::after {
        width: 20px;
        height: 20px;
    }

    .img-slide-box .credit a {
        font-size: min(14px, 3.47vw);
    }
    /* FV */
    .img-slide-box img:not(.switch) {
        /* aspect-ratio: 750 / 1334; */
        object-fit: cover;
        object-position: center;
    }
    
    
    /* .img-slide-box img.short {
        aspect-ratio: 750 / 750;
    }
    .aspect_1334_750 {
        aspect-ratio: 750 / 1334;
    }
    .aspect_1100_750 {
        aspect-ratio: 750 / 1100;
    }
    .aspect_550_750 {
        aspect-ratio: 750 / 550;
    }
    .aspect_750_1061 {
        aspect-ratio: 750 / 1061;
    }
    .aspect_750_1000 {
        aspect-ratio: 750 / 1000;
    }
    .aspect_375_500 {
        aspect-ratio: 375/ 500;
    }
     */
    /* .block02 {
        order: 2;
    }

    .block03 {
        order: 4;
    }

    .block04 {
        order: 8;
    }

    .block05 {
        order: 6;
    }

    .block06 {
        order: 3;
    }

    .block07 {
        order: 5;
    }

    .block08 {
        order: 7;
    }

    .block09 {
        order: 10;
    }

    .block10 {
        order: 11;
    }

    .block11 {
        order: 9;
    }

    .block12 {
        order: 12;
    }

    .block13 {
        order: 13;
    }

    .block14 {
        order: 14;
    }
    .block14_2 {
        order: 15;
    }
    .block15 {
        order: 16;
    }

    .block16 {
        order: 17;
    }

    .block17 {
        order: 18;
    }

    .block18 {
        order: 17;
    }

    .block19 {
        order: 19;
    }

    .block20 {
        order: 20;
    }

    .block21 {
        order: 21;
    }

    .block22 {
        order: 23;
    }

    .block23 {
        order: 22;
    } */

}

@media only screen and (min-width: 768px) {
    .img-slide-box.half {
        /* width: 50%; */
    }
    
    .btn-credit {
        position: absolute;
        right: 2.86vw;
        bottom: 2.86vw;
    }
    
    .btn-credit::after {
        width: 1.97vw;
        height: 1.97vw;
    }
    
    .img-slide-box .credit a {
        font-size: clamp(14px, 1.81vw, 14px);
    }
    
    .img-slide-box .credit {
        /* padding: 4.86vw 4.86vw 11vw 54.86vw; */
    }
    
    .half.img-slide-box .credit {
        /* padding: 4.86vw 4.86vw 6vw 4.86vw; */
    }
}
.block02 {
    position: sticky;
    top: 0px;
    /* z-index: -1; */
} 
@media only screen and (min-width: 768px) {
    .block02 {
        top: -400px!important;
    } 
    .block05 {
        top: -510px!important;
    } 
    .block15 {
        top: -510px!important;
    } 
    .block20_1 {
        top: -480px!important;
    } 
}
.block05 {
    position: sticky;
    top: 0px;
    /* z-index: -1; */
}
.block15 {
    position: sticky;
    top: 0px;
    /* z-index: -1; */
}
.block20_1 {
    position: sticky;
    top: 0px;
    /* z-index: -1; */
}
.block04 {
    transform: translateZ(10px); 
}
.block03 {
    transform: translateZ(10px); 
}
.block06 {
    transform: translateZ(10px);  
}
.block08 {
    transform: translateZ(10px);  
}
.block09 {
    transform: translateZ(10px);  
}
.block11 {
    transform: translateZ(10px);  
}
.block12 {
    transform: translateZ(10px);  
}
.block13 {
    transform: translateZ(10px);  
}
.block14 {
    transform: translateZ(10px);  
}
.block14_2 {
    transform: translateZ(10px);  
}
.block15_2 {
    transform: translateZ(10px);    
}
.block16 {
    transform: translateZ(10px);    
}
.block18 {
    transform: translateZ(10px);  
}
.block18_2 {
    transform: translateZ(10px);  
}
.block19 {
    transform: translateZ(10px);  
}
.block20 {
    transform: translateZ(10px);  
}
.block17 {
    transform: translateZ(10px);  
}
.block23 {
    transform: translateZ(10px);  
}
.color_change {
    filter: grayscale(100%); /* 初期状態はモノクロ */
    transition: filter 4s ease; /* フィルター変化に0.5秒かかるアニメーション */
}
.color_change.color {
    filter: grayscale(0%); /* カラーに変更 */
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 767px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}