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

/* icomoon */
@font-face {
  font-family: 'icomoon';
  src:  url('../eot/icomoon7719.eot?md06yz');
  src:  url('../eot/icomoon7719.eot?md06yz#iefix') format('embedded-opentype'),
url('../ttf/icomoon7719.ttf?md06yz') format('truetype'),
url('../woff/icomoon7719.woff?md06yz') format('woff'),
url('../svg/icomoon7719-2.svg?md06yz#icomoon') format('svg');
  font-weight: normal;font-style: normal;}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important; speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}
.icon-triangle-down:before {content: "\f05b";}
.icon-triangle-left:before {content: "\f044";}
.icon-triangle-right:before {content: "\f05a";}
.icon-triangle-up:before {content: "\f0aa";}

html { -webkit-text-size-adjust: none; -webkit-font-smoothing: aliased; -webkit-overflow-scrolling: touch; font-size: 62.5%; font-family: 'Roboto Slab', serif;}
body {margin: 0 auto; width:100%; padding: 0; background:#000; font-size: 2.3rem; font-weight: 400; color:#fff; line-height:160%;}

/*FONT*/
p{margin:16px 0; font-size: 100%;}
.ss-font{font-size:75%; line-height: 150%;}
.center{text-align: center;}
strong{ font-weight: 600;}
H1{font-weight: 600; font-size: 3.2rem; line-height: 120%; margin:10px 0 26px 0; padding:0;}
H2{font-weight: 600; font-size: 3.2rem; line-height: 120%; margin:10px 0 26px 0; padding:0;}
H3{font-weight: 600; font-size: 3rem; line-height: 120%; margin:33px 0 10px 0; padding:0;}
.mark:before {content:"◼︎"; font-size:80%;  padding-right: 8px;}
.pictext p{text-align: center;padding: 12px 0; margin: 0;}
.inline{display: inline;}

/*WIDTH, MARGIN, PADDING*/
section, article, header, footer, div{ width: 100%; margin:0 auto; padding:0; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box; }
header, footer, div, ul{ max-width: 1600px;}
div{padding:30px 0;}
ul{width: 100%; margin:0 auto; padding:0; list-style-type:none;}
li{margin:0 auto; -moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; padding:0; margin-bottom: 10px; line-height: 130%; float: left;}
li a{padding:10px 20px;}
.line-box-wh{border:#fff 1px solid;}
.line-box-bk{border:#999 1px solid;} .line-box-bk a{color: #111;}
.pad-up{padding-bottom:60px;}
.wd-100{width: 100%; max-width: 100%; }
.wd-95{width: 95%; margin-left: auto; margin-right: auto;}
.wd-90, .wd-60{width: 90%; max-width: 1400px; margin-left: auto; margin-right: auto;}
@media screen and (min-width:960px) {.wd-60{width: 60%;}}
.pat-0{padding-top: 0;}

/*mobile-2ko PC-4ko*/
li.bl4{width: 50%; padding-right:10px;} 
@media screen and (min-width:760px) {
	li.bl2{width: 50%; padding-right:10px;} /*mobile-1ko PC-2ko*/
	li.bl3{width: 33%; padding-right:10px;} /*mobile-1ko PC-3ko*/
	li.bl4{width: 25%; padding-right:10px;} /*mobile-2ko PC-4ko*/
}

/*BACKGROUND*/
.bg-wh{background: #fff; color: #111; font-weight: 500;} 
.bg-bk{background: #000; color: #fff;}
.bg-red{background: darkred; color: #fff;}
.bg-ye{background:#987D10; color: #fff;}
.bg-nby{background:#072B40; color: #fff;}
.bg-tea {color: #FFF; background: url(../png/contents-bg-3.png) repeat;}

/*LINK, BUTTON*/
a{text-decoration:none;display:block; color: #fff;}
a:link{text-decoration:none;display:block;}
a:hover{text-decoration:none; opacity: 0.7;}
a:hover img{ opacity: 0.9;}
a:visited{text-decoration:none;}

a.in-dash{border: 1.2px dashed; display:inline-block; margin: 4px; padding: 0 12px;}
a.bt-100{padding: 12px 5px; margin: 0; text-align: center;}
div.bt-center{text-align: center;margin: 16px auto; width: auto; border-radius: 6px;}
div.bt-center a{padding: 24px 46px; width: auto; height: auto; text-align: center; display: inline; line-height: 100%;}
div.bt-100{text-align: center;margin: 16px auto 0 auto; width: 100%;padding: 18px 5px;border-radius: 6px;}
div.bt-100 a{ margin: 0; text-align: center; display: inline; line-height: 100%;}

/*IMAGE, FLOAT*/
img{ width:100%; height:auto; display:block; margin:0; padding:0;border:0px;}

.clearfix:after { /*floatの解除*/
display:block;clear:both;height:0px;visibility:hidden;content:".";}
.clearfix {min-height: 1px; }
* html .clearfix {height: 1px; height: auto; overflow: hidden;}

.clear{clear: both; padding: 0;}
.clear_r{clear:right; padding: 0;}
.left{float:none;padding: 0;margin-bottom: 16px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;} 
.right{float:none;padding: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;}
a.left, a.right{padding: 0 14px; }
/*picture in text*/
.in-left, .in-right{float:none;padding: 0;margin-top: 16px;margin-bottom: 16px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;} 

@media screen and (min-width:960px) {
	.left{float: left; width: 49%; margin-right: 1%;margin-bottom: 0; } 
	.right{float: right; width: 49%; margin-left: 1%; }
	.in-left{float: left; width: 50%; padding: 0; margin-right:40px; margin-bottom: 12px; }
	.in-right{float: right; width: 50%; padding: 0; margin-left:40px; margin-bottom: 12px; } 
	.m-pic{width: 30%;}
	br.mo{display:none;} /*mobile-kaigyo PC-no*/
}

/*HEADER*/
header{width:100%; height:106px; position:relative; z-index: 9999;}
header H1{font-size:1.2rem; margin:0 0 0 5px;}
.logo{display: block; width:55%; max-width: 300px; height:auto; margin: 8px 5px 0 5px;}

table.menu{ width:100%; font-size:12px; margin-top:12px;}
table.menu th{width:16%;}
table.menu img{width:50px; height:auto; margin:0 auto;}
table.menu a{line-height:110%;}
table.menu a.maikoya{background:#999900; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; width:85%; height:35px; padding-top:5px;}

ul.lang{position:absolute; top:0; right:0; width:40%;}
ul.lang li{width:50%; margin: 0; padding: 0; float: left; }
ul.lang li a{font-size: 1.1rem;text-align: center; line-height: 100%; padding: 8px; vertical-align:middle;}
ul.lang li img{height: 10px; width: auto;display:inline;}
ul.lang a.nihon{margin: 0; color: #000; background:#ccc; border-right: #000 2px solid;}
ul.lang a.ag{ color: #000; background: #D2CA9B;}
.comment{background-color:DarkSlateGray;padding:10px; margin: 0;}
.comment p{margin: 0; font-size: 2rem; line-height: 120%; color:#fff; text-align: center; }

@media screen and (min-width: 960px) {
header{height:60px;}
table.menu{width:400px; position:absolute; top:10px; left:330px; margin-top:0;}
table.menu img{width:60px; height:auto; margin:0 auto;}
ul.lang{max-width:240px;}
}

/*FOOTER*/
footer { text-align:center; margin-bottom:80px;}
footer div{padding: 0;}
footer a.blog{padding:2px 5px; border:1px solid #FFF; text-align:center; display:inline;}
footer span{padding-right:12px;}
iframe.map {width: 100%; height:360px;}
p.dot-line{border-bottom:2px dotted #666;font-size: 2.0rem;line-height:110%;}


@media screen and (min-width: 960px) {
p.dot-line{display: inline-block; margin: 16px;}
footer .ss-font{text-align: left;}
}

/*footer ３列わけ*/
ul.three{width:100%; margin-bottom: 30px;} 
ul.three li{width: 100%; margin:16px 0; margin-bottom: 10px; font-size:85%; line-height:130%; padding:0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box; border: #fff 1px solid;}
@media screen and (min-width:960px)  {
ul.three {overflow: hidden;}
ul.three li{ float: left; width: 31%; margin-right: 2%;}
}


/*booking*/
#booking-fixed a{position: fixed; bottom:0; left:0; width:100%; height:60px;  z-index:2000; background:maroon; color:#FFF; text-align:center; font-weight: 500; line-height:60px;}
@media screen and (min-width: 960px) {#booking-fixed a{left:50%;width:50%;}}

/*basic ticket infomation*/
ul.basic-list {display: flex; flex-direction: row;flex-wrap: wrap;align-content: space-between;}
ul.basic-list li{flex-basis:50%;padding-right:10px;}
@media screen and (min-width:960px) {ul.basic-list li{flex-basis:25%;padding-right:10px;}}
.ticket-info{background:#072B40; padding:20px 30px; border-radius:6px;} 
.ticket-info h2{margin: 0;}

/*link to each page on bottom*/
.link-samurai{position: relative;}
.sq-text{padding:20px; padding-top: 6px; background: rgba(0,0,0,1); width: 100%; height: auto; margin: 0; color: #fff; line-height: 150%;}
.sq-text .learn-more{padding: 6px 16px;} .sq-text p{color: #fff;}
@media screen and (min-width: 960px) {
.sq-text{position: absolute; top:40px; left: 30px; height: 370px; width: 380px;background: rgba(0,0,0,0.7); overflow: hidden;padding:0px 30px; }
.sq-text p{font-size: 2rem;line-height: 140%;}
.sq-text .learn-more{position: absolute; left:30px; bottom:20px; width: 260px;}
.sq-text.ninja{top:45%; left: 15px; height: 45%; width : -webkit-calc(100% - 30px) ; width : calc(100% - 30px) ;}
.sq-text.ninja .learn-more{left:70%; top:20px; height:30px; width: 25%; line-height:30px;}
.sq-text.museum{top:-webkit-calc(50% - 185px); top:calc(50% - 185px); left:25%; height: 370px; width: 400px;}
}
@media screen and (min-width: 1100px) {.sq-text{top:10%; } .sq-text.ninja{top:50%; height: 40%; }}
@media screen and (min-width: 1350px) {.sq-text.ninja{top:60%; height: 30%; }}

/*Ninja Facts*/
.bg-ninja{ background: #000;}
.facts-image{display: block; padding: 0;}
.facts-cont{ width:90%; margin:0 auto; padding: 0;}
@media screen and (min-width: 960px) {
.bg-ninja{ background: #000 url("../jpg/ninja-facts-pc.jpg") no-repeat left top/50%;}
.facts-image{display: none;}
.facts-cont{ width:45%; margin-top:20px; margin-left:50%; padding: 10px 0;}
}

/*About Page*/
.map-wrapper{text-align:center;font-size:2.3rem; }
.map-wrapper a{display: inline-block; }
.map-txt span{padding-right:12px;}
.map iframe {width: 100%; height:400px;}
.map-txt p.dot-line{border-bottom:2px dotted #fff;}
@media screen and (min-width: 960px) {
.map-txt p.dot-line{display: inline-block; margin:0 16px;}
}