@charset "utf-8";
/* ==========================================================================
   carnext-haishakaitori.jp/af14/ — static clone
   原典の 3 枚（reset.css → form_pc.css → pc.css）を <link> と同じ順序で連結。
   後勝ちの上書き（例: 送信ボタンの赤→緑）を再現するため、
   このブロック順は絶対に入れ替えないこと。
   原典にメディアクエリは 1 件も存在しない（PC 専用 LP）ため、追加もしない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens — 原典で実際に使われている色のみ
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --color-bg:            #FFFBED; /* html 背景 */
  --color-bg-alt:        #fefbec; /* .main:before / .jirei 見出しの抜き */
  --color-white:         #FFFFFF; /* .bg-03 */
  --color-yellow:        #FFC42E; /* .bg-01 / .bg-02 ｜ ★ワードマークのキーラインと同じ"ブランド黄"に統一（旧#F7A81Bのオレンジ寄りを廃止）。黒文字とのコントラスト13.2:1 */
  --color-navy:          #16324e; /* 太陽光パネルの色＝ブランド/見出しアクセント・背景モチーフ線画 */
  --color-row-alt:       #f5f5f5; /* 比較表の偶数行 */

  /* Text */
  --color-text:          #000000;
  --color-text-muted:    #5b5a5a;
  --color-primary:       #D90000; /* .text-primary */
  --color-secondary:     #FF5943; /* .text-secondary / .bg-04 */

  /* Accents */
  --color-blue:          #1BAADE;
  --color-blue-dark:     #0E7198;
  --color-blue-link:     #0170b5;
  --color-blue-anchor:   #0095E3;
  --color-green:         #20B516;
  --color-green-dark:    #0D6708;
  --color-gold-dark:     #D0B000;
  --color-gold-active:   #e0be01;

  /* Lines / neutrals */
  --color-gray:          #ADADAD;
  --color-gray-border:   #DDDDDD;
  --color-gray-soft:     #bebebe;

  /* Form */
  --color-req-on:        #D90101;
  --color-req-off:       #ADADAD;
  --color-err:           #e50000;
  --color-input-fill:    #ffffc9;

  /* Markers */
  --color-marker-y:      #FFF500;
  --color-marker-g:      #dedede;

  /* Modal */
  --color-tab-idle:      #efefef;
  --color-tab-idle-text: #666666;
  --color-tab-head:      #e8e8e8;
  --color-tab-head-text: #b1b1b1;
  --color-tab-red:       #ec0000;
  --color-tab-red-head:  #ffdede;
  --color-tab-red-text:  #a80000;
  --color-tab-cyan:      #00bbff;
  --color-tab-cyan-head: #cff2ff;

  /* Type */
  --font-sans: 'Noto Sans JP', sans-serif;
}

/* ==========================================================================
   1. reset.css （原典そのまま／未使用の IE7 clearfix ハックのみ除外）
   ========================================================================== */

html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,
b,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

body{
	line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
	display:block;
}

ul,ol{
	list-style:none;
}

blockquote,q{
	quotes:none;
}

blockquote:before,blockquote:after,
q:before,q:after{
	content:'';
	content:none;
}

a{
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

del{
	text-decoration: line-through;
}

abbr[title],dfn[title]{
	border-bottom:1px dotted;
	cursor:help;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}

input,select{
	vertical-align:middle;
}

input,select,textarea,
button{
	font-size: normal;
	line-height: normal;
}

button{
	cursor: pointer;
}

img{
	border: none;
	vertical-align: bottom;
}

table,thead,tbody,tfoot,tr,th,td,caption,col,
colgroup{
	text-align: inherit;
	line-height: inherit;
}

/* ==========================================================================
   2. form_pc.css
   ========================================================================== */

input:-webkit-autofill {/* inputの背景が自動で変わるのを防ぐ */
    -webkit-box-shadow: 0 0 0px 1000px #ffffe4 inset;
}
input,select,.dummy_select{
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    padding: 0 15px;
    border: solid 1px #888;
    box-sizing: border-box;
    appearance: none;
    border-radius: 2px;
    font-family: initial;
    border:2px solid var(--color-gray-border);
}
dl:nth-child(2) select {
    border-radius: unset;
}

input[name="car_id"] {
    position: absolute;
    overflow: hidden;
    width: 0;
}
select::-ms-expand {
    display: none;
}
.dummy_select{
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}
dl:nth-child(2) input,
dl:nth-child(2) select{
    margin-left: auto;
    margin-right: 0;
    display: block;
}

/* 必須・任意 */
.req_on, .req_off {
    font-size: 10px;
    margin-right: 5px;
    padding: 0 4px;
    color: #ffffff;
    display: inline-block;
    float: left;
    font-weight: 500;
    margin-bottom: 5px;
    border-radius: 2px;
}
.req_on {
    background: var(--color-req-on);
}
.req_off {
    background: var(--color-req-off);
}

/* 送信項目のエラーメッセージ */
.err_msg{
    clear: both;
    padding-bottom: 0;
    color: var(--color-err);
    font-size:13px;
    text-align: left;
    line-height: 1.6;
}
.main_form {
    max-width: 470px;
    min-width: 400px;
    padding: 3% 2% 3%;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 40%);
    margin: 0 0 2px 5px
}
form.contact_form{
    padding: 10px 10px 20px 10px;
}
form.contact_form h3{
    margin-bottom: 1rem;
}
form.contact_form input:not(.submit_btn),
form.contact_form select{
    height: 38px;
    line-height: normal;
}
form.contact_form dd input[name="as_maker"],
form.contact_form dd input[name="name"],
form.contact_form dd input[name="phone_number"] {
    background-color: var(--color-input-fill);
}
/* 入力項目　スタイル */
.form_title {
    display: inline-block;
    width: 33%;
    text-align: left;
    font-weight: 500;
    font-size: 15px;
}
.form_title label {
    position: relative;
    top: -5px;
    font-size: 13px;
}
.form_title label[for="as_maker"]{
    font-size: 0.9em;
    vertical-align: middle;
    display: inline-grid;
    line-height: 1.4;
}
.form_area {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    width: 64%;
}
/* readonly input（選択用）と select 共通 */
.form_area input[readonly],
.form_area select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 1px 27px 0 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    background-color: #fff;
    box-sizing: border-box;
    cursor: pointer;
}
/* select に三角 */
.form_area.triangle::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 10px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #333;
    pointer-events: none;
}
form section#user_area{
    padding-bottom: 10px;
}
form section#user_area dl select {
    border-radius: unset;
}

.submit_btn_box input.submit_btn {
    font-weight: bold;
    color: #fff;
    width: 90%;
    max-width: 370px;
    height: inherit;
    padding: 20px 0;
    border-radius: 50px;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    display: block;
    background-color: #FC5943;
    border: none;
    border-bottom: 6px solid #e21b02;
}
.submit_btn_box input.submit_btn:hover{
    border-bottom: 3px solid #e21b02;
    margin-top: 3px;
}

/*自動車税文言スタイル
--------------------------------------------------------------------*/
.jizei_text1{
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray);
}
.jizei_text1 span{
    color: #FC5943;
}
.jizei_text2{
    font-size: 12px;
    text-align: center;
    font-weight: normal;
}

/*利用規約とプライバシーポリシー・SSL
--------------------------------------------------------------------*/
#ssl_information_footer_form {
    text-align: left;
    width: 97%;
    margin: 0 auto;
    font-size: 0.8rem;
    line-height: 1.4;
    border-top: 1px solid #ACACAC;
    padding-top: 1rem;
}

#ssl_information_footer_form h4 {
    padding-bottom: 3px;
    font-size: 1.4rem;
    font-weight: bold;
    text-align: left;
}
#ssl_information_footer_form h4:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(images/ssl_icon.png) center;
    background-repeat: no-repeat;
    background-position: left;
    vertical-align: inherit;
    background-size: contain;
    margin-right: 4px;
}
#ssl_information_footer_form p{
    font-size: 1.15rem;
    font-weight: 400;
}

/* モーダルウインドウ */
#layer_carbox{
    display: none;
    position: fixed;
    width: 90%;
    max-width: 890px;
    font-size: 1.1em;
    background: #ffffff;
    margin:35px auto 50px auto;
    padding: 10px 20px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
    z-index: 10;
    box-sizing: border-box;
    border: 2px solid #bbb;
}
#tab_list{
    clear: both;
}
#tab_list li{
    float: left;
    position: relative;
    width: 25%;
    padding: 6px 0;
    margin-bottom: 20px;
    font-size: 1em;
    color: var(--color-tab-idle-text);
    font-weight: bold;
    background: var(--color-tab-idle);
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}
.tab_box{
    display:none;
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1.4;
}
.tab_box.box_active{
    display: block;
}
.tab_box p{
    color:#333333;
}
.tab_box ul{
    padding:10px 10px 0;
    margin-bottom: 15px;
    border:solid 1px var(--color-gray-soft);
    box-sizing: border-box;
}
.tab_box li{
    display: inline-block;
    width:32%;
    margin-bottom: 8px;
    color: var(--color-blue-link);
    text-decoration: underline;
    cursor: pointer;
}
.tab_box li:hover{
    text-decoration: none;
}

/* タブ　ボタン　スタイル
   注: 原典には #tab_list li.tab_active{background:#00a856}（緑）の定義があるが、
   直後の nth-child 指定が 4 タブ全てを赤/水色で上書きするため描画されない。
   死んだ規則のため再現していない。 */
#tab_list li .tab_list_head {
    display: block;
    width: 100%;
    background: var(--color-tab-head);
    font-size: 16px;
    color: var(--color-tab-head-text);
    margin: 0 auto;
    position: absolute;
    top: 0;
    line-height: 1.5;
    box-sizing: border-box;
}
#tab_list li.tab_active{
    color: #ffffff;
}
#tab_list li.tab_active .tab_list_head {
    background: var(--color-tab-cyan-head);
    color: var(--color-tab-cyan);
    font-weight: bold;
}
#tab_list li.tab_active:after{
    content:'\025bc';
    position: absolute;
    bottom:-13px;
    left:0;
    right:0;
}
#tab_list li:nth-child(1).tab_active .tab_list_head,
#tab_list li:nth-child(2).tab_active .tab_list_head {
    background: var(--color-tab-red-head);
    color: var(--color-tab-red-text);
}
#tab_list li:nth-child(1).tab_active,
#tab_list li:nth-child(2).tab_active {
    background: var(--color-tab-red);
}
#tab_list li:nth-child(1).tab_active:after,
#tab_list li:nth-child(2).tab_active:after{
    color: var(--color-tab-red);
}
#tab_list li:nth-child(3).tab_active,
#tab_list li:nth-child(4).tab_active {
    background: var(--color-tab-cyan);
}
#tab_list li:nth-child(3).tab_active:after,
#tab_list li:nth-child(4).tab_active:after {
    color: var(--color-tab-cyan);
}
#close-btn{
    float: right;
    font-weight: bold;
    color: var(--color-gray);
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 30px;
}

#layer_carbox #tab_list li {
    padding: 33px 0 8px;
}

p.form-agreement {
    font-size: 14px;
    padding-bottom: 15px;
    margin-bottom: 0;
    text-align: center;
}
p.form-agreement a{
    text-decoration: underline;
    color: var(--color-blue-anchor);
}

/* 点滅（バリデーションエラー） */
.target_item {
    border: 3px solid #f12;
    animation-name: borderFlashing;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}
@keyframes borderFlashing {
    0% {box-shadow: 0 0 0 0px #f12, 0 0 0 0px #fff, 0 0 0 1px #f12}
    100% {box-shadow: 0 0 0 0px #f12, 0 0 0 0px rgba(255,255,255,0), 0 0 0 5px rgba(100,164,134,0)}
}

/* レイヤー（背面オーバーレイ）
   原典では form_v4_base.js が実行時に body へ注入する要素。
   このクローンでは index.html に静的に置いている。 */
#layer {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 990;
    background-color: #fff;
    opacity: 0.8;
}

/* 原典 form_pc.css 末尾の再定義。border と width を上書きする（後勝ち）。
   実測 computed: width 890px / border 1px solid rgb(204,204,204) */
#layer_carbox {
    display: none;
    z-index: 991;
    position: fixed;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
}
.tab_box {
    display: none;
}
.tab_box li {
    text-decoration: underline;
    cursor: pointer;
}
.tab_box li:hover {
    text-decoration: none;
}

/* ==========================================================================
   3. pc.css
   ========================================================================== */
html {
    background: var(--color-bg);
    font-family: var(--font-sans);
    font-size: 62.5%;
    color: var(--color-text);
    font-weight: 500;
}
body {
    font-size: 1.5rem;
    line-height: 1.8;
}
img{
    width: auto;
    max-width: 100%;
    height: auto;
}
input,select{
    font-size:15px;
}
em{
    font-style: normal;
}
h2,h3,h4{
    text-align: center;
    font-weight: 700;
}
h2{
    font-size: 2.5rem;
}
.flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.radius{
    border-radius: 10px;
}
.border{
    border:3px solid var(--color-text);
}
.bold{
    font-weight: 700;
}
.heavy{
    font-weight: 900;
}
.pd{
    padding:3rem;
    box-sizing: border-box;
}
.center{
    text-align: center;
}
.bg-01{
    background-color: var(--color-yellow);
}
.bg-02{
    background-color: var(--color-yellow);
}
.bg-03{
    background-color: var(--color-white);
}
.bg-04{
    background-color: var(--color-secondary);
}

/* Size */
.fs_xs {
  font-size: 1.2rem; /*12px*/
}
.fs_sm {
  font-size: 1.4rem; /*14px*/
}
.fs_md {
  font-size: 1.8rem; /*18px*/
}
.fs_lg {
  font-size: 2rem; /*20px*/
}
.fs_xl {
  font-size: 2.2rem; /*22px*/
}
.fs_xxl {
  font-size: 2.4rem; /*24px*/
}
.fs_heavy{
    font-size: 4rem;
    font-weight: 900;
}
.fs_child{
    font-size: 0.75em;
}
.text-primary{
    color: var(--color-primary);
}
.text-secondary{
    color: var(--color-secondary);
}
.text-light{
    color: var(--color-white);
}
.marker_y {
  vertical-align: baseline;
  background: linear-gradient(transparent 0%, var(--color-marker-y) 0%);
}
.marker_g{
  vertical-align: baseline;
  background: linear-gradient(transparent 50%, var(--color-marker-g) 55%);
}
.satisfaction_asterisk {
    font-size: 10px;
    vertical-align: top;
}
.satisfaction_note {
    font-size: 1.2rem;
    color: var(--color-text-muted);
}
.btn-01 a{
    background: var(--color-blue);
    color: var(--color-white);
    text-decoration: none;
    display: inline-block;
    border-radius: 10px;
    width: 380px;
    padding: 1.5rem 2rem 2rem;
    line-height: 1.4;
    border-bottom: 6px solid var(--color-blue-dark);
    box-sizing: border-box;
}
.btn-01 a:hover{
    border-bottom: 3px solid var(--color-blue-dark);
    margin-top: 3px;
}

.row-1{
    width: 100%;
}
.row-2 > *{
    width: calc(100% / 2 - 20px);
}
.row-3{
    width: calc(100% / 3 - 20px);
}

h2.content_ttl{
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 6rem;
    padding-top: 6rem;
}
h2.content_ttl:after{
    content: '';
    display: block;
    width: 80px;
    height: 6px;
    background: var(--color-primary);
    margin: 0 auto;
    position: relative;
    bottom: -1.5rem;
}
.content_area{
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom:4rem;
}

/* ----------------------------------------------------------------
    ヘッダー
   ---------------------------------------------------------------- */
header .content_area{
    max-width: 100%;
    padding: 5px 2%;
    box-sizing: border-box;
}
header .content_area h1 img {
    max-width: 150px;
}
header a{
    text-decoration: none;
    color: var(--color-text);
}
header a > *{
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    font-weight: normal;
}
header .operating_num{
    font-size: 20px;
    margin-right: 10px;
    vertical-align: middle;
}
header .operating_time{
    font-size: 13px;
    font-weight: normal;
    vertical-align: middle;
    display: inline-block;
}

/* ----------------------------------------------------------------
    メインビジュアル・フォーム
   ---------------------------------------------------------------- */
.main {
    background-image: url(images/bg-solar.svg);
    background-size: 360px auto;
    position: relative;
}
.main:before{
    content: '';
    display: block;
    height:395px;
    width: 100%;
    background-color: rgba(254, 251, 236, 0.82); /* 旧#fefbec不透明→半透明化。下のbg-solarモチーフをFVで薄く透けさせる */
    position: absolute;
}
.main:after{
    content: '';
    background-image: url(images/bg-solarline.svg);
    display: block;
    width: 100%;
    height: 48px;
    position: absolute;
    top: 380px;
    transform: translateY(-50%) translateX(0%);
    background-repeat: repeat-x;
    background-size: 220px auto;
}
.main .content_area.flex > img {
    width: 55%;
    max-width: 560px;
    margin-left: -3%;
    margin-right: 1%;
}
.main .content_area{
    position: relative;
    max-width: 1200px;
    justify-content: center;
    align-items: flex-end;
    z-index: 1;
    padding-bottom: 2rem;
}
.main .balloon{
    font-size: initial;
    text-align: center;
    width: 340px;
    padding: 10px 16px;
    line-height: 1;
    margin-bottom: 2rem;
}
.main .balloon span:first-child{
    display: inline-block;
    border-bottom: 3px dotted var(--color-text);
    line-height: 1.4;
    position: relative;
    top: -4px;
    margin-right: 0;
}
.main .balloon img{
    position: absolute;
    right: 3rem;
    top: 0.4rem;
    max-width: 30px;
}
.fv img, .fv source{
    height: 777px;
}
/* フォームボタン（form_pc.css の赤 #FC5943 を緑に上書き＝後勝ち） */
.submit_btn_box input.submit_btn{
    background-color: var(--color-green);
    border-bottom: 6px solid var(--color-green-dark);
}
.submit_btn_box input.submit_btn:hover{
    border-bottom: 3px solid var(--color-green-dark);
}

/* ----------------------------------------------------------------
    フッター
   ---------------------------------------------------------------- */
footer {
    text-align: center;
    padding: 20px 0 20px;
}
footer .content_area{
    padding:5px 0 20px;
    display: table;
}
footer .content_area p {
    display: table-cell;
}
footer .content_area p a {
    color: #000;
    padding: 0 20px;
}

/* ----------------------------------------------------------------
    CV
   ---------------------------------------------------------------- */
.cv {
    background-image: url(images/bg-solar.svg);
    padding:2rem 2rem 0;
}
.balloon{
    position: relative;
    max-width: 500px;
    margin: 0 auto 3rem;
    width: 100%;
    box-sizing: border-box;
    border-radius: 100px;
    border-width: 4px;
    padding: 1rem 4rem 1rem 1rem;
    font-size: 3rem;
}
.balloon:before {
    content: "";
    position: absolute;
    top: 70px;
    right: 0;
    left: 0;
    width: 30px;
    height: 20px;
    margin: auto;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background-color: var(--color-yellow);
    z-index: 2;
}
.balloon:after {
    content: "";
    position: absolute;
    top: 76px;
    right: 0;
    left: 0;
    width: 30px;
    height: 20px;
    margin: auto;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background-color: var(--color-text);
    z-index: 1;
}
.balloon img{
    position: absolute;
    right: 8rem;
    top: 0.8rem;
    max-width: 50px;
}
.fv_balloon:before {
    top: 47px;
    width: 24px;
    height: 15px;
}
.fv_balloon:after {
    top: 52px;
    width: 24px;
    height: 15px;
}
.cv dl{
    margin-bottom: 2rem;
}
.cv dt{
    margin-bottom: 1rem;
}
.cv .flex{
    align-items: stretch;
}
.cv .flex .row-2{
    flex-direction: column;
}
.cv .flex .pd{
    padding:2rem;
}
.cv .fs_xxl.heavy{
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 1.5rem;
}

/* ----------------------------------------------------------------
    他社比較
   ---------------------------------------------------------------- */
.compare table{
    box-shadow: 0 0 16px rgb(0 0 0 / 12%);
    margin-bottom: 4rem;
}
.compare table thead{
    border-bottom: 1px solid var(--color-gray);
}
.compare table thead th{
    padding:1rem;
}
.compare table thead th img{
    max-width: 200px;
}
.compare table tbody tr:not(:last-child){
    border-bottom: 1px dashed var(--color-gray);
}
.compare table tbody td{
    line-height: 1.4;
    padding:1rem;
    vertical-align: middle;
}
.compare table tbody td:not(:first-child){
    width: 40%;
}
.compare table tbody tr:nth-child(even) td:not(:first-child){
    background-color: var(--color-row-alt);
}

/* ----------------------------------------------------------------
    カーネクストが選ばれる理由
   ---------------------------------------------------------------- */
.reason ol{
    align-items: stretch;
    flex-wrap: wrap;
}
.reason li{
    position: relative;
    padding-top: 10rem;
}
.reason li:nth-child(-n+2){
    margin-bottom: 4rem;
}
.reason_num{
    position: absolute;
    top: -14.5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 120px;
}
.reason_num > div:after{
    content: '';
    display: inline-block;
    width: 130px;
    height: 100px;
    background: url(images/reason_flag.png) center top / contain no-repeat;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}
.reason_num > div{
    z-index: 1;
    position: absolute;
    width: 100px;
    line-height: 1.1;
    padding-top: 1.2rem;
    padding-left: 1rem;
    color: var(--color-yellow);
}
.reason_num > div .fs_child{
    font-size: 0.4em;
    display: block;
}
.reason img{
    padding:1rem 0 2rem;
}
.reason li:nth-child(3) h3{
    padding-top: 2rem;
}
.reason li:nth-child(3) img{
    padding:4rem 0 2rem;
}

/* ----------------------------------------------------------------
    事例
   ---------------------------------------------------------------- */
.jirei h3.fs_xxl{
    font-size: 2.8rem;
    margin: 0 0.5rem 3rem 0;
    position: relative;
}
.jirei h3.fs_xxl:before{
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    top: 2.5rem;
    border-bottom: 3px dashed var(--color-text);
    z-index: -1;
}
.jirei h3.fs_xxl div {
    display: inline;
    background: var(--color-bg-alt);
}
.jirei h3.fs_xxl span{
    display: inline-block;
    border-radius: 5px;
    padding: 0 0.8rem 0 0.8rem;
    line-height: 1.5;
    margin-right: 0.4rem;
    background-color: var(--color-blue);
}
.jirei .flex{
    align-items: stretch;
}
.jirei dl{
    margin-bottom: 4rem;
    padding: 0 1.5rem 1.5rem;
    box-sizing: border-box;
    box-shadow: 0 0 16px rgb(0 0 0 / 12%);
}
.jirei dt{
    position: relative;
}
.jirei dd img{
    margin-bottom: 1.5rem;
}
.jirei .price_ttl{
    display: inline-block;
    line-height: 1.4;
    font-weight: 400;
    position: absolute;
    top: -1rem;
    left: -1rem;
    border-radius: 100px;
    background-color: var(--color-yellow);
    width: 65px;
    height: 65px;
    text-align: center;
    padding-top: 1.3rem;
    box-sizing: border-box;
}
.jirei .price{
    color: var(--color-primary);
    text-align: right;
}

/* ----------------------------------------------------------------
    よくあるご質問
   ---------------------------------------------------------------- */
.faqs {
    background-image: url(images/bg-faqs.png);
}
.has-children:not(:last-child){
    margin-bottom: 1rem;
}
.has-children.is-open .btn-inner{
    border-bottom: 3px solid var(--color-gold-dark);
    margin-top: 2px;
    margin-bottom: 0;
    background-color: var(--color-gold-active);
}
.acnav__label{
    cursor: pointer;
}
.faqs h3{
    text-align: left;
}
.faqs .btn-inner{
    max-width: 140px;
    width: 100%;
    padding:1rem 0.5rem 1rem 0.5rem;
    border-bottom: 5px solid var(--color-gold-dark);
    margin-right: 3rem;
}
.faqs .btn-inner:hover{
    border-bottom: 3px solid var(--color-gold-dark);
    margin-top: 2px;
    margin-bottom: 0;
}
.faqs .pd{
    padding: 2rem;
}

.faqs .faqs_q{
    padding-left: 5rem;
    position: relative;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.faqs .faqs_q:before{
  content: 'Q.';
  color: var(--color-blue);
  margin-right: 5px;
  position: absolute;
  left: 2rem;
}
.faqs .faqs_a{
    position: relative;
    display: none;
    border-top:1px dashed var(--color-gray);
    padding: 1rem 1.5rem 3rem 5rem;
    text-align: justify;
}
.faqs .faqs_a:before{
  content: 'A.';
  font-size: 2rem;
  color: var(--color-secondary);
  position: absolute;
  left: 2rem;
  font-weight: bold;
}

/* ----------------------------------------------------------------
    流れ
   ---------------------------------------------------------------- */
.flow h2.content_ttl {
    margin-bottom: 2rem;
}
.flow h2 + p{
    position: relative;
    top: 2rem;
    font-weight: 900;
}
.flow h2 + p:before,
.flow h2 + p:after{
    content: '';
    display: inline-block;
    height: 40px;
    width: 4px;
    background: var(--color-text);
    transform: rotate(25deg);
    margin-left: 2rem;
    position: relative;
    top: 1.5rem;
}
.flow h2 + p:before{
    transform: rotate(-25deg);
    margin-right: 2rem;
    margin-left: 0;
}

.flow ol{
    align-items: inherit;
    margin-bottom: 1rem;
}
.flow li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
.flow li:not(:last-child):after{
    content: '';
    display: inline-block;
    width: 25px;
    height: 70px;
    position: absolute;
    right: -7rem;
    top: 10rem;
    background: url(images/arrow-left.png) center / contain no-repeat;
}

/* ----------------------------------------------------------------
    はじめての方へ
   ---------------------------------------------------------------- */
.hajimete{
    background:url(images/bg-hajimete.png) bottom -2px center / 600px repeat-x;
}
.hajimete .content_area{
    padding-bottom: 0;
}
.hajimete h2{
    text-align: left;
    margin-bottom: 2rem;
    font-size: 3.2rem;
}

/* ==========================================================================
   4. 太陽光撤去 送客LP 追加コンポーネント（clone後に追加）
   既存クラスに無い部品のみ。必ず既存規則の後ろに置き cascade を壊さない。
   原典（CarNext）には無かった部品：0円グリッド／コールアウト／相場表／きっかけ。
   ========================================================================== */

/* 0円 × 4 グリッド（B3） */
.zero{
    display:flex;
    gap:1.5rem;
    flex-wrap:wrap;
    max-width:1000px;
    margin:0 auto 4rem;
}
.zero .z{
    flex:1 1 calc(25% - 1.5rem);
    min-width:180px;
    background:var(--color-white);
    border:3px solid var(--color-text);
    border-radius:10px;
    padding:2rem 1rem;
    text-align:center;
    box-shadow:0 0 16px rgb(0 0 0 / 12%);
}
.zero .z .n{
    font-size:4rem;
    font-weight:900;
    color:var(--color-primary);
    line-height:1;
}
.zero .z .l{
    font-size:1.6rem;
    font-weight:700;
    margin-top:.5rem;
}

/* コールアウト（注記・免責・出典） */
.callout{
    max-width:1000px;
    margin:0 auto 2rem;
    padding:2rem;
    border-radius:10px;
    background:var(--color-white);
    border-left:8px solid var(--color-blue);
    font-size:1.5rem;
    line-height:1.8;
    text-align:left;
    box-shadow:0 0 16px rgb(0 0 0 / 8%);
}
.callout.warn{
    border-left-color:var(--color-primary);
    background:#fff5f4;
}
.callout b{
    font-weight:700;
}

/* 費用ブロックのテーブル（2〜4列対応。compareの2列前提に依存させない） */
.cost table{
    width:100%;
    border-collapse:collapse;
    background:var(--color-white);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 0 16px rgb(0 0 0 / 12%);
    margin-bottom:2rem;
}
.cost th,.cost td{
    padding:1.4rem 1.6rem;
    text-align:left;
    vertical-align:middle;
    border-bottom:1px solid var(--color-gray-border);
    font-size:1.5rem;
    line-height:1.5;
}
.cost thead th{
    background:var(--color-yellow);
    font-weight:700;
}
.cost tbody tr:last-child td{
    border-bottom:none;
}
.cost tbody tr:nth-child(even) td{
    background:#fbfaf3;
}
.cost td.num{
    text-align:right;
    font-weight:700;
    color:var(--color-primary);
    white-space:nowrap;
}
.cost h3{
    text-align:left;
    font-size:2.2rem;
    margin:4rem 0 1.5rem;
}
.cost .lead{
    max-width:1000px;
    margin:0 auto 2rem;
    font-size:1.6rem;
}

/* 撤去が必要になるきっかけ 6つ（B7） */
.trigger .grid{
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem;
}
.trigger .grid .t{
    flex:1 1 calc(33.333% - 1.5rem);
    min-width:240px;
    background:var(--color-white);
    border:2px solid var(--color-gray-border);
    border-radius:10px;
    padding:2rem;
    box-sizing:border-box;
    font-size:1.5rem;
    line-height:1.6;
}
.trigger .grid .t b{
    display:block;
    font-size:1.9rem;
    color:var(--color-primary);
    margin-bottom:.5rem;
}

/* FV写真を左カラムいっぱいに敷く（上部の無駄な余白を解消） */
.main .content_area{
    align-items: stretch;
}
.fv{
    align-self: stretch;
    display: block;
    width: 48%;
    max-width: 560px;
    min-width: 320px;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 12px 30px -16px rgba(0,0,0,.45);
}
.fv img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
}

/* 任意項目の折りたたみ（初期はスッキリ／クリックで展開） */
.more-fields{
    margin: 4px 0 14px;
}
.more-fields > summary{
    cursor: pointer;
    list-style: none;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-blue-dark);
    background: #eef7fb;
    border: 1px dashed var(--color-blue);
    border-radius: 8px;
    padding: 1rem;
}
.more-fields > summary::-webkit-details-marker{
    display: none;
}
.more-fields > summary::before{
    content: "＋ ";
    font-weight: 900;
}
.more-fields[open] > summary{
    margin-bottom: 1.2rem;
}
.more-fields[open] > summary::before{
    content: "− ";
}
.more-fields > summary span{
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--color-text-muted);
}

/* ==========================================================================
   5. レスポンシブ（clone後に追加）
   原典はPC専用（メディアクエリ0件）だったが、太陽光撤去の送客LPは
   Google広告流入の大半がスマホ。PC版面の縮小表示はCVRを直接殺すため、
   スマホで版面・フォーム・CV・テーブルが破綻せず「タップで完結」する状態に
   上書きする。必ずファイル末尾に置き、既存規則へ後勝ちさせる。
   ========================================================================== */
@media screen and (max-width: 820px) {

  /* セクション共通：画面端に張り付かない左右余白 */
  .content_area { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }

  /* ---- ヘッダー：ロゴと電話を縦積み・中央寄せ ---- */
  header .content_area.flex { flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 8px 12px; }
  header h1 { justify-content: center; flex-wrap: wrap; gap: 6px !important; }
  header h1 span:nth-of-type(1) { font-size: 20px !important; }
  header h1 span:nth-of-type(2) { font-size: 12px !important; }
  header .operating_num { font-size: 18px; margin-right: 6px; }
  header .operating_time { font-size: 11px; display: block; }

  /* ---- ファーストビュー：写真→フォームの縦積み ---- */
  .main .content_area { flex-direction: column; align-items: stretch; max-width: 100%; padding-bottom: 1rem; }
  .fv { width: 100%; max-width: none; min-width: 0; height: 200px; margin: 0 0 1.2rem; border-radius: 12px; }
  .fv img { height: 100%; }
  .main_form { max-width: 100%; min-width: 0; width: 100%; margin: 0; padding: 5% 4%; }
  .main .balloon { width: 100%; box-sizing: border-box; }

  /* ---- フォーム内：ラベル上・入力下の縦積みで押しやすく ---- */
  .form_title, .form_area { display: block; width: 100%; }
  .form_title { margin-bottom: 4px; }
  .form_title label { top: 0; font-size: 14px; }
  .form_area { margin-bottom: 14px; }

  /* ---- 「理由」4枚：1カラム ---- */
  .row-2 > * { width: 100%; }
  .reason li:nth-child(-n+2) { margin-bottom: 2rem; }
  .reason li { padding-top: 9rem; }
  .pd { padding: 2rem 1.5rem; }

  /* ---- 見出し ---- */
  h2 { font-size: 2.2rem; }
  h2.content_ttl { font-size: 2.8rem; margin-bottom: 4rem; padding-top: 4rem; }
  .hajimete h2 { font-size: 2.4rem; }

  /* ---- 0円グリッド：2×2 ---- */
  .zero { gap: 1rem; }
  .zero .z { flex: 1 1 calc(50% - 1rem); min-width: 0; padding: 1.6rem 0.8rem; }
  .zero .z .n { font-size: 3.2rem; }
  .zero .z .l { font-size: 1.4rem; }

  /* ---- 比較・費用テーブル：文字と余白を圧縮し、はみ出しを防ぐ ---- */
  .compare table tbody td,
  .compare table thead th { padding: 0.8rem 0.6rem; font-size: 1.25rem; line-height: 1.45; }
  .cost th, .cost td { padding: 0.9rem 0.7rem; font-size: 1.25rem; line-height: 1.45; }
  .cost td.num { white-space: normal; font-size: 1.25rem; }
  .cost h3 { font-size: 2rem; margin: 3rem 0 1.2rem; }
  .callout { padding: 1.6rem; font-size: 1.35rem; }

  /* ---- CV：電話ボックスとWEBボタンを縦積み ---- */
  .cv { padding: 2rem 1rem 0; }
  .cv .flex.row-2 { flex-direction: column; }
  .cv .flex.row-2 > * { width: 100%; }
  .btn-01 a { width: 100%; box-sizing: border-box; }
  .cv .fs_xxl.heavy { font-size: 3.6rem; }
  .balloon { font-size: 2.2rem; max-width: 100%; }

  /* ---- きっかけ 6枚：1カラム ---- */
  .trigger .grid .t { flex: 1 1 100%; min-width: 0; }

  /* ---- 流れ 4STEP：2×2、接続矢印は隠す ---- */
  .flow ol { flex-wrap: wrap; }
  .flow li { width: 48%; margin-bottom: 2rem; }
  .flow li:not(:last-child):after { display: none; }

  /* ---- はじめての方へ：画像とテキストを縦積み ---- */
  .hajimete .flex { flex-direction: column; text-align: center; }
  .hajimete h2 { text-align: center; }

  /* ---- FAQ：質問とボタンをコンパクトに ---- */
  .faqs .acnav__label { flex-wrap: wrap; }
  .faqs .faqs_q { padding-left: 3.2rem; font-size: 1.5rem; }
  .faqs .faqs_q:before { left: 1rem; }
  .faqs .btn-inner { max-width: 110px; margin-right: 1rem; font-size: 1.2rem; padding: 0.8rem 0.4rem; }
  .faqs .faqs_a { padding: 1rem 1.4rem 2rem 3.2rem; }
  .faqs .pd { padding: 1.2rem; }

  /* ---- フッター：縦積み ---- */
  footer .content_area { display: block; }
  footer .content_area p { display: block; margin-bottom: 6px; }
  footer .content_area p a { padding: 0; }
}

