@charset "UTF-8";
/* CSS Document */
/* ===============================================================
Copyright (C) 5GRFX（ファイブグラフィックス） All Rights Reserved.
================================================================== */
/* ================= CSS Reset ================= */
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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {margin:0;	padding:0;	border:0; outline:0; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; line-height: 1.7}

a:link, a:visited, a:hover, a:active, a:focus {text-decoration:none;outline: none;}
a:hover {text-decoration:underline;}
/* ================= List Styles ================= */
ul {list-style:none;margin-top:0;}
ol {margin-bottom:0;margin-top:0;}
ol, ol li {list-style:decimal outside;}
/* ================= Deviders ================= */
.clear {content:".";display:block;clear:both;height:0;visibility:hidden;}
.none {display:none;}

body {margin: 0;}
	
/* ======= フォントのサイズ指定 ====== */
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
html{font-size: 62.5%;}
body {font-size: 1.4em; background-color: #eee; }


/* ##################### 768px以上 ########################### */
@media screen and  (min-width: 768px) {
 
.pc{display: block;}
.smh{display: none;}	
	
header { 
	width: 100%;
	height: 100px;
	background-color: #fff;
	z-index: 5;
	position: fixed;
	top: 0; 
	left: 0; 
	right: 0;  
	}
	
.box { 
	width: 100%;
	height: 70px;
	color: #fff;
	opacity: 0; 
	}
	
	
/*ロゴ*/
.logo {float: left; width: 220px;}
	
#main {margin-top:100px; background-color: #fff;}	
	
/* ================= NAV ================= */	
.menu {display: block;}
.menu p {
	text-align: right;
	vertical-align: middle;
	padding-right: 30px;
	line-height: 100px;}
.menu p a{color: #333;}
.menu p a:hover {text-decoration:none;color:#ccc;}
	
	
/* ================= top box レイアウト ================= */
	table{ display: block; margin: auto; max-width: 1170px;}

/* ================= contants ================= */
	#main{display: block; margin: auto; max-width: 1170px;}

	
/* ================= parallax ================= */	
	.parallax_h2{ font-size: 2em; text-align:center; padding: 5em 50px 20px;color: #FFF;}
	.parallax_p{text-align:justify; padding: 30px 200px 30px;color: #FFF;}	
	
	
/* ================= info ================= */
	.price_text {display: block; width: 80%; margin-top: 10px; margin-left: auto; margin-right: auto; }
	.price_text p{text-align: center;} 
	#info{background-color: #eee; display: block; width: 80%; margin-left: auto; margin-right: auto;}
	#info h4{font-size: 1.3em; font-weight: bold;padding: 0px 50px 10px;}
	#info h5{font-size: 1.1em; font-weight: bold;padding: 0px 50px;}
	#info  p{text-align: left; font-size: 1em;
	padding: 0px 50px 50px 50px;
	}

/* ================= privacy ================= */	
#privacy {background-color: #eee; margin-top: 100px;}	
#privacy h2{ font-size: 1.5em; text-align:center; padding: 50px 50px 20px;}
#privacy h5{ font-size: 1.1em; padding: 30px 200px 0px;}	
#privacy p{text-align:justify; padding: 0px 200px 50px;}

	
	
/* ===お問い合わせ=== */	

	
	#mail_box{display: block; width: 100%; margin-top: 60px;margin-left: 
	auto; margin-right: auto; }
	
	#mail_box h2{padding-top: 3em; margin-bottom: 2em; font-size: 1.5em;}
#mail_box p {margin-bottom: 1em; font-size: 1em;}
	
	
	
	
/*FOOTER*/

footer { display:block; width:100%; margin-top: 5em;  margin-left:auto; margin-right:auto; padding-bottom: 5em;}
	
	.footer_sns{display: block; width: 125px; margin-top: 50px; margin-left: auto; margin-right: auto; margin-bottom: 60px;}
	.footer_sns img{width: 50px; height: 50px;}	
	
footer p{ text-align:center; font-size:12px;}
footer p a{ text-align:center; font-size:14px; color: black;}
footer p a hover{ text-align:center; font-size:14px; color:#EFB88A; text-decoration: underline;}
.address {display:block; width:100%; margin:auto; margin-bottom: 5em;}

/* ================= 画像キャプション ================= */
/* 画像キャプション */
a.thumnail {
	display: block;
	float: left;
	overflow: hidden;
	width: 100%;
}

img {
	height: auto;
	-webkit-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
	width: 100%;
	vertical-align: bottom;
}

figure {
	margin: 0;
	overflow: hidden;
	position: relative;
	text-align: center;
}

figcaption {
	background-color: rgba(0,0,0,0.3);
	color: #fff;
	opacity: 1;
	font-size: 16px;
	font-size: 1.6rem;
	position: absolute;
	text-align: center;
	-webkit-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
		
}

	a:hover>figure img {
       transform: scale(0,1.15);
       -webkit-transform:scale(1.15,1.15);
       -moz-transform:scale(1.15,1.15);
       -ms-transform:scale(1.15,1.15);
       -o-transform:scale(1.15,1.15);
}

	a:hover>figure figcaption {
	opacity: 1;
}

/* 画像キャプション */

figcaption::before,
figcaption::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 1px;
	background: #fff;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

figure:hover figcaption::before {
	opacity: 0.5;
	width: 80%;
	-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
	transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure:hover figcaption::after {
	opacity: 0.5;
	width: 80%;
	-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
	transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure h2{
	font-size: calc(100vw / 32);
	position: absolute;
	top: 55%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

.topabout_p {
	font-size: calc(65vw / 32);
	position: absolute;
	top: 53%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;	}
	
figure p {
	font-size: calc(35vw / 32);
	position: absolute;
	top: 53%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure h2 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure p {

	-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}

figure:hover h2 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure:hover p {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}

figure h3{
	font-size: calc(60vw / 32);
	position: absolute;
	top: 60%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}


figure h3 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}


figure:hover h3 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure h4{
	font-size: calc(120vw / 32);
	position: absolute;
	top: 65%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure h4 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure:hover h4 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

	
	
	
	/* ================= TOPへボタン ================= */	
.pagetop {
	opacity: 0.9;
	z-index: 6;
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
}
.pagetop a {
    display: block;
    background-color: #000;
    text-align: center;
    color: #fff;
    font-size: 12px;
	font-weight:bold;
    text-decoration: none;
    padding: 20px 20px;
}
 
.pagetop a:hover {
    display: block;
    background-color:#000;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:20px 20px;

}

}


/* ##################### 767px以下 ########################### */
@media screen and  (max-width: 767px) {
.pc{display: none;}
.smh{display: block;}
header { 
	background-color: #FFF;
	z-index: 5;
	position: fixed; 
	height: 5em;
	top: 0; 
	left: 0; 
	right: 0;
	
	}

.box {display: block;
	width: 100%;
	height: 1em;
	color: #fff;
	opacity: 0;
	}
		
.logo{float: left; width: 35%;}
.logo img{max-width:120px;}

	
#main {margin-top:5em; background-color: #fff;}	
/* ================= NAV ================= */

.menu {display: block;}
	
.menu p {font-size: 12px; text-align: right; vertical-align: middle;
	padding-right: 20px;
	line-height: 5em;}
	
.menu p a{color: #333;}

.menu p a:hover {
	text-decoration:none;
	color:#ccc;}

	

/* ================= parallax ================= */	
	.parallax_h2{font-size: 2em; text-align:center; padding: 4em 0px 20px;color: #FFF;}
	.parallax_p{text-align:justify; text-align: left; font-size: 1em; padding: 20px 30px 0px;color: #FFF;}

/* ================= info ================= */
	.price_text {display: block; width: 80%; margin-top: 10px; margin-left: auto; margin-right: auto; }
	.price_text p{
    text-align: center;
} 
	#info {background-color: #eee;}	
	#info h4{font-size: 1.3em; font-weight: bold;padding: 0px 30px;}
	#info h5{font-size: 1.1em; font-weight: bold;padding: 0px 30px;}
	#info  p{text-align: left; font-size: 1em;
	padding: 0px 30px 50px 30px;
	}
 
	

	
	
/* ================= privacy ================= */	
#privacy {background-color: #eee;margin-top:1em;}
#privacy h2{ font-size: 1.3 em; text-align:center; padding: 10px 50px 20px;}
#privacy h5{ font-size: 1.1em; padding: 30px 20px 0px;}	
#privacy p{text-align:justify; padding: 0px 20px 10px;}	

	
	
	
	
/* ===お問い合わせ・お申し込みページ=== */
		#mail_box{display: block; width: 90%; margin-top: 60px;margin-left: 
	auto; margin-right: auto; }
	
	#mail_box h2{padding-top: 3em; margin-bottom: 2em; font-size: 1.5em;}
	
	
	
/*FOOTER*/
footer { display:block; width:100%;  margin-top: 5em; margin-left:auto; margin-right:auto; padding-bottom: 5em;}
	
	.footer_sns{display: block; width: 125px; margin-top: 50px; margin-left: auto; margin-right: auto; margin-bottom: 60px;}
	.footer_sns img{width: 50px; height: 50px;}	
	
footer p{ text-align:center; font-size:12px;}
footer p a{ color: #333333; font-size:14px;}
footer p a :hover{ color: #999; text-decoration: underline;}
.address {display:block; width:80%; margin:auto ; margin-bottom: 5em;}

/* ================= 画像キャプション ================= */
a.thumnail {
	display: block;
	float: left;
	overflow: hidden;
	width: 100%;

}

img {
	height: auto;
	-webkit-transition:all 0.25s ease-in-out;
            transition:all 0.25s ease-in-out;
	width: 100%;
	vertical-align: bottom;
}

figure {
	margin: 0;
	overflow: hidden;
	position: relative;
	text-align: center;
	
}

figcaption {
	background-color: rgba(0,0,0,0.3);
	color: #fff;
	opacity: 1;
	font-size: 16px;
	font-size: 1.6rem;
	position: absolute;
	text-align: center;
	-webkit-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

a:hover>figure img { 
	opacity: 0.6;
    
	transform: scale(0,1.15);
       -webkit-transform:scale(1.15,1.15);
       -moz-transform:scale(1.15,1.15);
       -ms-transform:scale(1.15,1.15);
       -o-transform:scale(1.15,1.15);
}

a:hover>figure figcaption {
	opacity: 1;
}

/* 画像キャプション */

figcaption::before,
figcaption::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	height: 1px;
	background: #fff;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

figure:hover figcaption::before {
	opacity: 0.5;
	width: 80%;
	-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
	transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure:hover figcaption::after {
	opacity: 0.5;
	width: 80%;
	-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
	transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure h2{
	font-size: calc(170vw / 32);
	position: absolute;
	top: 60%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

.topabout_p {
	font-size: calc(110vw / 32);
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}	
	
figure p {
	font-size: calc(60vw / 32);
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure h2 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure p {

	-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}

figure:hover h2 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure:hover p {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}

figure h3{
	font-size: calc(100vw / 32);
	position: absolute;
	top: 65%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure h3 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure:hover h3 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure h4{
	font-size: calc(160vw / 32);
	position: absolute;
	top: 60%;
	left: 0;
	width: 100%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure h4 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure:hover h4 {
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
	transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

	
/* ================= TOPへボタン ================= */	
.pagetop {
	opacity: 0.9;
	z-index: 6;
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
}
.pagetop a {
    display: block;
    background-color: #000;
    text-align: center;
    color: #fff;
    font-size: 12px;
	font-weight:bold;
    text-decoration: none;
    padding: 15px 15px;
}
 
.pagetop a:hover {
    display: block;
    background-color:#000;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:15px 15px;

}	
	
	
}


/* ================= googleカレンダー ================= */
.cal_wrapper {
	max-width: 90%;
	min-width: 300px;
	margin: 2.0833% auto;
}

.googlecal {
	position: relative;
	padding-bottom: 100%;
	height: 0;
}

.googlecal iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}

/* ================= googlemap ================= */
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;  
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}





.swiper-container {
    width: 100%;

}