@charset "UTF-8";
/* CSS Document */

header,
nav,
aside,
section,
footer,
figure,
figcaption {display:block;}

:root {
--first-color: #00A0F6;
--second-color: #0083EE;
--third-color: #0065E1;
--fourth-color: #F7F4FF;
--fifth-color: #D6EAFB;
--attend-color:#ff6300;
--attend-color02:#FF6E6E;
--header-size:75px;
--headerwide-size:138px;
--fontfamily-01:"Montserrat", serif;
}

#scrlNum{
	position:fixed;
	left:0;
	top:0;
	width:0.3em;
	z-index:10;
	display:none;
}

/*フォーム項目*/

input,
select,
button,
textarea {
	border:solid 1px #ccc;
	box-sizing:border-box;
	padding:5px 10px;
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 10px;   /* Firefox用 */
	background:#fff;
	-webkit-appearance: none;
	width:100%;
}

input[type="checkbox"]{
	width:20px;
	height:20px;
	padding:5px;
	border-radius: 5px;        /* CSS3草案 */  
	-webkit-border-radius: 5px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 5px;   /* Firefox用 */
	margin-right:5px;
	position:relative;
}
/*input[type="checkbox"].active::before*/
input[type="checkbox"]:checked::before{
	content:"";
	display:block;
	width:12px;
	height:12px;
	background:#ccc;
	position:absolute;
	left:3px;
	top:3px;
	border-radius: 3px;        /* CSS3草案 */  
	-webkit-border-radius: 3px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 3px;   /* Firefox用 */
}

input[type="radio"]{
	width:20px;
	height:20px;
	padding:5px;
	border-radius: 20px;        /* CSS3草案 */  
	-webkit-border-radius: 20px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 20px;   /* Firefox用 */
	margin-right:5px;
	position:relative;
}
/*input[type="radio"].active::before*/
input[type="radio"]:checked::before{
	content:"";
	display:block;
	width:12px;
	height:12px;
	background:#ccc;
	position:absolute;
	left:3px;
	top:3px;
	border-radius: 12px;        /* CSS3草案 */  
	-webkit-border-radius: 12px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 12px;   /* Firefox用 */
}

form .btmForm{
	padding-top:50px;
}
form .btmForm li{
	padding:10px 0;
}

input[type="button"],
input[type="reset"],
input[type="submit"],
button{
	cursor:pointer;
	border:none;
	background:var(--first-color);
	color:#fff;
	height:45px;
	line-height:45px;
	border-radius: 0px;        /* CSS3草案 */  
	-webkit-border-radius: 0px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 0px;   /* Firefox用 */
	padding:0 30px;
}

/*使用不可の時の表示設定*/
input.useless {
	opacity:0.5;
	cursor:text;
	background-color:#eee;
}



/**************
お問合せフォームフォーマット
**************/

.form dl{
padding:1.2em 1.5em;
border-bottom:solid 1px #d3d3d3;
}

.form dl:last-child{
border-bottom:none;
}
.form dl dt{
margin-bottom:0.8em;
}

.form dl .line{
padding:0.3em 0;
width:100%;
}

.form dl dd{
display:flex;
flex-wrap: wrap;
}

.form .boxAttend{
padding:0.5em 0.85em;
height:13.5em;
overflow-y:scroll;
background:#fff;
}

.form .boxAttend p{
margin-bottom:1.5em;
}

.form .listFormbtm{
display:flex;
flex-wrap: wrap;
justify-content:center;
}

.form .listFormbtm input{
margin:0.5em 0;
width:100%;
}

.form .list_error li{
padding-left:2.4em;
font-weight:bold;
}
.form .list_error li::before{
content:"!";
font-size:0.9em;
color:#fff;
background:#ff7070;
display:block;
text-align:center;
width:20px;
height:20px;
border-radius: 20px;        /* CSS3草案 */  
-webkit-border-radius: 20px;    /* Safari,Google Chrome用 */
-moz-border-radius: 20px;   /* Firefox用 */
line-height:20px;
position:absolute;
left:0.5em;
top:50%;
transform:translateY(-50%);
}


.form .listCheck dd{
color:var(--third-color);
font-weight:bold;
}

