/* =========================================
   変数定義 (全体共通)
   ========================================= */
:root {
    /* 配色 */
    --main-color: #E36F77;   /* ソフトレッド */
    --accent-color: #D9333F; /* 濃い赤 */
    --accent-blue: #006699;  /* リンク・強調用青 */
    --bg-body: #FFFFFC;      /* 粉錫（ふんしゃく） */
    --bg-light: #f9f9f9;     /* 薄いグレー */
    --bg-pink-light: #fff5f5; /* 薄いピンク */
    --text-color: #333;
    --text-sub: #666;
    --text-light: #777;
    --white: #fff;
    
    /* ボタン色 */
    --btn-primary: #0077aa;
    --btn-active: #005588;

    /* シェアボタン色 */
    --sns-x: #000000;
    --sns-line: #06C755;

    /* レイアウト */
    --max-width: 960px;
    --radius-box: 8px;
    --radius-pill: 50px;
    
    /* フォント */
    --font-base: 'Noto Sans JP', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* =========================================
   リセット & ベーススタイル
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
}

body {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    font-family: var(--font-base);
    font-size: 1em;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--bg-body);
}

a {
    color: var(--accent-blue);
    text-decoration: none;
}
img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;
}
strong {
    font-weight: 600;
    color: var(--text-color);
}
/* ブロック要素化が必要なタグ */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* =========================================
   レイアウトコンテナ
   ========================================= */
/* メインコンテンツ枠 */
#main-content {
    width: 100%;
    max-width: var(--max-width);
    padding: 0.5rem;
    margin: 0 auto; /* 中央寄せを追加 */
}

/* ヘッダー枠 */
#site-header {
    padding: 0.3rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto; /* 中央寄せ */
}

.header-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.site-title {
    margin-bottom: 5px;
}
.header-container img {
    width: 8rem;
}

footer {
    text-align: center;
}

/* =========================================
   タイポグラフィ & テキスト要素
   ========================================= */
h1 {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}
h2 {
    font-weight: bold;
    color: var(--text-sub);
}

