@charset "UTF-8";

html{
  font-size: 10px;
}

body{
  font-family: 'メイリオ', sans-serif;
  margin: 0;
  padding: 0;
  width: 100vw;
}

.clear{
  clear: both;
}

#header{
  height: auto;
  width: 100%;
}

#header-up{
  height: 20px;
  width: 100%;
  background-color: #ff9c24;
}

#header-up p{
  font-size: 1.4rem;
  font-weight: bold;
  color: #FFFFFF;
  margin: 0 0 0 150px;
}

#header-down{
  height: auto;
  background-color: #FFF;
}

#header-down-left{
  float: left;
  margin-left: 150px;
}

.header-logo{
  height: 70px;
  margin-top: 15px;
}

#header-down-right{
  float: right;
  margin-top: 10px;
  margin-right: 150px;
}

#header-down-right a{
  font-size: 1.5rem;
  color: #6dd674;
  font-weight: bold;
  text-decoration: none;
  border: 2px solid #40c748;
  border-radius: 20px;
  padding: 5px 10px;
  margin: 0;
  position: relative;
}

#header-down-right a::before{
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top: 7px solid #40c748;
  position: absolute;
  left: 45%;
  bottom: -15px;
}

#header-down-right a::after{
  content: "";
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top: 5px solid #fff;
  position: absolute;
  left: 46%;
  bottom: -10px;
}

#header-down-right a:hover{
  color: #40c748;
  text-decoration: underline;
}

#header-down-right p{
  text-align: center;
  margin: 10px 0 0 0;
}

#header-down-right img{
  width: 60px;
  height: 60px;
}

#content{
  padding: 0 150px 100px 150px;
  background-image: url('../image/sozai/background.jpg');
}

#navi{
  margin: 0;
  display: block;
}

.outer{
  width: 100%;
  height: 50px;
  padding: 0;
  position: relative;
  list-style-type: none;

}

.outer li{
  position: relative;
  float: left;
  width: 20%;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #ff9c24;
  border-radius: 25px;
}

.outer li a{
  display: block;
  margin: 0;
  padding: 10px 0;
  color: #FFF;
  font-size: 2rem;
  font-weight: bold;
  text-decoration: none;
}

.outer li ul{
  list-style: none;
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}

.outer li ul li{
  overflow: hidden;
  width: 100%;
  height: 0px;
  transition: .2s;
}

.outer li ul li a{
  margin: 0;
  text-align: center;
  background: #e68c20;
  color: #FFF;
  font-size: 1.4rem;
  border-radius: 20px;
}

.outer li:hover > a{
  background: #e68c20;
  border-radius: 25px;
}

.outer li:hover ul li{
  overflow: visible;
  height: 40px;
}

.outer li:hover ul li+ li{
  border-top: 1px solid #FFF;
}

.outer li ul li:hover > a{
  text-decoration: underline;
  background: #b86f18;
}

#daimei{
  text-align: center;
  margin-bottom: 50px;
}

#daimei h1{
  text-align: center;
  font-size: 4rem;
  margin: 30px auto;
  color: #f59520;
  border-bottom: 5px dotted #ff9c24;
  letter-spacing: 15px;
  padding-left: 15px;
}

#daimei > div, h1{
  display: inline-block;
  vertical-align: middle;
}

.kaba img{
  width: 40px;
  height: 40px;
}

#info-wrap{
  padding: 0 150px;
}

#info{
  width: 100%;
  background: #fff;
}

#info-left{
  float: left;
  margin: 25px 0;
  width: 45%;
}

.i-title{
  width: 100%;
  border-bottom: 2px dashed #ff9c24;
  margin: 20px 0 10px 0;
}

.i-title p{
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
  color: #6e4310;
  margin: 0;
  vertical-align: middle;
}

.i-title p+ p{
  margin-left: 5px;
}

.naiyo{
  font-size: 1.6rem;
  color: #303030;
  margin-left: 20px;
}

.yomi{
  margin: 0;
  font-weight: bold;
  color: #ff9c24;
  letter-spacing: 20px;
  text-align: center;
}

.i-name{
  text-align: center;
  font-size: 4.5rem;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #ff9c24;
  letter-spacing: 10px;
}

#hours{
  width: 100%;
  text-align: center;
  border-spacing: 0px;
  margin-top: 10px;
}

#hours th,td{
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  border: 1px solid #000;
}

.kome{
  font-size: 1.4rem;
}

.closed{
  color: #f30100;
  font-weight: bold;
  font-size: 1.6rem;
}

span{
  color: #f30100;
  font-weight: bold;
}

#info-right{
  float: right;
  margin: 25px 0;
  width: 45%;
}

.gmap{
  margin: 10px 0;
}

#footer{
  height: 200px;
  width:100%;
  background-color: #ff9c24;
}
#footer-wrap{
  margin: 0 150px;
  height: 200px;
  position: relative;
}

#footer-left{
  margin: 10px 0;
  float: left;
  font-weight: bold;
  color: white;
}

.f-name{
  font-size: 4rem;
  margin: 0;
}

.location{
  display: block;
  font-size: 1.8rem;
  margin: 0 0 0 15px;
}

.location span{
  color: #f30100;
}

#footer-right{
  float: right;
  margin: 10px 0;
}

#footer-right li{
  list-style: none;
  float: left;
  padding: 0px 15px;
}

#footer-right li+ li{
  display: inline-block;
  border-left: 1px solid #FFFFFF;
}

#footer-right a{
  line-height: 1;
  text-decoration: none;
  font-size: 1.6rem;
}

#footer-right a:link{
  color: white;
}

#footer-right a:visited{
  color: white;
}

#footer-right a:hover{
  transition: 0.3s;
  background-color: chocolate;
}

#copyright{
  text-align: right;
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  position: absolute;
  right: 0;
  bottom: 0;
}

#title_or_QR_title{
  float: left;
}

#title_or_QR_QR{
  float: right;
}

#title_or_QR_QR img{
  width: 150px;
  height: 150px;
  margin: 0;
}