@charset "utf-8";

/*================================================
 *  CSSリセット
 ================================================*/
* {
margin: 0;
padding: 0;
}

/*================================================
 *  一般・共通設定
 ================================================*/

body {
color: #333;
text-align: left;
font-size:14px;
background:#fff;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
}

section {
width:1100px;
margin:0 auto 100px;
}

h2.h2_top {
text-align:center;
font-size:1.2em; 
padding:20px 0 40px; 
}
h2.h2_top:after {
content: "";
display: block;
width: 15px;
height: 15px;
border: 3px solid;
border-color: transparent transparent #166098 #166098;
transform: rotate(-45deg);
margin:0 auto;
}

h3 {
}
 
a img:hover {
opacity:0.7;
transition:0.5s; 
}
	
@media screen and (max-width: 900px) {
body {
font-size:15px;
}
article {
padding:0px 10px 0; 
box-sizing:border-box; 
}
article img {
max-width:100%; 
}
section {
width:100%;
margin:0 0px 70px;
box-sizing:border-box; 
}
h2 {
font-size:1.1em;
}
.pcbr { display:none; }

}

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

.spbr { display:none; }

}


/*================================================
 *  header
 ================================================*/

header {
width:100%;
background:rgba(255,255,255,0.75); 
padding:20px 20px;
box-sizing:border-box; 
position:absolute;
top:0; 
}
.head_1 {
width:1100px; 
display:flex;
justify-content:space-between;
margin:0 auto 10px; 
padding:0 20px;
box-sizing:border-box; 
}
.main {
width:1100px;
margin:-20px auto 0;
}
.swiper-slide img { width: 100%;}
.swiper-slide a:hover { opacity: 0.7; transition: 0.5s; }

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

header {
width:100%;
overflow:hidden; 
padding:10px;
}
.head_1 {
width:100%; 
display:inherit;
justify-content:center;
margin:0; 
padding:0;
}
.head_1 h1 img {
width:150px;
} 
.head_1 figure {display:none;}
.main {
width:100%;
margin:-0px 0 0;
}
.main img{
width:100%;
}

.swiper-slide img { max-width: 100%;}

}
	

/*================================================
 *  top
 ================================================*/

.top_bg1 {
background:url(../img/top/bg_1.png) ;
background-repeat:no-repeat;
padding:30px; 
}
.top_bg1 p {
color:#fff; 
font-size:0.7em; 
text-align:center;
line-height:200%; 
}
.flex_top_1 {
display:flex;
justify-content:space-between;
margin-bottom:20px; 
}
.flex_top_1 div {
width:30%; 
border:1px solid #fff;
text-align:center;
padding:10px;
color:#fff; 
font-weight:bold;
}

.top_bg2 {
background:url(../img/top/bg_2.png) ;
background-repeat:no-repeat;
padding:50px 30px; 
}
.flex_top_2 {
display:flex;
justify-content:space-around;
}

.top_bg3 {
background:url(../img/top/bg_3.png) ;
background-repeat:no-repeat;
padding:0px 0 100px; 
}
.flex_top_3 {
display:flex;
justify-content:space-around;
}

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

.top_bg1 {
padding:20px; 
background-size:cover; 
}
.top_bg1 p {
text-align:left;
}
.flex_top_1 {
display:inherit;
justify-content:center;
}
.flex_top_1 div {
width:100%; 
margin-bottom:10px; 
box-sizing:border-box; 
}

.top_bg2 {
padding: 40px 20px; 
background-size:cover; 
}
.flex_top_2 {
display:inherit;
justify-content:center;
}
.flex_top_2 div {
text-align:center;
}
.flex_top_2 div img {
width:70%;
margin-bottom:30px; 
}
.flex_top_2 div:last-child img {
margin-bottom:0px; 
}

