@charset "UTF-8";
@layer reset, base, theme, components, utilities;

@layer reset {
/*
ONZE RESET CSS
Author: ONZE
Author URI: https://on-ze.com
Version: 1.2 - 2024.10.21
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
*,*::before,*::after{box-sizing:border-box}*{border:0;margin:0;outline:0;padding:0;font:inherit;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;text-decoration:none;vertical-align:baseline}article,aside,footer,header,main,nav,article,section{display:block}img,picture,audio,canvas,video,svg{display:block;max-width:100%}br,hr{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}input,select{vertical-align:middle}body{line-height:1;line-break:strict;overflow-wrap:break-word;overflow-wrap:anywhere;word-break:normal;font-feature-settings:"palt";-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}a{-webkit-tap-highlight-color:transparent}
}

@layer base {
    :root {
        /*color*/
        --black:#000000;
        --black2:#080808;
        --black3:#36261B;
        --black4:#3D291F;
        --darkgray:#323232;
        --darkgray2:#332A28;
        --darkgray3:#5A5A5A;
        --darkgray4:#6A6A6A;
        --gray:#8A8A8A;
        --gray2:#858B88;
        --lightgray:#E3E3E3;
        --lightgray2:#E6E6E6;
        --lightgray3:#EAEAEA;
        --lightgray4:#F5F5F5;
        --white70:rgb(255 255 255 / 0.7);
        /*font*/
        --fontfamily: "Lato", "Noto Sans JP", sans-serif;
        --hfontfamily: "Real Head Pro Medium", sans-serif;
        --font:normal normal normal 16px/19px "Lato", "Noto Sans JP";
        --font2:normal normal normal 14px/17px "Lato", "Noto Sans JP";
        --font2b:normal normal bold 14px/17px "Lato", "Noto Sans JP";
        --font3:normal normal normal 12px/15px "Lato", "Noto Sans JP"; 
        --font3b:normal normal bold 12px/15px "Lato", "Noto Sans JP";
        --font4:normal normal normal 13px/15px "Lato", "Noto Sans JP";
        --font4b:normal normal 600 13px/15px "Lato", "Noto Sans JP";
        --font5:normal normal normal 10px/14px "Lato", "Noto Sans JP";
        --font6b:normal normal bold 20px/22px "Lato", "Noto Sans JP";
        --hfont: normal normal normal 46px/64px "Real Head Pro Medium", "Noto Sans JP";
        --hfont2: normal normal 500 16px/23px "Real Head Pro Medium", "Noto Sans JP";
        --hfont3:normal normal normal 14px/20px "Real Head Pro Medium";
        --hfont4:normal normal normal 20px/28px "Real Head Pro Semilight";
        --hfont4b:normal normal normal 20px/28px "Real Head Pro Medium";
        --hfont5:normal normal normal 16px/23px "Real Head Pro Semilight";
        --hfont6:normal normal normal 40px/55px "Real Head Pro Medium";
        --hfont7:normal normal normal 12px/18px "Real Head Pro Medium";
        --hfont8:normal normal normal 13px/18px "Real Head Pro Medium";
        --hfont9:normal normal normal 22px/31px "Real Head Pro Medium";
        /*blank*/
        --blankXXL:160px;
        --blankXL:130px;
        --blankXL2:100px;
        --blankL:80px;
        --blankL2:70px;
        --blankM:60px;
        --blankM2:50px;
        --blankM3:40px;
        --blankS:30px;
        --blankXS:20px;
        --blankXXS:10px;
        /*blankcontainer*/
        --outergap:min(3.66%, 52px);
        --innergap:min(131px, 12%);
        /*easing*/
        --easeout:cubic-bezier(0,0,.5,1);
        --easein:cubic-bezier(.3,0,1,.7);
        --easeinout:cubic-bezier(.3,0,.7,1);
        --ease:cubic-bezier(.3,.11,.3,.98);
        --liner:cubic-bezier(0,0,1,1);
    }

    html {
        width: 100%;
        height: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        scroll-behavior: smooth;
        scroll-padding-top: 100px;
    }
    body {
        width: 100%;      
        font: var(--font);
        font-family:var(--fontfamily);
        -webkit-text-size-adjust: 100%;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        font-feature-settings: "palt" 1;
        color: var(--black);
        background:white;
        letter-spacing: 0.05em;
    }
    .body-wrapper{
        width:100%;
        margin: 0 auto;
        position:relative;
    }
    main {
        position: relative;
        width:100%;
        container-type: inline-size;
    }
    .second-page_main {
        padding-top:calc(var(--blankXL2) - 10px);
        padding-bottom:100px;
    }
    .outer {
        width:100%;
        margin: 0 auto;
        padding:0 var(--outergap);
    }
    .inner {
        width:100%;
        margin: 0 auto;
        padding:0 var(--innergap);
    }
    .container {
        width:100%;
        max-width:1080px;
        margin: 0 auto;
        padding-inline:0;
        position:relative;
    }
    .section {
        position:relative;
        overflow: hidden;
    }
    img {
        width: 100%;
        height: auto;
    }

    a:not(.txt_link):link, a:not(.txt_link):visited {
        text-decoration: none;
        transition: color .3s;
        color: var(--black);
    }
    a:hover {
        text-decoration: none;
        opacity:0.7;
    }
    a.coming{
        pointer-events: none;
        opacity:0.3;
    }
    @media (max-width:1279px)  {
        :root {
        --font:normal normal normal 15px/18px "Lato", "Noto Sans JP";
        --font2:normal normal normal 13px/16px "Lato", "Noto Sans JP";
        --font2b:normal normal bold 13px/16px "Lato", "Noto Sans JP";
        --font3:normal normal normal 11px/14px "Lato", "Noto Sans JP"; 
        --font3b:normal normal bold 11px/14px "Lato", "Noto Sans JP";
        --font4b:normal normal bold 16px/19px "Lato", "Noto Sans JP";
        --hfont: normal normal normal 40px/60px "Real Head Pro Medium";
        --hfont2: normal normal normal 15px/21px "Real Head Pro Medium";
        --hfont3:normal normal normal 13px/19px "Real Head Pro Medium";
        --hfont3l:normal normal 400 14px/20px "Real Head Pro Semilight";
        --hfont4:normal normal normal 19px/27px "Real Head Pro Semilight";
        --hfont4b:normal normal normal 19px/27px "Real Head Pro Medium";
        /*blank*/
        --blankXXL:150px;
        --blankXL:120px;
        --blankXL2:90px;
        --blankL:80px;
        --blankL2:60px;
        --blankM:50px;
        --blankM2:40px;
        --blankM3:30px;
        --blankS:20px;
        --blankXS:10px;
        --blankXXS:8px;
        }
    }
    @media (max-width:768px)  {
        :root {
        --font:normal normal 500 13px/16px "Lato", "Noto Sans JP";
        --fontb:normal normal bold 13px/16px "Lato", "Noto Sans JP";
        --font2:normal normal normal 15px/18px "Lato", "Noto Sans JP";
        --font2b:normal normal bold 15px/18px "Lato", "Noto Sans JP";
        --font6b:normal normal bold 18px/24px "Lato", "Noto Sans JP";
        --hfont: normal normal normal 35px/48px "Real Head Pro Medium";
        --outergap:min(7.2vw, 27px);
        }
        .second-page_main {
            padding-top: 35px;
            padding-bottom:83px;
        }
        .inner {
            padding:0 0;
        }
    }

}

