/* site基本構造 */
html {
  scroll-behavior: smooth;
}

.body {
    font-family: "Noto Sans JP", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fafafa;
}

*:focus {
  outline: none; /* アクセシビリティの観点から非推奨 */
}

.header-widget-area {
    display: flex;
    gap: 20px;
}

/* CSS共通構造 */

.sp-view {
    display: none;
}
ul{
  padding-left:0;
}

li{
  list-style:none;
}

.display-flex {
    display: flex;
    flex-flow: column;
}

.display-flex-df {
    display: flex;
}

.padding-10px {
    padding: 10px;
}
.padding-5px {
    padding: 5px;
}
.padding-5px-10px {
    padding: 0px 10px 5px 10px;
}

.margin-bottom-20px {
    margin-bottom: 20px;
}


.section-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-indiv {
    max-width: 1200px;
}

h4 {
    font-size: 26px;
    font-weight: 600;
    line-height: 2.3;
    color: #333;
    letter-spacing: 1px;
    text-align: left;
}

.dot_img2 {
    margin-top: -70px;
    width: 100%;
    height: auto;
}

.container-width100 {
    width: 100%;
}

.title-container {
    display: flex;
    justify-content: space-between; /* ニュース見出しとView allボタンを左右に配置 */
    align-items: center;
    margin-bottom: 0px;
    margin-top: 20px;
}

/* ボタン共通スタイル */

/* ------------------------------------- 
   1. ヘッダー                        */
.menu-group {
    display: flex;
    gap: 10px;
    margin-left: 20px;
    flex-wrap: wrap;
}

.menu-group li {
    margin-right: 20px;
}

.menu-item a {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #57C7EC;
    text-decoration: none;
    display: inline-block; /* 💡 重要：テキストの幅に合わせるために必要 */
  padding-bottom: 2px; /* テキストと下線の間に少しスペースを空ける */
  border-bottom: 2px solid transparent; /* 通常時は透明な下線（高さを確保） */
  transition: border-color 0.3s ease; /* アニメーションを滑らかにする（オプション） */
}

.menu-item a {
  /* text-decoration は使わない */
  display: inline-block;
  
  /* グラデーションテキストのスタイル */
  background: linear-gradient(90deg, #FF94C9 0%, #c9a5f6 40%, #57C7EC 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* 擬似要素の位置の基準とする */
  position: relative;
  
  /* border-bottomやtext-decorationは削除 */
}

/* 下線となる ::after 擬似要素の設定 */
.menu-item a::after {
  content: ''; /* 擬似要素には content が必要 */
  position: absolute;
  left: 0;
  bottom: -5px; /* 下線の位置を調整（テキストとの距離） */
  height: 2px; /* 下線の太さ */
  width: 0; /* 初期状態では幅をゼロにして非表示にする */
  
  /* グラデーションを下線の背景として設定 */
  background: linear-gradient(90deg, #FF94C9 0%, #c9a5f6 40%, #57C7EC 80%);
  
  /* 滑らかなアニメーション */
  transition: width 0.3s ease;
}

/* ホバー時の設定 */
.menu-item a:hover::after {
  /* ホバー時に幅を100%にして表示 */
  width: 100%;
}

/**/

h2 {
    font-size: 65px;
    letter-spacing: 1.5px;
    margin: 0;
    text-align: left;
    color: white;
    margin-top: -10px;
}

.site-logo {
    max-width: 140px;
    height: auto;
    margin-top: 10px;
}

.site-header {
    /* 常に画面上部に固定 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    
    /* 他のコンテンツより手前に配置して重なりを確保 */
    z-index: 2000; 
    
    /* 半透明の白背景 (RGBAの最後の値 0.85 で透明度を調整) */
    background-color: rgba(255, 255, 255, 0.9);
    
    /* デザインのための設定 */
    
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    
    /* ロゴとナビゲーションを横並びにする設定例 */
    
}

.header-css {
  display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px; /* ★ヘッダーの実際の高さに合わせて調整してください */
    padding: 10px 60px;
}

/* style.css の末尾など、適切な位置に追加 */
.fixed-banner-image {
    /* 画面内で位置を固定する */
    position: fixed;
    
    /* 画面の右下から0pxの位置に配置 */
    bottom: 0;
    right: 0;
    
    /* 他のコンテンツより手前に配置（必要に応じて調整） */
    z-index: 101; 

    /* バナーのサイズを設定（例：幅150px、高さ auto） */
    width: 240px; 
    height: auto;
    
    /* マージンで画面端からの余白を設定（例：上下左右に20px） */
    margin: 20px;
}

/* アニメーションのキーフレームを定義 */
@keyframes slide-in-out {
  /* 0% (開始時): 非表示の状態 */
  0% {
    transform: scaleX(0);
    transform-origin: left; /* 左を基点に設定 */
  }
  
  /* 40% (表示完了): 左から右へ広がり100%になる */
  40% {
    transform: scaleX(1);
    transform-origin: left;
  }
  
  /* 60% (消去開始): 少しの間、100%の状態を維持 */
  60% {
    transform: scaleX(1);
    transform-origin: right; /* 基点を右に変更 */
  }
  
  /* 100% (終了時): 右を基点に左へ縮小し非表示になる */
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

.fixed-banner-image::before {
  background: #ffffff;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  
  /* 初期状態は非表示 */
  transform: scaleX(0); 
  
  opacity: 0.7;
  z-index: 1;
}

/* ホバー時の設定 */
.fixed-banner-image:hover::before {
  /* 定義したアニメーションを適用 */
  animation-name: slide-in-out; 
  /* 実行時間 (例: 1.5秒) */
  animation-duration: 1s; 
  /* 繰り返し回数 (1回実行) */
  animation-iteration-count: 1; 
  /* 再生終了後、最後の状態（transform: scaleX(0)）を維持 */
  animation-fill-mode: forwards;
  /* 常にアニメーションをリセットして開始 */
  animation-timing-function: ease-in-out;
}

.banner-object-image {
    position: absolute;
    bottom: 15px; /* バナー画像の下に少しはみ出すように配置 */
    right: 10px;  /* バナー画像の右に少しはみ出すように配置 */
    width: 60px;   /* オブジェクト画像の幅を調整 */
    height: auto;
}

.banner-object-image {
  /* アニメーションの適用 */
  animation-name: float;
  animation-duration: 4s; /* アニメーションの速さ（4秒で1往復） */
  animation-iteration-count: infinite; /* 繰り返し回数（無限） */
  animation-timing-function: ease-in-out; /* 変化の仕方（最初はゆっくり、中間は速く、最後はゆっくり） */
  
  /* 要素の初期位置調整（動く基点を指定） */
  /* 必要に応じて position: relative; などを追加することも考慮してください */
}

/* 浮遊アニメーションの定義 */
@keyframes float {
  0% {
    /* アニメーション開始時：元の位置 */
    transform: translateY(0); 
  }
  50% {
    /* アニメーション中間点：下に15ピクセル移動 */
    transform: translateY(15px); 
  }
  100% {
    /* アニメーション終了時：元の位置に戻る */
    transform: translateY(0); 
  }
}

/* -------------------------------------
   2. 固定ヘッダーによるコンテンツの隠れを防止
------------------------------------- */
/* 固定ヘッダーの高さ分だけ、メインコンテンツを下にずらす */
.video-background-wrapper {
    /* ヘッダーの高さ(80px)と同じ分だけ、上部に余白を設定 */
    padding-top: 60px; /* ★ .site-headerの高さに合わせて調整してください */
}

/* -------------------------------------
   3. 透過ヘッダーを活かすための調整
------------------------------------- */
/* 動画背景全体のラッパー */
.video-background-wrapper {
    position: relative; /* 子要素の絶対配置の基準点とする */
    width: 100%;
    /* 動画を表示させたい高さに合わせて設定 */
    height: 85vh; /* 例: 高さ600pxに設定 */ 
    overflow: hidden; /* 動画がはみ出す部分を隠す */
}

/* 動画要素自体 */
#video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 動画を画面いっぱいに広げつつ、縦横比を維持して中央に配置するテクニック */
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100; /* 他のコンテンツより奥に配置 */
    transform: translate(-50%, -50%); /* 中央寄せ */
}

/* 動画の上に重ねるコンテンツ */
.video-content-overlay {
    position: relative;
    z-index: 1; /* 動画より手前に表示 */
    width: 100%;
    height: 100%;
    /* コンテンツの配置やスタイリングをここで行う */
    color: #ffffff; 
    text-align: center;
}

.carousel-container {
    width: 100%; /* カルーセルの表示幅を固定（ここが重要） */
    height: 80vh;
    margin: 50px auto;
    position: relative; /* ボタンの絶対配置の基準点にする */
    box-sizing: border-box;
}

/* ====================================
   「一部見せ」デザインのための設定
   ==================================== */
.carousel-wrapper {
    /* **ここが最重要**：指定幅を超えたコンテンツを非表示にする */
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin-top: -20px;
}

.carousel-track {
    display: flex; /* スライドを横一列に並べる */
    transition: transform 0.3s ease-in-out; /* スムーズな移動アニメーション */
    width: 100%;
    height: 100%;
    margin-left: 15%;
    
}

.carousel-slide {
    /* スライドの幅を container の幅よりも少し小さくする（例：80%）
       残りの20%が左右の隣接要素に見えるスペースになる */
    flex: 0 0 60%; /* 幅を80%に固定し、伸縮しないようにする */
    margin: 0 5%; /* 左右にマージンを持たせて、隣の要素を中央に配置する */

    /* コンテンツのスタイル */
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-sizing: border-box;
}

/* ====================================
   左下ボタンの設定
   ==================================== */
.carousel-controls {
    position: absolute;
    bottom: 10px; /* 下端からの距離 */
    left: 60px;   /* 左端からの距離 */
    z-index: 10;
}

.carousel-controls button {
    color: white;
    border: none;
    padding: 15px 20px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 26px;
    border-radius: 50%;
    opacity: 1;
}

.prev-button {
    margin-right: 20px;
    background-color: #EC57E3;
}

.next-button {
    background-color: #57C7EC;
}

.carousel-controls button:hover {
    opacity: 1;
}

.slide-iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: relative;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* iframeより前面に来るように設定 */
    cursor: default; /* マウスカーソルをデフォルトに戻す（動画クリック可能に見せないため） */
    /* 背景色を透明にする */
    background-color: transparent; 
}

/* 親要素（ラッパー）: 縦横比を定義 */
.aspect-ratio-box {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden; /* コンテンツがはみ出すのを防ぐ */
    border-radius: 40px; /* 角を丸くする */

    /* アスペクト比 1980x1080 (11:6) の計算:
       高さ / 幅 * 100 = 1080 / 1980 * 100 ≈ 54.545%
    */
    padding-top: 54.545%; /* ★この値がアスペクト比を決定する */
    margin: 0 auto; /* 中央寄せ */
}

/* 子要素 (iframe) : 親要素にぴったり合わせる */
.aspect-ratio-box iframe,
.aspect-ratio-box .slide-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 40px; /* 角を丸くする */
    

    object-fit: cover; /* コンテンツボックスを埋めるように拡大し、はみ出し部分はトリミング */
    transform: scale(1.05); /* 縦横方向に5%拡大。アスペクト比のずれに合わせて調整 */
    
    /* スムーズなアニメーション（オプション） */
    transition: transform 0.3s ease-out;

    filter: brightness(0.95) contrast(1.1) ; 
    /* brightness(0.95) でわずかに暗くし、contrast(1.1) でコントラストを強めて、 
       低画質による「ぼやけた感じ」を軽減させます。 */
}

