@charset "UTF-8";
/*
*/
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');

html body {
	font-family: "游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
img {
	border: none;width: 100%;height: auto;
	vertical-align: top;
}

body {background-size: cover; background-position: center center; background-repeat: no-repeat; background-color: #d7f7e8;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {p
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}



/* リンク部分
----------------------------------------------------------------------------------------------------------------------*/

a {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	/*color: #34A7E0;*/
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}

/* フロート
----------------------------------------------------------------------------------------------------------------------*/


.fL {float:left;}
.fR {float:right;}


/* マージン
----------------------------------------------------------------------------------------------------------------------*/

.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}
.mb100 {margin-bottom:100px;}
.mb120 {margin-bottom:120px;}
.mb150 {margin-bottom:150px;}
.mb3p {margin-bottom:7%;}

.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}

.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:50px;}

.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}

.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt70 {padding-top:70px;}

.pb10 {padding-bottom:10px;}
.pb20 {padding-bottom:20px;}
/*----------------------textstyle------------------------------*/


.fs50 {font-size:50%;}
.fs70 {font-size:70%;}
.fs80 {font-size:80%;}
.fs85 {font-size:85%;}
.fs90 {font-size:90%;}
.fs95 {font-size:95%;}
.fs100 {font-size:100%;}
.fs105 {font-size:105%;}
.fs110 {font-size:110%;}
.fs115 {font-size:115%;}
.fs120 {font-size:120%;}
.fs125 {font-size:125%;}
.fs130 {font-size:130%;}
.fs135 {font-size:135%;}
.fs140 {font-size:140%;}
.fs145 {font-size:145%;}
.fs150 {font-size:150%;}
.fs155 {font-size:155%;}
.fs180 {font-size:180%;}
.fs200 {font-size:200%;}
.fs250 {font-size:250%;}
.fs300 {font-size:300%;}
.fs350 {font-size:350%;}
.fs400 {font-size:400%;}
.fs500 {font-size:500%;}
.fs600 {font-size:600%;}
.fs700 {font-size:700%;}

.fw700 {font-weight: 700;}
.fw900 {font-weight: 900;}

