/* helper.css — ユーティリティ・ヘルパークラス */

/* WordPressのメニュー項目「ver.3.5」（別タブで開くリンク）には、
   ヘッダー・フッターとも矢印をCSSで付与する（「ver.3.5 ↗」）。 */
nav.main a[target="_blank"]::after,
footer.site nav a[target="_blank"]::after{content:" ↗";}

.page-concept main{padding-bottom:0;}
.nwt-player{position:relative;width:100%;padding-top:56.25%;margin-top:28px;border-radius:14px;overflow:hidden;background:#000;}
.nwt-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
.placeholder{
  border:1px dashed var(--border);
  border-radius:6px;
  padding:40px 20px;
  text-align:center;
  color:var(--muted);
}
@media (max-width:600px){
  .wrap{padding:0 25px;}
  nav.main{gap:12px;}
  nav.main a{font-size:13px;}
  h1.theme-headline{font-size:30px;}
  .hero .theme-headline{font-size:36px;line-height:1.5;}
  .card-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .card{display:block;text-align:center;padding:16px 10px;}
  .card-icon{width:44px;height:44px;margin:0 auto 8px;}
  .card-icon svg{width:26px;height:26px;}
  .card h3{font-size:15px;margin:0 0 4px;}
  .card p{font-size:12.5px;line-height:1.5;}
  .timeline{gap:20px;}
}

/* ------------------------------------------------------------------
 * SP時の余白調整（全体）
 * PCと同じ48px/40px級の余白がSPでも使われていたため、まとめて詰める。
 * helper.css は最後に読み込まれるので、同じ詳細度の指定はここが優先される。
 * ------------------------------------------------------------------ */
@media (max-width:700px){
  .wrap{padding:0 20px;}
  main{padding:32px 0 48px;}
  section{margin:36px 0;}

  /* 見出し・リード */
  h1.theme-headline{margin:8px 0 24px;}
  .page-lead{margin-bottom:28px;}
  .cta-row{margin-top:24px;}

  /* トップ */
  .hero-band{padding-bottom:36px;}

  /* プラン */
  .plan-grid{margin-top:20px;gap:16px;}
  .plan-card{padding:22px 18px;}

  /* 機能紹介 */
  .section-list{gap:20px;}
  .section-list-body{padding:18px;}
  .detail-section{margin-top:40px;padding-top:28px;}
  .detail-section h2{margin-bottom:20px;}

  /* コンセプト */
  .story-band{padding:40px 0;}
  .story-title{margin-bottom:20px;}

  /* FAQ */
  .faq-notice{padding:14px 16px;margin-bottom:24px;}
  .faq-list > li{padding:20px 0;}
  .faq-list h3{margin-bottom:12px;}
  .faq-qa{padding:0;}
  .faq-qa details summary{gap:10px;}
  /* 質問文1行目の中心（上から 2px + 24px/2）に合わせる */
  .faq-q-badge,.faq-toggle-icon{margin-top:2px;}
  .faq-answer{margin:4px 0 16px 34px;padding-right:0;font-size:15px;}

  /* トライアル・フォーム */
  .trial-form-block{margin-top:32px;}
  .wpcf7-form{padding:20px 16px;}

  /* 準備中ページ */
  .placeholder{padding:28px 16px;}

  /* フッター */
  footer.site{padding:32px 0;}
  footer.site .footer-inner{gap:16px;}
}

/* ------------------------------------------------------------------
 * SP時のタイポグラフィ調整（全体）
 * 見出しの行間がPCと同じ1.8で間延びしていたため詰め、h3相当の
 * サイズのばらつき（15〜20px）を17px前後にそろえる。
 *   本文 15px / 1.75、h1 28px、h2 20px、h3 17px、h4 16px
 * ------------------------------------------------------------------ */
@media (max-width:700px){
  body{font-size:15px;line-height:1.75;}

  /* 見出し共通：行間を詰める */
  main h1,main h2,main h3,main h4{line-height:1.45;}

  /* h1 */
  h1.theme-headline{font-size:28px;line-height:1.4;}
  .hero .theme-headline{font-size:34px;line-height:1.35;margin:4px 0 20px;}
  h1.theme-headline.plain{font-size:16px;line-height:1.75;}

  /* h2 */
  h2,.story-title{font-size:20px;margin-bottom:14px;}
  .detail-section h2{margin-bottom:16px;}

  /* h3 / h4 */
  .plan-card h3,.story-slide-body h3,.pillar-body h3,.faq-list h3{font-size:17px;}
  .plan-card h3{margin-bottom:10px;}
  .faq-list h3{margin-bottom:12px;}
  .story-slide-body h3{margin-bottom:8px;}
  .section-list h3{font-size:16px;margin-bottom:6px;}
  .detail-screen h4{font-size:16px;}

  /* 本文 */
  section > p,.about-band > .wrap > section > p{font-size:15px;}
  .page-lead{font-size:14.5px;line-height:1.75;}
  .story-slide-body p,.story p{font-size:14.5px;line-height:1.75;}
  .plan-card p{font-size:14px;line-height:1.75;margin-bottom:16px;}
  .card p{line-height:1.6;}

  /* ヒーロー */
  .hero p.hero-subtitle{font-size:17px;margin-bottom:6px;}
  .hero p.sub{font-size:15.5px;line-height:1.85;}

  /* ラベル */
  .eyebrow{margin-bottom:12px;}

  /* FAQ */
  .faq-question{font-size:15px;line-height:1.6;padding-top:2px;}
  .faq-answer{font-size:14.5px;line-height:1.8;}
  .faq-notice p{font-size:13px;}
}
@media (max-width:700px){
  .pillar-list li{gap:10px;padding:20px 0;}
  /* 数字の列幅を48px固定→26pxにして、本文に近づける */
  /* 見出し(h3: 17px × 1.45)の1行と同じ高さにして、数字と見出しの高さをそろえる */
  .pillar-num{flex:0 0 26px;font-size:26px;line-height:calc(17px * 1.45);}
  .pillar-tagline{font-size:14.5px;margin:0 0 6px!important;}
}

/* 機能紹介：機能一覧アコーディオン（SP時は内側の余白を詰める） */
@media (max-width:700px){
  .detail-category summary{padding:10px 14px;font-size:15px;}
  .detail-body{padding:14px 14px 2px;}
  .detail-screen{margin-bottom:16px;}
  .detail-screen h4{margin:20px 0 6px;}
  .detail-screen:first-child h4{margin-top:0;}
  .detail-table tr{padding:8px 0;}
  .detail-table th{font-size:13.5px;}
  .detail-table td{font-size:13.5px;line-height:1.75;}
}

/* ------------------------------------------------------------------
 * WordPress管理バー（ログイン時のみ）を画面の一番下に固定する。
 * 上部の固定ヘッダーと重ならないようにするため。
 * ------------------------------------------------------------------ */
body.admin-bar #wpadminbar{position:fixed;top:auto;bottom:0;}
body.admin-bar #wpadminbar .ab-sub-wrapper{top:auto;bottom:100%;}
body.admin-bar{padding-bottom:32px;}
@media screen and (max-width:782px){
  body.admin-bar{padding-bottom:0;}
}

/* トップのカード：文節単位の改行（layout.css）が収まるよう左右余白を少し詰める。
   360px以下はカード幅が狭すぎて文節が入りきらないため、通常の折り返しに戻す。 */
@media (max-width:600px){
  .card{padding:16px 8px;}
}
@media (max-width:360px){
  .card p .phrase{display:inline;}
}

/* 360px以下：ページ見出し（h1）が1行に収まるよう少しだけ小さくする */
@media (max-width:360px){
  h1.theme-headline{font-size:26px;}
}

/* 黒い文字のリンクは、ホバーで青（ナビの現在地と同じ #6180e5）にする */
nav.main a,
footer.site nav a,
footer.site .copy a,
.form-agree a{transition:color .15s ease;}
nav.main a:hover,
footer.site nav a:hover,
footer.site .copy a:hover,
.form-agree a:hover{color:#6180e5;}

/* アコーディオン（FAQ・機能紹介の機能一覧）も、ホバーで見出しと＋／−を青にする */
.faq-qa details summary .faq-question,
.faq-qa details summary .faq-toggle-icon,
.detail-category summary,
.detail-category summary::after{transition:color .15s ease;}
.faq-qa details summary:hover .faq-question,
.faq-qa details summary:hover .faq-toggle-icon,
.detail-category summary:hover,
.detail-category summary:hover::after{color:#6180e5;}

/* ------------------------------------------------------------------
 * トップ：ファーストビューの背景（グラデーション）をヘッダーの下まで広げる
 * スクロール前はヘッダーを透明にし、スクロールしたら（.scrolled）白に戻す。
 * hero-band を「body の padding-top + main の padding-top」分だけ上に広げ、
 * 同じ分だけ padding-top を足して中身の位置は変えない。
 * ------------------------------------------------------------------ */
body.home header.site{transition:border-color .2s ease,background-color .2s ease;}
body.home header.site:not(.scrolled){background-color:transparent;}
body.home .hero-band{margin-top:-118px;padding-top:118px;}          /* 70 + 48 */
@media (max-width:999px){
  body.home .hero-band{margin-top:-102px;padding-top:102px;}        /* 54 + 48 */
}
@media (max-width:700px){
  body.home .hero-band{margin-top:-86px;padding-top:60px;}          /* 54 + 32 */
}