*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    width:100%;

    font-family:sans-serif;
    color:#ddd;

    background-color: black;

    margin:0;
    font-family:sans-serif;

    background-image:url("/~gakusei/gakusai/47th/img/backimage.jpg");
    background-repeat:repeat-y;
    background-position:center top;
    background-size:100% auto;

}


/*-----------------*/
/* header */
/*-----------------*/

/*-----------------*/
/* header */
/*-----------------*/

header{

    width:100%;
    position: sticky;   /* 上部に固定 */
    top: 0;
    z-index: 1000;

    height: 90px;

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

    padding: 0 60px;

    background-color:black;  /* 背景を付ける */
    border-bottom: 1px solid #ddd;

}



.logo img{

    width:80px;
    height:auto;

}


nav ul{

    display:flex;

    list-style:none;

    gap:40px;

}

nav a{

    text-decoration:none;

    color:#ddd;

    font-size:18px;

}


/*-----------------*/
/* Main */
/*-----------------*/

.midashi {
    width: 80%;
    margin: 20px auto;
    text-align: center;
}

.midashi h1 {
    font-size:50px;
    line-height: 1.4;
    margin: 0;
}

.mainvisual{

    width:100%;

    height:auto;

    

}

.mainvisual img{

    width: 80%;
    display: block;
    margin: 0 auto;

    border: 3px solid #ddd;

}


/*-----------------*/
/* section */
/*-----------------*/

section{

    width:80%;

    margin:80px auto;

}

h2{

    margin-bottom:25px;

    font-size: 50px;

    color: #FFFEF9;

    text-shadow:
        0 0 5px black,
        0 0 10px black,
        0 0 20px black;

}


/*-----------------*/
/* news */
/*-----------------*/

.news-scroll{

    display:flex;

    overflow-x:auto;

    gap:30px;
    
    justify-content:center;

    flex-wrap: wrap;



}

.card{

    min-width:250px;

    border:1px solid #ccc;

    padding:25px;

    border-radius:15px;

}

.card h3{

    text-align:center;

}

.card a{
    display:block;
    color:#ddd;
    text-decoration:none;
}

.card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 18px 42px
    rgba(112, 54, 6, 0.15);
}



/*-----------------*/
/* button */
/*-----------------*/

button{

    display:block;

    margin:30px auto;

    padding:15px 40px;

    border:none;

    background-color:#333;

    color:#ddd;

    border-radius:30px;

    cursor:pointer;

}

/*-----------------*/
/* 案内*/
/*-----------------*/

.tokushuu-grid {
    display: grid;

    /* 1段に4個 */
    grid-template-columns: repeat(4, 1fr);

    /* 写真同士の間隔 */
    gap: 30px;

    /* コンテンツ全体の幅 */
    width: 85%;
    max-width: 1200px;

    /* 全体を中央寄せ */
    margin: 0 auto;
}

.tokushuu-box {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;
}

.tokushuu-box img{
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

}

.tokushuu-box:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 18px 42px
    rgba(112, 54, 6, 0.15);
}



/*-----------------*/
/* 案内*/
/*-----------------*/

.annnai-grid{

    display: grid;

    /* 1段に4個 */
    grid-template-columns: repeat(4, 1fr);

    /* 写真同士の間隔 */
    gap: 30px;

    /* コンテンツ全体の幅 */
    width: 85%;
    max-width: 1200px;

    /* 全体を中央寄せ */
    margin: 0 auto;

}

.annnai-box {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;
}

