@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.sp-menu {
	width:38px;
	margin-right: 6px;
	margin-bottom: -6px;
}

.main_visual_logo {
	width: 50%;
}

.c-pageTitle {
	margin-bottom: -50px !important;
}

/* ===============================
   Contact Button（FORCE CENTER）
=============================== */

.cp-contact-button {
  /* ★ここが重要 */
  display: block;
  width: fit-content;
  margin: 20px auto 20px auto;

  /* 中身配置 */
  padding: 16px 32px;
  min-width: 240px;

  background-color: #0074BC;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 999px;

  text-align: center;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-decoration: none;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

  animation: cp-breath 1.2s ease-in-out infinite;
}

/* ホバー */
.cp-contact-button:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}

/* クリック */
.cp-contact-button:active {
  transform: scale(0.98);
}

/* 呼吸 */
@keyframes cp-breath {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* スマホ */
@media (max-width: 768px) {
  .cp-contact-button {
    margin: 20px auto 20px auto;
    font-size: 15px;
    min-width: 220px;
  }
}


/* ===============================
   Gutenberg見出し × fuwatto
   安全グラデーション追加版
=============================== */

.wp-block-heading.fuwatto {
  display: block;
  text-align: center;

  font-size: 26pt;
  font-weight: 900;
  line-height: 1.0;

  /* ▼ グラデーション（左 → 右） */
  background: linear-gradient(
    90deg,
    #e53935 0%,    /* 赤 */
    #ec407a 32%,   /* ピンク寄りの赤 */
    #8e24aa 65%,   /* 紫 */
    #3a0a6a 100%   /* 少し暗く濃い紫 */
  );

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* ▼ 初期状態（半透明は使わない） */
  filter: saturate(0.35) brightness(1.35);
  transform: translateY(48px) !important;

  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s ease-out !important;

  will-change: transform, filter;

}

/* ▼ 可視状態 */
.wp-block-heading.fuwatto.is-active {
  transform: translateY(0) !important;
  filter: saturate(1) brightness(1);
}

.single span.p-breadcrumb__text {
display:block !important;
}

.for_SP {display: inline-block;}
.for_PC {display: none}
.for_TB {display: none;}

/* -------------------------------------------- */
/* ▼タブレット用として付け足すデザイン */
/* -------------------------------------------- */
	@media (min-width: 960px) {
.for_SP {display: none;}
.for_PC {display: none}
.for_TB {display: inline-block;}

/*MAIN MENU fontawesome周り*/
.global_menu_pc {
	font-size: 20pt !important;
	margin-bottom: 5px;
	display: block;
}
.ttl {
	font-size: 11pt !important;
	font-weight: bolder;
	display: block;
	color: #0074BC;
		}
.ttl .ttl_en {
	font-size: 8pt !important;
	font-weight: bolder;
	display: block;
	margin-bottom: 5px;
		}
		.sub-menu .menu-item {
			color: #0074BC;
		}
		.menu-item img {
			width: 54px;
			margin-bottom: 3px;
		}
		.sub_menu_img {
			width: 280px !important;
			margin-bottom: 8px;
		}
/* アイコンが横に180度回転する */
.menu-item img {
  transition: transform 0.6s ease;
}

.menu-item:hover img,
.menu-item.current_page_item img, .menu-item.current-menu-item img {
  transform: rotateY(180deg);
}

/*header右のボタン*/
    .btn-wrapper {
      display: flex;
      gap: 0px; /* ボタン同士の間隔 */
      justify-content: center;
      margin-top: 0px;
    }
    .circle-btn {
      width: 90px;
      height: 90px;
/*      border-radius: 50%; 丸にするか四角にするか・・・*/
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      text-decoration: none;
      line-height: 1;
      vertical-align: middle;
      transition: transform 0.25s ease;
    }
    .circle-btn img {
      width: 20px;
      margin-bottom: 0px;
      line-height: 1;
      display: inline-block; /* アニメーション対象にするため */
    }
    /* アイコンがぴょこっと跳ねる */
    .circle-btn:hover img {
      animation: bounce 0.5s ease;
    }
    @keyframes bounce {
      0%   { transform: translateY(0); }
      30%  { transform: translateY(-8px); }
      60%  { transform: translateY(3px); }
      80%  { transform: translateY(-3px); }
      100% { transform: translateY(0); }
    }
    /* お問い合わせボタン */
    .contact-btn {
      /*background-color: #268ece;*/
      background-color: #60a6d1;
    }
    /* ご予約ボタン */
    .reserve-btn {
      background-color: #F15A22;
    }
		.ttl_ja {
			font-size: 0.7em;
			line-height: 1.5em;
		}
	}

/* ------------------------------------ */
/* ▼PC用として付け足すデザイン */
/* ------------------------------------ */
	@media (min-width: 1200px) {
.for_SP {display: none;}
.for_PC {display: inline-block;}
.for_TB {display: inline-block;}


	
	}