/* ------------------------------
   Theme variables
--------------------------------*/

:root{
--background:#f5f3f0;
--foreground:#2c2825;
--card:#faf8f5;
--muted:#d4cfc7;
--muted-foreground:#6b635c;
--accent:#b4654a;
--accent-foreground:#ffffff;
--border:rgba(44,40,37,0.1);
--radius:10px;
}

/* ------------------------------
   Base
--------------------------------*/

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

body{
background:var(--background);
color:var(--foreground);

font-family:
'Lora',
'Noto Serif JP',
'Cormorant Garamond',
serif;

line-height:1.8;
}

/* ------------------------------
   Layout
--------------------------------*/

.container{
max-width:1000px;
margin:auto;
padding:0 30px;
}

/* ------------------------------
   Navigation
--------------------------------*/

.nav{

position:fixed;
top:0;
left:0;
width:100%;

background:rgba(245,243,240,0.95);
backdrop-filter:blur(6px);

border-bottom:1px solid var(--border);

z-index:100;

}

.nav-inner{

max-width:1200px;
margin:auto;

padding:24px 32px;

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

position:relative;

}

.logo{

font-size:22px;
letter-spacing:0.15em;
font-weight:300;

position:relative;
z-index:300;
}

.menu{

display:flex;
gap:32px;

}

.menu a{

font-size:14px;
text-decoration:none;
color:var(--foreground);

transition:0.3s;

}

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

.service-btn{

padding:10px 22px;

background:var(--accent);
color:var(--accent-foreground);

text-decoration:none;
font-size:14px;

transition:0.3s;

}

.menu .service-btn{
color:#fff;
}

.service-btn:hover{
opacity:0.9;
}

/* hamburger */

.hamburger{

display:none;
flex-direction:column;
gap:5px;

background:none;
border:none;
cursor:pointer;

}

.hamburger span{

width:24px;
height:2px;
background:var(--foreground);
display:block;

}

/* ------------------------------
   Hero
--------------------------------*/

.hero{

min-height:100vh;

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

text-align:center;

}

.hero-inner{
padding-top:140px;
}

.catch{

writing-mode:vertical-rl;
text-orientation:upright;

font-size:64px;
font-weight:300;

letter-spacing:0.5em;

line-height:1.8;

margin-bottom:60px;

}

.catch span{
margin-top:1em;
display:inline-block;
}

.company{

font-size:18px;
letter-spacing:0.3em;
color:var(--muted-foreground);

}

/* ------------------------------
   Section
--------------------------------*/

.section{
padding:140px 0;
}

.section h2{

font-size:56px;
font-weight:300;

margin-bottom:50px;

}

.lead{

font-size:22px;
margin-bottom:40px;

}

.bg{
background:var(--card);
}

.section-en{

font-size:15px;

letter-spacing:0.4em;

color:var(--accent);

font-weight:500;

}

/* ------------------------------
   Philosophy
--------------------------------*/

.philosophy-main{
border-left:2px solid var(--accent);
padding-left:30px;
margin-bottom:60px;
}

.philosophy-text{
color:var(--muted-foreground);
line-height:1.9;
margin-bottom:80px;
display:flex;
flex-direction:column;
gap:24px;
}

.philosophy-block{
border-top:1px solid var(--border);
padding-top:60px;
margin-top:60px;
}

.philosophy-block h3{
font-size:28px;
margin-bottom:30px;
font-weight:300;
}

.philosophy-block p{
color:var(--muted-foreground);
line-height:1.9;
margin-bottom:20px;
}

.message{
font-size:20px;
color:var(--accent);
margin-bottom:30px;
}

/* ------------------------------
   Business
--------------------------------*/

.business-grid{

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

margin-top:80px;

}

.business{
transition:0.4s;
}

.business:hover{
transform:translateY(-6px);
}

.business span{

font-size:48px;
color:rgba(180,101,74,0.3);

}

.business h3{

font-size:20px;
margin:12px 0;

font-weight:400;

}

