@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;
  }
}

@font-face {
  font-family: "URW DIN Semi Condensed";
  src: url("../font/Demi/URWDINSemiCond-Demi.woff") format("woff"), url("../font/Demi/URWDINSemiCond-Demi.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "URW DIN Semi Condensed";
  src: url("../font/Medium/URWDINSemiCond-Medium.woff") format("woff"), url("../font/Medium/URWDINSemiCond-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/*============================================================================
    keyWrap
=============================================================================*/
#keyWrap {
  width: 100%;
  overflow-x: clip;
  position: relative;
}
#keyWrap .keySwiper .swiper ul li figure {
  margin: auto;
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}
#keyWrap .keySwiper .swiper ul li figure::before {
  content: "";
  padding-top: 43.75%;
  display: block;
}
@media (max-width: 1024px) {
  #keyWrap .keySwiper .swiper ul li figure::before {
    padding-top: 50lvh;
  }
}
@media (max-width: 480px) {
  #keyWrap .keySwiper .swiper ul li figure::before {
    padding-top: 70lvh;
  }
}
#keyWrap .keySwiper .swiper ul li figure img, #keyWrap .keySwiper .swiper ul li 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;
}
#keyWrap .keySwiper .swiper-pagination {
  position: absolute;
  bottom: 2.7777777778vw;
  right: 2.0833333333vw;
  left: auto;
  text-align: right;
  width: auto;
  display: flex;
  gap: 12px;
}
@media (max-width: 480px) {
  #keyWrap .keySwiper .swiper-pagination {
    gap: 0px;
  }
}
#keyWrap .keySwiper .swiper-pagination span {
  display: inline-block;
  background: #fff;
  position: relative;
  width: 4.7222222222vw;
  height: 10px;
  border-radius: 97px;
  max-width: 68px;
  opacity: 1;
}
@media (max-width: 480px) {
  #keyWrap .keySwiper .swiper-pagination span {
    width: 40px;
    height: 8px;
  }
}
#keyWrap .keySwiper .swiper-pagination span.swiper-pagination-bullet-active {
  background: #2680EB;
}
#keyWrap .keyCatchBg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  mix-blend-mode: multiply;
}
#keyWrap .keyCatchBg::before {
  content: "";
  position: absolute;
  background: rgba(13, 10, 10, 0.3);
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#keyWrap .keyCatchText {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
}
#keyWrap .keyCatchText .keyCatchInner {
  position: absolute;
  top: 50%;
  left: 7.5vw;
  translate: 0 -50%;
}
#keyWrap .keyCatchText .keyCatchInner p.mainText span {
  color: #fff;
  font-size: clamp(26px, 5vw, 55px);
  font-weight: 700;
  letter-spacing: 0.05em;
  display: block;
  position: relative;
  width: fit-content;
}
#keyWrap .keyCatchText .keyCatchInner p.mainText span.border01::before, #keyWrap .keyCatchText .keyCatchInner p.mainText span.border02::before, #keyWrap .keyCatchText .keyCatchInner p.mainText span.border03::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  border-bottom: solid 2px #fff;
  width: 0;
}
#keyWrap .keyCatchText .keyCatchInner p.mainText span.border01.active::before, #keyWrap .keyCatchText .keyCatchInner p.mainText span.border02.active::before, #keyWrap .keyCatchText .keyCatchInner p.mainText span.border03.active::before {
  animation: border_anim 1s linear forwards;
}
#keyWrap .keyCatchLogo {
  position: absolute;
  top: 5.5555555556vw;
  right: 5.5555555556vw;
  z-index: 5;
}
#keyWrap .keyCatchLogo figure {
  width: 13.2638888889vw;
  aspect-ratio: 1;
}
#keyWrap .keyCatchLogo figure img {
  filter: brightness(0) invert(1);
}
#keyWrap .scrollTxt {
  position: absolute;
  bottom: -26px;
  left: 7.5vw;
  z-index: 5;
}
#keyWrap .scrollTxt figure {
  width: 14px;
}

