/* --- Tensho Serene Life: Modern Minimal Style --- */

:root {
  --primary-purple: #460e44; /* 紫紺 */
  --deep-purple: #1a0033;    /* 竜胆紫 */
  --bg-color: #ffffff;
  --text-color: #333333;
}

body {
  font-family: 'Hiragino Mincho ProN', 'serif'; /* 水墨画に合う明朝体 */
  line-height: 1.8;
  color: var(--text-color);
  background-color: var(--bg-color);
  margin: 0;
  padding: 0;
}

#page {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* 各セクションを自動で離す設定 */
h1, h2, h3, p, img {
  margin-bottom: 4rem; /* これで<br>がなくても自動で余白が空きます */
  text-align: center;
}

h1 {
  font-size: 2.5rem;
  color: var(--primary-purple);
  letter-spacing: 0.2em;
}

h3 {
  font-weight: normal;
  font-size: 1.2rem;
  line-height: 2.5;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* 写真を優しく浮き上がらせる */
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.floating-text { 
  /* 初期状態 */ 
  opacity: 0.7; /* 少し透かして、ふわっと感じさせる */ 
  transform: translateY(0); 
  transition: all 0.4s ease-out; /* 0.4秒で滑らかに */ 
  cursor: pointer; 
  display: inline-block; /* transform を効かせるため */ 
} 

.floating-text:hover { 
  /* ホバー状態 */ 
  opacity: 1; /* 完全に浮かび上がる */ 
  transform: translateY(-5px); /* 少し上に浮く */ 
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* 影をつけて奥行きを出す */ } 

/* リスト全体を中央に寄せる */
nav ul {
  list-style: none;
  padding: 0;
  text-align: center; /* これが重要です！ */
}

/* ボタン自体の設定 */
nav li {
  margin-bottom: 15px; /* ボタン同士の上下の隙間 */
}

nav li a {
  display: inline-block;
  background-color: var(--primary-purple);
  color: white !important; /* 文字色を確実に白にする */
  text-decoration: none;
  padding: 15px 40px;
  border-radius: 2px;
  transition: 0.3s;
  min-width: 250px; /* ボタンの幅を揃えるときれいです */
}

nav li a:hover {
  text-align: center;
  background-color: var(--deep-purple);
  transform: translateY(-2px);
}

.post-navigation {
    display: flex;
    justify-content: space-between; /* 左右の端に配置し、真ん中を空ける魔法 */
    align-items: center;
    margin-top: 60px; /* 記事本文との距離をしっかり取る */
    padding-top: 30px;
    border-top: 1px solid #eee; /* 上に細い線を入れて境界をはっきりさせる */
}

.post-navigation a {
    text-decoration: none;
    color: #888;
    font-size: 0.9em;
    transition: color 0.3s; /* マウスを乗せた時にふわっと色を変える */
}

.post-navigation a:hover {
    color: #333; /* 触れた時に少し濃くする */
}
footer {
  text-align: center;  /* 文字を中央に寄せます */
  padding: 60px 0;     /* 上下にゆとりを持たせます */
  border-top: 1px solid #eee; /* 控えめな線を引くと、終わりがハッキリして綺麗です */
  color: #888;         /* 少し薄めの色にすると「Serene」な印象になります */
  font-size: 0.8rem;   /* 少し小さめに */
}

footer address {
  font-style: normal;  /* 斜体を解除して、端正な印象に */
}

/* --- Video おもてなし Style (修正版) --- */
.video-container {    
position: relative;    
width: 100%;    
max-width: 640px;      /* 横幅の最大値 */    
margin: 40px auto;    /* ↓ここが重要です！16:9の比率で高さを自動計算します */   
aspect-ratio: 16 / 9;     
border-radius: 8px;    
overflow: hidden;    
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.video-container iframe {    
position: absolute;    /* 容器いっぱいに広げるための指定 */    
top: 0;    
left: 0;    
width: 100%;    
height: 100%;    
border: none;
  }
.video-label {
    position: absolute;
    bottom: 20px;       /* 下からの距離を少し広げて、ゆとりを */
    left: 50%;          /* まず左端を真ん中（50%）に持ってくる */
    transform: translateX(-50%); /* 自分の幅の半分だけ左に戻して、完璧な中央に */
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-main);
    padding: 6px 16px;  /* 少し余白を広げて、呼吸しやすく */
    font-size: 0.8rem;
    border-radius: 20px; /* 角を丸くすると、より親しみやすい印象に */
    white-space: nowrap; /* 文字が途中で改行されないように守る */
}
/* Lookbook用の横スクロール魔法（Scroll Snap） */
        .lookbook-container {
            margin: 40px 0;
        }
        .collection-title {
            font-size: 1.2em;
            color: #555;
            margin-bottom: 15px;
            text-align: center;
            letter-spacing: 0.1em;
        }
        .horizontal-slider {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 15px;
            padding-bottom: 20px; /* スクロールバー用の余白 */
            /* スクロールバーを隠してより洗練された見た目に（好みに応じて） */
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .horizontal-slider::-webkit-scrollbar {
            display: none;
        }
        .slide-item {
            flex: 0 0 85%; /* 画面幅の85%にして、次の画像がチラッと見えるようにします */
            scroll-snap-align: center;
        }
        .slide-item img {
            width: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            display: block;
        }
        .item-caption {
            text-align: center;
            font-size: 0.85em;
            color: #777;
            margin-top: 10px;
        }
/* スワイプ・スクロールを促す上品なナビゲーション */
        .scroll-hint {
            text-align: center;
            font-size: 0.8em;
            color: #888;
            letter-spacing: 2px;
            margin-bottom: 20px;
            animation: bounceRight 2s infinite; /* 矢印をフワフワ動かす魔法 */
        }
        @keyframes bounceRight {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(5px); }
        }
        /* PCでマウス操作しやすくするため、スクロールバーを上品に表示（上書き） */
        .horizontal-slider {
            -ms-overflow-style: auto;
            scrollbar-width: thin;
            scrollbar-color: #ddd transparent;
        }
        .horizontal-slider::-webkit-scrollbar {
            display: block;
            height: 6px;
        }
        .horizontal-slider::-webkit-scrollbar-thumb {
            background-color: #ddd;
            border-radius: 10px;
        }
/* ロゴ画像だけ影を解除する設定 */
.logo-image {
  box-shadow: none; /* 影を「なし」にする魔法 */
}