@charset "UTF-8";

/* ========== RESET & BASE STYLES ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/*
html {
    font-size: 62.5%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
}
*/
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ========== COLOR PALETTE ========== */
:root {
    --color-primary: #009d70;      /* Teal/Green */
    --color-primary-dark: #0d6b64; /* Dark Teal */
    --color-accent-red: #E63946;   /* Red for dates */
    --color-navy: #1e3a5f;         /* Navy Blue */
    --color-text: #333333;         /* Dark Gray */
    --color-light-bg: #f5f9fa;     /* Light Blue Background */
    --color-white: #ffffff;        /* White */
    --color-blue: #0b549d;        /* Blue */
    
    /* Decorative Circle Colors */
    --color-circle-pink: rgba(255, 182, 193, 0.3);    /* Light Pink */
    --color-circle-blue: rgba(173, 216, 230, 0.3);    /* Light Blue */
    --color-circle-light: rgba(220, 245, 242, 0.4);   /* Light Cyan */
}

/* ========== HEADER ========== */
/*.header {
    background-color: var(--color-white);
    padding: 1.5rem 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header__content {
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.logo__subtitle {
    font-size: 0.75rem;
    color: #999;
    letter-spacing: 0.05em;
}

.logo__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
}

.logo__english {
    font-size: 0.75rem;
    color: #999;
}*/

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

@media (min-width: 751px){
    html {
  font-size: 100%;
}
      .pc { display: block !important; }
  .sp { display: none  !important; }

body {
    font-family: 
       "Noto Sans JP",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Hiragino Sans",
"Hiragino Kaku Gothic ProN",
sans-serif
        ;
    /*line-height: 1.6;*/
    color: #333;
    background-color: #fff;
    font-size: 1.6rem;
    font-size: 62.5%; 
    line-height: 1.8;
    letter-spacing: .085rem;
    overflow-x:hidden;
}

    
.hero {
    /*position: relative;
    background: linear-gradient(135deg, #e8f7f5 0%, #f0f8fa 50%, #e6f2f8 100%);
    padding: 4rem 1rem;
    min-height: 600px;
    overflow: hidden;*/
     position: relative;
    background: #ffffff/*linear-gradient(135deg, #e8f7f5 0%, #f0f8fa 50%, #e6f2f8 100%)*/;
    padding: 5rem 0 5rem;
/*margin: 0 0 5rem;*/
    /*height: 1000px;*/
  height: 100vh;

    overflow: visible;
}
.hero__header{
/*position:absolute;
top:40px;
left:60px;
z-index:100;*/
position:absolute;
top:40px;
left:50%;
transform:translateX(-50%);
width:1200px;
z-index: 1;    
}

.hero__header img{
width:260px;
}
.hero__background {
    /*position: absolute;
    top: 0;
    right: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(173, 216, 230, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;*/
    /*position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;

    background-image: url("../images/hero_and_next.jpg");
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;

    pointer-events: none;*/
    
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 100%;

    background-image: url("../images/mv.jpg?v1");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
}

.hero__content {
    /*max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    position: relative;
    z-index: 1;
    */
   /* max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 2rem;
    align-items: center;
    position: relative;*/
     max-width: 1200px;
    margin: 3rem auto 0;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;

    height: 100%;

    align-items: center;
align-items: center;
    position: relative;
    z-index: 2;
}

/* Hero Left Content */
.hero__left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 2;
}

.hero__subtitle {
    font-size: 3rem;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
}

.hero__highlight-box {
    background-color: #ffffff;
    padding: 1.5rem 2.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 0 20px rgb(190 190 190 / 40%);
    width: fit-content;
}

.hero__main-title {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.hero__description {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
}

.hero__department {
    font-size: 1.2rem;
    color: var(--color-text);
    line-height: 1.6;
}

.hero__opening-date {
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-accent-red);
}

/*.hero__tagline {
    font-size: 1.3rem;
    color: var(--color-text);
    line-height: 1.6;
    font-weight: 500;
}*/
/*修正*/
.hero__tagline {
/*中央position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    z-index: 10;
    text-align: center;
    font-size: 3rem;
    color: var(--color-navy);
    line-height: 1.7;
    font-family: "Klee One", cursive;
    font-weight: 600;
    font-style: normal;
    text-shadow: 1px 1px 10px #ffffff, -1px 1px 10px #ffffff, 1px -1px 10px #ffffff, -1px -1px 10px #ffffff;
        letter-spacing: .2rem;
    display: block;
    
white-space: nowrap;*/
    margin-top: 5rem;
    font-size: 2.6rem;
color:var(--color-navy);
line-height:1.7;
/*font-family:"Klee One", cursive;
font-weight:600;*/
letter-spacing:.2rem;

text-shadow:
1px 1px 10px #fff,
-1px 1px 10px #fff,
1px -1px 10px #fff,
-1px -1px 10px #fff;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    
    opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: 0.6s;
}
/* 親が表示されたら */
.hero__left.is-active .hero__tagline{
  opacity: 1;
  transform: translateY(0);
}

/* Hero Right Content */
/*.hero__right {
    display: flex;
    justify-content: center;
    align-items: center;
}*/

/*修正*/
/*.hero__right {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.hero__right img{
    width: auto;
    height: 620px;
}
*/
.hero__image {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Decorative Circles */
.hero__decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    /*修正*/
    z-index:1;
}
/*
.hero__decoration--circle1 {
    width: 140px;
    height: 140px;
    background-color: var(--color-circle-pink);
    bottom: 10%;
    left: 5%;
    animation: floatBubble 6s ease-in-out infinite;
}

.hero__decoration--circle2 {
    width: 80px;
    height: 80px;
    background-color: var(--color-circle-blue);
    top: 30%;
    left: 8%;
    animation: floatBubble 6s ease-in-out infinite;
}

.hero__decoration--circle3 {
    width: 100px;
    height: 100px;
    background-color: var(--color-circle-blue);
    bottom: 20%;
    left: 25%;
    animation: floatBubble 6s ease-in-out infinite;
}

.hero__decoration--circle4 {
    width: 120px;
    height: 120px;
    background-color: var(--color-circle-light);
    top: 50%;
    left: 35%;
    animation: floatBubble 6s ease-in-out infinite;
}

.hero__decoration--circle5 {
    width: 60px;
    height: 60px;
    background-color: var(--color-circle-pink);
    bottom: 15%;
    right: 15%;
    animation: floatBubble 6s ease-in-out infinite;
}
*/
/*
.hero__decorations{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:1;
}
.bubble{
position:absolute;
pointer-events:none;
}*/
/*
.bubble--1{
top:270px;
left:-280px;
width:220px;
    animation: float 9s ease-in-out infinite;
animation-delay:0s;
    opacity:.6;
    
}

.bubble--2{
    top:520px;
left:-40px;
width:200px;
    animation: float 7s ease-in-out infinite;
    animation-delay: 1s;
    opacity:.6;
}




.bubble--3{
    top:720px;
left:140px;
width:100px;
    animation: float 11s ease-in-out infinite;
    animation-delay: 2s;
    opacity:.4;
}

.bubble--4{
    top:820px;
left:-120px;
width:90px;
    animation: float 7s ease-in-out infinite;
    animation-delay: 3s;
    opacity:.4;
}


.bubble--5{
    top:610px;
left:-220px;
width:80px;
    animation: float 6s ease-in-out infinite;
animation-delay:2.5s;
    opacity:.4;
}

.bubble--7{
top:900px;
left:280px;
width:60px;
    animation: float 8s ease-in-out infinite;
animation-delay:1s;
    opacity:.4;
}

.bubble--8{
top:930px;
left:40px;
width:80px;
    animation: float 9s ease-in-out infinite;
animation-delay:3s;
    opacity:.4;
}




.bubble--9{
bottom:860px;
right:100px;
width:80px;
    animation: float 10s ease-in-out infinite;
animation-delay:1.5s;
    opacity:.4;
}

.bubble--10{
top:900px;
right:20px;
width:100px;
    animation: float 11s ease-in-out infinite;
animation-delay:2.5s;
    opacity:.4;
}

.bubble--11{
top:1000px;
right:200px;
width:60px;
    animation: float 7s ease-in-out infinite;
animation-delay:1s;
    opacity:.4;
}

.bubble--12{
top:calc(100% + 420px);
right:-80px;
width:50px;
    animation: float 12s ease-in-out infinite;
animation-delay:3s;
    opacity:.4;
}
*/
/* ----------------------------
装飾レイヤー
---------------------------- */

