/* ベーススタイル */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

.container {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-width: 480px;
    text-align: center;
    width: 100%;
    opacity: 0;
    animation: fadeIn 0.8s forwards;
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
}

header h3 {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0.5rem;
}

header h1 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 2rem;
}

/* ロゴ画像のスタイル */
.logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.logo-image {
    max-width: 100px;
    height: auto;
}

/* フォームの基本スタイル */
.form-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    width: 100%;
    margin-bottom: 2.5rem; /* 各項目の間隔を広げる */
    position: relative; /* スペース確保のため */
}

/* 工程の注意テキスト用余白 */
.form-group.phase-group {
    margin-bottom: 3rem; /* 注意文の分だけ余白を追加 */
}

.label {
    display: block;
    font-size: 0.9rem;
    color: #f36c21;
    margin-bottom: 0.5rem;
    text-align: left;
}

.selection-row {
    display: flex;
    gap: 1.5rem;
    flex-direction: column; /* 1カラム配置 */
    margin-bottom: 1.5rem;
    width: 100%;
    align-items: center;
}

.small-label {
    font-size: 0.8rem;
    color: #f36c21;
    margin-bottom: 0.5rem;
    text-align: left;
}

/* 年数と工程のラベルの位置を調整 */
.label, .small-label {
    display: block;
    font-size: 0.9rem;
    color: #f36c21;
    margin-bottom: 0.5rem;
    text-align: left;
    width: 100%;
}

/* ドロップダウンと小さなドロップダウンの幅を統一 */
.dropdown, .small-dropdown {
    width: 100%; /* 100%幅で統一 */
    padding: 0.8rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    color: #333;
    transition: border-color 0.3s ease;
    margin-top: 0.5rem;
}

/* スキル・工程・年数間のスペース調整 */
.form-group .dropdown + span,
.form-group .small-dropdown + span {
    margin-top: 0.5rem; /* エラーメッセージ用 */
}

.dropdown:focus, .small-dropdown:focus {
    border-color: #f36c21;
}

/* ボタンスタイル */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #333333;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    animation: pulse 2s infinite;
}

.button:hover {
    background-color: #555555;
}

/* 戻るボタンのスタイル（result.html用） */
.back-button {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #4a4a4a;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.back-button:hover {
    background-color: #333333;
}

/* ダウンロードボタンのスタイル（result.html用） */
.download-button {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #4a7ea5; /* 薄暗い青 */
    border: none;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 1rem;
}

.download-button:hover {
    background-color: #355d76;
}

/* 結果ページのテキストスタイル */
.result-text {
    font-size: 1.2rem;
    color: #333;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.salary-highlight {
    font-size: 2.5rem;
    font-weight: bold;
    color: #f36c21;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeInScale 1.2s ease forwards;
}

/* 追加情報のスタイル（result.html用） */
.additional-info {
    text-align: left;
    font-size: 0.9rem;
    color: #555;
    margin-top: 1.5rem;
    width: 100%;
}

.additional-info h3 {
    font-size: 1rem;
    color: #f36c21;
    margin-bottom: 0.5rem;
}

.additional-info ul {
    padding-left: 1.5rem;
    list-style-type: disc;
    margin-top: 0.5rem;
}

.additional-info p {
    margin-top: 1rem;
    line-height: 1.5;
}

/* 参考メッセージのスタイル（index.html用） */
.disclaimer {
    font-size: 0.8rem;
    color: #888;
    margin-top: 1rem;
    text-align: center;
}

/* エラーメッセージのスタイル */
.error-message {
    color: red;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    display: block;
}

/* アニメーション */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
    header h1 {
        font-size: 1.2rem;
    }
    .button, .back-button, .download-button, .line-button {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    .salary-highlight {
        font-size: 2rem;
    }
}