.top_bg3 {
padding:0px 0 80px; 
background-position:bottom; 
}
.flex_top_3 {
display:inherit;
justify-content:center;
}
.flex_top_3 div {
text-align:center;
}
.flex_top_3 div img {
width:70%;
margin-bottom:30px; 
}
.flex_top_3 div:last-child img {
margin-bottom:0px; 
}

}

/*================================================
 *  footer
 ================================================*/
	
footer:before {
clear:both; 
}
footer {
clear:both; 
width:100%;
background:#F4FBFF; 
padding:30px 0 0; 
}
footer iframe {
display:block;
margin:0; 
}

.foot_1 {
width:1100px;
display:flex;
justify-content:space-around;
margin:0 auto 20px; 
}
.flex_foot div{
text-align: center;
}
.foot_1 p {
text-align:center; 
font-size:0.8em; 
}
.copy {
background:#0E528C;
color:#fff;
font-size:0.5em;
padding:5px 0; 
text-align:center; 
}
	.spfoot { display: none;}
	

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

.foot_1 {
width:100%; 
display:inherit;
justify-content:center;
}
.foot_1 div {
text-align:center; 
}
.foot_1 div img {
width:60%;
margin-bottom:20px; 
}
.foot_1 div:last-child img {
margin-bottom:0px; 
}

	.spfoot {
display:block;
position: fixed;
width: 100%;
padding:0px;
bottom: 0px;
left: 0px;
z-index: 10000;	
}

.sptel { display: table-cell; }
.sptel img{ max-width: 100%; }

}


/*-------------------------------------------------------------------------
								Positioning
-------------------------------------------------------------------------*/

/* visual */
.block	{ display:block;}
.inline { display:inline;}
.dn		{ display:none;}
.vh		{ visibility:hidden;}
.spbr { display: none;}
@media screen and (max-width:800px) {
.spbr { display:inherit;}
}

/* img */
.img_r {
float:right; 
}

@media screen and (max-width:800px) {
.img_r {
float:inherit; 
}
}

/* clear,float */
.cb	{ clear:both;}
.cl	{ clear:left;}
.cr	{ clear:right;}

.fl	{ float:left;}
.fr	{ float:right;}

/* align */
.center	{ text-align:center;}
.top	{ vertical-align:top;}
.right	{ text-align:right;}
.left	{ text-align:left;}

/*-------------------------------------------------------------------------
								Font-Style
-------------------------------------------------------------------------*/

.f20	{ font-size:0.2em;}
.f60	{ font-size:0.6em;}
.f70	{ font-size:0.7em;}
.f75	{ font-size:0.75em;}
.f80	{ font-size:0.8em;}
.f90	{ font-size:0.9em;}
.f110	{ font-size:1.1em;}
.f120	{ font-size:1.2em;}
.f125	{ font-size:1.25em;}
.f130	{ font-size:1.3em;}
.f140	{ font-size:1.4em;}
.f150	{ font-size:1.5em;}

.lh125	{ line-height:1.25;}
.lh135	{ line-height:1.35;}
.lh150	{ line-height:1.5;}

.ls_0 { letter-spacing:0;}

.normal	{ font-weight:normal;}
.bold	{ font-weight:bold;}

