@charset "utf-8";

    /* CSS Document */


    /* ------------------------------------
    PC用レイアウト（768px以上スクリーン）
    ------------------------------------ */

    /* body全体の初期スタイル調整 */
    body{
      /* font-size: 62.5%; emの計算をしやすくするための定番設定 */
      font-family: "Zen Maru Gothic", sans-serif;
      font-weight: 500;
      color: #333;
    }

    /* ------------------------------------
    全体レイアウト/背景設定（PC）
    ------------------------------------ */

    /* 全体エリア（全体背景を設定するにはここ） */
    .main{
      background-color: #f2f2f2;
    }

    /* 記事（ボディ）エリア */
    .article{
      background-color: #fff;
      font-size: 1.6em; /* =16px */
    }

    /* 記事（ボディ）エリアの行間 */
    .article p{
      line-height: 1.6;
    }

    .article{
      width: 100%;
    }

    /* カラム全体の幅を変更する */
    .top_image_in,.section_inr{
      width: 750px;
      margin: 0 auto; /* 真ん中に要素を置きたい時に使う */
      text-align: center;
    }

    /* ------------------------------------
    ファーストビュー設定
    ------------------------------------ */
    .top_image{
      background-image: url(../images/top_image_back.jpg);
      background-repeat: no-repeat;
      background-position: top center;
      height: auto;
      padding: 2rem 0 0;
    }

    .top_image_in{
      padding: 1rem 1rem 2rem;
    }

    .top_image_in_sp{
      display: none;
    }

    .top_image_in img{
      width: 100%;
    }

    /* ------------------------------------
    上部固定ヘッダー設定
    ------------------------------------ */

    


    /* ------------------------------------
    introductionエリアの設定
    ------------------------------------ */

    #introduction{
      /* background-color: #e5f7fd; */
      background-image: url(../images/introduction-bg.jpg);
      background-repeat: no-repeat;
      /* background-position: bottom center; */
      background-size: cover;
      height: auto;
      padding: 1rem 0 0;
    }

    #introduction h2{
      padding: 0 3rem;
      margin-top: 0;
      margin-bottom: 6rem;
    }

    #introduction p{
      margin-bottom: 3rem;
    }

    .introduction_box{
      width: 100%;
      height: 300px;
    }
    


    /* ------------------------------------
    aboutエリアの設定
    ------------------------------------ */
    #about{
      /* background-color: #74c8ca; */
      background-image: url(../images/about-bg.jpg);
      background-size: contain;
      padding: 2rem 0 0;
    }

    #about h2{
      margin-bottom: 2rem;
    }

    #about h3{
      padding: 0 5rem;
      margin-bottom: 0;
    }

    .about_wrap{
      width: 90%;
      padding: 2rem;
      margin: 0 auto 1rem;
    }

    .about_wrap h4{
      width: 90%;
      margin: 0 auto 3rem;
    }

    .about_small{
      width: 80%;
      margin: 0 auto 2rem;
      text-align: left;
      font-size: 12px;
      margin-top: 1rem;
      margin-bottom: 0;
    }
    
    .about_cta{
      width: 80%;
      margin: 0 auto 4rem;
    }


    /* ------------------------------------
    worksエリアの設定
    ------------------------------------ */
    #works{
      /* background-color: #e5f7fd; */
      background-image: url(../images/works-bg.jpg);
      background-size: cover;
      padding: 2rem 0 0;
    }

    #works h2{
      margin-bottom: 2rem;
      padding: 0 2rem;
    }

    .works_h3_01{
      font-size: 1.5rem;
    }

    .works_h3_02{
      background-color: #01b4b8;
      padding: 1rem;
      color: #fff;
      font-size: 1.5rem;
      width: 80%;
      margin: 0 auto;
    }

    .works_yellow{
      color: #fde783;
    }

    .works_triangle{
      width: 80px;
      margin: 0 auto 2rem;
    }
    
    .works_img{
      padding: 0 2rem;
    }

    .works_wrap{
      display: flex;
      flex-direction: column;
      gap: 2rem;
      padding: 2rem 0 2rem 10rem;
      width: 100%;
      margin: 0 auto 2rem;
    }

    .works_text_inr01{
      width: 60%;
    }

    .works_text_inr02{
      width: 50%;
    }

    .works_text_inr03{
      width: 60%;
    }

    .works_cta{
      width: 80%;
      margin: 0 auto 4rem;
    }


    /* ------------------------------------
    recommendationエリアの設定
    ------------------------------------ */
    #recommendation{
      /* background-color: #74c8ca; */
      background-image: url(../images/recommendation-bg.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      padding: 2rem 0 0;
    }

    #recommendation h2{
      margin-bottom: 2rem;
    }

    .recommendation_wrap{
      background-color: #fff;
      border-radius: 15px;
      padding: 2rem 2rem 0;
      width: 100%;
      margin: 0 auto 2rem;
    }

    .recommendation_text{
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 2rem 0;
    }

    .recommendation_text p{
      text-align: left;
      margin: 0;
      font-size: 1.5rem;
    }

    .recommendation_orange{
      background-color: #fdc1b3;
    }

    .recommendation_cta{
      width: 80%;
      margin: 0 auto 4rem;
    }

    /* ------------------------------------
    seminarエリアの設定
    ------------------------------------ */
    #seminar{
      background-color: #e5f7fd;
      padding: 0.1rem 0 0;
    }

    #seminar h2{
      margin-bottom: 2rem;
    }
    
    #seminar h3{
      margin-bottom: 0;
    }

    .seminar_wrap{
      background-color: #fff;
      padding: 0 0 4rem;
      margin-bottom: 4rem;
    }

    .seminar_wrap h4{
      background-color: #fde783;
      padding: 0.5rem;
      font-size: 1.5rem;
      margin-top: 0;
    }

    .seminar_box{
      display: flex;
      justify-content: center;
      gap: 40px;
    }

    .seminar_wrap ul{
      width: 90%;
      margin: 0 auto;
    }

    .seminar_wrap li{
      text-align: left;
      font-size: 1.2rem;
     }

    .seminar_wrap .seminar_big{
      font-size: 1.5rem;
    }

    .seminar_instructor{
      margin-bottom: 2rem;
    }

    .seminar_instructor p{
      margin: 0;
      font-size: 1rem;
    }

    .seminar_dot{
      margin: 0 auto;
      width: 20px;
    }

    /* ------------------------------------
    interviewエリアの設定
    ------------------------------------ */
    #interview{
      /* background-color: #74c8ca; */
      background-image: url(../images/interview-bg.jpg);
      background-size: contain;
      padding: 2rem 0 0;
    }

    .swiper{
      margin-top: 4rem;
      margin-bottom: 4rem;
    }

    .video-wrapper{
      position: relative;
      width: 100%;
      padding-top: 56.25%; /* 16:9比率 (9 ÷ 16 = 0.5625) */
      overflow: hidden;
    }

    .video-wrapper iframe{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .swiper-slide_text01{
      background-color: #e5f7fd;
      padding: 1rem;
      margin-bottom: 0;
      font-size: 1.5rem;
    }
    .swiper-slide_text02{
      background-color: #e5f7fd;
      padding: 1rem;
      margin-top: 0;
      font-size: 1rem;
    }

    .coming_soon {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #eee; /* デモ用 背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.coming_soon p {
  font-size: 2rem;
}

    /* ------------------------------------
    faqエリアの設定
    ------------------------------------ */
    #faq{
      /* background-color: #fffae1; */
      background-image: url(../images/faq-bg.jpg);
      background-size: contain;
      padding: 2rem 0 0;
    }

    #faq h2{
      margin-top: 0;
    }

    .faq_wrap{
      margin-bottom: 3rem;
    }

    .faq_q_box{
      background-color: #baeeef;
      padding: 0 1rem;
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 1.3rem;
    }

    .faq_a_box{
      background-color: #fff;
      padding: 1rem;
      display: flex;
      align-items: center;
      gap: 15px;
      font-size: 1.2rem;
    }

    .faq_q_box div,.faq_a_box div{
      width: 8%;
    }

    .faq_q_box p,.faq_a_box p{
      text-align: left;
      width: 90%;
    }

    /* ------------------------------------
    CTAエリア
    ------------------------------------ */
    #cta_area{
      background-color: #e5f7fd;
      padding: 1rem 0 0;
    }

    #cta_area h2{
      margin-bottom: 4rem;
    }

    .cta_area_text{
      background-color: #fff;
      width: 70%;
      padding: 1rem;
      margin: 0 auto;
      text-align: center;
    }

    .cta_triangle{
      width: 90px;
      margin: 0 auto;
    }

    .cta_img{
      width: 80%;
      margin: 0 auto;
    }

    .cta_btn{
      width: 80%;
      margin: 2rem auto 4rem;
    }
    

    /* ------------------------------------
    footer部分
    ------------------------------------ */
    .footer{
      background-color: #74c8ca;
      padding: 0 0 3rem;
      text-align: center;
      font-size: 1rem;
      color: #fff;
    }

    .footer_img{
      margin-bottom: 4rem;
    }

    .footer_inr{
      width: 750px;
      margin: 0 auto;
    }

    .footer_wrap{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      margin-bottom: 2rem;
    }

    .footer_wrap a{
      width: 40%;
    }

    .footer a{
      color: #fff;
    }



    /* ------------------------------------
    プライバシーポリシー設定
    ------------------------------------ */
    #privacy{
      padding: 1rem;
    }

    #privacy h1{
      font-size: 2rem;
    }

    #privacy h2{
      font-size: 1.5rem;
      text-align: left;
      border-bottom: 1px solid #333;
    }

    #privacy p,#privacy ul{
      font-size: 1rem;
      text-align: left;
    }

    .privacy_footer{
      padding-top: 2rem;
    }