@charset "utf-8";
/* CSS Document */

/***************************************************
: style.css
***************************************************/
:root {
  --base-width: 980px;
  --over-width-half: calc((100vw - var(--base-width)) / 2);
  --base-color: var(--black);
  --base-bg: var(--white);
  --ff: sans-serif;
  --transition: 0.3s;

  --black: #000000;
  --white: #fff;

  --color_typeG: #f5f3ef;
}

@media (max-width: 520px) {
  :root {
    --base-width: 100%;
    --over-width-half: 5%;
  }
}

body {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  max-width: 100vw;
  margin: 0 auto;
  font-size: 1.6rem;
  font-family: var(--ff);
  /* font-feature-settings: "palt"; */
  line-height: 1.6;
  word-break: break-all;
  color: var(--base-color);
  background-color: var(--color_typeG);
  padding: 0 var(--over-width-half);
}

@media screen and (max-width: 980px) {
  :root {
    --over-width-half: 0;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 1.4rem;
  }
}

/**================================================== 
 section
================================================== **/

.wrap {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.3);
}

section,
article,
aside {
  position: relative;
}

/**================================================== 
 header
================================================== **/
header {
  position: fixed;
  top: 10px;
  right: var(--over-width-half);
  width: min(100%, var(--base-width));
  text-align: right;
  z-index: 100;
}

header img {
  width: 300px;
}

@media screen and (max-width: 520px) {
  header {
    top: 10px;
    right: 0;
  }

  header img {
    width: 150px;
  }
}

h1 {
  background: var(--white);
  padding: 15px;
}

h1 img {
  width: 300px;
  height: auto;
}

footer h1 img {
  width: auto;
}

@media screen and (max-width: 520px) {
  h1 img {
    width: 150px;
  }

  footer h1 img {
    width: auto;
  }
}

/**================================================== 
 sec
================================================== **/
section picture {
  display: block;
  width: min(100%, var(--base-width));
  overflow: hidden;
  object-fit: cover;
}

.bg-yt {
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
  background: var(--black);
  background-attachment: scroll !important;
}

.bg-yt iframe {
  width: 100% !important;
  height: 100% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.bg-yt.sec1 {
  background: url(../images/y1.jpg) no-repeat center / cover;
}
.sec1 picture img {
  width: 100%;
  height: 100vh;
}

.sec1 h1 {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
}

section:is(.sec2, .sec3, .sec4) picture {
  aspect-ratio: 980/551;
  width: 100%;
  height: auto;
}

section:is(.sec2, .sec3, .sec4) picture img {
  width: 100%;
  height: 100%;
}

section:is(.sec2, .sec3, .sec4) h2 {
  width: 100%;
  text-align: center;
  color: var(--white);
  font-weight: bold;
  font-size: min(10vw, 100px);
  line-height: 1.3;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2),
    -1px -1px 10px rgba(0, 0, 0, 0.2), 1px -1px 10px rgba(0, 0, 0, 0.2),
    -1px 1px 10px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
}

picture.active img {
  animation: animationZoom1 10s ease-in-out forwards;
  object-fit: cover;
}

@keyframes animationZoom1 {
  100% {
    transform: scale(1.2);
  }
}

@media screen and (max-width: 520px) {
  .sec1 h1 {
    width: 90%;
  }

  section:is(.sec2, .sec3, .sec4) picture {
    aspect-ratio: unset;
    width: 100%;
    height: 50vh;
  }

  section:is(.sec2, .sec3, .sec4) h2 {
    font-size: 36px;
  }
}

/**================================================== 
 footer
================================================== **/
footer {
  background: var(--white);
}

footer .footer-inner {
  padding: 80px;
}

footer .footer-inner p {
  font-size: 3rem;
  margin: 30px 0;
}

footer .footer-inner figure img {
  width: 100%;
}

footer .read {
  background: var(--black);
  padding: 1px 0;
}

footer .read a {
  display: block;
  width: min(90%, 520px);
  margin: 40px auto;
  border: 1px solid var(--white);
  border-radius: 30px;
  padding: 30px;
}

@media screen and (max-width: 520px) {
  footer .footer-inner {
    padding: 30px;
  }

  footer .footer-inner p {
    font-size: 1.8rem;
    margin: 20px 0;
  }

  footer .read a {
    margin: 30px auto;
    border-radius: 20px;
    padding: 20px;
  }
}