@charset "utf-8";
/* ============================================================
   いぬのおもいで ─ 法務ページ（特商法・キャンセルポリシー・
   プライバシーポリシー・利用規約）の追加スタイル。

   assets/css/style.css を読み込んだ「あと」に読み込みます。
   色・フォント・余白・ボタン・コンテンツ幅は style.css の
   カスタムプロパティをそのまま使い、ここでは
   「長い本文を読ませるための組み方」だけを足しています。
   ============================================================ */

/* ---------- ページ見出し ---------- */
.page-head{
  background:var(--color-ivory);
  border-bottom:1px solid var(--color-line-soft);
  padding:44px var(--gutter) 40px;
}
.page-head__inner{max-width:var(--max-read);margin-inline:auto;}
.page-title{
  font-size:24px;line-height:1.6;letter-spacing:.08em;font-weight:500;
  margin:0 0 12px;
}
.page-head .lead{margin:0;font-size:15px;}

/* ---------- パンくず ---------- */
.breadcrumb{
  max-width:var(--max-read);margin:0 auto 14px;
  font-size:12px;letter-spacing:.08em;color:var(--color-text-sub);
}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.breadcrumb li{display:flex;align-items:center;gap:6px;}
.breadcrumb li + li::before{content:"／";color:var(--color-greige);}
/* 単独で置くリンクは、指で押せる高さ（24px以上）を確保する */
.breadcrumb a{
  color:var(--color-accent-deep);
  display:inline-block;padding:4px 2px;
}

/* ---------- 本文 ---------- */
.legal{padding:52px var(--gutter) 64px;background:var(--color-white);}
.legal__inner{max-width:var(--max-read);margin-inline:auto;}

/* 節。h2 のかたまりごとに区切り線を入れて、長文でも現在地が分かるようにする */
.legal__section + .legal__section{
  margin-top:40px;padding-top:36px;
  border-top:1px solid var(--color-line-soft);
}
.legal__section h2{
  font-size:18px;line-height:1.7;letter-spacing:.08em;font-weight:500;
  margin:0 0 16px;
  padding-left:14px;
  border-left:3px solid var(--color-accent-light);
}
.legal__section h3{
  font-size:15px;letter-spacing:.08em;font-weight:500;
  margin:26px 0 10px;color:var(--color-accent-deep);
}
.legal__section p{color:var(--color-charcoal-soft);font-size:15px;}

/* 箇条書き。list-style を消してあるので、点は疑似要素で置く */
.legal-list{margin:0 0 1.2em;}
.legal-list li{
  position:relative;padding-left:18px;margin-bottom:8px;
  color:var(--color-charcoal-soft);font-size:15px;line-height:1.9;
}
.legal-list li::before{
  content:"";position:absolute;left:2px;top:.85em;
  width:5px;height:5px;border-radius:50%;background:var(--color-accent-light);
}
.legal-list li:last-child{margin-bottom:0;}

/* 番号つき箇条書き（利用規約の各条の中で使う） */
.legal-ol{counter-reset:legal-num;margin:0 0 1.2em;}
.legal-ol > li{
  position:relative;padding-left:28px;margin-bottom:10px;
  color:var(--color-charcoal-soft);font-size:15px;line-height:1.9;
}
.legal-ol > li::before{
  counter-increment:legal-num;content:counter(legal-num) ".";
  position:absolute;left:0;top:0;
  font-family:var(--font-en);font-variant-numeric:lining-nums;
  color:var(--color-accent);letter-spacing:.04em;
}
.legal-ol > li:last-child{margin-bottom:0;}

/* ---------- 事業者情報などの定義リスト ---------- */
.legal-dl{margin:0;}
.legal-dl > div{
  padding:18px 0;
  border-bottom:1px solid var(--color-line-soft);
}
.legal-dl > div:first-child{border-top:1px solid var(--color-line-soft);}
.legal-dl dt{
  font-size:14px;font-weight:500;letter-spacing:.08em;
  color:var(--color-charcoal);margin-bottom:8px;
}
.legal-dl dd{
  margin:0;font-size:15px;line-height:1.9;color:var(--color-charcoal-soft);
}
.legal-dl dd p{margin-bottom:.9em;}
.legal-dl dd p:last-child{margin-bottom:0;}
.legal-dl dd .legal-list{margin-bottom:0;}

