/* ==================== 姫路 ==================== */
.himeji { width:100%; height:100vh; background:url(../img/himeji_sp.jpg); background-size:cover; background-repeat:no-repeat; }
@media (min-width:768px)  {
  .himeji {  background:url(../img/himeji.webp); background-size:cover; background-repeat:no-repeat; }
}
.himeji_inner {width: 100%;height: 100%;padding: 50px 5%;display:flex; flex-direction: column;justify-content: center;align-items: center;}
.himeji_inner a { width:100%; height:100%; display:flex; flex-direction: column;justify-content: center;align-items: center;}
@media (min-width:768px)  {
  .himeji_inner { padding:50px; }
}
.himeji_inner strong { width:100%; text-align:left; font-size:80px; margin-bottom:60vw; line-height:1.2em; display:inline-block; transform: scaleY(0.8);transform-origin: center; letter-spacing:-0.05em; font-weight:bold; color:#fff;  -webkit-text-stroke:1px white;}
@media (min-width:768px)  {
.himeji_inner strong { -webkit-text-stroke:4px white; font-size: clamp(50px, 9.2857vw, 160px); margin-bottom:initial; }
}
.himeji_inner em { width:100%; text-align:left; font-size: clamp(40px, 5.7143vw, 100px); line-height:1.2em; font-style: normal; display:inline-block; transform: scaleY(0.8);transform-origin: center; letter-spacing:-0.05em; font-weight:bold; color:#fff;  -webkit-text-stroke:1px white;}
.text_gekokujo { width:80%; }
@media (min-width:768px)  {
.himeji_inner em {-webkit-text-stroke:4px white; }
.text_gekokujo { width:41vw; margin-bottom: 40px; }
}


.js-typing span {
  opacity: 0;
  display: inline-block;
  transform: translateY(0.5em);
  transition: opacity .4s ease, transform .4s ease;
}

/* is-active が付いたら発火 */
.js-typing.is-active span {
  opacity: 1;
  transform: translateY(0);
}

/* 順番にディレイをずらす */
.js-typing span:nth-child(1) { transition-delay: 0.05s; }
.js-typing span:nth-child(2) { transition-delay: 0.10s; }
.js-typing span:nth-child(3) { transition-delay: 0.15s; }
.js-typing span:nth-child(4) { transition-delay: 0.20s; }
/* 下の行も続けて */
.js-typing span:nth-child(6) { transition-delay: 0.25s; }
/* …必要な分だけ続ける */




/* ==================== 下層ページのコンテンツ ==================== */
.kasou { width:100%; display:flex; align-items:center;}
.kasou .kasou_inner { width:90%; height:100%; display:flex; flex-wrap:wrap; margin:0 auto; }
@media (min-width:768px)  {
.kasou .kasou_inner { width:90%; height:100%; flex-direction:initial;}
}

.kasou .kasou_inner div { width:100%; }
@media (min-width:768px)  {
  .kasou .kasou_inner div { width:50%; margin-bottom:auto; }
}
.kasou .kasou_inner div h2 { width:100%; font-size: clamp(36px, 2.5714vw, 36px); margin-bottom:10px; }
.kasou .kasou_inner div span { width:100%; font-size: clamp(26px, 1.5714vw, 26px); opacity:0.7; padding-top: 16px; padding-bottom: 24px; }
@media (min-width:768px)  {
  .kasou .kasou_inner div h2 { margin-bottom:initial; }
  .kasou .kasou_inner div span { opacity:1; font-size: clamp(32px, 1.5714vw, 26px);}
}


.other a .inner div { position:relative; }
.other a .inner div img.text_left { width:70%; position:absolute; top:-20px; left:0; }
.other a .inner div img.text_right { width:70%; position:absolute; top:-20px; right:0; }
@media (min-width:768px)  {
  .other a .inner div img.text_right { width:70%; margin-top:-40px; position:relative; z-index:2; margin-left:35%; top:initial; right:initial; }
  .other a .inner div img.text_left { width:auto; height:62px; margin-top:-20px; position:relative; z-index:2; margin-left:-5%; left:initial; }
}


/*エントリ＾*/
.kasou .kasou_inner div img.entry_photo { width:100%; mix-blend-mode: multiply;}
.kasou .kasou_inner div img.title_entry { width:100%;  }
.kasou.entry:hover{ cursor: pointer;}
@media (min-width:768px)  {
  .kasou .kasou_inner div img.title_entry { width:90%; margin-top:60px; margin-bottom:2vw; }
  .kasou .kasou_inner div h2 { margin-bottom:3vw; font-size:40px;}
  .kasou .kasou_inner div span { line-height:1.5em;}
}


.kasou.entry { width:100%; height:100%; isolation: isolate;}
@media (min-width:768px)  {
.kasou.entry { height:100%; }

}

.kasou.entry .kasou_inner { width:90%; display:flex; flex-wrap:wrap; margin:65px 5% 0 5%;}
.kasou.entry.bg-noise {width: 100%;background: radial-gradient(circle at 40% 30%,#d7e94b 0%, #e7a548 40%, #e35c6b 70%, #d34361 100%);position: relative;overflow: hidden;}
.kasou.entry.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23noise)' opacity='0.25'/></svg>");
  opacity:1;
  mix-blend-mode: overlay;
}

/* 通常状態 */
.kasou .entry_photo {
  width: 100%;
  mix-blend-mode: multiply;
  transition: transform 0.6s ease, mix-blend-mode 0.3s ease;
  transform-origin: center center;
  transform: scale(1) translateZ(0);
}


.kasou.entry.bg-noise:hover .entry_photo {
  mix-blend-mode: initial;
    transition: transform 0.4s ease;

}

.kasou.entry.bg-noise:hover .entry_photo {
  mix-blend-mode: multiply;
  transform: translateX(5%);
}




/*メンバー*/
.kasou.member { width:100%; height:auto; background:url(../img/bg_member.jpg); background-size:cover; background-repeat:no-repeat; padding:80px 0; position:relative; }
.kasou.member .kasou_inner { display:flex; flex-direction: column-reverse;}
.kasou.member .kasou_inner div img.title_entry { width:60%; position:absolute; top:50px; z-index:2;  }
.kasou .kasou_inner div .member_photo { width:100%; }
.kasou .kasou_inner div.member_innner{ padding-top: 24px; padding-bottom: 32px;}
@media (min-width:768px)  {
  .member { height:auto; padding:initial; padding-bottom:80px; }
  .kasou.member .kasou_inner div img.title_entry { width:66vw; position:initial; top:initial; }
  .kasou.member .kasou_inner { flex-direction:initial;}
  .member_photo { width:100%; margin-top:20%; }
  .kasou.member .kasou_inner div h2 { margin-bottom:3vw; font-size:50px;}
  .kasou.member .kasou_inner div span { font-size:32px; }
}

.other { width:100%; height:auto; /*background:url(../img/bg_other.jpg); background-size:cover; background-repeat:no-repeat; */display:flex; flex-wrap:wrap; }
.other a { width:100%; display:flex; flex-direction: row;  align-items: center; flex-wrap:wrap; border-bottom:1px solid #fff; padding:60px 0; }
.other a.noborder { border-bottom:0; }

.other a .inner { width:90%; display:flex; justify-content: space-between; margin:0 auto; flex-wrap:wrap; flex-direction: column-reverse;}
.other a .inner div { width:100%; }
.other a .inner .inner_text { width:100%; display:flex; flex-direction:column;flex-wrap :wrap; color:#fff; }
@media (min-width:768px)  {
  .other a .inner { justify-content: space-between; flex-direction: initial;}
  .other a .inner div { width:45%; }
  .other a .inner .inner_text { width:45%; display:flex; flex-direction:column;flex-wrap :wrap; color:#fff; }
}
.other a .inner .inner_text h2 { width:100%; font-size: clamp(50px, 2.5714vw, 36px); -webkit-text-stroke:1px; margin-bottom:10px;  }
.other a .inner .inner_text span { width:100%; font-size: clamp(32px, 1.5714vw, 26px); -webkit-text-stroke:0.5px; margin-bottom:40px; }
.other a .inner div img { width:100%; margin-bottom:10px; }
.other a .inner div img.photo_other1 { position:relative; margin-bottom:10px; }
.other a .inner div img.photo_other1::after { content:""; position:absolute; inset:0; background:url("../img/culture.svg") center/cover no-repeat; }
@media (min-width:768px)  {
  .other a .inner .inner_text span { margin-bottom:30px; }
  .other a .inner div img { margin-bottom:initial; }
}

.other a:nth-child(2) .inner {flex-direction:column-reverse;}
@media (min-width:768px)  {
  .other a .inner .inner_text h2 { margin:50px 0 40px 0; }
  .other a:nth-child(2) .inner {flex-direction: row-reverse;}
  .other a .inner div img.photo_other1 { position:relative; margin-bottom:20px; }
}


/*メンバーのマウスオーバー*//* メンバーのマウスオーバー */
.kasou.member a em.more {
  width: 150px;
  font-style: normal;
  font-size: 24px;
  position: relative;
  display: inline-block;
}

/* 下線アニメーション */
.kasou.member a em.more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;            /* 文字のすぐ下に線を置く */
  width: 0;
  height: 2px;             /* 下線の太さ */
  background: currentColor;/* 文字色と同じ色にする */
  transition: width 0.3s ease; /* 伸びるアニメーション */
}

.kasou.member a:hover em.more::after {
  width: 100%;
}

/* 矢印アイコン */
.kasou.member a img.button_arrow {
  width: 35px;
  margin-left: 10px;
  margin-bottom: 5px;
  transition: transform 0.3s ease; /* ← ふわっと動く */
}

.kasou.member a:hover img.button_arrow {
  transform: translateX(10px);    /* ← 右へ 10px */
}



/*マウスオーバー*/
.other a .inner .inner_text em { width:150px; font-style:normal; font-size:24px; position: relative; display: inline-block;}
.other a em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* 文字のすぐ下に線を置く */
  width: 0;
  height: 2px; /* 下線の太さ */
  background: currentColor; /* 文字色と同じ色にする */
  transition: width 0.3s ease; /* 伸びるアニメーション */
}

.other a:hover em::after {
  width: 100%;
}

.other a .inner div img.button_arrow {
    width: 35px;
    margin-left: 10px;
    margin-bottom: 5px;
    transition: transform 0.3s ease; /* ← ふわっと動く */
}

.other a:hover .inner div img.button_arrow {
    transform: translateX(10px); /* ← 右へ 10px */
}




/* 背景本体（オレンジ〜黒グラデ） */.bg-orange-noise {
  width: 100%;
  background:
    /* 明るい部分を弱めて黒の主張を優先 */
    radial-gradient(circle at 80% 75%,
      #ff8a3a 0%,
      #ff6a1a 25%,
      transparent 55%
    ),
    radial-gradient(circle at 10% 65%,
      #ffb978 0%,
      #ff9b4c 25%,
      transparent 55%
    ),

    /* 黒の存在感を強化したメインの濃淡レイヤー */
    linear-gradient(
      0deg,
      #000000 0%,    /* 完全黒を増やす */
      #000000 40%,   /* ← 黒領域をめちゃ広げる */
#000000 55%,
      #5a3312 75%,
      #c86524 88%,
      #ffb978 100%
    );

  background-size: 400% 400%;    /* ← 黒の動きが大幅に見える */
  animation: waveGradient 12s ease-in-out infinite;

  position: relative;
  overflow: hidden;
}

@keyframes waveGradient {
  0% {
    background-position: 0% 10%;
  }
  25% {
    background-position: 80% 60%;
  }
  50% {
    background-position: 40% 100%;
  }
  75% {
    background-position: 90% 30%;
  }
  100% {
    background-position: 0% 10%;
  }
}




/* ----------------------------- */
/*      ざらざらノイズを動かす      */
/* ----------------------------- */

.bg-orange-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* ultra grain ノイズ */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='2.6' numOctaves='4'/></filter><rect width='250' height='250' filter='url(%23n)'/></svg>");

  opacity: 0.32;                 /* ← 強めのざらざら感 */
  mix-blend-mode: overlay;

  animation: noiseShake 0.25s steps(3) infinite; /* ← ノイズを高速で揺らす */
}

/* ノイズを“チラチラ動かす”アニメーション */
@keyframes noiseShake {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-2px, 1px); }
  100% { transform: translate(1px, -2px); }
}


