@charset "UTF-8";
/*.sp {display:none !important;}*/



/*------00 1st configuration--------------------------------------------------------------*/
body {
	margin:0px;
	padding:0px;
	color:#000;
	background-color:#fff;
	font-size:100%;
	font-family:'Noto Sans JP',sans-serif;
	-webkit-text-size-adjust:none;
	width:100%;
	min-width:100%;
}
html {overflow:auto;}
body {overflow:auto;}
html body {overflow-y:auto;}

header,hgroup,nav,aside,section,article,figure,footer {
	display:block;
}

h1,h2,h3,h4,h5,h6,p,address,ol,ul,li,dl,dt,dd,table,caption,th,td,img,form,a,span,
header,hgroup,nav,aside,section,article,figure,footer {
	margin:0px;
	padding:0px;
	border:none;
	font-size:100%;
	font-style:normal;
	list-style:none;
	line-height:1.6em;
	text-align:left;
	font-family:'Noto Sans JP',sans-serif;
}
h1,h2,h3,h4,h5,h6 {
}

input,textarea {
	margin:0px;
	padding:0px;
	font-size:100%;
	font-style:normal;
	list-style:none;
	line-height:1.6em;
	text-align:left;
	font-family:'Noto Sans JP',sans-serif;
}

img {
	width:100%;
	height:auto;
	vertical-align:bottom;
}
body>img,
body>itp_iframe_tag,
body>table {
	display:block;
	width:0;
	height:0;
}

a {
	outline:none;
}
a:link,
a:visited {
	color:#02f;
	color:#2f71fe;
	text-decoration:none;
}
a:hover,
a:focus {
	color:#cb0;
	text-decoration:underline;
}
a:active {
	color:#ddd;
	text-decoration:underline;
}
a.a_tel {
	cursor:text;
	color:#000;
	text-decoration:none;
}
a.a_tel img {
	cursor:default;
}

a {outline:hidden;}
a {/* \*/ overflow:hidden; /* */}

.floatclear {clear:both;}
.floatleft {float:left;margin-right:0px !important;}
.floatright {float:right;margin-left:0px !important;}

.right {text-align:right !important;}
.center {text-align:center !important;}
.left {text-align:left !important;}
.no_top {margin-top:0px !important;padding-top:0px !important;}

.red,.required_mark {color:#e20130;}
.orange {color:#f18101;}
.pink {color:#cc929a;}

.bold {font-weight:bold !important;}
.super {vertical-align:super !important;}
.first {margin-top:20px !important;}
.imgborder {border:1px solid #ccc;}
/*.serif {font-family:'Baskervville',serif;}*/
.serif {font-family:'Noto Serif Display',serif;}

.small {font-size:12px !important;}
.x-small {font-size:11px !important;}
.large {font-size:18px !important;}
.x-large {font-size:22px !important;}

p,
dt,
dd,
li,
caption,
th,
td,
input,
textarea,
address {font-size:16px;}


/* 他のセクションの z-index を低めに設定 */
#firstview {
    position: relative;
    z-index: 1; /* ヘッダー関連が前面に来るように低く設定 */
}

#firstview_grandopen {
    margin-top: -20px; /* 必要に応じてマイナスの値を調整 */
}
.img-overlay {
    margin-top: -10px; /* 必要に応じてマイナスの値を調整 */
}
.button-container {
    display: flex;
    justify-content: center;
    align-items: center; /* 縦方向の中央揃え */
    margin-bottom: 20px; /* ボタンの下に余白を追加 */
    height: 150px; /* ボタンコンテナの高さを設定 */
}
.button-taiken-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 0px;
    height: 120px;
    background: linear-gradient(to bottom, #ddbdbd 0%, #eedddd 100%); /* ピンク系のグラデーション背景 */
    padding: 10px 0; /* 上下の余白を確保 */
}
/* グローバルリンクスタイルの調整 */
a:link,
a:visited {
    color: white;
    text-decoration: none;
}

/* ボタン内のリンクスタイルを明確に指定 */
.my-button {
    background-color: #40BA8D; /* 背景色 */
    border: none;
    color: white; /* テキストカラー */
    text-align: center;
    display: inline-block;
    font-size: 30px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 12px;
    transition: background-color 0.3s ease;
    width: 400px;
    height: 80px;
    line-height: 80px; /* 高さに合わせてテキストを中央に揃える */
}

.my-button:hover {
    background-color: #359E76; /* ホバー時の背景色 */
}

/* ボタン内リンクへのスタイルを指定し、他のリンクスタイルの干渉を排除 */
.my-button a {
    color: inherit; /* 親要素のテキスト色を継承 */
    text-decoration: none; /* 下線を除去 */
}

/* スマホ用スタイルの確認 */
@media (max-width: 600px) {
    .my-button {
        width: 90%;
        height: auto;
		padding: 15px 5%; /* アスペクト比の調整 */
        font-size: 16px; /* フォントサイズの調整 */
    }
}

/* モーダルの基本スタイル */
.modal {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* 背景の半透明 */
}

/* モーダルコンテンツのスタイル */
.modal-content {
    position: relative;
    margin: 5% auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
}

/* モーダル内の閉じるボタン */
.close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #000;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

/* モーダル内の画像 */
.modal-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.contact-button {
    background-color: #5D5D63; /* 問い合わせボタンの背景色 */
    color: white !important; /* 文字色を白に固定し、優先度を上げる */
    padding: 15px 30px; /* ボタンサイズを大きくするためにパディングを増やす */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px; /* フォントサイズを大きくする */
    text-align: center;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.contact-button:hover {
    background-color: #4B4B51; /* ホバー時に少し暗くする */
    color: white !important; /* ホバー時も文字色を白に保持 */
}

.contact-button:visited {
    color: white !important; /* 訪問済みリンクも白に固定 */
}


/*------div#pagetop, box----------------------------------------------------------------*/

div#wrapper {
	margin:0px auto 0px auto;
	width:750px;
}
div.box {
	margin:0px auto 0px auto;
	width: 90%; /* 固定幅を削除して、画面幅の90%に調整 */
    max-width: 750px; /* デスクトップでは最大750px */
	position:relative;
}

.clear:after {
	display:block;
	content:"";
	clear:both;
}

.title_sub {
	display:table-cell;
	vertical-align:middle;
	width:750px;
	height:270px;
	text-align:center;
	background-color:#d4acad;
	font-family:'Noto Serif Display',serif;
	font-weight:normal;
}
.title_sub .small-note {
    display: block;
    font-size: 20px; /* 小さく表示 */
	text-align:center;
    color: #333; /* テキストカラーを設定 */
    margin-top: 15px; /* 少しの余白を追加 */
    line-height: 1.2;
}

.swiper-container {
    position: relative;
    width: 100%;
    max-width: 750px; /* 最大幅を750pxに設定 */
    margin: 20px auto 0; /* 上に20pxの余白、左右中央揃え */
    overflow: hidden; /* はみ出したコンテンツを非表示 */
}

/* 各スライドのスタイル */
.swiper-slide {
    display: none; /* 初期状態では表示しない */
    width: 100%;
    height: auto;
}

/* アクティブなスライドを表示 */
.swiper-slide.active {
    display: block; /* アクティブなスライドを表示 */
}

/* スライドの画像のスタイル */
.swiper-image {
    width: 100%;
    height: auto;
}

/* 前後のボタンのスタイル */
.swiper-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
}

/* 前ボタン */
.swiper-button.prev {
    left: 10px;
}

/* 次ボタン */
.swiper-button.next {
    right: 10px;
}

/* スライドのインジケーターのスタイル */
.swiper-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.swiper-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    cursor: pointer;
}

