@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');
/* ===========================================
 * 変数
 * ======================================== */
:root {
	--font-main: "Zen Maru Gothic", sans-serif;
}

/* ===========================================
 * RESET
 * ======================================== */
#mikke-fw {
	width: min(100%, 1200px);
	margin-inline: auto;
	background-color: #ffffe2;
  background-image: radial-gradient(circle, #ffe995 min(calc(4 / 750 * 100vw), calc(4px * 1200 / 750)), transparent min(calc(4 / 750 * 100vw), calc(4px * 1200 / 750))), radial-gradient(circle, #ffe995 min(calc(4 / 750 * 100vw), calc(4px * 1200 / 750)), transparent min(calc(4 / 750 * 100vw), calc(4px * 1200 / 750)));
  background-position: 0 0, min(calc(18 / 750 * 100vw), calc(18px * 1200 / 750)) min(calc(26 / 750 * 100vw), calc(26px * 1200 / 750));
  background-size: min(calc(36 / 750 * 100vw), calc(36px * 1200 / 750)) min(calc(52 / 750 * 100vw), calc(52px * 1200 / 750));
	overflow: hidden;
}
#mikke-fw figure {
	margin: 0;
}
#mikke-fw img {
	width: 100%;
	margin-inline: auto;
}
button {
	padding: 0;
	margin: 0;
	font-size: 0;
	border: none;
	background: transparent;
	display: flex;
}

/* ===========================================
 * SP・PC切り替え・その他
 * ======================================== */
.sp {
	display: none!important;
}
.pc {
	display: inline-block!important;
}
@media screen and (max-width: 767px) {
	.sp {
		display: block!important;
	}
	.pc {
		display: none!important;
	}
}
.active {
	display: block;
}
.inactive {
	pointer-events: none;
}

/* ===========================================
 * TOP
 * ======================================== */
.top__wrap {
	padding-block: 13px;
	margin-inline: auto;
	background-color: #ffffff;
}
.top__inner {
	margin-inline: auto;
	padding-inline: 13px;
}
.top__kv {
	width: fit-content;
	margin-inline: auto;
	display: block;
}
@media screen and (max-width: 767px) {
	.top__inner {
		margin-inline: auto;
		padding-inline: 13px;
	}
	.top__kv {
		border-radius: min(calc(24 / 750 * 100vw ), calc(24px * 1200 / 750));
		overflow: hidden;
	}
}

/* ===========================================
 * INTRO
 * ======================================== */
.intro__wrap {
	width: 100%;
	/* height: min(calc(500 / 750 * 100vw), calc(500px * 1200 / 750)); */
	padding-block: min(calc(70 / 750 * 100vw), calc(70px * 1200 / 750));
	background: center top / 100% auto no-repeat url(../img/intro_bk.png);
}
.intro__inner {
	margin-inline: auto;
}
.intro__text {
	width: 100%;
	margin-inline: auto;
	display: block;
}

/* ===========================================
 * NAVI
 * ======================================== */
.navi__wrap {
	padding-bottom: min(calc(70 / 750 * 100vw), calc(70px * 1200 / 750));
}
.navi__inner {
	margin-inline: auto;
}
.navi_title {
	width: min(calc(150 / 750 * 100vw ), calc(150px * 1200 / 750));
	margin-inline: auto;
	margin-bottom: min(calc(30 / 750 * 100vw ), calc(30px * 1200 / 750));
	display: block;
}
.navi__list {
	width: min(calc(710 / 750 * 100vw ), calc(710px * 1200 / 750));
	margin-inline: auto;
	display: block;
	cursor: pointer;
}

/* ===========================================
 * SCENE
 * ======================================== */
