/* ========== Base ========== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

img { display: block; max-width: 100%; height: auto; }

.palt { font-feature-settings: "palt" 1; }

/* コンテンツ幅 */
.u-inner{
  width:1140px;
  max-width:100%;
  margin:0 auto;
  padding:0 20px;
}

/* リンク装飾 */
.link-a{
  color:#0a66c2;
  text-decoration:underline;
}

/* ========== FV ========== */
.fv{
  display:block;
  width:100%;
  line-height:0;
}
.fv-img{ width:100%; height:auto; }

/* ========== Combined（ハイビスカス＋2カラム） ========== */
.section-combined{
  position:relative;
  padding:60px 0 0;
  background:#fff;
}

/* タイトル部 */
.section-combined .title-wrap{
  position:relative;
  text-align:center;
}
.section-combined .title-img{
  width:35vw;
  height:auto;
  display:inline-block;
}
/* ハイビスカス（右0px・上寄せ） */
.section-combined .title-vine{
  position:absolute;
  top:-210px;
  height:clamp(56px,25vw,772px);
  pointer-events:none;
  user-select:none;
  z-index:2;
}
.section-combined .title-vine.left{ left:0; }
.section-combined .title-vine.right{ right:0px; }
/* 2カラム */
.section-combined .row{
  padding:60px 0;
  display:flex;
  gap:40px;
}
.section-combined .text{
  flex:1;
  color:#333;
  letter-spacing:2px;
}
.section-combined .text h2{
  margin:0 0 14px;
  color:#333;
  font-weight:700;
  font-size:32px;
  line-height:1.5;
  letter-spacing:2px;
}
.section-combined .text p{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.9;
}

.row .row-img {
  margin:45px 0 20px;
  width:80%;
}
.row .text p {
  font-size:large;
}

.pill{
  display:inline-block;
  margin-top:10px;
  padding:15px 25px;
  border-radius:7px;
  background:#634e44;
  color:#fff;
  font-size:larger;
  white-space:nowrap;
}

.section-combined .image{
  flex:1;
  position:relative;
}
.section-combined .image img{
  position:relative;
  top:30px;
}

/* ========== Explore（3カラム 丸画像） ========== */
.section-explore{
  position:relative;
  padding:100px 0;
  color:#333;
  background:url("../img/back-img.jpg") center/cover no-repeat;
  overflow-x:clip;
  overflow-y:visible;
}
.explore-bg-left,
.explore-bg-right{
  position:absolute;
  top:30px;
  max-width:24%;
  object-position:top center;
  pointer-events:none;
  z-index:0;
}
.explore-bg-left{ left:0; }
.explore-bg-right{ right:0; }
.section-explore .u-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  padding:0 40px;
}
.explore-title{
  text-align:center;
  margin:-10px 0 50px;
}
.explore-title img{
  width:70%;
  display:inline-block;
}
.explore-grid{
  display:grid;
  grid-template-columns:repeat(3, max-content);
  justify-content:center;
  gap:40px;
}
.explore-card{ text-align:center; }
.explore-thumb{
  width:20vw;
  height:auto;
  margin:0 auto;
  border-radius:50%;
}
.explore-h3{
  margin:20px 0 0;
  line-height:1.5;
  letter-spacing:4px;
  font-weight:700;
  font-size:x-large;
  color:#222;
}
.explore-text{
  line-height:1.8;
  letter-spacing:1.2px;
  margin:15px 0;
}

/* 飾りイラスト（右下固定） */
.explore-deco {
  position: absolute;
  right: 22vw;
  bottom: -115px;
  width: clamp(100px, 19.4vw, 280px);
  height: auto;
  pointer-events: none;
  z-index: 3;
}

/* 飾り分の余白を確保（重ならないように） */
.section-explore .u-inner {
  padding-bottom: 0px;  /* .explore-deco の高さ分余白 */
}

/* ========== Lineup ========== */
.section-lineup{
  position:relative;
  color:#333;
  background:url("../img/back-img2.jpg") center/cover no-repeat;
  padding-bottom:60px;
}
.lineup-title{
  justify-self:center;
  padding:60px;
  width:50%;
}
.frames-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:80px;
  justify-items:center;
}
.frames-grid > .frame-item:nth-last-child(2):first-child{
  grid-column:2;
}
.frames-grid > .frame-item:nth-last-child(2):first-child + .frame-item{
  grid-column:3;
}
.frame-item{
  flex:0 0 auto;
}
.frame-item img{
  border:4px solid #ffffff;
}

