@charset "UTF-8";

/* =========================== Reset & Base =========================== */
*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {  height: 100%;  scroll-behavior: smooth; overflow-y: scroll;}
body {
    font: 16px/2.0 'Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, sans-serif;
    color: #333;
    -webkit-text-size-adjust: 100%;
    background: #fafafa;
}
ul { list-style: none; }
ol {
  list-style-position: inside;
}
img, fieldset { border: 0; }
img {
    max-width: 100%;
    height: auto;
}
table { width: 100%;  border-collapse: collapse;}
th, td { text-align: left; vertical-align: top;}
a { color: #333; text-decoration: none;}
a:hover,a:active { text-decoration: none;}
div.inner {
    max-width: 1400px;
    margin: 0 auto;
}
@media (max-width: 768px) {
  div.inner {
      width: 100%;
      margin: 0 auto;
      padding: 0 3%;
  }
  section.recommend div.inner {
      padding: 0 1%;
  }
  section.offer div.inner {
      padding: 0 0;
  }
  section.infomation div.inner {
      padding: 0 1%;
  }
}
/* =========================== common classes =========================== */
section h1 {
  margin: 0 auto 30px;
}
section h2 {
  margin: 0 auto 30px;
}
section h3 {
  margin: 0 auto 20px;
}
h2.s-ttl {
  border-radius: 9999px; /* ピル型にする最重要ポイント */
  width: 80%;
  padding: 10px 3%;
  font-size: 200%;
  font-weight: normal;
  margin-bottom: 20px;
  letter-spacing: 0.23vw;
}
h2.s-ttl.tc-green {
  background-image: linear-gradient(45deg, #16a085, #2ecc71); color: #fff;
}
h2.s-ttl.tc-yellow {
  background-image: linear-gradient(to top, #ffc53a, #ffeb3b);
  color: #333;
}
h3.s-ttl {
  position: relative; /* 疑似要素の基準位置 */
  z-index: 2; /* 見出しのテキストを最前面に */
  font-size: 150%;
  font-weight: bold;
  color: #333;
  padding: 7px 3%;
  width: 70%;
  margin:0 0 30px;
  letter-spacing: 0.13vw;
}
h3.s-ttl.tc-beige::before,
h3.s-ttl.tc-pink::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: calc(100% + 3px);
  height: calc(100% + 3px);
  z-index: -1;
}
h3.s-ttl.tc-beige::before {
  background-color: #fce8d1; /* 背面のベージュ色 */
}
h3.s-ttl.tc-pink::before {
  background-color: #ffd3d3; /* 背面のベージュ色 */
}
h3.s-ttl::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #333; /* 表面の罫線 */
  z-index: 1; /* 背景とテキストの間に配置 */
}
h4.s-ttl {
  font-size: 160%;
  font-weight: bold; /* フォントの太さ */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0;
}
h4.s-ttl.tc-orange {
    background-image: linear-gradient(to right, #f39c12, #e67e22); /* 活気のあるオレンジ */
}
h4.s-ttl.tc-green {
    background-image: linear-gradient(45deg, #16a085, #2ecc71); /* エメラルドグリーン */
}
@media (max-width: 768px) {
  h2.s-ttl,
  h3.s-ttl,
  h4.s-ttl {
    margin: 0 auto 20px;
    text-align: center;
  }
  h2.s-ttl {
    width: 95%;
    font-size: 200%;
  }
  h3.s-ttl {
    width: 90%;
    font-size: 160%;
  }
  h4.s-ttl {
    width: 90%;
    font-size: 140%;
    margin: 0 auto 0;
  }
}
div.title-set {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  margin-bottom: 30px;
}
.title-set.is-reverse {
  flex-direction: row-reverse;
}
div.title-set .text,
div.title-set .photo,
div.title-set .photo-ps {
  flex: 1;
}
div.title-set h2 {
    font-size: 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-image: linear-gradient(to bottom, #169548, #0f522e);
    line-height: 1.5;
}
div.title-set p.lead {
    font-size: 160%;
    font-weight: bold;
    line-height: 1.6;
    margin:0 0 20px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-image: linear-gradient(135deg, #2a9261, #169548);
}

div.title-set h3 {
  margin-bottom: 15px;
}

div.title-set h3 .s {
  padding: 10px;
}

div.title-set h3 .s .n {
  font-size: 250%;
}
div.title-set h3 .c {
  position: relative;
  display: inline-block;
  padding: 0 7px 0 0;
  border: 2px solid #ffe2ce;
  background-color: #ffe2ce;
  font-weight: normal;
}

div.title-set h3 .c::before {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 105%;
  height: 114%;
  border: 1px solid #212121;
  content: '';
}

div.title-set h3 .m {
  display: block;
  font-size: 250%;
  margin-top: -20px;
  line-height: 1.4;
}

div.text-set {
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
  margin:0 auto 30px;
  max-width: 1200px;
}
.text-set > * {
  flex: 1 1 0;
}

/* 共通のFlexbox設定 */
.text-set,
.title-set { display: flex; gap: 20px; align-items: center; }

.is-reverse { flex-direction: row-reverse; }

.text-set.ratio-1-1, .title-set.ratio-1-1 { --ratio-1: 1; --ratio-2: 1; }
.text-set.ratio-1-2, .title-set.ratio-1-2 { --ratio-1: 1; --ratio-2: 2; }
.text-set.ratio-1-3, .title-set.ratio-1-3 { --ratio-1: 1; --ratio-2: 3; }
.text-set.ratio-1-4, .title-set.ratio-1-4 { --ratio-1: 1; --ratio-2: 4; }
.text-set.ratio-2-1, .title-set.ratio-2-1 { --ratio-1: 2; --ratio-2: 1; }
.text-set.ratio-3-1, .title-set.ratio-3-1 { --ratio-1: 3; --ratio-2: 1; }
.text-set.ratio-4-1, .title-set.ratio-4-1 { --ratio-1: 4; --ratio-2: 1; }


/* 
  【ステップ1】デフォルトの比率を適用します。
  テキスト側（.text）に --ratio-1 を、画像側（.img/.photo）に --ratio-2 を適用します。
*/
div.text-set[class*="ratio-"] > .text,
div.title-set[class*="ratio-"] > .text {
    flex: var(--ratio-1);
}

div.text-set[class*="ratio-"] > .img,
div.title-set[class*="ratio-"] > .photo {
    flex: var(--ratio-2);
}

/* 
  【ステップ2】.is-reverse が付いている場合、【ステップ1】のルールを上書きします。
  テキスト側と画像側に適用する変数を「入れ替え」ます。
*/
div.text-set.is-reverse[class*="ratio-"] > .text,
div.title-set.is-reverse[class*="ratio-"] > .text {
    flex: var(--ratio-2); /* ← ratio-1 から ratio-2 に変更 */
}

div.text-set.is-reverse[class*="ratio-"] > .img,
div.title-set.is-reverse[class*="ratio-"] > .photo {
    flex: var(--ratio-1); /* ← ratio-2 から ratio-1 に変更 */
}

div.photo-row-2 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin:0 auto 30px;
  max-width: 1200px;
  gap:20px;
}

div.photo-row-2 > * {
  flex: 1;
  margin-bottom: 10px;
}
div.photo-row-2 figcaption {
  text-align:center;
}
div.photo-row-2 img {
  display: block;
  margin: 0 auto;
}
div.photo-row-3 {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin:0 auto 30px;
  max-width: 1200px;
  gap:20px;
}
div.photo-row-3 > * {
  flex: 1;
  margin-bottom: 10px;
}
div.photo-row-3 img {
  display: block;
  margin: 0 auto;
}
div.photo-row-2 figcaption,
div.photo-row-3 figcaption {
  text-align:center;
  font-size: 110%;
}
div.photo-row-2 figcaption strong,
div.photo-row-3 figcaption strong {
  display: block;
  font-size: 120%;
}
figure.img-set {
  margin:0 auto 30px;
}
div.next-word {
  font: italic bold 200%/1.4 'Noto Serif JP', serif;
  font-feature-settings: "palt";
  margin:0 auto 30px;
  text-align: center;
}
div.text-block{
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  div.title-set,
  div.text-set {
    flex-direction: column;
  }
  .title-set.is-reverse,
  .text-set.is-reverse {
    flex-direction: column;
  }

  section.howtoimprove .title-set.is-reverse,
  section.howtoimprove .text-set.is-reverse {
    flex-direction: column-reverse;
  }
  section.howtoimprove h3 .m {
    font-size: 180%;
  }
  h4.ttl-grn,
  h4.ttl-ylw {
    width: 90%;
    margin:0 auto 20px;
    font-size: 160%;
  }
  p.next-word {
    font-size: 200%;
  }
  div.photo-row-2,
  div.photo-row-3 {
    flex-direction: column;
    align-items: center;   /* 画像もキャプションも水平中央 */
  }
  div.title-set h2,
  div.title-set h3 {
    text-align: center;
  }
  div.photo-row-2 {
    max-width: 95%;
  }
  div.photo-row-3 {
    max-width: 95%;
  }

}

/* =========================== lower classes =========================== */
div.lower {
  background: transparent;
  margin: 0 0;
  padding: 0 0;
}
div.l_inner h1 {
    max-width: 1000px;
    margin: 0 auto;
    font-size: 240%;
    line-height: 1.6;
}
div.l_inner .breadcrumb {
    max-width: 1000px;
    margin: 0 auto;
}
div.low-p  {
  max-width: 1000px;
  margin:0 auto;
  padding: 20px 0;
}
div.low-p h2.s-ttl {
    margin: 0 auto 30px;
    text-align: center;
}
div.low-p div.text-block {
  width: 80%;
  margin: 0 auto 30px;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  background: rgba(255,255,255,.30);  /* ← 背景だけ透過 */
  background-clip: padding-box;        /* ← 角の縁に出る段差/にじみ防止 */
}
div.low-p div.text-block p {
  margin-bottom: 20px;
}
div.low-p div.text-block p:last-child {
  margin-bottom: 0;
}
div.low-p div.title-set .text,
div.low-p div.text-set .text {
  width: 90%;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  background: rgba(255,255,255,.30);  /* ← 背景だけ透過 */
}

div.low-p h3.s-ttl {
  margin:0 auto 30px;
}
div.low-p h3.s-ttl.tc-beige::before {
  background-color: #fff; /* 背面のベージュ色 */
}
div.low-p h3.s-ttl.tc-pink::before {
  background-color: #ffd3d3; /* 背面のベージュ色 */
}

div.low-p h4.s-ttl {
  margin:0 auto 30px;
  text-align: center;

}

.list-block {
  width: 80%;
  margin: 0 auto 30px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  background: rgba(255,255,255,.30);  /* ← 背景だけ透過 */
}
.list-block .list {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}
.list-block li {
    background: url(../images/common/bg-list-bad.png) no-repeat left center;
    padding: 10px 0 10px 40px;
}

.list-block.check li {
    background: url(../images/common/bg-s-list.png) no-repeat left center;
    padding: 10px 0 10px 40px;
}

/* ページ全体に動画を敷く：常に裏側へ */
.sub-p {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* ← ここが重要：fixed + z-index:-1 で絶対に背面へ送る */
.sub-p .bgv {
  position: fixed;
  inset: 0;
  z-index: -1;            /* 背景確定 */
  pointer-events: none;   /* 念のためクリックを奪わない */
  overflow: hidden;
}
.sub-p .bgv__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 全体を少し“白で薄める”ならここで */
.sub-p .bgv__wash {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255, .75); /* お好みで .15〜.4 */
}

/* 中央の .l_inner を読みやすくする白半透明の板 */
.sub-p .l_inner {
  position: relative;
  z-index: 1;                     /* 前面に固定 */
  margin: 0 auto 0;
  padding: 60px 24px;
  background: rgba(255,255,255,.3);/* ← ここが“白を引く”本体 */
  backdrop-filter: blur(2px);     /* 任意：動画のにじみを少し抑える */
}

/* フェード用の opacity を一旦無効化（見えない原因の元） */
.sub-p .bgv__media { opacity: 1; transition: none; }  /* ←ここを強制 */


.low-p {
  padding:20px 0;
}

@media (max-width: 768px) {
  div.low-p h2.s-ttl{
    font-size: 160%;
  }
  div.low-p h3.s-ttl {
      font-size: 140%;
  }
  div.low-p  {
    max-width: 100%;
  }
  div.low-p div.text-block {
    width: 90%;
    padding: 3%;
  }
  div.low-p .list-block {
    width: 90%;
    padding: 3%;
  }
  .sub-p .l_inner {
    padding: 30px 24px;
  }

}

/* =========================== header classes =========================== */
html.no-scroll,
body.no-scroll {
  overflow: hidden;   /* スクロールを完全に停止 */
}

/* ナビゲーションのズレ補正用 */
.s-navi.no-scroll-fix {
  padding-right: var(--scrollbar-width);
}
header {
    padding: 20px 0;
    background: #fff;
}
header .inner {
    display: flex;
    justify-content: center; 
}
header .inner h1.logo,
header .inner div.logo {
    width: 30%;
}
header .inner nav {
    width: 66%;
    display: flex;
    justify-content: center; 
}

header .inner .global-nav .nav-menu {
    display: flex;
    justify-content: center; 
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

header .inner .global-nav .nav-menu li a {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: 0.3s ease;
}
.s-navi {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: transform 0.4s ease;
  transform: translateY(-100%);
}
.s-navi.show {
  transform: translateY(0);
}

.s-navi .inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.s-navi h1 img {
  max-height: 50px;
}
#menu-g-navi.nav-menu {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
#menu-g-navi.nav-menu li a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  padding: 8px 0;
  transition: color 0.3s;
}
#menu-g-navi.nav-menu li a:hover {
  color: #007bff;
}
.hamburger {
  position: absolute;
  top: 10px;
  right: 120px;
  width: 48px;
  height: 48px;
  background-color: #1b7e42; 
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  z-index: 1000;
  transition: background-color 0.3s ease;
}
.hamburger.scroll-fix {/* ズレ補正用 */
  right: calc(120px + var(--scrollbar-width));
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: all 0.3s ease;
  transform-origin: center;
}

/* アクティブ時（✕化） */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  position: absolute;
  top: 22px;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  position: absolute;
  top: 22px;
}
.mobile-nav {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: #219750;
  z-index: 998;
  list-style: none;
  margin: 0;
  padding: 0;
  transform: scale(0);
  transform-origin: top right; /* ←ここが重要：右上起点に */
  opacity: 0.2;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.25, 1.5, 0.5, 1), opacity 0.4s ease;
}
.mobile-nav.active {
  display: flex;
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
  padding: 40px;
}
.mobile-nav.active h1 {
  margin:50px auto 20px 40px;
}
.mobile-nav.active h1 img {
  max-height: 100%;
}
.mobile-nav.active h2 {
  color: #fff;
  font-size: 190%;
  font-weight: normal;
}
.mobile-nav.active .mn_inner {
  display: flex;
  width: 95%;
  padding: 0 30px;
  flex-direction: row;
  gap: 30px;
}
.mobile-nav.active .f-menu {
  width: 33%;
}
.mobile-nav.active ul.fmenu {
  margin: 0 0 0 10px;
}  
.mobile-nav.active ul.fmenu li a {
  font-size: 100%;
  color: #fff;
  position: relative;
  display: inline-block;
  padding-left: 20px;
}
.mobile-nav.active ul.fmenu li a:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 5px;
  bottom: 0;
  margin: auto;
}
.mobile-nav li {
  margin-bottom: 10px;
  color: #fff;
}
.mobile-nav.active ul.clist li {
  margin: 0 0 -10px;
}
.mobile-nav ul.access li {
  margin: 0 0 0 10px;
}
.mobile-nav ul.access li {
  margin-bottom: 5px;
}

