/* ----------------------------------------------------------------------
 reset css
---------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
 { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
html { overflow-y: scroll; -webkit-text-size-adjust:100%; }
ul, ol { list-style:none; }
blockquote , q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content: none; }
a:focus { outline:none; }
ins { text-decoration:none; }
mark { font-style:italic; font-weight:bold; }
del { text-decoration:line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; width:100%; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
button, input, select, textarea { outline:0; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:100%; }
input, textarea { background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); -webkit-appearance: none; border-radius:0; /* Removing the inner shadow, rounded corners on iOS inputs */ }
input[type="checkbox"]{ -webkit-appearance: checkbox; }
input[type="radio"]{ -webkit-appearance: radio; }
button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; }
iframe { max-width:100%; }

/* clearfix */
.clearfix:after { content: "."; display:block; clear:both; height:0; font-size:0.1em; line-height:0; visibility:hidden; overflow:hidden; }
.clearfix { display:inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height:1% }
.clearfix { display:block;}
/* end MacIE5 */


/* ------------------------------------------------------------------------------------
 基本
------------------------------------------------------------------------------------ */
body {
    font-family: "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
		background: #f4f4f4;
}

.background-gray{
	background: #2c2c2f;
}

section {
	width: 100%;
	margin: 0 auto;
}

.absolute {
    position: absolute;
}

.inner {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
		background: #fff;
		/* padding: 1.46vw 0 1.46vw; */
}

.inner-fv {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 0vw 0vw;
}

.inner-ft {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: #eee;
    padding: 1vw 0 0vw;
}

.content {
		position: relative;
		padding: 10px 0;
}

.info-list {
  list-style-type: none;
  padding: 0px 27px 25px;
  margin: 0;
  background: #f4f5f7;
  font-size: 0.75rem;
  margin: 0px 10px;
}

.info-list li {
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  line-height: 1.93;
  vertical-align: middle;
  word-break: break-all;
  overflow-wrap: break-word;
}

img {
  display: block;
  vertical-align: bottom;
  margin: 0;
  padding: 0;
}


picture img {
    width: 100%;
    height: auto;
		display: block;
}

video {
	width: 100%;
	height: auto;
	display: block;
}

h1, h2, h3, h4, h5, h6 {
  position: relative;
  vertical-align: middle;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.6;
  color: var(--clr-main)
}

