/* =========================================================
  ComfyStay — Japandi CSS (clean consolidated, 2025-08-20)
  - Tokens / Reset
  - Utilities & Layout
  - Header
  - Home Top Hero (slider)
  - Home Search (hero search)
  - Buttons
  - Cards & Story Cards
  - Search / Property / Reviews
  - Section Title / Footer
========================================================= */

/* =============== 1) Tokens / Reset =============== */
:root{
  --text:#1b1b1b;
  --muted:#6a6a6a;
  --bg:#f7f3ee;
  --card:#ffffff;
  --line:#e6e2dc;
  --brand:#111827;
  --accent:#006ce4;
  --accent-600:#0058b6;
  --accent-50:#eef4ff;
  --cta:#f97316;
  --cta-600:#ea580c;
  --cta-shadow: rgba(249,115,22,.28);
  --radius:16px;
  --header-h:72px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans JP","Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.01em;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

/* focus visible */
:where(a,button,[role="button"],input,select,textarea):focus-visible{
  outline:2px solid #111827; outline-offset:2px; border-radius:10px;
}

/* =============== 2) Utilities / Layout =============== */
.container{ max-width:1200px; margin:0 auto; padding:28px; }
.home-wrap{ max-width:1200px; margin:0 auto; padding:28px; }
.strip{ border-top:1px solid var(--line); margin:32px 0; }

.grid{ display:grid; gap:16px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1024px){
  .grid--3,.grid--4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .grid--3,.grid--4{ grid-template-columns:1fr; }
}

.row-between{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mt-8{ margin-top:2rem; }

/* =============== 3) Header =============== */
.site-header{
  position: static;
  top: auto;
  z-index: 1000;
  background:#fff;
  border-bottom:1px solid rgba(17,24,39,.06);
}
.site-header.scrolled{
  background:#fff;
  box-shadow:none;
  border-bottom-color:rgba(17,24,39,.06);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:flex-start;
  max-width:1200px; margin:0 auto;
  padding:12px 28px; gap:16px; height:var(--header-h);
}
.primary-nav{ margin-left:auto; }
.primary-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:22px; align-items:center; }
.primary-nav a{
  position:relative; display:inline-block; padding:12px 3px; font-weight:800; color:#1b1b1b; opacity:.9; letter-spacing:.1px; transition:opacity .2s;
}
.primary-nav a:hover{ opacity:1; }

.cta--line{
  height:40px; padding:0 16px; border-radius:999px; border:0;
  background:#06C755; color:#fff; font-weight:800; letter-spacing:.2px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 10px 24px rgba(6,199,85,.25);
  margin-left:16px;
}
.nav-toggle{ display:none !important; border:0; background:transparent; width:40px; height:40px; border-radius:10px; }
.nav-toggle span{ display:block; width:20px; height:2px; background:#111; border-radius:2px; margin:4px auto; }

.mobile-nav{ display:none; max-height:0; overflow:hidden; border-top:1px solid rgba(17,24,39,.06); background:#fff; transition:max-height .25s ease; }
.mobile-nav.open{ display:block; max-height:420px; box-shadow:0 18px 36px rgba(2,6,23,.10); }
.mobile-nav ul{ list-style:none; margin:0; padding:8px 16px 16px; }
.mobile-nav a{ display:block; padding:14px 6px; font-weight:700; border-radius:10px; }
.mobile-nav a:hover{ background:#f8fafc; }

@media (min-width:881px){
  .nav-toggle{ display:none !important; }
  .mobile-nav{ display:none !important; max-height:0 !important; }
  .primary-nav{ display:block !important; }
  .cta--line{ display:inline-flex !important; }
}
@media (max-width:880px){
  .primary-nav{ display:none !important; }
  .cta--line{ display:none !important; }
  .nav-toggle{ display:inline-flex !important; flex-direction:column; gap:4px; }
}

/* =============== 4) Home Top Hero (slider) =============== */
.home-hero{
  position:relative; width:100%; max-width:1200px; margin:0 auto 16px;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(15,23,42,.06);
  aspect-ratio:16/7; max-height:560px;
}
.home-hero__slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none; z-index:0; }
.home-hero__slide.is-active{ opacity:1; pointer-events:auto; }
.home-hero__slide img,.home-hero__noimg{
  width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition:transform 6s ease;
}
.home-hero__noimg{
  background:
    radial-gradient(120% 120% at 25% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #e8e5e1 0%, #d9d4ce 100%);
}

/* スライド個別のオーバーレイ（テキスト層） */
.home-hero__overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:flex-end; align-items:flex-start;
  gap:12px; padding:40px 44px;
  color:#fff;
  /* 文字ぼかし無し方針：グラデでコントラスト確保、text-shadowは使わない */
  background:linear-gradient(180deg,rgba(0,0,0,0) 58%, rgba(0,0,0,.46) 100%);
  pointer-events:none; z-index:1;
}
.home-hero__overlay > *{ pointer-events:auto; }

/* バッジ／見出し／本文（text-shadow削除） */
.home-hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  width:auto; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.28); color:#fff; font-weight:800; font-size:.9rem;
  border:1px solid rgba(255,255,255,.70);
}
.home-hero__h{ margin:0 0 4px; font-weight:800; font-size:clamp(28px,4vw,44px); line-height:1.18; }
.home-hero__p{ margin:2px 0 10px; font-size:clamp(14px,1.6vw,18px); line-height:1.28; opacity:.98; }

/* CTAのみ影OK */
.home-hero__cta{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; padding:12px 18px; border-radius:12px;
  background:#fff; color:#000; font-weight:800; text-decoration:none; border:0;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.home-hero__cta:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.22); }

.home-hero__dots{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3;
  display:flex; gap:6px;
}
.home-hero__dots .dot{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; }
.home-hero__dots .dot.is-active{ background:#fff; }

/* 共通検索オーバーレイ（常時最前面） */
.home-hero > .home-hero__overlay.home-hero__overlay--common{
  background:none !important;
  justify-content:flex-end; align-items:center;
  padding-top:0; padding-bottom:48px;  /* ← ドットとの余白確保 */
  z-index:5;
}

/* スライド側は検索カード分の下余白を常に確保＋右側に空間を作る */
.home-hero__slide .home-hero__overlay{
  padding-bottom:clamp(120px,15vw,200px);
  padding-right:min(8vw,80px); /* 右上に空間を確保 */
}
@media (max-width:860px){
  .home-hero__slide .home-hero__overlay{ padding-bottom:180px; padding-right:24px; }
}

/* =============== 5) Home Search (hero search) =============== */
.hero{
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(230,226,220,.8);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  padding: 16px;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr .7fr .8fr .8fr auto;
  gap: 12px;
  align-items: end;
}
.hero .form-ctrl{ display:flex; flex-direction:column; gap:6px; }
.hero label{ font-size:.92rem; font-weight:700; color:#334155; font-weight: bold; text-shadow:1px 1px 1px rgba(255,255,255,.8); }

.hero input[type="search"],
.hero input[type="text"],
.hero input[type="number"],
.hero input[type="date"],
.hero select{
  height: 56px;
  padding: 0 14px;
  border: 1.2px solid rgba(230,226,220,.9);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-size: 16px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.hero input[type="date"]{ line-height:56px; }

.hero input:focus,
.hero select:focus{
  background: rgba(255,255,255,.98);
  border-color: #d6d1c9;
}

.hero .btn-primary{
	font-size: 18px;
  height: 56px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg,var(--cta),var(--cta-600));
  color: #fff;
  box-shadow: 0 14px 30px var(--cta-shadow);
  cursor: pointer;
  transition: filter .2s, box-shadow .2s, transform .06s;
}
.hero .btn-primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 16px 32px rgba(234,88,12,.30);
}

/* 中間帯最適化 */
@media (max-width:1100px){
  .hero-grid{ grid-template-columns:1fr 1fr .8fr .8fr auto; }
}
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; gap:10px; }
}


/* =============== 6) Buttons (common) =============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--text);
  font-weight:700; font-size:14.5px; line-height:1; cursor:pointer;
  transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(15,23,42,.10); }
.btn:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(15,23,42,.10); }
.btn--sm{ padding:8px 12px; font-size:13px; border-radius:10px; }
.btn--pill{ border-radius:999px; padding:10px 14px; font-size:13.5px; }
.btn--primary{
  background:linear-gradient(180deg,var(--cta),var(--cta-600));
  color:#fff; border-color:transparent;
  box-shadow:0 12px 26px var(--cta-shadow);
}
.btn--outline{ background:#fff; color:#111; border:1.5px solid var(--line); }
.btn--light{ background:#fff; border:1px solid var(--line); }

/* CTA色の統一（重要導線はすべて同一表現） */
.home-wrap .hero .btn-primary,
.home-wrap .btn--primary,
.container .btn--primary,
.card .btn--primary,
.reading .btn--primary{
  background: linear-gradient(180deg,var(--cta),var(--cta-600));
  color:#fff;
  border-color: transparent;
  box-shadow: 0 12px 26px var(--cta-shadow);
}
.home-wrap .btn--primary:hover{
  filter:brightness(1.05); box-shadow:0 16px 32px rgba(234,88,12,.30);
}

/* =============== 7) Cards（共通） =============== */
.card{
  display:flex; flex-direction:column; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 8px 24px rgba(17,24,39,.04); position:relative;
}
.card__img-wrap{ position:relative; display:block; overflow:hidden; border-radius:var(--radius); z-index:10; }
.card__img, .card__img img{ width:100%; height:100%; display:block; object-fit:cover; }
.card__img{ aspect-ratio:1.618 / 1; background:#f3f4f6; }

.card-title-overlay{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:10px 12px; color:#fff;
  /* 文字ぼかし無し：薄い下部グラデのみ */
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 90%);
  pointer-events:none;
}
.card-title-overlay h3{ margin:0 0 4px; font-size:16px; font-weight:800; }
.card-title-overlay .sub{ margin:0; font-size:12.5px; opacity:.98; }

.card-badges{ position:absolute; top:12px; left:12px; z-index:2; display:flex; gap:8px; flex-wrap:wrap; }
.card-badges .badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px;
  font-size:.9rem; font-weight:700; line-height:1;
  background:rgba(255,255,255,.32); color:#fff;
  border:1px solid rgba(255,255,255,.6);
}

