@charset "utf-8";

/* --- 1. 基本設定 (リセット & 全体) --- */
html {
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    max-width: 100vw;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family:  "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: #FFFFFF;
    color: #111;
    line-height: 1.6;
    text-align: center;
    /* ▼追加: 描画速度優先モード */
    text-rendering: optimizeSpeed;
}

/* 画像・Iframe・広告のレスポンシブ化 */
img {
    max-width: 100%;
    height: auto;
    border: 0;
    /* ▼追加: 画像のデコードを非同期にしてテキスト表示をブロックさせない */
    content-visibility: auto; 
}
/* ただしロゴやチャートなど重要な画像は content-visibility を上書きする */

iframe, ins, .adsbygoogle {
    max-width: 100% !important;
    height: auto;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    max-width: 100%;
}

a { cursor: pointer; color: #1a5fb4; text-decoration: underline; }
a:hover { text-decoration: none; opacity: 0.8; }

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
h1 {
    color: #666666;
    font-size: 0.9rem;
    padding-top: 2px;
}
h2 {
    color: #78551E;
    font-weight: bold;
    margin-bottom: 10px;
}
h2:empty { display: none; }
h3 {
    color: #EF454A;
    font-weight: bold;
    margin-bottom: 10px;
}

hr {
    width: 100%;
    height: 5px;
    border: 1px solid #830F54;
    color: #830F54;
    background-color: #830F54;
    margin: 15px 0 0 0;
    padding: 0;
    clear: both;
}

/* --- 2. レイアウト & ヘッダー --- */
div#body {
    margin: 0 auto;
    width: 100%;
    max-width: 750px;
}

div.title {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

/* ▼修正: 幅計算の迷いをなくす設定 */
#logo {
    margin: 0 auto;
    width: 100%;      /* 90% -> 100% に変更 */
    max-width: 300px;
    text-align: center;
}

/* ▼追加: ロゴ画像のガタつき防止 (LCP対策) */
.logoImg {
    aspect-ratio: 300 / 70;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    content-visibility: visible; /* 上書きして即表示 */
}

