/*
Theme Name:AIDER child
Theme URI:
Description:WordPressテーマ「AIDER」の自作子テーマです。
Template: aider_tcd115
Author:Iwata Atsushi
Author URI:http://dev.ginza-au.jp/
Version:0.0.8
*/




/* ================================================
   生年月日（年・月・日）
================================================ */

#entry-with-confirm .birth-row {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

#entry-with-confirm .birth-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

#entry-with-confirm .birth-item input {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 120px !important;
}

#entry-with-confirm .birth-item .unit {
  display: inline-block !important;
  padding-left: 2px;
  font-size: 14px;
}

/* スマホでは縦並び */
@media (max-width: 600px) {
  #entry-with-confirm .birth-row {
    display: block !important;
    padding: 0 !important;
  }

  #entry-with-confirm .birth-item {
    width: 100% !important;
    margin-bottom: 10px;
  }

  #entry-with-confirm .birth-item:last-child {
    margin-bottom: 0;
  }
}

/*お問い合わせフォームデザイン*/
/* =======================================================
   Contact Form 7 — 見本通りに整列する完全版デザイン
   必須ラベルは右側で縦に揃う（落ちない・ズレない）
   dt の上下ボーダーあり、dd にボーダーなし
======================================================= */

/* フォーム全体 */
.cf7 {
  max-width: 900px;
  margin: 0 auto;
  font-size: 16px;
}

/* グリッドレイアウト（PC） */
.cf7__list {
  display: grid;
  grid-template-columns: 220px 1fr;
  column-gap: 32px;
  row-gap: 24px;
  align-items: flex-start;
}

/* -------------------------------------------------------
   dt（見出し）
   左：項目名　右：必須ラベル
   flexで左右揃え、必須ラベルは絶対に落ちない
-------------------------------------------------------- */
.cf7__list dt {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid #e0e0e0;
  padding: 16px 0;
  font-weight: 600;
}

/* 左の項目名（label-text）＝自由に伸びる */
.cf7__list dt .label-text {
  flex: 1;
  min-width: 0; /* ← 改行と落下防止の最重要設定 */
  display: block;
  line-height: 1.6;
}

/* 必須ラベル */
.cf7__required {
  background: #f9ba32;
  color: #ffffff !important;
  font-weight:bold;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  margin-left: 12px;
}

/* 任意ラベル（見本は表示しないので非表示） */
.cf7__optional {
  display: none !important;
}

/* -------------------------------------------------------
   dd（回答欄）
   → ボーダーなし
-------------------------------------------------------- */
.cf7__list dd {
  margin: 0 0 24px;
  padding-top: 8px;
  border: none;
}

/* -------------------------------------------------------
   入力フィールド共通
-------------------------------------------------------- */
.cf7__list input[type="text"],
.cf7__list input[type="email"],
.cf7__list input[type="tel"],
.cf7__list select,
.cf7__list textarea {
  width: 100%;
  border: 1px solid #ccc;
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
}

.cf7__list textarea {
  height: 160px;
  resize: vertical;
}

/* セレクトの矢印（デザイン） */
.cf7__select select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='16' height='16' fill='%23999' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
}

/* -------------------------------------------------------
   ボタン
-------------------------------------------------------- */
.cf7__button {
  text-align: center;
  margin-top: 40px;
}

.cf7__button input[type="submit"] {
  background: #555;
  color: #fff;
  padding: 14px 50px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  transition: 0.3s;
}

.cf7__button input[type="submit"]:hover {
  opacity: 0.8;
}

