/*------------------------------------------
全体
-------------------------------------------*/
#wrapper { width: 100%; position: relative; overflow: hidden; }
.conts_wrapper { max-width: 1000px; margin: 0 auto; }
.conts_wrapper_narrow { max-width: 700px; width: 70%; margin: 0 auto; }/*幅の狭いコンテンツ*/

.small_conts { margin: 150px auto 200px; }
.logo { width: 276px; height: 27px; margin: 0 auto; background: url(../img/logo.svg) center center no-repeat; background-size: contain; overflow: hidden; text-indent: 100%; white-space: nowrap; }

#mainWrap { z-index: 2; }

@media screen and (max-width: 767px) {
	.conts_wrapper { width: 90%; max-width: 100%; }
	.conts_wrapper_narrow { width: 90%; max-width: 100%;}
}


/*-----------------------------------------
ヘッダー
-------------------------------------------*/
header { width: 100%; overflow-x: hidden; overflow-y: visible; z-index: 1; }

/*グローバルナビ*/
header #global_navi { width: 100%; font-size: 1rem; font-weight: bold; letter-spacing: 0.05em; background: #F5F5F5; padding: .7rem 190px  ; position: relative; }
header #global_navi .btn_gnavi { display: none; }
header #global_navi ul { width: 90%; max-width: 820px; line-height: 100%;
display:-webkit-box; display:-moz-box; display: -ms-flex; display: -webkit-flex; display: flex; 
-webkit-box-pack:justify; -moz-box-pack: justify; -moz-flex-pack: justify; -ms-box-pack: justify; -ms-flex-pack:justify; -webkit-justify-content: space-between; justify-content: -ms-space-between; justify-content: -webkit-space-between;
justify-content: space-between; flex-wrap:wrap; flex-wrap:wrap; flex-wrap:wrap; }
header #global_navi li.here { border-bottom: 2px solid transparent; }
header #global_navi li a { padding: .5rem 0; display: inline-block; }
header #global_navi li.here,
header #global_navi li:hover  { border-bottom: 2px solid #A5A5A5; }

@media screen and (max-width: 1220px) {
	header #global_navi { padding: .7rem 210px .7rem 0;  }
}
@media screen and (max-width: 767px) {
	body#home header { margin-bottom: 30px; }
	header #global_navi { width: 0; max-width: 820px; position: absolute; top:3.5rem; left:0;padding: 0; background: none; text-align: center; z-index: 1; }
	header #global_navi .btn_gnavi { width: 3.5rem; height: 3.5rem; display:inline-block; position: absolute; top:-3.5rem; left:0; cursor: pointer; background:#F5F5F5;}
	header #global_navi .btn_gnavi:before { content:''; width: 1.5rem; height: 3px; display:block; background: #A5A5A5; position: absolute; top:0; left:0; right:0; bottom: 0; margin: auto; box-shadow: 0 -10px 0 0 #A5A5A5, 0 10px 0 0 #A5A5A5; }
	header #global_navi .btn_gnavi_close { color: #A5A5A5; width: 8rem; border: #A5A5A5 2px solid; text-align: center; padding: 5px 10px 5px 25px; margin: 0 auto 50px; cursor: pointer; position: relative; }

	header #global_navi .btn_gnavi.open:before,
	header #global_navi .btn_gnavi.open:after { content:''; width: 1.5rem; height: 3px; background: #A5A5A5; position: absolute; top:0; bottom:0; left:0; right:0; margin: auto;box-shadow: none ;}
	header #global_navi .btn_gnavi_close:before,
	header #global_navi .btn_gnavi_close:after { content:''; width: 1rem; height: 2px; background: #A5A5A5; position: absolute; top:0; bottom:0; left:10px; margin: auto; }
	
	header #global_navi .btn_gnavi.open:before,
	header #global_navi .btn_gnavi_close:before { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	header #global_navi .btn_gnavi.open:after,
	header #global_navi .btn_gnavi_close:after { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
	
	header #global_navi .btn_gnavi + .gnavi_wrapper { width: 0; background:#F5F5F5; margin-left: -100%; -webkit-transition-property: margin-left, width, visibility; -webkit-transition-duration: .3s; transition-property: margin-left, width, visibility; transition-duration: .3s; visibility: hidden; z-index: -1; overflow: hidden; }
	header #global_navi .btn_gnavi.open + .gnavi_wrapper {  width: 100%; display: block; box-shadow: 0 10px 0 0px rgba(0,0,0,.3); margin-left: 0; visibility: visible; z-index: 1;}



	header #global_navi ul { width: 100%; background: #F5F5F5; padding: 20px 5%; display:block;}
	header #global_navi li.here { border: none; }
	header #global_navi ul li:not(.pc_only) { width: 48%; background: #FFF; text-align: center; margin-bottom: 10px; display: -webkit-inline-block; display: inline-block; }
	header #global_navi ul li:nth-child(odd) { margin-right: 4%; }
	header #global_navi ul li a { width: 100%; height: 100%; display:block; padding: 1rem 0; }
}

