.mirai-button {

    background-color: #ea5b76;

    color: white;

    padding: 25px 40px;

    font-size: 18px;

    border: none;

    border-radius: 20px;

    cursor: pointer;

    transition: 0.3s;
}

.mirai-button:hover {

    background-color: #ea5b76;
    transform: scale(1.05);

}

.mirai-button:active {

    transform: scale(0.95);

}

h1 {

    text-align: center;

    color: #ea5b76;

}

button {

    font-size: 18px;     /* 文字大きめ */
    
    padding: 15px 25px;  /* 押しやすいサイズ */

    border-radius: 12px; /* 丸み */

    margin: 10px;

    cursor: pointer;
}

@media (max-width: 600px) {

    body {
        font-size: 18px;
        padding: 10px;
    }

    button {
        width: 100%;   /* 横いっぱい */
        font-size: 20px;
    }

}

#result {

    font-size: 20px;

    line-height: 1.6;

    margin-top: 15px;

    word-wrap: break-word;

}

body {

    max-width: 600px;

    margin: auto;

    text-align: center;

}

body {

    font-family: "Yu Gothic", sans-serif;

}


/* スマホ用フォント */

@media (max-width: 600px) {

    body {

        font-family: "Hiragino Maru Gothic ProN",
                     "Yu Gothic",
                     sans-serif;

    }

}

.Twitter-button {

    background-color: #6495cf;

    color: white;

    padding: 15px 20px;

    font-size: 14px;

    border: none;

    border-radius: 20px;

    cursor: pointer;

    transition: 0.3s;
}

body {

    background-image: url("/static/UNMEIcha.GIF");

    background-size: cover;

    background-position: center;

}

/* 半透明レイヤー */

body::before {

    content: "";

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(255, 255, 255, 0.6); /*0.6をいじって透明度調節*/

    z-index: -1;

}

/* Cropperのコンテナ制御（重要） */
.cropper-container {
    max-width: 90vw !important;
    max-height: 60vh !important;
}

/* 画像サイズ */
#image {

    width: 100%;
    max-width: 350px;

    height: auto;

    display: block;
    margin: auto;

}

/* 親は高さ固定しない！（ここ重要） */
.crop-area {

    width: 90vw;
    max-width: 350px;

    margin: auto;

}

.top-button {

    background-color: #c7b83c;

    color: white;

    padding: 15px 20px;

    font-size: 14px;

    /*border: none; */

    border-radius: 0px;

    cursor: pointer;

    transition: 0.3s;
}

/* 跳ねアニメーション */
@keyframes bounce {

    0%   { transform: translateY(0); }

    30%  { transform: translateY(-20px); }

    60%  { transform: translateY(0); }

    80%  { transform: translateY(-10px); }

    100% { transform: translateY(0); }

}

/* アニメ用クラス */
.bounce {

    animation: bounce 0.4s;

}

.countBox {

    font-size: 24px;

    background: #ffe6f2;

    border-radius: 15px;

    padding: 12px 20px;

    display: inline-block;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}

/* 数字を目立たせる */
.countNumber {

    font-size: 36px;

    font-weight: bold;

    color: #ff3399;

}

/* 文字部分 */
.countText {

    font-size: 22px;

    color: #2c2c2c;

}

.resultBox {

    background: rgba(255, 255, 255, 0.8);
    /* 白・半透明 */

    border-radius: 15px;
    /* 角丸 */

    padding: 15px;

    margin: 15px auto;

    width: 80%;
    max-width: 700px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

}

/* マルコフ文章本体 */
#result {

    font-size: 18px;

    line-height: 1.8;

    color: #333;

}

.nadenade-button {

    background-color: #ea5b76;

    color: #c7b83c;

    padding: 15px 20px;

    font-size: 24px;

    border: none;

    border-radius: 50px;

    cursor: pointer;

    transition: 0.3s;
}

.nadenade-button:hover {

    background-color: #ea5b76;
    transform: scale(1.01);

}

.nadenade-button:active {

    transform: scale(0.90);

}

.nenpyo-text {

    color: #ea5b76;

    font-weight: bold;

    background: white;

    padding: 10px;

    border-radius: 10px;

    display: inline-block;

}


.nenpyo-honubn {



    background: rgb(194, 194, 194);



    border-radius: 0px;

    display: inline-block;

}

body.sugoi-page {
    background-image: url("haikei.png");
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: top center;
}

.event-image {

    width: 300px;

    border-radius: 10px;

    margin-top: 10px;

}

#songArea {
    margin-top: 20px;
}

/* カード本体 */
.song-card {
    background: #ffffff;
    padding: 20px;
    margin-top: 20px;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    transition: 0.2s;
}

/* ホバーでちょい浮く */
.song-card:hover {
    transform: translateY(-5px);
}

/* タイトル */
.song-card h2 {
    margin: 0 0 10px 0;
}

/* コメント */
.song-card p {
    color: #555;
}

/* リンク */
.song-card a {
    margin-right: 10px;
    text-decoration: none;
    color: #ea5b76;
    font-weight: bold;
}