@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
*/
.grecaptcha-badge { visibility: hidden; }

.c-pageTitle {
  display: none;
}
.l-content {
  padding-top: 0;
}
.l-mainContent__inner>.post_content {
  margin-top: 0;
}

/*------------------------------
  共通ホバーアニメーション用クラス
  ※任意の要素に .animated-shadow-hover を追加してください
------------------------------*/
.animated-shadow-hover {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.animated-shadow-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}


/*------------------------------
  SWELLのボタンにホバー効果を追加する例
  対象：.swell-block-button__link
------------------------------*/
.swell-block-button__link {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.swell-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}


/*------------------------------
  dent_boxスタイルのカードにホバー効果を追加する例
  対象：.is-style-dent_box（サービス一覧などのカードにも利用可）
------------------------------*/
.is-style-dent_box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.is-style-dent_box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

/*-------------------------------------------------
ローディング画面全体のスタイル
※ページ全体を覆い、中央にスピナーを配置
--------------------------------------------------*/
/* ページローダー全体 */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* お好みの背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.page-loader.loaded {
  opacity: 0;
}

/* ロゴフェードインアニメーション */
.logo-loader {
  opacity: 0;
  transform: translateY(30px); /* 下からスタート */
  animation: fadeInUp 1.2s ease-out forwards;
}

.logo-loader img {
  max-width: 250px; /* 任意のサイズに調整 */
  height: auto;
}

/* キーフレーム定義 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 以下、既存の装飾用要素やトップに戻るボタンのスタイルもそのまま使用 */
.floating-circle {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(51, 51, 51, 0.1);
  animation: floatAnimation 6s ease-in-out infinite;
}
.floating-circle.top-left {
  top: 20px;
  left: 20px;
}
.floating-circle.bottom-right {
  bottom: 20px;
  right: 20px;
}
@keyframes floatAnimation {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.back-to-top {
  position: fixed;
  bottom: 70px;
  right: 15px;
  width: 50px;
  height: 50px;
  background: #4cc764;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  z-index: 9998;
}
.back-to-top:hover {
  opacity: 1;
}

/*-------------------------------------------------
contact form 7
--------------------------------------------------*/
/* 全体コンテナ：余白や角丸、影を付与してモダンな印象を与える */
.cf7-container {
  max-width: 600px;
  margin: 40px auto;
  padding: 40px;
  background-color: #fff; /* 白ベース */
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 各入力フィールド、セレクト、テキストエリアのスタイル */
.cf7-container input[type="text"],
.cf7-container input[type="email"],
.cf7-container input[type="tel"],
.cf7-container select,
.cf7-container textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

/* フォーカス時にポイントカラーで強調 */
.cf7-container input[type="text"]:focus,
.cf7-container input[type="email"]:focus,
.cf7-container input[type="tel"]:focus,
.cf7-container select:focus,
.cf7-container textarea:focus {
  border-color: #06C755;
  box-shadow: 0 0 5px rgba(6, 199, 85, 0.3);
  outline: none;
}

/* テキストエリアの最小高さ */
.cf7-container textarea {
  min-height: 150px;
}

/* セレクトボックスのカスタム：ネイティブの下矢印アイコンをカスタム SVG に変更 */
.cf7-container select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="12" viewBox="0 0 20 20" fill="%2306C755" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 7.5L10 12L14.5 7.5H5.5Z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
}

/* プライバシーポリシー同意エリアのスタイル */
/* Contact Form 7 の acceptance タグは自動的に <span class="wpcf7-acceptance"> 等のクラスが付与されるので、そちらを利用します */
.cf7-container .wpcf7-acceptance {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 14px;
}
.cf7-container .wpcf7-acceptance input[type="checkbox"] {
  margin-right: 10px;
  width: auto;
}

/* 送信ボタン：センタリングし、ホバー時の動きも追加 */
.cf7-container input[type="submit"] {
  display: block;
  margin: 0 auto;
  background-color: #06C755;
  color: #fff;
  border: none;
  padding: 15px 30px;
  font-size: 18px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.3s, transform 0.3s;
}
.cf7-container input[type="submit"]:hover {
  background-color: #049940;
  transform: translateY(-2px);
}

.green-box .has-swl-deep-03-background-color {
    background-color: var(--color_deep03) !important;
    color: var(--swl-text_color--white, #fff);

    /* ここから追加のスタイル */
    border-radius: 8px;
    padding: 0.5em 0.5em;
    display: block;
    width: 90%;
    margin: 5px auto;
    text-align: center;
    font-weight: 600;
    
    /* シャドウ追加 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    
    /* ホバー時のスムーズな切替 */
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.green-box .has-swl-deep-03-background-color:hover {
    /* 背景色と文字色を反転 */
    background-color: var(--swl-text_color--white, #fff) !important;
    color: var(--color_deep03);
    
    /* シャドウを少し強調 */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

/* 固定ボトムメニューの基本スタイル（デフォルトでは非表示） */
#swell-sp-bottom-menu {
  display: none;  /* PCなど幅広い画面では非表示にする */
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 500;  /* ローダーより背面に配置（必要に応じて値を調整） */
  background-image: url("/wp-content/themes/swell_child/images/bg.png");
  /* 繰り返さない */
  background-repeat: no-repeat;
  /* 横幅を要素いっぱい（100%）、縦は自動調整 */
  background-size: 100% 100%;
  /* 中央寄せなどお好みで */
  background-position: center top;
}

/* メニュー内の各リンクのスタイル */
#swell-sp-bottom-menu .swell-menu-item {
  flex: 1 1 auto;            /* 横方向に均等配分 */
  text-align: center;       /* 各リンクを中央寄せ（アイコンを中央に） */
  padding: 0;          /* 上下の余白（必要に応じて調整） */
  margin-top: 16px;
  margin-bottom: 20px;
  /*background-color: #e7e9eb;    背景色（例として白。サイトデザインに合わせて変更可） */
}

/* スマホ画面での表示調整 */
@media screen and (max-width: 768px) {
  #swell-sp-bottom-menu {
    display: flex;                 /* スマホ画面ではフレックスコンテナとして表示 */
    justify-content: space-around; /* 子要素（リンク）を均等に配置 */
    align-items: center;           /* 縦方向中央揃え */
  background-image: url("/wp-content/themes/swell_child/images/bg.png");
  /* 繰り返さない */
  background-repeat: no-repeat;
  /* 横幅を要素いっぱい（100%）、縦は自動調整 */
  background-size: 100% 100%;
  /* 中央寄せなどお好みで */
  background-position: center top;
}

.c-widget__title.-spmenu {
  display: none;
}
	
/* ボトムメニュー内のレイアウトを縦並び＋中央寄せ */
#swell-sp-bottom-menu .swell-menu-item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  text-decoration: none;
  width: 20%;
}

/* ラベル文字の見た目 */
#swell-sp-bottom-menu .swell-menu-label {
  margin-top:10px;
  font-size: 2.7vw;
  font-weight: 700;
  line-height: 1;
  color: #333;
}

/* 画像サイズをやや抑える場合はここで */
#swell-sp-bottom-menu img {
  width: 50%;              /* 必要に応じて変更 */
  height: auto;
}