/* スクロール禁止 */
.no-scroll {
  overflow: hidden;
}
body.no-scroll {
  overflow: hidden;
  padding-right: 17px;
}
@media (max-width: 768px) {
  header {
      padding: 10px 0 0;
  }
  #menu-g-navi.nav-menu {
    display: none;
  }
  .s-navi .inner {
      width: 100%;
      padding: 5px 0;
      display: block;
  }
  header .inner h1 {
      width: 60%;
      margin: 0 auto;
      transform: translateX(-30px);
  }
  .hamburger {
    top:10px;
    right:30px;
  }
  .hamburger.scroll-fix {
      right: calc(30px + var(--scrollbar-width));
  }
  .mobile-nav.active {
    display: flex;
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
    padding: 0;
  }
  .mobile-nav.active h1 {
    margin:0 auto 10px;
  }

  .mobile-nav.active .mn_inner {
    flex-direction:column;
    padding: 0 0 0;
  }
  .mobile-nav.active h2 {
    border-bottom: 1px solid #fff;
    margin:0 auto 20px;
  }
  .mobile-nav.active h2.contents {
    margin:0 auto 0;
  }
  .mobile-nav.active .f-menu {
    width: 100%;
    margin:0 0 20px;
  }
  .mobile-nav.active ul.fmenu {
    margin:0 0 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .mobile-nav.active ul.fmenu li {
    display: flex;
    flex: 0 0 50%; 
    margin-bottom: 0;
    padding: 10px 0;
    border-bottom: 1px solid #fff;
  }
  .mobile-nav.active ul.fmenu li a {
    flex: 1;
    display: flex;
    align-items: center;  /* 縦中央 */
  }
  .mobile-nav.active ul.clist li img {
    display: block;
    margin: 0 auto;
  }

  /* ① モバイルメニュー自体をスクロール可能にする */
  .mobile-nav {
    /* 既存に追加 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* iOS 慣性スクロール */
    overscroll-behavior: contain;        /* バウンドで背面に伝播させない */
  }

  /* ② 中身を縦フレックス＆スクロール領域を明示 */
  .mobile-nav.active {
    display: flex;
    flex-direction: column; /* ←中身を縦に積む */
    height: 100dvh;         /* アドレスバー高に追従（iOS/Android） */
  }

  /* ③ スクロールさせたい領域をflexの“伸縮する箱”にして回す */
  .mobile-nav.active .mn_inner {
    flex: 1 1 auto;        /* 余白を受け持つ領域に指定 */
    min-height: 0;         /* ←これ超大事（flex子のoverflowを有効に） */
    overflow-y: auto;      /* 中身が溢れたらここでスクロール */
  }
.mobile-nav.active .mn_inner { max-height: calc(100dvh - 140px); }

}

