@charset "utf-8";
/* 会社概要（company.html）
   Codex のデザイン画 sub-company.png（幅756）を 1024 に換算した数値で書く */

/* ページタイトルの帯（このページは左寄せ。和文の下に金の短い線、その下に英字） */

.cp-in { width: calc(1024 * var(--u)); margin: 0 auto; padding: 0 calc(65 * var(--u)); }
.cp-pc { display: inline; }

/* 導入 */
.cp-intro { padding-top: calc(56 * var(--u)); text-align: center; }
.cp-lead { font-family: var(--serif); font-weight: 600; font-size: calc(27 * var(--u)); line-height: calc(58 * var(--u)); letter-spacing: .08em; color: var(--navy); font-feature-settings: "palt"; }
.cp-lead a { padding-bottom: calc(2 * var(--u)); background: linear-gradient(transparent calc(100% - 5 * var(--u)), #C9DDF2 calc(100% - 5 * var(--u))); }
.cp-lead a:hover { color: var(--blue-2); }
.cp-note { margin-top: calc(24 * var(--u)); font-size: calc(16 * var(--u)); letter-spacing: .1em; color: #273246; font-weight: 500; }

/* 見出し（中央・左右に金の線） */
.cp-h2 { display: flex; align-items: center; justify-content: center; gap: calc(38 * var(--u)); font-family: var(--serif); font-weight: 600; font-size: calc(52 * var(--u)); line-height: 1.4; letter-spacing: .08em; color: var(--navy); font-feature-settings: "palt"; }
.cp-h2::before, .cp-h2::after { content: ""; width: calc(230 * var(--u)); height: calc(1.5 * var(--u)); }
.cp-h2::before { background: linear-gradient(90deg, rgba(207,175,114,0), var(--gold-1)); }
.cp-h2::after { background: linear-gradient(90deg, var(--gold-1), rgba(207,175,114,0)); }

/* メンバー紹介 */
.cp-members { padding-top: calc(100 * var(--u)); }
.cp-members-sub { margin-top: calc(14 * var(--u)); font-family: var(--serif); font-weight: 500; font-size: calc(21 * var(--u)); letter-spacing: .1em; color: #273246; text-align: center; }
.cp-member-list { display: grid; grid-template-columns: repeat(3, 1fr); margin: calc(44 * var(--u)) calc(-44 * var(--u)) 0; }
.cp-member { padding: 0 calc(14 * var(--u)) calc(10 * var(--u)); text-align: center; }
.cp-member + .cp-member { border-left: 1px solid #C9DCEF; }
.cp-member-photo { width: calc(246 * var(--u)); height: calc(246 * var(--u)); margin: 0 auto; border-radius: 50%; overflow: hidden; background: #EEF3F8; }
.cp-member-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cp-member-name { margin-top: calc(20 * var(--u)); font-family: var(--serif); font-weight: 600; font-size: calc(38 * var(--u)); line-height: 1.4; letter-spacing: .1em; color: var(--navy); font-feature-settings: "palt"; }
.cp-member-name::after { content: ""; display: block; width: calc(106 * var(--u)); height: calc(2 * var(--u)); margin: calc(20 * var(--u)) auto 0; background: linear-gradient(90deg, rgba(207,175,114,.3), var(--gold-1), rgba(207,175,114,.3)); }
.cp-member-career { margin-top: calc(18 * var(--u)); }
.cp-member-career li { font-size: calc(19.5 * var(--u)); line-height: calc(28 * var(--u)); letter-spacing: .08em; color: #1F2A3D; font-weight: 500; }
.cp-member-career li + li { margin-top: calc(12 * var(--u)); }

/* 会社概要の表 */
.cp-overview { padding: calc(100 * var(--u)) 0 calc(72 * var(--u)); }
.cp-table { width: 100%; margin-top: calc(36 * var(--u)); border-collapse: collapse; border-top: calc(1.5 * var(--u)) solid #BCD3EA; font-family: var(--serif); font-size: calc(20 * var(--u)); line-height: 1.5; letter-spacing: .08em; }
.cp-table tr { border-bottom: calc(1.5 * var(--u)) solid #BCD3EA; }
.cp-table th, .cp-table td { height: calc(59 * var(--u)); padding: calc(8 * var(--u)) calc(36 * var(--u)); vertical-align: middle; text-align: left; }
.cp-table th { width: calc(262 * var(--u)); padding-left: calc(42 * var(--u)); background: linear-gradient(90deg, #DCEAF7, #E8F1FA); color: var(--navy); font-weight: 700; }
.cp-table td { color: #1F2A3D; font-weight: 600; }
/* 会社の地図（Google マップ） */
.cp-map { margin-top: calc(36 * var(--u)); border: calc(1.5 * var(--u)) solid #BCD3EA; aspect-ratio: 16 / 7; max-width: 100%; overflow: hidden; }
.cp-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.cp-map-link { margin-top: calc(12 * var(--u)); text-align: right; font-size: calc(16 * var(--u)); }
.cp-map-link a { color: var(--navy); text-decoration: underline; }

/* 英語 */
.cp.is-en .cp-lead, .cp.is-en .cp-member-career li, .cp.is-en .cp-table { letter-spacing: .01em; }
.cp.is-en .cp-member-career li { font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); }
.cp.is-en .cp-member-name { letter-spacing: .03em; font-size: calc(34 * var(--u)); }
.cp.is-en .cp-table th { font-size: calc(18 * var(--u)); }

/* ========== スマホ ========== */
@media (max-width: 1023px) {
	.cp-in { width: auto; max-width: 560px; padding: 0 18px; }
	.cp-pc { display: none; }

	.cp-intro { padding-top: 26px; }
	.cp-lead { font-size: 16px; line-height: 1.85; letter-spacing: .04em; }
	.cp-lead a { background: linear-gradient(transparent calc(100% - 4px), #C9DDF2 calc(100% - 4px)); }
	.cp-note { margin-top: 12px; font-size: 12px; letter-spacing: .02em; }

	.cp-h2 { gap: 14px; font-size: 26px; }
	.cp-h2::before, .cp-h2::after { width: 72px; height: 1px; }

	.cp-members { padding-top: 40px; }
	.cp-members-sub { margin-top: 4px; font-size: 14px; }
	.cp-member-list { grid-template-columns: 1fr; margin: 16px 0 0; }
	.cp-member { display: flex; align-items: center; min-height: 0; padding: 12px 0 12px 8px; text-align: left; border-bottom: 1px solid #BCD3EA; }
	.cp-member:last-child { border-bottom: 0; }
	.cp-member + .cp-member { border-left: 0; }
	.cp-member-photo { flex: none; width: 92px; height: 92px; margin: 0; }
	.cp-member-body { flex: 1; min-width: 0; margin-left: 16px; padding: 4px 0 4px 16px; border-left: 1px solid #C9DCEF; }
	.cp-member-name { margin-top: 0; font-size: 21px; }
	.cp-member-name::after { display: none; }
	.cp-member-career { margin-top: 6px; }
	.cp-member-career li { font-size: 13.5px; line-height: 1.6; letter-spacing: .02em; }
	.cp-member-career li + li { margin-top: 0; }

	.cp-overview { padding: 28px 0 32px; }
	.cp-table { margin-top: 16px; border-top: 0; font-size: 15px; letter-spacing: .03em; }
	.cp-table tr { display: block; border-bottom: 1.5px solid #BCD3EA; }
	.cp-table tr + tr { margin-top: 6px; }
	.cp-table th, .cp-table td { display: block; width: auto; height: auto; padding: 3px 14px; }
	.cp-table th { padding-left: 14px; font-size: 14.5px; }
	.cp-table td { padding: 4px 16px 5px; }
	.cp-map { margin-top: 20px; border-width: 1px; aspect-ratio: 4 / 3; }
	.cp-map-link { margin-top: 8px; font-size: 14px; }
	.cp.is-en .cp-member-career li { font-size: 12.5px; line-height: 1.5; }
	.cp.is-en .cp-member-name { font-size: 19px; }
	.cp.is-en .cp-table th { font-size: 14px; }
}

/* YouTube の段（トップと同じ部品。パンくずとの間をあける） */
.cp-videos { margin-top: calc(28 * var(--u)); }

/* Dr.DECOLLA のバナー（共通部品 includes/decolla-banner.php の見た目をこのページ用に整える） */
.cp-banner { width: calc(1024 * var(--u)); margin: calc(48 * var(--u)) auto 0; padding: 0 calc(65 * var(--u)); }
.cp-banner .home-banner-decolla { margin: 0; line-height: 0; }
.cp-banner .home-banner-decolla-link { position: relative; display: block; overflow: hidden; border-radius: calc(18 * var(--u)); background: #fff; box-shadow: 0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(30,53,96,.14); }
.cp-banner .home-banner-decolla-link:hover { opacity: .94; }
.cp-banner picture, .cp-banner img { display: block; width: 100%; height: auto; }
/* PC 用のバナー画像で欠けている説明文を、同じ位置に重ねる（旧 style.css と同じ指定） */
.cp-banner .home-banner-decolla-description { position: absolute; left: 7.3%; top: 37.5%; display: flex; align-items: center; height: 14%; font-family: var(--serif); font-size: calc(15 * var(--u)); font-weight: 500; line-height: 1.65; letter-spacing: .04em; color: #684b32; white-space: nowrap; }
.cp-banner .home-banner-decolla-mobile { display: none; }

@media (max-width: 1023px) {
	.cp-videos { margin-top: 16px; }
	.cp-banner { width: auto; max-width: 560px; margin-top: 24px; padding: 0 18px; }
	.cp-banner .home-banner-decolla-link { border-radius: 14px; }
}
/* 旧サイトと同じく、PC 用の画像が出ないときは説明文を重ねない */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
	.cp-banner .home-banner-decolla-description { display: none; }
}

/* 名前の下の読み（今のページにあった英字・日本語の名前） */
.cp-member-sub { display: block; margin-top: calc(2 * var(--u)); font-family: var(--latin); font-weight: 600; font-size: calc(17 * var(--u)); line-height: 1.4; letter-spacing: .08em; color: #8A7A60; }
.cp.is-en .cp-member-sub { font-family: var(--serif); letter-spacing: .1em; }
@media (max-width: 1023px) {
	.cp-member-sub { display: inline-block; margin: 0 0 0 10px; font-size: 13px; vertical-align: middle; }
}

/* ========== 英語表示（?lang=en）だけの調整。日本語表示には効かない ========== */
@media (max-width: 1023px) {
	html[lang="en"] .cp-h2::before, html[lang="en"] .cp-h2::after { width: 40px; }
}