/* もふ手帳 — LPトップの共通フレーム（ヘッダー/フッター/基礎） index.htmlのインラインCSSと同一・2026-07-08切り出し */
:root {
    --cream: #FBF6EF;
    --peach: #FCEEE6;
    --peach-deep: #F7E0D2;
    --coral: #E8896B;
    --coral-dark: #C96F52;
    --gold: #C9A227;
    --ink: #4A3F38;
    --ink-soft: #7A6E64;
    --line: #EADFD4;
    --white: #fff;
    --maxw: 1040px;
    --radius: 20px;
    --shadow: 0 18px 50px -24px rgba(120, 80, 60, 0.45)
    }
* {
    box-sizing: border-box
    }
html {
    scroll-behavior: smooth
    }
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: "Zen Maru Gothic", system-ui, sans-serif;
    font-weight: 500;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
    }
img {
    max-width: 100%;
    display: block
    }
a {
    color: inherit
    }
.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 22px
    }
.reveal {
    opacity: 0;
    transform: translatey(22px);
    transition: opacity 0.7s ease, transform 0.7s ease
    }
.reveal.visible {
    opacity: 1;
    transform: none
    }
.eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--coral-dark);
    background: var(--peach);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 14px
    }
h1, h2, h3 {
    font-weight: 900;
    line-height: 1.4;
    color: var(--ink);
    margin: 0
    }
.sec {
    padding: 74px 0
    }
.sec-t {
    font-size: clamp(1.5rem, 5.4vw, 2.2rem)
    }
.lead {
    color: var(--ink-soft);
    font-size: 1.02rem;
    margin: 14px 0 0
    }
.note-s {
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-top: 12px
    }
/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    border-radius: 999px;
    padding: 14px 28px;
    border: 2px solid transparent;
    transition: transform 0.15s, box-shadow 0.2s
    }
.btn:active {
    transform: translatey(1px)
    }
.btn-primary {
    background: var(--coral-dark);
    color: #fff;
    box-shadow: 0 12px 26px -10px rgba(201, 111, 82, 0.7)
    }
.btn-primary:hover {
    background: var(--coral-dark)
    }
.btn-ghost {
    background: #fff;
    color: var(--coral-dark);
    border-color: var(--peach-deep)
    }
.btn-lg {
    padding: 17px 38px;
    font-size: 1.06rem
    }
.btn-sm {
    padding: 10px 18px;
    font-size: 0.9rem
    }
/* header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251, 246, 239, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s, box-shadow 0.3s
    }
.site-header.scrolled {
    border-color: var(--line);
    box-shadow: 0 6px 20px -16px rgba(120, 80, 60, 0.5)
    }
.header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 70px
    }
.logo img {
    height: 40px
    }
.main-nav {
    margin-left: auto
    }
.main-nav ul {
    display: flex;
    gap: 22px;
    list-style: none;
    margin: 0;
    padding: 0
    }
.main-nav a {
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink-soft)
    }
.main-nav a:hover {
    color: var(--coral-dark)
    }
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px
    }
.main-nav + .header-actions {
    margin-left: 18px
    }
.lang-toggle {
    position: relative
    }
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--ink-soft);
    cursor: pointer
    }
.lang-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 6px;
    min-width: 140px;
    z-index: 60
    }
.lang-menu.open {
    display: block
    }
.lang-menu button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    font-family: inherit;
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 700;
    color: var(--ink);
    font-size: 0.9rem
    }
.lang-menu button:hover {
    background: var(--peach)
    }
.lang-menu button[aria-current="true"] {
    color: var(--coral-dark)
    }
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 11px;
    cursor: pointer;
    align-items: center;
    justify-content: center
    }
.hamburger span {
    width: 20px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: 0.25s
    }
.hamburger.open span:nth-child(1) {
    transform: translatey(7px) rotate(45deg)
    }
.hamburger.open span:nth-child(2) {
    opacity: 0
    }
.hamburger.open span:nth-child(3) {
    transform: translatey(-7px) rotate(-45deg)
    }
.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 14px 22px 22px;
    background: var(--cream);
    border-bottom: 1px solid var(--line)
    }
.mobile-menu.open {
    display: flex
    }
.mobile-menu a {
    text-decoration: none;
    font-weight: 700;
    color: var(--ink);
    padding: 9px 0
    }
.mobile-menu .btn {
    margin-top: 6px
    }
/* phone frame (画像が端末ベゼル内蔵のSVGならそのまま、写真の場合は枠付与) */
.phone {
    width: min(248px, 72vw);
    filter: drop-shadow(0 22px 44px rgba(120, 80, 60, 0.34))
    }
