@charset "UTF-8";

.slide-media img,
.thumb-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.top_swiper {
  /* margin-top: -66px; */
  margin-top: -28px;
  margin-bottom: 1rem;
}

/* スクロール時のメニュー */
.header_scrolled .top_swiper {
  margin-top: 0px;
  margin-bottom: 1rem;
}

.top_swiper .l-inner {
  padding-bottom: 0;
}

.top_swiper .slide-media {
  height: 600px;
}

.top_swiper .slide-media img {
  -webkit-transition: 3s;
  transition: 3s;
}

.top_swiper_old .slide-media.clip {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-filter: contrast(1.1);
  filter: contrast(1.1);
  --stroke-width: calc(10 / var(--root-font-size) * 1rem);
  --out: calc(0 / var(--root-font-size) * 1rem);
  --in: calc(var(--out) + var(--stroke-width));
  -webkit-clip-path: polygon(var(--out) var(--out), calc(100% - var(--out)) var(--out), calc(100% - var(--out)) calc(100% - var(--out)), var(--out) calc(100% - var(--out)), var(--out) var(--in), var(--in) var(--in), var(--in) calc(100% - var(--in)), calc(100% - var(--in)) calc(100% - var(--in)), calc(100% - var(--in)) var(--in), var(--out) var(--in));
  clip-path: polygon(var(--out) var(--out), calc(100% - var(--out)) var(--out), calc(100% - var(--out)) calc(100% - var(--out)), var(--out) calc(100% - var(--out)), var(--out) var(--in), var(--in) var(--in), var(--in) calc(100% - var(--in)), calc(100% - var(--in)) calc(100% - var(--in)), calc(100% - var(--in)) var(--in), var(--out) var(--in));
  /* clip-path: polygon(var(--out) 0, calc(100% - var(--out)) 0, calc(100% - var(--out)) calc(100% - var(--out)), var(--out) calc(100% - var(--out)), var(--out) var(--in), var(--in) var(--in), var(--in) calc(100% - var(--in)), calc(100% - var(--in)) calc(100% - var(--in)), calc(100% - var(--in)) var(--in), var(--out) var(--in)); */
}

.top_swiper .swiper-slide {
  overflow: hidden;
}


.top_swiper .swiper-slide[class*=-active] .slide-media.clip img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.top_swiper_old .swiper-slide[class*=-prev] .slide-media img {
  -webkit-transform: translateX(80vw);
  transform: translateX(80vw);
  /* -webkit-transform: scale(1.2); */
  /* transform: scale(1.2); */
}

.top_swiper_old .swiper-slide[class*=-next] .slide-media img {
  -webkit-transform: translateX(-80vw);
  transform: translateX(-80vw);
  /* -webkit-transform: scale(1.2); */
  /* transform: scale(1.2); */
}

.top_swiper .content,
.top_swiper .fraction {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  margin: auto;
}

.top_swiper .content {
  pointer-events: none;
}

.top_swiper .content-title {
  font-size: calc(20 / var(--root-font-size) * 1rem);
  line-height: 1.1;
  /* margin-top: calc(2vw); */
  margin-top: 0px;
  /* color: var(--root-font-color-white); */
  /* text-shadow: 2px 1px #c7edff, 4px 2px #9acee7, 6px 3px #6bbade; */
  /* text-shadow: 1px 1px 1px var(--root-font-color-default); */
  /* background-color:rgba(146, 146, 146, 0.19); */
}

.content-title .marker {
  background-color: #ffffff70;
  padding: 10px;
}

.content-title .marker::first-letter {
  /* font-weight: bold; */
  font-size: calc(20 / var(--root-font-size) * 1rem);
  /* color: var(--root-font-color-white); */
}


.top_swiper .content-text {
  font-size: calc(18 / var(--root-font-size) * 1rem);
  margin-top: calc(14 / var(--root-font-size) * 1rem);
  /* margin: 20px 0 0 -200px; */
  color: var(--root-font-color-white);
  z-index: 1;
}

