@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（下からフェードイン）
================================= */
.js-fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  transition-delay: 0.20s; /* ← ここで遅延（例：0.15秒） */
}

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


.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: 30px auto 0 auto;

}


header .box {
	width: 800px;
	margin: 0 auto;
	padding:  25px 25px 5px 25px;
	background: #efeded;
	border-radius: 10px;
}

header .box h3 {
	font-family: "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: #e0462b;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 3px solid #e0462b;
  text-align: center;
}

header .box p {
	font-family: "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  margin-bottom: 20px;
}

header h4 {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: #e0462b;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

@media only screen and (max-width: 999px) {
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: 80vw;
	margin: 30px auto 0 auto;

}


header .box {
	width: 70vw;
	margin: 0 auto;
	padding:  25px 25px 5px 25px;
	background: #efeded;
	border-radius: 10px;
}

}


@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;
	padding-top: calc(25 / 375 * 100vw);
}




header .box {
	width: calc(328 / 375 * 100vw);
	margin: 0 auto;
	padding:  calc(20 / 375 * 100vw) calc(20 / 375 * 100vw) calc(10 / 375 * 100vw) calc(20 / 375 * 100vw);
	background: #efeded;
	border-radius: calc(10 / 375 * 100vw);
}

header .box h3 {
	font-family: "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  color: #e0462b;
  margin-bottom: calc(15 / 375 * 100vw);
  padding-bottom: calc(10 / 375 * 100vw);
  border-bottom: 3px solid #e0462b;
  text-align: center;
}

header .box p {
	font-family: "Noto Sans JP", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: calc(10 / 375 * 100vw);
}

header h4 {
	width: calc(328 / 375 * 100vw);
	margin: 0 auto;

  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: #e0462b;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: left;
}


}


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

.btnArea {
	width: 700px;
	margin: 40px auto 50px auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
  }

.btnArea a {
    margin-bottom: 0; /* grid-gap を使う */
  }

}



.cta-btn {
  font-family: "Noto Sans JP", sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  width: 330px;
  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;
}

.blue {
  background: #3e99db;
}

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

.cta-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左揃え */
  gap: 4px; /* 行間 */
}

.cta-text {
	font-family: "Noto Sans JP", sans-serif;
  color: #ffffff;
  font-size: 1.625rem;
  font-weight: 900;
  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: 1.125rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
    	text-align: center;

}

/* 上の補足文 全体 */
.cta-sub {
	font-family: "Noto Sans JP", sans-serif;
	padding-top: 11px;
  font-size: 1rem;
  font-weight: 900;
  line-height: 0.3;
  color: #ffffff; /* 基本は白 */
  display: block;
}

/* 黄色にしたい部分だけ */
.cta-pref {
  color: #fff27a; /* 添付画像に近い黄色 */
}

@media only screen and (max-width: 999px) {
.btnArea {
	width: auto;
}
}

@media only screen and (max-width: 480px) {
.btnArea {
	width: auto;
}
}

/* 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);
  }
.blue {
  background: #3e99db;
}
  .cta-text {
    font-size: 24px;
	  color: #ffffff;
  font-weight: 900;
  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;

}

}




















header 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;

}

header div.wbox {
	width: 400px;
	margin: 0 auto;
	background: #efeded;
	border-radius: 25px;
	padding:  25px;
    margin-bottom:  25px;
    margin-top:  25px;
}

header 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;
}

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

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

header .copyright {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1;
  color: #000; 
  padding-top: 30px;
  padding-bottom: 60px;
}

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



header 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);

}

header div.wbox {
	width:calc(335 / 375 * 100vw);


	background: #efeded;
	border-radius:calc(25 / 375 * 100vw) ;
	padding: calc(25 / 375 * 100vw);
    margin-top: calc(25 / 375 * 100vw);
    margin-bottom: calc(25 / 375 * 100vw);
}

header 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;
}

header 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);
}

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

header .copyright {
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: 0.6875rem;
  line-height: 1;
  color: #000;
    padding-top: calc(20 / 375 * 100vw);
  padding-bottom: calc(50 / 375 * 100vw);

  }


}