@charset "UTF-8";

/**
 * テキスト設定
 */
body{
  font: 13px/1.5 'Lato', 'Noto Sans Japanese', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴシック ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  color: #333333;
  background-color: #e6e6e6;
  font-feature-settings: "palt"; /*字間(プロポーショナルメトリクス)を指定*/
}


/**
 * フルードイメージ
 */
/* img画像 */
img{
  /*width: 100%;*/
  max-width: 100%;
  height: auto;
}
/* 背景画像 */
#bg{
  background-size: cover;
}
/* メディア */
embed, object{
  max-width: 100%;
}


/**
 * 全体
 */
#wrapper{
  position: relative;
  width: 100%;
}
em{
  font-weight: bold;
}
strong{
  font-weight: bold;
}
.none{
  display: none;
}
.clear{
  clear: both;
}
.note{
  color: red;
  font-size: 12px;
}
h1{
  cursor: pointer;
}
.box{
  display: inline-block;
  text-align: left;
}

/**
 * コンテンツ
 */
#contents{
  position: relative;
}
  #contents section{ /*sectionの共通設定*/
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
  }
    #contents section .cage{
      position: relative;
      width: calc(100% - 100px);
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 50px;
    }
    @media screen and (max-width:950px){
      #contents section .cage{
        width: calc(100% - 40px);
        padding: 0 20px;
      }
    }


/**
 * フッター
 */
footer{
  text-align: center;
  width: 100%;
}
footer img{
  width: 77px;
  height: auto;
  padding: 55px 0;
}
footer .copy{
  color: #fff;
  background-color: #b8312b;
  padding: 15px 0 10px;
  font-size: 15px;
}
/*----- バララックス -----*/
footer img.delighter{
  transition: all 3s ease-out;
  transform: translateY(30px);
  opacity: 0;
}
footer img.delighter.started{
  transform: none;
  opacity: 1;
}
footer img.delighter.ended{
  transform: none;
  opacity: 1;
}
/*-----------------------*/


/**
 * PC用設定
 */
 @media screen and (min-width:820px){
  .sp{
    display: none!important;
  }
  div.spHeader{
    display: none;
  }
  nav#navigationSP{
    display: none;
  }
}
/**
 * スマホ用設定
 */
@media screen and (max-width:819px){
  .pc{
    display: none!important;
  }
  nav#navigationPC{
    display: none;
  }
}
@media screen and (max-width:390px){
  div.spHeader h1 img.title{
    top: 23px;
    left: 23px;
    width: 200px;
  }
}
@media screen and (max-width:340px){
  div.spHeader h1 img.title{
    top: 28px;
    left: 23px;
    width: 150px;
  }
}