/* =========================================================
   未来交流会
   Pop & Colorful design
   ========================================================= */

:root{
  --pink:#ff6f91;
  --pink-dark:#ef4774;
  --yellow:#ffd85c;
  --yellow-light:#fff4c7;
  --blue:#65c9e8;
  --blue-light:#e8f8fc;
  --green:#76c98d;
  --green-light:#eaf8ed;
  --purple:#9b86d9;
  --ink:#40384a;
  --muted:#756d7c;
  --cream:#fffaf3;
  --white:#fff;
  --border:#eee4df;
  --shadow:0 14px 40px rgba(83,58,77,.10);
  --radius:28px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:"Zen Maru Gothic","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.8;
  font-size:16px;
}

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

a{
  color:inherit;
  text-decoration:none;
}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,250,243,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(238,228,223,.8);
}

.header-inner{
  width:min(1160px,92%);
  min-height:76px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:28px;
}

.logo{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:15px;
  font-weight:900;
  line-height:1.15;
  color:var(--pink-dark);
}

.logo-mark{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--yellow);
  color:#fff;
  font-size:22px;
  transform:rotate(-8deg);
}

.logo small{
  font-size:11px;
  color:var(--ink);
  font-weight:700;
}

.nav{
  margin-left:auto;
  display:flex;
  gap:24px;
  font-size:13px;
  font-weight:700;
}

.nav a{
  transition:.25s ease;
}

.nav a:hover{color:var(--pink-dark)}

.header-button{
  padding:10px 18px;
  border:2px solid var(--pink);
  border-radius:999px;
  color:var(--pink-dark);
  font-weight:900;
  font-size:13px;
  transition:.25s ease;
}

.header-button:hover{
  background:var(--yellow);
  color:#b53a55;
  border-color:#b53a55;
}

.hero{
  position:relative;
  overflow:hidden;
  min-height:680px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,216,92,.42), transparent 23%),
    radial-gradient(circle at 10% 85%, rgba(101,201,232,.22), transparent 27%),
    var(--cream);
}

.hero:before{
  content:"";
  position:absolute;
  left:-7%;
  bottom:-100px;
  width:65%;
  height:240px;
  border-radius:50%;
  background:#fff0f4;
  transform:rotate(-4deg);
}

.hero-inner{
  position:relative;
  z-index:2;
  width:min(1160px,92%);
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.hero-copy{padding:55px 0}

.eyebrow,.section-label{
  margin:0 0 12px;
  font-size:16px;
  letter-spacing:.18em;
  font-weight:900;
  color:var(--pink-dark);
}

.hero h1{
  margin:0 0 18px;
  font-size:clamp(44px,6vw,74px);
  line-height:1.08;
  letter-spacing:-.05em;
  font-weight:900;
}

.hero h1 span{
  color:var(--pink-dark);
  position:relative;
}

.hero h1 span:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:9px;
  border-radius:50%;
  background:var(--yellow);
  z-index:-1;
  transform:rotate(-2deg);
}

.hero-title{
  font-size:32px;
  line-height:1.6;
  margin:0 0 26px;
}

.hero-title strong{
  font-size:36px;
  color:var(--ink);
}

.hero-title span{
  color:var(--purple);
  font-weight:900;
}

.hero-info{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:28px;
}

.hero-info>div{
  padding:10px 15px;
  border-radius:17px;
  background:#fff;
  box-shadow:0 7px 22px rgba(83,58,77,.07);
}

.hero-info b{
  display:block;
  font-size:14px;
}

.hero-info small{
  display:block;
  color:var(--muted);
  font-size:10px;
}

.cta-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-width:230px;
  padding:15px 24px;
  border:2px solid var(--pink-dark);
  border-radius:999px;
  background:transparent;
  color:var(--pink-dark);
  font-size:16px;
  font-weight:900;
  box-shadow:0 8px 0 rgba(239,71,116,.14);
  transition:.25s ease;
}

.cta-button span{font-size:24px;line-height:1}

.cta-button:hover{
  background:var(--yellow);
  border-color:#d64b35;
  color:#d64b35;
  transform:translateY(-3px);
  box-shadow:0 11px 0 rgba(239,71,116,.12);
}

.hero-visual{
  position:relative;
  height:550px;
}

.blob{
  position:absolute;
  border-radius:48% 52% 62% 38% / 42% 48% 52% 58%;
}