.screen-bottom-gradient {
  position:absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 240px;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.55) 40%,
    rgba(0, 0, 0, 0.25) 70%,
    rgba(0, 0, 0, 0) 100%
  );

  clip-path: polygon(0 0%, 100% 3%, 100% 100%, 0 100%);
  z-index: 9999;
}


/*代表メッセージのマウスオーバー*/
.button_message{width:90%;height:auto; margin-top:20px; font-size:30px; padding:10px 0 10px 0; display:flex;align-items:center;color:#fff;font-weight:bold;position:relative;z-index:999;overflow:hidden;transition:color 0.3s ease; background-color: #000;width: auto;
  padding: 24px;  }
.button_message img{margin-left:10px;transition:transform 0.3s ease;}
.button_message:hover{color:#fff;}
.button_message:hover img{transform:translateX(10px);}
.button_message:hover::before{width:100%;}


@media (min-width:768px)  {
.button_message{width:auto; padding:24px; font-size:35px;margin-top:initial; background-color: #ff4c00;}
}




/* エントリー（entry）の more をメンバーと同じスタイルに */
.kasou.entry.bg-noise .more {
  width:150px;
  font-size:24px;
  color:#fff;
  display:flex;
  align-items:center;
  position: relative;     /* 下線用 */
  padding-bottom: 4px;    /* 下線との間隔 */
}

/* 下線アニメーション（メンバーと同じ） */
.kasou.entry.bg-noise .more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background:#fff;
  transition: width 0.3s ease;
}

.kasou.entry.bg-noise:hover .more::after {
  width: 100%;
}

/* 画像のふわっと移動（メンバーと同じ） */
.kasou.entry.bg-noise .more .button_arrow {
  width: 32px;
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.kasou.entry.bg-noise:hover .more .button_arrow {
  transform: translateX(10px);
}