@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');
@font-face {
  font-family: "YakuHanRPs";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./YakuHanRPs/woff2/YakuHanRPs-Regular.woff2") format("woff2");
  unicode-range: U+3008, U+3009, U+300a, U+300b, U+300c, U+300d, U+300e, U+300f,
    U+3010, U+3011, U+3014, U+3015, U+ff08, U+ff09, U+ff3b, U+ff3d, U+ff5b,
    U+ff5d;
}
@font-face {
  font-family: "YakuHanRPs";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./YakuHanRPs/woff2/YakuHanRPs-Medium.woff2") format("woff2");
  unicode-range: U+3008, U+3009, U+300a, U+300b, U+300c, U+300d, U+300e, U+300f,
    U+3010, U+3011, U+3014, U+3015, U+ff08, U+ff09, U+ff3b, U+ff3d, U+ff5b,
    U+ff5d;
}


*{
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
/*
	-ms-transition: all .5s ease;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
*/
}
:root {
  --main01: #00A0D2;
  --main02: #0A5776;
  --back01: #FDF5F6;
  --back02: #052275;
  --back03: rgba(0,160,220,0.5);
  --key01:#FFF79A;
  --text:#444444;
  --grad01s:#33bce5;
  --grad02s:#25b49b;
  --gradend:#7cd6c6;
  --grad01:linear-gradient(0deg, rgba(124,214,198,1) 0%, rgba(51,188,229,1) 100%);
	--grad02: linear-gradient(0deg, rgba(124,214,198,1) 0%, rgba(37,180,155,1) 100%);
}

html{
	font-size: 10px;
	font-size: 62.5%;
}
/* html, body {height: auto;min-height: 100vh;} */
body, h1, h2, h3, h4, h5, h6, blockquote, p, form,iframe{margin: 0;padding: 0;}
h1, h2, h3, h4, h5, h6{font-weight: 700;}
ul,li{list-style:none;margin:0;padding:0;}
ol li{list-style-position:outside;padding:0;}
li ul, li ol{padding: 0;}
img{
	border: 0;
	width: auto;
	max-width: 100%;
	-webkit-transition: all 0.25s ease;
					transition: all 0.25s ease;
}
h1{margin: 0; padding: 0;}
del {text-decoration: line-through;}
a{
	color: #111;
	-webkit-transition: all 0.25s ease;
					transition: all 0.25s ease;
}
a:hover{color: #f55;}
a::before,a::after{
	-webkit-transition: all 0.25s ease;
					transition: all 0.25s ease;
}
blockquote{
	margin: 0 0 0 5px;
	padding: 3px 0 3px 10px;
	border-left: 2px solid #DDD;
}
th{font-weight: normal;}
select,
input,
button,
textarea,
select,
button {
	font-size: 100%;
}
sup{vertical-align: super;}
strong, b{font-weight: 700;}

body {
/* 	font-family: 'Noto Sans JP', Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; */
	font-family: YakuHanRPs, 'Zen Maru Gothic', "游ゴシック", YuGothic, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.5;
	text-align: left;
	text-align: justify;
	text-justify: inter-ideograph;
	-webkit-text-size-adjust: 100%;
/* 	-webkit-font-smoothing: antialiased; */
	position: relative;
	color: var(--text);
	letter-spacing: 0.03em;
	margin: 0 auto;
	word-break: break-all;
	font-weight: 500;
}

/* =====
 * header
 * ===== */
#header{position: fixed;top: 0;left: 0;width: 100%;z-index: 999999;padding: 0 5%;background-color: var(--back03);}
#gnavi {padding: 0;z-index: 888888;}
#logo {
	margin: 0;
	padding: 30px 15px 15px;
	background-color: #fff;
	line-height: 1;
	-webkit-transition: all 0.5s ease;
					transition: all 0.5s ease;
	overflow: hidden;
	z-index: 999999;
	border-radius: 0 0 6px 6px;
}
/* #logo a {overflow: hidden;} */
#logo a,#logo a img{display: block;position: relative;}
#logo a img{width: 100%;}
#logo a:hover{opacity: 0.6;}

