/*
Theme Name:QUALIA child
Theme URI:https://tcd-theme.com/tcd114
Description:WordPressテーマ「QUALIA」の子テーマ
Template:qualia_tcd
Author:TCD
Author URI:https://tcd-theme.com/
Version:1.0
*/

@charset "utf-8";
@import url("../portal_tcd114/style.css");

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

/*-------------------------------------------------
　仮CSS
-------------------------------------------------*/

.cvfb-item-select .cvfb-desc {
  display: none !important;
}
input.cvfb-text, input[type="text"].cvfb-text {
  box-shadow: none !important;
}
.cpb-posted-area {
  line-height: 1.8;
}

/*-------------------------------------------------
　フォントスタイル（要最終チェック）
-------------------------------------------------*/

/* テーマ全体の設定（固定ページ・投稿ページ・カスタム投稿タイプに反映） */
:root, ::before, ::after {
  --tcd-base-font-color: #282828;
  --tcdce-base-line-height-pc: 2.2;
  --tcdce-base-line-height-sp: 2;
}
/* フロントページ（フリースペース） */
.p-cb-free-content {
  --tcdce-base-line-height-pc: 2.2;
  --tcdce-base-line-height-sp: 2;
}
/* LP専用の設定 */
.p-lp-body {
  --tcdce-base-line-height-pc: 2.2;
  --tcdce-base-line-height-sp: 2;
}

/*-------------------------------------------------
　追加フォントカラー
-------------------------------------------------*/

/* レッド */
span.red {
  color: #e2041b;
}

/*-------------------------------------------------
　テスト中
-------------------------------------------------*/

/* 固定ページ・投稿ページ・カスタム投稿タイプの横幅（930px→880px） */
.l-contents {
  inline-size: min(calc(100% - 40px), var(--tcd-base-container-size), 880px);
}


.l-container {
  padding-block: var(--tcd-layout-container-padding-pc, 80px);
}
@media (max-width: 991px) {
.l-container {
  padding-block: var(--tcd-layout-container-padding-sp, 40px);
  }
}

.p-cb {
  row-gap: 80px;
}
@media (max-width: 767px) {
.p-cb {
  row-gap: 40px;
  }
}

/*-------------------------------------------------
　フロント＋全体：ヘッダーメッセージ★完了
-------------------------------------------------*/

/*【備考】背景色#5e6973はアクセントカラー＋#000の50％透過の色を指定 */
/* テキスト */
.p-header-message {
  font-size: 16px;
  font-weight: 500;
}
/*【767px以下】テキスト */
@media (max-width: 767px) {
.p-header-message {
  min-height: 50px;
  font-size: 15px;
  }
}

/*-------------------------------------------------
　フロント＋全体：ヘッダーバー★完了
-------------------------------------------------*/