/*ご相談内容*/
header .navi_wrap { width: 100%; overflow-x: hidden; }
header #util_navi { width: 0; position: absolute; top:3.5rem; right: 0; z-index:1;}
header #util_navi .btn_util { color: #FFF; font-size: 1rem; font-weight: bold;letter-spacing: 0.05em;  width: 11em; height: 3.5rem; line-height: 3.5rem;padding: 0 50px 0 30px; background: #A5A5A5; display: block; position: absolute; top:-3.5rem; right: 0; cursor: pointer; vertical-align: middle;}
header #util_navi .btn_util:after { content: "?"; line-height: 0; text-align: center; width: 1.5rem; height: 0;  padding: .75rem 0; border: 2px solid #FFF; border-radius: 1.5rem; display: inline-block; margin-left: 15px; position:absolute; top:0; bottom: 0; right: 15px; margin: auto; }
header #util_navi .btn_util.open { background: #582E00; }
header #util_navi .btn_util.open:before,
header #util_navi .btn_util.open:after { content: ""; width: 1.6rem; height: 2px; border: none; padding: 0; border-radius: 2px; background: #FFF; }
header #util_navi .btn_util.open:before { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position:absolute; top:0; bottom: 0; right: 15px; margin: auto;}
header #util_navi .btn_util.open:after { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

/*language*/
header .lang_navi { position: absolute; top: 0; right: 11rem; margin :auto;  }
header .lang_navi .btn-lang { width: 3.5rem; height: 3.5rem; display: block; background: #582E00 url(../img/icon-lang.svg) no-repeat center center/ 50% auto; text-indent: 100%; overflow: hidden; white-space:nowrap; cursor: pointer; }

header .lang_navi .btn-lang + ul { display: block; width: 14.5rem; height: auto; background: #A5A5A5; color: #FFF; position: absolute; top: 100%; left: 0; z-index: 98;  box-shadow: 0 0 0 0px rgba(0,0,0,0); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); 
-ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }
header .lang_navi .btn-lang + ul > li { border-bottom: 2px solid #22478D; }
header .lang_navi .btn-lang + ul a { display: block; padding: 1em 2em; color: #FFF; }

header .lang_navi .btn-lang.open + ul { -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0);box-shadow: -5px 0 0 0px rgba(0,0,0,.2); }


/*util*/
header #util_navi .btn_util.open + ul { width: 350px; display: block;  box-shadow: -5px 0 0 0px rgba(0,0,0,.3); margin-left: 0; z-index: 1;}
header #util_navi > ul { width: 0; overflow-x: hidden; background: #A5A5A5; margin-left: 350px; -webkit-transition-property: margin-left, width; -webkit-transition-duration: .3s; transition-property: margin-left, width; transition-duration:.3s;/*メニュースライド*/ z-index: -1;}
header #util_navi > ul >li { width: 350px; color: #FFF; font-size: 1rem; line-height: 350%; background: #A5A5A5; text-indent: 30px; border-bottom: 2px solid #22578D; cursor: pointer; position: relative;}
header #util_navi .menu_title { width: 100%; height: 100%; display: block; }
header #util_navi .menu_title:after { content:''; width: 5px; height: 5px; border-width: 0 2px 2px 0 ; border-style: solid; border-color: #FFF; display: inline-block; position: absolute; top:1.5rem; right: 30px; margin: auto; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all .5s; transition: all .5s; }
header #util_navi .menu_title.preparing:after { display:none; }
header #util_navi .menu_title.open:after { rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }


header #util_navi .menu_title + ul { display: none; }

header #util_navi .list_menu > li { font-size: .95rem; text-align: left; line-height: 150%; text-indent: 0; border: none; }
header #util_navi .list_menu > span { display: none; }
header #util_navi .list_menu > li > a { padding-right: 45px; }


.btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #67c5ff;
  color: white;
}

.list_menu_sub { display: none; }

@media screen and (max-width: 767px) {
	header #util_navi { width: auto; }
	header #util_navi .btn_util { width: 3.5rem; height: 3.5rem; display:inline-block; background: #A5A5A5; padding: 0; }
	header #util_navi .btn_util:after { left:0; right:0;  }
	header #util_navi .btn_util.open:before { left:0; right:0;}
	header #util_navi > ul { width: 100%; margin-left: 100%; }
	header #util_navi .btn_util + ul { width: 0; overflow: hidden; margin-left: 100%; }
	header #util_navi .btn_util.open + ul { width: 100%; margin-left: 0;  box-shadow: 0 5px 0 0px rgba(0,0,0,.3); }
	header #util_navi > ul li { width: 100%; min-width: 200px;}
	header #util_navi > ul li.title_top_sp { background: #582E00; font-size: 1.1rem; text-align: center; cursor: auto; text-indent: 0; border: none; }


	header .lang_navi { right: 3.5rem; z-index: 2; }
	header .lang_navi .btn-lang.open + ul{ left: auto; right: -3.5rem; width: 15rem; }


	header #util_navi .btn_util_close { color: #FFF; width: 8rem; line-height: 180%; text-indent: 0; border: #FFF 2px solid; text-align: center; padding: 5px 10px 5px 25px; margin: 30px auto ; cursor: pointer; position: relative; }
	header #util_navi .btn_util_close:before,
	header #util_navi .btn_util_close:after { content:''; width: 1rem; height: 2px; background: #FFF; position: absolute; top:0; bottom:0; left:10px; margin: auto; }
	
	header #util_navi .btn_util_close:before { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
	header #util_navi .btn_util_close:after { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.btn-flat-border {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #67c5ff;
  color: white;
}
}


