@charset "UTF-8";


@font-face {
  font-family: "nsjpr";
  font-style: normal;
  font-weight: 100;
  src: url("../font/NotoSansJP-Thin.woff") format("woff");
}

@font-face {
  font-family: "nsjpr";
  font-style: normal;
  font-weight: 300;
  src: url("../font/NotoSansJP-Light.woff") format("woff");
}

@font-face {
  font-family: "nsjpr";
  font-style: normal;
  font-weight: 400;
  src: url("../font/NotoSansJP-Regular.woff") format("woff");
}

@font-face {
  font-family: "nsjpr";
  font-style: normal;
  font-weight: 500;
  src: url("../font/NotoSansJP-Medium.woff") format("woff");
}
@font-face {
  font-family: "nsjpr";
  font-style: bold;
  font-weight: 700;
  src: url("../font/NotoSansJP-Bold.woff") format("woff");
}




/* =Reset
-------------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,li,a, strong {
	-webkit-font-feature-settings: 'palt' 1;
	font-feature-settings: 'palt' 1;
	letter-spacing: 0.01em;
}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal; }
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top; font-size: 0.6em;}

input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#000;}
img {vertical-align:top;}
input[type="radio"], input[type="checkbox"] {vertical-align: -3px;}

html>/**/body {
	font-family: 'nsjpr', sans-serif;
}
/*
* + html body {
	font-family: 'notoSerif', serif;
}
*/
figure {margin: 0; padding: 0;}


/* For modern browsers */
.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}
/* For IE 6/7 (trigger hasLayout) */
.cf {zoom:1;}
.clr {clear: both; line-height: 0; display: block;}

.nobb {border-bottom: none!important;}

.disnon {display: none;}



/* =all
-------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: none;
}
body {
	width: 100%;
	/*text-align: center;*/
	line-height: 1.6;
	font-size: 18px;
	color: #000;
	text-align: justify!important;
    font-feature-settings: 'palt'!important;
	position: relative;
}
@media screen and (max-width: 960px){
	body {font-size: 16px;}
}
@media screen and (max-width: 520px){
	body {font-size: 12px;}
}


a {text-decoration:none;}
.sp {display: none;}

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