.header-nav_btn {display: none;}
/* #header-nav-list{width: 100%;} */
.header-nav-list li {
	position: relative;
	line-height: 1;
	margin-left: 20px;
	padding: 0;
	-webkit-transition: all 0.5s ease;transition: all 0.5s ease;
}
#header-nav-list li:first-child{margin-left: 0;}
#header-nav-list li a{
	display: block;
	position: relative;
	padding: 15px 0px 14px;
	line-height: 1;
	text-decoration: none;
	z-index: 9999;
	display: block;
	margin: 0 auto;
	font-weight: 500;
	color: #fff;
}
#header-nav-list li a img{display: block;margin: auto;}
/*
#header-nav-list li a::after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: var(--key01);
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.5s ease;
					transition: all 0.5s ease;
	z-index: -1;
	-webkit-transform-origin: left center;
		 	 		transform-origin: left center;
}
*/
/*
#header-nav-list li a.active::after,
#header-nav-list li a:hover::after{
	-ms-transform: scaleX(1);
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}
*/
#header-nav-list li a:hover {color: var(--key01);}
#header-nav-list li.nav-sns a:hover {opacity: 0.5;}

#header-nav-list li#gnavi-mail{padding: 0;margin-left: 30px;}
#header-nav-list li#gnavi-mail a{padding: 30px;background-color: var(--key01);width: 160px;text-align: center;border-radius: 0 0 0 18px;color: #fff;}
#header-nav-list li#gnavi-mail a::after{display: none;}
#header-nav-list li#gnavi-mail a:hover {background-color: var(--key02);}

@media (min-width: 961px) {
	#header-nav_body{display: block!important;opacity: 1!important;}
}

@media (max-width: 960px) {
	#header::before{display: none;}
	#logo {width: 160px;padding: 20px 10px 10px;}

	.header-nav {z-index: 88888;}
	#header-nav_body {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: var(--main01);
		padding: 0;
/* 		overflow: hidden; */
		overflow: auto;
		display: none;
		align-content: center;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	}
	#header-nav-list{
		width: 100%;
		-webkit-transition: all 0.5s ease;
						transition: all 0.5s ease;
		padding: 0 15%;
		overflow: hidden;
		-webkit-overflow-scrolling:touch;
	}
/*
	.header-nav.close #header-nav_body {visibility: hidden;opacity: 0;}
	.header-nav.open #header-nav_body {visibility: visible;opacity: 1;}
*/
	#header-nav-list li {
		width: 100%;
		max-width: 400px;
		height: auto;
		margin: 0 auto!important;
/* 		padding: 0; */
/* 		text-align: center; */
		padding: 15px 0;
		text-align: center;
	}
/* 	.header-nav-list li a{color: #888;} */
	#header-nav-list li > a{
		text-align: center;
		display: inline-block;
		padding: 5px 0;
		color: #fff;
	}
	#header-nav-list li.nav-sns{width: 33.3333333333%;}
/* 	#header-nav-list li > a::after{background-color: #fff;} */
	.header-nav_btn {
		display: block;
		position: fixed;
		right: 3%;
		top: 3%;
		z-index: 999999;
		width: 56px;
		height: 56px;
		-webkit-transition: all 0.5s ease;
						transition: all 0.5s ease;
		background: var(--main01);
		border: 1px solid transparent;
	}
