@charset "UTF-8";

/* =========================================================
   家CoCoの二世帯住宅リフォーム CSS
   ========================================================= */

#nisetaiReformWrap * {
    box-sizing: border-box;
}

:where(#nisetaiReformWrap) h1, :where(#nisetaiReformWrap) h2, :where(#nisetaiReformWrap) h3, :where(#nisetaiReformWrap) h4, :where(#nisetaiReformWrap) h5, :where(#nisetaiReformWrap) h6, :where(#nisetaiReformWrap) p, :where(#nisetaiReformWrap) ul, :where(#nisetaiReformWrap) ol, :where(#nisetaiReformWrap) li, :where(#nisetaiReformWrap) dl, :where(#nisetaiReformWrap) dt, :where(#nisetaiReformWrap) dd, :where(#nisetaiReformWrap) figure {
    margin: 0; padding: 0; font-weight: normal; line-height: 1.6;
}
:where(#nisetaiReformWrap) ul, :where(#nisetaiReformWrap) ol { list-style: none; }
:where(#nisetaiReformWrap) a { text-decoration: none; color: inherit; }
#nisetaiReformWrap img { max-width: 100%; height: auto; vertical-align: bottom; }

/* ---------------------------------------------------------
   ベーススタイル (モバイルファースト)
   --------------------------------------------------------- */
#nisetaiReformWrap {
    width: 100%;
    margin-top: -22px; /* ユーザー要望（paddingのマイナスは無効なためmarginで適用） */
    background-color: #fff;
    color: #333;
    font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
}

#nisetaiReformWrap p {
    font-size: 16px;
}

#nisetaiReformWrap .inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

#nisetaiReformWrap section {
    padding: 60px 15px 50px;
    text-align: center;
}

/* ---------------------------------------------------------
   FV (First View)
   --------------------------------------------------------- */
#fv {
    position: relative;
    width: 100%;
    background-color: #f7f7f7;
    text-align: center;
    padding: 0;
}
#fv .fv_bg_img {
    width: 100%; height: auto; display: block;
}
#fv .inner {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    max-width: none; /* ★親の1000px制限を解除して全画面幅でセンタリングさせる */
    height: 100%;
    z-index: 1; 
}
#fv .fv_content {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ========================================
   スマホ（SP）用の配置設定
======================================== */
.fv_title {
    position: absolute;
    top: 15%; /* ★スマホ：タイトルロゴの上下位置（上からの割合など） */
    left: 50%;
    transform: translateX(-50%);
    width: 95%; /* ★スマホ：ロゴ枠の幅 */
    margin: 0;
}
.fv_title img { 
    width: 100%; /* ★スマホ：画像自体の幅（枠に対する割合やpxで指定） */
    height: auto; 
    display: block; 
    margin: 0 auto; 
}
.fv_intro {
    font-weight: bold; line-height: 1.8; margin-top: 40px; margin-bottom: 30px;
    text-shadow: 0px 0px 5px #fff, 0px 0px 10px #fff;
}
.fv_cta {
    pointer-events: none;
    position: absolute;
    bottom: -80px; /* ★スマホ：CTAボタンの上下位置（下からの距離、マイナスではみ出る） */
    left: 50%;
    transform: translateX(-50%);
    display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; margin: 0;
    width: 100%;
    z-index: 10;
}
.fv_cta li {
    pointer-events: auto; width: 32%; max-width: 108px; } /* Update max-width to 108px on SP */
.fv_cta li img { width: 100%; border-radius: 8px; }

/* ---------------------------------------------------------
   Intro / 導入部分
   --------------------------------------------------------- */
.intro_text { line-height: 1.8; margin-bottom: 20px; }
.intro_family { text-align: center; margin-top: 20px; margin-bottom: 50px; }
.intro_family img { width: 100%; max-width: 300px; margin: 0 auto; }
.intro_badges { text-align: center; margin-top: 20px; }
.intro_badges img { width: 100%; max-width: 350px; margin: 0 auto; }

/* ---------------------------------------------------------
   Anxiety / 不安
   --------------------------------------------------------- */
.anxiety_box_but { text-align: center; margin-top: 40px; margin-bottom: -50px; position: relative; z-index: 1; }
.anxiety_box_but img { width: 100%; display: inline-block; }

.canvas_bg {
    background-color: #f4efe9; 
    background-image: url('../images/nisetai_reform/canvas.webp');
    background-size: cover;
    background-position: center;
    border-radius: 0; padding: 40px 20px; margin: 0; width: 100%; max-width: none;
}
/* introセクション内のcanvas_bgは、sectionのpaddingを打ち消して左右いっぱいに広げる */
#intro .canvas_bg {
    margin-left: -15px;
    margin-right: -15px;
    width: auto;
}