.swiper-indicators button.active {
    background-color: #FF6F61; /* アクティブなインジケーターの色 */
}

#studio, #lesson, #effect, #campaign, #flow {
  scroll-margin-top: 100px; /* ヘッダー高に合わせて調整 */
}
html { scroll-behavior: smooth; }

/*------header-------------------------------------------------------------------------------*/
header #header_inspect {font-size:21px;}
section#firstview div#firstview_tag ul li {font-size:33px;}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    height: 120px;
    box-sizing: border-box;
    position: fixed; /* 固定表示 */
    top: 0; /* ページの上部に配置 */
    width: 100%; /* 幅を100%に設定して中央寄せを可能にする */
    max-width: 750px; /* 最大幅を750pxに設定 */
    margin: 0 auto; /* 中央に配置 */
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #d4acad; /* 背景色を統一 */
    border-bottom: 1px solid #ccc; /* 下にボーダーを追加 */
    overflow: visible; /* オーバーフローを可視化 */
}

#header_logo {
    display: flex;
    align-items: center;
    padding-top: 10px;
    margin-left: 10px; /* 最も一般的な余白値に統一 */
    width: 300px;
    z-index: 10001; /* ロゴを前面に表示 */
}
/* 店舗名の共通スタイル */
.store-name {
    text-align: center; /* テキストを中央揃え */
    line-height: 1.2; /* 行間を少し詰める */
    margin: 10px 0; /* 上下の余白を調整 */
    color: #333; /* 店舗名の色 */
}

/* ヘッダーロゴ用の店舗名スタイル */
#header_logo .store-name {
    margin-left: 20px; /* ロゴとの間に余白 */
    font-size: 20px; /* ヘッダー用フォントサイズを小さめに */
    white-space: nowrap; /* 改行を防止 */
    overflow: visible; /* はみ出し部分をそのまま表示 */
}

/* メインの店舗名部分 */
.store-name-main {
    font-size: 1.5em; /* メインタイトルのフォントサイズ（適度に小さく） */
    font-weight: bold; /* 太字 */
    display: block; /* ブロック要素にして改行 */
    margin-bottom: 0.1em; /* 下部に少し余白 */
}

/* サブタイトル部分 */
.store-name-sub {
    font-size: 0.9em; /* サブタイトルのフォントサイズを小さく */
    font-weight: normal; /* 通常の太さ */
    display: block; /* ブロック要素にして改行 */
    color: #555; /* サブテキストを少し薄い色に */
}

header div#header_right {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 子要素を中央揃え */
    text-align: center;
    margin-right: 5px;
}
.header_text {
    width: 100%; /* 同じ幅に揃える */
    text-align: center; /* テキストを中央揃え */
}

.coming-soon {
    font-size: 20px; /* 文字サイズを調整 */
    color: #333; /* カラーを設定 */
    font-weight: normal; /* 太字を外す */
}

/* 定員に付き募集停止中のテキストのスタイル */
.reservation-status {
    display: block;
    width: 270px; /* ボタンの横幅に合わせる */
    text-align: center; /* テキストを中央揃え */
    font-size: 20px; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    color: #f00; /* テキストカラー */
    padding: 0; /* 上下に余白 */
    margin-bottom: 0px; /* ボタンとの間隔 */
}

#header_inspect {
    display: inline-block;
    margin: 5px 0 0 0; /* マージンを統一 */
    width: 270px;
    height: 42px;
    padding-top: 3px;
    text-align: center;
    color: #000;
    background-color: #fff;
    text-decoration: none;
    border-radius: 24px;
}

header #header_soon {
/*display:none;*/
	width:fit-content;
	color:#f00;
	background-color:#fff;
	margin: 0 auto; /* 自動調整に変更 */
	padding:2px 8px 3px 8px;
	border-radius:4px;
	font-size:20px;
	font-weight:bold;
	line-height:1em;
}

/* ナビゲーションのスタイル */
#header_nav {
    display: flex;
    align-items: center;
    margin-right: 10px;
    z-index: 10002; /* 必要な範囲で z-index を設定 */
}

#header_menu, .dropdown-content {
    list-style: none;
    display: flex;
    position: relative;
	font-size: 16px;
    padding: 10px 15px;
    z-index: 10003; /* ドロップダウンメニューをさらに前面に */
}


#header_menu li {
    position: relative;
    font-size: 16px;
}