/*タイトル、電話番号、メール*/
header .title_area { padding: 40px 0 ; position: relative; z-index: -1;}
header .contact { width: 16rem; position: absolute; top: 5rem; right: 5%; margin: auto; z-index: 15; }
header .contact .tel {background: -webkit-linear-gradient(top, transparent, transparent 50%, #FFF18E 50%, #FFF18E); background: -webkit-linear-gradient(top, transparent, transparent 50%, #FFF18E 50%, #FFF18E); background: linear-gradient(transparent, transparent 50%, #FFF18E 50%, #FFF18E); background-size: 1em 100%;  }

header h1 { text-align: center; background-color: transparent; }

@media screen and (max-width: 1000px) {
	header .title_area { padding: 40px 200px 40px 130px; }
	header .contact { right: 2%; }
}
@media screen and (max-width: 767px) {
	header .contact { width: 70%; margin: 0 auto 30px; position: relative; top: auto; right: auto;  display: block;}
	header .title_area { height: 3.5rem; margin: 0 7rem 0 3.5rem; padding:0;  position: relative; background: #FFF; z-index: 1; }

	header h1.logo { width: 65%; max-height: 1.5rem; padding: 0; position:absolute; top:0; bottom:0; right:0; left:0; margin: auto; }
}
/*-----------------------------------------
フッター
-------------------------------------------*/
footer { text-align: center; font-weight: bold; margin-top: 70px; }
footer > .conts_wrapper { position: relative;  }
footer .copyright { font-size: .6rem; margin: 20px auto 60px; }

footer .gotop { color: #FFF; font-size: .8em;  background: #A5A5A5; position: absolute; right: 0; bottom: 0; margin: auto; width: 4em; height: 4em; text-align: center; border: 2px solid #A5A5A5;  line-height: 100%; -ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; display: block; }
footer .gotop:before { content:''; width: .3em; height: .3em; display: block; border-width: 2px; border-style: solid; border-color: #FFF transparent transparent #FFF ; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin: 1em auto .3em; -ms-transition: all .3s; -webkit-transition: all .3s; transition: all .3s; }
footer .gotop:hover { color: #A5A5A5; background: none; }
footer .gotop:hover:before { border-color: #A5A5A5 transparent transparent #A5A5A5;  }


@media screen and (max-width: 767px) {
	footer { font-size: .8rem; }
	footer .logo { width: 60%;  }
	footer .gotop { position: relative; bottom: auto; right: auto; margin: 0 auto 20px; }
	footer .copyright { margin: 20px auto 30px;  }
}

/*-----------------------------------------
フッター 問い合わせ
-------------------------------------------*/
.footer_contact { width: 600px; margin: 0 auto;  text-align: center; margin-top: 100px;  }
/*
.footer_contact .msg {  width: 100%; height: 0; padding-top: 14%; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url(../img/foot_msg.png) no-repeat top right; background-size: 85% auto; position: relative; }
.footer_contact .msg:before { content:''; width: 23%; height: 0; padding-top: 15%; margin-right: 5%; background:  url(../img/shirota/1.svg) no-repeat top left; background-size: auto 100%; display: inline-block; position:absolute; top:0; left: 10px;  }*/

.footer_contact .msg .conts_l { width: 8%; }
.footer_contact .msg .conts_r { width: 88%; }
.footer_contact .msg .balloon { font-size: 1.5rem; font-weight: bold; line-height: 3.5rem; margin-bottom: 0; border: 2px solid #000; border-radius: 1.75rem; position: relative; }
.footer_contact .msg .balloon:before {  content:''; width:0; height:0 ; border-style:solid; border-color: transparent #000 transparent transparent ; border-width: 6px 10px 6px 0; position: absolute; top: 20px; right: 100%; }

.footer_contact .contact { width: 100%; }
.footer_contact .contact > * { width: 50%; height: 3rem; display: inline-block; margin-bottom: 0; vertical-align: middle;}
.footer_contact .contact .tel { color: #A5A5A5; font-weight: bold; letter-spacing: 0.05em; font-size: 1.3rem; border-style: solid; border-width: 2px 0 2px 2px; line-height: 3rem; vertical-align: middle;}
.footer_contact .contact .tel a { color: #A5A5A5; }
.footer_contact .contact .tel .t_s { font-size: 0.6em; vertical-align: middle; margin-right: .5rem;}
.footer_contact .contact .mail { width: 100%; height: 3rem; font-size: 1rem; line-height: 3rem; margin-bottom: 0; padding: 0;  vertical-align: middle;} 



@media screen and (max-width: 767px) {
	.footer_contact { width: 90%; margin-top: 50px; }
	.footer_contact .contact > * { width: 100%; }
	
	.footer_contact .msg { margin-bottom: .5rem; }
	.footer_contact .msg .conts_r { width: 85%; }
	.footer_contact .msg .balloon { font-size: .95rem;  line-height: 2.5rem; }
	.footer_contact .msg .balloon:before {  top: 15px; right: 100%; }
	.footer_contact .contact .tel { border-width: 2px 2px 0; }
}
/*------------------------------------------
レイアウト
-------------------------------------------*/
/*個々のコンテンツの全体を囲むボックス*/
.contents_box {  margin-bottom: 50px; }
.contents_boxS {  margin-bottom: 25px; }

/*全幅*/
.column1 { width: 100%; margin-bottom: 2%; }
/*2カラム*/
.column2 { width: 100%; zoom: 1;}
.column2:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; }
.column2 > * { width: 49%; float: left; margin-bottom: 2%; }
.column2 > *:nth-child(even) { margin-left: 2%; }
/*3カラム*/
.column3 { width: 100%; zoom:1;}
.column3:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; }
.column3 > * { width: 32%; float: left; margin-bottom: 20px; margin-right: 2%; }
.column3 > *:nth-child(3n) { margin-right: 0; }

/*4カラム*/
.column4 { width: 100%; zoom:1;}
.column4:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; }
.column4 > * { width: 23.5%; float: left; margin-bottom: 20px; margin-right: 2%;}
.column4 > *:nth-child(4n) { margin-right: 0; }

@media screen and (max-width: 767px) {
	.column1 { margin-bottom: 5%; }
	/*2カラム*/
	.column2 > * { width: 100%; float: none; margin-bottom: 5%;  }
	.column2 > *:nth-child(even) { margin-left: 0; }
	/*3カラム*/
	.column3 > * { width: 100%; float: none; margin-right: 0;  margin-bottom: 5%; }
	/*4カラム*/
	.column4 > * { width: 100%; float: none; margin-right: 0;}
}

/*線で区切った縦ならびのコンテンツ*/
.conts_tandem > * { border-bottom: 1px solid #CCC; padding-bottom: 20px; margin-bottom: 20px;}
.conts_tandem > *:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/*メインコンテンツとサブコンテンツ*/
.main_sub_conts { width: 100%; zoom:1;}
.main_sub_conts:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; }
.main_sub_conts .main_conts { width: 70%; float: left; }
.main_sub_conts .sub_conts { width: 25%; float: right; }
h2 + .main_sub_conts { margin-top: 50px; }

@media screen and (max-width: 767px) {
	.main_sub_conts .main_conts { width: 100%; float: none; }
	.main_sub_conts .sub_conts { width: 100%; float: none; padding: 20px; border: solid #A5A5A5; border-width: 2px 0;}
	
}

/*-----------------------------------------
フロート
-------------------------------------------*/
.conts_l { float: left; }
.conts_r { float: right; }

@media screen and (max-width: 767px) {
	.conts_l_pc,
	.conts_r_pc { float: none; }
}
/*clearfix*/
.clearfix { zoom:1;/*for IE 5.5-7*/ }
.clearfix:after{/*for modern browser*/ content:"."; display: block; height:0; clear: both; visibility: hidden; }