@charset "UTF-8";
/* CSS Document */

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/09/20
* Last update : 2018/10/01
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* 画面幅：680px 以下
*************************************************************************************************************************/

.wrap{ display: flex; flex-wrap: wrap-reverse; padding: 20px 0;}
.list .wrap{ padding: 0 0 20px 0;}
.detail .wrap{ padding: 20px 16px;}

/* search */
.search{ width: 100%; padding: 0 16px; overflow: hidden;}
.list .search{ padding-top: 15px;}
.detail .search{ display: none;}

.search__title{ margin-bottom: 10px; font-size: 14px; color: #333333; font-weight: bold;}
.search__title::before{ display: inline-block; content: ""; width: 12px; height: 1px; margin: 0 10px 4px 0; background: #2E8A97; vertical-align: middle;}
.search__box{ margin-bottom: 15px; }

.select-tag{ width: 100%; height: 44px; padding: 0 60px 0 17px; background: url(../img/icon_selecttag.svg) no-repeat center right, #F0F0F0; font-size: 13px; font-weight: bold; color: #666; outline: none; letter-spacing: 0.05em; appearance: none;  border: none; border-radius: 0;}
.select-tag::-ms-expand{ display: none;}

.searchform { display: flex; width: 100%; height: 44px;}
.searchform__input{ width: calc(100% - 84px); height: 100%; padding: 0 15px; background: #F0F0F0; font-size: 13px; font-weight: bold; color: #333333; outline: none; border: none; border-radius: 0; box-shadow: none; z-index: 1;}
.searchform__input:-webkit-autofill{ -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset; -webkit-text-fill-color: #333333 !important;}
.searchform__input:focus{ box-shadow: 0 1px 4px #ccc;}
.searchform__button{ width: 84px; height: 100%; padding: 0; background: #dd0716; font-size: 13px; font-weight: bold; color: #FFFFFF; border: none; border-radius: 0; cursor: pointer; -webkit-appearance: none; z-index: 1;transition: all .4s;}
.searchform__button:hover{ opacity: 0.4;}
.search__gps{ display: flex; align-items: center; width: 100%; height: 44px; padding: 0 20px; background: #dd0716; font-size: 13px; font-weight: bold; color: #FFFFFF; position: relative;transition: all .4s;}
.search__gps::before{ content: ""; width: 13px; height: 19px; background: url("../img/icon_map_white.svg") no-repeat center center/cover; position: absolute; right: 23px; top: 50%; transform: translateY(-50%);}
.search__gps:hover{ opacity: 0.4;}


@media print, screen and (min-width: 681px){
  .wrap{ width: 980px; margin: 0 auto; padding: 50px 0 80px!important; position: relative; overflow: hidden;}
  .wrap::before{ content: ""; background: #d1d1d1; width: 1px; height: 100%; position: absolute; top: 0; left: 260px;}
  
  /* search */
  .search{ width: 260px; padding: 0 40px 0 0;}
  .detail .search{ display: block;}
  .search__box{ margin-bottom: 20px; }
  .searchform__input{ width: calc(100% - 54px);}
  .searchform__button{ width: 54px;}
}


/* index
**********************************************************************/
.areamap{ display: none;}

@media print, screen and (min-width: 681px){
  .areamap{ display: block; width: 680px; height: 555px; margin: 0 0 0 40px; background: #F1F1F1; position: relative;}
  .areamap .search__title{ position: absolute; top: 30px; left: 30px;}
  .areamap__list{ width: 558px; height: 377px; background: url("../img/map.svg") no-repeat left top/cover; position: absolute; top: 50%; left: calc(50% + 30px); transform: translate(-50%,-50%);}
  .areamap__link{ display: flex; align-items: center; justify-content: center; width: 120px; height: 38px; background: #fff; border: 2px solid #2E919E; border-radius: 3px; font: 900 16px/1 "heisei-kaku-gothic-std"; color: #2E919E;}
  .areamap__link:hover{ background: #2E919E; border: 2px solid #fff; color: #fff;}
  .areamap__item{ position: absolute;}
  .areamap__item.hokkaido{ top: 20px; left: 336px;}
  .areamap__item.tohoku{ top:193px; left: 414px;}
  .areamap__item.hokuriku{ top: 194px; left: 225px;}
  .areamap__item.kanto{ top: 288px; left: 380px;}
  .areamap__item.tokai{ top: 352px; left: 293px;}
  .areamap__item.kinki{ top: 292px; left: 150px;}
  .areamap__item.chugoku{ top: 230px; left: 62px;}
  .areamap__item.shikoku{ top: 357px; left: 88px;}
  .areamap__item.kyusyu{ top: 292px; left: -60px;}
  
  .areamap__float{ pointer-events: none; width: 680px; height: 555px; background: rgba(0,0,0,.3); position: absolute; z-index: 999; opacity: 0; transition: all .4s;}
  .areamap__float.active{ pointer-events: auto; opacity: 1;}
  .areamap__float-box{ width: 430px; height: 255px; background: #fff; border-radius: 6px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
  .areamap__float-box__close{ width: 50px; height: 50px; position: absolute; right: 0; top: 0;}
  .areamap__float-box__inner{ width: 330px; margin: 56px auto 0 auto;}
  .areamap__float-box__inner-title{ margin: 0 0 18px 0; position: relative !important; top: 0!important; left: 0!important;}
  .areamap__float-box__inner-content{ margin: 0 0 15px 0;}
}


/* list.html
**********************************************************************/
.search__result{ margin: 5px 15px 20px 15px; padding: 15px; background: #F0F0F0; text-align: center;}
.search__result-title{ margin: 0 0 2px 0; font-size: 14px; font-weight: bold; color: #2E919E;}
.search__result-text{ font-size: 13px; color: #333;}
.search__result-num{ width: 100%; padding: 10px 16px; border-top:1px solid #ccc; font-size: 14px; font-weight: bold; color: #2E919E; text-align: center;}
.search__result-option{ margin: 15px 0 0 0; padding: 15px 15px 5px 15px; background: #fff;}
.search__result-option__text{ width: 100%; margin: 0 0 13px 0; padding: 0 0 5px 0; font-size: 13px; border-bottom: 1px dotted #ccc;}
.search__result-option__list{ display: flex; flex-wrap: wrap;}
.search__result-option__list-item{ width: 135px; margin: 0 0 10px 0;}
.search__result-option__list-item input{ display: none;}
.search__result-option__list-item input + label{ display: flex; align-items: center; font-size: 13px; line-height: 1; cursor: pointer; position: relative;}
.search__result-option__list-item input + label::before{ content: ""; display: inline-block; width: 12px; height: 12px; margin: 0 5px 0 0; border: #CCC 2px solid;}
.search__result-option__list-item input:checked + label::after{ content: ""; display: block; width: 5px; height: 9px; position: absolute; top: -1px; left: 6px; border-right: 3px solid #2E919E; border-bottom: 3px solid #2E919E;
  transform: rotate(45deg); }

.serviceicon{ display: flex; flex-shrink: 0; width: 100%; height: 25px; margin: 10px 0; text-align: left;}
.serviceicon.detail{ margin: 0;}
.serviceicon__item{ height: 20px; margin: 0 10px 0 0; font-size: 1px;}
.detail .serviceicon__item{ height: 25px;}
.serviceicon__item:last-child{ margin: 0;}
.serviceicon__item img{ width: auto; height: 25px;}

.list section{ margin: 30px 0 0;}
.list section h3{ margin: 0 0 17px; font: 900 20px/1 "heisei-kaku-gothic-std"; color: #dd0716; text-align: center;}
.list section .pref{ background: #f2f2f2; padding: 15px 16px;}
.list section .pref ul{ display: none;}
.list section > ul > li{ margin: -1px 0 0; padding: 16px 15px; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; border-left: solid 1px #fff; border-right: solid 1px #fff;}
.list section > ul > li[class*="hidden-"]{display: none;}
.list section > ul > li div{ display: flex; flex-wrap: wrap;}
.list section > ul > li div figure{ width: 96px;}
.list section > ul > li div dl{ width: calc(100% - 110px); margin: 0 0 0 14px; text-align: left; text-justify: auto;}
.list section > ul > li div dl dt{ margin: 0 0 3px; font: 700 15px/1.3 "heisei-kaku-gothic-std";}
.list section > ul > li div dl dd{ padding: 0 0 0 17px; position: relative; font-size: 13px; line-height: 1.35;}
.list section > ul > li div dl dd::before{ content: ""; width: 13px; height: 13px; position: absolute; top: 1px; left: 0;}
.list section > ul > li div dl dd:nth-of-type(1)::before{ background: url(../img/icon_location.svg) no-repeat center/contain;}
.list section > ul > li div dl dd:nth-of-type(2)::before{ background: url(../img/icon_tel.svg) no-repeat center/contain;}
.list section > ul > li div dl dd:nth-of-type(3)::before{ background: url(../img/icon_hour.svg) no-repeat center/contain;}
.list section > ul > li div dl dd.service{ width: calc(100vw - 30px); margin: 0 0 0 -110px; padding: 0;}
.list section > ul > li div dl dd.service::before{ display: none;}
.list section > ul > li ul.linkbtn{ margin: 10px 0 0; overflow: hidden;}
.list section > ul > li ul.linkbtn li a{ width: calc(50% - 5px); height: 40px; position: relative; border-radius: 3px; font: 700 14px/40px "heisei-kaku-gothic-std"; color: #fff; text-align: center;}
.list section > ul > li ul.linkbtn li:nth-child(1) a{ background: #2e919e; padding: 0 0 0 5px; float: left;}
.list section > ul > li ul.linkbtn li:nth-child(1) a::before{ content: ""; background: url(../img/icon_contact.svg) no-repeat center/contain; width: 14px; height: 14px; margin: 0 0 0 -2.8em; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.list section > ul > li ul.linkbtn li:nth-child(2) a{ background: #dd0716; float: right;}
.list section > ul > li ul.linkbtn li:nth-child(2) a::before{ content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); border-style: solid; border-width: 4px 0 4px 5px; border-color: transparent transparent transparent #fff;}

@media print, screen and (min-width: 681px){
  .search__result{ margin: 5px 0 20px 0;}
  .search__result-option__list{ display: flex; flex-wrap: nowrap;}
  .search__result-option__list-item{ width: auto; margin: 0 18px 10px 0;}
  
  .list section{ width: 720px; margin: 0; padding: 0 0 0 40px;}
  .list section h3{ margin-bottom: 40px; font-size: 28px;}
  
  .list section .pref{ background: none; padding: 0;}
  .list section .pref .select{ display: none;}
  .list section .pref ul{ display: table; margin: 0 auto; overflow: hidden;}
  .list section .pref ul li{ width: 80px; padding: 2px 0; float: left; border-left: solid 1px #d1d1d1; font-weight: bold; font-size: 14px; line-height: 1; text-align: center;}
  .list section .pref ul li:first-child{ border-left: none;}
  .list section .pref ul li a{ color: #333; transition: color .2s linear}
  .list section .pref ul li a:hover,
  .list section .pref ul li a.on{ color: #dd0716;}
  
  .list section > ul{ margin: 0;}
  .list section > ul > li{ margin: -1px 0 0; padding: 20px 45px 20px 20px; position: relative; cursor: pointer; transition: border 0s linear}
  .list section > ul > li:hover{ border: solid 1px #dd0716!important; z-index: 2; transition: border .3s linear;}
  .list section > ul > li::after{ content: ""; width: 0; height: 0; position: absolute; top: 50%; right: 19px; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #ccc; transform: translateY(-50%); transition: border-left-color 0s linear;}
  .list section > ul > li:hover::after{ border-left-color: #dd0716; transition: border-left-color .3s linear;}
  .list section > ul > li div{}
  .list section > ul > li div figure{}
  .list section > ul > li div dl{ width: calc(100% - 120px); align-self: center; margin-left: 24px;}
  .list section > ul > li div dl dt{ margin-bottom: 12px; font-size: 20px; line-height: 1;}
  .list section > ul > li div dl dd{ margin: 0 20px 0 0; float: left;}
  .list section > ul > li div dl dd:last-of-type{ margin-right: 0;}
  .list section > ul > li div dl dd.service{ margin: 0 0 0 -10px;}
  .list section > ul > li.long div dl dt{ margin-bottom: 0;}
  .list section > ul > li.long div dl dd{ margin-top: 4px;}
  .list section > ul > li.long div dl dd:first-of-type{ display: block; width: 100%; margin-top: 10px;}
  
  .list section > ul > li ul.linkbtn{ display: none;}
}


.map-area { position: relative;}
.map-area:before { content: ""; display: block; padding-top: 66.666666%;}
.map-area iframe,
.map-area > div { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.map-area--md:before { padding-top: 56.666666%;}
.map-canvas { width: 100%; height: 100%;}
.map-infowindow { text-align: center; padding: 10px 15px;}
.map-infowindow__heading { color: #2E919E; font-weight: bold; min-width: 120px;}
.map-infowindow__heading a{ color: #2E919E;}
.map-infowindow__button { display: flex; justify-content: center; align-items: center; width: 100%; min-width: 100px; height: 30px; margin-top: 10px; background: #2E919E; font-size: 13px; color: #FFFFFF; font-weight: bold; border:1px solid #2E919E;}
.map-infowindow__button:hover{ background: #fff; color: #2E919E;}
@media print, screen and (min-width: 681px){
  .map-area { margin: 20px 0;}
}



/* detail.html
**********************************************************************/
.detail section{ width: 100%;}
.detail .headLine{
	background: #e7f4f6;
	height: 80px;
	padding: 16px 16px 0;
	font: 900 20px / 1 "heisei-kaku-gothic-std";
	color: #2e919e;
	text-align: center;
	letter-spacing: .1em;
}
.detail .headLine span{
	display: inline-block;
	margin: 0 0 7px;
	position: relative;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0;
}
.detail .headLine span::before,
.detail .headLine span::after{
	content: "";
	background: #2e919e;
	width: 15px;
	height: 1px;
	position: absolute;
	top: 5px;
}
.detail .headLine span::before{
	left: -28px;
}
.detail .headLine span::after{
	right: -28px;
}
.pankuzu ul li:not(:first-child):not(:last-child) {
	display: block;
}
.pankuzu ul li:not(:first-child):not(:last-child) a::before{
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	right: -15px;
	border-style: solid;
	border-width: 20px 0 20px 12px;
	border-color: transparent transparent transparent #ffe100;
	z-index: 2;
}
.pankuzu ul li:not(:first-child):not(:last-child) a::after{
	border-color: transparent transparent transparent #dd0716;
	right: -16px;
}
.detail section h1{ 
	font: 900 28px/1 "heisei-kaku-gothic-std"; color: #dd0716;
	line-height: 1.3;
}
.detail section h1 span{
	display: block;
	font-size: 14px;
}
body:not(#home).detail section h2{
	background: #2e919e;
	color: #fff;
	text-align: left;
	padding: 10px;
	height: auto;
	margin-top: 10px;
	margin-bottom: 0;
	letter-spacing: 1px;
}
.detail section dl{ margin:0; border-top: solid 1px #ccc; border-bottom: solid 1px #ccc; overflow: hidden;}
.detail section dl dt,
.detail section dl dd{ background: url(../../common/img/border_h_gray01.svg) repeat-x 0 0/6px 1px; padding: 15px 7px; float: left; font-size: 13px; line-height: 1.4;}
.detail section dl dt:first-of-type,
.detail section dl dd:first-of-type{ background: none;}
.detail section dl dt{ width: 95px; color: #2e919e; clear: both;}
.detail section dl dd{ width: calc(100% - 95px);}
.detail section dl dd span{ display: block;}
.detail section dl dd a{ color: #333; transition: color .2s linear;}
.detail section dl dd a:hover{ color: #dd0716;}
.detail section dl dd.service a{
	 transition: all .4s;
}
.detail section dl dd.service a:hover{
	 opacity: 0.4;
}

.detail section > a{ display: block; background: #dd0716; max-width: 400px; height: 50px; margin: 20px auto 0; position: relative; border: solid 2px #dd0716; font: 700 15px/46px "heisei-kaku-gothic-std"; color: #fff; text-align: center; transition: background .3s linear, color .3s linear;}
.detail section > a:hover{ background: #fff; color: #dd0716;}
.detail section > a::before{ content: ""; background: #ffe100; width: 18px; height: 18px; position: absolute; top: 50%; right: 16px; border-radius: 50%; transform: translateY(-50%); transition: background .3s linear;}
.detail section > a:hover::before{ background: #dd0716; }
.detail section > a::after{ content: ""; background: url(../../common/img/icon_arrow_red01.svg) no-repeat center/contain; width: 6px; height: 9px; position: absolute; top: 50%; right: 21px; transform: translateY(-50%);}
.detail section > a:hover::after{ background-image: url(../../common/img/icon_arrow_white01.svg);}

.detail section > section{ margin: 22px 0 0;}

.detail section h4{ margin: 0 0 13px; position: relative; font: 700 16px/1 "heisei-kaku-gothic-std"; color: #dd0716;}
.detail section .access h4{ padding: 0 0 0 20px;}
.detail section .access h4::before{ content: ""; background: url(../img/icon_location.svg) no-repeat center/contain; width: 20px; height: 20px; position: absolute; top: -2px; left: 0;}
.detail section .message h4{ padding: 0 0 0 28px;}
.detail section .message h4::before{ content: ""; background: url(../img/icon_message.svg) no-repeat center/contain; width: 21px; height: 21px; position: absolute; top: -2px; left: 0;}

.detail section .access #googlemap{ width: 100%; height: 300px;}

.detail section .message div figure{ background: #e7f4f6; margin: 0 0 12px; text-align: center;}
.detail section .message div figure img{ max-width: 220px;}
.detail section .message div p{ font-size: 13px; line-height: 1.7;}

.detail section .contactBox{
	margin: 20px 0;
	border: 2px solid #2e919e;
	border-radius: 8px;
}
.detail section .contactBox h3{
	background: #2e919e;
	color: #fff;
	font-size: 16px;
	padding: 10px 0px;
	text-align: center;
	line-height: 1.3;
}
.detail section .contactBox dl{
	border: none;
	text-align: center;
}
.detail section .contactBox dl dt,
.detail section .contactBox dl dd{
	display: block;
	float:none;
	width: 100%;
}
.detail section .contactBox dl dt{
	font-weight: bold;
	color: #333;
	font-size: 14px;
	padding-bottom: 0;
}
.detail section .contactBox dl.tel{
	border-bottom: 1px solid #ccc;
}
.detail section .contactBox dl.tel dd{
	padding-top: 5px;
}
.detail section .contactBox dl.tel dd a{
	font-weight: bold;
	font-size: 28px;
	background: url(../img/icon_tel.svg) no-repeat left center ;
	background-size: 28px;
	display: inline-block;
	padding-left: 32px;
}
.detail section .contactBox dl.mail dd a{
	display: block;
	line-height: 50px;
	background: #dd0716;
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	letter-spacing: 2px;
	position: relative;
	border-radius: 6px;
	transition: all .4s;
}
.detail section .contactBox dl.mail dd a:hover{
	opacity: 0.4;
}
.detail section .contactBox dl.mail dd a::before{
	content: "";
	background: #ffe100;
	width: 18px;
	height: 18px;
	position: absolute;
	top: 50%;
	right: 16px;
	border-radius: 50%;
	transform: translateY(-50%);
	transition: background .3s linear;
}
.detail section .contactBox dl.mail dd a::after{
	content: "";
	background: url(../../common/img/icon_arrow_red01.svg) no-repeat center / contain;
	width: 6px;
	height: 9px;
	position: absolute;
	top: 50%;
	right: 21px;
	transform: translateY(-50%);
}

@media print, screen and (min-width: 681px){
  .detail > .wrap > section{ width: 720px; margin: 0; padding: 0 0 0 40px;}
	.detail .headLine{
		height: 160px;
    padding: 30px 0 0;
    font-size: 35px;
	}
	.detail .headLine span{
		margin-bottom: 12px;
    font-size: 16px;
	}
  .detail section h1{ 
		font-size: 36px;
	}
	body:not(#home).detail section h2{
		font-size: 18px;
		margin-top: 20px;
		padding: 15px;
	}
  .detail section dl dt,
  .detail section dl dd{ padding: 18px 20px; font-size: 14px;}
  .detail section dl dt{ width: 114px;}
  .detail section dl dd{ width: calc(100% - 114px);}
  .detail section dl dd span{ display: inline-block; margin: 0 1em 0 0;}
  
  .detail section > a{ height: 55px; margin-top: 40px; font-size: 17px; line-height: 51px;}
  
  .detail section > section{ margin-top: 45px;}
  
  .detail section h4{ margin-bottom: 18px; font-size: 20px;}
  .detail section .access h4{ padding-left: 24px;}
  .detail section .access h4::before{ width: 24px; height: 24px;}
  .detail section .message h4{ padding-left: 26px;}
  .detail section .message h4::before{ width: 21px; height: 21px; top: 0;}

  .detail section .access #googlemap{ height: 400px;}
  
  .detail section .message div{ padding: 30px; border: solid 3px #e5e5e5; overflow: hidden;}
  .detail section .message div figure{ background: none; width: 220px; margin: 0; float: right;}
  .detail section .message div p{ width: 370px; float: left; font-size: 14px; line-height: 1.65;}
	
	.detail section .contactBox .contactBoxInner{
		display: flex;
		justify-content: space-around;
	}
	.detail section .contactBox dl{
		width: 50%;
	}
	.detail section .contactBox dl.tel{
		border-bottom: none;
		border-right: 1px solid #ccc;
	}
}



/* 404.html
**********************************************************************/
.err404 section{ margin: 0 16px 30px; padding: 0 0 20px; border-bottom: 1px solid #ccc;}
.err404 section > p{ line-height: 1.6;}
.err404 section .lead{ background: #f5f5f5; margin: 0 0 20px; padding: 30px; font: 700 19px/1.4 "heisei-kaku-gothic-std"; color: #dd0716; text-align: center;}
.err404 section .lead span{ display: block; margin: 0 0 10px; font: 700 21px/1 "futura-pt"; color: #ccc;}
.err404 section .pc{ display: none;}

@media print, screen and (min-width: 681px){
  .err404 section{ width: 720px; margin: 0; padding: 0 0 0 40px; border-bottom: none;}
  .err404 section > p{ line-height: 1.8; text-align: center;}
  .err404 section .lead{ margin-bottom: 40px; padding: 80px; font-size: 32px;}
  .err404 section .lead span{ margin-bottom: 15px; font-size: 36px;}
  .err404 section .sp{ display: none;}
  .err404 section .pc{ display: inline;}
}


/* 問い合わせ注釈
**********************************************************************/
.contactBox p{
	text-align: center;
	padding-bottom: 10px;
}
@media print, screen and (min-width: 768px){
	.contactBox p{
		padding-top: 5px;
	}
	.contactBox p br{
		display: none;
	}
}