@charset "utf-8";
:root {
	--commoncolor: #003B82; /* 共通カラー（紺色） */
	--basecolor: #3498db; /* ベースカラー（エリア色） */
	--baselightcolor: #ECF9ff; /* ベースカラー（薄いエリア色） */
	--subcolor: #a3d172; /* タイトルのバーグラデーション右（左はエリア色） */
	--sublightcolor: #fffde9; /* 新着情報グラデーション左（右はベース薄いエリア色） */
}

/*  見出し
============================================================================= */
@media screen and (max-width:768px){.mv__ttl-name{font-size: 3.8rem;}}



/* =========================
   ならでは旅のポイント共通
========================= */

.ttl_box,
.ttl_box-other{
    position:relative;
    display:flex;
    align-items:center;
    gap:40px;
    padding:20px 25px;
    border-radius:25px 25px 0 0;
}

.ttl_box{
    background:#f3efea;
}

.ttl_box-other{
    background:#f3fafd;
}

.aritoku_logo{
    display:flex;
    align-items:center;
    gap:20px;
    flex-shrink:0;
}

.aritoku_logo img{
    width:100px;
    height:auto;
}

.logo_early{
    display:flex;
    border:2px solid #d70000;
    list-style:none;
    margin:0;
    padding:0;
}

.logo_01{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#c60000;
    color:#fff;
    font-size:32px;
    font-weight:bold;
    line-height:1;
    padding:4px;
}

.logo_01 span{
    font-size:14px !important;
    margin-left:2px;
}

.logo_02{
    background:#fff;
    color:#c60000;
    font-size:18px;
    font-weight:bold;
    padding:15px 25px;
    line-height:1;
}

.ttl{
    margin:0 auto;
    font-size:24px;
    font-weight:700;
    color:#27364e;
    line-height:1.4;
}

.lookjtb-point{
    background:#f3efea;
    border-radius:0 0 25px 25px;
    padding:0 0 0 16px;
    margin-bottom:32px;
}

.lookjtb-point-other{
    background:#f3fafd;
    border-radius:0 0 25px 25px;
    padding:0 0 0 16px;
    margin-bottom:32px;
}

.point-wrap{
    display:grid;
    grid-template-columns:repeat(3,360px);
    gap:24px;
}

.point-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    transition:.3s;
}

.point-card:hover{
    transform:translateY(-6px);
}

.point-img img{
    width:100%;
    height:200px;
    object-fit:cover;
    display:block;
}

.point-body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:24px;
    text-align:left;
}

.point-body h3{
    font-size:20px;
    font-weight:700;
    color:#003b71;
    margin-bottom:12px;
    text-align: center;
}

.catch{
    min-height:120px;
    font-size:14px;
    line-height:1.6;
    color:#444;
}

.catch-ttl{
    font-size:15px;
    font-weight:bold;
    line-height:1.8;
    color:#444;
}

.point-body .btn{
    margin-top:auto;
}

.point-note{
    width:100%;
    padding:8px;
    font-size:15px;
    line-height:1.8;
}

.point-note-ttl p{
    width:100%;
    padding:8px;
    font-size:16px;
    line-height:1.8;
    font-weight:bold;
}

.free-badge{
    margin-left:auto;
    width:90px;
    height:90px;
    border:2px solid #e66;
    border-radius:50%;
    background:#fff;
    color:#e66;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    line-height:1.4;
}

/* サポートカード専用 */

.support-card,
.support-card:hover{
    transform:none !important;
    cursor:default;
}

.support-card .catch{
    min-height:88px;
}

/* =========================
   PC
========================= */

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

    .point-wrap,
    .lookjtb-point-other .point-wrap{
        display:grid;
        grid-template-columns:repeat(3,360px);
        justify-content:flex-start;
        gap:24px;
    }

}

/* =========================
   SP
========================= */

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

    .ttl_box{
        flex-direction:column;
        gap:15px;
        padding:18px 16px;
        text-align:center;
    }

    .aritoku_logo{
        justify-content:center;
        flex-wrap:wrap;
        padding-right:81px;
    }

    .aritoku_logo img{
        width:60px;
    }

    .ttl{
        font-size:16px;
        line-height:1.5;
    }

    .logo_01{
        font-size:22px;
    }

    .logo_02{
        padding:8px;
        font-size:14px;
    }

    .free-badge{
        position:absolute;
        top:12px;
        right:12px;
        width:60px;
        height:60px;
        margin:0;
        font-size:12px;
    }

    .point-wrap,
    .lookjtb-point-other .point-wrap{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:16px;
        padding:0 15px 20px;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
    }

    .point-wrap::-webkit-scrollbar,
    .lookjtb-point-other .point-wrap::-webkit-scrollbar{
        display:none;
    }

    .point-card{
        flex:0 0 92%;
        min-width:92%;
        scroll-snap-align:start;
    }

    .point-img img{
        height:155px;
    }

    .point-body{
        padding:20px;
    }

    .point-body h3{
        font-size:20px;
    }

    .catch{
        font-size:13px;
        line-height:1.8;
        word-break:keep-all;
        min-height:120px;
    }

    .point-note{
        padding:0 15px 8px 0;
        font-size:14px;
    }
}

.ttl span {
    font-weight: 700;
}