/* text and headline */
p{ line-height:2.0; margin:1em 0 1em 0; font-size: 1rem;}/*p { line-height:2.4; margin:0 0 2em 0; }*/
h1, h2, h3, h4, h5, h6 { clear:both; line-height:1.4;  margin:0 0 10px 0; padding:10px 0 0 0; }
h1 { font-size:150%; }
/*h2:not(.ttl) { font-size:140%; padding: 1rem 2rem!important; border-left: 5px solid #000; background: #f4f4f4;}*/
h2:not(.ttl) {margin: 2.5em 0 1.5em;line-height: 1.6;padding: 1.3em;background: #393B3E!important;color: #fff;text-align: center;font-size: 140%;}
h2:not(.ttl) {
    position: relative;
    margin: 1.5em 0.5em 1.5em;
    line-height: 1.6;
    background: #393B3E!important;
    color: #fff;
    text-align: left;
    font-size: 140%;
    font-weight: bold;
    padding: 25px 15px 25px 35px;
    border-radius: 0px;
}

h2:not(.ttl):before {
    position: absolute;
    top: 25%;
    left: 15px;
    width: 3px;
    height: 50%;
    content: '';
    opacity: .8;
    border-radius: 3px;
    background: #FFFFFF;
}

h3 { font-size:130%; }
h4 { font-size:120%; }
h5 { font-size:110%; }
h6 { font-size:100%; }

a:focus{outline:none;}
a img{
	border:none;
	vertical-align:middle;
        width: 100%;
}
textarea{overflow:auto;}
label{cursor:pointer;}

a{
	text-decoration:none;
}
ul,ol{
	list-style-type:none;
}

p {
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  line-height: 1.93;
  vertical-align: middle;
	margin: 1.0em 0.7em 1.0em;
	word-break: break-all;
	overflow-wrap: break-word;
}

p.left {
  text-align: left !important
}

p.right {
  text-align: right !important
}

p.center, span.center {
  text-align: center !important
}

p.small, span.small{
  line-height: 1.8;
  text-align: left;
  font-size: 0.75rem;
}

p.large{
  line-height: 1.8;
  text-align: left;
  font-size: 1.2rem;
}

p.blue, span.blue{
	color: #2c74dd;
	font-weight: bold;
}

p.red, span.red{
	color: #f03748;
	font-weight: bold;
}

span.large{
  font-size: 1.2rem;
  margin-bottom: 1em;
  margin-top: 0em;
}

span.line {
	background: linear-gradient(transparent 50%, rgba(255, 88, 88, 0.24) 50%);
  display: inline;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition:background-size 1.5s;
}

span.line.on {
  /* 横方向を100%にして、マーカーを引く */
  background-size: 100% 100%;
}


ul li {
    list-style: none;
}

/* 色指定 */
body {
    --clr-line: rgba(207,214,235,0.6);
		--clr-backtransparent: rgba(255, 255, 255, 0);

}

.desc{
	padding: 0 10px;
	display: flex;
	justify-content: center; /* 横方向の中央寄せ */
	align-items: center; /* 縦方向の中央寄せ（親要素の高さが必要） */
}

.box {
    margin: 0em 0.5em;
    background: #F7F7F7;
    color: #2c2c2f;
		padding: 2em 0.5em;
    position: relative;
}

.description {
  display: flex;
  justify-content: center; /* 横方向の中央寄せ */
  align-items: center;     /* 縦方向の中央寄せ */
	padding: 0 10px;
	margin: 0px 0;/*margin: 20px 0;*/
}

.bounce-image {
  animation: smooth-boing 1.5s ease-in-out infinite;
}

@keyframes smooth-boing {
  0%, 100% {
    transform: scale(0.9); /* 元のサイズ */
  }
  30% {
    transform: scale(0.95); /* 少し大きくなる */
  }
  50% {
    transform: scale(0.9); /* 少し小さくなる */
  }
  70% {
    transform: scale(1.00); /* 再び少し大きく */
  }
}


/* キラッと光の帯が左から右に流れるアニメーションの定義 */
@keyframes shine {
  0% {
    left: -150%; /* 初期位置を少し左にして滑らかに開始 */
  }
  100% {
    left: 150%; /* 終了位置を右側に広げる */
  }
}

.compare tr:first-child td {
    background-color: #fbe4e4; /* 背景色を#fbe4e4に設定 */
    position: relative; /* キラッと光る帯のために相対位置を設定 */
    overflow: hidden; /* アニメーションがはみ出ないように設定 */
}

/* キラッと光る帯を表現 */
.compare tr:first-child td::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0; /* 初期位置を左の外側に配置 */
    width: 300%; /* 光る帯が十分な幅を持つように設定 */
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    animation: shine 1.5s ease-in-out infinite; /* 1.5秒で左から右に流れる */
    z-index: 1;
    pointer-events: none; /* 光の帯が他の操作を妨げないように設定 */
}


/* 比較表全体のスタイル */
.compare {
    border-collapse: collapse;
    max-width: 500px;
		width: 96%; /* 必要に応じて幅を調整 */
		margin: 0 auto; /* 横方向の中央揃え */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.98em;
		table-layout: fixed; /* テーブルのレイアウトを固定 */
}

.compare tr{
	height: 250px;
}

/* テーブルセルのスタイル */
.compare td {
    padding: 1.5em;
    border: 1px solid #ddd;
    vertical-align: middle; /* 縦位置中央揃え */
    height: auto; /* 自動で高さを調整 */
    width: 70%;
}

/* 1列目の文字 */
.compare td:first-child {
    font-weight: bold;
    color: #333;
    text-align: center;
    width: 30%;
    position: relative;
    z-index: 2; /* 文字を光の帯の上に表示 */
}

.compare td ul {
    list-style: none;
    padding: 0;
}

.compare td ul li {
    margin-bottom: 0.8em;
}

.compare td ul li strong {
    color: #333;
}

