@charset "utf-8";

@font-face {
	font-family: "ZenKakuGothicNew";
	src: url(../fonts/ZenKakuGothicNew-Medium.woff2) format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "ZenKakuGothicNew";
	src: url(../fonts/ZenKakuGothicNew-Bold.woff2) format("woff2");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "PlaywriteAUVIC";
	src: url("../fonts/PlaywriteAUVIC.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

/* 共通パーツ */
html,
body {
	width: 100%;
	height: 100%;
	font-family: "ZenKakuGothicNew", sans-serif;
	-webkit-overflow-scrolling: touch;
}

html {
	overflow-y: scroll;
	font-size: 625%;
}

a:link {
	color: #042257;
	text-decoration: none;
}

a:visited {
	color: #042257;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	color: #51c6ff;
	transition: all 0.3s ease-out;
}

.both {
	clear: both;
}

.block {
	display: block;
}

.nodisp {
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	height: 0;
	opacity: 0;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.bold {
	font-weight: 700;
}

.strong {
	font-weight: 700;
	color: #042257;
	font-size: 100%;
	text-decoration: underline;
}

.underline {
	text-decoration: underline !important;
}

.flexbox {
	position: relative;
	margin: 0 auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flexbetween {
	justify-content: space-between;
}

.flexaround {
	justify-content: space-around;
}

.flexcenter {
	justify-content: center;
}

.flexend {
	justify-content: flex-end;
}

.flexstart {
	justify-content: flex-start;
}

.flexaligncenter {
	align-items: center;
}

.flexalignstart {
	align-items: flex-start;
}

.flexalignend {
	align-items: flex-end;
}

.flexstretch {
	align-content: stretch;
}

.flexbox .box {
	position: relative;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

/* chrome opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
	img {
		image-rendering: -webkit-optimize-contrast;
	}
}

/* safari*/
::-webkit-full-page-media,
:future,
:root img {
	image-rendering: auto;
}

svg {
	vertical-align: bottom;
	max-width: 100%;
}

img[src$=".svg"] {
	width: 100%;
}

iframe[name="google_conversion_frame"] {
	position: absolute;
	top: 0;
}

body {
	position: relative;
	width: 100%;
	color: #072f58;
	background-color: #fffffa;
	font-size: 0.14em;
	line-height: 1.7em;
	font-weight: 500;
	word-wrap: break-word;
	z-index: -20;
}

section {
	position: relative;
	margin: 0 auto;
	padding: 0;
}

#wrap {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	opacity: 0;
	min-height: 100vh;
	min-height: 100dvh;
	box-sizing: border-box;
	padding-bottom: min(37.27%, 228.5px);
}

.btn_menu {
	position: fixed;
	top: 0;
	right: 0;
	display: block;
	width: 50px;
	height: 50px;
	z-index: -1600;
	opacity: 0;
	transition: all 0.5s ease-in;
}

.btn_menu .menu,
.btn_menu .close {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	opacity: 0;
	transition: all 0.5s ease-in;
}

.btn_menu .close {
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
}

.btn_menu.disp {
	animation: blur 0.4s ease-in 0s 1 normal forwards;
	z-index: 1600;
}

.btn_menu .menu.disp {
	animation: blur 0.4s ease-in 0s 1 normal forwards;
	z-index: 1600;
}

.btn_menu .close.disp {
	animation: blur 0.4s ease-in 0s 1 normal forwards;
	z-index: 1600;
}

.btn_win {
	position: fixed;
	top: 0;
	right: 0;
	display: block;
	width: 50px;
	height: 50px;
	z-index: -1900;
	transition: all 0.5s ease-out;
}

.btn_win.disp {
	animation: blur 0.4s ease-in 0s 1 normal forwards;
	z-index: 1900;
}

/* youtube */
.movieWrap {
	position: relative;
	margin: 0 auto;
	background-color: #000000;
	max-width: 720px;
}

.movie {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
}

.movie iframe,
.movie img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.opwin {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	opacity: 0;
	z-index: -1800;
	overflow-y: auto;
	background-color: rgba(196, 221, 229, 0.7);
	transition: all 0.3s ease-out;
}

.close_win {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 1801;
	overflow: hidden;
}

.modal {
	position: absolute;
	top: 90px;
	left: 50%;
	width: 100%;
	transform: translateX(-50%);
	padding-bottom: 30px;
	opacity: 0;
	z-index: -1802;
	max-width: 880px;
}

.modal.goods {
	max-width: 580px;
}

.modal .mordalinner {
	position: relative;
	margin: 0 auto;
	opacity: 0;
	transition: all 0.3s ease-out;
}

.modal .mordalinner.disp {
	opacity: 1;
}

.modal .mordalinner .modalWrap {
	position: relative;
	margin: 0 auto;
	padding: 20px 10px;
	width: calc(100% - 40px);
	background-color: #ffffff;
	border: solid 2px #a378b6;
	border-radius: 5px;
}

.modal .mordalinner .movieWrap {
	margin: 0 auto 10px auto;
}

.modal .mordalinner .modalCont {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
	z-index: 1803;
}

.modal.goods .mordalinner .modalCont {
	padding: 20px 10px;
}

.modal .mordalinner .ttl {
	position: relative;
	margin: 0 auto 10px auto;
	padding-left: 1.3em;
	font-size: 0.16rem;
	color: #8b0d97;
	font-weight: 500;
}

.modal .mordalinner .modalCont img {
	display: block;
	margin: 0 auto;
}

.sp {
	display: block;
}

.pc {
	display: none;
}

.is-empty {
	visibility: hidden;
	padding: 0;
	height: 0;
	margin: 0 5px !important;
}

#banner .is-empty {
	margin: 0 5px !important;
}

ruby {
	display: inline-block;
	padding-top: 0.5em;
}

ruby[data-ruby] {
	position: relative;
}

ruby[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	line-height: 100%;
	text-align: center;
	left: -3em;
	right: -3em;
	top: 0.1em;
	font-size: 0.5em;
}

#story ruby[data-ruby]::before {
	top: 1em;
}

ruby[data-ruby] rt {
	display: none;
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	.sp {
		display: none;
	}

	.pc {
		display: block;
	}

	body {
		font-size: 0.16em;
	}

	#wrap {
		padding: 0;
	}
}