/* =======================================================
   スマホ最適化（幅768px以下）
======================================================= */
@media (max-width: 768px) {

  .cf7__list {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

 .cf7__list dt {
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* 左テキストは幅固定を解除 */
  .cf7__list dt .label-text {
    width: auto !important;
    flex: none !important;
    margin: 0 !important;
  }

  /* 必須ラベルを近くに寄せる */
  .cf7__required,
  .cf7__optional {
    margin-left: 0 !important;
  }

  .cf7__list dd {
    margin-bottom: 20px;
  }

  .cf7__button input[type="submit"] {
    width: 100%;
    padding: 16px 0;
  }
}

/* 見出し（dt）を Noto Sans JP に */
.cf7__list dt {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400; /* 見本と同じ 400 を使用 */
}
/* セレクトボックスを横幅いっぱいに広げる */
.cf7__select select {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
}
.cf7__list dd {
  width: 100%;
  display: block;
}
.cf7 .cf7__select select {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 14px !important; /* input と同じ値に統一 */
  box-sizing: border-box;
}
/* ===============================
   確認画面（見本レイアウト）
=============================== */

.cf7.confirm-screen {
  max-width: 900px;
  margin: 0 auto;
  font-size: 16px;
}

.cf7__confirm {
  display: grid;
  grid-template-columns: 220px 1fr;
  row-gap: 24px;
  column-gap: 32px;
  margin-top: 30px;
}

.cf7__confirm dt {
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
}

.cf7__confirm dd {
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
}

.cf7__buttons {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
}

.cf7__buttons input,
.cf7__buttons button {
  padding: 14px 40px;
  font-size: 16px;
  border-radius: 4px;
}

/* 戻るボタン */
.cf7__buttons .ua-back-btn {
  background: #ccc;
  color: #000;
}

/* 送信ボタン */
.cf7__buttons input[type="submit"] {
  background: #555;
  color: #fff;
  border: none;
}
/* 確認画面タイトル */
.confirm-title {
  font-size: 20px;
  padding: 10px 0 20px;
  text-align: center;
  font-weight: bold;
}

/* 確認画面のリスト */
.confirm-list dt {
  border-top: 1px solid #eee;
  padding: 16px 0 8px;
  font-weight: 600;
  line-height: 1.5;
}

.confirm-list dd {
  padding-bottom: 20px;
}

/* ボタン並び */
.confirm-buttons {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.btn-back,
.btn-send,
.btn-confirm {
  padding: 14px 32px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  border: none;
}

.btn-back {
  background: #ccc;
  color: #000;
  width: 300px !important;
}

.btn-send {
  background: #555;
  color: #fff;
  width: 300px !important;
}
.btn-back::before {
    content: "‹";
    font-size: 20px;
    line-height: 1;
    display: inline-block;
	margin-right: 10px;
}
.btn-send::before {
    content: "›";
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    transform: translateY(-1px);
}

@media (max-width: 713px){
.btn-back {
  width: 50% !important;
}
.btn-send {
  width: 50% !important;
}
}

/* ▼ 確認ボタンのスタイル */
.btn-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 230px;
  padding: 16px 0;
  margin: 15px auto 35px;
  background: #555;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  border: none;
}

/* ▼ ホバー時 */
.btn-confirm:hover {
  opacity: 0.8;
}

/* ▼ 矢印アイコン（CSS だけで実装） */
.btn-confirm::before {
  content: "›";          /* 右向き矢印 */
  font-size: 20px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
}

/* 必須エラー用 CSS */
.cf7-error {
  color: #f00;
  font-size: 13px !important;
  margin-top: 4px;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 400 !important;
}
/* CF7 標準エラー（メール形式 / 電話番号形式 / 再入力不一致） */
.wpcf7-not-valid-tip {
    color: #f00 !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    margin-top: 5px !important;
}

/* ================================================
   エントリーフォーム専用：確認画面ボタンデザイン
   （他フォームには一切影響なし）
================================================ */

/* ボタンのコンテナ */
#entry-with-confirm .confirm-buttons,
#cf7-with-confirm .confirm-buttons {
  margin: 50px 0 50px;
  display: flex;
  justify-content: center;
  gap: 40px;
}

/* 戻る（左矢印） */
#entry-with-confirm .confirm-buttons .btn-back::before,
#cf7-with-confirm .confirm-buttons .btn-back::before {
  content: "‹";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #fff;
  opacity: 0.9;
}

/* 送信する（右矢印） */
#entry-with-confirm .confirm-buttons .btn-send::after,
#cf7-with-confirm .confirm-buttons .btn-send::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #fff;
  opacity: 0.9;
}

/* ホバー */
#entry-with-confirm .confirm-buttons button:hover,
#entry-with-confirm .confirm-buttons .btn-send:hover,
#cf7-with-confirm .confirm-buttons button:hover,
#cf7-with-confirm .confirm-buttons .btn-send:hover {
  background: #555;
}

/* ================================================
   生年月日（年・月・日）
================================================ */

#entry-with-confirm .birth-row {
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

#entry-with-confirm .birth-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

