/* ----------------------------------------------------
 hamakita
---------------------------------------------------- */
/* FVの上の余白は不要 */
.page-id-558 .breadcrumb-box {
    padding-top: 0rem;
}

/* FV 背景画像の左右の余白は不要 */
.page-id-558 .studio {
    width: 100%;
    max-width: none;
}

.page-id-558 {
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", serif;
}

/* FV 上の帯 */
.fv-banner {
  font-size: clamp(18px, 3vw, 32px);
  background-color: #D2B48C;
  color: #333;
}


/* PC版はデフォルトの背景 */
.hamakita-fv {
  background-image: url('https://junglegym-healthfirst.com/wp-content/uploads/2026/05/fv-hamakita.jpg');
  background-repeat: no-repeat;
  background-size: 110%;
  background-position: 75% 20%;
  position: relative;
  width: 100%;
  min-height: 100vh;
  font-family: "Hiragino Mincho ProN", "游明朝", serif;
  overflow: hidden;
}

/* FV画像の上に白い色味を重ねる */
.hamakita-fv::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1); /* ←透明度調整 */
  z-index: 0;
}

.fv-content {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  width: clamp(700px, 70vw, 1200px);
  z-index: 1;
  position: absolute !important;
  top: 73%;

  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1vw, 90px) !important;
}

.fv-catchcopy {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: translateX(-5%);
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.catch-line {
  font-size: clamp(22px, 2vw, 36px);
  padding:8px 20px;
}

.catch-line:nth-child(2) {
  margin-left:180px;
}

.circle-container {
  margin-top: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 90px);
}

.circle {
  background-color:#23251F;
  width: clamp(120px, 11vw, 180px);
  height: clamp(120px, 11vw, 180px);
}

.circle-title {
  color:#fff;
  font-size: clamp(18px, 1.7vw, 26px);
}

.circle-title::after {
  background-color:#fff;
  height:1px;
  bottom:0px;
}

.circle-text {
  color:#fff;
  padding-top:5px;
  font-size: clamp(12px, 1vw, 18px);
}

.cta-text {
  font-size: clamp(14px, 1.8vw, 26px);
  margin-top:0px;
  margin-bottom:7px;
}

.cta-button {
  width: clamp(360px, 38vw, 570px);
  max-width: 100%;
  font-size: clamp(24px, 2.6vw, 38px);
}

/* FV下の帯 */
.opening-banner {
  background-color:#D2B48C;
  color:#333;
  font-size: clamp(18px, 3vw, 32px);
}

/* お悩みゾーン */
.trouble-zone {
  font-family:"Hiragino Mincho ProN", "游明朝", serif;
  background-color:#F3F3F3;
}

.trouble-title .emphasis {
  font-size:24px;
}

.trouble-title::after {
  background-color:#BE9C0D;
  bottom:0px;
}

.trouble-cards {
  background-color:#F3F3F3;
}

.triangle {
  background-color:#5B8E65;
}

/* 解決ゾーン */
.solution-zone {
  font-family:"Hiragino Mincho ProN", "游明朝", serif;
}

.solution-heading .line2 .studio-name {
  color:#5B8E65;
}

/* 左側の写真 */
.solution-zone::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34%; 
  height: 101%;
  background-image: url("https://junglegym-healthfirst.com/wp-content/uploads/2026/05/bg-left.jpg");
  background-size: cover;
  background-position: left center;
  transform: rotate(0deg);  /* 少し斜めにする */
  z-index: 0; /* 背景に */
}

/* 右側の写真 */
.solution-zone::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;                   /* 右側に配置 */
  width: 34%;                 /* 写真の幅 */
  height: 101%;               /* 高さはセクションに合わせる */
  background-image: url('https://junglegym-healthfirst.com/wp-content/uploads/2026/05/bg-right.jpg'); /* 挿入する写真URL */
  background-size: cover;
  background-position: right center;
  transform: rotate(0deg);  /* 少し斜めにする */
  z-index: 0;                  /* 中身より後ろ */
  opacity:1;
}

.solution-box {
  width:450px;
}

.solution-box .underline-text::after {
    background-color:#BE9C0D;
}

/* ５つの特徴ゾーン */
.features-zone {
  font-family:"Hiragino Mincho ProN", "游明朝", serif;
  background-color:#F3F3F3;
}

.features-catch {
  background-color:#5B8E65;
}

.features-main .brand {
  color:#5B8E65;
}

.features-sub .number {
  color:#BE9C0D;
}

.feature-title {
  color:#BE9C0D;
}

.feature-number {
  color:#BE9C0D;
}

.feature-text {
  padding:6px 30px 0;
}

/* 体験の流れゾーン */
.trial-flow-zone {
  font-family:"Hiragino Mincho ProN", "游明朝", serif;
}

.trial-flow-zone-title::after {
    background-color:#BE9C0D;
}

.step-number {
  color:#BE9C0D;
}

