@charset "utf-8";

img { width: 100%;}
.sp { display: none;}
img.radius { border-radius: 13px;}
img.radius2 { border-radius: 7px;}

@media only screen and (max-width: 480px) {
.sp { display: inherit;}
img.pc { display: none;}
img.radius { border-radius: calc(18 / 375 * 100vw);}
img.radius2 { border-radius: calc(10 / 375 * 100vw);}

}


body {

    background-image:
    url("../img/hed_bg3_pc.jpg");

    background-repeat:
    repeat-y;

    background-position:
    center;

    background-size:
    contain;

}




.banner {
	position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.banner_inner {
	width: 400px;
	margin: 0 auto;
	padding: 20px 0 15px 0;
	font-size: 0;
	line-height: 0;
}


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

.banner_inner {
	width: auto;
	margin: -5px auto 0 auto;
	padding: 0px 0 12px 0;
	font-size: 0;
	line-height: 0;
}


}


/* =================================
   Lazy Fade Up（下からフェードイン）
================================= */
.fadeInLeft,
.fadeInRight,
.fadeInUp,
.bounceIn {
  animation-fill-mode: both;
}

.js-fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.20s; /* ← ここで遅延（例：0.15秒） */
}

.js-fadeup2 {
  opacity: 0;
}

.js-fadeup3 {
  opacity: 0;
  transition-delay: 2s;
}

.js-fadeup.is-show {
  opacity: 1;
  transform: translateY(0);
}

.js-fadeup2.is-show {
  opacity: 1;
  transform: translateY(0);
}


.js-fadeup3.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* IntersectionObserverで付与 */
.js-fadeup.is-animated {
  opacity: 1;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}




.caution1 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.8125rem;
	line-height: 1.6;
	font-weight:400;

}

@media only screen and (max-width: 480px) {
.caution1 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.6875rem;
	line-height: 1.6;
	font-weight:400;

}
}




header {
	position: relative;
	overflow: hidden;
    background-image:
    url("../img/hed_bg1_pc.png"),
    url("../img/hed_bg2_pc.png");

    background-repeat:
    no-repeat,
    no-repeat;

    background-position:
    center,
    center;

    background-size:
    cover,
    cover;
}

header section {
	width: 1000px;
	margin: 0 auto;

}


header .logo {
	width: 226px; 
	padding:  3px  7px  4px 4px;
	background: #FFF;
	font-size: 0;
	line-height: 0;
}

header h1 {
	width: 470px; 
	margin: 5px auto 18px auto;
	font-size: 0;
	line-height: 0;
}

header .con1 {
	position: relative;
	z-index: 2;
	width: 400px; 
	margin: -40px 0 8px 0px;
	font-size: 0;
	line-height: 0;
}


header .con2 {
	position: relative;
	z-index: 3;
	width: 400px; 
	margin:-380px 0 8px 590px;
	font-size: 0;
	line-height: 0;
}

header .con3 {
	position: relative;
	z-index: 1;
	width: 400px;
    margin: -220px 0 -28px 302px;
	font-size: 0;
	line-height: 0;
}

header .con4 {
	position: relative;
	z-index: 3;
	width: 700px; 
	margin: 0 0 0 180px;
	padding-bottom:  30px;
	font-size: 0;
	line-height: 0;
}

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

header {
	position: relative;
	overflow: hidden;
	background: none;
}

header section {
	width: auto;
	margin: 0 auto;
    background-image:
    url("../img/hed_bg1.png"),
    url("../img/hed_bg2.png"),
    url("../img/hed_bg3.jpg");

    background-repeat:
    no-repeat,
    no-repeat,
    repeat;

    background-position:
    center,
    center,
    center;

    background-size:
    cover,
    cover,
    cover;

}


header .logo {
	width: calc(96 / 375 * 100vw); 
	padding:  calc(3 / 375 * 100vw)  calc(7 / 375 * 100vw)  calc(4 / 375 * 100vw) calc(4 / 375 * 100vw);
	background: #FFF;
	font-size: 0;
	line-height: 0;
}

header h1 {
	width: calc(287 / 375 * 100vw); 
	margin: calc(15 / 375 * 100vw) auto calc(8 / 375 * 100vw) auto;
	font-size: 0;
	line-height: 0;
}

header .con1 {
	position: relative;
	z-index: 2;
	width: calc(274.6 / 375 * 100vw); 
	margin: calc(0 / 375 * 100vw) 0 calc(8 / 375 * 100vw)  calc(-72 / 375 * 100vw) ;
	font-size: 0;
	line-height: 0;
}

