/*
Theme Name: beyond child
Template: beyond_tcd094
Version: 1.0
*/

/* ==========================
   ご依頼の流れ + CTA（FlowCTA）
   ========================== */

/* --- 基本設定 --- */
.custom-flow-cta-wrapper {
  /* テーマフォントに合わせたいなら、下のfont-family行は消してOK */
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  max-width: 1000px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f9f9f9; /* 全体の背景色（薄いグレー） */
}

/* --- ご依頼の流れ --- */
.flow-section-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
}

.flow-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 50px;
  position: relative;
}

.flow-step {
  text-align: center;
  flex: 1;
  min-width: 120px;
  position: relative;
  z-index: 1;
}

/* アイコンの円 */
.step-icon-circle {
  width: 80px;
  height: 80px;
  background-color: #fff;
  border: 3px solid #f3b80a; /* 指定色：オレンジ */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px;
  font-size: 32px;
  color: #f3b80a; /* アイコンの色 */
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ホバー時 */
.flow-step:hover .step-icon-circle {
  background-color: #f3b80a;
  color: #fff;
  transform: translateY(-5px);
}

.step-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
}

/* 矢印（PC用） */
.flow-step::after {
  content: '\f054'; /* FontAwesomeの右矢印 */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 30px;
  right: -10px;
  font-size: 20px;
  color: #ccc;
  z-index: 0;
}
.flow-step:last-child::after { display: none; }

/* --- お問い合わせCTA --- */
.cta-box {
  background: #fff;
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-top: 30px;
}

.cta-header {
  text-align: center;
  font-weight: bold;
  color: #f3b80a;
  margin: 15px 0;
  font-size: 18px;
}

.cta-buttons {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 20px 30px;
}

/* 共通ボタン */
.cta-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  color: #fff !important;
  padding: 15px 10px;
  border-radius: 5px;
  transition: transform 0.2s, opacity 0.2s;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-align: center;
}
.cta-btn:hover { transform: translateY(-3px); opacity: 0.9; }

/* 個別 */
.btn-tel {
  background-color: #fff;
  border: 2px solid #333;
  color: #333 !important;
  flex: 1.2;
}
.btn-tel-number {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
  display: block;
}
.btn-tel-time {
  font-size: 11px;
  color: #666;
  font-weight: normal;
}

