@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&display=swap');

    :root{
      --ink:#2E2A25;
      --muted:#797064;
      --paper:#FFFBF6;
      --paper-alt:#FFF3E6;
      --line:#EFE1CE;
      --line-soft:#F4EADC;
      --orange:#F5821F;
      --orange-dark:#D96A0F;
      --orange-soft:#FDEAD6;
      --white:#FFFFFF;
      --shadow-card:0 20px 40px -22px rgba(46,42,37,0.35);
      --shadow-lift:0 26px 48px -20px rgba(46,42,37,0.4);
    }
    *{box-sizing:border-box;}
    html,body{margin:0;padding:0;}
    body{font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;color:var(--ink);background:var(--paper);}
    h1,h2,h3{font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;margin:0;letter-spacing:-0.01em;}
    p{margin:0;}
    img{display:block;}
    a{color:var(--orange-dark);text-decoration:none;}
    a:hover{color:var(--orange);}

    /* ヘッダー内メニュー(特徴・使い方・料金・よくある質問)から
       ページ内の該当セクションへ飛んだとき、position:sticky のヘッダー
       (高さ約67px)の下に見出しが隠れてしまうのを防ぐ。
       ログイン中は、さらにWP管理バー(PC:32px/モバイル:46px)の分も
       余分に確保する(WP管理バーはposition:fixedで、ブラウザ標準の
       アンカー移動はその存在を考慮してくれないため)。 */
    html{scroll-padding-top:80px;}
    html.admin-bar{scroll-padding-top:112px;}
    @media screen and (max-width:782px){
      html.admin-bar{scroll-padding-top:126px;}
    }
    /* ヘッダー自体も、WP管理バーの下に隠れず正しい位置でsticky表示されるように */
    .admin-bar header{top:32px;}
    @media screen and (max-width:782px){
      .admin-bar header{top:46px;}
    }

    @keyframes floatUp{0%,100%{transform:translateY(0px);}50%{transform:translateY(-18px);}}
    @keyframes floatDown{0%,100%{transform:translateY(0px);}50%{transform:translateY(16px);}}
    @media (prefers-reduced-motion: reduce){
      *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
    }

    .nav-link{position:relative;display:inline-block;color:var(--ink);font-size:14.5px;font-weight:500;padding-bottom:3px;}
    .nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--orange);border-radius:2px;transition:right .2s ease;}
    .nav-link:hover{color:var(--orange-dark);}
    .nav-link:hover::after{right:0;}

    .btn-primary{
      display:inline-flex;align-items:center;gap:8px;
      background:var(--orange);color:#fff;
      padding:14px 28px;border-radius:999px;
      font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:15.5px;
      box-shadow:0 14px 28px -12px rgba(245,130,31,0.65);
      transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
      white-space:nowrap;
    }
    .btn-primary:hover{background:var(--orange-dark);color:#fff;transform:translateY(-2px);box-shadow:0 18px 32px -12px rgba(217,106,14,0.55);}
    .btn-primary:hover .btn-arrow{transform:translateX(4px);}
    .btn-primary.small{padding:10px 20px;font-size:13.5px;box-shadow:none;}
    .btn-primary.large{padding:18px 40px;font-size:18px;}

    .btn-onorange{
      display:inline-flex;align-items:center;gap:8px;
      background:#fff;color:var(--orange-dark);
      padding:18px 40px;border-radius:999px;
      font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:18px;
      transition:transform .15s ease, box-shadow .15s ease;
      box-shadow:0 16px 30px -14px rgba(0,0,0,0.35);
    }
    .btn-onorange:hover{transform:translateY(-2px);background:#FFF3E6;}
    .btn-onorange:hover .btn-arrow{transform:translateX(4px);}
    .btn-arrow{transition:transform .2s ease;}

    .badge-pill{
      display:inline-flex;align-items:center;gap:6px;
      background:var(--orange-soft);color:var(--orange-dark);
      font-size:13px;font-weight:700;padding:7px 16px;border-radius:999px;
    }

    .card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-card);}

    .faq-item{border-bottom:1px solid var(--line);}
    .faq-item summary{
      cursor:pointer;list-style:none;
      display:flex;align-items:center;justify-content:space-between;gap:16px;
      padding:22px 14px;margin:0 -14px;border-radius:14px;
      font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:16.5px;
      transition:background .15s ease;
    }
    .faq-item summary:hover{background:var(--paper-alt);}
    .faq-item summary::-webkit-details-marker{display:none;}
    .faq-item .chev{transition:transform .2s ease;color:var(--orange-dark);flex-shrink:0;}
    .faq-item[open] .chev{transform:rotate(180deg);}
    .faq-item .faq-a{padding:0 14px 22px;color:var(--muted);font-size:15px;line-height:1.9;}

    .feature-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 24px;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
    .feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:transparent;}
    .feature-icon{transition:background .22s ease, color .22s ease, transform .22s ease;}
    .feature-card:hover .feature-icon{background:var(--orange);color:#fff;transform:rotate(-6deg) scale(1.06);}

    .step-col{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;transition:transform .22s ease;}
    .step-col:hover{transform:translateY(-4px);}
    .step-num{
      position:relative;font-family:'Zen Maru Gothic',sans-serif;font-size:40px;font-weight:900;
      color:var(--line-soft);line-height:1;z-index:0;user-select:none;margin-bottom:2px;
    }
    .step-icon-solid{
      position:relative;z-index:1;width:60px;height:60px;border-radius:50%;margin-bottom:8px;
      background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;
      box-shadow:0 16px 26px -10px rgba(245,130,31,0.55);transition:transform .25s ease;
    }
    .step-col:hover .step-icon-solid{transform:scale(1.08) rotate(-6deg);}

    .grain{position:relative;isolation:isolate;}
    .grain::before{
      content:"";position:absolute;inset:0;z-index:5;opacity:0.05;mix-blend-mode:multiply;pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .hero-highlight{position:relative;display:inline-block;}
    .hero-highlight .squiggle{position:absolute;left:2px;right:2px;bottom:-8px;width:calc(100% - 4px);height:14px;}
  
/* =====================================================================
   マイソク作成ページ用: mysoku-generator プラグインが出力するフォーム
   (.mysoku-gen-wrap 以下)を、TOPページと同じトンマナに合わせるための上書き。
   プラグイン側のHTML構造・クラス名は変更していません(CSSのみ)。
   ===================================================================== */

.mysoku-gen-wrap { font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif; color:var(--ink); }

.mysoku-gen-wrap fieldset{
  margin:0 0 28px;
  padding:0 0 28px;
  border:none;
  border-bottom:1px solid var(--line);
}
.mysoku-gen-wrap fieldset:last-of-type{ border-bottom:none; padding-bottom:0; }

.mysoku-gen-wrap legend{
  font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:16.5px;
  color:var(--ink);
  padding:0 0 14px;
  margin-bottom:6px;
}

.mysoku-gen-hint{
  font-size:13px;
  color:var(--muted);
  line-height:1.8;
  margin:0 0 16px;
  background:var(--paper-alt);
  border-radius:12px;
  padding:12px 14px;
}

.mysoku-gen-field{ margin-bottom:16px; }
.mysoku-gen-field label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:6px;
}

.mysoku-gen-field input[type=text],
.mysoku-gen-field input[type=file],
.mysoku-gen-field textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  font-family:inherit;
  font-size:14.5px;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.mysoku-gen-field input[type=file]{ padding:9px 12px; background:var(--paper-alt); }
.mysoku-gen-field textarea{ resize:vertical; min-height:88px; }

.mysoku-gen-field input[type=text]:focus,
.mysoku-gen-field textarea:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 0 3px var(--orange-soft);
}

