@charset "UTF-8";
@media screen and (min-width: 768px) {
.p-price .List__item li {
max-width: 312px !important;
width: 50% !important;
min-width: auto !important;
flex: none !important;
}
}
@media screen and (max-width: 768px) {
/* .p-price .List__item li {
width: 100% !important;
} */
}
.p-price .price-table th.is-style1 {
padding: 10px !important;
font-size: 2.3rem !important;
}
.p-price .price-table th.is-style2 {
padding: 12px !important;
font-size: 1.6rem !important;
}
.p-price .price-table td {
font-size: 1.6rem !important;
background-color: #fff;
}
.p-price .price-table td {
padding: 14px !important;
}
.c-toc1 {
width: 50%;
border: none;
padding: 15px 25px;
margin-bottom: 80px;
background-color: transparent;
}
@media screen and (max-width: 768px) {
.c-toc1 {
width: 100%;
margin-bottom: 50px;
}
}
.c-toc1__title {
display: block;
font-size: 2.2rem;
font-weight: bold;
margin-bottom: 20px;
}
.c-toc1__item {
list-style-type: auto;
list-style-position: inside;
margin-bottom: 8px;
}
@media screen and (max-width: 768px) {
/* .p-price .List__item li {
width: 100% !important;
} */
.p-price .List__item li summary {
height: 60px;
font-size: 1.8rem;
}
}
/* Chrome、Safari */
summary::-webkit-details-marker {
display: none;
}
.dialog-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.dialog {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #efefef;
padding: 40px;
border-radius: 8px;
max-width: 90%;
min-width: 40%;
max-height: 90vh;
overflow-y: auto;
z-index: 1001;
}
@media screen and (min-width: 961px) {
.p-price .List__item02 {
margin: 0 auto 0px;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
width: 100%;
}
}
@media screen and (max-width: 768px) {
.dialog {
min-width: 90%;
}
}
.dialog h3 {
text-align: center;
color:#41b25d!important;
font-size:150%;
}
.dialog h4 {
background-color: #fff;
border: 1px solid #000;
padding:2%;
text-align: center;
font-size:120%;
}
.dialog-close {
color: #000;
position: absolute;
right: 10px;
top: 10px;
background: none;
border: none;
font-size: 100%;
cursor: pointer;
}
.price-button {
border-radius: 40px;
font-size: 2rem;
font-weight: 500;
justify-content: center;
display: block;
width: 100%;
height: 80px;
display: flex;
align-items: center;
position: relative;
margin-bottom: 20px;
cursor: pointer;
padding: 0 25px;
}
.price-button:hover {
transition: opacity 0.2s;
opacity: 0.7;
}
.price-button::after {
color: #41b25d;
content: "\f105";
font-family: "FontAwesome";
font-weight: 900;
position: absolute;
margin: auto;
display: flex;
align-items: center;
right: 15px;
transform: rotate(0deg);
}
.pc-tablet {
display: block;
}
.sp-only {
display: none;
}
@media screen and (max-width: 768px) {
.pc-tablet {
display: none;
}
.sp-only {
display: block;
}
}
.b02{
background-color:#FF9D03;
color:#fff!important;
border:none!important;
}
.b02::after{
color:#fff!important;
}
#other_a{
background:none!important;
color:#000!important;
width:auto!important;
font-size: 100%!important;
text-align: right!important;
border:none!important;
display: block!important;
height: 0px;!important;
}
#other_a::after{
color: #41B25D;
content: ""!important;
font-family: "FontAwesome";
font-weight: 900;
position: absolute;
margin: auto;
display: flex;
align-items: center;
right: 0px;
transform: rotate(90deg);
}
.accordion-008 {
margin-bottom: 10px;
border-radius: 5px;
text-align: center;
}
.accordion-008 summary {
display: flex;
align-items: center;
position: relative;
padding: 0;
font-weight: 600;
cursor: pointer;
}
.accordion-008 summary::-webkit-details-marker {
display: none;
}
.accordion-008 summary::after {
font-size: 1.2em; /* 必要に応じて調整 */
font-weight: bold; /* 太字にしたい場合 */
margin-left: 10px;
content: '＋';
transition: transform .3s;
}
.accordion-008[open] summary::after {
transform: rotate(225deg);
}
.accordion-008 div {
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: 0;
color: #333333;
transition: transform .5s, opacity .5s;
}
.accordion-008[open] div {
transform: none;
opacity: 1;
}
.accordion-close-btn {
margin: 20px auto 10px auto;
padding: 8px 24px;
background: #41b25d;
color: #fff;
border: none;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
display: block;
}
.accordion-close-btn:hover {
background: #36994c;
}
/* 目次を左右2カラムに並べるCSS */
.c-toc1 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
padding: 15px 0px;
width: 100%;
}
.c-toc1__title {
width: 100%;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 0.5em;
}
.c-toc1__items {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr; /* 左右2カラム */
gap: 0.6em 1.5em; /* 行間・列間の調整 */
}
/* 各項目のリンク装飾 */
.c-toc1__link {
text-decoration: none;
color: #333;
transition: color 0.2s ease;
}
.c-toc1__link:hover {
color: #0078c9; /* ホバー時の色 */
}
/* スマホなど幅が狭い場合は1カラム表示に */
@media (max-width: 768px) {
.c-toc1__items {
grid-template-columns: 1fr; /* 1カラムへ切り替え */
}
}
/* 各の前に▼マークを付ける */
.c-toc1__item::before {
content: "▼"; /* マーク */
color: #03C755; /* 色を指定 */
margin-right: 0.4em; /* テキストとの間隔 */
font-size: 0.9em; /* サイズ調整 */
vertical-align: middle; /* 中央揃え */
}
/* 全体の調整 */
.c-toc1__item {
display: flex;
align-items: center;
border: 1px solid #ccc;
padding: 4%;
}
/*===============================
医療脱毛（女性）料金テーブル
メインカラー：#03C755
===============================*/
.price-list {
width: 100%;
border-collapse: collapse;
margin-top: 9%;
text-align: center;
font-family: "Noto Sans JP", sans-serif;
}
/* 共通セル設定 */
.price-list th,
.price-list td {
border: 1px solid #ddd;
padding: 0.8em;
}
/* テーブルタイトル（見出し） */
.price-list .table-title {
background-color: #03C755; /* メインカラー */
color: #fff;
font-weight: bold;
font-size: 1.2em;
letter-spacing: 0.05em;
padding: 1em;
}
/* 見出しセル */
.price-list th {
background-color: #f2fff7; /* メインカラーに調和する淡い背景 */
color: #333;
font-weight: 600;
}
/* 偶数行に淡い背景 */
.price-list tr:nth-child(even) {
background-color: #f9f9f9;
}
/* ホバー時の行強調 */
.price-list tr:hover {
background-color: #dcffea; /* メインカラー由来の淡いグリーン */
transition: background-color 0.3s ease;
}
/* 枠線アクセント */
.price-list {
border-top: 3px solid #03C755;
}
/* リンクボタンなど別要素にも統一 */
.price-button {
background-color: #03C755;
color: #fff;
border: none;
padding: 0.6em 1.2em;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.price-button:hover {
background-color: #02a441; /* 濃いグリーンに変化 */
}
/* ダイアログの閉じるボタンなど調整用 */
.dialog-close {
background: none;
border: 1px solid #03C755;
color: #03C755;
padding: 0.4em 0.8em;
border-radius: 3px;
cursor: pointer;
}
.dialog-close:hover {
background-color: #03C755;
color: #fff;
}
.price-list td:first-child {
text-align: left;
padding-left: 1em; /* 左側に少し余白をつけて見やすく */
width:50%;
}
.c-lower p {
font-size: 2.5rem;
line-height: 1.8;
margin-bottom: 22px;
text-align: center;
}
.page-id-233 table[id]::before{
content:"";
display:block;
height:150px;
margin-top:-150px;
visibility:hidden;
}
@media (max-width:768px){
.page-id-233 table[id]::before{
height:90px;
margin-top:-90px;
}
}
.anchor-point{
display: block;
position: relative;
top: -150px;
visibility: hidden;
height: 0;
pointer-events: none;
}
@media (max-width: 768px){
.anchor-point{
top: -90px;
}
}