@charset "utf-8";

/* ===========================================
 * MAIN
 * ======================================== */
.container {
  /* background-color: #F6BEC8; */
  background: linear-gradient(to right, #E50012 0%, #E50012 50%, #0086CD 50%, #0086CD 100%);
}
/* ===========================================
 * NAVI
 * ======================================== */
.navi__warp {
  width: min(100%, 750px);
  padding-block: 12px;
  margin-inline: auto;
  background: linear-gradient(to right, #E50012 0%, #E50012 50%, #0086CD 50%, #0086CD 100%);
  position: fixed;
  z-index: 100;
  right: 0;
  left: 0;
  bottom: 0;
}
.navi__inner {
  padding-inline: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 14px;
}
.navi__btn {
  width: 100%;
  padding-block: 10px;
  text-align: center;
  font: 600 normal 18px / 1.3 var(--font-fm-main);
  color: #FFFFFF;
  border-radius: 9999px;
  background-color: #0B5071;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navi__btn > span {
  width: fit-content;
  display: block;
}
.navi__btn > span > b {
  font: 600 normal 14px / 1.3 var(--font-fm-main);
  color: #FFFFFF;
}
/* #navi {
  transition: 0.3s;
  opacity: 1;
} */
/* #navi.is-hidden {
  opacity: 0;
  visibility: hidden;
} */
/* ===========================================
 * KV
 * ======================================== */
.kv__wrap {
  margin-inline: auto;
}
.kv__inner {
  margin-inline: auto;
  position: relative;
}
.kv__img {
  width: 100%;
  display: block;
}
.kv__inner__btn {
  width: calc(296/375*100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto calc(141/375*100%);
  list-style: none;
}
.kv__inner__btn li {
  margin: 0;
  padding: 0;
  display: block;
}
/* ===========================================
 * APP
 * ======================================== */
.app__wrap {
  padding-block: 20px;
  margin-inline: auto;
}
.app__inner {
  padding-inline: 20px;
}
.app__box {
  border-radius: 6px;
  background-color: #FFFFFF;
  overflow: hidden;
}
.app__box__tit {
  padding-block: 8px;
  font: 600 normal 18px / 1.0 var(--font-fm-main);
  color: #FFFFFF;
  background-color: #0B5071;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app__box__tit > span {
  width: fit-content;
  display: block;
}
.app__box__inner {
  padding: 30px;
  display: grid;
  gap: 10px;
}
.app__box__btn {
  width: min(100%, 275px);
  padding-block: 17px;
  margin-inline: auto;
  margin-bottom: 10px;
  font: 600 normal 18px / 1.0 var(--font-fm-main);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 9999px;
  background-color: #C4007C;
  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.10), 0 1px 4px 0 rgba(12, 12, 13, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: auto;
}
.app__box__txt {
  text-align: center;
  font: 600 normal 18px / 1.5 var(--font-fm-main);
  letter-spacing: 0.36px;
  color: #E50012;
}
.app__box__link__container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
}
.app__box__link {
  width: min(100%, 160px);
  height: min(100%, 160px);
  aspect-ratio: 1 / 1;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
  display: block;
}

.app__box__btn__welpark {
  width: min(100%, 275px);
  padding-block: 17px;
  margin-inline: auto;
  margin-bottom: 10px;
  font: 600 normal 16px / 1.3 var(--font-fm-main);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 16px;
  /* background: linear-gradient(180deg, #B7B7B7 0%, #717171 50%); */
  background: linear-gradient(180deg, #3E90B7 0%, #0B5071 50%);
  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.10), 0 1px 4px 0 rgba(12, 12, 13, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: auto;
  text-align: center;
}

.app__box__txt__welpark {
  text-align: center;
  font: 600 normal 18px / 1.5 var(--font-fm-main);
  letter-spacing: 0.36px;
  margin-bottom: 8px;
  color: #51318F;
}
.app__box__txt02__welpark {
  text-align: center;
  font: 600 normal 14px / 1.5 var(--font-fm-main);
  letter-spacing: 0.28px;
  color: #424242;
}
.app__box__txt03__welpark {
  text-align: center;
  font: 600 normal 18px / 1.5 var(--font-fm-main);
  letter-spacing: 0.28px;
  color: #111;
  margin-top: 18px;
}
.app__box__link__container__welpark {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 10px;
  place-items: center; 
}

.app__box__link__welpark {
  width: min(100%, 64px);
  height: min(100%, 64px);
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 6px;
  overflow: hidden;
}
.app__box__coution {
  margin-bottom: 10px;
  font: 300 normal 14px / 1.7 var(--font-fm-main);
  color: #424242;
  letter-spacing: 0.36px;
  display: grid;
  grid-template-columns: 26px auto;
  grid-template-rows: auto;
  align-items: top;
  justify-content: flex-start;
  gap: 3px;
}
.app__box__coution span {
	padding-top: 3px;
}
.app__box__coution span b {
	padding-top: 3px;
	font: 700 normal 14px / 1.7 var(--font-fm-main);
}
.app__box__coution_image {
	max-width: 100%;
	margin: 0 auto;
}

/* ===========================================
 * MODAL
 * ======================================== */
.modalArea {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	display: none;
}
.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(30, 30, 30, 0.9);
}
.modalWrapper {
	width: min(calc(100% - 60px), 315px);
	height: min(calc(100% - 60px), 500px);
	padding: 20px;
	border-radius: 10px;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.closeModal {
	width: 40px;
	height: 40px;
	font-size: 20px;
	border-radius: 9999px;
	background-color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -20px;
	right: -20px;
	cursor: pointer;
	&::before,
	&::after {
		content: "";
		background: #FFFFFF;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 2px;
		height: 50%;
	}
	&::before {
		transform: translate(-50%,-50%) rotate(45deg);
	}
	&::after {
		transform: translate(-50%,-50%) rotate(-45deg);
	}
}
.modalThumbnail {
	width: 128px;
	margin: 0 auto 30px;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
}

.modalList {
	width: fit-content;
	margin: auto;
	display: grid;
	grid-template-columns: 109px 135px;
	grid-template-rows: auto;
	gap: 10px;
}

/* ===========================================
 * LINK
 * ======================================== */
.link__wrap {
  /* padding-block: 20px; */
  padding: 0 0 20px 0;
}
.link__inner {
  padding-inline: 20px;
}
.link__btn_container {
  display: grid;
  gap: 20px;
}
.link__btn {
  --icon-size-wh: 24px;
  width: min(100%, 300px);
  min-height: 48px;
  padding-block: 8px;
  margin-inline: auto;
  text-align: center;
  font: 600 normal 16px / 1.3 var(--font-fm-main);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: auto;
}
.link__btn::before,
.link__btn::after {
  content: "";
  width: var(--icon-size-wh);
  height: var(--icon-size-wh);
  margin-block: auto;
  position: absolute;
  z-index: auto;
  top: 0;
  bottom: 0;
}
/* tsuruha */
.btn__tsuruha {
  color: #FFFFFF;
  background-color: #E50012;
}
.btn__tsuruha::after {
  /* mask: center center / var(--icon-size-wh) var(--icon-size-wh) no-repeat url(/cp/tougou-2nd/assets/img/icon_arrow-right.svg); */
  mask-position: center center;
  mask-size: var(--icon-size-wh) var(--icon-size-wh);
  mask-repeat: no-repeat;
  mask-image: url(/cp/tougou-2nd/assets/img/icon_arrow-right.svg);
  background-color: #FFFFFF;
  right: 1em;
}
/* welpark */
.btn__welpark {
  color: #FFFFFF;
  background-color: #51318F;
}
.btn__welpark::after {
  /* mask: center center / var(--icon-size-wh) var(--icon-size-wh) no-repeat url(/cp/tougou-2nd/assets/img/icon_arrow-right.svg); */
  mask-position: center center;
  mask-size: var(--icon-size-wh) var(--icon-size-wh);
  mask-repeat: no-repeat;
  mask-image: url(/cp/tougou-2nd/assets/img/icon_arrow-right.svg);
  background-color: #FFFFFF;
  right: 1em;
}
/* welcia */
.btn__welcia {
  color: #FFFFFF;
  background-color: #0086CD;
}
.btn__welcia::after {
  /* mask: center center / var(--icon-size-wh) var(--icon-size-wh) no-repeat url(/cp/tougou-2nd/assets/img/icon_arrow-right.svg); */
  mask-position: center center;
  mask-size: var(--icon-size-wh) var(--icon-size-wh);
  mask-repeat: no-repeat;
  mask-image: url(/cp/tougou-2nd/assets/img/icon_arrow-right.svg);
  background-color: #FFFFFF;
  right: 1em;
}
/* back */
.btn__back {
  font-size: 18px;
  letter-spacing: 0.72px;
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
}
.btn__back::before {
  /* mask: center center / var(--icon-size-wh) var(--icon-size-wh) no-repeat url(/cp/tougou-2nd/assets/img/icon_arrow-left.svg); */
  mask-position: center center;
  mask-size: var(--icon-size-wh) var(--icon-size-wh);
  mask-repeat: no-repeat;
  mask-image: url(/cp/tougou-2nd/assets/img/icon_arrow-left.svg);
  background-color: #FFFFFF;
  left: 1em;
}

/* ===========================================
 * CONTENTS
 * ======================================== */
.contents__box__tit {
  background-color: #0B5071;
}
.contets__txt > span {
  color: #0B5071;
}
.contents__box__step::after {
  background-color: #0B5071;
}
.contents__box__step__tit {
  color: #0B5071;
}
.contents__box__step__btn {
  background-color: #0B5071;
}
.contents__box__step__txt + .contents__box__step__caution__container {
  margin-top: 10px;
}
.contents__box__step__caution__container + .contents__box__step__caution__container {
  margin-top: 10px;
}

/* ===========================================
 * COURSE
 * ======================================== */
/* .course__wrap {
  background: linear-gradient(to right, #E50012 0%, #E50012 50%, #0086CD 50%, #0086CD 100%);
} */
/* .course__inner {
  padding: 20px 0px;
} */
/* .course__tit {
  max-width: 372px;
  display: block;
  margin: 0 auto;
} */
/* .course__btn {
  --icon-size-wh: 24px;
  color: #0B5071;
  background-color: #FFF;
  margin-bottom: 28px;
} */
/* .course__btn::after {
  content: "";
  width: var(--icon-size-wh);
  height: var(--icon-size-wh);
  margin-block: auto;
  position: absolute;
  z-index: auto;
  top: 0;
  bottom: 0;
  mask-position: center center;
  mask-size: var(--icon-size-wh) var(--icon-size-wh);
  mask-repeat: no-repeat;
  mask-image: url(/cp/tougou-2nd/assets/img/welpark/icon_image.svg);
  background-color: #0B5071;
  right: 1em;
} */
/* .course__box {
  background-color: #FFF;
} */
/* .course__box__step__inner {
  padding-inline: 16px;
} */
/* .course__box__caution__container {
	padding: 16px 16px 0;
} */
/* .course__box__caution__caution {
  font: 300 normal 10px / 1.7 var(--font-fm-main);
  color: #FFF;
} */

.indent_2em {
  padding-left: 2em;
  text-indent: -2em;
}

/* ===========================================
 * INFO
 * ======================================== */
.info__box__tit {
  background-color: #0B5071;
}



/* ===========================================
 * ENTRY
 * ======================================== */
.entry__wrap {
  padding-block: 20px;
  margin-inline: auto;
}
.entry__inner {
  padding-inline: 20px;
}
/* box */
/* ======================================= */
.entry__box {
  border-radius: 6px;
  background-color: #FFFFFF;
  overflow: hidden;
}
.entry__box__tit {
  padding-block: 8px;
  font: 600 normal 18px / 1.0 var(--font-fm-main);
  color: #FFFFFF;
  background-color: #0B5071;
  display: flex;
  align-items: center;
  justify-content: center;
  > span {
    width: fit-content;
    display: block;
  }
}
.entry__box__inner {
  padding: 30px;
  display: grid;
  gap: 16px;
}
.entry__box__btn {
  width: min(100%, 300px);
  margin-inline: auto;
  padding-block: 17px;
  font: 600 normal 20px / 1.0 var(--font-fm-main);
  color: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 9999px;
  background-color: #0B5071;
  box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.10), 0 1px 4px 0 rgba(12, 12, 13, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* accordion */
/* ======================================= */
.entry__accordion {
  display: block;
  border-radius: 6px;
  border: 2px solid #0B5071;
}
.entry__accordion__tit {
  /* width: min(100%, 300px); */
  padding-block: 12px;
  margin-inline: auto;
  text-align: center;
  border-radius: 8px;
  font: 600 normal 20px / 1.0 var(--font-fm-main);
  color: #0B5071;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: auto;
  > span {
    width: fit-content;
    display: block;
  }
  &::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-block: auto;
    border-top: solid 2px #0B5071;
    border-right: solid 2px #0B5071;
    position: absolute;
    z-index: auto;
    top: 0;
    bottom: 5px;
    right: 1em;
    transform: rotate(135deg);
    transition: 0.3s;
  }
}
.entry__accordion__cotents {
  padding: 20px;
  display: grid;
  gap: 1em;
}
.entry__accordion__txt,
.entry__accordion__list,
.entry__accordion__caution,
.entry__accordion__head {
  font: 300 normal 14px / 1.5 var(--font-fm-main);
  > a {
    text-decoration: underline;
  }
}
.entry__accordion__list__container  {
  padding-left: 1em;
  text-indent: -1em;
}
/* open */
.entry__accordion[open] {
  > .entry__accordion__tit {
    &::before {
      top: 5px;
      bottom: 0;
      transform: rotate(-45deg);
    }
  }
}
/* Check */
/* ======================================= */
.entry__check {
  font: 600 normal 14px / 1.5 var(--font-fm-main);
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.entry__check input {
    width: 24px;
    height: 24px;
    border: 1px solid #AAAAAA;
    border-radius: 3px;
    position: relative;
    z-index: auto;
    &::before {
      content: "";
      width: 24px;
      height: 24px;
      margin: auto;
      mask: center center / 24px 24px no-repeat url(/cp/tougou/tsuruha/img/icon_check.svg);
      background-color: #111111;
      position: absolute;
      z-index: auto;
      inset: 0;
      opacity: 0;
    }
    &:checked {
      background-color: #AAAAAA;
      border-color: #AAAAAA;
    }
  }
.entry__check__btn {

}

.entry__check__btn[disabled] {
  color: #424242;
  border: 2px solid #D1D1D1;
  background-color: #D1D1D1;
  box-shadow: none;
	cursor: default;
  pointer-events: none;
}