@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================
   Font Setting
========================= */

/* 本文・サイト全体の基本フォント */
body,
button,
input,
select,
textarea {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
}

/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6,
.p-mainVisual__slideTitle,
.c-pageTitle,
.c-postTitle,
.p-postList__title,
.c-widget__title,
.swell-block-heading,
.wp-block-heading {
  font-family: "Kaisei Decol", "Zen Kaku Gothic New", serif;
  font-weight: 500;
}

/* ヘッダー・ナビメニュー */
.c-gnav,
.c-gnav a,
.c-headLogo,
.c-headLogo a,
.p-spMenu,
.p-spMenu a,
.c-iconList,
.l-header__menu,
.l-header__customBtn {
  font-family: "Kaisei Decol", "Zen Kaku Gothic New", serif;
  font-weight: 500;
}

/* ボタン・CTA */
.swell-block-button a,
.wp-block-button__link,
.c-btn,
.more-link {
  font-family: "Kaisei Decol", "Zen Kaku Gothic New", serif;
  font-weight: 500;
}

/* 記事本文は読みやすさ優先 */
.post_content,
.post_content p,
.post_content li,
.post_content table,
.post_content figcaption {
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", sans-serif;
}


/* =========================
スクリーンリーダー用テキスト
========================= */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================
   TOP FV：にゃんパリ メインビジュアル
   page-id-785
========================= */

.nyan-pcfv {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: none;
  margin: 0;
  transform: translateX(-50%);
  overflow: hidden;

  /* FV背景画像＋オーバーレイ */
  background-image:
    linear-gradient(rgba(254, 255, 240, 0.45), rgba(254, 255, 240, 0.45)),
    url("https://nyanparicrepe.com/wp-content/uploads/2026/05/22464783.jpg");
  background-repeat: repeat, repeat;
  background-position: center top, center top;
  background-size: cover;


  /* FV内の上下余白 */
  padding-top: clamp(12px, 2vw, 32px);
  padding-bottom: clamp(48px, 4vw, 80px);
}

/* ワイドディスプレイ用調整 */
@media (min-width: 1441px) {
  .nyan-pcfv {
    padding-bottom: clamp(110px, 7vw, 150px);
  }

  .nyan-pcfv__center {
    width: min(56vw, 1080px);
  }
}

/* 中間幅PC用：下余白を控えめに */
@media (min-width: 1025px) and (max-width: 1440px) {
  .nyan-pcfv {
    padding-bottom: clamp(24px, 3vw, 48px);
  }

  .nyan-pcfv__inner {
    min-height: clamp(540px, 46vw, 640px);
  }

  .nyan-pcfv__center {
    top: 50%;
    width: min(58vw, 980px);
  }
}


/* FV下部の波区切り：PC・タブレット用 */
.nyan-pcfv::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 100vw;
  height: clamp(36px, 4vw, 80px);
  transform: translateX(-50%);
  background-image: url("https://nyanparicrepe.com/wp-content/uploads/2026/05/Divider-nami.webp");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  z-index: 5;
  pointer-events: none;
}

.nyan-pcfv__pc {
  display: block;
}

.nyan-pcfv__sp {
  display: none;
}

.nyan-pcfv__inner {
  position: relative;
  width: min(100vw, 1920px);
  min-height: clamp(520px, 38vw, 700px);
  margin-inline: auto;
  overflow: visible;
  z-index: 2;
}

/* 中央画像 */
.nyan-pcfv__center {
  position: absolute;
  left: 50%;
  top: 55%;
  width: min(60vw, 1200px);
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: block;
}

/* ワイドディスプレイ用調整 */
@media (min-width: 1441px) {
  .nyan-pcfv__center {
    width: min(56vw, 1050px);
  }
}

/* 中間幅PC用：サイズは維持して高さだけ確保 */
@media (min-width: 1025px) and (max-width: 1440px) {
  .nyan-pcfv__inner {
    min-height: clamp(600px, 52vw, 720px);
  }

  .nyan-pcfv__center {
    top: 48%;
  }
}

/* 動かすクレープ共通 */
.nyan-pcfv__crepe {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.nyan-pcfv__crepe img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  will-change: transform;
}

/* 左上：いちごクレープ */
.nyan-pcfv__crepe--lefttop {
  width: clamp(120px, 8.2vw, 185px);
  left: clamp(90px, 9vw, 190px);
  top: clamp(50px, 5vw, 90px);
}

