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


body{
    margin: 0;
	min-height: 100%;
	width: 100%;
}


header{
	text-align: center;
	background:#FFF url(../img/header_bg.png) center center;
	position: relative;
	padding: 40px 0 0 0;
	overflow: hidden;
	background-size: cover;
}


header .inner{
	width: 1200px;
	margin: 0 auto;
	padding: 0 0 80px 0;
	background: url(../img/header_bg_illust.png) no-repeat center center;
}


header .inner h1{
	position: relative;
	z-index: 999;
}


#canvas-container{
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}


#ship{
	position: absolute;
	bottom: 0%;
	right: 2%;
 }

 
@keyframes fuwafuwa{
  0%{bottom: 0%;right: -20%; transform: rotateY(0deg);}
  5%{bottom: 0%;right: -10%; transform: rotateY(0deg);}
  10%{bottom: 2%;right: 0%; transform: rotateY(0deg);}
  15%{bottom: 0%;right: 10%; transform: rotateY(0deg);}
  20%{bottom: 2%;right: 20%; transform: rotateY(0deg);}
  25%{bottom: 0%;right: 30%; transform: rotateY(0deg) rotate(6deg);}
  30%{bottom: 2%;right: 40%; transform: rotateY(0deg);}
  35%{bottom: 0%;right: 50%; transform: rotateY(0deg) rotate(0deg);}
  40%{bottom: 2%;right: 60%; transform: rotateY(0deg);}
  45%{bottom: 0%;right: 70%; transform: rotateY(0deg) rotate(6deg);}
  50%{bottom: 2%;right: 80%; transform: rotateY(0deg);}
  51%{bottom: 0%;right: 80%; transform: rotateY(180deg);}
  55%{bottom: 2%;right: 70%; transform: rotateY(180deg) rotate(0deg);} 
  60%{bottom: 0%;right: 60%; transform: rotateY(180deg);}
  65%{bottom: 2%;right: 50%; transform: rotateY(180deg) rotate(6deg);}
  70%{bottom: 0%;right: 40%; transform: rotateY(180deg);}
  75%{bottom: 2%;right: 30%; transform: rotateY(180deg) rotate(0deg);}
  80%{bottom: 0%;right: 20%; transform: rotateY(180deg);}
  85%{bottom: 2%;right: 10%; transform: rotateY(180deg) rotate(6deg);}
  90%{bottom: 0%;right: 0%; transform: rotateY(180deg);} 
  95%{bottom: 2%;right: -10%; transform: rotateY(180deg);}
  100%{bottom:0%;right: -20%; transform: rotateY(180deg);}
}
 


@-webkit-keyframes fuwafuwa /* Safari and Chrome */{
  0%{bottom: 0%;right: -20%; -webkit-transform: rotateY(0deg);}
  5%{bottom: 0%;right: -10%; -webkit-transform: rotateY(0deg);}
  10%{bottom: 2%;right: 0%; -webkit-transform: rotateY(0deg);}
  15%{bottom: 0%;right: 10%; -webkit-transform: rotateY(0deg);}
  20%{bottom: 2%;right: 20%; -webkit-transform: rotateY(0deg);}
  25%{bottom: 0%;right: 30%; -webkit-transform: rotateY(0deg) rotate(6deg);}
  30%{bottom: 2%;right: 40%; -webkit-transform: rotateY(0deg);}
  35%{bottom: 0%;right: 50%; -webkit-transform: rotateY(0deg) rotate(0deg);}
  40%{bottom: 2%;right: 60%; -webkit-transform: rotateY(0deg);}
  45%{bottom: 0%;right: 70%; -webkit-transform: rotateY(0deg) rotate(6deg);}
  50%{bottom: 2%;right: 80%; -webkit-transform: rotateY(0deg);}
  51%{bottom: 0%;right: 80%; -webkit-transform: rotateY(180deg);}
  55%{bottom: 2%;right: 70%; -webkit-transform: rotateY(180deg) rotate(0deg);} 
  60%{bottom: 0%;right: 60%; -webkit-transform: rotateY(180deg);}
  65%{bottom: 2%;right: 50%; -webkit-transform: rotateY(180deg) rotate(6deg);}
  70%{bottom: 0%;right: 40%; -webkit-transform: rotateY(180deg);}
  75%{bottom: 2%;right: 30%; -webkit-transform: rotateY(180deg) rotate(0deg);}
  80%{bottom: 0%;right: 20%; -webkit-transform: rotateY(180deg);}
  85%{bottom: 2%;right: 10%; -webkit-transform: rotateY(180deg) rotate(6deg);}
  90%{bottom: 0%;right: 0%; -webkit-transform: rotateY(180deg);} 
  95%{bottom: 2%;right: -10%; -webkit-transform: rotateY(180deg);}
  100%{bottom:0%;right: -20%; -webkit-transform: rotateY(180deg);}
}
 



