.space{
    height: 8px;
}




.gotowrite{
    position: fixed;
    bottom: 50px;
    background-color: #1e90ff;
    color: #fff;
    font-size: 33px;

    border-radius: 20px;
    padding: 10px;

    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

    width: 300px;

    display: none;

    cursor: pointer;

}


.info{
    background-color: #ffe27c;
    margin-bottom: 20px;
    /* margin-top: -30px; */
}


/*----------------------------------------------------------
	ベース
----------------------------------------------------------*/

html{
    scroll-behavior: smooth;
}

.contents{

    width:100%;
    max-width:500px;
    margin: 0 auto;
    text-align: center;

    padding-top: 10px;
    padding-bottom: 20px;

    /* **************************** */

    /* previewを中央配置するために */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* **************************** */

    /* カーニング */
    font-feature-settings: "palt";

    overflow: hidden;

}


/*----------------------------------------------------------
	ローディング
----------------------------------------------------------*/

.loading{

    text-align: center;
    width:100vw;
    height:100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    /* font-size: 25px; */
    font-size: 40px;

    z-index: 999;

}

.loading img{

    /* max-width: 450px; */
    max-width: 250px;

}

.hide{
    opacity: 0;
    visibility: hidden;

    /* transition: 0.5s; */
    /* transition: 0.3s; */
    transition: 0.1s;
}



/*----------------------------------------------------------
	ヘッダー部分 タイトル部分
----------------------------------------------------------*/

.header{
    margin-bottom: 15px;
}

/* .marquee {
    transform: translateZ(0);
    animation-delay:1s;
	animation: marquee-anim 40s linear infinite;
    white-space: nowrap;
    margin: 0px;
    font-size: 21px;
} */

/* @keyframes marquee-anim {
	0%   { transform: translate(60%, 0); }
	100% { transform: translate(-60%, 0); }
} */

.header .title{
    line-height: 1.2;
    font-size: 43px;
}




.header .catchcopy{
    font-size: 25px;
    /* width:100%; */
    /* margin-bottom: 5px; */
    display: inline-block;
}



.hash{
    margin-top: 15px;
}

.header img{
    width: 100%;
    max-width: 360px;
    height: 92px;
    object-fit: cover;
}


/*----------------------------------------------------------
	.previewエリア
----------------------------------------------------------*/


.form{
    max-width: 450px;
}


.preview{

    /* previewエリアのサイズ */
    /* width:100%; */
    min-width: 300px;

    max-width:450px;

    min-height: 330px;

    /* **************************** */

    background-color: #fff;

    border: 1px solid #ddd;

    /* **************************** */

    /* preview_textを上下中央に配置するために */
    display: flex;
    flex-direction: column;
    justify-content:center;

}

.preview_text{

    width:100%;
    max-width:450px;
    /* height: max-content; */

    /* **************************** */

    font-size:90px;
    letter-spacing: -0.5px;

}



.tweet_button{

    font-size: 30px;
    padding: 12px;

    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

    /* width:95%; */
    width:88%;

    /* 立体的なボタン */
    box-shadow: 0px 6px 1px #176cbf;

}

.tweet_button_disable{
    /* opacity: 0.5; */
    pointer-events: none; /* 二重Submitを阻止 */
    /* box-shadow: none; */

    /* 立体的なボタン */
    box-shadow: 0px 1px 1px #555;
    transform: translateY(4px);

}


/*----------------------------------------------------------
	テキストエリア
----------------------------------------------------------*/

.textarea{
    border: 4.5px solid #ddd;

    width: 95%;

    
    margin-top: 13px;
    margin-bottom: 8px;



    


    /* テキストボックスのサイズをすこし大きくする */
    box-sizing: border-box;
    font-size: 26.5px;
    /* line-height: 1.3; */

    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
    /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */

    /* border: 5px solid #ddd; */


    /* アテンション ボーダーを青くする */
    border: 5px solid #1e90ff;


    

}

.limit_text{
    text-align: right;
}


/*----------------------------------------------------------
	生成後の画面
----------------------------------------------------------*/

.generated{
    display: none;
    margin-top: 30px;
    background-color: #fff;
    border: 5px solid #ffec8e;
    line-height: 1.6;    

    max-width: 400px;

}

.generated .title{
    font-size: 38px;
}

.generated img{
    width: 90%;
    border: 1px solid #ddd;
}

.generated .catchcopy{
    font-size: 28px;
    background:linear-gradient(transparent 60%, #ff6 60%);
    display: inline-block;

    margin-bottom: 10px;
}

.generated .comment{
    font-size: 25px;
    margin-bottom: 5px;
}

.generated a{
    font-size: 30px;
    margin-bottom: 5px;
}



/*----------------------------------------------------------
	サジェストエリア
----------------------------------------------------------*/

.suggest{
    background-color: #f8f8f8;
    width: 90%;

    margin-top: 30px;

    padding-top: 10px;
    padding-bottom: 15px;

    border-radius: 5px;

    border: 1px solid #ddd;

}

.suggest a{
    display: inline-block;
    padding: 4px;
    padding-left: 7px;
    padding-right: 7px;
    font-size: 23px;
}


/*----------------------------------------------------------
	例のスタイル
----------------------------------------------------------*/

.sample{
    font-size: 55px;
    margin-top: 35px;
}

.sample * {
    margin-bottom: 20px;
}

.sample img{
    border: 1px solid #ddd;
    width:80%;

}


/*----------------------------------------------------------
	Footer
----------------------------------------------------------*/

.footer{
    /* margin-top: 30px; */
    text-align: center;
    padding-bottom: 10px;
}

.footer * {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
}

.footer img{
    border: 1px solid #ddd;
    width:80%;
    margin: auto;
    /* margin-bottom: 50px; */
}

.footer .link_heta{
    /* border: double 6px #e0fb73 !important; */
    /* border: solid 2px blue !important; */
    max-width: 300px;
}

.footer .link_twitter{
    font-size: 24px;
}

.footer .link_hima{
    /* background-color: #e0fb73; */
    text-align: center;
    /* padding: 5px; */
    font-size: 38px;
    color: crimson;
}


/*----------------------------------------------------------
	
----------------------------------------------------------*/

.maker{
    background:linear-gradient(transparent 70%, #ff6 70%);

    /* background:linear-gradient(transparent 60%, #ff6 60%); */

}


/*----------------------------------------------------------
	いらなかったら削除
----------------------------------------------------------*/

/* .catchcopy{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;

    width:100%;
    font-size: 26px;

    margin-bottom: 10px;
}

.catchcopy .slash{
    font-size: 33px;
    padding: 5px 13px;
} */