/* 基本スタイル */
.home_title {
  padding-left: 4vw;
  padding-top: 5vw;
    /*背景画像指定*/
  position: relative;
  width: 100%;
  height: 100vh;
  aspect-ratio: 4 / 3; /* 縦横比 */
  overflow: hidden;
  /* min-height: 200px; モバイル対策 */
}

/* 背景画像として使うimg */
.home_image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; /* トリミングしつつぴったり表示 */
  top: 0;
  left: 0;
  z-index: 0;
}

/* テキストを上に重ねる */
.home_text {
  position: relative;
  z-index: 1;
  color: white;
}

/*スマホ用表示*/
.sp {
  display: none;/*表示しない*/
}

.we-are {
  font-size: 8vw;
  font-weight: bold;
  color: #d4d1d1f5;
  position: relative;
  margin: 0;
  padding-bottom: 0.1vw;
}

.embodiment-of-technology {
  font-size: 5.65vw;
  font-weight: normal;
  color: #d4d1d1f5;
  position: relative;
  margin-left: 3vw;
}

/* 線のベーススタイル */
.we-are::before,
.we-are::after,
.embodiment-of-technology::before,
.embodiment-of-technology::after,
.technology::before, 
.technology::after{
  content: '';
  display: block;
  position: absolute;
  height: 1.2vw;/* 線の高さ */
  /* left: 0;  */
  /* 左側を固定 */
  width: 0; /* 初期幅 */
}

.we-are::before {
  bottom: 0.35vw;
  background-color: white;
}

.we-are::after {
  bottom: -0.1vw;
  background-color: red;
  margin-left: 1vw;
}

.embodiment-of-technology::before {
  bottom: -0.2vw;
  background-color: white;
}

.embodiment-of-technology::after {
  bottom: -0.7vw;
  background-color: red;
  margin-left: 1vw;
}

.technology::before {
  bottom: 0.35vw;
  background-color: white;
}

.technology::after {
  bottom: -0.1vw;
  background-color: red;
  margin-left: 1vw;
}
/* アニメーション */
@keyframes slideIn {
  from {
    width: 0; /* 線を最初は非表示 */
  }
  to {
    width: var(--line-width); /* カスタムプロパティで幅を制御 */
  }
}

/* アニメーション適用 */
.we-are::before {
  --line-width: 26vw; /* 白い線の最大幅 */
  animation: slideIn 1.5s ease-out forwards;
}

.we-are::after {
  --line-width: 26.5vw; /* 赤い線の最大幅 */
  animation: slideIn 1.8s ease-out forwards;
}

.embodiment-of-technology::before {
  --line-width: 76.5vw; /* 白い線の最大幅 */
  animation: slideIn 2s ease-out forwards;
}

.embodiment-of-technology::after {
  --line-width: 76.5vw;; /* 赤い線の最大幅 */
  animation: slideIn 2.3s ease-out forwards;
}


/* home description styles */

.home_content{
  padding-left: 17vw;
  padding-right: 17vw;
}

.home_description_title {
  width: 100%;
  margin: 45px 0px 45px 0px;
  text-align: center;
  color: #d4d1d1f5;
  font-weight: 700; /*フォント重み*/
  font-size: 6vw;
}

.home_description_title.light-mode{
  color: black;
}
.home_description_content{
  font-size: 1.5vw;
}

.home_description_Announcement{
  margin-top: 20px;
}
/* home topic styles (New Topics)*/
  .home_topics{
    margin-top: 10vw;
    width: 100%;
    padding-left: 17vw;
    padding-right: 17vw;
  }

  .home_topic_content{
    width : 95%;
    margin-bottom: 15px;
  }
  
  .home_topic_time{
    margin-bottom: 0.2vw;
    font-size: 1vw;
    color: gray;
  }

  .home_topic_description{
    font-size: 1.2vw;
    border-bottom: 1px solid white;
  }
  .home_topic_description.light-mode {
    border-bottom: 1px solid black;
  }

/*new topic more_button*/
  /* .extra-topic はデフォルトで非表示にする */
  .extra-topic {
      display: none;
  }

  /* .is-visible クラスが追加されたら表示する */
  .extra-topic.is-visible {
      display: block; /* または flex など、表示したい形式に合わせてください */
  }

  /* ボタンのスタイル (オプション、必要に応じて調整) */
  #toggleTopicsButton_more,
  #toggleTopicsButton_close {
    display: inline-block; /* デフォルトの表示 */
    background-color: black;
    padding: 0.8vw 1.5vw;
    margin: 0.5vw;
    border: 0.2vw solid #ccc;
    color: white;
    cursor: pointer;
    font-size: 1vw;  
  }

  #toggleTopicsButton_more.light-mode,
  #toggleTopicsButton_close.light-mode{
    background-color: transparent; /* 背景指定なし */
    color: black;
  }
