/**
 * スマホのトップ改修（2026-10 GG_ORDER-4886）
 * スマホ幅（46.8125em 以下）だけで表示する。PC には影響させない
 */
.c-mv-sp,
.c-fixbar {
  display: none;
}

@media screen and (max-width: 46.8125em) {
  /* 従来のメインビジュアル（背景＋見出し＋ボタン）はスマホでは使わず、スライドに置き換える */
  .c-main-visual .c-main-visual__image {
    background-image: none !important;
  }
  .c-main-visual .c-main-visual__image > .c-main-visual__inner {
    display: none;
  }

  .c-mv-sp {
    --mv-sp-shift: 92px; /* 見出しと写真の間に入れた申込ボタンの高さ分、写真を下げる */
    --mv-sp-pink: #ED407A;
    --mv-sp-purple: #6C2BDC;
    display: block;
    width: 100%;
    position: relative;
  }

  /* slick 初期化前は1枚目だけ表示 */
  .c-mv-sp__slider:not(.slick-initialized) .c-mv-sp__slide + .c-mv-sp__slide {
    display: none;
  }
  .c-mv-sp__slider .slick-track {
    display: flex;
  }
  .c-mv-sp__slider .slick-slide {
    height: auto;
  }
  .c-mv-sp__slider .slick-slide > div {
    height: 100%;
  }
  .c-mv-sp__slide {
    height: 100%;
  }

  /* 1枚目：従来のメインビジュアル＋合格前申込ボタン */
  .c-mv-sp__slide.is-main {
    /* 上に足した余白は写真の上端と同じ色の帯で埋める（写真の最上段の明るい1pxも隠す） */
    background-image: linear-gradient(to right, #fad6e0 0, #fad6e0 12.4%, #fbe2e8 12.4%, #fbe2e8 21.33%, #fdeef1 21.33%, #fdeef1 25.87%, #f7fbfe 25.87%, #f2f8f8 63%, #edf3f3 77%, #e5eff0 100%),
      url(../gk-tokai-html/dist/assets/images/img-mv-smp.jpg);
    background-size: 100% calc(var(--mv-sp-shift) + 2px), 100% auto;
    background-position: center top, center var(--mv-sp-shift);
    background-repeat: no-repeat;
  }
  .c-mv-sp__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.1428571429rem 10vw;
  }
  .c-mv-sp__logo {
    max-width: 260px;
    margin-bottom: 12px;
  }
  .c-mv-sp__logo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .c-mv-sp__apply {
    width: 100%;
    max-width: 343px;
    height: 80px;
    margin-bottom: 124px; /* 従来の見出し〜「ドーミーの特長」の間隔（写真が見える範囲） */
    text-align: center;
  }
  .c-mv-sp__apply-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 52px;
    border-radius: 999px;
    background-color: var(--mv-sp-pink);
    box-shadow: 0 3px 0 #c42a5e;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
  }
  .c-mv-sp__apply-button:after {
    content: "\e5cc";
    font-family: "Material Icons";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
  }
  .c-mv-sp__apply-note {
    margin: 6px 0 0;
    color: var(--mv-sp-pink);
    font-size: min(11px, 2.95vw); /* 320px幅でも1行に収める */
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
  }
  .c-mv-sp__button {
    width: 100%;
    max-width: 426px;
    padding-left: 4vw;
    padding-right: 4vw;
  }

  /* 幅が狭いと写真の頭が上がってくるので、写真とボタンを少し下げる */
  @media screen and (max-width: 374px) {
    .c-mv-sp {
      --mv-sp-shift: 112px;
    }
    .c-mv-sp__apply {
      margin-bottom: 144px;
    }
  }

  /* 2枚目・3枚目：スライド全体がリンク */
  .c-mv-sp__link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }
  .c-mv-sp__banner {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .c-mv-sp__more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 14px;
    padding: 10px 22px 10px 26px;
    border-radius: 999px;
    background: #fff;
    color: var(--mv-sp-purple);
    border: 2px solid var(--mv-sp-purple);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .c-mv-sp__more:after {
    content: "\e5cc";
    font-family: "Material Icons";
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
  }

  /* 2枚目：合格前申込 受付中 */
  .c-mv-sp__apply-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px 16px 36px;
    background-color: #fdeef3;
    text-align: center;
  }
  .c-mv-sp__apply-lead {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.04em;
  }
  .c-mv-sp__apply-title {
    margin-top: 8px;
    color: var(--mv-sp-pink);
    font-size: 36px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.06em;
  }
  .c-mv-sp__apply-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
  }
  .c-mv-sp__apply-tags span {
    padding: 5px 9px;
    border-radius: 6px;
    background-color: var(--mv-sp-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
  }
  .c-mv-sp__apply-photo {
    display: block;
    width: 100%;
    margin-top: 18px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 6;
  }
  .c-mv-sp__apply-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 3枚目：寮生インタビュー */
  .c-mv-sp__interview {
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
  }
  .c-mv-sp__interview:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(36, 12, 70, 0.78) 100%);
  }
  .c-mv-sp__interview-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0 46px 44px; /* 左右の矢印にタイトルがかからないよう空ける */
    color: #fff;
  }
  .c-mv-sp__interview-label {
    padding: 4px 10px;
    background-color: var(--mv-sp-purple);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
  .c-mv-sp__interview-title {
    margin-top: 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.02em;
  }

  /* 矢印・ドット */
  .c-mv-sp .slick-prev,
  .c-mv-sp .slick-next {
    z-index: 2;
    width: 32px;
    height: 32px;
    top: 64%; /* 1枚目の注記の文字にかからない高さ（写真の位置） */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  .c-mv-sp .slick-prev {
    left: 6px;
  }
  .c-mv-sp .slick-next {
    right: 6px;
  }
  .c-mv-sp .slick-prev:hover,
  .c-mv-sp .slick-prev:focus,
  .c-mv-sp .slick-next:hover,
  .c-mv-sp .slick-next:focus {
    background: rgba(255, 255, 255, 0.85);
  }
  .c-mv-sp .slick-prev:before,
  .c-mv-sp .slick-next:before {
    font-family: "Material Icons";
    font-size: 24px;
    line-height: 32px;
    color: var(--mv-sp-purple);
    opacity: 1;
  }
  .c-mv-sp .slick-prev:before {
    content: "\e5cb";
  }
  .c-mv-sp .slick-next:before {
    content: "\e5cc";
  }
  .c-mv-sp .slick-dots {
    bottom: 10px;
    line-height: 0;
  }
  .c-mv-sp .slick-dots li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
  }
  .c-mv-sp .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #c9c9d6;
  }
  .c-mv-sp .slick-dots li button:before {
    display: none;
  }
  .c-mv-sp .slick-dots li.slick-active button {
    background: var(--mv-sp-pink);
    border-color: var(--mv-sp-pink);
  }

  /* 画面下の追従ボタン */
  .c-fixbar {
    display: flex;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    transform: translateY(110%);
    transition: transform 0.3s ease;
  }
  .c-fixbar.is-show {
    transform: translateY(0);
  }
  .c-fixbar__button {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: 999px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
  }
  .c-fixbar__button.is-catalog {
    background-color: var(--mv-sp-purple, #6C2BDC);
  }
  .c-fixbar__button.is-apply {
    background-color: var(--mv-sp-pink, #ED407A);
  }
}

/**
 * PC のトップ改修（2026-10-19 追加）
 * ① 見出しの下に「合格前申込」ボタン ／ ③ 2・3枚目を従来のメインビジュアルの上に重ねて切り替える
 * 1枚目は従来のメインビジュアル（.c-main-visual__inner）のまま。スマホ幅では出さない
 */
@media screen and (max-width: 46.8125em) {
  .c-mv-pc,
  .c-mv-pc-apply {
    display: none;
  }
}

@media screen and (min-width: 46.875em) {
  .c-mv-pc,
  .c-mv-pc-apply {
    --mv-pc-pink: #ED407A;
    --mv-pc-purple: #6C2BDC;
  }

  /* ① 申込ボタンが入る分、見出しを少し小さくし、間隔を詰めて従来の高さに収める */
  .c-main-visual .c-main-visual__image {
    gap: min(10vh, 90px);
  }
  .c-main-visual .c-main-visual__content {
    gap: 16px;
  }
  .c-main-visual .c-main-visual__logo {
    max-width: 360px;
  }
  .c-main-visual .c-main-visual__logo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .c-mv-pc-apply {
    width: 100%;
    padding-left: 4vw;
    padding-right: 4vw;
    text-align: center;
  }
  .c-mv-pc-apply__button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 56px;
    border-radius: 999px;
    background-color: var(--mv-pc-pink);
    box-shadow: 0 4px 0 #c42a5e;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .c-mv-pc-apply__button:hover {
    opacity: 0.85;
    color: #fff;
  }
  .c-mv-pc-apply__button:after {
    content: "\e5cc";
    font-family: "Material Icons";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0;
  }
  .c-mv-pc-apply__note {
    margin: 8px 0 0;
    color: var(--mv-pc-pink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.4;
    white-space: nowrap;
    /* 写真の上に重なっても読めるよう白でふちどる */
    text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
  }

  /* ③ 2・3枚目（メインビジュアルの上に重ねる。NEWS は上に残す） */
  .c-main-visual .c-main-visual__news {
    position: relative;
    z-index: 101;
  }
  .c-mv-pc {
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;
  }
  .c-mv-pc__slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  }
  .c-mv-pc__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.6s ease, visibility 0s linear 0s;
  }
  .c-mv-pc__slide.is-apply {
    background-color: #fdeef3;
  }
  .c-mv-pc__slide.is-interview {
    background-color: #f2edfb;
  }
  .c-mv-pc__link {
    display: block;
    height: 100%;
    color: #333;
    text-decoration: none;
  }
  .c-mv-pc__link:hover {
    color: #333;
  }
  .c-mv-pc__banner {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .c-mv-pc__photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    background-size: cover;
    background-position: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%);
    mask-image: linear-gradient(to right, transparent 0, #000 12%);
  }
  .is-interview .c-mv-pc__photo {
    width: 56%;
  }
  /* 文字は従来の見出しと同じ左位置に置き、下の NEWS にかからない高さに収める */
  .c-mv-pc__body {
    position: absolute;
    top: 0;
    bottom: 200px;
    left: max(16px, calc((100% - 1140px) / 2 + 16px));
    width: min(44%, 540px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
  .c-mv-pc__lead {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .c-mv-pc__title {
    margin-top: 10px;
    color: var(--mv-pc-pink);
    font-size: clamp(44px, 4.6vw, 68px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.06em;
  }
  .c-mv-pc__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
  }
  .c-mv-pc__tags span {
    padding: 6px 12px;
    border-radius: 6px;
    background-color: var(--mv-pc-pink);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
  }
  .c-mv-pc__label {
    padding: 5px 12px;
    background-color: var(--mv-pc-purple);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
  .c-mv-pc__interview-title {
    margin-top: 16px;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.02em;
  }
  .c-mv-pc__more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-top: 24px;
    padding: 12px 26px 12px 32px;
    border-radius: 999px;
    background: #fff;
    color: var(--mv-pc-purple);
    border: 2px solid var(--mv-pc-purple);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .c-mv-pc__link:hover .c-mv-pc__more {
    background: var(--mv-pc-purple);
    color: #fff;
  }
  .c-mv-pc__more:after {
    content: "\e5cc";
    font-family: "Material Icons";
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
  }

  /* 矢印・ドット（右下にまとめる。左は見出しと NEWS があるため） */
  .c-mv-pc__arrow,
  .c-mv-pc__dots {
    position: absolute;
    z-index: 102;
    bottom: 24px;
    pointer-events: auto;
  }
  .c-mv-pc__arrow {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    color: var(--mv-pc-purple);
    cursor: pointer;
  }
  .c-mv-pc__arrow:before {
    font-family: "Material Icons";
    font-size: 26px;
    line-height: 40px;
  }
  .c-mv-pc__arrow.is-prev {
    right: 140px;
  }
  .c-mv-pc__arrow.is-prev:before {
    content: "\e5cb";
  }
  .c-mv-pc__arrow.is-next {
    right: 24px;
  }
  .c-mv-pc__arrow.is-next:before {
    content: "\e5cc";
  }
  .c-mv-pc__dots {
    right: 72px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
  }
  .c-mv-pc__dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #c9c9d6;
    cursor: pointer;
  }
  .c-mv-pc__dot.is-active {
    background: var(--mv-pc-pink);
    border-color: var(--mv-pc-pink);
  }
}