/* メニュー項目のリンク */
#header_menu a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

#header_menu a:hover {
    color: #FF6F61; /* ホバー時のカラー変更 */
}

/* スタジオを探すメニューの大きさ調整 */
#header_menu .dropbtn {
    background-color: #000; /* 背景を黒に */
    color: #fff; /* 文字色を白に */
    padding: 15px 25px; /* パディングを追加してサイズを調整 */
    border-radius: 5px; /* 角を丸くする（必要に応じて） */
    text-decoration: none; /* 下線を消す */
    display: inline-block; /* インラインブロックに設定 */
    transition: background-color 0.3s ease; /* ホバー時のトランジション */
}

/* ホバー時のスタイル */
#header_menu .dropbtn:hover {
    background-color: #333; /* ホバー時に少し明るい黒に */
}

/* ドロップダウンメニューのスタイル */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* ボタンの真下に配置 */
    left: 50%; /* ボタンの中央に配置 */
    transform: translateX(-50%); /* 水平中央に調整 */
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    padding: 10px 0; /* 上下のパディングを調整 */
}

.dropdown-content li {
    padding: 8px 16px;
}

.dropdown-content a {
    color: #333;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block; /* ホバー時に表示 */
}

/*------footer--------------------------------------------------------------------------------*/
footer {
	margin:0px auto 0px auto;
	width:750px;
	background-color:#eedddd;
	padding:13px 0px 15px 0px;
	border-top:1px solid #dcc;
}
footer #footer_copyright {
	text-align:center;
}



/*------topimage----------------------------------------------------------------------------*/
section#firstview {
	padding-top:120px;
	margin-top: 0; /* 必要に応じて余白の重複を防ぐ */
	background-color:#ddbdbd;
}
/* 画像にテキストを追加 */
.image-container {
    position: relative;
    width: 100%;
    max-width: 750px; /* 画像の最大幅を指定 */
    margin: 0 auto; /* センターに配置 */
    height: auto;
}

.background-image {
    width: 100%;
    height: auto;
}

.text-overlay {
    position: absolute;
    transform: translateX(-50%); /* 水平方向のみ中央寄せ */
    color: #333; /* 黒っぽい色に設定 */
    font-size: 40px; /* 文字を大きく設定 */
    text-align: center;
    line-height: 1.4; /* 行間の調整 */
    font-weight: bold;
    width: calc(100% - 40px); /* 左右の余白を均等に保つ */
    max-width: 700px; /* テキストの最大幅を設定 */
    box-sizing: border-box;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
}
section#firstview div#firstview_tag {
	margin-top:30px;
}
section#firstview div#firstview_tag #firstview_tag_txt01 {
	margin-left:40px;
	width:710px;
}
section#firstview div#firstview_tag img#firstview_tag_logo {
	display:inline-block;
	vertical-align:top;
	margin:32px 0px 0px 40px;
	width:212px;
}
section#firstview div#firstview_tag ul {
	display:inline-block;
	vertical-align:top;
	margin:30px 0px 0px 20px;
	width:460px;
}
section#firstview div#firstview_tag ul li {
	display:inline-block;
	vertical-align:top;
	font-family:'Noto Serif Display',serif;
background:-moz-linear-gradient(top,rgba(251,231,145,0) 0%,rgba(251,231,145,0) 55%,rgba(251,231,145,1) 56%,rgba(251,231,145,1) 85%,rgba(255,255,0,0) 86%,rgba(255,255,0,0) 100%);
background:-webkit-linear-gradient(top,rgba(251,231,145,0) 0%,rgba(251,231,145,0) 55%,rgba(251,231,145,1) 56%,rgba(251,231,145,1) 85%,rgba(255,255,0,0) 86%,rgba(255,255,0,0) 100%);
background:linear-gradient(to bottom,rgba(251,231,145,0) 0%,rgba(251,231,145,0) 55%,rgba(251,231,145,1) 56%,rgba(251,231,145,1) 85%,rgba(255,255,0,0) 86%,rgba(255,255,0,0) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbe791',endColorstr='#fbe791',GradientType=0);
}
section#firstview div#firstview_tag ul li:nth-of-type(2) {
	margin-right:137px;
}
section#firstview div#firstview_tag ul li:nth-of-type(4) {
	margin-right:51px;
}




