@charset "utf-8";

/* Variables */
:root {
  --bg: #ffffff;
  --text: #333333;
  --muted: #666666;
  --brand: #00AFCC;
  --brand-dark: #008ca3;
  --surface: #f8fafc;
  --border: #e5e7eb;
  --shadow: 0 5px 10px rgba(0,0,0,0.07), 0 5px 5px rgba(0,0,0,0.07);
}

html {
  scroll-behavior: smooth;
}

/* Base */
body {
  margin: 0;
  font-family: Arial, Helvetica, "sans-serif";
  font-size: 18px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.8;
  padding-top: 120px;
}

.container { 
  width: min(1200px, 92%); 
  margin-inline: auto; 
}

.section { 
  padding: 40px 0; 
}

.section.alt { 
  background: var(--surface); 
}

h1,h2,h3 { 
  line-height:1.4; 
  margin:0 0 16px; 
}

h2 { 
  color: var(--brand);
  font-size: 170%; 
}

h3 { 
  color: var(--brand);
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0;
}

/* スクロール調整 */
section[id] {
  scroll-margin-top: 120px;
}

/* Buttons */
.btn-top { 
  display: inline-block; 
  padding: 10px 10px; 
  border-radius: 60px; 
  text-decoration: none; 
  font-weight: 600;
  width: 45%;
  height: 80px;
  line-height: 60px;
  font-size: 120%;
  margin: 0 2.5%;
  box-sizing: border-box;
}

.btn-top.primary-top { 
  background: var(--brand); 
  color: #fff; 
  box-shadow: var(--shadow); 
}

.btn-top.primary-top:hover { 
  background: var(--brand-dark); 
}

.btn { 
  display:inline-block; 
  padding:10px 10px; 
  border-radius:60px; 
  text-decoration:none; 
  font-weight:600;
  width: 90%;
  height: 60px;
  line-height: 60px;
  font-size: 180%; 
}

.btn.primary { 
  background: var(--brand); 
  color:#fff; 
  box-shadow: var(--shadow); 
}

.btn.primary:hover { 
  background: var(--brand-dark); 
}

/* Hero Slider */
.hero-slider {
  position: relative;
  width: 100%;
  height: 820px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero-slider .slides {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.8s ease;
}

.hero-slider .slide {
  flex: 0 0 100%;
  max-width: 100%;
  height: 100%;
}

.hero-slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  display: block;
}

.hero-slider .hero-overlay { 
  position:absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%,-50%); 
  width:100%; 
}

.hero-slider .hero-box {
  background:rgba(0,0,0,0.5);
  max-width:600px; 
  padding:20px 0;
  margin:0 auto; 
  text-align:center; 
  border-radius:2px; 
  color:#fff;
}

.hero-slider h1 { 
  font-size:70pt; 
  margin:0; 
}

.hero-slider p { 
  margin:0.5rem 0; 
  font-weight:bold; 
}

.hero-slider .prev, .hero-slider .next {
  position:absolute; 
  top:50%; 
  transform:translateY(-50%);
  background:rgba(0,0,0,0.45); 
  color:#fff; 
  border:none;
  width:44px; 
  height:44px; 
  border-radius:50%; 
  cursor:pointer;
}

.hero-slider .prev { 
  left:1rem; 
}

.hero-slider .next { 
  right:1rem; 
}

.hero-slider .dots { 
  position:absolute; 
  left:50%; 
  transform:translateX(-50%); 
  bottom:1rem; 
  display:flex; 
  gap:.5rem; 
}

.hero-slider .dot {
  width:12px; 
  height:12px; 
  border-radius:50%; 
  background:rgba(255,255,255,0.5); 
  border:none; 
  cursor:pointer;
}

.hero-slider .dot.active { 
  background:#fff; 
  box-shadow:0 0 6px rgba(0,0,0,0.3); 
}

/* Registration info */
.registration-info { 
  padding:40px 0; 
  text-align:center; 
  background: #E4EBF3;
}

.registration-info .announce { 
  margin-bottom:20px; 
}

