body.index {
  background-color: #eee;
}

body.index header {
  /* position: absolute; */
  top: 0;
  left: 0;

}

body.index header>div {
  background-color: unset;

}

body.index header .header-container {
  border-radius: 8px;
  background-color: #fffc;
  padding: 1rem 2rem;
  box-shadow: 0px 4px 4px #0002;
}

@media screen and (max-width:1040px) {
  body.index header>div {
    padding: 0;
  }

  body.index header .header-container {
    padding: 0.875rem 1.25rem;
    border-radius: 0;
  }

}

/* --------------- */
/* メインビジュアル */
/* --------------- */

.main-visual {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

/* 背景動画 */
.main-visual-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* 黒フィルター */
.main-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  /* ←ここで濃さ調整 */
  z-index: 1;
  pointer-events: none;
}

/* コンテンツを前面に */
.main-visual-content {
  position: relative;
  z-index: 1;
}

.main-visual-content {
  max-width: 1200px;
  width: 100%;
  height: 100%;
  align-content: center;
  position: relative;
  margin: 0 auto;
  text-align: center;
  text-align: -webkit-center;
}

.main-visual-content>div {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 3rem 2rem;
  display: flex;
  justify-content: end;
}

.member-login {
  display: inline-flex;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.5s 0s ease;
}

.member-login:hover {
  transform: translateY(-.25rem);
  box-shadow: 0 4px 4px #0003;
}

.member-login div {
  padding: 0 32px;
  align-content: center;
}

.member-login div:nth-child(1) {
  color: #000;
  font-size: 12px;
  background-color: #fff;
  text-align: center;
}

.member-login div:nth-child(2) {
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  background-color: #e00;
}

@media screen and (max-width:768px) {
  .main-visual {
    margin-top: 68px;
    height: 32rem;
  }

  .main-visual-content>div {
    padding: 2rem 1.5rem;
  }

  .main-visual img {
    width: 80%;
    transform: translateY(-4rem); /* 一時的な調整 */
  }

  .member-login {
    flex-direction: column;
    height: unset;
    width: 180px;
  }

  .member-login div {
    padding: unset;
    padding: 0.75rem;
  }

  .member-login div:nth-child(2) {
    text-align: center;
    font-size: 18px;
  }
}

@media screen and (max-width:480px) {
  .main-visual {
    height: 24rem;
  }
}

/* ---------------- */
/* アバウトメッセージ */
/* ---------------- */

.about-message {
  width: 100%;
  height: 100svh;
  background-color: #999;
}

.about-message>div {
  padding: 3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  justify-content: center;
}

.about-message-content {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.6;
}

@media screen and (max-width:1024px) {
  .about-message-content {
    font-size: 1.25rem;
  }
}

@media screen and (max-width:768px) {


  .about-message>div {
    padding: 4rem 1.25rem;
    height: 100%;
    gap: 2rem;
    justify-content: end;
  }

  .about-message img {
    margin: 0 auto;
  }

  .about-message-content {
    font-size: 0.875rem;
  }
}

/* --------- */
/* カンパニー */
/* --------- */

div.company__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  flex: 1;
}

div.company__item {
  width: 100%;
  display: flex;
  color: #fff;
}

.company__item--reverse {
  flex-direction: row-reverse;
}

div.company__item {
  aspect-ratio: 6 / 2;
}

.company__link::after {
  content: ">";
  display: inline-block;
  transform: scale(1.25) scaleX(0.5);
  margin-left: .5rem;
}

div.company__item-ceo {
  position: relative;
  z-index: 1;
}

div.company__item-ceo img {
  width: 100%;
}

.company__item-ceo__inner {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 4rem;
  width: 100%;
  display: grid;
  grid-column-gap: 0px;
  grid-row-gap: 4rem;
  color: #fff;
}

.company__item-ceo__catch {
  grid-area: 1 / 1 / 2 / 3;
  max-width: 580px;
  width: 62%;
}

