@import url("https://fonts.googleapis.com/css?family=Lato");
@charset "UTF-8";
:root{
	--body : #231815;
	--link : #333;
}
.wrap{
	margin-left : auto;
	margin-right : auto;
	max-width : 1200px;
	padding-left : 24px;
	padding-right : 24px;
}
@media screen and (max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 ); } }
/*--------------------------------------------
HEADER
---------------------------------------------*/
#header{
	width : 100%;
	background: #fffbf1;
	max-width:1200px;
	margin: 0 auto;
	position: relative;
}
#header .wrap{
	align-items : center;
	text-align: center;
	border-top: #53a7ed 5px solid;
	padding-left: 0;
}

#header .header_inner{
	text-align: center;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

#header h1{
	width: 300px;
	padding: 20px;
	margin: 0;
}
		@media screen and (max-width: 768px){
			#header h1{
				width: 200px;}}

#header h1 img{
	width: 100%;
	height: auto;
}
#header h1 a{
	display : block;
}

/*--------------------------------------------
NAV BUTTON
---------------------------------------------*/
.header_nav_btn{
	width: 60px;
	height: 60px;
	position: absolute;
	top: 30px;
	right: 50px;
	margin: auto;
	cursor: pointer;
	z-index: 4;	
	background: #56a8e9;
	border-radius: 40px;
}
	@media screen and (max-width: 768px){
		.header_nav_btn{
		right: 10px;
		top: 16px;
		width: 50px;
		height: 50px;} }

.header_nav_btn .nav_line{
	display: block;
	position:absolute;
	width: 35px;
	height: 4px;
	background: #fff;
	transition: .4s; 
}
.header_nav_btn .nav_line1{
	top: 14px;
	right: 12px;
	bottom:auto;
	margin-bottom: 10px;
}
.header_nav_btn .nav_line2{
	top: 27px;
	right: 12px;
	margin-bottom: 10px;
	opacity: 1;
}
.header_nav_btn .nav_line3{
	right: 12px;
	bottom: 16px;
}
		@media screen and (max-width:768px){
			.header_nav_btn .nav_line1{
			top: 13px;
			right: 8px;}
		.header_nav_btn .nav_line2{
			top: 24px;
			right: 8px;}
		.header_nav_btn .nav_line3{
			right: 9px;
			bottom: 11px;}}

.header_nav_btn_active .nav_line{
	width:36px;
}
.header_nav_btn_active .nav_line1{
	top:0;
	bottom: 0;
	margin: auto;
	transform: rotate(45deg);
}
.header_nav_btn_active .nav_line2{
	margin: auto;
	opacity:0;
}
.header_nav_btn_active .nav_line3{
	top:0;
	bottom: 0;
	transform: rotate(-45deg);
	margin: auto;
}
/*--------------------------------------------
NAV
---------------------------------------------*/
.nav_flex_container{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 80%;
	margin: 5rem auto 0;
	padding-bottom: 5%;
	top: 0;
	border-bottom: 2px solid #53a7ed;
}
		@media screen and (max-width: 768px){
			.nav_flex_container{
				display: inline-block;
				margin-top: 30vw; 
			}
		}

.header_wrap .nav{
	width: 100%;
	height: 24vw;
	margin: 0 auto;
	top: -999vh;
	position:absolute;
	background-color:rgba(233,245,245,1);	
	z-index: 3;
	transition: .5s;
}
.header_wrap .nav_active{
	width: 100%;
	height: 50vh;
	margin: 0 auto;
	top: 0;
	position:absolute;
	background-color:rgba(233,245,245,1);
	z-index: 3;
	transition: .5s;
}
		@media screen and (max-width: 1080px){
			.header_wrap .nav_active{
			height: 100vh;} }

		@media screen and (max-width: 768px){
			.header_wrap .nav_active{
			height: 100vh;} }

