@charset "utf-8";
/* ==========================================================
   旧デザインの下層ページ（固定ページ：.second）の統一調整
   読み込み：libs/second-functions.php（全ページ・main.css の後）
   ・見出し：下層ページ共通の階層ルール
       h1（メインビジュアルのタイトル）
       h2（.content__title／本文の h2）… 赤が走るグラデーション文字＋赤い下線
       h3（.sub_content__title／本文の h3）… 赤い箱＋赤い矢印
       h4（本文の h4）… 左に赤い線
       h5（本文の h5）… 赤い小さな四角＋太字
     グラデーション見出し（.csd-heading／.csd-gradient-title）は導入事例・コラムと共通の部品
     アニメーション開始：js/heading.js
   ・セクションの上下余白を統一（広すぎない間隔）
   ・会社概要の会社情報（.company-dl）
   ・サービス概要（parts/service-summary.php）・関連サービス（parts/related-services.php）
   ・プロ選手紹介の名前（.player__list__name-h）
   ・スマートフォン：文字サイズ・行間・余白・タップ領域
   ・全ページ共通：メインビジュアルの h1、グローバルナビの「お問い合わせ」
   ※ .second で始まるルールは導入事例・コラム（新デザイン）には影響しません
   ========================================================== */

.second {
  --sec-red: #b21100;
  --sec-red2: #e23a28;
  --sec-ink: #242424;
  --sec-line: #d8d8d8;
  --sec-gray: #f4f2f1;
}

/* ---------- グラデーション見出し（全ページ共通の部品） ----------
   <div class="csd-heading"><h2 class="csd-gradient-title">見出し</h2></div>
   画面に入ると js/heading.js が .is-visible を付与 → 下線が伸び、赤い文字色が流れる
   （導入事例・コラムは親要素の .reveal.is-visible でも動作）
*/

.csd-heading {
  display: flex;
  position: relative;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 34px;
  padding-bottom: 20px;
}

.csd-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #b21100, #e23a28, transparent);
}

.is-visible .csd-heading::after,
.csd-heading.is-visible::after {
  width: 100%;
  transition: width 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s;
}

.csd-heading h2 {
  font-size: clamp(25px, 3vw, 39px);
  font-weight: 800;
  line-height: 1.42;
}

