@charset "utf-8";
/* CSS Document */

/* 全体共通 */
body{
	font-size:14px;
	color:#4c4c4c;
	background-color:rgb(247,241,188);
	font-family:'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "HiraginoKaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;
}

.wrap{
	width:1200px;
	margin:0 auto;
	text-align:center;
	}

li {
    list-style: none;
    overflow: hidden;
}

/*ヘッダー部分*/

.header {
	width:100%;
}

.header_list{
	display:flex;
	background-color:rgba(255,255,255,0.8);
	height: 30px;
	position:relative;
	top:-150px;
	left: 0;
	z-index: 24;
	justify-content: safe center;
	padding: 10px 0 10px;
	z-index:150;
}

.main_visual {
	width:100%;
	min-width:1200px;
	height:800px;
	background-image:url(../image/main_pic.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	text-align:center;
}

.main_visual img {
	width:100%;
	max-width:1200px;
	height:auto;
}

.gnav_menu{
	text-align:center;
	font-size:15px;
	font-weight:bold;
	margin-top: 35px;
	}

.gnav li{
	display: inline;
	padding-right: 15px;
	border-right: 1px solid #583600;
	margin-right: 15px;
	z-index:120;
	}

.gnav li:first-child{
	padding-left: 15px;
	border-left: 1px solid #583600;
	margin-left: 15px;
}

.gnav li a{
	color: #583600;
	text-decoration: none;
}

.gnav li a:hover{
	opacity: 0.6;
	color: #583600;
	text-decoration: underline;
}

.site-logo{
		text-align:center;
		margin-top:70px;
}

/* ヘッダー固定とスクロールここから */
	
.fixed {
  position:fixed;
  height:80px;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background-color: rgba(255,255,255,0.9);
}

/* ヘッダー固定とスクロール終わり */

/* 書き出し部分 */

.text {
	width:960px;
	height:800px;
	text-align:center;
	padding:100px;
}

.kakidashi {
	font-size:32px;
	color:#4c4c4c;
	opacity : 0;
	transform: translateY(50px);
	transition: 5s;
	margin:80px;
	text-align:center;
}

.kakidashi_foot {
	font-size:24px;
	color:#4c4c4c;
	opacity : 0;
	transform: translateY(50px);
	transition: 5s;
	margin:80px;
	text-align:center;
}
  
/* マップ共通 */

.main_map {
	position:relative;
}

.shop_image:hover {
	outline:#930 solid 5px;
	transform: scale(1.2,1.2); /*画像の拡大*/
	moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}

/*ふきだし部分共通*/

.main_map h2{
	font-size:24px;
	font-weight:bold;
	text-align:center;
    color:#333;
	padding:10px;
}

.main_map p{
	font-size:16px;
	font-weight:500;
	line-height:1.3;
	text-align:left;
	padding-left:20px;
/*	opacity:0;
	transition: 5s; */
}

/*ここからマップ個別*/

.map1 {
	position:absolute;
	top:450px;
	left:700px;
}

.balloon1{
    position:absolute;
    left:720px;
    top:520px;
	z-index:10;
}

.balloon1:before{
	display:;/*test*/
    content:"";
	white-space: pre;
    width:400px;
    height:120px;
    position:absolute;
    left:-0px;
    top:0px;
	padding:10px;
    background:#CCC;
	opacity:0.8;
    border-radius:10px;
	z-index:-2;
}

.balloon1:after{
	display:;/*test*/
    content:"";
    position:absolute;
    top:-20px;
    left:20px;
    border:10px solid transparent;
    border-bottom:10px solid #CCC;
	opacity:0.8;
    width:0;
    height:0;
	z-index:-1;
}

#map123:hover.balloon:before {
	display:inline-block;
}

#map123:hover.balloon:after {
	display:inline-block;
}

/*2*/

.map2 {
	position:absolute;
	top:930px;
	left:400px;
}

.balloon2{
    position:absolute;
    left:180px;
    top:720px;
	z-index:10;
}

