@charset "UTF-8";
/* --------------------------------------------------------

=1 html5 reset css
=2 common

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

1) html5 reset css

------------------------------------------------------- */
/* reset
------------------------------------------ */
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, q, pre, table, caption, colgroup, col, tbody, thead, tfoot, tr, th, td, ul, ol, li, dl, dt, dd, form, fieldset, legend, label, span, a, img, em, ins, del, cite, abbr, sup, sub, dfn, code, var, samp, kbd, object, script, noscript, style, iframe, embed, param, map, area,
menu, hr, address, small, strong, i, b,
article, aside, figure, footer, header, hgroup, nav, section, figcaption, time, video, audio, mark, ruby, rt, rp, bdo, source, canvas, details, summary, command,
datalist, keygen, output, progress, meter, main {
		margin: 0;
		padding: 0;
		font-size: 100%;
		font-weight: normal;
}

address, article, aside, figure, figcaption, footer, header, hgroup, hr, legend, menu, nav, section, summary {
		display: block;
}

li {
		list-style-type: none;
}

a img {
		border: none;
		margin-top: 20px;
		max-width: 100%;
		height: auto;
}

img {
		vertical-align: bottom;
}

address {
		font-style: normal;
}

[hidden] {
		display: none;
}

.hidden {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
}

/*--------------------------------------------------------------
# ビューポイントごと表示非表示
-------------------------------------------------------------- */
.off1200,
.off1170,
.off1100,
.off991,
.off850,
.off768,
.off640,
.off480,
.off375,
.off360,
.off320 {
		display: block !important;
}

.on1200,
.on1170,
.on1100,
.on991,
.on850,
.on768,
.on640,
.on480,
.on375,
.on360,
.on320 {
		display: none !important;
}

@media (max-width: 1200px) {
		.off1200 {
				display: none !important;
		}
		.on1200 {
				display: block !important;
		}
}

@media (max-width: 1170px) {
		.off1170 {
				display: none !important;
		}
		.on1170 {
				display: block !important;
		}
}

@media (max-width: 1100px) {
		.off1100 {
				display: none !important;
		}
		.on1100 {
				display: block !important;
		}
}

@media (max-width: 991px) {
		.off991 {
				display: none !important;
		}
		.on991 {
				display: block !important;
		}
}

@media (max-width: 850px) {
		.off850 {
				display: none !important;
		}
		.on850 {
				display: block !important;
		}
}

@media (max-width: 768px) {
		.off768 {
				display: none !important;
		}
		.on768 {
				display: block !important;
		}
}

@media (max-width: 640px) {
		.off640 {
				display: none !important;
		}
		.on640 {
				display: block !important;
		}
}

@media (max-width: 480px) {
		.off480 {
				display: none !important;
		}
		.on480 {
				display: block !important;
		}
}

@media (max-width: 375px) {
		.off375 {
				display: none !important;
		}
		.on375 {
				display: block !important;
		}
}

@media (max-width: 360px) {
		.off360 {
				display: none !important;
		}
		.on360 {
				display: block !important;
		}
}

@media (max-width: 320px) {
		.off320 {
				display: none !important;
		}
		.on320 {
				display: block !important;
		}
}

html.active {
		overflow: hidden;
}

/* standard
------------------------------------------ */
body {
		line-height: 2.0;
		color: #222426;
		font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
		border-top: 5px solid #044f2e;
}

p, table {
		font-size: 14px;
}

a {
		text-decoration: none;
}

a:link {
		color: #115F32;
}

a:visited {
		color: #663d89;
}

/* clear fix */
.clear,
section {
		clear: both;
}

.clearfix:after,
section:after {
		/* for New Browser */
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
}

.clearfix,
section {
		display: inline-block;
		/* for IE */
}

/* Hides from IE-mac \*/
* html .clearfix,
* html section {
		height: 1%;
}

.clearfix,
section {
		display: block;
}

/* End hide from IE-mac */
/* -------------------------------------------------------

2) common

------------------------------------------------------- */
/* サイトタイトル */
.header-site h1 {
		padding: 40px 0;
		text-align: center;
}

.header-site h1 a:hover img {
		opacity: 0.8;
		filter: alpha(opacity=80);
		-ms-filter: "alpha(opacity=80)";
}

/* ナビゲーション */
.header {
		background-color: #115F32;
}

