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

/************************************
** 新デザイン v12（2026-09-30 公開）。生成元：output/HP改修/v12/新デザイン_style_v12.css。
** ヘッダー・ナビ（body.ap2-hdr）は全ページ、本文（.ap2）は新デザインのページだけに効く。色は CSS 変数のみ（変数は追加CSSの :root）。
** 戻すとき：output/HP改修/backup/theme_cocoon-child-master_style.css_backup_before_publish_2026-09-30.txt の内容に戻す。
************************************/
/* 新デザイン v12（2026-09-29）。色はCSS変数のみ（--bg・--white は追加CSSの :root に追加）。書体は端末標準 */
body.ap2-page .entry-title,body.ap2-page .article-header,body.ap2-page .date-tags,body.ap2-page .entry-footer,body.ap2-page .author-info,body.ap2-page .sns-share,body.ap2-page .pager-post-navi{display:none}
.ap2{color:var(--text);font-size:15px;line-height:2.2;font-weight:400;letter-spacing:.02em}
.ap2 *{box-sizing:border-box}
.ap2 .in{max-width:1120px;margin:0 auto;padding:0 38px}
.ap2 p,.ap2 .lead{max-width:720px}
.ap2 section{margin:0;padding:160px 0 0}
.ap2 section.first{padding-top:150px}
.ap2 .end{padding-bottom:160px}
.ap2 p{margin:0 0 1.2em}
.ap2 p:last-child{margin-bottom:0}
.ap2 strong{font-weight:500}
.ap2 a{color:var(--text)}
/* 見出し：英語（大・細・字間広）→ アプリコットの線 → 日本語（小） */
.ap2 .hd{margin:0 0 56px;padding:0;background:none;border:0;line-height:1.2}
.ap2 .hd .en{position:relative;display:inline-block;font-size:40px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--text);padding-bottom:18px}
.ap2 .hd .en b{font-weight:inherit;color:var(--brand-main)}
.ap2 .hd .en .ln{position:absolute;left:0;bottom:0;width:calc(100% + 40px);height:1px;background:var(--brand-main);transform-origin:left center;transform:scaleX(1);display:block}
.ap2 .hd .ja{display:block;font-size:12px;font-weight:400;letter-spacing:.14em;color:var(--text);margin-top:16px}
.ap2 h3{font-size:16px;font-weight:500;letter-spacing:.08em;margin:64px 0 20px;padding:0;background:none;border:0;line-height:1.7}
.ap2 h3:first-of-type{margin-top:0}
.ap2 .lead{font-size:16px;margin-bottom:2em}
.ap2 .sub{color:var(--text-sub);font-size:13px}
.ap2 .note{font-size:12px;color:var(--text-sub);line-height:2}
.ap2 .note p{margin:0}
/* ロゴの画面 */
.ap2 .hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:0;margin-top:-1px}
.ap2 .hero img{width:25vw;max-width:480px;min-width:180px;height:auto;display:block}
.ap2 .hero .hline{width:calc(25vw + 80px);max-width:560px;min-width:240px;height:1px;background:var(--brand-main);margin:28px 0 0;transform-origin:center;transform:scaleX(1)}
.ap2 .hero .scroll{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.32em;color:var(--text-sub);text-transform:uppercase}
.ap2 .hero .scroll::after{content:"";display:block;width:1px;height:28px;background:var(--line);margin:10px auto 0}
/* 文字だけの画面 */
.ap2 .intro{min-height:72svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:96px 0}
.ap2 .intro p{max-width:none;margin:0;font-size:18px;line-height:2.1;letter-spacing:.06em}
.ap2 .intro .first{font-size:26px;font-weight:400;letter-spacing:.1em;margin:0 0 56px}
.ap2 .intro .first .en{display:inline-block;position:relative;padding-bottom:18px;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:none}
.ap2 .intro .first .ln{position:absolute;left:-20px;bottom:0;width:calc(100% + 40px);height:1px;background:var(--brand-main);transform-origin:center;transform:scaleX(1);display:block}

.ap2 .intro p.sub{font-size:15px;color:var(--text-sub)}
html.ap2-js .ap2 .intro .ln{transform:scaleX(0);transition:transform .5s cubic-bezier(.4,.4,0,1)}

html.ap2-js .ap2 .intro p.sub{opacity:0;transition:opacity .4s ease-out 1.3s}
html.ap2-js .ap2 .intro.on .ln{transform:scaleX(1)}html.ap2-js .ap2 .intro.on p.sub{opacity:1}
/* セクション：文＋画像 */
.ap2 .grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}

/* 送り */
.ap2 .more{display:inline-block;margin-top:40px;font-size:12px;letter-spacing:.2em;text-decoration:none;color:var(--text);border-bottom:1px solid var(--text);padding-bottom:6px;line-height:1.6}
.ap2 .more .ar{color:var(--brand-main);margin-left:.6em}
.ap2 .more:hover{color:var(--text-sub);border-color:var(--text-sub)}
/* 一覧（罫線のみ） */
.ap2 ul.list,.ap2 ol.list{list-style:none;margin:0;padding:0}
.ap2 .list li{margin:0;padding:22px 0;border-top:1px solid var(--line);display:flex;gap:28px;align-items:baseline}
.ap2 .list li:last-child{border-bottom:1px solid var(--line)}

.ap2 .list .n{font-size:16px;font-weight:500;letter-spacing:.06em}
.ap2 .list .yen{margin-left:auto;white-space:nowrap;font-size:14px;color:var(--text-sub)}

/* できること：2行 */
.ap2 ul.can{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0 56px}
.ap2 ul.can li{margin:0;padding:24px 0;border-top:1px solid var(--line)}
.ap2 ul.can .res{display:block;font-size:16px;font-weight:500;line-height:1.8;margin-bottom:6px;letter-spacing:.04em}
.ap2 ul.can .what{display:block;font-size:13px;color:var(--text-sub);line-height:1.9}
/* 図解（罫線＋○） */

/* 料金表 */
.ap2 table.price{border-collapse:collapse;width:100%;font-size:14px;margin:0 0 40px}
.ap2 table.price th,.ap2 table.price td{border:0;border-top:1px solid var(--line);padding:18px 10px 18px 0;text-align:left;vertical-align:top;background:none;font-weight:400;line-height:1.9}
.ap2 table.price tr:last-child th,.ap2 table.price tr:last-child td{border-bottom:1px solid var(--line)}
.ap2 table.price tbody th{font-weight:500;width:32%}
.ap2 table.price thead th{color:var(--text-sub);font-size:12px;letter-spacing:.08em;border-top:0;padding-top:0}
.ap2 table.price .yen{white-space:nowrap;text-align:right;padding-right:0}
.ap2 .free{font-size:15px;margin:40px 0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:639px){.ap2 table.combo,.ap2 table.combo tbody{display:block;width:100%}.ap2 table.combo thead{display:none}.ap2 table.combo tr{display:block;padding:18px 0;border-top:1px solid var(--line)}.ap2 table.combo tr:last-child{border-bottom:1px solid var(--line)}.ap2 table.combo th,.ap2 table.combo td{display:block;border:0;padding:0;text-align:left;white-space:normal;font-size:14px;width:auto}.ap2 table.combo tbody th{font-weight:500;font-size:15px;margin-bottom:4px}.ap2 table.combo td.yen{display:inline;font-size:14px}.ap2 table.combo td.yen::before{color:var(--text-sub);font-size:12px}.ap2 table.combo td.m::before{content:"月額 "}.ap2 table.combo td.i::before{content:"　／　初期費用 "}}
/* 会社概要 */
.ap2 table.corp{border-collapse:collapse;width:100%;font-size:14px}
.ap2 table.corp th,.ap2 table.corp td{border:0;border-top:1px solid var(--line);padding:16px 0;text-align:left;vertical-align:top;background:none;line-height:1.9}
.ap2 table.corp tr:last-child th,.ap2 table.corp tr:last-child td{border-bottom:1px solid var(--line)}
.ap2 table.corp th{width:10em;font-weight:500;white-space:nowrap;letter-spacing:.06em}
/* 問い合わせボタン：黒地・白文字・矢印だけアプリコット */
.ap2 .cta,body.ap2-hdr .ap2-hcta{display:inline-block;background:var(--text);color:var(--white);text-decoration:none;font-size:12px;letter-spacing:.2em;padding:16px 36px;border-radius:999px;line-height:1.4;font-weight:400;text-transform:uppercase}
.ap2 .cta .ar,body.ap2-hdr .ap2-hcta .ar{color:var(--brand-main);margin-left:.7em}
.ap2 .cta:hover,body.ap2-hdr .ap2-hcta:hover{opacity:.85;color:var(--white)}
.ap2 .cta-wrap{text-align:center;padding:160px 0 0}
.ap2 .cta-wrap p{max-width:none;margin:0 0 28px;font-size:14px;color:var(--text-sub);letter-spacing:.06em;text-align:center}
.ap2 .cta-wrap .cta{font-size:13px;padding:20px 56px}

/* 出現アニメーション（外部ライブラリなし） */
html.ap2-js .ap2 .rv{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.4,.4,0,1),transform .9s cubic-bezier(.4,.4,0,1)}
html.ap2-js .ap2 .rv.on{opacity:1;transform:none}
.ap2 .rv.d1{transition-delay:.15s}
/* 見出し：線が左から伸びる（scaleX）→ 英語 → 日本語。合計約1秒 */
html.ap2-js .ap2 .hd .en .ln{transform:scaleX(0);transition:transform .4s cubic-bezier(.4,.4,0,1)}
html.ap2-js .ap2 .hd .en .t{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity .4s ease-out .35s,transform .4s ease-out .35s}
html.ap2-js .ap2 .hd .ja{opacity:0;transition:opacity .35s ease-out .65s}
html.ap2-js .ap2 .hd.on .en .ln{transform:scaleX(1)}
html.ap2-js .ap2 .hd.on .en .t{opacity:1;transform:none}
html.ap2-js .ap2 .hd.on .ja{opacity:1}
/* ロゴの画面：線が中央から伸びる → ロゴがふわっと。合計1秒以内 */
html.ap2-js .ap2 .hero .hline{transform:scaleX(0);transition:transform .5s cubic-bezier(.4,.4,0,1)}
html.ap2-js .ap2 .hero img{opacity:0;transform:translateY(6px);transition:opacity .5s ease-out .4s,transform .5s ease-out .4s}
html.ap2-js .ap2 .hero .scroll{opacity:0;transition:opacity .4s ease-out .6s}
html.ap2-js .ap2 .hero.on .hline{transform:scaleX(1)}
html.ap2-js .ap2 .hero.on img{opacity:1;transform:none}
html.ap2-js .ap2 .hero.on .scroll{opacity:1}
@media (prefers-reduced-motion:reduce){html.ap2-js .ap2 .intro .four li,html.ap2-js .ap2 .intro p.sub,html.ap2-js .ap2 .rv,html.ap2-js .ap2 .sl,html.ap2-js .ap2 .fd,html.ap2-js .ap2 .hd .en .t,html.ap2-js .ap2 .hd .ja,html.ap2-js .ap2 .hero img,html.ap2-js .ap2 .hero .scroll{opacity:1!important;transform:none!important;transition:none!important}html.ap2-js .ap2 .hd .en .ln,html.ap2-js .ap2 .intro .ln,html.ap2-js .ap2 .hero .hline{transform:scaleX(1)!important;transition:none!important}}
/* ヘッダー：透明・固定。スクロール後は背景色。ナビは新ページ用の6項目（JSで追加） */
body.ap2-hdr #header-container{position:fixed;top:var(--wp-admin--admin-bar--height,0px);left:0;right:0;z-index:1000;background:transparent!important;background-image:none!important;box-shadow:none;transition:background-color .35s,box-shadow .35s;border:0}
body.ap2-hdr.ap2-scrolled #header-container{background:var(--bg)!important;box-shadow:0 1px 0 var(--line)}
body.ap2-hdr #navi{display:none!important}
body.ap2-hdr #header-container-in{padding:0 176px 0 24px;display:flex;align-items:center;justify-content:space-between;min-height:60px}
body.ap2-hdr .header-in{padding:10px 0;flex:0 0 auto}
body.ap2-hdr .logo-header .site-logo-image,body.ap2-hdr img.header-site-logo-image{height:34px!important;width:auto;max-height:34px}
body.ap2-hdr .logo-header{padding:0;margin:0;line-height:1}
body.ap2-hdr .ap2-nav{display:flex;gap:2px;margin:0;padding:0;list-style:none}
body.ap2-hdr .ap2-nav li{margin:0;padding:0}
body.ap2-hdr .ap2-nav a{display:block;font-size:12px;letter-spacing:.12em;color:var(--text);text-decoration:none;padding:10px 10px;line-height:1.6;white-space:nowrap}
body.ap2-hdr .ap2-nav a:hover{color:var(--text-sub)}
body.ap2-hdr .floating_btn_anime{display:none!important}
body.ap2-hdr #content,body.ap2-hdr .content,body.ap2-hdr .main,body.ap2-hdr .entry-content,body.ap2-hdr .article{margin-top:0;padding-top:0}
body.ap2-hdr .ap2-hcta{position:fixed;top:calc(var(--wp-admin--admin-bar--height,0px) + 19px);right:20px;z-index:1001;font-size:11px;letter-spacing:.18em;padding:10px 18px}
/* スマホ：全画面メニュー（新ページ用の6項目） */
body.ap2-hdr .mobile-menu-buttons{background:transparent!important;background-image:none!important;box-shadow:none;border:0}
body.ap2-hdr.ap2-scrolled .mobile-menu-buttons{background:var(--bg)!important}
body.ap2-hdr .mobile-menu-buttons .menu-button{width:52px}

body.ap2-hdr .logo-menu-button img{height:30px;width:auto;padding:0 0 0 12px}
body.ap2-hdr .navi-menu-content{width:100vw;max-width:none;left:0;right:auto;transform:translateX(100%);background:var(--bg)!important;padding-top:120px!important}

body.ap2-hdr .navi-menu-content .menu-drawer{display:none}
body.ap2-hdr .ap2-mnav{list-style:none;margin:0;padding:0 32px}
body.ap2-hdr .ap2-mnav li{margin:0;padding:0;border-bottom:1px solid var(--line)}
body.ap2-hdr .ap2-mnav a{display:block;color:var(--text);font-size:15px;letter-spacing:.18em;padding:18px 0;line-height:1.8;text-decoration:none}
body.ap2-hdr .ap2-mnav a:hover{color:var(--text-sub)}