/* =========================== hero section =========================== */

.hero {
    background: linear-gradient(to right, #d1eab5 50%, #eef1ee 50%);
    position: relative;
}
.hero picture {
    display: block;
    max-width: 1400px;
    margin: 0 auto;
}

/* =========================== second section =========================== */

.message {
  overflow-x: hidden;
  background: url(../images/common/bg-leaf.webp) no-repeat top right;
}
.message .inner {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  padding: 60px 20px;
}

.message__image {
   flex: 2;
   transform: translateX(40px); /* ←ここで“右に寄ってる感”を出す */
}

.message__image img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
  padding-top: 1rem;
}
.message__text {
  flex: 3;
}
.message__text h2 {
    font-size: 250%;
    font-weight: 400;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
}
.message__text h2 span {
    font-weight: 700;
    color: #00731a;
}
.message__text h2 + div.message__main {
    transform: translateX(40px); /* もしくはpx単位で調整 */
}
.message__main p {
  margin-bottom: 15px;;
}


@media (max-width: 768px) {
  .message .inner {
    flex-direction: column-reverse;
  }
  .message__image {
    transform: none;
  }
    .message__text h2 {
        font-size: 160%;
    }
    .message__text h2 + div.message__main {
        transform: translateX(0); 
    }
}

/* =========================== bred section =========================== */

.wish-section .inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 120px;
}

.wish-section .image {
  transform: translate(-100px, 100px); /* X:右, Y:下 */
}

.wish-section .sub {
  font-size: 1rem;
  color: #fff;
  background: #40b36d;
  padding: 0.5em 1em;
  display: inline-block;
  margin-bottom: 0.5em;
}

.wish-section h2 {
  display: inline;
  background: #40b36d;
  color: #fff;
  padding: 3px 5px;
  font-size: 250%;
  word-break: break-word;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* Safari対応 */
}

.wish-section .list {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}

.wish-section .list li {
    background: url(../images/common/bg-s-list.png) no-repeat left center;
    padding: 10px 0 10px 40px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .wish-section .inner {
        flex-direction: column;
        padding-bottom: 0;
    }
    .wish-section h2 {
        text-align: center;
        margin:0 auto;
        font-size: 180%;
    }
    .wish-section .image {
        transform: translate(0, 0); /* X:右, Y:下 */
    }
}

/* =========================== bridge section =========================== */
section.bridge {
  background: #fff;
  text-align:center;
  font-size: 150%;
  font-style: oblique;
  padding:20px 0;
}
section.bridge.bg-green {
  background: #daf1bd;
}
@media (max-width: 768px) {
  section.bridge {
    font-size: 100%;
    padding:20px 1%;
  }
}
/* =========================== hospital section =========================== */

.hosital-first {
  background:url(../images/common/hospital-first.webp) repeat top center;
    text-align: center;
    padding: 50px 0 30px;
}


.hosp-wh {
  position: relative;
  transform: rotate(3deg);
  padding: 10px;
  margin-bottom: 40px;
  display: inline-block;
  font-family: 'Noto Serif JP', serif; 
}

.hosp-wh::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid white;
  pointer-events: none;
}

.hosp-bk {
  position: relative;
  background-color: #2c2c2c;
  padding: 30px 130px;
  max-width: 100%;
  transform: rotate(-3deg);
}

.hosp-wh h2 {
  color: #ffffff;
  text-align: center;
  line-height: 1.6;
  font-size: 200%;
  font-style: italic;
  font-weight: normal;
}

  .hosp-wh h2 .symptoms {
  color: #f6ff00;
  font-size: 150%;
}
  .hosp-wh h2 .goto {
  color: #e8d093;
}

div.hosp-txt {
  width: 60%;
  color:#fff;
  text-align: left;
  margin-inline: auto;
}

div.hosp-check {
  width: 60%;
  display: flex;
  align-items: flex-start;
  flex:1;
  gap: 20px;
  margin-inline: auto;
  margin-bottom: 20px;
}
div.hosp-check ul {
  background-color: rgba(40, 40, 40, 0.78);
  color: #fff;
  padding: 20px;
  font-size: 110%;;
  text-align: left;
}
div.hosp-check ul li {
  background: url(../images/common/bg-hosp-list.png) no-repeat left center;
  padding: 10px 0 10px 40px;
}

@media (max-width: 767px){
  .hosp-bk {
    padding: 20px 0;
    max-width: 100%;
    transform: rotate(-3deg);
  }
  .hosp-wh h2 {
    color: #ffffff;
    text-align: center;
    line-height: 1.6;
    font-size: 160%;
    font-style: italic;
    font-weight: normal;
  }
  div.hosp-check {
    flex-direction: column;
    width: 95%;
  }
  div.hosp-txt {
    width:100%;
  }
  div.hosp-check ul {
    padding: 20px 10px 20px 20px;
  }
}


/* =========================== process section =========================== */

.pain-process {
  background:url(../images/common/bg-process.webp) repeat top center;
}
.pain-process .inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  position: relative;
}
.pain-process .balloon {
  position: absolute;
  top: 50px;
  left: 7%;
  background: #806d5a;
  color: #fff;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  font-weight: bold;
  font-size: 220%;
  text-align: center;
  padding: 13px;
  transform: rotate(-8deg); /* ★左に傾ける */
  line-height: 1.5;
}
.pain-process .balloon::after {
  content: "";
  position: absolute;
  bottom: 15px;
  left: 100%;
  margin-left: -43px;
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 40px solid #806d5a;
  border-left-color: #806d5a;
  transform: rotate(20deg);
}
.pain-process .label {
  text-align: center;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.5em;
}
.pain-process h2 {
  text-align: center;
  font-size: 250%;
  line-height: 1.4;
  margin-bottom: 30px;
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
}
.pain-process h2 span {
  display: block;
}
.pain-process h2 span.lead {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3); /* 黒・30%の不透明度 */
  width: fit-content;
  margin: 0 auto 10px;
  padding: 0 10px;
  font-size: 90%;
  }
.pain-process h2 span.sub {
  color: #fff;
  text-shadow:
    0 0 8px rgba(255, 0, 0, 0.6),
    0 0 13px rgba(255, 0, 0, 0.4),
    0 0 18px rgba(255, 0, 0, 0.3);
  font-size: 120%;
  }
.pain-process h2 span.main {
  color: #333;
  text-shadow:
    0 0 8px rgba(255, 0, 0, 0.6),
    0 0 13px rgba(255, 0, 0, 0.4),
    0 0 18px rgba(255, 0, 0, 0.3);
  font-size: 140%;
  }
.pain-process article {
  display: flex;
  gap: 20px;
  background: transparent;
  border-radius: 10px;
  align-items: flex-start;
  padding: 0 0 60px;
}
.pain-process article:nth-child(odd) {
  flex-direction: row;
}
.pain-process article:nth-child(even) {
  flex-direction: row-reverse;
}
.pain-process article:nth-child(even) h3{
  text-align:right;
}
.pain-process article .text .content {
  background-color: rgba(255, 255, 255, 0.85); /* 白＋85%不透明 */
  padding: 10px;
  border-radius: 8px; /* 角丸で柔らかく */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.9); /* 白いぼかし縁 */
}
.pain-process article .text p {
  font-feature-settings: "palt";
}
.step-image img {
  max-width: 100%;
  text-align: right;
}
.step-image {
    transform: translateY(60px);
}
.pain-process article .text,
.pain-process article .step-image {
  flex: 1;
}
.pain-process article .text .content p {
  margin: 0 0 15px;
}
.pain-process article .text .content p:last-of-type {
  margin-bottom: 0;
}