.compare table tr:last-child td {
    border-bottom: none;
}

.compare li {
    line-height: 1.5;
    margin: 0.8em 0;
}

.jost{
	font-family: 'Jost';
}

/* ------------------------------------------------------------------------------------
ラベル
------------------------------------------------------------------------------------ */

p.spcial-label{
    /* display: none; */
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
    background: #C1A889;
    color: #fff;
    min-width: 110px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 0.8rem;
    padding: 0 15px;
    /* -webkit-box-sizing: border-box; */
    box-sizing: border-box;
    letter-spacing: 3px;
}

p.spcial-label{
  margin: 0 auto;
}

/* ------------------------------------------------------------------------------------
 見出し強調
------------------------------------------------------------------------------------ */
.custom-heading {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		font-size: 1.2rem;
		font-weight: bold;
		color: #f03748;
		line-height: 1;
		letter-spacing: 1px;
		align-items: center;
		margin: 0 auto;
}

.custom-heading::before,
.custom-heading::after {
		display: inline-block;
		position: absolute;
		top: 50%;
		width: 20px;
		height: 3px;
		border-radius: 3px;
		background-color: #f03748;
		content: "";
}

.custom-heading::before {
		left: 30px;
		-webkit-transform: rotate(50deg);
		transform: rotate(50deg);
}

.custom-heading::after {
		right: 30px;
		-webkit-transform: rotate(-50deg);
		transform: rotate(-50deg);
}

/* ------------------------------------------------------------------------------------
 矢印
------------------------------------------------------------------------------------ */
.arrow-container {
  text-align: center;
  margin: 10px;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #000; /* 下方向矢印 */
  animation: bounce 1.5s infinite;
  margin: 0 auto;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0); /* 元の位置 */
  }
  50% {
    transform: translateY(15px); /* 下方向に動く */
  }
}


/* ------------------------------------------------------------------------------------
 吹き出し
------------------------------------------------------------------------------------ */
.flex {
    display: flex;
		padding: 10px;

}
.profile-image {
    margin-right: 20px;
		margin-top: auto;
}

.profile-image img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/
		border: 1px solid #ccc; /* ここで枠線を追加 */
}

/* 基本のスタイル */
.speech {
    position: relative;
    background-color: #fbe4e4; /* お好みの色に変更してください */
    padding: 0 15px;
    border-radius: 30px;
    max-width: 300px;
    margin-bottom: 20px;
    transform: translateX(-100%); /* 初期状態は画面外に配置 */
    opacity: 0; /* 初期状態は透明 */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* アニメーションのトランジション */
}

/* アニメーション後のスタイル */
.speech.animate {
    transform: translateX(0); /* スライドインして画面内に配置 */
    opacity: 1; /* 透明度を戻す */
}



