@charset "utf-8";

@import url('//fonts.googleapis.com/css2?family=Benne&display=swap');



/*	base font
------------------------------------------*/

@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@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;
}

html{ font-size: calc(13px + 3 * ( 100vh - 460px ) / 300 )}
@media screen and (min-height: 868px){ html{ font-size: 16px }}
@media screen and (max-height: 460px){ html{ font-size: 13px }}

body{
	color: #111;
	font-family: "Yu Gothic", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height:1.8 !important;
	font-feature-settings : "palt";
	-webkit-text-size-adjust: none;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}



/*	link effects
------------------------------------------*/

a									{ transition:.3s}
a:link, a:visited					{ color:#222; text-decoration: none}
a:hover, a:active, a:focus			{ color:#222; text-decoration: none}



/*	structure
------------------------------------------*/
html{
	background:#fff;
	overflow:auto;
	overflow-x: hidden;
}
#page{
	position:relative;
	width:100%;
	height:100%;
	min-height:100vh;
	min-width:100%;
	overflow:hidden;
}


.main{
	position:relative;
	width:100%;
	margin:0 auto 9rem;
}

.inner1024{
	position:relative;
	width:1024px;
	margin:0 auto;
}
@media screen and (max-width: 1024px){
	.inner1024{
		width:94%;
	}
}
.inner980{
	position:relative;
	width:980px;
	margin:0 auto;
}
@media screen and (max-width: 980px){
	.inner980{
		width:94%;
	}
}
.inner600{
	position:relative;
	width:600px;
	margin:0 auto;
}
@media screen and (max-width: 600px){
	.inner600{
		width:94%;
	}
}



.ft{
	position:relative;
	padding:16px 0 100px;
	background:#f4f1e6;
}
	.ft p{
		text-align:center;
	}








/*	loader
------------------------------------------*/
#loader{
	display:block;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#fff;
	z-index:99;
}
#i_loader{
	position:absolute;
	display:block;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:223px;
	height:205px;
	background:url(/img/i_loading_message.png) no-repeat;
	margin:auto;
	transition:1s;
}



/*	hbg
------------------------------------------*/

.drawer-overlay{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 100;
}

#hbg{
	position:absolute;
	right:-18.25rem;
	top: 0;
	overflow: hidden;
	width: 18.25rem;
	height: 100%;
	color: #222;
	background-color: #fff;
	overflow-y: scroll;
	transition:.3s;
	z-index:1001;
}
	#hbg.hbg_on{
		right:0;
	}

.hbg_menu{
	position:fixed;
	width:100%;
	height:100%;
	background: url(/img/bd_rough.gif) repeat-x left top;
	margin:27px 0 4px;
}
	.hbg_menu > li > a{
		display:block;
		position:relative;
		padding:13px 10px;
		font-size:.9rem;
		font-weight:bold;
		line-height:1.2;
		background: url(/img/bd_rough.gif) repeat-x left bottom;
		transition:.3s;
	}
	.hbg_menu > li > a:hover{
		background:rgb(239,236,227) url(/img/bd_rough.gif) repeat-x left bottom;
	}
		
/* btn */
.hbg_btn{
	display: none;
	position: fixed;
	right:0;
	top: 0;
	width: 2rem;
	padding: 18px .75rem 30px;
	transform: translate3d(0, 0, 0);
	background-color: transparent;
	transition:.3s;
	box-sizing: content-box;
	z-index: 104;
	cursor: pointer;
}
	.hbg_btn.hbg_on{
		right:18.25rem;
	}
	.hbg_btn-icon{
		position: relative;
		display: block;
		top:0;
		width: 100%;
		margin-top: 10px;
	}
	.hbg_btn-icon,
	.hbg_btn-icon:before,
	.hbg_btn-icon:after{
		width: 100%;
		height: 2px;
		-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
		transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
		background-color: #333;
	}
	.hbg_btn-icon:before,
	.hbg_btn-icon:after{
		position: absolute;
		top: -10px;
		left: 0;
		content: '';
	}
	.hbg_btn-icon:after{
		top: 10px;
	}

