/* =========================================================
   入会のご案内（/business/join/）
   読み込み条件: is_page( 'join' ) — inc/assets.php
   マークアップ: template-parts/page/join.php

   旧サイト /pages/associate_okinawa（旧 css/page.css の #associate）の見た目を再現する。
   値は旧 CSS から（2026-10-20 取得）。

   ★画面幅の区切り（旧サイトと同じ）
   640px 以下 … スマホ / 641px 以上 … パソコン

   ★色
   水色の帯 #eefafa / 緑 #3b7f88 / 茶 #98563e / ボタン #008ad2 / 灰の下線 #d2d7da
   ========================================================= */

.orwa-join {
  padding-top: 30px;
  background: #fff;
  font-family: "Hiragino Mincho ProN", YuMincho, "Yu Mincho", serif;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
}

/* 旧サイトは余白なしのリセットを使っていた。個別の指定より弱くするため :where() で詳細度を 0 にする。 */
:where(.orwa-join) :where(h1, h2, h3, p, ul, ol, dl, dd) {
  margin: 0;
}

:where(.orwa-join) :where(ul, ol) {
  padding: 0;
}

/* --- 冒頭（旧 .associate_title / .associate_break） ------------ */

.orwa-join__logo,
.orwa-join__hand {
  display: block;
  margin-inline: auto;
}

.orwa-join__catch {
  margin-block: 50px;
}

.orwa-join__title {
  font-size: 140%;
  font-weight: normal;
  line-height: 1.2;
}

.orwa-join__title-en {
  display: block;
  padding-top: 10px;
  font-size: 18px;
}

.orwa-join__hand {
  margin-block: 40px;
}

/* --- 入会申請フォームのボタン（旧 .associate_join）
   旧サイトと同じく sticky。画面より下にある間だけ画面下に付いてくる。 */

.orwa-join__cta {
  position: sticky;
  bottom: 10px;
  z-index: 100;
  display: inline-block;
  width: calc(100% - 30px);
}

.orwa-join__cta-link {
  display: block;
  padding: 30px;
  background-color: #008ad2;
  color: #fff;
  text-decoration: none;
}

/* --- 見出し（旧 .associate_content h3）
   左端から伸びる線の先に英語、その下に右へずらした日本語。 */

.orwa-join__section {
  padding-block: 40px;
}

/* 旧サイトは線を元の位置に残し、文字だけ上へずらしていた（SP 16px／PC 24px）。
   見出しごと上げて、線は同じ量だけ下げて戻す。 */
.orwa-join__heading {
  position: relative;
  top: -16px;
  display: grid;
  grid-template-columns: 15% calc(85% - 10px);
  font-size: 1.17em; /* 旧サイトの h3（ブラウザの標準サイズ） */
  font-weight: normal;
  text-align: left;
}

.orwa-join__heading::before {
  content: "";
  grid-row: 1;
  grid-column: 1;
  align-self: start;
  margin-top: 16px;
  border-top: 1px solid;
}

.orwa-join__heading-en {
  grid-row: 1;
  grid-column: 2;
  padding-left: 10px;
}

.orwa-join__heading-ja {
  position: relative;
  right: 20px;
  grid-row: 2;
  grid-column: 2;
  justify-self: end;
  color: #98563e;
}

/* スマホでは日本語の右端を英語に寄せる（旧サイトの幅指定のまま） */
.orwa-join__section--mission .orwa-join__heading-ja,
.orwa-join__section--market .orwa-join__heading-ja {
  justify-self: start;
  text-align: right;
}

.orwa-join__section--mission .orwa-join__heading-ja {
  width: 55%;
}

.orwa-join__section--market .orwa-join__heading-ja {
  width: 90%;
}

.orwa-join__copy {
  margin-top: 35px;
  font-size: 140%;
}

/* --- 3つの柱（旧 .associate_pillar） ------------------------- */

.orwa-join__pillar {
  overflow: hidden;
  padding: 15px;
  background-color: #eefafa;
}

.orwa-join__pillar-inner {
  position: relative;
  max-width: 965px;
  margin-inline: auto;
  padding: 35px;
  border: 1px solid #000;
  text-align: left;
}

/* 枠の右から画面の右端まで伸びる線（はみ出しは .orwa-join__pillar で切る） */
.orwa-join__pillar-inner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 90%;
  width: 2000px;
  border-top: 1px solid #000;
}

.orwa-join__pillar-lead {
  margin-bottom: 30px;
}

.orwa-join__pillar-list {
  color: #3b7f88;
  list-style-position: inside;
}

.orwa-join__pillar-item {
  margin-top: 10px;
  line-height: 1.6;
}

/* --- ◆の箇条書き（事業計画とビジョン・市場の環境） ------------- */

.orwa-join__list {
  width: min(100% - 30px, 965px);
  margin: 35px auto;
  text-align: left;
}

.orwa-join__list-item {
  margin-top: 35px;
  line-height: 1.6;
  list-style: "◆" inside;
}

