/* Walk With Dogs 公式サイト共通スタイル。
   配色はアプリ本体 src/theme.ts と同一の値を使う(クリーム・オレンジ・ブラウン・白)。
   外部フォント(Google Fonts等)は読み込まない(不要な外部通信を増やさない方針のため)。
   丸みのある雰囲気に近づけるため、端末に入っている丸ゴシック系フォントを優先指定する。 */

:root {
  --color-cream: #FFF7EA;
  --color-cream-border: #E8BD7E;
  --color-orange: #F2A649;
  --color-orange-deep: #D9862E;
  --color-text: #4A3324;
  --color-text-soft: #8A6F55;
  --color-white: #FFFFFF;
  --radius-card: 20px;
  --radius-pill: 999px;
  --max-width: 720px;
  /* PC版 全体の基準コンテンツ幅(PC版デザイン最終仕上げ)。TOPヒーロー画像と
     基本機能紹介/アルバム/週間・月間記録/Premiumの4主要セクションが共通で使う
     「中身の幅」の上限。大画面(1920px等)でも中央に小さくまとまらないよう、
     以前の1280pxから1440pxへ広げた。画像の縦横比・トリミングには一切影響しない
     (幅の器が広がるだけで、画像自体はwidth:100%のまま比例拡大する)。 */
  --content-max-width: 1440px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  /* TOPヒーロー(.hero)がPCで画面幅いっぱいまで広がる際、縦スクロールバー分の誤差で
     横スクロールが出てしまうのを防ぐための保険。他に意図的な横方向のはみ出しはない。 */
  overflow-x: hidden;
}

body {
  background-color: var(--color-cream);
  color: var(--color-text);
  font-family: "BIZ UDPGothic", "Hiragino Maru Gothic ProN", "Yu Gothic", "Zen Maru Gothic",
    -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ヘッダーだけを収めた.page(ヒーローを本文コンテナの外に出すために分割した側)。
   本文側の.pageと下端の余白が二重にならないよう、下端だけ詰める。 */
.page.page-top {
  padding-bottom: 4px;
}

/* PC版の横幅・中心軸統一(PC版最終仕上げ)用の.page修飾クラス。基本機能紹介・アルバム・
   Premiumを包む.pageにだけ付与し、TOPヒーロー画像(.hero-media、--content-max-width
   基準)と実際の表示幅が一致するようにする。このブロックはbox-sizing:border-boxかつ
   左右paddingを持つため、中身の幅を--content-max-widthに揃えるには
   外枠のmax-widthを「--content-max-width + 左右padding合計」にする必要がある。
   左右paddingは680px以上で24px、1600px以上でさらに余白を持たせたい大画面用に48pxへ
   広げる2段階構成(週間/月間記録の.records-sectionも同じ2段階に揃える)。
   ヘッダー・フッター・法務ページで使われる素の.page(720px)には一切影響しない。 */
.page.page-wide {
  /* 1440px(コンテンツ) + 24px*2(左右padding) = 1488px */
  max-width: 1488px;
}

@media (min-width: 600px) {
  /* 主要4セクション(基本機能紹介・アルバム・週間/月間記録・Premium)を包む縦の余白を、
     素の.page(縦40px/64px)より少し詰めて、セクション間の空きが間延びしないようにする。 */
  .page.page-wide {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

@media (min-width: 1600px) {
  /* 1920px前後の大画面では、コンテンツ幅は1440pxで頭打ちにしつつ、左右の余白だけ
     24px→48pxへ広げて「画面いっぱいに間延び」して見えないようにする。 */
  .page.page-wide {
    /* 1440px(コンテンツ) + 48px*2(左右padding) = 1536px */
    max-width: 1536px;
    padding-left: 48px;
    padding-right: 48px;
  }
}

/* ヘッダー */
.site-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 20px;
}

.site-header img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.site-header .site-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}

.site-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* 言語切替(全ページ共通ヘッダーに設置)。3言語とも同じ見た目の小さなピル状ボタンにし、
   現在の言語だけ塗りつぶして分かるようにする。派手なUIにはしない。 */
.lang-switch {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lang-switch a {
  display: inline-block;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-cream-border);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-soft);
  text-decoration: none;
  background: var(--color-white);
}

