/* ==========================================================================
   ひだまりデスク 紹介サイト
   素のCSS。色・余白・書体はすべて :root にまとめてあります。

   方針:
   - 影は使わない。面の色と余白、細い罫線だけで区切る
   - 角丸は最小限。まるい形はイラストの中だけ
   - 見出しは明朝、本文は角ゴシック
   ========================================================================== */

:root {
  /* --- 色 --- */
  --c-cream:  #faf4ea;  /* いちばん広い背景 */
  --c-white:  #fffdfa;
  --c-butter: #f6e7c9;  /* 差し色の帯 */
  --c-line:   #e4d7c1;  /* 罫線。グレーの代わり */

  /* ブランドのオレンジ。Steamカプセルのロゴに合わせた色相（32度）で3段に分けてある。
   * 明るい橙は白文字を載せると2:1しか出ないため、文字が関わる面には deep を使う。 */
  /* キービジュアルのオレンジ。明るい橙には白文字が載らない（1.97:1）ため、
   * 文字を載せる面は墨色 --c-ink と組にして使う（6.45:1）。 */
  --c-brand:        #ed9f45;  /* 主ボタン。文字は墨色（5.8:1） */
  --c-brand-soft:   #eeae68;  /* CTAの帯。面積が広いぶん、さらに彩度を落とす（6.6:1） */
  --c-brand-press:  #d98a2a;  /* ボタンを押したとき（4.6:1） */
  --c-accent:       #cd7d22;  /* アイコン。白地で3.1:1 */
  --c-accent-deep:  #a55c0b;  /* 小さな文字・リンク・英字ラベル */
  --c-accent-soft:  #f0ab5e;  /* イラストの中の淡い面 */

  --c-ink:      #3b3128;  /* 黒の代わり。あたたかい墨色 */
  --c-ink-soft: #665a4c;
  --c-ink-thin: #8d8073;

  --c-wood:       #e0bd8c;  /* イラストの机板 */
  --c-wood-band:  #e9d3b4;  /* 秘書の帯。文字が載るので明るめ（本文4.6:1） */
  --c-terracotta: #cf8258;
  --c-leaf:       #8fae83;
  --c-skin:       #fbe1c6;
  --c-blush:      #f2b19a;
  --c-hair:       #6d5340;
  --c-cloth:      #eec488;

  /* --- 形 --- */
  --r-s: 4px;   /* 小さな部品 */
  --r-m: 12px;  /* ボタン */
  --r-l: 14px;  /* カードの枠・吹き出し・UIモック */
  --r-xl: 20px; /* CTAの帯 */

  --wrap: 1060px;
  --stroke: 2.4px;

  /* --- 書体 --- */
  --f-mincho: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --f-gothic: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --f-latin:  'Cormorant Garamond', 'Zen Old Mincho', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-gothic);
  font-weight: 400;
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: .03em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--f-mincho);
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: .05em;
  margin: 0 0 20px;
}

p { margin: 0 0 18px; color: var(--c-ink-soft); }
a { color: inherit; }
svg { display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-line);
}

.header-inner { display: flex; align-items: center; gap: 30px; height: 92px; }

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: auto;
}

/* ロゴ画像（太陽＋ひだまりデスク＋Creator Secretary の横組み） */
.brand-logo { display: block; height: 62px; width: auto; }

.site-nav { display: flex; gap: 32px; font-size: .85rem; font-weight: 500; letter-spacing: .06em; }

.site-nav a {
  text-decoration: none;
  color: var(--c-ink-soft);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.site-nav a:hover { color: var(--c-accent-deep); border-bottom-color: var(--c-accent); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .1em;
  text-decoration: none;
  border-radius: var(--r-m);
  background: var(--c-brand);
  color: var(--c-ink);
  border: 1px solid var(--c-brand);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.btn:hover { background: var(--c-brand-press); border-color: var(--c-brand-press); }

.btn-sm { padding: 9px 22px; }
.btn-lg { padding: 16px 40px; font-size: .95rem; }

.btn-outline {
  background: transparent;
  color: var(--c-accent-deep);
  border-color: var(--c-line);
}

.btn-outline:hover { background: transparent; border-color: var(--c-accent); color: var(--c-accent-deep); }

.btn-cta { background: var(--c-white); color: var(--c-accent-deep); border-color: var(--c-white); }
.btn-cta:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-accent-deep); }


/* ---------- 見出しまわりの部品 ---------- */
.label-en {
  font-family: var(--f-latin);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  margin-bottom: 18px;
}

.label-en.center { text-align: center; }

/* 線を引いたような下線。細く、控えめに */
.marker {
  --marker: var(--c-butter);
  background: linear-gradient(transparent 76%, var(--marker) 76%, var(--marker) 92%, transparent 92%);
}

.handwrite {
  font-family: var(--f-mincho);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--c-ink);
  margin-bottom: 34px;
}

.section-title {
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  text-align: center;
  font-weight: 600;
}

.section-lead {
  text-align: center;
  max-width: 44ch;
  margin: 0 auto 64px;
  font-size: .9rem;
  color: var(--c-ink-thin);
}

