/*********************
* 共通
*********************/
[data-unitone-layout="frame"] {
  border-radius: 16px !important;
  overflow: hidden;
}


/*********************
* ヘッダー
*********************/

/* ヘッダー固定 */
.wp-site-blocks>[data-unitone-layout~=cover]>[data-unitone-layout~=cover__content]:has(.site-header) {
  display: contents;
}

.wp-site-blocks>[data-unitone-layout~=cover]>[data-unitone-layout~=cover__content] .site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 5;
}

/* ヘッダーのドット */
.dot-hover a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.dot-hover a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 8px;
  height: 8px;
  background-color: #3B959C;
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.dot-hover a:hover::after {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

/* ナビメニュー文字色 */
/* 通常状態 */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__content {
  /* color: var(--wp--preset--color--unitone-accent); */
  transition: color 0.3s ease;
}

/* ホバー時 */
.wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: #3B959C !important;
}


/*********************
* ボタン
*********************/
/* cta */
/* ボタン基本スタイル */
.wp-block-buttons.cta-btn .wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6em 2em;
  color: white;
  background-color: #86ced4;
  border-radius: 50px;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* テキスト */
.wp-block-buttons.cta-btn .wp-block-button__link span {
  display: inline-block;
  position: relative;
  transition: transform 0.3s ease;
    transform: translateX(-8px);
}

/* 右矢印（after） - 右端に絶対配置、初期表示 */
.wp-block-buttons.cta-btn .wp-block-button__link::after {
  content: "➞";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%) translateX(0);
  font-weight: bold;
  color: white;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
  pointer-events: none;
}

/* 左矢印（before） - 左端に絶対配置、初期は非表示 */
.wp-block-buttons.cta-btn .wp-block-button__link::before {
  content: "➞";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  font-weight: bold;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
  pointer-events: none;
}

/* ホバー時：テキスト右に移動 */
.wp-block-buttons.cta-btn .wp-block-button__link:hover span {
  transform: translateX(10px);
}

/* ホバー時：右矢印をフェードアウトし右に少し動かす */
.wp-block-buttons.cta-btn .wp-block-button__link:hover::after {
  opacity: 0;
  transform: translateY(-50%) translateX(10px);
}

/* ホバー時：左矢印をフェードインし左からスライドイン */
.wp-block-buttons.cta-btn .wp-block-button__link:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ホバー時のボタン背景色変化 */
.wp-block-buttons.cta-btn .wp-block-button__link:hover {
  background-color: #3B959C;
}



/* wc-btn ページ用ボタン*/
/* ボタン本体 */
.wp-block-buttons.wc-btn .wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 3.5em;
  background-color: white;
  color: #3b959c;
  transition: all 0.3s ease;
  overflow: visible;
}

/* テキスト */
.wp-block-buttons.wc-btn .wp-block-button__link span {
  display: inline-block;
  position: relative;
  transition: transform 0.3s ease;
  transform: translateX(-10px);
}

/* 矢印（after） - 右端に絶対配置 */
.wp-block-buttons.wc-btn .wp-block-button__link::after {
  content: "➞";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* 矢印（before） - 左端に絶対配置 */
.wp-block-buttons.wc-btn .wp-block-button__link::before {
  content: "➞";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  font-size: 1.4em;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* ホバー時：右矢印消す、左矢印出す、テキスト右に動かす */
.wp-block-buttons.wc-btn .wp-block-button__link:hover::after {
  opacity: 0;
  transform: translateY(-50%) translateX(5px);
}

.wp-block-buttons.wc-btn .wp-block-button__link:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.wp-block-buttons.wc-btn .wp-block-button__link:hover span {
  transform: translateX(10px);
}

/* ホバー時の色変更 */
.wp-block-buttons.wc-btn .wp-block-button__link:hover {
  background-color: #3B959C !important;
}

/*********************
* front-page
*********************/
/* margin-bottom */
.mb-xs {
  margin-bottom: 0.5rem;
}

.mb-s {
  margin-bottom: 1rem;
}

.mb-m {
  margin-bottom: 1.5rem;
}

.mb--s {
  margin-bottom: -1rem !important;
}

/* 吹き出し */
.balloon {
  position: relative;
  display: inline-block;
  padding: 10px 32px;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  line-height: 1;
  margin-bottom: 1rem;
  text-align: center;
}

.balloon::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 8px 6px 0 6px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}

/* wc-blue */
.wc-blue {
  color: #86ced4;
}

/* セクションブロック背景 */
.half-gray {
  position: relative;
  overflow: hidden;
}

.half-gray::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  background: #f3f4f6;
  /* 薄いグレー */
  z-index: -1;
}

/* 料金プランの背景 */
.half-bg-top {
  position: relative;
  overflow: hidden;
  /* 擬似要素のはみ出し防止 */
}

.half-bg-top-1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 50%;
  background: #919191;
  z-index: 0;
}

.half-bg-top-2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 50%;
  background: #BDAE7B;
  z-index: 0;
}

.half-bg-top-3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  bottom: 50%;
  background: #3B959C;
  z-index: 0;
}

.half-bg-top>* {
  position: relative;
  z-index: 1;
}

/* 2列目目立たせた表 */
.highlight-second-col th:nth-child(2) {
  border-left: 7px solid #86ced4;
  border-right: 7px solid #86ced4;
}

.highlight-second-col tr:first-child th:nth-child(2) {
  border-top: 7px solid #86ced4;
}

.highlight-second-col td:nth-child(2) {
  border-left: 7px solid #86ced4;
  border-right: 7px solid #86ced4;
}

.highlight-second-col tr:last-child td:nth-child(2) {
  border-bottom: 7px solid #86ced4;
}


/* QandA */
.unitone-accordion__q-text::before,
.unitone-accordion__a-text::before {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}

.unitone-accordion__q-text::before {
  content: "Q";
    color: #86ced4;
}

.unitone-accordion__a-text::before {
  content: "A";
    color: #BDAE7B;
}

/*********************
* 固定ページ
*********************/
/* タイトル文字の英字・共通パーツ */
h1.wp-block-post-title::after,
.blog h1.wp-block-heading::after,
.post-type-archive-works h1.wp-block-query-title::after {
  display: block;
  content: "";
  margin-left: 3px;
  color: #86ced4;
  font-size: 0.6em;
}
/* よくある質問 */
.page-id-25 h1.wp-block-post-title::after {
  content: "FAQ" !important;
}

/* 料金プラン */
.page-id-21 h1.wp-block-post-title::after {
  content: "PLAN";
}

/* お問い合わせ */
.page-id-19 h1.wp-block-post-title::after {
  content: "CONTACT";
}

/* プライバシーポリシー */
.page-id-3 h1.wp-block-post-title::after {
  content: "PRIVACY POLICY";
}

/* ブログ */
.blog h1.wp-block-heading::after {
  content: "BLOG";
}

/* 制作事例 */
.post-type-archive-works h1.wp-block-query-title::after {
  content: "WORKS";
}

/*********************
* 制作事例ページ
*********************/
.works-meta {
  margin-bottom: 2em;
  padding: 1em;
  background-color: #f3f4f6;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 2em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.works-company {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.works-meta p {
  margin: 0 0 10px;
  font-size: 16px;
  color: #2a2a2a;
}

/******************
* スワイパー
*******************/
.swiper-button.swiper-button-prev:hover,
.swiper-button.swiper-button-next:hover {
  background-color: #3b959c;
  transition: background-color 0.3s ease;
}