/*------campaign----------------------------------------------------------------------------*/
section.campaign {
	padding:50px 0px 30px 0px;
	background:linear-gradient(to bottom,#ddbdbd 0%,#eedddd 100%);
}
section.campaign h2 {
    font-size: 45px; /* テキストサイズを調整 */
    font-weight: bold; /* 太字に設定 */
	font-style: italic; /* 斜めの文字にする */
    text-align: center; /* 中央揃え */
    margin-bottom: 10px; /* 下部の余白を設定 */
    color: #333; /* テキストカラーを設定 */
	font-family: 'Noto Serif Display',serif; /* フォントファミリーを指定 */
}	
.campaign h2 .large-number {
    font-size: 65px; /* フォントサイズを大きくする */
	color: #333; /* テキストカラーを設定 */
	font-weight: bold; /* 太字に設定 */
	font-style: italic; /* 斜めの文字にする */
	font-family: 'Noto Serif Display',serif; /* フォントファミリーを指定 */
    margin: 0 4px; /* 周囲の余白を調整して自然に見せる */
}
section.campaign p {
	margin:25px auto 0px auto;
	width:700px;
}
section.campaign .cp_txt {
	margin-top:15px;
}

/* 画像とテキストを重ねるためのスタイル */
.image-container {
    position: relative; /* 相対位置指定 */
    display: inline-block; /* インラインブロックにして親要素の幅に合わせる */
}

.image-container img {
    display: block; /* 画像をブロック表示で幅100%にフィットさせる */
}

.overlay-text {
    position: absolute; /* 絶対位置指定で画像に重ねる */
    bottom: 55px; /* 画像の下部から少し上に配置 */
    left: 50%; /* 左端から50%に配置 */
    transform: translateX(-50%); /* 水平方向に中央寄せ */
    background-color: rgba(0, 0, 0, 0.7); /* 半透明の黒背景 */
    color: #fff; /* 文字色を白に */
    padding: 5px 10px; /* テキストの周囲に余白を設定 */
    font-size: 14px; /* テキストのフォントサイズ */
    border-radius: 5px; /* 角を少し丸くする */
    pointer-events: none; /* テキストがクリックを妨げないように設定 */
    text-align: center; /* テキストを中央揃え */
}

.store-list {
    display: none; /* 初期状態では非表示 */
    list-style: none; /* リストマーカーを非表示 */
    padding: 0;
    margin: 0;
    text-align: center; /* リスト全体を中央寄せ */
    width: 100%; /* リスト全体の幅を100%に */
    background-color: #f6f6f6; /* 背景色をリスト全体に設定 */
}

.store-list li {
    margin: 10px auto; /* リストアイテムを中央寄せ */
    display: inline-block; /* リストアイテムをインラインブロックにして中央寄せ */
}

.store-list a {
    display: inline-block; /* リンクをインラインブロックに */
    padding: 10px 20px; /* リンク内のパディングを調整 */
    background-color: #fff; /* 背景色をアイテムの背景に変更 */
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.store-list a:hover {
    background-color: #eaeaea;
}

#produce-caldo {
    position: relative;
    text-align: center;
    padding: 5px 20px;
}

#produce-caldo h2 {
    font-family:'Noto Serif Display',serif;
	font-size: 36px;
	font-weight:normal;
    line-height: 1.5;
    margin-bottom: 5px;
    text-align: center;
    position: absolute;
    z-index: 10;
    margin-top: 20px; /* ここで下げる量を調整 */
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%; /* 幅の最大値を設定 */
    width: 90%; /* 必要に応じて調整 */
}

#produce-caldo img {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    display: block;
    margin: 100px auto 0 auto; /* 画像をさらに下に下げるためにmargin-topを増やす */
    z-index: 5;
    position: relative;
}

.w-effect {
    margin-top: 40px;
    padding: 20px;
}

.cross {
    font-size: 45px; /* フォントサイズを大きく */
    font-weight: bold;
    margin: 0 10px;
    align-self: center;
    color: #333;
}

.w-effect h3 {
    font-family: 'Noto Serif Display', serif;
    font-size: 32px;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
	line-height: 1.3; /* 行間を広げて、より読みやすく */
	font-weight: 300; /* フォントを細くする */
}
.effect-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* 要素間のスペースを増やしてバランスをとる */
    position: relative;
    padding: 20px; /* パディングを追加して全体に余裕を持たせる */
}

.effect-description {
    width: 180px; /* サイズを拡大 */
    height: 180px; /* サイズを拡大 */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* テキストを下寄せに変更 */
    align-items: center;
    font-size: 22px; /* テキストサイズを少し大きく */
    color: #b96a75;
    font-weight: bold;
    text-align: center;
    padding: 15px 15px 25px 15px; /* 下の余白を設定してテキストを調整 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}
	
.effect-description span {
    line-height: 1.1; /* 行間を狭くする */
    margin-top: 0px; /* 要素間の余白を調整 */
}

/* マシンピラティスの丸 */
.effect-description.pilates {
    background: linear-gradient(135deg,#F0D7D7,#f8b4c8); /* 明るく華やかなピンクのグラデーション */
    border: 3px solid #E5C4C4; /* 少し濃いピンクのアウトライン */
    color: #5a1e47; /* 濃い赤紫でフォントを目立たせる */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 文字の視認性を高めるための影 */
	
}
/* 「マシンピラティス」を強調 */
.effect-description.pilates .underline {
    font-size: 24px; /* 通常のテキストより大きくする */
    font-weight: bold; /* 太字で強調 */
    color: #4a1240; /* より濃い色でさらに目立たせる */
    text-decoration: underline; /* 下線を追加して強調 */
    margin-bottom: 8px; /* 他のテキストとのスペース調整 */
	white-space: nowrap; /* 改行させずに1行にする */
    overflow: visible; /* 円からはみ出ても表示する */
    text-align: center; /* 中央揃え */
}
/* ホットヨガの丸 */
.effect-description.yoga {
    background: linear-gradient(135deg, #F2D3B5,#fddbb7); /* 明るく華やかなオレンジのグラデーション */
    border: 3px solid #E8C4A4; /* 少し濃いオレンジのアウトライン */
    color: #653820; /* 濃いブラウンでフォントを目立たせる */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* 文字の視認性を高めるための影 */
}

/* 「ホットヨガ」を強調 */
.effect-description.yoga .underline {
    font-size: 24px; /* 通常のテキストより大きくする */
    font-weight: bold; /* 太字で強調 */
    color: #5b2d1a; /* より濃い色でさらに目立たせる */
    text-decoration: underline; /* 下線を追加して強調 */
    margin-bottom: 8px; /* 他のテキストとのスペース調整 */
    white-space: nowrap; /* 改行させずに1行にする */
    overflow: visible; /* 円からはみ出ても表示する */
    text-align: center; /* 中央揃え */
}

/* ボディメイクと姿勢改善のスタイル調整 */
.effect-description .sub-text {
    font-size: 20px; /* テキストサイズを少し大きく */
    margin-top: 4px; /* 間隔を少し狭める */
}

/* アイコンのデザインと配置を改善 */
.effect-description::before {
    content: '';
    width: 60px; /* アイコンのサイズを拡大 */
    height: 60px;
    background-size: contain;
    position: absolute;
    top: 10px; /* サークルの中央より少し上に配置 */
}

/* ピラティスのアイコン */
.effect-description.pilates::before {
    background-image: url("../_pic/pilates.png");
}

/* ヨガのアイコン */
.effect-description.yoga::before {
    background-image: url("../_pic/yoga.png");
}

/*------about---------------------------------------------------------------------------------*/
section#about {
    padding-bottom: 75px;
    background-image: url("../_pic/bg/bg_about.jpg");
    background-repeat: no-repeat;
    background-position: 0px 490px;
}

section#about div#bg_about {
    margin-top: 42px;
    padding-top: 450px;
    background-image: url("../_pic/bg/border_vertical.gif");
    background-repeat: no-repeat;
    background-position: 727px 0px;
}