.header_wrap .nav_active a:hover{
	opacity:0.5;
	transition: .3s;
}
/*.nav_flex_container .nav_flex_leftbox,
.nav_flex_container .nav_flex_rightbox{
	width: 50%;
	position: relative;
}*/
		@media screen and (max-width: 768px){
			.nav_flex_container .nav_flex_leftbox,
			.nav_flex_container .nav_flex_rightbox{
				width: 100%;
				margin-bottom: 2em; }}

.nav_flex_rightbox_inner02{
	margin-top: 30px;
}
.nav_inner_ttlbox,
.nav_inner_txtbox{
	display: flex;
}
.nav_inner_ttlbox .inner_ttl{
	padding-top: 10px;
	padding-left: 10px;
	font-size:28px;
	font-weight: 700;	
}
	@media screen and (max-width: 768px){
		.nav_inner_ttlbox .inner_ttl{
		font-size:20px;} }


.nav_inner_ttlbox .inner_txt{
	font-size:20px;
	font-weight: 700;
	text-align: left;
    padding-left: 66px;
    margin-top: 1em;
}
.nav_inner_txtbox .inner_txt{
	font-size:20px;
	font-weight: 700;
	text-align: left;
    padding-left: 10px;
    margin-top: 15px;
}
.nav_inner_txtbox01 .inner_txt{
	font-size:20px;
	font-weight: 700;
	text-align: left;
    padding-left: 65px;
    margin-top: 15px;
}
.inner_sns_box{
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	margin: 25px auto 0;
	width: 20%;
}
	@media screen and (max-width: 768px){
		.inner_sns_box{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		margin: 25px auto 0;
		width: 60%; } }

.inner_sns{
	width: 30%;
}
.inner_sns img{
	width: 52px;
}

/*--------------------------------------------
main
---------------------------------------------*/
.main_cover{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 2;
	top: 0;
	transition: .3s;
	visibility: hidden;
}
.main_cover_active{
    background-color: rgba(0,0,0,.5);
	z-index: 2;
	top: 0;
	transition: .3s;
	visibility: visible;
}


/*--------------------------------------------
FOOTER
---------------------------------------------*/
#footer{
	background : #cfc2a3;
	color : #000;
}
#footer a{
	color : #000;
	transition: .5s;
}
#footer a:hover{
	opacity: .6;
	transition: .5s;
}
#footer ul{
	display : flex;
	justify-content: space-between;
	width: 100%;
}
@media screen and (max-width:768px){
	#footer ul{
		display : inline-block;
		width: 100%;
	}
}
#footer ul li{
	width: 40%;	
}
	@media screen and (max-width:768px){
		#footer ul li{
			width: 90%;
			margin: 0 auto 20px;
			text-align: center;
		} }

#footer ul li img{
	margin-bottom: 0.5em;
}
	@media screen and (max-width:768px){
		#footer ul li img{
		width:100%;}
		#footer ul li img.ft_bnr02{
		width:78%;}}

#footer .ft_bg01{
	background-color:#fff;
	border-top: #53a7ed solid 1px;
}
#footer .wrap{
	padding-top : 20px;
	padding-bottom : 36px;
}
#footer .wrap .footer_bnr_txt{
	line-height: 1.5em;
}
	@media screen and (max-width:768px){
	#footer .wrap .footer_bnr_txt{
		padding-top : 0;}}

#footer .wrap02{
	padding-top : 36px;
	padding-bottom : 22px;
	max-width: 1200px;
    margin: 0 auto;
    width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
}
@media screen and (max-width:768px){
	#footer .wrap02{
		width: 100%;
		display: block;
		padding-bottom: 5%;
		padding-left: calc( 24 * 100% / 768 );
		padding-right: calc( 24 * 100% / 768 );
	}
}
#footer .wrap02 .footer_sns_link{
	width: 40%;
	text-align: left;
	padding-left: 1em;
}
		@media screen and (max-width:768px){
			#footer .wrap02 .footer_sns_link{
				text-align: center;
				width: 60%;
				margin: 0 auto;
			}
		}
#footer .wrap02 .footer_sns_link ul{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#footer .wrap02 .footer_sns_link ul li{
	width: 14%;
}
	@media screen and (max-width: 768px){
	#footer .wrap02 .footer_sns_link ul li{
		width: 25%; } }