#wrap{
	width: 100%;
	background: #73d1cc;
	background: -moz-linear-gradient(top, #73d1cc, #00417b);
	background: -webkit-linear-gradient(top, #73d1cc,#00417b);
	background: linear-gradient(to bottom, #73d1cc,#00417b);
	position: relative;
	overflow: hidden;
}


#contents_wrap{
	width: 900px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 200px;
}
#contents_wrap_goods{
	width: 900px;
	margin: 0 auto;
	text-align: center;
}


footer{
	padding: 80px 0 20px;
	background: #FFF;
	color: #000;
	text-align: center;
}

footer .inner{
	width: 690px;
	margin: 0 auto;
}
footer .inner2{
	width: 850px;
	margin: 0 auto;
}

footer #logo_area{
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 30px;
}
footer #logo_area2{
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 30px;
} 


footer #logo_area div{
	text-align: left;
	float: left;
	width: 45%;
	border-right: 1px solid #e5e5e5;
	padding: 0 30px;
	margin-bottom: 20px;
}
footer #logo_area2 div{
	text-align: left;
	width: 100%;
	padding: 0 30px;
	margin-bottom: 20px;
}

footer #logo_area div:first-child,
footer #logo_area2 div:first-child{
	padding-left: 0;
}

footer #logo_area div:last-child{
	float: left;
	width: 50%;	
	border-right:none;
	padding-right: 0;
}
footer #logo_area2 div:last-child {
	width: 100%;	
	border-right:none;
	padding: 0;
}

footer #logo_area p,
footer #logo_area2 p{
	font-weight: bold;
	margin-bottom: 12px;
} 

footer #logo_area div:last-child img{
	margin-right: 10px;
}

footer #logo_area img:last-child{
	margin-right: 0;
}

footer #logo_area2 img {
	margin-bottom: 20px;
}
footer #logo_area2 a{
	margin-right: 10px;
}
footer #logo_area2 a:last-child{
	margin-right: 0;
}


footer #banner_area {
	margin-bottom: 30px;
} 

footer #banner_area img{
	margin: 0 15px;
}
.banner-history {
	margin-bottom: 20px;
}


#illust_bottom_area{
	position: relative;
	margin-bottom: -88px;
}


.illust_bottom_01{
	position: absolute;
	bottom: 0%;
	right: -40%;
	animation:fuwafuwa2 24s infinite normal linear;
	-webkit-animation:fuwafuwa2 24s infinite normal linear;
	-moz-animation:fuwafuwa2 24s infinite normal linear;
	transform: translateX(50%);
	-moz-transform: translateX(50%);
	-webkit-transform: translateX(50%);
}

.illust_bottom_02{
	position: absolute;
	bottom: 0%;
	right: -40%;
	animation:fuwafuwa2 24s infinite 6s linear;
	-webkit-animation:fuwafuwa2 24s infinite 6s linear;
	-moz-animation:fuwafuwa2 24s infinite 6s linear;
 }