body.ap2-hdr .menu-close-button{padding-right:24px;padding-top:8px}
@media (min-width:900px){body.ap2-hdr .mobile-menu-buttons,body.ap2-hdr #mobile-header-menu-buttons{display:none!important}body.ap2-hdr #header-container{display:block!important}body.ap2-hdr #header,body.ap2-hdr .header-in,body.ap2-hdr .logo-header{display:block!important}body.ap2-hdr .logo-header .site-logo-image{display:inline-block!important}body.ap2-hdr #header-container #header-container-in{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:space-between!important;align-items:center!important;padding:0 176px 0 24px!important;width:auto!important;max-width:none!important;min-height:60px!important}body.ap2-hdr #header-container #header,body.ap2-hdr #header-container .header-in{padding:10px 0!important;margin:0!important;text-align:left!important;width:auto!important;max-width:none!important;flex:0 0 auto!important}body.ap2-hdr #header-container .ap2-nav{flex:0 0 auto!important;margin:0!important}}
@media (max-width:899px){body.ap2-hdr #header-container{display:none!important}body.ap2-hdr .mobile-menu-buttons,body.ap2-hdr #mobile-header-menu-buttons{display:flex!important}body.ap2-hdr .mobile-menu-buttons li.menu-button:not(.logo-menu-button):not(:has(label[for=navi-menu-input])){display:none}body.ap2-hdr .ap2-hcta{top:calc(var(--wp-admin--admin-bar--height,0px) + 16px);right:60px;font-size:10px;padding:9px 14px;letter-spacing:.14em}}
@media (min-width:640px){.ap2 ul.can{grid-template-columns:1fr 1fr}}
@media (max-width:639px){.ap2{font-size:15px;line-height:2.1}.ap2 .in{padding:0 16px}.ap2 p,.ap2 .lead{max-width:none}.ap2 section{padding-top:96px}.ap2 section.first{padding-top:110px}.ap2 .end{padding-bottom:96px}.ap2 .hd{margin-bottom:40px}.ap2 .hd .en{font-size:30px;letter-spacing:.16em;padding-bottom:14px}.ap2 .hd .en .ln{width:calc(100% + 32px)}.ap2 .hd .ja{font-size:11px;margin-top:14px}.ap2 h3{margin-top:48px}.ap2 .hero img{width:50vw;min-width:0}.ap2 .hero .hline{width:calc(50vw + 48px);min-width:0}.ap2 .intro{min-height:60svh;padding:64px 0}.ap2 .intro p{font-size:15px}.ap2 .intro .first{font-size:20px;margin-bottom:40px}.ap2 .intro .first .ln{left:-16px;width:calc(100% + 32px)}.ap2 .intro p.sub{font-size:13px}.ap2 .grid{grid-template-columns:1fr;gap:36px}.ap2 .list li{gap:16px;padding:18px 0}.ap2 .list .n{font-size:15px}.ap2 table.price tbody th{width:38%}.ap2 table.price th,.ap2 table.price td{padding:14px 6px 14px 0;font-size:13px}.ap2 table.corp th{width:6.5em}.ap2 .cta-wrap{padding-top:96px}.ap2 .cta-wrap .cta{padding:18px 44px}.ap2 .more{margin-top:32px}}

/* REASON：見出し太字＋説明。PC2列・スマホ1列。番号なし */
.ap2 ul.reason{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:40px 64px}
.ap2 ul.reason li{margin:0;padding:24px 0 0;border-top:1px solid var(--line)}
.ap2 ul.reason .rt{display:block;font-size:17px;font-weight:500;letter-spacing:.06em;line-height:1.7;margin-bottom:10px}
.ap2 ul.reason .rd{display:block;font-size:13.5px;line-height:2;color:var(--text)}
/* SUPPORT：業種→悩み→アイコン→目指す状態。区切りは上下の細い線のみ */
.ap2 ul.support{list-style:none;margin:0;padding:0}
.ap2 ul.support li{margin:0;padding:28px 0;border-top:1px solid var(--line)}
.ap2 ul.support li:last-child{border-bottom:1px solid var(--line)}
.ap2 ul.support .ind{display:block;font-size:12px;color:var(--text-sub);letter-spacing:.1em;margin-bottom:14px}
.ap2 ul.support .row{display:flex;align-items:center;gap:20px}
.ap2 ul.support .worry{flex:1 1 0;font-size:15px;line-height:1.8}
.ap2 ul.support .ar{flex:0 0 auto;color:var(--brand-main);font-size:18px}
.ap2 ul.support .acts{flex:0 0 auto;display:flex;gap:24px}
.ap2 ul.support .ic{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;letter-spacing:.04em;line-height:1.5;min-width:64px}
.ap2 ul.support .ic svg{width:28px;height:28px;color:var(--text);display:block}
.ap2 ul.support .goal{flex:1 1 0;font-size:15px;font-weight:500;line-height:1.8;text-align:right}
.ap2 ul.support .goal .en{display:inline-block;position:relative;padding-bottom:6px;font-size:inherit;font-weight:inherit;letter-spacing:.02em;text-transform:none}
.ap2 ul.support .goal .ln{position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brand-main);display:block}
/* FAQ：質問だけ見え、タップで開く（details/summary） */
.ap2 .faqs{border-top:1px solid var(--line)}
.ap2 details.faq{border-bottom:1px solid var(--line);margin:0}
.ap2 details.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:16px;padding:20px 0;font-size:15px;line-height:1.8;font-weight:500}
.ap2 details.faq summary::-webkit-details-marker{display:none}
.ap2 details.faq summary .q{flex:1 1 auto}
.ap2 details.faq summary .q::before{content:"Q";display:inline-block;width:1.6em;color:var(--text-sub);font-weight:400;letter-spacing:.05em}
.ap2 details.faq summary .pm{flex:0 0 auto;position:relative;width:14px;height:14px;margin-top:9px}
.ap2 details.faq summary .pm::before,.ap2 details.faq summary .pm::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1px;background:var(--text);transition:transform .25s}
.ap2 details.faq summary .pm::after{transform:rotate(90deg)}
.ap2 details.faq[open] summary .pm::after{transform:rotate(0)}
.ap2 details.faq .a{padding:0 30px 24px 1.6em;font-size:14px;line-height:2;color:var(--text)}
.ap2 details.faq .a p{margin:0 0 .8em;max-width:none}
.ap2 details.faq .a p.fh{font-weight:500;margin:1em 0 .2em}
.ap2 details.faq .a ul{margin:0 0 .8em;padding-left:1.2em}
.ap2 details.faq .a li{margin:0;padding:0}
.ap2 details.faq .a p.note{font-size:12px;color:var(--text-sub)}
@media (max-width:639px){.ap2 ul.reason{grid-template-columns:1fr;gap:28px}.ap2 ul.support .row{flex-direction:column;align-items:flex-start;gap:12px}.ap2 ul.support .goal{text-align:left}.ap2 ul.support .ar{transform:rotate(90deg);margin-left:4px}.ap2 details.faq .a{padding-right:0}}

/* v5：小見出しは --brand-deep、アイコン・矢印は --brand-icon */
.ap2 .deep,.ap2 .sub-deep{color:var(--brand-deep)}
.ap2 h3.sub-deep{font-weight:500}