.lang-switch a:hover {
  border-color: var(--color-orange);
  color: var(--color-orange-deep);
}

@media (min-width: 600px) {
  /* PC版の言語切替(PC版最終調整)。モバイルの小さなピルのままだと、PCでは
     「操作可能なボタン」と認識しにくいため、文字・高さ・左右padding・ボタン間隔を
     はっきり拡大する。現在選択中の言語をオレンジ塗り、それ以外を白地+オレンジ枠
     にする配色ルール自体は変更しない。600px時点で18px/1440px以上で20pxへ、
     という具合に他の主要テキストと同じclamp()の考え方で滑らかに拡大する。 */
  .lang-switch {
    gap: clamp(8px, 3.71px + 0.71vw, 14px);
  }

  .lang-switch a {
    font-size: clamp(18px, 16.57px + 0.24vw, 20px);
    line-height: 1;
    padding: clamp(11px, 9.57px + 0.24vw, 13px) clamp(20px, 17.14px + 0.48vw, 24px);
  }
}

.lang-switch a[aria-current="true"] {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--color-text-soft);
  text-decoration: none;
}

.back-link:hover {
  color: var(--color-orange-deep);
}

/* スクリーンリーダー/SEO向けにだけ存在させ、視覚的には表示しない見出し。
   TOP画像自体にタイトル・キャッチコピーが含まれているため、視覚的な重複を避けつつ
   ページ構造上のh1は維持する(display:noneにはしない = 支援技術からは読み上げられる)。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ヒーロー(トップページ)。今回完成した言語別のTOPビジュアル(タイトル・キャッチコピー・
   犬・アプリ画面・ストアバッジまで画像内に含む1枚)をそのまま主役として見せるだけの、
   ごく単純な構成。画像の外に同じ文言・写真を重ねて表示しない。
   本文の720pxコンテナ(.page)の外、bodyの直接の子として配置しているため、
   .hero自体は最初から画面幅いっぱい(横長画像がスマホで小さくなりすぎないよう
   端まで使う)。画像自体のトリミング・加工は一切行わない。 */
.hero {
  margin: 0 0 8px;
}

.hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 600px) {
  /* PCでは本文の720pxコンテナ(.page)の外側(bodyの直接の子)に置かれているため、
     .heroはすでに画面幅いっぱいで配置されている。画像自体は.hero-mediaで
     max-width: --content-max-width(1440px)に収めてmargin:0 autoで中央配置することで、
     左右の余白が均等になる。(vw単位は縦スクロールバーの分だけ実際の表示幅とズレて
     左右余白が不均等になることがあるため、あえて使わずbody直下のブロック要素の
     実寸を使っている) 基本機能紹介/アルバム/週間・月間記録/Premiumの各セクション
     (.page.page-wide、.records-section)もこの--content-max-widthを基準幅として
     揃えているため、PCではTOP画像と主要セクションの表示幅が一致する。 */
  .hero {
    padding: 0 24px;
    box-sizing: border-box;
    margin-bottom: 24px;
  }

  .hero-media {
    max-width: var(--content-max-width);
    margin: 0 auto;
  }

  .hero-store-cta {
    max-width: var(--content-max-width);
    margin: 12px auto 0;
    text-align: center;
  }

  .hero-media img {
    border-radius: var(--radius-card);
    border: 1px solid var(--color-cream-border);
  }
}

@media (min-width: 1600px) {
  /* 1920px前後の大画面用。主要セクション側(.page.page-wide)の左右paddingを
     24px→48pxへ広げるのに合わせ、TOPヒーローの左右余白も同じ48pxへ揃える
     (コンテンツ幅の基準である--content-max-widthは変えない)。 */
  .hero {
    padding: 0 48px;
  }
}

