@charset "UTF-8";

/* 
 Theme Name:　paddgate

all */

/* 共通 */

:root {
  --white: #F8F8F8;
  --green: #00A28D;
  --black2D: #2D2D2D;
  --sp-width: calc(100% - 48px);
  --sm-width: 960px;
  --md-width: 1200px;
  --lg-width: 1500px;
  --under-z-index: -1;
  --nomal-z-index: 0;
  --first-z-index: 1;
  --top-z-index: 10;
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', sans-serif;
  color: var(--black2D);
}

.top__ttl {
  position: relative;
  width: fit-content;
  font-size: clamp(2.25rem, 1.614rem + 3.18vw, 4rem);
  font-weight: bold;
  letter-spacing: 0.01em;
}

.top__ttl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -50px;
  width: 30px;
  height: 8px;
  background: var(--green);
}

.top__txt {
  font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
  letter-spacing: 0.1em;
}

.top__link {
  position: relative;
  padding: 10px 5% 10px 0;
  font-size: clamp(0.875rem, 0.648rem + 1.14vw, 1.5rem);
  letter-spacing: 0.1em;
  border-bottom: 2px solid var(--black2D);
}

.top__link:hover {
  border-bottom: 2px solid transparent;
}

.top__link::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--black2D);
}

.top__link:hover::before {
  width: 100%;
  transition: all 0.5s ease;
}

.top__link::after {
  content: "▶";
  position: absolute;
  top: 50%;
  right: 0;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 8px;
  background: var(--green);
  border-radius: 16px;
  transform: translate(0 , -50%);
}

.fixed_btn {
  display: none;
}

.fixed_btn:hover {
  transform: scale(1.1);
  transition: all 0.3s;
}

.fixed_btn.openbtn {
  position: fixed;
  bottom: 5%;
  right: 5%;
  z-index: var(--first-z-index);
  width: 80px;
  height: 80px;
  display: block;
  background: var(--green);
  border-radius: 40px;
}

.fixed_btn::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 14px;
  height: 14px;
  display: inline-block;
  border-top: 4px solid white;
  border-left: 4px solid white;
  transform: translate(-50% , 0) rotate(45deg);
}

.top__sp {
  display: none;
}

.page-ttl {
  color: white;
  font-size: clamp(2.25rem, 0.886rem + 6.82vw, 6rem);
  font-weight: bold;
  letter-spacing: 0.01em;
}

.page-ttl-txt {
  color: white;
  font-size: clamp(1rem, 0.795rem + 1.02vw, 1.563rem);
  letter-spacing: 0.1em;
}

.slide-in {
  animation: slidein 1s forwards;
}

