@charset "UTF-8";
/* =========================================================
   三井アウトレットパーク 福岡マリノア ティザーLP
   - 中央カラム幅（参考サイトに合わせる）：981px〜 550px ／ 751〜980px 45vw ／ 〜750px 100%
     中身は rem 指定（1rem = デザイン上の10px）で、カラム幅 / 60 をルート文字サイズにして比率のまま拡縮
   - PC（1200px〜）：左右に固定サイド＋中央カラム
   - 〜1199px：中央カラムのみ（中央寄せ）＋ハンバーガー
   - 〜980px：中央カラム幅 45vw
   - 〜750px：中央カラムを画面幅いっぱいに
========================================================= */

:root {
  --blue: #0090e5;
  --black: #373737;
  --orange: #df6c12;
  --line: #d9d9d9;
  --light-blue: #dff3ff;
  --col: 550px;
  --side-l: calc((100vw - var(--col)) * 0.65618); /* 1440時 584px */
  --side-r: calc((100vw - var(--col)) * 0.34382); /* 1440時 306px */
  --ff-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --ff-en: "Inter", var(--ff-ja);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(550px / 60); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fbfbfb;
  color: var(--black);
  font-family: var(--ff-ja);
  font-weight: 700;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
small { font-size: inherit; }
button { font: inherit; }

/* ---------- 汎用 ---------- */
.crop { position: relative; overflow: hidden; }
.crop img { position: absolute; max-width: none; }

.sec-title { scroll-margin-top: 2rem; } /* メニューから飛んだ時、見出しが画面上部に来るように */
.sec-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  text-align: center;
  white-space: nowrap;
}
.sec-title__en {
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 6rem;
  line-height: 1.21;
  color: var(--blue);
}
.sec-title__ja {
  font-size: 2.6rem;
  line-height: 1.45;
  color: var(--black);
}

.btn {
  display: flex;
  align-items: center;
  gap: .975rem;
  width: fit-content;
  margin: 0 auto;
  padding: 1.393rem 3.621rem;
  border: .1393rem solid #181313;
  border-radius: 7rem;
  font-weight: 500;
  font-size: 2.507rem;
  line-height: 1.45;
  color: #000;
  white-space: nowrap;
  transition: opacity .3s;
}
.btn img { width: 2.885rem; height: 2.885rem; }
@media (hover: hover) {
  .btn:hover, .sns__box:hover { opacity: .7; }
  .map-tab__btn:not(.is-active):hover { opacity: .7; }
  .footer__links a:hover, .footer__logo-link:hover, .gnav a:hover { opacity: .7; }
}

/* =========================================================
   サイド（PC）
========================================================= */
.side {
  position: fixed;
  top: 83px;
  z-index: 0;
  height: max(800px, calc(100vh - 83px)); /* 画面が高い時は下端まで伸ばす */
  overflow: hidden;
}
.side__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.side--l { left: 0; width: calc(var(--side-l) + 25px); }
.side--l .side__img { object-position: 75% 50%; }
.side--r { right: 0; width: var(--side-r); }
.side--r .side__img { object-position: 78% 46%; }

.side__copy {
  position: absolute;
  top: 52px;
  left: clamp(24px, 5.28vw, 76px);
  width: calc(var(--side-l) - clamp(24px, 5.28vw, 76px) - 16px);
  color: var(--black);
  font-weight: 700;
}
.side__catch { font-size: clamp(22px, 2.13vw, 30.69px); line-height: 1.6; }
.side__lead { margin-top: 5.8px; font-size: clamp(13px, 1.15vw, 16.59px); line-height: 1.75; }

.side-logo { position: fixed; top: 16px; left: 19px; z-index: 1; width: 195px; }
.side-mitsui { position: fixed; top: 23px; right: 50px; z-index: 1; width: 155px; }

