/* =========================================================
   卒業生ページ
   page-alumni.css
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.alumni-page{
  width:100%;
  padding-bottom:6rem;
}


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

.alumni-hero{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      #edf3f8 0%,
      #f7f9fb 55%,
      #ffffff 100%
    );

  border-bottom:1px solid #e2e8ee;
}


.alumni-hero::after{
  content:"";

  position:absolute;
  width:420px;
  height:420px;

  right:-180px;
  top:-180px;

  border-radius:50%;

  background:#dfe9f1;

  opacity:.55;
}


.alumni-hero-inner{
  position:relative;
  z-index:1;

  max-width:1000px;

  margin:0 auto;

  padding:
    76px 30px
    70px;
}


.alumni-label{
  margin:0 0 18px;

  font-size:.78rem;
  font-weight:700;

  letter-spacing:.18em;

  color:#62788a;
}


.alumni-hero h1{
  margin:0;

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

  line-height:1.25;

  letter-spacing:.04em;

  color:#243746;
}


.alumni-lead{
  margin:24px 0 0;

  max-width:720px;

  font-size:1rem;
  line-height:2;

  color:#536573;
}


/* =========================================================
   CONTENT
   ========================================================= */

.alumni-content{
  max-width:1000px;

  margin:0 auto;

  padding:
    70px 30px
    0;
}


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

.alumni-section{
  margin-bottom:76px;
}


