@charset "utf-8";


/**** ページTOP **/
#page_top {
	position:relative; 
	width:80px;
}

/*===タイトル==========================================================================*/

#title01{
	width:100%;
	max-width:1020px;
	margin:0 auto;
	padding:5em 0;
	position:relative;
}

#title01 h2 img{
	width:60%;/*1020 320*/
	margin:0 auto;
}


/*===パンくず==========================================================================*/


#pan{
	width:100%;
	max-width:1020px;
	box-sizing: border-box;
	margin:0 auto;
	padding:5px 1em;
	color:#00506A;
}

#pan li{
	float:left;
	padding:0.5em 1.3em ;
	background:url(../img/common/pan_arrow.png) no-repeat left;
}


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

#head00{
	max-width: 980px;
	width:100%;
	margin:0 auto;
	height:125px;
	position:relative;
	/*overflow:hidden;*/
}

.head00_02,
.head00_03,
.pg_navi{
	position:absolute;
}


.head00_01{
	color:#FFFFFF;
	max-width:750px;/*750 980*/
	width:76.530612244%;
	padding:0.5em 1em;
	font-size:90%;
}

.head00_02{
	width:14.489795918%;
	max-width:142px;/*142 980*/
	top:35px;
	left:1em;
}
.head00_03{
	width:19.081632653%;
	max-width:187px;/*187 980*/
	top:10px;
	right:0;
}

.pg_navi{
	width:83%;
	max-width:737px;/*737 980*/
	bottom:15px;
	right:0;
}



/*=================================================================================*/
/*** グランドナヴィゲーション&サブナヴィゲーション  ***/


.pg_navi ul li {
	float: left;
	border-left:1px solid #00506A;
	padding:0 23px;
}

.pg_navi ul li:last-child {
	border-right:1px solid #00506A;
	
}

.pg_navi a:hover img{
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}


.pg_navi .navi_01 img, .pg_navi .navi_01a img,
.pg_navi .navi_02 img, .pg_navi .navi_02a img,
.pg_navi .navi_03 img, .pg_navi .navi_03a img,
.pg_navi .navi_04 img, .pg_navi .navi_04a img,
.pg_navi .navi_05 img, .pg_navi .navi_05a img,
.pg_navi .navi_06 img, .pg_navi .navi_06a img {
	padding:0.4em 0;
}

.pg_navi .navi_01a,
.pg_navi .navi_02a,
.pg_navi .navi_03a,
.pg_navi .navi_04a,
.pg_navi .navi_05a,
.pg_navi .navi_06a{
	display:block;
	background-color: rgba(13,102,251,0.3);
}

.pg_navi .navi_01:hover,
.pg_navi .navi_02:hover,
.pg_navi .navi_03:hover,
.pg_navi .navi_04:hover,
.pg_navi .navi_05:hover,
.pg_navi .navi_06:hover{
	background-color: rgba(13,102,251,0.3);
	transition: 0.2s;

}


/*====サブページ============================================================*/

#content{
	width:100%;
	max-width:1020px;
	margin:0 auto;
	padding:50px 20px;
	box-sizing: border-box;
}

.sub_title_line{
	position: relative;
	text-align: center;
}
.sub_title_line::before{
	content: '';
	background: #00506A;
	position: absolute;
	width:100%;
	height:1px;
	top:48%;
	left:0;
	z-index: 2;
}

.sub_title_line h3{
	letter-spacing: 6px;
	font-weight: bold;
	display: inline-block;
	padding:0.3em 1em 0.3em 1em;
	background:#EEEEEE;
	position: relative;
	z-index: 3;
	text-align: center;
}

/*==右カラム======================================*/

#main{
	width:100%;
	max-width:720px;/*1020 720*/
	float: none;
}


/*==サブページ左カラム============================*/

#sub{
	width:100%;/*1020 228*/
	float: none;
}

#sub>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	padding:2em 0 0 0;
}
#sub>ul>li{
	width:46%;
	margin:0 auto 1em;
}


/*=================================================================================*/
/***  フッダー  ***/
#foot01 {
	color:#000000;
	max-width:1020px;
	width:100%;
	text-align:left;
	margin:0 auto 5em;
	padding:40px 20px;
	box-sizing: border-box;
}

