@charset "utf-8";


/*------------------------------------------------------------
	書式設定
------------------------------------------------------------*/
/* テキストの位置 */
.taLeft { text-align: left !important; }
.taCenter { text-align: center !important; }
.taRight { text-align: right !important; }

/* フォントの太さ */
.fwNormal { font-weight: normal !important; }
.fwBold { font-weight: bold !important; }

/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
	* html .clearfix {
		zoom: 1;
	}

	*+html .clearfix {
		zoom: 1;
	}

.clearfix:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}


::selection {
    background: #9e8d63;
    color: #fff;
}

/*Firefox*/
::-moz-selection {
    background: #ba9d58;
    color: #fff;
}


/*------------------------------------------------------------
	デフォルトスタイル
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
}

html {
	font-size: 61.5%;
}



@font-face {
    font-family: 'aoz';
    font-style: normal;
    src: url('../../font/aoz.eot'); /* IE9 Compat Modes */
    src: url('../../font/aoz.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../../font/aoz.woff') format('woff'), /* Modern Browsers */
    url('../../font/aoz.ttf')  format('truetype'); /* Safari, Android, iOS */
}



body, table, input, textarea, select, option {
	font-family: 'aoz';
	letter-spacing: 2px;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

img {
	vertical-align: top;
	max-width: 100%;
}

p{
	line-height: 2;
	letter-spacing: 2px;
}

a,
a:link {
	color: #2f2f2f;
	text-decoration: none;
	-webkit-transition: all .6s;
	transition: all .6s;
}

a:visited {
	color: #2f2f2f;
}

a:hover {
	color: #2f2f2f;
}

a:active {
	color: #2f2f2f;
}

/*------------------------------------------------------------
	レイアウト
------------------------------------------------------------*/
body {
	min-width: 800px;
	color: #2f2f2f;
	font-size: 1.4rem;
	line-height: 1.5;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	background-color: #FFF;
}

#container {
	text-align: left;
}

#main {
	padding: 5px 0 0;
	position: relative;
	border: 3px solid p_ink;
}


a[href^="tel:"] {
	cursor: default;
	pointer-events: none;
}

@media all and (min-width: 751px) {
	.sp {
		display: none !important;
	}
}

@media all and (max-width: 750px) {
	body {
		min-width: inherit;
		font-size: 1.2rem;
	}
	
	#main {
		background-size: cover;
	}
	

	a:hover,
	a:hover img {
		opacity: 1 !important;
	}
	
	.pc {
		display: none !important;
	}
	
	a[href^="tel:"] {
		cursor: pointer;
		pointer-events: auto;
	}
	
}

/*------------------------------------------------------------
	ヘッダー
------------------------------------------------------------*/
.header {
	height: 136px;
}

#gHeader {
	padding-bottom: 8px;
	border: 1px solid r_ed;
	background: #fff;
	height: 136px;
	min-width: 980px;
}

#gHeader .hBox {
	border: 2px solid b_lue;
}

#gHeader h1 {
	float: left;
}

#gHeader h1 a {
	padding: 36px 39px 17px 37px;
	display: block;
	position: relative;
	width: 125px;
}

#gHeader .hTel {
	float: right;
	color: #c59f55;
	font-family: 'aoz';
	line-height: 1.1;
	letter-spacing: 1px;
	background: #F4F4F4;
	width: 200px;
	height: 136px;
}



#gHeader .hTel .txt {
	font-size: 1.4rem;
	letter-spacing: 1.5px;
	border: 1px solid r_ed;
	width: 120px;
	margin: auto;
	color: #333;
	text-align: center;
	font-size: 115%;
	line-height: 1.4em;
	margin-top: 25px;
}

#gHeader .hTel .txt a{
	display: block;
	font-size: 90%;
	letter-spacing: 0px;
	margin-top: 15px;
	color: #AA914F;
}



#gHeader.header_fixed {
	padding-bottom: 0;
	width: 100%;
	position: fixed;
	left: 0;
	top: -150px;
	height: 80px;
	z-index: 100;
	transition: .5s;
	-webkit-transition: .5s;
	border-bottom: 1px solid r_ed;
	box-shadow:0px -1px 3px -1px #eee inset;
}



