@charset "utf-8";
.demomain {
  height: 500px;
}
.spFv {
  height: 100vh;
}

/* --- トップページ共通設定 --- */
#home {
  position: relative;
}
/* 1. ヘッダーを写真の上に浮かせる */
#home #top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-image: url('https://pharmastream.jp/wp-content/themes/pharmastream/images/home_header.svg');
  background-repeat: no-repeat;
  /* --- 修正のポイント --- */
  /* 1. サイズを1920pxで固定。画面が狭くても縮小されません */
  background-size: cover;
  /* 2. 常に画像の中央を基準にする */
  background-position: center bottom;
  /* 3. 画面幅より画像が広い場合、はみ出た左右を隠す */
  overflow: hidden;
  /* ---------------------- */
  background-color: transparent;
  pointer-events: none;
}
@media screen and (max-width: 375px) {
  #home #top {
    min-height: 23vh;
  }
}
#home #top a, #home #top button {
  pointer-events: auto;
}
/* ヘッダー内部のレイアウト調整（必要に応じて） */
#home .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 写真に重なるため、ロゴを見やすくする場合 */
  /*  padding: 46px 116px;*/
}
.hero-swiper, .hero-swiper .swiper-slide, .hero-swiper img {
  width: 100%;
  display: block;
}
/* 1. メニューが開いている時のオーバーレイの設定 */
#menuOverlay.is-open {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200000; /* 最前面 */
  background: rgba(0, 0, 0, 0.6);
}
/* 2. サイドメニュー本体 */
#sideMenu.active {
  z-index: 200001; /* オーバーレイより上 */
}
/* 3. 【修正】メニューが開いている間のボタンの挙動 */
body.menu-is-open .spAboutBtn, body.menu-is-open .pcOnly {
  /* -1 ではなく、プラスの低い値に変更 */
  z-index: 1 !important;
  /* ボタンを半透明にしたい場合は追加（任意） */
  /* opacity: 0.5; */
  /* 背面にあるときに誤ってクリックされないようにする */
  pointer-events: none;
}
@media (min-width: 768px) {
  #home #top {
    min-height: 212px;
  }
}
/* PC/SPでの見え方の調整 */
@media screen and (max-width: 767px) {
  #home-hero {
    position: relative;
    width: 100%;
    height: 55vh;
    overflow-x: hidden;
  }
  #home #top {
    padding-bottom: 10px;
  }
}
/* 4. ハンバーガーボタンやメニューが隠れないように調整 */
.menu-btn {
  z-index: 1001; /* ヘッダー背景よりさらに上 */
}
.side-menu {
  z-index: 2000; /* メニュー展開時は最前面 */
}
/* 矢印自体のデザイン（デフォルトの青色から変更する場合） */
.swiper-button-prev, .swiper-button-next {
  position: static; /* デフォルトの絶対配置を解除 */
  color: #333; /* 矢印の色 */
  width: 44px;
  height: 44px;
}
/* 矢印のサイズを小さくしたい場合 */
.swiper-button-prev::after, .swiper-button-next::after {
  font-size: 24px;
}
/* デフォルトのアイコンを非表示 */
.swiper-button-prev::after, .swiper-button-next::after {
  display: none;
}
/* ボタン共通設定 */
.swiper-button-prev, .swiper-button-next {
  width: 100px; /* 縦7粒×4重を収めるため広めに設定 */
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.swiper-button-prev, .swiper-button-next {
  position: static; /* Swiperデフォルトの絶対配置を解除 */
  flex-shrink: 0; /* 矢印が潰れないように固定 */
  margin: 0;
}
.swiper-button-prev {
  flex-shrink: 0; /* 小さくならないよう固定 */
  width: 126px;
  height: 126px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.swiper-button-next {
  flex-shrink: 0;
  width: 126px;
  height: 126px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.display-text {
  flex: 1; /* 残りスペースを占有 */
  margin: 0 20px; /* 左右の間隔 */
  text-align: left; /* 左寄せ */
  line-height: 1.8;
  color: #888;
  padding-right: 425px;
}
/* 4重ドットの「<<<<」 (左矢印) - 色を#888に変更 */
.swiper-button-prev {
  background-image: url("../images/btn_left.svg");
}
/* 4重ドットの「>>>>」 (右矢印) - 色を#888に変更 */
.swiper-button-next {
  background-image: url("../images/btn_right.svg");
}
/* ホバー時の挙動 */
.swiper-button-prev:hover, .swiper-button-next:hover {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
#home-hero {
  position: relative;
  width: 100%;
  height: max(100vh, 800px);
  overflow-x: hidden;
}
/* 1. 全体の高さを画面ぴったりにする */
#home .hero-slider {
  height: 100%;
  width: 100%;
  position: relative;
  /* ヘッダーより下の数値にして、写真が潜り込むようにする */
  z-index: 10;
  overflow: hidden; /* 写真がはみ出さないようにここはhiddenに戻す */
}
/* 2. 背景写真（Swiper）を画面いっぱいに広げる */
#home .hero-swiper, #home .hero-swiper .swiper-slide {
  height: 100%;
}
#home .hero-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 比率を保ちつつ画面を満たす（重要） */
  object-position: center; /* 写真の中心を基準にする */
}
@media (max-width: 767px) {
  #home .hero-swiper img {
    object-fit: contain;
  }
}
#home .hero-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 画面全体の高さを持たせる */
  /* ヘッダー(100)を完全に追い越す最前面の数値 */
  z-index: 9999 !important;
  /* このレイヤー自体は透明な幕。下のスライダーやボタンを邪魔しない */
  pointer-events: auto;
  /* ここにoverflow制限をかけない */
  overflow: visible !important;
}
/* ボタンなどは操作したいので pointer-events を戻す */
#home .hero-ui a, #home .hero-ui button {
  pointer-events: auto;
}
#home .swiper-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  box-sizing: border-box;
  overflow: visible;
  background-image: url('https://pharmastream.jp/wp-content/themes/pharmastream/images/swiper_controls.svg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  min-height: 17vh;
}
/* 左右の矢印ボタンの設定 */
#home .swiper-button-prev, #home .swiper-button-next {
  position: static; /* Swiper既定のabsoluteを解除 */
  margin: 0;
  flex-shrink: 0; /* ボタンが縮まないように固定 */
  /* Swiperのデフォルトの擬似要素（矢印）を表示させるために必要 */
  display: flex;
  align-self: flex-end;
  justify-content: center;
}
/* テキストエリアの設定（可変サイズ） */
#home .display-text {
  flex: 1; /* 余ったスペースをすべて専有 */
  text-align: left;
  margin: 0 30px; /* ボタンとテキストの間の最低限の隙間 */
  line-height: 1.6;
    font-size: 1.6rem;
}
/*swiperに重ねるボタン*/
.badge-wrap.pcOnly {
  position: absolute;
  /* 1920px基準のトップ・ライト位置 */
  top: 5.2083%; /* 100px / 1920px */
  right: 13.0208%; /* 250px / 1920px */
  z-index: 100;
  display: flex;
  flex-direction: column;
  pointer-events: none; /* 親の余白が下の要素を邪魔しないように */
}
.badge-circle {
  position: relative;
  width: 160px;
  height: 160px;
  z-index: 11;
  pointer-events: auto; /* クリック有効化 */
}
.badge-bomb {
  position: absolute;
  top: 110px;
  /* leftを削除し、rightを指定します */
  /* 親の右端からどのくらい「内側」に入れるか、または「外」に出すかを調整 */
  right: -160px;
  width: 276px;
  height: 276px;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
/* 爆弾ボタンの中の画像サイズ調整 */
.badge-bomb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pcBtnArea {
  position: absolute;
  right: 8%;
  bottom: 0px;
  width: 425px;
  height: 458px
}
@media (max-width: 1200px) {
  .pcBtnArea {
    right: 6%;
  }
}
/* ログイン */
.login-circle {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 329px;
  height: 329px;
  z-index: 30;
  pointer-events: auto;
}
/* 法人 */
.corp-circle {
  position: absolute;
  width: 160px;
  height: 160px;
  right: 120px;
  top: 0;
  z-index: 31;
  pointer-events: auto;
}
/* 新規登録 */
.entry-wrap {
  position: absolute;
  width: 160px;
  height: 160px;
  right: 0;
  top: 80px;
  z-index: 32;
  pointer-events: auto;
  display: block;
}
.entry-menu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  z-index: 3;
  transition: .35s;
}
/* 開いた時 */
.entry-wrap.is-open .entry-menu {
  opacity: 1;
  pointer-events: auto;
}
/* 丸ボタンを隠す */
.entry-wrap.is-open .entry-main {
  opacity: 0;
}
.entry-btn {
  background: #a499c9;
  color: #fff;
  padding: 17px 17px 17px 53px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  min-width: 270px;
  min-height: 90px;
  transition: .25s;
}
.entry-btn:hover {
  filter: brightness(1.08);
}
.entry-btn:first-of-type {
  background-color: #eda02f;
}
.entry-btn:nth-of-type(2) {
  background-color: #6bc8ff;
}
.entry-btn:first-of-type, .entry-btn:nth-of-type(2) {
  color: #fff;
  text-decoration: none;
}
/* ===== 矢印（中央配置版）===== */
.arrow-line {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 2px;
  margin-top: 13.5px;
  border-radius: 9999px;
}
.arrow-line::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 15px;
  height: 2px;
  border-radius: 9999px;
  transform: rotate(45deg);
  transform-origin: calc(100% - 0.5px) 50%;
}
.entry-wrap .arrow-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #fff;
}
.entry-wrap .entry-btn:first-of-type .arrow-line, .entry-wrap .entry-btn:first-of-type .arrow-line::before {
  background-color: #eda02f;
}
.entry-wrap .entry-btn:nth-of-type(2) .arrow-line, .entry-wrap .entry-btn:nth-of-type(2) .arrow-line::before {
  background-color: #6bc8ff;
}
@media (hover:hover) {
  .entry-wrap:hover .entry-main {
    opacity: 0;
  }
  .entry-wrap:hover .entry-menu {
    opacity: 1;
    pointer-events: auto;
  }
}
.entry-wrap.is-open .entry-main {
  opacity: 0;
}
.entry-wrap.is-open .entry-menu {
  opacity: 1;
  pointer-events: auto;
}
.arrow-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.arrow-circle .arrow-line {
  width: 1.3em;
  margin-top: 0;
}
.arrow-circle .arrow-line::before {
  width: 7px;
  height: 2px;
}
.bomb-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
.bomb-item.is-visible {
  opacity: 1;
  pointer-events: auto;
}
/* 子要素のボタンだけをクリック可能に戻す */
#home .swiper-controls .swiper-button-prev, #home .swiper-controls .swiper-button-next, #home .login-circle, #home .corp-circle, #home .entry-wrap {
  pointer-events: auto !important;
}
@media (max-width: 1200px) {
  .swiper-button-prev, .swiper-button-next, .swiper-pagination {
    display: none !important;
  }
}
/*アニメーション用*/
.swiper {
  overflow: hidden;
  max-height: inherit;
}
.swiper-slide {
  position: relative;
  overflow: visible;
  font-family: "Noto Sans JP", sans-serif;
}
.center-message {
  position: absolute;
  top: 59.6296%;
  left: 39.0625%;
  z-index: 999;
}
/* テキスト */
.message-text {
  font-size: clamp(8px, 2vw, 14px);
  color: #777;
  text-align: center;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(16px);
  animation: textUp .8s ease-out forwards;
  animation-delay: .3s;
  display: inline-block;
  margin: 0 16px;
}
/* 点滅アニメーション */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.blinkitem {
  position: relative;
  display: inline-block;
  text-align: center;
  padding: 0 1em;
}
/* ======================
   共通（2本セット）
====================== */
.slash {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 140%;
  transform: translateY(-50%);
}
/* 線2本を疑似要素で作る */
.slash::before, .slash::after {
  content: "";
  position: absolute;
  width: 1px;
  background: #b4b4b4;
  animation: blink 1.2s infinite;
}
/* ========= 左側 ========= */
.slash.left {
  left: -20px;
}
/* 内側（長い） */
.slash.left::before {
  height: 100%;
  left: 0;
  transform: rotate(-30deg);
}
/* 外側（短い＆下） */
.slash.left::after {
  height: 55%;
  left: -16px;
  bottom: 10%;
  transform: rotate(-42deg);
}
/* ========= 右側 ========= */
.slash.right {
  right: -20px;
}
.slash.right::before {
  height: 100%;
  right: 0;
  transform: rotate(30deg);
}
.slash.right::after {
  height: 55%;
  right: -16px;
  bottom: 10%;
  transform: rotate(42deg);
}
/* テキスト出現 */
@keyframes textUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 線の点滅（やさしく） */
@keyframes lineBlink {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}
/*swiper上の1文字ずつ表示するアニメーション*/
.animationTxt {
  position: absolute;
  top: 30vh;
  left: 15vw;
  width: 600px;
  pointer-events: none;
  font-weight: normal;
}
.animationTxt2 {
  position: absolute;
  bottom: 17vh;
  left: 6vw;
  width: 550px;
  pointer-events: none;
  font-weight: normal;
}
.animationTxt3 {
  position: absolute;
  top: 37vh;
  left: 19vw;
  width: 90%;
  max-width: 600px;
  pointer-events: none;
  font-weight: normal;
}
.animationTxt4 {
  position: absolute;
  bottom: 14vh;
  left: 8vw;
  width: 90%;
  max-width: 600px;
  pointer-events: none;
  font-weight: normal;
}
.animationTxt5 {
  position: absolute;
    bottom: 14vh;
    left: 7vw;
  width: 90%;
  max-width: 600px;
  pointer-events: none;
  font-weight: normal;
}
.animationTxt, .animationTxt2, .animationTxt3, .animationTxt4, .animationTxt5 {
  position: absolute;
  width: 600px; /* 表示上の横幅を統一 */
  height: auto;
  pointer-events: none;
}
/* すべてのSVG内の文字サイズを 21px で統一 */
.curve-message {
  font-size: 20px !important;
  fill: #868686;
  letter-spacing: .05em;
  font-family: "Noto Sans JP", sans-serif;
}
/* SVG自体の比率維持設定 */
.animationTxt svg, .animationTxt2 svg, .animationTxt3 svg, .animationTxt4 svg, .animationTxt5 svg {
  width: 100%;
  height: auto;
  display: block;
}
.animationTxt svg, .animationTxt2 svg, .animationTxt3 svg, .animationTxt4 svg {
  fill: #868686;
}
/* 5枚目だけ白文字 */
.swiper-slide.fillwhite .curve-message, .swiper-slide.fillwhite .curve-message .char {
  fill: #fff !important;
}
.curve-message.sub {
  margin-top: 1em;
}
@media screen and (max-width: 1023px) {
  :root {
    --circle-size: clamp(88px, 11.1vw + 46px, 160px);
  }
  .spBtnArea {
    position: absolute;
    width: 100%;
    bottom: 0px;
    max-height: 459px;
    min-height: 200px;
  }
  .spAboutBtn {
    position: relative;
    width: 100%;
  }
  .badge-wrap {
    position: absolute;
    z-index: 1100;
    right: 10px;
    top: 115px;
    width: var(--circle-size);
    height: var(--circle-size);
  }
  /* 4. 通常時（メニューが閉じてる時）のボタン */
  .spAboutBtn {
    position: relative;
    width: 100%;
    /* 通常時はヘッダー背景(100)などより高くしておく */
    z-index: 1100;
  }
  .badge-wrap .badge-circle {
    width: 100%;
    height: 100%;
  }
  .spAboutBtn .badge-wrap {
    position: absolute;
  }
  .spBtnArea .badge-circle {
    top: 80px;
    right: 2%;
    min-width: 88px;
    min-height: 88px;
    width: clamp(88px, 8vw, 160px);
    width: 100%;
    height: 100%;
  }
  .display-text {
    padding-right: 0;
    position: absolute;
    top: 180px;
  }
  /* キャンペーン */
  .spBtnArea .badge-bomb {
    left: -3%;
    bottom: 0px;
    width: 180px;
    height: 180px;
    right: auto;
    top: auto;
    z-index: 31;
  }
  /* ログイン */
  .spBtnArea .login-circle {
    bottom: 30px;
    right: -3%;
    left: auto;
    height: 180px;
    width: 180px;
    position: absolute;
  }
  /* 法人 */
  .spBtnArea .corp-circle {
    position: absolute;
    width: var(--circle-size);
    height: var(--circle-size);
    right: calc(-6% + (clamp(180px, 12.3vw + 134px, 260px) * 0.95));
    bottom: 70px;
    top: inherit;
    z-index: 31;
    pointer-events: auto;
  }
  /* 新規登録 */
  .spBtnArea .entry-wrap {
    position: absolute;
    width: var(--circle-size);
    height: var(--circle-size);
    /* 【重要】配置の計算 */
    /* login-circleと同じく右端（-3%）を基準にし、そこから円の幅の55.55%分左へ寄せる */
    right: calc(-3% + (clamp(180px, 12.3vw + 134px, 260px) * 0.65));
    bottom: 10px;
    top: inherit;
    z-index: 99999 !important;
    pointer-events: auto;
    display: block;
  }
  .spBtnArea .entry-menu {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: .35s;
  }
  .spBtnArea .entry-wrap.is-open .entry-menu {
    opacity: 1;
    pointer-events: auto;
  }
  .spBtnArea .entry-wrap.is-open .entry-main {
    opacity: 0;
  }
  #home .swiper-controls {
    height: auto;
    min-height: 10vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .swiper-controls .swiper-button-prev, .swiper-controls .swiper-button-next {
    display: none;
  }
  .spOnly.display-text {
    position: relative;
    top: inherit;
    margin: 0em 20px !important;
    font-size: 12px !important;
  }
}
@media screen and (max-width: 1024px) {
  #home-hero {
    position: relative;
    width: 100%;
    height: max(60vh, 80vh);
    overflow-x: hidden;
  }
  .center-message {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
  }

