@use '../global' as *;

// ------------------------------------------------------------------
// SPのFVはデザイン（Figma 412×892）準拠。412px幅を100vwとして換算。
//   写真の帯 : 高さ434 → 105.34vw で固定
//   コピー   : 左49（11.89vw）/ 帯の上端から61（14.81vw）
//   パネル   : 左23（5.58vw）幅366（88.83vw）/ 帯の下端に45（10.92vw）重ねる
// パネルは帯からはみ出して白地に乗るので、写真は帯だけに閉じ込める。
// ------------------------------------------------------------------
$sp-mv-band: 105.34vw;
$sp-mv-lap: 10.92vw;

.top_mv {
  height: fz(954);

  height: 100vh;

  // PCも運航状況パネルをMVの下（通常フロー）に置くため、MV自体は高さ可変にする
  @include mq-up(sm) {
    height: auto;
  }
  // SPは運航状況パネルを通常フローで下に置くため、高さを可変にする
  @include mq-down(sm) {
    height: auto;
    min-height: 0;

    // 薄い黒は写真の帯だけに乗せる（白文字の可読性確保）
    &::before {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: $sp-mv-band;
      background-color: rgba(0, 0, 0, 0.15);
      pointer-events: none;
      z-index: 1;
    }
  }

  &__slides {
    // PCは写真を1画面分に閉じ込める（下に置くパネルの背面に回らせない）
    @include mq-up(sm) {
      position: absolute;
      inset: 0 0 auto;
      width: 100%;
      height: 100vh;
      z-index: 0;
      overflow: hidden;
    }

    // 写真をMV全体ではなく帯の高さに固定する（パネル背面に回らせない）
    @include mq-down(sm) {
      position: absolute;
      inset: 0 0 auto;
      width: 100%;
      height: $sp-mv-band;
      z-index: 0;
      overflow: hidden;
    }
  }

  &__inner {
    height: 100%;

    padding-left: 45%;
    padding-right: 12%;
    @include mq-down(xl) {
      padding-left: 38%;
      padding-right: 8%;
    }

    @include mq-down(lg) {
      padding: 0 8%;
    }

    // .top_mv が height:auto になった分、コピーの領域はここで1画面分を確保する
    @include mq-up(sm) {
      height: 100vh;
      display: grid;
      place-content: center;
    }

    // 下余白はパネル側（&__status）に移したのでここでは持たない
    @include mq-down(sm) {
      padding: 0;
      height: auto;
      min-height: $sp-mv-band;
      display: flex;
      flex-flow: column;
      z-index: 2; // オーバーレイより前面
    }
  }

  &__info {
    //padding-top: fz(50);
    color: #fff;
    //padding-left: 50%;

    @include mq-up(sm) {
      //writing-mode: vertical-rl;
      //display: flex;
      //align-items: flex-start;
      //flex-flow: column;
      //justify-content: flex-start;
      //width: 50%;
    }

    // 帯と同じ高さを確保して、続くパネルが帯の下端から始まるようにする
    @include mq-down(sm) {
      text-align: left;
      height: auto;
      flex: 0 0 auto;
      min-height: $sp-mv-band;
      display: grid;
      place-content: start;
      // 右は行の折り返し余地を残す（左インデントはデザイン値を維持）
      padding: 14.81vw 3vw 0 11.89vw;
    }
  }

  &__ttl {
    font-weight: 900;
    font-size: fz(90);
    width: 100%;
    line-height: 1.3;
    //text-box-trim: trim-both;
    text-box-edge: cap alphabetic;

    @include mq-up(sm) {
      letter-spacing: -0.06em;
      //white-space: nowrap;
      //word-break: break-all;
    }

    // 網走のコピーは9文字（流氷の、その先へ。）で、42だと2行に折れる。
    // 1行に収まる上限まで下げる（知床は文字数が少ないのでカラバリ側で42に戻す）
    @include mq-down(sm) {
      font-size: fz(36);
      line-height: 1.17;
      margin-bottom: fz(18);
    }
  }

  &__read {
    font-size: fz(20);
    line-height: 1.6;

    @include mq-up(sm) {
      margin-top: fz(12);
      //letter-spacing: 0.15em;
    }

    @include mq-down(sm) {
      line-height: 1.45;
      font-size: fz(19);
    }
  }

  &__status {
    position: absolute !important;
    bottom: fz(30);
    left: fz(30);
    width: fz(392);
    z-index: 10;

    width: max-content;
    // ハンバーガーの「本日の運航状況」からアンカー着地したとき、
    // sticky ヘッダーがパネルの上端を隠さないようにする
    scroll-margin-top: fz(110);

    // MVに重ねず、その下に置く（備考が長い日にMV内へ収めると窮屈になるため）
    // 幅は .l-inner に合わせた100%。ワイドモニタで間延びしないよう max幅で頭打ちにする
    @include mq-up(sm) {
      position: relative !important;
      width: percent(1508, 1920); // .l-inner と同じ
      max-width: rem(1508); // 1920px時の .l-inner 幅で頭打ち
      min-width: 0;
      // 直下の .top_oshirase は背景色（#f6f6f6）を持つので、下も空けないと
      // パネルがグレーの帯に接してしまう。上下とも .top_oshirase の padding-top と
      // 同じ fz(70) にして、白地の余白で挟む
      margin: fz(70) auto;
      left: auto;
      bottom: auto;

      // .l-inner のタブレット時と同じ
      @include mq-down(lg) {
        width: 90%;
      }
    }

    // SPは通常フローに戻し、写真の帯の下端に重ねてから白地へはみ出させる
    // （relative にしておかないと閉じるボタンの基準がズレる）
    @include mq-down(sm) {
      position: relative !important;
      width: 88.83vw;
      left: auto;
      bottom: auto;
      transform: none;
      margin: (-$sp-mv-lap) 0 fz(40) 5.58vw;
      scroll-margin-top: fz(80);
    }
  }
}