@keyframes slidein {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.fade-in-r {
  animation: fadeinR 0.5s forwards;
}

@keyframes fadeinR {
  0% {
    transform: translateX(100%);
    opacity: 1;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.fade-in-l {
  animation: fadeinL 0.5s forwards;
}

@keyframes fadeinL {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

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

  .top__ttl::after {
    right: -30px;
    width: 20px;
    height: 6px;
  }

  .top__link {
    padding: 5px 10% 5px 0;
    border-bottom: 1px solid var(--black2D);
  }

  .top__link::after {
    width: 24px;
    height: 24px;
    font-size: 6px;
    border-radius: 12px;
  }

  .fixed_btn.openbtn {
    bottom: 2%;
    width: 50px;
    height: 50px;
    border-radius: 25px;
  }

  .top__pc {
    display: none;
  }

  .top__sp {
    display: block;
  }
}


/* ヘッダー */

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--top-z-index);
  width: 100%;
  height: 100px;
  background: white;
}

.header__content {
  margin: 0 auto;
  width: 90%;
  max-width: var(--md-width);
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-ttl {
  color: var(--green);
  font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
  font-weight: bold;
  letter-spacing: 0.075em;
}

.header-ttl:hover {
  transform: scale(1.05);
  transition: all 0.3s;
}

.header__nav {
  position: relative;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.header__nav-list {
  margin-left: 30px;
  font-size: 16px;
  letter-spacing: 0.1em;
}

.header__nav-list:hover {
  color: var(--green);
  transition: all 0.5s;
}

.header__nav-contact {
  position: relative;
  padding: 20px 50px;
  color: white;
  background: linear-gradient(to right, #007c6c 50%, var(--green) 50%) 100% 0;
  background-size: 200% 100%;
  border-radius: 50px;
  transition: all 0.5s;
}

.header__nav-contact:hover {
  background-position: 0 0;
}

.header__nav-sp {
  display: none;
}

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

  .header {
    height: 70px;
  }

  .header__content {
    width: var(--sp-width);
  }

  .header__nav {
    display: none;
  }

  .header__nav.active {
    z-index: var(--top-z-index);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: var(--white);
  }

  .header__nav-list {
    margin: 0 0 64px 0;
  }

  .header__nav-sp {
    display: flex;
  }
}


/* ハンバーガーメニュー */

.openbtn {
  display: none;
  position: relative;
  z-index: var(--top-z-index);
  right: 0px;
  cursor: pointer;
  width: 70px;
  height: 70px;
}

.openbtn span {
  display: inline-block;
  position: absolute;
  height: 2px;
  width: 45px;
  background: var(--green);
  transition: all 0.4s;
}

.openbtn span:nth-of-type(1) {
  top: 24px;
  right: 0;
}

.openbtn span:nth-of-type(2) {
  top: 34px;
  right: 0;
}

.openbtn span:nth-of-type(3) {
  top: 44px;
  right: 0;
}

.openbtn.active span:nth-of-type(1) {
  top: 35px;
  transform: rotate(-45deg);
}

.openbtn.active span:nth-of-type(2) {
  display: none;
}

.openbtn.active span:nth-of-type(3) {
  top: 35px;
  transform: rotate(45deg);
}

@media screen and (max-width: 768px) {
  .openbtn {
    display: block;
  }
}


/* kv */

.kv {
  padding-top: 100px;
  height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(./img/kv.png);
  background-size: cover;
  background-color: #BAD5D2;
  background-blend-mode: darken;
}

.kv__content {
  width: 90%;
  max-width: var(--md-width);
  color: white;
}

.kv__content-ttl {
  margin-bottom: 5%;
  font-size: clamp(2.25rem, 0.886rem + 6.82vw, 6rem);
  font-weight: bold;
  letter-spacing: 0.01em;
  line-height: 0.93em;
}

.kv__content-txt {
  font-size: clamp(1rem, 0.795rem + 1.02vw, 1.563rem);
  letter-spacing: 0.1em;
  line-height: 2.0em;
}

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

  .kv {
    padding-top: 70px;
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .kv__content {
    max-width: var(--sp-width);
  }
}


/* top__about */

.top__about {
  background: var(--white);
}

.top__about__contents {
  margin: 0 auto;
  padding: 7% 0;
  width: 90%;
  max-width: var(--md-width);
  opacity: 0;
}

.top__about__header {
  display: flex;
  justify-content: space-between;
}

.top__about__content-message {
  width: 57%;
  font-size: clamp(1.25rem, 0.932rem + 1.59vw, 2.125rem);
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.9em;
}

.top__about-content-deco {
  color: var(--green);
}

.top__about__content {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top__about__content-txt {
  width: 57%;
  font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
  letter-spacing: 0.1em;
  line-height: 2.1;
}

.top__about__visual {
  display: flex;
  justify-content: center;
  background-color: #BAD5D2;
}

.top__about__visual-img1,
.top__about__visual-img2,
.top__about__visual-img3,
.top__about__visual-img4 {
  width: 25%;
  max-width: 480px;
  aspect-ratio: 480 / 315;
  background-size: cover;
  background-color: #BAD5D2;
  background-blend-mode: darken;
}

.top__about__visual-img1 {
  background-image: url(./img/top_about1.jpeg);
}

.top__about__visual-img2 {
  background-image: url(./img/top_about2.jpeg);
}

.top__about__visual-img3 {
  background-image: url(./img/top_about3.jpeg);
}

.top__about__visual-img4 {
  background-image: url(./img/top_about4.jpeg);
}

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

  .top__about__contents {
    padding: 10% 0;
    width: var(--sp-width);
  }

  .top__about__header {
    display: flex;
    flex-direction: column;
  }

  .top__about__content-message {
    margin-top: 10%;
    width: 100%;
  }

  .top__about__content {
    flex-direction: column-reverse;
    align-items: end;
  }

  .top__about__content-txt {
    margin-bottom: 5%;
    width: 100%;
  }

  .top__about__visual {
    flex-wrap: wrap;
  }

  .top__about__visual-img1,
  .top__about__visual-img2,
  .top__about__visual-img3,
  .top__about__visual-img4 {
    width: 50%;
  }
}


/* top_service */

.top__service {
  display: flex;
  justify-content: center;
  background-image: url(./img/top_about4.jpeg);
  background-size: cover;
  background-color: #4AC3B3;
  background-blend-mode: overlay;
}

.top__service__contents {
  margin-top: 10%;
  width: 90%;
  max-width: var(--lg-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border-radius: 60px 0 0 0;
  opacity: 0;
}

.top__service__header {
  margin-top: 5%;
  width: 90%;
  max-width: var(--md-width);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top__service__content {
  margin: 3% 0;
  width: 90%;
  max-width: var(--md-width);
  display: flex;
  justify-content: space-between;
}

.top__service__topic {
  width: 48%;
  max-width: 570px;
}

.top__service__topic-img {
  width: 100%;
  height: auto;
}

.top__service__topic-ttl {
  margin: 5% 0;
  color: var(--green);
  font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
  font-weight: bold;
  letter-spacing: 0.1em;
}

.top__service__topic-txt {
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  letter-spacing: 0.1em;
  line-height: 1.93;
}

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

  .top__service__contents {
    width: 100%;
    border-radius: 30px 0 0 0;
  }

  .top__service__header {
    margin-top: 10%;
    width: var(--sp-width);
  }

  .top__service__content {
    margin: 10% 0;
    width: var(--sp-width);
    flex-direction: column;
    align-items: end;
  }

  .top__service__topic {
    width: 100%;
  }

  .top__service__topic-ttl {
    margin: 3% 0;
  }

  .top__service__topic-txt {
    margin-bottom: 5%;
  }
}


/* top__news */

.top__news {
  padding: 5% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
}

.top__news__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: var(--md-width);
}

.top__news__contents {
  margin-top: 2%;
  width: 90%;
  max-width: var(--md-width);
  display: flex;
  justify-content: space-between;
}

.top__news__content {
  width: 32%;
}

.top__news__content:hover {
  transform: scale(1.05);
  transition: all 0.3s;
}

.top__news__content-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 40px 0 0 0;
}

.top__news__content-label {
  margin-top: 4%;
  display: flex;
  align-items: center;
}

.top__news__content-tag {
  padding: 1% 7%;
  color: white;
  letter-spacing: 0.1em;
  background: var(--green);
}

.top__news__content-ymd {
  margin-left: 3%;
  letter-spacing: 0.1em;
}

.top__news__content-ttl {
  margin-top: 1%;
  letter-spacing: 0.1em;
}

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

  .top__news {
    padding: 10% 0;
  }

  .top__news__header {
    width: var(--sp-width);
  }

  .top__news__contents {
    margin-top: 5%;
    width: var(--sp-width);
    flex-direction: column;
    align-items: end;
  }

  .top__news__content {
    margin-bottom: 5%;
    width: 100%;
  }
}


/* top__contact */

.top__contact {
  padding: 10% 0;
  display: flex;
  justify-content: center;
  color: white;
  background-image: url(./img/top_contact.png);
  background-size: cover;
  background-color: #BAD5D2;
  background-blend-mode: darken;
}

.top__contact__content {
  width: 90%;
  max-width: var(--md-width);
}

.top__contact__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top__contact-ttl {
  position: relative;
  width: fit-content;
  font-size: clamp(1.75rem, 1.114rem + 3.18vw, 3.5rem);
  font-weight: bold;
  letter-spacing: 0.01em;
}

.top__contact-ttl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -50px;
  width: 30px;
  height: 8px;
  background: var(--green);
}

