/* Basic Styles for Smartphone */

@media screen and (max-width: 640px) {
    
    /* ----- 共通 ----- */
    
    body{
        font-size:62.5%;
    }

    #contents-wrapper{
      font-size: 110%;
    }

    div#header .utility-area{
        width:auto;
    }
    div#header .utility-area h1.logo a,
    div#header .utility-area .logo a{
        margin-left:15px;
    }

    #fac-container{
        width:100%;
    }

    #fac-container #textarea{
        padding:0 20px;
    }

    div#fac-contents #fac_link{
        margin-top:10px;
        margin-left:10px;
        line-height:1.5;
    }

    div#fac-contents h1{
        font-size:175%;
        clear:both;
    }

    div.cal-rsv-contact{
        width:auto;
	    margin:30px auto 20px;
    }

    div.cal-rsv-contact address a{
        text-decoration:underline;
        position:static;
        clear:both;
        display:block;
        margin:5px 0;
        width:auto;
    }

    div.cal-rsv-contact .per_btn{
        margin: 15px auto 0;
        width: 50%;
        height: auto;
    }

    div#fac-container p.explane{
        font-size:120%;
    }

    div#fac-container p.explane span{
        width:15em;
        margin-top:0.25em;
    }
    div#fac-contents div.cal-month p{
        margin-top:1em;
    }

    div#fac-container div.calendar h2{
        font-size:240%;
    }

    #closebt{
        width:auto;
        text-align:center;
        margin:30px auto;
    }

    div#fac-container div.calendar{
        width:100%;
    }

    div.time{
        width:100%;
        margin-top:15px;
    }

    table.cal-rsv.col4 td,
    table.cal-rsv.col4 th,
    div.time.col4 span,
    div.time.col4 span:first-child{
        width:20%;
        padding-left:0;
        padding-right:0;
    }

    table.cal-rsv.col3 td,
    table.cal-rsv.col3 th,
    div.time.col3 span,
    div.time.col3 span:first-child{
        width:25%;
        padding-left:0;
        padding-right:0;
    }

    table.cal-rsv.col2 td,
    table.cal-rsv.col2 th,
    div.time.col2 span,
    div.time.col2 span:first-child{
        width:33%;
        padding-left:0;
        padding-right:0;
    }

    table.cal-rsv td,
    table.cal-rsv th{
        padding:5px;
    }
    table.cal-rsv td{
        font-size:160%;
    }
    table.cal-rsv th{
        padding:5px 0;
        font-size:125%;
    }

    #closebt a{
        width:auto;
    }

    p#fac-copy{
        margin-top:15px;
        margin-left:10px;
    }
    
    
    /* ----- 予約画面埋め込み対応用 ----- */
    
	iframe{
		display:none;
	}
    #reserveBtn {
        display: block !important;
        padding: 16px 32px;
        width: auto;
        margin: 30px 15px 20px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        position: relative;
        border-radius: 4px;
        color: #fff;
        line-height: 20px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-transition: none;
        transition: none;
        text-shadow: 0px 1px 0px #0055aa;
        border-bottom: 4px solid #002b55;
        background-color: #0055aa;
        background-image: -webkit-linear-gradient(top, #80bfff, #0055aa);
        background-image: linear-gradient(to bottom, #80bfff, #0055aa);
        box-shadow: inset 1px 1px 0 #80bfff;
    }
    #reserveBtn,
    #reserveBtn:hover {
        border-bottom: 4px solid #002b55;
        background-color: #0055aa;
        background-image: -webkit-linear-gradient(top, #80bfff, #0055aa);
        background-image: linear-gradient(to bottom, #80bfff, #0055aa);
        box-shadow: inset 1px 1px 0 #80bfff;
    }
    #reserveBtn::before,
    #reserveBtn::after {
        bottom: -1px;
        left: -1px;
        width: 200px;
        height: 50px;
        border: 1px solid #4e95dc;
        border-bottom: 1px solid #15406a;
        border-radius: 4px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-transition: none;
        transition: none;
    }
    #reserveBtn::before {
        height: 48px;
        bottom: -4px;
        border-top: 0;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 1px 1px 0px #bfbfbf;
    }
    #reserveBtn:hover {
        background: #0055aa;
        background-image: -webkit-linear-gradient(top, #0055aa, #80bfff);
        background-image: linear-gradient(to bottom, #0055aa, #80bfff);
        color: #15406a;
        text-shadow: 0px 1px 0px #80bfff;
    }
    #reserveBtn:active {
        bottom: -4px;
        margin-bottom: 4px;
        border: none;
        box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
    }
    #reserveBtn:active::before,
    #reserveBtn:active::after {
        border: none;
        box-shadow: none;
    }
}