.hero__decorations{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:1;
}

.bubbles__left {
  position: absolute;
  top: 10rem;
  left: -5rem;
  width: 50%;
  height: 100%;
  pointer-events: none;
}

.bubbles__right {
  position: absolute;
  top: 5rem;
  right: -5rem;
  width: 50%;
  height: 100%;
  pointer-events: none;
}
/* ----------------------------
丸
---------------------------- */
/* 丸共通 */

.bubble{
position:absolute;
animation: float 9s ease-in-out infinite;
z-index:1;
}


/* 吹き出し */

.bubble--1{
top:260px;
left:-240px;
width:220px;
opacity:.6;
animation-delay:0s;
}

.bubble--2{
top:480px;
left:-60px;
width:220px;
opacity:.6;
animation-delay:1s;
}


/* 左の小丸 */

.bubble--3{
top:720px;
left:120px;
width:100px;
opacity:.4;
animation-delay:2s;
}

.bubble--4{
top:760px;
left:-140px;
width:100px;
opacity:.4;
animation-delay:3s;
}

.bubble--5{
top:600px;
left:-280px;
width:80px;
opacity:.4;
animation-delay:2.5s;
}


/* 中央 */

.bubble--7{
top:820px;
left:320px;
width:60px;
opacity:.4;
animation-delay:1s;
}

.bubble--8{
top:900px;
left:180px;
width:80px;
opacity:.4;
animation-delay:3s;
}


/* 右エリア */

/* 右上（人物の横） */
/* 右上（人物横） */
/* 右上 */

.bubble--9{
top:860px;
right:-40px;
width:80px;
opacity:.4;
animation-delay:1.5s;
}

.bubble--10{
top:940px;
right:-160px;
width:100px;
opacity:.4;
animation-delay:2.5s;
}

.bubble--11{
top:1080px;
right:40px;
width:70px;
opacity:.35;
animation-delay:3s;
}

.bubble--12{
top:1000px;
right:-280px;
width:70px;
opacity:.3;
animation-delay:3s;
}
/* ----------------------------
背景ぼかし
---------------------------- */
.blur{
position:absolute;
border-radius:50%;
filter: blur(80px);
opacity:.30;
pointer-events:none;
z-index:0;
}

/* 左上 */
/*
.blur--1{
width:420px;
height:420px;
background:#a1d7e1;
top:1200px;
left:-430px;
}*/

/* 左中央（メイン水色） */
.blur--2{
width:460px;
height:460px;
background:#a1d7e1;
top:520px;
left:-540px;
}

/* 右中央（水色） */
.blur--3{
width:420px;
height:420px;
background:#a1d7e1;
top:700px;
right:120px;
}

/* 下（水） */
.blur--4{
width:420px;
height:420px;
background:#a1d7e1;
top:1000px;
right:-540px;
}

/* ========== MISSION SECTION ========== */
    
  .mission__bubbles{
    display: none;
  }    
.mission {
    /*background-color: var(--color-light-bg);
    padding: 4rem 1rem;
    position: relative;
    overflow: hidden;*/
       background-color: var(--color-white);
    padding: 6rem 0 3rem;
    position: relative;

}

.mission__content {
    /*max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;*/
    
     text-align:center;
}

/* Mission Statement */
.mission__statement {
    /*margin-bottom: 3rem;
    text-align: center;*/
     position: absolute;
    right: 0;
    top: 180px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
        z-index: 2;
}

/*追加画像*/
.mission__visual{
    position:relative;
    width:1100px;
    height:420px; 
    margin:0 auto;
}
.mission__image-large{
    position:absolute;
    left:160px;
    top:0;
    width:520px;
}

.mission__image-large img{
    width:100%;
    border-radius:10px;
}
.mission__image-small{
    position:absolute;
    left:0;
    bottom:-40px;
    width:240px;
}

.mission__image-small img{
    width:100%;
    border-radius:10px;
}

.mission__highlight-box {
    /*background-color: #e8f7f5;
    border: 2px solid var(--color-primary);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    display: inline-block;
    margin-bottom: 1rem;*/
      background: #ffffff;
    padding: 5px 16px;
    margin-bottom: 8px;
    display: inline-block;
    box-shadow: 0 0 20px rgb(190 190 190 / 40%);
    
}

.mission__highlight-text {
   /* font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);*/
    font-size: 2rem;
    font-weight: 400;
    color: #009d70;
    letter-spacing: .15rem;
        line-height: 1.8;
}
.mission__highlight-box--accent .mission__highlight-text{
    color:#18a59b;
}
/*
.mission__text {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0.5rem 0;
}

.mission__text--accent {
    color: var(--color-primary);
    font-size: 1.4rem;
}*/

/* Mission Images */
.mission__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.mission__image-item {
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.mission__image {
    width: 100%;
    height: auto;
    display: block;
}

/* Mission Decorative Circles */
.mission__decoration {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.mission__decoration--circle1 {
    width: 120px;
    height: 120px;
    background-color: var(--color-circle-pink);
    top: 20%;
    right: 5%;
    opacity: 0.6;
}

.mission__decoration--circle2 {
    width: 90px;
    height: 90px;
    background-color: var(--color-circle-blue);
    bottom: 25%;
    left: 8%;
}

.mission__decoration--circle3 {
    width: 70px;
    height: 70px;
    background-color: var(--color-circle-light);
    bottom: 10%;
    right: 20%;
}

.mission__decoration--circle4 {
    width: 100px;
    height: 100px;
    background-color: var(--color-circle-pink);
    top: 60%;
    right: 10%;
    opacity: 0.5;
}

/* ========== CAMPUS VISIT SECTION ========== */
.campus-visit {
    background-color: var(--color-white);
    padding: 4rem 1rem;
position: relative;
    overflow: hidden;
}

/* 下半分に空の写真 */
.campus-visit::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url("../images/sora.jpeg"); /* MVで使っている空の写真に変更 */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    z-index: 0;
    opacity: .4;
}
/* 写真の上にグラデーションをかぶせる */

.campus-visit::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 70%,
        rgba(255, 255, 255, 1) 100% 
    );
    z-index: 1;
    pointer-events: none;
}
.campus-visit__content {
  max-width: 1000px;
    margin: 0 auto;
    padding: 3.5rem;
    box-shadow: 0 0 20px rgb(190 190 190 / 40%);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    position: relative;
    z-index: 1;
}

.campus-visit__title {
    font-size: 2.4rem;
    font-weight: 400;
        color: var(--color-primary);
    text-align: center;
    margin-bottom: 2rem;
}