.top__contact-ttl-txt {
  font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
  letter-spacing: 0.1em;
}

.top__contact-link {
  position: relative;
  padding: 10px 5% 10px 0;
  font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
  letter-spacing: 0.1em;
  border-bottom: 2px solid white;
}

.top__contact-link:hover {
  border-bottom: 2px solid transparent;
}

.top__contact-link::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 2px;
  background: white;
}

.top__contact-link:hover::before {
  width: 100%;
  transition: all 0.5s ease;
}

.top__contact-link::after {
  content: "▶";
  position: absolute;
  top: 50%;
  right: 0;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #787582;
  font-size: 8px;
  background: white;
  border-radius: 16px;
  transform: translate(0 , -50%);
}

.top__contact-txt {
  margin-top: 3%;
  width: 100%;
  font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
  letter-spacing: 0.1em;
  line-height: 2.1;
}

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

  .top__contact__content {
    width: var(--sp-width);
    display: flex;
    flex-direction: column;
    align-items: end;
  }

  .top__contact-txt {
    margin: 5% 0;
  }

  .top__contact-link {
    padding: 5px 10% 5px 0;
    width: fit-content;
    font-size: clamp(0.875rem, 0.648rem + 1.14vw, 1.5rem);
    text-align: right;
    border-bottom: 1px solid white;
  }

  .top__contact-link::after {
    width: 24px;
    height: 24px;
    font-size: 6px;
    border-radius: 12px;
  }
}