/* 画面が広いときは「項目名｜内容」の2列に。折り返しは content 側で吸収する */
@media (min-width:768px){
  .legal-dl > div{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:20px 0;}
  .legal-dl dt{margin-bottom:0;padding-top:1px;}
}

/* ---------- 補足の囲み ---------- */
.legal-callout{
  background:var(--color-ivory);
  border:1px solid var(--color-line-soft);
  border-radius:var(--radius);
  padding:20px 22px;margin:24px 0;
}
.legal-callout p{margin-bottom:.9em;font-size:14px;}
.legal-callout p:last-child{margin-bottom:0;}
.legal-callout__title{
  font-size:13px;letter-spacing:.14em;font-weight:500;
  color:var(--color-accent-deep);margin:0 0 10px;
}

/* ---------- 制定日・関連ページ ---------- */
.legal-date{
  margin-top:40px;padding-top:24px;
  border-top:1px solid var(--color-line-soft);
  font-size:13px;letter-spacing:.08em;color:var(--color-text-sub);
}
.legal-next{
  margin-top:36px;padding-top:28px;
  border-top:1px solid var(--color-line-soft);
  text-align:center;
}
.legal-next .note{margin-bottom:14px;}

/* ---------- 予約への導線 ---------- */
.legal-cta{
  background:var(--color-ivory);
  border-top:1px solid var(--color-line-soft);
  padding:48px var(--gutter) 52px;text-align:center;
}
.legal-cta__inner{max-width:var(--max-read);margin-inline:auto;}
.legal-cta .heading{margin-bottom:8px;}
.legal-cta .btn{margin-top:20px;}
.legal-cta .note{margin-top:14px;}


/* フッターのリンク集（.footer__nav 系）は style.css に移しました。
   LP 側でも同じフッターを使うため、1か所で持つほうが食い違いません。
   ここには置かないでください（2026-09-06 移設）。 */

/* ---------- ヘッダー（ロゴ・スマホメニュー・サイト内ナビ） ----------
   本体サイト（site.css）と同じ見え方・同じ挙動にそろえるための指定です。
   法務ページは site.css を読まないので、ここに同じ値を置いています。
   変数名だけ style.css のもの（--color-* 付き）に読み替えています。

   ★ 本体サイト側でヘッダーを変えたら、ここも必ず合わせてください。
     とくに PC の境目は 900px です（style.css の 768px ではありません）。 */

:root{ --header-h:60px; }                 /* スマホ。PCは下の @media で 72px */
html{
  scroll-padding-top:calc(var(--header-h) + 8px);
  /* 本体サイト（site.css）と同じ扱いにする。入れないと、本体ページと法務ページを
     行き来したときにスクロールバーのぶんだけ横位置が数px動いて見える。 */
  scrollbar-gutter:stable;
}

.site-header__inner{
  position:relative;                      /* スマホのメニューはこの下に開く */
  min-height:var(--header-h);
  padding:6px var(--gutter);
  gap:16px;
}
.brand{flex:0 0 auto;}
.brand__logo{width:78px;height:auto;}
.site-footer .brand__logo{width:150px;margin:0 auto 16px;}

/* ---- スマホのメニューボタン ---- */
.nav-toggle{
  margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:6px 2px 6px 12px;
  background:none;border:0;cursor:pointer;color:var(--color-charcoal);
  font-family:var(--font-jp);font-size:11px;letter-spacing:.18em;
}
.nav-toggle__box{position:relative;display:block;width:20px;height:12px;}
.nav-toggle__box::before,.nav-toggle__box::after,.nav-toggle__bar{
  content:"";position:absolute;left:0;width:100%;height:1px;
  background:var(--color-charcoal);
  transition:transform .2s ease,opacity .15s ease;
}
.nav-toggle__box::before{top:0;}
.nav-toggle__bar{top:50%;margin-top:-.5px;}
.nav-toggle__box::after{bottom:0;}
body.nav-open .nav-toggle__box::before{transform:translateY(5.5px) rotate(45deg);}
body.nav-open .nav-toggle__bar{opacity:0;}
body.nav-open .nav-toggle__box::after{transform:translateY(-5.5px) rotate(-45deg);}

