/**************************************** 売れるSEO対策 common.css ****************************************/
/* デザイン方針
   ・ファーストビュー … 支給モックアップ（PC/SPファーストビュー.png）に準拠
   ・それ以外 ………… 参考サイト（esv）の設計言語に準拠
       - 余白を大きく取る（.contentarea 6vw）
       - 見出しは「小さな英字ラベル＋大きく細い和文見出し」
       - ボタンは角丸なしの四角・細ボーダー・ホバーで反転
       - 罫線は下線のみ、表は border-spacing で余白を作る
       - 配色は白とグレーを基調に、ブランド色を差し色として使う
   ・jQueryやフレームワークは使わない。構造化データは現行方針を継続。
*/

/*==================== デザイントークン ====================*/
:root{
	/* ブランド */
	--navy:      #14284b;   /* 見出し・ロゴの濃紺 */
	--navy-deep: #0e1c35;   /* フッター等の背景 */
	--blue:      #1273e6;   /* アクセント（青） */
	--blue-light:#17b0f5;   /* ロゴのグラデ明部 */
	--orange:    #ef7420;   /* CTA */
	--orange-dp: #e05a12;   /* CTAの濃い側 */

	/* グレースケール（esv準拠） */
	--ink:   #1a1a1a;
	--ink-2: #333;
	--ink-3: #666;
	--label: #a6a6a6;
	--line:  #ddd;
	--line-2:#e8e8e8;
	--bg-1:  #f7f8fa;
	--bg-2:  #f2f2f2;
}