/* .hero-image-wrap: 通常機能紹介(feature-section)で使う汎用スタイル(ヒーロー専用ではない)。 */
.hero-image-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-cream-border);
  margin-bottom: 20px;
}

.hero-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* 主要セクション共通のタイポグラフィルール(PC版最終調整)。基本機能紹介・アルバム・
   週間/月間記録・Premium・最終CTAの「メイン見出し」と「説明文」をここでまとめて
   定義し、セクションごとにfont-sizeを個別にハードコードしない。TOP画像内の文字・
   各画像自体の文字は対象外(画像は一切変更しない)。 */
.intro-heading,
.album-heading,
.records-heading,
.premium-heading,
.final-cta-heading {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.4;
  /* スマホ実機対応(最終調整)。中央揃えだと文章量以上に不自然な折り返しが目立つため、
     スマホ(600px未満)のみ左揃えにする。PC側は下の@media(min-width:600px)で
     text-align:centerを明示的に再指定し、従来通りの中央揃えを維持する。 */
  text-align: left;
  margin: 0 0 12px;
  color: var(--color-text);
}

.intro-description,
.album-description,
.records-description,
.premium-subcopy,
.final-cta-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-text-soft);
  /* 見出しと同じ理由でスマホのみ左揃え(PC側は下のmedia queryで中央揃えに戻す)。 */
  text-align: left;
  margin: 0 0 24px;
}

@media (min-width: 600px) {
  .intro-heading,
  .album-heading,
  .records-heading,
  .premium-heading,
  .final-cta-heading {
    /* PC版最終調整(第2弾)。600px幅で34px(モバイルからの滑らかな接続)→1440px以上で
       50pxへ拡大。TOPヒーロー画像が大きくなった後も見出しが「小さく見えない」よう、
       目安48〜52pxの範囲で設定。1440px以上はコンテンツ幅自体が頭打ちになるため、
       それ以上画面が広がっても文字だけがさらに拡大し続けることはしない。 */
    font-size: clamp(34px, 22.57px + 1.9vw, 50px);
    margin-bottom: 16px;
    /* スマホ版最終調整でベース(モバイル)側をtext-align:leftに変更したため、
       PC版は従来通りの中央揃えをここで明示的に維持する。 */
    text-align: center;
  }

  .intro-description,
  .album-description,
  .records-description,
  .premium-subcopy,
  .final-cta-text {
    /* 600px幅で19px→1440px以上で24pxへ(目安23〜25px)。 */
    font-size: clamp(19px, 15.43px + 0.6vw, 24px);
    text-align: center;
  }
}

/* 見出し内の重要な1フレーズだけをブランドオレンジで強調するための共通クラス
   (「新しいわんこ」「5つの特典」など)。全文を色替えしたり複数色を使ったりしない。 */
.hl {
  color: var(--color-orange-deep);
}

/* スマホ版専用の横スワイプカルーセル(スマホ実機対応・最終調整)。基本機能紹介3枚・
   アルバム2枚・Premium画像3枚の3箇所で共用する。仕組みはCSS scroll-snapのみで、
   外部ライブラリは使わない。[data-carousel-track]を付与した要素がスワイプ可能な
   横並びトラックになり、直後に置いた.carousel-dotsへassets/carousel.jsが現在位置の
   ●○を自動生成する(JSが無効でもスワイプ自体はCSSだけで機能する)。
   PC(600px以上)では各セクション個別の@media側で通常のブロック/横並び表示に戻し、
   このカルーセル化はスマホのみに限定する。 */
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-cream-border);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.carousel-dot.is-active {
  width: 16px;
  border-radius: 3px;
  background: var(--color-orange);
}

@media (min-width: 600px) {
  /* PCでは元々スワイプが不要な横並び表示のため、位置表示ドットも非表示にする。 */
  .carousel-dots {
    display: none;
  }
}

