/* ========================================
UNESCO / QR Pages
======================================== */


/* =====================
COMMON
===================== */

.content-wrapper{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

.qr-section{
  padding:90px 0;
}

.section-title{
  text-align:center;
  font-size:clamp(1.9rem,3vw,2.7rem);
  color:#2e1a47;
  margin-bottom:54px;
}



/* =====================
HERO
===================== */

.qr-hero{

  background:
  linear-gradient(
    rgba(30,26,58,.62),
    rgba(30,26,58,.82)
  ),
  url("../image/qr/hero.jpg")
  center/cover
  no-repeat;

  color:#fff;

  padding:170px 20px 150px;

}

.qr-hero .content-wrapper{

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

}

/* base.css対策 */

.qr-hero *{

  position:static;

}



/* UNESCO SCHOOL */

.qr-label{

  margin:0 0 22px;

  font-size:1.05rem;

  font-weight:700;

  letter-spacing:.34em;

  color:
  rgba(
    255,
    255,
    255,
    .78
  );

}



/* タイトル */

.qr-hero h1{

  margin:0;

  color:#fff;

  font-size:
  clamp(
    2.2rem,
    3.7vw,
    3.5rem
  );

  line-height:1.18;

  font-weight:700;

}



/* キャッチ */

.qr-hero .hero-copy{

  position:static !important;

  width:auto !important;

  margin:
  48px
  auto
  54px
  !important;

  padding:0 !important;

  left:auto !important;

  right:auto !important;

  transform:none !important;

  text-align:center !important;

  font-size:
  clamp(
    1.9rem,
    2.6vw,
    2.8rem
  );

  line-height:1.8;

  font-weight:700;

  letter-spacing:.06em;

  color:#fff;

  text-shadow:

  0 0 16px
  rgba(
    255,
    255,
    255,
    .10
  ),

  0 12px 36px
  rgba(
    0,
    0,
    0,
    .35
  );

}

.qr-hero .hero-copy::after{

  content:"";

  display:block;

  width:120px;

  height:2px;

  margin:24px auto 0;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.85),
    transparent
  );

}



/* 説明 */

.hero-lead{

  max-width:760px;

}

.hero-lead p{

  margin:0;

  color:
  rgba(
    255,
    255,
    255,
    .92
  );

  line-height:2.1;

  font-size:1.08rem;

}



/* =====================
INTRO
===================== */

.intro-card{

  max-width:840px;

  margin:0 auto;

  padding:42px;

  background:#fff;

  border-radius:18px;

  box-shadow:
  0 8px 28px
  rgba(0,0,0,.06);

}

.intro-card p{

  color:#444;

  line-height:2;

  margin:0 0 20px;

}

.intro-card p:last-child{
  margin-bottom:0;
}



/* =====================
MISSION
===================== */

.mission-box{

  margin-top:32px;

  padding:26px;

  border-left:
  5px
  solid
  #0d5ea8;

  background:#f6f9fc;

}

.mission-box strong{

  display:block;

  margin-bottom:10px;

  color:#2e1a47;

}

.mission-box span{

  color:#666;

}



/* =====================
CARD
===================== */

.qr-card-grid{

  display:grid;

  grid-template-columns:

  repeat(
    auto-fit,
    minmax(
      280px,
      1fr
    )
  );

  gap:32px;

}

.qr-card{

  display:flex;

  flex-direction:column;

  background:#fff;

  padding:30px;

  border-radius:16px;

  box-shadow:
  0 6px 20px
  rgba(0,0,0,.08);

}

.qr-card:hover{

  transform:
  translateY(-4px);

}

.qr-card h3{

  margin:0 0 16px;

  color:#2e1a47;

}

.qr-card p{

  color:#555;

  line-height:1.9;

  margin-bottom:26px;

}

.qr-card .qr-button{

  margin-top:auto;

}



/* =====================
BUTTON
===================== */

.qr-button{

  display:inline-block;

  padding:

  14px
  30px;

  border-radius:999px;

  background:#2e1a47;

  color:#fff;

  text-decoration:none;

  transition:.25s;

}

.qr-button:hover{

  background:#4b3274;

  transform:
  translateY(-2px);

}



/* =====================
MESSAGE
===================== */

.qr-lead{

  line-height:2;

  color:#444;

  text-align:center;

}



/* =====================
SP
===================== */