@media screen and (max-width: 420px) {
  h2.content_ttl { font-size: 2.4rem; }
  .flow li { width: 100%; }
  .zero .z { flex: 1 1 100%; }
  .cv .fs_xxl.heavy { font-size: 3.2rem; }
  .balloon { font-size: 2rem; }
}

/* ==========================================================================
   6. FVヒーロー再構築（大見出し＋実写バナー＋安心要素）
   踏襲元カーネクストの「見出し／サブ約束／信頼バッジ／事例カード／無料バー」
   構成を、太陽光撤去用に事実の範囲で再現。偽の実績数字は使わない。
   ========================================================================== */
.fv-hero{
    width: 55%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1.5rem 1.5rem 0;
    box-sizing: border-box;
}
.fv-lead{ text-align: left; }
.fv-eyebrow{
    display: inline-block;
    font-size: 1.4rem; font-weight: 800; color: #fff;
    background: var(--color-text); border-radius: 100px;
    padding: .5rem 1.5rem; margin-bottom: 1.2rem;
}
.fv-q{ font-size: 2.4rem; font-weight: 800; margin-bottom: .4rem; text-align: left; }
.fv-lead{ text-align: left; padding-top: 1rem; }
.fv-title{
    text-align: left;
    font-size: 6.4rem; font-weight: 900; line-height: 1.1;
    letter-spacing: -.03em; margin-bottom: 1.8rem;
}
.fv-title .hl{ color: var(--color-primary); }
.fv-sub{ margin-bottom: 1rem; text-align: left; }
.fv-sub span{
    position: relative; display: inline-block;
    font-size: 2.2rem; font-weight: 800; padding: 0 2.8rem;
}
.fv-sub span::before, .fv-sub span::after{
    content: ""; position: absolute; top: 4px; width: 3px; height: 2.4rem;
    background: var(--color-text);
}
.fv-sub span::before{ left: .5rem; transform: rotate(-20deg); }
.fv-sub span::after{ right: .5rem; transform: rotate(20deg); }
.fv-fact{ font-size: 1.3rem; line-height: 1.65; color: #3a3a3a; margin-bottom: 1.6rem; text-align: left; }
.fv-fact b{ color: var(--color-primary); font-weight: 800; }
.fv-visual{ position: relative; margin-top: auto; }
.fv-photo{ position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px -16px rgba(0,0,0,.45); }
.fv-photo img{ width: 100%; height: 315px; object-fit: cover; object-position: 50% 30%; display: block; }
.fv-seal{
    position: absolute; top: -14px; right: -8px; width: 104px; height: 104px; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #ffe789, #f2b100 68%, #c98a00);
    border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.3);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--color-text); font-weight: 800; font-size: 1.15rem; line-height: 1.25; text-align: center;
    transform: rotate(-8deg);
}
.fv-seal b{ display: block; font-size: 2.8rem; font-weight: 900; color: var(--color-primary); line-height: 1; }
.fv-cases-ttl{ text-align: left; font-size: 1.4rem; font-weight: 800; margin: 1.4rem 0 .7rem; }
.fv-cases{ display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.fv-cases li{
    background: #fff; border: 2px solid var(--color-primary); border-radius: 8px;
    font-size: 1.4rem; font-weight: 700; padding: .7rem .8rem .7rem 2.7rem; position: relative;
    display: flex; align-items: center;
}
.fv-cases li::before{
    content: "✓"; position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    color: #fff; background: var(--color-primary); width: 1.6rem; height: 1.6rem; border-radius: 50%;
    font-size: 1.05rem; display: flex; align-items: center; justify-content: center;
}
.fv-freebar{
    margin-top: 1.2rem; text-align: center; font-size: 1.5rem; font-weight: 800;
    background: var(--color-text); color: #fff; border-radius: 8px; padding: 1.1rem;
}
.fv-freebar b{ color: var(--color-marker-y); font-size: 1.9rem; }

@media screen and (max-width: 820px){
    .fv-hero{ width: 100%; max-width: none; padding: 0 0 1rem; margin-bottom: 1rem; }
    .fv-q{ font-size: 1.9rem; }
    .fv-title{ font-size: 4.2rem; margin-bottom: 1rem; }
    .fv-sub span{ font-size: 1.8rem; }
    .fv-fact{ font-size: 1.2rem; }
    .fv-photo img{ height: 210px; }
    .fv-cases li{ font-size: 1.25rem; padding: .6rem .6rem .6rem 2.4rem; }
    .fv-freebar{ font-size: 1.3rem; }
}

/* ==========================================================================
   6. 2ステップ・フォーム（clone後に追加）
   目的：連絡先入力をSTEP2へ送り、STEP1（設置場所＋枚数＋CTA）を
   ファーストビューに収める。フォームが短くなる＝写真(.fv は align stretch で
   フォーム高さに追従)も自動で短くなる。
   ========================================================================== */

/* --- CTA を input / button 両方に効かせる（原典は input のみ緑指定だった） --- */
.submit_btn_box .submit_btn{
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-weight: bold;
    color: #fff;
    width: 90%;
    max-width: 370px;
    padding: 20px 0;
    border-radius: 50px;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    background-color: var(--color-green);
    border: none;
    border-bottom: 6px solid var(--color-green-dark);
    transition: filter .15s ease;
}
.submit_btn_box .submit_btn:hover{
    filter: brightness(1.04);
    border-bottom: 3px solid var(--color-green-dark);
    margin-top: 3px;
}
.submit_btn .btn_arrow{
    display: inline-block;
    margin-left: 10px;
    font-size: 15px;
    transform: translateY(-1px);
}

/* STEP1 ボタン下の補足コピー */
.step1_btn_box{ margin-top: 4px; }
.btn_sub{
    text-align: center;
    font-size: 12.5px;
    color: var(--color-text-muted);
    margin: 10px 0 2px;
    line-height: 1.5;
}
.btn_sub strong{ color: var(--color-green-dark); font-weight: 900; }

/* STEP2：初期は隠し、クリックでふわっと展開 */
.step2[hidden]{ display: none; }
.step2.is-open{
    display: block;
    animation: step2in .35s ease both;
    margin-top: 14px;
    padding-top: 4px;
    border-top: 1px dashed var(--color-gray);
}

/* STEP1回答後、個人情報を聞く前に料金目安を返す */
.price-preview{
    margin: 4px 0 18px;
    padding: 18px 16px;
    text-align: center;
    background: #fffbea;
    border: 2px solid var(--color-yellow);
    border-radius: 12px;
    outline: none;
}
.price-preview:focus-visible{
    box-shadow: 0 0 0 3px rgba(18, 117, 101, .28);
}
.price-preview-label{
    margin: 0 0 4px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 800;
}
.price-preview-value{
    margin: 0;
    color: #b43b16;
    font-size: clamp(25px, 7vw, 34px);
    line-height: 1.25;
    font-weight: 900;
}
.price-preview-scope{
    margin: 5px 0 0;
    color: var(--color-navy);
    font-size: 14px;
    font-weight: 800;
}
.price-preview-note{
    margin: 9px auto 0;
    max-width: 34em;
    color: var(--color-text-muted);
    font-size: 11.5px;
    line-height: 1.55;
}
@keyframes step2in{
    from{ opacity: 0; transform: translateY(-6px); }
    to{ opacity: 1; transform: translateY(0); }
}
.step_badge{
    display: inline-block;
    background: var(--color-green);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}

/* 入力エラー */
.err_msg{
    color: #d32f2f;
    font-size: 12px;
    font-weight: 700;
    margin: 2px 0 8px;
    padding-left: 2px;
}
.target_item{
    box-shadow: 0 0 0 2px #f12 inset !important;
    border-radius: 2px;
}

/* --- デスクトップのみ：ファーストビューを詰めてCTAを上げる --- */
@media screen and (min-width: 821px){
    .main .balloon{ margin-bottom: 1rem; }
    .jizei_text1{ padding-bottom: .75rem; margin-bottom: .25rem; }
    .main_form{ padding-top: 2%; padding-bottom: 2%; }
    form.contact_form{ padding-top: 6px; padding-bottom: 10px; }
    form.contact_form h3{ margin-bottom: .6rem; }
}

/* ==========================================================================
   7. 配色 v3 — 水色ベース＋navyアンカー
   40人パネル(navy24 / sky14 = 青系38/40 ｜ サンゴールド2)を反映。
   煽り(赤・金の"面")→安堵と信頼(青の面＋navyの重石)。地は明るく可読、締めはnavy。
   ※現段階はFV中心。下部セクションのbg-01(サンゴールド)は次段で追随させる。
   ========================================================================== */
:root{
  --color-sky:        #15a3c5; /* FVの地＝スマ留式の彩度高めティール。白見出しで最大コントラスト＝視認性◎ */
  --color-sky-soft:   #35b3d0; /* やや明るいティール */
  --color-sky-accent: #3b7db0; /* 罫線・信頼バッジ・フォーカスのアクセント青 */
}

/* FVの面を サンゴールド → 水色 へ。navyの撤去モチーフが薄く映える */
.main{ background-color: var(--color-sky); }
.main:before{ background-color: rgba(255,255,255,.05); } /* ティールを均一に保つ（上部の淡ベールをほぼ無し）。白見出しのため地を暗めに */

/* ヘッダー＝navy帯 × 白文字（信頼の重石。権威で"悪質業者への恐怖"を鎮める）
   ※ .bg-03(0,0,1,0)に勝つため header.bg-03(0,0,1,1) で指定 */
header.bg-03{ background-color: var(--color-sky); } /* スマ留式：ヘッダーも水色(ティール)に統一。白ロゴが乗る */
header, header a, header .operating_num{ color:#fff; }
header .content_area h1 span{ color:#fff !important; }
header .operating_time{ color: rgba(255,255,255,.82); }

/* CTA＝暗緑ソリッド（現#20B516は白文字2.73:1でWCAG AA落ち→#0D6708でAA確保）＋可視フォーカス */
.submit_btn_box input.submit_btn,
.submit_btn_box button.submit_btn{
  background-color: var(--color-green-dark);
  border-bottom-color:#083f05;
}
.submit_btn_box .submit_btn:focus-visible{
  outline:3px solid var(--color-sky-accent);
  outline-offset:2px;
}

/* ==========================================================================
   7. FVショーケース（オペレーター＋4実例カード）＋見出しグラデ｜CarNext完全踏襲
   ========================================================================== */
/* 見出しにグラデーション（黒＝濃淡／赤アクセント＝赤グラデ） */
.fv-title{
    background: linear-gradient(180deg,#2c2c2c 0%, #000 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.fv-title .hl{
    background: linear-gradient(180deg,#ff3b30 0%, #c40000 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
/* ショーケース：左にオペレーター、右に2×2の実例カード */
.fv-showcase{
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.fv-operator{
    width: 40%;
    max-width: 240px;
    height: auto;
    align-self: flex-end;
    transform: scaleX(-1);              /* 右（カード側）へ手を差し向ける */
    filter: drop-shadow(0 8px 12px rgba(0,0,0,.20));
}
.fv-cases-grid{
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding-top: 8px;
}
.fv-cases-grid .cc{
    position: relative;
    border-radius: 9px;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 5px 14px -5px rgba(0,0,0,.45);
    background: #fff;
}
.fv-cases-grid .cc img{
    width: 100%;
    height: 96px;
    object-fit: cover;
    display: block;
}
.fv-cases-grid .cc figcaption{
    position: absolute;
    top: 6px; left: 6px;
    background: var(--color-primary);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    padding: .3rem .7rem;
    border-radius: 100px;
    box-shadow: 0 2px 5px rgba(0,0,0,.35);
}
/* 金シールはオペレーターの差し出す手の先（グリッド左上の隙間）に浮かせ、カードを隠さない */
.fv-showcase .fv-seal{
    top: auto; bottom: -14px; right: -8px;
    width: 92px; height: 92px;
}

@media screen and (max-width: 820px){
    .fv-operator{ max-width: 150px; }
    .fv-cases-grid .cc img{ height: 84px; }
    .fv-cases-grid .cc figcaption{ font-size: 1.05rem; }
}

/* ==========================================================================
   8. 「選ばれる理由」アイコン（CarNext挿絵＝著作権/ロゴ漏れを撤去し置換）
   ========================================================================== */
.reason_icon{
    width: 132px; height: 132px;
    margin: 1.5rem auto 2rem;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 34%, #fff5e2, #fbe1b4);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 4px #fff, 0 8px 18px -10px rgba(0,0,0,.35);
}
.reason_icon svg{ width: 66px; height: 66px; display: block; }

/* ==========================================================================
   9. 流れ／はじめて のアイコン（CarNext挿絵を撤去し置換）
   ========================================================================== */
.flow_icon{
    width: 112px; height: 112px; margin: 0 auto;
    border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px -8px rgba(0,0,0,.35);
}
.flow_icon svg{ width: 58px; height: 58px; display: block; }
.hajimete_icon{
    width: 150px; height: 150px; flex: none;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 34%, #fff5e2, #fbe1b4);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 5px #fff, 0 8px 18px -10px rgba(0,0,0,.35);
}
.hajimete_icon svg{ width: 88px; height: 88px; display: block; }

/* ==========================================================================
   8. 黄色マーカー強調 — 水色ベースの差し色（赤文字の置換）
   水色地に黄色"文字"は同化して読めないため、濃紺文字＋蛍光イエロー下線ハイライトで
   「青×黄」の最強コンビを可読のまま実現。赤(--color-primary)の強調をここへ移す。
   ========================================================================== */
:root{ --color-mark: #ffd400; } /* 強調の黄色（塗り）。濃さはここで調整可 */

/* 通常テキスト内の黄色塗り（fv-subの0円 / fv-factの数値 等）＝赤の置換
   水色地でも沈まないよう濃紺の細い縁を付与（縁ゼロなら text-stroke/ text-shadow を削除） */
.mk,
.fv-fact b{
  color: var(--color-mark);
  -webkit-text-fill-color: var(--color-mark);
  background: none;
  font-weight: 900;
  paint-order: stroke fill;
  -webkit-text-stroke: .6px var(--color-navy);
  text-shadow: 0 1px 0 rgba(22,50,78,.35);
}

/* FV大見出しの「30秒」：赤グラデclip → 黄色塗り＋濃紺の縁に上書き */
.fv-title .hl{
  color: var(--color-mark) !important;
  -webkit-text-fill-color: var(--color-mark) !important;
  background: none !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 1.4px var(--color-navy);
  text-shadow: 0 2px 0 rgba(22,50,78,.42);
}

/* ==========================================================================
   10. FVをCarNextの比率に一致（余白除去・見出し特大・人物大・カード大・ラベル上）
   最後に置き、既存のFV関連ルールへ後勝ちさせる。
   ========================================================================== */
/* 左カラムを引き伸ばさず自然高さ＝内部の空白をなくす（上から密に詰める） */
.main .content_area{ align-items: flex-start; }
.fv-hero{ padding-top: 1.4rem; }
.fv-lead{ padding-top: 0; }
/* 見出しをCarNext級に特大 */
.fv-title{ font-size: 7rem; line-height: 1.05; margin-bottom: 1.2rem; letter-spacing: -.03em; }
.fv-sub{ margin-bottom: 0; }
.fv-sub span{ font-size: 2.4rem; }
/* 見出し直後に詰める（大きな空白を排除） */
.fv-visual{ margin-top: 1.4rem; }
.fv-cases-ttl{ margin: 0 0 .8rem; font-size: 1.5rem; }
/* 人物を大きく（CarNextのオペレーター比） */
.fv-showcase{ align-items: flex-end; gap: 10px; }
.fv-operator{ width: 42%; max-width: 300px; }
/* カードを大きく＋赤ラベルを写真の上に載せる（CarNext流） */
.fv-cases-grid{ gap: 12px; padding-top: 16px; }
.fv-cases-grid .cc{ overflow: visible; border-width: 3px; }
.fv-cases-grid .cc img{ height: 122px; border-radius: 7px; }
.fv-cases-grid .cc figcaption{
    top: -12px; left: 50%; right: auto;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 1.4rem;
    padding: .35rem 1rem;
    border: 2px solid #fff;
}
.fv-showcase .fv-seal{ width: 96px; height: 96px; bottom: -12px; right: -10px; }

@media screen and (max-width: 820px){
    .fv-title{ font-size: 4.8rem; }
    .fv-sub span{ font-size: 2rem; }
    .fv-operator{ max-width: 170px; }
    .fv-cases-grid .cc img{ height: 100px; }
    .fv-cases-grid .cc figcaption{ font-size: 1.2rem; }
}

/* ==========================================================================
   9. スマ留式 — ティール地 × 白見出し（視認性の本体）
   淡水色×濃文字→彩度高めティール×白文字に転換。黄色は「30秒/0円」のスポット差し色。
   ========================================================================== */
/* 大見出し：黒グラデ → 白（ティール地に最大コントラスト） */
.fv-title{
  background: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
/* サブ見出し・装飾線・ケース見出しも白へ */
.fv-sub, .fv-sub span{ color: #fff !important; }
.fv-sub span::before, .fv-sub span::after{ background: #fff !important; }
.fv-cases-ttl{ color: #fff !important; }

/* ==========================================================================
   10. FV上半分＝白背景 × 紺見出し（スマ留の白セクション式・最高可読）
   .main:before(上部395px)を白グラデにしてティールへ滑らかに繋ぐ。見出しは紺。
   30秒/0円は白地で黄ベタが消えるため「紺文字＋黄ハイライト」に。
   ========================================================================== */
.main:before{
  background: #ffffff !important; /* スマ留式：グラデ廃止→白とティールをクッキリ分割（ハードエッジ） */
}
/* 境目に出る装飾トラック帯は白地で浮くので撤去（クリーンな分割線に） */
.main:after{ display: none !important; }
/* 見出し・サブ＝紺（白地に最大コントラスト） */
.fv-title{
  -webkit-text-fill-color: var(--color-navy) !important;
  color: var(--color-navy) !important;
  text-shadow: none !important;
}
.fv-sub, .fv-sub span{ color: var(--color-navy) !important; }
.fv-sub span::before, .fv-sub span::after{ background: var(--color-navy) !important; }
/* 30秒 / 0円 ＝ 紺文字＋黄ハイライト（白地で映える） */
.fv-title .hl{
  color: var(--color-navy) !important;
  -webkit-text-fill-color: var(--color-navy) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  background: linear-gradient(transparent 55%, #ffd400 55%) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
.mk{
  color: var(--color-navy);
  -webkit-text-fill-color: var(--color-navy);
  -webkit-text-stroke: 0;
  text-shadow: none;
  background: linear-gradient(transparent 58%, #ffd400 58%);
}

/* ==========================================================================
   11. PC配置をCarNextに一致（第2弾）：左カラム拡幅・見出し特大・サブ1行・
        人物/カード拡大・金バッジを見出し右上へ（メダル位置）
   ========================================================================== */
.fv-hero{ width: 60%; max-width: 730px; position: relative; padding-top: 2rem; }
.fv-title{ font-size: 7.4rem; line-height: 1.04; padding-right: 122px; margin-bottom: 1.4rem; }
.fv-sub{ margin-bottom: 0; }
.fv-sub span{ font-size: 2.3rem; white-space: nowrap; }
.fv-visual{ margin-top: 1.8rem; }
.fv-operator{ width: 44%; max-width: 340px; }
.fv-cases-grid{ gap: 12px; padding-top: 18px; }
.fv-cases-grid .cc img{ height: 138px; }
.fv-cases-grid .cc figcaption{ font-size: 1.45rem; top: -13px; }
/* 金バッジ＝見出しの右上（CarNextのメダル位置）。カードには重ねない */
.fv-seal{
    position: absolute; top: 2px; right: 0; bottom: auto; left: auto;
    width: 118px; height: 118px; z-index: 6; margin: 0; transform: rotate(-8deg);
}
.fv-seal b{ font-size: 3rem; }

@media screen and (max-width: 820px){
    .fv-hero{ width: 100%; max-width: none; }
    .fv-title{ font-size: 4.4rem; padding-right: 84px; }
    .fv-sub span{ font-size: 1.85rem; white-space: normal; }
    .fv-operator{ max-width: 170px; }
    .fv-cases-grid .cc img{ height: 104px; }
    .fv-seal{ width: 78px; height: 78px; top: 0; }
    .fv-seal b{ font-size: 2.1rem; }
}

/* 12. 見出しの折れ解消（padding撤去＋各行nowrap）＋バッジ微調整 */
.fv-title{ font-size: 6.6rem; padding-right: 0; white-space: nowrap; line-height: 1.06; }
.fv-seal{ width: 104px; height: 104px; top: 0; right: 0; }
.fv-seal b{ font-size: 2.7rem; }
@media screen and (max-width: 820px){
    .fv-title{ font-size: 4.4rem; white-space: normal; }
    .fv-seal{ width: 76px; height: 76px; }
    .fv-seal b{ font-size: 2rem; }
}

/* ==========================================================================
   13. スマ留式FV配色の仕上げ — 白帯の大見出し＝ほぼ黒 ／ 強調＝水色(ティール)
   黄ハイライトを撤去（黄色は「今すぐ無料診断！」バッジのスポット差し色に一本化）。
   ========================================================================== */
.fv-title{
  -webkit-text-fill-color: #17242e !important; /* ほぼ黒（濃い墨） */
  color: #17242e !important;
}
.fv-sub, .fv-sub span{ color: #17242e !important; }
.fv-sub span::before, .fv-sub span::after{ background: #17242e !important; }
/* 「30秒」「0円」＝水色(ティール)。白地で読める濃さに */
.fv-title .hl,
.mk{
  color: #0c7e9a !important;
  -webkit-text-fill-color: #0c7e9a !important;
  background: none !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

/* ==========================================================================
   13. 中央にギュッと（CarNext密度）：見出し中央＋下げ／人物を中心へ寄せ重ね／カード拡大
   ========================================================================== */
.fv-lead{ text-align: center; padding-top: 2.6rem; }
.fv-title{ text-align: center; padding-right: 0; }
.fv-sub{ text-align: center; }
.fv-cases-ttl{ text-align: center; }
.fv-visual{ margin-top: 1.2rem; }
/* 人物＋カードを中央に寄せ、人物はカードへ重ねる（手のかぶりはOK） */
.fv-showcase{ justify-content: center; gap: 0; align-items: flex-end; }
.fv-operator{ width: auto; max-width: none; height: 352px; margin-right: -26px; position: relative; z-index: 3; }
.fv-cases-grid{ flex: 0 0 auto; width: 452px; gap: 12px; padding-top: 18px; }
.fv-cases-grid .cc img{ height: 152px; }
.fv-seal{ top: -6px; right: -6px; width: 100px; height: 100px; }
.fv-seal b{ font-size: 2.6rem; }

@media screen and (max-width: 820px){
    .fv-lead{ padding-top: 1.4rem; }
    .fv-showcase{ gap: 0; }
    .fv-operator{ height: 240px; margin-right: -16px; }
    .fv-cases-grid{ flex: 1; width: auto; }
    .fv-cases-grid .cc img{ height: 104px; }
}

/* ==========================================================================
   14. 女性を背面へ／さらに中央寄せ／体を無料バーに密着（隙間ゼロ）
   ========================================================================== */
.fv-operator{ z-index: 1; margin-right: -46px; }        /* カードの後ろ・より中央へ */
.fv-cases-grid{ position: relative; z-index: 2; }        /* カードを前面に */
.fv-visual{ margin-bottom: 0; }
.fv-freebar{ margin-top: 0; }                            /* 体と無料バーの隙間を消す */

@media screen and (max-width: 820px){
    .fv-operator{ margin-right: -30px; }
    .fv-freebar{ margin-top: 0; }
}

/* ==========================================================================
   15. カード↔無料バーに隙間（水色を見せる）＋女性をより画像側＝中央へ
       女性は無料バーに密着のまま、カードだけ上げて間隔を作る
   ========================================================================== */
.fv-cases-grid{ margin-bottom: 22px; }   /* カード下に余白＝バーとの間に水色 */
.fv-operator{ margin-right: -62px; }       /* 女性をより画像側（中央）へ */

@media screen and (max-width: 820px){
    .fv-cases-grid{ margin-bottom: 16px; }
    .fv-operator{ margin-right: -40px; }
}

/* ==========================================================================
   14. FV見出し：左揃えを徹底＋位置を下げて人物に寄せる
   ========================================================================== */
.fv-lead, .fv-title, .fv-sub{ text-align: left !important; }
/* 見出しブロックを下げる。下の .fv-visual は margin-top:auto なので人物が上に詰まり両者が近づく */
@media screen and (min-width: 821px){
  .fv-lead{ padding-top: 1.5rem !important; }
}

/* ==========================================================================
   16. 0円バッジを拡大＆左配置
   ========================================================================== */
.fv-seal{ left: -6px; right: auto; top: -10px; width: 132px; height: 132px; }
.fv-seal b{ font-size: 3.4rem; }
.fv-seal{ font-size: 1.3rem; }

@media screen and (max-width: 820px){
    .fv-seal{ width: 96px; height: 96px; left: -4px; top: -6px; }
    .fv-seal b{ font-size: 2.4rem; }
}

/* ==========================================================================
   17. 0円バッジ＝ショーケース左上（見出しの下・左側／テキスト非干渉）に大きく
   ========================================================================== */
.fv-showcase .fv-seal{
    position: absolute; top: -14px; left: -14px; right: auto; bottom: auto;
    width: 138px; height: 138px; z-index: 6; margin: 0; transform: rotate(-8deg);
}
.fv-showcase .fv-seal b{ font-size: 3.6rem; }
@media screen and (max-width: 820px){
    .fv-showcase .fv-seal{ width: 100px; height: 100px; top: -8px; left: -6px; }
    .fv-showcase .fv-seal b{ font-size: 2.5rem; }
}

/* 18. 0円バッジ＝見出し「わかる」の右上あたりに大きく（showcase規則を無効化） */
.fv-showcase .fv-seal{ position: static; }   /* 無効化（要素はfv-heroへ移動済） */
.fv-hero > .fv-seal, .fv-seal{
    position: absolute; top: 40px; right: 24px; left: auto; bottom: auto;
    width: 134px; height: 134px; z-index: 6; margin: 0; transform: rotate(-8deg);
}
.fv-seal b{ font-size: 3.5rem; }
@media screen and (max-width: 820px){
    .fv-seal{ width: 96px; height: 96px; top: 30px; right: 6px; }
    .fv-seal b{ font-size: 2.4rem; }
}

/* 19. モバイルのみ：0円バッジを小さく・右上角へ寄せ「わかる」への重なりを回避 */
@media screen and (max-width: 820px){
    .fv-seal{ top: -2px; right: 2px; width: 76px; height: 76px; }
    .fv-seal b{ font-size: 2rem; }
}

/* 20. モバイルのバッジ縮小（詳細度を合わせて確実に上書き） */
@media screen and (max-width: 820px){
    .fv-hero > .fv-seal{ width: 78px; height: 78px; top: -2px; right: 2px; }
    .fv-hero > .fv-seal b{ font-size: 2rem; }
}

/* ==========================================================================
   15. 本文の視認性強化（カーネクスト踏襲）
   大きい字・色の役割を整理（thead=ネイビー×白／数値=ネイビー太字）。
   情報が多い二次データは詰め込まず details アコーディオンで開閉＝大きい字を保つ。
   ========================================================================== */
/* メインの費用表：文字を大きく・余白を広く（カーネクスト級の可読性） */
.cost th, .cost td{ font-size: 1.95rem; padding: 1.9rem 2rem; line-height: 1.55; }
.cost thead th{ background: var(--color-navy); color:#fff; font-weight: 800; }
.cost td.num{ color: var(--color-navy); font-weight: 900; font-size: 2.05rem; }
.cost .lead{ font-size: 1.8rem; }

/* 二次情報アコーディオン（国データ／補助金／なぜ変わる）＝密度を畳む */
.cost details.acc{
  max-width: 1000px; margin: 0 auto 1.4rem; background:#fff;
  border: 2px solid var(--color-sky); border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
}
.cost details.acc > summary{
  list-style: none; cursor: pointer;
  font-size: 1.95rem; font-weight: 800; color: var(--color-navy);
  padding: 1.7rem 2rem; background: #eaf6fb;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.cost details.acc > summary::-webkit-details-marker{ display: none; }
.cost details.acc > summary::after{ content: "＋"; color: #0c7e9a; font-weight: 900; font-size: 2.4rem; line-height: 1; }
.cost details.acc[open] > summary{ border-bottom: 1px solid var(--color-gray-border); }
.cost details.acc[open] > summary::after{ content: "−"; }
/* 中の表・注釈はカード内でフラットに */
.cost details.acc table{ box-shadow: none; border-radius: 0; margin: 0; }
.cost details.acc .callout{ box-shadow: none; border-radius: 0; margin: 1.4rem; }

/* ==========================================================================
   16. 選ばれる理由 — カーネクスト式（番号＋大見出し＋本文＋隣に画像・左右交互）
   色は自社パレット（水色/ネイビー/白/黄）。文字大・書き方・"文章の隣に画像"を踏襲。
   ========================================================================== */
.reason .reasons{ max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 4rem; }
.reason-row{ display: flex; align-items: center; gap: 3.5rem; }
.reason-row.rev{ flex-direction: row-reverse; }
/* 理由ごとの区切り線（4つに分かれているのを明確に） */
.reason-row + .reason-row{ border-top: 2px solid #e3edf3; padding-top: 4rem; }
.reason-txt{ flex: 1 1 0; min-width: 0; text-align: left; }
.reason-img{ flex: 0 0 330px; margin: 0; }
.reason-img img{
  width: 100%; height: 280px; object-fit: cover; object-position: center 28%;
  display: block; border-radius: 18px;
  background: #f2f7fa; border: 4px solid #fff; box-shadow: 0 12px 28px -12px rgba(0,0,0,.42);
}
/* 見出し行：丸番号（上に★★★）＋大見出し（カーネクスト踏襲） */
.reason-head{ display: flex; align-items: center; gap: 1.6rem; margin: 1.4rem 0 1.6rem; }
.rnum{
  position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%;
  background: var(--color-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem; font-weight: 900; line-height: 1;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.4);
}
.rnum i{
  position: absolute; top: -1.5rem; left: 50%; transform: translateX(-50%);
  color: #ffcf33; font-size: 1.35rem; letter-spacing: 3px; font-style: normal; white-space: nowrap;
}
/* 大見出し */
.reason-h{ font-size: 2.9rem; font-weight: 900; line-height: 1.3; margin: 0; color: var(--color-navy); }
.reason-h .rk{ color: #0c7e9a; }
/* 本文（大きく・読みやすく） */
.reason-p{ font-size: 1.7rem; line-height: 1.95; color: #2a2a2a; }
.reason-p .marker_y{ background: linear-gradient(transparent 58%, #ffe14d 58%); font-weight: 700; }

@media screen and (max-width: 820px){
  .reason .reasons{ gap: 3rem; }
  .reason-row, .reason-row.rev{ flex-direction: column; gap: 1.6rem; }
  .reason-img{ flex: none; width: 74%; max-width: 300px; }
  .reason-h{ font-size: 2.4rem; }
  .reason-p{ font-size: 1.5rem; }
}

/* ==========================================================================
   21. 流れ＝実写ステップカード（CarNext踏襲：STEPラベル＋写真＋キャプション）
   ========================================================================== */
.flow-steps{
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 22px; margin: 2.4rem 0 1.5rem; padding: 0;
}
.flow-steps li{ flex: 1; text-align: center; }
.flow-steps .step-no{
    color: var(--color-primary); font-weight: 900; font-size: 1.7rem;
    letter-spacing: .06em; margin-bottom: .7rem; line-height: 1;
}
.flow-steps .step-no b{ font-size: 2.6rem; margin-left: 4px; }
.flow-steps .step-photo{
    margin: 0 0 1.1rem; border-radius: 12px; overflow: hidden;
    box-shadow: 0 10px 22px -10px rgba(0,0,0,.4);
    border: 4px solid #fff;
}
.flow-steps .step-photo img{ width: 100%; height: auto; display: block; }
.flow-steps .step-cap{ font-size: 1.6rem; font-weight: 700; line-height: 1.45; }
/* CarNextの流れは矢印なし → 旧 arrow-left.png を無効化 */
.flow li:not(:last-child):after{ display: none !important; }

@media screen and (max-width: 820px){
    .flow-steps{ flex-wrap: wrap; gap: 18px 14px; }
    .flow-steps li{ flex: 1 1 calc(50% - 14px); }
    .flow-steps .step-cap{ font-size: 1.4rem; }
    .flow-steps .step-no b{ font-size: 2.2rem; }
}

/* ==========================================================================
   17. 選ばれる理由：リッチ化（カーネクスト踏襲・特別感／"任せていい"感）
   ブランド名入り見出し＋大数字＋★／白カード＋影＋下向きノッチ／写真に縦キャッチ／金の★
   ========================================================================== */
/* 見出し：タイヨートの無料診断が選ばれる[4]つの理由 */
.reason-title{
  text-align: center; font-weight: 900; color: var(--color-navy);
  font-size: 3.4rem; line-height: 1.4; letter-spacing: .02em;
  margin: 0 auto 4.5rem; padding-top: .5rem;
}
.reason-title .rt-brand{ color: #0c7e9a; }
.reason-title .rt-num{
  position: relative; display: inline-block; color: var(--color-primary);
  font-size: 6rem; line-height: 1; vertical-align: -.7rem; margin: 0 .4rem; font-weight: 900;
}
.reason-title .rt-num i{
  position: absolute; top: -1.9rem; left: 50%; transform: translateX(-50%);
  color: #f5b301; font-size: 1.7rem; letter-spacing: 4px; font-style: normal; white-space: nowrap;
}

/* セクション地＝淡いティールの角丸パネル（特別感の下地） */
.reason{ background: #eef7fb; border-radius: 24px; padding: 4.5rem 3rem 5rem; }

/* 各理由を白カード化＋影＝リッチ */
.reason .reasons{ gap: 5rem; }
.reason-row, .reason-row.rev{
  background: #fff; border-radius: 22px; padding: 3.4rem 3.6rem;
  box-shadow: 0 16px 40px -20px rgba(16,50,78,.5); border: 1px solid #e3eef4;
  position: relative;
}
.reason-row + .reason-row{ border-top: none; padding-top: 3.4rem; }
/* カード間の下向きノッチ（連結感） */
.reason-row:not(:last-child)::after{
  content: ""; position: absolute; left: 50%; bottom: -2.9rem; transform: translateX(-50%);
  width: 0; height: 0; border-left: 18px solid transparent; border-right: 18px solid transparent;
  border-top: 18px solid #cfe6f1;
}

/* 番号バッジ格上げ（ネイビー球体＋金の★） */
.rnum{
  width: 70px; height: 70px; font-size: 3.6rem;
  background: radial-gradient(circle at 38% 32%, #2a6a94, var(--color-navy));
}
.rnum i{ color: #f5b301; font-size: 1.5rem; text-shadow: 0 1px 0 rgba(0,0,0,.18); }

/* 写真に縦書きキャッチ（カーネクスト風） */
.reason-img{ position: relative; }
.vcap{
  position: absolute; top: 14px; writing-mode: vertical-rl;
  font-weight: 900; font-size: 1.4rem; letter-spacing: 2px; color: #fff;
  background: rgba(12,126,154,.94); padding: 1.1rem .55rem; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.28); margin: 0;
}
.reason-row:not(.rev) .vcap{ right: 14px; }
.reason-row.rev .vcap{ left: 14px; }

@media screen and (max-width: 820px){
  .reason{ padding: 3rem 1.4rem 3.5rem; }
  .reason-title{ font-size: 2.5rem; }
  .reason-title .rt-num{ font-size: 4.4rem; }
  .reason-row, .reason-row.rev{ padding: 2.2rem 1.8rem; }
  .vcap{ font-size: 1.2rem; }
}

/* ==========================================================================
   18. 費用相場：表 → アイコン付きカード（視覚認知しやすく）
   ケースごとにアイコン＋大きい金額。記号で直感／数字を大きく／色で強調。
   ========================================================================== */
.cost-cards{ max-width: 1000px; margin: 0 auto 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.cost-card{
  flex: 0 1 300px; display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: 0;
  background: #fff; border-radius: 18px; overflow: hidden; padding: 0;
  box-shadow: 0 10px 26px -16px rgba(16,50,78,.45); border: 1px solid #e6eef4;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cost-card:hover{ transform: translateY(-3px); box-shadow: 0 18px 34px -16px rgba(16,50,78,.5); }
.cc-photo{ display: block; }
.cc-photo img{ width: 100%; height: 158px; object-fit: cover; display: block; }
.cc-label{ display: flex; flex-direction: column; gap: .3rem; align-items: center; padding: 1.6rem 1.4rem 0; }
.cc-label b{ font-size: 1.9rem; font-weight: 800; color: #1a2b38; line-height: 1.35; }
.cc-label small{ font-size: 1.35rem; color: var(--color-text-muted); }
.cc-price{ padding: .4rem 1.4rem 1.9rem; font-size: 1.7rem; font-weight: 700; color: var(--color-navy); white-space: nowrap; }
.cc-price em{ font-style: normal; font-size: 2.8rem; font-weight: 900; color: #0c7e9a; margin: 0 .08em; }

@media screen and (max-width: 820px){
  .cost-cards{ gap: 1.1rem; }
  .cost-card{ flex: 1 1 44%; }
  .cc-photo img{ height: 128px; }
  .cc-label{ padding: 1.2rem 1rem 0; }
  .cc-label b{ font-size: 1.6rem; }
  .cc-price{ padding: .3rem 1rem 1.4rem; }
  .cc-price em{ font-size: 2.3rem; }
}

/* 22. 「この診断が無料な理由」＝テキストが下部の街並みシルエット(bg-hajimete)に被らないよう下余白を確保 */
.hajimete .content_area{ padding-bottom: 100px; padding-top: 1rem; }
@media screen and (max-width: 820px){
    .hajimete .content_area{ padding-bottom: 78px; }
}

/* 23. 「この診断が無料な理由」の安心チェック3点 */
.assure-list{ margin: 1.4rem 0 1.2rem; text-align: left; }
.assure-list li{
    position: relative; padding-left: 3.2rem;
    font-size: 1.7rem; font-weight: 700; line-height: 1.55; margin-bottom: .8rem;
}
.assure-list li::before{
    content: "✓"; position: absolute; left: 0; top: .15em;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    background: var(--color-green); color: #fff; font-size: 1.4rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.assure-list b{ font-weight: 900; }
@media screen and (max-width: 820px){
    .assure-list{ display: inline-block; }
    .assure-list li{ font-size: 1.45rem; }
}

/* ==========================================================================
   19. 国の調査データ：退屈な表 → "最大約20倍"を魅せるバーチャート（開くと伸びる）
   ========================================================================== */
.range-chart{ padding: 2rem 1.6rem .5rem; }
.rc-head{
  text-align: center; font-size: 2rem; font-weight: 800; color: var(--color-navy);
  line-height: 1.5; margin-bottom: 2.4rem;
}
.rc-head b{ color: var(--color-primary); font-size: 2.7rem; }
.rc-row{ margin-bottom: 2.6rem; }
.rc-top{ display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; gap: 1rem; }
.rc-name{ font-size: 1.9rem; font-weight: 800; color: #1a2b38; }
.rc-mult{
  flex: none; font-size: 1.4rem; font-weight: 700; color: var(--color-primary);
  background: #fff0ee; border: 1px solid #f3c3bd; border-radius: 999px; padding: .3rem 1.2rem;
}
.rc-mult b{ font-size: 1.9rem; }
/* トラック＋バー（開閉で幅アニメ） */
.rc-track{ position: relative; height: 24px; background: #e9eff4; border-radius: 999px; overflow: visible; }
.rc-bar{
  position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg,#22b21a 0%,#e6b800 55%,#e00000 100%);
  transition: width 1.2s cubic-bezier(.2,.75,.2,1);
}
details[open] .rc-bar{ width: var(--max); }
/* 中央値マーカー（"普通はここ"なのに最大はずっと右＝差の演出） */
.rc-med{ position: absolute; top: -5px; height: 34px; width: 3px; background: var(--color-navy); left: var(--med); border-radius: 2px; }
.rc-med::after{ content: "中央値"; position: absolute; top: -1.7rem; left: 50%; transform: translateX(-50%); font-size: 1.1rem; font-weight: 700; color: var(--color-navy); white-space: nowrap; }
/* 数値（最小/中央/最大＝最大を赤く大きく） */
.rc-scale{ display: flex; justify-content: space-between; margin-top: 1.1rem; font-size: 1.45rem; color: var(--color-text-muted); }
.rc-scale b{ color: #1a2b38; font-size: 1.9rem; font-weight: 800; }
.rc-scale .hot{ color: var(--color-primary); }
.rc-scale .hot b{ color: var(--color-primary); font-size: 2.3rem; }
.rc-unit{ text-align: right; font-size: 1.3rem; color: var(--color-text-muted); margin: .6rem 0 1.4rem; }

@media screen and (max-width: 820px){
  .rc-head{ font-size: 1.7rem; }
  .rc-head b{ font-size: 2.2rem; }
  .rc-name{ font-size: 1.6rem; }
  .rc-scale b{ font-size: 1.6rem; }
  .rc-scale .hot b{ font-size: 2rem; }
}

/* ==========================================================================
   20. 補助金カード（もらえるお金＝緑で主役）／ なぜ変わる＝アイコン要因カード
   ========================================================================== */
/* --- 補助金カード --- */
.subsidy-cards{ padding: 1.8rem 1.4rem .5rem; display: flex; flex-direction: column; gap: 1.4rem; }
.sub-card{
  background: #fff; border: 1px solid #e6eef4; border-left: 5px solid #22b21a; border-radius: 14px;
  padding: 1.9rem 2.1rem; box-shadow: 0 8px 20px -14px rgba(16,50,78,.4);
}
.sub-tag{
  display: inline-block; background: var(--color-navy); color: #fff; font-weight: 800; font-size: 1.35rem;
  padding: .35rem 1.2rem; border-radius: 999px; margin-bottom: .9rem;
}
.sub-name{ font-size: 1.75rem; font-weight: 800; color: #1a2b38; line-height: 1.4; margin: 0 0 1.2rem; }
.sub-amount{ display: flex; align-items: baseline; gap: 1.2rem; background: #eefaef; border-radius: 10px; padding: 1.1rem 1.5rem; margin-bottom: 1.2rem; }
.sub-amount small{ font-size: 1.3rem; color: #2f7d52; font-weight: 700; flex: none; }
.sub-amount b{ font-size: 2.2rem; font-weight: 900; color: #148a37; line-height: 1.35; }
.sub-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.8rem; font-size: 1.42rem; color: var(--color-text-muted); line-height: 1.6; }
.sub-meta .sub-target{ flex: 1 1 260px; }
.sub-meta .sub-deadline{ flex: none; font-weight: 700; color: var(--color-navy); background: #f2f7fa; border: 1px solid #dbe6ee; border-radius: 8px; padding: .4rem 1.1rem; white-space: nowrap; }

/* --- なぜ変わる：要因カード --- */
.factor-cards{ padding: 1.8rem 1.4rem .5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.fac-card{
  display: flex; align-items: flex-start; gap: 1.5rem; background: #fff;
  border: 1px solid #e6eef4; border-radius: 14px; padding: 1.7rem 1.9rem;
  box-shadow: 0 8px 20px -14px rgba(16,50,78,.35);
}
.fac-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
.fac-icon{
  flex: none; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #2f75a3, #16324e);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(16,50,78,.55);
}
.fac-icon svg{ width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fac-txt b{ display: block; font-size: 1.7rem; font-weight: 800; color: #1a2b38; margin-bottom: .35rem; line-height: 1.4; }
.fac-txt p{ font-size: 1.42rem; line-height: 1.65; color: var(--color-text-muted); margin: 0; }

@media screen and (max-width: 820px){
  .factor-cards{ grid-template-columns: 1fr; }
  .sub-name{ font-size: 1.55rem; }
  .sub-amount b{ font-size: 1.9rem; }
}

/* ==========================================================================
   21. FVサブ「費用は0円」の修正
   .fv-sub span の \ / 装飾が内側の .mk(0円) にも二重適用され両隣に棒が出ていた。
   .mk からは装飾と余白を除去。0円だけ隣より少し大きく。
   ========================================================================== */
/* .fv-sub の内側spanを inline-flex にし、棒(::before/::after)と文字を
   align-items: baseline で揃える＝棒の底＝文字のベースライン＝底 が確実に一致する。
   0円は font-size で拡大（スペースを取るので「は」に重ならない）。 */
.fv-sub > span{ display: inline-flex !important; align-items: baseline; gap: 1rem; padding: 0 !important; }
.fv-sub > span::before, .fv-sub > span::after{
  position: static !important; top: auto; left: auto; right: auto; bottom: auto;
  width: 3px; height: 2.3rem; flex: none; transform-origin: bottom center;
}
.fv-sub .mk{ padding: 0 !important; font-size: 1.42em; }
.fv-sub .mk::before, .fv-sub .mk::after{ content: none !important; display: none !important; }

/* ==========================================================================
   22. 構成改修（ストーリー診断の反映） 2026-07-25
   ・問題提起ブロック（.trigger.problem）の導入文／締め文
   ・STEP1→STEP2 展開ボタン（#to_step2 は .submit_btn_box の外なので個別指定）
   ・電話/メール「どちらか一方」バッジ .req_any ／ 連絡先の注記 .form-note
   ========================================================================== */
/* 問題提起ブロック */
.trigger.problem .prob-lead{
    max-width: 860px;
    margin: 0 auto 2.6rem;
    font-size: 1.6rem;
    line-height: 1.9;
    color: var(--color-text-muted);
}
.trigger.problem .prob-lead b{ color: var(--color-navy); font-weight: 800; }
.trigger.problem .prob-close{
    max-width: 860px;
    margin: 2.6rem auto 0;
    font-size: 1.6rem;
    line-height: 1.9;
    font-weight: 700;
    color: var(--color-navy);
}
.sp-br{ display: none; }

/* STEP1 展開ボタン（#to_step2 は submit_btn_box の外にあるため個別に green ボタン化） */
.step1_btn_box .submit_btn{
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-weight: bold;
    color: #fff;
    width: 90%;
    max-width: 370px;
    padding: 20px 0;
    border-radius: 50px;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    margin: 0 auto;
    display: block;
    cursor: pointer;
    background-color: var(--color-green);
    border: none;
    border-bottom: 6px solid var(--color-green-dark);
    transition: filter .15s ease;
}
.step1_btn_box .submit_btn:hover{
    filter: brightness(1.04);
    border-bottom: 3px solid var(--color-green-dark);
    margin-top: 3px;
}

/* 連絡先の「どちらか一方」バッジ＆注記 */
.req_any{
    font-size: 10px;
    margin-right: 5px;
    padding: 0 4px;
    color: #fff;
    display: inline-block;
    float: left;
    font-weight: 700;
    margin-bottom: 5px;
    border-radius: 2px;
    background: var(--color-sky-accent, #3b7db0);
}
.form-note{
    clear: both;
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-navy);
    background: #eef6fb;
    border-left: 3px solid var(--color-sky-accent, #3b7db0);
    padding: 8px 12px;
    border-radius: 4px;
    margin: 4px 0 12px;
}
.form-note b{ font-weight: 800; }

/* 絶対配置の電卓を持たないCTA吹き出し（①インライン電卓・②③電卓なし）は、
   電卓用に空けていた右パディング(4rem)を左右対称に戻して中央寄せにする。
   ※CTA④「今すぐ無料診断！」だけは絶対配置の電卓が残るので対象外。 */
.balloon--center{ padding-right: 1rem; }

/* CTA①：文言＋文末の電卓が1行に収まるよう吹き出しを少し広げる */
.balloon--wide{ max-width: 620px; }

/* 理由2：審査で確認する項目（チェックリスト）。断定でなく“確認する項目”の枠で提示
   ※既存の .reason li（padding-top:9rem 等）を打ち消すため .reason 配下として明示上書き */
.reason .check-list{ list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem 2rem; }
.reason .check-list li{ position:relative; padding:.3rem 0 .3rem 2.6rem; margin:0; font-size:1.45rem; font-weight:700;
    color:var(--color-navy); line-height:1.6; flex:1 1 44%; min-width:220px; }
.reason .check-list li::before{ content:"✓"; position:absolute; left:.2rem; top:.3rem; color:var(--color-green-dark); font-weight:900; }
@media screen and (max-width:820px){ .reason .check-list li{ flex:1 1 100%; } }

/* STEP2 見出しの「あと少しで完了」補足 */
.step-left{ font-size:1.2rem; font-weight:700; color:var(--color-green-dark); margin-left:1rem; white-space:nowrap; }
@media screen and (max-width:820px){
    .step-left{ display:block; margin:.4rem 0 0; }
}

/* 国データ「最大20倍」を中高年向けに1つの比較で主役化（詳細3タイプ表は折りたたみ .acc.mini へ退避） */
.ce-simple{ padding: .6rem 0 .4rem; }
.ce-head{ font-size: 2.2rem; font-weight: 800; text-align: center; line-height: 1.5; margin: 0 0 2rem; }
.ce-head b{ color: var(--color-primary); font-size: 1.25em; }
.ce-two{ position: relative; max-width: 660px; margin: 0 auto; background: var(--color-white);
    border: 1px solid var(--color-gray-border); border-radius: 14px; padding: 2.4rem 2rem 2rem; }
.ce-row{ display: flex; align-items: center; gap: 1.2rem; margin: 1.3rem 0; }
.ce-lb{ flex: none; width: 130px; font-size: 1.4rem; font-weight: 700; color: var(--color-text); text-align: right; line-height: 1.35; }
.ce-bar{ flex: 1; height: 24px; background: #eef1f4; border-radius: 999px; overflow: hidden; }
.ce-bar i{ display: block; height: 100%; border-radius: 999px; }
.ce-bar i.g{ background: #22b21a; }
.ce-bar i.r{ background: linear-gradient(90deg, #e6a100, #e00000); }
.ce-num{ flex: none; width: 92px; font-size: 1.9rem; font-weight: 900; color: var(--color-navy); line-height: 1.1; }
.ce-num small{ display: block; font-size: 1.05rem; font-weight: 700; color: var(--color-text-muted); }
.ce-badge{ position: absolute; top: -16px; right: 18px; background: var(--color-primary); color: #fff;
    font-weight: 800; font-size: 1.5rem; padding: .4rem 1.5rem; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); }
.ce-badge b{ font-size: 1.5em; }
.ce-note{ max-width: 660px; margin: 1.5rem auto 0; font-size: 1.4rem; line-height: 1.75; color: var(--color-text-muted); text-align: center; }
.ce-note b{ color: var(--color-text); }
.ce-note .nb{ display: inline-block; }
.cta-assure .nb{ display: inline-block; }
/* 狭い画面で確実に2行に収める（sentenceがはみ出さないよう微縮小） */
@media (max-width: 420px){
  .cta-assure{ font-size: 1.85rem; letter-spacing: -.01em; }
}
.acc.mini{ margin-top: 1.8rem; }
@media screen and (max-width: 820px){
    .ce-head{ font-size: 1.9rem; }
    .ce-lb{ width: 92px; font-size: 1.25rem; }
    .ce-num{ width: 62px; font-size: 1.6rem; }
    .ce-badge{ font-size: 1.3rem; right: 10px; }
}

/* スマホ用 追従CTAバー（PCでは非表示。FVフォームが常時見えるPCには不要） */
.sticky-cta{ display: none; }
@media screen and (max-width: 820px){
    .sticky-cta{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        text-decoration: none; color: #fff; background: var(--color-green);
        border-top: 3px solid var(--color-green-dark); box-shadow: 0 -4px 16px rgba(0,0,0,.18);
        padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom)); }
    .sticky-cta .sc-main{ font-size: 2rem; font-weight: 900; line-height: 1.2; letter-spacing: .02em; }
    .sticky-cta .sc-sub{ font-size: 1.2rem; font-weight: 700; opacity: .95; margin-top: .3rem; }
    body{ padding-bottom: 84px; }
}

@media screen and (max-width: 820px){
    .trigger.problem .prob-lead,
    .trigger.problem .prob-close{ font-size: 1.5rem; }
    .sp-br{ display: inline; }
}

/* ==========================================================================
   22. FV下半分（人物＋4画像＋バー）を少し押し上げ＝見出しに近づける
   見出し↔画像ブロックの間隔(.fv-visual margin-top)を詰める。デスクトップのみ。
   ========================================================================== */
@media screen and (min-width: 821px){
  .fv-visual{ margin-top: -1.6rem !important; }
}

/* ==========================================================================
   23. ヘッダー ↔ 「今すぐ無料診断！」吹き出しの間に余白（今は繋がって見える）
   ========================================================================== */
.main .fv_balloon{ margin-top: 2.2rem; }

/* ==========================================================================
   24. 問題提起の見出しを2段に固定
   1段目「太陽光パネル、」／2段目「どうすればいいか分からないまま放置していませんか」
   2段目は折り返さないよう nowrap（収まらない画面幅では自動縮小）
   ========================================================================== */
.prob-ttl{ line-height: 1.35; }
.prob-ttl .pt-l2{ display: inline-block; white-space: nowrap; }
@media screen and (max-width: 1100px){
  .prob-ttl{ font-size: 3.4rem; }
}
@media screen and (max-width: 900px){
  .prob-ttl{ font-size: 2.8rem; }
}
@media screen and (max-width: 1000px){
  /* 1000px以下は nowrap を解除して自然折り返し（821〜1000pxでの横スクロールを防止）。
     ※広い画面（1000px超）は従来どおり2段目を1行表示 */
  .prob-ttl .pt-l2{ white-space: normal; }
}

/* ==========================================================================
   25. 比較表をカーネクスト式に最適化
   ・ヘッダーにタイヨートのロゴ（CarNextのロゴ位置を踏襲）
   ・各セルは「大きい要点（b）＋小さい補足（small）」の2階層で改行を制御
   ・左見出し列はブランド色ベタ、自社列は白地に大きい水色、他社列は黒＋グレー補足
   ========================================================================== */
.cmp-table{ border-radius: 14px; overflow: hidden; }
/* ヘッダー */
.cmp-table thead th{ padding: 1.1rem 1rem !important; vertical-align: middle; }
/* セクション全体を1画面に収める：見出し・表・文章の余白を圧縮 */
.compare h2.content_ttl{ padding-top: 4rem; margin-bottom: 3rem; }
.compare .cmp-table{ margin-bottom: 2.4rem !important; }
.cmp-table .cmp-us-name{ font-size: 2.1rem; }
.cmp-table .cmp-logo{ height: 34px; }
.cmp-table .cmp-them{ font-size: 1.65rem; }
/* ヘッダーは全列 同じ一色（カーネクスト踏襲）。差は"文字色"だけでつける */
.cmp-table thead th{ background: var(--color-yellow) !important; }
/* ロゴ＋社名は横並び1行（幅を無駄にしない／カーネクスト踏襲） */
.cmp-table .cmp-us-inner{ display: inline-flex; align-items: center; justify-content: center; gap: 1rem; white-space: nowrap; }
.cmp-table .cmp-logo{ height: 40px; width: auto; max-width: none !important; flex: none; }
/* 自社＝ネイビー濃色でブランドを主張／他社＝くすんだ濃灰で一歩引かせる */
.cmp-table .cmp-us-name{ font-size: 2.4rem; font-weight: 900; color: var(--color-navy); letter-spacing: .04em; }
.cmp-table .cmp-them{ font-size: 1.8rem; font-weight: 800; color: #1a2b38; }
/* 左の項目見出し列 */
.cmp-table .cmp-label{
  font-size: 1.65rem; font-weight: 800; color: #1a2b38;
  width: 20%; padding: 1.1rem 1rem !important;
}
/* 値セル：1行に凝縮（✓/×は値と同じ行・補足は直下でタイト）＝縦を短くする */
.cmp-table .cmp-val{ padding: 1.15rem 1.2rem !important; }
.cmp-table .cmp-val b{ display: inline; font-size: 2.2rem; font-weight: 900; line-height: 1.35; color: #1a2b38; }
.cmp-table .cmp-val small{
  display: block; margin-top: .15rem; font-size: 1.3rem; font-weight: 500;
  line-height: 1.45; color: var(--color-text-muted);
}
/* --- 視線誘導：薄い水色地は撤去（文字のコントラストで際立たせる）。列の輪郭だけ残す --- */
.cmp-table .cmp-val.good{ box-shadow: inset 3px 0 0 var(--color-navy), inset -3px 0 0 var(--color-navy); }
/* 自社の値＝FVと同じ明るい水色（大きい太字なので白地でも読める濃さに微調整） */
.cmp-table .cmp-val.good b{ color: #0f97ba; font-size: 2.5rem; letter-spacing: -.01em; }
/* ✓/× は値と同じ行に（別行にすると縦が伸びる） */
.cmp-table .cmp-mark{
  display: inline; font-style: normal; font-size: 1.9rem; font-weight: 900; line-height: 1; margin-right: .4rem;
}
.cmp-table .cmp-val.good .cmp-mark{ color: #12a03f; }
.cmp-table .cmp-val.bad .cmp-mark{ color: #b9c3cb; font-size: 1.7rem; }
.cmp-table .cmp-val.bad b{ color: #1a2b38; font-size: 2rem; font-weight: 800; }

/* --- 表下の文章：中央寄せ・改行整理・文字を大きく（カーネクスト式） --- */
.cmp-note{
  text-align: center; font-size: 1.72rem; line-height: 2.05; color: #2a3b47;
  margin: 0 auto; max-width: 900px; font-weight: 500;
}
.cmp-note b{ font-weight: 800; color: #1a2b38; }
.cmp-note .cmp-note-strong{ font-weight: 800; color: var(--color-primary); font-size: 1.85rem; }
.cmp-note .cmp-note-us{ color: #0a6f8a; font-size: 1.95rem; font-weight: 900; }

@media screen and (max-width: 820px){
  .cmp-table .cmp-us-name{ font-size: 1.5rem; }
  .cmp-table .cmp-us-inner{ gap: .5rem; }
  .cmp-table .cmp-mark{ font-size: 1.7rem; margin-bottom: .3rem; }
  .cmp-note{ font-size: 1.42rem; line-height: 1.9; text-align: left; }
  .cmp-note br{ display: none; }
  .cmp-note .cmp-note-strong{ font-size: 1.5rem; }
  .cmp-note .cmp-note-us{ font-size: 1.55rem; }
  .cmp-table .cmp-logo{ height: 26px; }
  .cmp-table .cmp-them{ font-size: 1.4rem; }
  .cmp-table .cmp-label{ font-size: 1.35rem; padding: 1.2rem .6rem !important; }
  .cmp-table .cmp-val{ padding: 1.3rem .7rem !important; }
  .cmp-table .cmp-val b{ font-size: 1.7rem; }
  .cmp-table .cmp-val.good b{ font-size: 1.8rem; }
  .cmp-table .cmp-val small{ font-size: 1.15rem; }
}

/* ==========================================================================
   26. ワードマーク「タイヨート」＝作り込んだロゴタイプ（ネオン発光はしない）
   カーネクストの"袋文字＋立体"の構造だけ借り、水色→ネイビーのグラデ＋白フチ＋
   わずかな影で「印象に残る」を作る。発光させないのは信頼を削らないため。
   ========================================================================== */
.taiyout-wm{
  font-weight: 900 !important;
  letter-spacing: .05em;
  /* 撤去サービスなので"太陽を丸出し"にしない。ネイビー基調＝信頼、黄色はバッジ等の差し色に留める。
     白の細フチ＋わずかな影で、水色地でもサンゴールド地でも輪郭が立つようにする。 */
  /* カーネクスト実測の3層構造を踏襲（光らせず"層"で作る＝安っぽくならない）
     ①塗り＝水色の浅いグラデ ②内フチ＝白の太フチ ③外キーライン＝黄色（＝ブランド第2色）
     ＋右斜体で動きを出す。グローは使わない。 */
  /* text-stroke は線が字の内側に食い込んで潰れるため使わない。
     text-shadow の多重リングで「外側だけ」に層を作る（①水色の塗り ②白 ③黄色）。 */
  display: inline-block;
  transform: skewX(-6deg);
  letter-spacing: .03em;
  color: #0f97ba !important;
  -webkit-text-fill-color: #0f97ba;
  background: none;
  -webkit-text-stroke: 0;
  text-shadow:
    /* ②白の内リング（近い側＝上に描画される） */
    1.5px 0 0 #fff, -1.5px 0 0 #fff, 0 1.5px 0 #fff, 0 -1.5px 0 #fff,
    1.1px 1.1px 0 #fff, -1.1px -1.1px 0 #fff, 1.1px -1.1px 0 #fff, -1.1px 1.1px 0 #fff,
    /* ③黄色の外キーライン（白の外側に回る） */
    3.2px 0 0 #FFC42E, -3.2px 0 0 #FFC42E, 0 3.2px 0 #FFC42E, 0 -3.2px 0 #FFC42E,
    2.4px 2.4px 0 #FFC42E, -2.4px -2.4px 0 #FFC42E, 2.4px -2.4px 0 #FFC42E, -2.4px 2.4px 0 #FFC42E,
    /* 落ち影 */
    0 4px 5px rgba(16,50,78,.35);
  filter: none;
}

/* ==========================================================================
   27. 軽いパララックス（FV以降の各セクション）
   背景モチーフのタイル位置(background-position)をスクロールで少しずらすだけ。
   要素を動かさないので、はみ出し・レイアウト崩れ・重なりの事故が起きない。
   内容・構成は一切変更しない。
   ========================================================================== */
.plx{ position: relative; }
.plx::before{
  content: "";
  position: absolute; inset: 0;
  background-image: url(images/bg-solar.svg);
  background-repeat: repeat;
  background-size: 340px auto;
  background-position: center var(--plx, 0px);   /* ← JSがこの値を動かす */
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
/* 中身は必ず背景より前面へ（見た目は変わらない） */
.plx > *{ position: relative; z-index: 1; }

/* 動きを減らす設定の人には出さない（アクセシビリティ） */
@media (prefers-reduced-motion: reduce){
  .plx::before{ background-position: center 0 !important; }
}

/* ==========================================================================
   23. スマホのみ：縦長セクションを横スワイプのカルーセルに（PC・内容は一切不変）
   目的＝スマホで縦が伸びすぎる箇所を、1枚ずつ横スクロールで見せて短くする。
   次カードの端を“のぞかせる”ことでスワイプ可能と気づかせる（scroll-snap）。
   ========================================================================== */
@media screen and (max-width: 820px){
  /* --- 選ばれる理由4つ（最長）→ 横カルーセル --- */
  .reason .reasons{
    flex-direction: row; flex-wrap: nowrap; gap: 1.2rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding-bottom: 1.4rem;
  }
  .reason .reason-row,
  .reason .reason-row.rev{
    flex: 0 0 86%; box-sizing: border-box; scroll-snap-align: center;
    flex-direction: column; gap: 1.4rem;
    border: 1px solid var(--color-gray-border); border-radius: 14px;
    padding: 2rem 1.8rem; background: var(--color-white);
  }
  .reason .reason-row + .reason-row{ border-top: 1px solid var(--color-gray-border); padding-top: 2rem; }
  .reason .reason-row::after{ display: none !important; }

  /* --- 問題提起 6カード → 横カルーセル --- */
  .trigger.problem .grid{
    flex-wrap: nowrap; gap: 1.2rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding-bottom: 1.4rem;
  }
  .trigger.problem .grid .t{
    flex: 0 0 80%; min-width: 0; box-sizing: border-box; scroll-snap-align: center;
  }

  /* --- 費用相場 3カード → 横カルーセル（3枚目が単独行になる2列を解消し1行化） --- */
  .cost-cards{
    flex-wrap: nowrap; justify-content: flex-start; gap: 1.2rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding-bottom: 1.4rem;
  }
  .cost-cards .cost-card{
    flex: 0 0 66%; box-sizing: border-box; scroll-snap-align: center;
  }

  /* --- ★§152 施工事例 7件 → 横カルーセル（2026-08-25）---
     実測 1,838px＝ページの12.5%で最長だった。写真は縮めず、並べ方だけ縦→横にする。
     ⚠️ 7件とも残す。価格訴求ではなく、施工品質を写真で判断できる証拠として使う。 */
  .cases .case-list{
    flex-wrap: nowrap; justify-content: flex-start; gap: 1.2rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding-bottom: 1.4rem;
  }
  /* ⚠️ align-items:flex-start にする。既定の stretch だと、タグ（3色の張り分け 等）が
     付いたカードに高さを揃えられ、タグの無いカードの中に白い空洞ができる（実測で1枚目に発生）。 */
  .cases .case-list{ align-items: flex-start; }
  .cases .case-list .case-item{
    flex: 0 0 86%; max-width: none; box-sizing: border-box; scroll-snap-align: center;
  }

  /* --- ★§152 床・カーテンレール 3件 → 横カルーセル（2026-08-25）---
     ここは主訴求ではない（当社の中心は壁紙）。縦を使ってまで先に読ませる場所ではない。 */
  .trigger .grid-scope{
    flex-wrap: nowrap; justify-content: flex-start; gap: 1.2rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding-bottom: 1.4rem;
  }
  .trigger .grid-scope .t{
    flex: 0 0 80%; min-width: 0; box-sizing: border-box; scroll-snap-align: center;
  }

  /* カルーセルのスクロールバーを細く上品に */
  .reason .reasons::-webkit-scrollbar,
  .trigger.problem .grid::-webkit-scrollbar,
  .cases .case-list::-webkit-scrollbar,
  .trigger .grid-scope::-webkit-scrollbar,
  .cost-cards::-webkit-scrollbar{ height: 6px; }
  .reason .reasons::-webkit-scrollbar-thumb,
  .trigger.problem .grid::-webkit-scrollbar-thumb,
  .cases .case-list::-webkit-scrollbar-thumb,
  .trigger .grid-scope::-webkit-scrollbar-thumb,
  .cost-cards::-webkit-scrollbar-thumb{ background: #cdd6dd; border-radius: 999px; }
}

/* ==========================================================================
   24. スマホのみ：中途半端な折り返し（オーファン）対策（PC・内容は不変）
   「1文字だけ2段目」「価格が2行に割れる」などを、行の均し・微縮小・装飾除去で解消。
   1要素が2行→1行になると、その分まるごと縦が縮む＝見やすさも縦幅も改善。
   ========================================================================== */
@media screen and (max-width: 820px){
  /* 見出し・短文：行頭行末を均して 1文字オーファンを防ぐ（line数は減らないが体裁が整う） */
  .content_ttl, .reason-h, .reason-title, .faqs_q, .ce-head, .balloon, .prob-close, .cc-label b{
    text-wrap: balance;
  }
  /* CTAボタン本文：微縮小で 1行に収める（2行→1行で各CTAの縦が縮む）。
     1行に収まらない長さのものは balance で2行を均し 1文字オーファンを防ぐ */
  .btn-01 .fs_xxl{ font-size: 2.1rem; line-height: 1.3; text-wrap: balance; }
  /* CTA①吹き出し：文末の装飾電卓がスマホで折り返しを誘発 → スマホのみ隠して 1行に */
  .balloon--wide picture{ display: none; }
  /* FV見出し：3行目に1文字こぼれるのを防ぎ 2行に収める */
  .fv-title{ font-size: 4rem; }
  /* 「選ばれる4つの理由」の ★★★4 が単独で折れないように一塊に */
  .rt-num{ white-space: nowrap; }
  /* 費用相場カードの価格を 1行に */
  .cc-price em{ font-size: 1.9rem; }
}

/* ==========================================================================
   25. スマホのみ：ヘッダー細く／FVショーケースの被り解消／freebar細く（PC・内容は不変）
   ========================================================================== */
@media screen and (max-width: 820px){
  /* ヘッダー：電話番号・受付時間を隠して、ロゴだけの細いバーに（ロゴは左揃え） */
  header .content_area.flex > div{ display: none; }
  header .content_area.flex{ padding: 6px 14px; gap: 0; align-items: flex-start; text-align: left; }
  header h1{ justify-content: flex-start; }

  /* FVショーケース：オペレーターは元サイズのまま左へ寄せ、事例グリッドと被らせない。
     写真の底辺は「すべて0円」バナーにくっつける（下の余白を0に） */
  .fv-showcase{ gap: 4px; align-items: flex-end; }
  .fv-showcase .fv-operator{ width: 46%; max-width: 172px; margin-left: -6px; margin-bottom: 0; align-self: flex-end; }
  .fv-showcase .fv-cases-grid{ margin-left: 0; gap: 8px; padding-top: 4px; }
  .fv-cases-grid .cc figcaption{ font-size: .95rem; padding: .25rem .6rem; }
  /* サブ見出しと事例の間の“空白”を除去：白文字で見えない見出しを隠し、上余白も詰める */
  .fv-cases-ttl{ display: none; }
  .fv-visual{ margin: 2px 0 0; }

  /* freebar：全体を細く（「すべて0円」は sp-br で2段目にひとまとまり表示）。写真の底辺と密着 */
  .fv-freebar{ padding: .7rem 1rem; margin-top: 0; line-height: 1.55; }
}

/* ==========================================================================
   28. スマホのみ：理由02のチェックリストを非表示
   カルーセルのカード高さが最長カードに揃うため、この5項目リストが
   全カードに空白を生んでいた。縦を詰めて全体を上げる。
   （PCでは審査基準の根拠として表示を維持）
   ========================================================================== */
@media screen and (max-width: 820px){
  .reason .check-list{ display: none; }
}

/* ==========================================================================
   29. スマホのみ：理由4枚の写真をカード幅いっぱいに＝余白を除去してキュッと
   原因＝ .reason-img が親カードの74%幅（右に26%の空き）＋ img の白4pxフチが
   白カード上で"余白"に見えていた。画像以外の余白を全部詰める。
   ========================================================================== */
@media screen and (max-width: 820px){
  .reason .reason-img{ width: 100% !important; max-width: none !important; align-self: stretch; }
  .reason .reason-img img{
    height: 190px;            /* 縦を詰める（写真は cover なので比率は崩れない） */
    border: 0;                /* 白フチを撤去＝余白の正体 */
    border-radius: 12px;
    box-shadow: 0 6px 14px -8px rgba(0,0,0,.35);
  }
  /* カード内の詰め（画像とテキストの間・カード外周） */
  .reason .reason-row,
  .reason .reason-row.rev{ padding: 1.6rem 1.4rem; gap: 1rem; }
  .reason .reason-head{ margin: .8rem 0 1rem; }
  /* 縦書きキャッチは画像に密着させる */
  .reason .vcap{ top: 10px; padding: .9rem .45rem; }
}

/* ==========================================================================
   30. スマホのFAQ：①Q.の重なりを原理的に解消 ②「回答を見る」→ ＋/− アイコン
   ・Q. は絶対配置をやめて通常フローの inline-block（幅固定）に＝文字と重ならない
   ・ボタンは右上の丸い＋アイコンへ（開くと −）。折り返しが消えてカードが縮む
   ========================================================================== */
@media screen and (max-width: 820px){
  /* ---- ① Q. を通常フローへ（重なり不可能に） ---- */
  .faqs .faqs_q{
    padding: 1.5rem 5rem 1.5rem 1.4rem;   /* 右は＋アイコンの逃げ */
    display: block;
    line-height: 1.55;
  }
  .faqs .faqs_q:before{
    position: static;
    display: inline-block;
    width: 2.1rem;
    margin: 0 .2rem 0 0;
    font-weight: 900;
  }
  /* 回答側もQ.と同じ字下げに揃える */
  .faqs .faqs_a{ padding: 1rem 1.4rem 1.8rem 1.4rem; }
  .faqs .faqs_a:before{
    position: static;
    display: inline-block;
    width: 2.1rem;
    margin: 0 .2rem 0 0;
    font-size: 1.6rem;
  }

  /* ---- ② 「回答を見る」→ 右上の丸い＋アイコン ---- */
  .faqs .acnav__label{ position: relative; display: block; }
  .faqs .btn-inner{
    position: absolute; top: 1.3rem; right: 1.2rem;
    width: 30px; height: 30px; max-width: none; min-width: 0;
    margin: 0; padding: 0; border-radius: 50%; border-bottom: 0;
    background-color: var(--color-yellow);
    /* 元のテキスト（回答を見る／閉じる）は隠す。JSがtextContentを書き換えるため */
    font-size: 0; color: transparent; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,.18);
  }
  .faqs .btn-inner::before{
    content: "＋";
    font-size: 17px; line-height: 1; font-weight: 900; color: #1a2b38;
  }
  .faqs .has-children.is-open .btn-inner{
    margin: 0; background-color: var(--color-yellow); border-bottom: 0;
  }
  .faqs .has-children.is-open .btn-inner::before{ content: "−"; }
}

/* ==========================================================================
   31. 問題提起の締め文：text-wrap:balance を解除
   balance は「行の長さを均す」ため測り幅を自ら狭め、1文目(3行)が
   コンテナより細く折り返されていた。2文目と同じ横幅を使わせる。
   ========================================================================== */
.trigger.problem .prob-close{
  text-wrap: initial !important;   /* balance解除 */
  text-align: center;
}
@media screen and (max-width: 820px){
  .trigger.problem .prob-close{ text-wrap: initial !important; }
}

/* ==========================================================================
   32. 受付時間を2段目へ ／ 吹き出しの電卓を正しい位置に
   ・時間は1つのまとまりとして折り返さない（全角"００"の孤立を防ぐ）
   ・電卓は position:absolute（right:8rem）で見出しに重なっていたため
     テキスト直後のインライン配置に変更
   ========================================================================== */
.tel-hours{ display: inline-block; white-space: nowrap; }

.balloon .balloon-calc{
  position: static !important;   /* 絶対配置を解除＝重なりを解消 */
  display: inline-block;
  vertical-align: middle;
  max-width: 38px;
  margin-left: .6rem;
  right: auto; top: auto;
}
@media screen and (max-width: 820px){
  /* スマホは吹き出しを1行に収めたいので電卓は隠す */
  .balloon .balloon-calc{ display: none; }
}

/* ==========================================================================
   33. 「選ばれる4つの理由」の★★★が上の行に重なるのを解消（スマホ）
   原因＝★は top:-1.9rem の絶対配置。スマホで見出しが2行になると1行目に食い込む。
   対策＝①見出しの行間を広げて逃げ場を作る ②★を小さくして「4」の頭に近づける
   ========================================================================== */
@media screen and (max-width: 820px){
  .reason-title{ line-height: 1.85; }
  .reason-title .rt-num i{
    top: -1.05rem;          /* 4の頭に近づける */
    font-size: 1.1rem;      /* 小さくして occupied 高さを減らす */
    letter-spacing: 2px;
  }
}

/* ==========================================================================
   34. 追従CTAの出現範囲（常時表示はうざいので範囲を絞る）
   ・初期は隠す（FVはフォームが目の前にあるので不要）
   ・#sticky-start（問題提起）を過ぎたら .is-visible でスライドイン
   ・#sticky-end（最終CTA）に到達したら消える＝同じ訴求の二重掲示を防ぐ
   ========================================================================== */
@media screen and (max-width: 820px){
  .sticky-cta{
    transform: translateY(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .28s ease, opacity .28s ease, visibility .28s;
  }
  .sticky-cta.is-visible{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* 常時 padding-bottom を空けると最下部に無駄な余白が残るので、
     追従バーが出ている間だけ余白を作る */
  body{ padding-bottom: 0; }
  body.has-sticky{ padding-bottom: 84px; }
}

/* ==========================================================================
   35. PC用 追従CTA（右下の丸ボタン）
   FVを過ぎてから最終CTAに到達するまでの間だけ出す（.is-visible はJSが付与）。
   スマホは下部バー(.sticky-cta)があるので、こちらはPCのみ表示。
   ========================================================================== */
.sticky-fab{ display: none; }

@media screen and (min-width: 821px){
  .sticky-fab{
    position: fixed; right: 28px; bottom: 28px; z-index: 999;
    width: 116px; height: 116px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-decoration: none; color: #fff; text-align: center; line-height: 1.15;
    background: radial-gradient(circle at 38% 30%, #157a10, var(--color-green-dark));
    border: 3px solid #fff;
    box-shadow: 0 10px 26px -8px rgba(16,50,78,.55), 0 0 0 4px rgba(13,103,8,.15);
    /* 初期は隠す（FVでは出さない） */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(14px) scale(.92);
    transition: opacity .28s ease, transform .28s ease, visibility .28s, box-shadow .18s ease;
  }
  .sticky-fab.is-visible{
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .sticky-fab:hover{
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 16px 32px -8px rgba(16,50,78,.6), 0 0 0 6px rgba(13,103,8,.2);
  }
  .sticky-fab .fab-eyebrow{
    font-size: 1.05rem; font-weight: 700; letter-spacing: .02em;
    background: var(--color-yellow); color: #1a2b38;
    border-radius: 999px; padding: .18rem .7rem; margin-bottom: .35rem;
  }
  .sticky-fab .fab-main{ font-size: 2.05rem; font-weight: 900; letter-spacing: .04em; }
  .sticky-fab .fab-note{ font-size: 1.1rem; font-weight: 700; margin-top: .3rem; opacity: .95; }
  /* キーボード操作でも見えるフォーカス */
  .sticky-fab:focus-visible{ outline: 3px solid var(--color-yellow); outline-offset: 3px; }
}

/* ==========================================================================
   26. タブレット帯（821〜1000px）の崩れ対策（PC 2カラムが narrow幅で溢れるのを防ぐ）
   FVはこの帯だけ縦積みにして横スクロールを解消。1001px以上は従来の2カラム維持。
   ========================================================================== */
@media screen and (min-width: 821px) and (max-width: 1000px){
  .main .content_area.flex{ flex-direction: column; align-items: stretch; }
  .fv-hero{ width: 100%; max-width: none; }
  .main .content_area.flex > div:last-child{ width: 100%; }
  .main_form{ width: 100%; max-width: 620px; min-width: 0; margin: 0 auto; }
}

/* ==========================================================================
   27. 安全ネット：意図しない横スクロールを全画面幅で防止
   ・root fix（各セクションの overflow 対策）は個別に実施済み。これは端数・将来分の保険。
   ・overflow-x:clip は hidden と違いスクロールコンテナを作らないため、
     position:fixed の追従CTA／カルーセル内の横スクロールに影響しない。
   ・未対応ブラウザでは無視される（＝現状維持）ので安全なフォールバック。
   ========================================================================== */
html{ overflow-x: clip; }

/* ==========================================================================
   §100 クロスダイレクト（クロス屋ToC送客）── タイヨートの器の上に載せる差分
   ・前半＝配色トークンの入れ替え（太陽光の黄×ネイビー → 内装の生成り×藍×テラコッタ）
   ・後半＝このLP固有の新規コンポーネント
   ⚠️ CSSを直したら index.html の style.css?v=NN を必ず上げること
   ========================================================================== */

/* -------------------------------------------------- 配色トークンの入れ替え */
:root{
  --color-bg:            #FAF6F0;  /* 生成り＝壁紙のベース */
  --color-bg-alt:        #F6F1E9;
  --color-yellow:        #F2D9A8;  /* 大面積キー（.bg-01/.bg-02）＝サンド。黄の"安売り感"を外す */
  --color-navy:          #1B3A57;  /* 藍＝職人・信頼 */
  --color-row-alt:       #F3EEE6;
  --color-primary:       #C0392B;  /* テラコッタ赤 */
  --color-secondary:     #D9542B;
  --color-marker-y:      #FFE96B;
  --color-input-fill:    #FFFDF2;
}

/* 背景モチーフ：太陽光パネル → 壁紙のダマスク */
.main, .cv, .plx::before{ background-image: url(images/bg-wall.svg); }
.main{ background-size: 180px auto; }
.plx::before{ background-size: 200px auto; opacity: .45; }
.main:after{ background-image: url(images/bg-wallline.svg); }
.main:before{ background-color: rgba(250, 246, 240, 0.84); }

/* 流用パーツに残っていた"太陽光の青"を内装の藍へ */
.cc-price em{ color: var(--color-navy); }
.cc-label b{ color: var(--color-navy); }
.reason-title .rt-brand{ color: var(--color-navy); }
.reason-row + .reason-row{ border-top-color: #E7DED0; }

/* -------------------------------------------------- ヘッダーのワードマーク */
.brand-wm{
  font-size: 3rem; font-weight: 900; letter-spacing: .04em; color: var(--color-navy);
  white-space: nowrap; line-height: 1;
  border-left: 6px solid var(--color-primary); padding-left: 1rem;
}
.brand-tag{ font-size: 1.4rem; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; }

/* -------------------------------------------------- FV（オペレーター画像なし＝4カード横一列） */
.fv-showcase{ display: flex; }
.fv-cases-grid{ display: grid; grid-template-columns: repeat(4, 1fr); flex: 1 1 auto; min-width: 0; }
.fv-cases-grid .cc{ background:#fff; border: 3px solid var(--color-navy); border-radius: 9px; position: relative; margin: 0; }
.fv-cases-grid .cc img{ width: 100%; object-fit: cover; display: block; }
.fv-cases-grid .cc figcaption{
  position: absolute; background: var(--color-navy); color: #fff; border-radius: 100px; font-weight: 800;
}
.fv-eyebrow{ background: var(--color-navy); font-size: 1.3rem; margin-bottom: 1rem; }
.fv-freebar b{ color: var(--color-marker-y); }
.fv-sub .mk{ background: linear-gradient(transparent 60%, var(--color-marker-y) 60%); }

/* -------------------------------------------------- 汎用リード文 */
.lead{ font-size: 1.7rem; line-height: 1.85; max-width: 860px; margin: 0 auto 3rem; }
.lead b{ color: var(--color-navy); font-weight: 800; }

/* -------------------------------------------------- 料金の内訳テーブル */
.price-detail{ padding: 1.6rem; }
.price-table{ width: 100%; border-collapse: collapse; background: #fff; font-size: 1.5rem; }
.price-table th, .price-table td{ border: 1px solid #E3D9C9; padding: 1.1rem 1.4rem; text-align: left; }
.price-table th{ background: var(--color-row-alt); font-weight: 700; width: 58%; }
.price-table td{ text-align: right; white-space: nowrap; font-weight: 700; }
.price-table td b{ font-size: 1.9rem; color: var(--color-navy); }
.price-table td.inc{ color: var(--color-green-dark); }
.price-table td.inc b{ color: var(--color-green-dark); }
.price-table tr.ex th{ color: var(--color-text-muted); font-weight: 400; }
.price-table tr.ex td{ color: var(--color-text-muted); font-weight: 400; }
.price-note{ font-size: 1.3rem; color: var(--color-text-muted); margin-top: 1.2rem; line-height: 1.7; }

/* -------------------------------------------------- §4 中間マージンの内訳図（このLPの心臓） */
.margin-sec{ background: var(--color-bg-alt); padding-bottom: 5rem; }
.ms-chart{ max-width: 900px; margin: 0 auto 2.6rem; }
.ms-row{ background:#fff; border: 2px solid #E3D9C9; border-radius: 12px; padding: 1.8rem 2rem 2rem; }
.ms-row.is-us{ border-color: var(--color-navy); box-shadow: 0 14px 30px -18px rgba(27,58,87,.6); }
.ms-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.ms-name{ font-size: 1.8rem; font-weight: 800; }
.ms-row.is-us .ms-name{ color: var(--color-navy); }
.ms-total{ font-size: 3.4rem; font-weight: 900; line-height: 1; white-space: nowrap; }
.ms-total small{ font-size: 1.5rem; font-weight: 700; margin-left: .2rem; }
.ms-row.is-us .ms-total{ color: var(--color-primary); }
.ms-bar{ display: flex; align-items: stretch; height: 78px; border-radius: 8px; overflow: hidden; }
.ms-seg{
  width: var(--w); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .2rem; color: #fff; text-align: center; padding: 0 .4rem; box-sizing: border-box; min-width: 0;
}
.ms-seg b{ font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
.ms-seg i{ font-style: normal; font-size: 1.9rem; font-weight: 900; line-height: 1; white-space: nowrap; }
.ms-seg.craft{ background: var(--color-navy); }
.ms-seg.maker{ background: var(--color-primary); }
.ms-seg.us{ background: #7A6A55; }
.ms-seg.cut{
  background: repeating-linear-gradient(45deg,#EFE7DA,#EFE7DA 7px,#E2D6C3 7px,#E2D6C3 14px);
  color: var(--color-text-muted); border: 2px dashed #C6B69D; box-sizing: border-box;
}
.ms-seg.cut i{ color: var(--color-primary); }
.ms-arrow{ text-align: center; padding: .9rem 0; }
.ms-arrow span{
  display: inline-block; background: var(--color-navy); color:#fff; font-weight: 800; font-size: 1.4rem;
  padding: .5rem 1.6rem; border-radius: 100px; position: relative;
}
.ms-arrow span::after{
  content:""; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--color-navy);
}
.ms-punch{
  text-align: center; font-size: 2rem; font-weight: 800; line-height: 1.7; margin-bottom: 3rem;
}
.ms-punch b{ font-size: 2.4rem; color: var(--color-primary); }
/* §149 2026-08-25：赤の大文字が2文続いて重かった。2文目は役割が違う（打ち消し）ので階層を下げる。
   ⚠️ 文言は1文字も変えていない。大きさと色だけ。 */
.ms-punch b.sub{ font-size: 1.7rem; color: var(--color-navy); }
.ms-notes{ display: flex; gap: 2rem; max-width: 900px; margin: 0 auto 2.4rem; }
.ms-note{ flex: 1 1 0; background:#fff; border-radius: 12px; padding: 2rem; border: 1px solid #E7DED0; min-width: 0; }
.ms-note h3{ font-size: 1.7rem; font-weight: 800; color: var(--color-navy); margin-bottom: .9rem; line-height: 1.5; }
.ms-note p{ font-size: 1.5rem; line-height: 1.85; }
.margin-sec .callout{ max-width: 900px; margin-left: auto; margin-right: auto; }

/* -------------------------------------------------- §7 施工事例 before/after */
.case-list{ display: flex; flex-wrap: wrap; gap: 2.4rem; justify-content: center; }
.case-item{ flex: 1 1 300px; max-width: 380px; background:#fff; border-radius: 12px; overflow: hidden;
  border: 1px solid #E7DED0; box-shadow: 0 14px 30px -20px rgba(27,58,87,.55); }
.ba{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #E7DED0; position: relative; }
.ba figure{ position: relative; margin: 0; }
.ba img{ width: 100%; height: 150px; object-fit: cover; display: block; }
.ba figcaption{
  position: absolute; left: 0; bottom: 0; font-size: 1.15rem; font-weight: 800; color:#fff;
  padding: .3rem .9rem; letter-spacing: .08em;
}
.ba .ba-b figcaption{ background: rgba(90,80,66,.88); }
.ba .ba-a figcaption{ background: var(--color-primary); }
.case-meta{ padding: 1.6rem 1.8rem 1.8rem; }
.case-meta h3{ font-size: 1.6rem; font-weight: 800; color: var(--color-navy); line-height: 1.5; margin-bottom: 1rem; }
.case-meta dl{ display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; font-size: 1.4rem; }
.case-meta dt{ font-weight: 700; color: var(--color-text-muted); white-space: nowrap; }
.case-meta dd{ font-weight: 700; }
/* §145 2026-08-25 施工事例のスリム化。
   「内容 既存クロスの撤去・下地処理・張り替え」が7件中4件、「仕様 白のスタンダードな壁紙」も4件で
   まったく同じ文だった＝写真より先に定型文を読ませていた。定型は消し、
   他の事例と違う情報（3色の張り分け／柄物／壁と天井）だけを1行のタグで残す。 */
.case-meta{ padding: 1.3rem 1.8rem 1.5rem; }
.case-meta h3{ margin-bottom: 0; }
.case-tag{
  display: inline-block; margin: .9rem 0 0; padding: .3rem 1rem;
  font-size: 1.3rem; font-weight: 700; line-height: 1.6;
  color: var(--color-navy); background: #F3ECE0; border-radius: 999px;
}

/* -------------------------------------------------- こまごま */
.tel-link{ color: inherit; text-decoration: none; }
.flow-note{ font-size: 1.6rem; margin-top: 2.4rem; }
.flow-note b{ color: var(--color-primary); }
.hajimete_icon svg{ width: 88px; height: 88px; }

/* -------------------------------------------------- レスポンシブ（3層を崩さない） */
@media screen and (max-width: 1000px){
  .ms-notes{ flex-direction: column; }
}
@media screen and (max-width: 820px){
  .brand-wm{ font-size: 2.2rem; }
  .brand-tag{ font-size: 1.1rem; white-space: normal; }
  /* FVカード：4列だと潰れるので2列 */
  .fv-cases-grid{ grid-template-columns: repeat(2, 1fr); }
  .lead{ font-size: 1.5rem; margin-bottom: 2.2rem; }
  .price-detail{ padding: 1rem; }
  .price-table{ font-size: 1.3rem; }
  .price-table th, .price-table td{ padding: .8rem .9rem; }
  .price-table th{ width: 55%; }
  .price-table td b{ font-size: 1.6rem; }
  .ms-row{ padding: 1.4rem 1.2rem 1.6rem; }
  .ms-name{ font-size: 1.5rem; }
  .ms-total{ font-size: 2.6rem; }
  .ms-bar{ height: 96px; }
  .ms-seg b{ font-size: 1rem; }
  .ms-seg i{ font-size: 1.4rem; }
  .ms-punch{ font-size: 1.6rem; }
  .ms-punch b{ font-size: 1.9rem; }
  .ms-punch b.sub{ font-size: 1.45rem; }
  .ms-note{ padding: 1.6rem; }
  .case-list{ gap: 1.6rem; }
  .case-item{ flex: 1 1 100%; max-width: none; }
  .ba img{ height: 130px; }
}

/* -------------------------------------------------- §100b
   タイヨートの「配色v3＝水色ベース」(style.css §7 / 1720行〜) を上書きする。
   あちらは"悪質業者への恐怖を鎮める"ためのティール。クロス屋の心理は恐怖ではなく
   「いくら？」なので、地は内装らしい生成りに戻し、ヘッダーは白×藍にする。       */
:root{
  --color-sky:        #EFE3CE;  /* FVの地＝生成りサンド */
  --color-sky-soft:   #F6EEE0;
  --color-sky-accent: #1B3A57;  /* 罫線・フォーカス＝藍 */
}
.main{ background-color: var(--color-sky); }
.main:before{ background-color: rgba(255,255,255,.28); }

/* ヘッダー：ティール×白文字 → 白×藍文字 */
header.bg-03{ background-color: #fff; border-bottom: 3px solid var(--color-navy); }
header, header a, header .operating_num{ color: var(--color-text); }
header .content_area h1 span{ color: inherit !important; }
header .content_area h1 span.brand-wm{ color: var(--color-navy) !important; }
header .content_area h1 span.brand-tag{ color: var(--color-text-muted) !important; }
header .operating_num{ color: var(--color-navy); }
header .operating_time{ color: var(--color-text-muted); }

/* FV見出しのグラデ：地が明るいので濃色のまま。赤アクセントをテラコッタへ */
.fv-title .hl{ background: linear-gradient(180deg,#D0472F 0%, #A32A18 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* -------------------------------------------------- §100c
   タイヨートに残っていた「ティール#0c7e9a／黄#ffd400」の !important 指定を回収する。
   （style.css 1876/2028行あたり。!important なのでこちらも !important で上書きする）  */
.fv-title .hl{
  background: none !important;
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
}
.mk, .fv-sub .mk{
  color: var(--color-navy) !important;
  -webkit-text-fill-color: var(--color-navy) !important;
  background: linear-gradient(transparent 58%, var(--color-marker-y) 58%) !important;
}
.fv-fact b{
  color: var(--color-primary) !important;
  -webkit-text-fill-color: var(--color-primary) !important;
}
.reason-h .rk{ color: var(--color-navy); }
.cost details.acc > summary::after{ color: var(--color-navy); }

/* FV上部の白ベール（太陽光モチーフを透かすためのもの）を撤去。
   地が生成りなので不要で、395pxの位置に横一直線の色境界が出てしまう。 */
.main:before{ background-color: transparent; }

/* タイヨートの「FV上半分＝白／下半分＝ティール」の2分割（§10・1946行）を解除。
   あちらは白地に紺見出しで恐怖を鎮める設計。こちらは地を生成りで一枚に通す。
   ※向こうは !important の shorthand なので、こちらも !important の shorthand で返す */
.main:before{ background: transparent !important; }

/* -------------------------------------------------- §100d セクション地の回収
   タイヨート/CarNext由来の「淡い水色」「黄色い街並みシルエット」を内装トーンへ。 */
.reason{ background-color: #F4EEE4; }
.faqs{ background-color: #FBF7F1; background-image: url(images/bg-wall.svg); background-size: 180px auto; }
.hajimete{ background: url(images/bg-wallline.svg) bottom -2px center / 300px repeat-x, #F4EEE4; }
.reason-title{ color: var(--color-navy); }
.fv-cases-ttl{ text-align: left; }

/* CTAボタン：タイヨートの水色(#1BAADE) → フォーム送信ボタンと同じ暗緑に統一。
   サンドの地の上で水色は浮くうえ、CV導線の色がページ内で2種類あるのは不利。 */
.btn-01 a{ background: var(--color-green-dark); border-bottom-color: #083f05; }

/* 821〜1000pxのタブレット帯で .btn-01 a の固定幅380pxが2カラムを突き破っていた
   （@media max-width:820px の width:100% が効かない帯）。全幅で max-width:100% を保証する。 */
.btn-01 a{ max-width: 100%; box-sizing: border-box; }

/* -------------------------------------------------- §100e スマホ追従バーを2分割
   タイヨートは「無料診断」1本。クロスは電話が主導線なので 電話 / フォーム に割る。 */
@media screen and (max-width: 820px){
  .sticky-cta{
    flex-direction: row; padding: 0 0 env(safe-area-inset-bottom);
    background: var(--color-green-dark); gap: 2px; align-items: stretch;
  }
  .sticky-cta a{
    flex: 1 1 50%; display: flex; align-items: center; justify-content: center; gap: .7rem;
    text-decoration: none; color: #fff; padding: 1rem .6rem; min-width: 0;
  }
  .sticky-cta .sc-tel{ background: var(--color-navy); }
  .sticky-cta .sc-form{ background: var(--color-green-dark); }
  .sticky-cta .sc-ico{ flex: none; width: 2.4rem; height: 2.4rem; display: block; }
  .sticky-cta .sc-ico svg{ width: 100%; height: 100%; display: block; }
  .sticky-cta .sc-t{ display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .sticky-cta .sc-t b{ font-size: 1.75rem; font-weight: 900; white-space: nowrap; }
  .sticky-cta .sc-t i{ font-style: normal; font-size: 1.1rem; font-weight: 700; opacity: .9; white-space: nowrap; }
}

/* スマホでは 10% 幅のセグメント（当社/なくなる分）に文字が入らず潰れるので、
   バー内のラベルを消して凡例に切り替える。割合の見た目は保ったまま可読性を確保する。 */
.ms-legend{ display: none; }
@media screen and (max-width: 820px){
  .ms-bar{ height: 34px; }
  .ms-seg b, .ms-seg i{ display: none; }
  .ms-legend{
    display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1rem;
    font-size: 1.35rem; font-weight: 700;
  }
  .ms-legend li{ display: flex; align-items: center; gap: .5rem; }
  .ms-legend b{ font-weight: 900; }
  .ms-legend .lg{ width: 1.4rem; height: 1.4rem; border-radius: 3px; flex: none; }
  .ms-legend .lg.craft{ background: var(--color-navy); }
  .ms-legend .lg.maker{ background: var(--color-primary); }
  .ms-legend .lg.us{ background: #7A6A55; }
  .ms-legend .lg.cut{
    background: repeating-linear-gradient(45deg,#EFE7DA,#EFE7DA 4px,#E2D6C3 4px,#E2D6C3 8px);
    border: 1px dashed #C6B69D;
  }
  .ms-legend li:last-child b{ color: var(--color-primary); }
}

/* ==========================================================================
   §101 視線設計のやり直し（2026-07-28）
   問題：強調色が「テラコッタ／黄マーカー／緑／サンド」の4つ同時に走っていて、
   さらにCTAセクションの地（サンド）がページの地（クリーム）とほぼ同じ明度のため、
   縦に読んだときに「止まる場所」が1つも立ち上がっていなかった。

   → 色に役割を1つずつ割り当て直す。役割が被る使い方は全部はがす。
      地      ： クリーム／サンド        …… ページ・セクションのリズム
      構造情報： ネイビー #1B3A57        …… 見出し・ラベル・罫線・バー・枠
      行動    ： オレンジ #E8621F        …… ★押せるものだけ。それ以外に一切使わない
      文中強調： 黄マーカー              …… 1セクションに1回まで
      停止点  ： ネイビーのベタ帯        …… CTAセクション3本＝縦スクロールの錨
      対比    ： テラコッタ              …… 「元請けの取り分」「AFTER」など"対"の記号だけ
   ========================================================================== */
:root{
  --color-cta:      #E8621F;
  --color-cta-dark: #A83E0C;
  --color-marker-y: #FFD84D;
  --color-sand-deep:#EADDC8;
  --color-sand-soft:#F1E9DC;
}

/* ---------- ① 行動＝オレンジ。押せるものだけに集約する ---------- */
.btn-01 a,
.submit_btn_box input.submit_btn,
.submit_btn_box button.submit_btn,
.submit_btn_box .submit_btn,
.step1_btn_box .submit_btn{
  background: var(--color-cta) !important;
  background-color: var(--color-cta) !important;
  border-bottom-color: var(--color-cta-dark) !important;
  color: #fff !important;
}
.btn-01 a{ box-shadow: 0 10px 22px -10px rgba(168,62,12,.75); }
.submit_btn_box .submit_btn,
.step1_btn_box .submit_btn{ box-shadow: 0 10px 22px -10px rgba(168,62,12,.7); }
.sticky-cta .sc-form{ background: var(--color-cta) !important; }
.sticky-fab{ background: var(--color-cta) !important; }

/* ---------- ② 停止点＝CTAセクションをネイビーのベタ帯にする ---------- */
.cv{
  background-color: var(--color-navy) !important;
  background-image: url(images/bg-wall-light.svg) !important;
  background-size: 180px auto;
  padding-bottom: 3rem;
}
.cv, .cv p, .cv .cta-assure, .cv .fs_lg{ color: #fff; }
.cv .balloon{ color: var(--color-text); }          /* 吹き出しはサンドのまま＝帯の中で浮く */
.cv .bg-03, .cv .bg-03 *{ color: var(--color-text); }
.cv .bg-03 .text-secondary{ color: var(--color-cta); }
.cv .tel-link{ color: var(--color-navy); }
.cv .tel-link .text-secondary{ color: var(--color-cta); }

/* ---------- ③ 見出しからテラコッタを抜く。強調はマーカーで打つ ---------- */
h2.content_ttl, .reason-title, .prob-ttl, .hajimete h2{ color: var(--color-navy); }
h2.content_ttl:after{ background: var(--color-navy); opacity: .35; }
.content_ttl .text-primary,
.prob-ttl .text-primary{
  color: var(--color-navy);
  background: linear-gradient(transparent 62%, var(--color-marker-y) 62%);
  padding: 0 .1em;
}
.faqs .content_ttl .text-primary{ color: #fff; background: none; } /* FAQ見出しは地が薄いので素で */
.faqs .content_ttl{ color: var(--color-navy); }
.faqs .content_ttl .text-primary{ color: var(--color-navy); background: linear-gradient(transparent 62%, var(--color-marker-y) 62%); }

/* ---------- ④ FVの強調を1点に絞る（「直接」のマーカーだけ） ---------- */
.fv-title{ color: var(--color-navy) !important; -webkit-text-fill-color: var(--color-navy) !important; }
.fv-title .hl{
  color: var(--color-navy) !important;
  -webkit-text-fill-color: var(--color-navy) !important;
  background: linear-gradient(transparent 58%, var(--color-marker-y) 58%) !important;
  padding: 0 .06em;
}
.mk, .fv-sub .mk{
  color: var(--color-navy) !important;
  -webkit-text-fill-color: var(--color-navy) !important;
  background: none !important;                     /* サブのマーカーは撤去＝FV内のマーカーは1つ */
}
.fv-fact b{ color: var(--color-navy) !important; -webkit-text-fill-color: var(--color-navy) !important; }
.fv-freebar{ background: var(--color-navy); }
.fv-freebar b{ color: var(--color-marker-y); }
.fv-cases-grid .cc{ border: 2px solid #DCCEB6; }   /* 4枚の紺枠が見出しと張り合っていた */

/* ---------- ⑤ 本文からもテラコッタを抜く（"対"の記号だけ残す） ---------- */
.trigger .grid .t b{ color: var(--color-navy); }
.flow-note b{ color: var(--color-navy); }
.price-note b{ color: var(--color-navy); }
.brand-wm{ border-left-color: var(--color-cta); }
/* 残すテラコッタ＝①元請けの取り分（無くなるもの）②AFTER ③必須バッジ ④差額の数字 */

/* ---------- ⑥ 副次的に押せるもの（FAQ開閉）は無彩色に落として競合させない ---------- */
.faqs .btn-inner{
  background: #fff !important;
  border: 2px solid var(--color-navy);
  color: var(--color-navy);
}
.has-children.is-open .btn-inner{ background: var(--color-navy) !important; color: #fff; }

/* ---------- ⑦ セクションの地でリズムを作る（隣り合う面を必ず変える） ---------- */
.margin-sec{ background: var(--color-sand-deep); }
.reason{ background-color: var(--color-sand-soft); }
.hajimete{ background: url(images/bg-wallline.svg) bottom -2px center / 300px repeat-x, var(--color-sand-soft); }
.cases{ background-color: transparent; }

/* ---------- ⑧ §101の取りこぼし ---------- */
/* タイヨートはFVがティール地だったので白にしていた小見出し。生成り地では消えている */
.fv-cases-ttl{ color: var(--color-navy) !important; }

/* 「0円」シール：金グラデはオレンジのCTAと明るさで張り合ってしまう。
   平らな白×紺リングに落として、彩度の一番強い場所をボタンだけにする。 */
.fv-seal{
  background: #fff;
  border: 3px solid var(--color-navy);
  box-shadow: 0 6px 16px -6px rgba(27,58,87,.5);
  color: var(--color-navy);
}
.fv-seal b{ color: var(--color-primary); }

/* 見出し下のバー：強調語のマーカーと役割が重なるので、細い罫に落とす */
h2.content_ttl:after{ width: 56px; height: 3px; opacity: .3; }

/* ---------- ⑨ 細部に残っていた寒色を回収 ---------- */
.vcap{ background: rgba(27,58,87,.94); }                          /* 縦キャプションのティール */
.reason-row:not(:last-child)::after{ border-top-color: #DCCEB6; } /* 行間の三角が水色だった */
.reason .check-list li::before{ color: var(--color-navy); }       /* ✓の緑＝行動色と紛らわしい */
.step-left{ color: var(--color-cta); }

/* ---------- ⑩ 料金セクション：このページで一番読まれる数字を視覚の頂点にする ---------- */
/* 価格を白カードの中で埋もれさせず、サンドの帯に載せて視線を落とす */
.cost-card{ display: flex; flex-direction: column; }
.cc-price{
  margin-top: auto; background: var(--color-sand-deep);
  padding: 1.4rem 1.2rem !important; color: var(--color-navy);
}
.cc-price em{ font-size: 3.4rem; color: var(--color-navy); }

/* アコーディオンの水色を回収 */
.cost details.acc{ border-color: #DCCEB6; }
.cost details.acc > summary{ background: var(--color-sand-soft); }

/* 注意書き：ピンク＋赤罫は"警告"に見えすぎる。中身は前提の説明なので温色に落とす */
.callout{ border-left-color: var(--color-navy); }
.callout.warn{ background: #FBF4E9; border-left-color: #C9A45E; }

/* 表の緑（込み／0円）も紺へ。緑は行動色との混同を避けて全廃した */
.price-table td.inc, .price-table td.inc b{ color: var(--color-navy); }

/* 追従バー上端に緑の罫が残っていた（旧CTA色） */
.sticky-cta{ border-top-color: rgba(0,0,0,.25) !important; }

/* ==========================================================================
   §102 コントラスト実測にもとづく修正（2026-07-28）
   ネイビー×クリームは 10.90:1（AAA）で問題なし。穴はオレンジのボタンだった。
   白文字 × #E8621F ＝ 3.39:1。
   WCAGでは「18.66px以上の太字」または「24px以上」は大文字扱いで 3:1 が合格ライン。
   → 24px/20pxのメインラベルは合格。落ちていたのは 15px の小ラベル2種だけ。
   ※オレンジのまま白文字4.5:1にする解は色相が朱赤に寄り、対比色のテラコッタと
     衝突するので不採用。サイズで解ける方（PCボタン）はサイズで、
     サイズを上げられない方（スマホの追従バー）だけ色を深くする。
   ========================================================================== */

/* ① PCのCTAボタン：小ラベルを 15px → 19px 太字（＝大文字扱い）にして 3.39:1 を合格させる */
.btn-01 a span{ font-size: 1.9rem; font-weight: 700; }
.btn-01 a p.fs_xxl{ font-size: 2.6rem; font-weight: 900; }

/* ② スマホの追従バー：15px を大きくすると2行が潰れるので、色の方を深くして 4.50:1 にする
      （#C24E0C ＝ 白文字4.78:1 でAA。4.50はしきい値ぴったりで実質不合格なので一段深くした。
      隣の紺との差は2.45:1に落ちるので、バーの地を白にして2pxのgapを仕切りにしてある） */
.sticky-cta{ background: #fff !important; }         /* 2pxのgapが白い仕切りになる */
.sticky-cta .sc-form{ background: #C24E0C !important; }

/* ---------- §102b ページ全体のテキストを総ざらいして出た不合格を潰す ---------- */
.step_badge{ background: var(--color-navy) !important; color: #fff !important; }
.req_off{ background: #6B6560 !important; color: #fff !important; }
.step-left{ color: var(--color-navy) !important; }        /* オレンジ12pxは3.39:1で落ちる */
.form-agreement a{ color: var(--color-navy); text-decoration: underline; }
.sticky-fab{ background: #C24E0C !important; }            /* PC右下の丸ボタンも追従バーと同じ深さに */

/* 規約リンクの水色(#0095E3)はID選択子で刺さっていて負けるので !important で回収 */
.form-agreement a, .contact_form .form-agreement a{
  color: var(--color-navy) !important; text-decoration: underline;
}

/* 番号バッジ上の★は装飾だが、明るくすれば通るので通しておく（紺の円上・3.16→約5:1） */
.rnum i{ color: #FFE58A; }  /* 紺グラデの明るい端でも 4.69:1 */

/* ==========================================================================
   §103 「地味・どこも目に留まらない」の修正（2026-07-28）
   §101で色の規律は作れたが、彩度を落としすぎてページの体温まで下げてしまった。
   規律は保ったまま"強い場所"を作り直す。やり方は色を増やすのではなく、
   ①注意を2段構えにする ②面で塗る（線や薄いマーカーでなく） ③奥行きを足す。

     ゴールド #F5B300 の"面" ＝ 【読ませたい語】…見出しの強調語・FVの「直接」・0円シール・吹き出し
     オレンジ #E8621F      ＝ 【押す場所】………ボタンだけ（これは§101から不変）

   ※ゴールド面 × 紺文字 ＝ 6.33:1 で AA 合格。白文字は1.85で不可なので必ず紺を乗せる。
   ========================================================================== */
:root{ --color-gold: #F5B300; --color-gold-deep: #C98A00; }

/* ---------- ① 0円シールを復活（平らな白×紺リング → 金の立体シールに戻す） ---------- */
.fv-seal{
  width: 124px; height: 124px;
  background: radial-gradient(circle at 36% 30%, #FFE98C, var(--color-gold) 62%, var(--color-gold-deep));
  border: 4px solid #fff;
  box-shadow: 0 12px 26px -8px rgba(0,0,0,.45), inset 0 -3px 8px rgba(0,0,0,.12);
  color: #4A2E00;
  transform: rotate(-11deg);
  font-size: 1.25rem;
}
.fv-seal b{ color: #8C1D08; font-size: 3.2rem; }

/* ---------- ② FVの「直接」を面で塗る（薄いマーカーでは弱かった） ---------- */
.fv-title .hl{
  display: inline-block;
  background: var(--color-gold) !important;
  color: var(--color-navy) !important;
  -webkit-text-fill-color: var(--color-navy) !important;
  padding: 0 .1em .04em; border-radius: 8px;
  transform: rotate(-1.6deg);                       /* 脱AI：わずかに傾ける */
  box-shadow: 0 7px 0 rgba(201,138,0,.55), 0 14px 24px -12px rgba(0,0,0,.45);
}

/* ---------- ③ 見出しの強調語も"薄い黄"から"金の塗り"へ。見出し自体も一段大きく ---------- */
h2.content_ttl{ font-size: 4.6rem; }
.content_ttl .text-primary,
.prob-ttl .text-primary,
.faqs .content_ttl .text-primary{
  background: linear-gradient(transparent 56%, var(--color-gold) 56%);
  padding: 0 .14em;
}

/* ---------- ④ 吹き出しをゴールドに（サンドだと地に沈んでいた） ---------- */
.balloon.bg-02{ background-color: var(--color-gold) !important; }
.main .fv_balloon{ box-shadow: 0 12px 26px -14px rgba(0,0,0,.5); }

/* ---------- ⑤ 奥行きを足す（脱AI原則：斜め・重ね・影） ---------- */
/* CTAの紺帯は上端を斜めに切って、ただの長方形の積み重ねから抜ける */
.cv{
  clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
  padding-top: 5rem;
  margin-top: -12px;
}
/* カードを浮かせる */
.trigger .grid .t{ box-shadow: 0 14px 26px -20px rgba(27,58,87,.75); transition: transform .18s ease, box-shadow .18s ease; }
.trigger .grid .t:hover{ transform: translateY(-3px); box-shadow: 0 20px 32px -20px rgba(27,58,87,.8); }
.cost-card{ box-shadow: 0 16px 30px -20px rgba(27,58,87,.7); }
.case-item{ box-shadow: 0 18px 34px -22px rgba(27,58,87,.75); }

/* ---------- ⑥ 料金：このページの"お金の瞬間"をもっと大きく ---------- */
.cc-price{ border-top: 5px solid var(--color-gold); }
.cc-price em{ font-size: 4.2rem; }

/* ---------- ⑦ FVの黒帯にも金を効かせる ---------- */
.fv-freebar b{ color: var(--color-gold); font-size: 2.2rem; }

@media screen and (max-width: 820px){
  h2.content_ttl{ font-size: 2.9rem; }
  .fv-seal{ width: 100px; height: 100px; font-size: 1.05rem; }
  .fv-seal b{ font-size: 2.6rem; }
  .cc-price em{ font-size: 3.2rem; }
  .cv{ clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%); padding-top: 3.4rem; }
}

/* ---------- §103b ゴールド面の上の文字は必ず紺（白は1.85:1で読めない） ---------- */
.balloon.bg-02, .cv .balloon, .balloon.bg-02 *{ color: var(--color-navy) !important; }
.fv-seal{ color: #3A2200; }   /* 金グラデの暗い端 #C98A00 上でも AA を満たす濃さ */

/* ==========================================================================
   §104 人物を戻す（2026-07-28）
   §101〜103は色と構造の話ばかりで、タイヨートの型で一番効いていた
   「FVの切り抜きオペレーター」「各セクションの人物写真」を落としたままだった。
   地味さの本体はここ。タイヨートの手法（＝顔をほとんど映さず、手・物・
   スタッフのイメージで人の気配を作る）に戻す。
   ========================================================================== */

/* ---------- ① FV：オペレーター切り抜き＋カードを2×2（タイヨートの構図そのまま） ---------- */
.fv-showcase{ align-items: flex-end; gap: 12px; }
.fv-operator{
  width: 40%; max-width: 300px; height: auto; align-self: flex-end; flex: none;
  transform: scaleX(-1);                       /* 右のカード側へ手を差し向ける */
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.22));
}
.fv-cases-grid{ grid-template-columns: 1fr 1fr; }
.fv-cases-grid .cc{ border: 3px solid #fff; box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); }

/* ---------- ② 対応エリア：アイコン枠を受付スタッフの丸写真に ---------- */
.hajimete_icon{ overflow: hidden; }
.hajimete_icon img{
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
  object-position: 62% 30%;                    /* 顔が中心に来るように寄せる */
  border: 4px solid #fff; box-shadow: 0 10px 22px -10px rgba(27,58,87,.7); display: block;
}

/* ---------- ③ 「※イメージ」キャプションは主張を弱める（実績と誤解させない） ---------- */
.vcap{ font-weight: 700; letter-spacing: 1px; }

@media screen and (max-width: 820px){
  .fv-operator{ width: 38%; max-width: 150px; }
  .hajimete_icon img{ width: 96px; height: 96px; }
}

/* 対応エリアの✓バッジだけ緑が残っていた（緑は行動色と紛らわしいので全廃の方針） */
.assure-list li::before{ background: var(--color-navy); }

/* ==========================================================================
   §105 FV「直接」の処理を踏襲元に戻す（2026-07-28）
   §103で角丸チップ＋ハードな落ち影(0 7px 0)＋わずかな傾き(-1.6deg)にしたが、
   この3点セットは今いちばん「AIが作った」と見える型で、Koseiに指摘された。
   しかもこれは踏襲元に無い、私が勝手に足した装飾だった。

   タイヨートの実装（style.css §10）＝ **紺文字 ＋ 黄マーカー（下55%のベタ）だけ**。
   箱にしない・影を落とさない・傾けない。日本のLPで長く使われている
   「マーカーで引く」という素直な型に戻す。ページ内の他の見出しの強調語とも揃う。
   ========================================================================== */
.fv-title .hl{
  display: inline !important;
  background: linear-gradient(transparent 55%, var(--color-gold) 55%) !important;
  color: var(--color-navy) !important;
  -webkit-text-fill-color: var(--color-navy) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  padding: 0 .04em !important;
  border-radius: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ==========================================================================
   §110 実績の帯（FV直下）── 2026-08-10 追加
   目的：クロスは視覚商材。FV直下は最も離脱が出る場所なので、実写の証明を早く出す。
   地の色：FVがサンド(#EFE3CE)なので、ここは sand-deep(#EADDC8)。
           次の「こんなときに」がクリーム(#FAF6F0)なので、隣り合う面が3段とも変わる。
   ⚠️ 停止点のネイビーベタはCTA専用（役割が競合するのでここでは使わない）。
   ========================================================================== */
.proof{
  background: var(--color-sand-deep);
  padding: 5.2rem 0 5.8rem;
  position: relative;
}
.proof-in{ max-width: 108rem; margin: 0 auto; padding: 0 2.4rem; }
.proof-head{ text-align: center; margin-bottom: 2.6rem; }
.proof-lead{
  font-size: clamp(1.95rem, 3.7vw, 2.7rem);
  font-weight: 800; color: var(--color-navy); line-height: 1.55; letter-spacing: -.01em;
}
.proof-lead .hl{
  background: linear-gradient(transparent 55%, var(--color-marker-y) 55%);
  color: var(--color-navy); padding: 0 .04em;
}
.proof-sub{ margin-top: 1.1rem; font-size: 1.45rem; font-weight: 700; color: #5A5042; }
.proof-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem;
  max-width: 104rem; margin: 0 auto;
}
.proof-cap{
  margin-top: 1rem; text-align: center;
  font-size: 1.32rem; font-weight: 800; color: #5A5042; line-height: 1.6;
}
.proof-ba{
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: #fff; padding: 4px;
  border: 1px solid #E0D4BF; box-shadow: 0 20px 38px -24px rgba(27,58,87,.65);
}
.proof-ba figure{ position: relative; margin: 0; overflow: hidden; }
.proof-ba img{ width: 100%; height: 19rem; object-fit: cover; display: block; }
.proof-ba figcaption{
  position: absolute; left: 0; bottom: 0; color: #fff;
  font-size: 1.2rem; font-weight: 800; letter-spacing: .08em; padding: .45rem 1.2rem;
}
.proof-ba .ba-b figcaption{ background: rgba(90,80,66,.9); }
.proof-ba .ba-a figcaption{ background: var(--color-primary); }
.proof-note{
  margin-top: 1.6rem; text-align: center;
  font-size: 1.3rem; font-weight: 700; color: #6B6054;
}
.proof-note a{ color: var(--color-navy); text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 820px){
  .proof{ padding: 3.8rem 0 4.2rem; }
  .proof-in{ padding: 0 1.6rem; }
  .proof-grid{ grid-template-columns: 1fr; gap: 2.2rem; }
  .proof-ba img{ height: 15.5rem; }
  .proof-cap{ font-size: 1.24rem; margin-top: .8rem; }
  .proof-note{ font-size: 1.2rem; line-height: 1.7; }
}

/* ==========================================================================
   §111 ── 2026-08-11 追加
   (a) .ms-why  私たちの立場（ビジョン）＝"なぜ安いのか"の答えとして読ませる
   (b) .min-fee 最低施工金額 15,000円（★「15,000円〜」と読ませない見せ方）
   ========================================================================== */
.ms-why{
  max-width: 78rem; margin: 3.4rem auto 3.8rem; padding: 2.8rem 2.6rem;
  background: #fff; border: 1px solid #E0D4BF; border-left: 6px solid var(--color-navy);
  border-radius: 4px 12px 12px 4px; box-shadow: 0 16px 32px -26px rgba(27,58,87,.6);
}
.ms-why p{ font-size: 1.55rem; line-height: 1.95; color: #3E4A57; margin-bottom: 1.4rem; }
.ms-why p:last-child{ margin-bottom: 0; }
.ms-why b{ color: var(--color-navy); }
.ms-why-lead{ font-size: 1.9rem!important; font-weight: 800; color: var(--color-navy)!important; }
.ms-why-close{
  margin-top: 2rem!important; padding-top: 1.8rem; border-top: 1px dashed #D8CCB6;
  font-size: 1.6rem!important; font-weight: 800; color: var(--color-navy)!important; line-height: 1.85;
}
@media (max-width: 820px){
  .ms-why{ margin: 2.6rem auto 3rem; padding: 2rem 1.7rem; }
  .ms-why p{ font-size: 1.45rem; line-height: 1.9; }
  .ms-why-lead{ font-size: 1.7rem!important; }
  .ms-why-close{ font-size: 1.48rem!important; }
}

/* ==========================================================================
   §146 「なぜ、安くできるのか」を散文から図へ ── 2026-08-25
   Koseiの指摘：「ここは最も大事な訴求のところなんだから、もっと視覚的にとらえやすいように」
   実測の根拠：画面6が602字＝平均232.7字の2.59倍。画面6〜8だけで全体の27.5%を占めていた。

   ★この図が言いたいことは1つだけ＝【まとめる相手が何種類か】。
     だから左右で「札の数」だけを対比させる。文で説明しない。左6枚 vs 右1枚が本体。
   ⚠️ 工務店を悪者にしない（§14-③）。左列の「その段取りに価値があります」を消さないこと。
   ⚠️ .ms-why p{margin-bottom} を継承しないよう、2クラスのセレクタで上書きする
     （.ms-why p は クラス1+要素1／.ms-cmp .ms-cmp-ttl は クラス2 なので勝つ）。
     ★ !important は使わない（→ feedback: 積み上がったクラスは上書きせず切り離す）。
   ========================================================================== */
.ms-cmp{
  display: flex; gap: 1.2rem; align-items: stretch;
  margin: 1.8rem 0 0;
}
.ms-cmp-col{
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  padding: 1.4rem 1.2rem 1.3rem;
  background: #FBF7F0; border: 1px solid #E3D9C9; border-radius: 10px;
}
.ms-cmp-col.is-us{
  background: #fff; border: 2px solid var(--color-navy);
  box-shadow: 0 12px 26px -18px rgba(27,58,87,.55);
}
.ms-cmp .ms-cmp-ttl{
  margin: 0 0 1rem; font-size: 1.35rem; font-weight: 800; line-height: 1.5;
  color: #6B6154; text-align: center;
}
.ms-cmp-col.is-us .ms-cmp-ttl{ color: var(--color-navy); }
.ms-cmp-chips{
  list-style: none; margin: 0 0 1.1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
  flex: 1 0 auto; align-content: flex-start;
}
.ms-cmp-chips li{
  flex: none; padding: .25rem .7rem; border-radius: 4px;
  font-size: 1.2rem; font-weight: 700; line-height: 1.7; white-space: nowrap;
  background: #EDE3D3; color: #6B6154; border: 1px solid #DFD2BC;
}
.ms-cmp-chips li.more{ background: none; border: 1px dashed #CFC0A6; }
/* 右列は「1枚だけ」が主役。塗って大きくする＝数の差を色でも読ませる */
.ms-cmp-chips li.one{
  padding: .5rem 1.5rem; font-size: 1.5rem;
  background: var(--color-navy); color: #fff; border-color: var(--color-navy);
}
/* 列の中は「何種類か」だけ。★説明文をここに入れない（列幅134px＝約10字で語が割れる） */
.ms-cmp .ms-cmp-cnt{
  margin: 0; font-size: 1.2rem; line-height: 1.6; color: #6B6154; text-align: center;
}
.ms-cmp .ms-cmp-cnt b{
  display: block; margin-top: .2rem;
  font-size: 1.5rem; font-weight: 800; color: #7A6C58;   /* §149b 対比 3.81→4.78（地 #FBF7F0）。閾値は緩めない */
}
.ms-cmp-col.is-us .ms-cmp-cnt{ color: #3E4A57; }
.ms-cmp-col.is-us .ms-cmp-cnt b{ color: var(--color-navy); }
/* 説明は列の外に全幅で（ここなら1行に約21字入る） */
.ms-why .ms-cmp-say{
  margin: 1.4rem 0 0; font-size: 1.45rem; line-height: 1.85; color: #3E4A57; text-align: center;
}
.ms-why .ms-cmp-say b{ color: var(--color-navy); }
.ms-why .ms-why-out{
  margin: 1.8rem 0 0; padding-top: 1.5rem; border-top: 1px dashed #D8CCB6;
  font-size: 1.5rem; font-weight: 700; line-height: 1.85; color: #3E4A57; text-align: center;
}
/* §158 2026-08-25：「1割」に分母が無い（15人中9人が詰まった）ので、
   すぐ下の内訳図が持っている実額をこの場で先に見せる。
   ⚠️ 元請けの取り分は出さない（決定どおり）。出すのは当社の額だけ。 */
.ms-why .ms-why-out .ms-num{
  display: inline-block; margin: .5rem 0 .3rem;
  font-size: 1.65rem; color: var(--color-navy);
}
/* ⚠️ マーカーを .ms-num（inline-block・2行に折り返す）に掛けてはいけない。
   グラデーションが【箱全体】に掛かるので、2行目が丸ごと金色に塗り潰される（実測で確認）。
   → 折り返さない数字（.nb）だけに掛ける。金の量も減って強さの段階が保てる。 */
.ms-why .ms-why-out .hl-num{
  background: linear-gradient(transparent 58%, var(--color-gold) 58%);
  padding: 0 .12em;
}
/* 内訳図の直下に置く「当社の取り分＝10%」の開示。カード2枚（221字）の代わり。 */
.ms-open{
  max-width: 78rem; margin: 0 auto 2.2rem; padding: 1.1rem 1.6rem;
  background: #fff; border: 1px dashed #C9BBA2; border-radius: 8px;
  font-size: 1.42rem; line-height: 1.8; color: #3E4A57; text-align: center;
}
.ms-open b{ color: var(--color-navy); font-weight: 800; }

/* §153 2026-08-25 注記が本文より大きかった。
   .callout の本文は13.5px なのに、中の .fs_md が 18px（＝共通の「中くらい」）で効き、
   いちばん小さくあるべき「※」の行が1.33倍の大きさになっていた。
   ⚠️ .fs_md 自体は他所（flow-note 等）で正しく効いているので触らない。callout 内だけ切り離す。 */
.callout .c-note{ display: inline-block; margin-top: .6rem; font-size: .92em; opacity: .85; }
@media (max-width: 820px){
  /* ★§157 2026-08-25：図の中の字が本文より小さかった（実測 11.3〜11.5px／本文13.5px）。
     15人パネルで「拡大しないと読めない」（63歳）と指摘された。
     原因は §146 で列幅の問題を【字を小さくする方向】で解いていたこと。
     → ①列を広げる（.ms-why と列の padding を詰める）②文字量を減らす（チップ6→5枚）
       ③そのぶん字を大きくする、の3つで解く。★字を縮めて解かないこと。 */
  .ms-why{ padding: 2rem 1.3rem; }        /* 1.7rem→1.3rem＝列が左右で計8px広がる */
  .ms-cmp{ gap: .7rem; }
  .ms-cmp-col{ padding: 1.2rem .7rem 1.1rem; }
  .ms-cmp .ms-cmp-ttl{ font-size: 1.35rem; margin-bottom: .9rem; }
  .ms-cmp-chips{ gap: .35rem; }
  .ms-cmp-chips li{ font-size: 1.35rem; padding: .24rem .5rem; }
  .ms-cmp-chips li.one{ font-size: 1.6rem; padding: .5rem 1.1rem; }
  .ms-cmp .ms-cmp-cnt{ font-size: 1.35rem; }   /* ★本文(1.35rem)より小さくしない */
  .ms-cmp .ms-cmp-cnt b{ font-size: 1.5rem; margin-top: .3rem; }
  .ms-why .ms-cmp-say{ font-size: 1.35rem; }
  .ms-why .ms-why-out{ font-size: 1.4rem; }
  .ms-open{ font-size: 1.32rem; padding: 1rem 1.2rem; }
}

/* 最低施工金額 */
.min-fee{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem 1rem;
  max-width: 66rem; margin: 2.4rem auto 1.6rem; padding: 1.8rem 2.2rem;
  background: var(--color-sand-soft); border: 2px dashed #CBB995; border-radius: 12px;
}
.min-fee .mf-label{ font-size: 1.5rem; font-weight: 800; color: #5A5042; }
.min-fee .mf-value{ font-size: 3.4rem; font-weight: 900; color: var(--color-navy); letter-spacing: -.02em; line-height: 1; }
.min-fee .mf-value small{ font-size: 1.7rem; margin-left: .2rem; }
.min-fee .mf-from{ font-size: 1.5rem; font-weight: 800; color: #5A5042; }
.min-fee .mf-note{ flex: 1 1 100%; margin-top: .8rem; font-size: 1.3rem; line-height: 1.75; color: #6B6054; }
.min-fee .mf-note b{ color: var(--color-navy); }
@media (max-width: 820px){
  .min-fee{ padding: 1.5rem 1.5rem; gap: .4rem .7rem; }
  .min-fee .mf-value{ font-size: 2.9rem; }
  .min-fee .mf-note{ font-size: 1.24rem; }
}

/* ==========================================================================
   §112 数字の字体 ── 2026-08-11
   Noto Sans JP の900は幾何学的で無機質＝「AIっぽい」と指摘された。
   価格の数字だけ Oswald（縦長・力強い欧文）に差し替える。
   ※和文（約・万円・〜）はフォールバックで Noto のまま＝混植にする。
   ※font-feature-settings で数字を等幅（tnum）にして桁を揃える。
   ========================================================================== */
.cc-price em,
.ms-total,
.ms-seg i,
.min-fee .mf-value,
.price-table td b{
  font-family: 'Oswald', var(--font-sans), sans-serif;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .005em;
}
/* Oswaldは重心が高いので、和文と並べたときのベースラインを微調整 */
.cc-price em{ font-weight: 600; position: relative; top: .04em; }
.ms-total{ font-weight: 600; }
.ms-seg i{ font-weight: 600; }
.price-table td b{ font-weight: 600; }

/* ==========================================================================
   §112b 最低施工金額の強調
   LP設計図の色の役割に従う：「読ませる＝ゴールドの面」「押させる＝オレンジ（押せるものだけ）」
   → ここは押せないのでオレンジは使わない。ゴールドの面＋紺文字（6.33:1）で塗る。
   ⚠️「角丸＋落ち影＋傾き」の3点セットはAIの指紋。使わない（LP設計図§7.5）。
   ========================================================================== */
.min-fee{
  background: #fff; border: 2px solid var(--color-navy); border-radius: 0;
  align-items: center;
}
.min-fee .mf-value{
  font-size: 4.2rem; font-weight: 700; color: var(--color-navy);
  background: var(--color-gold); padding: .1em .28em .14em;
  line-height: 1; display: inline-block;
}
.min-fee .mf-value small{ font-size: 1.9rem; font-weight: 700; margin-left: .12em; }
.min-fee .mf-label,
.min-fee .mf-from{ font-size: 1.6rem; }
@media (max-width: 820px){
  .min-fee .mf-value{ font-size: 3.4rem; }
  .min-fee .mf-value small{ font-size: 1.6rem; }
  .min-fee .mf-label, .min-fee .mf-from{ font-size: 1.4rem; }
}


/* ==========================================================================
   §113 0円シールの可読性 ── 2026-08-11
   「0円」が先・「見積り・現地調査」が後だったため、"何が0円か"が読み取りにくかった。
   → 順序を「ラベル → 0円」に反転し、円の中で縦積みにする。
   ⚠️ 傾き(-11deg)は残す。シールやバッジなど"物"は傾けてよい（文字を傾けるのがNG／§7.5）。
   ========================================================================== */
.fv-seal{
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1.25; text-align: center; gap: .1rem;
}
.fv-seal i{
  font-style: normal; font-weight: 900;
  font-size: 1.24rem; letter-spacing: -.01em; color: #4A2E00;
}
.fv-seal b{
  font-family: 'Oswald', var(--font-sans), sans-serif;
  font-size: 3.4rem !important; font-weight: 700; line-height: .95;
  color: #8C1D08; letter-spacing: -.01em;
}
.fv-seal b em{ font-style: normal; font-size: 1.9rem; font-weight: 700; margin-left: .04em; }
@media (max-width: 820px){
  .fv-seal i{ font-size: 1.06rem; }
  .fv-seal b{ font-size: 2.8rem !important; }
  .fv-seal b em{ font-size: 1.5rem; }
}

/* ==========================================================================
   §114 料金の「含まれるもの／別料金」── 2026-08-11
   ㎡単価の表を廃止して置き換え。壁の面積は施主が知らない数字なので、㎡単価では自分の金額が分からない。
   クレーム防止（＝追加費用を先に全部書く）という役割だけ残す。
   ========================================================================== */
.incl{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.incl-col{ background: #fff; border: 1px solid var(--color-line, #E0D4BF); border-radius: 10px; padding: 1.8rem 1.8rem 1.6rem; }
.incl-col h4{ font-size: 1.55rem; font-weight: 900; margin-bottom: 1.1rem; padding-bottom: .9rem; border-bottom: 2px solid; }
.incl-col.ok h4{ color: #1f7a4d; border-color: #C9E4D5; }
.incl-col.ex h4{ color: #A8571C; border-color: #EFDCC4; }
.incl-col ul{ list-style: none; }
.incl-col li{ position: relative; padding-left: 2.4rem; margin-bottom: 1rem; font-size: 1.42rem; line-height: 1.75; color: #3E4A57; }
.incl-col li:last-child{ margin-bottom: 0; }
.incl-col li b{ color: var(--color-navy); }
.incl-col li small{ display: block; font-size: 1.24rem; color: #6B6054; line-height: 1.7; margin-top: .2rem; }
.incl-col.ok li::before{ content: "✓"; position: absolute; left: 0; top: -.1rem; width: 1.8rem; height: 1.8rem;
  background: #1f7a4d; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; }
.incl-col.ex li::before{ content: "＋"; position: absolute; left: 0; top: -.1rem; width: 1.8rem; height: 1.8rem;
  background: #C98A3C; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; }
.incl-note{ margin-top: 1.6rem; padding: 1.4rem 1.6rem; background: var(--color-sand-soft);
  border-left: 4px solid var(--color-navy); border-radius: 0 8px 8px 0; font-size: 1.38rem; line-height: 1.85; color: #3E4A57; }
.incl-note b{ color: var(--color-navy); }
@media (max-width: 820px){
  .incl{ grid-template-columns: 1fr; gap: 1.2rem; }
  .incl-col{ padding: 1.5rem 1.4rem 1.3rem; }
  .incl-col h4{ font-size: 1.44rem; }
  .incl-col li{ font-size: 1.34rem; padding-left: 2.2rem; }
  .incl-note{ font-size: 1.3rem; }
}

/* ---------- §113b 0円シールを円いっぱいまで大きく（強みなので主役にする） ---------- */
.fv-seal{ width: 138px !important; height: 138px !important; }
.fv-seal i{ font-size: 1.52rem; line-height: 1.28; }
.fv-seal b{ font-size: 4.4rem !important; line-height: .92; margin-top: .1rem; }
.fv-seal b em{ font-size: 2.3rem; }
@media (max-width: 820px){
  .fv-seal{ width: 112px !important; height: 112px !important; }
  .fv-seal i{ font-size: 1.2rem; }
  .fv-seal b{ font-size: 3.4rem !important; }
  .fv-seal b em{ font-size: 1.8rem; }
}

/* ==========================================================================
   §115 スマホFV：0円シールが見出しに重なっていた ── 2026-08-11
   §113b でシールを大きくした副作用。390px幅の実測で、見出し1行目
   「壁紙の張り替え、」の右82pxがシールの下に隠れ、「え、」が読めなかった。
   LPで最も大事な1行が、いちばん流入の多いスマホで欠けている状態だった。

   コラージュ側にも136px角の空きが無いため、横に逃がす先が無い。
   シールを小さくして横に並べる案は測って捨てた（360pxで29px重なり／390pxで余白1px＝実質アウト）。
   横で解こうとすると、狭い端末ほど破綻する。

   → 縦で解く。シールに専用の段を与え、見出しはその下から始める。
     幅に依存しないので、どの端末でも重ならない。
   ⚠️ シールは消さない。0円は最大の強みで、主役にするのは§113bの判断。位置だけ譲る。
   ⚠️ シールのサイズか見出しの位置を触ったら、必ず 360/390/414/480/600px で
     重なり0を測り直すこと（見た目では1〜2pxのかすりが分からない）。
   ========================================================================== */
@media (max-width: 600px){
  .fv-seal{
    box-sizing: border-box;
    width: 104px !important; height: 104px !important;
    top: -8px; right: 0;
  }
  .fv-seal i{ font-size: 1.06rem; line-height: 1.22; }
  .fv-seal b{ font-size: 2.7rem !important; }
  .fv-seal b em{ font-size: 1.45rem; }
  /* シールの下端（hero上端 -8px + 104px = 96px）より下から見出しを始める。
     アイキャッチの帯は左＝エリア表記、右＝0円シールで分担させる。 */
  .fv-title{ margin-top: 4.6rem; }
  /* 同じ帯を共有するので、エリア表記にもシールの幅を確保させる。
     入り切らない端末では2行に折り返させる（＝シールの下に潜らせない）。 */
  /* box-sizing を明示しないと max-width が内容部だけに効き、padding分（30px）はみ出す。 */
  .fv-eyebrow{ box-sizing: border-box; max-width: calc(100% - 124px); }
}
/* 小型端末（iPhone SE 世代など）。104pxのままだとエリア表記の「ロス」が
   シールの下に隠れたため、シールをもう一段落とす。 */
@media (max-width: 380px){
  .fv-seal{ width: 88px !important; height: 88px !important; }
  .fv-seal i{ font-size: .95rem; }
  .fv-seal b{ font-size: 2.3rem !important; }
  .fv-seal b em{ font-size: 1.25rem; }
  .fv-eyebrow{ box-sizing: border-box; font-size: 1.18rem; max-width: calc(100% - 108px); }
  .fv-title{ margin-top: 3.8rem; }
}

/* ==========================================================================
   §116 ノートPC・iPad横（1001〜1199px）でも0円シールが見出しを隠していた ── 2026-08-11
   §115 でスマホを直したあと全幅を測って見つけた、公開中のページに元からあったバグ。
   1024pxで見出し1行目「壁紙の張り替え、」の右114pxがシールの下に入っていた（実測）。

   原因：1001pxで2カラムになり、見出しの列が 578px まで細くなる。
   一方で見出しは white-space:nowrap の 66px 固定＝1行目が常に512px。
   シール（165px＋右24px）と足すと 701px 必要で、列幅が 720px の上限に達する
   1190px あたりまで足りない。960px以下で無事だったのは1カラムで列が広いから。

   対処：この帯だけ見出しを列幅に追従させる。シールを縮める案は成立しない
   （1024pxでは入る余地が30pxしかない＝計算して捨てた）。
   ⚠️ 1200px以上は 6.6rem のまま。ここを触るときも 1001/1024/1160/1199px を測ること。
   ========================================================================== */
/* FVだけ .content_area の max-width が 1200px（他セクションは1000px）なので、
   1200px未満では左右の余白がゼロになり、見出しも本文も画面の端に貼りついていた。
   実測で 821〜1200px の全域が該当（1240pxで初めて max-width に届いて余白が生まれる）。 */
@media screen and (min-width: 821px) and (max-width: 1239px){
  .main .content_area{ box-sizing: border-box; padding-left: 20px; padding-right: 20px; }
}
/* 上の余白を足すと見出しの列がさらに細くなるので、2カラムの帯では見出しを列幅に追従させる。
   ⚠️ 余白と見出しサイズはセットで動かすこと。片方だけ触ると重なりが戻る。 */
@media screen and (min-width: 1001px) and (max-width: 1239px){
  .fv-title{ font-size: 4.4vw; }
}

/* ==========================================================================
   §117 小さめスマホで「工務店の手数料が、かかりません」が崩れていた ── 2026-08-11
   公開中のページに元からあったバグ。320 / 360 / 375px（iPhone SE2・3、mini、
   多くのAndroid）で、この1行が2段に割れて「工務店 / の」「手数 / 料」のように
   単語の途中で改行されていた。FVで安さの理由を言う唯一の行なので、実害が大きい。

   原因：§21で ＼ ／ の棒を並べるために .fv-sub > span を inline-flex にした。
   flexアイテムは既定で flex-shrink:1 なので、幅が足りないと各アイテムが縮み、
   中の文字が単語の途中で折り返される（テキストの折り返しとして振る舞わない）。

   対処：アイテムを縮ませない（flex:none）＋ 収まる字送りまで落とす。
   幅の実測式は width ≈ 46px + 300px × (字/18.5px)。360pxで328px、320pxで288pxに収める。
   ⚠️ 字を大きく戻すときは、必ず 320/360/375px で1行（高さ47px前後）に収まるか測ること。
   ========================================================================== */
@media screen and (max-width: 400px){
  .fv-sub > span{ flex-wrap: nowrap; }
  .fv-sub > span > *{ flex: none; }
  /* 1.7rem だと §120 の反転マーカーの余白が乗った時点で 360px で2行に戻る
     （実測 高さ43→71px）。幅の式が ≈46+300×(字/18.5) から ≈52+300×(字/18.5) に
     変わったので、字送りを一段下げて余裕を作り直した（360pxで17px余裕）。 */
  .fv-sub span{ font-size: 1.6rem; }
}
/* 小型端末。ここだけ見出しも1段落とす（40pxのままだと見出しが3行に割れる）。 */
@media screen and (max-width: 340px){
  .fv-sub span{ font-size: 1.42rem; }
  .fv-title{ font-size: 3.4rem; }
}

/* ==========================================================================
   §118 料金カードが 821〜959px で「2枚＋1枚」に折れていた ── 2026-08-11
   §23 のコメントが「3枚目が単独行になる」と書いていた症状。820px以下は
   カルーセルにして隠していたので気づかれず、821〜959px の帯だけ残っていた。
   原因＝既定が flex: 0 1 300px（伸びない）で、3枚×302px＋隙間=936px が入り切らない。
   ⚠️ 601〜820px はカルーセルなので、この帯には効かせない（821pxから）。
   ========================================================================== */
@media screen and (min-width: 821px) and (max-width: 959px){
  .cost-cards .cost-card{ flex: 1 1 calc(33.333% - 1.2rem); }
}

/* ==========================================================================
   §119 カルーセルを「機能する」ようにする ── 2026-08-11
   §23 の横スワイプは維持する（縦に長いLPは読まれない、が判断）。
   問題は「スワイプできると分からない」こと。次カードの端をのぞかせるだけでは、
   実測で料金3枚のうち1枚しか到達されないリスクが残る。

   足すのは4つ。順番に効く：
   ①「1 / 3」のカウンタ ── いちばん強い。"あと2枚ある" が一目で分かる
   ② ドット ── 枚数が見えて、押して飛べる
   ③ 左右の矢印 ── スワイプしない人（PCのタッチ、慣れていない層）の逃げ道
   ④ 右端のフェード ── 「まだ続く」の弱い合図。①〜③の補助

   ⚠️ 矢印にオレンジを使わない。オレンジはCTA専用の行動色で、
     ここで使うと申し込みボタンと視線を取り合う（→ §101 色の役割）。紺で置く。
   ⚠️ 中身が1画面に収まる幅では、操作パーツを出さない（JS側で判定して出さない）。
     出すと「押せるのに動かない」ものが増えて、かえって信用を落とす。
   ========================================================================== */
.cz-ui{ display: none; }                     /* 既定は出さない。JSがカルーセルだと判定した時だけ出す */
.cz-on .cz-ui{
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin: .2rem auto 0; padding: 0;
}

/* 左右の矢印。44px＝指で押せる最小サイズを下回らせない */
.cz-arrow{
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--color-navy); background: #fff;
  color: var(--color-navy); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, opacity .12s ease;
}
.cz-arrow:active{ background: #eaf0f6; }
.cz-arrow[disabled]{ opacity: .28; cursor: default; }
.cz-arrow svg{ width: 15px; height: 15px; display: block; }

/* ドット */
.cz-dots{ display: flex; align-items: center; gap: .8rem; }
.cz-dot{
  width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
  border: none; background: #C9BFAE; transition: background .12s ease, transform .12s ease;
}
.cz-dot[aria-current="true"]{ background: var(--color-navy); transform: scale(1.35); }

/* 「1 / 3」。数字だけ Oswald にして、料金の数字と同じ字体感で揃える */
.cz-count{
  flex: none; min-width: 4.6rem; text-align: center;
  font-family: 'Oswald', var(--font-sans), sans-serif;
  font-size: 1.5rem; font-weight: 600; color: var(--color-navy); letter-spacing: .02em;
}
.cz-count i{ font-style: normal; opacity: .45; margin: 0 .25em; }

/* 右端のフェード＝「まだ続く」。最後まで送ったら消す（.cz-end で外す） */
.cz-wrap{ position: relative; }
.cz-wrap::after{
  content: ""; position: absolute; top: 0; right: 0; width: 34px;
  height: 100%; pointer-events: none; opacity: 1;
  transition: opacity .18s ease;
  background: linear-gradient(90deg, rgba(255,251,237,0) 0%, rgba(255,251,237,.92) 100%);
}
.cz-wrap.cz-end::after{ opacity: 0; }
/* サンド地のセクション（なぜ安いのか／職人）は、地の色に合わせる */
.margin-sec .cz-wrap::after,
.reason .cz-wrap::after{
  background: linear-gradient(90deg, rgba(238,228,208,0) 0%, rgba(238,228,208,.92) 100%);
}

@media screen and (max-width: 820px){
  /* スクロールバーは全カルーセルに出す（細く・地に馴染ませる）。
     操作パーツと二重になるが、位置が分かる手がかりは多いほうがいい。 */
  .cost-cards, .trigger.problem .grid, .reason .reasons{ scrollbar-width: thin; }
  .cost-cards::-webkit-scrollbar,
  .trigger.problem .grid::-webkit-scrollbar,
  .reason .reasons::-webkit-scrollbar{ height: 5px; }
  .cost-cards::-webkit-scrollbar-thumb,
  .trigger.problem .grid::-webkit-scrollbar-thumb,
  .reason .reasons::-webkit-scrollbar-thumb{ background: #cdd6dd; border-radius: 999px; }

  /* §28 で隠していた実績リストを、1行あたりを詰めた形で出す。
     §28 の判断は「5項目リストが全カードに空白を生む」だった。
     いまは3項目に減っている（2026-08-11に確定事実だけへ差し替えた）ので、
     押し上げる高さが当時よりずっと小さい。施工者の根拠はスマホにも要る。 */
  .reason .check-list{ display: flex; margin-top: 1rem; gap: .2rem 1.4rem; }
  .reason .check-list li{ font-size: 1.32rem; padding: .1rem 0 .1rem 2.2rem; }
}

/* §119b 職人カードの「のぞかせ幅」を詰める ── 2026-08-11
   §23 は次カードの端をのぞかせてスワイプに気づかせる設計だった。
   料金（写真＋金額）と問題（短い見出し）は、のぞいた部分だけでも意味が読める。
   ところが職人カードは長文なので、のぞかせた50pxが「安く、す。も、は増ん。」のような
   文の断片になり、崩れて見える（＝壊れているように見える）。
   §119 でドット・カウンタ・矢印を付けたので、のぞかせに気づかせる役目を負わせる必要はもう無い。
   → 職人だけ 86%→93% にして、断片ではなく"隣に何かある"程度の細い帯にする。 */
@media screen and (max-width: 820px){
  .reason .reason-row,
  .reason .reason-row.rev{ flex: 0 0 93%; }
}

/* ==========================================================================
   §120 FVの強調を1段上げる ── 2026-08-11
   ① 「手数料」を反転マーカーにする（紺文字＋黄マーカー → 黄文字＋紺マーカー）
   ② 「こんな張り替えに対応しています」を画像の上に乗せる＋色を変える

   ①について：このLPが言いたい唯一のことは「工務店の手数料がかからない」。
   ところが §105 以降、FV の強調は全部「紺文字＋黄マーカー」で揃えてあり、
   いちばん大事な語なのに、見出しの「直接」と同じ強さしか持っていなかった。
   → 面を反転させて、この1語だけ強さを1段上げる。
   ⚠️ 反転は「手数料」だけに使う。増やすと段階が崩れて、また全部同じ強さに戻る。
   ⚠️ 黄は下55%のベタでは効かない（黄文字の上半分がクリーム地に溶ける）。
     紺は文字の高さをほぼ覆う（6%〜94%）。箱にはしない・傾けない・影は落とさない（§105）。
   コントラスト #FFC42E on #16324e = 5.75:1（大きい文字なのでAAを満たす）

   ②について：ラベルが本文の直後に同じ紺文字で置かれていたので、
   段落の4行目のように見えて、写真の見出しだと分からなかった。
   → 写真ブロックの左上（人物の頭より上・カードより左の空き）に絶対配置で乗せる。
     色は「紺地＋白文字のピル」＝すぐ隣のカードのキャプション（6畳ひと部屋 等）と
     .fv-eyebrow と同じ語彙。新しい部品を作らずに"画像側のラベル"だと分かる形にする。
   ⚠️ max-width は % で持つ。左上の空きは実測で showcase 幅の 30〜33% で安定していて
     （821px:250/766・1024px:162/531・1280px:232/705）、31% ならカードに被らない。
     px で決めると 1024px 付近でカードのキャプションに衝突する。
   ⚠️ 流れから抜くのでFVが約35px縮む（縦が短くなるのは望ましい方向）。
   ========================================================================== */

/* ---------- ① 「手数料」＝反転マーカー ---------- */
.fv-sub .mk{
  /* 色は #F5B300 ＝ 画面で実際に使われているマーカーの黄。
     ⚠️ 変数は使えない：--color-yellow は3113行で大面積用サンド(#F2D9A8)に上書きされていて
       文字にすると淡いベージュになり、--color-marker-y(#FFD84D)はどこにも使われていない。
       見出し「直接」のマーカーと freebar の「すべて0円」は両方 #F5B300 のハードコード。
       ここを揃えないと、反転させた意味（同じ黄を地と文字で入れ替えた）が伝わらない。
     （変数が実体と合っていないのは既存の負債。触るときは computed value を実測して確認する） */
  color: #F5B300 !important;
  -webkit-text-fill-color: #F5B300 !important;
  background: linear-gradient(
      transparent 6%,
      var(--color-navy) 6%,
      var(--color-navy) 94%,
      transparent 94%) !important;
  padding: 0 .2em !important;
}

/* スマホは横幅が足りないので、反転マーカーの余白を詰める。
   ここを広げると「工務店の手数料が、かかりません」が2行に割れる（§117）。 */
@media screen and (max-width: 400px){
  .fv-sub .mk{ padding: 0 .12em !important; }
}

/* ---------- ② ラベル＝写真グリッドの真上（カードの左端に揃える） ---------- */
/* HTMLで `.fv-cases-grid` の第1子に移し、grid-column: 1/-1 で全列にまたがせた。
   グリッドの子にするとカードの左端とピクセル単位で揃う＝マジックナンバーが要らない。

   ⚠️ 「showcaseの左上に絶対配置」も「margin-left の%で寄せる」も測って捨てた：
     ・左上に絶対配置＝女性の頭の上に出て、どの写真の話なのか伝わらない
       （1001〜1199pxではカードのキャプションに19px重なる問題もあった）
     ・%で寄せる＝グリッドの左端は絶対値がほぼ一定（232〜250px）で%に比例しないため、
       900pxで20px・1024pxで78pxずれる
   ⚠️ この指定はメディアクエリの外に置いてある（2879行のスマホ `display:none` を
     後勝ちで上書きするため）。ここより後ろに display を当てないこと。
   ⚠️ グリッドの子なので、カード枚数を変える（2列⇔4列）ときも 1/-1 のままで追従する。 */
.fv-cases-ttl{
  /* 写真グリッドの横中央に置く（＝写真と写真のあいだの中心の真上）。
     start（カードの左端に揃える）から変更：2026-08-11 Koseiの指示。 */
  grid-column: 1 / -1; justify-self: center;
  position: static !important; top: auto; left: auto;
  display: inline-block; max-width: 100%; box-sizing: border-box;
  margin: 0 0 .2rem;
  background: var(--color-navy);
  color: #fff !important;
  /* ピル（100px）にすると隣のカードのキャプションと同じ形になって
     "写真1枚のラベル"に見える。ここはグリッド全体の見出しなので帯にする。 */
  border-radius: 6px;
  padding: .45rem 1.1rem;
  font-size: 1.24rem; font-weight: 800; line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 820px){
  .fv-cases-ttl{ font-size: 1.28rem; padding: .42rem 1rem; }
}

/* ==========================================================================
   §120c スマホでもラベルを出す ── 2026-08-11
   §28 が「白文字で見えない見出し」としてスマホで display:none にしていた。
   §120 で紺地＋白文字にしたので、もう見えない問題は無い。

   ⚠️ デスクトップと違って重ね置きにはしない。左上の空きが実測で 98〜138px しかなく
     （320px:98・390px:131・414px以上:138）、ラベルは1行で約210px 必要なので
     2〜3行の窮屈な塊になる。しかもカードのキャプションは showcase の上端より
     6px 上に出ているので、上端に寄せると当たる。
   → 流れの中で画像の直上に置く。FVは約34px 伸びるが、
     「どの写真の話なのか」が分かるほうが、この34pxより価値がある。
   ⚠️ 幅は inline-block のまま。全幅の帯にすると下の「すべて0円」バーと2本並んで重くなる。
   ========================================================================== */
@media screen and (max-width: 820px){
  .fv-cases-ttl{
    display: inline-block; position: static;
    margin: 0 0 .7rem; box-sizing: border-box; max-width: 100%;
    background: var(--color-navy);
    color: #fff !important;
    border-radius: 6px;
    padding: .42rem 1rem;
    font-size: 1.28rem; font-weight: 800; line-height: 1.5;
    text-align: left;
  }
}

/* §120e 320px級だけ折り返し位置を整える ── 2026-08-11
   グリッドの子にしたので、グリッド幅が174pxしかない320pxでは1行に収まらない
   （ラベルは1行で約212px必要）。字を落として1行にするには10px台前半まで下げる
   必要があり読めなくなるので、2行を受け入れる。
   ただし放っておくと「こんな張り替えに対応してい／ます」と最後の2文字だけが落ちるので、
   幅を絞って「こんな張り替えに／対応しています」で割れるようにする。
   ※角丸6pxの帯なので2行でも形は崩れない（ピルにしなかった理由の一つ）。 */
@media screen and (max-width: 340px){
  .fv-cases-ttl{ max-width: 10em; }
}

/* ==========================================================================
   §121 「料金に含まれるもの／別料金になるもの」を既定で閉じる ── 2026-08-11
   開いたままだと画面3つ分（PCで約760px）を占めて、料金セクションの主役である
   3つの金額から視線が遠ざかっていた。ここは気になった人が開く二次情報。

   ⚠️ 閉じるときに落としてはいけないものが1つある＝
     「追加になりうるものは、先に全部お伝えしています」。
     この業種で最大の不安は「あとから追加で請求される」で、
     中身（.incl-note）に書いてあってもアコーディオンの中なら閉じている間は届かない。
     → 見出しの下に一行だけ出して、閉じた状態でも開示していることが伝わるようにする。
     この一行が「開く理由」にもなる（ラベルだけでは押す動機がない）。
   ⚠️ この一行を消すなら、代わりに閉じるのをやめること。どちらかは要る。
   ========================================================================== */
.cost details.acc > summary .acc-ttl{
  display: block; flex: 1 1 auto; min-width: 0;
}
.cost details.acc > summary .acc-ttl small{
  display: block; margin-top: .5rem;
  font-size: 1.35rem; font-weight: 700; color: #6B6054; letter-spacing: 0;
}
/* 閉じているときは中身が「まだある」ことを示したいので、＋を目立たせる */
.cost details.acc:not([open]) > summary::after{ opacity: 1; }
@media screen and (max-width: 820px){
  .cost details.acc > summary{ padding: 1.4rem 1.5rem; }
  .cost details.acc > summary .acc-ttl small{ font-size: 1.24rem; margin-top: .4rem; }
}

/* ==========================================================================
   §122 文章だけのブロックに「階層」を入れる ── 2026-08-11
   Koseiの指摘：文章ベースの箇所が読みにくい。ただし「やりすぎて雰囲気を壊すのは本末転倒」。

   ★方針＝装飾（エフェクト）は足さない。足すのは情報の階層だけ。
     §105 で角丸チップ＋落ち影＋傾きの3点セットを「AIが作った顔」と指摘されている。
     エフェクトを足す方向は同じ失敗に戻る。効くのはサイズ差・余白・区切り・色の役割。
   ★判定基準：その装飾を消したら情報が読みにくくなるか。
     なるなら機能なので入れる。ならないなら飾りなので入れない。

   (a) 対応エリアの市区一覧 ── ここだけは"読みにくい"でなく機能していなかった
   (b) ビジョンの山場 ── 段落4つが同じ重さで、どこが結論か分からなかった
   (c) 内訳図の下の2カード ── 見出しが本文と同じ大きさで、2枚の役割が立っていなかった
   ========================================================================== */

/* ---------- (a) 対応エリア：都県ラベル＋市区を列で揃える ---------- */
/* 地の文で13市区を「・」で繋げていたので、自分の市を探せなかった。
   列で揃えると視線が縦に走って探せる。装飾は足していない（罫も箱も無し）。 */
.area-grid{
  display: grid; grid-template-columns: auto 1fr;
  gap: 1.1rem 1.8rem; align-items: start;
  margin: 1.2rem 0 1.6rem; text-align: left;
}
.area-grid dt{
  background: var(--color-navy); color: #fff;
  font-size: 1.32rem; font-weight: 800; line-height: 1.5;
  border-radius: 6px; padding: .38rem 1rem; white-space: nowrap;
}
.area-grid dd{
  margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.2em, 1fr));
  gap: .35rem 1.2rem;
}
.area-grid dd span{
  font-size: 1.5rem; font-weight: 700; color: var(--color-navy); line-height: 1.7;
}
/* 「など」は独立したセルにしない。5列グリッドだと11個目として次の行に単独で落ちて浮く。
   最後の市区と同じセルに入れて行を増やさない（意味＝一覧は例示、は保つ）。 */
.area-grid dd .etc{
  font-style: normal; font-weight: 500; color: #6B6054;
  font-size: .92em; margin-left: .45em;
}

/* ---------- (b) ビジョンの山場を1行だけ立てる ---------- */
/* マーカーは1行目のみ。2行とも引くと黄が面になり、FVの「手数料」より強く見えて段階が崩れる。 */
.ms-why-close .mk-line{
  background: linear-gradient(transparent 62%, var(--color-marker-y) 62%);
  padding: 0 .1em;
}
/* 段落の間隔を広げる＝4つの段落が団子になっていたのをほどく（罫は足さない） */
.ms-why p{ margin-bottom: 1.9rem; }

/* ---------- (c) 2カードの見出しを立てる ---------- */
/* 「料金に含まれるもの／別料金」カード（.incl-col h4）と同じ手法＝下罫で見出しを分ける。
   新しい部品を作らず、ページ内に既にある型に揃える。 */
.ms-note h3{
  font-size: 1.82rem; padding-bottom: .8rem; margin-bottom: 1.1rem;
  border-bottom: 2px solid #E7DED0;
}

@media screen and (max-width: 820px){
  .area-grid{ grid-template-columns: 1fr; gap: .6rem; }
  .area-grid dt{ justify-self: start; }
  .area-grid dd{ grid-template-columns: repeat(auto-fill, minmax(7.4em, 1fr)); margin-bottom: .8rem; }
  .area-grid dd span{ font-size: 1.42rem; }
  .ms-why p{ margin-bottom: 1.6rem; }
  .ms-note h3{ font-size: 1.6rem; }
}

/* ==========================================================================
   §123 「壁・床・カーテンレール」3カードの余白を使い切る ── 2026-08-11
   Koseiの指摘：PCで1枚目と3枚目の枠がデカくなるのが勿体無い。

   原因：flex の stretch で3枚の高さが最長カード（2枚目）に揃うが、
   1・3枚目は文章が短いので、下に2行分の空白がそのまま残っていた。

   ⚠️ 高さを揃えるのをやめる（align-items:flex-start）案は採らない。
     3枚が「同じ3つのサービス」なのに下端がバラバラになると、崩れて見える。
   ⚠️ 床・カーテンレールの実写が無いので写真も入れない。
     事例セクションで実写を必須にしている（絶対ルール2）のに、
     ここでフリー素材を使うとページの中で矛盾する。

   打ち手：カードを縦フレックスにして「効き目の一行」を margin-top:auto で下端に固定。
   余った高さは説明と効き目のあいだに分散するので、下に穴が空かない。
   ＋3枚とも「説明」→「効き目」の2段構成に揃えたので、横に読み比べられる。
   ⚠️ セレクタは .grid-scope に限定する。`.trigger .grid .t` は
     問題提起の6カード（スマホでカルーセル）と共用なので、そちらに効かせない。
   ========================================================================== */
.trigger .grid-scope .t{
  display: flex; flex-direction: column;
}
.trigger .grid-scope .t-desc{
  display: block; margin-bottom: 1.4rem;
}
.trigger .grid-scope .t-pt{
  display: block; margin-top: auto;          /* ← これが効く。効き目を下端に固定する */
  padding-top: 1.2rem; border-top: 1px dashed #D8CCB6;
  font-size: 1.46rem; font-weight: 800; line-height: 1.65;
  color: var(--color-navy);
}
@media screen and (max-width: 820px){
  /* スマホは1枚ずつ縦に積むので高さを揃える必要がない。
     下端固定のままだと短いカードで罫が浮くため、素直に流す。 */
  .trigger .grid-scope .t-pt{ margin-top: 0; }
  .trigger .grid-scope .t-desc{ margin-bottom: 1.1rem; }
  .trigger .grid-scope .t-pt{ font-size: 1.38rem; padding-top: 1rem; }
}

/* ==========================================================================
   §124 サンクスページ（thanks.html）── 2026-08-11
   モックの3画面目「結果」を実装したもの。LPと同じトークン／同じ料金レンジを使う。
   ⚠️ 出す金額は「一般的な相場」であって当社の見積りではない（絶対ルール6）。
      値は index.html の .cc-price と必ず揃える。片方だけ直さないこと。
   ========================================================================== */
.thanks-body{ background: var(--color-bg); }

.tx-hero{ background: var(--color-navy); color:#fff; padding: 5.2rem 2rem 5.6rem; text-align:center; position:relative; overflow:hidden; }
/* ⚠️ overflow:hidden は必須。::after を left/right -6% で広げているので、
   これが無いとページ全体が横にあふれる（実測で SW382 > CW360 になった）。 */
.tx-hero::after{ content:""; position:absolute; left:-6%; right:-6%; bottom:-38px; height:80px;
  background: var(--color-bg); transform: skewY(-1.6deg); }
.tx-in{ position:relative; z-index:2; max-width: 72rem; margin:0 auto; }
.tx-check{ width:6.4rem; height:6.4rem; border-radius:50%; background:#1f7a4d; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:3.4rem; font-weight:900; margin:0 auto 1.8rem; }
.tx-h{ font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight:900; line-height:1.45; letter-spacing:-.01em; }
.tx-sub{ margin-top:1.2rem; font-size:1.5rem; color:#B9C6D4; line-height:1.8; }
.tx-id{ display:inline-flex; align-items:center; gap:1.2rem; margin-top:2.2rem;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); padding:.9rem 1.8rem; }
.tx-id-l{ font-size:1.2rem; font-weight:800; color:#8FA2B5; letter-spacing:.08em; }
.tx-id-v{ font-family:'Oswald', var(--font-sans), sans-serif; font-size:2.4rem; font-weight:600;
  color: var(--color-gold); letter-spacing:.06em; line-height:1; }

.tx-body{ padding: 4.6rem 2rem 6rem; max-width: 82rem; }

/* 相場 */
.tx-price{ background:#fff; border:2px solid var(--color-navy); padding: 2.8rem 2.4rem 2.4rem; text-align:center; }
.tx-price-l{ font-size:1.25rem; font-weight:900; letter-spacing:.14em; color: var(--color-cta); }
.tx-price-v{ font-family:'Oswald', var(--font-sans), sans-serif; font-weight:600;
  font-size: clamp(3rem, 7vw, 4.6rem); color: var(--color-navy); line-height:1.15; margin:.6rem 0 .4rem;
  font-variant-numeric: tabular-nums; }
.tx-price.is-noprice .tx-price-v{ font-family: var(--font-sans); font-size: clamp(1.8rem,4vw,2.4rem); font-weight:900; }
.tx-price-scope{ font-size:1.42rem; font-weight:800; color:#5A5042; }
.tx-price-note{ margin-top:1.6rem; padding:1.3rem 1.5rem; background: var(--color-bg);
  font-size:1.36rem; line-height:1.9; color:#3E4A57; text-align:left; }
.tx-price-note b{ color: var(--color-navy); }

/* 次にやること */
.tx-next{ background:#fff; border:1px solid #E0D4BF; padding: 2.6rem 2.4rem; margin-top: 2.4rem;
  box-shadow: 0 16px 32px -26px rgba(27,58,87,.6); }
.tx-next-h{ font-size:1.9rem; font-weight:900; color:var(--color-navy); margin-bottom:.9rem; }
.tx-next-p{ font-size:1.5rem; line-height:1.9; color:#3E4A57; }
.tx-next-p b{ color:var(--color-navy); }
.tx-why{ margin:1.6rem 0; padding:1.3rem 1.5rem; background:#E9F3EC; border-left:4px solid #1f7a4d;
  font-size:1.4rem; line-height:1.85; color:#2B4A3A; }
.tx-why b{ color:#155c39; }

.tx-btns{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:1.8rem; }
.tx-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  padding:1.7rem 1.2rem; text-decoration:none; text-align:center; border:0; }
.tx-btn b{ font-size:1.72rem; font-weight:900; }
.tx-btn small{ font-size:1.18rem; font-weight:700; opacity:.9; }
.tx-btn.primary{ background: var(--color-cta); color:#fff; box-shadow:0 5px 0 var(--color-cta-dark); }
.tx-btn.line{ background:#06C755; color:#fff; box-shadow:0 5px 0 #049544; }
.tx-btn.is-disabled{ background:#CFC7BA; color:#fff; box-shadow:0 5px 0 #B4AA9A; pointer-events:none; }
.tx-btn.is-disabled::after{ content:"（準備中）"; font-size:1.1rem; font-weight:800; }
.tx-note-small{ margin-top:1.3rem; font-size:1.3rem; line-height:1.8; color:#6B6054; text-align:center; }
.tx-note-small b{ color:var(--color-navy); }

/* 流れ */
.tx-flow{ margin-top:2.4rem; background: var(--color-sand-soft); border:1px solid #E0D4BF; padding:2.4rem 2.2rem; }
.tx-flow-h{ font-size:1.72rem; font-weight:900; color:var(--color-navy); margin-bottom:1.4rem; }
.tx-steps{ list-style:none; }
.tx-steps li{ display:flex; gap:1.2rem; align-items:flex-start; padding:.9rem 0; border-bottom:1px dashed #D8CCB6; }
.tx-steps li:last-child{ border-bottom:0; }
.ts-n{ flex:none; width:2.8rem; height:2.8rem; border-radius:50%; background:#CFC7BA; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.4rem;
  font-family:'Oswald', var(--font-sans), sans-serif; }
.tx-steps li.is-done .ts-n{ background: var(--color-navy); }
.ts-t{ font-size:1.42rem; line-height:1.7; color:#5A5042; padding-top:.25rem; }
.ts-t b{ display:block; font-size:1.55rem; font-weight:900; color:var(--color-navy); }
.tx-steps li.is-done .ts-t{ color:var(--color-navy); }
.tx-flow-note{ margin-top:1.4rem; font-size:1.34rem; line-height:1.85; color:#5A5042; }
.tx-flow-note b{ color:var(--color-navy); }

.tx-back{ margin-top:3rem; text-align:center; font-size:1.4rem; }
.tx-back a{ color:var(--color-navy); font-weight:800; text-underline-offset:.25em; }

.tx-foot{ background: var(--color-navy); padding:3rem 2rem; text-align:center; }
.tx-foot .content_area{ max-width:82rem; }
.tx-foot-brand{ font-size:1.7rem; font-weight:900; color:#fff; letter-spacing:.04em; }
.tx-foot-links{ margin-top:1rem; display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap; }
.tx-foot-links a{ color:#B9C6D4; font-size:1.28rem; text-decoration:underline; text-underline-offset:.2em; }

@media (max-width: 820px){
  .tx-hero{ padding:3.8rem 1.6rem 4.2rem; }
  .tx-check{ width:5.2rem; height:5.2rem; font-size:2.8rem; }
  .tx-body{ padding:3.4rem 1.6rem 4.6rem; }
  .tx-price{ padding:2.2rem 1.6rem 1.8rem; }
  .tx-next, .tx-flow{ padding:2rem 1.6rem; }
  .tx-btns{ grid-template-columns:1fr; }
  .tx-price-note, .tx-next-p{ font-size:1.34rem; }
}

/* ==========================================================================
   §125 法務ページ共通（terms / privacy / tokushoho）── 2026-08-11
   ⚠️ 特商法・個人情報保護法の記載事項を満たすための実務ページ。
      デザインを凝る場所ではない。読みやすさと、抜けが無いことだけを担保する。
   ========================================================================== */
.lg-body{ background: var(--color-bg); }
.lg-hero{ background: var(--color-navy); color:#fff; padding: 3.6rem 2rem 3.8rem; text-align:center; }
.lg-hero h2{ font-size: clamp(2rem,4.4vw,2.8rem); font-weight:900; line-height:1.45; }
.lg-hero p{ margin-top:.8rem; font-size:1.34rem; color:#B9C6D4; }
.lg-wrap{ max-width: 82rem; margin:0 auto; padding: 4rem 2rem 6rem; }
.lg-note{ background:#FDF1EF; border-left:4px solid var(--color-primary); padding:1.3rem 1.5rem;
  font-size:1.34rem; line-height:1.85; color:#7A2A1E; margin-bottom:2.6rem; }
.lg-note b{ color:var(--color-primary); }
.lg-sec{ margin-bottom: 3rem; }
.lg-sec h3{ font-size:1.72rem; font-weight:900; color:var(--color-navy);
  padding-bottom:.7rem; margin-bottom:1.1rem; border-bottom:2px solid var(--color-navy); }
.lg-sec p, .lg-sec li{ font-size:1.42rem; line-height:1.95; color:#3E4A57; }
.lg-sec p{ margin-bottom:1rem; }
.lg-sec ol, .lg-sec ul{ padding-left:1.8rem; margin:.6rem 0 1.2rem; }
.lg-sec li{ margin-bottom:.5rem; }
.lg-sec ul{ list-style:disc; }
.lg-sec ol{ list-style:decimal; }
.lg-sec b{ color:var(--color-navy); }
.lg-table{ width:100%; border-collapse:collapse; background:#fff; font-size:1.4rem; }
.lg-table th, .lg-table td{ border:1px solid #E0D4BF; padding:1.2rem 1.4rem; text-align:left; vertical-align:top; line-height:1.85; }
.lg-table th{ background: var(--color-sand-soft); font-weight:900; color:var(--color-navy); width:32%; white-space:nowrap; }
.lg-table td b{ color:var(--color-navy); }
.lg-tbd{ background:#FFF3CD; color:#7A5A00; font-weight:900; padding:.1rem .5rem; }
.lg-date{ margin-top:2.4rem; font-size:1.3rem; color:#6B6054; text-align:right; }
.lg-back{ margin-top:3rem; text-align:center; font-size:1.4rem; }
.lg-back a{ color:var(--color-navy); font-weight:800; text-underline-offset:.25em; }
@media (max-width: 820px){
  .lg-wrap{ padding: 2.8rem 1.6rem 4.4rem; }
  .lg-sec p, .lg-sec li{ font-size:1.34rem; }
  .lg-table{ font-size:1.28rem; }
  .lg-table th, .lg-table td{ padding:.9rem 1rem; }
  .lg-table th{ width:38%; white-space:normal; }
}

/* ==========================================================================
   §126 写真アップロードフォーム（photo.html）── 2026-08-11
   モックの4画面目。LPとは別ページ＝「情報を渡す場所」。
   ⚠️ ここはスマホで開かれる前提（外出先で撮って送る）。タップ領域を大きく取る。
   ========================================================================== */
.ph-body{ background: var(--color-bg); }
.ph-wrap{ max-width: 62rem; margin:0 auto; padding: 0 1.8rem 6rem; }

.ph-idbar{ display:flex; align-items:center; justify-content:center; gap:1rem;
  background: var(--color-navy); color:#fff; padding:.9rem 1.4rem; margin:0 -1.8rem 2.6rem; }
.ph-idbar-l{ font-size:1.15rem; font-weight:800; color:#8FA2B5; letter-spacing:.08em; }
.ph-idbar-v{ font-family:'Oswald', var(--font-sans), sans-serif; font-size:1.9rem; font-weight:600;
  color: var(--color-gold); letter-spacing:.06em; }

.ph-head{ text-align:center; margin-bottom:2.4rem; }
.ph-step{ font-size:1.2rem; font-weight:900; letter-spacing:.14em; color: var(--color-cta); }
.ph-h{ font-size: clamp(2rem,5vw,2.7rem); font-weight:900; color:var(--color-navy); line-height:1.45; margin:.6rem 0 1rem; }
.ph-sub{ font-size:1.42rem; line-height:1.9; color:#5A5042; }
.ph-sub b{ color:var(--color-navy); }

.ph-block{ background:#fff; border:1px solid #E0D4BF; padding:2rem 1.8rem; margin-bottom:1.6rem; }
.ph-label{ font-size:1.55rem; font-weight:900; color:var(--color-navy); display:flex; align-items:center; gap:.8rem; }
.ph-req{ background: var(--color-primary); color:#fff; font-size:1.05rem; font-weight:900; padding:.2rem .7rem; }
.ph-any{ background:#8A8378; color:#fff; font-size:1.05rem; font-weight:900; padding:.2rem .7rem; }
.ph-hint{ font-size:1.28rem; color:#6B6054; margin-top:.5rem; }

.ph-drop{ display:flex; flex-direction:column; align-items:center; gap:.4rem;
  border:2px dashed var(--color-navy); background: var(--color-sand-soft);
  padding:3rem 1.6rem; cursor:pointer; text-align:center; }
.ph-drop:active{ background: var(--color-sand-deep); }
.ph-drop-ic{ font-size:3.2rem; line-height:1; }
.ph-drop b{ font-size:1.72rem; font-weight:900; color:var(--color-navy); }
.ph-drop small{ font-size:1.24rem; color:#6B6054; }

.ph-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.2rem; }
.ph-thumb{ aspect-ratio:1; overflow:hidden; background: var(--color-sand-deep); }
.ph-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.ph-guide{ margin-top:1.4rem; background: var(--color-bg); border-left:4px solid var(--color-gold); padding:1.2rem 1.4rem; }
.ph-guide b{ font-size:1.34rem; color:var(--color-navy); display:block; margin-bottom:.5rem; }
.ph-guide ul{ list-style:none; }
.ph-guide li{ font-size:1.3rem; line-height:1.85; color:#5A5042; padding-left:1.1rem; position:relative; }
.ph-guide li::before{ content:"・"; position:absolute; left:0; }
.ph-guide-note{ margin-top:.7rem; font-size:1.26rem; color:#6B6054; }
.ph-guide-note b{ display:inline; font-size:1.26rem; }

.ph-opts{ display:grid; gap:.7rem; margin-top:1.1rem; }
.ph-opt{ background:#fff; border:2px solid #DCD5C9; padding:1.3rem 1.4rem; font-size:1.5rem; font-weight:700;
  color:var(--color-navy); text-align:left; cursor:pointer; font-family:inherit; transition:.14s; }
.ph-opt:hover{ border-color:var(--color-navy); }
.ph-opt.is-on{ border-color:var(--color-cta); background:#FFF6F1; font-weight:900; }
.ph-block textarea{ width:100%; margin-top:1rem; border:2px solid #DCD5C9; padding:1.1rem 1.2rem;
  font-size:1.5rem; font-family:inherit; background:#FFFDF8; color:var(--color-navy); }

.ph-err{ margin-top:.9rem; color:var(--color-primary); font-size:1.3rem; font-weight:800; }
.ph-submit{ width:100%; background:var(--color-cta); color:#fff; border:0; padding:1.9rem;
  font-size:1.9rem; font-weight:900; font-family:inherit; cursor:pointer;
  box-shadow:0 5px 0 var(--color-cta-dark); margin-top:.6rem; }
.ph-submit:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--color-cta-dark); }
.ph-foot-note{ margin-top:1.2rem; font-size:1.24rem; color:#6B6054; text-align:center; line-height:1.8; }
.ph-foot-note a{ color:var(--color-navy); text-decoration:underline; text-underline-offset:.2em; }

.ph-done{ text-align:center; padding:3rem 0; }
.ph-done-ck{ width:6rem; height:6rem; border-radius:50%; background:#1f7a4d; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:3.2rem; font-weight:900; margin:0 auto 1.6rem; }
.ph-done-h{ font-size:2.4rem; font-weight:900; color:var(--color-navy); }
.ph-done-p{ margin-top:1rem; font-size:1.45rem; line-height:1.95; color:#3E4A57; }
.ph-done-p b{ color:var(--color-navy); }
.ph-done-next{ margin-top:2rem; background:var(--color-sand-soft); border:1px solid #E0D4BF; padding:1.5rem 1.6rem; text-align:left; }
.ph-done-next b{ display:block; font-size:1.3rem; color:var(--color-navy); margin-bottom:.4rem; }
.ph-done-next span{ font-size:1.36rem; line-height:1.9; color:#5A5042; }

@media (max-width: 820px){
  .ph-wrap{ padding:0 1.4rem 4.6rem; }
  .ph-idbar{ margin:0 -1.4rem 2rem; }
  .ph-block{ padding:1.6rem 1.3rem; }
  .ph-drop{ padding:2.4rem 1.2rem; }
  .ph-opt{ font-size:1.42rem; padding:1.2rem 1.2rem; }
}

/* ==========================================================================
   §127 スマホFV上部の余白を詰める ── 2026-08-11
   実測（390px・ドラフトバー込み）：
     header下端166 → eyebrow上端200 ＝ 34px（hero padding-top 20 + fv-lead padding-top 14）
     eyebrow下端233 → title上端289 ＝ 56px（eyebrow margin-bottom 10 + title margin-top 46）
   合計90pxを、見出しが始まる前に使っていた。

   56px側は §115 で 0円シールに専用の段を与えた分。シールを少し小さくして段を薄くする。
   ⚠️ シールを小さくしすぎると §113b の判断（0円は最大の強みだから主役にする）を殺す。
     104→92px は「1段小さくする」まで。これ以上は縮めない。
   ⚠️ 触ったら必ず 320/360/375/390/414/480/600px で
     「見出しとシールの重なり0」を測り直すこと（目視では1〜2pxのかすりが分からない）。
   ========================================================================== */
@media screen and (max-width: 600px){
  /* ①ヘッダー下の34px（hero 20 + lead 14）を詰める */
  .fv-hero{ padding-top: 8px; }
  .fv-lead{ padding-top: 4px; }
  /* ②シールを1段小さくする＝帯そのものを薄くする。
     ⚠️ 帯の高さ＝シールの高さ。ここを縮めない限り上部は詰まらない（実測で確認）。
     ⚠️ top は `.fv-hero > .fv-seal`（子結合子＝specificityが上）に負けるので、そちらで指定する。 */
  /* ★エリア表記と見出しのあいだの"穴"の正体はシール。
     穴の大きさ ＝ シールの高さ − 41px（実測式）なので、シールを縮めるか上に逃がすかしかない。
     → 両方やる。72pxに落とし、ヘッダーの右（スマホでは空いている＝実測でx218以降は無地）へ30px逃がす。
     これで穴は 49px → 13px＝ふつうの行間になる。
     ⚠️ ヘッダーは overflow:visible・position:static なので、上にはみ出しても切られない（実測確認済み）。
     ⚠️ top は `.fv-hero > .fv-seal`（子結合子＝specificityが上）でないと効かない。 */
  .fv-seal{ width: 72px !important; height: 72px !important; }
  .fv-hero > .fv-seal{ top: -30px !important; }
  .fv-seal i{ font-size: .82rem; line-height: 1.18; }
  .fv-seal b{ font-size: 1.9rem !important; }
  .fv-seal b em{ font-size: 1.05rem; }
  .fv-eyebrow{ margin-bottom: .6rem; }
  .fv-title{ margin-top: 1.2rem; margin-bottom: .8rem; }
  /* ③見出し〜写真までの隙間も詰める（説明文は消さない＝内容は削らない） */
  .fv-fact{ margin-bottom: .4rem; }
  .fv-visual{ margin-top: .4rem !important; }
}
@media screen and (max-width: 380px){
  .fv-seal{ width: 66px !important; height: 66px !important; }
  .fv-seal i{ font-size: .76rem; }
  .fv-seal b{ font-size: 1.7rem !important; }
  .fv-seal b em{ font-size: .95rem; }
  .fv-title{ margin-top: 1rem; }
}

/* §126b 写真フォームの送信中表示 */
.ph-progress{ margin-top:1rem; text-align:center; font-size:1.36rem; color:#5A5042; }
.ph-progress b{ color:var(--color-navy); }
.ph-submit:disabled{ background:#CFC7BA; box-shadow:0 5px 0 #B4AA9A; cursor:default; }

/* ==========================================================================
   §128 「最後の1文字だけ次の行に落ちる」を潰す ── 2026-08-11
   スキャナ（最終行が最長行の30%未満を検出）で**スマホ390pxに25箇所**あった。
   最悪は「下の写真は…現場です。」の8%と「ご自宅の一部屋から…まで。」の11%＝
   どちらも最後の2文字だけが2行目に落ちていた。

   使うのは text-wrap の2つ。数値でなくブラウザに行分割を任せるので、
   文言や幅が変わっても崩れない（＝ <br> で手当てすると別の幅で壊れる）。
     ・balance … 行の長さを均等に割る。見出し・短いリード向け（ブラウザ側で行数上限あり）
     ・pretty  … 最終行に1語だけ残さないよう調整する。長い本文向け
   ⚠️ どちらも対応していないブラウザでは無視され、今の見た目に戻るだけ（＝壊れない）。
     iOS Safari は 17.5 以降が対象。古い端末では効かないので、
     「効いたら綺麗になる」程度の期待値で入れる。行数前提のレイアウトを組まないこと。
   ========================================================================== */

/* ---------- 見出し・短いリード＝均等に割る ---------- */
h2, h3, h4,
.content_ttl, .lead, .proof-lead, .proof-sub,
.ms-why-lead, .ms-note h3, .incl-col h4,
.t-desc, .t-pt, .cost-card .cc-ttl, .cost-card .cc-sub,
.fv-cases-ttl, .balloon, .cta-lead, .flow-step h3{
  text-wrap: balance;
}

/* ---------- 本文＝最終行に1語だけ残さない ---------- */
p, li, dd, blockquote,
.fv-fact, .reason-p, .faqs_a, .mf-note, .flow-note,
.incl-col li, .incl-note, .assure-list li, .callout{
  text-wrap: pretty;
}

/* §128b text-wrap では直らない3種を、構造で直す ── 2026-08-11
   スキャナで残った10箇所は「文章の折り返し」ではなく「並べ方」の問題だった。 */
@media screen and (max-width: 820px){
  /* ① フォームのラベル：必須/任意バッジだけが2行目に落ちていた（実測 最終行1.9字 ×5箇所）。
        ラベルとバッジを1行のflexにして、バッジは縮ませない。 */
  .form_title{
    display: flex !important; align-items: center; gap: .6rem;
    flex-wrap: nowrap;
  }
  .form_title label{ top: 0; flex: 0 1 auto; }
  .form_title .req_on, .form_title .req_off{ flex: none; }

  /* ② 内訳図の凡例：「職人の取り分」と金額が別の行に割れていた（最終行2.6〜3.2字 ×4箇所）。
        li の中では折り返さない。行送りは親の flex-wrap に任せる。 */
  .ms-legend li{ flex-wrap: nowrap; white-space: nowrap; }
}

/* ③ 「壁だけでなく、床とカーテンレールも、同じ職人にまとめて頼めます」＝
      PC向けに入れた <br> がスマホでは効いてしまい、4行の最終行に1文字だけ残っていた。
      <br> を消して text-wrap: balance に判断させる（＝幅が変わっても崩れない）。 */
@media screen and (max-width: 600px){
  .trigger .content_ttl br{ display: none; }
}

/* §128c 短い要素は pretty ではなく balance ── 2026-08-11
   幅を変えてスキャンすると、孤立行の数は幅で大きく動く（実測：360px=14件・375px=6件・390px=7件・414px=3件）。
   ＝手作業で1箇所ずつ直すのは原理的に無理。幅に追従するルールで押さえるしかない。

   分かったこと：**短い要素（ラベル・キャプション・箇条書き・リード）には pretty が効かない。**
   pretty は「最終行に1語だけ残さない」調整で、長い本文向け。
   2〜3行で終わる短い要素は balance（行の長さを均等に割る）でないと直らない。
   ⚠️ 逆に長い本文に balance を当ててはいけない（ブラウザ側で行数上限があり無視される／重い）。
     目安＝60字より短い見込みの要素は balance、それ以上は pretty。
   ========================================================================== */
dt, dd, summary,
.step-cap, .btn_sub, .cta-assure, .fs_lg, .fs_xl,
.assure-list li, .incl-col li, .ms-legend li, .check-list li,
.cost-card .mf-note, .vcap, figcaption{
  text-wrap: balance;
}

/* §128d PC向けに入れた <br> が、狭い幅で孤立行を作る ── 2026-08-11
   balance/pretty は <br> をまたいで調整できない。<br> で区切られた各segmentが
   さらに折り返して、最後に1〜2文字だけ残る（実測：.lead が480pxで1.9字、.step-cap が320pxで1字）。
   → スマホでは <br> を無効化して、行分割をブラウザに全部任せる。
   ⚠️ FVの見出し（.fv-title）とフッターの <br> は消さない＝あちらは意図した2行構成。
   ⚠️ .step-cap の「→」は行頭に来る意味があるので、崩れる 360px 以下だけ外す。 */
@media screen and (max-width: 820px){
  .lead br{ display: none; }
}
@media screen and (max-width: 360px){
  .step-cap br{ display: none; }
}

/* ==========================================================================
   §129 サンクスの「相場」をヒーロー内へ畳む（thanks.html）── 2026-08-12
   このページの唯一の仕事は「写真を送ってもらう」こと。ところが相場が本文の先頭に
   306px の白ボックスで座っていたため、写真ボタンが 1045px（390px幅・実測）まで下がり、
   初回画面に一度も現れなかった。
   ★相場は消さない（入力への回答なので、無いと「金額を教えてくれない」ページになる）。
     受付完了と同じ紺ブロックに畳み込んで、次の行動を上へ引き上げる。
   ⚠️ ここで使う黄は --color-gold(#F5B300)。--color-yellow は大面積用サンドに
      上書きされている罠なので使わない（§120）。
   ========================================================================== */
.tx-hero .tx-price{
  background: transparent; border: 0; padding: 2.2rem 0 0;
  margin: 2.4rem auto 0; max-width: 44rem;
  border-top: 1px solid rgba(255,255,255,.20);
}
.tx-hero .tx-price-l{ color: var(--color-gold); }
.tx-hero .tx-price-v{ color: #fff; font-size: clamp(2.8rem, 6.6vw, 3.8rem); margin:.5rem 0 .3rem; }
.tx-hero .tx-price.is-noprice .tx-price-v{ color:#fff; font-size: clamp(1.7rem,3.8vw,2.2rem); }
.tx-hero .tx-price-scope{ color:#C3D0DD; font-size:1.36rem; }
.tx-hero .tx-price-note{
  margin-top:1.3rem; padding:1rem 1.3rem; background: rgba(255,255,255,.08);
  color:#CBD6E1; font-size:1.24rem; line-height:1.8; text-align:center;
}
.tx-hero .tx-price-note b{ color:#fff; }

/* 本文の先頭が「次にやること」になったので、上に開いていた余白を殺す */
.tx-body > .tx-next:first-child{ margin-top: 0; }

/* ==========================================================================
   §130 「このあとの流れ」の現在地を、文字でなく図で示す ── 2026-08-12
   旧実装は①の説明文の中に「いまここ」と書いてあるだけで、図として読めなかった。
   3段階に分ける：①済（✓・紺）／②いまここ（ゴールドの面）／③〜⑤これから（薄い）。
   ●の中心に縦のコネクタを通して「上から下へ進む」ことを形で示す。
   ⚠️ バッジ・コネクタにオレンジを使わない。オレンジは押せるもの専用の行動色（§101）。
      ここは押せないので "読ませる" 色＝ゴールドの面＋紺文字を使う。
   ⚠️ 角丸チップ＋落ち影＋傾きの3点セットは使わない（AIの指紋・§105）。平らな面で塗る。
   ========================================================================== */
.tx-steps li{ position: relative; border-bottom: 0; padding: .75rem 0; }
/* ●の中心（width 2.8rem の半分＝1.4rem）に縦線を通す。最後の1つには引かない */
.tx-steps li:not(:last-child)::before{
  content:""; position:absolute; left:1.4rem; transform: translateX(-1px);
  top: 3.4rem; bottom: -.35rem; width:2px; background:#D8CCB6;
}
.tx-steps li.is-done::before{ background: var(--color-navy); }

.tx-steps li.is-done .ts-n{ background: var(--color-navy); color:#fff; font-size:1.6rem; }
.tx-steps li.is-now  .ts-n{ background: var(--color-gold); color: var(--color-navy); }

/* 現在地だけ見出しを1行に保ち、その行末にバッジを並べる */
.tx-steps li.is-now .ts-t b{ display:inline; }
.ts-badge{
  display:inline-block; margin-left:.7rem; padding:.16em .7em;
  background: var(--color-gold); color: var(--color-navy);
  font-size:1.18rem; font-weight:900; letter-spacing:.04em; white-space:nowrap;
}
.ts-d{ display:block; font-size:1.34rem; line-height:1.7; color:#6E6558; margin-top:.2rem; }
.tx-steps li.is-now .ts-d{ color:#4A4237; }
/* これからの3つは薄く落として、済んだ①と いまここ②を浮かせる */
.tx-steps li:not(.is-done):not(.is-now) .ts-t b{ color:#7C7365; }
.tx-steps li:not(.is-done):not(.is-now) .ts-d{ color:#8A8172; }

/* ==========================================================================
   §131 写真フォームの「1／2」を実体に一致させる（photo.html）── 2026-08-12
   旧実装は上部に「STEP 1／2」と書いてあるだけで、STEP 2 の表記がページ内に
   1つも無かった（grepで0件）。しかも2つ目にあたる「だいたいの広さ」は
   390px幅で 807px＝初回画面の外にあり、スクロールするまで存在に気づけない。
   → 見出しで「入力は2つだけ」と宣言し、各ブロックに 1 / 2 の番号を実際に振る。
   ⚠️ 3つ目（気になっていること）は任意なので番号を振らない。振ると「3つある」に見える。
   ========================================================================== */
.ph-step{ color: var(--color-navy); font-size:1.3rem; letter-spacing:.06em; font-weight:800; }
.ph-step b{ color: var(--color-navy); font-size:1.5rem; font-weight:900; }
.ph-num{
  flex:none; width:2.6rem; height:2.6rem;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--color-navy); color:#fff;
  font-family:'Oswald', var(--font-sans), sans-serif; font-size:1.5rem; font-weight:600;
}
/* 番号ラベルを足したぶん、写真の選択枠との間に息を入れる */
.ph-label + .ph-drop{ margin-top: 1.1rem; }

/* ==========================================================================
   §132 サンクスページの追従CTA（thanks.html）── 2026-08-12
   相場をヒーローに畳み、安心材料を下げてもなお、写真ボタンの上端は390px幅で
   807px＝初回画面（実効664px・推定）の外に残る。ヒーロー(531px)を削らない限り
   構造的に入らないので、LP本体と同じ追従CTAで解く。
   ⚠️ 本体の写真ボタンが見えているあいだは出さない（同じボタンが2つ見えると迷う）。JSで制御。
   ⚠️ オレンジを使ってよい唯一の条件＝「押せるもの」だから（§101）。
   ⚠️ 角丸・落ち影の3点セットは使わない。平らな面＋下だけの影で浮きを作る。
   ========================================================================== */
.tx-sticky{
  position: fixed; left:0; right:0; bottom:0; z-index:60;
  background:#fff; border-top:1px solid #E0D4BF;
  padding:.9rem 1.2rem calc(.9rem + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 26px -20px rgba(27,58,87,.9);
}
.tx-sticky[hidden]{ display:none; }
.tx-sticky-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  padding:1.25rem 1.2rem; text-decoration:none; text-align:center;
  background: var(--color-cta); color:#fff; box-shadow:0 4px 0 var(--color-cta-dark);
}
.tx-sticky-btn b{ font-size:1.68rem; font-weight:900; }
/* ⚠️ オレンジの上に 18.66px 未満の文字を置かない規則（§101）。
   12px相当の小ラベルは白だと 3.39:1 で落ちるので、面を深いオレンジにして4.78:1を確保する。 */
.tx-sticky-btn small{ font-size:1.18rem; font-weight:800; background: var(--color-cta-dark);
  padding:.1em .6em; margin-top:.15rem; }
/* 追従バーの高さぶん、最後のコンテンツが隠れないように床を上げる */
.thanks-body{ padding-bottom: 8.6rem; }
@media (min-width: 821px){
  .tx-sticky{ left:auto; right:2rem; bottom:2rem; width:30rem; border:0; padding:0; box-shadow:none; }
  .thanks-body{ padding-bottom: 0; }
}

/* ==========================================================================
   §133 コントラストの回収（thanks / photo）── 2026-08-12
   監査スクリプトで実測して見つけた、AA不合格の実在バグ。目分量で色を決めず、
   「その背景で目標比をちょうど超える色」を計算して当てている。
   ========================================================================== */

/* ★最重要：法務3ページへのリンクが紺地に黒文字（1.79:1）で、ほぼ読めなかった。
   原因はタイヨート由来の 879行 `footer .content_area p a{ color:#000 }`。
   詳細度 (0,1,3) が `.tx-foot-links a` (0,1,1) に勝っていた。
   ⚠️ 色は正しかった（#B9C6D4 は紺の上で 6.76:1 ＝合格）。直すのは詳細度だけ。
   ⚠️ 特商法・プライバシーポリシーは広告審査で参照されるリンクなので、読めないのは実害。 */
.tx-foot .content_area p.tx-foot-links a{ color:#B9C6D4; }

/* 受付番号のラベル。12px/w800 で不足していた。
   ⚠️ 一度 #90A3B6 を当てて外した。背景を紺(#1B3A57)だと思って計算したが、
      .tx-id は「紺＋白8%」の面（≒#33506B）なので、その上では 3.56 にしかならない。
      半透明の面が重なっている場所は、畳んだ後の色で計算すること。→ 4.54:1 */
.tx-hero .tx-id-l{ color:#A5B8CB; }

/* §130で「これから」を薄くしたが、薄くしすぎて 3.88 / 3.19 と基準割れしていた。
   見出しと説明の濃淡差は保ったまま、両方とも 4.5:1 を超える濃さに引き上げる。 */
.tx-steps li:not(.is-done):not(.is-now) .ts-t b{ color:#6B6054; }
.tx-steps li:not(.is-done):not(.is-now) .ts-d{ color:#71685A; }

/* 薄いグレーの面に白文字＝1.68:1 で数字が読めなかった。
   面の薄さ（＝まだ先の話、という印象）は保ち、文字だけ濃くする。 */
.tx-steps li:not(.is-done):not(.is-now) .ts-n{ color:#4A4237; }
.tx-btn.is-disabled{ color:#4A4237; }
.tx-btn.is-disabled::after{ color:#4A4237; }

/* オレンジ地の白文字。17.2px/w900 は「大文字扱い」の18.66pxに届かず 4.5 が要るのに 3.39。
   §101の鉄則「オレンジの上に18.66px未満の文字を置かない」の取りこぼし。
   → 主ラベルは19pxに上げて大文字扱い（3:1）にし、小ラベルは深いオレンジの面に載せる。 */
.tx-btn b{ font-size:1.9rem; }
.tx-btn small{ background: var(--color-cta-dark); padding:.12em .6em; }
.tx-btn.line small{ background:#049544; }
.tx-btn.is-disabled small{ background:#B4AA9A; color:#473F34; }   /* #B4AA9A の上で 4.51:1 */

/* §133b 狭い幅の取りこぼし ── 2026-08-12（320/360pxの実測で発見）
   ⚠️ このCSSは rem 基準なので、320px幅では 1.9rem が 16.8px に縮み、
      「18.66px以上の太字＝大文字扱い（3:1でよい）」の条件から外れて 4.5:1 が要求され、
      オレンジ地の白文字 3.39 が不合格になる。remだけで書くと幅によって基準が変わる。
   → px で下限を敷いて、全幅で大文字扱いを保証する。 */
.tx-btn b, .tx-sticky-btn b{ font-size: max(1.9rem, 19px); }

/* ヘッダーの地域タグが360pxで「え」1文字だけ次行に落ちていた（§128の取りこぼし）。 */
.brand-tag{ text-wrap: balance; }

/* §133c 写真フォームの取りこぼし ── 2026-08-12（実測で発見）
   ⚠️ どちらも「§101で一度解いた問題が、§126で新しい部品を作ったときに踏襲されなかった」もの。
      新しいセクションを書くときは、同じ役割の既存解を先に探すこと。 */
/* 「任意」バッジ：§101で 2.24→#6B6560 と解いてあったのに、§126で #8A8378 と書き直され 3.75 に戻っていた */
.ph-any{ background:#6B6560; }
/* 受付番号ラベル：紺地に #8FA2B5 で 4.47（要4.5）とわずかに不足 → 4.53 */
.ph-idbar-l{ color:#90A3B6; }

/* ==========================================================================
   §134 入力欄が親の枠からはみ出す ── 2026-08-12（実機のスクショで発覚）
   `.ph-block textarea` は width:100% だが box-sizing が content-box のままで、
   左右 padding 12px×2 ＋ 枠線 2px×2 がそのまま外に加算され、
   **全幅で27px、親カードの内側からはみ出していた**（320/375/390/414/768pxで実測）。
   ⚠️ このCSSは `*{box-sizing:border-box}` を持っていない（個別指定の集まり）。
      新しく width:100% の入力欄を足すときは、その都度 border-box を宣言すること。
   ⚠️ ページ全体の横あふれ監査では見つからない（親の中で溢れてもページ幅は増えない）。
      → qa/audit.mjs に「親の内側からのはみ出し」検出を足した。
   ========================================================================== */
.ph-block textarea,
.ph-block input[type="text"],
.ph-block input[type="tel"],
.ph-block input[type="email"]{ box-sizing: border-box; }

/* ==========================================================================
   §135 公式LINEの導線 ── 2026-08-12
   ★置き場所の判断（Koseiの「写真の後にLINEを出すべきでは？」への回答）：
     写真を送り終えた時点で、こちらが必要な情報は全部揃っている
     （連絡先＝LPフォーム／写真と広さ＝写真フォーム）。
     ＝**ここでの離脱は何も失わない**ので、LINEを勧めるのに最も安全な場所。
     逆に thanks.html で「写真を送る／LINEで受け取る」を並列に置くと、
     LINEを選んだ人は写真を送らずに終わる＝一番欲しいものが取れない。
   ⚠️ LINE_URL が空のあいだは、どちらの導線も**表示しない**。
      「（準備中）」の押せないボタンを置くと、隣の本命ボタンの重みまで下がる。
   ========================================================================== */
.ph-line{ margin-top:1.8rem; background:#E9F3EC; border-left:4px solid #06C755; padding:1.6rem 1.6rem 1.8rem; text-align:left; }
.ph-line[hidden]{ display:none; }
.ph-line-h{ font-size:1.6rem; font-weight:900; color:#155c39; }
.ph-line-p{ margin-top:.5rem; font-size:1.34rem; line-height:1.85; color:#2B4A3A; }
.ph-line-p b{ color:#155c39; }
.ph-line-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  margin-top:1.3rem; padding:1.3rem 1.2rem; text-decoration:none; text-align:center;
  background:#06C755; color:#fff; box-shadow:0 4px 0 #049544;
}
/* ⚠️ 緑地に白の小さい文字は基準を割る。面を深い緑にして確保する（§101のオレンジと同じ手当て）。 */
.ph-line-btn b{ font-size: max(1.9rem, 19px); font-weight:900; }
.ph-line-btn small{ font-size:1.18rem; font-weight:800; background:#04803A; padding:.12em .6em; margin-top:.15rem; }

/* LINEを隠したときに、写真ボタンが半分幅のまま取り残されないようにする */
.tx-btns.is-single{ grid-template-columns:1fr; }

/* §135b LINEボタンの面を一段深くする ── 2026-08-12
   ⚠️ LINEブランド標準の #06C755 に白文字は **2.26:1**（19px太字でも要3.0に届かない）。
      白文字はLINE側の指定なので動かさず、**面だけ深くして** 3.90:1 にした。
      #049544 は既にこのページで影として使っている色＝新しい色を増やしていない。
   ⚠️ 小ラベル（11.8px）は 4.5 が要るので、さらに深い #04803A の面に載せる（5.06:1）。 */
.tx-btn.line{ background:#049544; box-shadow:0 5px 0 #04803A; }
.ph-line-btn{ background:#049544; box-shadow:0 4px 0 #04803A; }

/* §135c hidden が効かない／準備中の色が緑に負ける ── 2026-08-12（自分で作った回帰）
   ⚠️⚠️ `.tx-btn` は display:flex を持つので、**hidden 属性を付けても消えない**。
      （[hidden] のUA既定 display:none は、後から書いた display:flex に負ける）
      JSで hidden=true にして「消したつもり」になっていた。実測で発覚。
   ⚠️ §135bで `.tx-btn.line` に緑を当てたら、同じ詳細度(0,2,0)で後から書いたぶん
      `.tx-btn.is-disabled` のグレーに勝ってしまい、準備中なのに緑になっていた（2.53:1）。
      → 準備中は詳細度(0,3,0)で明示して勝たせる。 */
.tx-btn[hidden], .ph-line[hidden]{ display:none; }
.tx-btn.line.is-disabled{ background:#CFC7BA; box-shadow:0 5px 0 #B4AA9A; color:#4A4237; }

/* ==========================================================================
   §136 CTAの作り直し（2026-08-14）── 「押したくなるか」を実測から決め直す
   ------------------------------------------------------------------------
   ★きっかけ：Koseiの「オレンジに黒文字・立体の四角は本当に押したくなるのか」。
     実測したら、疑いは当たっていた上に、原因の1つはデザインではなくCSSのバグだった。

   【実測1】自社CTAの現状（node qa/cta.mjs 390 / 1280）
     ・中間CTA .btn-01 a  … 面 #E8621F ／ 文字 #000000（黒）／ 対比6.2
     ・FVフォーム #to_step2 … 面 #E8621F ／ 文字 #FFF ／ 対比3.39 ／ 角丸50px
     ・追従バー .sc-form   … 面 #C24E0C（別のオレンジ）／ 対比4.78 ／ 角丸0
     → 同じ「申し込む」に オレンジ2色・文字色2色・角丸3種類 が走っていた。

   【原因】黒文字はデザイン判断ではなくバグ。CDPで宣言元を照会した結果：
     .cv .bg-03, .cv .bg-03 *{ color: var(--color-text) }  ← 3432行
     が、白いカードの中身を黒くする目的で書かれているのに、
     カードの中にあるオレンジのボタンの <p> まで刺さっていた。
     .btn-01 a の color:#fff !important は「親」の指定なので、
     子に直接当たっているこのルールには勝てない。

   【実測2】他社が実際に何を出しているか（node qa/cta_rival.mjs <URL> 390）
     カーネクストLP #FD5C32 白 対比3.11 / 角丸0 / border-bottom 5px
     カーネクスト本体 電話  グラデ #FE7C3C→#F93936 白 / WEBは青 #1472CB→#1860BE
     タウンライフリフォーム #DB3B00 白 対比4.53 / ピル / box-shadow 0 3.75px 0 #A02B00
     リショップナビ #5DCE4F 白 対比2.02 / 角丸8px
     ホームプロ     #68B703 白 対比2.51 / ピル
     京企画(クロス直) #404040 白 対比10.37
     → 10件測って **白文字が9件・黒文字は0件**。黒×オレンジは道路工事看板の警戒色。
     → 対比の実勢は 2.0〜4.5。「対比が高いほど良い」ではない（黒文字の6.2は誰もやらない）。

   【実測3】色の孤立度（node qa/cta_isolation.mjs 390）
     CTAオレンジはページ全体の 1.8% しか占めていない。地は白35%・サンド・紺。
     → **色相を緑に変える理由は無い。**オレンジは既に十分孤立している。
       （リフォーム一括系は緑が多いが、タウンライフは#DB3B00の橙赤で成立している）

   【実測4】色の決定（node qa/cta_color.mjs）
     現行 #E8621F  白3.39（大文字のみ可）／ テラコッタとのΔE 24.6
     現行 #C24E0C  白4.78（全サイズ可）  ／ テラコッタとのΔE 18.9  ← 最も近い
     採用 #DB3B00  白4.53（全サイズ可）  ／ テラコッタとのΔE 24.0
     → §102の「オレンジのまま白文字4.5:1にすると朱赤に寄ってテラコッタと衝突する」は
       実測すると誤り。#DB3B00 は全サイズ合格かつ、いま使っている #C24E0C より
       テラコッタから遠い。**オレンジを2色に割る必要そのものが無くなる。**

   【打ち手】色相は変えない。変えるのは「一貫性」と「押した感」の2つだけ。
     ① 文字は全部白。黒を撲滅する
     ② オレンジは #DB3B00 の1色に統一（#E8621F と #C24E0C を廃止）
     ③ 角丸は 10px に統一（追従バーだけは画面幅いっぱいなので 0 のまま）
     ④ 立体は「硬い下端」1本に絞る。ぼかし影との二重掛けをやめる
        （他社も片方だけ。ぼかし影が乗ると"浮いた板"に見えて押し込む感が消える）
     ⑤ ★:active を実装する。いまは :hover しか無く、スマホには hover が存在しない
        ＝タップしても画面が一切反応しない。しかも :hover は margin-top:3px で
        レイアウトシフトしていた。transform に置き換える
   ========================================================================== */

:root{
  --color-cta:      #DB3B00;   /* 白文字4.53＝全サイズでAA。テラコッタ(#C0392B)とΔE24.0 */
  --color-cta-dark: #A02B00;   /* 立体の下端 */
}

/* ---------- ① 文字は白。黒を撲滅する（バグの回収） ----------
   3432行の .cv .bg-03 * が子まで刺さっているので、同じ「子まで刺さる」形で上書きする。 */
.cv .bg-03 .btn-01 a,
.cv .bg-03 .btn-01 a *,
.btn-01 a, .btn-01 a *{ color: #fff !important; }

/* ---------- ② オレンジを1色に統一 ---------- */
.sticky-cta .sc-form{ background: var(--color-cta) !important; }
.sticky-fab{ background: var(--color-cta) !important; }

/* ---------- ③ 角丸を10pxに統一（FVのピル50px → 10px） ---------- */
.step1_btn_box .submit_btn,
.submit_btn_box .submit_btn,
.submit_btn_box input.submit_btn,
.submit_btn_box button.submit_btn{ border-radius: 10px; }

/* ---------- ④ 立体は「硬い下端」1本。ぼかし影の二重掛けをやめる ---------- */
.btn-01 a,
.submit_btn_box .submit_btn,
.step1_btn_box .submit_btn{
  border-bottom: 5px solid var(--color-cta-dark) !important;
  box-shadow: none !important;
  transition: transform .08s ease-out, border-bottom-width .08s ease-out, filter .15s ease;
}

/* ---------- ⑤ 押した感（:active）。スマホに hover は無い ---------- */
/* まず :hover のレイアウトシフト（margin-top:3px）を打ち消す */
.btn-01 a:hover,
.submit_btn_box .submit_btn:hover,
.step1_btn_box .submit_btn:hover{
  margin-top: 0;
  border-bottom-width: 5px;
  filter: brightness(1.05);
}
/* 実際に沈ませる。下端5px→1px と同時に4px下げる＝厚みが潰れて見える */
.btn-01 a:active,
.submit_btn_box .submit_btn:active,
.step1_btn_box .submit_btn:active,
.sticky-cta .sc-form:active,
.sticky-cta .sc-tel:active,
.sticky-fab:active{
  transform: translateY(4px);
  border-bottom-width: 1px !important;
  filter: brightness(.96);
}
.sticky-cta .sc-form:active,
.sticky-cta .sc-tel:active{ transform: none; filter: brightness(.88); }  /* バーは沈むと隙間が出る */
.sticky-fab:active{ transform: scale(.96); border-bottom-width: 3px !important; }

/* タップ時の灰色ハイライトを消す（押した感を自前のものだけにする） */
.btn-01 a, .submit_btn_box .submit_btn, .step1_btn_box .submit_btn,
.sticky-cta a, .sticky-fab{ -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce){
  .btn-01 a, .submit_btn_box .submit_btn, .step1_btn_box .submit_btn{ transition: none; }
}

/* ---------- ⑥ 中間CTAにも進行方向の記号を出す（FVボタンには既に▶がある） ---------- */
.btn-01 a p.fs_xxl::after{
  content: "▶";
  font-size: .62em;
  margin-left: .5em;
  vertical-align: .12em;
}

/* ==========================================================================
   §139 単語の途中割れの修正（2026-08-15・最終監査で目視発見）
   ------------------------------------------------------------------------
   「無料でお見／積りを頼む」「床とカ／ーテンレール」「フロ／アタイル」など、
   カタカナ複合語・熟語が行の途中で割れていた9箇所をHTML側で <span class="nb"> に固めた。
   .nb はこれまで .ce-note / .cta-assure 配下にしか定義がなく（=そこ以外では効かない）、
   グローバル定義がなかったのでここで足す。
   inline-block は nowrap と違い、長すぎる場合は塊ごと次の行に落ちるので横あふれしない。
   ⚠️ ボタン主コピーは nb でなく文言を短縮した（「無料でお見積りを頼む」→「無料見積りを頼む」8字）。
      10字+▶ は390pxのボタン内幅258pxに収まらないため。 */
.nb{ display: inline-block; }

/* §139b 床レール見出しの折り位置固定（上の§139の続き）
   4708行の .trigger .content_ttl br{display:none}（スマホ）に対し、
   .keep を付けた br だけはスマホでも生かす。詳細度 0,3,1 > 0,2,1 で常に勝つ。 */
.trigger .content_ttl br.keep{ display: inline; }

/* §139c 床レール見出し：3行目「同じ職人にまとめて頼めます」（13字）が
   スマホの全幅で1行に入るよう、文字サイズを幅に追従させる（§128の思想＝1幅ずつ直さない）。
   (100vw−左右padding32px)÷13.4字。390px→26.7px（13字=347px<358px✅）・320px→21.5px（279px<288px✅）。
   PCは既存サイズのまま（このメディア内のみ）。 */
@media screen and (max-width: 820px){
  .trigger.plx:not(.problem) .content_ttl{ font-size: min(2.9rem, calc((100vw - 3.2rem) / 13.4)); }
}

/* ==========================================================================
   §140 「どこに頼めばいいか分からない」セクション ── 2026-08-13 新設
   実績帯の直後、問題提起（タイミング6枚）の手前に入れた自分ごと化ブロック。

   ★器は新規に作らず `.ms-why`（ビジョン）と同じ language を使う：
     白カード＋左に紺の太罫＋点線区切りの締め。
     このLPで「立ち止まって読ませる一段」はこの形、と決まっているので揃える。
   ⚠️ 短く保つ。料金は「上から2番目」が設計の柱で、ここが伸びると料金到達が遅れる。
     項目を4つ以上に増やさない。増やすなら他を削る。
   ⚠️ チェック印は ✓ にしない。✓ は「当社が提供するもの」に使っている記号で、
     ここは「あなたに当てはまるか」＝意味が逆。中抜きの四角にする。
   ========================================================================== */
.whom{ margin-top: 1rem; }
.whom-card{
  max-width: 78rem; margin: 2.6rem auto 0; padding: 2.6rem 2.6rem 2.4rem;
  background: #fff; border: 1px solid #E0D4BF; border-left: 6px solid var(--color-navy);
  border-radius: 4px 12px 12px 4px; box-shadow: 0 16px 32px -26px rgba(27,58,87,.6);
  text-align: left;
}
/* 問いかけはここ（チェック項目の直前）。見出しでは問わない＝§140のコメント参照 */
.whom-q{
  margin: 0 0 1.4rem; font-size: 1.5rem; font-weight: 800;
  color: var(--color-navy); text-wrap: balance;
}
.whom-list{ list-style: none; margin: 0; padding: 0; }
.whom-list li{
  position: relative; padding-left: 3.2rem; margin-bottom: 1.2rem;
  font-size: 1.55rem; line-height: 1.85; color: #3E4A57; font-weight: 700;
  text-wrap: balance;
}
.whom-list li:last-child{ margin-bottom: 0; }
/* 中抜きの四角＝「自分で当てはめる」ための印。✓（当社が提供する）とは別の記号にする */
.whom-list li::before{
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.7rem; height: 1.7rem; border: 2px solid var(--color-navy);
  border-radius: 4px; opacity: .55;
}
.whom-close{
  text-wrap: balance;
  margin: 2rem 0 0; padding-top: 1.8rem; border-top: 1px dashed #D8CCB6;
  font-size: 1.55rem; line-height: 1.9; color: #3E4A57;
}
.whom-close b{ color: var(--color-navy); font-weight: 800; }

@media screen and (max-width: 820px){
  /* PC向けに入れた <br> が、狭い幅では孤立行を作る。
     text-wrap は <br> をまたいで調整できないため（→ §128d と同じ症状）、スマホでは外す。
     実測：締めは375pxで最終行2.9字／見出しは390pxで3.1字・414pxで2.1字だった。 */
  .whom-close br{ display: none; }
  /* ★§147 2026-08-25：ここには .whom .content_ttl br{display:none} があった。
     マーカー句が「どこに頼／めばいいか」と2行に割れる原因だったので外した。
     代わりに見出し側に <br class="sp-br"> を足し、スマホでは3行に割っている
     （1行目=壁紙の張り替え、／2行目=どこに頼めばいいか／3行目=分からない。）。
     ⚠️ display:none に戻すとマーカーがまた割れる。 */
  .whom-card{ margin-top: 2rem; padding: 1.9rem 1.7rem 1.7rem; }
  .whom-q{ font-size: 1.4rem; margin-bottom: 1.1rem; }
  .whom-list li{ font-size: 1.42rem; padding-left: 2.8rem; margin-bottom: 1rem; }
  .whom-list li::before{ width: 1.5rem; height: 1.5rem; }
  .whom-close{ font-size: 1.42rem; margin-top: 1.6rem; padding-top: 1.4rem; }
}

/* ==========================================================================
   §141 黄マーカーの帯が文字の下にはみ出していた ── 2026-08-13
   Koseiの指摘：「ラインがちゃんと引けなかったり」。

   原因＝帯を `linear-gradient(transparent 56%, gold 56%)` で引いていたこと。
   この % は**インラインボックス（フォントのascent+descent＝約1.44em）の高さに対する割合**で、
   文字の見た目の下端（ベースライン≒1.16em）とは一致しない。
   実測（PC・font-size 46px）：箱の高さ66px／帯は箱の上から37px〜66px（＝下端まで）。
   一方**文字の下端は箱の上から50px**。つまり**帯が文字より16px（0.35em）下まで伸びていた。**
   短い語（「事例」「流れ」＝2文字）ほど、その余りが目立つ。

   対処＝帯を em で置く。`background-size` と `background-position` を em にすると
   **文字サイズにだけ追従し、行の高さやフォントの箱の比率に左右されない。**
     ・0.74em の位置から 0.44em の厚み ＝ 下端 1.18em ≒ ベースライン
   ⚠️ FVの「手数料」（反転マーカー＝紺の面に黄文字）はここに含めない。
     あれは文字全体を覆うのが正しく、6%〜94%で意図通り。
   ⚠️ 帯の厚み・位置を触ったら、必ず「文字の下端」と「帯の下端」の差を実測すること
     （目視では10px級のズレでも"なんとなく変"としか分からない）。
   ========================================================================== */
/* ⚠️ !important が要る。既存の `.fv-title .hl` などが `background:` の**ショートハンドに !important**を
     付けているため（3699行など）、longhand を !important 無しで書くと size/position が auto に戻されて効かない。
     一度これで `.hl` と `.marker_y` だけ直らず、`background-size: auto` のまま残った。
   ⚠️ 色は各マーカーの現行値をそのまま使う（実測：見出し系 #F5B300 ／ 本文の .marker_y は #FFE14D）。
     ここで色を統一しようとすると、意図せずページの黄が1色に潰れる。 */
.content_ttl .text-primary,
.prob-ttl .text-primary,
.faqs .content_ttl .text-primary,
.fv-title .hl,
.proof-lead .hl,
.ms-why-close .mk-line{
  background-image: linear-gradient(#F5B300, #F5B300) !important;
  background-repeat: no-repeat !important;
  background-size: 100% .44em !important;
  background-position: 0 .74em !important;
}
.marker_y{
  background-image: linear-gradient(#FFE14D, #FFE14D) !important;
  background-repeat: no-repeat !important;
  background-size: 100% .42em !important;
  background-position: 0 .76em !important;
}
/* FAQ見出しは地が濃いので白文字＋帯なし（§の既存判断を維持） */
.faqs .content_ttl .text-primary{ background-image: none; }

/* ==========================================================================
   §142 固有名詞と意味のかたまりを、改行でちぎらない ── 2026-08-13
   Koseiの指摘：「神奈川県の佐藤イン／テリアが施工します」
                「職人1組なので受けられ／る件数に限りがあります」

   日本語は既定でどこでも改行できるので、放っておくと固有名詞の途中でも割れる。
   自動で防ぐ方法は無い（`word-break: keep-all` はCJKでは効かず、むしろ溢れる）。
   → **割ってはいけないかたまりだけ、明示的に nowrap で囲む。**
   ⚠️ 長い句を丸ごと nowrap にすると今度は横にあふれる。
     「意味のかたまり」単位で区切ること（実測で1かたまりが列幅を超えないこと）。
   ========================================================================== */
.nw{ white-space: nowrap; }

/* ==========================================================================
   §143  FVサブ見出し（.fv-claim）── 2026-08-22 新規。旧 .fv-sub は使わない
   --------------------------------------------------------------------------
   ★ここに !important は1つも無い。新クラスなので旧ルールが当たらないため。
     もし将来 !important を足したくなったら、それは .fv-sub の負債を引き継いだ合図。
   ★構造：flex + flex-wrap。各パートを flex:none の塊にすることで
     【語の途中では絶対に割れない】。狭い幅では塊ごと改行する。
     旧実装が「かか/りません」で割れていたのは、テキストが1つの塊になっていなかったため。
   ★配色：紺地＋黄文字＝下の .fv-freebar「すべて0円」と同じ体系。
     大見出しの「直接」はマーカー（別体系）なので、装飾が重複せず階層が保たれる。
   ========================================================================== */
.fv-claim{
    margin: 0 0 1rem;
    text-align: left;
}
.fv-claim .fc-in{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* ★2026-08-23 column-gap を 0 に。サブが「〜職人が、」と読点で切れる1文になったため、
       .4em の間隔が読点と二重になって「、␣␣手数料」と不自然な空きが出る（パネル4人が指摘）。
       読点そのものが視覚的な間になるので gap は不要。⚠️ 読点を持たない文言に戻すときは gap を戻すこと。 */
    column-gap: 0;
    row-gap: .25em;
    font-size: 1.85rem;          /* 基準。幅ごとの調整は下の @media */
    font-weight: 800;
    line-height: 1.35;
}
.fv-claim .fc-in > *{ flex: none; }   /* 塊で折り返す＝語の途中で割れない */

.fv-claim .fc-badge{
    background: var(--color-navy);
    color: #F5B300;               /* 実体の黄。--color-yellow はサンド色に上書き済みで使えない */
    -webkit-text-fill-color: #F5B300;
    font-weight: 900;
    font-size: 1.12em;
    letter-spacing: .01em;
    padding: .12em .5em;
    border-radius: 4px;
}
.fv-claim .fc-text{
    color: var(--color-navy);
    -webkit-text-fill-color: var(--color-navy);
    font-weight: 800;
}

@media screen and (max-width: 900px){
    .fv-claim .fc-in{ font-size: 1.7rem; }
}
@media screen and (max-width: 430px){
    .fv-claim .fc-in{ font-size: 1.5rem; }
}
@media screen and (max-width: 360px){
    .fv-claim .fc-in{ font-size: 1.38rem; }
}

/* ==========================================================================
   §144（2026-08-24）表示欠陥の修正2件。文言は1文字も変えていない。
   ────────────────────────────────────────────────────────────
   ① 吹き出しの▼が箱の中に埋まって文字に重なる
      原因＝ .balloon:before/:after が【箱の上端からの固定px】(top:70px/76px、
      .fv_balloon は 47px/52px)で置かれていたこと。箱が1行(64px)のときは箱の外に出るが、
      320pxで2行(98.2px/100px)になると▼が箱の中に入り、2行目の文字の上に乗る。
      実測（node で全幅計測）:
        .fv_balloon    320px 箱98.2 ▼51〜71 → 埋没 ／ 390px 箱64.6 ▼51〜71 → 正常
        .balloon--wide 320px 箱100  ▼74〜100 → 埋没 ／ 390px 箱64 → 正常
      → 上端固定をやめ、【箱の下端から】置く。これで箱が何行になっても関係が変わらない。
      ⚠️ 絶対配置の bottom は padding box 基準なので、border 4px 分を織り込んだ値にしてある。
         1行のときの見た目を1pxも変えないように、現状の実測値から逆算した：
           .balloon      ▼下端 94/100（border box）・padding box 下端 60 → bottom -34 / -40
           .fv_balloon   ▼下端 66/71  （border box）・padding box 下端 60.6 → bottom -5.4 / -10.4
   ② 320/360pxで「かんたん30／秒・無料見積り」と数字の途中で割れる
      → index.html 側で2つの <b class="fvb-part"> に分け、flex の flex:none で塊にする。
      ⚠️ .main .balloon span:first-child が (0,3,1) なので、
         こちらも同じ強さの .main .fv_balloon span.fvb-in で受ける（!important を積まない）。
   ────────────────────────────────────────────────────────────
   ③ H1の黄マーカーが打ち消し線に見える（ペルソナ6人中1人が指摘・実測で裏取り）
      実測：フォント40px／要素高58px。帯は 0 .74em(29.6px) から .44em(17.6px)＝29.6〜47.2px。
      字の下端よりかなり上から始まり、字の胴を横切っていた。
      → 帯を字の下端まで下げて薄くする（.92em から .34em ＝36.8〜50.4px）。
      5段階を実物にあてて拡大表示で比較し、B案を採用（現状/A/B/C/Dの5枚は shots/hlcand_*.png）。
      ⚠️ 5203行の規則は !important なので、同じ3セレクタに対して !important で上書きする。
   ========================================================================== */

/* ① ▼を箱の下端から置く（箱の行数に依存しなくなる） */
.balloon:before{ top: auto; bottom: -34px; }
.balloon:after { top: auto; bottom: -40px; }
.fv_balloon:before{ top: auto; bottom: -5.4px; }
.fv_balloon:after { top: auto; bottom: -10.4px; }

/* ② 「かんたん30秒・」「無料見積り」を語の途中で割らない */
.balloon .fvb-in{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}
.balloon .fvb-part{ flex: none; font-weight: inherit; }
.main .fv_balloon span.fvb-in{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
}
.fv_balloon .fvb-part,
.fv_balloon .fvb-sep{ flex: none; font-weight: inherit; }
/* 320/360pxでは2行になる。中黒が行末に取り残されると見た目が悪いので、その幅だけ消す
   （実測：375px以上は1行に収まるので中黒は残る）。 */
@media screen and (max-width: 374px){
    .fv_balloon .fvb-sep{ display: none; }
    /* 中黒を消したぶん、1行に収まる幅（360px）で語がくっついて読めるのを防ぐ */
    .main .fv_balloon span.fvb-in{ column-gap: .5em; }
}

/* ③ H1の黄マーカーを字の下端に下げる（打ち消し線に見えないように） */
.fv-title .hl,
.proof-lead .hl,
.ms-why-close .mk-line{
    background-size: 100% .34em !important;
    background-position: 0 .92em !important;
}

/* §144④ ヘッダーのシンボル（2026-08-24）
   ⚠️ オレンジのバーは .brand-wm の border-left。マークを左に置くと
      [マーク][バー][文字] の並びになるので、マークとバーが競らないよう間隔を詰める。 */
.brand-mark{ display: block; flex: none; width: 26px; height: 26px; }
header .content_area h1{ gap: 8px !important; }
@media screen and (max-width: 430px){
    .brand-mark{ width: 22px; height: 22px; }
}

/* ==========================================================================
   §154 FVの「0円」シールを大きく・少し下へ ── 2026-08-25（Kosei指示）
   実測：72px @ y32 → 92px @ y55（外接は rotate(-8deg) のぶん104pxになる）

   ★当たり判定は【円】で測ること。外接矩形で測ると回転ぶん大きく出て、
     当たっていないものを「当たり」と誤判定する（実際に一度それで案を捨てかけた）。
   ★実測で分かった上限：これ以上大きく／下にすると、見出し1行目
     「壁紙の張り替え、」（ink 16→326px・y122〜180）の「え、」に重なる。
     104px・top34px の案は実際に「、」を隠した（レンダリングで確認）。
   ⚠️ シールは position:absolute なので、大きくしても他の要素は1pxも動かない
     （§126 のコメントにある「穴の正体はシール」は、position が static だった頃の話）。
   ⚠️ 320/390/430px の3幅で scrollWidth が画面幅と一致することを確認済み（はみ出しゼロ）。
   ========================================================================== */
@media screen and (max-width: 820px){
  .fv-seal{ width: 92px !important; height: 92px !important; }
  .fv-hero > .fv-seal{ top: -6px !important; right: 0 !important; }
  .fv-seal i{ font-size: .95rem !important; line-height: 1.2; }
  .fv-seal b{ font-size: 2.35rem !important; }
  .fv-seal b em{ font-size: 1.25rem; }
}
@media screen and (max-width: 380px){
  .fv-seal{ width: 84px !important; height: 84px !important; }
  .fv-hero > .fv-seal{ top: -4px !important; }
  .fv-seal i{ font-size: .88rem !important; }
  .fv-seal b{ font-size: 2.1rem !important; }
  .fv-seal b em{ font-size: 1.15rem; }
}

/* ==========================================================================
   §155 見出しに「階層」を作る ── 2026-08-25（Kosei指示）
   実測：見出し12本のうち【8本が全部おなじ 29px＋黄マーカー】＝全部強調＝どこも強調でない。
        さらに「私たちを選ぶ、3つの理由」だけ 25px・装飾ゼロで、ページで一番弱い見出しだった。
        原因＝強調が"重要度"でなく"クラス名"で決まっていた
        （.content_ttl .text-primary にはマーカーが付き、.reason-title .rt-brand には付かない）。

   ★方針＝新しい装飾体系を増やさない。黄マーカーは今のまま。
     「ここぞ」の3本にだけ、傾いた紺のラベルを【別の行に】足して山場を作る。
     ・料金の目安        ＝ サジェスト実測で金額が40.9%＝いちばん知りたいこと
     ・なぜ、安くできるのか ＝ 軸そのもの
     ・私たちを選ぶ、3つの理由 ＝ 信頼（Koseiが「センターピン」と言った場所）
   ⚠️ 原則①「1行に装飾体系を2つ以上入れない」。ラベルは見出しと別行なので満たす。
   ⚠️ 手描き風の金の下線は却下。黄マーカーと同じ行に金が2つ並び、原則①を破る（案Dで実測確認）。
   ⚠️ ラベルに【頻度】を書かない（絶対ルール6）。文言はセクションが実際に言っている事実から取る。
   ⚠️ 高さは1本あたり +42px（59→101px 実測）。3本で +126px。
   ========================================================================== */
.ttl-key{ position: relative; }
.ttl-key::before{
  content: attr(data-label);
  display: block; width: fit-content; margin: 0 auto 1.1rem;
  font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; line-height: 1.5;
  color: #FDF8EE; background: var(--color-navy);
  padding: .42rem 1.25rem; border-radius: 3px;
  transform: rotate(-2.5deg);
  box-shadow: 0 7px 16px -9px rgba(22,50,78,.85);
}
/* 「私たちを選ぶ、3つの理由」だけマーカーが無かったので、他の見出しと同じ体系に揃える。
   ★新しい色を持ち込まない。ページ内で既に使っている --color-gold の帯をそのまま使う。 */
.reason-title{ font-size: 2.9rem; }
.reason-title .rt-brand{
  color: var(--color-navy);
  background: linear-gradient(transparent 56%, var(--color-gold) 56%);
  padding: 0 .1em;
}
/* 山場でない見出しは一段下げる＝相対的に「ここぞ」が立つ。
   ⚠️ 消すのではなく差をつける（→ feedback: 色を整理する＝彩度を落とす、ではない）。 */
@media screen and (max-width: 820px){
  .cases .content_ttl,
  .faqs .content_ttl,
  .flow .content_ttl,
  .trigger.problem .content_ttl,
  .trigger .content_ttl:not(.ttl-key){ font-size: 2.6rem; }
  .ttl-key::before{ font-size: 1.2rem; padding: .38rem 1.1rem; }
}

/* ===== CTA直前の約束と、売りつけない一文（2026-08-30 新設）=====
   ★ここはLPで最も重要な約束。「一般相場」ではなく「この家の総額」を返すと明言する。
   ⚠️ .form-note と同じ配色体系に揃えている（帯＋左罫）。新しい装飾体系を足さない
      （LP設計図の6原則①「1行に装飾体系を2つ以上入れない」）。 */
.submit-promise{
  clear: both;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--color-navy);
  background: #fff8e8;
  border-left: 3px solid #E8A33D;
  padding: .9rem 1rem;
  margin: 1.2rem 0 .9rem;
  border-radius: 2px;
}
.submit-promise b{ font-weight: 800; }

/* 売りつけない約束。主張ではなく事実として静かに置く＝強調しすぎない */
.submit-nosell{
  font-size: 12.5px;
  line-height: 1.7;
  color: #4a5568;
  margin: .8rem 0 0;
  padding-left: 1.4em;
  position: relative;
}
.submit-nosell::before{
  content: "✓";
  position: absolute;
  left: 0;
  color: #2E7D32;
  font-weight: 700;
}

/* ===== 送信ボタンの文字が切れないようにする（2026-08-30 追加）=====
   ★input[type=button] は value を折り返せない。既存指定が
     white-space:pre / overflow:clip なので、長い文言は【黙って末尾が消える】。
     audit.mjs の横あふれ検査では検出できない（枠外に出ずに内側で切られるため）。
     実際、2026-08-30に「写真で、自宅の場合の総額を確認する」を入れたとき
     390pxで必要339px/枠278pxとなり「認する」が消えていた。撮って初めて気づいた。
   実測した必要font-size: 320px→16px / 360px→19px / 390px→20px
   → clamp(15px, 4.9vw, 20px) は全幅でこれを下回る。
   ⚠️ STEP1(.step1_btn_box)には効かせない。親で限定している。
   ⚠️ ボタン文言を変えたら qa/btntext.mjs で全幅の収まりを測り直すこと。 */
.submit_btn_box input.submit_btn,
.submit_btn_box button.submit_btn,
.submit_btn_box .submit_btn{
  font-size: clamp(15px, 4.9vw, 20px);
}