section#about div#bg_about .about_txt {
    margin-left: 85px;
    font-family: 'Noto Serif Display', serif;
    font-size: 27px;
}

section#about div#bg_about h3 {
    line-height: 1.6em;
    font-size: 39px !important;
    font-weight: normal;
}

section#about div#bg_about p {
    margin-top: 60px;
    line-height: 2.2em;
}

section#about div#bg_about #about_name {
    margin: 60px 0px 0px 85px;
    font-family: 'Noto Serif Display', serif;
    font-size: 35px;
}

section#about div#bg_about .about_pic {
    margin-top: 150px;
}

section#about div#bg_about div#about_produce p:nth-of-type(1) {
    margin-left: 70px;
    width: 680px;
}

section#about div#bg_about div#about_produce h3 {
    margin: 30px 0px 0px 70px;
    font-family: 'Noto Serif Display', serif;
    line-height: 1.3em;
    font-weight: normal;
    position: relative;
    z-index: 2;
}

section#about div#bg_about div#about_produce img#about_produce_pic01 {
    display: block;
    margin: -20px 0px 0px 70px;
    width: 680px;
    height: auto;
}

section#about div#bg_about div#about_produce p:nth-of-type(2) {
    margin: 35px 0px 0px 70px;
    width: 680px;
    font-size: 22px;
    line-height: 1.6em;
}

/* 施設案内セクション */
.facility_heading {
    text-align: center;
    font-size: 36px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #333;
    font-family: 'Baskervville', serif;
    font-weight: normal;
}

.about_pic {
    margin-bottom: 40px;
}

.facility_intro {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央寄せ */
    justify-content: center;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    max-width: 100%;
}

.facility_intro img {
    max-width: 100%;
    height: auto;
}

.facility_intro figcaption {
    display: flex; 
    justify-content: center; /* 水平方向の中央寄せ */
    align-items: center; /* 垂直方向の中央寄せ */
    text-align: center; /* テキスト中央寄せ */
    font-size: 18px;
    font-weight: bold;
    color: #333;
    width: 100%; /* 幅を100%にすることで適切な中央寄せ */
    margin-top: 10px;
}


/* Instagramバナー */
.instagram-banner {
    text-align: center;
    background-color: #ffffff;
    padding: 5px 0;
    margin-bottom: 0; /* 下の余白をなくす */
}

.instagram-banner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


/*------point----------------------------------------------------------------------------------*/
section#point {
	background-image:url("../_pic/bg/bg_point.jpg");
	background-position:0px 440px;
	background-repeat:no-repeat;
	padding-bottom:90px;
}
section#point h2 {
	position:relative;
	top:-20px;
}
section#point div#box_point01 {
	margin:80px 0px 0px 0px;
	background-image:url("../_pic/bg/border_vertical.gif");
	background-repeat:repeat-y;
	background-position:0px 0px;
}
section#point div#box_point01 h3 {
	margin:0px auto 0px auto;
	width:591px;
	text-align:center;
	font-family:'Noto Serif Display',serif;
	font-weight:normal;
	font-size:40px;
}
section#point div#box_point01 .point_txt {
	margin:20px auto 0px auto;
	width:591px;
	font-family:'Noto Serif Display',serif;
	font-size:23px;
	line-height:2em;
}
section#point div#box_point01 ul {
	margin-top:50px;
	text-align:center;
}
section#point div#box_point01 ul li {
	display:inline-block;
	vertical-align:top;
	width:198px;
	height:198px;
	padding-top:0px;
	text-align:center;
	background-color:#ddbdbd;
	border-radius:100px;
	font-family:'Noto Serif Display',serif;
	font-size:28px;
}
section#point div#box_point01 ul li:nth-of-type(1) {
	margin-top:-20px;
	border-radius:0;
	background-color:transparent;
}
section#point div#box_point01 ul li:nth-of-type(2) {
	height:150px;
	padding-top:48px;
}
section#point div#box_point01 ul li:nth-of-type(3) {
	height:168px;
	padding-top:30px;
}
section#point div#box_point01 .point_pic {
	display:block;
	margin:65px auto 0px auto;
	width:630px;
}
section#point div#box_point02 {
	margin:80px 0px 0px 0px;
	background-image:url("../_pic/bg/border_vertical.gif");
	background-repeat:repeat-y;
	background-position:727px 0px;
}
section#point div#box_point02 h3 {
	margin:0px auto 0px auto;
	width:591px;
	text-align:center;
	font-family:'Noto Serif Display',serif;
	font-weight:normal;
	font-size:40px;
}
section#point div#box_point02 ul {
	margin-top:50px;
	text-align:center;
}
section#point div#box_point02 ul li {
	display:inline-block;
	vertical-align:top;
	width:250px;
	height:250px;
	padding-top:0px;
	margin:0px 15px 0px 15px;
	text-align:center;
	background-color:#ddbdbd;
	border-radius:130px;
	font-family:'Noto Serif Display',serif;
	font-size:32px;
}
section#point div#box_point02 ul li:nth-of-type(1) {
	height:188px;
	padding-top:62px;
}
section#point div#box_point02 ul li:nth-of-type(2) {
	height:200px;
	padding-top:50px;
	line-height:1.4em;
}
section#point div#box_point02 .point_pic {
	display:block;
	margin:50px auto 0px auto;
	width:630px;
}
section#point div#box_point03 {
	margin:80px 0px 0px 0px;
	background-image:url("../_pic/bg/border_vertical.gif");
	background-repeat:repeat-y;
	background-position:0px 0px;
}
section#point div#box_point03 h3 {
	margin:0px auto 0px auto;
	width:591px;
	text-align:center;
	font-family:'Noto Serif Display',serif;
	font-weight:normal;
	font-size:40px;
}
section#point div#box_point03 ul {
	margin-top:50px;
	text-align:center;
}
section#point div#box_point03 ul li {
	display:inline-block;
	vertical-align:top;
	width:250px;
	height:250px;
	padding-top:0px;
	margin:0px 15px 0px 15px;
	text-align:center;
	background-color:#ddbdbd;
	border-radius:130px;
	font-family:'Noto Serif Display',serif;
	font-size:32px;
}
section#point div#box_point03 ul li span {
	display:block;
	margin-top:10px;
	width:250px;
	text-align:center;
	font-family:'Noto Serif Display',serif;
	font-size:22px;
	line-height:1.3em;
}
section#point div#box_point03 ul li:nth-of-type(1) {
	height:188px;
	padding-top:62px;
	line-height:1.4em;
}
section#point div#box_point03 ul li:nth-of-type(2) {
	height:210px;
	padding-top:40px;
	line-height:1.4em;
}
section#point div#box_point03 .point_pic {
	display:block;
	margin:50px auto 0px auto;
	width:630px;
}



