@charset "utf-8";
/* CSS Document */
@import url("destyle.css");
@import url("layout.css");
/* ----------------------------------------------- loading */
#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  text-align: center;
  color: #fff;
  z-index: 99999999999;
}
/* ---------- 中央配置 */
#loader_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#loader_logo img {
  width: 220px;
  height: auto;
}
/* ---------- fadeUpをするアイコンの動き */
#loader .fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ----------------------------------------------- main */
main {}
main #main {}
h2 {
  margin-bottom: 42px;
  font-family: 'BIZ UDGothic';
  font-size: 4.2rem;
  color: #00273f;
  letter-spacing: 0.1em;
}
h2::before {
  display: block;
  margin-bottom: 16px;
  font-family: 'WorkSans';
  font-size: 1.6rem;
  color: #005e41;
  letter-spacing: 0;
}
h2.information::before {
  content: "Information";
}
h2.join::before {
  content: "Join us";
}
h2.specialist::before {
  content: "Specialist";
}
h3 {
  margin-bottom: 46px;
  font-size: 3.5rem;
  line-height: 1.4em;
}
#main .btn {
  margin-bottom: 60px;
}
#main .btn a {
  position: relative;
  display: inline-block;
  min-width: 258px;
  padding: 12px 30px;
  font-weight: 600;
  color: #fff;
  background-color: #78c74f;
  border-radius: 100px;
}
#main .btn a:hover {
  background-color: #001926;
}
#main .btn a::before {
  position: absolute;
  display: inline-block;
  content: "";
  margin: auto 0;
  top: 0;
  bottom: 0;
  right: 22px;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-image: url("../img/btn_circle_wh.png");
  background-size: contain;
  transition: all .6s;
}
#main .btn a:hover::before {
  transform: rotate(360deg);
}
#main .btn a::after {
  position: absolute;
  display: inline-block;
  content: "";
  margin: auto 0;
  top: 0;
  bottom: 0;
  right: 31px;
  width: 5px;
  height: 5px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  transform: rotate(45deg);
}
#main .btn a:hover::after {}

/* ----------------------------------------------- mainimg */
#mainimg {}
#mainimg .inner {
  padding: 40px 0 44px;
  width: 100%;
  background-color: #ceefb9;
  overflow: hidden;
}
.slider_wrap {}
.slider {
  margin-left: 50%;
}
.slider li {
  display: block;
  margin-left: -500px;
  margin-right: 500px;
  padding: 0 20px;
  max-width: 1000px;
  width: 100%;
  transition: .3s;
}
.slider li:hover {
  transform: translate(0,4px);
}
.slider li a {
  display: block;
  background: #fff;
}
.slider img {
  display: block;
  box-shadow: 0 0 22px 2px rgb(19 66 48 / 0.45);
  transition: .3s;
}
.slider li:not(.active-slide) img {
  box-shadow: 0 0 20px -4px rgb(0 0 0 / 0.2);
}
.slider a:hover img {
  opacity: 0.8;
}

/* ----------------------------------------------- pickup_banner */
#pickup_banner {}
#pickup_banner .inner {
  position: relative;
  margin: 0 auto 68px;
}
#pickup_banner .inner::before {
  position: absolute;
  display: inline-block;
  content: "";
  margin: 0 auto;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 780px;
  background: url("../img/back_line_banner.webp") no-repeat top center/100% 100%;
}
#pickup_banner ul {
  position: relative;
  margin: 36px auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 1300px;
  width: 100%;
  z-index: 20;
}
#pickup_banner ul li {
  display: inline-block;
  margin: 12px;
  max-width: 305px;
  width: calc(100% / 4 - 24px);
}
#pickup_banner ul li a {
  position: relative;
  display: block;
  width: 100%;
  padding: 7px;
  box-shadow: 0 4px 12px -4px rgb(0 0 0/0.4);
  transition: .4s;
}
#pickup_banner ul li a:hover {
  opacity: 0.7;
}
#pickup_banner ul li a::before {
  position: absolute;
  content: "";
  display: inline-block;
  margin: auto;
  padding: 7px;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: center / 100% 100% no-repeat url("../img/banner-frame.png");
}
#pickup_banner ul li img {
  width: 100%;
  height: auto;
}

