@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@300;400;500;700&display=swap');

/* 繝懊ョ繧｣蜈ｨ菴薙繧ｹ繧ｿ繧､繝ｫ */
body {
    background-color: #f7f7f7;
    /* 閭梧勹濶ｲ繧定ｨｭ螳 */
    margin: 0;
    /* 繝ヵ繧ｩ繝ｫ繝医菴咏區繧貞炎髯､ */
    padding: 100px 20px 20px;
    /* ナビゲーションバーの高さに合わせて余白を広めに設定 */
    color: black;
    /* 繝く繧ｹ繝医き繝ｩ繝ｼ繧帝ｻ偵↓ */
    text-align: center;
    background-size: cover;
    /* 閭梧勹逕ｻ蜒上ｒ逕ｻ髱｢蜈ｨ菴薙↓諡｡螟ｧ邵ｮ蟆 */
    position: relative;
    /* 蟄占ｦ∫ｴ�縺ｮ菴咲ｽｮ繧堤嶌蟇ｾ逧�↓ */
    min-height: 100vh;
    /* 逕ｻ髱｢縺ｮ鬮倥＆繧�100%縺ｫ */
    z-index: 1;
    /* 莉悶�隕∫ｴ�縺ｨ縺ｮ驥阪↑繧企��ｺ上ｒ險ｭ螳� */
    overflow-x: hidden;
    /* 讓ｪ譁ｹ蜷代�繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧堤┌蜉ｹ縺ｫ */
    box-sizing: border-box;
}


/* 閭梧勹逕ｻ蜒上ｒ謫ｬ莨ｼ隕∫ｴ�縺ｨ縺励※險ｭ螳� */
body::before {
    content: "";
    /* 謫ｬ莨ｼ隕∫ｴ�縺ｮ蜀�ｮｹ繧堤ｩｺ縺ｫ險ｭ螳� */
    position: absolute;
    /* 隕ｪ隕∫ｴ�縺ｫ蟇ｾ縺励※邨ｶ蟇ｾ菴咲ｽｮ謖�ｮ� */
    top: 0;
    left: 0;
    width: 100%;
    /* 讓ｪ蟷�＞縺｣縺ｱ縺�↓ */
    height: 100%;
    /* 鬮倥＆繧堤判髱｢縺�▲縺ｱ縺�↓ */
    background-image: url('../images/background.jpg');
    /* 閭梧勹逕ｻ蜒� */
    background-size: cover;
    /* 逕ｻ蜒上ｒ逕ｻ髱｢蜈ｨ菴薙↓陦ｨ遉ｺ */
    background-position: center;
    /* 閭梧勹逕ｻ蜒上�菴咲ｽｮ繧剃ｸｭ螟ｮ謠�∴ */
    background-repeat: no-repeat;
    /* 閭梧勹逕ｻ蜒上�郢ｰ繧願ｿ斐＠繧堤┌蜉ｹ縺ｫ */
    opacity: 0.4;
    /* 逕ｻ蜒上�騾乗�蠎ｦ繧定ｨｭ螳� */
    z-index: -1;
    /* 閭梧勹繧剃ｻ悶�隕∫ｴ�縺ｮ蠕後ｍ縺ｫ驟咲ｽｮ */
}

/* 蜈ｨ隕∫ｴ�縺ｮ繝輔か繝ｳ繝医ヵ繧｡繝溘Μ繝ｼ繧堤ｵｱ荳€ */
* {
    font-family: 'IBM Plex Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* 笆ｼ笆ｼ笆ｼ笆ｼ笆ｼ 縺薙％縺九ｉ繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ繝舌�縺ｮ繧ｹ繧ｿ繧､繝ｫ繧剃ｿｮ豁｣ 笆ｼ笆ｼ笆ｼ笆ｼ笆ｼ */

/* 繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ繝舌�縺ｮ繧ｹ繧ｿ繧､繝ｫ */
nav {
    background-color: white;
    padding: 0 20px;
    /* 蟾ｦ蜿ｳ縺ｮ菴咏區繧堤ｶｭ謖� */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    min-height: 60px;
    /* 笘��笘� 鬮倥＆繧貞崋螳�(height)縺九ｉ譛€蟆城ｫ倥＆(min-height)縺ｫ螟画峩 */
    height: auto;
    /* 笘��笘� 鬮倥＆繧定�蜍戊ｪｿ謨ｴ(auto)縺ｫ螟画峩 */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1), 0px -4px 10px rgba(0, 0, 0, 0.2);
    /* margin-top: 5px; */
}