.campus-visit__description {
    font-size: 1.2rem;
    color: var(--color-text);
    text-align: center;
    margin-bottom: 2.5rem;
    line-height: 1.8;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Campus Visit Border Box */
.campus-visit__details {
            padding: 0 0 2rem;
        margin-bottom: 2.5rem;
        width: fit-content;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    gap:2rem;
}

/* Event Dates */
.campus-visit__dates {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
}

.campus-visit__detail-label {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.campus-visit__detail-label::before {
    content: '■';
    color: var(--color-text);
}
  
/* 日付の整列（核心） */
.date-item{
  /*display: grid;
  grid-template-columns: 2ch auto 2ch auto;
  column-gap: 0.2em;
  align-items: baseline;

  font-variant-numeric: tabular-nums;*/
    display: grid;
  grid-template-columns: 2ch auto 2ch auto;
  column-gap: 0.2em;
  align-items: baseline;
  font-variant-numeric: tabular-nums;

  /* ↓ここ追加 */
  background: #f8f8f8;
  padding: 0.6rem 2rem;
  border-radius: 6px;
/*
 box-shadow: 0 0 10px rgb(0 0 0 / 10%);*/
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* 見た目調整（任意） */
.date-unit{
}
.campus-visit__date-list {
    /*list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;*/
   list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem 1rem;
        padding: 0;
        font-size: 1.3rem;
        font-weight: 600;
}
    .date-day,.date-month{
        text-align: right;
    }
.campus-visit__date-item {
    font-size: 1.6rem;
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.5;
}

/* Venue */
.campus-visit__venue {
            display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
}

.campus-visit__venue-text {
    font-size: 1.2rem;
    color: var(--color-text);
    font-weight: 500;
    flex: 1;
}

.campus-visit__venue-info {
    font-size: 1.2rem;
    color: var(--color-text);
}

.campus-visit__venue-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.3rem;
}

.campus-visit__venue-label {
    min-width: 5.5em;
    line-height: 1.5;
}

.campus-visit__venue-value {
    flex: 1;
    line-height: 1.5;
}    
    
    
/* Call-to-Action Button */
.campus-visit__cta {
    align-items: center;
    gap: 7px;
    background: #1e3a5f;
    color: #fff;
    padding: 1rem 2.6rem;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: .1rem;
    border: none;
    cursor: pointer;
    margin: 0 auto;
    display: flex;
    width: fit-content;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(30, 58, 95, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.2s, box-shadow 0.25s;
}
.campus-visit__cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}
.campus-visit__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(30, 58, 95, 0.42);
}
.campus-visit__cta:hover::after {
    left: 125%;
    transition: left 0.55s ease;
}


/* ========== ST (SPEECH-LANGUAGE PATHOLOGIST) SECTION ========== */
.st-section {
    background-color: var(--color-light-bg);
    padding: 4rem 1rem;
    position: relative;
}

/* ST Subsection */
.st-subsection {
    max-width: 1140px;
    margin: 0 auto 4rem;
    position: relative;
}

.st-subsection--second {
    margin-bottom: 3rem;
}

.st-subsection__header {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 1.25rem 2rem;
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    border-radius: 6px;
    position: relative;
    margin-bottom: 0;
}

/* Header Triangle Pointer */
.st-subsection__header::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid var(--color-primary);
    z-index: 2;
}

.st-subsection__content1 {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 2.5rem;
    align-items: start;
    padding: 5rem;
    background-color: var(--color-white);
    border-radius: 0 0 4px 4px;
    position: relative;
    z-index: 1;
    margin-top: 15px;
}
.st-subsection__content2 {
    display:grid;
grid-template-columns:1fr 380px;
grid-template-rows:auto auto;
gap: 5rem 2.5rem;

padding:2.5rem;
background:#fff;
border-radius:4px;
position:relative;
z-index:1;
margin-top:15px;
}

/* Image Wrapper */
.st-subsection__image-wrapper {
    overflow: hidden;
    /*border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);*/
}

.st-subsection__image {
    width: 100%;
    height: auto;
    display: block;
}

/* Text Content */
.st-subsection__text {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.st-subsection__paragraph {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--color-text);
}

/* Career Pathway */
/*
.st-pathway {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 2.5rem;
    background-color: var(--color-white);
    border-radius: 0 0 4px 4px;
    overflow-x: auto;
    position: relative;
    z-index: 1;
    margin-top: 0;
}

.st-pathway__item {
    flex-shrink: 0;
}

.st-pathway__item--first {
    order: 1;
}

.st-pathway__item--highlighted {
    order: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.st-pathway__box {
    background-color: #2ba5bd;
    color: var(--color-white);
    padding: 1.5rem 1.25rem;
    border-radius: 8px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    min-width: 120px;
}

.st-pathway__box--highlight {
    border: 3px dashed var(--color-primary);
    background-color: var(--color-white);
    color: var(--color-text);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    gap: 0.75rem;
}

.st-pathway__highlight-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
}

.st-pathway__box-content {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.st-pathway__box--final {
    background-color: #003d7a;
    min-width: 130px;
}

.st-pathway__arrow {
    font-size: 1.5rem;
    color: var(--color-text);
    font-weight: bold;
    flex-shrink: 0;
}*/
.st-pathway{
display:flex;
align-items:center;
justify-content:center;
gap:60px;

grid-column:1 / -1;

max-width:1100px;
margin: -40px auto 0;
font-size: 1.3rem;    
}

/* 3つのグループ */

.st-pathway__group{
display:flex;
align-items:center;
gap:40px;
position:relative;
}

/* 横ライン */

.st-pathway__group::before{
content: "";
    position: absolute;
    left: 0;
    right: -40px;
    top: 50%;
    height: 6px;
    background: #d6d6d6;
    transform: translateY(-50%);
    z-index: 0;
}

/* 矢印 */

.st-pathway__group::after{
content: "";
    position: absolute;
    right: -55px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 28px solid #d6d6d6;
}

/* アイテム */

.st-pathway__item{
position:relative;
z-index:1;
}

/* ボックス */

.st-pathway__box{
    background: #63b0c9;
    color: #fff;
    padding: 22px 28px;
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
    min-width: 200px;
    line-height: 1.3;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 最終 */

.st-pathway__box--final{
background:#487ebc;
min-width:320px;
}

/* 点線枠 */

.st-pathway__item--highlight{
position:relative;
}
/* 点線 */

.st-pathway__item--highlight::before{
    content: "";
    position: absolute;
    left: -20px;
    right: -20px;
    top: -100px;
    bottom: -20px;
    /*border: 2px dotted #2ba57f;*/
    /*background: #f3f3f3;*/
    border: 2px #ccc dotted;
    border-radius: 12px;
    z-index: -1;
}
/* 上ラベル */

.st-pathway__highlight-label{
position: absolute;
    top: -5rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-text);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}
/* ========== CALL-TO-ACTION SECTION ========== */
.cta {
    position: relative;
    /*height: 500px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cta__background {
    position:absolute;
top:0;
right:0;
width:50%;
height:100%;
z-index:1;
overflow:hidden;
}

.cta__background img{
width:100%;
height:100%;
object-fit:cover;
object-position:right top;
}

.cta__overlay {
   /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 2;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:linear-gradient(
to right,
rgba(255,255,255,1) 50%,
rgba(255,255,255,0.85) 60%,
rgba(255,255,255,0.7) 70%,
rgba(255,255,255,0.6) 85%,
rgba(255,255,255,0.5) 100%
);
     z-index: 3;
}

.cta__content {
        position: relative;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding: 6rem 0;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.cta__heading-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
}

.cta__subheading {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
    letter-spacing: 0.05em;
}

.cta__university-name {
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
}

.cta__main-title {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.02em;
}

.cta__buttons {
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.cta__button {
    /*padding: 2rem 4rem;
    line-height: 1;
    border-radius: 80px;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: .1rem;
    color: var(--color-white);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: none;
    cursor: pointer;
    min-width: 250px;*/
    
    padding: 2rem 4rem;
    line-height: 1;
  border-radius: 80px;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .1rem;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  gap: 15px;
  min-width: 250px;
  justify-content: center;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.25s;
}
.cta__arrow {
  width: .6em;
  height: .6em;
  object-fit: contain;
  vertical-align: middle;
  opacity: 0.9;
}

/* キラン演出 */
.cta__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}
.cta__button:hover {
  transform: translateY(-2px);
}
.cta__button:hover::after {
  left: 125%;
  transition: left 0.55s ease;
}
.cta__button--yellow {
    background: #F9B534;
background: linear-gradient(90deg,rgba(249, 181, 52, 1) 0%, rgba(244, 169, 73, 1) 100%);
    border: solid 8px #fdeccd;
}

.cta__button--yellow:hover {
    background-color: #e8a600;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(244, 180, 0, 0.4);
}

.cta__button--pink {
    background: #F38DD5;
background: linear-gradient(90deg,rgba(243, 141, 213, 1) 0%, rgba(223, 128, 196, 1) 100%);
    border: solid 8px #fdddf4;
}

.cta__button--pink:hover {
    background-color: #d4479a;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(233, 95, 169, 0.4);
}

