@charset "UTF-8";

/* common */

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  color: #333;
  font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
  font-size: 1.6rem;
  line-height: 2;
  letter-spacing: 0.1em;
  font-style: normal;
  text-rendering: auto;
  font-optical-sizing: auto;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-feature-settings: "palt";
  background-color: #ffffff;
  background-image: linear-gradient(180deg, #ffffff 0%, #e7e3ee 16%, #d7edfc 66%, #eff2f3 100%);
}

p {
  margin: 0;
}

.imgmax {
  width: 100%;
  height: auto;
  display: block;
}

.-spbr {
  display: none;
}

.-pcbr {
  display: block;
}

.hidden {
  display: none;
}

.-pconly {
  display: block;
}

.-minonly,
.-microonly {
  display: none;
}

/*font*/
.-mincho {
  font-family: "Shippori Mincho", serif;
}

.-eng {
  font-family: Helvetica, Arial, sans-serif;
}

a {
  color: #333;
}

@media (hover: hover) and (pointer: fine) {
  a,
  a img {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    color: #333;
  }

  a:hover,
  a:hover img {
    opacity: 0.6;
    text-decoration: none;
  }
}

/*scroll*/
.scroll_down {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.scroll_down:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: linear-gradient(180deg, rgba(#000, 0) 0, rgba(#000, 0.8) 80%, rgba(#000, 0.8) 100%);
}

.scroll_down a {
  display: inline-block;
  position: absolute;
  right: 5%;
  bottom: 0;
  z-index: 12;
  width: 13px;
  padding: 10px 10px 110px;
  color: #fff;
  font-size: 1rem;
  font-family: "Josefin Sans", sans-serif;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
  transition: 0.2s;
  overflow: hidden;
  margin: auto;
}

.scroll_down a:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 30%;
  width: 1px;
  height: 100px;
  background: #ddd;
}

.scroll_down a:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 30%;
  width: 1px;
  height: 100px;
  background: #000;
}

.scroll_down a:hover {
  opacity: 0.5;
}

#type01 a:after {
  animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl01 {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/*formフォーマット*/

.-reset_form input[type="text"],
.-reset_form input[type="submit"],
.-reset_form input[type="button"],
.-reset_form button,
.-reset_form select,
.-reset_form textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

.-reset_form textarea {
  resize: vertical;
}

.-reset_form input[type="submit"],
.-reset_form input[type="button"],
.-reset_form label,
.-reset_form button,
.-reset_form select {
  cursor: pointer;
}

.-reset_form select::-ms-expand {
  display: none;
}

.-reset_form ::placeholder {
  color: #888;
}

.-reset_form ::-ms-input-placeholder {
  color: #888;
}

.-reset_form :-ms-input-placeholder {
  color: #888;
}

/*common*/
.-mb_txt p:not(:last-of-type) {
  margin-bottom: 2em;
}

/*width*/
.-base {
  max-width: 1200px;
  max-width: min(calc(100% - 40px), 1200px);
  margin-inline: auto;
}

.-middle {
  max-width: 1120px;
  max-width: min(calc(100% - 40px), 1120px);
  margin-inline: auto;
}

.-min {
  max-width: 980px;
  max-width: min(calc(100% - 40px), 980px);
  margin-inline: auto;
}

.-micro {
  max-width: 750px;
  max-width: min(calc(100% - 40px), 750px);
  margin-inline: auto;
}

.basic__area {
  margin: 0 auto;
  padding-bottom: 100px;
}

/*header*/
.head_clip {
  background: #fff;
}

header {
  padding: 20px 0 10px;
  position: relative;
  background: #fff;
}

#header__inner {
  overflow: hidden;
}

#header__inner::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  z-index: 11;
  height: 90px;
  background: url(../img/expo/head_wave.svg) no-repeat center bottom / 1920px;
  left: 50%;
  bottom: -77%;
  transform: translateX(-50%);
}

.logoact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 13;
  position: relative;
}

.logoact__logo {
  display: grid;
  grid-template-columns: 200px 180px;
  align-items: center;
  gap: 0 20px;
}

.language__base {
  font-size: 1.4rem;
}

.icon-lang {
  background: url(../img/expo/icon_lang.svg) no-repeat left center / 26px;
  padding: 5px 0 5px 36px;
}

/*contents*/

.stickyarea,
.stickyarea_bk {
  position: absolute;
  height: calc(100vh + 500px);
  width: 100%;
  top: 30vh;
  text-align: center;
}