.scene__wrap {
	/* padding-bottom: min(calc(60 / 750 * 100vw ), calc(60px * 1200 / 750)); */
	/* margin-top: min(calc(60 / 750 * 100vw ), calc(60px * 1200 / 750)); */
	position: relative;
	z-index: 1;
}
.scene__wrap::before {
	content: "";
	width: min(calc(120 / 750 * 100vw ), calc(120px * 1200 / 750));
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	border-radius: 9999px;
	display: block;
	background-color: inherit;
	position: absolute;
	z-index: -1;
	right: 0;
	left: 0;
	top: max(calc(-60 / 750 * 100vw ), calc(-60px * 1200 / 750));
}
.scene__wrap::after {
	content: "";
	width: min(calc(88 / 750 * 100vw ), calc(88px * 1200 / 750));
	height: min(calc(88 / 750 * 100vw ), calc(88px * 1200 / 750));
	aspect-ratio: 1 / 1;
	margin-inline: auto;
	border-radius: 9999px;
	font: 900 min(calc(66 / 750 * 100vw), calc(66px * 1200 / 750)) / 1.0 var(--font-main);
	color: #FFFFFF;
	background-color: #88483f;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 2;
	right: 0;
	left: 0;
	top: max(calc(-44 / 750 * 100vw ), calc(-44px * 1200 / 750));
}
.scene__section {
	margin-inline: auto;
}
.scene__img {
	background-color: #FFFFFF;
	display: block;
}
.scene__category {
	width: min(calc(182 / 750 * 100vw), calc(182px * 1200 / 750));
	margin-inline: auto;
	margin-bottom: min(calc(20 / 750 * 100vw ), calc(20px * 1200 / 750));
	display: block;
}
/* scene01 */
/* ======================================= */
#scene01::before,
#scene01 .scene__search,
#scene01 .scene__problem,
#scene01a__modal .modal__contents,
#scene01b__modal .modal__contents,
#scene01c__modal .modal__contents,
#scene01d__modal .modal__contents {
	background-color: #ffa75d;
}
#scene01::after {
	/* content: "1"; */
	background: center center / min(calc(88 / 750 * 100vw ), calc(88px * 1200 / 750)) min(calc(88 / 750 * 100vw ), calc(88px * 1200 / 750)) no-repeat url(../img/scene01_search_num.png);
	background-color: inherit;
}
/* scene02 */
/* ======================================= */
#scene02::before,
#scene02 .scene__search,
#scene02 .modal__contents,
#scene02 .scene__problem,
#scene02a__modal .modal__contents,
#scene02b__modal .modal__contents,
#scene02c__modal .modal__contents,
#scene02d__modal .modal__contents,
#scene02e__modal .modal__contents,
#scene02f__modal .modal__contents {
	background-color: #ffa3ac;
}
#scene02::after {
	/* content: "2"; */
	background: center center / min(calc(88 / 750 * 100vw ), calc(88px * 1200 / 750)) min(calc(88 / 750 * 100vw ), calc(88px * 1200 / 750)) no-repeat url(../img/scene02_search_num.png);
	background-color: inherit;
}
/* scene03 */
/* ======================================= */
#scene03::before,
#scene03 .scene__search,
#scene03 .modal__contents,
#scene03 .scene__problem,
#scene03a__modal .modal__contents,
#scene03b__modal .modal__contents,
#scene03c__modal .modal__contents,
#scene03d__modal .modal__contents,
#scene03e__modal .modal__contents {
	background-color: #ffcc5d;
}
#scene03::after {
	/* content: "3"; */
	background: center center / min(calc(88 / 750 * 100vw ), calc(88px * 1200 / 750)) min(calc(88 / 750 * 100vw ), calc(88px * 1200 / 750)) no-repeat url(../img/scene03_search_num.png);
	background-color: inherit;
}
/* scene04 */
/* ======================================= */
#scene04::before,
#scene04 .scene__search,
#scene04 .modal__contents,
#scene04 .scene__problem,
#scene04a__modal .modal__contents,
#scene04b__modal .modal__contents,
#scene04c__modal .modal__contents,
#scene04d__modal .modal__contents {
	background-color: #ff9486;
}
#scene04::after {
	/* content: "4"; */
	background: center center / min(calc(88 / 750 * 100vw ), calc(88px * 1200 / 750)) min(calc(88 / 750 * 100vw ), calc(88px * 1200 / 750)) no-repeat url(../img/scene04_search_num.png);
	background-color: inherit;
}
/* search */
/* ======================================= */
.scene__search {
	width: 100%;
	padding: min(calc(20 / 750 * 100vw), calc(20px * 1200 / 750));
	position: relative;
	z-index: auto;
}
.scene__search__title {
	width: min(calc(346 / 750 * 100vw), calc(346px * 1200 / 750));
	height: min(calc(86 / 750 * 100vw), calc(84px * 1200 / 750));
	border-radius: 9999px 0 0 9999px;
	background-color: #88483f;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	z-index: 2;
	top: min(calc(55 / 750 * 100vw), calc(55px * 1200 / 750));
	right: max(calc(-20 / 750 * 100vw), calc(-20px * 1200 / 750));
}
.scene__search__title > span {
	width: fit-content;
	font: 900  min(calc(32 / 750 * 100vw ), calc(32px * 1200 / 750)) / 1.25 var(--font-main);
	color: #ffffff;
	display: block;
}
.scene__search__contents {
	border-radius: min(calc(20 / 750 * 100vw ), calc(20px * 1200 / 750));
	position: relative;
	z-index: 0;
	overflow: hidden;
}
.scene__search__btn {
	width: min(calc(80 / 750 * 100vw ), calc(80px * 1200 / 750));
	height: min(calc(80 / 750 * 100vw ), calc(80px * 1200 / 750));
	/* background-color: #000000; */
	/* opacity: 0.5; */
	display: block;
	position: absolute;
	z-index: auto;
}
/* scene01 */
#scene01a {
	top: 52%;
	right: 73.5%;
}
#scene01b {
	top: 71.5%;
	right: 47.5%;
}
#scene01c {
	top: 75.5%;
	right: 87.5%;
}
#scene01d {
	top: 89%;
	right: 33%;
}
/* scene02 */
#scene02a {
	top: 44.5%;
	right: 31.5%;
}
#scene02b {
	top: 55.5%;
  right: 71.5%;
}
#scene02c {
	top: 59.5%;
  right: 20%;
}
#scene02d {
	top: 63.5%;
  right: 49%;
}
#scene02e {
	top: 75.5%;
  right: 60%;
}
#scene02f {
	top: 85%;
  right: 9.5%;
}
/* scene03 */
#scene03a {
	top: 35%;
	right: 49.5%;
}
#scene03b {
	top: 40.5%;
	right: 8%;
}
#scene03e {
	top: 62.5%;
  right: 48%;
}
#scene03d {
	top: 87.5%;
	right: 69%;
}
#scene03c {
	top: 87%;
  right: 44%;
}
/* scene04 */
#scene04a {
	top: 68%;
  right: 26%;
}
#scene04b {
	top: 70.5%;
	right: 63.5%;
}
#scene04c {
	top: 88.5%;
	right: 59%;
}
#scene04d {
	top: 72.5%;
  right: 8.5%;
}
/* JS */
/* ======================================== */
.modal{
  display: none;
}
.modal.is-open {
  display: block;
}
.overlay {
  position: fixed;
	z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}