.content-text .marker {
  text-decoration-line: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;

  background-color: #2e7d3210;
  background-color: transparent;
}



.top_swiper .fraction {
  font-weight: bold;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.3);
}

.top_swiper .fraction .current {
  font-size: calc(12 / var(--root-font-size) * 1rem);
  display: inline-block;
  overflow: hidden;
  width: 6rem;
  display: none;
}

.top_swiper .fraction .current .num {
  display: inline-block;
}

.top_swiper .fraction .current .num.anm-started {
  -webkit-animation: top_swiper-fraction 1s var(--easing);
  animation: top_swiper-fraction 1s var(--easing);
}

.top_swiper .fraction .total {
  vertical-align: 0.5em;
  display: none;
}

.top_swiper .fraction .total::before {
  content: " / ";
}

.top_swiper .marker {
  position: relative;
  display: inline-block;
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
}

.top_swiper .marker::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: rgba(255, 255, 255, 1.0);

}

.top_swiper .anm-started .marker {
  -webkit-animation: top_swiper-marker 2.0s 2.0s both;
  animation: top_swiper-marker 2.0s 2.0s both;
}

.top_swiper .anm-started .marker::after {
  -webkit-animation: top_swiper-markerBg 0.2s 2.0s both;
  animation: top_swiper-markerBg 0.2s 2.0s both;
}

.top_swiper .anm-started .content-text .marker,
.top_swiper .anm-started .content-text .marker::after {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.top_swiper .anm-started .content-link .marker,
.top_swiper .anm-started .content-link .marker::after {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.top_swiper .anm-finished .marker {
  -webkit-animation: top_swiper-markerHide 0.8s both;
  animation: top_swiper-markerHide 0.8s both;
}

.top_swiper .anm-finished .marker::after {
  -webkit-clip-path: inset(0 0 0 100%);
  clip-path: inset(0 0 0 100%);
}





.top_swiper .content-button {
  font-size: calc(10 / var(--root-font-size) * 1rem);
  /* font-weight: bold; */
  display: inline-block;
  color: var(--root-font-color-darkgray);
  margin-top: 12px;
  margin-top: calc(12 / var(--root-font-size) * 1rem);

  background-color: #ffffff00;

}

.top_swiper .content-button::before {
  display: inline-block;
  width: 6rem;
  height: 1px;
  margin: -2px 1.6rem 0 0;
  content: "";
  vertical-align: middle;
  background-color: var(--root-font-color-gray);
}

.top_swiper .content.anm-started .content-button {
  pointer-events: auto;
}





@-webkit-keyframes top_swiper-marker {

  60%,
  100% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}

@keyframes top_swiper-marker {

  60%,
  100% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}

@-webkit-keyframes top_swiper-markerBg {
  60% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }

  100% {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes top_swiper-markerBg {
  60% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }

  100% {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
  }
}

@-webkit-keyframes top_swiper-markerHide {
  0% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }

  100% {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes top_swiper-markerHide {
  0% {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }

  100% {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%);
  }
}

@-webkit-keyframes top_swiper-fraction {

  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%);
    opacity: 1;
  }

  50.1% {
    -webkit-transform: translateY(110%);
    transform: translateY(110%);
    opacity: 0;
  }
}

@keyframes top_swiper-fraction {

  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%);
    opacity: 1;
  }

  50.1% {
    -webkit-transform: translateY(110%);
    transform: translateY(110%);
    opacity: 0;
  }
}








/* 1024px未満 */
@media (width<=1024px) {

  html {
    -webkit-text-size-adjust: 100%;
  }

  .l-inner {
    padding: 0 4rem;
  }

  .top_swiper .slide-media {
    height: max(45vh, 45vw);
  }

  .top_swiper .content {
    top: calc(20% + 6rem);
    right: 6rem;
    bottom: auto;
    left: 6rem;
  }

  .top_swiper .content-title {
    font-size: calc(18 / var(--root-font-size) * 1rem);
  }

  .content-title .marker::first-letter {
    /* font-weight: bold; */
    font-size: calc(18 / var(--root-font-size) * 1rem);
    /* color: var(--root-font-color-white); */

  }

  .top_swiper .content-text {
    font-size: calc(10 / var(--root-font-size) * 1rem);
    /* margin: 2.4rem 0; */
  }

  .top_swiper .fraction {
    font-size: 1.2rem;
    top: 20%;
    bottom: auto;
    left: 6rem;
    display: none;
  }


}

