@charset "UTF-8";



.top-wrapper {
  width: 80%;
  margin: 0 auto ;
  box-sizing: border-box;padding-bottom:0px
}

.top-row {
  display: grid;
  align-items: stretch;
  margin-bottom: 0px;
	
  position: relative;
}

/* ----------- 1段目（3列） ----------- */
.top-row-1 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.top-row-1 .top-item {
  padding: 0px 0%;
  position: relative;
  text-align: center;
}


/* ----------- テキスト系 ----------- */
.top-note {
  font-family: "メイリオ", "ヒラギノ角ゴ ProN", "Helvetica Neue", sans-serif;
  font-size: clamp(0.5rem, 1.0vw, 0.9rem);
  color: #6c584c;
  margin-bottom: 0%;font-weight: 700
}

.top-text {
font-size: clamp(1.0rem, 1.3vw, 1.5rem);line-height: 150%;
  color: #fff;font-weight: 400; padding: 0px 0%;
}

.text3 {
  color: #00ada9;font-weight: 400;
font-size: clamp(1.4rem, 2.2vw, 2.4rem);
}

sup { font-size: clamp(0.5rem, 0.5vw, 0.7rem);
  color: #6c584c;margin: 0;padding: 0px 0 0 0px ;vertical-align:20% }


/* ----------- スマホ対応 ----------- */
@media (max-width: 768px) {
.top-wrapper {
  width: 90%;
  margin: 0 auto ;
  box-sizing: border-box;
}
.top-wrapper2 {
  width: 90%;
  margin: 0px auto 0px;
  box-sizing: border-box;
}
	
  .top-row {
    display: flex;
    flex-direction: column;
    gap: 0px;line-height:130%
  }

  .top-item {
    padding: 0px 0px;
	border-bottom: 1px solid #fff;}


  .top-item::before,
  .top-item::after {
    display: none;
  }

  .top-note {
    font-size: 0.9rem;padding: 0px 0px 0px;
  }

  .top-text {
    font-size: 1.2rem;padding: 0px 0%;margin: 7px 0px;
  }
	
.top-row-1 .middle{
border-right: 0px solid #999;}
}
.top-row-1 .last1{
border-bottom: 0px solid #999;}




    .card-container {
      display: flex;
      flex-wrap: wrap;
      width: 100%;margin:2% 0% 6% ;
    }

    .card-container2 {
      display: flex;
      flex-wrap: wrap;gap: 0px;
      width: 100%;margin:2% 0% 2% ;
    }

    .card {
      position: relative;
      width: 33.3333%;
      overflow: hidden;
    }
	
	
	.card2 {
      position: relative;
      width: 25%;
      overflow: hidden;
    }
      .card2 {
  width: calc(25% - 0.25px); /* 1px ÷ 4列 = 0.25px */
  box-sizing: border-box;
}

    .card-link {
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      text-decoration: none;
      color: inherit;
    }

    .card-image {
      width: 100%;
      display: block;
    }

    /* 黒オーバーレイ（初期は黒50%、ホバーで透明） */
    .dark-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 1;
      opacity: 1;
      transition: opacity 0.8s ease;
      pointer-events: none;
    }

    .card:hover .dark-overlay {
      opacity: 0;
    }
	
	  .card2:hover .dark-overlay {
      opacity: 0;
    }


    
    .overlay {
      position: absolute;
      z-index: 3;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      transition: color 0.7s ease;
      pointer-events: none;
    }

    .text-block {
      z-index: 4;
    }

    .subtitle {
      font-size: clamp(10px, 16.0vw,20px);
      margin: 0px 0px 0px;
      color: white;font-weight: 400;
      transition: color 0.5s ease;
    }

    .title {
      font-size: clamp(14px, 24.0vw, 50px);
      font-weight: 400;
      margin: 0 0 25%;
      color: white;
      transition: color 0.7s ease;line-height:140% ;letter-spacing: 1px
    }

    .card:hover .subtitle,
    .card:hover .title {
      color: black;
    }
	
	 .card2:hover .subtitle,
    .card2:hover .title {
      color: black;
    }

    .more-btn {
      display: inline-block;
      padding: 0px 20px;
      border: 1px solid white;
      background: white;
      color: black;
      transition: all 0.4s ease;border-radius: 30px;
    }

    .card:hover .more-btn {
      background: black;
      color: white;
      border-color: black;
    }
	   .card2:hover .more-btn {
      background: black;
      color: white;
      border-color: black;
    }
	
    /* オプション：スマホでも3列維持するならこのまま、1列にしたいなら調整可 */
    @media (max-width: 768px) {
      .card {
        width: 100%;
      }
		
		 .card2 {
        width: 100%;
      }
	
	.subtitle {
      font-size: clamp(10px, 12.0vw,20px);
      margin: 0px 0px 0px;
      color: white;font-weight: 400;
      transition: color 0.5s ease;
    }
		
	  .title {
      font-size: clamp(14px, 20.0vw, 40px);
      font-weight: 400;
      margin: 0 0 25%;
      color: white;
      transition: color 0.7s ease;line-height:140% ;letter-spacing: 1px
    }
		
		
    }


@media only screen and (min-width:769px) and (max-width:1000px) {
.top-wrapper {
  width: 98%;
  margin: 0 auto ;
  box-sizing: border-box;
}

.top-wrapper2 {
  width: 98%;
  margin: 0 auto ;
  box-sizing: border-box;
}

.top-note {
  font-family: "メイリオ", "ヒラギノ角ゴ ProN", "Helvetica Neue", sans-serif;
  font-size: clamp(0.5rem, 1.0vw, 0.9rem);
  color: #6c584c;
  margin-bottom: 1%;font-weight: 700
}
	
}