/*MV*/
#title {
    position: relative;
}

#title .slideimg {
    position: absolute;
    opacity: 0;
    animation: itmFade3-chg-itm-anim 20s infinite;
}

/* 最初の画像だけ親要素の高さを確保させる */
#title .slideimg.img1 {
    animation-delay: 0s;
}

/* 2枚目の画像のアニメーション遅延 */
#title .slideimg.img2 {
    animation-delay: 5s;
}

#title .slideimg.img3 {
    animation-delay: 10s;
}

#title .slideimg.img4 {
    animation-delay: 15s;
}

/* フェードイン・アウトのアニメーション */
/* アニメーションの進行 */
@keyframes itmFade3-chg-itm-anim {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    20% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    50% {}

    /**
   * 画像が4枚のため1枚当たり25%
   * 1枚目->2枚目(25%・不透明から50%・透明)にフェードして切り替える
   * 50%到達(全体アニメーション時間の半分)で前の画像が見えなくなる
   */

    100% {
        opacity: 0;

    }
}

#title .logo {
    position: absolute;
    bottom: 25px;
}


#title {
    height: 450px;
}

#title .slideimg {
    background-position: center;
    background-repeat: no-repeat;
    height: 460px;
    width: 100%;
    background-size: cover;
}

#title .slideimg.img1 {
    background-image: url(../images/mv01.jpg);
}

#title .slideimg.img2 {
    background-image: url(../images/mv02.jpg);
}

#title .slideimg.img3 {
    background-image: url(../images/mv03.jpg);
}

#title .slideimg.img4 {
    background-image: url(../images/mv04.jpg);
}

#title .logo {
    background-image: url(../images/main_sp.png);
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 360px;
    z-index: 10;
    background-size: contain;
}

/*スクロールフェード*/
.is-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.is-fade.is-show {
    opacity: 1;
    transform: translateY(0);
}


/*ナビ*/
#navi .ui-static-navigation {
    background-color: #c81528;
}

#navi .ui-static-navigation-item .ui-static-link {
    color: #fff;
}

.ui-static-navigation-item .ui-static-link:hover .ui-static-navigation-text {
    color: #fff77e;
    text-decoration: none;
}

.ui-static-navigation-item .ui-static-link:hover .ui-static-icon {
    color: #fff77e;
}

/*ランドクルーズについて*/



/*メリット*/
#merit{
    background: url(../images/merit.jpg) center;
}
#merit h2{
    font-weight: bold;
}
.merit_list {
    align-items: stretch;
}

.merit_list li {
    padding: 16px;
    border-radius: 8px;
    background: #ffffffcf;
}

.ui-static-container .merit_list h3 {
    position: relative;
    display: block;
    margin-bottom: 1.5em;
	font-weight: 600;
	font-size: 22px;
}

.merit_list h3:before {
    content: '';
    position: absolute;
    bottom: -13px;
    width: 60px;
    height: 3px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #c81528;
    border-radius: 2px;
}

/*map*/
.map_wrap {
        position: relative;
        background-color: #fef3f3;
    }
.map_wrap a.ui-static-button {
    margin: 0 auto;
}

.map_wrap img {
    width: 100%;
}

.map_wrap .ui-static-button-primary, #pf .ui-static-button-primary{
    background: #cc2536;
    border-color: #c81528;
}

.map_wrap .ui-static-button-primary:not(.active):not(:disabled):hover, #pf .ui-static-button-primary:not(.active):not(:disabled):hover{
    background: #d54a58;
    border-color: #d54a58;
    
}

.osusume {
    padding: 8px;
}

.osusume p {
    background-color: #FFF;
    border-radius: 8px;
    margin-bottom: 8px;
}

.osusume ul {
    text-align: left;
    padding: 8px;
}

.osusume li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 1.2rem;
}

.osusume ul li:before {
    font-family: "Material Symbols Rounded";
    content: "Check_Circle";
    position: absolute;
    left: 0;
    /*左端からのアイコンまで*/
    color: #c81528;
    /*アイコン色*/
}


/*おすすめコース*/
#tour_wrap {
    background-color: #f9f9f9;
}

#tour_wrap h3 {
    position: relative;
    padding: .5rem 2rem;
    border-bottom: 4px solid #094;
    margin-bottom: 24px;
    font-size: 20px;
}

