/*=============================================
 * body
 *=============================================*/

body {
	color: #634e3e;
	font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ明朝体 Pro", "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height: 35px;
	letter-spacing: 2.8px;
	background-color: #FFF;
	min-width: inherit;
	min-height: inherit;
	max-height: 100%;
	background: url(../img/shared/bg.jpg) repeat;
}

* {
	font-style: italic !important;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/

.fnt-mincho {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.fnt-meiryo {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.fnt-gothic {
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

/*=============================================
 * .fnt - customs
 *=============================================*/

.fnt-mincho {}

.fnt-meiryo {}

.fnt-gothic {}

.fnt-garamond {}

/*=============================================
 * <main>
 *=============================================*/

main {
	clear: both;
	width: 100%;
	position: relative;
	overflow: hidden;
}

.wrap {
	width: 1000px;
	position: relative;
}

#sec1, #sec2, #sec3, #sec4 {
	position: relative;
}

h2 {
	position: relative;
	z-index: 1;
}

/*=============================================
 * <header>
 *=============================================*/

header {
	position: relative;
	color: #fff;
}

header h1 {
	position: absolute;
	z-index: 1;
	left: 30px;
	top: 25px;
	font-size: 12px;
}

header .invoice {
	position: absolute;
	z-index: 1;
	left: 30px;
	top: 35px;
	font-size: 12px;
}


header nav {}


header .deco1 {
	position: absolute;
    left: -4px;
    top: -4px;
    z-index: 1;
}

#belt .wrap {
	height: auto;
	width: 806px;
}

#belt {
	background: url(../img/shared/h_line1.jpg) repeat-x center, #ebe3d1;
	background-position: center bottom;
	padding-top: 24px;
	padding-bottom: 33px;
}




#belt a {
	margin-right: 5px;
}

#belt a:last-of-type {
	margin-right: 0;
}

#belt .sp_tel {
	float: left;
	width: 40%;
	border-right: 1px dashed #59240f;
}

/*=============================================
 * navigation
 *=============================================*/

.nav--opened {
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

header .menu_toggle li {
	border: none;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
}

header .menu_toggle ul li a {
	color: #270900;
	display: block;
	position: relative;
	text-decoration: none;
	font-weight: bold;
	font-size: 20px;
	font-style: normal !important;
}

header .menu_toggle ul li a:after {
	content: '\f105';
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: none;
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	text-align: center;
	font-variant: normal;
	text-transform: none;
	line-height: 1em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	right: 12px;
	top: 50%;
	margin-top: -7px;
}

header .menu_toggle.nav-style01 {
	top: 0px;
	right: -100%;
	display: block;
	transition: all 0.5s ease 0s;
}

.nav--opened .menu_toggle.nav-style01 {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	right: 0;
}

.hamburger {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	background: #ebe3d1;
	padding: 20px;
}

.hamburger.fixed {
	top: 12px;
	transition: .3s;
}

.hamburger.fixed:before {
	position: absolute;
	content: "";
	background: url(../../img/shared/sp_menu_bg.png) no-repeat;
	width: 175px;
	height: 118px;
	right: -12px;
	top: -14px;
	opacity: 0;
	transition: .3s;
}

.nav--opened .hamburger.fixed:before {
	opacity: 0;
}

.hamburger.fixed:before {
	opacity: 1;
	transition: .3s;
}

header .toggle-link {
	color: #000;
	font-size: 16px;
	line-height: 16px;
	display: block;
	padding: 15px 0 15px 10px;
}

header .toggle-link:after {
	color: #000 !important;
	left: 30% !important;
}

header .toggle-main {
	padding: 0 10px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	height: 2px;
	background-color: #3e251f !important;
	width: 34px;
}

.hamburger-box {
	width: 32px;
	height: 20px;
	display: inline-block;
	position: relative;
	top: 6px;
}

header .menu_toggle {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	overflow-y: auto;
	z-index: 9;
	visibility: hidden;
	padding-top: 74px;
	height: 0;
	transition: 1.2s;
	opacity: 1;
}

.nav--opened header .menu_toggle {
	opacity: 1;
	transition: 1.2s;
	visibility: visible;
	height: 100vh;
	/* background: rgba(235, 227, 209, 0.5) */
}

header .close_btn {
	width: 100%;
	padding-top: 1px;
	cursor: pointer;
	color: #270900;
	text-decoration: none;
	font-size: 18px;
	display: block;
	letter-spacing: 0.1em;
	line-height: 3;
	text-align: center;
	background-color: #000;
	z-index: 100;
	background: rgba(235, 227, 209, 1);
	font-weight: bold;
}

header .menu_toggle ul {
	padding: 0;
	list-style-type: none;
	list-style-position: outside;
}

header .menu_toggle li {
	position: relative;
	padding: 0 3%;
	clear: both;
	line-height: 35px;
	line-height: 3;
	border-bottom: 1px dashed #270900;
	background: rgba(235, 227, 209, 0.8);
}

.menu_toggle .prepare:after {
	font-style: normal;
	text-align: left;
	padding-left: 3%;
}

header .menu_toggle li.active {
	background: rgba(235, 227, 209, 1)
}

header .group {
	margin-left: 3vw;
}

header .group span img {
	width: 7vw;
	display: inline-block;
	margin-right: 3vw;
}

.hamburger:hover {
	opacity: 1;
}

header .menu_toggle ul li.social a {
	display: inline-block;
}

header .social a:before {
	display: none;
}

header a:hover {
	opacity: 0.8;
}

header .nav-fixed.fixed {
	position: fixed;
	top: 0;
	bottom: auto;
}

/*=============================================
 * key
 *=============================================*/

#key {
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	min-height: 900px;
	position: relative;
	left: 0;
	top: 0;
	right: 0;
}

