@charset "utf-8";

/* Default Style */
body {
	position: relative;
	font-family: "Noto Sans JP","メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;
	font-weight: 400;
	font-size: 1.6rem; /*全体のフォントサイズは16pxとする*/
	background: #fff url("../images/cmn_bg_body.jpg") 50% 0 repeat-y fixed;
	background-size: 100% auto;
	line-height: 1;
	color:#3C210E;
}

/* Default Link Style */
a {
	text-decoration: none;
	color: inherit;
	transition: 0.2s;
}

a:hover {
	opacity: .8;
}

/* common */
body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
}

#wrapper {
	position: relative;
	width: 100%; /*全ての要素を包括する<div id"wrap">の幅を画面幅に設定する*/
	margin: 0 auto;
}

/* header ---------------------------------------- */
.siteTitle {
	position: relative;
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.siteTitle h1 {
	position: absolute;
	top: 0;
	left: 20px;
	width: 200px;
	padding: 40px 20px;
	background-color: #3C210E;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	-webkit-transition: all;
	transition: all;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform-origin: center top;
	-ms-transform-origin: center top;
	transform-origin: center top;
	z-index: 300;
}

.siteTitle.close h1 {
	opacity: 0;
	-webkit-transform: perspective(300px) rotateY(90deg);
	transform: perspective(300px) rotateX(90deg);
}

/* ヘッダー */
header {
	width: 100%;
	height: 100px;
	padding: 0 20px;
	transition: background-color .5s;
	z-index: 100;
}

header.scrHead {
	position: fixed;
	top: 0;
	background-color: #FFFFFF;
}

.header-inner {
	position:relative;
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	max-width:960px;
	height: 100px;
	margin:0 auto;
	padding: 0 0 13px;
}

/* サイトタイトル */
header .header-inner .siteLogo {
	opacity: 0;
	text-align: center;
	width: 200px;
	max-width: 200px;
	margin-right: 40px;
	padding: 0 20px;
	transition: all .4s;
}

header .header-inner .siteLogo img {
	width: auto;
	max-width: auto;
	max-height: 77px;
}

header.scrHead .header-inner .siteLogo {
	opacity: 1;
}

/* ヘッダーナビ */
#headNav {
	margin: 0 0 0 auto;
	width: calc(100% - 240px );
	max-width: 296px;
}

#menu-header-nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
}

#menu-header-nav ul.spNav,
#menu-header-nav li.spNav {
	display: none;
}

#menu-header-nav > li {
	flex-basis: 100%;
	max-width: 100%;
	background: url("../images/cmn_nav_separator.png") right center no-repeat;
}

#menu-header-nav li a {
}

#navBtn {
	display: none;
	position: absolute;
	top: 10px;
	right: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
}

#navBtn:hover {
}

#navBtn:focus {
	outline: none;
}

#navBtn img {
	width: 40px;
	height: 40px;
}

#navClose {
	display: none;
	position: absolute;
	top: 10px;
	right: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	cursor: pointer;
	z-index: 1;
}

#navClose img {
	width: 40px;
	height: 40px;
}

header .header-inner div#headLinks {
	max-width: 310px;
	margin: 0 0 0 36px;
	padding: 0;
}

header .header-inner div#headLinks ul {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

header .header-inner ul.site {
	margin: 0 0 12px;
}

header .header-inner ul.site li + li {
	margin: 0 0 0 12px;
}

header .header-inner ul.sns {
	margin: 0;
}

header .header-inner ul.sns li + li {
	margin: 0 0 0 12px;
}

/* footer ----------------------------------------- */
footer {
	width: 100%;
	margin: 0;
	padding: 0;
	background: linear-gradient(transparent 0%, transparent 60px, #3C210E 60px, #3C210E 100%);
	text-align: center;
	line-height: 1.5;
	color: #ffffff;
}

footer .footerInr {
	width: 100%;
	max-width: 1000px;
	margin: 100px auto 0;
	padding: 0 20px 20px;
}

footer .contact {
	position: relative;
	margin: 0 0 36px;
	padding: 50px 20px 66px;
	background: #ED9027;
}

footer .contact::before {
	content: "";
	display: block;
	width: 108px;
	height: 180px;
	background: url("../images/cmn_foot_illust.png") 0 0/contain no-repeat;
	position: absolute;
	top: -90px;
	left: 128px;
	z-index: -1;
}

footer .contact dt {
	margin: 0 0 1.5em;
	text-align: center;
	font-weight: 500;
	font-size: 2.2rem;
}

footer .contact dd {
	width: 100%;
	max-width: 546px;
	margin: 0 auto;
	padding: 15px;
	border-radius: 10px;
	background-color: #FFFFFF;
}

footer ul.footNav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	width: 100%;
	max-width: 386px;
	margin: 0 auto 60px;
	border-left: 1px solid #FFFFFF;
}