/* スマホ実機フィードバック対応(最終仕上げ)。「横にスワイプできる」ことが実機だと
   伝わりにくかったため、各カルーセルのトラックを.carouselで包み、左右に丸型の
   矢印ボタンを重ねて表示する。指でのスワイプは従来通り機能し、矢印はassets/carousel.js
   が1枚分だけスクロールさせるための補助操作。最初/最後のスライドでは対応する矢印を
   disabled化して薄く表示する。PC(600px以上)では非表示にし、従来の横並び表示に影響しない。 */
.carousel {
  position: relative;
}

@media (max-width: 599.98px) {
  /* スマホ実機フィードバック対応(最終仕上げ2)。隣のslideの一部が右端に見えて
     しまう問題への保険として、外枠(.carousel)自体でも確実にクリップする。
     矢印ボタンは.carousel内側に絶対配置されているため、この指定では隠れない。 */
  .carousel {
    overflow: hidden;
  }
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-orange-deep);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(74, 51, 36, 0.18);
  z-index: 2;
}

.carousel-arrow-prev {
  left: 8px;
}

.carousel-arrow-next {
  right: 8px;
}

.carousel-arrow[disabled] {
  opacity: 0.32;
  pointer-events: none;
}

@media (min-width: 600px) {
  /* PCではカルーセル自体を使わないため矢印も非表示にする。 */
  .carousel-arrow {
    display: none;
  }
}

/* 基本機能紹介セクション(TOP直下)。実際のアプリ画面3枚(①→②→③の順)を主役にし、
   見出し・説明文・各画像の短い補足はすべてHTML本文のテキストとして実装する
   (画像に文字を焼き込まない: 3言語での差し替えのしやすさ・SEO上の理由のため)。
   スマホ(600px未満)では3枚を無理に横並びにせず縦積みにして各画面を大きく見せ、
   600px以上ではTOPと同じ1280px幅にはせず、本文と同じ720pxコンテナ内で横並びにする。 */
.intro-section {
  margin-bottom: 24px;
}

.intro-description {
  margin: 0 0 24px;
}

.intro-grid {
  /* スマホ実機対応(最終調整)。3枚を縦に連続表示すると1画面が非常に長くなるため、
     スマホのみ「1枚表示+横スワイプ」のカルーセルにする(PCは下のmedia queryで
     従来通りの横並び表示に戻す)。 */
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.intro-grid::-webkit-scrollbar {
  display: none;
}

.intro-card {
  text-align: center;
  flex: 0 0 100%;
  min-width: 0;
  /* スマホ実機フィードバック対応(第2弾)。centerだと理論上はスライド幅=トラック幅の
     場合scrollLeft:0で1枚目が正しく中央に来るはずだが、実機では1枚目/2枚目が半端に
     またがって見える不具合が確認された。スライドがトラック幅ぴったり(flex:0 0 100%)の
     「1枚ずつ表示」構成では、start揃えの方が「N枚目のスナップ位置=N×スライド幅」と
     機械的に一意に決まり安全なため、centerからstartへ変更する。 */
  scroll-snap-align: start;
}

.intro-card-image-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-cream-border);
  background: var(--color-white);
  /* スマホ実機フィードバック対応(第2弾)。200px固定基準は横幅が小さすぎたため、
     カルーセル表示領域の75〜80%を目安にする(375〜430pxで自然にレスポンシブ)。
     600pxに近い幅で際限なく拡大しないよう320pxを上限に併用する。 */
  max-width: min(78%, 320px);
  margin: 0 auto 12px;
}

.intro-card-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.intro-card-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--color-text);
}

.intro-card-text {
  font-size: 13px;
  color: var(--color-text-soft);
  margin: 0;
}

