@charset "utf-8";

/* === 共通 === */
body {
    background: #fff;
    color: #000000;
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Meiryo", "MS Pゴシック", sans-serif;
    font-size: 14px;
    margin: 0;
}

td {
    margin: 0;
    padding: 0 8px 0 0;
}

#img-banner {
    width: 75%;
}

.container {
    max-width: 100%;
}

section .container{
    display: flex;
    flex-flow: column;
}

section .navigation {
    display: flex;
    flex-flow: row;
}
    /* --- (PC用)共通 --- */
    @media only screen and (min-width: 768px) {
        #img-banner {
            width: 100%;
        }

        section .container {
            flex-flow: row;
        }
        
        section .navigation {
            flex-flow: column;
            margin: 0;
            padding: 0 15px;
        }
    }
    
/* === (スマホ)共通ヘッダー（スライドショー部） === */
header {
    background-color: #b9eaff;
    height: 220px;
}

#slideshow {
    position: relative;
    width: 409px;
    height: 220px;
    margin: 0;
}

#slideshow img {
    position: absolute;
    width: 409px;
    height: 220px;
    top: 0;
    left: 0;
    z-index: 8;
    opacity: 0.0;
    margin: 0 auto;
}

#slideshow img.active {
    z-index: 10;
    opacity: 1.0;
}

#slideshow img.last-active {
    z-index: 9;
}

    /* --- (PC用)共通ヘッダー（スライドショー部） --- */
    @media only screen and (min-width: 768px) {
        header {
            height: 403px;
        }
        
        #slideshow {
            width: 750px;
            height: 403px;
            margin: 0;
        }
        
        #slideshow img {
            width: 750px;
            height: 403px;
            margin: 0 auto;
        }
    }
    
/* === (スマホ)共通フッター（屋号・所在地部） === */
.footer {
    padding: 10px 20px 20px 20px;
    border-bottom: 3px solid #6495ed;
}

.copyright-name {
    padding: 30px 0 0 0;
    font-size: 14px;
    font-weight: bold;
}
.copyright {
    padding: 0px 0 30px 0;
    font-size: 11px;
}

    /* --- (PC用)共通フッター（屋号・所在地部） --- */
    @media only screen and (min-width: 768px) {
    }

/* === index(スマホ上)メイン（ニュース部） === */
main {
    float: left;
    padding: 0;
    border-left: 2px dashed #6495ed;
    border-right: 2px dashed #6495ed;
    margin: 0 auto;
}

    /* --- (PC)メイン（ニュース部） --- */
    @media only screen and (min-width: 768px) {
        main {
            flex: 1 1 auto;
            order: 2;
            padding: 20px 0 0 0;
        }
    }

/* === index(スマホ中)サイドバー右 === */
.sidebar-r {
    float: left;
    padding: 0;
    margin: 0 auto;
}

    /* --- (PC)サイドバー右 --- */
    @media only screen and (min-width: 768px) {
        .sidebar-r {
            flex: 0 0 25%;
            order: 3;
            padding: 10px 10px 0 10px;
        }
    }

/* === index(スマホ下)サイドバー左 === */
.sidebar-l {
    float: left;
    padding: 0;
    margin: 0 auto;
}

    /* --- (PC)サイドバー左 --- */
    @media only screen and (min-width: 768px) {
        .sidebar-l {
            flex: 0 0 25%;
            order: 1;
            padding: 10px 10px 0 20px;
        }
    }

/* === index(スマホ)中部道の駅リンク（googleマップ＆５県ボタン部） === */
.sic-link {
    float: left;
    padding: 0;
}

.gmap {
    padding: 0 0 0 20px;
}

.prefecture ul {
	display: flex;
	flex-flow: column;
}

.prefecture li {
	flex: 1 1 auto;
	list-style-type: none;
    padding: 0 20px 10px 10px;
}

    /* --- (PC)中部道の駅リンク（googleマップ＆５県ボタン部） --- */
    @media only screen and (min-width: 768px) {
        .prefecture ul {
            flex-flow: row;
            padding: 0 10px;
        }
        
        .prefecture li {
            padding: 0 20px 0 0;
        }    
    }



/* === siclink(スマホ)中部各道の駅ページ === */
section .navigation {
    display: flex;
    flex-flow: row;
    margin: 0;
    padding: 0;
}

.link-nav-nagano {
	flex: 0 0 40%;
    margin: 0;
    padding: 0;
}

.link-nav-gifu {
	flex: 0 0 40%;
    margin: 0;
    padding: 0;
}

.link-nav-shizuoka {
	flex: 0 0 40%;
    margin: 0;
    padding: 0;
}

.link-nav-aichi {
	flex: 0 0 40%;
    margin: 0;
    padding: 0;
}

.link-nav-mie {
	flex: 0 0 40%;
    margin: 0;
    padding: 0;
}

.link-main {
	flex: 0 0 60%;
    float: left;
    margin: 0;
    padding: 0;
}

.navbar {
	display: flex;
	flex-flow: column;
	list-style-type: none;
    margin: 0;
    padding: 10px;
}

.st_link {
    float: left;
    margin: 0;
    padding: 0 10px 10px 10px;
}

.clear {
    clear: both;
}

#img-navbar {
    width: 100%;
    margin: 0;
    padding: 0;
}

#img-link {
    width: 100%;
    margin: 0;
    padding: 0;
}

    /* --- (PC)中部各道の駅ページ --- */
    @media only screen and (min-width: 768px) {
        section .navigation {
            flex-flow: column;
            margin: 0;
            padding: 0;
        }
        
        .link-nav-top {
            flex: 0 0 80px;
            border-bottom: 2px dashed #6495ed;
            order: 1;
            margin: 0;
            padding: 0;
        }
        
        .link-nav-nagano {
            flex: 0 0 80px;
            border-bottom: 2px dashed #615ea8;
            order: 1;
            margin: 0;
            padding: 0;
        }
        
        .link-nav-gifu {
            flex: 0 0 80px;
            border-bottom: 2px dashed #ed6d0f;
            order: 1;
            margin: 0;
            padding: 0;
        }
        
        .link-nav-shizuoka {
            flex: 0 0 80px;
            border-bottom: 2px dashed #00a33e;
            order: 1;
            margin: 0;
            padding: 0;
        }
        
        .link-nav-aichi {
            flex: 0 0 80px;
            border-bottom: 2px dashed #e9546b;
            order: 1;
            margin: 0;
            padding: 0;
        }
        
        .link-nav-mie {
            flex: 0 0 80px;
            border-bottom: 2px dashed #0082ce;
            order: 1;
            margin: 0;
            padding: 0;
        }
        
        .link-main {
            flex: 1 1 auto;
            order: 2;
            margin: 0;
            padding: 0;
        }
        
        .navbar {
            flex-flow: row;
            list-style-type: none;
            margin: 0;
            padding: 10px 10px;
        }
        
        .navbar li {
            margin: 0;
            padding: 0 20px 0 0;
        }
        
        #img-navbar {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        
        #img-link {
            width: 100%;
            margin: 0;
            padding: 0;
        }
    }