@charset "UTF-8";
/*
  Skin Name: Corporate Trust（安定コーポレート）
  Description: 紺×グレー×真鍮ゴールド。明朝見出しと直線的な余白設計で「堅実さ・継続性」を伝える、製造業・士業・BtoB老舗企業向けの安定系コーポレートスキンです。
  Skin URI: https://wp-cocoon.com/
  Author: Cocoon Child Corporate Pack
  Author URI: https://wp-cocoon.com/
  Version: 1.0.0
  Priority: 1000
*/

/* ============================================================
   0. LPコンポーネント用トークンの上書き
   ============================================================ */
:root {
  --cc-primary: #123a6b;
  --cc-primary-dark: #0b2547;
  --cc-primary-light: #2e63a6;
  --cc-accent: #b8892f;
  --cc-accent-contrast: #ffffff;

  --cc-bg: #ffffff;
  --cc-bg-alt: #f4f6f9;
  --cc-bg-deep: #0b2547;
  --cc-surface: #ffffff;
  --cc-surface-2: #f7f9fb;

  --cc-text: #22282f;
  --cc-text-muted: #5a6672;
  --cc-text-invert: #ffffff;
  --cc-text-invert-muted: rgba(255, 255, 255, .74);

  --cc-border: #e2e7ee;
  --cc-border-strong: #c6cedb;

  --cc-tint-primary: rgba(18, 58, 107, .08);
  --cc-tint-primary-strong: rgba(18, 58, 107, .32);
  --cc-tint-accent: rgba(184, 137, 47, .13);
  --cc-tint-accent-strong: rgba(184, 137, 47, .2);
  --cc-tint-success: rgba(26, 122, 84, .12);
  --cc-focus-ring: rgba(18, 58, 107, .22);

  --cc-gradient: linear-gradient(120deg, #0b2547 0%, #123a6b 60%, #1d4e8c 100%);
  --cc-hero-bg: #f4f6f9;
  --cc-hero-text: #22282f;

  /* 角は控えめ＝堅実さ */
  --cc-radius-xs: 0px;
  --cc-radius-sm: 2px;
  --cc-radius: 3px;
  --cc-radius-lg: 4px;
  --cc-radius-xl: 6px;
  --cc-radius-pill: 3px;

  --cc-shadow-sm: 0 1px 2px rgba(11, 37, 71, .06);
  --cc-shadow: 0 2px 10px rgba(11, 37, 71, .08);
  --cc-shadow-lg: 0 10px 30px rgba(11, 37, 71, .12);

  --cc-font-heading: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "Times New Roman", serif;
  --cc-font-en: "Times New Roman", "Yu Mincho", Georgia, serif;
  --cc-heading-weight: 600;
  --cc-heading-tracking: .06em;

  --cc-container: 1120px;
  --cc-section-py: 92px;
}

/* ============================================================
   1. ベース
   ============================================================ */
body {
  color: #22282f;
  letter-spacing: .02em;
}

body,
.body {
  background-color: #ffffff;
}

a {
  color: #123a6b;
}

a:hover {
  color: #b8892f;
}

::selection {
  background: rgba(18, 58, 107, .16);
}

/* ============================================================
   2. ヘッダー / ロゴ
   ============================================================ */
.header-container {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e7ee;
}

.header,
.header-in {
  background-color: transparent;
}

.logo-header .site-name-text,
.logo-text .site-name-text {
  font-family: var(--cc-font-heading);
  font-weight: 600;
  letter-spacing: .1em;
  color: #123a6b;
}

.tagline {
  color: #5a6672;
  font-size: 12px;
  letter-spacing: .12em;
}

/* トップメニューレイアウト時の高さ調整 */
.header-container-in.hlt-top-menu .navi-in > ul > li > a {
  height: 68px;
  line-height: 68px;
}

/* ============================================================
   3. グローバルナビ
   ============================================================ */
.navi-in > ul {
  border: 0;
}

.navi-in a {
  position: relative;
  color: #22282f;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  transition: color .25s ease;
}

.navi-in > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 0;
  height: 2px;
  background: #b8892f;
  transform: translateX(-50%);
  transition: width .3s cubic-bezier(.22, .61, .36, 1);
}

.navi-in > ul > li > a:hover,
.navi-in > ul > li.current-menu-item > a {
  background-color: transparent;
  color: #123a6b;
}

.navi-in > ul > li > a:hover::after,
.navi-in > ul > li.current-menu-item > a::after {
  width: 46%;
}

.navi-in > ul .sub-menu {
  border-top: 2px solid #123a6b;
  box-shadow: 0 10px 30px rgba(11, 37, 71, .14);
}

.navi-in > ul .sub-menu a {
  background-color: #ffffff;
  border-bottom: 1px solid #eef1f5;
  font-size: 14px;
  font-weight: 500;
}

.navi-in > ul .sub-menu a:hover {
  background-color: #f4f6f9;
  color: #123a6b;
}

.navi-in > ul .sub-menu a::after {
  display: none;
}

/* ============================================================
   4. メイン / 記事
   ============================================================ */
.main,
.sidebar {
  border: 0;
  box-shadow: none;
}

.main {
  background-color: #ffffff;
}

.entry-title,
.article h1 {
  font-family: var(--cc-font-heading);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
}

.article h2 {
  position: relative;
  margin-top: 3em;
  padding: 0 0 .6em 0;
  border: 0;
  border-bottom: 1px solid #e2e7ee;
  background: none;
  font-family: var(--cc-font-heading);
  font-weight: 600;
  letter-spacing: .05em;
  color: #123a6b;
}

.article h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 68px;
  height: 3px;
  background: #b8892f;
}