/*------problem------------------------------------------------------------------------------*/
section#problem {
	background-image:url("../_pic/bg/bg_problem.jpg");
	background-repeat:no-repeat;
	background-position:0px 1240px;
	padding-bottom:90px;
}
section#problem .title_sub {
	font-size:38px;
}
section#problem img#problem_pic01 {
	display:block;
	margin:50px auto 0px auto;
	width:248px;
}
section#problem ul {
}
section#problem ul li {
	margin:40px auto 0px auto;
	width:600px;
	height:66px;
	height:52px;
	padding-top:4px;
	text-align:center;
	color:#fff;
	background-color:#b96a75;
	background-image:url("../_pic/bg/bg_problem_check.png");
	background-repeat:no-repeat;
	background-position:40px 8px;
	background-size:47px;
	border-radius:26px;
	font-size:28px;
}
section#problem img#problem_arrow01 {
	display:block;
	margin:55px auto 0px auto;
	width:55px;
	height:auto;
}
section#problem #title_problem01 {
	margin:48px auto 0px auto;
	width:635px;
}
section#problem div#box_problem01 {
	margin-top:85px;
	background-image:url("../_pic/bg/border_vertical.gif");
	background-repeat:repeat-y;
	background-position:0px 0px;
}
section#problem div#box_problem01 h3 {
	text-align:center;
	font-family:'Noto Serif Display',serif;
	font-size:38px;
	font-weight:normal;
}
section#problem div#box_problem01 p {
	margin:50px auto 0px auto;
	width:620px;
	font-family:'Noto Serif Display',serif;
	font-size:23px;
	line-height:2.3em;
}
section#problem div#box_problem01 img {
	display:block;
	margin:18px 0px 0px 76px;
	width:674px;
	height:auto;
}
section#problem img#problem_arrow02 {
	display:block;
	margin:75px auto 0px auto;
	width:55px;
	height:auto;
}
section#problem #title_problem02 {
	margin:55px auto 70px auto;
	width:301px;
}



/*------merit----------------------------------------------------------------------------------*/
section#merit {
	background-image:url("../_pic/bg/bg_merit.jpg");
	background-repeat:no-repeat;
	background-position:0px 0px;
	padding-bottom:90px;
}
section#merit h2 {
	position:relative;
	top:-20px;
}
section#merit div.box_merit {
	margin:28px auto 0px auto;
	width:670px;
	background-color:#fff;
	padding-bottom:40px;
}
section#merit div.box_merit h3 {
	display:table;
	padding-top:30px;
	margin:0px auto 0px auto;
	width:570px;
}
section#merit div.box_merit h3 img {
	display:table-cell;
	vertical-align:middle;
	width:121px;
}
section#merit div.box_merit h3 span {
	display:table-cell;
	vertical-align:middle;
	width:449px;
	text-align:center;
	font-family:'Noto Serif Display',serif;
	font-size:38px;
	font-weight:normal;
}
section#merit div.box_merit>img {
	display:block;
	margin-top:32px;
}
section#merit div.box_merit p {
	margin:35px auto 0px auto;
	width:574px;
	font-size:22px;
	line-height:1.6em;
}



/*------voice----------------------------------------------------------------------------------*/
section#voice {
	background-color:#f6eeef;
	padding-bottom:65px;
}
section#voice .title_sub {
	font-size:42px;
}
section#voice div.box_voice {
	margin:40px auto 0px auto;
	width:650px;
	min-height:281px;
	padding-top:50px;
	border-top:3px dotted #000;
	position:relative;
}
section#voice>div:nth-of-type(1) {
	border-top:none;
}
section#voice div.box_voice img.voice_pic {
	position:absolute;
	display:block;
	top:50px;
	left:0px;
	width:260px;
}
section#voice div.box_voice h3 {
	padding-top:5px;
	margin-left:260px;
	font-size:24px;
}
section#voice div.box_voice p {
	margin:30px 0px 0px 260px;
	font-size:20px;
}
section#voice div.box_voice .box_voice_attr {
	position:absolute;
	bottom:0px;
	right:0px;
	border:1px solid #9c9596;
	padding:1px 10px 3px 10px;
}



/*------price----------------------------------------------------------------------------------*/
section#price {
	background-color:#eedede;
	padding-bottom:90px;
}
section#price h2 {
	position:relative;
	top:-20px;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