.ff01 {font-family: 'Fjalla One', sans-serif;}
.ff02 {font-family: 'Lobster', cursive;}
.ff03 {font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
.ff04 {font-family: 'Noto Serif', serif;}
.ff05 {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.ff06 {font-family: 'Lato', sans-serif;}

.lh10 {line-height:1;}
.lh12 {line-height:1.2;}
.lh15 {line-height:1.5;}
.lh20 {line-height:2;}
.lh25 {line-height:2.5;}
.lh30 {line-height:3;}

.ls01 {letter-spacing: 0.05em;}
.ls02 {letter-spacing: 0.01em;}
.ls0001 {letter-spacing: 0.001em;}
.ls03 {letter-spacing: 0.2em;}

.fcwh {color:#ffffff;}
.fcbk {color:#000000;}
.fcgr {color:#999999;}
.fcgl {color:#c8a063;}
.fcrd {color:#ff0000;}
.fcbl {color:#193862;}
.fcgn {color:#037b00;}
.fcyl {color:#ffff01;}
.fcor {color:#eb954e;}

.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}

.tdn a:hover {
	text-decoration: none!important;
}

html,body {
  margin: 0;
  padding: 0;
  text-align: left;
  }

h1,h2,h3,h4,h5 {line-height: 1.1;
  font-size: 7px;
  }
body {
	font-size: 13px;
	line-height: 2.0;
	color: #000000;
  }
@media print, screen and (min-width: 1000px) {
.pc {display: block;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.pc {display: none;}
}
@media print, screen and (max-width: 600px) {
.pc {display: none;}
}
@media print, screen and (min-width: 1000px) {
.pco {display: none;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.pco {display: block;}
}
@media print, screen and (max-width: 600px) {
.pco {display: block;}
}
@media print, screen and (min-width: 1000px) {
.sp {display: none;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.sp {display: none;}
}
@media print, screen and (max-width: 600px) {
.sp {display: block;}
}
@media print, screen and (min-width: 1000px) {
.spo {display: block;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.spo {display: block;}
}
@media print, screen and (max-width: 600px) {
.spo {display: none;}
}

/*---------------*/
/***** common *****/
/*---------------*/
.def {overflow: hidden; clear: both;}

header {background-color: #c8a063; overflow: hidden; z-index: 10; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	width: 100%;
	margin: 0;
	padding: 0;
position: relative;}
@media print, screen and (min-width: 1000px) {
header  {height: 86px;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
header  {height: 86px; background-color: transparent}
}
@media print, screen and (max-width: 600px) {
header  {height: 86px;}
}
.iframe-content {
   position: relative;
 width: 100%;
}
@media print, screen and (min-width: 1000px) {
.iframe-content {padding: 50% 0 0 0;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.iframe-content {padding: 50% 0 0 0;}
}
@media print, screen and (max-width: 600px) {
.iframe-content {padding: 120% 0 0 0;}
}
.iframe-content iframe {
    position: absolute;
 top: 0;
 left: 0;
    width: 100%;
    height: 100%;
}

.header-in {position: relative; margin: 0 auto; padding: 0;}
@media print, screen and (min-width: 1000px) {
.header-in  {width: 1100px; height: 86px;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.header-in  {width: 100%; height: 86px;}
}
@media print, screen and (max-width: 600px) {
.header-in  {width: 100%; height: 86px;}
}

h1 {right: 10px; width:200px; top: 3px; position: absolute; color: #ffffff; text-align: right;}
@media print, screen and (min-width: 1000px) {
.logo {left: 0; width:86px; top: 10px; position: absolute;}
}

@media print, screen and (min-width: 601px) and (max-width: 999px) {
.logo {margin: 15px auto 0; width:86px; position: relative;}
}
@media print, screen and (max-width: 600px) {
.logo {margin: 15px auto 0; width:86px; position: relative;}
}

.tel-sp {right:20px; top: 17px; position:absolute; line-height:1.1;}
.tel {right:0px; top: 25px; position:absolute; font-size:150%; color:#ffffff;}

ul.pcmenu {text-align: center; margin: 0; padding: 0; display: table; width:600px; font-size: 110%; table-layout: fixed; position: absolute; left: 250px; top: 33px;}
ul.pcmenu li {display: table-cell; vertical-align: middle; line-height: 1.5; font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;}
ul.pcmenu li p{font-size: 65%; margin: 0; padding: 0; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; color: #666666;}
ul.pcmenu li a{color: #ffffff!important;}

.mainimage-over {overflow: hidden;position: relative; background-position: center bottom; z-index: 1; background-color: #000000;}
.mainimage-over {
    animation-name: fadein2;
    animation-duration: 4.0s;
}
@media screen and (min-width: 1100px) {
/*pc-style*/
.mainimage-over {height: 700px; margin: 0 auto;}
}
@media only screen and (min-width: 511px) and (max-width: 1099px) {
/*tablet-style*/
.mainimage-over {height: 550px; margin: 0 auto;}
} 
/* smartPhone */
@media screen and (max-width: 510px) {
/*smart-style*/
.mainimage-over {height: 270px; margin: 0 auto;}
}
@keyframes fadein2 {
0% {
    opacity: 0;
    transform: translateY(30px);
}
60% {
    opacity: 0;
    transform: translateY(30px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}


@keyframes RightToLeft {
  0% {
    opacity: 0;/* 透明 */
    transform: translateX(400px);/* X軸方向に50px */
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);
  }
}

.sl-txt {position: absolute; width: 100%; z-index: 10; line-height: 1.3; text-align: center!important; font-weight: 700; color: #000000; animation-duration: 5.5s;/* アニメーション時間 */ animation-name:LeftToRight;/* アニメーション名 */}
@media print, screen and (min-width: 1000px) {
.sl-txt {left: 25%; bottom: 44%; width: 50%;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.sl-txt {left: 23%; bottom: 42%; width: 54%;}
}
@media print, screen and (max-width: 600px) {
.sl-txt {left: 20%; bottom: 45%; width: 60%;}
}
@keyframes LeftToRight {
  0% {
    opacity: 0;/* 透明 */
    transform: translate Y(30px);
  }
    50% {
    opacity: 0;/* 透明 */
    transform: translateY(30px);
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}

.fadecam {
animation-duration:5.5s;
animation-name:Upf;
}
@keyframes Upf {
  0% {
    opacity: 0;/* 透明 */
    transform: translate Y(30px);
  }
    80% {
    opacity: 0;/* 透明 */
    transform: translateY(30px);
  }
  100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);
  }
}
.fadegun {
animation-duration:5.7s;
animation-name:Upf;
}



.bg-wall {overflow: hidden;position: relative; background-size: cover; background-position: center center; z-index: 1; }
.bg-wall-in {overflow: hidden; position: relative;}
@media print, screen and (min-width: 1000px) {
.bg-wall-in {width: 1000px; margin: 150px auto; padding: 0;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.bg-wall-in {width: 100%; margin: 130px auto; padding: 0;}
}
@media print, screen and (max-width: 600px) {
.bg-wall-in {width: 100%; margin: 110px auto; padding: 0;}
}
#C00 {background-color:#d7f7e8;}

.gre-bld {line-height: 1.5;}
@media print, screen and (min-width: 1000px) {
.gre-bld {float: left; width: 45%; margin: 0;}
}
@media print, screen and (min-width: 701px) and (max-width: 999px) {
.gre-bld {float: left; width: 45%; margin: 0;}
}
@media print, screen and (max-width: 700px) {
.gre-bld {float: none; width: 90%; margin: 0 auto 30px;}
}
@media print, screen and (min-width: 1000px) {
.gre-txt {float: right; width: 50%; margin: 0;}
}
@media print, screen and (min-width: 701px) and (max-width: 999px) {
.gre-txt {float: right; width: 50%; margin: 0;}
}
@media print, screen and (max-width: 700px) {
.gre-txt {float: none; width: 90%; margin: 0 auto 30px;}
}
.gre-txt-in {padding: 4%; overflow: hidden;}

.gre-bld2 {line-height: 1.5;}
@media print, screen and (min-width: 1000px) {
.gre-bld2 {float: left; width: 60%; margin: 0;}
}
@media print, screen and (min-width: 701px) and (max-width: 999px) {
.gre-bld2 {float: left; width: 60%; margin: 0;}
}
@media print, screen and (max-width: 600px) {
.gre-bld2 {float: none; width: 100%; margin: 0 auto 30px;}
}
@media print, screen and (min-width: 1000px) {
.gre-txt2 {float: right; width: 40%; margin: 0;}
}
@media print, screen and (min-width: 801px) and (max-width: 999px) {
.gre-txt2 {float: right; width: 40%; margin: 0;}
}
@media print, screen and (max-width: 800px) {
.gre-txt2 {float: none; width: 100%; margin: 0 auto 30px;}
}

@media print, screen and (min-width: 1000px) {
.gre-txt2-in {padding: 10% 20%; overflow: hidden;}
}
@media print, screen and (min-width: 801px) and (max-width: 999px) {
.gre-txt2-in {padding: 8% 16%; overflow: hidden;}
}
@media print, screen and (max-width: 800px) {
.gre-txt2-in {padding: 10%; overflow: hidden;}
}
.bgcamp {background-color: #ffffff; overflow: hidden; padding: 5%; font-size: 120%; font-weight: 700;}

#C01 {background-color:#c8a063; color:#ffffff;}
#C02 {background-color:#000000; color:#ffffff;}

footer  {
	overflow: hidden;
	clear: both; color:#ffffff!important;
	background-color: #c8a063;
}
.footer-in {overflow: hidden; text-align: left;}
@media print, screen and (min-width: 1000px) {
.footer-in {width: 1000px; margin: 150px auto;}
}
@media print, screen and (min-width: 601px) and (max-width: 999px) {
.footer-in {width: 96%;margin: 130px auto;}
}
@media print, screen and (max-width: 600px) {
.footer-in {width: 90%;margin: 110px auto 20px;}
}
.footer-p {overflow: hidden; padding: 5%;}
@media print, screen and (min-width: 1000px) {
.footer-l {width: 48%; float: left; margin: 0 auto;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-l {width: 48%; float: left; margin: 0 auto;}
}
@media print, screen and (max-width: 800px) {
.footer-l {width: 100%; float: none; margin: 0 0 30px;}
}
@media print, screen and (min-width: 1000px) {
.footer-r {width: 48%; float: right; margin: 0; font-size: 150%;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.footer-r {width: 48%; float: right; margin: 0; font-size: 150%;}
}
@media print, screen and (max-width: 800px) {
.footer-r {width: 100%; float: none; margin: 0 auto; font-size: 120%;}
}
.shop-l {text-align: left;}
@media print, screen and (min-width: 1000px) {
.shop-l {width: 27%; float: left;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.shop-l {width: 27%; float: left;}
}
@media print, screen and (max-width: 800px) {
.shop-l {width: 27%; float: left;}
}
@media print, screen and (min-width: 1000px) {
.shop-r {width: 70%; float: left; margin: 0 0 10px 0;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.shop-r {width: 70%; float: left; margin: 0 0 10px 0;}
}
@media print, screen and (max-width: 800px) {
.shop-r {width: 70%; float: left; margin: 0 0 50px 0;}
}
.copy {font-size: 80%; padding: 10px;}
@media print, screen and (min-width: 1000px) {
.copy {text-align: center;}
}
@media print, screen and (min-width: 701px) and (max-width: 1099px) {
.copy {text-align: center;}
}
@media print, screen and (max-width: 700px) {
.copy {text-align: center;}
}
@media print, screen and (min-width: 1000px) {
.fsadj {font-size: 800%;}
}
@media print, screen and (min-width: 801px) and (max-width: 1099px) {
.fsadj {font-size: 600%;}
}
@media print, screen and (max-width: 800px) {
.fsadj {font-size: 350%;}
}