@charset "UTF-8";

/* =========================================================
  TOP Page
========================================================= */


/* =========================================================
  Main Visual
========================================================= */

.main-visual {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: var(--color-main-dark);
}


/* =========================================================
  Main Visual Slider
========================================================= */

.main-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}


/* =========================================================
  Slider Slide
========================================================= */

.main-slider__slide {
  position: absolute;
  inset: 0;

  opacity: 0;

  /*
    以前のゆっくり引いていくズームエフェクトを維持。
    上端を基準にすることで、写真上部が見切れにくいようにする。
  */
  transform: scale(1.05);
  transform-origin: center top;

  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;

  transition:
    opacity 1.4s ease,
    transform 7s ease;
}

.main-slider__slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}


/* =========================================================
  旧背景画像指定
========================================================= */

.main-slider__slide--01 {
  background-image: url("../images/mainvisual-01.jpg");
}

.main-slider__slide--02 {
  background-image: url("../images/top/mainvisual-02.jpg");
}

.main-slider__slide--03 {
  background-image: url("../images/mainvisual-03.jpg");
}


/* =========================================================
  Main Visual Shade
========================================================= */

.main-visual__shade {
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.18) 0%,
      rgba(0, 0, 0, 0.08) 42%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.14) 0%,
      rgba(0, 0, 0, 0) 48%
    );
}


/* =========================================================
  Main Visual Content
========================================================= */

.main-visual__content {
  position: absolute;
  z-index: 2;

  left: max(
    40px,
    calc((100vw - var(--inner-width)) / 2 + 40px)
  );

  bottom: 82px;

  width: min(
    760px,
    calc(100% - 80px)
  );

  color: var(--color-white);
  background: transparent;
}


/* =========================================================
  Main Visual Lead
========================================================= */

.main-visual__lead {
  margin-bottom: 14px;

  font-family: var(--font-en);
  font-size: 15px;

  letter-spacing: 0.2em;

  color: rgba(255, 255, 255, 0.92);
}


/* =========================================================
  Main Visual H1
========================================================= */

.main-visual h1 {
  margin: 0 0 22px;

  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.45;
  font-weight: 700;

  letter-spacing: 0.08em;
}


/* =========================================================
  Main Visual Text
========================================================= */

.main-visual__text {
  max-width: 820px;

  margin-bottom: 0;

  font-size: 16px;
  line-height: 2;

  color: rgba(255, 255, 255, 0.94);
}


/* =========================================================
  Main Visual Text Animation
========================================================= */

.mv-line {
  display: block;

  opacity: 0;

  transform: translateY(18px);

  filter: blur(6px);

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.32);
}

body.is-loaded .mv-line--1 {
  animation:
    mvTextFadeUpSoft 1.4s ease forwards 0.45s;
}

body.is-loaded .mv-line--2 {
  animation:
    mvTextFadeUpSoft 1.8s ease forwards 1.05s;
}

body.is-loaded .mv-line--3 {
  animation:
    mvTextFadeUpSoft 1.8s ease forwards 2.85s;
}

body.is-loaded .mv-line--4 {
  animation:
    mvTextFadeUpSoft 1.5s ease forwards 2.35s;
}

body.is-loaded .mv-line--5 {
  animation:
    mvTextFadeUpSoft 1.5s ease forwards 2.85s;
}


@keyframes mvTextFadeUpSoft {

  0% {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }

  60% {
    opacity: 0.75;
    filter: blur(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}


/* =========================================================
  Slider Dots
========================================================= */

.main-slider__dots {
  position: absolute;
  z-index: 3;

  right: max(
    32px,
    calc((100vw - var(--inner-width)) / 2 + 32px)
  );

  bottom: 34px;

  display: flex;
  gap: 14px;
}

.main-slider__dot {
  width: 10px;
  height: 10px;

  padding: 0;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.45);

  cursor: pointer;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.main-slider__dot.is-active {
  width: 10px;
  height: 10px;

  background: var(--color-white);

  transform: scale(1.25);
}


/* =========================================================
  Slider Caption
========================================================= */

.main-slider__captions {
  position: absolute;

  top: 28px;

  right: max(
    32px,
    calc((100vw - var(--inner-width)) / 2 + 32px)
  );

  z-index: 4;

  display: grid;

  justify-items: end;

  max-width: min(
    420px,
    calc(100% - 64px)
  );

  pointer-events: none;
}

.main-slider__caption {
  display: none;

  margin: 0;

  padding: 10px 15px 11px;

  text-align: right;

  color: #ffffff;

  background: #a5cf4c;

  border-left:
    3px solid rgba(255, 255, 255, 0.72);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22);

  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.28);
}

