@charset "utf-8";

@media (max-width: 599px){
    /* スマホ用ｃｓｓ */

    /*ページの大枠設定*/
    body{
        width: 599px;
    }
    .wrapper{
        width: 100%;
        border: none;
    }


    /*メニューの幅指定*/
    .navi-menu{
        width: 100%;
        height: auto;
    }
    /*メニュー文字サイズ指定*/
    .navi-menu ul{
        margin-right: 1rem;
        padding: 0;
    }



    /*==============================
                TOP
    ===============================*/

    /*toph幅指定*/
    .top-wrapper{
        width: 100%;
        height: 250px;
       
    }

    /*top左側文字の幅指定*/
    .top-left{
        width: 150px;
        height: 250px;
        display: block;
    }

    .top-left h1{
        font-size: 2rem;
        margin-left: 30px;
    }


    /*メインビジュアルのサイズ指定*/
    .main-visual{
        width: 100%;
    }

    /*波の中の白文字のサイズ、行間変更*/
    .main-visual h2{
        font-size: 1.8rem;
        letter-spacing: 1rem;
        position: absolute;
        top: 40px;
    }

    .top-right{
        width: 599px;
        height: 250px;
    }

    /*メインビジュアル画像のサイズ変更と場所移動*/
    .top-right img {
        width: 435px;
        height: 167px;
        position: absolute;
        left: 70px;
    
    }


    /*波表現の場所移動*/
    #waveCanvas{
        width: 435px;
        height: 167px;
        position: absolute;
        top: 65px;
        left: 70px;
    }

    .wave{
        width: 513px;
        height: 250px;
    }

    /*ニュースの場所移動*/
    .news{
        position: absolute;
        top: 190px;
    }
    
    

    /*==============================
                main
    ===============================*/

    /*好きやねんflex解除*/
    .inner{
        display: block;
    }

    .main-wrapper{
        padding-top: 0;
    }

    /*画像を中央にする*/
    .inner-left {
        text-align: center;
    }
    /*煙突写真の範囲とサイズ指定*/
    .about-wrapper .inner-left {
        width: 100%;
    }
    .about-wrapper .inner-left img{
        width: 520px;
        margin-left: 5px;
    }

    /*好きやねん文言部分の幅指定*/
    .about-wrapper .inner-right{
        width: 100%;
    }

    /*プライスの幅指定*/
    .inner{
        width: 100%;
    }

    .h3 h3{
        text-align: left;
    }

    /*プライスの料金表部分の幅指定*/
    .price-wrapper .inner-left {
        width: 100%;
    }

    /*回るいりふね温泉君*/

    #character_2 {
        width: 100px;
        height: 100px;
    }
    

    /*ロビー写真サイズ指定*/
    .price-wrapper .inner-right{
        width: 100%;
    }
    .price-wrapper .inner-right img{
        width: 520px;
        margin-left: 40px;
    }

    /*==============================
                access
    ===============================*/

    /*アクセスflex解除*/
    .access-inner {
        display: block;
        
    }

    /* アクセス左側の幅指定とマージン */
    .access-left {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    /*アクセスのロビー画像サイズ指定*/
    .access-left img{
        width: 400px;
        margin: 0;
        margin-top: 10px;
    }

    /*アクセスのflex解除*/
    .access-right{
        display: block;
        width: 100%;
        background-image: url(../img/character/IrifuneOnsenKun_wallk_1.png);
        background-position: right top;
        background-position: right 5%;
        background-repeat: no-repeat;
        background-size: 30% auto;
        margin-right: 0px;
    }

    /*アクセス詳細部分マージン指定*/
    .access-right h3{
        margin-left: 100px;
    }

    .access-right ul{
        margin-left: 100px;
    }

    .access-right dl{
        margin-left: 100px;
    }
    .access-right p{
        margin-left: 100px;
    }
    
    .inner-left-top{
        text-align: left;
    }


    /*Googlemap*/

    .maps{
        width: 100%;
        
    }

    .map-left{
        margin-left: 0;
        margin: 0;
    }

    .map-left iframe{
        width: 599px;
    }

    /*トップに戻るいりふね温泉くんを非表示にします*/
    .map-right{
        display: none;
    }



    /*==============================
                ここから下層ページ
    ===============================*/
    /*==============================
                top
    ===============================*/
    /*==============================
                main
    ===============================*/
    /*好きやねんflex解除*/
    .sukiyanen-wrapper {
        display: block;
        margin-bottom: 0;
    }
    /*好きやねん画像範囲指定*/
    .sukiyanen-left {
        width: 100%;
    }
    /* 煙突画像設定 */
    .sukiyanen-left img {
    width: 100%;
    margin-left: 0;
    }

    /* 好きやねん文章 */
    .sukiyanen-right .inner p {
        font-size: 1.2rem;
        line-height: 1.8rem;
        word-break: keep-all; /* 、or 。で折り返す */
    }

    /*==============================
                施設紹介
    ===============================*/

    /* 施設紹介背景色の変更 */
    #facility-datail{
        background-color: #fffff7;
        margin-top: 45px;
        margin-bottom: 45px;
        padding: 0;
    }

    /* 浴室内イラストの非表示 */
    #img-map-wrapper{
        display: none;
    }


    
    /* ロビー右側の枠 */
    .lobby-right {
        width: 100%;
    }

    /*ロビー画像flex解除*/
    .lobby-inner {
        display: block;
    }
    
    /* ロビー 文章 */
    .lobby-right p {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }
    
    /* ロビー案内画像一覧 マージン解除*/
    .lobby-images {
        margin-left: 0;
        margin-right: 0;
    }
       
    /* 飲食コーナー幅指定とマージン解除 */
    .eat-wrapper {
        width: 100%;
        margin-bottom: 0;
    }
    /* 飲食コーナーflex解除 */
    .eat-corner {
        display: block;
    }

    /* 飲食コーナー画像一覧 */
    .eat-images {
        margin-left: 0px;
        margin-right: 0px;
    }
    
    /* ランナーズステーション幅指定 */
    .runner-wrapper {
        margin-bottom: 56.25px;
        display: block;
    }
    
    /* いりふねおんせんくんトップへ戻る画像の位置指定 */
    .IrifuneOnsenKun img {
        position: fixed;
        bottom: 0;
        right: 0;
    }
    



        
}/*レスポンシブ閉めたぐ*/