/* 全体 */
body {
    margin: 0;
    min-height: 100vh;
    font-family: "Yu Gothic", "DotGothic16","Zen Maru Gothic","LXGW Marker Gothic",sans-serif,"Special Elite", system-ui;
    background-color: #f5f1e8;
    font-weight: 400;
    font-style: normal;
}

/* 入力画面　*/
.top-page{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 本の表紙 */
.book-cover {
    width: 90%;
    max-width: 400px;
    padding: 40px 25px;

    text-align: center;

    background-image: url("../images/red_book.jpg"); 
    background-size: cover;
    background-position: center;

    border-radius: 12px;

    box-shadow:
        0 8px 20px rgba(0,0,0,0.2);
     
}

.book-cover h3 {
    margin: 35px 0 20px;

    font-size: 1.2rem;
    color: #f5f1e8;
    text-shadow:
        2px 2px 4px rgba(60,11,11,0.4);
}

.book-title h1 {
    margin: 30px 80px 0;     
    white-space:nowrap;

    font-size: 2rem;
    color: #e7c16f;
    text-shadow:
        2px 2px 4px rgba(0,0,0,0.4);
}

.book-title h3 {

    margin:0 0 10px;
    
    font-size: 1rem;
    color: #e7c16f;

    text-shadow:
        2px 2px 4px rgba(60, 11, 11, 0.4);
}

/* 区切り線　*/
hr {
    border-top: 5px double #d8a23d;
    width: 80%;    
    text-align: center;
}

/* 入力フォーム */
.form-group {
    margin: 0 15px 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: none;
    border-radius: 6px;
}

/* ボタン */
button {
    margin-top: 15px;
    padding: 12px 30px;
    border: none;
    border-radius: 30px;

/*    background-color: #d8a23d; */

    background: linear-gradient(
        to bottom,
        #e7c16f,
        #c7922f
    );

    color: white;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.error-popup{
    width: fit-content;
    max-width: 90%;
    white-space: nowrap;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color:red;
    font-weight:bold;
}

/* 出力画面　*/
/* ヘッダー */
.output-header{
    width:100%;
    background:rgba(255,255,255,0.9);
    padding:8px 20px;
    box-sizing:border-box;
}

/* 戻るボタン */
.back-button{
    font:0.8rem "Yu Gothic",sans-serif;
    text-decoration-line: underline;
    color:#2575ff;
}

/* ストーリーエリア　*/
/* 共通 */
.story-area{
    padding: 120px 0 30px;
    background-size:100% auto;
    background-position:top center;
    background-repeat:no-repeat;
    display:flex;
    justify-content: center;
}
.story-card{
    width:100%;
    max-width: 500px;
    text-align:center;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
}
.story-header{
    padding-top: 30px;
    background-size:100% 100%;
    background-position:top center;
    background-repeat:no-repeat;
    font-size:1.2rem;
    font-weight:bold;
    letter-spacing:3px;
}
.story-main{
    min-height:40vh;
    background-size:100% auto;
    background-position:top center;
    background-repeat:repeat-y;
}
.story-title{
    color:#5c3d10;
    font-size: 2.0rem;
    font-weight:bold;
    margin:5px 0 30px;
}
.story-text{
    text-align:left;
    line-height:1.9;
    color:#333;
    font-size: 1.0rem;
    white-space: pre-wrap;
}
.story-footer{
    height:60px;
    background-size:100% 100%;
    background-position:bottom center;
    background-repeat:no-repeat;
}
/* RPG */
.mode-rpg{
    font-family: "DotGothic16",sans-serif;
}
.mode-rpg .story-title{
    margin:0 80px 30px;
}
.mode-rpg .story-text{
    margin:0 60px;
}

/* RPG：ギルド依頼書 */
.template-guild .story-area{
    background-image:
        url("../images/guild_background.jpg");
}
.template-guild .story-header{
    background-image:
        url("../images/guild_card_01.png");        
    color:#ff0000;
}
.template-guild .story-main{
    background-image:
        url("../images/guild_card_02.png");
}
.template-guild .story-footer{
    background-image:
        url("../images/guild_card_03.png");
}


/* RPG：王国からの指令 */
.template-kingdom{
    background:#eaebe5
}
.template-kingdom .story-area{
    background-image:
        url("../images/kingdom_background.jpg");
}
.template-kingdom .story-card{
    background-image:
        url("../images/kingdom_card.jpg");
}
.template-kingdom .story-header{
    padding: 15px 0;
    background-image:
        url("../images/kingdom_card_01.png");
    color:#ffffff;
}
.template-kingdom .story-main{
    background-image:
        url("../images/kingdom_card_02.png");
}
.template-kingdom .story-footer{
    background-image:
        url("../images/kingdom_card_03.png");
}
.template-kingdom .story-text{
    margin:0 65px;
}


/* RPG：酒場の噂 */
.template-rumor .story-area{
    background-image:
        url("../images/rumor_background.jpg");
}
.template-rumor .story-header{
    background-image:
        url("../images/rumor_card_01.jpg");
    padding:50px 0 0 60px;
}
.template-rumor .story-main{
    background-image:
        url("../images/rumor_card_02.jpg");
}
.template-rumor .story-footer{
    background-image:
        url("../images/rumor_card_03.jpg");
}
.template-rumor .story-headline{
    text-align:left;
    color:#ffae00;
}
.template-rumor .story-title{
    color:#ffffff;
}
.template-rumor .story-text{
    color:#ffffff;
}

/* movie */
.mode-movie{
    font-family: "Yu Gothic",sans-serif;
    background: #4f4f4f;
}
.mode-movie .story-title{
    margin:0 50px 30px;
}
.mode-movie .story-text{
    margin:0 40px;
}

/* movie：宇宙叙事詩 */
.template-space .story-area{
    background-image:
        url("../images/space_background_01.jpg");
    background-size:cover;
    background-position:top;
}

.template-space .story-header{
    background-image:
        linear-gradient(
            rgba(255,255,255,0.2),
            rgba(255,255,255,0.2)
        ),
        url("../images/space_background_04.jpg");
}
.template-space .story-headline{
    margin-top:0;
    color:#ffffff;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.template-space .story-main{
    background-image:
        linear-gradient(
            rgba(255,255,255,0.2),
            rgba(255,255,255,0.2)
        ),
        url("../images/space_background_02.jpg");
    background-position: bottom;

}
.template-space .story-title{
    font-weight:bold;
    color:#ffffff;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;

}
.template-space .story-text{
    font-weight:bold;
    color:#ffffff;
    text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
.template-space .story-footer{
    background-image:
        linear-gradient(
            rgba(255,255,255,0.2),
            rgba(255,255,255,0.2)
        ),    
        url("../images/space_background_03.jpg");
}


/* movie：スパイアクション */
.template-spy .story-area{
    background-image:
        url("../images/spy_background.jpg");
}
.template-spy .story-header{
    padding:10px 0 60px;
    background-image:
        url("../images/spy_card_01.jpg");
}
.template-spy .story-headline{
    color:#ff0000;
    font-family: "Special Elite", system-ui;
    display: inline-block;
    padding:10px 10px 5px;
    margin:10px 0;
    border-top: solid 5px #ff0000;
    border-bottom: solid 5px #ff0000;
}
.template-spy .story-main{
    padding-top:10px;
    background-image:
        url("../images/spy_card_02.jpg");
}
.template-spy .story-footer{
    background-image:
        url("../images/spy_card_03.jpg");
}


/* movie：ハリウッド風予告 */
.template-hollywood{
    font-family: "LXGW Marker Gothic", sans-serif;
}
.template-hollywood .story-area{
    background-image:
        url("../images/hollywood_background.jpg");
}
.template-hollywood .story-header{
    padding-top: 50px;
    background-image:
        url("../images/hollywood_card_01.jpg");
}
.template-hollywood .story-headline{
    color:#4c95fd;
    margin:18px 0 15px;
    text-shadow: 1px 1px 0 #fef7db, -1px 1px 0 #fef7db, 1px -1px 0 #fef7db, -1px -1px 0 #fef7db;

}
.template-hollywood .story-main{
    background-image:
        url("../images/hollywood_card_02.jpg");
}
.template-hollywood .story-title{
    color:rgb(225, 93, 93);
}
.template-hollywood .story-footer{
    height:150px;
    background-image:
        url("../images/hollywood_card_03.jpg");
}


/* cat */
.mode-cat{
    font-family: "Zen Maru Gothic", sans-serif;
    background: #c0dc6e;
    color:#366029;
}

.mode-cat .story-area{
    background-image:
        url("../images/cat_background.jpg");
}

.mode-cat .story-card{
    max-width: 400px;
}
.mode-cat .story-header{
    padding-top:30px;
    background-image:
        url("../images/cat_card_01.png");
}
.mode-cat .story-main{
    background-image:
        linear-gradient(
            rgba(255,255,255,0.3),
            rgba(255,255,255,0.3)
        ),
        url("../images/cat_card_02.png");
}
.mode-cat .story-footer{
    height:40px;
    background-image:
        url("../images/cat_card_03.png");
}
.mode-cat .story-headline{
    margin:10px 0 0;
    color:#f19adc;
}
.mode-cat .story-title{
    padding:20px 20px 20px;
}
.mode-cat .story-text{
    line-height:2.1;
    margin:0 30px;
    font-weight:bold;
    text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}



/* アイテムエリア */
.tips-area{
    width:100%;
}
.tips-border{
    height:30px;
    background-size: auto 100%;
    background-position: top;
    background-repeat:no-repeat;
}
.tip-card{
    display: flex;
    gap:12px;
    width:85%;
    max-width:500px;
    min-height:90px;
    margin:15px auto;
    padding:15px;
    border-radius:8px;
}
.tip-icon{
    width: 60px;
    font-size:1.8rem;
    display:flex;
    justify-content:center;
    align-items:flex-start;
}
.icon1{
    margin:0;
    width:90%;
    min-height:90px;
    background-size:100% auto;
    background-position: center;
    background-repeat:no-repeat;
}
.icon2{
    margin:0;
    width:90%;
    min-height:90px;
    background-size:100% auto;
    background-position: center;
    background-repeat:no-repeat;
}
.icon3{
    margin:0;
    width:90%;
    min-height:90px;
    background-size:100% auto;
    background-position: center;
    background-repeat:no-repeat;
}
.tip-content{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-left:20px;
}
.tip-label{
    font-weight:bold;
    font-size:1.2rem;
}
.tip-text{
    line-height:1.6;
    font-size:1rem;
    white-space: pre-wrap;
}

/* rpg */
.mode-rpg .tips-area{
    background:#05004e;
    border-top:10px double #ffd580;
    border-bottom:10px double #ffd580;
}
.mode-rpg .tip-card{
    border:4px solid #ffd580;
    background:#070068;
    color:#fff7e3;
}
.mode-rpg .icon1{
    background-image:
        url("../images/rpg_icon1.png");
}
.mode-rpg .icon2{
    background-image:
        url("../images/rpg_icon2.png");
}
.mode-rpg .icon3{
    background-image:
        url("../images/rpg_icon3.png");
}

/* movie */
.mode-movie .tips-area{
    background: #3c3c3c;
    border-top:6px double #f5f1e8;
    border-bottom:6px double #f5f1e8;
}
.mode-movie .tip-card{
    border:4px solid #4f4f4f;
    background:#f5f1e8;
    color:#4f4f4f;
}
.mode-movie .icon1{
    background-image:
        url("../images/movie_icon1.png");
}
.mode-movie .icon2{
    background-image:
        url("../images/movie_icon2.png");
}
.mode-movie .icon3{
    background-image:
        url("../images/movie_icon3.png");
}

/* cat */
.mode-cat .tips-border{
    background-image: 
        url("../images/cat_border.png");
}
.mode-cat .tip-card{
    border:2px dotted #917b71;
    background:#ffffff;
}
.mode-cat .icon1{
    background-image:
        url("../images/cat_icon1.png");
}
.mode-cat .icon2{
    background-image:
        url("../images/cat_icon2.png");
}
.mode-cat .icon3{
    background-image:
        url("../images/cat_icon3.png");
}

/* 締めメッセージ */
.output-footer{
    width:100%;
    background:rgba(255,255,255,0.9);
    padding:10px 0;

    text-align: center;
    font-weight: bold;
    color:#5c5c5c;
}