/* =========================================================
  jimdo.css v4.2（スマホ特化・フォント安定）— 外部スタイル
  可変ポイントは :root トークンと各セクションの余白/画像/色
========================================================= */

/* ========== トークン（可変） ========== */
:root{
  --bg:#0b1118;                               /* 背景色（可変） */
  --text:#e7ebf1;                             /* 文字色（可変） */
  --muted:#b7c0cd;                            /* サブ文字（可変） */
  --card:#121a24;                             /* カード背景（可変） */
  --accent:#5aa2ff;                           /* アクセント（可変） */
  --ring:0 0 0 3px rgba(90,162,255,.35);      /* フォーカスリング（可変） */

  --hero-img: url('https://placehold.co/1600x1000?text=hero');   /* 予備用トークン（未使用でもOK） */
  --patron-img: url('https://placehold.co/1600x900?text=patron');

  --font-hero: "Shippori Mincho B1", serif;   /* ホーム2行のみ明朝（可変） */
  --font-sans: Inter, "Zen Kaku Gothic New", "Noto Sans JP",
               system-ui, -apple-system, "Segoe UI", Roboto,
               "Hiragino Kaku Gothic ProN","BIZ UDPGothic",
               "Yu Gothic UI", Meiryo, sans-serif;               /* 全体ゴシック */
  --font-head: var(--font-sans);              /* 見出しの既定フォント（可変） */

  --hero-dark-1: rgba(8,12,20,.58);
  --hero-dark-2: rgba(8,12,20,.86);
}

/* ========== Reset / Base ========== */
*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 基準フォントサイズ（＋iOS独自拡大の抑止） */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-size:18px;
}
@media (max-width: 900px){ html{ font-size:21px } }
@media (max-width: 600px){ html{ font-size:23px } }
@media (max-width: 430px){ html{ font-size:25px } }
@media (max-width: 360px){ html{ font-size:27px } }

h1,h2,h3{
  font-family:var(--font-head);
  font-weight:700;
  letter-spacing:.04em;
  text-wrap:balance;
}

.section p,
.section-lead{ max-width:66ch }

/* ========== Header / Nav ========== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem 1.2rem;
  background:linear-gradient(180deg,rgba(10,16,24,.85),rgba(10,16,24,.35));
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.06em;
}

.site-header nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.site-header nav li{ list-style:none; margin:0 }
.site-header nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:1.06rem;
}
.site-header nav a:hover{ color:var(--text) }

/* スキップリンク */
.skip{
  position:absolute;
  left:-9999px;
  top:auto;
}
.skip:focus{
  left:1rem;
  top:1rem;
  background:#000;
  color:#fff;
  padding:.4rem .6rem;
  border-radius:.4rem;
}

/* ========== Sections ========== */
.section{
  padding:56px 6vw;
}
.section-title{
  margin:0 0 .6rem;
  font-size:clamp(24px,4.8vw,32px);
}
.section-lead{
  color:var(--muted);
  margin:0 0 1.2rem;
  font-size:1.12rem;
}

/* ========== Buttons ========== */
.btn{
  display:inline-block;
  min-height:52px;
  border-radius:999px;
  padding:1rem 1.25rem;
  color:var(--text);
  text-decoration:none;
  border:1px solid rgba(231,235,241,.45);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  transition:.2s transform,.2s background,.2s border-color;
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:.02em;
}
@media (max-width:480px){
  .btn{
    min-height:56px;
    font-size:1.12rem;
  }
}
.btn:hover{ transform:translateY(-1px) }
.btn:focus{ outline:0; box-shadow:var(--ring) }
.btn-primary{ background:rgba(231,235,241,.12) }
.btn-primary:hover{ background:rgba(231,235,241,.18) }
.btn-ghost{
  background:transparent;
  border-color:rgba(231,235,241,.35);
  opacity:.95;
}
.btn-ghost:hover{
  opacity:1;
  border-color:rgba(231,235,241,.6);
}

/* ========== Hero（背景レイヤ分離版 / タイトル色固定） ========== */
.hero{
  position:relative;
  min-height:92vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:12vh 6vw;
  overflow:hidden;
}

