/*=============================================
 * HOME
*=============================================*/
.svg-wrap svg {
   display: block;
   width: 100%;
   height: 100%;
}

.svg-wrap .cls-1 {
   transform-box: fill-box;
   opacity: 0;
}

.svg-wrap.scrollIn .diag-left-top,
.svg-wrap.is-active .diag-left-top {
   animation: diagLeftTop 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.svg-wrap.scrollIn .vertical-down,
.svg-wrap.is-active .vertical-down {
   animation: verticalLeftDown 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.svg-wrap.scrollIn .vertical-up,
.svg-wrap.is-active .vertical-up {
   animation: verticalUp 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.svg-wrap.scrollIn .diag-right-main,
.svg-wrap.is-active .diag-right-main {
   animation: diagRightMain 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.svg-wrap.scrollIn .vertical-right,
.svg-wrap.is-active .vertical-right {
   animation: verticalRightDown 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.svg-wrap.scrollIn .diag-left-bottom-a,
.svg-wrap.is-active .diag-left-bottom-a {
   animation: diagLeftBottomA 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.svg-wrap.scrollIn .diag-left-bottom-b,
.svg-wrap.is-active .diag-left-bottom-b {
   animation: diagLeftBottomB 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.svg-wrap.scrollIn .horizontal-left,
.svg-wrap.is-active .horizontal-left {
   animation: horizontalLeftToRight 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.svg-wrap.scrollIn .horizontal-right,
.svg-wrap.is-active .horizontal-right {
   animation: horizontalRightToLeft 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes copyIn {
   0% {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(50px);
   }

   100% {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0px);
   }
}

@keyframes verticalLeftDown {
   0% {
      opacity: 0;
      transform: translate3d(0, -50%, 0);
   }

   28% {
      opacity: 0.82;
   }

   100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

@keyframes verticalRightDown {
   0% {
      opacity: 0;
      transform: translate3d(0, -50%, 0);
   }

   28% {
      opacity: 0.82;
   }

   100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

@keyframes verticalUp {
   0% {
      opacity: 0;
      transform: translate3d(0, 50%, 0);
   }

   28% {
      opacity: 0.82;
   }

   100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
   }
}

@keyframes diagLeftTop {
   0% {
      opacity: 0;
      transform: translateX(50%) translateY(-50%);
   }

   28% {
      opacity: 0.82;
   }

   100% {
      opacity: 1;
      transform: translateX(0) translateY(0);
   }
}

@keyframes diagRightMain {
   0% {
      opacity: 0;
      transform: translateX(50%) translateY(50%);
   }

   50% {
      opacity: 0.82;
   }

   100% {
      opacity: 1;
      transform: translateX(0) translateY(0);
   }
}

@keyframes diagLeftBottomA {
   0% {
      opacity: 0;
      transform: translateX(-50%) translateY(-50%);
   }

   28% {
      opacity: 0.82;
   }

   100% {
      opacity: 1;
      transform: translateX(0) translateY(0);
   }
}

@keyframes diagLeftBottomB {
   0% {
      opacity: 0;
      transform: translateX(-50%) translateY(50%);
   }

   28% {
      opacity: 0.82;
   }

   100% {
      opacity: 1;
      transform: translateX(0) translateY(0);
   }
}

@keyframes horizontalLeftToRight {
   0% {
      opacity: 0;
      transform: translateX(-50%);
   }

   30% {
      opacity: 0.8;
   }

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

@keyframes horizontalRightToLeft {
   0% {
      opacity: 0;
      transform: translateX(50%);
   }

   30% {
      opacity: 0.8;
   }

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

.opening {
   display: flex;
   justify-content: center;
   align-items: center;
   background: #000;
   color: #fff;
   width: 100%;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 200;
   box-sizing: border-box;
   text-align: center;
}

.opening .copy {
   opacity: 0;
   filter: blur(10px);
   transform: translateY(50px);
}

.opening .copy.is-active {
   animation: copyIn 2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.opening h2 {
   line-height: 2;
   padding-left: 4vw;
}

.opening .logo {
   max-width: 253px;
   margin: 0 auto;
   padding-top: 50px;
}

.opening .svg-left {
   width: 33%;
   height: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
}

.opening .svg-right {
   width: 40.5%;
   height: 100%;
   position: absolute;
   bottom: 0;
   right: 0;
}

.opening-done .opening {
   display: none !important;
}

@media screen and (max-width: 1023px) {
   .opening .svg-left {
      width: 24%;
      height: auto;
      top: 0;
      bottom: auto;
      left: 0;
   }

   .opening .svg-right {
      width: 30.5%;
      height: auto;
   }
}

@media screen and (max-width: 767px) {
   .opening h2 {
      font-size: 5.5vw;
      line-height: 2;
      padding-left: 0;
   }

   .opening .logo {
      width: 45vw;
      padding-top: 5vw;
   }

   .opening .svg-left {
      width: 33%;
      left: -7%;
   }

   .opening .svg-right {
      width: 40.5%;
   }
}

.btn-scroll {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   width: 20px;
   font-size: 14px;
   letter-spacing: 0.07em;
   line-height: 20px;
   cursor: pointer;
   transition: all 0.3s;
   text-align: center;
   position: absolute;
   bottom: 40px;
   left: 40px;
}

.btn-scroll * {
   cursor: pointer !important;
}

.btn-scroll .txt-vertical {
   width: 20px;
   height: 70px;
}

.btn-scroll i {
   width: 7px;
   animation: sdl01 1s infinite;
}

.btn-scroll:hover {
   opacity: 0.7;
}

@keyframes sdl01 {
   0% {
      transform: translateY(0%);
   }

   50% {
      transform: translateY(10px);
   }

   100% {
      transform: translateY(0px);
   }
}

@media screen and (max-width: 767px) {
   .btn-scroll {
      display: none;
      bottom: 20px;
      left: 10px;
   }
}

/* -- -- */
#mv {
   display: grid;
   width: 100%;
   height: 100vh;
   min-height: 700px;
   background-color: #000;
   color: #fff;
   position: relative;
}

#mv .svg-wrap {
   position: absolute;
   left: 0;
}

#mv .svg-1 {
   width: 50%;
   top: 0;
}

#mv .svg-2 {
   width: 100%;
   bottom: 0;
}

#mv .wrap {
   margin: auto;
}

#mv h2 {
   font-weight: 500;
   font-size: 39px;
   line-height: 65px;
   letter-spacing: 0.07em;
}

#mv .logo {
   width: 127px;
   margin: 0 auto;
   padding-top: 70px;
}

@media screen and (max-width: 767px) {
   #mv {
      min-height: inherit;
   }

   #mv h2 {
      font-size: 4.5vw;
      line-height: 2;
   }

   #mv .logo {
      width: 20vw;
      padding-top: 10vw;
   }

   #mv .svg-3 {
      width: 16%;
      position: absolute;
      top: 16%;
      left: 0;
   }

   #mv .svg-4 {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
   }
}

