@charset "utf-8";
/*
Theme Name: GENESIS child
Theme URI:https://tcd-theme.com/tcd103/
Description:WordPressテーマ「GENESIS」の子テーマ
Template:genesis_tcd103
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

/*
  ここから下にCSSを追記してください。
*/

/* ============================
  共通部分
============================ */

/* ヘッダーロゴの調整 */
@media (max-width: 1100px) {
  #header_logo {
    max-width: calc(100% - 80px);
  }

  #header_logo img {
    width: 100%;
    height: auto;
  }
}

/* 透過ヘッダーを不透過に */
body.header_type2 #header {
  background-color: #fff;
}

body.header_type2 #global_menu > ul > li > a {
  color: #000;
}

body.header_type2 #drawer_menu_button span {
  background: #000;
}

/* フッターのパディング調整 */
@media (min-width: 1392px) {
  #footer_inner {
    padding: 60px 100px;
  }
}

/* フッターの各コンテンツを中央揃えに */
#footer_logo img {
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}

#footer_nav ul {
  justify-content: safe center;
}

#copyright span {
  text-align: center;
}


/* ============================
  トップページ
============================ */

/* トップページのタグラインを太字に */
#header_slider_wrap {
  font-weight: 700;
}

/* トップページの背景色を変更(既存色をより濃く) */
.cb_free_space:nth-child(even),
.cb_design_content:nth-child(even),
.cb_service_list:nth-child(even),
.cb_news_list:nth-child(even),
.cb_blog_list:nth-child(even) {
  background-color: #e0e0e0 !important;
}

/* トップページ各コンテンツのパディングの調整 */
.cb_free_space,
.cb_design_content,
.cb_service_list,
.cb_news_list,
.cb_blog_list {
  padding: 80px 0;
}

/* トップページのトップメッセージのレイアウト調整 */
#content_builder #top_message .post_col-2 {
  margin-right: 0;
}

@media (min-width: 1101px) {
  #content_builder #top_message .post_row {
    .post_col-2:first-child {
      padding-right: 8px;
    }

    .post_col-2:last-child {
      padding-left: 8px;
    }
  }
}

/* トップページ全体のクイックタグ「下線」の調整 */
.q_underline {
  line-height: 1.5;
}


/* ==============================
トップページ下部に作成したフリースペースに対する調整。
テーブルセル内にリンク+バナー画像を設定するとグリッド表示になる。
============================== */
/* .s_tableが自動で付与されるため、機能しないように調整。 */
#link_banner_table .s_table {
  overflow: unset;
  white-space: unset;
  margin-bottom: unset;
}

@media screen and (max-width: 800px) {
  #link_banner_table .s_table {
    margin-right: unset;
    margin-left: unset;
    padding: unset;
  }
}

/* テーブルをグリッドに変更。レイアウト調整をしやすくする。 */
#link_banner_table table {
  display: grid;
  grid-template-columns: repeat(auto-fit, min(360px, 100%));
  gap: 32px 64px;
  justify-content: center;
  align-items: start;
  border: none !important;
}

#link_banner_table :where(tbody, tr) {
  display: contents;
}

#link_banner_table :where(th, td) {
  width: 100% !important;
  padding: 0;
  border: none !important;
  line-height: 1.25;
}
#link_banner_table :where(th, td):empty{
display:none;
}
#link_banner_table a {
  display: grid;
  place-content: center;
  width: 100%;
  aspect-ratio: 5/2;
  padding: min(calc(40/400*100vw), 40px);
  border: 1px solid #bbb;
  background-color: #fff;
}

#link_banner_table img {
  max-width: 100%;
  max-height: 100%;
  transition: opacity 0.25s;
}

#link_banner_table a:hover img {
  opacity: 0.6;
}

#link_banner_table :where(td, th):has(img):not(:has(a)) {
  display: grid;
  place-content: center;
  width: 100% !important;
  aspect-ratio: 5/2;
  padding: min(calc(40/400*100vw), 40px);
  border: 1px solid #bbb !important;
  background-color: #fff;
}
#link_banner_table span:empty,
#link_banner_table p:empty,
#link_banner_table a + br {
  display: none;
}