.company__item-ceo__message {
  grid-area: 2 / 1 / 3 / 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.company__item-ceo__link {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  align-items: end;
  justify-content: right;
}

.company__item-ceo__link::after {
  content: ">";
  display: inline-block;
  transform: scaleX(0.75);
  margin-left: .25rem;
}

.company__item-ceo__message div {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

}

.company__item-ceo__message div span {
  font-size: 3rem;
  line-height: 1;
  font-weight: bold;
}

.company__item-ceo__message div p {
  font-size: 1.5rem;
  line-height: 1;
}

.company__item-ceo__link a {
  color: #fff;
}


div.company__media {
  flex: 1;
}

div.company__media img {
  aspect-ratio: 6 / 5;
  width: 100%;
}

div.company__content {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 1rem;
  padding: 2rem;
  background-color: #111;
}

div.section__mini-title {
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 1rem;
}

div.section__mini-title span {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1;
}

div.section__mini-title h3 {
  line-height: 1;
}

div.company__content a {
  color: #fff;
}

@media screen and (max-width : 1200px) {
  div.section__mini-title span {
    font-size: 3.5vw;
  }

  div.section__mini-title h3 {
    font-size: 2vw;
  }

  .company__content p {
    font-size: 0.875rem;
  }
}

@media screen and (max-width : 1000px) {
  .company__item-ceo__inner {
    grid-row-gap: 1.75rem;
    padding: 2.5rem;
  }

  .company__item-ceo__catch {
    width: 57%;
  }

  .company__item-ceo__message {
    gap: 1.25rem;
  }

  .company__item-ceo__message div {
    gap: 1.25rem;
  }
}

@media screen and (max-width : 768px) {
  div.company__content {
    width: 100%;
    padding: 1.5rem;
  }

  div.company__content>div {
    gap: .75rem;
  }

  div.company__item {
    flex-direction: column;
  }

  div.section__mini-title span {
    font-size: 1.75rem;
  }

  div.section__mini-title h3 {
    font-size: 0.75rem;
  }

  /* .company__item-ceo {
    margin-left: -84px;
  } */

  .company__item-ceo__inner {
    padding: 2rem 1.5rem;
  }

  .company__item-ceo__catch {
    grid-area: 1 / 1 / 2 / 2;
    width: 75%;
  }

  .company__item-ceo__message {
    grid-area: 2 / 1 / 3 / 2;
    gap: 1.5rem;
  }

  .company__item-ceo__message div {
    gap: 1rem;
  }

  .company__item-ceo__link {
    grid-area: 3 / 1 / 4 / 2;
  }

  .company__item-ceo__message div span {
    font-size: 2.5rem;
  }

  .company__item-ceo__message div p {
    font-size: 1.25rem;
  }

  .company__item-ceo__message>p {
    font-size: 0.875rem;
  }
}

/* ----------- */
/* SERVICE */
/* ----------- */
.service {
  overflow: clip;
}

div.service__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6rem;
  flex: 1;
}

div.service__list>div {
  margin-right: calc(150px);
}

.media__item {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.media__banner {
  /* margin-left: calc(-102px + -48px); */
  margin-bottom: 3rem;
}

/* .media__banner .swiper-wrapper{
  max-width:1136px;
} */

.media__banner img {
  width: 100%;
}

.media__thumbnail {
  display: flex;
  flex-direction: row;
  gap: 0;
  /* padding: 0px 4rem; */
  margin: 0;
  box-shadow: 0 0 8px #0003;
  border-radius: 8px;
}

.media__thumbnail div {
  /* flex: 1; */
  align-content: center;
  text-align: center;
}

.media__thumbnail .swiper-slide {
  width: 20%;
}

.media_btn {
  position: relative;
}

.media_btn:hover:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.05);
  /* ←ここで濃さ調整 */
  z-index: 1;
  pointer-events: none;
}

/* @media screen and (max-height : 700px) {
  .media__banner {
    margin-left: calc(50% - 50vw);
  }
} */

@media screen and (max-width : 1200px) {
  .service__comment {
    padding-right: 1.5rem;
  }
}

@media screen and (max-width : 1150px) {
  .media__thumbnail {
    margin: 0;
    border-radius: 8px 0px 0px 8px;
  }
}

@media screen and (max-width : 950px) {

  .media__thumbnail .swiper-slide {
    width: 27.5%;
  }
}

@media screen and (max-width : 768px) {

  div.service__list {
    width: calc(100% - 84px);
  }

  div.service__list>div {
    margin-right: unset;
  }

  .media__banner {
    margin-left: -84px;
  }
}

