/* ========================================
   message.css — Company遊び心デザイン
======================================== */

/* MESSAGE */
.msg-message { padding: 80px 0; }
.msg-msg-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 72px;
  align-items: start;
}
.msg-photo-col { position: relative; }
.msg-photo-wrap { position: relative; }
.msg-photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center;
  /* クリーンな切り抜き。背景ぼかしの上に置き、やわらかい接地影で自然に定位 */
  filter: drop-shadow(0 14px 24px rgba(60, 84, 104, .16));
  display: block;
  position: relative;
  z-index: 1;
}
/* 背景ぼかし：ブランド色（淡ティール＋クリーム＋僅かのラベンダー）を大きくぼかした明るい水彩ボケ */
/* 背景ぼかし：やわらかい3色の円（ブルー・イエロー・コーラル）が重なり合うボケ（参考画像準拠） */
.msg-photo-deco {
  position: absolute;
  inset: -12% -16% -10% -16%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(closest-side, rgba(123, 201, 234, .60), rgba(123, 201, 234, 0) 100%),  /* ブルー（上） */
    radial-gradient(closest-side, rgba(252, 228, 140, .58), rgba(252, 228, 140, 0) 100%),  /* イエロー（左下） */
    radial-gradient(closest-side, rgba(244, 154, 154, .50), rgba(244, 154, 154, 0) 100%);  /* コーラル（右） */
  background-repeat: no-repeat;
  background-position: 56% 24%, 30% 72%, 72% 52%;
  background-size: 72% 59%, 78% 63%, 61% 49%;
  filter: blur(12px);
}
.msg-photo-caption { text-align: center; margin-top: 16px; }
.msg-name-en { font-size: .72rem; color: var(--c-gray-3); font-weight: 600; letter-spacing: .08em; }
.msg-name-ja { font-size: .95rem; font-weight: 700; color: var(--c-dark); margin-top: 4px; }
.msg-section-label { margin-bottom: 16px; }
.msg-msg-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--c-dark);
  line-height: 1.4;
  margin-bottom: 28px;
}
.msg-lead {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-dark);
  line-height: 1.7;
  margin-bottom: 1.4rem;
}
.msg-body p {
  font-size: .97rem;
  color: var(--c-gray);
  line-height: 2.1;
  font-weight: 500;
  margin-bottom: 1.2rem;
}
.msg-sig {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-border);
}
.msg-sig p:first-child { font-size: .78rem; color: var(--c-gray-3); font-weight: 600; }
.msg-sig-name { font-size: 1.5rem; font-weight: 900; color: var(--c-dark); margin-top: 4px; }

/* MISSION VISION */
.msg-mv { padding: 80px 0; background: var(--c-bg-alt); }
.msg-mv-header { text-align: center; margin-bottom: 48px; }
.mv-timeline { position: relative; max-width: 760px; margin: 0 auto; list-style: none; padding: 0 0 0 36px; }
.mv-timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--c-primary), var(--c-border)); }
.mv-tl-item { position: relative; padding-bottom: 52px; }
.mv-tl-item:last-child { padding-bottom: 0; }
.mv-tl-dot { position: absolute; left: -36px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-light); }
.mv-tl-en { font-family: var(--font-en); font-size: .72rem; font-weight: 800; letter-spacing: .18em; color: var(--c-primary); margin-bottom: 10px; }
.mv-tl-title { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 900; color: var(--c-dark); line-height: 1.45; margin-bottom: 14px; }
.mv-tl-title .text-primary { color: var(--c-primary-dark); font-style: normal; }
.mv-tl-desc { font-size: 1rem; color: var(--c-gray); line-height: 2; font-weight: 500; max-width: 620px; }
@media (max-width: 768px) {
  .mv-timeline { padding-left: 28px; }
  .mv-tl-dot { left: -28px; }
  .mv-tl-item { padding-bottom: 40px; }
  .mv-tl-title { font-size: 1.4rem; }
  .mv-tl-desc { font-size: .92rem; line-height: 1.9; }
}


/* レスポンシブ */
@media (max-width: 768px) {
  .msg-msg-layout { grid-template-columns: 1fr; gap: 40px; }
  /* スマホは画像比(≈3/4)に合わせて縦の切れ（頭切れ）を防ぐ。coverでも切れるのは透明な左右のみ */
  .msg-photo { aspect-ratio: 3/4; object-position: center top; }
}