/* nav縺ｮ荳ｭ縺ｮul繧ｿ繧ｰ縺ｮ繧ｹ繧ｿ繧､繝ｫ繧定ｪｿ謨ｴ */
nav ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* 笘��笘� 繝｡繝九Η繝ｼ繧呈釜繧願ｿ斐☆險ｭ螳壹ｒ霑ｽ蜉� */
    list-style: none;
    padding-left: 0;
    margin: 0;
    width: 100%;
}

/* 笘��笘� 隰弱�繝√ぉ繝�け繝懊ャ繧ｯ繧ｹ繧帝撼陦ｨ遉ｺ縺ｫ縺吶ｋ繧ｹ繧ｿ繧､繝ｫ繧定ｿｽ蜉� 笘��笘� */
#menu-toggle {
    display: none;
}

/* 笆ｲ笆ｲ笆ｲ笆ｲ笆ｲ 縺薙％縺ｾ縺ｧ繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ繝舌�縺ｮ菫ｮ豁｣ 笆ｲ笆ｲ笆ｲ笆ｲ笆ｲ */

/* 繝翫ン繧ｲ繝ｼ繧ｷ繝ｧ繝ｳ蜀��繝｡繝九Η繝ｼ鬆�岼 */
nav ul li {
    display: inline-flex;
    align-items: center;
    margin-right: 2px;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 繝｡繝九Η繝ｼ繝ｪ繝ｳ繧ｯ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
nav ul li a {
    color: black;
    text-decoration: none;
    font-size: 1rem;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* 繧｢繧ｯ繝�ぅ繝悶↑繝｡繝九Η繝ｼ鬆�岼縺ｮ繧ｹ繧ｿ繧､繝ｫ */
nav ul li a.active {
    background-color: #eaecf4;
    color: #4e73df;
    border-radius: 5px;
    font-weight: 600;
}

/* 繧｢繧､繧ｳ繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
nav ul li a i {
    margin-right: 4px;
    font-size: 1.2rem;
}

/* 繝帙ヰ繝ｼ譎ゅ�繝｡繝九Η繝ｼ繝ｪ繝ｳ繧ｯ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
nav ul li a:hover {
    background-color: #f1f3f9;
    color: #4e73df;
    border-radius: 5px;
}

/* 繝ｭ繧ｴ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.logo img {
    height: 40px;
    display: block;
    margin-right: 20px;
}

ul {
    list-style: none;
    padding-left: 0;
}

li {
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 縺顔衍繧峨○蟆ら畑縺ｮ蛹ｺ蛻�ｊ邱� */
.news-list li {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.news-list li:last-child {
    border-bottom: none;
}


h3 {
    margin: 0;
    font-size: 1.2em;
}

.news-date {
    margin-left: auto;
    font-size: 0.9em;
    color: gray;
}

/* p 繧ｿ繧ｰ縺ｮ繧ｹ繧ｿ繧､繝ｫ繧� body 逶ｴ荳九→ form 蜀�〒蛻�￠繧� */
body>p {
    font-size: 1rem;
    color: black;
    line-height: 1.6;
    max-width: 960px;
    margin: 1.5rem auto 20px;
    text-align: left;
}

/* トップレベルの見出しに余白を追加 */
h1 {
    margin-top: 10px;
    margin-bottom: 20px;
}

form p {
    font-size: 1rem;
    color: black;
    line-height: 1.6;
    margin: 5px 0;
    /* 繝輔か繝ｼ繝�蜀��p繧ｿ繧ｰ縺ｮ菴咏區繧定ｪｿ謨ｴ */
    text-align: left;
}

/* 繝輔か繝ｼ繝�縺ｮ繧ｹ繧ｿ繧､繝ｫ */
form {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box;
    margin-bottom: 20px;
}

/* 繝輔か繝ｼ繝�蜀��逕ｻ蜒上ｒ荳ｭ螟ｮ縺ｫ驟咲ｽｮ縺吶ｋ縺溘ａ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
form .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 960px;
    overflow: hidden;
}

form .image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
    object-fit: contain;
}

/* 繝ｩ繝吶Ν縺ｮ繧ｹ繧ｿ繧､繝ｫ */
label {
    display: block;
    font-size: 1rem;
    margin-bottom: 8px;
    color: black;
    text-align: left;
}

/* 繝�く繧ｹ繝亥�蜉帙ヵ繧｣繝ｼ繝ｫ繝峨ｄ繧ｻ繝ｬ繧ｯ繝医�繝�け繧ｹ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
input[type="text"],
textarea,
select {
    width: 98%;
    color: black;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 1.1rem;
    transition: border-color 0.3s;
    box-sizing: border-box;
    /* 追加：paddingによる幅の広がりを防止 */
}

/* 蜈･蜉帙ヵ繧｣繝ｼ繝ｫ繝峨↓繝輔か繝ｼ繧ｫ繧ｹ縺悟ｽ薙◆縺｣縺滓凾縺ｮ繧ｹ繧ｿ繧､繝ｫ */
input[type="text"]:focus,
textarea:focus,
select:focus {
    border-color: #4CAF50;
    outline: none;
}

/* 繝�く繧ｹ繝医お繝ｪ繧｢縺ｮ繧ｹ繧ｿ繧､繝ｫ */
textarea {
    min-height: 100px;
    resize: vertical;
}

/* 繝輔ぃ繧､繝ｫ蜈･蜉帙ヵ繧｣繝ｼ繝ｫ繝峨�繧ｹ繧ｿ繧､繝ｫ */
input[type="file"] {
    font-size: 1rem;
    padding: 10px;
    border-radius: 2px;
    margin-bottom: 15px;
}

/* 繧ｹ繝ｩ繧､繝€繝ｼ��ange�峨�繧ｹ繧ｿ繧､繝ｫ */
input[type="range"] {
    width: 100%;
    margin: 10px 0 20px;
}

/* 繝懊ち繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
button {
    background-color: #284eb4;
    color: white;
    border: none;
    padding: 10px 20px;
    /* 繝代ョ繧｣繝ｳ繧ｰ繧堤ｵｱ荳€繧ｹ繧ｿ繧､繝ｫ縺ｮ10px縺ｫ蜷医ｏ縺帙ｋ */
    font-size: 1.1rem;
    font-weight: 500;
    /* 繝輔か繝ｳ繝医�螟ｪ縺輔ｒ邨ｱ荳€ */
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: auto;
    margin-top: 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
    /* 繧ｳ繝ｳ繝�Φ繝�し繧､繧ｺ險育ｮ励ｒ邨ｱ荳€ */
}

/* 繝懊ち繝ｳ縺ｫ繝帙ヰ繝ｼ縺励◆譎ゅ�繧ｹ繧ｿ繧､繝ｫ */
button:hover {
    background-color: #5275d6;
}

/* 繝励Ο繧ｰ繝ｬ繧ｹ繝舌�縺ｮ繧ｳ繝ｳ繝�リ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.progress {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 2px;
    margin-top: 10px;
}

/* 繝励Ο繧ｰ繝ｬ繧ｹ繝舌�閾ｪ菴薙�繧ｹ繧ｿ繧､繝ｫ */
.progress-bar {
    height: 20px;
    background-color: #4caf50;
    text-align: center;
    line-height: 20px;
    color: white;
    transition: width 0.1s ease;
}

/* 隕ｪ繧ｳ繝ｳ繝�リ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.parent-container {
    text-align: left;
    margin: 20px;
}

/* 菫晏ｭ倥�繧ｿ繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.save-button {
    background-color: #068f11;
    color: white;
    border: none;
    padding: 5px 20px;
    font-size: 1rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
    width: auto;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* 菫晏ｭ倥繧ｿ繝ｳ縺ｫ繝帙ヰ繝ｼ縺励◆譎ゅ繧ｹ繧ｿ繧､繝ｫ */
.save-button:hover {
    background-color: #0baf34;
}

/* 蜃ｦ逅ｸｭ繝｡繝そ繝ｼ繧ｸ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
#processing-message {
    font-size: 1.1rem;
    color: #666;
    margin-top: 20px;
}

/* 繝く繧ｹ繝医繝悶Μ繝ｳ繧ｯ蜉ｹ譫懊繧ｹ繧ｿ繧､繝ｫ */
.blinking {
    animation: blinkingText 1.5s infinite;
}

/* 繝悶Μ繝ｳ繧ｯ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ縺ｮ螳夂ｾｩ */
@keyframes blinkingText {
    0% {
        color: black;
    }

    50% {
        color: transparent;
    }

    100% {
        color: black;
    }
}

/* 繝輔ャ繧ｿ繝ｼ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
#footer {
    background-color: rgba(255, 255, 255, 0.801);
    color: black;
    font-size: 1.0rem;
    padding: 3px 0px;
    text-align: center;
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    border-radius: 0;
    margin: 0;
}


/* 繝ｩ繧ｸ繧ｪ繝懊ち繝ｳ縺ｨ繝ｩ繝吶Ν縺ｮ讓ｪ荳ｦ縺ｳ驟咲ｽｮ */
.transcription-type-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* 繝ｩ繝吶Ν縺ｨ繝ｩ繧ｸ繧ｪ繝懊ち繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.transcription-type-container label {
    font-size: 1.1rem;
    color: black;
    cursor: pointer;
}

/* 繝ｩ繧ｸ繧ｪ繝懊ち繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.transcription-type-container input[type="radio"] {
    margin-right: 0px;
    transform: translateY(-7px);
}

/* 繝ｩ繧ｸ繧ｪ繝懊ち繝ｳ縺ｫ繝輔か繝ｼ繧ｫ繧ｹ縺励◆譎ゅ�繧ｹ繧ｿ繧､繝ｫ */
.transcription-type-container input[type="radio"]:focus {
    outline: 2px solid #5275d6;
}


.underline {
    text-decoration: underline;
}


.thumbnail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

.thumbnail-grid .video {
    flex: 1 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
    box-sizing: border-box;
}

.thumbnail-grid .video p {
    text-align: center;
    font-size: 1rem;
    margin-top: 0px;
}


.thumbnail-grid .video img {
    width: 100%;
    height: auto;
}

.thumbnail-grid .video a {
    text-decoration: none;
    color: black;
    text-align: center;
    display: block;
    margin-top: 5px;
}

/* 繝ｩ繧ｸ繧ｪ繝懊ち繝ｳ縺ｮ繧ｻ繝�ヨ繧呈ｨｪ荳ｦ縺ｳ縺ｫ縺励▽縺､縲√Λ繧ｸ繧ｪ繝懊ち繝ｳ縺ｨ繝ｩ繝吶Ν繧偵そ繝�ヨ縺ｧ謇ｱ縺� */
.radio-group {
    display: flex;
    flex-wrap: wrap;
}

/* 繝ｩ繧ｸ繧ｪ繝懊ち繝ｳ縺ｨ繝ｩ繝吶Ν繧偵そ繝�ヨ縺ｫ縺吶ｋ */
.radio-item {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    margin-bottom: 10px;
}

/* 繝ｩ繧ｸ繧ｪ繝懊ち繝ｳ繧偵Λ繝吶Ν縺ｨ荳ｭ螟ｮ謠�∴縺ｫ縺吶ｋ */
.radio-item input[type="radio"] {
    vertical-align: middle;
    margin-right: 5px;
}


.highlight {
    background: linear-gradient(to bottom, transparent 60%, #f9f871 40%);
    padding: 0.2em;
    font-weight: bold;
}

.wavy-underline {
    background-color: rgba(255, 255, 0, 0.3);
    text-decoration: underline;
    text-decoration-color: #f9f871;
    text-decoration-style: wavy;
    padding: 0.2em;
}

/* 繝ｬ繧ｹ繝昴Φ繧ｷ繝門ｯｾ蠢�: 繝｢繝舌う繝ｫ繧ｵ繧､繧ｺ (768px莉･荳�) */
@media (max-width: 768px) {

    /* 笘��笘� 繝悶Ξ繝ｼ繧ｯ繝昴う繝ｳ繝医ｒ768px縺ｫ謌ｻ縺� 笘��笘� */
    body {
        padding-top: 75px !important;
    }

    .container {
        margin-top: 10px !important;
    }

    nav {
        flex-direction: column;
        height: auto;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
    }

    nav ul li {
        width: 100%;
    }

    nav ul li a {
        text-align: center;
        padding: 15px 0;
    }

    h1 {
        font-size: 1.5rem; /* スマホ向けに小さくして折り返しを防ぐ */
        margin-top: 5px;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 1.5rem;
    }

    body>p {
        font-size: 1rem;
    }

    input[type="text"],
    textarea,
    select,
    button {
        font-size: 1rem;
    }

    button {
        padding: 10px;
    }
}

/* 繝ｬ繧ｹ繝昴Φ繧ｷ-繝門ｯｾ蠢� (480px莉･荳�) */
@media (max-width: 480px) {
    h1 {
        font-size: 1.25rem; /* さらに狭い画面向けに縮小 */
    }

    h2 {
        font-size: 1.25rem;
    }

    body>p {
        font-size: 0.9rem;
    }

    form {
        padding: 15px;
    }
}

/* 繝ｭ繧ｰ繧､繝ｳ陦ｨ遉ｺ逕ｨ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.user-nav-item {
    margin-left: auto;
    display: flex;
    align-items: center;
    padding-right: 20px;
    white-space: nowrap;
}

/* 繝ｭ繧ｰ繧｢繧ｦ繝医ヵ繧ｩ繝ｼ繝�縺ｮ繧ｹ繧ｿ繧､繝ｫ隱ｿ謨ｴ */
.user-nav-item form {
    margin-left: 15px;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    margin-bottom: 0;
}

/* 繝ｭ繧ｰ繧｢繧ｦ繝医�繧ｿ繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ繧剃ｻ悶�繝懊ち繝ｳ縺ｨ蟆代＠螟峨∴繧� */
.user-nav-item button {
    font-size: 1rem;
    margin: 0;
    padding: 8px 15px;
}

/* 笆ｼ笆ｼ笆ｼ笆ｼ笆ｼ 繝上Φ繝舌�繧ｬ繝ｼ繝｡繝九Η繝ｼ逕ｨ縺ｮ繝ｬ繧ｹ繝昴Φ繧ｷ繝悶せ繧ｿ繧､繝ｫ�医％縺薙°繧芽ｿｽ險假ｼ� 笆ｼ笆ｼ笆ｼ笆ｼ笆ｼ */

/* --- 逕ｻ髱｢蟷�′768px莉･荳九↓縺ｪ縺｣縺溷�ｴ蜷医↓驕ｩ逕ｨ --- */
@media (max-width: 768px) {

    /* 1. 繝上Φ繝舌�繧ｬ繝ｼ繧｢繧､繧ｳ繝ｳ�井ｸ画悽邱夲ｼ峨ｒ陦ｨ遉ｺ縺吶ｋ */
    .menu-icon {
        display: flex;
        /* Flexbox縺ｧ陦ｨ遉ｺ */
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 25px;
        cursor: pointer;
        z-index: 1001;
        /* 繝｡繝九Η繝ｼ繧医ｊ謇句燕縺ｫ陦ｨ遉ｺ */
        position: fixed;
        /* 逕ｻ髱｢蜿ｳ荳翫↓蝗ｺ螳� */
        top: 18px;
        right: 20px;
    }

    .menu-icon span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #333;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

    /* 2. 繝｡繝九Η繝ｼ蜈ｨ菴薙ｒ蛻晄悄迥ｶ諷九〒縺ｯ逕ｻ髱｢螟悶↓髫�縺� */
    nav ul {
        display: none;
        /* 笘��笘� 蛻晄悄迥ｶ諷九〒縺ｯ髱櫁｡ｨ遉ｺ 笘��笘� */
        position: fixed;
        top: 0;
        right: 0;
        width: 250px;
        /* 繝｡繝九Η繝ｼ縺ｮ蟷 */
        height: 100%;
        background-color: white;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        padding-top: 60px;
        /* 上部に余白 */
        flex-direction: column;
        /* 鬆岼繧堤ｸｦ荳ｦ縺ｳ縺ｫ */
        align-items: flex-start;
        /* 蟾ｦ謠∴縺ｫ */
    }

    nav ul li {
        width: 100%;
        text-align: left;
    }

    nav ul li a,
    .user-nav-item {
        padding: 15px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    /* 3. 笘��笘� 繧｢繧､繧ｳ繝ｳ繧ｯ繝ｪ繝�け譎ゑｼ医メ繧ｧ繝�け繝懊ャ繧ｯ繧ｹ縺薫N�峨�鬲疲ｳ� 笘��笘� */
    #menu-toggle:checked~ul {
        display: flex;
        /* 繝｡繝九Η繝ｼ繧定｡ｨ遉ｺ縺吶ｋ */
    }

    /* 4. �医♀縺ｾ縺托ｼ峨い繧､繧ｳ繝ｳ繧偵€古励€榊魂縺ｫ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ縺輔○繧� */
    #menu-toggle:checked~.menu-icon span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    #menu-toggle:checked~.menu-icon span:nth-child(2) {
        opacity: 0;
    }

    #menu-toggle:checked~.menu-icon span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
}

/* 繝懊ち繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.btn {
    /* 隕九◆逶ｮ縺ｮ險ｭ螳� */
    display: inline-block;
    /* 繝悶Ο繝�け隕∫ｴ�縺ｮ繧医≧縺ｫ謖ｯ繧玖�繧上○繧� */
    padding: 12px 24px;
    /* 蜀��縺ｮ菴咏區 (荳贋ｸ�12px, 蟾ｦ蜿ｳ24px) */
    background-color: #007bff;
    /* 閭梧勹濶ｲ (髱�) */
    color: white;
    /* 譁�ｭ苓牡 (逋ｽ) */
    text-align: center;
    /* 譁�ｭ励ｒ荳ｭ螟ｮ謠�∴縺ｫ */
    text-decoration: none;
    /* 繝�く繧ｹ繝医�荳狗ｷ壹ｒ豸医☆ */
    border: none;
    /* 譫�邱壹ｒ豸医☆ */
    border-radius: 2px;
    /* 隗偵ｒ蟆代＠荳ｸ縺上☆繧� */
    font-size: 1.1rem;
    /* 譁�ｭ励�繧ｵ繧､繧ｺ */
    font-weight: 500;
    /* 譁�ｭ励ｒ荳ｭ螟ｪ縺ｫ邨ｱ荳€ */
    cursor: pointer;
    /* 繝槭え繧ｹ繧ｫ繝ｼ繧ｽ繝ｫ繧呈欠縺ｮ蠖｢縺ｫ */
    transition: background-color 0.3s;
    /* 閭梧勹濶ｲ縺�0.3遘偵°縺代※螟牙喧縺吶ｋ繧医≧縺ｫ */
}