/* 背景画像：最背面レイヤ */
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 36%;
  filter:saturate(.95);
  z-index:0;
}

/* 暗幕グラデ：画像の上・テキストの下 */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--hero-dark-1),var(--hero-dark-2));
  z-index:1;
}

/* テキストラッパ：最前面 */
.hero-inner{
  position:relative;
  max-width:960px;
  margin-inline:auto;
  z-index:2;
}

/* タイトル／サブタイトル（少女性） */
.hero-title{
  margin:0 0 .6rem;
  font-size:clamp(30px,6.8vw,48px);
  line-height:1.25;
  font-family:var(--font-hero);
  color:var(--text) !important;              /* 霧の上でも白で固定 */
  text-shadow:0 2px 22px rgba(0,0,0,.8);
}
.hero-sub{
  margin:.25rem 0 1.2rem;
  font-size:1.16rem;
  font-family:var(--font-hero);
  color:var(--text) !important;
  opacity:.94;
  text-shadow:0 1px 18px rgba(0,0,0,.7);
}
.hero-desc,
.hero-guard,
.hero-cta-note{
  font-family: var(--font-hero);
  color: var(--text) !important;
  text-shadow: 0 1px 18px rgba(0,0,0,.7);
}

/* 本文（説明） */
.hero-desc{
  margin: 0 0 1rem;
  font-size: 1.02rem;     /* hero-sub(1.16rem)より少し下げる */
  line-height: 1.75;
  opacity: .90;           /* hero-sub(.94)よりわずかに控えめ */
}

/* ガード文（約束） */
.hero-guard{
  margin: 0 0 1.1rem;
  font-size: .98rem;
  line-height: 1.7;
  opacity: .86;
}

/* CTA補足 */
.hero-cta-note{
  display: inline-block;  /* ボタン横で崩れにくく */
  margin-left: .75rem;
  font-size: .94rem;
  line-height: 1.5;
  opacity: .88;
}

.hero-actions{
  display:flex;
  gap:.9rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* モバイルでの微調整 */
@media (max-width:600px){
  .hero{
    min-height:88vh;
    padding-top:16vh;
  }
  .hero-bg{
    object-position:center 30%;
  }
  .hero-title{
    font-size:clamp(26px,7.4vw,34px);
    text-shadow:0 3px 24px rgba(0,0,0,.95);
  }
  .hero-sub{
    font-size:1.05rem;
    opacity:.98;
  }
}

/* ========== Works ========== */
.grid-works{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.work-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
}
.work-card img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.work-card .cap{
  display:block;
  padding:.8rem .9rem;
  color:var(--muted);
  font-size:1.06rem;
}
.work-card:hover .cap{ color:var(--text) }

@media (max-width:860px){
  .grid-works{ grid-template-columns:1fr }
}

/* ========== Join ========== */
.join{
  background:linear-gradient(180deg, rgba(18,26,36,.6), rgba(18,26,36,.2));
  border-radius:18px;
}
.cards-join{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:.6rem;
}
.join-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:1.2rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.join-title{
  margin:.2rem 0;
  font-size:1.16rem;
}
.join-text{
  color:var(--muted);
  margin:0 0 .4rem;
  font-size:1.06rem;
}
.join-card .btn{ align-self:flex-start }

@media (max-width:860px){
  .cards-join{ grid-template-columns:1fr }
}

/* ========== Patron（画像タグ＋グラデ分離版） ========== */
.patron{
  position:relative;
  border-radius:18px;
  overflow:hidden;
}

/* 暗幕グラデ */
.patron::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(14,26,42,.28), rgba(14,26,42,.60));
  z-index:1;
}

/* 背景画像 */
.patron-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  filter:saturate(.95);
  z-index:0;
}

/* テキスト側 */
.patron-inner{
  position:relative;
  z-index:2;
  background:rgba(14,26,42,.35);
  border:1px solid rgba(255,255,255,.05);
  padding:1.2rem;
  border-radius:18px;
  max-width:980px;
  margin:0 auto;
}

