@charset "UTF-8";

/* =======================================================
   mv
======================================================== */
.mv {
  position: relative;
}
.mv-image {
  margin-left: auto;
}
.mv-image,
.swiper {
  height: calc(100vh - 161px);
  width: 81.25vw;
}
/*************************/
@media screen and (max-width: 599px) {
  .mv-image,
  .swiper {
    width: 100%;
  }
}
/*************************/
.mv-catch {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin-left: clamp(2vw, 3.333vw, 40px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  display: none;
}

.mv-catch span {
  position: relative;
  align-self: flex-start;
}
.mv-catch .bg-slide {
  padding: 10px 20px 10px 0;
}
.mv-catch .bg-slide:not(last-child) {
  margin-bottom: 10px;
}
/*************************/
@media screen and (max-width: 599px) {
  .mv-catch {
    margin-left: 0;
  }
  .mv-catch > .bg-slide {
    padding-left: 2vw;
  }
  .mv-catch > .bg-slide:not(last-child) {
    margin-bottom: 0px;
  }
}
/*************************/

.mv-catch span {
  line-height: 1.4;
  display: inline-block;
}
.mv-catch .word.start {
  animation: text-slide 0.5s forwards ease-in-out;
}
.mv-catch .word {
  clip-path: inset(0 100% 0 0);
}
/***********/
@keyframes text-slide {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0);
  }
}
/***********/

