@charset "utf-8";
/*
Theme Name: anamachi-child-genesis
Description: genesis_tcd103 の子テーマです ( テーマの説明 )

Template: genesis_tcd103
*/
/* --- 元のテーマのヘッダー要素を一旦整理（必要に応じて） --- */
/* 元のロゴやPC用メニュー、検索窓を非表示にしたい場合は以下を有効化してください */
#header #global_menu,
#header #header_search,
#header .logo_area { /* テーマによってクラス名は異なります */
  display: none !important;
}

/* 画面サイズに関わらず、すべての端末でハンバーガーメニューを非表示にする */
#drawer_menu_button,
.drawer_menu_button,
#header_menu_button,
.menu-toggle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* --- 新設：3分割カスタムヘッダーのスタイル --- */
#header {
  width: 100%;
  border-bottom: 4px solid #e76f6f; /* 下部の赤いライン */
  background-color: #fff;
  padding: 15px 20px;
  box-sizing: border-box;
}

.custom-header-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 左：テキストロゴ */
.custom-header-left {
  flex: 1;
}

/* ①「相続の相談は私たちにお任せください！」の色 */
.custom-catchphrase {
  font-size: 13px;
  margin: 0 0 5px 0;
  color: #361816;
  line-height: 1.2;
  font-weight: bold;
}

.custom-logo-text {
  font-size: 21px;
  font-weight: bold;
  margin: 0;
  line-height: 1.3;
}

/* ②「あなたのまちの」の色 */
.custom-logo-text .color-prefix {
  color: #EC6060;
}

/* ③「〇〇相続センター（宮崎相続センターなど）」の色 */
.custom-logo-text .color-main {
  color: #660D0D;
}

/* 中央：サブロゴ */
.custom-header-center {
  flex: 1;
  text-align: center;
}
.custom-sub-logo {
  max-height: 40px;
  vertical-align: middle;
}

/* 右：お問い合わせ */
/* 右：お問い合わせ番号（親の枠を上寄せ） */
.custom-header-right {
   flex: 0 0 40% !important;
   max-width: 40% !important;
   order: 3 !important;
   display: flex !important;
   justify-content: flex-end !important;
   align-self: flex-start !important; /* 親枠を上寄せ */
   margin-top: 0 !important;
   position: relative;
   z-index: 9999;
   pointer-events: none;
 }

 /* ★追加：中身のリンクとテキストも強制的に上寄せにする */
 .custom-header-right .custom-phone-link {
   cursor: pointer !important; /* マウスを乗せた時に指マークにする */
   display: flex !important;
   align-items: flex-start !important; /* 📞アイコンとテキストの並びを上寄せに */
   position: relative !important;
   z-index: 10000 !important;
   pointer-events: auto !important;
 }

 .custom-header-right .custom-phone-info {
   display: flex !important;
   flex-direction: column !important;
   align-items: flex-end !important; /* テキスト自体は右寄せのまま */
   justify-content: flex-start !important; /* 縦方向は上寄せ */
 }

.custom-phone-icon {
  font-size: 28px;
  color: #d9534f;
  margin-right: 10px;
}

.custom-phone-number {
  font-size: 26px;
  font-weight: bold;
  color: #e76f6f;
  line-height: 1;
}
.custom-phone-hours {
  font-size: 13px !important;
  color: #361816;
  text-align: right;
  margin-top: 3px;
}

/* ==========================================================================
   PC表示時の修正（グループ枠を横並びに戻す）
   ========================================================================== */
.custom-header-left-group {
  display: flex !important;
  flex-direction: row !important; /* PCでは横並び */
  align-items: center !important;
  flex: 0 0 60% !important; /* 元の左側と中央を合わせた幅 */
  max-width: 70% !important;
}
/* PC時の微調整：グループ内の要素の幅を最適化 */
.custom-header-left-group .custom-header-left {
  flex: 0 0 auto !important;
}
.custom-header-left-group .custom-header-center {
  flex: 0 0 auto !important;
  margin-left: 30px !important; /* ロゴ同士の横の隙間 */
}