.mysoku-gen-submit{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--orange);
  color:#fff;
  font-family:'Zen Maru Gothic','Noto Sans JP',sans-serif;
  font-weight:700;
  font-size:16px;
  padding:16px 36px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 14px 28px -12px rgba(245,130,31,0.65);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mysoku-gen-submit:hover{
  background:var(--orange-dark);
  transform:translateY(-2px);
  box-shadow:0 18px 32px -12px rgba(217,106,14,0.55);
}

/* フォームの親要素(固定ページ本文)にテーマ標準の見出し余白等が入るテーマ対策 */
.mysoku-gen-wrap p{ margin:0; }


/* =====================================================================
   スクロールでフェードイン(reveal)
   assets/theme.js が IntersectionObserver で .reveal 要素を監視し、
   画面に入ったタイミングで .is-visible を付与する。
   JS無効時やアニメーション無効設定時は、最初から通常表示にする
   (theme.js側でも同様のフォールバックを入れている)。
   ===================================================================== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
/* JSが読み込めなかった場合の保険:sugusoku-js-ready が付かなければ
   最初から表示する(コンテンツが永久に消えたままになるのを防ぐ) */
html:not(.sugusoku-js-ready) .reveal{
  opacity:1;
  transform:none;
  transition:none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* =====================================================================
   モバイル表示調整
   TOPページの各セクションは横幅前提のグリッド/フレックスをインライン
   styleで直接指定しているため、ここでは class を足したうえで
   !important を使って上書きする(インラインstyleに勝つため)。
   マイソク生成ページ(.mysoku-gen-wrap)側は元々1カラムのフォームなので
   大きな崩れはなく、フォント・余白の微調整のみ。
   ===================================================================== */
@media screen and (max-width:760px){
  /* ヘッダー: リンクが並びきらず折り返して崩れるため、ロゴとCTAだけ残す
     (padding/gap/display はいずれもHTML側のインラインstyleを上書きするため !important が必要) */
  .site-header-inner{padding:12px 18px !important;gap:10px !important;}
  .site-nav{display:none !important;}
  .btn-primary.small{padding:9px 16px;font-size:13px;}

  /* 各セクションの左右余白を狭める(上下の余白は維持) */
  section{padding-left:20px !important;padding-right:20px !important;}

  /* ヒーロー: 2カラム→1カラム、見出しを縮小 */
  .hero-grid{grid-template-columns:1fr !important;gap:32px !important;}
  .hero-title{font-size:28px !important;}

  /* 3ステップ: 横並び→縦並び、間の矢印は非表示 */
  .step-row{flex-direction:column !important;gap:28px !important;}
  .step-arrow{display:none !important;}

  /* 選ばれる理由: 4カラム→1カラム */
  .features-grid{grid-template-columns:1fr !important;}

  /* Before/After: 横並び→縦並び、矢印は下向きに回転 */
  .compare-row{flex-direction:column !important;gap:18px !important;}
  .compare-arrow{flex-direction:row !important;gap:10px !important;}
  .compare-arrow svg{transform:rotate(90deg);}
}