で囲む(フッター・アクセスで使い回し) ------------------------------*/
.schedule table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #8bc8ba;
border-radius: 10px;
}
.schedule th,
.schedule td {
padding: 17px 19px;
text-align: center;
border-right: 1px solid #8bc8ba;
border-bottom: 1px solid #8bc8ba;
}
.schedule tr > :last-child { border-right: 0; }
.schedule tbody tr:last-child > * { border-bottom: 0; }
.schedule thead th:first-of-type {
color: var(--color-green-text);
}
.schedule tbody th {
font-size: 18px;
font-family: var(--font-en);
}
.schedule td {
color: var(--color-green);
}
/* 注釈 */
.schedule ul {
margin-top: 25px;
line-height: 1.8;
}
.schedule li {
margin-bottom: 6px;
}
/* 記号の色 */
.mark_tel { color: var(--color-orange); }
.mark_close { color: #999; }
.mark_sat { color: #eb1b1b; }
.mark_sun { color: #37a5c9; }
@media screen and (max-width:640px) {
.schedule th,
.schedule td {
padding: 8px 8px;
font-size: 14px;
}
.schedule tbody th {
font-size: 15px;
white-space: nowrap;
}
.schedule ul {
margin-top: 15px;
line-height: 1.7;
}
.schedule li {
font-size: 14px;
margin-bottom: 4px;
}
}
/*==================================================================
text
==================================================================*/
.text {
position:relative;
margin-bottom:50px;
}
.text p {
margin-bottom:1em;
}
.text:last-child{
margin-bottom:0;
}
/*------------------------------ 下層は文章の下を少し詰める ------------------------------*/
main .text {
margin-bottom: 40px;
}
main .text:last-child {
margin-bottom: 0;
}
@media screen and (max-width:640px) {
main .text {
margin-bottom: 30px;
}
}
/*------------------------------ .text の中のリンク ------------------------------*/
main .text a:not(.btn) {
text-decoration: underline;
text-underline-offset: 4px;
}
main .text a:not(.btn):hover {
text-decoration: none;
}
/*------------------------------ .text の中のリスト ------------------------------*/
.text ul {
margin-bottom: 1em;
}
.text ul:last-child {
margin-bottom: 0;
}
.text li {
position: relative;
padding-left: 20px;
}
.text li::before {
position: absolute;
content: "";
top: 1em;
left: 4px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-green);
transform: translateY(-50%);
}
/*==================================================================
btn
==================================================================*/
.btn {
display: block;
width: fit-content;
padding: 15px 60px;
border-radius: 50px;
background: linear-gradient(to right, #51b39c, #49c5c9);
color: #fff;
}
.btn:hover {
color: #fff;
transform: translateY(-4px);
box-shadow: 0 5px 10px rgba(81,179,156,.3);
}
/*------------------------------ ボタンを並べるとき ＊
で囲む ------------------------------*/
.btn_wrap {
display: flex;
flex-wrap: wrap;
gap: 15px 20px;
margin-top: 35px;
}
.btn_wrap .btn {
margin: 0;
}
@media screen and (max-width:640px) {
.btn_wrap {
flex-direction: column;
gap: 10px 0;
margin-top: 25px;
}
.btn_wrap .btn {
width: 100%;
padding: 15px 20px;
text-align: center;
}
}
/*==================================================================
もくじ
==================================================================*/
#toc {
width: 90%;
max-width: 1300px;
margin: 22px auto 0;
padding: 20px 40px 35px;
border-radius: 10px;
background: #f4faf8;
}
#toc ul {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0 24px;
}
#toc a {
position: relative;
display: block;
padding: 15px 24px 13px 0;
border-bottom: 1px dashed var(--color-green-light);
color: #222;
font-size: 15px;
line-height: 1.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#toc a:hover {
color: var(--color-green-text);
}
/* 下向きの矢印 */
#toc a::after {
position: absolute;
content: "";
top: 50%;
right: 6px;
width: 9px; height: 19px;
background: url("images/icon05.svg") no-repeat center / contain;
transform: translateY(-50%) rotate(90deg);
transition: 0.3s ease-out;
}
#toc a:hover::after {
transform: translateY(-20%) rotate(90deg);
}
@media screen and (max-width:640px) {
#toc {
width: calc(100% - 20px);
margin-top: 13px;
padding: 10px 20px 20px;
}
#toc ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 15px;
}
#toc a {
display: block;
height: auto;
padding: 14px 0;
font-size: 13px;
line-height: 1.5;
letter-spacing: 0;
}
#toc a::after { display: none;}
}
/*==================================================================
$price ＊ 料金表
==================================================================*/
/*------------------------------ 内容の列は左揃え ------------------------------*/
#price_before td:last-child,
#price_after td:last-child,
#price_device td:nth-of-type(1) {
text-align: left;
}
/* 装置料：rowspanの「永久歯列期」が最終行まで伸びるので下線を消す */
#price_device tbody tr:nth-last-child(2) th {
border-bottom: 0;
}
/*==================================================================
$doctor ＊ 医師紹介
==================================================================*/
/*------------------------------ 名前のふりがな ------------------------------*/
#doctor_director h2 span,
#doctor_vice h2 span {
margin-left: 12px;
font-size: 16px;
letter-spacing: 1px;
color: #666;
}
@media screen and (max-width:640px) {
#doctor_director h2 span,
#doctor_vice h2 span {
display: block;
margin-left: 0;
font-size: 13px;
}
}
#doctor_director .section01 .text {
margin-bottom: 0;
padding-bottom: 0;
}
/*------------------------------ 経歴・資格（左右2つの箱） ------------------------------*/
.doctor_box {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 90px;
margin-top: 60px;
}
.doctor_box > div {
padding: 0 0 5px;
}
/* 英字ラベルとh3の間を詰める */
.doctor_box .ttl_dot {
line-height: 1.5;
}
.doctor_box > div h3 {
color: #222 !important;
margin-bottom: 25px !important;
}
.doctor_box dl {
display: grid;
grid-template-columns: auto 1fr;
}
.doctor_box dl,
.doctor_box ul {
border-top: 1px dashed var(--color-green-light);
}
.doctor_box dt,
.doctor_box dd,
.doctor_box li {
padding: 14px 0;
border-bottom: 1px dashed var(--color-green-light);
line-height: 1.7;
}
/* 年 */
.doctor_box dt {
font-family: var(--font-en);
font-weight: 500;
color: var(--color-green-text);
white-space: nowrap;
}
.doctor_box dd {
padding-left: 25px; /* 年との間（gapだと点線が途切れるのでpaddingで） */
}
/* 学会：緑の丸 */
.doctor_box li {
position: relative;
padding-left: 20px;
}
.doctor_box li::before {
position: absolute;
content: "";
top: calc(12px + 0.85em);
left: 4px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-green);
transform: translateY(-50%);
}
@media screen and (max-width:640px) {
.doctor_box {
grid-template-columns: 1fr;
gap: 35px 0; /* 15px → 35px */
margin-top: 40px; /* 追加 */
}
.doctor_box > div {
}
.doctor_box dt,
.doctor_box dd,
.doctor_box li {
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
}
.doctor_box dd {
padding-left: 15px;
}
.doctor_box li::before {
top: calc(10px + 0.85em);
}
}
/* 2つの箱の間の線 */
.doctor_box::before {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background: #eee;
}
@media screen and (max-width:640px) {
.doctor_box::before {
display: none;
}
}
/*==================================================================
$access ＊ アクセス・診療時間
==================================================================*/
/*------------------------------ 医院情報：左に表・右に地図 ------------------------------*/
#access_info .section01 {
align-items: stretch; /* 地図の高さを表にそろえる */
}
#access_info .table_wrap {
flex: 1;
margin-bottom: 0;
}
/* 表：枠と背景をなくして、点線で区切るだけのシンプルな形に */
#access_info table {
border: 0;
border-top: 2px solid var(--color-green);
border-radius: 0;
}
#access_info th,
#access_info td {
padding: 20px 0;
border-right: 0;
border-bottom: 1px solid #ddd;
text-align: left;
}
#access_info tbody th {
width: 130px;
background: none;
color: var(--color-green-text);
font-weight: 500;
}
#access_info td {
padding-left: 10px;
}
#access_info iframe {
display: block;
width: 100%;
height: 100%;
min-height: 340px;
border: 0;
}
@media screen and (max-width:640px) {
#access_info table {
min-width: 0; /* 2列なので横スクロールなしで収める */
}
#access_info th,
#access_info td {
padding: 14px 0;
}
#access_info tbody th {
width: 80px;
}
#access_info td {
padding-left: 5px;
}
#access_info iframe {
height: 260px;
min-height: 0;
}
}
/*------------------------------ バス・車：もくじから飛んだときの位置 ------------------------------*/
#access_bus,
#access_car {
scroll-margin-top: 130px;
}
/*------------------------------ 写真で見る道順：ルート2つ・4列 ------------------------------*/
#access_route ol {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 35px 20px;
counter-reset: route;
}
#access_route li {
counter-increment: route;
}
/* ルート①とルート②の間 */
#access_route2 {
margin-top: 70px;
padding-top: 60px;
border-top: 1px solid #eee;
}
/* ルートの見出し */
#access_route h3 {
margin: 0 0 25px !important;
}
/* 写真 */
#access_route figure {
position: relative;
margin-bottom: 12px;
border-radius: 10px;
overflow: hidden;
}
/* 01〜の番号 */
#access_route figure::before {
position: absolute;
content: counter(route, decimal-leading-zero);
top: 10px;
left: 10px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 44px; height: 44px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--color-orange);
color: #fff;
font-family: var(--font-en);
font-size: 14px;
font-weight: 600;
line-height: 1;
}
#access_route img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}
#access_route li p {
font-size: 15px;
line-height: 1.7;
}
@media screen and (max-width:640px) {
#access_route ol {
grid-template-columns: 1fr 1fr;
gap: 20px 12px;
}
#access_route2 {
margin-top: 45px;
padding-top: 40px;
}
#access_route h3 {
margin-bottom: 18px !important;
}
#access_route figure::before {
top: 6px;
left: 6px;
width: 30px; height: 30px;
font-size: 12px;
}
#access_route li p {
font-size: 13px;
}
}
/*------------------------------ 診療時間：記号ではなく文字で ------------------------------*/
/* 列の幅を固定して、文字数で幅が変わらないようにする */
#access_hours table {
table-layout: fixed;
}
#access_hours thead th:first-child {
width: 30%; /* 時間の列。残りを曜日7つで均等に分ける */
}
#access_hours td {
font-size: 15px;
}
#access_hours li span {
font-weight: 500;
}
#access_hours .schedule p {
margin-top: 10px;
font-size: 14px;
color: #666;
}
@media screen and (max-width:640px) {
#access_hours thead th:first-child {
width: 26%;
}
#access_hours th,
#access_hours td {
padding: 10px 2px;
font-size: 12px;
line-height: 1.4;
letter-spacing: 0;
}
#access_hours tbody th {
white-space: normal; /* 「10:30 ~」「13:00」で折り返してOKにする */
}
#access_hours .schedule p {
font-size: 13px;
}
}
/*------------------------------ ご予約・お問い合わせ ------------------------------*/
#access_reserve .link_list {
margin-top: 50px;
}
@media screen and (max-width:640px) {
#access_reserve .link_list {
margin-top: 30px;
}
}
/*==================================================================
$first ＊ 初めての方へ
==================================================================*/
/*------------------------------ 相談内容・リスクのリスト：薄い緑の箱に ------------------------------*/
#first_consult .text ul,
#first_risk .text ul {
margin: 25px 0;
padding: 28px 35px;
border-radius: 10px;
background: #f4faf8;
line-height: 1.8;
}
#first_consult .text li + li,
#first_risk .text li + li {
margin-top: 10px;
}
#first_consult .text li::before,
#first_risk .text li::before {
top: 0.9em;
}
#first_consult .link_list,
#first_risk .link_list {
margin-top: 50px;
}
@media screen and (max-width:640px) {
#first_consult .text ul,
#first_risk .text ul {
margin: 20px 0;
padding: 20px;
}
#first_consult .text li + li,
#first_risk .text li + li {
margin-top: 8px;
}
#first_consult .link_list,
#first_risk .link_list {
margin-top: 30px;
}
}
/*------------------------------ 治療の流れ：2〜3ステップごとに写真 ------------------------------*/
#first_flow .section01 > figure,
#insurance_flow .section01 > figure,
#adult_flow .section01 > figure,
#child_flow .section01 > figure {
width: 420px;
}
/* グループの間も線がつながるように */
#first_flow .section01:not(:last-child) .flow li:last-child,
#insurance_flow .section01:not(:last-child) .flow li:last-child,
#adult_flow .section01:not(:last-child) .flow li:last-child,
#child_flow .section01:not(:last-child) .flow li:last-child {
padding-bottom: 40px;
}
#first_flow .section01:not(:last-child) .flow li:last-child::after,
#insurance_flow .section01:not(:last-child) .flow li:last-child::after,
#adult_flow .section01:not(:last-child) .flow li:last-child::after,
#child_flow .section01:not(:last-child) .flow li:last-child::after {
display: block;
}
@media screen and (max-width:640px) {
/* SPは写真をステップの下に */
#first_flow .section01,
#insurance_flow .section01,
#adult_flow .section01,
#child_flow .section01 {
flex-direction: column;
gap: 20px 0;
}
#first_flow .section01 > figure,
#insurance_flow .section01 > figure,
#adult_flow .section01 > figure,
#child_flow .section01 > figure {
width: 100%;
}
#first_flow .section01:not(:last-child),
#insurance_flow .section01:not(:last-child),
#adult_flow .section01:not(:last-child),
#child_flow .section01:not(:last-child) {
margin-bottom: 35px;
}
#first_flow .section01:not(:last-child) .flow li:last-child,
#insurance_flow .section01:not(:last-child) .flow li:last-child,
#adult_flow .section01:not(:last-child) .flow li:last-child,
#child_flow .section01:not(:last-child) .flow li:last-child {
padding-bottom: 0;
}
#first_flow .section01:not(:last-child) .flow li:last-child::after,
#insurance_flow .section01:not(:last-child) .flow li:last-child::after,
#adult_flow .section01:not(:last-child) .flow li:last-child::after,
#child_flow .section01:not(:last-child) .flow li:last-child::after {
display: none;
}
}
/*==================================================================
$worries ＊ お悩みから探す
==================================================================*/
/*------------------------------ お悩みの一覧(ページ内リンク) ------------------------------*/
#worries_types > ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#worries_types > ul a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 30px 18px 46px;
border: 1px solid var(--color-green-light);
border-radius: 10px;
background: #fff;
color: #222;
text-align: center;
}
#worries_types > ul a:hover {
border-color: var(--color-green);
background: #f4faf8;
color: var(--color-green-text);
}
/* イラスト */
#worries_types > ul figure {
width: 60%;
margin-bottom: 14px;
}
/* 形が大きく違うイラストだけ、枠の中で小さく見せる(枠の大きさは変えない) */
#worries_types > ul li:nth-of-type(2) img,
#worries_types > ul li:nth-of-type(3) img,
#worries_types > ul li:last-child img {
transform: scale(0.9);
}
#worries_types > ul figure img {
width: 100%;
aspect-ratio: 3 / 2; /* イラストの比率が違っても、枠の高さをそろえる */
object-fit: contain;
}
#worries_types > ul .ttl_dot {
justify-content: center;
gap: 0 8px;
margin-bottom: 6px;
font-size: 13px;
color: #222;
}
/* ●Type 01● のように右にも丸を付ける */
#worries_types > ul .ttl_dot::after {
content: "";
margin-top: -2px;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-green);
}
#worries_types > ul .ttl_dot::before {
width: 6px; height: 6px;
}
#worries_types > ul p {
font-size: 15px;
font-weight: 500;
line-height: 1.6;
text-align: center;
}
#worries_types > ul p span {
display: block;
margin-top: 4px;
font-size: 13px;
font-weight: 400;
color: var(--color-green-text);
}
/* 下向きの矢印 */
#worries_types > ul a::after {
position: absolute;
content: "";
left: 50%;
bottom: 16px;
width: 8px; height: 14px;
background: url("images/icon05.svg") no-repeat center / contain;
transform: translateX(-50%) rotate(90deg);
transition: 0.3s ease-out;
}
#worries_types > ul a:hover::after {
transform: translate(-50%, 3px) rotate(90deg);
}
@media screen and (max-width:640px) {
#worries_types > ul {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
#worries_types > ul a {
padding: 20px 10px 36px;
}
#worries_types > ul figure {
margin-bottom: 10px;
}
#worries_types > ul .ttl_dot {
margin-bottom: 4px;
font-size: 11px;
}
#worries_types > ul p {
font-size: 13px;
letter-spacing: 0;
}
#worries_types > ul p span {
font-size: 12px;
}
#worries_types > ul a::after {
bottom: 12px;
}
}
/*------------------------------ 各タイプの説明：イラストを左に ------------------------------*/
#worries_types .section01 {
flex-direction: row-reverse;
align-items: stretch;
margin-top: 60px;
padding-top: 60px;
border-top: 1px solid #eee;
scroll-margin-top: 130px;
}
#worries_types .section01 > figure {
display: flex;
justify-content: center;
align-items: center;
width: 260px;
padding: 20px;
border-radius: 10px;
background: #f7f7f7;
}
/* イラストは元の比率のまま表示 */
#worries_types .section01 > figure img {
height: auto;
aspect-ratio: auto;
object-fit: fill;
}
/* 説明のほうも、形が大きく違うイラストだけ小さく */
#worries_protrusion figure img,
#worries_underbite figure img,
#worries_school figure img {
transform: scale(0.9);
}
#worries_types h3 span {
font-size: 16px;
color: #666;
}
@media screen and (max-width:640px) {
#worries_types .section01 {
flex-direction: column-reverse; /* SPはイラストが上 */
margin-top: 50px;
padding-top: 50px;
scroll-margin-top: 20px;
}
#worries_types h3 span {
display: block;
font-size: 14px;
}
#worries_types .section01 > figure {
align-self: center;
width: 100%;
}
#worries_types .section01 > figure img {
width: 60%;
}
}
/*------------------------------ 子どもと大人：写真付きで左右に ------------------------------*/
#worries_age .column2 figure {
margin-bottom: 25px;
border-radius: 10px;
overflow: hidden;
}
#worries_age .column2 img {
width: 100%;
aspect-ratio: 500 / 300;
object-fit: cover;
}
#worries_age .column2 h3 {
margin-top: 0;
}
@media screen and (max-width:640px) {
#worries_age .column2 figure {
margin-bottom: 18px;
}
}
/*------------------------------ 治療方法：料金表へのリンクは1つなので幅を半分に ------------------------------*/
#worries_treatment .link_list,
#insurance_compare .link_list,
#adult_price .link_list,
#child_price .link_list {
max-width: calc(50% - 10px);
}
@media screen and (max-width:640px) {
#worries_treatment .link_list,
#insurance_compare .link_list,
#adult_price .link_list,
#child_price .link_list {
max-width: none;
}
}
/*==================================================================
$insurance ＊ 保険適用の矯正
==================================================================*/
/*------------------------------ 保険診療となる3つの場合：3つの箱を横並び ------------------------------*/
#insurance_case ol {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
#insurance_case li {
padding: 40px 35px;
border-radius: 10px;
background: #f4faf8;
}
#insurance_case li .ttl_dot {
}
#insurance_case h3 {
margin-bottom: 20px !important;
font-size: 23px !important;
color: #222 !important;
}
#insurance_case li p:not(.ttl_dot) {
margin-bottom: 1em;
line-height: 1.9;
}
#insurance_case li p:last-child {
margin-bottom: 0;
}
@media screen and (max-width:640px) {
#insurance_case ol {
grid-template-columns: 1fr;
gap: 12px;
}
#insurance_case li {
padding: 25px 20px;
}
#insurance_case h3 {
margin-bottom: 12px !important;
font-size: 18px !important;
}
#insurance_case h3 br {
display: none;
}
}
/*------------------------------ 診療体制：写真付きのまとまりの間 ------------------------------*/
#insurance_system .section01 + .section01 {
margin-top: 60px;
}
/* 矯診・顎診のラベル */
#insurance_system dl {
margin: 25px 0;
border-top: 1px dashed var(--color-green-light);
}
#insurance_system dl > div {
display: flex;
align-items: flex-start;
gap: 0 20px;
padding: 16px 0;
border-bottom: 1px dashed var(--color-green-light);
}
#insurance_system dt {
flex-shrink: 0;
padding: 2px 18px;
border-radius: 50px;
background: var(--color-green);
color: #fff;
font-size: 14px;
font-weight: 500;
}
#insurance_system dd {
line-height: 1.8;
}
@media screen and (max-width:640px) {
#insurance_system .section01 + .section01 {
margin-top: 40px;
}
#insurance_system dl > div {
flex-direction: column;
gap: 6px 0;
padding: 12px 0;
}
#insurance_system dt {
font-size: 13px;
}
#insurance_system dd {
font-size: 14px;
}
}
/*------------------------------ 顎変形症の流れ：5つを横に矢印でつなぐ ------------------------------*/
#insurance_surgery ol {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 30px;
margin-bottom: 40px;
counter-reset: surgery;
}
#insurance_surgery li {
position: relative;
padding: 28px 22px;
border-radius: 10px;
background: #f4faf8;
text-align: center;
counter-increment: surgery;
}
/* STEP 01〜05 */
#insurance_surgery li::before {
content: "STEP " counter(surgery, decimal-leading-zero);
display: block;
margin-bottom: 6px;
font-family: var(--font-en);
font-size: 13px;
font-weight: 600;
color: var(--color-green-text);
}
/* 右向きの三角 */
#insurance_surgery li:not(:last-child)::after {
position: absolute;
content: "";
top: 50%;
right: -21px;
width: 12px; height: 16px;
background: var(--color-green-light);
clip-path: polygon(0 0, 100% 50%, 0 100%);
transform: translateY(-50%);
}
#insurance_surgery strong {
display: block;
margin-bottom: 10px;
font-size: 19px;
font-weight: 500;
line-height: 1.5;
}
#insurance_surgery li p {
font-size: 15px;
line-height: 1.7;
text-align: left;
}
@media screen and (max-width:640px) {
#insurance_surgery ol {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 30px;
}
#insurance_surgery li {
padding: 18px 20px;
}
#insurance_surgery li::before {
margin-bottom: 2px;
font-size: 12px;
}
/* SPは下向きの三角 */
#insurance_surgery li:not(:last-child)::after {
top: auto;
right: auto;
bottom: -20px;
left: 50%;
width: 16px; height: 12px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform: translateX(-50%);
}
#insurance_surgery strong {
margin-bottom: 6px;
font-size: 16px;
}
#insurance_surgery li p {
text-align: center;
}
}
/*------------------------------ 保険診療と自由診療の違い ------------------------------*/
#insurance_compare thead th:first-child {
width: 18%;
}
#insurance_compare td {
text-align: left;
}
#insurance_compare .table_wrap {
margin-bottom: 30px;
}
@media screen and (max-width:640px) {
#insurance_compare table {
min-width: 0; /* 横スクロールなしで収める */
}
#insurance_compare thead th:first-child {
width: 24%;
}
#insurance_compare th,
#insurance_compare td {
padding: 10px 8px;
font-size: 13px;
}
}
/*==================================================================
$adult ＊ 大人の矯正
==================================================================*/
/*------------------------------ 日常生活との両立：左に番号付きの行・右に写真2枚 ------------------------------*/
#adult_life .section01 {
align-items: stretch; /* 写真の高さをリストにそろえる */
}
#adult_life ol {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px 0;
counter-reset: point;
}
#adult_life li {
display: flex;
align-items: center;
gap: 0 25px;
padding: 18px 30px;
border-radius: 10px;
background: #f4faf8;
font-size: 17px;
font-weight: 500;
line-height: 1.7;
counter-increment: point;
}
/* Point 01〜05 の丸 */
#adult_life li::before {
content: "Point\A" counter(point, decimal-leading-zero);
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
width: 64px; height: 64px;
border-radius: 50%;
background: #fff;
color: var(--color-green-text);
font-family: var(--font-en);
font-size: 12px;
font-weight: 600;
line-height: 1.3;
text-align: center;
white-space: pre;
}
/* 写真2枚を縦に */
#adult_life .section01 > figure {
display: flex;
flex-direction: column;
gap: 12px 0;
width: 440px;
border-radius: 0;
}
#adult_life .section01 > figure img {
flex: 1 1 0;
height: 0; /* 写真の元の高さを使わず、リストの高さを2枚で分け合う */
min-height: 0;
aspect-ratio: auto;
border-radius: 10px;
}
@media screen and (max-width:640px) {
/* SPは写真2枚を横に並べて、リストの上に */
#adult_life .section01 {
gap: 15px 0;
}
#adult_life .section01 > figure {
flex-direction: row;
gap: 0 10px;
width: 100%;
}
#adult_life .section01 > figure img {
width: calc(50% - 5px);
height: auto;
aspect-ratio: 4 / 3;
}
#adult_life ol {
gap: 8px 0;
}
#adult_life li {
gap: 0 15px;
padding: 14px 16px;
font-size: 14px;
}
#adult_life li::before {
width: 50px; height: 50px;
font-size: 10px;
}
}
/*------------------------------ リスク：写真と上をそろえる（こどもの矯正でも使用） ------------------------------*/
#adult_risk .list_box,
#child_risk .list_box {
margin-top: 0;
}
/*------------------------------ 費用の目安：表を左右に（こどもの矯正でも使用） ------------------------------*/
#adult_price .column2,
#child_price .column2 {
margin-bottom: 30px;
}
#adult_price .column2 h3,
#child_price .column2 h3 {
margin-top: 0;
}
#adult_price th,
#child_price th {
width: 55%;
text-align: left;
}
#adult_price td,
#child_price td {
font-weight: 500;
}
#adult_price th span,
#child_price th span {
font-size: 13px;
font-weight: 400;
}
@media screen and (max-width:640px) {
#adult_price .column2,
#child_price .column2 {
gap: 25px 0;
margin-bottom: 20px;
}
#adult_price table,
#child_price table {
min-width: 0; /* 2列なので横スクロールなしで収める */
}
}
/*==================================================================
$child ＊ こどもの矯正
==================================================================*/
/*------------------------------ Ⅰ期治療とⅡ期治療：2つの箱を横並び ------------------------------*/
#child_stage ol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
#child_stage li {
padding: 40px 40px 45px;
border-radius: 10px;
background: #f4faf8;
}
#child_stage li .ttl_dot {
color: var(--color-green-text);
}
#child_stage h3 {
margin-bottom: 18px !important;
color: #222 !important;
}
#child_stage h3 span {
display: block;
margin-top: 2px;
font-size: 16px;
color: var(--color-green-text);
}
#child_stage li p:not(.ttl_dot) {
line-height: 1.9;
}
@media screen and (max-width:640px) {
#child_stage ol {
grid-template-columns: 1fr;
gap: 12px;
}
#child_stage li {
padding: 25px 20px;
}
#child_stage h3 {
margin-bottom: 12px !important;
}
#child_stage h3 span {
font-size: 14px;
}
}
/*==================================================================
$投稿一覧ページ ＊ 医療コラム・お知らせで使い回し
==================================================================*/
/*------------------------------ 記事の一覧：写真付きのカードを3列 ------------------------------*/
.post_list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 50px 30px;
}
.post_list a {
display: block;
color: #222;
}
.post_list figure {
border-radius: 10px;
overflow: hidden;
}
.post_list img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
transition: 0.5s ease-out;
}
.post_list a:hover img {
transform: scale(1.05);
}
.post_list a:hover p {
color: var(--color-green-text);
}
/* 日付とカテゴリー */
.post_list div,
#column_post header div {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 12px;
margin: 16px 0 8px;
}
.post_list time,
#column_post header time {
font-family: var(--font-en);
font-size: 14px;
color: #888;
}
.post_list span,
#column_post header div span {
padding: 0 12px;
border: 1px solid var(--color-green-light);
border-radius: 50px;
color: var(--color-green-text);
font-size: 12px;
line-height: 1.9;
}
.post_list p {
font-size: 17px;
font-weight: 500;
line-height: 1.7;
transition: 0.3s ease-out;
}
/* 本文の抜粋：3行まで表示して、あふれたら「…」 */
.post_list p + p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
margin-top: 10px;
font-size: 14px;
font-weight: 400;
line-height: 1.8;
color: #666;
}
.post_list a:hover p + p {
color: #666;
}
@media screen and (max-width:640px) {
.post_list {
grid-template-columns: 1fr;
gap: 30px;
}
.post_list div {
margin: 12px 0 4px;
}
.post_list time {
font-size: 13px;
}
.post_list p {
font-size: 15px;
}
.post_list p + p {
margin-top: 6px;
font-size: 13px;
}
}
/*------------------------------ ページ送り ------------------------------*/
div.pagenum {
margin-top: 70px;
}
div.pagenum ul.page-numbers {
display: flex;
justify-content: center;
gap: 10px;
}
div.pagenum ul.page-numbers li .page-numbers {
display: flex;
justify-content: center;
align-items: center;
min-width: 46px;
height: 46px;
padding: 0 14px;
border: 1px solid var(--color-green-light);
border-radius: 50px;
background: #fff;
color: #222;
font-family: var(--font-en);
font-size: 15px;
box-sizing: border-box;
}
div.pagenum ul.page-numbers li a.page-numbers:hover,
div.pagenum ul.page-numbers li .current {
border-color: var(--color-green);
background: var(--color-green);
color: #fff;
}
div.pagenum ul.page-numbers li .prev,
div.pagenum ul.page-numbers li .next {
font-family: var(--font-ja);
font-size: 14px;
}
@media screen and (max-width:640px) {
div.pagenum {
margin-top: 45px;
}
div.pagenum ul.page-numbers {
gap: 6px;
}
div.pagenum ul.page-numbers li .page-numbers {
min-width: 40px;
height: 40px;
padding: 0 10px;
font-size: 14px;
}
}
/*==================================================================
$お知らせ ＊ 記事ページなし、1ページにタイトル・日付・本文を並べる
==================================================================*/
#news_list article {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 0 30px;
padding: 40px 0;
border-bottom: 1px solid #eee;
}
#news_list article:first-child {
padding-top: 0;
}
#news_list time {
padding-top: 4px;
font-family: var(--font-en);
font-size: 15px;
font-weight: 500;
color: var(--color-green-text);
}
#news_list h2 {
margin-bottom: 15px;
font-size: 21px;
line-height: 1.6;
letter-spacing: 1px;
}
#news_list .text {
overflow-wrap: anywhere; /* 長いURLを折り返す */
}
#news_list .text p:last-child {
margin-bottom: 0;
}
@media screen and (max-width:640px) {
#news_list article {
grid-template-columns: 1fr;
padding: 28px 0;
}
#news_list time {
padding-top: 0;
font-size: 13px;
}
#news_list h2 {
margin-bottom: 10px;
font-size: 17px;
letter-spacing: 0;
}
}
/*==================================================================
$投稿ページ ＊ 医療コラム・お知らせで使い回し
＊ で幅をせまく
==================================================================*/
/*------------------------------ 記事の見出し ------------------------------*/
#column_post header {
min-width: 0; /* 共通の body, header, footer の min-width: 1300px を外す */
}
#column_post header div {
margin-top: 0;
}
#column_post h1 {
margin-bottom: 35px;
font-size: 30px;
font-weight: 500;
line-height: 1.6;
letter-spacing: 1px;
}
/* アイキャッチ */
#column_post article > figure {
margin-bottom: 50px;
border-radius: 10px;
overflow: hidden;
}
#column_post article > figure img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
@media screen and (max-width:640px) {
#column_post h1 {
margin-bottom: 20px;
font-size: 21px;
letter-spacing: 0;
}
#column_post article > figure {
margin-bottom: 30px;
}
}
/*------------------------------ 本文(the_contentの中身) ------------------------------*/
#column_post .text {
overflow-wrap: anywhere; /* 長いURLを折り返す */
}
#column_post .text h2 {
margin: 60px 0 25px;
padding: 14px 22px;
border-left: 4px solid var(--color-green);
border-radius: 0 6px 6px 0;
background: #f4faf8;
font-size: 24px;
line-height: 1.6;
letter-spacing: 1px;
}
#column_post .text h3 {
margin: 45px 0 18px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--color-green-light);
font-size: 20px;
}
/* 見出し4：左に緑の丸 */
#column_post .text h4 {
position: relative;
margin: 35px 0 12px;
padding-left: 18px;
font-size: 17px;
font-weight: 500;
line-height: 1.7;
}
#column_post .text h4::before {
position: absolute;
content: "";
top: 0.85em;
left: 0;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-green);
transform: translateY(-50%);
}
#column_post .text ul,
#column_post .text ol {
margin: 20px 0 1.5em;
}
/* 番号付きの箇条書き */
#column_post .text ol {
counter-reset: num;
}
#column_post .text ol li {
padding-left: 32px;
counter-increment: num;
}
#column_post .text ol li + li,
#column_post .text ul li + li {
margin-top: 6px;
}
#column_post .text ol li::before {
content: counter(num);
top: 0.25em;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 22px; height: 22px;
color: #fff;
font-family: var(--font-en);
font-size: 12px;
font-weight: 600;
transform: none;
}
#column_post .text figure {
margin: 35px 0;
}
#column_post .text figure img {
width: 100%;
height: auto;
border-radius: 10px;
}
#column_post .text figcaption {
margin-top: 8px;
font-size: 13px;
color: #888;
text-align: center;
}
/* 表：.table_wrap と同じ見た目に */
#column_post .text table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #8bc8ba;
border-radius: 10px;
overflow: hidden;
}
#column_post .text th,
#column_post .text td {
padding: 14px 18px;
border-right: 1px solid #8bc8ba;
border-bottom: 1px solid #8bc8ba;
line-height: 1.7;
text-align: left;
}
#column_post .text tr > :last-child { border-right: 0; }
#column_post .text tbody tr:last-child > * { border-bottom: 0; }
#column_post .text thead th {
background: var(--color-green);
color: #fff;
font-weight: 500;
}
#column_post .text tbody th {
background: #f4faf8;
color: var(--color-green-text);
font-weight: 500;
}
#column_post .text blockquote {
margin: 30px 0;
padding: 25px 30px;
border-radius: 10px;
background: #f7f7f7;
}
#column_post .text blockquote p:last-child {
margin-bottom: 0;
}
@media screen and (max-width:640px) {
#column_post .text h2 {
margin: 45px 0 18px;
padding: 10px 15px;
font-size: 19px;
letter-spacing: 0;
}
#column_post .text h3 {
margin: 35px 0 15px;
font-size: 17px;
}
#column_post .text h4 {
margin: 28px 0 10px;
font-size: 16px;
}
/* 表はSPで横スクロール */
#column_post .text .wp-block-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
#column_post .text table {
min-width: 500px;
}
#column_post .text th,
#column_post .text td {
padding: 10px 12px;
font-size: 14px;
}
#column_post .text blockquote {
padding: 18px 20px;
}
}
/*------------------------------ 監修者 ------------------------------*/
#column_post aside {
display: flex;
align-items: center;
gap: 0 35px;
margin-top: 70px;
padding: 35px 40px;
border: 1px solid var(--color-green-light);
border-radius: 10px;
}
#column_post aside figure {
flex-shrink: 0;
width: 130px;
border-radius: 50%;
overflow: hidden;
}
#column_post aside figure img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
#column_post aside .ttl_dot {
margin-bottom: 4px;
}
#column_post aside p:not(.ttl_dot) {
font-size: 14px;
line-height: 1.8;
}
#column_post aside strong {
display: block;
margin-bottom: 8px;
font-size: 19px;
font-weight: 500;
}
#column_post aside a {
display: inline-block;
margin-top: 10px;
font-size: 14px;
text-decoration: underline;
text-underline-offset: 4px;
}
@media screen and (max-width:640px) {
#column_post aside {
flex-direction: column;
gap: 15px 0;
margin-top: 45px;
padding: 25px 20px;
}
#column_post aside figure {
width: 100px;
}
#column_post aside strong {
text-align: center;
font-size: 17px;
}
}
/*------------------------------ 前後の記事 ------------------------------*/
.single_nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid #eee;
}
.single_nav .next {
text-align: right;
}
.single_nav a {
display: inline-block;
color: #222;
font-size: 15px;
}
.single_nav a:hover {
color: var(--color-green-text);
}
.single_nav .prev a::before { content: "‹ "; color: var(--color-green); }
.single_nav .next a::after { content: " ›"; color: var(--color-green); }
.single_nav .list a {
padding: 10px 40px;
border: 1px solid var(--color-green-light);
border-radius: 50px;
}
.single_nav .list a:hover {
border-color: var(--color-green);
background: var(--color-green);
color: #fff;
}
@media screen and (max-width:640px) {
.single_nav {
margin-top: 40px;
padding-top: 25px;
}
.single_nav a {
font-size: 13px;
}
.single_nav .list a {
padding: 8px 18px;
}
}
/*==================================================================
$お問い合わせページ ＊ Contact Form 7カスタマイズ
＊ CF7のフォームを で組む
==================================================================*/
/*------------------------------ 注意書き：※を付ける ------------------------------*/
#contact_form .text ul {
margin-top: 20px;
font-size: 15px;
color: #666;
}
#contact_form .text li {
padding-left: 1.2em;
}
#contact_form .text li::before {
content: "※";
top: 0;
left: 0;
width: auto; height: auto;
border-radius: 0;
background: none;
transform: none;
}
@media screen and (max-width:640px) {
#contact_form .text ul {
font-size: 13px;
}
}
/*------------------------------ フォームの表 ------------------------------*/
.inquiry {
width: 100%;
border-top: 1px solid #ddd;
}
.inquiry tr {
border-bottom: 1px solid #ddd;
}
.inquiry th {
width: 300px;
padding: 30px 25px;
background: #f4faf8;
font-weight: 500;
text-align: left;
vertical-align: top;
line-height: 1.8;
}
.inquiry td {
padding: 20px 0 20px 40px;
}
.inquiry input[type="text"],
.inquiry input[type="email"],
.inquiry input[type="tel"],
.inquiry textarea {
width: 100%;
max-width: 560px;
padding: 14px 18px;
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
font-family: inherit;
font-size: 16px;
box-sizing: border-box;
-webkit-appearance: none;
transition: 0.3s ease-out;
}
.inquiry textarea {
max-width: none;
height: 260px;
line-height: 1.8;
resize: vertical;
}
.inquiry input:focus,
.inquiry textarea:focus {
border-color: var(--color-green);
outline: none;
box-shadow: 0 0 0 3px rgba(81,179,156,.15);
}
.inquiry ::placeholder {
color: #bbb;
}
/* 入力欄の下の補足 */
.inquiry td p {
margin-top: 10px;
font-size: 14px;
line-height: 1.7;
color: #666;
}
@media screen and (max-width:640px) {
.inquiry th,
.inquiry td {
display: block;
width: 100%;
box-sizing: border-box;
}
.inquiry th {
padding: 12px 15px;
}
.inquiry td {
padding: 15px 0 22px;
}
.inquiry td p {
font-size: 12px;
}
}
/*------------------------------ 必須・任意 ------------------------------*/
.haveto,
.any {
float: right;
margin-top: 4px;
padding: 0 12px;
border-radius: 50px;
color: #fff;
font-size: 12px;
line-height: 1.9;
}
.haveto { background: var(--color-orange); }
.any { background: #aaa; }
@media screen and (max-width:640px) {
.haveto,
.any {
float: none;
display: inline-block;
margin: 0 0 0 10px;
font-size: 11px;
vertical-align: 1px;
}
}
/*------------------------------ 送信ボタン ------------------------------*/
#formbtn {
display: block;
width: 340px;
margin: 50px auto 0;
padding: 18px;
border: 0;
border-radius: 50px;
background: linear-gradient(to right, #51b39c, #49c5c9);
color: #fff;
font-family: inherit;
font-size: 16px;
letter-spacing: 2px;
cursor: pointer;
-webkit-appearance: none;
transition: 0.3s ease-out;
}
#formbtn:hover {
transform: translateY(-4px);
box-shadow: 0 5px 10px rgba(81,179,156,.3);
}
@media screen and (max-width:640px) {
#formbtn {
width: 100%;
margin-top: 35px;
}
}
/*------------------------------ そのほか(テンプレートの元の指定) ------------------------------*/
.spam {
padding:5px 10px;
background:#fcfaf4;
text-align:center;
}
.spam span {
margin-right:5px;
}
.contact_privacytext {
text-align:center;
text-decoration-line:underline;
}