/*:::::::::::::::
base
:::::::::::::::*/
/* frame */
.main {
  padding-top: 50px;
}
@media (min-width: 768px) {
  .main {
    padding-top: 0;
  }
}
.containere {
  width: 92%;
  margin-inline: auto;
  max-width: 1080px;
}
.p-product,
.p-movie,
.contact,
#footer {
  padding: 0;
  padding-block: clamp(4.25rem, 3.655rem + 2.98vw, 5.5rem);
  text-align: center;
}
/* 余白付与 */
.u-mt-sss {
  margin-top: clamp(0.25rem, 0.012rem + 1.19vw, 0.75rem);
}
.u-mt-ss {
  margin-top: clamp(0.75rem, 0.631rem + 0.6vw, 1rem);
}
.u-mt-s {
  margin-top: clamp(1.25rem, 0.893rem + 1.79vw, 2rem);
}
.u-mt-m {
  margin-top: clamp(2rem, 1.762rem + 1.19vw, 2.5rem);
}
.u-mt-l {
  margin-top: clamp(2.5rem, 2.143rem + 1.79vw, 3.25rem);
}
.u-mt-xl {
  margin-top: clamp(3.25rem, 3.012rem + 1.19vw, 3.75rem);
}
.u-mt-xxl {
  margin-top: clamp(4.5rem, 4.262rem + 1.19vw, 5rem);
}
/* テキスト */
@media (max-width: 480px) {
  .c-left-sp {
    text-align: left;
  }
}
/* 画像 */
img.c-base {
  width: 100%;
  display: block;
  margin-inline: auto;
}
/* ボタン */
.c-button {
  display: inline-block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  transition: all .3s;
  cursor: pointer;
  line-height: 0;
}
.c-button:hover {
  transform: scale(1.1, 1.1);
  opacity: 1;
}
/* 影付与 */
.u-shadow {
  filter: drop-shadow(6px 6px 6px rgba(0, 0, 0, 0.4));
}
/*:::::::::::::::
メイン画像
:::::::::::::::*/
.p-main {
  background-color: white;
  background-image: linear-gradient(180deg, #a7dbf6 40%, #a7dbf6 50%, #fff);
  position: relative;
  overflow: hidden;
}
@media (min-width: 992px) {
  .p-main {
    aspect-ratio: inherit;
    max-height: 620px;
  }
}
/* タイトル画像 */
.p-main-img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 960px;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
}
.p-main-img .p-main-img-person {
  bottom: 0;
  position: absolute;
  left: -8%;
  max-width: 63%;
}
@media (min-width: 992px) {
  .p-main-img .p-main-img-person {
    left: -8%;
    max-width: 65%;
  }
}
.p-main-img .p-main-img-name {
  bottom: 45%;
  position: absolute;
  left: 52%;
  max-width: 9%;
}
.p-main-img .p-main-img-title {
  position: relative;
  padding:1.25rem 1.25rem 1.25rem 33%;
  width: 100%;
}
@media (min-width: 992px) {
.p-main-img .p-main-img-title {
  padding-right:0;
}
}
.p-main-img .p-main-img-title .p-main-img-title-collab {
  max-width: 40%;
  margin-inline: auto;
}
.p-main-img .p-main-img-title .p-main-img-title-asadore {
  max-width: 80%;
  margin-inline: auto;
  margin-top: -0.5rem;
  position: relative;
}
.p-main-img .p-main-img-title .p-main-img-title-asadore img {
  filter: drop-shadow(0px 0px 4px white) drop-shadow(0px 0px 2px rgba(255,255,255,0.8)) drop-shadow(0px 0px 1px rgba(255,255,255,0.4));
}
.p-main-img .p-main-img-title .p-main-img-title-item {
  max-width: 92%;
  margin-top: -0.5rem;
  position: relative;
}
.p-main-img .p-main-img-title .p-main-img-title-item img {
  filter: drop-shadow(9px 9px 3px rgba(50,50,50,0.1));
}
.p-main-img .p-main-img-title .p-main-img-title-badge {
  top: 37%;
  position: absolute;
  right: 5%;
  max-width: 20%;
}
.p-main-img .p-main-img-title .p-main-img-title-badge img {
  filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.2));
}