/* 強調文のスタイル */
.highlight-text {
    font-size: 1rem;
    color: #f36c21;
    font-weight: bold;
    background-color: #fff4e5;
    padding: 0.5rem;
    border-radius: 5px;
    margin-top: 1rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.small-red-text {
    color: #f36c21; /* 明るめのオレンジ */
    font-size: 0.9rem;
    margin-top: 0.3rem;
    text-align: center; /* 左揃え */
    width: 100%; /* プルダウンと同じ幅に合わせる */
}

/* カジュアル面談ボタンのスタイル */
.casual-button {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff; /* 白文字 */
    background-color: #007acc; /* 新しい青色 */
    border: none;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}

.casual-button:hover {
    background-color: #005f99; /* 少し暗い青色 */
}


.line-button {
    display: inline-block;
    margin-top: 1.5rem;
    width: 100%;
    padding: 1rem;
    font-size: 1rem; /* ボタン内テキストのサイズ */
    font-weight: bold;
    color: #ffffff;
    background-color: #00b900; /* LINEのグリーン */
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* ホバー時の動きのみ維持 */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* ボタンの影 */
}

.line-button:hover {
    background-color: #009b00;
}


/* カジュアル面談セクションのスタイル */
.casual-consultation {
    background-color: #f0f8ff; /* 優しい青色の背景 */
    border: 1px solid #cce7ff; /* 淡い青のボーダー */
    border-radius: 8px; /* 丸みをつける */
    padding: 1.5rem;
    margin: 1.5rem 0; /* セクション間の余白 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 柔らかい影 */
    text-align: center; /* 中央揃え */
}

/* カジュアル面談の説明文 */
.casual-text {
    font-size: 1rem;
    color: #333; /* 濃いグレー */
    margin-bottom: 1rem; /* ボタンとの間の余白 */
    line-height: 1.6; /* 読みやすい行間 */
}

/* カジュアル面談ボタン */
.casual-button {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff; /* 白文字 */
    background-color: #007acc; /* 指定された青色 */
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.casual-button:hover {
    background-color: #005f99; /* 少し暗い青色 */
}

/* 公式LINEセクションのスタイル */
.line-promotion {
    background-color: #ffffff; /* 白の背景 */
    border: 1px solid #b8e6b8; /* 淡いグリーンのボーダー */
    border-radius: 8px; /* 角を丸める */
    padding: 1.5rem;
    margin: 2rem 0; /* 上下の余白を調整 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 柔らかい影 */
    width: 100%;
}

.line-promotion h3 {
    font-size: 1.2rem;
    color: #00b900; /* LINEグリーン */
    margin-bottom: 1rem;
    text-align :center;
}

.line-intro {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    color: #333;
    line-height: 1.6;
}

.gift-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.gift-list li {
    margin-bottom: 1rem;
    color: #444;
    line-height: 1.6;
}

.gift-list strong {
    color: #00b900; /* LINEグリーン */
    font-weight: bold;
}

.line-recommended {
    font-size: 1rem;
    margin-top: 1.5rem;
    color: #333;
    font-weight: bold;
}

.recommend-list {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
    color: #555;
    line-height: 1.6;
}

/* 全体の枠スタイル */
.highlight-box {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 特徴のタイトル */
.highlight-box h3 {
    font-size: 1.2rem;
    color: #007acc;
    margin-bottom: 1rem;
    font-weight: bold;
    text-align: center;
}

/* 特徴の紹介文 */
.feature-intro {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    margin-bottom: 1rem;
    text-align: left;
}

/* 特徴のリスト */
.feature-list {
    padding-left: 1.5rem;
    margin-top: 1rem;
    list-style-type: disc;
}

.feature-list li {
    font-size: 1rem;
    color: #555;
    margin-bottom: 0.8rem;
}

.feature-list li strong {
    color: #007acc;
}



/* 左寄せスタイル */
.feature-list,
.gift-list,
.recommend-list {
    text-align: left; /* 左寄せ */
    margin-left: 1rem; /* 余白を追加 */
}

.feature-list li,
.gift-list li,
.recommend-list li {
    margin-bottom: 0.5rem; /* 項目間のスペースを確保 */
    line-height: 1.6; /* 行間を調整して読みやすく */
}

.line-recommended {
    text-align: left; /* 左寄せ */
    margin-top: 1rem;
}

.line-intro,
.feature-intro {
    text-align: center; /* 中央揃え */
}

/* ラベルのスタイル */
.form-group label {
    display: block;
    font-size: 1rem; /* サイズを少し大きく */
    font-weight: bold; /* 太字にして目立たせる */
    color: #f36c21; /* 明るめのオレンジ */
    margin-bottom: 1rem;
    text-align: left;
    width: 90%; /* プルダウン幅に合わせる */
}

/* スキルと年数のダミースペース用 */
.form-group .spacer {
    height: 1.5rem; /* 工程下の注意テキストと同じ高さ */
}

/* Tweetボタンのスタイル */
.tweet-button {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #000000; /* 黒 */
    border: none;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-top: 1rem;
    transition: background-color 0.3s ease;
}

.tweet-button:hover {
    background-color: #333333;
}

.tweet-logo {
    width: 24px;
    height: 24px;
}