@charset "UTF-8";

*,*::before,*::after { box-sizing: border-box; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,  details,  figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; color: inherit; transition: background-color .2s ease-in-out; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
img { max-width: 100%; vertical-align: bottom; }
sup { font-size: 0.688em; vertical-align: top; }
sub { font-size: 0.688em; vertical-align: baseline; }


:root {
  --color1: #fedd1f;
  --color2: #f7931c;
  --black: #111;
  --white: #FFF;
  --l-gray: #F9F4F2;
  --font1: "Rubik Doodle Shadow", sans-serif;
}


html {
  font-size: min(3.57vw, 16px);
}
body {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  line-height: 1.75;
  background: var(--l-gray);
  color: var(--black); }


.iv {
  opacity: 0; }
.iv.animate__animated {
  opacity: 1; }

section {
  position: relative; }

#wrapper {
  width: 100%;
  overflow: hidden;
}
#bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#container {
  background: var(--color1);
  box-shadow: 0px 0px 0px 2px var(--black);
  width: min(100%, 34rem);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.container {
  width: 100%;
  padding-right: 5%;
  padding-left: 5%;
}
.section {
  margin: 16% 0;
}
.content {
  margin: 8% 0;
}

/* --------------------
   media query
-------------------- */
@media (max-width: 812px) {
  .pc { display: none; }
}
@media (min-width: 813px) {
  .sp { display: none; }
}

/* --------------------
   Typography
-------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { margin: 0; font-weight: 400; }
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; }
.huge {
  font-size: 3.75rem;
  line-height: 1.25;
}
h1,.h1 {
  font-size: 3.5em;
  line-height: 1.25;
}
h2,.h2 {
  font-size: 3em;
  line-height: 1.375;
}
h3,.h3 {
  font-size: 2em;
  line-height: 1.5;
}
h4,.h4 {
  font-size: 1.5em;
  line-height: 1.6;
}
h5,.h5 {
  font-size: 1.25em;
}
h6,.h6 {
  font-size: 1em;
}
small, .small {
  font-size: 0.813rem;
}


/* --------------------
   .bg
-------------------- */
.bg {
  width: min(100%, 34rem);
  height: 100%;
  position: fixed;
  top: 0;
  overflow: hidden;
  z-index: -1;
}
#noise {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../_img/noise.gif);
  mix-blend-mode: soft-light;
  opacity: .5;
}
#bubble {

}
.bubble {
  position: absolute;
  border-radius: 100%;
  border: 1px solid #fff;
  bottom: 1px;
  pointer-events: none;
}

/* --------------------
   Font
-------------------- */
.font1, .en_ttl {
  font-family: var(--font1);
  font-weight: 400;
  font-style: normal;
}
.font2 {
  font-family: var(--font2);
  font-weight: 400;
  font-style: normal;
}

/* --------------------
   Title
-------------------- */
.section-header .ttl {
  font-size: 1rem;
  letter-spacing: .08em;
}
.section-header .ttl::before {
  content: attr(data-en);
  font-family: var(--font1);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  display: block;
}
.section-header .en_ttl {
  font-family: var(--font1);
  font-weight: 400;
  line-height: 1;
}

.copy {
  position: relative;
  z-index: 5;
}
.copy .ttl {
  font-style: italic;
  transform: skew(-12deg,-12deg);
}

/* --------------------
   Button
-------------------- */
.btn {
  display: block;
  width: min(20rem, 75%);
  font-size: 1.077rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  padding: 1em;
  margin: 1.5rem auto;
  border-radius: 0;
  background-color: transparent;
  border: 1px solid currentColor;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transform: skew(-15deg);
  transition: background .2s;
}
.btn:hover {
  background-color: rgba(0,0,0,.05);
}

/* --------------------
   Video
-------------------- */
.video {
  margin: 0 auto;
  border-radius: 3em;
  border: 1px solid var(--black);
  overflow: hidden;
}
video {
  width: 100%;
  vertical-align: bottom;
}

/* --------------------
   Accordion
-------------------- */
.acc_btn .btn::before,
.acc_btn .btn::after {
  content: '';
  display: block;
  width: .75em;
  height: 1px;
  background: currentColor;
  position: absolute;
  top: 50%;
  right: 1.25em;
  transform: translateY(-50%);
  transition: transform .2s;
}
.acc_btn .btn::after {
  transform: translateY(-50%) rotate(90deg);
}
.acc.on .acc_btn .btn::after {
  transform: translateY(-50%) rotate(0deg);
}
.acc_body {
  display: none;
}

/* --------------------
   Infinite slide
-------------------- */
.infiniteslide {
  list-style-type: none;
}
.infiniteslide li {
  padding: 0 2%;
}