/* ============================
  コンテンツページ
============================ */

/* コンテンツページのパンくずリスト下のマージン、コンテンツ下のパディング調整 */
#bread_crumb {
  margin-bottom: 80px;
}

#page_header .design_header {
  margin-bottom: 80px;
}

#page_contents {
  padding-bottom: 80px;
}


/* ============================
  事業案内カテゴリー
============================ */

/* WP管理画面、事業案内カテゴリーの説明文内で<span>もしくは<span class=detail-only>で括った部分は、
事業案内カテゴリー一覧で非表示、カテゴリーページ（記事一覧）では表示。 */
.post-type-archive-service .desc.post_content span.detail-only {
  display: none;
}

/* WP管理画面、事業案内カテゴリーの説明文内で<span class=outline-only>で括った部分は、
事業案内カテゴリー一覧で表示、カテゴリーページ（記事一覧）では非表示。 */
.tax-service_category .desc.post_content span.outline-only {
  display: none;
}


/* 見出しの調整 */
.tax-service_category .service_category_content .desc_area {
  flex-direction: column;
  margin-top: 0;
  gap: 24px;
  align-content: end;

  @media (max-width: 1100px) {
    margin-top: 60px;
  }
}

.service_category_content .header .desc {
  padding-left: 35px;
}

.tax-service_category .service_category_content .design_header {
  margin-bottom: 0;

  @media (max-width: 1100px) {
    margin-bottom: 60px;
  }
}

.tax-service_category .service_category_content .header .desc {
  padding-inline: 0 35px;
}

.service_category_content {
  padding: 80px 0;
}

.service_category_post_list {
  margin: 0 auto 100px;
}

.service_header_image + #archive_service .service_category_post_list {
  margin-top: 100px;
}

#archive_service .service_category_post_list {
  margin-top: 100px;
}

/* ============================
  事業案内記事
============================ */
@media(min-width: 1391.1px) {
  #single_service_main_content {
    padding: 80px 80px 110px;
  }
}

/* ============================
  ニュースリリース
============================ */
#archive_header {
  margin: 0 auto 100px;
}

#archive_news {
  padding: 0 100px 100px;
}

#main_content {
  padding: 0 100px 100px;
}

/*
記事ページのメインコンテンツを中央に
※ウィジェットを使用しない前提でスタイル適用。
*/
.single-news #main_content {
  justify-content: center;
}


/* ============================
  ブロックエディタ（テーブル以外）
============================ */

:where(.wp-block-columns.is-layout-flex) {
  gap: 1.5em;
}

/* マージン調整用モディファイア。個人情報保護方針や計装事業の各記事で使用。 */
.ml1e {
  margin-left: 1em !important;
}

.ml2e {
  margin-left: 2em !important;
}


/* リストマークの調整用モディファイア。個人情報保護方針で使用。 */
.post_content ul {
  list-style-type: disc;
}

/* (1) */
.post_content .paren_list {
  list-style-type: none;
  counter-reset: parentheses;
}

.post_content .paren_list > li {
  counter-increment: parentheses;
  position: relative;
  text-indent: -1.5em;
}

.post_content .paren_list > li::before {
  content: "(" counter(parentheses)") ";
}

.post_content .paren_list :where(ul, ol) li {
  text-indent: 0;
}

/* ボタンの調整用モディファイア　.adjusted-button。送信完了画面に使用。*/
.adjusted-button .wp-block-button__link {
  padding: calc(.667em + 2px) calc(1.333em + 2px);
  border: 1px solid #ddd !important;
  text-decoration: none;
  transition: 0.25s;
}

@media (any-hover: hover) {
  .adjusted-button .wp-block-button__link:hover {
    border-color: #2f3675 !important;
    color: #2f3675 !important;
    text-decoration: none !important;
  }
}

/* ブロックエディタの画像が中央揃えのときに、キャプションも中央揃えにする。 */
.wp-block-image figure.aligncenter figcaption {
  text-align: center;
}

/* プラグインで追加した「Hyperlink Group Block」のwidth調整。 */
.wp-block-tiptip-hyperlink-group-block {
  width: fit-content;
}

/* ============================
  ブロックエディタ（テーブル）
============================ */

