@charset "UTF-8";

/* =========================================
   Variables & Tone (健康経営専用スタイル)
========================================= */
:root {
    --primary-color: #2C3E50;
    --accent-color: #E67E22;
    --text-main: #333333;
    --bg-light: #F8F9FA;
    --font-sans: 'Noto Sans JP', sans-serif;
    --p3-blue: #0056b3;
    --p3-cyan: #00b4d8;
    --p3-bg: #f0f4f8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-sans); color: var(--text-main); line-height: 1.8; background-color: #FFFFFF; letter-spacing: 0.05em; }
h1, h2, h3, h4 { font-weight: 700; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* --- Modern Dynamic --- */
.hd-p3-wrapper {
    background-color: var(--p3-bg);
    padding: 0 0 100px;
    position: relative;
    overflow: hidden;
}

/* ダイナミックな斜め背景 */
.hd-p3-hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 550px;
    background: linear-gradient(135deg, var(--p3-blue) 0%, var(--p3-cyan) 100%);
    transform: skewY(-4deg);
    transform-origin: top left;
    z-index: 0;
}

.hd-p3-container { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; padding: 140px 20px 0; }
.hd-p3-title { text-align: center; margin-bottom: 60px; color: #fff; }
.hd-p3-title h1 { font-size: 42px; letter-spacing: 0.1em; text-shadow: 0 4px 15px rgba(0,0,0,0.2); margin-bottom: 5px; }
.hd-p3-title .en { font-size: 14px; color: rgba(255,255,255,0.8); letter-spacing: 0.3em; text-transform: uppercase; font-weight: bold; }
.hd-p3-image { margin: 0 auto 60px; max-width: 650px; }
.hd-p3-image img { border-radius: 12px; box-shadow: 0 25px 50px rgba(0,86,179,0.3); border: 4px solid #fff; }

/* スタイリッシュなカード */
.hd-p3-card { background: #fff; padding: 50px; border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); margin-bottom: 40px; position: relative; overflow: hidden; }

/* カード左のアクセントライン */
.hd-p3-card::before { content:''; position:absolute; top:0; left:0; width:6px; height:100%; background: linear-gradient(to bottom, var(--p3-blue), var(--p3-cyan)); }
.hd-p3-card p { font-size: 16px; line-height: 2.2; color: #333; margin-bottom: 20px; }
.hd-p3-section-title { margin-bottom: 30px; display: inline-block; border-bottom: 3px solid var(--p3-cyan); padding-bottom: 5px; }
.hd-p3-section-title h2 { font-size: 26px; color: var(--p3-blue); }
.hd-p3-note { font-size: 13px; color: #666; margin-top: 20px; display: flex; align-items: center; }
.hd-p3-note::before { content:'INFO'; background: #eee; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight:bold; margin-right: 10px; color: #555; }

@media(max-width: 768px) {
    .hd-p3-container { padding-top: 100px; }
    .hd-p3-title h1 { font-size: 32px; }
    .hd-p3-card { padding: 30px 20px 30px 25px; }
    .hd-p3-hero-bg { height: 450px; }
}