.cta__button--green {
    background: #009d70;
  box-shadow: 0 5px 20px rgba(0, 157, 112, 0.38),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cta__button--green:hover {
  box-shadow: 0 8px 26px rgba(0, 157, 112, 0.45);
}

.cta__button--navy {
  background: #1e3a5f;
  box-shadow: 0 5px 20px rgba(30, 58, 95, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.cta__button--navy:hover {
  box-shadow: 0 8px 26px rgba(30, 58, 95, 0.42);
}


/* ========== FEATURES SECTION ========== */
/*
.features {
    background-color: #e8f5f3;
    padding: 4rem 1rem;
    position: relative;
}

.features__content {
    max-width: 1200px;
    margin: 0 auto;
}

.features__header {
    text-align: center;
    margin-bottom: 3rem;
}

.features__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.features__highlight {
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;
}

.features__divider {
    width: 1px;
    height: 40px;
    background-color: var(--color-text);
    margin: 1rem auto;
    opacity: 0.4;
}

.feature {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
}

.feature--even {
    grid-template-columns: auto 1fr auto;
}

.feature--even .feature__number {
    order: 3;
}

.feature--even .feature__content {
    order: 2;
}

.feature--even .feature__image {
    order: 1;
}

.feature--even .feature__chart {
    order: 1;
}

.feature__number {
    font-size: 5rem;
    font-weight: 700;
    color: #7fbfb7;
    opacity: 0.4;
    line-height: 1;
    min-width: 120px;
    text-align: center;
}

.feature__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    order: 2;
}

.feature__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.4;
}

.feature__description {
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.8;
}

.feature__image {
    flex-shrink: 0;
    order: 3;
    max-width: 350px;
    width: 100%;
}

.feature__img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.feature__chart {
    flex-shrink: 0;
    order: 3;
    width: 100%;
    max-width: 350px;
    background-color: var(--color-white);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.feature__chart-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: center;
}

.feature__pie-chart {
    width: 160px;
    height: 160px;
}

.feature__chart-legend {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.feature__legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text);
}

.feature__legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    flex-shrink: 0;
}

.feature__chart-note {
    font-size: 0.75rem;
    color: #999;
    text-align: center;
    font-weight: 500;
}*/



/* ========== FEATURES SECTION ========== */
.features{
/*background:#e8f5f3;*/
padding:100px 20px;
    overflow: hidden;
  background: #f4f7f6;
     position: relative;
  width: 100%;
    z-index: 0;
}
.features:before {
 content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 20% 30%, rgba(173, 216, 230, 0.36), transparent 60%), 
    radial-gradient(circle at 70% 20%, rgba(190, 230, 170, 0.28), transparent 60%), /* ←ここ調整 */
    radial-gradient(circle at 60% 70%, rgba(200, 230, 210, 0.35), transparent 60%),
    radial-gradient(circle at 30% 80%, rgba(220, 240, 230, 0.35), transparent 60%);

  filter: blur(90px);
  z-index: -1;
}    
    
.features__content{
max-width:1200px;
margin:0 auto;
}

/* header */

.features__header{
text-align:center;
margin-bottom:80px;
}

.features__title{
font-size:3.2rem;
    color: var(--color-blue);
line-height:1.6;
     font-family: "Noto Serif JP", serif;
  font-weight: 600;
}
.features__num{
font-size:4rem;
font-weight:700;
margin: 0 .5rem 0 0;    
}
.features__highlight{
font-size:3.2rem;
color:var(--color-blue);
display:block;
}

.features__divider{
width:2px;
height:60px;
background:var(--color-blue);
opacity:.4;
margin:20px auto 0;
}

/* feature layout */

.feature{
display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 120px;
    position: relative;
}

/* 偶数だけ反転 */

.feature--even{
flex-direction:row-reverse;
}

/* number */
/*
.feature__number{
top:-70px;
left:-40px;
font-size:120px;
font-weight:700;
color:#7fbfb7;
opacity:.35;
line-height:1;
z-index:0;
}*/
.feature__number{
/*position: absolute;
    top: -110px;
    left: 60px;
    z-index: 1;
    transform: translateX(-50%);*/
    position: absolute;
  top: -110px;
  left: 60px;
  z-index: 1;
  transform: translateX(-50%);

  opacity: 0;
  transition: opacity 0.6s ease;
    transition-delay: 0.2s; 
}
/* 右から左から動いた後 */
.feature.is-active .feature__number{
 opacity: 1;
  transform: translateX(-50%) scale(1);
}
.feature__number img{
width:120px;
height:auto;
/*opacity:.35;*/
}
/* 偶数位置 */
/*
.feature--even .feature__number{
left:auto;
right:-40px;
}*/

/* image */

.feature__image{
width:540px;
flex-shrink:0;
z-index:2;
position:relative;     
}

.feature__image img{
width:100%;
/*border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.12);*/
}

/* text */

.feature__content{
flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    margin: 60px 0 0;
   
}

.feature__title{
font-size: 2.3rem;
font-weight: 500; 
    line-height: 1.6;    
color:var(--color-primary);
}

.feature__description{
    line-height: 2.5;
    font-size: 1rem;
}


/* ========== RESULTS SECTION ========== */
.results {
    background-color: var(--color-light-bg);
    padding: 0;
    position: relative;
}

/* Achievement Metrics */
.results__metrics {
    background-color: var(--color-primary);
    padding: 5rem 0;
    color: var(--color-white);
}

.results__metrics .results__title {
        color: var(--color-white);
    max-width: 1200px;
    margin: 0 auto 4rem;
    border-bottom: solid 2px;
    padding: 0 0 2rem;
    text-align: center;
    font-size: 2rem;
}
/*
.results__divider {
    width: 100%;
    max-width: 500px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 1.5rem auto 2.5rem;
}*/

.results__metrics-container {
    max-width: 1200px;
max-width:1200px;
margin:0 auto;
display:grid;

/*grid-template-columns: auto auto 1fr;*/
    grid-template-columns: 250px 250px 520px;
    

column-gap:20px;
align-items:center;
    justify-content:center;
}
/*
.results__metric-item {
    display: flex;
    justify-content: center;
}*/
.results__info-area{
margin-left:40px;
}

.results__chart {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 250px;
    height: 250px;
}

.results__donut {
width:250px;
height:250px;
transform:rotate(-90deg); /* ここがポイント */
}

/* 動く円 */
.donut-ring{
stroke-dasharray:314;
stroke-dashoffset:314;
/*animation:donutFill 1.6s ease forwards;*/
}

/* 全国平均 */

.results__chart--national .donut-ring{
/*animation-delay:.2s;
animation-name:donut72;*/
}

/* 系列校 */

.results__chart--affiliated .donut-ring{
/*animation-delay:.6s;
animation-name:donut91;*/
}

.results__metric-text {
    position: absolute;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.results__metric-label {
    font-size: 1.3rem;
    font-weight: 600;
}

.results__metric-value {
    font-size: 1.5rem;
    font-weight: 700;
}
/* 91.3（大きい） */
.results__metric-value--large{
font-size:2.6rem;
line-height: 1;    
}

/* 72.9（小さい） */
.results__metric-value--small{
font-size:2.2rem;
line-height: 1.1;    
}

/* %だけ小さく */
.results__metric-value .percent{
font-size:.5em;
margin-left:2px;
}
.results__info-area{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px 20px;
        max-width: 520px;
}

/* 上の2つ */

.results__info-item{
background:#fff;
padding:14px 18px;
border-radius:6px;
text-align:center;
}

.results__info-label{
font-size:14px;
margin-bottom:4px;
}

.results__info-value{
font-size:20px;
font-weight:700;
color:#ff4d4d;
}

/* 下の説明 */

.results__info-text-box{
grid-column:1 / 3;
border-radius:6px;
font-size: 1rem;
line-height:1.8;
}
/* Info Box */
.results__info-box {
    background-color: var(--color-white);
    color: var(--color-text);
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.results__info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.results__info-label {
        font-size: 1.6rem;
    font-weight: 600;
    color: var(--color-primary);
}

.results__info-value {
    font-size: 2.4rem;
    font-weight: 700;
    color: #f47928;
}

.results__info-divider {
    height: 1px;
    background-color: #eee;
}

.results__info-text {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* Employment Results */
.results__employment {
    background-color: var(--color-light-bg);
    padding: 5rem 0;
}

.results__employment .results__title {
        color: var(--color-primary);
    max-width: 1200px;
    margin: 0 auto 4rem;
    border-bottom: solid 2px;
    padding: 0 0 2rem;
    text-align: center;
    font-size: 2rem;
}

.results__employment .results__divider {
    background-color: var(--color-primary);
    opacity: 0.3;
}

.results__facilities-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 8px;
    border: solid 10px #e6f4ef;
}

.results__facility-section {
    margin-bottom: 3rem;
}

.results__facility-section:last-child {
    margin-bottom: 0;
}

.results__facility-group-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.results__facility-columns {
}

.results__facility-list {
  list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5rem .5rem;
        padding: 0;
}

.results__facility-list li {
break-inside: avoid;
        /* margin-bottom: 0.5rem; */
        font-size: 1rem;
        color: var(--color-text);
        display: flex;
        align-items: center;
        gap: 0.5rem;
}

.results__bullet {
     color: var(--color-primary);
    font-weight: bold;
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* ===============================
FOOTER
=============================== */

.footer{
        background: #f3f3f3;
    padding: 3rem 0 2rem;
    text-align: center;
}

.footer__content{
    max-width:1200px;
    margin:0 auto;
}

.footer__contact{
   margin-bottom: 2rem;
}

.footer__contact{
       display: inline-block;
    padding: .8rem 4rem;
    background: #e8e8e8;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: 1rem;
}

.footer__title{
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: .05em;
}

.footer__info p{
    font-size: 1rem;
    line-height: 1.8;
}

.footer__info a{
    color:#333;
}

.footer__copy{
    margin-top:50px;
    font-size: .9rem;
    color:#666;
}
    
/***動き***/
/* 下から */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: 0.8s ease;
}
.fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}  
 /* 左から */
.fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: 0.8s ease;
}
.fade-left.is-active {
  opacity: 1;
  transform: translateX(0);
}    
/* 右から */
.fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: 0.8s ease;
}
.fade-right.is-active {
  opacity: 1;
  transform: translateX(0);
}    
/* 発火後 */
.is-active {
  opacity: 1;
  transform: translateX(0);
}  
}