.pain-process .text h3 {
  border-radius: 6px;
  margin: 0 0 20px;
}
.pain-process .text h3 span.number {
  display: block;
  color: #fff;
  font-size: 500%;;
  font-style: italic;
  text-shadow:
    0 0 18px rgba(37, 37, 37, 0.8),
    0 0 26px rgba(37, 37, 37, 0.6),
    0 0 36px rgba(37, 37, 37, 0.5);
}
.pain-process .text h3 span.text {
  display: block;
  color: #000;
  font-size: 200%;
  background-color: #fff;
  font-feature-settings: "palt";
  padding: 0 10px;
  line-height: 1.3;
}
.consequence {
  text-align: center;
  background: url(../images/common/bg-consequence.webp) repeat top center;
  padding: 0 0 50px;
}
.consequence .allow{
  display:block;
  margin:0 auto 20px;
}
.consequence .highlight {
  font: italic bold 300%/1.2 'Noto Serif JP', serif;
  font-feature-settings: "palt";
  color: #c00;
  margin-bottom: 1em;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 1.0),
    0 0 7px rgba(255, 255, 255, 1.0),
    0 0 9px rgba(255, 255, 255, 1.0);
}
.consequence picture img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

section.pain-process .word-ex {
  width: 85%;
  margin-inline: auto;
}
section.pain-process .word-ex h3  {
  text-align: center;
  font-family: 'Noto Serif JP', serif;
}
section.pain-process .word-ex h3 span.sub,
section.pain-process .word-ex h3 span.main {
  display: block;
  margin-inline: auto;
}
section.pain-process .word-ex h3 span.sub {
  font-size: 160%;
  color: #fff;
  font-weight: normal;
}
section.pain-process .word-ex h3 span.main {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 8px; 
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.9); 
  width: fit-content;
  font-size: 170%;
  padding: 10px;
}
div.title-set.symptoms h4 {
  font-size:160%;
  color: #fff;
}
div.title-set.symptoms div.text p  {
  background-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  padding: 10px;
}



.tri-down-outline{
  --w: 80px;    /* 底辺幅 */
  --h: 48px;    /* 高さ   */
  --stroke: 2px;/* フチの太さ */
  position:relative;
  display:inline-block; width:0; height:0;
}
.tri-down-outline::before,
.tri-down-outline::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left: calc(var(--w)/2 + var(--stroke)) solid transparent;
  border-right: calc(var(--w)/2 + var(--stroke)) solid transparent;
}
.tri-down-outline::before{ /* 外側＝フチ */
  border-top: calc(var(--h) + var(--stroke)) solid rgba(0,0,0,.25);
  top:0;
}
.tri-down-outline::after{  /* 内側＝白 */
  border-left: calc(var(--w)/2) solid transparent;
  border-right: calc(var(--w)/2) solid transparent;
  border-top: var(--h) solid #fff;
  top: var(--stroke);
}
/* 親ボックス内で中央揃え */
.tri-center{ text-align:center; }

/* 白い下向き三角：横幅だけ約2倍に */
.tri-down{
  /* 以前の --w:72px を → 144px に（約2倍） */
  --w: 144px;  /* 底辺の幅 */
  --h: 44px;   /* 高さ（そのまま＝浅めの▼） */
  display:inline-block;
  width:0; height:0; line-height:0;
  border-left:  calc(var(--w)/2) solid transparent;
  border-right: calc(var(--w)/2) solid transparent;
  border-top:   var(--h)         solid #fff; /* 白▼ */
}
div.symptoms-next-text {
  font-size:140%;
  font-weight: bold;
  text-align: center;
}
  @media (max-width: 767px){
    .tri-down{ --w: 96px; /* 高さはお好みで */ }
  }

@media (max-width: 768px) {
  .pain-process .inner {
    padding: 20px 1%;
  }
  .pain-process h2 {
    font-size: 150%;
   }
  .pain-process .balloon {
    display: none; 
  }
  .pain-process article {
      flex-direction: column;
      padding: 0 0 0;
    }
  .pain-process article:nth-child(odd),
  .pain-process article:nth-child(even) {
    flex-direction: column;
  }
  .pain-process article:nth-child(odd) h3, 
  .pain-process article:nth-child(even) h3{
      text-align:center;
      line-height: 1.5;
  }
    .step-image img {
        max-width: 100%;
    }
    .pain-process article h3{
      text-align:center;
  }
    .step-image {
      transform: translateY(0);
    }
    .consequence .allow{
      width:50%;
    }
    .consequence .highlight {
      font-size: 230%;
    }
    section.pain-process .word-ex {
      width: 95%;
    }
    section.pain-process .word-ex h3 span.sub {
      font-size: 120%;
    }
    section.pain-process .word-ex h3 span.main {
      font-size: 140%;
    }
    div.title-set.symptoms h4 {
      text-align: center;
    }
}
/* =========================== quote classes =========================== */

section.v-quote {
  background: #f5e9d2;
  padding: 40px 0;
}
@media (max-width: 768px) {
  section.v-quote {
    padding: 20px 0;
  }
}
section.v-quote .box {
  position: relative;
  max-width: 800px;
  background: #fff;
  border: 3px solid #f36b99;
  border-radius: 8px;
  padding: 20px 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
section.v-quote .box:nth-child(odd) {
  max-width: 800px;
  margin: 40px auto 40px 10%;
}
section.v-quote .box:nth-child(even) {
  max-width: 800px;
  margin: 40px 10% 40px auto;
}
section.v-quote .box::before,
section.v-quote .box::after {
  content: '“';
  position: absolute;
  font-family: serif;
  color: #f36b99;
}

section.v-quote .box::before {
  top: -76px;
  left: 60px;
  font-size: 800%;
}
section.v-quote .box::after {
  bottom: -96px;
  right: 14px;
  font-size: 1000%;
  transform: scale(-1, -1); /* ← X軸・Y軸ともに反転 */
  display: inline-block; /* transform効かせるために必要 */
}
section.v-quote .box:nth-child(even)::before {
  top: -76px;
  right: 60px;
  transform: scaleX(-1);
  display: inline-block; /* transform効かせるために必要 */
}

section.v-quote .box:nth-child(even)::after {
  bottom: -96px;
  left: 14px;
  font-size: 1000%;
  transform: scaleY(-1);
}
section.v-quote .v-photo {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px #f36b99;
  background: #fff;
  margin: 0;
}
section.v-quote .box:nth-child(even) .v-photo {
  top: -30px;
  left: auto;
  right: -30px;
}

section.v-quote .v-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position:50% 50%; /* ← 顔の位置に合わせて調整 */
  border-radius: 50%;
  transform: scale(1.0); /* ← 拡大倍率を指定 */
}
section.v-quote .text {
  padding-left: 60px;
}

section.v-quote .text p {
  font-size: 1rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 8px;
}
section.v-quote .name {
  font-size: 0.9rem;
  color: #666;
  text-align: right;
  display: block;
}
section.v-quote .box:nth-child(even) .text {
  padding-left: 10px;
  margin-right: 50px;

}
section.v-quote .box:nth-child(even) .name {
  margin-right: 40px;
}

@media (max-width: 768px) {
  section.v-quote .box {
    margin: 0 10%;
    padding: 25px 15px;
  }
  section.v-quote .box:nth-child(odd),
  section.v-quote .box:nth-child(even) {
    margin: 40px 4% 50px;
  }
  section.v-quote .box:nth-child(even) .text {
    padding:0 60px 0 0;
    margin-right: 0;
  }
  section.v-quote .box:nth-child(even) .name {
    margin-right: -30px;
  }
}
/* =========================== howtoimprove classes =========================== */

section.howtoimprove {
  overflow-x: hidden;
}
section.howtoimprove .cover {
  position: relative;
  padding: 190px 16px 100px;
  line-height: 160%;
  background: url(../images/common/ttl-howtoimprove.png) no-repeat center center;
  background-size: cover;
  margin-bottom: 100px;
}
section.howtoimprove .cover::before,
section.howtoimprove .cover::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw; /* 画面幅いっぱいに左右に広げる */
  z-index: -1;
}
section.howtoimprove .cover::before {
  left: -100vw;
  background: #f2eae2; /* 左の背景色 */
}
section.howtoimprove .cover::after {
  right: -100vw;
  background: #fefffe; /* 右の背景色 */
}
section.howtoimprove div.cover h2 {
  font-family: 'Noto Serif JP', serif;
  max-width: 930px;
  margin:0 auto;
  transform: translateX(240px);  /* 完全中央より少し左寄せ */
}
h2 .s {
    position: relative;
    display: inline-block;
    padding: 0 7px 0 0;
    border: 3px solid #ffe2ce;
    background-color: #ffe2ce;
    margin-bottom: 20px;
    font-weight: normal;
}
h2 .s::before {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 105%;
    height: 124%;
    border: 1px solid #212121;
    content: '';
}