.blob-pink{
  width:360px;height:390px;
  left:95px;top:90px;
  background:#ffdce6;
  transform:rotate(9deg);
}

.blob-yellow{
  width:130px;height:130px;
  right:25px;top:50px;
  background:var(--yellow);
}

.blob-blue{
  width:115px;height:115px;
  left:35px;bottom:45px;
  background:#c7edf7;
}

.sun{
  position:absolute;
  right:70px;
  top:20px;
  font-size:58px;
  color:#f6b82e;
  transform:rotate(10deg);
}

.girl{
  position:absolute;
  width:235px;
  height:390px;
  left:180px;
  top:105px;
}

.face{
  position:absolute;
  left:64px;top:27px;
  width:108px;height:118px;
  background:#f7c4a9;
  border-radius:47% 47% 45% 45%;
  z-index:3;
}

.hair{
  position:absolute;
  left:45px;top:5px;
  width:150px;height:170px;
  background:#513f58;
  border-radius:50% 50% 42% 48%;
  z-index:4;
}

.hair:after{
  content:"";
  position:absolute;
  right:-10px;
  top:58px;
  width:45px;height:105px;
  background:#513f58;
  border-radius:0 50% 50% 50%;
}

.body{
  position:absolute;
  left:38px;top:145px;
  width:160px;height:230px;
  background:var(--pink);
  border-radius:65px 65px 20px 20px;
  z-index:2;
}

.arm{
  position:absolute;
  left:8px;top:165px;
  width:72px;height:170px;
  background:#f7c4a9;
  border-radius:40px;
  transform:rotate(20deg);
  z-index:1;
}

.book{
  position:absolute;
  left:125px;top:185px;
  z-index:6;
  width:80px;height:70px;
  background:#fff;
  border:6px solid var(--blue);
  border-radius:10px;
  display:grid;
  place-items:center;
  color:var(--purple);
  font-size:35px;
  transform:rotate(8deg);
  box-shadow:5px 8px 0 rgba(65,161,190,.18);
}

.bubble{
  position:absolute;
  z-index:10;
  padding:13px 18px;
  background:#fff;
  border-radius:20px;
  box-shadow:var(--shadow);
  font-size:13px;
  font-weight:900;
  text-align:center;
  line-height:1.5;
}

.bubble-1{left:10px;top:165px;transform:rotate(-7deg)}
.bubble-2{right:0;bottom:100px;transform:rotate(5deg)}

.sparkle{
  position:absolute;
  color:var(--pink);
  font-size:35px;
}

