.intro {
    max-width: 1100px;
    margin: 140px auto 60px auto; /* 上の余白を増やす（例: 140px） */
    padding: 0 20px;
    text-align: center;
}
.intro h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
}
.intro p {
    color: #ccc;
    font-size: 1rem;
    margin-bottom: 30px;
}
.intro-image {
    max-width: 80%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 188, 212, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #f5f5f5;
    padding: 20px;
    display: inline-block;
}
.intro-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0, 188, 212, 0.25);
}
.contents {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}
.topic {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.topic.visible {
    opacity: 1;
    transform: translateY(0);
}
.topic:nth-child(even) {
    flex-direction: row-reverse;
}
.topic img {
    width: 45%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    margin: 0 20px;
    transition: transform 0.5s ease;
}
.topic-text {
    background: linear-gradient(180deg, #121212, #0f0f0f);
    border: 1px solid #1f1f1f; 
    border-radius: 12px; 
    padding: 14px 16px; 
    box-shadow: 0 8px 26px rgba(0,0,0,0.35);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.topic-text:hover {
    transform: translateY(-10px); 
    border-color: #2a2a2a; 
    box-shadow: 0 6px 20px rgba(0,188,212,0.7);
}
.topic:hover img {
    transform: scale(1.05);
}
.topic-text {
    flex: 1;
}
.topic-text h3 {
    margin-top: 0;
}
.topic-text p {
    color: #ccc;
}
.topic-text a {
    display: inline-block;
    margin-top: 10px;
    color: #00bcd4;
    text-decoration: none;
    border-bottom: 1px solid #00bcd4;
    transition: color 0.3s;
}
.topic-text a:hover {
    color: #fff;
    border-bottom: 1px solid #fff;
}
@media screen and (max-width: 768px) {
    .topic {
    flex-direction: column !important;
    }
    .topic img {
    width: 100%;
    margin: 0 0 20px;
    }
}














.sec { max-width: 1100px; margin: 60px auto; padding: 0 20px; }
.sec h2 { font-size: 1.6rem; margin: 0 0 18px; text-align: center; }

.group-wrap { display: grid; gap: 18px; }
.domain-block { border: 1px solid rgba(255,255,255,.12); border-left: 4px solid #00bcd4; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.03); }
.domain-head { padding: 14px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.domain-title { font-weight: 700; }
.domain-meta { color:#aaa; font-size:.95rem; }

.domain-icon { width:40px; height:40px; object-fit:contain; flex-shrink:0; }
.domain-summary { color:#ccc; font-size:.95rem; }
.domain-detail { color:#ddd; font-size:.95rem; padding: 8px 0 12px; line-height:1.6; }

.domain-body {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 16px;
    padding: 0 16px 8px;
    align-items: start;
}
.domain-media { }
.domain-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.12);
}
.domain-text { }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 980px){ .card-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }

@media (max-width: 820px){
    .domain-body { grid-template-columns: 1fr; }
}

.card {
  border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid #00bcd4;
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  overflow: hidden;
}
.card summary{
  list-style:none;
  cursor:pointer;
  padding: 14px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.card summary::-webkit-details-marker{ display:none; }
.card .title{ font-weight:700; line-height:1.3; }
.card .sub{ color:#aaa; font-size:.92rem; margin-top:4px; }
.card .chev{ opacity:.7; transition: transform .2s ease; }
.card[open] .chev{ transform: rotate(180deg); }

.card .body{ padding: 0 16px 14px; color:#ddd; }
.card-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.12);
}
.card .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tag{ font-size:.82rem; padding:4px 8px; border:1px solid rgba(255,255,255,.16); border-radius: 999px; color:#ccc; }

.map-wrap{ margin: 10px 0 18px; }
.conf-map { border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; background: rgba(255,255,255,.02); }
.map-tooltip{
  position: fixed;
  z-index: 9999;
  pointer-events:none;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.85);
  border: 1px solid rgba(255,255,255,.15);
  color:#fff;
  font-size:.9rem;
  transform: translate(10px, 10px);
  display:none;
}
.map-tooltip.show{ display:block; }