@charset "utf-8";

/*  Basic
----------------------------------------------- */
html { font-size: 62.5%; }
body {
	min-width: 320px;
	color: #231815;
	font-size: 1.6em;
	font-family: "Century Gothic", Futura, "游ゴシック", YuGothic, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, sans-serif;
	}
img { border: 0; vertical-align: top; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/*  Layout
----------------------------------------------- */
.inner {
	width: 95%;
	max-width: 940px;
	margin: 0 auto;
	}
section {
	padding: 0 0 50px;
	background: url(../images/bg_main.jpg) repeat;
	}
.mb-10 { margin-bottom: 10px; }
.mb-30 { margin-bottom: 30px; }
.mb-50 { margin-bottom: 50px; }
.pb-10 { padding-bottom: 10px; }
.pb-30 { padding-bottom: 30px; }
.ptb-30 {
	padding-top: 30px;
	padding-bottom: 30px;
	}

@media only screen and (max-width: 768px) {
	.view-pc { display: none !important; }
	}
@media only screen and (min-width: 769px) {
	.view-sp { display: none !important; }
	}

/*  Common
----------------------------------------------- */
h1 { width: 100%; }
section h2,
section h3 {
	margin: 0 0 20px;
	color: #fff;
	font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	text-align: center;
	background: #9f1f24;
	}
section h2 {
	padding: 30px 0;
	font-size: 36px;
	font-size: 3.6rem;
	border-top: 15px solid #928745;
	border-bottom: 15px solid #928745;
	}
section h3 {
	padding: 20px 0;
	font-size: 24px;
	font-size: 2.4rem;
	border-top: 10px solid #928745;
	border-bottom: 10px solid #928745;
	}
@media only screen and (min-width: 481px) {
	section h2 { font-size: 7.5vw; }
	section h3 { font-size: 5vw; }
	}
@media only screen and (min-width: 769px) {
	.feature {
		font-size: 24px;
		font-size: 2.4rem;
		}
	}
@media only screen and (min-width: 1024px) {
	section h2 {
		font-size: 60px;
		font-size: 6rem;
		}
	section h3 {
		font-size: 40px;
		font-size: 4rem;
		}
	}
section p { padding-top: 10px; }

/*  Header
----------------------------------------------- */
header { padding: 20px 0 0; }
.tel {
	padding: 45px 0 0;
	font-size: 20px;
	font-size: 2rem;
	font-family: "Sawarabi Mincho";
	text-align: right;
	background: url(../images/bg_tel.png) no-repeat right top;
	background-size: 270px auto;
	}
.heading .tel {
	padding: 0;
	background: none;
	}
.heading .tel ul {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 20px 1fr;
	grid-template-columns: repeat(2,1fr);
	grid-column-gap: 20px;
	-moz-columns: auto 2;
	-moz-column-gap: 20px;
	width: 100%;
	margin: 10px 0;
	}
.heading .tel ul li:nth-child(2n+1) { -ms-grid-column: 1; }
.heading .tel ul li:nth-child(2n+0) { -ms-grid-column: 3; }
.lead {
	min-height: 40px;
	margin: 20px 0 0;
	padding: 0 0 40px;
	font-size: 17px;
	font-size: 1.7rem;
	border-bottom: 1px solid #231815;
	background: url(../images/bg_shitsunaihaka.png) no-repeat right bottom 3px;
	background-size: 140px auto;
	}
@media only screen and (min-width: 481px) {
	.heading,
	footer .inner {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		}
	.heading h1,
	.logo { width: 46%; }
	.tel { width: 48%; }
	.heading .tel ul { margin: 0 0 10px; }
	.lead {
		width: 100%;
		padding: 0 130px 0 0;
		}
	}
@media only screen and (min-width: 769px) {
	.heading {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 20px 270px;
		grid-template-columns: 1fr 270px;
		-ms-grid-rows: 1fr 20px 1fr;
		grid-template-rows: 1fr;
		grid-gap: 20px 20px;
		-moz-columns: 1fr 270px;
		-moz-column-gap: 20px;
		}
	.heading div:nth-child(2n+1) { -ms-grid-column: 1; }
	.heading div:nth-child(2n+0) { -ms-grid-column: 3; }
	.heading div:nth-child(-n+2) { -ms-grid-row: 1; }
	.heading div:nth-child(n+3):nth-child(-n+4) { -ms-grid-row: 3; }
	.heading h1,
	.heading .tel,
	.heading .lead { width: auto; }
	.heading .tel {
		padding: 45px 0 0;
		background: url(../images/bg_tel.png) no-repeat 0 0;
		background-size: 270px auto;
		}
	}
@media only screen and (min-width: 1024px) {
	.heading {
		-webkit-align-items: center;
		align-items: center;
		}
	.heading .lead {
		-webkit-grid-column: 1 / 3;
		grid-column: 1 / 3;
		min-height: 37px;
		}
	.heading .contact {
		-webkit-grid-column: 3 / 4;
		grid-column: 3 / 4;
		-webkit-grid-row: 1 / 3;
		grid-row: 1 / 3;
		}
	}
@media only screen and (max-width: 1023px) {
	.lead span {
		display: block;
		padding: 3px 0 0;
		}
	}
.place {
	padding: 52.5% 0 0;
	color: #fff;
	text-align: center;
	background: url(../images/img_header.jpg) no-repeat 0 0;
	background-size: contain;
	}
.place p { padding: 10px 0; }
.place p:first-child { background: #3b853c; }
.place p:nth-child(2) { background: #1e7a51; }
@media only screen and (min-width: 481px) {
	.place { font-size: 3.3vw; }
	}
@media only screen and (min-width: 1024px) {
	.place {
		font-size: 30px;
		font-size: 3rem;
		}
	}

/*  Main
----------------------------------------------- */
.map {
	padding: 0 0 100%;
	background: url(../images/img_map_sp.gif) no-repeat center bottom;
	background-size: contain;
	}
.map strong {
	font-size: 24px;
	font-size: 2.4rem;
	}
.map p {
	padding: 15px 0 0;
	text-align: center;
	}
@media only screen and (min-width: 641px) {
	.map {
		position: relative;
		height: 0;
		padding: 40% 0 0 calc(42% + 20px);
		background: url(../images/img_map_pc.gif) no-repeat 0 0;
		background-size: 42% auto;
		}
	.map strong {
		position: absolute;
		top: 0;
		left: calc(42% + 20px);
		}
	.map p {
		position: absolute;
		bottom: 10px;
		left: calc(42% + 20px);
		text-align: left;
		}
	}
@media only screen and (min-width: 769px) {
	.map p { bottom: 20px; }
	}
@media only screen and (min-width: 1024px) {
	.map p { bottom: 40px; }
	}
.catch {
	font-size: 5.625vw;
	font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	text-align: center;
	}
@media only screen and (min-width: 1024px) {
	.catch {
		font-size: 50px;
		font-size: 5rem;
		}
	}
.note {
	padding: 0 0 20px;
	color: #c11920;
	font-size: 30px;
	font-size: 3rem;
	font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	text-align: center;
	}
.floor { padding: 20px 0 0; }
@media only screen and (min-width: 481px) {
	.floor {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 40px 1fr;
		grid-template-columns: repeat(2,1fr);
		grid-column-gap: 40px;
		-moz-columns: 2 auto;
		-moz-column-gap: 40px;
		}
	.floor div:nth-child(2n+1) { -ms-grid-column: 1; }
	.floor div:nth-child(2n+0) { -ms-grid-column: 3; }
	}
.join {
	padding: 0 0 30px;
	color: #fff;
	background: #a30005;
	}
.join h2 {
	margin: 0 0 20px;
	padding: 20px 0;
	color: #fff;
	font-size: 24px;
	font-size: 2.4rem;
	font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	text-align: center;
	border-bottom: 12px solid #7f4f21;
	background: #928745;
	}
@media only screen and (min-width: 481px) {
	.join h2 {
		font-size: 36px;
		font-size: 3.6rem;
		}
	}
@media only screen and (min-width: 769px) {
	.join h2 span {
		display: block;
		width: 720px;
		margin: 0 auto;
		background: url(../images/bg_title_join.png) no-repeat center center;
		background-size: 100% auto;
		}
	}
@media only screen and (min-width: 1024px) {
	.join h2 {
		font-size: 46px;
		font-size: 4.6rem;
		}
	.join h2 span { width: 972px; }
	}

/*  Footer
----------------------------------------------- */
footer {
	padding: 30px 0;
	border-bottom: 30px solid #928745;
	background: #e9eaea;
	}
footer h3,
.overlay {
	position: relative;
	padding: 20px 0;
	}
footer h3::after,
.overlay::after {
	content: "";
	position: absolute;
	bottom: -110px;
	display: block;
	width: 100%;
	height: 100px;
	margin: 0 auto 10px;
	background: url(../images/bg_arrow.png) no-repeat center bottom;
	}
footer h3 {
	margin: 100px auto;
	color: #fff;
	font-size: 28px;
	font-size: 2.8rem;
	font-family:"ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	text-align: center;
	background: #928745;
	}
.overlay {
	width: 100%;
	max-width: 940px;
	margin: 0 auto;
	font-size: 24px;
	font-size: 2.4rem;
	text-align: center;
	border: 4px solid #32694d;
	background: #fff;
	}
@media only screen and (max-width: 768px) {
	footer h3 span {
		display: block;
		padding: 3px 0 0;
		}
	}
footer ul {
	width: 245px;
	margin: 0 auto 50px;
	padding: 0;
	}
footer ul li { margin: 0 0 10px; }
.btn {
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	vertical-align: middle;
	padding: 1rem 4rem;
	font-size: 30px;
	font-size: 3rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	line-height: 1.5;
	letter-spacing: 0.1em;
	border-radius: 0.5rem;
	}
.btn:hover { text-decoration: none; }
.btn--red {
	color: #fff;
	background-color: #d20010;
	}
.btn--red.btn--cubic { border-bottom: 5px solid #9f000c; }
.btn--red.btn--cubic:hover {
	margin-top: 3px;
	border-bottom: 2px solid #9f000c;
	}
.btn--radius { border-radius: 100vh; }
.fas {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	}
.fa-angle-right:before { content: ">"; }
.fa-position-right {
	position: absolute;
	top: calc(50% - .5em);
	right: 1rem;
	}
@media only screen and (min-width: 641px) {
	footer ul {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 40px 1fr;
		grid-template-columns: repeat(2,1fr);
		grid-column-gap: 40px;
		-moz-columns: 2 auto;
		-moz-column-gap: 40px;
		width: 596px;
		margin: 0 auto 50px;
		}
	footer ul li { margin: 0 ; }
	footer ul li:nth-child(2n+1) { -ms-grid-column: 1; }
	footer ul li:nth-child(2n+0) { -ms-grid-column: 3; }
	}

/*  Slide show
----------------------------------------------- */
@media only screen and (max-width: 1023px) {
	#topGallery {
		width: 100% !important;
		height: 100px!important;
		padding: 54% 0 0;
		}
	#topGallery .panel {
		width: 100% !important;
		height: auto !important;
		}
	#topGallery div:first-child { top: calc(54% + 90px) !important; }
	#topGallery #pointer {
		 top: calc(54% + 105px) !important;
		 left: 0 !important;
		}
	.strip_wrapper {
		width: 100% !important;
		top: calc(54% + 100px) !important;
		left: 0 !important;
		}
	}
@media only screen and (max-width: 640px) {
	#topGallery div:first-child { top: calc(54% + 80px) !important; }
	#topGallery #pointer { top: calc(54% + 95px) !important; }
	.strip_wrapper { top: calc(54% + 90px) !important; }
	}
@media only screen and (min-width: 1024px) {
	#topGallery #pointer {
		top: 471px !important;
		left: 25px !important;
		}
	.strip_wrapper { top: 464px !important; }
	}