.s1{left:55px;top:80px}
.s2{right:80px;top:190px;color:var(--purple)}
.s3{left:75px;bottom:130px;color:#efb62e}

.hero-deco{
  position:absolute;
  z-index:1;
  font-weight:900;
}

.deco-1{left:4%;top:18%;font-size:40px;color:var(--yellow)}
.deco-2{left:8%;bottom:18%;font-size:48px;color:var(--blue)}
.deco-3{right:4%;top:30%;font-size:22px;color:var(--pink)}
.deco-4{right:10%;bottom:10%;font-size:45px;color:var(--purple)}

.section{
  padding:25px 0;
}

.section-inner{
  width:min(1080px,90%);
  margin:auto;
}

.section h1{
  margin:0 0 25px;
  font-size:clamp(31px,4vw,47px);
  line-height:1.35;
  letter-spacing:-.035em;
}

.section h1 span{color:var(--pink-dark)}

.lead{
  max-width:760px;
  margin:0 auto 45px;
  text-align:center;
  font-size:17px;
}

.intro{
  background:#fff;
  text-align:center;
}

.question-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.question-card{
  display:block;
  position:relative;
  padding:15px 10px;
  border-radius:var(--radius);
  font-size:16px;
  font-weight:900;
  text-align:center;
  box-shadow:var(--shadow);
}

.question-card .q-mark{
  display:inline;
  margin-bottom:6px;
  font-size:25px;
  margin-right: 8px;
}

.question-card .q-text {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    line-height: 1.5;
}

.q-pink{background:#fff0f4}
.q-yellow{background:var(--yellow-light)}
.q-blue{background:var(--blue-light)}

.features{
  background:var(--cream);
  text-align:center;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:-50px;
}

.feature-card{
  position:relative;
  text-align:left;
  padding:20px 10px 10px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

.feature-pink{background:#ffe8ef}
.feature-yellow{background:#fff4cc}
.feature-blue{background:#e6f7fb}

.feature-number{
  position:absolute;
  right:22px;top:15px;
  font-size:12px;
  font-weight:900;
  opacity:.5;
}

.feature-icon{
  font-size:48px;
  margin-bottom:16px;
}

.feature-card h3{
  font-size:23px;
  margin:0 0 10px;
}

.feature-card p{margin:0 0 10px;color:#5d5562}

.speech{
  margin-top:auto;
  padding:12px 12px;
  background:#fff;
  border-radius:18px;
  font-size:13px;
  line-height:1.7;
}

.talk{
  background:#fff;
  overflow:hidden;
}

.talk-inner{
  display:grid;
  grid-template-columns:32% 68%;
  align-items:center;
  gap:40px;
}

.talk-copy{padding-left:10px}

.talk-copy p:not(.section-label){
  color:var(--muted);
}

.talk-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:25px;
}

.talk-tags span{
  padding:7px 13px;
  border-radius:999px;
  background:#fff0f4;
  color:var(--pink-dark);
  font-size:12px;
  font-weight:900;
}

.talk-illustration{
  position:relative;
  height:280px;
  background:#fff5cf;
  border-radius:45% 55% 55% 45% / 55% 45% 55% 45%;
  transform:rotate(-2deg);
}

.table{
  position:absolute;
  width:270px;height:115px;
  left:50%;top:53%;
  transform:translate(-50%,-50%);
  background:#e5a975;
  border-radius:50%;
}

.person{
  position:absolute;
  width:70px;height:125px;
  background:var(--pink);
  border-radius:35px 35px 18px 18px;
  top:35px;
}

.person:before{
  content:"";
  position:absolute;
  width:52px;height:52px;
  background:#f7c4a9;
  border-radius:50%;
  top:-25px;left:9px;
}

.p1{left:100px}
.p2{right:100px;background:var(--blue)}

.chat{
  position:absolute;
  left:50%;top:120px;
  transform:translateX(-50%);
  width:68px;height:58px;
  background:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:30px;
  font-weight:900;
  color:var(--purple);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.mini-star{
  position:absolute;
  right:65px;
  bottom:45px;
  color:var(--pink);
  font-size:40px;
}

.program{
  background:#f8f3ff;
}

.timeline{
  max-width:900px;
  margin:50px auto 20px;
  position:relative;
}

.timeline:before{
  content:"";
  position:absolute;
  left:95px;top:0;bottom:0;
  width:4px;
  background:#d9cef4;
  border-radius:4px;
}

.timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:75px 45px 1fr;
  gap:20px;
  align-items:center;
  min-height:125px;
}

.time{
  font-size:28px;
  font-weight:900;
  color:var(--purple);
  text-align:right;
}

.time span{
  display:block;
  font-size:10px;
  letter-spacing:.08em;
  color:var(--muted);
}

.timeline-dot{
  position:relative;
  z-index:2;
  width:45px;height:45px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:4px solid var(--purple);
  color:var(--purple);
  font-size:11px;
  font-weight:900;
}

.timeline-content{
  padding:19px 24px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 8px 22px rgba(83,58,77,.07);
}

.timeline-content h3{
  margin:0 0 3px;
  font-size:17px;
}

.timeline-content p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.timeline-item.highlight .timeline-dot{
  background:var(--pink);
  border-color:var(--pink);
  color:#fff;
}

.timeline-item.highlight .timeline-content{
  border:3px solid #ffc0d0;
}

.notice{
  text-align:center;
  color:var(--muted);
  font-size:12px;
}

.facility{
  background:#fff;
  text-align:center;
  align-items:center;
}

.facility-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:25px;
  align-items:center;
}

.facility-card{
  display:flex;
  gap:18px;
  align-items:center;
  text-align:left;
  padding:27px;
  border-radius:24px;
  background:var(--blue-light);
  width:300px;
}

.facility-card:nth-child(2){background:var(--yellow-light)}
.facility-card:nth-child(3){background:var(--green-light)}

.facility-icon{
  flex:0 0 60px;
  width:60px;height:60px;
  border-radius:20px;
  background:#fff;
  display:grid;
  place-items:center;
  font-size:28px;
}

.facility-card h3{margin:0 0 5px;font-size:18px}
.facility-card p{margin:0;font-size:12px;color:var(--muted);line-height:1.6}

.parents{
  background:#fff0f4;
}

.parents-inner{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:60px;
  align-items:center;
}

.parents-copy p:not(.section-label){color:var(--muted)}

.parent-points{
  display:grid;
  gap:9px;
  margin-top:25px;
  font-weight:700;
}

.parents-badge{
  min-height:280px;
  border-radius:50%;
  background:var(--yellow);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:rotate(5deg);
  text-align:center;
  box-shadow:12px 14px 0 rgba(255,111,145,.18);
}

.parents-badge span{font-size:16px;font-weight:900}
.parents-badge strong{font-size:39px;color:var(--pink-dark);line-height:1.2}
.parents-badge small{font-weight:700}

.points{
  background:var(--cream);
  text-align:center;
}

.point-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:17px;
  margin-top:40px;
}

.point{
  display:grid;
  grid-template-columns:25px 1fr;
  gap:17px;
  padding:20px;
  text-align:left;
  background:#fff;
  border-radius:22px;
  box-shadow:0 7px 22px rgba(83,58,77,.06);
}

.point>b{
  width:58px;height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--pink);
  color:#fff;
  font-size:13px;
}

.point:nth-child(2)>b{background:var(--yellow);color:var(--ink)}
.point:nth-child(3)>b{background:var(--blue)}
.point:nth-child(4)>b{background:var(--green)}

.point h3{margin:0 0 0px;font-size:17px}
.point p{margin:0;color:var(--muted);font-size:12px}

.event-info{
  background:#fff;
}

.info-card{
  max-width:900px;
  margin:20px auto 0;
  border:2px solid var(--border);
  border-radius:28px;
  overflow:hidden;
}

.info-row{
  display:grid;
  grid-template-columns:190px 1fr;
  border-bottom:1px solid var(--border);
}

.info-row:last-child{border-bottom:0}

.info-row dt,.info-row dd{
  margin:0;
  padding:20px 25px;
}

.info-row dt{
  background:#fff6df;
  font-weight:900;
}

.info-row dd{background:#fff}

.info-row small{color:var(--muted)}
.free{
  display:inline-block;
  padding:5px 17px;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  font-weight:900;
}

/* 表全体 */
.event-table {
    border: 1px solid #e5dfe3;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.06);
    max-width: 800px;
}

/* 1行 */
.event-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    border-bottom: 1px solid #eee7ea;
}

.event-row:last-child {
    border-bottom: none;
}

/* 項目名 */
.event-label {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #fff5f8;
    color: #555;
    font-weight: 700;
    border-right: 1px solid #eee7ea;
}

/* 内容 */
.event-value {
    padding: 10px 24px;
    color: #444;
    line-height: 1.8;
    background: #fff;
}

/* 補足 */
.event-note {
    display: block;
    margin-top: 3px;
    font-size: 0.85em;
    color: #888;
}

/* 無料 */
.event-value .free {
    color: #e85b8a;
    font-size: 1.1em;
}

.entry{
  position:relative;
  overflow:hidden;
  padding:20px 10px 30px 10px;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,216,92,.9), transparent 18%),
    radial-gradient(circle at 90% 80%, rgba(101,201,232,.7), transparent 20%),
    var(--pink);
  color:#fff;
  text-align:center;
}

.entry:before,.entry:after{
  content:"";
  position:absolute;
  width:180px;height:140px;
  border-radius:50%;
  border:3px dashed rgba(255,255,255,.5);
}

.entry:before{left:-70px;top:-70px}
.entry:after{right:-70px;bottom:-70px}

.entry-inner{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:auto;
}

.entry .section-label{color:#fff}
.entry h1{font-size:clamp(36px,5vw,58px)}
.entry h1 span{color:var(--yellow)}
.entry p:not(.section-label){font-size:17px}

.cta-white{
  margin-top:18px;
  border-color:#fff;
  color:var(--pink-dark);
  background:#fff;
  box-shadow:0 8px 0 rgba(155,52,81,.2);
}

.cta-white:hover{
  background:var(--yellow);
  color:#b53a55;
  border-color:#b53a55;
}

.entry-note{
  display:block;
  margin-top:20px;
  opacity:.85;
  font-size:11px;
}

.entry-sparkle{
  font-size:45px;
  margin-bottom:8px;
}

.organizers{
  padding:10px 0 30px 0;
  background:#3f3747;
  color:#fff;
}

.organizers .section-label{color:var(--yellow)}
.organizers h1{font-size:30px}

.organizer-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin-top:0px;
}

.organizer-list p{
  margin:0;
  padding:10px;
  border-left:3px solid var(--pink);
  font-size:16px;
  color:#eee8f0;
}

.organizer-list b{color:#fff}

.site-footer{
  background:#302a36;
  color:#cfc8d2;
  padding:25px 0;
}

.footer-inner{
  width:min(1080px,90%);
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.footer-logo{
  color:#fff;
  font-weight:900;
}

.footer-logo:first-letter{color:var(--yellow)}

.footer-logo small{
  font-weight:500;
  color:#bdb4c2;
}

.footer-inner p{
  margin:0;
  font-size:11px;
}

/* ---------- responsive ---------- */

@media(max-width:900px){
  .nav{display:none}
  .header-button{margin-left:auto}

  .hero{min-height:auto}
  .hero-inner{
    grid-template-columns:1fr;
    gap:0;
  }

  .hero-copy{
    padding:70px 0 20px;
    text-align:center;
  }

  .hero-info{justify-content:center}
  .hero-visual{
    height:470px;
    max-width:550px;
    width:100%;
    margin:auto;
  }

  .blob-pink{left:25%;width:310px;height:340px}
  .girl{left:35%;transform:scale(.9);transform-origin:top left}
  .bubble-1{left:4%}
  .bubble-2{right:3%}

  .question-cards,
  .feature-grid,
  .facility-grid{
    grid-template-columns:1fr;
  }

  .talk-inner,
  .parents-inner{
    grid-template-columns:1fr;
  }

  .talk-illustration{max-width:520px;margin:auto}
  .parents-badge{max-width:300px;width:100%;margin:auto}

  .organizer-list{grid-template-columns:1fr}
}

@media(max-width:600px){
  body{font-size:15px}

  .site-header{position:relative}
  .header-inner{min-height:68px}
  .logo{font-size:13px}
  .logo-mark{width:34px;height:34px}
  .header-button{padding:8px 13px;font-size:11px}

  .hero-copy{padding-top:48px}
  .hero h1{font-size:43px}
  .hero-title{font-size:17px}
  .hero-title strong{font-size:22px}

  .hero-info{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .hero-info>div:last-child{grid-column:1/-1}

  .hero-visual{height:390px}
  .blob-pink{
    width:260px;height:290px;
    left:20%;top:70px;
  }
  .girl{
    left:30%;top:80px;
    transform:scale(.72);
  }
  .bubble{
    font-size:11px;
    padding:9px 12px;
  }
  .bubble-1{left:0;top:110px}
  .bubble-2{right:0;bottom:60px}

  .section{padding:72px 0}
  .section h1{font-size:31px}

  .lead{font-size:15px}

  .talk-copy{padding:30px 0 0}
  .talk-illustration{height:270px}
  .person{transform:scale(.75);transform-origin:bottom}
  .p1{left:45px}.p2{right:45px}
  .table{width:220px}

  .timeline:before{left:29px}
  .timeline-item{
    grid-template-columns:45px 1fr;
    gap:15px;
    min-height:auto;
    margin-bottom:18px;
  }
  .timeline-item .time{
    grid-column:1;
    grid-row:1;
    text-align:center;
    font-size:17px;
  }
  .timeline-item .timeline-dot{
    grid-column:1;
    grid-row:2;
    margin-top:-5px;
  }
  .timeline-item .timeline-content{
    grid-column:2;
    grid-row:1 / span 2;
  }

  .facility-card{align-items:flex-start}
  .facility-icon{flex-basis:50px;width:50px;height:50px}

  .point-grid{grid-template-columns:1fr}
  .point{grid-template-columns:52px 1fr}
  .point>b{width:48px;height:48px}

  .info-row{grid-template-columns:1fr}
  .info-row dt{padding-bottom:8px}
  .info-row dd{padding-top:8px}

  .entry{padding:80px 20px}
  .entry h1{font-size:36px}
  .entry p:not(.section-label){font-size:14px}

  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ========================================
   文字の折り返し調整
   ======================================== */

/* 見出し */
h1,
h2,
h3,
h4 {
    word-break: keep-all;
    overflow-wrap: normal;
}

/* 本文 */
p,
li {
    word-break: normal;
    overflow-wrap: break-word;
}