/* -- --*/
#about {
   padding: 18.5vw 0 0;
   position: relative;
}

#about .svg-wrap {
   width: 100%;
   position: absolute;
   left: 0;
}

#about .svg-1 {
   top: 0;
}

#about .svg-2 {
   top: 78%;
}

#about .wrap {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 30px;
}

#about h2 {
   padding-bottom: 100px;
}

#about .col {
   width: 310px;
}

#about .logo {
   padding-top: 30px;
}

#about .txt {
   line-height: 46px;
   letter-spacing: 0.05em;
}

@media screen and (max-width: 1023px) {
   #about .svg-2 {
      top: 85%;
   }
}

@media screen and (max-width: 767px) {
   #about {
      padding: 80px 0 60vw;
   }

   #about .svg-3 {
      width: 50%;
      position: absolute;
      bottom: 0;
      right: 0;
      left: auto;
   }

   #about .wrap {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
   }

   #about h2 {
      padding-bottom: 0;
   }

   #about .col {
      width: 210px;
      text-align: left;
   }

   #about .txt {
      font-size: 14px;
      line-height: 28px;
   }

   #about .logo {
      padding-top: 20px;
   }
}

/* -- --*/
#concept {
   padding: 40vw 0 90px;
   position: relative;
}

#concept .svg-wrap {
   width: 27.4%;
   position: absolute;
   bottom: 90px;
   left: 0;
}

#concept .wrap {
   display: flex;
   justify-content: space-between;
   gap: 30px;
}

#concept h3 {
   width: 180px;
   height: 360px;
   line-height: 60px;
   margin: 0 auto;
   padding-top: 100px;
   text-align: left;
}

#concept .txt {
   width: 50%;
   line-height: 50px;
}

#concept .txt p+p {
   padding-top: 50px;
}

#concept figure {
   width: 50%;
   margin: -50px 0 0 50%;
}

@media screen and (max-width: 1440px) {
   #concept .svg-wrap {
      bottom: 0;
   }
}

@media screen and (max-width: 1023px) {
   #concept {
      padding-top: 60vw;
   }

   #concept figure {
      margin-top: 50px;
   }
}

@media screen and (max-width: 767px) {
   #concept {
      padding: 0;
   }

   #concept .svg-wrap {
      top: 76vw;
      bottom: auto;
   }

   #concept .wrap {
      flex-direction: column;
      text-align: center;
   }

   #concept h3 {
      width: 150px;
      height: 260px;
      line-height: 50px;
      padding-top: 50px;
   }

   #concept .txt {
      width: 100%;
      font-size: 14px;
      line-height: 30px;
   }

   #concept .txt p+p {
      padding-top: 30px;
   }

   #concept figure {
      width: 100%;
      margin: 0;
      padding-top: 60px;
   }
}

/* -- --*/
#people {
   position: relative;
   padding-top: 75px;
}

#people:before {
   content: '';
   width: 100%;
   height: 150px;
   background-color: #fff;
   position: absolute;
   top: 0;
   left: 0;
}

#people .svg-wrap {
   width: 290px;
   position: absolute;
   top: 0;
   left: calc(50% - 100px);
}

#people h2 {
   margin-left: auto;
}

#people .box {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
   margin-top: -50px;
}

#people .box .photos {
   width: 388px;
}

#people .box .photos .slick-list {
   margin-bottom: -25px;
}

#people .box .photos figure {
   position: relative;
}

#people .box .photos figure:not(:last-child) {
   margin-bottom: 20px;
}