@keyframes blurFadeIn {
  0% {
    opacity: 0;
    filter: blur(15px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.stickyarea {
  opacity: 0;
  /* animation: blurFadeIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-play-state: paused; 初期状態は停止 */
  z-index: 11;
}

.stickyarea.is-visible {
  /* animation-play-state: running; クラス追加で開始 */
}

/* JavaScriptが無効な場合のフォールバック */
html:not(.js) .stickyarea {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

.stickyarea_bk {
  z-index: 9;
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 0.6s ease; /* フェードインのトランジション */
}

/* 読み込み完了後に表示 */
.stickyarea_bk.is-loaded {
  opacity: 1;
}

/* JavaScriptが無効な場合のフォールバック */
html:not(.js) .stickyarea_bk {
  opacity: 1;
}

.stickyarea__copy {
  position: sticky;
  left: 50%;
  top: 100px;
  min-width: 260px;
  transition: transform 0.5s;
  text-align: center;
}

#main__mv {
  width: 100vw;
  height: 100vh;
  position: relative;
  margin: 0 auto 0;
  background: #fff;
  overflow: clip;
}

#main__mv::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  z-index: 10;
  height: 177px;
  background: url(../img/expo/under_wave.svg) no-repeat center bottom / 1920px;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
}

.mainmv {
  z-index: 10;
  background: #fff;
}

.mainmv img {
  height: 100vh;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

#copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#first__cp,
#sd__cp,
#special__cp,
#collaboration,
#future,
#news {
  background: #fff;
  z-index: 5;
}

#first__cp {
  padding-top: 600px;
  position: relative;
  overflow: hidden;
}

.first__cp--inner {
  position: relative;
  text-align: center;
  z-index: 5;
}

.first__txt {
  line-height: 3;
  padding-bottom: 140px;
  margin: 0 auto 40px;
}

.bp01 {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 189px;
}

.bp02 {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 189px;
}

.inrtodu {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 44%;
  gap: 0 60px;
}

.special_tit--read {
  font-size: 6rem;
  font-weight: normal;
  text-align: center;
}

.special_tit {
  max-width: 600px;
  margin: 0 auto 40px;
}

#moviearea {
  max-width: 770px;
  max-width: min(calc(100% - 40px), 770px);
  margin: 0 auto 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.collabo--movie {
  max-width: 810px;
  margin: 30px 0;
}

.movie__wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9のアスペクト比 */
  height: 0;
  grid-column: span 2;
}

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

.moviearea__list p:first-child {
  margin-bottom: 10px;
}

.moviearea__list:first-child {
  grid-column: span 2;
}

.moviearea__list:first-child img {
  border-radius: 20px;
}

.moviearea__list:not(:first-child) img {
  border-radius: 10px;
}

#moviearea img {
  filter: drop-shadow(5px 4px 20px rgba(0, 0, 0, 0.45));
}

#special__cp {
  position: relative;
}

.path__bp {
  position: absolute;
  right: 0;
  top: 20%;
}

#profilearea {
  max-width: 770px;
  max-width: min(calc(100% - 40px), 770px);
  margin: 0 auto;
}

.profilearea__list {
  display: grid;
  grid-template-columns: 39% auto;
  gap: 0 50px;
}

.profilearea__list:not(:last-of-type) {
  margin-bottom: 60px;
}

.profilearea__list.-reverse {
  display: grid;
  grid-template-columns: auto 39%;
  gap: 0 50px;
}
.profilearea__list.-reverse .profilearea__list--pic {
  order: 2;
}

.profilearea__list--pr {
  margin-bottom: 20px;
}

.pr--nd {
  margin-bottom: 30px;
}

.pr--name {
  font-size: 3rem;
  line-height: 1.2;
}

.pr--eng,
.pr--stancs {
  font-size: 1.4rem;
}

.profilearea__list--mark li {
  list-style: none;
  position: relative;
  font-size: 1.3rem;
  padding-left: 1.5em;
  letter-spacing: 0;
}

.profilearea__list--mark li::before {
  display: block;
  content: "●";
  font-size: 1.3rem;
  position: absolute;
  left: 0;
  top: 0;
}

.-reverse .profilearea__list--mark li {
  display: grid;
  grid-template-columns: max-content auto;
  gap: 0 15px;
}

.collabo-fcp {
  text-align: center;
  margin: 0 auto 80px;
}

.collaboration--fsp {
  max-width: 1310px;
  max-width: min(calc(100% - 40px), 1310px);
  margin-inline: auto;
}

.collabo--field {
  max-width: 1310px;
  max-width: min(calc(100% - 40px), 1310px);
  margin-inline: auto;
  position: relative;
}

.collabo_mark {
  position: absolute;
  z-index: 3;
  max-width: 400px;
  top: 0;
  left: 12%;
}