/* 繝懊ち繝ｳ縺ｫ繝槭え繧ｹ繧剃ｹ励○縺溘→縺阪�繧ｹ繧ｿ繧､繝ｫ */
.btn:hover {
    background-color: #0056b3;
    /* 蟆代＠豼�＞髱偵↓螟画峩 */
}

/* 蛛懈ｭ｢繝懊ち繝ｳ逕ｨ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.btn-stop {
    background-color: #e74c3c !important;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1.1rem;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 10px;
}

.btn-stop:hover {
    background-color: #c0392b !important;
}


/* ========================================================== */
/* AI險倅ｺ狗函謌舌�繝ｼ繧ｸ逕ｨ縺ｮ繝ｬ繧､繧｢繧ｦ繝郁ｪｿ謨ｴ (縺薙％縺九ｉ霑ｽ險�)
/* ========================================================== */

/* --- 笘��笘� 繝壹�繧ｸ蜈ｨ菴薙�繝｡繧､繝ｳ繧ｳ繝ｳ繝�Φ繝��繧ｳ繝ｳ繝�リ 笘��笘� --- */
.container {
    width: 100%;
    max-width: 1200px;
    /* 逕ｻ髱｢蜈ｨ菴薙�譛€螟ｧ蟷� */
    margin: 2rem auto;
    padding: 0 20px;
    /* 蟾ｦ蜿ｳ縺ｮ菴咏區 */
    box-sizing: border-box;
}

