/* --- TOPページ: ファーストビュー --- */
.first-view {
  width: 100%;
  overflow: hidden;
}

.fv-container {
  position: relative;
  width: 100%;
    max-width: 100%;
    height: 980px;
    background-color: #fff;
}



.first-view-bg-01 {
  width: 100%;
    position: absolute;
    height: 100vh;
    z-index: 1;
}

.first-view-bg-01::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  background: url('../../assets/images/front/fv-bg-right.png');
  width: 591px;
  height: 1143px;
}


.first-view-bg-02 {
  width: 100%;
    position: absolute;
    height: 100vh;
    z-index: 0;
}

.first-view-bg-02::after {
  content: '';
  position: absolute;
  top: 857px;
  left: 0;
  background: url('../../assets/images/front/fv-bg-left.png');
  width: 591px;
  height: 1143px;
}



.fv-image-area {
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
    height: 60%;
    z-index:10;
    background-image: url('../../assets/images/front/fv-background.png');
    background-size: cover;
    background-position: center top;
    /* 左上(0 0) → 右上(100% 0) → 右下(100% 100%) → 左下ちょい右(15% 100%) → 左下ちょい上(0 85%) */
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 0 85%); */

}

.fv-image-text {
  position: absolute;
  bottom: 20px;           
  left: 40px;    
  color: #fff;

}

.fv-image-text h1 {
  font-size: 52px;
  letter-spacing: 35px;
}

h1.site-logo {
  position: absolute;
  top: 20px;
  left: 85px;

}

.site-logo a {
  position: relative;
  display: inline-block;
}

.site-logo .logo-default,
.site-logo .logo-scrolled {
  transition: opacity 0.4s ease-in-out;
  vertical-align: bottom; 
}

.site-logo .logo-scrolled {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.site-header.is-scrolled .site-logo .logo-default {
  opacity: 0;
}

.site-header.is-scrolled .site-logo .logo-scrolled {
  opacity: 1;
}

.site-logo .logo-sp-white {
  display: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.3s ease;
}

.site-logo .logo-sp-default {
  transition: opacity 0.3s ease;
}

.site-header.is-open .site-logo .logo-sp-default {
  opacity: 0;
}

.site-header.is-open .site-logo .logo-sp-white {
  display: block;
  opacity: 1;
  top: 15px;
}

@media screen and (min-width: 769px) {
  .site-logo .logo-sp-white {
     display: none !important;
  }
}

.fv-text-area {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80%;
  height: 50%;
  z-index: 1;
  background-color: #0B1E3D;
  color: #fff;
  padding: 145px 5% 65px 10%;
}

.fv-text-area p {
  max-width: 846px;
  line-height: 2.0;
  margin-bottom: 65px;
  font-size: 1rem;
}

.fv-button-area {
    justify-content: flex-start;
}


@media screen and (max-width: 768px) {
  .fv-image-area {
    width: 90%;    
    height: 60%;
  }
  .fv-image-text {
    bottom: 40px;    
    left: -20px;
  }
  
  .fv-image-text h1 {
    font-size: 32px;
    letter-spacing: 25px;
  }

  .fv-text-area {
    width: 100%;
  }

  .fv-button-area {
    margin: 0 auto;
  }

  .first-view-bg-02::after {
    display: none;
  }
}


@media screen and (max-width: 786px) {
  h1.site-logo {
    top: 0px;
    left: 30px;
  }
}

@media screen and (max-width: 425px) {
  .fv-image-text {
    bottom: 20px;
  }
  .fv-image-text h1 {
    font-size: 28px;
    letter-spacing: 15px;
  }
  .fv-text-area {
    padding: 125px 3% 0px 5%;
  }

}




/* --- TOPページ: 各セクション共通 --- */
.front-page section {
  padding: 0px 0;
}

.front-page section h2 {
  font-size: 40px;
  text-align: center;
  padding-top: 80px;
  letter-spacing: 20px;
}



@media screen and (max-width: 768px) {
  .front-page section h2 {
    font-size: 26px;    
    padding-top: 50px;

  }
}



/* --- TOPページ: 会社概要 --- */

.front-page section.company-overview {
  padding-bottom: 255px;
}

.company-overview .overview-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 40px;
  background-image: url('../../assets/images/front/overview-background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 55px 0;

}

.company-overview .overview-content .deco-img-left {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}
.company-overview .overview-content .deco-img-right {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}

.company-overview .overview-content .text-content {
  max-width: 750px;
  text-align: left;
  color: #fff;
  line-height: 2.5;
  letter-spacing: 1px;
}

.company-overview .btn {
  margin: 40px auto 0;
}




@media screen and (max-width: 768px) {
  .front-page section.company-overview {
    padding-bottom: 80px;
  }
  .company-overview .overview-content {
    padding: 40px 20px;
  }
}


/* --- TOPページ: 事業内容 --- */
.front-page section.business-content {
  background-color: #08192D;
  color: #fff;
clip-path: polygon(
  0 15%,     /* ①左上：左端の少し下からスタート */
  15% 0,     /* ②左上：上端の少し右へ（ここで左上が削れる） */
  85% 0,     /* ③右上：上端の右端手前まで線を引く */
  100% 15%,  /* ④右上：右端の少し下へ（ここで右上が削れる） */
  100% 100%, /* ⑤右下：そのまま */
  0 100%     /* ⑥左下：そのまま */
);
filter: drop-shadow(-10px -10px 28px rgba(0, 0, 0, 0.25));
}

.business-columns {
  display: flex;
  justify-content: center;
  margin-top: 120px;
  padding-bottom: 60px;
}

.business-item {
  width: 440px;
  height: 720px;
  position: relative;
  background-size: cover;
  background-position: center;
}

.business-item:nth-child(1) {
  margin-right: 120px;
}

.business-item .item-text {
  position: absolute;
  bottom: 0px;
  left: 25px;
  right: 25px;
  min-height: 430px;

}

.business-item .item-text__number {
  font-size: 74px;    
  margin: 0;
  line-height: initial;

}

.business-item .item-text__title {
  font-size: 24px;
  margin: 25px 0 0;
}

.business-item .item-text__desc {
  font-size: 18px;
  margin-bottom: 25px;
}

.business-item img {
  filter: brightness(0.7);
}


@media screen and (max-width: 1024px) {
  .business-item {
    width: 360px;
    height: 590px;
  }

  .business-item .item-text__number {
    font-size: 62px;
  }
  .business-item .item-text__title {
    margin: 10px 0 0;
  }
}


@media screen and (max-width: 768px) { 
  .business-columns {
    margin-top: 60px;
    flex-direction: column;   
    align-items: center;
  }

  .business-item:nth-child(1) {
    margin: 0 0 30px 0;
  }

  .business-item .item-text__number {
    font-size: 32px;
  }

  .business-item .item-text__title {
    font-size: 18px;
  }

  .business-item .item-text__desc {
    font-size: 14px;
  }
}



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

  .front-page section.business-content {
      clip-path: polygon(
        0 50px,               /* ①左上：上から50px（深くする） */
        15px 0,               /* ②左上：左から15px（浅くする） */
        
        calc(100% - 15px) 0,  /* ③右上：右から15px */
        100% 50px,            /* ④右上：上から50px */
        
        100% 100%,            /* ⑤右下 */
        0 100%                /* ⑥左下 */
      );
    }

}