/* スクロール時（ロゴ＋メニュー＋ハンバーガーに一括反映） */
/*【備考】is-pre-scroll-stickyを親テーマと同じ横並びにしないとモバイル表示で反映されないので注意 */
[data-header-bar-transparent][data-sticky-header="1"].is-pre-scroll-sticky {
  --tcd-header-base-font-color: #999;
}
/* ホバー時（ロゴ＋メニュー＋ハンバーガーに一括反映） */
@media (any-hover: hover) {
[data-header-bar-transparent]:hover {
  --tcd-header-base-font-color: #999;
  }
}
/* 各ページ共通（ロゴ＋メニュー＋ハンバーガーに一括反映） */
.p-header-bar {
  color: var(--tcd-header-base-font-color, #999);
}

/*-------------------------------------------------
　サイトボタン★完了
-------------------------------------------------*/

/* サイズ調整 */
/*【備考】テキストは日本語全角5文字（英字8文字）で折り返し（※106） */
.p-side-button {
  grid-template-columns: 106px;
  grid-auto-rows: minmax(106px, max-content);
}
/* デザイン調整 */
/*【備考】追加CSS（font-size＋text-align＋line-height）※（15px） */
.p-side-button-item {
  writing-mode: horizontal-tb;
  padding-inline: 15px;
  font-size: 15px;
  text-align: center;
  line-height: 1.2;
}

/*-------------------------------------------------
　フロント：ヘッダーコンテンツ★完了
-------------------------------------------------*/

/*【767以下】サブコピー説明文（14px→15px＋サブコピーを右寄せ） */
@media (max-width: 767px) {
.p-mv1-content-desc {
  font-size: 15px;
  text-align: left;
  }
}
/* ニュースティッカー（日付を非表示にする下処理） */
.p-news-ticker-item {
  column-gap: 0px;
}
/* ニュースティッカー日付 */
.p-news-ticker-item .c-date-item {
  display: none;
}

/*-------------------------------------------------
　フロント：3列バナー★完了
-------------------------------------------------*/

/* 小見出し説明文（個別指定） */
/*【備考】他のパーツ（3点バナー22px→17px＋グリッドレイアウト26px→19px※変更不可＋フッター4列バナー24px→19px）とのバランスで決定 */
.p-index-3banner-item-text-subtitle {
  color: #999;
}
/*【991以下】見出しタイトル */
@media (max-width: 991px) {
.p-index-3banner-item-text-title {
  font-size: 17px;
  }
}

/*-------------------------------------------------
　フロント：グリッドレイアウト★完了
-------------------------------------------------*/

/* 画像の高さ調節（570px→370px） */
.p-cb-grid {
  grid-template-rows: 370px;
}
/*【767以下】画像の高さ調節（290px→200px） */
@media (max-width: 767px) {
.p-cb-grid {
  grid-template-rows: 200px;
  }
}
/* グラデーション廃止（色設定はTCDのカスタマイザーから変更可能※透明度20％指定） */
.p-cb-grid-content {
  background: color-mix(in srgb, var(--tcd-cb-grid-item-overlay-color) 20%, transparent);
}
/* 説明文の太さを変更（600px→400p） */
.p-cb-grid-content-desc {
  font-weight: 400;
}

/*-------------------------------------------------
　フロント：コンテンツ（投稿スライダー）★完了
-------------------------------------------------*/

/* デザイン調整（日付の非表示の処理） */
.p-post-cards-item__content {
  row-gap: 0px;
}
/* 日付 */
/*【備考】c-date-itemとc-date--publishを繋げないと反映されないので注意 */
.c-date-item.c-date--publish {
  display: none;
}

/*-------------------------------------------------
　フッター：4列バナー★完了
-------------------------------------------------*/

/* グラデーション廃止（色設定はTCDのカスタマイザーから変更可能※透明度20％指定） */
.p-footer-4banner-item-content {
  background: color-mix(in srgb, var(--tcd-footer-4banner-bg-color) 20%, transparent);
}
/* 見出し英文（3点バナー＋グリッドレイアウト＋4列バナーとのバランスで決定） */
.p-footer-4banner-item-title {
  font-size: 24px;
}
/*【767以下】見出し英文 */
@media (max-width: 767px) {
.p-footer-4banner-item-title {
  font-size: 19px;
  }
}

/*-------------------------------------------------
　フッター：バナー★完了
-------------------------------------------------*/

/* 余白を調整（40px→25px） */
.p-footer-banner-list-item {
  column-gap: 25px;
}

/*-------------------------------------------------
　パンくずリスト★完了
-------------------------------------------------*/

/* 表示地点のテキスト */
.c-breadcrumb__item>:where(span) {
  display: none;
}
/*【991px以下】表示地点のテキスト */
@media not all and (max-width: 991px) {
.c-breadcrumb__item>:where(span) {
  display: none;
  }
}

/*-------------------------------------------------
　ボタン：QUALIA★完了
-------------------------------------------------*/

/* テーマ専用（フリースペースにHTMLでテーマのボタンを直書きした場合のリンク色と下線の処理） */
.c-button {
  color: var(--tcd-button-font-color, #ffffff);
  text-decoration: none;
}
/* ホバー時（テーマ側をEDTOR基準のホバー明→暗の仕様に合わせる） */
@media (any-hover: hover) {
.c-button:hover {
  background: color-mix(in srgb, var(--tcd-accent-color) 70%, #000000);
  }
}

/*-------------------------------------------------
　囲み枠：ORIGINAL★完了
-------------------------------------------------*/

/* シンプル囲み枠 */
/*【備考】EDITORは細かな調整が効かないのでオリジナルで作成 */
.simple_box {
  margin-top: 40px;
  margin-bottom: 40px;
  padding: 25px 28px;
  font-size: 16px;
  line-height: 2.1;
  border: 1px solid #f88080;
}
@media (max-width: 767px) {
.simple_box {
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 20px 18px;
  font-size: 15px;
  line-height: 1.9;
  }
}

/*-------------------------------------------------
　レイアウト 1｜TCD PARTS
-------------------------------------------------*/

/*【767px以下】余白 */
@media (max-width: 767px) {
.p-sc-design1-item-content {
  padding: 30px 20px;
  }
}
/* タイトル */
.p-sc-design1-item-content-title {
  font-size: 20px;
}
/*【767px以下】タイトル */
@media (max-width: 767px) {
.p-sc-design1-item-content-title {
  font-size: 16px;
  }
}
/* 説明文 */
.p-sc-design1-item-content-desc {
  font-size: 15px;
  line-height: 2;
}
/*【767px以下】説明文 */
@media (max-width: 767px) {
.p-sc-design1-item-content-desc {
  line-height: 1.9;
  }
}

/*-------------------------------------------------
　FAQ｜TCD PARTS
-------------------------------------------------*/

/* 背景色 */
.p-voice-list-item {
  background: #fbfbfb;
}
/* 開閉スピード */
.p-voice-list-item-title-content {
  transition: grid-template-rows 0.6s ease;
}
/*【767px以下】タイトル */
@media (max-width: 767px) {
.p-voice-list-item-title {
  font-size: 15px;
  }
}
/* 文字サイズ変更 */
.p-voice-list-item-title-content-text .tcdce-body {
  font-size: 15px;
  line-height: 2;
}
/*【767px以下】文字サイズ */
@media (max-width: 767px) {
.p-voice-list-item-title-content-text .tcdce-body {
  font-size: 14px;
  line-height: 1.9;
  }
}

/*-------------------------------------------------
　Contact Form 7
-------------------------------------------------*/

/* 全体の余白 */
.wpcf7 form {
  margin: 1.5em 2.5em 0;
}
/*【767px以下】フォームデザイン調整（モバイル表示で左右のボーダー廃止するための処理） */
@media screen and (max-width: 767px) {
.wpcf7 form {
  margin: 1.5em 0 0;
  line-height: 2;
 }
}
/* 【余白保留】フォーム送信前と送信後のデザイン調整（フォーム上下の余白と背景を白に変更） */
.wpcf7 {
  padding: 10px 0 10px;
  background: #fff;
}
/*【767px以下】デザイン調整 */
@media screen and (max-width: 767px) {
.wpcf7 {
  border: none;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
 }
}
/* フォーム間の余白 */
.wpcf7 p:not([class]) {
  margin-bottom: 1em;
}

/*【767px以下】テキストサイズ */
@media (max-width: 767px) {
.wpcf7 p {
  font-size: 15px;
 }
}

/* 入力エリア（テキストは15pxに固定） */
.wpcf7 input {
  padding: 8px 10px;
  border: 1px solid #ddd;
  line-height: 1.2;
  font-size: 15px;
}
/* メッセージエリア（テキストは15pxに固定） */
.wpcf7 textarea {
  height: 200px;
  padding: 10px;
  line-height: 1.8;
  font-size: 15px;
  border: 1px solid #ddd;
}
/* 送信ボタン */
.wpcf7 .wpcf7-submit {
  margin: 0;
  width: 180px;
  height: 50px;
  background: #484848;
  font-size: 15px;
}
/*【767px以下】送信ボタン */
@media screen and (max-width: 767px) {
.wpcf7 .wpcf7-submit {
  font-size: 14px;
  }
}
/* 送信後の処理（送信後にフォームを非表示にする） */
.wpcf7-form.sent p {
  display: none;
}
/* 送信完了（送信後にテキストカラーを変更） */
.wpcf7-form.sent {
  color: #228b22;
  font-weight: 500;
}