.container h1 {
    text-align: center;
}

.container>p {
    /* h1縺ｮ逶ｴ荳九�p繧ｿ繧ｰ縺ｮ縺ｿ荳ｭ螟ｮ謠�∴ */
    text-align: center;
}


/* --- 笘��笘� 蜈･蜉帙ヵ繧ｩ繝ｼ繝�縺ｨ邨先棡陦ｨ遉ｺ繧ｨ繝ｪ繧｢繧剃ｸｭ螟ｮ謠�∴縺ｫ縺吶ｋ縺溘ａ縺ｮ繝ｩ繝�ヱ繝ｼ 笘��笘� --- */
.card-container {
    max-width: 960px;
    /* 繧ｫ繝ｼ繝芽�菴薙�譛€螟ｧ蟷�ｒ縲∵里蟄倥�form繧ｹ繧ｿ繧､繝ｫ縺ｫ蜷医ｏ縺帙ｋ */
    margin: 0 auto;
    /* 蟾ｦ蜿ｳ縺ｮ繝槭�繧ｸ繝ｳ繧定�蜍輔↓縺励※荳ｭ螟ｮ謠�∴ */
}

/* 笘��笘� 譌｢蟄倥�form繧ｹ繧ｿ繧､繝ｫ繧剃ｸ頑嶌縺阪�陬懷ｼｷ 笘��笘� */
.card-container form {
    margin-bottom: 0;
    /* 繝ｩ繝�ヱ繝ｼ縺後≠繧九�縺ｧ縲’orm閾ｪ菴薙�荳九�菴咏區縺ｯ荳崎ｦ� */
}

