@charset "utf-8";

/* =========================================
   Card Search — Masonry Grid + Filter
   ========================================= */

.card-search-title {
    font-family: 'Noto Serif JP', serif;
    font-weight: 300;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    margin-top: 30px;
    margin-bottom: 30px;
    color: #2c2c2c;
    text-align: center;
}

/*
--------------------------------------------------
Navigation (The Filter)
--------------------------------------------------
*/
.filter-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    font-size: 0.95rem;
    margin-bottom: 60px;
}

.filter-item {
    cursor: pointer;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-item:hover,
.filter-item.is-checked {
    color: #000;
    border-bottom: 1px solid #333;
}

.icon {
    font-size: 1.1em;
    font-weight: normal;
    color: #b9b9b9;
    /*color: #000;*/
    filter: grayscale(100%);
    opacity: 1;
}

.icon-dark {
    opacity: 0.55;
}

.filter-item:hover .icon,
.filter-item.is-checked .icon {
    color: inherit;
    filter: none;
    opacity: 1;
}

/*
--------------------------------------------------
Masonry Grid Layout
--------------------------------------------------
*/
.grid,
.grid-col4 {
    max-width: 1200px;
    margin: 0 auto;
    --grid-row-h: 200px;
}

/* Packery の columnWidth 基準要素（1/6幅 = 1ユニット） */
.grid-sizer,
.grid-item--w1 {
    width: 16.6666%;
}

.grid-item--w2 {
    width: 33.3333%;
}

.grid-item--w4 {
    width: 66.6666%;
}

/* sidebar の関連記事は常に1カラム */
.grid.grid-sidebar-single .grid-sizer,
.grid.grid-sidebar-single .grid-item {
    width: 100% !important;
}


/* 4分割 */
/* Packery の columnWidth 基準要素（1/4幅 = 1ユニット） */
.grid-sizer-col4,
.grid-item--w1-col4 {
    width: 25%;
}

.grid-item--w2-col4 {
    width: 50%;
}

.grid-item--w3-col4 {
    width: 75%;
}

/* 高さユニット: h1 × 2 = h2 で隙間なく揃う */
.grid-item--h1 {
    height: var(--grid-row-h);
}

.grid-item--h2 {
    height: calc(var(--grid-row-h) * 2);
}

.grid-item--h3 {
    height: calc(var(--grid-row-h) * 3);
}

.grid-item--h4 {
    height: calc(var(--grid-row-h) * 4);
}

.grid-item {
    padding: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition-property: opacity, transform;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
}

.grid-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 季節画像カード */
.season-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.caption-item {
    padding: 20px;
}

.htn-card__season-img {
    max-width: 50%;
    max-height: 50%;
    display: block;
    object-fit: contain;
    margin: 0 auto;
}

/*!* タイムカプセルカード（過去記事） *!*/
/*.timecapsule-card {*/
/*    position: relative;*/
/*}*/

/*.timecapsule-card .htn-card {*/
/*    filter: saturate(0.35) contrast(0.9);*/
/*    transition: filter 0.4s ease;*/
/*}*/

/*.timecapsule-card:hover .htn-card {*/
/*    filter: saturate(0.7) contrast(0.95);*/
/*}*/

.timecapsule-label {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(60, 50, 40, 0.75);
    color: #f5f0e8;
    font-family: 'Noto Serif JP', serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    border-radius: 2px;
    pointer-events: none;
}

/*
--------------------------------------------------
HTN Card
--------------------------------------------------
*/
.htn-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease;
}

.htn-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
}

/* 1. 栞ライン */
.htn-card__bookmark {
    display: block;
    height: 3px;
    width: 100%;
    background: #ccc;
}

.htn-card__bookmark--place {
    background: var(--htn-general-line);
}

.htn-card__bookmark--note {
    background: var(--htn-diary-line);
}

.htn-card__bookmark--movie {
    background: var(--htn-movie-line);
}

.htn-card__bookmark--event {
    background: var(--htn-notice-line);
}

.htn-card__bookmark--news {
    background: var(--htn-news-line);
}

/* 2. 画像 */
.htn-card__img {
    display: block;
    width: 100%;
    height: 0;
    flex: 1 1 auto;
    min-height: 100px;
    object-fit: cover;
    filter: sepia(10%);
    transition: filter 0.3s;
}

.htn-card:hover .htn-card__img {
    filter: sepia(0%);
}