/* ========== Hub ========== */
.hub-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.hub-card{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  align-items:flex-start;
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:1rem;
  text-decoration:none;
  color:var(--text);
}
.hub-card:hover{ border-color:rgba(255,255,255,.18) }
.hub-title{
  margin:.1rem 0 .1rem;
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:.02em;
  font-family:var(--font-sans);
}
.hub-sub{
  margin:0;
  color:var(--muted);
  font-size:.98rem;
  font-family:var(--font-sans);
}

@media (max-width:1000px){
  .hub-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:560px){
  .hub-grid{ grid-template-columns:1fr }
}

/* ========== Footer / Sidebar / Page content slot ========== */
#sidebar{ display:none }

.site-footer{
  padding:28px 6vw;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(10,16,24,.6);
  backdrop-filter:blur(6px);
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  color:var(--muted);
}

.page-content-slot{
  padding:40px 6vw;
}

/* ホームでも本文ブロックを表示したいのでコメントアウト */
/* .is-home .page-content-slot{ display:none } */
.is-subpage .page-content-slot{ display:block }

/* ========== CTA Dock ========== */
.cta-dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding:max(12px, env(safe-area-inset-bottom)) 6vw max(12px, env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(8,12,20,0), rgba(8,12,20,.78));
  display:flex;
  gap:12px;
  justify-content:center;
  transform:translateY(110%);
  transition:transform .25s ease;
}
.cta-dock.show{ transform:translateY(0) }
.is-subpage .cta-dock{ display:none }

/* ========== 出し分け ========== */
.is-subpage .hero,
.is-subpage .works,
.is-subpage .join,
.is-subpage .patron{
  display:none !important;
}

/* ========== Motion減（必ず閉じる） ========== */
@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
}

/* ========== 見た目固定幅ズーム（任意） ========== */
.zoom-mobile #site-container{
  width:320px;
  transform:scale(calc(100vw / 320));
  transform-origin:top left;
}
.zoom-mobile,
.zoom-mobile body{ overflow-x:hidden }

/* ========== Last Sailor LP フォント統一 ========== */
.ls-page{ font-family: var(--font-sans) }
.ls-subnav a,
.ls-h2,
.ls-h3,
.ls-btn{ font-family: var(--font-sans) }
.ls-lead,
.ls-list,
.ls-steps,
.ls-note,
.ls-faq__a{ font-family: var(--font-sans) }
.ls-price{ font-variant-numeric: tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1 }

/* =========================================================
  ホーム本文フォントの最終オーバーライド
========================================================= */

/* 1) セクション内の“本文系タグ”を一括でゴシック化 */
html.is-home #site-container .section
  :where(p, li, a, small, strong, em, span, blockquote, figcaption, dd, dt){
  font-family: var(--font-sans) !important;
}

/* 2) リード文 */
html.is-home #site-container .section-lead{
  font-family: var(--font-sans) !important;
}

/* 3) ボタン */
html.is-home #site-container .btn{
  font-family: var(--font-sans) !important;
}

/* 4) ヒーロー内ボタン（保険） */
html.is-home #site-container .hero .btn{
  font-family: var(--font-sans) !important;
}

/* 5) 作品カードのキャプション */
html.is-home #site-container .grid-works .cap{
  font-family: var(--font-sans) !important;
}

/* 6) Joinカード */
html.is-home #site-container .join-title{
  font-family: var(--font-sans) !important;
}
html.is-home #site-container .join-text{
  font-family: var(--font-sans) !important;
}

/* 7) Patronボタン */
html.is-home #site-container .patron .btn{
  font-family: var(--font-sans) !important;
}

/* 8) 強調は“本文フォントを継承” */
html.is-home #site-container :where(.section-lead, .join-text) strong,
html.is-home #site-container :where(.section-lead, .join-text) em{
  font-family: inherit !important;
}

/* 9) ヒーローの2行は上で明朝に固定済み */

/* ホーム下部固定CTAのボタンもゴシックに統一 */
html.is-home .cta-dock .btn{
  font-family: var(--font-sans) !important;
}

/* ホームのセクション見出しをSansへ */
html.is-home #site-container .section-title{
  font-family: var(--font-sans) !important;
  font-weight:700;
  letter-spacing:.01em;
  text-wrap:balance;
}