/* PROBLEM */
.ap2 ul.problem{list-style:none;margin:0;padding:0;max-width:760px}
.ap2 ul.problem li{margin:0;padding:18px 0;border-top:1px solid var(--line);display:flex;gap:16px;align-items:flex-start;font-size:15px;line-height:1.9}
.ap2 ul.problem li:last-child{border-bottom:1px solid var(--line)}
.ap2 ul.problem .ck{flex:0 0 auto;margin-top:3px}
.ap2 ul.problem .ck svg{width:22px;height:22px;color:var(--brand-icon);display:block}
.ap2 .lead-to{margin:36px 0 0;font-size:16px;font-weight:500;color:var(--brand-deep);letter-spacing:.06em}
.ap2 .lead-to .dn{color:var(--brand-icon);margin-right:.5em}
/* SOLUTION：3段階の図（HTML/CSS） */
.ap2 .stages{display:flex;align-items:stretch;gap:12px;margin:8px 0 40px}
.ap2 .stages .stage{flex:1 1 0;border:1px solid var(--line);padding:22px 16px 18px;text-align:center}
.ap2 .stages .sname{display:block;font-size:17px;font-weight:500;color:var(--brand-deep);letter-spacing:.08em;margin-bottom:16px}
.ap2 .stages ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px}
.ap2 .stages li{margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;line-height:1.5;letter-spacing:.02em;min-width:64px}
.ap2 .stages li svg{width:26px;height:26px;color:var(--text);display:block}
.ap2 .stages .sar{flex:0 0 auto;align-self:center;color:var(--brand-icon);font-size:22px}
.ap2 .after{padding-top:24px;border-top:1px dashed var(--line);max-width:none}
/* SERVICE：番号＋アイコン＋名前＋1文 */
.ap2 ol.svc4{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.ap2 ol.svc4 li{margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.ap2 ol.svc4 .num{font-size:11px;letter-spacing:.2em;color:var(--brand-icon)}
.ap2 ol.svc4 .ic svg{width:24px;height:24px;color:var(--brand-icon);display:block}
.ap2 ol.svc4 .n{font-size:16px;font-weight:500;color:var(--brand-deep);letter-spacing:.04em;white-space:nowrap}
.ap2 ol.svc4 .d{grid-column:1/4;font-size:13.5px;line-height:1.9;margin-top:8px}
/* REASON v5：アイコン→小見出し→説明 */
.ap2 ul.reason.v5{grid-template-columns:1fr 1fr;gap:28px 32px}
.ap2 ul.reason.v5 li{padding-top:20px}
.ap2 ul.reason.v5 .ic svg{width:28px;height:28px;color:var(--brand-icon);display:block;margin-bottom:12px}
.ap2 ul.reason.v5 .rt{color:var(--brand-deep);font-size:16px}
.ap2 ul.reason.v5 .rd{font-size:13px}
/* FLOW：横一列、矢印、括り線「ここまで無料」 */
.ap2 .flowwrap{position:relative;padding-top:44px}
.ap2 .free-bracket{position:absolute;left:0;top:0;width:calc((100% - 4*28px) * 4 / 5 + 3*28px);height:28px;border:1px solid var(--brand-icon);border-bottom:0;text-align:center}
.ap2 .free-bracket span{position:relative;top:-11px;display:inline-block;padding:0 12px;background:var(--bg);font-size:12px;letter-spacing:.14em;color:var(--brand-deep);font-weight:500}
.ap2 ol.flow5{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:0}
.ap2 ol.flow5 li{flex:1 1 0;margin:0;padding:0 4px;display:flex;flex-direction:column;align-items:center;text-align:center}
.ap2 ol.flow5 .num{font-size:11px;letter-spacing:.2em;color:var(--brand-icon);margin-bottom:10px}

.ap2 ol.flow5 .n{font-size:15px;font-weight:500;color:var(--brand-deep);letter-spacing:.04em;margin-bottom:8px}
.ap2 ol.flow5 .d{font-size:12.5px;line-height:1.8;color:var(--text)}

/* COLUMN カード */
.ap2 ul.cards3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ap2 ul.cards3 li{margin:0;padding:0}
.ap2 ul.cards3 a{display:block;text-decoration:none;color:var(--text)}
.ap2 ul.cards3 img{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;display:block;margin-bottom:12px}
.ap2 ul.cards3 .sub{display:block;font-size:12px;color:var(--text-sub);letter-spacing:.06em;margin-bottom:4px}
.ap2 ul.cards3 .t{display:block;font-size:14px;font-weight:500;line-height:1.7}
/* PROFILE */

@media (max-width:639px){.ap2 .stages{flex-direction:column;gap:6px}.ap2 .stages .sar{transform:rotate(90deg);align-self:center;padding:0}.ap2 ol.svc4{grid-template-columns:1fr;gap:12px}.ap2 ul.reason.v5{grid-template-columns:1fr}.ap2 .flowwrap{padding-top:0}.ap2 .free-bracket{position:static;width:auto;height:auto;border:0;border-left:1px solid var(--brand-icon);text-align:left;padding-left:12px;margin-bottom:12px}.ap2 .free-bracket span{top:0;padding:0;background:none}.ap2 ol.flow5{flex-direction:column;gap:6px}.ap2 ol.flow5 li{flex-direction:row;text-align:left;align-items:center;gap:12px;padding:6px 0;flex-wrap:wrap}.ap2 ol.flow5 .num,.ap2 ol.flow5 .ic svg,.ap2 ol.flow5 .n{margin:0}.ap2 ol.flow5 .d{flex:1 0 100%;padding-left:54px;margin-top:2px}.ap2 ul.cards3{grid-template-columns:1fr}}

/* v9：イラストの登場「横からすべり込む」（画面に入ったとき1回だけ。opacity と transform だけ）。左の絵は左から、右の絵は右から、上・中央の絵は浮き上がる */
html.ap2-js .ap2 .sl{opacity:0;transition:opacity .8s ease-out,transform .9s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
html.ap2-js .ap2 .sl.from-l{transform:translateX(-28px)}
html.ap2-js .ap2 .sl.from-r{transform:translateX(28px)}
html.ap2-js .ap2 .sl.up{transform:translateY(16px)}
html.ap2-js .ap2 .sl.on{opacity:1;transform:none}

.ap2 section,.ap2 .intro,.ap2 .cta-wrap{overflow:hidden}  /* すべり込みが横にはみ出さないように */
/* v9：イラストの置き方。切り抜きせず自然な縦横比で置く */
.ap2 .ill{margin:0}
.ap2 .ill img{width:100%;height:auto;display:block}
.ap2 .grid{gap:56px;align-items:center}

.ap2 .grid.s35{grid-template-columns:1fr 35%}
.ap2 .grid.s35.rev{grid-template-columns:35% 1fr}
.ap2 .grid.s30{grid-template-columns:1fr 30%}

.ap2 .grid.rev .ill{order:-1}
.ap2 .grid .faqs{margin:0}
.ap2 .hdrow{display:grid;grid-template-columns:1fr 35%;gap:56px;align-items:end;margin-bottom:56px}

.ap2 .hdrow.l25{grid-template-columns:25% 1fr;align-items:center}

/* 文字の画面：文を左、絵を右（画面の端まで。幅50%） */
.ap2 .intro{display:block;padding:0;min-height:0}  /* 高さは .in 側（72svh）で持つ */
.ap2 .intro .in{max-width:none;padding:0;display:grid;grid-template-columns:1fr 50%;gap:0;align-items:center;min-height:72svh;text-align:left}

.ap2 .intro .first .ln{left:0;width:100%}
/* SERVICE：横長の絵を4項目の上に帯のように（本文幅いっぱい。上下は切り抜き） */

/* SUPPORT：各業種の行の左に小さなイラスト */
.ap2 ul.support li.with-ill{display:grid;grid-template-columns:150px 1fr;gap:32px;align-items:center;padding:20px 0}
.ap2 ul.support .sill{margin:0}
/* PROFILE：2枚を大小で重ねる（大＝二人、小＝家族を左下に） */

/* 問い合わせ：ボタンの上に中央（30%） */
.ap2 .cta-wrap .cill{width:30%;max-width:340px;margin:0 auto 32px}
@media (max-width:1023px){.ap2 .grid{gap:36px}.ap2 .hdrow{gap:36px}}
@media (max-width:639px){html.ap2-js .ap2 .sl.from-l{transform:translateX(-12px)}html.ap2-js .ap2 .sl.from-r{transform:translateX(12px)}
.ap2 .grid.big,.ap2 .grid.big.rev,.ap2 .grid.s35,.ap2 .grid.s35.rev,.ap2 .grid.s30,.ap2 .grid.s30.rev{grid-template-columns:1fr;gap:28px}
.ap2 .grid .ill,.ap2 .grid.rev .ill{order:-1;margin:0 auto}.ap2 .grid.s35 .ill,.ap2 .grid.s30 .ill{width:62%}
.ap2 .hdrow,.ap2 .hdrow.r30,.ap2 .hdrow.l25{grid-template-columns:1fr;gap:24px;margin-bottom:40px}.ap2 .hdrow .ill{order:-1;width:56%;margin:0 auto}.ap2 .hdrow.l25 .ill{width:44%}
.ap2 .intro .in{grid-template-columns:1fr;min-height:60svh;text-align:center}.ap2 .intro .first .ln{left:-16px;width:calc(100% + 32px)}

.ap2 ul.support li.with-ill{grid-template-columns:92px 1fr;gap:16px;align-items:start}

.ap2 .cta-wrap .cill{width:56%;margin-bottom:24px}}

/* PROFILE 確定文（2026-09-29）：1つの文章として縦に流す。1行目のキャッチは大きめ（--brand-deep）、名乗りは小さめ、締めは中央寄せで少し小さめ */
.ap2 .ptext p{max-width:none;margin:0 0 1.7em;text-wrap:pretty}
.ap2 .ptext p:last-child{margin-bottom:0}
.ap2 .ptext .pcatch{font-size:22px;font-weight:500;color:var(--brand-deep);letter-spacing:.06em;line-height:1.7;margin-bottom:.5em}

.ap2 .ptext strong{font-weight:700}
.ap2 .ptext .pclose{text-align:center;font-size:17px;font-weight:500;color:var(--brand-deep);letter-spacing:.06em;margin-top:2.4em}
@media (max-width:639px){.ap2 .ptext .pcatch{font-size:19px}.ap2 .ptext .pclose{font-size:15px}}
/* PROFILE：文の途中で不自然に折り返さないよう、長い文はスマホだけ（br.sp）／両方（br）で区切る。スマホは絵を先に */
.ap2 .ptext br.sp{display:none}
@media (max-width:639px){.ap2 .ptext br.sp{display:inline}}

/* v10：絵本型のトップ。1セクションに1枚、絵を大きく中央に、その下に見出し・短い文・View More を中央ぞろえ */
.ap2 .pbook .in{text-align:center}
.ap2 .pbook .in p,.ap2 .pbook .lead{margin-left:auto;margin-right:auto}
.ap2 .pbook .hd{margin-bottom:40px}

.ap2 .ill.pb{width:min(100%,960px);margin:0 auto 40px}
.ap2 .pbook .more{margin-top:36px}
/* REASON：小見出しだけ（PC 2列） */
.ap2 ul.reason4{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;text-align:left}
.ap2 ul.reason4 li{margin:0;padding:16px 0;border-top:1px solid var(--line);font-size:16px;font-weight:500;color:var(--text);letter-spacing:.04em;line-height:1.7}
/* 横に並ぶ絵（文字の画面の4つ、SUPPORT の3業種、FLOW の5ステップ）。左から順に 0.15秒ずつ */
.ap2 ul.row{list-style:none;margin:0 auto;padding:0;display:grid;gap:24px;align-items:start}
.ap2 ul.row li{margin:0;padding:0;text-align:center}
.ap2 ul.row .ill{margin:0 auto 12px;width:100%;aspect-ratio:1/1}
.ap2 ul.row .ill img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.ap2 ul.row .cap{display:block;font-size:14px;line-height:1.8;letter-spacing:.04em}
.ap2 ul.row .cap b{display:block;font-weight:500;color:var(--brand-deep);font-size:15px}
.ap2 ul.row .cap .num{display:block;font-size:11px;letter-spacing:.2em;color:var(--brand-icon);margin-bottom:4px}
.ap2 ul.row.four4{grid-template-columns:repeat(4,1fr);max-width:820px;margin:0 auto 40px}
.ap2 ul.row.three{grid-template-columns:repeat(3,1fr);max-width:960px;gap:32px}
.ap2 ul.row.three .cap{font-size:15px}
.ap2 ul.row.five{grid-template-columns:repeat(5,1fr);max-width:1000px;gap:20px}
.ap2 ul.row li:nth-child(2) .sl{transition-delay:.15s}.ap2 ul.row li:nth-child(3) .sl{transition-delay:.3s}.ap2 ul.row li:nth-child(4) .sl{transition-delay:.45s}.ap2 ul.row li:nth-child(5) .sl{transition-delay:.6s}
html.ap2-js .ap2 .sl.up{transition-duration:1.2s,1.2s}
/* FLOW（絵つき）の「ここまで無料」の括り：5列のうち左4列 */
.ap2 .flowwrap.pict{max-width:1000px;margin:0 auto;padding-top:44px}
.ap2 .flowwrap.pict .free-bracket{width:calc((100% - 4*20px) * 4 / 5 + 3*20px)}
/* 文字の画面（v10）：中央ぞろえ、1行目の線は中央から */
.ap2 .intro.pbook{min-height:0}
.ap2 .intro.pbook .in{display:block;max-width:1120px;padding:120px 38px 0;min-height:0;text-align:center}
.ap2 .intro.pbook .first{font-size:26px;letter-spacing:.1em;margin:0 0 48px}
.ap2 .intro.pbook .first .ln{left:-20px;width:calc(100% + 40px)}
.ap2 .intro.pbook p.sub{font-size:15px;color:var(--text-sub);max-width:none}
/* ファーストビュー（v10）：左にロゴ、右に絵。ロゴはフェード＋浮き上がり1.8秒、絵は右から 0.4秒遅れ・2秒 */
.ap2 .hero.fv{display:block;min-height:100svh;padding:0;position:relative}
.ap2 .hero.fv .fvin{min-height:100svh;max-width:1120px;margin:0 auto;padding:60px 38px 80px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.ap2 .hero.fv .fvlogo{display:flex;flex-direction:column;align-items:center}
.ap2 .hero.fv .fvlogo img{width:min(100%,440px);min-width:0;height:auto}
.ap2 .hero.fv .fvlogo .hline{width:min(100%,520px);min-width:0}
.ap2 .hero.fv .fvpic{margin:0;width:100%}
.ap2 .hero.fv .fvpic img{width:100%;height:auto;max-height:78svh;object-fit:contain}
html.ap2-js .ap2 .hero.fv .fvlogo{opacity:0;transform:translateY(12px);transition:opacity 1.8s cubic-bezier(.22,1,.36,1),transform 1.8s cubic-bezier(.22,1,.36,1)}
html.ap2-js .ap2 .hero.fv .hline{transform:scaleX(1);transition:none}
html.ap2-js .ap2 .hero.fv img{opacity:1;transform:none;transition:none}
html.ap2-js .ap2 .hero.fv .sl.fv{opacity:0;transform:translateX(28px);transition:opacity 2s cubic-bezier(.22,1,.36,1) .4s,transform 2s cubic-bezier(.22,1,.36,1) .4s}
html.ap2-js .ap2 .hero.fv.on .fvlogo{opacity:1;transform:none}
html.ap2-js .ap2 .hero.fv .sl.fv.on,html.ap2-js .ap2 .hero.fv.on .sl.fv{opacity:1;transform:none}
/* 専用ページ：4サービスに絵、FLOW の5ステップに絵、FAQ のグループ見出しに小さく、フォームの横に絵 */

.ap2 ol.flow5.pics li .ill{width:100%;margin:0 auto 10px}
.ap2 .hdrow.small{grid-template-columns:120px 1fr;gap:28px;margin-bottom:24px}
.ap2 .hdrow.small h3,.ap2 .hdrow.small h2.sub{margin:0}

@media (max-width:1023px){.ap2 .hero.fv .fvin{gap:24px}.ap2 ul.row.five{gap:12px}.ap2 .flowwrap.pict .free-bracket{width:calc((100% - 4*12px) * 4 / 5 + 3*12px)}}
@media (max-width:639px){.ap2 .ill.pb{width:100%;margin-bottom:28px}.ap2 .pbook .hd{margin-bottom:32px}
.ap2 ul.reason4{grid-template-columns:1fr;gap:0}
.ap2 ul.row.four4{grid-template-columns:1fr 1fr;gap:20px 16px}.ap2 ul.row.three{grid-template-columns:1fr;gap:28px;max-width:320px}.ap2 ul.row.five{grid-template-columns:1fr 1fr;gap:20px 16px;max-width:360px}
.ap2 .flowwrap.pict{padding-top:0}.ap2 .flowwrap.pict .free-bracket{position:static;width:auto;height:auto;border:0;border-left:1px solid var(--brand-icon);text-align:left;padding-left:12px;margin-bottom:12px}
.ap2 .intro.pbook .in{padding:80px 16px 0}.ap2 .intro.pbook .first{font-size:20px;margin-bottom:36px}.ap2 .intro.pbook .first .ln{left:-16px;width:calc(100% + 32px)}
.ap2 .hero.fv .fvin{grid-template-columns:1fr;gap:20px;padding:80px 16px 60px;min-height:100svh;align-content:center}.ap2 .hero.fv .fvlogo img{width:60%}.ap2 .hero.fv .fvlogo .hline{width:calc(60% + 40px)}.ap2 .hero.fv .fvpic{width:88%;margin:0 auto}

.ap2 ol.flow5.pics li{flex-wrap:wrap}.ap2 ol.flow5.pics li .ill{width:120px;margin:0 0 8px}
.ap2 .hdrow.small{grid-template-columns:80px 1fr;gap:16px}.ap2 .hdrow.small .ill{order:0;width:auto;margin:0}
}

/* v11：雑誌型のトップ。切り抜きの絵を片側に大きく（枠・面・カードなし、生成りの上にそのまま）、文章を反対側に。左右交互 */
.ap2 .grid.mag{grid-template-columns:58% 1fr;gap:48px;align-items:center}
.ap2 .grid.mag.rev{grid-template-columns:1fr 58%}
.ap2 .grid.mag .ill{order:0;margin:0}
.ap2 .grid.mag .magpic img{width:100%;height:480px;object-fit:contain;display:block}
.ap2 .magsec.pic-l .magpic img{object-position:left center}
.ap2 .magsec.pic-r .magpic img{object-position:right center}
.ap2 .magsec.pic-l .magpic{margin-left:-6%}   /* 本文の幅から少し外側へ。絵そのものは切らない */
.ap2 .magsec.pic-r .magpic{margin-right:-6%}
.ap2 .magtxt{text-align:left}
.ap2 .magtxt .hd{margin-bottom:32px}
.ap2 .magtxt p,.ap2 .magtxt .lead{max-width:none}
.ap2 .magtxt ul.problem{max-width:none}
.ap2 .magtxt ol.svc4{grid-template-columns:1fr;gap:12px}
.ap2 .magtxt ul.reason4{grid-template-columns:1fr;gap:0;max-width:none}

.ap2 .magtxt .faqs{margin:0}
.ap2 .magtxt .more{margin-top:28px}
.ap2 .magtxt .ptext p{margin-bottom:1.4em}
.ap2 .magsec .stages{margin-top:56px}
/* 文章はフェードのみ */
html.ap2-js .ap2 .fd{opacity:0;transition:opacity .9s ease-out .1s}
html.ap2-js .ap2 .fd.on{opacity:1}
html.ap2-js .ap2 .fd .rv{opacity:1;transform:none;transition:none}
html.ap2-js .ap2 .fd .hd .en .t,html.ap2-js .ap2 .fd .hd .ja{opacity:1;transform:none;transition:none}
html.ap2-js .ap2 .fd .hd .en .ln{transform:scaleX(1);transition:none}
@media (max-width:1023px){.ap2 .grid.mag{grid-template-columns:50% 1fr;gap:32px}.ap2 .grid.mag.rev{grid-template-columns:1fr 50%}.ap2 .magsec.pic-l .magpic{margin-left:-4%}.ap2 .magsec.pic-r .magpic{margin-right:-4%}.ap2 .grid.mag .magpic img{height:440px}}
@media (max-width:639px){.ap2 .grid.mag,.ap2 .grid.mag.rev{grid-template-columns:1fr;gap:28px}.ap2 .grid.mag .ill{order:-1;width:auto;margin:0 auto}.ap2 .magsec.pic-l .magpic,.ap2 .magsec.pic-r .magpic{margin:0 auto}.ap2 .grid.mag .magpic img{height:360px;object-position:center}.ap2 .magtxt{text-align:left}.ap2 .magtxt .hd{margin-bottom:28px}}

/* v12 */
.ap2 .magtxt .list .n small{display:block;font-size:12px;font-weight:400;color:var(--text-sub);letter-spacing:.02em;margin-top:2px}
.ap2 .magtxt .note{margin-top:12px}
/* PROFILE：全文＋経歴欄（本文より一段小さく、細い線の下に） */
.ap2 .career{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;line-height:1.9;color:var(--text)}
.ap2 .career p{margin:0 0 .8em;max-width:none}
.ap2 .career .cname{font-size:14px;font-weight:500;letter-spacing:.06em}
.ap2 .career .cname span{font-weight:400;font-size:12px;color:var(--text-sub);margin-left:12px}
.ap2 .magsec#profile .magtxt .ptext p{margin-bottom:1.3em}
.ap2 .magsec#profile .grid.mag.rev{grid-template-columns:1fr 46%}
@media (max-width:639px){.ap2 .magsec#profile .grid.mag.rev{grid-template-columns:1fr}}  /* 全文が入るので文章列を広げる（v9 と同じ約540px） */
/* COLUMN：カード3列（スマホは横スワイプ） */
.ap2 .colsec .in{text-align:center}
.ap2 .colsec ul.cards3{text-align:left;grid-template-columns:repeat(3,1fr)}
.ap2 .colsec .more{margin-top:36px}
/* COMPANY：問い合わせの案内 */
.ap2 .cfree{margin:24px 0 0;font-size:15px}
.ap2 .magtxt .cfree+.more{margin-top:12px}
@media (max-width:639px){.ap2 .colsec ul.cards3{display:flex;overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;margin:0 -16px;padding-left:16px;padding-right:16px}.ap2 .colsec ul.cards3 li{flex:0 0 78%;scroll-snap-align:start}.ap2 ul.row .ill{aspect-ratio:1/1}}

/* /contact/（2026-09-30） */
.ap2 .contact .in{text-align:center}
.ap2 .contact .lead{margin:0 auto 40px;max-width:none}
.ap2 .contact .lead br.sp{display:none}
.ap2 .ill.cpic2{width:min(100%,360px);margin:0 auto}
.ap2 .cform2{padding-top:56px!important}
.ap2 .cform2 .wpcf7{max-width:720px;margin:0 auto}
.ap2 .ctel{text-align:center;padding:64px 38px 160px}
.ap2 .ctel p{max-width:none;margin:0 0 8px;color:var(--text-sub);font-size:14px}
.ap2 .ctel .tel{font-size:22px;letter-spacing:.06em;color:var(--text)}
.ap2 .ctel .tel a{text-decoration:none;color:var(--text)}
.ap2 .ctel .tel span{font-size:13px;color:var(--text-sub);margin-left:8px}
@media (max-width:639px){.ap2 .contact .lead br.sp{display:inline}.ap2 .ill.cpic2{width:64%}.ap2 .ctel{padding:48px 16px 96px}.ap2 .ctel .tel span{display:block;margin:4px 0 0}}

/* 経歴欄の写真（2026-09-30）：丸く、PC は名前の左 120px、スマホは名前の上 96px。動きは経歴欄と同じフェードのみ */
.ap2 .career{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center}
.ap2 .career br.sp{display:none}
.ap2 .magsec#profile .career{width:calc(100% + 200px)}  /* 文の列を絵の列の下の空きへ広げる（句読点での改行が1行に入るように） */
.ap2 .career .cphoto{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block}
.ap2 .career .ctext p:last-child{margin-bottom:0}
@media (max-width:1023px){.ap2 .magsec#profile .career{width:calc(100% + 160px)}}
@media (max-width:639px){.ap2 .career{grid-template-columns:1fr;gap:12px;align-items:start}.ap2 .career br.sp{display:inline}.ap2 .magsec#profile .career{width:100%}.ap2 .career .cphoto{width:96px;height:96px}}

/* SEO（2026-09-30）：見た目を変えずに見出しの構造を直す */
.ap2 h1.hd{font-size:inherit;font-weight:inherit;color:inherit}
.ap2 .intro h2.first{font-size:26px;font-weight:400;color:var(--text);background:none;border:0;padding:0;line-height:2.1;letter-spacing:.1em;margin:0 0 48px}
@media (max-width:639px){.ap2 .intro h2.first{font-size:20px;margin-bottom:36px}}
.ap2 h2.sub{font-size:16px;font-weight:500;letter-spacing:.08em;margin:64px 0 20px;padding:0;background:none;border:0;line-height:1.7;color:var(--text)}
.ap2 .hd+h2.sub,.ap2 h2.sub:first-child{margin-top:0}

/* ファーストビューの1行（2026-09-30）：ロゴの下に「中小企業とお店のWeb集客」。小さめ・細め・字間広め、#333333。h1（見た目は小さいまま）。ロゴと同じブロックなので同じフェードで出る */
.ap2 .hero.fv .fvtag{font-size:14.5px;font-weight:300;letter-spacing:.26em;color:var(--text);margin:18px 0 0;padding:0 0 0 .26em;background:none;border:0;line-height:1.6;text-align:center;white-space:nowrap}
.ap2 .hero.fv .fvlogo .hline{margin-top:22px}
@media (max-width:639px){.ap2 .hero.fv .fvtag{font-size:13px;letter-spacing:.2em;margin-top:14px;padding-left:.2em}.ap2 .hero.fv .fvlogo .hline{margin-top:18px}}

/* CRO（2026-09-30）：問い合わせの案内2行＋ボタン。末尾は大きめ、ページ途中（SOLUTION・PRICE の後）は小さめ */
.ap2 .ctab{text-align:center;margin:0 auto}
.ap2 .ctab p{max-width:none;text-align:center;letter-spacing:.06em}
.ap2 .ctab .c1{font-size:18px;font-weight:500;color:var(--text);margin:0 0 10px;line-height:1.8}
.ap2 .ctab .c2{font-size:14px;color:var(--text-sub);margin:0 0 28px;line-height:1.9}
.ap2 .ctab .c2 br.sp{display:none}
.ap2 .ctab.small{margin-top:72px;padding-top:40px;border-top:1px solid var(--line)}
.ap2 .ctab.small .c1{font-size:16px}
.ap2 .ctab.small .c2{font-size:13px;margin-bottom:22px}
.ap2 .ctab.small .cta{font-size:12px;padding:16px 40px}
.ap2 .magsec .ctab.small{max-width:720px}
/* /contact/ の「お問い合わせのあと」：番号は FLOW と同じ（アプリコット）、文字は #333333 */
.ap2 .contact .after{max-width:640px;margin:48px auto 0;text-align:left}
.ap2 .contact .after h2.sub{text-align:center;margin:0 0 20px}
.ap2 .contact ol.steps{list-style:none;margin:0;padding:0}
.ap2 .contact ol.steps li{display:flex;gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.8;color:var(--text)}
.ap2 .contact ol.steps li:last-child{border-bottom:1px solid var(--line)}
.ap2 .contact ol.steps .num{flex:0 0 2.4em;font-size:11px;letter-spacing:.2em;color:var(--brand-icon)}
.ap2 .contact .after .note{margin:16px 0 0;font-size:13px;color:var(--text-sub);text-align:center}
@media (max-width:639px){.ap2 .ctab .c2 br.sp{display:inline}.ap2 .ctab .c1{font-size:16px}.ap2 .ctab.small{margin-top:56px;padding-top:32px}.ap2 .contact .after{margin-top:36px}}

/* /service/ の4サービス（2026-09-30）：雑誌型・左右交互。絵は小さめ（高さ最大300px）、文章は広め */
.ap2 .svc{padding:56px 0 0}
.ap2 .svc+.svc{margin-top:40px;border-top:1px solid var(--line)}
.ap2 .svcgrid{grid-template-columns:34% 1fr;gap:48px;align-items:start}
.ap2 .svcgrid.rev{grid-template-columns:1fr 34%}
.ap2 .svcgrid .svcpic img{height:300px}
.ap2 .svc.pic-l .svcpic{margin-left:-4%}.ap2 .svc.pic-r .svcpic{margin-right:-4%}
.ap2 .svctxt h2.n{margin:0 0 14px;padding:0;background:none;border:0;font-size:20px;font-weight:500;letter-spacing:.06em;line-height:1.7;color:var(--text)}
.ap2 .svctxt h2.n .num{font-size:11px;letter-spacing:.2em;color:var(--brand-icon);margin-right:10px}
.ap2 .svctxt .lead1{font-size:16px;font-weight:500;margin:0 0 6px;line-height:1.9}
.ap2 .svctxt .lead2{font-size:14px;color:var(--text-sub);margin:0 0 8px;line-height:1.9}
.ap2 .svctxt .lead2 br.sp{display:none}
.ap2 .svctxt h3.sub-deep{font-size:13px;letter-spacing:.14em;margin:28px 0 10px;padding:0;background:none;border:0;line-height:1.6}
.ap2 .svctxt ul.dots{list-style:none;margin:0;padding:0}
.ap2 .svctxt ul.dots li{position:relative;padding:4px 0 4px 1.2em;font-size:14.5px;line-height:1.9;margin:0}
.ap2 .svctxt ul.dots li::before{content:"";position:absolute;left:0;top:.95em;width:5px;height:5px;border-radius:50%;background:var(--brand-icon)}
.ap2 .svctxt p{font-size:14.5px;line-height:1.9;margin:0}
.ap2 .svctxt ol.donum{list-style:none;margin:0;padding:0}
.ap2 .svctxt ol.donum li{display:flex;gap:14px;align-items:flex-start;padding:10px 0;margin:0;border-top:1px solid var(--line)}
.ap2 .svctxt ol.donum li:last-child{border-bottom:1px solid var(--line)}
.ap2 .svctxt ol.donum .num{flex:0 0 2.2em;font-size:11px;letter-spacing:.2em;color:var(--brand-icon);padding-top:.5em}
.ap2 .svctxt ol.donum b{display:block;font-weight:500;color:var(--text);font-size:15px;margin-bottom:4px}
.ap2 .svctxt ol.donum p{font-size:14px;color:var(--text)}
.ap2 .svctxt .sample{margin:12px 0 0}
.ap2 .svctxt .sample[hidden]{display:none}
@media (max-width:1023px){.ap2 .svcgrid,.ap2 .svcgrid.rev{gap:32px}.ap2 .svcgrid .svcpic img{height:260px}}
@media (max-width:639px){.ap2 .svcgrid,.ap2 .svcgrid.rev{grid-template-columns:1fr;gap:20px}.ap2 .svcgrid .ill{order:-1;width:auto;margin:0 auto}.ap2 .svc.pic-l .svcpic,.ap2 .svc.pic-r .svcpic{margin:0 auto}.ap2 .svcgrid .svcpic img{height:200px}.ap2 .svctxt .lead2 br.sp{display:inline}.ap2 .svctxt h2.n{font-size:18px}}

/* /terms/ 利用規約（2026-09-30）と、/contact/・/price/ の利用規約へのリンク */
.ap2 .terms .in{max-width:820px}
.ap2 .terms .tbody{margin-top:36px}
.ap2 .terms .tbody h2.sub{font-size:16px;margin:36px 0 10px;padding:0;background:none;border:0;font-weight:500;letter-spacing:.04em;line-height:1.7}
.ap2 .terms .tbody h2.sub .art{display:inline-block;margin-right:.8em;color:var(--brand-deep);font-size:13px;letter-spacing:.14em}
.ap2 .terms .tbody p{font-size:14.5px;line-height:1.9;margin:0 0 8px}
.ap2 .terms .tbody ol{margin:0 0 8px;padding-left:1.6em}
.ap2 .terms .tbody ol li{font-size:14.5px;line-height:1.9;margin:0 0 4px;padding:0}
.ap2 .terms .tbody ul{list-style:none;margin:4px 0 4px;padding:0}
.ap2 .terms .tbody ul li{position:relative;padding-left:1.2em;font-size:14.5px;line-height:1.9}
.ap2 .terms .tbody ul li::before{content:"";position:absolute;left:0;top:.95em;width:5px;height:5px;border-radius:50%;background:var(--brand-icon)}
.ap2 .terms .tbody table.terms-t{width:100%;border-collapse:collapse;margin:8px 0 12px;font-size:14px}
.ap2 .terms .tbody table.terms-t th,.ap2 .terms .tbody table.terms-t td{border:0;border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;background:none;font-weight:400;line-height:1.7;vertical-align:top}
.ap2 .terms .tbody table.terms-t thead th{color:var(--text-sub);font-size:12.5px;letter-spacing:.08em}
.ap2 .terms .tbody .date{margin-top:36px;color:var(--text-sub)}
.ap2 .terms .tbody .sign{color:var(--text-sub);margin-bottom:80px}
.ap2 .terms .tbody a,.ap2 .terms-note a,.ap2 .note a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
.ap2 .cform2 .terms-note{font-size:14px;color:var(--text-sub);margin:0 auto 18px;max-width:720px;text-align:center;line-height:1.8}

/* 新デザインでないページ（コラム記事・お知らせ・プライバシーポリシー・一覧）：固定ヘッダーの分だけ本文を下げる。スクロール後のヘッダー背景はページの白に合わせる（2026-09-30） */
body.ap2-hdr:not(.ap2-page) #content{padding-top:72px}
body.ap2-hdr:not(.ap2-page).ap2-scrolled #header-container,body.ap2-hdr:not(.ap2-page).ap2-scrolled .mobile-menu-buttons{background:var(--white)!important}
@media (max-width:899px){body.ap2-hdr:not(.ap2-page) #content{padding-top:64px}}

/* コラム一覧（カテゴリーページ）を新デザインにそろえる（2026-09-30 公開。現在地.md 8-41 方針7）。body.category だけに効く */
body.category #main{background:transparent;border:0;box-shadow:none}
body.category .archive-title{font-size:11px;letter-spacing:.22em;color:var(--text-sub);font-weight:400;margin:0 0 36px;padding:24px 0 0;border:0;line-height:1.6}
body.category .archive-title .fa-folder-open{display:none}
body.category .archive-title::before{content:"COLUMN";display:block;font-size:40px;letter-spacing:.2em;color:var(--text);line-height:1.2;margin-bottom:14px;font-weight:400}
body.category .archive-title::after{content:"";display:block;width:56px;height:1px;background:var(--brand-icon);margin-top:16px}
body.category .term-description,body.category .ap2-colhead{margin:0 0 40px;font-size:14.5px;line-height:1.9;color:var(--text)}
body.category .ap2-colhead img{display:block;width:min(100%,360px);height:auto;margin:0 auto 20px}
body.category .ap2-colhead .ap2-collead{text-align:center;margin:0 0 22px;max-width:none}
body.category .ap2-coltabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
body.category .ap2-coltabs a{display:inline-block;padding:7px 16px;border:1px solid var(--line);border-radius:999px;color:var(--text);text-decoration:none;font-size:12.5px;letter-spacing:.08em;line-height:1.6;background:transparent}
body.category .ap2-coltabs a:hover{border-color:var(--brand-icon);color:var(--brand-deep)}
body.category .ap2-coltabs a.on{background:var(--text);border-color:var(--text);color:var(--white)}
body.category #list .entry-card-wrap{border:0;border-bottom:1px solid var(--line);background:transparent;padding:22px 0;margin:0}
body.category #list .entry-card-wrap:hover{background:transparent;opacity:.85}
body.category #list .entry-card-thumb{margin-right:22px;border:0;border-radius:4px;overflow:hidden}
body.category #list .cat-label{display:none}
body.category #list .entry-card-title{font-size:16px;font-weight:500;line-height:1.7;color:var(--text);margin-bottom:8px}
body.category #list .entry-card-snippet{font-size:13.5px;line-height:1.8;color:var(--text-sub)}
body.category #list .entry-card-meta{color:var(--text-sub);font-size:12px}

@media (max-width:639px){body.category .archive-title::before{font-size:30px}body.category .ap2-colhead img{width:min(100%,260px)}body.category #list .entry-card-thumb{margin-right:14px}}

/* コラムの子カテゴリーで記事が0本のとき：Cocoon の NOT FOUND を隠し、スニペット26の「準備中」を出す（2026-09-30） */
body.ap2-column-child .posts-not-found{display:none}

/* スマホのメニューアイコン：Snow Monkey Blocks 停止後は SVG ではなく Font Awesome のフォント描画になったため、大きさと色を同じにする。押せる範囲は 44px 四方以上（2026-10-01 8-42 段階1） */
body.ap2-hdr .mobile-menu-buttons .menu-button .menu-icon .fas,body.ap2-hdr .mobile-menu-buttons .menu-button .menu-icon .fa,body.ap2-hdr .mobile-menu-buttons .menu-button .menu-icon [class*="fa-"]{font-size:1.4em;color:var(--text);line-height:1}
body.ap2-hdr .mobile-menu-buttons .menu-button .menu-button-in{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
body.ap2-hdr .navi-menu-close-button.menu-close-button{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;margin-left:16px}
body.ap2-hdr .navi-menu-close-button .fas,body.ap2-hdr .navi-menu-close-button .fa,body.ap2-hdr .navi-menu-close-button [class*="fa-"]{font-size:1em;color:var(--text)}

/* フッターのロゴ：Cocoon のフッター表示タイプ「上下」では非表示になるのを打ち消し、メニューの上に中央ぞろえで出す。大きさはヘッダーと同じ（2026-10-01 8-42 4-①） */
body.ap2-hdr .footer-bottom.fdt-up-and-down .footer-bottom-logo,body.ap2-hdr .footer-bottom .footer-bottom-logo{display:block;position:static;float:none;text-align:center;margin:0 0 20px;line-height:1}
body.ap2-hdr .footer-bottom-logo .logo-image{padding:0}
body.ap2-hdr .footer-bottom-logo img{height:34px;width:auto;display:inline-block}
@media (max-width:639px){body.ap2-hdr .footer-bottom-logo img{height:30px}}

/* フッターのロゴ：スマホ幅でもメニューの上に出す（Cocoon はスマホでロゴを下に回すため、並び順を入れ替える）（2026-10-01 8-42 4-①） */
@media (max-width:899px){body.ap2-hdr .footer-bottom{display:flex;flex-direction:column;align-items:stretch}body.ap2-hdr .footer-bottom .footer-bottom-logo{order:-1;margin:0 0 24px;text-align:center}body.ap2-hdr .footer-bottom .footer-bottom-content{order:1}}

/* スマホのフッター：Cocoon はスマホでメニューをウィジェット（.footer-widgets-mobile）として上に出し、ロゴ付きの下段は下に回す。ウィジェットのメニューを隠し、下段のメニュー（同じ4項目）を縦に出して「ロゴ → メニュー → 著作権」の順にする（2026-10-01 8-42 4-①） */
@media (max-width:899px){body.ap2-hdr .footer-widgets-mobile{display:none}body.ap2-hdr .footer-bottom .footer-bottom-content #navi-footer,body.ap2-hdr .footer-bottom .footer-bottom-content #navi-footer ul,body.ap2-hdr .footer-bottom .footer-bottom-content #navi-footer li{display:block;height:auto;margin:0;padding:0;border:0;float:none;width:auto}body.ap2-hdr #navi-footer ul{padding:0 16px}body.ap2-hdr #navi-footer li a{display:block;padding:12px 0;font-size:15px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);text-align:left}body.ap2-hdr .footer-bottom .copyright{margin-top:28px}}

/* /service/ MEO対策の見本画像（口コミカードの水彩。2026-10-01 8-39 #37）：文章の幅いっぱいまで、角を少し丸く。登場はほかの絵と同じ */
.ap2 .svctxt .sample{margin:14px 0 4px;width:auto;max-width:480px}
.ap2 .svctxt .sample img{display:block;width:100%;height:auto;border-radius:6px}
@media (max-width:639px){.ap2 .svctxt .sample{max-width:none}}

/* ===== 2026-10-01 トップの修正4つ（現在地.md 8-42）。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_4fix_2026-10-01.txt） ===== */
:root{--nav-sub:#8A8278}
/* ナビ：英語の下に日本語を小さく（線なし、英語が主役）。CONTACT ボタンは2段 */
body.ap2-hdr .ap2-nav a{display:flex;flex-direction:column;align-items:center;padding:6px 9px;line-height:1.3}
body.ap2-hdr .ap2-nav a .en{font-size:12px;letter-spacing:.12em}
body.ap2-hdr .ap2-nav a .ja{font-size:9.5px;letter-spacing:.05em;color:var(--nav-sub);margin-top:3px;font-weight:400}
body.ap2-hdr .ap2-nav a:hover .ja{color:var(--text-sub)}
body.ap2-hdr .ap2-hcta{display:flex;flex-direction:column;align-items:center;line-height:1.3;padding:7px 16px 6px}
body.ap2-hdr .ap2-hcta .en{display:block}
body.ap2-hdr .ap2-hcta .ja{display:block;font-size:9px;letter-spacing:.08em;color:rgba(255,255,255,.78);margin-top:2px;text-transform:none;font-weight:400}
body.ap2-hdr .ap2-mnav a{display:flex;align-items:baseline;gap:12px}
body.ap2-hdr .ap2-mnav a .ja{font-size:11px;letter-spacing:.08em;color:var(--nav-sub)}
@media (max-width:899px){body.ap2-hdr .ap2-hcta{padding:6px 12px 5px}body.ap2-hdr .ap2-hcta .ja{font-size:8.5px}}
/* 料金の打ち出し：1行目は大きめ・細め・字間やや広め、2〜3行目は本文サイズのグレー、3つの札は細い線の枠（スマホは縦） */
.ap2 .pclaim{text-align:center;margin:0 auto 44px}
.ap2 .pclaim p{max-width:none;text-align:center}
.ap2 .pclaim .l1{font-size:19px;font-weight:300;letter-spacing:.12em;color:var(--text);line-height:1.8;margin:0 0 12px}
.ap2 .pclaim .l2{font-size:15px;color:var(--text-sub);line-height:2;letter-spacing:.04em;margin:0 0 22px}
.ap2 .pclaim br.sp{display:none}
.ap2 ul.tags3{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.ap2 ul.tags3 li{margin:0;padding:6px 14px;border:1px solid var(--line);border-radius:4px;background:none;font-size:13px;letter-spacing:.06em;line-height:1.6;color:var(--text);white-space:nowrap}
.ap2 ul.tags3 .ck{color:var(--brand-icon);margin-right:.5em;font-weight:500}
.ap2 .magtxt .pclaim{margin-bottom:36px}
/* 支援のイメージ：導入2行、3業種（絵 → 業種名 → いま／お客さんの選び方／やること／目指す姿）。文は左ぞろえ、「目指す姿」だけ太字 */
.ap2 .sintro{text-align:center;max-width:none;margin:0 auto 44px;font-size:15px;line-height:2.1;letter-spacing:.04em}
.ap2 .sintro br.sp{display:none}
.ap2 ul.row.sup3{max-width:1044px;gap:32px;align-items:stretch}
.ap2 ul.row.sup3 li{display:flex;flex-direction:column;text-align:center}
.ap2 ul.row.sup3 .cap{margin-bottom:6px}
.ap2 ul.row.sup3 .cap b{font-size:16px}
.ap2 .sdl{display:flex;flex-direction:column;flex:1 1 auto;margin:0;padding:0;text-align:left}
.ap2 .sdl dt{font-size:12px;font-weight:500;color:var(--brand-deep);letter-spacing:.1em;line-height:1.6;margin:16px 0 4px}
.ap2 .sdl dd{margin:0;font-size:14px;line-height:1.9;letter-spacing:.01em;color:var(--text)}
.ap2 .sdl .sgoal{margin-top:auto;padding-top:4px}
.ap2 .sdl dd.goal{font-weight:500;color:var(--text)}
.ap2 .ctab.supcta{margin-top:64px}
.ap2 .ctab.supcta .c1{font-size:17px}
.ap2 .ctab.supcta .c2{font-size:14px;margin-bottom:24px}
.ap2 .ctab.supcta br.sp{display:none}
@media (max-width:1100px){.ap2 .sdl dd{font-size:13px}}
/* FLOW 6ステップ：横一列（6列）、「ここまで無料」は左4列 */
.ap2 ul.row.six{grid-template-columns:repeat(6,1fr);max-width:1000px;gap:16px}
.ap2 ul.row li:nth-child(6) .sl{transition-delay:.75s}
.ap2 .flowwrap.pict.six .free-bracket{width:calc((100% - 5*16px) * 4 / 6 + 3*16px)}
.ap2 .flowwrap.six:not(.pict) .free-bracket{width:calc(100% * 4 / 6)}
.ap2 ol.flow5.pics.six li .ill{width:100%}
@media (max-width:1023px){.ap2 ul.row.six{gap:12px}.ap2 .flowwrap.pict.six .free-bracket{width:calc((100% - 5*12px) * 4 / 6 + 3*12px)}.ap2 ul.row.six .cap b{font-size:13px}}
@media (max-width:899px){.ap2 ul.row.six{grid-template-columns:repeat(3,1fr);max-width:600px}.ap2 ul.row.six .cap b{font-size:14px}.ap2 .flowwrap.pict.six{padding-top:0}.ap2 .flowwrap.pict.six .free-bracket{position:static;width:auto;height:auto;border:0;border-left:1px solid var(--brand-icon);text-align:left;padding-left:12px;margin-bottom:12px}.ap2 .flowwrap.pict.six .free-bracket span{top:0;padding:0;background:none}}
@media (max-width:639px){.ap2 .pclaim br.sp,.ap2 .sintro br.sp,.ap2 .ctab.supcta br.sp{display:inline}.ap2 .pclaim .l1{font-size:17px;letter-spacing:.1em}.ap2 .pclaim .l2{font-size:14px}.ap2 ul.tags3{display:inline-flex;flex-direction:column;align-items:stretch;gap:8px}.ap2 ul.tags3 li{text-align:left}
.ap2 ul.row.sup3{grid-template-columns:1fr;max-width:340px;gap:40px}.ap2 ul.row.sup3 .cap b{font-size:16px}.ap2 .sdl dd{font-size:14px}
.ap2 ul.row.six{grid-template-columns:1fr 1fr;max-width:360px;gap:20px 16px}.ap2 ul.row.six .cap b{font-size:14px}.ap2 .ctab.supcta{margin-top:48px}.ap2 .ctab.supcta .c1{font-size:16px}}
/* 2026-10-01 追記2：雑誌型の文章列（約400px）では打ち出しの2〜3行目を句読点で折り返す。SUPPORT の絵が縮まないように */
.ap2 .magtxt .pclaim br.sp{display:inline}
.ap2 .magtxt .pclaim .l2{font-size:14px}
.ap2 ul.row.sup3 .ill{flex:0 0 auto}

/* ===== 2026-10-02 強調の部品（サイト全体）と、支援のイメージの段組み。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_emphasis_2026-10-02.txt） ===== */
/* 強調：太字＝濃く太く／マーカー＝文字の下半分にうすいアプリコットの帯（コラムの marker-under と同じ）／アプリコットの文字＝--brand-deep（ゴール・成果の言葉） */
.ap2 b.em,.ap2 strong.em{font-weight:700;color:var(--text)}
.ap2 .mk{background:linear-gradient(transparent 60%,var(--brand-pale) 60%);padding:0 .1em}
.ap2 .ac{color:var(--brand-deep);font-weight:500}
/* 支援のイメージ（業種ごとの横長の段。左に絵と業種名、右に「項目名｜中身」の2列） */
.ap2 ul.suprows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ap2 ul.suprows li{margin:0;padding:40px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start}
.ap2 ul.suprows .spic{margin:0;text-align:center}
.ap2 ul.suprows .spic .ill{margin:0 auto 12px;width:100%;aspect-ratio:1/1}
.ap2 ul.suprows .spic .ill img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
.ap2 ul.suprows .spic .ind{display:block;font-size:15px;font-weight:500;color:var(--brand-deep);letter-spacing:.06em;line-height:1.6}
.ap2 .sdl2{margin:0;padding:0;display:grid;grid-template-columns:8.5em 1fr;column-gap:20px;row-gap:14px;align-items:baseline}
.ap2 .sdl2 dt{margin:0;font-size:12px;font-weight:500;color:var(--brand-deep);letter-spacing:.1em;line-height:1.9;padding-top:.15em}
.ap2 .sdl2 dd{margin:0;font-size:14.5px;line-height:1.9;letter-spacing:.02em;color:var(--text);overflow-wrap:anywhere}
.ap2 .sdl2 .goal{grid-column:1 / -1;display:grid;grid-template-columns:8.5em 1fr;column-gap:20px;align-items:baseline;margin-top:6px;padding:14px 18px 14px 0;background:var(--white);border-left:3px solid var(--brand-main)}
.ap2 .sdl2 .goal dt{padding-left:18px}
.ap2 .sdl2 .goal dd{font-weight:500}
@media (max-width:1023px){.ap2 ul.suprows li{grid-template-columns:180px 1fr;gap:28px}.ap2 .sdl2,.ap2 .sdl2 .goal{grid-template-columns:7.5em 1fr}}
@media (max-width:639px){.ap2 ul.suprows li{grid-template-columns:1fr;gap:16px;padding:32px 0}.ap2 ul.suprows .spic .ill{width:62%}.ap2 .sdl2,.ap2 .sdl2 .goal{grid-template-columns:1fr;row-gap:4px}.ap2 .sdl2 dt{margin-top:12px}.ap2 .sdl2 dt:first-child{margin-top:0}.ap2 .sdl2 .goal{margin-top:14px;padding:12px 14px}.ap2 .sdl2 .goal dt{padding-left:0}}
/* 2026-10-02 追記：支援のイメージの文は左ぞろえ（pbook の中央ぞろえを打ち消す） */
.ap2 ul.suprows,.ap2 ul.suprows .sdl2,.ap2 ul.suprows .sdl2 dt,.ap2 ul.suprows .sdl2 dd{text-align:left}
.ap2 ul.suprows .spic{text-align:center}

/* ===== 2026-10-02（夜）強調の3段階・FLOW の高さそろえ・専用ページの見出しの帯・本文の幅。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_phead_2026-10-02.txt） ===== */
/* 強調の3段階（浩平の決定）：①太字＋色（--brand-deep）＝いちばん大事な言葉／②太字＋マーカー＝決め手・安心材料／③太字＝要点 */
.ap2 .ac{color:var(--brand-deep);font-weight:700}
.ap2 .mk{font-weight:700;background:linear-gradient(transparent 60%,var(--brand-pale) 60%);padding:0 .1em}
.ap2 b.em,.ap2 strong.em{font-weight:700}
/* FLOW：絵は同じ高さの正方形の枠に下ぞろえ、番号とステップ名は同じ高さの行、説明は上ぞろえ（トップ row.six と /flow/ ol.flow5.pics） */
.ap2 ul.row.six li{display:flex;flex-direction:column;align-items:center}
.ap2 ul.row.six .ill{flex:0 0 auto;width:100%;aspect-ratio:1/1;margin:0 auto 12px}
.ap2 ul.row.six .cap{display:flex;flex-direction:column;align-items:center;width:100%}
.ap2 ul.row.six .cap .num{height:1.4em;line-height:1.4em;margin-bottom:4px}
.ap2 ul.row.six .cap b{min-height:1.8em;line-height:1.8em;white-space:nowrap}
.ap2 ol.flow5.pics li{display:flex;flex-direction:column;align-items:center}
.ap2 ol.flow5.pics li .ill{flex:0 0 auto;width:100%;aspect-ratio:1/1;margin:0 auto 10px;display:flex;align-items:flex-end;justify-content:center}
.ap2 ol.flow5.pics li .ill img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
.ap2 ol.flow5.pics .num{height:1.4em;line-height:1.4em;margin-bottom:6px}
.ap2 ol.flow5.pics .n{min-height:1.8em;line-height:1.8em;margin-bottom:8px;white-space:nowrap}
.ap2 ol.flow5.pics .d{align-self:stretch;text-align:center}
@media (max-width:899px){.ap2 ol.flow5.pics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 12px}.ap2 ol.flow5.pics .far{display:none}.ap2 ol.flow5.pics li{padding:0}}
@media (max-width:639px){.ap2 ol.flow5.pics{grid-template-columns:1fr 1fr;gap:20px 16px}.ap2 ol.flow5.pics li{flex-direction:column;text-align:center;flex-wrap:nowrap;gap:0}.ap2 ol.flow5.pics li .ill{width:100%}.ap2 ol.flow5.pics .d{padding-left:0;margin-top:0;flex:0 0 auto}.ap2 ol.flow5.pics .num,.ap2 ol.flow5.pics .n{margin:0 0 4px}.ap2 ul.row.six .cap b{white-space:normal;font-size:14px}}
/* 専用ページの見出しの帯：左に見出し＋説明、右に小さめの絵（PC 高さ240px）。スマホは 見出し→説明→絵（高さ160px） */
.ap2 section.first{padding-top:120px}
.ap2 .phead{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:center;padding:0 0 36px;border-bottom:1px solid var(--line);margin-bottom:56px}
.ap2 .phead .hd{margin-bottom:22px}
.ap2 .phead .hd .en{font-size:34px}
.ap2 .phead .pdesc{max-width:none;margin:0;font-size:15px;line-height:2;letter-spacing:.03em}
.ap2 .phead .pdesc br.sp{display:none}
.ap2 .phead .phpic{margin:0;height:240px;width:100%}
.ap2 .phead .phpic img{width:100%;height:100%;object-fit:contain;object-position:right center;display:block}
.ap2 .contact .phead .pdesc{margin:0}
/* 本文の幅：1行 全角38〜42字程度（15px × 42 ≒ 640px）。雑誌型の文章列は magtxt の指定が優先 */
.ap2 p,.ap2 .lead{max-width:640px}
.ap2 .svctxt p,.ap2 .svctxt .lead2{max-width:none}
.ap2 .terms .in{max-width:720px}
@media (max-width:1023px){.ap2 .phead{grid-template-columns:1fr 260px;gap:28px}.ap2 .phead .phpic{height:200px}}
@media (max-width:639px){.ap2 section.first{padding-top:100px}.ap2 .phead{grid-template-columns:1fr;gap:20px;padding-bottom:28px;margin-bottom:40px}.ap2 .phead .hd{margin-bottom:16px}.ap2 .phead .hd .en{font-size:28px}.ap2 .phead .pdesc{font-size:14.5px}.ap2 .phead .pdesc br.sp{display:inline}.ap2 .phead .phpic{height:160px;order:3}.ap2 .phead .phpic img{object-position:center}}
/* 2026-10-02 追記2：FLOW の絵は正方形の枠に絶対配置（絵の縦横比で枠が伸びないように）。見出しの帯は左ぞろえ。スマホの雑誌型の絵は小さめに */
.ap2 ul.row.six .ill,.ap2 ol.flow5.pics li .ill{position:relative;aspect-ratio:1/1;height:auto;min-height:0;overflow:hidden;display:block}
.ap2 ul.row.six .ill img,.ap2 ol.flow5.pics li .ill img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.ap2 .phead,.ap2 .phead .ptxt,.ap2 .phead .pdesc{text-align:left}
.ap2 .contact .phead .pdesc{max-width:none}
@media (max-width:639px){.ap2 .grid.mag .magpic,.ap2 .grid.mag.rev .magpic{width:72%;margin:0 auto}.ap2 .grid.mag .magpic img{max-height:300px}.ap2 .phead .phpic{height:150px}}

/* ===== 2026-10-02（深夜）/service/ の見せ方・/flow/ の不安に答える段・/price/ のカード。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_pages_2026-10-02.txt） ===== */
/* /service/：目次ボタン */
.ap2 .svcnav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ap2 .svcnav li{margin:0;padding:0}
.ap2 .svcnav a{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 12px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--text);text-decoration:none;font-size:14px;letter-spacing:.04em;line-height:1.5}
.ap2 .svcnav a:hover{border-color:var(--brand-icon);color:var(--brand-deep)}
.ap2 .svcnav .ic svg{width:22px;height:22px;color:var(--brand-icon);display:block}
/* /service/：各サービス（頭・中段・下段） */
.ap2 section.svc2{padding-top:112px}
.ap2 .svhead{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:36px}
.ap2 .svhead .svpic{margin:0;height:120px;display:flex;align-items:flex-end;justify-content:center}
.ap2 .svhead .svpic img{width:auto;height:120px;max-width:100%;object-fit:contain;display:block}
.ap2 .svhead h2.n{font-size:22px;font-weight:500;letter-spacing:.06em;margin:0 0 10px;padding:0;background:none;border:0;line-height:1.5;color:var(--text)}
.ap2 .svhead h2.n .num{font-size:11px;letter-spacing:.2em;color:var(--brand-icon);margin-right:12px;vertical-align:middle}
.ap2 .svhead .lead2{font-size:16px;font-weight:500;line-height:1.9;margin:0 0 6px;max-width:none}
.ap2 .svhead .sub{font-size:14px;color:var(--text-sub);line-height:1.9;margin:0;max-width:none}
.ap2 .svhead .sub br.sp{display:none}
.ap2 .svmid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.ap2 .svmid h3.sub-deep{margin:0 0 14px;font-size:14px;letter-spacing:.1em}
.ap2 ul.checks{list-style:none;margin:0;padding:0}
.ap2 ul.checks li{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.8}
.ap2 ul.checks li:last-child{border-bottom:1px solid var(--line)}
.ap2 ul.checks .ck svg{width:20px;height:20px;color:var(--brand-icon);display:block;margin-top:.35em;flex:0 0 auto}
.ap2 .svmid ol.donum{list-style:none;margin:0;padding:0}
.ap2 .svmid ol.donum li{display:flex;gap:12px;align-items:flex-start;margin:0;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.8}
.ap2 .svmid ol.donum li:last-child{border-bottom:1px solid var(--line)}
.ap2 .svmid ol.donum .num{flex:0 0 2.2em;font-size:11px;letter-spacing:.2em;color:var(--brand-icon);padding-top:.5em}
.ap2 .svmid ol.donum b{display:block;font-weight:500;margin-bottom:2px}
.ap2 .svmid ol.donum p{font-size:13.5px;color:var(--text-sub);line-height:1.8;margin:0;max-width:none}
.ap2 .svmid ol.donum .sample{margin:12px 0 4px;width:min(100%,320px)}
.ap2 .svboxes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:36px}
.ap2 .svbox{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:18px 20px;min-height:100%}
.ap2 .svbox .bl{display:block;font-size:11px;letter-spacing:.14em;color:var(--brand-deep);font-weight:500;margin-bottom:8px}
.ap2 .svbox .amt{display:block;font-size:26px;font-weight:500;letter-spacing:.02em;line-height:1.4;color:var(--text)}
.ap2 .svbox .amt small{font-size:13px;font-weight:400;color:var(--text-sub);margin-left:4px}
.ap2 .svbox .bn,.ap2 .svbox .bv{display:block;font-size:13.5px;line-height:1.8;color:var(--text);margin-top:4px}
.ap2 .svbox ul{list-style:none;margin:0;padding:0}
.ap2 .svbox ul li{position:relative;padding-left:1.1em;font-size:13.5px;line-height:1.8;margin:0}
.ap2 .svbox ul li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--brand-icon)}
@media (max-width:1023px){.ap2 .svcnav a{font-size:13px;padding:12px 8px;gap:8px}.ap2 .svmid{gap:28px}}
@media (max-width:639px){.ap2 .svcnav ul{grid-template-columns:1fr 1fr;gap:10px}.ap2 section.svc2{padding-top:80px}.ap2 .svhead{grid-template-columns:1fr;gap:12px;text-align:left}.ap2 .svhead .svpic{height:100px;justify-content:flex-start}.ap2 .svhead .svpic img{height:100px}.ap2 .svhead h2.n{font-size:20px}.ap2 .svhead .sub br.sp{display:inline}.ap2 .svmid{grid-template-columns:1fr;gap:28px}.ap2 .svboxes{grid-template-columns:1fr;gap:12px;margin-top:28px}}
/* /flow/：6ステップを縦の段に（絵｜番号・名前・説明｜お願いすること・よくある不安） */
.ap2 ol.flowrows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ap2 ol.flowrows li{margin:0;padding:36px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:170px 1fr;gap:36px;align-items:start}
.ap2 ol.flowrows .fpic .ill{margin:0;width:100%;aspect-ratio:1/1;position:relative}
.ap2 ol.flowrows .fpic .ill img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.ap2 ol.flowrows .num{font-size:11px;letter-spacing:.2em;color:var(--brand-icon);margin-right:12px}
.ap2 ol.flowrows .free{display:inline-block;font-size:10.5px;letter-spacing:.12em;color:var(--brand-deep);border:1px solid var(--brand-main);border-radius:999px;padding:1px 10px;line-height:1.6;vertical-align:middle}
.ap2 ol.flowrows h2.n{font-size:20px;font-weight:500;letter-spacing:.06em;margin:6px 0 8px;padding:0;background:none;border:0;line-height:1.5;color:var(--brand-deep)}
.ap2 ol.flowrows p.d{font-size:15px;line-height:1.9;margin:0 0 18px;max-width:none}
.ap2 .fboxes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ap2 .fbox{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.ap2 .fbox .bl{display:block;font-size:11px;letter-spacing:.14em;color:var(--brand-deep);font-weight:500;margin-bottom:6px}
.ap2 .fbox p{font-size:13.5px;line-height:1.8;margin:0;max-width:none}
.ap2 .fbox .q{font-weight:500;margin-bottom:4px}
.ap2 .fbox .q::before{content:"Q";display:inline-block;width:1.5em;color:var(--text-sub);font-weight:400}
.ap2 .fbox .a::before{content:"A";display:inline-block;width:1.5em;color:var(--brand-icon);font-weight:500}
.ap2 table.price.term th{width:36%}
.ap2 table.price.term .tv{white-space:nowrap;font-weight:500}
.ap2 table.price.term .tn{font-size:13px;color:var(--text-sub)}
@media (max-width:1023px){.ap2 ol.flowrows li{grid-template-columns:130px 1fr;gap:24px}}
@media (max-width:639px){.ap2 ol.flowrows li{grid-template-columns:1fr;gap:12px;padding:28px 0}.ap2 ol.flowrows .fpic .ill{width:46%}.ap2 .fboxes{grid-template-columns:1fr;gap:10px}.ap2 table.price.term th{width:40%}.ap2 table.price.term .tv{white-space:normal}.ap2 table.price.term .tn{display:none}}
/* /price/：単価のカード（PC 3列×2段）、共通の条件、「こんな方に」のセット（PC 2列×2段） */
.ap2 ul.pcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ap2 ul.pcards li{margin:0;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:22px 22px 18px;display:flex;flex-direction:column}
.ap2 ul.pcards h3.pn{font-size:15px;font-weight:500;letter-spacing:.04em;margin:0 0 10px;line-height:1.6;color:var(--brand-deep)}
.ap2 ul.pcards .amt{font-size:28px;font-weight:500;letter-spacing:.02em;line-height:1.3;margin:0 0 14px;color:var(--text);max-width:none}
.ap2 ul.pcards .amt small{font-size:13px;font-weight:400;color:var(--text-sub);margin-left:4px}
.ap2 ul.pcards ul.pin{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line)}
.ap2 ul.pcards ul.pin li{position:relative;padding:0 0 0 1.1em;border-radius:0;font-size:13.5px;line-height:1.8;margin:0;background:none;border:0;display:block}
.ap2 ul.pcards ul.pin li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--brand-icon)}
.ap2 .pterms{margin-top:28px;padding:18px 20px;border:1px solid var(--line);border-radius:6px}
.ap2 .pterms .bl{display:block;font-size:11px;letter-spacing:.14em;color:var(--brand-deep);font-weight:500;margin-bottom:8px}
.ap2 .pterms ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.ap2 .pterms ul li{position:relative;padding-left:1.1em;font-size:13px;line-height:1.8;color:var(--text-sub);margin:0}
.ap2 .pterms ul li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--brand-icon)}
.ap2 .pterms a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:3px}
.ap2 ul.psets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ap2 ul.psets li{margin:0;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.ap2 ul.psets .bl{font-size:11px;letter-spacing:.14em;color:var(--brand-deep);font-weight:500}
.ap2 ul.psets h3.pw{font-size:17px;font-weight:500;letter-spacing:.04em;margin:0;line-height:1.6}
.ap2 ul.psets h3.pw small{display:block;font-size:12.5px;font-weight:400;color:var(--text-sub);letter-spacing:.04em;margin-top:2px}
.ap2 ul.psets .worry{font-size:14px;color:var(--text);line-height:1.8;margin:0;max-width:none;padding-left:12px;border-left:2px solid var(--brand-main)}
.ap2 ul.psets .tags{display:flex;flex-wrap:wrap;gap:8px}
.ap2 ul.psets .tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;letter-spacing:.04em;padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--text)}
.ap2 ul.psets .tag .ic svg{width:16px;height:16px;color:var(--brand-icon);display:block}
.ap2 ul.psets dl.pm{margin:auto 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;gap:28px}
.ap2 ul.psets dl.pm div{display:flex;align-items:baseline;gap:10px}
.ap2 ul.psets dl.pm dt{font-size:11px;letter-spacing:.12em;color:var(--text-sub)}
.ap2 ul.psets dl.pm dd{margin:0;font-size:20px;font-weight:500;letter-spacing:.02em;color:var(--text)}
@media (max-width:1023px){.ap2 ul.pcards{grid-template-columns:1fr 1fr}.ap2 ul.pcards .amt{font-size:24px}}
@media (max-width:639px){.ap2 ul.pcards,.ap2 ul.psets{grid-template-columns:1fr;gap:12px}.ap2 ul.pcards li{padding:18px 18px 16px}.ap2 .pterms ul{grid-template-columns:1fr}.ap2 ul.psets dl.pm{gap:18px;flex-wrap:wrap}.ap2 ul.psets dl.pm dd{font-size:18px}}


/* ===== 2026-10-02（夕）サイト全体の修正：支援のイメージの札と線・/service/ の効果とAIの一言・/flow/ のご用意いただくもの・/price/ の条件とカードの高さ・/faq/ のタブ・/contact/ の2つの場合・トップの REASON 説明・PROFILE 2列・COMPANY 事業内容。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_site_2026-10-02.txt） ===== */
/* 支援のイメージ：項目名は小さな札、行ごとに薄い線 */
.ap2 .sdl2.v3{display:block}
.ap2 .sdl2.v3 .srow{display:grid;grid-template-columns:8.5em 1fr;column-gap:20px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.ap2 .sdl2.v3 .srow:first-child{padding-top:0}
.ap2 .sdl2.v3 dt{padding-top:0;line-height:1.9}
.ap2 .sdl2.v3 dt .lab{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--brand-deep);background:var(--brand-pale);border-radius:4px;padding:1px 9px;line-height:1.8;white-space:nowrap}
.ap2 .sdl2.v3 .goal{margin-top:14px;grid-template-columns:8.5em 1fr}
.ap2 .sdl2.v3 .goal dt{padding-left:0}
.ap2 .sdl2.v3 .srow.ext{padding:14px 0}
.ap2 .sdl2.v3 ol.months{list-style:none;margin:0;padding:0}
.ap2 .sdl2.v3 ol.months li{display:grid;grid-template-columns:5em 1fr;gap:12px;margin:0;padding:4px 0;font-size:14px;line-height:1.8}
.ap2 .sdl2.v3 ol.months b{font-weight:500;color:var(--brand-deep);font-size:13px;letter-spacing:.06em;padding-top:.1em}
.ap2 .sdl2.v3 .srow.ext .sv,.ap2 .sdl2.v3 .srow.ext .pr{display:block;font-size:14px;line-height:1.8}
.ap2 .sdl2.v3 .srow.ext .pr{font-weight:500}
.ap2 .sdl2.v3 .setlink{display:inline-block;margin-top:8px;font-size:13px;letter-spacing:.06em;color:var(--brand-deep);text-decoration:none;border-bottom:1px solid var(--brand-main);padding-bottom:2px}
.ap2 .sdl2.v3 .setlink .ar{color:var(--brand-main);margin-left:.5em}
@media (max-width:1023px){.ap2 .sdl2.v3 .srow,.ap2 .sdl2.v3 .goal{grid-template-columns:7.5em 1fr}}
@media (max-width:639px){.ap2 .sdl2.v3 .srow,.ap2 .sdl2.v3 .goal{grid-template-columns:1fr;row-gap:4px}.ap2 .sdl2.v3 ol.months li{grid-template-columns:1fr;gap:0}.ap2 .sdl2.v3 .srow{padding:12px 0}}
/* /service/：やることの下のAIの一言、期待できる効果 */
.ap2 .svmid .ainote{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:13px;line-height:1.8;color:var(--text-sub);max-width:none}
.ap2 .svmid .ainote .ic svg{width:20px;height:20px;color:var(--brand-icon);display:block;margin-top:.3em;flex:0 0 auto}
.ap2 .sveff{margin-top:36px;padding:22px 24px 16px;background:var(--white);border:1px solid var(--line);border-radius:6px}
.ap2 .sveff h3.sub-deep{margin:0 0 12px;font-size:14px;letter-spacing:.1em}
.ap2 ul.effs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 24px}
.ap2 ul.effs li{display:flex;gap:8px;align-items:flex-start;margin:0;padding:6px 0;font-size:14px;line-height:1.8}
.ap2 ul.effs .ck svg{width:18px;height:18px;color:var(--brand-icon);display:block;margin-top:.4em;flex:0 0 auto}
.ap2 .sveff .note{margin:10px 0 0;font-size:12px;color:var(--text-sub);max-width:none}
@media (max-width:1023px){.ap2 ul.effs{grid-template-columns:1fr;gap:0}}
@media (max-width:639px){.ap2 .sveff{padding:18px 18px 14px}}
/* /flow/：ご用意いただくもの */
.ap2 .fbox.prep{margin-top:14px}
.ap2 .fbox.prep dl.prep{margin:0;padding:0}
.ap2 .fbox.prep dl.prep div{display:grid;grid-template-columns:9.5em 1fr;gap:4px 14px;padding:6px 0;border-top:1px solid var(--line)}
.ap2 .fbox.prep dl.prep div:first-child{border-top:0;padding-top:0}
.ap2 .fbox.prep dt{font-size:13.5px;font-weight:500;line-height:1.8;color:var(--text)}
.ap2 .fbox.prep dd{margin:0;font-size:13.5px;line-height:1.8;color:var(--text)}
.ap2 .fbox.prep .pw{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:13px;line-height:1.8;color:var(--text-sub)}
@media (max-width:639px){.ap2 .fbox.prep dl.prep div{grid-template-columns:1fr;gap:0}}
/* /price/：共通の条件の行間をそろえる（2列に流し込む）、カードの名前・金額の高さをそろえる */
.ap2 .pterms ul{display:block;columns:2;column-gap:24px}
.ap2 .pterms ul li{break-inside:avoid;margin:0 0 4px}
@supports (grid-template-rows:subgrid){.ap2 ul.pcards li{display:grid;grid-template-rows:subgrid;grid-row:span 3;align-content:start}.ap2 ul.pcards h3.pn{align-self:end}}
/* /faq/：3つのタブ */
.ap2 .ftabs{display:flex;gap:4px;margin:40px 0 44px;border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.ap2 .ftabs [role=tab]{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin:0 0 -1px;padding:12px 20px;font-family:inherit;font-size:14px;letter-spacing:.06em;line-height:1.6;color:var(--text-sub);cursor:pointer;white-space:nowrap;border-radius:0}
.ap2 .ftabs [role=tab]:hover{color:var(--text)}
.ap2 .ftabs [role=tab][aria-selected=true]{color:var(--brand-deep);border-bottom-color:var(--brand-main);font-weight:500}
.ap2 .ftabs [role=tab]:focus-visible{outline:2px solid var(--brand-main);outline-offset:-2px}
.ap2 .fpanel[hidden]{display:none}
.ap2 .fpanel+.fpanel{margin-top:88px}
.ap2 .fpanels.tabs-on .fpanel+.fpanel{margin-top:0}
@media (max-width:639px){.ap2 .ftabs{margin:28px -16px 32px;padding:0 16px;gap:0}.ap2 .ftabs [role=tab]{padding:10px 12px;font-size:13px}.ap2 .fpanel+.fpanel{margin-top:64px}}
/* /contact/：ご質問の場合・ご相談の場合 */
.ap2 .contact .after .acol{margin-top:22px}
.ap2 .contact .after .acol:first-of-type{margin-top:0}
.ap2 .contact .after .lab{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.12em;color:var(--brand-deep);background:var(--brand-pale);border-radius:4px;padding:1px 10px;line-height:1.8;margin-bottom:8px}
.ap2 .contact .after .acol>p{margin:0;font-size:15px;line-height:1.8;max-width:none;text-align:left}
.ap2 .contact .after .acol .note{margin-top:14px;text-align:left;font-size:13px;color:var(--text-sub)}
.ap2 .wpcf7 select{width:100%;max-width:100%;padding:11px;border:0;border-radius:4px;background:rgba(255,255,255,.5);font-family:inherit;font-size:15px;color:var(--text);line-height:1.6;box-shadow:none}
.ap2 .sdl2.v3 .srow.ext dt .lab{white-space:normal}
/* トップの REASON：見出しの下に説明1〜2行 */
.ap2 ul.reason4.v2{grid-template-columns:1fr;gap:0;max-width:none}
.ap2 ul.reason4.v2 li{padding:16px 0;font-weight:400}
.ap2 ul.reason4.v2 .rt{display:block;font-size:16px;font-weight:500;color:var(--brand-deep);letter-spacing:.04em;line-height:1.7}
.ap2 ul.reason4.v2 .rd{display:block;font-size:13.5px;line-height:1.9;color:var(--text);letter-spacing:.02em;margin-top:4px}
/* トップの PROFILE：左に写真・名前・経歴、右に本文 */
.ap2 .psec .in{text-align:left}
.ap2 .pgrid{display:grid;grid-template-columns:280px 1fr;gap:72px;align-items:start}
.ap2 .pside{text-align:left}
.ap2 .pside .pphoto{width:160px;height:160px;border-radius:50%;object-fit:cover;display:block;margin:0 0 16px}
.ap2 .pside .pname{font-size:17px;font-weight:500;letter-spacing:.06em;line-height:1.6;margin:0 0 14px;max-width:none}
.ap2 .pside .pname span{display:block;font-size:12px;font-weight:400;color:var(--text-sub);letter-spacing:.06em;margin-top:4px}
.ap2 .pside .pcareer{font-size:13px;line-height:1.9;color:var(--text);margin:0;padding-top:14px;border-top:1px solid var(--line);max-width:none;letter-spacing:.02em}
.ap2 .pside .ill.pill{width:76%;margin:28px auto 0}
.ap2 .pgrid .ptext{max-width:640px}
.ap2 .pgrid .ptext p{margin:0 0 1.7em;font-size:15px;line-height:2.1}
.ap2 .pgrid .ptext .pcatch{font-size:24px;margin-bottom:.9em;line-height:1.7}
.ap2 .pgrid .ptext .pclose{text-align:left;margin-top:2.2em}
@media (max-width:1023px){.ap2 .pgrid{grid-template-columns:220px 1fr;gap:40px}.ap2 .pside .pphoto{width:140px;height:140px}}
@media (max-width:639px){.ap2 .pgrid{grid-template-columns:1fr;gap:32px}.ap2 .pside .pphoto{width:120px;height:120px}.ap2 .pside .ill.pill{display:none}.ap2 .pgrid .ptext .pcatch{font-size:20px}}
/* COMPANY：事業内容の箇条書き */
.ap2 table.corp ul.biz{list-style:none;margin:4px 0 0;padding:0}
.ap2 table.corp ul.biz li{position:relative;margin:0;padding:0 0 0 1.1em;line-height:1.9}
.ap2 table.corp ul.biz li::before{content:"";position:absolute;left:0;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--brand-icon)}

/* ===== 2026-10-02（夜）支援のイメージ：目指すゴールの枠の左線をなくし、札の位置をほかの3項目とそろえる（枠を左右に18px広げて、中の札は同じ位置に）。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_support2_2026-10-02.txt） ===== */
.ap2 .sdl2.v3 .goal{border-left:0;padding:14px 18px;margin-left:-18px;margin-right:-18px}
@media (max-width:639px){.ap2 .sdl2.v3 .goal{padding:12px 14px;margin-left:-14px;margin-right:-14px}}

/* ===== 2026-10-02（夜）PRICE の打ち出し（料金は、すべて公開しています。）を左ぞろえに（トップと /price/。浩平の指摘）。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_pclaim_2026-10-02.txt） ===== */
.ap2 .pclaim{text-align:left;margin:0 0 44px}
.ap2 .pclaim p{text-align:left}
.ap2 ul.tags3{justify-content:flex-start;margin:0}
@media (max-width:639px){.ap2 ul.tags3{display:inline-flex;flex-direction:column;align-items:stretch}}

/* ===== 2026-10-02（夜）トップの PROFILE：左右を入れ替え（左に本文、右に写真・名前・経歴・絵）。締めの一行を①（太字＋色）に。スマホは本文の後に写真・名前・経歴・絵。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_profile2_2026-10-02.txt） ===== */
.ap2 .pgrid{grid-template-columns:1fr 280px}
.ap2 .pgrid .ptext{max-width:640px;justify-self:start}
.ap2 .pgrid .ptext .pclose{font-weight:700;color:var(--brand-deep)}
@media (max-width:1023px){.ap2 .pgrid{grid-template-columns:1fr 220px}}
@media (max-width:639px){.ap2 .pgrid{grid-template-columns:1fr}.ap2 .pside{padding-top:28px;border-top:1px solid var(--line)}.ap2 .pside .ill.pill{display:block;width:60%;margin:24px auto 0}}

/* ===== 2026-10-02（夜）/service/ 目次の下の AI の共通の一文。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_ainote_2026-10-02.txt） ===== */
.ap2 .ainote.all{display:flex;gap:12px;align-items:flex-start;margin:32px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:6px;background:var(--white);font-size:14px;line-height:1.9;color:var(--text);max-width:none;text-align:left}
.ap2 .ainote.all .ic svg{width:22px;height:22px;color:var(--brand-icon);display:block;margin-top:.3em;flex:0 0 auto}
@media (max-width:639px){.ap2 .ainote.all{margin-top:24px;padding:14px 16px;font-size:13.5px}}

/* ===== 2026-10-02（夜）トップの REASON を5つに（絵は見出しの横、理由は 3＋2 の格子）。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_reason5_2026-10-02.txt） ===== */
.ap2 .rsec .in{text-align:left}
.ap2 .phead.rhead{padding-bottom:0;border-bottom:0;margin-bottom:8px;align-items:end}
.ap2 .phead.rhead .hd{margin-bottom:0}
.ap2 .phead.rhead .phpic{height:200px}
.ap2 ul.reason5{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:0 32px}
.ap2 ul.reason5 li{grid-column:span 2;margin:0;padding:26px 0 22px;border-top:1px solid var(--line)}
.ap2 ul.reason5 li:nth-child(4){grid-column:2 / 4}
.ap2 ul.reason5 li:nth-child(5){grid-column:4 / 6}
.ap2 ul.reason5 .ic svg{width:28px;height:28px;color:var(--brand-icon);display:block;margin-bottom:12px}
.ap2 ul.reason5 .rt{display:block;font-size:16px;font-weight:500;color:var(--brand-deep);letter-spacing:.04em;line-height:1.7;margin-bottom:8px}
.ap2 ul.reason5 .rd{display:block;font-size:13.5px;line-height:1.9;color:var(--text);letter-spacing:.02em}
@media (max-width:1023px){.ap2 ul.reason5{gap:0 24px}.ap2 ul.reason5 li{padding:22px 0 18px}.ap2 ul.reason5 .rt{font-size:15px}.ap2 .phead.rhead .phpic{height:170px}}
@media (max-width:639px){.ap2 ul.reason5{grid-template-columns:1fr;gap:0}.ap2 ul.reason5 li,.ap2 ul.reason5 li:nth-child(4),.ap2 ul.reason5 li:nth-child(5){grid-column:auto;padding:18px 0 16px}.ap2 ul.reason5 .ic svg{width:24px;height:24px;margin-bottom:8px}.ap2 .phead.rhead{gap:12px;margin-bottom:12px}.ap2 .phead.rhead .phpic{height:150px}}
/* ===== 2026-10-02（夜）トップの COLUMN：アイキャッチが 16:9 になったのでカードの比率を合わせる。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_column_auto_2026-10-02.txt） ===== */
.ap2 ul.cards3 img{aspect-ratio:16/9}
/* ===== 2026-10-03 ファーストビューの絵の登場：透明から始めない（LCP の遅れの原因だった）。最初から見えていて、右から少しすべるだけ（1.4秒・ゆったり、待ち 0.1秒）。
   transition だと JS が on を付けるタイミングで動かないことがあるので、keyframes で動かす。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_fvmotion_2026-10-03.txt） ===== */
@keyframes ap2-fvslide{from{transform:translateX(28px)}to{transform:none}}
@keyframes ap2-fvslide-sp{from{transform:translateX(16px)}to{transform:none}}
html.ap2-js .ap2 .hero.fv .sl.fv,html.ap2-js .ap2 .hero.fv .sl.fv.on,html.ap2-js .ap2 .hero.fv.on .sl.fv{opacity:1;transform:none;transition:none;animation:ap2-fvslide 1.4s cubic-bezier(.22,1,.36,1) .1s both}
@media (max-width:639px){html.ap2-js .ap2 .hero.fv .sl.fv,html.ap2-js .ap2 .hero.fv .sl.fv.on,html.ap2-js .ap2 .hero.fv.on .sl.fv{animation-name:ap2-fvslide-sp}}
@media (prefers-reduced-motion:reduce){html.ap2-js .ap2 .hero.fv .sl.fv{animation:none}}
/* ===== 2026-10-03 /service/ の制作実績（.sworks）。画像を左、文字を右。お客様の声は左に細い線の引用。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_works_2026-10-03.txt） ===== */
.ap2 .sworks{margin-top:36px;padding:22px 24px 20px;background:var(--white);border:1px solid var(--line);border-radius:6px}
.ap2 .sworks h3.sub-deep{margin:0 0 16px;font-size:14px;letter-spacing:.1em}
.ap2 .sworks .work{display:grid;grid-template-columns:minmax(0,42%) 1fr;gap:28px;align-items:start}
.ap2 .sworks .wpic{margin:0}
.ap2 .sworks .wpic img{width:100%;height:auto;display:block}
.ap2 .sworks .wname{margin:0 0 10px;font-size:17px;font-weight:500;letter-spacing:.04em;line-height:1.6;max-width:none}
.ap2 .sworks .wname small{display:block;font-size:12.5px;font-weight:400;color:var(--text-sub);letter-spacing:.04em;margin-top:2px}
.ap2 .sworks .wdl{margin:0 0 14px;padding:0;display:grid;grid-template-columns:7em 1fr;column-gap:14px;row-gap:4px;font-size:13.5px;line-height:1.8}
.ap2 .sworks .wdl dt{margin:0;color:var(--text-sub);font-weight:400}
.ap2 .sworks .wdl dd{margin:0}
.ap2 .sworks .wvoice{margin:0 0 14px;padding:4px 0 4px 16px;border-left:3px solid var(--brand-main);background:none;font-size:14px;line-height:1.9}
.ap2 .sworks .wvoice p{margin:0 0 4px;max-width:none}
.ap2 .sworks .wvoice cite{display:block;font-style:normal;font-size:12.5px;color:var(--text-sub);letter-spacing:.04em}
.ap2 .sworks .wlink{display:inline-block;font-size:13px;letter-spacing:.06em;color:var(--brand-deep);text-decoration:none;border-bottom:1px solid var(--brand-main);padding-bottom:2px}
.ap2 .sworks .wlink .ar{color:var(--brand-main);margin-left:.5em}
@media (max-width:1023px){.ap2 .sworks .work{gap:20px}}
@media (max-width:639px){.ap2 .sworks{padding:18px 18px 16px}.ap2 .sworks .work{grid-template-columns:1fr;gap:16px}.ap2 .sworks .wdl{grid-template-columns:1fr;row-gap:0}.ap2 .sworks .wdl dt{margin-top:6px}}
.ap2 .sworks .wvoice{border:0;border-left:3px solid var(--brand-main);border-radius:0;box-shadow:none}.ap2 .sworks .wvoice::before,.ap2 .sworks .wvoice::after{display:none;content:none}
/* ===== 2026-10-03 /service/ の制作実績に Google の口コミ（.wgoogle）。小さく、星はアプリコット色。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_works_review_2026-10-03.txt） ===== */
.ap2 .sworks .wgoogle{margin:-4px 0 14px;padding:10px 14px;background:var(--brand-pale);border-radius:4px;font-size:13px;line-height:1.8}
.ap2 .sworks .wgoogle p{margin:0;max-width:none}
.ap2 .sworks .wgoogle .gttl{font-size:12px;color:var(--text-sub);letter-spacing:.06em}
.ap2 .sworks .wgoogle .stars{color:var(--brand-main);font-size:12px;letter-spacing:.1em;margin-left:.6em;vertical-align:baseline}
.ap2 .sworks .wgoogle .gtxt{margin-top:2px;font-size:13.5px}
.ap2 .sworks .wgoogle .gtxt cite{font-style:normal;font-size:12.5px;color:var(--text-sub);letter-spacing:.04em;margin-left:.3em;white-space:nowrap}
.ap2 .sworks .wgoogle .wlink{margin-top:6px;font-size:12.5px}
.ap2 .sworks .wtxt>.wlink{margin-top:2px}
/* ===== 2026-10-03 制作実績の感想を Google の口コミ1つにまとめた（.wvoice は出さない。名義は口コミの下に1行）。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_works_review2_2026-10-03.txt） ===== */
.ap2 .sworks .wgoogle{margin:0 0 14px;padding:12px 16px}
.ap2 .sworks .wgoogle .gtxt{font-size:14px;line-height:1.9}
.ap2 .sworks .wgoogle .gwho{display:block;font-style:normal;font-size:12.5px;color:var(--text-sub);letter-spacing:.04em;margin-top:2px}
/* ===== 2026-10-03 YouTube の料金見直し（/price/ の YouTube 3枚のカード .ytplans、/service/ の料金の箱 .svbox.yt と立ち上げ .svlaunch、組み合わせの注記 .pnote、単価カード4枚 .pcards.c4）。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_youtube_price_2026-10-03.txt） ===== */
.ap2 ul.pcards.c4{grid-template-columns:repeat(4,1fr)}
.ap2 .ytplans{margin-top:16px;padding:24px 24px 20px;background:var(--white);border:1px solid var(--line);border-radius:6px}
.ap2 .ytplans h3.sub-deep{margin:0 0 4px;font-size:15px;letter-spacing:.08em}
.ap2 .ytplans .ytlead{margin:0 0 16px;font-size:13.5px;color:var(--text-sub);max-width:none}
.ap2 ul.ytcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ap2 ul.ytcards li{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:18px 18px 16px;display:flex;flex-direction:column}
.ap2 ul.ytcards .bl{font-size:11px;letter-spacing:.14em;color:var(--brand-deep);font-weight:500}
.ap2 ul.ytcards h4.pw{font-size:15.5px;font-weight:500;letter-spacing:.04em;margin:4px 0 12px;line-height:1.6;color:var(--text)}
.ap2 ul.ytcards dl.ytamt{margin:0 0 12px;padding:0;display:grid;gap:8px}
.ap2 ul.ytcards dl.ytamt div{display:grid;grid-template-columns:5.5em 1fr;align-items:baseline;gap:8px}
.ap2 ul.ytcards dl.ytamt dt{font-size:11px;letter-spacing:.12em;color:var(--text-sub)}
.ap2 ul.ytcards dl.ytamt dd{margin:0;font-size:22px;font-weight:500;letter-spacing:.02em;line-height:1.3;color:var(--text)}
.ap2 ul.ytcards dl.ytamt dd small{font-size:12px;font-weight:400;color:var(--text-sub);margin-left:3px}
.ap2 ul.ytcards dl.ytamt dd .nm{display:block;font-size:12px;font-weight:400;color:var(--text-sub);letter-spacing:.02em;margin-top:1px;line-height:1.6}
.ap2 ul.ytcards ul.pin{list-style:none;margin:auto 0 0;padding:10px 0 0;border-top:1px solid var(--line)}
.ap2 ul.ytcards ul.pin li{position:relative;padding:0 0 0 1.1em;font-size:13px;line-height:1.8;margin:0;background:none;border:0;display:block;border-radius:0}
.ap2 ul.ytcards ul.pin li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--brand-icon)}
.ap2 .ytflow{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ap2 .ytflow .bl{font-size:11px;letter-spacing:.14em;color:var(--brand-deep);font-weight:500;flex:0 0 auto}
.ap2 .ytflow ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;align-items:center}
.ap2 .ytflow ol li{margin:0;font-size:13px;letter-spacing:.04em;padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);position:relative}
.ap2 .ytflow ol li+li{margin-left:26px}
.ap2 .ytflow ol li+li::before{content:"→";position:absolute;left:-20px;top:50%;transform:translateY(-50%);color:var(--brand-main);width:auto;height:auto;background:none;border-radius:0;font-size:13px}
.ap2 ul.ytnotes{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.ap2 ul.ytnotes li{margin:0;font-size:12px;color:var(--text-sub);line-height:1.8;padding-left:1.1em;position:relative;background:none;border:0;border-radius:0}
.ap2 ul.ytnotes li::before{content:"※";position:absolute;left:0;top:0;width:auto;height:auto;background:none;border-radius:0}
.ap2 .svbox.yt ul.ytp{list-style:none;margin:0;padding:0}
.ap2 .svbox.yt ul.ytp li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;border-top:1px solid var(--line);font-size:13px;line-height:1.6}
.ap2 .svbox.yt ul.ytp li::before{display:none;content:none}
.ap2 .svbox.yt ul.ytp li:last-child{border-bottom:1px solid var(--line)}
.ap2 .svbox.yt ul.ytp .k{color:var(--text-sub);flex:1 1 auto}
.ap2 .svbox.yt ul.ytp .v{font-size:18px;font-weight:500;letter-spacing:.02em;color:var(--text);white-space:nowrap}
.ap2 .svbox.yt ul.ytp .v small{font-size:12px;font-weight:400;color:var(--text-sub);margin-left:2px}
.ap2 .svbox.yt .bn{margin-top:8px;font-size:12.5px;color:var(--text-sub)}
.ap2 .svlaunch{margin:14px 0 0;padding:14px 16px;background:var(--brand-pale);border-radius:6px;font-size:13.5px;line-height:1.8}
.ap2 .svlaunch b{display:block;font-weight:500;margin-bottom:4px}
.ap2 .svlaunch ul{list-style:none;margin:0;padding:0}
.ap2 .svlaunch ul li{position:relative;padding-left:1.1em;margin:0;background:none;border:0;display:block;border-radius:0}
.ap2 .svlaunch ul li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--brand-icon)}
.ap2 .svlaunch p{margin:6px 0 0;font-size:13px;color:var(--text-sub);max-width:none}
.ap2 ul.psets .pnote{margin:0;font-size:12.5px;color:var(--text-sub);line-height:1.8;max-width:none}
@media (max-width:1023px){.ap2 ul.pcards.c4{grid-template-columns:1fr 1fr}.ap2 ul.ytcards{grid-template-columns:1fr}.ap2 ul.ytcards li{padding:16px}}
@media (max-width:639px){.ap2 ul.pcards.c4{grid-template-columns:1fr}.ap2 .ytplans{padding:18px 16px 16px}.ap2 ul.ytcards dl.ytamt dd{font-size:20px}.ap2 .ytflow{align-items:flex-start;flex-direction:column;gap:8px}}
/* ===== 2026-10-03 トップの2画面目（役割の1行 .role、頼むとこう進みます .howgo／.steps3）と /service/ の「頼んだあとの1年」（.after）。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_after_year_2026-10-03.txt） ===== */
.ap2 .intro.pbook .first{margin:0 0 24px}
.ap2 .intro.pbook p.sub.top{margin:0 0 44px;font-size:15.5px}
.ap2 ul.row.four4.roles{max-width:960px;margin-bottom:8px}
.ap2 ul.row .role{display:block;font-size:12.5px;line-height:1.7;color:var(--text-sub);letter-spacing:.02em;margin-top:4px}
.ap2 .howgo{max-width:960px;margin:36px auto 0;padding-top:28px;border-top:1px solid var(--line)}
.ap2 .howgo h3.sub-deep{margin:0 0 14px;font-size:14px;letter-spacing:.12em}
.ap2 ol.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
.ap2 ol.steps3 li{margin:0;padding:14px 18px;background:var(--white);border:1px solid var(--line);border-radius:6px;position:relative}
.ap2 ol.steps3 .when{display:block;font-size:11px;letter-spacing:.14em;color:var(--brand-deep);font-weight:500;margin-bottom:4px}
.ap2 ol.steps3 .what{display:block;font-size:14.5px;line-height:1.8;letter-spacing:.02em}
.ap2 ol.steps3 li+li::before{content:"→";position:absolute;left:-14px;top:50%;transform:translateY(-50%);color:var(--brand-main);font-size:13px;background:var(--bg);padding:0 1px;width:auto;height:auto;border-radius:0}
.ap2 .howgo p.monthly{margin:18px 0 0;font-size:15px;line-height:2;letter-spacing:.04em}
.ap2 .howgo .more{margin-top:8px}
.ap2 .after{margin:36px 0 8px;padding:28px 28px 24px;background:var(--white);border:1px solid var(--line);border-radius:6px;text-align:left}
.ap2 .after h2.sub{margin:0 0 6px}
.ap2 .after .alead{margin:0 0 20px;font-size:14px;color:var(--text-sub);max-width:none}
.ap2 ol.after3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ap2 ol.after3 li{margin:0;padding:18px 18px 16px;background:var(--bg);border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;gap:8px}
.ap2 ol.after3 .when{font-size:11px;letter-spacing:.14em;color:var(--brand-deep);font-weight:500}
.ap2 ol.after3 h3.at{margin:0;font-size:16px;font-weight:500;letter-spacing:.04em;line-height:1.6;color:var(--text)}
.ap2 ol.after3 .lab{display:block;font-size:11px;letter-spacing:.12em;color:var(--text-sub);margin-bottom:2px}
.ap2 ol.after3 .ado{margin:0;font-size:13.5px;line-height:1.8;max-width:none}
.ap2 ol.after3 .anum{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.ap2 ol.after3 .tags{display:flex;flex-wrap:wrap;gap:6px}
.ap2 ol.after3 .tag{display:inline-block;font-size:12px;letter-spacing:.02em;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--text);line-height:1.7}
.ap2 .ametrics{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ap2 .ametrics h3.sub-deep{margin:0 0 8px;font-size:14px;letter-spacing:.1em}
.ap2 .ametrics dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.ap2 .ametrics dl div{display:grid;grid-template-columns:7em 1fr;gap:8px;font-size:13.5px;line-height:1.8}
.ap2 .ametrics dt{color:var(--brand-deep);font-weight:500}
.ap2 .ametrics dd{margin:0}
.ap2 .areport{margin-top:16px;padding:14px 16px;background:var(--brand-pale);border-radius:6px}
.ap2 .areport .bl{display:block;font-size:11px;letter-spacing:.14em;color:var(--brand-deep);font-weight:500;margin-bottom:4px}
.ap2 .areport p{margin:0;font-size:14.5px;line-height:1.9;max-width:none}
.ap2 .areport p.small{font-size:12.5px;color:var(--text-sub);margin-top:4px}
.ap2 .after p.note{margin:14px 0 0}
@media (max-width:1023px){.ap2 ol.after3{grid-template-columns:1fr}.ap2 .ametrics dl{grid-template-columns:1fr}.ap2 ol.steps3{gap:12px}.ap2 ol.steps3 li{padding:12px 14px}.ap2 ol.steps3 li+li::before{left:-12px}}
@media (max-width:639px){.ap2 .after{padding:18px 16px 16px}.ap2 .ametrics dl div{grid-template-columns:1fr;gap:0}.ap2 ol.steps3{grid-template-columns:1fr;gap:12px}.ap2 ol.steps3 li+li::before{content:"↓";left:50%;top:-15px;transform:translateX(-50%)}.ap2 .intro.pbook p.sub.top{margin-bottom:32px}.ap2 ul.row.four4.roles{margin-bottom:4px}.ap2 .howgo{margin-top:28px;padding-top:22px}}
.ap2 ul.row .role{text-wrap:balance}  /* 2026-10-03 役割の1行が「場／所」で折れないように均等に折る */
/* ===== 2026-10-03（夕）小修正3つ：トップ「頼むと、こう変わっていきます」のスマホ（矢印・余白・折り返し）、YouTube カードの金額1行（.ytamt.one）、丸投げの中身を番号つきの札（.ytflow .n。スマホは2列・矢印なし）、共通の条件をスマホ1列。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_small3_2026-10-03.txt） ===== */
.ap2 ol.steps3 .what .nw{display:inline-block}
.ap2 ol.steps3 .what b.em{font-weight:700}
.ap2 ul.ytcards dl.ytamt.one div{grid-template-columns:1fr}
.ap2 .ytflow ol li .n{display:inline-block;min-width:1.5em;height:1.5em;line-height:1.5em;text-align:center;border-radius:50%;background:var(--brand-pale);color:var(--brand-deep);font-size:11px;margin-right:7px;letter-spacing:0;vertical-align:1px}
@media (max-width:639px){.ap2 ol.steps3{gap:26px}.ap2 ol.steps3 li+li::before{background:none;padding:0;top:-21px;font-size:14px;line-height:1}.ap2 .howgo{padding-left:0;padding-right:0}.ap2 .pterms ul{columns:1}.ap2 .pterms ul li{margin:0 0 2px}.ap2 .ytflow ol{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ap2 .ytflow ol li+li{margin-left:0}.ap2 .ytflow ol li+li::before{display:none;content:none}}
.ap2 ul.ytcards h4.pw{padding:0 0 8px;margin:4px 0 12px}  /* 2026-10-03（夕）Cocoon の h4 の左の余白を消す */
.ap2 .pterms a{white-space:nowrap}
.ap2 .ytflow ol li{word-break:keep-all}
@media (max-width:639px){.ap2 ul.ytcards dl.ytamt div{grid-template-columns:4.5em 1fr}.ap2 ul.ytcards dl.ytamt dd .nm{word-break:keep-all}.ap2 .ytflow ol li{padding:5px 10px;font-size:12.5px;display:flex;align-items:flex-start}.ap2 .ytflow ol li .n{flex:0 0 auto;margin-top:2px}}
@media (max-width:639px){.ap2 .svbox.yt ul.ytp li{flex-direction:column;align-items:flex-start;gap:0;padding:8px 0}.ap2 .svbox.yt ul.ytp .k{word-break:keep-all}}  /* 2026-10-03（夕）/service/ の YouTube の料金：スマホは名前の下に金額（言葉の途中で折れないように） */
/* ===== 2026-10-03（夜）トップ「頼むと、こう変わっていきます」の PC・1024 の矢印：すき間を 40px（1024 は 32px）に広げ、すき間の左右・カードの上下の真ん中に。細めの線のアプリコット（--brand-icon）、枠に重ねない。スマホ（↓）は変えない。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_steps_arrow_2026-10-03.txt） ===== */
@media (min-width:640px){.ap2 ol.steps3{gap:40px}.ap2 ol.steps3 li+li::before{content:"→";position:absolute;left:-40px;top:0;bottom:0;width:40px;height:auto;display:flex;align-items:center;justify-content:center;transform:none;margin:0;padding:0;background:none;color:var(--brand-icon);font-size:20px;font-weight:300;line-height:1;border-radius:0}}
@media (min-width:640px) and (max-width:1023px){.ap2 ol.steps3{gap:32px}.ap2 ol.steps3 li+li::before{left:-32px;width:32px;font-size:18px}}
@media (min-width:640px) and (max-width:1100px){.ap2 ol.steps3 li{padding:12px 14px}.ap2 ol.steps3 .what{font-size:14px}}  /* 2026-10-03（夜）1024 で「増え始める」が途中で折れないように（カードの内側 228px に対し文が 222px でぎりぎりだった） */
/* ===== 2026-10-03（夜）/service/「1年後、問い合わせが続く会社へ」（#after の作り直し）：変化を一番上に大きく（.big ①）、毎月の報告は白い箱＋細い線、報告の項目の札。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_after_v2_2026-10-03.txt） ===== */
.ap2 ol.after3 .big{margin:0 0 2px;font-size:17px;line-height:1.6;letter-spacing:.03em;max-width:none}
.ap2 ol.after3 .big .ac{font-weight:700}
.ap2 .areport{background:var(--white);border:1px solid var(--line);padding:16px 18px}
.ap2 .areport .ex{display:block;font-size:11px;letter-spacing:.12em;color:var(--text-sub);margin:12px 0 6px}
.ap2 .areport .tags{display:flex;flex-wrap:wrap;gap:6px}
.ap2 .areport .tag{display:inline-block;font-size:12px;letter-spacing:.02em;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text);line-height:1.7}
@media (max-width:639px){.ap2 ol.after3 .big{font-size:16px}.ap2 .areport{padding:14px 14px}}
.ap2 ol.after3 .big{text-wrap:balance}  /* 2026-10-03（夜）PC で「増え始め／る」と途中で折れないよう、2行なら「、」のあとで均等に折る */
/* ===== 2026-10-03（夜）トップの FLOW をスマホ（639px以下）で縦1列に：左に絵（90px）・右に番号とステップ名、間に↓、01〜04 はうすいアプリコットの帯で「ここまで無料（ご相談〜お見積り）」。PC・1024 は変えない。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_flow_sp_2026-10-03.txt） ===== */
.ap2 .free-bracket .spx{display:none}
@media (max-width:639px){
.ap2 .flowwrap.pict.six{padding-top:0;max-width:none}
.ap2 .flowwrap.pict.six .free-bracket{position:static;width:auto;height:auto;border:0;margin:0;padding:12px 14px 2px;background:var(--brand-pale);border-radius:8px 8px 0 0;text-align:left}
.ap2 .flowwrap.pict.six .free-bracket span{position:static;top:0;padding:0;background:none;font-size:12px;letter-spacing:.1em;color:var(--brand-deep);font-weight:500}
.ap2 .flowwrap.pict.six .free-bracket .spx{display:inline;letter-spacing:.04em}
.ap2 .flowwrap.pict.six ul.row.six{display:block;max-width:none;margin:0;gap:0}
.ap2 .flowwrap.pict.six ul.row.six li{display:grid;grid-template-columns:90px 1fr;gap:14px;align-items:center;text-align:left;padding:14px 14px;position:relative}
.ap2 .flowwrap.pict.six ul.row.six li.isfree{background:var(--brand-pale)}
.ap2 .flowwrap.pict.six ul.row.six li:nth-child(4){border-radius:0 0 8px 8px}
.ap2 .flowwrap.pict.six ul.row.six li:nth-child(5){margin-top:30px}
.ap2 .flowwrap.pict.six ul.row.six li .ill{width:90px;margin:0;aspect-ratio:1/1}
.ap2 .flowwrap.pict.six ul.row.six .cap{display:flex;align-items:center;gap:10px}
.ap2 .flowwrap.pict.six ul.row.six .cap .num{display:inline;margin:0;font-size:11px;letter-spacing:.2em;color:var(--brand-icon)}
.ap2 .flowwrap.pict.six ul.row.six .cap b{display:inline;font-size:16px;white-space:normal;line-height:1.5}
.ap2 .flowwrap.pict.six ul.row.six li+li::before{content:"↓";position:absolute;left:59px;top:-7px;transform:translateX(-50%);color:var(--brand-icon);font-size:14px;line-height:1;width:auto;height:auto;background:none;border-radius:0}
.ap2 .flowwrap.pict.six ul.row.six li:nth-child(5)::before{top:-22px}
}
@media (max-width:639px){.ap2 .flowwrap.pict.six ul.row.six .cap{flex-direction:row;justify-content:flex-start}}  /* 2026-10-03（夜）番号とステップ名を横並びに（別の指定で縦積みになっていた） */
/* ===== 2026-10-03（夜2）トップ：検索結果の画面の図（.serp）、FLOW のスマホは帯をやめて左の縦線（--brand-deep）で「ここまで無料」。/flow/：01〜04 の左に縦線、01 の上に1回だけ「ここまで無料（ご相談〜お見積り）」。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_serp_flow_2026-10-03.txt） ===== */
/* 検索結果の画面の図 */
.ap2 .serp-wrap{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:28px;align-items:center;margin:22px auto 0;text-align:left}
.ap2 .serp{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:14px 14px 10px;font-size:13px;line-height:1.6;color:var(--text)}
.ap2 .serp .sbar{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13.5px;letter-spacing:.04em}
.ap2 .serp .sico{position:relative;width:14px;height:14px;border:2px solid var(--text-sub);border-radius:50%;flex:0 0 auto}
.ap2 .serp .sico::after{content:"";position:absolute;right:-6px;bottom:-5px;width:7px;height:2px;background:var(--text-sub);transform:rotate(45deg)}
.ap2 .serp .smap{position:relative;height:84px;margin:10px 0;border-radius:6px;background:var(--bg);border:1px solid var(--line);overflow:hidden}
.ap2 .serp .smap::before,.ap2 .serp .smap::after{content:"";position:absolute;background:var(--line)}
.ap2 .serp .smap::before{left:0;right:0;top:46%;height:1px}
.ap2 .serp .smap::after{top:0;bottom:0;left:38%;width:1px}
.ap2 .serp .pin{position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--brand-main)}
.ap2 .serp .pin.p1{left:34%;top:30%;width:14px;height:14px;background:var(--brand-deep)}
.ap2 .serp .pin.p2{left:62%;top:52%}
.ap2 .serp .pin.p3{left:16%;top:58%}
.ap2 .serp ul.slist{list-style:none;margin:0;padding:0}
.ap2 .serp ul.slist li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;padding:7px 10px;border-bottom:1px solid var(--line);background:none;border-radius:0}
.ap2 .serp ul.slist li::before{display:none;content:none}
.ap2 .serp ul.slist li:last-child{border-bottom:0}
.ap2 .serp ul.slist li.me{border:1.5px solid var(--brand-main);border-radius:6px;margin:0 0 4px}
.ap2 .serp ul.slist .sn{font-weight:500;letter-spacing:.04em}
.ap2 .serp ul.slist .sr{font-size:12px;color:var(--text-sub);white-space:nowrap}
.ap2 .serp ul.slist li.me .sr{color:var(--text)}
.ap2 .serp ul.slist .st{letter-spacing:.04em;color:var(--text-sub)}
.ap2 .serp ul.slist li.me .st{color:var(--brand-deep);font-weight:500}
.ap2 .serp .snote{margin:8px 0 0;font-size:11px;color:var(--text-sub);text-align:right;max-width:none;letter-spacing:.04em}
.ap2 .howgo .serp-txt{margin:0;font-size:15px;line-height:2;letter-spacing:.04em;max-width:none}
@media (max-width:1023px){.ap2 .serp-wrap{grid-template-columns:minmax(0,440px) 1fr;gap:20px}}
@media (max-width:639px){.ap2 .serp-wrap{grid-template-columns:1fr;gap:14px;margin-top:18px}.ap2 .serp{padding:12px 12px 8px}.ap2 .howgo .serp-txt{font-size:14.5px}}
/* トップの FLOW（スマホ）：帯→左の縦線 */
@media (max-width:639px){
.ap2 .flowwrap.pict.six .free-bracket{background:none;border-radius:0;border-left:2px solid var(--brand-deep);padding:0 0 10px 14px;margin:0}
.ap2 .flowwrap.pict.six ul.row.six li{border-left:2px solid transparent;padding:14px 14px}
.ap2 .flowwrap.pict.six ul.row.six li.isfree{background:none;border-left-color:var(--brand-deep)}
.ap2 .flowwrap.pict.six ul.row.six li:nth-child(4){border-radius:0;padding-bottom:14px}
.ap2 .flowwrap.pict.six ul.row.six li+li::before{left:61px}
}
/* /flow/：01〜04 の左に縦線、01 の上に「ここまで無料（ご相談〜お見積り）」 */
.ap2 ol.flowrows li{border-left:2px solid transparent;padding-left:22px}
.ap2 ol.flowrows li.isfree{border-left-color:var(--brand-deep)}
.ap2 ol.flowrows .freehead{grid-column:1/-1;display:block;font-size:12px;letter-spacing:.12em;color:var(--brand-deep);font-weight:500;margin:-14px 0 -8px}
@media (max-width:639px){.ap2 ol.flowrows li{padding-left:14px}.ap2 ol.flowrows .freehead{margin:-10px 0 -2px}}