/* opened */
.hbg_btn.hbg_on .hbg_btn-icon{
	background-color: transparent;
}
	.hbg_btn.hbg_on .hbg_btn-icon:before{
		top:0;
		transform: rotate(45deg);
	}
	.hbg_btn.hbg_on .hbg_btn-icon:after{
		top:0;
		transform: rotate(-45deg);
	}
	
@media screen and (max-width: 700px){
	.hbg_btn{
		display:block;
	}
}

.drawer_bg{
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgb(239,236,227);
	overflow:hidden;
	transition:.3s;
	z-index:100;
}
	.drawer_bg.hbg_on{
		display:block;
	}


#i_pagetop{
	display:block;
	position:fixed;
	right:7px;
	bottom:7px;
	width:26px;
	height:83px;
	z-index:100;
	cursor:pointer;
}
	#i_pagetop img{
		display:block;
	}



/*	inq banner
------------------------------------------*/

.bn_inq{
	position:relative;
	width:467px;
	height:169px;
	background-image:url(/img/img_inq.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:auto 100%;
	margin:0 auto;
	transition:.3s;
}
	.bn_inq:hover{
		background-size:auto 105%;
	}
	.bn_inq a{
		display:block;
		width:100%;
		height:100%;
	}
	.bn_inq a::after{
		position:absolute;
		right:0;
		top:0;
		content:'';
		width:32px;
		height:100%;
		background-color:#d7cfb4;
		background-image:url(/img/i_arrow_white.png);
		background-repeat:no-repeat;
		background-position:center center;
	}
	.bn_inq p{
		position:absolute;
		left:8%;
		top:13%;
		color:#fff;
		font-family: "A1明朝";
		font-weight:normal;
		font-size:2.2rem;
		line-height:1.6;
	}
	.bn_inq p:nth-of-type(2){
		top:50%;
		font-size:.81rem;
	}
@media screen and (max-width:550px){
	.bn_inq{
		width:95%;
	}
}




/*	ajax
------------------------------------------*/
.modal{
	display:block;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#e5e3e4;
	z-index:1000;
}
.overlay{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	margin:0 auto;
	z-index:1001;
	overflow:auto;
}
.btn_close{
	display:block;
	position:fixed;
	top:0;
	right:0;
	width:35px;
	height:35px;
	background:#c2b68c;
	z-index:1002;
	cursor:pointer;
	transition: .5s;
}



/*	form
------------------------------------------*/

.must{
	color:rgb(204,0,51);
}
.er_msg{
	display:inline-block;
	padding:10px 16px;
	font-size:.9rem;
	line-height:1.4;
	background:mistyrose;
	border-radius:5px;
	margin:1.5rem 0 2rem;
	
	animation-duration:2s;
	animation-name: er_blink;
	animation-iteration-count: infinite;
}
.er{
	position:relative;
	display:inline-block;
	padding:7px 1em;
	font-size:.9rem;
	line-height:1;
	background:mistyrose;
	margin:.5rem 0;
	border-radius:5px;
	
	animation-duration:2s;
	animation-name: er_blink;
	animation-iteration-count: infinite;
}
@keyframes er_blink{
	0%		{ opacity:1 }
	50%		{ opacity:.2 }
	1000%	{ opacity:1 }
}


.form_elem{
	width:100%;
	box-sizing: border-box;
}
	.form_elem dt{
		width:20%;
		vertical-align:middle;
		font-weight:normal;
	}
	.form_elem dd{
		vertical-align:middle;
		font-weight:normal;
	}
	.form_elem .submit{
		width:100%;
		text-align:center;
	}
	.form_elem input[type=text],
	.form_elem input[type=tel],
	.form_elem input[type=email],
	.form_elem textarea{
		border-style: none;
		width:70%;
		padding:6px 12px;
		font-size:1rem;
		background:rgba(23,99,132,.1);
		border-radius:5px;
		margin:0 0 5px;
		box-sizing: border-box;
	}
	.form_elem *{
		font-family:"Yu Gothic", YuGothic, '游ゴシック体', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
	}
	.form_elem textarea{
		width:100%;
		height:300px;
	}
	.form_elem pre{
		white-space:normal;
	}



/*	flex
------------------------------------------*/

.flex2{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
}


/*	bg
------------------------------------------*/

.bg_beige{
	padding:2rem 1000px 3rem;
	margin:0 -1000px;
	background:rgba(190, 180, 145, .25);
}


/*	fr
------------------------------------------*/

.fr_beige,
.fr_whitesmoke{
	display:inline-block;
	padding:1rem 1.3rem;
	background:rgba(190, 180, 145, .25);
	border-radius:4px;
}
.fr_whitesmoke{ background:whitesmoke}



/*	table
------------------------------------------*/

.dl_table{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	background:url(/img/bd_rough.gif) repeat-x left top;
}
	.dl_table dt{
		width:30%;
		padding:10px 2px 10px 1rem;
		background:url(/img/bd_rough.gif) repeat-x left bottom;
	}
	.dl_table dd{
		width:70%;
		padding:10px 2px;
		background:url(/img/bd_rough.gif) repeat-x left bottom;
	}
	
.table_plain{
	width:100%;
	border-collapse: separate;
	border-spacing: 0;
	border-bottom:1px solid rgba(255,255,255,.3);
}
	.table_plain th{
		padding:10px 10px 10px 0;
		vertical-align:middle;
		text-align:left;
		white-space:nowrap;
		border-top:1px solid rgba(255,255,255,.3);
	}
	.table_plain td{
		padding:10px;
		vertical-align:middle;
		text-align:left;
		border-top:1px solid rgba(255,255,255,.3);
	}



/*	title
------------------------------------------*/

.ttl_main{
	position:relative;
	text-align:center;
	height:184px;
	font-family: "A1明朝";
	font-size:2.12rem;
	font-weight:normal;
	line-height:1.6;
	margin:0 auto 40px;
}
	.ttl_main::after{
		position:absolute;
		display:block;
		left:50%;
		top:5px;
		content:'';
		width:1px;
		height:184px;
		background:url(/img/bd_rough.png) no-repeat 50% 81px;
	}
	.ttl_main span{
		display:block;
		font-family: 'Benne', serif;
		font-size:.9rem;
		margin:auto;
	}


/* 見出し */

.ttl_36,.ttl_34,.ttl_32,
.ttl_30,.ttl_28,.ttl_26,.ttl_24,
.ttl_22,.ttl_20,.ttl_18{
	font-family: "A1明朝";
	font-size:1.875rem;
	font-weight:normal;
	line-height:1.4;
	margin:0 0 1.6rem;
}
.ttl_36{ font-size:2.25rem}
.ttl_24{ font-size:2.21rem}
.ttl_32{ font-size:2rem}
.ttl_26{ font-size:1.625rem}
.ttl_24{ font-size:1.5rem}
.ttl_22{ font-size:1.375rem}
.ttl_20{ font-size:1.25rem}
.ttl_18{ font-size:1.125rem}

.ttl_bg_beige{
	padding:0 11px 6px;
	background:#d7cfb4;
	border-radius:4px;
}

.ttl_36_bd{
	text-align:center;
}
	.ttl_36_bd span{
		display:inline-block;
		font-family: "A1明朝";
		font-size:2.25rem;
		font-weight:normal;
		line-height:1.4;
		padding:0 0 1rem;
		background:url(/img/bd_rough.gif) repeat-x bottom center;
		margin:0 auto 2rem;
	}

.ttl_22_bar-beige{
	padding:2px 8px 6px;
	font-family: "A1明朝";
	font-size:1.375rem;
	font-weight:normal;
	line-height:1.4;
	background:#d7cfb4;
	margin:0 0 .8rem;
}




/*	btn
------------------------------------------*/

.btn_beige:link,.btn_beige:visited{
	display:inline-block;
	padding:5px 8px;
	vertical-align:middle;
	line-height:1.2;
	background:#d7cfb4;
	border-radius:3px;
	transition:.3s;
}
	.btn_beige:hove{
		color:#464043;
		background-color:rgb(246,225,44);
	}

.btn_sumi:link,.btn_sumi:visited{
	display:inline-block;
	padding:1rem 3rem;
	vertical-align:middle;
	color:#fff;
	line-height:1;
	background:#000;
	border-radius:3px;
}

.submit_button{
	border-style: none;
	display:inline-block;
	padding:12px 16px;
	font-size:.9rem;
	background:#d7cfb4;
	border-radius:5px;
	transition: .3s;
	cursor:pointer;
}
	.submit_button:hover{
		color:#464043;
		background-color:rgb(246,225,44);
	}



/*	font
------------------------------------------*/

/* font family */
.ff_min			{font-family: "A1明朝"; font-weight:normal}
.ff_meiryo		{font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W5', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS P Gothic', sans-serif}
.ff_gothic		{font-family: font-family: "Yu Gothic", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif; font-weight: 500}

/* font size */
.fs_LLL	{font-size:2.0rem}
.fs_LL	{font-size:1.75rem}
.fs_L	{font-size:1.5rem}
.fs_ML	{font-size:1.3rem}
.fs_MML	{font-size:1.15rem}
.fs_M	{font-size:1rem}
.fs_MMS	{font-size:.95rem}
.fs_MS	{font-size:.9rem}
.fs_S	{font-size:.75rem}
.fs_SS	{font-size:.6rem}

/* font size */
.fw_bold	{font-weight:bold}
.fs_normal	{font-size:normal}

/* text decoration*/
.txd_ul,	.txd_ul 	a{text-decoration:underline !important}
.txd_none, 	.txd_none 	a{text-decoration:none !important}

.ul_linkcolor{
    background: linear-gradient(transparent 70%, rgba(255,130,133,.4) 0);
}



/*	other
------------------------------------------*/

/* gmap link */
a.i_gmap{
	position:relative;
	display:inline-block;
	padding:10px 0 0 38px;
	height:41px;
	font-size:.9rem;
	line-height:1;
	z-index:1;
	transition:.3s;
}
	a.i_gmap::after{
		position:absolute;
		display:block;
		content:'';
		left:0;
		top:0;
		width:29px;
		height:41px;
		background:url(/img/i_gmap.png) no-repeat;
	}
	a.i_gmap:hover{
		top:-2px;
	}

/* color */
.cl_red		{color:#bd5754}
.cl_white	{color:rgb(255,255,255)}

/* display */
.dp_hide		{display:none !important}
.dp_block		{display:block !important}
.dp_inline		{display:inline !important}
.dp_in-block	{display:inline-block !important}
.dp_flex		{
	display:flex;
	flex-flow: row nowrap;
	justify-content:space-between;
}

.dp_show1000,
.dp_show900,
.dp_show800,
.dp_show700,
.dp_show600,
.dp_show500,
.dp_show400{
	display:none;
}
@media screen and (max-width: 1000px){.dp_show1000{display:block}}
@media screen and (max-width: 900px){.dp_show900{display:block}}
@media screen and (max-width: 800px){.dp_show800{display:block}}
@media screen and (max-width: 700px){.dp_show700{display:block}}
@media screen and (max-width: 600px){.dp_show600{display:block}}
@media screen and (max-width: 500px){.dp_show500{display:block}}
@media screen and (max-width: 400px){.dp_show400{display:block}}

.dp_hide1000,
.dp_hide900,
.dp_hide800,
.dp_hide700,
.dp_hide600,
.dp_hide500,
.dp_hide400{
	display:block;
}
@media screen and (max-width: 1000px){.dp_hide1000{display:none}}
@media screen and (max-width: 900px){.dp_hide900{display:none}}
@media screen and (max-width: 800px){.dp_hide800{display:none}}
@media screen and (max-width: 700px){.dp_hide700{display:none}}
@media screen and (max-width: 600px){.dp_hide600{display:none}}
@media screen and (max-width: 500px){.dp_hide500{display:none}}
@media screen and (max-width: 400px){.dp_hide400{display:none}}

/* clear */
.clearfix:after{
	content: "";
	display: table;
	clear: both;
}

/* img */
.imgfit{
	display:block;
	width:100%;
	height:auto;
}

/* float */
.float_R{float:right}
.float_L{float:left}
.float_C{margin:0 auto 0}

/* align */
.align_R{text-align:right}
.align_L{text-align:left}
.align_C{text-align:center}

/* margin */
.mb_LLL	{margin-bottom: calc( 30px + 70 * ( 100vh - 460px ) / 408 ) !important}	/* 30-100 */
.mb_LL	{margin-bottom: calc( 30px + 45 * ( 100vh - 460px ) / 408 ) !important}	/* 30-75 */
.mb_L	{margin-bottom: calc( 30px + 20 * ( 100vh - 460px ) / 408 ) !important}	/* 30-50 */
.mb_MMM	{margin-bottom: calc( 20px + 30 * ( 100vh - 460px ) / 408 ) !important} 	/* 20-50 */
.mb_MM	{margin-bottom: calc( 20px + 20 * ( 100vh - 460px ) / 408 ) !important}	/* 20-40 */
.mb_M	{margin-bottom: calc( 20px + 10 * ( 100vh - 460px ) / 408 ) !important} 	/* 20-30 */
.mb_SSS	{margin-bottom: calc( 15px + 8 * ( 100vh - 460px ) / 408 ) !important}		/* 5-20 */
.mb_SS	{margin-bottom: calc( 10px + 5 * ( 100vh - 460px ) / 408 ) !important}		/* 5-15 */
.mb_S	{margin-bottom: calc( 5px + 5 * ( 100vh - 460px ) / 408 ) !important}		/* 5-10 */
.mb_Z	{margin-bottom:0 !important}

/* padding */
.pad-L_10	{padding-left:10px !important}
.pad-L_20	{padding-left:20px !important}
.pad-L_30	{padding-left:30px !important}
.pad-R_10	{padding-right:10px !important}
.pad-R_20	{padding-right:20px !important}
.pad-R_30	{padding-right:30px !important}

/* line-height */
.lh_100		{line-height:1rem !important}
.lh_110		{line-height:1.1rem !important}
.lh_120		{line-height:1.2rem !important}
.lh_130		{line-height:1.3rem !important}
.lh_140		{line-height:1.4rem !important}
.lh_150		{line-height:1.5rem !important}
.lh_170		{line-height:1.7rem !important}
.lh_200		{line-height:2rem !important}
.lh_240		{line-height:2.4rem !important}
.lh_300		{line-height:3rem !important}



/*	animation fx
------------------------------------------*/

.me{
	opacity:0;
	filter:blur(30px);
	transform:translateY(100px);
	transition:1s;
}
.me_in{
	opacity:1;
	filter:blur(0);
	transform:translateY(0);
}

.fx_jello:hover{
	animation-duration: .3s;
	animation-name: jello_s;
	transform-origin: center;
}
.fx_headshake:hover{
	animation-duration: .8s;
	animation-name: headShake;
	transform-origin: center;
}
.fx_pulse:hover{
	animation-duration: .3s;
	animation-name: pulse;
	transform-origin: center;
}

.fx_expand115,
.fx_expand112,
.fx_expand108,
.fx_expand105,
.fx_expand102,
.fx_expand101{
	transition:.15s;
	transform-origin: center;
}
	.fx_expand115:hover{ transform:scale(1.15)}
	.fx_expand112:hover{ transform:scale(1.12)}
	.fx_expand108:hover{ transform:scale(1.08)}
	.fx_expand105:hover{ transform:scale(1.05)}
	.fx_expand102:hover{ transform:scale(1.02)}
	.fx_expand101:hover{ transform:scale(1.01)}