#foot01 a{
	color:#000;
}

.foot01_01{
	width:50%;/*980 161*/
	margin:0 25% 2em;/*405 980*/
}

.foot01_02{
	width:22%;/*980 80*/
	padding-right:1%;/*980 10*/
}

.foot01_02 dl dd{
	padding-left:1em;
	background:url(../img/common/foot_arrow.png) no-repeat left;
}

.foot01_03{
	width:40%;/*980 150*/
	padding-right:1%;/*980 10*/
}
.foot01_04{
	width:34%;/*980 150*/
	padding-right:1%;/*980 10*/
}

.foot01_03 dl dd,
.foot01_04 dl dd {
	line-height:2;
	margin-left:1em;
	padding-left:1em;
	background:url(../img/common/foot_arrow.png) no-repeat left;
}




/*===================================
	スマホヘッダー設定
====================================*/
.disp_fix { position:fixed; top:0; left:0; z-index:50000; width:100%; }

#head00s{
	background:#222222;
}
#head00s>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	align-items: center;
	justify-content: space-between;
	padding:0.3em 0;
}
#head00s>ul>li:nth-child(1){
	width:20%;
	margin:0 0 0 2% ;
}
#head00s>ul>li:nth-child(2){
	width:46%;
	margin:0 2% 0 0;
}

.head00s_nav>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	align-items: center;
	justify-content: flex-end;
}
.head00s_nav>ul>li{
	width:31.333333%;
	margin:0 1%;
	max-width: 50px;
	padding:0.5em;
	box-sizing: border-box;
}

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


.open .nav_s {
  right: 0;
  opacity: 1;
}
.nav_s .inner {
	padding: 4em 1em 2em;
	box-sizing: border-box;
}
.nav_s .inner ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav_s .inner ul li {
	position: relative;
	padding:0.7em 0;
	border-bottom:1px #D6D6D6 solid;
}
.nav_s .inner ul li a {
	color: #000000;
	text-decoration: none;
	transition-duration: 0.2s;
}
.nav_s .inner ul li a:hover {
	color: #00688C;
}
/*============
.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;
}


.nav_s {
	right: -94%;
	width: 94%;
}

.nav_s::-webkit-scrollbar{
	display: none;
}



/*============
#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:#00688C;
  -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:#FFFFFF;
}

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

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

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

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

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

	



@media (min-width : 768px) {

.head00_02{
	top:45px;
	left:1em;
}
	
.pg_navi ul li {
	float: left;
	border-left:1px solid #00506A;
	padding:0 12px;
}
	
/***  ページTOP  ***/
#page_tops {
	bottom:0.2em;
	right:1em;
}
	
	
.foot01_01{
	width:16.428571428%;/*980 161*/
	margin:0 41% 0 0;/*405 980*/
}

.foot01_02{
	width:8.2%;/*980 80*/
	padding-right:1.02%;/*980 10*/
}

.foot01_03,
.foot01_04{
	width:15.306122448%;/*980 150*/
	padding-right:1.02%;/*980 10*/
}
	
#main{
	width:73.469387755%;
	max-width:720px;/*980 720*/
	float: left;
}
.sub_title_line{
	text-align: left;
}
.sub_title_line h3{
	letter-spacing: 6px;
	font-weight: bold;
	display: inline-block;
	padding:0.3em 1em 0.3em 0;
	background:#EEEEEE;
	position: relative;
	z-index: 3;
}
	
#sub{
	width:23.265306122%;/*980 228*/
	max-width: 228px;
	float: right;
}
	
#sub>ul{
	padding:0;
}
#sub>ul>li{
	width:100%;
	margin:0 auto 2.5em;
}
	
#sub .sub_tel>li{
	margin:0 auto;
}
	
	
#title01 h2 img{
	width:32%;/*1020 320*/
	margin:0 0 0 8%;
}
	
	
	
}


@media (min-width : 1020px) {
	
.head00_02{
	top:40px;
	left:0;
}
.pg_navi ul li {
	float: left;
	border-left:1px solid #00506A;
	padding:0 23px;
}
}