/* ----------------------------------------------- information */
#information {}
#information .inner {
  position: relative;
  margin: 0 auto 80px;
  text-align: left;
  max-width: 1080px;
  width: calc(100% - 80px);
  z-index: 20;
}
#information .title_area {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#information h2 {}
/*tab*/
#information .tab {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 42px;
  font-size: 1.6rem;
  font-weight: 600;
  background-color: #fff;
  border-radius: 100px;
  box-shadow: 0 0 12px -4px rgb(0 0 0/0.3);
}
.tab_btn {
  margin: 0 auto;
  text-align: center;
  padding: 6px 20px;
  min-width: 140px;
  width: calc(100% / 4);
  cursor: pointer;
  transition: .4s;
}
.tab_btn:hover {
  color: #78c74f;
}
.tab_btn.active {
  color: #fff;
  background-color: #78c74f;
  border-radius: 100px;
}
/*information_list*/
.information_list {
  margin: 0 0 54px;
}
/*panel_area*/
.panel_area {
  display: none; /*はじめは非表示*/
}
.panel_area.active {
  display: block; /*表示*/
}
/**/
.information_list a {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 4px;
  padding: 24px 36px;
  font-size: 1.7rem;
  border: solid 1px #fff;
  background-color: #fff;
  box-shadow: 0 0 12px -4px rgb(0 0 0/0.3);
  border-radius: 100px;
  transition: .4s;
}
.information_list a:hover {
  border-color: #66cc2f;
  box-shadow: 0 0 24px -8px rgb(55 171 113/0.45);
  z-index: 10;
}
.information_list a::before {
  position: absolute;
  display: inline-block;
  content: "";
  margin: auto 0;
  top: 0;
  bottom: 0;
  right: 24px;
  width: 24px;
  height: 24px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-image: url("../img/btn_circle.png");
  background-size: contain;
  transition: all .6s;
}
.information_list a:hover::before {
  transform: rotate(360deg);
}
.information_list a::after {
  position: absolute;
  display: inline-block;
  content: "";
  margin: auto 0;
  padding: 0;
  top: 0;
  bottom: 0;
  right: 34px;
  width: 6px;
  height: 6px;
  border-top: solid 1px #005e41;
  border-right: solid 1px #005e41;
  transform: rotate(45deg);
  background-image: none;
}
.information_list a:hover::after {}
.information_list .no_link {
  pointer-events: none;
}
.information_list .no_link::before,
.information_list .no_link::after {
  display: none;
}
/*file*/
.information_list a[href$=".pdf"] dl dd::after {
  display: inline-block;
  padding-right: 20px;
  background-image: url(../img/pdf.svg);
  background-repeat: no-repeat;
  background-position: 2px center;
  content: ".";
  bottom: 0;
  text-indent: -9999px;
}
.information_list a[href$=".doc"] dl dd::after,
.information_list a[href$=".docx"] dl dd::after {
  display: inline-block;
  padding-right: 20px;
  background-image: url(../img/doc.svg);
  background-repeat: no-repeat;
  background-position: 2px center;
  content: ".";
  text-indent: -9999px;
}
.information_list a[href$=".xls"] dl dd::after,
.information_list a[href$=".xlsx"] dl dd::after {
  display: inline-block;
  padding-right: 20px;
  background-image: url(../img/xls.svg);
  background-repeat: no-repeat;
  background-position: 2px center;
  content: ".";
  text-indent: -9999px;
}
.information_list a[href$=".pptx"] dl dd::after,
.information_list a[href$=".ppt"] dl dd::after {
  display: inline-block;
  padding-right: 20px;
  background-image: url(../img/pp.svg);
  background-repeat: no-repeat;
  background-position: 2px center;
  content: ".";
  text-indent: -9999px;
}
/**/
.information_list dl {
  display: flex;
}
.information_list dl dt {
  display: flex;
  justify-content: space-between;
  margin: 0 16px 0 0;
  min-width: 210px;
  font-weight: 400;
}
.information_list dl dt span {
  display: inline-flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  max-width: 110px;
  max-height: 24px;
  width: 100%;
  margin: auto 0 auto 12px;
  padding: 0 16px;
  font-size: 1.4rem;
  font-weight: 600;
  background-color: #ddf3e4;
  border-radius: 50px;
}
.information_list dl dt span.member {
  color: #0e6646;
  background-color: #dbefce;
}
.information_list dl dd {}
#information .btn {
  margin: 0 auto;
  text-align: center;
}
/* ----------------------------------------------- column-area */
#column_area {
  display: flex;
  width: 100%;
}
/* ----------------------------------------------- join */
#join {
  position: relative;
  width: 100%;
  background: url("../img/backimage-joinus.jpg") no-repeat center/100% 100%;
  overflow: hidden;
}
#join::before {
  position: absolute;
  display: inline-block;
  content: "";
  margin: 0 auto;
  bottom: -180px;
  left: 0;
  right: 0;
  width: 100%;
  height: 678px;
  background: url("../img/back_line_joinus.webp") no-repeat center;
}
#join .inner {
  position: relative;
  margin: 0 auto;
  padding: 54px 0 64px;
  width: calc(100% - 100px);
  text-align: left;
}
#join h2 {
  position: relative;
  z-index: 30;
}
#join figure {
  position: absolute;
  top: 56px;
  right: 16px;
  z-index: 20;
}
#join figure img {
  max-width: 276px;
  width: 100%;
  height: auto;
}
/*fadeIn*/
#join .fadeIn {
  opacity: 0;
  transition: all .6s ease-out;
  transition-delay: .2s;
}
#join .fadeIn.right-in {
  transform: translate(20px,0);
}
#join .fadeIn.left-in {
  transform: translate(-20px,0);
}
#join .fadeIn.scrollin {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}
/**/
#join .inner_box {
  position: relative;
  margin: 0 auto;
  padding: 60px 50px;
  background-color: #fff;
  box-shadow: 0 0 10px -4px rgb(0 0 0/0.07);
}
#join .inner_box::before {
  position: absolute;
  content: "";
  top: -3px;
  left: -3px;
  width: 42px;
  height: 42px;
  background-repeat: no-repeat;
  background-image: url("../img/join_box_01.png");
  background-size: contain;
}
#join .inner_box::after {
  position: absolute;
  content: "";
  bottom: -3px;
  right: -3px;
  width: 42px;
  height: 42px;
  background-repeat: no-repeat;
  background-image: url("../img/join_box_02.png");
  background-size: contain;
}
#join h3 {
  font-family: 'ZenMaruGothic';
  font-size: 4.0rem;
  color: #1c994e;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 1469px) {
  #join h3 {
    font-size: 3.2rem;
  }
  @media screen and (max-width: 1279px) {
    #join h3 {
      font-size: 2.8rem;
    }
  }
}
#join h4 {
  margin-bottom: 28px;
  font-size: 2.6rem;
}
#join h4 .box {
  margin-right: 20px;
  padding: 6px 20px;
  font-size: 1.5rem;
  color: #fff;
  background-color: #78c74f;
  border-radius: 6px;
}
#join h4 .dots {
  background-image: radial-gradient(circle at center, #78c74f 20%, transparent 20%); /* 点の色とサイズ調整 */
  background-position: top right; /* 点の位置 */
  background-repeat: repeat-x; /* 横方向に繰り返し */
  background-size: 1em 0.6em; /* 点の間隔とサイズ調整 */
  padding-top: .8em; /* 縦方向の位置調整 */
}
#join .point_list {
  margin-bottom: 32px;
}
#join .point_list li {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
  padding: 12px 20px;
  color: #3f9910;
  background-color: #eff1f4;
}
#join .point_list li::before {
  display: inline-block;
  content: "";
  margin-right: 14px;
  width: 52px;
  height: 52px;
  background-repeat: no-repeat;
  background-image: url("../img/join_icon_sample.png");
  background-size: contain;
}
.join_btn {}
.join_btn a {
  display: inline-block;
  border-radius: 20px;
  transition: .3s;
}
.join_btn a:hover {
  box-shadow: 0 4px 24px -4px rgb(52 163 67 / 0.85);
}
.join_btn img {
  max-width: 500px;
  width: 100%;
  height: auto;
}
/*一時的テキスト表示用*/
#join .ex_text {
  margin-bottom: 60px;
  font-size: 1.9rem;
}