.aspect-ratio-box img,
.aspect-ratio-box .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover; /* コンテンツボックスを埋めるように拡大し、はみ出し部分はトリミング */
    transform: scale(1.05); /* 縦横方向に5%拡大。アスペクト比のずれに合わせて調整 */
    
    /* スムーズなアニメーション（オプション） */
    transition: transform 0.3s ease-out;
}

.dot_img {
    margin-top: -40px;
    width: 100%;
    height: auto;
}

.dot_img2 {
    margin-top: -70px;
    width: 100%;
    height: auto;
}

.dot_img3 {
    margin-top: -70px;
    width: 100%;
    height: auto;
}


.text_news {
    width: 100%;
    height: auto;
}

.text_news2 {
    margin-left: -5px;
    width: 100%;
    height: auto;
}

/* 1. 表示領域の設定 (BLOGセクション用) */
.img-sections-news {
    overflow: hidden; /* コンテナからはみ出す部分を隠す（重要）*/
    white-space: nowrap; /* 画像が改行されないようにする */
    width: 100vw; /* ビューポート全体（画面全体）の幅に設定 */
    /* 中央寄せのプロパティはそのまま残しますが、横スクロールバーが出たら削除を検討 */
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
}

/* 2. アニメーションさせる要素（画像を横並びにする）- BLOG用 */
/* 幅は子要素（画像）の合計幅に依存させます。*/
.marquee-content {
    display: inline-block; /* 子要素の幅に合わせる */
    /* 画像を2セット用意して、アニメーションをこちらに適用します */
    animation: marquee 220s linear infinite; /* 30秒かけて、直線的に、無限に繰り返す */
}

/* 3. 画像のスタイル - BLOG用 */
/* .marquee-content2 の子要素にスタイルを適用 */
.marquee-content .text_news,
.marquee-content .text_news2 {
    display: inline-block; /* 画像を横に並べる */
    /* 画像の幅は適切に設定してください。必要であれば高さも設定します。 */
    /* 例: width: 300px; height: auto; */
    /* ここではご提示のクラスをそのまま使用 */
    width: 1500px; 
    height: auto;
}


/* 4. アニメーションの定義 */
@keyframes marquee {
    /* 0%の状態では、移動なし */
    0% {
        transform: translateX(0);
    }
    /* 100%の状態では、画像の幅分だけ左に移動 */
    100% {
        /* **重要なポイント**: 複製した画像1枚分の幅だけ左に移動します */
        transform: translateX(-50%);
    }
}

.text_blog {
    width: 100%;
    height: auto;
}

.text_blog2 {
    width: 100%;
    height: auto;
    margin-left: -5px;
}

/* 1. 表示領域の設定 (BLOGセクション用) */
.img-sections-blog {
    overflow: hidden; /* コンテナからはみ出す部分を隠す（重要）*/
    white-space: nowrap; /* 画像が改行されないようにする */
    width: 100vw; /* ビューポート全体（画面全体）の幅に設定 */
    /* 中央寄せのプロパティはそのまま残しますが、横スクロールバーが出たら削除を検討 */
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
}

/* 2. アニメーションさせる要素（画像を横並びにする）- BLOG用 */
/* 幅は子要素（画像）の合計幅に依存させます。*/
.marquee-content2 {
    display: inline-block; /* 子要素の幅に合わせる */
    /* 画像を2セット用意して、アニメーションをこちらに適用します */
    animation: marquee-reverse 220s linear infinite; /* 30秒かけて、直線的に、無限に繰り返す */
}

