/* =========================================================
   misomame.com — stylesheet
   方針: 白基調 / ミニマル / 余白・行間・文字サイズで構成。
   装飾は罫線のみ。影・グラデーション・派手なアニメは使わない。
   ========================================================= */

:root{
  --bg:        #FCFCFA;
  --text:      #1B1B1A;
  --muted:     #6B6B66;
  --faint:     #9A9A93;
  --line:      #E8E6DF;
  --line-2:    #D9D7CF;
  --link:      #1B1B1A;
  --accent:    #3B4252;
  --maxw:      720px;
  --maxw-wide: 800px;
  --maxw-article: 816px;   /* JA本文 約45字(765px) を収める幅 */

  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --serif: Georgia, "Times New Roman", "Hiragino Mincho ProN",
           "Yu Mincho", "Noto Serif JP", serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }

/* 常時アンダーラインのリンク */
.link-underline{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }

/* 下線＋右斜め上矢印（PRODUCTS購入導線と同系のリンク） */
.arrow-link{ border-bottom:1px solid var(--text); padding-bottom:1px; }
.arrow-link:hover{ text-decoration:none; opacity:.7; }
.arrow-link::after{ content:" ↗"; color:var(--faint); }

/* キーボード操作時のフォーカス表示は必ず残す */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ---------- レイアウト枠 ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.wrap--wide{ max-width:var(--maxw-wide); }
.wrap--article{ max-width:var(--maxw-article); }

