@charset "UTF-8";
/* =========================================================
   マルワ食品 新規HP デザイン案
   テーマ：安心・安全 / 温かみ（パンフレット配色ベース）
   ========================================================= */

:root {
  /* base */
  --cream:    #FBF7EF;
  --cream-2:  #F4ECDC;
  --paper:    #FFFFFF;
  --ink:      #2C2620;
  --ink-soft: #5E544A;
  --line:     #E6DCC9;

  /* brand (logo / pamphlet) */
  --orange:   #E8772B;
  --orange-d: #CD631C;
  --red:      #C0392B;
  --green:    #2F7B4F;
  --green-d:  #245F3D;
  --yellow:   #F2B233;
  --wood:     #D9C2A3;

  /* service category accents (pamphlet tags) */
  --cat-corp:  #C0392B; /* 企業向け = 赤 */
  --cat-dorm:  #E8772B; /* 学生寮・合宿所向け = オレンジ */
  --cat-welf:  #2F7B4F; /* 福祉系向け = 緑 */

  --radius: 14px;
  --shadow: 0 10px 30px rgba(60, 45, 25, .08);
  --shadow-s: 0 4px 14px rgba(60, 45, 25, .07);
  --maxw: 1120px;
  --serif: "Zen Old Mincho", "Shippori Mincho", "Yu Mincho", serif;
  --gothic: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--gothic);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.4; margin: 0; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---------- section heading ---------- */
.sec { padding: 96px 0; }
.sec-tight { padding: 64px 0; }
.sec-head { text-align: center; margin-bottom: 52px; }
.sec-head .en {
  display: block;
  font-family: var(--serif);
  letter-spacing: .25em;
  color: var(--orange);
  font-size: .8rem;
  margin-bottom: 10px;
}
.sec-head h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.sec-head h2 small { display:block; font-family: var(--gothic); font-weight:400; font-size:.95rem; color: var(--ink-soft); margin-top:12px; }
.lead { color: var(--ink-soft); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 14px 30px; border-radius: 999px;
  font-weight: 700; font-size: .95rem;
  background: var(--orange); color: #fff;
  box-shadow: var(--shadow-s);
  transition: transform .15s ease, background .2s ease;
}
.btn:hover { background: var(--orange-d); transform: translateY(-2px); }
.btn-line { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow:none; }
.btn-line:hover { background: var(--ink); color: #fff; }
.btn-ghost { background:#fff; color: var(--orange); border:1.5px solid var(--orange); box-shadow:none; }
.btn-ghost:hover { background: var(--orange); color:#fff; }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- image placeholder ---------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(217,194,163,.18) 0 12px, rgba(217,194,163,.30) 12px 24px),
    var(--cream-2);
  border: 1.5px dashed var(--wood);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: #A8957A; font-size: .85rem; font-weight: 700; text-align: center;
  letter-spacing: .04em; padding: 16px; min-height: 160px;
}
.ph::before { content: "📷"; position:absolute; top:12px; left:14px; opacity:.5; font-size:1rem; }
.ph.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; border:0; color: transparent; }
.ph.has-img::before { display: none; }
.ph.ratio-16x9 { aspect-ratio: 16 / 9; }
.ph.ratio-4x3  { aspect-ratio: 4 / 3; }
.ph.ratio-1x1  { aspect-ratio: 1 / 1; }
.ph.ratio-3x4  { aspect-ratio: 3 / 4; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,247,239,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo-mark {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, var(--yellow), var(--orange) 55%, var(--red));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900;
  font-family: var(--serif); font-size: 1rem; box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
}
.brand .logo-mark::after{ content:""; position:absolute; }
.brand .logo-img { height: 52px; width: auto; display: block; }
.brand .name { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.brand .name small { display:block; font-family:var(--gothic); font-weight:400; font-size:.62rem; color:var(--ink-soft); letter-spacing:.12em; }

.gnav ul { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.gnav a:not(.btn) { font-size: .92rem; font-weight: 700; position: relative; padding: 6px 0; }
.gnav a:not(.btn)::after {
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--orange); transition: width .25s ease;
}
.gnav a:not(.btn):hover::after { width: 100%; }
/* お問い合わせボタン：左右に余白を確保 */
.gnav a.btn { padding: 11px 24px; font-size: .9rem; }

.has-drop { position: relative; }
.has-drop > .drop {
  display: block;                /* ← .gnav ul の flex を解除して縦並びに */
  list-style: none; margin: 0;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 8px; min-width: max-content; opacity: 0; visibility: hidden; transition: all .2s ease;
}
.has-drop:hover > .drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px); }
.drop li { display: block; width: 100%; }
.gnav .drop a:not(.btn) { display:flex; align-items:center; gap:10px; padding: 11px 18px 11px 12px; border-radius: 8px; font-size:.88rem; font-weight:600; white-space: nowrap; }
.gnav .drop a:not(.btn):hover { background: var(--cream-2); color: var(--orange); }
.drop .dot { width:9px; height:9px; border-radius:50%; flex:none; }

