body{background:#000;color:#fff;font-family:serif;margin:0}
.container{max-width:760px;margin:60px auto;padding:20px}
h1{font-size:28px;margin:20px 0}
.meta{color:#caa24a;font-size:13px}
.content p{line-height:1.9;margin:16px 0}
.cta{margin-top:40px;border-top:1px solid #333;padding-top:20px}
a{color:#d6b25e}

.journal-grid{
  display:grid;
  gap:24px;
}

.journal-card{
  border:1px solid rgba(214,178,94,.25);
  padding:20px;
  transition:.3s;
  background:rgba(255,255,255,.02);
}

.journal-card:hover{
  border-color:#d6b25e;
  transform:translateY(-3px);
}

.journal-card a{
  text-decoration:none;
  color:#fff;
}

.journal-card h2{
  font-size:18px;
  margin:0 0 10px;
}

.journal-card .date{
  font-size:12px;
  color:#d6b25e;
}

.lang-nav{
  text-align:right;
  margin-bottom:20px;
}

.lang-switch{
  font-size:14px;
  color:#d6b25e;
  text-decoration:none;
}

.lang-switch:hover{
  opacity:.7;
}

.journal-article {
  background: #000;
  color: #fff;
  font-family: serif;
}

.journal-article h1 {
  font-size: 28px;
  margin-bottom: 30px;
}

.journal-article h2 {
  color: #d6b25e;
  margin-top: 40px;
}

.journal-article h3 {
  color: #d6b25e;
  margin-top: 30px;
}

.journal-article p {
  line-height: 1.9;
  margin-bottom: 1.2em;
  font-size: 16px;
}

.related-links {
  margin-top: 40px;
  padding: 20px;
  background: #111;
  border: 1px solid #333;
}

.related-links a {
  color: #d6b25e;
  text-decoration: none;
}

.related-links a:hover {
  text-decoration: underline;
}
.index-title {
  color: #c9a646;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: 0.3s ease;
}

.index-title:hover {
  border-bottom: 1px solid #c9a646;
}

.journal-index ul {
  padding-left: 20px;   /* ●を残す */
}

.index-item {
  display: flex;
  align-items: baseline;
  width: 100%;          /* ← これ重要 */
}

.index-date {
  margin-left: auto;    /* ← 右端送り */
  white-space: nowrap;
  color: #aaa;
  font-size: 0.9em;
}
/* ==============================
   PILLAR LINKS
============================== */

.journal-pillar-links{
  margin:40px 0;
  padding:20px;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  text-align:center;
}

.journal-pillar-links a{

  display:inline-block;
  margin:6px 8px;
  padding:10px 16px;

  color:#c9a646;
  text-decoration:none;

  border:1px solid #c9a646;
  border-radius:4px;

  font-size:14px;
  transition:all .25s ease;
}

.journal-pillar-links a:hover{

  background:#c9a646;
  color:#000;

}
.journal-article .related-posts {
  list-style: none;
  padding: 0;
  margin: 32px 0 48px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.journal-article .related-posts li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* 他のaタグに影響させない */
.journal-article .related-posts a {
  display: inline;
  font-size: 15px;
  line-height: 1.8;
  color: #d6b25e; /* 既存カラーに合わせる */
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: all .25s ease;
}

/* hover */
.journal-article .related-posts a:hover {
  color: #fff;
  border-bottom: 1px solid #d6b25e;
}

/* スマホ */
@media (max-width:768px){
  .journal-article .related-posts a{
    font-size:14px;
  }
}
.journal-card{
  text-decoration: none;
  color: #fff;
  display:block; /* ← 重要（カード全体クリック） */
}

.journal-card:hover{
  text-decoration: none;
}
/* ==============================
   RELATED CTA（クリック誘導強化）
============================== */

.related-cta{
  list-style:none;
  padding:0;
  margin:40px 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ボタン風カード */
.related-cta li a{

  display:block;
  padding:18px 20px;

  background:linear-gradient(145deg,#111,#000);
  border:1px solid rgba(214,178,94,.25);
  border-radius:8px;

  color:#d6b25e;
  text-decoration:none;

  font-size:15px;
  letter-spacing:.05em;

  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}

/* →矢印 */
.related-cta li a::after{
  content:"→";
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  opacity:.6;
  transition:.25s;
}

/* hover */
.related-cta li a:hover{

  border-color:#d6b25e;
  background:#d6b25e;
  color:#000;

  transform:translateY(-3px);
}

/* hover時 矢印 */
.related-cta li a:hover::after{
  right:12px;
  opacity:1;
}

/* 特に予約だけ強調（CV用） */
.related-cta li:last-child a{
  background:#d6b25e;
  color:#000;
  font-weight:bold;
}

/* 予約 hover */
.related-cta li:last-child a:hover{
  background:#fff;
}
/* ==============================
   MAIN CTA（最重要）
============================== */

.journal-cta{
  margin-top:60px;
  padding:32px 20px;

  background:linear-gradient(145deg,#111,#000);
  border:1px solid rgba(214,178,94,.3);
  border-radius:10px;

  text-align:center;
}

/* タイトル */
.journal-cta h2{
  font-size:20px;
  margin-bottom:10px;
  color:#fff;
  letter-spacing:.05em;
}

/* サブ */
.cta-sub{
  font-size:14px;
  color:#aaa;
  margin-bottom:24px;
}

/* ボタン */
.cta-button{

  display:inline-block;
  padding:16px 32px;

  background:linear-gradient(135deg,#d6b25e,#f5e6b3);
  color:#000;
  font-weight:bold;
  font-size:16px;

  border-radius:6px;
  text-decoration:none;

  transition:.25s;
  box-shadow:0 0 15px rgba(214,178,94,.3);

  cursor:pointer;
}

/* hover */
.cta-button:hover{
  transform:translateY(-3px);
  box-shadow:0 0 25px rgba(214,178,94,.6);
}

/* 軽い発光アニメーション（やりすぎない） */
.cta-button{
  animation:ctaPulse 2.5s infinite;
}

@keyframes ctaPulse{
  0%{ box-shadow:0 0 10px rgba(214,178,94,.2); }
  50%{ box-shadow:0 0 25px rgba(214,178,94,.5); }
  100%{ box-shadow:0 0 10px rgba(214,178,94,.2); }
}

/* 戻るリンク */
.back-link{
  margin-top:30px;
  text-align:center;
}

.back-link a{
  color:#aaa;
  text-decoration:none;
  font-size:13px;
}

.back-link a:hover{
  color:#fff;
}

/* 説明文 */
.related-lead{
  font-size:14px;
  color:#aaa;
  margin-bottom:12px;
  line-height:1.8;
}

/* ==============================
   スマホ最適化（超重要）
============================== */

@media (max-width:768px){

  .journal-cta{
    padding:24px 16px;
  }

  .journal-cta h2{
    font-size:18px;
  }

  .cta-sub{
    font-size:13px;
  }

  .cta-button{
    width:100%;
    padding:16px;
    font-size:15px;
  }

}
/* ==============================
   CTAリンク → ボタン化（HTML変更なし）
============================== */

.journal-cta p{
  margin-top:20px;
}

/* aタグをボタンにする */
.journal-cta p a{

  display:inline-block;
  padding:16px 32px;

  background:linear-gradient(135deg,#d6b25e,#f5e6b3);
  color:#000;

  font-weight:bold;
  font-size:16px;

  border-radius:6px;

  text-decoration:none; /* 下線削除 */
  transition:.25s;

  box-shadow:0 0 15px rgba(214,178,94,.3);
}

/* hover */
.journal-cta p a:hover{
  transform:translateY(-3px);
  box-shadow:0 0 25px rgba(214,178,94,.6);
}

/* スマホ最適化 */
@media (max-width:768px){

  .journal-cta p a{
    width:100%;
    padding:16px;
    font-size:15px;
  }

}
.related-cta a[href*="reserve"]{
  background:linear-gradient(135deg,#d6b25e,#f5e6b3);
  color:#000;
  font-weight:bold;
  box-shadow:0 0 12px rgba(214,178,94,.4);
}