/* ウィンドウ幅が768px〜の場合に適用するCSS */
@media screen and ( min-width:768px ){

	.form dl .line{
	padding:0.3em 0.8em;
	width:auto;
	}

	.form dl .line.line_1{width:100%;}
	.form dl .line.line_2{width:50%;}
	.form dl .line.line_3{
		width:33%;
		width:-webkit-calc(100% / 3);
		width:calc(100% / 3);
	}
.form .listFormbtm input{
margin:0.5em 1.0em;
width:auto;
}
}





.clear{
	clear:both;
}

.clearfix:after {
	display:block;
	clear:both;
	content:"";
	height:0;
	visibility:hidden;
}

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

table {
	border-collapse:collapse;
}

body {
	-webkit-text-size-adjust: 100%;
	font-size:14px;
}

.wideFrame {
	width:auto;
	padding:0 10px;/**/
}

h2 {
	padding:8px 25px;
	color:#333;
	text-align:center;
	font-size:1.5em;
	font-weight:normal;
	margin-bottom:35px;
	font-family: 'Baloo Tammudu', cursive;
	position:relative;
}
h2 small {
	font-size:0.7em;
	display:block;
	border-top:solid 1px #000;
	font-family:var(--fontfamily-01);
}
h2:after {
	display:block;
	width:120px;
	height:2px;
	background:#FFA8A8;
	position:absolute;
	left:50%;
	bottom:0;
	margin-left:-60px;
}

#wrapper {
	/*padding-top:45px;
	padding-bottom:80px;*/
	padding-top:var(--header-size);
}


/*****************
.title（見出し設定）
*****************/

.title.t01{
font-weight:bold;
margin-bottom:1.2em;
}



/*リスト項目の表示*/

ul{
	padding:10px 0 10px 5px;
}
li {
	position:relative;
	padding:8px 0 8px 25px;
}
li span {
	position:absolute;
	left:0;
	top:8px;
}



/*map（地図埋め込み）*/

.map{
position:relative;
height:0;
overflow:hidden;
padding:100% 0 0 0;
}
.map iframe{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}


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

.map{
padding-top:60%;
}

}





/*.btm（ボタンタグ）*/
a.btm {
	display:block;
	background:#fff;
	font-size:1.2em;
	text-align:center;
	padding:11px 10px;
	box-sizing:border-box;
	border-radius: 0px;        /* CSS3草案 */  
	-webkit-border-radius: 0px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 0px;   /* Firefox用 */
}

a.btm.b01 {
	color:#fff;
	background:var(--attend-color02);
}


/*その他*/

.markScroll {
	position:relative;
}
.markScroll::before,
.markScroll:after {
	content:"";
	display:block;
	right:10px;
	border-right:solid 5px transparent;
	border-left:solid 5px transparent;
	position:absolute;
}
.markScroll::before {
	top:5px;
	border-top:solid 5px transparent;
	border-bottom:solid 8px #ccc;
}
.markScroll:after {
	bottom:5px;
	border-top:solid 8px #ccc;
	border-bottom:solid 5px transparent;
}

li.markNew {
	padding-left:80px;
}

li.markNew::before {
	content:"new!";
	display:block;
	color:#fff;
	font-size:0.87em;
	background:#31BAB5;
	padding:0 8px;
	height:22px;
	line-height:22px;
	position:absolute;
	left:0;
	top:7px;
	order-radius: 22px;        /* CSS3草案 */  
	-webkit-border-radius: 22px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 22px;   /* Firefox用 */
}

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

	#wrapper {
		/*padding-top:81px;*/
		padding-top:var(--headerwide-size);
	}
	.wideFrame {
		max-width:1200px;
		margin-left:auto;
		margin-right:auto;
		padding:0;
	}
	
}

@media screen and ( min-width:768px ){
	
	form .btmForm li{
		float:left;
		width:50%;
		padding:10px 10px;
		box-sizing:border-box;
	}
}


/*フィールド設定（.field）*/

.field{
	padding:2.0em 0.5em;
}

.field.f01{
	background:#ff8080;
	color:#fff;
}

.field.f02{
	background:#80fffbf5;
}

.field.f03{
	background:#7d7dff;
}

/*フレーム設定（.frame）*/
.frame{
	padding:1.5em 0.3em;
}

.frame.fr01{
	border:solid 1px #b2b2b2;
}