section.howtoimprove h2 .m {
  display: block;
  font-size: 160%;
  color: #6c4b20;
  margin-bottom: 40px;
  text-shadow:
    0 0 4px #fff,
    0 0 8px #fff,
    0 0 12px #fff,
    0 0 20px #fff,
    0 0 30px #fff;
}
section.howtoimprove h2 .l {
  display: block;
  font-size: 230%;
  margin-top: 8px;
  font-weight: 600;
  color: #393a3c;
  text-shadow:
    0 0 4px #fff,
    0 0 8px #fff,
    0 0 12px #fff,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #fff,
    0 0 60px #fff,
    0 0 80px #fff;
}
section.howtoimprove ul {
  width: fit-content;
  margin: 0 auto;
}
section.howtoimprove ul li {
  background:url(../images/common/bg-l-list.png) no-repeat left center;
  font-size: 140%;
  padding:10px 0 10px 50px;
}

section.howtoimprove h4.s-ttl {
  border-radius: 9999px; /* ピル型にする最重要ポイント */
  width: 50%;
  padding: 10px 2%;
  font-size: 180%;
  font-weight: 400;
  margin-bottom: 20px;
  -webkit-background-clip: border-box; /* 初期値に戻す */
  background-clip: border-box;         /* 初期値に戻す */
  -webkit-text-fill-color: initial;    /* 初期値に戻す（通常は文字色(color)が適用される） */
  background-image: transparent; 
}
section.howtoimprove h4.s-ttl.tc-green {
 background-color:#64db8f;
 color: #fff;
}
section.howtoimprove h4.s-ttl.tc-orange {
  background-color:#f7f58e;
  color: #fff;
}

section.howtoimprove .content-part p,
section.howtoimprove .text-set .text p,
section.howtoimprove .text-block p {
  margin: 0 0 15px;
}
section.howtoimprove .content-part p:last-of-type,
section.howtoimprove .text-set .text p:last-of-type,
section.howtoimprove .text-block p:last-of-type {
  margin-bottom: 0;
}




@media (max-width: 768px) {
  section.howtoimprove .cover {
    position: relative;
    margin:0;
    padding: 100px 4px 30px;
    line-height: 160%;
    background: url(../images/common/ttl-sp-howtoimprove.webp) no-repeat center center;
    background-size: cover;
  }
  section.howtoimprove div.cover h2 {
    margin:0 auto;
    text-align: center;
    line-height: 1.1;
    transform: translateX(0);  /* 完全中央より少し左寄せ */
  }
  section.howtoimprove div.title-set h3 {
      line-height: 2;
    }
  section.howtoimprove h2 .m {
    font-size: 140%;
    margin-bottom: 0;
  }
  section.howtoimprove h2 .l {
    font-size: 200%;
  }
  section.howtoimprove div.inner {
    padding: 0 2%;
  }
  section.howtoimprove ul li {
    font-size: 100%;
  }
  section.howtoimprove h4.s-ttl {
    width: 95%;
    font-size: 150%;
  }
}

/* =========================== recommend classes =========================== */
section.recommend {
  background: url(../images/common/bg-lightfulll-green.webp) repeat left top;
  padding: 60px 0;
}
@media (max-width: 768px) {
  section.recommend {
    padding: 20px 0;
  }
}
/* =========================== media classes =========================== */
section.media {
  background: url(../images/common/bg-leaf.webp) no-repeat top right;
  padding: 60px 0;
}
@media (max-width: 768px) {
  section.media {
    padding: 20px 0;
  }
}
/* =========================== offer classes =========================== */
section.offer {
  background: url(../images/common/bg-offer-pc.webp) repeat-x top center;
}
section.offer img {
  vertical-align: bottom;
}

section.offer figure.img-set {
  margin:0 auto 0;
}

/* =========================== infomation classes =========================== */
section.infomation {
  background: url(../images/common/bg-info.webp) repeat-x top left;
}
section.infomation h1 {
  width: 85%;
  text-align: center;
  margin:0 auto 0;
}
section.infomation h1 img {
  width: 90%;
  text-align: center;
}
section.infomation .content {
  display: flex;
  justify-content: center;
  align-items: center;
}
section.infomation .content > * {
  flex: 1 1 0;
}
section.infomation .content p.logo {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  margin-bottom: 10px;
  padding: 10px 20px;
}
section.infomation .content .access {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  margin:0 0 10px;
  padding: 10px 20px;
}
section.infomation .content ul.cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 0 auto 0 -60px;
}

@media (max-width: 768px) {
  section.infomation h1 img {
    width: 100%;
  }
  section.infomation .content {
    flex-direction:column;
    justify-content: center;
    align-items: center;
  }
  section.infomation .content ul.cta {
    flex-direction: column;
    width: 95%;
    gap: 10px;
    margin: 0 auto 0 auto;
  }
}
/* =========================== graduation classes =========================== */
section.graduation {
  padding: 60px 0;
}
@media (max-width: 768px) {
  section.graduation {
    padding: 20px 0;
  }
}
section.graduation .title-set {
  width: 70%;
  margin:0 auto;
  align-items: flex-start;
}
section.graduation .title-set h2 {
  border-radius: 9999px; /* ピル型にする最重要ポイント */
  text-align: center;
  width: 50%;
  margin: 0 0 10px;
  padding: 10px 0;
  font-size: 200%;
  background-clip: border-box; /* text以外に戻す */
  -webkit-background-clip: border-box; /* Safari用 */
  -webkit-text-fill-color: initial; /* transparentを解除 */
  background-image: none; /* グラデーション削除 */
  background-color: #ff5a5a;
  color: #fff;
}
section.graduation .title-set:nth-child(odd) h2 {
  background-color: #333;
  color: #fff;
}
section.graduation .title-set h2.red {
  background-color: #ff5a5a;
  color: #fff;
}
section.graduation .title-set h2.bk {
  background-color: #333;
  color: #fff;
}
section.graduation .title-set p {
  font-size: 150%;
}
@media (max-width: 768px) {
  section.graduation .title-set p {
    font-size: 120%;
  }
  section.graduation .title-set {
    width: 95%;
  }
}
/* =========================== voice classes =========================== */
section.voice {
  background: url(../images/common/bg-lightfulll-green.webp) repeat left top;
  padding: 60px 0;
}
section.voice.sub-p {
  background: none;
  padding: 60px 0;
}
section.voice article .text h2 {
  margin: 0 auto 0;
}

@media (max-width: 768px) {
  section.voice {
    padding: 20px 0;
  }
}
section.voice article  {
  background:#fff;
  border-radius: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto 30px;
}
section.voice article header  {
  display: flex;
  justify-content: center;
  background:transparent;
  padding:0;
}
section.voice article header > * {
  flex: 1 1 0;
}
section.voice .text {
  padding:20px;
}
section.voice .text h2 {
  font-size: 200%;
}
section.voice .text h3 {
  font-size: 170%;
  margin: 0 0 10px;
}
section.voice .text ul {
  display: flex;
  gap:10px;
  flex-wrap: wrap;
}
section.voice .text li {
  width: fit-content;
  padding: 2px 10px;
  background-color: #99d094;
  color: #fff;
  font-size: 130%;;
}
section.voice article figure.photo  {
  background: url(../images/common/bg-v-photo.webp) no-repeat center center;
  background-size: cover;
  height: 367px;
  padding: 30px;
  border-radius: 16px;
  display: inline-block;
}
section.voice article figure.photo img  {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ← ★ これが重要 */
  border: 8px solid #fff;
  border-radius: 8px; /* お好みで角丸 */
}
section.voice article h3.v-ttl,
section.voice article .staff-ttl  {
  position: relative;
  background-color: #2ecc71; /* グリーン */
  color: #fff; /* 白文字 */
  padding: 10px 16px;
  border-radius: 6px;
  font-size:170%;
  font-family: 'Kiwi Maru', serif; /* ★ Kiwi Maruに変更 */
  margin: 20px;
}
section.voice article h3.v-ttl a,
section.voice article h3.v-ttl a:visited {
  color: #fff;
}
section.voice article h3.v-ttl::after  {
  content: '';
  position: absolute;
  top: -13px;   /* ボックスより上に出す */
  right: 20%; /* 右寄せ位置 */
  border-width: 0 12px 20px 12px; /* 三角形の大きさ */
  border-style: solid;
  border-color: transparent transparent #2ecc71 transparent;
}
section.voice article div.v-content  {
  width: 90%;
  margin: 0 auto;
}
section.voice article div.v-content p  {
  margin: 0 0 20px;
}
section.voice article div.v-content p.dcm  {
  color: #666666;
  text-align: right;
  font-size: 90%;
}

/* === リスト全体 === */
.simple-media-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 95%;
}