/* 背景 */
.p-main-bk {
  bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background-image: url(../img/kc/bk-main.webp);
  background-size: cover;
  background-repeat: repeat-x;
}
@media (min-width: 1500px) {
  .p-main-bk {
    background-size: contain;
  }
}
/* スクロール */
.p-main-scroll {
  position: absolute;
  z-index: 100;
  right: 20px;
  bottom: 140px;
}
.p-main-scroll img {
  width: 100%;
  max-width: 0.75rem;
}
@media (max-width: 480px) {
  .p-main-scroll {
    display: none;
  }
}
.p-main-scroll-inner {
  position: relative;
}
.p-main-scroll-inner::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 26px;
  width: 1px;
  height: 100px;
  margin: auto;
  background: black;
}
.p-main-scroll-inner::after {
  border-radius: 100%;
  content: '';
  position: absolute;
  left: 50%;
  top: 20px;
  width: 7px;
  height: 7px;
  margin-left: -4px;
  background-color: #E41B24;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
}

/*:::::::::::::::
BACKDOOR PROJECT とは
:::::::::::::::*/
.p-bdabout {
  background-color: #282828;
  color: white;
  padding: 0;
  padding-block: 50px;
  width: 100%;
}
@media (min-width: 768px) {
  .p-bdabout {
    padding-block: 40px;
  }
}
.p-bdabout-group {
  display: flex;
  gap: 20px;
  align-items: center;
}
@media (max-width: 768px) {
  .p-bdabout-group {
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .p-bdabout-group-txt {
    width: 100%;
  }
}
.p-bdabout-group-txt h2 {
  font-family: 'Castoro', serif;
  font-size: clamp(1.75rem, 0.813rem + 2.08vw, 2.375rem);
  display: flex;
  gap: 0 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.p-bdabout-group-txt h2 .small {
  font-size: clamp(1.125rem, 0.188rem + 2.08vw, 1.75rem);
}
@media (min-width: 780px) {
  .p-bdabout-group-txt h2 .big {
    font-size: clamp(2.375rem, 1.438rem + 2.08vw, 3rem);
  }
}
.p-bdabout-group-txt p {
  font-size: clamp(1rem, 0.813rem + 0.42vw, 1.125rem);
}
.p-bdabout-group-btn {
  margin-left: auto;
}
@media (max-width: 768px) {
  .p-bdabout-group-btn {
    line-height: 1.8;
  }
}
.p-bdabout-group-btn p a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 50px;
  background: #666;
  color: #FFF;
}
@media (max-width: 768px) {
  .p-bdabout-group-btn {
    width: 100%;
  }
  .p-bdabout-group-btn p {
    margin-inline: auto;
    text-align: center;
  }
  .p-bdabout-group-btn p a {
    width: 50%;
    margin: auto;
    letter-spacing: 1px;
  }
}
/*:::::::::::::::
ページナビ
:::::::::::::::*/
.p-bdnavi {
  background-color: black;
  color: white;
  padding: 0;
  padding-block: clamp(50px, 9.2vw, 70px);
  text-align: center;
  width: 100%;
}
.p-bdnavi-card {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 662px) {
  .p-bdnavi-card {
    width: 92%;
    margin-inline: auto;
  }
  .p-bdnavi-card-list:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 10px);
    margin-inline: auto;
  }
}
@media (min-width: 880px) {
  .p-bdnavi-card {
    grid-template-columns: repeat(4, 1fr);
  }
}
/*:::::::::::::::
outline
:::::::::::::::*/
.p-outline {
  color: white;
  text-align: center;
  position: relative;
  width: 100%;
  z-index: 1;
}
/* txt */
.p-outline p {
  line-height: 2;
}
/* オーバーレイ画像 */
.p-outline-overlay img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 992px) {
  .p-outline .p-outline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .p-outline-overlay img {
    height: 100%;
  }
}
/* コンテンツ */
.p-outline .p-outline-txt + .p-outline-txt {
  margin-top: 1.75rem;
}
.p-outline .p-outline-title {
  font-weight: bold;
  margin-bottom: 2.5rem;
  line-height: 1.4;
}
.p-outline .p-outline-title .u-sp {
display: block;
max-width: 320px;
margin-inline: auto;
}
.p-outline .p-outline-title .u-pc {
display: none;
}
@media (min-width: 992px) {
  .p-outline .containere {
    position: relative;
    z-index: 100;
    padding-block: clamp(3.5rem, 1.115rem + 3.85vw, 4rem);
    text-align: left;
  }
  .p-outline .p-outline-txt,
  .p-outline .p-outline-title {
    color: black;
    padding-left: 50%;
  }
  .p-outline .p-outline-title .u-sp {
  display: none;
  }
  .p-outline .p-outline-title .u-pc {
  display: block;
  max-width: 520px;
  width: 80%;
  }
}
@media (max-width: 992px) {
  .p-outline .containere {
    padding-bottom: 3.5rem;
    padding-top: 3rem;
  }
}
/*:::::::::::::::
きまぐれクックYoutubeバナー
:::::::::::::::*/
.p-youtube {
  background-color: #282828;
  color: white;
  text-align: center;
  padding: 1.5rem 0;
  position: relative;
  width: 100%;
  z-index: 1;
}
.p-youtube a {
  max-width: 22.5rem;
  width: 100%;
}
.p-youtube a.c-button {
  display: flex;
  align-items: center;
}
@media (min-width: 992px) {
.p-youtube {
  padding: 1.75rem 0;
}
}
/*:::::::::::::::
product
:::::::::::::::*/
.p-product {
  color: white;
  position: relative;
}
.p-product .p-product-bk {
  position: absolute;
  top: -5%;
  left: 0;
  width: 100%;
  z-index: 0;
}
@media (min-width: 992px) {
  .p-product .p-product-bk {
    top: -8%;
  }
}
.p-product .containere {
  position: relative;
  z-index: 1;
}
/* タイトル */
.p-product .p-product-title .p-product-title-product img {
  margin-inline: auto;
  max-height: clamp(3rem, 1.81rem + 5.95vw, 5.5rem);
}
.p-product .p-product-title .p-product-title-img img {
  max-width: 45rem;
}
.p-product .p-product-title .p-product-title-item {
  background-color: #00a0e9;
  display: flex;
  width: 100%;
  margin-inline: auto;
  max-width: 32.5rem;
  padding: 0.5rem 1.5rem;
}
.p-product .p-product-title .p-product-title-txt {
  line-height: 2;
}
.p-product .p-product-title .p-product-title-exchange img {
  margin-inline: auto;
  max-width: 38.75rem;
}
.p-product .p-product-title .p-product-title-exchangeitem img {
  margin-inline: auto;
  max-width: 25rem;
}
/* ルアーリスト */
.p-product .p-product-lure {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2.25rem;
  margin-inline: auto;
  max-width: 40rem;
  padding: 0 1.5rem;
}
.p-product .p-product-lure span {
  margin-left: 0.25rem;
}
.p-product .p-product-lure span.u-violet {
  color: #98348e;
}
.p-product .p-product-lure span.u-green {
  color: #a9cd36;
}
@media (min-width: 992px) {
  .p-product .p-product-lure {
    grid-template-columns: repeat(2, 1fr);
    max-width: 52.5rem;
    padding: 0 1.5rem;
  }
}
/* 特別パッケージ */
.p-product .p-product-sppackage {
  margin-inline: auto;
  max-width: 40rem;
  padding: 0 1.5rem;
}
@media (min-width: 992px) {
  .p-product .p-product-sppackage {
    max-width: 45rem;
    padding: 0;
  }
}
/*:::::::::::::::
movie
:::::::::::::::*/
.p-movie {
  background-color: #00a0e9;
  color: white;
}
/* img */
.p-movie .c-title img {
  width: 100%;
  display: block;
  margin-inline: auto;
  max-height: clamp(3rem, 1.81rem + 5.95vw, 5.5rem);
}
.p-movie .p-movie-group {
  display: grid;
  gap: 30px;
  margin-inline: auto;
  grid-template-columns: 1fr;
  max-width: 500px;
}
@media (min-width: 992px) {
  .p-movie .p-movie-group:has(> :nth-child(2)) {
    grid-template-columns: 1fr 1fr;
    max-width: inherit;
  }
}
.p-movie-group-list {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.p-movie-group-list iframe {
  width: 100%;
  height: 100%;
}
/*:::::::::::::::
contact
:::::::::::::::*/
.containere {
  width: 92%;
  margin-inline: auto;
  max-width: 1080px;
}
.contact_inner .c-title {
  font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: clamp(2.5rem, -1.786rem + 8.93vw, 3.75rem);
  line-height: 1;
  text-align: center;
  font-weight: 600;
  margin-bottom: 30px;
}
.contact_inner .c-title.u-title-white {
  color: white;
}
.contact_inner .contact__send {
  margin-bottom: 30px;
}
.contact_inner .grecaptcha-badge {
  margin-inline: auto;
}
/*:::::::::::::::
footer
:::::::::::::::*/
#footer .footer__logo {
  margin-bottom: 40px;
}




