@charset "UTF-8";

/* ==========================================
       カスタムカラー & 全体スタイル (和モダン)
       ========================================== */
:root {
    /* 背景色 */
    --bg-cream: #fdfbf7;           /* 生成り（全体の背景色） */
    
    /* メインカラー */
    --main-aqua: #AFDFE4;          /* ペールアクア（ヘッダーやアクセントエリア） */
    --navy-main: var(--main-aqua); /* 互換用記述 */
    
    /* 文字・見出し色（高コントラストで可読性を確保） */
    --text-heading: #1D2A3A;       /* ディープネイビー（見出し・ナビ文字・ロゴ） */
    --text-dark: #2c2c2c;          /* 墨色（本文文字色） */
    
    /* アクセントカラー */
    --vermilion-accent: #c83f3d;   /* 朱色（ボタン・強調線） */
    --vermilion-hover: #b03432;    /* 朱色ホバー時 */
}

body {
    background-color: var(--bg-cream);
    color: var(--text-dark);
    font-family: 'Noto Serif JP', "Yu Mincho", "游明朝", serif;
}

/* ==========================================
       ナビゲーションバー
       ========================================== */

/* ナビゲーションバー基本設定 */
.navbar {
    padding-top: 1.75rem !important;    /* 初期状態：かなりゆったり高く設定 */
    padding-bottom: 1.75rem !important;
    transition: all 0.4s ease;          /* アニメーションをほんのり滑らかに */
}

/* ロゴテキスト（または画像）の初期変化設定 */
.navbar-brand {
    font-size: 1.6rem;                  /* 初期状態：ロゴを大きめに */
    transition: all 0.4s ease;
}

/* ------------------------------------------
   スクロール時の縮小スタイル
   ------------------------------------------ */
.navbar.navbar-scrolled {
    padding-top: 0.5rem !important;     /* スクロール後：一気にコンパクト化 */
    padding-bottom: 0.5rem !important;
    backdrop-filter: blur(8px);          /* すりガラス風のエフェクト */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 浮遊感のある影 */
}

/* スクロール時のロゴサイズ縮小 */
.navbar.navbar-scrolled .navbar-brand {
    font-size: 1.25rem;                 /* ロゴもキュッと小さく */
}

.navbar-custom {
    background-color: var(--main-aqua);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* ナビ内のテキスト・ロゴ（背景が明るいため暗い色に変更） */
.navbar-custom .navbar-brand {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-heading);
}

.navbar-custom .nav-link {
    color: var(--text-heading);
    opacity: 0.85;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    font-weight: 600;
    transition: opacity 0.3s, border-color 0.3s;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: var(--text-heading);
    opacity: 1;
    border-bottom: 2px solid var(--vermilion-accent);
}

/* ロゴ画像のスタイリング */
.site-logo {
  height: 60px;
  width: auto;
  transition: opacity 0.3s;
}

.navbar-brand:hover .site-logo {
  opacity: 0.8;
}

.logo-roman-side {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--text-heading);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Navbar内の問い合わせボタン（朱色でくっきり目立たせる） */
.navbar-custom .btn-nav-contact {
    background-color: var(--vermilion-accent);
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.4rem 1.2rem;
    border-radius: 4px;
    border-bottom: none !important;
    transition: background-color 0.3s, opacity 0.3s;
}

.navbar-custom .btn-nav-contact:hover {
    background-color: var(--vermilion-hover);
    color: #ffffff !important;
    opacity: 0.9;
}

/* ハンバーガーボタン自体の枠線を濃紺に（枠線を出したい場合） */
.navbar-toggler {
    border-color: #1D2A3A;
}

/* ハンバーガーアイコン（3本線）の色を濃紺に変更 */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231D2A3A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ------------------------------------------
   ヘッダー用 X（Twitter）アイコンボタン
   ------------------------------------------ */
.nav-sns-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #1D2A3A !important; /* Xロゴをくっきり濃紺に指定 */
    background-color: #ffffff;  /* クリアな白背景 */
    border: 1px solid rgba(29, 42, 58, 0.15);
    text-decoration: none;
    transition: all 0.25 ease;
}

