/*
Theme Name:   Corporate Standard Child Theme
Theme URI:    https://barbwire.co.jp/
Description:  Corporate Standard Child Theme
Author:       Barbwire Co., Ltd.
Author URI:   https://barbwire.co.jp/
Template:     corporate-standard-2
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --main-blue: #1a4a7c;
  --light-blue: #e6f3fa;
  --bg-gray: #f2f2f2;
  --bg-dark-gray: #e3e3e3;
  --border-gray: #ccc;
  --text-dark: #333;
  --text-dark-gray: #666;

  /* 問題解決（お悩み用） */
  --case-problem-main: #005bac;
  --case-problem-light: #bddff9;

  /* 問題解決（解決用） */
  --case-solution-main: #63b335;
  --case-solution-light: #eaf5df;
}

/* --- 全体的なタイポグラフィ --- */
body p {
  line-height: 1.7;
}

/* 共通テーブルスタイル */
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.5;
}

.wp-block-table th,
.wp-block-table td {
  border: 1px solid #99a6b3;
  padding: 12px 15px;
  vertical-align: middle;
}

/* テーブル：上をグレー */
.table-top th {
  background-color: #e6e9ed;
  text-align: center;
  font-weight: bold;
}

.table-top td {
  text-align: center;
}

/* 1文字分ぶら下げる汎用 */
.indent-1rem {
  padding-left: 1em;
  text-indent: -1em;
  margin: 0.5rem 0;
}

/* メインの青色にする */
.main-blue {
  color: var(--main-blue);
}

.v-link a {
  display: flex;
  align-items: baseline;
}

.v-link a:before {
  content: "\e5e1";
  font-family: var(--icon-font-family);
  font-size: 0.9em;
}

/* ※ ＊ で始まる注釈（フォントやや小さめ） */
.note-star {
  padding-top: 10px;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 0.95rem;
  margin: 0.5rem 0;
}

/* リスト：〇数字用 */
.list-circle-mun {
  padding-left: 0;
  margin-bottom: 1rem;
}

.list-circle-mun li {
  padding-left: 1.1em;
  text-indent: -1.1em;
  list-style-type: none;
}

.list-circle-mun li::before {
  background: none;
}

/* ・ リスト：disc */
.list-disc {
  padding-left: 1.25rem;
}
.list-disc li {
  list-style-type: disc;
}
.list-disc li::before {
  background: none;
}
/* ✓ リスト：チェック */
ul.list-check {
  list-style: none;
  padding-left: 0;
}

ul.list-check li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

ul.list-check li::before {
  content: "\e5ca";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--main-blue);
  font-weight: bold;
  font-family: var(--icon-font-family);
  background: none;
}

/* ブルー枠のボックス */
.blue-border-box {
  border: 2px solid var(--main-blue);
  padding: 25px;
  margin: 2rem 0;
  background-color: #fff;
}

.blue-border-box h4 {
  color: var(--main-blue);
  margin-bottom: 1rem;
}

.blue-border-box h4::before {
  display: none;
}

/* グレーボックス */
.gray-box {
  background-color: #e6e9ed;
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 4px;
}
.dark-gray-box {
  background-color: var(--bg-dark-gray);
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 4px;
}

/**************************************
  下層ページ h1等
 **************************************/
/*コンテンツスタート位置*/
/*固定ページ*/

body:not(.home) #main-content .entry-content > div > section:first-of-type {
  margin-top: 0rem;
}

/*投稿ぺージ*/
body:not(.home) .entry-content {
  padding-top: 7rem;
}

/*******h1スマホ 767px以下********/
@media (max-width: 767px) {
  body:not(.home) .entry-content {
    padding-top: 3.5rem;
  }
}

/***h1文字***/
body:not(.home) h1.entry-title {
  color: #fff;
  text-shadow: none !important;
}

/*背景画像 右固定 修正*/
.wp-singular .has-post-thumbnail .entry-header,
.wp-singular .has-default-thumbnail .entry-header {
  background-position: right center;
}

body:not(.home) .page-header-title {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  background-position: right center !important;
}
body.archive .page-header {
  margin-bottom: 80px;
}

body.archive .page-title,
body.wp-singular .entry-header {
  height: 250px;
  background: url("assets/images/h1_back.webp") no-repeat right center / cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  text-shadow: none;
  margin: 0;
}


/*問題解決事例・開発実績　一覧のみ適用*/
@media (max-width: 767px) {
  body.archive .page-title,
  body.wp-singular .entry-header {
    background: url("assets/images/h1_back_sp.webp") no-repeat center / cover;
  }

  body.archive .page-title {
    font-size: 34px !important;
  }
}

/*******h1スマホ 767px以下********/
@media (max-width: 767px) {
  /*上隙間消す*/
  body:not(.home) #main-content {
    padding-top: 0;
  }
  body.archive .page-title,
  body.wp-singular .entry-header {
    min-height: 150px;
    height: unset;
  }
  body.archive .page-title h1,
  body.wp-singular .entry-header h1 {
    font-size: 34px;
  }
}