#gHeader.header_change {
	top: 0;
}

#gHeader.header_fixed h1 a {
    padding: 19px 39px 15px 37px;
}

#gHeader.header_fixed a img {
	width: 87px;
}

#gHeader.header_fixed .hTel {
	height: 80px;
}

#gHeader.header_fixed .hTel .txt {
	display: block;
	margin-top: 15px;
	font-size: 90%;
}
#gHeader.header_fixed .hTel .txt a{
	display: block;
	margin-top: 2px;
	font-size: 90%;
}



#gHeader.header_fixed #gNavi {
	width: 600px;
	top: 21px;
	border: 1px solid r_ed;
}


#gHeader.header_fixed #gNavi li a {
	padding: 24px 12px 19px 11px;
}



@media all and (max-width: 750px) {
	.header {
		height: 69px;
	}

	#gHeader {
		padding-bottom: 3px;
		position: relative;
		background-size: 525px 4px;
		min-width: 100%;
	}
	
	#gHeader .hBox {
		background-size: 250px 50px;
	}
	
	#gHeader h1 a {
		padding: 14px 11px 8px;
	}
	
	#gHeader h1 img {
		width: 91px;
	}
	
	#gHeader .menu {
		position: absolute;
		right: 10px;
		top: 16px;
	}
	
	#gHeader .menu a {
		padding: 10px;
		display: block;
	}
	
	#gHeader .menu img {
		width: 25px;
	}

	#gHeader.header_fixed {
		height: 70px;
	}
	
	#gHeader.header_fixed .menu img {
		width: 20px;
	}
	
	.menuBox {
		border: 1px solid r_ed;
		padding: 38px 23px;
		width: 75%;
		position: fixed;
		top: 0;
		right: -88%;
		display: block;
		box-sizing: border-box;
		height: 100%;
		max-height: 100%;
		overflow-y: auto;
		box-sizing: border-box;
		transition: right 1s cubic-bezier(0.075, 0.82, 0.165, 1);
		-webkit-transition: right 1s cubic-bezier(0.075, 0.82, 0.165, 1);
		-ms-transition: right 1s cubic-bezier(0.075, 0.82, 0.165, 1);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		background-size: 600px auto;
		z-index: 1000;
		box-shadow: -2px 0 4px rgba(0,0,0,0.08);
		overflow-x: hidden;
	}
	
	.menuBox.on {
		right: 0;
	}
	
	.menuBox .close {
		position: absolute;
		right: 17px;
		top: 17px;
	}
	
	.menuBox .close a {
		padding: 10px;
		display: block;
	}
	
	.menuBox .close img,
	#gHeader.header_fixed .close img {
		width: 22px;
	}
	
	.menuBox .hImg {
		margin: -6px 0 33px 23px;
	}
	
	.menuBox .hImg img {
		width: 70px;
	}
	
	#gHeader .hTel {
		display: none;
	}

	
	#gHeader.header_fixed h1 a {
		padding: 14px 11px 8px;
	}
	

}

/*------------------------------------------------------------
	gNavi
------------------------------------------------------------*/
#gNavi {
	margin-left: -349px;
	width: 660px;
	font-size: 0;
	position: absolute;
	left: 50%;
	top: 55px;
	text-align: center;
}

#gNavi li {
	margin-right: 1px;
	display: inline-block;
	font-size: 1.25rem;
	letter-spacing: 0.7px;
}

#gNavi li a {
	padding: 25px 12px 25px 11px;
	display: inline-block;
	position: relative;
	font-family: 'aoz';
	letter-spacing: 1.5px;
}

#gNavi li a:after {
	width: 0;
	bottom: 0;
	border-bottom: 1.5px solid #e6dac1;
/*	border-bottom: 2px solid #E28662;*/
	display: block;
	transition: all .6s ease;
	-webkit-transition: all .6s ease;
	content: "";
}

#gNavi li a:hover:after {
	width: 100%;
}