@media (min-width: 600px) {
  .intro-grid {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    /* スマホ版カルーセル化に伴い追加したスワイプ/スナップ挙動をPCでは解除し、
       従来通りの通常の横並び表示に戻す。 */
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .intro-card {
    flex: 1;
    scroll-snap-align: none;
  }

  .intro-card-image-wrap {
    max-width: none;
    margin: 0 0 12px;
  }

  .intro-card-title {
    /* 画像下の小見出し。600px幅で16px→1440px以上で21pxへ(目安20〜22px)。 */
    font-size: clamp(16px, 12.43px + 0.6vw, 21px);
  }

  .intro-card-text {
    /* 画像下の補足説明。600px幅で14px→1440px以上で18pxへ(目安17〜19px)。 */
    font-size: clamp(14px, 11.14px + 0.48vw, 18px);
  }
}

/* アルバム機能紹介セクション(基本機能紹介の直後)。完成画像2枚(①アルバム一覧→②わんこ詳細)を
   左→右(スマホでは上→下)の順に並べるだけで、「集める→1匹を振り返る」という流れが
   自然に伝わるようにする。見出し・説明文はHTML本文のテキストとして短く添えるのみ。 */
.album-section {
  margin-bottom: 24px;
}

.album-description {
  margin: 0 0 24px;
}

.album-grid {
  /* スマホ実機対応(最終調整)。基本機能紹介と同様、スマホのみ「1枚表示+横スワイプ」
     のカルーセルにする(PCは下のmedia queryで従来通りの横並び表示に戻す)。 */
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.album-grid::-webkit-scrollbar {
  display: none;
}

.album-card {
  /* スマホ実機フィードバック対応(最終仕上げ2)。以前は.album-card-image-wrap自体が
     flex:0 0 100%とmax-width:78%を同時に持っていたため、実際に使われる横幅が
     78%(261px程度)に縮んだ状態でslideとして扱われ、track全体の幅(335px程度)との
     差分だけ次のslideの一部が右に見えてしまっていた(アルバムで特に目立った不具合)。
     .intro-cardと同じく「track幅ぴったりの透明な外枠(このクラス)」と「78%に
     縮小した見た目上のカード(.album-card-image-wrap)」を分離し、slideとしての幅と
     見た目のカード幅を独立させることで解消する。 */
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.album-card-image-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-cream-border);
  background: var(--color-white);
  /* スマホ実機フィードバック対応(第2弾)。基本機能紹介と同じ75〜80%基準に揃え、
     「存在感」が同程度になるようにする(200px基準は小さすぎたため撤回)。 */
  max-width: min(78%, 320px);
  margin: 0 auto;
}

.album-card-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 600px) {
  .album-grid {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    /* スマホ版カルーセル化に伴い追加したスワイプ/スナップ挙動をPCでは解除する。 */
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .album-card {
    flex: 1;
    scroll-snap-align: none;
  }

  .album-card-image-wrap {
    max-width: none;
  }
}

/* 機能紹介セクション(見出し→紹介画像→短い補足、の縦並び)。
   画像そのものが完成された広告ビジュアルのため、画像の上に文字を重ねたりしない。
   正式画像が未配置でも枠が潰れて見えないよう、控えめなmin-heightだけ確保する。 */
.feature-section {
  margin-bottom: 32px;
}

.feature-heading {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px;
  color: var(--color-text);
}

.feature-image-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-cream-border);
  background: var(--color-white);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.feature-note {
  font-size: 13px;
  color: var(--color-text-soft);
  text-align: center;
  margin: 10px 0 0;
}

@media (min-width: 600px) {
  .feature-image-wrap {
    min-height: 220px;
  }
}

/* 週間・月間記録紹介セクション。完成画像1枚(横長ビジュアル)を主役にするため、
   このセクションだけ本文720pxコンテナ(.page)の外に置かれている(HTML側でmainの
   直下・.pageの外に配置)。TOPヒーロー・他の主要セクションと同じ--content-max-width
   基準(1440px)まで広げ、中央配置する。画像内にすでに週間・月間の両画面と文字が
   含まれているため、説明は最小限に留める。 */
.records-section {
  /* 1440px(コンテンツ) + 20px*2(モバイル基準padding) = 1480px */
  max-width: 1480px;
  margin: 0 auto 24px;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}

.records-description {
  margin: 0 0 24px;
}

.records-image-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-cream-border);
  background: var(--color-white);
}

