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

/* fancybox */
.fancybox-button {
    background: rgba(30, 30, 30, 0);
}

.fancybox-button svg path,
.fancybox-button svg polygon {
    fill: #fff;
    transition: fill 0.3s;
}

.fancybox-button:hover svg path,
.fancybox-button:hover svg polygon {
    fill: #bebebe;
}

.fancybox-button[disabled] svg path, .fancybox-button[disabled]:hover svg path,
.fancybox-button[disabled] svg polygon, .fancybox-button[disabled]:hover svg polygon {
    fill: #777777;
}


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

    /* fancybox */
    .fancybox-navigation .fancybox-button {
        height: 109px;
        width: 77px;
    }

    .fancybox-navigation .fancybox-button svg {
        width: 32px;
        height: 32px;
    }

    #history_yearly {
        position: relative;
        padding: 0 30px 60px;
        text-align: left;
        background: url('../img_v2/common/bg_stripe.png') left top;
        background-size: auto;
    }

    #history_yearly .yearly_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 1246px;
        aspect-ratio: 1600 / 1246;
        mix-blend-mode: multiply;
        transition: transform 2.6s cubic-bezier(0.61, 1, 0.88, 1), opacity 1.5s;
        transform: scale(1.15);
        opacity: 0;
        transform-origin: center 35%;
    }

    #history_yearly .yearly_bg.visible {
        transform: scale(1);
        opacity: 1;
    }

    #history_yearly .yearly_bg::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background: linear-gradient(rgba(255,255,255,0) 0, #fff 100%);
    }
    
    #history_yearly .yearly_bg.y1960 {
        background: url('../img_v2/1960/1960s_main.jpg') no-repeat center center;
        background-size: cover;
    }
    #history_yearly .yearly_bg.y1970 {
        background: url('../img_v2/1970/main_bg.jpg') no-repeat center center;
        background-size: cover;
    }
    #history_yearly .yearly_bg.y1980 {
        background: url('../img_v2/1980/1980s_main.jpg') no-repeat center center;
        background-size: cover;
    }
    #history_yearly .yearly_bg.y1990 {
        background: url('../img_v2/1990/1990s_main.jpg') no-repeat center center;
        background-size: cover;
    }
    #history_yearly .yearly_bg.y2000 {
        background: url('../img_v2/2000/2000s_main.jpg') no-repeat center center;
        background-size: cover;
    }
    #history_yearly .yearly_bg.y2010 {
        background: url('../img_v2/2010/2010s_main.jpg') no-repeat center center;
        background-size: cover;
    }

    #history_yearly .yearly_kv {
        position: relative;
        padding-top: 88px;
    }

    /* year navi */
    #history_yearly .year_navi {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 30px;
        margin-top: 52px;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-size: clamp(
            calc(32px * 0.75), /* 最小0.75倍 */
            calc(100vw / (1400 / 32)), /* 画面幅1400pxのときに32px */
            calc(32px * 1) /* 最大1倍 */
        );
        font-weight: 800;
        transition-delay: 0.05s;
    }

    #history_yearly .year_navi li {
        padding-bottom: 2px;
    }

    #history_yearly .year_navi a {
        color: #fff;
    }

    #history_yearly .year_navi .current {
        position: relative;
    }

    #history_yearly .year_navi .current::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #fff;
        transition: transform 0.4s 0.7s;
        transform: scaleX(0);
    }

    #history_yearly .year_navi.visible .current::after {
        transform: scaleX(1);
    }

    /* page header */
    #history_yearly .page_header {
        max-width: 1200px;
        margin: 0 auto;
    }

    #history_yearly .page_header hgroup {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        gap: 66px;
        padding: 13.57% 10px 16.43%;
        color: #fff;
    }

    #history_yearly .page_header .year {
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-size: clamp( 70px, calc( ( 100vw - 750px ) * ( ( 95 - 70 )  / ( 1400 - 750 ) ) + 70px ), 95px ); /* 幅750pxのとき70px ～ 幅1400pxのとき95px */
        font-weight: 800;
        letter-spacing: -0.04em;
        line-height: 1;
    } 
    
    #history_yearly .page_header .year .slide_obj {
        transition-delay: 0.7s;
    }

    #history_yearly .page_header .subtitle {
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-size: clamp( 20px, calc( ( 100vw - 750px ) * ( ( 41 - 20 )  / ( 1400 - 750 ) ) + 20px ), 41px ); /* 幅750pxのとき20px ～ 幅1400pxのとき41px */
        font-weight: 800;
        line-height: 1.53;
        transition: transform 1s, opacity 1s;
        transform: translateX(-10px);
        opacity: 0;
        transition-delay: 1.4s;
    } 

    #history_yearly .page_header .subtitle.visible {
        transform: translateX(0);
        opacity: 1;
    }

    /* cnt */
    #history_yearly .cnt_frame {
        position: relative;
        max-width: 1400px;
        margin: 0 auto 40px;
        padding: 70px 30px 0;
        background-color: #fff;
        border-radius: 20px;
        box-sizing: border-box;
    }

    #history_yearly .cnt_title {
        margin-bottom: 60px;
        text-align: center;
        color: #163b67;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        letter-spacing: -0.06em;
    }
    
    #history_yearly .cnt_title .en {
        padding-bottom: 0;
        font-size: clamp(
            calc(60px * 0.75), /* 最小0.75倍 */
            calc(100vw / (1400 / 60)), /* 画面幅1400pxのときに60px */
            calc(60px * 1) /* 最大1倍 */
        );
        font-weight: 800;
    }

    #history_yearly .cnt_title .jp {
        font-size: clamp(
            calc(22px * 0.75), /* 最小0.75倍 */
            calc(100vw / (1400 / 22)), /* 画面幅1400pxのときに22px */
            calc(22px * 1) /* 最大1倍 */
        );
        font-weight: 800;
    }

    /* brand history */
    #history_yearly .brand_history_wrapper {
        padding-bottom: 70px;
    }
    
    #history_yearly .year_block {
        max-width: 1000px;
        margin: 0 auto;
    }
    #history_yearly .year_block .year {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 25px;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-size: 40px;
        font-weight: 800;
        letter-spacing: -0.06em;
        color: #163b67;
    }

    #history_yearly .year_block .year::after {
        content: "";
        padding-top: 4px;
        border-bottom: 2px solid #163b67;
    }

    #history_yearly .year_block .imgtxt_block {
        display: grid;
        grid-template-columns: 45.48% 45.12%;
        align-items: center;
        justify-content: space-between;
        margin-left: 180px;
        padding: 40px 0;
        background: url('../img_v2/common/brand_history_border.png') repeat-x left top;
        color: #163b67;
        line-height: 1.75;
    }

    #history_yearly .year_block .imgtxt_block:first-of-type {
        background: none;
        margin-top: -28px;
    }

    #history_yearly .year_block .imgtxt_block:last-of-type {
        margin-bottom: -28px;
    }

    #history_yearly .year_block .imgtxt_block .img {
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* tks追加 */
    #history_yearly .year_block .imgtxt_block .txt span {
        display: inline-block;
    }

    /* advertisement */
    .ad_grid {
        max-width: 1150px;
        margin: 0 auto;
        padding-bottom: 66px;
    }

    .grid_sizer,
    #history_yearly .ad_grid_item {
        width: 33.33%;
        margin-bottom: 5%;
    }

    #history_yearly .ad_grid_item {
        padding: 0 3%;
        box-sizing: border-box;
    }

    #history_yearly .ad_grid_item a {
        position: relative;
        display: block;
    }

    #history_yearly .ad_grid_item a::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 24px;
        background: url('../img_v2/common/btn_zoom.svg') no-repeat left top;
        background-size: 100%;
    }

    #history_yearly .ad_grid_item img {
        display: block;
    }

    /* cm */
    #history_yearly .cm_grid {
        display: grid;
        grid-template-columns: 46.45% 46.45%;
        justify-content: space-between;
        gap: 90px 0;
        max-width: 1100px;
        margin: 0 auto;
        padding-bottom: 120px;
    }

    #history_yearly .cm_grid_item {
        color: #163b67;
    }

    #history_yearly .cm_grid_item .movie {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }

    #history_yearly .cm_grid_item .movie iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #history_yearly .cm_grid_item .title {
        margin-top: 20px;
    }

    #history_yearly .cm_grid_item .title .year {
        display: block;
        margin-bottom: 2px;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-size: 22px;
        font-weight: 800;
        letter-spacing: -0.06em;
    }

    #history_yearly .cm_grid_item .title .txt {
        display: block;
        font-family: "FP-ヒラギノ角ゴ StdN W8{pm}", sans-serif;
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    #history_yearly .cm_grid_item .desc_txt {
        margin-top: 7px;
        font-size: 16px;
        line-height: 1.75;
    }

}



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

    /*  fancybox */
    .fancybox-navigation .fancybox-button {
        top: auto;
        bottom: 0;
        padding-bottom: 11px;
        width: 73px;
        height: 80px;
    }

    .fancybox-navigation .fancybox-button svg {
        width: 28px;
        height: 28px;
    }


    #history_yearly {
        position: relative;
        padding: 0 4% 30px;
        text-align: left;
        background: url('../img_v2/common/bg_stripe_sp.png') left top;
        background-size: 15px;
    }

    #history_yearly .yearly_bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        aspect-ratio: 750 / 1060;
        mix-blend-mode: multiply;
        transition: transform 2.6s cubic-bezier(0.61, 1, 0.88, 1), opacity 1.5s;
        transform: scale(1.2);
        opacity: 0;
        transform-origin: center 35%;
    }

    #history_yearly .yearly_bg.visible {
        transform: scale(1);
        opacity: 1;
    }

    #history_yearly .yearly_bg::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background: linear-gradient(rgba(255,255,255,0) 0, #fff 80%);
    }
    
    #history_yearly .yearly_bg.y1960 {
        background: url('../img_v2/1960/1960s_main.jpg') no-repeat center center;
        background-size: cover;
    }
    #history_yearly .yearly_bg.y1970 {
        background: url('../img_v2/1970/main_bg_sp.jpg') no-repeat center center;
        background-size: cover;
    }
    #history_yearly .yearly_bg.y1980 {
        background: url('../img_v2/1980/1980s_main.jpg') no-repeat center center;
        background-size: cover;
    }
    #history_yearly .yearly_bg.y1990 {
        background: url('../img_v2/1990/1990s_main_sp.jpg') no-repeat center center;
        background-size: cover;
    }
    #history_yearly .yearly_bg.y2000 {
        background: url('../img_v2/2000/2000s_main_sp.jpg') no-repeat center center;
        background-size: cover;
    }
    #history_yearly .yearly_bg.y2010 {
        background: url('../img_v2/2010/2010s_main_sp.jpg') no-repeat center center;
        background-size: cover;
    }

    #history_yearly .yearly_kv {
        position: relative;
        padding-top: 50px;
    }

    /* year navi */
    #history_yearly .year_navi {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 3vw;
        margin-top: 38px;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-size: calc(100vw / ( 375 / 14 ));
        font-weight: 800;
        transition-delay: 0.05s;
    }

    #history_yearly .year_navi li {
        padding-bottom: 3px;
    }

    #history_yearly .year_navi a {
        color: #fff;
    }

    #history_yearly .year_navi .current {
        position: relative;
    }

    #history_yearly .year_navi .current::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
        transition: transform 0.4s 0.7s;
        transform: scaleX(0);
    }

    #history_yearly .year_navi.visible .current::after {
        transform: scaleX(1);
    }

    /* page header */
    #history_yearly .page_header {
        margin: 0 auto;
    }

    #history_yearly .page_header hgroup {
        padding: 18.8% 0 25.5%;
        color: #fff;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-weight: 800;
        text-align: center;
    }
    
    #history_yearly .page_header .year {
        font-size: clamp(
            calc(48px * 0.75), /* 最小0.75倍 */
            calc(100vw / (375 / 48)), /* 画面幅375pxのときに48px */
            calc(48px * 1.5) /* 最大1.5倍 */
        );
    } 

    #history_yearly .page_header .year .slide_obj {
        transition-delay: 0.7s;
    }

    #history_yearly .page_header .subtitle {
        margin-top: 12px;
        font-size: clamp(
            calc(20px * 0.75), /* 最小0.75倍 */
            calc(100vw / (375 / 20)), /* 画面幅375pxのときに20px */
            calc(20px * 1.5) /* 最大1.5倍 */
        );
        line-height: 1.53;
        transition: transform 1s, opacity 1s;
        transform: translateY(10px);
        opacity: 0;
        transition-delay: 1.4s;
        text-align: left;
    } 

    #history_yearly .page_header .subtitle.visible {
        transform: translateY(0);
        opacity: 1;
    }

    /* cnt */
    #history_yearly .cnt_frame {
        position: relative;
        margin: 0 auto 20px;
        padding: 35px 20px 0;
        background-color: #fff;
        border-radius: 10px;
    }

    #history_yearly .cnt_title {
        margin-bottom: 42px;
        text-align: center;
        color: #163b67;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        letter-spacing: -0.06em;
    }
    
    #history_yearly .cnt_title .en {
        padding-bottom: 0;
        font-size: clamp(
            calc(30px * 0.75), /* 最小0.75倍 */
            calc(100vw / (375 / 30)), /* 画面幅375pxのときに30px */
            calc(30px * 1.5) /* 最大1.5倍 */
        );
        font-weight: 800;
    }

    #history_yearly .cnt_title .jp {
        font-size: 14px;
        font-weight: 800;
    }

    /* brand history */
    #history_yearly .brand_history_wrapper {
        padding-bottom: 18px;
    }

    #history_yearly .year_block {
        margin: 0 auto;
    }
    #history_yearly .year_block .year {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 12px;
        color: #163b67;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-size: calc(100vw / ( 375 / 20 ));
        font-weight: 800;
        letter-spacing: -0.06em;
    }

    #history_yearly .year_block .year::after {
        content: "";
        padding-top: 4px;
        border-bottom: 1px solid #163b67;
    }

    #history_yearly .year_block .imgtxt_block {
        display: grid;
        grid-template-columns: 1fr;
        margin-left: 23.8%;
        padding: 35px 0;
        background: url('../img_v2/common/brand_history_border.png') repeat-x left top;
        color: #163b67;
        font-size: 13px;
        line-height: 1.53;
    }

    #history_yearly .year_block .imgtxt_block:first-of-type {
        background: none;
        margin-top: -12px;
    }

    #history_yearly .year_block .imgtxt_block:last-of-type {
        margin-bottom: -15px;
    }

    #history_yearly .year_block .imgtxt_block .img {
        padding: 8% 6.4% 0%;
    }

    /* advertisement */
    .ad_grid {
        margin: 0 -2%;
        padding-bottom: 15px;
    }

    .grid_sizer,
    #history_yearly .ad_grid_item {
        width: 50%;
        margin-bottom: 10%;
    }

    #history_yearly .ad_grid_item {
        padding: 0 4.5%;
        box-sizing: border-box;
    }

    #history_yearly .ad_grid_item a {
        position: relative;
        display: block;
    }

    #history_yearly .ad_grid_item a::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20px;
        height: 20px;
        background: url('../img_v2/common/btn_zoom.svg') no-repeat left top;
        background-size: 100%;
    }

    #history_yearly .ad_grid_item img {
        display: block;
    }

    /* cm */
    #history_yearly .cm_grid {
        padding: 0 5px 10px;
    }

    #history_yearly .cm_grid_item {
        margin-bottom: 46px;
        color: #163b67;
    }

    #history_yearly .cm_grid_item .movie {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }

    #history_yearly .cm_grid_item .movie iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    #history_yearly .cm_grid_item .title {
        margin-top: 12px;
    }

    #history_yearly .cm_grid_item .title .year {
        margin-bottom: 4px;
        display: block;
        font-family: "FP-ヒラギノ角ゴ StdN W8", sans-serif;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: -0.06em;
    }

    #history_yearly .cm_grid_item .title .txt {
        display: block;
        font-family: "FP-ヒラギノ角ゴ StdN W8{pm}", sans-serif;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    #history_yearly .cm_grid_item .desc_txt {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.53;
    }

}