.collabo--blk__strate {
  z-index: 2;
  margin-top: 300px;
}

.collabo--blk {
  display: grid;
  grid-template-columns: 23% auto;
  gap: 0 80px;
}

.collabo--blk__fpic {
  width: 86%;
  margin: 0 0 70px auto;
  position: relative;
  z-index: 2;
}

.collabo--blk__birth {
  position: relative;
  font-size: 1.4rem;
}

.collabo--blk__birth::before {
  content: "";
  display: block;
  position: absolute;
  top: -200px;
  left: -20%;
  width: 100%;
  height: 100%;
  background: #f7f7f7;
}

.collabo--blk__birth--inner {
  max-width: 60%;
  position: relative;
}

.collabo--blk__stit {
  font-size: 3rem;
  font-weight: normal;
  margin-bottom: 1em;
}

.collabo--blk__fproduct {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 400px);
  gap: 0 10px;
  margin-top: 60px;
}

.collabo--blk__fproduct li {
  list-style: none;
  position: relative;
}

.coming {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #fff;
  width: 100%;
  text-align: center;
}

.special_tit--eng {
  text-align: center;
  letter-spacing: 1em;
  font-family: 2rem;
  line-height: 1;
}

#about {
  padding: 200px 0 0;
  margin: 0;
}

.about_jikko {
  text-align: center;
  margin: 0 auto 100px;
}

.jikko_logos {
  margin: 0 auto 30px;
  text-align: center;
  max-width: 82px;
  mix-blend-mode: multiply;
}

.history__cloud {
  background: #fff;
  border-radius: 20px;
  padding: 30px;
  max-width: 67%;
  margin-top: 70px;
}

.history__cloud dt {
  font-size: 6rem;
  line-height: 1.4;
}

.history__cloud dt span {
  font-size: 3.5rem;
}

.history__cloud:nth-of-type(odd) {
  margin-left: auto;
}

.-addimg {
  display: grid;
  grid-template-columns: 46% auto;
  align-items: center;
  gap: 0 20px;
}

#future {
  padding-top: 100px;
}

.future_year {
  font-size: 6rem;
  font-weight: normal;
  text-align: center;
  position: relative;
}

.future_year-arrow {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 auto;
  border: 10px solid transparent;
  border-top: 15px solid #0c1737;
}

.future_year span {
  font-size: 3.5rem;
}
.future_year--part {
  font-size: 4rem;
  line-height: 1.5;
  font-weight: normal;
  text-align: center;
  letter-spacing: 0.1em;
  margin: 0 auto 40px;
}

.future_year__fcp {
  font-size: 2rem;
  text-align: center;
}

.future_logo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 50px;
  margin: 60px auto;
  max-width: 700px;
}

.future_logo li {
  list-style: none;
}

.parth__map {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0 auto 100px;
}

.parth__map--fs img,
.parth__map--sd img {
  border-radius: 20px;
}

.parth__map--fs,
.parth__map--sd {
  width: 104%;
}

.parth__map--sd {
  margin: 0px 0 0 -4%;
}

.parth__map--fs {
  margin-top: 50%;
}

.parth__map--fs__area {
  margin-top: 30px;
  grid-column: span 2;
}

.parth__map--fs__cp,
.parth__map--sd__cp {
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 1.5;
}

.parth__map--kurage {
  max-width: 44%;
  grid-column: 2/3;
  margin: -35% auto 0;
}

#case__area {
  margin: 0 auto;
  padding: 0 5% 140px;
}

.case__slider--list {
  margin: 0 16px;
}

.case__slider--list img {
  border-radius: 20px;
  filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.3));
}
.case__pic {
  margin-bottom: 20px;
}

#case__area .slick-next,
#case__area .slick-prev {
  z-index: 3;
  opacity: 1;
  top: 36%;
  width: 44px;
  height: 44px;
}

#case__area .slick-prev {
  left: 0;
}

#case__area .slick-next {
  right: 0;
}

#case__area .slick-next:before,
#case__area .slick-prev:before {
  background: #000;
  content: "" !important;
  width: 44px;
  height: 44px;
  display: block;
  opacity: 1;
}

#case__area .slick-prev:before {
  background: url(../img/expo/i-prev.svg) no-repeat center center / 44px;
}

#case__area .slick-next:before {
  background: url(../img/expo/i-next.svg) no-repeat center center / 44px;
}

footer {
  background: #0c1737;
  color: #fff;
  padding: 10px 0 60px;
  position: relative;
}

