@charset "utf-8";

* {
  font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.3125;
  color: #323232;
}

span {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.contents {
  position: relative;
  width: 100%;
  margin-top: 10%;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

.background_img{
  background-image: url(../images/background_img.png);
}

#header{
  height: 500px;

}

.header{
  position: fixed;  /* 位置を固定する */
  width: 100%;  /* ヘッダーの幅 */
  height: 126px;
  top: 0;
}

.fixed{
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #0073BE;
}

.top{
  height: 90px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main_contents{
  width: 85%;
  margin: 0 auto;

}

.gallery .gallery-img{
  margin-top: 0%;
}



.contents{
  display: flex;
    justify-content: flex-start;
    width: 85%;
    margin: 0 auto;
    margin-top: 10%;
    align-items: flex-start;
    height: 100%;
    margin-bottom: 5%;
}

/*==================================================
スライダーのためのcss
===================================*/
.gallery img{
 width: 100%;
}
.gallery-img{
 margin: auto;
 max-width: 100%;
}
.gallery-list{
 padding: 0;
 list-style: none;
 display: flex;
 justify-content: center;
 width: 100%;
 margin-top: 1%;
}
.js-image{
 cursor: pointer;
 border: none;
 background: none;
 transition: .4s;
}
.js-image:hover{
 opacity: 0.4;
}

.text_detail{
  position: absolute;
  bottom: 0;
  font-weight: bold;
 
  border-bottom: 3px solid #0073BE;
  display: inline-block;
  padding-bottom: 0px;
}

.text_detail a{
  color: #0073BE; 
}


/* table01 */
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
}

#table01 th {
  width: 30%;
}

#table01{
  width: 100%;
}

#table01 td a{
  color: blue;
  text-decoration: underline;
}

/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 100%;
    font-weight: bold;
  }

  #table01 td {
    padding-top: 0;
  }
}

.store_details{
  width: 85%;
  margin: 0 auto;
}

.store_details{
  margin-bottom: 5%;
}

.gallery-img{
  margin-top: 25%;
}


.footer {
  bottom: 0vh;
  width: 100%;
  background-color: #0073BE;  
}

.background_collar{

  height: 120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  width: 90%;
}

.footer_flex{
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 95%;
  justify-content: space-evenly;
}

.footer_img{
  width: 70%;
}

.footer_img{
  margin-right: 2%;
}

.footer_text{
  color: #fff;
  font-size: 1.5vw;
  margin-right: 1%;
}

.Producedby{
  text-align: right;
}

.Producedby img{
  width: 90%;
}

.footer_sns{
  margin-left: 1%;
}


.main_text{
  margin-left: 2%;
  width: 100%;
}

.text_title{
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 6%;
  color: #0073BE;
}

/*== 影がついて浮き上がる */

/*ボタンの形状*/
.float1{
    color: #333;
    display: inline-block;
    text-decoration: none; 
    outline: none;
    border-radius: 100px;
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverをしたらボックスに影がつく*/
.float1:hover {
  box-shadow: 0 7px 10px rgba(0, 0, 0, 0.3);
  border-color: transparent;
}



.zoomIn img{
  transform: scale(1);
  transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img{/*hoverした時の変化*/
  transform: scale(1.1);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
    border-radius: 50px;
}

.text_bottom{
  margin-bottom: 20%;
}