/*
Theme Name: 医食住 空間デザイン TOP
Theme URI: https://example.com/
Author: SARUORA
Author URI: https://example.com/
Description: 空間デザイン・ホームステージング事業のコーポレートTOP。Claude Design のハンドオフを忠実に再現したカスタムテーマ。ACF（Advanced Custom Fields）を有効化すると全セクションの文言・画像を管理画面から編集できます。未導入でも初期値（現行の内容）でそのまま表示されます。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: iyokushu-top
*/

/* =========================================================
   医食住 ／ 空間デザイン — Corporate TOP
   ========================================================= */

:root{
  --bg:#F6F3EE;
  --ink:#2B2721;
  --gold:#A2977F;
  --brown:#8C7355;
  --cream:#FBF8F2;

  --serif:'Shippori Mincho', serif;
  --display:'Cormorant Garamond', serif;
  --sans:'Zen Kaku Gothic New', sans-serif;
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color:var(--ink);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; }

::selection{ background:var(--brown); color:var(--bg); }

.page{ width:100%; background:var(--bg); overflow-x:hidden; }

/* Small English eyebrow label */
.eyebrow{
  font-family:var(--display);
  font-size:14px;
  letter-spacing:0.34em;
  color:var(--gold);
}

/* =============== FV / HERO =============== */
.hero{
  position:relative;
  width:100%;
  min-height:clamp(580px,92vh,900px);
  background:linear-gradient(158deg,#736C5E 0%,#4A443A 52%,#332E27 100%);
  overflow:hidden;
}
.hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(26,22,16,0.50) 0%,
    rgba(26,22,16,0.14) 30%,
    rgba(26,22,16,0.28) 55%,
    rgba(26,22,16,0.80) 100%);
}

/* header */
.header{
  position:absolute; top:0; left:0; right:0;
  height:88px;
  padding:0 clamp(20px,5vw,72px);
  display:flex; align-items:center; justify-content:space-between;
  z-index:6;
}
.brand{ display:flex; flex-direction:column; gap:2px; }
.brand__name{
  font-family:var(--serif); font-weight:500; font-size:24px;
  letter-spacing:0.42em; color:var(--cream); line-height:1;
  text-align:right; width:103px;
}
.brand__sub {
    position: relative;
    top: 4px;
    left: 3px;
    display: block;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 9.5px;
    letter-spacing: 0.5em;
    color: rgba(251, 248, 242, 0.72);
    text-align: left;
    width: 89px;
}
.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); }
.nav__link{
  font-size:12.5px; letter-spacing:0.1em; color:#F5F1EA;
  transition:opacity .25s ease;
}
.nav__link:hover{ opacity:0.66; }
.nav__line{
  display:flex; align-items:center; gap:8px;
  padding:11px 20px;
  border:1px solid rgba(251,248,242,0.55);
  font-size:12px; letter-spacing:0.08em; color:var(--cream);
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.nav__line:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* catch copy */
.hero__copy{
  position:absolute; left:clamp(20px,5vw,72px); bottom:clamp(64px,11vh,120px);
  z-index:3; max-width:720px;
  display:flex; flex-direction:column; gap:26px;
}
.hero__lead{
  font-family:var(--display); font-style:italic;
  font-size:clamp(17px,1.6vw,21px); letter-spacing:0.06em;
  color:rgba(251,248,242,0.92);
}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,5.6vw,74px); line-height:1.28; letter-spacing:0.04em;
  color:var(--cream); text-shadow:0 2px 24px rgba(0,0,0,0.28);
}
.hero__text{
  font-size:clamp(13.5px,1.15vw,15.5px); line-height:2.1; letter-spacing:0.05em;
  color:rgba(255,253,249,0.96); text-shadow:0 1px 10px rgba(0,0,0,0.55);
  max-width:500px;
}
.hero__scroll{
  position:absolute; right:clamp(20px,5vw,64px); bottom:44px; z-index:3;
  display:flex; align-items:center; gap:14px;
}
.hero__scroll span:first-child{ width:44px; height:1px; background:rgba(251,248,242,0.6); }
.hero__scroll span:last-child{
  font-family:var(--display); font-size:12px; letter-spacing:0.28em;
  color:rgba(251,248,242,0.85);
}

/* =============== CONCEPT =============== */
.concept{
  width:100%; background:var(--bg);
  padding:clamp(72px,10vw,132px) clamp(20px,5vw,72px);
}
.concept__inner{
  max-width:1200px; margin:0 auto;
  display:grid;
  grid-template-columns:minmax(220px,0.85fr) minmax(280px,1.15fr);
  gap:clamp(32px,5vw,80px); align-items:self-end;
}
.concept__head{ display:flex; flex-direction:column; gap:16px; }
.concept__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,2.6vw,34px); line-height:1.7; letter-spacing:0.06em;
  color:var(--ink);
}
.concept__body{ display:flex; flex-direction:column; gap:22px; }
.concept__body p:first-child{
  font-size:15px; line-height:2.3; letter-spacing:0.04em; color:#4A443A;
}
.concept__body p:last-child{
  font-size:14px; line-height:2.2; letter-spacing:0.04em; color:#6A6355;
}

