/*
Theme Name: RIHATORE
Theme URI:  https://www.wpserveur.net
Author:     AZ-create Co.,Ltd
Author URI: https://az-create.co.jp/
Template:   swell
Version:    1.0
License:    GNU General Public License v2 or later
*/

/*写真の角を丸くする*/
.box img{
    border-radius: 35px;
}

/* メニューページ 16行目〜68行目 動くサークル */
.id_268 .menu-top {
position: absolute;
top: 0px;
}
.id_268 .c1 {
margin-top: 200px;
}
.id_268 #sidebar {
margin-top: 200px;
}
.wrap{
display: flex;
align-items: center;
justify-content: center;
padding: 50px;
margin: 50px auto;
max-width: 800px;
width: 100%;
height: 100%;
position: relative;
}
.circle,.circle02{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 50%;
height: 200px;
width: 200px;
z-index: -100;
}
.circle{
background: #f5f0b0;
opacity: 0.6;
animation: circle_rotates01 6.0s ease infinite;
}
.circle02{
opacity: 0.6;
background: #aee9fb;
animation: circle_rotates02 4.0s ease infinite;
}
@keyframes circle_rotates01{
0%{
border-radius: 55% 45% 58% 42%/ 40% 55% 45% 50%;
}
50%{
border-radius: 70% 42% 65% 35%/ 40% 60% 55% 45%;
}
100%{
border-radius: 55% 45% 58% 42%/ 40% 55% 45% 50%;
}
}
@keyframes circle_rotates02{
0%{
border-radius: 65% 35% 54% 46%/52% 48% 52% 48%;
}
56%{
border-radius: 55% 45% 68% 32%/60% 50% 50% 40%;
}
100%{
border-radius: 65% 35% 54% 46%/52% 48% 52% 48%;
}
}

/* サイドバー お知らせ＆その他の症状＆身体の症状を非表示  */
#sidebar .cat-item-15,#sidebar .cat-item-17,#sidebar .cat-item-1{
display: none;
}

/* ヘッダー予約ボタン改行なし */
[data-partsid="176"] .swell-block-button {
white-space: nowrap;
}

/* H5 アイコン 縦中央揃え */
h5:before{
top: 50%;
transform:translatey(-50%);
}

/* ===============================
   ★ トップページ専用ヘッダー装飾 (.home)
   ベージュ背景がメインビジュアルの高さにぴったり合う版
=============================== */
.home {

  /* --- スマホ表示時 --- */
  @media (max-width: 1024px) {

    .l-header {
      position: relative;
      width: 100%;
      height: auto;
      background-color: #fff;
    }

    #gnav .c-gnav {
      flex-direction: column !important;
      align-items: center;
      background-color: #fff;
    }
  }

  /* --- PC表示時 --- */
  @media (min-width: 1025px) {

    /* ===============================
       ベージュ背景（メインビジュアルと同じ高さ）
    =============================== */
    .p-mainVisual {
      position: relative;
    }

    /* ベージュの背景パネルをメインビジュアルの左に出す */
    .p-mainVisual::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 280px;
      height: 100%;
      background-color: #f7f1e3;
      z-index: 2;
    }

    /* ===============================
       ヘッダー本体
    =============================== */
    .l-header {
      position: absolute; /* メインビジュアルに重ねる */
      top: 0;
      left: 0;
      width: 280px;
      height: 100%; /* ← メインビジュアルの高さに連動 */
      background: transparent; /* 背景はbefore側で出す */
      z-index: 3;
    }

    .l-header__inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 40px 30px;
      position: relative;
      z-index: 4; /* 背景より前に出す */
    }

    .c-header__logo {
      margin-bottom: 30px;
    }

    /* ===============================
       メニュー（縦並び・左寄せ）
    =============================== */
    #gnav .c-gnav {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start;
      gap: 14px;
      margin-top: 10px;
      position: relative;
      left: -22px;
      z-index: 4;
    }

    #gnav .c-gnav > .menu-item {
      display: block !important;
      width: 100%;
    }

    #gnav .c-gnav > .menu-item > a {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-decoration: none;
      color: #333;
      font-weight: 600;
      font-size: 1.3rem;
      transition: 0.3s;
      padding: 4px 0;
      position: relative;
    }

    #gnav .c-gnav > .menu-item > a .ttl {
      display: block;
      line-height: 1.5;
      font-size: 18px;
    }

    #gnav .c-gnav > .menu-item > a .subttl {
      font-size: 0.9rem;
      opacity: 0.7;
    }

    #gnav .c-gnav > .menu-item > a:hover {
      color: #a9825a;
    }

    /* ===============================
       ホバー時のアンダーバー
    =============================== */
    #gnav .c-gnav > .menu-item > a::after {
      content: "";
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 0%;
      height: 2px;
      background-color: #a9825a;
      transition: width 0.3s ease;
    }

    #gnav .c-gnav > .menu-item > a:hover::after {
      width: 100%;
    }

    /* ===============================
       サブメニュー
    =============================== */
    #gnav .c-gnav .sub-menu {
      position: absolute;
      left: 100%;
      top: 0;
      background-color: #f7f1e3;
      padding: 10px 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
      border-radius: 6px;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    #gnav .c-gnav > .menu-item:hover > .sub-menu {
      opacity: 1;
      visibility: visible;
    }

    #gnav .c-gnav .sub-menu li a {
      color: #333;
      font-size: 0.95rem;
      padding: 5px 0;
      display: block;
      text-decoration: none;
    }

    #gnav .c-gnav .sub-menu li a:hover {
      color: #a9825a;
    }


    /* ===============================
       コンテンツ右ずらし
    =============================== */
    .l-content {
      margin-left: 280px !important;
    }

    /* ===============================
       ヘッダーボタン位置
    =============================== */
    #header .w-header {
      position: relative;
      top: 36px;
      left: -2px;
      z-index: 4;
    }
  }
}

