@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
*/

/* フローティングバナー */
#footer-floating {
	visibility: hidden;
}

@media not all and (min-width: 960px) {


	[data-scrolled=true] #footer-floating {
	    opacity: 1; /* 不透明度 0～1で調整 */
    	-webkit-transform: translateY(0);
		/* スマホ用（幅767px以下のときだけ適用） */
@media screen and (max-width: 767px) {
  .top-banner img {
    display: block;
    width: 100%;
    height: 200px;   /* ←ここで上下の高さを調整 */
    object-fit: cover; /* 画像を切れないように拡大縮小 */
  }
}
    	transform: translateY(0);
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff; /* 背景色（必要に応じて変更） */
		z-index: 1000; /* 他の要素の上に表示 */
    	visibility: visible;
	}

	#footer-floating .swell-block-column:first-child .swell-block-button a {
		background-color: #007BFF !important; /* 左のカラム（青） */
		color: #fff !important; /* 文字色を白 */
	}

	#footer-floating .swell-block-column:last-child .swell-block-button a {
		background-color: #28A745 !important; /* 右のカラム（緑） */
		color: #fff !important; /* 文字色を白 */
	}

	/* アイコンの色も白に統一 */
	#footer-floating .swell-block-button a svg {
		fill: #fff !important;
	}

	#footer-floating .is-style-more_btn{
		padding:0;
	}

	/* 上に戻るボタンの下余白を調整 */
	.p-fixBtnWrap {
		bottom: 4em;
	}
}
/* ===== お問い合わせボタン（スマホ用縦一列） ===== */
@media screen and (max-width: 767px) {
  .contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
    padding: 10px 0;
    background: #fff;
  }

  .contact-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
  }

  .contact-buttons a:active {
    opacity: 0.85;
    transform: translateY(2px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }

  .contact-buttons .reserve { background: #ff4d4d; } /* 赤＝予約 */
  .contact-buttons .mail { background: #3399ff; }    /* 水色＝メール */
  .contact-buttons .line { background: #33cc66; }    /* 緑＝LINE */
  .contact-buttons .tel { background: #66a3ff; }     /* 青＝電話 */
}
/* スマホだけサービス内容の画像サイズを固定（見栄え優先） */
@media screen and (max-width: 767px) {
  .wp-block-image img,
  .wp-block-column img,
  .service-content img,
  .c-card__img img {
    width: 100%;
    height: 180px !important;
    object-fit: cover;
    border-radius: 8px;
  }
}
.price {
  background: linear-gradient(90deg, #ff9900, #ff6600); /* 左から右にオレンジのグラデーション */
  margin: 20px 0; /* 上下余白 */
  font-weight: 700; /* 太字 */
  color: #fff; /* 白文字 */
  border-radius: 25px; /* 角を丸める */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}


/* スマホ用に高さを小さく */
@media screen and (max-width: 767px) {
/* 画面幅いっぱいに“はみ出させる”フルブリード配置 */

/* スクロール横ブレ対策（必要なら） */
html,body{ overflow-x: hidden; }
	.top-banner {
  margin: 0;
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

	
}

}
@media screen and (max-width: 767px) {
  .top-banner {
    height: 220px; /* スマホ用に高さ220px */
  }
}
/* PC用のボタン表示 */
.contact-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap; /* 横幅せまいPCでも折り返すように */
}

.contact-buttons a {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  color: #fff !important;
  font-weight: bold;
  min-width: 120px;
}
.contact-buttons .reserve { background-color: #f44336; } /* 赤 */
.contact-buttons .mail    { background-color: #2196f3; } /* 青 */
.contact-buttons .line    { background-color: #4CAF50; } /* 緑 */
.contact-buttons .tel     { background-color: #2196f3; } /* 青 */
/* PC専用の料金表デザイン */
@media screen and (min-width: 768px) {
  .price-table {
    margin: 30px auto;
    border-collapse: collapse;
    width: 100%;
    max-width: 900px;
    font-size: 16px;
    line-height: 1.6;
  }

  .price-table table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ccc;
  }

  .price-table th,
  .price-table td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: center;
  }

  .price-table th {
    background: #f5faff;
    font-weight: bold;
  }

  .price-table .highlight {
    color: #e60000; /* 赤文字 */
    font-weight: bold;
  }

  .price-table .discount {
    color: #ff6600; /* 割引オレンジ */
    font-weight: bold;
  }

  .price-table .option {
    background: #fafafa;
    font-size: 14px;
  }
}