@charset "UTF-8";
/********************************************************************************

page-top.css　トップページcss

********************************************************************************/

/*============================================================
 ページヘッダー
*============================================================*/
/* 固定ヘッダー
---------------------------------------- */
#page-top #content-header-pc .gnav-menu {
    display: none;
}

/* メインビジュアル
---------------------------------------- */
#page-top #mainvisual {
    margin-bottom: 80px;
}
#page-top #mainvisual .mainvisual-inner {
    width: calc(100% - var(--inner-padding) * 2);
    background-color: #92DEF5;
    background-image: url(../images/top/mainvisual-bg.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1280px auto;
    border-radius: 20px;
    margin: 0 auto;
}
#page-top #mainvisual .inner {
    height: 625px;
    padding: 24px 0 0 0;
    max-width: 1180px;
    position: relative;
}
/* イラスト */
#page-top #mainvisual .illust {
    position: absolute;
}
#page-top #mainvisual .illust[data-name="snowboard"] {
    top: 155px;
    left: -12px;
}
#page-top #mainvisual .illust[data-name="ski"] {
    top: 150px;
    left: 172px;
}
#page-top #mainvisual .illust[data-name="fishing"] {
    top: 105px;
    left: 446px;
}
#page-top #mainvisual .illust[data-name="bicycle"] {
    top: 240px;
    left: 95px;
}
#page-top #mainvisual .illust[data-name="campfire"] {
    top: 264px;
    left: 418px;
}
#page-top #mainvisual .illust[data-name="tent"] {
    top: 565px;
    left: 330px;
}
#page-top #mainvisual .illust[data-name="hotspring"] {
    top: 568px;
    left: 470px;
}
#page-top #mainvisual .illust[data-name="golf"] {
    top: 543px;
    left: 611px;
}
#page-top #mainvisual .illust[data-name="camera"] {
    top: 552px;
    left: 1115px;
}
#page-top #mainvisual .illust[data-name="climbing"] {
    top: 62px;
    left: 1088px;
}
#page-top #mainvisual .illust[data-name="pickup"] {
    top: 29px;
    left: 665px;
}

/* ディスクリプション */
#page-top #mainvisual .description {
    width: 394px;
    height: 75px;
    padding: 12px;
    font-size: 16px;
    line-height: 23px;
    color: #fff;
    text-align: center;
    background-image: url(../images/top/mainvisual-ribbon.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 394px auto;
    position: absolute;
    top: 20px;
    left: -30px;
}
/* メニュー */
#page-top #mainvisual .menu-list {
    width: 580px;
    gap: 10px 16px;
    position: absolute;
    top: 310px;
    left: 28px;
    z-index: 100;
}
#page-top #mainvisual .menu-list li {
    background-color: #fff;
    border-radius: 6px;
    filter: drop-shadow(4px 4px 12px rgba(51, 51, 51, 0.25));
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;

}
#page-top #mainvisual .menu-list li:hover {
    background-color: #DBE5E9;
}
#page-top #mainvisual .menu-list li a {
    display: block;
    width: 282px;
    font-family: var(--common-font-family-kiwi);
    font-size: 18px;
    line-height: 26px;
    padding: 12px 8px;
}

/* PICKUP */
#page-top #mainvisual .pickup {
    --pickup-width: 598px;
    --pickup-image-height: calc(var(--pickup-width) * 0.65);

    width: var(--pickup-width);
    aspect-ratio: 1 / 1;
    margin: 0 0 0 auto;
}
#page-top #mainvisual .pickup .pickup-slide {
    width: 100%;
    height: 100%;
    position: relative;
}
#page-top #mainvisual .pickup .pickup-slide .slide {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    overflow: hidden;
    background-color: #fff;
}
#page-top #mainvisual .pickup .pickup-slide .slide .image {
    /* height: 388px; */
    height: var(--pickup-image-height);
}
#page-top #mainvisual .pickup .pickup-slide .slide .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#page-top #mainvisual .pickup .pickup-slide .slide .info {
    /* width: 395px; */
    /* height: calc(598px - 388px); */
    width: calc(var(--pickup-width) * 0.66);
    height: calc(var(--pickup-width) - var(--pickup-image-height));
    padding: 20px 0 0 0;
    margin: 0 auto;
}
#page-top #mainvisual .pickup .pickup-slide .slide .info .posted-date {
    display: none;
}
#page-top #mainvisual .pickup .pickup-slide .slide .info .title {
    font-size: 18px;
    line-height: 26px;
    height: 52px;
    margin-bottom: 4px;
    }
#page-top #mainvisual .pickup .pickup-slide .slide .info .btn-read {
    display: block;
    margin-top: 24px;
}

/* PREVボタン */
#page-top #mainvisual .pickup .prev-arrow {
    width: 80px;
    height: 80px;
    position: absolute;
    top: 200px;
    /* top: calc(var(--pickup-image-height) * 0.567); */
    left: -40px;
    z-index: 100;
}
/* NEXTボタン */
#page-top #mainvisual .pickup .next-arrow {
    width: 94px;
    height: 94px;
    position: absolute;
    top: 192px;
    /* top: calc(var(--pickup-image-height) * 0.55); */
    right: -50px;
    z-index: 100;
}