/* ===== 2026-10-05「ここまで無料」を範囲の終わり（04 の下）へ（浩平の指摘）。/flow/ とトップのスマホ：左の縦線の下の端を短い横線で受け、その横に文字。トップの PC は今のまま。戻すとき：この行から下を消す（控え backup/freefoot_2026-10-05/） ===== */
/* /flow/：01 の上の文字はなし。04 の段の下を詰め、最後に freefoot */
.ap2 ol.flowrows .freehead{display:none}
.ap2 ol.flowrows li.isfree:nth-child(4){padding-bottom:0;border-bottom-color:transparent;margin-bottom:26px}
.ap2 ol.flowrows li:nth-child(5){border-top:1px solid var(--line)}
.ap2 ol.flowrows .freefoot{grid-column:1/-1;display:flex;align-items:flex-end;gap:10px;margin:26px 0 0 -24px;font-size:12px;letter-spacing:.12em;line-height:1;color:var(--brand-deep);font-weight:500}
.ap2 ol.flowrows .freefoot::before{content:"";flex:0 0 auto;width:18px;height:2px;background:var(--brand-deep)}
@media (max-width:639px){.ap2 ol.flowrows .freefoot{margin:20px 0 0 -16px}.ap2 ol.flowrows li.isfree:nth-child(4){margin-bottom:20px}}
/* トップ：PC は今の札（上の横線）のまま。freefoot は隠す */
.ap2 .flowwrap.pict.six ul.row.six .freefoot{display:none}
@media (max-width:639px){
.ap2 .flowwrap.pict.six .free-bracket{display:none}
.ap2 .flowwrap.pict.six ul.row.six li.isfree:nth-child(4){padding-bottom:0}
.ap2 .flowwrap.pict.six ul.row.six .freefoot{grid-column:1/-1;display:flex;align-items:flex-end;gap:10px;margin:12px 0 0 -16px;font-size:12px;letter-spacing:.1em;line-height:1;color:var(--brand-deep);font-weight:500}
.ap2 .flowwrap.pict.six ul.row.six .freefoot::before{content:"";flex:0 0 auto;width:18px;height:2px;background:var(--brand-deep)}
.ap2 .flowwrap.pict.six ul.row.six li:nth-child(5){margin-top:46px}
.ap2 .flowwrap.pict.six ul.row.six li:nth-child(5)::before{top:-26px}
}
/* ===== 2026-10-05 YouTube の3つのプラン：5万と6万の違いの一文（.ytdiff）、オプションと撮影の行（.ytopt）。戻すとき：この行から下を消す（控え backup/theme_cocoon-child-master_style.css_backup_before_yt3plans_2026-10-05.txt） ===== */
.ap2 .ytplans .ytdiff{margin:14px 0 0;font-size:13.5px;line-height:1.8;color:var(--text);max-width:none}
.ap2 ul.ytopt{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:2px}
.ap2 ul.ytopt li{position:relative;margin:0;padding:0 0 0 1.1em;font-size:13px;line-height:1.8;color:var(--text);background:none;border:0;border-radius:0;display:block}
.ap2 ul.ytopt li::before{content:"";position:absolute;left:0;top:.75em;width:5px;height:5px;border-radius:50%;background:var(--brand-icon)}
.ap2 ul.ytcards h4.pw{font-size:15px}
@media (max-width:639px){.ap2 .ytplans .ytdiff{font-size:13px}}