#footer .wrap02 ul li img{
    width: 70%;
}

#footer .wrap02 .footer_txt_link{
	width: 50%;
	text-align: center;
	margin-right: 1em;
}
	@media screen and (max-width: 768px){
		#footer .wrap02 .footer_txt_link{
		width: 100%;} }

#footer .wrap02 .footer_txt_link ul{
	width: 100%;
	padding-top: 15px;
	justify-content: flex-end;
}
	@media screen and (max-width:768px){
		#footer .wrap02 .footer_txt_link ul{
			display: flex;
			width: 100%;
			margin: 0 auto;
			padding-top: 10px;
			padding-left: 0;
			font-size: 14px; } }

#footer .wrap02 .footer_txt_link ul li{
	width: 160px;
}
#footer .wrap02 .footer_txt_link ul li a{
	transition: .3s;
}
#footer .wrap02 .footer_txt_link ul li a:hover{
	transition: .3s;
	opacity: .8;
}
#footer .wrap02 .footer_txt_link ul li a span.small{
	font-size: 80%;
}

@media screen and (max-width: 768px){
	#footer .wrap{
		padding-top : calc( 22 * 100vw / 768 );
		padding-bottom : calc( 8 * 100vw / 768 );
		width: 90%;
	}
	#footer h2 img{
		height : calc( 89 * 100vw / 768 );
	}
	#footer .box{
		margin-top : calc( 8 * 100vw / 768 );
	}
	#footer ul{
		justify-content : unset;
	}
	/*#footer ul li + li{
		margin-left : calc( 16 * 100vw / 768 );
	}*/
	#footer ul svg{
		width : calc( 48 * 100vw / 768 );
		height : calc( 48 * 100vw / 768 );
	}
	#footer .box02 > a{
		border : 1px solid #fff;
		color : #fff;
		width : calc( 115 * 100vw / 768 );
		height : calc( 32 * 100vw / 768 );
		margin-top : calc( 22 * 100vw / 768 );
		margin-left : auto;
		margin-right : auto;
		font-size : calc( 19 * 100vw / 768 );
	}
	#footer .box02 > a:after{
		background : url("../images/ui/icon/down.png") 0 0 / contain no-repeat;
		width : calc( 15 * 100vw / 768 );
		height : calc( 15 * 100vw / 768 );
		margin-left : calc( 8 * 100vw / 768 );
	}
	#footer p{
		text-align : center;
		margin-top : calc( 14 * 100vw / 768 );
		font-size : calc( 12 * 100vw / 768 );
	}
}

@media screen and (min-width: 769px) and (max-width:1199px){
	#footer .wrap{
		padding-top : calc( 36 * 100vw / 1200 );
		padding-bottom : calc( 22 * 100vw / 1200 );
	}
	#footer h2 img{
		height : calc( 89 * 100vw / 1200 );
	}
	/*#footer ul li + li{
		margin-left : calc( 18 * 100vw / 1200 );
	}*/
	#footer ul svg{
		width : calc( 47 * 100vw / 1200 );
		height : calc( 47 * 100vw / 1200 );
	}
	#footer .box02 > a{
		width : calc( 111 * 100vw / 1200 );
		height : calc( 32 * 100vw / 1200 );
		margin-left : calc( 12 * 100vw / 1200 );
		font-size : calc( 19 * 100vw / 1200 );
	}
	#footer .box02 > a:after{
		width : calc( 15 * 100vw / 1200 );
		height : calc( 15 * 100vw / 1200 );
	}
	#footer p{
		margin-top : calc( 30 * 100vw / 1200 );
		font-size : calc( 12 * 100vw / 1200 );
	}
}


/*--------------------------------------------
main_container
---------------------------------------------*/
#main_container{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width: 1200px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: -100px;
}

@media screen and (max-width:768px){
	#main_container{
		top: 20px;
	}
}

