/* ==================================================
   File: common.css
   Purpose: サイト全体で共通して使うスタイル
================================================== */
:root{
   --font-lato: "lato", sans-serif;
   --font-noto-sans: "Noto Sans JP", sans-serif;
   --font-montserrat: "montserrat", sans-serif;
   --text-gradation: linear-gradient(to right, #b6f09e 0%, #2bb7a0 100%);
   --font-24: 1.5rem;
   --font-28: 1.75rem;
   --page-company-img: url('../images/company/bg_company.jpg');
   --page-service-img: url('../images/service/bg_service.jpg');
   --page-news-img: url('../images/news/bg_news.jpg');
   --page-recruit-img: url('../images/recruit/bg_recruit.jpg');
   --page-contact-img: url('../images/contact/bg_contact.jpg');
   --page-privacy-policy-img: url('../images/privacy-policy/bg_privacy-policy.jpg');
   --bg-gradation: linear-gradient(to right, #2bb7a0 0%, #b6f09e 100%);
}
*:not(iframe) {
   height: auto;
   margin: 0;
   padding: 0;
   font-size: 18px;
   font-family: var(--font-noto-sans);
   font-weight: 400;
   box-sizing: border-box;
}
body {
   opacity: 0;
   transition: opacity 1.2s ease;
}
body.loaded {
   opacity: 1;
}
ul, ol {
   list-style: none;
}

a {
   text-decoration: none;
   color: inherit;
}
p {
   line-height: 2em;
}
section {
   position: relative;
   width: 100%;
   padding: 93px 16px;
}
hr {
   margin-bottom: 1.5em;
}
.wrapper {
   position: relative;
}
.block1 {
   position: relative;
   width: 69%;
   margin: auto auto;
}
.block2 {
   position: relative;
   width: 100%;
}
@media (max-width: 1440px) {
   .block1 {
      width: 100%;
      max-width: 1000px;
   }
}
@media (max-width: 768px) {
   section {
      padding: 64px 16px;
   }
}

/* ===== 見出し ====== */
.heading-wrapper {
   margin-bottom: 4rem;
   overflow: hidden;
}
.heading2-top {
   overflow: hidden;
}
.heading2-top span{
   display: inline-block;
}
.heading2-top .eng-title {
   font-family: var(--font-lato);
   font-size: 4.375rem;
   font-weight: 700;
}
.heading2-white span{
   color: #FFFFFF;
}
.heading2-recruit {
   display: inline-block;
   padding: 0 0.5em 21px 0.5em;
   border-bottom: 1px solid #FFFFFF;
   font-size: 30px;
   line-height: 42px;
}
.page-heading {
   color: #FFFFFF;
}
.page-heading span {
   font-size: 1.25rem;
}
.page-heading .eng-title {
   font-family: var(--font-lato);
   font-size: 70px;
}
.heading2-page .eng-title {
   font-family: var(--font-montserrat);
   font-size: 70px;
}
.heading2-page-long {
   font-size: 1.875rem;
}
.heading2-page-long span {
   font-size: 2.5rem;
   font-weight: 500;
   letter-spacing: 0.1em;
}
.heading-news {
   font-size: 40px;
}
.heading-post {
   font-size: 30px;
}
@media (max-width: 768px) {
   .heading-wrapper {
      margin-bottom: 46px !important;
   }
   .page-heading span {
      font-size: 18px;
   }
   .heading2-top .eng-title {
      font-size: 54px;
   }
   .heading2-page-long {
      font-size: 22px;
   }
   .heading2-page-long span {
      font-size: 31px;
      font-weight: 400;
   }
   .heading2-page .eng-title {
      font-size: 54px;
   }
}

/* ===== テキスト ====== */
.text-center {
   text-align: center;
}
.text-white {
   color: #FFFFFF;
}
.text-gradation {
   background: var(--text-gradation);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
.font-24 {
   font-size: var(--font-24);
}
.font-28 {
   font-size: var(--font-28);
}
@media (max-width: 768px) {
   .sp-text-left {
      text-align: left;
   }
}

/* ===== ボタン ====== */
.btn {
   display: inline-block;
   border-radius: 27px;
   font-family: var(--font-noto-sans) !important;
}
.btn-header {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 204px;
   height: 54px;
   background: linear-gradient(to right, #2bb7a0 0%, #b6f09e 100%);
   color: #FFFFFF;
}
.btn-header img {
   width: 34px;
   margin-left: 1.25rem;
}
.btn-top {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 240px;
   height: 64px;
   border-radius: 32px;
}
.btn-top span {
   font-size: 1rem;
   /* transition: transform 0.3s ease; */
}
/* .btn-top:hover span {
   animation: btn-text-move 0.3s ease forwards;
} */
/* @keyframes  btn-text-move {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(6px);
  }
  60% {
    opacity: 0;
    transform: translateY(10px);
  }
  61% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
} */
.btn-green {
   background: linear-gradient(to right, #2bb7a0 0%, #b6f09e 100%);
   background-color: none;
   transition: all 0.5s;
}
.btn-top.btn-green::after {
   content: '';
   display: inline-block;
   width: 66px;
   height: 25px;
   margin-left: 0.8125rem;
   transition: all 0.5s;
}
.btn-top.btn-green::after {
   background-image: url('../images/btn_arrow.svg');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}
.btn-green span {
   color: #FFFFFF;
   transition: all 0.5s;
}
.btn-top:hover.btn-green {
   background: #FFFFFF;
}
.btn-top:hover.btn-green span {
   color: #00BE32;
}
.btn-top:hover.btn-green::after {
   background-image: url('../images/btn_arrow_green.svg');
}
.btn-white {
   background: none;
   background-color: #FFFFFF;
   transition: all 0.5s;
}
.btn-white::after {
   content: '';
   display: inline-block;
   width: 66px;
   height: 25px;
   margin-left: 0.8125rem;
   background-image: url('../images/btn_arrow_green.svg');
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   transition: all 0.5s;
}
.btn-white span {
   color: #00BE32;
}
.btn-top:hover.btn-white {
   background: linear-gradient(to right, #2bb7a0 0%, #b6f09e 100%);
}
.btn-top:hover.btn-white span {
   color: #FFFFFF;
}
.btn-top:hover.btn-white::after {
   background-image: url('../images/btn_arrow.svg');
}
.contact .btn-wrapper {
   padding: 53px 0;
}
.btn-contact {
   width: 310px;
   height: 64px;
   border: none;
   border-radius: 32px;
   cursor: pointer;
}
.btn-contact.btn-green {
   color: #FFFFFF;
}
.btn-contact.btn-white {
   color: #00BE32;
   background-color: #FFFFFF;
   border: 1px solid #00BE32;
}
.icon-arrow {
   position: relative;
   width: 33px;
   height: 33px;
   background: #FFFFFF;
   border-radius: 50%;
   overflow: hidden;
   z-index: 1;
}
.icon-arrow::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   padding: 2px;
   background: linear-gradient(to right, #b6f09e 0%, #2bb7a0 100%);
   -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   z-index: -1;
}
.icon-arrow::after {
   content: "";
   display: inline-block;
   width: 9px;
   height: 9px;
   margin-right: 2px;
   border-top: 2px solid;
   border-right: 2px solid;
   border-image: linear-gradient(to right, #b6f09e 0%, #2bb7a0 100%) 1;
   transform: rotate(45deg);
   transition: transform 0.3s ease;
}
.icon-arrow-hover:hover .icon-arrow::after {
   animation: arrow-move 0.6s ease forwards;
}
@keyframes arrow-move {
  0% {
    transform: translateX(0) rotate(45deg);
  }
  40% {
    transform: translateX(6px) rotate(45deg);
  }
  60% {
    opacity: 0;
    transform: translateX(10px) rotate(45deg);
  }
  61% {
    opacity: 0;
    transform: translateX(-10px) rotate(45deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) rotate(45deg);
  }
}
.arrow-black::before {
   background: none;
   border: 1px solid #000000;
}
.icon-arrow::after {
   border-image: none;
}
.page-top-wrapper {
   position: fixed;
   right: 2px;
   bottom: 1rem;
   background-color: #FFFFFF;
   border-radius: 50%;
   z-index: 999;
}
.page-top {
   width: 60px;
   height: 60px;
   font-family: var(--font-lato);
   font-size: 12px;
}
.page-top::before {
   content: "";
   display: inline-block;
   width: 9px;
   height: 9px;
   border-top: 1px solid;
   border-left: 1px solid;
   border-image: linear-gradient(to right, #b6f09e 0%, #2bb7a0 100%) 1;
   transform: rotate(45deg);
}
@media (max-width: 768px) {
   .btn-wrapper {
      display: flex;
      justify-content: center;
   }
}

/* ===== リスト ====== */
.list-type1 {
   width: 100%;
}
.list-type1 li{
   width: 100%;
   padding: 0 24px;
   border-bottom: 1px solid #000000;
}
.list-type1 li:last-child {
   border-bottom: none;
}
.list-type1 li a {
   position: relative;
   width: 100%;
   padding: 25px 0;
}
.list-type1 li a span {
   display: inline-block;
   height: fit-content;
   margin-right: 13px;
   padding: 0 7px;
   background-color: #00be32;
   color: #FFFFFF;
   font-size: 0.55rem;
}
.list-type1 li a time {
   display: inline-block;
   margin-right: 31px;
}
.list-type1 li a .icon-arrow {
   position: absolute;
   right: 0;
}
.list-type2 li {
   padding: 42px 0;
   border-top: 0.5px solid #333333;
}
.list-type2 li:last-child {
   border-bottom: 0.5px solid #333333;
}
.list-type2 li a div time {
   font-size: 14px;
   margin-right: 12px;
}
.list-type2 li a div span {
   padding: 0 8px;
   background: linear-gradient(to right, #b6f09e 0%, #2bb7a0 100%);
   border-radius: 5px;
   color: #FFFFFF;
   font-size: 0.625rem;
}
.list-type2 a {
   position: relative;
}
.list-type2 .icon-arrow {
   position: absolute;
   top: 50%;
   right: 0;
   color: #5CC937;
   transform: translateY(-50%);
}
.parentheses-num {
   padding-left: 0 !important;
   list-style: none !important;
   counter-reset: item
}
.parentheses-num > li {
  counter-increment: item
}
.parentheses-num > li::before {
  content: "(" counter(item) ") ";
}
.parentheses-num ol {
   padding-left: 2em !important;
}

/* ===== 固定ページ ====== */
.thumbnail-wrapper {
   width: 100%;
   margin-bottom: 68px;
}
.thumbnail-wrapper img {
   width: 100%;
}
.thumbnail_pc {
   display: block;
}
.thumbnail_sp {
   display: none;
}
.contents p,
.contents li {
   line-height: 30px;
}
.contents p,
.contents ul,
.contents ol {
   margin-bottom: 28px;
}
.contents ul,
.contents ol {
   padding-left: 1em;
}
.contents ul{
   list-style: inside;
}
.contents ol {
   list-style: decimal;
}
.contents h2 {
   font-size: 20px;
   line-height: 40px;
}
.page-heading-conteiner {
   width: 100%;
   height: 420px;
   margin-bottom: 67px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   overflow: hidden;
}
.page-heading-company {
   background-image: var(--page-company-img);
}
.page-heading-service {
   background-image: var(--page-service-img);
}
.page-heading-news {
   background-image: var(--page-news-img);
}
.page-heading-recruit {
   background-image: var(--page-recruit-img);
}
.page-heading-contact {
   background-image: var(--page-contact-img);
}
.page-heading-privacy-policy {
   background-image: var(--page-privacy-policy-img);
}
.page-overview-wrapper {
   margin-bottom: 150px;
}
.page-overview-wrapper p{
   line-height: 32px;
}
.detail {
   display: flex;
   flex-wrap: wrap;
   width: 100%;
   margin-bottom: 191px;
}
.detail dt,
.detail dd {
   border-bottom: 1px solid #333333;
}
.detail dt {
   width: 24%;
   padding: 52px 0;
   margin-right: 6%;
   color: #006400;
}
.detail dd {
   width: 69%;
   padding: 52px 0;
}
@media (max-width: 768px) {
   .thumbnail-wrapper {
      width: 100%;
      margin-bottom: 46px;
   }
   .page-heading-conteiner {
      height: 240px;
      margin-top: 80px;
      margin-bottom: 32px;
   }
   .page-overview-wrapper {
      margin-bottom: 122px;
   }
   .detail {
      flex-direction: column;
      margin-bottom: 77px;
   }
   .detail dt {
      width: 100%;
      padding: 35px 1em 7px 1em;
      border-bottom: none;
   }
   .detail dd {
      width: 100%;
      padding: 7px 1em 35px 1em;
   }
   .thumbnail_sp {
      display: block;
   }
   .thumbnail_pc {
      display: none;
   }
}

/* ===== 投稿ページ ====== */
.post .heading-wrapper {
   margin-bottom: 40px;
}
.post .updated-at {
   font-size: 14px;
   margin-right: 12px;
}
.post .category {
   padding: 0 8px;
   background: linear-gradient(to right, #b6f09e 0%, #2bb7a0 100%);
   border-radius: 5px;
   color: #FFFFFF;
   font-size: 0.625rem;
}
.post .contents {
   padding: 56px 0;
   border-top: 0.5px solid #333333;
   border-bottom: 0.5px solid #333333;
}
.post-navigation__inner {
   justify-content: space-between;
   padding: 54px 0;
}
.post-navigation__inner .icon-arrow {
   color: #00be32;
}
.post-navigation__prev .icon-arrow {
   margin-right: 14px;
}
.post-navigation__prev .icon-arrow::after {
   margin-right: 0;
   margin-left: 2px;
   transform: rotate(-135deg);
}
.post-navigation__next .icon-arrow {
   margin-left: 14px;
}

/* ===== パンくずリスト ====== */
.breadcrumbs {
   width: 69%;
   margin: auto auto 73px auto;
   padding: 0 16px;
}
.breadcrumbs span {
   display: inline-block;
   margin: auto 1em;
}
.breadcrumbs span:first-child {
   margin-left: 0;
}
.breadcrumbs span,
.breadcrumbs span a{
   font-family: var(--font-lato);
   font-weight: 700;
}
.breadcrumbs span a {
   color: #808080;
}
.breadcrumbs span span:last-child {
   color: #006400;
}
@media (max-width: 1440px) {
   .breadcrumbs {
      width: 100%;
      max-width: 1000px;
   }
}
@media (max-width: 768px) {
   .breadcrumbs {
      margin-bottom: 0 !important;
   }
}

/* ===== ページネーション ====== */
.pagination-conteiner {
   margin-top: 89px;
   padding: 48px 0;
}
.pagination-wrapper {
   justify-content: space-between;
   width: 100%;
}
.pagenation-numbers {
   gap: 26px;
}
.page-numbers:not(.prev):not(.next) {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 37px;
   height: 37px;
}
.page-numbers.current {
   color: #FFFFFF;
   background: linear-gradient(to right, #5CC937 0%, #2bb7a0 100%);
   border-radius: 50%;
}
.pagination-prev,
.pagenation-numbers,
.pagenation-next {
   width: fit-content;
   min-width: 84px;
}
.pagination-prev a,
.pagenation-next a {
   display: flex;
   align-items: center;
}
.pagination-prev a span,
.pagenation-next a span{
   font-weight: 700;
}
.pagination-wrapper .icon-arrow {
   color: #00be32;
}
.pagination-prev .icon-arrow {
   margin-right: 16px;
}
.pagination-prev .icon-arrow::after {
   margin-right: 0;
   margin-left: 2px;
   transform: rotate(-135deg);
}
.pagenation-next .icon-arrow {
   margin-left: 16px;
}

/* ===== フォーム ====== */
form {
   padding: 0 90px;
   margin-bottom: 190px;
}
.form-item {
   margin-bottom: 33px;
}
.form-item .label-wrapper {
   width: 22.8%;
   padding-top: 0.5rem;
}
.form-item .label-wrapper .required {
   display: inline-block;
   padding-left: 0.5em;
   color: #C80000;
}
.form-item .input-wrapper {
   width: 77%;
}
.form-item .input-wrapper .example {
   display: inline-block;
   margin-top: 15px;
   color: #808080;
   font-size: 12px;
}
input[type=text],
input[type=email],
textarea {
   width: 100%;
   height: 70px;
   background-color: #FFFFFF;
   border: none;
}
textarea {
   height: 200px;
}
.mw_wp_form_preview .required,
.mw_wp_form_preview .example {
   display: none !important;
}
.mw_wp_form_preview .label-wrapper {
   padding-top: 0 !important;
}
form .btn-wrapper {
   gap: 32px;
}
@media (max-width: 768px) {
   form {
      padding: 0;
      margin-bottom: 0;
   }
   .form-item {
      flex-direction: column !important;
   }
   .form-item .label-wrapper {
      width: 100%;
      padding-top: 0.5rem;
      padding-bottom: 20px;
   }
   .form-item .input-wrapper  {
      width: 100%;
   }
}

/* ===== flex ====== */
.flex-row {
   display: flex;
   flex-direction: row;
}
.flex-column {
   display: flex;
   flex-direction: column;
}
.center {
   justify-content: center;
   align-items: center;
}
.align-center {
   align-items: center;
}
.justify-center {
   justify-content: center;
}
@media (max-width: 768px) {
   .sp-flex-column.flex-row {
      flex-direction: column;
   }
   .sp-aligin-left {
      align-items: flex-start;
   }
}

/* ===== その他 ====== */
.bg-gradation {
   background: var(--bg-gradation);
}
.bg-gray {
   background-color: #F2F2F2 !important;
}
.width-half {
   width: 50%;
}
.no-headding-img {
   padding-top: 246px;
}
.pc-br {
   display: inline-block;
}
.sp-br {
   display: none;
}
.mt-30 {
   margin-top: 30px;
}
.mb-28 {
   margin-bottom: 28px;
}
.mb-33 {
   margin-bottom: 33px;
}
.mb-40 {
   margin-bottom: 40px;
}
.mb-100 {
   margin-bottom: 100px;
}
.mb-120 {
   margin-bottom: 120px;
}
.mb-112 {
   margin-bottom: 112px;
}
.mb-137 {
   margin-bottom: 137px;
}
.pt-37 {
   padding-top: 37px;
}
.pt-120 {
   padding-top: 120px;
}
.pr-36 {
   padding-right: 36px;
}
.pl-36 {
   padding-left: 36px;
}
.pb-30 {
   padding-bottom: 30px;
}
.fade-up {
   opacity: 0;
   visibility: hidden;
   transition: all 1s;
   transform: translateY(200px);
}
.fade-up.in-view {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}
@media (max-width: 768px) {
   .width-half {
      width: 100%;
   }
   .pc-br {
      display: none;
   }
   .sp-br {
      display: inline-block;
   }
}