@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ===========================================================================
   home ページ（.biken-home-*）
   モックアップ v6 に寄せる最小限の追い込み。装飾はできる限りブロック機能で付け、
   ここは「ブロック設定に無いプロパティ（カード背景・余白の内包）」に限定する。

   追加クラス（すべて loos/full-wide の className）：
   - 選ばれる理由        → .biken-home-reason
   - 2つの回収サービス   → .biken-home-service
   - 回収までの流れ      → .biken-home-flow
   - 対応エリア          → .biken-home-area
   - お知らせ            → .biken-home-news
   - 恩返し + CTA        → .biken-home-cta
=========================================================================== */

.header__btns {
  white-space: nowrap;
  .swell-block-button__link {
    padding-block: 0.5em;
  }
}

.line-btn {
  margin-left: 1em;
}

@media screen and (max-width: 780px) {
  .line-btn {
    margin-left: 0;
  }
}

/* --- FV（blog_parts "fv"）のキャッチコピー・リード文：PC側でインラインの固定rem指定（3.5rem/4rem）が
   入っているため、SPではインラインを打ち消して縮小する。リード文（.fv-text）もキャッチに合わせて調整 --- */
@media screen and (max-width: 599px) {
  .fv-catch .swl-fz {
    font-size: 2.2rem !important;
  }
  .fv-catch .swl-inline-color .swl-fz {
    font-size: 2.5rem !important;
  }
  .fv-text {
    font-size: 0.95rem;
    line-height: 1.8;
  }
}

/* --- 2つの回収サービス：ネイビー上の各カードを半透明パネルにする --- */
.biken-home-service .swell-block-column {
  background: rgba(255, 255, 255, 0.06);
  padding: 28px;
}
.biken-home-service .swell-block-column .wp-block-image {
  margin-top: 0;
  margin-bottom: 20px;
}
.biken-home-service .swell-block-column .wp-block-image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.biken-home-service .swell-block-column .wp-block-heading {
  margin-top: 0;
}
/* 2カラム下の「サービス案内を見る」ボタンを中央に */
.biken-home-service > .swell-block-fullWide__inner > .swell-block-button {
  text-align: center;
  margin-top: 8px;
}

/* --- 対応エリア：地図画像を幅いっぱいに --- */
.biken-home-area .wp-block-image img {
  width: 100%;
}

/* --- 回収エリアのカード（ブログパーツ id 1363）：横並び時に高さを高い方へ揃える --- */
.area-cards .swell-block-column {
  display: flex;
  flex-direction: column;
}
.area-cards .swell-block-capbox {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-block: 0;
}
.area-cards .cap_box_content {
  flex: 1;
}

/* ===========================================================================
   service ページ（.biken-service-*）
   追加クラス（loos/full-wide の className。リサイクル先ボックスのみ loos/columns）：
   - イントロ              → .biken-service-intro
   - 廃食油回収            → .biken-service-oil
   - 廃食油のリサイクル先  → .biken-service-recycle（loos/columns。ネイビーの箱）
   - 食品残渣回収          → .biken-service-food
   - 対応エリア(簡易)      → .biken-service-area
   - CTA                   → .biken-service-cta
   ここも「カード背景・画像トリミング・ボタン中央寄せ」に限定する。
=========================================================================== */