/* ------------------------------------------------------------------------------------
 下方向へ促す3点
------------------------------------------------------------------------------------ */
.scroll-dots {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.dot {
  width: 10px;
  height: 10px;
  margin: 5px 0; /* 縦方向にマージン */
  background-color: #333;
  border-radius: 50%;
  opacity: 0.5;
  animation: dot-flash 1.5s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.3s;
}

.dot:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes dot-flash {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}


/* ------------------------------------------------------------------------------------
 吹き出し見出し
------------------------------------------------------------------------------------ */

.speech-bubble {
    position: relative;
    background-color: #01162b;
    color: white;
    padding: 20px;
    border-radius: 0px;
    text-align: center;
    animation: bounce 2s infinite;
		margin: 30px 10px;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: #01162b transparent;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}




/* ------------------------------------------------------------------------------------
 下方向へ促すアニメーション
------------------------------------------------------------------------------------ */
.custom-shape-divider-top-1631532852 {
    position: relative;
    top: 0;
    left: 0;
		right: 0;
		margin: 0 auto;
    width: 80%;
    overflow: hidden;
    line-height: 0;
		z-index: 10;
}

.custom-shape-divider-top-1631532852 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.custom-shape-divider-top-1631532852 .shape-fill {
    fill: #ce5951;
}

.divider {
  position: relative;
}

.black {
  background: #f1f3f4;
	padding-bottom: 70px;
}
.white {
  margin-top: 3rem;
}


/* 滑らかで一定リズムのバウンスアニメーション */
@keyframes smoothBounce {
    0%, 100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(20px);
    }
    50% {
        transform: translateY(10px);
    }
    75% {
        transform: translateY(20px);
    }
}

/* SVG要素にアニメーションを適用 */
.custom-shape-divider-top-1631532852 {
    animation: smoothBounce 3s linear infinite;
}

/* 下方向にスライドするアニメーション */
.slide-in-trigger {
  opacity: 0;
  transform: translateY(-100px); /* 初期位置を上に100px移動 */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻る */
}

/* ------------------------------------------------------------------------------------
 設問title
------------------------------------------------------------------------------------ */
.ttl {
    font-size: 1.7rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px;
    position: relative;
    letter-spacing: .05em;
    padding: 4rem 0 1em;
    line-height: 1.4;
    opacity: 0; /* 初期状態で非表示 */
    transition: opacity 1s ease-in-out; /* アニメーションの追加 */
}

.ttl::before {
    content: attr(data-eng);
    position: absolute;
    top: -25px; /* 調整可能 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 6rem;
    font-family: 'Jost';
    font-weight: 300;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.5em;
    opacity: 0; /* 初期状態で非表示 */
    transition: letter-spacing 1s ease-in-out, opacity 1s ease-in-out; /* アニメーションの追加 */
}

.ttl.show {
    opacity: 1; /* 表示 */
}

.ttl.show::before {
    letter-spacing: normal;
    opacity: 0.1;
}


/* アニメーション */
@keyframes reveal {
    from {
        letter-spacing: 0.5em;
        opacity: 0;
    }
    to {
        letter-spacing: normal;
        opacity: 0.5;
    }
}


/* スマホサイズのスタイル調整 */
@media screen and (max-width: 500px) {
    .ttl {
        font-size: 1.2rem; /* フォントサイズを小さく */
        padding: 2rem 0 1em; /* パディングを調整 */
    }

    .ttl::before {
        font-size: 6rem; /* フォントサイズを小さく */
        top: -15px; /* 位置調整 */
        letter-spacing: normal; /* スペースを通常に */
        word-wrap: break-word; /* 文字が長すぎた場合に改行 */
    }
}

/* ------------------------------------------------------------------------------------
 フッター
------------------------------------------------------------------------------------ */
footer {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  background: #111;
  height: auto;
  width: 100vw;
	max-width: 500px;
  padding-top: 20px;
  color: #fff;
	margin: 0 auto;
	z-index: 9999;
}
footer a {
    text-decoration: underline;
		color: #77b2f6;
    font-size: 14px;
}
.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
	position: relative;
	margin-bottom: 20px;
}

.footer-content h3 {
  font-size: 2.1rem;
  font-weight: 500;
  text-transform: capitalize;
  line-height: 3rem;
}

.footer-content p {
  max-width: 500px;
  margin: 10px auto;
  line-height: 28px;
  font-size: 14px;
  color: #cacdd2;
}

.footer-bottom {
  background-color: #000;
  padding: 20px 0;
  position: relative;
	font-size: 12px;

}
.footer-bottom p {
  color: #fff;
  font-size: 16px;
  text-align: center;
}
.footer-bottom small {
  color: #fff;
  display: block;
  text-align: center;
}


.txt-box {
    margin: 0 auto;
    padding: 1em 0em 1em;
}


/* ------------------------------------------------------------------------------------
 予約ボタン
------------------------------------------------------------------------------------ */

.cta_button {
    animation: dokidoki 0.7s ease 0.8s infinite alternate;
    width: 90%;
    left: 0;
    right: 0;
    margin: 0 auto;
    mix-blend-mode: inherit;
    top: 77.5%;
}

@keyframes dokidoki {
	from {
		transform: scale(0.9);
	}

	to {
		transform: scale(1.0);
	}
}


/* ------------------------------------------------------------------------------------
 カウントダウン
------------------------------------------------------------------------------------ */

