/********************************************
	▼ CTA用
*********************************************/
.btBox{
  width: 100%;
  max-width:1200px;
  margin: 5em auto 0;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}

.btBox_col{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2em;
  text-align: center;
  border:2px solid #1f3a5f;
  padding:3em;
  background-color:#fff;
}

.btBox_col a:hover{
  opacity:0.7;
}

.btBox_col img{
  width: 100%;
  height: auto;
  display: block;
  border:1px solid #ccc;
  border-bottom:none;
  box-sizing:border-box;
}

.btBox_col h4{
  font-size: clamp(1.3em, 4.5vw, 2em);
  color:#1f3a5f;
  border-bottom:1px dotted #1f3a5f;
  padding:0 0 0.2em;
  margin:0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.btBox_col p{
  padding: 0;
  margin:0;
  font-weight:bold;
  color:#000!important;
}


/* スマホ */
@media (max-width: 768px){
  .btBox{
    grid-template-columns: 1fr;
  }
  .banner-txt {
    text-align:left;
  }
  .btBox_col p{
  text-align:left;
  font-size:90%;
  }
}

/* ==========================
   説明会・資料DLボタン用
========================== */
/* ラッパー */
.btMain {
  width:100%;
  max-width: 300px;
  margin: 0 auto;
}


/* ボタン共通 */
.btMain a {
  display: block;
  padding: 0.5em 1.2em;
  border-radius: 4px;
  font-size:120%;
  text-decoration: none;
  font-weight: bold;
  box-sizing: border-box;
  position:relative;
  letter-spacing: 0.1em;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .15);
}

.btMain a::after {
  content: "\e06c";
  font-family: "Phosphor";
  position: absolute;
  right: 0.3em;
  top: 50%;
  transform: translateY(-50%);
}

.btMain a:hover {
  opacity:1;
}

/* btn01 */
.btMain .btn01 {
  background-color: #3a81c3;
  color: #fff;
  border: 2px solid #3a81c3;
}
.btMain a.btn01:hover {
  background-color: #fff;
  color: #2d3a4d;
  border: 2px solid #2d3a4d;
}

/* btn02 */
.btMain .btn02 {
  background-color: red;
  color: #fff;
  border: 2px solid red;
}
.btMain a.btn02:hover {
  background-color: #fff;
  color: #2d3a4d;
  border: 2px solid #2d3a4d;
}
















.ctaSection {
	width:100%;
	display:flex;
	flex-direction: column;
	align-items: center;
	gap:20px;
	padding:3em 1em;
	margin: 0;
	box-sizing: border-box;
	background:
  url("../img/common/bg_cta.png") center / cover no-repeat;
}
/* 見出しエリア（画像＋h3） */
.ctaHeading{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width:700px;
}

/* h3をセクション中央に固定（PC） */
@media (min-width: 769px){
  .ctaSection h3.heading{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: max-content;
    margin: 0;
  }
}

/* 画像：丸＋影＋レスポンシブ */
.ctaHeading__img{
  width: clamp(80px, 10vw, 120px);   /* ← 画面幅に追従 */
  aspect-ratio: 1 / 1;              /* 正方形キープ */
  border-radius: 100vh;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  border: 3px solid #ddd; /* 任意：縁取り */
  padding: 0.3em;
  box-sizing: border-box;
}

/* 既存の見出しはそのまま（中央寄せは維持） */
.ctaSection h3.heading{
  margin: 0;
}

/* スマホでは縦積みにする（任意だが推奨） */
@media (max-width: 768px){
  .ctaHeading{
    flex-direction: column;
	gap:1em;
  }
}
.ctaSection h3.heading {
    font-size: clamp(1.5em, 4.5vw, 2.5em);
    font-weight: bold;
    color:#1f3a5f;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4));
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", "游明朝", "MS PMincho", serif;
}
.ctaSection .heading-sub {
	width:100%;
	max-width:600px;
    color:#1f3a5f;
    margin: 0;
    padding: 0;
	text-align:center;
}
.day-info {
	width:100%;
	max-width:600px;
	box-sizing: border-box;
	padding:1em;
	text-align:center;
	color:#ffeb00;
	line-height:1.5;
	background-color: #1f3a5f;
}
.day-info p {
	font-weight:bold;
	font-size:1.5em;
	padding:0;
	margin:0;
}
.b-hours {
	position: relative;
	padding: 0 0 0 1.3em;
	margin:0;
}
.b-hours i {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 768px){
	.day-info p {
	font-size:1.1em;
	}
	.b-hours{
		font-size:0.8em;
	}
	.ctaSection .heading-sub {
	text-align:left;
}
}

/* ================================
   ▼ CTAボタンエリア 2カラム
================================ */

/* 横並び */
.cta_inner_btn{
  display: flex;
  gap: 2em;
  align-items: stretch;
  width:100%;
  max-width:750px;
}

/* 各カラム50% */
.cta_inner_btn .btnarea01,
.cta_inner_btn .btnarea02{
  width: 50%;
  display: flex;
  flex-direction: column; /* ← 中身縦並び */
  gap: 1em;
}
.cta_inner_btn .btnarea01{
  align-items:center;
}
.cta_inner_btn .btnarea02{
  background-color:#fffef7;
  position:relative;
  padding:1em 1em 0;
  margin:0;
  border-radius: 0.5em;
  box-sizing:border-box;
  background:
    url("../img/common/img-first.png") right 0 bottom 0 no-repeat,
    #fffef7;
  background-size: 120px auto;
}