.phone img {
    width: 100%
    }
/* hero */
.hero .container {
    position: relative;
    z-index: 2
    }
.hero-cta {
    margin: 30px 0 8px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
    }
.hero-phone {
    margin: 26px auto 0
    }
.cta-note {
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin: 6px 0 0
    }
/* generic split row */
.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center
    }
.row.rev .row-media {
    order: 2
    }
.row-media {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap
    }
.media-photo {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 380px;
    width: 100%
    }
/* flow ③ */
.flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 30px
    }
.flow .arrow {
    color: var(--coral);
    font-size: 1.4rem
    }
.flow figure {
    margin: 0;
    text-align: center
    }
.flow figcaption {
    font-size: 0.78rem;
    color: var(--ink-soft);
    margin-top: 8px
    }
.flow .media-photo {
    max-width: 230px
    }
/* デバイス二枚（スマホ／パソコン） */
.dev-hl {
    color: var(--coral-dark)
    }
/* ⑤ caption emphasis */
.ai-cap {
    display: inline-block;
    background: #FFF6F1;
    border: 1.5px solid #E2B9A8;
    color: #9A4A2E;
    font-weight: 700;
    border-radius: 12px;
    padding: 8px 14px;
    margin-top: 6px;
    font-size: 0.92rem
    }
/* ⑥ quiet */
.quiet {
    text-align: center;
    background: linear-gradient(180deg, var(--peach), #fff)
    }
.quiet .media-photo {
    margin: 24px auto 0;
    max-width: 560px
    }
/* ⑦ omake banners */
.omake {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 26px
    }
.omake .ob {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px
    }
.omake .ob i {
    font-size: 1.5rem;
    color: var(--gold)
    }
/* ⑧ pricing */
/* ⑨ trust */
/* ⑩ faq */
.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 16px 18px;
    font-weight: 700;
    list-style: none
    }
.faq-q::after {
    content: "＋";
    color: var(--coral);
    font-weight: 900
    }
.faq-a {
    max-height: 0;
    opacity: 0;
    padding: 0 18px;
    color: var(--ink-soft);
    transition: 0.3s
    }
/* final cta */
.final {
    text-align: center;
    background: linear-gradient(180deg, #fff, var(--peach))
    }
.final .hero-phone {
    max-width: 220px
    }
/* footer */
.site-footer {
    background: #3C332D;
    color: #F0E8E0;
    padding: 48px 0 26px;
    margin-top: 20px
    }
.footer-top {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: space-between
    }
.footer-logo {
    font-weight: 900;
    font-size: 1.2rem
    }
.footer-brand p {
    font-size: 0.85rem;
    color: #C9BDB2
    }
.footer-sitemap {
    display: flex;
    gap: 40px;
    flex-wrap: wrap
    }
.footer-col h4 {
    font-size: 0.92rem;
    margin: 0 0 10px;
    color: #fff
    }
.footer-col__h2 {
    margin-top: 18px !important
    }
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0
    }
.footer-col li {
    margin-bottom: 7px
    }
.footer-col a {
    color: #D8CCC2;
    text-decoration: none;
    font-size: 0.86rem
    }
.footer-col a:hover {
    color: #fff;
    text-decoration: underline
    }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #524841;
    margin-top: 30px;
    padding-top: 18px;
    font-size: 0.82rem;
    color: #C9BDB2;
    flex-wrap: wrap
    }
.footer-bottom .lang-btn {
    background: #4A413A;
    border-color: #5C524A;
    color: #E8DED5
    }
.footer-bottom .lang-menu {
    bottom: calc(100% + 6px);
    top: auto
    }
@media (max-width: 820px) {
  .main-nav {
      display: none
      }
  .main-nav + .header-actions {
      margin-left: auto
      }
  .header-actions .btn-sm {
      display: none
      }
  .hamburger {
      display: flex
      }
  .row {
      grid-template-columns: 1fr;
      gap: 26px
      }
  .row.rev .row-media {
      order: 0
      }
  .flow .arrow {
      transform: rotate(90deg)
      }
  .sec {
      padding: 56px 0
      }
}
.signup-lead {
    color: var(--ink-soft);
    font-size: 0.96rem;
    line-height: 1.75;
    margin: 0 0 12px;
    text-align: center
    }
.plan-sub {
    margin: 0 0 12px;
    color: var(--ink-soft);
    font-size: 0.9rem
    }