/* Topics */
.topics-list { 
  list-style:none; 
  padding:0; 
}

.topics-list ul{
  margin-top: 26px!important;
}

.topics-list li { 
  margin-bottom:8px; 
  padding-left:20px; 
  position:relative; 
}

.topics-list li::before { 
  content:"•"; 
  color:var(--brand); 
  position:absolute; 
  left:0; 
}

/* Dates */
#dates { 
  background:#E5F7FA; 
}

.dates-list { 
  list-style:none; 
  padding:0; 
  display:grid; 
  grid-template-columns:1fr; 
  gap:16px; 
}

.dates-list li { 
  background:#fff; 
  padding:16px; 
  border:1px solid var(--border); 
  border-radius:10px; 
  display:grid; 
  grid-template-columns:1fr; 
  gap:12px; 
}

.dates-list .date { 
  font-weight:700; 
}

.dates-list .label { 
  color:var(--muted); 
}

/* Organization */
#organization { 
  background:#E5F7FA; 
  text-align:center; 
}

.logo-grid { 
  display:flex; 
  flex-wrap:wrap; 
  justify-content:center; 
  align-items:center; 
  gap:24px; 
}

.logo-blank { 
  flex:0 0 320px; 
  height:100px; 
  background:#f3f4f6; 
  border:1px dashed #cbd5e1; 
  border-radius:10px; 
}

/* Footer */
.site-footer {
  background: var(--brand-dark);
  color: #fff;
  padding: 28px 0;
  text-align: center;
  font-size: 12pt;
  position: relative;
  z-index: 1;
}

/* Utility Classes */
.pc{
  display:block!important;
}

.sp{
  display: none!important;
}

.logo-img img {
  max-width: 250px;
}

.logo-caption {
  font-size: 12px;
  text-align: center;
  color: #374151;
  font-weight: 400;
  margin-top: 8px;
}

.date-b{
  display: inline-block;
  background-color: #008ca3;
  color: #FFFFFF;
  font-weight: bold;
  padding: 4px 0px 4px 6px;
  width: 150px;
  margin-right: 12px;
}

.date-b-long {
  display: inline-block;
  background-color: #008ca3;
  color: #FFFFFF;
  font-weight: bold;
  padding: 4px 0px 4px 4px;
  width: 220px;
  margin-right: 12px;
}

#welcome{
  background: #E5F7FA;
}

.brand-c{color: #00AFCC}
.brand-d{color: #008ca3}

/* Responsive */
@media (max-width: 1100px) {
  body {
    padding-top: 100px;
  }
  
  section[id] {
    scroll-margin-top: 100px;
  }
  
  .dates-list { 
    grid-template-columns:1fr; 
  }
  
  .logo-grid { 
    display:block; 
  }
  
  .logo-blank { 
    width:100%; 
    margin-bottom:16px; 
  }
}

@media (max-width: 768px) {
  .hero-slider {
    height: 80vh;
  }
  
  body{
    font-size: 16px;
    padding-top: 95px;
  }
  
  section[id] {
    scroll-margin-top: 95px;
  }
  
  .pc{
    display:none!important;
  }
  
  .sp{
    display: block!important;
  }
}

@media (max-width:600px){
  .hero-slider h1 { 
    font-size:50pt; 
  }
  
  .hero-slider .hero-box { 
    width:100%; 
  }
}

/* ホームページ専用のボタンスタイル */
.btn-container-home {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-top-home { 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px; 
    border-radius: 60px; 
    text-decoration: none; 
    font-weight: 600;
    width: 300px;
    min-height: 80px;
    line-height: 1.3;
    font-size: 120%;
    box-sizing: border-box;
    text-align: center;
}

.btn-top-home.primary-top { 
    background: var(--brand); 
    color: #fff; 
    box-shadow: var(--shadow); 
}

.btn-top-home.primary-top:hover { 
    background: var(--brand-dark); 
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .btn-container-home {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-top-home {
        width: 280px;
        margin-bottom: 15px;
    }
}