footer::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  z-index: 2;
  height: 141px;
  background: url(../img/expo/footer_wave.svg) no-repeat center top / 1920px;
  left: 50%;
  bottom: 99%;
  transform: translateX(-50%);
}

.logo_w {
  max-width: 180px;
  margin: 0 auto 50px;
}

.footer__sns {
  display: flex;
  justify-content: center;
  gap: 0 10px;
  margin: 0 auto 60px;
  align-items: center;
}

.footer__sns li {
  list-style: none;
  max-width: 24px;
}

small {
  text-align: center;
  display: block;
  font-size: 1.2rem;
  line-break: 2.2;
  font-weight: normal;
}

/*line*/
/*========= バー表示のためのCSS ===============*/

.scrollgress {
  z-index: 3; /*他のposition指定しているエリアより前に出すためz-indexの数字を大きく*/
  top: 70px !important; /* fixedで設置しているheaderの高さよりも下にバーを出す*/
}

/*========= バー表示のためのCSS ===============*/

.hist__str {
  position: relative;
  padding: 40px 0px 100px;
  width: 100%;
}

/* 中央の縦線 */
.hist__str::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 100%;
  background: #fff;
}

/* history__cloudの設定 */
.history__cloud {
  position: relative;
  margin-bottom: 40px;
  z-index: 3; /* 線より前面に表示 */
}

.history__cloud:last-of-type {
  margin-bottom: 0;
}

/* 中央の伸びる縦線 */
.center-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px; /* 線の幅を細くしました */
  height: calc(100% + 200px); /* heightを100%に変更 */
  background: #0d1632;
  transition: max-height 0.5s ease;
  z-index: 2;
}

/* 基本的なフェードインアニメーション用のクラス */
.js .fade-in {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js .fade-in.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 様々な方向からのフェードイン */
.js .fade-in-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-40px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js .fade-in-right {
  opacity: 0;
  visibility: hidden;
  transform: translateX(40px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js .fade-in-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

.js .fade-in-down {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-40px);
  transition: opacity 1s, visibility 1s, transform 1s;
}

/* 共通のショークラス */
.js .fade-in-left.is-show,
.js .fade-in-right.is-show,
.js .fade-in-up.is-show,
.js .fade-in-down.is-show {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}

/* JavaScriptが無効な場合のスタイル */
html:not(.js) .fade-in,
html:not(.js) .fade-in-left,
html:not(.js) .fade-in-right,
html:not(.js) .fade-in-up,
html:not(.js) .fade-in-down {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ディレイ用のクラス */
.js .delay-05 {
  transition-delay: 0.3s;
}
.js .delay-1 {
  transition-delay: 0.6s;
}
.js .delay-15 {
  transition-delay: 0.9s;
}
.js .delay-2 {
  transition-delay: 1.2s;
}

/* JavaScriptが無効な場合はディレイを無効化 */
html:not(.js) .delay-05,
html:not(.js) .delay-1,
html:not(.js) .delay-15,
html:not(.js) .delay-2 {
  transition-delay: 0s;
}

#pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  opacity: 0;
  z-index: 20;
  transition: opacity 0.3s;
  cursor: pointer;
}

#pagetop.show {
  opacity: 1;
}

/* スクロールボタンを最初は非表示にする */
#pagetop.hide {
  display: none;
}
@media (min-width: 1921px) {
  #header__inner::after {
    width: 100vw;
    background: url(../img/expo/head_wave.svg) no-repeat center bottom / 100%;
  }

  footer::before {
    width: 100vw;
    background: url(../img/expo/footer_wave.svg) no-repeat center top / cover;
  }

  .stickyarea,
  .stickyarea_bk {
    height: calc(100vh + 240px);
  }
  #first__cp {
    padding-top: 400px;
  }
}

@media (max-width: 959px) {
  .stickyarea__copy svg {
    width: 50vw;
  }

  .first__txt {
    max-width: 60%;
  }

  .bp01,
  .bp02 {
    width: 20%;
  }

  .collabo--blk__fproduct {
    grid-template-columns: repeat(2, 1fr);
  }

  .path__bp {
    top: inherit;
    bottom: 10%;
    display: none;
  }

  .special_tit--read {
    font-size: 4rem;
  }

  .collabo_mark {
    max-width: 38%;
  }

  .collabo--blk__birth--inner {
    max-width: 80%;
  }

  .collabo--blk__birth::before {
    left: -15%;

    width: 110%;
  }
  .collabo--blk {
    gap: 0 50px;
  }

  #about {
    padding-top: 100px;
  }
}