#people .box .photos figcaption {
   font-weight: 500;
   font-size: 13px;
   letter-spacing: 0.05em;
   line-height: 22px;
   position: absolute;
   top: 10px;
   right: 10px;
}

#people .box .photos .slick-arrow {
   width: 7px;
   height: 43px;
   position: absolute;
   left: -36px;
}

#people .box .photos .slick-prev {
   background: url("../img/index/people-up.webp") no-repeat center top/100% auto;
   top: 0;
}

#people .box .photos .slick-next {
   background: url("../img/index/people-down.webp") no-repeat center top/100% auto;
   top: 80px;
   transform: rotate(0deg);
}

#people .box .col {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 50%;
}

#people .box h3 {
   line-height: 60px;
}

#people .box .txt {
   line-height: 42px;
   padding-top: 40px;
}

@media screen and (max-width: 1200px) {
   #people .box {
      padding-left: 36px;
   }
}

@media screen and (max-width: 1023px) {
   #people {
      padding-top: 80px;
      padding-bottom: 80px;
   }

   #people:before {
      height: 0;
   }

   #people .svg-wrap {
      width: 30vw;
      top: 40vw;
      right: 0;
      left: auto;
   }

   #people .wrap {
      max-width: 100%;
      padding: 0 10vw;
   }

   #people h2 {
      margin: 0 auto;
      padding-bottom: 50px;
   }

   #people .box {
      flex-direction: column-reverse;
      gap: 50px;
      margin-top: 0;
      padding-left: 0;
   }

   #people .box .photos {
      width: 100vw;
      margin: 0 -10vw;
      padding-bottom: 30px;
   }

   #people .box .photos .slick-list {
      margin: 0;
   }

   #people .box .photos .slick-arrow {
      bottom: 0;
      left: auto;
      z-index: 1;
   }

   #people .box .photos .slick-prev {
      top: auto;
      right: auto;
      left: 50%;
      transform: rotate(-90deg);
      margin-left: -30px;
   }

   #people .box .photos .slick-next {
      top: auto;
      right: auto;
      left: 50%;
      transform: rotate(-90deg);
      margin-left: 30px;
   }

   #people .box .photos figure {
      margin: 0;
   }

   #people .box .col {
      width: 100%;
   }

   #people .box h3 {
      line-height: 40px;
      text-align: center;
   }

   #people .box .txt {
      font-size: 14px;
      line-height: 25px;
      padding-top: 30px;
   }
}

/* -- --*/
#solution {
   position: relative;
   padding: 220px 0;
}

#solution .svg-1 {
   width: 1px;
   position: absolute;
   top: -86px;
   left: 50%;
}

#solution .svg-2 {
   width: 32.1%;
   position: absolute;
   bottom: 0;
   left: 0;
}

#solution .wrap {
   display: flex;
   justify-content: space-between;
   gap: 30px;
   width: calc(50% + 500px);
   max-width: inherit;
   margin-right: 0;
}

#solution .ttl {
   width: 320px;
}

#solution h3 {
   width: 240px;
   height: 300px;
   line-height: 60px;
   margin: 0 auto;
   padding-top: 80px;
}

#solution .col {
   width: 60%;
}

#solution .item {
   display: block;
   background-color: #fff;
   color: #000;
   padding: 50px;
}

#solution .item:not(:last-child) {
   margin-bottom: 30px;
}

#solution .item .in {
   display: block;
   max-width: 550px;
   position: relative;
   padding-right: 50px;
}

#solution .item h4 span {
   display: block;
   font-size: 15px;
   line-height: 21px;
   padding-top: 15px;
}

#solution .item .txt {
   line-height: 32px;
   padding-top: 30px;
}

#solution .item .more {
   width: 20px;
   height: 80px;
   font-weight: 500;
   font-size: 12px;
   line-height: 20px;
   text-align: right;
   position: absolute;
   bottom: 0;
   right: 0;
}

#solution .item .more span {
   display: inline-block;
   transform: rotate(180deg);
   cursor: pointer;
   letter-spacing: 0.05em;
}

@media screen and (max-width: 1200px) {
   #solution .wrap {
      width: calc(50% + 480px);
   }
}

@media screen and (max-width: 1023px) {
   #solution .wrap {
      flex-direction: column;
      align-items: center;
      width: 100%;
   }

   #solution .col {
      width: calc(50% + 360px);
      align-self: flex-end;
   }

   #solution .col .in {
      max-width: 100%;
   }
}

@media screen and (max-width: 767px) {
   #solution {
      padding: 80px 0;
   }

   #solution .svg-1 {
      height: 30vw;
      top: -13vw;
   }

   #solution .wrap {
      padding: 0;
   }

   #solution .ttl {
      width: 100%;
   }

   #solution h3 {
      width: 200px;
      height: 190px;
      line-height: 50px;
      padding-top: 50px;
   }

   #solution .col {
      width: calc(100% - 10vw);
   }

   #solution .item {
      padding: 30px 10px 30px 20px;
   }

   #solution .item .in {
      padding-right: 20px;
   }

   #solution .item h4 {
      font-size: 20px;
   }

   #solution .item h4 span {
      font-size: 11px;
      padding-top: 0;
   }

   #solution .item .txt {
      font-size: 14px;
      line-height: 25px;
      padding-top: 20px;
   }
}