/* 笘��笘� 邨先棡陦ｨ遉ｺ繧ｨ繝ｪ繧｢縺ｮ繧ｹ繧ｿ繧､繝ｫ 笘��笘� */
.card-container .results {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* --- 邨先棡陦ｨ遉ｺ繧ｨ繝ｪ繧｢蜀��隧ｳ邏ｰ繧ｹ繧ｿ繧､繝ｫ --- */
.results .result-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 1.8em;
}

.results h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
    font-size: 1.3em;
}

.results .result-input {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    margin-bottom: 0.5rem;
    padding: 0.8rem;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    font-size: 1em;
}

.article-body {
    line-height: 1.8;
}

.article-body img {
    width: 100%;
    height: auto;
    display: block;
    /* 菴呵ｨ医↑陦碁俣繧呈ｶ医☆縺ｮ縺ｫ譛牙柑 */
    margin: 1.5rem 0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.article-body .image-caption,
.hero-section .image-caption {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin-top: -1rem;
    /* 逕ｻ蜒上→縺ｮ髢馴囈繧定ｩｰ繧√ｋ */
    margin-bottom: 2rem;
    font-style: italic;
    line-height: 1.4;
}

.article-body p {
    margin: 1.5rem 0;
    text-align: left;
    /* 谿ｵ關ｽ繧ょｷｦ謠�∴繧貞ｾｹ蠎� */
}

.export-buttons {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* --- AI險倅ｺ狗函謌舌�繝ｼ繧ｸ縺ｮ繝懊ち繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ --- */
/* 縲悟次遞ｿ菴懈�縲阪�繧ｿ繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.card-container .submit-button {
    display: inline-block;
    /* 笘� 讓ｪ蟷�ｒ繧ｳ繝ｳ繝�Φ繝�↓蜷医ｏ縺帙ｋ */
    width: auto;
    /* 笘� 讓ｪ蟷�ｒ閾ｪ蜍戊ｪｿ謨ｴ縺ｫ */
    padding: 12px 24px;
    /* 笘� 譬｡豁｣繝懊ち繝ｳ縺ｫ蜷医ｏ縺帙※菴咏區繧定ｪｿ謨ｴ */
    background-color: #284eb4;
    /* 笘� 譬｡豁｣繝懊ち繝ｳ縺ｮ濶ｲ縺ｫ蜷医ｏ縺帙ｋ */
    color: white;
    border: none;
    text-decoration: none;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 2px;
    /* 笘� 譬｡豁｣繝懊ち繝ｳ縺ｫ蜷医ｏ縺帙※隗剃ｸｸ繧定ｪｿ謨ｴ */
    transition: background-color 0.3s ease;
    margin-top: 10px;
    margin-bottom: 5px;
}

.card-container .submit-button:hover {
    background-color: #5275d6;
    /* 繝帙ヰ繝ｼ濶ｲ繧よ�｡豁｣繝懊ち繝ｳ縺ｫ蜷医ｏ縺帙ｋ */
}

/* 縲瑚ｨ倅ｺ九�繧ｨ繧ｯ繧ｹ繝昴�繝医€阪�繧ｿ繝ｳ縺ｮ繧ｳ繝ｳ繝�リ */
.export-buttons {
    margin-top: 1.5rem;
    display: flex;
    /* 笘� flexbox繧剃ｽｿ縺｣縺ｦ讓ｪ荳ｦ縺ｳ縺ｫ */
    justify-content: center;
    /* 笘� 荳ｭ螟ｮ縺ｫ蟇�○繧� */
    gap: 1rem;
    /* 笘� 繝懊ち繝ｳ髢薙�髫咎俣 */
}

/* 縲係ord菫晏ｭ倥€阪€悟�逕ｻ蜒丈ｿ晏ｭ倥€阪�繧ｿ繝ｳ縺ｮ繧ｹ繧ｿ繧､繝ｫ */
.export-buttons .button {
    display: inline-block;
    width: auto;
    padding: 12px 24px;
    background-color: #284eb4;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s;
}

.export-buttons .button:hover {
    background-color: #5275d6;
}

/* ========================================================== */
/* 繝峨Λ繝�げ��ラ繝ｭ繝��繧ｨ繝ｪ繧｢逕ｨ縺ｮ繧ｹ繧ｿ繧､繝ｫ (縺薙％縺九ｉ霑ｽ險�)
/* ========================================================== */

.drop-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 25px;
    /* 蟆代＠繧ｳ繝ｳ繝代け繝医↓ */
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    background-color: #f9f9f9;
    margin-top: 5px;
    /* 繝ｩ繝吶Ν縺ｨ縺ｮ髢馴囈 */
    margin-bottom: 10px;
    /* 繝輔ぃ繧､繝ｫ蜷崎｡ｨ遉ｺ繧ｨ繝ｪ繧｢縺ｨ縺ｮ髢馴囈 */
}