.modal__wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal__contents {
	width: min(calc(341 / 750 * 100vw), calc(341px * 0.5 * 1200 / 750));/*変更*/
	/* height: min(calc(580 / 750 * 100vw), calc(580px * 1200 / 750)); */
	aspect-ratio: 546 / 812;
	margin-top: min(calc(27 / 750 * 100vw), calc(27px * 0.5 * 1200 / 750));
	border-radius: min(calc(20 / 750 * 100vw), calc(20px * 0.5* 1200 / 750));
	background-color: #FFFFFF;
	display: block;
	position: relative;
	z-index: auto;
}
.modal__contents img {
	border-radius: min(calc(20 / 750 * 100vw), calc(20px * 0.5 * 1200 / 750));
	overflow: hidden;
}
.modal__btn {
	width: min(calc(54 / 750 * 100vw), calc(54px * 0.5 * 1200 / 750));
	height: min(calc(54 / 750 * 100vw), calc(54px * 0.5 * 1200 / 750));
	border-radius: 9999px;
	background-color: #88483f;
	display: block;
	position: absolute;
	z-index: auto;
	top: max(calc(-27 / 750 * 100vw), calc(-27px * 0.5 * 1200 / 750));
	right: max(calc(-27 / 750 * 100vw), calc(-27px * 0.5 * 1200 / 750));
	cursor: pointer;
}
.modal__btn > span {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	z-index: auto;
}
.modal__btn > span::before,
.modal__btn > span::after {
  content: "";
  width: 60%;
  height: 2px;
	margin: auto;
  display: inline-block;
  background: #ffffff;
  border-radius: 2px;
  position: absolute;
  inset: 0;
}
.modal__btn > span::before {
  transform: rotate(45deg);
}
.modal__btn > span::after {
  transform: rotate(-45deg);
}