.illust_bottom_03{
	position: absolute;
	bottom: 0%;
	right: -40%;
	animation:fuwafuwa2 24s infinite 12s linear;
	-webkit-animation:fuwafuwa2 24s infinite 12s linear;
	-moz-animation:fuwafuwa2 24s infinite 12s linear;
	transform: translateY(10%);
	-moz-transform: translateY(10%);
	-webkit-transform: translateY(10%);
}

.illust_bottom_04{
	position: absolute;
	bottom: 0%;
	right: -40%;
	transform: translateX(50%);
	-moz-transform: translateX(50%);
	-webkit-transform: translateX(50%);
	animation:fuwafuwa2 24s infinite 18s linear;
	-webkit-animation:fuwafuwa2 24s infinite 18s linear;
	-moz-animation:fuwafuwa2 24s infinite 18s linear;
 } 
  
@keyframes fuwafuwa2{
  0%{bottom: -5%;right: -40%; transform: rotate(0deg);}
  10%{bottom: -5%;right: -20%; transform: rotate(6deg) translateY(10%);}
  20%{bottom: -2%;right: 0%; transform: rotate(0deg);}
  30%{bottom: -2%;right: 20%; transform: rotate(6deg) translateY(10%);}
  40%{bottom: -5%;right: 40%; transform: rotate(0deg);}
  50%{bottom: -5%;right: 60%; transform: rotate(6deg) translateY(10%);}
  60%{bottom: -2%;right: 80%; transform: rotate(0deg);}
  70%{bottom: -2%;right: 100%; transform: rotate(6deg) translateY(10%);}
  80%{bottom: -5%;right: 120%; transform: rotate(0deg);}
  90%{bottom: -5%;right: 140%; transform: rotate(6deg) translateY(10%);} 
  100%{bottom:-2%;right: 160%; transform: rotate(0deg);}
}
   
  
 
 #canvas-container2{
	 position: relative;
	 z-index: 100;
 }
 

/*section-----------------------------------------*/

.topics {
	position: relative;
	z-index: 100;
}

section{
	text-align: left;
	margin-bottom: 100px;
	position: relative;
}

.section_top{
	display: block;
	width: 100%;
	height: auto;
}

section .inner{
	width: 100%;
	background: url(../img/section_bg.png) repeat-y;
	background-size: contain;
	padding: 30px 78px 20px 78px;
}

.section_bottom{
	display: block;
	width: 100%;
	height: auto;
}

section h2{
	text-align: center;
	position: absolute;
	top: 10px;
	left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

section h3.section_title {
	font-size: 126%;
	font-weight: 300;
	color: #fff;
	letter-spacing: 0.07em;
	margin: 0 0 30px;
	padding: 6px 15px;
	background-color: #512b18;
}
.marker {
	background: linear-gradient(rgba(245,227,78,0) 65%,#f5e34e 65%);
}
.marker2 {
	border-bottom: #f5e34e 2px solid;
	padding-bottom: 2px;
}


section h4{
	font-size: 107%;
	margin-bottom: 10px;
}
section hr {
	border-top: #512b18 2px dashed;
	margin-bottom: 30px;
	padding-bottom: 30px;
}
section .devide {
	margin-bottom: 40px;
}
section dl {
	margin-bottom: 30px;
}

section dt{
	background: url(../img/dt_bg.png) no-repeat;
	padding: 8px 10px;
	color: #FFF;
	font-size: 107%;
}

section dd{
	padding: 15px 0;
}


section li{
	padding-left: 17px;
}

section li:before{
	content: "●";
	margin-left: -17px;	
	margin-right: 5px;
}

section .link{
	margin-bottom: 20px;	
}

section .out{
	margin-bottom: 5px;	
}

section .notice{
	font-size: 85%;
}


section .btn{
	text-align: center;
}

.btn_link {
	margin: 20px 0;
}
.btn_link02 {
	margin: 0 0 40px;
}

.btn_link a,
.btn_link02 a {
	font-size: 13px;
	font-weight: bold;
	padding: 12px 15px;
	border-radius: 5px;
	background-color: #f5e34e
}



/*lineup-----------------------------------------*/


section#lineup{
	position: relative;
	text-align: center;
	background: none;
	padding: 20px 10px 20px 10px;
	margin-bottom: 40px;
}

.telescope {
	width: 120px;
	position: absolute;
	top: 10px;
	left: 55%;
}
#lineup h2{
	margin-bottom: 50px;
	position: relative;
    transform: translate(0%, 0%);
    -moz-transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
    -ms-transform: translate(0%, 0%);
	top: 0;
	left: 0;
}