header .con2 {
	position: relative;
	z-index: 3;
	width: calc(292 / 375 * 100vw); 
	margin: calc(-270 / 375 * 100vw) 0 calc(8 / 375 * 100vw)  calc(193 / 375 * 100vw);
	font-size: 0;
	line-height: 0;
}

header .con3 {
	position: relative;
	z-index: 1;
	width: calc(276.4 / 375 * 100vw); 
	margin: calc(-90 / 375 * 100vw) 0 calc(-25 / 375 * 100vw) calc(78 / 375 * 100vw);
	font-size: 0;
	line-height: 0;
}

header .con4 {
	position: relative;
	z-index: 3;
	width: calc(365 / 375 * 100vw); 
	margin: 0 0 0 calc(10 / 375 * 100vw);
	padding-bottom:  calc(25 / 375 * 100vw);
	font-size: 0;
	line-height: 0;
}

}







.cta-btn {
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  width: 480px;
  margin:  0px auto 0 auto;
  background: #32a866;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 6px 6px 0 rgba(50, 168, 102, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 20px 20px 20px 45px;
}
.banner .cta-btn {
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  width: 280px;
  margin:  0px auto 0 auto;
  background: #32a866;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 6px 6px 0 rgba(50, 168, 102, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 10px 10px 10px 25px;
}

/* hover */
.cta-btn:hover {
  transform: translate(4px, 4px);
  box-shadow: 6px 6px 0 rgba(50, 168, 102, 0.25);
}

.cta-text {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.banner .cta-text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 右の丸アイコン */
.cta-icon {
	font-family: "Noto Sans JP", sans-serif;
  width: 33px;
  height: 33px;
  background: #f9ff5a;
  border-radius: 50%;
  color: #32a866;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
    	text-align: center;

}

/* SP対応 */
@media only screen and (max-width: 480px) {
  .cta-btn {
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  width: calc(335 / 375 * 100vw);
  margin:  calc(20 / 375 * 100vw) auto 0 auto;
  background: #32a866;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: calc(6 / 375 * 100vw) calc(6 / 375 * 100vw) 0 rgba(50, 168, 102, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding:  calc(10 / 375 * 100vw) calc(10 / 375 * 100vw)  calc(10 / 375 * 100vw) calc(30 / 375 * 100vw);
  }

.banner .cta-btn {
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  width: calc(335 / 375 * 100vw);
  margin:  calc(20 / 375 * 100vw) auto 0 auto;
  background: #32a866;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: calc(6 / 375 * 100vw) calc(6 / 375 * 100vw) 0 rgba(50, 168, 102, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding:  calc(10 / 375 * 100vw) calc(10 / 375 * 100vw)  calc(10 / 375 * 100vw) calc(30 / 375 * 100vw);
}


  .cta-text {
    font-size: 24px;
	  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;

  }
.banner .cta-text {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
}



.cta-icon {
	font-family: "Noto Sans JP", sans-serif;
  width: calc(33 / 375 * 100vw);
  height: calc(33 / 375 * 100vw);
  background: #f9ff5a;
  border-radius: 50%;
  color: #32a866;
	font-size: 0.825rem;
	line-height: 1;
	font-weight:900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
    	text-align: center;

}

}
















section#sec2 {
	width: auto;
	margin: 0 auto;
    background-image:
    url("../img/sec2_bg1_pc.png"),
    url("../img/sec2_bg2_pc.png");

    background-repeat:
    no-repeat,
    no-repeat;

    background-position:
    center,
    center;

    background-size:
    cover,
    cover;
}

section#sec2 .sec2 {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 30px;
}

section#sec2 h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2.2rem;
	line-height: 1;
	color: #e85e21;
	font-weight:800;
	margin-bottom: 40px;
	padding:  90px 0  40px 0;
	text-align: center;
	background: url("../img/box2_title_bg.png") no-repeat center 60px;
	background-size:240px auto;
}

section#sec2 .text1 {
	margin-top: 22px;
    font-family: "Noto Sans JP", sans-serif;
	font-weight:800;
	font-size: 1.3rem;
	line-height: 1.6;
	text-align: center;
}

section#sec2 .img1 {
	width: 186px; 
	margin:  22px auto 22px auto;
	font-size: 0;
	line-height: 0;
}

section#sec2 .img2 {
	width: 765px; 
	margin: 0 auto 40px auto;
	font-size: 0;
	line-height: 0;
}