.frame.fr02{
	background:var(--fourth-color);
	border-radius: 0px;        /* CSS3草案 */  
	-webkit-border-radius: 0px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 0px;   /* Firefox用 */
}
.frame.fr03{
	background: url(../../images/sample_0102.jpg) no-repeat center -220px;
	background-size: 100%;
	border:solid 2px #b2b2b2;
	box-shadow: 0 0 15px #00000033;
}

/*.font（フォント設定）*/
.font.f01{
font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}



/**********************************************************************************************************************************************************************************************
#header(ヘッダー)
*************************************************************************************************************************************************************************************************/



#header{
	position: fixed;
	width:100%;
	/*height:45px;*/
	height:var(--header-size);
	left:0;
	top:0;
	background:#ffffffee;
	overflow:hidden;
	z-index: 15;
	border-bottom:solid 1px var(--first-color);
}

#header h1{
	position: absolute;
	z-index:10;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	width:70px;
}
#header h1 a{
display:block;
height:0;
overflow:hidden;
padding:0;
padding-top:100%;
background:url(css_img/siteID.svg) center center no-repeat;
background-size:100%;
}

/*メニュー画面表示させるボタン設定*/
#header #btmMenuScr{
	cursor:pointer;
	position: absolute;
	width:30px;
	height:15px;
	right:20px;
	top:50%;
	transform: translateY(-50%);
	margin:0;
	padding:0;
}
#header #btmMenuScr .tag{
	padding: 0;
	margin:0;
	position: absolute;
	width:100%;
	height: 2px;
	left:50%;
	top:0;
	transform: translateX(-50%);
	background:#666;
}
#header #btmMenuScr .tag:nth-child(2){
	top:auto;
	bottom:0;
}

/***************メニュー画面が開くとき***************/
@-webkit-keyframes btmOpenMenu01 {
	0% { top:0; transform: translateX(-50%); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); } 
}
@keyframes btmOpenMenu01 {
	0% { top:0; transform: translateX(-50%); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); } 
}
body.openMenu #header #btmMenuScr .tag{
	animation: btmOpenMenu01 0.5s ease 0s forwards alternate;
	-webkit-animation: btmOpenMenu01 0.5s ease 0s forwards alternate;
}

@-webkit-keyframes btmOpenMenu02 {
	0% { bottom:0; transform: translateX(-50%); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); } 
}
@keyframes btmOpenMenu02 {
	0% { bottom:0; transform: translateX(-50%); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); } 
}
body.openMenu #header #btmMenuScr .tag:nth-child(2){
	animation: btmOpenMenu02 0.5s ease 0s forwards alternate;
	-webkit-animation: btmOpenMenu02 0.5s ease 0s forwards alternate;
}



/***************メニュー画面を閉じるとき***************/

@-webkit-keyframes btmCloseMenu01 {
	0% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:0; transform: translateX(-50%); }
}
@keyframes btmCloseMenu01 {
	0% { top:50%; transform: translate(-50%, -50%) rotate( 30deg ); }
	50% { top:50%; transform: translate(-50%, -50%);}
	100% { top:0; transform: translateX(-50%); }
}
body.hideMenu #header #btmMenuScr .tag{
	animation: btmCloseMenu01 0.5s ease 0s forwards alternate;
	-webkit-animation: btmCloseMenu01 0.5s ease 0s forwards alternate;
}


@-webkit-keyframes btmCloseMenu02 {
	0% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:0; transform: translateX(-50%); }
}
@keyframes btmCloseMenu02 {
	0% { bottom:50%; transform: translate(-50%, 50%) rotate( -30deg ); }
	50% { bottom:50%; transform: translate(-50%, 50%);}
	100% { bottom:0; transform: translateX(-50%); }
}
body.hideMenu #header #btmMenuScr .tag:nth-child(2){
	animation: btmCloseMenu02 0.5s ease 0s forwards alternate;
	-webkit-animation: btmCloseMenu02 0.5s ease 0s forwards alternate;
}

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

	#header{
	/*height: 81px;*/
	height: var(--headerwide-size);
	}
	
	#header h1{
	left:30px;
	top:50%;
	transform: translate(0 , -50%);
	width:400px;
}
	
	#header h1 a{
	padding:0;
	padding-top:100%;
	background-image:url(css_img/siteIDWide.svg);
	}


	#header #btmMenuScr{
	display:none;
	width:55px;
	height:15px;
	right:20px;
	}

}