.annnai-box img{
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;


    filter:
        drop-shadow(0 5px 10px #cccc)
        drop-shadow(0 0 15px #cccc);;
}

.annnai-text {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    color: #ddd;
    font-size: 25px;
    font-weight: bold;

    -webkit-text-stroke: 0.3px black;
    text-shadow: 0 0 8px black;

    text-align: center;
    white-space: nowrap;

    
}

.tyuuigaki{
    width: 80%;
    margin: 20px auto;
    text-align: center;
}

.tyuuigaki  P{
    
    font-size: 14px;
    color: #ddd;
    text-align: center;
}









/*-----------------*/
/* events */
/*-----------------*/

.event-list{

    display:flex;

    justify-content:space-between;

    gap:30px;

}

.event{

    flex:1;

    border:3px solid #ddd;

    border-radius:20px;

    overflow:hidden;

}

.event img{

    width:100%;

    height:250px;

    object-fit:cover;

    border-bottom:3px solid #ddd;

}

.event h3{

    padding:15px;
    text-align:center;

}

.event p{

    padding:0 15px 20px;

}

.event:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 18px 42px
    rgba(112, 54, 6, 0.15);
}




.button-area{
    text-align: center;
    margin: 60px 0;
}

.event a{
    display:block;
    color:#ddd;
    text-decoration:none;
}

.event a:hover{
    opacity:0.8;
}

.apply-btn{
    display: inline-block;
    padding: 18px 50px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ddd;
    text-decoration: none;
    background: linear-gradient(135deg, #2c3e50, #ff1493);
    border-radius: 50px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.apply-btn:hover{
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.3);
    background: linear-gradient(135deg, #ff1493, #2c3e50);
}

.apply-btn:active{
    transform: translateY(-2px);
}



/*右下の公式キャラクター*/

.character-popup {
    position: fixed;
    right: 20px;
    bottom: 20px;

    width: 150px;

    background-color: white;
    border: 4px solid #ff1493;
    border-radius: 20px;

    padding: 10px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);

    z-index: 9999;

    transform: rotate(2deg);
}

/* キャラクター画像 */
.character-popup img {
    width: 100%;
    display: block;

    border-radius: 12px;
}

/* 文字 */
.character-text {
    text-align: center;
    color: #222;

    font-size: 13px;
    line-height: 1.4;

    margin-top: 6px;
}

.character-text strong {
    color: #ff1493;
    font-size: 17px;
}

/*テーマ*/
.theme {
    width:80%;
    height: auto;
    margin: 50px auto;
}

.theme img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 2px solid #ddd;
}





/*-----------------*/
/* footer */
/*-----------------*/

footer{
    width:100%;
    margin-top:80px;
    border-top: 1px solid #ddd;
}

/* 上部 */
.footer-container{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:60px 8%;
}

.footer-column{
    display:flex;
    flex-direction:column;
    align-items:center;   /* カラム自体は中央 */
}

.footer-column h3{
    color:#ddd;
    margin-bottom:30px;
    text-align:left;
    font-weight: bold;
    font-size: 24px;
}

.footer-column ul{
    list-style:none;
    width:220px;          /* リンク開始位置を揃える */
    margin:0;
    padding:0;
}

.footer-column li{
    margin:14px 0;
}

.footer-column a{
    display:block;
    text-align:left;      /* ← リンクだけ左揃え */
    color:#ddd;
    text-decoration:none;
    font-size:20px;
    transition:.3s;
}

.footer-column a:hover{
    opacity:0.7;
}

/* 下部 */
.footer-bottom{
    text-align:center;
    padding:30px 0;
}

.footer-bottom p{
    margin-bottom:20px;
}

.footer-sns{
    display:flex;
    justify-content:center;
    gap:25px;
}

.footer-sns a{
    color:#777;
    font-size:28px;
}

.footer-sns a:hover{
    color:rgb(230, 67, 198);
}







/* ========================= */
/* スマホ・タブレット対応 */
/* ========================= */


/* ------------------------- */
/* タブレット */
/* ------------------------- */

@media screen and (max-width: 1024px) {

    header {
        height: 80px;
        padding: 0 30px;
    }

    .logo img {
        width: 70px;
    }

    nav ul {
        gap: 20px;
    }

    nav a {
        font-size: 16px;
    }

    .midashi {
        width: 90%;
        margin: 25px auto;
        text-align: center;
    }

    .midashi h1 {
        font-size: 45px;
        line-height: 1.4;
    }


    section {
        width: 90%;
        margin: 60px auto;
    }


    h2 {
        font-size: 40px;
    }


    /* 特集 */
    .tokushuu-grid {
        width: 95%;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }


    /* 案内 */
    .annnai-grid {
        width: 95%;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }


    .annnai-text {
        font-size: 20px;
    }


    /* 企画・医学展 */
    .event-list {
        gap: 20px;
    }

    .event img {
        height: 200px;
    }

    .theme {
        width: 90%;
        height: auto;
        margin: 60px auto;
    }

    .theme img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border: 2px solid #ddd;
    }


    /* フッター */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
        padding: 50px 5%;
    }

}




