@charset "UTF-8";
/* ##################################################
  基本設定
################################################## */

/* ------------------------------
  ベース設定
------------------------------ */

html {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  background-color: #f3f4f5;
  font-size: 1.6rem;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴシック","Segoe UI", "Meiryo", sans-serif;
  line-height: 1.6;
  color: #231815;
}


*:before, *:after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}


/*--------------------------
メソッド
--------------------------*/

:root {
  --suru_bg: #f8dce9;
  --suru_color: #e34699;
  --sareru_bg: #b8dee7;
  --sareru_bg02: #e3f3f5;
  --sareru_color: #009aa9;
  --gray_bg: #efebeb;
  --font_mplus: "M PLUS Rounded 1c", sans-serif;
}

.l_container {
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
  overflow: hidden;
}

.l_inner {
  padding: 0 calc(34/650*100%) calc(65/650*100%);
  background-color: #fff;
}

.shadow{
    filter:drop-shadow(3px 7px 5px rgba(35 24 21 / .4));
    will-change: filter;
}

.pb75_02 {
  padding-bottom: calc(75/582*100%);
}


.indent01 {
  text-indent: -1em;
  padding-left: 1em;
}

/*--------------------------
固定ボタン
--------------------------*/

.btn_fix {
  max-width: 750px;
  margin: 0 auto;
  background-color: var(--sareru_bg);
  padding: 50px;
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

@media screen and (max-width: 750px) {
  .btn_fix {
    padding: calc(50/750*100%);
  }
}


/*--------------------------
セクション01
--------------------------*/

.sec01 {
  background-color: var(--sareru_bg);
  padding: calc(65/750*100%) calc(50/750*100%) calc(45/750*100%);
}

.sec01_btn_oubo {
  width: calc(600/650*100%);
  margin: 0 auto;
  display: block;
  filter:drop-shadow(3px 7px 5px rgba(35 24 21 / .4));
  will-change: filter;
}

.sec01_ttl {
  width: calc(596/650*100%);
  margin: calc(55/650*100%) auto;
  display: block;
}

.sec01_step {
  width: 100%;
  margin: calc(55/650*100%) auto 0;
}

.sec01_step li {
  margin: calc(40/650*100%) auto 0;
}

.sec01_step li:first-child {
  margin: 0 auto;
}

.sec01_step li.complete{
  display: flex;
  justify-content: center;
  position: relative;
}

.sec01_step li.complete .sec01_ttl_complete{
  width: calc(260/650*100%);  
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  margin: calc(30/650*100%) auto 0;
}

.sec01_step li.complete .suru{
  background-color: #fbf0f5;
}

.sec01_step li.complete .sareru{
  background-color: #e3f3f5;
}

.sec01_step li.complete .sec01_btn_check{
  width: calc(275/325*100%);
  margin: 0 auto;
  padding: calc(15/325*100%) 0 calc(45/325*100%);
  display: block;
  filter:drop-shadow(7px 6px 6px rgba(0 0 0 / .3));
  will-change: filter;
}

.sec01_arrow{
  width: calc(300/650*100%);
  margin: calc(50/650*100%) auto 0;
}

/*--------------------------
セクション02
--------------------------*/

.sec02 {
  background-color: var(--suru_bg);
  padding: calc(105/750*100%) calc(50/750*100%) calc(45/750*100%);
}

.sec02_lead {
  width: calc(520/582*100%);
  margin: 0 auto; 
  padding: calc(60/650*100%) 0 0;
}

.sec02_lead_image {
  width: 106%;
  margin: calc(30/582*100%) calc(-18/582*100%) 0;
  overflow: hidden;
}

.sec02_note {
  font-size: 24px;
  margin: calc(20/582*100%) 0 0 calc(25/582*100%);
}

@media screen and (max-width: 1000px) {
  .sec02_note {
    font-size: 2.4vw;
  }
}

@media screen and (max-width: 750px) {
  .sec02_note {
    font-size: 3.2vw;
  }
}

.sec02_prize_ttl {
  width: calc(463/582*100%);
  margin: calc(40/582*100%) auto 0;
}

.sec02_slide_detail {
  width: calc(342/582*100%);
  margin: calc(50/582*100%) auto calc(20/582*100%);
}

/* スライダー */

.tab-buttons {
  width: calc(600/582*100%);
  display: flex;
  flex-wrap: wrap;
  gap: 25px calc(10/582*100%);
  justify-content: center;
  margin: 0 calc(-9/582*100%);
}

.tab {
  width: calc(187/582*100%);
  filter:drop-shadow(2px 4px 3px rgba(35 24 21 / .4));
  will-change: filter;
  cursor: pointer;
}

.slider {
  width: 100%;
  margin: calc(40/582*100%) auto 0;
  border: 3px solid #a1a1a1;
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
}

.slider.slick-initialized {
  opacity: 1;
}

@media screen and (max-width: 750px) {
  .slider {
    border: 1px solid #a1a1a1;
  }
}

.slide-arrow {
    bottom: 0;
    cursor: pointer;
    margin: auto;
    position: absolute;
    top: 0;
    width: calc(30/580*100%);
    z-index: 10;
}

.prev-arrow {
  left: 0;
  margin-left: calc(30/580*100%);
}

.next-arrow {
  right: 0;
  margin-right: calc(30/580*100%);
  transform: scale(-1, 1);
}

.slider .slide_image {
  position: relative;
}

.slider .slide_now,
.slider .slide_end {
  width: calc(438/580*100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: calc(332/580*100%) auto 0;
}

/* スライダー ここまで */

.sec02_chance {
  width: calc(441/582*100%);
  margin: calc(50/582*100%) auto 0;
}

.sec02_schedule_wrap {
  width: calc(431/582*100%);
  margin: calc(25/582*100%) auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sec02_schedule {
  width: calc(332/431*100%);
}

.sec02_btn_schedule {
  width: calc(95/431*100%);
}

.sec02_discription {
  width: calc(504/582*100%);
  margin: calc(60/582*100%) auto 0;
}

.kotsu_wrap {
  background-color: var(--gray_bg);
  padding: calc(40/582*100%) calc(20/582*100%) calc(55/582*100%);
  margin: calc(70/582*100%) auto 0;
}

.kotsu_ttl {
  width: calc(478/542*100%);
  margin: 0 auto;
}

.btn_check {
  width: 100%;
  margin: calc(25/542*100%) auto 0;
  display: block;
  filter:drop-shadow(7px 6px 6px rgba(35 24 21 / .3));
  will-change: filter;
}

.btn_shoukai {
  width: 104%;
  margin: 0 calc(-11/582*100%) 0;
  display: block;
  filter:drop-shadow(4px 7px 6px rgba(35 24 21 / .4));
  will-change: filter;
  overflow: hidden;
}

.sec02_btn_hakkou {
  width: calc(600/750*100%);
  margin: calc(45/650*100%) auto 0;
  display: block;
  text-align: center;
  filter:drop-shadow(4px 7px 6px rgba(35 24 21 / .4));
  will-change: filter;
  position: relative;
  cursor: pointer;
}

/* .sec02_btn_hakkou {
  pointer-events: none;
}

.sec02_btn_shokai.is-disabled::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); 
  border-radius: 9999px;
  z-index: 1;
} */


/*--------------------------
セクション03
--------------------------*/

.sec03 {
  background-color: var(--sareru_bg);
  padding: calc(105/750*100%) calc(50/750*100%) calc(125/750*100%);
}

.sec03_ttl {
  position: relative;
}

.sec03_ttl_image {
  width: calc(268/650*100%);
  bottom: 0;
  right:0;
  margin: 0 calc(-16/582*100%) 0 0;
  position: absolute;
}

.sec03_lead {
  padding: calc(60/542*100%) 0 0;
}

.sec03_description {
  width: calc(536/542*100%);
  margin: calc(60/542*100%) auto 0;
  text-align: center;
}

.sec03_ttl_schedule {
  width: calc(606/650*100%);
  margin: calc(95/650*100%) auto calc(10/650*100%);
  text-align: center;
}

.sec03_schedule_wrap {
  width: 105%;
  margin: 0 calc(-16/650*100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sec03_btn_schedule {
  width: calc(338/682*100%);
  display: block;
  filter:drop-shadow(4px 7px 6px rgba(35 24 21 / .4));
  will-change: filter;
}

/*--------------------------
セクション04
--------------------------*/

.sec04 {
  background-color: var(--sareru_bg);
}

.sec04_inner {
  padding: 0 calc(50/750*100%);
}

.sec04_inner:last-child {
  padding: 0 calc(50/750*100%) calc(80/750*100%); ;
}

.sec04_ttl_touroku {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.sec04_btn_touroku {
  width: calc(603/650*100%);
  margin: calc(55/650*100%) auto 0;
  display: block;
  text-align: center;
  filter:drop-shadow(4px 7px 6px rgba(35 24 21 / .4));
  will-change: filter;
}

.sec04_onegai {
  width: calc(500/650*100%);
  margin: calc(50/650*100%) auto 0;
}

.sec04_btn_wrap {
  padding-top: calc(45/650*100%);
}

.sec04_btn_shokai {
  width: calc(604/650*100%);
  margin: 0 auto;
  display: block;
  text-align: center;
  filter:drop-shadow(4px 7px 6px rgba(35 24 21 / .4));
  will-change: filter;
  position: relative;
  cursor: pointer;
}

.sec04_btn_shokai:nth-child(2) {
  margin: calc(65/650*100%) auto 0;
}

.sec04_btn_shokai.is-disabled {
  pointer-events: none;
}

.sec04_btn_shokai.is-disabled::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4); 
  border-radius: 9999px;
  z-index: 1;
}

.sec04_ttl_kiyaku {
  width: 100%;
  margin: calc(120/750*100%) auto 0;
  overflow: hidden;
}

.sec04_kiyaku_container {
  width: 100%;
  background-color: #fff;
  margin: calc(85/650*100%) auto 0;
  padding: calc(25/650*100%);
}

.sec04_kiyaku_wrap {
  border: 1px solid #60676b;
  padding: calc(35/600*100%) calc(25/600*100%);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.6;
  height: 16em;
  overflow-y: scroll
}

@media screen and (max-width: 1000px) {
  .sec04_kiyaku_wrap  {
    font-size: 2.4vw;
  }
}

@media screen and (max-width: 750px) {
  .sec04_kiyaku_wrap  {
    font-size: 3.2vw;
  }
}

.sec04_kiyaku_wrap .ttl_kiyaku {
  font-weight: 700;
  margin-top: 1em;
}

.sec04_kiyaku_wrap .indent01 {
  text-indent: -1em;
  padding-left: 1em;
}

.sec04_kiyaku_wrap ul.list01 {
  text-indent: -1em;
  padding-left: 1em;
  list-style: none;
  font-size: 20px;
}

.sec04_kiyaku_wrap ul.list00 {
  list-style: none;
  font-size: 20px;
}

.sec04_kiyaku_wrap ul.list01_02 {
  text-indent: -1em;
  padding-left: 1em;
  list-style: none;
}

@media screen and (max-width: 1000px) {
  .sec04_kiyaku_wrap ul.list01, .sec04_kiyaku_wrap ul.list00  {
    font-size: 2.0vw;
  }
}

@media screen and (max-width: 750px) {
  .sec04_kiyaku_wrap ul.list01, .sec04_kiyaku_wrap ul.list00  {
    font-size: 2.7vw;
  }
}

.sec04_kiyaku_wrap ul.list01 li, .sec04_kiyaku_wrap ul.list01_02 li {
  margin-top: 0.3em;
}

.sec04_kiyaku_wrap .mt01 {
  margin-top: 1em;
}

.sec04_kiyaku_wrap a{
  text-decoration: underline
}

.sec04_ttl_toiawase {
  width: 100%;
  margin: calc(85/750*100%) auto 0;
  overflow: hidden;
}

.sec04_toiawase_container {
  width: 100%;
  background-color: #007fa6;
  margin: calc(70/650*100%) auto 0;
  padding: calc(40/650*100%) calc(30/650*100%) calc(60/650*100%);
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

@media screen and (max-width: 1000px) {
  .sec04_toiawase_container {
    font-size: 2.4vw;
  }
}

@media screen and (max-width: 750px) {
  .sec04_toiawase_container {
    font-size: 3.2vw;
  }
}

.sec04_toiawase_container .text26 {
  font-size: 26px;
}

@media screen and (max-width: 1000px) {
  .sec04_toiawase_container .text26 {
    font-size: 2.6vw;
  }
}

@media screen and (max-width: 750px) {
  .sec04_toiawase_container .text26 {
    font-size: 3.4vw;
  }
}

.sec04_toiawase_container .sec04_ttl_jimukyoku {
  width: calc(555/590*100%);
  margin: calc(40/590*100%) 0 calc(30/590*100%);
  text-align: left;
}

.sec04_toiawase_container .sec04_jumukyoku_mail {
  font-weight: 700;
  line-height: 1.5;
  font-size: 22px;
}

@media screen and (max-width: 1000px) {
  .sec04_toiawase_container .sec04_jumukyoku_mail {
    font-size: 2.2vw;
  }
}

@media screen and (max-width: 750px) {
  .sec04_toiawase_container .sec04_jumukyoku_mail {
    font-size: 2.9vw;
  }
}

.sec04_toiawase_container span {
  color: #ffeb3f;
}

.sec04_entry_wrap {
  background-color: #fff;
  padding: 0 0 calc(80/650*100%) 0;
}

.sec04_entry_ttl {
  width: 100%;
  margin: 0 auto;
}

.sec04_app_entry {
  width: 100%;
  margin-top: calc(40/570*100%);
}

.sec04_app_container {
  width: 100%;
  padding: calc(35/650*100%) calc(35/650*100%) 0;
}

.sec04_app_ttl {
  width: calc(443/580*100%);
  margin: 0 auto;
}

.app_wrap {
  width: 100%;
  margin: calc(50/580*100%) auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap:10px calc(13/580*100%);
}

.app_wrap li {
  width: calc(130/580*100%);
  cursor: pointer;
}

.sec04_app_notes {
  width: calc(517/580*100%);
  margin: calc(40/580*100%) auto 0;
}

/*--------------------------
モーダル
--------------------------*/

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-content {
  background: #fff;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  position: relative;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.modal-content_app {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	max-width: 500px;
	padding: 30px;
	transform: translate(-50%, -50%);
	background-color: #ffffff;
}

.modalThumbnail {
	width: 60%;
	margin: 0 auto 30px;
  text-align: center;
}

.modalList {
	display: flex;
}

.modalItem {
	width: 50%;
	padding: 0 2%;
}

/* .close-btn {
  background: #333;
  color: #fff;
  border: none;
  padding: 1em;
  cursor: pointer;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
} */

.close-btn.top {
  position: absolute;
  top: 0;
  right: 0;
  margin: calc(30/750*100%) calc(30/750*100%) 0 0 ;
  background-color: #808080;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  display: block;
  color: #fff;
  font-size: 26px;
  font-family: var(--font_mplus);
  font-weight: 900;
  line-height: 0;
  padding: .5em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn.bottom {
  width: 10em;
  border-radius: 9999px;
  background-color: #808080;
  color: #fff;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  padding: .7em 0;
  filter: drop-shadow(3px 7px 5px rgba(35 24 21 / .4));
  will-change: filter;
}

.modal1_bg {
  padding: 0 0 calc(100/750*100%);
  background-color: var(--suru_bg);
}

.modal2_bg {
  padding: 0 0 calc(100/750*100%);
  background-color: var(--sareru_bg);
}

.modal_bg {
  padding: 0 0 calc(100/750*100%);
  background-color: #fff;
}


@media (max-width: 1000px) {
  .close-btn.top {
    font-size: 2.6vw;
  }

  .close-btn.bottom {
    font-size: 2.6vw;
  }
}

@media (max-width: 750px) {
  .modal-content {
    width: 95%;
  }

  .modal-content_app {
    padding: 5%;
  }

  .modalThumbnail {
		width: 80%;
		margin: 0 auto 7%;
	}

  .close-btn.top {
    font-size: 3.4vw;
  }

  .close-btn.bottom {
    font-size: 3.4vw;
  }
}

/*--------------------------
フッター
--------------------------*/
.footer_inner {
  padding: calc(40/750*100%) calc(75/750*100%);
}

.footer_text {
  font-size: 26px;
  line-height: 1.5;
  font-weight: 500;
}

.copyright {
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
}

@media (max-width: 1000px) {
  .footer_text {
    font-size: 2.6vw;
}

.copyright {
    font-size: 2.0vw;
  }
}

@media (max-width: 750px) {
  .footer_text {
    font-size: 3.4vw;
}

.copyright {
    font-size: 2.6vw;
  }
}