@media only screen and (max-width: 480px) {
section#sec2 {
	width: auto;
	margin: 0 auto;
    background-image:
    url("../img/sec2_bg1.png"),
    url("../img/sec2_bg2.png"),
    url("../img/sec_bg_common.jpg");

    background-repeat:
    no-repeat,
    no-repeat,
    repeat;

    background-position:
    center,
    center,
    center;

    background-size:
    cover,
    cover,
    cover;
}

section#sec2 .sec2 {
	width: auto;
	margin: 0 auto;
}

section#sec2 h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5625rem;
	line-height: 1;
	color: #e85e21;
	font-weight:800;
	margin-bottom: calc(40 / 375 * 100vw);
	padding:  calc(80 / 375 * 100vw) 0  calc(40 / 375 * 100vw) 0;
	text-align: center;
	background: url("../img/box2_title_bg.png") no-repeat center 60px;
	background-size:calc(185.8 / 375 * 100vw) auto;
}

section#sec2 .text1 {
	margin-top: calc(-25 / 375 * 100vw);
    font-family: "Noto Sans JP", sans-serif;
	font-weight:800;
	font-size: 1.125rem;
	line-height: 1.6;
	text-align: center;
}

section#sec2 .img1 {
	width: calc(135 / 375 * 100vw); 
	margin:  calc(22 / 375 * 100vw) auto calc(22 / 375 * 100vw) auto;
	font-size: 0;
	line-height: 0;
}

section#sec2 .img2 {
	width: calc(335 / 375 * 100vw); 
	margin: 0 auto calc(30 / 375 * 100vw) auto;
	font-size: 0;
	line-height: 0;
}


}












section#sec3 {
	width: auto;
	margin: 0 auto;
    background-image:
    url("../img/sec3_bg1_pc.png"),
    url("../img/sec3_bg2_pc.png");

    background-repeat:
    no-repeat,
    no-repeat;

    background-position:
    top center,
    top center;

    background-size:
    cover,
    cover;
}

section#sec3 .sec3 {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 40px;
}

section#sec3 h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2.2rem;
	line-height: 1;
	color: #0d83cc;
	font-weight:800;
	margin-bottom: 40px;
	padding:  40px 0 40px 0;
	text-align: center;
	background: url("../img/box3_title_bg.png") no-repeat center 10px;
	background-size:240px auto;
}

@media only screen and (max-width: 480px) {
section#sec3 {
	width: auto;
	margin: 0 auto;
    background-image:
    url("../img/sec3_bg1.png"),
    url("../img/sec3_bg2.png"),
    url("../img/sec_bg_common.jpg");

    background-repeat:
    no-repeat,
    no-repeat,
    repeat;

    background-position:
    top center,
    top center,
    center;

    background-size:
    cover,
    cover,
    cover;
}

section#sec3 .sec3 {
	width: auto;
	margin: 0 auto;
}

section#sec3 h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5625rem;
	line-height: 1;
	color: #0d83cc;
	font-weight:800;
	margin-bottom: calc(40 / 375 * 100vw);
	padding:  calc(30 / 375 * 100vw) 0  calc(40 / 375 * 100vw) 0;
	text-align: center;
	background: url("../img/box3_title_bg.png") no-repeat center 10px;
	background-size:calc(185.8 / 375 * 100vw) auto;
}
}





section#sec3 {
  position: relative;
  z-index: 10;
}

section#sec3 .sec3 {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 16px;
}

section#sec3 h2 {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 30px;
}

section#sec3 .plan-tabs {
  max-width: 600px;
  margin: 0 auto;
}

/* タブボタンエリア */
section#sec3 .tab-buttons {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* タブボタン */
section#sec3 .tab-btn {
  font-family: "Noto Sans JP", sans-serif;
  flex: 1;
  padding: 18px 10px;
  border: none;
  border-radius: 16px;
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 700;
  background: #e5e5e5;
  color: #333;
  cursor: pointer;
  transform: translateY(6px);
  transition: transform 0.2s ease, background 0.3s;
}

/* 押されている状態 */
section#sec3 .tab-btn.active {
  transform: translateY(0);
  color: #fff;
}

/* 左タブ */
section#sec3 .tab-btn[data-tab="tab1"].active {
  background: #5b77b9;
}

/* 右タブ */
section#sec3 .tab-btn[data-tab="tab2"].active {
  background: #6dbb2d;
}

/* ===============================
   タブコンテンツ
================================ */
section#sec3 .tab-contents {
  margin-top: -10px;
  padding-top: 40px;
  position: relative;
  z-index: 1;
}

/* 非表示 */
section#sec3 .tab-content {
  display: none;
  animation: tabFade 0.3s ease;
}

/* 表示中 */
section#sec3 .tab-content.active {
  display: block;
}

