@charset "UTF-8";
/* CSS Document */
* {
  margin: 0;
  padding: 0;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
body {
  padding-bottom: 80px;
}
h2 {
  color: #07ab9b;
  text-align: center;
  margin-bottom: 45px;
  font-size: clamp(1rem, 0.841rem + 0.8vw, 1.438rem);
}
main {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
section {
  max-width: 960px; /* コンテナの最大幅 */
  margin: 0 auto;
  margin-bottom: 80px;
}
section h1 {
  /* 背景に左→右へのグラデーションを設定 */
  background: linear-gradient(to right, #2da3f3 0%, #62b19b 50%, #6cbf5a 100%);
  /* 文字色を白に */
  color: #fff;
  font-weight: 500;
  /* 背景が文字の後ろにもれなく表示されるようにブロック要素化 */
  /* 見やすくするために必要に応じて余白を追加（例） */
  margin-bottom: 30px;
  padding: 10px 20px;
}
#btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, 0.8);
  padding: 30px 0;
  z-index: 3;
}
#btn a {
  display: block;
  width: 250px;
  height: 60px;
  border-radius: 5px;
  background: linear-gradient(to right, #2da3f3 0%, #62b19b 50%, #6cbf5a 100%);
  /* 文字色を白に */
  color: #fff;
  text-align: center;
  line-height: 60px;
  margin: 0 auto;
  text-decoration: none;
}
/* --------------------------------------------------
   #sec01 以下に「水色背景＋上段3列・下段2列」のレイアウトを定義
   （.item の背景色を #d4f1fe、padding: 20px）
   (#sec01 の max-width を 960px、中央寄せ)
   (.item 間のスペースを最大 18px 確保)
   -------------------------------------------------- */
/* ========================================
   #sec01 全体：水色背景と内側余白、最大幅 960px で中央寄せ
   ======================================== */
header {
  background: url("head.png") no-repeat;
  background-size: auto;
  background-size: cover;
  height: clamp(20.625rem, 12.216rem + 42.05vw, 43.75rem);
  max-width: 100%;
  background-position: center;
  margin-bottom: 30px;
	position: relative;
}
/* ── 既存の #header ── */
#header {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding-top: clamp(8.125rem, 5.398rem + 13.64vw, 19.625rem);
  font-style: normal;
  text-align: center;
}
/* ── 新規：テキスト行を shrink-to-fit させる ── */
#header .header-inner {
  display: block;
}
/* ── 新規：背景＋余白スタイル ── */
#header .header-inner span {
  display: inline-block;
  background-color: #42a5f5; /* お好みの色に */
  color: #fff;
  padding: 8px; /* 上 8, 右20, 下8, 左8 */
  line-height: 1.2;
  /* font-size: inherit; ← 必要なら */
  font-size: 36px;
  font-family: "Zen Antique Soft", serif;
  font-weight: 400;
}
#header .header-inner span:last-child {
  margin-bottom: 0;
}
#header img {
  width: 90px;
  display: block;

	position: absolute;
  top: 30px;
  left: calc(50% - 45px);
}
#sec01 {
  box-sizing: border-box; /* パディング込みでサイズを計算 */
}
/* ========================================
   共通：row（行）要素に flex を適用
   ======================================== */
#sec01 .row {
  display: flex;
  margin-bottom: 20px; /* 上段と下段の間隔など調整用 */
}
/* ========================================
   上段（.row-top）：3列に並べる
   gap: 18px でアイテム間を固定
   ======================================== */