/* 3. 画像のスタイル - BLOG用 */
/* .marquee-content2 の子要素にスタイルを適用 */
.marquee-content2 .text_blog,
.marquee-content2 .text_blog2 {
    display: inline-block; /* 画像を横に並べる */
    /* 画像の幅は適切に設定してください。必要であれば高さも設定します。 */
    /* 例: width: 300px; height: auto; */
    /* ここではご提示のクラスをそのまま使用 */
    width: 1500px; 
    height: auto;
}

/* 4. 逆方向のアニメーションの定義 */
@keyframes marquee-reverse {
    /* 0%の状態はコンテンツの左端がコンテナの左端に合っている状態から開始 */
    0% {
        transform: translateX(-50%);
    }
    /* 100%の状態はコンテンツの半分の長さ（1セット分）だけ左に移動した位置 */
    /* ここでは画像を2セット用意していると仮定し、1セット分（-50%）移動します */
    100% {
        transform: translateX(0%); 
    }
}
/* -------------------------------------
   ニュースセクション全体の設定
   ------------------------------------- */
.news-section {
    padding: 40px 5% 110px 5%; /* 左右に余白を設定 */
    text-align: center;
    background-color: #57C7EC; /* body背景色と同じ */
    margin-top: -50px;
}

.news-section2 {
    padding: 40px 5% 110px 5%; /* 左右に余白を設定 */
    text-align: center;
    background-color: #ff94c9; /* body背景色と同じ */
    margin-top: -50px;
}

.news-section h2 {
    font-size: 65px;
    letter-spacing: 1.5px;
    margin: 0;
    text-align: left;
    color: white;
    margin-top: -10px;
}

.news-section2 h2 {
    font-size: 65px;
    letter-spacing: 1.5px;
    margin: 0;
    text-align: left;
    color: white;
}

.news-title-p {
    font-size: 20px;
    color: white;
    text-align: left;
    margin-top: -10px;
    margin-bottom: 60px;
}

/* -------------------------------------
   Newsリスト（横並びコンテナ）
   ------------------------------------- */
.news-list {
    display: flex;
    gap: 45px; /* カード間のスペース（pxで固定） */
    margin: 0 auto;
    width: 100%;
    margin-bottom: 40px;
}

/* -------------------------------------
   Newsカードのデザイン
   ------------------------------------- */
.news-card {
    /* flex: 5枚表示 + 間のギャップを考慮して幅を計算 */
    width: 266px; /* 固定幅 */
    height: auto;  
    background-color: white;
    border-radius: 10px;
    padding: 15px 15px 15px 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex; /* 内部コンテンツをFlexで制御 */
    flex-direction: column;
    text-align: left;
    position: relative;
    box-sizing: border-box;
}

.card-label {
    background-color: #ff69b4; /* 画像のピンク色を再現 */
    width: 20%;
    color: white;
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 14px;
    z-index: 5;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.card-label2 {
    background-color: #34bce9; /* 画像のピンク色を再現 */
    width: 20%;
    color: white;
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 14px;
    z-index: 5;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.card-thumbnail {
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding-top: 54.545%; /* 以前の動画と同じアスペクト比(11:6)を適用 */
    height: 0;
}

.card-thumbnail img, 
.no-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7b4c9; /* お知らせの背景色例 */
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.card-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

.card-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    height: 3em; /* 2行で省略する例 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
    color: #333;
}

/* チェックボタンのデザイン */
.check-button {
    background-color: #ff69b4; 
    color: white;
    text-decoration: none;
    padding: 8px 0;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    margin-top: auto; /* 下部に寄せる */
    transition: background-color 0.2s;
}

.check-button:hover {
    background-color: #e05e9e;
}

.check-button2 {
    background-color: #34bce9;
    color: white;
    text-decoration: none;
    padding: 8px 0;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    margin-top: auto; /* 下部に寄せる */
    transition: background-color 0.2s;
}

.check-button2:hover {
    background-color: #34bce9;;
}

/* -------------------------------------
   View All ボタン
   ------------------------------------- */
.view-all-button {
    /* news-header-containerのFlex設定により自動的に右に配置される */
    background-color: #ff69b4;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    padding: 8px 17px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
    width: 90px;
}

.view-all-button:hover {
    background-color: #ffffff;
    color: #ff69b4;
}

.view-all-button i {
    margin-left: 8px;
    font-size: 14px;
}

.view-all-button2 {
    /* news-header-containerのFlex設定により自動的に右に配置される */
    background-color: #34bce9;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    padding: 8px 17px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

.view-all-button2:hover {
    background-color: #ffffff;
    color: #34bce9;
}

.view-all-button2 i {
    margin-left: 8px;
    font-size: 14px;
}

/* ABOUTセクションのスタイル */

.about-title {
    font-size: 65px;
    letter-spacing: 1.5px;
    margin: 0;
    color: #ff94c9;
    margin-top: -10px;
}   

.about-title-p {
    font-size: 20px;
    color: #57C7EC;
    margin-top: -10px;
    margin-bottom: 10px;
    text-align: left;
}  

.about-section {
    padding: 60px 5% 0px 5%;
    background-color: #ffffff;
    margin-top: -50px;
}

.logo_img {
    width: 100%;
    max-width: 500px;
    margin-left: -40px;
    position: relative;
}

.about-section-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-description {
    font-size: 18px;
    font-weight: 500;
    line-height: 2.3;
    color: #333;
    margin: 0 auto;
    letter-spacing: 1px;
    margin-top: 20px;
}

.about-section-div-div {
    width: 50%;
}

.about2-div {
    width: 25%;
}

.about2-div img{
    width: 100%;
}

.about2-divs {
    gap: 20px;
    margin-top: 60px;
    padding: 20px;
    background-color: #99e2f9;
    border-radius: 10px;
}

/* PROJECTセクションのスタイル */

.Project-section {
    padding: 60px 5% 110px 5%;
    background-color: #FF94C9;
    margin-top: -50px;
}

.Project-title {
    font-size: 65px;
    letter-spacing: 1.5px;
    margin: 0;
    text-align: left;
    color: #ffffff;
    margin-top: -10px;
}   

.Project-title-p {
    font-size: 20px;
    color: #ffffff;
    text-align: left;
    margin-top: -10px;
    margin-bottom: 60px;
}  

.Project-section-div {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
}

.Project-description h4 {
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
}

.Project-description-img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 10px;
}

.Project-description-btn {
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 10px 0;
    border-radius: 5px;
    background-color: #ffffff;
    border: 3px solid #57C7EC;
    color: #57C7EC;
    transition: background-color 0.3s;
    width: 100%;
    text-align: center;
}


.icon-margin {
    margin-left: 10px;
}

/* WORKSセクションのスタイル */

.works-section {
    padding: 40px 5% 110px 5%; /* 左右に余白を設定 */
    text-align: center;
    background-color: #57C7EC; /* body背景色と同じ */
    margin-top: -50px;
}

.works-title-p {
    font-size: 20px;
    color: white;
    text-align: left;
    margin-top: -10px;
    margin-bottom: 60px;
}

.works-subtitle {
    font-size: 20px;
    color: white;
    text-align: center ;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100px;
    background-color: #FF94C9;
    font-weight: 500;
    border-radius: 10px;
   }

.work-iframe {
    height: 100%;
}

.card-thumbnail {
    position: relative; /* 子要素のabsolute配置の基準とする */
    overflow: hidden;
}

.works-gallery {
    display: flex;
    gap: 45px; /* カード間のスペース（pxで固定） */
    margin: 0 auto;
    width: 100%;
    margin-bottom: 40px;
}


/* staff section */
.staff-section {
    padding: 60px 5% 110px 5%;
    background-color: #ffffff;
    margin-top: -50px;
}

/* メンバー画像のコンテナスタイル */
.image-container {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem; /* rounded-3xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 画像切り替え時のアニメーション */
.member-content {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.fade-out {
    opacity: 0;
}

/* アイコンボタンのアクティブスタイル */
.icon-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(128, 90, 212, 0.4); /* main-purple shadow */
}
.icon-button.active {
    border: 3px solid var(--main-purple);
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(128, 90, 212, 0.6);
}
.icon-button {
    transition: all 0.2s ease-in-out;
}

/* メンバー名の下線デザイン */
.name-underline {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--main-purple);
    border-radius: 9999px;
}

/* メイン画像自体のスタイル（レスポンシブ対応） */
#main-member-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}


/* ==================================== */
/* メインメンバー紹介セクション (CSSで記述) */
/* ==================================== */
.member-display-container {
    background-color: #bdf0ff;
    border-radius: 1.5rem;
    margin-top: 60px;
    padding: 60px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.fade-out {
    opacity: 0;
}

/* レイアウトコンテナ (lg:flex lg:space-x-10) */
.layout-container {
    display: flex;
    gap: 2.5rem; /* space-x-10の代わり */
}

/* メンバー情報 (lg:w-1/2 mb-8 lg:mb-0) */
.member-info {
}

/* メンバー名コンテナ (.relative .inline-block .mb-6) */
.name-container {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem; /* mb-6 */
}

/* メンバー名 (#member-name) */
.member-name {
    font-size: 2rem; /* text-4xl */
    font-weight: 600; /* font-black */
    color: var(--dark-text-color);
    padding-bottom: 0.5rem; /* pb-2 */
}

/* メンバー名の下線デザイン */
.name-underline {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--main-purple);
    border-radius: 9999px;
}

/* タグとソーシャルアイコンコンテナ (.flex .flex-col .space-y-4 .mb-10) */
.tag-social-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1rem;
}

/* メンバースパムタグ (#member-tag) */
.member-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    background-color: var(--main-purple);
    color: var(--white-color);
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    border-radius: 9999px; /* rounded-full */
    letter-spacing: 0.05em; /* tracking-wider */
    align-self: flex-start; /* inline-blockの代わり */
}