/* ----------------------------------------------- specialist */
#specialist {
  position: relative;
  width: 100%;
  background-color: #eef7e4;
  overflow: hidden;
}
#specialist::before {
  position: absolute;
  display: inline-block;
  content: "";
  margin: 0 auto;
  top: -100px;
  left: 0;
  right: 0;
  width: 100%;
  height: 678px;
  background: url("../img/back_line_specialist.webp") no-repeat center;
}
#specialist .inner {
  position: relative;
  margin: 0 auto;
  padding: 54px 0 64px;
  width: calc(100% - 100px);
  text-align: left;
  z-index: 20;
}
#specialist h2 {}
#specialist .inner_box {
  position: relative;
  margin: 0 auto;
  padding: 60px 50px;
  background-color: #fff;
  box-shadow: 0 0 10px -4px rgb(0 0 0/0.07);
}
#specialist .inner_box::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background-color: #17916e;
  clip-path: polygon(0 100%,100% 0,0 0);
}
#specialist h3 {
  position: relative;
  font-family: 'ZenMaruGothic';
  font-size: 4.0rem;
  color: #005b45;
  letter-spacing: 0.1em;
  z-index: 10;
}
@media screen and (max-width: 1469px) {
  #specialist h3 {
    font-size: 3.2rem;
  }
  @media screen and (max-width: 1279px) {
    #specialist h3 {
      font-size: 2.8rem;
    }
    @media screen and (max-width: 1149px) {
      #specialist h3 {
        font-size: 2.3rem;
      }
    }
  }
}
#specialist h3::after {
  position: absolute;
  display: inline-block;
  content: "";
  bottom: 0;
  right: 0;
  width: 98px;
  height: 98px;
  background-repeat: no-repeat;
  background-image: url("../img/illust_inhaler.png");
  background-size: contain;
  background-position: bottom;
  z-index: -1;
}
@media screen and (max-width: 1469px) {
  #specialist h3::after {
    width: 80px;
    height: 80px;
  }
  @media screen and (max-width: 1279px) {
    #specialist h3::after {
      width: 72px;
      height: 72px;
    }
  }
}
#specialist .btn_list {
  margin: 60px 0;
}
#specialist .btn_list li {
  margin-bottom: 8px;
}
#specialist .btn_list a {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 36px;
  font-size: 2.0rem;
  color: #fff;
  background-color: #17916e;
  border-radius: 100px;
}
#specialist .btn_list a:hover {
  background-color: #001926;
}
/*icon*/
#specialist .btn_list a::before {
  display: inline-block;
  content: "";
  margin-right: 14px;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-size: contain;
}
#specialist .btn_list li.about a::before {
  background-image: url("../img/specialist_icon_about.png");
}
#specialist .btn_list li.rule a::before {
  background-image: url("../img/specialist_icon_rule.png");
}
#specialist .btn_list li.app a::before {
  background-image: url("../img/specialist_icon_application.png");
}
#specialist .btn_list li.list a::before {
  background-image: url("../img/specialist_icon_list.png");
}
/**/
#specialist .btn_list a::after {
  position: absolute;
  display: inline-block;
  content: "";
  margin: auto 0;
  top: 0;
  bottom: 0;
  right: 28px;
  width: 9px;
  height: 9px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
}
/*fadeUp*/
#specialist .fadeUp {
  opacity: 0;
  transform: translate(0,60px);
  transition: all .6s ease-out;
  transition-delay: .2s;
}
#specialist .fadeUp.scrollin {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}
/**/
#specialist figure {
  margin: 76px 0 0;
  display: flex;
  justify-content: space-between;
  align-content: flex-end;
}
#specialist figure img {
  margin: 10px;
  max-width: 280px;
  max-height: 280px;
  width: 100%;
  height: auto;
}