.section-title {
    font-size: 22px;
    color: var(--text-color);
    border-bottom: 2px solid var(--accent-blue);
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.intro-section p,
.start-section p {
    line-height: 1.8;
    margin-bottom: 10px;
}

.highlight-text {
    color: #ff3333;
    font-weight: bold;
}

.error-message {
    background-color: #ffe0e0;
    border: 1px solid #ff9999;
    color: #cc0000;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

.ppLink {
    clear: both;
    text-align: center;
    font-size: 0.8em;
}

/* =========================================
   UI コンポーネント (ボタンなど)
   ========================================= */
/* 共通アクションボタン */
.action-button,
.start-button,
.end-button {
    /* 共通スタイルは各ページCSSで定義されている前提 */
    /* ここではホバー時の挙動のみ定義 */
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.1s;
}

.action-button:hover,
.start-button:hover,
.end-button:hover {
    background-color: var(--btn-primary);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.action-button:active,
.start-button:active,
.end-button:active {
    background-color: var(--btn-active);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
    transform: translateY(1px);
}

.button-text {
    display: block;
}

/* =========================================
   相性診断・シェア・検索ボックス
   ========================================= */
/* 相性診断ボックス (ピンク背景) */
.kekka_aisyo_box {
    background-color: var(--bg-pink-light);
    border: 2px solid #ffd1d1;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 30px;
}
.kekka_aisyo_box_txt {
    font-weight: bold;
    color: var(--main-color);
    margin-bottom: 10px;
}

/* コピペエリア (グレー背景) */
.kekka_aisyo_box2 {
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: var(--radius-box);
    margin-top: 30px;
    border: 1px solid #ddd;
}
.kekka_aisyo_id, .kekka_aisyo_url {
    margin-bottom: 15px;
}
.kekka_aisyo_lefttxt {
    font-size: 0.8rem;
    color: var(--text-sub);
    margin-bottom: 5px;
    font-weight: bold;
}
.kekka_aisyo_id_input, .kekka_aisyo_url_input {
    width: 100%;
    max-width: 100%;
    background-color: var(--white);
    color: #555;
    font-family: monospace;
    cursor: text;
}

/* シェアボタンコンテナ */
.cSocial {
    display: flex;
    justify-content: space-between;
    gap: 10px;       
    margin: 20px 0;
    width: 100%;
}
.share-btn {
    flex: 1; /* 余白を埋める */
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 50px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 5px;
    color: var(--white) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: opacity 0.3s;
}
.share-btn:hover { opacity: 0.8; }
.btn-x { background-color: var(--sns-x); }
.btn-line { background-color: var(--sns-line); }

/* ソーシャル案内テキスト */
.socialInfo {
    text-align: center;
    margin: 50px auto 25px;
    padding: 0 15px;
    font-size: 1rem;
    font-weight: bold;
    color: #555;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

/* 適合ID自動検索ボックス (破線囲み) */
.kekka_aisyo_box.search-box { /* クラス追加を推奨、あるいは既存の上書き */
    background-color: #fffafb;
    border: 2px dashed var(--main-color);
    border-radius: 12px;
    padding: 30px 20px;
    margin: 40px auto;
    max-width: 640px;
    box-shadow: 0 5px 15px rgba(227, 111, 119, 0.1);
}
.kekka_aisyo_box h2 {
    font-size: 1.4rem;
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.4;
    font-weight: bold;
}
.kekka_aisyo_box p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: left;
    display: inline-block;
}

/* 検索スタートボタン */
#startIFH.startIFH {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 16px 0;
    background: linear-gradient(135deg, var(--main-color) 0%, var(--accent-color) 100%);
    color: var(--white);
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: 0 4px 0 #a8232f, 0 5px 15px rgba(217, 51, 63, 0.3);
    transition: transform 0.1s, box-shadow 0.1s, opacity 0.2s;
    user-select: none;
    text-align: center;
}
#startIFH.startIFH:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}
#startIFH.startIFH:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #a8232f, inset 0 2px 5px rgba(0,0,0,0.2);
}

/* =========================================
   レスポンシブ (スマホ・タブレット)
   ========================================= */
@media (max-width: 768px) {
    /* グリッドレイアウト解除 */
    .main-content-grid {
        grid-template-columns: 1fr;
    }
    .main-column {
        border-right: none;
        padding-right: 0;
    }
    .sidebar-column {
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    /* タイトル・フォント調整 */
    h3 { font-size: 1.6rem; }
    .info-block { font-size: 0.95rem; line-height: 1.7; }
    .kekka_id_top { font-size: 1.5rem; }
    .socialInfo {
        margin: 40px auto 20px;
        font-size: 0.9rem;
    }

    /* ヘッダー調整 */
    .header-container {
        flex-direction: column;
        align-items: start;
    }
    .site-title img {
        width: 9rem;
        float: left;
    }
    .page-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .header-logo-area {
        flex-direction: column;
        margin-bottom: 10px;
    }
    .header-logo-area img {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* フォーム・ボタン調整 */
    .input-form-container {
        flex-direction: column;
    }
    .blood-type-selection,
    .gender-selection,
    .gender-name-input {
        width: 100%;
        min-width: unset;
    }
    .blood-type-option,
    .gender-option,
    .answer-option {
        min-width: unset;
    }
    .head_inp {
        flex-direction: column;
        align-items: stretch;
    }
    
    /* ボタン系を幅100%に */
    .shindan, .start2,
    .text-input, .action-button,
    #startIFH.startIFH {
        width: 100%;
        max-width: 100%;
    }
    
    .action-button {
        margin-bottom: 10px;
        margin-top: 0;
    }
    .action-button:last-child {
        margin-bottom: 0;
    }

    /* ボックス調整 */
    .kekka_aisyo_box {
        padding: 20px 15px;
        margin: 30px 10px;
    }
    .kekka_aisyo_box h2 {
        font-size: 1.2rem;
    }
    #startIFH.startIFH {
        font-size: 1.1rem;
    }

    /* 広告コンテナ */
    .ads-container {
        width: 100%;
        overflow: hidden;
    }
    .top-bar {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }
}