/*
sp用
*/
@charset "utf-8";

@media screen and (max-width: 1190px) {
/* リセットCSS */
* {
	margin:0;
	padding:0;
}

    body {
        margin: 0px;
        font-family: "Open Sans","Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
        color: #333;
        background-color: #fff;
    }

    ul {
        list-style: none;
    }

	a:link {
		color: #333;
		text-decoration: none;
	}
	a:visited {
		color: #333;
		text-decoration: none;
	}
    .fixing {
        width: 100%;
    }
    .check-frame {
        width: 100%;
    }
    .tdl-image {
        width: 100%;
    }
    p {
        font-size: 13px;
    }


    /* pc版消す系 */
    .pc {
        display: none;
    }
    .pc-footer {
        display: none;
    }

    /* sp写す */
    .sp {
        display: block;
        max-width: 445px;
        margin: 0 auto;
	}

    .sp > img {
        width: 100%;
    }
	.sp-footer {
		display: block;
		margin: 0;
	}

	* {
		margin:0;padding:0;
    }
    
    .sp-title {
        text-align: center;
        padding: 20px;
        font-size: 12px;
        font-weight: bold;
    }
    
    header {
        width: 100%;
        background-color: #fff;
        z-index: 5;
        position: absolute;
        left: 0;
        display: flex;
        border-bottom: solid 1px #a58331;
    }

    .sp-header-tab {
        display: flex;
        position: absolute;
        justify-content: space-between;
        width: 100%;
    }

    header.m_fixed {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #fff;
        z-index: 5;
    }

    .fixed {
        position: fixed;
        top: 0;
    }

    #sp-select-nav {
        margin: 0 auto;
        width: 100%;
        max-width: 580px;
    }

    .sp-header-select-box {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }
    
    .sp-select-box {
        display: flex;
        text-align: center;
        width: 100%;
    }

    #sp-selecting-tab {
        margin: 0;
        padding: 5px 3px;
        width: 38%;
        height: 48px;
    }

    #sp-selecting-tab .tab-text {
        color: #fff;
        font-size: 13px;
    }

    .sp-select-page {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
        height: 40px;
        padding: 4px 1px;
        margin: auto 0 0;
        font-size: 10px;
        border-right: solid 1px #efefef;
        border-left: solid 1px #efefef;
        border-top: solid 1px #efefef;
    }

    .sp-select-page .tab-text {
        width: 100%;
    }

    .sp-select-page a{
        color: #999;
        font-weight: bold;
    }

    .sp-japanese{
        background-image: url(../img/sp/sp-menu-japanese.png);
        background-repeat: no-repeat;
        background-position: 0;
        background-size: 100% 100%;
    }

    .sp-foreigner{
        background-image: url(../img/sp/sp-menu-foreigner.png);
        background-repeat: no-repeat;
        background-position: 0;
        background-size: 100% 100%;
    }

    .sp-traffic{
        background-image: url(../img/sp/sp-menu-transportation.png);
        background-repeat: no-repeat;
        background-position: 0;
        background-size: 100% 100%;
    }

    .sp-season{
        background-image: url(../img/sp/sp-menu-season.png);
        background-repeat: no-repeat;
        background-position: 0;
        background-size: 100% 100%;
    }

    .sp-time{
        background-image: url(../img/sp/sp-menu-time.png);
        background-repeat: no-repeat;
        background-position: 0;
        background-size: 100% 100%;
    }

    #sp-rank-content {
        padding-top: 100px;
        width: 80%;
        margin: 0 auto 30px;
    }

    .sp-img-top-title {
        text-align: center;
        margin-bottom: 24px;
    }

    .sp-index-img {
        width: 100%;
    }

    .sp-img-top-title img {
        width: 100%;
    }

    .sp-index-rank-img {
        text-align: center;
        margin: 12px;
    }

    .sp-index-rank-img img {
        width: 63px;
        height: 73px;
    }

    .sp-index {
        margin: 20px 0;
    }

    .sp-index-img-1 {
        width: 100%;
        height: 100%;
        max-height: 280px;
    }

    .sp-index-img-4-20-frame {
        height: 140px;
    }

    .sp-index-img-4-20 {
        width: 100%;
        height: 100%;
    }

    .sp-index-1-width {
        width: 80%;
        margin: 0 auto 35px;
    }

    .sp-index-rank-number {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        flex-flow: column;
        vertical-align: top;
        width: 25px;
        height: 25px;
        color: #fff;
        font-size: 14px;
        background: #a58432;
    }

    .sp-index-1-detail-frame {
        display: flex;
        margin: 12px 0;
    }

   .sp-index-last-year-frame , .sp-genre-last-year-frame {
       margin: 0 5px 5px;
       text-align: center;
   }

    .sp-index-last-year-frame img , .sp-genre-last-year-frame img{
        width: 10px;
    }

    .sp-index-1-3-detail-box {
        width: 85%;
        margin-right: auto;
        text-align: center;
    }

    .sp-index-4-20-detail-box {
        width: 100%;
        margin-right: auto;
        text-align: center;
    }

    .sp-index-1-3-spot-name {
        font-size: 18px;
        font-weight: bold;
        color:#a58331;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .sp-index-1-3-spot-address,  .sp-genre-1-3-spot-address {
        color: #777;
        margin-top: 7px;
        font-size: 10px;
    }

    .sp-index-1-coment-text {
        font-size: 13px;
        text-align: justify;
        word-break: break-all;
    }

    .sp-area-4-20 {
        display: flex;
        flex-wrap: wrap;
    }

    .rank-4-20-block {
        display: flex;
        margin: 3px 5px;
        align-items: center;
    }

    .sp-index-4-20 , .sp-genre-4-20{
        width: 50%;
    }

    .sp-area-21-100 {
        width: 70%;
        border-radius: 5px;
        color: #fff;
        border: solid 1px #a58432;
        background-color: #a58432;
        padding: 10px 0;
        margin: 0 auto;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url(../img/common/mottomiru_arrow_down.png);
        background-position: 5%, center;
        background-size: 6%;
        background-repeat: no-repeat;
    }

    .sp-index-21-100-text {
        text-align: center;
        margin-bottom: 13px;
        font-weight: bold;
        font-size: 15px;
    }

    .sp-note-text{
        margin: 13px 0;
        color: #777;
        font-size: 8px;
        text-align: center;
    }

    .sp-more-area {
        width: 85%;
        text-align: center;
        margin: 0px auto;
    }

    .sp-more-area-frame {
        display: flex;
        margin: 10px;
        justify-content: space-around;
    }

    .sp-index-spot-area {
        width: 90%;
    }

    .link-area {
        width: 70%;
    }

    .sp-index-more-spot-name {
        text-align: left;
        font-size: 14px;
        color: #333;
        text-align: center;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .sp-index-more-spot-name a:hover {
        opacity: 0.7;
    }

    .sp-index-more-spot-address {
        color: #777;
        font-size: 10px;
        text-align: center;
        margin: 5px 0 0 5px;
    }

    .more {
        margin: 5px 20px 0 0;
    }

    .sp-more-text {
        font-size: 20px;
        font-weight: bold;
        margin: 50px auto 25px;
    }

    .sp-coments-area {
        width: 100%;
        position: relative;
        margin: 50px 0;
        text-align: center;
    }

    .sp-coments-area img {
        height: 80%;
        width: 90%;
        max-height: 235px;
    }

    .sp-total-coments {
        width: 70%;
        font-size: 11px;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        margin: 0;
        padding: 0;
        text-align: left;
    }


    /*
     footer前
    */

    #fab {
        position: fixed;
        bottom: 6%;
        right: 6%;
        z-index: 4;
        text-decoration: none;
        display: block;
        width: 50px;
        height: 50px;
        background: #777;
        text-align: center;
        border-radius: 50%;
        transition: .3s;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
        text-decoration: none;
        opacity: 0.6;
    }

    .fab-img {
        height: 100%;
        background: url(../img/sp/button_pagetop_icon.png) no-repeat;
        display: block;
        background-size: 28px;
        background-position: 50% 43%;
    }

	.sp-banner-box {
        margin: 50px 0;
        text-align: center;
	}

    .sp-banner-box a {
        height: 155px;
    }

    .sp-banner-box a img {
        width: 60%;
    }

    .sp-banner-box :hover {
        opacity: 0.7;
    }

    .sp-banner {
        margin-bottom: 8px;
    }

    .sp-sns-box {
        margin: 20px 0 50px;
        text-align: center;
    }

    .sp-sns-box a img {
        width: 35px;
        height: 35px;
    }

    .sp-share-text {
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: bold;
    }

	.footer-text {
		padding: 0 20px;
		line-height: 2;
    }
    
    .sp-clf {
        margin: 40px 0;
        padding: 0 20px;
        color: #777;
        font-size: 12px;
        text-align: left;
	}

	.sp-clf li {
		margin: 5px 0;
    }
    

    /* traffic */
	.sp-staffic-rank-frame {
		margin-top: 200px;
	}

	.sp-genre-top-coment {
		width: 70%;
		margin: 10px auto;
		padding: 10px;
		text-align: left;
	}


	.sp-traffic-tab {
        text-align: center;
        padding :10px 0;
	}

    .sp-tab {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .sp-tab li:nth-child(-n+3) {
        width: 23%;
    }

    .sp-tab li {
        width: 21%;
		margin: 5px;
		color: #777;
		font-size: 15px;
		border: 1px solid #777;
		border-radius: 5px;
    }

	.sp-line-text {
		font-size: 15px;
	}

	.sp-current-color {
		color: #fff;
		background-color: #00693e;
		border: 0;
	}

	.sp-content {
		text-align: center;
	}

	#sp-tab_cont {
		margin-top: 40px;
	}

	h2 {
		font-size: 20px;
		color: #00693e;
		margin-bottom: 20px;
	}


    /* 季節別, 時間別 */
    .sp-genre-tab {
        display: flex;
        justify-content: center;
        margin: 0 20px 40px;
    }

    .sp-genre-tab li {
        margin: auto 0;
        width: 80px;
        height: 72px;
        display: flex;
    }

    .sp-genre-tab img {
        width: 58px;
        height: 57px;
        margin: auto;
    }

    .is-active img{
        width: 72px;
        height: auto;
        margin: 0;
    }

    .bg-image {
        position: relative;
    }

    .bg-image > img {
        width: 100%;
        height: 300px;
    }

    .image-area {
        position: relative;
    }

    .sp-genre-rank-img {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: -10%;
        z-index: 1;
    }

    .sp-genre-rank-img img {
        width: 63px;
        height: 73px;
    }

    .sp-genre-img-1-frame {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        width: 80%;
    }

    .sp-summer-1-3 .sp-genre-img-1-frame {
        top: 53%;
    }

    .sp-genre-img-1-frame img {
        height: 190px;
        width: 100%;
    }

    .sp-genre-rank-number {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        flex-flow: column;
        vertical-align: top;
        width: 25px;
        height: 25px;
        color: #fff;
        font-size: 14px;
    }

    .sp-genre-1-3-spot-name {
        font-size: 18px;
        font-weight: bold;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .sp-genre-1-3-detail-box {
        width: 100%;
        margin-right: auto;
        text-align: center;
    }

    .genre-1-3-block{
        margin-bottom: 50px;
    }

    .pagetop {
        width: fit-content;
        margin: 60px auto;
        text-align: center;
    }

    .pagetop a :hover {
        opacity: 0.7;
    }

    .pagetop a img {
        width: 98px;
        height: 74px;
    }

    .footer-text-box {
        text-align: center;
    }

    .footer-text {
        margin-top: 30px;
        color: #777;
        font-size: 10px;
        text-align: left;
    }

    footer {
	margin: 45px 0 0;
	width:100%;
	height:auto;
	background:#333;
	padding:40px 0;
    }

    footer p {
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 12px;
        margin-top: 40px;
    }

}

@media screen and (max-width : 330px){
    .sp-index-img-4-20-frame{
        height: 116px;
    }
}

@media screen and (min-width : 400px){
    .sp-index-img-4-20-frame{
        height: 166px;
    }
}