.main-slider__caption.is-active {
  display: block;

  animation:
    topCaptionFade 0.6s ease forwards;
}

.main-slider__caption-city {
  display: block;

  margin-bottom: 2px;

  font-size: 12px;
  line-height: 1.4;

  letter-spacing: 0.12em;

  opacity: 0.92;
}

.main-slider__caption-name {
  display: block;

  font-size: 14px;
  line-height: 1.5;

  font-weight: 700;

  letter-spacing: 0.04em;
}


@keyframes topCaptionFade {

  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
  TOP Main Visual
  1600px × 1200px（4:3）

  ・横幅に合わせて高さも4:3
  ・ブラウザ高で写真を切らない
  ・写真全体を表示
  ・上下左右をカットしない
========================================================= */

.home .main-visual {
  position: relative;

  width: 100%;

  /*
    1600 : 1200 = 4 : 3
    高さ = 横幅 × 75%
  */
  height: 75vw;

  min-height: 0;
  max-height: none;

  margin: 0;

  /*
    stickyを阻害するoverflow:hiddenは使わない。

    clipは見た目上のはみ出しだけを隠し、
    スクロールコンテナを作らない。
  */
  overflow: clip;

  background: #000;


  /*
    UI部分が使用する表示高さ。

    写真が画面より低ければ写真の高さ。
    写真が画面より高ければ表示画面の高さ。
  */
  --mv-visible-height:
    min(
      75vw,
      calc(100vh - var(--header-height))
    );

  /*
    対応ブラウザではdvhを使用
  */
  --mv-visible-height:
    min(
      75vw,
      calc(100dvh - var(--header-height))
    );
}


/* =========================================================
  TOP Slider
========================================================= */

.home .main-slider {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;
}


/* =========================================================
  TOP Slider Slide

  ・スライド本体は opacity のフェードだけを担当
  ・拡大縮小は画像側で行い、iPhoneでのカクつきを軽減
========================================================= */

.home .main-slider__slide {
  position: absolute;

  inset: 0;

  overflow: hidden;

  opacity: 0;
  z-index: 0;

  background-image: none !important;
  background-color: #000;

  /*
    スライド本体では transform を使わない。
    opacity だけをゆっくりクロスフェードさせる。
  */
  -webkit-transform: none;
  transform: none;

  transition:
    opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.home .main-slider__slide.is-active {
  opacity: 1;
  z-index: 1;
}


/* =========================================================
  TOP Slider Images
========================================================= */

.home .main-slider__image-bg,
.home .main-slider__image-main {
  position: absolute;

  display: block;

  margin: 0;
  padding: 0;

  border: 0;

  pointer-events: none;
}


/* =========================================================
  背景用画像
========================================================= */

.home .main-slider__image-bg {
  display: none;
}


/* =========================================================
  メイン画像

  ・スライド領域を隙間なく全面表示
  ・上端を基準に表示
  ・左右と下側をわずかに外へ広げ、黒い縁を防止
  ・ズームエフェクトは表示中の .main-slider__image-main だけで行う
========================================================= */

.home .main-slider__image-main {
  position: absolute;

  left: -1px;
  top: 0;

  z-index: 1;

  width: calc(100% + 2px);
  height: calc(100% + 1px);

  max-width: none;

  object-fit: cover;
  object-position: center top;

  /*
    通常時は完成位置。
    activeになった画像だけをGPU向けtransformで動かす。
  */
  -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

  -webkit-transform-origin: center top;
  transform-origin: center top;

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.home .main-slider__slide.is-active .main-slider__image-main {
  -webkit-animation: mvPhotoZoomSmooth 6s linear forwards;
  animation: mvPhotoZoomSmooth 6s linear forwards;

  will-change: transform;
}

@-webkit-keyframes mvPhotoZoomSmooth {
  from {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.09, 1.09, 1);
    transform: translate3d(0, 0, 0) scale3d(1.09, 1.09, 1);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes mvPhotoZoomSmooth {
  from {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1.09, 1.09, 1);
    transform: translate3d(0, 0, 0) scale3d(1.09, 1.09, 1);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}


/* =========================================================
  TOP Main Visual Shade
========================================================= */

.home .main-visual__shade {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;
}


/* =========================================================
  Sticky Track

  写真全体と同じ高さを持たせる。

  この要素が
  「UIをどこまでstickyさせてよいか」
  の終了地点になる。
========================================================= */

.home .main-visual__ui-track {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  pointer-events: none;
}


/* =========================================================
  Sticky UI

  写真の途中：
  画面内に留まる。

  写真の下端が近づく：
  ui-trackの下端によってstickyが解除される。

  その後：
  写真と一緒に自然に上へ流れていく。
========================================================= */

.home .main-visual__sticky {
  position: sticky;

  /*
    固定ヘッダーの下で止める
  */
  top: var(--header-height);

  z-index: 2;

  width: 100%;

  /*
    最初に見えている画面分だけの高さを持たせる。

    これが重要。
    写真下端より先までstickyし続けるのを防ぐ。
  */
  height: var(--mv-visible-height);

  pointer-events: none;
}


/* =========================================================
  TOP Main Copy

  sticky領域内の中央付近に表示
========================================================= */

.home .main-visual__content {
  position: absolute;

  z-index: 2;

  left: clamp(
    28px,
    5vw,
    72px
  );

  right: auto;

  top: 60%;
  bottom: auto;

  width: min(
    760px,
    calc(100% - 80px)
  );

  transform: translateY(-50%);

  color: var(--color-white);

  background: transparent;

  /*
    sticky wrapperはpointer-events:noneだが
    ボタンは操作できるよう戻す
  */
  pointer-events: auto;
}


/* =========================================================
  TOP Main Copy Size
========================================================= */

.home .main-visual__lead {
  margin-bottom: 14px;

  font-size: clamp(
    12px,
    1vw,
    15px
  );

  letter-spacing: 0.2em;
}

.home .main-visual h1 {
  margin: 0 0 22px;

  font-size: clamp(
    32px,
    4vw,
    52px
  );

  line-height: 1.45;
  font-weight: 700;

  letter-spacing: 0.08em;
}

.home .main-visual__text {
  max-width: 820px;

  margin-bottom: 0;

  font-size: clamp(
    14px,
    1.1vw,
    16px
  );

  line-height: 2;

  color: rgba(255, 255, 255, 0.94);
}


/* =========================================================
  TOP Slider Caption

  sticky画面内の右下に配置。

  写真の下端が近づいた場合は
  stickyレイヤーごと写真と一緒に流れる。
========================================================= */

.home .main-slider__captions {
  position: absolute;

  top: auto;

  right: clamp(
    24px,
    4vw,
    56px
  );

  bottom: 58px;

  z-index: 4;

  display: grid;

  justify-items: end;

  max-width: min(
    520px,
    calc(100% - 48px)
  );

  transform: none;

  pointer-events: none;
}


/* =========================================================
  TOP Caption Style
========================================================= */

.home .main-slider__caption {
  display: none;

  margin: 0;

  padding: 0;

  text-align: right;

  color: rgba(255, 255, 255, 0.72);

  background: transparent;

  border-left: none;

  box-shadow: none;

  text-shadow:
    0 1px 5px rgba(0, 0, 0, 0.45);
}

.home .main-slider__caption.is-active {
  display: block;

  animation:
    topCaptionFade 0.6s ease forwards;
}

.home .main-slider__caption-city {
  display: block;

  margin-bottom: 2px;

  font-size: 11px;
  line-height: 1.4;

  font-weight: 400;

  letter-spacing: 0.12em;

  opacity: 0.92;
}

.home .main-slider__caption-name {
  display: block;

  font-size: 13px;
  line-height: 1.5;

  font-weight: 400;

  letter-spacing: 0.04em;
}


/* =========================================================
  TOP Slider Dots

  sticky画面内の右下へ配置
========================================================= */

.home .main-slider__dots {
  position: absolute;

  z-index: 3;

  top: auto;

  right: max(
    32px,
    calc((100vw - var(--inner-width)) / 2 + 32px)
  );

  bottom: 28px;

  display: flex;
  gap: 14px;

  transform: none;

  pointer-events: auto;
}


/* =========================================================
  TOP News
========================================================= */

.home .news-list {
  margin-top: 26px;
}


/* =========================================================
  Large Screen
========================================================= */

@media screen and (min-width: 1440px) {

  .home .main-visual__content {
    /* 大画面では写真の内側へしっかり寄せる */
    left: clamp(
      120px,
      10vw,
      200px
    );

    width: min(
      760px,
      calc(100% - 240px)
    );
  }

  .home .main-visual h1 {
    font-size: clamp(48px, 4.2vw, 60px);
  }

  .home .main-visual__text {
    font-size: 16px;
  }
}


/* =========================================================
  PC Low Height

  横幅は大きいがブラウザ高が低い場合、
  コピーが画面から上下にはみ出さないよう調整
========================================================= */

@media screen and (min-width: 769px) and (max-height: 760px) {

  .home .main-visual__content {
    top: 60%;
  }

  .home .main-visual__lead {
    margin-bottom: 8px;

    font-size: 12px;
  }

  .home .main-visual h1 {
    margin-bottom: 14px;

    font-size: clamp(
      28px,
      3.2vw,
      42px
    );

    line-height: 1.4;
  }

  .home .main-visual__text {
    font-size: 14px;
    line-height: 1.7;
  }

  .home .main-slider__captions {
    bottom: 46px;
  }

  .home .main-slider__dots {
    bottom: 20px;
  }
}


/* =========================================================
  Tablet
========================================================= */

@media screen and (max-width: 1024px) and (min-width: 769px) {

  .home .main-visual__content {
    left: 28px;

    width: min(
      680px,
      calc(100% - 56px)
    );
  }

  .home .main-slider__captions {
    right: 28px;
    bottom: 54px;
  }

  .home .main-slider__dots {
    right: 28px;
    bottom: 26px;
  }
}


/* =========================================================
  Smartphone
========================================================= */

@media screen and (max-width: 768px) {

  .home .main-visual {
    position: relative;

    width: 100%;

    /* 4:3をそのまま維持 */
    height: 75vw;
    min-height: 0;

    max-height: none;

    margin: 0;

    overflow: hidden;

    background: #000;

    --mv-visible-height: 75vw;
  }


  /* ---------------------------------------------------------
    Slider
  --------------------------------------------------------- */

  .home .main-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }


  /* ---------------------------------------------------------
    Slider Slide
  --------------------------------------------------------- */

  .home .main-slider__slide {
    position: absolute;
    inset: 0;

    background-position: center top;
    background-repeat: no-repeat;

    -webkit-transform: none;
    transform: none;
  }


  /* ---------------------------------------------------------
    Image

    iPhoneではPCより少し大きめの 1.11 → 1.00。
    速度はlinearにして途中の速度変化によるカクつきを抑える。
  --------------------------------------------------------- */

  .home .main-slider__image-main {
    position: absolute;

    left: -1px;
    top: 0;

    width: calc(100% + 2px);
    height: calc(100% + 1px);

    max-width: none;

    object-fit: cover;
    object-position: center top;

    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);

    -webkit-transform-origin: center top;
    transform-origin: center top;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .home .main-slider__slide.is-active .main-slider__image-main {
    -webkit-animation: mvPhotoZoomSmoothSP 6s linear forwards;
    animation: mvPhotoZoomSmoothSP 6s linear forwards;

    will-change: transform;
  }

  @-webkit-keyframes mvPhotoZoomSmoothSP {
    from {
      -webkit-transform: translate3d(0, 0, 0) scale3d(1.11, 1.11, 1);
      transform: translate3d(0, 0, 0) scale3d(1.11, 1.11, 1);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
      transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
  }

  @keyframes mvPhotoZoomSmoothSP {
    from {
      -webkit-transform: translate3d(0, 0, 0) scale3d(1.11, 1.11, 1);
      transform: translate3d(0, 0, 0) scale3d(1.11, 1.11, 1);
    }

    to {
      -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
      transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }
  }


  /* ---------------------------------------------------------
    UI Track
  --------------------------------------------------------- */

  .home .main-visual__ui-track {
    position: absolute;

    inset: 0;

    z-index: 2;

    width: 100%;
    height: 100%;

    pointer-events: none;
  }


  /* ---------------------------------------------------------
    Sticky Wrapper OFF
  --------------------------------------------------------- */

  .home .main-visual__sticky {
    position: absolute;

    inset: 0;

    top: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    pointer-events: none;
  }


  /* ---------------------------------------------------------
    Main Copy
  --------------------------------------------------------- */

  .home .main-visual__content {
    position: absolute;

    left: 20px;
    right: 20px;

    top: 60%;
    bottom: auto;

    width: auto;

    transform: translateY(-50%);

    padding: 0;

    background: transparent !important;

    border-left: none;
    box-shadow: none;

    pointer-events: auto;
  }


  .home .main-visual__lead {
    margin-bottom: 6px;

    font-size: 10px;

    letter-spacing: 0.14em;
  }


  .home .main-visual h1 {
    margin-bottom: 10px;

    font-size: clamp(18px, 5.5vw, 22px);
    line-height: 1.45;

    letter-spacing: 0.04em;
  }


  .home .main-visual__text {
    max-width: none;

    font-size: clamp(11px, 3.2vw, 13.5px);
    line-height: 1.65;
  }


  /* ---------------------------------------------------------
    Caption
  --------------------------------------------------------- */

  .home .main-slider__captions {
    position: absolute;

    top: auto;

    right: 16px;
    bottom: 38px;

    max-width: calc(100% - 32px);

    transform: none;

    pointer-events: none;
  }


  .home .main-slider__caption {
    padding: 0;
  }


  .home .main-slider__caption-city {
    font-size: 9.5px;
  }


  .home .main-slider__caption-name {
    font-size: 10.5px;
  }


  /* ---------------------------------------------------------
    Dots
  --------------------------------------------------------- */

  .home .main-slider__dots {
    position: absolute;

    top: auto;

    right: 16px;
    bottom: 16px;

    transform: none;

    pointer-events: auto;
  }


  .home .main-slider__dot {
    width: 10px;
    height: 10px;
  }


  .home .main-slider__dot.is-active {
    width: 10px;
    height: 10px;
  }
}

/* =========================================================
  TOP Main Copy
  「北の風景づくり」
  静かに浮かび上がる
========================================================= */

.mv-line {
  display: block;

  opacity: 0;
  transform: none;
  filter: blur(2.5px);

  /* 最初から完成時と同じ文字間隔にする */
  letter-spacing: 0.12em;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.40),
    0 6px 20px rgba(0, 0, 0, 0.20);
}

body.is-loaded .mv-line--2 {
  animation:
    mvTitleAppear 1.9s cubic-bezier(0.22, 1, 0.36, 1)
    forwards 0.55s;
}

@keyframes mvTitleAppear {
  0% {
    opacity: 0;
    transform: none;
    filter: blur(2.5px);
  }

  45% {
    opacity: 0.65;
    transform: none;
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.home .main-visual h1 {
  margin: 0;

  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.4;

  font-weight: 600;
  letter-spacing: 0.12em;

  color: #fff;
}

@media screen and (max-width: 768px) {
  .home .main-visual h1 {
    margin: 0;

    font-size: clamp(20px, 6vw, 25px);
    line-height: 1.4;

    font-weight: 600;
    letter-spacing: 0.10em;
  }
}

.home .main-visual h1 {
  margin: 0;

  font-family:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    serif;

  /* 写真を主役にしつつ、PCでは十分な存在感を持たせる */
  font-size: clamp(42px, 4.2vw, 60px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;

  color: #fff;

  /* 明暗差の大きいスライド写真でも読みやすくする */
  -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.28);

  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.65),
    0 7px 22px rgba(0, 0, 0, 0.38);
}

.mv-line {
  display: block;

  opacity: 0;
  transform: none;
  filter: blur(2.5px);

  letter-spacing: 0.14em;

  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 6px 18px rgba(0, 0, 0, 0.35);
}

@media screen and (max-width: 768px) {
  .home .main-visual h1 {
    margin: 0;

    font-size: clamp(22px, 6.2vw, 26px);
    line-height: 1.4;

    font-weight: 600;
    letter-spacing: 0.11em;
  }
}

/* 大画面用の文字サイズを最終的に確定 */
@media screen and (min-width: 1440px) {
  .home .main-visual h1 {
    font-size: clamp(48px, 4.2vw, 60px);
  }
}

/* =========================================================
  TOP Slider Motion Override

  style.css の prefers-reduced-motion で
  animation / transition が停止される環境でも、
  TOP写真のズームとフェードだけは有効にする。
========================================================= */

@media (prefers-reduced-motion: reduce) {

  /* 「北の風景づくり」は通常時と同じように、
     0.55秒後から静かに表示させる */
  body.home.is-loaded .mv-line--2 {
    animation:
      mvTitleAppear 1.9s cubic-bezier(0.22, 1, 0.36, 1)
      forwards 0.55s !important;
  }

  .home .main-slider__slide {
    transition:
      opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .home .main-slider__slide.is-active .main-slider__image-main {
    -webkit-animation: mvPhotoZoomSmooth 6s linear forwards !important;
    animation: mvPhotoZoomSmooth 6s linear forwards !important;
  }
}

@media screen and (max-width: 768px) and (prefers-reduced-motion: reduce) {

  .home .main-slider__slide.is-active .main-slider__image-main {
    -webkit-animation: mvPhotoZoomSmoothSP 6s linear forwards !important;
    animation: mvPhotoZoomSmoothSP 6s linear forwards !important;
  }
}

/* =========================================================
  TOP Main Copy - Final
  「北の風景づくり」

  採用デザイン：
  F：明朝系・太め・斜体・影濃いめ
========================================================= */

.home .main-visual h1 {
  margin: 0;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: clamp(
    36px,
    7vw,
    72px
  );

  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0;

  color: #fff;

  -webkit-text-stroke: 0;

  /* F：斜体 */
  transform: skewX(-10deg);
  transform-origin: left center;

  /* F：影濃いめ */
  text-shadow:
    2px 3px 3px rgba(0, 0, 0, 0.58),
    4px 6px 8px rgba(0, 0, 0, 0.28);
}

/* タイトルのアニメーションは維持し、H1の影をそのまま引き継ぐ */
.mv-line {
  letter-spacing: 0;
  text-shadow: inherit;
}

/* スマートフォンでも同じFデザインを維持 */
@media screen and (max-width: 768px) {
  .home .main-visual h1 {
    font-size: clamp(
      22px,
      6.2vw,
      30px
    );

    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;

    transform: skewX(-10deg);
    transform-origin: left center;
  }
}

/* =========================================================
  TOP Main Copy Demo
  明朝系・太めを基準に形状・シャドウを比較
========================================================= */

/* 全6案 共通
--------------------------------------------------------- */

body.home.font-demo .main-visual h1 {
  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;

  font-weight: 700;
  letter-spacing: 0;
  font-style: normal;
}


/* =========================================================
  A：標準形・現在のシャドウ
========================================================= */

body.home.font-demo--a .main-visual h1 {
  transform: none;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.30),
    0 5px 14px rgba(0, 0, 0, 0.12);
}


/* =========================================================
  B：横110％・現在のシャドウ
========================================================= */

body.home.font-demo--b .main-visual h1 {
  transform: scaleX(1.10);
  transform-origin: left center;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.30),
    0 5px 14px rgba(0, 0, 0, 0.12);
}


/* =========================================================
  C：斜体・現在のシャドウ
========================================================= */

body.home.font-demo--c .main-visual h1 {
  transform: skewX(-10deg);
  transform-origin: left center;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.30),
    0 5px 14px rgba(0, 0, 0, 0.12);
}


/* =========================================================
  D：標準形・シャドウ強め
  お送りいただいたイメージに近い方向
========================================================= */

body.home.font-demo--d .main-visual h1 {
  transform: none;

  text-shadow:
    2px 3px 3px rgba(0, 0, 0, 0.58),
    4px 6px 8px rgba(0, 0, 0, 0.28);
}


/* =========================================================
  E：横110％・シャドウ強め
========================================================= */

body.home.font-demo--e .main-visual h1 {
  transform: scaleX(1.10);
  transform-origin: left center;

  text-shadow:
    2px 3px 3px rgba(0, 0, 0, 0.58),
    4px 6px 8px rgba(0, 0, 0, 0.28);
}


/* =========================================================
  F：斜体・シャドウ強め
========================================================= */

body.home.font-demo--f .main-visual h1 {
  transform: skewX(-10deg);
  transform-origin: left center;

  text-shadow:
    2px 3px 3px rgba(0, 0, 0, 0.58),
    4px 6px 8px rgba(0, 0, 0, 0.28);
}


/* =========================================================
  span側はh1のシャドウを引き継ぐ
========================================================= */

body.home.font-demo .mv-line {
  text-shadow: inherit;
}


/* =========================================================
  Demo Switch
========================================================= */

.font-demo-switch {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  width: min(500px, calc(100% - 32px));
  padding: 12px 14px;

  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(47, 93, 70, 0.22);

  box-shadow:
    0 5px 18px rgba(0, 0, 0, 0.14);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.font-demo-switch__title {
  margin: 0 0 8px;

  color: var(--color-main);

  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}

.font-demo-switch__buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.font-demo-switch__buttons a {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;
  padding: 6px 8px;

  border: 1px solid var(--color-main);

  background: #fff;
  color: var(--color-main);

  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;

  text-align: center;
  text-decoration: none;
}

.font-demo-switch__buttons a.is-active {
  background: var(--color-main);
  color: #fff;
}

@media (hover: hover) {
  .font-demo-switch__buttons a:hover {
    background: var(--color-main);
    color: #fff;
  }
}


/* =========================================================
  Smartphone
========================================================= */

@media screen and (max-width: 768px) {

  .font-demo-switch {
    right: 8px;
    bottom: 70px;

    width: calc(100% - 16px);
    padding: 8px;
  }

  .font-demo-switch__title {
    margin-bottom: 6px;
    font-size: 10.5px;
  }

  .font-demo-switch__buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .font-demo-switch__buttons a {
    min-height: 38px;
    padding: 5px;

    font-size: 10px;
  }
}

/* =========================================================
  Demo Switch
========================================================= */

.font-demo-switch {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  width: min(500px, calc(100% - 32px));
  padding: 12px 14px;

  background: rgba(255, 255, 255, 0.95);

  border:
    1px solid rgba(47, 93, 70, 0.22);

  box-shadow:
    0 5px 18px rgba(0, 0, 0, 0.14);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


/* =========================================================
  Demo Switch Title
========================================================= */

.font-demo-switch__title {
  margin: 0 0 8px;

  color: var(--color-main);

  font-size: 12px;
  line-height: 1.5;
  font-weight: 700;
}


/* =========================================================
  Demo Switch Buttons
========================================================= */

.font-demo-switch__buttons {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 5px;
}


/* =========================================================

  Demo Switch Button
========================================================= */

.font-demo-switch__buttons a {
  display: flex;

  align-items: center;
  justify-content: center;

  min-height: 38px;

  padding:
    6px 8px;

  border:
    1px solid var(--color-main);

  background: #fff;
  color: var(--color-main);

  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;

  text-align: center;
  text-decoration: none;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}


/* =========================================================
  Demo Switch Button Active
========================================================= */

.font-demo-switch__buttons a.is-active {
  background: var(--color-main);
  color: #fff;
}


/* =========================================================
  Demo Switch Button Hover
========================================================= */

@media (hover: hover) {

  .font-demo-switch__buttons a:hover {
    background: var(--color-main);
    color: #fff;
  }
}


/* =========================================================
  Smartphone
========================================================= */

@media screen and (max-width: 768px) {

  .font-demo-switch {
    right: 8px;

    /*
      Safari等の下部UIと重なりにくいよう
      少し上へ配置
    */
    bottom: 70px;

    width: calc(100% - 16px);

    padding: 8px;
  }


  .font-demo-switch__title {
    margin-bottom: 6px;

    font-size: 10.5px;
  }


  .font-demo-switch__buttons {
    grid-template-columns:
      repeat(2, 1fr);

    gap: 4px;
  }


  .font-demo-switch__buttons a {
    min-height: 34px;

    padding:
      5px 5px;

    font-size: 10px;
  }
}