@charset "utf-8";
/* CSS Document */
/* === ベーススタイル（既存コラムから継承） ============================== */
.column-wrap h3{
position:relative;
color:rgba(0,96,64,0.85);
font-size:22px;
font-weight:bold;
margin:60px 0 22px;
padding:0 0 14px 18px;
border-bottom:2px solid rgba(0,96,64,0.20);
line-height:1.5;
}
.column-wrap h3::before{
content:"";
position:absolute;
left:0;
top:6px;
bottom:18px;
width:6px;
background:rgba(0,96,64,0.85);
border-radius:3px;
}
.column-wrap h4{
color:rgba(0,96,64,0.80);
font-size:17px;
font-weight:bold;
margin:35px 0 14px;
padding:0 0 8px 0;
border-bottom:1px dashed rgba(0,96,64,0.30);
line-height:1.5;
}
.column-wrap .cl-h4-dot{
display:inline-block;
width:10px;
height:10px;
border-radius:50%;
background:rgba(0,96,64,0.70);
margin-right:10px;
vertical-align:middle;
}
.column-wrap p{
line-height:1.9;
margin-bottom:18px;
}

/* === 既存コラム要素（cl-*）の踏襲 ====================================== */
.cl-lead{
background:rgba(0,96,64,0.06);
border-left:5px solid rgba(0,96,64,0.85);
border-radius:6px;
padding:18px 24px;
margin:25px 0;
display:flex;
align-items:center;
gap:16px;
}
.cl-lead-icon{
display:inline-block;
width:36px;
height:36px;
flex-shrink:0;
background:rgba(0,96,64,0.85);
color:#fff;
border-radius:50%;
text-align:center;
line-height:36px;
font-weight:bold;
font-size:20px;
}
.cl-lead-text{
font-weight:bold;
color:#333;
line-height:1.7;
}
.cl-callout{
background:#fff;
border:1px solid #d8e0dc;
border-radius:8px;
padding:22px 26px;
margin:25px 0;
}
.cl-callout-header{
display:flex;
align-items:center;
gap:12px;
padding-bottom:12px;
border-bottom:1px dashed #ccc;
margin-bottom:14px;
}
.cl-callout-tag{
background:rgba(0,96,64,0.85);
color:#fff;
padding:4px 12px;
border-radius:14px;
font-size:12px;
font-weight:bold;
flex-shrink:0;
}
.cl-callout-ttl{
font-weight:bold;
color:rgba(0,96,64,0.90);
font-size:16px;
}
.cl-table{
border-collapse:collapse;
margin:20px 0 10px;
width:100%;
table-layout:fixed;
}
.cl-table th,
.cl-table td{
border:1px solid #d8e0dc;
padding:12px 16px;
line-height:1.7;
vertical-align:middle;
}
.cl-table th{
background:rgba(0,96,64,0.10);
color:rgba(0,96,64,0.90);
font-weight:bold;
text-align:left;
}
.cl-table .cl-name-col{
background:rgba(0,96,64,0.04);
font-weight:bold;
color:rgba(0,96,64,0.85);
}
.cl-source-note{
font-size:13px;
color:#666;
margin:6px 0 25px;
}

/* === 子供向け・やわらかい印象の新規パーツ ============================= */

/* セクションをファミリー色／大人色で分ける */
.cl-section-family{
background:#fffaf0;
border:2px solid #ffe9b3;
border-radius:18px;
padding:30px 32px;
margin:30px 0;
position:relative;
}
.cl-section-family::before{
content:"";
position:absolute;
top:-14px;
left:30px;
width:48px;
height:28px;
background:#ffb866;
border-radius:14px;
}
.cl-section-family::after{
content:"\1F476";
position:absolute;
top:-22px;
left:38px;
font-size:22px;
}
.cl-section-adult{
background:#f4f9f7;
border:2px solid #c8e0d5;
border-radius:18px;
padding:30px 32px;
margin:30px 0;
position:relative;
}
.cl-section-adult::before{
content:"";
position:absolute;
top:-14px;
left:30px;
width:48px;
height:28px;
background:rgba(0,96,64,0.75);
border-radius:14px;
}
.cl-section-adult::after{
content:"\1F468";
position:absolute;
top:-22px;
left:38px;
font-size:22px;
filter:brightness(0) invert(1);
}
.cl-section-family h3,
.cl-section-adult h3{
margin-top:5px;
}

