@charset "utf-8";
/* css/web/post.css */

.post {
    padding-top: 69px;
}

.main.u_main{
    padding-top: 0;
}

.footer{
    margin-top: 70px;
}

@media screen and (min-width:770px) {
    .post {
        padding-top: 90px;
    }
}

.post .inner {
    max-width: 769px;
    width: 100%;
    margin: 0 auto;
}

/* =======================================

post-refresh（Swipe）

======================================= */

.post-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 8px 16px;
    box-shadow: inset 0 1px 0 0 var(--color-post-border-primary), inset 0 -1px 0 0 var(--color-post-border-primary);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--color-post-font-accent);
}

.post-refresh::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(/images/common/common_icon_post-swipe-up.svg) no-repeat center / 8px 13px;
    flex-shrink: 0;
}

/* =======================================

post-cast_filter（Tab + Cast Select）

======================================= */

.post-cast_filter-ttl {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 8px 16px;
    margin-inline: auto;
    width: fit-content;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-post-font-primary);
}

.post-cast_filter-ttl span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 16px;
    border-radius: 4px;
    background: var(--color-post-bg-light);
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.06em;
    color: var(--color-post-font-primary);
    line-height: normal;
}

.post-cast_filter-list {
    display: flex;
    gap: 16px;
    padding: 16px;
    box-shadow: inset 0 -1px 0 0 var(--color-post-border-primary);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.post-cast_filter-item {
    flex-shrink: 0;
}

.post-cast_filter-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 67px;
    text-decoration: none;
}

.post-cast_filter-all,
.post-cast_filter-item img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    object-position: top;
}

.post-cast_filter-item img.nowprinting-img{
   object-position: center;
}

.post-cast_filter-all {
    background: var(--color-post-font-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 0.06em;
}

.post-cast_filter-name {
    display: block;
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.2;
    /* letter-spacing: 0.06em; */
    color: var(--color-post-font-primary);
    white-space: nowrap;
}

.post-cast_filter-item.--current .post-cast_filter-all,
.post-cast_filter-item.--current img {
    box-shadow: 0 0 0 2px var(--color-post-font-primary);
}

/* =======================================

post-card-rank（ランクラベル）

======================================= */

.post-card-rank {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2.5px 8px;
    border-radius: 2px;
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-size: 12px;
    white-space: nowrap;
    line-height: normal;
}

.post-card-rank--g-artisan {
    background: var(--color-g-artisan-bg);
    color: var(--color-g-artisan);
}

.post-card-rank--artisan {
    background: var(--color-artisan-bg);
    color: var(--color-artisan);
}

.post-card-rank--chevalier {
    background: var(--color-chevalier-bg);
    color: var(--color-chevalier);
}

.post-card-rank--diamond {
    background: var(--color-diamond-bg);
    color: var(--color-diamond);
}

.post-card-rank--platinum {
    background: var(--color-platinum-bg);
    color: var(--color-platinum);
}

.post-card-rank--gold {
    background: var(--color-gold-bg);
    color: var(--color-gold);
}

.post-card-rank--silver {
    background: var(--color-silver-bg);
    color: var(--color-silver);
}

.post-card-rank--trainee {
    background: var(--color-trainee-bg);
    color: var(--color-trainee);
}

.post-card-rank--inconnu {
    background: var(--color-inconnu-bg);
    color: var(--color-inconnu);
}

/* =======================================

post-card-engagement（いいね／アイコン）

======================================= */

.post-card-engagement {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 20px;
}

.post-card-engagement > li {
    display: flex;
    align-items: center;
}

.post-card-engagement .post_card-nice{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
}


.post-card-like img {
    display: block;
    width: 16px;
    height: 16px;
}

.post-card-like-count {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.06em;
    color: var(--color-post-font-accent);
}

.post-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: -6px;
}

.post-card-icon img {
    display: block;
}

/* =======================================

post_list

======================================= */

.post_list {
    display: flex;
    flex-direction: column;
}

/* =======================================

post-detail_cast（投稿者ミニヘッダー）

======================================= */

.post-detail_cast {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    box-shadow: inset 0 -1px 0 0 var(--color-post-border-primary);
}

.post-detail_cast-avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

.post-detail_cast-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: top;
}

.post-detail_cast-avatar img.nowprinting-img{
   object-position: center;
}