/* about */

.about {
  padding-top: 100px;
  height: calc(75vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(./img/kv.png);
  background-size: cover;
  background-color: #BAD5D2;
  background-blend-mode: darken;
}

.about__content {
  width: 90%;
  max-width: var(--md-width);
}

.about__concept {
  margin: 0 auto;
  width: 90%;
  max-width: var(--md-width);
}

.about__concept-ttl {
  position: relative;
  margin: 5% 0;
  width: fit-content;
  font-size: clamp(1.75rem, 1.023rem + 3.64vw, 3.75rem);
  font-weight: bold;
  letter-spacing: 0.01em;
}

.about__concept-ttl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -50px;
  width: 30px;
  height: 6px;
  background: var(--green);
}

.about__concept__contents {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.about__concept__content {
  width: 45%;
}

.about__concept-message {
  font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.83;
}

.about__concept-deco {
  color: var(--green);
}

.about__concept-txt {
  margin-top: 5%;
  font-size: clamp(0.875rem, 0.693rem + 0.91vw, 1.375rem);
  letter-spacing: 0.1em;
  line-height: 2.4;
}

.about__concept-img {
  width: 50%;
  max-width: 590px;
  height: auto;
  object-fit: contain;
}

.about__company {
  margin: 5% auto 10%;
  width: 90%;
  max-width: var(--md-width);
}

.about__company-ttl {
  position: relative;
  margin-bottom: 3%;
  width: fit-content;
  font-size: clamp(1.5rem, 1.273rem + 1.14vw, 2.125rem);
  font-weight: bold;
  letter-spacing: 0.1em;
}

.about__company-ttl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -50px;
  width: 30px;
  height: 6px;
  background: var(--green);
}

.about__table {
  width: 100%;
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  letter-spacing: 0.1em;
}

.about__table-tr {
  border-top: 1px solid #B7B7B7;
  border-bottom: 1px solid #B7B7B7;
}

.about__table-td {
  padding: 2% 0;
  width: 25%;
  color: var(--green);
  font-weight: bold;
}

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

  .about {
    padding-top: 70px;
    height: 300px;
  }

  .about__content {
    width: var(--sp-width);
  }

  .about__concept {
    width: var(--sp-width);
  }

  .about__concept-ttl {
    margin: 10% 0;
  }

  .about__concept-ttl::after {
    right: -30px;
    width: 20px;
    height: 6px;
  }
  
  .about__concept__contents {
    flex-direction: column-reverse;
  }

  .about__concept__content {
    width: 100%;
  }

  .about__concept-img {
    margin-bottom: 10%;
    width: 100%;
  }

  .about__company {
    width: var(--sp-width);
  }

  .about__company-ttl {
    margin-bottom: 5%;
  }

  .about__company-ttl::after {
    right: -30px;
    width: 20px;
    height: 6px;
  }

  .about__table-td {
    padding: 5% 0;
  }
}