@keyframes border_anim {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
#topReadArea {
  margin: clamp(80px, 16.6668vw, 200px) 0 0;
}
#topReadArea h2.mainRead {
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.4705882353;
  letter-spacing: 0.06em;
  text-align: center;
  white-space: nowrap;
  background: none;
  border-top: none;
}
#topReadArea h2.mainRead em {
  font-size: clamp(24px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.4705882353;
  letter-spacing: 0.06em;
  color: #2680EB;
}
@media (max-width: 767px) {
  #topReadArea h2.mainRead {
    white-space: normal;
  }
}
#topReadArea .txtBox {
  margin-top: clamp(54px, 9.375vw, 90px);
  text-align: center;
}
@media (max-width: 480px) {
  #topReadArea .txtBox {
    margin-top: 45px;
  }
}
#topReadArea .txtBox p {
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
}
#topReadArea .txtBox p + p {
  margin-top: 2em;
}
@media (max-width: 480px) {
  #topReadArea .txtBox p {
    line-height: 1.7;
  }
}
#topReadArea .btnBox {
  margin: clamp(60px, 10.416vw, 100px) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}
@media (max-width: 1024px) {
  #topReadArea .btnBox {
    gap: 4%;
  }
}
@media (max-width: 480px) {
  #topReadArea .btnBox {
    margin-top: 60px;
    flex-direction: column;
    gap: 20px;
  }
}

#topServiceArea {
  margin: clamp(96px, 20.0004vw, 240px) 0 0;
}
#topServiceArea h2.mainTtl {
  text-align: center;
}
#topServiceArea ul {
  margin-top: clamp(36px, 6.2505vw, 60px);
  container-type: inline-size;
  --_column: 1;
  --_gap: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--_gap);
}
@media (max-width: 1024px) {
  #topServiceArea ul {
    --_gap: 4%;
    row-gap: 20px;
  }
}
#topServiceArea ul > * {
  flex-basis: calc((100% - var(--_gap) * (var(--_column) - 1)) / var(--_column));
  max-width: calc((100% - var(--_gap) * (var(--_column) - 1)) / var(--_column));
}
@media (max-width: 480px) {
  #topServiceArea ul > * {
    flex-basis: 48%;
    max-width: 100%;
  }
}
@container (640px <= inline-size) {
  #topServiceArea ul > :nth-child(-n+3) {
    --_column: 3;
  }
  #topServiceArea ul > :nth-child(n+4) {
    --_column: 4;
  }
}
#topServiceArea ul li {
  border: 3px solid #000000;
  border-radius: 20px;
  overflow: hidden;
}
#topServiceArea ul li a {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}
#topServiceArea ul li a figure {
  aspect-ratio: 1/1;
}
#topServiceArea ul li a figure :where(img, video, iframe) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#topServiceArea ul li a .ttlBox {
  margin-top: auto;
  background: #000000;
  display: block grid;
  place-items: center;
}
#topServiceArea ul li a .ttlBox p {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}
#topServiceArea ul li a .ttlBox p span.kerning {
  letter-spacing: 0em;
}
#topServiceArea ul li:hover {
  border-color: #2680EB;
}
#topServiceArea ul li:hover a .ttlBox {
  background: #2680EB;
}
#topServiceArea ul li:nth-of-type(1) a .ttlBox, #topServiceArea ul li:nth-of-type(2) a .ttlBox, #topServiceArea ul li:nth-of-type(3) a .ttlBox {
  min-height: 144px;
}
#topServiceArea ul li:nth-of-type(1) a .ttlBox p, #topServiceArea ul li:nth-of-type(2) a .ttlBox p, #topServiceArea ul li:nth-of-type(3) a .ttlBox p {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.375;
}
@media (max-width: 480px) {
  #topServiceArea ul li:nth-of-type(1) a .ttlBox, #topServiceArea ul li:nth-of-type(2) a .ttlBox, #topServiceArea ul li:nth-of-type(3) a .ttlBox {
    min-height: 95px;
  }
  #topServiceArea ul li:nth-of-type(1) a .ttlBox p, #topServiceArea ul li:nth-of-type(2) a .ttlBox p, #topServiceArea ul li:nth-of-type(3) a .ttlBox p {
    font-size: 1.6rem;
  }
}
#topServiceArea ul li:nth-child(n+4) a .ttlBox {
  min-height: 124px;
}
#topServiceArea ul li:nth-child(n+4) a .ttlBox p {
  font-size: clamp(16px, 2vw, 24px);
  line-height: 1.4166666667;
}
@media (max-width: 480px) {
  #topServiceArea ul li:nth-child(n+4) a .ttlBox {
    min-height: 95px;
  }
  #topServiceArea ul li:nth-child(n+4) a .ttlBox p {
    font-size: 1.6rem;
  }
}