div.head_inp {
    width: 100%;
    max-width: 300px;
    height: 40px;
    margin: 10px auto;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input_id {
    border: 1px solid #ddd;
    width: 100px;
    height: 28px;
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-right: 5px;
    border-radius: 3px;
}

.button_id {
    background-color: #eee;
    border: 1px solid #ccc;
    color: #333;
    font-size: 11px;
    height: 28px;
    line-height: 28px;
    width: 80px;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
}

/* --- 3. 結果表示エリア (共通) --- */
.mt {
    width: 100%;
    margin: 0 auto;
    /* ▼追加: レイアウト計算をこの箱の中に封じ込める */
    contain: layout paint style; 
}

.kekka_left {
    width: 100%;
    margin: 0 auto;
    /* ▼追加: ここも封じ込め */
    contain: layout paint style;
}

/* PC・タブレット・スマホ共通 */
.cImgArea {
    /* ▼影を表示するスペース確保のため 90% に戻します */
    width: 90%;
    max-width: 500px;
    margin: 0 auto 20px;
    
    /* ▼CLS対策: アスペクト比で高さだけはガチガチに確保 */
    aspect-ratio: 7 / 5;
    min-height: 1px;

    contain: layout style; /* paint（描画範囲制限）は外す */
    
    /* 背景色はあっても良いですが、影と馴染ませるなら透明でもOK */
    background-color: transparent; 
}

.cImgArea img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    
    content-visibility: visible; 
    display: block;
    
    /* 影の設定（ここは維持） */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* 結果テキストボックス */
.involve {
    width: 95%;
    margin: 0 auto 0px;
    /* テキスト量の増減によるリフローを緩和 */
    contain: layout; 
}

div.inf {
    line-height: 2.0;
    color: #444;
    letter-spacing: 0.05em;
    text-align: left;
    margin-bottom: 20px;
    padding: 0px 20px;   
}
div.inf h2 {
    text-align: center;
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
    margin: 10px 0;
}

div.infff {
    font-weight: bold;
    font-size: 0.9rem;
    color: #d32f2f;
    margin-bottom: 5px;
    text-align: center;
}

/* --- 4. 見出し --- */
.title2 {
    clear: both;
    margin: 0px auto 20px;
    width: 80%;
    max-width: 280px;
    font-size: 1.5rem;
    text-align: center;
    color: #bf507c;
    background: linear-gradient(transparent 70%, #eaced9 70%);
    font-family: Georgia, "游明朝体", "YuMincho", "Yu Mincho", serif;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
}

/* --- 5. SNSシェアボタン (共通設定) --- */
.sns-share-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
    width: 100%;
}

.btn-sns {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 55px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    font-size: 1rem;
    color: #fff !important; /* 文字は白 */
    transition: transform 0.2s, opacity 0.2s;
}

.btn-sns:hover {
    opacity: 0.9;
    transform: translateY(-2px); /* ホバーで少し浮く */
}

.btn-sns svg {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    fill: #fff; /* アイコンも白 */
}

/* X (旧Twitter) 用 */
.btn-x {
    background-color: #000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* LINE 用 (result.css) - */
.btn-line {

    background-color: #00B000; 
    box-shadow: 0 4px 12px rgba(0, 185, 0, 0.3);
    color: #ffffff;
    font-weight: bold;
    font-size: 21px; 
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn-line svg {
    width: 26px;
    height: 26px;
    margin-right: 8px;
    fill: #fff; /* アイコンも白で確定 */
}
/* --- 6. 相性診断結果ページ用 --- */
.h1_title {
    margin-bottom: 20px;
}
#title_str {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 15px;
}
.h1_bottom_txt0, .h1_bottom_txt1, .h1_bottom_txt2 {
    display: inline;
    font-weight: bold;
}
.h1_bottom_txt0 { color: #004898; }
.h1_bottom_txt1 { color: #d32f2f; }

div.inf1 {
    width: 90%;
    margin: 0 auto 20px;
    text-align: left;
    line-height: 1.8;
}

div.noAnji {
    color: #0E3E8A;
    margin-top: 20px;
}
div.anji_t {
    color: #d32f2f;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 10px 0 20px;
}

/* --- 7. フッター・その他 --- */
.ppLink {
    font-size: 0.8em;
    margin-bottom: 15px;
}
.ppLink a { color: #666; margin: 0 5px; }

.cprt {
    color: #666666;
    font-size: 11px;
    margin-bottom: 30px;
}

.affi {
    margin: 20px auto;
    width: 95%;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 0.3em;
    contain: layout paint; /* 広告エリアも封じ込め */
}
.aarrR {
    text-align: center;
    margin: 20px 0;
    contain: layout paint;
}
.topTw {
    margin: 20px 0;
}
.srr {
    margin-left: 2rem;
    margin-right: 2rem;
}

/* 広告エリアに [PR] を自動付与 */
.pr::before {
    content: "[PR]";          /* 表示する文字 */
    display: block;           /* ブロック要素にして改行させる */
    color: #ccc;              /* 薄いグレー */
    font-size: 11px;          /* 控えめなサイズ */
    text-align: right;        /* 右寄せ（お好みで left や center に） */
    margin-bottom: 2px;       /* 画像との隙間調整 */
    line-height: 1;           /* 行間を詰める */
    font-family: sans-serif;  /* プレーンなフォントで */
}

/* --- 新作サイト バッジ装飾 (span用) --- */
.badge-new {
    display: inline-block;      /* これで幅や余白が効くようになります */
    background-color: #bf507c;  /* テーマカラー(ピンク) */
    color: #ffffff;             /* 白文字 */
    font-size: 0.9rem;          /* 程よい大きさ */
    font-weight: bold;
    padding: 5px 15px;          /* 内側の余白でボタンっぽく */
    border-radius: 50px;        /* 丸っこく */
    line-height: 1.2;
    margin-bottom: 8px;         /* 下のテキストとの隙間 */
    vertical-align: middle;
    letter-spacing: 0.05em;
}
@media screen and (max-width: 480px) {
    .title2 { font-size: 1.3rem; }
    div.head_inp { width: 95%; }
}