/* === カードリンク本体 === */
.media-item {
  display: flex;
  align-items: center; /* 垂直方向の中央揃え */
  background: #fff;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  overflow: hidden;
  height: 64px; /* 高さを少しコンパクトに（変更可） */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.media-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* === 画像エリア (figure) === */
.media-thumb {
  margin: 0;
  width: 64px; /* 親の高さに合わせる */
  min-width: 64px;
  height: 100%;
  background-color: #eee;
}

.media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.media-item:hover .media-thumb img {
  transform: scale(1.1);
}

/* === テキストラッパー === */
.media-body {
  padding: 0 16px;
  flex: 1; /* 残りの幅を埋める */
  min-width: 0; /* 省略(...)を効かせるためのおまじない */
}

/* === テキスト (p) === */
.media-text {
  margin: 0;
  font-weight: bold;
  font-size: 1rem;
  color: #333;
   
  transition: color 0.3s;
}

.media-item:hover .media-text {
  color: #007bff;
}


@media (max-width: 768px) {
  section.voice article header  {
    flex-direction: column;
  }
  section.voice .text h2 {
    font-size: 180%;
  }
  section.voice .text h3 {
    font-size: 160%;
  }
  section.voice article  {
    padding: 1%;
  }
  section.voice article h3.v-ttl  {
    font-size:150%;
    margin: 1%;
    line-height: 1.6;
  }
  section.voice article h3.v-ttl::after  {
    right: 50%; 
  }
}

/* ===== Pagination (paginate_links 用) ===== */
.pagination-block { 
  margin: 40px 0 0;
  display: flex;
  justify-content: center;
}

.pagination-block :root,
.pagination-block {
  --pg-bg: #fff;
  --pg-fg: #111;
  --pg-border: #e6e6e6;
  --pg-hover: #0ea5e9;      /* accent */
  --pg-current-bg: #2ecc71;
  --pg-current-fg: #fff;
  --pg-radius: 9999px;      /* pill */
  --pg-gap: 8px;
  --pg-pad-x: 14px;
  --pg-pad-y: 10px;
  --pg-shadow: 0 1px 2px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark) {
  .pagination-block {
    --pg-bg: #161616;
    --pg-fg: #eaeaea;
    --pg-border: #2a2a2a;
    --pg-hover: #38bdf8;
    --pg-current-bg: #eaeaea;
    --pg-current-fg: #111;
    --pg-shadow: 0 1px 2px rgba(0,0,0,.3);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pagination-block .page-numbers a,
  .pagination-block .page-numbers span {
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .05s ease;
  }
}

.pagination-block .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination-block .page-numbers > li {
  display: inline-flex;
}

.pagination-block .page-numbers a,
.pagination-block .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;            /* タップ領域確保 */
  height: 40px;
  padding: var(--pg-pad-y) var(--pg-pad-x);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius);
  background: var(--pg-bg);
  color: var(--pg-fg);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  box-shadow: var(--pg-shadow);
}

/* 現在ページ */
.pagination-block .page-numbers .current {
  background: var(--pg-current-bg);
  color: var(--pg-current-fg);
  border-color: transparent;
  font-weight: 700;
}

/* ホバー／アクティブ */
.pagination-block .page-numbers a:hover {
  border-color: var(--pg-hover);
  color: var(--pg-hover);
}
.pagination-block .page-numbers a:active {
  transform: translateY(1px);
}

/* フォーカス可視化 */
.pagination-block .page-numbers a:focus-visible {
  outline: 2px solid var(--pg-hover);
  outline-offset: 2px;
}

/* 省略記号 … */
.pagination-block .page-numbers .dots {
  border-style: dashed;
  opacity: .7;
  cursor: default;
}

/* « / » （prev / next）アイコン強調（任意） */
.pagination-block .page-numbers .prev,
.pagination-block .page-numbers .next {
  font-weight: 600;
  letter-spacing: .02em;
}

/* 無効リンク（WPでは基本出ないが保険） */
.pagination-block .page-numbers .disabled,
.pagination-block .page-numbers .disabled:hover {
  opacity: .4;
  pointer-events: none;
}

/* コンテナの左右余白と狭幅対応 */
@media (max-width: 480px) {
  .pagination-block .page-numbers a,
  .pagination-block .page-numbers span {
    min-width: 36px;
    height: 36px;
    padding: 8px 12px;
    font-size: 13px;
  }
}




/* =========================== promise classes =========================== */
section.promise {
  padding: 60px 0;
}
section.promise .title-set.title-set .text .content {
  width: 90%;
  transform: translateX(65px);
}

@media (max-width: 768px) {
  section.promise {
    padding: 20px 0;
  }
}
section.promise .title-set.title-set.is-reverse .text {
  transform: translateX(-60px);
}
section.promise .title-set p {
  margin:0 20px 0 70px;
}
@media (max-width: 768px) {
  section.promise .title-set p {
    margin:0 auto 0 auto;
    width: 90%;
  }
  section.promise .title-set.title-set.is-reverse .text {
    transform: translateX(0);
  }
  section.promise .title-set.title-set .text .content {
    width: 100%;
    transform: translateX(0);
  }
}
/* =========================== ps classes =========================== */
section.ps {
  background: url(../images/common/bg-lightfulll-green.webp) repeat left top;
  padding: 60px 0;
}