/*new topic more_button end*/
/* home topic styles (New Topics) end*/
/* ボタンの非表示状態 */
#toggleTopicsButton_more.is-hidden,
#toggleTopicsButton_close.is-hidden {
    display: none;
}
/* Cards styles */
  .cards {
    margin-top: 100px;
    display: flex;/* 一番高い高さのカードで文字数が決定される。*/
    flex-wrap: wrap;
    justify-content: center;
    
  }

  .card {
    width: 29vw;
    max-width: 29vw;
    margin-right: 6vw;
    margin-left: 6vw;
    background-color: black !important;
    border-color: #fff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 0 !important;
  }
  .card.light-mode{
    background-color: #726a5d !important;
  }
  .card-media {
    background-color: #333;
    color: #fff;
    text-align: center;
    height: 17vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card-content {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background-color: black;
  }
  .card-content.light-mode {
    padding: 1rem;
    background-color: #726a5d;
  }
  
  .card-title {
    font-size: 2vw;
    font-weight: bold;
    color: #e0dfdf  !important;
  }
  .card-subhead {
    color: #bebebe;
    font-size: 1.3vw;
    margin-bottom: 0.5rem;
  }
  .card-text {
    color: white;
    font-size: 1.2vw;
    line-height: 1.4;
  }
  .card-actions {
    display: flex;
    gap: 1rem;
  }

  .card-link{
    font-size: 1.2vw !important;
    color: skyblue !important;
    margin-top: auto;
    text-align: right;
    padding-bottom: 1vw;
    padding-right: 1vw;
  }
/* card pictures */
.card_Seminar_activities{
  width: 100%;
  aspect-ratio: 4 / 3; /* 縦横比4800:3600に合わせる */
  overflow: hidden;
  position: relative;
  min-height: 200px; /*スマホでの最小高さ（例: 200px）を設定 */
}
.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* カバー表示・トリミング */
  object-position: center;
  display: block;
}

/* home helpus styles */
  .home_helpus {
    margin-top: 10vw;
    padding-left: 17vw;
    padding-right: 17vw;
  }

/* モバイルスタイル */
@media (max-width: 650px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
    padding-top: 70px !important;
    height: 100vh;
  }
  .home_helpus,
  .home_topics,
  .home_content{
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .home_title{
    padding-top: 64px;
  }
  .home_description_title{
    font-size: 12vw;
  }
  .home_description_content{
    font-size: 15px;
    line-height: 30px;
  }
  .home_topic_description {
    font-size: 14px;
  }
  .home_topic_time {
    margin-bottom: 0.2vw;
    font-size: 13px;
    color: gray;
  }

  .social-links i {
    font-size: 1.5em; /* fa-1.5x 相当  emは*/
  }
  footer .footer_address_infomation p {
    font-size: 2.4vw;
  }

  .technology {
    font-size: 8vw;
    color: rgba(212, 209, 209, 0.96);
    position: relative;/*要素の「位置指定の基準をその要素自身」*/
    margin-left: 48vw;
    font-weight: bold;
  }

  .technology::before {
    --line-width: 44vw;
    animation: 1.5s ease-out 0s 1 normal forwards running slideIn;
  }
  
  .technology::after {
    --line-width: 45vw;
    animation: 1.8s ease-out 0s 1 normal forwards running slideIn;
  }
  .we-are {
    font-size: 8vw;
  }
  .embodiment-of-technology {
    padding-top: 5px;
    font-weight: bold;
    font-size: 8vw;
    margin-left: 9vw;
  }
  .embodiment-of-technology::before {
    --line-width: 73vw;
  }
  .embodiment-of-technology::after {
    --line-width: 74vw;
  }
  /*new topic more_button*/
  #toggleTopicsButton_more,
  #toggleTopicsButton_close {
      display: inline-block; /* デフォルトの表示 */
      padding: 8px 15px;
      margin: 5px;
      border: 1px solid #ccc;
      cursor: pointer;
      font-size: 1rem;
  }
  /* Cards */
  .cards {
    flex-direction: column;
    align-items: center; /* カードを中央に寄せる */
    gap: 8vw; /* スマホ用の間隔調整（必要なら） */
  }

  .card {
    width: 100%;
    max-width: 90vw; /* スマホ画面いっぱい使う */
    margin-bottom: 20px;
  }
  
  .card-title{
      font-size: 8vw;
  }

  .card-subhead{
    font-size: 4vw;
  }

  .card-text,
  .card-link{
    font-size: 5vw  !important;
    margin-right: 1vw;
  }

  .card-media {
    height: auto; /* ここをautoにして、画像の比率維持を優先 */
  }
}