@charset "utf-8";

/*======================================
	
	489ban-CSS
	
	スタイルを追加する際は、
	#customer_headerと#customer_footerを付けて指定してください。
	↑これをつけないと自動生成されるプラン部分に影響する可能性があります。

======================================*/


/* ----------------------------------------
 *
 *  1.基本設定
 *
 * ---------------------------------------- */
#customer_header ol, #customer_header ul,
#customer_footer ol, #customer_footer ul{ margin: 0; padding: 0; list-style:none;}
#customer_header caption, #customer_header th,
#customer_footer caption, #customer_footer th{ text-align: left;}
#customer_header :focus,#customer_footer :focus{ outline: none;}

#customer_header *,#customer_header *:before,#customer_header *:after,
#customer_footer *,#customer_footer *:before,#customer_footer *:after{
    -webkit-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
#customer_header,
#customer_footer{
	max-width: 100%;
	font-size: 15.45px;
	font-family: "游明朝",YuMincho,serif;
	line-height: 33px;
	color:#231815;
	-webkit-text-size-adjust: 100%;
	background:#fff;
	text-align: center;
}
#customer_header img,#customer_footer img { border:none; outline:none; vertical-align:middle;}
#customer_header p,#customer_footer p{ margin: 0; padding: 0;}
 
#customer_header .clear,
#customer_footer .clear{ clear:both;	}
#customer_header .clearfix:before,
#customer_header .clearfix:after,
#customer_footer .clearfix:before,
#customer_footer .clearfix:after{
    content: " ";
	display: table;}
#customer_header .clearfix:after,
#customer_footer .clearfix:after{
    clear: both;
}
/* ------- リンク ------- */
#customer_header a,#customer_header a:visited,
#customer_footer a,#customer_footer a:visited{
	color: #231815;
	text-decoration: none;
	-webkit-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
	}
#customer_header a:hover,#customer_header a:active,
#customer_footer a:hover,#customer_footer a:active{ color: #aaaaaa; text-decoration: none;}

#customer_header .sansserif,
#customer_footer .sansserif{ font-family: "新ゴ R","Shin Go Regular","メイリオ",Meiryo,sans-serif;}

#customer_header .strong, #customer_footer .strong{  font-weight:bold;}
#customer_header .text_r,#customer_footer .text_r{ text-align:right;}
#customer_header .text_c,#customer_footer .text_c { text-align:center;}
#customer_header .text_l ,#customer_footer .text_l { text-align:left;}
#customer_header .text_description,#customer_footer .text_description{ font-size: 1.3rem; letter-spacing: 0; line-height: 2.3rem; text-align: left;}

/* --------------　透過　------------------ */
#customer_header .opacity a:hover img,
#customer_footer .opacity a:hover img{
	opacity: 0.6;
	-webkit-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
}
/* --------------　box　------------------ */
#customer_header .container,#customer_footer .container{ width: 100%;}
#customer_header .box1100,#customer_footer .box1100{ width: 100%; max-width:1100px; margin:0 auto; padding: 0 82px;}
#customer_header .box934,#customer_footer .box934{ width: 100%; max-width:934px; margin:0 auto;}
#customer_header .box800,#customer_footer .box800{ width: 100%; max-width:800px; margin:0 auto;}
#customer_header .contents_inner,#customer_footer .contents_inner{ width: 100%; max-width:1100px; margin: 0 auto; padding: 0 40px;}

#customer_header .f_left,#customer_footer .f_left{ float:left;}
#customer_header .f_right,#customer_footer .f_right{ float:right;}

/* --------------　ボタン　------------------ */
#customer_header .btn-gray a,#customer_header .btn-gray a:visited{
	background: #e4e4e5;
	display: block;
	line-height: 1;
	padding: 15px 0;
	font-size: 17px;
}
/* --------------　画像　------------------ */
/*画像FIT*/
#customer_header .img_w100,#customer_footer .img_w100{ width: 100%; height: auto;}
#customer_header .img_h100,#customer_footer .img_h100{ width: auto; height: 100%;}

/* --------------　調整　------------------ */
#customer_header .mb1,#customer_footer .mb1{ margin-bottom: 1em !important;}
#customer_header .mb10,#customer_footer .mb10{ margin-bottom: 10px !important;}
#customer_header .mb20,#customer_footer .mb20{ margin-bottom: 20px !important;}
#customer_header .mb30,#customer_footer .mb30{ margin-bottom: 30px !important;}
#customer_header .mb40,#customer_footer .mb40{ margin-bottom: 40px !important;}
#customer_header .mb50,#customer_footer .mb50{ margin-bottom: 50px !important;}
#customer_header .mb60,#customer_footer .mb60{ margin-bottom: 60px !important;}
#customer_header .mb70,#customer_footer .mb70{ margin-bottom: 70px !important;}
#customer_header .mb80,#customer_footer .mb80{ margin-bottom: 80px !important;}
#customer_header .mb90,#customer_footer .mb90{ margin-bottom: 90px !important;}
#customer_header .mb100,#customer_footer .mb100{ margin-bottom: 100px !important;}
#customer_header .mb140,#customer_footer .mb140{ margin-bottom: 140px !important;}
#customer_header .mb200,#customer_footer .mb200{ margin-bottom: 200px !important;}
#customer_header .mb300,#customer_footer .mb30{ margin-bottom: 300px !important;}

/* ----------------------------------------
 *
 *  3.Contents
 *
 * ---------------------------------------- */

