@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Questrial);

/*リセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, input, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, object, embed
{
margin: 0px; 
padding: 0px; 
border: 0px; 
outline: 0px; 
}

dl, dt, dd, ol, ul, li {
list-style:none;
}

img {
border: 0;
}

li {
list-style: none;
}

input,
button,
textarea,
select,
optgroup,
option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
}
b{ font-weight:bold}

/***************************************
 * Global
 ***************************************/

* {
  padding:0;
  margin: 0;
}

html {
  height: 100%;
  position:relative;
}

body {
  font-family:'Questrial',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color:#000; 
  height:100%;
  font-weight:100;
  background-color:#f0edea;
  position:relative;
  overflow:hidden;
}
#wrapper{
position:relative;
height:100%;
display:block;
}
#img{
  background: #f0edea url(../images/honmaru_map.png?200322) no-repeat center 0px/contain;
  width:1000px;
  height: 638px;
  z-index:0;
  position: absolute;
  left: 50%;
  margin-left: -500px;
  top: 130px;
}


.scroll{
background:url(../images/scroll.png) no-repeat center center/100%;
width:70px;
height:30px;
position:fixed;
bottom:10%;
left:50%;
margin-left:-35px;
z-index:1000;
text-indent:-9999px;
}

#loader img{ width:40px}
.sp_only{ display:none!important}
.pc_only{ display:block!important}

a#all{ position:absolute; z-index:1000; top:0; left:0; width:100%; height:100%; display:block; cursor:pointer}
.none{display:none!important}

@media only screen and (max-width: 768px) {
.sp_only{ display:block!important}
.pc_only{ display:none!important}
html,body{height:auto}
#wrapper{ overflow-x:scroll; height:100vh;}
#img{ width:660px; height:520px;margin-left:0; left:0; top:55px; background-size:100%;}
}


/* 点滅 */
.blinking{
-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/***************************************
 * Common
 ***************************************/


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

a {
  color: #000;
  text-decoration:none;
}

img {
  vertical-align: bottom;
}

a:hover  { 
  text-decoration:none;
}

input, select, textarea {
  font-size: 100%;
}

button {
  padding: 5px 40px;
  border-radius: 5px;
  color: #fff;
  font-size: 90%;
  font-weight: bold;
  cursor: pointer;
}

.element2 {
  display: block;
}

.gray {
  background-color:#eeeeee;
}

.fl_left{ float:left}
.fl_right{ float:right}

.clear{ clear:both}

.sp_only{ display:none}

/***************************************
 * Layout
 ***************************************/
 
#contents {
  width: 100%;
  height:100%;
  position:absolute;
  z-index:10;
  left:0;
  top:0;
}

 
#contents.clap{ background-color:rgba(0,0,0,0.9); text-align:center; color:white; overflow:scroll} 
#contents.clap > div{ padding-top:150px;}
#contents.clap p{ padding-top:20px}
#contents.clap form{ width:30%; margin:10px auto 10px auto; text-align:left}
#contents.clap form input,
#contents.clap form textarea{ display:block; padding:10px; width:100%; border:none; margin-bottom:10px;-webkit-appearance: none;}
#contents.clap form input[type="submit"]{ background:#eede57; color:#222; cursor:pointer}
#contents.clap form input.good{ background:#eede57 url(../images/good.svg) no-repeat 10px center/5%; font-size:16px; font-weight:bold; cursor:pointer}
#contents.clap form input[type="submit"]:hover{ opacity:0.7}

#contents.clap form a.back{ display:block; padding:5px 0; color:#eede57; margin:20px 0; text-align:center}

@media only screen and (max-width: 768px) {
#contents{}
#contents.clap > div{ padding-top:50px;}
#contents.clap form{ width:95%;}
#contents.clap h1{ font-size:16px!important}
#contents.clap p{ padding:10px; text-align:left}
}


/*==================
 * Header
 */

header {
background:#eede57;
width:260px;
height:260px;
border-radius:50%;
position:fixed;
top:-130px;
left:50%;
margin-left:-130px;
 }


header h1 {
height:100%;
background:url(../images/logo.png) no-repeat center 90%/60%;
margin:0 auto;
text-indent:-9999px;
}

@media only screen and (max-width: 768px) {
header {
width:130px;
height:130px;
top:-75px;
margin-left:-75px;
 }
header h1{ font-size:20px; width:80%}
header h1 span{ display:block; font-size:16px;}
header p.code{ font-size:14px; padding-left:20px}
}


section#timemenu{
position:fixed;
right:24px;
top:24px;
text-align:right;
z-index:1000;
}

section#timemenu a{
display:block;
width:80px;
height:80px;
background:#eede57 url(../images/clock.png) no-repeat center 10px/60%;
color:white;
text-align:center;
font-size:12px;
padding-top:60px;
box-sizing:border-box;
}

section#menu_time.remodal{
max-width:500px;
height:100%;
background:#f0edea;
}