.countdown {
    /*text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
		top:35%;
		width: 100%;
		text-align: right;
}

.countdown h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

#countdown-timer {
    display: flex;
    justify-content: center;
}

.time {
    display: flex;
    align-items: baseline;
    margin: 0 10px;
    text-align: center;
}

.time span {
    font-size: 1.5rem;
    font-weight: bold;
    color: #c20101;
}

.label {
    font-size: 1rem;
    color: #666;
    margin-left: 5px;
}

/* スマホサイズの文字サイズ */
@media only screen and (max-width: 768px) {
    .time span {
        font-size: 1.5rem; /* スマホサイズでも同じ文字サイズを適用 */
    }
    .label {
        font-size: 1rem; /* スマホサイズでも同じ文字サイズを適用 */
    }
}

/* PCサイズの文字サイズ */
@media only screen and (min-width: 769px) {
    .time span {
        font-size: 2.5rem; /* PCサイズでも同じ文字サイズを適用 */
    }
    .label {
        font-size: 2rem; /* PCサイズでも同じ文字サイズを適用 */
    }
}




/* ------------------------------------------------------------------------------------
 プレースホルダーを表示
------------------------------------------------------------------------------------ */
.lazy-load {
    background: url('../assets/img/qa_04.webp') center center no-repeat;
    background-size: cover;
}



.star-animation {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  top: 0;
  left: 0;
}

.star-animation .star {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: fall 2s ease-out forwards;
}

@keyframes fall {
  0% {
    transform: translateY(-100%);
    opacity: 1;
  }
  100% {
    transform: translateY(500%);
    opacity: 0;
  }
}

/* ------------------------------------------------------------------------------------
 クリニック開閉案内
------------------------------------------------------------------------------------ */
.clinic {
  width: 100%;
  margin: 0 auto;
}

#clinic h2 {
    font-size: 1.5em;
		text-align: center;
    font-weight: bold;
		padding-top: 38px;
}

.clinic h3 {
  position: relative;
  margin: 0 auto;
  font-size: 1.2em;
  text-align: left;
  color: white;
  background: #333;
  padding: 1.5em 3rem;
  border-bottom: 1px solid white; /* 白色の下線を追加 */
}

.clinic h3 .access-info {
	display: block;
  font-size: 0.63em;
  color: #fff;
  font-weight: lighter;
	line-height: 1.93
}

.clinic > h3.active::after {
  content: "";
  background: url(../img/minus-solid.svg) center / contain no-repeat !important;
  position: absolute;
  width: 1em;
  height: 50%;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.clinic > h3::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  display: flex;
  background: url(../img/plus-solid.svg) center / contain no-repeat;
  width: 1em;
  height: 50%;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.clinic-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
}

.clinic-a.open {
  max-height: 1000px; /* 大きな値に設定してコンテンツを表示 */
  margin: 1rem 0;
}

.map {
    width: 100%;
    box-sizing: border-box; /* パディングやボーダーを含めた幅の計算 */
}
.map iframe {
    width: 100%;
    border: 0;
}

@media screen and (max-width: 500px) {
  .clinic {
      width: 100%; /* 画面の幅全体にする */
      margin-left: calc(-50vw + 50%); /* 中央揃えのための調整 */
  }

  .clinic h3 {
      width: 100%;
      padding: 1.0em 1rem; /* 左右の余白を減らす */
      box-sizing: border-box; /* パディングを含めた幅の計算 */
  }

  .clinic-a.open {
    position: relative;
    margin: 10px auto;
    width: 95%;
}

}

.clinic-access-info {
  padding: 0 2rem 1rem 2rem; /* 位置調整 */
  font-size: 0.9em; /* 小さめのフォントサイズ */
  background-color: #f9f9f9; /* 背景色の設定（任意） */
  border-bottom: 1px solid #ccc; /* 区切り線の設定 */
}

@media screen and (max-width: 500px) {
  .clinic-access-info {
    padding: 0 1rem 1rem 1rem; /* スマホ画面用のパディング調整 */
  }
}