.card__body{ padding:12px; }
.card__body--compact{ padding:10px 12px; }
.card__footer{ display:flex; justify-content:space-between; align-items:center; padding:12px; border-top:1px solid var(--line); margin-top:auto; }
.price{ font-weight:800; font-size:15px; color:#0f172a; font-variant-numeric:tabular-nums; }

/* =============== 8) Story Cards（ホーム） =============== */
.storycard{
  position:relative; display:block; overflow:hidden; border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease; background:#000;
}
.storycard:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(0,0,0,.14); }
.storycard__img{
  width:100%; height:100%; aspect-ratio:1.618/1; object-fit:cover; display:block;
  transform:scale(1.02); transition:transform .6s cubic-bezier(.22,.61,.36,1); will-change:transform;
}
.storycard:hover .storycard__img{ transform:scale(1.08); }
.storycard__img--noimg{ background:#f1f2f5; }

.storycard__overlay{
  position:absolute; inset:auto 0 0 0; padding:18px 18px 16px;
  color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.50) 0%, rgba(0,0,0,0) 65%);
}
.storycard__kicker{
  display:inline-block; margin:0 0 6px; padding:4px 8px;
  background:rgba(0,0,0,.28); backdrop-filter:blur(2px);
  border-radius:999px; font-weight:700; font-size:.86rem; letter-spacing:.02em;
}
.storycard__title{
  margin:0; font-weight:900; line-height:1.2;
  font-size:clamp(1rem,2.1vw,1.25rem);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* =============== 9) Search / Property / Reviews =============== */
