@charset "utf-8";
/******************
 * www用スタイル
 */
/* header */
#header.ody-header {
    background-color: antiquewhite;
    position: sticky;
    top: 0;
    z-index: 99;
    border-bottom: 1px solid #ccc;
}
.ody-header-main {
    height: 50px;
    padding: 3px;
    border-bottom: 1px solid #aaa;
    display: flex;
    justify-content: space-between;
    align-items: center;    
}

/* menu */
.ody-cat-menu {
    width: 100%;
    overflow-x: auto;
    margin: 0;
    padding: 0;
}
#menu-odj-menu {
    height: 60px;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 10px;
}
#menu-odj-menu li {
    border: 1px solid #ccc;
    padding: 6px 1px;
    border-radius: 10px;
    background-color: #ffffff;
}
#menu-odj-menu a {
    display: inline-block;
    padding: 0 5px;
}
#menu-odj-menu .mark {
    display: flex;
    justify-content: center;
    line-height: 1;
}
/* menu-icon */
#menu-odj-menu .menu-item .mark::before {
    font-family: "Font Awesome 7 Free";
    font-weight: 900; /* solid=900, regular=400 */
    content: "\f015";
    font-size: 22px;
}
#menu-odj-menu .menu-item.cat-uncategorized .mark::before      { content: "\f5b0"; }
#menu-odj-menu .menu-item.cat-shrines-temples .mark::before    { content: "\f6a1"; }
#menu-odj-menu .menu-item.cat-hot-springs-ryokan .mark::before { content: "\f2cd"; }
#menu-odj-menu .menu-item.cat-accommodation .mark::before      { content: "\f594"; }
#menu-odj-menu .menu-item.cat-transportation .mark::before     { content: "\e58f"; }
#menu-odj-menu .menu-item.cat-customs-etiquette .mark::before  { content: "\f05a"; }

#menu-odj-menu .text {
    display: block;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}
/* ody-search */
.ody-search {
    height: 50px;
    padding: 3px 10px 3px;
}
.ody-search form {
    border: 1px solid #ccc;
    border-radius: 10px;
}

/* TOP:Recommend area */
.recommend-flex {
    display: flex;
    gap: 16px;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;    /* スナップ */
    padding: 8px 12px;
    scrollbar-gutter: stable both-edges;
}
.recommend-title {

}
.card {
    flex: 0 0 280px;                  /* カードの横幅を固定 */
    scroll-snap-align: start;         /* スナップ位置を先頭に合わせる */

    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.card__link { display: block; color: inherit; text-decoration: none; }
.card__image { aspect-ratio: 16/9; background: #f3f4f6; }
.card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__body { padding: 12px; }
.card__cat {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    margin-bottom: 8px;
}
.card__title { 
    font-size: 16px; line-height: 1.4; margin: 6px 0 0; 
}
.recommend-grid::-webkit-scrollbar { height: 10px; }
.recommend-grid::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 999px; }
.recommend-grid::-webkit-scrollbar-thumb { background: #c7cbd1; border-radius: 999px; }

/* TOP:Article List area */
.front-posts {
    margin-top: 50px;
}
.front-posts-title {

}
@media screen and (max-width: 767px) {
    .ody-header-main {
        padding: 3px 5px;
    }
    #menu-odj-menu {
        padding: 0 5px;
    }
}