/* =========================================================
   page-info.css
   学校説明会・学校施設見学会 専用CSS
========================================================= */

/* =========================================================
   Page Base
========================================================= */

#main-body{
    max-width:1200px;
    margin:0 auto 80px;
    padding:0 20px;
}

/* =========================================================
   Hero
========================================================= */

.exam-header{

    position:relative;

    margin:30px 0 45px;

    padding:70px 60px;

    border-radius:18px;

    overflow:hidden;

    background:
        linear-gradient(135deg,#2e1a47 0%,#4c3681 60%,#6b58b5 100%);

    color:#fff;

    box-shadow:
        0 14px 36px rgba(0,0,0,.16);

}

.exam-header::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(255,255,255,.16),
        transparent 55%);

}

.exam-header__inner{

    position:relative;

    z-index:2;

    max-width:760px;

}

.exam-header__sub{

    display:inline-block;

    margin-bottom:14px;

    font-size:.95rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    opacity:.9;

}

.exam-header h1{

    margin:0;

    font-size:clamp(2.4rem,4vw,3.6rem);

    line-height:1.2;

    font-weight:700;

}

.exam-header__lead{

    margin-top:26px;

    font-size:1.05rem;

    line-height:2;

    opacity:.96;

}

/* =========================================================
   Notice
========================================================= */

.exam-notice{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin:0 0 50px;

    padding:24px 28px;

    background:#fff5f7;

    border-left:6px solid #d73b66;

    border-radius:12px;

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

}

.exam-notice__icon{

    font-size:2rem;

    line-height:1;

}

.exam-notice__text{

    line-height:1.9;

}

.exam-notice strong{

    display:block;

    margin-bottom:8px;

    font-size:1.1rem;

    color:#b41e4c;

}

/*==========================================
  Latest News
==========================================*/

.exam-news-list{

    margin:16px 0 0;

    padding:0;

    list-style:none;

}

.exam-news-list li{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:12px 0;

    border-top:1px solid rgba(0,0,0,.06);

    line-height:1.8;

}

.exam-news-list li:first-child{

    border-top:none;

    padding-top:0;

}

.news-date{

    min-width:110px;

    font-weight:700;

    color:#d73b66;

    flex-shrink:0;

}

@media (max-width:768px){

    .exam-news-list li{

        display:block;

    }

    .news-date{

        display:block;

        margin-bottom:6px;

    }

}

/* =========================================================
   Section Card
========================================================= */