/****************
　h2装飾
****************/
body:not(.home) #main-content h2.wp-block-heading {
  font-size: 20px !important;
  line-height: 1.3;
  color: #fff;
  padding: 13px 60px 13px 35px;
  background:
    url("assets/images/h2_left.png") left top / auto 100% no-repeat,
    url("assets/images/h2_right.png") right center / 80px 100% no-repeat,
    linear-gradient(to right, #003d93, #0061ae);
}


@media (max-width: 767px) {
  body:not(.home) #main-content h2.wp-block-heading {
    font-size: 20px !important;
    padding: 13px 75px 13px 30px !important;
    /* 左側: 24px 40pxサイズ固定, 右側: 70px 100%, グラデーション: auto */
    background-size:
      24px 40px,
      70px 100%,
      auto;
  }
}

/**************************
　問題解決事例・開発実績　冒頭h2セット
**************************/
body:not(.home) #main-content h2.problem {
  font-size: 24px !important;
  line-height: 1.3;
  color: #005bac;
  padding: 20px 15px !important;
  background: #d6dbe1 !important;
  text-align: center;
  position: relative; /* ▼の基準点 */
  margin-bottom: 30px; /* ▼が下の要素と重ならないよう余白を確保 */
}

body:not(.home) #main-content h2.problem::after {
  content: "▼";
  position: absolute;
  bottom: -22px; /* 位置の微調整 */
  left: 50%;
  transform: translateX(-50%);
  color: #d6dbe1; /* 背景色と同じ色に設定 */
  font-size: 24px; /* ▼のサイズ */
}

.problem_title {
  margin: -30px 0 60px 0 !important;
  font-size: 20px !important;
  border: 1px #d6dbe1 solid;
  padding: 20px;
  color: #005bac;
  font-weight: bold;
  text-align: center;
}


@media (max-width: 767px) {
  body:not(.home) #main-content h2.problem {
    font-size: 20px !important;
    text-align: left;
  }

  .problem_title {
    text-align: left;
    padding: 15px;
    font-size: 18px !important;
  }
}

/****************
　h3装飾
****************/
/* 固定ページ冒頭のリード部分 */
.lead-area h3.lead-text {
  font-size: 1.563rem;
  color: var(--main-blue);
  text-align: center;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .lead-area h3.lead-text {
    font-size: 20px;
    line-height: 1.5;
    text-align: left;
  }

  .lead-area .text-left {
    text-indent: 0em;
    padding-left: 0px;
  }
}

/* リード部分 二重線*/
.lead-area h3.lead-text span {
  text-decoration: underline double;
  display: inline-block;
  text-underline-offset: 7px;
}

/*投稿ページ*/
.single-post .entry-header .entry-meta {
  display: none;
}
.single-post .entry-content .entry-meta {
  display: flex !important;
  color: var(--b-theme-color-1);
  margin-top: 0;
}
.single h3 {
  font-size: 20px !important;
  line-height: 1.2;
  color: #005bac;
  border-left: 6px #005bac solid;
  padding: 0 0 0 15px !important;
  margin-bottom: 10px;
}
/*冒頭以外は上マージン入れる*/
.single h3 ~ h3 {
  margin-top: 40px;
}


@media (max-width: 767px) {
  .single h3 {
    font-size: 18px !important;
  }
  .single h3 ~ h3 {
    margin-top: 30px;
  }
  .lead-area h3.lead-text span {
    display: inline;
  }
}

/****************
　h4装飾
****************/
/*投稿ページ*/
.single h4 {
  color: #005bac;
  font-size: 18px !important;
  margin: 2rem 0 0 0;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}

.single h4::before {
  content: "";
  color: #005bac;
  width: 0.75rem;
  height: 0.75rem;
  background-color: #005bac;
  border-radius: 50%;
  flex-shrink: 0; /* 楕円化防止 */
  /* 1行目に合わせる微調整 */
  margin-top: 0.5rem;
}

/*h4の次のp*/
.single h4 + p {
  margin-top: 5px;
}

/**************************************
 * 投稿ページ
 **************************************/
.single section {
  margin-bottom: 5rem;
}