/* ---------- ナビ ---------- */
.gnav {
  position: fixed;
  top: 114px;
  left: calc(var(--side-l) + var(--col) + min(94px, var(--side-r) - 212px)); /* 1440時94px、狭い画面では右端に収まるよう詰める */
  z-index: 1;
}
.gnav ul { display: flex; flex-direction: column; gap: 15px; }
.gnav a {
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.21;
  color: var(--black);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .3s;
}
.menu-btn, .sp-header, .sp-catch { display: none; }

/* =========================================================
   中央カラム
========================================================= */
.main {
  position: relative;
  z-index: 2;
  width: var(--col);
  margin-left: calc((100% - var(--col)) * 0.65618);
  padding-bottom: 17.3rem; /* 追従バナー（高さ約15.3rem）に隠れないよう確保 */
  background: #fff;
  box-shadow: 4px 4px 50px rgba(0, 0, 0, .2);
  overflow: hidden;
}

/* ---------- MV ---------- */
.mv { position: relative; height: 118.8rem; color: #fff; }
.mv__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mv__title > span, .mv__open > span { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; }
.mv__ja-s { top: 4.8rem; font-size: 4.295rem; line-height: 1.52; }
.mv__ja-l { top: 9.625rem; font-size: 7.9rem; line-height: 1.537; }
.mv__date { top: 21.89rem; padding-left: .766rem; font-size: 7.658rem; font-weight: 400; line-height: 1; letter-spacing: .766rem; }
.mv__open-txt { top: 29.585rem; font-size: 17.438rem; font-weight: 400; line-height: .74; }

/* ---------- 波の装飾 ---------- */
.wave {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 14.51rem;
  overflow: hidden;
  pointer-events: none;
}
.wave img { position: absolute; top: 8.6%; left: -5.43%; width: 109.53%; height: 91.73%; max-width: none; }
.wave--news { top: 3.05rem; z-index: 1; opacity: .3; mix-blend-mode: multiply; }
.wave--about { top: 11rem; opacity: .65; }
.wave--gourmet { top: 5.24rem; opacity: .3; }
.wave--campaign { top: 5.06rem; opacity: .3; }
.wave--access { top: -10.25rem; opacity: .3; }
.wave--members { top: 6.33rem; opacity: .3; }
.news > *:not(.wave), .about > .sec-title, .gourmet > .sec-title, .campaign > .sec-title, .access > .sec-title, .members > .sec-title { position: relative; z-index: 1; }

/* ---------- NEWS ---------- */
.news { position: relative; padding-top: 12.11rem; }
.news__list { width: 52rem; margin: 2.4rem auto 0; }
.news__item { border-bottom: 1px solid var(--line); }
.news__item:first-child { border-top: 1px solid var(--line); }
.news__inner {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 2.006rem 0;
  font-weight: 400;
  color: var(--black);
  transition: opacity .3s;
}
.news__date { flex-shrink: 0; font-family: var(--ff-en); font-size: max(1.418rem, 10px); }
.news__txt { font-size: max(1.418rem, 12px); line-height: 1.68; }
.news__u { text-decoration: underline; text-underline-offset: .2em; }
.nb { display: inline-block; } /* 語句の途中で改行しない */
@media (hover: hover) { a.news__u { transition: opacity .3s; } a.news__u:hover { opacity: .7; } }
.news__new {
  flex-shrink: 0;
  margin-left: auto;
  padding: .6rem 1.5rem;
  border-radius: .5rem;
  background: var(--blue);
  font-family: var(--ff-en);
  font-size: max(1.1rem, 9px);
  line-height: 1.21;
  letter-spacing: .21em;
  color: #fff;
}

/* ---------- ABOUT ---------- */
.about { position: relative; padding-top: 11.06rem; }
.point { position: relative; }
.point--01 { margin-top: -1.76rem; padding-top: 10.2rem; }
.point--02 { margin-top: 4.8rem; padding-top: 7.7rem; }
.point--03 { margin-top: 3.93rem; padding-top: 10.1rem; }
.point--04 { margin-top: 5.89rem; padding-top: 10.1rem; }
.point__img { width: 60.1rem; height: 37.8rem; }
.point__txt { width: 51rem; margin: 1.6rem 0 0 4.2rem; font-size: 1.855rem; line-height: 1.91; color: var(--black); }
.point--01 .point__txt { margin-top: 2.51rem; }
.point--02 .point__txt { margin-top: 1.75rem; }
.point--03 .point__txt { margin-top: 3.38rem; }

/* スライダー（POINT 01） */
.slider { position: relative; }
.slider__track { display: flex; width: 60.1rem; overflow: hidden; touch-action: pan-y; }
.slider__item { flex-shrink: 0; transition: transform .6s ease; }
.slider__dots { display: flex; justify-content: center; gap: 2.945rem; margin-top: 1.93rem; }
.slider--02 .slider__dots { margin-top: 1.82rem; }
.slider--03 .slider__dots { margin-top: 2.57rem; }
.slider--04 .slider__dots { margin-top: 2.68rem; }
/* 画像下の注釈（後ろの要素の位置は変えない） */
.img-note { height: 2.5rem; margin: 0 0 -2.5rem 4.69rem; font-size: 1.309rem; line-height: 2.5rem; color: var(--black); }
.img-note--gourmet { margin: .16rem 0 -2.66rem 4.25rem; }
.slider__dots button {
  width: 1.636rem; height: 1.636rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #b9e2f9;
  cursor: pointer;
  transition: background .3s;
}
.slider__dots button.is-active { background: var(--blue); }

.point--04 .point__txt { margin-top: 3.49rem; font-size: 1.805rem; }

.point__labels {
  position: absolute;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}
.point__labels--r { right: 0; }
.point__labels--l { left: 0; }
.point__label {
  width: 6.7rem;
  height: var(--h);
  padding-top: 2.9rem;
  border: 1px solid var(--blue);
  background: #fff;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 3.6rem;
  line-height: calc(6.7rem - 2px);
  letter-spacing: .4rem;
  color: var(--blue);
  white-space: nowrap;
}
.point__label + .point__label { margin-right: -1px; padding-top: 3.2rem; }

.badge { position: absolute; z-index: 2; width: 14.671rem; height: 14.037rem; }
.badge__bg { position: absolute; left: 1.086rem; top: 1.018rem; width: 12.5rem; height: 12rem; }
.badge__ring { position: absolute; left: 2.825rem; top: 2.535rem; width: 8.996rem; height: 9.002rem; }
.badge span {
  position: absolute;
  top: 4.5rem; left: 0; right: 0;
  font-size: 3rem;
  line-height: 1.45;
  text-align: center;
  color: #fff;
}


/* ---------- GOURMET ---------- */
.gourmet { position: relative; padding-top: 13.31rem; }
.gourmet__img { width: 60.1rem; height: 37.8rem; margin-top: 2.4rem; }
.gourmet__catch { width: 51rem; margin: 3.1rem 0 0 4.4rem; font-size: 2.4rem; line-height: 1.68; color: #000; }
.gourmet__txt { width: 51rem; margin: .45rem 0 0 4.2rem; font-size: 1.805rem; line-height: 1.91; color: var(--black); }
.gourmet__kicker {
  position: relative;
  margin-top: 3.16rem;
  font-size: 2.727rem;
  line-height: 1.44;
  text-align: center;
  color: var(--black);
}
.gourmet__kicker::before, .gourmet__kicker::after {
  content: "";
  position: absolute;
  top: .27rem;
  width: 1.364rem;
  height: 3.873rem;
  background: url(../img/slash_s.svg) center / 100% 100% no-repeat;
}
.gourmet__kicker::before { left: 6.6rem; transform: scaleX(-1); }
.gourmet__kicker::after { right: 6.6rem; }
.gourmet .btn { margin-top: 1.42rem; }

/* ---------- CAMPAIGN ---------- */
.campaign { position: relative; padding-top: 15.31rem; color: var(--black); }
.campaign__kicker {
  position: relative;
  margin-top: 3.4rem;
  font-size: 3.009rem;
  line-height: 1.45;
  text-align: center;
}
.campaign__kicker::before, .campaign__kicker::after {
  content: "";
  position: absolute;
  top: .55rem;
  width: 3rem;
  height: 8.51rem;
  background: url(../img/slash_r.svg) center / 100% 100% no-repeat;
}
.campaign__kicker::before { left: 7.96rem; transform: scaleX(-1); }
.campaign__kicker::after { right: 8.29rem; }
.campaign__title { margin-top: 3.16rem; font-size: 3rem; line-height: 1.45; text-align: center; color: var(--orange); }
.campaign__intro { margin-top: 1.53rem; font-size: 1.964rem; line-height: 1.45; text-align: center; }
.campaign__visual { position: relative; height: 15.93rem; margin-top: 3.93rem; }
.campaign__card { position: absolute; top: 0; left: 4.91rem; width: 24.22rem; height: 15.27rem; }
.campaign__free { position: absolute; top: 0; left: 30.87rem; width: 24.98rem; height: 15.93rem; }
.campaign__mark { position: absolute; top: 0; left: 52.69rem; font-size: 1.527rem; line-height: 1.45; }
.campaign__note { width: 50.55rem; margin: .98rem 0 0 4.44rem; font-size: 1.527rem; line-height: 1.45; }
.campaign__note + .cp-box { margin-top: 2.95rem; }
.cp-box, .cp-term {
  width: 51.2rem;
  margin: 2.2rem 0 0 4.5rem;
  border: 2px solid var(--blue);
  text-align: center;
}
.cp-box { height: 23.6rem; }
.cp-box__head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(7.8rem - 2px);
  background: var(--light-blue);
  font-size: 2.4rem;
  line-height: 1.45;
  color: var(--blue);
}
.cp-box__head--l { font-size: 3rem; }
.cp-box__body { color: var(--orange); }
.cp-box__body--01 { padding-top: 1.7rem; font-size: 5rem; line-height: 1.1; }
.cp-box__body--02 { padding-top: 2.1rem; font-size: 4rem; line-height: 1.29; }
.cp-box__body .is-blue { color: var(--blue); }
.cp-box__body .is-big { font-size: 5rem; }
.campaign__plus { position: relative; width: 8.2rem; height: 8.2rem; margin: 1.1rem auto 0; border-radius: 50%; background: var(--blue); }
.campaign__plus::before, .campaign__plus::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 2.9rem; height: .778rem;
  background: #fff;
  transform: translate(-50%, -50%);
}
.campaign__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.campaign__plus + .cp-box { margin-top: 2.2rem; }
.cp-term { height: 17.89rem; }
.cp-term__head {
  display: flex; align-items: center; justify-content: center;
  height: calc(6.44rem - 2px);
  font-size: 2.4rem; line-height: 1.45; color: var(--blue);
}
.cp-term__body {
  height: 11.45rem;
  padding-top: 1.53rem;
  background: var(--blue);
  color: #fff;
}
.cp-term__date { font-size: 2.4rem; line-height: 1.45; }
.cp-term__note { margin-top: .1rem; font-size: 1.745rem; line-height: 1.23; }
.campaign .btn { margin-top: 3.6rem; }