/* service */

.service {
  padding-top: 100px;
  height: calc(75vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(./img/top_about1.jpeg);
  background-size: cover;
  background-color: #BAD5D2;
  background-blend-mode: darken;
}

.service__content {
  width: 90%;
  max-width: var(--md-width);
}

.service__consulting {
  margin: 0 auto 10%;
  width: 90%;
  max-width: var(--md-width);
}

.service__consulting-tabs {
  margin-top: 10%;
  display: flex;
  justify-content: space-between;
}

.service__consulting-tab {
  position: relative;
  padding: 2% 0;
  width: 49%;
  font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
  border: 1px solid var(--green);
}

.service__consulting-tab:hover {
  color: white;
  background: var(--green);
}

.service__consulting-tab::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5%;
  width: 14px;
  height: 14px;
  display: inline-block;
  border-top: 4px solid var(--green);
  border-left: 4px solid var(--green);
  transform: translate(0 , -50%) rotate(-135deg);
}

.service__consulting-tab:hover::after {
  border-top: 4px solid white;
  border-left: 4px solid white;
}

.service__consulting-ttl {
  position: relative;
  margin-top: 5%;
  width: fit-content;
  display: flex;
  align-items: center;
  font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
  font-weight: bold;
  letter-spacing: 0.1em;
}

.service__consulting-ttl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -50px;
  width: 30px;
  height: 6px;
  background: var(--green);
}

.service__consulting-dec {
  margin-right: 30px;
  color: var(--green);
  font-size: clamp(2.5rem, 1.364rem + 5.68vw, 5.625rem);
  font-weight: normal;
  letter-spacing: 0.01em;
}

.service__consulting__contents1,
.service__consulting__contents2 {
  margin-top: 3%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

.service__consulting__content {
  width: 45%;
}

.service__consulting__content-message {
  font-size: clamp(1.125rem, 0.852rem + 1.36vw, 1.875rem);
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.83;
}

.service__consulting__content-dec {
  color: var(--green);
}

.service__consulting__content-txt {
  margin-top: 2%;
  font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
  letter-spacing: 0.1em;
  line-height: 2.15;
}

.service__consulting__content-img1,
.service__consulting__content-img2,
.service__consulting__content-img3,
.service__consulting__content-img4,
.service__consulting__content-img5,
.service__consulting__content-img6 {
  width: 49%;
  height: auto;
  opacity: 0;
}

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

  .service {
    padding-top: 70px;
    height: 300px;
  }

  .service__content {
    width: var(--sp-width);
  }

  .service__consulting {
    width: var(--sp-width);
  }

  .service__consulting-tabs {
    margin-top: 0;
    flex-direction: column;
  }

  .service__consulting-tab {
    margin-top: 10%;
    width: 100%;
  }

  .service__consulting-tab::after {
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--green);
    border-left: 3px solid var(--green);
  }

  .service__consulting-ttl {
    margin-top: 10%;
  }

  .service__consulting-ttl::after {
    right: -30px;
    width: 20px;
    height: 6px;
  }

  .service__consulting-dec {
    margin-right: 10px;
  }

  .service__consulting__contents1,
  .service__consulting__contents2 {
    margin-top: 5%;
  }

  .service__consulting__contents1 {
    flex-direction: column-reverse;
  }

  .service__consulting__contents2 {
    flex-direction: column;
  }

  .service__consulting__content {
    width: 100%;
  }

  .service__consulting__content-message {
    margin-top: 3%;
  }

  .service__consulting__content-img1,
  .service__consulting__content-img2,
  .service__consulting__content-img3,
  .service__consulting__content-img4,
  .service__consulting__content-img5,
  .service__consulting__content-img6 {
    width: 100%;
  }
}