#lineup .artist_wrap.topics h2{
	margin-bottom: 30px;
}


#lineup h2 img{
	margin-top: -100px;

}

#lineup .artist_wrap .a_inner{
	width: calc(100% + 10px);
}

#lineup .artist_wrap.topics .a_inner{
	width: calc(100% + 20px);
}

#lineup .artist_wrap{
	width: 900px;
	margin: 0 auto;
}

#lineup .artist_wrap.topics{
	padding-top: 100px;
}


#lineup .artist_wrap.large{
	width: 1200px;
	margin: 0 auto;
}
#lineup .artist_wrap.small{
	width: 300px;
	margin: 0 auto;
}



#lineup .artist_wrap div.artist img.new{
	display: block;
	position: absolute;
	top:-10px;
	left: 0;
}


#lineup .artist_wrap div.artist{
	float: left;
	text-align: center;
	width: 33.333%;
	padding: 0 10px;
	margin-bottom: 45px;
	position: relative;
}


#lineup .artist_wrap.large div.artist{
	float: left;
	text-align: center;
	width: 25%;
	padding: 0 10px;
	margin-bottom: 45px;
	position: relative;
}
#lineup .artist_wrap.small div .artist{
	text-align: center;
	width: 100%;
	padding: 0 10px;
	margin-bottom: 45px;
	position: relative;
}
#lineup .artist_wrap.topics div.artist{
	float: left;
	text-align: center;
	width: 25%;
	padding: 0 10px;
	margin-bottom: 45px;
	position: relative;
}

#lineup .artist_wrap div.artist p{
	font-weight: 600;
	font-size: 124%;
	color:#fff;
}

@media only screen and (min-width: 970px) {

#lineup .artist_wrap div.artist p.kiichibeer{
	font-weight: 600;
	font-size: 115%;
	color:#fff;
}

}


.andmore {
	margin: 0px 0 40px;
}
#lineup .btn {
	width: 100%;
	margin: auto;
	text-align: center;
}

.artist_img {
  animation: uneune 5s linear infinite;
  -moz-animation: uneune 5s linear infinite;
  -webkit-animation: uneune 5s linear infinite;
  -ms-animation: uneune 5s linear infinite;
  width: 100%;
  height: 180px;
  overflow: hidden;
  margin-bottom: 20px;
}

#lineup .artist_wrap.topics .artist_img {
  width: 100%;
  height: auto;
}
.artist_img img{
	width: 105%;
	height: auto;
	margin-top: -2%;
}

#lineup .artist p a span {
	font-size: 12px;
	line-height: 1.5 !important;
}


@keyframes uneune{
  0% {border-radius: 60% 30% 40% 80% / 40% 40% 60% 60%;} 
  25% {border-radius: 50% 40% 50% 60% / 60% 50% 40% 40%; }
  50% {border-radius: 30% 20% 60% 40% / 40% 30% 60% 40%;}
  75% {border-radius: 30% 40% 30% 50% / 40% 40% 60% 50%;}
  100% {border-radius: 60% 30% 40% 80% / 40% 40% 60% 60%;}
}


