@charset "Shift_JIS";
/* Updated 20260331.s */


/* color
------------------------------*/
.black { color: #333434 !important;}
.white { color: #fff !important;}
.gray { color: #f0f0f0 !important;}
.green { color: #c4d700 !important;}
.l-green { color: #d5dedb !important;}
.w-green { color: #e4eec1 !important;}
.d-green { color: #004831 !important;}
.red { color: #c83030 !important;}
.l-red { color: #ffebeb !important;}


/* WhatsNewのtitle
------------------------------ */

.h2Title01-2{
	padding-bottom:10px;
	margin-bottom:25px;
}
.h2Title01-2 .titleInner {
	position: relative;
    display: block;
    font-size: 2.143em;
    font-weight: bold;
    line-height: 1.2;
}



/* 動画1つ
------------------------------ */

.video-wrap-tf {
    position: relative;
    width: 100%;          /* 親コンテナの横幅いっぱい */
    aspect-ratio: 16 / 9; /* 高さは16:9で自動調整（必要に応じて変更可） */
    background: #000;     /* 読み込み前の背景色 */
    border-radius: 8px;   /* 任意：角丸 */
    overflow: hidden;
  }
  .video-wrap-tf iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }


/* 動画3つ
------------------------------ */

/*.con {
   max-width: 648px;
    margin: 0 auto;
    padding: 16px;
  }*/

  /* 3列グリッド（→ タブレットで2列、スマホで1列） */
  .yt-grid-tf {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  /*@media (max-width: 960px) {
    .yt-grid { grid-template-columns: repeat(2, 1fr); }
  }*/
  @media (max-width: 767px) {
    .yt-grid-tf { grid-template-columns: 1fr; }
  }

  /* 16:9で動画をレスポンシブに */
  .card-tf {
    margin: 0;
  }
  .video-tf{
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;       /* モダンブラウザ向け */
    background: #000;
    border-radius: 8px;
    overflow: hidden;
  }
  .video-tf iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* キャプション（動画下のテキスト） */
  .caption-tf {
    margin-top: 8px;
    font-size: 100%;
    line-height: 1.5;
    /*color: #333;*/
  }

.h2Title01-3{
	padding-bottom:10px;
	margin-bottom:25px;
}
.h2Title01-3 .titleInner {
	position: relative;
    display: block;
    font-size: 130%;
    font-weight: bold;
	color: #004831;
}



/* carousel
------------------------------ */

.carousel {
  --visible: 4;
  --gap: 16px;
  --btn-size: 44px;
  --btn-bg: rgba(0, 0, 0, 0.55);
  --btn-bg-disabled: rgba(0, 0, 0, 0.2);
  --dot: 10px;

  position: relative;
  width: 100%;
}

.carousel-viewport {
  overflow: hidden;
  width: 100%;
}

.carousel-track {
  display: flex;
  gap: var(--gap);
  transition: transform .7s ease;
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* ボタン */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--btn-size);
  height: var(--btn-size);
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

.carousel-btn.prev {
  left: 8px;
}

.carousel-btn.next {
  right: 8px;
}

.carousel-btn:disabled {
  background: var(--btn-bg-disabled);
  cursor: default;
  opacity: .5;
}

.carousel-btn img {
  display: block;
}

/* ドット */
.carousel-dots {
  text-align: center;
  margin-top: 12px;
}

.carousel-dots button {
  width: var(--dot);
  height: var(--dot);
  margin: 0 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ccc;
  cursor: pointer;
}

.carousel-dots button.active {
  background: #333;
}







/* 参考：小さな画面で高さだけ少し伸ばす */
@media (max-width: 767px) {
  .item img { height: 120px; }
}


/*Awardで使用部分ここから*/


/*Awardで使用部分ここまで*/