@charset "UTF-8";
/* *,*::before,*::after{outline: 1px solid red;} */
/* ============================================== */
/*                    共通設定                    */
/* ============================================== */
@media screen and (max-width:767px) {
.inner{padding: 0 5%;}
a[href*=tel]{pointer-events: auto;}
}

@media screen and (max-width:767px) {
    .pc_cont{display: none !important;}
    .sp_cont{display: block !important;}
    /* =========== /max-width:767px =========== */
}
/* -----------------------------------------------------------
common_parts
----------------------------------------------------------- */
/* ボタン */
@media screen and (max-width:900px) {
    .cp_70th .btn{
        --w: 265px;
        --h: 75px;
    }
    .cp_70th .btn::before{max-width: calc(var(--w) + 6px);}
    .cp_70th .btn a{
        font-size: 14px;
        padding: 15px 20px;
    }
    .cp_70th .btn a::after{
        width: 14px;
        height: 14px;
    }
}

/* グラデ付き見出し */
@media screen and (max-width:900px) {
    .cp_70th .h2_gradient{margin: 0 auto 20px;}
    .cp_70th .h2_gradient span:nth-of-type(1){font-size: 30px;}
    .cp_70th .h2_gradient span:nth-of-type(2){
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 25px;
        padding: 0 .7em;
        font-size: 14px;
    }
}