.single .lead-text {
  color: var(--main-blue);
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

/* ■リストの横並び */
ul.list-hz-square {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 25px;
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.5rem;
}

ul.list-hz-square li {
  display: flex;
  align-items: flex-start;
  line-height: 1.3;
  font-size: 0.95rem;
}

ul.list-hz-square li::before {
  content: "■";
  display: inline;
  color: var(--text-dark);
  font-family: sans-serif;
  background: none;
  top: unset;
  left: unset;
  width: unset;
  height: unset;
  position: static;
}

/* 画像：とりあえず大きすぎ中央寄せ */
.single .img-center {
  max-width: 700px;
  width: 100%;
  margin: 1rem auto;
  line-height: 1.6;
}

.single .img-center-wide {
  max-width: 1000px;
  width: 100%;
  margin: 1rem auto;
}

.single .img-center figcaption {
  font-size: 1rem;
}

/****************
　お知らせ一覧
****************/
.category-news .list-date {
  flex-shrink: 0;
  color: var(--b-theme-color-1);
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
}
@media (max-width: 767px) {
  .category-news article {
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }
}

/****************
　お知らせ詳細
****************/
.single-post .entry-content .entry-date {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
}

/*一覧ページに戻るテキストリンク*/
/*開発事例*/
.list_back {
  padding-top: 40px;
}
/*問題解決*/
.single-solutions .list_back {
  padding-top: 0px;
}

.list_back a {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  color: var(--b-theme-color-1);
  text-decoration: none;
  font-size: 1rem;
  position: relative;
  border-bottom: none;
  line-height: 1.5;
}

/* 矢印（左側） */
.list_back a::before {
  content: "\f591";
  display: inline-block;
  font-family: var(--icon-font-family);
  margin-right: 6px;
  transform: rotate(180deg);
  font-size: 1.5rem;
}

/* テキスト部分だけ線 */
.list_back a::after {
  content: "";
  position: absolute;
  /* 矢印(8px) + 余白(3px) = 11px 右からスタート */
  left: 26px;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: var(--b-theme-color-1);
}

.list_back a:hover {
  opacity: 0.7;
}

/****************
　開発実績　一覧調整
****************/
body:not(.home).post-type-archive .entry-content {
  padding-top: 0;
}

.post-type-archive h3 a {
  font-size: 24px;
  line-height: 1.5;
}


@media (max-width: 767px) {
  .post-type-archive article {
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .post-type-archive article .entry-header {
    width: auto;
  }
  .post-type-archive h3 {
    font-size: 20px;
    line-height: 1.5;
  }
}

/*------------------
 開発実績
 development-achievements
 ------------------*/
/* はこべるくん */
.hakoberu-columns {
  max-width: 900px;
  width: 100%;
  margin: 2rem auto auto;
}

/* 点火用高圧コイル性能検査機 */
@media (min-width: 768px) and (max-width: 999px) {
  .coil-tester-pc {
    max-width: 80%;
  }
}

/*------------------
 問題解決事例
 case-studies
 ------------------*/
.case-section h3 {
  margin: 0 !important;
  color: #fff;
  text-align: center;
  border: none;
  width: 300px;
}

.case-box {
  padding: 2rem 3rem;
  margin: 0;
  line-height: 2;
  display: flow-root;
}
.product-images > .wp-block-columns:not(:first-of-type) {
  margin-top: var(--contents-cell-margin);
}
.product-images .wp-block-image .wp-element-caption {
  font-size: 1rem;
  color: var(--font-color-base);
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}

/*外部リンク*/
.external_link a[target="_blank"]::after {
  content: "\e89e";
  font-family: "Material Symbols Outlined";
  display: inline-block;
  margin-left: 4px;
  position: relative;
  top: 3px;
  color: #005bac; /* 先ほどの青色に合わせる場合 */
}

/*白背景部位*/
.case-box .white-box {
  background-color: #fff;
  padding: 2rem;
  margin-bottom: 2rem;
  display: flow-root;
}

/*white-box下隙間調節*/
.case-box .white-box.minus_padding {
  padding-bottom: 0px !important;
}

.case-box .white-box p {
  line-height: 1.7;
}
.case-box .white-box .wp-block-columns {
  margin-bottom: 1rem;
}
.case-box .white-box h4 {
  margin-top: 1.25rem;
  margin-bottom: 0;
}
.case-box .white-box .sub-title {
  margin-bottom: 1.25rem;
}
.case-box .white-box .sub-title:not(:first-child) {
  margin-top: 3rem;
}


@media (max-width: 767px) {
  .case-box {
    padding: 2rem 1rem;
  }
  .case-box .white-box {
    background-color: #fff;
    padding: 2rem 1rem;
    margin-bottom: 0;
  }

  .case-box .white-box h4 {
    line-height: 1.5;
  }
  .case-solution h4 {
    line-height: 1.5;
  }
}

/****パーツ各種****/
/*青・緑共通*/
.case-problem h3,
.case-solution h3 {
  font-size: 20px;
  height: 50px;
  text-align: left;
  padding: 14px 0 0 20px !important;
  /* 右端を斜めにカット */
  clip-path: polygon(0 0, 93% 0, 100% 100%, 0 100%);
}

/*青　問題 背景英文字*/
.case-problem h3 {
  background-color: var(--case-problem-main);
}
.case-problem .case-box {
  background: var(--case-problem-light) url("assets/images/problem_back.png") right top / 50% auto no-repeat;
}

/*緑　解決*/
.case-solution h3 {
  background-color: var(--case-solution-main);
}
.case-solution .case-box {
  background: var(--case-solution-light) url("assets/images/solution_back.png") right top / 50% auto no-repeat;
}

/*ABC 外郭*/
.case-lead_ {
  display: flex;
  gap: 0 !important;
  margin: 0 0 30px 0;
}

/*Aアイコン*/
.case-section .case-icon {
  flex-basis: 20% !important;
  min-width: 200px;
  display: flex;
  align-items: center;
}
/*B矢印*/
.case-section .case-lead_ .arrow {
  flex-basis: 200px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*Cテキスト*/
.case_top_txt {
  flex-basis: 75% !important;
  line-height: 1.5;
  font-weight: bold;
  font-size: 1.25rem;
  margin: 0;
}

/*会社名*/
.company_title {
  font-size: 16px;
}

/*上下線テキスト*/
.case-problem .top_bottom_line {
  padding: 5px 0;
  border-top: 1px var(--case-problem-main) solid;
  border-bottom: 1px var(--case-problem-main) solid;
}

.case-solution .top_bottom_line {
  padding: 5px 0;
  border-top: 1px var(--case-solution-main) solid;
  border-bottom: 1px var(--case-solution-main) solid;
}


@media (max-width: 767px) {
  .case-section h3 {
    width: 250px !important;
  }
  .case-lead_ {
    gap: 10px !important;
  }

  .case-icon img {
    width: 50% !important;
    height: auto !important; /* アスペクト比維持 */
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .case-section .case-lead_ .arrow {
    display: none;
  }

  /*テキスト*/
  .case_top_txt {
    font-size: 18px !important;
  }

  .case-problem .case-box,
  .case-solution .case-box {
    background-size: 80% auto;
  }
}

/****サブタイトル****/
.case-problem .subtitle_bar,
.case-solution .subtitle_bar {
  font-size: 20px;
  color: white;
  border-radius: 50px;
  padding: 5px 20px;
  text-align: center;
  font-weight: bold;
  /* ↓文字の両サイド線用↓ */
  display: flex;
  align-items: center;
  justify-content: center;
}
/*問題*/
.case-problem .subtitle_bar {
  background-color: var(--case-problem-main);
}
/*解決*/
.case-solution .subtitle_bar {
  background-color: var(--case-solution-main);
}

/* 文字の両サイド線 */
.subtitle_bar::before,
.subtitle_bar::after {
  content: "";
  height: 1px;
  width: 40px;
  background-color: white;
  display: inline-block;
}


@media screen and (max-width: 767px) {
  .case-problem .subtitle_bar,
  .case-solution .subtitle_bar {
    font-size: 18px;
  }
  .subtitle_bar::before,
  .subtitle_bar::after {
    width: 30px;
  }
}

/*single h4::befor　と一部共有*/
/*青*/
.case-box h4::before {
  width: 1rem;
  height: 1rem;
}
/*緑*/
.case-solution h4::before {
  background-color: var(--case-solution-main) !important;
}
/*●ナシ*/
h4.no-circle::before {
  display: none;
}


@media (max-width: 767px) {
  /*●のズレ修正*/
  .case-box .white-box h4::before {
    margin-top: 0.3rem;
  }
  .case-solution h4::before {
    margin-top: 0.3rem !important;
  }
}

.case-box .caption-left figcaption {
  text-align: left;
  font-size: 1rem;
  line-height: 1.7;
}

/*問題*/
.case-problem h4,
.case-problem .case-lead-text,
.case-problem .bold-color {
  color: var(--case-problem-main);
}
/*解決*/
.case-solution h4,
.case-solution .case-lead-text,
.case-solution .bold-color {
  color: var(--case-solution-main);
}

.reference-photo {
  margin-bottom: 1rem;
}

.reference-photo figcaption {
  font-size: 1rem;
}

.reference-photo .icon-triangle::before,
.reference-photo figcaption::before {
  content: "▲";
  font-family: sans-serif;
}

.reference-photo .wp-block-columns {
  margin-bottom: 1rem;
}

.case-products h3 {
  background-color: unset;
  color: var(--case-solution-main);
  border-left: none;
  border-bottom: 2px solid var(--case-solution-main);
  padding: 0.5rem;
}

.case-products .products-detail {
  text-align: center;
  margin-bottom: 2.5rem;
}
.case-products .products-detail h4 {
  color: unset;
  padding: 0 0 20px 0;
  display: block;
  text-align: center;
}
.case-products .products-detail h4::before {
  display: none;
}
.case-products .products-detail .wp-block-image {
  max-width: 600px;
  width: 100%;
  margin: auto;
}

.case-products .wp-block-columns {
  margin-bottom: 1rem;
}
.case-products .detail-link {
  margin-top: 0.5rem;
}
.case-products .detail-link a::before {
  content: "> ";
  font-family: sans-serif;
}

/* 画像の回り込み（右・左） */
.case-box .alignright {
  float: right;
  margin-left: 2rem;
  margin-bottom: 1rem;
  max-width: 35%;
}

.case-box .alignleft {
  float: left;
  margin-right: 2rem;
  margin-bottom: 1rem;
  max-width: 35%;
}


@media (max-width: 767px) {
  .case-box .alignright,
  .case-box .alignleft {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-bottom: 1.5rem;
    margin-top: 0;
    order: 2;
  }
  .case-box .alignright figcaption,
  .case-box .alignleft figcaption {
    display: block;
  }
}

/* 回り込みのリセット */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/*左イラスト有カラム用 .illust_wrap*/
/* カラム全体の隙間 */
.wp-block-columns.illust_wrap {
  gap: 30px !important;
}

/* 左画像側*/
.wp-block-columns.illust_wrap > .wp-block-column:nth-child(1) {
  flex-basis: 30% !important;
  display: flex;
  align-items: center;
}

/* 右テキスト側 */
.wp-block-columns.illust_wrap > .wp-block-column:nth-child(2) {
  flex-basis: 70% !important;
}

/* 縦長に見える画像調整 */
/*ひらめきアイコン*/
.illust_wrap .img_ss img {
  width: 80% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/**スマホ**/
@media (max-width: 767px) {
  .wp-block-columns.illust_wrap {
    gap: 10px !important;
  }

  /* 縦長に見える画像調整 */
  .illust_wrap .img_s img {
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }
  /*ひらめきアイコン*/
  .illust_wrap .img_ss {
    margin-top: -10px;
  }
}

/**************************************
 * 固定ページ
 **************************************/

/* 画像の回り込み（右・左） */
.wraparound {
  display: flow-root;
}
.wraparound .alignright {
  float: right;
  margin-left: 2rem;
  margin-bottom: 1rem;
  max-width: 40%;
}
.wraparound .alignleft {
  float: left;
  margin-right: 2rem;
  margin-bottom: 1rem;
  max-width: 40%;
}

.wraparound .alignright figcaption,
.wraparound .alignleft figcaption {
  font-size: 16px; /*画像キャプション文字*/
}
.wraparound .alignright figcaption strong,
.wraparound .alignleft figcaption strong {
  font-size: 18px; /*画像キャプション文字　名前*/
}

@media (max-width: 767px) {
  .wraparound .alignright,
  .wraparound .alignleft {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-bottom: 1.5rem;
    margin-top: 0;
    order: 2;
  }
  .wraparound .alignright figcaption,
  .wraparound .alignleft figcaption {
    display: block;
  }
}

/* → 矢印リンクのリスト */
.arrow-link-list {
  margin: 0.3rem auto 1rem;
}

.arrow-link-list li {
  list-style: none;
  padding: 0;
  margin-bottom: 0.3rem;
  padding-left: 1em;
  text-indent: -1em;
}

.arrow-link-list li::before {
  background: none;
}

.arrow-link-list li a {
  color: #444;
}

.arrow-link-list li a::before {
  content: "\e5c8";
  font-family: "Material Symbols Outlined";
  font-weight: 500;
  position: relative;
  top: 2px;
}

.arrow-link-list li a:hover {
  color: var(--main-blue);
}

/* 左グレーテーブル（共通） */
.table-left {
  margin: 0 0 15px 0;
}

.table-left th {
  width: 25%;
  text-align: left;
  background-color: #e6e9ed;
  border-right: none !important;
  border-bottom: 1px #99a6b3 solid;
}

.table-left td {
  border-bottom: 1px #99a6b3 solid;
  border-left: none !important;
}

/* 斜線用　最初行、最初thのみ適用 */
.diagonal-line table tr:first-child th:first-child {
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), #99a6b3 50%, transparent calc(50% + 1px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


@media screen and (max-width: 768px) {
  .table-left {
    border: 1px #99a6b3 solid !important;
  }

  .table-left th,
  .table-left td {
    display: block;
    width: 100% !important;
    border: none !important;
  }

  .table-left th {
    padding: 10px;

    background-color: #e6e9ed;
    padding-bottom: 5px;
  }

  .table-left td {
    padding: 5px 10px 20px 10px;
    border-top: none;
  }

  /* 斜線用の高さ出す */
  .diagonal-line table tr:first-child th:first-child {
    height: 35px;
  }
}

/* 左右ラインサブタイトル */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.section-title::before,
.section-title::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background-color: var(--text-dark);
  margin: 0 1rem;
}

/*------------------
 会社案内
 company
 ------------------*/
/* 経営理念 */
.philosophy-text {
  width: 80%;
}

/* 会社概要 */
.company-overview .office-sign {
  margin-bottom: 1.5rem;
}

/* 沿革テーブル */
.table-history table {
  width: 100%;
  border-collapse: collapse;
  border-color: unset;
  border-top: 1px dashed #ccc;
}

.table-history th,
.table-history td {
  padding: 1rem;
  text-align: left;
  vertical-align: top;
  border: none;
  border-bottom: 1px dashed #ccc;
}

.table-history th {
  width: 30%;
}

@media screen and (min-width: 540px) {
  .table-history th br {
    display: none;
  }
}

@media screen and (max-width: 539px) {
  .table-history th {
    width: 100px;
    text-align: right;
  }
}

/* アクセス */
.company-access .office-parking {
  max-width: 530px;
  width: 100%;
}

.company-access .office-parking figure {
  margin-top: 0.5rem;
}

@media screen and (max-width: 767px) {
  .company-access .office-parking p {
    text-align: left;
  }
}

/*------------------
 業務案内
 business
 ------------------*/
.business-page-wrap .gray-box .wp-block-list {
  padding-left: 1rem;
}

/*チェックのリストulインデント無くす*/
@media (max-width: 767px) {
  .business-page-wrap .gray-box ul.wp-block-list.sp_space {
    padding-left: 0 !important;
  }

  .business-page-wrap ul.wp-block-list.sp_space {
    padding-left: 1.3rem !important;
  }
}

.business-page-wrap h3 {
  color: var(--main-blue);
  text-align: center;
  margin: 1.5rem auto;
  padding-bottom: 0.3em;
}

.business-page-wrap h3.dotline {
  border-bottom: 2px var(--main-blue) dotted;
}


@media (max-width: 767px) {
  .business-page-wrap h3 {
    text-align: left;
    margin: 1.5rem auto;
    /*インデント*/
    padding-left: 1.5em;
    text-indent: -1.4em;
    font-size: 1.25rem;
  }
}

/* こんな方のお役に立ちます！ */
.business-target h4 {
  color: var(--main-blue);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .business-target h4 {
    font-size: 18px;
  }
}

.business-target .gray-box {
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
}

.business-target .gray-box .section-title {
  font-size: 1.2rem;
  color: var(--main-blue);
}

.business-target .gray-box .section-title::before,
.business-target .gray-box .section-title::after {
  width: 2rem;
  background-color: var(--main-blue);
}


@media (max-width: 767px) {
  .business-target .gray-box {
    padding: 1.5rem;
  }

  .business-target .gray-box .section-title {
    font-size: 1.1rem;
  }

  .business-target .gray-box .section-title::before,
  .business-target .gray-box .section-title::after {
    display: none;
    line-height: 1.5;
  }
}

.business-target .dark-gray-box {
  margin-top: 0;
  border-radius: 0 0 4px 4px;
}

.business-target ul.list-check {
  max-width: 850px;
  width: 100%;
}
.business-target ul.list-check li::before {
  color: var(--text-dark);
}

.business-target .dark-gray-box p {
  max-width: 820px;
  width: 100%;
  margin: auto;
}

/* コスモテックが選ばれる3つの理由 */
.business-strengths > div > section {
  margin-bottom: 4rem; /*5rem*/
}

@media (max-width: 767px) {
  .business-strengths > div > section {
    margin-bottom: 3rem;
  }
}

.business-strengths .lead-text {
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .business-strengths .lead-text {
    font-size: 1.1rem;
  }
}

.business-strengths h4 {
  color: var(--main-blue);
  font-size: 1.25rem;
}

@media (max-width: 767px) {
  .business-strengths h4 {
    font-size: 18px;
    margin-top: 1rem;
  }
}

.business-strengths h4::before {
  font-family: sans-serif;
}

.business-strengths h5 {
  font-size: 1.1em;
  margin-top: 2rem;
}
.business-strengths h5::before {
  content: "・";
}

.business-skill.wp-block-columns {
  gap: 1.5rem;
}

.business-strengths .gray-box .section-title {
  font-weight: bold;
  display: block;
}

.business-strengths .gray-box .section-title::before,
.business-strengths .gray-box .section-title::after {
  display: none;
}

/* 日本はんだ付け検定 */
.cert-wrapper {
  border-top: 1px solid var(--border-gray);
  border-bottom: 1px solid var(--border-gray);
  padding: 2rem 1rem;
  margin: 1.5rem 0;
  max-width: 800px;
  width: 100%;
}

.development-exam {
  border: 1px solid var(--border-gray);
  padding: 1rem;
}

.cert-wrapper .wp-block-columns {
  gap: 1.5rem;
}

.business-page-wrap .wp-block-list.arrow-link-list {
  padding-left: 0.5rem;
}
.business-onsite-visit .wp-block-list {
  padding-left: 1rem;
}

.business-onsite-visit li {
  margin-bottom: 0.5rem;
}
.business-onsite-visit figcaption {
  text-align: left;
  font-size: 0.9rem;
}

.wraparound .arrow-link-list {
  margin-top: 1rem;
}

/* 主な開発⼿段 */
.business-methods .gray-box {
  padding: 1.5rem 2rem;
}
.business-methods .border-box {
  border: 1px solid var(--border-gray);
  padding: 1.5rem 2rem;
  line-height: 2;
  display: flex;
  align-items: center;
}
.business-methods .gray-box h5 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--text-dark);
  display: inline-block;
}
.business-methods .gray-box .gray-box-stl {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.business-methods .gray-box ul {
  margin-top: 0;
}
.business-methods .gray-box li {
  margin-bottom: 0.3rem;
}

/****スマホ カラム gap調節*****/
@media (max-width: 767px) {
  .gap_adjustment {
    gap: 25px;
  }
}

/* 開発環境 */
.business-environment h4 {
  font-size: 1.1rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

.business-environment .wp-block-list {
  padding-left: 0;
  margin-top: 0;
}
.business-environment li {
  list-style-type: none;
}
.business-environment li::before {
  background: none;
}
.business-environment .list-dia {
  padding-left: 0.5rem;
}
.business-environment .list-dia li::before {
  content: "◆";
  position: relative;
  top: 0px;
  left: -6px;
}
.business-environment .list-dia li {
  padding-left: 1rem;
  text-indent: -0.5rem;
  margin-bottom: 0.5rem;
}

/*******画像のfigure　スマホ 767px以下 ********/
@media (max-width: 767px) {
  #main-content .wp-block-image.alignleft,
  #main-content .wp-block-image.alignright {
    margin: 0 auto 20px auto;
  }
}

/*------------------
 採用情報
 recruit
 ------------------*/
/* 代表メッセージ */
#main-content .recruit-page-wrap section.recruit-message {
  margin-top: 3.5rem;
}

.president_wrap {
  background: #e6e9ed;
  padding: 30px 30px 40px 30px;
}

/*リード文*/
.president_wrap .read_txt {
  font-size: 18px;
  font-weight: bold;
}

/*チェックリスト枠*/
.president_wrap .check_wrap {
  width: 600px;
  gap: 20px;
}

/*チェックリスト下の隙間調節*/
.president_wrap .space_padding {
  padding-top: 20px;
}

/*名前段落*/
.president_wrap .president_name {
  text-align: center;
}
.president_wrap .president_name span {
  font-size: 18px;
  font-weight: bold;
}
/****PC用*****/
@media (min-width: 768px) {
  .president_wrap .president_name {
    padding-top: 20px;
  }
}
/****スマホ *****/
@media (max-width: 767px) {
  .president_wrap {
    background: #e6e9ed;
    padding: 20px 20px 30px 20px;
  }

  .president_wrap .check_wrap {
    gap: 0;
  }
  .president_wrap .president_name {
    text-align: right;
  }
}

.wraparound .alignleft.gray-box,
.wraparound .alignright.gray-box {
  padding-bottom: 1rem;
}

.wraparound .alignleft.gray-box figcaption,
.wraparound .alignright.gray-box figcaption {
  display: block;
  font-size: 1.25rem;
  color: var(--font-color--base);
  line-height: 1.5;
  margin-bottom: 0;
}

.wraparound .alignleft.gray-box figcaption::first-line,
.wraparound .alignright.gray-box figcaption::first-line {
  font-size: 1rem;
}

/*事業紹介見出しテキスト*/
.recruit_midashi {
  color: #005bac;
  font-size: 20px;
}

/* 働く環境について */
.recruit-environment .lead-text {
  font-weight: bold;
  font-size: 1.25rem;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .recruit-environment .alignright {
    max-width: 30%;
  }
}

.recruit-environment .section-title {
  font-weight: bold;
  margin-top: 2rem;
}

.recruit-environment .wp-block-columns {
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

/* 選考 */
.recruit-apply {
  margin-top: 3.5rem;
  text-align: center;
}

.recruit-apply .wp-block-button {
  margin: auto;
  width: 100%;
  max-width: 300px;
}

.recruit-apply .wp-block-button:hover {
  opacity: 0.9;
}

/*採用テーブル内箇条書き*/
/* 親のspanをブロック要素にして隙間を調整 */
/* 親のspanをブロック要素にして隙間を調整 */
span.custom-list {
  display: block;
  padding: 5px 0;
}

/* 中の各行を縦に並べ、2行目をインデント（頭揃え）にする */
span.custom-list > span {
  display: block;
  padding-left: 0.6em; /* ①全体の左側にスペースを作る */
  text-indent: -0.6em; /* ②1行目（・）だけを左に戻す */
  margin-bottom: 4px;
}

/* 最後の行の余白をリセット */
span.custom-list > span:last-child {
  margin-bottom: 0;
}

/*************
サイトマップ
*************/
ul.sitemap-list {
  padding-bottom: 20px;
}
.sitemap-list li {
  margin-top: 0.4em;
}
/**スマホ***/
@media (max-width: 767px) {
  ul.sitemap-list {
    padding-left: 20px !important;
  }
  .sitemap-list li {
    line-height: 1.5;
    margin-top: 0.65em;
  }

  /* 最後の行だけ余白を消す */
  .sitemap-list li:last-child {
    margin-bottom: 0;
  }
}

/* 1行目●の色変更 */
.sitemap-list > li::before {
  background: #005bac;
}

/* 2行目以降のスタイル設定 */
.sitemap-list ul {
  padding-left: 0;
}
.sitemap-list ul li {
  padding-left: 1.2em;
  position: relative;
}

/* ＞の装飾 */
.sitemap-list ul li::before {
  content: "\e5e1";
  font-family: "Material Symbols Outlined";
  position: absolute;
  top: 3px;
  left: 0;
  color: #005bac;
  display: inline;
  font-size: 0.8em;
  /* テーマ側装飾を消す */
  background: none;
}

/**スマホ***/
@media (max-width: 767px) {
  .sitemap-list li:not(:first-child)::before {
    top: 0.45em; /* 1行目の文字の高さに */
  }
}

/*外部リンクの後にアイコン表示 */
.sitemap .entry-content a[target="_blank"]::after {
  content: "\2197"; /* 右上矢印の特殊文字*/
  display: inline-block;
  margin-left: 4px;
  font-size: 0.8em;
  color: #005bac; /* 先ほどの青色に合わせる場合 */
}

/* リンクの下線と色をリセット */
.sitemap-list a {
  text-decoration: none !important;
  color: inherit !important;
}

/* ロールオーバー*/
.sitemap-list a:hover {
  opacity: 0.6 !important;
}

/*hr*/
.sitemap hr.wp-block-separator.is-style-wide {
  border-width: 3px 0 0 0;
  border-color: #a0c4e8;
  border-style: dotted;
  margin: 0;
}

/*------------------
 フォーム
 ------------------*/

#main-content .wpcf7-form h2 {
  margin-top: 4rem !important;
}

.wpcf7-form input[type="number"],
.wpcf7-form input.number-field {
  width: 5em;
}

.wpcf7-form input.short {
  width: 5em;
}

.wpcf7-form .required-after:after {
  content: "※";
  color: #ca2626;
}

.wpcf7-form .contact-row {
  display: grid;
  grid-template-columns: 400px 1fr;
  margin: 0;
  padding: 0 !important;
  align-items: center;
}

.wpcf7-form .contact-row > div {
  padding: 1rem 1.5rem;
  justify-self: stretch;
  align-self: stretch;
}

.wpcf7-form .contact-row > div:first-child {
  font-weight: bold;
  display: grid;
  place-content: center;
}

.wpcf7-form .contact-row > div:last-child {
  padding-left: 1em;
}

.wpcf7-form .contact-row > div > div:not(:last-child) input {
  margin-bottom: 0.5rem;
}

.wpcf7-form .contact-row p {
  margin-bottom: 0;
}

.wpcf7-form .wpcf7-checkbox .wpcf7-list-item {
  display: block;
}

.contact-row .multi-lines > div {
  margin-bottom: 1rem;
}

.contact-row:first-of-type {
  border-top: 1px dotted #99a1af;
  padding-top: 1rem;
}

form .contact-row {
  border-bottom: 1px dotted #99a1af;
}

form .wpcf7-submit {
  background: var(--b-theme-color-1);
}

form .wpcf7-submit:disabled {
  background: #90a1b9;
}

.wpcf7 form.invalid .wpcf7-response-output {
  margin-top: 2rem;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.contact-row > div:has(.wpcf7-not-valid-tip) {
  padding-bottom: 2rem;
  position: relative;
}

.wpcf7-form-control-wrap:has(.wpcf7-not-valid-tip) {
  position: static;
}
.wpcf7-checkbox-with-input {
  padding-left: 0;
  margin-left: 1rem;
}
.wpcf7-checkbox-with-input li:before {
  display: none;
}

.wpcf7-form .top-mark .with_input_wrap:after {
  content: " 型";
}

.wpcf7-form .is-layout-flex {
  gap: 0.5rem 1rem;
}
.wpcf7-form .is-layout-flex > * {
  margin-top: 0;
  margin-bottom: 0;
}

form .agreement {
  background: #d6dbe1;
}

.wpcf7-list-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

.wpcf7-list-item input[type="checkbox"] {
  margin-top: 0.25em;
  flex-shrink: 0;
}

.wpcf7-list-item-label {
  display: inline-block;
}

@media (max-width: 919px) {
  body.consultation input {
    width: auto;
    max-width: 100%;
  }
  .wpcf7-form .contact-row {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .wpcf7-form .zip input,
  .wpcf7-form .name input {
    width: auto;
  }

  .wpcf7-form .name input {
    width: 35%;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  .wpcf7-form .contact-row > div:first-child {
    place-content: start;
  }
}
@media (max-width: 767px) {
  .wpcf7-checkbox-with-input li {
    display: flex;
  }
  .wpcf7-checkbox-with-input li label {
    flex-shrink: 0;
  }
  .wpcf7-form .cbi-free-input {
    width: 80%;
  }
  form .agreement {
    padding: 1rem;
  }
}