@media all and (max-width: 750px) {
	#gNavi,#gHeader.header_fixed #gNavi {
		margin-left: 0;
		width: auto;
		position: static;
		text-align: left;
	}
	
	#gNavi li {
		margin: 22px 0;
		display: block;
	}
	
	#gNavi li a {
		padding: 0 0 0 22px !important;
		line-height: 1;
		letter-spacing: 1px;
	}
	
	#gNavi li a:after {
		display: none;
	}
	
	
	#gNavi li.nav a {
		color: #d48d4e;
		font-size: 1.15rem;
	}

	#gNavi .sp_htel {
		border-top: 1px solid #e2c587;
		margin-left: 12px;
		width: 160px;
		padding: 20px 10px;
	}	
	#gNavi li span {
		display: block;
		font-size: 95%;
		color: #c59f55;
	}
	#gNavi .sp_htel a{
		position: relative;
		right: 22px;
		top: 15px;
		font-size: 110%;
		color: #4d3f23;
		text-decoration: none;
		border: 1px solid r_ed;
	}	




	#gNavi .sns {
		width: 100%;
		border: 1px solid r_ed;
	}
	
	#gNavi .sns li{
		border: 1px solid r_ed;
		display: inline-block;
	}
	#gNavi .sns li a img{
		border: 2px solid b_lue;
		width: 25px;
	}

	#gNavi .sns li:nth-child(2) a img{
		width: 15px;
		
	}
}

@media all and (min-width: 751px) and (max-width: 1000px) {
	#gNavi {
		margin: 0;
		left: 155px;
	}
}










/*------------------------------------------------------------
	mainBox
------------------------------------------------------------*/
#main .mainBox {
	position: relative;
	z-index: 9;
}

/*------------------------------------------------------------
	mainVisual
------------------------------------------------------------*/
.mainVisual {
	min-height: 254px;
	text-align: center;
	position: relative;
	background: url(../../img/common/main_visual_bg.png) repeat center center;
	/*box-shadow: 0 1px 1px inset rgba(0,0,0,0.03);*/
	border-top: 3px solid #f6f6f6;
	border-bottom: 5px solid #fbfbf9;

}

.mainVisual h2 {
	border: 1px solid r_ed;
	padding-top: 15px;
	height: 194px;
	color: #123850;
	font-size: 2.05rem;
	font-weight: normal;
	text-align: center;
	line-height: 1.85;
	letter-spacing: -1px;
	position: relative;
	margin: 0 auto;
	writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
}

.todoke h2 {
	border: 1px solid r_ed;
	padding-top: 45px;
	height: 194px;
	color: #123850;
	font-size: 2.05rem;
	font-weight: normal;
	text-align: left;
	line-height: 1.85;
	letter-spacing: -1px;
	position: relative;
	margin: 0 auto;
	writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
    font-family: 'Shippori Mincho', serif;
}

@media all and (max-width: 750px) {
	.mainVisual {
		padding: 0;
		width: 100vw;
		height: 220px;
		background: url(../../img/common/main_visual_bg.png) repeat-x center top;
		text-align: center;
		border-bottom: 3px solid #fbfbf9;
		box-shadow: 0 1px 1px inset rgba(0,0,0,0.07);
	}
	
	.mainVisual h2 {
		border: 1px solid b_lue;
		padding-top: 5px;
		height: 220px;
		color: #123850;
		font-size: 2.05rem;
		font-weight: normal;
		text-align: center;
		line-height: 1.85;
		letter-spacing: 1px;
		position: relative;
		margin: 0 auto;
		writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		vertical-align: top;
	}


	.mainVisual h2 span{
		border: 1px solid r_ed;
		margin: 0 auto;
		margin-top: -30px;
		vertical-align: top;
		letter-spacing: -1px;
	}
}

/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
#main .headLine01 {
	height: 150px;
	text-align: center;
	position: relative;
}

#main .headLine01 > span {
	height: 170px;
	color: #123850;
	font-size: 1.7rem;
	font-weight: normal;
	text-align: left;
	line-height: 1.4;
	position: absolute;
	letter-spacing: 0.02rem;
	left: 50%;
	top: 0;
	writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	direction: ltr;
	transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
}

#main .headLine01 span span {
	padding-left: 7px;
	position: relative;
	display: inline-block;
}

#main .headLine01 span span:before {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 14px;
	border-left: 2px solid #ece1cd;
	content: "";
}