@media screen and (max-width : 700px) {

  .media__thumbnail .swiper-slide {
    width: 45%;
  }
}

/* @media screen and (max-width : 450px) {

  .media__thumbnail .swiper-slide {
    width: 100%;
  }
} */

/* ----------- */
/* MOBILITY */
/* ----------- */

.mobility__item {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.mobility__content {
  display: flex;
  flex-direction: row;
  gap: 0;
}

.mobility__content>div {
  flex: 1;
}

.mobility__service-number {
  display: block;
  font-size: 0.75rem;
}

.mobility__service-title {
  font-size: 1.125rem;
  font-weight: bold;
}

.mobility__service-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mobility__nav {
  display: flex;
  flex-direction: column;
  gap: 0rem;
  /* justify-content: center; */
  margin-top: 4rem;
}

.mobility__cards>a {
  padding: 2rem 2rem 3rem;
  background-color: #aaa;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  color: #fff;
}

.more {
  margin: 0 0 0 auto;
}



.more span::after {
  content: ">";
  display: inline-block;
  transform: scale(1.5) scaleX(0.5);
  margin-left: .5rem;
}

/* タブ */

.mobility__service-link {
  color: #000;
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  background: #eee;
  transition: all 0.5s 0s ease;
}


@media screen and (min-width : 769px) {
  .mobility__service-link:hover {
    background: #ddd;
    padding: 10px 20px 10px 25px;
  }
}

.mobility__service-link.active {
  color: #fff;
  background-color: #333;
  display: flex;
  flex-direction: row;
  gap: .75rem;
  align-items: center;
}

.mobility__service-link.active::before {
  content: '▶';
  transform: scaleX(50%);
  font-size: 1.125rem;
}

/* コンテンツ */
.mobility__cards>a.content {
  display: none;
}

.mobility__cards>a.content.active {
  display: flex;
}

@media screen and (max-width : 768px) {
  .mobility__nav {
    /* display: none; */
    flex-direction: row;
    margin-top: 0;
  }

  .mobility__cards>a {
    padding: 0;
    gap: 0;
  }

  .mobility__service-text {
    padding: 1.25rem;
    ;
  }

  .mobility__service-text p {
    font-size: .875rem;
  }

  .more {
    text-align: right;
    font-size: .875rem;
  }

  .mobility__content {
    flex-direction: column;
  }

  .mobility__service-link .mobility__service-title {
    display: none;
  }

  .mobility__service-link.active {
    flex-direction: column;
    gap: 0;
  }

  .mobility__service-link {
    padding: 8px 16px;
    align-content: end;
    text-align: center;
    flex: 1;
  }

  .mobility__service-number {
    font-size: 10px;
  }

  .mobility__service-link.active::before {
    transform: rotate(90deg) scaleX(50%);
    line-height: 1;
  }
}

/* ----------- */
/* SOLUTION */
/* ----------- */

.solution__item {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.solution__content {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.solution__content>a {
  width: 50%;
}

.solution__card {
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 4 / 3;
  display: flex;
  justify-content: left;
  align-items: end;
  padding: 2rem;
  position: relative;
  filter: grayscale(100%);
  transition: all 0.5s 0s ease;
}

.solution__card.card01 {
  background-image: url(https://corp.ctn-net.jp/wp-content/themes/ctncoporation_top/assets-new/img/solution_support.webp);
}

.solution__card.card02 {
  background-image: url(https://corp.ctn-net.jp/wp-content/themes/ctncoporation_top/assets-new/img/solution_web.webp);
}

.solution__card.card03 {
  background-image: url(https://corp.ctn-net.jp/wp-content/themes/ctncoporation_top/assets-new/img/solution_contents.webp);
}

.solution__card.card04 {
  background-image: url(https://corp.ctn-net.jp/wp-content/themes/ctncoporation_top/assets-new/img/solution_ad.webp);
}

.solution__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  /* ← 透明度ここで調整 */
  pointer-events: none;
  z-index: 1;
  transition: all 0.5s 0s ease;
}

.solution__card:hover {
  filter: grayscale(0%);
}

.solution__card:hover::before {
  background: rgba(0, 0, 0, 0.1);
}

.solution__card div {
  color: #fff;
  z-index: 1;
}

.solution__card h4 {
  font-size: 1.25rem;
}

@media screen and (max-width : 768px) {
  .solution__content {
    flex-wrap: unset;
    flex-direction: column;
  }

  .solution__content>a {
    width: 100%;
  }

  .solution__card {
    padding: 1.5rem;
  }

  .solution__card span {
    font-size: 14px;
  }

  .solution__card h4 {
    font-size: 18px;
  }
}

/* ----------- */
/* NEWS */
/* ----------- */


/* ----------- */
/* PRESS RELEASE */
/* ----------- */
.news {
  overflow: hidden;
}

.news__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.press-release__item {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.swiper.press-release-swiper {
  overflow: unset;
}

.press-release-swiper .swiper-slide {
  width: 395px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.press-release__image {
  overflow: hidden;
  border-radius: .5rem;
}

.press-release__image img {
  transition: all 0.25s 0s ease;
}

.press-release__image:hover img {
  transform: scale(1.125);
}

.infomation__item {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.infomation__info {
  display: flex;
  flex: 1;
  gap: 2rem;
}

/* ----------- */
/* INFOMATION */
/* ----------- */
.infomation__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

a.infomation__card {
  padding: 2rem 3rem;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  transition: all 0.25s 0s ease;
}

.infomation__title {
  flex: 1;
}

.infomation__read-more {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.infomation__read-more::after {
  content: "";
  width: 8px;
  height: 8px;
  display: block;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
  transition: all 0.25s 0s ease;
}

a.infomation__card:not(:last-child) {
  border-bottom: 1px solid #000;
}

a.infomation__card:hover {
  background-color: #333;
  color: #fff;
}

a.infomation__card:hover .infomation__read-more::after {
  transform: rotate(45deg) translate(0.125rem, -0.125rem);
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

@media screen and (max-width : 768px) {

  .infomation__info {
    gap: .25rem;
    flex-direction: column;
  }

  a.infomation__card {
    padding: 1rem 1rem;
    gap: 1rem;
    flex-direction: column;
  }

  .infomation__read-more {
    font-weight: bold;
  }
}

/* RECRUIT */
.recruit {
  overflow: clip;
}

.recruit .container {
  /* overflow: hidden; */
}

div.recruit__list {
  width: calc(100% - 184px);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  flex: 1;
}

.recruit__item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}

.recruit__text1,
.recruit__text2 {
  font-size: clamp(28px, 8vw, 96px);
  font-weight: bold;
  line-height: 1.25;
  z-index: 2;
  color: #fff;
  mix-blend-mode: difference;
}

.recruit__text1 {
  text-align: right;
}

.recruit__members {
  overflow: visible;
  width: 100%;
}

.recruit__members .swiper-wrapper {
  align-items: flex-start;
}

.member {
  width: 100%;
  /* aspect-ratio: 7 / 16; */
  overflow: hidden;
}

.member img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 高さズラし */
.member:nth-child(1) {
  transform: translateY(-6rem);
}

.member:nth-child(2) {
  transform: translateY(6rem);
}

.member:nth-child(3) {
  transform: translateY(0);
}

.member:nth-child(4) {
  transform: translateY(3rem);
}

.recruit-button-prev,
.recruit-button-next {
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 2rem;
  background-color: #000;
  align-content: center;
  text-align: center;
}

.recruit-button-prev:after,
.recruit-button-next:after {
  color: #fff;
  font-size: 2rem;
  display: block;
}

.recruit-button-prev:after {
  transform: translateX(-.125rem);
}

.recruit-button-next:after {
  transform: translateX(.125rem);
}

.recruit-pagination {
  display: none;
  transform: translateY(2rem);
}
.recruit-pagination .swiper-pagination-bullet-active{
  background: #E00;
}

@media screen and (max-width : 1260px) {
  .recruit__members {
    gap: 3vw;
  }
}

@media screen and (max-width : 768px) {

  div.recruit__list {
    width: calc(100% - 84px);
  }

  .recruit__text1 {
    font-size: 7vw;
  }

  .recruit__members {
    gap: .625rem;

  }

  .member:nth-child(1),
  .member:nth-child(2),
  .member:nth-child(4) {
    transform: translateY(0);
  }

  .recruit__text2 {
    font-size: 7vw;
    padding-left: 1.25rem;
  }

  .read-more::before {
    border-bottom: 2vw solid #fff5;
    border-right: 2vw solid #fff5;
  }

  .recruit-button-prev,
  .recruit-button-next {
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
  }

  .recruit-button-prev:after,
  .recruit-button-next:after {
    font-size: 1rem;
  }

  .recruit-pagination {
    display: block;
  }
}

/* ----------- */
/* content */
/* ----------- */

div.content__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.content__item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
}

.section__title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.section__title-group span {
  font-weight: bold;
}

.section>div {
  display: flex;
  gap: 3rem;
}

.contact__description {
  text-align: center;
}

.contact-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.contact-btns a {
  display: block;
  width: 400px;
  height: 64px;
  align-content: center;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  ;
}

.contact-btns a.btn-a {
  background-color: #000;
  color: #fff;
  transition: all 0.25s 0s ease;
}

.contact-btns a.btn-b {
  background-color: #fff;
  color: #000;
  transition: all 0.25s 0s ease;
}

.contact-btns a.btn-a:hover {
  background-color: #333;
}

.contact-btns a.btn-b:hover {
  background-color: #eee;
}

@media screen and (max-width:1200px) {
  .section.about-message>div {
    width: 50%;
    margin: 0;
  }
}


@media screen and (max-width:768px) {
  .section.about-message>div {
    width: 100%;
  }

  .section>div {
    gap: 1.5rem;
  }

  section.section .content__item h2.section__title {
    font-size: 3rem;
  }

  .contact__description br {
    display: none;
  }

  .contact-btns a {
    width: 100%;
    font-size: 18px;
  }

}

.mediaBanner-button {
  display: none;
  gap: 1rem;
}

.mediaBanner-button-prev,
.mediaBanner-button-next {
  width: 3rem;
  height: 3rem;
  border: 1px solid #000;
  border-radius: 4px;
  margin-top: 1.5rem;
  position: unset;
  transition: all 0.25s 0s ease;
}

.mediaBanner-button-prev:after,
.mediaBanner-button-next:after {
  font-size: 1.5rem;
  color: #000;
  font-weight: bold;
  transition: all 0.25s 0s ease;
}

.mediaBanner-button-prev:hover,
.mediaBanner-button-next:hover {
  background-color: #000;
}

.mediaBanner-button-prev:hover:after,
.mediaBanner-button-next:hover:after {
  font-size: 1.5rem;
  color: #fff;
}

.press-release-button {
  display: flex;
  gap: 1rem;
}

.press-release-button-prev,
.press-release-button-next {
  width: 3rem;
  height: 3rem;
  border: 1px solid #000;
  border-radius: 4px;
  margin-top: 0;
  position: unset;
  transition: all 0.25s 0s ease;
}

.press-release-button-prev:after,
.press-release-button-next:after {
  font-size: 1.5rem;
  color: #000;
  font-weight: bold;
  transition: all 0.25s 0s ease;
}

.press-release-button-prev:hover,
.press-release-button-next:hover {
  background-color: #000;
}

.press-release-button-prev:hover:after,
.press-release-button-next:hover:after {
  font-size: 1.5rem;
  color: #fff;
}

.swiper-slide.member {
  position: relative;
}

.member span {
  position: absolute;
  background-color: #000;
  color: #fff;
  top: 0;
  right: 0;
  padding: 1rem .5rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
  font-size: 1.25rem;
  letter-spacing: 1px;
}

@media screen and (max-width : 950px) {
  .mediaBanner-button {
    display: flex;
  }
}

.grecaptcha-badge {
  z-index: 9;
}

.swiper-slide.member {
  opacity: 0.25;
  transition: opacity 0.5s 0s ease;
}

.swiper-slide.member.swiper-slide-active,
.swiper-slide.member.swiper-slide-next {
  opacity: 1;
}

@media screen and (min-width : 769px) {
  .swiper-slide.member.swiper-slide-next+.swiper-slide.member {
    opacity: 1;
  }
}

@media screen and (max-width : 768px) {

  .member span {
    font-size: 1.125rem;
  }
}

/* 左側 */
.section__header {
  position: sticky;
  top: 128px;
  /* 上からの余白 */
  align-self: flex-start;
  z-index: 1;
}

@media screen and (max-width : 768px) {

  .section__header {
    top: 68px;
  }
}

/* 右側 */
/* .section__content {
    flex: 1;
} */