/* CTAゾーン */
.cta-zone {
  font-family:"Hiragino Mincho ProN", "游明朝", serif;
  background-color:#FAF8F2;

}

.cta-title {
  font-size:20px;
}

.cta-title span {
  font-size:24px;
}



.cta-title::after {
  background-color:#BE9C0D;
}

.price-zone {
  font-family:"Hiragino Mincho ProN", "游明朝", serif;
  background-color:#F3F3F3;
}

.price-zone-title::after {
  background-color:#BE9C0D;
}

/* ご利用料金ゾーン */
.price-card-text {
  padding:20px 0 0;
}

.option-box {
  max-width:400px;
  font-size:22px;
}

/* お客様からの声ゾーン */
.voice-zone {
  font-family:"Hiragino Mincho ProN", "游明朝", serif;
}

.voice-line {
  background-color:#5B8E65;
}

.voice-box {
  height:420px;
  width:470px;
  padding:20px 0;
}

.voice-box.left .voice-img {
  top:-5%;
}

.voice-box.right .voice-img {
  top:-5%;
}

.voice-box.left .voice-title {
  left:55px;
}

.voice-box.right .voice-title {
  right:55px;
}

.voice-box_long {
  height:510px;
}

.voice-text_short {
  margin:30px 0;
}

.voice-name {
  font-size:16px;
}

/* よくある質問ゾーン */
.faq-zone {
  font-family:"Hiragino Mincho ProN", "游明朝", serif;
}

.faq-title::after {
  background-color:#BE9C0D;
}

/* アクセスゾーン */
.hamakita-image {
  width:200px;
}


/* ======================
   スマホ版（768px以下）
====================== */

  /* スマホ版（768px以下） */
@media (max-width: 768px) {

.fv-banner {
  font-size:18px;
  line-height: 1.3;
}

/* スマホ版の背景 */
.hamakita-fv {
  position: relative;
  min-height: 100svh;
  height: auto;
  background-image: url('https://junglegym-healthfirst.com/wp-content/uploads/2026/05/spfv-hamakita.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center 99%;
  overflow: hidden;
}

.fv-wrapper {
  position: relative;
  min-height: 117svh;
}

.fv-content {
  position: relative;
  top:70%;
  left:55%;
  padding-bottom:10px;
  z-index: 1;
}

.fv-catchcopy {
  position: relative;
  top: auto;
  left: auto;
  margin-bottom:0;
  gap:7px;

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.catch-line {
  font-size:20px;
  padding:3px  0 3px 10px;
}

.catch-line:nth-child(1) {
  margin-left:20px;
}

.catch-line:nth-child(2) {
  margin-left:110px;
}

.circle-container {
  margin-top: -15px;
  display: block;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.circle-wrapper {
  margin-left: -4vw;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.circle {
  width:112px;
  height:112px;
}

.circle-title {
  font-size:18px;
}

.circle-text {
  font-size:12px;
}

.cta-box {
  display:inline-block;
  margin-top:5px;
  margin-left:-10vw;
}

.cta-text {
  font-size:16px;
  margin-top:5px;
  margin-bottom:4px;
}

.cta-button {
  width:335px;
  height:50px;
  font-size:20px;
}

.cta-arrow {
  font-size:20px;
  margin-left:5px;
}

.opening-banner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
  font-size:18px;
  line-height:1.3;
}

.card-text {
  font-size:12px;
}

.solution-zone {
  background-image: url('https://junglegym-healthfirst.com/wp-content/uploads/2026/05/hamakita-sp_solution.png'); /* スマホ用の1枚画像 */
  background-position: center center;
  background-size: cover; /* 画面いっぱいに広げる */
}

.solution-zone::before {
  background-image:none;
  background-color:unset;
}

.solution-zone::after {
  background-image:none;
}

.solution-box {
  width:330px;
}

.feature-text {
  padding:8px 22px 0;
}

.cta-apply-button {
  width:335px;
  font-size:20px;
  padding:10px 35px;
}

.cta-apply-catch {
  margin-bottom:7px;
}

.trial-step-heading {
  font-size:15px;
}

.option-box {
  font-size:18px;
}

.voice-list {
  margin-top:40px;
}

.voice-title {
  font-size:13px;
}

.voice-box.left .voice-img {
  left:15px;
}

.voice-box.right .voice-img {
  right:15px;
}

.voice-box.left .voice-title {
  left:45px;
}

.voice-box.right .voice-title {
  right:45px;
}

.voice-text {
  margin:25px 0;
  line-height:1.7;
}

.voice-box.sp1 {
  height:370px;
}

.voice-box.sp2 {
  height:390px;
}

.voice-box.sp3 {
  height:410px;
}

.voice-box.sp4 {
  height:480px;
}

}

/* ======================
   画面の高さが低いときのfv-contentの大きさ・位置調整
====================== */
@media (max-height: 750px) and (min-width: 768px) {
  .fv-content {
    top: 73% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
  }
}