@charset "UTF-8";
/* CSS Document */
/* ---------------------
項目をコピーしてページ内検索することで目的のセクションに移動できます。
スマホの各項目には「（スマホ）」で移動できます。
- 基礎
- *ヘッダー
- *ナビゲーション
- *メインビジュアル
- *フッター
- *共通要素（wrapper,box,section等）
- *フリーエリア（上・下）
- *医師紹介
- *診療案内
- *病名から探す
- *症状から探す
- *症例
- *医院案内
- *料金表
- *FAQ
- *求人案内
- *アクセス
- *お知らせ
- *ブログ
- *MPクラウド
- *RIBON
- *お問い合わせ
- *common
- *ホーム
- *スマホ設定
--------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--text-color: #333;
/*メイン色*/
--main-color: #89979f;
/*サブ色*/
--sub-color: #cda1a0;
/*サイドメニュー・レイアウト類の背景色*/
--bg-color: #f7f7f7;
/*境界線色*/
--border-color: #e0e0e0;
}
body {
position: relative;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: var(--text-color);
font-size: 16px;
font-weight: 500;
line-height: 2;
word-wrap: break-word;
background-color: #fff;
text-align: justify;
}
a {
color: var(--main-color);
text-decoration: none;
transition: 0.5s;
}
a:hover {
color: var(--sub-color);
}
::-moz-selection {
background-color: var(--sub-color);
}
::selection {
background-color: var(--sub-color);
}
strong {
font-weight: bold;
}
body,
.nav_wrap.fixed,
#mainvisual,
header,
footer {
min-width: 1240px;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
p,
dt,
dd,
form,
select,
option,
address,
pre {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
iframe {
max-width: 100%;
vertical-align: top;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
a img {
border: none;
}
@media print {
html {
-webkit-print-color-adjust: exact;
}
body {
zoom: 80%;
}
.fixed {
position: inherit !important;
}
.fixed_web_yoyaku_btn {
display: none !important;
}
}
/*TELリンクのカーソルはデフォルトにする*/
[href^=tel]:hover {
cursor: default;
color: var(--main-color);
}
a[href="tel:準備中"] {
pointer-events: none;
}
/*==================================================================================================================================
*ヘッダー
==================================================================================================================================*/
header {
width: 100%;
height: 170px;
background: #fff;
}
header .inner {
position: relative;
width: 1200px;
height: auto;
margin: auto;
}
/*----------ロゴ----------*/
.head_logo {
position: absolute;
box-sizing: border-box;
z-index: 9;
top: 38px;
}
.head_logo a {
display: block;
max-width: 355px;
height: auto;
}
.head_logo img {
width: auto;
max-height: 80px;
filter: drop-shadow(0px 0px 8px rgba(255,255,255,1)) drop-shadow(0px 0px 8px rgba(255,255,255,1)) drop-shadow(0px 0px 16px rgba(255,255,255,1)) drop-shadow(0px 0px 24px rgba(255,255,255,1));
}
/*----------基本情報----------*/
.head_info_wrap {
display: flex;
justify-content: flex-end;
width: 765px;
margin: 0 0 20px auto;
}
.head_info_wrap:after {
display: block;
content: "";
clear: both;
}
.head_info {
display: flex;
align-items: center;
margin-top: 53px;
text-align: right;
line-height: 1.2;
filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 15px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 21.6px rgba(255, 255, 255, 1));
}
.head_info_add {
margin-right: 45px;
font-size: 16px;
line-height: 1;
letter-spacing: 0.12em;
}
.head_info_tel {
display: flex;
font-family: "magister", sans-serif;
font-weight: 400;
font-size: 32px;
line-height: 1;
letter-spacing: 0.125em;
vertical-align: middle;
color: #717e85;
}
.head_info_tel::before {
position: relative;
bottom: -2px;
display: inline-block;
width: 21px;
height: 27px;
margin-right: 10px;
background: url("images/head_tel_icon.svg") no-repeat center/contain;
content: "";
}
/*----------予約・問診ボタン----------*/
.head_btn_area {
display: flex;
flex-wrap: nowrap;
margin-left: 10px;
padding-top: 35px;
}
.head_btn_area li {
width: 140px;
margin-right: 5px;
}
.head_btn_area li:last-child {
margin-right: 0;
}
.head_btn_area li a {
display: block;
background-color: var(--main-color);
color: #fff;
text-align: center;
font-size: 17px;
padding: 15px 0;
line-height: 1;
transition: 0.2s ease-in-out;
text-shadow: none;
}
.head_btn_area li a:hover {
background-color: var(--sub-color);
}
.head_btn_area li a i {
margin-right: 8px;
}
.fixed_web_yoyaku_btn {
position: fixed;
right: 0;
top: 0;
z-index: 11;
width: 100px;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
}
.fixed_web_yoyaku_btn a {
display: flex;
background: rgba(0, 0, 0, 0.2);
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
color: #fff;
width: 100%;
height: 241px;
margin-bottom: 13px;
padding: 34px 10px 15px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 20px;
letter-spacing: 0.12em;
line-height: 1;
align-items: center;
text-shadow: none;
}
.fixed_web_yoyaku_btn a:nth-of-type(1) {
background-color: #c5a6a5;
}
.fixed_web_yoyaku_btn a:nth-of-type(1):hover {
background-color: #d69593;
}
.fixed_web_yoyaku_btn a:nth-of-type(2) {
background-color: #9aa7ae;
}
.fixed_web_yoyaku_btn a:nth-of-type(2):hover {
background-color: #8faab9;
}
.fixed_web_yoyaku_btn a:hover {
background: var(--sub-color);
}
.fixed_web_yoyaku_btn a:last-child {
margin-bottom: 0;
}
.fixed_web_yoyaku_btn a::before {
width: 100%;
margin-bottom: 22px;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: top center;
content: "";
}
.fixed_web_yoyaku_btn a:nth-of-type(1)::before {
height: 31px;
background-image: url("images/side_btn_icon01.svg");
}
.fixed_web_yoyaku_btn a:nth-of-type(2)::before {
height: 32px;
background-image: url("images/side_btn_icon02.svg");
}
.fixed_web_yoyaku_btn a.sns {
padding: 18px 10px 14px;
font-weight: 500;
font-size: 24px;
}
.fixed_web_yoyaku_btn a.sns i {
margin-bottom: 0;
}
.head_mv {
position: relative;
}
@media print, screen and (min-width: 641px) {
/*-------------------パターンB(ヘッダとMV一体型)-------------------*/
.head_mv header {
position: absolute;
top: 0;
left: 0;
z-index: 3;
background: none;
}
.content_mv {
height: 400px;
}
.home_mv {
height: 1000px;
}
.head_mv .main_headline {
margin-top: 120px;
}
.head_mv .slider-fade .slick-slide img {
height: 1000px;
}
.head_mv .slide_catch {
top: 330px;
}
}
/*==================================================================================================================================
*ナビゲーション
==================================================================================================================================*/
@media print, screen and (min-width: 641px) {
.nav_wrap :is(.btn_menu,.nav_btn,.sp_btn_area) {
display: none;
}
.nav_wrap {
width: 100%;
position: absolute;
top: 129px;
z-index: 10;
}
.menu_list_wrap {
width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 30px 0 24px;
background-color: rgba(77, 88, 94, 0.5);
}
/*----------ナビメニュー----------*/
.nav_menu {
display: flex;
justify-content: center;
align-items: center;
gap: 15.5px;
}
.nav_menu > li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.nav_menu_tit {
position: relative;
z-index: 2;
display: block;
padding-bottom: 5px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 17px;
letter-spacing: 0.1em;
line-height: 1;
text-align: center;
color: #fff;
opacity: 1;
transition: 0.15s ease-out;
}
.parent_menu:not(.nav_menu_tit) {
display: none;
}
.nav_menu_en {
display: block;
margin-top: 17px;
font-size: 12px;
letter-spacing: 0.12em;
line-height: 1;
color: #fff;
}
/* ホバー */
.nav_menu a.nav_menu_tit::before {
position: absolute;
left: 0;
right: 0;
bottom: -5px;
width: 100%;
height: 1px;
margin: auto;
background-color: #fff;
transition: 0.15s ease-out;
transform: scaleX(0);
content: "";
z-index: 1;
}
.nav_menu a.nav_menu_tit:hover {
color: #fff;
opacity: 0.6;
}
.nav_menu a.nav_menu_tit:hover::before {
transform: scaleX(1);
}
/*----------ナビ固定時----------*/
.nav_wrap.fixed {
position: fixed;
top: 0;
left: 0;
bottom: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(77, 88, 94, 0.7);
}
.nav_wrap.fixed .menu_list_wrap {
background-color: transparent;
}
.nav_wrap.fixed .nav_menu {
width: 1200px;
}
/*----------ドロップダウンメニュー----------*/
.child_menu {
display: none;
width: 280px;
position: absolute;
top: 100%;
left: 0%;
z-index: 9999;
background-color: rgba(77, 88, 94, 0.7);
}
.child_menu::after {
position: absolute;
z-index: 1;
display: block;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
content: "";
}
.nav_slidebtm:hover .child_menu,
.nav_slidebtm:focus-within > .child_menu {
display: block;
}
.child_menu a {
display: block;
position: relative;
align-items: center;
width: 100%;
padding: 12px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
line-height: 1.4;
font-size: 16px;
color: #fff;
}
.child_menu a:hover {
background-color: rgba(77, 88, 94, 0.9);
}
/* ------- メガメニュー ------- */
.nav_menu > li.is_mega {
position: static;
}
.nav_menu > li.is_mega .child_menu {
width: 100%;
}
.sp_under_nav {
display: none;
}
}
/*==================================================================================================================================
*メインビジュアル
==================================================================================================================================*/
.content_mv {
display: block;
position: relative;
height: 440px;
overflow: hidden;
}
.content_mv .header_img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
position: absolute;
z-index: -1;
overflow: hidden;
min-height: 100%;
top: 0;
bottom: 0;
margin: auto;
}
.content_mv .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
margin: 0 auto;
width: 1200px;
display: flex;
align-items: center;
justify-content: center;
padding: 110px 0 0;
}
/*----------ページタイトル----------*/
.main_headline {
text-align: center;
text-shadow: 0 0 5px #fff;
}
.main_headline .midashi {
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 32px;
letter-spacing: 0.12em;
line-height: 1.5;
color: #fff;
text-shadow: 0px 0px 12px rgba(25, 42, 46, 0.8), 0px 0px 25px rgba(25, 42, 46, 1), 0px 0px 32.68px rgba(25, 42, 46, 1);
}
/*==================================================================================================================================
*フッター
==================================================================================================================================*/
/*--------------------footer--------------------*/
footer {
position: relative;
width: 100%;
background-color: #e1e4e5;
}
@media print, screen and (min-width: 641px) {
.footer_inner {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
}
footer h2 {
text-align: center;
border-bottom: 2px solid var(--main-color);
display: table;
margin: 0 auto 30px;
}
/*--------------------footer_info--------------------*/
.footer_info {
padding: 158px 0 137px;
}
@media print, screen and (min-width: 641px) {
.footer_info {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
}
}
/*--------------------footer_info 左側--------------------*/
.footer_info_left {
width: 47.5%;
box-sizing: border-box;
}
/*ロゴ*/
.footer_info_logo {
margin: 0 auto 38px;
text-align: center;
}
.footer_info_logo img {
width: auto;
max-height: 62px;
}
.footer_info_add {
margin: 0 45px 39px;
padding-bottom: 30px;
line-height: 1.5;
letter-spacing: 0.12em;
text-align: center;
border-bottom: 1px solid #bfc2c3;
}
.footer_info_add span {
display: block;
}
.footer_info_tel {
margin-bottom: 53px;
font-family: "magister", sans-serif;
font-weight: 400;
font-size: 34px;
line-height: 1;
letter-spacing: 0.124em;
text-align: center;
}
.footer_info_tel::before {
position: relative;
bottom: -2px;
display: inline-block;
width: 21px;
height: 27px;
margin-right: 10px;
background: url("images/head_tel_icon.svg") no-repeat center/contain;
content: "";
}
.footer_info_tel a {
color: #717e85;
}
/*--------------------footer_info 右側--------------------*/
.footer_info_right {
width: 47.5%;
}
/*--------------------アクセス--------------------*/
.footer_info_access_map {
position: relative;
padding: 19px 0 0;
text-align: center;
}
.footer_info_access_map iframe {
width: 100%;
height: 400px;
}
.footer_info_access_guide {
margin-top: 20px;
}
.footer_info_access_guide li {
position: relative;
display: table;
padding: 5px 15px;
background: var(--bg-color);
}
.footer_info_access_guide li:not(:last-child) {
margin-bottom: 5px;
}
.foot_map_btn {
margin-top: 46px;
text-align: center;
}
.foot_map_btn a {
position: relative;
display: inline-block;
box-sizing: border-box;
width: 365px;
padding: 0 62px 0 0;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 18px;
letter-spacing: 0.12em;
line-height: 59px;
text-align: center;
color: #fff;
border: 7px solid #b4bbbe;
background-color: #9aa7ae;
transition: ease-in-out 0.3s;
}
.foot_map_btn a:hover {
background-color: #8eaab9;
}
.foot_map_btn a::after {
position: absolute;
right: 41px;
top: calc(50% - 5px);
width: 9px;
height: 10px;
background: url("images/btn_arrow.png") no-repeat center/contain;
content: "";
transition: ease-in-out 0.3s;
}
.foot_map_btn a:hover::after {
right: 27px;
}
/*--------------------カレンダー--------------------*/
.footer_info_calendar .btn01 {
text-align: center;
margin-top: 20px;
}
.footer_info_calendar .btn01 a {
margin: 0;
}
/*--------------------連携病院--------------------*/
.sec_footer_affiliations {
position: relative;
margin-bottom: 184px;
padding: 132px 0 122px;
overflow: hidden;
}
.sec_footer_affiliations::before {
position: absolute;
right: 0;
bottom: 0;
width: calc(50vw + 448px);
height: calc(100% - 307px);
background-color: #c9ccce;
content: "";
}
.sec_footer_affiliations .footer_inner {
display: flex;
justify-content: space-between;
}
.sec_footer_affiliations h2,
body.home .sec_footer_affiliations h2 {
position: relative;
padding: 68px 0 0;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 24px;
text-align: left;
letter-spacing: 0.12em;
line-height: 1;
color: #555;
}
.sec_footer_affiliations h2::before,
body.home .sec_footer_affiliations h2::before {
display: block;
margin-bottom: 32px;
font-family: "magister", sans-serif;
font-weight: 400;
font-size: 50px;
letter-spacing: 0.12em;
line-height: 1;
color: #9aa7ae;
content: "LINKS";
}
.footer_affiliations_list {
position: relative;
display: flex;
flex-wrap: wrap;
gap: 15px 10px;
box-sizing: border-box;
width: 950px;
padding: 90px 0 103px 90px;
}
.footer_affiliations_list::before {
position: absolute;
left: 0;
top: 0;
width: calc(50vw + 350px);
height: 100%;
background-color: #f8f8f8;
content: "";
}
.footer_affiliations_list li {
position: relative;
width: 280px;
}
.footer_affiliations_list li:nth-child(4n) {
margin-right: 0 !important;
}
.footer_affiliations_list li a {
display: block;
pointer-events: all;
transition: 0.2s;
}
.footer_affiliations_list li a span {
box-sizing: border-box;
display: block;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 18px;
letter-spacing: 0.12em;
text-align: center;
padding: 20px 10px;
color: var(--text-color);
border: 3px solid #f0dee1;
background-color: #fff;
pointer-events: none;
transition: 0.2s;
}
.footer_affiliations_list li a span::before {
display: inline-block;
width: 13px;
height: 13px;
margin-right: 7px;
background: url("images/affiliations_list_icon.svg") no-repeat center/contain;
content: "";
}
.footer_affiliations_list li a img {
pointer-events: none;
transition: 0.2s;
}
.footer_affiliations_list li a:hover {
color: var(--text-color);
}
.footer_affiliations_list li a:hover span {
background-color: #fcf4f5;
}
.footer_affiliations_list li a:hover img {
opacity: 0.8;
}
/*--------------------フッターのサイドバナー--------------------*/
.sec_footer_banner {
padding: 50px 0 0;
}
.sec_footer_banner ul {
display: flex;
flex-wrap: wrap;
}
.sec_footer_banner ul li {
width: 23%;
margin: 0 2.6666666667% 30px 0;
}
.sec_footer_banner ul li:nth-child(4n) {
margin-right: 0 !important;
}
.sec_footer_banner ul .btn01 a {
margin-top: 0;
margin-bottom: 0;
}
/*----------フッターのナビ----------*/
.footer_nav {
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
background-color: #9aa7ae;
}
.footer_nav a {
color: #fff;
}
@media (hover: hover) {
.footer_nav a {
transition: color .15s ease-out;
}
.footer_nav a:hover {
color: #fff;
}
}
.footer_nav .footer_inner {
padding: 138px 0 125px;
}
@media print, screen and (min-width: 641px) {
.footer_nav .footer_inner {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.footer_nav_fixed {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 40px 40px;
width: 36%;
height: fit-content;
}
.footer_nav_sub {
width: 58%;
}
}
.footer_nav_fixed li,
.footer_nav_sub_tit {
padding-left: 42px;
line-height: 1.4;
background: url("images/foot_nav_icon.svg") no-repeat left 3px top 5px/16px 15px;
color: #fff;
}
.footer_nav_fixed a,
.footer_nav_sub_tit,
.footer_nav_sub_tit a {
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.12em;
}
.footer_nav_sub a {
font-size: 16px;
line-height: 1.4;
letter-spacing: 0.12em;
}
@media (hover: hover) {
.footer_nav_fixed a,
.footer_nav_sub a {
position: relative;
display: inline-block;
vertical-align: top;
}
.footer_nav_fixed a::before,
.footer_nav_sub a::before {
content: "";
width: 100%;
height: 1px;
background-color: #fff;
transition: transform .15s ease-out;
transform: scaleX(0);
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.footer_nav_fixed a:hover::before,
.footer_nav_sub a:hover::before {
transform: scaleX(1);
}
}
/* 投稿タイプ */
.footer_nav_sub .footer_nav_sub_item:not(:last-of-type) {
margin-bottom: 54px;
}
.footer_nav_sub_tit {
margin-bottom: 21px;
}
.footer_nav_sub_list {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px 20px;
padding-left: 42px;
}
.footer_nav_sub_list > li {
position: relative;
display: flex;
align-items: baseline;
width: calc((100% - 40px) / 3);
padding-left: 22px;
}
.footer_nav_sub_list > li::before {
position: absolute;
top: 7px;
left: 3px;
display: block;
width: 7px;
height: 7px;
border-radius: 100%;
background-color: #c9ccce;
content: "";
}
/* カテゴリごと */
.footer_nav_sub_cate {
padding-left: 15px;
}
.footer_nav_sub_cate:not(:last-child) {
margin-bottom: 15px;
}
.footer_nav_sub_cate .footer_nav_sub_list {
padding-left: 0;
}
.footer_nav_sub_cate_tit {
color: var(--main-color);
font-weight: bold;
margin-bottom: 10px;
}
/*--------------------フッターのSNS--------------------*/
.footer_sns {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
text-align: center;
line-height: 1;
padding-top: 47px;
padding-bottom: 27px;
background-color: #83888b;
}
.footer_sns li a {
color: #fff;
opacity: 1;
}
@media (hover: hover) {
.footer_sns li a:hover {
opacity: 0.5;
}
}
.footer_sns i {
font-size: 30px;
letter-spacing: 0;
}
/*----------ページトップ----------*/
.pagetop {
position: fixed;
right: 35px;
bottom: 0;
width: 100px;
height: 100px;
cursor: pointer;
z-index: 12;
transition: 0.5s ease-in-out;
}
.pagetop:hover {
-webkit-transform: translate(0, -10px);
transform: translate(0, -10px);
}
/*----------コピーライト----------*/
.copy {
padding: 13px 0 33px;
line-height: 1;
text-align: center;
background-color: #83888b;
}
.copy small {
font-size: 13px;
letter-spacing: 0.12em;
color: #fff;
}
/*==================================================================================================================================
*共通要素（wrapper,box,section等）
==================================================================================================================================*/
.contents_bg {
position: relative;
overflow: hidden;
}
.contents_bg::before {
position: absolute;
z-index: -1;
right: 0;
top: 0;
width: calc(50vw + 730px);
height: 500px;
background-color: #eceff0;
content: "";
}
:is(.blog,.single-post,.archive,.category):not(.tax-cate_menu,.tax-cate_disease,.tax-cate_symptom,.tax-cate_case) .contents_bg:before{
content: "";
height: 100%;
display: block;
position: absolute;
background: var(--bg-color);
top: 0;
width: calc((100% - 1200px) / 2);
right: 0;
}
.wrapper {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 1200px;
margin: auto;
}
.wrapper main {
width: 100%;
padding: 30px 0 30px;
}
:is(.blog,.single-post,.archive,.category):not(.tax-cate_menu,.tax-cate_disease,.tax-cate_symptom,.tax-cate_case) .wrapper main {
width: 68%;
}
.ul {
text-decoration: underline;
}
/*--------------------text--------------------*/
.text {
position: relative;
margin: 0 0 50px;
}
.text > p {
margin-bottom: 1em;
}
.text > p:last-child {
margin-bottom: 0;
}
.textarea > p {
font-size: 16px;
margin-bottom: 22px;
}
.textarea > p:last-child {
margin-bottom: 0;
}
/*--------------------リンク無効--------------------*/
.disable_link,
.disable_link * {
color: inherit!important;
text-decoration: none!important;
pointer-events: none!important;
cursor: default!important;
border: none!important;
}
/*--------------------下層ページのレイアウト--------------------*/
.body_single,
.sec_doctor,
.sec_clinic,
.price_wrap,
.faq_wrap,
.sec_access,
.access_route,
.sec_recruit,
.sec_freearea,
.clinic_facilities {
position: relative;
margin: 0 0 80px;
}
.body_single > p {
margin-bottom: 1em;
}
.body_single > p:last-child {
margin-bottom: 0;
}
/*--------------------サイドバー--------------------*/
.side_area {
width: 28%;
padding: 50px 2%;
z-index: 3;
background: var(--bg-color);
}
.side_box:not(:last-child) {
margin-bottom: 40px;
}
.side_area .side_title {
font-size: 120%;
font-weight: bold;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: solid 2px var(--main-color);
text-align: left;
line-height: 1.6;
}
.side_area .side_title i {
margin-right: 12px;
vertical-align: middle;
color: var(--main-color);
}
.side_area li a {
color: var(--text-color);
}
.side_area ul.children li.cat-item a {
padding-left: 1em;
}
.side_area ul.children li.cat-item a::before {
content: "－";
}
.side_area li a:hover {
color: var(--main-color) !important;
}
/*--------------------ボタン--------------------*/
.btn01 a {
display: inline-block;
padding: 8px 30px 8px 15px;
margin: 10px 0;
background-color: var(--main-color);
color: #fff;
border: 1px solid var(--main-color);
transition: 0.2s ease-in-out;
position: relative;
}
.btn01 a:hover {
background-color: #fff;
color: var(--main-color);
opacity: 0.8;
}
.btn01 a:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: 900;
color: #fff;
right: 15px;
top: 0;
bottom: 0;
margin: auto;
display: block;
height: 30px;
transition: 0.2s ease-in-out;
}
.btn01 a:hover::before {
color: var(--main-color);
}
.btn01 a i {
margin: 0 0 0 10px;
}
/*--------------------パンくず--------------------*/
#breadcrumb {
width: 100%;
margin: 0 0 50px 0;
}
#breadcrumb ol {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
counter-reset: unset;
}
#breadcrumb ol li {
position: relative;
padding-right: 20px;
line-height: 1.5;
margin: 0;
}
#breadcrumb ol li::before {
content: "›";
width: 20px;
height: 16px;
line-height: 1;
text-align: center;
font-size: 16px;
color: inherit;
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: none;
border: none;
margin: 0;
padding: 0;
border-radius: none;
left: unset;
}
#breadcrumb ol li:last-child {
margin-right: 0;
padding-right: 0;
}
#breadcrumb ol li:last-child::before {
content: normal;
}
#breadcrumb ol li a {
display: inline-block;
position: relative;
width: auto;
}
#breadcrumb ol li:last-child {
display: inline-block;
position: relative;
width: auto;
}
/*--------------------タイトル--------------------*/
h1 {
position: absolute;
top: 15px;
right: 0;
line-height: 1.3;
letter-spacing: 0.12em;
font-weight: 500;
font-size: 13px;
color: #7f7f7f;
text-shadow: 0px 0px 21.6px rgba(255, 255, 255, 0.01);
}
.contents_bg h2:not(.blog_list_item_tit):not(.news_title) {
position: relative;
margin-bottom: 44px;
padding: 82px 0 0;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 31px;
letter-spacing: 0.12em;
line-height: 1.4;
text-align: center;
color: #555;
background: url("images/tit_deco_logo.png") no-repeat center top/96px auto;
}
.contents_bg h3 {
position: relative;
z-index: 2;
width: fit-content;
width: -moz-fit-content;
margin: 0 7px 24px 0;
padding: 12px 16px 10px 24px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 22px;
letter-spacing: 0.1em;
line-height: 1.4;
color: #555;
background-color: #f7f7f7;
}
.contents_bg h3::before {
position: absolute;
left: 0;
top: calc(50% - 5px);
width: 12px;
height: 12px;
background-color: #9aa7ae;
opacity: 0.6;
content: "";
}
.contents_bg h3::after {
position: absolute;
z-index: -1;
right: -7px;
bottom: -7px;
width: 100%;
height: 100%;
border: solid #c5a6a5;
border-width: 0 7px 7px 0;
opacity: 0.4;
content: "";
}
.contents_bg h4 {
position: relative;
margin: 0 0 5px;
line-height: 1.6;
font-size: 125%;
font-weight: bold;
color: var(--main-color);
clear: both;
}
.contents_bg h5 {
position: relative;
margin: 0 0 15px;
line-height: 1.4;
font-size: 115%;
font-weight: bold;
color: var(--main-color);
clear: both;
}
/*--------------------下層の見出しの上に余白を付ける--------------------*/
.body_single h2:nth-child(n+2),
.cmn_editor h2:nth-child(n+2) {
margin-top: 2em;
}
.body_single h3:nth-child(n+2),
.body_single h4:nth-child(n+2),
.body_single h5:nth-child(n+2),
.body_single h6:nth-child(n+2),
.cmn_editor h3:nth-child(n+2),
.cmn_editor h4:nth-child(n+2),
.cmn_editor h5:nth-child(n+2),
.cmn_editor h6:nth-child(n+2) {
margin-top: 1.5em;
}
/*--------------------TinyMCEエディタ用--------------------*/
.cmn_editor p {
margin-bottom: 1em;
}
.cmn_editor p:last-child {
margin-bottom: 0;
}
/*----------見出し----------*/
/*太字*/
.title_style01 {
color: var(--main-color);
font-weight: bold;
border: none;
background: none;
text-align: left;
margin-right: 0;
margin-left: 0;
padding: 0;
display: table;
border-radius: 0;
}
/*下線*/
.title_style02 {
color: var(--main-color);
font-weight: bold;
border-bottom: 1px solid var(--main-color);
background: none;
text-align: left;
margin-right: 0;
margin-left: 0;
padding: 0;
display: table;
border-radius: 0;
}
/*背景色付き・白抜き*/
.title_style03 {
background: var(--main-color);
color: #fff;
font-weight: bold;
border: none;
text-align: left;
margin-right: 0;
margin-left: 0;
padding: 5px 10px;
border-radius: 0;
}
h2.title_style01:before,
h2.title_style01:after,
h3.title_style01:before,
h3.title_style01:after,
h4.title_style01:before,
h4.title_style01:after,
h5.title_style01:before,
h5.title_style01:after,
h2.title_style02:before,
h2.title_style02:after,
h3.title_style02:before,
h3.title_style02:after,
h4.title_style02:before,
h4.title_style02:after,
h5.title_style02:before,
h5.title_style02:after,
h2.title_style03:before,
h2.title_style03:after,
h3.title_style03:before,
h3.title_style03:after,
h4.title_style03:before,
h4.title_style03:after,
h5.title_style03:before,
h5.title_style03:after {
display: none;
}
/*----------枠----------*/
.box_style01 {
background: var(--bg-color);
padding: 20px;
margin: 0 0 15px;
}
.box_style02 {
border: solid 1px var(--border-color);
padding: 20px;
margin: 0 0 15px;
}
.box_style03 {
border: dashed 1px var(--border-color);
padding: 20px;
margin: 0 0 15px;
}
.box_style01 p:last-of-type,
.box_style02 p:last-of-type,
.box_style03 p:last-of-type {
margin-bottom: 0;
}
/*----------テーブル----------*/
.cmn_editor table,
.body_single table,
.table_style2_30,
.table_style2_50,
.table_style2_70,
.table_style3 {
width: 100%;
border-spacing: 1px;
border-collapse: separate;
background-color: var(--bg-color);
}
.cmn_editor th,
.cmn_editor td,
.body_single th,
.body_single td,
.table_style2_30 th,
.table_style2_30 td,
.table_style2_50 th,
.table_style2_50 td,
.table_style2_70 th,
.table_style2_70 td,
.table_style3 th,
.table_style3 td {
padding: 10px;
}
.cmn_editor th,
.body_single th,
.table_style2_30 th,
.table_style2_50 th,
.table_style2_70 th,
.table_style3 th {
font-weight: bold;
background-color: var(--bg-color);
border: 1px solid var(--border-color);
}
.cmn_editor td,
.body_single td,
.table_style2_30 td,
.table_style2_50 td,
.table_style2_70 td,
.table_style3 td {
background-color: #fff;
border: 1px solid var(--border-color);
}
.table_style2_30 span,
.table_style2_50 span,
.table_style2_70 span,
.table_style3 span {
font-size: 80%;
}
.table_style2_30 tr:first-of-type th,
.table_style2_30 tr:first-of-type td {
width: 30%;
}
.table_style2_30 tr:first-of-type td:nth-child(2) {
width: 70%;
}
.table_style2_50 tr:first-of-type th,
.table_style2_50 tr:first-of-type td {
width: 50%;
}
.table_style2_70 tr:first-of-type th,
.table_style2_70 tr:first-of-type td {
width: 70%;
}
.table_style3 th,
.table_style3 td {
width: 33.3333333333% !important;
}
/*----------ラインマーカー----------*/
.marker {
background: linear-gradient(transparent 60%, #ffff93 60%);
}
/*--------------------診療内容などのコンテンツ部分--------------------*/
.body_list li {
margin-bottom: 60px;
}
.body_list li .text {
margin-bottom: 15px;
}
.body_wrap_float:after {
display: block;
clear: both;
content: "";
}
/*ページ内リンク設定*/
.ank_single {
position: relative;
margin: 0 0 80px;
}
.anklink {
display: flex;
flex-wrap: wrap;
gap: 10px 0.5%;
}
.anklink li {
width: 33%;
display: flex;
align-items: center;
align-content: flex-start;
justify-content: space-between;
position: relative;
}
.anklink li a {
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
width: 100%;
height: 100%;
padding: 18px 10px;
font-weight: bold;
text-align: center;
font-size: 14px;
letter-spacing: 0;
line-height: 1.4;
color: var(--main-color);
border: 1px solid var(--main-color);
background-color: rgba(255, 255, 255, 0.7);
transition: 0.1s ease-in-out;
}
.anklink li a:hover {
background-color: var(--main-color);
color: #fff;
}
.anklink li i {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 4px;
margin: auto;
}
/* 扉ページのリンク */
.contentlink {
display: flex;
flex-wrap: wrap;
gap: 10px 15px;
}
.contentlink:not(:first-child) {
margin-top: 25px;
}
.contentlink li {
max-width: 390px;
width: 100%;
}
.contentlink li a {
display: block;
text-align: center;
font-weight: bold;
color: var(--main-color);
border: 1px solid var(--main-color);
padding: 10px;
}
@media print, screen and (min-width: 641px) {
.contentlink li a {
display: flex;
flex-flow: column;
justify-content: center;
height: 100%;
}
}
@media (hover: hover) {
.contentlink li a:hover {
color: #fff;
background: var(--main-color);
}
}
/*--------------------共通--------------------*/
/*----------無装飾----------*/
.list01 {
padding: 0;
border-width: 0 1px 1px;
}
.list01 li {
margin-bottom: 12px;
list-style-type: none;
}
.list01 p:last-of-type {
margin-bottom: 0;
}
/*----------下線----------*/
.list02 {
border-width: 0 1px 1px;
}
.list02 li {
margin: 0;
padding: 14px 0;
line-height: 1.5;
border-bottom: 1px solid var(--border-color);
list-style-type: none;
}
.list02 p:last-of-type {
margin-bottom: 0;
}
/*----------点----------*/
.list03 {
list-style: none !important;
}
.list03 li {
position: relative;
display: block;
padding-left: 15px;
line-height: 1.5;
list-style-image: none;
}
.list03 li:not(:last-of-type) {
margin-bottom: 10px;
}
.list03 li:before {
display: block;
position: absolute;
top: 9px;
left: 0;
width: 7px;
height: 7px;
background-color: var(--main-color);
border: 1px solid var(--main-color);
border-radius: 100%;
content: "";
}
.list03 li i {
margin-right: 8px;
}
.list03 p:last-of-type {
margin-bottom: 0;
}
/*----------三角----------*/
.list04 {
}
.list04 li {
position: relative;
margin-bottom: 12px;
padding-left: 15px;
list-style-type: none;
}
.list04 li:before {
position: absolute;
top: 7px;
left: 0;
width: 0;
height: 0;
border: 5px solid transparent;
border-left: 5px solid var(--main-color);
content: "";
}
.list04 p:last-of-type {
margin-bottom: 0;
}
/*----------矢印----------*/
.list05 {
}
.list05 li {
position: relative;
padding-left: 15px;
list-style-type: none;
margin-bottom: 8px;
}
.list05 li:before {
position: absolute;
left: 0;
top: 10px;
height: 5px;
width: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-color: transparent;
border-top: 1px solid var(--text-color);
border-right: 1px solid var(--text-color);
content: "";
}
.list05 p:last-of-type {
margin-bottom: 0;
}
/*----------点と背景色（一行ずつ表示）----------*/
.list06_w100 {
padding: 35px 40px 25px;
background-color: var(--bg-color);
}
.list06_w100 li {
position: relative;
display: table;
margin-bottom: 12px;
padding-left: 1em;
list-style-type: none;
line-height: 1.6;
}
.list06_w100 li:before {
display: block;
content: "";
position: absolute;
top: 9px;
left: 0;
width: 7px;
height: 7px;
background-color: var(--main-color);
border: 1px solid var(--main-color);
border-radius: 100%;
}
.list06_w100 p:last-of-type {
margin-bottom: 0;
}
/*----------点と背景色----------*/
.list06 {
padding: 35px 40px 25px;
background-color: var(--bg-color);
display: flex;
flex-wrap: wrap;
}
.list06:after {
display: block;
clear: both;
content: "";
}
.list06 li {
position: relative;
float: left;
margin-bottom: 12px;
padding-left: 1em;
padding-right: 5%;
list-style-type: none;
line-height: 1.6;
}
.list06 li:before {
display: block;
content: "";
position: absolute;
top: 9px;
left: 0;
width: 7px;
height: 7px;
background-color: var(--main-color);
border: 1px solid var(--main-color);
border-radius: 100%;
}
.list06 p:last-of-type {
margin-bottom: 0;
}
/*----------点と枠----------*/
.list07 {
padding: 20px;
border: 3px solid var(--bg-color);
display: flex;
flex-wrap: wrap;
}
.list07:after {
display: block;
clear: both;
content: "";
}
.list07 li {
position: relative;
padding-left: 1em;
margin: 0 2em 0.5em 0;
list-style-type: none;
}
.list07 li:last-child {
margin-bottom: 0;
}
.list07 li:before {
display: block;
content: "";
position: absolute;
top: 13px;
left: 0;
width: 3px;
height: 3px;
background-color: var(--main-color);
border: 1px solid var(--main-color);
border-radius: 100%;
}
.list07 li i {
margin-right: 8px;
}
.list07 p:last-of-type {
margin-bottom: 0;
}
/*----------チェックと背景色（一行ずつ表示）----------*/
.list08_w100 {
padding: 35px 50px 25px;
background-color: var(--bg-color);
}
.list08_w100:after {
display: block;
clear: both;
content: "";
}
.list08_w100 li {
position: relative;
padding-bottom: 2px;
margin: 0 25px 16px 25px;
border-bottom: 1px dotted #ccc;
list-style-type: none;
line-height: 1.5;
}
.list08_w100 li:before {
display: block;
position: absolute;
left: -24px;
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: 900;
color: var(--main-color);
}
.list08_w100 p:last-of-type {
margin-bottom: 0;
}
/*----------チェックと背景色（文章幅に合わせる）----------*/
.list08 {
display: flex;
flex-wrap: wrap;
padding: 35px 50px 25px;
background-color: var(--bg-color);
}
.list08:after {
display: block;
clear: both;
content: "";
}
.list08 li {
position: relative;
display: inline-block;
margin: 0 25px 16px 25px;
border-bottom: 1px dotted #ccc;
list-style-type: none;
line-height: 1.5;
}
.list08 li:before {
display: block;
position: absolute;
left: -23px;
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: 900;
color: var(--main-color);
}
.list08 p:last-of-type {
margin-bottom: 0;
}
/*----------チェックなし----------*/
.list08_nocheck {
padding: 20px;
background-color: var(--bg-color);
display: flex;
flex-wrap: wrap;
}
.list08_nocheck:after {
display: block;
clear: both;
content: "";
}
.list08_nocheck li {
position: relative;
margin: 0 10px 10px 10px;
border-bottom: 1px dotted var(--border-color);
list-style-type: none;
display: inline-block;
}
.list08_nocheck p:last-of-type {
margin-bottom: 0;
}
/*----------チェックなし----------*/
.list_kakomi {
display: flex;
flex-wrap: wrap;
}
.list_kakomi:after {
display: block;
clear: both;
content: "";
}
.list_kakomi li {
position: relative;
margin: 0 5px 10px 0;
padding: 3px 8px;
border: 1px solid var(--border-color);
list-style-type: none;
display: inline-block;
}
.list_kakomi p:last-of-type {
margin-bottom: 0;
}
/*----------注釈リスト----------*/
.list12 li {
position: relative;
margin-bottom: 5px;
color: #777;
font-size: 95%;
padding-left: 1em;
text-indent: -1em;
}
.list12 li::before {
content: "※";
display: inline;
}
/*----------番号付き----------*/
ol {
margin: 0;
padding: 0;
counter-reset: number;
list-style: none;
}
ol li {
margin: 0 0 10px 30px;
list-style-type: none;
position: relative;
}
ol li:last-of-type {
margin: 0 0 0 30px;
}
ol li:before {
padding: 2px 8px;
border-radius: 2%;
color: var(--sub-color);
counter-increment: number;
content: counter(number) ".";
font-weight: bold;
left: -30px;
position: absolute;
}
/*----------番号（四角の背景色付き）----------*/
ol.square {
margin: 0;
padding: 0;
counter-reset: number;
list-style: none;
}
ol.square li {
margin-bottom: 12px;
list-style-type: none;
}
ol.square li:before {
padding: 2px 8px;
background: var(--sub-color);
color: #fff;
counter-increment: number;
content: counter(number);
}
/*----------番号（四角の背景色付き）----------*/
ol.circle {
margin: 0;
padding: 0;
counter-reset: number;
list-style: none;
}
ol.circle li {
margin-bottom: 12px;
list-style-type: none;
}
ol.circle li:before {
margin: 0 0 8px;
line-height: 1.6;
width: 25px;
height: 25px;
text-align: center;
padding: unset;
background: var(--sub-color);
border-radius: 50%;
color: #fff;
counter-increment: number;
content: counter(number);
}
/*----------何かの装飾----------*/
.top_flex_box {
display: flex;
justify-content: space-between;
}
.top_flex_box > div {
flex: 1;
padding: 0 35px;
}
/*----------引用----------*/
blockquote {
padding: 20px;
background: #f0f0f0;
color: #555;
font-style: italic;
font-size: 85%;
}
blockquote p:last-of-type {
margin-bottom: 0;
}
/*--------------------アンカーリンンク--------------------*/
/*4個並び*/
.ank01 {
margin: 0 auto 100px;
}
.ank01 li {
display: table;
position: relative;
float: left;
width: 24%;
height: 66px;
margin-bottom: 1.5%;
margin-left: 1.33%;
line-height: 1.4;
}
.ank01 li:nth-child(1),
.ank01 li:nth-child(5),
.ank01 li:nth-child(9) {
margin-left: 0;
}
.ank01 li a {
display: table-cell;
padding: 12px 5px 15px;
border: 1px solid var(--main-color);
font-weight: bold;
font-size: 13px;
color: var(--main-color);
text-align: center;
vertical-align: middle;
transition: 0.1s ease-in-out;
}
.ank01 li a:hover {
background-color: var(--main-color);
color: #fff;
}
.ank01 li i {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 4px;
margin: auto;
}
/*-------------------layout--------------------*/
/* --------------layout共通タイトル-------------- */
.layout_tit {
font-size: 19px;
line-height: 1.5;
font-weight: bold;
color: #596369;
}
.layout_tit em {
margin-right: 10px;
color: var(--sub-color);
font-family: "Times New Roman", Times, serif;
font-size: 30px;
font-weight: normal;
}
.layout_tit span {
margin-right: 10px;
color: var(--sub-color);
font-family: "Times New Roman", Times, serif;
font-size: 30px;
font-weight: normal;
}
/* layout小タイトル */
.layout_tit_02 {
font-size: 18px;
font-weight: bold;
line-height: 1.4;
color: var(--main-color);
}
/* 1つ並びのレイアウト。画像は無し、左にタイトル、右に文章 */
.layout01 {
position: relative;
margin: 0 0 15px;
}
.layout01:before {
position: absolute;
top: -3px;
left: 0;
width: 100%;
border-top: 1px solid var(--border-color);
content: "";
}
.layout01 .layout01_box {
position: relative;
display: flex;
flex-wrap: wrap;
margin: 5px 0;
}
.layout01 .layout01_box:after {
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
border-top: 1px solid var(--border-color);
content: "";
}
.layout01 .layout01_title {
width: 30%;
background-color: var(--bg-color);
letter-spacing: 0.1em;
color: var(--main-color);
font-weight: bold;
font-size: 120%;
text-align: center;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
line-height: 1.5;
}
.layout01 .layout01_title em {
display: block;
width: 100%;
line-height: 1;
font-family: "Times New Roman", Times, serif;
font-size: 150%;
font-weight: normal;
color: var(--sub-color);
}
.layout01 .layout01_title span {
font-size: 75%;
}
.layout01 .layout01_text {
width: 70%;
padding: 20px 3%;
background-color: #fff;
}
/* 2つ並びのレイアウト。最初(dt)にタイトル、画像がその下(dd)、画像の下に文章 */
.layout02 {
margin: 0 0 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.layout02::after {
display: block;
clear: both;
content: "";
}
.layout02 .layout02_box {
width: 49%;
margin: 0 2% 0 0;
margin-bottom: 25px;
padding: 4%;
background-color: var(--bg-color);
}
.layout02 .layout02_box:nth-child(even) {
margin-right: 0;
}
.layout02 .layout02_box .layout02_text {
margin-bottom: 10px;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
text-align: center;
color: var(--main-color);
}
.layout02 .layout02_text img {
width: 100%;
height: auto;
}
/* 1つ並びのレイアウト。画像が左、右にタイトル、タイトル下に文章 */
.layout03 {
margin: 0 0 15px;
}
.layout03 .layout03_box {
display: flex;
margin-bottom: 20px;
background-color: var(--bg-color);
padding: 2%;
}
.layout03 .layout03_title {
width: 27%;
padding: 2%;
background-color: #fff;
text-align: center;
display: flex;
align-items: center;
line-height: 1.5;
}
.layout03 .layout03_title p {
margin-bottom: 0;
}
.layout03 .layout03_title img {
width: 100%;
height: auto;
}
.layout03 .layout03_text {
width: 73%;
padding: 1% 3%;
}
/* 1つ並びのレイアウト。画像が左、右にタイトル、タイトル下に文章、タイトルと文章のエリア(dd)は背景色が別の色 */
.layout04 {
margin: 0 0 15px;
}
.layout04 .layout04_box {
display: flex;
margin-bottom: 20px;
background-color: var(--bg-color);
padding: 2%;
}
.layout04 .layout04_title {
width: 27%;
padding-right: 2%;
display: flex;
align-items: center;
}
.layout04 .layout04_title p {
margin-bottom: 0;
}
.layout04 .layout04_title img {
width: 100%;
}
.layout04 .layout04_text {
width: 73%;
padding: 3%;
background-color: #fff;
}
/* 1つ並びで3列に区切られたレイアウト。画像が左、画像の下にタイトル、右に文章 */
.layout05 {
margin: 0 0 15px;
}
.layout05 .layout05_box {
display: flex;
margin-bottom: 20px;
background-color: var(--bg-color);
padding: 2%;
}
.layout05 .layout05_title {
padding: 2%;
width: 25%;
background-color: #fff;
text-align: center;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.layout05 .layout05_title p {
margin-bottom: 0;
}
.layout05 .layout05_title img {
width: 100%;
padding-bottom: 10px;
height: auto;
display: block;
}
.layout05 .layout05_text1 {
padding: 1% 3%;
vertical-align: top;
}
.layout05 .layout05_text1:nth-child(2) {
width: 40%;
}
.layout05 .layout05_text1:nth-child(3) {
width: 40%;
border-left: 1px solid var(--border-color);
}
.layout05 .layout05_title h4 {
font-size: 18px;
font-weight: bold;
}
.layout05 .layout05_text1 h5 {
font-weight: bold;
margin: 0 0 5px;
}
.layout05 .layout05_text1 h4 em,
.layout05 .layout05_text1 h5 em {
margin-right: 10px;
color: var(--sub-color);
font-family: "Times New Roman", Times, serif;
font-size: 30px;
font-weight: normal;
}
.layout05_text1 ul {
margin-bottom: 15px;
}
.layout05 ul.list03 li{
margin: 0;
}
/* 1つ並びで3列に区切られたレイアウト。左がタイトル、真ん中と右に文章 */
.layout06 {
margin: 0 0 15px;
}
.layout06 .layout06_box {
display: flex;
padding-bottom: 5px;
position: relative;
}
.layout06 .layout06_box:before {
position: absolute;
top: -3px;
left: 0;
width: 100%;
border-top: 1px solid var(--border-color);
content: "";
}
.layout06 .layout06_box:last-child:after {
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
border-top: 1px solid var(--border-color);
content: "";
}
.layout06 .layout06_title {
width: 30%;
padding: 0 3%;
background-color: var(--bg-color);
letter-spacing: 0.1em;
color: var(--main-color);
font-weight: bold;
font-size: 120%;
text-align: center;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
line-height: 1.5;
}
.layout06 .layout06_title h4 {
letter-spacing: 0.1em;
color: var(--main-color);
font-weight: bold;
text-align: center;
}
.layout06 .layout06_box:last-of-type {
padding: 0;
}
/* 数字 */
.layout06 .layout06_title em {
display: block;
width: 100%;
line-height: 1;
margin: 0 8px;
font-family: "Times New Roman", Times, serif;
font-size: 170%;
font-weight: normal;
color: var(--sub-color);
}
.layout06 .layout06_text1 {
padding: 2% 3%;
vertical-align: top;
}
.layout06 .layout06_text1:nth-child(2) {
width: 35%;
}
.layout06 .layout06_text1:nth-child(3) {
width: 35%;
border-left: 1px solid #e2e2e2;
}
.layout06 .layout06_text1 h5 {
font-size: 18px;
font-weight: bold;
margin: 0 0 5px;
}
/* 3つ並びのレイアウト。 */
.layout07 {
margin: 0 0 15px;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
}
.layout07::after {
display: block;
clear: both;
content: "";
}
.layout07 .layout07_box {
width: 32%;
margin-right: 2%;
margin-bottom: 2%;
padding: 3%;
border-radius: 10px;
background-color: var(--bg-color);
}
.layout07 .layout07_box:nth-child(3n) {
margin-right: 0;
}
.layout07 .layout07_box .layout07_title {
margin-bottom: 7px;
padding-bottom: 7px;
border-bottom: 1px dashed #ddd;
font-size: 17px;
font-weight: bold;
text-align: center;
}
.layout07 .layout07_box .layout07_title em {
margin-right: 8px;
font-size: 24px;
font-family: 'Quicksand', sans-serif;
}
.layout07 .layout07_box .layout07_text {
line-height: 1.5;
}
/* 3つ並びのレイアウト。矢印付き */
.layout08 {
margin: 0 0 15px;
display: flex;
align-content: flex-start;
flex-wrap: wrap;
}
.layout08 .layout08_box {
position: relative;
width: 100%;
margin-bottom: 25px;
padding: 3%;
border-radius: 10px;
background-color: var(--bg-color);
}
.layout08 .layout08_box:last-child {
margin-right: 0;
}
.layout08 .layout08_box::before {
position: absolute;
right: 0px;
left: 0;
height: 7px;
width: 7px;
transform: rotate(135deg);
background-color: transparent;
border-top: 2px solid var(--main-color);
border-right: 2px solid var(--main-color);
content: "";
bottom: -16px;
margin: auto;
}
.layout08 .layout08_box:last-child::before {
display: none;
}
.layout08 .layout08_box .layout08_title {
margin-bottom: 7px;
padding-bottom: 7px;
border-bottom: 1px dashed #ddd;
font-size: 17px;
font-weight: bold;
text-align: center;
}
.layout08 .layout08_box .layout08_title em {
margin-right: 8px;
font-size: 24px;
font-family: 'Quicksand', sans-serif;
}
.layout08 .layout08_box .layout08_text {
line-height: 1.5;
}
/* 1つ並びで2列に区切られたレイアウト。画像が左、画像の下にタイトル、右に文章 */
.layout09 {
margin: 0 0 15px;
}
.layout09 .layout09_box {
display: flex;
margin-bottom: 20px;
background: var(--bg-color);
padding: 2%;
}
.layout09 .layout09_title {
padding: 2%;
width: 27%;
background-color: #fff;
text-align: center;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.layout09 .layout09_title p {
margin-bottom: 0;
}
.layout09 .layout09_title img {
width: 100%;
padding-bottom: 10px;
height: auto;
display: block;
}
.layout09 .layout09_text1 {
padding: 1% 3%;
width: 73%;
vertical-align: top;
}
.layout09 .layout09_title h4 {
font-size: 18px;
font-weight: bold;
}
.layout09 .layout09_text1 h5 {
font-weight: bold;
margin: 0 0 5px;
}
.layout09 .layout09_text1 h4 em,
.layout09 .layout09_text1 h5 em {
margin-right: 10px;
color: var(--sub-color);
font-family: "Times New Roman", Times, serif;
font-size: 30px;
font-weight: normal;
}
.layout09_text1 ul {
margin-bottom: 15px;
}
.layout09 ul.list03 li {
margin: 0;
}
/* layout10 */
.layout10 {
position: relative;
}
.layout10 .flow_box {
position: relative;
display: flex;
padding: 32px;
background: #fff;
}
.layout10 .flow_box::before {
position: absolute;
top: 0;
bottom: 0;
left: 60px;
margin: auto;
width: 6px;
height: calc(100% - 4px);
border-right: #bbb dotted 6px;
box-sizing: border-box;
content: "";
}
.layout10 .flow_box:first-child::before {
top: 32px;
bottom: auto;
height: calc(100% - 34px);
}
.layout10 .flow_box:last-child::before {
top: 2px;
bottom: auto;
height: 86px;
}
.layout10 .flow_box:nth-child(even) {
background: #e9edef;
}
.layout10 .flow_box:nth-child(odd) {
background: #f7f8f9;
}
.layout10 .flow_box .number {
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
width: 60px;
height: 60px;
margin-bottom: 0;
margin-right: 4%;
background: var(--main-color);
border-radius: 50%;
font-family: "magister", sans-serif;
font-weight: 400;
font-size: 28px;
line-height: 1;
color: #fff;
}
.layout10 .flow_box .layout10_box {
width: 90%;
}
.layout10 .flow_box .layout10_box .layout_tit {
margin-bottom: 8px;
}
.layout10 .flow_box .layout10_text .title {
background: var(--main-color);
margin-top: 24px;
padding: 12px 18px;
border-radius: 6px;
color: #fff;
line-height: 1;
font-size: 18px;
letter-spacing: 0.12em;
}
.layout10 .flow_box .layout10_text .title span {
position: relative;
}
.layout10 .flow_box .layout10_text .title span::after {
display: inline-block;
content: "|";
margin: 0 12px;
}
.layout10 .flow_box .layout10_text .title2 {
padding-bottom: 2px;
padding-top: 16px;
margin-bottom: 10px;
font-size: 18px;
border-bottom: 1px dashed rgba(35, 24, 21, 0.4);
}
.layout10 .flow_box .layout10_text .list03 {
margin-top: 8px;
}
.layout10 .flow_box .layout10_text .list03 li {
margin-bottom: 0;
}
.layout10 .flow_box .layout10_text .list03 li::before {
background-color: var(--main-color);
border: 1px solid var(--main-color);
}
.layout10 .flow_box .list06 {
padding: 25px 40px 15px;
background-color: #fff;
}
.layout10 .flow_box .layout10_text .list_column {
display: flex;
flex-wrap: wrap;
}
.layout10 .flow_box .layout10_text .list_column li {
margin-right: 5%;
}
/* layout11 */
.layout11 {
position: relative;
}
.layout11_box {
padding: 8px;
background: var(--bg-color);
}
[class^="layout11_image"] p {
margin-bottom: 0;
}
[class^="layout11_image"] img {
width: 100%;
height: auto;
}
[class^="layout11_text"] {
margin-top: 8px;
}
[class^="layout11_text"] dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
[class^="layout11_text"] dl dt {
background: var(--main-color);
color: #fff;
font-weight: bold;
text-align: center;
padding: 12px;
border: 1px solid var(--main-color);
width: 20%;
margin-bottom: 2px;
}
[class^="layout11_text"] dl dd {
padding: 12px;
background: #fff;
border: 1px solid var(--main-color);
width: 80%;
margin-bottom: 2px;
}
[class^="layout11_text"] .desc {
background: #fff;
border: 1px solid var(--main-color);
padding: 16px;
}
[class^="layout11_text"] .desc p {
margin-bottom: 0;
}
/* layout11 ver.1 */
.layout11_text01 dl dt {
margin-left: 0;
}
/* layout11 ver.2 */
.layout11_image02 {
display: flex;
justify-content: space-between;
}
.layout11_image02 span {
position: relative;
display: block;
width: 47%;
}
.layout11_image02 span:last-child::before {
position: absolute;
top: 0;
bottom: 0;
left: -42px;
margin: auto;
display: flex;
align-items: center;
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 24px;
color: var(--main-color);
line-height: 1;
}
.layout11_text02 dl {
width: 100%;
}
.layout11_text02 dl dt {
margin-left: 2px;
margin-bottom: 2px;
width: 15%;
}
.layout11_text02 dl dt:nth-of-type(odd) {
margin-left: 0;
}
.layout11_text02 dl dd {
width: calc(35% - 1px);
}
.layout11_text02 .desc {
width: 100%;
}
/*注意書き*/
.caution {
background: var(--bg-color);
display: block;
position: relative;
padding: 25px;
border-radius: 15px;
}
.caution .pop {
width: 55px;
height: 55px;
background: var(--main-color);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -15px;
left: -5px;
border-radius: 50%;
font-size: 25px;
font-weight: 600;
color: #fff;
z-index: 2;
}
.caution .pop::before {
position: absolute;
width: 15px;
height: 20px;
bottom: -3px;
right: -3px;
margin: auto;
-webkit-clip-path: polygon(100% 85%, 40% 0, 0 53%);
clip-path: polygon(100% 85%, 40% 0, 0 53%);
background-color: var(--main-color);
z-index: 1;
content: "";
}
.caution p:nth-of-type(1) {
font-size: 18px;
margin: 0 0 15px;
padding: 0 0 0 40px;
font-weight: 600;
color: var(--main-color);
}
/*--------------------table--------------------*/
td img.aligncenter, th img.aligncenter {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: 0 !important;
}
table {
text-align: initial;
}
table th p,
table td p {
margin: 0 !important;
}
/*テーブル1*/
.tb01 {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.tb01 tr {
border-bottom: 1px solid var(--border-color);
display: flex;
vertical-align: middle;
}
.tb01 th {
width: 25%;
padding: 14px 0;
line-height: 1.5;
font-weight: normal;
text-align: left;
}
.tb01 td {
padding: 14px 0;
font-weight: normal;
line-height: 1.5;
text-align: left;
}
.tb01 th + td {
width: 75%;
}
/*診療時間*/
.tb02_tit {
border-bottom: none;
font-size: 18px;
text-align: center;
width: 100%;
border: 1px var(--border-color) solid;
padding: 8px;
margin-bottom: 10px;
}
.sche_bg {
position: relative;
padding: 29px 35px 19px 31px;
background-color: #9aa7ae;
}
.sche_bg::before {
position: absolute;
left: 20px;
top: 140px;
width: calc(100% - 40px);
height: 80px;
background-color: #c5a6a5;
content: "";
}
.tb02 {
position: relative;
width: 100%;
border-spacing: 0;
color: #fff;
}
.tb02 th,
.tb02 td {
vertical-align: middle;
line-height: 73px;
}
.tb02 tr:first-of-type th,
.tb02 tr:first-of-type td {
line-height: 42px;
}
.tb02 th {
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.12em;
width: 29%;
}
.tb02 td {
text-align: center;
}
.schedule_note {
margin-top: 27px;
line-height: 2.1;
letter-spacing: 0.12em;
}
.kyushinbi {
margin-bottom: 21px;
font-weight: bold;
color: #859299;
}
/*本文中のテーブル*/
.tb03,
.body_single .tb03 {
width: 100%;
border-spacing: 1px;
border-collapse: collapse;
background-color: var(--border-color);
}
.tb03 tr.head th,
.tb03 tr.head td {
background-color: #dde4e7;
}
.tb03 td,
.tb03 th {
line-height: 1.5;
padding: 18px 20px;
}
.tb03 th {
font-weight: bold;
text-align: left;
background-color: var(--bg-color);
}
.tb03 th span {
font-size: 13px;
}
.tb03 td {
background-color: #fff;
text-align: center;
}
/*==================================================================================================================================
*フリーエリア（上・下）
==================================================================================================================================*/
.freearea_img {
max-width: 408px;
margin: 0 auto 15px;
text-align: center;
}
/*==================================================================================================================================
*医師紹介
==================================================================================================================================*/
.doctor_greeting_flex {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
margin-bottom: 60px;
}
.doctor_greeting_flex .text {
width: 670px;
padding: 30px 0 0;
margin-bottom: 0;
line-height: 2;
letter-spacing: 0.12em;
}
.doctor_greeting_flex .text_w100 {
width: 100%;
margin-bottom: 0;
}
.text_w100 > p:not(:last-child) {
margin-bottom: 22px;
}
.doctor_img {
width: 470px;
}
@media print, screen and (min-width: 641px) {
.doctor_greeting_center .doctor_img {
width: 100%;
max-width: 280px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
/*----------キャッチコピー----------*/
.doctor_catch {
margin-bottom: 50px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 24px;
letter-spacing: 0.12em;
line-height: 1.5;
color: var(--main-color);
}
/*----------署名----------*/
.doctor_name {
margin-top: 40px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 20px;
letter-spacing: 0.12em;
line-height: 1.75;
}
.text .doctor_name p {
margin-bottom: 0;
}
.doctor_name .name span {
margin-left: 24px;
font-size: 24px;
letter-spacing: 0.12em;
}
/*----------経歴・資格----------*/
.doctor_carr_box {
width: 100%;
padding: 30px 60px 40px;
box-sizing: border-box;
background: var(--bg-color);
margin-bottom: 15px;
}
.doctor_carr_wrap .doctor_carr_box:nth-of-type(2) {
display: flex;
justify-content: space-between;
}
.doctor_carr_wrap .doctor_carr_box:nth-of-type(2) div {
width: 46%;
}
.contents_bg .doctor_carr_box h3 {
margin-bottom: 14px;
background-color: #fff;
}
.doctor_carr_box .text p {
margin-bottom: 0;
}
/*----------院長紹介その他----------*/
.sec_doctor_etc {
width: 100%;
box-sizing: border-box;
}
/*==================================================================================================================================
*診療案内
==================================================================================================================================*/
.sec_medical .text {
margin-bottom: 0;
}
.medical_list > li {
margin-bottom: 80px;
}
.medical_list .btn01 a {
margin-bottom: 0;
}
/*==================================================================================================================================
*病名から探す
==================================================================================================================================*/
@media print, screen and (min-width: 641px) {
.disease_flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
flex-direction: row-reverse;
}
.disease_flex .disease_flex_left {
width: 30%;
}
.disease_flex .disease_flex_right {
width: 68%;
}
}
.disease_flex_right .text {
margin: 0;
}
/*==================================================================================================================================
*症状から探す
==================================================================================================================================*/
@media print, screen and (min-width: 641px) {
.symptom_flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
flex-direction: row-reverse;
}
.symptom_flex .symptom_flex_left {
width: 30%;
}
.symptom_flex .symptom_flex_right {
width: 68%;
}
}
.symptom_flex_right .text {
margin: 0;
}
/*==================================================================================================================================
*症例
==================================================================================================================================*/
/*-------------------一覧ページ-------------------*/
@media print, screen and (min-width: 641px) {
.case_flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
flex-direction: row-reverse;
}
.case_flex .case_flex_left {
width: 30%;
}
.case_flex .case_flex_right {
width: 68%;
}
}
.case_flex_right .text {
margin: 0;
}
/*-------------------コンテンツページ-------------------*/
.box_case {
padding: 10px;
background: var(--bg-color);
}
.box_case .title {
background: var(--main-color);
margin-bottom: 10px;
}
.box_case .title h2 {
text-align: center;
color: #fff;
font-size: 140%;
padding: 8px;
margin: 0;
border: none;
}
.box_case .title h2::after {
display: none;
}
.box_case .images {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box_case .images > p {
margin-top: 5px;
width: 100%;
line-height: 1.3;
}
.box_case .images .before, .box_case .images .after {
position: relative;
width: calc(50% - 5px);
}
.box_case .images .before h3, .box_case .images .after h3 {
text-align: center;
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
width: 100%;
color: #fff;
border-bottom: none;
padding: 24px 5px 8px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}
.box_case .images ul {
position: relative;
z-index: 0;
}
.box_case .images ul li:not(:first-child) {
display: none;
}
.box_case .images ul li a {
overflow: hidden;
display: block;
}
.box_case .images ul li a img {
width: 100%;
height: 250px;
-o-object-position: center;
object-position: center;
-o-object-fit: cover;
object-fit: cover;
transition: 0.2s;
}
.box_case .images ul li a:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.box_case dl {
display: flex;
gap: 2px;
margin-bottom: 2px;
background: var(--main-color);
}
.box_case dl dt {
align-self: center;
color: #fff;
font-weight: bold;
padding: 10px;
text-align: center;
background: var(--main-color);
width: 20%;
}
.box_case dl dd {
background: #fff;
border: 1px solid var(--main-color);
padding: 10px;
width: 80%;
}
.box_case .caption {
padding: 20px 10px;
border: 1px solid var(--main-color);
background: #fff;
}
.box_case .caption p {
margin-bottom: 0;
}
/*==================================================================================================================================
*医院案内
==================================================================================================================================*/
.clinic_desc {
width: 100%;
}
.clinic_desc dl {
display: flex;
}
.clinic_desc dl dt {
width: 20%;
padding: 20px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.12em;
border-bottom: 1px solid var(--border-color);
}
.clinic_desc dl dd {
width: 80%;
padding: 20px;
line-height: 1.5;
border-bottom: 1px solid var(--border-color);
}
.clinic_facilities_wrap {
display: flex;
flex-wrap: wrap;
gap: 0 2%;
}
.facilities_item {
width: 32%;
margin-bottom: 15px;
background: var(--bg-color);
}
.facilities_item_img {
overflow: hidden;
background-color: var(--bg-color);
}
.facilities_item_img img {
display: block;
width: auto;
max-height: 260px;
margin: 0 auto;
}
.facilities_item dd {
padding: 15px 20px;
}
.contents_bg .facilities_item dd h3 {
margin: 0 auto 10px;
padding: 0 0 0;
font-size: 20px;
text-align: center;
background-color: transparent;
}
.contents_bg .facilities_item dd h3::before,
.contents_bg .facilities_item dd h3::after {
display: none;
}
.clinic_desc a {
color: var(--text-color);
}
/*==================================================================================================================================
*診療案内
==================================================================================================================================*/
/*.medical_mtit {
margin-bottom: 50px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 34px;
letter-spacing: 0.12em;
line-height: 1.4;
text-align: center;
color: #596369;
}
.medical_mtit::after {
display: block;
margin-top: 8px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 15px;
letter-spacing: 0.12em;
line-height: 1.4;
color: #596369;
opacity: 0.6;
}
.medical_mtit.gastroscope::after {
content: "Gastroscope";
}*/
.medical_list01 > li {
margin-bottom: 18px;
}
.medical_list01 > li .tit {
position: relative;
padding-left: 16px;
font-weight: bold;
font-size: 120%;
line-height: 1.5;
letter-spacing: 0.1em;
color: var(--main-color);
}
.medical_list01 > li .tit:before {
position: absolute;
display: block;
top: 9px;
left: 0;
width: 9px;
height: 9px;
background-color: var(--main-color);
border: 1px solid var(--main-color);
border-radius: 100%;
content: "";
}
/*==================================================================================================================================
*料金表
==================================================================================================================================*/
.price_wrap > .price_wrap:last-child {
margin-bottom: 0;
}
.price_mb60:not(:last-child) {
margin-bottom: 60px;
}
/*基本形-----------------------*/
.price_table {
width: 100%;
}
.price_table:not(:last-child) {
margin-bottom: 15px;
}
.price_table th {
text-align: center;
background-color: var(--bg-color);
}
.price_table tr td:nth-child(1) {
width: 75%;
}
.price_table tr td:nth-child(2) {
text-align: center;
width: 25%;
}
.price_table th,
.price_table td {
padding: 15px;
border: 1px solid var(--border-color);
vertical-align: middle;
}
/* ---------- 料金表テンプレート ---------- */
.price_wrap h2 {
margin-bottom: 30px;
}
.middle_category_wrap {
margin-bottom: 50px;
}
.middle_category_wrap:last-of-type {
margin-bottom: 0;
}
/* アコーディオン表示の場合 */
.middle_category_wrap .accordion_title {
position: relative;
width: 100%;
margin-bottom: 20px;
padding: 15px;
cursor: pointer;
transition: background-color .3s;
border-bottom: none;
background: var(--bg-color);
font-weight: bold;
}
.middle_category_wrap .accordion_title:hover {
background: var(--sub-color);
}
.middle_category_wrap .accordion_title::before {
content: "";
position: absolute;
top: 50%;
right: 25px;
width: 15px;
height: 2px;
transform: rotate(90deg);
background: var(--main-color);
transition: all .3s ease-in-out;
}
.middle_category_wrap .accordion_title::after {
content: "";
position: absolute;
top: 50%;
right: 25px;
width: 15px;
height: 2px;
background: var(--main-color);
transition: all .2s ease-in-out;
}
.middle_category_wrap .accordion_title.open::before {
transform: rotate(180deg);
}
.middle_category_wrap .accordion_title.open::after {
opacity: 0;
}
.middle_category_wrap .accordion_title span {
display: block;
padding-right: 50px;
}
/* アコーディオン表示の場合ここまで */
.middle_category_wrap .price_hosoku_up {
margin-bottom: 20px;
}
.price_table_temp {
width: 100%;
}
.price_table_temp:not(:last-child) {
border-collapse: collapse;
margin-bottom: 15px;
}
.price_table_temp th {
text-align: center;
background-color: var(--bg-color);
}
.price_table_temp tr td:nth-child(1) {
width: 25%;
text-align: center;
}
.price_table_temp tr td:nth-child(2) {
width: 60%;
}
.price_table_temp tr td:nth-child(3) {
width: 15%;
white-space: nowrap;
text-align: center;
}
.price_table_temp tr:has(td:nth-child(2):last-child) td {
width: 50%;
text-align: center;
}
.price_table_temp tr td[colspan="2"],
.price_table_temp tr td[colspan="3"] {
text-align: left;
background: var(--main-color);
color: #fff;
font-weight: bold;
line-height: 1;
padding: 10px 15px;
}
.price_table_temp th,
.price_table_temp td {
padding: 15px;
border: 1px solid var(--border-color);
vertical-align: middle;
}
/* ---------- 料金表テンプレートここまで ---------- */
/*==================================================================================================================================
*FAQ
==================================================================================================================================*/
.faq_wrap dl {
margin-bottom: 10px;
}
.faq_wrap dl dt {
position: relative;
margin: 0;
padding: 15px;
background-color: var(--bg-color);
font-weight: bold;
cursor: pointer;
transition: background-color .3s;
}
.faq_wrap dl dt:hover,
.faq_wrap dl dt:active,
.faq_wrap dl dt.open {
background-color: #f0dee1;
}
.faq_wrap dl dt::before {
content: "";
position: absolute;
top: 50%;
right: 25px;
width: 15px;
height: 2px;
/*縦線に*/
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
background: var(--border-color);
transition: all 0.3s ease-in-out;
}
.faq_wrap dl dt::after {
content: "";
position: absolute;
top: 50%;
right: 25px;
/*横線*/
width: 15px;
height: 2px;
background: var(--border-color);
transition: all 0.2s ease-in-out;
}
.faq_wrap dl dt.open::before {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.faq_wrap dl dt.open::after {
opacity: 0;
}
.faq_wrap dl dd {
padding: 15px;
}
.faq_wrap dl dt .faq_q {
position: relative;
padding: 0 35px 0 35px;
}
.faq_wrap dl dt .faq_q:before {
position: absolute;
top: 0;
left: 0;
margin-right: 7px;
line-height: 1;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
font-size: 28px;
color: var(--main-color);
content: "Q.";
}
.open .faq_wrap dl dt .faq_q:before {
color: #fff;
}
.faq_wrap dl dd .faq_a {
position: relative;
padding: 0 0 0 35px;
}
.faq_wrap dl dd .faq_a:before {
position: absolute;
top: 0;
left: 0;
margin-right: 7px;
line-height: 1;
font-family: "Times New Roman", Times, serif;
font-weight: normal;
font-size: 28px;
color: var(--sub-color);
content: "A.";
}
/*==================================================================================================================================
*求人案内
==================================================================================================================================*/
.recruit_freearea_inner .text {
margin: 0;
}
.recruit_freearea_inner:not(:last-child) {
margin-bottom: 30px;
}
.recruit_img {
max-width: 408px;
}
@media print, screen and (min-width: 641px) {
.recruit_img {
float: right;
margin-left: 40px;
margin-top: 7px;
margin-bottom: 15px;
}
}
.recruit_table {
width: 100%;
}
.recruit_table:not(:last-child) {
margin-bottom: 30px;
}
.recruit_table th,
.recruit_table td {
padding: 15px;
border: 1px solid var(--border-color);
vertical-align: middle;
}
.recruit_table th {
width: 20%;
text-align: center;
background-color: var(--bg-color);
}
.sec_recruit .btn01 {
text-align: center;
}
.sec_recruit .btn01 a {
margin-top: 0;
margin-bottom: 0;
}
/*==================================================================================================================================
*アクセス
==================================================================================================================================*/
.access_map {
position: relative;
text-align: center;
margin-bottom: 20px;
}
.access_map iframe {
width: 100%;
height: 100%;
}
.access_map_flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.access_map_flex_item {
width: 49%;
}
.access_add {
display: flex;
justify-content: space-between;
}
.access_add:not(:last-child) {
margin-bottom: 30px;
}
.access_add dt {
width: 14%;
}
.access_add dd {
width: 86%;
}
.access_add dt i {
color: var(--main-color);
margin-right: 0.5em;
}
.access_desc {
padding: 25px 50px 35px;
color: #fff;
background-color: #9aa7ae;
}
.access_desc .list02 li {
padding: 12px 0;
border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
}
.access_route ul {
counter-reset: count 0;
}
@media print, screen and (min-width: 641px) {
.access_route ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.access_route ul li {
width: 48%;
}
.access_route ul li:not(:nth-child(-n+2)) {
margin-top: 25px;
}
}
.access_route ul .access_route_titNone::before,
.access_route ul li .title {
font-size: 120%;
font-weight: bold;
}
.access_route ul .access_route_titNone::before,
.access_route ul li .title::before {
display: block;
content: counter(count);
counter-increment: count 1;
color: #fff;
line-height: 1;
padding: 4px 8px;
background: var(--sub-color);
}
.access_route ul .access_route_titNone::before {
width: fit-content;
margin-bottom: calc(.6em - 8px + 15px);/*(title line-height) - (before padding上下) + (title margin-bottom)*/
}
.access_route ul li .title {
position: relative;
line-height: 1.6;
padding-left: 2em;
margin-bottom: 15px;
}
.access_route ul li .title::before {
position: absolute;
left: 0;
top: 0;
}
.access_route .text:last-child {
margin: 0;
}
.access_route ul li img {
width: auto;
max-height: 250px;
display: block;
margin-left: auto;
margin-right: auto;
}
.access_route ul li img:not(:last-child) {
margin-bottom: 15px;
}
/*==================================================================================================================================
*お知らせ
==================================================================================================================================*/
.news_list_wrap .news_item {
border-bottom: 1px solid var(--border-color);
}
.news_info {
padding: 50px 0;
}
.news_list_wrap .news_item:first-of-type .news_info {
padding: 0 0 50px;
}
/* 日付とカテゴリ名 */
.news_desc {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.news_date {
margin-right: 1em;
}
.news_cate em {
text-align: center;
display: inline-block;
padding: 0 10px;
min-width: 110px;
}
/* タイトル */
.news_info h2 {
background: none;
border-bottom: none;
margin: 15px 0 10px;
font-size: 140%;
line-height: 1.5;
}
.news_info h2:before,
.news_info h2:after {
display: none;
}
/*==================================================================================================================================
*ブログ
==================================================================================================================================*/
/*----------ブログ共通パーツ----------*/
/* 日付・カテゴリ */
.blog_category i {
display: inline-block;
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 5px;
color: var(--main-color);
}
.blog_category li a {
color: var(--text-color);
}
@media (hover: hover) {
.blog_category li a:hover {
color: var(--main-color);
}
}
/* ページャー */
.pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-left: 10px;
margin-top: 40px;
}
.page-numbers {
min-width: 2.5em;
aspect-ratio: 1 / 1;
overflow: hidden;
display: flex;
flex-flow: column;
justify-content: center;
text-align: center;
border-radius: 50%;
font-size: 15px;
font-weight: bold;
line-height: 1;
letter-spacing: .1em;
margin-right: 10px;
margin-bottom: 10px;
}
.page-numbers.current,
a.page-numbers:hover {
background: var(--main-color);
color: #fff;
}
a.page-numbers {
text-decoration: none;
transition: all 0.2s linear;
background: var(--bg-color);
color: var(--main-color);
}
.pager a:active {
box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.55);
}
/*----------記事一覧----------*/
@media print, screen and (min-width: 641px) {
.blog_list {
display: flex;
flex-flow: wrap;
gap: 30px 18px;
}
}
.blog_list_item {
border-top: 4px solid var(--main-color);/*記事ボックスの上の色*/
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
padding: 20px 15px 25px;
background-color: #fff;
}
@media print, screen and (min-width: 641px) {
.blog_list_item {
display: flex;
flex-flow: column;
width: calc((100% - 36px) / 3);
}
}
/* サムネイル */
.blog_list_item_thum {
text-align: center;
margin-bottom: 15px;
}
@media print, screen and (min-width: 641px) {
.blog_list_item_thum {
max-height: 150px;
aspect-ratio: 240 / 150;
}
}
@media print, screen and (min-width: 641px) {
.blog_list_item_thum img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
/* タイトル */
.blog_list_item_tit {
/* reset css */
display: block;
position: static;
left: auto;
right: auto;
top: auto;
bottom: auto;
padding: 0;
border: none;
background: none;
opacity: 1;
width: auto;
height: auto;
border-radius: 0;
text-align: left;
color: inherit;
overflow: visible;
letter-spacing: inherit;
text-shadow: none;
box-shadow: none;
font-size: 18px;
line-height: 1.6;
margin: 0 0 15px;
}
.blog_list_item_tit::before,
.blog_list_item_tit::after {
display: none;
}
.blog_list_item .blog_category {
font-size: 87%;
line-height: 1.5;
margin-bottom: 40px;
}
.blog_list_item .blog_category li:not(:last-child) {
margin-bottom: 5px;
}
.blog_list_item_text {
margin-bottom: 15px;
}
.blog_list_item > .btn01 {
margin-top: auto;
text-align: center;
}
.blog_list_item > .btn01 a {
margin: 0;
}
/*----------記事----------*/
/* サムネイル */
.blog_single_thum {
margin: 0 auto 30px;
text-align: center;
}
.blog_single_thum img {
width: auto;
max-height: 700px;
}
/* 目次 */
#toc_container {
margin-bottom: 50px;
padding: 25px 30px;
background: var(--bg-color);
}
.toc_title {
font-size: 120%;
font-weight: bold;
line-height: 1.6;
padding-bottom: 10px;
border-bottom: 2px solid var(--main-color);
margin-bottom: 15px;
}
.toc_list {
font-size: 93%;
}
.toc_list a {
color: var(--text-color);
}
@media (hover: hover) {
.toc_list a:hover {
color: var(--sub-color);
}
}
.toc_list > li:not(:last-child) {
margin-bottom: 10px;
}
.toc_list > li ul {
padding-left: 10px;
}
.toc_list > li ul li a::before {
content: "-";
display: inline-block;
margin-right: 5px;
}
/*--------------------ブログ エディター用--------------------*/
.alignleft {
display: inline;
float: left;
}
.alignright {
display: inline;
float: right;
}
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
blockquote.alignleft,
.wp-caption.alignleft,
img.alignleft {
margin: 0.4em 1.6em 1.6em 0;
}
blockquote.alignright,
.wp-caption.alignright,
img.alignright {
margin: 0.4em 0 1.6em 1.6em;
}
blockquote.aligncenter,
.wp-caption.aligncenter,
img.aligncenter {
clear: both;
margin-top: 0.4em;
margin-bottom: 1.6em;
}
.wp-caption.alignleft,
.wp-caption.alignright,
.wp-caption.aligncenter {
margin-bottom: 1.2em;
}
/*整形済みテキスト*/
.blog_single_text pre {
font-weight: 400;
margin-top: 20px;
padding: 20px;
background-color: var(--bg-color);
color: #7F7F7F;
overflow: auto;
}
/*引用*/
.blog_single_text blockquote {
position: relative;
color: #3F3F3F;
margin-top: 20px;
padding: 20px 20px 20px 70px;
background-color: var(--bg-color);
}
.blog_single_text blockquote::before {
position: absolute;
top: 20px;
left: 20px;
font-family: "icomoon";
content: "\e909";
font-size: 3rem;
color: #D9D9D9;
}
.blog_single_text blockquote *:first-child {
margin-top: 0;
}
/*ライン*/
.blog_single_text hr {
margin-top: 40px;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
/*----------サイド----------*/
.side_blog_item:not(:last-child) {
border-bottom: 1px solid var(--border-color);
}
.side_blog_item a {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 10px;
padding-top: 15px;
padding-bottom: 15px;
}
.side_blog_item_thum {
width: 100px;
height: 100px;
overflow: hidden;
}
.side_blog_item_thum img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (hover: hover) {
.side_blog_item_thum img {
transition: transform .2s;
}
.side_blog_item a:hover .side_blog_item_thum img {
transform: scale(1.1);
}
}
.side_blog_item_title {
flex: 1;
line-height: 1.8;
}
@media print, screen and (min-width: 641px) {
.side_blog_item_title {
font-size: 93%;
}
}
/*==================================================================================================================================
MPクラウド
==================================================================================================================================*/
.sec_mpcloud {
padding: 0 !important;
}
#mpcloud_schedule {
width: 220px;
position: fixed;
bottom: 15px;
left: 22px;
background-color: rgba(255, 255, 255, 1);
z-index: 999999999;
border-radius: 15px;
}
#mpcloud_schedule section {
border-radius: 15px;
box-shadow: 0 8px 22px 8px rgba(0, 0, 0, 0.1);
}
.shcedule_box {
box-shadow: 0 8px 22px 8px rgba(0, 0, 0, .1);
font-size: 14px;
letter-spacing: .06em;
border-radius: 15px;
}
.shcedule_title {
font-size: 16px;
font-weight: 600;
border-bottom: 2px solid var(--border-color);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-align: center;
padding: 3px 0 0;
}
.shcedule_title i {
position: relative;
top: -2px;
right: -25px;
font-style: normal;
font-size: 12px;
cursor: pointer;
}
.schedule_time {
margin: 8px 0 0 0;
}
.schedule_time dt {
font-weight: bold;
}
.shcedule_box dt {
background: var(--border-color);
text-align: center;
}
.shcedule_box dd {
height: auto;
vertical-align: top;
text-align: center;
}
.shcedule_today {
padding: 10px 16px;
}
.schedule_comment {
border-top: 1px solid var(--border-color);
padding: 8px 12px;
font-size: 14px;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
/*==================================================================================================================================
*RIBON
==================================================================================================================================*/
.ribon-link {
background-color: #fa6565;
background-image: url(images/ribon_banner.png);
background-repeat: no-repeat;
background-size: contain;
border-radius: 5px;
color: #fff;
display: inline-block;
height: auto;
max-width: 300px;
text-decoration: none;
transition: 0.3s;
width: 100%;
}
.ribon-link::before {
content: "";
display: block;
padding-top: 36%;
}
.ribon-link:hover {
opacity: 0.75;
transition: 0.3s;
}
/*==================================================================================================================================
*お問い合わせ
==================================================================================================================================*/
.contact {
margin: 0 auto;
width: 700px;
}
.contact:not(:last-child) {
margin-bottom: 50px;
}
.contact form {
margin: 50px 0 0;
}
.contact p {
margin: 15px 0 0;
}
.contact label {
margin: 30px 0 0;
font-size: 16px;
font-weight: bold;
color: var(--main-color);
}
.contact input,
.contact textarea {
width: 100%;
background: var(--bg-color);
border: 1px solid var(--border-color);
padding: 16px 8px;
}
.contact input[type=submit] {
color: var(--main-color);
border: 1px solid var(--main-color);
width: 50%;
margin: 0 auto;
display: block;
background: #fff;
padding: 10px;
cursor: pointer;
}
/*==================================================================================================================================
*common
==================================================================================================================================*/
.sp{display:none!important}.pc_inline{display:inline!important}.pc_table,.sp_flex,.sp_inline,.sp_inline_ip,.sp_table{display:none!important}.w010par{width:10%}.w020par{width:20%}.w025par{width:25%}.w050par{width:50%}.w075par{width:75%}.w100par{width:100%}.w010{width:10px!important}.w020{width:20px!important}.w030{width:30px!important}.w040{width:40px!important}.w050{width:50px!important}.w060{width:60px!important}.w070{width:70px!important}.w080{width:5pc!important}.w090{width:90px!important}.w100{width:75pt!important}.w110{width:110px!important}.w120{width:90pt!important}.w130{width:130px!important}.w140{width:140px!important}.w150{width:150px!important}.w160{width:10pc!important}.w170{width:170px!important}.w180{width:180px!important}.w190{width:190px!important}.w200{width:200px!important}.w210{width:210px!important}.w220{width:220px!important}.w230{width:230px!important}.w240{width:15pc!important}.w250{width:250px!important}.w255{width:255px!important}.w260{width:260px!important}.w270{width:270px!important}.w280{width:280px!important}.w290{width:290px!important}.w300{width:300px!important}.w305{width:305px!important}.w310{width:310px!important}.w320{width:20pc!important}.w330{width:330px!important}.w340{width:340px!important}.w350{width:350px!important}.w360{width:360px!important}.w365{width:365px!important}.w370{width:370px!important}.w380{width:380px!important}.w390{width:390px!important}.w400,.w410{width:25pc!important}.w415{width:415px!important}.w420{width:420px!important}.w430{width:430px!important}.w435{width:435px!important}.w440{width:440px!important}.w450{width:450px!important}.w460{width:460px!important}.w470{width:470px!important}.w480{width:5in!important}.w490{width:490px!important}.w500{width:500px!important}.w510{width:510px!important}.w520{width:520px!important}.w530{width:530px!important}.w540{width:540px!important}.w550{width:550px!important}.w560{width:35pc!important}.w570{width:570px!important}.w580{width:580px!important}.w590{width:590px!important}.w600{width:600px!important}.w610{width:610px!important}.w620{width:620px!important}.w630{width:630px!important}.w640{width:40pc!important}.w650{width:650px!important}.w660{width:660px!important}.w670{width:670px!important}.w680{width:680px!important}.w690{width:690px!important}.w700{width:700px!important}.w710{width:710px!important}.w720{width:45pc!important}.w730{width:730px!important}.w740{width:740px!important}.w750{width:750px!important}.w760{width:760px!important}.w765{width:765px!important}.w960{width:60pc!important}.w980{width:980px!important}.h030{height:30px!important}.h180{height:180px!important}.h190{height:190px!important}.h200{height:200px!important}.h240{height:15pc!important}.h250{height:250px!important}.h280{height:280px!important}.h300{height:300px!important}.h350{height:350px!important}.mt00{margin-top:0!important}.mt01{margin-top:1px!important}.mt02{margin-top:2px!important}.mt03{margin-top:3px!important}.mt04{margin-top:4px!important}.mt05{margin-top:5px!important}.mt06{margin-top:6px!important}.mt07{margin-top:7px!important}.mt08{margin-top:8px!important}.mt09{margin-top:9px!important}.mt10{margin-top:10px!important}.mt15{margin-top:15px!important}.mt20{margin-top:20px!important}.mt25{margin-top:25px!important}.mt30{margin-top:30px!important}.mt35{margin-top:35px!important}.mt40{margin-top:40px!important}.mt45{margin-top:45px!important}.mt50{margin-top:50px!important}.mt60{margin-top:60px!important}.mt70{margin-top:70px!important}.mt80{margin-top:5pc!important}.mt90{margin-top:90px!important}.mt100{margin-top:75pt!important}.mt110{margin-top:110px!important}.mt120{margin-top:90pt!important}.mr00{margin-right:0!important}.mr01{margin-right:1px!important}.mr02{margin-right:2px!important}.mr03{margin-right:3px!important}.mr04{margin-right:4px!important}.mr05{margin-right:5px!important}.mr06{margin-right:6px!important}.mr07{margin-right:7px!important}.mr08{margin-right:8px!important}.mr09{margin-right:9px!important}.mr10{margin-right:10px!important}.mr15{margin-right:15px!important}.mr20{margin-right:20px!important}.mr25{margin-right:25px!important}.mr30{margin-right:30px!important}.mr35{margin-right:35px!important}.mr40{margin-right:40px!important}.mr45{margin-right:45px!important}.mr50{margin-right:50px!important}.mr60{margin-right:60px!important}.mr70{margin-right:70px!important}.mr80{margin-right:5pc!important}.mr90{margin-right:90px!important}.mr100{margin-right:75pt!important}.mb00{margin-bottom:0!important}.mb01{margin-bottom:1px!important}.mb02{margin-bottom:2px!important}.mb03{margin-bottom:3px!important}.mb04{margin-bottom:4px!important}.mb05{margin-bottom:5px!important}.mb06{margin-bottom:6px!important}.mb07{margin-bottom:7px!important}.mb08{margin-bottom:8px!important}.mb09{margin-bottom:9px!important}.mb10{margin-bottom:10px!important}.mb15{margin-bottom:15px!important}.mb20{margin-bottom:20px!important}.mb25{margin-bottom:25px!important}.mb30{margin-bottom:30px!important}.mb35{margin-bottom:35px!important}.mb40{margin-bottom:40px!important}.mb45{margin-bottom:45px!important}.mb50{margin-bottom:50px!important}.mb60{margin-bottom:60px!important}.mb70{margin-bottom:70px!important}.mb80{margin-bottom:5pc!important}.mb90{margin-bottom:90px!important}.mb100{margin-bottom:75pt!important}.ml00{margin-left:0!important}.ml01{margin-left:1px!important}.ml02{margin-left:2px!important}.ml03{margin-left:3px!important}.ml04{margin-left:4px!important}.ml05{margin-left:5px!important}.ml06{margin-left:6px!important}.ml07{margin-left:7px!important}.ml08{margin-left:8px!important}.ml09{margin-left:9px!important}.ml10{margin-left:10px!important}.ml12{margin-left:9pt!important}.ml15{margin-left:15px!important}.ml20{margin-left:20px!important}.ml25{margin-left:25px!important}.ml30{margin-left:30px!important}.ml35{margin-left:35px!important}.ml40{margin-left:40px!important}.ml45{margin-left:45px!important}.ml50{margin-left:50px!important}.ml60{margin-left:60px!important}.ml70{margin-left:70px!important}.ml80{margin-left:5pc!important}.ml90{margin-left:90px!important}.ml100{margin-left:75pt!important}.ml140{margin-left:140px!important}.ml160{margin-left:10pc!important}.ma10{margin:10px!important}.ma15{margin:15px!important}.ma_auto{margin-left:auto;margin-right:auto}.pt00{padding-top:0!important}.pt01{padding-top:1px!important}.pt02{padding-top:2px!important}.pt03{padding-top:3px!important}.pt04{padding-top:4px!important}.pt05{padding-top:5px!important}.pt06{padding-top:6px!important}.pt07{padding-top:7px!important}.pt08{padding-top:8px!important}.pt09{padding-top:9px!important}.pt10{padding-top:10px!important}.pt15{padding-top:15px!important}.pt20{padding-top:20px!important}.pt25{padding-top:25px!important}.pt30{padding-top:30px!important}.pt35{padding-top:35px!important}.pt40{padding-top:40px!important}.pt45{padding-top:45px!important}.pt50{padding-top:50px!important}.pt60{padding-top:60px!important}.pt70{padding-top:70px!important}.pt80{padding-top:5pc!important}.pt90{padding-top:90px!important}.pt100{padding-top:75pt!important}.pt120{padding-top:90pt!important}.pr00{padding-right:0!important}.pr01{padding-right:1px!important}.pr02{padding-right:2px!important}.pr03{padding-right:3px!important}.pr04{padding-right:4px!important}.pr05{padding-right:5px!important}.pr06{padding-right:6px!important}.pr07{padding-right:7px!important}.pr08{padding-right:8px!important}.pr09{padding-right:9px!important}.pr10{padding-right:10px!important}.pr15{padding-right:15px!important}.pr20{padding-right:20px!important}.pr25{padding-right:25px!important}.pr30{padding-right:30px!important}.pr35{padding-right:35px!important}.pr40{padding-right:40px!important}.pr45{padding-right:45px!important}.pr50{padding-right:50px!important}.pr60{padding-right:60px!important}.pr70{padding-right:70px!important}.pr80{padding-right:5pc!important}.pr90{padding-right:90px!important}.pr100{padding-right:75pt!important}.pb00{padding-bottom:0!important}.pb01{padding-bottom:1px!important}.pb02{padding-bottom:2px!important}.pb03{padding-bottom:3px!important}.pb04{padding-bottom:4px!important}.pb05{padding-bottom:5px!important}.pb06{padding-bottom:6px!important}.pb07{padding-bottom:7px!important}.pb08{padding-bottom:8px!important}.pb09{padding-bottom:9px!important}.pb10{padding-bottom:10px!important}.pb15{padding-bottom:15px!important}.pb20{padding-bottom:20px!important}.pb25{padding-bottom:25px!important}.pb30{padding-bottom:30px!important}.pb35{padding-bottom:35px!important}.pb40{padding-bottom:40px!important}.pb45{padding-bottom:45px!important}.pb50{padding-bottom:50px!important}.pb60{padding-bottom:60px!important}.pb70{padding-bottom:70px!important}.pb80{padding-bottom:5pc!important}.pb90{padding-bottom:90px!important}.pb100{padding-bottom:75pt!important}.pl00{padding-left:0!important}.pl01{padding-left:1px!important}.pl02{padding-left:2px!important}.pl03{padding-left:3px!important}.pl04{padding-left:4px!important}.pl05{padding-left:5px!important}.pl06{padding-left:6px!important}.pl07{padding-left:7px!important}.pl08{padding-left:8px!important}.pl09{padding-left:9px!important}.pl10{padding-left:10px!important}.pl15{padding-left:15px!important}.pl20{padding-left:20px!important}.pl25{padding-left:25px!important}.pl30{padding-left:30px!important}.pl35{padding-left:35px!important}.pl40{padding-left:40px!important}.pl45{padding-left:45px!important}.pl50{padding-left:50px!important}.pl60{padding-left:60px!important}.pl70{padding-left:70px!important}.pl80{padding-left:5pc!important}.pl90{padding-left:90px!important}.pl100{padding-left:75pt!important}.pa01{padding:1px!important}.pa02{padding:2px!important}.pa03{padding:3px!important}.pa04{padding:4px!important}.pa05{padding:5px!important}.pa10{padding:10px!important}.pa15{padding:15px!important}.fr{float:right!important}.fl{float:left!important}.fr10{float:right;margin-left:10px!important}.fr15,.fr30{float:right;margin-left:15px!important}.fl10{float:left;margin-right:10px!important}.fl15{float:left;margin-right:15px!important}.fl30{float:left;margin-right:30px!important}.txt10{font-size:10px!important}.txt11{font-size:11px!important}.txt12{font-size:9pt!important}.txt13{font-size:13px!important}.txt14{font-size:14px!important}.txt15{font-size:15px!important}.txt16{font-size:1pc!important}.txt17{font-size:17px!important}.txt18{font-size:18px!important}.txt19{font-size:19px!important}.txt20{font-size:20px!important}.txt21{font-size:21px!important}.txt22{font-size:22px!important}.txt23{font-size:23px!important}.txt24{font-size:24px!important}.txt25{font-size:25px!important}.txt26{font-size:26px!important}.txt27{font-size:27px!important}.txt28{font-size:28px!important}.txt29{font-size:29px!important}.txt30{font-size:30px!important}.txt31{font-size:31px!important}.txt32{font-size:2pc!important}.txt33{font-size:33px!important}.txt34{font-size:34px!important}.txt35{font-size:35px!important}.txt36{font-size:36px!important}.txt37{font-size:37px!important}.txt38{font-size:38px!important}.txt39{font-size:39px!important}.txt40{font-size:40px!important}.bold{font-weight:700!important}.left{text-align:left!important}.center{text-align:center!important}.right{text-align:right!important}.clear{clear:both!important}.v_top{vertical-align:top!important}.v_mid{vertical-align:middle!important}.v_btm{vertical-align:bottom!important}.color_red{color:#f33!important;}.color_pink{color:#ed8c96!important;}.color_blue{color:#00408f!important;}.color_green{color:#479f9d!important;}.color_ore{color:#ff8327!important;}.color_yellow{color:#ffeb8b!important;}.color_beige{color:#dac58b!important;}.color_brown{color:#9b8052!important;}.color_navy{color:#1f2774!important;}.color_black{color:#3e3a39!important;}.ls_0{letter-spacing:0!important}.ls_1{letter-spacing:1px!important}.indent{margin-left:1em!important;text-indent:-1em!important}.line_h_2{line-height:2!important}.clearfix:after{display:block;clear:both;content:""}.centering{display:table;margin:auto;text-align:left}
.img_fr {
display: block;
position: relative;
float: right;
margin-left: 30px;
margin-bottom: 1em;
text-align: center;
}
.img_fr img {
border-radius: 3px;
margin-bottom: 7px;
max-width: 360px;
max-height: 300px;
width: auto;
height: auto;
}
.img_fr dd {
padding-left: 20px;
line-height: 1.3;
font-size: 15px;
font-weight: bold;
color: #1F2774;
text-align: left;
}
.img_fl {
display: block;
position: relative;
float: left;
margin-bottom: 1em;
margin-right: 30px;
text-align: center;
}
.img_fl img {
border-radius: 3px;
margin-bottom: 7px;
max-width: 300px;
max-height: 300px;
width: auto;
height: auto;
}
.img_fr + p:after {
display: block;
clear: both;
content: "";
}
.float_clear {
float: none !important;
}
br.sp_inline + br,
br.pc_inline + br,
br.sp + br,
br.pc + br {
display: none;
}
/*==================================================================================================================================
*ホーム
==================================================================================================================================*/
main.front {
overflow: hidden;
}
/*--------------------共通設定--------------------*/
/* inner */
.home_inner {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* h2 */
body.home h2 {
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 28px;
text-align: center;
letter-spacing: 0.1em;
line-height: 1;
color: #555;
}
/* ボタン */
.top_btn a {
position: relative;
display: inline-block;
box-sizing: border-box;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 18px;
letter-spacing: 0.12em;
line-height: 59px;
text-align: center;
color: #fff;
border: 7px solid #b4bbbe;
background-color: #9aa7ae;
transition: ease-in-out 0.3s;
}
.top_btn a:hover {
background-color: #8eaab9;
}
.top_btn a::after {
position: absolute;
right: 41px;
top: calc(50% - 5px);
width: 9px;
height: 10px;
background: url("images/btn_arrow.png") no-repeat center/contain;
content: "";
transition: ease-in-out 0.3s;
}
.top_btn a:hover::after {
right: 27px;
}
/*--------------------メインビジュアル--------------------*/
.home_mv {
position: relative;
height: 1000px;
overflow: hidden;
}
.home_mv .inner {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
margin: 0 auto;
width: 1200px;
}
.home_mv .slider-slide + .inner {
width: 1036px;
}
.slider {
opacity: 0;
transition: opacity 0.3s linear;
}
.slider.slick-initialized {
opacity: 1;
}
/* スライダー フェード */
.slider-fade .slick-slide img {
width: 100%;
height: 1000px;
-o-object-fit: cover;
object-fit: cover;
}
/* キャッチコピー */
.main_catch {
position: absolute;
left: 0;
top: 476px;
width: 100%;
display: flex;
flex-wrap: wrap;
align-content: center;
font-weight: bold;
}
.catchcopy_tit {
display: block;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 30px;
letter-spacing: 0.12em;
line-height: 1;
color: #fff;
text-shadow: 0px 0px 12px rgba(25, 42, 46, 0.8), 0px 0px 25px rgba(25, 42, 46, 1), 0px 0px 32.68px rgba(25, 42, 46, 1);
}
/* RIBONバナー */
.mv_ribon {
position: absolute;
bottom: 150px;
left: 0;
}
/* バナー */
.mv_banner {
position: absolute;
bottom: 30px;
left: 0;
width: 550px;
height: 110px;
}
.mv_banner img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}
.mv_banner a:hover {
opacity: 0.8;
}
.mv_banner .btn01 a {
margin-top: 0;
margin-bottom: 0;
font-size: 120%;
}
/* アイコン */
.mv_icon {
position: absolute;
left: 0;
bottom: 50px;
display: flex;
gap: 10px;
}
/* 新規開院 */
.mv_open {
position: absolute;
right: 0;
bottom: 50px;
}
/* ボタン */
.mv_btn {
position: absolute;
bottom: 275px;
right: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.mv_btn li a {
position: relative;
display: block;
width: 320px;
line-height: 95px;
padding: 0 0 0 32px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 20px;
letter-spacing: 0.12em;
color: #fff;
background-color: rgba(191, 155, 154, 0.9);
transition: ease-in-out 0.3s;
}
.mv_btn li a:hover {
background-color: rgba(191, 155, 154, 0.6);
}
.mv_btn li a::before,
.mv_btn li a::after {
position: absolute;
content: "";
}
.mv_btn li a::before {
left: 5px;
top: 5px;
box-sizing: border-box;
width: calc(100% - 10px);
height: calc(100% - 10px);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.mv_btn li a::after {
right: 30px;
top: calc(50% - 5px);
width: 9px;
height: 10px;
background: url("images/btn_arrow.png") no-repeat center/contain;
transition: ease-in-out 0.3s;
}
.mv_btn li a:hover::after {
right: 15px;
}
/*--------------------お知らせ--------------------*/
.top_news {
position: relative;
z-index: 2;
padding: 127px 0;
}
.top_news::before,
.top_news::after {
position: absolute;
content: "";
}
.top_news::before {
width: 1360px;
height: 566px;
left: calc(50% - 499px);
bottom: -124px;
background: url("images/top_info_bg_silver.jpg") no-repeat center;
}
.top_news::after {
left: 0;
top: 0;
width: calc(50vw + 740px);
height: 100%;
background: #fff;
}
.top_news .home_inner {
position: relative;
z-index: 1;
}
@media print, screen and (min-width: 641px) {
.top_news .home_inner {
display: flex;
justify-content: space-between;
}
.top_news_list,
.top_news_frame {
width: 890px;
}
}
.top_news_head {
padding: 23px 0 0;
}
body.home .top_news_head h2 {
margin-bottom: 63px;
font-size: 24px;
}
.top_news_head h2::before {
display: block;
margin-bottom: 33px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 48px;
letter-spacing: 0.06em;
line-height: 1;
color: #9aa7ae;
content: "NEWS";
}
.top_news .top_btn a {
width: 241px;
padding: 0 0 0 51px;
text-align: left;
}
@media print, screen and (min-width: 641px) {
.top_news_list li a {
display: block;
padding: 30px 26px 29px;
line-height: 39px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.top_news_list li:not(:last-of-type) {
border-bottom: 1px solid #e0e0e0;
}
.top_news_list li a {
color: var(--text-color);
transition: ease-in-out 0.3s;
}
.top_news_list li a:hover {
background-color: #f7f7f7;
}
.top_news_list li a span {
letter-spacing: 0.12em;
margin-right: 21px;
}
.top_news_list li a em {
display: inline-block;
min-width: 101px;
margin-right: 25px;
padding: 0 6px;
font-style: normal;
letter-spacing: 0.12em;
text-align: center;
}
.top_news_list li a strong {
font-weight: 500;
letter-spacing: 0.12em;
transition: ease-in-out 0.3s;
}
.top_news_list li a:hover strong {
color: var(--main-color);
}
/* 医院概要&アクセス */
.top_info {
position: relative;
margin-bottom: 171px;
padding: 243px 0 162px;
}
.top_info::before,
.top_info::after {
position: absolute;
content: "";
}
.top_info::before {
left: calc(50% - 154px);
bottom: -343px;
width: 1114px;
height: 703px;
/* background: url("images/top_info_bg_ph_dmy.jpg") no-repeat center/contain; */
background: url("images/top_info_bg_ph.jpg") no-repeat center/contain;
}
.top_info::after {
left: 0;
bottom: 0;
width: calc(50vw + 692px);
height: 705px;
background: #f8f8f8;
}
@media print, screen and (min-width: 641px) {
.top_info .home_inner {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px 0;
}
.top_info_left,
.top_info_right {
width: 47.5%;
}
}
.top_info .home_inner {
position: relative;
z-index: 1;
}
.top_info .home_inner::before {
position: absolute;
left: -188px;
bottom: 198px;
width: calc(50vw + 788px);
height: 1152px;
background-color: #eceff0;
content: "";
}
.top_info_left,
.top_info_right {
position: relative;
}
.top_info_logo {
margin-bottom: 37px;
text-align: center;
}
.top_info_logo img {
width: auto;
height: 62px;
}
.top_info address {
text-align: center;
font-style: normal;
}
.top_info_add {
margin: 0 45px 39px;
padding-bottom: 31px;
line-height: 1.5;
letter-spacing: 0.12em;
border-bottom: 1px solid #cfd2d3;
}
.top_info_tel {
margin-bottom: 53px;
font-family: "magister", sans-serif;
font-weight: 400;
font-size: 34px;
line-height: 1;
letter-spacing: 0.124em;
text-align: center;
}
.top_info_tel::before {
position: relative;
bottom: -2px;
display: inline-block;
width: 21px;
height: 27px;
margin-right: 10px;
background: url("images/head_tel_icon.svg") no-repeat center/contain;
content: "";
}
.top_info_tel a {
color: #717e85;
}
.top_info_free {
margin-bottom: 20px;
}
.top_info .sche_wrap:not(:last-child) {
margin-bottom: 30px;
}
/* アクセス */
.top_info_right {
padding-top: 19px;
}
.top_access_map {
text-align: center;
}
.top_access_map iframe {
width: 100%;
height: 400px;
}
.top_access > .top_btn {
margin-top: 46px;
text-align: center;
}
.top_access > .top_btn a {
width: 365px;
padding: 0 62px 0 0;
}
/*--------------------ご挨拶--------------------*/
.sec_top_doctor {
position: relative;
margin-bottom: 210px;
padding: 333px 0 0;
}
.sec_top_doctor::before {
position: absolute;
z-index: -1;
left: 0;
top: 0;
width: calc(50vw + 690px);
height: calc(100% - 146px);
background: #eceff0;
content: "";
}
body.home .sec_top_doctor h2 {
margin-bottom: 90px;
padding: 100px 0 0;
background: url("images/top_doctor_tit_en.png") no-repeat center top/412px auto;
}
.top_greeting_flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.top_greeting_flex_img {
width: 470px;
}
.top_greeting_flex_text {
width: 670px;
padding: 18px 0 0;
}
.top_greeting_flex_text .text {
margin-bottom: 41px;
line-height: 2.125;
letter-spacing: 0.12em;
}
.top_greeting_flex_text h3 {
margin-bottom: 54px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 24px;
letter-spacing: 0.12em;
line-height: 1.5;
color: #596369;
}
.top_doctor_name {
margin-bottom: 33px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 20px;
letter-spacing: 0.12em;
line-height: 1.75;
text-align: left;
}
.text .top_doctor_name p {
margin-bottom: 0;
}
.top_doctor_name .name span {
margin-left: 24px;
font-size: 24px;
letter-spacing: 0.12em;
}
.top_greeting_flex_text .top_btn a {
width: 318px;
padding: 0 58px 0 0;
}
/*--------------------当院の特徴--------------------*/
.sec_top_feature {
position: relative;
padding: 193px 0 230px;
background-image: url("images/top_feature_bg01.jpg"), url("images/top_feature_bg02.jpg");
background-repeat: no-repeat, no-repeat;
background-position: center top, center bottom;
background-size: auto auto, auto auto;
}
@media screen and (min-width: 1920px) {
.sec_top_feature {
background-size: 100% 1800px, 100% 2030px;
}
}
.sec_top_feature::before,
.sec_top_feature::after {
position: absolute;
background-color: #f8f8f8;
opacity: 0.5;
content: "";
}
.sec_top_feature::before {
left: 0;
top: 532px;
width: calc(50vw + 732px);
height: 946px;
}
.sec_top_feature::after {
right: 0;
bottom: 454px;
width: calc(50vw + 785px);
height: 1205px;
}
.top_feature_wrap {
position: relative;
z-index: 1;
}
.top_feature_wrap::before {
position: absolute;
left: calc(50% - 50vw);
top: calc(50% - 690px);
width: 100vw;
height: 946px;
background-color: #e1e4e5;
content: "";
}
.sec_top_feature h2 {
margin-bottom: 106px;
padding: 100px 0 0;
background: url("images/top_feature_tit_en.png") no-repeat center top/362px auto;
}
.top_feature_item {
position: relative;
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
margin-bottom: 95px;
padding: 0 34px 0 0;
}
.top_feature_item:last-child {
margin-bottom: 0;
}
.top_feature_wrap.reverse .top_feature_item:nth-child(even) {
flex-direction: row;
padding: 0 0 0 34px;
}
.top_feature_img {
position: relative;
z-index: 1;
width: 550px;
}
.top_feature_img::before {
position: absolute;
right: -34px;
bottom: -91px;
width: 456px;
height: 243px;
background-color: #f0dee1;
opacity: 0.8;
content: "";
}
.top_feature_wrap .top_feature_item:nth-child(even) .top_feature_img::before {
right: auto;
left: -34px;
}
.top_feature_img img {
position: relative;
}
.top_feature_box {
position: relative;
box-sizing: border-box;
width: 850px;
min-height: 478px;
margin-top: 71px;
background-color: #fff;
}
.top_feature_wrap .top_feature_item:nth-child(odd) .top_feature_box {
margin-right: -234px;
padding: 95px 285px 85px 80px;
}
.top_feature_wrap .top_feature_item:nth-child(even) .top_feature_box {
margin-left: -234px;
padding: 95px 80px 85px 285px;
}
.top_feature_num {
position: absolute;
z-index: 1;
top: -44px;
left: 78px;
}
.top_feature_wrap .top_feature_item:nth-child(even) .top_feature_num {
left: 282px;
}
.top_feature_num p {
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 78px;
line-height: 1;
letter-spacing: 0.12em;
color: #9aa7ae;
}
.top_feature_num p em {
font-style: normal;
}
.top_feature_box h3 {
margin-bottom: 33px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 24px;
letter-spacing: 0.12em;
line-height: 1.667;
color: #596369;
}
.top_feature_text p {
line-height: 2.125;
letter-spacing: 0.12em;
}
.top_feature_box .top_btn {
margin-top: 50px;
}
.top_feature_box .top_btn a {
width: 318px;
padding: 0 58px 0 0;
}
.top_feature_box .top_btn a:not(:last-of-type) {
margin-bottom: 10px;
}
/*--------------------診療案内--------------------*/
.sec_top_medical {
position: relative;
padding: 176px 0 233px;
/* background: url("images/top_medical_bg_dmy.jpg") no-repeat center/cover; */
background: url("images/top_medical_bg.jpg") no-repeat center/cover;
}
.sec_top_medical::before {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
clip-path: polygon(81.5% 0, 100% 0, 100% 100%, 38.3% 100%);
background-color: rgba(110, 110, 110, 0.3);
content: "";
}
body.home .sec_top_medical h2 {
margin-bottom: 91px;
padding: 100px 0 0;
color: #555;
background: url("images/top_medical_tit_en.png") no-repeat center top/370px auto;
}
.sec_top_medical .sec_top_medical_flex {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 25px 0;
}
.sec_top_medical_flex .item {
width: 290px;
}
.sec_top_medical_flex .item a {
display: flex;
flex-flow: column wrap;
justify-content: center;
height: 100%;
padding: 30px 0 35px;
color: #fff;
background-color: rgba(119, 119, 119, 0.8);
transition: ease-in-out 0.3s;
}
.sec_top_medical_flex .item a:hover {
background-color: rgba(137, 151, 159, 0.8);
}
.sec_top_medical_flex .item a .item_img {
margin-bottom: 14px;
text-align: center;
}
.sec_top_medical_flex .item a .item_img img {
width: 156px;
height: auto;
}
.sec_top_medical_flex .item a h3 {
margin: 0 auto 7px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 22px;
letter-spacing: 0.12em;
line-height: 1.5;
}
.top_medical_menu_en_title {
font-family: "magister", sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.12em;
line-height: 1.3;
text-align: center;
}
/*--------------------医療コラム--------------------*/
.sec_top_column {
position: relative;
padding: 188px 0 154px;
}
.sec_top_column::before,
.sec_top_column::after {
position: absolute;
height: 462px;
background-repeat: no-repeat;
background-position: center;
content: "";
}
.sec_top_column::before {
left: 0;
top: 0;
width: calc(50vw + 731px);
background-image: url("images/top_column_bg01.jpg");
}
.sec_top_column::after {
right: 0;
bottom: 0;
width: calc(50vw + 775px);
background-image: url("images/top_column_bg02.jpg");
}
@media screen and (min-width: 1920px) {
.sec_top_column::before,
.sec_top_column::after {
background-size: 100% 462px;
}
}
.sec_top_column .home_inner {
position: relative;
z-index: 1;
padding: 105px 0 114px;
}
.sec_top_column .home_inner::before {
position: absolute;
left: -200px;
top: 0;
width: 1600px;
height: 100%;
background-color: #fff;
content: "";
}
.sec_top_column h2 {
position: relative;
margin-bottom: 69px;
padding: 100px 0 0;
background: url("images/top_column_tit_en.png") no-repeat center top/217px auto;
}
.column_list_flex {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px 13.3px;
}
.column_list_flex dl {
width: 290px;
}
.column_list_flex dt {
margin-bottom: 3px;
padding: 0 5px;
font-family: Shippori Mincho, sans-serif;
font-weight: 500;
font-size: 20px;
letter-spacing: 0.12em;
text-align: center;
line-height: 55px;
color: #555;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
background: #eceff0;
}
.column_list_flex dd ul li:not(:last-of-type) {
border-bottom: 1px solid #e1e1e1;
}
.column_list_flex dd ul li a {
position: relative;
display: block;
padding: 21px 30px 23px 16px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 1;
letter-spacing: 0.12em;
color: var(--text-color);
background-color: transparent;
transition: ease-in-out 0.3s;
}
.column_list_flex dd ul li a::before {
position: absolute;
right: 15px;
top: calc(50% - 4px);
width: 6px;
height: 7px;
background: url(images/top_column_arrow.png) no-repeat center / contain;
content: "";
transition: ease-in-out 0.3s;
}
@media (hover: hover) {
.column_list_flex dd ul li a:hover {
background-color: #f8f8f8;
}
.column_list_flex dd ul li a:hover::before {
right: 5px;
}
}
/*--------------------ループスライダー--------------------*/
.clinic_slider {
overflow: hidden;
}
/*==================================================================================================================================
*スマホ設定
==================================================================================================================================*/
/*--------------------*基礎--------------------*/
@media screen and (max-width: 640px) {
html,
body {
min-height: 500px;
}
html {
margin-top: 0 !important;
}
body {
font-size: 14px;
}
body,
#mainvisual,
header,
footer,
nav,
.slider {
min-width: 100%;
}
body.page #mainvisual .inner,
body.archive #mainvisual .inner,
body.single #mainvisual .inner,
body.home #mainvisual .inner,
body.error404 #mainvisual .inner {
max-width: 100%;
}
html #wpadminbar {
display: none;
}
body,
#mainvisual,
.nav_wrap.fixed,
header,
footer {
width: 100%;
min-width: 100%;
}
.nav-open {
overflow: hidden;
}
/*==================================================================================================================================
*ヘッダー（スマホ）
==================================================================================================================================*/
header {
display: none;
}
/*==================================================================================================================================
*ナビゲーション（スマホ）
==================================================================================================================================*/
.nav_wrap {
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
}
.nav_wrap .sp_logo {
width: calc(100% - 55px);
}
.nav_wrap .sp_logo a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 55px;
padding: 5px;
}
.nav_wrap .sp_logo img {
width: auto;
max-height: 100%;
}
/* ------- ハンバーガーボタン ------- */
.btn_menu {
position: relative;
right: 0;
color: #fff;
width: 55px;
background: var(--main-color);
border: none;
padding: 0;
margin: 0;
text-align: center;
transition: right 0.6s cubic-bezier(.19, 1, .22, 1);
}
.btn_menu i {
position: absolute;
left: 0;
right: 0;
bottom: 5px;
margin: auto;
font-style: normal;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.1em;
}
.btn_menu span {
position: absolute;
left: 0;
right: 0;
margin: auto;
display: block;
width: 35px;
height: 2px;
background: #fff;
transition: all 0.6s cubic-bezier(.19, 1, .22, 1);
opacity: 1;
}
.btn_menu span:nth-of-type(1) {
top: 10px;
}
.btn_menu span:nth-of-type(2) {
top: 20px;
}
.btn_menu span:nth-of-type(3) {
top: 30px;
}
/* MENUボタン押下時 */
.btn_menu.active {
right: 80%;
}
.btn_menu.active span:nth-of-type(1) {
top: 20px;
transform: rotate(225deg);
}
.btn_menu.active span:nth-of-type(2) {
opacity: 0;
}
.btn_menu.active span:nth-of-type(3) {
top: 20px;
transform: rotate(-225deg);
}
/* ------- スライドメニュー ------- */
.menu_list_wrap {
width: 80%;
height: 100%;
transition: right 0.6s cubic-bezier(.19, 1, .22, 1);
background: var(--main-color);
line-height: 1.6;
padding: 15px;
position: fixed;
top: 0;
right: -80%;
z-index: 2;
overflow: hidden;
}
/* 展開時 */
body.nav-open .menu_list_wrap {
overflow-y: scroll;
overscroll-behavior-y: none;
right: 0;
}
.menu_list_wrap,
.menu_list_wrap a {
color: #fff;
}
.menu_list_wrap a {
display: block;
}
.nav_menu > li {
border-bottom: 1px solid #fff;
}
.nav_menu > li:first-child {
border-top: 1px solid #fff;
}
.nav_menu .nav_menu_tit,
.nav_menu .parent_menu {
padding: 15px 10px;
}
.nav_menu .nav_menu_en {
display: none!important;
}
/* ------- 下層のあるメニュー ------- */
.nav_menu .child_menu {
padding-left: 15px;
padding-bottom: 10px;
}
.nav_menu .child_menu a {
padding: 5px 10px 5px 1.2em;
text-indent: -1.2em;
}
.nav_menu .child_menu a::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
margin-right: 10px;
}
/* アコーディオンやメガでない時に、展開中に含まれる扉ページのリンクを非表示 */
.nav_menu .nav_slidebtm:not(.is_accord,.is_mega) .child_menu a.sp:first-of-type {
display: none!important;
}
/* ------- アコーディオン&メガメニュー ------- */
.nav_slidebtm.is_accord,
.nav_slidebtm.is_mega {
cursor: pointer;
}
.nav_slidebtm.is_accord .parent_menu,
.nav_slidebtm.is_mega .parent_menu {
position: relative;
}
.nav_slidebtm:not(.is_accord,.is_mega) .parent_menu:not(.nav_menu_tit) {
display: none;
}
.nav_slidebtm.is_accord .parent_menu::before,
.nav_slidebtm.is_mega .parent_menu::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f067";
display: flex;
align-items: center;
width: auto;
height: auto;
border: none;
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.nav_slidebtm.is_accord > a.nav_menu_tit,
.nav_slidebtm.is_mega > a.nav_menu_tit {
display: none;
}
.nav_slidebtm.is_accord .child_menu,
.nav_slidebtm.is_mega .child_menu {
display: none;
opacity: 0;
visibility: hidden;
transition: height 0.5s cubic-bezier(.19, 1, .22, 1);
}
/* アコーディオン&メガメニュー展開時 */
.nav_slidebtm.is_accord.active .parent_menu::before,
.nav_slidebtm.is_mega.active .parent_menu::before {
content: "\f068";
}
.nav_slidebtm.is_accord.active .child_menu,
.nav_slidebtm.is_mega.active .child_menu {
opacity: 1;
visibility: visible;
}
/*WEB予約、問診、問い合わせ*/
.nav_btn > li {
margin-top: 5px;
}
.nav_btn > li a {
color: var(--main-color);
padding: 10px 15px;
background: #fff;
}
.nav_btn > li a i {
letter-spacing: 0;
margin-right: 5px;
}
/*SNSボタン*/
.menu_list_wrap .sp_btn_area {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 20px;
margin-bottom: 20px;
}
.menu_list_wrap .sp_btn_area li {
width: calc((100% - 10px) / 3);
}
.menu_list_wrap .sp_btn_area li a {
background-color: #fff;
color: var(--main-color);
text-align: center;
font-size: 12px;
padding-top: 7px;
padding-bottom: 3px;
border-radius: 5px;
}
.menu_list_wrap .sp_btn_area li a i {
display: block;
font-size: 18px;
letter-spacing: 0;
margin-bottom: 3px;
}
/* 下部固定メニュー */
.sp_under_nav {
display: block;
position: fixed;
bottom: 0;
width: 100%;
background-color: #fff;
z-index: 9;
height: 52px;
}
.sp_under_nav ul {
display: flex;
justify-content: center;
height: 100%;
background: #fff;
}
.sp_under_nav li {
width: -webkit-fill-available;
width: -moz-available;
width: stretch;
box-sizing: border-box;
text-align: center;
}
.sp_under_nav li a {
background-color: var(--sub-color);
}
.sp_under_nav li:nth-child(2) a {
background-color: var(--sub-color);
opacity: 0.8;
}
.sp_under_nav li a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-weight: bold;
color: #fff;
}
.sp_under_nav li a:hover {
color: #fff;
}
.sp_under_nav li a i {
margin-right: 5px;
}
.sp_under_nav li a[href="tel:準備中"] {
pointer-events: none;
padding: 2px 2% 18px;
background: #aaa;
}
.sp_under_nav li a[href="tel:準備中"]::after {
content: "（準備中）";
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
font-size: 90%;
}
/* ナビ展開時の後ろの背景 */
.nav_overlay {
display: none;
opacity: 0;
visibility: hidden;
z-index: 10;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
}
body.nav-open .nav_overlay {
display: block;
opacity: 1;
visibility: visible;
}
/*==================================================================================================================================
*メインビジュアル（スマホ）
==================================================================================================================================*/
/*--------------------ホーム/下層 共通--------------------*/
#mainvisual {
margin-top: 55px;
}
/*--------------------下層--------------------*/
.content_mv {
height: 130px;
}
.content_mv .inner {
width: 100%;
padding: 0 20px;
}
.main_headline .midashi {
font-size: 150%;
}
/*==================================================================================================================================
*フッター（スマホ）
==================================================================================================================================*/
.pagetop {
right: 10px;
bottom: 60px;
left: auto;
margin: auto;
width: 50px;
height: 50px;
}
.pagetop i {
margin-top: 10px;
}
.pagetop:hover {
-webkit-transform: unset;
transform: unset;
}
.footer_inner {
padding-left: 5%;
padding-right: 5%;
padding-bottom: 40px;
}
.footer_info_wrap {
display: block;
}
.footer_info {
padding: 40px 5% 40px;
}
.footer_info_left {
width: 100%;
margin-bottom: 30px;
padding: 0;
}
.footer_info_logo {
margin-bottom: 18px;
}
.footer_info_logo img {
width: 86%;
height: auto;
}
.footer_info_add {
margin: 0 0 20px;
padding-bottom: 16px;
}
.footer_info_tel {
margin-bottom: 30px;
font-size: 30px;
}
.footer_info_tel::before {
width: 17px;
height: 22px;
margin-right: 8px;
}
.footer_info_right {
width: 100%;
}
.footer_info_access_map {
padding: 0 0 0;
}
.foot_map_btn {
margin-top: 20px;
text-align: center;
}
.foot_map_btn a {
width: 100%;
padding: 0 30px 0 0;
font-size: 15px;
line-height: 46px;
border: 4px solid #b4bbbe;
}
.copy {
margin-top: 0;
padding: 7px 0 80px;
}
/*--------------------連携病院--------------------*/
.sec_footer_affiliations {
margin-bottom: 50px;
padding: 45px 0 60px;
}
.sec_footer_affiliations::before {
width: 100vw;
}
.sec_footer_affiliations h2,
body.home .sec_footer_affiliations h2 {
margin-bottom: 25px;
padding: 0 0 0;
font-size: 18px;
text-align: center;
}
.sec_footer_affiliations h2::before,
body.home .sec_footer_affiliations h2::before {
margin-bottom: 15px;
font-size: 36px;
}
.sec_footer_affiliations .footer_inner {
display: block;
padding: 0 5% 0 8%;
}
.footer_affiliations_list {
gap: 10px 0;
width: 100%;
padding: 30px 0 40px;
}
.footer_affiliations_list::before {
left: -5%;
width: 100vw;
}
.footer_affiliations_list li {
width: 100%;
}
.footer_affiliations_list li a span {
font-size: 15px;
letter-spacing: 0.05em;
padding: 16px 10px;
}
.footer_affiliations_list li a span::before {
width: 12px;
height: 12px;
margin-right: 4px;
}
/*--------------------フッターのサイドバナー--------------------*/
.sec_footer_banner {
padding: 50px 0 0;
}
.sec_footer_banner ul li {
text-align: center;
width: 100%;
margin: 0 0 16px;
}
.sec_footer_banner ul li.btn01 {
text-align: center;
}
/*----------フッターのナビ----------*/
.footer_nav .footer_inner {
padding: 30px 5% 35px;
}
.footer_nav_fixed {
display: flex;
flex-wrap: wrap;
gap: 14px 20px;
margin-bottom: 30px;
}
.footer_nav_sub .footer_nav_sub_item:not(:last-of-type) {
margin-bottom: 30px;
}
.footer_nav_fixed li,
.footer_nav_sub_tit {
padding-left: 20px;
background-position: left 3px top 5px;
background-size: 10px 9px;
}
.footer_nav_fixed a,
.footer_nav_sub_tit,
.footer_nav_sub_tit a {
font-size: 15px;
letter-spacing: 0.04em;
color: #fff;
}
.footer_nav_fixed > li {
width: calc((100% - 20px) / 2);
}
.footer_nav_sub_tit {
margin-bottom: 16px;
}
.footer_nav_sub_list {
gap: 14px 20px;
padding-left: 0;
}
.footer_nav_sub_list > li {
width: calc((100% - 20px) / 2);
}
.footer_nav_sub a {
font-size: 14px;
letter-spacing: 0.04em;
}
.footer_sns {
padding-top: 30px;
}
/*==================================================================================================================================
*共通要素（wrapper,box,section等）（スマホ）
==================================================================================================================================*/
.textarea p {
font-size: 14px;
margin-bottom: 1.5em;
}
.contents_bg::before {
width: 100%;
height: 320px;
}
.wrapper {
width: 100%;
display: block;
padding: 15px 0 0;
}
.wrapper main {
width: 100%;
margin-bottom: 40px;
padding: 0 5%;
}
:is(.blog,.single-post,.archive,.category):not(.tax-cate_menu,.tax-cate_disease,.tax-cate_symptom,.tax-cate_case) .wrapper main {
width: 100%;
}
.medical_single {
padding: 0 !important;
}
.body_single p img {
display: block;
margin: 0 auto;
}
/* 扉ページのリンク */
.contentlink li {
max-width: none;
}
/*----------リスト----------*/
.list06,
.list06_w100,
.list08,
.list08_w100 {
padding: 25px 6% 15px;
}
/*----------テーブル----------*/
.sp_w100 th,
.sp_w100 td {
width: 100% !important;
display: block !important;
border-top: none;
}
.sp_w100 tr:first-child th,
.sp_w100 tr:first-child td:first-child {
border-top: 1px solid var(--border-color);
}
.tb01 {
width: 100%;
table-layout: fixed;
white-space: inherit;
}
.tb01 th {
width: 30%;
}
.tb01 th + td {
width: 70%;
}
.sche_bg {
padding: 6px 2% 5px;
}
.sche_bg::before {
left: 2%;
top: 98px;
width: 96%;
height: 50px;
}
.tb02 th,
.tb02 td {
height: 50px;
line-height: 1.4;
}
.tb02 tr:first-of-type th,
.tb02 tr:first-of-type td {
height: 32px;
}
.tb02 th {
width: 35%;
font-size: 13px;
letter-spacing: 0;
}
.schedule_note {
margin-top: 16px;
line-height: 1.8;
letter-spacing: 0.06em;
}
.kyushinbi {
margin-bottom: 8px;
}
.tb03,
.tb03 th {
white-space: inherit;
}
.tb03.w075par {
width: 100%;
}
.tb03.hoken,
.body_single .tb03.hoken {
width: 650px;
}
.tb04,
.tb04 th {
white-space: normal;
}
.tb04 th {
font-size: 13px;
}
.tb04 td,
.tb04 th {
padding: 2%;
}
/*--------------------診療時間表--------------------*/
/*--------------------サイドバー--------------------*/
.side_area {
width: 100%;
margin: auto;
padding: 30px 8% 30px;
}
.side_box:not(:last-child) {
margin-bottom: 30px;
}
/*--------------------パンくず--------------------*/
#breadcrumb {
position: static;
margin: 0 0 30px 0;
font-size: 12px;
}
/*--------------------タイトル--------------------*/
h1 {
position: unset;
padding: 10px 5%;
font-size: 12px;
text-align: center;
background: #fff;
}
.contents_bg h2:not(.blog_list_item_tit):not(.news_title) {
margin-bottom: 30px;
padding: 50px 0 0;
font-size: 23px;
letter-spacing: 0.1em;
background-size: 58px auto;
}
.contents_bg h3 {
margin: 0 4px 18px 0;
padding: 8px 12px 7px 20px;
font-size: 19px;
letter-spacing: 0.08em;
}
.contents_bg h3::before {
top: calc(50% - 4px);
width: 9px;
height: 9px;
}
.contents_bg h3::after {
right: -4px;
bottom: -4px;
border-width: 0 4px 4px 0;
}
/*--------------------レイアウト--------------------*/
.layout_tit {
font-size: 18px;
}
.layout_tit em {
font-size: 24px;
}
/* 1つ並びのレイアウト。画像は無し、左にタイトル、右に文章 */
.layout01 .layout01_box {
display: block;
}
.layout01 .layout01_title {
width: 100%;
padding: 18px 2%;
}
.layout01 .layout01_text {
width: 100%;
padding: 15px 3%;
}
.layout01 .layout01_text img {
width: 70%;
margin: 0 auto;
display: block;
}
/* 2つ並びのレイアウト。最初(dt)にタイトル、画像がその下(dd)、画像の下に文章 */
.layout02 {
display: block;
}
.layout02 .layout02_box {
width: 100%;
}
.layout02 .layout02_box img {
width: 70%;
margin: 0 auto;
display: block;
}
/* 1つ並びのレイアウト。画像が左、右にタイトル、タイトル下に文章 */
.layout03 {
margin: 0 0 15px;
}
.layout03 .layout03_box {
display: block;
}
.layout03 .layout03_title {
width: 100%;
}
.layout03 .layout03_title img {
width: 70%;
margin: 0 auto;
display: block;
padding: 0;
}
.layout03 .layout03_text {
width: 100%;
padding: 15px 3% 1%;
}
/* 1つ並びのレイアウト。画像が左、右にタイトル、タイトル下に文章、タイトルと文章のエリア(dd)は背景色が別の色 */
.layout04 .layout04_box {
display: block;
}
.layout04 .layout04_title {
width: 100%;
padding: 2%;
}
.layout04 .layout04_title img {
width: 70%;
margin: 0 auto;
display: block;
}
.layout04 .layout04_text {
width: 100%;
}
/* 1つ並びで3列に区切られたレイアウト。画像が左、画像の下にタイトル、右に文章 */
.layout05 .layout05_box {
display: block;
}
.layout05 .layout05_title {
width: 100%;
text-align: center;
display: block;
}
.layout05 .layout05_title img {
width: 70%;
margin: 0 auto;
display: block;
}
.layout05 .layout05_text1:nth-child(2) {
width: 100%;
margin-top: 10px;
}
.layout05 .layout05_text1:nth-child(3) {
width: 100%;
border-left: none;
}
/* 1つ並びで3列に区切られたレイアウト。左がタイトル、真ん中と右に文章 */
.layout06 {
margin: 0 0 15px;
}
.layout06 .layout06_box {
display: block;
}
.layout06 .layout06_title {
width: 100%;
padding: 3%;
display: block;
text-align: center;
}
.layout06 .layout06_title img {
width: 70%;
margin: 0 auto;
display: block;
}
/* 数字 */
.layout06 .layout06_text1:nth-child(2) {
width: 100%;
margin-top: 10px;
}
.layout06 .layout06_text1:nth-child(3) {
width: 100%;
border-left: none;
}
/* 3つ並びのレイアウト。 */
.layout07 {
display: block;
}
.layout07 .layout07_box {
display: block;
width: 100%;
}
/* layout9 */
.layout09 .layout09_box {
display: block;
}
.layout09 .layout09_title {
width: 100%;
text-align: center;
display: block;
}
.layout09 .layout09_title img {
width: 70%;
margin: 0 auto;
display: block;
}
.layout09 .layout09_text1 {
width: 100%;
margin-top: 10px;
}
/* layout10 */
.layout10 .flow_box {
justify-content: space-between;
padding: 6%;
}
.layout10 .flow_box::before {
display: none;
}
.layout10 .flow_box .number {
width: 42px;
height: 42px;
margin-right: 0;
font-size: 20px;
}
.layout10 .flow_box .layout10_box {
width: 80%;
}
.layout10 .flow_box .layout10_text .title {
font-size: 14px;
line-height: 1.4;
}
.layout10 .flow_box .layout10_text .title span {
display: block;
padding-bottom: 8px;
font-weight: bold;
}
.layout10 .flow_box .layout10_text .title span::after {
display: none;
}
.layout10 .flow_box .list06 {
padding: 15px 5% 5px;
}
.layout10 .flow_box .list06 li {
margin-bottom: 7px;
}
.course_ablation::before {
display: none;
}
/* layout11 */
[class^="layout11_text"] dl dt,
[class^="layout11_text"] dl dd {
margin-left: 0;
width: 100%;
}
[class^="layout11_text"] dl dt {
margin-bottom: 0;
}
[class^="layout11_text"] dl dd {
margin-bottom: 10px;
}
.layout11_image02 {
flex-wrap: wrap;
}
.layout11_image02 span {
width: 100%;
}
.layout11_image02 span:last-child {
margin-top: 40px;
}
.layout11_image02 span:last-child::before {
top: -32px;
bottom: auto;
left: 0;
right: 0;
justify-content: center;
content: "\f078";
}
/*--------------------診療内容などのコンテンツ--------------------*/
.ank_single {
margin: 0 0 40px;
}
.anklink li {
width: 100%;
}
/*==================================================================================================================================
*フリーエリア（上・下）（スマホ）
==================================================================================================================================*/
/*==================================================================================================================================
*医師紹介（スマホ）
==================================================================================================================================*/
.doctor_greeting_flex {
display: block;
margin-bottom: 30px;
}
.doctor_greeting_flex .text {
width: 100%;
}
.doctor_img {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text > p.doctor_catch {
margin-bottom: 18px;
font-size: 19px;
}
.doctor_name {
margin: 20px 0 0;
font-size: 17px;
text-align: center;
}
.doctor_name .name span {
font-size: 21px;
}
/*----------経歴・資格----------*/
.doctor_carr_wrap {
display: block;
}
.doctor_carr_box {
width: 100%;
padding: 25px 6% 30px;
}
.doctor_carr_box:last-of-type {
margin-bottom: 0;
}
.doctor_carr_wrap .doctor_carr_box:nth-of-type(2) {
display: block;
}
.doctor_carr_wrap .doctor_carr_box:nth-of-type(2) div {
width: 100%;
}
.doctor_carr_wrap .doctor_carr_box:nth-of-type(2) div:not(:last-of-type) {
margin-bottom: 30px;
}
.contents_bg .doctor_carr_box h3 {
margin-bottom: 10px;
}
/*==================================================================================================================================
*診療案内（スマホ）
==================================================================================================================================*/
.faq_wrap dl dt .faq_q {
line-height: 1.6;
}
.faq_wrap dl dt .faq_q:before {
top: -4px;
}
/*==================================================================================================================================
*病名から探す（スマホ）
==================================================================================================================================*/
.disease_flex .disease_flex_left {
margin-bottom: 15px;
text-align: center;
}
/*==================================================================================================================================
*症状から探す（スマホ）
==================================================================================================================================*/
.symptom_flex .symptom_flex_left {
margin-bottom: 15px;
text-align: center;
}
/*==================================================================================================================================
*症例（スマホ）
==================================================================================================================================*/
/*-------------------一覧ページ-------------------*/
.case_flex .case_flex_left {
margin-bottom: 15px;
text-align: center;
}
/*-------------------コンテンツページ-------------------*/
.box_case .images .before {
margin-bottom: 10px;
}
.box_case .images .before, .box_case .images .after {
width: 100%;
}
.box_case .images ul {
width: 100%;
}
.box_case .images ul li a img {
height: 150px;
}
.box_case dl {
flex-wrap: wrap;
}
.box_case dl dt, .box_case dl dd {
width: 100%;
}
/*==================================================================================================================================
*医院案内（スマホ）
==================================================================================================================================*/
.clinic_desc dl {
display: block;
}
.clinic_desc dl dt {
width: 100%;
padding: 15px 0 0;
border-bottom: none;
}
.clinic_desc dl dd {
width: 100%;
padding: 0 0 15px;
}
.clinic_desc dl dd.clinic_sche {
padding-top: 10px;
}
.clinic_facilities_wrap {
display: block;
}
.facilities_item {
width: 100%;
margin-bottom: 20px;
}
.facilities_item_img img {
max-height: 390px;
}
.contents_bg .facilities_item dd h3 {
margin: 0 auto 6px;
font-size: 17px;
}
/*==================================================================================================================================
*料金表（スマホ）
==================================================================================================================================*/
/*----------------診療内容のテーブル----------------*/
.price_table tr td {
display: block;
}
.price_table tr:first-child {
display: none;
}
.price_table tr td:nth-child(1) {
text-align: center;
font-weight: bold;
border-top: none;
background: var(--bg-color);
width: 100%;
}
.price_table tr:nth-child(2) td:nth-child(1) {
border-top: 1px solid var(--border-color);
}
.price_table tr td:nth-child(2) {
border-top: none;
text-align: center;
width: 100%;
}
/* ---------- 料金表テンプレート（スマホ）---------- */
.price_table_temp tr:first-child {
display: none;
}
.price_table_temp tr td:nth-child(1) {
font-weight: bold;
background-color: var(--bg-color);
}
.price_table_temp {
border-bottom: 1px solid var(--border-color);
}
.price_table_temp tr:first-child {
display: none;
}
.price_table_temp th {
border-bottom: none;
}
.price_table_temp td {
display: block;
border-bottom: none;
}
.price_table_temp tr td:nth-child(1) {
width: 100%;
}
.price_table_temp tr td:nth-child(2) {
width: 100%;
}
.price_table_temp tr td:nth-child(3) {
width: 100%;
white-space: normal;
}
.price_table_temp tr:has(td:nth-child(2):last-child) td {
width: 100%;
text-align: center;
}
.price_table_temp tr:has(td:nth-child(3):last-child) td:nth-of-type(2):empty {
display: none;
}
.price_table_temp tr td[colspan="2"],
.price_table_temp tr td[colspan="3"] {
text-align: left;
background: var(--main-color);
color: #fff;
font-weight: bold;
line-height: 1;
padding: 10px 15px;
}
/* ---------- 料金表テンプレート（スマホ）ここまで---------- */
/*==================================================================================================================================
*求人案内（スマホ）
==================================================================================================================================*/
.recruit_img {
margin: 0 auto 15px;
text-align: center;
}
.recruit_table {
border-bottom: 1px solid var(--border-color);
}
.recruit_table th,
.recruit_table td {
width: 100%;
display: block;
border-bottom: none;
}
/*==================================================================================================================================
*アクセス（スマホ）
==================================================================================================================================*/
.access_map_flex {
display: block;
}
.access_map_flex_item {
width: 100%;
}
.access_map_flex_item:not(:last-child) {
margin-bottom: 20px;
}
.access_map iframe {
height: 340px;
}
.access_add {
display: block;
}
.access_add:not(:last-child) {
margin-bottom: 20px;
}
.access_add dt {
width: 100%;
}
.access_add dd {
width: 100%;
}
.access_desc {
padding: 15px 6% 25px;
}
.access_route ul li:not(:last-child) {
margin-bottom: 25px;
}
/*==================================================================================================================================
*お知らせ（スマホ）
==================================================================================================================================*/
.news_info {
padding: 40px 0;
}
.news_list_wrap .news_item:first-of-type .news_info {
padding: 0 0 40px;
}
.news_info h2 {
margin: 10px 0 10px;
font-size: 130%;
}
/*==================================================================================================================================
*ブログ（スマホ）
==================================================================================================================================*/
/*----------記事一覧----------*/
.blog_list_item:not(:last-child) {
margin-bottom: 30px;
}
.blog_list_item .blog_category {
margin-bottom: 20px;
}
/*----------記事----------*/
.blog_single_thum img {
max-height: 320px;
}
/* 目次 */
#toc_container {
padding: 20px;
}
/*==================================================================================================================================
*MPクラウド（スマホ）
==================================================================================================================================*/
#mpcloud_schedule {
bottom: 60px;
}
/*==================================================================================================================================
*お問い合わせ（スマホ）
==================================================================================================================================*/
.contact {
margin: 0 auto;
width: auto;
}
/*--------------------common--------------------*/
.pc{display:none!important}.sp{display:block!important}.pc_inline{display:none!important}.sp_inline{display:inline!important}.pc_table{display:table!important}.sp_table{display:table!important}.sp_flex{display:flex!important}.sp_mb00{margin-bottom:0!important}.sp_mr00{margin-right:0!important}.sp_ml00{margin-left:0!important}.sp_mt00{margin-top:0!important}.sp_pb00{padding-bottom:0!important}.sp_pr00{padding-right:0!important}.sp_pl00{padding-left:0!important}.sp_pt00{padding-top:0!important}.sp_center{text-align:center!important}
.img_fl,
.img_fr {
float: none;
margin: 0 0 15px;
text-align: center;
}
.img_fl img,
.img_fr img {
margin-bottom: 15px;
width: auto;
max-width: 100%;
max-height: 300px;
height: auto;
}
/*==================================================================================================================================
*ホーム（スマホ）
==================================================================================================================================*/
/*--------------------共通設定--------------------*/
body.home,
body.home header,
body.home footer {
overflow-x: visible;
}
/* inner */
.home_inner {
padding-left: 5%;
padding-right: 5%;
}
/* タイトル */
body.home h2 {
font-size: 22px;
}
/* ボタン */
.top_btn a {
font-size: 15px;
line-height: 46px;
border: 4px solid #b4bbbe;
}
/*--------------------メインビジュアル--------------------*/
.home_mv {
height: 360px;
}
.home_mv .inner {
width: 100%;
}
/* キャッチフレーズ */
.main_catch {
left: 0;
/* top: 100px; */
top: 110px;
margin: auto;
width: auto;
max-width: 100%;
padding: 10px;
box-sizing: border-box;
}
.catchcopy_tit {
font-size: 19px;
line-height: 1.8;
}
.catchcopy_tit span {
font-size: 5vw;
}
.catchcopy_text span {
font-size: 3vw;
}
.slide_catch {
left: 0;
top: 140px;
right: 0;
max-width: calc(100% - 20px);
width: auto;
margin: auto;
padding: 10px;
font-size: 5vw;
}
/* スライダー フェード */
.slider-fade .slick-slide img {
width: 100%;
height: 360px;
-o-object-fit: cover;
object-fit: cover;
}
.slick-slider {
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
}
/* アイコン */
.mv_icon {
bottom: 20px;
padding: 0 4%;
}
.mv_icon img{
max-width: 150px;
width: 100%;
}
/*--------------------スマホのみのエリア--------------------*/
.top_sp_only {
padding: 20px 4% 0 !important;
}
.top_sp_only .mv_banner {
text-align: center;
position: static;
width: auto;
height: auto;
}
/* 新規開院 */
.mv_open {
position: relative;
right: auto;
bottom: auto;
width: 80%;
margin: 0 auto 15px;
text-align: center;
}
/* ボタン */
.mv_btn {
position: relative;
bottom: auto;
right: auto;
width: 80%;
margin: 0 auto;
}
.mv_btn li a {
width: 100%;
line-height: 66px;
padding: 0 30px 0 0;
text-align: center;
font-size: 16px;
letter-spacing: 0.08em;
}
/*--------------------お知らせ--------------------*/
.top_news {
width: 97%;
padding: 50px 0 40px;
}
.top_news::before {
width: 90%;
height: 80%;
left: auto;
right: -4%;
bottom: -40px;
}
.top_news::after {
width: 100%;
}
.top_news::before {
width: 80%;
height: 80%;
left: auto;
right: -4%;
bottom: -40px;
}
.top_news_head {
padding: 0 0 0;
}
body.home .top_news_head h2 {
margin-bottom: 20px;
font-size: 18px;
}
.top_news_head h2::before {
margin-bottom: 15px;
font-size: 36px;
}
.top_news_list li a {
display: block;
padding: 13px 0;
}
.top_news_list li a strong {
display: block;
margin-top: 10px;
line-height: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.top_news .top_btn {
text-align: center;
margin-top: 20px;
}
.top_news .top_btn a {
width: 70%;
padding: 0 30px 0 0;
text-align: center;
}
.top_info {
margin-bottom: 40px;
padding: 80px 0 50px;
}
.top_info::before {
left: 10%;
bottom: -70px;
width: 90%;
height: 200px;
background-position: left bottom;
background-size: 100% auto;
}
.top_info .home_inner {
padding: 0 8%;
}
.top_info .home_inner::before {
right: 0;
left: auto;
bottom: 250px;
width: 97%;
height: 100%;
}
.top_info .top_info_left {
margin-bottom: 30px;
}
.top_info_logo {
margin-bottom: 18px;
}
.top_info_logo img {
width: 86%;
height: auto;
}
.top_info_add {
margin: 0 0 20px;
padding-bottom: 16px;
}
.top_info_tel {
margin-bottom: 30px;
font-size: 30px;
}
.top_info_tel::before {
width: 17px;
height: 22px;
margin-right: 8px;
}
.top_info_right {
padding-top: 0;
}
.top_access > .top_btn {
margin-top: 20px;
text-align: center;
}
.top_access > .top_btn a {
width: 100%;
padding: 0 30px 0 0;
}
/*--------------------ご挨拶--------------------*/
.sec_top_doctor {
position: relative;
margin-bottom: 70px;
padding: 80px 0 0;
}
.sec_top_doctor::before {
width: 97%;
height: calc(100% - 110px);
}
.sec_top_doctor .home_inner {
padding-right: 8%;
}
body.home .sec_top_doctor h2 {
margin-bottom: 30px;
padding: 50px 0 0;
background-size: auto 32px;
}
.top_greeting_flex {
display: block;
}
.top_greeting_flex_img {
width: 80%;
margin: 0 auto;
}
.top_greeting_flex_text {
width: 100%;
}
.top_doctor_img {
text-align: center;
}
.top_greeting_flex_text .text {
margin-bottom: 20px;
line-height: 1.9;
}
.top_greeting_flex_text h3 {
margin-bottom: 16px;
font-size: 19px;
}
.top_doctor_name {
margin-bottom: 20px;
font-size: 17px;
text-align: center;
}
.top_doctor_name .name span {
font-size: 21px;
}
.top_greeting_flex_text .top_btn {
text-align: center;
}
.top_greeting_flex_text .top_btn a {
width: 80%;
padding: 0 30px 0 0;
}
/*--------------------当院の特徴--------------------*/
.sec_top_feature {
padding: 50px 0 60px;
background-size: auto 46%, auto 46%;
}
.top_feature_wrap::before {
top: 30%;
height: 30%;
}
body.home .sec_top_feature h2 {
margin-bottom: 30px;
padding: 50px 0 0;
background-size: auto 32px;
}
.top_feature_item {
flex-direction: column;
margin-bottom: 30px;
padding: 0 0 0 0;
}
.top_feature_wrap.reverse .top_feature_item:nth-child(even) {
flex-direction: column;
padding: 0 0 0 0;
}
.top_feature_img {
width: 100%;
padding: 0 3% 0 5%;
}
.top_feature_wrap.reverse .top_feature_item:nth-child(even) .top_feature_img {
padding: 0 5% 0 3%;
}
.top_feature_img::before {
right: 0;
bottom: -14px;
width: 92%;
height: 100%;
}
.top_feature_wrap .top_feature_item:nth-child(even) .top_feature_img::before {
right: auto;
left: 0;
}
.top_feature_box {
width: 96%;
margin-top: -50px;
min-height: initial;
}
.top_feature_wrap .top_feature_item:nth-child(odd) .top_feature_box {
margin-right: 0;
padding: 106px 6% 35px;
}
.top_feature_wrap .top_feature_item:nth-child(even) .top_feature_box {
margin-left: auto;
padding: 106px 6% 35px;
}
.top_feature_box h3 {
margin-bottom: 15px;
font-size: 19px;
letter-spacing: 0.08em;
line-height: 1.5;
}
.top_feature_wrap.reverse .top_feature_item:nth-child(even) .top_feature_num {
position: absolute;
left: 10px;
right: 0;
}
.top_feature_num {
top: 50px;
left: 6%;
}
.top_feature_num p {
font-size: 50px;
}
.top_feature_box .top_btn {
margin-top: 20px;
}
.top_feature_box .top_btn a {
width: 100%;
padding: 0 40px 0 0;
}
/*--------------------診療案内--------------------*/
.sec_top_medical {
padding: 50px 0 60px;
}
body.home .sec_top_medical h2 {
margin-bottom: 30px;
padding: 50px 0 0;
background-size: auto 32px;
}
.sec_top_medical_flex .item {
width: 43.5vw;
}
.sec_top_medical_flex .item a {
padding: 13px 0;
}
.sec_top_medical_flex .item a .item_img {
margin-bottom: 8px;
}
.sec_top_medical_flex .item a .item_img img {
width: 22vw;
}
.sec_top_medical_flex .item a h3 {
margin: 0 auto 2px;
font-size: 4.4vw;
letter-spacing: 0;
}
.top_medical_menu_en_title {
font-size: 2.5vw;
letter-spacing: 0.05em;
}
/*--------------------医療コラム--------------------*/
.sec_top_column {
padding: 40px 0 50px;
}
.sec_top_column::before, .sec_top_column::after {
width: 98%;
height: 200px;
background-size: cover;
}
.sec_top_column .home_inner {
padding: 40px 10% 26px;
}
.sec_top_column .home_inner::before {
left: 2%;
width: 96%;
}
body.home .sec_top_column h2 {
margin-bottom: 30px;
padding: 50px 0 0;
background-size: auto 32px;
}
.column_list_flex {
/* gap: 20px 2%; */
/* 一列にする場合はこちら */
gap: 20px 0;
}
.column_list_flex dl {
/* width: 48%; */
/* 一列にする場合はこちら */
width: 100%;
}
.column_list_flex dt {
font-size: 16px;
line-height: 44px;
}
.column_list_flex dd ul li a {
padding: 16px 30px 18px 3%;
}
/*--------------------ループスライダー--------------------*/
#loop_slider li img {
width: 200px;
}
}
@media screen and (max-width: 320px) {
/*--------------------common--------------------*/
.sp_inline_iP {
display: inline !important;
}
}