@keyframes floatBubble {

  0%{
    transform: translateY(0px);
  }

  50%{
    transform: translateY(-15px);
  }

  100%{
    transform: translateY(0px);
  }

}

@keyframes float{

0%{
transform:translateY(0) translateX(0);
}

50%{
transform:translateY(-20px) translateX(6px);
}

100%{
transform:translateY(0) translateX(0);
}

}


/* 円グラフアニメーション */
/* 72.9% */

@keyframes donut72{
to{
stroke-dashoffset:85.1;
}
}

/* 91.3% */

@keyframes donut91{
to{
stroke-dashoffset:27.3;
}
}

/* ========== RESPONSIVE DESIGN - Mobile (up to 750px) ========== */
@media (max-width: 750px) {
html {
  font-size: 100%;
}
    :root {
   --font-base: 0.9375rem;  /* 15px */
  --font-small: 0.875rem;  /* 14px */
        --font-medium: 1.125rem;     /* 18px */
  --font-large: 1.25rem;   /* 20px */
        --font-xl: 1.5rem;       /* 24px */
  --font-xxl: 1.75rem;     /* 28px */
    /* ここから上を強化 */
  --font-3xl: 2rem;        /* 32px */
  --font-4xl: 2.5rem;      /* 40px */
  --font-5xl: 3rem;        /* 48px */
  --font-6xl: 3.5rem;      /* 56px */

  /* ヒーロー専用 */
  --font-hero: 3rem;       /* 48px（ここ自由） */   

        
}
 .pc { display: none  !important; }
  .sp { display: block !important; }
body {
    font-family: 
       "Noto Sans JP",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Hiragino Sans",
"Hiragino Kaku Gothic ProN",
sans-serif
        ;
    /*line-height: 1.6;*/
    color: #333;
    background-color: #fff;
    font-size: var(--font-base);
    line-height: 1.8;
    letter-spacing: .085rem;
    overflow-x:hidden;
}

/* =========================
   共通
========================= */

/* =========================
   共通リセット
========================= */
html, body{
    overflow-x:hidden;
}
    
.hero__decorations,
.bubbles__left,
.bubbles__right{
    display:none;
}
    .hero__header{
    width:auto;
}

.mission__visual{
    width:100%;
}
img{
    width:100%;
    height:auto;
}

*{
    max-width:100%;
}

/* =========================
   HERO全体
========================= */
.hero{
  position: relative;
        padding: 1rem 1rem 1rem;
        /* height: auto; */
        height: 80vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
}

/* =========================
   ロゴ（PC上書き）
========================= */
.hero__header{
    position:static;
    transform:none;
    width:auto;

    margin-bottom:20px;
    text-align:center;
}

.hero__header img{
    width:160px;
}

/* =========================
   PCのgrid解除（重要）
========================= */
.hero__content{
  max-width: none;
        margin: 0;
        position: relative;
        z-index: 1;
        height: fit-content;
        display: flex;
        align-items: flex-end;
}

/* =========================
   テキスト
========================= */
.hero__left{
               display: flex;
        flex-direction: column;
        gap: .5rem;
        z-index: 2;
        text-align: left;
        margin: 0 .5rem;
}

.hero__subtitle {
    font-size: var(--font-xl);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.3;
}

.hero__highlight-box {
      background-color: rgb(255 255 255 / 80%);
        padding: .8rem .5rem 1rem;
        border-radius: 8px;
        box-shadow: 0 0 20px rgb(190 190 190 / 40%);
        width: fit-content;
        /* width: 100%; */
        /* margin: 0 auto; */
        text-align: center;
}

.hero__main-title {
    font-size: var(--font-3xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.hero__description {
    font-size: var(--font-small);
    font-weight: 400;
    line-height: 1;
      text-shadow:
  1px 1px 2px rgba(255,255,255,0.8),
 -1px 1px 2px rgba(255,255,255,0.8),
  1px -1px 2px rgba(255,255,255,0.8),
 -1px -1px 2px rgba(255,255,255,0.8),
  0 0 6px rgba(255,255,255,0.6);
}

.hero__department {
    font-size: var(--font-small);
    color: var(--color-text);
    line-height: 1.3;
    text-shadow:
  1px 1px 2px rgba(255,255,255,0.8),
 -1px 1px 2px rgba(255,255,255,0.8),
  1px -1px 2px rgba(255,255,255,0.8),
 -1px -1px 2px rgba(255,255,255,0.8),
  0 0 6px rgba(255,255,255,0.6);
}

.hero__opening-date {
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--color-accent-red);
    line-height: 1.3;
}

/* =========================
   背景画像（ロゴ下から開始）
========================= */
.hero::after{
               content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80vh;
        background-image: url(../images/mv.jpg?v1);
        background-size: cover;
        background-position: 70% bottom;
        z-index: -1;
}

/* =========================
   コピー（画像上に配置）
========================= */
.hero__tagline{
   /* position:absolute;

    right:15px;
    top:50vh;

    z-index:2;

    font-size:18px;
    line-height:1.6;
    text-align:center;

    text-shadow:
    0 0 10px #fff,
    0 0 20px #fff;*/
    
    
    margin: 2rem 0 0;
        font-size: var(--font-large);
        color: var(--color-navy);
        line-height: 1.5;
        letter-spacing: .07rem;
        text-shadow: 1px 1px 10px #fff, -1px 1px 10px #fff, 1px -1px 10px #fff, -1px -1px 10px #fff;
        font-family: "Noto Serif JP", serif;
        font-weight: 600;
    
     opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: 0.6s;
    
}
   /* 親が表示されたら */
.hero__left.is-active .hero__tagline{
  opacity: 1;
  transform: translateY(0);
} 



/* =========================
   MISSION
========================= */
.mission{
    background-color: var(--color-white);
        padding: 7rem 1rem 4rem;
        position: relative;
}
  /*.mission::before{
    content: "";
    position: absolute;
    top: 120px; 
    right: -80px;

    width: 260px;
    height: 260px;

    background: #a1d7e1;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;

    z-index: 0;
  }
      .mission::after{
    content: "";
    position: absolute;
    top: 220px;
    right: 40px;
    width: 120px;
    height: 120px;
    background: #a1d7e1;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.25;
    z-index: 0;
  }*/
/* =========================
   ビジュアルエリア（PCリセット）
========================= */
    .mission > *{
  position: relative;
}
      .mission__bubbles{
    position: absolute;
  inset: 0; 
  pointer-events: none;
  z-index: 0;
  }

  .bubble--m1{
            position: absolute;
        top: 75px;
        right: -20px;
        width: 90px;
        opacity: 0.4;
  }

  .bubble--m2{
                    position: absolute;
        /* top: 220px; */
        /* right: 40px; */
        /* width: 80px; */
        /* opacity: 0.3; */
        top: 10px;
        right: 50px;
        width: 120px;
        opacity: 0.8;
    }
     .bubble--m3{
  position: absolute;
        top: 100px;
        left: 30px;
        width: 24px;
        opacity: 0.5;
        z-index: 999;
  }
         .bubble--m4{
                position: absolute;
        top: 60px;
        left: 100px;
        width: 24px;
        opacity: 0.5;
  }
    .blur{
        z-index: 0;
}
      .blur--2{
position: absolute;
        width: 260px;
        height: 260px;
        background: #a1d7e1;
        border-radius: 50%;
        filter: blur(60px);
        top: 0;
        left: -120px;
        opacity: 0.3;
        z-index: 0;
  }
         .blur--3{
        position: absolute;
        width: 160px;
        height: 160px;
        background: #a1d7e1;
        border-radius: 50%;
        filter: blur(60px);
        bottom: 20px;
        right: -120px;
        opacity: 0.3;
        z-index: 0;
  }
.mission__visual{
    position:relative;
    width:100%;
    margin:0 auto;
}

/* PCのabsolute解除 */
.mission__image-large,
.mission__image-small{
    position:static;
    width:100%;
}

/* =========================
   画像①（上）
========================= */
.mission__image-large{
    border-radius:12px;
    overflow:hidden;
    width: 80%;
}

/* =========================
   画像②（重なり）
========================= */
.mission__image-small{
    margin-top: -90px;
        width: 50%;
    margin-left:auto;

    border-radius:12px;
    overflow:hidden;

    position:relative;
    z-index:2;
}

/* =========================
   テキスト
========================= */
.mission__statement{
   /* margin-top:30px;
    text-align:center;
    left: 0;
            gap: 0;*/
    
    position: absolute;
        left: 0;
        top: 220px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        z-index: 2;
}
        .mission__highlight-text {
        font-size: 1rem;
        font-weight: 400;
        color: #009d70;
        letter-spacing: .08rem;
        line-height: 1.6;
    }

/* ハイライトボックス */
.mission__highlight-box{
 
    
            background: #ffffff;
        padding: 5px 16px;
        display: inline-block;
        box-shadow: 0 0 20px rgb(190 190 190 / 40%);
}

/* テキスト */
.mission__text{
    font-size:16px;
    line-height:1.8;
}

.mission__text--accent{
    font-size:17px;
}

/* =========================
   装飾削除
========================= */
.mission__decoration--circle1,
.mission__decoration--circle2,
.mission__decoration--circle3,
.mission__decoration--circle4{
    display:none;
}
 
/* ========== CAMPUS VISIT SECTION ========== */
.campus-visit {
    background-color: var(--color-white);
    padding: 2rem 1rem;
position: relative;
    overflow: hidden;
}

/* 下半分に空の写真 */
.campus-visit::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-image: url("../images/sora.jpeg"); /* MVで使っている空の写真に変更 */
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    z-index: 0;
    opacity: .4;
}
/* 写真の上にグラデーションをかぶせる */

.campus-visit::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.2) 70%,
        rgba(255, 255, 255, 1) 100% 
    );
    z-index: 1;
    pointer-events: none;
}
.campus-visit__content {
  width: 100%;
    margin: 0 auto;
    padding: 1.5rem;
    box-shadow: 0 0 20px rgb(190 190 190 / 40%);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    position: relative;
    z-index: 1;
}