section#sec3 .tab-btn {
  position: relative; /* ▼の基準 */
}

section#sec3 .tab-btn[data-tab="tab1"].active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px; /* タブの下に出す */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #5b77b9; /* タブと同じ青 */
}
section#sec3 .tab-btn[data-tab="tab2"].active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid #6dbb2d; /* タブと同じ緑 */
}


/* フェード */
@keyframes tabFade {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   SP微調整
================================ */
@media (max-width: 480px) {
  section#sec3 .tab-btn {
    padding: 14px 8px;
    font-size: 1.25rem;
	line-height: 1.1;
    border-radius: 14px;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-weight:800;

  }
    section#sec3 .tab-btn.active::after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top-width: 10px;
    bottom: -10px;
  }
}



/* ===============================
   More Button
================================ */
section#sec3 .more-wrap {
  margin: 30px auto;
  max-width: 600px;
}

/* ボタン本体 */
section#sec3 .more-btn {
  width: 100%;
  margin-top: 30px;
  padding: 18px 30px 18px 25px;
  border-radius: 999px;
  border: none;
  background: #3e99db;
  color: #FFF;
  font-size: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-shadow: 0px 5px 15px 0px rgba(165, 165, 165, 0.16);
}

/* 右側の＋／− */
section#sec3 .more-icon {
  position: relative;
  width: 26px;
  height:26px;
}

/* 横線 */
section#sec3 .more-icon::before,
section#sec3 .more-icon::after {
  content: "";
  position: absolute;
  background: #FFF;
transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.25s ease;
}

section#sec3 .more-icon::before {
  width:26px;
  height: 6px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

section#sec3 .more-icon::after {
  width: 6px;
  height: 26px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* 開いた状態（− にする） */
section#sec3 .more-btn.is-open .more-icon::after {
  opacity: 0;
}


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

section#sec3 .more-wrap {
  margin: 30px auto;
  max-width: 1000px;
}

/* ボタン本体 */
section#sec3 .more-btn {
  width: 100%;
  margin-top: calc(20 / 375 * 100vw);
  padding: calc(18 / 375 * 100vw) calc(30 / 375 * 100vw) calc(18 / 375 * 100vw) calc(25 / 375 * 100vw);
  border-radius: 999px;
  border: none;
  background: #3e99db;
  color: #FFF;
  font-size: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-shadow: 0px 5px 15px 0px rgba(165, 165, 165, 0.16);
}

/* 右側の＋／− */
section#sec3 .more-icon {
  position: relative;
  width: calc(26 / 375 * 100vw);
  height: calc(26 / 375 * 100vw);
}

/* 横線 */
section#sec3 .more-icon::before,
section#sec3 .more-icon::after {
  content: "";
  position: absolute;
  background: #FFF;
transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.25s ease;
}

section#sec3 .more-icon::before {
  width: calc(26 / 375 * 100vw);
  height: calc(6 / 375 * 100vw);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

section#sec3 .more-icon::after {
  width: calc(6 / 375 * 100vw);
  height: calc(26 / 375 * 100vw);
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* 開いた状態（− にする） */
section#sec3 .more-btn.is-open .more-icon::after {
  opacity: 0;
}
}
/* ===============================
   More Content
================================ */
section#sec3 .more-content {
  display: none;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

section#sec3 .more-content.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
  margin-top: 16px;
}


section#sec3 h3 {
  font-size: 1.375rem;
  line-height: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  border-bottom: 4.5px solid #3e99db;
  margin-bottom: 25px;
  padding-bottom: 15px;
}

section#sec3 p.text {
  font-size: 1rem;
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}

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

section#sec3 h3 {
  font-size: 1.375rem;
  line-height: 1;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  border-bottom: 4.5px solid #3e99db;
  margin-bottom: calc(25 / 375 * 100vw);
  padding-bottom: calc(15 / 375 * 100vw);
}

section#sec3 p.text {
  font-size: 0.875rem;
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
}











section#sec4 {
	width: auto;
	margin: 0 auto;
    background-image:
    url("../img/sec4_bg1_pc.png"),
    url("../img/sec4_bg2_pc.png");

    background-repeat:
    no-repeat,
    no-repeat;

    background-position:
    top center,
    top center;

    background-size:
    cover,
    cover;
}

section#sec4 .sec4 {
	width: 800px;
	margin: 0 auto;
	padding-bottom: 30px;
}