/* -- --*/
#event {
   padding: 16.5vw 0;
   position: relative;
}

#event .svg-wrap {
   width: 54.2%;
   position: absolute;
   bottom: 35px;
   right: 0;
}

#event .wrap {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   gap: 30px;
}

#event .col-r {
   width: 310px;
}

#event h3 {
   width: 180px;
   height: 360px;
   line-height: 60px;
   margin: 0 auto;
   padding-top: 90px;
}

#event .col-l {
   width: 50%;
}

#event .col-l a {
   display: block;
}

#event .col-l a.disable {
   pointer-events: none;
}

#event .col-l figure {
   width: 100%;
   padding-top: 100%;
   overflow: hidden;
   border-radius: 10px;
   position: relative;
}

#event .col-l figure img {
   position: absolute;
   top: 0;
   left: 0;
}

#event .col-l .ttl {
   margin-top: 40px;
   line-height: 40px;
}

#event .col-l .ttl span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

#event .col-l .more {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 230px;
   height: 64px;
   background-color: #000;
   color: #fff;
   font-weight: 500;
   font-size: 15px;
   line-height: 28px;
   letter-spacing: 0.05em;
   border-radius: 50px;
   margin: 40px 0 0 auto;
}

@media screen and (max-width: 767px) {
   #event {
      padding: 80px 0 22vw;
      overflow: hidden;
   }

   #event .svg-wrap {
      width: 100%;
      top: 80px;
      right: -74vw;
      bottom: auto;
   }

   #event .svg-wrap.sp {
      width: 24vw;
      top: 40%;
      right: auto;
      left: 0;
   }

   #event .wrap {
      flex-direction: column;
   }

   #event .col-r {
      width: 100%;
   }

   #event h3 {
      width: 150px;
      height: 240px;
      line-height: 50px;
      padding-top: 50px;
   }

   #event .col-l {
      width: 100%;
   }

   #event .col-l .ttl {
      font-size: 15px;
      line-height: 30px;
      margin-top: 20px;
   }

   #event .col-l .more {
      width: 180px;
      height: 50px;
      font-size: 15px;
      margin: 20px auto 0;
   }
}

/* -- --*/
#news-profile {
   padding: 180px 0;
   position: relative;
}

#news-profile .svg-wrap {
   width: 210px;
   position: absolute;
   bottom: -75px;
   right: calc(50% - 100px);
   z-index: 1;
}

#news-profile .wrap {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 100px;
}

#news-profile h2 {
   line-height: 60px;
}

#news-profile .news {
   position: relative;
}

#news-profile .news .more {
   position: absolute;
   top: 14px;
   right: 0;
}

#news-profile .news .more a {
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50px;
   width: 104px;
   height: 32px;
   background-color: #313333;
   color: #fff;
   font-size: 14px;
   line-height: 28px;
}

#news-profile .news .list {
   padding-top: 50px;
}

#news-profile .news .list dl {
   display: grid;
   grid-template-columns: 100px 1fr;
}

#news-profile .news .list dl+dl {
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   margin-top: 50px;
   padding-top: 25px;
}

#news-profile .news .list dl dt {
   color: #8c8c8c;
   font-weight: 300;
   font-size: 11px;
}

#news-profile .news .list dl dd {
   color: #313333;
   font-weight: 300;
   font-size: 14px;
   line-height: 28px;
}

#news-profile .news .list dl dd .ttl {
   display: block;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

#news-profile .news .list dl dd .cat {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   min-width: 48px;
   border: 1px solid #000;
   font-size: 10px;
   line-height: 18px;
   border-radius: 2px;
   text-align: center;
   margin-top: 15px;
   padding: 0 5px;
}

#news-profile .profile .list {
   font-weight: 500;
   font-size: 15px;
   line-height: 30px;
   letter-spacing: 0.05em;
   padding-top: 50px;
}

#news-profile .profile .list dl {
   display: grid;
   grid-template-columns: 80px 1fr;
}

#news-profile .profile .list dl+dl {
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   margin-top: 20px;
   padding-top: 20px;
}

#news-profile .profile .list ul li {
   text-indent: -20px;
   padding-left: 20px;
}

#news-profile .profile .list p {
   letter-spacing: 0;
}

#news-profile .profile .list p:not(:last-child) {
   padding-bottom: 35px;
}

@media screen and (max-width: 1023px) {
   #news-profile .wrap {
      grid-template-columns: 1fr;
   }
}

@media screen and (max-width: 767px) {
   #news-profile {
      padding: 80px 0 20vw;
   }

   #news-profile .svg-wrap {
      width: 50vw;
      top: -15vw;
      right: -10vw;
      bottom: auto;
   }

   #news-profile .wrap {
      gap: 80px;
   }

   #news-profile h2 {
      font-size: 32px;
      line-height: 48px;
   }

   #news-profile .news .more {
      top: 8px;
   }

   #news-profile .news .list {
      padding-top: 30px;
   }

   #news-profile .news .list dl {
      grid-template-columns: 70px 1fr;
   }

   #news-profile .news .list dl+dl {
      margin-top: 20px;
      padding-top: 20px;
   }

   #news-profile .profile {
      position: relative;
   }

   #news-profile .profile .list {
      font-size: 14px;
      line-height: 25px;
      padding-top: 30px;
   }

   #news-profile .profile .list dl {
      grid-template-columns: 70px 1fr;
   }
}

