

#top-head a,
#top-head {
  color:#fff;
}
#nav-toggle span { background:#fff; }

@media screen and (max-width:768px) {
  .top_wrap img { width:90%; margin:0 auto; }
}

h1 { color:#214C3C; }
.contents_wrap {
  padding-top:150px;
  background:url(../img/bg_top.jpg);
  background-size:cover;
  background-repeat:no-repeat;
  margin:0;
  padding-bottom:80px;
}
.bg_wrap .contents { margin-bottom:0; padding-bottom:0; }
.contents_wrap h1 { margin-top:20px; }

@media screen and (min-width:768px) {
  .contents_wrap { padding-bottom:200px; }
}

/* ▼ 左からスライドインさせるカード */

.member {
  opacity: 0;
  transform: translateX(-160px);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.45s ease-out;
    margin-bottom:40px; 
}


.member.is-active {
  opacity: 1;
  transform: translateX(0);
}


.member.ono { margin-bottom:0; }
.member a { width:100%; height:100%; position:relative; display:block; }
.member .listimg { width:100%; height:100%; }
.member .listimg.pc { display:none; }
.member .listimg.sp { display:block; }
.member.katsuhara { background:url(../img/bglist_katuhara_sp.jpg); background-size:cover; background-repeat:no-repeat; }
.member.ideguchi { background:url(../img/bglist_ideguchi_sp.jpg); background-size:cover; background-repeat:no-repeat; }
.member.ono { background:url(../img/bglist_ono_sp.jpg); background-size:cover; background-repeat:no-repeat; }
.member a strong {width:100%;font-size:8vw;position:absolute;bottom:-2vw;left:0;display:inline-block;}
.member a .info {margin:0;position:absolute;bottom:80px; }
.member a .info .nyusya { font-size:20px; }
.member a .info h2 { font-size:50px; }

@media screen and (min-width:768px) {
  .member {height:auto;margin-bottom:120px;}
  .member.katsuhara { background:url(../img/bglist_katuhara.webp); background-size:cover; background-repeat:no-repeat; }
  .member.ideguchi { background:url(../img/bglist_ideguchi.webp); background-size:cover; background-repeat:no-repeat; }
  .member.ono { background:url(../img/bglist_ono.webp); background-size:cover; background-repeat:no-repeat; }
  .member .listimg.pc { display:block; }
  .member .listimg.sp { display:none; }
  .member a strong { font-size:7vw; }
  .member a .info {margin:0;top:100px; bottom:initial; }
  .member a .info .nyusya { font-size:30px; }
  .member a .info h2 { font-size:5vw; }
}

/* 黒帯共通 */
.js-band {
  position: relative;
  display: inline-block;   /* 文字幅に合わせる */
  padding: 4px 10px;
  overflow: hidden;
  color: #fff;             /* 黒帯の上なので白文字 */
  z-index: 0;
}

/* 黒帯本体 */
.js-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: -1;             /* 帯を背面に */
}

/* 表示時 */
.js-band.is-active::before {
  transform: scaleX(1);
}

.js-band.original {
  position: relative;
  color: #fff; /* 黒帯上なので白文字 */
}


/* 追加 */
/* ▼ 左下からしっかりスライドイン（初期状態） */
/* .member {
  opacity: 0;
  transform: translate(-220px, 12px);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.45s ease-out;
  margin-bottom: 40px;
}


.member.is-active,
.member:hover {
  opacity: 1;
  transform: translate(0, 0);
}


.member.is-active:hover {
  transform: translate(28px, -6px);
} */

.member:hover { mix-blend-mode: initial;
  transform: translateX(5%);
  transition: transform 0.4s ease;}