.drop-area.highlight {
    border-color: #007bff;
    /* 繝峨Λ繝�げ荳ｭ縺ｮ譫�邱壹�濶ｲ */
    background-color: #e9f5ff;
    /* 繝峨Λ繝�げ荳ｭ縺ｮ閭梧勹濶ｲ */
}

.drop-area p {
    margin: 0;
    color: #555;
    text-align: center;
    /* p繧ｿ繧ｰ繧ゆｸｭ螟ｮ謠�∴繧貞ｾｹ蠎� */
    line-height: 1.5;
    /* 陦碁俣繧定ｪｿ謨ｴ */
}

.file-name-display {
    margin-top: 5px;
    margin-bottom: 15px;
    /* 荳九�隕∫ｴ�縺ｨ縺ｮ髢馴囈 */
    font-style: italic;
    color: #333;
    text-align: left;
    min-height: 1.2em;
    /* 繝輔ぃ繧､繝ｫ蜷阪′陦ｨ遉ｺ縺輔ｌ縺ｦ縺�↑縺上※繧るｫ倥＆繧堤｢ｺ菫� */
}

/* static/css/common.css 縺ｮ荳€逡ｪ荳九↓霑ｽ險� */

/* --- 繝偵�繝ｭ繝ｼ繧､繝｡繝ｼ繧ｸ縺ｮ繧ｹ繧ｿ繧､繝ｫ --- */
.hero-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 2rem;
    /* 譛ｬ譁�→縺ｮ髢薙↓菴咏區繧定ｨｭ縺代ｋ */
    border-radius: 8px;
    /* 隗偵ｒ蟆代＠荳ｸ縺上☆繧� */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* --- 繝偵�繝ｭ繝ｼ繧､繝｡繝ｼ繧ｸ荳九�繝｡繧､繝ｳ繧ｿ繧､繝医Ν縺ｮ繧ｹ繧ｿ繧､繝ｫ --- */