#key ul {
	min-height: inherit;
}

#key li {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	min-height: inherit;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#key .wrap {
	height: 900px;
	width:100%;
	 display: flex;
 -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
 flex-wrap: wrap;
}
#key .item {
	width:33.33333%;
	position:relative;
	text-align: center;
	background-size: cover;
	padding-top:250px;
	
}
#key .group1{
	background: url("../img/index/key01.jpg") no-repeat center 0;
}
#key .group2{
	background: url("../img/index/key02.jpg") no-repeat center 0;
}
#key .group3{
	background: url("../img/index/key03.jpg") no-repeat center 0;
}

#key .group1:after {
	content: '';
	background-color: #a11b1b;
	width: 7px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
}
#key .group2:after {
	content: '';
	background-color: #085745;
	width: 7px;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
}


#key .group1 .tel1{
	/*padding-top:38px;*/
}
@media only screen and (max-width: 768px) {
.pc{
	display: none;
}
	
#key .wrap {
	height: 1200px;
	}
.sp{
	display:block ;
}
	#key .item {
	width:100%;
	padding-top:30px;
	height:370px;
}
	#key .item:first-child{
		height: 370px !important;
	}
#key .group1{
	background: url("../img/index/sp_key01.jpg") no-repeat center 0;
}
#key .group2{
	background: url("../img/index/sp_key02.jpg") no-repeat center 0;
}
#key .group3{
	background: url("../img/index/sp_key03.jpg") no-repeat center 0;
}
#key .group2:after {
	content: '';
	background-color: #a11b1b;
	width: 100%;
	height: 7px;
	position: absolute;
	right: 0;
	top: 0;
}
#key .group3:after {
	content: '';
	background-color: #085745;
	width: 100%;
	height: 7px;
	position: absolute;
	right: 0;
	top: 0;
}
	
}
/*=============================================
 * <section>
 *=============================================*/

section {}

/*=============================================
 * #socialbuttons
 *=============================================*/

#socialbuttons {
	margin: 0 -3%;
	box-sizing: border-box;
}

/*=============================================
 * <footer>
 *=============================================*/

footer {
	text-align: center;
}

#f_1 {
	padding-top: 71px;
	padding-bottom: 73px;
	position: relative;
	background: url(../img/shared/f_line-top.png) repeat-x center top, url(../img/shared/f_line-bot.jpg) repeat-x center bottom, url(../img/shared/f_bg.jpg) repeat;
}

footer .btn1 {
	margin-right: 35px;
	float: left;
}
footer .mt10{
	margin-top: 10px;
}

footer .btn1:last-child {
	/*margin-right: -10px;*/
	margin-right: 0;
}

footer #f_2 {
	background: #3e251f;
	padding: 51px 0 55px;
}

footer .logo {}

footer .tel {}

footer nav {}

#pagetop {
	right: 0;
	bottom: 0;
}

/*=============================================
 * copyright
 *=============================================*/

address {
	font-size: 11px;
	color: #fff;
	letter-spacing: 1px;
}

address a{
 font-size: 10px;
 text-align: center;
 color: #FFF;
 display: block;
 text-decoration: none;
}

body.nav--opened, body.nav--opened *, body.nav--opened *:hover, body.nav--opened *:focus, body.nav--opened *:active {
	/* cursor: none !important; */
	touch-action: none !important;
	/* pointer-events: none !important; */
}

body.nav--opened .hamburger, body.nav--opened #menu_toggle, body.nav--opened #menu_toggle * {
	touch-action: auto !important;
	pointer-events: visible !important;
}

@media only screen and (max-width: 1080px) {
	.hamburger {
		opacity: 1;
		visibility: visible;
	}
	header h1 {
		left: 10px;
		top: 5px;
	}
	header .wrap {
		width: auto;
	}
	header .logo1, header .tel1 {
		margin-left: 0;
	}
	header .group2 {
		right: 0.5vw;
	}
	header .group1 {
		position: relative;
	}

	#belt{
		padding-top: 0;
	}

	#belt a{
		margin-top: 32px;
	}
	footer .btn1 {
		float: left;
		width: 33.3%;
		margin: 0 auto;
		padding: 0 1%;
		box-sizing: border-box;
	}
}

@media only screen and (max-width: 768px) {
	header .logo1 {
		padding-top: 50px !important;
	}

	header .deco1{
		width: 83px;
	}
	header h1 {
		left: 23%;
    top: 2%;
    line-height: 2;
    padding-right: 22%;
    font-size: 10px;
    text-align: left;
	}
	header .wrap {
		height: auto;
	}
	header .group1, header .group2 {
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		padding: 0;
	}
	#key {
		min-height: 100%;
	}
	#belt {
		padding: 0;
		background-position: center top;
		padding-top: 8px;
	}
	footer #f_1 {
		padding: 10% 0;
	}
	footer .btn1 {
		float: none;
		width: 100%;
		margin: 0 0 5%;
	}
	footer .btn1:last-of-type {
		margin-bottom: 0;
	}
	footer .btn1:last-child{
		margin-top: 5%;
	}
	#pagetop {
		width: 70px;
		height: auto;
	}
	footer #f_2 {
		padding: 10% 0;
	}
}

@media only screen and (max-width: 480px) {
	#socialbuttons .social-line{
		width: 85px;
		overflow: hidden;
		background: #00b900;
		border-radius: 3px;
	}
}