@media all and (max-width: 750px) {
	#main .headLine01 {
		height: 120px;
	}
	
	#main .headLine01 > span {
		font-size: 1.8rem;
		height: 120px;
		letter-spacing: 0;
	}
	
	#main .headLine01 span span span {
		padding: 2px 0 0 3px;
	}
}

/*------------------------------------------------------------
	comJs
------------------------------------------------------------*/
@media all and (min-width: 751px) {
	#main .comJs:after {
		width: 0;
		bottom: 0;
		border-bottom: 1px solid #d4ad7b;
		display: block;
		transition: all .6s ease;
		-webkit-transition: all .6s ease;
		content: "";
	}
	
	#main .comJs:hover:after {
		width: 100%;
	}

}














/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/
#gFooter {
	box-shadow: inset 0 0px rgba(0,0,0,0);
	border: 2px solid r_ed;
	background: #f9f9f9;
	padding: 0;
}



#gFooter .fTxt {
	position: relative;
	width: 570px;
	margin: 0 auto 0;
	padding-top: 110px;
	border: 1px solid r_ed;
	border-bottom: 1px solid #CEC9C6;
}

#gFooter .fTxt ul {
	position: relative;
	border: 1px solid b_lue;
}

#gFooter .fTxt a {
	color: #44413d;
	font-size: 1.4rem;
	display: block;
	line-height: 3.54;
	letter-spacing: 2px;
	font-family: 'aoz';
	transition: 1s;
}

#gFooter .fTxt a:hover {
	color: #ad8630;
}

#gFooter .fTxt .logo {
	margin: 50px 0 70px -30px;
	width: 130px;
}


#gFooter .address {
	width: 570px;
	margin: 70px auto 0;
	border: 1px solid r_ed;
	line-height: 2.5em;
	letter-spacing: 1px;
}

#gFooter .sns {
	width: 570px;
	margin: 40px auto 0;
	border: 1px solid r_ed;
}

#gFooter .sns li{
	width: 27px;
	margin-right: 13px;
	border: 1px solid r_ed;
	display: inline-block;
	transition: .6s;
}
#gFooter .sns li:hover{
	opacity: .6;
}
#gFooter .sns li:nth-child(2){
	width: 14px;
}

#gFooter .copyright {
	color: #beb49c;
	font-size: 1.164rem;
	box-shadow: 0 2px 2px rgba(0,0,0,0.05);
	width: 100%;
	height: 60px;
	background: #fff;
}

#gFooter .copyright .inner{
	width: 570px;
	margin: 70px auto 0;
	border: 1px solid r_ed;
	padding-top: 10px;
}


@media all and (max-width: 750px) {
	#gFooter {
		box-shadow: none;
	}

	#gFooter .fTxt {
		position: relative;
		width: 70%;
		margin: 60px auto 0;
		padding-top: 60px;
		border-bottom: 1px solid #CEC9C6;
	}
	
	#gFooter .fTxt ul {
		position: relative;
		border: 1px solid b_lue;
	}
	
	#gFooter .fTxt a {
		color: #44413d;
		font-size: 1.2rem;
	}
		
	#gFooter .fTxt .logo {
		margin: 30px 0 55px -20px;
		width: 100px;
	}
	
	#gFooter .address {
		width: 70%;
		margin: 50px auto 0;
		border: 1px solid r_ed;
		line-height: 2.5em;
		letter-spacing: 1px;
	}
	
	#gFooter .sns {
		width: 100%;
		margin: 25px auto 40px;
		border: 1px solid r_ed;
	}
	
	#gFooter .sns li{
		width: 23px;
		margin-right: 13px;
		border: 1px solid r_ed;
		display: inline-block;
		transition: .6s;
	}
	#gFooter .sns li:hover{
		opacity: .6;
	}
	#gFooter .sns li:nth-child(2){
		width: 12px;
	}
	
	#gFooter .copyright {
		color: #beb49c;
		font-size: 1.164rem;
		box-shadow: 0 2px 2px rgba(0,0,0,0.05);
		width: 100%;
		height: 60px;
		background: #fff;
	}
	
	#gFooter .copyright .inner{
		width: 70%;
		margin: 10px auto 0;
		border: 1px solid r_ed;
		padding-top: 7px;
		font-size: 90%;
	}
}