/* ソーシャルアイコンコンテナ (.flex .space-x-4 .text-2xl .text-gray-500) */
.social-icons {
    display: flex;
    gap: 1rem; /* space-x-4 */
    font-size: 1.5rem; /* text-2xl */
    color: #6b7280; /* gray-500 */
}
.social-icons a {
    transition-property: color;
    transition-duration: 150ms;
}
.social-icons a:hover {
    color: var(--main-purple);
}

/* 詳細情報コンテナ (.space-y-4 .text-gray-700) */
.details-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-color);
    margin-bottom: 20px;
}

/* 詳細情報項目 (p.text-lg) */
.detail-item {
    font-size: 1rem; 
    margin: 5px 0;
}
.detail-label {
    font-weight: 700; /* font-bold */
    color: var(--main-purple);
    display: inline-block;
    margin-right: 5px;
}
.detail-value {
    color: var(--dark-text-color);
}


/* 紹介文コンテナ (.text-gray-700 .leading-relaxed .space-y-4) */
.bio-container {
    color: var(--text-color);
    line-height: 1.625; /* leading-relaxed */
    display: flex;
    flex-direction: column;
}

/* 紹介文の段落 (p.text-base) */
.bio-paragraph {
    font-size: 14px; /* text-base */
    margin: 5px 0;
    letter-spacing: 1px;
}

.image-container-wrapper {
    width: auto; 
    max-width: 400px;
    background-color: #ffffff;
    position: relative;
    border-radius: 1.5rem; /* rounded-3xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.image-container-wrapper img {
  /* 変化を適用するプロパティ（transform）と、変化にかける時間（0.3秒）を指定 */
  transition: transform 0.3s ease-in-out;
  transform-origin: bottom;
}
.image-container-wrapper img:hover {
  transform: scale(1.05);
}


/* ==================================== */
/* ナビゲーションセクション */
/* ==================================== */

/* ナビゲーションコンテナ (#member-navigation) */
.member-navigation {
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem; /* gap-4 */
    padding: 10px 20px;
    border-radius: 0.75rem;
    font-weight: 600;
}

/* アイコンボタンのアクティブスタイル (JSで制御) */
.icon-button {
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
    border-radius: 9999px; /* rounded-full */
    background-color: #f3f4f6; /* gray-100 */
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* shadow-md */
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    padding: 0;
    border: none;
    
}

.icon-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px #57C7EC; /* main-purple shadow */
}
.icon-button.active {
    border: 3px solid var(--main-purple);
    transform: translateY(-4px);
    box-shadow: 0 8px 15px #57C7EC;
}


/* CSSアニメーション まとめ*/
/* ========================================= */
/* 無限ループスライダー　*/
/* スライダー全体 */
.slider-wrapper {
  margin-top: 60px;
  margin-bottom: 110px;
  display: flex; /* スライドのグループを横並び */
  overflow: hidden; /* はみ出たスライドを隠す */
}
/* スライド3枚のグループ */
.slider {
  /* アニメーション名とtransform-originを変更 */
  animation: scroll-right 100s infinite linear .5s both;
  display: flex; /* スライド3枚を横並び */
  /* 最初から右端に移動させておく */
  transform: translateX(-100%);
  gap : 40px;
  padding-left:0;
  margin-left: 40px;
}
/* スライド */
.slide {
  width: calc(100vw / 4); /* 7はスライドの枚数 */
  border-radius: 20px;
  list-style: none;
}
/* スライドの画像 */
.slide img {
  display: block;
  width: 100%;
  border-radius: 10px;
}

@keyframes scroll-right {
  from {
    /* 逆向きなので、右端（-100%）からスタート */
    transform: translateX(-100%);
  }
  to {
    /* 左端（0%）まで移動 */
    transform: translateX(0);
  }
}


/* 1. スクロールフェードの初期状態と移行時間 */
.scroll-fade {
  /* 初期状態では透明で、少し左に移動させておく */
  opacity: 0;
  transform: translateX(-30px);
  
  /* アニメーションの移行時間とイージング関数を指定 */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 2. スクロールフェードの表示状態と遅延 */
.scroll-fade.is-visible {
  /* フェードイン・スライドアップ */
  opacity: 1;
  transform: translateX(0);
  
  /* 遅延時間の設定（0.5秒後にアニメーション開始） */
  transition-delay: 0.5s;
}

/* ========================================= */
/* 3. スワイプインアニメーションの共通ベースクラス */
/* ========================================= */

.swipe-in-text {
  /* 疑似要素がはみ出ても見えないようにする */
  overflow: hidden;
  /* ポジショニングの基準点 */
  position: relative;
  /* テキスト自体は最初から表示しておく（シェイプで隠すため） */
  color: currentColor; 
  z-index: 1; /* テキストをシェイプの上に持ってくる */
}

/* 共通のシェイプ (疑似要素) スタイル */
.swipe-in-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /* width/height/margin-top/background-color は固有クラスで上書きされる */
  
  z-index: 2; /* シェイプをテキストの上に持ってくる */
  
  /* スクロールアニメーションと同期させる */
  transition: transform 1.5s ease-out;
  
  /* 初期位置: 左端からテキスト全体を覆う (非表示状態) */
  transform: translateX(0); 
}