/* ========== Story ========== */
.section-story{
  background:#fff;
  padding:40px 40px 0;
}
.story-inner{
  display:flex;
  align-items:center;
  gap:80px;
}
.story-circle{
  width:370px;
  height:auto;
}
.story-text{ flex:1; }
.story-text img{
  margin-bottom:20px;
}
.story-body{
  font-size:large;
  line-height:2;
  letter-spacing:1.5px;
  color:#444;
  margin:0;
}

/* ========== Access（2カラム＋館内マップ＋注記） ========== */
.section-access{
  padding:40px 40px 0;
  background:#fff;
  color:#333;
}
.access-title{
  font-size:xx-large;
  letter-spacing:2px;
  margin-bottom:10px;
}
.access-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:32px;
  align-items:start;
  margin-bottom:28px;
}
.access-info{
  font-size: large;
  letter-spacing:1.5px;
}
.access-info p{
  font-size: small;
  margin:4px 0;
  line-height:1.9;
}
/* 左側リスト（■＋見出し＋本文） */
.access-dl{
  margin-bottom:10px;
}
.access-row{
  display:grid;
  grid-template-columns:6em 1fr;
  column-gap:18px;
  margin:10px 0;
}
.access-row--multiline{
  align-items:start;
} /* 会場など複数行 */
.access-row dt{
  display:flex;
  align-items:baseline;
  gap:8px;
  letter-spacing:2px;
  line-height:1.6;
  font-weight: normal;
}
.access-row dt::before{
  content:"";
  width:12px;
  height:12px;
  background:#222;
  flex:0 0 12px;
  transform:translateY(-1px);
}
.access-row dd{
  margin:0;
  line-height:1.6;
}

.access-heading{
  margin:12px 0 6px;
  letter-spacing:2px;
}
.access-heading .sq{
  display:inline-block;
  width:10px;
  height:10px;
  background:currentColor;
  margin-right:6px;
}
.access-sub{
  padding-left:1em;
  font-weight:normal;
}