/*==================== ベース ====================*/
html,body {font-size:0.9vw;margin:0;padding:0;background:#fff;}
body {font-family:"Zen Kaku Gothic New","Noto Sans JP","Roboto","Helvetica Neue","Helvetica",sans-serif;
	color:var(--ink);line-height:1.5em;-webkit-font-smoothing:antialiased;}
div,h1,h2,h3,h4,ul,li,dl,dt,dd,img {margin:0px; padding: 0px;}
ul {list-style: none; margin: 0px; padding:0px;}
p {margin: 0px; padding: 0px;}
a,a:visited {color:var(--ink); text-decoration: none;}
a:hover {color:var(--ink); text-decoration: underline;}
a img {border-style:none;}
input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
* {box-sizing:border-box;}
img {max-width:100%;}
.text-right {text-align:right;}
.text-center {text-align:center;}
.mincho {font-family:"游明朝",YuMincho,"Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝",serif;}
/*SP*/
@media (max-width: 896px){
	html,body {font-size:3.4vw;}
}

/*共通*/
@media (max-width: 896px){ .pc {display:none !important;} }
@media (min-width: 897px){ .sp {display:none !important;} }

/*パソコン設定*/
@media (min-width: 897px){
.col {}
.collist {display:flex; flex-wrap:wrap;}
.collist.reverse {flex-direction:row-reverse;}
.collist .inner {justify-content:space-between;}
.col .inner {float:left;}
.col .inner.right {float:right;}
.col2 .inner {width:50%;} .col3 .inner {width:33.3333%;} .col4 .inner {width:25%;} .col5 .inner {width:20%;}
.col6 .inner {width:16.6%;} .col7 .inner {width:14.2%;} .col8 .inner {width:12.5%;} .col9 .inner {width:11.1%;} .col10 .inner {width:10%;}
}

/*==================== レイアウト ====================*/
.contentarea {padding:6vw 5vw;}
.content {width:65vw;max-width:100%;margin:0px auto;}
.content.wide {width:90vw;}
.content.mini {width:50vw;}
.bg1 {background:var(--bg-1);}
.bg2 {background:var(--bg-2);}
/*SP*/
@media (max-width: 896px){
	.contentarea {padding:7vh 5vw;}
	.content, .content.wide, .content.mini {width:100%;}
}

/*==================== 見出し（esvの .heading パターン） ====================*/
/* 小さな英字ラベル → 大きく細い和文見出し → リード文 */
.heading {margin-bottom:3vw;}
.heading .label {font-size:0.95rem;font-weight:700;color:var(--label);
	letter-spacing:0.18em;text-transform:uppercase;display:block;margin-bottom:1.2rem;}
.heading h1,.heading h2 {font-size:3.2rem;font-weight:500;line-height:1.5em;color:var(--navy);letter-spacing:0.01em;}
.heading h3 {font-size:1.4rem;font-weight:500;color:var(--blue);margin-top:0.8rem;}
.heading p {font-size:1.1rem;line-height:2.0em;margin-top:1.5rem;color:var(--ink-2);}
.heading.center {text-align:center;}
/*SP*/
@media (max-width: 896px){
	.heading {margin-bottom:6vh;}
	.heading .label {font-size:1.0rem;margin-bottom:0.8rem;}
	.heading h1,.heading h2 {font-size:1.9rem;}
	.heading h3 {font-size:1.2rem;}
	.heading p {font-size:1.1rem;line-height:1.9em;}
}

.contentarea h2 {font-size:2.6rem;font-weight:500;line-height:1.5em;margin-bottom:0.8em;color:var(--navy);}
.contentarea p {font-size:1.1rem;line-height:2.0em;}
/*SP*/
@media (max-width: 896px){
	.contentarea h2 {font-size:1.8rem;}
	.contentarea p {font-size:1.1rem;line-height:1.9em;}
}

/*==================== ボタン（esv：角丸なし・反転ホバー） ====================*/
a.btn, span.btn {display:inline-block;text-align:center;padding:1.4em 3em;
	background:#fff;border:solid var(--navy) 1px;color:var(--navy);
	font-size:1.0rem;font-weight:700;line-height:1em;letter-spacing:0.04em;max-width:100%;
	cursor:pointer;transition:0.25s;}
a.btn:hover, span.btn:hover {text-decoration:none;background:var(--navy);color:#fff;border-color:var(--navy);}

/* 反転ボタン（濃色背景の上で使う） */
a.btn2, span.btn2 {display:inline-block;text-align:center;padding:1.4em 3em;
	background:transparent;border:solid #fff 1px;color:#fff;
	font-size:1.0rem;font-weight:700;line-height:1em;letter-spacing:0.04em;max-width:100%;
	cursor:pointer;transition:0.25s;}
a.btn2:hover, span.btn2:hover {text-decoration:none;background:#fff;color:var(--navy);}

/* CTAボタン（オレンジ） */
a.btn.cv, span.btn.cv {background:var(--orange);border-color:var(--orange);color:#fff;}
a.btn.cv:hover {background:var(--orange-dp);border-color:var(--orange-dp);color:#fff;}

/* 矢印つき */
a.btn.arrow::after {content:"";display:inline-block;width:0.45em;height:0.45em;margin-left:0.9em;
	border-top:solid currentColor 1px;border-right:solid currentColor 1px;transform:rotate(45deg) translateY(-0.1em);}

/*SP*/
@media (max-width: 896px){
	a.btn, span.btn, a.btn2, span.btn2 {font-size:1.1rem;padding:1.3em 2em;width:100%;}
}

/*==================== inview（esvのバリエーションを踏襲） ====================*/
.inview {opacity:0;transform:translateY(5vh);}
.inview.on {opacity:1;transform:translateY(0px);transition:1s;}
.inviewfade {opacity:0;}
.inviewfade.on {opacity:1;transition:1.2s;}
.inviewleft {opacity:0;transform:translateX(6vh);}
.inviewleft.on {opacity:1;transform:translateX(0px);transition:1s;}
.inviewright {opacity:0;transform:translateX(-6vh);}
.inviewright.on {opacity:1;transform:translateX(0px);transition:1s;}
/*SP*/
@media (max-width: 896px){
	.inviewleft, .inviewright {transform:translateX(0px) translateY(5vh);}
	.inviewleft.on, .inviewright.on {transform:translateX(0px) translateY(0px);}
}
.clear {clear:both;}

/*==================== AIO用共通パーツ ====================*/
/*要点カプセル（冒頭の直接回答ブロック）*/
.capsule {background:var(--bg-1);border-left:solid var(--blue) 3px;padding:2.5rem 3rem;margin:0 0 3.5rem 0;}
.capsule .capsule-label {font-size:0.9rem;font-weight:700;color:var(--blue);letter-spacing:0.18em;margin-bottom:1rem;}
.capsule p {font-size:1.15rem;line-height:2.1em;color:var(--navy);}
@media (max-width: 896px){
	.capsule {padding:1.8rem 1.5rem;margin-bottom:2.5rem;}
	.capsule p {font-size:1.05rem;line-height:1.95em;}
}

/*引用ブロック（名義人の実名コメント）*/
.voice {background:#fff;border-top:solid var(--orange) 2px;border-bottom:solid var(--line-2) 1px;
	padding:2.5rem 0.5rem;margin:3rem 0;}
.voice blockquote {margin:0;padding:0;}
.voice blockquote p {font-size:1.15rem;line-height:2.1em;color:var(--ink-2);}
.voice .voice-name {font-size:0.95rem;color:var(--ink-3);margin-top:1.5rem;text-align:right;letter-spacing:0.04em;}
@media (max-width: 896px){
	.voice {padding:1.8rem 0;}
	.voice blockquote p {font-size:1.05rem;}
}

/*表（esv：下線のみ・余白を大きく）*/
.tablewrap {overflow-x:auto;margin:2.5rem 0 3.5rem 0;-webkit-overflow-scrolling:touch;}
table.data {width:100%;border-collapse:collapse;font-size:1.0rem;background:transparent;min-width:34rem;}
table.data th, table.data td {border-bottom:solid var(--line) 1px;padding:1.6em 1.4em;text-align:left;
	line-height:1.9em;vertical-align:top;}
table.data thead th {border-bottom:solid var(--navy) 2px;color:var(--navy);font-weight:700;
	font-size:0.95rem;letter-spacing:0.06em;padding-bottom:1.2em;}
table.data tbody th {color:var(--navy);font-weight:700;width:26%;}
table.data tbody tr:last-child th, table.data tbody tr:last-child td {border-bottom:none;}
@media (max-width: 896px){
	table.data {font-size:0.95rem;min-width:46rem;}
	table.data th, table.data td {padding:1.1em 0.9em;}
	.tablewrap {margin:1.5rem 0 2.5rem 0;}
}

/*番号付きリスト*/
ol.steps {counter-reset:step;margin:2.5rem 0 3.5rem 0;padding:0;list-style:none;}
ol.steps > li {counter-increment:step;position:relative;padding:0 0 2.5rem 4.5rem;font-size:1.1rem;line-height:2.0em;
	border-bottom:solid var(--line-2) 1px;margin-bottom:2.5rem;}
ol.steps > li:last-child {border-bottom:none;margin-bottom:0;padding-bottom:0;}
ol.steps > li::before {content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0.1em;
	font-size:1.5rem;font-weight:700;color:var(--blue);letter-spacing:0.02em;}
ol.steps > li b {display:block;font-size:1.4rem;font-weight:500;margin-bottom:0.6rem;color:var(--navy);}
/*箇条書き*/
ul.checks {margin:2rem 0 3rem 0;padding:0;list-style:none;}
ul.checks > li {position:relative;padding:0 0 1.2rem 1.8rem;font-size:1.1rem;line-height:2.0em;}
ul.checks > li::before {content:"";position:absolute;left:0;top:0.85em;width:0.6rem;height:1px;background:var(--orange);}
@media (max-width: 896px){
	ol.steps > li {font-size:1.05rem;padding-left:3.4rem;padding-bottom:2rem;margin-bottom:2rem;}
	ol.steps > li::before {font-size:1.3rem;}
	ol.steps > li b {font-size:1.2rem;}
	ul.checks > li {font-size:1.05rem;}
}

/*注釈*/
.note {font-size:0.95rem !important;color:var(--ink-3);line-height:1.9em;
	background:var(--bg-1);padding:1.6rem 1.8rem;margin:2rem 0 2.5rem 0;}

/*著者ボックス（E-E-A-T）*/
.authorbox {border-top:solid var(--navy) 2px;padding:2.5rem 0 0 0;margin:5rem 0 2rem 0;}
.authorbox-head {font-size:0.9rem;font-weight:700;color:var(--label);letter-spacing:0.18em;margin-bottom:1.2rem;}
.authorbox-name {font-size:1.5rem !important;font-weight:500;margin-bottom:1rem !important;color:var(--navy);}
.authorbox-name a {color:var(--navy);text-decoration:none;border-bottom:solid var(--line) 1px;}
.authorbox-name a:hover {border-color:var(--navy);text-decoration:none;}
.authorbox-name span {font-size:0.95rem;font-weight:400;color:var(--ink-3);padding-left:0.8rem;}
.authorbox-dsc {font-size:1.0rem !important;color:var(--ink-2);line-height:1.9em;}
@media (max-width: 896px){
	.authorbox {margin-top:4rem;}
	.authorbox-name {font-size:1.3rem !important;}
	.authorbox-name span {display:block;padding-left:0;margin-top:0.4rem;}
}

/*次に読むページ*/
.nextlinks {margin:4rem 0 0 0;padding:3rem 0 0 0;border-top:solid var(--line) 1px;}
.nextlinks .nextlabel {font-size:0.9rem;font-weight:700;color:var(--label);letter-spacing:0.18em;margin-bottom:1.5rem;}
.nextlinks a.btn {margin:0 0.6rem 0.8rem 0;padding:1.2em 2.2em;font-size:0.95rem;}
@media (max-width: 896px){
	.nextlinks a.btn {margin:0 0 0.6rem 0;}
}

/*==================== ヘッダー ====================*/
.headerarea {position:fixed;top:0px;left:0px;width:100%;height:10vh;z-index:7000;
	background:rgba(255,255,255,0.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
	border-bottom:solid var(--line-2) 1px;}

.logoarea {position:absolute;top:0vh;left:2.5vw;height:10vh;display:flex;align-items:center;}
.logoarea img {height:4.4vh;width:auto;object-fit:contain;object-position:center left;}

.barwrap {display:none;}

.menu {position:absolute;top:0px;right:0px;height:10vh;padding:0px;z-index:7100;}
.menu .menulist {display:flex;flex-wrap:nowrap;align-items:center;height:10vh;}
.menu .menulist a {font-size:0.95rem;height:10vh;line-height:10vh;font-weight:500;color:var(--navy);
	padding:0 1.1rem;display:block;white-space:nowrap;position:relative;}
.menu .menulist a:hover {text-decoration:none;color:var(--blue);}
.menu .menulist a:not(.attention01):not(.attention02)::after {content:"";position:absolute;bottom:2.8vh;left:1.1rem;right:1.1rem;
	height:1px;background:var(--blue);transform:scaleX(0);transition:0.25s;}
.menu .menulist a:not(.attention01):not(.attention02):hover::after {transform:scaleX(1);}

/* ヘッダー右の一言（モックアップ準拠） */
.menu .headercopy {font-size:0.8rem;line-height:1.5em;color:var(--ink-3);padding:0 1.2rem 0 0.8rem;white-space:nowrap;}

.menu .menulist a.attention01 {color:var(--navy);}
.menu .menulist a.attention02 {background:var(--orange);color:#fff;font-weight:700;padding:1.1em 1.8rem;
	height:auto;line-height:1.2em;margin-right:1.8vw;display:flex;align-items:center;gap:0.6rem;}
.menu .menulist a.attention02:hover {background:var(--orange-dp);color:#fff;}
.menu .menulist a.attention02 svg {width:1.15em;height:1.15em;flex:none;}

/*SP*/
@media (max-width: 896px){
	.headerarea {height:8.5vh;}
	.logoarea {left:4vw;height:8.5vh;}
	.logoarea img {height:4.2vh;}
	.menu {position:fixed;top:0px;left:0px;width:100vw;height:100vh;background:#fff;overflow-y:auto;
		transform:translateX(110vw);}
	.menu.on {transform:translateX(0vw);transition:0.4s;}
	.menu.out {transform:translateX(110vw);transition:0.3s;}
	.menu .menulist {padding:14vh 8vw 10vh 8vw;display:block;height:auto;}
	.menu .menulist a {font-size:1.3rem;line-height:2.2em;height:auto;padding:0.8em 0;
		border-bottom:solid var(--line-2) 1px;}
	.menu .menulist a::after {display:none !important;}
	.menu .headercopy {display:none;}
	.menu .menulist a.attention01 {border:solid var(--navy) 1px;text-align:center;margin-top:2.5rem;padding:1.1em 0;border-bottom:solid var(--navy) 1px;}
	.menu .menulist a.attention02 {justify-content:center;text-align:center;width:100%;padding:1.2em 0;margin:0.6rem 0 0 0;border-bottom:none;}

	.barwrap {position:fixed;top:0;right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
		height:8.5vh;width:8.5vh;z-index:8000;gap:0.7vh;}
	.barwrap .bar {background:var(--navy);width:4.4vh;height:2px;transition:0.3s;}
	.barwrap .label {font-size:0.62rem;font-weight:700;color:var(--navy);letter-spacing:0.05em;margin-top:0.4vh;}
	.barwrap.on .bar.bar01 {transform:translateY(0.95vh) rotate(45deg);}
	.barwrap.on .bar.bar02 {transform:translateY(-0.95vh) rotate(-45deg);}
	.barwrap.on .label {opacity:0;}
}

/*==================== フッター ====================*/
.footerarea {background:var(--navy-deep);}

/* CTA帯 */
.contactarea {text-align:center;padding:7vw 5vw;position:relative;
	background:linear-gradient(rgba(14,28,53,0.88),rgba(14,28,53,0.92)), url(../img/cmn/bg_footer.jpg) no-repeat center center;
	background-size:cover;}
.contactarea .label {font-size:0.9rem;font-weight:700;color:rgba(255,255,255,0.55);letter-spacing:0.18em;
	text-transform:uppercase;display:block;margin-bottom:1.5rem;}
.contactarea h2 {color:#fff;font-size:2.8rem;font-weight:500;margin-bottom:1.5rem;line-height:1.5em;}
.contactarea p {color:rgba(255,255,255,0.85);font-size:1.05rem;line-height:2.1em;}
.contactarea .ctabtns {margin-top:3rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}
.contactarea a.btn {font-size:1.05rem;padding:1.4em 3.5em;}
/*SP*/
@media (max-width: 896px){
	.contactarea {padding:8vh 6vw;}
	.contactarea h2 {font-size:1.8rem;}
	.contactarea p {font-size:1.05rem;text-align:left;}
	.contactarea .ctabtns {display:block;margin-top:2.5rem;}
	.contactarea a.btn {margin-bottom:0.6rem;}
}

.footer {position:relative;padding:5vw 5vw 3vw 5vw;}
.footerlogo {margin-bottom:3rem;}
.footerlogo img {height:4.5vh;width:auto;}
.footermenu {padding-bottom:2.5rem;display:flex;flex-wrap:wrap;gap:0 2rem;
	border-bottom:solid rgba(255,255,255,0.15) 1px;margin-bottom:2rem;}
.footermenu a {font-size:0.95rem;line-height:2.4em;color:rgba(255,255,255,0.8);}
.footermenu a:hover {color:#fff;}
.footerinfo {font-size:0.9rem;color:rgba(255,255,255,0.5);line-height:2em;margin-bottom:1.5rem;}
.copyright p {color:rgba(255,255,255,0.5);font-size:0.85rem;letter-spacing:0.04em;}
/*SP*/
@media (max-width: 896px){
	.footer {padding:8vh 6vw 5vh 6vw;}
	.footerlogo img {height:3.6vh;}
	.footermenu {display:block;}
	.footermenu a {display:block;border-bottom:solid rgba(255,255,255,0.12) 1px;padding:0.9em 0;line-height:1.5em;}
	.footerinfo {font-size:0.95rem;}
}

/* ============================================================
   SEO/AIO記事のカテゴリ（ヘッダーのドロップダウン／フッターの一覧）
   ------------------------------------------------------------
   カテゴリは inc/articles.php が索引（scripts/data/index.json）から組み立てる。
   ピラーページがあるカテゴリだけが出るので、リンク切れにはならない。
   ============================================================ */

/* --- ヘッダー：マウスオーバーで開くカテゴリ --- */
.menu .menulist .hasdrop {position:relative;}
.menu .menulist .hasdrop .submenu {position:absolute;top:10vh;left:0;min-width:24rem;background:#fff;
	border:solid var(--line) 1px;box-shadow:0 10px 28px rgba(20,40,75,0.10);padding:0.8rem 0.5rem 0.6rem;
	opacity:0;visibility:hidden;transform:translateY(-6px);transition:0.22s;z-index:7200;}
/* カテゴリは2列。列の数を固定しておけば、15カテゴリでも高さが画面に収まる */
.menu .menulist .hasdrop .submenu-cols {columns:2;column-gap:0.6rem;}
.menu .menulist .hasdrop .submenu-cols a {break-inside:avoid;-webkit-column-break-inside:avoid;}
.menu .menulist .hasdrop:hover .submenu,
.menu .menulist .hasdrop:focus-within .submenu {opacity:1;visibility:visible;transform:translateY(0);}
.menu .menulist .hasdrop .submenu a {height:auto;line-height:1.6em;padding:0.6em 1.1rem;font-size:0.9rem;}
.menu .menulist .hasdrop .submenu a::after {display:none !important;}
.menu .menulist .hasdrop .submenu a:hover {background:var(--bg-1);color:var(--blue);}
.menu .menulist .hasdrop .submenu .submenu-all {display:block;border-top:solid var(--line) 1px;
	margin:0.6rem 0.6rem 0;padding-top:0.8em;font-weight:700;color:var(--blue);}

/* --- フッター：カテゴリ一覧 --- */
.footercat {padding-bottom:2.5rem;}
.footercat-head {font-size:0.95rem;font-weight:700;margin-bottom:0.9rem;}
.footercat-head a {color:rgba(255,255,255,0.92);}
.footercat-head a:hover {color:#fff;}
.footercat-list {display:flex;flex-wrap:wrap;gap:0 1.6rem;}
.footercat-list a {font-size:0.88rem;line-height:2.2em;color:rgba(255,255,255,0.65);}
.footercat-list a:hover {color:#fff;}

/*SP*/
@media (max-width: 896px){
	/* スマホはメニューが全画面になるので、ドロップダウンではなく入れ子の一覧として常に出す */
	.menu .menulist .hasdrop .submenu {position:static;opacity:1;visibility:visible;transform:none;
		border:none;box-shadow:none;padding:0 0 0.6em 0;min-width:0;background:transparent;}
	.menu .menulist .hasdrop .submenu-cols {columns:1;}   /* スマホは全画面メニューなので1列に戻す */
	.menu .menulist .hasdrop .submenu a {font-size:1.0rem;line-height:1.5em;padding:0.55em 0 0.55em 1.2em;
		border-bottom:solid var(--line-2) 1px;color:var(--ink-2);}
	.menu .menulist .hasdrop .submenu .submenu-all {margin:0;padding-top:0.55em;border-top:none;}

	.footercat-list {display:block;}
	.footercat-list a {display:block;border-bottom:solid rgba(255,255,255,0.12) 1px;padding:0.8em 0;line-height:1.5em;}
}