footer ul.footNav li {
	width: 100%;
	border-right: 1px solid #FFFFFF;
}

footer ul li a {
	display: block;
}

footer .copy {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
}

footer .copy dl {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	max-width: 600px;
	margin: 0 5% 0 0;
}

footer .copy dl dt {
	padding: 0 .5em 0 0;
	font-weight: 500;
	font-size: 2.5rem;
}

footer .copy dd {
}

footer .copy p {
	flex-shrink: 0;
	font-size: 1.4rem;
}

/* ------------------------------------------------ */

/* ページトップへ */
#page-top {
	position: fixed;
	bottom: 0;
	right: 20px;
}

/* 電話番号 */
a.callBtn {
	pointer-events: none;
}

/* content ---------------------------------------- */
.container {
}

.contents {
}

.contents main {
}

section {
}

/* ================================================ */
@media (max-width: 767px) {

.siteTitle {
	display: none;
}

header {
	position: fixed;
	top: 0;
	height: 60px;
	background-color: #3C210E;
}

.header-inner {
	height: 60px;
	padding: 0;
}

#headNav {
	height: auto;
	padding: 0;
}

header .header-inner .siteLogo {
	opacity: 1;
	height: 60px;
	margin-right: 0;
	padding: 5px 0;
	text-align: left;
}

header .header-inner .siteLogo img {
	width: auto;
	height: 50px;
}

/* ヘッダーナビ */
#navBtn {
	display:block;
}

#headNav.open #navBtn {
	display:none;
}

#header-nav {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 1;
	background: url("../images/cmn_bg_spnav.jpg") 50% 0 repeat-y fixed;
	background-size: 100% auto;
	transition: 0.2s;
}

#headNav.open #header-nav {
	height: 100%;
	opacity: 1;
}

#menu-header-nav {
	display: block;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#menu-header-nav > li{
	width: 100%;
	background: none;
	text-align: center;
	transform: none;
}

#menu-header-nav li.gnav {
	padding: 0 20px;
}

#menu-header-nav li.gnav > a {
	display: block;
	padding: 12px 0;
}

#menu-header-nav ul.spNav,
#menu-header-nav li.spNav {
	display: block;
}

#menu-header-nav li.spNav.homeBtn {
	height: 60px;
	margin: 0 0 16px;
	padding: 20px;
	text-align: left;
}

#menu-header-nav ul.spNav.genre {
	padding: 0 0 16px;
}

#menu-header-nav ul.spNav.genre a {
	display: block;
	padding: 12px 0;
	font-size: 1.7rem
}

#menu-header-nav li.spNav.snsBox {
	padding: 40px 20px 0;
}

#menu-header-nav li.spNav.snsBox > ul {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	padding: 16px 0 32px;
}

#menu-header-nav li.spNav.snsBox > ul li + li {
	margin-left: 32px;
}

#menu-header-nav li.spNav.telBox {
	padding: 0 20px 32px;
}

#menu-header-nav li.spNav.telBox dt {
	margin: 0 0 16px;
}

#menu-header-nav li a {
	font-size: 1.5rem;
	line-height: 1;
	text-align: center;
	transform: none;
}

#headNav.open #navClose {
	display:block;
}

header .header-inner div#headLinks {
	display: none;
}

/* footer ---------------------------------------- */

footer {
	background: linear-gradient(#3C210E 0%, #3C210E 60px, #3C210E 60px, #3C210E 100%);
}

footer .footerInr {
	padding: 0 0 20px;
}

footer .contact::before {
	width: 108px;
	height: 180px;
	top: -90px;
	left: 20px;
}

footer ul.footNav {
	max-width: 426px;
	margin: 0 auto 40px;
	padding: 0 20px;
	border-left: 0 solid #FFFFFF;
}

footer ul.footNav li:first-of-type {
	border-left: 1px solid #FFFFFF;
}

footer .copy {
	display: block;
	width: 100%;
	padding: 0 20px;
}

footer .copy dl {
	display: block;
	margin: 0 auto 1em;
	text-align: center;
}

footer .copy dl dt {
	margin-bottom: 5px;
}

/* content ---------------------------------------- */
.container {
	padding-top: 60px;
}

section {
}

/* 電話番号 */
a.callBtn {
	pointer-events: auto;
}

}

/* ================================================ */
@media (max-width: 479px) {
}