@charset "utf-8";

/* ============================================================ */
/* ここからオリジナル */
/* ============================================================ */

/* フェードUP */

.fade-up {
  opacity: 0;
  transform: translateY(40px); /* 少し深めに */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* セクション共通パーツ */
.top .center{
  text-align: center;
}

.top_section_inner{
  max-width: 1256px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}
.top h2:before{
  display: none;
}

.top .ttl_sub{
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin:0 0 20px;
  color: #000;
}

.top .ttl_small{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin:0 0 20px;
  color: #000;
}
.top .ttl_large{
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin:0 0 20px;
  color: #000;
}
.top .ttl_line{
color: #000;
    font-size: 20px;
    text-align: left;
    border-bottom: 1px solid #D0D0D0;
    border-left: solid 5px #007b43;
    padding: 7px 10px;
    margin: 0;
    margin-bottom: 20px;
}

.top .specialist-cards,
.top .testimonial-cards,
.top .blog-grid,
.top .seminar-cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.top .specialist-card,
.top .testimonial-card,
.top .blog-card,
.top .seminar-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: calc(33.33% - 20px);
}

/* ボタン */
.top .button {
    font-size: 16px;
    display: inline-block;
    background-color: #006e38;
    color: #ffffff;
    padding: 12.5px 50px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: normal;
    margin: 20px 0 0;
    min-width: 200px;
}
.top .button:hover{
  color: #FFF;
  opacity: .7;
}