section#sec4 h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2.2rem;
	line-height: 0.9;
	color: #589b2c;
	font-weight:800;
	margin-bottom: 40px;
	padding:  80px 0  20px 0;
	text-align: center;
	background: url("../img/box4_title_bg.png") no-repeat center 50px;
	background-size:240px auto;
}
section#sec4 h2 span {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1rem;
	line-height: 1;
	color: #589b2c;
	font-weight:400;
}

@media screen and (min-width: 481px) {

  section#sec4 .speechBubble {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
  }

  section#sec4 .speechBubble p {
    margin-bottom: 0; /* grid-gap を使う */
  }

}
section#sec4 .speechBubble {
  position: relative;
  width: 800px;
  margin: 0 auto 30px auto;
  padding: 40px 40px 10px 40px;
  border: 2px solid #65b731;
  border-radius: 20px;
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

section#sec4 .speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 0 0 20px;
  border-color: #65b731 transparent transparent;
  translate: -50% 100%;
  transform: skew(-25deg);
  transform-origin: top;
}

section#sec4 .speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 15.2px 0 0 15.2px;
  border-color: #ffffff transparent transparent;
  translate: calc(-50% + 0.4px) 100%;
  transform: skew(-25deg);
  transform-origin: top;
}

section#sec4 .speechBubble p {
	margin-bottom: 30px;
    font-size: 0;
    line-height: 0;
}

section#sec4 .marker-wrap {
  text-align: center;   /* 画面幅基準でセンタ */
  width: 100%;
  margin-bottom: 6px;
}

section#sec4 .marker {
font-family: "Noto Sans JP", sans-serif;
  display: inline-block;
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.4;
  padding: 0.15em 0.35em;

  background: linear-gradient(
    transparent 52%,
    #fff27a 52%
  );
}

section#sec4 .caution1 {
	width: 800px;
	margin: 35px auto  25px auto;
}



@media only screen and (max-width: 480px) {
section#sec4 {
	width: auto;
	margin: 0 auto;
    background-image:
    url("../img/sec4_bg1.png"),
    url("../img/sec4_bg2.png"),
    url("../img/sec_bg_common.jpg");

    background-repeat:
    no-repeat,
    no-repeat,
    repeat;

    background-position:
    top center,
    top center,
    center;

    background-size:
    cover,
    cover,
    cover;
}

section#sec4 .sec4 {
	width: auto;
	margin: 0 auto;
}

section#sec4 h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5625rem;
	line-height: 0.9;
	color: #589b2c;
	font-weight:800;
	margin-bottom: calc(40 / 375 * 100vw);
	padding:  calc(70 / 375 * 100vw) 0  calc(20 / 375 * 100vw) 0;
	text-align: center;
	background: url("../img/box4_title_bg.png") no-repeat center 50px;
	background-size:calc(185.8 / 375 * 100vw) auto;
}
section#sec4 h2 span {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.75rem;
	line-height: 1;
	color: #589b2c;
	font-weight:400;
}


section#sec4 .speechBubble {
  position: relative;
  width: calc(335 / 375 * 100vw);
  margin: 0 auto calc(30 / 375 * 100vw) auto;
  padding: calc(30 / 375 * 100vw) calc(30 / 375 * 100vw) calc(10 / 375 * 100vw) calc(30 / 375 * 100vw);
  border: 2px solid #65b731;
  border-radius: calc(20 / 375 * 100vw);
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

section#sec4 .speechBubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 0 0 20px;
  border-color: #65b731 transparent transparent;
  translate: -50% 100%;
  transform: skew(-25deg);
  transform-origin: top;
}

section#sec4 .speechBubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 15.2px 0 0 15.2px;
  border-color: #ffffff transparent transparent;
  translate: calc(-50% + 0.4px) 100%;
  transform: skew(-25deg);
  transform-origin: top;
}

section#sec4 .speechBubble p {
	margin-bottom: calc(23 / 375 * 100vw);
    font-size: 0;
    line-height: 0;
}

section#sec4 .marker-wrap {
  text-align: center;   /* 画面幅基準でセンタ */
  width: 100%;
  margin-bottom: calc(6 / 375 * 100vw);
}

section#sec4 .marker {
font-family: "Noto Sans JP", sans-serif;
  display: inline-block;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.4;
  padding: 0.15em 0.35em;

  background: linear-gradient(
    transparent 52%,
    #fff27a 52%
  );
}

section#sec4 .caution1 {
	width: calc(335 / 375 * 100vw);
	margin: calc(35 / 375 * 100vw) auto  calc(25 / 375 * 100vw) auto;
}



}












section#sec5 {
    background-image:
    url("../img/sec5_bg1_pc.png"),
    url("../img/sec5_bg2_pc.png");

    background-repeat:
    no-repeat,
    no-repeat;

    background-position:
    top center,
    top center;

    background-size:
    cover,
    cover;
}