.exam-card{

    background:#fff;

    border-radius:18px;

    padding:50px;

    margin-bottom:42px;

    box-shadow:
        0 10px 28px rgba(0,0,0,.08);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.exam-card:hover{

    transform:translateY(-4px);

    box-shadow:
        0 16px 36px rgba(0,0,0,.14);

}

/* =========================================================
   Section Title
========================================================= */

.exam-card .section-title{

    display:flex;

    align-items:center;

    gap:18px;

    margin:0 0 26px;

    padding:0;

    border:none;

    text-align:left;

}

.section-title__icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.45rem;

    background:
        linear-gradient(135deg,#5d46a3,#2e1a47);

    color:#fff;

    box-shadow:
        0 6px 18px rgba(46,26,71,.28);

}

.exam-card .section-title h2{

    margin:0;

    font-size:2rem;

    color:#2e1a47;

    font-weight:700;

}

.section-lead{

    margin:0 0 34px;

    color:#555;

    line-height:2;

    font-size:1.04rem;

    margin-bottom:42px;

}

/* =========================================================
   Information Grid
========================================================= */

.exam-info-grid{

    display:grid;

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

    gap:24px;

    margin-top:24px;

}

.info-box{

    position:relative;

    background:#fff;

    border:1px solid #ece8f6;

    border-radius:16px;

    padding:28px;

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

.info-box::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:100%;

    background:linear-gradient(#6b58b5,#2e1a47);

}

.info-box:hover{

    transform:translateY(-3px);

    border-color:#d7d0ef;

    box-shadow:
        0 12px 28px rgba(0,0,0,.10);

}

.info-box h3{

    margin:0 0 18px;

    font-size:1.18rem;

    color:#2e1a47;

    font-weight:700;

}

.info-box p{

    margin:0;

    line-height:2;

    color:#555;

}

/* =========================================================
   Application
========================================================= */

.application-area{

    display:grid;

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

    gap:24px;

    margin-top:35px;

}

.application-box{

    background:#faf9fd;

    border:1px solid #ebe6f6;

    border-radius:16px;

    padding:30px;

    text-align:center;

    transition:
        transform .25s,
        box-shadow .25s;

}

.application-box:hover{

    transform:translateY(-5px);

    box-shadow:
        0 12px 26px rgba(0,0,0,.08);

}

.application-box h3{

    margin:0 0 16px;

    color:#2e1a47;

    font-size:1.2rem;

}

.application-box p{

    line-height:1.9;

    color:#555;

}

/* =========================================================
   Button
========================================================= */

.btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:20px;

    padding:15px 34px;

    border-radius:999px;

    background:
        linear-gradient(135deg,#5d46a3,#2e1a47);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    letter-spacing:.04em;

    transition:
        transform .25s,
        box-shadow .25s;

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 12px 24px rgba(46,26,71,.25);

}

/* =========================================================
   QR
========================================================= */

.qr-placeholder{

    width:180px;

    height:180px;

    margin:20px auto;

    border-radius:12px;

    border:2px dashed #c9bddf;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#777;

    background:#fff;

}

.small-text{

    margin-top:16px;

    font-size:.9rem;

    color:#777;

}

/* =========================================================
   Utility
========================================================= */

.exam-card p:last-child{

    margin-bottom:0;

}

.exam-card a{

    transition:.25s;

}

/* =========================================================
   Schedule Table
========================================================= */

.schedule-table{

    width:100%;

    border-collapse:separate;

    border-spacing:0;

    overflow:hidden;

    border-radius:16px;

    box-shadow:0 8px 24px rgba(0,0,0,.08);

    background:#fff;

}

.schedule-table thead th{

    background:linear-gradient(135deg,#2e1a47,#5d46a3);

    color:#fff;

    padding:18px;

    font-size:1rem;

    letter-spacing:.05em;

    text-align:center;

}

.schedule-table tbody td{

    padding:22px 20px;

    border-bottom:1px solid #ececec;

    vertical-align:top;

    line-height:1.9;

}

.schedule-table tbody tr:nth-child(even){

    background:#faf9fd;

}

.schedule-table tbody tr:hover{

    background:#f3effc;

}

.schedule-table td:first-child{

    width:180px;

    text-align:center;

    font-weight:700;

    font-size:1.05rem;

    color:#2e1a47;

}

/* =========================================================
   Document List
========================================================= */

.document-list{

    display:grid;

    gap:22px;

    margin-top:35px;

}

.document-card{

    display:flex;

    align-items:center;

    gap:22px;

    padding:24px 28px;

    background:#fff;

    border:1px solid #ece8f6;

    border-radius:16px;

    text-decoration:none;

    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s;

}

.document-card:hover{

    transform:translateY(-5px);

    border-color:#d2c8eb;

    box-shadow:0 14px 30px rgba(0,0,0,.10);

}

/* =========================================================
   PDF Icon
========================================================= */

.document-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#5d46a3,#2e1a47);

    color:#fff;

    font-size:1.8rem;

    flex-shrink:0;

}

.document-body{

    flex:1;

}

.document-body h3{

    margin:0 0 8px;

    color:#2e1a47;

    font-size:1.2rem;

}

.document-body p{

    margin:0;

    color:#777;

}

/* =========================================================
   Arrow
========================================================= */

.document-arrow{

    font-size:1.8rem;

    color:#5d46a3;

    transition:
        transform .25s;

}

.document-card:hover .document-arrow{

    transform:translateX(8px);

}

/* =========================================================
   PDF Label
========================================================= */

.document-body span{

    display:inline-block;

    margin-top:8px;

    padding:4px 10px;

    border-radius:20px;

    background:#f2effb;

    color:#5d46a3;

    font-size:.82rem;

    font-weight:700;

}

/* =========================================================
   Download Hover
========================================================= */

.document-card:active{

    transform:scale(.98);

}

/* =========================================================
   Facility Tour
========================================================= */

.contact-card{

    background:linear-gradient(135deg,#faf9fd,#ffffff);

    border:1px solid #ece8f6;

    border-radius:16px;

    padding:36px;

    text-align:center;

}

.contact-card h3{

    margin:0 0 18px;

    font-size:1.6rem;

    color:#2e1a47;

}

.contact-card p{

    margin:10px 0;

    line-height:1.9;

}

/* =========================================================
   FAQ
========================================================= */

.faq-list{

    display:grid;

    gap:18px;

}

.faq-item{

    background:#faf9fd;

    border-left:5px solid #5d46a3;

    border-radius:12px;

    padding:22px 26px;

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}

.faq-item:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 24px rgba(0,0,0,.08);

}

.faq-item h3{

    margin:0 0 12px;

    color:#2e1a47;

    font-size:1.1rem;

}

.faq-item p{

    margin:0;

    line-height:1.9;

    color:#555;

}

/* =========================================================
   Mobile
========================================================= */

@media (max-width:900px){

#main-body{

    padding:0 18px;

}

.exam-header{

    margin:18px 0 35px;

    padding:45px 24px;

    border-radius:14px;

}

.exam-header__sub{

    font-size:.82rem;

}

.exam-header h1{

    font-size:clamp(2rem,8vw,2.7rem);

    line-height:1.25;

}

.exam-header__lead{

    margin-top:18px;

    font-size:.95rem;

    line-height:1.8;

}

.exam-notice{

    padding:20px;

    gap:14px;

}

.exam-notice__icon{

    font-size:1.6rem;

}

.exam-card{

    padding:28px 22px;

    border-radius:14px;

}

.exam-card .section-title{

    gap:12px;

    margin-bottom:20px;

}

.section-title__icon{

    width:46px;

    height:46px;

    font-size:1.2rem;

}

.exam-card .section-title h2{

    font-size:1.5rem;

}

.exam-info-grid{

    grid-template-columns:1fr;

}

.application-area{

    grid-template-columns:1fr;

}

.schedule-table{

    display:block;

    overflow-x:auto;

    white-space:nowrap;

}

.document-card{

    gap:16px;

    padding:18px;

}

.document-icon{

    width:58px;

    height:58px;

    font-size:1.4rem;

}

.document-body h3{

    font-size:1rem;

}

.document-arrow{

    font-size:1.4rem;

}

.contact-card{

    padding:28px 20px;

}

}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width:480px){

.exam-header{

    padding:38px 18px;

}

.exam-header h1{

    font-size:1.8rem;

}

.exam-card{

    padding:22px 18px;

}

.info-box{

    padding:22px;

}

.application-box{

    padding:22px;

}

.qr-placeholder{

    width:150px;

    height:150px;

}

.schedule-table thead th,

.schedule-table tbody td{

    padding:14px;

}

}

