@charset "UTF-8";
@property --zoom-factor {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
.zoom-wrapper {
  --_min-viewport-width: 480px; /* viewportの最小値を下回ったら縮小をやめる */
  --_max-viewport-width: 1350px; /* viewportの最大値を上回ったら拡大をやめる */
  --_zoom-value: clamp(
    tan(atan2(var(--_min-viewport-width), var(--_max-viewport-width))),
    tan(atan2(var(--zoom-factor), var(--_max-viewport-width))),
    1
  );
  --zoom-factor: clamp(
    var(--_min-viewport-width),
    100dvi,
    var(--_max-viewport-width)
  );
  zoom: var(--_zoom-value);
  -webkit-text-size-adjust: initial; /* iOS Safariのバグを修正 */
  /* 768px以下では100%のズーム値を適用 */
}
@media (max-width: 480px) {
  .zoom-wrapper {
    zoom: 1;
  }
}

/*============================================================================
	common
=============================================================================*/
/*============================================================================
	cheader
=============================================================================*/
#cheaderWrap {
  width: 100%;
  overflow-x: clip;
  position: relative;
}
#cheaderWrap .imgBox {
  width: 36.39%;
  position: absolute;
  top: 13.8888888889vw;
  right: -20px;
  z-index: 2;
  max-width: 750px;
}
#cheaderWrap .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
@media (max-width: 480px) {
  #cheaderWrap .imgBox {
    width: 55%;
  }
}
#cheaderWrap #cheaderInnerBox {
  width: 100%;
  height: 100%;
}
@media (max-width: 1200px) {
  #cheaderWrap #cheaderInnerBox {
    padding-left: 5%;
  }
}
@media (max-width: 480px) {
  #cheaderWrap #cheaderInnerBox {
    padding-right: 5%;
  }
}
#cheaderWrap #cheaderInnerBox h1 {
  padding-top: clamp(110px, 22.9164vw, 275px);
  padding-bottom: clamp(27px, 4.6875vw, 45px);
  position: relative;
}
#cheaderWrap #cheaderInnerBox h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: #000000;
  z-index: 1;
}
@media (max-width: 480px) {
  #cheaderWrap #cheaderInnerBox h1 {
    padding-top: 200px;
  }
}
#cheaderWrap #cheaderInnerBox h1 span.en {
  font-size: clamp(29.25px, 5.3125vw, 45px);
  font-family: "Roboto", sans-serif;
  line-height: 1;
  display: block;
  letter-spacing: 0.05em;
  color: #0BB3A4;
  font-weight: 700;
  font-style: italic;
}
#cheaderWrap #cheaderInnerBox h1 span.jp {
  margin-top: 4px;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 700;
  display: block;
  color: #000000;
}
#cheaderWrap #cheaderInnerBox .ttlBox {
  margin-top: clamp(39px, 6.771vw, 65px);
  font-size: clamp(31.2px, 5.6661vw, 48px);
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.6666666667;
}
#cheaderWrap #cheaderInnerBox .ttlBox span {
  font-size: clamp(31.2px, 5.6661vw, 48px);
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1.6666666667;
  display: inline-block;
  position: relative;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: underline;
  -webkit-text-underline-offset: 8px;
  -webkit-text-decoration-thickness: 1px;
}
@media (max-width: 820px) {
  #cheaderWrap #cheaderInnerBox .ttlBox span {
    font-size: clamp(28.8px, 4.5vw, 36px);
  }
}
@media (max-width: 480px) {
  #cheaderWrap #cheaderInnerBox .ttlBox span {
    font-size: 2.4rem;
  }
}
@media (max-width: 820px) {
  #cheaderWrap #cheaderInnerBox .ttlBox {
    font-size: clamp(28.8px, 4.5vw, 36px);
  }
}
@media (max-width: 480px) {
  #cheaderWrap #cheaderInnerBox .ttlBox {
    font-size: 2.4rem;
    line-height: 1.5;
  }
}
#cheaderWrap #cheaderInnerBox .ttlBox.en {
  font-size: clamp(39px, 5.8682vw, 65px);
}
@media (max-width: 820px) {
  #cheaderWrap #cheaderInnerBox .ttlBox.en {
    font-size: clamp(32.5px, 5.9024vw, 50px);
  }
}
@media (max-width: 480px) {
  #cheaderWrap #cheaderInnerBox .ttlBox.en {
    font-size: 3rem;
  }
}
#cheaderWrap #cheaderInnerBox .subTtl {
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4285714286;
  margin-top: 0.5em;
}
@media (max-width: 820px) {
  #cheaderWrap #cheaderInnerBox .subTtl {
    font-size: clamp(19.2px, 3.0006vw, 24px);
  }
}
@media (max-width: 480px) {
  #cheaderWrap #cheaderInnerBox .subTtl {
    font-size: 1.6rem;
  }
}
#cheaderWrap #cheaderInnerBox .read {
  max-width: 700px;
  margin-top: clamp(15px, 2.604vw, 25px);
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.9444444444;
}
@media (max-width: 820px) {
  #cheaderWrap #cheaderInnerBox .read {
    font-size: clamp(12px, 2.222vw, 16px);
  }
}
@media (max-width: 480px) {
  #cheaderWrap #cheaderInnerBox .read {
    font-size: 1.4rem;
    line-height: 1.7;
  }
}
#cheaderWrap #cheaderInnerBox .txt {
  text-align: center;
  margin: clamp(39px, 6.771vw, 65px) auto 0;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1.9444444444;
}
@media (max-width: 480px) {
  #cheaderWrap #cheaderInnerBox .txt {
    line-height: 1.7;
  }
}
#cheaderWrap .partsBg {
  position: absolute;
  top: -13.3333333333vw;
  right: 12.9861111111vw;
  z-index: 3;
  width: 41.6%;
  max-width: 900px;
}
#cheaderWrap .partsBg figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#cheaderWrap .partsBg figure::before {
  content: "";
  padding-top: 196.33%;
  width: 100%;
  display: block;
}
#cheaderWrap .partsBg figure source, #cheaderWrap .partsBg figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media (max-width: 480px) {
  #cheaderWrap .partsBg {
    width: 47.6%;
  }
}
#cheaderWrap .partsBg.mini {
  right: 5.6944444444vw;
  width: 42.89%;
  max-width: 900px;
}
#cheaderWrap .partsBg.mini figure::before {
  padding-top: 137.93%;
}

@keyframes overAnime {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(100%);
  }
}
/*============================================================================
	cheaderWrapSub
=============================================================================*/
#cheaderWrapSub {
  padding: clamp(60px, 10.416vw, 100px) 0;
  width: 100%;
  height: auto;
}
#cheaderWrapSub .breadcrumbs {
  margin: 0 auto;
  color: #7b7b7b;
}
#cheaderWrapSub .breadcrumbs a {
  color: #7b7b7b;
}
#cheaderWrapSub h1 {
  margin-top: clamp(48px, 8.334vw, 80px);
}
#cheaderWrapSub h1 .en {
  color: #4880D3;
  font-size: clamp(63px, 9.4796vw, 105px);
  font-family: "Roboto", sans-serif;
  line-height: 1;
  display: block;
}
#cheaderWrapSub h1 .jp {
  margin-top: 20px;
  color: #a1a1a1;
  font-size: clamp(16px, 2.5002vw, 20px);
  display: block;
}

/*============================================================================
	VOICE header
=============================================================================*/
#cheaderWrap_voice {
  padding: clamp(60px, 10.416vw, 100px) 0 0;
  width: 100%;
}
#cheaderWrap_voice .breadcrumbs {
  margin: 0 auto;
  color: #7b7b7b;
}
#cheaderWrap_voice .breadcrumbs a {
  color: #7b7b7b;
}
#cheaderWrap_voice #cheaderInnerBox {
  margin: clamp(48px, 8.334vw, 80px) 0 0;
  width: 100%;
  position: relative;
}
#cheaderWrap_voice #cheaderInnerBox .headerTextBox {
  margin: auto;
  max-width: 1070px;
  width: 85%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 5;
}
#cheaderWrap_voice #cheaderInnerBox .headerTextBox h1 {
  margin: 0 auto;
}
#cheaderWrap_voice #cheaderInnerBox .headerTextBox h1 .en {
  font-size: clamp(63px, 9.4796vw, 105px);
  font-family: "Roboto", sans-serif;
  line-height: 1;
  display: block;
}
#cheaderWrap_voice #cheaderInnerBox .headerTextBox h1 .jp {
  margin-top: 20px;
  font-size: clamp(16px, 2.5002vw, 20px);
  display: block;
}
#cheaderWrap_voice #cheaderInnerBox .headerTextBox .cheaderText {
  margin-top: clamp(24px, 4.167vw, 40px);
  text-shadow: -2px -2px 4px #ffffff, 2px 2px 4px #ffffff, -2px 2px 4px #ffffff, 2px -2px 4px #ffffff;
}
#cheaderWrap_voice #cheaderInnerBox picture {
  margin: 0 0 0 auto;
  width: 60%;
  overflow: hidden;
  display: block;
  position: relative;
}
#cheaderWrap_voice #cheaderInnerBox picture::before {
  content: "";
  padding-top: 77.2%;
  width: 100%;
  display: block;
}
#cheaderWrap_voice #cheaderInnerBox picture source, #cheaderWrap_voice #cheaderInnerBox picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.accordionBox {
  width: 100%;
}
.accordionBox .targetBtn {
  cursor: pointer;
}
.accordionBox .acdInner {
  padding: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: 0.5s;
}
.accordionBox.active {
  overflow-y: auto;
}

/*============================================================================
	common page footer
=============================================================================*/
#serviceNaviBox {
  margin: clamp(72px, 12.4995vw, 120px) auto;
  max-width: 1080px;
  width: 80%;
}
#serviceNaviBox .naviCard {
  width: 48%;
  border-radius: 4px;
}
#serviceNaviBox .naviCard a {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}
#serviceNaviBox .naviCard a .ttl {
  margin: auto;
  width: fit-content;
  height: fit-content;
  text-align: center;
  line-height: 1.2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}
#serviceNaviBox .naviCard a .ttl .jp {
  color: #FFFFFF;
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 900;
  display: block;
}
#serviceNaviBox .naviCard a .ttl .en {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  display: block;
}
#serviceNaviBox .naviCard a .arrowBtn {
  margin: auto;
  position: absolute;
  right: clamp(12px, 2.0835vw, 20px);
  bottom: clamp(15px, 2.604vw, 25px);
}
#serviceNaviBox .naviCard a picture {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  display: block;
  position: relative;
}
#serviceNaviBox .naviCard a picture::before {
  content: "";
  padding-top: 46.15%;
  width: 100%;
  display: block;
}
#serviceNaviBox .naviCard a picture source, #serviceNaviBox .naviCard a picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#serviceNaviBox .naviCard a:hover picture source, #serviceNaviBox .naviCard a:hover picture img {
  transform: scale(1.2);
}
#serviceNaviBox .naviCard + .naviCard {
  margin-left: 4%;
}
@media (max-width: 820px) {
  #serviceNaviBox .naviCard {
    margin: auto;
    width: 80%;
  }
  #serviceNaviBox .naviCard + .naviCard {
    margin-top: clamp(24px, 4.167vw, 40px);
    margin-left: auto;
  }
}
@media (max-width: 480px) {
  #serviceNaviBox .naviCard a .arrowBtn {
    bottom: clamp(12px, 2.0835vw, 20px);
  }
}

#pageNaviBox {
  width: 100%;
}
#pageNaviBox .naviCard {
  width: 50%;
}
#pageNaviBox .naviCard a {
  width: 100%;
  position: relative;
}
#pageNaviBox .naviCard a .ttl {
  color: #FFFFFF;
  line-height: 1.2;
  position: absolute;
  top: clamp(12px, 2.0835vw, 20px);
  left: clamp(24px, 4.167vw, 40px);
  z-index: 5;
}
#pageNaviBox .naviCard a .ttl .en {
  font-size: clamp(40.8px, 6.1386vw, 68px);
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  display: block;
}
#pageNaviBox .naviCard a .ttl .jp {
  margin-top: 10px;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 500;
  display: block;
}
#pageNaviBox .naviCard a picture {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#pageNaviBox .naviCard a picture::before {
  content: "";
  padding-top: 58.3%;
  width: 100%;
  display: block;
}
#pageNaviBox .naviCard a picture source, #pageNaviBox .naviCard a picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#pageNaviBox .naviCard a picture::after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(76, 76, 76, 0.5);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  mix-blend-mode: multiply;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#pageNaviBox .naviCard a:hover picture source, #pageNaviBox .naviCard a:hover picture img {
  transform: scale(1.2);
}
#pageNaviBox .naviCard a:hover::after {
  opacity: 0;
}
@media (max-width: 820px) {
  #pageNaviBox .naviCard {
    width: 100%;
  }
}

/*============================================================================
	about
=============================================================================*/
#aboutMessageArea {
  margin-top: clamp(70px, 14.5836vw, 175px);
  background: rgba(11, 179, 164, 0.05);
  position: relative;
}
#aboutMessageArea .aboutMessageInner {
  max-width: 890px;
  margin: 0 auto;
  width: 90%;
  padding-bottom: clamp(72px, 12.4995vw, 120px);
  background: #fff;
}
#aboutMessageArea .aboutMessageInner .ttl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: fit-content;
  margin: auto;
  line-height: 1;
}
@media (max-width: 480px) {
  #aboutMessageArea .aboutMessageInner .ttl {
    gap: 25px;
  }
}
#aboutMessageArea .aboutMessageInner .ttl p {
  font-size: clamp(45px, 6.7704vw, 75px);
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.05em;
  text-align: center;
}
#aboutMessageArea .aboutMessageInner .ttl p em {
  color: #0BB3A4;
  font-size: clamp(45px, 6.7704vw, 75px);
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.05em;
}
@media (max-width: 480px) {
  #aboutMessageArea .aboutMessageInner .ttl p {
    font-size: 3rem;
  }
  #aboutMessageArea .aboutMessageInner .ttl p em {
    font-size: 3rem;
  }
}
#aboutMessageArea .aboutMessageInner .textInner {
  max-width: 660px;
  margin: 23px auto 0;
  width: 90%;
}
#aboutMessageArea .aboutMessageInner .textInner .read {
  font-size: clamp(24px, 3.7494vw, 30px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}
@media (max-width: 480px) {
  #aboutMessageArea .aboutMessageInner .textInner .read {
    font-size: 1.8rem;
  }
}
#aboutMessageArea .aboutMessageInner .textInner .textBox {
  margin-top: clamp(48px, 8.334vw, 80px);
}
#aboutMessageArea .aboutMessageInner .textInner .textBox p {
  font-size: clamp(12px, 2.222vw, 16px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
}
#aboutMessageArea .aboutMessageInner .textInner .textBox p + p {
  margin-top: 2em;
}
@media (max-width: 480px) {
  #aboutMessageArea .aboutMessageInner .textInner .textBox p {
    line-height: 1.75;
    font-size: 1.4rem;
  }
  #aboutMessageArea .aboutMessageInner .textInner .textBox p + p {
    margin-top: 2em;
  }
}
#aboutMessageArea .aboutMessageInner .textInner .ceoName {
  margin-top: clamp(24px, 4.167vw, 40px);
  font-size: clamp(12px, 2.222vw, 16px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: right;
}
@media (max-width: 480px) {
  #aboutMessageArea .aboutMessageInner .textInner .ceoName {
    font-size: 1.4rem;
  }
}
#aboutMessageArea .parts01 {
  position: absolute;
  top: 27.6388888889vw;
  right: 14.6527777778vw;
  width: 13.26%;
  max-width: 191px;
}
#aboutMessageArea .parts01 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#aboutMessageArea .parts01 figure::before {
  content: "";
  padding-top: 100%;
  width: 100%;
  display: block;
}
#aboutMessageArea .parts01 figure source, #aboutMessageArea .parts01 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media (max-width: 1024px) {
  #aboutMessageArea .parts01 {
    right: 6px;
  }
}
#aboutMessageArea .parts02 {
  position: absolute;
  bottom: 21.6666666667vw;
  right: 14.6527777778vw;
  width: 9.72%;
  max-width: 140px;
}
#aboutMessageArea .parts02 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#aboutMessageArea .parts02 figure::before {
  content: "";
  padding-top: 118.86%;
  width: 100%;
  display: block;
}
#aboutMessageArea .parts02 figure source, #aboutMessageArea .parts02 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media (max-width: 1024px) {
  #aboutMessageArea .parts02 {
    right: 4px;
  }
}
#aboutMessageArea .parts03 {
  position: absolute;
  bottom: 0.7638888889vw;
  left: 16.25vw;
  width: 11%;
  max-width: 120px;
}
#aboutMessageArea .parts03 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#aboutMessageArea .parts03 figure::before {
  content: "";
  padding-top: 110%;
  width: 100%;
  display: block;
}
#aboutMessageArea .parts03 figure source, #aboutMessageArea .parts03 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media (max-width: 1024px) {
  #aboutMessageArea .parts03 {
    left: 12px;
  }
}

#aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner {
  height: 50lvh;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 3.75%;
}
@media (max-width: 1200px) {
  #aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner {
    flex-direction: column;
    justify-content: center;
  }
}
@media (max-width: 1024px) {
  #aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner {
    height: auto;
    padding: 40px 0;
  }
}
@media (max-width: 480px) {
  #aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner {
    gap: 15px;
  }
}
#aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner h2 {
  width: 37.5%;
  position: relative;
}
@media (max-width: 1200px) {
  #aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner h2 {
    width: 100%;
  }
}
#aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner h2 span.en {
  position: relative;
}
#aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner h2 span.en::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 50%;
  height: 1px;
  background: #fff;
}
#aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner .textBox {
  width: 58.75%;
}
@media (max-width: 1200px) {
  #aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner .textBox {
    width: 100%;
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  #aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner .textBox {
    margin-top: 0;
  }
}
#aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner .textBox p.read {
  font-size: clamp(28px, 4.3758vw, 35px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5714285714;
}
@media (max-width: 480px) {
  #aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner .textBox p.read {
    font-size: 1.6rem;
    line-height: 1.7;
  }
}
#aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner .textBox p.txt {
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.9444444444;
  margin-top: 1em;
}
@media (max-width: 480px) {
  #aboutMVVArea .aboutMVWrap .aboutHalfBox .aboutHalfBoxInner .textBox p.txt {
    font-size: 1.4rem;
    line-height: 1.75;
  }
}
#aboutMVVArea .aboutMVWrap .aboutHalfBox.aboutMBox {
  background: linear-gradient(to bottom, #0BB3A4, #0EAC9D, #12A496, #169C8F, #1A9488, #1E8C81, #21857B, #237F76, #267971);
}
#aboutMVVArea .aboutMVWrap .aboutHalfBox.aboutVBox {
  background: linear-gradient(to bottom, #8FC31F, #89BB1D, #84B41B, #7EAC19, #78A518, #729E16, #6C9615, #668D13);
}
#aboutMVVArea .aboutVWrap.js-trigger {
  height: 700lvh;
}
@media (max-width: 1024px) {
  #aboutMVVArea .aboutVWrap.js-trigger {
    height: 625lvh;
  }
}
@media (max-width: 820px) {
  #aboutMVVArea .aboutVWrap.js-trigger {
    height: 630lvh;
  }
}
@media (max-width: 480px) {
  #aboutMVVArea .aboutVWrap.js-trigger {
    height: 650lvh;
  }
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element {
  height: 200lvh;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1;
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element .content {
  height: 50%;
  width: 100%;
  position: sticky;
  top: 0;
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element .content .background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element .content .descBox {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element .content .descBox .descInner {
  height: 40lvh;
  max-width: 615px;
  margin-left: 10.91%;
}
@media (max-width: 1024px) {
  #aboutMVVArea .aboutVWrap.js-trigger .js-element .content .descBox .descInner {
    height: 30lvh;
    margin-left: 5%;
    margin-right: 5%;
  }
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element .content .descBox .descInner .head .letters {
  display: flex;
  gap: 48px;
}
@media (max-width: 480px) {
  #aboutMVVArea .aboutVWrap.js-trigger .js-element .content .descBox .descInner .head .letters {
    gap: 30px;
  }
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element .content .descBox .descInner .head .title {
  margin-top: 30px;
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element .content .descBox .descInner .head .title .en {
  font-family: "Roboto", sans-serif;
  font-size: clamp(32px, 5.0004vw, 40px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 0.75;
  border-bottom: 1px solid #fff;
  width: fit-content;
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element .content .descBox .descInner .head .title .jp {
  margin-top: 6px;
  font-size: clamp(20px, 3.1248vw, 25px);
  font-weight: 700;
  letter-spacing: 0.05em;
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element .content .descBox .descInner .description {
  margin-top: 15px;
  font-size: clamp(14px, 3.4vw, 18px);
  line-height: 1.9444444444;
  letter-spacing: 0.05em;
  color: #fff;
  font-weight: 500;
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element.active {
  z-index: 2;
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element.active .content .background {
  opacity: 1;
}
#aboutMVVArea .aboutVWrap.js-trigger .js-element.active .content .descBox {
  opacity: 1;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner {
  display: flex;
  height: 100%;
}
@media (max-width: 1200px) {
  #aboutMVVArea .aboutVWrap .aboutVBoxInner {
    flex-direction: column;
  }
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox {
  color: #fff;
  width: 42.71%;
  height: 100%;
  background: rgba(111, 84, 41, 0.7);
}
@media (max-width: 1200px) {
  #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox {
    width: 100%;
  }
}
@media (max-width: 1024px) {
  #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox {
    height: auto;
    padding: 40px 0;
  }
}
@media (max-width: 480px) {
  #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox {
    height: 50lvh;
  }
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent {
  position: sticky;
  top: 0;
  height: 100lvh;
  z-index: 5;
  display: flex;
  align-items: center;
}
@media (max-width: 1024px) {
  #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent {
    position: relative;
    height: auto;
    width: 94%;
    margin: 0 auto;
  }
}
@media (max-width: 480px) {
  #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent {
    width: 94%;
    margin: 0 auto;
  }
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent .aboutVBoxUnit {
  max-width: 450px;
  margin-right: 7.32%;
  margin-left: auto;
}
@media (max-width: 1024px) {
  #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent .aboutVBoxUnit {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}
@media (max-width: 480px) {
  #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent .aboutVBoxUnit {
    margin-right: 0;
    margin-left: 0;
  }
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent .aboutVBoxUnit h2 {
  position: relative;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent .aboutVBoxUnit h2 span.en {
  position: relative;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent .aboutVBoxUnit h2 span.en::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 50%;
  height: 1px;
  background: #fff;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent .aboutVBoxUnit .textBox {
  margin-top: 25px;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent .aboutVBoxUnit .textBox p.txt {
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.9444444444;
}
@media (max-width: 480px) {
  #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutVBox .aboutVBoxContent .aboutVBoxUnit .textBox p.txt {
    font-size: 1.4rem;
    line-height: 1.75;
  }
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBoxWrap {
  width: 57.29%;
}
@media (max-width: 1200px) {
  #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBoxWrap {
    width: 100%;
  }
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBox {
  width: 100%;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBox.aboutCANBox01 .content .background {
  background: #0BB3A4;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBox.aboutCANBox01 .content .descBox .descInner .head .letters span:nth-child(2) img, #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBox.aboutCANBox01 .content .descBox .descInner .head .letters span:nth-child(3) img {
  opacity: 0.35;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBox.aboutCANBox02 .content .background {
  background: #8CB808;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBox.aboutCANBox02 .content .descBox .descInner .head .letters span:nth-child(1) img, #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBox.aboutCANBox02 .content .descBox .descInner .head .letters span:nth-child(3) img {
  opacity: 0.35;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBox.aboutCANBox03 .content .background {
  background: #6F5429;
}
#aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBox.aboutCANBox03 .content .descBox .descInner .head .letters span:nth-child(1) img, #aboutMVVArea .aboutVWrap .aboutVBoxInner .aboutCANBox.aboutCANBox03 .content .descBox .descInner .head .letters span:nth-child(2) img {
  opacity: 0.35;
}

#aboutBrandDesignArea {
  padding: clamp(69px, 11.979vw, 115px) 0 clamp(72px, 12.4995vw, 120px);
}
@media (max-width: 480px) {
  #aboutBrandDesignArea {
    padding: 80px 0;
  }
}
#aboutBrandDesignArea .brandDesignInner {
  max-width: 912px;
  width: 90%;
  margin: clamp(45px, 7.812vw, 75px) auto 0;
}
#aboutBrandDesignArea .brandDesignInner .mainLogo {
  text-align: center;
}
#aboutBrandDesignArea .brandDesignInner .mainLogo figure {
  width: 201px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  #aboutBrandDesignArea .brandDesignInner .mainLogo figure {
    width: 170px;
  }
}
#aboutBrandDesignArea .brandDesignInner .mainLogo img {
  width: 100%;
  height: auto;
}
#aboutBrandDesignArea .brandDesignInner .border {
  text-align: center;
}
#aboutBrandDesignArea .brandDesignInner .border figure {
  width: 510px;
  margin: 35px auto;
}
#aboutBrandDesignArea .brandDesignInner .border img {
  width: 100%;
  height: auto;
}
@media (max-width: 480px) {
  #aboutBrandDesignArea .brandDesignInner .border {
    display: none;
  }
}
#aboutBrandDesignArea .brandDesignInner ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 95px;
}
@media (max-width: 480px) {
  #aboutBrandDesignArea .brandDesignInner ul {
    margin-top: 80px;
    gap: 80px;
    flex-direction: column;
  }
}
#aboutBrandDesignArea .brandDesignInner ul li {
  flex: 1;
}
@media (max-width: 480px) {
  #aboutBrandDesignArea .brandDesignInner ul li {
    width: 100%;
    position: relative;
  }
  #aboutBrandDesignArea .brandDesignInner ul li::before {
    content: "";
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 40px;
    background: #000000;
  }
}
#aboutBrandDesignArea .brandDesignInner ul figure {
  width: fit-content;
  margin: 0 auto;
}
#aboutBrandDesignArea .brandDesignInner ul figure img {
  width: 100%;
  height: auto;
}
#aboutBrandDesignArea .brandDesignInner ul .ttl {
  margin-top: 20px;
  font-size: clamp(12px, 2.362vw, 17px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}
@media (max-width: 480px) {
  #aboutBrandDesignArea .brandDesignInner ul .ttl {
    font-size: 1.6rem;
  }
}
#aboutBrandDesignArea .brandDesignInner ul .text {
  margin-top: 7px;
  font-size: clamp(12px, 2.084vw, 15px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.6666666667;
}
@media (max-width: 480px) {
  #aboutBrandDesignArea .brandDesignInner ul .text {
    font-size: 1.4rem;
  }
}

#aboutProfileArea {
  padding: 80px 0 120px;
  background: rgba(11, 179, 164, 0.05);
  position: relative;
}
#aboutProfileArea .profileInner {
  max-width: 760px;
  width: 90%;
  margin: clamp(42px, 7.2915vw, 70px) auto 0;
}
#aboutProfileArea .profileInner dl {
  display: flex;
  border-bottom: 1px dotted #6F5429;
  padding: 20px 0;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.5555555556;
}
#aboutProfileArea .profileInner dl dt {
  width: 175px;
}
#aboutProfileArea .profileInner dl dd {
  width: calc(100% - 175px);
}
@media (max-width: 480px) {
  #aboutProfileArea .profileInner dl {
    flex-direction: column;
    gap: 10px;
  }
  #aboutProfileArea .profileInner dl dt {
    width: 100%;
  }
  #aboutProfileArea .profileInner dl dd {
    width: 100%;
  }
}
#aboutProfileArea .parts01 {
  position: absolute;
  top: -3.8194444444vw;
  right: 3.1944444444vw;
  width: 13.26%;
  max-width: 191px;
}
#aboutProfileArea .parts01 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#aboutProfileArea .parts01 figure::before {
  content: "";
  padding-top: 100%;
  width: 100%;
  display: block;
}
#aboutProfileArea .parts01 figure source, #aboutProfileArea .parts01 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#aboutProfileArea .parts02 {
  position: absolute;
  top: 31.3888888889vw;
  right: 5.2777777778vw;
  width: 9.72%;
}
#aboutProfileArea .parts02 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#aboutProfileArea .parts02 figure::before {
  content: "";
  padding-top: 122.86%;
  width: 100%;
  display: block;
}
#aboutProfileArea .parts02 figure source, #aboutProfileArea .parts02 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#aboutProfileArea .parts03 {
  position: absolute;
  bottom: -3.1944444444vw;
  left: 10.4166666667vw;
  width: 6.39%;
}
#aboutProfileArea .parts03 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#aboutProfileArea .parts03 figure::before {
  content: "";
  padding-top: 122.83%;
  width: 100%;
  display: block;
}
#aboutProfileArea .parts03 figure source, #aboutProfileArea .parts03 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

#aboutMemberArea {
  padding: clamp(66px, 13.7496vw, 165px) 0 clamp(72px, 12.4995vw, 120px);
}
#aboutMemberArea .memberInner {
  max-width: 1030px;
  width: 90%;
  margin: clamp(33px, 5.7285vw, 55px) auto 0;
}
#aboutMemberArea .memberInner ul {
  display: flex;
  justify-content: center;
  gap: 6.31%;
}
#aboutMemberArea .memberInner ul li {
  width: 29.13%;
}

#historyArea {
  margin-top: clamp(72px, 12.4995vw, 120px);
  padding-bottom: clamp(72px, 12.4995vw, 120px);
  position: relative;
}
@media (max-width: 480px) {
  #historyArea {
    margin-top: 80px;
    padding-bottom: 80px;
  }
}
#historyArea .historyList {
  max-width: 760px;
  width: 90%;
  margin: 0 auto;
}
#historyArea .historyList p.ttl {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  #historyArea .historyList p.ttl {
    font-size: 1.8rem;
  }
}
#historyArea .historyList ul {
  border-top: 1px solid #0BB3A4;
}
#historyArea .historyList ul li {
  width: 100%;
  display: flex;
  border-bottom: 1px solid #0BB3A4;
}
#historyArea .historyList ul li p {
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1.5;
}
@media (max-width: 480px) {
  #historyArea .historyList ul li p {
    font-size: 1.4rem;
  }
}
#historyArea .historyList ul li p.year {
  padding: 20px 0 20px 25px;
  background: rgba(11, 179, 164, 0.12);
  width: 115px;
}
@media (max-width: 480px) {
  #historyArea .historyList ul li p.year {
    width: 90px;
    padding: 15px 0 15px 20px;
  }
}
#historyArea .historyList ul li p.txt {
  width: calc(100% - 115px);
  padding: 20px 25px 20px 45px;
}
@media (max-width: 480px) {
  #historyArea .historyList ul li p.txt {
    width: calc(100% - 90px);
    padding: 15px 20px 15px 20px;
  }
}
#historyArea .parts01 {
  position: absolute;
  bottom: 15.7638888889vw;
  right: 7.1527777778vw;
  width: 9.86%;
  max-width: 142px;
}
#historyArea .parts01 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#historyArea .parts01 figure::before {
  content: "";
  padding-top: 100%;
  width: 100%;
  display: block;
}
#historyArea .parts01 figure source, #historyArea .parts01 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#historyArea .parts02 {
  position: absolute;
  bottom: 4.2361111111vw;
  left: 4.9305555556vw;
  width: 11.74%;
  max-width: 169px;
}
#historyArea .parts02 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#historyArea .parts02 figure::before {
  content: "";
  padding-top: 123.08%;
  width: 100%;
  display: block;
}
#historyArea .parts02 figure source, #historyArea .parts02 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

#historyMessageArea {
  padding: 70px 0;
  background: url("../img/about/history/historyMessageBg.jpg") no-repeat center center/cover;
  position: relative;
}
#historyMessageArea .txt {
  font-size: clamp(20px, 3.1248vw, 25px);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.8;
  text-align: center;
  width: 90%;
  margin: 0 auto;
}
@media (max-width: 820px) {
  #historyMessageArea .txt {
    font-size: 1.8rem;
  }
}
@media (max-width: 480px) {
  #historyMessageArea .txt {
    font-size: 1.6rem;
  }
}
#historyMessageArea .parts03 {
  position: absolute;
  top: 3.8194444444vw;
  left: 3.9583333333vw;
  width: 15.56%;
  max-width: 225px;
  z-index: 3;
}
#historyMessageArea .parts03 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#historyMessageArea .parts03 figure::before {
  content: "";
  padding-top: 162.05%;
  width: 100%;
  display: block;
}
#historyMessageArea .parts03 figure source, #historyMessageArea .parts03 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media (max-width: 820px) {
  #historyMessageArea .parts03 {
    left: 12px;
    top: 70%;
  }
}
@media (max-width: 480px) {
  #historyMessageArea .parts03 {
    top: 80%;
  }
}
#historyMessageArea .parts04 {
  position: absolute;
  top: 8.1944444444vw;
  right: 3.75vw;
  width: 8.67%;
  max-width: 96px;
}
#historyMessageArea .parts04 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#historyMessageArea .parts04 figure::before {
  content: "";
  padding-top: 100%;
  width: 100%;
  display: block;
}
#historyMessageArea .parts04 figure source, #historyMessageArea .parts04 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
@media (max-width: 820px) {
  #historyMessageArea .parts04 {
    right: 12px;
    top: 70%;
  }
}
@media (max-width: 480px) {
  #historyMessageArea .parts04 {
    top: 10%;
  }
}

.historyMessageBg02 {
  width: 100%;
}
.historyMessageBg02 figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
.historyMessageBg02 figure::before {
  content: "";
  padding-top: 12.5%;
  width: 100%;
  display: block;
}
@media (max-width: 480px) {
  .historyMessageBg02 figure::before {
    padding-top: 17%;
  }
}
.historyMessageBg02 figure source, .historyMessageBg02 figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

/*============================================================================
	service
=============================================================================*/
/*--------------------
	service TOP
--------------------*/
#serviceListArea {
  margin-top: clamp(96px, 20.0004vw, 240px);
  padding-bottom: 120px;
  position: relative;
  z-index: 5;
}
#serviceListArea .serviceList ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5%;
  row-gap: clamp(48px, 8.334vw, 80px);
}
@media (max-width: 480px) {
  #serviceListArea .serviceList ul {
    row-gap: 40px;
  }
}
#serviceListArea .serviceList ul li {
  width: 48.75%;
}
@media (max-width: 480px) {
  #serviceListArea .serviceList ul li {
    width: 100%;
  }
}
#serviceListArea .serviceList ul li a {
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#serviceListArea .serviceList ul li a .imgBox {
  position: relative;
}
#serviceListArea .serviceList ul li a .imgBox picture, #serviceListArea .serviceList ul li a .imgBox figure {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
#serviceListArea .serviceList ul li a .imgBox picture::before, #serviceListArea .serviceList ul li a .imgBox figure::before {
  content: "";
  padding-top: 42.74%;
  display: block;
}
@media (max-width: 1024px) {
  #serviceListArea .serviceList ul li a .imgBox picture::before, #serviceListArea .serviceList ul li a .imgBox figure::before {
    padding-top: 50%;
  }
}
#serviceListArea .serviceList ul li a .imgBox picture img, #serviceListArea .serviceList ul li a .imgBox picture source, #serviceListArea .serviceList ul li a .imgBox figure img, #serviceListArea .serviceList ul li a .imgBox figure source {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#serviceListArea .serviceList ul li a .ttl {
  margin-top: 20px;
}
@media (max-width: 480px) {
  #serviceListArea .serviceList ul li a .ttl {
    margin-top: 15px;
  }
}
#serviceListArea .serviceList ul li a .ttl span {
  display: block;
  color: #000000;
}
#serviceListArea .serviceList ul li a .ttl span.main {
  font-size: clamp(24px, 3.7494vw, 30px);
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media (max-width: 1024px) {
  #serviceListArea .serviceList ul li a .ttl span.main {
    font-size: clamp(19.2px, 3.0006vw, 24px);
  }
}
@media (max-width: 820px) {
  #serviceListArea .serviceList ul li a .ttl span.main {
    font-size: clamp(17.6px, 2.7504vw, 22px);
  }
}
@media (max-width: 480px) {
  #serviceListArea .serviceList ul li a .ttl span.main {
    font-size: 2rem;
  }
}
#serviceListArea .serviceList ul li a .ttl span.sub {
  font-size: clamp(12px, 2.084vw, 15px);
  line-height: 1.5333333333;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 3px;
}
@media (max-width: 820px) {
  #serviceListArea .serviceList ul li a .ttl span.sub {
    font-size: 1.4rem;
  }
}
@media (max-width: 480px) {
  #serviceListArea .serviceList ul li a .ttl span.sub {
    font-weight: 500;
  }
}
#serviceListArea .serviceList ul li a .moreBtn {
  margin-top: 30px;
  border-radius: 30px;
  border: 2px solid #000000;
  width: 140px;
  height: 28px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