/* --- TOPページ: ソリューション --- */
.solution {
  background-color: #08192D;
  color: #fff;
}

.solution-container {
  display: flex;
  max-width: 1200px;
  margin: 40px auto 0;
}

.solution-image {  
  aspect-ratio: 461 / 593;
  width: 461px; 
  max-width: 100%;

}


.solution-image img{
  transition: opacity 0.2s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;  
}

.solution-list {
  width: 80%;
  list-style: none;
  padding-left: 30px;
}

.solution-item {
  border-bottom: 2px solid #fff;
  padding: 20px 0;
  cursor: pointer;
}

.solution-item a {
  color: #fff;
}

.solution-item:first-child {
  border-top: 2px solid #fff;
}

.solution-detail {
  display: none;
  margin-top: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease;
  font-size: 14px;
}

/* activeクラスがついた時（マウスオーバー時）のスタイル */
.solution-item.active .solution-detail,
.solution-item:hover .solution-detail {
    max-height: 500px; /* 文章が収まる十分な高さを指定 */
    opacity: 1;
}
.solution-item.active h3,
.solution-item:hover h3 {
    color: #0056b3; /* アクセントカラー */
}

/* 初期状態 */
.solution-detail {
    display: block;     
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;  
    transition: max-height 0.4s ease, opacity 0.42 ease, visibility 0.2s;
    padding-right: 100px;
    position: relative;
}

/* 表示状態（activeクラス または hover時） */
.solution-item.active .solution-detail,
.solution-item:hover .solution-detail {
    max-height: 1000px; 
    opacity: 1;
    visibility: visible;
    padding-right: 100px;
}



.solution-detail::after {
  content: '';
  position: absolute;
  right: 30px;
  width: 16px;
  height: 14px;
  background-image: url(../../assets/images/common/btn_anchor_w.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
}



@media screen and (max-width: 1024px) {
  .solution-image {
    width: 45%;
  }

  .solution-list {
    width: 50%;
    padding: 0;
  }
  .solution-item {
    padding:10px 0;
  }
}



.solution-sp-thumb {
  display: none;
}
@media screen and (max-width: 768px) {

  .solution-item.active .solution-detail, .solution-item:hover .solution-detail {
    padding-right: 0;
  }

  .solution-container {
    display: block; 
    margin-top: 20px;
    padding: 0 20px;
  }

  .solution-image {
    display: none;
  }

  .solution-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px 15px; 
  }

  .solution-item {
    border: none !important; 
    padding: 0;
  }
  
  .solution-item:first-child {
    border: none;
  }

  .solution-sp-thumb {
    display: block;
    width: 100%;
    /* aspect-ratio: 16 / 9; */
    margin-bottom: 15px;
    overflow: hidden;
  }
  
  .solution-sp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 見出し */
  .solution-item h3 {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #fff; 
    text-align: center;
  }

  .solution-detail {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-right: 0;
    margin-top: 0;
  }

  .solution-detail-inner {
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.8; 
  }

  .solution-detail::after {
    display: none;
  }
  
  .solution-item:hover h3,
  .solution-item.active h3 {
    color: #fff;
  }
}




