.clinic_info.box_container { padding-bottom: 120px; }
.single_clinic h2 { font-size: 32px; margin: 0 auto 50px; border-bottom: 3px solid #4f9c00; padding-bottom: .1em; display: inline-block; }
.single_clinic h2 .small_text { font-size: 26px; }
.clinic_info { padding-left: 30px; padding-right: 30px; box-sizing: border-box; }
.clinic_info_data { margin: 0 auto; border-collapse: separate; border-spacing: 0; background: #fff; }
.clinic_info_data th, .clinic_info_data td { display: block; width: 100%; box-sizing: border-box; text-align: left; }
.clinic_info_data th { color: #fff; font-size: 18px; font-weight: 500; background: #35353C; padding: 14px 0 14px 32px; border: none; }
.clinic_info_data td { font-size: 16px; font-weight: 500; background: #F4F2F0; text-align: left; line-height: 1.8; letter-spacing: 0.03em; padding: 40px 32px; border: none; }
a.gmap { height: 52px; background: #E8867F; color: #fff; font-size: 16px; font-weight: 400; line-height: 48px; text-align: center; margin-top: .5em; display: block; box-sizing: border-box; }
a.gmap i { display: inline-block; margin-right: .3em; }


/* ------------------------------------------------------------------------------------
 FAQ
------------------------------------------------------------------------------------ */

.container {
	background-color: white;
	color: black;
	border-radius: 0px;
	margin: 0px 0;
	margin-right: 0px;
	margin-left: 00px;
	border-bottom: 1px solid #E7ECEF
}

.question {
	padding: 1em 50px 1em 20px;
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	background: #35353C;
	color: #fff;
	font-size:  calc(1.125rem + ((1vw - 7.5px) * 0.5128));
	min-height: 3rem;
}
p.q{
	font-weight: 500;
  color: :
}

.question::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  display: flex;
  background: url(../img/plus-solid.svg) center / contain no-repeat;
  width: 1em;
  height: 50%;
  right: 1rem;
  top: 50%;
  font-size: 1.2rem;
  transform: translateY(-50%);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.question.active::after {
  content: "";
  background: url(../img/minus-solid.svg) center / contain no-repeat !important;
  position: absolute;
  width: 1em;
  height: 50%;
  right: 1rem;
  top: 50%;
  font-size: 1.2rem;
  transform: translateY(-50%);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.answercont {
	max-height: 0;
	overflow: hidden;
	transition: 0.3s;
}

.answer {
	padding: 20px 20px 20px 20px;
  font-size: calc(1.125rem + ((1vw - 7.5px) * 0.5128));
  line-height: 1.7;
	background: #f4f4f5;
}

.question.active + .answercont {
}

@media screen and (max-width:750px){
	.container {
	margin-left: 0%;
	margin-right: 0%;
}
}





/* ------------------------------------------------------------------------------------
 追従ロゴとCTA
------------------------------------------------------------------------------------ */
.fixed {
  position: fixed;
  z-index: 999;
  -webkit-transition: 0.5s all;
  transition: 0.5s all;
  display: none;
}



.c-button {
    position: sticky;
    padding: 12px 8px 12px calc(8px + 0.1em);
    overflow: hidden;
    border-radius: 0px;
    background:linear-gradient(to right, #cb356b, #bd3f32); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    box-shadow: #00000059 0 5px 15px;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .1em;
    text-align: center;
    transition: .2s;
		display: none;
}

.link_btn a:after {
    font-size: 1rem;
    content: "";
    position: absolute;
    border-radius: 50%;
    display: flex;
    background: url(../img/chevron-right-solid.svg) center / contain no-repeat;
    width: 1em;
    height: 50%;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.shine{
  position: relative;
  overflow: hidden;
}

.shine::before{
  content: "";
  animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
  background-color: #ffffff3b;
  width: 140%;
  height: 100%;
  transform: skewX(-45deg);
  top: 0;
  left: -160%;
  opacity: 0.5;
  position: absolute;
}

@keyframes shine{
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.5;
  }
  71% {
    left: -160%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}

.fix-cta {
  display: none;
  z-index: 10;
  right: 0;
  bottom: 6px;
  left: 0;
  width: 96%;
	max-width: 500px;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center
}

.fix-cta-text, .fix-cta-text02 {
  display: block;
  padding-left: .1em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em
}

.fix-cta-text {
  font-size: 12px
}

.fix-cta-text02 {
  margin-top: 12px;
  font-size: 20px
}




/* ------------------------------------------------------------------------------------
 画像CTA
------------------------------------------------------------------------------------ */

.fix-image-cta {
  display: none;
  position: fixed;
  bottom: 0px;
  z-index: 1000;
  margin: 0 auto;
}

.fix-image-cta img {
  height: auto;
  display: block;
  opacity: 1;
  width: 100%;
  max-width: 500px;
}




/* ------------------------------------------------------------------------------------
 その他
------------------------------------------------------------------------------------ */
.main-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px; /* 親要素に対して中央寄せにするための幅調整 */
	line-height: 1.93;
}

.main-list > li {
  text-align: left;
  font-size: 0.9em;
  margin-bottom: 20px;
	padding: 0 10px;
}

.sub-list {
  list-style: none;
  padding: 0px; /* サブリストのインデントを追加 */
  margin-top: 10px;
}

.sub-list > li {
  text-align: left;
  font-size: 0.9em;
  /* margin-bottom: 10px; */
}


.link1 {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 13.3%;
    height: 100px;
    z-index: 10; /* 明示的に前面にする */
    pointer-events: auto;
}

.link2 {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 18.6%;
    height: 100px;
    z-index: 10; /* 明示的に前面にする */
    pointer-events: auto;
}


.relative {
    position: relative;
}


.blur-in {
    opacity: 0.01;
    filter: blur(10px);
    transition: opacity 0.1s ease-out, filter 0.1s ease-out;
}

.blur-in.visible {
    opacity: 1;
    filter: blur(0);
}

@keyframes bright {
	0% {
		filter: brightness(1.2);
	}
	100% {
		filter: brightness(1.0);
	}
}
.bright {
	animation-name: bright;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

.content-wrapper{
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.2), 10px 0 10px rgba(0, 0, 0, 0.2);
}

body {
  background: linear-gradient(135deg, #fefefe 0%, #e9f4ff 50%, #fefefe 100%);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

@keyframes bounce {
  0% {
    transform: scale(0.96);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.96);
  }
}

.bounce {
  animation: bounce 2s ease-in-out infinite;
}


@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0px);
  }
}

.float {
  animation: float 3s ease-in-out infinite;
}

.cta_button_01 {
    bottom: 9.20%;
    width: 100%;
    right: 0%;
    mix-blend-mode: inherit;
}

.cta_button_02 {
    bottom: 6.45%;
    width: 100%;
    right: 0%;
    mix-blend-mode: inherit;
}

picture img {
  pointer-events: none;
}

a img {
    border: none;
    vertical-align: middle;
    width: 100%;
}

.fix-image-cta {
  display: none;       /* 初期状態は非表示 */
  position: fixed;
  bottom: 0;
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* ← 影の設定 */ */
  /* border-radius: 8px; /* 角丸が必要な場合 */ */
  z-index: 9999;
}


.img-overlay-1 {
  position: absolute;
  top: 88.6%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90.0%;
  /* pointer-events: none; */
  z-index: 10; /* ← 前面に出す */
}

.img-overlay-1 img {
  width: 100%;  /* 親の幅に合わせる */
  height: auto;
}

/* ------------------------------------------------------------------------------------
 スライダー
------------------------------------------------------------------------------------ */

/* ドットデザイン */
.slick-dots {
  bottom: 10px;
  z-index: 10;
}
.slick-dots li button:before {
  font-size: 12px;
  color: #fff;
}
.slick-dots li.slick-active button:before {
  color: #f0448a;
}

/* Slick標準の矢印アイコンを消す */
.slick-prev:before,
.slick-next:before {
  content: none !important;
}

/* カスタム矢印 */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-top: 3px solid #333; /* 黒 */
  border-left: 3px solid #333; /* 黒 */
  cursor: pointer;
  z-index: 10; /* 背景より前に表示 */
}

.prev-arrow {
  left: 15px;
  transform: translateY(-50%) rotate(-45deg);
}

.next-arrow {
  right: 15px;
  transform: translateY(-50%) rotate(135deg);
}