section#sec5 .sec5 {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 30px;
}

section#sec5 h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2rem;
	line-height: 0.9;
	color: #dd9300;
	font-weight:800;
	margin-bottom: 40px;
	padding:  90px 0  40px 0;
	text-align: center;
	background: url("../img/box5_title_bg.png") no-repeat center 50px;
	background-size:240px auto;
}

section#sec5 .box {
	width: 800px;
	margin: 0 auto 20px auto;
}

section#sec5 p {
	width: 380px;
	margin: 0 auto 30px auto;
	font-size: 0;
	line-height: 0;
	
}
section#sec5 p img {
	border-radius: 10px;
	box-shadow: 0px 5px 15px 0px rgba(153, 62, 0, 0.16);
}

@media screen and (min-width: 481px) {

  section#sec5 .sec5 .box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
  }

  section#sec5 .sec5 p {
    margin-bottom: 0; /* grid-gap を使う */
  }

}


@media only screen and (max-width: 480px) {
section#sec5 {
	width: auto;
	margin: 0 auto;
    background-image:
    url("../img/sec5_bg1.png"),
    url("../img/sec5_bg2.png"),
    url("../img/sec_bg_common.jpg");

    background-repeat:
    no-repeat,
    no-repeat,
    repeat;

    background-position:
    top center,
    top center,
    center;

    background-size:
    cover,
    cover,
    cover;
}

section#sec5 .sec5 {
	width: auto;
	margin: 0 auto;
}

section#sec5 h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5625rem;
	line-height: 0.9;
	color: #dd9300;
	font-weight:800;
	margin-bottom: calc(40 / 375 * 100vw);
	padding:  calc(70 / 375 * 100vw) 0  calc(40 / 375 * 100vw) 0;
	text-align: center;
	background: url("../img/box5_title_bg.png") no-repeat center 50px;
	background-size:calc(185.8 / 375 * 100vw) auto;
}



section#sec5 .box {
	width: auto;
	margin: 0;
}

section#sec5 p {
	width: calc(335 / 375 * 100vw);
	margin: 0 auto calc(20 / 375 * 100vw) auto;
	font-size: 0;
	line-height: 0;
	
}
section#sec5 p img {
	border-radius: calc(10 / 375 * 100vw);
	box-shadow: 0px 5px 15px 0px rgba(153, 62, 0, 0.16);
}
}












section#sec6 {
	background: #FFF;
	width: auto;
	margin: 0 auto;
/*    background-image:
    url("../img/sec4_bg1.png"),
    url("../img/sec4_bg2.png"),
    url("../img/sec_bg_common.jpg");

    background-repeat:
    no-repeat,
    no-repeat,
    repeat;

    background-position:
    top center,
    top center,
    center;

    background-size:
    cover,
    cover,
    cover;*/
}

section#sec6 .sec6 {
	width: 1000px;
	margin: 0 auto;
	padding-bottom: 30px;
}

section#sec6 h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 2.2rem;
	line-height: 0.9;
	color: #5976ba;
	font-weight:800;
	margin-bottom: 40px;
	padding:  90px 0  40px 0;
	text-align: center;
	background: url("../img/box6_title_bg.png") no-repeat center 50px;
	background-size:240px auto;
}


/* 全体 */
section#sec6 .qa {
  width: 800px;
  margin: 0 auto;
}

/* Q&A1セット */
section#sec6 .qa-item {
   margin-bottom: 10px;
}

/* 質問 */
section#sec6 .qa-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #5b77b9;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin: 0;
}

/* Qアイコン */
section#sec6 .q-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;

  background: url("../img/q_icon.png") no-repeat center / contain;

  /* 微調整用 */
  align-self: center;
  margin-top: 6px;
}

/* テキスト */
section#sec6 .q-text {
  flex: 1;
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 1rem;
}

/* ＋／− */
section#sec6 .q-toggle {
  position: relative;
  width: 15px;
  height: 15px;
}

section#sec6 .q-toggle::before,
section#sec6 .q-toggle::after {
  content: "";
  position: absolute;
  background: #fff;
  transition: transform 0.3s ease;
}

section#sec6 .q-toggle::before {
  width: 15px;
  height: 3.5px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

section#sec6 .q-toggle::after {
  width:  3.5px;
  height: 15px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}



/* 回答 */
section#sec6 .qa-answer {
  max-height: 0;
  overflow: hidden;
  background: #eef3ff;
  border-radius: 12px;
  margin-top: 8px;
  transition: max-height 0.35s ease;
}

