@charset "utf-8";

/*-----------------
共通
------------------*/
body.js-hide {
  opacity: 0;
  pointer-events: none;
}
/* ヘッダー↓ */
.header.under {
  z-index: 90;
}
.header.under .header__nav {
  opacity: 0;
  pointer-events: none;
}
.nav__listLink {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.nav__listItem {
  margin-bottom: 35px;
}
.header__left {
  position: relative;
  z-index: 999;
}
.header__wrapper.is-transparent {
  background-color: transparent !important;
}
body.fixed .header-img.headerLogoScroll.-after {
  opacity: 0;
}
body.fixed .header-img.headerLogoScroll.-before {
  opacity: 1;
}
body.fixed .header-img.-before {
  opacity: 1;
}
body.fixed .header-img.-after {
  opacity: 0;
}
/* .header-img.-after {
  opacity: 1;
}
.header-img.-before {
  opacity: 0;
} */
/* .ham__lineWrapper span {
  background: #fff;
} */
.ham.open .ham__lineWrapper span {
  background: #294997 !important;
}
/* ヘッダー↑ */

.kumakatsu_sanpo {
  font-family: "Noto Sans JP", sans-serif;
  overflow: hidden;
}
.to-top {
  display: none;
  /* opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease; */
}

.to-top.is-active {
  display: none;
  /* opacity: 1;
  visibility: visible; */
}
.top__link {
  max-width: 100px;
  width: 7.7%;
  position: fixed;
  bottom: 16px;
  right: 20px;
  z-index: 2;
}
.inner-1123 {
  max-width: 1123px;
  margin: 0 auto;
  width: 92%;
  position: relative;
}
.inner-1060 {
  max-width: 1060px;
  margin: 0 auto;
  width: 92%;
  position: relative;
}
.inner-1037 {
  max-width: 1037px;
  margin: 0 auto;
  width: 92%;
  position: relative;
}
.inner-1020 {
  max-width: 1020px;
  margin: 0 auto;
  width: 92%;
  position: relative;
}
.inner-970 {
  max-width: 970px;
  margin: 0 auto;
  width: 96%;
}
.inner-850 {
  max-width: 850px;
  /* padding: 109px 0 123px; */
  margin: 0 auto;
  width: 87%;
}
.partnership .inner-850 {
  width: 97%;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

.sec {
  padding: 124px 0 138px;
  margin-top: -6px;
  position: relative;
}

.sec__txt {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.28em;
  line-height: 3.30875;
  color: #fff;
  /* text-align: center; */
}

.sec__txt02 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 2.7566;
  text-align: center;
  color: #000;
}
.sec__txt03 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.32em;
  line-height: 2.3175;
  color: #0e705f;
}
.sec__ttl {
  max-width: 280px;
  padding: 14px 5px;
  margin: 0 auto 70px;
  background: #0e705f;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.3em;
  color: #fff;
  text-align: center;
}
.sec__ttl-white {
  display: block;
  width: fit-content;
  padding: 5px 6px 5px 14px;
  background: #fff;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #0e705f;
}
.sec__ttl-white + .sec__ttl-white {
  margin-top: 10px;
}

/*-----------------
fv
------------------*/
.fv {
  height: 100vh;
  min-height: 766px;
  position: relative;
}
.fv__pic {
  height: 100%;
}
.fv__pic .img {
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.fv__logo {
  width: 48%;
  max-width: 760px;
  min-width: 450px;
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.fv__txt {
  /* font-size: 18px; */
  font-size: clamp(18px, 1.21vw, 25px);
  font-weight: 700;
  letter-spacing: 0.4em;
  line-height: 2.326;
  color: #fff;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  position: absolute;
  top: 14%;
  right: 17%;
  z-index: 10;
}
.fv__kuma {
  width: 26%;
  max-width: 311px;
  /* min-width: 266px; */
  position: absolute;
  bottom: 0;
  left: 0;
}
.fv__people {
  width: 24%;
  max-width: 292px;
  /* min-width: 245px; */
  position: absolute;
  bottom: 0;
  right: 0;
}
/*-----------------
intro
------------------*/
.intro {
  /* overflow: hidden; */
  height: 1708px;
  padding: 131px 0 316px;
  background: url(../imgs/sanpo/sanpo_bg01.jpg) center center/ auto 100%
    no-repeat;
}
.intro__ttl {
  margin-bottom: 41px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: 0.28em;
  color: #fff;
}
/* youtube埋め込み ↓ */
.youtube-wrap {
  width: 68%;
  max-width: 652px;
  margin: 86px auto 0;
  padding-top: 36%;
  position: relative;
}

.youtube-wrap iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Overlay image styles */

.youtube-wrap {
  width: 68%;
  max-width: 652px;
  position: relative;
}

.youtube-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: opacity 0.3s ease-out;
  cursor: pointer;
}

.youtube-overlay::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("../imgs/sanpo/movie_cover_sanpo.jpg");
  background-size: cover;
  background-position: center center;
  border-radius: 20px;
}