/*guidemap-----------------------------------------*/

#guidemap img.map{
	width: 100%;
	height: auto;
}


/*museum-----------------------------------------*/

.present h3 {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin: 0 0 30px;
}
#museum p {
	font-size: 18px;
	text-align: center;
}
section#museum .inner{
	background-size: contain;
}
#museum .museum_wrap .a_inner{
	width: calc(100% + 10px);
}

#museum .museum_wrap.topics .a_inner{
	width: calc(100% + 20px);
}

#museum .museum_wrap{
	width: 565px;
	margin: 0 auto;
}

#museum .museum_wrap.topics{
	padding-top: 100px;
}


#museum .museum_wrap.large{
	width: 740px;
	margin: 0 auto;
}
#museum .museum_wrap.small{
	width: 300px;
	margin: 0 auto;
}
#museum .museum_wrap div.museum{
	float: left;
	text-align: center;
	width: 33.333%;
	padding: 0 8px;
	margin-bottom: 30px;
	position: relative;
}
.museum_img {
  width: 100%;
  overflow: hidden;
}
.museum_img img {
  width: 100%;
  border: 3px #512b18 solid;
  margin-bottom: 10px;
 }


#museum .museum_wrap.large div.museum{
	float: left;
	text-align: center;
	width: 25%;
	padding: 0 8px;
	margin-bottom: 30px;
	position: relative;
}
#museum .museum_wrap.small div.museum{
	text-align: center;
	width: 100%;
	padding: 0 8px;
	margin-bottom: 30px;
	position: relative;
}
#museum .museum_wrap.topics div.museum{
	float: left;
	text-align: center;
	width: 25%;
	padding: 0 8px;
	margin-bottom: 30px;
	position: relative;
}

.devide_wrap {
	margin: 0 0 40px;
}


/*goods-----------------------------------------*/

#goods {
	margin-top: 80px;
}
#goods img{
	width: 100%;
	height: auto;
}
#goods p {
	font-size: 18px;
	text-align: center;
}

/*timetalbe-----------------------------------------*/


section#timetable {
	text-align: center;
	margin-bottom: 60px;
	position: relative;
}
.bird01 {
	position: absolute;
	right: 130px;
	top: -60px;
}
	

/*info-----------------------------------------*/


section#info .data{
	font-size: 170%;
	margin-bottom: 8px;
	font-weight: bold;
}


section#info .time{
	font-size: 114%;
	font-weight: bold;
}


section#info .place{
	font-size: 114%;
	font-weight: bold;
	margin-bottom: 10px;
}

section#info a{
	display: block;
	margin-top: 5px;
}



/*ticket-----------------------------------------*/

.soldout {
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	margin: 0 0 20px;
}
.soldout span {
	color: red;
	display: block;
	margin: 0 0 5px;
}
.soldout .other-ticket {
	font-size: 16px;
	margin: 5px 0 0;
}
section#ticket th{
	font-size: 107%;
	font-weight: bold;
	padding-right: 12px;
}


section#ticket td.price{
	font-size: 184%;
	font-weight: bold;
}
section#ticket td.price span{
	font-size: 60% !important;
	padding-left: 15px;
}

section#ticket td.data{
	font-size: 153%;
	font-weight: bold;
}

.tb-ticket {
	width: 500px;
	border: 2px solid #512b18;
	margin: 15px 0 20px;
	text-align: center;
	background-color: #fff;
}
.tb-ticket th,.tb-ticket td {
	font-weight: bold;
	padding: 10px 15px;
}
.tb-ticket th {
	border-right: 1px solid #e5e5e5;
}
.tb-ticket thead th {
	padding: 6px 15px;
	color: #fff;
	background-color: #512b18;
}
.tb-ticket tbody tr:nth-child(even) {
	background: #f2f2f2;
}


/*bus-----------------------------------------*/

