@charset "utf-8";

.story{
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background-color:hsla(0,0%,50%,0.5);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  text-align:center;
  overflow:hidden;
}

#story01{ padding-top: 80px; font-size:1.2em;  background-position:left top; }
#story06{
  background-color: var(--w060);
  background-image:url(img/wave_pattern_reverse.png);
  background-repeat: repeat-x;
  background-position: top;
  background-size: 21px auto;
}


#story01::before, #story02::before, #story03::before, #story04::before,
#story05::before, #story06::before, #story07::before, #story08::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}

#story01::before{ background:hsla(0,0%,0%,0.35); }
#story02::before{ background:hsla(0,0%,0%,0.35); }
#story03::before{ background:hsla(0,0%,0%,0.35); }
#story04::before{ background:hsla(0,0%,0%,0.35); }
#story05::before{ background:hsla(0,0%,50%,0.5); }
#story06::before{  }
#story07::before{  }
#story08::before{  }

.story-content{
  position:relative;
  z-index:2;
  width:calc(100% - 40px);
  max-width:960px;
  padding:40px 20px;
  margin:auto;
}

.reveal{opacity:0;transform:translateY(25px);transition:opacity .9s ease, transform .9s ease-out}
.reveal.in-view{opacity:1;transform:translateY(0)}

.notice{
  //background:rgba(255,255,255,0.85);
  background-image:linear-gradient(180deg, hsla(0,100%,100%,0.8) 0px, hsla(0,100%,100%,0.85) 20px, hsla(0,100%,100%,0.85) calc( 100% - 10px) , hsla(0,100%,100%,0.8) 100% );
  padding:25px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

.ex-title, .ex-h1, .ex-h2, .ex-h3 {
	font-weight:bold;
}

.ex-title#type1{
	background: linear-gradient(180deg, var( --w053 ), var( --w148 ) );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ex-title#type2{
  color:var( --w431 );
  text-shadow:
  0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 
  0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 
  0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 
  0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 0px 0px 2px hsla(0,0%,0%,1), 
  2px 2px 10px hsla(0,0%,0%,1);
}

.ruri{ color:var( --w349 ); }

.history{
  background:hsla(71,60%,95%,0.9);
  padding:30px;
  box-shadow:0 10px 30px hsla(71,60%,95%,0.2);
  text-align:left;
}

.mini_history{
  border-radius:10px;
  background-image:radial-gradient(ellipse, hsla(190,78%,96%,0.85) 0%, hsla(190,78%,96%,0.9) 100%);
  padding:30px;
  box-shadow:0 10px 30px hsla(347,78%,96%,0.2);
  text-align:left;
  text-shadow:0 0 4px hsla(0,100%,100%,1), 0 0 4px hsla(0,100%,100%,1), 0 0 4px hsla(0,100%,100%,1);
}

/* ストーリー03 イベントカード */
.story-cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:30px;
}

.story-card{
  flex:1 1 320px;
  max-width:420px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
  overflow:hidden;
}

.story-card img{
  width:100%;
  display:block;
  height:auto;
}

.story-card .desc{
  padding:20px;
  text-align:left;
}

.access-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: rgba(255,255,255,0.9);
  padding: 30px;
  max-width: 900px;
  margin: auto;
  flex-wrap: nowrap; /* ← 横並びを維持 */
}

.access-card > div {
  flex: 1 1 50%;
  text-align: left;
}

.access-card img {
  flex: 1 1 45%;
  max-width: 420px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* スマホ・タブレットでは縦並びに戻す */
@media (max-width: 800px) {
  .access-card {
	flex-direction: column;
	text-align: center;
  }

  .access-card > div {
	text-align: center;
  }
}

/* ストーリー05 名簿*/

/* 出品者（大見出し） */
.seller {
background: var( --w238 );
color: hsla(0,100%,100%,1);
font-size: 1.5rem;
font-weight: bold;
margin:10px 0 0 0;
padding: 10px 16px;
border-radius: 8px;
margin-bottom: 20px;
}


/* 生年（小見出し） */
.year {
flex: 0 0 100%;
font-weight: bold;
font-size: 1.2rem;
color: var( --w041 );
margin-top: 20px;
margin-bottom: 10px;
text-align:left;
padding-left:0.6em;
}

/* 名簿リスト（Flex最大4列） */
.namelist {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-bottom: 10px;
}

.name {
flex: 0 0 calc((100% - 50px) / 6);
box-sizing: border-box;
max-width: 100%;
padding:0;
text-align: center;
font-size:16px;
}
@media (max-width: 1000px) { .name { flex: 0 0 calc((100% - 40px) / 5); } }
@media (max-width: 720px) { .name { flex: 0 0 calc((100% - 30px) / 4); } }
@media (max-width: 540px) { .name { flex: 0 0 calc((100% - 20px) / 3); } }
@media (max-width: 400px) { .name { flex: 0 0 calc((100% - 10px) / 2); } }
@media (max-width: 320px) { .name { flex: 0 0 100%; } }

/* マップ */
.map-embed{
	height:70vh;
	min-height:360px;
	width:100%;
	border:0;
	border-radius:12px;
	box-shadow:0 8px 30px rgba(0,0,0,0.4);
}

@media (max-width:720px){
  .timeline .item{flex-direction:column;gap:6px}
  .notice{border-width:4px}
}

/* =========================================================
   MAP レスポンシブ設定
========================================================= */

.map-wrap {
  position: relative;
  width: 100%;
}
.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== aspect-ratio非対応ブラウザ用フォールバック ===== */
@supports not (aspect-ratio: 1) {
  .map-wrap iframe { position: absolute; top:0; left:0; width:100%; height:100%; }

  .map-wrap { padding-bottom: calc(2 / 5 * 100%); height: 0; }
  @media (max-width: 1400px) { .map-wrap { padding-bottom: calc(1 / 2 * 100%); } }
  @media (max-width: 1200px) { .map-wrap { padding-bottom: calc(2 / 3 * 100%); } }
  @media (max-width: 1000px) { .map-wrap { padding-bottom: calc(3 / 4 * 100%); } }
  @media (max-width: 800px)  { .map-wrap { padding-bottom: calc(4 / 5 * 100%); } }
  @media (max-width: 600px)  { .map-wrap { padding-bottom: calc(1 / 1 * 100%); } }
  @media (max-width: 400px)  { .map-wrap { padding-bottom: calc(5 / 4 * 100%); } }
}

/* ===== aspect-ratio対応ブラウザ用 ===== */
.map-wrap { aspect-ratio: 5 / 2; } /* 基本形 */
@media (max-width: 1400px) { .map-wrap { aspect-ratio: 2 / 1; } }
@media (max-width: 1200px) { .map-wrap { aspect-ratio: 3 / 2; } }
@media (max-width: 1000px) { .map-wrap { aspect-ratio: 4 / 3; } }
@media (max-width: 800px)  { .map-wrap { aspect-ratio: 5 / 4; } } 
@media (max-width: 600px)  { .map-wrap { aspect-ratio: 1 / 1; } } 
@media (max-width: 400px)  { .map-wrap { aspect-ratio: 2 / 3; } }