.youtube-wrap iframe {
  width: 100%;
  border-radius: 20px;
}

.youtube-overlay.hidden {
  display: none;
}

/* youtube埋め込み ↑ */
/*-----------------
enter
------------------*/
.enter {
  background: url(../imgs/sanpo/sanpo_bg02.png) center center / auto 100% repeat;
  z-index: 3;
}
.enter.sec {
  margin-top: -15px;
}
.enter__wrap {
  position: relative;
  padding-top: 29px;
  margin-bottom: 42px;
  display: grid;
  grid-template-columns: 493px 47%;
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: 0;
}

.enter__ttl {
  grid-area: 1 / 1 / 2 / 2;
  margin-left: 37px;
  margin-bottom: 50px;
  rotate: -4deg;
}

.enter__txt {
  grid-area: 2 / 1 / 3 / 2;
  padding-left: 80px;
  font-size: 15px;
  color: #0e705f;
}

.enter__pic {
  position: absolute;
  top: -153px;
  right: 12px;
  width: 47%;
  max-width: 484px; /* 適宜調整 */
}
.enter__ml {
  margin-left: 20px;
}
.enter__list {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.enter__listItem {
  width: 22.5%;
  padding-top: 42px;
  margin-top: 51px;
  border-radius: 28px;
  background: #0e705f;
  position: relative;
}
.enter__num {
  max-width: 65px;
  position: absolute;
  top: -53px;
  left: -2px;
}
.enter__listTxt {
  padding: 17px 7px 26px 21px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.26em;
  line-height: 1.592;
  color: #fff;
  /* text-align: center; */
}
.enter__detail {
  margin-bottom: 61px;
  padding-left: 80px;
}
.enter__dl {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
}
.enter__dl + .enter__dl {
  margin-top: 7px;
}
.enter__dt {
  width: 206px;
  padding: 11px 0;
  background: #0e705f;
  clip-path: polygon(96% 0, 100% 50%, 96% 100%, 0% 100%, 0 50%, 0% 0%);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #fff;
  text-align: center;
}
.enter__dd {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #0e705f;
}
/*-----------------
event
------------------*/
.event {
  background: url(../imgs/sanpo/sanpo_bg03.png) center center / auto 100% repeat;
  z-index: 1;
}
.event__wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 45px;
  transform: translate(62px, 0px);
  margin-bottom: 50px;
}
.event__pic {
  max-width: 525px;
  width: 48%;
}
.event__right {
  width: 50%;
  min-width: 518px;
  margin-top: 42px;
}
.event__ttl {
  margin-bottom: 22px;
}
.event .sec__ttl {
  margin-bottom: 51px;
}
.event .sec__ttl-white {
  padding: 6px 6px 10px 14px;
  font-size: 34px;
  letter-spacing: 0.15em;
  padding-right: 0.15em;
}
.event__txt.sec__txt03 {
  margin-bottom: 27px;
  letter-spacing: 0.18em;
}
.event .sec__ttl-white + .sec__ttl-white {
  margin-top: 13px;
}
.event__detail {
  /* margin-bottom: 32px; */
}
.event__dl {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
.event__dl + .event__dl {
  margin-top: 7px;
}
.event__dt {
  width: 103px;
  padding: 11px 0;
  background: #0e705f;
  clip-path: polygon(93% 0, 100% 50%, 93% 100%, 0% 100%, 0 50%, 0% 0%);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.38em;
  color: #fff;
  text-align: center;
}
.event__dd {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: #0e705f;
}
.event__insta {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.75;
  color: #0e705f;
  text-align: center;
}
.event__instaLink {
  display: inline-block;
  margin-left: 6px;
}
.event__instaImg {
  width: 119px;
}
/*-----------------
record
------------------*/
.record {
  background: url(../imgs/sanpo/sanpo_bg04.png) center center / auto 100% repeat;
  z-index: 2;
}
.record__list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 38px;
}
.record__listLink {
  display: block;
}
.record__listLink:hover .record__listImg {
  transform: scale(1.1);
}
.record__listPic {
  overflow: hidden;
  margin-bottom: 15px;
  border-radius: 20px;
}
.record__listImg {
  border-radius: 20px;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.record__listTtl {
  width: fit-content;
  padding-left: 25px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #0e705f;
  text-align: center;
  position: relative;
}
.record__listTtl::before {
  display: block;
  content: "";
  width: 17px;
  height: 16px;
  background: url(../imgs/sanpo/arrow_g.png) center center / auto 100% repeat;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
}

/*-----------------
report
------------------*/
.report {
  margin-top: -11px;
  background: url(../imgs/sanpo/sanpo_bg05.png) center center / auto 100% repeat;
  position: relative;
  z-index: 2;
}
.report__content {
  max-width: 700px;
  margin: 0 auto;
}

/*-----------------
partnership
------------------*/
.partnership {
  margin-top: -4px;
  background: url(../imgs/sanpo/sanpo_bg06.png) center center / auto 100% repeat;
}
.partnership__wrap {
  /* padding: 79px 15px 90px; */
  /* background: #fff;
  border-radius: 20px; */
}

.partnership__content {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.partnership__imgWrap {
  width: 100%;
  max-width: 273px;
  margin: 0 auto 51px;
}

/*-----------------
contact
------------------*/
.contact {
  margin-top: -11px;
  background: url(../imgs/sanpo/sanpo_bg07.png) center center / auto 100% repeat;
  z-index: 2;
}
/* @media screen and (max-width: 1490px) {
  .fv__txt {
    right: 17%;
  }
} */
@media screen and (max-width: 1020px) {
  /*-----------------
enter
------------------*/
  .enter__pic {
    max-width: 317px;
    top: 20px;
  }
}
@media screen and (max-width: 1000px) {
  .fv__txt {
    right: 8%;
  }
}

@media screen and (max-width: 900px) {
  /*-----------------
enter
------------------*/
  .enter .sec__ttl-white {
    font-size: 28px;
  }
  .enter .sec__txt03 {
    text-align: center;
  }
  .enter__wrap {
    width: fit-content;
    padding-top: 0;
    margin: 0 auto 46px;
    display: flex;
    flex-direction: column;
  }
  .enter__ttl {
    margin-bottom: 0;
    margin-left: 0;
    order: 1;
  }
  .enter__pic {
    position: static;
    width: 80%;
    max-width: 280px;
    margin: 0 auto 15px;
    order: 2;
  }
  .enter__txt {
    padding-left: 0;
    order: 3;
  }
  .enter__list {
    max-width: 500px;
    margin: 0 auto;
    flex-wrap: wrap;
    row-gap: 50px;
  }
  .enter__listItem {
    width: calc(100% / 2 - 3vw);
    margin-top: 0;
  }
  .enter__listTxt {
    padding: 18px 19px 20px 26px;
  }
  .enter__detail {
    margin-bottom: 100px;
    padding-left: 0;
  }
  .enter__dl + .enter__dl {
    margin-top: 18px;
  }
  .enter__dl {
    max-width: 280px;
    margin: 0 auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 9px;
  }
  .enter__dt {
    width: 100%;
    padding-left: 20px;
    text-align: left;
    font-size: 14px;
  }
  .enter__dd {
    text-align: left;
    line-height: 1.848;
  }

  /*-----------------
event
------------------*/
  .event__wrap {
    flex-direction: column;
    gap: 21px;
    transform: translate(0px, 0px);
    margin-bottom: 30px;
  }
  .event__pic {
    width: 82%;
    max-width: 425px;
    margin: 0 auto;
  }
  .event__right {
    width: 100%;
    max-width: fit-content;
    min-width: auto;
    margin: 0 auto;
  }
  .event .sec__ttl-white {
    font-size: 21px;
  }
  .event__ttl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .event__txt.sec__txt03 {
    margin-bottom: 30px;
    text-align: center;
  }
  .event__detail {
    /* width: fit-content; */
    margin: 0 auto 0px;
  }
}
@media screen and (max-width: 750px) {
  /*-----------------
共通
------------------*/
  .inner-850 {
    /* padding: 59px 0 81px; */
  }
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
  .sec {
    padding: 63px 0 59px;
  }
  .sec__ttl {
    max-width: 280px;
    padding: 10px 5px;
    margin: 0 auto 33px;
  }
  .intro .sec__ttl {
    margin-bottom: 18px;
  }

  .sec__txt {
    font-size: 15px;
    line-height: 2.66;
    text-align: center;
  }
  .sec__txt02 {
    line-height: 2.5;
  }
  .sec__txt03 {
    font-size: 15px;
    line-height: 2;
  }
  .to-top {
    display: none;
  }
  /*-----------------
fv
------------------*/
  .fv__logo {
    width: 91%;
    max-width: 451px;
    min-width: auto;
    top: 37%;
  }
  .fv__txt {
    font-size: 16px;
    letter-spacing: 0.42em;
    line-height: 1.8675;
    /* top: 9%;
    right: 7%; */
    top: 13%;
    right: 5%;
  }
  /*-----------------
intro
------------------*/
  .intro {
    height: 1388px;
    padding: 55px 0 246px;
    background: url(../imgs/sanpo/sanpo_bg01_sp.jpg) center center/ auto 100%
      no-repeat;
  }
  .intro__ttl {
    margin-bottom: 26px;
    font-size: 25px;
    line-height: 2.11;
    text-align: center;
  }
  .intro__transform {
    display: inline-block;
    transform: translate(18px, 0px);
  }
  .intro__indent {
    display: inline-block;
    transform: translate(2px, 0px);
  }
  /* youtube埋め込み ↓ */
  .youtube-wrap {
    width: 93%;
    padding-top: 52%;
    /* max-width: 380px; */
    /* padding-top: 220px; */
    margin: 182px auto 0;
  }

  .youtube-overlay::before {
    /* background-image: url(../imgs/sanpo/movie_cover_sanpo.jpg); */
  }

  /* youtube埋め込み ↑ */

  /*-----------------
enter
------------------*/
  .enter {
    background: url(../imgs/sanpo/sanpo_bg02_sp.png) center center / auto 100%
      repeat;
  }
  /*-----------------
event
------------------*/
  .event {
    background: url(../imgs/sanpo/sanpo_bg03_sp.png) center center / auto 100%
      repeat;
  }
  .event__detail {
    /* margin-bottom: 35px; */
  }
  .event__dt {
    width: 87px;
  }
  .event__dt {
    padding: 15px 0;
    clip-path: polygon(87% 0, 100% 50%, 86% 100%, 0% 100%, 0 50%, 0% 0%);
  }
  .event__insta {
    /* max-width: 307px; */

    margin: 0 auto;
    text-align: center;
  }
  /*-----------------
record
------------------*/
  .record {
    background: url(../imgs/sanpo/sanpo_bg04_sp.png) center center / auto 100%
      repeat;
  }
  .record__list {
    flex-direction: column;
  }
  .record__listItem {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  /*-----------------
report
------------------*/
  .report {
    background: url(../imgs/sanpo/sanpo_bg05_sp.png) center center / auto 100%
      repeat;
  }

  /*-----------------
partnership
------------------*/
  .partnership {
    background: url(../imgs/sanpo/sanpo_bg06_sp.png) center center / auto 100%
      repeat;
  }
  .partnership__imgWrap {
    max-width: 200px;
    margin: 0 auto 39px;
  }
  /*-----------------
contact
------------------*/
  .contact {
    background: url(../imgs/sanpo/sanpo_bg07_sp.png) center center / auto 100%
      repeat;
  }
  .contact__banner {
    max-width: 280px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 500px) {
  .fv__logo {
    top: 40%;
  }
  /*-----------------
enter
------------------*/
  .enter__list {
    max-width: 284px;
    flex-direction: column;
  }
  .enter__listItem {
    width: 100%;
  }
  .enter__num {
    width: 48px;
    top: -31px;
    left: -9px;
  }
  .enter__detail {
    margin-bottom: 69px;
  }
}
@media screen and (max-width: 408px) {
  .enter .sec__ttl-white {
    font-size: 25px;
  }
  .event .sec__ttl-white {
    font-size: 18px;
  }
}
@media screen and (max-width: 360px) {
  .enter .sec__ttl-white {
    font-size: 22px;
  }
}