/* --- 入会でできること9つ（旧 .associate_benefits） ------------- */

.orwa-join__section--benefits {
  background-color: #eefafa;
}

.orwa-join__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: min(100% - 30px, 1080px);
  margin: 40px auto;
  list-style: none;
}

.orwa-join__card {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
}

/* 左上の三角 */
.orwa-join__card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 30px solid #3b7f88;
  border-right: 30px solid transparent;
}

.orwa-join__card-title {
  font-size: 1em; /* 旧サイトの h4（ブラウザの標準サイズ） */
  font-weight: normal;
}

.orwa-join__card-img {
  display: block;
  width: 50%;
  margin: 10px auto;
}

/* 旧サイトでは ◆ の箇条書きの指定（余白・幅・行間）も効いていた */
.orwa-join__card-list {
  width: calc(100% - 30px);
  margin: 35px auto;
  padding-left: 25px;
  text-align: left;
}

.orwa-join__card-item {
  margin-top: 5px;
  font-size: 70%;
  line-height: 1.6;
  list-style: disc outside;
}

/* --- 入会申請について（旧 .associate_about） ------------------- */

.orwa-join__about {
  position: relative;
  background: #eefafa url("../img/join/footer-bg.png") no-repeat left top;
  background-image: image-set(url("../img/join/footer-bg.webp") type("image/webp"), url("../img/join/footer-bg.png") type("image/png"));
}

/* 下の SNS の帯に食い込ませる（旧サイトと同じ） */
.orwa-join__about-inner {
  position: relative;
  bottom: -80px;
  padding: 25px;
  border-bottom: 10px solid #d2d7da;
  background-color: rgb(255 255 255 / 80%);
  font-size: 75%;
  text-align: left;
}

.orwa-join__about-title {
  margin-bottom: 20px;
  font-size: 160%;
  font-weight: normal;
}

.orwa-join__about-row {
  display: flex;
  margin-top: 10px;
}

.orwa-join__about-row--block {
  display: block;
  margin-bottom: 20px;
}

.orwa-join__about-term::after {
  content: ":";
  padding-inline: 5px;
}

/* --- SNS（旧 .associate_sns） --------------------------------- */

.orwa-join__sns {
  display: flex;
  justify-content: flex-end;
  padding: 100px 15px;
  background-color: #eefafa;
  list-style: none;
}

.orwa-join__sns-item {
  width: 25px;
  margin-left: 20px;
}

.orwa-join__sns-img {
  display: block;
  width: 100%;
}

/* 旧ページは SNS の帯のすぐ下がフッター。共通の上余白（地の色が見える隙間）をなくす。
   このファイルは入会のご案内でしか読まないので、ほかのページには効かない。 */
.orwa-footer {
  margin-top: 0;
}

/* --- パソコン（641px 以上） ----------------------------------- */

@media (min-width: 641px) {
  .orwa-join {
    padding-top: 60px;
    font-size: 24px;
  }

  /* スマホだけの改行 */
  .orwa-join__br-sp {
    display: none;
  }

  .orwa-join__title {
    font-size: 160%;
  }

  .orwa-join__title-en {
    display: inline;
    padding-top: 0;
    font-size: 100%;
  }

  .orwa-join__cta {
    width: auto;
  }

  .orwa-join__cta-link {
    padding: 20px 70px;
  }

  .orwa-join__section {
    padding-block: 80px;
  }

  .orwa-join__heading {
    top: -24px;
    grid-template-columns: 28% max-content;
    column-gap: 25px;
  }

  .orwa-join__heading::before {
    margin-top: 24px;
  }

  .orwa-join__heading-en {
    padding-left: 0;
    text-align: center;
  }

  .orwa-join__heading-ja,
  .orwa-join__section--mission .orwa-join__heading-ja,
  .orwa-join__section--market .orwa-join__heading-ja {
    right: -90px;
    justify-self: end;
    width: auto;
  }

  .orwa-join__copy {
    font-size: 160%;
  }

  .orwa-join__pillar {
    padding: 50px;
  }

  .orwa-join__pillar-inner {
    padding: 35px 65px;
  }

  .orwa-join__cards {
    margin-block: 75px;
  }

  .orwa-join__card {
    width: calc(100% / 3 - 15px);
    margin-bottom: 45px;
    padding: 40px 25px;
  }

  .orwa-join__card-img {
    margin-block: 35px;
  }

  .orwa-join__card-list {
    width: auto;
  }

  .orwa-join__about-inner {
    bottom: -30px;
    max-width: calc(100% - 470px);
    margin-left: auto;
    padding: 60px 80px;
    background-color: #fff;
  }

  .orwa-join__about-title {
    margin-bottom: 40px;
  }

  .orwa-join__about-row--block {
    margin-bottom: 40px;
  }

  .orwa-join__sns {
    padding: 100px 50px;
  }

  .orwa-join__sns-item {
    margin-right: 25px;
    margin-left: 0;
  }
}