@charset "utf-8"; /*文字コード*/
/*
=======================================
	top CSS
=======================================
*/
/* スマホ用設定（639px以下の場合） */
.top_navi,
#top_river,
#top_sea{
    width: 95%;
    height: auto;
    margin: auto;
}
h2{
    font-size: 1.7em;
}
.top_color1{
    color: rgb(6, 210, 204);
}
.top_color2{
    color: rgb(112, 166, 246);
}

.top_navi,
.top_link,
.top_topics,
.wp-list,
.top_banner{
    display: -webkit-flex;
    display: flex;
}


.top_navi{
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    margin: auto;
    margin-bottom: 20px;
}
.top_navibtn{
    display: inline-block;
    width: 47.7443%;
    height: auto;
    margin: 10px 12px 0 0;
    padding: 0.5em 0;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    font-size: 80%;
    color: #fff;
    border-radius: 8px;
    background-color: #fcb221;
    border: double 4px rgb(247, 169, 17);
    background-color: rgb(247, 169, 17));
}
.top_navibtn:hover{
    color: #fcb221;
    background-color: #fff;
}

.top_navibtn:nth-child(2n),
.top_navibtn:nth-child(4n){
    margin-right: 0;
}


/* river */
.top_river_preface,
.top_sea_preface{
    position: relative;
    height: auto;
    margin: auto auto 0;
    text-align: center;
}
.top_logo_river{
    width: 76.9230%;
    position: absolute;
    top: 50px;
    left: 20px;
    overflow: hidden;
    margin: 0;
    z-index: -999;
}
.top_river_preface p,
.top_sea_preface p{
    height: auto;
    margin: auto;
    text-align: left;
}


/* sea */
.top_logo_sea{
    width: 62.5%;
    position: absolute;
    top: -10px;
    left: 25px;
    overflow: hidden;
    margin: 0;
    z-index: -999;
}


/* activity、spotのボタン */
.top_link{
    justify-content: center;
    width: auto;
    height: auto;
    margin: 15px auto;
}
.top_btn{
    width: 49.1071%;
    height: auto;
    margin: 1% 1.7857% 0 0;
    padding: 0.5em 0;
    text-decoration: none;
    font-weight: 600;
    font-size: 80%;
    color: #fff;
    border-radius: 8px;
    background-color: rgba(255, 253, 0, 1);
}
.top_btn_sea{
    border: double 4px rgb(145, 190, 255);
    background-color: rgb(112, 166, 246);
}
.top_btn_river{
    border: double 4px rgb(36, 221, 215);
    background-color: rgb(6, 210, 204);
}
.top_btn_sea:hover{
    color: rgb(112, 166, 246);
    background-color: #fff;
}
.top_btn_river:hover{
    color: rgb(6, 210, 204);
    background-color: #fff;
}

/*真由ちゃんver*/
/* .top_btn{
    width: 49.1071%;
    height: auto;
    margin: 1% 1.7857% 0 0;
    padding: 0.5em 0;
    text-decoration: none;
    font-weight: 600;
    font-size: 80%;
    border: double 4px rgb(247, 245, 10);
    border-radius: 3px;
    background-color: rgba(247, 245, 10, 0.4);
}
.top_btn_sea{
    color: rgb(112, 166, 246);
}
.top_btn_river{
    color: rgb(6, 210, 204);
} */
/* .top_btn:hover{
    background-color: rgb(255, 255, 255);
} */
.top_btn:nth-child(2n){
    margin-right: 0;
}

.tmb_container{
	width: 94%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
}

.tmb_img{
	width: 48%;
}