/* ---------- RECRUIT ---------- */
.recruit { position: relative; padding-bottom: 30.98rem; color: var(--black); }
.recruit__bg { position: absolute; inset: 0; }
.recruit__bg::before {
  content: "";
  position: absolute;
  top: 114.76rem; bottom: 35.88rem; left: 0; /* 下端基準：本文が増えても背景が伸びる */
  width: 100%;
  background: #c6e9ff;
}
.recruit__wave { position: absolute; left: -25.96rem; width: 112.04rem; height: 118.05rem; max-width: none; }
.recruit__wave--01 { top: 18rem; }
.recruit__wave--02 { bottom: 9.79rem; } /* 下の波はセクション下端基準 */
.recruit__photo { position: absolute; z-index: 1; border-radius: 50%; overflow: hidden; }
.recruit__photo img { width: 100%; height: 100%; max-width: none; }
.recruit__photo--01 { top: 8.73rem; left: 9.49rem; width: 26.29rem; height: 26.29rem; }
.recruit__photo--02 { top: 18rem; left: 40.91rem; width: 17.02rem; height: 17.02rem; }
.recruit__photo--03 { top: 29.67rem; left: -1.96rem; width: 12.22rem; height: 12.22rem; }
.recruit__photo--03 img { position: absolute; top: -.13rem; left: -6.22rem; width: 20.31rem; height: 13.55rem; }
.recruit__inner { position: relative; z-index: 2; padding-top: 39.82rem; }
.recruit__title { margin-top: 2.21rem; font-size: 4.012rem; line-height: 1.1; text-align: center; color: var(--orange); }
.recruit__lead { margin-top: 1.1rem; font-size: 2.006rem; line-height: 1.74; text-align: center; }

