@charset "shift_jis";

/************************************
    共通　後々コンポーネント追加予定
************************************/
.section__inner {
  padding: 5.0890585242vw;
}
.section__inner-full {
  padding: 0;
}
.section__inner-flex {
  display: flex;
  height: 100%;
  justify-content: space-between;
  width: 100%;
}

.linkbtn {
  transition: 0.4s;
}
.linkbtn-circle {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 10.6870229008vw;
  justify-content: center;
  width: 10.6870229008vw;
}
.linkbtn-circle-outline {
  border: 1px solid #ffffff;
}
.linkbtn-arrow {
  background: url(../../images/ico_arrow-right-w.svg) no-repeat center center;
  background-size: cover;
}
.linkbtn-arrow img {
  display: block;
}

@-webkit-keyframes infiniteScroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes infiniteScroll {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
@-webkit-keyframes infiniteRotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes infiniteRotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
svg .is-anime-line {
  -webkit-animation: drawPath 3s ease-in-out forwards;
          animation: drawPath 3s ease-in-out forwards;
  stroke-dasharray: 2000; /* パスの長さ */
  stroke-dashoffset: 2000; /* 最初は完全に隠す */
}

/* アニメーション */
@-webkit-keyframes drawPath {
  0% {
    stroke-dashoffset: 2000; /* 最初は完全に隠れている */
  }
  33% {
    stroke-dashoffset: 2000; /* 最初は完全に隠れている */
  }
  100% {
    stroke-dashoffset: 0; /* パスが完全に描画される */
  }
}
@keyframes drawPath {
  0% {
    stroke-dashoffset: 2000; /* 最初は完全に隠れている */
  }
  33% {
    stroke-dashoffset: 2000; /* 最初は完全に隠れている */
  }
  100% {
    stroke-dashoffset: 0; /* パスが完全に描画される */
  }
}
/************************************
    Syakai
************************************/
.syakai__mv {
  position: relative;
}
.syakai__mv .image {
  margin-top: 7.6335877863vw;
  width: 88.5496183206vw;
}
.syakai__mv .line {
  height: 21.8829516539vw;
  left: 12.7226463104vw;
  position: absolute;
  top: 28.7531806616vw;
  width: 219.5928753181vw;
}
.syakai__mv .message {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  font-size: 3.5623409669vw;
  height: 66.1577608142vw;
  justify-content: center;
  line-height: 6.3613231552vw;
  text-align: center;
  width: 66.1577608142vw;
}
.syakai__mv .message strong {
  -webkit-background-clip: text;
  background-image: linear-gradient(245.27deg, #1f59a4 4.04%, #cf5622 93.83%);
  font-size: 4.0712468193vw;
  line-height: 7.3791348601vw;
  -webkit-text-fill-color: transparent;
}
.syakai__message {
  overflow: hidden;
  width: 100%;
}
.syakai__message .img-infinite-slide__wrap {
  display: flex;
  height: 17.8117048346vw;
  width: 200%;
}
.syakai__message .img-infinite-slide__item {
  flex: 0 0 auto;
  height: 17.8117048346vw;
  width: 313.2315521628vw;
}
.syakai__message .is-anime {
  -webkit-animation: infiniteScroll 60s infinite linear 0.5s both;
          animation: infiniteScroll 60s infinite linear 0.5s both;
}
.syakai__bgarea .line-01 {
  position: absolute;
  top: 175.572519084vw;
  width: 100%;
  z-index: -1;
}
.syakai__bgarea .line-02 {
  position: absolute;
  top: 460.5597964377vw;
  z-index: 0;
}
.syakai__menu {
  padding-top: min(3.4722222222vw, 50px);
}
.syakai__menu .menu__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.syakai__menu .menu__item {
  position: relative;
  width: 100%;
}
.syakai__menu .menu__item .hover-image {
  transition: 0.4s;
}
.syakai__menu .menu__item .hover-image .image--flame {
  border-radius: 8.1424936387vw;
  height: 122.1374045802vw;
  width: 100%;
}
.syakai__menu .menu__item .hover-image:hover .linkbtn-circle-outline {
  background-color: #ffffff;
  border: 1px solid #ffffff;
}
.syakai__menu .menu__item .hover-image:hover .linkbtn-arrow {
  background: url(../../images/ico_arrow-right-bk.svg) no-repeat;
  background-size: cover;
}
.syakai__menu .menu__item .text {
  left: 4.0712468193vw;
  position: absolute;
  width: calc(100% - 8.1424936387vw);
}
.syakai__menu .menu__item .text .title {
  color: #ffffff;
  font-size: 5.5979643766vw;
  font-weight: 500;
}
.syakai__menu .menu__item .text .subtitle {
  color: #ffffff;
  font-size: 3.8167938931vw;
  font-weight: 400;
}
.syakai__menu .menu__item .copy {
  position: absolute;
  z-index: 1;
}
.syakai__menu .menu__item02 .copy {
  height: 22.9007633588vw;
  top: -8.3969465649vw;
  width: 86.7684478372vw;
}
.syakai__menu .menu__item03 .copy {
  height: 21.6284987277vw;
  top: -7.6335877863vw;
  width: 81.9338422392vw;
}
.syakai__menu .menu__item04 .copy {
  height: 20.3562340967vw;
  top: -9.1603053435vw;
  width: 72.7735368957vw;
}
.syakai__slideImages {
  height: 87.2773536896vw;
  position: relative;
}
.syakai__slideImages .rotate-text {
  left: 6.106870229vw;
  position: absolute;
  z-index: 1;
}
.syakai__slideImages .rotate-text .rotate {
  height: 37.9134860051vw;
  width: 35.6234096692vw;
}
.syakai__slideImages .rotate-text .is-anime {
  -webkit-animation: infiniteRotate 60s linear infinite;
          animation: infiniteRotate 60s linear infinite;
}
.syakai__slideImages .img-infinite-slide {
  bottom: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.syakai__slideImages .img-infinite-slide__wrap {
  display: flex;
  width: 200%;
}
.syakai__slideImages .img-infinite-slide__item {
  flex: 0 0 auto;
  height: 61.0687022901vw;
  margin-left: 0.7633587786vw;
  width: 839.6946564885vw;
}
.syakai__slideImages .img-infinite-slide .is-anime {
  -webkit-animation: infiniteScroll 60s infinite linear 0.5s both;
          animation: infiniteScroll 60s infinite linear 0.5s both;
}
.syakai__relatedLinks {
  padding-top: 15.2671755725vw;
}
.syakai__relatedLinks .links-list {
  display: flex;
}
.syakai__relatedLinks .linkbtn__item a:not(:first-child) {
  margin-left: min(1.6666666667vw, 24px);
}
@media screen and (min-width: 1024px) {
  .section__inner {
    margin-left: auto;
    margin-right: auto;
    padding: min(1.1111111111vw, 16px) min(10.4166666667vw, 150px) min(2.2222222222vw, 32px);
    width: min(100vw, 1440px);
  }
  .section__inner-full {
    padding: 0;
    width: 100%;
  }
  .linkbtn-circle {
    height: min(3.6111111111vw, 52px);
    width: min(3.6111111111vw, 52px);
  }
  .linkbtn-arrow {
    height: min(1.0416666667vw, 15px);
    width: min(1.0416666667vw, 15px);
  }
  .syakai__mv {
    background-image: url(../../images/syakai/img_mv01.jpg);
    background-position: center center;
    background-size: cover;
    height: min(37.5vw, 540px);
  }
  .syakai__mv .image {
    margin-top: min(6.9444444444vw, 100px);
    width: min(36.1111111111vw, 520px);
  }
  .syakai__mv .line {
    height: min(10vw, 144px);
    left: calc(50% - min(39.2361111111vw, 565px));
    top: min(16.6666666667vw, 240px);
    width: min(161.5972222222vw, 2327px);
  }
  .syakai__mv .message {
    font-size: clamp(13px, 1.0416666667vw, 15px);
    height: min(23.6111111111vw, 340px);
    line-height: min(2.0833333333vw, 30px);
    margin-top: min(8.3333333333vw, 120px);
    width: min(23.6111111111vw, 340px);
  }
  .syakai__mv .message strong {
    font-size: min(1.3888888889vw, 20px);
    line-height: min(2.5vw, 36px);
  }
  .syakai__message .img-infinite-slide__wrap {
    height: min(6.25vw, 90px);
    margin-top: min(1.3888888889vw, 20px);
  }
  .syakai__message .img-infinite-slide__item {
    height: min(6.1111111111vw, 88px);
    margin-left: min(6.9444444444vw, 100px);
    width: min(110.625vw, 1593px);
  }
  .syakai__bgarea .line-01 {
    height: min(68.75vw, 990px);
    right: calc(50% + min(13.8888888889vw, 200px));
    top: min(41.6666666667vw, 600px);
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
    width: min(200.9722222222vw, 2894px);
  }
  .syakai__bgarea .line-02 {
    height: min(91.3888888889vw, 1316px);
    left: calc(50% - min(38.1944444444vw, 550px));
    top: min(119.4444444444vw, 1720px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: min(162.0138888889vw, 2333px);
  }
  .syakai__menu .menu__list {
    margin-top: min(2.0833333333vw, 30px);
  }
  .syakai__menu .menu__item {
    height: min(41.6666666667vw, 600px);
    width: 48.5%;
    width: min(36.8055555556vw, 530px);
  }
  .syakai__menu .menu__item:nth-child(2n) {
    margin-top: min(9.3055555556vw, 134px);
  }
  .syakai__menu .menu__item .hover-image .image--flame {
    border-radius: min(2.5vw, 36px);
    height: min(41.6666666667vw, 600px);
    width: min(36.8055555556vw, 530px);
  }
  .syakai__menu .menu__item .text {
    left: min(2.7777777778vw, 40px);
    top: min(29.0277777778vw, 418px);
    width: min(31.25vw, 450px);
  }
  .syakai__menu .menu__item .text .title {
    font-size: min(1.9444444444vw, 28px);
  }
  .syakai__menu .menu__item .text .subtitle {
    font-size: clamp(16px, 1.25vw, 18px);
    width: min(25.9722222222vw, 374px);
  }
  .syakai__menu .menu__item .text .subtitle__container {
    align-items: center;
    display: flex;
    font-size: clamp(16px, 1.25vw, 18px);
    justify-content: space-between;
    margin-top: min(1.6666666667vw, 24px);
    width: min(31.25vw, 450px);
  }
  .syakai__menu .menu__item01 .copy {
    height: min(6.9444444444vw, 100px);
    left: min(-1.0416666667vw, -15px);
    top: min(-1.3888888889vw, -20px);
    width: min(20.6944444444vw, 298px);
  }
  .syakai__menu .menu__item02 .copy {
    height: min(7.6388888889vw, 110px);
    left: min(-2.7777777778vw, -40px);
    top: min(-3.4722222222vw, -50px);
    width: min(32.5vw, 468px);
  }
  .syakai__menu .menu__item03 .copy {
    height: min(6.5277777778vw, 94px);
    left: min(-1.7361111111vw, -25px);
    top: min(-1.7361111111vw, -25px);
    width: min(25.9722222222vw, 374px);
  }
  .syakai__menu .menu__item04 .copy {
    height: min(6.6666666667vw, 96px);
    left: min(-1.7361111111vw, -25px);
    top: min(-1.7361111111vw, -25px);
    width: min(24.0972222222vw, 347px);
  }
  .syakai__slideImages {
    height: min(24.1666666667vw, 348px);
    margin-top: min(5.5555555556vw, 80px);
  }
  .syakai__slideImages .rotate-text {
    left: min(20.8333333333vw, 300px);
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .syakai__slideImages .rotate-text .rotate {
    height: min(16.1805555556vw, 233px);
    width: min(15.2777777778vw, 220px);
  }
  .syakai__slideImages .img-infinite-slide__item {
    height: min(16.6666666667vw, 240px);
    margin-left: min(0.2083333333vw, 3px);
    width: min(229.1666666667vw, 3300px);
  }
  .syakai__relatedLinks {
    padding-top: min(6.9444444444vw, 100px);
  }
  .syakai__relatedLinks .links-list {
    align-items: center;
    flex-wrap: wrap;
    gap: min(1.6666666667vw, 24px);
    justify-content: center;
    margin: 0 auto;
    width: min(67.9166666667vw, 978px);
  }
  .syakai__relatedLinks .linkbtn__item a {
    width: min(21.5277777778vw, 310px);
  }
}
@media screen and (max-width: 1023px) {
  .section__inner-flex {
    align-items: center;
    flex-direction: column;
  }
  .linkbtn-arrow {
    height: 3.0534351145vw;
    width: 3.0534351145vw;
  }
  .syakai__mv {
    background-image: url(../../images/syakai/img_mv01_sp.jpg);
    background-position: center center;
    background-size: cover;
    height: 122.1374045802vw;
    width: 100vw;
  }
  .syakai__mv .message {
    margin-bottom: 5.0890585242vw;
  }
  .syakai__message {
    margin-bottom: 20.3562340967vw;
    margin-top: 2.5445292621vw;
  }
  .syakai__bgarea .line-03 {
    position: absolute;
    top: 758.2697201018vw;
    width: 100%;
    z-index: 0;
  }
  .syakai__menu .menu__item:nth-child(n+2) {
    margin-top: 28.4987277354vw;
  }
  .syakai__menu .menu__item .text {
    bottom: 5.5979643766vw;
  }
  .syakai__menu .menu__item .text .subtitle__container {
    flex-direction: column;
    margin-top: 4.0712468193vw;
  }
  .syakai__menu .menu__item .text .subtitle__container .linkbtn {
    margin-left: auto;
  }
  .syakai__menu .menu__item .copy {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .syakai__menu .menu__item01 .copy {
    height: 22.1374045802vw;
    top: -7.6335877863vw;
    width: 65.6488549618vw;
  }
  .syakai__slideImages {
    margin-top: 25.4452926209vw;
  }
  .syakai__slideImages .rotate-text {
    top: 8.6513994911vw;
  }
  .syakai__relatedLinks {
    padding-bottom: 5.0890585242vw;
  }
  .syakai__relatedLinks .links-list {
    flex-direction: column;
    gap: 4.0712468193vw;
    margin: 11.1959287532vw 4.0712468193vw 0;
  }
}