section#price #price_txt01 {
	margin-top:57px;
	text-align:center;
	font-size:58px;
	line-height:0.7em;
}
section#price #price_txt01 span {
	display:block;
	margin:0px 0px 0px 0px;
	text-align:center;
	color:#d75e80;
	font-size:100px;
	font-weight:bold;
}
section#price div.box_price,
section#price div.box_price_option {
	margin:55px auto 0px auto;
	width:644px;
	background-color:#fff;
	padding-bottom:35px;
}
section#price div.box_price h3,
section#price div.box_price_option h3 {
	text-align:center;
	padding:3px 0px 2px 0px;
	color:#fff;
	background-color:#b96a75;
	font-family:'Noto Serif Display',serif;
	font-size:32px;
	font-weight:normal;
}
section#price div.box_price .price_price {
	margin:35px auto 0px auto;
	width:571px;
}
section#price div.box_price_option .price_price {
	display:inline-block;
	vertical-align:top;
	margin:20px 0px 0px 50px;
	width:181px;
	padding:20px 40px 20px 10px;
	border-right:1px solid #000;
}
section#price div.box_price hr {
	margin:35px auto 0px auto;
	width:570px;
	border:none;
	border-top:1px solid #000;
}
section#price div.box_price p {
	margin:28px auto 0px auto;
	width:570px;
	font-size:24px;
}
section#price div.box_price_option p {
	display:inline-block;
	vertical-align:top;
	margin:30px 0px 0px 35px;
	line-height:1.7em;
	font-size:24px;
}
section#price #title_price02 {
	margin:60px auto 0px auto;
	width:644px;
}
.price_price small {
  font-size: 0.45em; /* 小さめにする（55%） */
  color: #555;       /* 少し薄いグレーで控えめに */
  margin-left: 4px;  /* 画像との間を少し空ける */
  vertical-align: middle; /* 画像と高さを揃える */
}

.mfp-close {
    background: none !important;
    color: white !important;
    font-size: 28px !important;
    top: 10px !important;
}

/*------flow-----------------------------------------------------------------------------------*/
section#flow {
	background-color:#ead5d6;
	padding-bottom:65px;
}
section#flow .title_sub {
	font-size:50px;
}
section#flow div.box_flow {
	margin:35px auto 0px auto;
	width:670px;
	background-color:#fff;
	padding-bottom:40px;
}
section#flow div.box_flow h3 {
	display:table;
	padding-top:30px;
	margin:0px auto 0px auto;
	width:570px;
}
section#flow div.box_flow h3 img {
	display:table-cell;
	vertical-align:middle;
	width:121px;
}
section#flow div.box_flow h3 span {
	display:table-cell;
	vertical-align:middle;
	width:420px;
	font-family:'Noto Serif Display',serif;
	font-size:38px;
	font-weight:normal;
	line-height:1.3em;
}
section#flow div.box_flow>img {
	display:block;
	margin-top:32px;
}
section#flow img.flow_arrow {
	display:block;
	margin:35px auto 0px auto;
	width:55px;
	height:auto;
}
section#flow hr {
	margin:80px auto 80px auto;
	width:634px;
	border:none;
	border-top:3px dotted #000;
}
section#flow #tbl_flow_caption {
	margin:0px auto 0px auto;
	width:670px;
	padding:50px 0px 50px 0px;
	text-align:center;
	color:#fff;
	background-color:#b96a75;
	font-size:36px;
	font-weight:normal;
}
section#flow table {
	margin:0px auto 0px auto;
	width: 100%; /* 固定幅を削除して、デバイス幅にフィットするように変更 */
    max-width: 670px; /* 最大幅を設定してデスクトップでの表示を最適化 */
	border-collapse:collapse;
}
section#flow table th {
	text-align:center;
	vertical-align:middle;
	width:210px;
	height:150px;
	border-top:5px solid #ead5d6;
	color:#fff;
	background-color:#ce979e;
	font-size:24px;
	font-weight:normal;
	line-height:1.4em;
}
section#flow table td {
	text-align:center;
	vertical-align:middle;
	border-top:5px solid #ead5d6;
	background-color:#fff;
	font-size:23px;
}
/* 共通のCSS設定を追加して、画像のサイズを統一する */
section#flow table td img {
    width: auto; /* 画像の幅を自動に設定して、比率を保つ */
    max-width: 100%; /* 最大幅を設定して、コンテナに合わせる */
    height: auto; /* 画像の高さも自動に設定 */
}

/* 初月会費のスタイルを修正 */
section#flow table td .tbl_flow_text {
    display: block;
    margin-top: 10px;
    width: 460px;
    text-align: center;
    color: #b96a75;
    background-color: #fbe791;
    font-size: 36px;
    font-weight: bold;
    padding: 5px 0;
}
/* 他のスタイルに影響を与えないためのセレクター */
section#flow table tr:nth-of-type(3) td .tbl_flow_text,
section#flow table tr:nth-of-type(4) td .tbl_flow_text {
    background-color: #f0f0f0; /* 必要に応じてスタイルを追加 */
}

section#flow table td span.tbl_flow_cp {
	display:block;
	margin-top:10px;
	width:460px;
	text-align:center;
	color:#b96a75;
	background-color:#fbe791;
	font-weight:bold;
}
section#flow .tbl_flow_txt {
	margin:10px auto 0px auto;
	width:670px;
	font-size:20px;
	line-height:1.4em;
}
.highlight-price-note {
    font-size: 14px !important; /* フォントサイズを確実に適用 */
    color: #666 !important; /* 文字色も確実に適用 */
}

/*------faq------------------------------------------------------------------------------------*/
section#faq {
	padding-bottom:90px;
}
section#faq .title_sub {
	font-size:50px;
	display:block;
	height:180px;
	padding-top:90px;
}
section#faq .faq_q {
	display:table-cell;
	vertical-align:middle;
	width:564px;
	height:130px;
	padding:0px 48px 0px 138px;
	background-color:#f2e6e7;
	background-image:url("../_pic/faq_q.png");
	background-repeat:no-repeat;
	background-position:58px 50%;
	font-size:26px;
	font-weight:normal;
}
section#faq .faq_a {
	width:564px;
	padding:25px 48px 55px 138px;
	color:#b96a75;
	background-image:url("../_pic/faq_a.png");
	background-repeat:no-repeat;
	background-position:58px 30px;
	font-size:26px;
	font-weight:normal;
}
/* この行を削除またはコメントアウトしました */
/* section#faq p:nth-of-type(4) {
	padding-bottom:0px;
} */
section#faq .faq_a_note {
	margin:20px 48px 0px 138px;
	font-size:20px;
	line-height:1.4em;
}	