section#menu_time.remodal ul{
display:flex;
flex-wrap:wrap;
padding-top:10%;
}
section#menu_time.remodal ul li{
width:50%;
text-align:center;
font-size:18px;
height:3em;
}


nav{
background:#eede57;
width:5%;
height:100%;
position:absolute;
left:0;
top:0;
}
nav ul{
position:relative;
top:30%;
width:100%;
}

nav ul li a{
display:block;
text-indent:-9999px;
z-index:100;
margin:30px auto;
}
nav ul li a.music{
background:url(../images/music.svg) no-repeat center center;
background-size:100%;
width:30px;
height:30px;
}
nav ul li a.twitter{
background:url(../images/twitter.svg) no-repeat center center;
background-size:100%;
width:30px;
height:30px;
}
nav ul li a.line{
background:url(../images/line.svg) no-repeat center center;
background-size:100%;
width:30px;
height:25px;
}
nav ul li a.mail{
background:url(../images/mail.svg) no-repeat center center;
background-size:100%;
width:30px;
height:25px;
}
nav ul li a.good{
background:url(../images/good.svg) no-repeat center center;
background-size:100%;
width:30px;
height:30px;
}
nav ul li a:hover{ opacity:0.7}


@media only screen and (max-width: 768px) {
section#timemenu{
right:0;
top:0;
}
section#timemenu a{
width:60px;
height:60px;
padding-top:44px
}
section#menu_time.remodal{
width:100%;
}
section#menu_time.remodal h2{ font-size:18px}
section#menu_time.remodal ul li{
width:50%;
font-size:16px;
height:2em;
}
nav{
position:fixed;
height:auto;
width:100%;
top:auto;
bottom:0;
}
nav ul{ position:relative; top:auto; display:flex}
nav ul li{ width:20%;}
nav ul li a{ margin:10px auto;}
nav ul li a.line,
nav ul li a.mail{height:30px;}
}


#map{
width:1000px;
margin:0 auto;
height:100%;
max-height:810px;
position:relative;
}
section#map a{
position:absolute;
background:url(../images/map.svg) no-repeat;
background-size:96%;
width:50px;
height:119px;
text-indent:-9999px;
z-index:1000;
cursor:pointer;
}
section#map a:hover{ opacity:0.5}

section#map a.umagoya{left:30%; top:18%}
section#map a.hatake{left:65%; top:16%}
section#map a.shitsumu{left:30%; top:30%}
section#map a.roka{left:30%; top:37%}
section#map a.radio{left:40%; top:30%}
section#map a.monooki{left:48%; top:30%}
section#map a.kuriya{left:60%; top:30%}
section#map a.shoko{left:35%; top:55%}
section#map a.ohiroma{left:50%; top:55%}
section#map a.engawa{left:72%; top:55%}
section#map a.niwa{left:80%; top:55%}
section#map a.room{left:10%; top:75%}
section#map a.genkan{left:50%; top:85%}
section#map a.dojo{left:90%; top:70%}

@media only screen and (max-width: 768px) {
#map{ position:absolute; left:0; top:0; width:660px; heigh:100vh; max-height:550px;}
section#map a.umagoya{left:30%; top:10%}
section#map a.hatake{left:65%; top:14%}
section#map a.shitsumu{left:30%; top:30%}
section#map a.radio{left:40%; top:30%}
section#map a.monooki{left:48%; top:30%}
section#map a.kuriya{left:60%; top:30%}
section#map a.shoko{left:35%; top:55%}
section#map a.ohiroma{left:50%; top:55%}
section#map a.engawa{left:72%; top:55%}
section#map a.niwa{left:80%; top:55%}
section#map a.room{left:10%; top:80%}
section#map a.genkan{left:50%; top:78%}
section#map a.dojo{left:85%; top:80%}
}


section#secret a.diary{left: 23%;top: 28%;width: 15%;height: 20%;background:none;}
section#secret a.lineLink{left: 36%;top: 53%;width: 10%;height:15%;background:none;}
section#secret a.album{ right:50%; bottom:20%; width:15%; height:15%; background:none}
section#secret a.music{left: 24%;bottom: 20%;width: 11%;height: 20%;background:none;}

section#secret a.memo{left:43%;top: 18%;width:15%;height: 34%;background:none;}

@media only screen and (max-width: 768px) {
section#map a{
width:30px;
height:89px;
}
}

.remodal-wrapper{ padding:0; width:100%}
.remodal{ width:100%; min-height:100%; left:0; top:0; margin-bottom:0; padding:5%; text-align:left;}
.remodal.img{ max-width:800px; width:100%; height:100%; background:#f0edea}
.remodal.img img{ width:100%; padding-top:5%}

.remodal ul{ padding-top:20px}
.remodal ul li{ padding-bottom:10px;}

section#secret { width:100%; top:40%; position:absolute; text-align:center;}
section#secret a{
position:relative!important;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
width:90px!important;
height:90px!important;
border-radius:52px;
-moz-border-radius:52px;
-webkit-border-radius:52px;
text-indent:-9999px;
border:2px solid #ff518e;
display:inline-block;
margin:5px;
}
section#secret a.music{ display:none}
}