.csd-gradient-title,
.second .main__container__content h2:not([class]) {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  background: linear-gradient(100deg, #111 0 42%, #b21100 53%, #e23a28 68%, #111 79%);
  background-size: 230% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 既存レイアウト内の見出し用：text-align に従う */
.csd-gradient-title--inline {
  display: inline-block;
  width: auto;
}

.is-visible .csd-gradient-title,
.csd-gradient-title.is-visible,
.second .main__container__content h2:not([class])[data-visible] {
  animation: csdHeadingColor 6.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s infinite;
}

@keyframes csdHeadingColor {
  0%,
  3% {
    background-position: 100% 0;
  }
  24%,
  99.99% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

/* ---------- 見出し h2 ---------- */

/* .csd-heading の中の既存見出し：赤い帯・黒い下線と矢印をリセット（下線は .csd-heading） */
.second .content__title,
.second .csd-heading > .detail__title {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

.second .csd-heading > .detail__title {
  font-size: clamp(22px, 2.4vw, 32px);
}

.second .csd-heading > .detail__title::before,
.second .csd-heading > .detail__title::after {
  content: none;
}

.second .csd-heading--detail {
  margin-top: .8em;
}

/* 本文（エディター）の h2 */
.second .main__container__content h2:not([class]) {
  position: relative;
  margin: 0 0 28px;
  padding: 0 0 16px;
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .02em;
}

.second .main__container__content h2:not([class])::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sec-red), var(--sec-red2), transparent);
}

/* ---------- 見出し h3：赤い箱＋赤い矢印 ---------- */
/* コラム詳細の本文見出し（.clm-section__title）も同じ */

.second .sub_content__title,
.second .main__container__content h3:not([class]),
.clm-detail .clm-section__title {
  position: relative;
  margin: 0 0 1.9em;
  padding: .45em .8em;
  border: 0;
  border-bottom: 3px solid #7a0c00;
  background: var(--sec-red, #b21100);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.second .sub_content__title::before,
.second .main__container__content h3:not([class])::before,
.clm-detail .clm-section__title::before,
.second .sub_content__title::after,
.second .main__container__content h3:not([class])::after,
.clm-detail .clm-section__title::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
}

.second .sub_content__title::before,
.second .main__container__content h3:not([class])::before,
.clm-detail .clm-section__title::before {
  left: 54px;
  border: 17px solid transparent;
  border-top: 19px solid #7a0c00;
}

.second .sub_content__title::after,
.second .main__container__content h3:not([class])::after,
.clm-detail .clm-section__title::after {
  left: 58px;
  border: 13px solid transparent;
  border-top: 15px solid var(--sec-red, #b21100);
}

/* ---------- 見出し h4：左に赤い線 ---------- */

.second .main__container__content h4:not([class]) {
  position: relative;
  margin: 2em 0 .9em;
  padding: 2px 0 2px 16px;
  border-left: 4px solid var(--sec-red);
  color: var(--sec-ink);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.6;
}

/* ---------- 見出し h5：赤い小さな四角＋太字 ---------- */

.second .main__container__content h5:not([class]) {
  position: relative;
  margin: 1.6em 0 .7em;
  padding: 0 0 0 18px;
  color: var(--sec-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}

.second .main__container__content h5:not([class])::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 2px;
  width: 8px;
  height: 8px;
  background: var(--sec-red);
}

.second .main__container__content :is(h3, h4, h5):not([class]):first-child {
  margin-top: 0;
}

/* ---------- セクションの上下余白（広すぎない間隔に統一） ---------- */

.second .content + .content {
  margin-top: 64px;
}

.second .sub_content {
  margin-top: 40px;
}

.second .sub_content + .sub_content {
  margin-top: 40px;
}

.second .main__container__content h2:not([class]) {
  margin-top: 56px;
}

.second .main__container__content h3:not([class]) {
  margin-top: 36px;
}

.second .main__container__content > h2:not([class]):first-child,
.second .main__container__content > h3:not([class]):first-child,
.second .content__column__box > h2:not([class]):first-child,
.second .content__column__box > h3:not([class]):first-child {
  margin-top: 0;
}

.second .mainArticle {
  padding-bottom: 80px;
}

/* ---------- 本文に差し込むお問い合わせ（parts/cta-banner.php） ---------- */

.second .mjs-inline-cta {
  margin: 40px 0;
  clear: both;
}

.second .content__column__box .mjs-inline-cta:last-child {
  margin-bottom: 0;
}

.second .cta-banner a {
  color: #fff;
  text-decoration: none;
}

/* ---------- プロ選手紹介：名前 ---------- */

.second .player__list__name-h {
  margin: 0;
  color: var(--sec-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
}

/* ---------- 会社概要：会社情報（固定ページ「会社概要」本文の定義リスト） ----------
   <dl class="company-dl"><dt>会社名</dt><dd>…</dd>…</dl>
*/

.second .company-dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  margin: 0 0 2em;
  border-top: 1px solid var(--sec-line);
}

.second .company-dl dt,
.second .company-dl dd {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sec-line);
  font-size: 15px;
  line-height: 1.8;
}

.second .company-dl dt {
  background: var(--sec-gray);
  color: var(--sec-ink);
  font-weight: 700;
}

.second .company-dl dd {
  color: #333;
}

.second .company-dl dd p {
  margin: 0;
}

.second .company-dl dd p + p {
  margin-top: .5em;
}

/* ---------- サービス概要（parts/service-summary.php） ---------- */

.second .service-summary {
  margin: 0 0 3em;
  padding: 1.6em 1.8em;
  border-left: 4px solid var(--sec-red);
  background: var(--sec-gray);
}

.second .service-summary__label {
  margin: 0 0 .8em;
  color: var(--sec-red);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
}

.second .service-summary__dl {
  margin: 0;
}

.second .service-summary__row {
  display: grid;
  grid-template-columns: 9em 1fr;
  gap: 0 1.5em;
  padding: .55em 0;
  border-top: 1px dashed var(--sec-line);
  font-size: 14px;
  line-height: 1.8;
}

.second .service-summary__row:first-child {
  border-top: 0;
}

.second .service-summary__row dt {
  font-weight: 700;
}

.second .service-summary__row dd {
  margin: 0;
}

/* ---------- 関連サービス（parts/related-services.php） ---------- */

.second .related-services {
  margin: 4em 0 1em;
  padding: 2.2em 0 0;
  border-top: 1px solid var(--sec-line);
}

.second .related-services__label {
  display: flex;
  align-items: baseline;
  gap: .8em;
  margin: 0 0 1.2em;
  font-size: 18px;
  font-weight: 700;
}

.second .related-services__label .bebas {
  color: var(--sec-red);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
}

.second .related-services__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.second .related-services--news .related-services__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.second .related-services__item {
  margin: 0;
  padding: 0;
}

.second .related-services__item::before {
  content: none;
}

.second .related-services__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e3e3e3;
  background: #fff;
  color: #111;
  text-decoration: none;
  opacity: 1 !important;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.second .related-services__link:hover {
  border-color: var(--sec-red);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .08);
}

.second .related-services__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ececec;
}

