@charset "UTF-8";
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    background-color: #fff;
    font-size: 62.5%;
    scroll-behavior: smooth;
}
body {
    margin: 0 auto;
    padding: 0;
    animation: fadeIn 1.25s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

a {
    display: block;
    width: 100%;
    transition: 0.5s;
}
a:hover {
    opacity: 0.75;
}

ul{
    list-style: none;
}
.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rltv{
  position: relative;
}

.br_sp{
  display: none;
}

p{
  text-align: justify;
}

img {
  	max-width: 100%;
  	height: auto;
    border: 0;
    display: block;
    vertical-align: bottom;
}

#wrapper {
    margin: auto;
    font-size: 1.6em;
    line-height: 1.8;
    letter-spacing: 2px;
    font-family: 'Noto Sans JP', "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
    color: #444;
    width: 100%;
}
.hiragino{
  font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  font-weight: 600;
}
.mincho{
  font-family: "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
}


/*--------トップへ戻るボタン--------*/
#page-top {
    position: fixed;
    bottom: 2%;
    right: 1%;
}
#page-top a {
    display: table-cell;
    font-size: 10px;
    vertical-align: middle;
    background:rgba(255, 255, 255, 0.25);
    color: #B99A1E;
    width: 50px;
    height: 50px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    /*border: 1px solid #B99A1E;*/
    position: relative;
}
#page-top a::after {
  position: absolute;
  content: "";
  width: 30%;
  height: 30%;
  top: 40%;
  left: 36%;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(-45deg);
  
}

/***ヘッダーナビメニュー*/
header{
  position: fixed;
  display: flex;
  align-items: center;
  width: 100%;
  z-index: 999;
  padding: 1.2rem 0 1.2rem 1.2rem;
  background: rgba(255, 255, 255, .7);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.65) 90%,
    rgba(255, 255, 255, 0.2) 95%,
    rgba(255, 255, 255, 0) 100%
  );
}

/*スクロール調整*/
#detail_web, #detail_sns, #detail_business{
  padding-top: 61.5px;
  margin-top: -61.5px;
}


/**section**/
section .inner{
  width: min(90vw,1100px);
  margin: 0 auto 13rem;
}
section:last-of-type .inner{
  margin-bottom: 0;
}
#detail section:last-of-type .inner{
  margin-bottom: 13rem;
}
.subtitle{
  position: relative;
  width: fit-content;
  max-width: 50%;
  margin: 0 auto 3.5rem;
}
h2{
  font-size: clamp(3.5rem, 3.5vw, 3.5rem);
  text-align: center;
  margin-bottom: 5rem;
  line-height: 1.4;
  letter-spacing: 3px;
  font-weight: 500;
}
h2 span{
  font-size: clamp(2.5rem, 2.5vw, 2.5rem);
  font-family: inherit;
  display: block;
  font-weight: 400;
  letter-spacing: 2px;
}
h3{
  font-size: clamp(3.5rem, 3.5vw, 3.5rem);
  text-align: center;
  margin-bottom: 3rem;
  letter-spacing: 3px;
}
.under_line{
  position: relative;
  width: fit-content;
  margin: 0 auto 8rem;
}
.under_line::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1rem;
  width: 100%;
  border-bottom: 1.75px solid #444;
}

.hide-txt{
  position: absolute;
    text-indent: -500vw;
    white-space: nowrap;
    overflow: hidden;
}

.site-header {
  max-width: 60%;
  filter: drop-shadow(0px 0px 0.5px #fff);
}

/*ファーストビュー*/
#hero {
  position: relative;
  width: 100%;
  height: 100%; /* 画面全体に */
  background: url("../img/fv_img.webp") no-repeat;
  background-size: cover;
  background-position: center top;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6rem;
  aspect-ratio: 20 / 9;
}
#hero img:first-of-type{
  position: absolute;
  content: "";
  display: block;
  top: 29%;
  left: 2%;
  width: 38.4%;  
}
#hero img:last-of-type{
  position: absolute;
  content: "";
  display: block;
  top: 64.2%;
  left: 2.7%;
  width: 41.4%;
}

/*バナーエリア*/
#bnr_area .inner{
  margin-bottom: 6rem;
}
#bnr_area img{
  margin: 0 auto;
}

/*intro*/
#intro{
  background: #EAF3FF;
}
#intro .inner{
  padding: 12rem 0;
}
#intro .subtitle::before, #intro .subtitle::after{
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  max-width: 30%;
  height: 1px;
  top: 50%;
  transform: translateY(-50%);
  background: #065ba3;
}
#intro .subtitle::before{
  left: 110%;
}
#intro .subtitle::after{
  right: 110%;
}
#intro .description{
  width: min(100%, 730px);
  margin: auto;
}


