@charset "Shift-JIS";
/*
=================================
e-amusementサイトテンプレート
=================================
*/
header,footer,header#id_nav_menu_1{position:relative !important;}
header#id_nav_menu_1{background-color:#fff;}
#wrapper{position:relative !important; }
#container{background-color:#d4d4d6 !important;}
header#id_nav_menu_1{z-index:10 !important;}
footer{z-index:2 !important;}

/*
=================================
reset.css
=================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

html{width:100%; height:100%; overflow-wrap:break-word}
body{
min-width:320px !important;
background:#333 !important;
margin:0 auto;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
a img{transition:opacity .3s ease;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:700; font-style:normal;}
table{width:100%; color:#333; border-collapse:collapse; border-spacing:0; margin:0 auto;}


/*
=================================
common.css
=================================
*/
#main{background-color:#fff;}

#main > .main-inner{
  width:100%; 
  max-width:1200px; 
  margin:0 auto; 
  padding:40px;
  }
#main > .main-inner > .box{
  width:100%; 
  max-width:980px; 
  background-color:#fff;
  box-shadow:10px 5px 5px #a2aeae;
  border:solid 4px #000; 
  border-radius:10px; 
  margin:0 auto; 
  padding:20px;
  }
#main > .main-inner > .box > h1{
  position:relative; 
  display:block;
  width:400px;
  background:#fff;
  border:solid 5px #000;
  /*box-shadow:5px 5px 1px #000;*/
  filter: drop-shadow(8px -8px 0 #a1e71b) drop-shadow(-8px 8px 0 #ff46aa);
  font-family:/*"BIZ UDPGothic", serif;*/"Sawarabi Gothic";
  font-weight:700;
  font-size:22px;
  color:#000;
  /*text-shadow:2px 1px #000;*/
  text-align: center;
  bottom:35px;
  margin:0 auto; 
  padding:10px; 
  z-index:2;
  }
  /*
#main > .main-inner > .box > h1::before{
  position: absolute;
  content: '';
  top: -5px;
  left: -5px;
  width: 100%; 
  height: 100%;
  border: 3px solid #490509;
  }*/
@media screen and (max-width:640px){#main > .main-inner > .box > h1{width:300px; font-size:18px;}}
@media screen and (max-width:420px){#main > .main-inner > .box > h1{width:200px; font-size:16px;}}

/*設置店舗情報*/
#main > .main-inner > .box > .box-flex{display:flex;}
.toggle-contents{
  width:100%; 
  max-width:800px; 
  margin:20px auto;
  }
.toggle{
  position:relative; 
  cursor:pointer; 
  /*background-color:#fff;*/
  background-color:#ff46aa;
  border:solid 5px #333; 
  box-shadow:inset 3px 3px 0px #fff;
  /*outline:solid 1px #000;
  outline-offset:1px;*/  
  /*font-family:"Sawarabi Gothic";*/
  font-family: "BIZ UDPGothic", serif;
  font-size:16px; 
  text-shadow:2px 1px #000;
  color:#fff;
  text-align:center; 
  padding:10px;
  margin-top:10px; 
  transition:all .5s ease;
  }
.machine{position:relative; width:100%; max-width:270px; bottom:0;}
.machine img{width:100%; filter: drop-shadow(7px 15px 5px #b9b194);}
@media screen and (max-width:640px){.machine{display:none;}}

.toggle:hover{cursor:pointer; filter: brightness(0.9);}
.toggle::before,
.toggle::after{
  position:absolute;
  content:""; 
  background-color:#fff; 
  width:14px;
  height:2px;
  }
.toggle::before{top:18px; right:10px; transform:rotate(0deg);}
.toggle::after{top:18px; right:10px; transform:rotate(90deg);}
.toggle.open::before{transform:rotate(0deg);}
.toggle.open::after{transform:rotate(180deg);}

/*都道府県*/
.list{display:none;}
.list > strong{
  position:relative; 
  display:block; 
  background-color:#a1e71b; 
  font-size:16px; 
  color:#000;
  border:1px solid #333;
  text-align:center;
  padding:5px; 
  margin-top:10px;
  transition:all .5s ease;
  }
.list > strong:hover{cursor:pointer; opacity:.8;}
.list > strong::before,
.list > strong::after{
  position:absolute; 
  content:""; 
  background-color:#659707; 
  width:12px; 
  height:2px;
  }
.list > strong::before{top:15px; right:10px; transform:rotate(0deg);}
.list > strong::after{top:15px; right:10px; transform:rotate(90deg);}
.list > strong.open::before{transform:rotate(0deg);}
.list > strong.open::after{transform:rotate(180deg);}

/*店舗*/
.list > ul{display:none; background-color:#fff; border:1px solid #333; border-top:none;}
.list > ul > li{width:100%; background-color:#ccc; font-size:15px; padding:4px;}
.list > ul > li:nth-of-type(odd){background-color:#f5f5f5;}
.list > ul > li > p{font-weight:bold; color:#ff46aa;}


/*リスト*/
ul.ast li{position:relative; padding-left:15px;}
ul.ast li::before{display:block; position:absolute; content:"※"; top:0; left:0;}
@media screen and (max-width:640px){ul.ast li{font-size:14px;}}
@media screen and (max-width:420px){ul.ast li{font-size:12px;}}