/*----------------------------------------------------------------------
･margin等
-----------------------------------------------------------------------*/
/* font */
.fl {	float: left;}
.fr {	float: right;}
.fw {	width: 100%;}
.ta_l { text-align: left;}
.ta_c { text-align: center;}
.ta_r { text-align: right;}
.lh17 { line-height: 1.7;}
.lh20 { line-height: 2;}
.f10 {	font-size: 10px;}
.f12 {	font-size: 12px;}
.f14 {	font-size: 14px;}
.f15 {	font-size: 15px;}
.f16 {	font-size: 16px;}
.f18 {	font-size: 18px;}
.f20 {	font-size: 20px;}
.bold {	font-weight: 600;}
.red {	color: #d01126;}
.hColor { color:#395526;}
.white {color: #fff;}

/* mgn */
.mgn01 {margin-bottom: 0.1em;}
.mgn05 {margin-bottom: 0.5em;}
.mgn08 {margin-bottom: 0.8em;}
.mgn10 {margin-bottom: 1em;}
.mgn13 {margin-bottom: 1.3em;}
.mgn15 {margin-bottom: 1.5em;}
.mgn20 {margin-bottom: 2em;}
.mgn25 {margin-bottom: 2.5em;}
.mgn30 {margin-bottom: 3em;}
.mgn50 {margin-bottom: 5em;}
.mgn80 {margin-bottom: 8em;}

.mgt5 {margin-top: 5px;}
.mgt10 {margin-top: 10px;}
.mgt15 {margin-top: 15px;}
.mgt20 {margin-top: 20px;}
.mgt25 {margin-top: 25px;}

.pdn25 {padding-top: 1.5em;}

.ls01 { letter-spacing: -0.1em;}
.ls02 { letter-spacing: -0.05em;}

.bCenter {margin-left: auto; margin-right: auto;}


.cap {
	font-size: 12px;
	line-height: 140%;
}

.tShadow01 { color:#fff; text-shadow: black 2px 2px 4px, black -2px 2px 4px, black 2px -2px 4px, black -2px -2px 4px, black 2px 2px 4px, black -2px 2px 4px, black 2px -2px 4px, black -2px -2px 4px;}


header {overflow: hidden;}
header .logo {box-sizing: border-box; padding: 15px 10px 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9);}
header .logo .logo01 {display: flex;}
header .logo .logo01 a {display: inline-block;}
header .logo .logo01 a img {width: 300px;}
/*header .logo .logo01 a:first-child img {width: 198px;}*/
/*header .logo .logo01 a:last-child img {width: 54px; margin-left: 8px;}*/
header > * {position: relative;}

/*
header .logo .logo02 {width: 200px; margin-left: 30px;}
*/

header .wrap {}
header .wrap {
	position: relative;
	/*padding-bottom: 50px;*/
	background: #769fb6;
	background: #005bac;
	padding: 0;

}
header .wrap::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url("../images/bg01.jpg") no-repeat center top;
	background-size: cover;
	/*opacity: 0.6;*/
	/*opacity: 0.9;*/
	opacity: 1;
	/*mix-blend-mode: multiply;*/
}
@media screen and (min-width: 821px) and (max-width: 1110px){
	header .wrap::before {height: 110%;}
}



header h1 {
	text-align: center;
	/*margin-bottom: 200px;*/
	margin-bottom: 500px;
	/*color: #0056ac;*/
	color: #fff;
	margin-top: 20px;
	line-height: 1.3;
	position: relative;
	z-index: 1;
}


header h1 .sub {font-size: 1.6em; font-weight: bold; margin-bottom: 30px;  letter-spacing: 0.05em; position: relative;}
header h1 .sub::before {
	content: '';
	width: 100vw;
	height: 100%;
	background: linear-gradient(to right,  rgba(0,91,172,1) 0%,rgba(0,139,213,1) 50%,rgba(0,91,172,1) 100%);

	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
header h1 .sub span {position: relative;  display: inline-block; padding: 10px 5px;}

header h1 .title {color: #005bac;}

header h1 .title em {font-size: 3.4em; display: block; margin-bottom: 0px; font-weight: bold; letter-spacing: 0.05em; }
header h1 .title span {
	display: block;
	font-size: 1.5em;
	font-weight: bold;
	margin-top: 20px;
	line-height: 1.6;
}
header h1 .title span i {font-style: normal;}

header .container {max-width: 1400px; padding:  50px 20px 0px; position: relative;}
header .tArea {
	text-align: center;
	font-weight: 500;
	color: #fff;
	position: relative;
	padding: 80px 0 10px;
}
header .tArea::before {
	content: '';
background: linear-gradient(to bottom,  rgba(0,104,182,0) 0%,rgba(0,91,172,1) 100%);
	width: 100vw;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}


header .tArea p {font-size: 1.1em; position: relative; line-height: 2; padding-top: 30px; letter-spacing: 0.03em;}



header .tArea  > div {font-size: 2.6em; line-height: 1; }

header .tArea .fbox01 > div {position: relative;}


header .tArea div.date {display: flex; align-items: center; justify-content: center; font-size: 1.4em; font-weight: bold; letter-spacing: 0.05em; margin-bottom: 10px;}
header .tArea div.date em {font-weight: bold; font-size: 1.6em; position: relative; top: -3px;}
header .tArea div.date .day {
	display: inline-block;
	box-sizing: border-box;
	background: #fff;
	color: #005bac;
	padding: 5px;
	border-radius: 50%;
	
}
header .tArea div.date .day i {
	font-style: normal;
	display: inline-block;
	transform: scale(0.75);
	letter-spacing: 0;
	position: relative;
	top: -1px;
}

header .tArea div.location {display: flex; align-items: center; justify-content: center;}
header .tArea div.location span.posi02 {
	box-sizing: border-box;
	padding: 10px 20px;
	background: #00a1e9;
	border-radius: 5px;
	color: #fff;
	font-size: 0.7em;
	display: inline-block;
	margin-left: 20px;
}



@media screen and (min-width: 821px) and (max-width: 1300px){
	header .tArea .fbox01 {font-size: 3.5vw}
	header .tArea div.location span.posi02 {margin-left: 1vw}

}


@media screen and (max-width: 1110px){
	header h1 .title {}
	header h1 .title em {}
	header h1 .title em br.sp {display: inline-block;}
}

@media screen and (max-width: 820px){
	header .tArea .fbox01 {display: block;}
	header .tArea p .sp {display: inline-block;}
}

@media screen and (max-width: 780px){
	header .container {padding-top: 20px;}
	header .logo {padding: 10px;}
	header .logo .logo01 a img {width: 200px;}
	
	header .tArea br.sp {display: inline-block;}
}

@media screen and (max-width: 760px){
	/*header h1 > div:last-child {font-size: 2.2vw;}*/
	header h1 > div.title {font-size: 2.5vw;}
	header h1 .title span i {display: none;}
}

@media screen and (max-width: 640px){
	header h1 {margin-bottom: 60vw}
	header .wrap::before {
	background: url("../images/bg01_sp.webp") no-repeat center top;
	background-size: cover;
}

	
	header .tArea .fbox01 {font-size: 6vw}
	header .tArea div.location span.posi02 {margin-left: 2vw}
	
	header .tArea p {text-align: left;}
	header .tArea p br {display: none!important;}
}



@media screen and (max-width: 520px){
	header h1 .title span {margin-top: 5vw; font-size: 1.8em; line-height: 1.8;}
	header h1 .title span br.sp {display: inline-block;}
	
}



@media screen and (max-width: 420px){
	header .tArea {padding: 80px 0 0px;}
	header h1 .sub span {font-size: 0.8em; letter-spacing: 0.1em; padding: 8px;}
	header h1 > div.title {font-size: 2.4vw;}
	header h1 .title span {font-size: 16px;}
	
	header .tArea div.location span.posi02 {padding: 5px 2vw;}
}


@media screen and (max-width: 365px){
	header .tArea .fbox01 span.posi01 {}
}






main {  width:100%;  margin: auto; }
article { margin: 0 auto 0px;  /*padding: 40px 0 0; background: #fff;*/}

.wrap {margin: auto;  width: 100%; padding: 30px 20px 30px; box-sizing: border-box; position: relative;}
@media screen and (max-width: 420px){
	.wrap {padding: 30px 10px;}
}
.container {
	max-width: 1000px;
	margin: auto;
	width: 100%;
	/*padding: 50px 50px;*/
	padding: 50px 0px;
	box-sizing: border-box;
	/*border-radius: 10px;*/
}


@media screen and (max-width: 650px) {
	.container {padding: 30px 0px;}
}




.animation-box { opacity:0; transition: all 0.6s ease-out; position:relative; top:30px;}
.animation-box.active { opacity:1; top:0;}


.imgArea {position: relative;}


/* caption */

.fbox01 {display: flex; justify-content: space-between; }
.fbox02 {display: flex; justify-content: space-between; flex-direction: row-reverse;}

.caption { max-width: 1000px; box-sizing: border-box; padding: 20px 0px; margin: auto; font-family:游ゴシック,'Yu Gothic',游ゴシック体,YuGothic,メイリオ,Meiryo,'ヒラギノ角ゴシック Pro','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','MS PGothic',sans-serif;}
.caption p {font-size: 11px; text-align: left; line-height: 160%;}

@media screen and (min-width: 920px){
}



h2 {
	font-size: 2.6em;
	position: relative;
	text-align: center;
	margin-bottom: 30px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: #006cb6;
	/*color: #006cb6;*/
	
}
@media screen and (max-width: 420px){
	h2 {font-size: 2.2em;}
}

h2 span {position: relative;}


footer {/*margin: 25px 0;*/ /*background: #000; color: #fff;*/ margin-top: 120px;}

footer .wrap { padding: 0;}
footer .wrap .container {
	box-sizing: border-box;
	padding: 65px 35px;
	background: #eef4f9;
	/*border-radius: 10px;*/
	max-width: none;
}
/*footer .wrap .container h2 {font-size: 1.8em;}*/
footer h4 {/*color: #000;*/ font-size: 1.4em; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 30px;}
footer #contact {text-align: center;}
footer #contact dl {/*display: flex; justify-content: center;*/}
footer #contact dl dt {  font-size: 1.2em; font-weight: 500; margin-bottom: 20px;}
footer #contact dl dd {}
footer #contact dl dd .address {margin-bottom: 20px;}
footer #contact dl dd a {color: #1B5DB5;}

footer #contact .caption p {text-align: center;}

footer #copyRight {color: #333; text-align: center; font-size: 12px;/* margin-top: 100px; background: #e8e8e8;*/ padding: 10px 0}

@media screen and (max-width: 520px){
	footer #copyRight {font-size: 10px;}
}

@media screen and (max-width: 350px){
	footer .wrap .container {padding: 45px 15px;}
	footer #contact dl dt {font-size: 1.1em;}
}


a#toTop {
	position: fixed;
	bottom:0px;
	right: 0;
	width: 50px;
	height: 24px;
	font-size: 1.4em;
	color: #29407c;
	/*border-radius: 5px 5px 0 0 ;*/
	line-height: 0;
	background: rgba(0,0,0,0.7);
}
a#toTop::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 70%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	
}
a#toTop:hover { opacity: 0.7;}
@media screen and (max-width: 660px){
	a#toTop {font-size: 1em;}
}


input[type="text"] {width: 100%;}
input[type="text"], input[type="search"],  select {border-radius: 3px; border: none; background: rgba(0,0,0,0.1); box-sizing: border-box; padding: 5px; transition: all 0.3s ease; color: #000;}
textarea {border-radius: 3px; border: none; background: rgba(0,0,0,0.1); width: 100%; box-sizing: border-box; padding: 5px; transition: all 0.3s ease; height: 150px;}

label > input[type="file"], label > input[type="button"] {display: none;}
label[for="pic_up"] {cursor: pointer;}

input[type="text"]:focus, textarea:focus, select:focus, input[type="search"]:focus {
box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.4);
	outline: none!important;
    background-color: rgba(39,118,192, 0.2)!important;
}
input::placeholder {color: rgba(0,0,0,0.3);}
input[type="radio"], input[type="checkbox"]  {position: relative; top: -3px; margin-right: 5px;}

input[type="submit"] {
	box-sizing: border-box;
	padding: 5px 20px;
	border-radius: 3px;
	border: none;
	background: #666;
	color: #000;
	cursor: pointer;
	transition: all 0.3s ease;
}
input[type="submit"]:hover {background: #444;}

option {background: rgba(39,118,192, 0.2)}



@media screen and (max-width: 480px){
input[type="text"], input[type="search"],  select, textarea {
	font-size: 16px;
	transform: scale(0.8);
	transform-origin: left center;
}
}




.btnArea {margin-top: 50px;}
.btnArea a, .btnArea button {
	position: relative;
	color: #fff;
	display: block;
	text-align: center;
	font-size: 1.6em;
	box-sizing: border-box;

	padding: 40px 5px;
	max-width: 560px;
	cursor: pointer;
	margin: auto;
	border-radius: 8px;
	transition: all 0.3s ease;
	/*background-image: linear-gradient(322deg, rgba(156, 112, 0, 1) 7%, rgba(224, 163, 8, 1) 46%, rgba(152, 109, 0, 1) 93%);*/
	background: #e95532;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f73d0e+0,f77b00+50,f73d0e+100 */
background: linear-gradient(135deg,  rgba(247,61,14,1) 0%,rgba(247,123,0,1) 50%,rgba(247,61,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	letter-spacing: 0.05em;
	font-weight: 500;
box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);



}

.btnArea a::after, .btnArea button::after {
	content: '';
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	box-sizing: border-box;
	border-radius: 50%;
	/*border: 1px solid #fff;*/
	background: #fff;
}


.btnArea a:hover, .btnArea button:hover {opacity: 0.6;}

.btnArea a span, .btnArea button span {

}
.btnArea a span::before, .btnArea button span::before {
	content: '';
	width: 13px;
	height: 2px;
	position: absolute;
	top: 50%;
	right: 23px;
	transform: translateY(-50%);
	background: #e95532;
	z-index: 1;
}
.btnArea a span::after, .btnArea button span::after {
	content: '';
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border-bottom: 2px solid #e95532;
	border-right: 2px solid #e95532;
	position: absolute;
	right: 21px;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	z-index: 1;
	
}



@media screen and (max-width: 520px){
	.btnArea a, .btnArea button {font-size: 1.2em;}
}






.btnArea a span small {display: block;}

.btnArea.comingSoon a {opacity: 0.3; pointer-events: none;}


#index header .btnArea {
	margin-top: 0;
	padding: 25px 0 60px;
	background: #005bac;
}





.inPage {}
.inPage .btnArea, #permission .btnArea {display: flex; justify-content: center; margin-top: 80px; margin-bottom: 50px}
.returnBtn, .nextBtn {
	text-align: center;
	position: relative;
	max-width: 500px;
	width: 100%;
	margin: 0 30px;
}

.returnBtn button, .nextBtn button {border: none; display: block; width: 100%; /*font-family: 'notoSerif', serif;*/ font-family: 'nsjpr', sans-serif;}
.returnBtn a, .nextBtn a, .returnBtn button, .nextBtn button {
	display: block;
	height: 100%;
	width: 100%;
	color: #fff;
	font-size: 2em;
	letter-spacing: 0.1em;
	padding: 10px 5px;
	box-sizing: border-box;
	border-radius: 8px;
	position: relative;
	transition: all 0.3s ease;
	box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.2);
}

.returnBtn a span, .nextBtn a span, .returnBtn button span, .nextBtn button span {display: inline-block; padding: 15px 20px;}
.returnBtn a span small, .nextBtn a span small, .returnBtn button span small, .nextBtn button span small {font-size: 0.7em;}
.returnBtn a:hover, .nextBtn a:hover, .returnBtn button:hover, .nextBtn button:hover {opacity: 0.6;}

 .returnBtn,  .nextBtn {max-width: 300px;}
 .returnBtn a,  .nextBtn a,  .returnBtn button,  .nextBtn button {font-size: 1.3em;}


 .returnBtn a::after,  .returnBtn button::after {
	right: initial;
	left: 15px;
	/*transform: translateY(-50%) rotate(-90deg) scaleY(1.3);*/

}
.returnBtn a span::before, .returnBtn button span::before {
	content: '';
	width: 13px;
	height: 2px;
	position: absolute;
	top: 50%;
	left: 23px;
	transform: translateY(-50%);
	background: #e95532;
	z-index: 1;
}
.returnBtn a span::after, .returnBtn button span::after {
	content: '';
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border-bottom: 2px solid #e95532;
	border-right: 2px solid #e95532;
	position: absolute;
	left: 21px;
	top: 50%;
	transform: translateY(-50%) rotate(135deg);
	z-index: 1;
	
}






@media screen and (max-width: 920px){
	.inPage .returnBtn, .inPage .nextBtn {margin: 0 15px}
}


@media screen and (max-width: 500px){
	.inPage .returnBtn, .inPage .nextBtn {margin: 0 5px}
	/*.inPage .returnBtn a, .inPage .nextBtn a, .inPage .returnBtn button, .inPage .nextBtn button {font-size: 1.1em;}*/
	.returnBtn a span, .nextBtn a span, .returnBtn button span, .nextBtn button span {padding: 5px 5px;}
}



@media screen and (max-width: 420px){

	.nextBtn a::after, .nextBtn button::after {
		right: 5px;
		transform: translateY(-50%) rotate(90deg) scale(0.8);
	}
	.returnBtn a::after, .returnBtn button::after {
		left: 5px;
		transform: translateY(-50%) rotate(90deg) scale(0.8);
	}
	.btnArea a span::before, .btnArea button span::before {width: 10px; right: 15px;}
	.returnBtn a span::before, .returnBtn button span::before {width: 10px; left: 15px;}
	.btnArea a span::after, .btnArea button span::after {width: 8px; height: 8px; right: 14px;}
	.returnBtn a span::after, .returnBtn button span::after {width: 8px; height: 8px; left: 14px;}
	
	
}




.toNewWindow a {
	position: relative;
	padding-left: 25px;
}
.toNewWindow a::before {
	content: '';
	position: absolute;
	left: 0;
	width: 18px;
	height: 18px;
	top: 3px;
	background: url("../images/icon_newWindow.svg") no-repeat center center / contain;
}




.kabu {
	font-style: normal;
	display: inline-block;
	text-indent: -0.5em;
}