@charset "utf-8";
/* ============================================================
   いぬのおもいで LP
   骨格は tiny-doggy-lp/BRAND_GUIDE.md（いぬのくらし トーン＆マナー）に準拠。
   ガイド11章「姉妹ブランドへ展開するときは差し色だけ差し替える」に従い、
   ベース（アイボリー／グレージュ）とテキスト（チャコール）は共通のまま、
   差し色をブルーグレー系 → 温かみのあるブラウン系に置き換えている。
   本文サイズだけはスマートフォン可読性を優先し、ガイドの 11〜14px より大きい。
   ============================================================ */

/* Cormorant Garamond は既定が旧スタイル数字（11 が II に見える）のため、
   時刻や価格に使うところは高さのそろった数字（lining）に切り替える。 */
.num-lining,
.slot__time,
.price-table td.price{
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}

:root{
  /* --- ベース（BRAND_GUIDE 第2章のまま） --- */
  --color-ivory:#F4F0E8;
  --color-ivory-light:#FAF7F1;
  --color-white:#FFFFFF;
  --color-greige:#C8BFB1;
  --color-greige-light:#E0D9CD;
  --color-line-soft:#E5DFD3;
  --color-charcoal:#3D3D3D;
  --color-charcoal-soft:#555555;
  --color-text-sub:#6E6A62;      /* ガイドの #888880 は白地で 3.3:1 と低いため、
                                    注記でも 4.5:1 を満たす濃さに調整 */
  /* --- 差し色（このブランドの個性。ガイド11章に従いここだけ変更） --- */
  --color-accent:#796B60;        /* グレーブラウン：白文字とのコントラスト 5.14:1 */
  --color-accent-deep:#605349;
  --color-accent-light:#BEB0A3;
  --color-accent-pale:#EEE7E0;
  --color-attention:#A85757;     /* 注意（くすみローズ・やや濃く） */
  --color-line-green:#06C755;

  --font-jp:'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  --font-en:'Cormorant Garamond', serif;

  --max-width:1080px;
  --max-read:720px;
  --gutter:24px;

  --radius:2px;
  --radius-pill:999px;
  --shadow-card:0 4px 16px rgba(61,61,61,.06);
  --shadow-float:0 12px 36px rgba(61,61,61,.10);
}

*,*::before,*::after{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;} }

body{
  margin:0;
  font-family:var(--font-jp);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--color-charcoal);
  background:var(--color-ivory-light);
  /* スマホ下部の追従CTAに本文が隠れないよう逃がす */
  padding-bottom:0;
}
img{max-width:100%;height:auto;display:block;}
/* .btn などの display 指定が hidden 属性に勝ってしまうため、明示的に消す
   （config.js の値が空のときに出す／出さないを、この属性で切り替えているため） */
[hidden]{display:none !important;}
a{color:var(--color-accent-deep);}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.6;letter-spacing:.06em;}
p{margin:0 0 1.2em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0;padding:0;list-style:none;}

/* --- 読み上げ専用テキスト＆キーボード操作 --- */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:200;
  background:var(--color-charcoal);color:#fff;padding:10px 16px;border-radius:var(--radius);
  transition:top .2s;
}
.skip-link:focus{top:8px;}
:focus-visible{
  outline:2px solid var(--color-accent-deep);
  outline-offset:3px;
}

/* ============ 共通レイアウト ============ */
.section{padding:64px var(--gutter);}
.section--tight{padding-top:40px;}
.inner{max-width:var(--max-width);margin-inline:auto;}
.inner--read{max-width:var(--max-read);margin-inline:auto;}
.section--ivory{background:var(--color-ivory);}
.section--white{background:var(--color-white);}
/* 同じ地色の節が続くときは、境目に細い線を入れて区切りを見せる */
.section--white + .section--white,
.section--ivory + .section--ivory{border-top:1px solid var(--color-line-soft);}

.eyebrow{
  font-family:var(--font-en);
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--color-accent);margin:0 0 12px;font-weight:400;
}
.heading{
  font-size:22px;line-height:1.7;letter-spacing:.08em;font-weight:500;
  margin:0 0 24px;
}
.heading--center{text-align:center;}
.heading em{font-style:normal;color:var(--color-accent-deep);}
.lead{color:var(--color-charcoal-soft);}
.note{font-size:13px;color:var(--color-text-sub);line-height:1.9;}

