@charset  "UTF-8";
/* ----------------------------------------------
COMMON
---------------------------------------------- */
*{
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box; /* ← overflowは外す */
}

 *:before, 
 *:after{ box-sizing: inherit;}

html{
    overflow: scroll;
}

html,body{
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 62.5%; /* 10px */
    box-sizing: border-box;
    font-family: 'Zen kaku Gothic New', 'Noto Sans JP', 'Open Sans', sans-serif;
}

a{
    text-decoration: none;
}

img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    min-width: 100%;
}
/* ----------------------------------------------
Site__Wrapper
---------------------------------------------- */
#Site__Wrapper{
    width: 100vw;
    /* height: 100vh; */
    height: auto;
    min-height: 100vh;
    overflow-x: hidden; /* 横スクロールバーが出るのを禁止する */
}
/* ----------------------------------------------
Hero
---------------------------------------------- */
.Hero{
    width: 100%;
    height: 100vh;
    overflow: hidden;

    background: #000;

}

.hero-images h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 150px;
    font-weight: 700;
    color: #f5f5f5;
    letter-spacing: 0.02em;
    z-index: 2; /*z-index:2*/
}

.hero-images{
    display: flex;
    height: 100%;

    position: relative;
    z-index: 1; /* z-index:1 */
}

.set{
    width: 33.333%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.set img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;

    transform:scale(1.03);
}

.set img:nth-child(1){
    transform: translateY(0%);
}

.set img:nth-child(2){
    transform: translateY(100%);
}

.set img:nth-child(3){
    transform: translateY(200%);
}
/* ----------------------------------------------
About
---------------------------------------------- */
.About{
    height:150vh;
    position:relative;
    overflow:hidden;

    z-index: 1;
}

.about-inner{
    position: relative;
    z-index: 1;
    max-width: 1600px;
    height: 1200px;
    border-radius: 30px;
    margin: 0 auto;
    background:linear-gradient(180deg,#ffffff 0%,#f7f7f7 100%);
}

.item-bg{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/*  テキスト */
.about-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.about-box h2{
    font-size: 80px;
    color: #333;
    line-height: 2.0;
}

.about-text p{
    font-size: 20px;
    color: #333;
    opacity: 0;
    transform: translateX(40px);
    line-height: 1.5;
}
/* ----------------------------------------------
Feature
---------------------------------------------- */
.Feature{
    position:relative;
    z-index: 2;
    height:120vh;
    background:#0b0b0b;
    color:white;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* 光背景 */
.Feature::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,#ff6a00,transparent);
    filter:blur(140px);
    top:-200px;
    left:30%;
}
/* 巨大背景文字 */
.feature-bg-text{
    position:absolute;
    font-size:220px;
    font-weight:700;
    color:rgba(255,255,255,0.05);
    white-space:nowrap;
    pointer-events:none;
}
/* コンテンツ */
.feature-inner{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:1200px;
    width:90%;
}

/* タイトル */

.feature-title{
font-size:48px;
margin-bottom:10px;
opacity:0;
transform:translateY(40px);
}

.feature-sub{
opacity:0;
transform:translateY(40px);
margin-bottom:60px;
}

/* カード */

.feature-cards{
display:flex;
gap:40px;
justify-content:center;
flex-wrap:wrap;
}

.feature-card{
width:280px;
background:#111;
border-radius:16px;
overflow:hidden;
text-decoration:none;
color:white;
transition:0.4s;
opacity:0;
transform:translateY(80px);
}

.feature-card img{
width:100%;
height:200px;
object-fit:cover;
}

.feature-card h3{
font-size:20px;
margin:15px;
}

.feature-card p{
font-size:14px;
margin:0 15px 20px;
opacity:0.8;
}

.feature-card:hover{
transform:translateY(-10px);
}

/* ------------------------------
separate section
------------------------------ */
.VisualBreak{
    width: 100%;
    height: 100vh;
    background-image: url(../images/separate_01.jpg);
    background-size: cover;
    background-position: center center;
    

    align-items: center;
    display: flex;
    position: relative;
    z-index: 3;
}

.visual-text{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 120px;
    color: white;
    letter-spacing: 10px;
    text-align: center;
    mix-blend-mode:overlay;
}

/* ===============================
Category Section
=============================== */

.Category{
height:100vh;
background:#111;
color:white;
overflow:hidden;
position:relative;
}

.category-title{
font-size:42px;
text-align:center;
padding-top:80px;
letter-spacing:4px;
}

/* wrapper */

.category-wrapper{
position:absolute;
top:50%;
left:0;
transform:translateY(-50%);
width:100%;
overflow:hidden;
}

/* 横トラック */

.category-track{
display:flex;
gap:40px;
padding-left:10vw;
}

/* カード */

.category-card{
position:relative;
width:320px;
height:420px;
flex-shrink:0;
border-radius:20px;
overflow:hidden;
text-decoration:none;
}

/* オーバーレイ */

.category-card::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:60%;
background:linear-gradient(
to top,
rgba(0,0,0,0.75),
rgba(0,0,0,0)
);
}

/* 画像 */

.category-card img{
width:100%;
height:100%;
object-fit:cover;
transition:0.5s;
}

/* タイトル */

.category-card span{
position:absolute;
bottom:20px;
left:20px;
font-size:24px;
font-weight:600;
letter-spacing:2px;
z-index: 2;
}

/* hover */

.category-card:hover img{
transform:scale(1.1);
}

/* ===============================
Awwwards Footer
=============================== */

.Footer{
height:100vh;
background:#0b0b0b;
color:white;
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
}

/* 巨大文字 */

.footer-bg-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:20vw;
font-weight:900;
color:rgba(255,255,255,0.04);
white-space:nowrap;
pointer-events:none;
}

/* container */

.footer-inner{
position:relative;
width:100%;
max-width:1400px;
height:100%;
padding:100px;
display:flex;
flex-direction:column;
justify-content:space-between;
z-index:2;
}

/* メインコピー */

.footer-title{
font-size:72px;
line-height:1.2;
margin-bottom:20px;
}

.footer-sub{
font-size:20px;
opacity:0.8;
}

/* リンク */

.footer-links{
display:flex;
gap:40px;
flex-wrap:wrap;

position: relative;
z-index: 3;
}

.footer-links a{
font-size:20px;
text-decoration:none;
color:white;

opacity:0;
transform:translateY(40px);
}

.footer-links a:hover{
opacity:1;
transform:translateY(-3px);
}

/* copyright */

.footer-bottom{
font-size:14px;
opacity:0.5;
}

/* ===============================
Hamburger
=============================== */

.hamburger{
position:fixed;
top:30px;
right:30px;
width:30px;
height:24px;
cursor:pointer;
z-index:9999;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.hamburger span{
display:block;
height:3px;
background:#000;
border-radius:2px;
transition:0.4s;
}

/* open animation */

.hamburger.active span:nth-child(1){
transform:translateY(10px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:translateY(-10px) rotate(-45deg);
}


/* ===============================
Fullscreen Menu
=============================== */

.fullscreen-menu{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#111;
display:flex;
align-items:center;
justify-content:center;
transform:translateY(-100%);
z-index:9998;
}

.menu-inner{
display:flex;
flex-direction:column;
gap:40px;
text-align:center;
}

.menu-inner a{
font-size:48px;
text-decoration:none;
color:white;
font-weight:600;
opacity:0;
transform:translateY(40px);
}

.ad{
    width: 100%;
}

.slick01{
    width: 468px;
    height: 60px;
    margin: 0 auto;
}

.spacer{
    width: 100vw;
    height: 70%;
}