#topReasonArea {
  margin: clamp(80px, 16.6668vw, 200px) 0 0;
  padding: clamp(80px, 16.6668vw, 200px) 0;
  background: #333333;
}
#topReasonArea h2.mainTtl {
  text-align: center;
  color: #fff;
}
#topReasonArea p.readTxt {
  margin-top: clamp(36px, 6.2505vw, 60px);
  text-align: center;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 400;
  line-height: 1.6666666667;
  letter-spacing: 0.06em;
  color: #fff;
}
#topReasonArea .reasonList {
  margin-top: clamp(72px, 12.4995vw, 120px);
}
#topReasonArea .reasonList ul {
  margin-left: 7.7777777778vw;
}
#topReasonArea .reasonList ul li {
  position: relative;
}
#topReasonArea .reasonList ul li p.num {
  position: absolute;
  font-size: 16rem;
  letter-spacing: 0.03em;
  font-weight: 700;
  color: #2680EB;
  line-height: 1;
  top: -60px;
  left: 0;
}
@media (max-width: 1024px) {
  #topReasonArea .reasonList ul li p.num {
    font-size: 12rem;
  }
}
@media (max-width: 480px) {
  #topReasonArea .reasonList ul li p.num {
    font-size: 10rem;
    top: -40px;
  }
}
#topReasonArea .reasonList ul li .descBox {
  display: flex;
}
@media (max-width: 480px) {
  #topReasonArea .reasonList ul li .descBox {
    flex-direction: column;
  }
}
#topReasonArea .reasonList ul li .descBox .imgBox {
  width: 30.12%;
}
#topReasonArea .reasonList ul li .descBox .imgBox picture {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
  display: block;
  width: 100%;
  height: 100%;
}
#topReasonArea .reasonList ul li .descBox .imgBox picture :where(img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 480px) {
  #topReasonArea .reasonList ul li .descBox .imgBox {
    width: 100%;
  }
  #topReasonArea .reasonList ul li .descBox .imgBox picture {
    border-radius: 20px 0 0 0;
  }
}
#topReasonArea .reasonList ul li .descBox .txtBox {
  width: 69.88%;
  background: #fff;
  padding: clamp(24px, 4.167vw, 40px) clamp(60px, 10.416vw, 100px);
  display: block grid;
  place-items: center;
}
@media (max-width: 480px) {
  #topReasonArea .reasonList ul li .descBox .txtBox {
    width: 100%;
    border-radius: 0 0 0 20px;
  }
}
@media (max-width: 480px) {
  #topReasonArea .reasonList ul li .descBox .txtBox {
    padding: 20px;
  }
}
#topReasonArea .reasonList ul li .descBox .txtBox .txtInner p.ttl {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.03em;
  margin-bottom: clamp(19.2px, 3.333vw, 32px);
}
@media (max-width: 480px) {
  #topReasonArea .reasonList ul li .descBox .txtBox .txtInner p.ttl {
    margin-bottom: 15px;
  }
}
#topReasonArea .reasonList ul li .descBox .txtBox .txtInner p.txt {
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
@media (max-width: 480px) {
  #topReasonArea .reasonList ul li .descBox .txtBox .txtInner p.txt {
    line-height: 1.7;
  }
}
#topReasonArea .reasonList ul li + li {
  margin-top: clamp(48px, 8.334vw, 80px);
}
#topReasonArea .serviceBox {
  margin-top: clamp(64px, 13.3332vw, 160px);
}
#topReasonArea .serviceBox ul {
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  display: grid;
  max-width: 1124px;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  #topReasonArea .serviceBox ul {
    max-width: 800px;
    row-gap: 60px;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  #topReasonArea .serviceBox ul {
    max-width: 400px;
    gap: 20px;
  }
}
#topReasonArea .serviceBox ul li {
  display: block grid;
  place-items: center;
}
#topReasonArea .serviceBox ul li .imgBox {
  background: #fff;
  border-radius: 50%;
  display: block grid;
  place-items: center;
  width: 200px;
  aspect-ratio: 1/1;
}
@media (max-width: 1024px) {
  #topReasonArea .serviceBox ul li .imgBox {
    width: 140px;
  }
}
@media (max-width: 1024px) {
  #topReasonArea .serviceBox ul li .imgBox figure {
    width: 60px;
  }
}
#topReasonArea .serviceBox ul li p.ttl {
  text-align: center;
  color: #fff;
  margin-top: clamp(24px, 4.167vw, 40px);
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
@media (max-width: 767px) {
  #topReasonArea .serviceBox ul li p.ttl {
    white-space: normal;
  }
}
#topReasonArea .serviceBox .moreBtn {
  margin: clamp(48px, 8.334vw, 80px) auto 0;
}