#sec01 .row-top {
  display: flex;
  gap: 18px; /* アイテム間を最大18px空ける */
}
/* 上段アイテム 3 つ並べる */
#sec01 .row-top .item {
  /* flex-basis を「(100% - (18px×2)) ÷ 3」＝「33.333% - 12px」で指定 */
  flex: 0 0 calc(33.333% - 12px);
  box-sizing: border-box;
  /* .item 固有スタイル：背景色とパディング */
  background-color: #d4f1fe;
  padding: 20px;
  /* 背景画像を下部に配置、はみ出したら隠す */
  background-image: url("sec01-bg.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: auto; /* オリジナル幅をそのまま使用 */
  overflow: hidden; /* はみ出した部分を隠す */
  /* 中身を縦並びにする */
  display: flex;
  flex-direction: column;
  align-items: center; /* 横方向の中央寄せ */
  justify-content: flex-start;
}
/* ========================================
   下段（.row-bottom）：2列に並べる
   gap: 18px でアイテム間を固定
   ======================================== */
#sec01 .row-bottom {
  display: flex;
  justify-content: center; /* 2アイテムを左右中央に揃える */
  gap: 18px; /* アイテム間を最大18px空ける */
  flex-wrap: wrap; /* 万一アイテム数が増えても折り返せる */
  box-sizing: border-box;
}
/* 下段アイテム 2 つ並べる */
#sec01 .row-bottom .item {
  /* flex-basis を「(100% - 18px) ÷ 2」＝「50% - 9px」で指定 */
  flex: 0 0 calc(50% - 9px);
  box-sizing: border-box;
  /* .item 固有スタイル：背景色とパディング */
  background-color: #d4f1fe;
  padding: 20px;
  /* 背景画像を下部に配置、はみ出したら隠す */
  background-image: url("sec01-bg.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain; /* オリジナル幅をそのまま使用 */
  overflow: hidden; /* はみ出した部分を隠す */
  /* 中身を縦並びにする */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
/* ========================================
   .item 内部：img＋テキストを縦並びに整える
   ======================================== */
/* 画像は上に、テキストは下に縦積み */
#sec01 .item img {
  display: block; /* レイアウト上の余計な隙間を消す */
  width: 100%; /* 親 .item 幅いっぱいに広げる */
  height: auto;
  margin-bottom: 10px; /* 画像とテキストの隙間 */
  box-sizing: border-box;
}
/* テキスト要素（例：<div class="text"> 内の <p> や <ul>） */
#sec01 .item .text {
  margin: 0;
  padding: 0;
  text-align: center; /* 中央寄せにする場合 */
  line-height: 1.4;
  color: #333;
  font-size: 14px;
}
/* ========================================
   下段（.row-bottom）の .item 内にある <ul> と <li> を左揃えにする
   ======================================== */
#sec01 .row-bottom .item .text ul, #sec01 .row-bottom .item .text li {
  text-align: left;
}
/* リストのインデント調整 */
#sec01 .row-bottom .item .text ul {
  padding-left: 1em; /* 左側にインデント */
  margin: 0; /* 上下の余白をリセット */
}
#sec01 .row-bottom .item .text li {
  margin-bottom: 4px; /* 各項目の下に少し余白を入れる */
}
/* ========================================
   共通：row（行）要素に flex を適用
   ======================================== */
#sec01 .row {
  display: flex;
  margin-bottom: 20px; /* 上段と下段の間隔など調整用 */
}
/* ========================================
   上段（.row-top）：3列に並べる
   gap: 18px でアイテム間を固定
   ======================================== */
#sec02 .row-top {
  display: flex;
  gap: 18px; /* アイテム間を最大18px空ける */
}
/* 上段アイテム 3 つ並べる */
#sec02 .row-top .item {
  /* flex-basis を「(100% - (18px×2)) ÷ 3」＝「33.333% - 12px」で指定 */
  flex: 0 0 calc(33.333% - 12px);
  box-sizing: border-box;
  /* .item 固有スタイル：背景色とパディング */
  background-color: #eafbe2;
  padding: 20px;
  /* 背景画像を下部に配置、はみ出したら隠す */
  background-image: url("sec02-bg.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover; /* オリジナル幅をそのまま使用 */
  overflow: hidden; /* はみ出した部分を隠す */
  /* 中身を縦並びにする */
  display: flex;
  flex-direction: column;
  align-items: center; /* 横方向の中央寄せ */
  justify-content: flex-start;
}
/* ========================================
   .item 内部：img＋テキストを縦並びに整える
   ======================================== */
