@charset "utf-8";
/* CSS Document */

/*-------------------------*/
/* ===== セクション全体 ===== */
/*-------------------------*/
.section-about{
  position: relative;
  overflow: hidden;
	z-index: 1!important;
}

/* ===== 上：画像（PCとSPをCSSで切替） ===== */
.about-visual{
  width: 100%;
  /* 画面比率に応じた高さ（横幅に対して可変） */
  height: clamp(280px, 45vw, 520px);
}

/* 画像は基本非表示にしておき、PC用だけ表示 */
.about-visual img{
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 横幅いっぱい、はみ出しはトリミング */
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.about-visual .img-pc{ display:block; }   /* デフォルト＝PCを表示 */
.about-visual .img-sp{ display:none; }    /* SPは隠す */


/*----------------------------------------*/
/* ===== タイトル（ご指定の数値に準拠） ===== */
/*----------------------------------------*/
.keikobi-head{
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin-top: 40px;margin-bottom:40px;
}
.keikobi-pill{
  padding:.6em 1.2em; border-radius:999px; background:#678DBB; color:#fff;
  font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
  letter-spacing:.08em; margin:0;
  font-size: clamp(16px, 2.2vw, 24px);
}
/* 共通ドット */
.keikobi-dot{
  border-radius:50%;
  background:#678DBB;
  display:inline-block;
}
.keikobi-dot.large { width:24px; height:24px; }
.keikobi-dot.small { width:12px; height:12px; }

/* 並び */
.dot-group{ display:flex; gap:14px; align-items:center; }



/*---------------------------------------------*/
/* ====== お問い合わせ（柄パターン＋白パネル） ====== */
/*---------------------------------------------*/
.sns-section{
  position: relative;
  padding: clamp(40px, 7vw, 96px) 0;
  z-index: 2;
  overflow: hidden;
}

/* 柄タイル */
.sns-section .sns-tile{
  position: absolute; inset: 0;
  background: url("../img/柄シームレス素材4.webp") repeat;
  background-size: 600px 600px;
  z-index: 0; pointer-events:none;
	height:auto;
}

/* 白パネル */
.sns-section .sns-ribbon{
  position: relative; z-index: 1;
  width: 60%; margin: 0 auto;
  background: rgba(255,255,255,0.9);
  border-radius: 20px;
  padding: clamp(20px, 4vw, 36px);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

/* タイトル */
.sns-title{ margin:0; font-family:"ZenOldMincho-Bold","Yu Mincho",serif;
  letter-spacing:.08em; line-height:1.6; color:#333; font-size:clamp(18px,2.1vw,22px);}
.sns-title span{ position:relative; display:inline-block; padding:0 .3em;}
.sns-title span::before{ content:""; position:absolute; inset:55% 0 auto 0;
  height:.55em; background:#FFEDBE; border-radius:4px; z-index:-1; }

/* 区切り線 */
.sns-divider{ width:86%; height:1px; margin:0 auto 4px; background:#cbd6e2; }

/* PCボタン（ピル型） */
.sns-list{ display:grid; grid-template-columns:1fr; gap:12px; width:min(560px,100%); list-style:none; margin:0 auto; padding:0; }
.sns-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:12px; height:56px; border-radius:999px;
  padding:0 20px; font:600 16px/1 "Noto Sans JP","Yu Gothic",sans-serif;
  color:#fff; text-decoration:none; overflow:hidden; isolation:isolate;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sns-blue{ background:#678DBB; }
.sns-green{ background:#06C755; }
.sns-ic{ width:30px!important; height:30px!important; }
.sns-txt{ white-space:nowrap; }

/* Shine */
.sns-btn::before{
  content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  transform:skewX(-25deg);
  background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 100%);
  z-index:1;
}
.sns-btn:hover::before{ animation: shine .75s; }
@keyframes shine{ 100%{ left:125%; } }

/* Hover lift */
@media (hover:hover){
  .sns-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); filter:brightness(1.05);}
  .sns-btn:active{ transform:translateY(0); box-shadow:0 6px 16px rgba(0,0,0,.06);}
}

/* スマホ丸ボタン */
.sns-list--sp{ display:none; gap:22px; justify-content:center; list-style:none; padding:0; }
.sns-circle{ position:relative; width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden; isolation:isolate;
  box-shadow:0 6px 16px rgba(0,0,0,0.08) inset,0 6px 16px rgba(0,0,0,0.08);}
.sns-circle img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.sns-circle.tel{ background:#678DBB; }
.sns-circle.mail{ background:#678DBB; }
.sns-circle.line{ background:#06C755; }
.sns-circle::before{ content:""; position:absolute; top:0; left:-75%; width:50%; height:100%;
  transform:skewX(-25deg); background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 100%); z-index:1;}
.sns-circle:hover::before{ animation: shine .75s; }

@media (max-width:767px){
  .sns-section .sns-ribbon{ width:min(520px,80%); }
  .sns-list{ display:none; }
  .sns-list--sp{ display:flex; }
	/* 電話アイコンだけ小さめ */
  .sns-circle.tel img{
    width: 34px;
    height: 34px;
	  border-radius:0px!important;
  }

  /* メールアイコンだけ小さめ */
  .sns-circle.mail img{
    width: 34px;
    height: 34px;
	  border-radius:0px!important;
  }
}

.sns-title2{ margin:0; font-family:"ZenOldMincho-Bold","Yu Mincho",serif;
  letter-spacing:.08em; line-height:1.6; color:#333; font-size:clamp(16px,2vw,22px);}
.sns-title2 span{ position:relative; display:inline-block; padding:0 .3em;}
.sns-section > div:nth-child(3){margin-top:40px;}




/*-----------------------------------*/
/*-----------アコーディオン------------*/
/*-----------------------------------*/
/* ========== 設定 ========== */
:root{
  --faq-ink:#333;
  --faq-blue:#678DBB;
  --faq-ans-bg:#E2F8FC;
  --faq-line:#707070;
  --pad-x:16px;
  --pad-y:14px;
  --maxw:980px;
  --badge: clamp(36px, 5vw, 42px);     /* Q/Aバッジ共通サイズ（枠込み） */
  --toggle: clamp(36px, 5vw, 40px);    /* 右の＋ボタンサイズ */
  --gap: clamp(8px, 2vw, 16px);
}

/* ========== ベース ========== */
.situmon_body{ color:var(--faq-ink); margin-bottom: 8vw;}
.situmon_accordion-container{ width:min(var(--maxw),90%); margin:0 auto; }
.situmon_accordion{ background:#fff; }

/* ========== ヘッダー（Q行） ========== */
/* 3列固定： [Qバッジ] [テキスト] [＋ボタン] で改行しない */
.situmon_accordion-header{
  display:grid;
  grid-template-columns: var(--badge) 1fr var(--toggle);
  align-items:center;
  column-gap:var(--gap);
  width:100%;
  padding:var(--pad-y) var(--pad-x);
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
  border-bottom:1px solid var(--faq-line); /* ← Qの下だけ罫線 */
  font-family:"ZenOldMincho-Bold","Yu Mincho","Hiragino Mincho ProN",serif;
}
.situmon_accordion-header p{
  margin:0; line-height:1.8; font-weight:700;
  min-width:0; /* 中央列が押し出して改行させないために必須 */
	font-size:clamp(16px,1.4vw,18px);
}

/* Q/Aバッジ（完全同寸・左端揃え） */
.situmon_question-label,
.situmon_answer-label{
  box-sizing:border-box;             /* 枠線ぶんもサイズに含める */
  width:var(--badge);
  height:var(--badge);
  display:grid; place-items:center;
  font-weight:700; letter-spacing:.02em;
}
.situmon_question-label{ background:var(--faq-blue); color:#fff;font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;font-size:clamp(16px,1.4vw,18px); }
.situmon_answer-label{
  background:#fff; color:var(--faq-blue);
  border:2px solid var(--faq-blue);
	font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;font-size:clamp(16px,1.4vw,18px);
}


/* 右端の＋（回転して−に） */
.situmon_toggle{
  justify-self:end;
  width:var(--toggle); height:var(--toggle);
  border-radius:50%;
  background:var(--faq-blue);
  position:relative;
  transition:transform .3s ease;
}
.situmon_toggle i{
  position:absolute; left:50%; top:50%;
  width:18px; height:2px; background:#fff;
  transform:translate(-50%,-50%);
}
.situmon_toggle i::after{
  content:""; position:absolute; left:50%; top:50%;
  width:2px; height:18px; background:#fff;
  transform:translate(-50%,-50%) scaleY(1);
  transition:transform .25s ease;
}
.situmon_accordion-header[aria-expanded="true"] .situmon_toggle{ transform:rotate(180deg); }
.situmon_accordion-header[aria-expanded="true"] .situmon_toggle i::after{ transform:translate(-50%,-50%) scaleY(0); }

/* ========== パネル（A行） ========== */
.situmon_accordion-content{
  background:var(--faq-ans-bg);
  max-height:0; overflow:hidden; opacity:0;
  padding:0 var(--pad-x);
  transition:max-height .3s ease, padding .3s ease, opacity .3s ease;
}
.situmon_accordion-content.open{
  padding:var(--pad-y) var(--pad-x);
  opacity:1;
}

/* A行のレイアウト：Qと同じ左位置で、Aは左・本文は右に */
.situmon_accordion-answer{
  display: grid;
  grid-template-columns: var(--badge) 1fr; /* 左=バッジ 幅固定 / 右=本文 自動 */
  column-gap: var(--gap);
  align-items: start;                      /* 上揃え */
}
.situmon_accordion-answer p{
  margin:0; line-height:1.9;
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
	font-size:clamp(14px,1vw,16px);
}

/* 線は“アイテム全体”の下にだけ出す → 開閉に合わせてスルッと下に動く */
.situmon_accordion{ border-bottom: 1px solid var(--faq-line); }

/* ヘッダーの下線は消す（既存の指定の上書き） */
.situmon_accordion-header{ border-bottom: 0 !important; }