#topAboutArea {
  margin: clamp(80px, 16.6668vw, 200px) 0 0;
}
#topAboutArea h2.mainTtl {
  text-align: center;
  color: #000000;
  margin-bottom: clamp(36px, 6.2505vw, 60px);
}
#topAboutArea .descBox {
  display: flex;
  gap: 6.58%;
}
@media (max-width: 480px) {
  #topAboutArea .descBox {
    flex-direction: column;
    gap: 30px;
  }
}
#topAboutArea .descBox .txtBox {
  width: 46.71%;
}
@media (max-width: 480px) {
  #topAboutArea .descBox .txtBox {
    width: 100%;
  }
}
#topAboutArea .descBox .txtBox p {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 400;
  line-height: 2.5;
  letter-spacing: 0.06em;
}
@media (max-width: 480px) {
  #topAboutArea .descBox .txtBox p {
    line-height: 1.7;
  }
}
#topAboutArea .descBox .imgBox {
  width: 46.71%;
  display: block;
}
#topAboutArea .descBox .imgBox picture {
  aspect-ratio: 568/422;
  border-radius: 20px;
  overflow: hidden;
  display: block;
}
@media (max-width: 480px) {
  #topAboutArea .descBox .imgBox {
    width: 100%;
  }
}

#topWorksArea {
  margin: clamp(80px, 16.6668vw, 200px) 0 0;
}
#topWorksArea h2.mainTtl {
  text-align: center;
  color: #000000;
  margin-bottom: clamp(36px, 6.2505vw, 60px);
}
#topWorksArea .worksList ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1124px;
  margin: 0 auto;
}
@media (max-width: 480px) {
  #topWorksArea .worksList ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    row-gap: 30px;
    justify-content: center;
  }
}
#topWorksArea .worksList ul li a {
  display: block;
  width: 100%;
}
#topWorksArea .worksList ul li a .imgBox {
  width: 100%;
  height: 100%;
}
#topWorksArea .worksList ul li a .imgBox figure {
  aspect-ratio: 376/300;
  overflow: hidden;
  border-radius: 20px;
  border: 3px solid #000000;
  display: block;
  width: 100%;
  height: 100%;
}
#topWorksArea .worksList ul li a .imgBox figure :where(img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#topWorksArea .worksList ul li a .txtBox {
  margin-top: clamp(16.8px, 2.916vw, 28px);
}
#topWorksArea .worksList ul li a .txtBox p {
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 480px) {
  #topWorksArea .worksList ul li a .txtBox p {
    line-height: 1.7;
  }
}
#topWorksArea .worksList ul li a:hover .imgBox figure {
  border-color: #2680EB;
}
#topWorksArea .worksList ul li a:hover .txtBox p {
  color: #2680EB;
}
#topWorksArea .moreBtn {
  margin: clamp(36px, 6.2505vw, 60px) auto 0;
}

