/* ========================================
   QR Landing Page
======================================== */

/* 共通余白 */
.qr-section {
  padding: 80px 0;
}

/* ヒーロー */
.qr-hero {
  background:
    linear-gradient(rgba(30,26,58,0.72), rgba(30,26,58,0.72)),
    url("../image/qr/hero.jpg") center/cover no-repeat;

  color: #fff;
  padding: 140px 20px 110px;
  text-align: center;
}

.qr-label {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  opacity: 0.8;
  margin-bottom: 14px;
}

.qr-hero h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  margin-bottom: 24px;
  font-weight: 700;
}

.qr-lead {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 2;
}

/* =====================
Hero copy
===================== */

.hero-copy{

  margin:0 0 40px;

  color:rgba(255,255,255,.95);

  font-size:clamp(
    1.3rem,
    2vw,
    2rem
  );

  line-height:1.8;

  font-weight:700;

  text-shadow:
    0 6px 18px rgba(0,0,0,.18);

}

/* カード */
.qr-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.qr-card {
  background: #fff;
  border-radius: 14px;
  padding: 30px 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: transform 0.25s ease;
}

.qr-card:hover {
  transform: translateY(-6px);
}

.qr-card h3 {
  color: #2e1a47;
  margin-bottom: 14px;
}

/* 写真 */
.qr-gallery img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* ボタン */
.qr-links {
  text-align: center;
}

.qr-button {
  display: inline-block;
  background: #2e1a47;
  color: #fff;
  text-decoration: none;
  padding: 16px 34px;
  border-radius: 999px;
  font-weight: 600;
  transition: 0.25s ease;
}

.qr-button:hover {
  background: #4b3274;
  transform: translateY(-2px);
}

/* スマホ */
@media (max-width: 899px) {

  .qr-section {
    padding: 55px 0;
  }

  .qr-hero {
    padding: 100px 20px 80px;
  }

  .qr-card-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .qr-card {
    padding: 24px 20px;
  }

}

.qr-link-card{
  text-decoration:none;
  color:inherit;
}

.qr-link-card:hover{
  transform:translateY(-6px);
}

.vr-badge{
  display:inline-block;
  background:#4a3fa3;
  color:#fff;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.8rem;
  font-weight:bold;
}

/* ========================================
   施設カード調整
======================================== */

.qr-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:36px;
  align-items:stretch;
}

.qr-card{
  background:#fff;
  border-radius:14px;
  padding:24px;
  width:100%;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transition:0.25s ease;

  display:flex;
  flex-direction:column;
  min-height:260px;
}

.qr-card:hover{
  transform:translateY(-4px);
}

.qr-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:10px;
}

.qr-card h3{
  margin:18px 0 10px;
  font-size:1.2rem;
  color:#2e1a47;
}

.qr-card p{
  line-height:1.8;
  color:#444;
}


/* ========================================
   VRカードの押せる感を強化
======================================== */

.qr-link-card{
  position:relative;
  overflow:hidden;
}

.qr-link-card::after{
  content:"→";
  position:absolute;
  right:20px;
  bottom:18px;
  font-size:1.2rem;
  color:#4a3fa3;
  transition:0.25s ease;
}

.qr-link-card:hover{
  background:#f6f3ff;
}

.qr-link-card:hover::after{
  transform:translateX(4px);
}

.facility-caption{
  text-align:center;
  color:#555;
  line-height:1.8;
  margin-top:18px;
  font-size:0.95rem;
}

.note-center{
  font-size:0.9rem;
  color:#666;
}

/* 説明文（ボタン外テキスト） */
.qr-text-center{
  text-align:center;
  line-height:1.9;
  max-width:800px;
  margin:0 auto;
}

/* ========================================
   VRページ
======================================== */

.vr-page-hero{
  text-align:center;
  padding:100px 20px 70px;
}

.vr-page-label{
  font-size:0.85rem;
  letter-spacing:0.18em;
  color:#6a4fbf;
  margin-bottom:14px;
}

.vr-page-hero h1{
  font-size:clamp(2rem,4vw,3.5rem);
  color:#2e1a47;
  margin-bottom:24px;
}

.vr-page-lead{
  max-width:760px;
  margin:0 auto;
  line-height:2;
  color:#444;
}

/* グリッド */

.vr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:36px;
}

/* カード */

.vr-tour-card{
  display:block;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
  transition:0.25s ease;
}

.vr-tour-card:hover{
  transform:translateY(-6px);
  background:#f8f6ff;
}

.vr-tour-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  display:block;
}

/* 本文 */

.vr-tour-body{
  padding:24px;
}

.vr-tour-body h2{
  color:#2e1a47;
  margin:14px 0 10px;
}

.vr-tour-body p{
  line-height:1.8;
  color:#555;
}

/* VRバッジ */

.vr-mini-badge{
  display:inline-block;
  background:#4a3fa3;
  color:#fff;
  padding:5px 12px;
  border-radius:999px;
  font-size:0.78rem;
  font-weight:bold;
}

/* 戻る */

.vr-back{
  text-align:center;
  padding:20px 0 90px;
}

/* スマホ */