/* slide */
/* ======================================= */
.scene__slide__container {
	padding-bottom: min(calc(40 / 750 * 100vw ), calc(40px * 1200 / 750));
}
.scene__slide__container:last-child {
	padding-bottom: 0;
}
.slide__img {
	width: min(calc(328 / 750 * 100vw ), calc(328px * 1200 / 750));
	margin-bottom: min(calc(20 / 750 * 100vw), calc(20px * 1200 / 750));
	display: block;
}
.slide__text {
	margin-inline: auto;
	margin-top: 0.8em;
	text-align: center;
	font: 500  min(calc(26 / 750 * 100vw ), calc(26px * 1200 / 750)) / 1.25 var(--font-main);
	color: #231815!important;
	opacity: 0;
	/* translate: 0.7s; */
	transition: 0.3s ease;
}
.slide__text > span {
	margin-top: 0.4em;
	color: #231815!important;
	display: block;
}
.is-active > .slide__text {
	opacity: 1;
}
/* arrows */
/* ======================================= */
/* .your-class-arrow {} */
/* .your-class-arrow {} */
.your-class-prev {
	width: min(calc(25 / 750 * 100vw ), calc(25px * 1200 / 750));
	height: min(calc(28 / 750 * 100vw ), calc(28px * 1200 / 750));
	background-color: transparent;
	top: min(calc(175 / 750 * 100vw ), calc(175px * 1200 / 750));
	left: min(calc(175 / 750 * 100vw ), calc(175px * 1200 / 750));
	opacity: 1;
}
.your-class-next {
	width: min(calc(25 / 750 * 100vw ), calc(25px * 1200 / 750));
	height: min(calc(28 / 750 * 100vw ), calc(28px * 1200 / 750));
	background-color: transparent;
	top: min(calc(175 / 750 * 100vw ), calc(175px * 1200 / 750));
	right: min(calc(175 / 750 * 100vw ), calc(175px * 1200 / 750));
	opacity: 1;
}

/* problem */
/* ======================================= */
.scene__problem {
	padding: min(calc(20 / 750 * 100vw), calc(20px * 1200 / 750));
	padding-bottom: min(calc(80 / 750 * 100vw), calc(80px * 1200 / 750));
	position: relative;
	z-index: auto;
}
.scene__problem__inner {
	width: 100%;
  height: 100%;
	padding-bottom: min(calc(120 / 750 * 100vw), calc(120px * 1200 / 750));
}
.scene__problem__title {
	padding-bottom: min(calc(30 / 750 * 100vw), calc(30px * 1200 / 750));
	display: block;
}