.operation-status-box {
  position: relative;

  &__close {
    position: absolute;
    width: fz(44);
    top: fz(-17);
    right: fz(-17);
    cursor: pointer;

    @include mq-down(sm) {
      top: fz(-17);
      right: fz(-13);
    }
  }

  &__head {
    background-color: $key_blue;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: fz(8) fz(8) 0 0;
    padding: fz(9) fz(8);

    &-icon {
      width: fz(26);
      margin-right: fz(4);
    }

    &-ttl {
      color: #fff;
      font-size: fz(18);
    }
  }

  &__switch {
    display: flex;
    background-color: #e7eef8;

    &-item {
      width: 50%;
      height: fz(71);
      text-align: center;
      display: flex;
      flex-flow: column;
      justify-content: center;
      text-align: center;
      color: #4370aa;
      background-color: #e7eef8;
      cursor: pointer;
      border-radius: 0 fz(8) 0 0;
      padding: 0 0.5em;

      &.is-active {
        background-color: #fff;
        color: $key_blue;
      }

      &:nth-of-type(1) {
        box-shadow: 0 0 fz(6) rgba($color: #000000, $alpha: 0.15);
      }
    }

    &-ttl {
      font-size: fz(18);
      line-height: 1.2;
    }

    &-read {
      font-weight: 600;
      font-size: fz(12);
      line-height: 1.375;
    }
  }

  &__main {
    border-radius: 0 0 fz(8) fz(8);
    padding: fz(11) fz(9);
    background-color: #fff;
    display: none;

    @include mq-down(sm) {
      box-shadow: 0 fz(3) fz(5) rgba($color: #000000, $alpha: 0.15);
      height: 10em;
      overflow: scroll;
    }

    &.is-show {
      display: block;
    }
  }

  &__post {
    display: flex;
    align-items: flex-start;
    padding: fz(12) fz(10);

    &:not(:last-of-type) {
      border-bottom: 2px dotted #cbcbcb;
    }

    &:nth-child(n + 4) {
      @include mq-down(sm) {
        //display: none;
      }
    }

    &-side {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      margin-right: fz(11);
    }

    &-head {
      width: 4em;
      text-align: center;
      margin-right: fz(14);
      font-weight: 600;
      line-height: 1.2;
      font-size: fz(13);
      width: 5em;
    }

    &-status {
      //width: fz(44);
      font-size: fz(13);
      text-align: center;
      color: #fff;
      background-color: red;
      border-radius: fz(5);

      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      line-height: 1.2;
      padding: fz(5);
    }

    &-desc {
      flex: 1 1 auto;
      font-size: fz(15);
      line-height: 1.375;
    }

    &.--red {
      .operation-status-box__post-status {
        background-color: #e80707;
      }

      .operation-status-box__post-desc {
        color: #e80707;
      }
    }

    &.--green {
      .operation-status-box__post-status {
        background-color: $key_sky_green;
      }

      .operation-status-box__post-desc {
        color: $key_sky_green;
      }
    }
  }

  // ------------------------------------------------------------------
  // 詳細テーブル表示（--detail）
  // システム側が style.css へ直接書き込んだ分を SCSS に取り込んだもの。
  // 航路 / 出航時刻 / 所要時間 / 運航状況 / 備考 の5カラムグリッド。
  // SPは table-head を隠し、data-label を各セルの見出しに使って縦積みにする。
  // ------------------------------------------------------------------
  &--detail {
    .operation-status-box__switch-item {
      height: fz(58);
    }

    .operation-status-box__main {
      padding: fz(8);
    }

    .operation-status-box__table {
      overflow: hidden;
      border: 1px solid #d5dde5;
      border-radius: fz(4);
    }

    .operation-status-box__table-head,
    .operation-status-box__post {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) fz(66) fz(82) fz(94) minmax(0, 1.5fr);
      column-gap: fz(8);
    }

    .operation-status-box__table-head {
      align-items: center;
      padding: fz(6) fz(8);
      border-bottom: 1px solid #d5dde5;
      color: #455b75;
      background-color: #f2f6fb;
      font-size: fz(11);
      font-weight: 600;
      text-align: center;
    }

    .operation-status-box__post {
      align-items: center;
      padding: fz(10) fz(8);
    }

    .operation-status-box__cell {
      min-width: 0;
      font-size: fz(12);
      line-height: 1.45;
      overflow-wrap: anywhere;

      &.--departure,
      &.--duration {
        text-align: center;
        white-space: nowrap;
      }

      &.--status {
        display: flex;
        justify-content: center;
      }
    }

    .operation-status-box__post-status {
      width: 100%;
      min-height: fz(28);
      padding: fz(4) fz(5);
      font-size: fz(11);
      white-space: normal;
    }

    .operation-status-box__cell.--notes.is-empty .operation-status-box__cell-value {
      display: block;
      width: 100%;
      text-align: center;
    }

    .operation-status-box__empty {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: fz(58);
      padding: fz(12) fz(10);
      color: #596875;
      font-size: fz(13);
      text-align: center;
    }

    .operation-status-box__post.--yellow .operation-status-box__post-status {
      background-color: #c58a00;
    }

    .operation-status-box__post.--gray .operation-status-box__post-status {
      background-color: #75817c;
    }

    @include mq-down(sm) {
      .operation-status-box__switch-item {
        height: auto;
      }

      .operation-status-box__main {
        max-height: fz(384);
        padding: fz(8) fz(10);
      }

      .operation-status-box__table-head {
        display: none;
      }

      .operation-status-box__post {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: fz(3);
        padding: fz(10) fz(4);
      }

      .operation-status-box__cell {
        display: grid;
        grid-template-columns: fz(78) minmax(0, 1fr);
        column-gap: fz(8);
        align-items: start;
        font-size: fz(12);
        text-align: left;
        white-space: normal;

        &::before {
          content: attr(data-label);
          color: #455b75;
          font-size: fz(11);
          font-weight: 600;
        }

        &.--departure,
        &.--duration {
          text-align: left;
          white-space: normal;
        }

        &.--status {
          display: grid;
          justify-content: stretch;
        }
      }

      .operation-status-box__post-status {
        width: fit-content;
        min-height: 0;
        padding: fz(4) fz(8);
      }

      .operation-status-box__cell.--notes.is-empty .operation-status-box__cell-value {
        text-align: left;
      }
    }
  }

  // ------------------------------------------------------------------
  // タブ切り替えの廃止（PC=2列 / SP・タブレット=縦積み）
  // DOM は変えず、ul を display:contents で透過させて li を直接グリッドに乗せる。
  // 色はカラバリ側（shiretoko/assets/scss/project/_p-top.scss）で上書きする。
  // ------------------------------------------------------------------

  // PC（1025px以上）は大型船・小型船を2列で並べる
  @include mq-up(lg) {
    display: grid;
    grid-template-columns: 1fr 1fr;

    .operation-status-box__head {
      grid-column: 1 / -1;
    }

    .operation-status-box__switch {
      display: contents;
    }

    .operation-status-box__switch-item {
      width: auto;
      border-radius: 0;
      background-color: #fff;
      color: $key_blue;
      // 常時表示なので選択操作は存在しない。
      // cursor・hover・クリックをまとめて無効化し、is-active / is-show のズレも防ぐ
      pointer-events: none;
      cursor: default;
      // 「選択中」の中央バーは出さず、両列とも列幅いっぱいの薄い下線で見出しを示す
      border-bottom: 2px solid rgba($key_blue, 0.25);

      &.is-active::after {
        display: none;
      }

      // 見出し行〜本文で1本の仕切り線になるよう、左列の右辺に線を引く
      &:first-of-type {
        border-right: 1px solid #e6e6e6;
      }
    }

    // .is-show に依存せず両方出す
    .operation-status-box__main {
      display: block;
      border-radius: 0 0 0 fz(8);
      border-right: 1px solid #e6e6e6;

      &:last-of-type {
        border-radius: 0 0 fz(8) 0;
        border-right: 0;
      }
    }
  }

  // SP（768px以下）は大型船→小型船の順に縦積みで両方出す
  // タブレット（769〜1024px）は従来どおりタブ切り替えのまま
  // order で「見出し→本文→見出し→本文」を作る（DOM順は 見出し2つ→本文2つ）
  @include mq-down(sm) {
    display: grid;
    grid-template-columns: 1fr;

    .operation-status-box__switch {
      display: contents;
    }

    .operation-status-box__switch-item {
      width: auto;
      height: auto;
      padding: fz(12) fz(10) fz(9);
      border-radius: 0;
      background-color: #fff;
      color: $key_blue;
      border-bottom: 2px solid rgba($key_blue, 0.25);
      pointer-events: none;
      cursor: default;

      &.is-active::after {
        display: none;
      }

      &:first-of-type {
        order: 1;
      }

      &:last-of-type {
        order: 3;
        border-top: 1px solid #e6e6e6;
      }
    }

    .operation-status-box__main {
      display: block;
      order: 2;
      border-radius: 0;
      box-shadow: none;
      // タブ時の固定高さ（height:10em）を解除しつつ、縦積みで倍近くなる分は
      // 船ごとの上限＋スクロールで抑え、直下セクションへの食い込みを防ぐ
      height: auto;
      max-height: 8em;
      overflow: auto;

      &:last-of-type {
        order: 4;
        border-radius: 0 0 fz(8) fz(8);
      }
    }
  }
}

.top_about {
  padding: fz(192) 0 fz(270);
  position: relative;
  overflow: hidden;

  @include mq-down(sm) {
    padding-bottom: fz(30);
  }

  &__thumb {
    position: absolute;

    &.--left01 {
      left: 0;
      top: fz(38);
      width: fz(536);

      left: -10%;

      @include mq-down(lg) {
        width: fz(330);
      }
    }

    &.--left02 {
      left: fz(32);
      bottom: fz(31);
      width: fz(583);

      left: -7%;

      @include mq-down(lg) {
        width: fz(360);
      }
    }

    &.--right01 {
      right: 0;
      top: fz(192);
      width: fz(463);
      z-index: 3;

      right: -10%;

      @include mq-down(lg) {
        width: fz(300);
      }

      @include mq-down(sm) {
        width: fz(365);
        height: fz(372);
        //bottom: fz(535);
        display: none;
      }

      img {
        @include mq-down(sm) {
          height: 100%;
          width: 100%;
          object-fit: cover;
          border-radius: fz(6) 0 0 fz(6);
        }
      }
    }
  }

  &__pc-chara {
    position: absolute;
    width: rem(30);
    left: rem(554);
    bottom: rem(0);
  }

  &__sp-deco {
    position: absolute;

    &.--deco01 {
      left: 0;
      top: fz(320);
      width: fz(70);
    }

    &.--deco02 {
      left: 0;
      top: fz(520);
      width: fz(30);
    }

    &.--deco03 {
      right: fz(23);
      top: fz(980);
      width: fz(22);
    }
  }

  &__box {
    width: fz(688);
    margin: auto;
    max-width: 80%;
  }

  &__ttl {
    margin-bottom: fz(35);
    text-align: left;
  }

  &__desc {
    p {
      font-size: fz(18);

      @include lh(18, 45);

      @include mq-down(sm) {
        font-size: fz(16);

        @include lh(14, 29);
      }

      &:not(:last-of-type) {
        margin-bottom: fz(25);
      }

      &.sp-mb {
        @include mq-down(sm) {
          //margin-bottom: fz(438);
        }
      }
    }
  }

  &__btn {
    margin-top: fz(65);
  }
}

.top_about__thumb-sp {
  @include mq-up(sm) {
    display: none;
  }
}

.top_oshirase {
  background-color: #f6f6f6;
  padding: fz(70) 0 fz(80);

  @include mq-down(sm) {
    padding: fz(50) 0 fz(60);
  }

  &__ttl {
    margin-bottom: fz(32);
    font-size: fz(52);
  }

  &__btns {
    display: flex;
    justify-content: center;
    gap: fz(20);
    margin-top: fz(40);

    @include mq-down(sm) {
      flex-direction: column;
      align-items: center;
      gap: fz(16);
      margin-top: rem(20);
    }
  }

  &__fb-icon {
    flex: 0 0 fz(26);
    width: fz(26);
  }
}

.cricle-arw {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fz(39);
  height: fz(39);
  border-radius: 50%;
  background-color: $key_sky_green;

  @include mq-down(sm) {
    width: fz(30);
    height: fz(30);
  }

  &__arw {
    fill: #fff;
    width: fz(7.7);
    height: fz(13);

    @include mq-down(sm) {
      width: fz(6.7);
      height: fz(12);
    }
  }
}

.top_guide {
  position: relative;
  background: #f6f6f6 url(../images/top/guide_bg.png) no-repeat 50% 50%;
  background-size: 2550px 100%;
  padding: fz(180) 0 fz(288);
  margin-top: fz(-55);

  @include mq-down(sm) {
    background-image: url(../images/top/guide_bg_sp.png);
    padding: fz(58) 0 fz(60);
    background-size: 768px 100%;
  }

  &__deco {
    position: absolute;

    &.--left01 {
      left: 0;
      bottom: fz(30);
      width: fz(278);

      @include mq-down(sm) {
        width: fz(60);
      }
    }

    &.--right01 {
      right: 0;
      top: fz(110);
      width: fz(100);

      @include mq-down(sm) {
        top: fz(70);
        width: fz(90);
      }
    }
  }

  &__illust {
    position: absolute;

    &.--illust01 {
      width: fz(30);
      top: fz(109);
      left: percent(148, 1920);

      @include mq-down(sm) {
        left: 2%;
        top: fz(25);
        width: fz(15);
      }
    }

    &.--illust02 {
      width: fz(15);
      top: fz(77);
      right: percent(417, 1920);

      @include mq-down(sm) {
        right: 0;
        top: fz(190);
        width: fz(11);
      }
    }

    &.--illust03 {
      width: fz(101);
      bottom: fz(127);
      right: percent(178, 1920);

      @include mq-down(sm) {
        display: none;
      }
    }
  }

  &__main {
    overflow: hidden;
    border-radius: fz(12);
    margin-bottom: fz(49);
    position: relative;
    z-index: 4;

    @include mq-down(sm) {
      margin-bottom: fz(24);
    }

    &-link {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      height: fz(543);
      color: #fff;
      position: relative;

      @include mq-down(sm) {
        height: fz(190);
        padding: fz(15) fz(29) fz(20);
      }
    }

    &-cont {
      @include mq-down(sm) {
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
      }
    }

    &-tag {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .tag-item {
        margin: 0 fz(8);
        font-size: fz(26);
        font-weight: 900;

        @include mq-down(sm) {
          font-size: fz(20);
          margin: 0 fz(4);
          line-height: 1.31;
        }
      }
    }

    &-ttl {
      font-weight: 900;
      font-size: fz(110);
      line-height: 1.1;
      text-align: center;
      letter-spacing: -0.04em;

      @include mq-down(sm) {
        //text-align: center;
        font-size: fz(26);
      }
    }

    &-arw {
      position: absolute;
      right: fz(45);
      bottom: fz(36);
      width: fz(61);
      height: fz(61);

      @include mq-down(sm) {
        width: fz(41);
        height: fz(41);
        bottom: fz(20);
        right: fz(35);
      }

      .cricle-arw__arw {
        @include mq-up(sm) {
          width: fz(12);
          height: fz(20);
        }
      }
    }
  }

  &__btm {
    @include mq-up(sm) {
      display: flex;
      justify-content: space-between;
    }

    &-item {
      background-color: #fff;
      border-radius: fz(16);

      @include mq-up(sm) {
        width: percent(560, 1760);
      }

      @include mq-down(sm) {
        border-radius: fz(96);

        &:not(:last-of-type) {
          margin-bottom: fz(17);
        }
      }
    }

    &-link {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: fz(149);
      font-weight: 900;
      font-size: fz(40);
      padding-right: 2em;
      line-height: 1;
      text-align: center;
      @include mq-down(lg) {
        font-size: fz(30);
        height: fz(100);
      }

      @include mq-down(sm) {
        font-size: fz(18);
        height: fz(56);
      }
    }

    &-arw {
      @include trans_y;
      right: fz(40);

      @include mq-down(sm) {
        right: fz(25);
      }
    }
  }
}

.top_gallary {
  background-color: #f6f6f6;
  padding: fz(270) 0 fz(175);
  position: relative;

  @include mq-down(sm) {
    padding: fz(110) 0 fz(125);
  }

  &__animal {
    position: absolute;
    right: 0;
    bottom: fz(-20);
    width: fz(200);

    @include mq-down(sm) {
      width: fz(110);
      bottom: fz(-15);
    }
  }

  &__deco-top {
    position: absolute;
    left: 0;
    top: 0;
  }

  &__deco {
    position: absolute;
    left: 0;

    &.--left01 {
      width: fz(58);
      top: percent(627, 1920);
    }

    &.--left02 {
      width: fz(127);
      bottom: fz(-80);
      z-index: 3;

      @include mq-down(sm) {
        bottom: fz(85);
        width: fz(53);
        z-index: inherit;
      }
    }
  }

  &__heading {
    margin-bottom: fz(80);

    @include mq-down(sm) {
      margin-bottom: fz(40);
    }
  }

  &__cols {
    display: flex;
    gap: fz(26);
    align-items: flex-start;

    @include mq-down(sm) {
      flex-direction: column;
      gap: fz(40);
    }
  }

  &__col {
    min-width: 0;
    flex: 1 1 auto;
  }

  &__ttl {
    margin-bottom: fz(32);
    font-size: fz(52);
  }

  &__insta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    @include mq-down(sm) {
      justify-content: space-between;
      //padding: 0 fz(16.8);

      &::after {
        content: '';
        display: block;
        width: 32.5%;
      }
    }

    &-post {
      width: 31%;
      margin: 0 0.3% fz(10);

      @include mq-down(sm) {
        width: 32.5%;
        margin: 0 0 fz(5);
      }

      // Instagramの投稿は正方形・縦長・横長が混在するので、
      // サムネイルは正方形に切り揃えてグリッドを崩さない
      a {
        display: block;
      }

      img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
      }
    }
  }

  &__btn {
    margin-top: fz(75);
    @include mq-down(sm) {
      margin-top: fz(25);
    }
  }

  .fb-page,
  .fb-page span,
  .facebook_wrap iframe {
    width: 100% !important;
  }
}

