@charset "utf-8";
/* Copyright 2018 FSFIELD All Rights Reserved. */

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

パソコン、スマートフォン（iPhone,iPod,Android) 共通

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

/* ------------------------------------------------------------

basic

------------------------------------------------------------ */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

*{font-family:Noto Sans JP, Yu Gothic, "游ゴシック", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}

body{
	background: #F3F3F3;
	font-size:16px;
	font-size:1.6rem;/*-16px-*/
	line-height:1.8;
	color:#333333;
    font-weight: 400;
}

/* ------------------------------------------------------------

shortcodes

------------------------------------------------------------ */

/* clear
---------------------------------------------- */
.overflow_clear{
	overflow:hidden;
	height:100%;
}

/* text-align
---------------------------------------------- */
.align_right{text-align:right !important;}
.align_left{text-align:left !important;}
.align_center{text-align:center !important;}
.center{margin:0 auto !important;}
.left{float:left !important;}
.right{float:right !important;}

/* font
---------------------------------------------- */
.normal{font-weight:normal !important;}
.bold{font-weight:bold !important;}
.italic{font-style: italic !important;}

/* vertical-align
---------------------------------------------- */
.valign_top{vertical-align:top !important;}
.valign_middle{vertical-align:middle !important;}
.valign_btm{vertical-align:bottom !important;}

/* visibility
---------------------------------------------- */
.hidden{visibility:hidden !important;}
.visible{visibility:visible !important;}

/* none
---------------------------------------------- */
.none{display:none !important;}

/* margin
---------------------------------------------- */
.mr_none{margin-right:0px !important;}
.mr_05{margin-right:5px !important;}
.mr_10{margin-right:10px !important;}
.mr_15{margin-right:15px !important;}
.mr_20{margin-right:20px !important;}
.mr_25{margin-right:25px !important;}
.mr_30{margin-right:30px !important;}
.mr_35{margin-right:35px !important;}
.mr_40{margin-right:40px !important;}
.mr_45{margin-right:45px !important;}
.mr_50{margin-right:50px !important;}

.ml_none{margin-left:0px !important;}
.ml_05{margin-left:5px !important;}
.ml_10{margin-left:10px !important;}
.ml_15{margin-left:15px !important;}
.ml_20{margin-left:20px !important;}
.ml_25{margin-left:25px !important;}
.ml_30{margin-left:30px !important;}
.ml_35{margin-left:35px !important;}
.ml_40{margin-left:40px !important;}
.ml_45{margin-left:45px !important;}
.ml_50{margin-left:50px !important;}

.mt_none{margin-top:0px !important;}
.mt_05{margin-top:5px !important;}
.mt_10{margin-top:10px !important;}
.mt_15{margin-top:15px !important;}
.mt_20{margin-top:20px !important;}
.mt_25{margin-top:25px !important;}
.mt_30{margin-top:30px !important;}
.mt_35{margin-top:35px !important;}
.mt_40{margin-top:40px !important;}
.mt_45{margin-top:45px !important;}
.mt_50{margin-top:50px !important;}
.mt_60{margin-top:60px !important;}

.mb_none{margin-bottom:0px !important;}
.mb_05{margin-bottom:5px !important;}
.mb_10{margin-bottom:10px !important;}
.mb_15{margin-bottom:15px !important;}
.mb_20{margin-bottom:20px !important;}
.mb_25{margin-bottom:25px !important;}
.mb_30{margin-bottom:30px !important;}
.mb_35{margin-bottom:35px !important;}
.mb_40{margin-bottom:40px !important;}
.mb_45{margin-bottom:45px !important;}
.mb_50{margin-bottom:50px !important;}
.mb_55{margin-bottom:55px !important;}
.mb_60{margin-bottom:60px !important;}
.mb_65{margin-bottom:65px !important;}
.mb_70{margin-bottom:70px !important;}
.mb_75{margin-bottom:75px !important;}
.mb_80{margin-bottom:80px !important;}
.mb_85{margin-bottom:85px !important;}
.mb_90{margin-bottom:90px !important;}
.mb_95{margin-bottom:95px !important;}
.mb_100{margin-bottom:100px !important;}