#main_container .main_content_wrapper{
	width: 70%;
}
#main_container .main_side_wrapper{
	width: 30%;
	padding: 0 5%;
}
@media screen and (max-width:768px){
	#main_container .main_content_wrapper,
	#main_container .main_side_wrapper{
	width: 100%;
	padding-bottom: 5%;} }

#main_container .main_side_wrapper .behind_box img{
	width: 100%;
}
#main_container .main_side_wrapper .new_content{
	background: #fff;
	border: 2px #53a7ed solid;
}
#main_container .main_side_wrapper .new_content01{
	margin-bottom: 50px;
}
#main_container .main_side_wrapper .new_content .new_content_ttl{
	width: 100%;
	background-color: #53a7ed;
	color: #fff;
	font-size: 20px;
	padding: 0.5em;
	font-weight: 700;
}
#main_container .main_side_wrapper .new_content_flexbox{
	display: flex;
	justify-content:space-between;
	flex-wrap:wrap;
	padding: 5%;
	position: relative;
}
#main_container .main_side_wrapper .new_content_flexbox::before{
	background:url("../images/home/side_border.png");
	background-repeat: repeat-x;
	content:"";
	width: 90%;
	height: 5px;
	position: absolute;
	bottom: 0;
}
#main_container .main_side_wrapper .new_content_flexbox:last-child::before{
	display: none;
}

#main_container .main_side_wrapper .new_content_imgbox{
	width: 100%;
	height: 120px;
	overflow: hidden;
	margin-bottom: 1em;
}	
@media screen and (max-width:768px){
	#main_container .main_side_wrapper .new_content_imgbox{
	height: 150px;}}

#main_container .main_side_wrapper .new_content_imgbox img{
	width: 100%;
}

#main_container .main_side_wrapper .new_content_textbox{
	font-size: 16px;
	margin-bottom: 1em;
}
@media screen and (max-width:768px){
	#main_container .main_side_wrapper .new_content_textbox{
	font-size: 20px;
	margin-top: 1em;	
}
}
#main_container .main_side_wrapper .new_content_textbox .date{
	font-size:14px;
	margin-top: 0.75em;
	position: relative;
	bottom: 0;
}
@media screen and (max-width:768px){
	#main_container .main_side_wrapper .new_content_textbox .date{
	font-size:18px;
	margin-top: 1em;
}
}
#main_container .content06{
	background-color: #e9f5ff;
	margin-right: 24px;
	margin-left: 24px;
}
	@media screen and (max-width: 768px){
	#main_container .content06 {
		margin-left: calc( 24 * 100% / 768 );
		margin-right: calc( 24 * 100% / 768 ); } }

#main_container .content_next_box{
	display: block;
}
		@media screen and (max-width: 768px){
			#main_container .content_next_box{
			width: 100%;
			margin: 0 auto;} }

#main_container .content_next_box .next_ttlbox{
	 width: 60%;
    text-align: center;
    margin: 0px auto;
    padding: 1em;
}
@media screen and (max-width: 768px){
	#main_container .content_next_box .next_ttlbox{
		margin: 10px auto;
		width: 90%;
	}
}
#main_container .content_next_box .next_ttlbox img{
	width: 90%;
}
@media screen and (max-width: 768px){
	#main_container .content_next_box .next_ttlbox img{
	width: 100%;
	padding-top: 10px;
}
}

#main_container .content_next_box .next_flexbox{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-bottom: 20px;
}
		@media screen and (max-width: 768px){
			#main_container .content_next_box .next_flexbox{
				display: block;
			}	
		}
#main_container .content_next_box .content_img{
	width: 50%;
	margin-top: 10px;
}
	@media screen and (max-width: 768px){
		#main_container .content_next_box .content_img{
			width: 100%;
		}
	}
#main_container .content_next_box .content_img img{
	width: 100%;
}

#main_container .content_next_box .content_txt{
	width: 45%;
	color: #53a7ed;
	font-weight: 700;
	margin-top: 0;
}
	@media screen and (max-width: 768px){
		#main_container .content_next_box .content_txt{
			width:100%;
			margin-top: 20px;
		}
	}