#topFlowArea {
  margin: clamp(80px, 16.6668vw, 200px) 0 clamp(64px, 13.3332vw, 160px);
}
#topFlowArea h2.mainTtl {
  text-align: center;
  color: #000000;
  margin-bottom: clamp(36px, 6.2505vw, 60px);
}
#topFlowArea .flowList ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1124px;
  margin: 0 auto;
  align-items: flex-start;
}
@media (max-width: 1024px) {
  #topFlowArea .flowList ul {
    max-width: 800px;
    gap: 4%;
  }
}
@media (max-width: 480px) {
  #topFlowArea .flowList ul {
    gap: 40px;
  }
}
#topFlowArea .flowList ul li {
  display: block grid;
  place-items: center;
}
#topFlowArea .flowList ul li .imgBox {
  position: relative;
  background: #fff;
  border-radius: 50%;
  display: block grid;
  place-items: center;
  width: 200px;
  aspect-ratio: 1/1;
  border: 3px solid #000000;
}
@media (max-width: 1024px) {
  #topFlowArea .flowList ul li .imgBox {
    width: 140px;
  }
}
@media (max-width: 1024px) {
  #topFlowArea .flowList ul li .imgBox figure {
    width: 60px;
  }
}
#topFlowArea .flowList ul li p.ttl {
  text-align: center;
  margin-top: clamp(24px, 4.167vw, 40px);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 500;
  line-height: 1.6666666667;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  #topFlowArea .flowList ul li p.ttl {
    white-space: normal;
  }
}
@media (max-width: 480px) {
  #topFlowArea .flowList ul li p.ttl {
    line-height: 1.5;
  }
}
#topFlowArea .flowList ul li p.ttl span {
  display: block;
  font-size: clamp(14px, 2vw, 16px);
}
@media (max-width: 480px) {
  #topFlowArea .flowList ul li p.ttl span {
    font-size: 1.3rem;
    line-height: 1.4;
  }
}
#topFlowArea .flowList ul li:not(:last-child) {
  position: relative;
}
#topFlowArea .flowList ul li:not(:last-child) .imgBox {
  position: relative;
}
#topFlowArea .flowList ul li:not(:last-child) .imgBox i.triangle {
  position: absolute;
  top: 50%;
  right: -25%;
  display: block;
  width: 10px;
  height: 10px;
  background: #000000;
  border-top-left-radius: 30%;
  transform: rotate(0deg) skewY(30deg) scaleX(0.86666) translate(0, -50%);
}
@media (max-width: 1024px) {
  #topFlowArea .flowList ul li:not(:last-child) .imgBox i.triangle {
    right: -30%;
  }
}
@media (max-width: 480px) {
  #topFlowArea .flowList ul li:not(:last-child) .imgBox i.triangle {
    right: -25px;
  }
}
#topFlowArea .flowList ul li:not(:last-child) .imgBox i.triangle::before, #topFlowArea .flowList ul li:not(:last-child) .imgBox i.triangle::after {
  width: 10px;
  height: 10px;
  background: #000000;
  content: "";
  position: absolute;
}
#topFlowArea .flowList ul li:not(:last-child) .imgBox i.triangle::before {
  border-top-right-radius: 30%;
  transform: skewX(-45deg) translateX(50%);
}
#topFlowArea .flowList ul li:not(:last-child) .imgBox i.triangle::after {
  border-bottom-left-radius: 30%;
  transform: skewY(-45deg) translateY(50%);
}
#topFlowArea .flowList ul li:not(:last-child) .imgBox::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30%;
  width: 23px;
  height: 21px;
  translate: 0 -50%;
  background: url("../img/common/icon_arrow.svg") no-repeat center center/contain;
}
@media (max-width: 1024px) {
  #topFlowArea .flowList ul li:not(:last-child) .imgBox::after {
    right: -40%;
  }
}
@media (max-width: 480px) {
  #topFlowArea .flowList ul li:not(:last-child) .imgBox::after {
    right: -35px;
  }
}
@media (max-width: 480px) {
  #topFlowArea .flowList.horizontal {
    overflow-x: scroll;
    padding: 10px 20px;
    margin: 0 5%;
  }
  #topFlowArea .flowList.horizontal ::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
    height: 10px; /* スクロールバーの高さ */
  }
  #topFlowArea .flowList.horizontal::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーの背景色 */
    border-radius: 5px; /* 角丸にする */
  }
  #topFlowArea .flowList.horizontal::-webkit-scrollbar-thumb {
    background: #888; /* スクロールバーの操作部分の背景色 */
    border-radius: 5px; /* 角丸にする */
  }
  #topFlowArea .flowList.horizontal::-webkit-scrollbar-thumb:hover {
    background: #555; /* ホバー時のスクロールバーの操作部分の背景色 */
  }
  #topFlowArea .flowList.horizontal .horizontalInner ul {
    display: block grid;
    grid-auto-flow: column;
  }
}
#topFlowArea .btnBox {
  margin: clamp(54px, 9.375vw, 90px) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}