/* ========================================
   企業情報テーブル
======================================== */
.company-info-section { padding: 80px 0; }
.ci-wrap {
  max-width: 800px;
  margin: 48px auto 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: #fff;
}
.ci-dl { margin: 0; }
.ci-row { display: grid; grid-template-columns: 170px 1fr; border-bottom: 1px solid var(--c-border); }
.ci-row:last-child { border-bottom: none; }
.ci-dt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 22px 28px; background: var(--c-bg-alt);
  font-size: .85rem; font-weight: 700; color: var(--c-dark);
}
.ci-ico { flex-shrink: 0; color: var(--c-primary); line-height: 0; margin-top: 1px; }
.ci-ico svg { width: 18px; height: 18px; display: block; }
.ci-dd { padding: 22px 28px; font-size: .9rem; color: var(--c-gray); line-height: 1.8; font-weight: 500; }
.ci-dd a { color: var(--c-primary); text-decoration: none; }
.ci-dd a:hover { text-decoration: underline; }
.ci-name { font-weight: 700; color: var(--c-dark); }
.ci-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 3px 10px; border-radius: var(--r-full); background: var(--c-primary-light); vertical-align: middle; }
.ci-badge-en { font-family: var(--font-en); font-size: .68rem; font-weight: 800; letter-spacing: .04em; color: var(--c-primary-dark); }
.ci-badge-x { font-size: .68rem; font-weight: 800; color: var(--c-pink); }
.ci-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ci-tag { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: #f0fafa; border: 1px solid #b2e8e8; color: #1a7a7a; font-size: .78rem; font-weight: 600; }
.ci-map {
  margin-top: 14px; max-width: 460px;
  border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: hidden;
  background: #eef5f5;
}
/* Googleマップ埋め込み（所在地） */
.ci-map-embed { width: 100%; height: 220px; border: 0; display: block; }
.ci-map-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 12px; text-decoration: none; }
.ci-map-pin { color: var(--c-primary); line-height: 0; }
.ci-map-pin svg { width: 26px; height: 26px; display: block; }
.ci-map-cap { font-size: .78rem; font-weight: 700; color: var(--c-primary); }
.ci-map-link:hover .ci-map-cap { text-decoration: underline; }

@media (max-width: 768px) {
  .ci-row { grid-template-columns: 1fr; }
  .ci-dt { padding: 14px 16px; font-size: .8rem; border-bottom: 1px solid var(--c-border); }
  .ci-dd { padding: 14px 16px; font-size: .84rem; }
  .ci-map { max-width: 100%; }
}

/* ======================================================
   会社概要 本文：ブランドの淡い背景装飾（寂しさ解消）
====================================================== */
.msg-message, .msg-mv, .company-info-section { position: relative; overflow: hidden; }
.msg-message > .container,
.msg-mv > .container,
.company-info-section > .container { position: relative; z-index: 1; }