.header-inner {
		background-color: #FFFFFF;
		border-top: 1px solid #a79a92;
		border-bottom: 2px solid #a79a92;
}

.menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
}

.menu li a {
		display: block;
		padding: 12px;
		color: #115F32;
		font-size: 14px;
		font-weight: 800;
		text-align: center;
		text-decoration: none;
}

.menu li a:hover {
		color: #FFFFFF;
		background-color: #a79a92;
}

.menu li {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
}

.menu li i {
		padding-left: 5px;
}

/* footer */
.footer-inner {
		width: 100%;
		padding: 40px 0 20px;
		font-size: 14px;
		text-align: center;
		color: #FFFFFF;
		background: url(../img/footer_pattern.png) repeat-x left bottom;
}

.footer-inner h1 {
		font-size: 18px;
		margin-bottom: 10px;
}

.add {
		margin-bottom: 40px;
}

.copy {
		margin-top: 10px;
}

/* PAGE TOP */
.pagetop {
		padding: 5px 0;
		width: 100%;
		color: #FFF;
		background-color: #044f2e;
		text-align: center;
}

.pagetop a {
		display: block;
		opacity: 0.8;
}

.pagetop a:link, .pagetop a:hover, .pagetop a:visited {
		color: #FFF;
}

.pagetop i {
		display: block;
		font-size: 36px;
}

/* お問い合わせ */
.footer-inner h2 {
		margin: 0 auto;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
}

.tel_link {
		font-size: 36px;
}

.tel_link a:link {
		color: #FFF;
		text-decoration: underline;
}

.tel_time {
		margin-top: -8px;
		font-size: 12px;
}

.insta-link {
		margin-bottom: 30px;
}

.insta-link a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 290px;
		margin: auto;
		background: #fff;
		padding: 10px 0;
		position: relative;
		z-index: 1;
}

.insta-link a::after {
		background: #ed6e00;
		background: -moz-linear-gradient(-45deg, #ed6e00 0%, #f7005e 31%, #8900ce 100%);
		background: -webkit-linear-gradient(-45deg, #ed6e00 0%, #f7005e 31%, #8900ce 100%);
		background: linear-gradient(135deg, #ed6e00 0%, #f7005e 31%, #8900ce 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed6e00', endColorstr='#8900ce',GradientType=1 );
		content: "";
		width: 100%;
		height: 100%;
		padding: 2px;
		position: absolute;
		z-index: -1;
}

.insta-link a h2 {
		margin: 0 10px 0 0;
		color: #fff;
		font-weight: 300;
}

.insta-link a img {
		width: 50px;
		height: auto;
		margin: 0;
}

@media (hover: hover) {
		.insta-link a {
				/* :hoverが使える端末を想定 */
		}
		.insta-link a:hover {
				box-shadow: 0 0 20px #ef5c0e;
		}
}

@media (hover: none) {
		.insta-link a {
				/* :hoverが使えない端末を想定 */
		}
		.insta-link a:active {
				box-shadow: 0 0 20px #ef5c0e;
		}
}

/* ###################### 768px以下 ###################### */
@media screen and (max-width: 768px) {
		body {
				line-height: 1.6;
				border-top: 3px solid #044f2e;
		}
		p, table {
				font-size: 14px;
		}
		/* サイトタイトル */
		.header-site h1 {
				padding: 16px 0;
		}
		.header-site h1 img {
				width: 60%;
				margin-top: 0;
		}
		/* グローバルナビ */
		.menu li {
				width: 33.3333%;
		}
		.menu li.sp4 {
				width: 25%;
		}
		.menu li a {
				padding: 12px 0px;
				font-size: 13px;
		}
		.menu-border {
				border-bottom: 1px solid #eaeae7;
		}
		.menu-borderR {
				border-right: 1px solid #eaeae7;
		}
		/* ナビゲーションのメニュー */
		#nav_wrapper {
				/*スマホナビ*/
		}
		#nav_wrapper #nav_hbg {
				cursor: pointer;
				z-index: 21;
				position: fixed;
				left: 5px;
				top: 20px;
		}
		#nav_wrapper #nav_hbg div {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				align-content: space-around;
				width: 50px;
				height: 50px;
				padding: 5px;
				box-sizing: border-box;
				z-index: 99;
				margin: 0 5px;
				background: rgba(17, 95, 50, 0.2);
		}
		#nav_wrapper #nav_hbg div span {
				width: 100%;
				height: 2px;
				background-color: #115f32;
				transition: opacity 0.1s ease, transform 0.3s ease-in-out;
		}
		#nav_wrapper .clicked span:nth-child(1) {
				transform: translateY(13px) rotate(135deg);
				background-color: #fff !important;
		}
		#nav_wrapper .clicked span:nth-child(2) {
				opacity: 0;
		}
		#nav_wrapper .clicked span:nth-child(3) {
				transform: translateY(-13px) rotate(-135deg);
				background-color: #fff !important;
		}
		#nav_wrapper #nav_menu {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				opacity: 0;
				visibility: hidden;
				transition: all 0.4s ease;
				z-index: 20;
				background-color: #fff;
		}
		#nav_wrapper #nav_menu.opened {
				visibility: visible;
				opacity: 1;
		}
		#nav_wrapper #nav_menu .header-site {
				background: #115f32;
				border-top: 3px solid #044f2e;
		}
		#nav_wrapper #nav_menu .menu-menu-1-container {
				height: 100%;
				overflow-y: auto;
				overflow-x: hidden;
				-webkit-overflow-scrolling: touch;
				background: #fff;
		}
		#nav_wrapper #nav_menu ul#primary-menu {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				padding: 10px 5% 2rem;
				font-size: 16px;
				margin: 0;
				list-style: none;
				text-align: center;
				box-sizing: border-box;
		}
}