@media (max-width: 480px) {
  #serviceListArea .serviceList ul li a .moreBtn {
    margin-top: 20px;
  }
}
#serviceListArea .serviceList ul li a .moreBtn span {
  color: #000000;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center;
  display: block;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#serviceListArea .serviceList ul li a:hover .moreBtn {
  background: #0BB3A4;
  border: 2px solid #0BB3A4;
}
#serviceListArea .serviceList ul li a:hover .moreBtn span {
  color: #fff;
}

/*--------------------
	service 下層共通
--------------------*/
#serviceTopWrap {
  margin: clamp(108px, 22.5vw, 270px) auto 0;
  position: relative;
  padding-bottom: 80px;
  position: relative;
  z-index: 5;
  overflow-x: clip;
}
#serviceTopWrap .bar {
  position: relative;
}
#serviceTopWrap .bar::before {
  content: "";
  background: #0BB3A4;
  position: absolute;
  top: -240px;
  left: 0;
  width: 1px;
  height: 14.5833333333vw;
  max-height: 210px;
  transform-origin: top center;
  animation: scrollbar 2.5s ease-in-out infinite;
}
@media (max-width: 1024px) {
  #serviceTopWrap .bar::before {
    top: -16.6666666667vw;
  }
}
@media (max-width: 480px) {
  #serviceTopWrap .bar::before {
    height: 85px;
    left: 0;
    top: -95px;
  }
}
#serviceTopWrap::after {
  content: "";
  background: url(../img/caninnovation/fig_parts04.svg) no-repeat center center/contain;
  position: absolute;
  bottom: vw_(80);
  left: 8.3333333333vw;
  width: 11.74%;
  height: 208px;
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceTopWrap::after {
    bottom: -4%;
    left: 5%;
    width: 80px;
    height: 120px;
  }
}
#serviceTopWrap .serviceTtl {
  position: absolute;
  top: 0;
  right: 0;
  font-family: "Roboto", sans-serif;
  line-height: 0.9;
  font-size: clamp(50px, 14.5836vw, 175px);
  font-weight: 900;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: rgba(11, 179, 164, 0.1);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
#serviceTopWrap h2 span {
  font-size: clamp(28px, 4.3758vw, 35px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: block;
  position: relative;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: underline;
  -webkit-text-underline-offset: 3px;
  -webkit-text-decoration-thickness: 1px;
}
#serviceTopWrap h2 span em {
  font-weight: 700;
  font-size: clamp(33px, 5.3466vw, 55px);
  line-height: 1;
}
@media (max-width: 480px) {
  #serviceTopWrap h2 span {
    font-size: 2rem;
    line-height: 1.7;
  }
}
#serviceTopWrap .container .descBox, #serviceTopWrap .inner .descBox {
  margin-top: clamp(72px, 12.4995vw, 120px);
}
#serviceTopWrap .container .descBox .ttlBox p.ttl, #serviceTopWrap .inner .descBox .ttlBox p.ttl {
  text-align: center;
  font-size: clamp(24px, 3.7494vw, 30px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.8333333333;
}
@media (max-width: 480px) {
  #serviceTopWrap .container .descBox .ttlBox p.ttl, #serviceTopWrap .inner .descBox .ttlBox p.ttl {
    font-size: 1.8rem;
    line-height: 1.7;
  }
}
#serviceTopWrap .container .descBox .ttlBox p.txt, #serviceTopWrap .inner .descBox .ttlBox p.txt {
  margin-top: 20px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
  text-align: center;
}
@media (max-width: 480px) {
  #serviceTopWrap .container .descBox .ttlBox p.txt, #serviceTopWrap .inner .descBox .ttlBox p.txt {
    line-height: 1.7;
    margin-top: 15px;
  }
}
#serviceTopWrap.mobile .inner .descBox .imgBox {
  margin: 35px auto 0;
  max-width: 543px;
  width: 100%;
}
#serviceTopWrap.mobile .inner .descBox .imgBox figure {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}
#serviceTopWrap.mobile .inner .descBox .imgBox figure::before {
  content: "";
  padding-top: 90.61%;
  display: block;
}
#serviceTopWrap.mobile .inner .descBox .imgBox figure img, #serviceTopWrap.mobile .inner .descBox .imgBox figure source {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#serviceTopWrap.insurance::after {
  display: none;
}
#serviceTopWrap.insurance .inner .descBox .partnerBox {
  margin-top: 35px;
  border-bottom: 2px solid #0BB3A4;
  padding-bottom: 55px;
}
@media (max-width: 480px) {
  #serviceTopWrap.insurance .inner .descBox .partnerBox {
    padding-bottom: 35px;
  }
}
#serviceTopWrap.insurance .inner .descBox .partnerBox .labelInner {
  position: relative;
  margin-bottom: 55px;
}
@media (max-width: 480px) {
  #serviceTopWrap.insurance .inner .descBox .partnerBox .labelInner {
    margin-bottom: 35px;
  }
}
#serviceTopWrap.insurance .inner .descBox .partnerBox .labelInner::before {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background: #0BB3A4;
}
#serviceTopWrap.insurance .inner .descBox .partnerBox .labelInner::after {
  content: "";
  width: 380px;
  height: 50px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  background: #fff;
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceTopWrap.insurance .inner .descBox .partnerBox .labelInner::after {
    width: 220px;
    height: 38px;
  }
}
#serviceTopWrap.insurance .inner .descBox .partnerBox .labelInner .label {
  font-size: clamp(20px, 3.1248vw, 25px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background: #0BB3A4;
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
  margin: 0 auto;
  border-radius: 30px;
  z-index: 3;
}
@media (max-width: 480px) {
  #serviceTopWrap.insurance .inner .descBox .partnerBox .labelInner .label {
    font-size: 1.8rem;
    width: 200px;
    height: 40px;
    line-height: 38px;
  }
}
#serviceTopWrap.insurance .inner .descBox .partnerBox > ul {
  display: flex;
  justify-content: center;
  gap: 180px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 480px) {
  #serviceTopWrap.insurance .inner .descBox .partnerBox > ul {
    gap: 30px;
  }
}
#serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li {
  width: 280px;
}
#serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li p.ctg {
  border: 2px solid #0BB3A4;
  width: 100%;
  height: 40px;
  line-height: 36px;
  text-align: center;
  position: relative;
  margin: 0 auto;
  border-radius: 30px;
  z-index: 3;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #0BB3A4;
}
@media (max-width: 480px) {
  #serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li p.ctg {
    height: 30px;
    line-height: 26px;
    font-size: 1.6rem;
  }
}
#serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li > ul {
  margin-top: 20px;
}
#serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li > ul > li {
  position: relative;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.3;
  padding-left: 1em;
  position: relative;
}
#serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li > ul > li::before {
  content: "・";
  width: 8px;
  height: 8px;
  position: absolute;
  left: 0;
  top: 0;
}
#serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li > ul > li span {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 500;
  margin-top: -5px;
}
#serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li > ul > li span.nowrap {
  white-space: nowrap;
}
#serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li > ul > li + li {
  margin-top: 0.5em;
}
@media (max-width: 480px) {
  #serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li > ul > li {
    line-height: 1.7;
  }
  #serviceTopWrap.insurance .inner .descBox .partnerBox > ul > li > ul > li + li {
    margin-top: 0.5em;
  }
}
#serviceTopWrap.system {
  padding-bottom: 120px;
}
@media (max-width: 480px) {
  #serviceTopWrap.system {
    padding-bottom: 80px;
  }
}
#serviceTopWrap.system .imgBox {
  margin-top: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 213px;
  row-gap: 60px;
  position: relative;
}
#serviceTopWrap.system .imgBox::before {
  content: "＋";
  font-size: clamp(66px, 9.9307vw, 110px);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.5);
  position: absolute;
  font-family: "Roboto", sans-serif;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#serviceTopWrap.system .imgBox .imgItem {
  width: 255px;
  aspect-ratio: 1;
}
@media (max-width: 480px) {
  #serviceTopWrap.system .imgBox {
    gap: 100px;
    flex-direction: column;
  }
  #serviceTopWrap.system .imgBox .imgItem {
    width: 180px;
  }
}
#serviceTopWrap.healthcare {
  padding-bottom: 90px;
}
#serviceTopWrap.healthcare .imgBox {
  margin-top: clamp(42px, 7.2915vw, 70px);
  display: flex;
  align-items: center;
  gap: 135px;
  position: relative;
}
#serviceTopWrap.healthcare .imgBox .imgItem:nth-of-type(1) {
  width: 500px;
  aspect-ratio: 1;
  position: relative;
}
#serviceTopWrap.healthcare .imgBox .imgItem:nth-of-type(1)::before {
  content: "＋";
  font-size: clamp(66px, 9.9307vw, 110px);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.5);
  position: absolute;
  font-family: "Roboto", sans-serif;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}
#serviceTopWrap.healthcare .imgBox .imgItem:nth-of-type(2) {
  width: 255px;
  aspect-ratio: 1;
}
@media (max-width: 480px) {
  #serviceTopWrap.healthcare .imgBox {
    gap: 100px;
    flex-direction: column;
  }
  #serviceTopWrap.healthcare .imgBox .imgItem:nth-of-type(1) {
    width: 330px;
  }
  #serviceTopWrap.healthcare .imgBox .imgItem:nth-of-type(1)::before {
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
  }
  #serviceTopWrap.healthcare .imgBox .imgItem:nth-of-type(2) {
    width: 180px;
  }
}
#serviceTopWrap.electricity {
  padding-bottom: clamp(72px, 12.4995vw, 120px);
}
#serviceTopWrap.electricity .inner .descBox .imgBox {
  margin: 50px auto 0;
  max-width: 543px;
  width: 100%;
}
#serviceTopWrap.electricity .inner .descBox .imgBox figure {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}
#serviceTopWrap.electricity .inner .descBox .imgBox figure::before {
  content: "";
  padding-top: 90.61%;
  display: block;
}
#serviceTopWrap.electricity .inner .descBox .imgBox figure img, #serviceTopWrap.electricity .inner .descBox .imgBox figure source {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#serviceTopWrap.marketing .inner .descBox .imgBox {
  margin: 35px auto 60px;
  max-width: 890px;
  width: 100%;
}
@media (max-width: 480px) {
  #serviceTopWrap.marketing .inner .descBox .imgBox {
    margin: 35px auto 0;
  }
}
#serviceTopWrap.marketing .inner .descBox .imgBox ul {
  display: flex;
  justify-content: center;
  gap: 2.81%;
}
#serviceTopWrap.marketing .inner .descBox .imgBox ul li {
  width: 22.81%;
}
@media (max-width: 480px) {
  #serviceTopWrap.marketing .inner .descBox .imgBox ul {
    gap: 5%;
    row-gap: 20px;
    flex-wrap: wrap;
  }
  #serviceTopWrap.marketing .inner .descBox .imgBox ul li {
    width: 45%;
  }
}

@keyframes scrollbar {
  0% {
    transform: scaleY(0);
  }
  30% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}