/* news */

.news {
  padding-top: 100px;
  height: calc(75vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(./img/top_about3.jpeg);
  background-size: cover;
  background-color: #BAD5D2;
  background-blend-mode: darken;
}

.news__content {
  width: 90%;
  max-width: var(--md-width);
}

.news__report {
  margin: 5% auto 10%;
  width: 90%;
  max-width: var(--md-width);
}

.news__report__contents {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.news__report__content {
  margin-top: 5%;
  width: 32%;
}

.news__report__content:hover {
  transform: scale(1.05);
  transition: all 0.3s;
}

.news__report__content-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 40px 0 0 0;
}

.news__report__content-label {
  margin-top: 4%;
  display: flex;
  align-items: center;
}

.news__report__content-tag {
  padding: 1% 7%;
  color: white;
  letter-spacing: 0.1em;
  background: var(--green);
}

.news__report__content-ymd {
  margin-left: 3%;
  letter-spacing: 0.1em;
}

.news__report__content-ttl {
  margin-top: 1%;
  letter-spacing: 0.1em;
}

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

  .news {
    padding-top: 70px;
    height: 300px;
  }

  .news__content {
    width: var(--sp-width);
  }

  .news__report {
    margin: 10% auto 15%;
    width: var(--sp-width);
  }

  .news__report__contents {
    flex-direction: column;
  }

  .news__report__content {
    margin-top: 10%;
    width: 100%;
  }
}


/* page-news */

.news-page {
  margin: 5% auto;
  width: 90%;
  max-width: var(--md-width);
  border: 1px solid #CCCCCC;
}

.news-page__content {
  margin: 5% auto;
  width: 90%;
  max-width: var(--sm-width);
}

.news-page__content-img {
  width: 100%;
  height: auto;
  border-radius: 40px 0 0 0;
}

.news-page__content-label {
  margin-top: 4%;
  display: flex;
  align-items: center;
}

.news-page__content-tag {
  padding: 1% 5%;
  color: white;
  letter-spacing: 0.1em;
  background: var(--green);
}

.news-page__content-ymd {
  margin-left: 2%;
  letter-spacing: 0.1em;
}

.news-page__content-ttl {
  margin: 2% 0;
  font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  letter-spacing: 0.1em;
}

.news-page__content-txt {
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  letter-spacing: 0.1em;
  line-height: 1.8;
}

.news-page__content-txt a {
  color: var(--green);
}

.news-page__preview {
  margin: 0 auto 5%;
  width: 50%;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0.1em;
}

.news-page-prev,
.news-page-back,
.news-page-next {
  position: relative;
  display: block;
  width: 30%;
  text-align: center;
}

.news-page-prev:hover,
.news-page-back:hover,
.news-page-next:hover {
  transform: scale(1.1);
  transition: all 0.3s;
}

.news-page-prev a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -5%;
  width: 10px;
  height: 10px;
  display: inline-block;
  border-top: 3px solid var(--green);
  border-left: 3px solid var(--green);
  transform: translate(0 , -50%) rotate(-45deg);
}

.news-page-next a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -5%;
  width: 10px;
  height: 10px;
  display: inline-block;
  border-top: 3px solid var(--green);
  border-left: 3px solid var(--green);
  transform: translate(0 , -50%) rotate(135deg);
}

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

  .news-page {
    margin: 20% auto 15%;
    width: var(--sp-width);
    border: none;
  }

  .news-page__content {
    margin: 10% auto;
    width: 100%;
  }

  .news-page__content-ttl {
    margin: 5% 0;
  }

  .news-page__preview {
    width: 100%;
  }

  .news-page-prev a::before {
    left: 10%;
  }

  .news-page-next a::before {
    right: 10%;
  }
}


/* faq */