@media screen and (min-width:768px){ /* 表示領域が768px以上の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	PC

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	common

	------------------------------------------------------------ */
	
	#wrap_all{overflow: hidden;}
	
	.wrap_type01{
		max-width: 900px;
		margin: 0 auto 100px;
	}

	.wrap_type02{
		max-width: 1200px;
		margin: 0 auto 150px;
	}
	.wrap_type03{
		background-color: #ffffff;
		max-width: 900px;
		margin: 0 auto 100px;
		padding: 30px;
	}
	.wrap_type04{
		background-color: #F3F3F3;
		font-size: 17px;
		max-width: 900px;
		margin: 0 auto 100px;
	}
	

	/* ページタイトル
	---------------------------------------------- */
	#pagetttl{
		line-height: 1;
		color: #304458;
		text-align: center;
		font-weight: bold;
		padding: 120px 0 120px;
		font-size: 2.6rem;
	}
	#pagetttl2{
		line-height: 1;
		color: #304458;
		text-align: center;
		font-weight: bold;
		padding: 10px 0 100px;
		font-size: 2.6rem;
	}
	#pagetttl3{
		line-height: 1;
		color: #304458;
		text-align: center;
		font-weight: bold;
		padding: 10px 0 50px;
		font-size: 2.3rem;
	}
	/* ------------------------------------------------------------

	header

	------------------------------------------------------------ */

	#h_logo_sp,
	.btn_open,
	.drawer{display: none;}

	#header{background: #FFF;}
	
	#header_inner{
		min-width: 768px;
		height: 110px;
		margin: 0 auto;
		position: relative;
	}

	#h_logo_pc{
		width: calc(100% - 530px);
		max-width: 564px;
		height: 100%;
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-align-items: center;/*--safari用--*/
		align-items: center;
		padding-left: 20px;
	}
	
	#h_logo_pc a{
		display: block;
		line-height: 1;
	}
	
	#h_logo_pc a img{width:100%;}

	/* ナビ
	---------------------------------------------- */
	.nav_global{
		position: absolute;
		top:0;
		right: 0;
	}

	.nav_global ul{overflow: hidden;}

	.nav_global li{float: left;}
	
	.nav_global li.g01{width: 124px;}
	.nav_global li.g02{width: 117px;}
	.nav_global li.g03{width: 169px;}
	.nav_global li.g04{width: 120px;}

	.nav_global li a{
		display: block;
		height: 110px;
	}

	.g01 a{background: url(../img/pc/nav_global01.jpg) no-repeat 0 0;}
	.g02 a{background: url(../img/pc/nav_global01.jpg) no-repeat -124px 0;}
	.g03 a{background: url(../img/pc/nav_global01.jpg) no-repeat -241px 0;}
	.g04 a{background: url(../img/pc/nav_global01.jpg) no-repeat -410px 0;}

	.g01 a:hover{background: url(../img/pc/nav_global01.jpg) no-repeat 0 -110px;}
	.g02 a:hover{background: url(../img/pc/nav_global01.jpg) no-repeat -124px -110px;}
	.g03 a:hover{background: url(../img/pc/nav_global01.jpg) no-repeat -241px -110px;}
	.g04 a:hover{background: url(../img/pc/nav_global01.jpg) no-repeat -410px -110px;}

	.nav_global li a span{display: none;}

	/* ------------------------------------------------------------

	footer

	------------------------------------------------------------ */

	#footer{
		background: #304458;
		padding-bottom: 35px;
	}
	
	#footer_inner01{
		max-width: 944px;
		margin: 0 auto 50px ;
		padding-top: 80px;
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-flex-wrap:wrap;/*--safari用--*/
		flex-wrap:wrap;
		justify-content: center;
	}
	
	.small{
		color: #7792AA;
		line-height: 1.2;
		text-align: center;
		font-size: 1.1rem;
	}

	/* エリア
	---------------------------------------------- */
	.accordion{display: none;}

	.f_area{
		font-size: 1.4rem;
		width: 236px;
		padding: 0 2px;
		margin: 0 0 30px;
	}

	.f_area_name{
		background: #253648;
		text-align: center;
		margin-bottom: 10px;
		border-radius: 20px;
	}
	
	.f_area_name:hover{background: #45617C;}
	
	.f_area_name a{
		display: block;
		color: #FFF;
		padding: 10px 0;
	}

	.f_area nav ul{
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-flex-wrap:wrap;/*--safari用--*/
		flex-wrap:wrap;
		-webkit-justify-content:space-between;/*--safari用--*/
		justify-content:space-between;
	}

	.f_area nav ul li{
		width: 30%;
		margin-left:30px;
	
	}

	.f_area nav ul li a{
		display: block;
		color: #FFF;
	}

	.f_area nav ul li a:hover{color: #A5C9DF;}

	/* ナビ
	---------------------------------------------- */
	.nav_footer{
		border-top:1px solid #253648;
		max-width: 1200px;
		margin: 0 auto;
		padding: 40px 0;
	}

	.nav_footer ul{
		width: 670px;
		margin: 0 auto;
		display:-webkit-flex;/*--safari用--*/
		display:flex;
	}

	.nav_footer ul li{
		font-size: 1.4rem;
		width: 25%;
		text-align: center;
	}

	.nav_footer ul li a{
		display: block;
		color: #FFF;
	}

	.nav_footer ul li a:hover{color: #A5C9E0;}
	
	/* ページトップボタン
	---------------------------------------------- */
	#pagetop{
		position: fixed;
		right: 40px;
		bottom:40px;
	}
	
	#pagetop a{
		background: url(../img/pc/btn_pagetop01.png) no-repeat 0 0;
		display: block;
		width: 50px;
		height: 68px;
	}
	
	#pagetop a:hover{background: url(../img/pc/btn_pagetop01_on.png) no-repeat 0 0;}
	
	#pagetop span{display: none;}
	
}/*--@media--*/