.nav-toggle { display: none; background:none; border:0; cursor:pointer; width:44px; height:44px; }
.nav-toggle span { display:block; width:24px; height:2px; background: var(--ink); margin: 5px auto; transition: .3s; }

/* =========================================================
   HERO
   ========================================================= */
.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding: 84px 0 96px; }
.hero-copy .badge {
  display:inline-block; background: var(--green); color:#fff; font-size:.78rem; font-weight:700;
  padding: 6px 16px; border-radius: 999px; letter-spacing:.08em; margin-bottom: 24px;
}
.hero-copy h1 {
  font-size: clamp(2rem, 5.2vw, 3.3rem); line-height: 1.45; letter-spacing: .02em;
}
.hero-copy h1 .mark { color: var(--orange); }
.hero-copy .sub { margin-top: 26px; font-size: 1.05rem; color: var(--ink-soft); }
.hero-copy .cta { margin-top: 38px; display:flex; gap:14px; flex-wrap: wrap; }

.hero-visual { position: relative; }
.hero-visual .ph { min-height: 420px; border-radius: 22px; }
.hero-visual .note {
  position:absolute; right:-8px; bottom:-18px; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:14px 18px; box-shadow: var(--shadow); font-size:.8rem; color:var(--ink-soft); max-width:220px;
}
.hero-visual .note b { color: var(--ink); }
.hero::after{
  content:""; position:absolute; right:-120px; top:-120px; width:380px; height:380px; border-radius:50%;
  background: radial-gradient(circle, rgba(242,178,51,.18), transparent 70%); z-index:0;
}