.faq {
  padding-top: 100px;
  height: calc(75vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(./img/faq.jpg);
  background-size: cover;
  background-color: #BAD5D2;
  background-blend-mode: darken;
}

.faq__content {
  width: 90%;
  max-width: var(--md-width);
}

.faq__contents {
  margin: 0 auto 5%;
  width: 90%;
  max-width: var(--md-width);
}

.faq__contents-tabs {
  margin-top: 10%;
  display: flex;
  justify-content: space-between;
}

.faq__contents-tab {
  position: relative;
  padding: 2% 0;
  width: 32%;
  font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  font-weight: bold;
  letter-spacing: 0.1em;
  text-align: center;
  border: 1px solid var(--green);
}

.faq__contents-tab:hover {
  color: white;
  background: var(--green);
}

.faq__contents-tab::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5%;
  width: 14px;
  height: 14px;
  display: inline-block;
  border-top: 4px solid var(--green);
  border-left: 4px solid var(--green);
  transform: translate(0 , -50%) rotate(-135deg);
}

.faq__contents-tab:hover::after {
  border-top: 4px solid white;
  border-left: 4px solid white;
}

.faq__contents-wrap {
  margin: 0 auto;
  width: 100%;
  max-width: var(--sm-width);
}

.faq__contents-ttl {
  position: relative;
  margin: 5% 0 3%;
  width: fit-content;
  font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
  font-weight: bold;
  letter-spacing: 0.1em;
}

.faq__contents-ttl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 17px;
  height: 4px;
  background: var(--green);
}

.faq__contents-list {
  margin: 0 auto;
  width: 100%;
  max-width: var(--sm-width);
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
}

.faq__contents-question {
  padding: 3% 0;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.faq__contents-q-icon {
  color: var(--green);
  font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  font-weight: bold;
}

.faq__contents-question-txt {
  width: 85%;
  font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem);
  letter-spacing: 0.1em;
}

.faq__contents-open {
  position: relative;
  width: 25px;
  height: 25px;
}

.faq__contents-open::before {
  opacity: 0;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  border-top: 3px solid #322610;
  border-left: 3px solid #322610;
  transform: translate(0 , -50%) rotate(45deg);
}

.faq__contents-open::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  border-top: 3px solid #322610;
  border-left: 3px solid #322610;
  transform: translate(0 , -50%) rotate(-135deg);
}

.faq__contents-open.close::before {
  animation-name: open;
  animation-fill-mode: forwards;
}