/*コース一覧*/
#list{
  position: relative;
}
#list .list_area {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem 5%;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8rem;
}

/* コース一覧のブロック */
#list .list_block {
  flex-direction: column;
  align-items: flex-start;
  width: min(340px, 30%);
  transition: transform 0.2s ease;
}
#list .list_block a{
  text-decoration: none;
}
.list_block:hover a .list_img .thumb{
  transform: scale(1.02);
}
.list_img {
  position: relative;
}
.list_img .num {
  position: absolute;
  top: -10%;
  left: -5%;
  height: 36.3px;
  max-height: 32%;
  z-index: 1;
}
.list_img .thumb {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.2s ease;
}
.list_box {
  padding: 16px 0 0;
  background-color: #fff;
  display: flex;
  align-items: flex-start;
}
.list_box .label {
  display: inline-block;
  padding: 4px 8px;
  color: #fff;
  background: #ccc;
}
.list_box .name {
  display: block;
  color: #333;
  margin-left: 1rem;
  line-height: 1.3;
}

/* ラベルごとの色 */
.label[data-type="D"] { background-color: #008fa8; }
.label[data-type="W"] { background-color: #e6b422; }
.label[data-type="M"] { background-color: #9e3d30; }
.label[data-type="S"] { background-color: #5d8651; }



/*早わかり表*/
.subsidy-table h3{
  font-weight: 600;
}
.subsidy-table h3.under_line::after{
  border-width: 2.5px;
}
.subsidy-table img{
  margin: 0 auto;
}


/*分野からコースを探す*/
#find{
  background: #EAF3FF;
}
#find .inner{
  padding: 12rem 0;
}
#find .find_area{
  width: min(100%, 1000px);
  border-radius: 20px;
  background: #fff;
  filter: drop-shadow(2px 3px 3px #999);
  margin: 0 auto 4rem;
}
.find_area .ttl{
  background: #3997A5;
  color: #fff;
  font-weight: 500;
  text-align: center;
  font-size: clamp(2.7rem, 3.0vw, 3.0rem);
  padding: 2.6rem 1rem;
  border-radius: 20px 20px 0 0;
}
.find_area .exp{
  padding: 2.8rem 5.8rem;  
}
.find_area .exp p{
  margin-bottom: 3rem;
  font-weight: 300;
}
.find_area .exp p span{
  color: red;  
}
.find_area .exp .course_name{
  border: 1.5px solid;
  border-radius: 18px;
  text-align: center;
  padding: 0.5rem 0;
  margin-bottom: 3.5rem;
  color: #3997A5;
  font-weight: 600;
}

.find_area .exp .course_block{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.find_area .exp .course_box a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: stretch;
}
.find_area .exp .course_box a:hover {
  opacity: 1;
}
.find_area .exp .course_box a .name {
  position: relative;
  display: inline-block;
  transition: .5s;
}
.find_area .exp .course_box a:hover .name {
  text-decoration: underline;
}


.find_area .exp .course_box {
  background-color: #eaf6f9; /* 水色背景 */
  width: 100%;
}
.find_area .exp .course_box .label {
  background-color: #189ab4; /* 濃いブルー */
  color: #fff;
  font-weight: bold;
  font-size: clamp(2.8rem, 2.8vw, 2.8rem);
  padding: 6px 12px;
  margin-right: 12px;
  text-align: center;
  border-right: 3px solid #fff;
}
.find_area .exp .course_box .name {
  font-size: clamp(2.0rem, 2.3vw, 2.3rem);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3px 6px 3px 0;
}
.find_area .exp .course_box .name span {
  font-size: clamp(1.8rem, 1.8vw, 1.8rem);
}

.find_area.web .ttl, .find_area.web .label{
  background: #E6BB4A !important;
}
.find_area.sns .ttl, .find_area.sns .label{
  background: #B9524E !important;
}
.find_area.business .ttl, .find_area.business .label{
  background: #769E5E !important;
}

.find_area.web .exp .course_box{
  background-color: #fdf7ee;
}
.find_area.sns .exp .course_box{
  background-color: #f8e9e8;
}
.find_area.business .exp .course_box{
  background-color: #eef2ec;
}

.find_area.web .exp .course_name{
  color: #E6BB4A;
}
.find_area.sns .exp .course_name{
  color: #B9524E;
}
.find_area.business .exp .course_name{
  color: #769E5E;
}

/*固定ボタン*/
.fixed_btn{
  position: fixed;
  bottom: 1.5rem;
  right: 1.2rem;
  max-width: 36%;
  opacity: 0.9;
}
.fixed_btn.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}



/********** コース詳細ページ **********/
#detail section:first-of-type{
  padding-top: 8rem;
}
#detail .detail_ttl{
  background: #3997A5;
  text-align: center;
  padding: 3rem 1rem;
  margin-bottom: 8rem;
}
#detail .detail_ttl p{
  text-align: center;
  color: #fff;
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: clamp(3.0rem, 3.3vw, 3.3rem);
}
#detail .detail_ttl span{
  background: #fff;
  border-radius: 50px;
  color: #3997A5;
  padding: 0.6rem 4rem;
}