/*--------------------------------------------
TITLE
---------------------------------------------*/
.h2_title00{
	display: flex;
	margin-bottom: 20px;
}
.h2_title00 .h2_title00_txtbox{
	padding-top: 15px;
	padding-left: 10px;
	font-weight: bolder;
    color: #53a7ed;
    font-size: 20px;
}
	@media screen and (max-width: 768px){
		.h2_title00{
			margin-bottom: 6px;
		}
		.h2_title00 .h2_title00_txtbox{
				font-size: 4.68437vw;
				padding-top: 0;
				display: flex;
				align-items:center;
		}
	}
.h2_title01{
	font-weight : bolder;
	color : #53a7ed;
	font-size: 30px;
	display: inline-block;
}
.title01{
	font-weight : 700;
	color : #53a7ed;
	font-size: 30px;
	border-bottom: solid 1px;
	display: inline-block;
	margin-bottom: 30px;
}
@media screen and (max-width: 768px){
	.title01{
		text-align : left;
		font-size : calc( 48 * 80vw / 768 );
		line-height: 1.5em;
	}
	.h2_title01{
	font-size: 20px;
	line-height: 1.5em;}
}

/*--------------------------------------------
.text
---------------------------------------------*/
.text{
	line-height : 1.75;
}
.text + .text{
	margin-top : 1.375em;
}
@media screen and (max-width: 768px){
	.text{
		font-size : calc( 30 * 100vw / 768 );
	}
}
@media screen and (min-width: 769px) and (max-width:1199px){
	.text{
		font-size : calc( 14 * 100vw / 1200 );
	}
}
@media print,screen and (min-width: 1200px){
	.text{
		font-size : 14px;
	}
}


/*--------------------------------------------
.pagetop
---------------------------------------------*/
.pagetop{
	display: none;
	background: #56a8e9;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 60px;
	height: 60px;
	position: fixed;
	right: 30px;
	bottom: 50px;
	transition: .5s;
	border-radius: 40px;
}

.pagetop:hover{
	opacity: .8;
}
.pagetop span{
	background: #fff;
	content:"";
	width: 25px;
	height: 5px;
	position: absolute;
	transform:rotate(45deg);
	right: 8px;
	bottom: 27px;
}
.pagetop span::after{
	background: #fff;
	content:"";
	width: 28px;
	height: 5px;
	position: absolute;
	right: 11px;
	bottom: -11px;
	transform: rotate(88deg);
}

/*--------------------------------------------
KIYAKU
---------------------------------------------*/
#main_container.kiyaku_container{
	top: 0px;
}

#main_container.kiyaku_container .main_content_wrapper{
	margin:0 auto;
	width: 88%;
}

.kiyaku_ttl{
	font-size: 30px;
	color:#1075ae;
	text-align: center;
	margin: 50px;
}
.kiyaku_ttls{
	font-size: 26px;
	color:#1075ae;
	text-align: center;
	margin: 50px;
}
.kiyaku_ttls2{
	font-size: 20px;
	color:#1075ae;
	margin: 50px;
	line-height: 1.2em;
	text-align:left;
}
.container-fluid {
    width: 1000px;
    margin: 50px auto;
	text-align: left;
}
#main_container.kiyaku_container .subttl{
	font-size:22px;
	margin: 50px 50px 20px;
	color:#2177aa;
	font-weight: bold;
}
#main_container.kiyaku_container .tos-box p{
	margin-bottom: 10px !important;
    line-height: 1.8em !important;
    font-size: 14px !important;
    margin: 15px 50px;
}
@media screen and (max-width:768px){
	#main_container.kiyaku_container{
	top: 0px;
	}
    .container-fluid {
    width: 100%;
    margin: 50px auto;
	text-align: left;
}
    #main_container.kiyaku_container .subttl{
	margin: 50px 10px 10px;
}
    .kiyaku_ttls{
	margin: 10px;
}
.kiyaku_ttls2{
	margin: 10px;
}
    #main_container.kiyaku_container .tos-box p{
    margin: 15px 10px;
}
}
/*# sourceMappingURL=../maps/layout.css.map */