/* -- --*/
#column {
   padding: 150px 0 180px;
   position: relative;
}

#column .svg-wrap {
   width: 19.6%;
   position: absolute;
   bottom: 60px;
   left: 0;
}

#column .wrap {
   display: flex;
   justify-content: space-between;
   gap: 30px;
}

#column .col-l {
   width: 320px;
}

#column h3 {
   width: 180px;
   height: 250px;
   line-height: 60px;
   margin: 0 auto;
   padding-top: 110px;
}

#column .col-r {
   display: flex;
   flex-direction: column-reverse;
   gap: 50px;
   width: 63.6%;
   padding-top: 60px;
}

#column .list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 64px 32px;
}

#column .list a {
   display: block;
   position: relative;
}

#column .list figure {
   width: 100%;
   padding-top: 85%;
   position: relative;
   overflow: hidden;
   border-radius: 10px;
}

#column .list figure img {
   position: absolute;
   top: 0;
   left: 0;
}

#column .list h4 {
   font-weight: 300;
   line-height: 28px;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
   margin-top: 20px;
}

#column .list time {
   display: block;
   font-weight: 300;
   font-size: 11px;
   line-height: 20px;
   color: rgba(0, 0, 0, 0.4);
   padding: 20px 0 12px;
}

#column .list .more {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 90px;
   height: 28px;
   font-weight: 500;
   font-size: 10px;
   letter-spacing: 0.03em;
   line-height: 20px;
   border: 1px solid #000;
   border-radius: 50px;
   box-sizing: border-box;
   text-align: center;
   position: absolute;
   bottom: 0;
   right: 0;
}

#column .button {
   text-align: right;
}

@media screen and (max-width: 767px) {
   #column {
      padding: 20vw 0 25vw;
   }

   #column .svg-wrap {
      width: 20vw;
      top: 90vw;
      bottom: auto;
   }

   #column .wrap {
      flex-direction: column;
   }

   #column .col-l {
      width: 100%;
   }

   #column h3 {
      width: 150px;
      height: 180px;
      line-height: 50px;
      padding-top: 50px;
   }

   #column .col-r {
      flex-direction: column;
      width: 100%;
      padding-top: 0;
   }

   #column .list {
      grid-template-columns: repeat(2, 1fr);
      gap: 5vw;
      margin: 0 -5vw;
   }

   #column .list a:nth-child(3),
   #column .list a:nth-child(4) {
      display: none;
   }

   #column .list time {
      margin-top: 10px;
      padding: 2px 0;
   }

   #column .list .more {
      width: 80px;
      height: 24px;
   }

   #column .button {
      text-align: center;
   }
}

/* -- -- */
button.remodal-close {
   background: url("../img/common/icon-close.webp") no-repeat center top/cover;
   width: 62px;
   height: 62px;
   top: 25px;
   right: 25px;
   transition: all 0.3s;
}

button.remodal-close:hover {
   opacity: 0.7;
}

.remodal-wrapper {
   padding: 20px;
}

.modal-body {
   background-color: #fff;
   border-radius: 20px;
   padding: 70px 70px 0;
}


.modal-body .box-people {
   display: grid;
   grid-template-columns: 350px 1fr;
   gap: 50px;
   font-weight: 500;
   letter-spacing: 0.05em;
   text-align: left;
}

.modal-body .box-people figure img {
   border-radius: 10px;
}

.modal-body .box-people .url {
   font-size: 13px;
}

.modal-body .box-people .url a {
   border-bottom: 1px solid;
}

.modal-body .box-people .url a:hover {
   border-bottom-color: transparent;
}

.modal-body .box-people .desc {
   padding-top: 40px;
}

.modal-body .txt-name {
   font-size: 60px;
   line-height: 1;
   letter-spacing: 0.05em;
   padding-top: 70px;
}

.modal-body .box-solution {
   text-align: left;
   padding-bottom: 70px;
}

.modal-body .box-solution h3 {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-left: -70px;
}

.modal-body .box-solution h3:before {
   content: '';
   display: block;
   width: 70px;
   height: 0;
   border-top: 2px solid #000;
}

.modal-body .box-solution dl {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   padding-top: 50px;
}

.modal-body .box-solution dl dt {
   font-size: 48px;
   line-height: 80px;
   letter-spacing: 0.05em;
   padding-right: 20px;
}

.modal-body .box-solution dl dd {
   font-weight: 500;
   line-height: 44px;
   letter-spacing: 0.05em;
}

.modal-body .box-solution dl dd a {
   border-bottom: 1px solid;
}

.modal-body .box-solution dl dd a:hover {
   border-bottom-color: transparent;
}

.modal-body .slick-arrow {
   display: block;
   width: 43px;
   height: 43px;
   border: 0;
   font-size: 0;
   cursor: pointer;
   position: absolute;
   top: calc(50% - 35px);
   z-index: 1;
}

.modal-body .slick-prev {
   background: url("../img/index/people-down.webp") no-repeat center/auto 100%;
   transform: translateY(-50%) rotate(90deg);
   left: -55px;
}

.modal-body .slick-next {
   background: url("../img/index/people-up.webp") no-repeat center/auto 100%;
   transform: translateY(-50%) rotate(90deg);
   right: -55px;
}

