/*article, aside, body::before, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block
}*/
body main article#story .inner .image, body::before {
  background-repeat: no-repeat;
  background-position: center
}
/*a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline
}*/
/*html {
  line-height: 1;
  font-size: 62.5%;
  box-sizing: border-box
}*/
/*ol, ul {
  list-style: none
}*/
/*table {
  border-collapse: collapse;
  border-spacing: 0
}*/
/*caption, td, th {
  text-align: left;
  font-weight: 400;
  vertical-align: middle
}*/
/*blockquote, q {
  quotes: none
}*/
/*blockquote:after, blockquote:before, q:after, q:before {
  content: "";
  content: none
}*/
/*a img {
  border: none
}*/

/**, :after, :before {
  box-sizing: inherit
}*/
/*body {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-size: 1rem;
  width: 100%;
  overflow-x: hidden
}*/

.intro1_bg {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: rgb(209, 144, 144, 1);
  opacity: 1;
}
#top {
  height: 300vh;
}
@keyframes my-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.intro .a_logo_01, .intro .a_logo_02 {
  /* .boxが「my-fade-in」で状態変化するように指定 */
  animation-name: my-fade-in;
  animation-duration: 5s;
}
.intro {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}
#top, .intro1 {
  position: relative;
  z-index: 1;
}
@media screen and (max-height: 730px) and (min-width: 768px) {
  .intro .a_logo_01 {
    width: 7%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 25%;
    left: 50%;
  }
  .intro .a_logo_02 {
    width: 17%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 53%;
    left: 50%;
  }
  .intro .b_logo_01 {
    width: 28%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 70%;
    left: 50%;
  }
  .intro .b_logo_02 {
    width: 2%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 87%;
    left: 50%;
  }
}
@media screen and (min-height: 731px) and (min-width: 768px) {
  .intro .a_logo_01 {
    width: 100px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 26%;
    left: 50%;
  }
  .intro .a_logo_02 {
    width: 290px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 57%;
    left: 50%;
  }
  .intro .b_logo_01 {
    width: 460px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 75%;
    left: 50%;
  }
  .intro .b_logo_02 {
    width: 2%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 90%;
    left: 50%;
  }
}
@media screen and (min-width: 768px) {
  .pcNone {
    display: none;
  }
  body {
    background-image: url("../img/fv/1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }
  .intro .c_logo_01 {
    width: 75%;
  }
  .intro .c_logo_02 {
    width: 2%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 90%;
    left: 50%;
  }
  #content {
    background: #fff;
    position: absolute;
    width: 100%;
    z-index: 1;
  }
  .intro2 {
    background-color: rgba(0, 0, 0, 0.23);
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
  }
  .intro2 h2 {
    opacity: 0;
    width: 68.53333333333333vw;
    position: absolute;
    top: 50%;
    left: 70%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
  }
  .intro2 h2 {
    width: 850px;
  }
}
@media screen and (max-width: 767px) {
  .spNone {
    display: none;
  }
  body:before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/fv/8.jpg");
    background-size: cover;
  }
  body {
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
  }
  .intro .a_logo_01 {
    width: 15%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 20%;
    left: 50%;
  }
  .intro .a_logo_02 {
    width: 55%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 45%;
    left: 50%;
  }
  .intro .b_logo_01 {
    width: 65%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 65%;
    left: 50%;
  }
  .intro .b_logo_02 {
    width: 7%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 80%;
    left: 50%;
  }
  .intro .c_logo_01 {
    width: 75%;
  }
  .intro .c_logo_02 {
    width: 2%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 90%;
    left: 50%;
  }
  #content {
    background: #fff;
    position: relative;
    width: 100%;
    z-index: 1;
  }
  .intro2 {
    background-color: rgba(0, 0, 0, 0.23);
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
  }
  .intro2 h2 {
    opacity: 0;
    width: 68.53333333333333vw;
    position: absolute;
    top: 45%;
    left: 80%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
  }
  .intro2 h2 {
    width: 40%;
  }
  body main {
    height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
  }
  body main article#top {
    height: 300vh
  }
  body main, body main article {
    width: inherit;
  }
}