#entry-with-confirm .birth-item input {
  width: 120px !important;
  max-width: 120px !important;
  min-width: 120px !important;
}

#entry-with-confirm .birth-item .unit {
  display: inline-block !important;
  padding-left: 2px;
  font-size: 14px;
}

/* スマホでは縦並び */
@media (max-width: 600px) {
  #entry-with-confirm .birth-row {
    display: block !important;
    padding: 0 !important;
  }

  #entry-with-confirm .birth-item {
    width: 100% !important;
    margin-bottom: 10px;
  }

  #entry-with-confirm .birth-item:last-child {
    margin-bottom: 0;
  }
}

/* ================================================
   全体フォント（必要な部分だけ）
================================================ */
#entry-with-confirm,
#cf7-with-confirm {
  font-family: 'Noto Sans JP', sans-serif !important;
}

/* ================================================
   スタッフ紹介
================================================ */
h2.user-section-title {
    font-size: 19px;
    border-bottom: solid 3px #d8d8d8;
    position: relative;
	padding-bottom: 4px;
}
h2.user-section-title:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #787878;
  bottom: -3px;
  width: 10%;
}
/* 見出しの下の余白 */
body.author .main {
  row-gap: 40px !important;
}
/* ================================================
   サービス
================================================ */
/*h2.service-section-title {
    font-size: 20px;
    border-bottom: solid 3px #d8d8d8;
    position: relative;
    padding-bottom: 4px;
    margin: 0 !important;
}
h2.service-section-title:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #787878;
  bottom: -3px;
  width: 10%;
}
*/
/* バックに薄い英語のロゴ(黄色) */
h2.service-section-title {
    font-size: 1.6em;
    padding-bottom: 4px;
    position: relative;
    font-weight: bold;
    text-align: center;
    border-bottom: none;
    margin: -1.2em 0 3.2em !important;
}
@media screen and (max-width: 991px) {
h2.service-section-title {
    margin: 1em 0 3.2em !important;
}
}
h2.service-section-title:after {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(206, 206, 190, 0.25);
    font-size: 77px;
    text-transform: uppercase;
    content: 'corporation';
    z-index: -1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    width: auto;
    display: inline-block;
}
h2.service-section-title_b {
    font-size: 1.6em;
    padding-bottom: 4px;
    position: relative;
    font-weight: bold;
    text-align: center;
    border-bottom: none;
    margin: 3.2em 0 3.2em !important;
}


h2.service-section-title_b:after {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(206, 206, 190, 0.25);
    font-size: 77px;
    text-transform: uppercase;
    content: 'Individual';
    z-index: -1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    width: auto;
    display: inline-block;
}
@media screen and (max-width: 991x) {
h2.service-section-title {
    margin: 1em 0 3.2em;
}
}
@media screen and (max-width: 669px) {
    h2.service-section-title_b {
        font-size: 1.4em;
        margin-bottom: -27px;
    }
    h2.service-section-title:after,
    h2.service-section-title_b:after {
        font-size: 2em;
        top: -12px;
    }
}
@media screen and (max-width: 430px) {
h2.service-section-title,
h2.service-section-title_b {
     font-size: 1.2em;
}
}
/* ================================================
   トップページ　サービス
================================================ */
h3.p-service-menu-title {
    font-size: 1.6em;
    position: relative;
    font-weight: bold;
    text-align: center;
    z-index: 56;
    padding-bottom: 80px;
}

h3.p-service-menu-title:after {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(206, 206, 190, 0.3);
    font-size: 77px;
    text-transform: uppercase;
    content: 'corporation';
    z-index: -1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    width: auto;
    display: inline-block;
}
h3.p-service-menu-title_b {
    font-size: 1.6em;
    position: relative;
    font-weight: bold;
    text-align: center;
    z-index: 56;
    padding-bottom: 80px;
    margin: 3em 0 0;
}

h3.p-service-menu-title_b:after {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(206, 206, 190, 0.3);
    font-size: 77px;
    text-transform: uppercase;
    content: 'Individual';
    z-index: -1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    width: auto;
    display: inline-block;
}
@media screen and (max-width: 669px) {
    h3.p-service-menu-title,
    h3.p-service-menu-title_b {
        font-size: 1.4em;
        margin-bottom: -27px;
    }
    h3.p-service-menu-title:after,
    h3.p-service-menu-title_b:after {
        font-size: 2em;
        top: -12px;
    }
}
@media screen and (max-width: 430px) {
h3.p-service-menu-title,
h3.p-service-menu-title_b {
     font-size: 1.2em;
}
}