section.ps.v-quote .text {
  padding-left: 0;
}
@media (max-width: 768px) {
  section.ps {
    padding: 20px 0;
  }
}
section.ps .title-set > * {
  flex: 1 1.6 0;
}
section.ps .bq {
  position: relative;
  max-width: 800px;
  background: #fff;
  border-radius: 8px;
  margin:0 auto 30px;
  padding: 40px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
section.ps .bq::before,
section.ps .bq::after {
  content: '“';
  position: absolute;
  font-family: serif;
  color: #4b4b4b;
}
section.ps .bq::before {
  top: -76px;
  left: 14px;
  font-size: 800%;
}
section.ps .bq::after {
  bottom: -96px;
  right: 14px;
  font-size: 1000%;
  transform: scale(-1, -1); /* ← X軸・Y軸ともに反転 */
  display: inline-block; /* transform効かせるために必要 */
}
section.ps .content {
  max-width: 800px;
  margin: 0 auto;
}
section.ps.v-quote .box:nth-child(odd) {
    max-width: 800px;
    margin: 40px auto 40px 0;
}
/* =========================== utility classes =========================== */

/* font-size系 */
.size01 { font-size: 80%; }
.size02 { font-size: 141%; line-height: 1.7; }
.size03 { font-size: 180%; line-height: 1.5; }
.size04 { font-size: 210%; line-height: 1.5; }

/* 色共通：太字 */
[class^="color"] {
  font-weight: bold;
}

/* 個別の色だけ定義 */
.color01 { color: #CC0000; }
.color02 { color: #2182ad; }
.color03 { color: #ff8c00; }
.color04 { color: #8757AB; }
.color05 { color: #009700; }
.color06 { color: #E5D627; }
.color07 { color: #2CB7B3; }
.color08 { color: #FF8705; }
.color09 { color: #FB50A1; }

/* マーカー共通スタイル */
[class^="marker"] {
  font-weight: bold;
  padding: 0 3px;
}



/* 個別背景色 */
.marker01 { background: #FF6; }
.marker02 { background: #DAE49F; }
.marker03 { background: #A6D4E3; }
.marker04 { background: #F5CAD1; }

.txt-c {text-align: center;}
.txt-l {text-align: left;}
.txt-r {text-align: right;}

.d-center {margin: 0 auto;display: block;}

.mt-0 {margin-top: 0;}
.mt-5 {margin-top: 5px;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-50 {margin-top: 50px;}
.mt-60 {margin-top: 60px;}
.mt-70 {margin-top: 70px;}
.mt-80 {margin-top: 80px;}
.mt-90 {margin-top: 90px;}
.mt-100 {margin-top: 100px;}

.mr-0 {margin-right: 0;}
.mr-5 {margin-right: 5px;}
.mr-10 {margin-right: 10px;}
.mr-15 {margin-right: 15px;}
.mr-20 {margin-right: 20px;}
.mr-30 {margin-right: 30px;}
.mr-40 {margin-right: 40px;}
.mr-50 {margin-right: 50px;}
.mr-60 {margin-right: 60px;}
.mr-70 {margin-right: 70px;}
.mr-80 {margin-right: 80px;}
.mr-90 {margin-right: 90px;}
.mr-100 {margin-right: 100px;}

.mb-0 {margin-bottom: 0;}
.mb-5 {margin-bottom: 5px;}
.mb-10 {margin-bottom: 10px;}
.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-30 {margin-bottom: 30px;}
.mb-40 {margin-bottom: 40px;}
.mb-50 {margin-bottom: 50px;}
.mb-60 {margin-bottom: 60px;}
.mb-70 {margin-bottom: 70px;}
.mb-80 {margin-bottom: 80px;}
.mb-90 {margin-bottom: 90px;}
.mb-100 {margin-bottom: 100px;}

.ml-0 {margin-left: 0;}
.ml-5 {margin-left: 5px;}
.ml-10 {margin-left: 10px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-30 {margin-left: 30px;}
.ml-40 {margin-left: 40px;}
.ml-50 {margin-left: 50px;}
.ml-60 {margin-left: 60px;}
.ml-70 {margin-left: 70px;}
.ml-80 {margin-left: 80px;}
.ml-90 {margin-left: 90px;}
.ml-100 {margin-left: 100px;}

.m-0 {margin: 0;}

.pt-0 {padding-top: 0;}
.pt-5 {padding-top: 5px;}
.pt-10 {padding-top: 10px;}
.pt-15 {padding-top: 15px;}
.pt-20 {padding-top: 20px;}
.pt-30 {padding-top: 30px;}
.pt-40 {padding-top: 40px;}
.pt-50 {padding-top: 50px;}
.pt-60 {padding-top: 60px;}
.pt-70 {padding-top: 70px;}
.pt-80 {padding-top: 80px;}
.pt-90 {padding-top: 90px;}
.pt-100 {padding-top: 100px;}

.pr-0 {padding-right: 0;}
.pr-5 {padding-right: 5px;}
.pr-10 {padding-right: 10px;}
.pr-15 {padding-right: 15px;}
.pr-20 {padding-right: 20px;}
.pr-30 {padding-right: 30px;}
.pr-40 {padding-right: 40px;}
.pr-50 {padding-right: 50px;}
.pr-60 {padding-right: 60px;}
.pr-70 {padding-right: 70px;}
.pr-80 {padding-right: 80px;}
.pr-90 {padding-right: 90px;}
.pr-100 {padding-right: 100px;}

.pb-0 {padding-bottom: 0;}
.pb-5 {padding-bottom: 5px;}
.pb-10 {padding-bottom: 10px;}
.pb-15 {padding-bottom: 15px;}
.pb-20 {padding-bottom: 20px;}
.pb-30 {padding-bottom: 30px;}
.pb-40 {padding-bottom: 40px;}
.pb-50 {padding-bottom: 50px;}
.pb-60 {padding-bottom: 60px;}
.pb-70 {padding-bottom: 70px;}
.pb-80 {padding-bottom: 80px;}
.pb-90 {padding-bottom: 90px;}
.pb-100 {padding-bottom: 100px;}

.pl-0 {padding-left: 0;}
.pl-5 {padding-left: 5px;}
.pl-10 {padding-left: 10px;}
.pl-15 {padding-left: 15px;}
.pl-20 {padding-left: 20px;}
.pl-30 {padding-left: 30px;}
.pl-40 {padding-left: 40px;}
.pl-50 {padding-left: 50px;}
.pl-60 {padding-left: 60px;}
.pl-70 {padding-left: 70px;}
.pl-80 {padding-left: 80px;}
.pl-90 {padding-left: 90px;}
.pl-100 {padding-left: 100px;}

.p-0 {padding: 0;}

.w-70  { width: 70%; }
.w-75  { width: 75%; }
.w-80  { width: 80%; }
.w-85  { width: 85%; }
.w-90  { width: 90%; }
.w-95  { width: 95%; }
.w-100 { width: 100%; }
.w-33  { width: 33.3333%; }   /* 1/3 */
.w-66  { width: 66.6667%; }   /* 2/3 */
.w-1000 { max-width: 1000px; }

@media (max-width: 768px) {
.w-66  { width: 95%; }
.w-1000 { max-width: 100%; }
}


/* =========================== HERO SLIDER classes =========================== */

/* 土台 */
section.hero { position: relative; overflow: hidden; }
section.hero .mv-wrap { max-width: 1400px; margin-inline:auto; }

/* レイアウト器（高さはここで確保） */
section.hero .mv-wrap {
  position: relative;
  width: 100%;
  /* 必要に応じて調整：固定比率が分かるなら下の aspect-ratio を使うと安定します */
  min-height: clamp(360px, 65vh, 820px);
  /* aspect-ratio: 16 / 9;  */ /* ←比率が決まっているなら有効化 */
}

/* 背景スライド層（全面） */
section.hero .mv-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* スライド1枚分（重ねてフェード切替） */
section.hero .mv-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
  /* 既存の .hero picture { max-width:1400px; margin:auto } 等の汎用ルールを打ち消す */
  max-width: none;
  margin: 0;
}

/* 表示中スライド（名称互換も許容） */
section.hero .mv-slide.is-mv-current,
section.hero .mv-slide.is-active {
  opacity: 1;
}

/* 画像のフィット（デフォルトは cover で全画面表示） */
section.hero .mv-slide picture,
section.hero .mv-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;         /* ←ここが「拡大」に関与 */
  object-position: center;   /* 必要なら被写体位置を調整 */
}

/* ▼拡大させたくない場合（画像が枠と同寸で用意されている前提）
   section.hero に hero--no-scale を付けるだけで切替できます */
section.hero.hero--no-scale .mv-slide picture,
section.hero.hero--no-scale .mv-slide img {
  object-fit: none;          /* 拡大・トリミングをしない */
  width: auto; height: auto; /* 原寸で表示 */
  max-width: 100%;
  max-height: 100%;
}
section.hero.hero--no-scale .mv-slide {
  display: flex;             /* 原寸画像を中央に配置 */
  justify-content: center;
  align-items: center;
}
/* no-scale 時も .mv-wrap の高さは必要です（min-height か aspect-ratio を残す） */

/* キャッチ：常に前面・左寄せ中央寄せ */
section.hero .mv-catch {
  position: absolute;
  top: 54%;
  left: 31%;
  transform: translate(-50%, -50%);  /* ← 正しい中央寄せ */
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;     /* ← キャッチ画像が大きいときも位置が安定 */
  pointer-events: none; /* ← MV操作を邪魔しないため */
}

section.hero .mv-catch img {
  max-width: min(90%, 720px);
  width: auto;
  height: auto;
  max-height: 80%;   /* ← なくてもOK。保険として有効 */
}

/* 切替時の「一瞬消えて→ふわっ」 */
section.hero .mv-catch.is-mv-flash {
  animation: mvFlashOut .12s ease-out, mvFlashIn .48s ease .12s both;
}
@keyframes mvFlashOut { from {opacity:1} to {opacity:0} }
@keyframes mvFlashIn  { from {opacity:0} to {opacity:1} }

/* モーション控えめ指定への配慮 */
@media (prefers-reduced-motion: reduce) {
  section.hero .mv-slide { transition: none; }
  section.hero .mv-catch.is-mv-flash { animation: none; }
}

/* ===== SP only (<=767px) — HERO 最終版 ===== */
@media (max-width: 767px) {
  section.hero .mv-wrap {
    padding-block: 40px; /* ヒーローの枠に余白を追加 */
  }
  
  /* 枠：高さはJSで自動（画像比率に追従）＋中央寄せ */
  section.hero .mv-wrap {
    height: auto;
    min-height: 0;
    max-width: 1400px;
    margin-inline: auto;
  }

  /* ラッパ層は .mv-wrap に合わせる */
  section.hero .mv-slides,
  section.hero .mv-slide {
    height: auto;
  }

  /* スライド写真：切らない（contain） */
  section.hero .mv-slides .mv-slide picture,
  section.hero .mv-slides .mv-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    background: #fff; /* レターボックス色（任意） */
  }

  /* キャッチ容器：左右対称にして中央寄せしやすく */
  section.hero .mv-catch {
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px 4%;    /* ← 上下10px＋左右4%の余白 */
    box-sizing: border-box;
  }

  /* キャッチ画像：横95%、縦は自動 */
  section.hero .mv-catch picture,
  section.hero .mv-catch img {
    width: 95% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: block;
    margin-inline: auto; /* 水平中央寄せ */
    object-fit: contain;
  }
}

:root { --header-h: 90px; }          /* 初期フレームの保険 */
/* 例：85〜90px。あなたの実測に合わせてOK */
body { padding-top: 90px; }

section.hero .mv-catch.is-mv-flash { animation: none !important; }

/* =========================== symptoms-list classes =========================== */

/* PC：3列固定、タブレット〜スマホは自動で可変 */
.symptoms-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ← ここを3列固定に変更 */
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.symptom-btn {
  display: block;
  padding: 16px 22px;
  text-align: center;
  color: #2f3e39; /* 深いオリーブグレー */
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  background: #f5f5f3; /* マットなライトグレージュ */
  border: 1px solid #dcdcd6; /* 薄い線で上品に */
  transition:
      background 0.35s ease,
      border-color 0.35s ease,
      transform 0.25s ease,
      box-shadow 0.35s ease;
}

.symptom-btn:hover {
  background: #e7ebe8; /* オリーブ系の淡いハイライト */
  border-color: #c5cbc7;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* スマホは1列にする（横潰れ防止） */
@media (max-width: 768px) {
  .symptoms-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}


/* =========================== staff classes =========================== */

div.our-policy {
  background-color:#18af54;
  padding: 20px 0 40px;
  margin-top:-38px;
}

div.our-policy span {
  color: #96ffc0;
  display: block;
  font-size: 300%;
  font-style: italic;
  margin-left: 10%;
}

div.our-policy p {
  color: #fff;
  font-size: 200%;
  margin-left: 50px;
  text-align: center;
}

div.text-set.staff {
  align-items: flex-start;
  max-width: 1400px;
}


p.staff-theme {
   --border-color:#18af54; /* カッコの色 */
   margin: 1em 0; /* 外側余白 */
   padding: 1em 2em; /* 内側余白 */
   position: relative; /* 配置（基準） */
   width: fit-content;
  background: rgba(255, 255, 255, 0.4); /* 白 + 透明度80% */
  font-size: 150%;
  color: #16a085;
}

p.staff-theme::before,
p.staff-theme::after {
   content: ''; /* 擬似要素の内容なし */
   width: 20px; /* カッコの幅 */
   height: 30px; /* カッコの高さ */
   position: absolute; /* 配置（位置指定）*/
}

p.staff-theme::before {
   border-left: 1px solid var(--border-color); /* 左上のカッコ線 */
   border-top: 1px solid var(--border-color); /* 上部線 */
   top: 0; /* 上端に配置 */
   left: 0; /* 左端に配置 */
}

p.staff-theme::after {
   border-right: 1px solid var(--border-color); /* 右下のカッコ線 */
   border-bottom: 1px solid var(--border-color); /* 下部線 */
   bottom: 0; /* 下端に配置 */
   right: 0; /* 右端に配置 */
}

/* ボックス内の段落 */
p.staff-theme p { margin:0; }

.staff-name {
  font-size: 140%;
}
.staff-name span{
  font-size: 70%;
}

.staff-info {
  border-left: solid 2px #18af54;
  padding: 1em 1em 1em 2em;
  margin-bottom: 20px;
}

.staff-profile p {
   margin-bottom:30px;
}

/* セロテープ風ボックス */
.cstm-box-tape {
   position: relative; /* タイトル配置の基準 */
   margin: 3em auto; /* 外側余白 */
   background-color: rgb(255 255 255 / 0.5); /* 透過背景色 */
   max-width: 800px; /* 最大幅 */
}

/* タイトル（セロテープ風） */
.cstm-box-tape .box-title {
   background-color: rgba(2, 104, 7, 0.4); /* 透過背景色 */
   border-left: 2px dotted rgb(0 0 0 / .1); /* 左端のギザギザ */
   border-right: 2px dotted rgb(0 0 0 / .1); /* 右端のギザギザ */
   box-shadow: 0 0 5px rgb(0 0 0 / .12); /* 影 */
   transform: rotate(-2deg); /* 傾き */
   color: #fff; /* 文字色 */
   padding: 10px 20px; /* 内側余白 */
   line-height: 1; /* 行の高さ */
   position: absolute; /* 親の左上に固定 */
   top: -1em; /* 上位置 */
   left: 1em; /* 左位置 */
   display: inline-block; /* 内容幅に合わせる */
   font-size: 120%; /* フォントサイズ */
   width: auto; /* 幅自動調整 */
   max-width: calc(100% - 2em); /* 最大幅調整 */
   white-space: nowrap; /* 折り返さない */
   overflow: hidden; /* はみ出し非表示 */
   text-overflow: ellipsis; /* 省略記号表示 */
}

/* コンテンツの余白 */
.cstm-box-tape .box-content {
   padding: 2.5em 2em 2em; /* 内側余白 */
}

/* 段落の余白リセット */
.cstm-box-tape p { margin: 0;}



@media (max-width: 768px) {
  div.our-policy span {
    font-size: 200%;
    margin-left: 3%;
  }
  div.our-policy p {
    font-size: 150%;
    margin: 0 3%
  }
  p.staff-theme {
    margin: 0.5em 0.2em 1em;
  }
  .staff-info {
    margin-left: 0.2em;
  }
  .staff-profile {
    padding: 0 3%;
  }
  .cstm-box-tape {
    margin: 3em 2%;
  }
}

div.sub-p.lower h2.s-ttl {
  margin: 0 auto 30px;
}

/* =========================== sitemap classes =========================== */

ul#menu-menu-all-1 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列均等割り */
    gap: 15px; /* 上下左右の隙間 */
  }

  /* スマホ対応（画面幅480px以下なら1列に戻す） */
  @media (max-width: 480px) {
    ul#menu-menu-all-1 {
      grid-template-columns: 1fr;
    }
  }
ul#menu-menu-all-1 a {
    display: block;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: #444;
    text-decoration: none;
    font-weight: 600;
    text-align: center; /* 文字を真ん中に寄せるとボタンっぽくなります */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  ul#menu-menu-all-1 a:hover {
    background-color: #fff;
    color: #007bff; /* ホバーで文字色を変える */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 6px 6px rgba(0,0,0,0.05);
    transform: translateY(-3px);
  }

  div.menu-menu-all-container {
    margin-bottom: 20px;
  }

/* =========================== contact classes =========================== */

div.low-p form {
  width: 80%;
  margin: 0 auto;
}

div.low-p form input[type="text"],
div.low-p form input[type="email"],
div.low-p form textarea {
  width: 100%;
  padding:1%;
}

div.low-p form input[type="submit"] {
  display: inline-block;
  background-image: linear-gradient(90deg, rgba(247, 209, 55, 1), rgba(29, 163, 137, 1) 90%);
  background-size: 200% auto;  
  color: #fff;
  border-radius: 20px;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
  transition: .5s;
  border: none;
  margin:0 auto;
  width: 100%;;
}
div.low-p form input[type="submit"]:hover {
  color: #fff;
  background-position: right center;
}
div.to-reserve a {
	position: fixed;
	padding: 60px 0 0;
	bottom: 30px;
	right: 30px;
	background-color: #fe9227;
	background-image: linear-gradient(90deg, #fe9227 0%, #fb7800 100%);
	border-radius: 50%;     /* 丸みを50%にすると円形になる */
	width: 240px;
	height: 240px;
	color: #fff;
	font-family: 'Noto Sans JP';
	text-align: center;
	font-weight: bold;
	line-height: 1.3;
	font-size: 240%;
	z-index: 2;
}
div.to-reserve a:hover {
	background-color: #fea927;
	background-image: linear-gradient(90deg, #fea927 0%, #fb8f00 100%);
	opacity:0.9;
}

div.to-reserve span {
	display: block;
	font-size: 60%;
	border-bottom: solid 1px #fff;
	width: fit-content;
	margin:0 auto 5px;
	padding: 0 0 2px;

}
div.to-reserve a::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("../images/common/btn-text-pc.png");
	animation: rotate_anime 20s linear infinite;
}

	@keyframes rotate_anime {
		0% {
			transform: rotate(0deg)
		}

		100% {
			transform: rotate(360deg)
		}
	}	
@media screen and (max-width: 640px) {
	div.to-reserve a {
		padding: 25px 0 0;
		bottom: 30px;
		right: 30px;
		width: 120px;
		height: 120px;
		color: #fff;
		text-align: center;
		font-weight: bold;
		line-height: 1.3;
		font-size: 120%;
	}
	div.to-reserve a span {
		display: block;
		font-size: 60%;
		border-bottom: solid 1px #fff;
		width: fit-content;
		margin:0 auto 5px;
		padding: 0 0 2px;
	}
	div.to-reserve a::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url("../images/common/btn-text.png");
		animation: rotate_anime 40s linear infinite;
	}
}

/* =========================== footer classes =========================== */
p#footer-access {
  background-image: linear-gradient(90deg, #1F6A45, #40B36D);
  text-align: center;
  font-size: 200%;
}
p#footer-access a {
  display: block;
  color: #fff;
  margin: 0 0 5px;
  padding: 20px 0;
}
p#footer-copy {
  padding: 0 0 10px;
  text-align: center;
  font-size: 85%;
}
div.fixed-cta {
	display: none;
}
@media screen and (max-width: 640px) {
	div.fixed-cta {
		display: block;
		width: 100%;
		position: fixed;
		bottom: 0;
		right: 0;
	}
	div.fixed-cta ul {
		display: flex;
	}
	div.fixed-cta ul li {
		width: 50%;
    background-image: linear-gradient(82deg, #0f5f46, #1aa96d);
		padding: 0 0;
	}
	div.fixed-cta ul li img {
    display: block;
		text-align: center;
	}
}