section#bus .inner{
	background-size: contain;
}
section#bus .lead{
	font-size: 114%;
	font-weight: bold;
	line-height: 1.64;
	text-align: center;
	padding: 60px 0;
}
section#bus .bus_list{
	border: 2px solid #512b18;
	padding: 20px 15px;
	margin-bottom: 15px;
	background-color: #fff;
}

section#bus .bus_list h4{
	font-size: 123%;
	margin-bottom: 10px;
}

section#bus .bus_list p {
	margin: 0;
}
section#bus .bus_list hr {
	margin: 20px 0;
	padding-bottom: 0;
	border-top: none;
	border-bottom: 1px solid #e5e5e5;
}



section#bus .bus_list th{
	padding: 5px 15px 5px 0;

}

section#bus .bus_list th:before{
	content: "●";

}




/*parking-----------------------------------------*/

section#parking .inner{
	background-size: contain;
}
section#parking .leadcopy {
	font-size: 136%;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
}
section#parking .lead{
	font-size: 114%;
	font-weight: bold;
	line-height: 1.64;
	text-align: center;
	padding: 60px 0;
}
section#parking .parking_list,
section#parking .parking_list2{
	width: 360px;
	float: left;
	margin-right: 20px;
	border: 2px solid #512b18;
	padding: 15px 15px;
	margin-bottom: 15px;
	background-color: #fff;
}
section#parking .parking_list2{
	border: none;
	padding: 0;
	margin-bottom: 30px;
	background-color: transparent;
}
section#parking .parking_list:last-child,
section#parking .parking_list2:last-child {
	margin-right: 0;
}

section#parking .parking_list h4{
	font-size: 123%;
	margin-bottom: 10px;
}
section#parking .parking_list2 h4{
	margin-bottom: 20px;
}


section#parking .parking_list th{
	padding: 3px 15px 3px 0;

}

section#parking .parking_list p{
	padding: 3px 0;

}



/*cloak-----------------------------------------*/

div#cloak .inner{
	background-size: cover;
}


div#cloak .cloak_list{
	margin-right: 20px;
	border: 2px solid #512b18;
	padding: 15px 15px;
	margin-bottom: 80px;
	line-height: 1.8;
	background-color: #fff;

}

section#cloak .cloak_list h4{
	font-size: 123%;
}
	


/*notice-----------------------------------------*/

section#notice .lead{
	font-size: 126%;
	font-weight: bold;
	line-height: 2.0;
	text-align: center;
	margin-bottom: 30px;
}


section#notice ul{
	margin-bottom: 40px;
}

section#notice li{
	margin-bottom: 20px;
}




/*bringing-----------------------------------------*/

section#bringing {
	margin-bottom: 120px;
}


div#bringing dl{
	margin-bottom: 30px;
}

div#bringing dt{
	background: none;
	padding: 0px;
	color: #512b18;
	font-size: 100%;
	margin-bottom: 20px;
}

div#bringing dd{
	padding: 0;
	margin-bottom: 20px;
}

div#bringing dd:last-child{
	padding-bottom: 0px;
	margin-bottom: 0px;
	background: transparent;
}


div#bringing li{
	margin-bottom: 20px;
}




/*openmenu-----------------------------------------*/


.openmenu * {
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  font: inherit;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
  list-style: none;
}

.openmenu a {
  color: inherit;
  text-decoration: none;
}

.openmenu a:visited {
  color: inherit;
}

.openmenu_bg {
	background: url(img/menu-bg.png) no-repeat center center;
}

.openmenu .openmenu_btn {
	display: block;
	background: none;
	border: none;
	padding: 0;
	width: 60px;
	height: 60px;
	padding: 20px 15px;
	background: #512b18;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	letter-spacing: 0.1em;
	cursor: pointer;
	position: fixed;
	top: 32px;
	right: 32px;
	z-index: 1001;
	text-align: center;
	outline: none;
}