/* --- リード上の SERVICE 01 / 02 ラベルを主張させる --- */
.biken-service-oil .swell-block-column .has-small-font-size:first-child,
.biken-service-food .swell-block-column .has-small-font-size:first-child {
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

/* --- リード横の画像：4:3 トリミング --- */
.biken-service-oil .wp-block-image img,
.biken-service-food .wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- 廃食油のリサイクル先：ネイビーの箱（1カラムを全幅に） --- */
.biken-service-recycle .swell-block-column {
  width: 100%;
  flex-basis: 100%;
  background: #22314a;
  padding: 40px;
}
.biken-service-recycle .wp-block-heading {
  margin-top: 0;
}

/* --- 対応エリア(簡易)：ボタンを本文の下に少し離す --- */
.biken-service-area .swell-block-button {
  margin-top: 24px;
}

/* CTA はブログパーツ（id 770／写真背景のカバー）に差し替えたため、
   .biken-service-cta 用の CSS は撤去済み。 */

@media screen and (max-width: 599px) {
  .biken-service-recycle .swell-block-column {
    padding: 28px 22px;
  }
  /* --- 食品残渣回収：画像/テキストの並びをSPでは逆順にする --- */
  .service-reverse .swell-block-columns__inner {
    flex-direction: column-reverse;
  }
}

/* ===========================================================================
   about ページ（.biken-about-*）
   追加クラス（loos/full-wide の className。特長カードの loos/columns のみ .biken-about-cards）：
   - イントロ              → .biken-about-intro
   - 代表挨拶              → .biken-about-greeting
   - 会社情報             → .biken-about-info
   - 許可・コンプライアンス → .biken-about-compliance（3列カードは .biken-about-cards）
   - CTA                   → .biken-about-cta
=========================================================================== */

/* --- 許可・コンプライアンス：2×2 のサンド地カード --- */
.biken-about-cards .swell-block-column {
  background: rgba(232, 217, 191, 0.35);
  border: 2px solid #00a9a9;
  padding: 30px 28px;
}
.biken-about-cards .wp-block-heading {
  margin-top: 0;
  color: #22314a;
}

/* --- CTA：ライトオレンジ帯の中にネイビーのボックス --- */
.biken-about-cta .swell-block-fullWide__inner {
  background: #22314a;
  color: #fff;
  padding: 56px 40px;
  text-align: center;
}
.biken-about-cta .wp-block-heading,
.biken-about-cta p {
  color: #fff;
}
.biken-about-cta .swell-block-button {
  display: inline-block;
  margin: 6px;
  vertical-align: top;
}
.biken-about-cta .is-style-btn_line .swell-block-button__link {
  color: #fff;
  border-color: #fff;
  background-color: transparent;
}
@media (any-hover: hover) {
  .biken-about-cta .is-style-btn_line .swell-block-button__link:hover {
    color: #22314a;
    background-color: #fff;
  }
}

@media screen and (max-width: 599px) {
  .biken-about-cards .swell-block-column {
    padding: 24px 20px;
  }
  .biken-about-cta .swell-block-fullWide__inner {
    padding: 36px 24px;
  }
}

/* ===========================================================================
   contact ページ（.biken-contact-*）
   追加クラス（loos/full-wide の className。フォーム箱は loos/columns 側）：
   - イントロ  → .biken-contact-intro
   - フォーム  → .biken-contact-form（CF7 を囲む白箱は .biken-contact-formbox）
   CF7 の入力欄は SWELL 側にスタイルが無いため、ここで余白を最小限だけ足す。
=========================================================================== */

/* --- フォームを箱で囲む（loos/columns 1カラムを全幅に） --- */
.biken-contact-formbox .swell-block-column {
  width: 100%;
  flex-basis: 100%;
  background: #f7f1e6;
  padding: 40px;
  box-shadow: 0 2px 16px rgba(34, 49, 74, 0.06);
}

/* --- CF7 入力欄の最小スタイル --- */
.biken-contact-form .wpcf7-form p {
  margin: 0 0 18px;
}
.biken-contact-form .wpcf7-form label {
  display: block;
  font-weight: 700;
  color: #22314a;
  margin-bottom: 22px;
}
.biken-contact-form .cf7-req {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  background: #e65100;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}
.biken-contact-form .cf7-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.biken-contact-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 6px;
}
/* 「お問い合わせ内容」だけ label がラジオを内包せず先に閉じているため、
   label の margin-bottom(22px) がそのまま余白として乗ってしまい他項目より空きすぎる。打ち消す */
.biken-contact-form .wpcf7-form-control-wrap[data-name="inquiry-type"] {
  margin-top: -53px;
}
.biken-contact-form input[type="text"],
.biken-contact-form input[type="tel"],
.biken-contact-form input[type="email"],
.biken-contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(34, 49, 74, 0.2);
  background: #fff;
  font-size: 16px;
  color: #2e2e2e;
}
.biken-contact-form input:focus,
.biken-contact-form textarea:focus {
  outline: 2px solid rgba(230, 81, 0, 0.4);
  outline-offset: 1px;
  border-color: #e65100;
}
.biken-contact-form textarea {
  min-height: 160px;
  resize: vertical;
}
.biken-contact-form .wpcf7-radio {
  display: block;
  margin-top: 6px;
}
.biken-contact-form .wpcf7-list-item {
  display: inline-block;
  margin: 4px 18px 4px 0;
}
/* use_label_element で選択肢ごとに生成される label にも、フォーム共通の
   label { margin-bottom: 22px } が効いてしまい、選択肢の箱が余分に大きくなる。打ち消す */
.biken-contact-form .wpcf7-list-item label {
  margin-bottom: 0;
}
.biken-contact-form .wpcf7-list-item-label {
  margin-left: 4px;
}
.biken-contact-form .wpcf7-submit {
  display: block;
  margin: 28px auto 0;
  padding: 14px 44px;
  border: 0;
  background: #e65100;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.biken-contact-form .wpcf7-spinner {
  margin: 16px auto 0;
  display: block;
}
@media (any-hover: hover) {
  .biken-contact-form .wpcf7-submit:hover {
    filter: brightness(0.95);
  }
}

@media screen and (max-width: 599px) {
  .biken-contact-formbox .swell-block-column {
    padding: 28px 22px;
  }
  .biken-contact-form .cf7-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}