#detail .ttl_img{
  margin-bottom: 5rem;
}

#detail .course_name{
  border: 1.5px solid;
  border-radius: 18px;
  text-align: center;
  padding: 0.5rem 0;
  margin: 0 auto 3.5rem;
  width: 90%;
  color: #3997A5;
  font-weight: 600;
}
#detail .course_block{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 90%;
  margin: 0 auto 9rem;
}
#detail .course_box a {
  display: block;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: stretch;
}
#detail .course_box {
  background-color: #eaf6f9; /* 水色背景 */
  width: 100%;
  display: flex;
  align-items: stretch;
}
#detail .course_box .label {
  background-color: #189ab4; /* 濃いブルー */
  color: #fff;
  font-weight: bold;
  font-size: clamp(2.8rem, 2.8vw, 2.8rem);
  padding: 6px 12px;
  margin-right: 12px;
  text-align: center;
  border-right: 3px solid #fff;
}
#detail .course_box .name {
  font-size: clamp(2.0rem, 2.3vw, 2.3rem);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3px 6px 3px 0;
}
#detail .course_box .name span {
  font-size: clamp(1.8rem, 1.8vw, 1.8rem);
}

#detail .detail_web .detail_ttl,
#detail .detail_web .course_box .label,
#detail .detail_web .spf_img .label,
#detail .detail_web .spf_ttl::before{
  background: #E6BB4A;
}
#detail .detail_web .detail_ttl span,
#detail .detail_web .course_name,
#detail .detail_web .spf_ttl{
  color: #E6BB4A;
}
#detail .detail_web .course_box,
#detail .detail_web .spf_ttl::after{
  background: #fdf7ee;
}

#detail .detail_sns .detail_ttl,
#detail .detail_sns .course_box .label,
#detail .detail_sns .spf_img .label,
#detail .detail_sns .spf_ttl::before{
  background: #B9524E;
}
#detail .detail_sns .detail_ttl span,
#detail .detail_sns .course_name,
#detail .detail_sns .spf_ttl{
  color: #B9524E;
}
#detail .detail_sns .course_box,
#detail .detail_sns .spf_ttl::after{
  background: #f8e9e8;
}

#detail .detail_business .detail_ttl,
#detail .detail_business .course_box .label,
#detail .detail_business .spf_img .label,
#detail .detail_business .spf_ttl::before{
  background: #769E5E;
}
#detail .detail_business .detail_ttl span,
#detail .detail_business .course_name,
#detail .detail_business .spf_ttl{
  color: #769E5E;
}
#detail .detail_business .course_box,
#detail .detail_business .spf_ttl::after{
  background: #eef2ec;
}



#detail .spf_area {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-bottom: 6rem;
}

#detail .spf_block {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  flex-wrap: wrap;
}

#detail .spf_img {
  position: relative;
  flex: 0 0 260px;
  width: 260px;
  max-width: 32%;
}

#detail .spf_img .label {
  position: absolute;
  top: -10%;
  left: -5%;
  background: #007f99;
  color: #fff;
  font-weight: bold;
  padding: 6px 10px;
  z-index: 1;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

#detail .spf_img img.thumb {
  width: 100%;
  border-radius: 10px;
  display: block;
}

#detail .spf_exp {
  flex: 1;
}

#detail .spf_ttl{
  position: relative;  
  padding-left: 4rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  color: #007f99;
}
#detail .spf_ttl::before{
  content: "";
  display: block;
  position: absolute;
  left: 3%;
  top: 50%;
  background: #007f99;
  width: 5px;
  height: 76%;
  transform: translateY(-50%);
}
#detail .spf_ttl::after{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 70%;
  background: #eaf6f9;
  width: 100%;
  height: 80%;
  transform: translateY(-50%);
  z-index: -1;
}
#detail .spf_ttl p {
  font-size: clamp(2.8rem, 3.0vw, 3.0rem);
  font-weight: 600;
  letter-spacing: 1px;
}

#detail .spf_ttl span {
  font-size: clamp(1.6rem, 1.6vw, 1.6rem);
  display: block;
  margin-bottom: 1.2rem;
  font-weight: 600;
}

#detail .spf_exp > p {
  font-size: clamp(1.5rem, 1.5vw, 1.5rem);
  line-height: 1.8;
  color: #333;
}