@media (max-width:899px){

  .qr-section{

    padding:60px 0;

  }

  .qr-hero{

    padding:
    120px
    20px
    90px;

  }

  .qr-label{

    font-size:.82rem;

  }

  .qr-hero h1{

    font-size:2rem;

  }

  .qr-hero .hero-copy{

    width:100% !important;

    margin:
    36px
    auto
    42px
    !important;

    font-size:1.65rem;

    line-height:1.9;

  }

  .hero-lead p{

    font-size:1rem;

  }

  .qr-card-grid{

    grid-template-columns:1fr;

  }

  .intro-card{

    padding:28px;

  }

}

/* ========================================
UNESCO HERO 微調整（最終）
======================================== */

/* タイトル少し抑える */
.qr-hero h1{

font-size:
clamp(
2.2rem,
4vw,
3.5rem
) !important;

font-weight:700;

text-shadow:
0 10px 30px rgba(0,0,0,.18);

}

/* キャッチを主役に */
.qr-hero .hero-copy{

font-size:
clamp(
2rem,
2.7vw,
2.8rem
) !important;

font-weight:600;

color:#f4f1ff !important;

/* 少し発光 */
text-shadow:

0 0 18px
rgba(
180,
170,
255,
.22
),

0 12px 34px
rgba(
0,
0,
0,
.32
);

letter-spacing:.12em;

}

/* 下線を細く長く */
.qr-hero .hero-copy::after{

width:180px !important;

height:1px !important;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.95),
transparent
);

opacity:.55;

}

/* 説明文は少し抑える */
.hero-lead p{

opacity:.86;

}

/* スマホ */
@media(max-width:899px){

.qr-hero h1{

font-size:2rem !important;

}

.qr-hero .hero-copy{

font-size:1.7rem !important;

letter-spacing:.08em;

}

}

/* ========================================
導線セクション補正
======================================== */

.qr-links .content-wrapper{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

}

.qr-links .qr-text-center{

max-width:760px;

margin:0 auto 28px;

text-align:center;

}

.qr-links .qr-button{

display:inline-flex;

justify-content:center;

align-items:center;

margin:0 auto;

}

.global-highlight{

background:#f7f8fc;

}

/* =====================
GROWTH
===================== */

.growth-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:40px;

text-align:center;

}

.growth-item{

padding:20px;

}

.growth-number{

font-size:4rem;

font-weight:800;

line-height:1;

color:rgba(46,26,71,.08);

margin-bottom:18px;

}

.growth-item h3{

margin:0 0 16px;

font-size:1.5rem;

color:#2e1a47;

}

.growth-item p{

margin:0;

line-height:2;

color:#666;

}

@media(max-width:899px){

.growth-grid{

grid-template-columns:1fr;

gap:28px;

}

.growth-number{

font-size:3rem;

}

}

/* 社会体験ページ 締め文 */

.experience-note{

display:block;

max-width:720px;

margin:44px auto 0;

padding:24px 36px;

text-align:center;

font-size:1rem;

line-height:2.1;

font-weight:500;

color:#655f73;

background:
linear-gradient(
180deg,
rgba(255,255,255,.82),
rgba(248,247,251,.96)
);

border-radius:18px;

box-shadow:
0 10px 30px
rgba(46,26,71,.05);

}

/* 上に余韻線 */

.experience-note::before{

content:"";

display:block;

width:64px;

height:2px;

margin:0 auto 18px;

background:
linear-gradient(
90deg,
transparent,
#7660c6,
transparent
);

}

/* SP */

@media (max-width:899px){

.experience-note{

padding:20px;

font-size:.95rem;

line-height:2;

}

}

 /* 国際理解 キーワード帯 */

.global-flow{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

flex-wrap:wrap;

margin:10px auto 0;

max-width:900px;

}

.global-word{

padding:18px 28px;

border-radius:999px;

background:

linear-gradient(
135deg,
#eef4ff,
#ffffff
);

color:#2e1a47;

font-weight:700;

box-shadow:
0 6px 20px
rgba(0,0,0,.05);

}

.global-arrow{

font-size:1.4rem;

color:#9b92c8;

}

@media(max-width:899px){

.global-flow{

gap:12px;

}

.global-word{

padding:14px 20px;

font-size:.95rem;

}

.global-arrow{

display:none;

}

}

.global-note{

max-width:720px;

margin:42px auto 0;

text-align:center;

line-height:2.2;

color:#6a6675;

padding-top:28px;

border-top:
1px solid
rgba(46,26,71,.10);

}