@charset "UTF-8";@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap');

/* --- 1. 土台：全ページ共通 --- */
body {
    margin: 0; padding: 0;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    background-color: #FBF9AA !important;
    color: #333;
    display: flex; flex-direction: column; align-items: center;
}

main {
    width: 100%; max-width: 500px;
    padding: 20px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center;
}

/* --- 2. ヘッダー：ここからボタン設定を除外しました --- */
header {
    width: 100%;
    padding: 10px 0;
    text-align: center;
}

header a {
    /* ヘッダーのロゴリンクにはボタンのデザインを当てない */
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    margin: 0 !important;
}

header img {
    height: 35px !important;
    width: auto !important;
    max-width: 90% !important;
    display: block;
    margin: 0 auto !important;
}

/* --- 3. メインビジュアルやキャラクター画像 --- */
.main-img, main > img, .diag-char, #main-type-icon {
    max-width: 90% !important;
    height: auto !important;
    margin: 0 auto 15px auto !important;
    display: block !important;
}

/* 設問エリアの高さ固定（4行分を確保） */
.question-text {
    height: 110px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    margin: 5px 0 15px 0 !important;
}

/* 1画面に収めるためにキャラ画像を少し制限 */
.diag-char {
    max-height: 160px !important;
}

/* --- 4. ボタン：固定と沈む演出を統一 --- */
main a, main button, .diag-button, .library-link-btn {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 280px !important; height: 50px !important;
    margin: 10px auto !important;
    background-color: #fff !important;
    border: 3px solid #f39800 !important;
    border-radius: 50px !important;
    color: #333 !important; font-weight: bold !important;
    text-decoration: none !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: 0 4px 0 #e69100 !important;
    position: relative;
    top: 0;
}

/* 押した時に沈む */
main a:active, main button:active, .diag-button:active {
    top: 4px !important;
    box-shadow: none !important;
}

/* --- 5. SNSボタン：これらは個別にサイズ固定 --- */
.sns-button-grid {
    display: flex !important; justify-content: center !important;
    gap: 10px !important; width: 100% !important; margin: 10px 0 !important;
}

.sns-btn {
    width: 100px !important; height: 40px !important;
    padding: 0 !important; border-radius: 50px !important;
    border: none !important; color: #fff !important;
    font-size: 0.8rem !important; box-shadow: none !important;
}
.x-btn { background: #000 !important; }
.line-btn { background: #06C755 !important; }
.save-btn { background: #3182eb !important; }

/* --- SNSシェアの見出しをセンタリング --- */
.share-label {
    text-align: center !important;
    width: 100%;
    margin-bottom: 10px;
}

/* --- 6. スコア表とカード --- */
.diag-card, .result-card, .score-box, .summary-detail-box, .sub-ranking-container {
    background: #ffffff !important; border: 3px solid #f39800 !important;
    border-radius: 20px; padding: 20px; width: 100% !important;
    max-width: 450px; margin-bottom: 20px; box-sizing: border-box;
}

.score-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; width: 100% !important; }
.score-item { border: 2px solid #f39800 !important; border-radius: 12px !important; padding: 8px 2px !important; background: #fff !important; }
.score-value { font-weight: bold; color: #f39800; }

footer { margin: 20px 0; font-size: 0.7rem; text-align: center;}

/* 要望②：メイン結果エリアの文字間隔と配置 */
.result-card {
    text-align: center; /* センタリング */
}

.type-prefix {
    margin-bottom: 5px !important; /* 「あなたは…」の下余白を最小限に */
    font-size: 1rem;
}

#top-type-name {
    margin-top: 0 !important; /* 「タイプ名」の上余白を消して詰める */
    font-size: 2rem;
    color: #f39800;
}

/* 要望⑤：見出しをセンタリングし、黄色にする */
.summary-title, .result-title {
    text-align: center; color: #f39800;
    padding: 8px 0;
    margin: 0 auto 15px auto;
    border-radius: 10px;
    width: 90%; /* 横幅を少し絞ると綺麗です */
    font-size: 1.1rem;
}

/* 要望⑦：サブタイプ画像を横に並べる */
.sub-ranking-list {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.sub-type-item {
    text-align: center;
    width: 100px;
    cursor: pointer;
}

.sub-type-item img {
    width: 80px !important;
    height: auto;
    border-radius: 10px;
    border: 2px solid #f39800;
}

.sub-type-label {
    font-size: 0.8rem;
    font-weight: bold;
    display: block;
    margin-top: 5px;
}

/* キャッチコピー：大きく、太く、改行を有効に */
#type-catchcopy {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    line-height: 1.6 !important;
    margin: 15px 0 !important;
    white-space: pre-wrap; /* \n での改行を反映させる設定 */
    text-align: center;
}

/* ハッシュタグ：小さく、オレンジ色に */
#type-hashtags {
    font-size: 0.85rem !important;
    color: #f39800 !important; /* 九柱オレンジ */
    line-height: 1.8 !important;
    text-align: center;
    padding: 0 10px;
}

/* ① 画像をちょうどいいサイズに */
#main-type-icon {
    width: 180px !important; /* でかすぎず、小さすぎず */
    margin: 10px auto !important;
}

/* ② スコアを正方形っぽく改行させる */
.score-item {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    align-items: center;
    justify-content: center;
    height: 70px !important; /* 高さを出して正方形に近づける */
    font-size: 0.85rem;
}
.score-value {
    display: block; /* 改行させる */
    margin-top: 5px;
}

/* ④ サブタイプの囲みを消す */
.sub-type-item img {
    border: none !important; /* 囲みなし */
    width: 60px !important;
}

/* ⑤ 見出しの下にオレンジの切り取り線 */
.summary-title {
    border-bottom: 2px dashed #f39800 !important; /* 点線（切り取り線風） */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* 真ん中の「わからない」ボタン（2番目）だけ色をグレーにする */
main .answer-btns button:nth-child(2),
main .diag-card button:nth-child(2) {
    background-color: #f0f0f0 !important;
    border-color: #ccc !important;
    box-shadow: 0 4px 0 #bbb !important;
    color: #666 !important;
}

/* --- ボタンの色分け（3レベル診断用） --- */
.level-btn {
    /* 背景色：メインより少し濃いオレンジ（重すぎない） */
    background-color: #e67e22 !important; 
    
    /* 文字色：白のままで視認性確保 */
    color: #fff !important;
    
    /* ボーダー：さらに一段階濃い茶色系で引き締める */
    border: 3px solid #d35400 !important;
    
    /* 影：オレンジに馴染む深い影（黒ではなく同系色の濃い色） */
    box-shadow: 0 4px 0 #a04000 !important;
    
    margin-bottom: 20px !important;
}