.slider-people {
   height: 500px;
   opacity: 0;
   visibility: hidden;
   transition: opacity .4s ease;
}

.slider-people.is-show {
   height: auto;
   opacity: 1;
   visibility: visible;
}

@media screen and (max-width: 1023px) {
   button.remodal-close {
      width: 40px;
      height: 40px;
      top: 20px;
      right: 20px;
   }

   .modal-body .box-people {
      grid-template-columns: 1fr;
   }

   .modal-body .txt-name {
      font-size: 48px;
   }

   .modal-body .box-solution dl {
      grid-template-columns: 1fr;
      gap: 30px;
   }

   .modal-body .box-solution dl dt {
      padding-right: 0;
   }
}

@media screen and (max-width: 767px) {
   button.remodal-close {
      width: 32px;
      height: 32px;
      top: 10px;
      right: 10px;
   }

   .modal-body {
      padding: 0;
   }

   .slider-people .slide {
      padding: 50px 40px 0;
   }

   .modal-body .box-people {
      gap: 30px;
      padding-bottom: 50px;
   }

   .modal-body .box-people figure {
      width: 87%;
      margin: 0 auto;
   }

   .modal-body .box-people .equipment,
   .modal-body .box-people h3 {
      display: inline-block;
      vertical-align: middle;
   }

   .modal-body .box-people .equipment {
      padding-right: 10px;
   }

   .modal-body .box-people .position {
      padding-top: 15px;
   }

   .modal-body .txt-name {
      font-size: 6.7vw;
      line-height: 1;
      position: absolute;
      top: 54.6vw;
      right: 0;
      left: 0;
      padding-top: 0;
      white-space: nowrap;
   }

   .modal-body .box-solution {
      padding-bottom: 50px;
   }

   .modal-body .box-solution h3 {
      gap: 10px;
      margin-left: -20px;
      font-size: 20px;
   }

   .modal-body .box-solution h3:before {
      width: 20px;
   }

   .modal-body .box-solution dl {
      gap: 20px;
      padding-top: 30px;
   }

   .modal-body .box-solution dl dt {
      font-size: 30px;
      line-height: 50px;
   }

   .modal-body .box-solution dl dd {
      font-size: 16px;
      line-height: 32px;
   }

   .modal-body .slick-arrow {
      top: 31vw;
   }

   .modal-body .slick-prev {
      left: 5px;
      transform: rotate(90deg);
   }

   .modal-body .slick-next {
      right: 5px;
      transform: rotate(90deg);
   }
}

/* -- -- */

#movie {
   background-color: #000;
   padding: 120px 20px;
}

.movie-wrap {
   width: 100%;
   max-width: 640px;
   margin: 0 auto;
}

.movie-link {
   display: block;
   width: 100%;
   padding-top: 56.25%;
   position: relative;
}

#movie iframe {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
}

@media screen and (max-width: 767px) {
   #movie {
      padding: 0;
   }
}

/*=============================================
 * Post type
*=============================================*/
.wp-pagenavi {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 16px;
   margin-top: 100px;
   position: relative;
}

.wp-pagenavi .pages {
   display: none;
}

.wp-pagenavi span,
.wp-pagenavi a {
   display: block;
   border-bottom: 1px solid transparent;
}

.wp-pagenavi .previouspostslink {
   margin-right: 20px;
}

.wp-pagenavi .nextpostslink {
   margin-left: 20px;
}

.wp-pagenavi a:hover {
   border-bottom-color: #656565;
}

.wp-pagenavi .current {
   pointer-events: none;
   border-bottom-color: #656565;
}

@media screen and (max-width: 767px) {
   .wp-pagenavi {
      margin-top: 50px;
   }

   .wp-pagenavi a,
   .wp-pagenavi span {
      font-size: 16px;
   }
}

/* -- -- */
/* -- -- */
.news-list dl {
   display: grid;
   grid-template-columns: 100px 1fr;
   gap: 15px;
}