/* ============ ボタン ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:14px 32px;
  font-family:var(--font-jp);font-size:16px;font-weight:500;letter-spacing:.1em;
  border:1px solid transparent;border-radius:var(--radius-pill);
  text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s;
}
.btn--primary{
  background:var(--color-accent);color:#fff;box-shadow:var(--shadow-card);
}
.btn--primary:hover{background:var(--color-accent-deep);}
.btn--ghost{
  background:transparent;color:var(--color-charcoal);border-color:var(--color-greige);
}
.btn--ghost:hover{background:var(--color-charcoal);color:#fff;border-color:var(--color-charcoal);}
.btn--line{background:var(--color-line-green);color:#fff;}
.btn--line:hover{background:#05b34c;}
.btn--block{display:flex;width:100%;}
.btn--sm{min-height:44px;padding:10px 22px;font-size:14px;letter-spacing:.08em;}
.btn__sub{display:block;font-size:12px;letter-spacing:.08em;opacity:.9;}

/* ============ ヘッダー ============ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,241,.92);
  -webkit-backdrop-filter:saturate(1.1) blur(8px);backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--color-line-soft);
}
.site-header__inner{
  max-width:var(--max-width);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px var(--gutter);
}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:inherit;}
.brand__name{font-size:17px;font-weight:500;letter-spacing:.14em;}
.brand__en{font-family:var(--font-en);font-size:12px;letter-spacing:.2em;color:var(--color-text-sub);}
.site-header .btn{min-height:44px;padding:8px 22px;font-size:14px;}
.site-header__cta{display:none;}
@media (min-width:768px){ .site-header__cta{display:inline-flex;} }

/* ============ ファーストビュー ============ */
.hero{position:relative;background:var(--color-ivory);overflow:hidden;}
/* スマホでは「写真 → コピー」の順に置き、ファーストビューに必ず写真を入れる */
.hero__inner{display:flex;flex-direction:column;}
.hero__media{position:relative;order:1;}
.hero__body{order:2;}
.hero__img{
  width:100%;
  aspect-ratio:4/3;          /* スマホは横長に切り、犬が画面いっぱいに見えるようにする */
  object-fit:cover;
  object-position:50% 50%;   /* 切り抜きは書き出し側（scripts/build-photos.sh）で済ませている */
  background:var(--color-greige-light);
}
.hero__body{
  position:relative;
  padding:24px var(--gutter) 36px;
  background:var(--color-ivory);
}
.hero__badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;}
.badge{
  display:inline-block;padding:6px 16px;border-radius:var(--radius-pill);
  font-size:12px;letter-spacing:.14em;font-weight:500;
}
.badge--fill{background:var(--color-accent);color:#fff;}
.badge--line{background:transparent;color:var(--color-accent-deep);border:1px solid var(--color-accent-light);}
.hero__title{
  font-size:26px;line-height:1.7;letter-spacing:.09em;font-weight:500;margin:0 0 14px;
}
.hero__free{
  display:block;font-family:var(--font-en);font-size:15px;letter-spacing:.24em;
  color:var(--color-accent);margin-bottom:10px;
}
.hero__meta{margin:16px 0 22px;font-size:14px;line-height:1.95;color:var(--color-charcoal-soft);}
.hero__meta dt{display:inline;font-weight:500;letter-spacing:.1em;}
.hero__meta dt::after{content:"：";}
.hero__meta dd{display:inline;margin:0;}
.hero__meta div + div{display:block;}
.hero__cta{display:flex;flex-direction:column;gap:12px;}
.hero__note{margin-top:14px;}

@media (min-width:900px){
  .hero__inner{
    max-width:var(--max-width);margin-inline:auto;
    display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;
  }
  .hero__body{padding:56px 48px 56px var(--gutter);order:1;background:transparent;}
  .hero__media{order:2;}
  .hero__img{aspect-ratio:4/3;object-position:50% 50%;border-radius:var(--radius);}
  .hero__title{font-size:32px;}
  .hero__cta{flex-direction:row;flex-wrap:wrap;}
  .hero__cta .btn{flex:0 1 auto;}
}

/* ============ 共感パート ============ */
.empathy{text-align:center;}
.empathy .heading{font-size:23px;margin-bottom:28px;}
.empathy p{color:var(--color-charcoal-soft);}
.empathy .signature{
  margin-top:28px;font-size:15px;letter-spacing:.1em;
}

/* ============ 図版つきブロック ============ */
.feature{display:grid;gap:28px;}
@media (min-width:900px){
  .feature{grid-template-columns:1fr 1fr;align-items:center;gap:56px;}
  .feature--reverse .feature__media{order:2;}
}
.feature__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);
  background:var(--color-greige-light);
}
.feature__media--square img{aspect-ratio:1/1;}