.business p{

font-size:14px;
color:var(--muted-foreground);

}

/* ------------------------------
   Contact
--------------------------------*/

.contact-form{

display:flex;
flex-direction:column;
gap:30px;

}

.form-group{

display:flex;
flex-direction:column;
gap:8px;

}

.form-group input,
.form-group textarea{

border:none;
border-bottom:1px solid var(--muted);

padding:14px 10px;
font-size:16px;

background:transparent;

}

.form-group input:focus,
.form-group textarea:focus{

outline:none;
border-color:var(--accent);

}

.submit-btn{

margin-top:20px;
padding:18px;

background:var(--accent);
color:white;

border:none;

letter-spacing:0.2em;
cursor:pointer;

}

.submit-btn:hover{
opacity:0.9;
}

/* ------------------------------
   Recruitment
--------------------------------*/

.recruit-box{

border:1px solid var(--border);
padding:60px;

text-align:center;

display:flex;
flex-direction:column;
gap:20px;

}

.contact-link{

margin-top:20px;
display:inline-block;

padding:14px 40px;

border:1px solid var(--foreground);

text-decoration:none;
color:var(--foreground);

transition:0.3s;

}

.contact-link:hover{

background:var(--accent);
color:white;
border-color:var(--accent);

}

/* ------------------------------
   Company
--------------------------------*/

.company-table{
margin-top:40px;
}

.row{

display:grid;
grid-template-columns:200px 1fr;

padding:16px 0;

border-bottom:1px solid var(--border);

}

.label{
color:var(--muted-foreground);
font-size:14px;
}

.value{
font-size:16px;
}

/* purpose */

.purpose-list{
margin-top:40px;
}

.purpose-item{

display:grid;
grid-template-columns:40px 1fr;
gap:20px;

margin-bottom:32px;

}

.purpose-item .num{
font-size:18px;
}

.purpose-item p{

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

color:var(--muted-foreground);

}

/* partners */

.partners{
margin-top:80px;
}

.partners-title{

font-size:28px;
font-weight:300;

letter-spacing:0.05em;

margin-bottom:24px;
margin-top:30px;

}

.partners-text{

color:var(--muted-foreground);
line-height:1.9;

max-width:940px;

}

/* ------------------------------
   Footer
--------------------------------*/

.footer{

border-top:1px solid var(--border);
padding:80px 20px;

}

.footer-inner{

max-width:1200px;
margin:auto;

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

}

.footer-menu{

display:flex;
gap:20px;

}

.footer-menu a{

text-decoration:none;
font-size:14px;

color:var(--muted-foreground);

transition:0.3s;

}

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

.copy{

text-align:center;
margin-top:40px;

font-size:12px;
color:var(--muted-foreground);

}

/* ------------------------------
   Responsive
--------------------------------*/

@media (max-width:768px){

.section{
padding:80px 24px;
}

.container{
max-width:100%;
}


/* navigation */

.hamburger{
display:flex;
z-index:200;
}

.menu{

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

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

width:100%;
height:100vh;

background:var(--background);

padding:80px 40px;

gap:0;

transform:translateX(100%);
transition:0.4s;

}

.menu.active{
transform:translateX(0);
}

/* menu link */

.menu a{

width:100%;
text-align:center;

padding:20px 0;

border-bottom:1px solid var(--border);

font-size:18px;

}

/* service button */

.menu .service-btn{

margin-top:40px;

border:none;
width:100%;
text-align:center;

padding:16px;

background:var(--accent);
color:white;

}


/* hero */

.catch{
font-size:40px;
}

/* grid */

.business-grid{
grid-template-columns:1fr;
}

/* company */

.row{
grid-template-columns:1fr;
gap:6px;
}

/* footer */

.footer-inner{

flex-direction:column;
align-items:center;
text-align:center;

gap:30px;

}

.footer-menu{

flex-direction:column;
align-items:center;
gap:12px;

}

}