/* ======================================
   ベース
   ====================================== */
html, body {
  height: 100%;
}

/* 全ページ共通：フッターを常に画面下端にする */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 14px;
  font-family: "Noto Sans JP","Roboto Condensed",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  color: #555;
}

/* メインコンテンツは縦方向に伸びる */
main {
  flex: 1 0 auto;
}

/* 見出しの色を統一 */
h1, h2, h3, h4, h5, h6 {
  color: #444;
}

/* TOP画像・ボタン用カスタムプロパティ */
:root {
  /* ヘッダーの概ねの高さ（px） */
  --header-height: 80px;
  /* TOP画像〜ボタン間の余白 */
  --top-hero-button-gap: 3rem;
}

/* リンク文字 */
a {
  color: #007aff;
  text-decoration: underline;
}
a:hover {
  color: #0056b3;
}

/* 汎用ユーティリティ */
.top-margin { margin-top: 100px; }
.text-left { text-align: left !important; }
.text-left h4 { text-align: left !important; }
.text-center { text-align: center !important; }
.bold { font-weight: 700 !important; }
.underline { text-decoration: underline; text-underline-offset: .125em; }
.hr { border-bottom: 3px solid #ddd; }
.inline-block { display: inline-block !important; }
.smaller { font-size: smaller; }
.letter-spacing-w10 { letter-spacing: 1.0em; }
.letter-spacing-w15 { letter-spacing: 1.5em; }
.align-self-center { align-self: center; }
.align-items-last { display: flex !important; align-items: last baseline; }

@media (min-width: 768px) {
  .flex-sm { display: flex !important; }
  .align-items-center-sm { display: flex !important; align-items: center !important; }
  .align-self-center-sm { align-self: center !important; }
}

/* 日本語spanフォールバック */
span:lang(ja) { font-family: inherit; }

/* 全体高さユーティリティ */
.full-height { min-height: 100% !important; }
.full-vh { min-height: 100vh !important; }
@media (min-width:768px) {
  .full-vh-sm { min-height: 100vh !important; }
}

/* セクション・見出し */
section { margin: 50px 0; padding: 0; }
h1 { text-align: center; margin-bottom: 3em; }
h2 { font-size: 26px; text-align: left; margin-bottom: 1.5em; }
h3, h4 { font-size: 25px; text-align: center; margin-bottom: 1.5em; }

@media (max-width: 767px) {
  body { font-size: 14px; }
  section { margin-bottom: 0; padding: 0 5px; }
  h1, h2, h3, h4 { padding: 0 5%; margin-bottom: .5em; }
  h2 { margin-bottom: 1em; font-size: 18px; }
  h3 { font-size: 16px; }
  p { padding: 0 5%; }
  li { padding-right: 5%; }
}

/* 正方形ロゴ */
.duux-sq-logo { text-align: center; }
.duux-sq-logo img { width: 50%; }

/* 見出し番号タイトル */
.numbered-title { display: flex; }
.numbered-title .title-number { width: 1.8em; }
.numbered-title .title { flex: 1; }

/* パーソナルトレーニング特徴 */
#personal-training-feature h2 { text-align: center; margin-bottom: 3em; font-size: 36px; }
#personal-training-feature h3 { font-size: 26px; text-align: left; margin-bottom: 1.5em; }

@media (max-width:767px) {
  #personal-training-feature h2 { font-size: 20px; }
  #personal-training-feature h3 { font-size: 18px; }
}

#home #personal-training-feature img { width: 80%; margin: 0 auto; }
#home #personal-training-feature img.caption-xs { width: 48%; }
#home #personal-training-feature strong { font-weight: 400; font-size: 3.5vw; letter-spacing: .15em; }
#home #personal-training-feature a { color: rgb(124,164,237); }
#home #personal-training-feature a:hover { color: skyblue; }
#home #personal-training-feature .caption-content { margin-top: 1.2em; }

/* TOPの表 */
.top-table { width: 100%; margin: 0 auto; }
table.top-table-features { border-collapse: collapse; width: 100%; }
table.top-table-features tr { border-top: 3px solid #ddd; border-bottom: 3px solid #ddd; }
table.top-table-features th { min-width: 25em; vertical-align: middle; padding: 30px 0; }
table.top-table-features td { min-width: 8em; vertical-align: middle; text-align: left; padding: 20px; }
.feature-section ul.custom-bullet li { padding-left: 20px; }
.feature-section ul.custom-bullet li::before { left: 0; }

@media (max-width:767px) {
  table.top-table-features,
  table.top-table-features tr,
  table.top-table-features th,
  table.top-table-features td { display: block; }
  table.top-table-features tr { padding: 20px 0; border-bottom: none; }
  table.top-table-features tr:last-of-type { border-bottom: 3px solid #ddd; }
  table.top-table-features th { padding: 0 10px; margin-bottom: 10px; }
  table.top-table-features td { padding: 0 20px; }
  .feature-section { margin-top: 75px; }
  .feature-section ul.custom-bullet li { padding-left: 40px; }
  .feature-section ul.custom-bullet li::before { left: 20px; }
}

/* Member Profile */
.member-profile h3 { text-align: left; }
.member-profile .official-position { display: block; font-size: 66%; }
.member-profile .name { display: block; }
.member-profile .credential { display: block; font-size: 66%; }
#member-profile p { margin: 2em 0; font-size: 14px; }
.member-image { margin-top: 145px; }

@media (max-width:767px) {
  .member-image { display: block; margin: 50px auto 0; width: 50%; }
  .member-profile { margin-bottom: 100px; }
}

/* 料金テーブル */
#training-fee { margin-top: 0; }
#training-fee img { width: 100%; vertical-align: bottom; }
table.training-fee { border-collapse: collapse; width: 100%; }
table.training-fee tr { border-top: 3px solid #ddd; border-bottom: 3px solid #ddd; }
table.training-fee th { min-width: 24em; vertical-align: middle; padding: 30px 0; }
table.training-fee td { vertical-align: middle; text-align: right; padding: 30px 0; }

/* 予約の流れ（テーブルパターン） */
#reservation-flow { margin-top: 0; }
#reservation-flow img { width: 100%; vertical-align: bottom; }
table.reservation-flow { border-collapse: collapse; }
table.reservation-flow tr { border-top: 3px solid #ddd; border-bottom: 3px solid #ddd; }
table.reservation-flow th { min-width: 12em; vertical-align: middle; padding: 30px 0; }
table.reservation-flow td { vertical-align: middle; padding: 30px 0; }

@media (max-width:767px) {
  table.reservation-flow,
  table.reservation-flow tr,
  table.reservation-flow th,
  table.reservation-flow td { display: block; }
  table.reservation-flow tr { margin-top: 1em; }
}

/* ACHIEVEMENT */
table.achievement-table {
  min-width: 840px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}
table.achievement-table caption { padding-left: 5px; font-size: 120%; }
table.achievement-table tr.border-bottom { border-bottom: 1px solid #ccc !important; }
table.achievement-table th { background-color: #999; color: #fff; text-align: center; height: 2em; }
table.achievement-table td { vertical-align: top; padding: 0 .5em; }
table.achievement-table .general-description { width: 22em; }
table.achievement-table .end-user { width: 9em; }
table.achievement-table .user-scale { width: 22em; }
table.achievement-table .construction-scale { width: 7em; }
table.achievement-table td.construction-scale { text-align: right; }
table.achievement-table .project-term { width: 6em; }
table.achievement-table td.project-term { text-align: right; }
.achievement-table-tail { text-align: right; }

@media (max-width:991px) {
  .achievement-table-wrapper { overflow-x: auto; }
  table.achievement-table tbody,
  .achievement-table-tail { font-size: 12px; }
}
@media (min-width:992px) and (max-width:1199px) {
  table.achievement-table tbody,
  .achievement-table-tail { font-size: 14px; }
}

/* OUR BUSINESS */
#our-business h3 { text-align: center; }
#our-business h3 img { width: 60%; }
.our-business-card { padding: 0 5%; }
.our-business-card ul { padding-inline-start: 20px; }
.our-business-card li::marker { vertical-align: top; }
.our-business-card p { margin-bottom: 0; }

@media (max-width:767px) {
  #our-business h3 img { width: 40%; }
  .our-business-card { margin-bottom: 100px; }
}

/* CONTACT US */
section#contact-us { margin-bottom: 0; }
#contact-us .form-group { margin: .6em 0; }
#contact-us .form-control { text-transform: none; font-size: 16px; padding: .75em; }
input.inquiry-submit-button { width: 100%; background-color: #868686; font-size: 16px; }
iframe[name='form-response'] { height: 50px; width: 100%; }

/* キャプション */
.duux-caption .caption-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-height: 600px;
  transform: translate(-50%, -50%);
}
.duux-caption img { width: 50%; margin: 0 auto; }
.duux-caption img.caption-xs { width: 48%; }

h3 img { width: 100%; }

/* オーバーレイテキスト */
.container_ex { position: relative; }
.image_ex { width: 100%; }
.text_ex {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 24px; font-weight: 700;
}

/* ステップカード */
.steps_ex { padding: 50px 0; background-color: #fff; }
.steps_ex .container_ex { display: flex; justify-content: space-between; align-items: stretch; }
.steps_ex .step_ex { display: flex; flex: 1; flex-direction: column; background: #fff; padding: 10px 30px; }
.steps_ex .step_ex h3 { display: flex; font-size: 22px; margin-bottom: 10px; text-align: left; }
.steps_ex .step_ex .step_ex_content {
  display: flex;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  border-radius: 10px 30px / 30px 10px;
  border: 3px solid #aaa;
  flex: 1 1 auto;
}
.steps_ex .step_ex .step_ex_content p { font-size: 16px; line-height: 1.6; }

/* キービジュアル（共通） */
.key-visual {
  margin: 40px 0;
  padding: 60px 0;
}
.key-visual h2 { display: none; }

@media (max-width:767px) {
  .key-visual {
    margin: 30px 0;
    padding: 40px 0;
  }
}

/* 汎用リンクボタン */
a.link-button {
  display: inline-block;
  padding: 5px 30px;
  background: #fff;
  border: 2px solid #888;
  border-radius: 50px;
  font-size: 1.25rem;
  color: #888;
  text-decoration: none;
  transition: all 0.2s ease;
}
a.link-button:hover {
  background: #888;
  color: #fff;
  border-color: #fff;
}
@media (max-width:767px) {
  a.link-button { font-size: 16px; }
}

/* トレーナー背景（旧キービジュアルから分離） */
/* 最下部アコーディオンはフッターに接するよう余白をゼロに */
#trainers {
  margin-top: 0;
  margin-bottom: 0;
}
.collapsible-section:last-of-type {
  margin-bottom: 0;
}

/* 共通画像 */
.features-common img {
  width: 80%;
  display: block;
  margin: 0 auto;
}

/* トレーニングメニュー */
#training-menu {
  margin-top: 100px;
  padding-top: 0;
}
table.top-training-menu { border-collapse: collapse; width: 100%; }
table.top-training-menu tr { border-top: 3px solid #ddd; border-bottom: 3px solid #ddd; }
table.top-training-menu th { min-width: 15em; vertical-align: middle; padding: 30px 0; }
table.top-training-menu td { min-width: 8em; vertical-align: middle; text-align: left; padding: 20px; }
table.top-training-menu td:nth-child(3){ min-width: 12em; }
table.top-training-menu td:nth-child(3) dl {
  display: flex;
  flex-wrap: wrap;
  width: 10em;
  margin-bottom: 6px;
}
table.top-training-menu td:nth-child(3) dt {
  flex: 1;
  text-align: right;
  font-weight: 400;
  min-width: 4em;
}
table.top-training-menu td:nth-child(3) dd {
  text-align: right;
  width: 4.5em;
}

@media (max-width:767px) {
  table.top-training-menu,
  table.top-training-menu tr,
  table.top-training-menu th,
  table.top-training-menu td { display: block; }
  table.top-training-menu tr {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    border-bottom: none;
  }
  table.top-training-menu tr:last-of-type { border-bottom: 3px solid #ddd; }
  table.top-training-menu th { order: 0; padding: 0 10px; margin-bottom: 10px; }
  table.top-training-menu td { padding: 0 20px; }
  table.top-training-menu td:nth-of-type(1){ order: 2; }
  table.top-training-menu td:nth-of-type(2){ order: 1; margin-bottom: 10px; }
  table.top-training-menu td:nth-of-type(2) dl { margin-left: auto; }
}

/* 特殊箇条書き */
ul.custom-bullet {
  list-style: none;
  padding-left: 0;
}
ul.custom-bullet li {
  position: relative;
  padding-left: 40px;
}
ul.custom-bullet li::before {
  content: "※";
  position: absolute;
  left: 20px;
}
ul.custom-bullet li p {
  margin: 0;
  text-indent: -1.5em;
  padding-left: 1.5em;
}

/* プレーン箇条書き */
ul.plain-list {
  list-style: none;
  padding-left: 0;
  padding-bottom: 10px;
}
ul.plain-list li {
  position: relative;
  padding-left: 1.5em;
}
ul.plain-list li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* 予約背景（必要ならここで調整） */
#reservation { }

/* 予約フロー（カード式） */
.container_procedure { margin: 0 auto; }
.step_procedure {
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  justify-content: center;
}
.step_left_procedure {
  background: #b3b3b3;
  color: #fff;
  padding: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  width: 100%;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.step_number_procedure { font-size: 50px; }
.step_title_procedure { font-size: 18px; font-weight: 700; }
.step_right_procedure {
  background: #fff;
  border: 5px solid #b3b3b3;
  padding: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(100% - 250px);
}
.step_text_procedure { line-height: 1.8; }
.step_link_procedure a:hover { text-decoration: underline; }
.container_arrow_procedure { text-align: center; }
.arrow_procedure {
  font-size: 60px;
  color: #777;
  width: 25px;
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: center;
  margin: 0;
}

@media (max-width:768px) {
  .step_left_procedure { max-width: 125px; padding: 0; }
  .step_left_procedure2 { max-width: 150px; }
  .step_number_procedure { font-size: 36px; }
  .step_title_procedure { font-size: 16px; }
  .step_right_procedure {
    max-width: calc(100% - 150px);
    padding: 20px 20px 20px 0;
  }
  .arrow_procedure { font-size: 40px; width: 15px; }
}
@media (max-width:480px) {
  .step_left_procedure { max-width: 100px; padding: 0; }
  .step_left_procedure2 { max-width: 100px; }
  .step_number_procedure { font-size: 32px; }
  .step_title_procedure { font-size: 14px; }
  .step_right_procedure {
    max-width: calc(100% - 100px);
    padding: 20px 20px 20px 0;
  }
  .arrow_procedure { font-size: 40px; width: 15px; }
}

/* フッター */
.footer {
  background: #d3d3d3;
  padding: 20px 0;
}
.footer .row { padding: 0 50px; }
.icon-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.icon-column {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-column img { width: 70px; }
.text-column { text-align: left; }
.text-column p { margin: 5px 0; }
.footer-bottom {
  text-align: center;
  padding: 10px 0;
  background: #d3d3d3;
}
.footer-a { text-decoration: none; color: #666; }

@media (max-width:767px) {
  .text-column p { margin-left: 30px; }
}

/* 画像ホバー */
.image-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.image-container img {
  transition: transform .3s ease;
  max-width: 100%;
  height: auto;
}

/* 料金ボックス */
.container_price {
  display: flex;
  width: 100%;
  justify-content: center;
}
.box_price.total_price {
  background: #b3b3b3;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  padding: 20px;
  border-radius: 15px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right-box-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.box_price {
  padding: 20px;
  border-radius: 15px;
  margin: 0 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
}
.title_price {
  font-size: 18px;
  background: #b3b3b3;
  color: #fff;
  font-weight: 700;
  padding: 10px;
  border-radius: 10px 10px 0 0;
  text-align: center;
  margin: -20px -20px 20px -20px;
}
.content_price { line-height: 1.6; }
.content_price ul { padding-left: 20px; }
.content_price li { margin-bottom: 8px; }
.operator_plus {
  display: flex;
  font-size: 30px;
  justify-content: center;
  align-items: center;
  color: #666;
  margin: 0 20px;
}

@media (max-width:1000px) {
  .container_price {
    font-size: 14px;
    flex-direction: column;
    align-items: center;
  }
  .box_price { margin: 0; }
  .box_price.total_price {
    margin-right: 0;
    margin-top: 20px;
    font-size: 16px;
    width: 100%;
    height: auto;
    writing-mode: horizontal-tb;
    transform: none;
  }
  .right-box-wrapper { width: 100%; }
  .operator_plus { transform: rotate(90deg); }
  .title_price { font-size: 16px; }
}

.highlight-red { color: #EF454A; }

/* 詳細リンク */
a.for-more-detail { color: rgb(92,140,227); }
a.for-more-detail:hover { color: skyblue; }

/* アコーディオン開時にタイトルを大きく（共通） */
.collapsible-section.is-open .collapsible-toggle-label {
  font-size: 2rem;
  text-align: center;
  width: 100%;
}