#tour_wrap h3:before {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 20%;
    height: 4px;
    content: '';
    background: #00cc5b;
}

#tour_wrap h3#esp {
    border-bottom: 4px solid #ffc400;
}

#tour_wrap h3#esp::before {
    background: #FF5722;
}

#tour_wrap h3#fra {
    border-bottom: 4px solid #002f66;
    ;
}

#tour_wrap h3#fra::before {
    background: #75adef;
}



#tour_wrap h3 img {
    width: 40px;
    margin-right: 8px;
}

#tour_wrap ul {
    margin-bottom: 32px;
    align-items: stretch;
}

#tour_wrap img {
    max-width: 100%;
}

#tour_wrap a {
    color: black;
    text-decoration: none;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .1490196078);
    display: flex;
    flex-direction: column;
    height: 100%;
}

#tour_wrap a:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, .4509803922);
}

.tour_inner {
    background-color: #FFF;
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.tour_tag {
    display: flex;
    gap: 8px;
}

.tour_tag li {
    padding: 3px 5px 3px 24px;
    font-size: 14px;
    position: relative;
}

.tour_tag li:first-child {
    background-color: #F5F7FA;
}

.tour_tag li:last-child {
    background-color: #fde9ec;
}

.tour_tag li::before {
    font-family: 'Material Symbols Rounded';
    font-size: 18px;
    padding-right: 3px;
    position: absolute;
    left: 4px;
    top: 1px;
}

.tour_tag li:first-child::before {
    content: 'sell';
    color: #999;

}

.tour_tag li:last-child::before {
    content: 'location_on';
    color: #d94f5e;
}

#tour_wrap p {
    margin: 8px 0 16px;
    font-size: 16px;
    font-weight: bold;
    flex-grow: 1;
}

#tour_wrap p span {
    font-size: 12px;
    font-weight: normal;
    display: block;
}

#tour_wrap .red {
    color: #d94f5e;
}

#tour_wrap .btn {
    width: 90%;
    margin: 8px auto;
    border: 1px solid #d94f5e;
    color: #d94f5e;
    text-align: center;
    padding: 3px;
}

#pf p{
 text-align: center;
}
.digi_pf img{
    width: 100%;
}

/*SPのみ補正*/
@media screen and (max-width: 767px) {
    #tour_wrap ul {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .ui-static-grid-item {
        min-width: 280px;
    }

    .map_wrap img{
        margin-bottom:16px;
    }
    .pc_harf p{
        text-align: center;
    }
}

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

    /*MV*/
    #title {
        height: 300px;
    }

    #title .slideimg {
        background-position: center;
        background-repeat: no-repeat;
        height: 300px;
        width: 100%;
    }

    #title .logo {
        background-image: url(../images/main.png);
        width: 100%;
        background-position: center;
        background-repeat: no-repeat;
        height: 250px;
        background-size: contain;
        z-index: 10;
        margin: 0 auto;
        left: 0;
    }

    /*about*/
    #about {
        position: relative;
    }

    #about p {
        text-align: center;
        margin: 0 auto;
        line-height: 1.8;
        font-size:18px;
    }

    #about p.ttl_deco {
        position: absolute;
        color: #c81528;
        font-family: "Albert Sans", "Noto Sans JP", sans-serif;
        font-size: max(7rem, min(10.4166666667vw, 10.25rem));
        line-height: 0.7;
        letter-spacing: 0.1em;
        white-space: nowrap;
        opacity: 0.08;
        bottom: 0;
        margin-left: calc(50% - 50cqi);
        margin-right: calc(50% - 50cqi);
        scale: 1.08 1;
    }

    /*map*/
    
    .pc_harf {
        display: flex;
        gap: 24px;
        align-items: flex-start;
        flex-direction: row-reverse;
    }

    .pc_harf div:first-child {
        width: 70%;

    }

    .pc_harf>div:last-child {
        width: 30%;
        text-align: center;
    }

    .pc_harf img {
        width: 100%;
    }

    .pc_flex_col {
        display: flex;
    }

    .pc_flex_col>div {
        width: 50%;
    }

    a:hover .tour_inner .btn {
        background-color: #fde9ec;
        ;
    }
    .ui-static-container div.digi_pf{
        width: 20%;
        margin:0 auto;
    }

}