/* -----------------------------------------------------------
KV
----------------------------------------------------------- */
/* @media screen and (max-height: 980px) { */
@media screen and (max-height: 880px) {
    /* .cp_70th .kv .kv_tree{top: 15px;} */
    .cp_70th .kv .kv_tree{
        top: 0;
        left: min(calc(5vw + 40px), 85px);
    }
    .cp_70th .kv .kv_tree .bg{min-height: 550px;}
}
@media screen and (min-width:2350px) {
    .cp_70th .kv::before{min-height: 100px;}
}
@media screen and (min-width:1600px) {
    .cp_70th .kv .kv_tree{top: min(calc(7.5vw - 10px), 25px);}
}
@media screen and (max-width:1600px) {
    .cp_70th .kv h1{left: min(calc(2vw + 40px), 45px);}
    .cp_70th .kv .kv_tree{left: min(calc(2vw + 40px), 30px);}
}
@media screen and (max-width:900px) {
    .cp_70th .kv{
        flex-direction: column;
        justify-content: center;
        row-gap: 20px;
        height: calc(100svh - 50px);
        min-height: clamp(620px, 135vw, 925px);
        aspect-ratio: 375 / 625;
    }
    .cp_70th .kv h1{
        width: 100%;
        max-width: 100%;
    }
    .cp_70th .kv h1 img{
        width: clamp(155px, 31vw, 215px);
        margin: 0 auto;
    }
    .cp_70th .kv h1 > span{font-size: clamp(14px, 3.73vw, 26px);}
    .cp_70th .kv .kv_tree{
        top: 0;
        width: min(88vw, 590px);
        min-width: 1px;
    }
    .cp_70th .kv::before{
        height: calc((47svh - 35.5vw) - 117px);
        min-height: 64px;
    }
    /* 位置調整 */
    .cp_70th .kv h1,
    .cp_70th .kv .kv_tree{left: auto;}
    /* scroll down */
    .cp_70th .kv .scrolldown{bottom: 0;}
}
/* -----------------------------------------------------------
second_view
----------------------------------------------------------- */
@media screen and (max-width:1500px) {
    .cp_70th .second_view::before{
        background-image: url(../img/bg/second_sp.png);
    }
}
@media screen and (max-width:900px) {
    .cp_70th .second_view{
        padding: 60px 0 120px;
        height: max(550px, 82svh);
    }
    .cp_70th .second_view::before{height: 100%;}
    .cp_70th .second_view::after{height: calc(100% - 40vh);}
    .cp_70th .second_view .inner{padding: 0 11%;}
    .cp_70th .second_view p:nth-of-type(1){
        font-size: clamp(14px, 2.73vw, 18px);
        line-height: 2.1;
        text-align: left;
    }
    .cp_70th .second_view p:nth-of-type(2){max-width: 144px;}
}
/* -----------------------------------------------------------
アンカーリンク
----------------------------------------------------------- */
@media screen and (max-width:1000px) {
    .cp_70th article > nav .inner > ul{
        flex-direction: column;
        row-gap: 30px;
    }
    .cp_70th article > nav .inner > ul > li{width: 100%;}
    .cp_70th article > nav ul li:not(:last-of-type){border: none;}
}
@media screen and (max-width:900px) {
    .cp_70th article > nav{margin-bottom: 35px;}
    .cp_70th article > nav ul li li{height: 40px;}
    .cp_70th article > nav ul a{
        font-size: 14px;
        letter-spacing: 0;
    }
    .cp_70th article > nav ul a::before{
        width: 20px;
        height: 7px;
        bottom: 0;
    }
}
/* -----------------------------------------------------------
セクション共通
----------------------------------------------------------- */
@media screen and (max-width:900px) {
    .cp_70th article > section{
        margin: 0 auto 30px;
        padding: 40px 0 0;
    }
    /* bg */
    .cp_70th article > section .bg{padding: 35px 0;}
    .cp_70th article > section .bg .inner{padding: 0 11%;}
    .cp_70th .bg .bg_cont{
        padding: 35px 15px 25px;
        border-radius: 20px;
    }
    .cp_70th .bg .bg_cont h2{font-size: 16px;}
    .cp_70th .bg .bg_cont dl{
        flex-direction: column;
        align-items: center;
        row-gap: 8px;
    }
    .cp_70th .bg .bg_cont dl dt{
        font-size: 14px;
        min-height: 30px;
    }
    .cp_70th .bg .bg_cont dl dd{font-size: 14px;}
}
/* -----------------------------------------------------------
ブランドストーリー
----------------------------------------------------------- */
@media screen and (min-width:1500px) {
    .cp_70th .sec_brand .slick-prev{right: calc(-100% + 1000px);}
    .cp_70th .sec_brand .slick-next{left: calc(-100% + 1000px);}
}
@media screen and (max-width:900px) {
    .cp_70th .sec_brand .slider_wrapper{
        margin: 40px auto 60px;
        padding: 0;
    }
    .cp_70th .sec_brand .slick-track li{width: 100% !important;}
    /* 画像スライダー */
    .cp_70th .sec_brand .sldr_pic .slick-track{padding: 10px 0;}
    .cp_70th .sec_brand .sldr_pic .slick-track li{margin-inline: max(15px, 0.5%);}
    .cp_70th .sec_brand .sldr_pic .slick-track li.slick-current{transform: scale(1.075);}
    .cp_70th .sec_brand .slick-arrow{display: none !important;}
    /* テキストスライダー */
    .cp_70th .sec_brand .sldr_desc .slick-track li{
        margin: 30px auto 0;
        width: 77vw !important;
        max-width: 500px;
    }
    .cp_70th .sec_brand .sldr_desc .slick-track li p:nth-of-type(1){
        font-size: 25px;
        margin: 0 auto 30px;
    }
    .cp_70th .sec_brand .sldr_desc .slick-track li p:nth-of-type(2){font-size: 14px;}
}
@media screen and (max-width:900px) and (min-width:650px) {
    .cp_70th .sec_brand .sldr_pic .slick-track{max-width: calc((500px + 20px) * 7.8);}
}
/* -----------------------------------------------------------
ステッカープレゼントキャンペーン
----------------------------------------------------------- */
@media screen and (max-width:900px) {
    .cp_70th .sec_campaign .bg .flex{
        flex-direction: column;
        row-gap: 25px;
    }
    .cp_70th .sec_campaign .bg .bg_cont .flex > figure{
        width: 40vw;
        min-width: 150px;
    }
    .cp_70th .sec_campaign .bg .bg_cont dl dt{min-width: 60px;}
    .cp_70th .sec_campaign .bg .bg_cont dl:nth-of-type(1) dd{text-align: center;}
    .cp_70th .sec_campaign .bg .bg_cont > p{font-size: 12px;}
}
/* -----------------------------------------------------------
数量限定70周年アイテム
----------------------------------------------------------- */
@media screen and (max-width:1200px) and (min-width:901px) {
    .cp_70th .sec_limited > section .item_ttl_box figure{width: 40%;}
    .cp_70th .sec_limited > section .item_ttl_box h3 span{font-size: clamp(100px, 12.5vw, 150px);}
    /* 各商品 */
    .cp_70th .sec_limited > .grn_ylw .item_ttl_box {
        top: calc(295px - 18vw);
        margin-bottom: calc(295px - 18vw);
    }
    .cp_70th .sec_limited > .grn_ylw .item_ttl_box h3{top: 0;}
    .cp_70th .sec_limited > .pnk_ppl .item_ttl_box h3{top: calc(305px - 18vw);}
    .cp_70th .sec_limited > .special .item_ttl_box h3{top: calc(175px - 18vw);}
}
@media screen and (max-width:1200px) {
    .cp_70th .sec_limited > section .item_ttl_box::before{display: none;}
}
@media screen and (max-width:900px) {
    /* 各セクション共通 */
    .cp_70th .sec_limited > section{padding: 0 0 50px;}
    .cp_70th .sec_limited > section::before{
        --offset: max(150px, 44vw);
        top: -310px;
        width: max(100vw, 680px);
    }
    .cp_70th .sec_limited > section .item_ttl_box{-moz-column-gap: 10px;column-gap: 10px;}
    .cp_70th .sec_limited > section .item_ttl_box h3 span{
        font-size: max(45px, 12vw);
        letter-spacing: 0.03em;
    }
    .cp_70th .sec_limited > section .item_ttl_box figure{width: 43%;}
    .btnList{
        flex-direction: column;
        align-items: center;
        row-gap: 40px;
    }
    /* リスト共通 */
    .itemList{flex-direction: column;}
    .itemList li{
        align-items: center;
        width: 100%;
    }
    .itemList li:not(:last-of-type){margin: 0 auto 45px;}
    .itemList .item_ttl{
        font-size: 18px;
        line-height: 1.33;
        letter-spacing: 0;
        margin: 0 auto 15px;
    }
    .itemList .item_ttl + p{
        font-size: 14px;
        line-height: 1.7;
        min-height: 1px;
        margin: 0 0 28px;
    }
    .itemList li .btn{--w: 200px;}
    .itemList li .btn a{font-size: 14px;}
    .itemList li .btn a::after{
        width: 13px;
        height: 13px;
    }
    /* リストA */
    .itemList_a li figure{
        width: 32vw;
        min-height: 1px;
        margin: 0 auto 20px;
    }
    .itemList_a .item_ttl + p{min-height: 1px;}
    /* リストB */
    .itemList_b{margin: 0 auto 65px;}
    .itemList_b li{flex-direction: column !important;}
    /* Green Yellow */
    .cp_70th .sec_limited .grn_ylw::before{
        --offset: max(175px, 50vw);
        background-image: url(../img/bg/gy_sp.png);
    }
    .cp_70th .sec_limited .grn_ylw > picture{
        inset: auto auto -9% -5vw;
        width: min(31.5vw, 424px);
    }
    .cp_70th .sec_limited > .grn_ylw .item_ttl_box h3{top: calc(69px - 18vw)}
    .cp_70th .sec_limited > .grn_ylw .item_ttl_box h3 span:nth-of-type(2){
        text-align: left;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin-left: .5em;
    }
    .cp_70th .sec_limited .grn_ylw > picture.active{transform: rotate(15deg)}
    /* Pink Purple */
    .cp_70th .sec_limited .pnk_ppl::before{background-image: url(../img/bg/pp_sp.png);}
    .cp_70th .sec_limited > .pnk_ppl .item_ttl_box h3{top: calc(76px - 18vw)}
    .cp_70th .sec_limited > .pnk_ppl .item_ttl_box h3 span{line-height: 0.8;}
    .cp_70th .sec_limited .pnk_ppl > picture{
        inset: auto 0 -6% auto;
        width: min(36.875vw, 494px);
    }
    /* Special Goods */
    .cp_70th .sec_limited .special::before{background-image: url(../img/bg/sg_sp.png);}
    .cp_70th .sec_limited .special{
        margin: 60px auto 0;
        padding: 0;
    }
    .cp_70th .sec_limited .special::before{top: -350px;}
    .cp_70th .sec_limited > .special .item_ttl_box{margin: 0 auto 35px;}
    .cp_70th .sec_limited > .special .item_ttl_box figure{
        position: relative;
        z-index: 0;
        top: -10px;
    }
    .cp_70th .sec_limited > .special .item_ttl_box h3{top: calc(50px - 18vw)}
    .cp_70th .sec_limited > .special .item_ttl_box h3 span{line-height: 0.95;}
}
/* -----------------------------------------------------------
アロマ部文化祭
----------------------------------------------------------- */
@media screen and (max-width:900px) {
    .cp_70th .sec_aroma .bg{
        padding: 50px 0;
        background-image: url(../img/bg/aroma_sp.jpg);
    }
    .cp_70th .sec_aroma .dl_wrapper{margin: 0 auto 25px;}
    .cp_70th .sec_aroma .bg .bg_cont dl dt{min-width: 100px;}
    .cp_70th .sec_aroma .bg .bg_cont dl:nth-of-type(3) dt{letter-spacing: -0.05em;}
    .cp_70th .sec_aroma .bg .bg_cont dl dd{text-align: center;}
    .cp_70th .sec_aroma .bg .bg_cont .btn{
        --w: 200px;
        --h: 55px;
    }
}
/* -----------------------------------------------------------
これからも
----------------------------------------------------------- */
@media screen and (max-width:1350px) and (min-width:901px) {
    .cp_70th .sec_philo{min-height: min(100vw, 1000px);}
}
@media screen and (max-width:900px) {
    .cp_70th .sec_philo{min-height: 140vw;}
    .cp_70th .sec_philo::before{
        inset: auto -200vw -25vw;
        width: 100vw;
        aspect-ratio: 800 / 566;
    }
    .cp_70th .sec_philo picture{
        inset: auto -100% max(13%, 30vw);
        width: min(600px,92vw);
    }
    .cp_70th .sec_philo p{
        font-size: max(14px, 3.73vw);
        inset: auto -100% max(8%, 7vw);
    }
}
/* -----------------------------------------------------------
slider
----------------------------------------------------------- */
@media screen and (max-width:900px) {
    .cp_70th .slider{aspect-ratio: 1050 / 100;min-height: 100px;}
    .cp_70th .slider .slider_track img{min-height: 100px;}
}
/* -----------------------------------------------------------
aside
----------------------------------------------------------- */
@media screen and (max-width:900px) {
    .cp_70th aside{height: 150px;}
    .cp_70th aside figure{width: 133px;}
}