.nav-sns-x:hover {
    color: #ffffff !important;
    background-color: #C83F3D; /* ホバーで朱色に変化 */
    border-color: #C83F3D;
    transform: translateY(-1px);
}

/* ==========================================
       Swiper ヒーローエリア設定
       ========================================== */
.hero-swiper {
    width: 100%;
    height: 70vh;
    min-height: 400px;
}

.hero-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
}

.hero-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

/* キャプション設定 */
.slide-caption-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 3rem 1.5rem;
  color: #ffffff;
}

.slide-caption-title {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  text-shadow: 
    0 0 15px rgba(0,0,0,1),
    0 0 5px rgba(0,0,0,1);
}

.slide-caption-sub {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-shadow: 
    0 0 8px rgba(0,0,0,1),
    0 0 2px rgba(0,0,0,1);
}

/* Swiperコントローラー（左右両方に丸枠背景を適用） */
.swiper-button-next,
.swiper-button-prev {
    color: var(--text-heading);            /* 矢印の色（ダークネイビー） */
    background-color: rgba(255, 255, 255, 0.85); /* 白の半透明背景 */
    width: 48px;                           /* ボタンの幅 */
    height: 48px;                          /* ボタンの高さ */
    border-radius: 50%;                    /* 正円にする */
    transition: background-color 0.3s, color 0.3s;
}

/* 矢印アイコンのサイズ調整・中央配置 */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.2rem;                     /* 矢印アイコンの大きさ */
    font-weight: bold;
}

/* マウスホバー時の効果 */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: #ffffff;             /* ホバーで不透明な白に */
    color: var(--vermilion-accent);        /* 矢印の色を朱色に変更 */
}

.swiper-pagination-bullet-active {
    background-color: var(--vermilion-accent) !important;
}



/* ご挨拶セクションの全体背景 */
.greeting-section {
    background-color: #F9F9F6;
}

.greeting-sub {
    color: #C83F3D;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
}

.greeting-title {
    color: #1D2A3A;
    font-size: 2rem;
    letter-spacing: 0.1em;
}

/* モットーカード */
.motto-box {
    background-color: #ffffff;
    border-left: 4px solid #C83F3D;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    color: #1D2A3A;
}

.motto-text {
    letter-spacing: 0.08em;
    line-height: 1.6;
}

/* 本文（中央寄せの中に左揃えで配置） */
.greeting-body {
    color: #333333;
    font-size: 1.05rem;
    max-width: 540px; /* 横幅を絞って綺麗に折り返し */
}

/* ------------------------------------------
   座右の銘（和モダン・落款風デザイン）
   ------------------------------------------ */
.motto-badge-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

/* 上部に繊細な和風のラインを配置 */
.motto-badge-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    width: 60px;
    height: 1px;
    background-color: #C83F3D; /* 朱色の細線 */
}

.motto-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: #ffffff;
    padding: 8px 24px;
    border-radius: 50px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.motto-label {
    font-size: 0.85rem;
    color: #ffffff;
    background-color: #C83F3D; /* 朱色のタグ */
    padding: 2px 10px;
    border-radius: 4px;
    letter-spacing: 0.1em;
}

.motto-val {
    font-size: 1.1rem;
    font-weight: bold;
    color: #1D2A3A;
    letter-spacing: 0.12em;
}

/* ------------------------------------------
   パターンA：和紙・落款（はんこ）風デザイン
   ------------------------------------------ */
