@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* =========================================
	AI SEO Guide Lab : Base & Rhythm
	Theme: Cocoon Child
========================================= */
:root{
	--c-primary: #2563EB;
	--c-text: #0F172A;
	--c-bg: #FFFFFF;
	--c-muted: #64748B;      /* slate-500 */
	--c-border: #E5E7EB;     /* gray-200 */
	--c-surface: #F8FAFC;    /* slate-50 */
	--radius: 12px;
	--shadow: 0 2px 10px rgba(2,6,23,.06);
	/* リズム：見出し・段落の下余白を統一 */
	--space-xxs: .25rem;
	--space-xs: .5rem;
	--space-sm: .75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
}

html{ scroll-behavior:smooth; }
body{
	color: var(--c-text);
	background: var(--c-bg);
	line-height: 1.85;
	letter-spacing: .02em;
	word-break: break-word;
}

/* 共通マージン（本文内） */
.entry-content > * + *{ margin-top: var(--space-lg); }
/*.entry-content p{ margin-bottom: 0; }*/

.al-c{ text-align: center; }
.m0b{ margin-bottom: 0!important; }
.m2b{ margin-bottom: 2em!important; }
.m3t{ margin-top: 3em!important; }

p:empty { display: none; }

.footer-center .widget{ margin-bottom: 0!important; }
.footer-widgets, .footer-widgets-mobile{ font-size: 85%; margin-bottom: 0; }
.footer-widgets a, .footer-widgets-mobile a{
	display: inline-block;
	margin: 0 5px;
	text-decoration: none;
}
/* =========================================
	Headings（視認性アップ）
========================================= */
.entry-content h2,
.post h2{
	position: relative;
	margin: var(--space-xl) 0 var(--space-md);
	padding: .75rem 1rem .75rem 1rem;
	border: 1px solid var(--c-border);
	border-left: 6px solid var(--c-primary);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

/* h2バッジ */
.entry-content h2::before{
	content: "Section";
	position: absolute;
	top: -10px;
	left: 12px;
	background: var(--c-primary);
	color:#fff;
	font-size: .72rem;
	font-weight: 700;
	padding: .15rem .45rem;
	border-radius: 999px;
}

/* h3：下線＋背景のガイド */
.entry-content h3,
.post h3{
	position: relative;
	margin: var(--space-lg) 0 var(--space-sm);
	padding-bottom: .4rem;
	font-weight: 700;
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}
.entry-content h3::after{
	content:"";
	position:absolute;
	left:0; bottom:0;
	width: 88px; height:3px;
	background: var(--c-primary);
	border-radius: 3px;
	opacity:.9;
}

/* 小見出し補助 */
.entry-content h4{ font-weight:700; }

/* =========================================
	リンク（ホバー時の視認性）
========================================= */
.entry-content a{
	color: var(--c-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .15s ease, text-underline-offset .15s ease;
}
.entry-content a:hover{
	color: #1d4ed8; /* primary-700 */
	text-underline-offset: 4px;
}
/* =======================================
   外部リンク（target="_blank"）アイコン表示
   ======================================= */
.article a[target="_blank"]:not(.noicon):not(.sns-buttons a){
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
}

.article a[target="_blank"]:not(.noicon):not(.sns-buttons a)::before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f35d";        /* external-link-alt (FA5) */
	font-size: 0.85em;
	color: inherit;
	line-height: 1;
}

/* =========================================
	リスト（読みやすい行間・カスタム玉）
========================================= */
.entry-content ul{ padding-left: 1.2em; }
.entry-content li + li{ margin-top: .35rem; }

.entry-content ul.wpg-bullets{
	list-style: none;
	padding-left: 0;
}
.entry-content ul.wpg-bullets > li{
	position: relative;
	padding-left: 1.6rem;
}
.entry-content ul.wpg-bullets > li::before{
	content:"";
	position:absolute;
	left:0; top:.45em;
	width:.7rem; height:.7rem;
	border-radius: 4px;
	background: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.entry-content ul.nostyle,
.entry-content ol.nostyle{
	padding-left: 20px;
	list-style-type: none;
}
/* =========================================
	表（テーブル）
========================================= */
.entry-content table{
	width:100%;
	border-collapse: collapse;
	border: 1px solid var(--c-border);
	box-shadow: var(--shadow);
	border-radius: var(--radius);
	overflow: hidden;
}
.entry-content thead th{
	background: var(--c-surface);
	font-weight: 700;
}
.entry-content th,
.entry-content td{
	padding: .8rem 1rem;
	border-bottom: 1px solid var(--c-border);
}
.entry-content tbody tr:nth-child(2n){
	background: #FCFDFF;
}
.entry-content .table-wrap{
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--radius);
}

/* =========================================
	コード枠（WP標準/ブロック両対応）
========================================= */
.entry-content pre,
.wp-block-code{
	position: relative;
	background: #0b1220; /* 暗背景でコントラスト確保 */
	color: #E2E8F0;
	border-radius: var(--radius);
	padding: 1rem 1.2rem;
	box-shadow: var(--shadow);
	border: 1px solid rgba(148,163,184,.25);
	overflow: auto;
	line-height: 1.6;
}
.entry-content pre code{
	color: inherit; 
	background: transparent;
	white-space: pre-wrap !important;
}

/* 行番号風の余白オプション */
.wp-block-code.is-line-numbers{
	counter-reset: line;
}
.wp-block-code.is-line-numbers code{
	display: block;
}
.wp-block-code.is-line-numbers code > span{
	display: block;
	counter-increment: line;
}
.wp-block-code.is-line-numbers code > span::before{
	content: counter(line);
	display: inline-block;
	width: 2.2em;
	margin-right: .75em;
	text-align: right;
	opacity: .45;
}

/* コピーCTA（任意: HTML側で.btn-copyを置いたとき） */
.wp-block-code .btn-copy{
	position: absolute;
	top: 8px; right: 8px;
	font-size: .8rem;
	padding: .25rem .55rem;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 8px;
	color: #fff;
	backdrop-filter: blur(6px);
	cursor: pointer;
}

/* =========================================
	Flow（.wpg-flow の最終微調整）
	※PC2列固定は済とのこと。バッジ位置だけ最終調整
========================================= */
.wpg-flow{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}
@media (min-width: 992px){
	.wpg-flow{ grid-template-columns: 1fr 1fr; }
}
.wpg-flow .wpg-flow__item{
	position: relative;
	background: #fff;
	border:1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.1rem 1.1rem 1.1rem 3.2rem;
	min-height: 72px;
}
.wpg-flow .wpg-flow__num{
	position: absolute;
	left: 12px; top: 12px;
	width: 28px; height: 28px;
	display: grid; place-items: center;
	border-radius: 999px;
	background: var(--c-primary);
	color:#fff; font-weight:700; font-size:.9rem;
	box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
@media (max-width: 991.98px){
	.wpg-flow .wpg-flow__num{ left: 10px; top: 10px; }
}

/* =========================================
	FAQ（<section class="wpg-faq"> + <details>）
========================================= */
.wpg-faq{
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.wpg-faq details{
	border-top: 1px solid var(--c-border);
	background: #fff;
}
.wpg-faq details:first-of-type{ border-top:none; }
.wpg-faq summary{
	list-style: none;
	cursor: pointer;
	padding: .9rem 1rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: .6rem;
}
.wpg-faq summary::-webkit-details-marker{ display:none; }
.wpg-faq summary::before{
	content:"Q";
	display:inline-grid; place-items:center;
	width: 22px; height:22px; border-radius:999px;
	background: var(--c-primary); color:#fff; font-weight:700;
	font-size:.8rem;
}
.wpg-faq details[open] summary{
	background: var(--c-surface);
}
.wpg-faq .wpg-faq__a{
	padding: .9rem 1rem 1rem;
	border-top: 1px dashed var(--c-border);
	color: var(--c-text);
}
.wpg-faq .wpg-faq__a::before{
	content:"A";
	display:inline-grid; place-items:center;
	width: 22px; height:22px; border-radius:999px;
	background: #0EA5E9; color:#fff; font-weight:700;
	font-size:.8rem; margin-right:.5rem;
}

/* =========================================
	余白微調整（段落・引用・画像キャプション）
========================================= */
.entry-content blockquote{
	border-left: 4px solid var(--c-primary);
	background: var(--c-surface);
	padding: .9rem 1rem;
	border-radius: 8px;
}
.wp-caption{
	max-width: 100%;
	text-align: center;
	color: var(--c-muted);
}

/* =========================================
	関連記事（CSS。PHPは下記）
========================================= */
.wpg-related{
	margin-top: var(--space-xl);
}
.wpg-related__title{
	display:flex; align-items:center; gap:.5rem;
	font-weight:700; margin-bottom: .75rem;
}
.wpg-related__title::before{
	content:"";
	width: 16px; height:16px; border-radius:4px;
	background: var(--c-primary);
	box-shadow: 0 0 0 6px rgba(37,99,235,.12);
}
.wpg-related__grid{
	display:grid; grid-template-columns: 1fr;
	gap: .9rem;
}
@media (min-width: 700px){
	.wpg-related__grid{ grid-template-columns: repeat(3,1fr); }
}
.wpg-related__card{
	display:block;
	border:1px solid var(--c-border);
	border-radius: 10px;
	overflow:hidden;
	background:#fff;
	box-shadow: var(--shadow);
	transition: transform .12s ease, box-shadow .12s ease;
}
.wpg-related__card:hover{
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(2,6,23,.10);
}
.wpg-related__thumb{
	aspect-ratio: 16/9;
	object-fit: cover;
	width:100%;
	background:#EFF6FF;
}
.wpg-related__meta{
	padding:.7rem .8rem;
}
.wpg-related__meta .ttl{
	font-weight:700; line-height:1.5;
	font-size:.95rem; margin:0;
}
.wpg-related__meta .cat{
	display:inline-block;
	margin-top:.35rem; font-size:.78rem;
	color: var(--c-muted);
}


/************************************
** 見出しデザイン（統合版）
************************************/

/* h2大見出し */
.entry-content h2 {
  position: relative;
  font-size: 1.8rem;                   /* 少し大きめ */
  margin: 3em 0 1.2em;                 /* 上下余白広め */
  padding-top: 20px;
  padding-left: 14px;
  line-height: 1.35;
  border-left: 8px solid #2563EB;      /* 太めブルーライン */
  color: #0F172A;                      /* 濃い文字色 */
  font-weight: 800;                    /* 太字を強調 */
  background: linear-gradient(90deg, rgba(37,99,235,.10), rgba(37,99,235,0) 60%); /* うっすら帯 */
  border-radius: 6px 0 0 6px;
  scroll-margin-top: 84px;             /* 目次ジャンプ時に隠れ防止 */
}

/* h3中見出し */
.entry-content h3 {
  position: relative;
  font-size: 1.4rem;
  margin: 2.2em 0 1em;
  padding-left: 12px;
  line-height: 1.4;
  border-left: 5px solid #2563EB;
  color: #0F172A;
  font-weight: 700;
}

/* h4小見出し（補足用） */
.entry-content h4 {
  font-size: 1.1rem;
  margin: 1.5em 0 0.8em;
  padding: 4px 8px;
  background: #F0F7FF;                /* 薄いブルー背景 */
  border-left: 3px solid #2563EB;
  font-weight: 500;
  color: #0F172A;
}
.entry-content h4 {
	font-size: 1rem;
	margin: 1.4em 0 1em;
	padding: 8px;
	border-left: 0 none;
	border-top-width: 1px;
	background: none;
	font-weight: 600;
	color: #374151;
}

/* ============ wpg-flow 番号バッジの位置調整 ============ */
.wpg-flow{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列固定 */
  gap: 16px;
}

.wpg-flow .flow-step{
  position: relative;                 /* バッジの基準にする */
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: 16px 14px 14px 14px;       /* バッジと見出しの余白 */
}

/* 見出しと本文の間隔を微調整（任意） */
.wpg-flow .flow-step h3{
  margin: 6px 0 8px;
  font-size: 1.05rem;
}

/* 番号バッジ */
.wpg-flow .flow-num{
  position: absolute;
  top: -12px;                         /* カードに少し重ねる演出 */
  left: -12px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: #2563EB;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  line-height: 1;                     /* Safari対策 */
  z-index: 1;
}

.cta-actions{ margin: 2em 10px; }
.cta-actions .cta-note{ margin-top: 1em; }

/* ---- Primary Button (link→ボタン化) ---- */
.entry-content a.wpg-btn,
.entry-content a.button,
.entry-content a.btn,
.entry-content .wp-element-button,
.entry-content .wp-block-button .wp-block-button__link{
	display:inline-block;
	background:#2563EB !important;
	color:#fff !important;
	border:1px solid #1e4fd2 !important;
	border-radius:12px !important;
	padding:.9rem 1.15rem !important;
	line-height:1.2 !important;
	font-weight:700 !important;
	text-decoration:none !important;
	box-shadow:0 6px 18px rgba(37,99,235,.25) !important;
	transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

/* hover/focus */
.entry-content a.wpg-btn:hover,
.entry-content a.button:hover,
.entry-content a.btn:hover,
.entry-content .wp-element-button:hover,
.entry-content .wp-block-button .wp-block-button__link:hover{
	background:#1d4ed8 !important;
	transform:translateY(-1px);
	box-shadow:0 10px 22px rgba(2,6,23,.18) !important;
}
.entry-content a.wpg-btn:focus-visible{ outline:2px solid #93C5FD; outline-offset:2px; }

/* 特大サイズ（任意）：wpg-btn--xl を併用 */
.entry-content a.wpg-btn.wpg-btn--xl{ font-size:clamp(1rem,2.5vw,1.125rem); padding:1.05rem 1.3rem !important; }

/* 段落中に置いた時の窮屈さ改善 */
.entry-content .wp-block-buttons,
.entry-content .wp-block-button{ margin:.5rem 0 1rem; }
@media (max-width:599px){
	.entry-content .wp-block-button{ width:100%; }
	.entry-content .wp-block-button .wp-block-button__link{ width:100%; text-align:center; }
}

/* h2はそのまま。h2の直後がFAQなら余白だけ詰める */
.entry-content h2 + .wpg-faq{ margin-top:.6rem !important; }

/* FAQボックスの角丸と内側の揃えを微調整 */
.wpg-faq{ margin-top: 3em; border-radius:12px; overflow:hidden; }
.wpg-faq h2:first-child{ margin: 0; padding-top: .75rem; }
.entry-content .wpg-faq h2::before{ content: none; }
.wpg-faq details:first-of-type summary{ border-top-left-radius:12px; border-top-right-radius:12px; }
.wpg-faq details:last-of-type,
.wpg-faq details:last-of-type .wpg-faq__a{ border-bottom-left-radius:12px; border-bottom-right-radius:12px; }

/* アイコンとテキストの baseline ズレを解消 */
.wpg-faq summary, .wpg-faq .wpg-faq__a{ display:flex; align-items:center; gap:.6rem; }
.wpg-faq details p{ margin: 1em; }

/* モバイルの左右パディング */
@media (max-width:599px){
	.wpg-faq summary, .wpg-faq .wpg-faq__a{ padding-left:.9rem; padding-right:.9rem; }
}

/* ===========================
  Author Box
  ( <section class="wpg-author"> )
=========================== */
.wpg-author{
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem 1.5rem;
	margin-top: 2rem;
	border: 1px solid var(--c-border, #E5E7EB);
	border-radius: 12px;
	background: var(--c-surface, #F8FAFC);
	box-shadow: 0 2px 10px rgba(2,6,23,.06);
}

/* 著者画像 */
.wpg-author img{
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.08);
	flex-shrink: 0;
}

/* テキスト部分 */
.wpg-author .author-name{
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--c-text, #0F172A);
	margin: 0 0 .25rem;
}

.wpg-author .author-bio{
	margin: 0;
	color: var(--c-muted, #64748B);
	font-size: .9rem;
	line-height: 1.6;
}

/* モバイル調整 */
@media (max-width: 600px){
	.wpg-author{
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
	.wpg-author img{
		width: 64px;
		height: 64px;
	}
}

/* ===========================
  補足情報・例え
=========================== */
.wpg-box.wpg-sub {
	background: #f6f6f6;
	border-left: 4px solid #d1d5db;
	padding: 1.2em 1.5em;
	margin: 1.8em 0;
	border-radius: 8px;
}
.wpg-box.wpg-sub .box-title {
	font-weight: 700;
	margin-bottom: .6em;
	color: #4b5563;
}
.wpg-sub{
	font-size: .95rem;
	color: #4b5563;
}
.wpg-example {
	background: #f9f9f9;
	border-left: 3px solid #ccc;
	padding: .8em 1em;
	margin: 1.2em 0;
	font-style: italic;
	color: #555;
}
.wpg-risksection p{
	margin-bottom: 1em!important;
}
.wpg-risksection .wpg-box.wpg-sub{
	margin-bottom: 3.5em!important;
}
/* ===========================
   HR Divider（区切り線）
=========================== */
.entry-content hr{
	border: none;
	height: 2px;
	margin: 2.5rem auto;
	max-width: 240px;
	position: relative;
	background: linear-gradient(to right,
		transparent,
		#2563EB,
		transparent
	);
	border-radius: 2px;
	opacity: .9;
}

/* ===========================
   固定ページ日付非表示
=========================== */
.page .date-tags{
	display: none;
}
.page h1{
	margin-bottom: 1em;
	padding-bottom: .5em;
	border-bottom: 1px solid #eee;
}

/* 中央に小さなアイコン風の装飾 */
.entry-content hr::after{
	content: "✦"; /* ←好みで変更可 */
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	color: #2563EB;
	font-size: 1rem;
	font-weight: 700;
	padding: 0 .5rem;
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  .entry-content h2 { font-size: 1.6rem; margin-top: 2.4em; }
  .entry-content h3 { font-size: 1.25rem; }

  .wpg-flow {
	grid-template-columns: 1fr;
  }

  .wpg-flow .flow-num{
    top: -10px; left: -10px; width: 28px; height: 28px; font-size: .9rem;
  }
}

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

/* =========================================
   Simple Page Wrapper (汎用) - 見出しの落ち着いたトーン
   ページ先頭に <div class="page-simple is-gray"> を付与
========================================= */

/* ---- ベース（ラッパー） ---- */
.page-simple { --ps-accent: var(--c-primary, #2563EB); --ps-muted: var(--c-border, #E5E7EB); }

/* 既存の .entry-content h2/h3 をこのページ内だけリセット＆上書き */
.entry-content .page-simple h2,
.entry-content .page-simple h3{
	position: static;
	background: none;
	box-shadow: none;
	border: none;
	padding: 0;
	margin: 2rem 0 .9rem;
	color: var(--c-text, #0F172A);
}

/* h2 の badge/::before を無効化（このページだけ） */
.entry-content .page-simple h2::before{ content: none !important; }

/* ---- h2：左ライン or ボトムラインの控えめデザイン ---- */
.entry-content .page-simple h2{
	font-weight: 700;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	padding-left: 10px;
	border-left: 4px solid var(--ps-accent);
}

/* ---- h3：細いボトムボーダーで落ち着かせる ---- */
.entry-content .page-simple h3{
	font-weight: 700;
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--ps-muted);
	display: inline-block; /* 下線が見出し幅で止まる */
}

/* ---- カラーバリエーション ---- */
/* 柔らかい薄青（デフォの主張を落とす） */
.page-simple.is-blue{ --ps-accent: #93c5fd; /* blue-300相当 */ --ps-muted: #e5e7eb; }
/* ニュートラルなグレー */
.page-simple.is-gray{ --ps-accent: #cbd5e1; /* slate-300相当 */ --ps-muted: #e5e7eb; }

/* ---- セクション余白やテーブル・リスト（任意：必要なら） ---- */
.entry-content .page-simple .ps-section{ margin: 2.2rem 0; }
.entry-content .page-simple .ps-list{ list-style: none; padding-left: 0; }
.entry-content .page-simple .ps-list > li{ position: relative; padding-left: 1.2em; margin: .4rem 0; }
.entry-content .page-simple .ps-list > li::before{
	content: "•"; position: absolute; left: 0; color: var(--ps-accent); font-weight: 700;
}
.entry-content .page-simple .ps-table table{
	width: 100%; border-collapse: collapse; font-size: .95rem;
}
.entry-content .page-simple .ps-table th,
.entry-content .page-simple .ps-table td{
	border: 1px solid var(--c-border, #E5E7EB); padding: 10px 12px; vertical-align: top;
}
.entry-content .page-simple .ps-table thead th{ background: var(--c-surface, #F8FAFC); font-weight: 700; }

/* モバイル微調整 */
@media (max-width: 640px){
	.entry-content .page-simple h2{ font-size: 1.25rem; }
	.entry-content .page-simple h3{ font-size: 1.1rem; }
}

/* =========================================
   page-simple：柔らかい強調バージョン
   .page-simple.is-highlight
========================================= */

.page-simple.is-highlight {
	--ps-accent: #2563eb;     /* メインカラー */
	--ps-accent-bg: #f3f6ff;  /* 柔らかい下地 */
	--ps-border: #dbe3f8;     /* 枠線 */
}

/* ---- h2：背景に淡い帯＋ボーダーで存在感 ---- */
.entry-content .page-simple.is-highlight h2 {
	position: relative;
	display: block;
	margin: 2.2rem 0 1rem;
	padding: 0.75rem 1rem;
	font-size: clamp(1.3rem, 2.4vw, 1.55rem);
	font-weight: 700;
	color: #0f172a;
	background: var(--ps-accent-bg);
	border-left: 5px solid var(--ps-accent);
	border-top: 1px solid var(--ps-border);
	border-bottom: 1px solid var(--ps-border);
	border-radius: 6px;
}

/* h2の下に少し余韻を出す細線 */
.entry-content .page-simple.is-highlight h2::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--ps-border);
}

/* ---- h3：シンプルなライン＋落ち着いたトーン ---- */
.entry-content .page-simple.is-highlight h3 {
	margin: 1.8rem 0 .8rem;
	padding-left: 10px;
	font-weight: 700;
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	color: #1e293b;
	border-left: 3px solid var(--ps-accent);
}

/* モバイル微調整 */
@media (max-width:640px){
	.entry-content .page-simple.is-highlight h2{
		font-size: 1.25rem;
		padding: 0.6rem .75rem;
	}
}

/* =========================================
   page-simple：淡いグレーバージョン
   .page-simple.is-lightgray
========================================= */

.page-simple.is-lightgray {
	--ps-accent: #94a3b8;      /* slate-400系の淡グレーライン */
	--ps-accent-bg: #f9fafb;   /* 下地グレー */
	--ps-border: #e2e8f0;      /* 輪郭線 */
}

/* ---- h2 ---- */
.entry-content .page-simple.is-lightgray h2 {
	position: relative;
	display: block;
	margin: 2.2rem 0 1rem;
	padding: 0.75rem 1rem;
	font-size: clamp(1.3rem, 2.4vw, 1.55rem);
	font-weight: 700;
	color: #0f172a;
	background: var(--ps-accent-bg);
	border-left: 5px solid var(--ps-accent);
	border-top: 1px solid var(--ps-border);
	border-bottom: 1px solid var(--ps-border);
	border-radius: 6px;
}

/* 下線（淡め） */
.entry-content .page-simple.is-lightgray h2::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 1px;
	background: var(--ps-border);
}

/* ---- h3 ---- */
.entry-content .page-simple.is-lightgray h3 {
	margin: 1.8rem 0 .8rem;
	padding-left: 10px;
	font-weight: 700;
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	color: #1e293b;
	border-left: 3px solid var(--ps-accent);
}

/* モバイル微調整 */
@media (max-width:640px){
	.entry-content .page-simple.is-lightgray h2{
		font-size: 1.25rem;
		padding: 0.6rem .75rem;
	}
}

/* =========================================
   Page Simple：フォーム（Fluent Forms調整）
   https://aiseo-guide.com/sponsor/
========================================= */

/* ラッパー全体 */
.page-simple .form-wrapper,
.page-simple .adpage-form {
	margin-top: 1.5rem;
	background: #f5f7fb;
	border: 1px solid #e6edf7;
	border-radius: 10px;
	padding: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.page-simple .adpage-form h3{
	margin: 0;
}
/* Fluent Forms 全体（段落ごとに余白） */
.page-simple .fluentform .ff-el-group {
	margin-bottom: 12px!important;
}

/* ラベル */
.page-simple .fluentform .ff-el-label label {
	font-weight: 600;
	color: var(--c-text, #0F172A);
	font-size: 0.95rem;
}

/* 入力欄・テキストエリア */
.page-simple .fluentform input[type="text"],
.page-simple .fluentform input[type="email"],
.page-simple .fluentform input[type="tel"],
.page-simple .fluentform select,
.page-simple .fluentform textarea {
	width: 100%;
	border: 1px solid var(--c-border, #E5E7EB);
	border-radius: 8px;
	padding: 9px 11px;
	background: #fff;
	color: var(--c-text, #0F172A);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* フォーカス時 */
.page-simple .fluentform input:focus,
.page-simple .fluentform textarea:focus,
.page-simple .fluentform select:focus {
	border-color: var(--c-primary, #2563EB);
	box-shadow: 0 0 0 2px rgba(37,99,235,.15);
	outline: none;
}

/* チェックボックスやラジオ */
.page-simple .fluentform .agree-center .ff-el-form-check label {
	font-weight: 500;
	color: var(--c-text, #0F172A);
}

/* page-simple 内の同意チェックを中央寄せ */
.page-simple .fluentform .agree-center .ff-el-form-check,
.page-simple .fluentform .agree-center .ff-el-form-check.ff_list_inline {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem;           /* チェックと文言の間隔 */
	text-align: center;   /* 複数行のときに中央揃え */
}
/* ラベルの折返しをキレイに */
.page-simple .fluentform .agree-center .ff-el-form-check label {
	display: inline-block;
	max-width: 100%;
}
/* （任意）行間を少しだけ詰める */
.page-simple .fluentform .agree-center .ff-el-form-check label span {
	line-height: 1.6;
}
.page-simple .fluentform .ff-el-group.pp_text {
	margin: 2.5em 0 .5rem !important;
}

/* 説明テキストやヘルプ */
.page-simple .fluentform .ff-el-help {
	color: var(--c-muted, #64748B);
	font-size: 0.85rem;
}

/* 区切り線 (HTMLブロックで <hr> を使う場合) */
.page-simple .fluentform hr {
	border: none;
	border-top: 1px solid var(--c-border, #E5E7EB);
	margin: 1.8rem 0;
}

/* ボタン */
.page-simple .fluentform .ff-btn {
	background: var(--c-primary, #2563EB);
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	padding: 10px 24px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
	box-shadow: 0 4px 10px rgba(37,99,235,.15);
}

/* ホバー時 */
.page-simple .fluentform .ff-btn:hover {
	background: #1d4ed8;
	transform: translateY(-1px);
}

/* 送信完了メッセージ */
.page-simple .fluentform .ff-message-success {
	border-radius: 8px;
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
	padding: 1rem 1.2rem;
}

/* エラーメッセージ */
.page-simple .fluentform .ff-message-error {
	border-radius: 8px;
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
	padding: 1rem 1.2rem;
}

/* モバイル調整 */
@media (max-width: 640px) {
	.page-simple .adpage-form {
		padding: 1rem;
	}
}

/* =========================================
   Fluent Forms チェックボックス・ラジオ見やすく調整
========================================= */

/* 質問タイトル（例：掲載希望メニュー） */
.page-simple .fluentform .ff-el-input--label {
	margin-bottom: 0;
}
.page-simple .fluentform .ff-el-input--label label {
	display: block;
	margin-bottom: 0;
	font-weight: 700;
	font-size: .96rem;
	color: var(--c-text, #0F172A);
}

/* 選択肢グループ全体に淡い背景と角丸を追加 */
.page-simple .fluentform .ff-el-input--content {
	padding: 8px 10px;
	border: 1px solid #e9eef5;
	border-radius: 8px;
	background: #fcfdff;
	margin: .3rem 0 12px;
}

/* 各選択肢のラベル（例：サイドバナーなど） */
.page-simple .fluentform .ff-el-form-check label {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-weight: 500;
	transition: color .2s ease;
}

/* hoverで少し青く */
.page-simple .fluentform .ff-el-form-check label:hover {
	color: var(--c-primary, #2563EB);
}

/* チェックマークとの間隔 */
.page-simple .fluentform .ff-el-form-check input[type="checkbox"],
.page-simple .fluentform .ff-el-form-check input[type="radio"] {
	margin-right: .3rem;
}

/* セクション見出し（HTMLブロックでh3等を置いている場合）- 余白詰め */
.page-simple .fluentform .ff-el-html h3{
	margin: 10px 0 8px;
	font-size: 1rem;
	border-left: 4px solid var(--ps-accent,#cbd5e1);
	padding-left:8px;
}
/* 同意エリアも圧縮＆中央寄せのまま */
.page-simple .fluentform .ff-el-form-check.ff_list_inline,
.page-simple .fluentform .ff-el-form-check{ margin: 4px 0; }
.page-simple .fluentform .agree-center{ 
	display:flex; justify-content:center; text-align:center; 
}
/* 送信ボタンまわりの間延びを抑える */
.page-simple .fluentform .ff_submit_btn_wrapper{ margin-top: 10px; }
.page-simple .fluentform .ff-btn{
	padding: 9px 20px;
	font-weight:700; font-size: .96rem;
}

/* スマホ時に余白を調整 */
@media (max-width:640px){
	.page-simple .adpage-form { padding: 10px; }
	.page-simple .fluentform .ff-el-input--content{ padding: 7px 9px; margin-bottom: 10px; }
}

/* =========================================
   チェックリストDLフォームの見やすさ強化
========================================= */
/* ===== [1] #optin-form セクション全体をボックス化 ===== */
.page-simple.is-lightgray #optin-form{
	max-width: 1000px;
	margin: 3em auto 2em;
	background: #f9fdfb;
	border: 1px solid #E5E7EB;
	border-radius: 14px;
	padding: 20px 24px 26px;
}

/* ===== [2] 見出し：緑の“控えめアクセント”に変更（ボタンと差別化） ===== */
.page-simple.is-lightgray #optin-form h2{
	margin: 0 0 .8em;
	padding-left: .8em;
	border-left: 6px solid #22C55E;
	background: #fff;
	color: #111827;
	font-weight: 800;
	text-align: left;
}

/* ===== [3] リード文（説明） ===== */
.page-simple.is-lightgray #optin-form > p{
	margin: .6em auto 1.2em;
	color: #374151;
	font-size: 1.1rem;
	line-height: 1.8;
}

/* ===== [4] フォーム本体：広めに。枠・影は消す ===== */
.page-simple.is-lightgray #optin-form .content_form{
	max-width: 840px;   /* 入力欄の実幅 */
	margin: 0 auto;
}
.page-simple.is-lightgray #optin-form .myForm{
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* ===== [5] 各フィールド ===== */
.page-simple.is-lightgray #optin-form .myForm .input_unit{
	margin-bottom: 1.4em;
}
.page-simple.is-lightgray #optin-form .myForm .form_input_label{
	display: block;
	margin-bottom: .35em;
	font-size: 1.35rem;
	font-weight: 600;
	color: #111827;
}

/* 入力欄（テキスト/メール） */
.page-simple.is-lightgray #optin-form .myForm input[type="text"],
.page-simple.is-lightgray #optin-form .myForm input[type="email"]{
	width: 100%;
	padding: 12px 14px;
	font-size: 1.6rem;
	background: #fff; 
	border: 1px solid #D1D5DB;
	border-radius: 10px;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
.page-simple.is-lightgray #optin-form .myForm input[type="text"]:focus,
.page-simple.is-lightgray #optin-form .myForm input[type="email"]:focus{
	outline: none;
	border-color: #22C55E;
	box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

/* チェックボックス */
.page-simple.is-lightgray #optin-form .myForm .checkbox_frame{
	display: flex; gap: 10px; align-items: flex-start; justify-content: center;
}
.page-simple.is-lightgray #optin-form .myForm input[type="checkbox"]{
	width: 18px; height: 18px; margin-top: 2px;
	accent-color: #22C55E; border-radius: 4px; cursor: pointer;
}
.page-simple.is-lightgray #optin-form .myForm .checkbox_label label{
	font-size: 1.1rem; color: #374151; cursor: pointer;
}

/* エラー表示（MyASPのvalidation.js想定） */
.page-simple.is-lightgray #optin-form .myForm input.error{
	border-color: #DC2626; background: #FEF2F2;
}
/* チェックボックス行だけ：赤背景クラスを打ち消す */
#optin-form input.required_color{
  background: #fff !important;
}
#optin-form .input.checkbox .my_column.my_right.required_color {
  background: transparent !important;
}
#optin-form .input.checkbox input.required_color {
  background: transparent !important;
}
.page-simple.is-lightgray #optin-form .myForm .error,
.page-simple.is-lightgray #optin-form .myForm .error-message{
	color: #B91C1C; font-size: 1.28rem; margin-top: .4em;
}

/* ===== [6] 送信ボタン：緑で主役、見出しと差別化済み ===== */
.page-simple.is-lightgray #optin-form .myForm .form_input_submit{
	margin-top: 1.6em; text-align: center;
}
.page-simple.is-lightgray #optin-form .myForm .form_input_submit input[type="submit"]{
	width: 100%;
	padding: 14px 22px;
	background: #22C55E;
	color: #fff; border: none; border-radius: 12px;
	font-size: 1.8rem; font-weight: 800; cursor: pointer;
	box-shadow: 0 6px 20px rgba(34,197,94,.22);
	transition: background .2s, box-shadow .2s, transform .08s;
}
.page-simple.is-lightgray #optin-form .myForm .form_input_submit input[type="submit"]:hover{
	background: #16A34A; box-shadow: 0 8px 26px rgba(22,163,74,.28);
}
.page-simple.is-lightgray #optin-form .myForm .form_input_submit input[type="submit"]:active{
	transform: translateY(1px);
}

/* ===== [7] 注意書き ===== */
.page-simple.is-lightgray #optin-form .wpg-note{
	max-width: 720px; margin: 1em auto 0;
	font-size: 1.35rem; color: #4B5563; text-align: left;
}

/* ===== [8] モバイル ===== */
@media (max-width: 640px){
	.page-simple.is-lightgray #optin-form{ padding: 16px; }
	.page-simple.is-lightgray #optin-form > p{ font-size: 1.45rem; }
	.page-simple.is-lightgray #optin-form .myForm .form_input_submit input[type="submit"]{ font-size: 1.6rem; }
}