.alumni-section-last{
  margin-bottom:0;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.alumni-section-heading{
  display:flex;
  align-items:flex-start;

  gap:20px;

  margin-bottom:28px;
}


.alumni-number{
  flex:none;

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

  width:48px;
  height:48px;

  border-radius:50%;

  background:#e8eef3;

  color:#536d7e;

  font-size:.78rem;
  font-weight:700;

  letter-spacing:.08em;
}


.alumni-section-en{
  margin:1px 0 5px;

  font-size:.7rem;
  font-weight:700;

  letter-spacing:.16em;

  color:#7b8d9a;
}


.alumni-section-heading h2{
  margin:0;

  font-size:1.55rem;

  line-height:1.4;

  color:#273b49;
}


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

.alumni-card{
  border:1px solid #e2e8ed;

  border-radius:16px;

  background:#fff;

  box-shadow:
    0 8px 24px rgba(40,60,75,.055);

  overflow:hidden;
}


.alumni-card-body{
  padding:32px 34px;
}


.alumni-card-title{
  margin:0 0 12px;

  font-size:1.08rem;
  font-weight:700;

  color:#2d4352;
}


.alumni-card-text{
  margin:0;

  font-size:.95rem;
  line-height:1.9;

  color:#5b6c77;
}


/* =========================================================
   PRIMARY LINK
   ========================================================= */

.alumni-link{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-top:25px;

  padding:17px 20px;

  border-radius:10px;

  text-decoration:none;

  transition:
    background-color .2s ease,
    transform .2s ease;
}


.alumni-link-primary{
  background:#eef3f7;

  color:#304858;
}


.alumni-link:hover{
  background:#e4ecf2;

  transform:translateY(-1px);
}


.alumni-arrow{
  flex:none;

  font-size:1.1rem;
  line-height:1;

  transition:transform .2s ease;
}


.alumni-link:hover .alumni-arrow,
.alumni-document:hover .alumni-arrow{
  transform:translateX(3px);
}


/* =========================================================
   DOCUMENT LIST
   ========================================================= */

.alumni-document-list{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;

  margin-top:25px;
}


.alumni-document{
  display:flex;
  align-items:center;

  min-width:0;

  gap:14px;

  padding:17px 18px;

  border:1px solid #e1e7eb;

  border-radius:10px;

  background:#fafbfc;

  color:#304858;

  text-decoration:none;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.alumni-document:hover{
  background:#f1f5f8;

  border-color:#cfdbe3;

  transform:translateY(-1px);
}


/* =========================================================
   PDF ICON
   ========================================================= */

.document-icon{
  flex:none;

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

  width:42px;
  height:42px;

  border-radius:8px;

  background:#e9eef2;

  color:#607583;

  font-size:.63rem;
  font-weight:800;

  letter-spacing:.04em;
}


.document-info{
  display:flex;
  flex-direction:column;

  min-width:0;

  gap:3px;
}


.document-info strong{
  font-size:.92rem;
  font-weight:700;

  line-height:1.45;
}


.document-info small{
  font-size:.75rem;

  line-height:1.4;

  color:#778792;
}


/* =========================================================
   NOTE
   ========================================================= */

.alumni-note{
  margin:16px 0 0;

  font-size:.75rem;

  line-height:1.7;

  color:#778792;
}


/* =========================================================
   NOTICE
   ========================================================= */

.alumni-notice{
  display:grid;

  grid-template-columns:170px minmax(0,1fr);

  border:1px solid #e2e8ed;

  border-radius:16px;

  overflow:hidden;

  background:#fff;

  box-shadow:
    0 8px 24px rgba(40,60,75,.055);
}


.alumni-notice-label{
  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding:34px 20px;

  background:#f1f5f8;
}


.alumni-notice-label span{
  font-size:.72rem;
  font-weight:700;

  letter-spacing:.16em;

  color:#657a89;
}


.alumni-notice-content{
  padding:30px 34px;
}


.alumni-notice-content > p:first-child{
  margin:0;

  font-size:.95rem;

  line-height:1.8;

  color:#526571;
}


.alumni-notice-image-note{
  margin:8px 0 20px;

  font-size:.78rem;

  color:#7b8b95;
}


.alumni-notice-image{
  display:block;

  max-width:720px;

  margin:0 auto;

  text-align:center;
}


.alumni-notice-image img{
  display:block;

  width:100%;
  height:auto;

  border:1px solid #e1e6ea;

  border-radius:8px;

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.alumni-notice-image:hover img{
  opacity:.88;

  transform:scale(1.01);
}


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

.sp-only{
  display:none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:899px){

  .alumni-hero-inner{
    padding:
      60px 24px
      56px;
  }


  .alumni-content{
    padding:
      55px 24px
      0;
  }


  .alumni-section{
    margin-bottom:62px;
  }


  .alumni-document-list{
    grid-template-columns:1fr;
  }


  .alumni-notice{
    grid-template-columns:1fr;
  }


  .alumni-notice-label{
    justify-content:flex-start;

    padding:18px 24px;
  }


  .alumni-notice-content{
    padding:26px 24px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:600px){

  .alumni-page{
    padding-bottom:4rem;
  }


  .alumni-hero-inner{
    padding:
      48px 20px
      44px;
  }


  .alumni-label{
    margin-bottom:12px;

    font-size:.68rem;
  }


  .alumni-hero h1{
    font-size:2.15rem;
  }


  .alumni-lead{
    margin-top:18px;

    font-size:.9rem;

    line-height:1.9;
  }


  .sp-only{
    display:block;
  }


  .alumni-content{
    padding:
      42px 20px
      0;
  }


  .alumni-section{
    margin-bottom:52px;
  }


  .alumni-section-heading{
    gap:13px;

    margin-bottom:20px;
  }


  .alumni-number{
    width:38px;
    height:38px;

    font-size:.68rem;
  }


  .alumni-section-en{
    margin-top:0;

    font-size:.62rem;
  }


  .alumni-section-heading h2{
    font-size:1.25rem;
  }


  .alumni-card-body{
    padding:23px 20px;
  }


  .alumni-card-title{
    font-size:1rem;
  }


  .alumni-card-text{
    font-size:.88rem;

    line-height:1.85;
  }


  .alumni-link{
    margin-top:20px;

    padding:15px 16px;

    font-size:.86rem;
  }


  .alumni-document{
    gap:11px;

    padding:14px;
  }


  .document-icon{
    width:38px;
    height:38px;
  }


  .document-info strong{
    font-size:.84rem;
  }


  .document-info small{
    font-size:.7rem;
  }


  .alumni-notice-content{
    padding:22px 18px;
  }


  .alumni-notice-content > p:first-child{
    font-size:.86rem;
  }


  .alumni-notice-image-note{
    font-size:.72rem;
  }

}