@charset "UTF-8";

@layer reset, base, theme, components, utilities;
@layer reset { *,*::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 { --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); --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"; --blankXXL:160px;
--blankXL:130px;
--blankXL2:100px;
--blankL:80px;
--blankL2:70px;
--blankM:60px;
--blankM2:50px;
--blankM3:40px;
--blankS:30px;
--blankXS:20px;
--blankXXS:10px; --outergap:min(3.66%, 52px);
--innergap:min(131px, 12%); --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"; --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;
}
}