@media (max-width: 767px) {
  /*common*/
  .basic__area {
    margin: 0 auto;
    padding-bottom: 80px;
  }

  .inrtodu {
    grid-template-columns: 100%;
    gap: 40px 0;
    width: 80%;
  }

  .inrtodu--pic {
    max-width: 300px;
    margin: 0 auto;
  }

  .bp01 {
    top: -70px;
  }

  .bp02 {
    bottom: 0px;
  }

  .first__txt {
    max-width: 80%;
  }

  .first__txt {
    padding-bottom: 100px;
  }

  .history__cloud dt {
    font-size: 4.4rem;
  }

  .special_tit--read {
    font-size: 3.4rem;
    line-height: 1.5;
    margin: 0 auto 20px;
  }

  .collabo--blk__stit {
    font-size: 2.6rem;
    line-height: 1.5;
  }
}

@media (max-width: 650px) {
  .history__cloud {
    max-width: 80%;
  }

  .special_tit {
    width: 86%;
  }

  .profilearea__list {
    grid-template-columns: 30% auto;
    gap: 0 40px;
  }

  .profilearea__list.-reverse {
    grid-template-columns: auto 30%;
    gap: 0 40px;
  }

  .collabo--blk__strate {
    margin-top: 150px;
  }
}

@media (max-width: 519px) {
  .logoact__logo {
    display: grid;
    grid-template-columns: 147px 129px;
    gap: 0 20px;
  }

  .-spbr {
    display: block;
  }

  .-pcbr {
    display: none;
  }

  .special_tit {
    width: 86%;
  }

  .history__cloud {
    max-width: 90%;
  }

  .-addimg {
    grid-template-columns: 100%;
    gap: 10px 0;
  }

  .profilearea__list,
  .profilearea__list.-reverse {
    grid-template-columns: 100%;
    gap: 20px 0;
  }

  .profilearea__list--pic {
    max-width: 240px;
    margin: 0 auto;
  }

  .profilearea__list.-reverse .profilearea__list--info {
    order: 2;
  }

  .collabo_mark {
    left: inherit;
    right: 0;
    top: 24%;
  }

  .collabo-fcp {
    margin-bottom: 40px;
  }

  .collabo--blk__stit {
    width: 55%;
    font-size: 3rem;
  }

  .collabo--blk {
    grid-template-columns: 100%;
  }

  .collabo--blk__fpic {
    width: 76%;
  }

  .collabo--blk__strate {
    margin: 0;
    max-width: 21%;
    position: absolute;
    z-index: 2;
    top: 50px;
  }

  .collabo--blk__birth--inner {
    max-width: 100%;
  }

  .collabo--blk__birth::before {
    left: -20px;
    width: 100vw;
  }

  #moviearea {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 20px;
  }

  #moviearea img {
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.45));
  }

  .moviearea__list:first-child {
    grid-column: span 2;
  }

  .first__txt {
    max-width: 86%;
    line-height: 2;
  }

  .about_jikko {
    text-align: center;
    margin: 0 auto 60px;
  }

  .future_year--part {
    font-size: 3rem;
  }

  .parth__map {
    margin: 0 auto 0px;
  }

  .parth__map--fs__cp,
  .parth__map--sd__cp {
    font-size: 1rem;
    line-height: 1.5;
  }
}

@media (max-width: 414px) {
  .stickyarea,
  .stickyarea_bk {
    height: calc(100vh + 120px);
  }
  #first__cp {
    padding-top: 250px;
  }
  .stickyarea__copy svg {
    width: 60vw;
  }

  .history__cloud {
    margin-top: 40px;
  }
  .bp02 {
    width: 30%;
    left: -5px;
    bottom: 50px;
  }

  .bp01 {
    width: 26%;
  }

  .first__txt {
    padding-bottom: 120px;
  }

  .inrtodu--pic {
    max-width: 250px;
  }

  .profilearea__list--pic {
    max-width: 170px;
  }

  .collabo--blk__stit {
    width: 56%;
    font-size: 2.6rem;
  }

  .special_tit--eng {
    font-size: 1.4rem;
    letter-spacing: 0.5em;
  }

  .history__cloud {
    padding: 24px;
  }

  .future_year--part {
    font-size: 2.4rem;
  }

  .future_logo {
    gap: 0 20px;
    margin: 40px auto;
  }

  .parth__map--fs,
  .parth__map--sd {
    width: 124%;
  }

  .parth__map--sd {
    margin: 0px 0 0 -24%;
  }

  .parth__map--fs {
    margin-top: 70%;
  }

  .parth__map--kurage {
    max-width: 55%;
    grid-column: 2 / 3;
    margin: -55% 0 0 auto;
  }

  #case__area {
    padding: 0 0 60px;
  }
}

@media (max-width: 375px) {
}