#serviceDetailWrap {
  position: relative;
  overflow-x: clip;
}
#serviceDetailWrap .serviceDetailInner {
  padding: 60px 0 110px;
  background: rgba(11, 179, 164, 0.05);
}
@media (max-width: 480px) {
  #serviceDetailWrap .serviceDetailInner {
    padding: 60px 0 80px;
  }
}
#serviceDetailWrap .inner h2 {
  text-align: center;
  margin-bottom: 20px;
}
@media (max-width: 480px) {
  #serviceDetailWrap .inner h2 {
    margin-bottom: 15px;
  }
}
#serviceDetailWrap .inner h2 span {
  font-size: clamp(24px, 3.7494vw, 30px);
  line-height: 1.8333333333;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: inline-block;
  position: relative;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: underline;
  -webkit-text-underline-offset: 3px;
  -webkit-text-decoration-thickness: 1px;
}
@media (max-width: 480px) {
  #serviceDetailWrap .inner h2 span {
    font-size: 2rem;
    line-height: 1.7;
  }
}
#serviceDetailWrap .inner p.read {
  text-align: center;
  font-weight: 500;
  line-height: 2.0625;
  letter-spacing: 0.05em;
}
@media (max-width: 480px) {
  #serviceDetailWrap .inner p.read {
    line-height: 1.7;
  }
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap {
  margin-top: clamp(30px, 5.208vw, 50px);
  position: relative;
}
@media (max-width: 480px) {
  #serviceDetailWrap.mobile .inner .mobileDetailListWrap {
    margin-top: 35px;
  }
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap::before {
  content: "";
  background: url(../img/caninnovation/fig_parts05.svg) no-repeat center center/contain;
  position: absolute;
  top: -80px;
  right: -3%;
  width: 11.83%;
  aspect-ratio: 1;
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceDetailWrap.mobile .inner .mobileDetailListWrap::before {
    top: -30px;
    width: 60px;
    height: 60px;
  }
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap ul {
  display: flex;
  gap: 1.5%;
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li {
  width: 32.34%;
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .imgBox picture, #serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .imgBox figure {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .imgBox picture::before, #serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .imgBox figure::before {
  content: "";
  padding-top: 83.82%;
  display: block;
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .imgBox picture img, #serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .imgBox picture source, #serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .imgBox figure img, #serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .imgBox figure source {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .txtBox {
  margin-top: 15px;
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .txtBox p.ttl {
  font-size: clamp(18.4px, 2.8746vw, 23px);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.05em;
  padding-left: 0.75em;
  position: relative;
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .txtBox p.ttl::before {
  content: "";
  width: 8px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #0BB3A4;
}
#serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .txtBox p.txt {
  margin-top: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
}
@media (max-width: 480px) {
  #serviceDetailWrap.mobile .inner .mobileDetailListWrap ul {
    flex-direction: column;
    gap: 30px;
  }
  #serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li {
    width: 100%;
  }
  #serviceDetailWrap.mobile .inner .mobileDetailListWrap ul li .txtBox p.txt {
    line-height: 1.7;
  }
}
#serviceDetailWrap.insurance {
  padding: 60px 0 0;
}
@media (max-width: 480px) {
  #serviceDetailWrap.insurance {
    padding: 0;
  }
}
#serviceDetailWrap.insurance .inner .insuranceDetailListWrap .descBox {
  display: flex;
  gap: 6.73%;
}
@media (max-width: 480px) {
  #serviceDetailWrap.insurance .inner .insuranceDetailListWrap .descBox {
    flex-direction: column;
    gap: 40px;
  }
}
#serviceDetailWrap.insurance .inner .insuranceDetailListWrap .descBox .descItem {
  width: 46.73%;
}
@media (max-width: 480px) {
  #serviceDetailWrap.insurance .inner .insuranceDetailListWrap .descBox .descItem {
    width: 100%;
  }
}
#serviceDetailWrap.insurance .inner .insuranceDetailListWrap .descBox .descItem p.ttl {
  background: #0BB3A4;
  width: 500px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
  margin: 0 auto;
  border-radius: 30px;
  z-index: 3;
  font-size: clamp(20px, 3.1248vw, 25px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 20px;
}
@media (max-width: 480px) {
  #serviceDetailWrap.insurance .inner .insuranceDetailListWrap .descBox .descItem p.ttl {
    width: 100%;
    height: 40px;
    line-height: 38px;
    font-size: 1.8rem;
  }
}
#serviceDetailWrap.insurance .inner .insuranceDetailListWrap .descBox .descItem li {
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
  padding-left: 1em;
  position: relative;
}
#serviceDetailWrap.insurance .inner .insuranceDetailListWrap .descBox .descItem li::before {
  content: "・";
  width: 8px;
  height: 8px;
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 480px) {
  #serviceDetailWrap.insurance .inner .insuranceDetailListWrap .descBox .descItem li {
    line-height: 1.7;
  }
  #serviceDetailWrap.insurance .inner .insuranceDetailListWrap .descBox .descItem li + li {
    margin-top: 0.5em;
  }
}
#serviceDetailWrap.system .inner .systemListWrap {
  margin-top: clamp(33px, 5.7285vw, 55px);
  position: relative;
}
#serviceDetailWrap.system .inner .systemListWrap::before {
  content: "";
  background: url(../img/caninnovation/fig_parts05.svg) no-repeat center center/contain;
  position: absolute;
  top: -80px;
  right: -3%;
  width: 11.83%;
  aspect-ratio: 1;
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceDetailWrap.system .inner .systemListWrap::before {
    top: -30px;
    width: 60px;
    height: 60px;
  }
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li {
  display: flex;
  gap: 3.27%;
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .imgBox {
  width: 40.19%;
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .imgBox picture, #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .imgBox figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  border-radius: 10px;
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .imgBox picture::before, #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .imgBox figure::before {
  content: "";
  padding-top: 67.44%;
  width: 100%;
  display: block;
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .imgBox picture source, #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .imgBox picture img, #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .imgBox figure source, #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .imgBox figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .txtBox {
  width: 56.54%;
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .txtBox p.ttl {
  font-size: clamp(24px, 3.7494vw, 30px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.8333333333;
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .txtBox p.txt {
  margin-top: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li + li {
  margin-top: clamp(30px, 5.208vw, 50px);
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li:nth-child(even) .imgBox {
  order: 2;
}
#serviceDetailWrap.system .inner .systemListWrap ul.systemList > li:nth-child(even) .txtBox {
  order: 1;
}
@media (max-width: 480px) {
  #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li {
    flex-direction: column;
    gap: 22px;
  }
  #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .imgBox {
    width: 100%;
  }
  #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .txtBox {
    width: 100%;
  }
  #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .txtBox p.ttl {
    font-size: 1.8rem;
    line-height: 1.7;
  }
  #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .txtBox ul.serviceList {
    gap: 10px;
    margin-top: 10px;
  }
  #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .txtBox ul.serviceList li {
    height: 30px;
    line-height: 30px;
    font-size: 1.4rem;
    min-width: 100px;
  }
  #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li .txtBox p.txt {
    margin-top: 10px;
    font-size: 1.4rem;
    line-height: 1.7;
  }
  #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li + li {
    margin-top: 40px;
  }
  #serviceDetailWrap.system .inner .systemListWrap ul.systemList > li:nth-child(even) {
    flex-direction: column-reverse;
  }
}
#serviceDetailWrap.system .inner .lineupBox {
  margin: clamp(42px, 7.2915vw, 70px) auto 0;
  background: #fff;
  padding: 35px 65px;
  border-radius: 10px;
  max-width: 790px;
  width: 100%;
}
#serviceDetailWrap.system .inner .lineupBox .label {
  font-size: clamp(20px, 3.1248vw, 25px);
  font-weight: 700;
  letter-spacing: 0em;
  color: #fff;
  background: #0BB3A4;
  width: 500px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
  margin: 0 auto;
  border-radius: 30px;
  z-index: 3;
}
#serviceDetailWrap.system .inner .lineupBox ul {
  margin-top: 25px;
}
#serviceDetailWrap.system .inner .lineupBox ul li {
  border-left: 3px solid #0BB3A4;
  border-right: 3px solid #0BB3A4;
  padding: 0 15px;
}
#serviceDetailWrap.system .inner .lineupBox ul li p.ttl {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #0BB3A4;
  text-align: center;
  line-height: 1.5;
}
#serviceDetailWrap.system .inner .lineupBox ul li p.txt {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: center;
  margin-top: 5px;
}
#serviceDetailWrap.system .inner .lineupBox ul li + li {
  margin-top: 25px;
}
@media (max-width: 480px) {
  #serviceDetailWrap.system .inner .lineupBox {
    margin-top: 40px;
    padding: 30px 20px;
  }
  #serviceDetailWrap.system .inner .lineupBox .label {
    font-size: 1.8rem;
    height: 40px;
    line-height: 40px;
    width: 220px;
  }
  #serviceDetailWrap.system .inner .lineupBox ul {
    margin-top: 15px;
  }
  #serviceDetailWrap.system .inner .lineupBox ul li p.ttl {
    font-size: 1.4rem;
  }
  #serviceDetailWrap.system .inner .lineupBox ul li p.txt {
    font-size: 1.4rem;
  }
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap {
  margin-top: clamp(30px, 5.208vw, 50px);
  position: relative;
}
@media (max-width: 480px) {
  #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap {
    margin-top: 35px;
  }
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap::before {
  content: "";
  background: url(../img/caninnovation/fig_parts05.svg) no-repeat center center/contain;
  position: absolute;
  top: -80px;
  right: -3%;
  width: 11.83%;
  aspect-ratio: 1;
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap::before {
    top: -30px;
    width: 60px;
    height: 60px;
  }
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.45%;
  row-gap: 60px;
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li {
  width: 32.34%;
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li p.label {
  font-size: 1.9rem;
  color: #0BB3A4;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.65;
  text-align: center;
  margin: 0 auto 20px;
  border: 1px solid #0BB3A4;
  border-radius: 20px;
  height: 40px;
  line-height: 38px;
  padding: 0 10px;
  min-width: 283px;
  width: fit-content;
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .imgBox picture, #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .imgBox figure {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .imgBox picture::before, #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .imgBox figure::before {
  content: "";
  padding-top: 83.82%;
  display: block;
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .imgBox picture img, #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .imgBox picture source, #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .imgBox figure img, #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .imgBox figure source {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .txtBox {
  margin-top: 15px;
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .txtBox p.ttl {
  font-size: clamp(18.4px, 2.8746vw, 23px);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.05em;
  padding-left: 0.75em;
  position: relative;
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .txtBox p.ttl::before {
  content: "";
  width: 8px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #0BB3A4;
}
#serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .txtBox p.txt {
  margin-top: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
}
@media (max-width: 480px) {
  #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul {
    flex-direction: column;
    gap: 30px;
  }
  #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li {
    width: 100%;
  }
  #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li p.label {
    font-size: 1.6rem;
    height: 30px;
    line-height: 28px;
    margin-bottom: 12px;
  }
  #serviceDetailWrap.healthcare .inner .healthcareDetailListWrap ul li .txtBox p.txt {
    line-height: 1.7;
  }
}
#serviceDetailWrap.healthcare .partnerBox {
  margin: 70px auto 90px;
  border-bottom: 2px solid #0BB3A4;
  padding-bottom: 32px;
}
@media (max-width: 480px) {
  #serviceDetailWrap.healthcare .partnerBox {
    margin-top: 40px;
    padding-bottom: 20px;
  }
}
#serviceDetailWrap.healthcare .partnerBox .labelInner {
  position: relative;
  margin-bottom: 32px;
}
@media (max-width: 480px) {
  #serviceDetailWrap.healthcare .partnerBox .labelInner {
    margin-bottom: 20px;
  }
}
#serviceDetailWrap.healthcare .partnerBox .labelInner::before {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  background: #0BB3A4;
}
#serviceDetailWrap.healthcare .partnerBox .labelInner::after {
  content: "";
  width: 380px;
  height: 50px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  background: #fff;
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceDetailWrap.healthcare .partnerBox .labelInner::after {
    width: 220px;
    height: 38px;
  }
}
#serviceDetailWrap.healthcare .partnerBox .labelInner .label {
  font-size: clamp(20px, 3.1248vw, 25px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background: #0BB3A4;
  width: 300px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
  margin: 0 auto;
  border-radius: 30px;
  z-index: 3;
}
@media (max-width: 480px) {
  #serviceDetailWrap.healthcare .partnerBox .labelInner .label {
    font-size: 1.8rem;
    width: 200px;
    height: 40px;
    line-height: 38px;
  }
}
#serviceDetailWrap.healthcare .partnerBox ul {
  width: fit-content;
  margin: 0 auto;
}
#serviceDetailWrap.healthcare .partnerBox ul li p.name {
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
  color: #0BB3A4;
  font-size: clamp(20px, 3.1248vw, 25px);
  position: relative;
  padding-left: 1.25em;
  line-height: 1.3;
}
#serviceDetailWrap.healthcare .partnerBox ul li p.name::before {
  content: "";
  width: 0.75em;
  aspect-ratio: 1;
  position: absolute;
  left: 0;
  top: 52.5%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #0BB3A4;
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceDetailWrap.healthcare .partnerBox ul li p.name {
    line-height: 1.7;
    font-size: 1.8rem;
  }
}
#serviceDetailWrap.healthcare .partnerBox ul li + li {
  margin-top: 10px;
}
#serviceDetailWrap.healthcare .partnerBox ul li figure {
  margin: auto;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap {
  margin-top: clamp(33px, 5.7285vw, 55px);
  position: relative;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap::before {
  content: "";
  background: url(../img/caninnovation/fig_parts05.svg) no-repeat center center/contain;
  position: absolute;
  top: 27%;
  right: -3%;
  width: 11.83%;
  aspect-ratio: 1;
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceDetailWrap.electricity .inner .electricityDetailListWrap::before {
    top: -30px;
    width: 60px;
    height: 60px;
  }
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li {
  display: flex;
  gap: 3.27%;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .imgBox {
  width: 40.19%;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .imgBox picture, #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .imgBox figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  border-radius: 10px;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .imgBox picture::before, #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .imgBox figure::before {
  content: "";
  padding-top: 67.44%;
  width: 100%;
  display: block;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .imgBox picture source, #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .imgBox picture img, #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .imgBox figure source, #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .imgBox figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .txtBox {
  width: 56.54%;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .txtBox p.ttl span {
  font-size: clamp(24px, 3.7494vw, 30px);
  line-height: 1.8333333333;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: inline-block;
  position: relative;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: underline;
  -webkit-text-underline-offset: 3px;
  -webkit-text-decoration-thickness: 1px;
}
@media (max-width: 480px) {
  #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .txtBox p.ttl span {
    font-size: 2rem;
    line-height: 1.7;
  }
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .txtBox .txt {
  margin-top: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .txtBox .txt p {
  margin-top: 1em;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li + li {
  margin-top: clamp(30px, 5.208vw, 50px);
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li:nth-child(even) .imgBox {
  order: 2;
}
#serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li:nth-child(even) .txtBox {
  order: 1;
}
@media (max-width: 480px) {
  #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li {
    flex-direction: column;
    gap: 22px;
  }
  #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .imgBox {
    width: 100%;
  }
  #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .txtBox {
    width: 100%;
  }
  #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .txtBox p.ttl {
    font-size: 1.8rem;
    line-height: 1.7;
  }
  #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .txtBox .txt {
    margin-top: 10px;
    font-size: 1.4rem;
  }
  #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li .txtBox .txt p {
    line-height: 1.7;
  }
  #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li + li {
    margin-top: 40px;
  }
  #serviceDetailWrap.electricity .inner .electricityDetailListWrap ul.electricityList > li:nth-child(even) {
    flex-direction: column-reverse;
  }
}
#serviceDetailWrap.electricity .inner .lineupBox {
  margin: clamp(42px, 7.2915vw, 70px) auto 0;
  background: #fff;
  padding: 35px 35px;
  max-width: 790px;
  border-radius: 10px;
}
#serviceDetailWrap.electricity .inner .lineupBox .label {
  font-size: clamp(20px, 3.1248vw, 25px);
  font-weight: 700;
  letter-spacing: 0em;
  color: #fff;
  background: #0BB3A4;
  width: 500px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  position: relative;
  margin: 0 auto;
  border-radius: 30px;
  z-index: 3;
}
#serviceDetailWrap.electricity .inner .lineupBox p.name {
  font-size: clamp(28px, 4.3758vw, 35px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.32;
  text-align: center;
  color: #0BB3A4;
  margin-top: 40px;
}
@media (max-width: 480px) {
  #serviceDetailWrap.electricity .inner .lineupBox p.name {
    font-size: 2.2rem;
    margin-top: 30px;
  }
}
#serviceDetailWrap.electricity .inner .lineupBox p.note {
  margin-top: 35px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.7;
  font-family: "Noto Sans JP", sans-serif;
  text-align: center;
  position: relative;
}
@media (max-width: 480px) {
  #serviceDetailWrap.electricity .inner .lineupBox {
    margin-top: 40px;
    padding: 30px 20px;
  }
  #serviceDetailWrap.electricity .inner .lineupBox .label {
    font-size: 1.8rem;
    height: 40px;
    line-height: 40px;
    width: 220px;
  }
  #serviceDetailWrap.electricity .inner .lineupBox ul {
    margin-top: 25px;
  }
  #serviceDetailWrap.electricity .inner .lineupBox ul li {
    display: block;
  }
  #serviceDetailWrap.electricity .inner .lineupBox ul li figure + figure {
    margin-top: 5px;
  }
  #serviceDetailWrap.electricity .inner .lineupBox p.note {
    font-size: 1.3rem;
    margin-top: 20px;
  }
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap {
  margin-top: clamp(30px, 5.208vw, 50px);
  position: relative;
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap::before {
  content: "";
  background: url(../img/caninnovation/fig_parts05.svg) no-repeat center center/contain;
  position: absolute;
  top: -80px;
  right: -3%;
  width: 11.83%;
  aspect-ratio: 1;
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceDetailWrap.marketing .inner .marketingDetailListWrap::before {
    top: -30px;
    width: 60px;
    height: 60px;
  }
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap ul {
  display: flex;
  gap: 1.5%;
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li {
  width: 32.34%;
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .imgBox picture, #serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .imgBox figure {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .imgBox picture::before, #serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .imgBox figure::before {
  content: "";
  padding-top: 83.82%;
  display: block;
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .imgBox picture img, #serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .imgBox picture source, #serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .imgBox figure img, #serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .imgBox figure source {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .txtBox {
  margin-top: 15px;
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .txtBox p.ttl {
  font-size: clamp(18.4px, 2.8746vw, 23px);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.05em;
  padding-left: 0.75em;
  position: relative;
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .txtBox p.ttl::before {
  content: "";
  width: 8px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #0BB3A4;
}
#serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .txtBox p.txt {
  margin-top: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
}
@media (max-width: 480px) {
  #serviceDetailWrap.marketing .inner .marketingDetailListWrap ul {
    flex-direction: column;
    gap: 30px;
  }
  #serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li {
    width: 100%;
  }
  #serviceDetailWrap.marketing .inner .marketingDetailListWrap ul li .txtBox p.txt {
    line-height: 1.7;
  }
}

#serviceLinkWrap {
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow-x: clip;
  background: url(../img/service/serviceLinkBg.jpg) no-repeat center center/cover;
}
@media (max-width: 480px) {
  #serviceLinkWrap {
    padding: 80px 0;
  }
}
#serviceLinkWrap::before {
  content: "";
  background: url(../img/caninnovation/fig_parts07.svg) no-repeat center center/contain;
  position: absolute;
  bottom: 17%;
  right: 10%;
  width: 12.85%;
  height: 227px;
  transform: rotate(-113deg);
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceLinkWrap::before {
    bottom: -1%;
    right: 5%;
    width: 80px;
    height: 120px;
  }
}
#serviceLinkWrap::after {
  content: "";
  background: url(../img/caninnovation/fig_parts06.svg) no-repeat center center/contain;
  position: absolute;
  top: -5%;
  left: 10%;
  width: 11.83%;
  aspect-ratio: 1;
  z-index: 1;
}
@media (max-width: 480px) {
  #serviceLinkWrap::after {
    width: 60px;
    height: 60px;
  }
}
#serviceLinkWrap .container h2 {
  text-align: center;
}
#serviceLinkWrap .container h2 span {
  text-align: center;
  margin: 0 auto clamp(15px, 2.604vw, 25px);
  font-size: clamp(24px, 3.7494vw, 30px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: block;
  position: relative;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: underline;
  -webkit-text-underline-offset: 3px;
  -webkit-text-decoration-thickness: 1px;
}
@media (max-width: 480px) {
  #serviceLinkWrap .container h2 span {
    font-size: 2rem;
    line-height: 1.7;
  }
}
#serviceLinkWrap .container p.read {
  text-align: center;
  font-weight: 500;
  line-height: 2.0625;
  letter-spacing: 0.05em;
}
@media (max-width: 480px) {
  #serviceLinkWrap .container p.read {
    line-height: 1.7;
  }
}
#serviceLinkWrap .container .moreBtn {
  margin: 40px auto 0;
}
@media (max-width: 480px) {
  #serviceLinkWrap .container .moreBtn {
    margin-top: 40px;
  }
}
#serviceLinkWrap .container .moreBtn a i {
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
}
@media (max-width: 480px) {
  #serviceLinkWrap .container .moreBtn a i {
    width: 13px;
    height: 13px;
  }
}
#serviceLinkWrap .container .moreBtn a i img {
  filter: brightness(0);
}
#serviceLinkWrap .container .moreBtn a:hover {
  opacity: 1;
}
#serviceLinkWrap .container .moreBtn a:hover i img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

#faqArea {
  margin: clamp(72px, 12.4995vw, 120px) auto;
}
#faqArea h2 {
  margin-bottom: clamp(48px, 8.334vw, 80px);
}
#faqArea .tabWrap .tabs {
  border-bottom: 1px solid #000000;
}
@media (max-width: 820px) {
  #faqArea .tabWrap .tabs {
    border-bottom: none;
  }
}
#faqArea .tabWrap .tabs li.tab {
  margin-right: clamp(36px, 6.2505vw, 60px);
  position: relative;
}
#faqArea .tabWrap .tabs li.tab::before {
  content: "";
  width: 100%;
  height: 4px;
  background: #4880D3;
  display: block;
  transform: scale(0, 1);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  position: absolute;
  left: 0;
  bottom: -2px;
}
#faqArea .tabWrap .tabs li.tab span {
  padding: 0 5px 14px;
  color: #000000;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 500;
  display: block;
}
#faqArea .tabWrap .tabs li.tab.active::before {
  transform: scale(1, 1);
}
#faqArea .tabWrap .tabs li.tab.active span {
  color: #4880D3;
  font-weight: 700;
}
@media (max-width: 1024px) {
  #faqArea .tabWrap .tabs li.tab {
    margin-right: clamp(24px, 4.167vw, 40px);
  }
  #faqArea .tabWrap .tabs li.tab span {
    font-size: 1.6rem;
  }
}
@media (max-width: 480px) {
  #faqArea .tabWrap .tabs li.tab {
    margin: 0;
    width: 50%;
    text-align: center;
  }
  #faqArea .tabWrap .tabs li.tab span {
    padding: 0 5px 5px;
    font-size: 1.4rem;
  }
}
#faqArea .accordionBox + .accordionBox {
  margin-top: clamp(12px, 2.0835vw, 20px);
}
#faqArea .accordionBox .targetBtn {
  padding: clamp(12px, 2.0835vw, 20px) 40px clamp(12px, 2.0835vw, 20px) clamp(36px, 6.2505vw, 60px);
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 500;
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#faqArea .accordionBox .targetBtn::before {
  content: "Q.";
  font-size: clamp(32px, 5.0004vw, 40px);
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  line-height: 1;
  position: absolute;
  top: 0.5em;
  left: 0;
}
#faqArea .accordionBox .targetBtn .toggle {
  margin: auto;
  width: 30px;
  height: 30px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  display: block;
  position: absolute;
  top: clamp(15px, 2.604vw, 25px);
  right: 0;
}
#faqArea .accordionBox .targetBtn .toggle span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #a1a1a1;
  display: block;
  position: relative;
}
#faqArea .accordionBox .targetBtn .toggle span::before, #faqArea .accordionBox .targetBtn .toggle span::after {
  content: "";
  margin: auto;
  width: 63%;
  height: 1px;
  background: #a1a1a1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#faqArea .accordionBox .targetBtn .toggle span::after {
  transform: rotate(90deg);
}
#faqArea .accordionBox .acdInner .answerBox {
  padding: clamp(12px, 2.0835vw, 20px) 40px clamp(12px, 2.0835vw, 20px) clamp(48px, 8.334vw, 80px);
  background: #4880D3;
  position: relative;
}
#faqArea .accordionBox .acdInner .answerBox::before {
  content: "A.";
  color: #FFFFFF;
  font-size: clamp(32px, 5.0004vw, 40px);
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  line-height: 1;
  position: absolute;
  top: 0.5em;
  left: clamp(12px, 2.0835vw, 20px);
}
#faqArea .accordionBox .acdInner .answerBox p {
  color: #FFFFFF;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 500;
}
#faqArea .accordionBox.active {
  overflow-y: auto;
}
#faqArea .accordionBox.active .targetBtn .toggle span::before {
  transform: rotate(180deg);
}
#faqArea .accordionBox.active .targetBtn .toggle span::after {
  transform: rotate(180deg);
}
@media (max-width: 480px) {
  #faqArea .accordionBox .targetBtn {
    padding: clamp(12px, 2.0835vw, 20px) 25px;
    font-size: 1.2rem;
  }
  #faqArea .accordionBox .targetBtn::before {
    font-size: 2rem;
    top: 10px;
  }
  #faqArea .accordionBox .targetBtn .toggle {
    width: 18px;
    height: 18px;
  }
  #faqArea .accordionBox .targetBtn .toggle span {
    width: 18px;
    height: 18px;
  }
  #faqArea .accordionBox .acdInner .answerBox {
    padding: clamp(12px, 2.0835vw, 20px) 25px;
  }
  #faqArea .accordionBox .acdInner .answerBox::before {
    font-size: 2rem;
    top: 10px;
  }
  #faqArea .accordionBox .acdInner .answerBox p {
    font-size: 1.2rem;
  }
}