@layer theme {
    .theme-dark {
        color:white;
        background-color: var(--darkgray);
    }
    .theme-dark a {
        color:white;
    }
    .dark-overlay:before {
        content:"";
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color: var(--darkgray4);
        opacity:0.7;
        mix-blend-mode: multiply;
    }
}

@layer components {
    .link_more {
        display: flex;
        justify-content: center;
        gap:min(2.341vw,18px);
        align-items: center;
    }
    .link_more span:not(.i_arw) {
        font:var(--hfont2);
        letter-spacing: 1.6px;
    }
    .link_more span.i_arw {
        width:33px;
        height:33px;
        border:0.8px solid var(--black);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
    .link_more span.i_arw img {
        width:13px;
        height:auto;
        transition:.3s var(--easeout);
        transform:translateX(0);
    }
    .link_more:hover span.i_arw img {
        transform:translateX(4px);
    }
    .box_arw {
        width:22px;
        height:22px;
        position:relative;
        border:0.8px solid var(--black);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .box_arw .arw {
        width:18px;
        height:10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        transition:.3s var(--easeout);
        transform:translateX(-6px);
    }
    .box_arw .arw img {
        width:100%;
        height:auto;
    }
    a:hover .box_arw .arw {
        transform:translateX(-2px);
    }
    .text-link {
        text-decoration: underline;
        text-underline-offset: 5px;
    }
    figure.mb0 {
        margin-bottom:0 !important;
    }
    .notop .section h2 {
        display:flex;
        justify-content: flex-start;
        align-items: center;
        gap:19px;
        margin-bottom:var(--blankL2);
        opacity:0;
        transform:translateY(8px);
        transition:all .5s var(--easeout);
    }
    .notop.loaded .section h2 {
        opacity:1;
        transform:translateY(0);
        letter-spacing: 0.05em;
    }
    .notop .section h2 .en {
        font:var(--hfont6);
    }
    .notop .section h2 .ja {
        font:var(--font2);
    }
    .notop .section h2.center {
        justify-content: center;
    } 
    .notop .section h2.left {
        justify-content: flex-start;
    } 
    .cap {
        font:var(--font4);
    }
    .red {
        color:#FF0000;
    }
    .notop .section h3.h3_01, .brand_tab-content h4  {
        border-bottom:#BFBFBF 2px solid;
        padding-bottom:calc(1.5*var(--blankXXS));
        font:var(--font2);
        margin-bottom:calc(5px + var(--blankS));
        font-weight:500;
    }
    .notop .section * + h3.h3_01{
        margin-top:var(--blankM);
    }
    .notop .second-page_main p{
        font:normal normal 500 16px/23px "Real Head Pro Medium", "Noto Sans JP";
        line-height:1.75 ;
        letter-spacing: 0.05em;
    }
    .notop .second-page_main hr {
        width:100%;
        height:2px;
        background-color: #BFBFBF;
        margin-top:var(--blankM2);
    }
     @media (max-width:768px){
        .notop .section h2 {
        margin-bottom:25px;
        align-items: flex-end;
        flex-wrap: wrap;
        gap:10px;
        }
        
        .notop .section h2 .en {
            font: normal normal normal 25px/35px "Real Head Pro Medium";
            line-height: 1;
            letter-spacing: 0.05em;
            white-space: nowrap;
        }
        .notop .section h2 .ja {
            font: var(--font);
            white-space: nowrap;
        }
        .notop .section h3.h3_01 {
            border-bottom:black 0.5px solid;
            padding-bottom:15px;
            font:var(--font);
            margin-bottom:15px;
        }
        .notop .section * + h3.h3_01{
                margin-top:var(--blankM3);
            }

        .notop .second-page_main p{
            font:normal normal 500 13px/18px "Real Head Pro Medium", "Noto Sans JP";
            line-height:1.75 ;
            letter-spacing: 0.05em;
        }

        .notop .second-page_main hr {
            height:1px;
            background-color: black;
            margin-top:15px;
        }
    }

}

@layer utilities {
    .container:has(.grid){
        container-type: inline-size;
        container-name: gridbox;
    }
    .grid {
        display: grid;
        gap:calc(var(--blankM) + 2px) min(4.557vw,35px);
    }
    .grid.gap_xs {
        gap:10px;
    }
    .grid.col2x {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid.col3x {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid.col4x {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid.table.col2x {
       display: table;
    }
    .grid.table.col2x .col {
        display: table-cell;
    }

    
    @media (max-width:768px){
        .grid.col3x {
            grid-template-columns: repeat(2, 1fr);
        }
        .grid.col4x {
        grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width:600px){
        .grid {
            gap:var(--blankM) min(4.557vw,35px);
        }
        .grid.col3x,.grid.col2x {
            grid-template-columns: 1fr;
        }
        .grid.col4x {
        grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (min-width:1025px){
        .sp {
            display: none !important;
        }
    }
    @media (max-width:1024px){
        .pc {
            display: none !important;
        }
    }
    .breaking-out {
    margin-inline: calc(50% - 50cqi);
    }
    .breaking-out.-bg {
    padding-inline: calc(50cqi - 50%);
    }
    .breaking-out.-bgr {
    padding-inline: 0 calc(50cqi - 50%);
    }
    .breaking-out.-bgl {
    padding-inline: calc(50cqi - 50%) 0;
    }
    .mga {
        margin-left:auto;
        margin-right:auto;
    }
    .tac {
        text-align: center;
    }
    .tal {
        text-align: left;
    }
    .tar {
        text-align: right;
    }
    .flex {
        display: flex;
    }
    .left {
        justify-content: flex-start;
    }
    .f_right {
        float:right;
    } 
    img.f_right {
        padding-left:30px;
    }
    .toplink {
        margin-top:1em;
    }

}