/* 	#header.header .header-nav_btn{top: 8px;} */
	.header-nav_menuIcon {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 30px;
		height: 30px;
		display: block;
		cursor: pointer;
	}
	.header-nav_menuIcon > span {
		display: inline-block;
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fff;
		-webkit-transition: all 0.5s;
						transition: all 0.5s;
		-webkit-transform: rotate(0deg);
						transform: rotate(0deg);
	}
	.header-nav_menuIcon > .top { top: 4px;}
	.header-nav_menuIcon > .middle { top: 14px;}
	.header-nav_menuIcon > .bottom { bottom: 4px;}
	.header-nav_menuIcon.is-active span{background-color: #fff;}
	.header-nav_menuIcon.is-active > .top {
	-webkit-transform: translateY(10px) rotate(-45deg);
					transform: translateY(10px) rotate(-45deg);
	}
	.header-nav_menuIcon.is-active > .middle {opacity: 0;}
	.header-nav_menuIcon.is-active > .bottom {
		-webkit-transform: translateY(-10px) rotate(45deg);
						transform: translateY(-10px) rotate(45deg);
	}
	.open .header-nav_btn{border-color: #fff;background-color: transparent;}
	
}

/* =====
 * contents
 * ===== */

#contents{position: relative;width: 100%;margin: 0;padding: 0;}

@media (max-width: 960px) {
	#contents{width: 100%;}
}

section h1{position: relative;line-height: 1.25;}

.contents{width: 100%;position: relative;z-index: 9999;padding: 0;}
.contents section{position: relative; overflow: hidden;}

.sec-title{font-size: 33px;font-size: 3.3rem;text-align: center;line-height: 1;margin-bottom: 60px;color: var(--main02);}
.sec-title span{display: block;line-height: 1;font-size: 14px;font-size: 1.4rem;padding-top: 25px;}
@media (max-width: 767px) {
	.sec-title{margin-bottom: 45px;}
}

.hline-span{display: block;line-height: 1;font-size: 14px;font-size: 1.4rem;color: var(--key02);margin-bottom: 30px;}

p.lead{font-size: 27px;font-size: 2.7rem;text-align: center;margin-bottom: 30px;}

.container-1920,
.container-xl,
.container-l,
.container-m,
.container-s,
.container-mini,
.container {position: relative;margin: 0 auto;padding: 0;}
.container-1920{width: 100%;max-width: 1920px;}
.container-xl{width: 90%;max-width: 1440px;}
.container-l{width: 90%;max-width: 1152px;}
.container-m{width: 87.5%;max-width: 1040px;}
.container-s{width: 85%;max-width: 800px;}
.container-mini{width: 85%;max-width: 600px;}
.container{width: 87.5%;max-width: 960px;}
@media (max-width: 1080px) {
	.container-xl{max-width: 980px;}
	.container-l{max-width: 900px;}
}
@media (max-width: 960px) {
	.container,.container-m,.container-s{width: 85%;}
}
@media (max-width: 767px) {
	.container,.container-m{width: 87.25%;}
}

.page-header{position: relative;padding-top: 60px;height: 280px;background-repeat: no-repeat;background-position: center center;background-size: cover;}
.page-header h1{text-align: center;width: 100%;line-height: 1;padding: 0;margin: 0 auto;}
@media (max-width: 767px) {
	.page-header-inner{height: 170px;}
}

#modal{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	background: rgba(0, 0, 0, 0.8);
	z-index: 9999999;
	overflow: hidden !important;
}
#modalclose{position: absolute;top: 3%;right: 3%;width: 50px;}
#modalclose img{display: block;width: 100%;}
#trailer-mov{width: 90%;max-width: 960px;aspect-ratio: 16 / 9;}
#trailer-mov iframe{display: block;width: 100%;height: 100%;object-fit: cover;object-position: center;}

/* =====
 * footer
 * ===== */

#foot-page {position: relative;padding: 60px 0 50px;background-color: var(--back01);}
#foot-page h1 {text-align: center;line-height: 1;margin-bottom: 50px;}
#foot-page h1 img{width: 100%;max-width: 360px;}
#foot-page ul li {margin: 0 10px;}
#foot-page ul li a,
#foot-page ul li a img{display: block;}

#foot-page ul li a:hover{opacity: 0.5;}

#footer {position: relative;padding: 0;text-align: center;z-index: 3333;}


#copyright{position: relative;font-size: 12px;font-size: 1.2rem;padding: 19px 25px;background-color: var(--main02);line-height: 1;color: #fff;}