/*============================================================================
	company
=============================================================================*/
#messageAreaWrap {
  padding: clamp(72px, 12.4995vw, 120px) 0 0;
}
#messageAreaWrap h2 {
  margin-bottom: clamp(48px, 8.334vw, 80px);
}
#messageAreaWrap .ceoMessageBox .textBox {
  margin: 0 0 0 auto;
  width: 42.7%;
}
#messageAreaWrap .ceoMessageBox .textBox h3 {
  margin-bottom: clamp(48px, 8.334vw, 80px);
  font-size: clamp(32px, 5.0004vw, 40px);
  font-weight: 900;
  line-height: 1.4;
}
#messageAreaWrap .ceoMessageBox .textBox p + p {
  margin-top: 1.5em;
}
#messageAreaWrap .ceoMessageBox .ceoFigbox {
  width: 48.2%;
}
#messageAreaWrap .ceoMessageBox .ceoFigbox picture {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#messageAreaWrap .ceoMessageBox .ceoFigbox picture::before {
  content: "";
  padding-top: 122.2%;
  width: 100%;
  display: block;
}
#messageAreaWrap .ceoMessageBox .ceoFigbox picture source, #messageAreaWrap .ceoMessageBox .ceoFigbox picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#messageAreaWrap .ceoMessageBox .ceoFigbox .name {
  margin: 10px 0 0 auto;
  text-align: right;
}
#messageAreaWrap .ceoMessageBox .ceoFigbox .name strong {
  font-size: clamp(25.6px, 3.9996vw, 32px);
  font-weight: 900;
}
@media (max-width: 1300px) {
  #messageAreaWrap .ceoMessageBox {
    display: block;
  }
  #messageAreaWrap .ceoMessageBox .textBox {
    margin: 0;
    width: auto;
  }
  #messageAreaWrap .ceoMessageBox .ceoFigbox {
    margin: 0 clamp(24px, 4.167vw, 40px) clamp(24px, 4.167vw, 40px) 0;
    width: 30%;
    float: left;
  }
}
@media (max-width: 1024px) {
  #messageAreaWrap .ceoMessageBox {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
  }
  #messageAreaWrap .ceoMessageBox .textBox {
    margin: 0;
    width: 100%;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1;
    order: 1;
  }
  #messageAreaWrap .ceoMessageBox .ceoFigbox {
    margin: clamp(24px, 4.167vw, 40px) 0 0 auto;
    width: 50%;
    float: none;
    -webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2;
    order: 2;
  }
}
@media (max-width: 480px) {
  #messageAreaWrap .ceoMessageBox .ceoFigbox {
    width: 70%;
  }
}

#profileAreaWrap {
  padding: clamp(72px, 12.4995vw, 120px) 0 0;
}
#profileAreaWrap h2 {
  margin-bottom: clamp(48px, 8.334vw, 80px);
}
#profileAreaWrap dl {
  padding: clamp(24px, 4.167vw, 40px);
  width: 100%;
  border-bottom: 1px solid #EFF0F0;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
}
#profileAreaWrap dl dt {
  margin: 0 0 auto;
  padding-left: 25px;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
  width: 26%;
  position: relative;
}
#profileAreaWrap dl dt::before {
  content: "";
  width: 4px;
  height: 100%;
  background: #4880D3;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#profileAreaWrap dl dd {
  margin: auto 0;
  width: 74%;
}
#profileAreaWrap dl dd ul li {
  margin-right: 2em;
}
@media (max-width: 480px) {
  #profileAreaWrap dl {
    padding: 20px 0;
    display: block;
  }
  #profileAreaWrap dl dt {
    width: 100%;
  }
  #profileAreaWrap dl dd {
    margin-top: 10px;
    padding-left: 29px;
    width: 100%;
  }
}

#businessAreaWrap {
  padding: clamp(72px, 12.4995vw, 120px) 0 0;
}
#businessAreaWrap h2 {
  margin-bottom: clamp(48px, 8.334vw, 80px);
}
#businessAreaWrap section {
  padding: clamp(24px, 4.167vw, 40px) 0 clamp(24px, 4.167vw, 40px) clamp(48px, 8.334vw, 80px);
  border-bottom: 1px solid #EFF0F0;
}
#businessAreaWrap section h3 {
  margin-bottom: clamp(24px, 4.167vw, 40px);
  color: #4880D3;
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 900;
  line-height: 1.4;
}
#businessAreaWrap section ul li {
  margin-right: 2em;
}
#businessAreaWrap section + section {
  border-top: 1px solid #EFF0F0;
}
@media (max-width: 1024px) {
  #businessAreaWrap section {
    padding: 20px;
  }
}
@media (max-width: 480px) {
  #businessAreaWrap section {
    padding: 20px 0;
  }
}

#historyAreaWrap {
  padding: clamp(72px, 12.4995vw, 120px) 0 0;
}
#historyAreaWrap h2 {
  margin-bottom: clamp(48px, 8.334vw, 80px);
}
#historyAreaWrap ul {
  margin: auto;
  max-width: 1140px;
}
#historyAreaWrap ul li {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#historyAreaWrap ul li .ym {
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
  width: 160px;
  line-height: 1.2;
}
#historyAreaWrap ul li .read {
  padding-left: clamp(36px, 6.2505vw, 60px);
  width: calc(100% - 240px);
}
#historyAreaWrap ul li span {
  width: 20px;
  height: clamp(60px, 10.416vw, 100px);
  position: relative;
}
#historyAreaWrap ul li span::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #4880D3;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
}
#historyAreaWrap ul li span::after {
  content: "";
  margin: auto;
  width: 4px;
  height: 100%;
  background: #4880D3;
  display: block;
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  bottom: auto;
}
@media (max-width: 480px) {
  #historyAreaWrap ul li {
    padding-left: 40px;
    padding-bottom: 15px;
    display: block;
    position: relative;
  }
  #historyAreaWrap ul li .ym {
    width: 100%;
  }
  #historyAreaWrap ul li .read {
    margin-top: 5px;
    padding: 0;
    width: 100%;
    line-height: 1.4;
  }
  #historyAreaWrap ul li span {
    width: 12px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #historyAreaWrap ul li span::before {
    width: 12px;
    height: 12px;
  }
  #historyAreaWrap ul li span::after {
    width: 2px;
  }
}

#officeAreaWrap {
  padding: clamp(72px, 12.4995vw, 120px) 0;
}
#officeAreaWrap h2 {
  margin-bottom: clamp(48px, 8.334vw, 80px);
}
#officeAreaWrap section {
  padding-bottom: clamp(36px, 6.2505vw, 60px);
  border-bottom: 1px solid #EFF0F0;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#officeAreaWrap section .address {
  padding-left: clamp(48px, 8.334vw, 80px);
  width: 26%;
}
#officeAreaWrap section .address h3 {
  margin: 0 auto clamp(24px, 4.167vw, 40px);
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
}
#officeAreaWrap section .imageBlock {
  margin: 0 0 0 auto;
  width: 57.7%;
}
#officeAreaWrap section .imageBlock picture {
  width: 40.7%;
  overflow: hidden;
  display: block;
  position: relative;
}
#officeAreaWrap section .imageBlock picture::before {
  content: "";
  padding-top: 75%;
  width: 100%;
  display: block;
}
#officeAreaWrap section .imageBlock picture source, #officeAreaWrap section .imageBlock picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#officeAreaWrap section .imageBlock .gmap {
  margin: 0 0 0 auto;
  width: 56.7%;
  position: relative;
}
#officeAreaWrap section .imageBlock .gmap::before {
  content: "";
  padding-top: 54%;
  width: 100%;
  display: block;
}
#officeAreaWrap section .imageBlock .gmap iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#officeAreaWrap section + section {
  padding-top: clamp(36px, 6.2505vw, 60px);
}
@media (max-width: 1024px) {
  #officeAreaWrap section .address {
    padding-left: 0;
    width: 40%;
  }
  #officeAreaWrap section .imageBlock {
    width: 60%;
  }
}
@media (max-width: 480px) {
  #officeAreaWrap section .address {
    width: 100%;
  }
  #officeAreaWrap section .address h3 {
    margin-bottom: 10px;
  }
  #officeAreaWrap section .imageBlock {
    margin-top: clamp(24px, 4.167vw, 40px);
    width: 100%;
  }
}

/*============================================================================
	community
=============================================================================*/
#communityHeader {
  padding: clamp(72px, 12.4995vw, 120px) 0;
}
#communityHeader h2 {
  font-size: clamp(31.2px, 5.0554vw, 52px);
  font-weight: 900;
}

.communityBoxWrap {
  margin: auto;
  max-width: 1070px;
  width: 85%;
}
.communityBoxWrap h3 {
  margin: 0 auto clamp(24px, 4.167vw, 40px);
  font-size: clamp(32px, 5.0004vw, 40px);
  font-weight: 900;
}
@media (max-width: 480px) {
  .communityBoxWrap h3 {
    font-size: clamp(24px, 3.7494vw, 30px);
  }
}
.communityBoxWrap .read p {
  line-height: 2;
}
.communityBoxWrap .activityBox {
  margin-top: clamp(24px, 4.167vw, 40px);
  padding: clamp(15px, 2.604vw, 25px);
  width: 100%;
  text-align: center;
  background: #4880D3;
}
.communityBoxWrap .activityBox p {
  color: #FFFFFF;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
}
.communityBoxWrap .imageBlock {
  margin: clamp(24px, 4.167vw, 40px) auto 0;
  width: 100%;
}
.communityBoxWrap .imageBlock picture {
  overflow: hidden;
  display: block;
  position: relative;
}
.communityBoxWrap .imageBlock picture::before {
  content: "";
  width: 100%;
  display: block;
}
@media (max-width: 480px) {
  .communityBoxWrap .imageBlock picture::before {
    padding-top: 100vh;
  }
}
.communityBoxWrap .imageBlock picture source, .communityBoxWrap .imageBlock picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.communityBoxWrap + .communityBoxWrap {
  margin-top: clamp(72px, 12.4995vw, 120px);
}

#thoughtsArea .read {
  max-width: 550px;
}

#sponsorshipArea .imageBlock picture {
  width: 48%;
}
#sponsorshipArea .imageBlock picture::before {
  padding-top: 43%;
}
@media (max-width: 480px) {
  #sponsorshipArea .imageBlock picture {
    width: 100%;
  }
  #sponsorshipArea .imageBlock picture + picture {
    margin-top: 20px;
  }
}

#certificationArea .imageBlock picture {
  width: 30%;
}
#certificationArea .imageBlock picture::before {
  padding-top: 69.7%;
}
@media (max-width: 480px) {
  #certificationArea .imageBlock picture {
    width: 100%;
  }
}

/*============================================================================
	recruit
=============================================================================*/
#cheaderWrap #cheaderInnerBox .cheaderText .read {
  text-shadow: -2px -2px 4px #EFF0F0, 2px 2px 4px #EFF0F0, -2px 2px 4px #EFF0F0, 2px -2px 4px #EFF0F0;
}
#cheaderWrap .recruitImg::after {
  content: "";
  width: 100%;
  height: 60px;
  background: #EFF0F0;
  display: block;
  position: absolute;
  top: 0;
  z-index: 5;
}
@media (max-width: 1300px) {
  #cheaderWrap .recruitImg::before {
    padding-top: 85vh;
  }
}
@media (max-width: 480px) {
  #cheaderWrap .recruitImg {
    max-height: none;
  }
}

#recruitTopWrap {
  width: 100%;
  background: #EFF0F0;
}
#recruitTopWrap #recruitIntroArea {
  margin-top: max(-200px,-27.778vw);
  padding: clamp(128px, 26.6664vw, 320px) 0 clamp(72px, 12.4995vw, 120px);
  overflow: hidden;
  position: relative;
}
#recruitTopWrap #recruitIntroArea .headerText {
  margin: auto;
  max-width: 730px;
  width: 85%;
  position: relative;
  z-index: 10;
}
#recruitTopWrap #recruitIntroArea .headerText h2 {
  margin: 0 auto clamp(24px, 4.167vw, 40px);
  color: #E2B623;
  font-size: clamp(31.2px, 5.6661vw, 48px);
  font-weight: 900;
  text-align: center;
}
@media (max-width: 480px) {
  #recruitTopWrap #recruitIntroArea .headerText h2 {
    font-size: 2.6rem;
  }
}
#recruitTopWrap #recruitIntroArea .headerText p {
  line-height: 2;
}
#recruitTopWrap #recruitIntroArea .mainImage {
  margin: clamp(72px, 12.4995vw, 120px) auto 0;
  max-width: 1220px;
  width: 90%;
  position: relative;
  z-index: 10;
}
#recruitTopWrap #recruitIntroArea .figAtc {
  margin: auto;
  position: absolute;
  z-index: 5;
}
#recruitTopWrap #recruitIntroArea .figAtc picture {
  width: 100%;
  display: block;
}
#recruitTopWrap #recruitIntroArea .figAtc.img01 {
  width: 20.5555555556vw;
  height: auto;
  aspect-ratio: 148/157;
  top: 0;
  right: 0;
}
#recruitTopWrap #recruitIntroArea .figAtc.img02 {
  width: 26.8055555556vw;
  height: auto;
  aspect-ratio: 386/337;
  top: clamp(48px, 8.334vw, 80px);
  left: -20px;
  right: auto;
}
#recruitTopWrap #recruitIntroArea .figAtc.img03 {
  width: 25.625vw;
  height: auto;
  aspect-ratio: 369/347;
  top: 30.5555555556vw;
  left: auto;
  right: -50px;
}
#recruitTopWrap #recruitIntroArea .figAtc.img04 {
  width: 21.0416666667vw;
  height: auto;
  aspect-ratio: 101/102;
  top: 37.5vw;
  left: 0;
}
@media (max-width: 820px) {
  #recruitTopWrap #recruitIntroArea .figAtc.img01 {
    top: 10.6666666667vw;
  }
  #recruitTopWrap #recruitIntroArea .figAtc.img02 {
    top: 21.3333333333vw;
  }
  #recruitTopWrap #recruitIntroArea .figAtc.img03 {
    top: 50%;
  }
  #recruitTopWrap #recruitIntroArea .figAtc.img04 {
    top: 60%;
  }
}
@media (max-width: 480px) {
  #recruitTopWrap #recruitIntroArea .figAtc.img03 {
    top: auto;
    right: -10px;
    bottom: 22%;
  }
  #recruitTopWrap #recruitIntroArea .figAtc.img04 {
    top: auto;
    bottom: 20%;
  }
}

#featureWrap {
  background: #EFF0F0;
}
#featureWrap #pointArea ol {
  margin: 0 0 0 auto;
  width: 47.2%;
  counter-reset: pointNum 0;
  -webkit-order: 2;
  -moz-order: 2;
  -ms-order: 2;
  order: 2;
}
#featureWrap #pointArea ol li {
  padding-left: 70px;
  position: relative;
}
#featureWrap #pointArea ol li .ttl {
  margin: 0 auto clamp(12px, 2.0835vw, 20px);
  font-size: clamp(25.6px, 3.9996vw, 32px);
  font-weight: 900;
  line-height: 1.2;
}
#featureWrap #pointArea ol li::before {
  counter-increment: pointNum 1;
  content: "0" counter(pointNum);
  color: #E2B623;
  font-family: "Roboto", sans-serif;
  font-size: clamp(29.25px, 5.3125vw, 45px);
  font-weight: 700;
  line-height: 1;
  position: absolute;
  top: -4px;
  left: 0;
}
#featureWrap #pointArea ol li + li {
  margin-top: clamp(48px, 8.334vw, 80px);
}
#featureWrap #pointArea figure {
  width: 44.3%;
  -webkit-order: 1;
  -moz-order: 1;
  -ms-order: 1;
  order: 1;
}
@media (max-width: 1024px) {
  #featureWrap #pointArea figure {
    margin: 0 auto clamp(36px, 6.2505vw, 60px);
    width: 50%;
    -webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1;
    order: 1;
  }
  #featureWrap #pointArea ol {
    width: 100%;
  }
}
@media (max-width: 480px) {
  #featureWrap #pointArea figure {
    width: 90%;
  }
  #featureWrap #pointArea ol li {
    padding-left: 50px;
  }
  #featureWrap #pointArea ol li .ttl {
    font-size: 2.2rem;
  }
}
#featureWrap .slopeR {
  padding-top: clamp(160px, 33.3336vw, 400px);
}
#featureWrap #systemArea {
  padding: clamp(36px, 6.2505vw, 60px) 0 clamp(72px, 12.4995vw, 120px);
  background: #E2B623;
}
#featureWrap #systemArea .topBlock {
  margin-bottom: clamp(60px, 10.416vw, 100px);
}
#featureWrap #systemArea .topBlock h3 {
  font-size: clamp(31.2px, 5.6661vw, 48px);
  font-weight: 900;
  line-height: 1.4;
}
#featureWrap #systemArea .topBlock .textBox {
  margin: 0 0 0 auto;
  width: 56.4%;
}
#featureWrap #systemArea .topBlock .textBox p {
  line-height: 2;
}
@media (max-width: 1300px) {
  #featureWrap #systemArea .topBlock .textBox {
    margin: clamp(24px, 4.167vw, 40px) 0 0;
    width: 100%;
  }
}
#featureWrap #systemArea .systemPointBlock .systemCard {
  margin: 0 3.5% 0 0;
  padding: clamp(24px, 4.167vw, 40px);
  width: 31%;
  background: #FFFFFF;
}
#featureWrap #systemArea .systemPointBlock .systemCard:nth-of-type(3n) {
  margin-right: 0;
}
#featureWrap #systemArea .systemPointBlock .systemCard h4 {
  margin: 0 auto clamp(12px, 2.0835vw, 20px);
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}
#featureWrap #systemArea .systemPointBlock .systemCard picture {
  margin: 0 auto clamp(12px, 2.0835vw, 20px);
  width: 48%;
  overflow: hidden;
  border-radius: 50%;
  display: block;
  position: relative;
}
#featureWrap #systemArea .systemPointBlock .systemCard picture::before {
  content: "";
  padding-top: 100%;
  display: block;
}
#featureWrap #systemArea .systemPointBlock .systemCard picture source, #featureWrap #systemArea .systemPointBlock .systemCard picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#featureWrap #systemArea .systemPointBlock .systemCard p {
  line-height: 1.8;
}
@media (max-width: 1024px) {
  #featureWrap #systemArea .systemPointBlock .systemCard {
    margin: 0 0 clamp(36px, 6.2505vw, 60px);
    width: 100%;
    display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 0;
  }
  #featureWrap #systemArea .systemPointBlock .systemCard picture {
    margin: auto 0;
    width: 100%;
    grid-area: 1/1/3/2;
  }
  #featureWrap #systemArea .systemPointBlock .systemCard h4 {
    margin: auto 0 20px;
    text-align: left;
    grid-area: 1/2/2/3;
  }
  #featureWrap #systemArea .systemPointBlock .systemCard h4 br {
    display: none;
  }
  #featureWrap #systemArea .systemPointBlock .systemCard p {
    grid-area: 2/2/3/3;
  }
}
@media (max-width: 480px) {
  #featureWrap #systemArea .systemPointBlock .systemCard {
    display: block;
  }
  #featureWrap #systemArea .systemPointBlock .systemCard picture {
    margin: 0 auto 20px;
    width: 50%;
  }
  #featureWrap #systemArea .systemPointBlock .systemCard h4 {
    text-align: center;
  }
  #featureWrap #systemArea .systemPointBlock .systemCard h4 br {
    display: block;
  }
}