/* =========================================================
   アニメーション・エフェクト追加用 CSS（イントロtranslate修正・常時制御版）
========================================================= */

/* ----------------------------------
   0. フェードイン（イントロ）アニメーション定義（★CSS変数を活用するように修正）
---------------------------------- */
@keyframes intro-fadeIn {
  0% {
    opacity: 0;
    /* 各要素のCSS変数(--intro-tx, --intro-ty)で定義された初期位置から開始 */
    /* 変数が定義されていない場合はデフォルト値 0 が使われます */
    transform: translate(var(--intro-tx, 0), var(--intro-ty, 0)) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1); /* 最終位置(0,0)へスライドイン */
  }
}

/* イントロアニメーションを実行させるクラス（JSで付与、変更なし） */
.is-show {
  animation-name: intro-fadeIn;
  animation-duration: 1.5s; /* イントロの時間 */
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1); /* なめらかに */
  animation-fill-mode: forwards; /* 終了時の状態を保持 */
}

/* ----------------------------------
   1. 対象要素の初期状態（透明、CSS変数による位置設定）（★修正）
---------------------------------- */
/* イントロ対象の5要素共通設定 */
.p-main-bk,
.p-main-img-person,
.p-main-img-title-collab,
.p-main-img-title-asadore,
.p-main-img-title-item {
  opacity: 0; /* 最初は隠しておく */
  /* ここでは transform プロパティ自体は定義せず、CSS変数のみを設定 */
}