/* ------------------------- */
/* スマートフォン */
/* ------------------------- */

@media screen and (max-width: 600px) {

    /* ----------------- */
    /* header */
    /* ----------------- */

    header {
        height: auto;
        min-height: 70px;

        padding: 10px 15px;

        flex-direction: column;
        gap: 10px;
    }


    .logo img {
        width: 60px;
    }


    nav {
        width: 100%;
    }


    nav ul {
        width: 100%;

        justify-content: center;

        gap: 12px;

        flex-wrap: wrap;
    }


    nav a {
        font-size: 13px;
    }


    /* ----------------- */
    /* 注意書き */
    /* ----------------- */

    .midashi {
        width: 95%;
        margin: 20px auto;
        text-align: center;
    }

    .midashi h1 {
        font-size: 28px;
        line-height: 1.4;
        margin: 0;

    }


    /* ----------------- */
    /* メイン画像 */
    /* ----------------- */

    .mainvisual {
        width: 100%;
    }

    .mainvisual img {
        width: 95%;
        border-width: 2px;
    }


    /* ----------------- */
    /* section */
    /* ----------------- */

    section {
        width: 92%;
        margin: 50px auto;
    }


    h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }


    /* ----------------- */
    /* 特集 */
    /* ----------------- */

    .tokushuu-grid {
        width: 100%;

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

        gap: 15px;
    }


    /* ----------------- */
    /* 案内 */
    /* ----------------- */

    .annnai-grid {
        width: 100%;

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

        gap: 15px;
    }


    .annnai-text {
        font-size: 16px;
    }


    /* ----------------- */
    /* 企画・医学展 */
    /* ----------------- */

    .event-list {
        display: flex;

        flex-direction: column;

        gap: 20px;
    }


    .event {
        width: 100%;
    }


    .event img {
        height: auto;
        max-height: 250px;
    }


    .event h3 {
        font-size: 18px;
    }


    /* ----------------- */
    /* お申し込みボタン */
    /* ----------------- */

    .button-area {
        margin: 40px 0;
    }


    .apply-btn {
        width: 90%;

        padding: 16px 20px;

        font-size: 1rem;
    }


    /* ----------------- */
    /* テーマ */
    /* ----------------- */


    .theme {
        width: 92%;
        margin: 50px auto;
    }

    .theme img {
        width: 100%;
        height: auto;
        border: 2px solid #ddd;
    }


    /* ----------------- */
    /* クミュー */
    /* ----------------- */

    .character-popup {
        width: 110px;

        right: 10px;
        bottom: 10px;

        padding: 7px;

        border-width: 3px;
    }


    .character-text {
        font-size: 10px;
    }


    .character-text strong {
        font-size: 14px;
    }


    /* ----------------- */
    /* その他 */
    /* ----------------- */

    .news-scroll {
        gap: 15px;
    }


    .card {
        min-width: 100%;

        padding: 20px;
    }


    /* ----------------- */
    /* footer */
    /* ----------------- */

    .footer-container {
        grid-template-columns: 1fr;

        gap: 40px;

        padding: 40px 20px;
    }


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


    .footer-column h3 {
        text-align: left;

        font-size: 17px;
    }


    .footer-column ul {
        width: 100%;
    }


    .footer-column a {
        font-size: 16px;
    }


    .footer-bottom {
        padding: 25px 15px;
    }


    .footer-bottom p {
        font-size: 13px;
    }

}