/* ---------- ヘッダー / ナビ ---------- */
.site-header{
  position:relative;
  max-width:var(--maxw-wide);
  margin:0 auto;
  padding:34px 24px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.brand{ display:inline-flex; line-height:0; }
.brand img{ height:26px; width:auto; display:block; }
.brand:hover{ text-decoration:none; opacity:.78; }

.site-nav{ display:flex; gap:22px; flex-wrap:wrap; }
.site-nav a{
  font-size:12.5px;
  letter-spacing:.14em;
  color:var(--muted);
  padding:2px 0;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.site-nav a:hover{ color:var(--text); text-decoration:none; }
.site-nav a[aria-current="page"]{ color:var(--text); border-bottom-color:var(--text); }

/* ハンバーガーボタン（PCでは非表示） */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:12px;
  background:none;
  border:0;
  cursor:pointer;
}
.nav-toggle-box{ position:relative; display:block; width:24px; height:16px; }
.nav-toggle-inner,
.nav-toggle-inner::before,
.nav-toggle-inner::after{
  position:absolute; left:0; width:24px; height:2px; background:var(--text);
  transition:transform .15s ease, opacity .15s ease, background-color .15s ease;
}
.nav-toggle-inner{ top:50%; margin-top:-1px; }
.nav-toggle-inner::before{ content:""; top:-7px; }
.nav-toggle-inner::after{ content:""; top:7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-inner{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-inner::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-inner::after{ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 本文セクション ---------- */
main{ padding:56px 0 72px; }

.page-title{ font-size:13px; letter-spacing:.18em; color:var(--faint); font-weight:600; margin:0 0 38px; }

h1.lead{
  font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.5;
  letter-spacing:.01em; margin:0 0 28px;
}
@media (min-width:600px){ h1.lead{ font-size:34px; } }

h2{ font-size:19px; font-weight:600; letter-spacing:.01em; margin:0 0 14px; }
h3{ font-size:16px; font-weight:600; margin:0 0 10px; }
p{ margin:0 0 1.2em; }

.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.small{ font-size:13.5px; }

.section{ margin:0 0 48px; }
.section:last-child{ margin-bottom:0; }
.block-sep{ border:0; border-top:1px solid var(--line); margin:40px 0; }
.lang-label{ display:inline-block; font-size:11px; letter-spacing:.2em; color:var(--faint); margin:0 0 14px; }

/* ---------- TOP ヒーロー ---------- */
.hero{ padding:24px 0 8px; margin-bottom:44px; }
.hero .tagline{ font-family:var(--serif); font-size:26px; line-height:1.55; font-weight:400; margin:0 0 16px; }
@media (min-width:600px){ .hero .tagline{ font-size:30px; } }
.hero .sub{ color:var(--muted); margin:0; }

.inline-links{
  display:flex; gap:18px; flex-wrap:wrap;
  margin-top:30px; padding-top:24px; border-top:1px solid var(--line);
}
.inline-links a{ font-size:13px; letter-spacing:.1em; color:var(--muted); }
.inline-links a:hover{ color:var(--text); }
.inline-links a::after{ content:" →"; color:var(--faint); }

/* ---------- 言語トグル ---------- */
.lang-toggle{ display:inline-flex; border:1px solid var(--line-2); border-radius:999px; overflow:hidden; margin:0 0 34px; }
.lang-toggle button{
  appearance:none; background:transparent; border:0; font:inherit; font-size:12px;
  letter-spacing:.12em; color:var(--muted); padding:6px 16px; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.lang-toggle button + button{ border-left:1px solid var(--line-2); }
.lang-toggle button[aria-pressed="true"]{ background:var(--text); color:#fff; }

.lang-en{ display:none; }
html[data-lang="en"] .lang-ja{ display:none; }
html[data-lang="en"] .lang-en{ display:block; }

/* ---------- ESSAYS 一覧 ---------- */
.essay-list{ list-style:none; margin:0; padding:0; }
.essay-list li{ padding:24px 0; border-top:1px solid var(--line); }
.essay-list li:last-child{ border-bottom:1px solid var(--line); }
.essay-date{ font-size:12.5px; letter-spacing:.08em; color:var(--faint); margin:0 0 6px; }
.essay-list h2{ font-size:18px; margin:0 0 8px; font-weight:600; line-height:1.55; }
.essay-list h2 a{ color:var(--text); }
.essay-desc{ color:var(--muted); margin:0 0 12px; font-size:15px; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{ font-size:11px; letter-spacing:.06em; color:var(--faint); border:1px solid var(--line); border-radius:999px; padding:2px 10px; }

/* ---------- ESSAY 記事 ---------- */
.measure-ja{ max-width:765px; }   /* ≒ 全角45字 (17px) */
.measure-en{ max-width:637px; }   /* ≒ 半角75字 (17px) */

.article-head{ margin:0 0 36px; }
.article-head .essay-date{ margin-bottom:10px; }
.article-title{ font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.5; margin:0 0 14px; }
@media (min-width:600px){ .article-title{ font-size:32px; } }
.article-desc{ color:var(--muted); font-size:15px; margin:0 0 16px; }

.article-body{ font-family:var(--serif); font-size:17px; line-height:1.95; letter-spacing:.01em; }
.article-body p{ margin:0 0 1.7em; }
.essay-sep{ border:0; width:40px; height:1px; background:var(--line-2); margin:2.6em 0; }

.article-nav{ margin-top:56px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; letter-spacing:.06em; }
.article-nav a{ color:var(--muted); }
.article-nav a:hover{ color:var(--text); }

/* ---------- PRODUCTS ---------- */
.product{ padding:40px 0; border-top:1px solid var(--line); }
.product:last-of-type{ border-bottom:1px solid var(--line); }
.product-audience{ font-size:12px; letter-spacing:.14em; color:var(--faint); margin:0 0 8px; }
.product h2{ font-size:22px; margin:0 0 6px; line-height:1.4; }
.product-tagline{ color:var(--muted); margin:0 0 14px; font-size:15px; }
.buy-link{ display:inline-block; margin:6px 0 4px; font-size:13.5px; letter-spacing:.06em; border-bottom:1px solid var(--text); padding-bottom:1px; }
.buy-link:hover{ text-decoration:none; opacity:.7; }
.buy-link::after{ content:" ↗"; color:var(--faint); }
.product h3{ font-size:13px; letter-spacing:.08em; color:var(--muted); font-weight:600; margin:1.9em 0 .6em; }
.dash-list{ list-style:none; margin:.2em 0 1.2em; padding-left:0; }
.dash-list li{ position:relative; padding-left:1.2em; margin:.35em 0; }
.dash-list li::before{ content:"—"; position:absolute; left:0; color:var(--faint); }
.kf-list{ list-style:none; margin:.2em 0 1.2em; padding-left:0; }
.kf-list li{ margin:.55em 0; }
.kf-list li strong{ font-weight:600; }

/* ---------- CONTACT ---------- */
.contact-block{ padding:48px 0; }
.contact-lead{ color:var(--muted); margin:0 0 16px; }
.contact-addr{ font-family:var(--serif); font-size:clamp(18px,6vw,24px); letter-spacing:.02em; color:var(--text); margin:0 0 18px; }
.contact-note{ font-size:13.5px; color:var(--faint); margin:0; }

/* ---------- フッター ---------- */
.site-footer{
  max-width:var(--maxw-wide); margin:0 auto; padding:30px 24px 48px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.foot-links{ display:flex; gap:18px; }
.foot-links a{ font-size:12px; letter-spacing:.12em; color:var(--muted); }
.foot-links a:hover{ color:var(--text); text-decoration:none; }
.foot-meta{ margin:0; font-size:11.5px; letter-spacing:.06em; color:var(--faint); }

/* ---------- スマホ ---------- */
@media (max-width:560px){
  .site-header{ padding:22px 20px 18px; }
  .wrap, .wrap--wide, .wrap--article{ padding:0 20px; }
  main{ padding:40px 0 56px; }
  .hero .tagline{ font-size:24px; }

  /* ナビをハンバーガー化 */
  .nav-toggle{ display:inline-flex; }
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:4px 20px 12px;
    opacity:0; visibility:hidden; transform:translateY(-4px);
    transition:opacity .15s ease, visibility .15s ease, transform .15s ease;
    z-index:30;
  }
  .site-nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .site-nav a{
    padding:12px 0; min-height:44px; display:flex; align-items:center;
    font-size:13.5px; letter-spacing:.12em; color:var(--muted);
    border-bottom:1px solid var(--line); border-top:0;
  }
  .site-nav a:last-child{ border-bottom:0; }
  .site-nav a[aria-current="page"]{ color:var(--text); border-bottom-color:var(--line); }
}