/* 共通の表示状態: is-visible が付与されたらシェイプを左から右へ動かす */
.swipe-in-text.is-visible::before {
  /* シェイプを右端に完全に移動させ、テキストを露出させる */
  transform: translateX(100%);
}

/* ========================================= */
/* 4. スワイプインアニメーションの固有スタイル */
/* ========================================= */

.swipe-in-news::before {
  /* 固有のサイズ */
  width: 194px;
  height: 70px;
  margin-top: 15px;
  /* 固有の色 */
  background-color: #FF94C9; 
}

.swipe-in-news {
    color: #ffffff; /* 固有のテキスト色 */
}

.swipe-in-about::before {
  /* 固有のサイズ */
  width: 233px;
  height: 70px;
  margin-top: 15px;
  /* 固有の色 */
  background-color: #57C7EC; 
}

.swipe-in-about {
    color: #FF94C9; /* 固有のテキスト色 */
}

.swipe-in-project::before {
  /* 固有のサイズ */
  width: 240px;
  height: 70px;
  margin-top: 15px;
  /* 固有の色 */
  background-color: #57C7EC; 
}

.swipe-in-project {
    color: #ffffff; /* 固有のテキスト色 */
}

.swipe-in-works::before {
  /* 固有のサイズ */
  width: 208px;
  height: 70px;
  margin-top: 15px;
  /* 固有の色 */
  background-color: #FF94C9; 
}

.swipe-in-works {
    color: #ffffff; /* 固有のテキスト色 */
}

.swipe-in-staff::before {
  /* 固有のサイズ */
  width: 208px;
  height: 70px;
  margin-top: 15px;
  /* 固有の色 */
  background-color: #57C7EC; 
}

.swipe-in-staff {
    color: #FF94C9; /* 固有のテキスト色 */
}

.swipe-in-blog::before {
  /* 固有のサイズ */
  width: 182px;
  height: 70px;
  margin-top: 15px;
  /* 固有の色 */
  background-color: #57C7EC; 
}

.swipe-in-blog {
    color: #ffffff; /* 固有のテキスト色 */
}
/* =====================================
   グリッチエフェクトのスタイル
   ===================================== */