#voiceNaviWrap {
  padding: clamp(72px, 12.4995vw, 120px) 0;
}
#voiceNaviWrap h2 {
  margin-bottom: clamp(24px, 4.167vw, 40px);
}
#voiceNaviWrap .topText {
  font-size: clamp(16px, 2.5002vw, 20px);
}
#voiceNaviWrap #voiceNaviBox {
  margin-top: clamp(48px, 8.334vw, 80px);
}
#voiceNaviWrap #voiceNaviBox .naviCard {
  width: 48%;
  border-radius: 4px;
}
#voiceNaviWrap #voiceNaviBox .naviCard a {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}
#voiceNaviWrap #voiceNaviBox .naviCard a .ttl {
  color: #FFFFFF;
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 900;
  line-height: 1.6;
  position: absolute;
  top: clamp(12px, 2.0835vw, 20px);
  left: clamp(12px, 2.0835vw, 20px);
  z-index: 5;
}
#voiceNaviWrap #voiceNaviBox .naviCard a .arrowBtn {
  margin: auto;
  position: absolute;
  right: clamp(12px, 2.0835vw, 20px);
  bottom: clamp(15px, 2.604vw, 25px);
}
#voiceNaviWrap #voiceNaviBox .naviCard a picture {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  display: block;
  position: relative;
}
#voiceNaviWrap #voiceNaviBox .naviCard a picture::before {
  content: "";
  padding-top: 64%;
  width: 100%;
  display: block;
}
#voiceNaviWrap #voiceNaviBox .naviCard a picture source, #voiceNaviWrap #voiceNaviBox .naviCard a picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#voiceNaviWrap #voiceNaviBox .naviCard a picture::after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.38);
  display: block;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#voiceNaviWrap #voiceNaviBox .naviCard a:hover picture source, #voiceNaviWrap #voiceNaviBox .naviCard a:hover picture img {
  transform: scale(1.2);
}
#voiceNaviWrap #voiceNaviBox .naviCard a:hover picture::after {
  opacity: 0;
}
#voiceNaviWrap #voiceNaviBox .naviCard + .naviCard {
  margin-left: 4%;
}
@media (max-width: 820px) {
  #voiceNaviWrap #voiceNaviBox .naviCard {
    margin: auto;
    width: 80%;
  }
  #voiceNaviWrap #voiceNaviBox .naviCard + .naviCard {
    margin-top: clamp(24px, 4.167vw, 40px);
    margin-left: auto;
  }
}
@media (max-width: 480px) {
  #voiceNaviWrap #voiceNaviBox .naviCard a .ttl {
    font-size: 1.8rem;
  }
  #voiceNaviWrap #voiceNaviBox .naviCard a .arrowBtn {
    bottom: clamp(12px, 2.0835vw, 20px);
  }
}

#joinCardWrap {
  margin: clamp(72px, 12.4995vw, 120px) auto;
  width: 100%;
  position: relative;
}
#joinCardWrap .textBox {
  margin: auto;
  max-width: 1125px;
  width: 85%;
  height: fit-content;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}
#joinCardWrap .textBox .ttl {
  color: #FFFFFF;
  font-size: clamp(25.6px, 3.9996vw, 32px);
  font-weight: 900;
  line-height: 1.875;
  width: calc(100% - 340px);
}
#joinCardWrap .textBox .moreBtn {
  margin: 0 0 0 auto;
  width: 300px;
  height: 120px;
}
#joinCardWrap .textBox .moreBtn a {
  padding: clamp(12px, 2.0835vw, 20px);
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-justify-content: start;
  -moz-justify-content: start;
  justify-content: start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#joinCardWrap .textBox .moreBtn a span {
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 900;
}
#joinCardWrap .textBox .moreBtn a i {
  margin: auto;
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: auto;
  right: clamp(12px, 2.0835vw, 20px);
  bottom: 0;
}
#joinCardWrap .textBox .moreBtn a i::before, #joinCardWrap .textBox .moreBtn a i::after {
  width: 23px;
  height: 13px;
}
#joinCardWrap picture {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#joinCardWrap picture::before {
  content: "";
  padding-top: 30%;
  width: 100%;
  display: block;
}
#joinCardWrap picture source, #joinCardWrap picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#joinCardWrap picture::after {
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: block;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
@media (max-width: 820px) {
  #joinCardWrap .textBox .ttl {
    width: 100%;
  }
  #joinCardWrap .textBox .moreBtn {
    margin: clamp(24px, 4.167vw, 40px) 0 0 auto;
    height: 80px;
  }
  #joinCardWrap picture::before {
    padding-top: 50%;
  }
}
@media (max-width: 480px) {
  #joinCardWrap .textBox .ttl {
    font-size: 1.8rem;
  }
  #joinCardWrap .textBox .moreBtn {
    height: 60px;
  }
  #joinCardWrap .textBox .moreBtn a span {
    font-size: 1.4rem;
  }
  #joinCardWrap .textBox .moreBtn a i {
    margin: auto;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: auto;
    right: clamp(12px, 2.0835vw, 20px);
    bottom: 0;
  }
  #joinCardWrap .textBox .moreBtn a i::before, #joinCardWrap .textBox .moreBtn a i::after {
    width: 12px;
    height: 6px;
  }
  #joinCardWrap picture::before {
    padding-top: 78%;
  }
}

/*--------------------
	VOICE
--------------------*/
#voiceIntroWrap {
  margin: clamp(60px, 10.416vw, 100px) auto;
}
#voiceIntroWrap section h2 {
  margin: 0 auto clamp(24px, 4.167vw, 40px);
  color: #4880D3;
  font-size: clamp(32px, 5.0004vw, 40px);
  line-height: 1.4;
}
@media (max-width: 480px) {
  #voiceIntroWrap section h2 {
    font-size: clamp(24px, 3.7494vw, 30px);
  }
}
#voiceIntroWrap section .textBox p {
  line-height: 2;
}
#voiceIntroWrap section + section {
  margin-top: clamp(48px, 8.334vw, 80px);
}
#voiceIntroWrap section.memberBox figure {
  margin: 0 auto clamp(12px, 2.0835vw, 20px);
  width: 86%;
  max-width: 990px;
  overflow: hidden;
  display: block;
  position: relative;
}
#voiceIntroWrap section.memberBox figure::before {
  content: "";
  padding-top: 47%;
  width: 100%;
  display: block;
}
#voiceIntroWrap section.memberBox figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#voiceIntroWrap section.memberBox .memberName {
  margin: 0 auto;
  width: 86%;
  max-width: 990px;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
}

#voiceArticleWrap {
  counter-reset: number 0;
}
#voiceArticleWrap section h2 {
  margin-bottom: clamp(48px, 8.334vw, 80px);
  padding-bottom: clamp(24px, 4.167vw, 40px);
  font-size: clamp(32px, 5.0004vw, 40px);
  font-weight: 900;
  line-height: 1.4;
  border-bottom: 1px solid #000000;
}
#voiceArticleWrap section h2::before {
  counter-increment: number 1;
  content: counter(number, decimal-leading-zero);
  margin-right: clamp(24px, 4.167vw, 40px);
  color: #4880D3;
  font-family: "Roboto", sans-serif;
  font-size: clamp(50px, 13.3332vw, 160px);
  line-height: 1;
  display: inline-block;
}
@media (max-width: 820px) {
  #voiceArticleWrap section h2::before {
    font-size: clamp(60px, 9.0272vw, 100px);
  }
}
@media (max-width: 480px) {
  #voiceArticleWrap section h2 {
    font-size: clamp(24px, 3.7494vw, 30px);
  }
  #voiceArticleWrap section h2::before {
    margin-right: 15px;
    font-size: clamp(36px, 5.8338vw, 60px);
  }
}
#voiceArticleWrap section > div {
  margin-bottom: clamp(60px, 10.416vw, 100px);
}
#voiceArticleWrap section .textBox .comment {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
}
#voiceArticleWrap section .textBox .comment dt {
  color: #4880D3;
  font-weight: 700;
  width: 4em;
}
#voiceArticleWrap section .textBox .comment dd {
  margin: 0 0 0 auto;
  width: calc(100% - 5em);
}
#voiceArticleWrap section .textBox .comment + .comment {
  margin-top: 1.5em;
}
@media (max-width: 480px) {
  #voiceArticleWrap section .textBox .comment dt {
    width: 3em;
  }
  #voiceArticleWrap section .textBox .comment dd {
    width: calc(100% - 4em);
  }
}
#voiceArticleWrap section .halfPhoto {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#voiceArticleWrap section .halfPhoto .textBox {
  width: 48%;
}
#voiceArticleWrap section .halfPhoto figure {
  width: 48%;
  overflow: hidden;
  display: block;
  position: relative;
}
#voiceArticleWrap section .halfPhoto figure::before {
  content: "";
  padding-top: 70%;
  width: 100%;
  display: block;
}
#voiceArticleWrap section .halfPhoto figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#voiceArticleWrap section .halfPhoto.photoL .textBox {
  -webkit-order: 2;
  -moz-order: 2;
  -ms-order: 2;
  order: 2;
}
#voiceArticleWrap section .halfPhoto.photoL figure {
  -webkit-order: 1;
  -moz-order: 1;
  -ms-order: 1;
  order: 1;
}
@media (max-width: 820px) {
  #voiceArticleWrap section .halfPhoto .textBox {
    width: 100%;
  }
  #voiceArticleWrap section .halfPhoto figure {
    width: 80%;
  }
  #voiceArticleWrap section .halfPhoto.photoL .textBox {
    -webkit-order: 1;
    -moz-order: 1;
    -ms-order: 1;
    order: 1;
  }
  #voiceArticleWrap section .halfPhoto.photoL figure {
    margin: clamp(24px, 4.167vw, 40px) 0 0;
    -webkit-order: 2;
    -moz-order: 2;
    -ms-order: 2;
    order: 2;
  }
  #voiceArticleWrap section .halfPhoto.photoR figure {
    margin: clamp(24px, 4.167vw, 40px) 0 0 auto;
  }
}
@media (max-width: 480px) {
  #voiceArticleWrap section .halfPhoto figure {
    width: 100%;
  }
}
#voiceArticleWrap section .sizeFull {
  margin: 0 auto clamp(48px, 8.334vw, 80px);
  width: 80%;
  max-width: 820px;
}
#voiceArticleWrap section .sizeFull figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#voiceArticleWrap section .sizeFull figure::before {
  content: "";
  padding-top: 53.3%;
  width: 100%;
  display: block;
}
#voiceArticleWrap section .sizeFull figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#voiceArticleWrap section .sizeFull p {
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
  text-align: right;
}
#voiceArticleWrap .endcard {
  margin-top: clamp(72px, 12.4995vw, 120px);
  width: 100%;
}
#voiceArticleWrap .endcard figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#voiceArticleWrap .endcard figure::before {
  content: "";
  padding-top: 53.3%;
  width: 100%;
  display: block;
}
#voiceArticleWrap .endcard figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#voiceArticleWrap .postlink {
  margin: clamp(72px, 12.4995vw, 120px) auto;
}
#voiceArticleWrap .postlink li a, #voiceArticleWrap .postlink li span {
  font-size: clamp(16px, 2.5002vw, 20px);
  font-family: "Roboto", sans-serif;
  line-height: 1;
  display: block;
  position: relative;
}
#voiceArticleWrap .postlink li a i, #voiceArticleWrap .postlink li span i {
  width: 20px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #4880D3;
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
}
#voiceArticleWrap .postlink li a i::before, #voiceArticleWrap .postlink li a i::after, #voiceArticleWrap .postlink li span i::before, #voiceArticleWrap .postlink li span i::after {
  content: "";
  margin: auto;
  width: 11px;
  height: 6px;
  background: url("../img/common/arrow.svg") no-repeat center center/contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation-fill-mode: forwards;
  animation-duration: 0.6s;
  filter: invert(47%) sepia(77%) saturate(674%) hue-rotate(185deg) brightness(87%) contrast(88%);
}
#voiceArticleWrap .postlink li a i::after, #voiceArticleWrap .postlink li span i::after {
  transform: translateX(-150%);
}
#voiceArticleWrap .postlink li a:hover i::before, #voiceArticleWrap .postlink li span:hover i::before {
  animation-name: transformRightLeft;
  animation-delay: 0s;
}
#voiceArticleWrap .postlink li a:hover i::after, #voiceArticleWrap .postlink li span:hover i::after {
  animation-name: transformLeftRight;
  animation-delay: 0.2s;
}
#voiceArticleWrap .postlink li a {
  color: #000000;
}
#voiceArticleWrap .postlink li span {
  color: #EFF0F0;
}
#voiceArticleWrap .postlink li.prev a, #voiceArticleWrap .postlink li.prev span {
  padding-left: clamp(36px, 6.2505vw, 60px);
}
#voiceArticleWrap .postlink li.prev a i, #voiceArticleWrap .postlink li.prev span i {
  transform: scaleX(-1);
  left: 0;
  right: auto;
}
#voiceArticleWrap .postlink li.next a, #voiceArticleWrap .postlink li.next span {
  padding-right: clamp(36px, 6.2505vw, 60px);
}
#voiceArticleWrap .postlink li.next a i, #voiceArticleWrap .postlink li.next span i {
  left: auto;
  right: 0;
}
#voiceArticleWrap .postlink li + li {
  margin-left: clamp(72px, 12.4995vw, 120px);
}

/*============================================================================
	Links
=============================================================================*/
#linkListWrap {
  padding: clamp(36px, 6.2505vw, 60px) 0 clamp(72px, 12.4995vw, 120px);
}
#linkListWrap section h2 {
  padding-left: clamp(24px, 4.167vw, 40px);
  color: #0BB3A4;
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 900;
  position: relative;
}
#linkListWrap section h2::before {
  content: "";
  margin: auto;
  width: 5px;
  height: 100%;
  background: #4880D3;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: 0;
}
#linkListWrap section ul {
  margin: clamp(48px, 8.334vw, 80px) auto 0;
  max-width: 1220px;
  width: 90%;
}
#linkListWrap section ul li {
  margin-bottom: clamp(36px, 6.2505vw, 60px);
  padding-bottom: clamp(12px, 2.0835vw, 20px);
  width: 48%;
  max-width: 500px;
  border-bottom: 1px solid #000000;
}
#linkListWrap section ul li a {
  padding-right: 40px;
  color: #000000;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  width: 100%;
  display: block;
  position: relative;
}
#linkListWrap section ul li a::after {
  content: "";
  margin: auto;
  width: 27px;
  height: auto;
  aspect-ratio: 1;
  background: url("../img/common/icon_newwin.svg") no-repeat center center/contain;
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
}
#linkListWrap section ul li span {
  color: #000000;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 1024px) {
  #linkListWrap section ul li a::after {
    width: 20px;
  }
}
@media (max-width: 480px) {
  #linkListWrap section ul li {
    width: 100%;
  }
}
#linkListWrap section + section {
  margin-top: clamp(72px, 12.4995vw, 120px);
}
#linkListWrap .linkSNS ul li a {
  padding-left: clamp(48px, 8.334vw, 80px);
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}
#linkListWrap .linkSNS ul li a span {
  margin: auto;
  width: 46px;
  height: 46px;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: auto;
  bottom: 0;
  filter: brightness(0) saturate(100%) invert(21%) sepia(98%) saturate(19%) hue-rotate(314deg) brightness(91%) contrast(89%);
}
#linkListWrap .linkSNS ul li a span.insta {
  background: url("../img/common/icon_insta.svg") no-repeat center center;
}
#linkListWrap .linkSNS ul li a span.fb {
  background: url("../img/common/icon_fb.svg") no-repeat center center;
}

/*============================================================================
	News
=============================================================================*/
/*============================================================================
	NEWS LIST
=============================================================================*/
#newsListArea {
  padding: 100px 0 120px;
  position: relative;
  z-index: 5;
}
@media (max-width: 480px) {
  #newsListArea {
    padding: 60px 0 80px;
  }
}
#newsListArea .dateList ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5%;
  row-gap: 30px;
}
@media (max-width: 480px) {
  #newsListArea .dateList ul {
    gap: 4%;
    row-gap: 20px;
  }
}
#newsListArea .dateList ul li {
  width: 11.25%;
}
@media (max-width: 480px) {
  #newsListArea .dateList ul li {
    width: 48%;
  }
}
#newsListArea .dateList ul li a {
  width: 100%;
  display: block;
  text-align: center;
  color: #000000;
  font-family: "Roboto", sans-serif;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  border-bottom: 3px solid #0BB3A4;
  padding-bottom: 5px;
}
#newsListArea .dateList ul li a:hover {
  color: #0BB3A4;
}
#newsListArea .dateList ul li.current a {
  color: #0BB3A4;
}
#newsListArea .newsList {
  margin-top: 100px;
}
@media (max-width: 480px) {
  #newsListArea .newsList {
    margin-top: 50px;
  }
}
#newsListArea .newsList ul {
  gap: 2.75%;
  row-gap: 70px;
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  #newsListArea .newsList ul {
    gap: 4%;
    row-gap: 20px;
  }
}
#newsListArea .newsList ul li {
  width: 22.92%;
}
@media (max-width: 480px) {
  #newsListArea .newsList ul li {
    width: 48%;
  }
}
#newsListArea .newsList ul li a {
  display: block;
  width: 100%;
}
#newsListArea .newsList ul li a .imgBox figure {
  width: 100%;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}
