*{
    max-width: 100%;
}


body {
    background-color: #00C3D0;
    margin: 0% auto;
    font-family: 'Kiwi Maru', serif;
}

main{
    max-width: 393px;       /*iphone16の横幅、bodyではなくmainに、かつ固定値にはしないでおく*/
    width: 90%;
    height: 80%;
    margin: 5% auto;
}

.notyf__toast {
    background: #F7F7F8;
    color: orange;
    font-weight: 700;
    min-height: 100px !important;
    max-width: 450px !important;
    font-size: 16px !important;
}


/* 2. 中の画像（バトンアイコン）を容器いっぱいに表示する */
.notyf__toast--info .baton-icon_notf {
    width: 100% !important;    /* 容器（40px）いっぱいに広げる */
    height: 100% !important;
    object-fit: contain !important; /* 比率を保ったまま大きくする */

}

/* 1. アイコンが入る「容器」自体を大きく広げる */
.notyf__icon {
     /* 容器の幅を広げる */
    /* width: 60px !important;    */
    /* min-width: 60px !important; */
    /* 容器の高さを広げる */
    /* height: 70px !important;    */
    margin-right: 15px !important; /* 文字との間に余裕を作る */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;

    width: 80px !important;
    min-width: 80px !important;
    height: 80px !important;
}

.baton-icon_notf{
    display: block;
    /* アイコンのサイズ */
    width: 60px;  
    height: 60px;
    /* ここで画像のパスを指定する！ */
    background-image: url('../img/Baton_pass_hachimaki.PNG'); 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.notyf__wrapper {
    height: 100% ;
    align-items: center ;
    box-sizing: border-box;
}

.notyf__message {
    white-space: pre-line;
}

.notyf__dismiss{
    background: #00C3D0;
    height: 100% ;
    width: 40px ;
}

.notyf__toast  .notyf__dismiss-btn{
    opacity: 1  !important;
}

.notyf-custom .notyf__ripple {
  display: none !important;
}

/* スマホ用 */
@media (max-width: 480px) {
    .notyf__toast {
        max-width: 300px !important;
        font-size: 14px !important;
    }
    .notyf__icon {
        width: 60px !important;
        min-width: 60px !important;
        height: 60px !important;
    }
    .notyf__dismiss{
        background: #00C3D0;
        height: 100%  !important;
        width: 30px  !important;
    }
    .notyf__dismiss-btn{
        width: 30px;
    }
}

.flash-messages{
    text-align: center;
}

.flash-error{
    background-color: red;
    color: white;
}

/* .flash-success{
    background-color: blue;
    color: white;
} */