/* ==========================================================================
   タブレット・スマホ表示時（1024px以下）の修正
   ========================================================================== */
@media screen and (max-width: 1024px) {
  
  /* ヘッダー全体の高さを自動化して2段分を収める */
  #header {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    box-sizing: border-box !important;
  }

  /* 親コンテナ：左グループと右電話番号を横並び（上寄せ基準） */
  .custom-header-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 左側のグループ枠（スマホ時は中身を縦並び2段にする） */
  .custom-header-left-group {
    flex: 0 0 58% !important;
    max-width: 58% !important;
    display: flex !important;
    flex-direction: column !important; /* ここで縦並びに切り替え */
    align-items: flex-start !important;
    height: auto !important;
  }

  /* テキストロゴの幅 */
  .custom-header-left {
    width: 100% !important;
    height: auto !important;
  }

  /* 画像サブロゴ（2段目の隙間調整） */
  .custom-header-left-group .custom-header-center {
    width: 100% !important;
    text-align: left !important;
    margin-top: 12px !important;
    margin-left: 0 !important; /* PC用の余白をリセット */
    height: auto !important;
  }

  /* 右：お問い合わせ番号（確実に一番上へ上寄せ） */
  .custom-header-right {
    flex: 0 0 40% !important;
    max-width: 40% !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-self: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 2px !important;
  }

  /* 電話番号エリアの中身リセット */
  .custom-header-right .custom-phone-link {
    display: flex !important;
    align-items: flex-start !important;
    height: auto !important;
    line-height: 1.1 !important;
  }

  .custom-header-right .custom-phone-icon {
    font-size: 18px !important;
    line-height: 1 !important;
    height: auto !important;
    display: inline-block !important;
    margin-right: 6px !important;
    margin-top: 1px !important;
  }

  .custom-header-right .custom-phone-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    height: auto !important;
    line-height: 1.1 !important;
  }

  .custom-header-right .custom-phone-number {
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .custom-header-right .custom-phone-hours {
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  /* 文字・画像サイズ微調整 */
  .custom-catchphrase { font-size: 11px !important; }
  .custom-logo-text { font-size: 15px !important; }
  .custom-sub-logo { max-height: 26px !important; }
}

/* ==========================================================================
   フッター調整
   ========================================================================== */

/* メニュー全体の中央寄せ と 上部の白い線を消す */
#footer_nav {
    border-top: none !important;
    box-shadow: none !important;
    text-align: center !important;
    width: 100% !important;
    padding: 10px 0 !important; /* 必要に応じて上下の余白を微調整 */
}

/* ★スマホ・PC問わず、常に横並び＆中央寄せに強制する */
#footer_nav .swiper-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transform: none !important;       /* Swiperのスライド位置計算をリセット */
    width: 100% !important;
    flex-direction: row !important;   /* 縦並び化を防ぎ、絶対に横並び */
    flex-wrap: nowrap !important;     /* 改行させない */
}

/* ★各メニューの幅を自動にし、左右に適切な余白を作る */
#footer_nav .swiper-wrapper .swiper-slide {
    width: auto !important;           /* 画面幅による強制100%などを解除 */
    margin: 0 15px !important;        /* メニューとメニューの間の隙間（左右に15pxずつ） */
    flex-shrink: 0 !important;        /* スマホで潰されるのを防ぐ */
}

/* メニューの文字色を白にする */
#footer_nav a,
#footer_nav .swiper-slide a {
    color: #ffffff !important;
    text-shadow: none !important;
    font-size: 14px !important;       /* スマホでも見やすい文字サイズ（必要なら調整してください） */
    display: inline-block !important;
}

/* マウスホバー時 */
#footer_nav a:hover,
#footer_nav .swiper-slide a:hover {
    color: #ffffff !important;
    opacity: 0.7 !important;
}

#footer_inner{
	padding:60px 100px 0 !important;
}