.btn-line { background-color: #06c755; }
.btn-mail { background-color: #0084cf; }

/* テキスト */
.btn-sub {
  font-size: 11px;
  margin-bottom: 5px;
  display: block;
  opacity: 0.9;
}
.btn-main {
  font-size: 16px;
  font-weight: bold;
  display: block;
}

/* アイコン */
.cta-icon { margin-right: 5px; }

/* --- レスポンシブ --- */
@media (max-width: 768px) {
  .flow-steps { flex-direction: column; align-items: center; }
  .flow-step { width: 100%; margin-bottom: 30px; }

  .flow-step::after {
    content: '\f078'; /* 下矢印 */
    top: auto;
    bottom: -25px;
    right: 50%;
    transform: translateX(50%);
  }

  .cta-buttons { flex-direction: column; }
  .btn-tel, .btn-line, .btn-mail { width: 100%; margin-bottom: 10px; }
}

/* アイコンフォント(FontAwesome)の読み込み */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* --- お問い合わせセクションのスタイル --- */
.contact-banner {
  background-color: #fff;
  padding: 50px 20px;
  text-align: center;
  border-top: 4px solid #f3b80a; /* 指定のオレンジ */
  margin-bottom: 30px; /* 下の余白 */
}

.banner-title {
  color: #f3b80a;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.banner-subtitle {
  font-size: 18px;
  color: #333;
  margin-bottom: 40px;
}

.banner-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.contact-banner .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 8px;
  width: 320px;
  max-width: 100%;
  box-sizing: border-box;
  transition: opacity 0.3s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 軽く影をつける */
}
.contact-banner .btn:hover {
  opacity: 0.8;
}

.btn-icon {
  font-size: 28px;
  margin-right: 15px;
}

.btn-text-group {
  text-align: left;
  line-height: 1.3;
}

/* 電話ボタン */
.btn-phone {
  background-color: #fff;
  color: #333 !important;
  border: 2px solid #333;
}
.phone-number {
  display: block;
  font-size: 24px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
.service-hours {
  font-size: 11px;
  color: #666;
  display: block;
}

/* LINEボタン */
.btn-line {
  background-color: #06c755; /* LINE公式カラー */
  color: #fff !important;
  border: none;
}
.btn-line .btn-icon {
  font-size: 34px;
}

/* メールボタン */
.btn-mail {
  background-color: #0084d1;
  color: #fff !important;
  border: none;
}

.btn-small-text {
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
}
.btn-large-text {
  display: block;
  font-size: 18px;
  font-weight: bold;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .banner-buttons {
    flex-direction: column;
    align-items: center;
  }
  .contact-banner .btn {
    width: 100%;
    max-width: 400px;
  }
  .banner-title {
    font-size: 22px;
  }
  .banner-subtitle {
    font-size: 15px;
  }
}
/* ===== ご依頼の流れ：スマホを上3・下2にする ===== */
@media (max-width: 768px) {

  .flow-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 10px;
    justify-items: center;
  }

  /* 4・5個目を2列にする */
  .flow-step:nth-child(4),
  .flow-step:nth-child(5) {
    grid-column: span 1;
  }

  /* 4・5を中央寄せ */
  .flow-step:nth-child(4) {
    grid-column: 1 / span 2;
    justify-self: center;
  }

  .flow-step:nth-child(5) {
    grid-column: 2 / span 2;
    justify-self: center;
  }

  /* 矢印を消す（スマホでは不要） */
  .flow-step::after {
    display: none;
  }
}
/* --- お問い合わせセクション（強制適用版） --- */
.contact-banner {
  background-color: #fff !important;
  padding: 50px 20px !important;
  text-align: center !important;
  border-top: 4px solid #f3b80a !important;
  margin: 20px 0 !important;
  display: block !important;
  clear: both !important;
}

.banner-title {
  color: #f3b80a !important;
  font-size: 28px !important;
  font-weight: bold !important;
  margin: 0 0 10px 0 !important;
  display: block !important;
}

.banner-subtitle {
  font-size: 18px !important;
  color: #333 !important;
  margin-bottom: 40px !important;
  display: block !important;
}

.banner-buttons {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
}

/* ボタン共通 */
.contact-banner .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  padding: 10px 15px !important;
  border-radius: 8px !important;
  width: 320px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* 各ボタンの色 */
.btn-phone { background-color: #fff !important; color: #333 !important; border: 2px solid #333 !important; }
.btn-line { background-color: #06c755 !important; color: #fff !important; border: none !important; }
.btn-mail { background-color: #0084d1 !important; color: #fff !important; border: none !important; }

/* テキスト調整 */
.phone-number { font-size: 24px !important; font-weight: bold !important; display: block !important; }
.btn-large-text { font-size: 18px !important; font-weight: bold !important; display: block !important; }
.service-hours, .btn-small-text { font-size: 11px !important; display: block !important; }

/* スマホ対応 */
@media (max-width: 768px) {
  .banner-buttons { flex-direction: column !important; align-items: center !important; }
  .contact-banner .btn { width: 100% !important; margin-bottom: 10px !important; }
}
/* ご依頼の流れ：上3・下2に並べる */
.custom-flow-cta-wrapper ul{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 14px !important;
  padding-left: 0 !important;
  margin: 0 auto !important;
}

.custom-flow-cta-wrapper ul > li{
  list-style: none !important;
  box-sizing: border-box !important;
  width: calc(33.333% - 14px) !important; /* 上3列 */
  max-width: 170px;
}

.custom-flow-cta-wrapper ul > li:nth-child(n+4){
  width: calc(50% - 14px) !important; /* 下2列 */
}

.custom-flow-cta-wrapper img{
  max-width: 100% !important;
  height: auto !important;
}
/* ご依頼の流れ：上3・下2（flow-steps / cta-box 用） */
.custom-flow-cta-wrapper .flow-steps{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 16px !important;
}

/* 各ステップ */
.custom-flow-cta-wrapper .flow-steps .cta-box{
  box-sizing: border-box;
  width: calc(33.333% - 16px); /* 上3列 */
  max-width: 160px;
}

/* 下段2つ */
.custom-flow-cta-wrapper .flow-steps .cta-box:nth-child(n+4){
  width: calc(50% - 16px); /* 下2列 */
}

/* スマホでのはみ出し防止 */
.custom-flow-cta-wrapper{
  overflow-x: hidden;
}
/* =========================
   ご依頼の流れ：参考画像と同じ（上3＋下2＋矢印）
========================= */

/* 並びの親 */
.custom-flow-cta-wrapper .flow-steps{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap: 26px 40px !important; /* 縦 横の間隔 */
  position: relative;
}

/* 各ボックス（丸＋文字） */
.custom-flow-cta-wrapper .flow-steps .cta-box{
  box-sizing:border-box;
  width: 180px;              /* 参考画像のように固定気味 */
  text-align:center;
  position: relative;
}

/* 上段3つ */
.custom-flow-cta-wrapper .flow-steps .cta-box:nth-child(-n+3){
  width: 180px;
}

/* 下段2つ（少し広めでもOKなら） */
.custom-flow-cta-wrapper .flow-steps .cta-box:nth-child(n+4){
  width: 200px;
}

/* 矢印（＞）を上段の1→2、2→3に付ける */
.custom-flow-cta-wrapper .flow-steps .cta-box:nth-child(1)::after,
.custom-flow-cta-wrapper .flow-steps .cta-box:nth-child(2)::after{
  content: "›";
  position: absolute;
  right: -26px;
  top: 52px;                 /* 丸の中心あたりに合わせる */
  font-size: 44px;
  line-height: 1;
  opacity: .45;
}

/* 矢印（＞）を下段の4→5に付ける */
.custom-flow-cta-wrapper .flow-steps .cta-box:nth-child(4)::after{
  content: "›";
  position: absolute;
  right: -26px;
  top: 52px;
  font-size: 44px;
  line-height: 1;
  opacity: .45;
}

/* スマホ幅での微調整（狭いときは自動で折り返し） */
@media (max-width: 480px){
  .custom-flow-cta-wrapper .flow-steps{
    gap: 22px 24px !important;
  }
  .custom-flow-cta-wrapper .flow-steps .cta-box{
    width: 46vw;              /* 2列寄りにしても崩れない */
    max-width: 200px;
  }
  /* スマホでは矢印が詰まるので消す */
  .custom-flow-cta-wrapper .flow-steps .cta-box::after{
    content:none !important;
  }
}
/* ご依頼の流れ：上3・下2（正しいクラス用） */
.custom-flow-cta-wrapper .flow-steps{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 20px !important;
}

/* 各ステップ */
.custom-flow-cta-wrapper .flow-steps .flow-step{
  box-sizing: border-box;
  width: calc(33.333% - 20px); /* 上3列 */
  max-width: 180px;
  text-align: center;
}

/* 下段2つ */
.custom-flow-cta-wrapper .flow-steps .flow-step:nth-child(n+4){
  width: calc(50% - 20px); /* 下2列 */
}

/* はみ出し防止 */
.custom-flow-cta-wrapper{
  overflow-x: hidden;
}
/* ご依頼の流れ：上3・下2（縦固定CSSに勝つ版） */
.custom-flow-cta-wrapper .flow-steps{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 18px !important;
}

/* ここが本命：width:100% 等を強制的に上書き */
.custom-flow-cta-wrapper .flow-steps > .flow-step{
  flex: 0 0 calc(33.333% - 18px) !important;
  width: calc(33.333% - 18px) !important;
  max-width: 190px;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* 下段2つ */
.custom-flow-cta-wrapper .flow-steps > .flow-step:nth-child(n+4){
  flex-basis: calc(50% - 18px) !important;
  width: calc(50% - 18px) !important;
}
/* ご依頼の流れ：上3・下2を“強制”する（縦積み殺し） */
.custom-flow-cta-wrapper .flow-steps{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 18px !important;
  justify-items: center !important;
}

/* まず子要素に付いてる縦積み系を無効化 */
.custom-flow-cta-wrapper .flow-steps > .flow-step{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 上段：3つ（6列のうち2列ずつ使う＝3個並ぶ） */
.custom-flow-cta-wrapper .flow-steps > .flow-step:nth-child(-n+3){
  grid-column: span 2 !important;
}

/* 下段：2つ（6列のうち3列ずつ使う＝2個並ぶ＆中央寄せ） */
.custom-flow-cta-wrapper .flow-steps > .flow-step:nth-child(n+4){
  grid-column: span 3 !important;
}
/* スマホでも「上3・下2」に固定（テーマのスマホ用上書きを打ち消す） */
@media (max-width: 600px){

  .custom-flow-cta-wrapper .flow-steps{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 18px !important;
  }

  /* ここが本命：スマホで勝手に width:100% にされるのを潰す */
  .custom-flow-cta-wrapper .flow-steps > .flow-step{
    width: calc(33.333% - 18px) !important;
    flex: 0 0 calc(33.333% - 18px) !important;
    max-width: 190px;
    margin: 0 !important;
  }

  .custom-flow-cta-wrapper .flow-steps > .flow-step:nth-child(n+4){
    width: calc(50% - 18px) !important;
    flex-basis: calc(50% - 18px) !important;
  }

  /* 念のため：縦積み固定にありがちな指定を無効化 */
  .custom-flow-cta-wrapper .flow-steps > .flow-step{
    float: none !important;
    clear: none !important;
  }
}
@media (max-width: 360px){
  .custom-flow-cta-wrapper .flow-steps > .flow-step{
    width: calc(50% - 18px) !important;
    flex-basis: calc(50% - 18px) !important;
  }
}
/* スマホだけ：上3・下2 を強制（361pxでも崩れない） */
@media (max-width: 480px){

  .custom-flow-cta-wrapper .flow-steps{
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
    justify-items: center !important;
  }

  /* 変なwidth:100%系を全部無効化 */
  .custom-flow-cta-wrapper .flow-steps > .flow-step{
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  /* 上段3つ（2列ずつ使う） */
  .custom-flow-cta-wrapper .flow-steps > .flow-step:nth-child(-n+3){
    grid-column: span 2 !important;
  }

  /* 下段2つ（3列ずつ使う） */
  .custom-flow-cta-wrapper .flow-steps > .flow-step:nth-child(n+4){
    grid-column: span 3 !important;
  }

  /* アイコンが大きすぎて3列に入らないのを防ぐ（画像/svg両対応） */
  .custom-flow-cta-wrapper .flow-steps > .flow-step img,
  .custom-flow-cta-wrapper .flow-steps > .flow-step svg{
    width: 64px !important;
    height: 64px !important;
  }

  /* 文字もちょい小さく */
  .custom-flow-cta-wrapper .flow-steps > .flow-step{
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}
@media (max-width: 480px){
  .custom-flow-cta-wrapper .flow-arrow{
    margin: 0 auto !important;
    display: block !important;
  }
}
@media (max-width: 480px){
  .custom-flow-cta-wrapper .flow-arrow{
    margin: 0 auto !important;
    display: block !important;
  }
}
@media (max-width: 480px){
  .custom-flow-cta-wrapper .flow-step{
    padding-bottom: 6px;
  }
}
/* お問い合わせCTAを中央揃え（電話枠・LINE・メール） */
.custom-flow-cta-wrapper :is(.cta-box, .cta-area, .contact-cta, .cta-buttons, .cta_wrap){
  text-align: center !important;
}

/* 中のボタンや電話枠っぽい要素を中央に */
.custom-flow-cta-wrapper :is(a, button, .tel-box, .tel_area, .tel, .line, .mail, .cta-btn, .btn){
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* もし横幅が変に広がっている場合の保険 */
.custom-flow-cta-wrapper :is(.tel-box, .tel_area, a, button){
  max-width: 520px;
  width: 100%;
}