/* ============ 開催概要 ============ */
.overview{
  background:var(--color-white);border:1px solid var(--color-line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow-card);
  padding:8px 24px;
}
.overview dl{margin:0;}
.overview__row{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:16px 0;border-bottom:1px solid var(--color-line-soft);
}
.overview__row:last-child{border-bottom:0;}
.overview dt{
  font-size:12px;letter-spacing:.16em;color:var(--color-accent);font-weight:500;
}
.overview dd{margin:0;font-size:16px;letter-spacing:.04em;}
.overview dd .sub{display:block;font-size:13px;color:var(--color-text-sub);}
.overview dd .venue__address{
  font-size:15px;line-height:1.9;color:var(--color-charcoal-soft);margin-top:4px;
}
.overview dd .venue__map{display:block;margin-top:12px;}
/* スマホでタップしやすいよう、見た目を変えずに当たり判定だけ広げる */
.tel-link{
  display:inline-block;color:var(--color-accent-deep);white-space:nowrap;
  padding:10px 6px;margin:-8px -6px;
}
@media (min-width:640px){
  .overview{padding:8px 32px;}
  .overview__row{grid-template-columns:150px 1fr;gap:16px;align-items:baseline;padding:18px 0;}
  .overview dt{padding-top:4px;}
}

/* ============ 撮影スケジュール ============ */
.slots{display:grid;gap:12px;margin-top:24px;}
@media (min-width:640px){ .slots{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .slots{grid-template-columns:repeat(4,1fr);} }
.slot{
  background:var(--color-white);border:1px solid var(--color-line-soft);
  border-radius:var(--radius);padding:18px 20px;text-align:center;
}
.slot__label{font-size:12px;letter-spacing:.16em;color:var(--color-text-sub);}
.slot__time{
  font-family:var(--font-en);font-size:22px;letter-spacing:.06em;
  margin:6px 0 0;color:var(--color-charcoal);
}

/* ============ 仕様の並び（延長撮影） ============ */
.spec{
  margin:20px 0 24px;
  background:var(--color-white);border:1px solid var(--color-line-soft);
  border-radius:var(--radius);padding:4px 20px;
}
.spec__row{
  display:grid;grid-template-columns:1fr;gap:2px;
  padding:14px 0;border-bottom:1px solid var(--color-line-soft);
}
.spec__row:last-child{border-bottom:0;}
.spec dt{font-size:12px;letter-spacing:.16em;color:var(--color-accent);font-weight:500;}
.spec dd{margin:0;font-size:16px;letter-spacing:.04em;}
.spec dd strong{font-weight:700;}
.spec dd .sub{display:block;font-size:13px;color:var(--color-text-sub);margin-top:2px;}
@media (min-width:640px){
  .spec__row{grid-template-columns:130px 1fr;gap:16px;align-items:baseline;padding:16px 0;}
}

/* ============ 撮影写真の掲載について ============ */
.usage-contact{
  margin-top:28px;padding:20px 24px;
  background:var(--color-ivory);border-radius:var(--radius);
  text-align:center;
}
.usage-contact__label{
  font-size:12px;letter-spacing:.16em;color:var(--color-accent);
  font-weight:500;margin-bottom:10px;
}
.usage-contact__name{font-size:16px;letter-spacing:.06em;margin-bottom:4px;}
.usage-contact__tel{margin:0;font-size:16px;}

/* ============ 予約セクションの要約 ============ */
.reserve-summary{
  margin:24px 0 0;padding:18px 20px;
  background:var(--color-ivory);border-radius:var(--radius);
}
.reserve-summary > div{
  display:grid;grid-template-columns:1fr;gap:2px;padding:8px 0;
}
.reserve-summary dt{font-size:12px;letter-spacing:.16em;color:var(--color-accent);font-weight:500;}
.reserve-summary dd{margin:0;font-size:15px;letter-spacing:.04em;line-height:1.8;}
@media (min-width:640px){
  .reserve-summary > div{grid-template-columns:96px 1fr;gap:16px;align-items:baseline;}
}

/* ============ 料金・商品表 ============ */
.price-table{width:100%;border-collapse:collapse;margin-top:8px;background:var(--color-white);}
.price-table caption{
  text-align:left;font-size:12px;letter-spacing:.16em;color:var(--color-accent);
  padding-bottom:10px;
}
.price-table th,.price-table td{
  padding:16px 18px;border-bottom:1px solid var(--color-line-soft);
  font-weight:400;text-align:left;letter-spacing:.04em;
}
.price-table thead th{
  background:var(--color-ivory);font-size:12px;letter-spacing:.16em;
  color:var(--color-charcoal-soft);font-weight:500;
}
.price-table td.price{
  font-family:var(--font-en);font-size:20px;white-space:nowrap;text-align:right;
}
.price-table td.price .tax{font-family:var(--font-jp);font-size:12px;color:var(--color-text-sub);display:block;}

/* ============ 流れ ============ */
.flow{counter-reset:step;display:grid;gap:0;margin-top:8px;list-style:none;}
.flow__item{
  position:relative;counter-increment:step;
  padding:0 0 32px 60px;
}
.flow__item::before{
  content:counter(step);
  position:absolute;left:0;top:0;
  width:40px;height:40px;border-radius:50%;
  background:var(--color-accent-pale);color:var(--color-accent-deep);
  font-family:var(--font-en);font-size:19px;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
  display:flex;align-items:center;justify-content:center;
}
.flow__item::after{
  content:"";position:absolute;left:20px;top:46px;bottom:6px;width:1px;
  background:var(--color-line-soft);
}
.flow__item:last-child{padding-bottom:0;}
.flow__item:last-child::after{display:none;}
.flow__title{font-size:17px;letter-spacing:.08em;margin:6px 0 6px;}
.flow__desc{font-size:14px;color:var(--color-charcoal-soft);margin:0;}

/* ============ FAQ ============ */
.faq{margin-top:8px;}
.faq__item{
  background:var(--color-white);border:1px solid var(--color-line-soft);
  border-radius:var(--radius);margin-bottom:10px;
}
.faq__q{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 20px;cursor:pointer;list-style:none;
  font-size:16px;letter-spacing:.05em;line-height:1.7;
}
.faq__q::-webkit-details-marker{display:none;}
.faq__q::before{
  content:"Q";font-family:var(--font-en);color:var(--color-accent);
  font-size:17px;line-height:1.6;flex:0 0 auto;
}
.faq__q::after{
  content:"";margin-left:auto;flex:0 0 auto;align-self:center;
  width:9px;height:9px;border-right:1px solid var(--color-charcoal-soft);
  border-bottom:1px solid var(--color-charcoal-soft);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s;
}
.faq__item[open] .faq__q::after{transform:rotate(-135deg) translateY(-3px);}
.faq__a{
  display:flex;gap:12px;padding:0 20px 20px;
  font-size:15px;color:var(--color-charcoal-soft);line-height:1.9;
}
.faq__a::before{
  content:"A";font-family:var(--font-en);color:var(--color-greige);
  font-size:17px;flex:0 0 auto;
}

/* ============ 注意事項 ============ */
.notes-list li{
  position:relative;padding-left:20px;margin-bottom:10px;
  font-size:14px;line-height:1.9;color:var(--color-charcoal-soft);
}
.notes-list li::before{
  content:"";position:absolute;left:4px;top:12px;
  width:5px;height:5px;border-radius:50%;background:var(--color-greige);
}

/* ============ 予約（STORES 予約の埋め込み） ============ */
.booking{margin-top:28px;}
.booking__before{
  font-size:15px;line-height:2;color:var(--color-charcoal-soft);
  margin-bottom:20px;
}
.booking__before .note{display:inline-block;margin-top:6px;}
/* 別オリジンの iframe なので、中身に合わせて高さは伸びない。
   高さは config.js の booking.embedHeight で調整する。 */
.booking__embed{
  background:var(--color-white);border:1px solid var(--color-line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow-card);
  overflow:hidden;
}
.booking__embed iframe{
  display:block;width:100%;border:0;
}
.booking__ph{min-height:320px;border-radius:0;box-shadow:none;border:0;}
/* 埋め込みURLがまだ無いとき、予約ページへ送るボタンを出す枠 */
.booking__link{padding:28px 20px;text-align:center;}
/* ラベルと補足を縦に積む（横並びだと折り返して読みにくい） */
.booking__link .btn{flex-direction:column;gap:4px;padding-block:16px;}
.booking__link .note{margin-top:14px;}
.booking__legal{margin-top:16px;text-align:center;}
.booking__legal a{color:var(--color-accent-deep);}
.booking__fallback{margin-top:16px;text-align:center;font-size:14px;}
.booking__fallback a{color:var(--color-accent-deep);}

/* ============ フッター ============ */
.site-footer{
  background:var(--color-ivory);border-top:1px solid var(--color-line-soft);
  padding:48px var(--gutter) 40px;text-align:center;
}
.site-footer .brand{justify-content:center;margin-bottom:16px;}
.footer__contact{font-size:14px;line-height:2.1;color:var(--color-charcoal-soft);margin-bottom:20px;}
.footer__sns{display:flex;justify-content:center;gap:20px;margin-bottom:20px;font-size:13px;letter-spacing:.12em;}
.footer__operator{
  font-size:14px;letter-spacing:.08em;color:var(--color-charcoal-soft);
  margin-bottom:22px;
}
.footer__logo{width:180px;margin:0 auto 16px;}

/* ---- フッターのリンク集（法務ページ側の legal.css と同じ内容） ---- */
.footer__nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;
  margin:0 auto 18px;max-width:640px;
  font-size:13px;letter-spacing:.08em;
}
/* 指で押せる高さ（24px以上）を確保するため inline-block にして余白を持たせる */
.footer__nav a{
  display:inline-block;padding:5px 2px;
  color:var(--color-charcoal-soft);text-decoration:none;
  border-bottom:1px solid var(--color-greige-light);
}
.footer__nav a:hover{color:var(--color-accent-deep);border-bottom-color:var(--color-accent-light);}
.footer__nav--legal{
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--color-line-soft);
  font-size:12px;
}
.footer__nav--legal a{color:var(--color-text-sub);}
.site-footer .copyright{margin-top:24px;}
.copyright{font-family:var(--font-en);font-size:12px;letter-spacing:.14em;color:var(--color-text-sub);}

/* ============ 追従CTA（スマホのみ） ============ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,247,241,.95);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-top:1px solid var(--color-line-soft);
  transform:translateY(110%);transition:transform .25s ease;
}
.sticky-cta.is-shown{transform:translateY(0);}
@media (min-width:768px){ .sticky-cta{display:none;} }
body.has-sticky{padding-bottom:84px;}
@media (min-width:768px){ body.has-sticky{padding-bottom:0;} }

/* ============ 画像プレースホルダー ============ */
/* 画像がまだ無いときは、仮画像を出さずに枠だけ表示する */
.ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:var(--color-greige-light);
  border:1px dashed var(--color-greige);
  color:var(--color-charcoal-soft);text-align:center;
  font-size:12px;letter-spacing:.1em;line-height:1.8;padding:20px;
}
.ph__name{font-family:var(--font-en);font-size:11px;color:var(--color-charcoal-soft);letter-spacing:.08em;}
.hero__media .ph{aspect-ratio:4/5;}
@media (min-width:900px){ .hero__media .ph{aspect-ratio:4/3;} }
.feature__media .ph{aspect-ratio:4/3;}
.feature__media--square .ph{aspect-ratio:1/1;}