.openmenu .openmenu_btn .toggle {
  background-color: #fff;
  display: block;
  height: 2px;
  margin-bottom: 7px;
  transition: all 0.2s;
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transform-origin: 0 0;
  width: 100%;
}




.openmenu .openmenu_btn.active .toggle:nth-child(1) {
	transform:translateX(3px) rotate(40deg);
	-moz-transform:translateX(3px) rotate(40deg);
	-webkit-transform:translateX(3px) rotate(40deg);
	-ms-transform:translateX(3px) rotate(40deg);
}

.openmenu .openmenu_btn.active .toggle:nth-child(2) {
	opacity: 0;
}

.openmenu .openmenu_btn.active .toggle:nth-child(3) {
	transform:translateX(3px) rotate(-40deg);
	-moz-transform:translateX(3px) rotate(-40deg);
	-webkit-transform:translateX(3px) rotate(-40deg);
	-ms-transform:translateX(3px) rotate(-40deg);
}



.openmenu .openmenu_nav_wrapper{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	background: url('../img/menu-bg.png') no-repeat center center;
	background-color: rgba(81,43,24,1);
	padding: 40px 30px;
	overflow-y: auto;
	opacity: 0;
	text-align: center;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-ms-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	pointer-events: none;
}

.openmenu .openmenu_nav_wrapper.open {
	opacity: 1;
	pointer-events: auto;
}


.openmenu .openmenu_nav {
	padding-top: 50px;
	line-height: 2;
}

.openmenu .openmenu_nav li {
  font-size: 136%;
  font-weight: bold;
  margin-bottom: 20px;
}
.openmenu .openmenu_nav li a {
	color: #fff;
	border-bottom: 2px solid #fff;
	letter-spacing: 0.1em;
	padding: 0 0 5px;
}


.apology_btn {
	position: relative;
	z-index: 100;
	width: 650px;
	text-align: left;
	text-indent: 1em;
	margin: 30px auto 50px;
}
.apology_btn h2 {
	font-size: 18px;
	margin: 0 0 20px;
}
.apology_btn h2 span {
	border-bottom: #512b18 2px solid;
	padding-bottom: 3px;
}
.apology_btn a {
	border-bottom: #512b18 1px solid;
}
.apology_body {
}
.apology {
	text-align: center;
	padding: 40px 0;
}
.apology h1 {
	font-size: 16px;
	margin: 0 0 30px;
}
.apology p {
	font-size: 14px;
}
.apology_body #copylrght {
	text-align: center;
	color: #fff;
	margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
	.apology {
		text-align: left;
		width: 90%;
		margin: auto;	
	}
	.apology_body {
		height: 100%;
	}
}





/*intro-----------------------------------------*/


.intro {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 9998;
	background: url('../img/loading_top.jpg') no-repeat center / cover;
	overflow: hidden;
}
.intro-inner {
	width: 200%;
	height: 200%;
	position: absolute;
	z-index: 9999;
	background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 1) 120px, rgba(0, 0, 0, 1));
	-webkit-transform: translate(-44%, -44%);
	        transform: translate(-44%, -44%);
}
.intro-inner::after {
	content: '';
	background: url('../img/loading_mark.svg') no-repeat center / 260px;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 1;
	transition: opacity .8s;
}
.fadeOut.intro-inner::after {
	opacity: 0;
}

@media only screen and (max-width: 768px) {
	.intro {
		background: url('../img/loading_top_sp.jpg') no-repeat center / cover;
	}
	.intro-inner {
		background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 90px, rgba(0, 0, 0, 1) 110px, rgba(0, 0, 0, 1));
	}
	.intro-inner::after {
		background-size: 240px;
	}
}
@media only screen and (max-width: 540px) {
	.intro-inner {
		background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 1) 85px, rgba(0, 0, 0, 1));
	}
	.intro-inner::after {
		background-size: 190px;
	}
}