.hero-title {
    font-size: 2em;
    /* 繝輔か繝ｳ繝医し繧､繧ｺ繧貞､ｧ縺阪￥ */
    font-weight: bold;
    text-align: left;
    margin-top: 1.5rem;
    /* 逕ｻ蜒上→縺ｮ髢馴囈 */
    margin-bottom: 2rem;
    /* 譛ｬ譁�→縺ｮ髢馴囈 */
    line-height: 1.4;
}

/* 險倅ｺ区悽譁��縺ｮ騾壼ｸｸ縺ｮ隕句�縺�(h2)縺ｮ繧ｹ繧ｿ繧､繝ｫ縺ｨ蛹ｺ蛻･ */
.article-body h2 {
    font-size: 1.6em;
    /* 騾壼ｸｸ縺ｮ蟆剰ｦ句�縺励�蟆代＠蟆上＆縺� */
    font-weight: bold;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #333;
    text-align: left;
}

/* ========================================================== */
/* 繝輔か繝ｼ繝�蜈･蜉帶ｬ��蜿ｳ遶ｯ蛻�ｌ蟇ｾ遲厄ｼ亥�騾壹�譛€蟆丈ｿｮ豁｣迚茨ｼ� */
/* ========================================================== */

/* 蜈･蜉帷ｳｻ縺ｯ縺吶∋縺ｦ border-box 縺ｧ蟷�ｨ育ｮ励☆繧� */
input,
textarea,
select,
button {
    box-sizing: border-box;
    max-width: 100%;
}