.benefit--01 { margin-top: 4.71rem; }
.benefit--02 { margin-top: 7.15rem; }
.benefit__balloon {
  width: 23.5rem;
  height: 10.6rem;
  margin: 0 auto;
  padding-top: 1.8rem;
  position: relative;
  font-size: 2.6rem;
  line-height: 2.07;
  text-align: center;
}
.benefit__balloon span { position: relative; }
.benefit__balloon-frame {
  position: absolute;
  top: -.2rem; left: -.2rem;
  width: 23.9rem;
  height: 11rem;
  overflow: visible;
}
.benefit__balloon-frame path {
  fill: #fff;
  stroke: #373737;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.benefit__title {
  margin-top: 2.4rem;
  font-size: 4rem;
  line-height: 1.1;
  text-align: center;
  color: var(--orange);
}
.benefit__lead { margin-top: 1.1rem; font-size: 2rem; line-height: 2.07; text-align: center; }
.benefit--02 .benefit__lead { line-height: 1.81; }
.benefit__lead::after {
  content: "";
  display: block;
  width: 51.3rem;
  margin: 2.3rem 0 0 4.5rem;
  border-top: 1px solid #000;
}
.benefit--02 .benefit__lead::after { margin-top: 2.4rem; }
.benefit__list { width: 50.4rem; margin: 2.3rem 0 0 4.4rem; font-size: 3rem; line-height: 1.41; color: var(--orange); }
.benefit--02 .benefit__list { display: flex; flex-direction: column; gap: 1.1rem; }
.benefit__list small { font-size: 1.6rem; }
.benefit__etc { margin: .6rem 0 0 8rem; font-size: 2rem; line-height: 1.41; color: var(--orange); }
.benefit--02 .benefit__etc { margin: 1.1rem 0 0 7.53rem; }
.benefit__note { margin: 1.1rem 0 0 4.2rem; font-weight: 400; font-size: 1.6rem; line-height: 1.6; }