/* ホーム以外はHUB（STORE等）を非表示 */
.is-subpage .hub{ display:none !important }

/* ========== 追加ユーティリティ ========== */
.head-left{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.back-btn{
  display:none;
  background:transparent;
  border:0;
  color:var(--muted);
  font-size:1.2rem;
}
.is-subpage .back-btn{ display:inline-block }

/* =========================================================
   About 可読性アップ + 背景画像前提
========================================================= */

.section.about{ position:relative; overflow:hidden; }
.section.about.is-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(180deg, rgba(8,12,20,.84), rgba(8,12,20,.92)),
    var(--about-bg-img, none);
  background-size:cover;
  background-position:center 35%;
  filter:saturate(.92);
}

.section.about .section-title,
.section.about .ls-h2,
.section.about .ls-h3{
  color:#eef3fb;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
}

.section.about .section-lead{
  max-width:64ch;
  color:#e8eef8;
  line-height:1.9;
  opacity:1;
}

.about-grid{
  display:grid;
  gap:14px;
  margin-top:14px;
}
.about-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:1.05rem 1.15rem;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.about-card p{
  color:#dbe5f3;
  line-height:1.9;
}
.about-card ul{ margin:.2rem 0 0 1.1rem; }
.about-card li{
  color:#f2f6fd;
  line-height:1.9;
}
.about-card li + li{ margin-top:.35rem; }
.about-card .ls-note{
  color:#c7d3e6;
  font-size:.95rem;
}

@media (min-width: 980px){
  .about-grid{ grid-template-columns:1fr 1fr; }
}
.section.about .ls-cta{ margin-top:1rem }
.section.about .ls-btn{ box-shadow:0 8px 22px rgba(0,0,0,.28) }

/* =========================================================
   Personal Portrait 可読性アップ + 背景画像前提
========================================================= */
.section.personal{ position:relative; overflow:hidden; }
.section.personal.is-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(180deg, rgba(8,12,20,.84), rgba(8,12,20,.92)),
    var(--pp-bg-img, none);
  background-size:cover;
  background-position:center 35%;
  filter:saturate(.92);
}

.section.personal .section-title,
.section.personal .ls-h2,
.section.personal .ls-h3{
  color:#eef3fb;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
}
.section.personal .section-lead{
  max-width:64ch;
  color:#e8eef8;
  line-height:1.9;
}

.pp-grid{
  display:grid;
  gap:14px;
  margin-top:12px;
}
.pp-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:1.05rem 1.15rem;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.pp-card p{
  color:#dbe5f3;
  line-height:1.9;
}
.pp-card ul{ margin:.2rem 0 0 1.1rem; }
.pp-card li{
  color:#f2f6fd;
  line-height:1.9;
}
.pp-card li+li{ margin-top:.35rem; }
.pp-card .ls-note{
  color:#c7d3e6;
  font-size:.95rem;
}

@media (min-width: 980px){
  .pp-grid{ grid-template-columns: 1fr 1fr }
}

.pp-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin:.5rem 0 0;
}
.pp-tag{
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.92rem;
  color:#eaf1fb;
}
.section.personal .ls-btn{ box-shadow:0 8px 22px rgba(0,0,0,.28) }

/* =========================================================
  v4.2 mobile-fix — smartphone only typographic & spacing fix
========================================================= */

/* 1) ルート文字サイズを“固定”して過剰拡大を止める */
@media (max-width: 600px){
  html{ font-size:16px !important; }
}
@media (max-width: 380px){
  html{ font-size:15px !important; }
}

/* 2) セクション共通の文字スケール（スマホ） */
@media (max-width: 600px){
  .section{ padding:28px 5vw; }
  .section-title{
    font-size: clamp(20px, 5.6vw, 26px) !important;
    letter-spacing:.02em;
    margin:0 0 .6rem;
  }
  .section-lead{
    font-size:1.02rem;
    line-height:1.85;
    color: rgba(231,235,241,.92);
  }
  .btn{
    min-height:48px;
    padding:.8rem 1rem;
    font-size:1rem;
  }
}