section#sec6 .qa-answer p {
  padding: 30px; /* 下だけ多め */
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 1rem;
line-height: 1.6;
}

section#sec6 .qa-answer p span {
	color: #D3191C;
}

/* 開いている状態 */
section#sec6 .qa-item.is-open .qa-answer {
  max-height: 500px; /* 十分大きめ */
}

section#sec6 .qa-item.is-open .q-toggle::after {
  transform: scaleY(0); /* ＋ → − */
}


@media only screen and (max-width: 480px) {
section#sec6 {
	width: auto;
	margin: 0 auto;
/*    background-image:
    url("../img/sec4_bg1.png"),
    url("../img/sec4_bg2.png"),
    url("../img/sec_bg_common.jpg");

    background-repeat:
    no-repeat,
    no-repeat,
    repeat;

    background-position:
    top center,
    top center,
    center;

    background-size:
    cover,
    cover,
    cover;*/
}

section#sec6 .sec6 {
	width: auto;
	margin: 0 auto;
}

section#sec6 h2 {
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.5625rem;
	line-height: 0.9;
	color: #5976ba;
	font-weight:800;
	margin-bottom: calc(40 / 375 * 100vw);
	padding:  calc(70 / 375 * 100vw) 0  calc(40 / 375 * 100vw) 0;
	text-align: center;
	background: url("../img/box6_title_bg.png") no-repeat center 50px;
	background-size:calc(185.8 / 375 * 100vw) auto;
}


/* 全体 */
section#sec6 .qa {
  width: calc(335 / 375 * 100vw);
  margin: 0 auto;
}

/* Q&A1セット */
section#sec6 .qa-item {
   margin-bottom: 10px;
}

/* 質問 */
section#sec6 .qa-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(12 / 375 * 100vw) calc(20 / 375 * 100vw);
  background: #5b77b9;
  color: #fff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin: 0;
}

/* Qアイコン */
section#sec6 .q-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;

  background: url("../img/q_icon.png") no-repeat center / contain;

  /* 微調整用 */
  align-self: center;
  margin-top: 6px;
}

/* テキスト */
section#sec6 .q-text {
  flex: 1;
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 0.875rem;
}

/* ＋／− */
section#sec6 .q-toggle {
  position: relative;
  width: calc(15 / 375 * 100vw);
  height: calc(15 / 375 * 100vw);
}

section#sec6 .q-toggle::before,
section#sec6 .q-toggle::after {
  content: "";
  position: absolute;
  background: #fff;
  transition: transform 0.3s ease;
}

section#sec6 .q-toggle::before {
  width: calc(15 / 375 * 100vw);
  height: calc(3.5 / 375 * 100vw);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

section#sec6 .q-toggle::after {
  width:  calc(3.5 / 375 * 100vw);
  height: calc(15 / 375 * 100vw);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}



/* 回答 */
section#sec6 .qa-answer {
  max-height: 0;
  overflow: hidden;
  background: #eef3ff;
  border-radius: 12px;
  margin-top: 8px;
  transition: max-height 0.35s ease;
}

section#sec6 .qa-answer p {
  padding: 20px; /* 下だけ多め */
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 0.875rem;
line-height: 1.6;
}

/* 開いている状態 */
section#sec6 .qa-item.is-open .qa-answer {
  max-height: 500px; /* 十分大きめ */
}

section#sec6 .qa-item.is-open .q-toggle::after {
  transform: scaleY(0); /* ＋ → − */
}
}









section#sec7 {
	background: #5976ba;
	
}

section#sec7 .sec7 {
	width: 800px;
	margin: 0 auto;
	padding-bottom: 150px;
}

section#sec7 .sec7 p.text1 {
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 0.875rem;
  color: #FFF;
  line-height: 1.6;
  padding-top: 20px;
    margin-bottom: 25px;

}

section#sec7 .sec7 div.wbox {
	background: #FFF;
	border-radius: 25px;
	padding:  25px;
    margin-bottom:  25px;
}

section#sec7 .sec7 div.wbox h3 {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1;
  margin-bottom:  15px;
  padding-bottom:  15px;
  border-bottom: 1.5px solid #5976ba;
}

section#sec7 .sec7 div.wbox h4 {
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  margin-bottom:  8px;
}

section#sec7 .sec7 div.wbox p {
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}

section#sec7 .sec7 .copyright {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1;
  color: #FFF;
}