/* --- TOPページ: 事業紹介 --- */
.case-list {
  max-width: 900px;
  margin: 40px auto 0;
}

.case-item {
  display: flex;
  margin-bottom: 20px;
}

.case-thumbnail {
  width: 30%;
}

.case-body {
  width: 70%;
  background-color: #394757;
  color: #fff;
  padding: 20px;
  display: flex;
  align-items: center;
}

.case-body p {
  font-size: 20px;
}

.front-page section.case-studies {
      background-color: #08192D;
      padding-bottom: 190px;
}

.case-studies h2 {
  color: #fff;
}


.case-studies .btn {
  margin: 70px auto 0;
}

@media screen and (max-width: 768px) {
  .case-item {
    flex-direction: column;
    align-items: center;
  }

  .case-thumbnail {
    width: 100%;
  }

  .case-list {
    max-width: 90%;
  }

  .case-body {
    width: 100%;
    padding: 10px;
  }

  .case-body p {
    font-size: 14px;
    text-align: center;
  }

  .case-thumbnail img {
    height: auto;
    width: 100%;
  }
  
}









/* --- TOPページ: メッセージ --- */
.front-page section.message {
  background-color: #F6F6F6;
  text-align: center;
  padding-top: 240px;
  padding-bottom: 80px;
  position: relative;
}

.message-bg {
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
  pointer-events: none;

}

.message-bg:after {
  
  content: '';
  position: absolute;
  top: 0%;
  left: 0;
  width: 846px;
  height: 246px;
  background-image: url(../../assets/images/front/message-bg-left.png);
  background-size: contain;
  background-repeat: no-repeat;
  
}

.message-content {
  position: relative;

}

section.message .message-content h2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  padding-top: 0;
}

.message-content_txt {
  margin-top: 180px;

}

.message-content_txt p {
  font-size: 16px;
  line-height: 3;
}

@media screen and (max-width: 1024px) {
  .front-page section.message {
    padding-top: 200px;
    padding-bottom: 40px;
  }
  section.message .message-content h2 {
    font-size: 30px;
  }
  .message-content_txt {
    margin-top: 90px;
  }

  .message-bg:after {
    width: 70.5%;
    height: auto;
    aspect-ratio: 846 / 246;
  }
}

@media screen and (max-width: 425px) {
  .front-page section.message {
    padding: 80px 0 20px;
  }
  
  section.message .message-content h2 {
    font-size: 24px;        
    width: 100%;
  }
}




/* --- TOPページ: お知らせ --- */
.front-page section.news {
  background-color: #F6F6F6;
  padding-bottom: 165px;

}

.news-list {
  display: flex;
  justify-content: center;
  max-width: 1200px;
  margin: 40px auto 0;
  gap: 20px;
}

.news-item {
  width: 33.33%;
  background: #fff;
}

.news-meta {
  padding: 15px 15px 0;
}

.news-title {
  padding: 0px 15px 15px;
  color: #000;
}
.news .btn {
  margin: 70px auto 0;
}


@media screen and (max-width: 1024px) { 
  .front-page section.news {
    padding-bottom: 80px;
  }
  .news-list {
    max-width: 900px;
  }
}

@media screen and (max-width: 768px) {
  .news-list {
    max-width: 90%;
    padding-bottom: 40px;
  }
  
  .news-item {
    width: 100%;
  }
}

@media screen and (min-width: 769px) {
  .front-page .news .news-list .swiper-wrapper {
    display: flex;
    justify-content: space-between;
    transform: none!important;
    width: 100%!important;
    flex-wrap: wrap;
  }

  .front-page .news .news-list .news-item {
    width: 32%!important;
    margin: 0!important;
    box-sizing: border-box;
    min-height: 380px;
  }

  .front-page .news .news-list .swiper-pagination {
    display: none;
  }

  .front-page .news .news-list .news-item:nth-child(n+4) {
    display: none;
  }

  .front-page .news .news-list .news-item a .news-thumbnail {
     display: flex;
     justify-content: center;

    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;

  }

  .front-page .news .news-list .news-item a .news-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }


}


.swiper-wrapper {
  margin-bottom: 50px;
}

/* SP時のSwiperインジケーター位置調整 */
@media screen and (max-width: 768px) {
  .news-list {
    position: relative; /* 基準位置にする */
    padding-bottom: 40px;
  }

  .news-list .swiper-pagination {
    bottom: 0;       /* 下端に配置 */
    left: 0;         /* 左端を0に */
    width: 100%;     /* 幅を100%に */
    text-align: center; /* 中身を中央揃え */
    
    /* フレックスボックスで中央寄せを確実にする場合 */
    display: flex;
    justify-content: center;
    gap: 6px; /* 点同士の間隔 */
  }
}