/* ---- スマホのメニュー本体（ヘッダーの下に開く） ---- */
.site-nav{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  padding:4px var(--gutter) 22px;
  background:var(--color-ivory-light);
  border-bottom:1px solid var(--color-line-soft);
  box-shadow:0 10px 20px rgba(61,61,61,.06);
}
body.nav-open .site-nav{display:block;}
.site-nav__list{font-size:15px;letter-spacing:.08em;}
.site-nav__list a{
  color:var(--color-charcoal);text-decoration:none;
  display:block;padding:15px 2px;
  border-bottom:1px solid var(--color-line-soft);
}
.site-nav__list a:hover{color:var(--color-accent-deep);}
.site-nav__cta{margin-top:20px;}
/* スマホではヘッダー右の予約ボタンを出さない（メニュー内に入れているため） */
.site-header .site-header__cta{display:none;}

@media (min-width:900px){
  :root{ --header-h:72px; }
  .brand__logo{width:96px;}
  .nav-toggle{display:none;}
  .site-nav{
    display:block;position:static;margin-left:auto;
    padding:0;background:none;border:0;box-shadow:none;
  }
  .site-nav__list{display:flex;gap:22px;font-size:14px;}
  .site-nav__list a{padding:6px 0;border-bottom:0;display:inline-block;}
  /* .btn--block の display:flex に負けるので、詳細度を上げて消す */
  .site-nav .site-nav__cta{display:none;}
  .site-header .site-header__cta{display:inline-flex;margin-left:24px;flex:0 0 auto;}
}

/* 確定ロゴ（2026-09-15）。3行を保ち、元画像の周囲の余白を表示範囲で調整。 */
:root{--header-h:78px;}
.brand-mark{display:block;position:relative;overflow:hidden;flex:none;width:164px;aspect-ratio:1120/420;mix-blend-mode:multiply;}
.brand-mark .brand-mark__image{position:absolute;width:137.142857%;max-width:none;height:auto;left:-18.75%;top:-71.428571%;}
.brand-mark--footer{width:min(260px,100%);margin:0 auto 22px;}
@media(min-width:900px){:root{--header-h:92px;}.site-header .brand-mark{width:184px;}}
@media(min-width:1100px){.site-header .brand-mark{width:210px;}}

/* 2026-09-16: 本体サイトと同じ文字・色の強弱に統一。文書の内容は維持。 */
:root{
  --color-ivory:#F0E9DE;--color-ivory-light:#FBF8F3;--color-line-soft:#DAD1C5;
  --color-charcoal:#302D29;--color-charcoal-soft:#49443E;--color-text-sub:#625B53;
  --color-accent:#A74B2E;--color-accent-deep:#913D25;--color-accent-light:#DFAF96;--max-read:760px;
}
body{font-size:16px;line-height:1.85;letter-spacing:.025em;}
.page-title{font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:.035em;}
.page-head .lead,.legal__section p,.legal-list li,.legal-ol>li,.legal-dl dd{font-size:16px;line-height:1.95;}
.legal__section h2{font-size:22px;font-weight:700;letter-spacing:.035em;border-left-color:var(--color-accent);}
.legal__section h3{font-size:18px;font-weight:700;}
.legal-dl dt{font-weight:700;font-size:15px;}
.legal-callout{border-radius:6px;border-left:3px solid var(--color-accent);}
.legal-callout p,.legal-callout__title,.breadcrumb{font-size:14px;}
.btn{font-weight:700;letter-spacing:.045em;}
.site-header{background:rgba(251,248,243,.97);box-shadow:0 2px 12px #302D2906;}
.site-header__inner{max-width:1184px;}
.site-nav__list{font-weight:500;}
.nav-toggle{min-width:72px;min-height:48px;}
.nav-toggle__label{font-size:12px;}
.legal-cta{background:#38352F;color:#FFFDF9;}
.legal-cta .heading{color:#FFFDF9;}
.legal-cta .note{color:#EBE1D4;font-size:14px;}
.legal-cta a:not(.btn){color:#F1D9B9;}
.legal-cta .btn--primary{background:#F6C09D;color:#442B1C;border-color:#F6C09D;}
.legal-cta :focus-visible{outline-color:#FFFDF9;}
@media(max-width:599px){:root{--gutter:20px;}.page-head{padding-block:32px;}}

.legal-cta .btn--primary:hover{background:#FFD2B4;}

.btn--primary{background:#B55335;}