/* =============== SERVICE =============== */
.service{ width:100%; background:#FFFFFF; padding:clamp(72px,10vw,128px) 0; }
.service__head-wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,72px); }
.service__head{ display:flex; flex-direction:column; gap:16px; max-width:640px; }
.section-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3vw,38px); letter-spacing:0.08em; color:var(--ink);
}
.service__lead{
  font-size:14.5px; line-height:2.2; letter-spacing:0.04em; color:#5A554B;
}
.service__grid-wrap{ padding:0 clamp(12px,2vw,40px); margin-top:clamp(40px,5vw,60px); }
.service__grid{
  display:grid; grid-template-columns:1fr 1fr;
  grid-auto-rows:minmax(240px,auto); gap:8px;
}
.card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.card__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.card__body{ position:relative; z-index:2; pointer-events:none; display:flex; flex-direction:column; }
.card__no{
  font-family:var(--display); letter-spacing:0.18em;
  text-shadow:0 1px 8px rgba(0,0,0,0.6);
}
.card__title{
  font-family:var(--serif); font-weight:500; letter-spacing:0.08em;
  color:var(--cream); text-shadow:0 2px 12px rgba(0,0,0,0.7);
}
.card__text{
  color:rgba(255,253,249,0.96); text-shadow:0 1px 8px rgba(0,0,0,0.75);
}