#newsListArea .newsList ul li a .imgBox figure::before {
  content: "";
  padding-top: 78.18%;
  display: block;
}
#newsListArea .newsList ul li a .imgBox figure img, #newsListArea .newsList ul li a .imgBox figure source {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#newsListArea .newsList ul li a .imgBox.noimage figure {
  border: 1px solid #a1a1a1;
}
#newsListArea .newsList ul li a .imgBox figcaption {
  position: absolute;
  top: 20px;
  left: 0;
  background: #0BB3A4;
  color: #fff;
  padding: 6px 10px 6px 20px;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media (max-width: 480px) {
  #newsListArea .newsList ul li a .imgBox figcaption {
    font-size: 1.4rem;
    padding: 3px 8px 3px 16px;
    top: 15px;
  }
}
#newsListArea .newsList ul li p.date {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}
@media (max-width: 480px) {
  #newsListArea .newsList ul li p.date {
    gap: 6px;
    margin-top: 12px;
  }
}
#newsListArea .newsList ul li p.date date {
  color: #000000;
  font-family: "Roboto", sans-serif;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 500;
  display: inline-block;
  line-height: 1.4;
}
@media (max-width: 480px) {
  #newsListArea .newsList ul li p.date date {
    font-size: 1.2rem;
    margin-top: 2px;
  }
}
#newsListArea .newsList ul li p.date span.ctg {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  background: #0BB3A4;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 30px;
}
@media (max-width: 480px) {
  #newsListArea .newsList ul li p.date span.ctg {
    font-size: 1.2rem;
    padding: 3px 8px;
  }
}
#newsListArea .newsList ul li p.ttl {
  color: #000000;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 700;
  line-height: 1.5555555556;
  letter-spacing: 0.05em;
  margin-top: 3px;
}
#newsListArea .moreBtn {
  margin: clamp(42px, 7.2915vw, 70px) auto 0;
}

.pager {
  margin: clamp(48px, 8.334vw, 80px) auto 0;
  height: auto;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.pager a, .pager span {
  margin: 0 5px;
  color: #000000;
  font-size: clamp(16px, 2.5002vw, 20px);
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  position: relative;
}
.pager a.current, .pager span.current {
  color: #0BB3A4;
  border-bottom: 3px solid #0BB3A4;
  line-height: 38px;
}
.pager a.dots, .pager span.dots {
  border: none;
}
.pager a.prev, .pager a.next, .pager span.prev, .pager span.next {
  text-indent: -9999px;
  border: none;
}
.pager a.prev::before, .pager a.next::before, .pager span.prev::before, .pager span.next::before {
  margin: auto;
  color: #0BB3A4;
  font-size: clamp(19.2px, 3.0006vw, 24px);
  text-indent: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
}
.pager a.prev::before, .pager span.prev::before {
  content: "<";
}
.pager a.next::before, .pager span.next::before {
  content: ">";
}
.pager a:hover::after, .pager span:hover::after {
  transform: scaleX(1);
}
@media (max-width: 480px) {
  .pager a, .pager span {
    width: 30px;
    height: 30px;
    line-height: 28px;
    font-size: 1.4rem;
  }
}

/*============================================================================
	NEWS DETAIL
=============================================================================*/
#newsDetailArea {
  padding: 100px 0 120px;
  position: relative;
  z-index: 5;
}
@media (max-width: 480px) {
  #newsDetailArea {
    padding: 60px 0 80px;
  }
}
#newsDetailArea .detailInner {
  width: 90%;
  margin: 0 auto;
}
#newsDetailArea .detailInner .descBox p.date {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 540px;
  width: 100%;
  margin: 0 auto 20px;
}
@media (max-width: 480px) {
  #newsDetailArea .detailInner .descBox p.date {
    gap: 6px;
    margin-bottom: 15px;
  }
}
#newsDetailArea .detailInner .descBox p.date date {
  color: #000000;
  font-family: "Roboto", sans-serif;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 500;
  display: inline-block;
  line-height: 1.4;
}
@media (max-width: 480px) {
  #newsDetailArea .detailInner .descBox p.date date {
    font-size: 1.2rem;
    margin-top: 2px;
  }
}
#newsDetailArea .detailInner .descBox p.date span.ctg {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  background: #0BB3A4;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 30px;
}
@media (max-width: 480px) {
  #newsDetailArea .detailInner .descBox p.date span.ctg {
    font-size: 1.2rem;
    padding: 3px 8px;
  }
}
#newsDetailArea .detailInner .descBox .imgBox {
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
}
#newsDetailArea .detailInner .descBox .imgBox figure {
  width: 100%;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}
#newsDetailArea .detailInner .descBox .imgBox figure::before {
  content: "";
  padding-top: 69.44%;
  display: block;
}
#newsDetailArea .detailInner .descBox .imgBox figure img, #newsDetailArea .detailInner .descBox .imgBox figure source {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#newsDetailArea .detailInner .descBox .imgBox.noimage figure {
  border: 1px solid #a1a1a1;
}
#newsDetailArea .detailInner .descBox .imgBox figcaption {
  position: absolute;
  top: 20px;
  left: 0;
  background: #0BB3A4;
  color: #fff;
  padding: 6px 10px 6px 20px;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media (max-width: 480px) {
  #newsDetailArea .detailInner .descBox .imgBox figcaption {
    font-size: 1.4rem;
    padding: 3px 8px 3px 16px;
    top: 15px;
  }
}
#newsDetailArea .detailInner .descBox p.ttl {
  color: #000000;
  font-size: clamp(19.2px, 3.0006vw, 24px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  max-width: 700px;
  width: 100%;
  margin: 35px auto 0;
}
#newsDetailArea .detailInner .descBox .entryBody {
  max-width: 700px;
  width: 100%;
  margin: 20px auto 0;
}
#newsDetailArea .detailInner .descBox .entryBody figure {
  margin: clamp(48px, 8.334vw, 80px) auto;
}
#newsDetailArea .detailInner .descBox .entryBody p {
  line-height: 2;
  font-weight: 500;
  letter-spacing: 0.05em;
}
#newsDetailArea .detailInner .descBox .entryBody p + p {
  margin-top: 2em;
}
#newsDetailArea .detailInner .descBox .entryBody h1 {
  margin: 2em auto 20px;
  font-size: clamp(17.6px, 2.7504vw, 22px);
}
#newsDetailArea .detailInner .descBox .entryBody h2 {
  margin: 2em auto 15px;
  font-size: clamp(16px, 2.5002vw, 20px);
}
#newsDetailArea .detailInner .descBox .entryBody h3 {
  margin: 2em auto 10px;
  font-size: clamp(14px, 3.4vw, 18px);
}

.postlink {
  margin: clamp(60px, 10.416vw, 100px) auto 0;
}
.postlink ul {
  display: flex;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
}
.postlink ul li a, .postlink ul li span {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
  line-height: 1;
  display: block;
  position: relative;
  padding: 0 10px;
}
.postlink ul li a i, .postlink ul li span i {
  width: 10px;
  height: 18px;
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  bottom: 0;
  z-index: 5;
}
.postlink ul li a i::before, .postlink ul li a i::after, .postlink ul li span i::before, .postlink ul li span i::after {
  content: "";
  margin: auto;
  width: 10px;
  height: 18px;
  background: url("../img/common/icon_arrow_blue.svg") no-repeat center center/contain;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.postlink ul li a i::after, .postlink ul li span i::after {
  transform: translateX(-150%);
}
.postlink ul li a {
  color: #000000;
}
.postlink ul li span {
  color: #EFF0F0;
}
.postlink ul li.prev a, .postlink ul li.prev span {
  padding-left: 22px;
}
.postlink ul li.prev a i, .postlink ul li.prev span i {
  left: 0;
  right: auto;
}
.postlink ul li.next a, .postlink ul li.next span {
  padding-right: 22px;
}
.postlink ul li.next a i, .postlink ul li.next span i {
  left: auto;
  right: 0;
}
.postlink ul li.next a i::before, .postlink ul li.next a i::after, .postlink ul li.next span i::before, .postlink ul li.next span i::after {
  transform: rotate(180deg);
}
.postlink ul li:hover a {
  color: #0BB3A4;
}
.postlink ul li + li {
  margin-left: clamp(72px, 12.4995vw, 120px);
}

/*============================================================================
	can-innovation
=============================================================================*/
#canHeaderWrap {
  width: 100%;
  overflow-x: clip;
  position: relative;
}
#canHeaderWrap .imgBox {
  width: 100%;
}
#canHeaderWrap .imgBox picture {
  margin: 0;
  width: 100%;
  height: auto;
  display: block;
}
#canHeaderWrap .imgBox picture::before {
  content: "";
  padding-top: 62.64%;
  display: block;
}
@media (max-width: 1200px) {
  #canHeaderWrap .imgBox picture::before {
    padding-top: 75%;
  }
}
@media (max-width: 480px) {
  #canHeaderWrap .imgBox picture::before {
    height: 100lvh;
  }
}
#canHeaderWrap .imgBox picture img, #canHeaderWrap .imgBox picture source {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#canHeaderWrap #cheaderInnerBox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 1200px) {
  #canHeaderWrap #cheaderInnerBox {
    padding-left: 5%;
  }
}
@media (max-width: 480px) {
  #canHeaderWrap #cheaderInnerBox {
    padding-right: 5%;
  }
}
#canHeaderWrap #cheaderInnerBox h1 {
  padding-top: clamp(110px, 22.9164vw, 275px);
  padding-bottom: clamp(27px, 4.6875vw, 45px);
  position: relative;
}
#canHeaderWrap #cheaderInnerBox h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 1px;
  background: #000000;
  z-index: 1;
}
@media (max-width: 480px) {
  #canHeaderWrap #cheaderInnerBox h1 {
    padding-top: 200px;
  }
}
#canHeaderWrap #cheaderInnerBox h1 span.en {
  font-size: clamp(29.25px, 5.3125vw, 45px);
  font-family: "Roboto", sans-serif;
  line-height: 1;
  display: block;
  letter-spacing: 0.05em;
  color: #0BB3A4;
  font-weight: 700;
  font-style: italic;
}
#canHeaderWrap #cheaderInnerBox h1 span.jp {
  margin-top: 4px;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 700;
  display: block;
  color: #000000;
}
#canHeaderWrap #cheaderInnerBox .read {
  max-width: 700px;
  width: 90%;
  margin-top: 25px;
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.9444444444;
}
@media (max-width: 820px) {
  #canHeaderWrap #cheaderInnerBox .read {
    font-size: 1.4rem;
  }
}
@media (max-width: 480px) {
  #canHeaderWrap #cheaderInnerBox .read {
    line-height: 1.7;
  }
}
#canHeaderWrap .partsBg {
  position: absolute;
  top: -13.8888888889vw;
  right: -3.4027777778vw;
  z-index: 3;
  width: 59.51%;
}
#canHeaderWrap .partsBg figure {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#canHeaderWrap .partsBg figure::before {
  content: "";
  padding-top: 137.92%;
  width: 100%;
  display: block;
}
#canHeaderWrap .partsBg figure source, #canHeaderWrap .partsBg figure img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

#canMessageArea {
  overflow-x: clip;
  position: relative;
}
#canMessageArea::before {
  content: "";
  background: #0BB3A4;
  position: absolute;
  top: -12.5vw;
  left: 12.74%;
  width: 1px;
  height: 14.5833333333vw;
  transform-origin: top center;
  animation: scrollbar 2.5s ease-in-out infinite;
}
@media (max-width: 480px) {
  #canMessageArea::before {
    height: 100px;
    left: 10%;
    top: -60px;
  }
}
#canMessageArea .canMessageInner .descBox {
  display: flex;
}
@media (max-width: 480px) {
  #canMessageArea .canMessageInner .descBox {
    flex-direction: column;
    gap: 40px;
  }
}
#canMessageArea .canMessageInner .descBox .txtBox {
  width: 51.39%;
  margin-left: calc((100% - 1200px) / 2);
  margin-top: 80px;
}
#canMessageArea .canMessageInner .descBox .txtBox p.ttl {
  white-space: nowrap;
  font-size: clamp(28px, 4.3758vw, 35px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.7142857143;
  position: relative;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: underline;
  -webkit-text-underline-offset: 3px;
  -webkit-text-decoration-thickness: 1px;
}
#canMessageArea .canMessageInner .descBox .txtBox p.txt {
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
  margin-top: 20px;
}
@media (max-width: 480px) {
  #canMessageArea .canMessageInner .descBox .txtBox {
    width: 90%;
    margin-left: 5%;
  }
  #canMessageArea .canMessageInner .descBox .txtBox p.ttl {
    white-space: normal;
    font-size: 2rem;
  }
  #canMessageArea .canMessageInner .descBox .txtBox p.txt {
    line-height: 1.7;
  }
}
#canMessageArea .canMessageInner .descBox .imgBox {
  width: 36.11%;
  position: relative;
  margin-left: auto;
}
@media (max-width: 480px) {
  #canMessageArea .canMessageInner .descBox .imgBox {
    width: 90%;
    margin-left: 5%;
  }
}
#canMessageArea .canMessageInner .descBox .imgBox picture {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  border-radius: 0 0 0 10px;
}
@media (max-width: 480px) {
  #canMessageArea .canMessageInner .descBox .imgBox picture {
    border-radius: 10px;
  }
}
#canMessageArea .canMessageInner .descBox .imgBox picture::before {
  content: "";
  padding-top: 82.69%;
  width: 100%;
  display: block;
}
#canMessageArea .canMessageInner .descBox .imgBox picture source, #canMessageArea .canMessageInner .descBox .imgBox picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#canMessageArea .canMessageInner .descBox .imgBox::before {
  content: "";
  background: url(../img/caninnovation/fig_parts02.svg) no-repeat center center/contain;
  position: absolute;
  bottom: -80px;
  right: 20%;
  width: 142px;
  aspect-ratio: 1;
  z-index: 1;
}
@media (max-width: 480px) {
  #canMessageArea .canMessageInner .descBox .imgBox::before {
    bottom: auto;
    top: -50px;
    width: 100px;
    right: 10%;
  }
}

@keyframes scrollbar {
  0% {
    transform: scaleY(0);
  }
  30% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}
#canFeatureArea {
  padding-top: clamp(72px, 12.4995vw, 120px);
  padding-bottom: 60px;
  position: relative;
  overflow-x: clip;
}
#canFeatureArea::before {
  content: "";
  background: url(../img/caninnovation/fig_parts03.svg) no-repeat center center/contain;
  position: absolute;
  top: 0.6944444444vw;
  left: 4.8611111111vw;
  width: 12.85%;
  height: 186px;
  z-index: 1;
  transform: rotate(70deg);
}
@media (max-width: 480px) {
  #canFeatureArea::before {
    top: -20px;
    left: 5%;
    width: 80px;
    height: 120px;
  }
}
#canFeatureArea::after {
  content: "";
  background: url(../img/caninnovation/fig_parts04.svg) no-repeat center center/contain;
  position: absolute;
  bottom: vw_(80);
  left: 8.3333333333vw;
  width: 11.74%;
  height: 208px;
  z-index: 1;
}
@media (max-width: 480px) {
  #canFeatureArea::after {
    bottom: -4%;
    left: 5%;
    width: 80px;
    height: 120px;
  }
}
@media (max-width: 480px) {
  #canFeatureArea .inner {
    width: 94%;
  }
}
#canFeatureArea .inner h2 {
  text-align: center;
  margin-bottom: 20px;
}
#canFeatureArea .inner h2 span {
  font-size: clamp(29.25px, 5.3125vw, 45px);
  line-height: 1.6666666667;
  color: #6F5429;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: inline-block;
  position: relative;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: underline;
  -webkit-text-underline-offset: 3px;
  -webkit-text-decoration-thickness: 1px;
}
@media (max-width: 480px) {
  #canFeatureArea .inner h2 span {
    font-size: 2.2rem;
    line-height: 1.7;
  }
}
#canFeatureArea .inner p.read {
  text-align: center;
  font-weight: 500;
  line-height: 2.0625;
  letter-spacing: 0.05em;
}
@media (max-width: 480px) {
  #canFeatureArea .inner p.read {
    line-height: 1.7;
  }
}
#canFeatureArea .inner .featureListWrap {
  margin-top: clamp(33px, 5.7285vw, 55px);
}
#canFeatureArea .inner .featureListWrap ul.featureList > li {
  display: flex;
  gap: 4.21%;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li .imgBox {
  width: 45.79%;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li .imgBox picture {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  border-radius: 10px;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li .imgBox picture::before {
  content: "";
  padding-top: 59.18%;
  width: 100%;
  display: block;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li .imgBox picture source, #canFeatureArea .inner .featureListWrap ul.featureList > li .imgBox picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li .txtBox {
  width: 50%;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li .txtBox p.ttl {
  font-size: clamp(24px, 3.7494vw, 30px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.8333333333;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li .txtBox ul.serviceList {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li .txtBox ul.serviceList li {
  text-align: center;
  border-radius: 30px;
  font-size: 1.5rem;
  line-height: 35px;
  height: 35px;
  background: #0BB3A4;
  padding: 0 15px;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.05em;
  min-width: 130px;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li .txtBox p.txt {
  margin-top: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li + li {
  margin-top: clamp(30px, 5.208vw, 50px);
}
#canFeatureArea .inner .featureListWrap ul.featureList > li:nth-child(even) .imgBox {
  order: 2;
}
#canFeatureArea .inner .featureListWrap ul.featureList > li:nth-child(even) .txtBox {
  order: 1;
}
@media (max-width: 480px) {
  #canFeatureArea .inner .featureListWrap ul.featureList > li {
    flex-direction: column;
    gap: 22px;
  }
  #canFeatureArea .inner .featureListWrap ul.featureList > li .imgBox {
    width: 100%;
  }
  #canFeatureArea .inner .featureListWrap ul.featureList > li .txtBox {
    width: 100%;
  }
  #canFeatureArea .inner .featureListWrap ul.featureList > li .txtBox p.ttl {
    font-size: 1.8rem;
    line-height: 1.7;
  }
  #canFeatureArea .inner .featureListWrap ul.featureList > li .txtBox ul.serviceList {
    gap: 10px;
    margin-top: 10px;
  }
  #canFeatureArea .inner .featureListWrap ul.featureList > li .txtBox ul.serviceList li {
    height: 30px;
    line-height: 30px;
    font-size: 1.4rem;
    min-width: 100px;
  }
  #canFeatureArea .inner .featureListWrap ul.featureList > li .txtBox p.txt {
    margin-top: 10px;
    font-size: 1.4rem;
    line-height: 1.7;
  }
  #canFeatureArea .inner .featureListWrap ul.featureList > li + li {
    margin-top: 40px;
  }
  #canFeatureArea .inner .featureListWrap ul.featureList > li:nth-child(even) {
    flex-direction: column-reverse;
  }
}