/*------access-------------------------------------------------------------------------------*/
section#access {
	padding-bottom:30px;
}
section#access .title_sub {
	font-size:50px;
}
section#access iframe {
	display:block;
	margin:80px auto 0px auto;
	width:600px;
	height:352px;
}
section#access .access_title {
	margin:30px auto 0px auto;
	width:600px;
	font-size:22px;
	padding-top:30px;
	border-top:1px solid #000;
}
section#access .title_sub {
	font-size:40px;
}
section#access h3:nth-of-type(1) {
	border-top:none;
}
section#access .access_txt {
	margin:15px auto 0px auto;
	width:600px;
	font-size:22px;
}
section#access .access_txt img {
	width:369px;
	height:auto;
	padding-bottom:12px;
}

section#fixed_box{
	position:fixed;
	bottom:0;
	min-width:750px;
	height: 120px;
	background-color:#b96a75;
	z-index:100;
	opacity: 0;
}

.flex-container {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.btn {
	display:inline-block;
	padding: 24px 62px;
	text-align:center;
	background-color:#fff;
	border-radius:36px;
	font-size: 24px;
	color:#000 !important;
	text-decoration:none !important;
}
/* 電話番号の色を明示的に指定して、白くならないようにする */
.access_txt a {
    color: #333 !important; /* 電話番号の色を黒に設定 */
	font-size: 40px; /* フォントサイズを大きく設定 */
}

.access_txt a:hover {
    color: #000; /* ホバー時に濃い黒に変更 */
}

/*------access-info-------------------------------------------------------------------------------*/
section#access-info {
	padding-bottom:30px;
}
section#access-info .title_sub {
    font-size: 50px; /* タイトルのフォントサイズを#accessと同じに */
}

section#access-info iframe {
    display: block;
    margin: 80px auto 0px auto;
    width: 600px; /* 幅と高さを#accessと同じに */
    height: 352px;
}

section#access-info .access_title {
    margin: 30px auto 0px auto;
    width: 600px;
    font-size: 22px;
    padding-top: 30px;
    border-top: 1px solid #000; /* 上部のボーダーを設定 */
}

section#access-info h3:nth-of-type(1) {
    border-top: none; /* 最初のh3にボーダーなし */
}

section#access-info .access_txt {
    margin: 15px auto 0px auto;
    width: 600px;
    font-size: 22px;
}

section#access-info .access_txt img {
    width: 369px;
    height: auto;
    padding-bottom: 12px;
}

/*アニメーション用のクラス*/
.hidden {
    opacity: 0;
    display: block; /* display: none; を削除 */
    transition: opacity 0.5s ease;
    height: 0;
    overflow: hidden;
}

.visible {
    opacity: 1;
    display: block;
    height: auto;
}

.show {
    opacity: 0.8 !important;
    transition: opacity 0.6s;
}

#floating-button {
    position: fixed;
    bottom: 20px; /* ページ下からの距離 */
    right: calc((100% - 750px) / 2 + 20px); /* LPの中央750px幅を基準に配置 */
    z-index: 1000;
	text-align: center;
	display: flex;
    flex-direction: column;
	align-items: center;
    gap: 8px; /* 吹き出しとボタンの間隔 */
}
/* 吹き出し全体 */
.floating-bubble {
    background-color: #ff4d4d;
    color: #fff;
    font-size: 22px; /* 全体の文字を大きく */
    font-weight: bold;
    padding: 14px 20px; /* 余白を調整 */
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; /* 中央配置 */
    text-align: center;
    width: 280px; /* 幅を少し広げる */
    margin-bottom: 10px;
}

/* 吹き出し全体 */
.floating-bubble {
    background-color: #ff4d4d;
    color: #fff;
    font-size: 22px; /* 全体の文字を大きく */
    font-weight: bold;
    padding: 12px 16px; /* 余白を最適化 */
    border-radius: 10px;
    position: relative;
    display: inline-flex; /* コンテンツサイズに合わせる */
    align-items: center;
    justify-content: center; /* 中央配置 */
    text-align: center;
    max-width: fit-content; /* テキストの幅に自動調整 */
    margin-bottom: 10px;
}

/* 吹き出しの左側 (「まずは手ぶらで」部分) */
.bubble-left {
    font-size: 18px;
    line-height: 1.3;
    white-space: nowrap; /* 改行を防ぐ */
}

/* 吹き出しの右側 (990円体験部分) */
.bubble-right {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    margin-left: 6px; /* 左側との間隔を調整 */
}
  
/* 990 のスタイル */
.price-number {
    font-size: 60px;
    font-weight: bold;
    color: #FFD700;
    line-height: 1;
}

/* 「円」のサイズを小さく */
.price-unit {
    font-size: 18px;
    font-weight: bold;
    color: #FFD700;
    line-height: 1;
    margin-left: -2px;
}

/* 「体験」のサイズ */
.price-text {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-left: 3px;
}

/* 吹き出しの三角部分 */
.floating-bubble::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ff4d4d;
}


/* 予約ボタン */
.reserve-btn {
    display: flex;
    width: 175px;
    height: 175px;
    background-color: #40BA8D;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 10px;
}

/* 予約ボタンホバー時 */
.reserve-btn:hover {
    background-color: #359E76;
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.25);
}

/* 予約ボタンのテキスト */
.reserve-btn .text {
    font-size: 24px;
    font-weight: bold;
    white-space: nowrap;
    text-align: center;
    width: 90%;
    line-height: 1.2; /* デフォルトより詰めた行間 */
}

.reserve-btn .icon {
    display: block;
    margin-bottom: 5px; /* テキストとの間隔を調整 */
}

.reserve-btn .icon img {
    width: 80px; /* 初心者マークの幅 */
    height: auto; /* 高さを自動調整 */
}


@media (max-width: 750px) {
    #floating-button {
        right: 20px; /* モバイルでも右下に配置 */
        bottom: 15px;
    }
}