.campus-visit__title {
    font-size: var(--font-xl);
    font-weight: 400;
        color: var(--color-primary);
    text-align: center;
            margin: 0 0 1rem;
    line-height: 1.5;
}

.campus-visit__description {
            font-size: var(--font-base);
    color: var(--color-text);
    text-align: center;
    margin: 0 0 1.5rem;
    line-height: 1.8;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Campus Visit Border Box */
.campus-visit__details {
    padding: 0 0 1rem;
    margin-bottom: 2.5rem;
    /*width: fit-content;*/
    width: 100%;
    margin: 0 auto;
    
    display: flex;
        flex-direction: column;
        gap: 1rem;
}

/* Event Dates */
.campus-visit__dates {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
}

.campus-visit__detail-label {
   font-size: var(--font-base);
        font-weight: 500;
        color: var(--color-text);
        /* margin: 0 0 .5rem; */
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
}

.campus-visit__detail-label::before {
    content: '■';
    color: var(--color-text);
}

.campus-visit__date-list {
padding: 0;
        width: 100%;
        display: grid;
        /* grid-template-columns: 1fr; */
        grid-template-columns: repeat(2, 1fr);
        gap: .3rem;
}
.date-item{
    display: grid;
        grid-template-columns: 2ch auto 2ch auto;
        column-gap: 0.1em;
        align-items: baseline;
        font-variant-numeric: tabular-nums;
        background: #f8f8f8;
        padding: .2rem .4rem;
        border-radius: 8px;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        font-size: var(--font-bese);
        color: var(--color-text);
        font-weight: 500;
        justify-content: center;
    white-space: nowrap;
}

/* 数字揃え */
.date-day,
.date-month{
    text-align: right;
}

/* 日付テキスト */
.campus-visit__date-item {
    font-size: var(--font-medium);
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.5;
}

/* Venue */
.campus-visit__venue {
            display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
}

.campus-visit__venue-text {
    font-size: 1.2rem;
    color: var(--color-text);
    font-weight: 500;
    flex: 1;
}

.campus-visit__venue-info {
            font-size: var(--font-base);
        color: var(--color-text);
}

.campus-visit__venue-row {
            display: flex;
        align-items: flex-start;
        margin-bottom: 0.3rem;
        flex-direction: column;
}

.campus-visit__venue-label {
    min-width: 5.5em;
    line-height: 1.5;
}

.campus-visit__venue-value {
    flex: 1;
    line-height: 1.5;
}  

/* Venue */
.campus-visit__venue {
    display: flex;
        gap: 0.3rem;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
}

.campus-visit__venue-text {
   font-size: var(--font-base);
    color: var(--color-text);
    font-weight: 500;
    flex: 1;
}

/* Call-to-Action Button */
.campus-visit__cta {
    align-items: center;
    gap: 7px;
    background: #1e3a5f;
    color: #fff;
    padding: 1rem 2.6rem;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: .1rem;
    border: none;
    cursor: pointer;
    margin: 0 auto;
    display: flex;
    width: fit-content;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(30, 58, 95, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.2s, box-shadow 0.25s;
}
.campus-visit__cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
}
.campus-visit__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 26px rgba(30, 58, 95, 0.42);
}
.campus-visit__cta:hover::after {
    left: 125%;
    transition: left 0.55s ease;
}

/* =========================
   CTAボタン
========================= */
/*
.campus-visit__cta{
    font-size: var(--font-base);
    padding: 0.9rem 1.8rem;
    margin-top: 1.5rem;
}*/
/* =========================
   CTA
========================= */
.campus-visit__cta{
    /*display:flex;
    justify-content:center;

    background:#1e3a5f; 
    color:#fff;

    padding:14px;
    border-radius:50px;

    font-size:1.4rem;

    width:100%;
    max-width:320px;
    margin:20px auto 0;*/
    
    padding: 1.5rem 2rem;
        line-height: 1;
        border-radius: 80px;
        text-decoration: none;
        font-size: var(--font-medium);
        font-weight: 400;
        letter-spacing: .1rem;
        color: var(--color-white);
        display: inline-flex;
        align-items: center;
        gap: 15px;
        width: 80%;
        justify-content: center;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.25s;
    width:100%;
}

/* =========================
   CTAボタン
========================= */
/*.campus-visit__cta{
    display:block;
    width:100%;

    font-size:15px;
    padding:14px;

    text-align:center;
}
*/
/* =========================
   ST
========================= */

.st-section{
   
    
            background-color: var(--color-light-bg);
         padding: 2.5rem 1rem;
        position: relative;
}