/* header
======================================================*/
#customer_header .header_nav{ background: #fff; padding: 28px 0; width: 100%; top: 0; z-index: 999; border-bottom: 1px solid #fff;}
#customer_header .header_nav .header_logo{	width: 112px; height: auto; float: left;}
#customer_header .header_nav nav{ width: 470px; float: right; margin-top: 4px;}
#customer_header .header_nav nav li{ float: left; margin-right: 32px;}
#customer_header .header_nav nav li:last-child{ margin-right: 0;}
#customer_header .header_img_wp{ /*margin-top: 97px;*/ position: relative; overflow: hidden; padding-top: 29%;}
#customer_header .header_img_wp img{
	width: 100.1%;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);	
	transform: translateY(-50%) translateX(-50%);
}
/* footer
======================================================*/
#customer_footer .footer_nav{
	font-size: 15px;
	line-height: 1;
	margin: 76px 0 0 0;
}
#customer_footer .footer_nav li{ display: inline-block; position: relative; padding: 0 12px;}
#customer_footer .footer_nav li::after{
	content: "";
	width: 1px;
	height: 100%;
	background: #231815;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
}
#customer_footer .footer_nav li:last-child::after{ display: none;}
#customer_footer .footer_logo{ width: 166px; margin: 72px auto 0 auto;}
#customer_footer .footer_adress{ font-size: 14px; margin: 20px 0 50px 0;}
#customer_footer .copy{
	font-size:10px;
	color:#ffffff;
	background-color: #231815;
	padding: 25px 0;
	line-height: 1;
}


/* ----------------------------------------
 *
 *  4.表示非表示の設定
 *
 * ---------------------------------------- */
#customer_header .sp_none,#customer_footer .sp_none{ display: block;}
#customer_header .pc_none,#customer_footer .pc_none{display: none;}
@media screen and (max-width: 768px) {
	 #customer_header .sp_none,#customer_footer .sp_none{ display: none;}
	 #customer_header .pc_none,#customer_footer .pc_none{ display: block;}
}

/* ----------------------------------------
 *
 *  SP用
 *	ブレイクポイントは予約番に合わせて768pxです。
 *
 * ---------------------------------------- */
@media screen and (max-width:768px) {
	
	/*共通*/
	#customer_header .sp_br,#customer_footer .sp_br{ display: block;}
	#customer_header .sp_left,#customer_footer .sp_left{ text-align: left;}
	#customer_header,#customer_footer{ font-size: 15.45px; line-height: 30px;}
	#customer_header .header_img_wp{ margin-top: 0;}
	
	/*ハンバーガーメニュー*/
	#customer_header .humburger_wp{
		position:fixed;
		top:10px;
		left:10px;
		z-index:9996;	
		width: 52px;
		height: 45px;
		background: rgba(255,255,255,.8);
		padding: 10px;
	}
	#customer_header .menu-trigger{
		position:relative;
		z-index:9996;	
		width: 32px;
		height: 25px;
	}
	#customer_header .menu-trigger:hover{ cursor:pointer;}
	#customer_header .menu-trigger,
	#customer_header .menu-trigger span,
	#customer_header .hamburger_close,
	#customer_header .hamburger_close span{
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	}
	#customer_header .menu-trigger span,
	#customer_header .hamburger_close span{
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background-color: #231815;
	}
	#customer_header .menu-trigger span:nth-of-type(1) { top: 0;}
	#customer_header .menu-trigger span:nth-of-type(2) { top: 11px;}
	#customer_header .menu-trigger span:nth-of-type(3) { bottom: 0;}
	#customer_header .hamburger_close span:nth-of-type(1) {
	  -webkit-transform: translateY(11px) rotate(-315deg);
	  transform: translateY(11px) rotate(-315deg);
		 background-color: #231815;
	}
	#customer_header .hamburger_close span:nth-of-type(2) { opacity: 0;}
	#customer_header .hamburger_close span:nth-of-type(3) {
	  -webkit-transform: translateY(11px) rotate(315deg);
	  transform: translateY(11px) rotate(315deg);
	background-color: #231815;
	}
	/*展開メニューの中身*/
	#customer_header .menu-section {
		width: 100%;
		height: 100%;
		background: rgba(255,255,255,.95);
		position: fixed;
		top: 0;
		z-index: 9997;
		transition: .5s;
		padding: 17px 16px 18px 67px;
		overflow-y: auto;
		}
	#customer_header .menu-section:not(:target) { left: -100%;}
	#customer_header .menu-section:target{ left: 0;overflow-y: scroll;-webkit-overflow-scrolling:touch;}
	#customer_header .hamburger_close{
		position:absolute;
		top:17px;
		left:17px;
		z-index:9996;	
		width: 32px;
		height: 25px;
	}
	#customer_header .menu-section h2{
		font-size: 13px;
		line-height: 24px;
		margin-top: 0;
		background: url("../img/base/logo-icon.svg") no-repeat center right;
		background-size: auto 100%;
		text-align: left;
		margin-bottom: 56px;
	}
	#customer_header .menu-section ul{ margin-bottom: 32px;}
	#customer_header .menu-section ul li{
		text-align: left;
		border-bottom: 1px solid #231815;
		padding: 16px;
		font-size: 16px;
		line-height: 20px;
		padding-left: 0;
	}
	#customer_header .menu-section ul li a{
		display: block;
		background: url("../img/base/arrow-03.png") no-repeat center left;
		background-size: auto 100%;
		padding-left: 24px;
	}
	#customer_header .menu_tel{
		border-bottom: 1px solid #231815;
		padding-bottom: 17px;
		font-size: 13px;
		text-align: left;
		line-height: 25px;
		margin-top: 32px;
	}
	#customer_header .menu_tel span{
		display: block;
		font-size: 17px;
	}

	/*footer*/
	#customer_footer .footer_logo{ margin: 66px auto 0 auto;}
	#customer_footer .footer_adress{ font-size: 13px; margin: 18px 0;}
	#customer_footer .copy{ padding: 23px 0;}
	
}