/* =========================================================
   Smooth Animation
========================================================= */

.exam-card,
.info-box,
.application-box,
.document-card,
.faq-item{

    animation:fadeUp .5s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.exam-header{

    background:
        linear-gradient(rgba(46,26,71,.82),rgba(93,70,163,.82)),
        url("../img/open-campus.jpg") center/cover;

}

/* ==========================================
   Coming Soon
========================================== */

.coming-card{

    display:flex;

    align-items:center;

    gap:28px;

    margin-top:30px;

    padding:32px;

    background:linear-gradient(135deg,#faf9fd,#f3effc);

    border:1px solid #e3dcf3;

    border-radius:16px;

}

.coming-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    background:linear-gradient(135deg,#5d46a3,#2e1a47);

    color:#fff;

    flex-shrink:0;

}

.coming-body{

    flex:1;

}

.coming-body h3{

    margin:0 0 12px;

    color:#2e1a47;

    font-size:1.4rem;

}

.coming-body p{

    margin:0;

    line-height:2;

}

.coming-badge{

    display:inline-block;

    margin-top:18px;

    padding:8px 18px;

    border-radius:999px;

    background:#2e1a47;

    color:#fff;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.05em;

}

@media (max-width:900px){

    .coming-card{

        flex-direction:column;

        text-align:center;

        gap:20px;

        padding:24px;

    }

}

/*==========================================
  Event Cards
==========================================*/

.event-grid{

    display:grid;

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

    gap:28px;

    margin-top:35px;

}

.event-card{

    display:flex;

    align-items:center;

    gap:24px;

    padding:28px;

    background:#fff;

    border:1px solid #e6e1f2;

    border-radius:18px;

    transition:.25s;

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

}

.event-card:hover{

    transform:translateY(-4px);

    box-shadow:0 14px 28px rgba(0,0,0,.10);

}

.event-month{

    width:82px;

    height:82px;

    border-radius:50%;

    background:linear-gradient(135deg,#5d46a3,#2e1a47);

    color:#fff;

    font-size:1.35rem;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}

.event-main{

    flex:1;

}

.event-main h3{

    margin:0 0 10px;

    color:#2e1a47;

    font-size:1.3rem;

}

.event-main p{

    margin:0;

    line-height:1.9;

    color:#666;

}

.event-status{

    display:inline-block;

    margin-top:18px;

    padding:7px 18px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:700;

}

.event-status.open{

    background:#e8f8ed;

    color:#0b7a35;

}

.event-status.soon{

    background:#efeafd;

    color:#5d46a3;

}

/* 今受付中を少し強調 */

.current{

    border:2px solid #5d46a3;

}

/*==========================================
  Mobile
==========================================*/

@media (max-width:900px){

    .event-grid{

        grid-template-columns:1fr;

    }

}