/* 見出し */
.st-subsection__header{
   background-color: var(--color-primary) !important; /* ←強制 */
    color: #fff;

    position: relative;
    z-index: 5; /* ←前に出す */

    font-size: var(--font-medium);
 padding: .8rem .6rem;
        line-height: 1.5;
}

/* 三角 */
.st-subsection__header::after{
   content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid var(--color-primary);
        z-index: 2;
        z-index: 5;
}

/* =========================
   コンテンツ（1カラム化）
========================= */

.st-subsection__content1,
.st-subsection__content2{
  grid-template-columns: 1fr;
        display: grid;
        grid-template-rows: auto auto;
        gap: 1rem;
        padding: 1.5rem;
        background: #fff;
        border-radius: 4px;
        position: relative;
        z-index: 1;
        margin-top: 1rem;
    }

/* テキスト */
.st-subsection__paragraph{
    font-size: var(--font-base);
    line-height: 1.7;
}

/* =========================
   パス（横 → 縦）
========================= */
    
  /* 全体 */
  .st-pathway{
    display: flex;
    flex-direction: column;
    align-items: stretch;

    margin: 1.5rem auto 0;
    width: 100%;
    font-size: var(--font-base);
  }

  /* グループ */
  .st-pathway__group{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem; /* ← 少し広げる */
    position: relative;
    width: 100%;
  }

  /* アイテム */
  .st-pathway__item{
    width: 100%;
    position: relative;
  }

  /* PC装飾削除 */
  .st-pathway__group::before,
  .st-pathway__group::after{
    display: none;
  }

  /* ▼ 矢印（復活） */
  .st-pathway__item::after{
    content: "";
    display: block;
    margin: 0.5rem auto .5rem;
    width: 0;
    height: 0;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid #d6d6d6;
  }


  /* ▼ ハイライトだけ余白追加（重要） */
  .st-pathway__item--highlight{
    margin-top: 2rem; /* ← これで被り防止 */
      position: relative;
  }


.st-pathway__item--highlight::after{
  /*content: "";
  position: absolute;

  left: 50%;
  bottom: -24px; 
  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #ccc;*/
}
  /* ボックス */
  .st-pathway__box{
    background: #63b0c9;
    color: #fff;

    width: 100%;
    max-width: none;

    padding: 1rem;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: var(--font-base);
    border-radius: 10px;
  }

  /* 最終ボックス */
  .st-pathway__box--final{
    background: #487ebc;
    width: 100%;
  }

  /* ハイライト */
  .st-pathway__item--highlight{
    margin-top: 2rem; /* ← これで被り防止 */
      position: relative;
  }    
  .st-pathway__item--highlight::before{
           content: "";
        position: absolute;
        left: -10px;
        right: -10px;
        top: -60px;
       bottom: -10px;
        /*background: #f3f3f3;*/
      border: 2px #ccc dotted;
        border-radius: 12px;
        z-index: -1;
  }
.st-pathway__item--highlight::after{
content: "";
  position: absolute;

  left: 50%;
  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #ccc;
}
  /* ラベル */
  .st-pathway__highlight-label{
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);

    font-size: var(--font-base);
    line-height: 1.3;
    text-align: center;

    white-space: normal;
    color: var(--color-text);
  }
    .st-pathway__item--final::after{
  display: none;
}
/*
.st-pathway{
   margin: 1.5rem auto 0;
        font-size: var(--font-base);
        width: 100%;
}

.st-pathway__group{
   display: flex;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
        position: relative;
}

.st-pathway__group::before{
    display: none;
}

.st-pathway__group::after{
    display: none;
}

.st-pathway__item::after{
    content: "↓";
    display: block;
    text-align: center;
    margin: 0.5rem 0;
    font-size: 1.2rem;
    color: #ccc;
}

.st-pathway__item:last-child::after{
    display: none;
}


.st-pathway__box{
    background: #0097c7; 
    color: #fff;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    font-weight: 500;
    width: 100%;
    height: auto;
    min-width: auto;
    font-size: var(--font-base);

    display: flex;
    align-items: center;
    justify-content: center;
}


.st-pathway__box--final{
    background: #1c4675;
    min-width: auto;
}


.st-pathway__item--highlight{
    position: relative;
}

.st-pathway__item--highlight::before{
    content: "";
    position: absolute;

    left: -10px;
    right: -10px;
    top: -60px;
    bottom: -10px;

    background: #f3f3f3; 
    border-radius: 12px;

    z-index: -1;
}

.st-pathway__highlight-label{
    position: absolute;
    top: -3rem;
    left: 50%;
    transform: translateX(-50%);

    font-size: var(--font-base);
    line-height: 1.3;
    text-align: center;

    white-space: normal;
    color: var(--color-text);
}
*/
/* =========================
   CTA
========================= */
.cta {
    position: relative;
    /*height: 500px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cta__background {
    position:absolute;
top:0;
right:0;
width:50%;
height:100%;
z-index:1;
overflow:hidden;
}

.cta__background img{
width:100%;
height:100%;
object-fit:cover;
object-position:center top;
}

.cta__overlay {
   /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 2;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:linear-gradient(
to right,
rgba(255,255,255,1) 50%,
rgba(255,255,255,0.85) 60%,
rgba(255,255,255,0.7) 70%,
rgba(255,255,255,0.6) 85%,
rgba(255,255,255,0.5) 100%
);
     z-index: 3;
}

.cta__content {
        position: relative;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 0;
    width: 100%;
    margin: 0 auto;
}

.cta__heading-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.3;
}

.cta__subheading {
   font-size: var(--font-large);
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: 0.05em;
    line-height: 1;
}
.cta__subheading span{
   font-size: var(--font-small);
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: 0.05em;
    line-height: 1;
}
.cta__university-name {
    font-size: var(--font-large);
    font-weight: 500;
    color: var(--color-text);
    line-height: 1;
    margin: 0 0 .5rem 0;
}

.cta__main-title {
    font-size: var(--font-3xl);
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.02em;
}

.cta__buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.cta__button {
    /*padding: 2rem 4rem;
    line-height: 1;
    border-radius: 80px;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: .1rem;
    color: var(--color-white);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: none;
    cursor: pointer;
    min-width: 250px;*/
    
    padding: 1.5rem 2rem;
    line-height: 1;
  border-radius: 80px;
  text-decoration: none;
  font-size: var(--font-medium);
  font-weight: 400;
  letter-spacing: .1rem;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  gap: 15px;
  width: 80%;
  justify-content: center;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.25s;
}
.cta__arrow {
  width: .6em;
  height: .6em;
  object-fit: contain;
  vertical-align: middle;
  opacity: 0.9;
}

/* キラン演出 */
.cta__button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
}
.cta__button:hover {
  transform: translateY(-2px);
}
.cta__button:hover::after {
  left: 125%;
  transition: left 0.55s ease;
}
.cta__button--yellow {
    background: #F9B534;
background: linear-gradient(90deg,rgba(249, 181, 52, 1) 0%, rgba(244, 169, 73, 1) 100%);
    border: solid 8px #fdeccd;
}

.cta__button--yellow:hover {
    background-color: #e8a600;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(244, 180, 0, 0.4);
}

.cta__button--pink {
    background: #F38DD5;
background: linear-gradient(90deg,rgba(243, 141, 213, 1) 0%, rgba(223, 128, 196, 1) 100%);
    border: solid 8px #fdddf4;
}

.cta__button--pink:hover {
    background-color: #d4479a;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(233, 95, 169, 0.4);
}