@media (max-width: 1024px) {
  #topFlowArea .btnBox {
    gap: 4%;
  }
}
@media (max-width: 480px) {
  #topFlowArea .btnBox {
    margin-top: 30px;
    flex-direction: column;
    gap: 20px;
  }
}

@keyframes horizontal-scroll {
  to {
    translate: calc(-100% + 100dvi);
  }
}
#newsWrap {
  padding: 290px 0 200px;
  background: #fff;
}
@media (max-width: 480px) {
  #newsWrap {
    padding: 160px 0 120px;
  }
}
#newsWrap .inner h2 {
  margin-bottom: 72px;
  text-align: center;
}
@media (max-width: 480px) {
  #newsWrap .inner h2 {
    margin-bottom: 40px;
  }
}
#newsWrap .inner ul {
  border-top: 1px solid #01B901;
}
#newsWrap .inner ul li {
  padding: 32px 20px;
  border-bottom: 1px solid #01B901;
}
@media (max-width: 820px) {
  #newsWrap .inner ul li {
    padding: 20px 15px;
  }
}
#newsWrap .inner ul li a {
  display: flex;
  align-items: center;
  gap: 70px;
}
@media (max-width: 820px) {
  #newsWrap .inner ul li a {
    gap: 10px;
    flex-direction: column;
    align-items: flex-start;
  }
}
#newsWrap .inner ul li a .head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  width: 300px;
}
@media (max-width: 820px) {
  #newsWrap .inner ul li a .head {
    width: 100%;
    gap: 20px;
    justify-content: flex-start;
  }
}
#newsWrap .inner ul li a .head p.date {
  font-family: "URW DIN Semi Condensed", sans-serif;
  font-weight: 400;
  letter-spacing: 0.09em;
}
@media (max-width: 480px) {
  #newsWrap .inner ul li a .head p.date {
    align-self: end;
  }
}
#newsWrap .inner ul li a .head p.ctg {
  font-weight: 500;
  color: #01B901;
  border: 1px solid #01B901;
  border-radius: 35px;
  padding: 6px 12px;
  letter-spacing: 0.05em;
  min-width: 185px;
  text-align: center;
}
@media (max-width: 820px) {
  #newsWrap .inner ul li a .head p.ctg {
    font-size: 1.4rem;
    padding: 4px 12px;
    min-width: auto;
  }
}
@media (max-width: 480px) {
  #newsWrap .inner ul li a .head p.ctg {
    font-size: 1.2rem;
    padding: 4px 8px;
    min-width: auto;
  }
}
#newsWrap .inner ul li a p.ttl {
  font-weight: 500;
  letter-spacing: 0.05em;
}

.banArea {
  margin: clamp(72px, 12.4995vw, 120px) auto;
}
.banArea h2.mainTtl {
  text-align: center;
  color: #000000;
  margin-bottom: clamp(36px, 6.2505vw, 60px);
}
.banArea h2.mainTtl.nowrap {
  white-space: nowrap;
}
.banArea h2.mainTtl span {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: 0 1em;
  display: block;
}
.banArea h2.mainTtl span::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #000;
  rotate: -30deg;
}
.banArea h2.mainTtl span::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 6px;
  height: 100%;
  background: #000;
  rotate: 30deg;
}
.banArea ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8%;
}
.banArea ul li {
  width: 46%;
}
.banArea ul li figure {
  aspect-ratio: 568/215;
}
.banArea ul li figure img {
  width: 100%;
  height: 100%;
}
@media (max-width: 480px) {
  .banArea ul {
    row-gap: 30px;
    flex-direction: column;
  }
  .banArea ul li {
    width: 100%;
  }
}