@charset "UTF-8";
*{box-sizing:border-box}
html,body{margin:0;padding:0}
a{color:inherit;text-decoration:none}
:root{
  --bg:#1c1f23;
  --panel:#22272d;
  --white:#fff;
  --text:rgba(255,255,255,.88);
  --max:1200px;
  --pad:clamp(16px,3vw,56px);
}
body{
  background:var(--bg);
  font-family:"Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN","Hiragino Sans", Meiryo, sans-serif;
  color:var(--white);
  line-height:1.9;
}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad);}

/* HERO */
.hero{
  position:relative;
  height:min(78vh, 780px);
  min-height:520px;
  background:#000 url("../assets/1.jpg") center/cover no-repeat;
}
.hero__cta{
  position:absolute;
  top:32px;
  right:var(--pad);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  width:min(360px,38vw);
  background:#fff;
  color:#111;
  font-weight:700;
  letter-spacing:.06em;
}
.hero__brand{
  position:absolute;
  left:var(--pad);
  bottom:26px;
  font-family:"Noto Serif JP", serif;
  font-size:clamp(22px,2.4vw,38px);
  letter-spacing:.22em;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}

/* MESSAGE */
.message{
  background:var(--panel) url("../assets/3.jpg") center/cover no-repeat;
  padding:clamp(52px,6vw,84px) 0;
}
.message__grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:clamp(24px,4vw,64px);
  align-items: center;
}
.catch{
  margin:0;
  font-family:"Noto Serif JP", serif;
  font-weight:700;
  font-size:clamp(44px,4.6vw,72px);
  line-height:1.05;
}
.message__body{color:var(--text);font-size:clamp(14px,1.1vw,16px);}
.message__lead{text-align:center;color:rgba(255,255,255,.92);}
.message__sig{margin-top:18px;color:rgba(255,255,255,.68);}

/* PHILOSOPHY */
.philosophy{padding:clamp(64px,7vw,96px) 0 0;}
.section-title{
  margin:0 0 clamp(26px,3vw,44px);
  text-align:center;
  font-size:clamp(28px,3.2vw,48px);
  font-weight:800;
  letter-spacing:.04em;
}
.tri{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,3vw,44px);
  text-align:center;
  padding-bottom:clamp(42px,5vw,70px);
}
.tri__head{
  font-size:clamp(18px,2vw,34px);
  font-weight:900;
  letter-spacing:.14em;
}
.tri__head--lower{text-transform:lowercase}
.tri__big{
  margin-top:6px;
  font-size:clamp(22px,2.6vw,42px);
  font-weight:900;
  line-height:1.05;
}
.tri p{
  margin:18px 0 0;
  color:rgba(255,255,255,.86);
  font-size:clamp(14px,1.2vw,18px);
  line-height:1.75;
}

/* PHILOSOPHY */
.philosophy{padding:clamp(64px,7vw,96px) 0;}
.section-title{
  margin:0 0 clamp(26px,3vw,44px);
  text-align:center;
  font-size:clamp(30px,3.2vw,52px);
  font-weight:900;
  letter-spacing:.04em;
}

.philo-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(22px,3.2vw,54px);
  text-align:center;
}
.philo__head{
  font-size:clamp(18px,1.9vw,32px);
  font-weight:900;
  letter-spacing:.14em;
}
.philo__headline{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:14px;
}
.philo__head--lower{text-transform:lowercase}
.philo__big{
  margin-top:0;
  font-size:clamp(22px,2.4vw,40px);
  font-weight:900;
  line-height:1.05;
}
.philo p{
  margin:18px 0 0;
  color:rgba(255,255,255,.86);
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.75;
}

.philo-photo{
  height:clamp(240px,26vw,380px);
  background:#000 url("../assets/2.jpg") center/cover no-repeat;
}
/* BUSINESS */
.business{
  position:relative;
  background:#000 url("../assets/5.jpg") center/cover no-repeat;
  padding:clamp(78px,8vw,120px) 0;
}
.business::before{content:"";position:absolute;inset:0;background:rgba(28,31,35,.88);}
.business__inner{position:relative;}
.business__title{
  margin:0 0 24px;
  font-size:clamp(34px,3.4vw,56px);
  font-weight:900;
  letter-spacing:.08em;
}
.business__text{
  margin:0;
  max-width:64ch;
  font-size:clamp(16px,1.7vw,28px);
  line-height:1.75;
  color:rgba(255,255,255,.92);
}
.business__cta{
  margin-top:clamp(26px,4vw,56px);
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:92px;
  width:min(360px,42vw);
  background:#fff;
  color:#111;
  font-weight:700;
  font-size:clamp(18px,2vw,30px);
  letter-spacing:.06em;
}

/* CONTACT */
.contact{
  background:#000 url("../assets/4.jpg") center/cover no-repeat;
  padding:clamp(56px,7vw,96px) 0;
  display:flex;
  align-items:center;
  min-height:70vh;
  background-position: center bottom;
}
.contact__bar{
  width:min(1100px, calc(100% - var(--pad)*2));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  
}
.contact__left{background:#fff;color:#111;padding:clamp(22px,2.6vw,34px);}
.contact__right{background:#252a31;color:#fff;padding:clamp(22px,2.6vw,34px);}
.contact__h{font-size:clamp(36px,3.2vw,56px);font-weight:500;letter-spacing:.06em;margin-bottom:14px;}
.contact__meta{font-size:clamp(14px,1.2vw,18px);}
.contact__sns a{display:block;margin-top:10px;font-size:clamp(14px,1.1vw,16px);color:rgba(255,255,255,.8);}

/* Responsive */
@media (max-width:1024px){
  .hero{min-height:460px}
  .catch{text-align: center;}
  .message__grid{grid-template-columns:1fr}
  .message__lead{text-align:center}
  .tri{grid-template-columns:1fr}
  .strip__grid{grid-template-columns:1fr}
  .contact__bar{grid-template-columns:1fr}
  .business__cta{margin-left:0;height:76px;width:min(320px,72vw)}
  .hero__cta{width:min(320px,72vw)}
}
.copyright {
  text-align: center;
  font-size: 12px;
  color: #777;
  padding: 16px 0 24px;
  background: #111;      
  letter-spacing: 0.05em;
}

.philo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

@media (max-width: 768px) {
  .philo-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}