#cannInnovationArea {
  background: rgba(11, 179, 164, 0.05);
  padding: 60px 0 0;
  position: relative;
  overflow-x: clip;
}
#cannInnovationArea::before {
  content: "";
  background: url(../img/caninnovation/fig_parts07.svg) no-repeat center center/contain;
  position: absolute;
  bottom: 15%;
  right: 10%;
  width: 12.85%;
  height: 227px;
  transform: rotate(-113deg);
  z-index: 1;
}
@media (max-width: 480px) {
  #cannInnovationArea::before {
    bottom: -1%;
    right: 5%;
    width: 80px;
    height: 120px;
  }
}
#cannInnovationArea .container h2 {
  text-align: center;
  margin-bottom: 20px;
}
#cannInnovationArea .container h2 span {
  font-size: clamp(24px, 3.7494vw, 30px);
  line-height: 1.8333333333;
  letter-spacing: 0.05em;
  font-weight: 700;
  display: inline-block;
  position: relative;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  -webkit-text-decoration: underline;
  -webkit-text-underline-offset: 3px;
  -webkit-text-decoration-thickness: 1px;
}
@media (max-width: 480px) {
  #cannInnovationArea .container h2 span {
    font-size: 2rem;
    line-height: 1.7;
  }
}
#cannInnovationArea .container p.read {
  text-align: center;
  font-weight: 500;
  line-height: 2.0625;
  letter-spacing: 0.05em;
}
@media (max-width: 480px) {
  #cannInnovationArea .container p.read {
    line-height: 1.7;
  }
}
#cannInnovationArea .container .innovationListWrap {
  margin-top: clamp(33px, 5.7285vw, 55px);
  padding-bottom: 55px;
  position: relative;
}
#cannInnovationArea .container .innovationListWrap::before {
  content: "";
  background: url(../img/caninnovation/fig_parts05.svg) no-repeat center center/contain;
  position: absolute;
  top: -80px;
  right: -4%;
  width: 11.83%;
  aspect-ratio: 1;
  z-index: 1;
}
@media (max-width: 480px) {
  #cannInnovationArea .container .innovationListWrap::before {
    top: -30px;
    width: 60px;
    height: 60px;
  }
}
#cannInnovationArea .container .innovationListWrap::after {
  content: "";
  background: url(../img/caninnovation/fig_parts06.svg) no-repeat center center/contain;
  position: absolute;
  bottom: 25%;
  left: 5%;
  width: 11.83%;
  aspect-ratio: 1;
  z-index: 1;
}
@media (max-width: 480px) {
  #cannInnovationArea .container .innovationListWrap::after {
    bottom: -3%;
    width: 60px;
    height: 60px;
  }
}
#cannInnovationArea .container .innovationListWrap ul.innovationList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5%;
  row-gap: 30px;
  position: relative;
  z-index: 2;
}
#cannInnovationArea .container .innovationListWrap ul.innovationList > li {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  width: 48.75%;
  border: 1px solid #0BB3A4;
}
#cannInnovationArea .container .innovationListWrap ul.innovationList > li .imgBox {
  width: 42.22%;
}
#cannInnovationArea .container .innovationListWrap ul.innovationList > li .imgBox picture {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  position: relative;
}
#cannInnovationArea .container .innovationListWrap ul.innovationList > li .imgBox picture::before {
  content: "";
  padding-top: 100%;
  width: 100%;
  display: block;
}
#cannInnovationArea .container .innovationListWrap ul.innovationList > li .imgBox picture source, #cannInnovationArea .container .innovationListWrap ul.innovationList > li .imgBox picture img {
  margin: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
#cannInnovationArea .container .innovationListWrap ul.innovationList > li .txtBox {
  background: #fff;
  padding: 15px 20px;
  width: 57.78%;
}
#cannInnovationArea .container .innovationListWrap ul.innovationList > li .txtBox p.ttl {
  font-size: clamp(18.4px, 2.8746vw, 23px);
  font-weight: 700;
  line-height: 1.7272727273;
  letter-spacing: 0.05em;
}
#cannInnovationArea .container .innovationListWrap ul.innovationList > li .txtBox > ul {
  margin-top: 12px;
}
#cannInnovationArea .container .innovationListWrap ul.innovationList > li .txtBox > ul li {
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 2.0625;
  padding-left: 1em;
  position: relative;
}
#cannInnovationArea .container .innovationListWrap ul.innovationList > li .txtBox > ul li::before {
  content: "・";
  width: 8px;
  height: 8px;
  position: absolute;
  left: 0;
  top: 0;
}
@media (max-width: 480px) {
  #cannInnovationArea .container .innovationListWrap ul.innovationList > li {
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    background: #fff;
    gap: 3%;
    padding-bottom: 15px;
  }
  #cannInnovationArea .container .innovationListWrap ul.innovationList > li .imgBox {
    width: 45%;
  }
  #cannInnovationArea .container .innovationListWrap ul.innovationList > li .txtBox {
    width: 100%;
    display: contents;
  }
  #cannInnovationArea .container .innovationListWrap ul.innovationList > li .txtBox p.ttl {
    width: 48%;
    font-size: 1.6rem;
    line-height: 1.7;
  }
  #cannInnovationArea .container .innovationListWrap ul.innovationList > li .txtBox ul {
    padding: 0 10px;
  }
  #cannInnovationArea .container .innovationListWrap ul.innovationList > li .txtBox ul li {
    line-height: 1.7;
  }
  #cannInnovationArea .container .innovationListWrap ul.innovationList > li .txtBox ul li + li {
    margin-top: 0.5em;
  }
}
#cannInnovationArea .messageBox {
  background: url(../img/caninnovation/messageBoxBg.jpg) no-repeat center center/cover;
  padding: 70px 0;
}
#cannInnovationArea .messageBox p.message {
  text-align: center;
  font-size: 2.5rem;
  letter-spacing: 0.05em;
  font-weight: 700;
  line-height: 1.8;
  color: #fff;
}
@media (max-width: 480px) {
  #cannInnovationArea .messageBox p.message {
    font-size: 1.8rem;
    line-height: 1.7;
  }
}

/*============================================================================
	Contact
=============================================================================*/
/*============================================================================
	Privacy
=============================================================================*/
#privacyPolicyArea, #lawNoticeArea {
  margin: clamp(48px, 8.334vw, 80px) auto clamp(72px, 12.4995vw, 120px);
}
#privacyPolicyArea .toptext, #lawNoticeArea .toptext {
  margin: 0 auto clamp(36px, 6.2505vw, 60px);
  font-size: clamp(14px, 3.4vw, 18px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.9;
}
#privacyPolicyArea .toptext.ta-cnt, #lawNoticeArea .toptext.ta-cnt {
  text-align: center;
}
#privacyPolicyArea section h3, #lawNoticeArea section h3 {
  margin: 0 auto 20px;
  font-size: clamp(22.4px, 3.4992vw, 28px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: #0BB3A4;
}
@media (max-width: 480px) {
  #privacyPolicyArea section h3, #lawNoticeArea section h3 {
    font-size: 2rem;
  }
}
#privacyPolicyArea section h4, #lawNoticeArea section h4 {
  margin: 40px auto 15px;
  font-size: clamp(17.6px, 2.7504vw, 22px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: #000000;
}
#privacyPolicyArea section p, #lawNoticeArea section p {
  letter-spacing: 0.04em;
  line-height: 1.85;
}
@media (max-width: 480px) {
  #privacyPolicyArea section p, #lawNoticeArea section p {
    line-height: 1.5;
  }
}
#privacyPolicyArea section .dateList, #lawNoticeArea section .dateList {
  margin-top: 20px;
  line-height: 1.8;
  font-size: clamp(12px, 2.222vw, 16px);
  text-align: right;
}
@media (max-width: 480px) {
  #privacyPolicyArea section .dateList, #lawNoticeArea section .dateList {
    line-height: 1.5;
  }
}
#privacyPolicyArea section .signature, #lawNoticeArea section .signature {
  margin-top: 30px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: right;
}
#privacyPolicyArea section ul, #lawNoticeArea section ul {
  margin: clamp(12px, 2.0835vw, 20px);
}
#privacyPolicyArea section ul li, #lawNoticeArea section ul li {
  padding-left: 1em;
  position: relative;
  line-height: 1.8;
}
@media (max-width: 480px) {
  #privacyPolicyArea section ul li, #lawNoticeArea section ul li {
    line-height: 1.5;
  }
}
#privacyPolicyArea section ul li::before, #lawNoticeArea section ul li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #0BB3A4;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
}
@media (max-width: 480px) {
  #privacyPolicyArea section ul li::before, #lawNoticeArea section ul li::before {
    width: 6px;
    height: 6px;
  }
}
#privacyPolicyArea section ul li + li, #lawNoticeArea section ul li + li {
  margin-top: 8px;
}
#privacyPolicyArea section ol, #lawNoticeArea section ol {
  margin: clamp(12px, 2.0835vw, 20px);
  counter-reset: olnum 0;
}
#privacyPolicyArea section ol li, #lawNoticeArea section ol li {
  padding-left: 2em;
  position: relative;
  line-height: 1.9;
}
@media (max-width: 480px) {
  #privacyPolicyArea section ol li, #lawNoticeArea section ol li {
    line-height: 1.5;
  }
}
#privacyPolicyArea section ol li::before, #lawNoticeArea section ol li::before {
  counter-increment: olnum 1;
  content: counter(olnum) "）";
  position: absolute;
  left: 0;
}
#privacyPolicyArea section ol li + li, #lawNoticeArea section ol li + li {
  margin-top: 8px;
}
#privacyPolicyArea section .privacyTableWrap, #lawNoticeArea section .privacyTableWrap {
  overflow-x: auto;
  margin: 30px auto;
}
#privacyPolicyArea section .privacyTable, #lawNoticeArea section .privacyTable {
  width: 100%;
  border-collapse: collapse;
}
#privacyPolicyArea section .privacyTable th,
#privacyPolicyArea section .privacyTable td, #lawNoticeArea section .privacyTable th,
#lawNoticeArea section .privacyTable td {
  border: 1px solid #D5D8DA;
  padding: 18px;
  vertical-align: top;
  font-size: clamp(12px, 2.222vw, 16px);
  line-height: 1.75;
}
@media (max-width: 480px) {
  #privacyPolicyArea section .privacyTable th,
  #privacyPolicyArea section .privacyTable td, #lawNoticeArea section .privacyTable th,
  #lawNoticeArea section .privacyTable td {
    font-size: 1.4rem;
    line-height: 1.5;
  }
}
#privacyPolicyArea section .privacyTable th, #lawNoticeArea section .privacyTable th {
  width: 26%;
  background: #F4F6F8;
  font-weight: 700;
  letter-spacing: 0.06em;
}
#privacyPolicyArea section .privacyTable td ol, #lawNoticeArea section .privacyTable td ol {
  margin: 0;
}
#privacyPolicyArea section .privacyTable td ol li, #lawNoticeArea section .privacyTable td ol li {
  padding-left: 1.6em;
}
#privacyPolicyArea section .privacyTable td ol li::before, #lawNoticeArea section .privacyTable td ol li::before {
  left: 0;
}
@media (max-width: 768px) {
  #privacyPolicyArea section .privacyTable thead, #lawNoticeArea section .privacyTable thead {
    display: none;
  }
  #privacyPolicyArea section .privacyTable tbody,
  #privacyPolicyArea section .privacyTable tr,
  #privacyPolicyArea section .privacyTable th,
  #privacyPolicyArea section .privacyTable td, #lawNoticeArea section .privacyTable tbody,
  #lawNoticeArea section .privacyTable tr,
  #lawNoticeArea section .privacyTable th,
  #lawNoticeArea section .privacyTable td {
    display: block;
    width: 100%;
  }
  #privacyPolicyArea section .privacyTable tr, #lawNoticeArea section .privacyTable tr {
    border: 1px solid #D5D8DA;
    margin-bottom: 16px;
    overflow: hidden;
  }
  #privacyPolicyArea section .privacyTable th, #lawNoticeArea section .privacyTable th {
    background: #F4F6F8;
    padding: 16px;
    width: 100% !important;
  }
  #privacyPolicyArea section .privacyTable td, #lawNoticeArea section .privacyTable td {
    padding: 16px;
    border-top: 1px solid #D5D8DA;
  }
  #privacyPolicyArea section .privacyTable td::before, #lawNoticeArea section .privacyTable td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    color: #0BB3A4;
  }
  #privacyPolicyArea section .privacyTable td ol li, #lawNoticeArea section .privacyTable td ol li {
    padding-left: 1.4em;
    line-height: 1.5;
  }
  #privacyPolicyArea section .privacyTable td ol li + li, #lawNoticeArea section .privacyTable td ol li + li {
    margin-top: 4px;
  }
}
#privacyPolicyArea section .contactInfo, #lawNoticeArea section .contactInfo {
  margin: 20px auto;
  padding: 24px;
  background: #F7F8F9;
  border-radius: 12px;
}
#privacyPolicyArea section .contactInfo p, #lawNoticeArea section .contactInfo p {
  line-height: 1.8;
  font-weight: 500;
}
#privacyPolicyArea section .contactInfo p a, #lawNoticeArea section .contactInfo p a {
  text-decoration: underline;
  color: #0BB3A4;
}
@media (max-width: 480px) {
  #privacyPolicyArea section .privacyTable th,
  #privacyPolicyArea section .privacyTable td, #lawNoticeArea section .privacyTable th,
  #lawNoticeArea section .privacyTable td {
    padding: 14px;
  }
  #privacyPolicyArea section .privacyTable th, #lawNoticeArea section .privacyTable th {
    width: auto;
  }
}
#privacyPolicyArea section.contactBlock, #lawNoticeArea section.contactBlock {
  margin-left: auto;
  margin-right: auto;
  padding: clamp(36px, 6.2505vw, 60px);
  max-width: 1080px;
  width: 90%;
  background: #EFF0F0;
}
#privacyPolicyArea section.contactBlock h3, #lawNoticeArea section.contactBlock h3 {
  margin: 0 auto clamp(36px, 6.2505vw, 60px);
  color: #4880D3;
  font-size: clamp(25.6px, 3.9996vw, 32px);
  font-weight: 900;
  text-align: center;
}
#privacyPolicyArea section.contactBlock .fl, #lawNoticeArea section.contactBlock .fl {
  margin: auto;
  max-width: 980px;
}
#privacyPolicyArea section.contactBlock .contactL, #lawNoticeArea section.contactBlock .contactL {
  width: 49%;
}
#privacyPolicyArea section.contactBlock .contactL dl, #lawNoticeArea section.contactBlock .contactL dl {
  padding: clamp(12px, 2.0835vw, 20px) 0;
  font-size: clamp(16px, 2.5002vw, 20px);
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  border-bottom: 1px solid #AAAAAA;
}
#privacyPolicyArea section.contactBlock .contactL dl dt, #lawNoticeArea section.contactBlock .contactL dl dt {
  font-weight: 700;
}
#privacyPolicyArea section.contactBlock .contactL dl dt::after, #lawNoticeArea section.contactBlock .contactL dl dt::after {
  content: "：";
  margin: auto 5px;
  display: inline-block;
}
#privacyPolicyArea section.contactBlock .contactL dl dd, #lawNoticeArea section.contactBlock .contactL dl dd {
  font-weight: 500;
}
#privacyPolicyArea section.contactBlock .contactL dl:first-of-type, #lawNoticeArea section.contactBlock .contactL dl:first-of-type {
  padding-top: 0;
}
#privacyPolicyArea section.contactBlock .contactR, #lawNoticeArea section.contactBlock .contactR {
  margin: auto 0 auto auto;
  width: 42.8%;
}
@media (max-width: 480px) {
  #privacyPolicyArea section.contactBlock .contactL, #lawNoticeArea section.contactBlock .contactL {
    width: 100%;
  }
  #privacyPolicyArea section.contactBlock .contactR, #lawNoticeArea section.contactBlock .contactR {
    margin: 40px auto 0;
    width: 100%;
  }
}
#privacyPolicyArea section .japhicMark, #lawNoticeArea section .japhicMark {
  margin: 30px 0;
  max-width: 140px;
}
@media (max-width: 480px) {
  #privacyPolicyArea section .japhicMark, #lawNoticeArea section .japhicMark {
    max-width: 100px;
  }
}
#privacyPolicyArea section + section, #lawNoticeArea section + section {
  margin-top: clamp(48px, 8.334vw, 80px);
}

/* law: 特商法ページ用のブロック調整 */
#lawNoticeArea .inner .contentBox {
  margin-bottom: 40px;
}
#lawNoticeArea .inner h3 {
  margin: 0 0 20px;
  color: #0BB3A4;
  padding-left: 0.75em;
  position: relative;
}
#lawNoticeArea .inner h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: #0BB3A4;
}
#lawNoticeArea .inner h4 {
  margin: 20px 0 10px;
  font-size: clamp(16px, 2.5002vw, 20px);
  letter-spacing: 0.1em;
  font-weight: 700;
}
#lawNoticeArea .inner h4:not(:first-of-type) {
  border-top: 1px solid #E3E7EB;
  padding-top: 18px;
}
#lawNoticeArea .inner p, #lawNoticeArea .inner ul {
  margin-top: 6px;
}
#lawNoticeArea .inner p a, #lawNoticeArea .inner ul a {
  word-break: break-all;
  color: #0BB3A4;
  text-decoration: underline;
}
#lawNoticeArea .inner ul {
  margin: 10px 0 0 0;
}
#lawNoticeArea .inner .dateList,
#lawNoticeArea .inner .signature {
  margin-top: 24px;
}

/*============================================================================
	404
=============================================================================*/
.notfoundWrap p + p {
  margin-top: 1.5em;
}