.post-detail_cast-name {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.post-detail_cast-name a {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.06em;
    color: var(--color-post-font-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =======================================

post-detail_post（投稿詳細本体／一覧の詳細型カード）

======================================= */

.post-detail_post {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 20px 16px;
    box-shadow: inset 0 -1px 0 0 var(--color-post-border-primary);
}

.post-detail_post-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

.post-detail_post-pinned {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 2px;
    background: var(--color-post-pinned-bg);
    font-size: 12px;
    color: #fff;
}

.post-detail_post-pinned img {
    display: block;
    width: 16px;
    height: 16px;
}

.post-detail_post-date {
    width: 100%;
    text-align: right;
    font-size: 10px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.06em;
    color: var(--color-post-font-accent);
}

.post-detail_post-head .post-detail_post-date {
    flex: 1;
    min-width: 0;
    width: auto;
}

.post-detail_post-text {
    margin: 0;
    width: 100%;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.06em;
    color: var(--color-post-font-primary);
}

.post-detail_post-media {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.post-detail_post-photo {
    width: 100%;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
}

.post-detail_post-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.post-detail_post-video {
    width: 100%;
}

.post-detail_post-video iframe{
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    border: 0;
}

.post-detail_post-video-link {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    overflow: hidden;
}

.post-detail_post-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-detail_post-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: block;
}

.post-detail_post-video-play img {
    width: 100%;
    height: 100%;
    display: block;
}

.post-detail_post-youtube {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.post-detail_post-youtube-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
}

.post-detail_post-youtube-icon svg {
    display: block;
    width: 32px;
    height: auto;
}

.post-detail_post-youtube-url {
    flex: 1;
    min-width: 0;
    display: block;
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #000;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =======================================

post-lead（Explain）

======================================= */

.post-lead {
    background: var(--color-post-bg-light);
    padding: 20px 16px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.06em;
    color: var(--color-post-font-primary);
}

/* =======================================

post-card-engagement（一覧カード用：いいねアイコン 14px）

======================================= */

.post-card-like img {
    width: 14px;
    height: 14px;
}

/* =======================================

post_list / post-card

======================================= */

.post-empty {
    padding: 40px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--color-post-font-accent);
}

.post-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 16px;
    box-shadow: inset 0 -1px 0 0 var(--color-post-border-primary);
}

/* =======================================

post-card-overlay（カード全体を詳細ページへのリンクにする透明レイヤー）

======================================= */

.post-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 透明レイヤーより手前に出す要素
   投稿者アイコン／投稿者名／本文中の自動リンク／続きを見る／
   画像スライダー／動画／フッター（いいね・アイコン）
   ※.post-card-text-more-btn は本文をその場で開閉するトグルのため、
     透明レイヤーに吸われないよう手前に出す
   ※詳細ページ（post_detail.tpl）でも同じclassを使うため、
     .post-card 配下に限定して指定する */
.post-card .post-card-avatar,
.post-card .post-card-name a,
.post-card .post-card-text p a,
.post-card .post-card-text-more-btn,
.post-card .post-card-photos,
.post-card .post-card-footer,
.post-card .post-detail_post-video,
.post-card .post-detail_post-youtube {
    position: relative;
    z-index: 2;
}

/* いいね・アイコンのみクリック可能にし、フッターの余白部分は
   透明レイヤーを透過させて詳細ページへ遷移させる */
.post-card .post-card-footer {
    pointer-events: none;
}

.post-card .post-card-footer a,
.post-card .post-card-footer button {
    pointer-events: auto;
}

.post-card-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

.post-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: top;
}

.post-card-avatar img.nowprinting-img{
   object-position: center;
}

.post-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.post-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.post-card-name {
    font-weight: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.post-card-name a {
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.06em;
    color: var(--color-post-font-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.post-card-time {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 0.06em;
    color: var(--color-post-font-accent);
}

.post-card-text p {
    max-height: 162px; /* line-height 18px × 9行 */
    overflow: hidden;
    margin: 0;
    width: 100%;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.06em;
    color: var(--color-post-font-primary);
}

.post-card-text-more-btn {
    display: none;
    cursor: pointer;
    text-align: right;
}

.post-card-text.is-overflow .post-card-text-more-btn {
    display: block;
}

.post-card-text.is-open p {
    max-height: none;
}

.post-card-photo {
    width: 100%;
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
}

.post-card-photo_btn {
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.post-card-photo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    /* 縦長画像がカード内で巨大化しないよう高さに上限を設ける。
       width:auto との併用で比率は保たれ、トリミングは発生しない */
    max-height: 500px;
    margin: 0 auto;
}

/* =======================================

post-card-photos（複数画像スライダー・最大4枚）
Figma: スライド 267×155 / gap 10 / コンテナ 297（次枚チラ見せ）
※画像1枚のみの投稿は上の基本スタイル（幅100%・高さ画像なり）のまま表示。
　2枚以上のときだけ JS 側で .is-multi を付与し、
　高さを220pxに統一・幅は各画像の比率のまま並べる（トリミング・余白なし）。

======================================= */

.post-card-photos {
    width: 100%;
}

.post-card-photos_swiper.is-multi .swiper-slide {
    width: auto;
}

.post-card-photos_swiper.is-multi .post-card-photo {
    width: auto;
}

.post-card-photos_swiper.is-multi .post-card-photo_btn {
    width: auto;
    height: 220px;
}

.post-card-photos_swiper.is-multi .post-card-photo img {
    width: auto;
    height: 100%;
}

/* =======================================

post-photo-modal（投稿画像モーダル）
Figma: node 2357:787 — スライド 361×209 / gap 16 / 白ドットページネーション

======================================= */

.post-photo-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.post-photo-modal[hidden] {
    display: none;
}

.post-photo-modal_backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.72);
    cursor: pointer;
}

.post-photo-modal_panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(92vw, 1000px);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-photo-modal_swiper {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.post-photo-modal_swiper .swiper-slide {
    width: 100%;
}

.post-photo-modal_img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-radius: 8px;
    overflow: hidden;
}

/* object-fit では <img> 要素自体は枠いっぱいのままになり、
   画像の周囲の余白も <img> の上になってしまうため、
   max-width / max-height で要素自体を実際の表示サイズに一致させる。
   （これにより画像脇のクリックがコンテナ側で拾えるようになる）
   あわせて元が小さい画像を原寸以上に引き伸ばさない（ボケ防止）。 */
.post-photo-modal_img img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.post-photo-modal_pager {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 22px;
}

.post-photo-modal_pager[hidden] {
    display: none;
}

.post-photo-modal_pager .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 50%;
    opacity: 1;
    background: rgba(255, 255, 255, 0.4);
}

.post-photo-modal_pager .swiper-pagination-bullet.is-current {
    background: #fff;
}

body.is-post-photo-modal-open {
    overflow: hidden;
}

/* =======================================

caution（Figma上は制作者向けモックアップ注記のため実装対象外。
.cursor/tmp/figma-plans/sp-post-top.md の Open questions 参照）

======================================= */

/* =======================================

post-detail（詳細画面：post-cast_filter 上部に border と余白）

======================================= */

.post-cast_filter-ttl {
    padding: 22px 16px 8px;
 /*   box-shadow: inset 0 1px 0 0 var(--color-post-border-primary);*/
}

/* =======================================

post-private（一覧・非公開キャスト）
本画面固有の上書きは現時点なし（共通スタイルのみ）。

======================================= */

/* =======================================

post-private-profile（プロフィール固有）

======================================= */

.u_post--noPt {
    padding-top: 0;
}

/* =======================================

profile-thum（写真スライダー＋ランクラベル）

======================================= */

.profile-thum {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-top: 70px;
}

.profile-thum_rank {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 100px;
    z-index: -1;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 600;
    font-family: "futura-pt", sans-serif;
}

.profile-thum_rank::before {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.profile-thum_rank--ga {
    background: radial-gradient(46.5% 46.5% at 50% 50%, var(--status-grand-artisan-50, rgba(1, 25, 10, 0.50)) 0%, rgba(1, 25, 10, 0.10) 60%, rgba(255, 255, 255, 0.00) 90%);
}

.profile-thum_slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.profile-thum_arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 28px;
    height: 64px;
    justify-content: center;
    background: #000;
    border: none;
    cursor: pointer;
}

.profile-thum_arrow img {
    display: block;
    width: 8.6px;
    height: 15px;
}

.profile-thum_swiper {
    flex-shrink: 0;
    width: calc(320 / 393 * 100%);
    max-width: calc(100% - 100px);
}

.profile-thum_imgWrap {
    width: 100%;
    /* height: 427px; */
    overflow: hidden;
}

.profile-thum_imgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-thum_pager {
    position: static;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.profile-thum_pager .swiper-pagination-bullet {
    width: 20px;
    height: 5px;
    margin: 0;
    border-radius: 0;
    opacity: 1;
    background: #e5e5e5;
}

.profile-thum_pager .swiper-pagination-bullet.is-current {
    background: #777;
}

/* =======================================

profile-info（Profile：エリアラベル・氏名・口コミ件数・年齢等・SNS/検査アイコン）

======================================= */

.profile-info {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
}

.profile-info_area {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.profile-info_areaLabel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 2px;
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #fff;
}

.profile-info_name {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.profile-info_name-text {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: #000;
    line-height: normal;
}

.profile-info_name-review {
    font-weight: 400;
    font-size: 16px;
}

.profile-info_name-spec {
    font-size: 14px;
    color: #000;
}

.profile-info_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.profile-info_icon-item {
    display: block;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.profile-info_icon-item:hover {
    opacity: 0.8;
}

.profile-info_icon-item img {
    display: block;
    width: 100%;
    height: 100%;
}

.profile-info_icon-inspection {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.profile-info_icon-inspection img {
    display: block;
    width: 100%;
    height: 100%;
}

.profile-info_icon-inspection span {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: 0.08em;
    color: #fff;
    text-align: center;
}

/* =======================================

profile-qa（Questions：Q&A 17組）

======================================= */

.profile-qa {
    margin-top: 40px;
    padding: 0 16px;
}

.profile-qa_question {
    padding: 10px 12px;
    background: var(--color-post-heading-bg);
    font-size: 14px;
    font-weight: bold;
    line-height: calc(18 / 14);
    color: #fff;
}

.profile-qa_answer {
    margin: 0;
    padding: 10px 12px;
    box-shadow: inset 0 0 0 1px var(--color-post-border-secondary);
    font-size: 14px;
    line-height: calc(18 / 14);
    color: var(--color-post-font-primary);
}

/* =======================================

profile-section（What / Schedule / Reserve / Review / Diary / Post 共通の見出し・骨組み）

======================================= */

.profile-section {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0 16px;
}

.profile-section_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: center;
    color: #000;
}

.profile-section_head-en {
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.4;
}

.profile-section_head-ja {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.06em;
}

/* =======================================

profile-more（各セクション共通の「もっと見る」系ボタン）

======================================= */

.profile-more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 300px;
    max-width: 100%;
    min-height: 39px;
    padding: 10px 0 8px 0;
    border-radius: 999px;
    background: var(--color-post-btn-primary);
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s;
}

.profile-more:hover {
    opacity: 0.85;
}

.profile-more img {
    position: absolute;
    top: 50%;
    right: 17px;
    transform: translateY(-50%);
    width: 8.5px;
    height: 15px;
}

/* =======================================

profile-what（WHAT KIND OF PERSON：どんな人）

======================================= */

.profile-what_text {
    width: 100%;
    font-size: 14px;
    line-height: calc(18 / 14);
    color: var(--color-post-font-primary);
}

/* =======================================

profile-schedule（SCHEDULE：出勤情報）

======================================= */

.profile-schedule_table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.profile-schedule_row {
    display: flex;
    align-items: stretch;
    width: 100%;
    box-shadow: inset 0 -1px 0 0 var(--color-post-border-secondary);
}

.profile-schedule_row:first-child {
    box-shadow: inset 0 1px 0 0 var(--color-post-border-secondary), inset 0 -1px 0 0 var(--color-post-border-secondary);
}

.profile-schedule_date {
    flex-shrink: 0;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: inset -1px 0 0 0 var(--color-post-border-secondary);
    font-size: 14px;
    color: #000;
    text-align: center;
}

.profile-schedule_date.-sat {
    color: var(--color-post-schedule-sat);
}

.profile-schedule_date.-sun {
    color: var(--color-post-schedule-sun);
}

.profile-schedule_time {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    font-size: 14px;
    line-height: 1.285;
    color: #000;
}

/* =======================================

profile-reserve（RESERVE：ご予約について）

======================================= */

.profile-reserve_text {
    width: 100%;
    font-size: 14px;
    line-height: calc(17 / 14);
    color: var(--color-post-font-primary);
}

.profile-reserve_tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 300px;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 0 8px;
    background: var(--color-post-tel-bg);
    color: #fff;
}

.profile-reserve_tel-label {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-size: 14px;
}

.profile-reserve_tel-label-en {
    font-family: "futura-pt", sans-serif;
    font-size: 16px;
}

.profile-reserve_tel-time {
    font-family: "futura-pt", sans-serif;
    font-weight: 600;
    font-size: 20px;
}

/* =======================================

profile-review（REVIEW：口コミ）

======================================= */

.profile-review_list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.profile-review_item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    box-shadow: inset 0 1px 0 0 var(--color-post-border-secondary);
}

.profile-review_list > li:last-child .profile-review_item {
    box-shadow: inset 0 1px 0 0 var(--color-post-border-secondary), inset 0 -1px 0 0 var(--color-post-border-secondary);
}

.profile-review_name {
    font-size: 14px;
    color: var(--color-post-review-name);
}

.profile-review_text {
    font-size: 14px;
    line-height: normal;
    color: var(--color-post-font-primary);
}

.profile-review_like {
    display: flex;
    align-items: center;
    gap: 5px;
}

.profile-review_like img {
    display: block;
    width: 20px;
    height: 20px;
}

.profile-review_like span {
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--color-post-review-heart);
}