.curveText{
width:90%;
margin:auto;
display:block;
}    
   .curveText{
transform:scale(0.9);
transform-origin:center;
} 
    .swiper-slide svg{
max-width:100%;
height:auto;
}
    
  .hero-slider .curve-text {
    transform: translateY(-20px); /* 上寄せ */
  }
  /* スマホ表示でSVGの高さを縮める場合 */
  .hero-slider .curve-text {
    height: auto; /* 親要素内で自動調整 */
  }

  /* ===== SVG全体サイズ ===== */
  .animationTxt .curve-text, .animationTxt2 .curve-text, .animationTxt3 .curve-text, .animationTxt4 .curve-text, .animationTxt5 .curve-text {
    width: 100%;
    height: auto;
  }
  .animationTxt {
    width: 85vw;
    left: -10vw;
    top: 21vh;
  }
  .animationTxt2 {
    width: 85vw;
    left: -12vw;
    top: 39vh;
  }
  .animationTxt3 {
    width: 85vw;
    left: -8vw;
    top: 26vh;
  }
  .animationTxt4 {
    width: 85vw;
    left: 16vw;
    top: 17vh;
  }
  .animationTxt5 {
    width: 85vw;
    left: -15vw;
    top: 44vh;
  }
tspan{
font-size:12px !important;
letter-spacing:-0.02em;
    }
  .animationTxt svg,
 .animationTxt2 svg,
