/* =================================
RESET
================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}


/* =================================
BASE
サイト全体の基本設定
================================= */

:root{
--accent:#4f44ea;
}

body{

background:#f4ead9;
color:#000;

font-family:"Yu Mincho",serif;

line-height:1.7;

}

/* UIフォント */

.nav,
.stock-button,
.stock-title,
.work-caption,
.shop-box a{

font-family:
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;

font-weight:500;

}


/* =================================
LAYOUT
共通レイアウト
================================= */

.container{

max-width:1440px;
margin:0 auto;

padding:0 120px;

}


/* =================================
HEADER
================================= */

.header{

position:fixed;
top:0;
left:0;

width:100%;

background:#f4ead9;

z-index:1000;

}

.header-inner{

max-width:1440px;
margin:0 auto;

display:flex;
align-items:center;
justify-content:space-between;

padding:40px 120px;

}

/* ロゴ */

.logo img{

width:120px;
height:auto;

}


/* navigation */

.nav{

display:flex;
gap:48px;

font-size:16px;
letter-spacing:0.08em;

}

.nav a{

text-decoration:none;
color:#000;

transition:0.3s;

}

.nav a:hover{
color:var(--accent);
}

/* sns */

.sns{

display:flex;
gap:20px;

}

.sns img{

width:30px;

}


/* =================================
HERO
トップ画像スライド
================================= */

.hero{

width:100%;
height:100vh;

margin-top:120px;

overflow:hidden;

}

.slider{

width:100%;
height:100%;

position:relative;

}

.slide{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

opacity:0;

transition:opacity 1s ease;

}

.slide.active{

opacity:1;

}


/* =================================
WORK
作品一覧
================================= */

.work-main{

padding:120px;

}

.work-grid{

max-width:1200px;
margin:0 auto;

display:grid;
grid-template-columns:repeat(2,1fr);

gap:80px;

}

.work-item{

position:relative;
overflow:hidden;

}

.work-item img{

width:100%;
aspect-ratio:1/1;

object-fit:cover;

display:block;

transition:transform 0.6s, opacity 0.4s;

}

.work-caption{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%);

color:var(--accent);

font-size:30px;

font-weight:700;

letter-spacing:0.05em;

opacity:0;

transition:opacity 0.4s;

}

.work-item:hover img{

transform:scale(1.05);
opacity:0.15;

}

.work-item:hover .work-caption{

opacity:1;

}


/* =================================
SOZAIHA
================================= */

.sozaiha-main{

margin-top:160px;

}

.sozaiha-container{

max-width:1440px;
margin:0 auto;

padding:0 120px;

display:grid;

grid-template-columns:1fr 420px;

gap:120px;

align-items:start;

}

/* 左画像 */

.sozaiha-image{

position:relative;

left:50%;
margin-left:-50vw;

width:calc(50vw + 300px);

}

.sozaiha-image img{

width:100%;
height:auto;

display:block;

object-fit:cover;

}

/* 右エリア */

.sozaiha-info{

display:flex;
flex-direction:column;

align-items:center;

}

/* ロゴ */

.sozaiha-logo-box{

display:flex;
justify-content:center;

margin-top:40px;
margin-bottom:80px;

}

.sozaiha-logo-box img{

width:120px;
height:auto;

}

/* テキスト */

.sozaiha-text{

width:100%;
max-width:34em;

}

.sozaiha-text p{

font-size:14px;
line-height:1.7;

margin-bottom:1.6em;

}

/* SHOP */

.shop-box{

display:flex;
justify-content:center;

width:100%;

margin-top:80px;

}

.shop-box a{

display:inline-block;

border:3px solid #000;

padding:14px 30px;

text-decoration:none;

color:#000;

font-family:system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

font-size:20px;

font-weight:700;

width:220px;

text-align:center;

transition:0.25s;

}

.shop-box a:hover{

color:#fff;

background:var(--accent);

border-color:var(--accent);

}


/* =================================
ABOUT
================================= */

.about-main{

padding-top:200px;
padding-bottom:200px;

}

.about-container{

max-width:720px;
margin:0 auto;

}

.about-name{

font-size:20px;
margin-bottom:10px;

}

.about-role{

font-size:14px;

letter-spacing:0.05em;

margin-bottom:40px;

}

.about-text p{

margin-bottom:28px;

line-height:1.9;

}


/* =================================
STOCK
================================= */

.stock-section{

margin-top:40px;

}

.stock-divider{

border:none;

border-top:2px solid #000;

margin-bottom:40px;

width:100%;

}

.stock-title{

font-size:24px;

}

.about-text .stock-title{

margin-bottom:6px;

}

.about-text .stock-text{

margin-bottom:12px;

}

/* ボタン */

.stock-button{

display:inline-block;

border:3px solid #000;

padding:14px 30px;

text-decoration:none;

color:#000;

font-size:18px;

width:220px;

text-align:center;

transition:0.25s;

}

.stock-button:hover{

color:#fff;

background:var(--accent);

border-color:var(--accent);

}


/* =================================
FOOTER
================================= */

.footer{

max-width:1440px;

margin:160px auto 40px;

padding:0 120px;

font-size:12px;

color:#777;

text-align:center;

}


/* =================================
SP layout
================================= */

@media (max-width:768px){

.container{
padding:0 20px;
}

.header-inner{
padding:20px;
}

.logo img{
width:40px;
}

.nav{
gap:12px;
font-size:12px;
}

.sns img{
width:12px;
}

/* hero */

.hero{
margin-top:80px;
padding:0 20px;
height:auto;
}

.slider{
height:auto;
}

.slide{
position:relative;
width:100%;
height:auto;
object-fit:cover;
opacity:1;
}

/* works */

.work-main{
padding:60px 20px;
}

.work-grid{
grid-template-columns:1fr;
gap:40px;
}

/* about */

.about-main{
padding:120px 20px;
}

/* SOZAIHA */

.sozaiha-container{

grid-template-columns:1fr;

gap:60px;

padding:0 20px;

}

.sozaiha-image{

left:auto;
margin-left:0;

width:100%;

}

.sozaiha-logo-box{

margin-top:20px;
margin-bottom:40px;

}

.sozaiha-logo-box img{

width:90px;

}

.sozaiha-text{

max-width:100%;

}

.shop-box{

margin-top:60px;

}

/* footer */

.footer{

padding:0 20px;

margin:100px 0;

}

}