/* --------------------
   .item-list
-------------------- */
.item-list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 1px 1px 10px;
}
.item-list li {
  flex: 0 0 calc(100%/3);
  background: var(--l-gray);
  border: 1px solid var(--black);
  margin: -.5px;
}
.item-list li picture {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
}
.item-list li picture img {
  display: block;
  object-fit: contain;
}
.item-list li .ttl {
  font-size: .923em;
  line-height: 1.25;
  padding: 1em .25em;
}

/* ====================================
   Header
==================================== */
#header {
  position: relative;
  z-index: 100;
}
#header::before {
  content: '';
  display: block;
  width: 110%;
  aspect-ratio: 16/9;
  background: url(../_img/awa.png) no-repeat center top / 100%;
  position: absolute;
  top: -44%;
  left: -7%;
}
#header #logo {
  padding: 8% 0 0;
  display: flex;
  justify-content: center;
}
#header h1 {
  font-size: 2.5em;
  line-height: 1;
  letter-spacing: -.06em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  position: relative;
  transform: skew(-8deg,-8deg);
}
#header h1 span {
  display: block;
}
#header h1 em {
  display: block;
  font-style: normal;
  font-size: 2.5em;
  letter-spacing: -.12em;
}
#header h1 .logo {
  display: block;
  width: min(160px, 30vw);
  margin-left: .375em;
  transform: skew(8deg,8deg) rotate(-3deg);
}

/* ====================================
   MV
==================================== */
#mv {
  margin-top: 5%;
  line-height: 1;
  transform: rotate(2deg);
}
#mv .movie {
  width: 100%;
  padding: 8% 18% 17% 10%;
}
#mv .movie::before {
  content: '';
  width: 100%;
  height: 100%;
  background: url(../_img/tv.png) no-repeat center top / 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#mv .video {
}
#mv .movie video {
  aspect-ratio: 13/12;
  object-fit: cover;
}
#mv .copy {
  margin-top: -5%;
  color: var(--white);
  mix-blend-mode: difference;
}

/* ====================================
   ATE
==================================== */
#ate .item-list li picture {
  aspect-ratio: 1/1;
}
#ate .item-list li picture img {
  height: 100%;
  object-fit: cover;
}
#ate .chart {
  width: 100%;
  aspect-ratio: 16/9;
  padding: 0 5% 5%;
  position: relative;
}
#ate .chart .arrows {
  width: 100%;
  height: 100%;
  position: relative;
  color: var(--black);
}
#ate .arrows .arrow {
  width: 4px;
  height: 100%;
  background: currentColor;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}
#ate .arrows .arrow-y {
  padding: .75em 0;
  writing-mode: vertical-rl;
}
#ate .arrows .arrow-x {
  width: 100%;
  height: 4px;
  padding: 0 .75em;
}
#ate .arrow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-top: 4px solid currentColor;
  border-right: 4px solid currentColor;
  transform: translate(calc(-50% + 2px),-2px) rotate(-45deg);
}
#ate .arrow-x::before {
  left: auto;
  right: 0;
  transform: translate(2px,calc(-50% + 2px)) rotate(45deg);
}
#ate .arrows .arrow span {
  display: inline-block;
}
#ate .chart ul {
  list-style-type: none;
  position: absolute;
  top: 0;
  right: 5%;
  bottom: 9%;
  left: 5%;
}
#ate .chart ul li {
  width: calc(100%/8);
  position: absolute;
}

/* ====================================
   ACCESS
==================================== */
.map {
  position: relative;
  width: 100%;
  aspect-ratio: 7/5;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ====================================
   Footer
==================================== */
#footer {
  padding: 2em 0;
  position: relative;
}
#footer .copyright {
  font-size: .625rem;
  font-family: sans-serif;
}