/* 繝�く繧ｹ繝育ｳｻ蜈･蜉帙� width:100% 縺ｫ邨ｱ荳€ */
input[type="text"],
input[type="file"],
textarea,
select,
input[type="range"] {
    width: 100%;
}

/* ========================================================== */
/* 邨ｱ荳€繝懊ち繝ｳ繧ｹ繧ｿ繧､繝ｫ�亥�繧｢繝励Μ蜈ｱ騾夲ｼ� */
/* ========================================================== */

/* 繝懊ち繝ｳ蝓ｺ譛ｬ繧ｹ繧ｿ繧､繝ｫ */
.btn-primary,
.btn-danger,
.btn-success,
.btn-secondary {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 5px;
    box-sizing: border-box;
}

/* 繝励Λ繧､繝槭Μ繝懊ち繝ｳ�磯搨濶ｲ��- 荳ｻ隕√↑繧｢繧ｯ繧ｷ繝ｧ繝ｳ逕ｨ */
.btn-primary {
    background-color: #284eb4;
    color: white;
}

.btn-primary:hover {
    background-color: #5275d6;
    box-shadow: 0 2px 8px rgba(40, 78, 180, 0.3);
}

.btn-primary:disabled {
    background-color: #b0b0b0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 繝�Φ繧ｸ繝｣繝ｼ繝懊ち繝ｳ�郁ｵ､濶ｲ��- 蜑企勁繝ｻ蛛懈ｭ｢逕ｨ */
.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.btn-danger:disabled {
    background-color: #b0b0b0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 繧ｵ繧ｯ繧ｻ繧ｹ繝懊ち繝ｳ�育ｷ題牡��- 菫晏ｭ倥�螳御ｺ�畑 */
.btn-success {
    background-color: #28a745;
    color: white;
}

.btn-success:hover {
    background-color: #218838;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.btn-success:disabled {
    background-color: #b0b0b0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* 繧ｻ繧ｫ繝ｳ繝€繝ｪ繝懊ち繝ｳ�医げ繝ｬ繝ｼ��- 蜑ｯ谺｡逧�↑繧｢繧ｯ繧ｷ繝ｧ繝ｳ逕ｨ */
.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.btn-secondary:disabled {
    background-color: #b0b0b0;
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- 桜のエフェクト用スタイル (共通) --- */
.sakura-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.sakura {
    position: absolute;
    background-color: #ffdbed;
    border-radius: 100% 0 100% 100%;
    opacity: 0.8;
    pointer-events: none;
    animation: fall linear infinite, sway ease-in-out infinite;
}

@keyframes fall {
    0% {
        top: -10%;
        transform: rotate(0deg);
    }

    100% {
        top: 110%;
        transform: rotate(360deg);
    }
}

@keyframes sway {

    0%,
    100% {
        margin-left: 0;
    }

    50% {
        margin-left: 50px;
    }
}