.anxiety_box h2 { font-size: 18px; font-weight: bold; color: #4a382e; margin-bottom: 20px; text-align: center; line-height: 1.5; }
.highlight_fuan { color: #ec8e26; } 

.anxiety_list_wrap {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

#nisetaiReformWrap .anxiety_box ul {
    margin: 10px; /* 枠外の余白 */
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4); 
    font-size: 18px; 
    font-weight: bold; 
    line-height: 2; 
    color: #333; 
    padding: 50px 20px; /* 上下にたっぷりの余白 */
    display: grid;
    justify-content: center; /* 左揃えを保ったままリスト全体を中央配置 */
}
#nisetaiReformWrap .anxiety_box ul li { 
    position: relative; 
    text-align: left;
    padding-left: 1.5em; /* 外にはみ出さないよう、内側にチェックマーク用の余白を取る */
    line-height: 2; /* リストの行間だけ2にする */
}
#nisetaiReformWrap .anxiety_box ul li::before { 
    content: "✓"; 
    position: absolute; 
    left: 0; 
    top: 0;
    color: #ec8e26; 
}

.anxiety_people { 
    text-align: center; 
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%); /* ど真ん中＆半分下にはみ出る */
    z-index: 2;
    width: 100%; /* 中央寄せを安定させるため */
}
.anxiety_people img { max-width: 150px; }

.anxiety_arrow { text-align: center; margin: 60px 0 20px; } /* 画像がはみ出る分の余白を確保 */
.anxiety_arrow img { width: 100%; }

/* ---------------------------------------------------------
   Solution / 解決策
   --------------------------------------------------------- */