/* 右：Google Map */
.access-map iframe{
  width:100%;
  height:440px;
  border:0;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* 館内マップ・注記 */
.hallmap-img{
  width:100%;
  height:auto;
  display:block;
  margin:24px 0 12px;
}
.access-note{
  margin:20px 0 100px;
  font-size:13px;
  color:#666;
  line-height:1.9;
  text-align:left;
}

/* ========== Steps ========== */
.section-steps{ background:#f5f5f5; padding:80px 0; }
.steps-title{
  text-align:center; font-weight:700; font-size:28px; letter-spacing:2px; margin:0 0 28px;
}
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }

.step-card{
  background:#fff; border-radius:16px; padding:28px 22px 24px; text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.step-head{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px; }
.step-badge{
  display:inline-grid; place-items:center; width:56px; height:56px;
  border-radius:50%; background:#e4007e; color:#fff; font-weight:700; font-size:20px; line-height:1;
}
.step-h3{ margin:0; font-size:20px; font-weight:700; letter-spacing:2px; }

/* 図版：トリミングせず中央配置 */
.step-illust{
  width:100%; height:clamp(160px,22vw,220px); border-radius:8px; overflow:hidden; margin:10px 0 14px;
  display:grid; place-items:center; background:#fff;
}
.step-illust img{ width:100%; height:100%; object-fit:contain; object-position:center; }

.step-text{ margin:0; font-size:14px; line-height:1.9; letter-spacing:1.2px; color:#333; }

.sp-only{ display:none; }
.pc-only{ display:inline; }

/* ========================================
  Responsive: Tablet (〜1024px)
======================================== */
@media (min-width:1025px) and (max-width:1440px){
  /* ---- Combined ---- */
  .section-combined .title-vine{ top:-13vw; width:clamp(60px,30vw,250px); height:auto; }

  /* Explore */
  .explore-deco{ right: 11vw; bottom: -90px; width: clamp(60px, 22vw, 200px); }
}

/* ========================================
  Responsive: Tablet (〜1024px)
======================================== */
@media (max-width:1024px){
  /* ---- Combined ---- */
  .section-combined .title-vine{ top:-14vw; width:clamp(60px,30vw,200px); height:auto; }

  /* Steps */
  .steps-grid{
    grid-template-columns:repeat(2,1fr);
  }

  /* Explore */
  .explore-thumb{ width:200px; height:200px; }
  .explore-grid{ gap:24px; }
  .explore-deco{ right: 3vw; bottom: -90px; width: clamp(60px, 22vw, 200px); }
}

/* ========================================
  Responsive: Explore (〜949px)
======================================== */
@media (max-width:949px){
  .pc-only{ display:none; }
  .sp-only{ display:inline; }

  /* ---- Combined ---- */
  .section-combined .image img{ width: 38vw; }

  /* ---- Explore ---- */
  .section-explore{ padding:50px 0 70px; }
  .section-explore .u-inner{ padding:0 20px; }
  .section-explore .explore-bg-left,
  .section-explore .explore-bg-right{ max-width: 44%; }
  .section-explore .explore-thumb-wrap{ position:relative; display:flex; justify-content:center; align-items:center; }
  .section-explore .explore-thumb-wrap .explore-bg-left,
  .section-explore .explore-thumb-wrap .explore-bg-right{ position:absolute; top:50%; width:35vw; max-width:none; z-index:0; transform:translateY(-50%); }
  .section-explore .explore-thumb-wrap .explore-bg-left{ left:-10vw; }
  .section-explore .explore-thumb-wrap .explore-bg-right{ right:-10vw; }
  .section-explore .explore-thumb-wrap .explore-thumb{ position:relative; z-index:1; }
  .section-explore .explore-card{ margin-top: 35px; }
  .section-explore .explore-deco{ right:19%; bottom:-60px; width:clamp(120px,35vw,200px); transform:translateX(50%); z-index:3; }
  .section-explore .explore-title{ margin:0 0 30px; z-index:1; }
  .section-explore .explore-title img{ width:100%; margin:0 auto; }
  .section-explore .explore-grid{ grid-template-columns:1fr; gap:28px; }
  .section-explore .explore-thumb{ width:55vw; height:55vw; }
  .section-explore .explore-h3{ font-size:large; letter-spacing:2px; position:relative; margin-top: 40px; z-index:1; }
  .section-explore .explore-text{ font-size:medium; position:relative; z-index:1; }

  /* ---- Lineup ---- */
  .section-lineup{ padding-bottom:40px; overflow:hidden; }
  .lineup-title{ width:60vw; padding:30px; margin:0 auto; }
  .section-lineup .frames-grid{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    grid-auto-flow:row !important;
    gap:24px;
    align-items:start;
  }
  .section-lineup .frames-grid > .frame-item{
    grid-column:auto / span 1 !important;
    width:100% !important;
    max-width:none !important;
  }
  .section-lineup .frame-item img{ width:100%; height:auto; }
}

/* ========================================
  Responsive: Mobile (〜768px)
======================================== */
@media (max-width:768px){
  /* ---- Combined ---- */
  .section-combined{ padding:30px 0 0; overflow:visible; }
  .section-combined .title-wrap{ margin-top:50px; }
  .section-combined .title-img{ width:72vw; }
  .section-combined .title-vine{ top:-17vw; width:clamp(60px,30vw,200px); height:auto; }
  .section-combined .row{
    flex-direction:column;
    padding:24px 16px 32px;
    gap:20px;
  }
  .section-combined .text{ letter-spacing:1px; }
  .section-combined .image{ left:0; }
  .section-combined .image img{ top:0; width:85%; margin:0 auto; }
  .row .row-img{ width:85%; margin:20px auto; }
  .row .text p{ font-size:medium; }
  .pill{
    display:block;
    width:100%;
    text-align:center;
    font-size:small;
    padding:12px 10px;
    white-space:normal;
  }

  /* ---- Story ---- */
  .section-story{ padding:40px 20px 30px; }
  .story-inner{ flex-direction:column; gap:24px; }
  .story-circle{ width:60vw; margin:0 auto; }
  .story-text img{ width:100%; margin:0 auto 16px; }
  .story-body{ font-size:medium; letter-spacing:1px; }

  /* ---- Access ---- */
  .section-access{ padding:40px 16px 0; }
  .access-title{ text-align:center; font-size:x-large; }
  .access-grid{ grid-template-columns:1fr; gap:20px; }
  .access-info{ font-size:medium; }
  .access-row{ grid-template-columns:auto 1fr; column-gap:10px; }
  .access-map iframe{ height:260px; }
  .access-heading{ font-size:small; letter-spacing:1px; }
  .access-sub{ font-size:small; line-height:1.8; }
  .access-note{ text-align:left; font-size:12px; line-height:1.8; margin-bottom:60px; }

  /* ---- Steps ---- */
  .section-steps{ padding:50px 0; }
  .section-steps .u-inner{ width:100%; }
  .steps-grid{ grid-template-columns:1fr; gap:20px; }
  .step-head{ justify-content:flex-start; }
  .step-h3{ font-size:x-large; }
}

/* ========================================
  Responsive: Mobile (〜560px)
======================================== */
@media (max-width:560px) {
  /* ---- Steps ---- */
  .step-badge {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .steps-grid{
    grid-template-columns:1fr;
  }
}