/* PC、スマホ共通スタイル */
body {
  font-family: "Source Sans Pro";
  "Hiragino Kaku Gothic ProN",
  Meiryo,
  Arai,
}

p {
  font-size: 62.5%;
  line-height: 1.8;
}

.present-image {
  overflow: hidden;
}

.present-image img {
  cursor: pointer;
  transition-duration: 0.3s;
}

.present-image:hover {
  opacity: 0.6;
  transition-duration: 0.3s;
}

/* ===========
PC用のスタイル
============ */
@media screen and (min-width: 750px) {

  /* 横幅設定 */
  body {
    max-width: 1100px;
    min-width: 840px;
    margin: 0 auto 0 auto;
    background-color: #e1eef7;
  }

  /* メインビジュアル */
  #main-visual {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
  }


  /* 見出し */


  /* プレゼント */
  #present {
    position: relative;
    width: 100%;
    text-align: center;
  }


  /* コンバージョン獲得LINE登録ボタン------------------------------------ */
  .cta-container {
    text-align: center;
    margin: 40px 0 150px 0;
  }

  .cta-container>div>p {
    font-size: 1rem;
    margin-top: 0;
  }

  /* 注意を引くエリア----------------------------------- */
  #attention {
    text-align: center;
    margin: 0 auto 150px auto;
  }

  #attention>div>img {
    background-color: #fff;
    border: solid 2px #163E76;

  }

  /* 興味・関心をひくエリア-------------------------------- */
  #interest {
    margin: 0 auto 150px auto;
    text-align: center;
    max-width: 1100px;
    width: 100%;
  }

  #interest>div>div>img {
    background-color: #fff;
    border: solid 2px #163E76;
    margin: 0 auto 20px auto;
  }

  /* 欲求に働きかけるエリア-------------------------------- */
  .desire {
    text-align: center;
    margin: 0 auto 0 auto;
  }

  .cta-1 {
    margin: -10px auto 0 auto;
  }

  /* 講座の説明-------------------------------- */
  #course {
    text-align: center;
    margin: 0 auto 0 auto;
  }

  .course-menu {
    width: 100%;
    margin: 0 auto 0 auto;
  }

  #menu-1 {
    margin-bottom: 20px;
    background-color: #fff;
    border: solid 2px #163E76;
  }

  #menu-2 {
    margin-bottom: 20px;
    background-color: #fff;
    border: solid 2px #163E76;
  }

  /* 講師プロフィール--------------------------------------- */
  #profile {
    width: 100%;
    text-align: center;
    margin: 0 auto 80px auto;
  }

  /* プレゼント----------------------------------------------- */
  .last-cta {
    text-align: center;
    margin: 0 auto 0 auto;
    background-color: #fff;
  }


  /* フッター */
  footer {
    background-color: #0d0d0d;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    padding: 40px 0 30px 0;
  }
}





/* ===========
スマホ用のスタイル
============ */
@media screen and (max-width: 750px) {

  /* 横幅設定 */
  body {
    min-width: 375px;
    margin: 0 auto 0 auto;
  }

  body img {
    width: 100%;
  }

  /* メインビジュアル */
  #main-visual {
    position: relative;
    max-width: 100%;
    height: 100%;
    text-align: center;
  }


  /* 見出し */


  /* プレゼント */
  #present {
    position: relative;
    width: 100%;
    text-align: center;
  }


  /* コンバージョン獲得LINE登録ボタン------------------------------------ */
  .cta-container {
    text-align: center;
    margin: 40px 0 80px 0;
  }

  .cta-container>div>p {
    font-size: 1rem;
    margin-top: 0;
  }

  /* 注意を引くエリア----------------------------------- */
  #attention {
    text-align: center;
    margin: 0 auto 80px auto;
  }

  #attention>div>img {
    background-color: #fff;
    border: solid 2px #163E76;

  }

  /* 興味・関心をひくエリア-------------------------------- */
  #interest {
    margin: 0 auto 80px auto;
    text-align: center;
    max-width: 1100px;
    width: 100%;
  }

  #interest>div>div>img {
    background-color: #fff;
    border: solid 2px #163E76;
    margin: 0 auto 20px auto;
  }

  /* 欲求に働きかけるエリア-------------------------------- */
  .desire {
    text-align: center;
    margin: 0 auto 0 auto;
  }

  .cta-1 {
    margin: -10px auto 0 auto;
  }

  /* 講座の説明-------------------------------- */
  #course {
    text-align: center;
    margin: 0 auto 0 auto;
  }

  .course-menu {
    width: 100%;
    margin: 0 auto 0 auto;
  }

  #menu-1 {
    margin-bottom: 20px;
    background-color: #fff;
    border: solid 2px #163E76;
  }

  #menu-2 {
    margin-bottom: 20px;
    background-color: #fff;
    border: solid 2px #163E76;
  }

  /* 講師プロフィール--------------------------------------- */
  #profile {
    width: 100%;
    text-align: center;
    margin: 0 auto 80px auto;
  }

  /* プレゼント----------------------------------------------- */
  .last-cta {
    text-align: center;
    margin: 0 auto 0 auto;
    background-color: #fff;
  }


  /* フッター */
  footer {
    background-color: #0d0d0d;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    padding: 40px 0 30px 0;
  }
}