/* トピックス */
aside.top_tpic{
    width: 100%;
    margin-top: 6%;
    background:
    linear-gradient(135deg, #ddf9fb 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, #ddf9fb 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, #ddf9fb 25%, transparent 25%),
    linear-gradient(45deg, #ddf9fb 25%, transparent 25%);
    background-size: 100px 100px;
    background-color: none;
}

.top_topics{
    -webkit-flex-direction: column;
    flex-direction: column;
     margin: 10px auto;
     text-align: center;
}
.top_topics h2{
    padding: 2% 0 0;
    margin-top: 15%;
    border-top: 1px solid #aaa;
}
.top_topics h3{
    padding: 0 0 15px;
    border-bottom: 1px solid #aaa;
    font-size: 90%;
}
.top_tpclist{
    width: 90%;
    height: 30px;
    padding: 10px;
    margin: 0 auto 20px;
    border-radius: 10px;
    line-height: 10px;
    background-color: rgb(255, 245, 0);
    cursor: pointer;
    cursor: hand;
}


/* wordpress */
.top_wp{
    width: 95%;
    margin: auto;
}
.wp-list{
    display: inline-block;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    background-color: rgba(255, 255, 255, 1);
}
.wp-list img{
    width: 47.6562%;
    max-height: 150px;
    margin: 2% 3.125% 0 1.5625%;
}
/* title */
.wp-list h4{
    float: right;
    width: 47.6562%;
    height: auto;
    margin: 2% 0 0 0;
    text-align: left;
}
/* day */
.wp-list p{
    width: 100%;
    height: 20px;
    margin: 2% auto 2.5% 2%;
    text-align: left;
}



/* banner */
.top_banner{
    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
    margin: 30px auto 0;
    padding-top: 5%;
}
.top_banner a{
    margin: 1.2315% 2.6666% 1.2315% 0;
    width: 48.6666%;
    /* height: 95px; */
    background-color: none;

}
.top_banner a:nth-child(2n),
.top_banner a:nth-child(4n){
    margin-right: 0;
}
.top_bnimg{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.top_intro{
    display: none;
}


/* PC用設定（640px以上の場合） */
@media screen and (min-width:640px){
/* PC用CSSはこの下より記述してください */
/* メイン画像下のイントロテキスト（仮で作成） */
    .top_intro{
        display: contents;
        width: 100%;
        padding: 20px 0;
        margin: 5% auto;
    }
    .top_intro h2{
        width: 90%;
        padding: 17px 0 0;
        margin: 2% auto 0;
        color: #fcb221;
        font-size: 25px;
        text-align: center;
    }
    .top_intro p{
        padding: 10px 20px 0;
        margin: 0 auto 1%;
        font-size: 18px;
    }
    .top_navibtn,
    .top_none{
        display: none;
    }

    #top_river,
    #top_sea{
        width: auto;
        height: auto;
    }
    /* river */
    .top_river_preface{
        width: 50%;
        height: auto;
        margin: 12% 97% 3% 0;
    }
    .top_river_preface::after{
        position:absolute;
        top: -44%;
        left: 97%;
        content: "";
        display: inline-block;/*忘れずに！*/
        width: 180%;/*画像の幅*/
        height: 180%;/*画像の高さ*/
        background-image: url(../images/top_river_pt.png);
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        z-index: -1;
        overflow: hidden;
    }
    .top_logo_river{
        top: -70px;
        left: -120px;
    }


    /* sea */
    .top_sea_preface{
        width: 50%;
        height: auto;
        margin: 15% 0 3% 50%;
    }
    .top_sea_preface::before{
        position:absolute;
        top: -32%;
        left: -162%;
        content: "";
        display: inline-block;/*忘れずに！*/
        width: 180%;/*画像の幅*/
        height: 180%;/*画像の高さ*/
        background-image: url(../images/top_sea_pt.png);
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        z-index: -1;
        overflow: hidden;
    }
    .top_logo_sea{
        top: -100px;
        left: 280px;
    }

    .top_link{
        margin: 25px auto;
    }
    .top_btn{
        font-size: 120%;
    }

    .tmb_container{
        width: 94%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0 auto;
    }

    .tmb_img{
        width: 24%;
    }


    .top_topics{
        max-width: 1040px;
    }


    .top_topics h2{
        margin-top: 10px;
    }


    .top_tpclist{
        width: 21.1538%;
        margin: 0 2.8846% 1.9230% auto;
    }

    .top_wp{
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .wp-list{
        width: 32.0512%;
        height: 350px;
        position: relative;
        /* margin: 10px auto; */
    }

    .wp-list img{
        width: 95%;
        max-height: 190px;
        margin: 2% 2.5%;
        text-align: center;
    }
    /* title */
    .wp-list h4{
        clear: both;
        display: inline-block;
        width: 95%;
        margin: auto 2.5%;
    }
    /* day */
    .wp-list p{
        width: 95%;
        height: 20px;
        padding: 10px;
        margin: auto 2.5%;
        text-align: left;
        position: absolute;
        left: -10px;
        bottom: 20px;
    }

    /* .top_arrow{
        bottom: 20px;
    } */


    .top_banner{
        justify-content: space-between;
    }

    .top_banner a{
        margin: 1.2315% 1.4423% 1.2315% 0 !important;
        width: 23.9182%;
        height: 80px;
    }

    .top_banner a:nth-child(4n){
        margin-right: 0 !important;
    }



}


/* タブレット表示調整用（不要なら使わなくてOK）*/
/* タブレットの画面サイズでどうしても調整したい場合に利用してください（640～1023px）*/
@media screen and (min-width:760px) and (max-width:1023px) {
    /* タブレット用CSSはこの下より記述してください */

    /* river */
    .top_river_preface,
    .top_sea_preface{
        font-size: 70%;
    }
    #top_river,
    #top_sea{
        margin-top: 5% !important;
    }


    .top_river_preface::after{
        top: -45%;
        left: 100%;
        width: 170%;/*画像の幅*/
        height: 170%;/*画像の高さ*/
    }
    .top_logo_river{
        width: 69.4444%;
        top: -20px;
        left: -10px;
    }


    /* sea */
    .top_sea_preface::before{
        top: -50%;
        left: -113%;
        width: 170%;/*画像の幅*/
        height: 170%;/*画像の高さ*/
    }
    .top_logo_sea{
        width: 55.5555%;
        top: -50px;
        left: 180px;
    }

    .top_link{
        margin: 5px auto;
    }

    .top_tpclist{
        width: 30%;
        margin: 0 2.8846% 1.9230% auto;
        font-size: 90%;
    }

}
@media screen and (min-width:760px) and (max-width:960px) {
    .top_river_preface::after{
        top: -45%;
        left: 90%;
        width: 150%;/*画像の幅*/
        height: 150%;/*画像の高さ*/
    }

    .top_sea_preface::before{
        top: -15%;
        left: -100%;
        width: 140%;/*画像の幅*/
        height: 140%;/*画像の高さ*/
    }
}
@media screen and (min-width:760px) and (max-width:860px) {
    .top_sea_preface::before{
        top: -15%;
        left: -125%;
        width: 140%;/*画像の幅*/
        height: 140%;/*画像の高さ*/
    }
}

@media screen and (min-width:641px) and (max-width:759px) {
    .top_river_preface,
    .top_sea_preface{
        font-size: 60%;
    }
    .top_river_preface::after{
        top: -15%;
        left: 97%;
        width: 150%;/*画像の幅*/
        height: 150%;/*画像の高さ*/
    }
    .top_logo_river{
        width: 69.4444%;
        top: -20px;
        left: -10px;
    }

    /* sea */
    #top_sea{
        margin-top: 0 !important;
    }

    .top_sea_preface::before{
        top: -15%;
        left: -118%;
        width: 135%;/*画像の幅*/
        height: 135%;/*画像の高さ*/
    }
    .top_logo_sea{
        width: 55.5555%;
        top: -50px;
        left: 170px;
    }

    .top_link{
        margin: 5px auto;
    }

    .top_tpclist{
        width: 30%;
        margin: 0 2.8846% 1.9230% auto;
        font-size: 90%;
    }

}


/*
=======================================
	スライダー追記
=======================================
*/
.slick-box,
.slick-box1{
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 20px auto;
}


/* PC用設定（640px以上の場合） */
@media screen and (min-width:640px){
/* PC用CSSはこの下より記述してください */

    .slick-box,
    .slick-box1{
        width: 82%;
        margin: 20px auto 20px 0;
        /* z-index: -10; */
    }

    .slick-box1{
        margin: 20px 0 20px auto;
    }

    .slick-box li{
        margin: 0;
    }
}



/*
=======================================
	ふわっと
=======================================
*/
.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-130px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-130px); -ms-transform: translateY(-130px); transform: translateY(-130px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

/*
=======================================
	lightbox
=======================================
*/
html.lb-disable-scrolling {
overflow: hidden;
/* Position fixed required for iOS. Just putting overflow: hidden; on the body is not enough. */
position: fixed;
height: 100vh;
width: 100vw;
}

.lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
display: none;
}