/* 合同求人フェア */
.fair { margin-top: 5.56rem; }
.fair__title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50.4rem;
  height: 6.33rem;
  margin-left: 4.58rem;
  background: var(--blue);
  font-size: 4.012rem;
  line-height: 1.1;
  color: #fff;
}
.fair__lead { margin-top: 1.96rem; font-size: 2.006rem; line-height: 1.81; text-align: center; }
.fair__venue { margin: .98rem 0 0 4.58rem; font-size: 2.968rem; line-height: 1.55; white-space: nowrap; }
.fair__last { margin-left: 4.54rem; font-size: 1.745rem; line-height: 1.81; }
.fair__table { width: 50.5rem; margin: 1.75rem 0 0 4.47rem; }
.fair__row { display: flex; height: 8.18rem; }
.fair__row + .fair__row { border-top: 1px solid var(--line); }
.fair__no {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 13.31rem;
  padding-left: 2.62rem;
  background: var(--blue);
  font-size: 3.273rem;
  line-height: 1.81;
  color: #fff;
}
.fair__detail { display: flex; align-items: center; flex: 1; padding-left: 2.95rem; background: #fff; white-space: nowrap; }
.fair__date { font-size: 3.273rem; line-height: 1.81; }
.fair__note { margin-top: 1.96rem; font-size: 1.745rem; line-height: 1.81; text-align: center; }
.fair .btn { margin-top: 2.51rem; }
.fair__note--s { margin-top: 2.54rem; }

/* ---------- ACCESS ---------- */
.access { position: relative; color: var(--black); }
.access__list { margin-top: 4.01rem; }
.access__row { position: relative; min-height: 6.3rem; padding-left: 11.5rem; }
.access__row + .access__row { margin-top: 1.21rem; }
.access__row img { position: absolute; top: .8rem; left: 3.93rem; width: 6.32rem; height: 6.32rem; }
.access__row dt { font-size: 2.4rem; line-height: 1.68; }
.access__row dd { font-weight: 500; font-size: 1.964rem; line-height: 1.68; }
.access__bus {
  width: 52.47rem;
  margin: 2.44rem 0 0 3.93rem;
  padding: 1.64rem 2.29rem 1.6rem;
  border: 1px solid var(--line);
  font-weight: 500;
  font-size: 1.636rem;
  line-height: 1.68;
}
.map-tab { width: 52.47rem; margin: 3.27rem 0 0 3.93rem; }
.map-tab__btns { display: flex; align-items: flex-end; gap: .55rem; padding-left: 4.47rem; }
.map-tab__btn {
  width: 22.36rem;
  height: 4.36rem;
  padding: 0;
  border: 0;
  border-radius: .545rem .545rem 0 0;
  background: #b1e1ff;
  font-family: var(--ff-ja);
  font-weight: 700;
  font-size: 1.745rem;
  line-height: 1.68;
  color: #000;
  cursor: pointer;
  transition: background .3s, color .3s, height .3s;
}
.map-tab__btn.is-active { height: 5.78rem; background: var(--blue); color: #fff; }
.map-tab__panel { display: none; height: 32.95rem; }
.map-tab__panel.is-active { display: block; }
.map-tab__panel img { width: 100%; height: 100%; object-fit: cover; }
.access__address { margin-top: 1.42rem; font-weight: 500; font-size: 1.855rem; line-height: 1.68; text-align: center; }

/* ---------- MEMBERS ---------- */
.members { position: relative; padding-top: 9.82rem; color: #000; }

.sns__block--insta { margin-top: 3.07rem; }
.sns__block--line, .sns__block--members { margin-top: 4.48rem; }
.sns__head {
  position: relative;
  padding-left: var(--shift, 0); /* テキストの中心をデザインに合わせてずらす */
  font-size: 2.608rem;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}
.sns__head--s { font-size: 2.407rem; }
.sns__head::before, .sns__head::after {
  content: "";
  position: absolute;
  top: .9rem;
  width: 2.6rem;
  height: 6.25rem;
  background: url(../img/slash_r.svg) center / 100% 100% no-repeat;
}
.sns__head::before { left: var(--sl); transform: scaleX(-1); }
.sns__head::after { right: var(--sr); }
.sns__desc { width: 51.45rem; margin: 1.64rem auto 0; font-size: 1.636rem; line-height: 1.68; text-align: center; color: var(--black); }
.sns__block--members .sns__desc { margin-top: 1.85rem; }
.sns__block--insta .sns__box { margin-top: 1.64rem; }
.sns__block--line .sns__box { margin-top: 1.53rem; }
.sns__block--members .sns__box { margin-top: 1.64rem; }

.sns__box {
  position: relative;
  display: block;
  width: 52.58rem;
  height: 14.95rem;
  margin: 1.64rem 0 0 3.82rem;
  border: .401rem solid var(--blue);
  border-radius: .5rem;
  transition: opacity .3s;
}
.sns__box--members { width: 52.56rem; height: 12.24rem; }
.sns__icon { position: absolute; max-width: none; }
.sns__icon--insta { left: 1.89rem; top: 4.07rem; width: 6.11rem; height: 6.11rem; }
.sns__icon--line { left: 1.45rem; top: 3.31rem; width: 7.82rem; height: 7.72rem; }
.sns__icon--members { left: 1.44rem; top: 1rem; width: 8.84rem; height: 9.41rem; }
.sns__name {
  position: absolute;
  top: 2.22rem; left: 0; right: 0;
  padding-left: 3.82rem;
  text-align: center;
  white-space: nowrap;
}
.sns__block--line .sns__name { top: 2.12rem; }
.sns__name > span { display: block; font-size: 2.041rem; line-height: 1.45; }
.sns__name > .sns__name-l { font-size: 2.608rem; }
.sns__name > .sns__id { margin-top: .79rem; font-size: 1.527rem; }
.sns__block--line .sns__name > .sns__id { margin-top: .67rem; }
.sns__members {
  position: absolute;
  top: 3.51rem; left: 0; right: 0;
  padding-left: 2.73rem;
  font-size: 2.625rem;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
}
.sns__arrow { position: absolute; left: 47.38rem; top: 5.82rem; width: 2.894rem; height: 2.894rem; }
.sns__block--line .sns__arrow { top: 5.49rem; }
.sns__box--members .sns__arrow { top: 4.01rem; }

/* ---------- FOOTER ---------- */
.footer { width: 52.4rem; margin: 4.34rem 0 0 4rem; color: #000; }
.footer__links {
  padding: 2rem 0 5.28rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 1.855rem;
  line-height: 2.39;
}
.footer__links a { transition: opacity .3s; }
.footer__bottom { margin-top: 3.7rem; }
.footer__logo-link { display: block; width: fit-content; transition: opacity .3s; }
.footer__bottom .footer__logo { width: 31.9rem; }
.footer__logo { width: 100%; aspect-ratio: 293 / 35; object-fit: cover; }
.footer__copy { margin-top: 1.5rem; font-weight: 400; font-size: max(1.2rem, 9px); line-height: 2.92; white-space: nowrap; }

/* =========================================================
   追従バナー（参考：okazaki pre_teather の .banner）
   - 初期は画面下に隠し、100pxスクロールでせり上がる
   - ×で閉じたら再表示しない
========================================================= */
.banner {
  position: fixed;
  bottom: -2px;
  left: calc((100% - var(--col)) * 0.65618);
  z-index: 5;
  width: var(--col);
  transform: translateY(105%);
  transition: transform .3s;
}
.banner.is-show { transform: translateY(0); }
.banner.is-closed { transform: translateY(105%); pointer-events: none; }
.banner__link { display: block; transition: opacity .3s; }
.banner__link img { width: 100%; height: auto; }
.banner__close {
  position: absolute;
  top: 0; right: 0;
  width: 5.5%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity .3s;
}
@media (hover: hover) {
  .banner__link:hover, .banner__close:hover { opacity: .7; }
}

/* =========================================================
   〜1199px：中央カラムのみ
========================================================= */
@media (max-width: 1199px) {
  /* 左右のイラストをカラムの両脇に表示（カラムの下に20px潜らせる） */
  .side { top: 0; height: 100vh; }
  .side--l, .side--r { width: calc((100% - var(--col)) / 2 + 20px); }
  .side__copy, .side-logo, .side-mitsui { display: none; }

  /* SPデザイン（幅375）基準：1rem = 375/60 = 6.25px */
  html { scroll-padding-top: 10.08rem; }
  .sec-title { scroll-margin-top: 0; } /* スマホはヘッダー直下に見出しをぴったり合わせる */
  .main { margin: 10.08rem auto 0; }
  .banner { left: 0; right: 0; margin: 0 auto; }

  /* キャッチコピー（SPデザイン：MV直下 / 左20px / 青） */
  .sp-catch { display: block; padding: 2.8rem 0 0 3.2rem; color: var(--blue); white-space: nowrap; }
  .sp-catch__main { font-size: 4.127rem; line-height: 1.6; }
  .sp-catch__lead { margin-top: .78rem; font-size: 2.56rem; line-height: 1.525; }
  .news { padding-top: 13.95rem; }
  .wave--news { top: 2.85rem; }

  /* ヘッダー（高さ63px@375） */
  .sp-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: block;
    height: 10.08rem;
    background: #fbfbfb;
  }
  .sp-header__logo { position: absolute; top: 1.76rem; left: 2.4rem; width: 21.28rem; }
  .sp-header__mitsui { position: absolute; top: 2.88rem; left: 26.55rem; width: 18.89rem; }
  .sp-header img { width: 100%; height: auto; }

  /* ハンバーガー（21×14の三本線 → ×） */
  .menu-btn {
    position: fixed;
    top: 1.6rem; right: 1.68rem;
    z-index: 21;
    display: block;
    width: 6.4rem; height: 6.4rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .menu-btn span {
    position: absolute;
    top: 50%; left: 50%;
    width: 3.36rem; height: .32rem;
    margin: -.16rem 0 0 -1.68rem;
    background: #000;
    transition: transform .3s, opacity .3s;
  }
  .menu-btn span:nth-child(1) { transform: translateY(-1.12rem); }
  .menu-btn span:nth-child(3) { transform: translateY(1.12rem); }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

  /* メニュー（右から出る青パネル 幅191px@375） */
  .gnav {
    top: 10.08rem; left: auto; right: 0; bottom: 0;
    z-index: 15;
    width: 30.56rem;
    padding: 8.32rem 0 0 5.12rem;
    background: var(--blue);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s, visibility .3s;
  }
  .gnav.is-open { transform: translateX(0); visibility: visible; }
  .gnav ul { gap: 3.84rem; }
  .gnav a { font-size: 2.88rem; color: #fff; text-underline-offset: .3em; }
}

/* =========================================================
   〜980px：中央カラム幅 45vw
========================================================= */
@media (max-width: 980px) {
  :root { --col: 45vw; }
  html { font-size: calc(45vw / 60); }
}

/* =========================================================
   〜750px：中央カラムを画面幅いっぱいに
========================================================= */
@media (max-width: 750px) {
  :root { --col: 100%; }
  html { font-size: calc(100vw / 60); }

  /* 本文はスマホでは15px固定（読みやすさ優先） */
  .news__txt,
  .point__txt,
  .point--04 .point__txt,
  .gourmet__txt,
  .campaign__intro,
  .recruit__lead,
  .benefit__lead,
  .fair__lead,
  .fair__note,
  .access__bus,
  .sns__desc { font-size: 15px; }
  /* NEWS：本文が大きくなる分、日付とNEW!を1行目、本文を2行目に */
  .news__inner { flex-wrap: wrap; row-gap: .6rem; }
  .news__date { order: 1; }
  .news__new { order: 2; }
  .news__txt { order: 3; width: 100%; }
  .pc-br { display: none; } /* PC用の途中改行はスマホでは自然な折り返しにする */
  .campaign__intro { padding: 0 3.2rem; }
  .campaign__note { font-size: 11px; }
  .img-note { font-size: 10px; }
  .campaign__intro span { display: inline-block; }
  /* RECRUIT：中央揃えの文章が画面端に付かないよう左右10px空ける */
  .recruit__lead, .benefit__lead, .fair__lead, .fair__note { padding: 0 10px; }
  .benefit__lead::after { margin-left: calc(4.5rem - 10px); } /* 語句の途中で改行しない */
  .main { box-shadow: none; }
}