/* ================================
   ▼ ボタン共通整形（任意）
================================ */

.cta_inner_btn a{
  text-decoration: none;
  border-radius: 0.5em;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  border:2px solid #fff;
}

/* 電話ボタン例 */
.btn_phone{
  background:#ffeb00;
  color:#1f3a5f;
  width:100%;
  text-align:center;
  padding:0.5em 0;
}
.btn_phone:hover{
  color:red;
}
.btn_phone_inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* ← 頭揃え維持 */
  gap: 0.2em;
  padding: 0;
  width: fit-content;        /* ← 追加：中身幅にする */
  margin: 0 auto;            /* ← 追加：中央に配置 */
}

/* 今すぐ（斜線の表示領域を確保） */
.btn_phone_inner span.catch-now{
  display: inline-block;
  font-size: 0.8em;
  position: relative;
  padding: 0 1.2em;          /* ← 戻す（左右に余白が必要） */
  overflow: visible;         /* ← 念のため */
}
.btn_phone_inner span.catch-now::before,
.btn_phone_inner span.catch-now::after{
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 1px;
  background: #461900;
}

.btn_phone_inner span.catch-now::before{
  left:0;
  transform:translateY(-50%) rotate(60deg);
}

.btn_phone_inner span.catch-now::after{
  right:0;
  transform:translateY(-50%) rotate(-60deg);
}
.btn_phone_inner p{
  padding:0;
  margin:0;
  font-weight:bold;
}
.btn_phone_inner p span{
  color:red;
}
.btnarea01 p.num{
  padding:0;
  margin:0;
  font-weight:bold;
  font-size:1.6em;
  letter-spacing:0.1em;
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", "游明朝", "MS PMincho", serif;
}

.btnarea01 > p {
  margin-top: 1.5em;
  margin-bottom: 0;
}
.btnarea01 ul.sns-icons {
  display: flex;
  justify-content: center;
  align-items:center;
  gap: 20px;
  padding: 0;
  margin:0;
  list-style:none;
}

.btnarea01 ul.sns-icons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width:50px;
  height:50px;
  border:none;
  border-radius: 100vh;
  background-color:#fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  padding:0.2em;
}
.btnarea01 ul.sns-icons li a img {
  width:70%;
  height:auto;
  padding:0;
  margin:0;
}
.btnarea01 ul.sns-icons li a:hover {
  opacity:0.7;
}

.cta_inner_btn .btnarea02{
  background-color:#fffef7;
  position:relative;
  padding:1em;
  margin:0;
  border-radius: 0.5em;
}
/* LINE */
.btn_line{
  position: relative;
  background:#06c755;
  color:#fff;
  width:80%;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0.5em 0;
}
.btn_line::before{
  content:"";
  position:absolute;
  left:1em;                 /* ← 左固定 */
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:35px;
  background:url("../img/common/line.png") center / contain no-repeat;
}

.btn_line p,
.btn_mail p{
  font-weight:bold;
  font-size:1.2em;
  padding:0;
  margin:0;
}

/* メール */
.btn_mail{
  position: relative;
  background:#0670c7;
  color:#fff;
  width:80%;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0.5em 0;
}
.btn_mail::before{
  content: "\e214";
  font-family: "Phosphor";
  font-size: 30px;
  font-weight:normal;
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
}

.cta_inner_btn .btnarea02 h4{
  background: #21a5b6;
  padding: 0.5em;
  margin:0;
  border-radius: 100vh;
  text-align: center;
  color: #fff;
  
}
.ctaSection h5.heading {
  font-size: clamp(1.3em, 4.5vw, 1.6em);
  font-weight: bold;
  background: linear-gradient(to bottom, #21a5b6, #1f3a5f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  border-bottom:1px dotted #1f3a5f;
  margin: 0;
  padding: 0 0 0.3em;
  text-align: center;
  letter-spacing: 0.1em;
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", "游明朝", "MS PMincho", serif;
}
.ctaSection h5.heading span {
  font-size: clamp(0.5em, 4.5vw, 0.8em);
}
.cta_inner_btn .btnarea02 p{
  padding: 0;
  margin:0;
  
}

/* はじめての方へ */
.btn_first{
  position: relative;
  background:#21a5b6;
  color:#fff;
  width:100%;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0.5em 0;
}
.btn_first p{
  font-weight:bold;
}
.btn_first::after{
  content: "\e06c";
  font-family: "Phosphor";
  font-size: 20px;
  font-weight:normal;
  position: absolute;
  right: 0.2em;
  top: 50%;
  transform: translateY(-50%);
}
.btnarea02_inner{
  display: flex;
  align-items: center;
  gap: 1em;
}

/* 左 60% */
.btnarea02_inner > div:first-child{
  width: 60%;
}

/* 右 40% */
.btnarea02_inner > div:last-child{
  width: 40%;
}

.btnarea02 p.return-cash{
  font-size:0.75em;
  color:red;
  margin-bottom:1em;
  font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "Yu Mincho", "游明朝", "MS PMincho", serif;
}

/* 画像崩れ防止 */
.btnarea02_inner img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================================
   ▼ スマホ時は縦並び
================================ */

@media screen and (max-width: 999px){

  .cta_inner_btn{
    flex-direction: column;
  }

  .cta_inner_btn .btnarea01,
  .cta_inner_btn .btnarea02{
    width: 100%;
  }

}