/**********************************************************************************************************************************************************************************************
.inPoint(アンカーポイントの付加)
*************************************************************************************************************************************************************************************************/


.inPoint{
	position: relative;
}

.inPoint .inPointTop{
	position: absolute;
	left:0;
	top:-45px; /*ヘッダーの高さに合わせて変更をかけてください。*/
}

@media screen and ( min-width:768px ){
	.inPoint .inPointTop{
		top:-81px; /*ヘッダーの高さに合わせて変更をかけてください。*/
	}
}


/**********************************************************************************************************************************************************************************************
#aNav(メニュー項目)
*************************************************************************************************************************************************************************************************/

#aNav{
	width:100%;
	height:100vh;
	height:-webkit-calc(100vh - var(--header-size)) ;
	height:calc(100vh - var(--header-size)) ;
	opacity:0;
	transform: translateX(100%);
	background:#fff;
	color:#fff;
	position: fixed;
	left:0;
	bottom:0;
	transition-property:transform, opacity;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}

#aNav .navGlbal{
padding:30px 10px;
text-align:center;
font-size:1.5em;
}
#aNav .navGlbal li{
padding:0.5em 0;
}

#aNav .navGlbal a{
text-decoration:none;
color:#000;
}
#aNav .navGlbal a small{
color:#7d7d7d;
display:block;
font-size:0.5em;
line-height:1.1em;
}

body.openMenu #aNav{
	opacity:1;
	transform: translateX(0);
}

#aNav .btmContactpage{
position:absolute;
bottom:0;
left:0;
width:100%;
display:block;
background:#ccc;
}


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

	#aNav{
		/*height:100vh;
		height:-webkit-calc(100vh - var(--headerwide-size)) ;
		height:calc(100vh - var(--headerwide-size)) ;*/
		position:absolute;
		left:0;
		top:0;
		opacity:1;
		width:100%;
		background:none;
		transform: translateX(0);
		height:var(--headerwide-size);
	}
	
	#aNav .btmContactpage{
	display:none;
	}
	
	#aNav .navGlbal{
	position:absolute;
	padding:0;
	display:flex;
	flex-wrap: wrap;
	right:0;
	bottom:0;
	}
	
	#aNav .navGlbal li {
	padding:0;
	border-left:solid 2px var(--first-color);
	}
	#aNav .navGlbal a {
	padding:0.5em 1.5em;
	display:block;
	}
	
}

/**********************************************************************************************************************************************************************************************
#footer(フッター項目)
*************************************************************************************************************************************************************************************************/

#footer{
	background:var(--second-color);
	color:#fff;
	padding:2.0em 0.8em;
	position:relative;
}

#footer a{
color:#fff;
}

#footer #wordCopy{
	text-align: center;
}

#footer .companybox,
#footer .navGlbal{
display:none;
}

#footer .navGlbal li{
padding:0;
}


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

	#footer{
		height:350px;
	}
	
	#footer .companybox{
	position:absolute;
	display:block;
	left:62px;
	bottom:47px;
	}
	#footer .companybox .title{
	margin-bottom:0.5em;
	font-size:1.65em;
	}
	
	#footer .navGlbal{
	position:absolute;
	display:flex;
	top:15px;
	right:20px;
	}
	
	#footer .navGlbal li a {
	padding:20px 70px 20px 50px;
	position:relative;
	display:block;
	font-size:1.2em;
	}
	#footer .navGlbal li a::before {
	content:"";
	display:block;
	width:20px;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	background:url(css_img/bgFtorbtmside.svg);
	}
	
	#footer .navGlbal li a small{
	display:none;
	}
	
	#footer #wordCopy{
	position:absolute;
	font-size:1.5em;
	right:70px; 
	bottom:35px;
	}

}



/**********************************************************************************************************************************************************************************************
#contents(ページ内容)
*************************************************************************************************************************************************************************************************/


#contents{
font-size:1.15em;
}

#contents p{margin-bottom:2.3em;}

#contents p.last{margin-bottom:0;}



/**********************************************************************************************************************************************************************************************
#pageThanks(サンクス画面)
*************************************************************************************************************************************************************************************************/


#pageThanks strong{
font-size:1.6em;
color:var(--attend-color);
}