.solution_box { margin-top: 30px; text-align: center; }
.solution_lead { text-align: center; }
.solution_lead img { margin: 0 auto 20px; display: block; }
.solution_box h3 { font-size: 18px; font-weight: bold; color: #333; line-height: 1.6; margin-bottom: 20px; }
.highlight_orange_dash { color: #e09b36; border-bottom: 2px dashed #e09b36; padding-bottom: 2px; }
.solution_img { text-align: center; margin-top: 20px; }
.solution_img img { border-radius: 10px; margin: 0 auto; display: block; }

/* ---------------------------------------------------------
   共通見出し
   --------------------------------------------------------- */
#nisetaiReformWrap h2.col_title,
#nisetaiReformWrap h2 { font-size: 18px; font-weight: bold; margin-bottom: 30px; text-align: center; color: #4a382e; padding: 10px; }

/* h3は18pxでh2とおなじ太さに */
#nisetaiReformWrap h3 { font-size: 17px; font-weight: bold; }

#nisetaiReformWrap .col_desc { text-align: center; margin-bottom: 30px; line-height: 1.8; }
#nisetaiReformWrap .merit_desc, #nisetaiReformWrap .reason_desc { text-align: justify; text-justify: inter-ideograph; margin-bottom: 30px; line-height: 1.8; }
#nisetaiReformWrap .col1_desc { text-align: justify; text-justify: inter-ideograph; }

/* ---------------------------------------------------------
   TOC / もくじ
   --------------------------------------------------------- */
.toc_box { 
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4); /* 不安リストと同じ影付き背景 */
    padding: 30px 20px; 
    max-width: 800px; 
    margin: 0 auto; 
    border: none;
}
.toc_title { margin-bottom: 20px; text-align: center; }
.toc_title_img { max-width: 200px; } 

.toc_box ul { 
    text-align: left; 
    font-size: 15px; 
    color: #9f8b74;  
}

.toc_box li { 
    margin-bottom: 25px; 
    line-height: 29px; 
}

.toc_box li a { 
    display: block; 
    color: #9f8b74; 
    font-weight: bold; 
    text-decoration: none; 
}

/* コラム以外は先頭に● */
.toc_box li:not(.col) {
    display: flex;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 10px !important; 
}
.toc_box li:not(.col)::before {
    content: "●";
    color: #9f8b74;
    margin-right: 0; /* 密着させる */
    flex-shrink: 0;
    line-height: 29px;
}

/* コラム項目のみテキスト中央寄せ、背景色#f0edea、角丸20px */
.toc_box li.col {
    background: #f0edea;
    border-radius: 20px;
    text-align: center;
    padding: 15px 15px !important; 
    margin: 20px 0 !important; 
    line-height: 1.4;
}
.toc_box li.col a {
    display: block; /* 画像を上に配置するためblock */
    font-weight: normal; 
}
.col_label_img { 
    display: block;
    margin: 0 auto 8px; /* 上に配置し中央寄せ */
    width: auto;
    /*max-height: 16px;*/
} 

/* ---------------------------------------------------------
   Column / コラム共通
   --------------------------------------------------------- */
.column_section { 
    background-color: #fdfaf6; 
    width: calc(100% - 30px); /* intro等の左右余白15pxとピタリと合わせる */
    max-width: 1000px; /* innerと同じ最大幅 */
    margin: 40px auto; /* 上下の余白 */
    border-radius: 20px; /* コラムの角丸 */
} 
.col_title .col_label { display: block; font-size: 14px; color: #e09b36; margin-bottom: 5px; }



/* ---------------------------------------------------------
   Column 1: Types (間取りタイプ)
   --------------------------------------------------------- */
.column_section_bg {
    background-image: url('../images/nisetai_reform/column_section_bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-bottom: 20px; /* ⑤の下の余白を減らすため調整 */
}
.col_type_titles {
    text-align: center;
    margin-bottom: 30px;
}
.col_common_title {
    margin: -70px auto 10px; /* はみ出させる */
    display: block;
}
.col1_title {
    margin: 20px auto 30px; /* 上下をもう少しあける */
    display: block;
}

/* Accordion */
.type_acc {
    margin-bottom: 25px;
}
.type_acc:last-child {
    margin-bottom: 0; /* ⑤の下の余白をなくす */
}
.type_acc_summary {
    cursor: pointer;
    list-style: none; /* Hide default arrow */
    outline: none;
}
.type_acc_summary::-webkit-details-marker {
    display: none;
}

/* Head (丸みのある白背景) */
.type_acc_head {
    background: #fff;
    border-radius: 40px;
    padding: 5px 6px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2; /* サブ見出しより上に */
    color: #9e8974;
    font-weight: bold;
    font-size: 16px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.type_acc_num {
    width: 32px;
    height: auto;
    margin-right: 6px; /* 15pxから6pxへ変更 */
    flex-shrink: 0;
}
.type_acc_heading {
    line-height: 1.4;
    flex-grow: 1;
    text-align: center;
    /* 丸数字（幅32px＋マージン6px＝38px）と釣り合いを取って完璧な中央にするための余白 */
    padding-right: 10px;
}

/* Sub (緑背景、角丸なし) */
.type_acc_sub {
    background: #a4bc97;
    color: #fff;
    /* 白見出しの裏に潜り込ませるため、上部に多めのpadding、全体を上に引き上げるマイナスmargin */
    padding: 40px 25px 15px;
    margin-top: -25px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}
.type_acc_badge {
    color: #e09b36;
    background: #fff;
    padding: 4px 12px;
    font-weight: bold;
    font-size: 14px;
    margin-right: 15px;
    line-height: 1;
    flex-shrink: 0;
}
.type_acc_subheading {
    font-size: 16px;
    font-weight: bold;
}
.type_acc_icon {
    margin-left: auto;
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
}
/* + icon */
.type_acc_icon::before, .type_acc_icon::after {
    content: "";
    position: absolute;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.type_acc_icon::before {
    width: 100%;
    height: 2px;
}
.type_acc_icon::after {
    width: 2px;
    height: 100%;
    transition: transform 0.3s ease;
}
/* 展開時はマイナスにする */
.type_acc[open] .type_acc_icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Content */
.type_acc_content {
    padding: 25px 0 10px; /* 背景色なし、そのまま配置 */
}
#nisetaiReformWrap .type_acc_content p {
    margin-bottom: 20px; 
    color: #4a382e;
    line-height: 1.8;
    text-align: left;
}
.type_acc_img {
    margin: 0 auto 10px;
    display: block;
}
#nisetaiReformWrap .type_acc_content p.type_acc_note {
    text-align: right;
    font-size: 14px;
    color: #666;
    margin-bottom: 0 !important;
}
.pc_only { display: none; }
@media (min-width: 768px) {
    .type_acc_note { font-size: 12px; }
    .pc_only { display: inline; }
    .type_acc_head { font-size: 18px; padding: 15px 30px; }
    .type_acc_sub { padding: 45px 30px 20px; margin-top: -30px; }
}

/* ---------------------------------------------------------
   Merit
   --------------------------------------------------------- */
.merit_list, .reason_list {
    padding: 0 20px;
}
.merit_item, .reason_item {
    margin-bottom: 60px; /* 項目の間隔を広げる（元30px） */
}
.merit_item:last-child {
    margin-bottom: 0; /* 最後の項目の下余白を消し、下の画像との距離を縮めやすくする */
}
.merit_item h3, .reason_item h3 {
    color: #9e8974;
    font-size: 17px;
    font-weight: bold;
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 80px;
    display: flex;
    justify-content: center; /* 左右中央揃えのベース */
    align-items: center;     /* 上下中央揃えのベース */
    margin-bottom: 0px;      /* h3と下の文章を近づける（元15px） */
}

/* 今後も使える、見出しテキストの位置微調整用クラス */
.bg_text_adjust {
    position: relative;
    top: -14px;  /* マイナス値で上に移動します */
    left: 28px; /* アイコンを避けて左右中央に見えるよう、右にずらします */
    display: inline-block;
}
.merit_item:nth-child(1) h3 { background-image: url('../images/nisetai_reform/merit_title_bg1.svg'); }
.merit_item:nth-child(2) h3 { background-image: url('../images/nisetai_reform/merit_title_bg2.svg'); }
.merit_item:nth-child(3) h3 { background-image: url('../images/nisetai_reform/merit_title_bg3.svg'); }
.merit_item:nth-child(4) h3 { background-image: url('../images/nisetai_reform/merit_title_bg4.svg'); }
.merit_item:nth-child(5) h3 { background-image: url('../images/nisetai_reform/merit_title_bg5.svg'); }

.reason_item:nth-child(1) h3 { background-image: url('../images/nisetai_reform/reason_title_bg1.svg'); }
.reason_item:nth-child(2) h3 { background-image: url('../images/nisetai_reform/reason_title_bg2.svg'); }
.reason_item:nth-child(3) h3 { background-image: url('../images/nisetai_reform/reason_title_bg3.svg'); }
.reason_item:nth-child(4) h3 { background-image: url('../images/nisetai_reform/reason_title_bg4.svg'); }

.merit_item p, .reason_item p {
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 1.6;
    font-size: 15px;
    padding: 0 15px; 
}

.merit_bottom { margin-top: 40px; text-align: center; }
.merit_people_img { max-width: 320px; margin: 0 auto 50px; display: block; }
.merit_dining_img { width: 100%; border-radius: 15px; display: block; }

/* ---------------------------------------------------------
   Childcare
   --------------------------------------------------------- */
.childcare_item { margin-bottom: 40px; }
.childcare_item:last-child { margin-bottom: 0; }
.childcare_item p { text-align: left; margin-top: 15px; line-height: 1.6; padding: 0 10px; }
.column2_illust { margin: 20px auto 0; display: block; max-width: 100%; }
.column2_photo { margin: 20px auto 0; display: block; border-radius: 15px; max-width: 100%; }

/* ---------------------------------------------------------
   Reason
   --------------------------------------------------------- */
.reason_jisseki_img {
    display: block;
    max-width: 100%;
    margin: 0 auto 30px;
}

/* ---------------------------------------------------------
   Price
   --------------------------------------------------------- */
.price_note_wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; max-width: 800px; margin-left: auto; margin-right: auto; }
.price_note_text { text-align: left; line-height: 1.6; }
.price_note_text .note_title { font-weight: bold; margin-bottom: 5px; color: #4a382e; font-size: 14pt; }
.price_note_text p { margin-bottom: 0; color: #4a382e; font-size: 14px; }
.price_note_img { width: 100px; flex-shrink: 0; margin-left: 15px; }
.price_note_img img { width: 100%; height: auto; }

.price_list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 40px; max-width: 800px; margin-left: auto; margin-right: auto; }
.price_item { 
    width: calc(50% - 7px);
    background: #fff; border: 2px solid #9e8974; border-radius: 10px; padding: 10px 10px 10px; /*margin-bottom: 10px;*/ box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: space-between;
}
.price_item.wide { width: 100%; margin-top: 5px; }

.price_item_top { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.price_ex_badge { width: 23px; flex-shrink: 0; }

.price_item h3 { font-size: 15px; text-align: center; width: 100%; font-weight: bold; color: #4a382e; margin-bottom: 0; padding-left: 0; line-height: 1.4; margin-top: -10px; }
.price_item h3 span { font-size: inherit; font-weight: normal; color: #4a382e; }

.price_val { background: #d4e0ce; display: inline-block; padding: 5px 20px; border-radius: 20px; font-size: 20px; font-weight: bold; color: #000; align-self: flex-end; margin-bottom: 0; }

.price_cta_wrap { text-align: center; }
.price_cta_wrap a { display: inline-block; max-width: 350px; width: 100%; transition: opacity 0.2s; }
.price_cta_wrap a:hover { opacity: 0.8; }
.price_cta_wrap img { width: 100%; height: auto; }

/* ---------------------------------------------------------
   Tax Column
   --------------------------------------------------------- */
.tax_list { margin-top: 40px; }
.tax_item { margin-bottom: 50px; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }

.tax_h3_white {
    background: #fff;
    border-radius: 40px;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 25px;
    color: #9e8974;
    font-weight: bold;
    font-size: 16px;
    box-sizing: border-box;
}

.tax_illust {
    max-width: 100%;
    margin: 0 auto 25px;
}

.tax_item p {
    text-align: left;
    color: #4a382e;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 480px;
    padding: 0 10px;
}

.tax_point_wrap {
    position: relative;
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto 25px;
    padding-top: 30px; 
}
.tax_fukidashi {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 2;
}
.tax_h3_bg {
    background-image: url('../images/nisetai_reform/column3_midashi_bg.webp');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 40px;
    padding: 10px 20px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.tax_note_box {
    border: 1px solid #7c8872;
    border-radius: 10px;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}
.tax_note_box p {
    margin-bottom: 0;
    color: #4a382e;
    font-size: 13px;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   Case
   --------------------------------------------------------- */
.case_box { background: #fff; max-width: 800px; margin: 0 auto; position: relative; }

/* Case Header & Title */
.case_head_wrap { position: relative; margin-bottom: 25px; }
.case_badge_img { max-width: 100%; display: block; margin: 0 auto; position: relative; z-index: 2; top: -9px; }
.case_catch { 
    background: #c3cfb8; color: #fff; padding: 10px 10px; 
    text-align: center; margin: -25px auto 0; position: relative; z-index: 1; 
    font-weight: bold; font-size: 15px;
}
.case_main_title { 
    font-size: 20px; text-align: center; margin-bottom: 20px; 
    color: #9e8974;
}
.case_dash_green {
    width: 100%;
    display: block;
    height: 0;
    border: none;
    border-top: 1.5px dashed #a4bc97;
    margin: 0 0 20px 0;
}

/* Case Tags */
.case_tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; padding: 0; list-style: none; }
.case_tags li { 
    border: 1.5px solid #a4bc97; color: #4a382e; font-size: 13px; 
    padding: 5px 15px; border-radius: 20px; background: #fff;
}

/* Case Slider */
.case_slider { margin-bottom: 30px; }
.case_slider img { width: 100%; border-radius: 15px; }
.case_slider .slick-dots { bottom: 15px; }
.case_slider .slick-dots li { margin: 0 5px; width: 8px; height: 8px; }
.case_slider .slick-dots li button { width: 8px; height: 8px; padding: 0; }
.case_slider .slick-dots li button:before { content: ''; width: 8px; height: 8px; background: #fff; opacity: 0.5; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.case_slider .slick-dots li.slick-active button:before { opacity: 1; }

/* Case Info */
.case_info { 
    margin-bottom: 30px; text-align: left; font-size: 15px; 
    display: flex; flex-wrap: wrap; justify-content: space-between;
}
.case_info dl { display: flex; align-items: center; padding: 6px 0; margin: 0; width: 100%; }
.case_info dl:nth-child(1), .case_info dl:nth-child(2) { width: 48%; }
.case_info dl:last-child { border-bottom: none; }
.case_info dt { 
    width: 75px; flex-shrink: 0; color: #fff; margin: 0 10px 0 0; 
    background: url(../images/nisetai_reform/column3_midashi_bg.webp) no-repeat center center;
    background-size: 100% 100%; text-align: center; padding: 3px 0; font-weight: normal;
}
.case_info dd { margin: 0; color: #4a382e; flex: 1; line-height: 1.5; }
.case_dash_brown {
    width: 100%;
    display: block;
    height: 0;
    border: none;
    border-top: 1.5px dashed #9e8974;
    margin: 30px 0;
}
.case_desc { 
    text-align: justify; margin: 30px 0; 
    line-height: 1.6; 
}
.case_madori_link { display: block; margin-bottom: 40px; text-align: center; }
.case_madori_img { max-width: 100%; border-radius: 10px; }

.case_points { margin-bottom: 30px; text-align: left; }
.jirei_point_item { background: #fff; margin-bottom: 40px; }
.jirei_point_head {
    display: flex;
    align-items: center;
    background: #c3cfb8;
    color: #4d4d4d;
    font-size: 16px;
    font-weight: bold;
    border-radius: 40px;
    padding: 6px 20px 6px 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 40px;
}
.jirei_point_num {
    margin-right: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.jirei_point_title {
    flex: 1;
    text-align: center;
}
.jirei_point_num img {
    height: 30px !important;
    width: auto;
    display: block;
}
.jirei_point_img { width: 100%; max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; }
.jirei_point_note { text-align: right; font-size: 14px; margin-top: 5px; margin-bottom: 0; color: #666; }
.jirei_point_item p { line-height: 1.6; margin-top: 30px; margin-bottom: 0; }
.btn_case { display: inline-block; border: 2px solid #4a382e; color: #4a382e; font-weight: bold; padding: 12px 40px; border-radius: 30px; transition: 0.2s; }
.btn_case:hover { background: #4a382e; color: #fff; }

/* ---------------------------------------------------------
   Voice
   --------------------------------------------------------- */
.voice_item { background: #fff; padding: 25px 20px; border-radius: 10px; margin-bottom: 20px; text-align: left; position: relative; }
.voice_head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; position: relative; z-index: 1; }
.voice_head_left { display: flex; align-items: center; gap: 15px; }
.voice_icon { width: 60px; height: auto; }
.voice_head h3 { margin: 0; color: #9e8974; border: none; padding: 0; font-size: 18px; }
.btn_voice { background: #9e8974; color: #fff; padding: 6px 10px; text-decoration: none; font-size: 14px; display: inline-block; transition: opacity 0.3s; }
.btn_voice:hover { opacity: 0.8; color: #fff; text-decoration: none; }
.voice_item p { position: relative; z-index: 1; line-height: 1.6; text-align: justify; }

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
#faq {
    background: none !important;
}
.faq_list {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}
.faq_item {
    width: calc(50% - 10px);
    margin-bottom: 0;
    border-radius: 20px;
    border: none;
    box-shadow: none;
}
@media screen and (max-width: 768px) {
    .faq_item {
        width: 100%;
    }
}
.faq_q {
    background: #c3cfb8;
    color: #333;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border-radius: 20px;
    transition: border-radius 0.3s ease;
    margin: 0;
}
.faq_q.open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.faq_q_icon {
    width: 26px;
    height: auto;
    flex-shrink: 0;
}
.faq_q_text {
    flex-grow: 1;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
    padding: 0 15px;
}
.faq_q_toggle {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
}
.faq_q_toggle::before, .faq_q_toggle::after {
    content: "";
    position: absolute;
    background: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}
.faq_q_toggle::before {
    width: 100%;
    height: 3px;
    border-radius: 2px;
}
.faq_q_toggle::after {
    width: 3px;
    height: 100%;
    border-radius: 2px;
}
.faq_q.open .faq_q_toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.faq_a {
    background: #f1f1f1;
    padding: 25px 30px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: none;
    margin: 0;
}
.faq_a p {
    text-align: justify;
    line-height: 1.8;
    margin: 0;
}

/* ---------------------------------------------------------
   PC（パソコン）対応 (769px以上)
   --------------------------------------------------------- */
@media screen and (min-width: 769px) {
    #intro .canvas_bg {
        margin-left: -20px;
        margin-right: -20px;
    }
    #nisetaiReformWrap section { padding: 100px 20px 50px; }
    
    #nisetaiReformWrap h2 { font-size: 22px; margin-bottom: 40px; }
    
    #nisetaiReformWrap h3 { font-size: 20px; }
    
    #nisetaiReformWrap p { font-size: 16px; }
    
    .column_section { width: calc(100% - 40px); max-width: 1100px; margin: 60px auto; }
    
    /* ========================================
       PC（パソコン）用の配置設定
    ======================================== */
    .fv_title { 
        width: 38%; /* ★PC：ロゴ枠の幅 */
        top: 7%; /* ★PC：タイトルロゴの上下位置（上からの割合など） */ 
        transform: translateX(-50%); /* 左右中央固定用 */
    }
    .fv_title img { 
        width: 100%; /* ★PC：画像自体の幅 */
        /* margin-bottom: 30px; もし「ロゴの下の余白（隙間）」のことでしたらこちらをお使いください */
    }
    
    .fv_cta {
    pointer-events: none; 
        bottom: -90px; /* ★PC：CTAボタンの上下位置（下からの距離） */ 
        transform: translateX(-50%); /* 左右中央固定用 */
        gap: 30px; /* ★PC：ボタン同士の隙間（gapはこちらに適用します） */
    }
    .fv_cta li {
    pointer-events: auto; max-width: 130px; } /* Update max-width to 120px on PC */
    
    .tax_h3_white, .tax_h3_bg { font-size: 18px; padding: 15px 30px; }
    
    .type_list, .merit_list, .childcare_list, .reason_list, .voice_list, .tax_list {
        display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 1000px; margin: 0 auto;
    }
    .type_acc, .type_item, .merit_item, .childcare_item, .reason_item, .voice_item, .tax_item { 
        width: 48%; margin: 0 0 40px 0; 
    }

    .price_note_wrap { justify-content: center; gap: 40px; margin-bottom: 30px; }
    .price_note_img { margin-left: 0; width: 120px; }
    .price_list { gap: 20px; margin-bottom: 50px; }
    .price_ex_badge { width: 33px; }
    .price_item { width: calc(50% - 10px); margin-bottom: 0; padding: 20px 20px 20px; }
    .price_item.wide { margin-top: 0; }
    .price_item.wide h3 br { display: none; }
    .price_item h3 { font-size: 17px; }
    .price_val { font-size: 24px; padding: 5px 30px; align-self: center; text-align: center; }
    .price_cta_wrap a { max-width: 450px; }

    .tax_list .tax_item:first-child { margin-top: 30px; }
    .tax_illust { width: 90%; margin-top: 30px; margin-bottom: 40px; }
    .tax_note_box p { font-size: 15px; }
    .lead_desc { font-size: 18px !important; }
    .case_info dl { padding: 12px 0; }
    
    .intro_family {margin: 20px auto 60px; max-width: 600px; }
    .intro_badges {max-width: 600px; margin: 40px auto; }
    .anxiety_box_but {margin: 20px auto -40px; max-width: 580px; }
    .anxiety_people {bottom: -20px; }
    .anxiety_arrow {margin: 110px auto 20px; max-width: 600px; }

    /* --- ADDED FIXES --- */
    .canvas_bg, .column_section_bg {
        background-repeat: repeat !important;
        background-size: auto !important;
    }

    #nisetaiReformWrap h2.col_title, #nisetaiReformWrap h2 {
        padding: 0;
    }
    /* TOC */
    .toc_box { max-width: 900px; padding: 30px; }
    .toc_title_img { width: 70%; margin: 0 auto; display: block; }
    .toc_lists { display: flex; justify-content: space-between; position: relative; }
    .toc_lists::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid #ccc; }
    .toc_left, .toc_right { width: 48%; list-style: none; padding: 0; margin: 0; }
    .toc_box li { margin-bottom: 20px; }
    .toc_box li.col { padding: 8px 20px !important; margin: 10px 0 20px !important; }
    .toc_box li.col a { display: flex; align-items: center; text-align: left; }
    .toc_box li.col .col_label_img { margin: 0 15px 0 0; flex-shrink: 0; width: 60px; }

    /* Columns */
    .column_section { max-width: 840px !important; }
    .col1_title { width: 70%; margin-left: auto; margin-right: auto; display: block; }
    #nisetaiReformWrap .col1_desc { text-align: center; }
    .col_common_title { max-width: 250px; margin-top: -130px; margin-left: 10px; margin-bottom: 50px; display: block; }
    picture.col_common_title img { width: 100%; height: auto; display: block; }

    /* Accordion header and specific images */
    #nisetaiReformWrap .type_acc_head { padding: 10px 16px !important; }
    #col_childcare .type_acc_head, #col_tax .type_acc_head { margin-bottom: 20px; }
    .sp_only { display: none !important; }
    .pc_only_block { display: block !important; }
    .jirei_point_note { font-size: 12px; }

    .merit_people_img, .merit_dining_img, .reason_jisseki_img {
        width: 500px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    /* Merit and Reason PC tweaks */
    #nisetaiReformWrap .merit_desc, #nisetaiReformWrap .reason_desc {
        text-align: center;
        margin-top: 40px;
        margin-bottom: 50px;
    }

    /* Childcare PC tweaks */
    #col_childcare .column2_illust {
        width: 70%;
        margin: 0 auto 20px;
        display: block;
    }

    /* Childcare item 3 specific PC layout */
    .childcare_item:nth-child(3) {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 40px;
        align-items: start;
    }
    .childcare_item:nth-child(3) .type_acc_head { grid-column: 1; margin-bottom: 20px; }
    .childcare_item:nth-child(3) .column2_illust { grid-column: 1; margin: 0 auto 20px; width: 70%; max-width: none; }
    .childcare_item:nth-child(3) p { grid-column: 1; margin-bottom: 0; }
    .childcare_item:nth-child(3) .column2_photo {
        grid-column: 2;
        grid-row: 1 / 4;
        margin: 0;
        width: 100%;
        height: auto;
        align-self: end;
    }

    /* Case Section PC Grid Adjustments */
    .anxiety_box_but, .case_badge_img { width: 580px; margin-left: auto; margin-right: auto; max-width: 100%; }
    .case_info { display: block; }
    .case_info dl { width: 100%; margin-bottom: 0px; padding: 6px; }
    .case_pc_grid_info { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 40px; }
    .case_madori_wrap { margin-bottom: 40px; text-align: center; }
    .case_pc_grid_points { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
    .case_pc_grid_points .item1 { grid-column: 1; grid-row: 1; }
    .case_pc_grid_points .item2 { grid-column: 2; grid-row: 1; }
    .case_pc_grid_points .item3 { grid-column: 1; grid-row: 2; }
    
    .case_pc_grid_points .jirei_point_item .pc_only_block {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        aspect-ratio: 4 / 3;
        border-radius: 10px;
        overflow: hidden;
    }
    .case_pc_grid_points .jirei_point_item .pc_only_block img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media screen and (max-width: 768px) {
    .pc_only_block { display: none !important; }
    #nisetaiReformWrap { margin-top: 0; }
}

/* 間取り図・事例ポイント拡大用のLightboxカスタマイズ (インラインフレーム風スクロール) */
#lightbox:has(.lb-image[src*="_large"]) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 0 !important;
    margin: 0 !important;
}
#lightbox:has(.lb-image[src*="_large"]) .lb-outerContainer {
    width: 90vw !important;
    max-width: 1000px !important;
    height: auto !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#lightbox:has(.lb-image[src*="_large"]) .lb-container {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff;
    padding: 0 !important;
}
#lightbox:has(.lb-image[src*="_large"]) .lb-image {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block;
}

/* お客様の声アンケート用のLightboxカスタマイズ (画像＋長文テキスト全体をスクロール) */
#lightbox:has(.lb-image[src*="voice_tegaki"]) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow-y: auto !important;
    padding: 5vh 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    transform: none !important;
    -webkit-overflow-scrolling: touch;
}
#lightbox:has(.lb-image[src*="voice_tegaki"]) .lb-outerContainer,
#lightbox:has(.lb-image[src*="voice_tegaki"]) .lb-dataContainer {
    width: 90vw !important;
    max-width: 600px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
#lightbox:has(.lb-image[src*="voice_tegaki"]) .lb-image {
    width: 100% !important;
    height: auto !important;
}
#lightbox:has(.lb-image[src*="voice_tegaki"]) .lb-container {
    padding: 0 !important;
}

/* Lightbox Caption Customization for Voice Texts */
.lb-caption { font-weight: normal !important; font-size: 16px !important; line-height: 1.8 !important; text-align: left !important; padding-top: 10px !important; }

/* Voice Case Link Styles */
.voice_case_link {
    text-align: right;
    margin-top: 15px;
}
.voice_case_link a {
    display: inline-block;
    color: #9e8974;
    font-size: 15px;
    font-weight: normal;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.voice_case_link a:hover {
    opacity: 0.7;
}

/* Lightbox specific case link */
a.lb_case_link {
    display: inline-block;
    color: #fff !important;
    background: #9e8974;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: bold;
    margin-top: 10px;
}
a.lb_case_link:hover {
    opacity: 0.8;
}


/* --- Typography Normalization --- */
#nisetaiReformWrap h2 {
    font-size: 19px !important;
}

#nisetaiReformWrap h3 {
    font-size: 18px !important;
}

#nisetaiReformWrap .lead_desc {
    font-size: 17px !important;
}

#merit p,
#col_childcare p,
#reason p,
#col_tax p,
#case p {
    font-size: 16px;
}

#merit p.lead_desc,
#col_childcare p.lead_desc,
#reason p.lead_desc,
#col_tax p.lead_desc,
#case p.lead_desc {
    font-size: 17px !important;
}

#nisetaiReformWrap .type_acc_note,
#nisetaiReformWrap .jirei_point_note,
#nisetaiReformWrap .tax_note_box p,
#nisetaiReformWrap .price_note_text p {
    font-size: 14px !important;
}

@media screen and (max-width: 768px) {
    .column2_illust {
        max-width: 70% !important;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
}
/* --- FV CTA Sticky --- */
/* ★ CTAの重なり順を変更する場合は、ここの数値を変更してください ★ */
#fv, 
#fv .inner, 
.fv_cta.is-fixed {
    z-index: 99 !important;
}

@media screen and (min-width: 769px) {
    .fv_cta.is-fixed {
        position: fixed !important;
        bottom: 15px !important;
        top: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        animation: slideUpBottomCTA 0.3s ease-out forwards;
    }
    .fv_cta li {
    pointer-events: auto;
        max-width: 110px !important;
    }
}
@keyframes slideUpBottomCTA {
    from { transform: translate(-50%, 100%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

@media screen and (max-width: 768px) {
    .fv_cta.is-fixed {
        position: fixed !important;
        top: auto !important;
        bottom: 15px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        animation: slideUpBottomCTA 0.3s ease-out forwards;
        width: 90%;
    }
    .fv_cta li {
    pointer-events: auto;
        width: 32% !important;
        max-width: 90px !important;
    }
}
@keyframes slideDownTopCTA {
    from { transform: translate(-50%, -150%); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

/* CTA Fade Out */
.fv_cta.is-fixed.is-hidden-bottom {
    animation: fadeOutCTA 0.8s ease forwards !important;
    pointer-events: none !important;
}
@keyframes fadeOutCTA {
    from { opacity: 1; visibility: visible; }
    to { opacity: 0; visibility: hidden; }
}

/* Back to TOC Button */
.back_to_toc {
    text-align: center;
    margin-top: 40px;
}
.back_to_toc a {
    display: inline-block;
    width: 390px;
    max-width: 100%;
    transition: transform 0.3s ease;
}
.back_to_toc a:hover {
    transform: translateY(-5px);
}
.back_to_toc a img {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.3s ease, opacity 0.3s ease !important;
    opacity: 1 !important;
}
.back_to_toc a:hover img {
    filter: drop-shadow(0px 8px 10px rgba(0,0,0,0.3)) !important;
}
@media screen and (max-width: 768px) {
    .back_to_toc {
        margin-top: 30px;
    }
    .back_to_toc a {
        width: 90%; 
    }
}

/* Price CTA Hover Animation */
.price_cta_wrap {
    text-align: center;
}
.price_cta_wrap a {
    display: inline-block;
    transition: transform 0.3s ease;
}
.price_cta_wrap a:hover {
    transform: translateY(-5px);
}
.price_cta_wrap a img,
.price_cta_wrap a:hover img {
    transition: filter 0.3s ease, opacity 0.3s ease !important;
    opacity: 1 !important;
}
.price_cta_wrap a:hover img {
    filter: drop-shadow(0px 8px 10px rgba(0,0,0,0.3)) !important;
}
/* CTA Hover Animation (restored) */
.fv_cta a {
    display: block;
    transition: transform 0.3s ease;
}
.fv_cta a:hover {
    transform: translateY(-5px);
}
.fv_cta a img,
.fv_cta a:hover img {
    transition: filter 0.3s ease, opacity 0.3s ease !important;
    opacity: 1 !important;
}
.fv_cta a:hover img {
    filter: drop-shadow(0px 8px 10px rgba(0,0,0,0.3)) !important;
}
/* Animation base states */
.fadeUpTrigger {
    opacity: 0;
}

/* スマホ用追従フッター非表示 */
@media screen and (max-width: 768px) {
    .fix-menu.sp {
        display: none !important;
    }
    body {
        padding-bottom: 90px;
    }
}