.motto-box-washi {
    background-color: #ffffff;
    border: 1px solid #AFDFE4; /* ペールアクアの繊細な枠線 */
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.motto-inner {
    border: 1px dashed #C83F3D; /* 内側に朱色の点線枠 */
    padding: 1.5rem 1rem;       /* 上下 1.5rem / 左右 1rem */
    position: relative;
}

/* 判子（ハンコ）風のワンポイント */
.motto-seal {
    position: absolute;
    top: -12px;
    right: 20px;
    background-color: #C83F3D;
    color: #ffffff;
    font-family: "Yu Mincho", "游明朝", serif;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 2px;
    letter-spacing: 0.1em;
}

/* モットーのテキスト基本（PCサイズ） */
.motto-text {
    color: #1D2A3A;
    letter-spacing: 0.05em; /* 枠からはみ出ないよう文字間をほんのり調整 */
    white-space: nowrap;    /* 勝手な途中の折り返しを防止 */
}

/* ------------------------------------------
   スマホ表示（画面幅767px以下）のサイズ調整
   ------------------------------------------ */
@media (max-width: 767.98px) {
    .motto-inner {
        padding: 1.25rem 0.5rem; /* 内側の余白を少し詰めて横幅を確保 */
    }
    
    .motto-text {
        /* スマホ画面に合わせて文字サイズを自動でジャストサイズに自動縮小 */
        font-size: clamp(0.9rem, 3.8vw, 1.25rem) !important;
    }
    
    .motto-seal {
        right: 10px; /* 判子の位置も端によりすぎないよう調整 */
    }
}

/* 明朝体クラス */
.font-serif {
    font-family: "Yu Mincho", "游明朝", "Shippori Mincho", "MS PMincho", serif;
}

/* CSS部分 */
.news-item {
    transition: background-color 0.2s ease, transform 0.2s ease;
}
/* ホバーした時に行全体が少し浮き上がり、背景がほんのり変わる */
.news-item:hover {
    background-color: #F9F9F6 !important; /* オフホワイト */
}
.news-item:hover .news-title {
    color: #C83F3D; /* 朱色に変更 */
}
.news-item:hover .news-arrow {
    color: #C83F3D !important;
    transform: translateX(4px); /* 矢印が右にすっと動く */
    transition: transform 0.2s ease;
}
/* ==========================================
   プロフィールページ専用：タイトルとアンダーバーの中央配置
   ========================================== */

/* 基本のセクションタイトル（他ページ用・共通） */
.section-title {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

/* 共通アンダーバー（基本は左揃え） */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--vermilion-accent, #C83F3D);
}

/* お知らせリンクのホバー時アニメーション */
.hover-red {
    transition: color 0.2s ease-in-out;
}
.hover-red:hover {
    color: #C83F3D !important;
}

/* ==========================================
   プロフィールページ専用：左寄せ＋縦線アクセント
   ========================================== */

.profile-section-title {
    position: relative;
    border-left: 4px solid var(--vermilion-accent, #C83F3D); /* 左側に朱色の縦線 */
    padding-left: 15px;                                      /* 線とタイトルの間の余白 */
    line-height: 1.2;
}

/* 横のアンダーバーは非表示にする */
.profile-section-title::after {
    display: none !important;
}

.btn-vermilion {
    background-color: var(--vermilion-accent);
    color: #ffffff;
    padding: 0.75rem 2rem;
    border: none;
    transition: background-color 0.3s;
}

.btn-vermilion:hover {
    background-color: var(--vermilion-hover);
    color: #ffffff;
}

/* ==========================================
       レスポンシブ調整（スマホ対応）
       ========================================== */
@media (max-width: 991.98px) {
    .navbar-custom .btn-nav-contact {
        display: inline-block;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 768px) {
    .hero-swiper {
        height: 50vh;
    }

    .slide-caption-title {
        font-size: 1.5rem;
    }

    .slide-caption-sub {
        font-size: 0.9rem;
    }
}


/* スマホ・タブレット（ハンバーガーメニュー展開時）のメニュー間隔調整 */
@media (max-width: 991.98px) {
    /* メニューリスト全体の上下余白 */
    .navbar-collapse .navbar-nav {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* 各メニュー項目（リンク）の上下間隔を広げる */
    .navbar-custom .navbar-nav .nav-item {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    /* リンクテキスト自体にも上下のパディングを付けてタップしやすくする */
    .navbar-custom .nav-link {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .navbar-custom .btn-nav-contact {
        display: inline-block;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/* ==========================================
       プロフィール
       ========================================== */
/* 背景色とヘッダー */
body.bg-cream {
    background-color: #F9F9F6;
}

.page-header {
    background-color: rgba(175, 223, 228, 0.25); /* #AFDFE4 (Pale Aqua) を基調とした淡い背景 */
}

/* テキストカラー */
.text-navy {
    color: var(--text-heading, #1D2A3A);
}

.text-vermilion {
    color: var(--vermilion-accent, #C83F3D);
}

/* トラッキング（文字間隔） */
.tracking-widest {
    letter-spacing: 0.15em;
}

/* 略歴（タイムライン）のスタイル */
.timeline-item {
    position: relative;
}

.timeline-dot {
    position: absolute;
    left: -25px; /* 左の縦線上にドットを配置 */
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--vermilion-accent, #C83F3D);
    border: 2px solid #ffffff;
}


/* ------------------------------------------
   フッター & X（Twitter）リンクボタン
   ------------------------------------------ */
.sns-btn-x {
    color: #1D2A3A; /* 濃紺の文字・アイコン */
    background-color: #ffffff; /* 白背景 */
    border: 1px solid #ffffff;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.sns-btn-x:hover {
    color: #ffffff;
    background-color: #C83F3D; /* ホバーで朱色に変化 */
    border-color: #C83F3D;
    transform: translateY(-2px);
}


/* ---------------------------------------------
   旅の徒然（ギャラリー）スタイル
--------------------------------------------- */
/* カード全体の見た目：和紙風のオフホワイト背景 */
.tsurezure-card {
  background-color: #F9F9F6;
  border: 1px solid rgba(29, 42, 58, 0.08);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* マウスを乗せたときに、ふんわり持ち上がるアニメーション */
.tsurezure-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(29, 42, 58, 0.12);
}

/* 画像表示枠（縦横比 4:3 で統一） */
.tsurezure-img-wrapper {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #1D2A3A;
}

.tsurezure-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.tsurezure-card:hover .tsurezure-img {
  transform: scale(1.04); /* ホバー時に写真が少しズーム */
}

/* 千社札（せんしゃふだ）風の和風タグ */
.senjafuda-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: #1D2A3A; /* ダークネイビー */
  color: #F9F9F6;
  border: 1px solid #C83F3D; /* 朱色のアクセント枠 */
  font-family: 'Shippori Mincho', 'Yu Mincho', serif;
  font-size: 0.75rem;
  padding: 4px 8px;
  writing-mode: vertical-rl; /* ★ここがポイント！縦書きタグ */
  letter-spacing: 0.1em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* テキスト部分の余白と装飾 */
.tsurezure-body {
  padding: 1.25rem;
}

.tsurezure-date {
  display: block;
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

/* 師匠の一言（明朝体） */
.tsurezure-text {
  color: #1D2A3A;
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

/* ギャラリーモーダル内の画像選択・長押しドラッグを無効化してスワイプしやすくする */
#commonCarousel .carousel-item img {
    user-select: none;
    -webkit-user-drag: none;
}

/* モーダル内のPCマウスドラッグ（スワイプ）用スタイル */
#commonCarousel {
    cursor: grab;
}
#commonCarousel:active {
    cursor: grabbing;
}
#commonCarousel img {
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

/* トップへ戻るボタン */
.page-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #1D2A3A; /* 紺色（メインのダークカラー） */
    color: #ffffff;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 1030; /* ヘッダーやモーダルの下、一般コンテンツの上に表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease;
}

/* ホバー時の挙動 */
.page-top-btn:hover {
    background-color: #C83232; /* 朱色（アクセントカラー） */
    color: #ffffff;
    transform: translateY(-3px);
}

/* 表示状態（JSで付与） */
.page-top-btn.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* スマホ表示の時は少し位置とサイズを調整 */
@media (max-width: 767.98px) {
    .page-top-btn {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
}

/* カルーセル（スライド）の左右矢印ボタン */
#commonCarousel .carousel-control-prev,
#commonCarousel .carousel-control-next {
    width: 44px;
    height: 44px;
    background-color: rgba(29, 42, 58, 0.65);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.85;
    transition: all 0.3s ease;
    
    /* ▼ !important を外し、JavaScriptからの切り替えを可能にします */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* 位置の調整 */
#commonCarousel .carousel-control-prev {
    left: 15px;
}

#commonCarousel .carousel-control-next {
    right: 15px;
}

/* 矢印アイコン自体の中央配置とサイズ調整 */
#commonCarousel .carousel-control-prev-icon,
#commonCarousel .carousel-control-next-icon {
    width: 1.2rem;
    height: 1.2rem;
    background-size: 100% 100%;
    margin: 0; /* 不要な余白をリセット */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* 左矢印（＜）の視覚的な中心補正（必要に応じて微調整） */
#commonCarousel .carousel-control-prev-icon {
    margin-right: 2px; /* 形の錯視で左寄りに見えやすいため、2px右へ移動 */
}

/* 右矢印（＞）の視覚的な中心補正 */
#commonCarousel .carousel-control-next-icon {
    margin-left: 2px; /* 形の錯視で右寄りに見えやすいため、2px左へ移動 */
}

/* ホバー時の変化 */
#commonCarousel .carousel-control-prev:hover,
#commonCarousel .carousel-control-next:hover {
    background-color: #C83232; /* 朱色 */
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

/* スマホ表示での調整 */
@media (max-width: 767.98px) {
    #commonCarousel .carousel-control-prev,
    #commonCarousel .carousel-control-next {
        width: 36px;
        height: 36px;
    }
    #commonCarousel .carousel-control-prev {
        left: 8px;
    }
    #commonCarousel .carousel-control-next {
        right: 8px;
    }
}

/* モーダル内の画像表示領域を元画像サイズ・アスペクト比保持に対応 */
#commonCarousel .carousel-item {
    text-align: center;
}

#commonCarousel .carousel-item img {
    /* 画面の高さ（80vh）を超えない範囲で、元画像の縦横比を維持してフィット */
    max-height: 75vh;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
    display: block;
}

