@charset "utf-8";
/* ===================================================================
 style info : コンテンツエリア関係 他

fonts
 10px = 77%     11px = 85%     12px = 93%     13px = 100%
 14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
 18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
 22px = 167%    23px = 174%    24px = 182%    25px = 189%
 26px = 197%
=================================================================== */

/*----------------------------------------------------
	共通
----------------------------------------------------*/
/* スクロールバーの有無によるズレ対策 
html:before {
    content:"";
    position:fixed;
    z-index:-1;
    top:0;
    left:0;
    right:0;
    bottom:0;
background-image:url(../img/bg_ice.gif); padding:0px 40px 40px 40px;
    border-left:20px solid #fff;
    border-right:20px solid #fff;
}
#006f47;
*/

@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

.cinzel-<uniquifier> {
  font-family: "Cinzel", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


/* 印刷用ここから */
@media print {
  .no-print {
    display: none;
  }
}
/* 印刷用ここまで */

html {
	width:100%; height:100%;
	overflow-y: scroll;

}

body {
	font-family:'Lato','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	width:100%;height:100%;
	color:#333;
    letter-spacing: 0.04em;
    margin: 0;
}


body:before {
    content:"";
    position:fixed;
    z-index:-10;
    top:0;
    left:0;
    right:0;
    bottom:0;
	background-image:url(../img/bg.gif);
    padding:0px 40px 40px 40px;
}


input, textarea {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

/* for IE6 */
* html body {
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
* html input, * html textarea {
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}


h2{font-family: 'Lato', sans-serif;font-weight:900; font-size:220%; margin-bottom:3%;}
h3{font-family: 'Lato', sans-serif;font-weight:900;}
h4{font-family: 'Lato', sans-serif;font-weight:900;}
h5{font-family: 'Lato', sans-serif;font-weight:900;}

.h2_tour{
    color:#000000 !important;font-size:350%;margin-top:0;
}

.google-maps {
position:relative;
padding-bottom:36%; /* これが縦横比*/
height:0;
padding-left:20px;
padding-right:20px;
margin:-5% auto -3% auto;
overflow:hidden
}
.google-maps iframe {
margin-top:-60px;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
pointer-events:none;
}

/*.info_map{
position: relative;
z-index:50;
top: 20%;
left: 27.5%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color:#FFF;
width:100%;
max-width:800px;
margin:0px auto;
padding:4%;
line-height:180%;
}*/

.info_map{
position: relative;
z-index:50;
background-color:#fff;
width:100%;
max-width:800px;
margin:40px auto -8% auto;
padding:4%;
line-height:180%;
}


.info_map .table_cell{ width:50%;}
.info_map .table_cell h4{ margin:3% 0;}

.info_map .top_cell01{ width: 52%; vertical-align: top;}
.info_map .top_cell02{ width: 48%; padding-left: 4%; vertical-align: top;}

/* リンク
----------------------------------------------------*/
a {
	color:#333;
	text-decoration: underline;
}

a:link {
	color:#333;
}

a:visited {
	color:#333;
}

a:hover {
	color:#999;
	text-decoration:none;
}

a:active {
	color:#333;
}

/* よく使いそうなCSS3
----------------------------------------------------*/
#selectors {
/* 角丸 */
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

/* 角丸個別 */
	-webkit-border-top-right-radius: 15px;
	-moz-border-radius-topright: 15px;
	border-top-right-radius: 15px;

/* ボックスに影 */
	-webkit-box-shadow: 1px 1px 3px #999;
	-moz-box-shadow: 1px 1px 3px #999;
	box-shadow: 1px 1px 3px #999;

/* テキストに影 */
	text-shadow: 1px 1px 0px #999;
}

/* 汎用
----------------------------------------------------*/
/* clerfix */


.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.imgR {
	float: right;
	margin: 0 0 10px 10px;
}

.imgL {
	float: left;
	margin: 0 10px 10px 0;
}

.stxt{ font-size:80%;}

a.anchor {
    display: block;
    height: 0px;
    overflow: hidden;
    text-indent: -9999px;
    padding-bottom: 20px;
	margin-top:-40px;
}



/* ヘッダー部分
----------------------------------------------------*/
.box_lang{position: absolute;top: 0;right:5%; display: inline-block; background:#fff; z-index: 999; width: auto; padding:10px 20px; white-space: nowrap;font-family: 'Lato','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';}
.box_lang a{padding: 0 5px;}


.box_kimg{ height:90vh; width:100%;  position: absolute;text-align: center;}

#box_header{position: fixed;top:0;width: 100%;min-height: 50px; rgba(0,0,0,0.5)}

#box_header.invert{animation: changeColor 1s ease-in-out forwards;}
@keyframes changeColor {
  from {
    background-color: rgba(0,0,0,0.5);
  }
  to {
    background-color: rgba(255,255,255,1);
  }
}

.box_header_in{max-width: 1100px;margin: 0 auto;display: flex;flex-direction: row;justify-content: space-between;align-items: center;}

#box_header .box_header_in h1 img{width: 235px;padding: 20px 0;}
#box_header .box_header_in ul.gnavi{display: flex;flex-direction: row;align-items: center;}
#box_header .box_header_in ul.gnavi li{ margin-left: 40px;}
#box_header .box_header_in ul.gnavi li a{ color: #fff; font-family: "Cinzel", serif;font-size: 130%; text-decoration: none; }
#box_header.invert .box_header_in ul.gnavi li a{animation: changeColor2 1s ease-in-out forwards;}
@keyframes changeColor2 {
  from {
    color: #fff;
  }
  to {
    color: #837a66;
  }
}