@media (max-width: 767px) {
	#copyright{font-size: 10px;font-size: 1.0rem;}
}



/* =====
 * MISC
 * ===== */

#modal{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100svh;
	background: rgba(0, 0, 0, 0.8);
	z-index: 9999999;
	overflow: hidden !important;
}
#modalclose{position: absolute;top: 3%;right: 3%;width: 50px;}
#modalclose img{display: block;width: 100%;}
#trailer-mov{width: 90%;max-width: 960px;aspect-ratio: 16 / 9;}
#trailer-mov iframe{display: block;width: 100%;height: 100%;object-fit: cover;object-position: center;}

.w100{width: 100%;}

.flist{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}
.row-reverse{
-webkit-flex-direction:row-reverse;
		-ms-flex-direction:row-reverse;
				flex-direction:row-reverse;
}
.space-between{
-webkit-box-pack: justify;
	 -ms-flex-pack: justify;
 justify-content: space-between;
}
.align-center{
	-webkit-box-align: center;
		 -ms-flex-align: center;
-webkit-align-items: center;
				align-items: center;
}
.justify-center{
			 -webkit-box-pack: center;
			-webkit-flex-pack: center;
					-ms-flex-pack: center;
			-webkit-box-align: center;
-webkit-justify-content: center;
				justify-content: center;
}
.align-top{
	-webkit-box-align:flex-start;
		 -ms-flex-align:flex-start;
-webkit-align-items:flex-start;
				align-items:flex-start;
}
.align-bottom{
	-webkit-box-align:flex-end;
		 -ms-flex-align:flex-end;
-webkit-align-items:flex-end;
				align-items:flex-end;
}
.justify-end{
 -webkit-box-pack: end;
		-ms-flex-pack: end;
	justify-content: flex-end;
}

.mb0{	margin-bottom: 0!important;}
.mb5{	margin-bottom: 5px!important;}
.mb10{margin-bottom: 10px!important;}
.mb15{margin-bottom: 15px!important;}
.mb20{margin-bottom: 20px!important;}
.mb25{margin-bottom: 25px!important;}
.mb30{margin-bottom: 30px!important;}
.mb35{margin-bottom: 35px!important;}
.mb40{margin-bottom: 40px!important;}
.mb45{margin-bottom: 45px!important;}
.mb50{margin-bottom: 50px!important;}
.mb60{margin-bottom: 60px!important;}
.pb0{padding-bottom: 0 !important;}

.relative{position: relative;}
.fz10{font-size: 10px;font-size: 1.0rem;}
.fz11{font-size: 11px;font-size: 1.1rem;}
.fz12{font-size: 12px;font-size: 1.2rem;}
.fz16{font-size: 16px;font-size: 1.6rem;}
.fz18{font-size: 18px;font-size: 1.8rem;}

/* Clearfix */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
	content: " ";
	display: table;
	width: 100%;
}
.clearfix:after,
.container:after,
.row:after {
	clear: both;
}

/* Float */
.left   {float: left;}
.right  {float: right;}
.center {margin-right: auto !important; margin-left: auto !important;}

@media (max-width: 480px) {
	.left,.right{float: none;}	
}

/* Text Alignment */
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.text-justify {
	text-align: justify;
	text-justify: inter-ideograph;
	-webkit-text-size-adjust: 100%;
}
.text-nowrap {white-space: nowrap;}
.text-bold {font-weight: bold;}
.text-blue{color: #006AAC;}
.text-gray{color: #333;}

/* Visibility */
.disn {display: none;}

.visible-s,
.visible-s-block,
.visible-xs,
.visible-xs-block {display: none!important;}

@media (max-width: 960px) {
	.visible-s,
	.visible-s-block {display: block!important;}
	.hidden-s {display: none!important;}
}
@media (max-width: 767px) {
	.visible-xs,
	.visible-xs-block {display: block!important;}
	.hidden-xs {display: none!important;}
}