.article h3 {
  padding: 0 0 0 .8em;
  border: 0;
  border-left: 4px solid #123a6b;
  background: none;
  font-family: var(--cc-font-heading);
  font-weight: 600;
  letter-spacing: .04em;
  color: #22282f;
}

.article h4 {
  padding: 0 0 .3em 0;
  border: 0;
  border-bottom: 1px dotted #c6cedb;
  font-weight: 700;
  color: #22282f;
}

.article blockquote {
  border-left: 3px solid #b8892f;
  background: #f7f9fb;
}

/* ============================================================
   5. パンくず / 日付
   ============================================================ */
.breadcrumb {
  font-size: 12px;
  color: #7a8492;
  letter-spacing: .04em;
}

.breadcrumb a {
  color: #7a8492;
}

.breadcrumb a:hover {
  color: #123a6b;
}

.date-tags {
  color: #8a94a2;
  font-size: 12px;
}

/* ============================================================
   6. エントリーカード
   ============================================================ */
.entry-card-wrap {
  border-bottom: 1px solid #e2e7ee;
  transition: background-color .25s ease;
}

.entry-card-wrap:hover {
  background-color: #f7f9fb;
}

.entry-card-title,
.related-entry-card-title {
  font-family: var(--cc-font-heading);
  font-weight: 600;
  color: #22282f;
  letter-spacing: .03em;
}

.entry-card-thumb img,
.related-entry-card-thumb img {
  border-radius: 2px;
}

.cat-label {
  border: 0;
  border-radius: 0;
  background-color: #123a6b;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
}

.entry-card-snippet {
  color: #5a6672;
}

/* ============================================================
   7. サイドバー / ウィジェット
   ============================================================ */
.sidebar {
  background-color: transparent;
}

.sidebar .widget-title {
  padding: 0 0 .6em;
  border: 0;
  border-bottom: 2px solid #123a6b;
  background: none;
  font-family: var(--cc-font-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #123a6b;
  text-align: left;
}

.widget-sidebar li {
  border-bottom: 1px solid #eef1f5;
}

/* ============================================================
   8. 目次
   ============================================================ */
.toc {
  border: 1px solid #e2e7ee;
  border-radius: 3px;
  background: #fbfcfd;
}

.toc-title {
  font-family: var(--cc-font-heading);
  font-weight: 600;
  letter-spacing: .08em;
  color: #123a6b;
}

.toc a {
  color: #22282f;
}

.toc a:hover {
  color: #b8892f;
}

/* ============================================================
   9. ボタン / フォーム
   ============================================================ */
input[type="submit"],
button[type="submit"],
.btn {
  border-radius: 3px;
  letter-spacing: .06em;
}

.btn-wrap > a,
.btn {
  background-color: #123a6b;
  border-radius: 3px;
  letter-spacing: .06em;
}

.btn-wrap > a:hover {
  background-color: #0b2547;
}

/* ============================================================
   10. フッター
   ============================================================ */
.footer {
  background-color: #0b2547;
  color: rgba(255, 255, 255, .78);
  border-top: 4px solid #b8892f;
}

.footer a,
.footer .logo-text .site-name-text {
  color: #ffffff;
}

.footer a:hover {
  color: #d9b978;
}

.navi-footer-in a {
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  letter-spacing: .06em;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12px;
  letter-spacing: .06em;
}

.go-to-top-button {
  background-color: #123a6b;
  border-radius: 2px;
}

/* ============================================================
   11. Cocoonブロックの調整
   ============================================================ */
.blank-box,
.info-box,
.caption-box,
.tab-caption-box,
.toggle-wrap {
  border-radius: 3px;
}

.blogcard,
.blogcard-wrap {
  border-radius: 3px;
  border-color: #e2e7ee;
}

.faq-item {
  border-radius: 3px;
}

.timeline-item::before {
  background-color: #123a6b;
}

.micro-balloon {
  border-radius: 3px;
}

/* ============================================================
   12. モバイル
   ============================================================ */
@media screen and (max-width: 834px) {
  .navi-in > ul > li > a::after {
    display: none;
  }
  .mobile-menu-buttons {
    background-color: #ffffff;
    border-top: 1px solid #e2e7ee;
  }
  .mobile-menu-buttons .menu-icon,
  .mobile-menu-buttons .menu-caption {
    color: #123a6b;
  }
}

@media screen and (max-width: 480px) {
  .article h2 { font-size: 22px; }
  .article h3 { font-size: 19px; }
}

/* ============================================================
   14. モーション強度：レベル1（控えめ）
   信頼感を損なわないよう、距離は短く・減速はゆっくり。
   派手なホバー演出（スポットライト／マグネティック）は使わない。
   ============================================================ */
:root {
  --cc-motion-level: 1;
  --cc-motion-dur: 700ms;
  --cc-motion-dur-lg: 980ms;
  --cc-motion-stagger: 72ms;
  --cc-motion-distance: 16px;
  --cc-motion-scale: .985;
  --cc-motion-blur: 0px;
  --cc-motion-parallax: .55;
  --cc-motion-line-shift: 100%;
  --cc-motion-ease: cubic-bezier(.25, 1, .35, 1);
  --cc-motion-ease-soft: cubic-bezier(.33, 1, .5, 1);
}

/* 進捗バーは細く、金の一本線で */
.cc-progress {
  height: 2px;
}

.cc-progress__bar {
  background: #b8892f;
}

/* 見出しのラベル下線はゴールド */
.cc-heading__en::after {
  background: #b8892f;
  opacity: .8;
}

/* カードのホバーは沈み込みではなく、罫線と影のみ動かす */
.cc-card:hover {
  transform: none;
  border-color: #123a6b;
  box-shadow: 0 10px 30px rgba(11, 37, 71, .12);
}

.entry-card-wrap:hover {
  transform: none;
}