.balloon2:before{
	display:;/*test*/
    content:"";
	white-space: pre;
    width:300px;
    height:120px;
    position:absolute;
    left:-0px;
    top:0px;
	padding:10px;
    background:#CCC;
	opacity:0.8;
    border-radius:10px;
	z-index:-2;
}

.balloon2:after{
	display:;/*test*/
    content:"";
    position:absolute;
    top:140px;
    left:260px;
    border:10px solid transparent;
    border-top:60px solid #CCC;
	opacity:0.8;
    width:0;
    height:0;
	z-index:-1;
}

#map123:hover.balloon:before {
	display:inline-block;
}

#map123:hover.balloon:after {
	display:inline-block;
}

/**/

.map3 {
	position:absolute;
	left:650px;
	top:920px;
}

.balloon3{
    position:absolute;
    left:780px;
    top:930px;
	z-index:10;
}

.balloon3:before{
	display:;/*test*/
    content:"";
	white-space: pre;
    width:400px;
    height:150px;
    position:absolute;
    left:-0px;
    top:0px;
	padding:10px;
    background:#CCC;
	opacity:0.8;
    border-radius:10px;
	z-index:-2;
}

.balloon3:after{
	display:;/*test*/
    content:"";
    position:absolute;
    top:20px;
    left:-20px;
    border:10px solid transparent;
    border-right:10px solid #CCC;
	opacity:0.8;
    width:0;
    height:0;
	z-index:-1;
}

#map123:hover.balloon:before {
	display:inline-block;
}

#map123:hover.balloon:after {
	display:inline-block;
}

/*4*/

.map4 {
	position:absolute;
	left:620px;
	top:1100px;
}

.balloon4{
    position:absolute;
    left:620px;
    top:1170px;
	z-index:10;
}

.balloon4:before{
	display:;/*test*/
    content:"";
	white-space: pre;
    width:400px;
    height:120px;
    position:absolute;
    left:-0px;
    top:0px;
	padding:10px;
    background:#CCC;
	opacity:0.8;
    border-radius:10px;
	z-index:-2;
}

.balloon4:after{
	display:;/*test*/
    content:"";
    position:absolute;
    top:-20px;
    left:50px;
    border:10px solid transparent;
    border-bottom:10px solid #CCC;
	opacity:0.8;
    width:0;
    height:0;
	z-index:-1;
}

#map123:hover.balloon:before {
	display:inline-block;
}

#map123:hover.balloon:after {
	display:inline-block;
}

/*5*/

.map5 {
	position:absolute;
	left:400px;
	top:1100px;
}

.balloon5{
    position:absolute;
    left:80px;
    top:1170px;
	z-index:10;
}

.balloon5:before{
	display:;/*test*/
    content:"";
	white-space: pre;
    width:400px;
    height:120px;
    position:absolute;
    left:-0px;
    top:0px;
	padding:10px;
    background:#CCC;
	opacity:0.8;
    border-radius:10px;
	z-index:-2;
}

.balloon5:after{
	display:;/*test*/
    content:"";
    position:absolute;
    top:-20px;
    left:360px;
    border:10px solid transparent;
    border-bottom:10px solid #CCC;
	opacity:0.8;
    width:0;
    height:0;
	z-index:-1;
}

#map123:hover.balloon:before {
	display:inline-block;
}

#map123:hover.balloon:after {
	display:inline-block;
}

/*6*/
.map6 {
	position:absolute;
	left:620px;
	top:1350px;
}

.balloon6{
    position:absolute;
    left:620px;
    top:1430px;
	z-index:10;
}

.balloon6:before{
	display:;/*test*/
    content:"";
	white-space: pre;
    width:400px;
    height:120px;
    position:absolute;
    left:-0px;
    top:0px;
	padding:10px;
    background:#CCC;
	opacity:0.8;
    border-radius:10px;
	z-index:-2;
}