/* 600px未満 */
@media (width<=600px) {
  .top_swiper {
    margin-bottom: 8rem;
  }

  .top_swiper .content-title {
    font-size: calc(16 / var(--root-font-size) * 1rem);
  }

  .top_swiper .content-text {
    font-size: calc(8 / var(--root-font-size) * 1rem);
  }

  .top_swiper .content {
    left: calc(10 / var(--root-font-size) * 1rem);
  }

  .top_swiper .fraction {
    left: calc(10 / var(--root-font-size) * 1rem);
  }
}

/* 1025px以上 */
@media (width>=1025px) {

  .swiper-button-prev::before,
  .swiper-button-next::before {
    -webkit-transition: var(--transition);
    transition: var(--transition);
  }

  .swiper-button-prev:hover::before,
  .swiper-button-next:hover::before {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  .top_swiper .content {
    left: calc(140 / var(--root-font-size) * 1rem);
  }

  .top_swiper .fraction {
    left: calc(140 / var(--root-font-size) * 1rem);
  }
}




















.slide-items {
  list-style: none;
  position: relative;
  width: 50%;
  height: 50%;
  overflow: hidden;
}

.slide-items img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

















/* -------------------------------------------------- */
.top_swiper .slide {
  display: grid;
  grid-template-rows: 2fr auto 1fr;
  align-items: center;
  height: 700px;
  padding: 0 8rem;
  text-align: center;
  position: relative;
}

.top_swiper .slide-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.top_swiper .slide-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  opacity: 0;
  /* JS で上書きするのでここは短めにしておく */
  transition: transform 8s var(--easing), opacity 3s var(--easing);
}

.top_swiper .slide-title {
  font-family: "Noto Serif", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "游明朝", "Noto Serif JP", serif;
  font-size: calc(50 / var(--root-font-size) * 1rem);
  z-index: 2;
  position: relative;
  margin-top: 0;
  grid-row: 2;
  transform: translateY(-50px);
  opacity: 0;
}




/* 文字アニメーション */
@keyframes intro-hold-fade {

  0%,
  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes mv01-fadeInOut {
  0% {
    transform: translateY(-50px) scale(.8);
    opacity: 0;
    filter: blur(100px);
  }

  20%,
  38% {
    transform: translateY(-50px) scale(1);
    opacity: 1;
    filter: blur(0);
  }

  100% {
    transform: translateY(-50px) scale(1);
    opacity: 0;
    filter: blur(0);
  }
}









/* 992px未満 */
@media (max-width: 991.99px) {




  /* — 最小変更パッチ：最初のスライド（.intro）だけに適用 — */
  .top_swiper .swiper-slide.intro .slide {
    position: relative;
    /* 親を positioned にして、子の absolute を基準にする（安全策） */
  }

  .top_swiper .swiper-slide.intro .slide-title {
    position: absolute;
    /* 親基準で自由に動かす */
    left: 50%;
    /* 横基準は中央 */
    top: 50%;
    /* 縦位置は中央基準（必要なら微調整） */
    transform: translate(-50%, -170px);
    /* 横は-50%でセンター、縦は既存の -50px を維持 */
    white-space: nowrap;
    /* 改行させない（要望） */
    display: inline-block;
    /* コンテンツ幅に合わせる */
    width: auto;
    /* 幅はコンテンツに合わせる */
    max-width: calc(100vw - 48px);
    /* ビューポート内に収める上限（左右24pxずつの余白） */
    padding: 0 20px;
    /* 端で詰まらないように */
    box-sizing: border-box;
    text-align: center;
    z-index: 999;
    /* 画像に隠れないように上に出す */
  }


  /* 非 intro スライドのタイトルを強制で横書き1行、中央に */
  .top_swiper .swiper-slide:not(.intro) .slide-title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -170px) !important;
    /* 完全に中央に揃える（横+縦） */
    display: inline-block !important;
    /* 幅はコンテンツ幅に合わせる */
    white-space: nowrap !important;
    /* 折り返し禁止 */
    writing-mode: horizontal-tb !important;
    /* 横書きを強制 */
    text-orientation: mixed !important;
    /* 方向を通常に */
    word-break: normal !important;
    /* 文字単位で折られないように */
    overflow-wrap: normal !important;
    hyphens: none !important;
    width: auto !important;
    max-width: calc(100vw - 48px) !important;
    /* 端からの余裕を確保 */
    box-sizing: border-box !important;
    padding: 0 12px !important;
    z-index: 999 !important;
    text-align: center !important;
  }



  .top_swiper {
    margin-top: -18px;
    margin-bottom: 1rem;
  }

  .top_swiper .slide {
    height: 450px;
  }

  .top_swiper .slide-title {

    /* transform: translate(-0.5vw, -50px); */
    /* white-space: nowrap; */
    /* 改行させない */


    font-size: calc(35 / var(--root-font-size) * 1rem);
  }

  .vk_block-margin-xxl--margin-top {
    margin-top: 100px !important;
  }

  .right .chatting-color {
    padding: 30px 10% 30px 30px !important;
  }

}