/* フッタープライバシーポリシーリンク */
.footer-nav .privacy-link {
    color: #ffffff;
    transition: color 0.3s ease;
}

.footer-nav .privacy-link:hover {
    color: var(--pale-aqua, #A8C3C8); /* ホバー時に淡浅葱色（Pale Aqua）へ */
    text-decoration: underline;
}

/* ==========================================
   ギャラリー：カテゴリヘッダー & フィルター
   ========================================== */

/* カテゴリ切り替えボタン */
.btn-gallery-filter {
    background-color: #ffffff;
    color: #1D2A3A;
    border: 1px solid rgba(29, 42, 58, 0.2);
    border-radius: 30px;
    padding: 0.4rem 1.2rem;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.btn-gallery-filter:hover {
    background-color: #F9F9F6;
    color: #C83F3D;
    border-color: #C83F3D;
}

.btn-gallery-filter.active {
    background-color: #C83F3D !important;
    color: #ffffff !important;
    border-color: #C83F3D !important;
    box-shadow: 0 4px 10px rgba(200, 63, 61, 0.25);
}

/* 見出し（カテゴリヘッダー） */
.category-header {
    border-bottom: 2px solid #AFDFE4; /* Pale Aqua の下線 */
    padding-bottom: 0.75rem;
    position: relative;
}

/* 見出しのアイコン丸背景 */
.category-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgba(175, 223, 228, 0.3);
    border-radius: 50%;
    margin-right: 8px;
    font-size: 1.1rem;
}

.text-vermilion {
    color: #C83F3D !important;
}

/* アニメーション用クラス */
.gallery-card-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.gallery-card-item.is-hidden {
    display: none !important;
}

/* 寄稿者プロフィールカード用の調整 */
.btn-outline-navy {
    border-color: #1D2A3A;
    color: #1D2A3A;
    transition: all 0.3s ease;
}

.btn-outline-navy:hover {
    background-color: #1D2A3A;
    color: #ffffff;
}