/* card 01 — home staging (large, spans 2 rows) */
.card--1{ grid-row:span 2; min-height:496px; background:#3A352D; padding:34px; }
.card--1 .card__scrim{ background:linear-gradient(180deg,rgba(20,17,12,0.28) 0%,rgba(20,17,12,0.30) 45%,rgba(20,17,12,0.86) 100%); }
.card--1 .card__body{ gap:12px; }
.card--1 .card__no{ font-size:14px; color:#DFCFA8; }
.card--1 .card__title{ font-size:clamp(24px,2.4vw,30px); }
.card--1 .card__text{ font-size:13.5px; line-height:2.05; letter-spacing:0.03em; max-width:400px; }

/* card 02 — photography */
.card--2{ min-height:240px; background:#A79C8A; padding:30px; }
.card--2 .card__scrim{ background:linear-gradient(180deg,rgba(20,17,12,0.12) 0%,rgba(20,17,12,0.30) 50%,rgba(20,17,12,0.80) 100%); }
.card--2 .card__body{ gap:10px; }
.card--2 .card__no{ font-size:13px; color:#F3ECDD; }
.card--2 .card__title{ font-size:clamp(21px,2vw,26px); }
.card--2 .card__text{ font-size:13px; line-height:1.95; letter-spacing:0.03em; max-width:360px; }

/* card 03 — space design */
.card--3{ min-height:240px; background:#B0A592; padding:30px; }
.card--3 .card__scrim{ background:linear-gradient(180deg,rgba(20,17,12,0.12) 0%,rgba(20,17,12,0.30) 50%,rgba(20,17,12,0.80) 100%); }
.card--3 .card__body{ gap:10px; }
.card--3 .card__no{ font-size:13px; color:#F3ECDD; }
.card--3 .card__title{ font-size:clamp(21px,2vw,26px); }
.card--3 .card__text{ font-size:13px; line-height:1.95; letter-spacing:0.03em; max-width:370px; }

/* card 04 — vacation rental (full width) */
.card--4{ grid-column:span 2; min-height:320px; background:#6E6555; padding:34px; }
.card--4 .card__img{ object-position:50% 77%; }
.card--4 .card__scrim{ background:linear-gradient(120deg,rgba(20,17,12,0.24) 0%,rgba(20,17,12,0.40) 40%,rgba(20,17,12,0.82) 100%); }
.card--4 .card__body{ gap:12px; max-width:560px; }
.card--4 .card__no{ font-size:14px; color:#DFCFA8; }
.card--4 .card__title{ font-size:clamp(23px,2.3vw,29px); }
.card--4 .card__text{ font-size:13.5px; line-height:2.05; letter-spacing:0.03em; }

/* =============== COMPANY =============== */
.company{
  width:100%; background:var(--bg);
  padding:clamp(72px,10vw,128px) clamp(20px,5vw,72px);
}
.company__inner{ max-width:1200px; margin:0 auto; }
.company__head{
  display:flex; flex-direction:column; gap:16px;
  margin-bottom:clamp(40px,5vw,58px); max-width:640px;
}
.company__lead{ font-size:14.5px; line-height:2.2; letter-spacing:0.04em; color:#5A554B; }
.company__grid{
  display:grid;
  grid-template-columns:minmax(260px,0.9fr) minmax(300px,1.1fr);
  gap:clamp(32px,5vw,72px); align-items:stretch;
}
.company__photo{ min-height:380px; width:100%; height:100%; object-fit:cover; }
.company__table{ display:flex; flex-direction:column; }
.row{ display:flex; padding:20px 4px; border-top:1px solid #DED7CB; }
.row:last-child{ border-bottom:1px solid #DED7CB; }
.row__label{ width:130px; flex-shrink:0; font-size:13px; letter-spacing:0.1em; color:var(--brown); }
.row__value{ font-size:14.5px; letter-spacing:0.03em; color:var(--ink); line-height:1.9; }

/* =============== CONTACT =============== */
.contact{
  position:relative; width:100%;
	padding: 100px 0;
  min-height:clamp(440px,60vh,560px);
  background:#2A2620; overflow:hidden;
  display:flex; align-items:center;
}
.contact__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.contact__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg,rgba(20,17,12,0.80) 0%,rgba(20,17,12,0.58) 45%,rgba(20,17,12,0.34) 100%);
}
.contact__inner{
  position:relative; z-index:3;
  padding:0 clamp(20px,5vw,72px); max-width:1200px; margin:0 auto; width:100%;
  display:flex; flex-direction:column; gap:24px; align-items:flex-start;
}
.contact__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3.4vw,38px); line-height:1.45; letter-spacing:0.06em;
  color:var(--cream); text-shadow:0 2px 14px rgba(0,0,0,0.55);
}
.contact__lead{
  font-size:14.5px; line-height:2.2; letter-spacing:0.04em;
  color:rgba(255,253,249,0.95); text-shadow:0 1px 8px rgba(0,0,0,0.5); max-width:500px;
}
.contact__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:8px;
}
.btn-line{
  display:flex; align-items:center; gap:12px;
  padding:17px 34px; background:#06C755; color:#FFFFFF;
  font-size:15px; font-weight:500; letter-spacing:0.06em;
  transition:background .3s ease;
}
.btn-line:hover{ background:#05b34c; }
.btn-line__icon{
  display:inline-flex; width:22px; height:22px; border-radius:6px;
  background:#fff; color:#06C755; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; font-family:var(--display);
}
.contact__tel{
  display:flex; flex-direction:column; gap:5px;
  padding-left:20px; border-left:1px solid rgba(251,248,242,0.24);
}
.contact__tel-label{ font-family:var(--display); font-size:12px; letter-spacing:0.24em; color:#C9B896; }
.contact__tel-num{
  font-family:var(--display); font-size:clamp(24px,2.4vw,30px);
  letter-spacing:0.06em; color:var(--cream); line-height:1;
}
.contact__tel-note{ font-size:11px; letter-spacing:0.06em; color:rgba(251,248,242,0.6); }
.contact__foot{ font-family:var(--serif); font-size:12px; letter-spacing:0.04em; color:rgba(251,248,242,0.62); }

/* =============== FOOTER =============== */
.footer{ width:100%; background:#2B2721; padding:clamp(48px,6vw,72px) clamp(20px,5vw,72px) 40px; }
.footer__inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:minmax(220px,1fr) auto;
  gap:40px; align-items:start;
}
.footer__brand{ display:flex; flex-direction:column; gap:14px; }
.footer__logo{ font-family:var(--display); font-weight:500; font-size:24px; letter-spacing:0.42em; color:var(--cream); }
.footer__addr{ font-size:12px; line-height:2; letter-spacing:0.04em; color:rgba(251,248,242,0.6); }
.footer__nav{ display:flex; gap:clamp(24px,4vw,52px); }
.footer__nav a{ font-size:12.5px; letter-spacing:0.1em; color:rgba(251,248,242,0.82); transition:color .25s ease; }
.footer__nav a:hover{ color:var(--cream); }
.footer__copy-wrap{ max-width:1200px; margin:44px auto 0; padding-top:24px; border-top:1px solid rgba(251,248,242,0.14); }
.footer__copy{ font-family:var(--display); font-size:11px; letter-spacing:0.14em; color:rgba(251,248,242,0.5); }

/* =============== RESPONSIVE =============== */
@media (max-width:820px){
  .concept__inner{ grid-template-columns:1fr; }
  .company__grid{ grid-template-columns:1fr; }
  .company__photo{ min-height:280px; }
  .service__grid{ grid-template-columns:1fr; }
  .card--1{ grid-row:auto; min-height:360px; }
  .card--4{ grid-column:auto; }
}

@media (max-width:640px){
  .nav__link{ display:none; }
  .header{ height:72px; }
  .footer__inner{ grid-template-columns:1fr; gap:28px; }
  .contact__actions{ gap:22px; }
  .contact__tel{ padding-left:0; border-left:0; }
}