.htn-card__img--mono {
    filter: grayscale(100%);
}

.htn-card:hover .htn-card__img--mono {
    filter: grayscale(50%);
}

/* 3. 本文エリア */
.htn-card__body {
    padding: 12px 14px 14px;
    flex: 0 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* テキスト系は本文を伸ばす */
.htn-card--text .htn-card__body,
.htn-card--news .htn-card__body {
    flex: 1 1 auto;
}

/* タイトル */
.htn-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.6;
    margin: 0 0 8px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.htn-card__title_none {
    line-height: 0;
    margin: 10px 0 8px;
}

/* タイトル前の丸 */
.htn-card__dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

.htn-card__dot--notice {
    background-color: var(--htn-notice);
}

.htn-card__dot--default {
    background-color: var(--htn-text-sub);
}

.htn-card__dot--alive {
    background-color: var(--htn-alive-glow);
    animation: post-title-dot-blink-loop 18s ease-in-out infinite;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes post-title-dot-blink-loop {
    0% {
        opacity: 0.25;
    }
    9% {
        opacity: 1;
    }
    18% {
        opacity: 0.25;
    }
    27% {
        opacity: 1;
    }
    36% {
        opacity: 0.25;
    }
    45% {
        opacity: 1;
    }
    54% {
        opacity: 0.25;
    }
    63% {
        opacity: 1;
    }
    72% {
        opacity: 0.25;
    }
    81% {
        opacity: 1;
    }
    100% {
        opacity: 0.25;
    }
}

/*@keyframes dot-pulse {*/
/*    0%, 100% { opacity: 1; }*/
/*    50% { opacity: 0.25; }*/
/*}*/

.htn-card__subtitle {
    font-weight: 400;
    font-size: 0.85rem;
    color: #777;
}

/* テキスト系カード（手帖・通信）背景 */
.htn-card--text {
    position: relative;

    /** 手帖: 周囲から中心へのグラデーション **/
    background: radial-gradient(ellipse at center, #F9F7F4 0%, #F4EDE0 50%, #E8DABC 75%, #D8C49A 95%, #C8AD7C 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

.htn-card--text.htn-card__dot--default-diary {
    background: url('../images/common/about-back.jpg') center / cover no-repeat;
}


.htn-card__dot--default-diary.htn-card--text > * {
    position: relative;
    z-index: 1;
}

/* ストリーム */
.stream-card .htn-card__dot--default-diary .htn-card__body {
    background: rgba(255, 255, 255, 0.4);
}

/* タイムカプセル */
.timecapsule-card .htn-card__dot--default-diary .htn-card__body {
    /** 手帖: 周囲から中心へのグラデーション **/
    /*background: radial-gradient(ellipse at center, #F9F7F4 0%, #F4EDE0 50%, #E8DABC 75%, #D8C49A 95%, #C8AD7C 100%);*/
    /*box-shadow: 0 1px 4px rgba(0,0,0,0.02);*/
    /** 手帖: 二重線 **/
    background: radial-gradient(circle at center, #F9F7F4 0%, #EBE4DB 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02); /* 影は極力薄くし、背景に馴染ませる */
}

.timecapsule-card .htn-card__dot--default-diary .htn-card__body .htn-card__body-inner {
    /** 手帖: 二重線 **/
    border: 3px double #A89B8F; /* 少し濃いセピア色の二重線 */
    padding: 10px 20px;
    box-sizing: border-box;
}

/* モノクロ・退色したユーザーアイコン */
.timecapsule-card .htn-card__dot--default-diary .htn-card__body .htn-card__user-img {
    opacity: 0.6;
    filter: grayscale(100%);
    flex-shrink: 0;
}

/* ユーザー名 */
.timecapsule-card .htn-card__dot--default-diary .htn-card__body .htn-card__user-link {
    color: #888;
}

/* 本文（退色したインク） */
.timecapsule-card .htn-card__dot--default-diary .htn-card__body .htn-card__meta {
    color: #5C524A; /* 黒ではなく、濃いセピア（茶褐色）にすることでインクの劣化を表現 */
}


/* 4. メタ情報 */
.htn-card__meta {
    margin-bottom: 10px;
    flex: 1 1 auto;
    overflow: hidden;
}

.htn-card__meta-line {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.6;
    margin: 0;
}

.htn-card__meta a {
    position: relative;
    z-index: 2;
}

.htn-card--news .htn-card__body {
    padding: 30px 30px 14px;
}

.htn-card__excerpt {
    font-size: 0.9rem;
    line-height: 1.8;
    margin: 0;
    display: -webkit-box;
    /* -webkit-line-clamp: 4; */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.htn-card__excerpt_information {
    font-size: 0.8rem;
    line-height: 1.8;
    margin-top: 10px;
    display: -webkit-box;
    /* -webkit-line-clamp: 4; */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.htn-card__excerpt_diary {
    font-size: 0.98rem;
    line-height: 2.0;
    margin: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 62%,
            rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 62%,
            rgba(0, 0, 0, 0) 100%
    );
    /* 3行目あたりから下を徐々に透過 */
    /*-webkit-mask-image: linear-gradient(*/
    /*    to bottom,*/
    /*    rgba(0, 0, 0, 1) 0%,*/
    /*    rgba(0, 0, 0, 1) 62%,*/
    /*    rgba(0, 0, 0, 0) 100%*/
    /*);*/
    /*mask-image: linear-gradient(*/
    /*    to bottom,*/
    /*    rgba(0, 0, 0, 1) 0%,*/
    /*    rgba(0, 0, 0, 1) 62%,*/
    /*    rgba(0, 0, 0, 0) 100%*/
    /*);*/
}

/* 5. フッター */
.htn-card__footer {
    border-top: 1px solid #f0ebe4;
    padding-top: 8px;
    text-align: right;
    flex-shrink: 0;
    margin-top: auto;
}

/* ユーザー情報 */
.htn-card__user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.htn-card__user-link {
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #555;
    font-size: 0.75rem;
    position: relative;
    z-index: 2;
}

.htn-card__user-link:hover {
    color: #333;
    text-decoration: none;
}

.htn-card__user-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.htn-card__member-badge {
    height: 12px;
    width: auto;
    flex-shrink: 0;
}

.htn-card__area-link {
    color: #666;
    text-decoration: none;
    font-size: 0.75rem;
    position: relative;
    z-index: 2;
}

.htn-card__area-link:hover {
    color: #333;
    text-decoration: underline;
}

/* 投稿日時・記憶・ポイント横並び */
.htn-card__footer-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.htn-card__footer-sub {
    font-size: 0.7rem;
    color: #aaa;
    margin: 0;
}

.htn-card__footer-date {
    /*font-size: 0.75em;*/
    letter-spacing: 0.1em;
}

.htn-card__footer-date::before {
    content: "";
    display: inline-block;
    width: 30px; /* 線の長さ */
    height: 1px; /* 線の太さ */
    background-color: #ccc;
    vertical-align: middle; /* 垂直中央に合わせる */
    margin-right: 8px; /* 文字との余白 */
}

.htn-card__era {
    margin: 0 4px;
    color: #b08d57;
}

/* ポイント・コメント */
.htn-card__points {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    color: #888;
    position: relative;
    z-index: 2;
}

.htn-card__points .interests-icon:before,
.htn-card__points .cheers-icon:before {
    width: 12px;
    height: 12px;
}

.htn-card__points .comment-icon:before {
    width: 20px;
    height: 20px;
}

/* NEW アイコン */
.htn-card__new-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 36px;
    height: auto;
    z-index: 1;
}

.htn-card {
    position: relative;
}

/* タイトルリンク（stretched-link でカード全体をクリック可能に） */
.htn-card__title-link {
    color: inherit;
    text-decoration: none;
}

.htn-card__title-link:hover {
    color: #333;
    text-decoration: underline;
}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

/* サムネイルブロック */
.htn-card__thumbnails {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    overflow: hidden;
}

.htn-card__thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 2px;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 799px) {
    .card-search-title {
        font-size: 1.4em;
    }

    .grid-sizer,
    .grid-item--w1,
    .grid-item--w2,
    .grid-item--w4,
    .grid-sizer-col4, .grid-item--w1-col4 {
        width: 50%;
    }
}

@media (max-width: 640px) {
    .filter-nav {
        gap: 15px;
        font-size: 0.7rem;
        margin-bottom: 20px;
    }

    .grid,
    .grid-col4 {
        --grid-row-h: 180px;
    }

    .grid-sizer,
    .grid-item--w1,
    .grid-item--w2,
    .grid-item--w4 {
        width: 100%;
    }

    .card-search-title {
        font-size: 1.2em;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .grid-sizer-col4, .grid-item--w1-col4 {
        width: 100%;
    }
}