.splide__pagination {
	margin: 0;
	gap: min(calc(40 / 750 * 100vw), calc(40px * 1200 / 750));
  counter-reset: pagination-num;
	bottom: auto;
}
/* .splide__pagination li {} */
.splide__pagination__page {
	width: min(calc(55 / 750 * 100vw), calc(55px * 1200 / 750));
	height: min(calc(55 / 750 * 100vw), calc(55px * 1200 / 750));
	padding-bottom: 0.12em;
	font: 900 min(calc(39 / 750 * 100vw), calc(39px * 1200 / 750)) / 1.0 var(--font-main);
	color: #88483f;
	border-radius: 9999px;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
}
.splide__pagination__page.is-active {
	color: #ffffff!important;
	background-color: #88483f;
	transform: scale(1);
}
.splide__pagination__page:before {
  counter-increment: pagination-num;
  content: counter(pagination-num);
}
.problem-prev {
	width: min(calc(37 / 750 * 100vw ), calc(37px * 1200 / 750));
	height: min(calc(42 / 750 * 100vw ), calc(42px * 1200 / 750));
	border-radius: 0;
	background-color: #88483f;
	clip-path: polygon(100% 0, 100% 100%, 0 50%);
	top: auto;
	left: min(calc(100 / 750 * 100vw ), calc(100px * 1200 / 750));
	bottom: max(calc(75 / 750 * 100vw * -1 ), calc(75px * 1200 / 750 * -1));
	opacity: 1;
}
.problem-next {
	width: min(calc(37 / 750 * 100vw ), calc(37px * 1200 / 750));
	height: min(calc(42 / 750 * 100vw ), calc(42px * 1200 / 750));
	border-radius: 0;
	background-color: #88483f;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	top: auto;
	right: min(calc(100 / 750 * 100vw ), calc(100px * 1200 / 750));
	bottom: max(calc(75 / 750 * 100vw * -1 ), calc(75px * 1200 / 750 * -1));
	opacity: 1;
}

/* scene__link */
/* ======================================= */
.scene__link {
	width: 100%;
	padding: min(calc(35 / 750 * 100vw), calc(35px * 1200 / 750)) min(calc(20 / 750 * 100vw), calc(20px * 1200 / 750));
}
.scene__link__btn__container {
	display: grid;
	gap: min(calc(20 / 750 * 100vw ), calc(20px * 1200 / 750));
}
.scene__link__btn {
	width: 100%;
	height: 2.5em;	
	font: 900 min(calc(28 / 750 * 100vw ), calc(28px * 1200 / 750)) / 1.0 var(--font-main);
	border: 1px solid #88483f;
	border-radius: 9999px;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: auto;
}
.scene__link__btn::before {
	content: "";
	width: min(calc(60 / 750 * 100vw), calc(60px * 1200 / 750));
	aspect-ratio: 1 / 1;
	margin: auto;
	background: center center / min(calc(60 / 750 * 100vw), calc(60px * 1200 / 750)) min(calc(60 / 750 * 100vw), calc(60px * 1200 / 750)) no-repeat url(../img/scene_link_btn-icon.svg);
	
	position: absolute;
	z-index: auto;
	top: 0;
	bottom: 0;
	left: 1em;
}
.scene__link__btn::after {
	content: "";
	width: min(calc(27 / 750 * 100vw), calc(27px * 1200 / 750));
	height: min(calc(31 / 750 * 100vw), calc(31px * 1200 / 750));
	margin: auto;
	background-color: #88483f;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	position: absolute;
	z-index: auto;
	top: 0;
	bottom: 0;
	right: 1em;
}
.scene__link__btn > span {
	width: fit-content;
	letter-spacing: 0.1em;
	color: #88483f;
	display: block;
}
.scene__link__caution {
	text-align: center;
	margin-top: 2em;
	font: 900 min(calc(18 / 750 * 100vw ), calc(18px * 1200 / 750)) / 1.0 var(--font-main);
	color: #88483f;
	display: block;
}