.cta__button--green {
    background: #009d70;
  box-shadow: 0 5px 20px rgba(0, 157, 112, 0.38),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cta__button--green:hover {
  box-shadow: 0 8px 26px rgba(0, 157, 112, 0.45);
}

.cta__button--navy {
  background: #1e3a5f;
  box-shadow: 0 5px 20px rgba(30, 58, 95, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.cta__button--navy:hover {
  box-shadow: 0 8px 26px rgba(30, 58, 95, 0.42);
}

/* =========================
   FEATURES
========================= */

.features{
    padding: 3rem 1.5rem;
    background: #f4f7f6;
        position: relative;
        width: 100%;
        z-index: 0;
}
.features:before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 20% 30%, rgba(173, 216, 230, 0.36), transparent 60%), 
    radial-gradient(circle at 70% 20%, rgba(190, 230, 170, 0.28), transparent 60%),
    radial-gradient(circle at 60% 70%, rgba(200, 230, 210, 0.35), transparent 60%),
    radial-gradient(circle at 30% 80%, rgba(220, 240, 230, 0.35), transparent 60%);

  filter: blur(90px);
  z-index: -1;
}
/* header */

.features__header{
    margin-bottom: 1rem;
}

.features__title{
font-size: var(--font-large);
        color: var(--color-blue);
        line-height: 1.5;
        font-family: "Noto Serif JP", serif;
        font-weight: 600;
    text-align: center;
}

.features__num{
    font-size: var(--font-4xl);
    font-weight: 700;
        margin: 0 .5rem 0 0;
}

.features__highlight{
    font-size: 1.8rem;
            color: var(--color-blue);
        display: block;
            line-height: 1;
}

.features__divider{
    height: 30px;
    width: 1px;
        background: var(--color-blue);
        margin: 1rem auto 0;
}

/* =========================
   各feature
========================= */

.feature{
    margin-bottom: 2rem;
}

/* evenも解除（重要） */
.feature--even{
    flex-direction: column;
}

/* =========================
   画像
========================= */

.feature__image{
    width: 100%;
}

/* =========================
   番号（画像）
========================= */

/* PCのabsolute解除 */
.feature__number{
    /*position: static;
    transform: none;
    margin-top: -10px;
    text-align: center;*/
    position: static;
    margin-top: -10px;
    text-align: center;

    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0.2s;
}
    /* 右から左から動いた後 */
  .feature.is-active .feature__number{
    opacity: 1;
    transform: translateY(0);
  }
/* サイズ調整 */
.feature__number img{
    width: 80px;
    opacity: 0.3;
    margin: 0 auto;
}

/* =========================
   テキスト
========================= */

.feature__content{
          display: flex;
        flex-direction: column;
        gap: .5rem;
        position: relative;
        margin: -1rem 0 0;
}

/* タイトル */
.feature__title{
    font-size: var(--font-large);
    line-height: 1.6;
        font-weight: 500;
        color: var(--color-primary);
            text-align: center;
}

/* 説明文 */
.feature__description{
    font-size: var(--font-base);
    line-height: 1.9;
}
/* =========================
   RESULTS
========================= */
.results {
    background-color: var(--color-light-bg);
    padding: 0;
    position: relative;
}

/* Achievement Metrics */
.results__metrics {
 background-color: var(--color-primary);
        padding: 2rem 1rem 3rem;
        color: var(--color-white);
}

.results__metrics .results__title {
  color: var(--color-white);
        width: 100%;
        margin: 0 auto 2rem;
        border-bottom: solid 2px;
        padding: 0 0 1rem;
        text-align: center;
        font-size: var(--font-large);
        line-height: 1.4;
}
/*
.results__divider {
    width: 100%;
    max-width: 500px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 1.5rem auto 2.5rem;
}*/

.results__metrics-container {
 /*width:100%;
margin:0 auto;
display:grid;
  
    grid-template-columns: 1fr;
    row-gap: 20px;
column-gap:20px;
align-items:center;
    justify-content:center;*/
    
    display: grid;
    grid-template-columns: 1fr 1fr; /* ← 円を横並び */
    gap: 1rem;
    justify-items: center;
    padding: 0 0.5rem;
    
  
}

.results__metric-item {
   display: flex;
    justify-content: center;
}
.results__info-area{
margin-left:40px;
}

.results__chart {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 150px;
    height: 150px;
}

.results__donut {
width:150px;
height:150px;
transform:rotate(-90deg); /* ここがポイント */
}

/* 動く円 */
.donut-ring{
stroke-dasharray:314;
stroke-dashoffset:314;
/*animation:donutFill 1.6s ease forwards;*/
}

/* 全国平均 */

.results__chart--national .donut-ring{
/*animation-delay:.2s;
animation-name:donut72;*/
}

/* 系列校 */

.results__chart--affiliated .donut-ring{
/*animation-delay:.6s;
animation-name:donut91;*/
}

.results__metric-text {
    position: absolute;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.results__metric-label {
    font-size: var(--font-base);
    font-weight: 600;
}

.results__metric-value {
    font-size: 1.5rem;
    font-weight: 700;
}
/* 91.3（大きい） */
.results__metric-value--large{
font-size: var(--font-3xl);
line-height: 1;    
}

/* 72.9（小さい） */
.results__metric-value--small{
font-size: var(--font-xl);
line-height: 1.1;    
}

/* %だけ小さく */
.results__metric-value .percent{
font-size:.5em;
margin-left:2px;
}
.results__info-area{
    /*width: 85%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;*/
    
    grid-column: 1 / -1; /* ← 下に回す */
   width: 100%;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    
}

/* 上の2つ */

.results__info-item{
background:#fff;
padding:.5rem;
border-radius:6px;
text-align:center;
}
/*
.results__info-label{
font-size:14px;
margin-bottom:4px;
}*/

.results__info-value{
font-size:20px;
font-weight:700;
color:#ff4d4d;
}

/* 下の説明 */

.results__info-text-box{
grid-column: 1 / -1;
border-radius:6px;
font-size: var(--font-base);
line-height:1.8;
    
    
}
/* Info Box */
.results__info-box {
    background-color: var(--color-white);
    color: var(--color-text);
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.results__info-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.results__info-label {
     font-size: var(--font-base);
    font-weight: 600;
    color: var(--color-primary);
}

.results__info-value {
    font-size: var(--font-3xl);
    font-weight: 700;
    color: #f47928;
}

.results__info-divider {
    height: 1px;
    background-color: #eee;
}

.results__info-text {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* Employment Results */
.results__employment {
    background-color: var(--color-light-bg);
    padding: 2rem 1rem 3rem;
}

.results__employment .results__title {
        color: var(--color-primary);
   width: 100%;
        margin: 0 auto 2rem;
        border-bottom: solid 2px;
        padding: 0 0 1rem;
        text-align: center;
        font-size: var(--font-large);
        line-height: 1.4;
}

.results__employment .results__divider {
    background-color: var(--color-primary);
    opacity: 0.3;
}

.results__facilities-container {
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    border: solid 10px #e6f4ef;
}

.results__facility-section {
    margin-bottom: 2rem;
}

.results__facility-section:last-child {
    margin-bottom: 0;
}

.results__facility-group-title {
    font-size: var(--font-base);
    font-weight: 500;
    color: var(--color-primary);
    margin-bottom: .5rem;
}

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

.results__facility-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0 0 .5rem;
    padding: 0;
}

.results__facility-list li {
    font-size: var(--font-base);
    color: var(--color-text);
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.5;
}

.results__bullet {
    flex: 0 0 1em;
    text-align: center;
    font-size: 0.7rem;
    color: var(--color-primary);
    font-weight: bold;
    line-height: 1.3rem;
}
    
    /* =========================
   FOOTER（SP上書き）
========================= */

.footer{
        background: #f3f3f3;
    padding: 2rem 0 1rem;
    text-align: center;
}

.footer__content{
    width:100%;
    margin:0 auto;
}

.footer__contact{
   margin-bottom: 2rem;
}

.footer__contact{
       display: inline-block;
    padding: .8rem 4rem;
    background: #e8e8e8;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    font-size: var(--font-base);
}

.footer__title{
    font-size: var(--font-large);
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: .05em;
}

.footer__info p{
    font-size: var(--font-base);
    line-height: 1.8;
}

.footer__info a{
    color:#333;
}

.footer__copy{
    margin-top: 2rem;
    font-size: var(--font-small);
    color:#666;
}
    
/***動き***/
/* 下から */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: 0.8s ease;
}
.fade-up.is-active {
  opacity: 1;
  transform: translateY(0);
}  
 /* 左から */
.fade-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: 0.8s ease;
}
.fade-left.is-active {
  opacity: 1;
  transform: translateX(0);
}    
/* 右から */
.fade-right {
  opacity: 0;
  transform: translateX(30px);
  transition: 0.8s ease;
}
.fade-right.is-active {
  opacity: 1;
  transform: translateX(0);
}    
/* 発火後 */
.is-active {
  opacity: 1;
  transform: translateX(0);
}  
}