/* メインビジュアル */
.top .hero ul{
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

.top .slider_main {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.top .hero-image {
  width: 100%;
  height: auto;
}
.top .slick-dots{
  bottom: -45px!important;
}
.top .slick-dots li button:before{
  font-size: 11px!important;
  color: #8F8F8F!important;
  opacity:1!important;
}
.top .slick-dots li.slick-active button:before
{
    opacity:1!important;
    color: #006E38!important;
}


/* 導入企業 */
.top .achievements{
  padding: 60px 0px 10px;
}

.top .logo-track {
  opacity: 0;
  /* JSと合わせてFOUT防止 */
  transition: opacity 0.3s ease;
}

.top .logo-track li {
  flex: 0 0 auto;
  width: 200px;
  /* または適当な固定幅 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.top .logo_img {
  height: 80px;
  width: auto;
  object-fit: contain;
}

/* サービスの強み */
.top .services{
  background-color: #FBFAF5;
  padding: 60px 0px 80px;
}

.top .service-cards {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin: 60px 0;
}

.top .service-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 30px 20px;
  width: calc(33.33% - 20px);
}
.top .service-card h3{
  font-size: 20px;
  line-height: 1.6;
  text-align: center;
    padding: 0;
    margin: 0;
    border: none;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8E1E1;
}
.top .service-card img{
  margin-bottom: 20px;
}
.top .service-card p{
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
}
.top .services_caption{
  font-size: 20px;
  margin: 0;
  line-height: 1.6;
}
.top .services_caption span{
  font-size: 22px;
  font-weight: bold;
}

/* 専門家一覧 */
.top .specialists{
  background-color: #F2F2F2;
  padding: 60px 0px 80px;
}

.top .specialist-cards{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.top .specialist_slider .slick-list{
  padding-bottom: 5px;
}
.top .specialist_slider .button{
  margin-top: 40px;
}

.top .specialist-card{
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 0 5px;
  min-height: 420px;
}
.top .specialist-cards {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.top .specialist-card {
  transition: transform 0.3s ease;
  transform: scale(1);
  opacity: 1;
}
.top .specialist-card h3{
  font-size: 20px;
  text-align: center;
    padding: 0;
    margin: 0;
    border: none;
    margin-bottom: 20px;
}
.top .specialist-card p{
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 2.0;
}
.top .specialist-card p.role{
  font-size: 13px;
  color: #E7781A;
  margin-bottom: 10px;
}
.top .specialist-card img{
  border-radius: 200px;
  display: block;
  max-width: 120px;
  margin: 0 auto 10px;
}

.top .slick-active .specialist-card {
  opacity: 1;
  transform: scale(1);
}

.top .specialist_slider {
  position: relative;
  overflow: visible;
  margin: 60px 0 40px;
  /* ← これも必要な場合あり */
}

/* 矢印位置 */
.top .slick-prev,
.top .slick-next {
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    /* background: #00794d !important; */
    border-radius: 50% !important;
    width: 25px !important;
    height: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.top .slick-prev {
  left: 20px !important;
  /* ← 矢印を内側に寄せる */
}

.top .slick-next {
  right: 20px !important;
}

.top .slick-prev::before,
.top .slick-next::before {
  color: #00794d !important;
  font-size: 25px !important;
  opacity: 1;
}

/* ドットナビゲーション */
.top .slick-dots {
  bottom: -25px;
}

.top .slick-dots li button:before {
  font-size: 12px;
  color: #333;
  opacity: 0.3;
}

.top .slick-dots li.slick-active button:before {
  color: #00794d;
  opacity: 1;
}


/* サービス一覧 */
.top .services-detail{
  padding: 60px 0px 80px;  
}
.top .service-grid .menu-block {
  transition: all 0.3s ease;
  opacity: 1;
  transform: scale(1);
  margin-bottom: 20px;
  width: calc(100% / 5 - 10px);
}

.top .service-grid .menu-block.hiding {
  opacity: 0;
  transform: scale(0.95);
}

.top .service-grid .menu-block.showing {
  opacity: 1;
  transform: scale(1);
}
.top .service-grid .service-grid-inner .container{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.top .service-grid .service-grid-inner .container h4{
  border: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: normal;
}
.top .service-filters-ttl{
font-size: 16px;
    padding: 0 0 10px;
    margin: 40px 0 20px;
    text-align: left;
    border-bottom: 1px solid #D0D0D0;
    font-weight: bold;
}

.top .service-filters {
  display: flex;
  justify-content: start;
  gap: 10px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.top .filter-button {
  background-color: #006e38;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
}

.top .filter-button.active {
  background-color: #e7771a;
}


/* 導入企業の声 */
.top .testimonials{
    padding: 60px 0px 80px;
    background-color: #F2F2F2;
}
.top .testimonials .button{
  margin-top: 40px;
}
/* 3カラム */

.top .column3-slider{
  position: relative;
  overflow: visible;  
}
.top .column3-slider .column3-cards{
  margin: 0 5px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 10px 30px;
  min-height: 260px;
  border-radius: 10px;
}
.top .column3-slider .column3-cards a{
  text-decoration: none;
  color: #000;
}
.top .column3-slider .column3-cards a:hover{
  color: #000;
  opacity: .7
}
.top .column3-slider .column3-cards img{
  margin-bottom: 20px;
}
.top .column3-slider .column3-cards h3{
  font-size: 18px;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
  border: none;
}
.top .column3-slider .column3-cards p{
  font-size: 13px;
  margin: 0;
  padding: 0;
}
.top .column3-slider .slick-list{
  padding: 0 0 5px;
  margin: 0px 60px;
}

/* 4カラム */
.top .column4-slider{
  position: relative;
  overflow: visible;    
}
.top .column4-slider .column4-cards{
  margin: 0 5px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 10px 20px;
  min-height: 260px;

}
.top .column4-slider .column4-cards a{
  text-decoration: none;
  color: #000;
}
.top .column4-slider .column4-cards a:hover{
  color: #000;
  opacity: .7;
}
.top .column4-slider .column4-cards img{
  margin-bottom: 20px;  
}
.top .column4-slider .column4-cards h3{
  font-size: 16px;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
  border: none;  
}
.top .column4-slider .column4-cards p{
  font-size: 13px;
  margin: 0;
  padding: 0;  
}
.top .column4-slider .slick-list{
  padding-bottom: 5px;
  margin: 0px 40px;
}

/* トピックス */
.blog-posts{
    padding: 60px 0px 40px;  
}

/* お知らせ */

.top .top_news {
  padding: 30px 0px 40px;  
}

.top .top_news dl {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
}
.top .top_news dl a{
  color: #000;;
}
.top .top_news dl a:hover{
  text-decoration: none;
}
.top .top_news dt,
.top .top_news dd {
  text-align: left;
  margin: 0;
  background-color: #CCE2D7;
  }

.top .top_news dt {
  width: 12%;
  padding: 15px 0px 15px 15px;
  font-size: 1.1em;
  border-right: 1px solid #B8B8B8;
}

.top .top_news dd {
  width: 88%;
  padding: 15px 15px 15px 15px;
  font-size: 1.1em;
}

.top .top_news dt:nth-of-type(odd),
.top .top_news dd:nth-of-type(odd) {
  background-color: #FAFAFA;
}

/* セミナー情報 */
.top .seminars{
  padding: 30px 0px 80px;    
}
.top .seminars .button{
  margin-top: 40px;
}

/* 実績ロゴ */
.top .achievements_bottom{
    padding: 60px 0px 80px;
    background-color: #F2F2F2;
}
.top .achievements_bottom_logo{
    background: #FFF;
    max-width: 1100px;
    margin: 40px auto 20px;
    padding: 30px 20px;
    border-radius: 10px;
}
.top .achievements_bottom_logo .logo-list{
      padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}
.top .achievements_bottom_logo .logo-list li{
    padding: 0;
    margin: 0;
    font-size: 0;
    max-width: 150px;  
}
.top .achievements_bottom_logo .logo-list li img{}

/* CTA */

.top .cta_area {
  background-color: #006e38;
  color: #ffffff;
  text-align: center;
  padding: 80px 10px;
  margin: 0;
}
.top .cta_area .ttl_sub,
.top .cta_area .ttl_large{
  color: #FFF;
}
.top .cta-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.top .cta-button {
  font-size: 16px;
    display: inline-block;
    background-color: #e7771a;
    color: #ffffff;
    padding: 12.5px 50px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: normal;
    margin: 20px 0 0;
    min-width: 200px;
    font-weight: bold;
}
.top .cta-button:hover{
  opacity: .7;
}

/* ============================================================ */
/* 768px以下 */
/* ============================================================ */





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


/* セクション共通パーツ */
.top .center{}
.top_section_inner{
    padding: 0 15px;
}
.top h2:before{}
.top .ttl_sub{
  font-size: 16px;
  margin-bottom: 10px;
}
.top .ttl_small{
  font-size: 20px;
  margin-bottom: 10px;
}
.top .ttl_large{
    font-size: 20px;
    line-height: 1.6;
}
.top .ttl_line{
    font-size: 18px;
}
.top .specialist-cards,.top .testimonial-cards,.top .blog-grid,.top .seminar-cards{}
.top .specialist-card,.top .testimonial-card,.top .blog-card,.top .seminar-card{}

/* ボタン */
.top .button{}
.top .button:hover{}

/* メインビジュアル */
.top .hero ul{}
.top .slider_main{}
.top .hero-image{}
.top .slick-dots{}
.top .slick-dots li button:before{}
.top .slick-dots li.slick-active button:before{}

/* 導入企業 */
.top .achievements{}
.top .logo-track{}
.top .logo-track li{}
.top .logo_img{}

/* サービスの強み */
.top .services{}
.top .service-cards{
    /* flex-wrap: wrap; */
}
.top .service-card{
    width: 100%;
}
.top .service-card h3{}
.top .service-card img{}
.top .service-card p{}
.top .services_caption{
    font-size: 16px;
    line-height: 2.0;
}
.top .services_caption span{
    font-size: 18px;
}

/* 専門家一覧 */
.top .specialists{
    padding: 60px 10px 80px;
}
.top .specialist-cards{}
.top .specialist_slider .slick-list{}
.top .specialist-card{
    padding: 20px 10px;
    min-height: 400px;
}
.top .specialist-cards{}
.top .specialist-card{}
.top .specialist-card h3{}
.top .specialist-card p{
    font-size: 11px;
}
.top .specialist-card p.role{}
.top .specialist-card img{
    max-width: 100px;
}
.top .slick-active .specialist-card{}
.top .specialist_slider{
    margin: 30px 0 20px;
}
.top .specialist_slider .button{
  margin-top: 20px;
}

/* 矢印位置 */
.top .slick-prev,.top .slick-next{}
.top .slick-prev{}
.top .slick-next{}
.top .slick-prev::before,.top .slick-next::before{}

/* ドットナビゲーション */
.top .slick-dots{}
.top .slick-dots li button:before{}
.top .slick-dots li.slick-active button:before{}

/* サービス一覧 */
.top .services-detail{}
.top .service-grid .menu-block{
    width: calc(100% / 2 - 10px);
    margin-bottom: 10px;
}
.top .service-grid .menu-block.hiding{}
.top .service-grid .menu-block.showing{}
.top .service-grid .service-grid-inner .container{}
.top .service-grid .service-grid-inner .container h4{}
.top .service-filters-ttl{}
.top .service-filters{
    gap: 5px;
    margin-bottom: 20px;
}
.top .filter-button{
    padding: 10px 15px;
    font-size: 12px;
    /* gap: 5px; */
}
.top .filter-button.active{}

/* 導入企業の声 */
.top .testimonials{
    padding: 60px 0 80px;
}
.top .testimonials .button{
    margin-top: 0px;
}

/* 3カラム */
.top .column3-slider{}
.top .column3-slider .column3-cards{}
.top .column3-slider .column3-cards img{}
.top .column3-slider .column3-cards h3{}
.top .column3-slider .column3-cards p{}
.top .column3-slider .slick-list{
    margin: 0 40px;
}

/* 4カラム */
.top .column4-slider{}
.top .column4-slider .column4-cards{}
.top .column4-slider .column4-cards img{}
.top .column4-slider .column4-cards h3{}
.top .column4-slider .column4-cards p{}
.top .column4-slider .slick-list{}

/* トピックス */
.blog-posts{}

/* お知らせ */
.top .top_news{}
.top .top_news dl{}
.top .top_news dl a{}
.top .top_news dl a:hover{}
.top .top_news dt,.top .top_news dd{
    border: none;
}
  .top .top_news dt {
    width: 100%;
    padding: 15px 0px 0px 15px;
  }

  .top .top_news dd {
    width: 100%;
    padding: 2px 15px 15px 15px;
  }
.top .top_news dt:nth-of-type(odd),.top .top_news dd:nth-of-type(odd){}



/* セミナー情報 */
.top .seminars{}
.top .seminars .button{}

/* 実績ロゴ */
.top .achievements_bottom{}
.top .achievements_bottom_logo{}
.top .achievements_bottom_logo .logo-list{}
.top .achievements_bottom_logo .logo-list li{}
.top .achievements_bottom_logo .logo-list li img{}

/* CTA */
.top .cta_area{
    padding: 60px 10px;
}
.top .cta_area .ttl_sub,.top .cta_area .ttl_large{}
.top .cta-buttons{}
.top .cta-button{
    margin: 10px 0 0;
    min-width: 250px;
}
.top .cta-button:hover{}


}