@charset "UTF-8";
/* ==========================================================
   サイトフッター(自前実装 / フェーズ2 T-03)

   移行元:Elementor「Elementor Footer_use」(ID 3759)
   値の出典:
     - docs/extracted/elementor-css/post-3759.css
     - 本番の実測(mibot-baseline/shot-footer.js) PC 1440 / タブレット 768 / スマホ 375

   ブレークポイントは Elementor の既定に合わせる。
     スマホ     〜767px
     タブレット  768〜1024px
     PC        1025px〜

   Elementor のコンテナは既定で padding 10px / gap 20px を持つ。
   その値がそのまま見た目を決めているので、ここでも同じ数値を書く。

   「ニュースレター登録」ボタン(a.basic_link)の見た目は
   カスタマイザーの追加CSS(a.basic_link … width:300px 等)と
   header.css に移した UE 基本ボタンのCSSに任せる。
   ========================================================== */

.l-footer {
  display: flow-root; /* 子の margin-top:100px を内側に含める(本番と同じ箱の取り方) */
  font-family: var(--mibot-font);
  font-size: 16px;
  line-height: 24px;
  color: #333333;
}

.l-footer a {
  text-decoration: none;
}

.l-footer__outer {
  display: flex;
  flex-direction: column;
  margin-top: 100px;
}

/* 濃色の面。全幅 */
.l-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 60px 40px 20px;
  background-color: #181c1b;
}

/* ---- 上段:左右2カラム ---- */
.l-footer__top {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

/* 左右とも flex-basis 50% + gap 20px。合計が親を超えるぶんは
   flex-shrink で均等に縮む(本番:1360px の中で 670px ずつ) */
.l-footer__company,
.l-footer__newsletter {
  display: flex;
  flex-direction: column;
  flex: 0 1 50%;
  min-width: 0;
  padding: 10px;
}

.l-footer__company {
  gap: 25px;
}

.l-footer__newsletter {
  gap: 20px;
}

/* ---- 左:会社情報 ---- */
.l-footer__logo {
  width: 118px;
  max-width: 100%;
  line-height: 0;
  font-size: 0;
}

.l-footer__logo a {
  display: inline-block;
}

.l-footer__logoImg {
  display: inline-block;
  width: 100%;
  height: auto;
}

.l-footer__address,
.l-footer__note {
  font-family: "Jeko", "M PLUS 1", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
}

.l-footer__social {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  line-height: 0;
  font-size: 0;
}

.l-footer__socialLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 10%;
  color: #ffffff;
}

.l-footer__socialLink:hover {
  opacity: 0.9;
}

.l-footer__socialLink svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: #ffffff;
}

/* ---- 右:ニュースレター ---- */
.l-footer__newsletterText {
  font-family: var(--mibot-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #ffffff;
}

/* ---- 右:リンク2列 ---- */
.l-footer__links {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.l-footer__linksInner {
  display: flex;
  flex-direction: column;
  flex: 0 1 100%;
  min-width: 0;
  gap: 30px;
  padding: 10px;
}

.l-footer__linkCols {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.l-footer__linkCol {
  display: flex;
  flex-direction: column;
  flex: 0 1 50%;
  min-width: 0;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-footer__linkCol--2 > ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 各リンクは Elementor の見出しウィジェット(padding 3px 0 の箱の中に
   line-height 1 の p、その中にインラインの a)。文字の指定は li に置き、
   a はインラインのまま色を継承する(本番と同じ組み方。会社概要の
   別タブアイコンが文字の直後に付く位置関係を保つため) */
.l-footer__linkItem {
  margin: 0;
  padding: 3px 0;
  list-style: none;
  font-family: "Jeko", "M PLUS 1", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

.l-footer__linkItem a,
.l-footer__linkItem a:hover {
  display: inline;
  color: inherit;
}

/* 予約ガイドの子項目:1段小さく、15px 下げ、上の項目に 10px 食い込む */
.l-footer__linkItem--child {
  margin-top: -10px;
  padding: 3px 0 3px 15px;
  font-size: 14px;
}

.l-footer__linkItem:hover {
  color: #ecd855;
}

/* 会社概要(外部リンク)の別タブアイコンは style.css / common.css の
   .external-link.white a::after が描く。a の padding-right 1.5em もそこから */

/* ---- 下段:ポリシー / コピーライト ---- */
.l-footer__bottom {
  display: flex;
  flex-direction: column;
  width: 99.199%; /* Elementor 上の設定値。透明な箱なので見た目には出ない */
  padding: 10px;
}

.l-footer__policy {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px 20px;
  width: 100%; /* 本番は margin-right 10px を持ちつつ幅 100%(10px はみ出す) */
  margin: 10px 10px 10px 0;
  padding: 0;
  list-style: none;
}

.l-footer__policy li {
  margin: 0;
  padding: 0 20px 0 0;
  list-style: none;
}

.l-footer__policy li:last-child {
  padding-right: 0;
}

.l-footer__policy a,
.l-footer__policy a:hover {
  display: block;
  font-family: "Jeko", "M PLUS 1", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.3); /* #FFFFFF4D */
}

.l-footer__copyright {
  margin: 0;
  padding: 10px 0 0;
  font-family: "Jeko", "M PLUS 1", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================
   タブレット(768〜1024px):左 40% / 右 60%、リンク列 75% / 35%
   ========================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  .l-footer__company {
    flex-basis: 40%;
  }
  .l-footer__newsletter {
    flex-basis: 60%;
  }
  .l-footer__logo {
    width: 100px;
  }
  .l-footer__linkCol--1 {
    flex-basis: 75%;
  }
  .l-footer__linkCol--2 {
    flex-basis: 35%;
  }
}

/* ==========================================================
   スマホ(〜767px):1カラムに積む
   ========================================================== */
@media (max-width: 767px) {
  .l-footer__inner {
    padding: 48px 27px 27px;
  }
  .l-footer__top {
    flex-wrap: wrap;
  }
  .l-footer__company,
  .l-footer__newsletter {
    flex-basis: 100%;
  }
  .l-footer__newsletter {
    margin-top: 20px;
  }
  .l-footer__logo {
    width: 100px;
  }
  .l-footer__linksInner {
    margin-top: 30px;
  }
  .l-footer__linkCols {
    flex-wrap: wrap;
  }
  .l-footer__linkCol {
    flex-basis: 100%;
    gap: 10px;
  }
  .l-footer__linkCol--2 > ul {
    gap: 10px;
  }
  .l-footer__linkItem--child {
    margin-top: 0;
  }
  .l-footer__bottom {
    width: 100%;
  }
}