@media (min-width: 721px) {
  @keyframes bgFloating {
      0% {
          -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0)
      }
      to {
          -webkit-transform: translate3d(0,6%,0);
          transform: translate3d(0,6%,0)
      }
  }
  #bg div {
    position: absolute;
    aspect-ratio: 9/13;
    animation: bgFloating 1.5s cubic-bezier(.445,.05,.55,.95) infinite alternate,bgAppear 1.5s cubic-bezier(.39,.575,.565,1) 1;
  }
  #bg div img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  #bg .p1 img { transform: rotate(-35deg) }
  #bg .p2 img { transform: rotate(-8deg) }
  #bg .p3 img { transform: rotate(-16deg) }
  #bg .p4 img { transform: rotate(-20deg) }
  #bg .p5 img { transform: rotate(-52deg) }
  #bg .p6 img { transform: rotate(-13deg) }
  #bg .p7 img { transform: rotate(-351deg) }
  #bg .p8 img { transform: rotate(-30deg) }
  #bg .p9 img { transform: rotate(-344deg) }
  #bg .p10 img {transform: rotate(-327deg) }
  #bg .p11 img {transform: rotate(-343deg) }
  #bg .p12 img {transform: rotate(-327deg) }
  #bg .p13 img {transform: rotate(-13deg) }
  #bg .p14 img {transform: rotate(-343deg) }
  #bg .p15 img {transform: rotate(-32deg) }
  #bg .p16 img {transform: rotate(-346deg) }
  #bg .p17 img {transform: rotate(-8deg) }
  #bg .p18 img {transform: rotate(-331deg) }
  #bg .p19 img {transform: rotate(-26deg) }
  #bg .p20 img {transform: rotate(-331deg) }

  #bg .p1 {
    top: 8%;
    left: 72%;
    width: 6%;
    animation-duration: .9s, .9s;
    animation-delay: .9s, 0s
  }
  #bg .p2 {
    top: 55%;
    left: 81%;
    width: 7%;
    animation-duration: 1.2s, 1.2s;
    animation-delay: 1.2s, 0s
  }
  #bg .p3 {
    top: 43%;
    left: -1%;
    width: 11%;
    animation-duration: 1.0s, 1.0s;
    animation-delay: 1.0s, 0s
  }
  #bg .p4 {
    top: 64%;
    left: 17%;
    width: 8%;
    animation-duration: 1.2s, 1.2s;
    animation-delay: 1.2s, 0s
  }
  #bg .p5 {
    top: -10%;
    left: 9%;
    width: 8%;
    animation-duration: 1.1s, 1.1s;
    animation-delay: 1.1s, 0s
  }
  #bg .p6 {
    top: 29%;
    left: 56%;
    width: 9%;
    animation-duration: 1.3s, 1.3s;
    animation-delay: 1.3s, 0s
  }
  #bg .p7 {
    top: 21%;
    left: 6%;
    width: 9%;
    animation-duration: 1.4s, 1.4s;
    animation-delay: 1.4s, 0s
  }
  #bg .p8 {
    top: 10%;
    left: 37%;
    width: 10%;
    animation-duration: 1.5s, 1.5s;
    animation-delay: 1.5s, 0s
  }
  #bg .p9 {
    top: -8%;
    left: 75%;
    width: 11%;
    animation-duration: 1.7s, 1.7s;
    animation-delay: 1.7s, 0s
  }
  #bg .p10 {
    top: -8%;
    left: 20%;
    width: 11%;
    animation-duration: 1.7s, 1.7s;
    animation-delay: 1.7s, 0s
  }
  #bg .p11 {
    top: 31%;
    left: 65%;
    width: 12%;
    animation-duration: 1.8s, 1.8s;
    animation-delay: 1.8s, 0s
  }
  #bg .p12 {
    top: 14%;
    left: 83%;
    width: 12%;
    animation-duration: 1.8s, 1.8s;
    animation-delay: 1.8s, 0s
  }
  #bg .p13 {
    top: -16%;
    left: 94%;
    width: 12%;
    animation-duration: 1.7s, 1.7s;
    animation-delay: 1.7s, 0s
  }
  #bg .p14 {
    top: 79%;
    left: 25%;
    width: 14%;
    animation-duration: 2.0s, 2.0s;
    animation-delay: 2.0s, 0s
  }
  #bg .p15 {
    top: 62%;
    left: 66%;
    width: 13%;
    animation-duration: 1.9s, 1.9s;
    animation-delay: 1.9s, 0s
  }
  #bg .p16 {
    top: -11%;
    left: -5%;
    width: 13%;
    animation-duration: 2.0s, 2.0s;
    animation-delay: 2.0s, 0s
  }
  #bg .p17 {
    top: 41%;
    left: 91%;
    width: 13%;
    animation-duration: .7s, .7s;
    animation-delay: .7s, 0s
  }
  #bg .p18 {
    top: 70%;
    left: 1%;
    width: 13%;
    animation-duration: 1.9s, 1.9s;
    animation-delay: 1.9s, 0s
  }
  #bg .p19 {
    top: 27%;
    left: 22%;
    width: 14%;
    animation-duration: 2.0s, 2.0s;
    animation-delay: 2.0s, 0s
  }
  #bg .p20 {
    top: 75%;
    left: 83%;
    width: 15%;
    animation-duration: 2.2s, 2.2s;
    animation-delay: 2.2s, 0s
  }
  #bg .p6, #bg .p8 {
    display: none
  }
}