.news-list dl+dl {
   margin-top: 40px;
   padding-top: 25px;
   border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.news-list dl dt {
   color: #8c8c8c;
   font-weight: 500;
   font-size: 13px;
}

.news-list dl dd {
   color: #313333;
   font-weight: 500;
   font-size: 17px;
   line-height: 32px;
}

.news-list dl dd .ttl {
   display: block;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

.news-list dl dd .cat {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   min-width: 48px;
   background-color: #f6f6f6;
   border: 1px solid #000;
   font-size: 12px;
   line-height: 20px;
   border-radius: 2px;
   text-align: center;
   margin-top: 15px;
   padding: 0 10px;
}

@media screen and (max-width: 767px) {
   .news-list dl {
      grid-template-columns: 1fr;
      gap: 10px;
   }

   .news-list dl+dl {
      margin-top: 20px;
      padding-top: 20px;
   }
}

.event-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 80px;
}

.event-list .col {
   display: block;
}

.event-list .col.disable {
   pointer-events: none;
}

.event-list figure {
   width: 100%;
   padding-top: 100%;
   overflow: hidden;
   border-radius: 10px;
   position: relative;
}

.event-list figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.event-list .ttl {
   margin-top: 30px;
   line-height: 36px;
}

.event-list .ttl span {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

.event-list .more {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 212px;
   height: 58px;
   background-color: #000;
   color: #fff;
   font-weight: 500;
   font-size: 13px;
   line-height: 26px;
   letter-spacing: 0.05em;
   border-radius: 50px;
   margin-top: 30px;
}

@media screen and (max-width: 767px) {
   .event-list {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .event-list .ttl,
   .event-list .more {
      margin-top: 20px;
   }

   .event-list .more {
      width: 200px;
      height: 50px;
      margin-right: auto;
      margin-left: auto;
   }
}

.column-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 64px 32px;
}

.column-list a {
   display: block;
   position: relative;
}

.column-list figure {
   width: 100%;
   padding-top: 85%;
   position: relative;
   overflow: hidden;
   border-radius: 10px;
}

.column-list figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.column-list .ttl {
   font-weight: 500;
   line-height: 28px;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
   margin-top: 20px;
}

.column-list time {
   display: block;
   font-weight: 500;
   font-size: 11px;
   line-height: 20px;
   color: rgba(0, 0, 0, 0.4);
   padding: 20px 0 12px;
}

.column-list .more {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 90px;
   height: 28px;
   font-weight: 500;
   font-size: 10px;
   letter-spacing: 0.03em;
   line-height: 20px;
   border: 1px solid #000;
   border-radius: 50px;
   box-sizing: border-box;
   text-align: center;
   position: absolute;
   bottom: 0;
   right: 0;
}

@media screen and (max-width: 767px) {
   .column-list {
      grid-template-columns: repeat(2, 1fr);
      gap: 5vw;
      margin: 0 -5vw;
   }

   .column-list time {
      margin-top: 10px;
      padding: 2px 0;
   }

   .column-list .more {
      width: 80px;
      height: 24px;
   }
}

/*=============================================
 * NEWS
 *=============================================*/
.pt-news {
   padding: 42px 0 140px;
}

.pt-news .wrap {
   padding: 0 100px 100px;
}

.pt-news .wrap:before {
   content: '';
   width: 100%;
   background-color: #fff;
   border-radius: 20px;
   position: absolute;
   top: 30px;
   bottom: 0;
   left: 0;
}

.pt-news .wrap>* {
   position: relative;
}

.pt-news .news-list {
   padding-top: 100px;
}

@media screen and (max-width: 1023px) {
   .pt-news .wrap {
      padding: 0 50px 100px;
   }
}

@media screen and (max-width: 767px) {
   .pt-news {
      padding: 50px 20px;
   }

   .pt-news .wrap {
      padding: 0 20px 50px;
   }

   .pt-news .wrap:before {
      top: 20px;
   }

   .pt-news .news-list {
      padding-top: 30px;
   }
}

/*=============================================
 * COLUMN
 *=============================================*/
.pt-column {
   padding: 60px 0 140px;
}

.pt-column .column-list {
   padding-top: 60px;
}

@media screen and (max-width: 767px) {
   .pt-column {
      padding: 50px 0;
   }

   .pt-column .column-list {
      padding-top: 30px;
   }
}

/*=============================================
 * EVENT
 *=============================================*/
.pt-event {
   padding: 60px 0 140px;
}

.pt-event .event-list {
   padding-top: 60px;
}

@media screen and (max-width: 767px) {
   .pt-event {
      padding: 50px 0;
   }

   .pt-event .event-list {
      padding-top: 30px;
   }
}

/*=============================================
 * Post Detail
 *=============================================*/
.pt-detail {
   position: relative;
   padding: 42px 0 120px;
   color: #313333;
}

.pt-detail h2.h-45 {
   color: #000;
}

.pt-detail .wrap {
   padding: 0 100px;
}

.pt-detail .wrap:before {
   content: '';
   width: 100%;
   background-color: #fff;
   border-radius: 20px;
   position: absolute;
   top: 32px;
   bottom: 32px;
   left: 0;
}

.pt-detail .wrap>* {
   position: relative;
}

.pt-detail-meta {
   padding-top: 80px;
}

.pt-detail-thumb {
   padding-bottom: 70px;
}

.pt-detail-time {
   display: block;
   color: #b9b9b9;
   font-weight: 500;
   font-size: 11px;
   line-height: 22px;
   padding-top: 20px;
}

.pt-detail-cate {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 5px;
   padding-top: 40px;
}

.pt-detail-title {
   font-weight: 300;
}

.pt-detail-cate .item {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   min-width: 48px;
   font-size: 12px;
   line-height: 18px;
   border-radius: 2px;
   text-align: center;
   padding: 3px 9px;
   background-image: linear-gradient(to right, #00ffff, #0000ff);
   box-sizing: border-box;
   overflow: hidden;
   position: relative;
}

.pt-detail-cate .item:before {
   content: '';
   background-color: #fff;
   border-radius: 2px;
   position: absolute;
   top: 2px;
   right: 2px;
   bottom: 2px;
   left: 2px;
}

.pt-detail-cate .item .text {
   display: inline-block;
   background-image: linear-gradient(to right, #00ffff, #0000ff);
   background-clip: text;
   color: transparent;
   position: relative;
   z-index: 1;
}

.pt-detail-content {
   padding-top: 60px;
}

.pt-detail-content h2,
.pt-detail-content h3,
.pt-detail-content h4,
.pt-detail-content h5,
.pt-detail-content h6 {
   font-style: normal;
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: 0;
   margin: 60px 0 30px;
}

.pt-detail-content h2 {
   font-size: 24px;
}

.pt-detail-content h3 {
   font-size: 22px;
}

.pt-detail-content h4 {
   font-size: 20px;
}

.pt-detail-content h5,
.pt-detail-content h6 {
   font-size: 18px;
}

.pt-detail-content h1:first-child,
.pt-detail-content h2:first-child,
.pt-detail-content h3:first-child,
.pt-detail-content h4:first-child,
.pt-detail-content h5:first-child,
.pt-detail-content h6:first-child {
   margin-top: 0;
}

.pt-detail-content h2+h3,
.pt-detail-content h2+h4,
.pt-detail-content h3+h4 {
   margin-top: 0;
}

.pt-detail-content mark {
   background-color: #FFF6A8;
   color: #333;
}

.pt-detail-content strong {
   font-weight: 700;
}

.pt-detail-content a {
   text-decoration: underline;
}

.pt-detail-content a:hover {
   text-decoration: none;
}

.pt-detail-content hr {
   margin: 30px 0;
}

.pt-detail-button {
   padding-top: 145px;
}

.pt-detail-button a {
   background-color: #000;
   color: #fff;
   width: 308px;
   height: 65px;
   font-family: "Noto Sans JP", sans-serif;
   font-style: normal;
   font-weight: 300;
}

.pt-detail-button a:hover {
   background-color: #fff;
   color: #000;
}

@media screen and (max-width: 767px) {
   .pt-detail {
      padding: 50px 20px;
   }

   .pt-detail .wrap {
      padding: 0 20px;
   }

   .pt-detail .wrap:before {
      top: 20px;
   }

   .pt-detail-meta {
      padding-top: 40px;
   }

   .pt-detail-thumb {
      padding-bottom: 30px;
   }

   .pt-detail-cate {
      padding-top: 20px;
   }

   .pt-detail-time {
      padding-top: 10px;
   }

   .pt-detail-title {
      font-size: 22px;
      line-height: 1.5;
   }

   .pt-detail-content {
      text-align: justify;
      padding-top: 30px;
   }

   .pt-detail-content h2,
   .pt-detail-content h3,
   .pt-detail-content h4,
   .pt-detail-content h5,
   .pt-detail-content h6 {
      margin: 40px 0 20px;
   }

   .pt-detail-content h2 {
      font-size: 20px;
   }

   .pt-detail-content h3 {
      font-size: 18px;
   }

   .pt-detail-content h4 {
      font-size: 18px;
   }

   .pt-detail-content .wp-block-group-is-layout-flex {
      flex-direction: column;
   }

   .pt-detail-button {
      padding-top: 50px;
   }

   .pt-detail-button a {
      width: 80%;
   }
}

/* =============================================
 * contact
 *=============================================*/
.mailform .form-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px 40px;
}

.mailform .form-group .caption {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
}

.mailform .form-group .caption span {
   width: 35px;
   background-color: red;
   color: #fff;
   font-weight: 500;
   font-size: 12px;
   line-height: 20px;
   text-align: center;
}

.mailform .form-group .input {
   padding-top: 10px;
}

.mailform .form-group.full {
   padding-top: 30px;
}

.mailform .agreement-box {
   background-color: #f6f6f6;
   margin-top: 40px;
   padding: 20px;
   text-align: center;
}

.mailform .checkbox-group {
   padding-top: 30px;
   text-align: center;
}

.mailform .checkbox-group .wpcf7-checkbox {
   justify-content: center;
}

.mailform .submit-group {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   padding-top: 40px;
}

.mailform .submit-group input,
.mailform .submit-group a {
   display: block;
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   cursor: pointer;
}

.mailform .submit-group p {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
   background-color: #d6d6d6;
   color: #fff;
   width: 300px;
   height: 64px;
   box-sizing: border-box;
   font-weight: 700;
   font-size: 18px;
   line-height: 26px;
   text-align: center;
   transition: all 0.3s;
   position: relative;
}

.mailform .submit-group p:hover {
   background-color: #000;
}

.mailform .submit-group .btn-send {
   background-color: #000;
}

.mailform .submit-group .btn-send:hover {
   opacity: 0.7;
}

.mailform .submit-group .wpcf7-spinner {
   display: none;
}

.mailform.confirm .form-row .caption {
   padding: 0;
}

.mailform.thanks {
   text-align: center;
}

.mailform.thanks .txt p+p {
   padding-top: 30px;
}

.mailform.thanks .button {
   padding-top: 50px;
}

@media screen and (max-width: 767px) {
   .mailform .form-grid {
      grid-template-columns: 1fr;
   }

   .mailform .checkbox-group .wpcf7-checkbox {
      flex-direction: row;
   }

   .mailform .submit-group {
      flex-direction: column;
   }

   .mailform .submit-group p {
      width: 100%;
   }

   .mailform.thanks .txt {
      text-align: justify;
      font-size: 13px;
   }

   .mailform.thanks .txt p+p {
      padding-top: 20px;
   }

   .mailform.thanks .button {
      padding-top: 30px;
   }

   .mailform.thanks .button a {
      height: 80px;
      font-size: 18px;
   }
}