/* ---- HERO: full-bleed background video + overlay text ---- */
.hero-video {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; text-align: left;
}
.hero-video .bg { position: absolute; inset: 0; z-index: 0; }
.hero-video .bg video,
.hero-video .bg .bg-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display:block;
}
.hero-video .bg .bg-ph {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 18px, rgba(255,255,255,.08) 18px 36px),
    linear-gradient(135deg, #6b4f2e, #2f3a2c 60%, #1f2a20);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-size: .9rem; font-weight: 700; letter-spacing: .05em;
}
.hero-video .overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(30,24,18,.45), rgba(30,24,18,.62));
}
.hero-video .hero-content { position: relative; z-index: 2; color: #fff; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 40px 24px; }
.hero-video .badge {
  display:inline-block; background: var(--green); color:#fff; font-size:.78rem; font-weight:700;
  padding: 7px 18px; border-radius: 999px; letter-spacing:.08em; margin-bottom: 26px;
}
.hero-video h1 {
  font-size: clamp(2.1rem, 6vw, 4rem); line-height: 1.5; letter-spacing: .04em;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.hero-video h1 .mark { color: var(--yellow); }
.hero-video .sub { margin-top: 28px; font-size: clamp(1rem,2.2vw,1.15rem); color: rgba(255,255,255,.92); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero-video .cta { margin-top: 40px; display:flex; gap:14px; flex-wrap: wrap; justify-content: flex-start; }
.hero-video .cta .btn-line { color:#fff; border-color: rgba(255,255,255,.85); }
.hero-video .cta .btn-line:hover { background:#fff; color: var(--ink); }
.hero-video .scroll-cue {
  position:absolute; bottom: 26px; right: 32px; z-index:2; color:#fff;
  font-size:.7rem; letter-spacing:.2em; opacity:.85; animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }

/* =========================================================
   INTRO / ABOUT
   ========================================================= */
.intro { background: var(--paper); }
.intro-grid { display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.intro-grid h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); margin-bottom: 22px; }
.intro-grid p { color: var(--ink-soft); }
.intro-grid .ph { min-height: 320px; }

/* =========================================================
   GREETING (社長挨拶)
   ========================================================= */
.greeting { background: var(--cream-2); }
.greeting-grid { display:grid; grid-template-columns: 200px 1fr; gap: 48px; align-items:center; }
.greeting .ph { min-height: 240px; }
.greeting h2 { font-size: clamp(1.4rem,3.5vw,1.9rem); margin-bottom: 20px; }
.greeting .msg { color: var(--ink-soft); }
.greeting .sign { margin-top: 24px; font-family: var(--serif); }
.greeting .sign b { font-size: 1.2rem; margin-left: 8px; }

/* =========================================================
   TROUBLES (お悩み)
   ========================================================= */
.troubles { background: var(--paper); }
.trouble-talk { max-width: 720px; margin-inline:auto; display:flex; flex-direction:column; gap: 22px; }
.bubble-row { display:flex; align-items:center; }
.bubble-row.right { flex-direction: row-reverse; }
.bubble-row .bubble {
  position:relative; margin:0; font-weight:700; color:var(--ink); line-height:1.6;
  background: var(--cream); border:1px solid var(--line); border-radius:16px;
  padding:18px 24px; box-shadow: var(--shadow-s);
}
/* 吹き出しのしっぽ（枠線色＋本体色の二枚重ね） */
.bubble-row .bubble::before, .bubble-row .bubble::after { content:""; position:absolute; top:21px; width:0; height:0; border-style:solid; }
.bubble-row.left  .bubble::before { left:-17px;  border-width:9px; border-color:transparent var(--line) transparent transparent; }
.bubble-row.left  .bubble::after  { left:-15px;  border-width:8px; border-color:transparent var(--cream) transparent transparent; }
.bubble-row.right .bubble::before { right:-17px; border-width:9px; border-color:transparent transparent transparent var(--line); }
.bubble-row.right .bubble::after  { right:-15px; border-width:8px; border-color:transparent transparent transparent var(--cream); }
.troubles .solve { text-align:center; margin-top: 44px; font-family: var(--serif); font-size: clamp(1.2rem,3vw,1.6rem); }
.troubles .solve .mark { color: var(--orange); }
.troubles .solve-lead { text-align:center; max-width: 760px; margin: 16px auto 0; color: var(--ink-soft); line-height: 1.9; }

/* =========================================================
   STRENGTH (強み)
   ========================================================= */
.strength { background: var(--cream); }
.strength-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.strength-grid .item {
  background:#fff; border-radius: var(--radius); padding: 34px 28px; box-shadow: var(--shadow-s);
  border-top: 4px solid var(--orange);
}
.strength-grid .item .no { font-family: var(--serif); color: var(--orange); letter-spacing:.15em; font-size:.8rem; font-weight:700; }
.strength-grid .item h3 { font-size: 1.2rem; margin: 8px 0 12px; }
.strength-grid .item p { margin:0; color: var(--ink-soft); font-size:.93rem; }
.strength-grid .item:nth-child(2){ border-top-color: var(--green); }
.strength-grid .item:nth-child(2) .no{ color:var(--green); }
.strength-grid .item:nth-child(3){ border-top-color: var(--red); }
.strength-grid .item:nth-child(3) .no{ color:var(--red); }
.strength-grid .item:nth-child(4){ border-top-color: var(--yellow); }
.strength-grid .item:nth-child(4) .no{ color:#C9941C; }
.strength-grid .item:nth-child(5){ border-top-color: var(--wood); }
.strength-grid .item:nth-child(5) .no{ color:#B08A56; }

/* =========================================================
   SERVICES (対応分野)
   ========================================================= */
.services { background: var(--paper); }
.service-cards { display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.service-card {
  background: var(--cream); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-s); display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card .thumb { position:relative; }
.service-card .thumb .ph { border:0; border-radius:0; min-height: 190px; }
.service-card .tag {
  position:absolute; top:14px; left:14px; color:#fff; font-size:.78rem; font-weight:700;
  padding:5px 14px; border-radius:999px;
}
.service-card .body { padding: 26px 24px 28px; display:flex; flex-direction:column; flex:1; }
.service-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.service-card p { color: var(--ink-soft); font-size:.92rem; margin: 0 0 18px; }
.service-card .price {
  margin-top: auto; background:#fff; border:1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px;
}
.service-card .price .label { font-size:.74rem; color: var(--ink-soft); }
.service-card .price .yen { font-family: var(--serif); font-size: 1.5rem; font-weight:700; }
.service-card .price .yen small { font-size:.8rem; font-weight:400; }
.service-card .more { font-weight:700; font-size:.9rem; display:inline-flex; align-items:center; gap:6px; }
.service-card.corp .tag{ background: var(--cat-corp);} .service-card.corp .yen{ color: var(--cat-corp);} .service-card.corp .more{ color: var(--cat-corp);}
.service-card.dorm .tag{ background: var(--cat-dorm);} .service-card.dorm .yen{ color: var(--cat-dorm);} .service-card.dorm .more{ color: var(--cat-dorm);}
.service-card.welf .tag{ background: var(--cat-welf);} .service-card.welf .yen{ color: var(--cat-welf);} .service-card.welf .more{ color: var(--cat-welf);}

/* =========================================================
   AREA (対応エリア)
   ========================================================= */
.area { background: var(--green); color:#fff; }
.area .sec-head .en{ color:#FCE9C8; } .area .sec-head h2{ color:#fff; }
.area .sec-head small{ color: rgba(255,255,255,.85);}
.pref-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 28px; }
.pref-chips .chip { background:#fff; color:var(--green-d); font-weight:700; font-size:.95rem; padding:8px 20px; border-radius:999px; box-shadow: var(--shadow-s); }
.area-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.area-card { background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25); border-radius: var(--radius); padding: 28px 26px; }
.area-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.area-card .pref { font-size:.82rem; color:#FCE9C8; letter-spacing:.1em; }
.area-card p { margin:8px 0 0; color: rgba(255,255,255,.9); font-size:.92rem; }
.area-card .soon { display:inline-block; margin-top:12px; background: var(--yellow); color: var(--ink); font-size:.72rem; font-weight:700; padding:3px 12px; border-radius:999px; }

/* =========================================================
   NEWS
   ========================================================= */
.news { background: var(--cream); }
.news-list { max-width: 800px; margin-inline:auto; }
.news-item { display:flex; gap: 22px; align-items:center; padding: 20px 4px; border-bottom:1px solid var(--line); }
.news-item time { font-family: var(--serif); color: var(--ink-soft); font-size:.9rem; flex:none; width: 100px; }
.news-item .cat { flex:none; font-size:.72rem; font-weight:700; color:#fff; background: var(--green); padding:3px 12px; border-radius:999px; }
.news-item .ttl { font-weight:700; font-size:.96rem; }
.news-item:hover .ttl { color: var(--orange); }
.news .center { text-align:center; margin-top: 40px; }

/* =========================================================
   CTA band
   ========================================================= */
.cta-band { background: linear-gradient(120deg, var(--orange), var(--red)); color:#fff; text-align:center; }
.cta-band h2 { font-size: clamp(1.5rem,4vw,2.2rem); }
.cta-band p { margin: 16px 0 30px; color: rgba(255,255,255,.92); }
.cta-band .btn { background:#fff; color: var(--orange); }
.cta-band .btn:hover { background: var(--ink); color:#fff; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--ink); color: #D8CFC2; padding: 64px 0 28px; }
.foot-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer .brand .name { color:#fff; }
.site-footer .brand .name small{ color:#A99E8E; }
.site-footer p { color:#A99E8E; font-size:.86rem; margin: 14px 0 0; }
.foot-col h4 { font-family: var(--gothic); font-size:.82rem; color:#fff; letter-spacing:.1em; margin-bottom:16px; }
.foot-col ul { list-style:none; padding:0; margin:0; }
.foot-col li { margin-bottom:10px; }
.foot-col a { font-size:.88rem; color:#C9BFB0; }
.foot-col a:hover { color:#fff; }
.foot-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 22px; text-align:center; font-size:.78rem; color:#8C8273; }

/* =========================================================
   PAGE (下層ページ共通)
   ========================================================= */
.page-hero { background: var(--cream-2); padding: 64px 0; text-align:center; border-bottom:1px solid var(--line); }
.page-hero .en { display:block; font-family:var(--serif); letter-spacing:.25em; color: var(--orange); font-size:.78rem; margin-bottom:10px; }
.page-hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
.breadcrumb { font-size:.78rem; color: var(--ink-soft); padding: 16px 0; }
.breadcrumb a:hover { color: var(--orange); }

/* service detail */
.svc-hero { padding: 56px 0; }
.svc-hero .tagline { display:inline-block; color:#fff; font-size:.8rem; font-weight:700; padding:5px 16px; border-radius:999px; margin-bottom:18px; }
.svc-hero h1 { font-size: clamp(1.7rem,4.5vw,2.5rem); margin-bottom:18px; }
.svc-hero p { color: var(--ink-soft); max-width: 760px; }
.svc-section { padding: 56px 0; }
.feature-list { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
/* 4列で並べたい箇所用。狭い画面では下のメディアクエリで段数を落とす。
   インラインstyleで指定するとメディアクエリが効かなくなるためクラスで持つ。 */
.feature-list.cols-4 { grid-template-columns: repeat(4,1fr); }
.feature-list .f { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; }
.feature-list .f .ico { font-size:1.8rem; margin-bottom:10px; }
.feature-list .f h3 { font-size:1.1rem; margin-bottom:8px; }
.feature-list .f p { margin:0; color: var(--ink-soft); font-size:.9rem; }
.menu-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
.menu-grid figure { margin:0; }
.menu-grid .ph { min-height: 150px; }
.menu-grid figcaption { font-size:.82rem; color: var(--ink-soft); margin-top:8px; text-align:center; }
.price-box {
  border-radius: var(--radius); padding: 38px 32px; text-align:center; color:#fff; box-shadow: var(--shadow);
}
.price-box .label { font-size:.9rem; opacity:.9; }
.price-box .big { font-family: var(--serif); font-size: clamp(2.2rem,6vw,3.2rem); font-weight:700; line-height:1.2; }
.price-box .big small { font-size:1rem; }
.price-box .note { font-size:.82rem; opacity:.9; margin-top:8px; }
.price-box.corp { background: linear-gradient(120deg, #d2473a, var(--cat-corp)); }
.price-box.dorm { background: linear-gradient(120deg, #f08a3e, var(--cat-dorm)); }
.price-box.welf { background: linear-gradient(120deg, #3a9362, var(--cat-welf)); }

/* 料金（カードなし・テキスト表示） */
.price-plain .label { font-size:.92rem; font-weight:700; color: var(--ink-soft); }
.price-plain .big { font-family: var(--serif); font-size: clamp(2.1rem,5.5vw,3rem); font-weight:700; line-height:1.2; margin-top:4px; }
.price-plain .big small { font-size:1rem; color: var(--ink-soft); }
.price-plain .note { font-size:.82rem; color: var(--ink-soft); margin-top:8px; }
.price-plain.corp .big { color: var(--cat-corp); }
.price-plain.dorm .big { color: var(--cat-dorm); }
.price-plain.welf .big { color: var(--cat-welf); }
.price-plain .btn { margin-top: 20px; }

/* 献立カード（メニュー紹介・SANKO風） */
.kondate-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.kondate-grid.cols-2 { grid-template-columns: repeat(2,1fr); max-width: 800px; margin-inline: auto; }
.kondate-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-s); display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.kondate-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.kondate-card .ph { border:0; border-radius:0; min-height: 200px; }
.kondate-card .body { padding: 22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.kondate-card .meal {
  align-self:flex-start; color:#fff; font-size:.74rem; font-weight:700; padding:4px 13px; border-radius:999px; margin-bottom:12px;
}
.kondate-card h3 { font-size: 1.08rem; margin-bottom: 10px; line-height:1.5; }
.kondate-card .dishes {
  list-style:none; margin:0 0 14px; padding:0 0 14px; border-bottom:1px dashed var(--line);
  display:flex; flex-wrap:wrap; gap:6px;
}
.kondate-card .dishes li {
  background: var(--cream-2); color: var(--ink-soft); font-size:.78rem; padding:3px 10px; border-radius:6px;
}
.kondate-card p { margin:0; color: var(--ink-soft); font-size:.86rem; }
.kondate-card.meal-morning .meal { background: var(--green); }
.kondate-card.meal-lunch .meal   { background: var(--orange); }
.kondate-card.meal-dinner .meal  { background: var(--red); }
.kondate-card.meal-event .meal   { background: #B07A2E; }
.kondate-card.meal-soft .meal    { background: #6E8B5A; }
.kondate-card { cursor: pointer; }
.kondate-card .zoom-hint {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background: rgba(44,38,32,.55); color:#fff; font-size:1rem; pointer-events:none;
  opacity:0; transition: opacity .18s ease;
}
.kondate-card { position: relative; }
.kondate-card:hover .zoom-hint { opacity:1; }

/* 献立ポップアップ（拡大表示） */
.kondate-modal {
  position: fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center; padding:24px;
  background: rgba(30,24,18,.62);
}
.kondate-modal.open { display:flex; }
.kondate-modal .modal-inner {
  position:relative; width:100%; max-width:760px; max-height:92vh; overflow-y:auto;
  border-radius:18px; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.4);
  animation: modalpop .2s ease;
}
@keyframes modalpop { from { transform: scale(.93); opacity:0; } to { transform: scale(1); opacity:1; } }
.kondate-modal .modal-close {
  position:absolute; top:12px; right:12px; z-index:3;
  width:42px; height:42px; border:0; border-radius:50%; cursor:pointer;
  background: rgba(255,255,255,.92); color: var(--ink); font-size:1.5rem; line-height:1;
  display:grid; place-items:center; box-shadow: var(--shadow-s);
}
.kondate-modal .modal-close:hover { background:#fff; }
.kondate-modal .kondate-card { cursor:default; border:0; box-shadow:none; border-radius:18px; }
.kondate-modal .kondate-card:hover { transform:none; box-shadow:none; }
.kondate-modal .kondate-card .zoom-hint { display:none; }
.kondate-modal .ph { min-height: 460px; font-size: 1rem; }
.kondate-modal .body { padding: 30px 34px 34px; }
.kondate-modal .meal { font-size:.86rem; padding:6px 18px; margin-bottom:18px; }
.kondate-modal h3 { font-size: clamp(1.4rem,3vw,1.8rem); margin-bottom:18px; }
.kondate-modal .dishes { padding-bottom:18px; margin-bottom:18px; gap:8px; }
.kondate-modal .dishes li { font-size:.92rem; padding:5px 14px; }
.kondate-modal p { font-size:1rem; line-height:1.9; }

/* company table */
.company-table { width:100%; border-collapse: collapse; background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-s); }
.company-table th, .company-table td { text-align:left; padding: 18px 22px; border-bottom:1px solid var(--line); font-size:.94rem; }
.company-table th { background: var(--cream-2); width: 200px; font-family: var(--gothic); font-weight:700; vertical-align: top; }
.company-table tr:last-child th, .company-table tr:last-child td { border-bottom:0; }
.office-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.office-layout { display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:start; }
.office-layout .office-cards { grid-template-columns: 1fr; align-content:start; }
.office-layout .office-photo { border-radius: var(--radius); aspect-ratio: 4 / 3; }
.office-cards .o { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.office-cards .o h3 { font-size:1.1rem; margin-bottom:8px; }
.office-cards .o p { margin:0; color: var(--ink-soft); font-size:.9rem; }
.office-cards .o.is-upcoming { border-style: dashed; background: var(--cream); }
.office-cards .o h3 .badge-soon {
  display:inline-block; margin-left:10px; padding: 3px 10px; border-radius: 999px;
  background: var(--orange); color:#fff; font-family: var(--gothic);
  font-size:.68rem; font-weight:700; letter-spacing:.04em; vertical-align: middle;
}

/* form */
.form { max-width: 760px; margin-inline:auto; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-s); }
.form .row { margin-bottom: 24px; }
.form label { display:block; font-weight:700; font-size:.9rem; margin-bottom:8px; }
.form label .req { color:#fff; background: var(--red); font-size:.66rem; padding:2px 8px; border-radius:4px; margin-left:8px; }
.form input, .form select, .form textarea {
  width:100%; padding: 13px 14px; border:1px solid var(--line); border-radius: 8px; font-family: inherit; font-size:.95rem; background: var(--cream);
}
.form input:focus, .form textarea:focus, .form select:focus { outline:2px solid var(--orange); border-color: transparent; }
.form .submit { text-align:center; margin-top: 8px; }
.contact-info { display:grid; grid-template-columns: repeat(2,1fr); gap:22px; max-width:760px; margin: 0 auto 40px; }
.contact-info .ci { background: var(--cream-2); border-radius: var(--radius); padding: 24px; text-align:center; }
.contact-info .ci h3 { font-size:1rem; margin-bottom:6px; }
.contact-info .ci .tel { font-family: var(--serif); font-size: 1.6rem; color: var(--orange); }
.contact-info .ci p { margin:4px 0 0; font-size:.82rem; color: var(--ink-soft); }

/* legal (privacy) */
.legal { max-width: 820px; margin-inline:auto; }
.legal h2 { font-size: 1.25rem; margin: 38px 0 12px; padding-left: 14px; border-left: 4px solid var(--orange); }
.legal p { color: var(--ink-soft); }
.legal ul { color: var(--ink-soft); padding-left: 1.2em; }

/* 404 */
.nf { text-align:center; padding: 120px 0; }
.nf .big { font-family: var(--serif); font-size: 6rem; color: var(--orange); line-height:1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .sec { padding: 64px 0; }
  .hero-inner, .intro-grid, .greeting-grid { grid-template-columns: 1fr; gap: 36px; }
  .greeting-grid .ph { max-width: 200px; }
  .trouble-cards, .strength-grid, .service-cards, .area-grid, .feature-list, .feature-list.cols-4, .office-cards, .kondate-grid { grid-template-columns: 1fr 1fr; }
  .office-layout { grid-template-columns: 1fr; }
  .office-layout .office-photo { max-width: 360px; margin: 0 auto; width: 100%; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .hero-video { min-height: 78vh; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-info { grid-template-columns: 1fr; }

  .nav-toggle { display: block; }
  .gnav {
    position: fixed; inset: 76px 0 auto 0; background: var(--cream);
    border-bottom:1px solid var(--line); transform: translateY(-120%); transition: transform .3s ease; box-shadow: var(--shadow);
  }
  .gnav.open { transform: translateY(0); }
  .gnav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 24px; }
  .gnav li { border-bottom:1px solid var(--line); }
  .gnav a { display:block; padding: 16px 4px; }
  .has-drop > .drop { position: static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:0; padding: 0 0 8px 14px; min-width:auto; }
  .gnav .btn { margin-top: 14px; justify-content:center; }
  .company-table th { width: 130px; }
}
@media (max-width: 560px) {
  .trouble-cards, .strength-grid, .service-cards, .area-grid, .feature-list, .feature-list.cols-4, .office-cards, .menu-grid, .kondate-grid { grid-template-columns: 1fr; }
  /* aspect-ratio と min-height が併存すると、狭い画面で min-height 由来の幅が
     グリッドの列幅を押し広げ、横スクロールが発生する。 */
  .intro-grid .ph { min-height: 0; }
  .news-item { flex-wrap: wrap; gap: 8px 14px; }
  .news-item time { width:auto; }
  .form { padding: 24px; }
}

/* reveal animation */
/* JSが動かない環境では本文が見えなくなるため、既定は表示にしておく。
   <html class="js"> が付いたときだけアニメーションさせる。 */
.reveal { opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }
.js .reveal { opacity:0; transform: translateY(24px); }
.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
}