/* --- 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);
}

/* リスト全体を中央に寄せる */
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);
}

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; /* 文字が途中で改行されないように守る */
}