@charset "utf-8";
/*=================================================================================*/
/** 768px未満 スマホサイズ画面 ＜これが基本＞ **/

/*==================
  電話番号タップ
==================*/
a.telLink0 { cursor: pointer; pointer-events: auto; text-decoration:underline; color:#003670; }

svg {
	max-height:30px;
}
img[src$=".svg"] {
	width: 100%; 
}

.disp_p { display:none; }/*PC時だけ表示*/
.disp_s { display:block; }/*スマホ時だけ表示*/
.disp_pt { display:none; }/*PC時とタブレット時表示*/
.disp_st { display:block; }/*スマホ時とタブレット時表示*/

#disp_fix { position:fixed; top:0; left:0; z-index:50000; width:100%; }

.pum-content {
	float:right !important;
}


/*============
nav
=============*/
nav {
  display: block;
  position: fixed;
  top: 0;
  right: -90%;
  width: 90%;
  bottom: 0;
  background: #003279;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}


.open nav {
  right: 0;
  opacity: 1;
}
nav .inner {
	padding:5em 3em 6em;
	box-sizing: border-box;
}
nav .inner ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav .inner ul li {
	position: relative;
}
nav .inner ul li a {
	color: #FFFFFF;
	text-decoration: none;
	transition-duration: 0.2s;
}
nav .inner ul li a:hover {
	color: #99BFDF;
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  /*width: 30px;
  /height: 30px;*/
  transition: all .5s;
  cursor: pointer;
  z-index: 30;
	position: relative;
	
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 31px;
  height: 3px;
  background-color: #FFFFFF;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  width: 25px;
	margin:0 0 0 16px;
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #FFFFFF;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}




/***  ページTOP  ***/
#page_tops {
	position: fixed;
	display:block;
	width:auto;
	max-width:15%;
	z-index:50000;
	bottom:6.5em;
	right:0.5em;
}

/*===============================
  下固定バナー
===============================*/

.kote_bg{
	width:100%;
	position: fixed;
	z-index:1;
	bottom:0;
}

.kote_line{
}
.kote_close{
	cursor:pointer;
	width:300px;
	height:20px;
	position: absolute;
	bottom:100%;
	right:0;
	
	background:-moz-linear-gradient(transparent 15px, #003670 0);
	background:-webkit-linear-gradient(transparent 15px, #003670 0);
	background:-ms-linear-gradient(transparent 15px, #003670 0);
	background:-o-linear-gradient(transparent 15px, #003670 0);
	background:linear-gradient(transparent 15px, #003670 0);
}
.kote_close_img{
	width:20px;
	padding:0.2em;
	margin:0 0 0 280px;
	box-sizing: border-box;
	background: #003670;
}

.kote_block{
	position: relative;
}
.kote_btn{
	margin-top:-10em;
}
.kote{
	width: 50%;
	margin:0 auto 0 50%;
	max-width: 300px;
	margin:0 auto;
	position: absolute;
	right:0;
	bottom:0;
	background: url("../img/top/mizu_bg_bnr.png") repeat;
	background-color: #DDF3FB;
}

.kote_s>ul{
	max-width: 1200px;
	margin:0 auto;
	display: flex;
	flex-wrap:wrap;
	width:100%;
}

.kote_s>ul>li{
	width:31.84%;
	margin:0 0.7% 0.5em;
}

.kote_s_bnr_00{
	width:98%;
	margin:0 auto;
}


/*==========================
	フッター
=========================***/
.back_foot{
	background:#236091;
}

.foot_logo{
	width:50%;
	margin:0;
}

.foot_block>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
}

.foot_block>ul>li:nth-child(1){/*460 1380*/
	width:100%;
}

.foot_block>ul>li:nth-child(2){/*690 1380*/
	width:100%;
	margin:1em 0 0 0;
}

.foot01_01{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	
}

.foot01_01>ul{
	width:31%;
	margin:0 1%;
}
.foot01_01>ul>li a{
	text-decoration: none;
	display: inline-block;
	padding:0 0 0.2em 0;
	color:#FFFFFF;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

.foot01_01>ul>li a:hover{
	color:#FF451A;
	
}
.sns_icon_block>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	justify-content: center;
	align-items: center;
}
.sns_icon_block>ul>li{/*28 460*/
	width:7%;
	margin:0.2em 2%;
}
.sns_icon_youtube{/*74 460*/
	width:17% !important;
}


/*=============================
	サブ共通
=============================*/
.pan>ul>li{
	display: inline-block;
	padding:0.5em 0 0.5em 0.5em;
}
.pan>ul>li::after{
	content: '»';
	padding:0 0 0 1em;
}

.pan>ul>li:last-child::after{
	content: '';
	padding:0;

}

.pan>ul>li a{
	color:#0C78C4;
}


.pan>ul>li{
	display: inline-block;
	padding:0 1em 0 0;
}

.pan>ul>li::after{
	content: '»';
}

.navi a{
	color:#000000;
	text-decoration: none;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
	
}

.navi a:hover{
	color:#FF451A;
}

nav {
	right: -94%;
	width: 94%;
}
	
/*============
.toggle_btn
=============*/
.toggle_btn {
  /*width: 40px;
  height: 40px;*/
}
.toggle_btn span {
  left: 0;
  width: 41px;
  height: 3px;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 19px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #FFFFFF;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(19px) rotate(-315deg);
  transform: translateY(19px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
  width: 41px;
	margin:0;
}


/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .5;
  z-index: 2;
  cursor: pointer;
}


.maru_hover .maru a{
	display: inline-block;
	margin:0 0 0 0.6em;
	font-weight: bold;
	padding:0.1em 0.5em 0.1em 1em;
	position: relative;
	text-decoration: none;
	z-index: 2;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.maru_hover .maru a::before{
	position: absolute;
	top:50%;
	left:0;
	content: '';
	width:10px;
	height:2px;
	background:#99BFDF;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
	z-index: -1;
}

.maru_hover .maru a p{
	display: inline-block;
	padding:0 0.2em;
	background:#003279;
}

.maru_hover .maru a p{
	display: inline-block;
	padding:0 0.2em;
	background:#003279;
}
.maru_hover .anashi{
	margin:0 0 0 1.6em;
}

.maru_hover .maru a:hover::before{
	width:10px;
	height:10px;
	border-radius: 50%;
	top:35%;
}

.maru_naka{
	margin:0 0 0 1em;
	
}
.maru_naka_naka{
	margin:0 0 0 2em;
	
}

.maru_naka a,
.maru_naka_naka a{
	display: inline-block;
	margin:0 0 0 0.4em;
	padding:0.2em 0.5em 0.2em 1em;
	position: relative;
	text-decoration: none;
	z-index: 2;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.maru_naka a::before,
.maru_naka_naka a::before{
	position: absolute;
	top:50%;
	left:0;
	content: '';
	width:8px;
	height:1px;
	background:#99BFDF;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
	z-index: -1;
}
	
/***  ヘッダー  ***/
#head00 {
	background:rgba(255,255,255,0.6);
	background:linear-gradient(to bottom,rgba(255,255,255,0.6),rgba(255,255,255,0));
	width:100%;
	margin:0 auto;
	position: fixed;
	top:0;
	z-index: 20;
	padding:0;
	z-index:2;
}
.h1block>ul{
	
	display: flex;
	flex-wrap:wrap;
	width:100%;
	justify-content: space-between;
	align-items: center;
}
	
.h1block>ul>li:nth-child(1){
		width:65%;
	}
.h1block>ul>li:nth-child(2){
		width:35%;
	}
	
.head_block>ul{
	display: flex;/*フレックボックス宣言*/
	flex-wrap:wrap;/*折り返しあり*/
	width:100%;/*親要素は100％*/

	/*並び方の設定*/
	justify-content:space-between ;/*親要素に空きがあったら均等に配置　これがなければ左寄せ*/
	align-content: center;/*複数行の場合中央に配置*/
}
	
.head_block>ul>li:nth-child(1){/*1600 540*/
	max-width: 540px;
	width:33.75%;
	position: relative;
}
.head_block>ul>li:nth-child(2){/*1600 660*/
	max-width: 710px;
	width: 49.2%;
}
.head_block>ul>li:nth-child(3){/*1600 350*/
	max-width: 320px;
	width:61.875%;
	margin:0;
}

.head01{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	align-items: center;
	
}
.head01_01{/*540 237*/
	width:96%;
	margin:1em 4%;
}
.head01_02{/*490 161*/
	width:46%;
	margin:1em 0;
	font-size: 70%;
	line-height: 1.8;
}

.head02{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	justify-content: space-between;
}
	
.head02_00{
	max-width: 55px;
	width:16.8%;
	padding:0.5em 0;
	box-sizing: border-box;
}
.head02_00flex{/*290 200*/
	position: fixed;
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	max-width: 240px;
	width:100%;
	right:0;
	padding-bottom: 0.5em
}
.head02_01_03{/*400 95*/
	max-width: 87px;
	width:24%;
	background:#FFFFFF;
	border-radius: 0 0 10px 10px;
	box-sizing: border-box;
	padding:0.3em;
	margin: 0 0.5%;

}
.head02_01_02{/*400 95*/
	max-width: 87px;
	width:24%;
	background:#F0871E;
	border-radius: 0 0 10px 10px;
	box-sizing: border-box;
	padding:0.3em;
	margin: 0 0.5%;
}
.head02_01{/*400 95*/
	max-width: 87px;
	width:24%;
	background:#FF451A;
	border-radius: 0 0 10px 10px;
	box-sizing: border-box;
	padding:0.3em;
	margin: 0 0.5%;
}
.head02_02{/*200 95*/
	max-width: 87px;
	width:24.5%;
	background:#003670;
	border-radius: 0 0 0 10px;
	box-sizing: border-box;
	padding:0.3em;
	margin: 0 0 0 0.5%;
}
.head02_01_03 img,
.head02_01_02 img,
.head02_01 img,
.head02_02 img{
	width:100%;
}

.navi>ul{
	padding:1em 0 0 0;
}
.navi>ul>li{
	font-size: 96%;
	display: inline-block;
	padding:1em 0.5em;
}



/*=================================================================================*/
/** 768px以上　タブレット縦　サイズ画面  **/
@media (min-width : 768px) {
/*==================
  電話番号タップ
==================*/
a.telLink0 { display:inline-block; cursor: default; pointer-events: none; text-decoration:none; }


.disp_p { display:block; }/*PC時・タブレット時表示*/
.disp_s { display:none; }/*スマホ時だけ表示*/

/***  ヘッダー  ***/
#head00 {
	position:relative;
}
	
.head01_01{/*540 237*/
	width:62%;
	margin:1em 4%;
}
	
.head_block>ul>li:nth-child(1){/*1600 540*/
	width:26.75%;
}

.head_block>ul>li:nth-child(3){/*1600 350*/
	max-width: 350px;
	width:30.875%;
	margin:0;
}
	
	
.head02_00flex{/*290 200*/
	width:24.5%;
	max-width: 100%;	
}

	
nav {
	width: 50%;
}

/*===============================
	フッター
===============================*/
	
.foot_logo{/*370 460*/
	width:80.434%;
	margin:0 0 0 5%;
}

.foot_block>ul>li:nth-child(1){/*460 1380*/
	width:33.33333%;
}

.foot_block>ul>li:nth-child(2){/*690 1380*/
	width:50%;
	margin:0 10%  0 6%;
}

/*===============================
  下固定バナー
===============================*/


.fix {
	z-index: 100000;
	position: fixed;
	bottom: 0;
}

/***  ページTOP  ***/
#page_tops {
	bottom:4em;
	right:1em;
}

}


/*=================================================================================*/
/** 960px以上 PCサイズ画面 **/
@media (min-width : 1140px) {




/*=============================
	ヘッダー
=============================*/

#head00 {
	width:100%;
	margin:0;
}


/*===============================
  下固定バナー
===============================*/

.kote ul li{/*1380 560*/
	width:48%;
	margin:0 auto;
}


}

@media (min-width : 1200px) { 


.disp_pt { display:block; }/*PC時だけ表示*/
.disp_st { display:none; }/*スマホ時とタブレット時表示*/

	
.head01_01{/*540 237*/
	width:43.89%;
	margin:1em 4%;
}
	
.head_block>ul>li:nth-child(3){/*1600 290*/
	width:24%;
}
.head02_00{
	padding:1em 0;
}
	
.head02_00flex{/*290 200*/
	width:19%;
	
}
.head02_01_02{/*200 95*/
	padding:0.6em;
	border-radius: 0 0 15px 15px;
}
.head02_01{/*200 95*/
	padding:0.6em;
	border-radius: 0 0 15px 15px;
}
.head02_02{/*200 95*/
	padding:0.6em;
	border-radius: 0 0 0 15px;
}

/***  ページTOP  ***/
#page_tops {
	position: fixed;
	display:block;
	width:auto;
	bottom:0.5em;
	right:1em;
	z-index:50;
}


}


@media (min-width : 1600px) { 

.navi>ul>li{
	font-size:100%;
	padding:1em;
}


}