/* ===============================
   サブメニューがLINEボタンより前面に出るように強制調整
=============================== */
@media (min-width: 1025px) {
  /* LINEボタンを持つヘッダーを一段下げる */
  #header .w-header {
    position: relative;
    z-index: 10 !important;
  }

  /* ヘッダー本体をさらに上に */
  .home .l-header {
    position: relative;
    z-index: 100 !important;
  }

  /* サブメニューを最前面に（ほぼ最上位） */
  .home #gnav .c-gnav .sub-menu {
    position: absolute;
    z-index: 9999 !important;
  }

  /* 念のため親のナビ全体も上に */
  .home #gnav {
    position: relative;
    z-index: 999 !important;
  }

  /* Swellのメインビジュアルがz-indexを持ってる場合の保険 */
  .home .p-mainVisual {
    position: relative;
    z-index: 1 !important;
  }
}

/* ヘッダーLINE予約一列に */
#header .w-header .swell-block-button{
	margin-right:-50px;
}


/* フッターカラム（予約） */
.wp-block-columns .wp-block-column .wp-container-core-buttons-is-layout-16018d1d .wp-block-button__width-75 a{
	border-width:3px;
}

/* PC版 (min-width: 1025px) */
#main-header .tate,
.p-mainVisual .tate {
	writing-mode: vertical-rl;
	margin: 0 auto;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	height: 600px; /* 縦書き時の高さ */
    
    /* ★追加: 白色ではっきりとした影 */
    text-shadow: 2px 2px 1px #FFFFFF; 
}

@media (min-width: 1025px) {
    /* Block columns (PC限定) */
    /* ★修正: セレクタを最大限に強化 */
    body .u-ta-c .wp-block-columns {
        position: relative !important; /* 念のため position にも !important */
        top: -100px !important;
        left: 340px !important;
    }
}

@media (max-width: 1024px) {
    /* SP・タブレット (画面幅 1024px 以下) の位置調整 */
    .c-filterLayer .u-ta-c .post_content {
        /* position: relative; または position: absolute; が親要素に設定されている前提 */
        top: 45px !important;
		left: -5px; !important;
		/* ★追加: 白色ではっきりとした影 */
    text-shadow: 2px 2px 1px rgba(255, 255, 255, 0.7); 
    }
}