/* 各セルの最小幅を調整 */
.post_content :where(th, td) {
  min-width: 8em;
}

@media(max-width: 800px) {
  .post_content :where(th, td) {
    min-width: 4em;
  }
}

/* 標準テーブルブロックの垂直方向の位置揃え */
.wp-block-table :where(th, td) {
  vertical-align: middle;
}


/* セルごとの背景色をリセット */
.post_content :is(td, th) {
  background-color: unset;
}

/* 標準テーブルでストライプスタイルを選択したときの背景色をtrに設定 */
/* ※Tablebergはブロックエディタで設定。 */
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: #e0e0e0;
}

/* テーブルブロックのボーダーを調整。 */
.post_content .wp-block-table td,
.post_content .wp-block-table th {
  border: none;
}

/* テーブルの外枠を設定 */
.post_content table {
  border: none !important;
  border-top: 1px solid #ccc !important;
  border-left: 1px solid #ccc !important;
}

/* セルのボーダー。右と下を設定 */
.post_content :where(td, th) {
  border: none !important;
  border-bottom: 1px solid #ccc !important;
  border-right: 1px solid #ccc !important;
}


/* テーブルブロックに「.b_table」を追加すると、画面幅800px以下で縦積みになる。 */
@media (max-width: 800px) {
  .b_table :where(th, td) {
    display: block;
    width: 100%;
  }

  .b_table tr {
    background-color: transparent !important;
  }

  .b_table tr > *:first-child {
    background-color: #e0e0e0;
  }

  .b_table tr > *:not(:first-child) {
    background-color: #fff;
  }
}


/* tablebergブロック内に設置したボタンリンクの調整 */
.wp-block-tableberg-button > .wp-block-button__link {
  padding-block: 0.5em !important;
  border: 1px solid #ddd;
  border-radius: 0;
  transition: 0.25s;
}

@media (any-hover: hover) {
  .wp-block-tableberg-button > .wp-block-button__link:hover {
    border-color: #2f3675;
    text-decoration: none;
  }
}


/* ==============================
コンタクト・フォーム7の調整
============================== */
.wpcf7 {
  background: unset;
}

.wpcf7 .wpcf7-list-item {
  display: inline;
  margin-right: 1.25em;
}

.wpcf7 .screen-reader-response p {
  margin-block: 1.5em 0;
  text-align: center;
}

.wpcf7 .contact-form {

  th {
    background-color: #e0e0e0;
    vertical-align: top;
    white-space: nowrap;

    @media(max-width: 767px) {
      display: block;
      width: 100%;
      white-space: unset;
      border-right: none !important;
      border-bottom: none !important;
    }
  }

  th .label-wrap {
    display: flex;
    gap: 1.5em;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding-block: 4px 1px;

    @media(max-width: 767px) {
      justify-content: start;
      gap: 1em;
      padding-block: 0;
    }
  }

  th .required {
    display: block;
    padding-top: 2px;
    padding-inline: 8px;
    background-color: red;
    color: white;
  }

  td {
    @media(max-width: 767px) {
      display: block;
      width: 100%;
    }
  }

  input[name=your-postal1] {
    max-width: min(25%, 4.5em);
    margin-right: 0.5em;
  }

  input[name=your-postal2] {
    max-width: min(35%, 6em);
    margin-left: 0.5em;
  }

  input:where([name=your-phone1], [name=your-fax1]) {
    max-width: min(20%, 6em);
    margin-right: 0.5em;
  }

  input:where([name=your-phone2], [name=your-fax2]) {
    max-width: min(25%, 8em);
    margin-inline: 0.5em;
  }

  input:where([name=your-phone3], [name=your-fax3]) {
    max-width: min(25%, 8em);
    margin-left: 0.5em;
  }

  textarea[name=your-address] {
    height: 10em;
    resize: none;
  }

  textarea[name=your-message] {
    resize: none;
  }
}

.form-accept {
  padding: 15px 30px;
  border: 1px solid #ddd;
  background-color: #e0e0e0;
  text-align: center;

  @media(max-width:800px) {
    padding: 14px 15px;
  }
}

.form-accept h2 {
  font-size: 24px;
}