.records-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* 紹介動画セクション(YouTube標準iframe埋め込み)。見た目は.records-image-wrapの角丸・
   枠線・背景ルールを踏襲する。見出しと動画を.video-innerという同一の箱に収め、
   見出し(左揃え)と動画の左端が必ず一致するようにする(それぞれを個別にcenterすると、
   幅が違うため左端がずれて見えるため)。.video-innerをmax-width:960pxでmargin:0 auto
   することで、PCでは本文幅の中に独立したセクションとして十分な大きさで中央配置され、
   モバイルでは960pxが画面幅を上回るため実質的に.pageの余白に揃って画面幅いっぱいに
   広がる(他セクションと同じ左右ラインになる)。
   本番動画への差し替えはscripts/build-website-legal.js冒頭のWEB_INTRO_VIDEO_IDのみで良い。 */
.video-section {
  margin-bottom: 24px;
}

.video-inner {
  max-width: 960px;
  margin: 0 auto;
}

.video-heading {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
  margin: 0 0 12px;
  color: var(--color-text);
}

.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-cream-border);
  background: var(--color-white);
}

.video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (min-width: 600px) {
  .video-heading {
    /* 他の主要見出しと同じclamp(34px→50px)を踏襲しつつ、text-alignだけは
       .video-innerの左端に揃えるためleftのまま上書きする(センター揃えにしない)。 */
    font-size: clamp(34px, 22.57px + 1.9vw, 50px);
    margin-bottom: 16px;
    text-align: left;
  }
}

@media (max-width: 599.98px) {
  /* スマホ実機フィードバック対応(最終仕上げ)。記録画像はグラフ・数字を読ませる必要が
     あるため、他の3カルーセル(基本機能紹介/アルバム/Premium、共通基準200px)より
     一段大きく見せる。左右paddingを20px→12pxへ少しだけ詰め、画像の表示幅をわずかに
     広げる(サイト全体の左右余白の基準・角丸・枠線のデザインは変更しない)。 */
  .records-section {
    padding: 0 12px;
  }
}

@media (min-width: 600px) {
  .records-section {
    /* 1440px(コンテンツ) + 24px*2(左右padding) = 1488px。.page.page-wideと同じ基準。 */
    max-width: 1488px;
    padding: 0 24px;
  }
}

@media (min-width: 1600px) {
  .records-section {
    /* 1440px(コンテンツ) + 48px*2(左右padding) = 1536px。.page.page-wideと同じ基準。 */
    max-width: 1536px;
    padding: 0 48px;
  }
}

/* Premiumセクション: 特典の受け皿。購入導線(ボタン/リンク)は置かない。 */
.premium-section {
  background: var(--color-white);
  border: 1.5px solid var(--color-orange);
  border-radius: var(--radius-card);
  padding: 24px 20px;
  margin: 12px 0 24px;
}

@media (max-width: 599.98px) {
  /* スマホ実機フィードバック対応(最終仕上げ2)。Premiumを囲う大きな外枠(オレンジの
     border・角丸)と左右paddingが、実機でカルーセル画像の使える横幅を狭めていた。
     スマホでは外枠自体を解除し、その分をカルーセルの表示幅にそのまま還元する
     (背景色・上下の余白・PC版の枠デザインは変更しない)。 */
  .premium-section {
    padding-left: 4px;
    padding-right: 4px;
    border: none;
    border-radius: 0;
  }

  /* スマホ実機フィードバック対応(最終仕上げ3)。見出し・説明文・価格表記は本文と
     同じ720px系の余白(.page 20px + .premium-section 4px = 24px)のまま変更しないが、
     画像カルーセル(.carousel)だけは負のmarginでその24px分の余白を打ち消して画面
     端いっぱいまで広げ、そのうえで安全マージン用に8pxだけpaddingを持たせる。
     見出し等のテキストや位置表示ドット(.carousel-dots、このブロックの外にある)は
     従来通りの幅のまま中央揃えを維持するため、見た目のズレは生じない。 */
  .premium-section .carousel {
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Premium画像を最大限まで拡大したことで、既存の8px内側矢印(基本機能紹介・
     アルバムと共通の位置)だと画像端との重なりがやや大きくなるため、Premiumだけ
     矢印を画面端寄りへ4pxほど微調整する。デザイン・色・サイズ・他2カルーセルの
     矢印位置は変更しない。 */
  .premium-section .carousel-arrow-prev {
    left: 4px;
  }

  .premium-section .carousel-arrow-next {
    right: 4px;
  }
}

.premium-heading {
  margin: 0 0 6px;
}

/* Premium導入部の「5つの特典」。メイン見出しの下に大きく・オレンジで目立たせる、
   今回だけの特別な強調要素(他セクションの共通見出しルールとは別枠)。 */
.premium-highlight {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-orange-deep);
  /* スマホ版最終調整。上下の見出し・説明文を左揃えにしたため、この行だけ中央のまま
     残すと視線の流れが不自然になる。スマホのみ左揃えにする(PCは下で中央揃えに戻す)。 */
  text-align: left;
  margin: 0 0 10px;
}

