/*
Theme Name: header-child
Template: massive_tcd084
*/

/* 親テーマのスタイルをインポート */
@import url('../massive_tcd084/style.css');


/*─────────────────────────────*/
/*         ヘッダーボタン         */
/*─────────────────────────────*/

/* LINEボタン内の画像：親要素の高さに合わせ、余白除去・縦横比維持 */
#header_button a.line_button img {
  display: block;    /* インライン余白を除去 */
  height: 100%;      /* 親要素の高さにフィット */
  width: auto;       /* 縦横比を維持 */
}

/* LINEボタン自体の左右パディング */
#header_button a.line_button {
  padding-left: 30px;   /* 左パディング30px */
  padding-right: 30px;  /* 右パディング30px */
}

/* ヘッダーボタン全体のリンク要素：垂直中央揃え */
#header_button a {
  vertical-align: middle;  /* 各ボタンを中央揃え */
}


/*─────────────────────────────*/
/*         フッターバナー         */
/*─────────────────────────────*/

/* 画像部分を非表示（元々のレイアウト調整用なので、ここで上書き） */
#footer_banner .image_wrap {
  display: none;  /* 画像部分を隠す */
}

/* タイトルエリア基本設定：左寄せ、縦方向フレックス、上に15pxシフト、全幅利用 */
#footer_banner .title_area {
  text-align: left;          /* タイトル・本文を左寄せ */
  padding-left: 0;           /* 左パディングリセット */
  display: flex;             /* フレックスコンテナ */
  flex-direction: column;    /* タイトルと本文を縦に並べる */
  transform: translateY(-15px);  /* 全体を上に15pxシフト */
  width: 100%;               /* 画像非表示時の余白(calc())を解除 */
}

/* タイトル部分設定：固定高さ（デスクトップ）、中央揃え、はみ出し非表示 */
#footer_banner .title_area .title {
  height: 100px;             /* タイトルエリア高さ100px（デスクトップ） */
  overflow: hidden;          /* はみ出す内容を非表示 */
  display: flex;             /* 内部をフレックス化 */
  align-items: center;       /* 垂直中央揃え */
  margin-top: 0;             /* 上マージンリセット */
}

/* タイトル内画像設定：高さ固定、縦横比維持 */
#footer_banner .title_area .title img {
  height: 100px;   /* タイトル画像の高さ100px */
  width: auto;     /* 横幅自動調整 */
}

/* 本文部分（.desc）の設定：上マージンと最低高さ、改行はそのまま表示 */
#footer_banner .title_area .desc {
  margin-top: -5px;          /* 上マージン微調整 */
  min-height: 40px;           /* 最低高さ40px */
  white-space: pre-wrap;     /* 入力された改行をそのまま反映 */
}

/* 不要な after 疑似要素を全画面で非表示 */
.animate_background.clearfix::after {
  display: none;  /* after 疑似要素を非表示 */
}


/*─────────────────────────────*/
/*         スマートフォン設定         */
/*─────────────────────────────*/

@media only screen and (max-width: 767px) {
  /* タイトル内画像の高さを65pxに調整（スマホ用） */
  #footer_banner .title_area .title img {
    height: 65px;  /* スマホでは65pxに */
    width: auto;
  }
  /* タイトル部分の高さは自動調整（スマホ用） */
  #footer_banner .title_area .title {
    height: auto;  /* 高さ自動調整 */
  }
  /* タイトルエリアの幅は全幅に上書き（スマホ用） */
  #footer_banner .title_area {
    width: 100% !important;
  }
  /* フッターバナー2のタイトル部分の高さを65pxに固定（スマホ用） */
  #footer_banner .banner.banner2 .title_area .title {
    height: 65px !important;
  }
}


/*─────────────────────────────*/
/*         フッターボタン (モバイル)         */
/*─────────────────────────────*/

/* 1番目のフッターボタン内画像：高さ100%に合わせ、横中央配置 */
#dp-footer-bar .footer_button.num1 img {
  display: block;      /* ブロック表示で余白除去 */
  margin: 0 auto;      /* 横中央揃え */
  height: 100%;        /* 親要素の高さにフィット */
  width: auto;         /* 縦横比を維持 */
}

/*─────────────────────────────*/
/*         フッターボタン (タブレット)         */
/*─────────────────────────────*/
@media screen and (max-width:1300px) {
#footer_banner .title_area { width:100%; }
}

/*─────────────────────────────*/
/*        トップページロゴ挿入（ヘッダー）         */
/*─────────────────────────────*/
/* header_slider_catch 内の catch ブロックを、親コンテナにフィットさせる */
#header_slider_catch .catch {
  width: 100%;              /* 親コンテナの横幅に合わせる */
  height: 100%;             /* 親コンテナの高さに合わせる */
  display: flex;            /* フレックスコンテナ化 */
  align-items: center;      /* 垂直方向の中央揃え */
  justify-content: center;  /* 水平方向の中央揃え */
  overflow: hidden;         /* はみ出す部分を隠す */
}

/* catch 内の画像を、コンテナいっぱいに表示 */
#header_slider_catch .catch img {
  width: 120%;              /* コンテナの横幅にフィット */
  height: auto%;             /* コンテナの高さにフィット */
  object-fit: cover;        /* アスペクト比を維持しつつ、コンテナを埋める */
}


/*─────────────────────────────*/
/*        トップページロゴ挿入（モバイルヘッダー）         */
/*─────────────────────────────*/

/* スマートフォン向け（画面幅767px以下）の header_slider_catch 調整 */
@media only screen and (max-width: 767px) {
  /* 親コンテナの高さを固定（例：200px、必要に応じて調整） */
  #header_slider_catch {
    height: 200px;
  }
  /* 親コンテナ内のキャッチブロック（.catch）の設定：親のサイズにフィットさせる */
  #header_slider_catch .catch {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  /* キャッチブロック内の画像：親コンテナのサイズに合わせ、オブジェクトフィットで隙間なく埋める */
  #header_slider_catch .catch img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}


/*─────────────────────────────*/
/*        インタビュー記事         */
/*─────────────────────────────*/
.interview_design_content .catch_area {
  background-color: #00a551; /* 背景色を変更 */
}
/* キャッチエリア全体に内側の余白を追加して、テキストの配置領域を狭める */
.interview_design_content .catch_area {
  padding: 20px;           /* 内側余白（調整可） */
}

/* キャッチエリア内のすべての直接の子要素を一回り小さい領域に収める */
.interview_design_content .catch_area > * {
  max-width: 90%;          /* キャッチエリア全体の90%の幅に制限 */
  margin: 0 auto;          /* 中央に配置 */
}

/* サブタイトルの文字色とサイズを変更 */
.interview_design_content .catch_area .sub_title {
  font-size: 1.2em;        /* 例として少し大きめに設定（必要に応じて調整） */
  margin-bottom: 10px;     /* 下に余白を追加 */
}

/* キャッチコピー（.catch）の文字色とサイズを変更 */
.interview_design_content .catch_area .catch {
  color: #ffffff;          /* お好みの文字色に変更 */
}
#interview_content_builder { padding-top:00px; }