/* 白セクションにごく淡いブランドのトーンを敷く */
.msg-message { background: linear-gradient(180deg, #fff 0%, #f7fdfd 100%); }
.company-info-section { background: linear-gradient(180deg, #f7fdfd 0%, #ffffff 100%); }

/* 各セクション角にふわっとした光のブロブ */
.msg-message::before,
.msg-mv::after,
.company-info-section::after {
  content: ''; position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0; filter: blur(60px);
}
.msg-message::before { width: 360px; height: 360px; top: -150px; right: -120px; background: radial-gradient(circle, rgba(13,193,204,.16) 0%, transparent 70%); }
.msg-mv::after { width: 320px; height: 320px; bottom: -120px; left: -110px; background: radial-gradient(circle, rgba(240,77,152,.12) 0%, transparent 70%); }
.company-info-section::after { width: 360px; height: 360px; top: -140px; left: -130px; background: radial-gradient(circle, rgba(124,92,246,.10) 0%, transparent 70%); }

/* 微細な装飾ドット（ヒーローと同じ世界観） */


/* ======================================================
   会社概要 scenery — 空→雲角帯（→山→水→岩は段階追加）
   止め絵準拠：本文をラッパーで包み、TOPのhome-sceneと同方式でレイヤーを敷く。
   斜め角帯はCSS自作ではなく雲素材(会社概要_雲_01/02)を全面に敷いて再現する。
====================================================== */
.company-scene-wrap { position: relative; isolation: isolate; overflow-x: clip; }
.company-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cs-layer { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; }
.cs-sky      { background-color: var(--c-bg); }
/* サービスのヘッダーと背景を合わせるため、会社概要の雲角帯は非表示（subpage-hero-bgのグラデで統一） */
.cs-clouds-1, .cs-clouds-2 { display: none; }
/* 止め絵準拠：企業情報＝teal水＋水面の低い山＋水中の岩。白パネルが水の上に浮く。
   山・岩は止め絵と同キャンバスなので全面敷きで位置が合う。水はwater-topから下をグラデで満たす。 */
/* 企業情報の背景は水をやめて自然な明るい仕上げに（水・水面の山・水中の岩を非表示／cs-skyの明色が下地になる） */
.cs-mountain, .cs-water, .cs-rocks { display: none; }
.company-scene-wrap > section { position: relative; z-index: 1; }
/* 企業情報は水をやめ、サイト共通の明るい自然な背景（クリーム→白）に */
.company-scene-wrap .company-info-section { background: linear-gradient(180deg, #f7fdfd 0%, #ffffff 100%) !important; }

/* マスコット「ティックス」設定資料を会社概要の世界観として薄く装飾配置（白黒=代表メッセージ / カラー=MVV） */
/* ticks白黒スケッチ（横長・切り出し版）：代表メッセージの下部に横長で薄く敷く（設定資料が透ける世界観） */
.company-scene-wrap .msg-message::after {
  content: "";
    position: absolute;
    left: 50px;
    right: 0;
    bottom: 150px;
    height: 48%;
    background: url(../img/company/ticks-bw.png) no-repeat center bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    width: 45%;
}
/* スマホ：ティックス(sp_tix)を3枚、跳躍→着地→疾走の流れで本文域を上→下へジグザグ降下に配置。
   代表写真には掛けず本文の文字に収まる範囲に薄く敷く（※デスクトップ規則より後に置き同詳細度で勝たせる） */
@media (max-width: 768px) {
  .company-scene-wrap .msg-message::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    opacity: .45;
    background-image:
      url("../img/company/sp-ticks-2.png"),
      url("../img/company/sp-ticks-3.png"),
      url("../img/company/sp-ticks-4.png");
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: 78% 38%, 22% 62%, 76% 86%;
    background-size: 46% auto, 46% auto, 50% auto;
  }
}
/* ticksカラー：代表メッセージには入れず、次のセクション(私たちの指針)の右側に薄く（既存ブロブ::afterを上書き・blur/円形リセット） */
.company-scene-wrap .msg-mv::after {
  content: ""; position: absolute; right: 0; bottom: 28px; left: auto; top: auto;
  width: min(680px, 60%); height: 42%;
  border-radius: 0; filter: none;
  background: url("../img/company/ticks-color.png") no-repeat right bottom;
  background-size: contain; opacity: 1; pointer-events: none; z-index: 0;
  /* 文字と被る左上をフェード、右下のティックスは鮮明に残す（重ね演出＋可読性の両立） */
  -webkit-mask-image: radial-gradient(135% 135% at 100% 100%, #000 42%, rgba(0,0,0,.35) 64%, transparent 82%);
          mask-image: radial-gradient(135% 135% at 100% 100%, #000 42%, rgba(0,0,0,.35) 64%, transparent 82%);
}
/* ticks背景の上でメインコンテンツを読みやすく（プロ手法）：
   背景色の柔らかいハローで文字を背景から分離する。箱(不透明マスク)で覆わないのでスケッチは透けたまま、
   文字だけが浮いて可読性が上がる。背景画像上テキストの定番テクニック (2026-06-09) */
.company-scene-wrap .msg-text-col,
.company-scene-wrap .mv-tl-item {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 5px #f4f4ef, 0 0 5px #f4f4ef, 0 0 10px #f4f4ef, 0 0 3px #f4f4ef;
}
/* 上部セクションは背景を透明にして雲角帯を見せる（既存のグラデ背景を無効化）。
   右上のブランド光ブロブ(::before/::after)は止め絵のカラフル装飾に近いので残す。 */
.company-scene-wrap .subpage-hero,
.company-scene-wrap .msg-message,
.company-scene-wrap .msg-mv { background: transparent !important; }
/* 会社概要は雲角帯が背景にあるので subpage-hero の装飾bgは控えめに（重複回避） */
.company-scene-wrap .subpage-hero-bg { opacity: 1; }