/* ★各要素のCSS変数で初期位置（要望の方向）を設定 */

/* 【上からスライド】背景 (Y:-30px) */
.p-main-bk {
  --intro-tx: 0;
  --intro-ty: -30px;
}

/* 【左からスライド】人物 (X:-30px) */
.p-main-img-person {
  --intro-tx: -30px;
  --intro-ty: 0;
}

/* 【左からスライド】ロゴ (X:-30px) */
.p-main-img-title-collab {
  --intro-tx: -30px;
  --intro-ty: 0;
}

/* 【右からスライド】タイトル (X:30px) */
.p-main-img-title-asadore {
  --intro-tx: 30px;
  --intro-ty: 0;
}

/* 【下からスライド】ルアー (Y:30px) */
.p-main-img-title-item {
  --intro-tx: 0;
  --intro-ty: 30px;
}

/* 背景はイントロが完了した後に常時アクティブにする（変更なし） */
.p-main-bk.is-active {
  opacity: 1;
  transform: translate(0, 0);
}

/* --- (これ以降の「2. 包丁の青い光」から下は修正不要ですので、そのままお使いください) --- */

/* ----------------------------------
   2. 包丁の青い光（明滅）（ユーザー様調整版を維持）
---------------------------------- */
.effect-knife-glow {
  position: absolute;
  top: 38%;
  left: 59%;
  width: 9%;
  height: 27%;
  background: radial-gradient(ellipse at center, rgba(0, 150, 255, 0.6) 0%, rgba(0, 150, 255, 0) 60%);
  animation: none;
  pointer-events: none;
  z-index: 2;
}

.p-main-img-person.is-active .effect-knife-glow {
  animation: pulse 2s infinite alternate ease-in-out;
}

@keyframes pulse {
  0% { opacity: 0.1; transform: scale(0.6); }
  100% { opacity: 0.8; transform: scale(1.1); }
}

/* ----------------------------------
   3. ピンポイントのキラッとした光（ゴージャス版）
---------------------------------- */
/* キラキラのベース形状と中心の強い光 */
.effect-sparkle {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 30%);
  animation: none;
}