@media screen and (min-width:768px) and (max-width:950px){/* 表示領域が768px以上950px以下の場合に適用するスタイル */ 
	/*--ヘッダーロゴだけ例外で別メディアクエリ--*/
	#h_logo_sp{
		width: calc(100% - 530px);
		max-width: 290px;
		height: 100%;
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-align-items: center;/*--safari用--*/
		align-items: center;
		padding-left: 20px;
	}

	#h_logo_sp a{display: block;}

	#h_logo_sp img{width: 100%;}

	#h_logo_pc{display: none;}
	
}/*--@media--*/


@media screen and (max-width:767px){ /* 表示領域が767px以下の場合に適用するスタイル */
	/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

	スマートフォン（iPhone,iPod,Android)

	_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/

	/* ------------------------------------------------------------

	common

	------------------------------------------------------------ */
	
	#wrap_all{overflow: hidden;}
	
	.wrap_type01{
		padding: 0 25px;
		margin-bottom: 50px;
	}

	.wrap_type02{
		padding: 0 25px;
		margin-bottom: 50px;
	}

	/* ページタイトル
	---------------------------------------------- */
	#pagetttl{
		line-height: 1;
		color: #304458;
		text-align: center;
		font-weight: bold;
		padding: 70px 0 60px;
		font-size: 2rem;
	}

	#pagetttl2{
		line-height: 1;
		color: #304458;
		text-align: center;
		font-weight: bold;
		padding: 10px 0 100px;
		font-size: 2rem;
	}
	#pagetttl3{
		line-height: 1;
		color: #304458;
		text-align: center;
		font-weight: bold;
		padding: 10px 0 40px;
		font-size: 2rem;
	}	

	/* ------------------------------------------------------------

	header

	------------------------------------------------------------ */
	
	#header{background: #FFF;}
	
	#header_inner{
		width: 100%;
		height: 75px;
		padding-top: 10px;
		text-align: center;
		position: relative;
	}

	/* ロゴ
	---------------------------------------------- */
	#h_logo_sp{
		width: 210px;
		margin: 0 auto;
	}

	#h_logo_sp a{display: block;}

	#h_logo_sp img{width: 100%;}

	#h_logo_pc{display: none;}

	/* メニュー
	---------------------------------------------- */
	.nav_global{display: none;}

	#wrapper{
		position: relative;
		transition: all .3s;
		height: 100%;
	}

	#wrapper::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0);
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
		transition: all .3s;
	}

	#wrapper.open{transform: translate3d(-76.5vw,0,0);}

	#wrapper.open::after{background: rgba(0, 0, 0, 0.6);}

	.drawer{
		position: fixed;
		top: 0;
		right: -76.5vw;
		background: #304458;
		width: 76.5vw;
		height: 100%;
		transition: all .3s;
		margin-left: 76.5vw;
	}

	/*--ナビ--*/
	.drawer{transition: all .3s;}
	.drawer.open{transform: translate3d(-76.5vw,0,0);}

	.drawer nav{
		width: 60.9vw;
		margin: 0 auto;
		padding-top: 50px;
	}

	.drawer nav ul li{border-bottom: 1px solid #455F78;}

	.drawer nav ul li:first-child{border-top: 1px solid #455F78;}

	.drawer nav ul li a{
		background: url(../img/sp/ico_arrow01.png) no-repeat right center;
		background-size: 8px;
		display: block;
		padding: 13px 25px 13px 0;
		color: #FFF;
	}

	/*--メニュー開くボタン--*/
	.btn_open{
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100;
	}

	.btn_open img{width: 50px;}

	/*--メニュー閉じるボタン--*/
	.btn_close{
		position: absolute;
		top: 0;
		right: 0;
	}

	.btn_close img{width: 50px;}

	/* ------------------------------------------------------------

	footer

	------------------------------------------------------------ */

	#footer{
		background: #304458;
		padding-bottom: 10px;
	}
	
	.small{
		font-size: 0.9rem;
		color: #7792AA;
		line-height: 1.2;
		text-align: center;
	}

	/* エリア
	---------------------------------------------- */
	.accordion{
		background: #304458 url(../img/sp/ico_arrow02.png) no-repeat right 15px center;
		background-size: 15px;
		border-bottom: 1px solid #455F78;
		font-size: 1.5rem;
		color: #FFF;
		font-weight: bold;
		padding: 12px 25px 13px 10px;
	}
	
	.accordion.active{
		background: #304458 url(../img/sp/ico_arrow03.png) no-repeat right 15px center;
		background-size: 15px;
		border-bottom: none;
	}

	.f_area_name{
		background: #070E19 url(../img/sp/ico_arrow01.png) no-repeat right 20px center;
		background-size: 8px;
	}

	.f_area_name a{
		display: block;
		color:#A6C9E1;
		padding: 13px 20px;
		font-size: 1.5rem;
	}
	
	.f_area{font-size: 1.4rem;}

	.f_area nav{
		background: #15202E;
		padding: 0 20px 25px;
	}

	.f_area nav ul{
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-flex-wrap:wrap;/*--safari用--*/
		flex-wrap:wrap;
		-webkit-justify-content:space-between;/*--safari用--*/
		justify-content:space-between;
	}

	.f_area nav ul li{
		width: calc((100vw - 75px) / 2);
		border-bottom: 1px solid #304458;
	}
	
	.f_area nav ul li a{
		background: url(../img/sp/ico_arrow01.png) no-repeat right center;
		background-size: 8px;
		padding: 13px 0;
		display: block;
		color: #A5C9DF;
	}

	/*--北海道--*/
	.f_area_hokkaido .f_area_name{
		background: #304458 url(../img/sp/ico_arrow01.png) no-repeat right 15px center;
		background-size: 8px;
		border-bottom: 1px solid #455F78;
		font-size: 1.5rem;
	}

	.f_area_hokkaido .f_area_name a{
		display: block;
		color: #FFF;
		font-weight: bold;
		padding: 12px 25px 13px 10px;
	}

	.f_area_hokkaido nav{display: none;}

	/* ナビ
	---------------------------------------------- */
	.nav_footer{padding: 40px 0 30px;}

	.nav_footer ul{
		width: 100%;
		display:-webkit-flex;/*--safari用--*/
		display:flex;
		-webkit-justify-content:center;/*--safari用--*/
		justify-content:center;
	}

	.nav_footer ul li{
		display: inline-block;
		font-size: 1.1rem;
		text-align: center;
	}

	.nav_footer ul li a{
		padding: 10px 4vw;
		display: block;
		color: #FFF;
	}

	/* ページトップボタン
	---------------------------------------------- */
	#pagetop{
		position: fixed;
		right: 20px;
		bottom: 20px;
	}
	
	#pagetop a{
		background: url(../img/sp/btn_pagetop01.png) no-repeat 0 0;
		background-size: 40px;
		display: block;
		width: 40px;
		height: 40px;
	}
	
	#pagetop span{display: none;}

} /*--@media--*/