@keyframes open {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.faq__contents-open.close::after {
  animation-name: close;
  animation-fill-mode: forwards;
}

@keyframes close {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.faq__contents-answer {
  display: none;
}

.faq__contents-answer-box {
  padding: 2% 2% 2% 0;
  display: flex;
  justify-content: space-between;
}

.faq__contents-a-icon {
  color: #B92958;
  font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  font-weight: bold;
}

.faq__contents-answer-txt {
  width: 85%;
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  letter-spacing: 0.1em;
  line-height: 1.9;
}

.faq__contents-link {
  color: revert;
  text-decoration: underline;
}

.faq__contents-open1 {
  width: 25px;
  height: 25px;
}

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

  .faq {
    padding-top: 70px;
    height: 300px;
  }

  .faq__content {
    width: var(--sp-width);
  }

  .faq__contents {
    margin: 0 auto 15%;
    width: var(--sp-width);
  }

  .faq__contents-tabs {
    margin-top: 15%;
    flex-direction: column;
  }

  .faq__contents-tab {
    margin-bottom: 5%;
    width: 100%;
  }

  .faq__contents-tab::after {
    width: 12px;
    height: 12px;
    border-top: 3px solid var(--green);
    border-left: 3px solid var(--green);
  }

  .faq__contents-tab:hover::after {
    border-top: 3px solid white;
    border-left: 3px solid white;
  }

  .faq__contents-ttl {
    margin: 10% 0 3%;
  }

  .faq__contents-question-txt,
  .faq__contents-answer-txt {
    width: 75%;
  }
}

/* contact */

.contact {
  padding-top: 100px;
  height: calc(75vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(./img/contact.jpg);
  background-size: cover;
  background-color: #BAD5D2;
  background-blend-mode: darken;
}

.contact__content {
  width: 90%;
  max-width: var(--md-width);
}

.contact__contants {
  margin: 0 auto;
  width: 100%;
  max-width: var(--md-width);
  border-bottom: 1px solid #B7B7B7;
}

.contact__contants-message {
  margin: 10% auto 5%;
  width: 90%;
  max-width: var(--sm-width);
  font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  font-weight: bold;
  letter-spacing: 0.1em;
}

.contact__form-content {
  margin-bottom: 1%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.contact__form-label {
  margin: 1% 0;
  font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  letter-spacing: 0.1em;
}

.contact__form-label.label-deco {
  position: relative;
  width: fit-content;
}

.contact__form-label.label-deco::after {
  content: "必須";
  position: absolute;
  top: 50%;
  right: -60px;
  padding: 0 10px;
  color: #101010;
  font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
  letter-spacing: 0.1em;
  background: #BBD9D5;
  transform: translate(0 , -50%);
}

.contact__form-content-box {
  font-size: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  letter-spacing: 0.1em;
}

.contact__form-input,
.contact__form-txt {
  padding: 1%;
  width: 98%;
  border-radius: 5px;
}

.contact__form-accept {
  margin: 3% auto;
  width: 100%;
  text-align: center;
}

.contact__form-checkbox {
  transform: scale(1.2);
}

.contact__form-checkbox-txt {
  font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
  letter-spacing: 0.1em;
}

.contact__form__privacy {
  color: revert;
  text-decoration: underline;
}

.contact__form-submit {
  padding: 1% 10%;
  color: white;
  font-size: clamp(1.25rem, 1.159rem + 0.45vw, 1.5rem);
  font-weight: bold;
  letter-spacing: 0.1em;
  background: var(--green);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

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

  .contact {
    padding-top: 70px;
    height: 300px;
  }

  .contact__content {
    margin-bottom: 3%;
    width: var(--sp-width);
  }

  .contact__contants-message {
    width: var(--sp-width);
  }

  .contact__form-accept {
    margin: 8% 0;
  }
}


/* thanks */

.thanks {
  margin: 0 auto;
  padding-bottom: 20%;
  width: 100%;
  max-width: var(--md-width);
  border-bottom: 1px solid #B7B7B7;
}

.thanks__content {
  margin: 0 auto;
  width: fit-content;
}

.thanks-message {
  margin: 15% 0 10%;
  width: fit-content;
  font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
  font-weight: bold;
  letter-spacing: 0.1em;
}

.thanks-txt {
  width: fit-content;
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
  letter-spacing: 0.1em;
}

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

  .thanks {
    width: var(--sp-width);
  }

  .thanks-message {
    margin: 10% 0;
  }
}


/* フッター */

.footer {
  padding-top: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-ttl {
  width: 90%;
  max-width: var(--md-width);
  color: var(--green);
  font-size: clamp(1.25rem, 1.023rem + 1.14vw, 1.875rem);
  font-weight: bold;
  letter-spacing: 0.075em;
}

.footer__contents {
  margin: 1% 0 6%;
  width: 90%;
  max-width: var(--md-width);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__nav {
  display: flex;
}

.footer__nav-list {
  margin-right: 30px;
  letter-spacing: 0.1em;
}

.footer__nav-list:hover {
  color: var(--green);
  transition: all 0.5s;
}

.footer__content {
  width: 65px;
  display: flex;
  justify-content: space-between;
}

.footer__content-img {
  width: 28px;
  height: 28px;
}

.footer__content-img:hover {
  transform: scale(1.2);
  transition: all 0.3s;
}

.footer__c {
  padding: 2% 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: clamp(0.625rem, 0.534rem + 0.45vw, 0.875rem);
  letter-spacing: 0.075em;
  background: var(--black2D);
}

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

  .footer {
    padding-top: 10%;
  }

  .footer-ttl {
    width: var(--sp-width);
  }

  .footer__contents {
    margin: 5% 0;
    width: var(--sp-width);
    flex-direction: column;
    align-items: start;
  }

  .footer__nav {
    flex-direction: column;
  }

  .footer__nav-list {
    margin-right: 0;
    margin-bottom: 15%;
  }

  .footer__content {
    margin-top: 5%;
    width: 80px;
  }
}