@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  line-height: 2;
  letter-spacing: 0.2px;
  font-size: 11px;
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (min-width: 769px) {
  body {
    margin: 0 auto !important;
  }
}

img {
  display: block;
  width: 100%;
}

a:hover {
  opacity: 0.6;
  transition: 0.6s;
}

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

/* .load
===================================================== */
.load {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

@media screen and (max-width: 768px) {
  .fv_sp {
    position: relative;
    height: 177vw;
  }
  .fv_sp div {
    position: absolute;
  }
  .fv_sp .sp_title {
    position: absolute;
    top: 50vh;
    left: 52%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 67.6109333333vw;
  }
}
#header {
  height: 100vh;
}
#header h1 {
  position: absolute;
  top: 50vh;
  left: 52%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-size: 4.6vw;
}
@media screen and (min-width: 769px) {
  #header h1 {
    top: 50vh;
    left: 15%;
    font-size: 1.4vw;
    position: fixed;
  }
}
#header .logo {
  width: 67.5871466667vw;
}
@media screen and (min-width: 769px) {
  #header .logo {
    width: 18vw;
    margin-bottom: 6px;
  }
}

#header:before {
  /*header の疑似要素に背景画像を指定*/
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  /*背景画像設定*/
  background-image: url("../images/fv.jpg");
  background-size: cover;
  background-position: center;
}
@media screen and (min-width: 769px) {
  #header:before {
    width: 30%;
    position: fixed;
  }
}

.fade_pc {
  opacity: 0;
  animation: fade-pc 1s;
}
.fade_pc.on {
  opacity: 1;
}

@keyframes fade-pc {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.row {
  flex-direction: row-reverse;
}

footer {
  color: #fff;
}
footer .f_box {
  position: relative;
}
@media screen and (min-width: 769px) {
  footer .f_box {
    position: fixed;
    overflow: hidden;
  }
}
@media screen and (min-width: 769px) {
  footer .f_box .back img {
    width: max(100%, 400px);
    height: auto;
  }
}
footer .f_box p, footer .f_box div {
  position: absolute;
}
@media screen and (min-width: 769px) {
  footer .f_box p, footer .f_box div {
    position: fixed;
  }
}
footer .f_box .sta_cre {
  font-size: 2.4vw;
  top: 12vw;
  left: 9vw;
  line-height: 1.7;
}
@media screen and (min-width: 769px) {
  footer .f_box .sta_cre {
    font-size: 0.8vw;
    right: 3%;
    margin-top: -10%;
    line-height: 1.7;
    text-align: right;
  }
}
footer .f_box .sta_cre span {
  font-size: 3.2vw;
}
@media screen and (min-width: 769px) {
  footer .f_box .sta_cre span {
    font-size: 1.7vw;
  }
}
footer .all_btn {
  font-size: 3.2vw;
  text-decoration: underline;
  left: 9vw;
  top: 39vw;
}
@media screen and (min-width: 769px) {
  footer .all_btn {
    font-size: 1.5vw;
    margin-top: -27%;
    width: 10%;
    left: 87%;
    text-align: right;
  }
}
footer .all_btn a {
  display: block;
  line-height: 1.4;
}
footer .f_logo {
  left: 38%;
  width: 58%;
  transform: translate(-50%, 0%);
}
@media screen and (max-width: 768px) {
  footer .f_logo {
    top: 222vw;
  }
}
@media screen and (min-width: 769px) {
  footer .f_logo {
    bottom: 3vw;
    left: 80%;
    width: 12%;
    transform: translate(-50%, 0%);
  }
}

@media screen and (min-width: 769px) {
  .pc_flex {
    display: flex; /* フレックスボックスでレイアウトを作成 */
    flex-direction: row; /* カラムを横並びに配置 */
    justify-content: space-between; /* カラムの間にスペースを設定 */
    width: 100%;
    margin: 0 auto; /* コンテナを中央に配置 */
  }
  header, footer {
    width: 30%;
    z-index: 99;
  }
  main {
    width: 40%;
  }
}
@media screen and (max-width: 768px) {
  .stack {
    position: sticky !important;
    top: 0;
  }
}
.flex {
  display: flex;
  gap: 1.6vw;
  padding: 1.6vw;
  background: #fff;
}
@media screen and (min-width: 769px) {
  .flex {
    gap: 1vw;
    padding: 1vw;
  }
}

.img-box {
  position: relative;
  height: 149.5vw;
}
@media screen and (min-width: 769px) {
  .img-box {
    height: 59vw;
  }
}
.img-box div {
  position: absolute;
}

.cre_1 {
  width: 35%;
  top: 27%;
  left: 13%;
}

.cre_2 {
  width: 30%;
  top: 30%;
  left: 55%;
}

.cre_3 {
  width: 45%;
  top: 59%;
  left: 48%;
}

.cre_5 {
  width: 35%;
  top: 54%;
  left: 51%;
}

.cre_6 {
  width: 41%;
  top: 27%;
  left: 6%;
}

.cre_7 {
  width: 38%;
  top: 30%;
  left: 7%;
}

.cre_8 {
  width: 53%;
  top: 54%;
  left: 9%;
}

.cre_9 {
  width: 42%;
  top: 29%;
  left: 47%;
}

.cre_10 {
  width: 42%;
  top: 22%;
  left: 48%;
}

.cre_11 {
  width: 38%;
  top: 31%;
  left: 51%;
}

.cre_12 {
  width: 55%;
  top: 70%;
  left: 14%;
}

.cre_13 {
  width: 45%;
  top: 32%;
  left: 51%;
}/*# sourceMappingURL=style.css.map */