.animationTxt3 svg,
.animationTxt4 svg,
.animationTxt5 svg{
transform:scaleY(0.85);
}   
    
    .entry-wrap {
    overflow: visible !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
  }
  /* クラスがついた時、メニューを強制表示 */
  .entry-wrap.is-open .entry-menu {
    display: flex !important; /* blockよりflexの方が既存スタイルに合う場合があります */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* 位置が変わらないよう担保 */
    position: absolute !important;
    flex-direction: column;
  }
  .entry-btn {
    padding: 10px 10px 10px 30px !important;
    min-width: 200px;
    min-height: 55px;
  }
  .entry-wrap .arrow-circle {
    width: 34px;
    height: 34px;
  }
  /* ボタン本体のタップ判定を「面」で作る */
  .entry-main {
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
  }
  /* 中の画像や文字がタップを邪魔しないようにする */
  .entry-main *, .entry-main img {
    pointer-events: none !important;
  }
}
/* PC：ホバー時は既存の挙動を維持 */
@media screen and (min-width: 1025px) {
  .entry-wrap:hover .entry-menu {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* スマホ（767px以下）の時 */
@media screen and (max-width: 767px) {
  .hero-swiper .swiper-slide img {
    /* 画像を縮小して全体を表示させる */
    object-fit: contain;
    /* もし背景に余白ができるのが気になる場合は、
       画像に合わせた背景色を指定すると綺麗です */
    background-color: #fff;
  }
  /* スマホ時にスライダーの高さを画像に合わせて自動調整したい場合 */
  .hero-swiper {
    height: auto;
  }
}
.circle-menu {
  display: flex;
  justify-content: space-around;
  max-width: 1260px;
  width: 100%;
  margin: auto;
  gap:15px;
}
.circle-menu li {
  list-style: none;
/*  flex: 0 0 14%;           100% ÷ 7個 ≒ 約14% */
  /* もし7つ並べるなら14%程度を指定すると横に並びます */

}

.circle-menu li img {
  display: block;
  width: 100%;            /* liの幅いっぱいに広がる */
  height: auto;
}
.curve-message .char, .curve-message2 .char {
  fill-opacity: 0; /* SVG用 */
  transition: fill-opacity 0.3s ease;
}
.curve-message.animate .char, .curve-message2.animate .char {
  animation: fadeInChar 0.5s forwards;
  animation-delay: calc(var(--i) * 0.07s);
}
@keyframes fadeInChar {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}
/* slide5 白文字対応 */
.swiper-slide.fillwhite .curve-message .char {
  fill: #fff !important;
}
/* 共通のベース設定 */
.curve-message {
  display: block;
  overflow: visible !important;
  width: 100%;
  height: auto;
}
.animationTxt svg {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 480px) {
  /* 曲線テキスト（SVG）を非表示にする */
  .animationTxt, .animationTxt2, .animationTxt3, .animationTxt4, .animationTxt5 {
    display: none !important;
  }
  .sp-plain-text {
              position: absolute;
  }
    .sp-plain-text img{
              background-color: transparent !important;
    }    
    .slide1 .sp-plain-text{
        top: 174px;
        left: 36px;
        max-width: 149px;
    }
     .slide2 .sp-plain-text{
        top: 297px;
        left: 20px;
        max-width: 149px;
    }
    .slide3 .sp-plain-text{
        top: 195px;
        left: 20px;
        max-width: 149px;
    }
    .slide4 .sp-plain-text{
        top: 139px;
        left: 128px;
        max-width: 149px;
    }
    .slide5 .sp-plain-text{
        top: 344px;
        left: 20px;
        max-width: 149px;
    }    
}
@media screen and (max-width: 768px) {
  /* 曲線テキスト（SVG）を非表示にする */
  .animationTxt, .animationTxt2, .animationTxt3, .animationTxt4, .animationTxt5 {
    display: none !important;
  }
  .sp-plain-text {
              position: absolute;
  }
    .sp-plain-text img{
              background-color: transparent !important;
        max-width: 30vw;
    }    
    .slide1 .sp-plain-text{
        top: 234px;
        left: 12vw;

    }
     .slide2 .sp-plain-text{
top: 44vh;
        left: 6vw;

    }
    .slide3 .sp-plain-text{
        top: 195px;
        left: 20px;

    }
    .slide4 .sp-plain-text{
        top: 139px;
        left: 128px;

    }
    .slide5 .sp-plain-text{
        top: 287px;
        left: 20px;
    }    
}
/* PCの時は代わりのテキストを隠す */
@media screen and (min-width: 1025px) {
  .sp-plain-text {
    display: none !important;
  }
}