@media (min-width: 600px) {
  .premium-highlight {
    /* 600px幅で36px→1440px以上で55pxへ。主要見出し(最大50px)より一段大きく保ち、
       Premiumの中で最も目立つ要素という位置づけを維持する(見出しとの比率は従来通り)。 */
    font-size: clamp(36px, 22.43px + 2.26vw, 55px);
    margin-bottom: 14px;
    text-align: center;
  }
}

.premium-subcopy {
  margin: 0 0 28px;
}

/* Premiumは3テーマ(①マイカード②もっとたくさんのわんこと出会える
   ③お気に入り・快適機能・買い切り)構成。完成画像1枚ずつを主役として大きく見せ、
   横並び・カルーセルにはせず①→②→③の順に縦へスクロールして確認できるようにする。
   画像自体に説明が入っている前提で、Webページ側の文章は短い見出しのみに留める。
   テーマ間の余白を大きく取り、1枚のカードに見えないよう自然に区切っている。 */
/* スマホ実機対応(最終調整)。Premiumの3枚をラップする新規要素。見出し・5つの特典・
   説明文・価格情報・最終CTAはこのラップの外にあるため、カルーセル化されるのは
   画像+その直上の①②③見出しのみで、購入判断に必要なテキストは常に表示され続ける。 */
.premium-carousel {
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.premium-carousel::-webkit-scrollbar {
  display: none;
}

.premium-carousel .premium-theme {
  flex: 0 0 100%;
  min-width: 0;
  /* 初期位置ずれの修正。理由は.intro-cardのコメントを参照。 */
  scroll-snap-align: start;
}

@media (min-width: 600px) {
  .premium-carousel {
    /* PCでは従来通り①→②→③を縦に並べるだけの表示に戻す。 */
    display: block;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .premium-carousel .premium-theme {
    flex: none;
    scroll-snap-align: none;
  }
}

.premium-theme {
  margin-bottom: 40px;
}

.premium-theme:last-of-type {
  margin-bottom: 24px;
}

@media (max-width: 599.98px) {
  /* スマホのカルーセル内では画像同士が横に並ぶため、縦方向の余白(PC/従来値)は
     不要。ドット位置表示側のmarginで区切りを付ける。 */
  .premium-carousel .premium-theme,
  .premium-carousel .premium-theme:last-of-type {
    margin-bottom: 0;
  }
}

.premium-theme-heading {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 10px;
  color: var(--color-text);
}

@media (min-width: 600px) {
  .premium-theme-heading {
    /* 画像下の小見出し。600px幅で21px→1440px以上で22pxへ(目安20〜22px)。 */
    font-size: clamp(21px, 20.29px + 0.12vw, 22px);
  }
}

.premium-image-wrap {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-cream-border);
  background: var(--color-cream);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.premium-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 599.98px) {
  /* スマホ実機フィードバック対応(最終仕上げ3)。①②③とも同じCSSを使う共通ルール
     (画像ごとの個別指定は行わない)。正方形の固定枠やobject-fit:containは使わず、
     各画像自身の縦横比のまま、直上の.carouselが確保した表示幅の97%(最大480px)
     まで拡大する。画像のトリミング・変形は一切行わない(実サイズをそのまま表示)。 */
  .premium-image-wrap {
    width: min(97%, 480px);
    min-height: 0;
    margin: 0 auto;
    display: block;
  }

  .premium-image-wrap img {
    width: 100%;
    height: auto;
  }
}

.premium-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-orange-deep);
}