section { position: relative; padding: 104px 0; }

/* ---------- ヒーロー ---------- */
.hero { padding: 92px 0 112px; background: var(--c-white); }

/* ヒーローは2段構成。
 * 上段＝文章とキービジュアルを左右に。下段＝アプリの画面を大きく1枚。
 * 画面写真を大きく見せたいので、この区画だけ横幅を広げてある。 */
.hero .wrap { max-width: 1180px; }

.hero-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

/* グリッドの子は既定で中身より小さくならない。画像が列を押し広げるのを抑える */
.hero-top > * { min-width: 0; }

.hero-capsule {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-l);
}

.hero-visual { margin-top: 60px; }

/* 画面写真の下の注記。小さい文字なので、色は薄くしすぎない（4.5:1を満たす濃さ） */
.shot-note {
  margin: 14px 0 0;
  font-size: .78rem;
  color: var(--c-ink-soft);
  letter-spacing: .04em;
  text-align: right;
}

.hero h1 {
  font-size: clamp(1.7rem, 3.3vw, 2.35rem);
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: .06em;
  margin-bottom: 30px;
}

.hero .lead { font-size: .95rem; line-height: 2.2; color: var(--c-ink-soft); }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 38px 0 18px; }

.hero-note { font-size: .78rem; color: var(--c-ink-thin); margin: 0; letter-spacing: .04em; }

/* ヒーローに置くアプリの画面写真 */
.hero-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-l);
}

/* ---------- こんなこと、ありませんか ---------- */
.troubles { background: var(--c-cream); }

.trouble-list {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  max-width: 640px;
  border-top: 1px solid var(--c-line);
}

.trouble-list li {
  position: relative;
  padding: 20px 0 20px 34px;
  border-bottom: 1px solid var(--c-line);
  font-size: .92rem;
  line-height: 1.95;
  color: var(--c-ink-soft);
}

.trouble-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 32px;
  width: 12px;
  height: 1px;
  background: var(--c-accent);
}

.trouble-answer {
  font-family: var(--f-mincho);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--c-ink);
  line-height: 2.1;
  margin: 0;
}

/* ---------- できること ---------- */
.features { background: var(--c-white); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-l);
  overflow: hidden;
}

.feature-card { background: var(--c-white); padding: 40px 34px 42px; }

.feature-icon { display: block; width: 30px; height: 30px; margin-bottom: 22px; }

/* アイコンは塗り（fill）で描かれた素材。色はここで一括して site のアクセント色に合わせる */
.feature-icon svg {
  width: 30px;
  height: 30px;
  fill: var(--c-accent);
  stroke: none;
}

.feature-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: .07em;
}

.feature-card p { margin: 0; font-size: .87rem; line-height: 2.05; color: var(--c-ink-thin); }

/* 見出しの下に置く一行。本文より濃く、見出しと同じ明朝で受ける */
.feature-card .feature-tagline {
  font-family: var(--f-mincho);
  font-size: .92rem;
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.95;
  margin: 0 0 12px;
}

/* カードが3の倍数+1枚のとき、最後の1枚が余って罫線色の空セルが出るのを防ぐ */
@media (min-width: 1001px) {
  .feature-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* ---------- 秘書 ---------- */
/* 提案D：ここだけ机の板の色。ページの中央に木が一枚通る */
.secretary { background: var(--c-wood-band); }
.secretary .marker { --marker: var(--c-white); }

.secretary-inner {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 60px;
  align-items: center;
}

.secretary-visual { text-align: center; }

/* ---------- 秘書のビジュアル ---------- */
.secretary-visual { text-align: center; }

.illust-mascot {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto 22px;
}

/* セリフ。inline-block なので中身の幅ぴったりに広がり、途中で折り返らない */
.speech {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 18px 26px;
  background: var(--c-white);
  border-radius: var(--r-l);
  font-family: var(--f-mincho);
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.95;
  letter-spacing: .05em;
  color: var(--c-ink);
}

/* しっぽ。根元が左、先端が右上を向く細い三角。
 * border-left を透明にすると頂点が右上に来る。
 * 先端の位置 = left + border-left幅 = 50% - 44px */
.speech::before {
  content: "";
  position: absolute;
  top: -15px;
  left: calc(50% - 70px);
  width: 0;
  height: 0;
  border-left: 26px solid transparent;
  border-bottom: 15px solid var(--c-white);
}

.secretary h2 { font-size: clamp(1.4rem, 2.8vw, 1.85rem); }
.secretary p { color: var(--c-ink-soft); font-size: .9rem; line-height: 2.15; }

.secretary-points {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(59, 49, 40, .16);
}

.secretary-points li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(59, 49, 40, .16);
  color: var(--c-ink);
  font-size: .88rem;
  line-height: 1.9;
  letter-spacing: .04em;
}

/* ---------- こんな人へ ---------- */
.for-who { background: var(--c-cream); }

.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }

.who-card { border-top: 2px solid var(--c-accent); padding-top: 26px; }

