/* 
Theme Name: Relifal
Theme URI: https://saporal.net
Description: This theme is for Relifal
Author: SAPORAL
Author URI: https://saporal.net
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* ===================================================
   段落（pタグ）の下余白をデフォルト0にする
   =================================================== */
/* サイト全体の段落の下余白を0にリセット */
p {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Elementorのウィジェット・ブロック内の最後の段落の余白も0にする */
.elementor p,
.elementor p:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}



/* ===================================================
   オーバーフロー周り
   =================================================== */
/* オーバーフロー非表示 */
.overflow-hidden{
	overflow: hidden;
}

/* アニメーションがエディタ内で表示されるようにする（hiddenの打ち消し） */
.editor-styles-wrapper .rlf-hero-catch__title,
.block-editor-block-list__layout .rlf-hero-catch__title {
  visibility: visible !important;
}



/* ===================================================
   テキストシャドウ
   =================================================== */
.my-text-shadow {
  text-shadow: 1px 1px 1px #111;
}


/* ===================================================
   z-index
   =================================================== */
.z-index2 {
  position: relative; /* z-indexを効かせるために必要です */
  z-index: 2;
}



/* ===================================================
   お知らせ
   =================================================== */
/* カテゴリーの高さ固定（改行時に広がるのを防ぐ） */
.news-category-wrapper{
	max-height: 30px;
}

/* ===================================================
   ベンゼン環フラワー（高機能版コンポーネント）
   =================================================== */

.benzene-flower {
  /* --- 基本サイズ・傾き --- */
  --flower-size: 300px;
  --flower-rotate: 0deg;

  /* ★テキスト終了後に咲かせるための全体ディレイ（デフォルト0s） */
  --flower-delay: 0s;

  /* --- 登場アニメーション設定 --- */
  --hex-duration: 0.6s;       /* ベンゼン環の出現スピード（※現在は最初から表示のため未使用） */
  --petal-start-delay: 0.3s;  /* 最初の花びらが出るまでの待ち時間 */
  --petal-duration: 1.0s;     /* 花びら1枚がfadeして咲ききる時間 */
  --petal-stagger: 0.65s;     /* 次の花びらが出る間隔（ふわりと連動して咲くテンポ） */

  /* --- 全体の自動回転（スピン）設定 --- */
  --spin-speed: 20s;          /* 回転速度 */
  --spin-delay: 4.8s;         /* 全花びらが咲き終わってから回転開始する目安時間 */
  --spin-direction: normal;   /* normal: 時計回り / reverse: 反時計回り */

  position: relative;
  width: var(--flower-size);
  height: var(--flower-size);
  transform: rotate(var(--flower-rotate));
  transform-origin: center center;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}

/* シャドーをつけたい場合のみ適用するクラス */
.benzene-flower.benzene-flower__shadow,
.benzene-flower__shadow {
  filter: drop-shadow(4px 8px 14px rgba(0, 0, 0, 0.15));
}

/* 中央のベンゼン環（通常の花用デフォルト） */
.benzene-flower__hexagon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32%;
  height: auto;
  z-index: 2;
  display: block;
  pointer-events: none;

  /* ★最初から表示（アニメーションなし） */
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 花びら単体（通常の花用デフォルト） */
.benzene-flower__petal {
  position: absolute;
  width: 27%;
  top: 8%;
  left: 50%;
  height: auto;
  display: block;
  z-index: 1;
  pointer-events: none;

  /* 起点は左下（初期は透明・サイズ0） */
  transform-origin: left bottom;
  opacity: 0;
  transform: translate(-6px, 10px) scale(0);

  /* ★【fade特化】滑らかでソフトな開花カーブ */
  animation-name: benzene-petal-bloom;
  animation-duration: var(--petal-duration, 1.0s);
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  /* ★遅延中も消えた状態を保ち、終了後も残す設定 */
  animation-fill-mode: both;
  animation-delay: calc(var(--flower-delay, 0s) + var(--petal-start-delay) + (var(--order) * var(--petal-stagger)));
}

/* ===================================================
   薄い花専用（.is-light）の位置・サイズ
   =================================================== */
.benzene-flower.is-light .benzene-flower__hexagon {
  width: 32%;
}

.benzene-flower.is-light .benzene-flower__petal {
  width: 28%;
  top: 14%;
  left: 48%;
}

/* ===================================================
   配置ラッパー・回転順
   =================================================== */
.benzene-flower__petal-wrap {
  position: absolute;
  inset: 0;
  transform: rotate(calc(var(--i) * 60deg));
  pointer-events: none;
}

/* 右上から右回り（時計回り） */
.benzene-flower__petal-wrap:nth-of-type(1) { --order: 0; } /* 1枚目：右上 */
.benzene-flower__petal-wrap:nth-of-type(2) { --order: 1; } /* 2枚目：右 */
.benzene-flower__petal-wrap:nth-of-type(3) { --order: 2; } /* 3枚目：右下 */
.benzene-flower__petal-wrap:nth-of-type(4) { --order: 3; } /* 4枚目：下 */
.benzene-flower__petal-wrap:nth-of-type(5) { --order: 4; } /* 5枚目：左下 */
.benzene-flower__petal-wrap:nth-of-type(6) { --order: 5; } /* 6枚目：左上 */

/* 逆回転オプション：右上から左回り（反時計回り） */
.benzene-flower.is-reverse-bloom .benzene-flower__petal-wrap:nth-of-type(1) { --order: 0; }
.benzene-flower.is-reverse-bloom .benzene-flower__petal-wrap:nth-of-type(6) { --order: 1; }
.benzene-flower.is-reverse-bloom .benzene-flower__petal-wrap:nth-of-type(5) { --order: 2; }
.benzene-flower.is-reverse-bloom .benzene-flower__petal-wrap:nth-of-type(4) { --order: 3; }
.benzene-flower.is-reverse-bloom .benzene-flower__petal-wrap:nth-of-type(3) { --order: 4; }
.benzene-flower.is-reverse-bloom .benzene-flower__petal-wrap:nth-of-type(2) { --order: 5; }

/* 自動回転設定 */
.benzene-flower.is-spinning {
  animation-name: benzene-spin;
  animation-duration: var(--spin-speed, 20s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* ★回転の開始タイミングも遅延と連動 */
  animation-delay: calc(var(--flower-delay, 0s) + var(--spin-delay, 4.8s));
  animation-direction: var(--spin-direction, normal);
  animation-fill-mode: both;
}
.benzene-flower.is-reverse-spin {
  --spin-direction: reverse;
}

/* --- キーフレーム --- */
/* ※ベンゼン環は最初から表示にしたため現在は未使用（残しても問題ありません） */
@keyframes benzene-hex-appear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* ★ 花びら：fadeのようにじわ〜っと透けながら左下から優しくフワッと拡大 */
@keyframes benzene-petal-bloom {
  0% {
    opacity: 0;
    transform: translate(-6px, 10px) scale(0);
  }
  50% {
    opacity: 0.55;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes benzene-spin {
  from {
    transform: rotate(var(--flower-rotate));
  }
  to {
    transform: rotate(calc(var(--flower-rotate) + 360deg));
  }
}
/*********  花の設定はここまで  *********/