@charset "utf-8";

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/* =========================
   全体
========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  margin: 0;

  font-family:
    "Noto Sans JP",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

  color: #333;

  line-height: 1.8;

  background-color:white;

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


/* リンク */

a {
  color: inherit;
  text-decoration: none;
}


/* ページ全体 */

.page {
  width: min(1100px, calc(100% - 32px));

  margin: 0 auto;

  padding: 70px 0 100px;
}


/* =========================
   メインビジュアル
========================= */

.hero {
  text-align: center;

  padding:
    70px 24px
    90px;
}


/* 医学展タイトル */

.hero__title {
  margin: 0;

  font-size:
    clamp(3.2rem, 9vw, 6.5rem);

  font-weight: 900;

  letter-spacing: 0.12em;

  /*
    カラフルな文字
  */
  background:
    linear-gradient(
      135deg,
      #ff1681,
      #ff6b00,
      #8bd000
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* キャッチコピー */

.hero__lead {

  max-width: 760px;

  margin:
    24px auto
    0;

  padding:
    20px 26px;

  border-radius: 22px;

  background:
    rgba(255, 255, 255, 0.9);

  box-shadow:
    0 10px 35px
    rgba(0, 0, 0, 0.08);

  font-size: 1.15rem;

  font-weight: 700;
}


/* =========================
   セクションタイトル
========================= */

.section-title {

  margin:
    30px 0
    24px;

  text-align: center;

  font-size:
    clamp(1.8rem, 4vw, 2.7rem);

  font-weight: 900;
}


/* 「企画内容」の下線 */

.section-title span {

  display: inline-block;

  padding:
    5px 20px;

  border-bottom:
    6px solid #ff1681;
}


/* =========================
   カード一覧
========================= */

.grid {

  display: grid;

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

  gap: 22px;
}


/* カード */

.card {

  display: block;

  padding: 28px;

  border-radius: 24px;

  background:
    rgba(255, 255, 255, 0.94);

  box-shadow:
    0 12px 35px
    rgba(0, 0, 0, 0.10);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* カードにマウスを乗せたとき */

.card:hover {

  transform:
    translateY(-5px);

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


/* カード番号 */

.card__number {

  font-size: 4.5rem;

  font-weight: 900;

  color: #ff1681;

  letter-spacing: 0.08em;
}


/* カードタイトル */

.card h3 {

  margin:
    4px 0
    10px;

  font-size: 1.35rem;
}


/* カード本文 */

.card p {

  margin: 0;

  color: #555;
}


/* 詳しく見る */

.card__arrow {

  display: block;

  margin-top: 15px;

  text-align: right;

  font-weight: 900;

  color: #ff1681;
}


/* =========================
   スマホ対応
========================= */

@media (max-width: 700px) {

  body {

    /*
      スマホでは背景を縦いっぱいに表示
    */
    background-width:
      auto 100%;

    background-attachment:
      fixed;
  }


  .page {

    width:
      calc(100% - 20px);

    padding-top:
      35px;
  }


  .hero {

    padding:
      45px 10px
      55px;
  }


  .hero__lead {

    font-size:
      1rem;

    padding:
      18px;
  }


  /*
    スマホではカードを1列にする
  */

  .grid {

    grid-template-columns:
      1fr;
  }


  .card {

    padding:
      22px;
  }

}

/* =========================
   詳細ページ
========================= */

.detail {
  max-width: 900px;

  margin:
    0 auto;
}


/* 詳細ページタイトル */

.detail__top {

  text-align: center;

  margin-bottom:
    25px;
}


.detail__title {

  margin: 0;

  font-size:
    clamp(2rem, 5vw, 3.3rem);

  font-weight: 900;
}


.detail__subtitle {

  margin:
    8px 0 0;

  color:
    #ff1681;

  font-weight:
    900;
}


/* =========================
   基本情報
========================= */

.info-box {

  display: grid;

  grid-template-columns:
    130px 1fr;

  margin:
    25px 0;

  overflow: hidden;

  border-radius:
    20px;

  background:
    rgba(255, 255, 255, 0.95);

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.09);
}


.info-box dt,
.info-box dd {

  margin: 0;

  padding:
    14px 18px;

  border-bottom:
    1px solid #eee;
}


.info-box dt {

  font-weight: 900;

  background:
    #fff3f9;
}


.info-box dd {

  background:
    #fff;
}


/* =========================
   内容ボックス
========================= */

.content-box {

  margin:
    24px 0;

  padding:
    28px;

  border-radius:
    22px;

  background:
    rgba(255, 255, 255, 0.95);

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.09);
}


.content-box h2 {

  margin-top: 30px;
  margin-bottom: 20px;

  font-size:
    1.45rem;

  border-left:
    7px solid #8bd000;

  padding-left:
    12px;
}


.content-box h3 {

  margin:
    24px 0 8px;

  color:
    #ff1681;
}


.content-box p {

  margin:
    10px 0;
}


/* =========================
   企画リスト
========================= */

.topic-list {

  display: grid;

  gap: 14px;

  padding: 0;

  list-style: none;
}


.topic-list li {

  padding:
    18px 20px;

  border-radius:
    16px;

  background:
    #fff;

  border-left:
    6px solid #ff1681;

  box-shadow:
    0 5px 18px
    rgba(0, 0, 0, 0.07);
}


.topic-list strong {

  display: block;

  font-size:
    1.12rem;
}


/* =========================
   注意事項
========================= */

.note {

  padding:
    16px 20px;

  border-radius:
    15px;

  background:
    #fff8e9;

  font-weight:
    700;
}


/* =========================
   戻るボタン
========================= */

.back {

  display:
    inline-block;

  margin-top:
    30px;

  padding:
    11px 22px;

  border-radius:
    999px;

  background:
    #333;

  color:
    #fff;

  font-weight:
    900;
}

.fa-solid fa-check{
  margin-right:
    6px;
 color:red
}

.fa-solid fa-microscope{
  margin-right:
    6px;
 color:rgb(0, 221, 255)
}

.lecture__speaker {
 display: block;
 margin-top: 3em;
 margin-bottom: 1em;

}



/* =========================
   詳細ページのスマホ対応
========================= */

@media (max-width: 700px) {

  .info-box {

    grid-template-columns:
      1fr;
  }


  .info-box dt {

    border-bottom:
      0;

    padding-bottom:
      5px;
  }


  .info-box dd {

    padding-top:
      4px;
  }


  .content-box {

    padding:
      22px;
  }

}



/* ========================= */
/* タブレット対応 */
/* ========================= */

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

    .detail {
        width: 90%;
        margin: 0 auto;
    }

    .detail__title {
        font-size: 40px;
    }

    .detail__subtitle {
        font-size: 18px;
    }

    .info-box {
        width: 90%;
        margin: 0 auto;
    }

    .content-box {
        width: 90%;
        margin: 30px auto;
    }

    .topic-list {
        padding-left: 25px;
    }

    .lecture_speaker_img {
        width: 70%;
        margin: 20px auto;
    }

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

}


/* ========================= */
/* スマートフォン対応 */
/* ========================= */

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

    .detail {
        width: 95%;
        margin: 0 auto;
    }

    .detail__top {
        padding: 0 5px;
    }

    .card__number {
        font-size: 16px;
    }

    .detail__title {
        font-size: 30px;
        line-height: 1.4;
    }

    .detail__subtitle {
        font-size: 11px;
        line-height: 1.7;
    }


    /* 基本情報 */

    .info-box {
        width: 100%;
        font-size: 14px;
    }

    .info-box dt {
        padding: 10px 5px;
    }

    .info-box dd {
        padding: 10px;
        line-height: 1.6;
    }


    /* 内容 */

    .content-box {
        width: 100%;
        margin: 25px auto;
        padding: 20px 15px;
    }

    .content-box p {
        font-size: 14px;
        line-height: 1.8;
    }

    .content-box h2 {
        font-size: 24px;
        margin-top: 30px;
    }

    .topic-list {
        padding-left: 20px;
    }

    .topic-list li {
        font-size: 14px;
        line-height: 1.9;
    }

    .topic-list strong {
        font-size: 15px;
    }


    /* 講師紹介 */

    .lecture__speaker {
        display: block;
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.8;
    }

    .lecture_speaker_img {
        width: 90%;
        margin: 20px auto;
    }

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


    /* 戻るボタン */

    .back {
        font-size: 14px;
    }

}