@charset "UTF-8";
/* SCSSの読み込み */
@import url(all_ent.css);
/*===============================================
  切り替え用
===============================================*/
@media screen and (max-width: 374px) {
  html {
    font-size: clamp(14px, 4.2666666667vw, 16px);
  }
}

.sp-none {
  display: none !important;
}

/*===============================================
  wrapper
===============================================*/
#wrapper {
  min-width: 320px;
}

/*===============================================
  header
===============================================*/
#header .header__logo {
  width: 10rem;
  aspect-ratio: 2/1;
  background: var(--color-blue);
  border-bottom-right-radius: 1.875rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
#header .header__logo a {
  display: block;
  width: 75%;
}
#header .header__logo img {
  width: 100%;
  aspect-ratio: 12/4;
  -o-object-fit: contain;
     object-fit: contain;
}
#header .header__ig {
  width: 5rem;
  aspect-ratio: 1;
  background: var(--color-blue);
  border-bottom-left-radius: 1.875rem;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}
#header .header__ig img {
  width: 50%;
}

/*===============================================
  footer
===============================================*/
/*コピーライト
-----------------------------*/
.copy {
  padding-block: calc((2.5rem - 1em) / 2);
}
/*===============================================
  main#container
===============================================*/
#container {
  overflow: hidden;
}

/*===============================================
  エントランスページ
===============================================*/
.entrance {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  height: min(56.25rem, 175vw);
  min-height: calc(100svh - 2.5rem);
}
.entrance__box {
  outline-width: 1rem;
  outline-offset: -1rem;
}
.entrance__box::before {
  height: 88%;
}
.entrance__box--official::before {
  height: 68%;
}
.entrance__item {
  width: 85%;
  max-width: 29.125rem;
}