.top_associates {
  padding: fz(80) 0 fz(145);
  position: relative;

  @include mq-down(sm) {
    padding: fz(32) 0 fz(45);
  }

  &__deco {
    position: absolute;
    left: 0;

    &.--top {
      top: fz(-42);
      top: -2rem;

      @include mq-down(lg) {
        top: rem(-30);
      }

      @include mq-down(sm) {
        top: fz(-5);
      }
    }
  }

  &__heading {
    margin-bottom: fz(74);

    @include mq-down(sm) {
      margin-bottom: fz(28);
    }
  }

  &__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    @include mq-down(sm) {
      gap: 1em;
      //display: block;
    }

    &-item {
      margin: 0 fz(10) fz(30);

      // ロゴが小さくて読みにくいという指摘を受けて拡大（元: PC 4rem / SP 3.3rem）
      // 元画像は高さ160pxなので、この値でも拡大にはならない
      height: 6rem;

      // SPは画面幅の制約で、3.6rem を超えると横に2枚並ばなくなり
      // 一気に9行（縦1列）に崩れるのでここが上限
      @include mq-down(sm) {
        height: 3.6rem;
        margin-bottom: 0;
      }
      img {
        height: 100%;
        width: auto;
      }

      @include mq-down(sm) {
        margin: 0;

        &:not(:last-of-type) {
          //margin-bottom: fz(20);
        }
      }

      img {
        @include mq-up(sm) {
          width: auto;
          //zoom: .5;
        }
      }
    }
  }
}

.p-reletion-banner {
  background-color: #fff;
  padding-block: rem(90);
  @include mq-down(sm) {
    width: 90%;
    padding-block: rem(50);
    margin-inline: auto;

    .p-reserve-banner {
      .p-reserve-banner__text {
        line-height: 1.15;
        font-size: 1.2rem;
      }

      .cricle-arw {
        //margin-left: 0.5rem;
      }
    }
  }
}