/* **************************************************************　　　フローティングバナー　　　*********************************************************** */

@media (min-width: 960px) {

  /* フローティングバー本体 */
  #my-floating-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 15px 20px;
    display: flex;
    justify-content: center;
    gap: 25px; /* ボタン間隔 */
    z-index: 9999;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  }

  /* ボタンデザイン（共通） */
  #my-floating-banner a {
    display: block;
    padding: 12px 110px;
    color: #fff !important;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    font-size: 23px;
    font-weight: 600;
    min-width: 200px;
    white-space: nowrap;
    transition: 0.2s ease;
  }

  /* ▼ 個別カラー設定 ▼ */

  /* 1つ目のボタン（黄色系） */
  #my-floating-banner a:nth-child(1) {
	  background: #f7b603; /* 明るい黄色 */
	  border: 3px solid #e0b300;
  }

  /* 2つ目のボタン（LINEグリーン） */
  #my-floating-banner a:nth-child(2) {
    background: #06c755; /* LINE公式カラー */
	border: 3px solid #04a944;
  }

  /* ホバー時 */
  #my-floating-banner a:hover {
    opacity: 0.9;
    transform: translateY(-2px);
  }
}

/* スマホ・タブレットでは非表示 */
@media (max-width: 959px) {
  #my-floating-banner {
    display: none !important;
  }
}

/* セレクタを長くして（bodyから指定して）優先度を最大化 */
body #before_footer_widget.w-beforeFooter {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 上にある白いコンテンツ側の下の余白も念のため消す */
body .l-content {
    margin-bottom: 0 !important;
}

/* コンテンツエリア上部の余白を強制的にゼロにする */
body .l-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* パンくずリストがある場合の余白も念のため調整 */
.p-breadcrumb {
    margin-bottom: 0 !important;
}

/* =========================
   SP用フローティングバナー
   PCでは非表示 / SPのみ表示
   ========================= */

/* ① デフォルト（PC・タブレット含む）は非表示 */
#my-floating-banner-sp {
  display: none;
}

/* ② SPサイズのみ表示（959px以下） */
@media (max-width: 959px) {

  /* フローティングバー本体 */
  #my-floating-banner-sp {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 8px;
    gap: 8px;
    z-index: 9999;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  }

  /* ボタン共通 */
  #my-floating-banner-sp a {
    flex: 1;
    padding: 10px 6px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 2px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #fff !important;

    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease,
      opacity 0.15s ease;
  }

  /* 電話ボタン */
  #my-floating-banner-sp a:nth-child(1) {
    background: #f7b603;
    border: 1px solid #e0b300;
  }

  /* LINEボタン */
  #my-floating-banner-sp a:nth-child(2) {
    background: #06c755;
    border: 1px solid #04a944;
  }

  /* タップ時アクション */
  #my-floating-banner-sp a:active {
    transform: translateY(-6px);
    box-shadow: 0 10px 18px rgba(0,0,0,0.3);
    opacity: 0.75;
  }

  /* フローティングバー分の余白（SPのみ） */
  body {
    padding-bottom: 70px;
  }
}

/* 症状ページ：アイキャッチ＋タイトル非表示 */
.page-id-2178 .l-topTitleArea,
.page-id-2642 .l-topTitleArea {
  display: none;
}

/*** 少しずらしたボックス ***/
.cstm-box-offset {
   margin: 2em auto; /* 外側余白 */
   padding: 2em; /* 内側余白 */
   background: none; /* 元のボックス背景色なし */
   border: 1px solid #ccc; /* 線の太さ（1px）、種類（実線）、色（#ccc） */
   position: relative; /* 配置（基準となる位置） */
   max-width: 800px; /* 最大幅 */
}

.cstm-box-offset:after {
   background-color: #fff; /* ずらしたボックスの背景色 */
   border: none; /* 枠線なし */
   content: ''; /* 擬似要素にコンテンツなし */
   position: absolute; /* 配置（ここを動かす） */
   top: 7px; /* 上から7pxずらす */
   left: 7px; /* 左から7pxずらす */
   width: 100%; /* 幅100%（親要素に合わせる） */
   height: 100%; /* 高さ100%（親要素に合わせる） */
   z-index: -1; /* 背景として後ろに表示 */
}