section#line{}
section#line h3{
background:rgba(255,255,255,1);
text-align:center;
padding:5px 10px;
width:40%;
font-size:14px;
font-weight:normal;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
margin:0 auto 10px auto;}

section#diary ul,
section#line ul{ text-align:left}
section#line ul h4{ font-size:12px; font-weight:normal}
section#line ul li{
position: relative;
display: inline-block;
padding:10px;
width: auto;
min-width: 80%;
font-size:14px;
background:#eede57;
z-index: 0;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin-bottom:10px
}
section#line ul li:after{
content: "";
position: absolute;
top: 50%; left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #eede57 transparent transparent;
z-index: -1;
}

@media only screen and (max-width: 768px) {
section#line ul li{
min-width: 90%;
}

}

section#mail.remodal,
.mail{ padding:0; position:relative;height:100%;}
section#mail.remodal iframe{ display:block; position:relative; width:100%; height:100%; margin:0; padding:0; overflow:scroll}
.mail h3{ padding:20px 10px;}
.mail ul{ border-top:1px solid #ccc; padding-top:0}
.mail ul li{ border-bottom:1px solid #ccc; padding:0}
.mail li a{ display:block; padding:10px;}
.mail li a:hover{ background:#eede57}
.mail li p.address{ color:#666; padding-bottom:10px;}
.mail li p.address span{ font-size:10px; display:inline-block; padding:0 2px; margin-right:5px; border:1px solid #666;}
.mail li h4{ font-size:16px;}
.mail li p.exp{
font-size:12px;
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;}

.mail.detail li{}
.mail.detail li h4{ font-size:18px;padding:10px}
.mail.detail li p.address{ padding:10px}
.mail.detail li p.date{ padding:10px; border-top: 1px solid #ccc;border-bottom: 1px solid #ccc}
.mail.detail li p.honbun{ font-size:14px; line-height:1.8em; padding:20px;border-top: 1px solid #ccc;}

.mail.detail p.back{text-align:center; padding:20px}


@media only screen and (max-width: 768px) {
.mail{height:auto;}
}


section#memo{max-width:650px;height: 90%;background:none;}
section#memo div{background:url(../images/memo.png) no-repeat center center;width:600px;max-width:600px;height: 100%;position:relative;background-size:contain;}
section#memo div p{width:40%;height:365px;position:absolute;left:158px;top: 50%;margin-top: -190px;}
section#memo div p.ph{ width:80%; left:20px; top:50%; margin-top:-250px}
section#memo div p img{ width:100%}


section#music{ text-align:center; height:300px}
section#music p{ padding:20px 0 40px 0}
section#music button.music{ border:2px solid #eede57; display:inline-block; margin:10px; padding:30px;}
section#music button.music#play{ background:url(../images/play_bt.png) no-repeat center center}
section#music button.music#pause{ background:url(../images/pause_bt.png) no-repeat center center}
section#music button.music#stop{ background:url(../images/stop_bt.png) no-repeat center center}
section#music button:hover{ opacity:0.7}

section#foot{ width:100%; position:absolute; bottom:2%; z-index:20}
section#foot div#status{ font-size:16px; padding-bottom:5px; border-bottom:5px solid #ff518e; display:inline-block; margin-left:20px}
section#foot a.clap{ float:right; font-size:16px; padding:10px; border:2px solid #ff518e; margin-right:20px}
section#foot a.clap:hover{ background:rgba(255,255,255,0.2)}


@media only screen and (max-width: 768px) {
section#memo { width:100%; max-width:100%; min-height:100%; background-color:rgba(0,0,0,0.8) }
section#memo  div{ width:100%; max-width:100%; height:400px; min-height:400px; background-size:100%; background-position:center top; margin-top:40%}
section#memo div p{ width:auto; height:auto; left:24%; top:54%; width:45%}
section#memo div p.ph{ width:85%; left:6%; top:50%; margin-top:-219px}
section#memo div p img{ width:100%}
section#foot{ text-align:center}
section#foot a.clap{ float:none; width:70%; margin:10px auto; font-size:14px; display:block;}
section#foot div#status{ font-size:14px;}
}

section#fumibako{
position:relative;
width:100%;
height:100%;
  background: url(../images/fumibako_back.jpg) no-repeat left top/cover;
}

section#fumibako a{
background: url(../images/fumibako.png) no-repeat right top/100%;
width:525px;
height:650px;
position:absolute;
top:0;
left:50%;
margin-left:-262px;
text-indent:-9999px;
}

ul#diaryList li{ 
display:none;
padding-top:20px
}
ul#diaryList li p{
background: linear-gradient(#ccc 1px, transparent 1px) #f0edea;
  background-size: auto 2.5em;
  line-height: 2.5em;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
}

@media only screen and (max-width: 768px) {
section#fumibako a{
background-size:80%;
width:100%;
height:100%;
left:0;
margin-left:0;
}
}