@media (max-width:899px){

  .vr-page-hero{
    padding:80px 20px 50px;
  }

  .vr-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

}

/* ========================================
   VR埋め込み
======================================== */

.vr-scene{
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:14px 14px 0 0;
  background:#000;
}

.vr-scene iframe,
.vr-scene canvas,
.vr-scene .a-canvas{
  width:100% !important;
  height:100% !important;
}

/* A-Frameサイズ調整 */

a-scene{
  width:100%;
  height:100%;
}

/* VRカード */

.vr-tour-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* ========================================
   A-Frame 強制表示
======================================== */

.vr-scene{
  width:100%;
  height:320px;
  overflow:hidden;
  background:#000;
  border-radius:14px 14px 0 0;
  position:relative;
}

.vr-scene a-scene{
  width:100% !important;
  height:100% !important;
  position:absolute !important;
  top:0;
  left:0;
}

.vr-scene canvas{
  width:100% !important;
  height:100% !important;
  display:block !important;
}

/* ========================================
   VRカードの重なり対策
======================================== */

/* header / nav を最前面に固定 */
.header{
  z-index:999999 !important;
}

.nav{
  z-index:999998 !important;
}

/* VRカード側の重なりを抑制 */
.vr-tour-card,
.qr-card,
.vr-badge,
.vr-mini-badge{
  z-index:auto !important;
}


/* 下セクション */

.qr-section{

  padding:90px 0;

}

.qr-section .qr-lead{

  color:#444;

}

/* 説明カード */

.intro-card{

  max-width: 820px;

  margin: 0 auto;

  padding: 40px;

  background: #fff;

  border-radius: 18px;

  box-shadow: 0 8px 28px rgba(0,0,0,.06);

}

.intro-card p{

  margin: 0 0 20px;

  line-height: 2;

}

/* ミッション */

.mission-box{

  margin-top: 32px;

  padding: 24px;

  border-left: 5px solid #0d5ea8;

  background: #f6f9fc;

}

.mission-box strong{

  display: block;

  font-size: 1.1rem;

  margin-bottom: 10px;

}

.mission-box span{

  color: #666;

}

/* ========================================
   UNESCO Hero 強制上書き
======================================== */

.qr-hero .content-wrapper{

  max-width:960px;

  margin:0 auto;

  display:block !important;

  text-align:center;

  position:static !important;

}

/* hero copy */

.qr-hero .hero-copy{

  display:block;

  position:static !important;

  margin:36px auto !important;

  width:auto;

  max-width:none;

  text-align:center;

}

/* 説明文 */

.qr-hero .hero-lead{

  max-width:760px;

  margin:0 auto;

  color:rgba(255,255,255,.92);

  line-height:2;

}

/* =====================
スマホ Hero調整
===================== */

@media (max-width:899px){

  .qr-hero .content-wrapper{

    padding:0 20px;

    text-align:center !important;

  }

  .qr-hero .hero-copy{

    width:100%;

    margin:28px auto !important;

    text-align:center !important;

    font-size:clamp(
      1.2rem,
      6vw,
      1.8rem
    );

    line-height:1.7;

  }

  .qr-hero .hero-lead{

    text-align:center;

    font-size:0.98rem;

  }

}

/* HERO 最終固定 */

.qr-hero .content-wrapper{
  display:block !important;
  text-align:center !important;
}

.qr-hero .hero-copy{

  display:block;

  width:100%;

  max-width:100%;

  margin:36px auto;

  text-align:center !important;

  color:#fff;

  font-size:clamp(1.5rem,3vw,2.4rem);

  line-height:1.8;

  font-weight:700;

}

.qr-hero .hero-lead{

  width:100%;

  max-width:760px;

  margin:0 auto;

}

.qr-hero .hero-lead p{

  margin:0;

  text-align:center !important;

}

@media(max-width:899px){

  .qr-hero .hero-copy{

    font-size:1.5rem;

    margin:28px auto;

  }

}

/* =====================
Hero copy 強制中央
===================== */

.qr-hero .hero-copy{

  display:flex !important;

  justify-content:center !important;

  align-items:center;

  flex-direction:column;

  width:100% !important;

  margin:32px auto !important;

  padding:0 !important;

  text-align:center !important;

  color:#fff;

}

.qr-hero .hero-copy br{
  display:block;
}

@media (max-width:899px){

  .qr-hero .hero-copy{

    padding-left:0 !important;

    padding-right:0 !important;

    margin-left:auto !important;

    margin-right:auto !important;

  }

}

/* =====================
Hero（スマホ崩れ修正）
===================== */

.hero-copy{
  display:block;
  width:100%;

  text-align:center !important;

  margin:0 auto 40px;

  color:rgba(255,255,255,.95);

  font-size:clamp(
    1.3rem,
    2vw,
    2rem
  );

  line-height:1.8;
  font-weight:700;

  text-shadow:
    0 6px 18px rgba(0,0,0,.18);
}

@media (max-width:899px){

  .qr-hero .content-wrapper{
    text-align:center !important;
  }

  .hero-copy{
    text-align:center !important;

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;

    font-size:1.45rem;

    padding:0 10px;
  }

}