@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* ===== 見出し・本文の折り返し（2026-09-09 追加。サイト全体に効く） =====
   スマホで、見出しが変なところで切れないようにするための設定。
   word-break:auto-phrase … 日本語の文節（意味のかたまり）で折り返す
   text-wrap:balance      … 見出しの行の長さをそろえる
   text-wrap:pretty       … 最後の1行に1語だけ残るのを防ぐ（本文向け）
   ※ 対応していないブラウザは、この指定を読み飛ばすだけなので害はない */
h1, h2, h3, h4, h5,
.entry-title, .archive-title, .page-title,
.article h1, .article h2, .article h3, .article h4,
.widget-title, .sidebar h3, .footer-title, .entry-card-title, .related-entry-card-title,
.nagi h1, .nagi h2, .nagi h3, .nagi .card h3, .nagi .fc-title, .nagi .merit b, .nagi .ec-name {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: balance;
}

p, li, dd, figcaption,
.entry-content p, .entry-card-snippet,
.nagi .lead, .nagi .sec-lead, .nagi .closing, .nagi .card p, .nagi .merit, .nagi .todo-box, .nagi .c-lead {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

/* 長いURLなどが画面からはみ出さないように */
body { overflow-wrap: break-word; }

/* スマホでは、見出しの行間を少し詰めて読みやすく */
@media (max-width: 600px) {
  h1, h2, h3, .nagi h1, .nagi h2 { line-height: 1.55; }
}


/* ===== サイト全体の基本（2026-09-09）=====
   もとは「追加CSS（カスタマイズ）」にあったものを、ここに一本化した。
   色・フォント・文字の大きさ・リンクの色・記事の見出し。
   🔴 トップページだけの見た目は、固定ページ「TOP」（ID 867）の「カスタムCSS」欄にある。
   ここに混ぜないこと。card / wrap / btn という Cocoon と同じ名前を使っているため、
   サイト全体に出すと他のページが壊れる。 */
:root{
  --nagi-accent:#09a2ae;       /* 差し色（青緑）。1色だけ使う */
  --nagi-accent-dark:#0f8792;  /* 押したとき */
  --nagi-text:#333333;         /* 本文の文字 */
  --nagi-strong:#1a1a1a;       /* 見出しの文字 */
}
body{
  font-family:'Zen Kaku Gothic New','Hiragino Sans','Yu Gothic',Meiryo,sans-serif;
  color:var(--nagi-text);
  font-size:18px;
  line-height:1.95;
  background:#ffffff;
}
a{ color:var(--nagi-accent); }
a:hover{ color:var(--nagi-accent-dark); }
.entry-content h2{ font-size:28px;font-weight:700;border:none;background:none;padding:0;margin:2.2em 0 .8em;color:var(--nagi-strong); }
.entry-content h3{ font-size:22px;font-weight:700;border:none;background:none;padding:0;margin:1.8em 0 .6em;color:var(--nagi-strong); }
@media (max-width:768px){
  body{ font-size:17px; }
  .entry-content h2{ font-size:24px; }
  .entry-content h3{ font-size:20px; }
}

/* ===== スマホで、本文の幅を画面いっぱいにする（2026-09-09） =====
   Cocoonの設定が .main{width:67.4%} を出しているため、
   スマホでも本文が画面の67%しかなかった（375pxのとき253px）。
   タブレット以下では、幅いっぱいに戻す。 */
@media screen and (max-width: 834px) {
  #container .main { width: 100%; margin-left: 0; margin-right: 0; }
  #main .article { margin-left: 0; margin-right: 0; }
}

/* ===== ヘッダーを1段にする（ロゴ左・メニュー右）。全ページ共通（2026-09-09） =====
   もとは「ロゴの帯」と「メニューの帯」が上下2段で、合わせて209px使っていた。
   1段にして約60pxにする。スマホは今までどおり（ハンバーガーメニュー）。 */
.tagline{display:none}
#header-container{background:#fff;border-bottom:1px solid #e5e3e0}
@media screen and (min-width:835px){
  #header-container-in{display:flex;align-items:center;justify-content:space-between;max-width:1140px;margin:0 auto;padding:0 24px;gap:24px}
  #header{flex:0 0 auto;height:auto;min-height:0}
  #header-in{height:auto;min-height:0;padding:0;width:auto}
  #header .logo{padding:0;text-align:left;height:auto}
  #header .logo a{font-size:22px}
  #navi{flex:1 1 auto;background:transparent;border:none;height:auto;min-height:0}
  #navi-in{padding:0;width:auto;max-width:none}
  .menu-header{justify-content:flex-end;height:auto}
  .menu-header li a{height:auto;padding:12px 18px;line-height:1.4;font-size:15px}
  /* メニューの1つ1つを、細い縦線で区切る */
  .menu-header > li + li{border-left:1px solid #e5e3e0}
}

/* ===== アイキャッチの枠が、スマホで画面からはみ出していたのを直す（2026-09-09） =====
   固定ページにアイキャッチを設定していないと、テーマの見本画像（880px）が入ってしまい、
   スマホで横スクロールが起きていた。 */
.eye-catch-wrap.display-none{display:none}
.eye-catch img,.eye-catch-wrap img{max-width:100%;height:auto}
/* 念のため、画像と埋め込みが画面から出ないようにする */
img,video,iframe{max-width:100%}

/* メニューの文字が上に張り付いていたので、ロゴと同じ高さ（上下の真ん中）に揃える（2026-09-09） */
@media screen and (min-width:835px){
  .menu-header > li{display:flex;align-items:center}
  .menu-header > li > a{display:flex;align-items:center}
}

/* ロゴとメニューの高さが8pxずれていたので、両方を同じ高さにして真ん中で揃える（2026-09-09） */
@media screen and (min-width:835px){
  #header-container-in{align-items:stretch;min-height:60px}
  #header{display:flex;align-items:center}
  #header-in{display:flex;align-items:center}
  #navi{display:flex;align-items:center}
  #navi-in{display:flex;align-items:center;width:100%;justify-content:flex-end}
  .menu-header{align-items:stretch}
}

/* 上の指定がCocoonに負けていたので、#navi を付けて優先させる（2026-09-09） */
@media screen and (min-width:835px){
  #navi .menu-header > li{display:flex;align-items:center}
  #navi .menu-header > li > a{display:flex;align-items:center;padding-top:0;padding-bottom:0;height:100%}
}

/* ===== reCAPTCHAのバッジ（右下の回転マーク）を隠す（2026-09-09） =====
   🔴 隠すときは、Googleの決まりで「代わりの文言」を出す必要がある。
   その文言は、お問い合わせページのフォームの下に入れてある。
   機能（迷惑送信をふせぐ）はそのまま動いている。 */
.grecaptcha-badge{visibility:hidden!important}

/* ===== スマホで「ラシーモ」が2つ出ていたのを直す（2026-09-09） =====
   上のバー（メニュー｜ラシーモ｜検索）にサイト名が入っているので、
   その下のヘッダーロゴは要らない。パソコンでは今までどおり出る。 */
@media screen and (max-width:834px){
  #header .logo,#header .tagline{display:none}
  #header,#header-in{min-height:0;height:auto;padding:0;margin:0}
  #header-container{border-bottom:none}
}

/* ===== メニューが段落ちしないようにする（2026-09-09） =====
   Cocoonが1項目176pxで固定していたため、6個目が下に落ちていた。
   文字数に合わせた幅にして、1行に収める。 */
@media screen and (min-width:835px){
  #navi .menu-header > li{width:auto;flex:0 0 auto}
  #navi .menu-header > li > a{width:auto;padding:12px 15px;white-space:nowrap}
  /* サブメニュー（BLOGの下など）は今までどおり縦に開く */
  #navi .menu-header > li ul.sub-menu{width:220px}
  #navi .menu-header > li ul.sub-menu li{width:100%}
  #navi .menu-header > li ul.sub-menu li a{width:100%;white-space:normal;padding:11px 15px;line-height:1.5}
}

/* ===== ヘッダーとフッターのメニューを青緑の帯にする＋サブメニューの位置（2026-09-09） =====
   サブメニューが親メニューに重なって「BLOG」が見えなくなっていたので、真下に開くようにした。
   （原因＝ li を flex にしたことで、サブメニューの top が auto になっていた） */
#header-container{background:#09a2ae;border-bottom:none}
#header .logo a,#header .site-name-text,#header .site-name a,#header .logo{color:#fff}
#navi .menu-header > li > a{color:#fff}
#navi .menu-header > li + li{border-left-color:rgba(255,255,255,.30)}
#navi .menu-header > li > a:hover{background:rgba(255,255,255,.16);color:#fff}
@media screen and (min-width:835px){
  #navi .menu-header > li{position:relative}
  #navi .menu-header > li > .sub-menu{top:100%;left:0;background:#0f8792;border:none;box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
  #navi .menu-header .sub-menu li a{color:#fff;background:#0f8792;border:none}
  #navi .menu-header .sub-menu li a:hover{background:#09a2ae;color:#fff}
}
/* スマホの上と下のボタンも、同じ青緑にそろえる */
.mobile-menu-buttons{background:#09a2ae}
.mobile-menu-buttons a,.mobile-menu-buttons .menu-icon,.mobile-menu-buttons .menu-caption,.mobile-menu-buttons .item-label,.mobile-menu-buttons .site-name-text{color:#fff}
.mobile-menu-buttons a:hover,.mobile-menu-buttons a:active{background:rgba(255,255,255,.16);color:#fff}
/* フッターのメニュー */
#navi-footer,.navi-footer{background:#09a2ae}
#navi-footer .menu-footer a,.menu-footer a{color:#fff}
#navi-footer .menu-footer a:hover,.menu-footer a:hover{background:rgba(255,255,255,.16);color:#fff}

/* ===== スマホの上下のバーだけを白文字にする（2026-09-09 直し） =====
   前の指定がCocoonに負けて「ラシーモ」が黒のままだったので、詳細度を上げた。
   🔴 「> 」で直下だけに限定している。開いたメニュー（ドロワー）の中まで白にすると読めなくなるため。 */
ul.mobile-menu-buttons > li.menu-button > a,
ul.mobile-menu-buttons > li.menu-button > label,
ul.mobile-menu-buttons > li.menu-button > a .menu-caption,
ul.mobile-menu-buttons > li.menu-button > a .menu-icon,
ul.mobile-menu-buttons > li.menu-button > label .menu-caption,
ul.mobile-menu-buttons > li.menu-button > label .menu-icon,
ul.mobile-menu-buttons > li.logo-menu-button > a{color:#fff!important}
/* 開いたメニューの中は、今までどおり黒い文字のまま */
.mobile-menu-buttons .menu-content a,
.mobile-menu-buttons .menu-drawer a,
.mobile-menu-buttons .menu-content{color:#333333}

/* ===== 押してほしいボタンだけ、アクセント色にする（2026-09-09） =====
   ヘッダーが青緑になったので、ボタンも青緑だと沈んで見えなくなる。
   🔴 文字は白ではなく #333333。白だとコントラストが 2.69 で足りない（#333333なら 4.70 で合格）。
   マウスを乗せると明るいオレンジ（#f0973a）になる。 */
.nagi .btn.primary{background:#e77620;color:#333333;border:none}
.nagi .btn.primary:hover,.nagi .btn.primary:focus{background:#fc8e16;color:#333333}
.nagi .btn.primary .btn-sub{color:#4a3a20}
/* 白抜きのボタン（第2ボタン）は今までどおり青緑のまま */
.nagi .btn.ghost{border:2px solid #09a2ae;color:#0f8792;background:transparent}
.nagi .btn.ghost:hover{background:#e3f4f5;color:#0f8792}
/* 帯の上に置くボタンだけは白抜きに（背景が青緑なので） */
.nagi .goal .btn.primary,.nagi .cta-band .btn.primary{background:#e77620;color:#333333}

/* ===== 直し：ボタンの色とフッターの帯（2026-09-09） =====
   🔴 ボタンが青緑のままだったのは、ページごとのカスタムCSSが後から来て勝っていたため。
   このサイトの作り上、子テーマ側は !important を付けないと勝てない。 */
.nagi .btn.primary{background:#e77620!important;color:#333333!important;border:none!important}
.nagi .btn.primary:hover,.nagi .btn.primary:focus{background:#fc8e16!important;color:#333333!important}
.nagi .btn.primary .btn-sub{color:#4a3a20!important}

/* フッターのメニューが、中央の968pxだけ緑になって箱が並んで見えていたので、画面いっぱいの帯にする */
#navi-footer{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#09a2ae;padding:0}
#navi-footer .navi-footer-in{max-width:1140px;margin:0 auto;padding:0 20px}
#navi-footer .menu-footer{display:flex;flex-wrap:wrap;justify-content:center;margin:0;padding:0}
#navi-footer .menu-footer li{margin:0;background:transparent}
#navi-footer .menu-footer li a{background:transparent;border:none;padding:13px 16px;color:#fff;display:block}
#navi-footer .menu-footer li + li a{border-left:1px solid rgba(255,255,255,.3)}
#navi-footer .menu-footer li a:hover{background:rgba(255,255,255,.16);color:#fff}

/* ===== 直し2：フッターの帯が右にはみ出して横スクロールが出たので戻す（2026-09-09） =====
   原因＝入れ物（.footer-bottom-content）の幅が137pxしかない所で、
   「画面いっぱい」にしようとしたため。入れ物ごと幅いっぱいにするやり方に変えた。 */
#navi-footer{margin-left:0!important;margin-right:0!important;width:100%!important;background:#09a2ae}
.footer-bottom .footer-bottom-content{width:100%;flex:1 1 100%}
.footer-bottom{display:block}

/* ===== 直し3：ボタンは白文字に。そのぶん背景を濃くする（2026-09-09） =====
   #e38824 に白文字だとコントラスト比 2.69 で読みにくい。
   #c9741f まで濃くすると 3.40 になり、白文字でも読める（参考サイトは 3.19 だった）。
   マウスを乗せたときは、明るいオレンジ #e38824 に戻す。 */
.nagi .btn.primary{background:#e77620!important;color:#ffffff!important;border:none!important}
.nagi .btn.primary:hover,.nagi .btn.primary:focus{background:#e77620!important;color:#ffffff!important}
.nagi .btn.primary .btn-sub{color:#ffe9d2!important}

/* ===== 直し4：フッターを、ヘッダーと同じように画面いっぱいの帯にする（2026-09-09） =====
   「© 2022-2026 ラシーモ.」まで含めて緑にする。
   親（#footer-in）が1256pxあるので、左右に食い出させて全幅にできる。 */
#footer .footer-bottom{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#09a2ae;padding:0 0 14px}
#footer .footer-bottom .footer-bottom-logo,#footer .footer-bottom .copyright,#footer .footer-bottom .footer-bottom-content{color:#fff}
#footer .footer-bottom a{color:#fff}
#footer .footer-bottom .copyright{padding:0 20px}
#navi-footer{background:transparent!important}

/* ===== 直し5：フッターの帯を、横スクロールを出さない方法に変える（2026-09-09） =====
   50vw を使うとスクロールバーの分（7px）だけ右にはみ出す。
   影（box-shadow）で左右を塗ると、レイアウトを広げずに帯だけ伸ばせる。 */
#footer .footer-bottom{margin-left:0!important;margin-right:0!important;background:#09a2ae;
  box-shadow:-50vw 0 0 #09a2ae, 50vw 0 0 #09a2ae;padding:0 0 14px}

/* ===== 直し6：ボタンを明るいオレンジに戻す＋メニューの「体験セッション」をオレンジに（2026-09-09） =====
   本人の判断＝「暗くしたらサイトが辛気臭くなった。#e38824 のまま白文字が良い」。
   読みにくさを補うため、文字を太くして、うっすら影を付けている（見た目は変えずに輪郭を出す）。 */
.nagi .btn.primary{background:#e77620!important;color:#ffffff!important;border:none!important;
  font-weight:700;text-shadow:0 1px 2px rgba(120,60,0,.35)}
.nagi .btn.primary:hover,.nagi .btn.primary:focus{background:#fc8e16!important;color:#ffffff!important}
.nagi .btn.primary .btn-sub{color:#ffffff!important;text-shadow:0 1px 2px rgba(120,60,0,.35)}
/* 追従ボタンの中の「体験セッション」も同じ明るさに */
.nagi-fab-item.primary{background:#e77620;color:#ffffff;text-shadow:0 1px 2px rgba(120,60,0,.35)}
.nagi-fab-item.primary span{color:#fff6ec}
.nagi-fab-item.primary:hover{background:#fc8e16}

/* メニューの「体験セッション」だけ、オレンジのボタンにする */
@media screen and (min-width:835px){
  #navi .menu-header > li#menu-item-926{border-left:none;padding:0 0 0 8px}
  #navi .menu-header > li#menu-item-926 > a{background:#e77620;color:#ffffff;border-radius:999px;
    padding:10px 20px;font-weight:700;text-shadow:0 1px 2px rgba(120,60,0,.35);height:auto}
  #navi .menu-header > li#menu-item-926 > a:hover{background:#fc8e16;color:#ffffff}
}
/* スマホのドロワーの中でも目立たせる */
.menu-drawer li#menu-item-926 > a{background:#e77620;color:#ffffff!important;font-weight:700}


/* ===== 2026-09-09 深夜：配色を新しい決定に置き換えた =====
   #3f8f95 → #09a2ae（メインの青緑）
   #2e6e73 → #0f8792（濃いほうの青緑）
   #e38824 → #e77620（押してほしいボタン）
   #f0973a → #fc8e16（そのボタンにマウスを乗せたとき）
   🔴 上のコメント文に出てくる色番号は「置き換える前」のもの。読み替えてください。
   決めた理由と全体のルールは 配色ルール_20260909-223706_v1.md にあります。 */

/************************************
** 申し込みフォーム（Contact Form 7）の共通の見た目
** 2026-09-10 追加。サイト内のすべてのフォームに効く。
** 新しくフォームを作っても、何もしなくても同じ見た目になる。
** 入力欄：普段は薄いベージュの下地 / 入力中は白＋青緑の枠
** 送信ボタン：オレンジ #e77620・高さ56px・18px
** 🔴 .wpcf7 は Cocoon と名前がぶつからないので、ここに置いてよい。
************************************/
.wpcf7{max-width:640px;margin:0 auto;text-align:left}
.wpcf7 label{display:block;font-size:17px;color:#333333;margin:18px 0 8px;font-weight:700}
.wpcf7 p{font-size:16px;color:#555555;line-height:1.9;margin:6px 0 0}
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 textarea{width:100%;box-sizing:border-box;font-size:17px;padding:12px 14px;border:2px solid #e5e3e0;border-radius:8px;background:#fff8ef;color:#333333;transition:background .15s,border-color .15s,box-shadow .15s}
.wpcf7 input[type=date]{font-size:17px;padding:12px 14px;border:2px solid #e5e3e0;border-radius:8px;background:#fff8ef;color:#333333;max-width:210px;margin-right:8px;transition:background .15s,border-color .15s,box-shadow .15s}
.wpcf7 select{font-size:17px;padding:12px 14px;border:2px solid #e5e3e0;border-radius:8px;background:#fff8ef;color:#333333;max-width:260px;transition:background .15s,border-color .15s,box-shadow .15s}
.wpcf7 textarea{min-height:120px}
.wpcf7 input[type=text]:hover,
.wpcf7 input[type=email]:hover,
.wpcf7 input[type=tel]:hover,
.wpcf7 input[type=date]:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover{border-color:#c9c4bd;cursor:pointer}
.wpcf7 input[type=text]:focus,
.wpcf7 input[type=email]:focus,
.wpcf7 input[type=tel]:focus,
.wpcf7 input[type=date]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus{background:#ffffff;border-color:#09a2ae;box-shadow:0 0 0 3px rgba(9,162,174,0.18);outline:none}
.wpcf7 input[type=submit]{display:block;margin:32px auto 0;min-height:56px;padding:16px 40px;border:none;border-radius:999px;background:#e77620;color:#ffffff;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.wpcf7 input[type=submit]:hover{background:#fc8e16}
.wpcf7-not-valid-tip{color:#B72818;font-size:15px}
.wpcf7 .wpcf7-response-output{font-size:16px;border-radius:8px;padding:14px;margin:20px 0 0}
/* 完了ページへ飛ぶフォームだけ、画面内の完了メッセージを隠す */
[id^='wpcf7-f947'] form.sent .wpcf7-response-output{display:none}
@media(max-width:600px){
.wpcf7 input[type=date]{max-width:100%;margin-right:0}
.wpcf7 select{max-width:100%;margin-top:8px}
}

/* 必須・任意の印（2026-09-10）すべてのフォームに効く */
.wpcf7 .required{color:#B72818;font-size:15px;font-weight:700;margin:0 6px}
.wpcf7 .optional{color:#777777;font-size:15px;font-weight:400;margin:0 6px}

/* トップへ戻るボタンが、追従ボタン（.nagi-fab）の後ろに隠れないようにする（2026-09-10）
   追従ボタンは 下から20px・高さ52px なので、その上に逃がす。全ページに効く。 */
#go-to-top{bottom:86px;right:22px;z-index:9989}
@media(max-width:834px){#go-to-top{bottom:138px;right:14px}}

/* お客様の声（2026-09-10 吹き出しの形にした）
   トップと体験セッションの両方で使うのでここに置く。nagi-voice は Cocoon とぶつからない名前。
   HTMLの形：
   <div class="nagi-voice">
     <div class="v-icon"><img src="画像のURL" alt=""></div>   画像がまだ無いときは <div class="v-icon"></div> だけでよい（人のかたちが出る）
     <div class="v-body"> 見出しと本文 </div>
   </div> */
.nagi-voice{display:flex;align-items:flex-start;gap:20px;width:100%;max-width:760px;margin:0 auto 30px;padding:0;background:none;border:none;text-align:left;box-sizing:border-box}
/* 丸くトリミングした画像。画像が入っていないあいだは人のかたちが出る */
.nagi-voice .v-icon{position:relative;flex:0 0 88px;width:88px;height:88px;margin-top:10px;border-radius:50%;overflow:hidden;background:#9fd9dd}
.nagi-voice .v-icon img{display:block;width:100%;height:100%;object-fit:cover}
.nagi-voice .v-icon:before{content:"";position:absolute;left:50%;top:20%;width:32%;height:32%;background:#ffffff;border-radius:50%;transform:translateX(-50%)}
.nagi-voice .v-icon:after{content:"";position:absolute;left:50%;top:58%;width:58%;height:42%;background:#ffffff;border-radius:50% 50% 0 0;transform:translateX(-50%)}
.nagi-voice .v-icon:has(img):before,.nagi-voice .v-icon:has(img):after,.nagi-voice .v-icon.has-img:before,.nagi-voice .v-icon.has-img:after{content:none}
/* 吹き出しの本体 */
.nagi-voice .v-body{position:relative;flex:1 1 auto;min-width:0;background:#ffffff;border:3px solid #09a2ae;border-radius:14px;padding:24px 28px;box-sizing:border-box}
.nagi-voice .v-body:before{content:"";position:absolute;left:-18px;top:43px;width:0;height:0;border-style:solid;border-width:11px 18px 11px 0;border-color:transparent #09a2ae transparent transparent}
.nagi-voice .v-body:after{content:"";position:absolute;left:-11px;top:46px;width:0;height:0;border-style:solid;border-width:8px 14px 8px 0;border-color:transparent #ffffff transparent transparent}
.nagi-voice h3{font-size:20px;line-height:1.6;color:#0f8792;margin:0 0 16px;border:none;background:none;padding:0}
.nagi-voice p{font-size:17px;line-height:1.95;color:#333333;margin:0 0 14px}
.nagi-voice b{color:#0f8792}
.nagi-voice .v-name{font-size:15px;color:#777777;text-align:right;margin:18px 0 0}
.nagi-voice .v-note{font-size:14px;color:#777777;margin:14px 0 0}
/* 区画の左右に必ず余白を残す（吹き出しが画面の端にくっつかないように） */
section#sec-voice > .wrap,section#tai-voice > .wrap{padding-left:24px;padding-right:24px;box-sizing:border-box}
@media(max-width:600px){
.nagi-voice{display:block}
.nagi-voice .v-icon{flex:none;width:68px;height:68px;margin:0 0 12px 10px}
.nagi-voice .v-body{padding:20px 18px}
.nagi-voice .v-body:before{left:33px;top:-18px;border-width:0 11px 18px 11px;border-color:transparent transparent #09a2ae transparent}
.nagi-voice .v-body:after{left:36px;top:-11px;border-width:0 8px 14px 8px;border-color:transparent transparent #ffffff transparent}
.nagi-voice h3{font-size:18px}
.nagi-voice p{font-size:16px}
}
/* トップの「.nagi *」の余白リセットに打ち消されないよう、優先度を1段上げる */
.nagi .nagi-voice{margin:0 auto 30px}
.nagi .nagi-voice .v-icon{margin-top:10px}
.nagi .nagi-voice .v-body{padding:24px 28px}
.nagi .nagi-voice h3{margin:0 0 16px}
.nagi .nagi-voice p{margin:0 0 14px}
.nagi .nagi-voice .v-name{margin:18px 0 0}
.nagi .nagi-voice .v-note{margin:14px 0 0}
@media(max-width:600px){.nagi .nagi-voice .v-icon{margin:0 0 12px 10px}.nagi .nagi-voice .v-body{padding:20px 18px}}

/* 区画の見出しの3点セット（2026-09-11）：英語のラベル → オレンジの短い線 → 見出し。配色ルール4章の決まり。
   .nagi の中で <span class="sec-label">Voice</span> + <h2>見出し</h2> と書けば、どのページでも同じ形になる。
   トップ（固定ページ867）のカスタムCSSにも同じ内容があるが、あちらが後に読まれて勝つので見た目は変わらない */
.nagi .sec-label{display:block;text-align:center;font-family:Outfit,'Zen Kaku Gothic New',sans-serif;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#09a2ae;margin:0 0 10px}
.nagi h2{font-size:40px;line-height:1.5;font-weight:700;text-align:center;color:#0f8792;margin:0 0 18px;border:none;background:none;padding:0}
.nagi h2::before{content:"";display:block;width:44px;height:4px;background:#e77620;margin:0 auto 18px;border-radius:2px}
@media(max-width:600px){.nagi h2{font-size:26px}}

/* 区画を「画像で見せる／文字で見せる」で切り替える（2026-09-11）。区画に sec-image か sec-text を付ける。
   HTMLの形：<section class="nagi block sec-image"><div class="wrap sec-imgblock"><img …></div><div class="wrap sec-textblock">文字版</div></section>
   画像は元の大きさより拡大しない（ぼやけないように）。スマホでは幅に合わせて縮む */
.nagi.sec-image .sec-textblock{display:none}
.nagi.sec-text .sec-imgblock{display:none}
.nagi .sec-imgblock{line-height:0;text-align:center}
.nagi .sec-imgblock img{display:inline-block;max-width:100%;height:auto}
section.nagi.block.sec-image{background:#ffffff;box-shadow:none;padding:40px 0}
/* 切り替え用の区画の直下に WordPress が作る空の <p>（目印コメントの包み・高さ35px）を隠す */
.nagi.sec-image > p,.nagi.sec-text > p{display:none}
@media(max-width:600px){section.nagi.block.sec-image{padding:24px 0}}
/* スマホ（767px以下）では、左右の余白（.wrap の 24px とテーマの本文枠 16px）を打ち消して画面の端まで広げる */
@media(max-width:767px){.nagi.sec-image .sec-imgblock{padding:0;width:calc(100% + 32px);max-width:none;margin-left:-16px;margin-right:-16px}}