.mv-catch .bg-slide.move::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.6;
  transform: translateX(-100%);
  animation: bg-slide 0.5s forwards ease-in-out;
}
/***********/
@keyframes bg-slide {
  0% {
    transform: translateX(-100%, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
/***********/

.mv-catch .en {
  font-family: var(--Barlow);
  font-weight: 700;
  font-size: clamp(2.8rem, 4.427vw, 3.8rem);
  line-height: 1.2;
  display: inline-block;
  max-width: 100%;
}
.mv-catch .en span:not(:last-child) {
  padding-right: 10px;
}
.mv-catch .ja {
  font-size: clamp(2rem, 3.125vw, 2.4rem);
}
.mv-catch .text {
  font-size: clamp(1.4rem, 2.344vw, 1.8rem);
}

/* =======================================================
   top-info
======================================================== */

.top-info {
  margin-left: auto;
  transition: all 0.3s;
}
/*************************/
@media screen and (max-width: 1333px) {
  .top-info {
    width: 100%;
  }
}
/*************************/
@media screen and (min-width: 600px) {
  .top-info {
    width: clamp(50%, 840px, 100%);
    margin-left: auto;
    transition: all 0.3s;
  }
  .top-info__inner {
    display: flex;
  }
}
/*************************/
/*======== top-info__head ==========================*/
.top-info__head {
  background: var(--Black);
  padding: 10px;
  width: 100%;
  display: block;
  text-align: center;
}
.top-info__head span {
  color: #fff;
  font-family: Barlow;
  font-weight: 600;
  display: inline-block;
  letter-spacing: 0.5rem;
  line-height: 1;
}
/*************************/
@media screen and (min-width: 600px) {
  .top-info__head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    padding: 5px;
  }
  .top-info__head span {
    transform: rotate(-90deg);
  }
}
/*************************/

/*======== top-info__list ==========================*/
.top-info__item {
  border-bottom: 1px solid var(--Gray3);
}
.top-info__item a {
  display: flex;
  align-items: center;
  color: var(--Black);
  padding: 16px 20px;
  position: relative;
}
.top-info__item a::after {
  font-family: webfont;
  font-size: 1.6rem;
  content: '\f105';
  display: inline-block;
  margin-left: auto;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.top-info__item a:hover {
  background: var(--Gray2);
}

.top-info__item .date {
  font-family: var(--Barlow);
  font-size: 1.6rem;
  margin-right: clamp(30px, 3.571vw, 60px);
}
.top-info__item .title {
  margin-right: 20px;
}
.top-info__item.more a {
  text-align: right;
}
.top-info__item.more span {
  margin-right: 20px;
  flex-grow: 2;
}
/*************************/
@media screen and (min-width: 600px) {
  .top-info__list {
    width: calc(100% - 70px);
  }
}
/*************************/
@media screen and (max-width: 499px) {
  .top-info__item a {
    flex-wrap: wrap;
  }
  .top-info__item .date {
    width: 100%;
    color: var(--Gray3);
  }
}
/*************************/

/* =======================================================
   concept
======================================================== */
.concept {
  display: flex;
  justify-content: space-between;
}
.concept__item {
  width: calc(100% / 3);
  display: flex;
  flex-direction: column;
}
.concept__item:not(:last-child) {
  margin-right: 30px;
}
.concept__item .image-box {
  margin-bottom: clamp(10px, 1.471vw, 20px); /*1360*/
}
.concept__item .text-box h3 {
  font-size: 1.8rem;
  text-align: center;
  font-weight: 500;
  margin-bottom: clamp(10px, 1.471vw, 20px); /*1360*/
}
/*************************/
@media screen and (max-width: 991px) {
  .concept {
    flex-direction: column;
  }
  .concept__item {
    flex-direction: row;
    width: 100%;
  }
  .concept__item:not(:last-child) {
    margin-right: 0;
  }
  .concept__item .image-box {
    width: 40%;
    margin-bottom: 30px;
  }
  .concept__item .text-box {
    width: 60%;
    padding-left: 30px;
  }
  .concept__item .text-box h3 {
    text-align: left;
    border-bottom: 1px solid var(--Gray2);
    padding-bottom: 5px;
  }
}
/*************************/
@media screen and (max-width: 599px) {
  .concept__item {
    flex-direction: column;
  }
  .concept__item .image-box,
  .concept__item .text-box {
    width: 100%;
  }
  .concept__item .image-box {
    margin-bottom: 20px;
  }
  .concept__item .text-box {
    padding-left: 0;
    margin-bottom: 40px;
  }
}
/*************************/

/* =======================================================
   headbg
======================================================== */
[class*='headbg'] {
  position: relative;
  padding-top: clamp(10vh, 36.327vw, 360px);
  /* z-index: -1; */
}
[class*='headbg']::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(10vh, 36.327vw, 360px);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
}
.headbg01::after {
  background-image: url(../images/bg/headbg01.jpg);
  background-position: 50% 80%;
}
.headbg02::after {
  background-image: url(../images/bg/headbg04.jpg);
  background-position: 50% 80%;
}
.headbg03::after {
  background-image: url(../images/bg/headbg05.jpg?260105);
  background-position: 50% 80%;
}
.headbg04::after {
  background-image: url(../images/bg/headbg06.jpg?2601052);
  background-position: 50% 80%;
}

/* =======================================================
   cts-t1
======================================================== */
.cts-t1 {
  position: relative;
  display: flex;
}
.cts-t1 > div {
  width: 50%;
  background: #fff;
}

.cts-t1.t-company .cts-left {
  margin-top: clamp(-100px, -10.091vw, -50px);
}
.cts-t1 .mt-in {
  margin-top: clamp(-100px, -10.091vw, -50px);
  position: relative;
  z-index: 3;
  left: 1px;
}
.cts-t1 .cts-left.mt-in {
  left: -1px;
}
.cts-t1 .box-wrap {
  padding: 40px clamp(10px,2.941vw,40px) 0; /*1360*/
}
.cts-t1 .image-box {
  margin-top: clamp(20px,2.941vw,40px); /*1360*/
}
/*************************/
@media screen and (min-width: 992px) {
  .cts-t1 .cts-left {
    padding-left: calc((100% - 1280px) / 2);
  }
  .cts-t1 .cts-right {
    padding-right: calc((100% - 1280px) / 2);
  }
}
/*************************/
@media screen and (max-width: 991px) {
  .cts-t1 {
    flex-direction: column;
  }
  .cts-t1 > div {
    margin-left: clamp(10px, 2.941vw, 40px); /*1360*/
    margin-right: clamp(10px, 2.941vw, 40px); /*1360*/
    width: calc(100% - calc(2.941vw * 2));
  }
}
/*************************/

/*======== .t-predge,.t-details,.t-advantage ==========================*/
.t-details .text-box p {
  margin-bottom: 30px;
}
.t-details .btn.dl {
  text-align: center;
}
/*************************/
@media screen and (max-width: 991px) {
  .t-predge .image-box,
  .t-advantage .image-box {
    display: none;
  }
  .t-advantage,
  .t-details {
    margin-top: clamp(60px, 10.091vw, 100px);
    position: relative;
    padding-top: clamp(10vh, 36.327vw, 360px);
  }

  .t-advantage__inner,
  .t-details__inner {
    z-index: 1;
    position: relative;
    background: #fff;
    margin-top: clamp(-100px, -10.091vw, -50px);
  }
  .t-advantage::after,
  .t-details::after {
    content: '';
    display: block;
    position: absolute;
    top: 0px;
    left: clamp(-40px, -2.941vw, -10px);
    width: 110%;
    height: clamp(10vh, 36.327vw, 360px);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
  }
  .t-advantage::after {
    background-image: url(../images/bg/headbg02.jpg);
    background-position: 50% 80%;
  }
  .t-details::after {
    background-image: url(../images/bg/headbg03.jpg);
    background-position: 50% 100%;
  }
}
/*************************/

/*======== head-text ==========================*/
.head-text {
  margin-bottom: 30px;
}
/*************************/
@media screen and (max-width: 991px) {
  .t-details .head-text {
    margin-top: 0;
  }
}
/*************************/
.head-text span {
  display: inline-block;
  vertical-align: text-bottom;
}
.head-text .en {
  font-family: var(--Barlow);
  font-weight: 700;
  font-size: 2.4rem;
  margin-right: 30px;
  line-height: 1;
}
.head-text .ja {
  font-size: 1.4rem;
  padding-top: 1px;
}
/*************************/
@media screen and (max-width: 599px)
{
  .head-text {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .head-text .en {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
/*************************/

/*======== btn dl ==========================*/
.btn.dl a {
  display: inline-block;
}
.btn.dl a i {
  margin-left: 30px;
}
.btn.dl a i::before {
  color: #fff;
  font-size: 1.2rem;
}
.btn.dl a:hover i::before {
  color: var(--Black);
}

/*======== dl-list ==========================*/
.dl-list dt {
  color: var(--Blue2);
  font-weight: 600;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--Black);
  padding-bottom: 5px;
}
.dl-list dd:not(:last-of-type) {
  margin-bottom: 40px;
}

/* =======================================================
   t-list
======================================================== */
.t-list {
  padding-top: 60px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 60px 60px;
  position: relative;
  padding-bottom: clamp(80px,11.765vw,160px); /*1360*/;
}
/*************************/
@media screen and (min-width: 992px)
{
.t-list::after {
  content:'';
  display: block;
  width: 0.5px;
  height: calc(100% + 200px);
  position: absolute;
  /* background: var(--Black); */
  top: -200px;
  left: 50%;
  border-left: thin solid;
  z-index: -2;
}
}
/*************************/


.t-list__item {
  display: flex;
}
.t-list__item .image-box {
  width: 30%;
  min-width: 168px;
}
.t-list__item .text-box {
  width: 70%;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
}

.t-list .head03 {
  border-bottom: 1px solid var(--Black);
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.t-list__item .text-box p {
  margin-bottom: 30px;
}
.t-list__item .text-box .btn.more {
  margin-top: auto;
}
.t-list .btn a {
  font-family: var(--Barlow);
  font-size: 1.2rem;
  padding: 6px 20px;
  margin-left: auto;
}
/*************************/
@media screen and (max-width: 991px)
{
  .t-list {
    display: block;
  }
  .t-list__item + .t-list__item {
    margin-top: clamp(40px,6.048vw,60px);
  }
}
/*************************/
@media screen and (max-width: 499px)
{
  .t-list__item {
    flex-direction: column;
  }
  .t-list__item .image-box,
  .t-list__item .text-box {
    width: 100%;
  }
  .t-list__item .text-box {
    padding-left: 0;
    margin-top: 20px;
  }
}
/*************************/