.premium-price-note {
  font-size: 12px;
  color: var(--color-text-soft);
  text-align: center;
  margin: 4px 0 0;
}

/* 最終CTA(Premiumとフッターの間)。Premiumの価格注記でそのままフッターへ落ちると
   締めが弱く感じられるため、公開前QAで追加した短い1画面の結び。新しい導線・画像は
   追加せず、既存のApp Store非表示リンク機構(hero-store-cta)をそのまま再利用する。 */
.final-cta {
  text-align: center;
  padding: 12px 0 8px;
}

.final-cta-heading {
  margin: 0 0 10px;
}

.final-cta-text {
  margin: 0 0 14px;
}

.final-cta-action {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-orange-deep);
  margin: 0;
}

@media (min-width: 600px) {
  .final-cta-action {
    /* 600px幅で20px→1440px以上で26pxへ。本文(最大24px)より一段上を維持する。 */
    font-size: clamp(20px, 15.71px + 0.71vw, 26px);
  }
}

/* 見出し・本文 */
h1.page-title {
  font-size: 21px;
  font-weight: 800;
  margin: 4px 0 2px;
}

.page-subtitle {
  font-size: 15px;
  color: var(--color-text-soft);
  margin: 0 0 20px;
}

h2.section-heading {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  margin: 22px 0 8px;
  color: var(--color-text);
}

p.legal-date {
  font-size: 12px;
  color: var(--color-text-soft);
  margin: 0 0 4px;
}

p.legal-text, .legal-doc p {
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 12px;
}

.legal-doc ul.bullet-list {
  margin: 0 0 12px;
  padding-left: 20px;
}

.legal-doc ul.bullet-list li {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 4px;
}

p.contact-label {
  font-size: 14px;
  font-weight: 700;
  margin: 2px 0;
}

.legal-doc {
  background: var(--color-white);
  border: 1px solid var(--color-cream-border);
  border-radius: var(--radius-card);
  padding: 20px;
  margin: 12px 0 24px;
}

/* カード型ボタン導線 */
.button-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
}

.button-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  border: 1px solid var(--color-cream-border);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
}

.button-row:hover {
  border-color: var(--color-orange);
}

.button-row .chevron {
  color: #ccc;
}

/* メールリンク */
.mail-block {
  background: var(--color-white);
  border: 1px solid var(--color-cream-border);
  border-radius: var(--radius-card);
  padding: 20px;
  margin: 16px 0 24px;
  text-align: center;
}

.mail-address {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-orange-deep);
  word-break: break-all;
}

.mail-note {
  font-size: 12px;
  color: var(--color-text-soft);
  margin-top: 6px;
}

/* フッター。週間・月間記録セクションを.pageの外に出したのに伴い、footerも
   .page divでの直接ラップをやめてmainの兄弟要素に変更したため、本文と同じ
   720px幅・中央配置をここで直接指定している(見た目は従来と同じ)。 */
.site-footer {
  max-width: var(--max-width);
  margin: 40px auto 0;
  padding: 20px 20px 48px;
  border-top: 1px solid var(--color-cream-border);
  text-align: center;
  box-sizing: border-box;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 14px;
}

.footer-nav a {
  font-size: 13px;
  color: var(--color-text-soft);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--color-orange-deep);
}

.footer-meta {
  font-size: 12px;
  color: var(--color-text-soft);
  line-height: 1.9;
}

.placeholder {
  color: var(--color-orange-deep);
}

/* PCでも読みやすいよう、広い画面では少し余白を増やす */
@media (min-width: 600px) {
  .page {
    padding: 40px 24px 64px;
  }

  .site-footer {
    padding: 20px 24px 64px;
  }
}