.search .split{ display:grid; grid-template-columns:360px 1fr; gap:16px; }
.sidebar{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  padding:16px; position:sticky; top:calc(var(--header-h) + 4px); height:fit-content;
  transition:max-height .28s ease, padding .28s ease, margin .28s ease, border-width .28s ease;
}
@media (max-width:1024px){
  .search .split{ grid-template-columns:1fr; }
  .sidebar{ position:static; }
}
.search .card__img-wrap{ aspect-ratio:1/1; }
.search .card__img{ width:100%; height:100%; object-fit:cover; aspect-ratio:auto !important; }

.property-detail{ max-width:1100px; margin:0 auto; padding:32px 16px; }
.card-section{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:32px; box-shadow:0 4px 12px rgba(0,0,0,.03); }
.property-hero-img img{ width:100%; height:auto; transition:transform .4s; }
.property-hero-img img:hover{ transform:scale(1.03); }

.starbar{
  --size:16px; --gap:3px; --value:0;
  position:relative; display:inline-block; width:calc(var(--size)*5 + var(--gap)*4); height:var(--size);
  -webkit-mask:radial-gradient(closest-side,#000 80%,#0000 81%) left/var(--size) 100% repeat-x;
  mask:radial-gradient(closest-side,#000 80%,#0000 81%) left/var(--size) 100% repeat-x;
  background:linear-gradient(#f59e0b 0 0) 0/ calc((var(--value)/5)*100%) 100%, #e5e7eb; border-radius:4px;
}
.starbar[data-rating]{ --value:attr(data-rating number); }

/* レビュー横スクロール（左寄せ・余白調整） */
.review-reel{
  padding:16px 0 8px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  white-space:nowrap;
  text-align:left;
}
.review-track{
  display:inline-flex;
  gap:12px;
  justify-content:flex-start;
  align-items:stretch;
  scroll-snap-type:x proximity;
}
.review-track > *{ scroll-snap-align:start; }

/* =============== 10) Section Title / Footer =============== */
.section-title{
  font-family:'Playfair Display','Noto Serif JP',serif;
  font-size:2.2rem; font-weight:700; letter-spacing:.5px;
  margin:0 0 1rem; text-align:center; color:#1a1a1a; position:relative;
}
.section-title::after{
  content:""; display:block; width:60px; height:3px; background:#000;
  margin:.5rem auto 0; border-radius:2px;
}

.site-footer{ background:#f8f8f8; border-top:1px solid #e6e2dc; color:#1b1b1b; }
.site-footer a{ color:inherit; opacity:.9; }
.site-footer a:hover{ opacity:1; text-decoration:underline; }

.footer-top{ padding:28px; }
.footer-columns{
  display:grid; gap:24px;
  grid-template-columns:repeat(4, 1fr);
}
.footer-columns .fcol h3{
  margin:0 0 10px; font-size:15px; font-weight:800; color:#111827;
}
.footer-columns .fcol ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.footer-columns .fcol li{ line-height:1.6; }

@media (max-width:960px){
  .footer-columns{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .footer-columns{ grid-template-columns:1fr; }
}
.footer-bottom{ border-top:1px solid #e6e2dc; background:#fff; }
.footer-bottom__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; gap:12px;
}
.footer-bottom .locale{ color:#475569; font-weight:600; }
.footer-bottom .copy{ color:#64748b; font-size:.95rem; }

/* =============== 11) Motion preferences =============== */
@media (prefers-reduced-motion: reduce){
  .home-hero__slide img,
  .storycard__img{ transition:none; transform:none; }
  .btn,
  .home-hero__cta{ transition:none; }
}
.fcard-ico{
  display:inline-flex;
  width:24px; height:24px;
  border-radius:8px;
  background: rgba(0,0,0,.06);
  color:#111827;
  align-items:center;
  justify-content:center;
}
/* ---- 左サイドの枠線を柔らかく（デフォルトfieldset枠をリセット） ---- */
fieldset.fieldset{
  border: 1px solid rgba(230,226,220,.55);   /* 薄めの線に */
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 3px 12px rgba(0,0,0,.05);
  margin: 0 0 14px;
}

/* フォーカスが中に入った時だけ、ほんのり強調 */
fieldset.fieldset:focus-within{
  border-color: #d6d1c9;
  box-shadow:
    0 0 0 3px rgba(249,115,22,.12),
    0 6px 18px rgba(0,0,0,.07);
}

/* サイドバー自体も少しだけ柔らかく */
.sidebar{
  border: 1px solid rgba(230,226,220,.45);
  background: rgba(255,255,255,.90);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-radius: 18px;
}

/* 入力系の線をさらに薄く、フォーカス時だけ少しだけ強める */
.sidebar input,
.sidebar select{
  border: 1px solid rgba(200,196,188,.60);
  background: rgba(255,255,255,.97);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.sidebar input:focus,
.sidebar select:focus{
  border-color: #d1ccc4;
  box-shadow: 0 0 0 2px rgba(249,115,22,.14);
  outline: none;
}

/* 黒い太アウトラインを抑制（この範囲だけ上書き） */
.sidebar :where(input,select,button,textarea):focus-visible{
  outline: none; /* 既存の :focus-visible を無効化 */
}

/* ラベルのトーンを少し落として圧迫感を軽減 */
.sidebar .legend{
  color:#333;            /* 真っ黒→濃グレー */
  letter-spacing:.2px;
}