/* =======================================

profile-diary（DIARY：写メ日記）

======================================= */

.profile-diary_list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.profile-diary_item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 0;
    box-shadow: inset 0 1px 0 0 var(--color-post-border-secondary);
}

.profile-diary_photo {
    width: 100%;
    aspect-ratio: 361 / 241;
    overflow: hidden;
}

.profile-diary_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-diary_meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-diary_date {
    font-size: 13px;
    color: var(--color-post-review-name);
}

.profile-diary_like {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--color-post-review-heart);
}

.profile-diary_like img {
    display: block;
    width: 20px;
    height: 20px;
}

.profile-diary_title {
    font-weight: 600;
    font-size: 15px;
    line-height: calc(20 / 15);
    min-height: 22px;
    color: var(--color-post-font-primary);
}

.profile-diary_text {
    font-size: 14px;
    line-height: calc(17 / 14);
    color: var(--color-post-font-primary);
}

/* =======================================

profile-postWidget（末尾の投稿ウィジェット：POST/ポスト 3件）
Figma上「Post=Widget」バリアントで screen #2/#3 の Post=Default（.post-detail_post*）とは
別レイアウト（サムネ86×86＋本文横並び）のため新規クラスで実装。
色トークンは既存 --color-post-* / --color-post-border-primary を再利用。

======================================= */
.profile-postWidget {
    padding-bottom: 60px;
}