/* ボックス内の段落 */
.cstm-box-offset p { margin:0; }

/* Google Font : Lexend（可変＋斜体） */
@import url('https://fonts.googleapis.com/css2?family=Lexend:ital,wght@0,100..900;1,100..900&display=swap');

/* カラム全体で番号リセット */
.wp-block-columns {
  counter-reset: strength-num;
}

/* 左上ナンバー（Lexend・斜体・太字・背景なし） */
.cstm-box-offset::before {
  counter-increment: strength-num;
  content: counter(strength-num);

  position: absolute;
  top: -42px;
  left: 2px;

  font-family: 'Lexend', system-ui, sans-serif;
  font-style: italic;
  font-weight: 900;          /* ← 太さの核 */
  font-size: 86px;
  line-height: 1;

  color: #F09F4D;
  background: none;

  /* さらに太く・くっきり見せるための補助（控えめ） */
  -webkit-text-stroke: 2.2px #F09F4D;

  z-index: 3;
  pointer-events: none;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .cstm-box-offset::before {
    font-size: 82px;
    top: -18px;
    left: 5px;
    font-weight: 800;
    -webkit-text-stroke: 0.5px #F09F4D;
  }
}

/* Google Font : Zen Kurenaido */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap');

/* このブロックだけフォント変更 */
.zen-kurenaido-area,
.zen-kurenaido-area p,
.zen-kurenaido-area strong,
.zen-kurenaido-area span {
  font-family: 'Zen Kurenaido', sans-serif;
}

@media screen and (max-width: 767px) {
  /* タイトル(h2)を除いた下の文章だけ */
  .zen-kurenaido-area :not(h2):not(h2 *) {
    text-shadow:
      0.015em 0 0 currentColor,
     -0.015em 0 0 currentColor;
  }
}

/*** タイトル見出しのみ（共通） ***/
.zen-kurenaido-ttl {
  font-family: 'Zen Kurenaido', sans-serif !important;
  font-weight: 400; /* 実体ウェイトに合わせる */
  line-height: 1.3;
  letter-spacing: 0.08em;
  color: #000;

  /* 白いぼかし */
  text-shadow:
    0 2px 4px rgba(255,255,255,0.9),
    0 6px 12px rgba(255,255,255,0.8),
    0 12px 24px rgba(255,255,255,0.7);
}

/* PC：そのままでOK */
@media (min-width: 768px) {
  .zen-kurenaido-ttl {
    font-size: 3.4rem !important;
  }
}

/* SP：太く「見せる」 */
@media (max-width: 767px) {
  .zen-kurenaido-ttl {
    font-size: 2.2rem !important;

    /* 擬似太字 */
    text-shadow:
      -0.3px 0 0 #000,
       0.3px 0 0 #000,
       0 -0.3px 0 #000,
       0  0.3px 0 #000,

       0 2px 4px rgba(255,255,255,0.9),
       0 6px 12px rgba(255,255,255,0.8),
       0 12px 24px rgba(255,255,255,0.7);
  }
}

.marker {
  display: inline-block;
  position: relative;
  padding: 0 0.25em;
}

.marker {
  display: inline-block;
  position: relative;
  padding: 0 0.2em;
}

.marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 35%; /* ← 下1/3くらい */
  background: rgba(255, 235, 130, 0.85);
  z-index: -1;
  border-radius: 0.1em;
}

.zen-kurenaido-ttl {
  transform: skewX(-6deg);
}

.marker {
  transform: skewX(0);
}

/* ===== サンプル用マーカー ===== */
.sample-marker {
  display: inline-block;
  position: relative;
  padding: 0 0.2em;
}

.sample-marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 35%; /* 下1/3くらい */
  background: rgba(180, 220, 255, 0.85);
  z-index: -1;
  border-radius: 0.1em;
}

/* 傾きリセット（見出しがskewされているため） */
.sample-marker {
  transform: skewX(0);
}