/* 460px未満 */
@media (max-width: 459.99px) {

  /* — 最小変更パッチ：最初のスライド（.intro）だけに適用 — */
  .top_swiper .swiper-slide.intro .slide {
    position: relative;
    /* 親を positioned にして、子の absolute を基準にする（安全策） */
  }

  .top_swiper .swiper-slide.intro .slide-title {
    position: absolute;
    /* 親基準で自由に動かす */
    left: 50%;
    /* 横基準は中央 */
    top: 50%;
    /* 縦位置は中央基準（必要なら微調整） */
    transform: translate(-50%, -160px);
    /* 横は-50%でセンター、縦は既存の -50px を維持 */
    white-space: nowrap;
    /* 改行させない（要望） */
    display: inline-block;
    /* コンテンツ幅に合わせる */
    width: auto;
    /* 幅はコンテンツに合わせる */
    max-width: calc(100vw - 48px);
    /* ビューポート内に収める上限（左右24pxずつの余白） */
    padding: 0 20px;
    /* 端で詰まらないように */
    box-sizing: border-box;
    text-align: center;
    z-index: 999;
    /* 画像に隠れないように上に出す */
  }

  /* 非 intro スライドのタイトルを強制で横書き1行、中央に */
  .top_swiper .swiper-slide:not(.intro) .slide-title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -160px) !important;
    /* 完全に中央に揃える（横+縦） */
    display: inline-block !important;
    /* 幅はコンテンツ幅に合わせる */
    white-space: nowrap !important;
    /* 折り返し禁止 */
    writing-mode: horizontal-tb !important;
    /* 横書きを強制 */
    text-orientation: mixed !important;
    /* 方向を通常に */
    word-break: normal !important;
    /* 文字単位で折られないように */
    overflow-wrap: normal !important;
    hyphens: none !important;
    width: auto !important;
    max-width: calc(100vw - 48px) !important;
    /* 端からの余裕を確保 */
    box-sizing: border-box !important;
    padding: 0 12px !important;
    z-index: 999 !important;
    text-align: center !important;
  }

  .top_swiper {
    margin-top: -8px;
    margin-bottom: 1rem;
  }

  .top_swiper .slide {
    height: 270px;
  }

  .top_swiper .slide-title {
    font-size: calc(25 / var(--root-font-size) * 1rem);
    margin: 60px auto 0 auto;


  }


  .vk_block-margin-xxl--margin-top {
    margin-top: 50px !important;
  }

  .right .chatting-color {
    padding: 30px 5% 30px 30px !important;
  }

}