.glitch {
  position: relative;
}
.glitch img {
  position: relative;
  z-index: 1;
  display: block;
}
.glitch__layers {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: -40px;
}
.glitch__layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(http://vs-create.local/wp-content/uploads/2025/12/logo.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 80%;
  
}
.glitch__layer:nth-child(1) {
  transform: translateX(-5%);
  animation: glitch-anim-1 2s infinite linear alternate;
}
.glitch__layer:nth-child(2) {
  transform: translateX(3%) translateY(3%);
  animation: glitch-anim-2 2.3s -.8s infinite linear alternate;
}
.glitch__layer:nth-child(3) {
  transform: translateX(5%);
  animation: glitch-anim-flash 1s infinite linear;
}
@keyframes glitch-anim-1 {
  0% {
    clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
  }
  10% {
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  20% {
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  30% {
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  40% {
    clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
  }
  50% {
    clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
  }
  60% {
    clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
  }
  70% {
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  80% {
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  90% {
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  100% {
    clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
  }
}
@keyframes glitch-anim-2 {
  0% {
    clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
  }
  15% {
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  25% {
    clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
  }
  30% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  45% {
    clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
  }
  50% {
    clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
  }
  65% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  75% {
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  80% {
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
  }
  95% {
    clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
  }
  100% {
    clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
  }
}
@keyframes glitch-anim-flash {
  0% {
    opacity: .2;
  }
  30%, 100% {
    opacity: 0;
  }
}

/* =====================================
   グリッチテキストのスタイル
   ===================================== */
#text-container {
  /* 幅を小さくする（例: 70vw から 50vw に変更） */
  width: 100%;
  margin-bottom: 20px;
  margin-top: 20px;
}

.text-glitch {
  text-align: left;
  color: #000000;
  font-size: 30px;
  letter-spacing: 2px;
  font-family: 'Press Start 2P';
  font-weight: 500;
  /*Create overlap*/
  margin: 0;
  line-height: 0;
  /*Animation*/
  
  animation: glitch1 2.5s infinite;
}

.text-glitch:nth-child(2) {
  color: #57C7EC;
  animation: glitch2 2.5s infinite;
}

.text-glitch:nth-child(3) {
  color: #FF94C9;
  animation: glitch3 2.5s infinite;
}
/*Keyframes*/

@keyframes glitch1 {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: skew(0.8deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes glitch2 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(-2px, -3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(-5px, -2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(-5px, -1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(-2px, -6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}

@keyframes glitch3 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(2px, 3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(5px, 2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(5px, 1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(2px, 6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}

/* =====================================
   アウトラインアニメーションのスタイル
   ===================================== */
.outline {
  outline-width: 1px;
  outline-offset: 0;
  outline-color: #57C7EC;
  outline-style: solid;
  animation: animateOutline 4s ease infinite;
}

@keyframes animateOutline {
  0% {
    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(0, 130, 206, 0);
  }

  10% {
    outline-color: rgba(0, 130, 206, 0.75);
  }

  /* The animation finishes at 50% */
  50% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(0, 130, 206, 0);
  }

  100% {
    outline-width: 7px;
    outline-offset: 4px;
    outline-color: rgba(102, 102, 102, 0);
  }
}
/* =====================================
   フッターセクションのスタイル
   ===================================== */
/* footer */
.site-footer {
    /* 共通クラス display-flex で縦方向に配置 */
    /* 背景色を少し落ち着いた色に設定（例：淡いブルー、または濃いグレー） */
    background-color: #ffffff; /* 既存のセクションと被らない淡い色 */
    padding: 0px 40px 0 40px; /* 上下の余白 */
    
    /* フッター全体のコンテンツを中央寄せにする */
    justify-content: center;
    align-items: center;
    margin-top: -5px;
}

/* サイト情報コンテナ (サイトの最大幅に合わせる) */
.site-info {
    justify-content: space-between; /* ナビとコピーライトを両端に配置 */
    align-items: center; /* 垂直方向の中央揃え */
    max-width: 1200px; /* 最大幅を設定 */
    width: 100%;
    
    /* スマートフォンでの縦並びを考慮し、flex-wrapを有効にする */
    flex-wrap: wrap; 
}

/* フッターナビゲーションのコンテナ */
.footer-navigation {
    /* 共通クラス display-flex-df でメニューリンクを横並びに */
    /* ナビゲーションを左寄せ、コピーライトを右寄せとするための調整 */
    order: 1; /* PC表示では最初に表示 */
    margin-right: 20px;
}

/* フッターメニューの ul 要素 */
.footer-menu-list {
    display: flex; /* リストアイテムを横並びに */
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px; /* リンク間のスペース */
    flex-wrap: wrap; /* 狭い画面で改行させる */
}

/* フッターメニューの li 要素 */
.footer-menu-list li {
    font-size: 14px;
}

/* フッターメニューの a 要素 */
.footer-menu-list a {
    color: #34bce9; /* PROJECTセクションの青に合わせて設定 */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.footer-menu-list a:hover {
    color: #ff94c9; /* ABOUTセクションのピンクに合わせてホバー色を設定 */
}

/* コピーライトテキスト */
.copyright-text {
    font-size: 14px;
    color: #666;
    order: 2; /* PC表示では最後に表示 */
    margin-top: 120px;
    text-align: center;
}

/* =====================================
   single.php 
/* =====================================
/* ========================================= */
/* 2. single.php (記事詳細ページ) 用のスタイル */
/* ========================================= */

/* 記事本文の最大幅と中央寄せを制御するコンテナ */

.single-section {
    padding: 180px 5% 200px 5%;
    background-color: #57C7EC; /* 背景色を白に設定 */
}

.single-article-wrapper {
    margin-left: auto;
    margin-right: auto;
    padding: 60px; /* 左右の余白（スマホ対応） */
    background-color: #ffffff;
    border-radius: 20px;
}
.article-content-wrapper {
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    padding: 0 20px; /* 左右の余白（スマホ対応） */
}

/* 記事ヘッダーのスタイル調整 */
.single-post-content .article-header {
}

/* タイトル */
.single-post-content .entry-title {
    font-size: 2.2em; /* タイトルを大きく */
    margin-top: 15px;
    margin-bottom: 40px;
    line-height: 1.4;
    font-weight: 700;
}

/* メタ情報 (カテゴリと日付) のコンテナ */
.post-meta-top {
    font-size: 0.9em;
    padding-bottom: 10px;
    color: #666;
    margin-bottom: 0;
    border-bottom: #57C7EC 4px solid;
}

/* 【新規CSSクラス】カテゴリのハイライト */
.category-highlight a {
    /* 既存の .check-button2 の色 (#34bce9) を利用 */
    background-color: #34bce9; 
    color: white;
    padding: 5px 30px;
    border-radius: 10px; /* 角丸を大きく */
    margin-right: 15px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: opacity 0.2s;
    font-size: 30px;
}

.category-highlight a:hover {
    opacity: 0.8;
}

/* 投稿日テキスト */
.date-text {
    font-size: 24px;
    color: #333333;
}

/* アイキャッチ画像 */
.article-thumbnail {
    margin-bottom: 50px;
}

.article-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* 記事本文の調整 */
.article-content-wrapper .entry-content p {
    line-height: 1.8;
    margin-bottom: 1.5em;
    font-size: 1.05em;
}

/* 投稿ナビゲーション (前後記事リンク) の調整 */
.navigation.post-navigation {
    margin: 60px auto 40px;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    width: 40%; /* 左右に並べる */
    text-align: left;
}

.nav-previous {
    border-radius: 10px;
}

.nav-next {
    border-radius: 10px;
}

.post-nav-title-wrapper {
    display: flex;
    background-color: #57C7EC;
    border-radius: 0 0 10px 10px;
    width: 100%;   
    flex-flow: column;
    gap: 10px;
    border-top: 4px solid #ffffff;
}

.post-navigation a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: #ffffff;
    transition: color 0.2s;
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 16px;
    color: #ffffff;
    font-weight: 400;
}

.post-navigation .nav-title {
    display: block;
    font-weight: 500;
    font-size: 20px;
}

.page-title-single {
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
}

.single-section h1 {
    margin-top: 80px;
    margin-bottom: 40px;
    text-align: left;
    color: #333;
    font-size: 0.9em;
    letter-spacing: 2px;
}
.single-section h2 {
    background-color: #57C7EC;
    width: 100%;
    text-align: left;
    color: #fff;
    font-size: 30px;
    padding: 5px 10px;
    margin-top: 60px;
}

.single-section h3 {	
border-left: 6px solid #FF94C9;	
padding: 5px 0 0px 10px;	
margin: 60px 0 10px 0;
font-size: 24px;
}

.single-section h4 {	
padding: 5px 0 0px 0px;	
margin: 30px 0 10px 0;
font-size: 18px;
border-bottom: 3px solid #57C7EC;
}
.single-section p {
    letter-spacing: 1px;
    font-size: 16px;
    font-weight: 500;
}



.single-section li {
    list-style: disc;
    margin: 20px 0 20px 0;
}
.single-section ol {
    margin: 40px 0;
}
.single-section ul {
    margin: 40px 0;
}

.page-title-single {
    font-size: 72px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
}
.single-title-p {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    padding: 5px 0 5px 10px;
    margin-top: -20px;
    margin-bottom: 40px;
}

.single-title-2 {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    margin-top: -20px;
    margin-bottom: 40px;
    display: inline-block;
}

/* ナビゲーションリンク全体を縦並びにする */
.custom-post-navigation a {
    display: flex;
    flex-direction: column; /* 要素を縦に並べる */
    /* その他の装飾CSS */
    margin: 10px 10px;
}

/* アイキャッチとタイトルのラッパー（ここでは特に指定不要な場合も多いですが、調整用に） */
.post-nav-thumb-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* 親要素の幅を使う */
}

/* 記事タイトルは画像の下に表示されます */
.post-nav-thumb-title-wrapper .nav-title {
    margin-top: 0px; /* 画像とタイトルの間にスペース */
    font-size: 18px;
    /* その他の装飾CSS */
}

/* アイキャッチ画像 */
.post-nav-thumbnail,
.post-nav-no-thumbnail {
    width: 100%; /* サイズ調整 */
    height: auto; /* サイズ調整 */
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

.post-nav-thumbnail img { /* imgタグそのものに適用 */
    width: 100%;
    height: 100%;
    border-radius: 10px;
    
    /* ★ アスペクト比を維持し、コンテナ全体を覆い、はみ出た部分をトリミング */
    object-fit: cover;
    
    /* 画像が途中で途切れるのを防ぐための補足 */
    display: block;
}

/*archive-sectionの調整*/
.archive-section {
    padding: 180px 5% 200px 5%;
    background-color: #57C7EC; /* 背景色を白に設定 */
}
.archive-cards {
    gap: 45px;
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
}

.pickup-cards {
  gap: 45px;
}

.card-label-pickup {
    background-color: #ff69b4; /* 画像のピンク色を再現 */
    width: 30%;
    color: white;
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 14px;
    z-index: 5;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.menu-open {
    overflow: hidden;
}

/* ハンバーガーボタンのコンテナ */
.menu-toggle {
    display: none; /* デフォルトは非表示 */
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    z-index: 1000; /* メニューの上に表示 */
    width: 30px;
    height: 30px;
    position: relative;
    /* 必要であれば、header-widget-areaなどで配置を調整 */
}

/* 線のスタイル */
.menu-toggle-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333; /* 線の色 */
    position: absolute;
    left: 0;
    transition: transform 0.3s ease, opacity 0.3s ease; /* アニメーション設定 */
}

.line-top {
    top: 0;
}

.line-middle {
    top: 50%;
    transform: translateY(-50%);
}

.line-bottom {
    bottom: 0;
}

/* メニューが開いたとき (is-openクラスが付与されたとき) のアニメーション */
.menu-toggle.is-open .line-top {
    transform: translateY(13.5px) rotate(45deg); /* 真ん中の位置まで移動して45度回転 */
    background-color: #ffffff; /* 線の色 */
}

.menu-toggle.is-open .line-middle {
    opacity: 0; /* 真ん中の線は非表示 */
}

.menu-toggle.is-open .line-bottom {
    transform: translateY(-13.5px) rotate(-45deg); /* 真ん中の位置まで移動して-45度回転 */
    background-color: #ffffff; /* 線の色 */
}


/* --- モバイルメニュー本体のスタイル --- */

.menu-group {
    /* デフォルトのPC表示スタイルを維持しつつ、モバイルで調整 */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* メニュー本体のフェードアニメーション */
}

/* モバイルメニューを非表示にする初期状態 */
.nav {
    /* PC表示を維持 */
}

/* モバイルビューに切り替えるメディアクエリ (例: 768px以下) */
@media (max-width: 768px) {
    /* ハンバーガーボタンをスマホでのみ表示 */
    .menu-toggle.sp-view {
        display: block;
        margin-left: 80px; /* 左側の余白を追加 */
    }

    /* PC用のメニューは非表示にする */
    .header-widget-area {
        display: block; /* デフォルトのflexを解除 */
    }

    .nav {
        /* モバイルメニューのコンテナ設定 */
        position: fixed;
        top: 0; /* ヘッダーの高さに合わせて調整が必要な場合あり */
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.9); /* オーバーレイ背景色 */
        z-index: 999;
        
        /* 初期状態：非表示 */
        opacity: 0;
        visibility: hidden;
        
        /* 開閉アニメーション */
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    /* メニューが開いた状態 */
    .nav.is-open {
        opacity: 1;
        visibility: visible;
    }
    
    /* メニューリストの配置 */
    .menu-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding-top: 20px; /* 必要に応じて調整 */
    }
    
    .menu-item {
        margin: 15px 0;
    }

    .menu-item a {
        color: #fff; /* メニュー項目の文字色 */
        font-size: 1.5rem;
        text-decoration: none;
    }
}
    
    

/* ========================================= */
/* @media (max-width: 768px) - タブレット/スマホ */
/* ========================================= */
@media (max-width: 768px) {
    
    /* タイトルをスマホに合わせて調整 */
    .single-post-content .entry-title {
        font-size: 1.6em;
    }
    
    /* 記事本文の左右の余白を調整 */
    .article-content-wrapper {
        padding: 0 0px;
    }
    
    /* ナビゲーションを縦並びにする */
    .post-navigation .nav-links {
        flex-direction: column;
    }
    
    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        width: 100%;
        margin-bottom: 10px;
    }

    .single-section h1 {
    margin-top: 80px;
    margin-bottom: 40px;
    text-align: left;
    color: #333;
    font-size: 0.9em;
    letter-spacing: 2px;
}
.single-section h2 {
    background-color: #57C7EC;
    text-align: left;
    color: #fff;
    font-size: 24px;
    width: 94%;
    padding: 5px 10px;
    margin-top: 60px;
}

.single-section h3 {	
border-left: 6px solid #FF94C9;	
padding: 5px 0 0px 10px;	
margin: 60px 0 10px 0;
font-size: 20px;
}

.single-section h4 {	
padding: 5px 0 0px 0px;	
margin: 30px 0 10px 0;
font-size: 18px;
border-bottom: 3px solid #57C7EC;
}
}

/* =====================================
   レスポンシブデザイン
   ===================================== */
@media (max-width: 768px) {
    /* タブレット・スマートフォンでのレイアウト */
    .pc-view {
        display: none;
    }

    .sp-view {
    display: block;
    }

    .margin-left-5 {
        margin-left: 5%;
    }
    
    .section-sp {
       margin-top: -10px;
    }
    /* NEWS (h2) のフォントサイズを調整 */
    .swipe-text {
        font-size: 45px;
        margin-top: 0;
    }

    /* ニュースリストのコンテナ (.news-list) の調整 */
    .news-list {
        display: flex;
        flex-wrap: wrap; /* 2列にするために折り返しを有効化 (追加) */
        gap: 20px; /* カード間のスペースを20pxに設定 (修正: 既存の10pxから変更) */
        margin: 0 auto;
        width: 100%;
        margin-bottom: 40px;
        justify-content: center; /* カードを中央寄せにする (追加) */
    }

    .works-gallery {
        display: flex;
        flex-wrap: wrap; /* 2列にするために折り返しを有効化 (追加) */
        gap: 20px; /* カード間のスペースを20pxに設定 (修正: 既存の10pxから変更) */
        margin: 0 auto;
        width: 100%;
        margin-bottom: 40px;
        justify-content: center; /* カードを中央寄せにする (追加) */
        padding: 0;
    }
    
    
    /* ニュースカード (.news-card) を2列表示にする */
    .news-card {
        width: 45%; /* 2列表示のために幅を50%に設定 (修正) */
        min-width: 150px; /* (追加) */
        max-width: 255px; /* (追加) */
        height: auto;
    }

    .news-card {
    /* flex: 5枚表示 + 間のギャップを考慮して幅を計算 */  
    background-color: white;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex; /* 内部コンテンツをFlexで制御 */
    flex-direction: column;
    text-align: left;
    position: relative;
    box-sizing: border-box;
}


.works-card {
        width: 48%; /* 2列表示のために幅を50%に設定 (修正) */
        min-width: 155px; /* (追加) */
        max-width: 255px; /* (追加) */
        height: auto;
    }

    .works-card {
    /* flex: 5枚表示 + 間のギャップを考慮して幅を計算 */  
    background-color: white;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex; /* 内部コンテンツをFlexで制御 */
    flex-direction: column;
    text-align: left;
    position: relative;
    box-sizing: border-box;
}

    .card-title {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    height: auto; /* 2行で省略する例 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
    color: #333;
    margin: 5px 0;
}
  .card-label {
    background-color: #ff69b4; /* 画像のピンク色を再現 */
    width: 85%;
    color: white;
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 14px;
    z-index: 5;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.card-label2 {
    background-color: #34bce9; /* 画像のピンク色を再現 */
    width: 85%;
    color: white;
    padding: 2px 10px;
    border-radius: 15px;
    font-size: 14px;
    z-index: 5;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.check-button {
    background-color: #ff69b4; 
    color: white;
    text-decoration: none;
    padding: 8px 0;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    margin-top: auto; /* 下部に寄せる */
    transition: background-color 0.2s;
    font-size: 12px;
}

.check-button2 {
    background-color: #34bce9;
    color: white;
    text-decoration: none;
    padding: 8px 0;
    border-radius: 20px;
    text-align: center;
    font-weight: bold;
    margin-top: auto; /* 下部に寄せる */
    transition: background-color 0.2s;
    font-size: 12px;
}

.marquee-content2 .text_news,
.marquee-content2 .text_news2 {
    display: inline-block; /* 画像を横に並べる */
    /* 画像の幅は適切に設定してください。必要であれば高さも設定します。 */
    /* 例: width: 300px; height: auto; */
    /* ここではご提示のクラスをそのまま使用 */
    width: 1500px; 
    height: auto;
}

.news-title-p {
    margin-bottom: 20px;
}

.about-section-div {
    display: flex; 
    flex-flow: column;
}

.about-section-div-div {
    width: 100%;
}

.logo_img {
    width: 100%;
    margin-left: 0px;
    position: relative;
}
.glitch__layers {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: 0px;
}

.view-all-button {
    margin-right: 5%;
}

.about-text {
    font-size: 18px;
    line-height: 1.6;
    color: #333333;
    text-align: center;
}

.about-description {
    font-size: 14px;
    font-weight: 500;
    line-height: 2.3;
    color: #333;
    margin: 0 auto;
    letter-spacing: 1px;
    margin-top: 20px;
}
.display-flex-df {
    display: flex;
    flex-wrap: wrap;
}

.about2-div {
    width: 49%;
}

.about2-divs {
    gap: 5px;
    margin-top: 30px;
    padding: 5px;
    background-color: #99e2f9;
    border-radius: 10px;
}

.slide {
  width: calc(100vw / 1.5); /* 7はスライドの枚数 */
  border-radius: 20px;
  list-style: none;
}

.slider-wrapper {
  margin-top: 30px;
  margin-bottom: 110px;
  display: flex; /* スライドのグループを横並び */
  overflow: hidden; /* はみ出たスライドを隠す */
}

.slider {
  gap : 20px;
  margin-left: 20px;
}

.Project-section-div {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 60px;
}

.Project-description-img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 10px;
}

.member-display-container {
    background-color: #bdf0ff;
    border-radius: 1.5rem;
    margin-top: 30px;
    padding: 30px 10px 30px 10px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.layout-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction:column-reverse
}

.member-name {
    font-size: 24px; /* text-2xl */
    font-weight: 600; /* font-black */
    color: var(--dark-text-color);
    padding-bottom: 0.5rem; /* pb-2 */
}

/* 詳細情報コンテナ (.space-y-4 .text-gray-700) */
.details-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-color);
    margin-bottom: 20px;
}

/* 詳細情報項目 (p.text-lg) */
.detail-item {
    font-size: 14px; /* text-lg */
    margin: 5px 0;
}
.detail-label {
    font-weight: 600; /* font-bold */
    color: var(--main-purple);
    display: inline-block;
    margin-right: 5px;
}
.name-container {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    margin-top: 20px;
}

.header-css {
  display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px; /* ★ヘッダーの実際の高さに合わせて調整してください */
    padding: 10px 40px;
    
}

.header-css-z {
  z-index: 2000;
}

.video-background-wrapper {
    position: relative; /* 子要素の絶対配置の基準点とする */
    width: 100%;
    /* 動画を表示させたい高さに合わせて設定 */
    height: 280px; /* 例: 高さ600pxに設定 */ 
    overflow: hidden; /* 動画がはみ出す部分を隠す */
}

/* 動画要素自体 */
#video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 動画を画面いっぱいに広げつつ、縦横比を維持して中央に配置するテクニック */
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: 300px;
    z-index: -100; /* 他のコンテンツより奥に配置 */
    transform: translate(-50%, -50%); /* 中央寄せ */
}

/* 動画の上に重ねるコンテンツ */
.video-content-overlay {
    position: relative;
    z-index: 1; /* 動画より手前に表示 */
    width: 100%;
    height: 100%;
    /* コンテンツの配置やスタイリングをここで行う */
    color: #ffffff; 
    text-align: center;
}

.carousel-container {
    width: 100%; /* カルーセルの表示幅を固定（ここが重要） */
    height: 100%;
    margin: 10px auto;
    position: relative; /* ボタンの絶対配置の基準点にする */
    box-sizing: border-box;
}

/* ====================================
   「一部見せ」デザインのための設定
   ==================================== */
.carousel-wrapper {
    /* **ここが最重要**：指定幅を超えたコンテンツを非表示にする */
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin-top: -20px;
}

.carousel-track {
    display: flex; /* スライドを横一列に並べる */
    transition: transform 0.3s ease-in-out; /* スムーズな移動アニメーション */
    width: 100%;
    height: 100%;
    margin-left: 10%;
    
}

.carousel-slide {
    /* スライドの幅を container の幅よりも少し小さくする（例：80%）
       残りの20%が左右の隣接要素に見えるスペースになる */
    flex: 0 0 75%; /* 幅を80%に固定し、伸縮しないようにする */
    margin: 0 2%; /* 左右にマージンを持たせて、隣の要素を中央に配置する */

    /* コンテンツのスタイル */
    height: 100%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-sizing: border-box;
}

/* ====================================
   左下ボタンの設定
   ==================================== */
.carousel-controls {
    position: absolute;
    bottom: 22px; /* 下端からの距離 */
    left: 10px;   /* 左端からの距離 */
    z-index: 10;
}

.carousel-controls button {
    color: white;
    border: none;
    padding: 8px 11px;
    margin-right: 10px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 50%;
    opacity: 1;
}

.prev-button {
    margin-right: 20px;
    background-color: #EC57E3;
}

.next-button {
    background-color: #57C7EC;
}

.carousel-controls button:hover {
    opacity: 1;
}

.slide-iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: relative;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* iframeより前面に来るように設定 */
    cursor: default; /* マウスカーソルをデフォルトに戻す（動画クリック可能に見せないため） */
    /* 背景色を透明にする */
    background-color: transparent; 
}

/* 親要素（ラッパー）: 縦横比を定義 */
.aspect-ratio-box {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden; /* コンテンツがはみ出すのを防ぐ */
    border-radius: 10px; /* 角を丸くする */

    /* アスペクト比 1980x1080 (11:6) の計算:
       高さ / 幅 * 100 = 1080 / 1980 * 100 ≈ 54.545%
    */
    padding-top: 54.545%; /* ★この値がアスペクト比を決定する */
    margin: 0 auto; /* 中央寄せ */
}

/* 子要素 (iframe) : 親要素にぴったり合わせる */
.aspect-ratio-box iframe,
.aspect-ratio-box .slide-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px; /* 角を丸くする */
    

    object-fit: cover; /* コンテンツボックスを埋めるように拡大し、はみ出し部分はトリミング */
    transform: scale(1.05); /* 縦横方向に5%拡大。アスペクト比のずれに合わせて調整 */
    
    /* スムーズなアニメーション（オプション） */
    transition: transform 0.3s ease-out;

    filter: brightness(0.95) contrast(1.1) ; 
    /* brightness(0.95) でわずかに暗くし、contrast(1.1) でコントラストを強めて、 
       低画質による「ぼやけた感じ」を軽減させます。 */
}

.aspect-ratio-box img,
.aspect-ratio-box .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover; /* コンテンツボックスを埋めるように拡大し、はみ出し部分はトリミング */
    transform: scale(1.05); /* 縦横方向に5%拡大。アスペクト比のずれに合わせて調整 */
    
    /* スムーズなアニメーション（オプション） */
    transition: transform 0.3s ease-out;
}

.dot_img {
    margin-top: -40px;
}

.dot_img2 {
    margin-top: -70px;
}

.dot_img3 {
    margin-top: -70px;
}

.pickup-cards {
  gap: 20px;
  display: flex;
  flex-wrap: wrap;
}

.card-label-pickup {
    width: 50%;
}

.archive-cards {
    gap: 20px;
}

.single-article-wrapper {
    margin-left: auto;
    margin-right: auto;
    padding: 10px; /* 左右の余白（スマホ対応） */
    background-color: #ffffff;
    border-radius: 20px;
}
.article-content-wrapper .entry-content p {
    line-height: 1.8;
    margin-bottom: 1.5em;
    font-size: 16px;
}
}

@media (max-width: 480px) {

    .news-list {
        gap: 10px; /* カード間のスペースをさらに小さく */
    }

    .works-gallery {
        gap: 10px; /* カード間のスペースをさらに小さく */
    }

    .fixed-banner-image {
    /* 画面内で位置を固定する */
    position: fixed;
    
    /* 画面の右下から0pxの位置に配置 */
    bottom: 0;
    right: 0;
    
    /* 他のコンテンツより手前に配置（必要に応じて調整） */
    z-index: 1000; 

    /* バナーのサイズを設定（例：幅150px、高さ auto） */
    width: 180px; 
    height: auto;
    
    /* マージンで画面端からの余白を設定（例：上下左右に20px） */
    margin: 10px;
  } 
  .banner-object-image {
    position: absolute;
    bottom: 15px; /* バナー画像の下に少しはみ出すように配置 */
    right: 5px;  /* バナー画像の右に少しはみ出すように配置 */
    width: 50px;   /* オブジェクト画像の幅を調整 */
    height: auto;
}

.pickup-cards {
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
}

.archive-cards {
    gap: 10px;
}

}