/* 画像は上に、テキストは下に縦積み */
#sec02 .item img {
  display: block; /* レイアウト上の余計な隙間を消す */
  width: 100%; /* 親 .item 幅いっぱいに広げる */
  height: auto;
  margin-bottom: 10px; /* 画像とテキストの隙間 */
  box-sizing: border-box;
}
/* テキスト要素（例：<div class="text"> 内の <p> や <ul>） */
#sec02 .item .text {
  margin: 0;
  padding: 0;
  text-align: center; /* 中央寄せにする場合 */
  line-height: 1.4;
  color: #333;
  font-size: 14px;
}
/* ul の余白をリセット */
#sec03 ul {
  margin: 0;
  padding: 0;
}
/* li の装飾 */
#sec03 ul li {
  list-style: none; /* ●マークを消す */
  border-bottom: 1px dashed #000; /* 下線を破線に */
  padding: 0 0 0 10px; /* 上右下左 */
  margin-bottom: 20px;
}
/* dt・dd を横並びに */
#sec03 ul li dl {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  margin: 0; /* dl のデフォルトマージンをリセット */
  padding: 0;
}
/* dt の固定幅 */
#sec03 ul li dt {
  width: 140px;
  margin: 0; /* ブラウザデフォルトの余白をリセット */
  padding: 0;
}
/* dd の余白リセット（必要に応じて調整） */
#sec03 ul li dd {
  margin: 0;
  padding: 0;
}
#sec04 dl {
  display: flex;
}
#sec04 dt {
  margin-right: 40px;
}
#sec04 dd {
  width: 100%;
}
#sec04 dd h2 {
  text-align: left;
  font-size: 26px;
  padding-bottom: 5px;
  margin-bottom: 20px;
  border-bottom: 1px solid #000;
  color: #000;
  line-height: 25px;
}
#sec04 dd h2 span {
  display: inline-block;
  margin-right: 10px;
}
.faq {
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq dt, .faq dd {
  position: relative;
  padding-left: 35px; /* アイコン幅(27px)＋テキストとの余白(8px) */
  margin: 8px 0;
}
/* Qアイコン */
.faq dt::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 27px;
  height: 27px;
  background: url("faq01.png") no-repeat center center;
  background-size: contain;
}
/* Aアイコン */
.faq dd::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 27px;
  height: 27px;
  background: url("faq02.png") no-repeat center center;
  background-size: contain;
}
@media screen and (max-width:960px) {
  h2 {
    padding: 0 20px;
  }
  section {
    padding: 0 20px;
  }
  #header .header-inner {
    display: inline-flex; /* 横幅＝中身＋パディング になる */
    flex-direction: column; /* 縦積み */
    align-items: flex-start; /* 左寄せ */
  }
  /* ── 新規：背景＋余白スタイル ── */
  #header .header-inner span {
    padding: 8px 20px 8px 8px; /* 上 8, 右20, 下8, 左8 */
    margin-bottom: 20px; /* 行間 */
  }
  #sec01 .row {
    display: block;
    margin-bottom: 20px;
  }
  #sec01 .row-top .item {
    margin-bottom: 30px;
  }
  #sec01 .row-bottom .item {
    margin-bottom: 30px;
  }
  #sec02 .row-top {
    display: block;
  }
  #sec02 .row-top .item {
    margin-bottom: 30px;
  }
  #sec04 dl {
    display: block;
  }
  #sec04 dl dt {
    text-align: center;
    margin: 0 0 20px;
  }
  #sec04 dl dt img {
    width: 100%;
  }
  #sec04 dd h2 {
    line-height: 33px;
    text-align: center;
  }
  #sec04 h2 span {
    display: block;
  }
}