/* ==================================================
   File: main.css
   Purpose: 特定の箇所のみ適用するスタイル
================================================== */

/* ===== TOPページ ====== */
.first-view {
   width: 100%;
   height: 100svh;
   margin-bottom: 89px;
   background-image: url('../images/top/bg_first_view.jpg');
   background-size: auto;
   background-repeat: no-repeat;
   background-position: right 25% top;
}
.first-view-block {
   position: relative;
   height: 100svh;
   padding-top: 33svh;
}
.first-view .text1 {
   position: absolute;
   width: 328px;
}
.first-view .text-wrapper {
   position: absolute;
   bottom: 40px;
   left: 0;
   width: 114%;
   max-width: 1139px;
   container-type: inline-size;
}
.first-view .text-wrapper div {
   overflow: hidden;
}
.top-catchphrase{
   display: inline-block;
   color: #FFFFFF;
   font-size: 9.5cqw;
   font-family: var(--font-lato);
   font-weight: 700;
   line-height: 140px;
   opacity: 0;
   transition: all 1s;
   transform: translateY(150px);
   visibility: hidden;
   white-space: nowrap;
}
.top-catchphrase.loaded {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}
.first-view .text-wrapper div span {
   font-size: 9.5cqw;
   font-weight: 700;
   background: linear-gradient(to right, #b6f09e 0%, #2bb7a0 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}
@media (max-width: 1139px) {
   .first-view .text-wrapper {
      width: 100%;
   }
}
@media (max-width: 768px) {
    .first-view {
      margin-bottom: 0;
      background-size: cover;
      background-position: right 22% top;
   }
   .first-view .text1 {
      bottom: 263px;
      width: 205px;
   }
   .first-view .text-wrapper {
      bottom: 0;
   }
   .top-catchphrase {
      padding-left: 15px;
   }
   .top-catchphrase,
   .first-view .text-wrapper div span {
      font-size: 61px;
      line-height: 1em;
   }
}
.top-about{
   margin-bottom: 137px !important;
}
.top-about-text {
   padding-right: 36px;
}
.top-about-img1 {
   width: 36vw;
   padding-left: 36px;
}
.top-about-img1 img {
   width: 100%;
}
.bg-mission {
   position: absolute;
   width: 100%;
   height: 42.1vw;
   bottom: 14.7%;
   left: 0;
   background-image: url('../images/top/bg_mission.svg');
   background-size: auto;
   background-repeat: no-repeat;
   background-position: center;
   z-index: -1;
}
.top-about .pc-show {
   display: block;
}
.top-about .sp-show {
   display: none;
}
@media (max-width: 768px) {
   .top-about{
      margin-bottom: 124px !important;
   }
   .top-about-text {
      padding-right: 0;
   }
   .top-about-img1 {
      width: 100%;
      margin-bottom: 84px;
      padding-left: 0;
   }
   .top-about .sp-show {
      display: block;
   }
   .top-about .pc-show {
      display: none;
   }
}

/*------ スライダー ------*/
.slider {
   width: 100%;
   overflow: hidden;
}
.slide-track {
   width: calc((100% * 2) + (25px * 9));
   animation: slide linear infinite;
   animation-duration: 60s;
   will-change: transform;
   gap: 25px;
}
@keyframes slide {
   from { transform: translateX(0); }
   to   { transform: translateX(-50%); }
}
.slide {
   border-radius: 1.7rem;
   overflow: hidden;
}
.slide-img1,
.slide-img3,
.slide-img5 {
   width: 19.4%;
   height: 25vw;
}
.slide-img2,
.slide-img4 {
   width: 15.3%;
   height: 19.4vw;
}
.slide-img1 {
   margin-top: 17px;
}
.slide-img2 {
   margin-top: 66px;
}
.slide-img4 {
   margin-top: 40px;
}
.slide-img5 {
   margin-top: 67px;
}
.slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
@media (max-width: 768px) {
   .slide-track {
      width: calc((((280px * 3) + (200px * 2)) * 2) + (25px * 9));
   }
   .slide-img1,
   .slide-img3,
   .slide-img5 {
      width: 280px;
      height: 360px;
   }
   .slide-img2,
   .slide-img4 {
      width: 200px;
      height: 279px;
   }
}

.top-service-wrapper {
   gap: 83px;
}
.top-service {
   position: relative;
   justify-content: flex-end;
   width: 100%;
   height: 19vw;
   padding: 36px 28px;
   background-color: rgba(0, 0, 0, 0.1);
   transition: all 0.5s;
}
.top-service::after {
   content: "";
   position: absolute;
   inset: 0;
   background-size: cover;
   z-index: -1;
}
.top-service1::after {
   background-image: url('../images/top/bg_service1.jpg');
   background-position: top 20% center;
}
.top-service2::after {
   background-image: url('../images/top/bg_service2.jpg');
   background-position: bottom;
}
.top-service3::after {
   background-image: url('../images/top/bg_service3.jpg');
   background-position: center;
}
.top-service4::after {
   background-image: url('../images/top/bg_service4.jpg');
   background-position: right bottom;
}
.top-service1:hover,
.top-service2:hover,
.top-service3:hover,
.top-service4:hover {
   background: linear-gradient(
      to right,
      rgba(182, 240, 158, 0.5),
      rgba(43, 183, 160, 0.5)
   );
}
.top-service div {
   position: relative;
   color: #FFFFFF;
}
.top-service .service-eng-title {
   position: absolute;
   right: 0;
   bottom: 0;
   color: rgba(255, 255, 255, 0.7);
   font-family: var(--font-lato);
   font-size: 5rem;
   font-weight: 700;
   text-align: right;
   line-height: 1em;
   white-space: nowrap;
}
@media (max-width: 1000px) {
   .top-service {
      height: 280px;
   }
}
@media (max-width: 768px) {
   .top-service-section {
      padding-top: 29px !important;
   }
   .top-service .service-eng-title {
      position: relative;
      top: 0;
      right: unset;
      left: 0;
      bottom: unset;
      color: #FFFFFF;
      font-size: 46px;
      text-align: left;
   }
   .top-service div {
      font-size: 24px !important;
   }
}

.top-company {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 530px;
   margin-bottom: 213px !important;
}
.top-company::after {
   content: '';
   position: absolute;
   top: 0;
   left: calc(-1 * (50vw - 50%));
   width: calc((50vw - 50%) + 100%);
   height: 100%;
   background-image: url('../images/top/bg_company.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: bottom center;
   border-radius: 0 40px 40px  0;
   z-index: -1;
}
.top-company-bg-wrapper img {
   width: 100%;
   height: 100%;
}
.top-company-list-wrapper {
   width: 46%;
   height: 60%;
   padding: 0 38px 0 65px;
   background-color: #FFFFFF;
   border-radius: 50px 0 0 50px;
}
.top-company-list-wrapper ul  {
   width: 100%;
}
.top-company-list-wrapper ul li {
   padding: 18px 20px 18px 5px;
   border-bottom: 1px solid;
   border-image: linear-gradient(to right, #b6f09e 0%, #2bb7a0 100%) 1;
}
.top-company-list-wrapper ul li:last-child {
   border: none;
}
.top-company-list-wrapper ul li a {
   justify-content: space-between;
   color: #00be32;
   font-size: 1.125rem;
}
.top-company-slide {
   overflow: hidden;
}
.top-company-slide div {
   width: fit-content;
   animation: slide linear infinite;
   animation-duration: 60s;
   gap: 4em;
   will-change: transform;
}
.top-company-catchphrase {
   background: linear-gradient(to right, #b6f09e 0%, #2bb7a0 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-family: var(--font-lato);
   font-size: 192px;
   font-weight: 100;
   white-space: nowrap;
}
@media (max-width: 768px) {
   .top-company {
      flex-direction: column;
      justify-content: unset;
      align-items: center;
      height: 530px;
      margin-bottom: 68px !important;
      padding-top: 16px;
   }
   .top-company::after {
      content: '';
      position: absolute;
      top: 0;
      left: calc(-1 * (50vw - 50%));
      width: calc((50vw - 50%) + 100% + 16px);
      background-position: center;
      border-radius: 0;
   }
   .top-company .heading-wrapper {
      margin-bottom: 39px !important;
   }
   .top-company-list-wrapper {
      position: relative;
      right: -16px;
      width: 100%;
      height: 57%;
      padding: 0 33px;
   }
   .top-company-catchphrase {
      font-size: 120px;
   }
}

.bg-top-recruit {
   background-image: url('../images/top/bg_recruit.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}
@media (max-width: 768px) {
   .bg-top-recruit {
      background-size: auto 100%;
      background-position: -15% auto;
   }
}
.top-news .heading-wrapper {
   margin-right: 211px;
}
.top-news .btn {
   margin-bottom: 4rem;
}
.top-news .pc-show {
   display: flex;
}
.top-news .sp-show {
   display: none;
}
@media (max-width: 768px) {
   .top-news-section {
      padding-bottom: 22px !important;
   }
   .top-news-list {
      margin-bottom: 65px;
   }
   .top-news .pc-show {
      display: none;
   }
   .top-news .sp-show {
      display: flex;
      justify-content: center;
   }
   .top-news .btn {
      margin-bottom: 0;
   }
}

.top-contact {
   position: relative;
   height: 320px;
   background-image: url('../images/top/bg_contact.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top left;
}
.top-contact-wrapper {
   position: relative;
   left: 50%;
   width: fit-content;
   margin-left: 37px;
}
@media (max-width: 768px) {
   .top-contact {
      display: flex;
      justify-content: center;
      align-items: center;
      background-position: -70px top;
   }
   .top-contact-wrapper {
      left: unset;
   }
   .top-contact-wrapper .heading2-top {
      text-align: center;
   }
}

/* ===== companyページ ====== */
.company-decoration1 {
   position: absolute;
   top: 226.5px;
   right: calc(-1 * (50vw - 50%));
   width: calc((42% - 60px) + (50vw - 50%));
   height: 526px;
   background-color: #FFFFFF;
   border-radius: 45px 0 0 45px;
}
.company-message {
   width: 57.8%;
}
.company-message-catchcopy {
   display: inline-block;
   margin-bottom: 35px;
   font-size: 30px;
   line-height: 50px;
   white-space: nowrap;
	text-align:justify;
}
.message-signature {
   font-size: 30px;
   text-align: right;
}
.message-signature span {
   margin-right: 1em;
   font-size: 14px;
}
.access-conteiner h3 {
   display: inline-block;
   width: 100%;
   padding: 33px 0;
   border-bottom: 1px solid #333333;
   color: #00BE32;
   font-size: 18px;
}
.access-wrapper {
   padding: 34px 0;
}
.googlemap-wrapper {
   margin-top: 100px;
}
@media (max-width: 768px) {
   .company-decoration1 {
      position: relative;
      top: 0;
      right: unset;
      width: 100%;
      height: 64vw;
      margin-bottom: 41px;
      border-radius: 45px ;
   }
	 .company-message {
      width: 100%;
   }
   .company-message-catchcopy {
      margin-bottom: 35px;
      font-size: 26px;
      line-height: auto;
      white-space: wrap;
   }
   .message-signature {
      font-size: 24px;
      text-align: right;
      padding-right: 22px;
   }
}

/* ===== serviceページ ====== */
.services-conteiner {
   gap: 140px;
}
.service-img img {
   width: 100%;
}
.service-detail {
   padding-left: 78px;
}
.service-detail h2 {
   display: inline-block;
   margin-bottom: 35px;
   color: #808080;
   font-size: 14px;
   font-family: var(--font-lato);
}
.service-detail h2 span {
   font-size: 30px;
   font-weight: 700;
}
.service-catchcopy {
   display: inline-block;
   margin-bottom: 17px;
   font-size: 22px;
   line-height: 30px !important;
}
.service-detail p {
   line-height: 38px;
}
@media (max-width: 768px) {
   .service .page-overview-wrapper {
      margin-bottom: 0 !important;
   }
   .services-conteiner {
      gap: 86px;
   }
   .service-img {
      margin-bottom: 25px;
   }
   .service-detail {
      padding-left: 0;
   }
}
@media (max-width: 470px) {
   .service .heading2-page-long br {
      display: none;
   }
}

/* ===== News一覧ページ ====== */
.categories-conteiner {
   margin-bottom: 115px;
}
.category-wrapper {
   padding: 0 78px 25px 32px;
   border-bottom: 2px solid #E5E5E5;
}
.category-wrapper.active {
   border-bottom: 2px solid #00BE32;
}
.category-wrapper:first-child {
   padding: 0 78px 25px 0;
}
.category-wrapper a {
   font-size: 26px;
   line-height: 21px;
}
@media (max-width: 768px) {
   .categories-conteiner {
      margin-bottom: 72px;
   }
   .category-wrapper {
      padding: 0 10% 20px 8px;
   }
   .category-wrapper:first-child {
      padding: 0 10% 20px 8px;
   }
   .category-wrapper a {
      font-size: 21px;
      line-height: 21px;
   }
}

/* ===== 採用情報ページ ====== */
.recruit-cards-conteiner {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
   justify-content: center;
   gap: 2rem;

   /* 中央寄せを安定させる */
   justify-items: center;
}
.recruit-card {
   width: 310px;
   height: 360px;
   padding: 30px;
   background-color: #FFFFFF;
   border-radius: 20px;
}
.recruit-card-img-wrapper {
   height: 29%;
   margin-bottom: 19px;
}
.recruit-card-img-wrapper img {
   height: 100%;
}
.recruit-card-text-wrapper h3 {
   display: inline-block;
   width: 100%;
   margin-bottom: 10px;
   color: #006400;
   font-size: 20px;
   line-height: 42px;
   text-align: center;
}
.recruit-card-text-wrapper p {
   line-height: 24px;
}
.requirements {
   margin-bottom: 138px;
}
.requirements .overview {
   margin-bottom: 48px;
}
.requirements .overview-img-wrapper img {
   width: 100%;
}
.requirements .overview-text-wrapper {
   padding-left: 78px;
}
.requirements .overview-text-wrapper h3 {
   display: inline-block;
   margin-bottom: 28px;
   font-size: 24px;
   line-height: 40px;
}
.accordion-conteiner {
   border: 1px solid #B2EBC1;
   border-radius: 18px;
}
.accordion-conteiner p{
   justify-content: space-between;
   width: 100%;
   padding: 20px 33px;
   background-color: #E5F8EA;
   border-radius: 18px;
   color: #006400;
   font-size: 24px;
   line-height: 40px;
   cursor: pointer;
   transition: all 1s;
}
.accordion-conteiner p::after {
   content: '＋';
   display: flex;
   justify-content: center;
   align-items: center;
   width: 47px;
   height: 47px;
   background-color: #006400;
   border-radius: 50%;
   color: #FFFFFF;
}
.accordion-conteiner p.open {
   border-radius: 18px 18px 0 0;
}
.accordion-conteiner p.open::after {
   content: 'ー';
}
.accordion-conteiner .detail-wrapper {
   display: none;
   padding: 48px 90px 0 90px;
}
.accordion-conteiner .detail {
   margin-bottom: 114px;
}
.accordion-conteiner .detail dt {
   margin-right: 0;
   color: #000000;
}
.accordion-conteiner .detail dd {
   padding-right: 110px;
}
@media (max-width: 768px) {
   .requirements .overview-img-wrapper img {
      margin-bottom: 35px;
   }
   .requirements .overview-text-wrapper {
      padding-left: 0;
   }
   .accordion-conteiner .detail-wrapper {
      padding: 48px 33px 0 33px;
   }
   .accordion-conteiner .detail dd {
      padding-right: 0;
   }
}


/* ===== 問い合わせページ ====== */
.contact .explanation {
   padding: 90px 85px;
}
.contact .contents {
   padding-top: 80px;
   border-top: 0.5px solid #333333;
}
@media (max-width: 768px) {
   .contact .contents {
      padding: 80px 1rem 0 1rem;
   }
}