/*申し込むボタン*/
.btn_apply{
  margin: 0 auto;
  width: fit-content;
}


/**スクロールアニメーション**/
.scroll-in{
    opacity: 0;
    display: block;
    font-style: normal;
}
  .s_lft.displayed{
    animation: fadeInLeft 1s forwards .4s;
  }
  .s_rght.displayed{
    animation: fadeInRight 1s forwards .4s;
  }
  .s_btm.displayed{
    animation: fadeInBottom .4s forwards .4s;
  }
  .s_btm2.displayed{
    animation: fadeInBottom .4s forwards .6s;
  }

  .s_top.displayed{
    animation: fadeInTop 1s forwards .4s;
  }
  .s_lft2.displayed{
    animation: fadeInLeft2 0.8s forwards .4s;
  }
  .s_rght2.displayed{
    animation: fadeInRight2 0.8s forwards .4s;
  }
  .s_in.displayed{
    animation: fadeIn 1s forwards .4s;
  }
  
  @keyframes fadeInLeft{
    0%{transform: translateX(-15%); opacity: 0;}
  100%{transform: translateX(0%); opacity: 1;}
  }
  @keyframes fadeInRight{
    0%{transform: translateX(15%); opacity: 0}
  100%{transform: translateX(0%); opacity: 1}
  }
  @keyframes fadeInBottom{
    0%{transform: translateY(15%); opacity: 0}
  100%{transform: translateY(0); opacity: 1}
  }
  
  @keyframes fadeInTop{
    0%{transform: translateY(-15%); opacity: 0}
  100%{transform: translateY(0); opacity: 1}
  }
  @keyframes fadeInLeft2{
    0%{transform: translateX(-5%); opacity: 0;}
  100%{transform: translateX(0); opacity: 1;}
  }
  @keyframes fadeInRight2{
    0%{transform: translateX(5%); opacity: 0}
  100%{transform: translateX(0); opacity: 1}
  }
  @keyframes fadeIn{
    0%{opacity: 0}
  100%{opacity: 1}
  }



  @keyframes zoomFadeIn {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .s_zoom.displayed {
    animation: zoomFadeIn 0.8s forwards 0.5s;
  }
/**/



/**footer**/
.site_footer {
  background-color: #f5f5f5;
  padding: 20px 0;
  font-size: 13px;
  color: #666;
  text-align: center;
}

.footer_inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.copyright{
  text-align: center;
  padding-top: 2rem;
  font-size: 60%;
}

.footer_links {
  font-size: 80%;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.footer_links li:first-of-type{
  border-right: 1px solid;
}

.footer_links li a {
  color: #666;
  text-decoration: none;
  padding: 0 1rem;
}

.footer_links li a:hover {
  text-decoration: underline;
}



/**cssアニメーション**/
.anim {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 1.5s ease-out, transform 1s ease-out;
  transition-delay: 0.5s;
  
}
.anim.a0 {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 1.5s ease-out, transform 1s ease-out;
  transition-delay: 1s;
}

/* 表示されたときに適用されるクラス */
.anim.show {
  opacity: 1;
  transform: translateY(0);
}


/*---------------------------------------------------
レスポンシブ
----------------------------------------------------*/
@media screen and (min-width:1210px) {
  #hero{
    /*max-height: 90vh; */
  }
}

@media screen and (max-width:768px) {
  .br_sp{
    display: inline;
  }
  header{
    padding: 0.65rem 0 0.8rem;
    margin: 0;
  }
  section .inner{
    margin: 0 auto 10rem;
  }
  #hero {
    background: url("../img/fv_img_sp.webp") no-repeat;
    aspect-ratio: 700 / 971;
    background-size: cover;
  }

  #hero img:first-of-type{
    width: 49.4%;
    top: 13.9%;
    left: 5.5%;
  }
  #hero img:last-of-type{
    width: 53.8%;
    top: 82.9%;
    left: 5.2%;
  }
  #list .list_block {
    width: 47%;
  }
  .find_area .exp {
    padding: 2.8rem 5.8%;
  }
  .subsidy-table img{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  /*詳細ページ*/
  #detail .spf_block{
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  #detail .spf_img{
    max-width: 500px;
    width: 80%;
    flex: unset;
  }
  #detail .spf_img .label{
    top: -5%;
    left: -2.5%;
  }
  #detail .course_block{
    width: 100%;
  }
}


@media screen and (max-width:480px) {
    html{
        font-size: 2.0vw;
    }

      /*スクロール調整*/
    #detail_web, #detail_sns, #detail_business {
      padding-top: 14%;
      margin-top: -14%;
    }

    /*footer*/
    .footer_links {
      flex-direction: column;
      gap: 8px;
    }
    .footer_links li:first-of-type{
      border: none;
    }
}