/* 3) Personalページ（pp-）専用：スマホ調整 */
@media (max-width: 600px){
  .pp-hero .pp-title{
    font-size: clamp(24px, 7.2vw, 30px);
    line-height:1.25;
    margin:0 0 .5rem;
  }
  .pp-hero .pp-lead{
    font-size: clamp(15px, 4.6vw, 18px);
    line-height:1.9;
    margin:.25rem 0 .9rem;
    color: rgba(231,235,241,.94);
  }

  .pp-card{
    padding:1.0rem;
    border-radius:16px;
    background: rgba(5,8,13,.52);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 4px 18px rgba(0,0,0,.22);
  }
  .pp-card .pp-head{
    font-size: clamp(18px, 5.2vw, 22px);
    margin:0 0 .6rem;
  }
  .pp-card ul{ padding-left:1.15rem; margin:.35rem 0 0; }
  .pp-card li{ margin:.35rem 0; }

  .pp-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .pp-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
  .pp-tag{ padding:.35rem .6rem; font-size:.95rem; }
}

/* 4) 背景画像上での視認性（About/Personal共通） */
.page-with-bg::before{
  filter:saturate(.9);
  opacity:.20;
}

/* =========================================================
  v4.2 about-mobile-fix — Aboutページのスマホ最適化
========================================================= */

.ab-page{
  color: rgba(231,235,241,.96);
}
.ab-page .muted,
.ab-page .section-lead{
  color: rgba(231,235,241,.92);
}

.ab-page.page-with-bg::before{
  opacity:.22;
  filter:saturate(.9);
}

@media (max-width: 900px){
  .ab-sitemap .hub-grid{ grid-template-columns:1fr; gap:12px; }
  .ab-sitemap .hub-card{ padding:1rem; }
}

@media (max-width: 600px){
  .ab-hero .ab-title{
    font-size: clamp(22px, 6.6vw, 28px);
    line-height:1.25;
    margin:0 0 .5rem;
    letter-spacing:.02em;
  }
  .ab-hero .ab-lead{
    font-size: clamp(15px, 4.6vw, 18px);
    line-height:1.9;
    margin:.25rem 0 .9rem;
  }

  .ab-page .section{ padding:28px 5vw; }

  .ab-card{
    padding:1.0rem;
    border-radius:16px;
    background: rgba(5,8,13,.52);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 4px 18px rgba(0,0,0,.22);
  }
  .ab-card + .ab-card{ margin-top:12px; }

  .ab-card .ab-head{
    font-size: clamp(18px, 5.2vw, 22px);
    margin:0 0 .6rem;
    letter-spacing:.02em;
  }

  .ab-list ul{ padding-left:1.15rem; margin:.35rem 0 0; }
  .ab-list li{ margin:.35rem 0; }

  .ab-note{
    color: rgba(231,235,241,.78);
    font-size:.98rem;
  }

  .ab-seasons li{ margin:.25rem 0; }
}

@media (min-width: 601px) and (max-width: 1024px){
  .ab-card{ padding:1.2rem 1.3rem; }
}

/* 箇条書きフォント統一 */
.ab-page .ab-card ul,
.ab-page .ab-card li,
.ab-page .ab-seasons,
.ab-page .ab-seasons li{
  font-family: var(--font-sans) !important;
  line-height:1.9;
}

/* =========================================================
  Latest works：高さクランプ（スマホ / タブ / PC）
========================================================= */

/* スマホ用トークン */
:root{
  --works-img-min: 320px;
  --works-img-pref: 64vh;
  --works-img-max: 520px;
}

/* スマホ幅：画像だけ高さクランプ */
@media (max-width: 560px){
  .grid-works .work-card{
    height:auto;
    overflow:hidden;
  }
  .grid-works .work-card img{
    height:clamp(var(--works-img-min), var(--works-img-pref), var(--works-img-max));
    width:100%;
    object-fit:cover;
    aspect-ratio:auto;
    display:block;
  }
}

/* iOS svh 対応 */
@media (max-width: 560px){
  .grid-works .work-card img{
    height:clamp(var(--works-img-min), 64svh, var(--works-img-max));
  }
}