/* ================================================
   スタッフ紹介ページのスライドショー
================================================ */
.p-author-main-profile-image {
  position: relative;
  overflow: hidden;
}

.p-author-gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}



/* ボタン本体 */
.p-author-gallery .slick-prev,
.p-author-gallery .slick-next {
    z-index: 10;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    box-shadow: none;
    position: absolute;
}

/* 背景の丸だけ別で作る */
.p-author-gallery .slick-prev::after,
.p-author-gallery .slick-next::after {
    content: "";
    position: absolute;
    top: 44%;
    left: 51%;
    width: 30px;
    height: 30px;
    background: #80af96;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transform: translate(-50%, -50%);
    z-index: -1;
}

/* 位置 */
.p-author-gallery .slick-prev {
    left: 12px;
}

.p-author-gallery .slick-next {
    right: 12px;
}

/* 矢印 */
.p-author-gallery .slick-prev:before,
.p-author-gallery .slick-next:before {
    font-size: 22px !important;
    color: #fff !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ホバー時は丸の色を変更 */
.p-author-gallery .slick-prev:hover::after,
.p-author-gallery .slick-next:hover::after {
    background: #78c94d;
	}
/* スタッフ紹介ページで画像を指定しない時のみ */
/* nofoto.png のときだけ全体調整 */
.p-author-main-profile:has(.p-author-main-profile-image img[src*="9.nofoto.png"]) 
  .p-author-main-profile-position {
  margin-bottom: 0;
}
.p-author-main-profile:has(.p-author-main-profile-image img[src*="9.nofoto.png"]) 
  ~ .p-author-main-content-item-description {
  margin-top: 0 !important;
}
/* 画像自体も非表示 */
.p-author-main-profile-image:has(img[src*="9.nofoto.png"]) {
  display: none;
}
/* プロフィールの下線表示 */
.p-author-main-profile:has(.p-author-main-profile-image img[src*="9.nofoto.png"]) 
  .p-author-main-caption {
  border-bottom: 1px solid #ddd;
}



/* =========================
   一覧ページ_個人向けサービスメニューだけ色変更
   ========================= */

/* 数字背景 */
.p-service-section--personal .p-service-cards-elements,
.p-service-section--personal .p-service-cards-elements .elements_contents,
.p-service-section--personal .p-service-cards-elements .elements_number {
  background: #9da084 !important;
}

/* 見出し hover 色 */
.p-service-section--personal .p-service-cards-item__title:hover,
.p-service-section--personal .p-service-cards-item__title:hover span,
.p-service-section--personal .p-service-cards-item__link:hover .p-service-cards-item__title,
.p-service-section--personal .p-service-cards-item__link:hover .p-service-cards-item__title span {
  background: #9da084 !important;
}


/* =========================
   個人向けサービス（下層ページ）
   ========================= */

/* SERVICE番号の背景 */
.is-personal-service .p-single-service_element_content {
  background-color: #9da084;
} 

/* 業務内容タイトル */
.is-personal-service .service_list_title {
  background-color: #9da084;
}

/* 各タイトル */
.is-personal-service .title_area {
  background-color: #9da084;
}

/* =========================
   TOPページ 個人向けサービスメニューだけ色変更
   ========================= */

/* 数字背景 */
.home .p-service-menu-title_b + .p-service-cards .p-service-cards-elements,
.home .p-service-menu-title_b + .p-service-cards .p-service-cards-elements .elements_contents,
.home .p-service-menu-title_b + .p-service-cards .p-service-cards-elements .elements_number {
  background: #9da084 !important;
}

/* 見出し 通常時 */
.home .p-service-menu-title_b + .p-service-cards .p-service-cards-item__title,
.home .p-service-menu-title_b + .p-service-cards .p-service-cards-item__title span {
  color: #9da084 !important;
}

/* 見出し hover時 */
.home .p-service-menu-title_b + .p-service-cards .p-service-cards-item__link:hover .p-service-cards-item__title,
.home .p-service-menu-title_b + .p-service-cards .p-service-cards-item__link:hover .p-service-cards-item__title span {
  color: #9da084 !important;
}