.who-num {
  display: block;
  font-family: var(--f-latin);
  font-weight: 500;
  font-style: italic;
  font-size: 1.7rem;
  color: var(--c-accent-deep);
  line-height: 1;
  margin-bottom: 16px;
}

.who-card h3 { font-size: .98rem; font-weight: 600; margin-bottom: 12px; letter-spacing: .06em; }
.who-card p { margin: 0; font-size: .87rem; line-height: 2.05; color: var(--c-ink-thin); }

/* ---------- ダウンロード ---------- */
.download { background: var(--c-cream); padding-top: 0; }

.download-inner {
  background: var(--c-brand-soft);
  border-radius: var(--r-xl);
  padding: 78px 32px 70px;
  text-align: center;
}


.download h2 {
  color: var(--c-ink);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  letter-spacing: .08em;
}

/* 明るい橙に載せられるのは墨色だけ。濃さでなく大きさで階層をつける */
.download p { color: var(--c-ink); font-size: .88rem; }
.download-note { font-size: .78rem; margin: 20px 0 0; color: var(--c-ink); letter-spacing: .08em; }

/* ---------- FAQ ---------- */
.faq { background: var(--c-cream); }

.faq-list { max-width: 660px; margin: 0 auto; border-top: 1px solid var(--c-line); }

.faq-item { border-bottom: 1px solid var(--c-line); }

.faq-item summary {
  cursor: pointer;
  font-family: var(--f-mincho);
  font-weight: 500;
  list-style: none;
  padding: 22px 40px 22px 0;
  position: relative;
  font-size: .95rem;
  letter-spacing: .05em;
  transition: color .2s ease;
}

.faq-item summary:hover { color: var(--c-accent-deep); }
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::before,
.faq-item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  background: var(--c-accent-deep);
  transition: transform .25s ease, opacity .25s ease;
}

.faq-item summary::before { width: 13px; height: 1px; transform: translateY(-50%); }
.faq-item summary::after  { width: 1px; height: 13px; right: 10px; transform: translateY(-50%); }

.faq-item[open] summary::after { transform: translateY(-50%) rotate(90deg); opacity: 0; }

.faq-body { padding: 0 0 24px; }
.faq-body p { margin: 0; font-size: .87rem; line-height: 2.05; color: var(--c-ink-thin); }


/* ---------- 開発について ---------- */
/* 開閉のUIは .faq-list / .faq-item / .faq-body をそのまま使っている。
 * 専用のスタイルを持たせないことで、よくある質問と完全に同じ見た目になる。 */
.about-dev { background: var(--c-cream); }

/* ブログ（ひだまりノート）への案内リンク。ナビと同じ下線のふるまい */
.about-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--c-accent-deep);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--c-line);
  transition: border-color .2s ease;
}
.about-link:hover { border-bottom-color: var(--c-accent); }

/* ---------- フッター ---------- */
.site-footer { background: var(--c-butter); padding: 64px 0 48px; }

.footer-inner { text-align: center; }

.brand-footer { margin: 0 auto 18px; justify-content: center; }
.brand-footer .brand-logo { height: 72px; }

.footer-inner p { margin: 4px 0; font-size: .78rem; color: var(--c-ink-soft); letter-spacing: .05em; }
.footer-sub, .footer-copy, .footer-credit { color: var(--c-ink-thin) !important; }
/* 素材のクレジット。著作権表示と同じ控えめな扱い */
.footer-credit { font-size: .74rem !important; margin-top: 12px !important; letter-spacing: .04em; }

/* フッターのリンクだけは、地色（バター色）の上で読める濃さにする。
 * 薄い色のままだと 3.1:1 しか出ず、小さい文字では読みにくい */
.footer-inner a { color: var(--c-ink-soft); }
.footer-inner a:hover { color: var(--c-accent-deep); }
.footer-copy { font-family: var(--f-latin); font-size: .82rem !important; margin-top: 14px !important; }

/* ---------- 画面が狭いとき ---------- */
@media (max-width: 1000px) {
  .hero-top, .secretary-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-key { order: -1; }
  .hero-visual { margin-top: 44px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  /* カードが奇数枚のとき、最後の1枚が余って罫線色の空セルが出るのを防ぐ */
  .feature-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .who-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }
  .site-nav { display: none; }
  .hero h1 br { display: none; }
}

@media (max-width: 560px) {
  .header-inner { height: 72px; gap: 12px; }
  .brand-logo { height: 44px; }
  .brand-footer .brand-logo { height: 58px; }
  .btn-sm { padding: 8px 16px; font-size: .8rem; }
  .feature-grid, .who-grid { grid-template-columns: 1fr; }
  section { padding: 72px 0; }
  .hero { padding: 52px 0 80px; }
  .hero h1 { font-size: 1.5rem; }
  .hero h1 br { display: inline; }
  .hero .lead br { display: none; }
  .feature-card { padding: 32px 26px 34px; }
  .download-inner { padding: 58px 24px 54px; }
  .btn-lg { padding: 15px 32px; }
}