.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}

.lightbox .lb-image {
display: block;
height: auto;
max-width: inherit;
max-height: none;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}

.lightbox a img {
border: none;
}

.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
border-radius: 4px;

/* Background color behind image.
   This is visible during transitions. */
background-color: white;
}

.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}

.lb-loader {
position: absolute;
top: 43%;
left: 0;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}

.lb-cancel {
display: block;
width: 32px;
height: 32px;
margin: 0 auto;
background: url(../images/loading.gif) no-repeat;
}

.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}

.lb-container > .nav {
left: 0;
}

.lb-nav a {
outline: none;
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
height: 100%;
cursor: pointer;
display: block;
}

.lb-nav a.lb-prev {
width: 34%;
left: 0;
float: left;
background: url(../images/prev.png) left 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

.lb-nav a.lb-next {
width: 64%;
right: 0;
float: right;
background: url(../images/next.png) right 48% no-repeat;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
-o-transition: opacity 0.6s;
transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}

.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}

.lb-data {
padding: 0 4px;
color: #ccc;
}

.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}

.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}

.lb-data .lb-caption a {
color: #4ae;
}

.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 12px;
color: #999999;
}

.lb-data .lb-close {
display: block;
float: right;
width: 30px;
height: 30px;
background: url(../images/close.png) top right no-repeat;
text-align: right;
outline: none;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* wordpressの記事、リストデザイン */
.wp-list{
    list-style: none;
    margin-bottom: 35px;
}