.nyan-pcfv__crepe--lefttop img {
  animation: nyanFloatA 5.4s ease-in-out infinite;
}

/* 左下：バナナチョコ */
.nyan-pcfv__crepe--leftbottom {
  width: clamp(155px, 12vw, 250px);
  left: clamp(90px, 8vw, 170px);
  bottom: clamp(70px, 7vw, 130px);
}

.nyan-pcfv__crepe--leftbottom img {
  animation: nyanFloatB 5.9s ease-in-out infinite;
  animation-delay: .4s;
}

/* 右上：包みクレープ */
.nyan-pcfv__crepe--righttop {
  width: clamp(115px, 8vw, 180px);
  right: clamp(100px, 9vw, 190px);
  top: clamp(55px, 5vw, 95px);
}

.nyan-pcfv__crepe--righttop img {
  animation: nyanFloatC 5.1s ease-in-out infinite;
  animation-delay: .7s;
}

/* 右下：三角クレープ */
.nyan-pcfv__crepe--rightbottom {
  width: clamp(155px, 12vw, 250px);
  right: clamp(95px, 8vw, 170px);
  bottom: clamp(75px, 7vw, 135px);
}

.nyan-pcfv__crepe--rightbottom img {
  animation: nyanFloatD 6.2s ease-in-out infinite;
  animation-delay: 1s;
}

/* ふわっと揺れる動き */
@keyframes nyanFloatA {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes nyanFloatB {
  0%, 100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-4px, -7px);
  }
}

@keyframes nyanFloatC {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes nyanFloatD {
  0%, 100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(4px, -7px);
  }
}

/* 動きを控えたいユーザー環境への配慮 */
@media (prefers-reduced-motion: reduce) {
  .nyan-pcfv__crepe img {
    animation: none !important;
  }
}

/* タブレット */
@media (max-width: 1024px) {
  .nyan-pcfv {
    padding-top: clamp(8px, 2vw, 24px);
    padding-bottom: clamp(56px, 8vw, 96px);
  }

  .nyan-pcfv::after {
    height: clamp(32px, 5vw, 64px);
  }

  .nyan-pcfv__inner {
    min-height: clamp(470px, 58vw, 620px);
  }

  .nyan-pcfv__center {
    top: 55%;
    width: min(82vw, 1040px);
  }

  /* タブレットでは外側クレープを小さくして外へ逃がす */
  .nyan-pcfv__crepe--lefttop {
    width: clamp(75px, 10vw, 110px);
    left: -1vw;
    top: 10vw;
  }

  .nyan-pcfv__crepe--leftbottom {
    width: clamp(95px, 13vw, 140px);
    left: -2vw;
    bottom: 11vw;
  }

  .nyan-pcfv__crepe--righttop {
    width: clamp(75px, 10vw, 110px);
    right: -1vw;
    top: 10vw;
  }

  .nyan-pcfv__crepe--rightbottom {
    width: clamp(95px, 13vw, 140px);
    right: -2vw;
    bottom: 11vw;
  }
}

/* スマホは1枚画像 */
@media (max-width: 767px) {
  .nyan-pcfv {
    width: 100%;
    left: auto;
    transform: none;

    /* スマホFV用の余白 */
    padding-top: 40px;
    padding-bottom: clamp(40px, 10vw, 72px);

    /* スマホでも同じ背景を使う場合 */
    background-image:
      linear-gradient(rgba(254, 255, 240, 0.45), rgba(254, 255, 240, 0.45)),
      url("https://nyanparicrepe.com/wp-content/uploads/2026/05/22464783.jpg");
    background-repeat: repeat, repeat;
    background-position: center top, center top;
    background-size: auto, cover;
  }

  .nyan-pcfv::after {
    /* スマホ用の波画像に差し替え */
    background-image: url("https://nyanparicrepe.com/wp-content/uploads/2026/05/namisp.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% 100% !important;
    height: clamp(28px, 8vw, 48px) !important;

  }

  .nyan-pcfv__pc {
    display: none;
  }

  .nyan-pcfv__sp {
    display: block;
    position: relative;
    z-index: 2;
  }

  .nyan-pcfv__sp img {
    display: block;
    width: 100%;
    height: auto;
  }
}