@charset "utf-8";

/* =========================================
   1. タイトル・フォント設定
========================================= */
h1.title {
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho", "Yu Mincho", "YuMincho", "MS PMincho", serif;
    font-weight: 600;
    margin-bottom: 60px !important; /* PCでの余白確保 */
    text-align: center;
}

.message-catchphrase {
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho", "Yu Mincho", "YuMincho", "MS PMincho", serif;
    font-size: 28px;
    font-weight: 600;
    color: #1a365d;
    line-height: 1.4;
    margin-bottom: 30px;
    display: inline-block;
    border-bottom: 1px solid #1a365d;
    padding-bottom: 10px;
}

/* =========================================
   2. メインレイアウト（文章：左 / 写真：右）
========================================= */
.message-section {
    padding: 0 0 100px;
    background-color: #ffffff;
}

.message-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: row; /* PCは横並び */
    gap: 60px;
    align-items: flex-start;
}

/* --- 左側：文章エリア --- */
.message-text-area {
    flex: 1; /* ★右側が狭くなった分、自動的に約1.2倍に広がります */
}

.message-lead {
    font-size: 18px;
    font-weight: normal; 
    line-height: 1.9;
    margin-bottom: 25px;
    color: #333;
}

.message-text-area p {
    font-size: 18px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 25px;
}

.message-text-area strong {
    color: #1a365d;
    font-weight: bold;
}

/* ★⑤ 1行に収まる赤文字（h1の欧文と同系の深みのある赤） */
.message-red-line {
    color: #c93a40 !important; /* 赤字指定 */
    font-weight: bold;
    font-size: 22px !important; /* 1行に収めるためのサイズ調整 */
    white-space: nowrap; /* ★絶対に改行させない魔法 */
    margin-bottom: 5px !important; /* 下の文章と繋げるため余白を詰める */
    letter-spacing: -0.02em; /* 文字間を微調整して収まりやすく */
}

/* 引用ボックス */
.message-quote-box {
    position: relative;
    margin: 45px 0;
    padding: 35px 40px;
    background: linear-gradient(135deg, #f4f9ff 0%, #e6f2ff 100%);
    border-left: 6px solid #1a365d;
    border-radius: 0 8px 8px 0;
}

.message-quote-box .quote-top {
    margin-bottom: 5px !important;
}

/* ★③ 1行に収まるように文字を小さく */
.message-quote-box .quote-desc {
    font-size: 13.5px !important; 
    margin-bottom: 20px !important; /* 下の不易流行との間に余白 */
}

.quote-main-wrap {
    text-align: center;
}

/* ★④ 1.5倍＆文字間隔を開ける */
.message-quote-box .quote-main {
    font-size: 34px !important; /* 元の22pxの約1.5倍 */
    letter-spacing: 0.4em; /* 文字間隔を大きく開ける */
    font-weight: bold;
    color: #1a365d;
    margin: 10px 0;
    border-bottom: 2px solid #63b3ed;
    display: inline-block;
    padding-bottom: 5px;
    padding-left: 0.4em; /* letter-spacingのズレを中央補正 */
}

.message-quote-box .quote-bottom {
    margin-top: 25px !important;
}

/* --- 右側：写真エリア --- */
.message-img-area {
    width: 35%; /* ★元の45%から狭めました（左が広がります） */
    max-width: 420px; /* ★元の540pxから小さくしました */
    flex-shrink: 0;
}

.message-img-area img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    /* 薄い水色のさりげない影 */
    box-shadow: 8px 8px 0px rgba(0, 160, 233, 0.15);
    border: 1px solid #e2e8f0;
}

/* ★② 社長の写真下の自筆サイン */
.ceo-sign-img {
    width: 90% !important; /* サインの幅 */
    max-width: 300px;
    margin: 30px auto 10px !important; /* 上下に余白を取って中央配置 */
    display: block;
    box-shadow: none !important; /* サインには影をつけない */
    border: none !important; /* サインには枠をつけない */
}

/* =========================================
   3. 署名・SNS・ボタン
========================================= */
.message-signature {
    margin-top: 20px;
    width: fit-content;
    margin-left: auto; /* 右寄せ */
    text-align: left; /* 中身は左揃え */
}

.message-signature .title {
    font-size: 20px;
    color: #1a365d;
    font-weight: normal; 
    margin-bottom: 5px;
    letter-spacing: 0.1em;
}

.message-signature .name {
    font-size: 30px;
    font-weight: bold;
    color: #1a365d;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
}

.signature-bottom {
    display: flex;
    align-items: center;
    gap: 15px;
}

.message-signature .en-name {
    font-size: 13px;
    color: #00a0e9; 
    letter-spacing: 0.1em;
}

.signature-yt img {
    width: 26px;
    height: auto;
    box-shadow: none !important;
    border: none !important;
}

/* プロフィールボタン */
.profile-btn-wrap {
    text-align: right;
    margin-top: 30px;
}

.btn-ceo-profile {
    display: inline-flex;
    align-items: center;
    background-color: #00a0e9; 
    color: #ffffff !important;
    font-size: 14px;
    font-weight: bold;
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 160, 233, 0.3);
    transition: 0.3s;
}

.btn-ceo-profile:hover {
    background-color: #0088c7;
    transform: translateY(-2px);
}

/* =========================================
   4. レスポンシブ（スマホ用）
========================================= */
@media (max-width: 991px) {
    .message-container {
        flex-direction: column; /* 縦並び */
        padding: 0 20px;
    }

    .message-img-area {
        width: 100%;
        max-width: 100%;
        order: -1; /* 写真を上に */
        margin-bottom: 40px;
    }
    
    .message-red-line {
        white-space: normal; /* スマホでは画面からはみ出さないよう改行を許可 */
        font-size: 18px !important;
    }
    
    .message-quote-box .quote-main {
        font-size: 28px !important; /* スマホでは少しだけ小さく */
        letter-spacing: 0.3em;
    }
}

@media (max-width: 767px) {
    h1.title {
        margin-bottom: 30px !important;
    }
    .message-catchphrase {
        font-size: 22px;
    }
}