/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1279px) {
    /*============================================================
     ページヘッダー
    *============================================================*/
    /* メインビジュアル
    ---------------------------------------- */
    #page-top #mainvisual .inner {
        max-width: 992px;
    }
    /* イラスト */
    #page-top #mainvisual .illust[data-name="fishing"] {
        top: 105px;
        left: 356px;
    }
    #page-top #mainvisual .illust[data-name="camera"] {
        top: 552px;
        left: 900px;
    }
    #page-top #mainvisual .illust[data-name="climbing"] {
        top: 6px;
        left: 892px;
    }
    #page-top #mainvisual .illust[data-name="climbing"] img {
        width: 80%;
    }
    #page-top #mainvisual .illust[data-name="pickup"] {
        top: 31px;
        left: 592px;
        -webkit-transform: rotate(-9deg);
        transform: rotate(-9deg);
    }

    /* ディスクリプション */
    #page-top #mainvisual .description {
        left: -10px;
    }
    /* PICKUP */
    #page-top #mainvisual .pickup {
        --pickup-width: 420px;
        --pickup-image-height: calc(var(--pickup-width) * 0.55);
    }
    #page-top #mainvisual .pickup .pickup-slide .slide .info {
        height: calc(var(--pickup-width) - var(--pickup-image-height));
        width: calc(var(--pickup-width) * 0.7);
    }
    #page-top #mainvisual .pickup .pickup-slide .slide .info .title {
        font-size: 16px;
        line-height: 23px;
        height: 46px;
    }
    /* PREVボタン */
    #page-top #mainvisual .pickup .prev-arrow {
        width: 56px;
        height: 56px;
        top: calc(var(--pickup-image-height) - 28px);
        left: -40px;
    }
    /* NEXTボタン */
    #page-top #mainvisual .pickup .next-arrow {
        width: 72px;
        height: 72px;
        top: calc(var(--pickup-image-height) - 36px);
        right: -16px;
    }

}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1024px) {
    /*============================================================
     ページヘッダー
    *============================================================*/
    /* メインビジュアル
    ---------------------------------------- */
    #page-top #mainvisual .mainvisual-inner {
        background-image: url(../images/top/mainvisual-bg-sp.svg);
        background-size: 767px auto;
        border-radius: 0;
        width: 100%;
        padding: 0;
    }
    #page-top #mainvisual .inner {
        height: 710px;
        padding: 32px 0 0 0;
        max-width: 375px;
        overflow: hidden;
    }
    /* イラスト */
    #page-top #mainvisual .illust[data-name="snowboard"] {
        width: 42px;
        top: 90px;
        left: 16px;
    }
    #page-top #mainvisual .illust[data-name="ski"] {
        width: 38px;
        top: 520px;
        left: 116px;
    }
    #page-top #mainvisual .illust[data-name="fishing"] {
        width: 48px;
        top: 530px;
        left: 218px;
    }
    #page-top #mainvisual .illust[data-name="bicycle"] {
        width: 60px;
        top: 616px;
        left: 20px;
    }
    #page-top #mainvisual .illust[data-name="campfire"] {
        width: 70px;
        top: 628px;
        left: 150px;
    }
    #page-top #mainvisual .illust[data-name="tent"] {
        width: 47px;
        top: 670px;
        left: 16px;
    }
    #page-top #mainvisual .illust[data-name="hotspring"] {
        width: 47px;
        top: 674px;
        left: 168px;
    }
    #page-top #mainvisual .illust[data-name="golf"] {
        width: 25px;
        top: 664px;
        left: 330px;
    }
    #page-top #mainvisual .illust[data-name="camera"] {
        width: 35px;
        top: 612px;
        left: 268px;
    }
    #page-top #mainvisual .illust[data-name="climbing"] {
        width: 100px;
        top: 128px;
        left: 292px;
    }
    #page-top #mainvisual .illust[data-name="pickup"] {
        width: 110px;
        top: 135px;
        left: 20px;
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    /* ディスクリプション */
    #page-top #mainvisual .description {
        width: 343px;
        height: 66px;
        padding: 10px;
        background-image: url(../images/top/mainvisual-ribbon-sp.svg);
        background-size: 343px auto;
        position: static;
        margin: 0 auto 36px auto;
    }    
    /* メニュー */
    #page-top #mainvisual .menu-list {
        display: none;
    }
    /* PICKUP */
    #page-top #mainvisual .pickup {
        --pickup-width: 343px;
        --pickup-image-height: 168px;

        width: var(--pickup-width);
        margin: 0 auto;
    }
    #page-top #mainvisual .pickup .pickup-slide .slide .info {
        padding: 16px 0 0 0;
        width: 248px;
    }
    #page-top #mainvisual .pickup .pickup-slide .slide .info .title {
        margin-bottom: 8px;
    }
    #page-top #mainvisual .pickup .pickup-slide .slide .info .block-report-meta .meta-item {
        font-size: 12px;
        line-height: 120%;
        color: #BCB3B3;
    }
    #page-top #mainvisual .pickup .pickup-slide .slide .info .block-report-meta .meta-item .parts-icon[data-type="meta"] {
        width: 20px;
        height: 20px;
        margin-right: 4px;
        --icon-width: 20px;
    }  
    #page-top #mainvisual .pickup .pickup-slide .slide .info .btn-read {
        margin-top: 16px;
    }
    /* ドット */
    #page-top #mainvisual .pickup .pickup-slide .slick-dots {
        bottom: -32px;
    }
    #page-top #mainvisual .pickup .pickup-slide .slick-dots li button:before {
        opacity: 1;
        color: #E5E5E5;        
    }
    #page-top #mainvisual .pickup .pickup-slide .slick-dots li.slick-active button:before {
        opacity: 1;
        color: #C4C4C4;        
    }
}