/* 十字の光の筋（グラデーションで自然に消えるように） */
.effect-sparkle::before,
.effect-sparkle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(100, 200, 255, 0.8);
}

.effect-sparkle::before {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
}
.effect-sparkle::after {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
}

/* ★配置（ユーザー様調整版を維持） */
.sp-knife { top: 28%; left: 63%; }
.sp-lure { top: 5%; left: 28%; }
.p-main-img-title-asadore .effect-sparkle.sp-title { top: 8%; left: 76%; }


/* ★修正：アニメーション開始条件の制御 */

/* 【sp-knife のみ】
   親要素（.p-main-img-person）に専用の .is-active-immediate が付いたら、即座にキラキラ開始 */
.p-main-img-person.is-active-immediate .sp-knife {
  animation: flash-twinkle 6s infinite -5.52s; 
}

/* 【他（ルアー、タイトル）のキラキラ】 */
.p-main-img-title-item.is-active .sp-lure {
  animation: flash-twinkle 5s infinite -1.5s; /* 5秒に1回（タイミングをずらす） */
}
.p-main-img-title-asadore.is-active .sp-title {
  animation: flash-twinkle 7s infinite -2.5s; /* 6秒に1回 */
}

/* ★アニメーション定義（変更なし） */
@keyframes flash-twinkle {
  0%, 88%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  92% {
    opacity: 1;
    transform: scale(1.8) rotate(45deg);
  }
  95% {
    opacity: 0.4;
    transform: scale(0.6) rotate(67.5deg);
  }
  98% {
    opacity: 1;
    transform: scale(1.1) rotate(90deg);
  }
}

/* ----------------------------------
   3-2. タイトルのキラキラを3つにするCSS（疑似要素とspan活用）（変更なし）
---------------------------------- */
.p-main-img-title-asadore .effect-sparkle.sp-title span {
  display: block;
  width: 100%; height: 100%;
}

.p-main-img-title-asadore .effect-sparkle.sp-title span::before,
.p-main-img-title-asadore .effect-sparkle.sp-title span::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 30%);
  opacity: 0;
  box-shadow: 0 0 5px rgba(100, 200, 255, 0.8);
}

.p-main-img-title-asadore .effect-sparkle.sp-title span::before {
  top: 30%;
  left: 60%;
  animation: flash-twinkle-small 7s infinite 1s;
}

.p-main-img-title-asadore .effect-sparkle.sp-title span::after {
  top: 60%;
  left: 30%;
  animation: flash-twinkle-small 8s infinite 2.5s;
}

@keyframes flash-twinkle-small {
  0%, 85%, 100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  90% {
    opacity: 1;
    transform: scale(1) rotate(45deg);
  }
  95% {
    opacity: 0;
    transform: scale(0.5) rotate(60deg);
  }
}

/* ----------------------------------
   4. ルアーが時々動く（ビクッとする）（変更なし）
---------------------------------- */
.anim-lure {
  transform-origin: 20% 50%;
  animation: none;
}

.p-main-img-title-item.is-active .anim-lure {
  animation: lure-twitch 7s infinite;
}

@keyframes lure-twitch {
  0%, 90%, 100% { transform: rotate(0deg); }
  92% { transform: rotate(-4deg); }
  95% { transform: rotate(2deg); }
  97% { transform: rotate(-2deg); }
}

/* ----------------------------------
   5. 背景の魚が弧を描いて飛び跳ねる（ゆっくり滑らか調整版）（変更なし）
---------------------------------- */
.bg-vector-fish {
  position: relative;
  width: 40px;
  height: 60px;
  background: url('../img/kc/icon-fish-up.svg') no-repeat center/contain;
  animation: none;
}

.bg-vector-fish-wrapper.is-active .bg-vector-fish {
  animation: fish-jump-arc 2.5s ease-in-out forwards;
}

@keyframes fish-jump-arc {
  0% {
    transform: translate(0, 0) rotate(-15deg) scale(0.5);
    opacity: 0;
  }
  20% { 
    opacity: 1; 
  }
  50% {
    transform: translate(75px, -90px) rotate(45deg) scale(1);
  }
  80% { 
    opacity: 1; 
  }
  100% {
    transform: translate(150px, 40px) rotate(130deg) scale(0.5);
    opacity: 0;
  }
}