@media screen and (max-width: 768px) and (max-width: 480px) {
		#nav_wrapper #nav_menu ul#primary-menu {
				padding: 10px 3% 1rem;
		}
}

@media screen and (max-width: 768px) {
		#nav_wrapper #nav_menu ul#primary-menu li.menu-item {
				border-bottom: dashed 1px #ddd;
				width: 48%;
		}
		#nav_wrapper #nav_menu ul#primary-menu li.menu-item > a {
				color: #232323;
				font-size: 18px;
				font-weight: 500;
				width: 100%;
				padding: 20px 10px;
				display: block;
		}
}

@media screen and (max-width: 768px) and (max-width: 375px) {
		#nav_wrapper #nav_menu ul#primary-menu li.menu-item > a {
				font-size: 16px;
		}
}

@media screen and (max-width: 768px) and (max-width: 360px) {
		#nav_wrapper #nav_menu ul#primary-menu li.menu-item > a {
				font-size: 14px;
		}
}

@media screen and (max-width: 768px) {
		#nav_wrapper #nav_menu ul#primary-menu li.menu-item > a:hover {
				background: rgba(221, 221, 221, 0.2);
		}
		#nav_wrapper #nav_menu ul.bana {
				padding: 0 1% 5rem;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				box-sizing: border-box;
		}
		#nav_wrapper #nav_menu ul.bana li {
				width: 100%;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 3px 0;
				box-sizing: border-box;
		}
		#nav_wrapper #nav_menu ul.bana li.uranai {
				background: #dd2973;
		}
		#nav_wrapper #nav_menu ul.bana li.insta {
				width: 50%;
				padding: 10px 0 20px;
		}
		#nav_wrapper #nav_menu ul.bana li.insta a img {
				max-width: 60px;
		}
		#nav_wrapper #nav_menu ul.bana li.youtube {
				width: 50%;
				padding: 10px 0 20px;
		}
		#nav_wrapper #nav_menu ul.bana li.youtube a img {
				border-radius: 20%;
				max-width: 60px;
		}
		#nav_wrapper #nav_menu ul.bana li a {
				display: block;
				width: 100%;
				height: auto;
				text-align: center;
		}
		#nav_wrapper #nav_menu ul.bana li a img {
				margin: 0;
		}
		#nav_wrapper #nav_menu ul.bana li a:hover {
				opacity: 0.8;
		}
		/* メインビジュアル下　余白 */
		#main #mainCarousel .owl-carusel-item img {
				margin-bottom: 20px;
		}
		/* コンテンツ上下余白 */
		#main, #news, .schedule, .attention {
				margin-bottom: 60px;
		}
		/* お問い合わせ */
		.footer-inner h1 {
				font-size: 16px;
				margin-bottom: 10px;
		}
		.tel_time {
				font-size: 14px;
				padding: 0 20px;
		}
}

/* ###################### 375px以下 ###################### */
@media screen and (max-width: 375px) {
		.menu li a {
				padding: 10px 0;
				font-size: 12px;
		}
}