.second .related-services__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.second .related-services__link:hover .related-services__thumb img {
  transform: scale(1.04);
}

.second .related-services__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .5em;
  padding: 1em 1.1em 1.1em;
}

.second .related-services__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.second .related-services__text {
  color: #555;
  font-size: 13px;
  line-height: 1.75;
}

.second .related-services__more {
  margin-top: auto;
  padding-top: .4em;
  color: var(--sec-red);
  font-size: 13px;
  font-weight: 700;
}

.second .related-services__contact {
  margin: 1.4em 0 0;
  text-align: right;
}

.second .related-services__contact-link {
  color: var(--sec-red);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .25em;
}

/* ==========================================================
   スマートフォン・タブレット
   ========================================================== */

@media only screen and (max-width: 768px) {
  /* 本文：読みやすい大きさ・行間（広げすぎない） */
  .second .main__container__content,
  .second .content {
    font-size: 15px;
    line-height: 1.8;
  }

  .second .content__column__box p,
  .second .main__container__content > p {
    margin-bottom: 1em;
    font-size: 15px;
    line-height: 1.8;
  }

  /* 見出し：小さくなりすぎないように */
  .csd-heading {
    margin-bottom: 22px;
    padding-bottom: 16px;
  }

  .second .content__title,
  .second .main__container__content h2:not([class]) {
    font-size: 21px;
  }

  .second .main__container__content h2:not([class]) {
    margin-bottom: 20px;
    padding-bottom: 12px;
  }

  .second .csd-heading > .detail__title {
    font-size: 20px;
  }

  .second .sub_content__title,
  .second .main__container__content h3:not([class]),
  .clm-detail .clm-section__title {
    border-bottom-width: 2px;
    font-size: 16px;
  }

  .second .sub_content__title::before,
  .second .main__container__content h3:not([class])::before,
  .clm-detail .clm-section__title::before {
    left: 30px;
    border-width: 14px;
    border-top-width: 16px;
  }

  .second .sub_content__title::after,
  .second .main__container__content h3:not([class])::after,
  .clm-detail .clm-section__title::after {
    left: 33px;
    border-width: 11px;
    border-top-width: 13px;
  }

  .second .main__container__content h4:not([class]) {
    padding-left: 12px;
    border-left-width: 3px;
    font-size: 17px;
  }

  /* セクションの上下余白 */
  .second .content + .content {
    margin-top: 44px;
  }

  .second .sub_content,
  .second .sub_content + .sub_content {
    margin-top: 28px;
  }

  .second .main__container__content h2:not([class]) {
    margin-top: 40px;
  }

  .second .main__container__content h3:not([class]) {
    margin-top: 28px;
  }

  .second .mainArticle {
    padding-bottom: 48px;
  }

  .second .mjs-inline-cta {
    margin: 32px 0;
  }

  /* 表：はみ出す場合は横スクロール */
  .second .content__column__box table,
  .second .main__container__content > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 会社概要：項目名を上・内容を下に */
  .second .company-dl {
    grid-template-columns: 1fr;
  }

  .second .company-dl dt {
    padding: 10px 14px;
  }

  .second .company-dl dd {
    padding: 12px 14px 14px;
    font-size: 14.5px;
  }

  /* サービス概要・関連サービス：1列に */
  .second .service-summary {
    padding: 1.2em 1.1em;
  }

  .second .service-summary__row {
    grid-template-columns: 1fr;
    gap: .1em;
    font-size: 13px;
  }

  .second .related-services__list,
  .second .related-services--news .related-services__list {
    grid-template-columns: 1fr;
  }

  .second .related-services__link {
    flex-direction: row;
  }

  .second .related-services__thumb {
    flex: 0 0 34%;
    aspect-ratio: auto;
  }

  .second .related-services__contact {
    text-align: left;
  }

  /* タップ領域：本文中のリンク・ボタン */
  .second .main__container__content a:not([class]) {
    padding: 2px 0;
  }

  .second .main__container__content p > a:only-child:not([class]) {
    display: inline-block;
    min-height: 44px;
    padding: 10px 0;
    box-sizing: border-box;
  }

  /* ページ内メニュー（JUMP TO POSITION）の各項目 */
  .second .side a {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
  }
}