.profile-postWidget_list {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.profile-postWidget_item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 16px;
    box-shadow: inset 0 -1px 0 0 var(--color-post-border-primary);
}

.profile-postWidget_list > li:first-child .profile-postWidget_item {
    box-shadow: inset 0 1px 0 0 var(--color-post-border-primary), inset 0 -1px 0 0 var(--color-post-border-primary);
}

.profile-postWidget_top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

.profile-postWidget_pinned {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 2px;
    background: var(--color-post-pinned-bg);
    font-size: 12px;
    color: #fff;
}

.profile-postWidget_pinned img {
    display: block;
    width: 16px;
    height: 16px;
}

.profile-postWidget_date {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 10px;
    line-height: 1.8;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-post-font-accent);
}

.profile-postWidget_body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.profile-postWidget_thumb {
    flex-shrink: 0;
    width: 86px;
    height: 86px;
    border-radius: 8px;
    overflow: hidden;
}

.profile-postWidget_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-postWidget_noimage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 10px;
    color: #999;
}

.profile-postWidget_text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.06em;
    color: var(--color-post-font-primary);
}

/* =======================================

u-visually-hidden（画面上は非表示、DOM/クローラーには存在させる）
無限スクロール導入に伴い、裏側ページャー（Googleボット巡回導線）と
読み込み中表示を画面上からは隠すためのユーティリティ

======================================= */

.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* いいね済み状態 */
.post_card-nice.is-liked .post-card-like-count {
    color: #e0245e;
}
.post_card-nice.is-liked img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(84%) saturate(3000%) hue-rotate(325deg) brightness(95%) contrast(101%);
}

.post_detail-other-ttl{
    background: var(--baseItemColor01);
    padding: 20px;
    text-align: center;
}

.post_detail-more{
    text-align: center;
    margin-top: 10px;
    padding: 20px;
}

.post_detail-more .btn{
    background: var(--baseItemColor01);
    display: block;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    border-radius: 5px;
}


/* =======================================

投稿本文中のURL自動リンク

======================================= */

.post-card-text p a,
.post-detail_post-text a {
    display: inline;
    color: #1a6ed8;
    text-decoration: underline;
    word-break: break-all;
}

.post-card-text p a:hover,
.post-detail_post-text a:hover {
    text-decoration: none;
}