@media only screen and (max-width: 480px) {
section#sec7 {
	width: auto;
	margin: 0 auto;
/*    background-image:
    url("../img/sec4_bg1.png"),
    url("../img/sec4_bg2.png"),
    url("../img/sec_bg_common.jpg");

    background-repeat:
    no-repeat,
    no-repeat,
    repeat;

    background-position:
    top center,
    top center,
    center;

    background-size:
    cover,
    cover,
    cover;*/
}

section#sec7 .sec7 {
	width: calc(335 / 375 * 100vw);
	margin: 0 auto;
	padding-top:  calc(10 / 375 * 100vw);
}

section#sec7 .sec7 p.text1 {
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 0.875rem;
  color: #FFF;
  line-height: 1.6;
  margin-bottom: calc(25 / 375 * 100vw);

}

section#sec7 .sec7 div.wbox {
	background: #FFF;
	border-radius:calc(25 / 375 * 100vw) ;
	padding: calc(25 / 375 * 100vw);
    margin-bottom: calc(25 / 375 * 100vw);
}

section#sec7 .sec7 div.wbox h3 {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1;
  margin-bottom: calc(15 / 375 * 100vw);
  padding-bottom: calc(15 / 375 * 100vw);
  border-bottom: 1.5px solid #5976ba;
}

section#sec7 .sec7 div.wbox h4 {
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: calc(8 / 375 * 100vw);
}

section#sec7 .sec7 div.wbox p {
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}

section#sec7 .sec7 .copyright {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1;
  color: #FFF;
}


}


@media screen and (min-width: 481px) {

  section#sec7 .boxA {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
  }

  section#sec7 .boxA p {
    margin-bottom: 0; /* grid-gap を使う */
  }

}



/* ==========================
   タブレット帯だけSP版に寄せる
   481px〜1000px
========================== */
@media screen and (min-width: 481px) and (max-width: 1000px) {

  /* 右余白（横スクロール）の根絶 */
  html, body { overflow-x: hidden; }

  /* SP側の header section 背景（SP版の3枚背景）を使う */
  header { background: none; }

  header section {
    width: auto;
    margin: 0 auto;

    background-image:
      url("../img/hed_bg1.png"),
      url("../img/hed_bg2.png"),
      url("../img/hed_bg3.jpg");

    background-repeat:
      no-repeat,
      no-repeat,
      repeat;

    background-position:
      center,
      center,
      center;

    background-size:
      cover,
      cover,
      cover;
  }

  /* con1〜con4 を SPと同じ “vw配置” にする */
  header .logo {
    width: calc(96 / 375 * 100vw);
    padding: calc(3 / 375 * 100vw) calc(7 / 375 * 100vw) calc(4 / 375 * 100vw) calc(4 / 375 * 100vw);
    background: #FFF;
    font-size: 0;
    line-height: 0;
  }

  header h1 {
    width: calc(287 / 375 * 100vw);
    margin: calc(15 / 375 * 100vw) auto calc(8 / 375 * 100vw) auto;
    font-size: 0;
    line-height: 0;
  }

  header .con1 {
    position: relative;
    z-index: 2;
    width: calc(274.6 / 375 * 100vw);
    margin: calc(0 / 375 * 100vw) 0 calc(8 / 375 * 100vw) calc(-72 / 375 * 100vw);
    font-size: 0;
    line-height: 0;
  }

  header .con2 {
    position: relative;
    z-index: 3;
    width: calc(292 / 375 * 100vw);
    margin: calc(-270 / 375 * 100vw) 0 calc(8 / 375 * 100vw) calc(193 / 375 * 100vw);
    font-size: 0;
    line-height: 0;
  }

  header .con3 {
    position: relative;
    z-index: 1;
    width: calc(276.4 / 375 * 100vw);
    margin: calc(-90 / 375 * 100vw) 0 calc(-25 / 375 * 100vw) calc(78 / 375 * 100vw);
    font-size: 0;
    line-height: 0;
  }

  header .con4 {
    position: relative;
    z-index: 3;
    width: calc(365 / 375 * 100vw);
    margin: 0 0 0 calc(10 / 375 * 100vw);
    padding-bottom: calc(25 / 375 * 100vw);
    font-size: 0;
    line-height: 0;
  }

  /* 各セクションの固定幅(1000/800など)を解除して “SP的に伸縮” */
  section#sec2 .sec2,
  section#sec3 .sec3,
  section#sec4 .sec4,
  section#sec5 .sec5,
  section#sec6 .sec6 {
    width: auto;
    margin: 0 auto;
  }

  /* 800px固定の塊をSPと同様に可変へ */
  section#sec4 .speechBubble,
  section#sec6 .qa,
  section#sec4 .caution1 {
    width: calc(335 / 375 * 100vw);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
}