/* ==========================================================
   全ページ共通
   ========================================================== */

/* メインビジュアルのページタイトル（h1） */
.pageHeader__container__flex__box__title span h1 {
  font-size: 72px;
  font-size: min(6vw, 72px);
  font-weight: bold;
}

/* グローバルナビ「お問い合わせ」：スクロール後の追従ヘッダーでは電話番号と重なるため非表示
   （追従ヘッダーの電話番号・右側の「お問い合わせ」タブで導線を確保） */
@media only screen and (min-width: 769px) {
  .gnavi.on #nav .nav-item--contact {
    display: none;
  }
}

/* ==========================================================
   全ページ共通：スマートフォンのタップ領域
   （ぱんくず・フッターメニュー）
   ========================================================== */

@media only screen and (max-width: 768px) {
  .pageHeader__container__flex__box__title span h1 {
    font-weight: 500;
  }

  #breadcrumb a {
    display: inline-block;
    padding: 10px 2px;
  }

  .footer__nav__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
    box-sizing: border-box;
  }

  .footer__address__dl dd a[href^="tel:"],
  .footer-cv__tel a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   LINEでお問い合わせ（旧テーマの「追加CSS」から移設）
   ・.contact-linebtn：お問い合わせフォーム上のボタン（MW WP Form 本文内）
   ・.fixedfooter_line：SP固定フッターのLINE
   ・.gnavline：SPメニューのLINE
   ========================================================================== */
.contact-linebtn {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  border-radius: 8px;
  background-color: #00b900;
}
.contact-linebtn a {
  display: block;
  padding: 10px;
  color: #fff !important;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none !important;
}
.contact-linebtn a:hover {
  opacity: 0.6;
}
.footer__fixed__nav li a {
  height: 100%;
  padding: 8px;
}
.fixedfooter_line {
  display: block;
  background-color: #00b900;
}
@media only screen and (max-width: 768px) {
  .gnavi #nav .nav li.gnavline a {
    color: #00b900;
    font-weight: bold;
  }
}