@charset "UTF-8";

@media screen and (max-width: 768px) {
    
/* ==========================================================================
   Top Header
   ========================================================================== */
    
    .site-header.top,
    .site-header-top{
        background:#5185c5;
        display:table;
        padding:23px 0 2px 0;
        width:100%;
    }
    .site-header .logo{
        display:table-cell;
        margin:0;
        padding:0;
        width:80%;
        vertical-align:middle;
    }
    .site-header .logo span{
        line-height:0;
        padding:0 0 0 15px;
        margin:0;
        font-size:40px;
        color:#fff;
    }
    .site-header .lang-navi,
    .site-header .global-navi{
        display:none;
    }
    .inquiry{
        display:none;
    }

/* ==========================================================================
   Size 
   ========================================================================== */
    .container{
        background:#e4e4e4;
        padding:10px 15px;
    }

/* ==========================================================================
   Top Size 
   ========================================================================== */
    .container .icatch .signboard .direction{
        font-size:13px;
        width:90px;
    }
    .container .icatch .signboard .marquee{
        font-size:13px;
        padding:2px 5px;
        left:90px;
        width:100%;
    }
    .mainimage{
        padding:5px 0;
    }
    .mainimage img{
        width:100%;
    }
    .news .inner .scroll-pane{
        height:100px;
        overflow:auto;
    }

/* ==========================================================================
   Routenavi
   ========================================================================== */
    .route-navi{
        margin:0 0 15px 0;
    }
    .route-navi .inner{
        background:#fff;
        display:-webkit-box;
        display:-moz-box;
        display:box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -moz-box-align:center;
        box-align:center;
        flex-align:center;
        text-decoration:none;
        color:#231815;
        margin:0 0 5px 0;
    }
    .route-navi .inner .image{
        -webkit-box-ordinal-group:1;
        -moz-box-ordinal-group:1;
        box-ordinal-group:1;
        flex-order:1;
        width:30%;
    }
    .route-navi .inner .image img{
        width:100%;
    }
    .route-navi .inner .title{
        -webkit-box-flex:1;
        -moz-box-flex:1;
        box-flex:1;
        display:-ms-flexbox;
        display:flex;
        width:100%;
    }
    .route-navi .inner h2{
        display:-webkit-box;
        display:-moz-box;
        display:box;
        -webkit-box-align:center;
        -moz-box-align:center;
        box-align:center;
        flex-align:center;
        -webkit-box-ordinal-group:2;
        -moz-box-ordinal-group:2;
        box-ordinal-group:2;
        flex-order:2;
        font-size:15px;
        font-weight:normal;
        line-height:1;
        margin:0;
        padding:0 0 0 10px;
        position:relative;
    }
    .route-navi .inner h2 span{
        font-size:11px;
        display:block;
        margin:0 0 0 6px;
    }
    .route-navi .inner h2 span[class^="icon-"], .route-navi .inner h2 span[class*=" icon-"]{
        color:#7f7f7f;
        position:absolute;
        top:0;
        right:10px;
    }

/* ==========================================================================
   Index Navi
   ========================================================================== */
    
    .index-navi{
        margin:0 0 15px 0;
    }

/* ==========================================================================
   Pagenavi
   ========================================================================== */
    .page-navi{
        display:table;
    }
    .page-navi .inner{
        background:#fff;
        float:left;
        text-decoration:none;
        color:#231815;
        margin:0 2% 10px 0;
        width:49%;
    }
    .page-navi .inner:nth-child(2n){
        margin-right:0;
    }
    .page-navi .inner .image img{
        width:100%;
    }
    .page-navi .inner .title h2{
        margin:0;
        padding:0;
        font-size:15px;
        font-weight:normal;
        line-height:1;
        margin:0;
        padding:8px 0;
        text-align:center;
    }
    .page-navi .inner .title h2.multiline{
        font-size:13px;
        line-height:1.2;
    }

/* ==========================================================================
   Footer
   ========================================================================== */
    .footer-navi{
        position:relative;
        overflow:hidden;
    }
    .footer-navi ul{
        float:left;
        left:50%;
        position:relative;
        list-style:none;
        padding:10px 0;
        margin:0;
    }
    .footer-navi ul li{
        float:left;
        left:-50%;
        position:relative;
        padding:0 5px;
        font-size:11px;
    }
    .site-footer address{
        font-size:8px;
        font-style:normal;
        text-align:center;
        padding:0 0 10px 0;
    }

/* ==========================================================================
   Second Size 
   ========================================================================== */
    .page-icatch img{
        width:100%;
    }
    .page .contents h1,
    .page .wide-contents h1{
        font-size:20px;
        padding:12px 10px;
    }
    .page .contents h2,
    .page .wide-contents h2{
        font-size:18px;
        padding:8px 10px;
        margin:0;
    }
    .page .contents h3,
    .page .wide-contents h3{
        font-size:16px;
        margin:0 0 25px 0;
    }
    .contents-box{
        padding:15px 15px 30px 15px;
        margin:0 0 30px 0;
    }
    .page .contents p,
    .page .wide-contents p{
        font-size:14px;
    }
    .page .contents p.lead,
    .page .wide-contents p.lead{
        font-size:14px;
        padding:10px 0;
    }
    .download-area{
        border:none;
        padding:0;
        margin:0 0 40px 0;
    }
    .page .contents .download-area p,
    .page .wide-contents .download-area p{
        font-size:14px;
        text-align:left;
        padding:0 0 10px 0;
    }
    .page .wide-contents .download-area .button{
        padding-left:0;
        padding-right:0;
        width:100%;
        font-size:16px;
    }
    .page .wide-contents .download-area .button:before{
        content:"";
        display:inline-block;
        height:30px;
        padding:0 0 0 10px;
        float:left;
    }
    .page .wide-contents .download-area .button [class^="icon-"],
    .page .wide-contents .download-area .button [class*=" icon-"]{
        font-size:26px;
        margin:0 0 0 10px;
    }
    .page .contents .left h3{
        padding:8 10px;
        margin:0;
    }
    .page .contents .left .local-navi ul li a{
        font-size:14px;
    }
    .page .contents .left .local-navi ul ul li a{
        font-size:12px;
    }
    .page .contents .button-wrap.follow{
        margin:0;
    }
    .page .contents .button-wrap .column-left,
    .page .wide-contents .button-wrap .column-left,
    .page .contents .button-wrap .column-right,
    .page .wide-contents .button-wrap .column-right{
        display:inline-block;
        width:100%;
        padding:0;
    }
    .page .contents .button-wrap .button{
        padding-left:0;
        padding-right:0;
        width:100%;
        margin:10px 0;
    }
    .page .wide-contents .button-wrap .button{
        padding-left:0;
        padding-right:0;
        width:100%;
        margin:10px 0;
        text-align:left;
        position:relative;
    }
    .page .wide-contents .button-wrap .button:before{
        content:"";
        display:inline-block;
        height:30px;
        padding:0 0 0 20px;
        float:left;
    }
    .page .wide-contents .button-wrap .button [class^="icon-"],
    .page .wide-contents .button-wrap .button [class*=" icon-"]{
        font-size:26px;
        position:absolute;
        top:29px;
        right:20px;
    }
    .page .wide-contents .button-wrap.small .button [class^="icon-"],
    .page .wide-contents .button-wrap.small .button [class*=" icon-"]{
        font-size:20px;
        position:absolute;
        top:20px;
        right:20px;
    }
    .page .contents .right .signboard .direction,
    .page .wide-contents .right .signboard .direction{
        font-size:13px;
        width:62px;
    }
    .page .contents .right .signboard .marquee,
    .page .wide-contents .right .signboard .marquee{
        font-size:13px;
        left:62px;
        width:100%;
    }
    .areainfo{
        width:100%;
    }
    .areainfo .column-left{
        width:100%;
        display:inline-table;
        padding-right:0;
    }
    .areainfo .column-left img{
        padding:0 0 10px 0;
    }
    .areainfo .column-right{
        width:100%;
        display:inline-table;
    }
    .sightseeing{
        width:100%;
    }
    .sightseeing .column-left{
        width:100%;
        display:inline-table;
        padding-right:0;
    }
    .sightseeing .column-left img{
        padding:0 0 10px 0;
    }
    .sightseeing .column-right{
        width:100%;
        display:inline-table;
    }
    .travel-ic{
        padding:6px 0 0 0;
        width:80px;
    }
    .news-list dt{
        position:initial;
        padding:0 0 6px 0;
    }
    .news-list dd{
        padding:0 0 10px 0;
        margin:0 0 6px 0;
        border-bottom:1px dotted #929292;
    }

/* ==========================================================================
   Second local navi
   ========================================================================== */
    .page .container.index .left{
        display:none;
    }
    .page .wide-contents .left h3{
        background:#231815;
        border:none;
        color:#fff;
        font-size:16px;
        font-weight:normal;
        line-height:1;
        padding:8px 10px;
        margin:0;
    }
    .page .wide-contents .left .local-navi{
        margin:0 0 30px 0;
    }
    .page .wide-contents .left .local-navi p{
        margin:0;
        padding:0;
    }
    .page .wide-contents .left .local-navi ul{
        list-style:none;
        padding:0;
        margin:0;
    }
    .page .wide-contents .left .local-navi ul li a{
        color:#231815;
        border-bottom:1px solid #a6a6a6;
        display:block;
        font-size:14px;
        text-decoration:none;
        line-height:1;
        padding:16px 0;
    }
     .page .wide-contents .left .local-navi ul ul li a{
        color:#231815;
        font-size:12px;
        padding:16px 0 16px 20px;
     }
    .page .wide-contents .left .local-navi ul li a .icon-marker{
        display:none;
    }
    .page .wide-contents .left .local-navi ul li.active a .icon-marker{
        color:#949494;
        display:inline-block;
        font-size:12px;
        margin:0 5px 0 0;
        vertical-align:top;
        position:absolute;
        right:0;
        top:20px;
    }
    .page .wide-contents .left .local-navi ul li a .icon-hyphen{
        color:#231815;
        font-size:6px;
        margin:0 5px 0 0;
        vertical-align:top;
    }
    .page .wide-contents .left .local-navi ul li.active a{
        position:relative;
    }
    .page .wide-contents .left .local-navi ul li.banner a{
        border:none;
    }
    .page .wide-contents .left .local-navi ul li.banner a img{
        width:100%;
    }
/* ==========================================================================
   Form
   ========================================================================== */

    .form-group dt,
    .confirm-group dt{
        font-size:14px;
        padding:10px 0 0 0;
    }
    .form-group dd,
    .confirm-group dd{
        font-size:14px;
        border-bottom:1px dashed #bfbfbf;
        padding:10px 0 10px 0;
        margin:0;
    }
    .form-group .option,
    .form-group .necessary{
        margin:0;
    }

/* ==========================================================================
   Display None
   ========================================================================== */
    
    .sp-none{
        display:none;
    }
    .table-wrap{
        width:100%;
        overflow:auto;
        -webkit-overflow-scrolling: touch;
    }

/* ==========================================================================
   Pagetop navi
   ========================================================================== */
    .page-top{
        background:#dcdcdc;
        padding:0;
        width:100%;
        text-align:right;
    }
    .page-top p{
        margin:0 auto;
    }
    .page-top a{
        background:#231815;
        text-decoration:none;
        color:#fff;
        padding:6px 0;
        text-align:center;
        display:block;
    }
    .page-top a:hover {
        text-decoration:none;
        background:#33221e;
    }

}
@media screen and (min-width:681px) and (max-width: 768px) {

/* ==========================================================================
   tablet
   ========================================================================== */
    .site-header.top,
    .site-header-top{
        padding:42px 0 5px 0;
    }
    .sp-menu-button a{
        font-size:16px;
        text-align:center;
    }
    .sp-menu-button a span{
        font-size:48px;
        padding:0 0 13px 0;
    }
    .site-header .logo span{
        font-size:64px;
    }
    .signboard .marquee p{
        font-size:16px;
    }
    .news h1{
        font-size:24px;
    }
    .news h1 a{
        font-size:16px;
    }
    .news .inner ul li{
        font-size:16px;
    }
    .route-navi .inner h2{
        font-size:22px;
    }
    .route-navi .inner h2 span{
        font-size:16px;
    }
    .page-navi .inner .title h2{
        font-size:22px;
    }
    .footer-navi ul li{
        font-size:16px;
    }
    .site-footer address{
        font-size:14px;
    }
}

@media screen and (orientation: landscape) and (max-width: 768px) {

/* ==========================================================================
   Smartphone landscape
   ========================================================================== */
    .site-header.top,
    .site-header-top{
        padding:32px 0 5px 0;
    }
    .site-header .logo span{
        font-size:48px;
    }
}

@media screen and (orientation: landscape) and (max-width: 1024px) {

/* ==========================================================================
   Tablet landscape
   ========================================================================== */
    .page-top p{
        width:940px;
    }
}