.balloon6:after{
	display:;/*test*/
    content:"";
    position:absolute;
    top:-20px;
    left:50px;
    border:10px solid transparent;
    border-bottom:10px solid #CCC;
	opacity:0.8;
    width:0;
    height:0;
	z-index:-1;
}

#map123:hover.balloon:before {
	display:inline-block;
}

#map123:hover.balloon:after {
	display:inline-block;
}

/*7*/
.map7 {
	position:absolute;
	left:620px;
	top:1650px;
}

.balloon7{
    position:absolute;
    left:620px;
    top:1730px;
	z-index:10;
}

.balloon7:before{
	display:;/*test*/
    content:"";
	white-space: pre;
    width:400px;
    height:100px;
    position:absolute;
    left:-0px;
    top:0px;
	padding:10px;
    background:#CCC;
	opacity:0.8;
    border-radius:10px;
	z-index:-2;
}

.balloon7:after{
	display:;/*test*/
    content:"";
    position:absolute;
    top:-20px;
    left:50px;
    border:10px solid transparent;
    border-bottom:10px solid #CCC;
	opacity:0.8;
    width:0;
    height:0;
	z-index:-1;
}

#map123:hover.balloon:before {
	display:inline-block;
}

#map123:hover.balloon:after {
	display:inline-block;
}

/*8*/
.map8 {
	position:absolute;
	left:300px;
	top:2000px;
}

.balloon8{
    position:absolute;
    left:0px;
    top:1750px;
	z-index:10;
}

.balloon8:before{
	display:;/*test*/
    content:"";
	white-space: pre;
    width:500px;
    height:100px;
    position:absolute;
    left:-0px;
    top:0px;
	padding:10px;
    background:#CCC;
	opacity:0.8;
    border-radius:10px;
	z-index:-2;
}

.balloon8:after{
	display:;/*test*/
    content:"";
    position:absolute;
    top:120px;
    left:350px;
    border:10px solid transparent;
    border-top:120px solid #CCC;
	opacity:0.8;
    width:0;
    height:0;
	z-index:-1;
}

#map123:hover.balloon:before {
	display:inline-block;
}

#map123:hover.balloon:after {
	display:inline-block;
}

/*クレアネットアイコン*/

.map9 {
	position:absolute;
	top:1450px;
	left:100px;
}

/*マップおわり*/


/*　コピーライトここから　*/

footer{
	margin-bottom:20px;
	}

/*　コピーライトここまで　*/

.huwahuwa span {
  position:absolute;
  top:0;
  left:0px;
  display: inline-block;
}

.buruburu {
  padding:;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  text-align: center;
  -webkit-animation: 3s float ease-in-out infinite;
  animation: 3s float ease-in-out infinite;
}
/*一旦、保留
.huwahuwa,
.huwahuwa:after {
  position: absolute;
  top:0
  left:0;
  left: 20px;
  z-index:999;
  content: '';
  width: 30px;
  height: 24px;
  background-color: rgba(0,0,0,.1);
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-animation: 3s shadow ease-in-out infinite;
  animation: 3s shadow ease-in-out infinite;
}
*/
@-webkit-keyframes float {
  50% {
    -webkit-transform: translateY(-10px);
  }
}
@keyframes float {
  50% {
    transform: translateY(-10px);
  }
}
@-webkit-keyframes shadow {
  50% {
    width: 70%;
    height: 18px;
  }
}
@keyframes shadow {
  50% {
    width: 70%;
    height: 18px;
  }
}

/*ここからあとがき*/

.atogaki {
	width:960px;
	height:800px;
	text-align:center;
	padding:50px 100px;
	margin-top:100px;
	background-color:#FFF;
	border-radius:30px;
}

.atogaki p {
	font-size:26px;
	font-weight:bold;
	color:#4c4c4c;
	line-height:1.5;
	opacity:0;
	transform: translateY(50px);
	transition: 5s;
	margin:80px;
	text-align:center;
}

/* PageTop */

#page_top{
  width: 90px;
  height: 90px;
  position: fixed;
  right: 0;
  bottom: 0;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 90px;
  height: 90px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #333;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #333;
}