.indent	{ text-indent:1em; margin:0;}
.strike	{ text-decoration:line-through;}
.italic	{ font-style:italic;}
.ENfont	{ font-family:Arial, Verdana, sans-serif; letter-spacing:0;}
.boader { color:#ED6D10; text-decoration:underline;}

/* color settings */
.red	{ color:#FF0000;}
.blue	{ color:#09f;}
.blue2	{ color:#086CCF;}
.orange	{ color:#ff8800;}
.pink   { color:#FF6666;}
.green  { color:#66CC00;}

/*-------------------------------------------------------------------------
								Margin
-------------------------------------------------------------------------*/

.m1{ margin-bottom:1em;}
.m5{ margin-bottom:5px;}
.m10{ margin-bottom:10px;}
.m15{ margin-bottom:15px;}
.m20{ margin-bottom:20px;}
.m30{ margin-bottom:30px;}
.m50{ margin-bottom:50px;}
.mt20{ margin-top:20px;}

.center {text-align: center;}


/*----------------------------------------------------------
 * メインニュー
-----------------------------------------------------------*/
ul#gnav {
 width:1100px; 
	margin:0 auto;
	box-sizing:border-box;
	display:flex;
	flex-wrap: nowrap;
	justify-content:space-between;
padding:0 20px;
}
#gnav li {
	box-sizing:border-box;
	list-style:none;
	text-align:center; 
}
#gnav li:first-child:before{
	content:"｜" ;
}
#gnav li:nth-child(-n + 5):before {
	content:"｜" ;
}
#gnav li a{
	text-decoration:none;
	color:#333;
	font-size:1.0em;
	font-weight:bold;
	text-align:center; 
	padding:0 0px; 
	vertical-align:middle; 
	}	
#gnav li a:hover{
	opacity:0.5;
	transition:0.5s; 
}

/*------レスポンシブ------------------------------------------------*/

@media screen and (max-width:750px) {
	.toggle {
    position:fixed;
    right:0;
    top:0;
    display: block;
    width: 60px;
		height:60px;
    cursor: pointer;
    z-index:1000;
    background:RGBa(22,50,89,1);
}
	.toggle span {
    display: block;
    position: absolute;
		  right:9px;
    width:70%;
    border-bottom: solid 2px RGBa(251,251,251,1);
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    padding-top:8px;

	}
	.toggle span:nth-child(1) {
    top: 0px;
	}
	.toggle span:nth-child(2) {
    top: 13px;
	}
	.toggle span:nth-child(3) {
    top: 26px;
	}
	.toggle span:nth-child(4) {
    border: none;
    top: 28px;
    left: 5px;
    font-size: 12px;
    font-weight: bold;
	}
	.toggle.active span:nth-child(1) {
    top: 15px;
    left: 4px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
	}
	.toggle.active span:nth-child(2),
	.toggle.active span:nth-child(3) {
    top: 15px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
	}

	.toggle span:last-child {
		color:RGBa(251,251,251,1);
	   position:absolute;
		top:32px;
		left:8px;
		font-size:0.9em;
		font-family:"小塚ゴシック Pro", "Kozuka Gothic Pro", sans-serif;
		font-weight:lighter;
	}

	ul#gnav{
	    position: fixed;
	    top:0px;
	    left:-300px;
	    width:100%;
			height:390px;
	    transform: translateX(-100%);
			z-index:100;
	    background:RGBa(255,255,255,0.9);
	    transition: all 0.3s;  
			box-sizing:border-box;
			flex-direction:column;
			margin:0;
			opacity:1;
	}
	#gnav li{
		width:100%;
		box-sizing:border-box;
		text-align:center;
		line-height:1.2;
		padding:10px 20px;
		border-bottom:dotted 1px RGBa(118,196,176,1);
	}
	#gnav li:first-child:before{
	content:none;
}
#gnav li:nth-child(-n + 5):after {
	content:none;
}

	#gnav li:not(:first-child){
		border-left:none;
	}
	#gnav li:first-child{
		width:100%;
	}
	#gnav li:last-child{
		width:100%;
		border:none;
	}

	#gnav li a{
		text-decoration:none;
		color:RGBa(41,67,103,1);
		display:block;
		}	

	#gnav.active {
    transform: translateX(300px);
	}

}

/*-------IEのみ--------------------------------------------*/
@media all and (-ms-high-contrast: none) {
	ul#gnav{
	margin-bottom:50px;
	}
	.toggle span:last-child {
		top:37px;
	}

}

/*----------------------------------------------------------
 * img切り替え
-----------------------------------------------------------*/
.pc{
	display:block !important; 
}
.sp{
	 display:none !important;
}
/*------レスポンシブ---------------------------------------*/

@media screen and (max-width:750px) {
	.pc{
		display:none !important; 
	}
	.sp{
		 display:block !important;
	}
}