/* 構図微調整（任意） */
@media (max-width: 560px){
  .grid-works .work-card:nth-child(1) img{ object-position:center 42%; }
  .grid-works .work-card:nth-child(2) img{ object-position:center 40%; }
  .grid-works .work-card:nth-child(3) img{ object-position:center 38%; }
}

/* Tablet / Desktop 用トークン */
:root{
  --works-tab-min: 420px;
  --works-tab-pref: 64vh;
  --works-tab-max: 620px;

  --works-dk-min: 480px;
  --works-dk-pref: 72vh;
  --works-dk-max: 720px;
}

/* iPad幅 */
@media (min-width: 561px) and (max-width: 1024px){
  .grid-works .work-card{
    height:auto;
    overflow:hidden;
  }
  .grid-works .work-card img{
    width:100%;
    height:clamp(var(--works-tab-min), 64svh, var(--works-tab-max));
    object-fit:cover;
    aspect-ratio:auto;
    display:block;
  }
  .grid-works .work-card:nth-child(1) img{ object-position:center 40%; }
  .grid-works .work-card:nth-child(2) img{ object-position:center 42%; }
  .grid-works .work-card:nth-child(3) img{ object-position:center 38%; }
}

/* Desktop */
@media (min-width: 1025px){
  .grid-works .work-card{
    height:auto;
    overflow:hidden;
  }
  .grid-works .work-card img{
    width:100%;
    height:clamp(var(--works-dk-min), var(--works-dk-pref), var(--works-dk-max));
    object-fit:cover;
    aspect-ratio:auto;
    display:block;
  }
  .grid-works .work-card:nth-child(1) img{ object-position:center 42%; }
  .grid-works .work-card:nth-child(2) img{ object-position:center 44%; }
  .grid-works .work-card:nth-child(3) img{ object-position:center 40%; }
}
/* Patron見出しのコントラスト補強 */
.patron .section-title{
  color:#f4f7ff!important;
  text-shadow:0 2px 20px rgba(0,0,0,.88);
}
.patron .section-lead{ color:#eef3fb; }
/* =========================================================
   Fix: 文字が灰色に落ちる問題（Homeのみ）
   ※jimdo.cssの一番下に追記
========================================================= */

html.is-home{
  /* サブ文字を“灰”から“読みやすい薄白”へ */
  --text:  #f2f5fb;
  --muted: #d0d8e6;
  --muted2:#aab5c7;
}

/* muted参照系（薄すぎ問題の直撃ポイント） */
html.is-home #site-container .section-lead,
html.is-home #site-container .hub-sub,
html.is-home #site-container .work-card .cap,
html.is-home #site-container .footer-inner,
html.is-home #site-container .footer-note{
  color: rgba(242,245,251,.88) !important;
}

/* カード本文・FAQ本文も“少しだけ”持ち上げ */
html.is-home #site-container .card p,
html.is-home #site-container .faq p{
  color: rgba(242,245,251,.86) !important;
}

/* 念のため：About/Flow/Promise内の通常本文が落ちるケースを救済 */
html.is-home #site-container .about :where(p,li),
html.is-home #site-container .flow  :where(p,li),
html.is-home #site-container .promise:where(p,li){
  color: rgba(242,245,251,.86);
}

/* 「流れ」「約束」見出しだけ白に固定（iOS Safari対策込み） */
.section.flow .section-title,
.section.promise .section-title {
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;

  /* もし過去にグラデ文字や text-fill を使ってた場合の保険 */
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* subpageではホーム用セクションを全て消す（最終確定版） */
html.is-subpage .hero,
html.is-subpage .works,
html.is-subpage .about,
html.is-subpage .voices,
html.is-subpage .flow,
html.is-subpage .promise,
html.is-subpage .faq-sec{
  display:none !important;
}

/* === mobile: 横切れ最小修正 === */
#site-container, body { overflow-x: hidden; } /* 念のため */

/* Hero内は強制的に折り返す（Jimdo側の指定を潰す） */
.hero :is(.hero-title,.hero-sub,.hero-desc){
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* DMテンプレ（pre）の横はみ出し対策：pre-wrapにする */
#dmText{
  white-space: pre-wrap;   /* ←これが本丸 */
  overflow-wrap: anywhere;
  word-break: break-word;
}