@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* ------------- 全体 ------------- */
body
{
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  margin: 0;

  background-color: #2C394B;

  display: flex;
  flex-flow: column;
  min-height: 100vh;

  color: #2b2b2b;
}

.main {
  text-align: center;
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
  flex: 1;
}
/* -------------------------------- */

/* ----------- 読み込み ----------- */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #2b2b2b;
  
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #F21B2D;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

/* ------------ トップ ------------ */
.top {
  position: relative;
}

.top_bg {
  width: 100%;
  min-height: 400px;
  object-fit: cover;
  vertical-align: top;
}

.top_logo {
  position: absolute;
  width: 100%;
  min-height: 400px;
  margin: 0 auto;
  object-fit: cover;
}

.top .event_btn {
  animation-name: scaleAnime;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 2.0s;
  transform-origin: center;

  position: absolute;
  right: 1%;
  bottom: 10px;
}

@keyframes scaleAnime {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}

/* SNSアイコン */
.sns_icon {
  display: flex;
  justify-content: center; 
}

.sns_icon img.btn {
  width: 100%;
}
/* -------------------------------- */

/* ---------- コンテンツ ---------- */
.content {
  max-width: 960px;
  margin: 0 auto;
}

.content .description {
  background-color: #EEEEEE;
  padding: 20px;
  margin: 0 10px;
}

.content .description img {
  max-width: 100%;
}

/* 概要 */
.caption {
  max-width: 520px;
  width: 70%;
  vertical-align: top;
  margin: 15px 0;
}

/* ニュース */
.news_area {
  margin: 0 auto;
  padding: 0;

  display: flex;
  justify-content: center;
  list-style: none;
}

.news {
  position: relative;
  min-width: 200px;
  max-width: 300px;

  width: 30%;
  margin: 0 5px;
}

.news a:link {
  color: #2b2b2b;
}

.news a:visited {
  color: #2b2b2b;
}

.news:nth-child(n+4){
  display: none;
}

.news img {
  width: 100%;
  object-fit: fill;
}

.news font {
  position: absolute;
  left: 5px;
  text-align: left;
}

.news font.date {
  font-size: min(max(1.5vw, 8px), 12px);
}

.news font.text {
  font-size: min(max(1.8vw, 10px), 16px);
  top: min(2vw, 20px);
}

/* メニュー */
.menu {
  padding: 20px;

  max-width: 70%;
  max-height: 70%;
  width: auto;
  height: auto;

  margin: 0 auto;
}

.menu img {
  width: 100%;
  margin: 0;
  vertical-align: top;
}

.menu .parent {
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.menu .child {
  max-width: 100px;

  margin: 5px;
}

.button_top {
  margin: 20px;
}

/* 協賛 */
.banner {
  width: 200px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.banner_container {
  text-align: center;
}

.sponsor_link {
  display: inline-block;
  white-space: nowrap;
}

/* -------------------------------- */

/* ----------- アバウト ----------- */
.photo_h p {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.photo_h img {
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

/* -------------------------------- */

/* ----------- フッター ----------- */
footer {
  position: relative;
  height: 70px;
  margin-top: auto;
}

.footer_bar {
  width: 100%;
  background: #1E1E1E;

  color: #FFF;
  font-size: 10px;
  vertical-align: middle;

  position: absolute;
  bottom: 0;
}
/* -------------------------------- */

/* ------------ スマホ ------------ */
@media only screen and (max-width:600px){
  .main {
    max-width: 100%;
  }

  .news_area {
    margin: 0 10px;

    justify-content: left;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .news {
    width: 50%;
  }

  .news:nth-child(n+4){
    display: inline;
  }

  .news font.date {
    font-size: 2vw;
  }

  .news font.text {
    font-size: min(max(2.5vw, 10px), 14px);
    top: min(max(3vw, 12px), 14px);
  }

  .menu .parent {
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
  }

  .menu .child {
    max-width: 100px;
    width: calc(33.3333333% - 20px / 3);

    margin: 5px 10px 0px 0;
  }

  .menu .child:nth-child(3n){
    margin-right: 0;
  }
}
/* -------------------------------- */