/* ヒーロー（タイトル直下）の装飾ボックス */
.cl-hero-card{
background:linear-gradient(135deg, #fff5e6 0%, #f0f8f5 100%);
border:none;
border-radius:24px;
padding:32px 36px;
margin:25px 0 40px;
text-align:center;
box-shadow:0 4px 16px rgba(0,96,64,0.08);
position:relative;
overflow:hidden;
}
.cl-hero-card::before{
content:"";
position:absolute;
top:-30px;
right:-30px;
width:120px;
height:120px;
background:#ffe9b3;
border-radius:50%;
opacity:0.4;
}
.cl-hero-card::after{
content:"";
position:absolute;
bottom:-40px;
left:-30px;
width:140px;
height:140px;
background:#c8e0d5;
border-radius:50%;
opacity:0.4;

}
.cl-hero-card .cl-hero-sub{
display:inline-block;
background:rgba(0,96,64,0.85);
color:#fff;
padding:6px 18px;
border-radius:20px;
font-size:13px;
font-weight:bold;
margin-bottom:16px;
position:relative;
z-index:1;
}
.cl-hero-card .cl-hero-ttl{
font-size:22px;
font-weight:bold;
color:#333;
margin:0 0 18px;
line-height:1.5;
position:relative;
z-index:1;
}
.cl-hero-card .cl-hero-tags{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-top:18px;
position:relative;
z-index:1;
}
.cl-hero-card .cl-hero-tag{
background:#fff;
border:2px solid rgba(0,96,64,0.40);
border-radius:20px;
padding:6px 16px;
font-size:13px;
font-weight:bold;
color:rgba(0,96,64,0.85);
}
.cl-hero-card .cl-hero-free{
display:inline-block;
background:#ffb866;
color:#fff;
font-size:18px;
font-weight:bold;
padding:6px 28px;
border-radius:25px;
margin-top:8px;
position:relative;
z-index:1;
box-shadow:0 2px 6px rgba(255,150,50,0.30);
}

/* おすすめのお悩みリスト（やわらか） */
.cl-worry-list{
margin-top:18px;
}
.cl-worry-list .cl-worry-item{
display:flex;
align-items:flex-start;
gap:14px;
background:#fff;
border-radius:12px;
padding:14px 18px;
margin-bottom:10px;
border:1px solid #e0e8e4;
line-height:1.7;
}
.cl-worry-list .cl-worry-item .cl-worry-icon{
display:inline-block;
width:28px;
height:28px;
flex-shrink:0;
background:rgba(0,96,64,0.85);
color:#fff;
border-radius:50%;
text-align:center;
line-height:28px;
font-weight:bold;
font-size:14px;
margin-top:2px;
}
.cl-section-family .cl-worry-list .cl-worry-item .cl-worry-icon{
background:#ffb866;
}

/* 「分かること」ナンバリングカード */
.cl-numbered-card{
display:flex;
gap:18px;
background:#fff;
border:1px solid #d8e0dc;
border-radius:14px;
padding:22px 26px;
margin-bottom:16px;
align-items:flex-start;
}
.cl-numbered-card .cl-num-circle{
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:48px;
height:48px;
border-radius:50%;
background:rgba(0,96,64,0.85);
color:#fff;
font-size:20px;
font-weight:bold;
margin-top:2px;
}
.cl-numbered-card .cl-num-body{
flex:1;
}
.cl-numbered-card .cl-num-ttl{
font-weight:bold;
color:rgba(0,96,64,0.90);
font-size:16px;
margin:0 0 8px;
}
.cl-numbered-card .cl-num-body p{
margin:0 0 8px;
line-height:1.8;
}
.cl-numbered-card .cl-num-body p:last-child{
margin-bottom:0;
}

/* 相談会の内容（チェックリスト） */
.cl-content-list{
background:#fff;
border:1px solid #d8e0dc;
border-radius:14px;
padding:24px 28px;
margin:20px 0 30px;
}
.cl-content-list .cl-content-item{
display:flex;
align-items:center;
gap:14px;
padding:10px 0;
border-bottom:1px dashed #e0e8e4;
line-height:1.7;
}
.cl-content-list .cl-content-item:last-child{
border-bottom:none;
}
.cl-content-list .cl-content-check{
display:inline-block;
width:24px;
height:24px;
flex-shrink:0;
background:rgba(0,96,64,0.85);
color:#fff;
border-radius:50%;
text-align:center;
line-height:24px;
font-size:13px;
font-weight:bold;
}

/* 開催概要テーブル（モバイル対応） */
.cl-info-table{
border-collapse:collapse;
margin:20px 0 30px;
width:100%;
background:#fff;
border:1px solid #d8e0dc;
border-radius:14px;
overflow:hidden;
}
.cl-info-table th,
.cl-info-table td{
padding:14px 18px;
border-bottom:1px solid #e0e8e4;
text-align:left;
vertical-align:middle;
line-height:1.7;
}
.cl-info-table tr:last-child th,
.cl-info-table tr:last-child td{
border-bottom:none;
}
.cl-info-table th{
background:rgba(0,96,64,0.08);
color:rgba(0,96,64,0.90);
font-weight:bold;
width:30%;
}

/* ステップカード（まずは相談） */
.cl-step-message{
background:linear-gradient(135deg, #f4f9f7 0%, #fff5e6 100%);
border:2px dashed rgba(0,96,64,0.30);
border-radius:18px;
padding:28px 32px;
margin:30px 0;
}
.cl-step-message .cl-step-ttl{
font-size:18px;
font-weight:bold;
color:rgba(0,96,64,0.90);
margin:0 0 16px;
line-height:1.6;
}
.cl-step-message p{
margin-bottom:12px;
}
.cl-step-message p:last-child{
margin-bottom:0;
}

/* CTAボックス（最終） */
.cl-cta-box{
background:#fff;
border:3px solid rgba(0,96,64,0.85);
border-radius:18px;
padding:30px 32px;
margin:40px 0 20px;
text-align:center;
position:relative;
}
.cl-cta-box .cl-cta-badge{
position:absolute;
top:-20px;
left:50%;
transform:translateX(-50%);
background:rgba(0,96,64,1);
color:#fff;
padding:6px 22px;
border-radius:20px;
font-size:13px;
font-weight:bold;
white-space:nowrap;
}
.cl-cta-box .cl-cta-ttl{
display:block;
font-size:20px;
font-weight:bold;
color:rgba(0,96,64,0.90);
margin:14px 0 14px;
line-height:1.6;
}
.cl-cta-box .cl-cta-note{
font-size:14px;
color:#666;
margin:14px 0 0;
line-height:1.7;
}
.cl-cta-box .cl-cta-btnbox{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px;
margin-top:22px;
}
.cl-cta-box .cl-cta-btn{
display:inline-block;
background:rgba(0,96,64,0.85);
color:#fff;
padding:14px 32px;
border-radius:30px;
text-decoration:none;
font-weight:bold;
font-size:15px;
transition:all 0.2s;
}
.cl-cta-box .cl-cta-btn:hover{
background:rgba(0,96,64,1);
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,96,64,0.30);
}
.cl-cta-box .cl-cta-btn.cl-cta-btn-tel{
background:#ffb866;
}
.cl-cta-box .cl-cta-btn.cl-cta-btn-tel:hover{
background:#ff9933;
}

.cl-closing{
text-align:center;
color:rgba(0,96,64,0.85);
font-weight:bold;
margin-top:25px;
font-size:15px;
}

/* SP対応 */
@media screen and (max-width:768px){
.column-wrap h3{
font-size:18px;
margin:45px 0 18px;
padding:0 0 12px 14px;
}
.column-wrap h3::before{
width:5px;
top:4px;
bottom:16px;
}
.column-wrap h4{
font-size:15px;
margin:25px 0 12px;
}
.cl-hero-card{
padding:24px 10px;
border-radius:18px;
}
.cl-hero-card .cl-hero-ttl,
.spft15{
font-size:15px;
}
.cl-section-family,
.cl-section-adult{
padding:24px 20px;
border-radius:14px;
}
.cl-numbered-card{
padding:18px 20px;
gap:14px;
}
.cl-numbered-card .cl-num-circle{
width:40px;
height:40px;
font-size:17px;
}
.cl-info-table th,
.cl-info-table td{
display:block;
width:100%;
padding:12px 16px;
}
.cl-info-table th{
border-bottom:none;
padding-bottom:6px;
}
.cl-cta-box{
padding:26px 22px;
}
.cl-cta-box .cl-cta-ttl{
font-size:16px;
}
.cl-cta-box .cl-cta-btnbox{
flex-direction:column;
}
.cl-cta-box .cl-cta-btn{
display:block;
width:100%;
text-align:center;
}
}

@media screen and (min-width:769px){
.consultation-top{
margin-top:-100px!important;
}
.consultationpage h2{
color:rgba(0,96,64,0.90);
padding-left:0!important;
font-size:38px!important;
font-weight:bold;
line-height:1.4em;
margin-bottom:10px!important;
}
}
@media screen and (max-width:768px){
.consultation-top{
margin-top:-50px!important;
}
.consultationpage h2{
color:rgba(0,96,64,0.90);
padding-left:0!important;
font-size:19px!important;
font-weight:bold;
line-height:1.4em;
margin-bottom:10px!important;
}
/* cl-table をスマホでは縦積みカード型に切り替え */
.cl-table,
.cl-table tbody,
.cl-table tr,
.cl-table th,
.cl-table td{
display:block;
width:100%;
}
.cl-table{
table-layout:auto;
border:none;
margin:20px 0 10px;
}
.cl-table tr:first-child{
display:none;
}
.cl-table tr{
background:#fff;
border:1px solid #d8e0dc;
border-radius:12px;
margin-bottom:14px;
padding:6px 0;
overflow:hidden;
}
.cl-table td{
border:none;
border-bottom:1px dashed #e0e8e4;
padding:14px 18px;
text-align:left;
}
.cl-table td:last-child{
border-bottom:none;
}
.cl-table .cl-name-col{
background:rgba(0,96,64,0.10);
color:rgba(0,96,64,0.90);
font-weight:bold;
font-size:16px;
text-align:center;
padding:12px 18px;
border-bottom:1px solid rgba(0,96,64,0.20);
}
.cl-table td:not(.cl-name-col)::before{
content:attr(data-label);
display:block;
font-weight:bold;
color:rgba(0,96,64,0.85);
font-size:13px;
margin-bottom:6px;
}
.cl-table th{
font-size:18px!important;
}
}
.consultationpage h2::before {
    content: "";
    display: none!important;
}