@charset "utf-8";
/* CSS Document */
html {
font-size: 16px;
}
body {
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
color:#454545;
font-size:1rem;
font-weight:500;
line-height:1.9;
letter-spacing:0.075em;
text-align:justify;
font-feature-settings : "palt";
/* background-image:url(../images/design03.png);
background-position:center top;
background-repeat:no-repeat; */
/* background-image:url(../images/slice.png);
background-position:center top;
background-repeat:no-repeat;
*/}
a {
color: #5AC2D7;
transition:0.1s ease-in-out;
text-decoration:underline;
}
a:hover {
color:#A3DEA2 ;
text-decoration:none;
}
::selection{
background-color:#5AC2D7;
color:#fff;
}
::-moz-selection{
background-color:#5AC2D7;
color:#fff;
}
body,
#mainvisual .inner,
header,
footer{
min-width:1080px;
}
.anchor{
display: block;
margin-top: -60px;
padding-top: 60px;
}
.anchor2{
display: block;
margin-top: -120px;
padding-top: 120px;
}
#loader-bg{
display:none;
}
/*============================================================================
header
============================================================================*/
header {
width:100%;
background-color:rgba(255,255,255,1);
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
header .inner{
position:relative;
/* min-width:1200px;
max-width:1400px; */
height: inherit;
box-sizing:border-box;
margin:auto;
}
/* ロゴ */
header h1{
position:absolute;
top:26px;
left:60px;
z-index: 99999;
}
header h1,
header img{
width:332px;
height:54px;
transition:0.1s ease-in-out;
}
/*============================================================================
.resv_tel
============================================================================*/
.resv_tel{
}
/*============================================================================
nav
============================================================================*/
nav {
position:absolute;
width:100%;
background-color:rgba(255,255,255,1);
z-index:9999;
}
nav ul{
width:800px;
margin-right:60px;
margin-left: auto;
text-align:right;
}
nav li {
display:inline-block ;
height:inherit;
vertical-align: bottom;
margin-top: -6px;
}
nav li a{
position: relative;
display: block;
padding:36px 11px 32px;
vertical-align:middle;
line-height: 1;
font-size:13px;
font-weight:bold;
text-align:center;
color:#454545;
text-decoration:none;
}
nav li:last-child a{
padding-right:0;
}
nav li a:hover,
nav li.active2 a{
color:#5AC2D7;
}
nav li a span{
position:relative;
top: 4px;
}
/* ホバーのボーダー */
nav li a span::before{
position: absolute;
left: 0;
right:0;
bottom: -7px;
width:100%;
height:2px;
margin:auto;
background-color: #5AC2D7;
transition: 0.15s ease-out;
transform: scaleX(0);
content: "";
z-index: 1;
}
nav li a:hover span::before,
nav li.active2 a span::before{
transform: scaleX(1);
}
.active2 .nav_slidebtm{
}
/* ホバーで出てくるメニューを示すアイコン */
.nav_slidebtm{
}
.nav_slidebtm::before{
position: absolute;
top: 90px;
right: 0;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px solid #5AC2D7;
border-bottom: 1px solid #5AC2D7;
content: "";
left: 0;
margin: auto;
transition: 0.15s ease-out;
}
.active2 .nav_slidebtm::before{
top: 95px;
}
/* ホバーで出てくるメニュー */
nav::before{
position: absolute;
height: 100%;
width: 100%;
background-color: #fff;
content: "";
}
nav ul li .nav_dropdown {
position: absolute;
width:100%;
top: 100%;
left:0%;
background-color:#5AC2D7;
box-shadow: 0 2px 3px rgba(0,0,0,0.05);
transition: 0.2s ease-in-out;
z-index: 1;
opacity: 0;
pointer-events: none;
}
nav ul li .nav_dropdown.nav_open{
top: 100%;
z-index: 1;
opacity: 1;
pointer-events: all;
}
.nav_dropdown_inner {
width:70%;
margin:auto;
padding: 2%;
display:flex;
flex-wrap: wrap;
}
.nav_dropdown_title{
width:14%;
color:#fff;
text-align:left;
}
.nav_dropdown_title span{
display:block;
font-size:24px;
font-weight:bold;
}
.nav_dropdown_title em{
margin-top: -8px;
display: block;
font-family: brandon-grotesque, sans-serif;
font-weight:700;
font-size: 15px;
letter-spacing: 0.125em;
margin-left:2px;
}
.nav_dropdown_toplink{
position:absolute;
top: 71.5%;
margin-left:1px;
}
nav li .nav_dropdown_toplink a{
padding:0;
color:#fff;
text-decoration:underline;
}
.nav_dropdown_toplink a::after {
position: absolute;
top: 0;
right: -10px;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px solid #fff;
border-top: 1px solid #fff;
content: "";
margin: auto;
bottom: 0;
transition: ease-in-out 0.1s;
}
nav ul li .nav_dropdown .nav_dropdown_toplink a:hover{
background-color: inherit;
text-decoration:none;
}
.nav_dropdown_toplink a:hover::after {
right: -15px;
}
.nav_dropdown_list {
width:86%;
display:flex;
flex-wrap: wrap;
}
nav ul li .nav_dropdown_list a{
display:block;
position:relative;
width:23.7%;
padding: 16px 24px;
line-height:1.4;
text-align:left;
font-size: 16px;
text-decoration: none;
box-sizing: border-box;
background-color: #0FB7CE;
color: #fff;
margin: 0.5%;
}
nav ul li .nav_dropdown_list a::before {
position: absolute;
top: 0;
right: 25px;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px solid #fff;
border-top: 1px solid #fff;
content: "";
margin: auto;
bottom: 0;
transition: ease-in-out 0.1s;
}
nav ul li .nav_dropdown a:hover {
background-color: #7BCED9;
}
nav ul li .nav_dropdown a:hover::before {
right: 20px;
}
nav ul li i{
display: block;
position: relative;
top: -5px;
left: 0;
right: 0;
margin: auto;
}
nav ul li i img{
vertical-align:top;
}
.nav_home,
.nav_home img{
width: 30px;
height: 30px;
}
.nav_clinic,
.nav_clinic img{
width: 20px;
height: 37px;
top: -3px;
}
.nav_doctor,
.nav_doctor img{
width: 22px;
height: 33px;
}
.nav_medical,
.nav_medical img{
width: 24px;
height: 27px;
}
.nav_family,
.nav_family img{
width: 33px;
height: 32px;
}
.nav_access,
.nav_access img{
width: 29px;
height: 35px;
}
.nav_info,
.nav_info img{
width: 28px;
height: 28px;
}
.nav_resv,
.nav_resv img{
width: 35px;
height: 25px;
}
/* 矢印 */
.nav_arrow{
}
.nav_arrow img{
display:block;
position:absolute;
top:0;
right:5%;
bottom:0;
margin:auto;
transition:0.2s ease-in-out;
}
nav ul li div a:hover .nav_arrow img{
right:3%;
}
/* スクロールで追加されるクラス */
/* .fixed{
position:fixed;
top:0;
left:0;
} */
/*============================================================================
#mainvisual
============================================================================*/
/* 下層ページのメインビジュアルの高さ、背景画像（トップページの高さはtop.css参照） */
#mainvisual {
display: block;
position: relative;
min-width:1200px;
height: 70vh;
min-height:470px;
background-image:url(../images/mainvisual_img01.jpg);
background-position:center center;
background-size:cover;
margin-bottom: 178px;
}
#mainvisual .inner{
position:relative;
height: inherit;
min-width:1080px;
max-width:1400px;
margin: 0 auto;
padding:0 60px;
background-repeat:no-repeat;
}
#mainvisual h2{
position:relative;
font-weight: bold;
text-align:left;
}
#mainvisual h2 ::selection,
#mainvisual p ::selection{
text-shadow:none;
}
#mainvisual h2 ::-moz-selection{
text-shadow:none;
}
/* キャッチフレーズ */
.mainvisual_oyako{
position: absolute;
right: 10px;
top: 320px;
animation: float_6082 4s linear infinite;
transform-origin: 50% 50%;
}
@media screen and (max-width: 1400px){
.mainvisual_oyako{
top: 280px;
}
}
@keyframes float_6082 {
0% { transform: translateY(0) }
50% { transform: translateY(-6px) }
100% { transform: translateY(0) }
}
.mainvisual_catch{
position: absolute;
bottom: 41px;
font-weight: bold;
color: #fff;
left: 60px;
text-align:left;
font-feature-settings : "palt";
z-index:9;
text-shadow: 0 0 5px rgba(0,0,0,0.08);
}
.mainvisual_slide{
position:absolute;
top:0;
width:100%;
height:100%;
/* top:112px; */
background-image:url(../images/mainvisual_img01.jpg);
background-position:center 65%;
background-size:cover;
filter: brightness(0.95);
content:"";
z-index:-1;
}
.mainvisual_catch h2{
margin-bottom: 18px;
position: relative;
font-size:37px;
line-height: 1.42;
letter-spacing: 0.2em;
z-index: 10;
padding-right: 7px;
}
.mainvisual_catch h2 span{
}
.mainvisual_catch em{
display:block;
}
.mainvisual_catch p{
display:block;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.15em;
}
.mainvisual_catch p span{
/* background-color:#5AC2D7; */
}
.mainvisual_open{
position:absolute;
top: 150px;
right: 60px;
}
.mainvisual_open_1{
display: block;
width: 250px;
padding: 14%;
text-align: center;
background-color: #5AC2D7;
box-sizing: border-box;
}
.mainvisual_open_1 img{
width: 180px;
height: 66.9px;
}
.mainvisual_open_2{
position:relative;
display: block;
}
.mainvisual_open_2 img{
width:180px;
}
.mainvisual_open_2 a{
display:block;
padding-top: 0px;
padding-left: 11%;
padding-right: 36px;
padding-bottom:16px;
background-color: #5AC2D7;
}
.mainvisual_open_2 a::after {
position: absolute;
top: 0;
right: 23px;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px solid #fff;
border-top: 1px solid #fff;
content: "";
margin: auto;
bottom: 1px;
transition: ease-in-out 0.1s;
}
.mainvisual_open_2 a:hover{
background-color: #97D1D9;
}
.mainvisual_open_2 a:hover::after {
right: 18px
}
.mainvisual_open_3 img{
margin-left:2px;
width: 180px;
margin-bottom: 10px;
}
.mainvisual_schedule{
position: absolute;
right: 0;
bottom: 0;
transform: translateY(50%);
font-size:14px;
/* height:256px;
box-sizing:border-box; */
z-index:9;
box-shadow: 0 10px 14px -2px rgba(9,0,94,0.03);
}
.mainvisual_schedule_inner{
position:relative;
background-color: #fff;
padding: 39px 60px;
z-index:9;
min-width: 400px;
}
.mainvisual_schedule::before{
position: absolute;
width: 62px;
height: 63px;
top: -45px;
left: 20px;
background-image: url("../images/main_catch_img01.svg");
background-size: cover;
content: "";
z-index: 1;
}
.mainvisual_schedule::after{
position: absolute;
width: 48px;
height: 43px;
top: -30px;
right: 40px;
background-image: url("../images/main_catch_img02.svg");
background-size: cover;
content: "";
z-index: 1;
}
.mainvisual_schedule .resv_tel{
display: flex;
padding-left: 0;
line-height: 1.3;
margin-top: 10px;
}
.mainvisual_schedule .resv_tel dt{
font-size: 12.5px;
margin-bottom: 0;
}
.mainvisual_schedule .resv_tel dd{
padding-left: 41px;
margin-top: 3px;
}
.mainvisual_schedule .resv_tel::before{
left: 95px;
bottom: 4px;
width: 24px;
height: 24px;
}
.mainvisual_schedule .resv_tel dd a{
font-size: 27.5px;
line-height: 1;
}
.mainvisual_schedule .resv_tel dd a::before {
position: absolute;
top: -7px;
left: 246px;
letter-spacing: 0.55em;
font-size: 10px;
content: "なないろ";
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
}
/* 下層ページの見出し */
.mainvisual_headline {
position: absolute;
left: 60px;
bottom: 70px;
margin: auto;
color: #fff;
text-align: left;
letter-spacing:0.15em;
}
@media screen and (max-width:1400px) {
.mainvisual_headline{
bottom: 50px;
}
}
.mainvisual_headline h2 {
font-size: 17px;
}
.mainvisual_headline p {
display: inline-block;
font-size: 72px;
padding-top: 70px;
line-height: 1;
font-family: brandon-grotesque,sans-serif;
font-weight:700;
font-style: normal;
letter-spacing: 0.12em;
}
/* 背景変更用 */
#mainvisual.bg01{
background-image:url(../images/main_bg01.jpg);
background-position: center ;
background-size: cover;
}
#mainvisual.bg02{
background-image:url(../images/main_bg02.jpg) ;
background-position: center 60%;
background-size: cover;
}
#mainvisual.bg03{
background-image:url(../images/main_bg03.jpg) ;
background-position: center ;
background-size: cover;
}
#mainvisual.bg04{
background-image:url(../images/main_bg04.jpg) ;
background-position: center ;
background-size: auto;
}
#mainvisual.bg05{
background-image:url(../images/main_bg05.jpg);
background-position: center ;
background-size: cover;
}
#mainvisual.bg06{
background-image:url(../images/main_bg06.jpg);
background-position: center ;
background-size: cover;
}
/*==================================================================
#contents
==================================================================*/
main{
display:block;
}
#container{
padding-bottom: 100px;
overflow:hidden;
}
#contents{
position:relative;
width:1200px;
margin:0 auto;
padding-bottom: 0;
}
#contents::after {
display: block;
clear: both;
content: "";
}
#contents_left{
float:left;
width:840px;
}
#contents_right{
position:relative;
float:right;
width:280px;
font-size:15px;
line-height:1.6;
}
#contents_right::before{
position:absolute;
top:-178px;
width:2500px;
height:10000px;
background-color:#F7FCF7;
z-index:-10;
content:"";
}
.right_medical{
position:relative;
}
.right_medical h3 a{
transition:0.1s ease-in-out;
}
.right_medical h3 a:hover{
}
.right_medical ul{
}
.right_medical li{
}
.right_medical li:last-child{
margin-bottom:0;
}
.right_medical img{
width:100%;
}
/*============================================================================
$footer
============================================================================*/
.resv_fixed{
position:fixed;
right:30px;
bottom:0;
z-index:9999;
display: none;
}
.resv_fixed_ico{
position: absolute;
bottom: -70px;
width: 60px;
height: 58px;
right: 0;
transition:0.1s ease-in-out;
}
.resv_fixed_bln{
position: absolute;
width: 178px;
height: 33px;
bottom: -40px;
right: 68px;
transition: 0.3s ease-in-out;
background-color: #7BCED9;
border:1px solid #7BCED9;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 33px;
text-align: center;
border-radius: 5px;
}
.resv_fixed_bln::before{
position: absolute;
top: 0;
bottom: 0;
right: -8px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4px 6.92px 4px;
border-color: transparent transparent #7BCED9 transparent;
content: "";
transform: rotate(90deg);
margin: auto;
}
.resv_fixed_bln::after{
position: absolute;
top: 0;
bottom: 0;
right: -6.5px;
width: 0;
height: 0;
border-style: solid;
border-width:0 4px 6.92px 4px;
border-color: transparent transparent #FFFFFF transparent;
content: "";
transform: rotate(90deg);
margin: auto;
opacity:0;
transition:0.3s ease-in-out;
}
.resv_fixed:hover .resv_fixed_bln::after{
opacity:1;
}
.resv_fixed:hover .resv_fixed_bln{
background-color: #ffffff;
color: #7BCED9;
}
.bln_active{
bottom: 10px;
}
.ico_active{
bottom: -20px;
}
footer {
position:relative;
width:100%;
border-top: 3px solid #F4F4F4;
background-color: #fff;
}
footer a{
text-decoration:none;
}
.footer_map {
display: none;
position:relative;
}
.footer_map_illust{
position:relative;
max-width:1400px;
min-width:1200px;
margin:auto;
}
.footer_map_illust::before {
display: none;
position:absolute;
width:136px;
height:52px;
left: -20px;
top: -22px;
background-image:url(../images/top_access_img01.svg);
background-size:cover;
content:"";
}
.footer_map_illust::after {
display: none;
position:absolute;
width:258px;
height:54px;
right:-20px;
top: -34px;
background-image:url(../images/top_access_img02.svg);
background-size:cover;
content:"";
}
.footer_map iframe{
vertical-align:bottom;
}
/* フッターの医院概要 */
.footer_info{
}
.footer_info .inner{
position:relative;
min-width:1080px;
max-width:1400px;
margin:0 auto;
padding:160px 60px;
display: flex;
justify-content: space-between;
}
.footer_info_overview{
position:relative;
}
.footer_info_overview dt{
position: relative;
top: 3px;
width:210px;
margin-bottom:24px;
font-weight:bold;
font-size: 22px;
letter-spacing: 0.09em;
}
.footer_info_overview dt a{
color:#454545;
}
.footer_info_overview dt a:hover{
color:#A3DEA2;
}
.footer_info_overview dd{
margin-bottom:12px;
font-size:13.5px;
}
.footer_info_address{
position: relative;
}
.footer_info_address::before{
position:absolute;
top: 23px;
right: -10px;
width:81px;
height:107px;
background-image:url(../images/footer_access_img01.svg);
background-size:cover;
content:"";
}
.footer_info_address dt{
line-height: 1;
font-size:36px;
color:#5AC2D7;
letter-spacing: 0.1em;
font-family: brandon-grotesque, sans-serif;
font-weight:700;
margin-bottom: 24px;
padding-top: 6px;
}
.footer_info_address dd{
margin-bottom: 12px;
line-height:19px;
font-size:14px;
}
.footer_info_address dd a{
position: relative;
font-size:16px;
font-weight:bold;
text-decoration:underline;
}
.footer_info_address dd a:hover{
text-decoration: none;
}
.footer_info_address dd a::after{
position: absolute;
top: 0;
right: -10px;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px solid #5AC2D7;
border-top: 1px solid #5AC2D7;
content: "";
margin: auto;
bottom: 0;
transition: ease-in-out 0.1s;
}
.footer_info_address dd a:hover::after{
right: -15px;
border-right: 1px solid #A3DEA2;
border-top: 1px solid #A3DEA2;
}
.resv_tel{
padding-left: 26px;
position: relative;
}
.resv_tel::before{
position:absolute;
left: 0;
bottom: 2px;
width:22px;
height:22px;
background-image:url(../images/header_tel.svg);
background-size:cover;
content:"";
}
.resv_tel dt{
font-size:13.5px;
margin-bottom: 5px;
color:#454545;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
font-weight:bold;
}
.resv_tel dd a{
font-size: 28.2px;
letter-spacing: 0.08em;
color:#454545;
text-decoration:none;
font-family: brandon-grotesque, sans-serif;
font-weight:700;
}
.footer_info_address .resv_tel dd a::after{
display:none;
}
.resv_tel dd a [data-ruby]::before{
position:absolute;
bottom: -6px;
right: -1px;
letter-spacing: 0.58em;
font-size:10px;
content:"なないろ";
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
}
/* 診療時間（医院案内、アクセス共通） */
.footer_info_sche{
width:44.25%;
font-size:14px;
position: relative;
}
.footer_info_sche::before{
position:absolute;
top: 23px;
right: -16px;
width:163px;
height:157px;
background-image:url(../images/footer_calender_img01.svg);
background-size:cover;
content:"";
}
.footer_info_sche dt{
line-height: 1;
font-size:36px;
color:#5AC2D7;
font-family: brandon-grotesque, sans-serif;
font-weight:700;
margin-bottom:20px;
letter-spacing: 0.1em;
padding-top: 6px;
}
.footer_info_sche .schedule table{
margin-bottom:10px;
}
.footer_info_sche .schedule table th {
padding: 1px 0;
letter-spacing: 0.1em;
font-size: 16px;
}
.footer_info_sche .schedule table tr:first-child th{
font-size: 16px;
}
.footer_info_sche .schedule table td {
font-size: 16px;
padding: 0 13px;
}
.footer_info_sche .schedule td:last-child{
padding-right:0;
}
.footer_info_sche .schedule p{
display:inline-block;
margin-right:15px;
}
.footer_info_sche .schedule .schedule_note2{
margin-right:0;
}
.schedule table{
width:100%;
margin-bottom:12px;
}
.schedule table tr:first-child th{
font-size:14px;
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
}
.schedule tr{
border-bottom:1px solid #DDDDDD;
}
.schedule th{
padding: 2px 0;
letter-spacing: 0.1em;
font-size:15px;
font-family: 'Roboto Condensed', sans-serif;
}
.schedule td{
padding: 0 6px;
text-align: right;
}
.schedule td:last-child{
padding-right:0;
}
.schedule p{
line-height:1.4;
}
.schedule p strong{
color:#1F2774;
}
.schedule p:last-child{
margin-bottom:0;
}
.schedule_note{
margin-bottom: 1px;
}
.schedule_note2{
}
.schedule_note2_color{
color:#7BCED9;
}
.schedule_note2_reader{
margin: 0 3px 0 2px;
}
.schedule_note li{
display:inline-block;
margin-right:2em;
}
.schedule td span{
color:#7BCED9;
}
/* コピーライト */
.copy{
position: absolute;
bottom:6px;
}
.copy small{
line-height:1;
font-size:12px;
font-family: brandon-grotesque, sans-serif;
font-weight:300;
}
/*==================================================================
タイトル
==================================================================*/
h3.tit01 {
display:inline-block;
position: relative;
margin-bottom: 67px;
letter-spacing: 0.15em;
line-height: 1.4;
font-size: 15px;
font-weight:bold;
text-align: left;
}
/* アイコンの余白 */
h3.tit01 i{
margin-right:7px;
}
/* 背景画像 */
h3.tit01 em::before{
position: absolute;
width: 89px;
height: 81px;
top: -17px;
right: -98px;
margin: auto ;
background-image:url(../images/h3_bg_img01.svg);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
z-index: 1;
content: "";
}
h3.tit01::after{
position: absolute;
width: 56px;
height: 50px;
bottom: -25px;
left: -51px;
margin: auto ;
background-image:url(../images/h3_bg_img02.svg);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
z-index: 1;
content: "";
}
/* 飾りの英語 */
h3.tit01 span:nth-child(1),
h3.tit01 span:nth-child(9){
color:#F6A3A1;
}
h3.tit01 span:nth-child(2),
h3.tit01 span:nth-child(10){
color:#FFC7A4;
}
h3.tit01 span:nth-child(3),
h3.tit01 span:nth-child(11){
color:#F5F161;
}
h3.tit01 span:nth-child(4),
h3.tit01 span:nth-child(12){
color:#C0E8C0;
}
h3.tit01 span:nth-child(5),
h3.tit01 span:nth-child(13){
color:#A8DDE5;
}
h3.tit01 span:nth-child(6),
h3.tit01 span:nth-child(14){
color:#96D5E3;
}
h3.tit01 span:nth-child(7){
color:#CCC2E7;
}
h3.tit01 span:nth-child(8){
color:#F8B6C6;
}
h3.tit01 strong span{
color:#454545 !important;
}
h3.tit01 em{
display:block;
font-size:72px;
text-align:left;
font-family: brandon-grotesque, sans-serif;
font-weight: 700;
letter-spacing:0.125em;
line-height: 1;
margin-bottom: 8px;
}
/* 白抜き */
h3.tit02 {
display:inline-block;
position: relative;
margin-bottom: 67px;
letter-spacing: 0.15em;
line-height: 1.4;
font-size: 15px;
font-weight:bold;
text-align: left;
color:#fff;
}
/* 背景画像 */
h3.tit02 em::before{
position: absolute;
width: 82px;
height: 85px;
top: -32px;
right: -93px;
margin: auto ;
background-image:url(../images/h3_bg_img03.svg);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
z-index: 1;
content: "";
}
h3.tit02::after{
position: absolute;
width: 45px;
height: 73px;
bottom: -32px;
left: -42px;
margin: auto ;
background-image:url(../images/h3_bg_img04.svg);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
z-index: 1;
content: "";
}
h3.tit02 em{
display:block;
font-size:72px;
text-align:left;
font-family: brandon-grotesque, sans-serif;
font-weight: 700;
letter-spacing:0.125em;
line-height: 1;
margin-bottom: 8px;
}
h3.tit03,
h3.tit06 {
position: relative;
margin-bottom: 90px;
letter-spacing: 0.15em;
line-height: 1.4;
font-size: 32px;
font-weight: bold;
text-align: left;
}
h3.tit03::before,
h3.tit06::before{
position: absolute;
bottom: -16px;
left: 1px;
width: 26px;
height: 2px;
background-color: #7BCED9;
content: "";
}
.clinic h3.tit03::before {
background-color:#5AC2D7;
}
.family h3.tit03::before {
background-color:#F692AB;
}
.class h3.tit03::before {
background-color:#5CF3CF;
}
.news h3.tit03::before {
background-color:#5AA4D7;
}
h3.tit06::before {
background-color:#FFAC74;
}
.doctor h3.tit03::before {
background-color:#B4A4DB;
}
h3.tit04 {
display:inline-block;
position: relative;
margin-bottom: 67px;
letter-spacing: 0.15em;
line-height: 1.4;
font-size: 15px;
font-weight:bold;
text-align: left;
}
/* アイコンの余白 */
h3.tit04 i{
margin-right:7px;
}
/* 背景画像 */
h3.tit04 em::before{
position: absolute;
width: 72px;
height: 75px;
top: -17px;
right:-83px;
margin: auto ;
background-image:url(../images/h3_bg_img06.svg);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
z-index: 1;
content: "";
}
h3.tit04::after{
position: absolute;
width: 45px;
height: 45px;
bottom: -25px;
left: -51px;
margin: auto ;
background-image:url(../images/h3_bg_img05.svg);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
z-index: 1;
content: "";
}
/* 飾りの英語 */
h3.tit04 span:nth-child(1),
h3.tit04 span:nth-child(9){
color:#F6A3A1;
}
h3.tit04 span:nth-child(2),
h3.tit04 span:nth-child(10){
color:#FFC7A4;
}
h3.tit04 span:nth-child(3),
h3.tit04 span:nth-child(11){
color:#F5F161;
}
h3.tit04 span:nth-child(4),
h3.tit04 span:nth-child(12){
color:#C0E8C0;
}
h3.tit04 span:nth-child(5),
h3.tit04 span:nth-child(13){
color:#A8DDE5;
}
h3.tit04 span:nth-child(6),
h3.tit04 span:nth-child(14){
color:#96D5E3;
}
h3.tit04 span:nth-child(7){
color:#CCC2E7;
}
h3.tit04 span:nth-child(8){
color:#F8B6C6;
}
h3.tit04 strong span{
color:#454545 !important;
}
h3.tit04 em{
display:block;
font-size:72px;
text-align:left;
font-family: brandon-grotesque, sans-serif;
font-weight: 700;
letter-spacing:0.125em;
line-height: 1;
margin-bottom: 8px;
}
h3.tit05 {
display:inline-block;
position: relative;
margin-bottom: 67px;
letter-spacing: 0.15em;
line-height: 1.4;
font-size: 15px;
font-weight:bold;
text-align: left;
}
/* アイコンの余白 */
h3.tit05 i{
margin-right:7px;
}
/* 背景画像 */
h3.tit05 em::before{
position: absolute;
width: 82px;
height: 85px;
top: -17px;
right: -98px;
margin: auto ;
background-image:url(../images/h3_bg_img07.svg);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
z-index: 1;
content: "";
}
h3.tit05::after{
position: absolute;
width: 35px;
height: 41px;
bottom: -25px;
left: -41px;
margin: auto ;
background-image:url(../images/h3_bg_img08.svg);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
z-index: 1;
content: "";
}
/* 飾りの英語 */
h3.tit05 span:nth-child(1),
h3.tit05 span:nth-child(9){
color:#F6A3A1;
}
h3.tit05 span:nth-child(2),
h3.tit05 span:nth-child(10){
color:#FFC7A4;
}
h3.tit05 span:nth-child(3),
h3.tit05 span:nth-child(11){
color:#F5F161;
}
h3.tit05 span:nth-child(4),
h3.tit05 span:nth-child(12){
color:#C0E8C0;
}
h3.tit05 span:nth-child(5),
h3.tit05 span:nth-child(13){
color:#A8DDE5;
}
h3.tit05 span:nth-child(6),
h3.tit05 span:nth-child(14){
color:#96D5E3;
}
h3.tit05 span:nth-child(7){
color:#CCC2E7;
}
h3.tit05 span:nth-child(8){
color:#F8B6C6;
}
h3.tit05 strong span{
color:#454545 !important;
}
h3.tit05 em{
display:block;
font-size:72px;
text-align:left;
font-family: brandon-grotesque, sans-serif;
font-weight: 700;
letter-spacing:0.125em;
line-height: 1;
margin-bottom: 8px;
}
h4.tit01 {
position: relative;
margin-bottom: 26px;
letter-spacing: 0.125em;
line-height: 1.73;
font-size: 26px;
font-weight: bold;
text-align: left;
margin-top: -6px;
}
h4.tit01 i{
margin-right:7px;
}
h4.tit01 span{
display:inline-block;
position:relative;
letter-spacing: 2.5px;
color: #C0AB9A;
font-size:14.5px;
font-family: "Times New Roman", Times, serif;
font-weight: 400;
}
h4.tit01_2 {
position: relative;
margin-bottom: 26px;
letter-spacing: 0.125em;
line-height: 1.73;
font-size: 26px;
font-weight: bold;
text-align: center;
margin-top: -6px;
color: #F6A3A1;
}
h4.tit01_2 i{
margin-right:7px;
}
h4.tit01_2 span{
font-size: 28px;
font-weight: bold;
color: #F6A3A1;
}
h4.tit02 {
display: table;
position: relative;
margin-bottom: 20px;
/* background-image: url(../images/h4_under.svg); */
background-repeat: repeat-x;
background-position: bottom left 0;
background-size: 67px;
letter-spacing: 0.125em;
line-height: 1.73;
font-size: 24px;
font-weight: bold;
text-align: left;
padding-bottom: 6px;
}
h4.tit03 {
padding-left: 50px;
}
h4.tit03::before {
content: "";
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background-image: url("../images/ohana_icon.png");
background-size: cover;
}
h5.tit01{
position: relative;
margin-bottom: 12px;
letter-spacing:0.1em;
line-height: 1.7!important;
color: #1F2774;
font-size: 16px;
font-weight: bold;
}
h5.class,
span.class{
color: #5AC2D7!important;
}
h5.tit01.mb{
margin-top: 25px;
margin-bottom: 5px;
font-weight: bold;
}
.white_center{
font-size: 18px;
margin-top: -180px;
margin-bottom: -280px;
}
.m_top{
text-align: center;
}
.white_center p{
text-decoration: underline;
text-align: center;
}
.white_center::before{
content: "";
background-image: url("../images/img_cake.png");
width: 20%;
display: block;
height: 210px;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
top: 240px;
left: 0;
}
.white_center::after{
content: "";
background-image: url("../images/img_black.png");
width: 20%;
display: block;
height: 300px;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
right: -720px;
bottom: 360px;
}
.white_center .other{
font-size: 22px;
color: #5AC2D7;
font-weight: bold;
margin-top: 20px;
margin-bottom: 0;
text-decoration: none;
}
.flex{
margin-top:30px;
border: solid 2px #F6A3A1;
padding: 40px;
border-radius: 30px;
background-color: #fff;
}
.flex_2{
margin-top: -20px;
text-align: center;
}
.flex_2 p{
font-size: 22px;
text-decoration: underline;
color: #A2E0A2;
font-weight: bold;
}
.flex p{
font-size: 18px;
}
.flex ul li{
margin-bottom: 5px;
}
.flex ul li span{
margin-left: 43px;
}
/*==================================================================
共通
==================================================================*/
/*院長略歴*/
.list01 {
margin: 0 0 15px;
padding: 0;
border-width: 0 1px 1px;
}
.list01 dt {
margin: 0;
padding: 14px 3px 0px;
}
.list01 dd {
margin: -38px 0 0;
padding: 12px 4px 10px 100px;
border-bottom: 1px dotted #ACACAC;
}
/*院長略歴 年月無し*/
.list02 {
margin: 0 0 15px;
border-width: 0 1px 1px;
font-size: 18px;
}
.list02 li {
margin-bottom: 12px;
border-bottom: 2px dotted #ddd;
letter-spacing: 1.8px;
}
/*まる*/
.list03{
}
.list03 li{
position:relative;
margin-bottom:10px;
padding-left:15px;
}
.list03 li:last-child{
margin-bottom:0;
}
.list03 li:before{
display: block;
position: absolute;
top: 10px;
left: 0;
width: 3px;
height: 3px;
background-color: #E0D0BF;
border: 1px solid #E0D0BF;
border-radius: 100%;
content: '';
}
.list03 li i{
margin-right:8px;
}
/*さんかく*/
.list04 li{
position: relative;
margin-bottom:15px;
padding-left:22px;
color:#223a70;
}
.list04 li:before{
position:absolute;
top:0.5em;
left:7px;
width: 0;
height: 0;
border:5px solid transparent;
border-left: 5px solid #4A577F;
content:"";
}
/*やじるし*/
.list05 li{
position:relative;
margin-bottom: 10px;
line-height:1;
padding-left:15px;
}
.list05 li:before{
position:absolute;
left:0;
top:0.3em;
height:5px;
width:5px;
transform:rotate(45deg);
background-color: transparent;
border-top:1px solid #333;
border-right:1px solid #333;
content:"";
}
/* まる & 背景 */
.list06{
padding:35px 15px 25px 45px;
background-color:#f7f7f7;
}
.list06:after {
display: block;
clear: both;
content: "";
}
.list06 li{
position:relative;
float:left;
margin-bottom:15px;
padding-left:0.9em;
padding-right:5%;
}
.list06 li:before{
display: block;
content: '';
position: absolute;
top: 10px;
left: 0;
width: 3px;
height: 3px;
background-color: #DAC58B;
border: 1px solid #DAC58B;
border-radius: 100%;
}
/*まる & 枠 */
.list07{
border: 3px solid #eee;
padding: 30px ;
font-size:14.5px;
}
.list07 li{
padding-left:0.9em;
margin-bottom:10px;
position:relative;
}
.list07 li:last-child{
margin-bottom:0;
}
.list07 li:before{
display: block;
content: '';
position: absolute;
top: 10px;
left: 0;
width: 3px;
height: 3px;
background-color: #E0D0BF;
border: 1px solid #E0D0BF;
border-radius: 100%;
}
.list07 li i{
margin-right:8px;
}
/*チェック*/
.list08{
margin-bottom:30px;
padding:35px 10px 20px 45px;
background-color:#f7f7f7;
}
.list08:after{
display: block;
clear: both;
content: "";
}
.list08 li{
position:relative;
float:left;
margin-right: 5%;
margin-bottom:20px;
margin-left: 28px;
border-bottom: 1px dotted #cdcdcd;
}
.list08 li:before{
display: block;
position: absolute;
top: 3px;
left: -28px;
width: 20px;
height: 20px;
background-image:url(../images/check.svg);
background-repeat:no-repeat;
background-position:left center;
content: '';
}
/*ボタン ゴースト*/
.btn01{
position:relative;
}
.btn01 a{
display:inline-block;
position:relative;
min-width:250px;
box-sizing:border-box;
padding:17px 38px 17px 25px;
line-height:1;
border:1px solid #5AC2D7;
border-radius:10px;
color:#5AC2D7;
text-align:left;
font-size: 15px;
font-weight:bold;
transition:ease-in-out 0.1s ;
text-decoration:none;
}
.btn01 a::before{
position: absolute;
top: 0;
right: 25px;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px solid #5AC2D7;
border-top: 1px solid #5AC2D7;
content: "";
margin: auto;
bottom: 0;
transition:ease-in-out 0.1s ;
}
.btn01 a:hover{
color:#fff;
background-color:#5AC2D7;
transition:ease-in-out 0.1s ;
}
.btn01 a:hover::before{
border-color:#fff;
right: 20px;
}
.btn01 a::after{
display:inline-block;
position:absolute;
top:10px;
left:10px;
width: 100%;
height:100%;
background-image:url(../images/bg03.png);
transition:0.2s ease-in-out;
z-index:-1;
content:"";
}
.btn01 a:hover::after{
left:0;
top:0;
}
.btn01 a i{
margin-right: 7px;
font-size: 12px;
}
.fa.fa-map-marker{
color: #5AC2D7;
}
/*ボタン 白抜き*/
.btn02{
position:relative;
}
.btn02 a{
display:inline-block;
position:relative;
min-width:250px;
box-sizing:border-box;
padding:17px 38px 17px 25px;
line-height:1;
border:1px solid #fff;
border-radius:10px;
color:#fff;
text-align:left;
font-weight:bold;
transition:ease-in-out 0.1s ;
text-decoration:none;
font-size: 15px;
}
.btn02 a::before{
position: absolute;
top: 0;
right: 25px;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px solid #fff;
border-top: 1px solid #fff;
content: "";
margin: auto;
bottom: 0;
transition:ease-in-out 0.1s ;
}
.btn02 a:hover{
color:#5AC2D7;
background-color:#fff;
}
.btn02 a:hover::before{
border-color:#5AC2D7;
right: 20px;
}
.btn02 a::after{
display:inline-block;
position:absolute;
top:10px;
left:10px;
width: 100%;
height:100%;
background-image:url(../images/bg03.png);
transition:0.2s ease-in-out;
z-index:-1;
content:"";
}
.btn02 a:hover::after{
left:0;
top:0;
}
.btn02 a i{
margin-right: 7px;
font-size: 12px;
}
/*ボタン ゴースト*/
.btn03{
position:relative;
}
.btn03 a{
display:inline-block;
position:relative;
min-width:250px;
box-sizing:border-box;
padding:14px 34px 15px 20px;
line-height:1;
border:1px solid #5AC2D7;
border-radius:10px;
color:#5AC2D7;
text-align:left;
font-size: 15px;
font-weight:bold;
transition:ease-in-out 0.1s ;
text-decoration:none;
}
.btn03 a::before{
position: absolute;
top: 0;
right: 20px;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px solid #5AC2D7;
border-top: 1px solid #5AC2D7;
content: "";
margin: auto;
bottom: 0;
transition:ease-in-out 0.1s ;
}
.btn03 a:hover{
color:#fff;
background-color:#5AC2D7;
}
.btn03 a:hover::before{
border-color:#fff;
right: 15px;
}
.btn03 a::after{
display:inline-block;
position:absolute;
top:10px;
left:10px;
width: 100%;
height:100%;
background-image:url(../images/bg03.png);
transition:0.2s ease-in-out;
z-index:-1;
content:"";
}
.btn03 a:hover::after{
left:0;
top:0;
}
.btn03 a i{
margin-right: 7px;
font-size: 12px;
}
.btn04{
}
.btn04 i{
margin-right: 7px;
font-size: 12px;
}
.btn05 a{
display:block;
letter-spacing: 0.15em;
font-family: brandon-grotesque, sans-serif;
font-weight: 500;
font-size: 1rem;
color: #5AC2D7;
transition: 0.2s;
border-bottom: 1px solid #5AC2D7;
text-decoration:none;
}
.btn05 a:hover{
letter-spacing: 0.3em;
color: #5AA4D7;
border-bottom: 1px solid #5AA4D7;
}
/* 画像を右寄せ ※画像サイズはhtmlで調整 */
.img_fr{
display:block;
position:relative;
float:right;
margin-left:30px;
margin-bottom:0 !important;
text-align:center;
}
.img_fr_2 {
display: block;
position: relative;
float: right;
margin-left: 30px;
margin-bottom: 0 !important;
text-align: center;
top: 0px;
}
.img_fr img{
border-radius:3px;
margin-bottom:7px;
}
/* 画像に対して説明文がある場合は、dlで囲い、dtに画像を、ddにテキストを使う */
.img_fr dd{
padding-left:20px;
line-height:1.3;
font-size:15px;
font-weight:bold;
color: #1F2774;
text-align:left;
}
.img_center{
text-align:center;
margin:20px 0;
}
.box4_2 .p_title{
text-align: center;
font-size: 24px;
margin-bottom: 10px;
color: #F6A3A1;
}
/*==================================================================
table
==================================================================*/
.nowrap{
white-space:nowrap;
}
/*フッターの診療時間*/
.tb01{
margin-bottom:12px;
border-spacing: 0;
border-collapse: collapse;
white-space:nowrap;
}
.tb01 td,.tb01 th{
border-bottom:1px solid #e4e4e4;
vertical-align: middle;
}
.tb01 tr:last-child td,.tb01 tr:last-child th{
border:none;
}
.tb01 th:first-child{
}
.tb01 th{
padding:10px 22px 8px 22px;
line-height:1;
white-space:nowrap;
font-weight:bold;
text-align:left;
}
.tb01 td{
padding:10px 13px 8px 13px;
}
/*医院概要*/
.tb02{
border-spacing: 0;
text-align: left;
}
.tb02 td,.tb02 th{
border-bottom:#ddd 1px dotted;
line-height:1.4;
font-size:15px;
vertical-align:top;
}
.tb02 th{
padding:8px 24px 8px 0;
white-space:nowrap;
text-align:left;
font-weight: normal;
color:#333;
}
.tb02 td{
padding:8px 0;
padding-right:0 !important;
text-align:left;
}
.tb02 tr:last-child td,.tb02 tr:last-child th{
border:none;
}
/* 料金表 */
.tb03 {
width:100%;
border-spacing: 1px;
border-collapse: separate;
background-color: #f0f0f0;
white-space: nowrap;
}
.tb03 td, .tb03 th {
padding: 8px 15px;
}
.tb03 th {
font-weight: bold;
white-space: nowrap;
text-align: center;
background-color: #FAFAFA;
}
.tb03 th span {
font-size: 13px;
}
.tb03 td {
background-color: #ffffff;
}
/*医院概要*/
.tb_sche{
border-spacing: 0;
width: 100%;
}
.tb_sche th{
padding:8px 24px 8px 0;
text-align:center;
font-weight: normal;
color:#333;
border-bottom:#f0f0f0 1px dotted;
width: 20%;
}
.tb_sche td{
padding:8px 0;
padding-right:0 !important;
text-align:left;
border-bottom:#f0f0f0 1px dotted;
width: 80%;
}
.tb_payment{
max-width: 900px;
background-color: #555050;
}
.tb_payment .icon_list{
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/*==================================================================
アンカーリンンク
==================================================================*/
/* 4個並び */
.ank01{
margin:0 auto;
}
.ank01 ul {
display: flex;
flex-wrap: wrap;
}
.ank01 li{
width:40%;
margin-bottom:2%;
margin-right:4%;
line-height:1.4;
}
.ank01 li:nth-of-type(2n){
margin-right:0;
}
.ank01 li a{
display: block;
width: 100%;
padding:12px 5px 15px;
background-color: #0FB7CE;
font-weight:bold;
color:#fff;
text-align:center;
transition:0.1s ease-in-out;
text-decoration: none;
}
.ank01 li a:hover{
background-color:#7BCED9;
color:#fff;
}
.ank01 li i{
display:block;
position:absolute;
left:0;
right:0;
bottom:4px;
margin:auto;
}
.ank01_2 ul{
display: flex;
flex-wrap: wrap;
}
.ank01_2 li{
width: 27.9%;
margin-right: 2.75%;
line-height:1.4;
margin-bottom:2%;
}
.ank01_2 li a{
display: block;
width: 100%;
padding: 12px 5px 15px;
background-color: #0FB7CE;
font-weight: bold;
color: #fff;
text-align: center;
transition: 0.1s ease-in-out;
text-decoration: none;
}
.ank01_2 li a:hover{
background-color:#7BCED9;
color:#fff;
}
/*==================================================================
.layout
==================================================================*/
/* 1つ並びのレイアウト。画像は無し、左にタイトル、右に文章 */
.layout01{
padding-bottom:20px;
}
.layout01 dl {
display: table;
position: relative;
top: 5px;
width: 100%;
margin-bottom: 5px;
}
.layout01 dl:before{
position:absolute;
top:-3px;
left:0;
width:100%;
border-top: 1px solid #ededed;
content:"";
}
.layout01 dl:last-child:after{
position:absolute;
bottom:-3px;
left:0;
width:100%;
border-top: 1px solid #f0f0f0;
content:"";
}
.layout01 dt,
.layout01 dd{
display:table-cell;
box-sizing:border-box;
}
.layout01 dt{
min-width:28%;
padding:0 3%;
background-color:#F7F7F7;
letter-spacing: 0.1em;
color: #1F2774;
font-size:18px;
font-weight:bold;
text-align:center;
vertical-align:middle;
}
/* 数字 */
.layout01 dt em{
display: block;
line-height: 1;
margin:0 8px;
font-family: "Times New Roman", Times, serif;
font-size:38px;
font-weight:normal;
color:#C3AF97;
}
.layout01 dd{
padding:3%;
}
/* 2つ並びのレイアウト。最初(dt)にタイトル、画像がその下(dd)、画像の下に文章 */
.layout02{
}
.layout02::after{
display: block;
clear: both;
content: "";
}
.layout02 dl{
width:40.2%;
float:left;
margin-right:4%;
margin-bottom:25px;
padding:3% 3.9% 4%;
background-color:#F7F7F7;
}
.layout02 dl:nth-child(even){
margin-right:0;
}
.layout02 dl dt{
margin-bottom:10px;
font-weight: bold;
font-size:18px;
line-height:1.3;
text-align:center;
}
/* 数字 */
.layout02 dl dt em{
margin-right:10px;
color:#BDA087;
font-family: "Times New Roman", Times, serif;
font-size:30px;
font-weight: normal;
}
.layout02 dl dd{
line-height:1.6;
font-size:14.5px;
text-align:center;
}
.layout02 dl dd img{
width:160px;
margin-bottom:15px;
}
.layout02 dl dd p{
margin-bottom:0;
text-align:justify;
}
/* 1つ並びのレイアウト。画像が左、右にタイトル、タイトル下に文章 */
.layout03{
padding-bottom:20px;
}
.layout03 dl{
display:table;
position:relative;
margin-bottom:20px;
background-color:#f7f7f7;
padding:2%;
}
.layout03 dt,
.layout03 dd{
display:table-cell;
box-sizing:border-box;
vertical-align:middle;
}
.layout03 dt {
width: 27%;
padding: 3%;
background-color: #fff;
text-align: center;
}
.layout03 dt img {
width: 100%;
padding-bottom: 10px;
}
.layout03 dd {
width: 73%;
padding: 1% 3%;
}
.layout03 dd h5{
color: #1F2774;
font-size:18px;
font-weight:bold;
}
.layout03 dd h5 em{
margin-right:10px;
color:#BDA087;
font-family: "Times New Roman", Times, serif;
font-size:30px;
font-weight: normal;
}
/* 1つ並びのレイアウト。画像が左、右にタイトル、タイトル下に文章、タイトルと文章のエリア(dd)は背景色が別の色 */
.layout04{
padding-bottom:20px;
}
.layout04 dl{
display:table;
position:relative;
margin-bottom:20px;
background-color:#f7f7f7;
padding:2%;
}
.layout04 dt,
.layout04 dd{
display:table-cell;
box-sizing:border-box;
}
.layout04 dt{
width:27%;
padding-right:2%;
vertical-align:middle;
}
.layout04 dt img{
width:100%;
}
.layout04 dd{
width:73%;
padding:3%;
background-color:#fff;
vertical-align:middle;
}
.layout04 dd h5{
color: #1F2774;
font-size:18px;
font-weight:bold;
}
.layout04 dd h5 span{
margin-right:10px;
color:#BDA087;
font-family: "Times New Roman", Times, serif;
font-size:30px;
font-weight: normal;
}
/* 1つ並びで3列に区切られたレイアウト。画像が左、画像の下にタイトル、右に文章 */
.layout05{
padding-bottom:20px;
}
.layout05 dl{
display:table;
position:relative;
margin-bottom:20px;
background-color:#f7f7f7;
padding:2%;
font-size:14px;
}
.layout05 dt,
.layout05 dd{
display:table-cell;
box-sizing:border-box;
}
.layout05 dt{
width:25%;
background-color:#fff;
text-align:center;
vertical-align:middle;
}
.layout05 dt img {
width: 100%;
padding-bottom: 10px;
}
.layout05 dd{
padding:1% 3%;
vertical-align:top;
}
.layout05 dd:nth-child(2){
width:36.5%;
}
.layout05 dd:nth-child(3){
width:38.5%;
border-left:1px solid #e2e2e2;
}
.layout05 dd h5 em{
margin-right:10px;
color:#BDA087;
font-family: "Times New Roman", Times, serif;
font-size:30px;
font-weight: normal;
}
.layout05 dd h5{
font-size:15px;
font-weight:bold;
}
.layout05_text1{
}
.layout05_text1 ul{
margin-bottom:15px;
}
.layout05_text1 ul li{
text-indent:-1em;
margin-left:1em;
}
/* 1つ並びで3列に区切られたレイアウト。左がタイトル、真ん中と右に文章 */
.layout06{
padding-bottom:20px;
}
.layout06 dl {
display: table;
position: relative;
padding-bottom: 5px;
font-size: 14px;
}
.layout06 dl:before{
position:absolute;
top:-3px;
left:0;
width:100%;
border-top: 1px solid #ededed;
content:"";
}
.layout06 dl:last-child:after{
position:absolute;
bottom:-3px;
left:0;
width:100%;
border-top: 1px solid #f0f0f0;
content:"";
}
.layout06 dt,
.layout06 dd{
display:table-cell;
box-sizing:border-box;
}
.layout06 dt{
min-width:28%;
padding:0 3%;
background-color:#F7F7F7;
letter-spacing: 0.1em;
color: #1F2774;
font-size:18px;
font-weight:bold;
text-align:center;
vertical-align:middle;
}
/* 数字 */
.layout06 dt em{
display:block;
line-height:1;
margin:0 8px;
font-family: "Times New Roman", Times, serif;
font-size:38px;
font-weight:normal;
color:#C3AF97;
}
.layout06 dd {
padding: 2% 3%;
vertical-align: top;
}
.layout06 dd:nth-child(2){
width:40%;
}
.layout06 dd:nth-child(3){
width:35%;
border-left:1px solid #e2e2e2;
}
.layout06 dd h5{
font-size:15px;
font-weight:bold;
}
.layout06_text1{
}
.layout06_text1 ul{
margin-bottom:15px;
}
.layout06_text1 ul li span{
display:block;
}
/* 3つ並びのレイアウト。 */
.layout07{
}
.layout07::after{
display: block;
clear: both;
content: "";
}
.layout07 dl{
float: left;
width: 26%;
margin-right: 2%;
margin-bottom:20px;
padding: 3%;
border-radius: 10px;
background-color:#F7F7F7;
}
.layout07 dl:nth-child(3n){
margin-right:0;
}
.layout07 dl dt{
margin-bottom: 7px;
padding-bottom: 7px;
border-bottom: 1px dashed #ddd;
font-size: 17px;
font-weight: bold;
text-align: center;
}
.layout07 dl dt em{
margin-right:8px;
font-size:24px;
font-family: 'Quicksand', sans-serif;
}
.layout07 dl dd{
line-height:1.5;
}
/* 3つ並びのレイアウト。矢印付き */
.layout08{
overflow:hidden;
}
.layout08 dl{
position:relative;
float: left;
width: 24.6%;
margin-right: 4.1%;
margin-bottom:25px;
padding: 3%;
border-radius: 10px;
background-color:#F7F7F7;
}
.layout08 dl::before {
position: absolute;
right: -17px;
top: 0;
height: 7px;
width: 7px;
transform: rotate(45deg);
background-color: transparent;
border-top: 2px solid #33409A;
border-right: 2px solid #33409A;
content: "";
bottom: 0;
margin: auto;
}
.layout08 dl:nth-child(3n){
margin-right:0;
}
.layout08 dl dt{
margin-bottom: 7px;
padding-bottom: 7px;
border-bottom: 1px dashed #ddd;
font-size: 17px;
font-weight: bold;
text-align: center;
}
.layout08 dl dt em{
margin-right:8px;
font-size:24px;
font-family: 'Quicksand', sans-serif;
}
.layout08 dl dd{
line-height:1.5;
}
/*==================================================================
box
==================================================================*/
.box1 {
position: relative;
min-width: 1080px;
max-width:1400px;
margin: 0 auto 140px;
padding:0 60px;
}
.box2{
}
.box3{
padding-bottom:120px;
}
.box4{
width: 1080px;
margin: 0 auto ;
padding-bottom:120px;
}
.box4_2{
width:900px;
margin: 0 auto ;
padding: 50px;
border-radius: 50px;
background-color: #f7f5fb;
}
.box5{
width: 980px;
margin: 0 auto ;
padding-bottom:120px;
}
.text {
position:relative;
margin-bottom:60px;
}
.text p {
margin-bottom: 0.82em;
}
.text:last-child{
margin-bottom:0;
}
/*==================================================================
.top_medical
==================================================================*/
.top_medical{
position:relative;
padding-top: 450px;
padding-bottom: 115px;
background-color:#F7FCF7;
}
.top_medical::after {
position: absolute;
bottom: -140px;
right: -500px;
font-size: 235px;
font-family: brandon-grotesque, sans-serif;
font-weight: 700;
letter-spacing: 0.125em;
color: #A3DEA2;
content: "TREATMENT";
z-index: 1;
opacity: 0.1;
white-space: nowrap;
pointer-events: none;
}
.top_medical_img03::before{
width:calc(50% + 21.9%);
height: 567px;
background-image: url(../images/top_treatment_img01.jpg);
content: "";
position: absolute;
top: 330px;
background-size: cover;
background-position: center 80%;
}
.top_medical .box1{
z-index: 2;
}
.top_medical_img02{
width: 50%;
height: 522px;
background-image: url(../images/top_treatment_img02.jpg);
content: "";
position: absolute;
top: 390px;
background-size: 1090px auto;
right: 0;
background-position: center 60%;
box-shadow: 0 3px 3px rgba(25,112,9,0.03);
}
/* .top_medical .box1::before{
position: absolute;
bottom: 525px;
right: -54px;
width: 166px;
height: 162px;
background-image: url(../images/top_medical_img01.svg);
background-size:cover;
content: "";
z-index: 1;
} */
.top_medical h3,
.top_medical p{
z-index:1;
}
.top_medical a{
text-decoration:none;
color: #454545;
}
.top_medical .text p{
}
.top_medical01_outer{
}
.top_medical01{
position: relative;
display: inline-block;
width:55.3%;
margin-top: 40px;
padding:60px 60px;
box-sizing:border-box;
}
.top_medical01 h4{
position:relative;
font-size: 24px;
font-weight: bold;
line-height: 1;
margin-bottom: 20px;
padding-left: 50px;
}
.top_medical01 h4::before{
position:absolute;
width:34px;
height:38px;
left:0;
top:0;
bottom:0;
background-image:url(../images/top_medical_01.svg);
background-size:34px 38px;
background-position:left center;
background-repeat:no-repeat;
content:"";
margin: auto;
}
.top_medical01 h4 a{
position: relative;
}
.top_medical01 h4 a::before {
position: absolute;
top: 0;
right: -15px;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px solid #5AC2D7;
border-top: 1px solid #5AC2D7;
content: "";
margin: auto;
bottom: 0;
transition: ease-in-out 0.1s;
}
.top_medical01 h4 a:hover{
color: #A3DEA2;
}
.top_medical01 h4 a:hover::before {
right: -20px;
border-right: 1px solid #A3DEA2;
border-top: 1px solid #A3DEA2;
}
.top_medical01_viewtext{
font-family: brandon-grotesque, sans-serif;
font-weight: 500;
}
.top_medical01_viewtext {
position: absolute;
right: 0;
top: 2px;
}
.top_medical01_viewtext a,
.top_medical02_viewtext a{
display: block;
letter-spacing: 0.15em;
color: #5AC2D7;
transition: 0.2s;
border-bottom: 1px solid #5AC2D7;
}
.top_medical01_viewtext a:hover,
.top_medical02_viewtext a:hover{
letter-spacing: 0.3em;
color: #84d779;
border-bottom: 1px solid #84d779;
}
.top_medical01::before{
position:absolute;
top:0;
left:0;
background-color:#fff;
border-radius:10px;
box-shadow: 0 10px 14px -2px rgba(25,112,9,0.03);
transition: 0.1s ease-in-out;
content:"";
width:100%;
height:100%;
z-index:1;
}
.top_medical01_inner{
position:relative;
z-index:2;
}
.top_medical01-active.top_medical01::before{
background-color: #DAF2DA;
transform:scale(1.05,1.05);
box-shadow: 0 18px 24px -2px rgba(25,112,9,0.11);
}
.top_medical01-active .top_medical01_list ul li a{
border-bottom:1px dotted #84d779;
}
.top_medical01_list{
display:flex;
justify-content: space-between;
}
.top_medical01_list ul li a{
display:block;
padding: 7px 0;
border-bottom:1px dotted #5AC2D7;
color:#454545;
}
.top_medical01_list ul li a:hover{
background-color:#DAF2DA;
border-bottom:1px dotted #A3DEA2;
}
.top_medical01_list ul:nth-child(1){
width: 35.2%;
}
.top_medical01_list ul:nth-child(2){
min-width: 56.8%;
}
.top_medical02_outer{
justify-content: flex-end;
display: flex;
margin-bottom:40px;
}
.top_medical02{
display: inline-block;
position: relative;
width:44.6%;
margin-top: 40px;
padding:60px 60px;
box-sizing:border-box;
border-radius:10px;
}
.top_medical02_inner{
position:relative;
z-index:2;
}
.top_medical02::before{
position:absolute;
top:0;
left:0;
background-color:#fff;
border-radius:10px;
box-shadow: 0 10px 14px -2px rgba(25,112,9,0.03);
transition: 0.1s ease-in-out;
content:"";
width:100%;
height:100%;
z-index:1;
}
.top_medical02-active.top_medical02::before{
background-color: #DAF2DA;
transform:scale(1.05,1.05);
box-shadow: 0 10px 14px -2px rgba(25,112,9,0.03);
transition: 0.1s ease-in-out;
}
.top_medical02 h4{
position:relative;
font-size: 24px;
font-weight: bold;
line-height: 1;
margin-bottom: 20px;
padding-left: 50px;
}
.top_medical02 h4 a{
position: relative;
}
.top_medical02 h4 a::before {
position: absolute;
top: 0;
right: -15px;
width: 8px;
height: 8px;
transform: rotate(45deg);
border-right: 1px solid #5AC2D7;
border-top: 1px solid #5AC2D7;
content: "";
margin: auto;
bottom: 0;
transition: ease-in-out 0.1s;
}
.top_medical02 h4::before{
position:absolute;
width:34px;
height:38px;
left:0;
top:0;
bottom:0;
background-image:url(../images/top_medical_02.svg);
background-size:34px 38px;
background-position:left center;
background-repeat:no-repeat;
content:"";
margin: auto;
}
.top_medical02 h4 a:hover{
color: #A3DEA2;
}
.top_medical02 h4 a:hover::before {
right: -20px;
border-right: 1px solid #A3DEA2;
border-top: 1px solid #A3DEA2;
}
.top_medical02_viewtext{
font-family: brandon-grotesque, sans-serif;
font-weight: 500;
}
.top_medical02_viewtext {
position: absolute;
right: 0;
top: 2px;
}
.top_medical02-active{
background-color: #DAF2DA;
}
.top_medical02-active .top_medical02_list ul li a{
border-bottom:1px dotted #84d779;
}
.top_medical02_list{
display:flex;
justify-content: space-between;
margin-bottom: 19px;
}
.top_medical02_list ul li a{
display:block;
padding: 7px 0;
border-bottom:1px dotted #5AC2D7;
color:#454545;
}
.top_medical02_list ul li a:hover{
background-color:#DAF2DA;
border-bottom:1px dotted #A3DEA2;
}
.top_medical02_list ul:nth-child(1){
min-width: 50.9%;
}
.top_medical02_list ul:nth-child(2){
min-width: 40%;
}
.top_medical02 p{
font-size:13px;
}
.top_medical02 p img{
margin:0 4px;
}
.top_medical_area{
display:flex;
justify-content:space-between;
}
.top_medical03,
.top_medical04,
.top_medical05,
.top_medical06{
position:relative;
width:23.08%;
box-sizing:border-box;
}
.top_medical03::before,
.top_medical04::before,
.top_medical05::before,
.top_medical06::before{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#fff;
border-radius:10px;
box-shadow: 0 10px 14px -2px rgba(25,112,9,0.03);
transition: 0.1s ease-in-out;
content:"";
z-index:1;
}
.top_medical03 a,
.top_medical04 a,
.top_medical05 a,
.top_medical06 a{
position:relative;
display:block;
padding:14%;
border-radius:10px;
color:#454545;
z-index:2;
}
@media screen and (max-width:1330px) {
.top_medical03 a,
.top_medical04 a,
.top_medical05 a,
.top_medical06 a{
padding:12%;
}
}
.top_medical03:hover::before,
.top_medical04:hover::before,
.top_medical05:hover::before,
.top_medical06:hover::before{
background-color:#DAF2DA;
transform:scale(1.05,1.05);
box-shadow: 0 12px 16px -2px rgba(25,112,9,0.03);
}
.top_medical03 h4,
.top_medical04 h4,
.top_medical05 h4,
.top_medical06 h4{
position:relative;
font-size: 24px;
font-weight: bold;
line-height: 1;
margin-bottom: 15px;
padding-left: 50px;
}
.top_medical03 p,
.top_medical04 p,
.top_medical05 p,
.top_medical06 p{
font-size:15px;
}
.top_medical03 h4::before{
position:absolute;
width: 29px;
height: 32px;
left:0;
top:0;
bottom:0;
background-image:url(../images/top_medical_03.svg);
background-size:cover;
background-position:left center;
background-repeat:no-repeat;
content:"";
margin: auto;
}
.top_medical04 h4::before{
position:absolute;
width: 42px;
height: 39px;
left:0;
top:-4px;
bottom:0;
background-image:url(../images/top_medical_04.svg);
background-size:cover;
background-position:left center;
background-repeat:no-repeat;
content:"";
margin: auto;
}
.top_medical05 h4::before{
position:absolute;
width: 44px;
height: 23px;
left: -1px;
top: 5px;
bottom:0;
background-image:url(../images/top_medical_05.svg);
background-size:cover;
background-position:left center;
background-repeat:no-repeat;
content:"";
margin: auto;
}
.top_medical06 h4::before{
position:absolute;
width:39px;
height:38px;
left:1px;
top:0;
bottom:0;
background-image:url(../images/top_medical_06.svg);
background-size:cover;
background-position:left center;
background-repeat:no-repeat;
content:"";
margin: auto;
}
.top_medical_illust{
position: absolute;
bottom: 525px;
right: 20px;
width: 166px;
height: 162px;
background-image: url(../images/top_medical_img01.svg);
background-size: cover;
content: "";
z-index: 1;
}
.top_medical_illust_light::before{
position: absolute;
width: 79px;
height: 19px;
background-image: url(../images/top_medical_illust_light01.svg);
background-size: cover;
content: "";
z-index: 1;
top: 22px;
left: 43px;
}
/* .top_medical_illust_light::after{
position: absolute;
width: 54px;
height: 18px;
background-image: url(../images/top_medical_illust_light02.svg);
background-size: cover;
content: "";
z-index: 1;
top: 21px;
left: 65px;
} */
.top_medical_illust_item::before{
position: absolute;
width: 22px;
height: 62px;
background-image: url(../images/top_medical_illust_item02.svg);
background-size: cover;
content: "";
z-index: 1;
top: 0px;
left: 0;
}
.top_medical_illust_item::after{
position: absolute;
width: 26px;
height: 59px;
background-image: url(../images/top_medical_illust_item01.svg);
background-size: cover;
content: "";
z-index: 1;
top: 1px;
right: 0;
}
/*==================================================================
$top_about
==================================================================*/
.top_about{
position: relative;
min-height:710px;
justify-content: flex-end;
display: flex;
margin-bottom: -200px;
z-index: 1;
}
.top_about ::selection{
background-color:#E9F4FB;
color:#5AC2D7;
}
.top_about ::-moz-selection{
background-color:#E9F4FB;
color:#5AC2D7;
}
.top_about_img::before {
position: relative;
bottom: -359px;
right: 540px;
font-size: 235px;
font-family: brandon-grotesque, sans-serif;
font-weight:700;
letter-spacing: 0.125em;
color: #B4A4DB;
content: "ABOUT US";
opacity: 0.2;
white-space: nowrap;
pointer-events: none;
z-index: 2;
}
.top_about::after {
position: absolute;
bottom: -90px;
left: calc((100% - 1200px) / 2 + 346px);
width: 110px;
height: 233px;
background-image: url(../images/top_about_img02.svg);
background-repeat:no-repeat;
content: "";
animation: cloud 4s ease-in-out 0s infinite alternate;
z-index: 11;
}
.top_about .box2{
position:absolute;
top: -23px;
right:0;
width:calc(50% + 102px);
padding:113px 100px;
box-sizing:border-box;
background-color:#5AC2D7;
color:#fff;
box-shadow: 0 12px 26px -2px rgba(11,127,153,0.17);
z-index: 10;
overflow: hidden;
}
.top_about .text{
position:relative;
max-width: 700px;
}
.top_about .text .btn02{
margin-top:50px;
}
.top_about .text::before{
position:absolute;
bottom: -10px;
right: -27px;
width:156px;
height:72px;
background-image:url(../images/top_about_img03.svg);
background-size:cover;
content:"";
}
.top_about_img{
position:absolute;
top: 120px;
left:0;
width:calc(50% + 72px);
height:664px;
background-image:url(../images/top_about_img01.jpg);
background-size:cover;
background-position: center;
}
/*==================================================================
.top_adv
==================================================================*/
.top_adv{
position:relative;
padding-top: 114px;
padding-bottom: 194px;
overflow: hidden;
}
.top_adv::before {
display: none;
position: absolute;
bottom: -146px;
right: -70%;
font-size: 235px;
font-family: brandon-grotesque, sans-serif;
font-weight:700;
letter-spacing: 0.125em;
color: #FFAC74;
content: "OUR ADVANTAGE";
z-index: 1;
opacity: 0.1;
white-space: nowrap;
pointer-events: none;
}
.top_adv .box1::after{
position: absolute;
bottom: -175px;
right: 36px;
width: 80px;
height: 180px;
background-image: url(../images/top_adv_img02.svg);
background-size:cover;
content: "";
z-index: 1;
animation: cloud 4s ease-in-out 0s infinite alternate;
}
.top_adv_area {
display: flex;
justify-content: space-between;
position: relative;
top: 10px;
}
.top_adv_area dl{
position: relative;
width:22.5%
}
.top_adv_area dl::before{
display: block;
width:100%;
height:385px;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
content:"";
}
@media screen and (min-width:1300px) {
.top_adv_area dl::before{
height:400px;
}
}
@media screen and (min-width:1420px) {
.top_adv_area dl::before{
height:450px;
}
}
.top_adv1::before{
background-image:url(../images/top_adv_1.jpg);
}
.top_adv2::before{
background-image:url(../images/top_adv_2.jpg);
}
.top_adv3::before{
background-image:url(../images/top_adv_3.jpg);
}
.top_adv4::before{
background-image:url(../images/top_adv_4.jpg);
}
.top_adv_area dl dt{
font-size:22px;
letter-spacing:0.09em;
font-weight:bold;
margin-top: 18px;
margin-bottom: 8px;
line-height: 1.4;
}
.top_adv_area dl dt::before{
position:absolute;
top: -29px;
left: 20px;
font-family: brandon-grotesque, sans-serif;
font-size:42px;
font-weight:700;
}
.top_adv1 dt::before{
color:#5AC2D7;
content:"01";
}
.top_adv2 dt::before{
color:#B4A4DB;
content:"02";
}
.top_adv3 dt::before{
color:#F692AB;
content:"03";
}
.top_adv4 dt::before{
color:#FFAC74;
content:"04";
}
.top_adv_area dl dt::after{
position:absolute;
top: -34px;
left: 40px;
width:12px;
height:12px;
background-image:url(../images/top_adv_img01.svg);
background-size:cover;
content:"";
}
.top_adv_area dl dd{
font-size: 14px;
line-height: 1.75;
}
.top_adv_area dl dd.textajust{
letter-spacing: 0.045em;
}
.sp_inline-ip5{
display:none;
}
/*==================================================================
.news
==================================================================*/
.top_news{
position:relative;
font-size:14.5px;
background-color:#F2F9FD;
padding:110px 0 120px;
overflow:hidden;
transition:0.2s ease-in-out;
}
.top_news-active{
background-color:#E6F2FB;
}
.top_news::before{
position:absolute;
bottom: -150px;
right: -1040px;
font-size:235px;
font-family: brandon-grotesque, sans-serif;
font-weight:700;
letter-spacing:0.125em;
color:#E9F4FB;
content:"INFORMATION";
transition:0.2s ease-in-out;
z-index:0;
}
.top_news-active.top_news::before{
color:#F2F9FD;
}
.top_news_illust::before{
position:absolute;
right: -20px;
bottom: -27px;
width: 156px;
height: 139px;
background-image:url(../images/top_info_img01.svg);
background-size:cover;
content:"";
}
.top_news_illust::after{
position:absolute;
right: 105px;
bottom: -12px;
width: 30px;
height:82px;
background-image:url(../images/top_info_img02.svg);
background-size:cover;
content:"";
}
.top_news_flame{
display: flex;
margin-bottom: 42px;
}
.blog_information{
width:31.7%;
}
.blog_information{
position:relative;
margin-right:2.45%;
}
.blog_information::before{
position:absolute;
width:100%;
height:100%;
border-radius: 10px;
background-color:#fff;
box-shadow: 0 10px 14px -2px rgba(9,0,94,0.03);
transition:0.15s ease-in-out;
content:"";
}
.blog_information:hover::before{
transform:scale(1.08,1.08);
background-color:#E6F2FB;
box-shadow: 0 6px 6px -2px rgba(9,0,94,0.05);
}
.blog_information a{
color:#545454;
text-decoration:none;
}
.blog_information dl::before{
position:absolute;
right: 33px;
bottom: -14px;
border-top:12px solid #fff;
border-right:12px solid #fff;
border-bottom:12px solid transparent;
border-left:12px solid transparent;
transition:0.15s ease-in-out;
content:"";
z-index:2;
}
.blog_information:last-child{
margin-right:0;
}
.blog_information dl{
position:relative;
top:0;
padding: 21px 32px 25px;
z-index:1;
}
.blog_information a:hover dl::before{
transform:scale(1.3,1.3);
border-top:12px solid #E6F2FB;
border-right:12px solid #E6F2FB;
}
.blog_information dl dt{
}
.blog_information dl dd h4{
font-size:18px;
font-weight:bold;
line-height: 1.3;
}
.blog_information dl dd p{
font-size:14px;
color:#5AC2D7;
font-family: brandon-grotesque, sans-serif;
font-weight:300;
}
.news_text{
}
.news_text p {
margin-bottom:4px;
}
/* タイトル */
.news_text #data p {
margin-bottom: 10px;
}
.news_text p strong{
font-size: 18px;
font-weight: bold;
line-height: 1.3;
}
/* 日付 */
.date{
margin-right: 16px;
color: #5AC2D7;
font-family: brandon-grotesque, sans-serif;
font-weight: 300;
}
/* お知らせのブロックのボーダー */
.news_text .line{
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #eee;
}
/* お知らせの高さ */
.scroll_area{
height:200px;
}
.top_news_btn {
display: inline-block;
}
.top_bnrs {
display: flex;
align-items: baseline;
}
.top_bnrs a {
display: inline-block;
width: 24%;
margin-right: 1.3%;
}
.top_bnrs a:nth-of-type(4n) {
margin-right: 0;
}
.top_bnrs img {
width: 100%;
}
/*トップページお知らせ4つのみ表示させる*/
.top_news .news_text .blog_information {
display: none;
}
.top_news .news_text .blog_information:nth-child(1), .top_news .news_text .blog_information:nth-child(2), .top_news .news_text .blog_information:nth-child(3), .top_news .news_text .blog_information:nth-child(4) {
display: block;
}
/*==================================================================
$doctor
==================================================================*/
.doctor{
overflow: initial !important;
}
.doctor_greet {
margin-bottom: 162px;
}
.doctor_greet::before {
position: absolute;
top: -178px;
right: 344px;
width: 3000px;
background-color: #f7f5fb;
content: "";
height: 1060px;
z-index: -5;
}
.top_doctor_img {
position: absolute;
top: 0;
right: 60px;
width: 600px;
overflow: hidden;
}
.doctor_greet .text {
padding-top: 62px;
width: 62.5%;
font-size: 18px;
line-height: 1.8;
letter-spacing: 1.7px;
}
.doctor_name {
margin-top: 29px;
}
.doctor_name dt {
font-weight: bold;
font-size: 18px;
letter-spacing: 2.2px;
}
.doctor_name dd {
font-weight: bold;
font-size: 21.06px;
line-height: 1.5;
letter-spacing: 3px;
}
.doctor_name em {
display: block;
color: #B4A4DB;
font-weight: 300;
font-size: 18.72px;
letter-spacing: 1.8px;
line-height: 1.2;
font-family: brandon-grotesque,sans-serif;
}
.doctor_carr {
flex-wrap: wrap;
display: flex;
}
.doctor_carr_sec1 {
width: 50%;
padding: 4%;
box-sizing: border-box;
background-color: #fff;
}
.doctor_carr_sec2 {
width: 50%;
padding: 4%;
box-sizing: border-box;
background-color: #fff;
}
/*==================================================================
$access
==================================================================*/
.access_container{
position: relative;
margin-top: -178px;
padding-top: 178px;
}
.access_container::before {
position: absolute;
top: -178px;
left: 0;
width: calc(50% + 230px);
background-color: #FFAC74;
content: "";
height: calc(100% + 72px);
z-index: -5;
opacity: 0.1;
}
.access_box{
position: relative;
display: flex;
justify-content: space-between;
padding-bottom: 180px;
}
.access_sec1{
background-color: #fff;
padding: 8%;
width: 53%;
box-sizing: border-box;
min-height: 580px;
}
.access_sec1 p{
line-height: 1.4;
margin-bottom: 30px;
}
.access_sec1 h4{
margin-bottom: 5px;
}
.access_sec2{
width: 53%;
position: absolute;
top: 9%;
right: 0;
box-shadow: 0 12px 26px -2px rgba(255,172,110,0.17);
}
.access_sec2 iframe{
display: block;
height: 580px;
}
.access_guide{
margin-bottom:20px;
}
.access_map{
margin-bottom:40px;
}
.access_map dt{
margin-bottom:10px;
}
.access_map dt i{
margin-right:7px;
}
.access .btn02{
text-align:center;
margin-bottom:50px;
}
.access_info{
border: 4px solid rgb(237, 237, 237);
padding: 25px 30px 5px;
}
.access_info dt i{
margin-right:7px;
}
.access_train,.access_bus,.access_car,.access_bike{
margin-bottom:25px;
}
.access_train dt,.access_bus dt,.access_car dt,.access_bike dt{
padding-left: 0;
margin-bottom:5px;
font-size:17px;
font-weight:bold;
}
.access_train dd,.access_bus dd,.access_car dd,.access_bike dd{
font-size:14.5px;
}
/*==================================================================
$clinic
==================================================================*/
.clinic{
margin-top:-178px;
padding-top:178px;
}
/* 院内スライド（サムネイル右、1列） */
.clinic_slides1{
}
.clinic_slides1 .flexslider{
position:relative;
float:left;
width:82%;
}
.clinic_slides1 .flexslider li div{
display:table;
position:relative;
margin-top:-60px;
margin-left:20px;
background-color: rgba(255,255,255,0.9);
}
.clinic_slides1 .flexslider p{
display:table-cell;
padding:8px 10px;
vertical-align:middle;
font-size:16px;
font-weight:bold;
color:#454545;
}
.clinic_slides1 .flex-control-thumbs .flex-active img{
border: 5px solid #aaa;
}
.clinic_slides1 .flex-control-nav.flex-control-thumbs{
position:absolute;
right: -22%;
top: 0;
width: 15%;
}
.clinic_slides1 .flex-control-thumbs li {
position:relative;
width: 96%;
margin: 0 0 0 4%;
background-color:#fff;
}
/* 院内スライド（サムネイル下） */
.clinic_slides2{
padding-bottom:100px;
}
.clinic_slides2 .flexslider{
position:relative;
}
.clinic_slides2 .flex-control-thumbs img:hover {
opacity: 1;
}
.clinic_slides2 .flexslider li div{
display:table;
position: absolute;
margin-top:-60px;
margin-left:20px;
background-color: rgba(255,255,255,0.9);
}
.clinic_slides2 .flexslider p{
display:table-cell;
padding:8px 10px;
vertical-align:middle;
font-size:16px;
font-weight:bold;
color:#002A64;
}
.clinic_slides2 .flex-control-thumbs {
margin: 10px 0px 0px;
position: absolute;
overflow: hidden;
z-index: 10;
bottom: -100px;
width: 100%;
right: 0px;
left: 0px;
padding: 0px 2%;
}
.clinic_slides2 .flex-control-thumbs li {
width: 15%;
}
.clinic_slides2 .flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: 0.5;
cursor: pointer;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
/* 院内スライド（サムネイル下、スライドの上にタイトル、説明文） */
.clinic_slides3{
}
.clinic_slides3 .flexslider{
position:relative;
float:left;
width:82%;
}
.clinic_slides3 .flexslider li div{
display:table;
position:absolute;
width:94%;
height:80px;
margin-top:-95px;
margin-right:3%;
margin-left:3%;
background-color: rgba(255,255,255,0.9);
}
.clinic_slides3 .flexslider h4,.clinic_slides3 .flexslider p{
display:table-cell;
padding:8px 15px;
box-sizing:border-box;
vertical-align:middle;
text-align:left;
}
.clinic_slides3 .flexslider h4{
width:20%;
font-size:16px;
font-weight:bold;
color:#002A64;
}
.clinic_slides3 .flexslider p{
}
.clinic_slides3 .flex-control-thumbs .flex-active img{
border: 5px solid #aaa;
}
.clinic_slides3 .flex-control-nav.flex-control-thumbs{
position:absolute;
right: -22%;
top: 0;
width: 15%;
}
.clinic_slides3 .flex-control-thumbs li {
position:relative;
width: 96%;
margin: 0 0 4% 4%;
background-color:#fff;
}
/* 院内スライド（サムネイル下、タイトル、説明文下） */
.clinic_slides4{
padding-bottom:100px;
}
.clinic_slides4 .flex-control-thumbs {
margin: 10px 0px 0px;
position: absolute;
overflow: hidden;
z-index: 10;
bottom: -40px;
width: 100%;
right: 0px;
left: 0px;
padding: 0px 2%;
}
.clinic_slides4 .flex-control-thumbs li {
width: 15%;
}
.clinic_slides4 .flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: 1;
cursor: pointer;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.clinic_slides4 .flex-control-thumbs img:hover {
opacity: 1;
}
.clinic_slides4 .flexslider li div{
display:table;
position: absolute;
bottom:-80px;
margin-left:20px;
background-color: rgba(255,255,255,0.9);
}
.clinic_slides4 .flexslider h4,.clinic_slides4 .flexslider p{
display:table-cell;
padding:8px 10px;
box-sizing:border-box;
vertical-align:middle;
}
.clinic_slides4 .flexslider h4{
width:20%;
font-size:16px;
font-weight:bold;
color:#002A64;
}
.clinic_slides4 .flexslider p{
}
/* 院内スライド（サムネイル下、タイトル、説明文下） */
.clinic_slides5{
padding-bottom:100px;
}
.clinic_slides5 .flex-control-thumbs {
margin: 10px 0px 0px;
position: absolute;
overflow: hidden;
z-index: 10;
bottom: -40px;
width: 100%;
right: 0px;
left: 0px;
padding: 0px 2%;
}
.clinic_slides5 .flex-control-thumbs li {
width: 15%;
}
.clinic_slides5 .flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: 1;
cursor: pointer;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.clinic_slides5 .flex-control-thumbs img:hover {
opacity: 1;
}
.clinic_slides5 .flexslider li div{
position: absolute;
bottom:-80px;
width: 100%;
margin-left:20px;
background-color: rgba(255,255,255,0.9);
}
.clinic_slides5 .flexslider h4{
padding:8px 10px;
font-size:16px;
font-weight:bold;
color:#002A64;
text-align:center;
}
/* 医院概要 */
.clinic_sec1{
position:relative;
font-size:14.5px;
}
.clinic_sec1 ul{
margin-bottom:15px;
}
.clinic_sec1 li{
padding: 8px 0;
border-bottom:1px solid #E5E6EF;
}
.clinic_sec1 li:first-child{
padding:0 0 8px 0 ;
}
.clinic_sec1 li:last-child{
border:none;
}
.clinic_sec1 dl:after {
display: block;
clear: both;
content: "";
}
.clinic_sec1 dt{
float:left;
box-sizing:border-box;
width:25%;
padding-left:2px;
font-weight:bold;
}
.clinic_sec1 dd{
float:left;
width:75%;
}
.clinic_sec1 .schedule .tb01{
border: 1px solid #e4e4e4;
width:100%;
font-size:14px;
}
.clinic_sec1 .schedule .tb01 tr:first-child th,
.clinic_sec1 .schedule .tb01 tr:first-child td{
background-color:#f2f7fa;
font-weight:bold;
}
.clinic_sec1 .schedule .tb01 tr:first-child{
}
.clinic_sec1 .schedule li{
border-bottom:none;
}
.clinic_sec2 {
position: relative;
text-align: center;
padding-bottom: 140px;
}
.clinic_sec2_img01{
position: absolute;
bottom: 4%;
left: 4%;
width: 245px;
height: 30px;
background-image: url(../images/clinic_img01.svg);
background-size: cover;
content: "";
z-index: 1;
}
.clinic_sec2_img02{
position: absolute;
top: 12%;
right: 4%;
width: 145px;
height: 160px;
background-image: url(../images/9.gif);
background-size: cover;
content: "";
z-index: 1;
}
.clinic_sec2::before{
position: absolute;
top: -178px;
left: 0;
width: 100%;
background-color: #F2FAFB;
content: "";
height: calc(100% + 178px);
z-index: -5;
}
.clinic_sec2 .box1{
background-color: #5AC2D7;
box-shadow: 0 12px 26px -2px rgba(11,127,153,0.17);
color:#fff;
padding: 4%;
box-sizing: border-box;
margin-bottom: 0;
}
.clinic_sec2 h3{
font-family: brandon-grotesque,sans-serif;
font-weight: 700;
font-size: 20px;
/* color: #5AC2D7; */
margin-bottom: 15px;
letter-spacing: 0.125em;
}
.clinic_sec2 h4{
text-align: center;
line-height: 44px;
margin-bottom: 2.5%;
}
.clinic_sec3.top_adv{
padding: 114px 0 150px;
}
.clinic_sec3 .box1{
margin-bottom: 0;
}
.clinic_sec3 .text{
width: 66.5%;
font-size: 16px;
margin-bottom: 60px;
}
.top_adv.clinic_sec3 .box1::after{
top: 75px;
right: 246px;
bottom: auto;
}
.clinic_sec4{
position: relative;
}
.clinic_sec4::before{
position: absolute;
left: 0;
top: 120px;
background-image: url(../images/clinic_mrc_img01.jpg);
background-size: cover;
content: "";
width: calc((100% - 1200px)/2 + 420px);
height: calc(100% - 240px);
background-position: right;
}
.clinic_sec4::after{
position:absolute;
width:calc((100% - 1200px)/2 + 1140px);
height:100%;
top:0;
right:0;
background-color: #F2FAFB;
content:"";
z-index:-1;
}
.clinic_sec4_img{
position: absolute;
right: 11%;
top: 90px;
width: 176px;
height: 111px;
background-image: url(../images/myobrace1_img02.png);
background-size: cover;
}
.clinic_sec4_img {
}
.clinic_sec4 h3.tit01 em::before,
.clinic_sec4 h3.tit01::after{
display: none;
}
.clinic_sec4 .box1{
padding: 54px 0 60px;
display: flex;
justify-content: flex-end;
}
.clinic_sec4 sup{
font-size: 20px;
}
.clinic_sec4 .text{
background-color: #fff;
padding: 11% 0 11% 11%;
box-sizing: border-box;
}
.clinic_sec4_right{
width: 70%;
position: relative;
}
.clinic_sec4_right::before {
position: absolute;
width: 300%;
height: 100%;
content: "";
background-color: #fff;
}
.clinic_sec4_right h4.tit01{
font-size: 23px;
}
.clinic_sec5_outer{
display: flex;
justify-content: space-between;
}
.clinic_sec5_left{
width: 46%;
}
.clinic_sec5_right{
width: 46%;
}
.clinic_sec5{
position:relative;
}
.clinic_sec5 ul{
margin-bottom:15px;
}
.clinic_sec5 li{
padding: 8px 0;
border-bottom:1px solid #E5E6EF;
}
.clinic_sec5 li:first-child{
padding:0 0 8px 0 ;
}
.clinic_sec5 li:last-child{
border:none;
}
.clinic_sec5 dl:after {
display: block;
clear: both;
content: "";
}
.clinic_sec5 dt{
float:left;
box-sizing:border-box;
width:28%;
padding-left:2px;
font-weight:bold;
}
.clinic_sec5 dd{
float:left;
width:72%;
}
.clinic_sec5 .schedule table{
border: 1px solid #DDDDDD;
margin-bottom: 10px;
}
.clinic_sec5 .schedule th,
.clinic_sec5 .schedule td{
padding: 8px 14px;
}
.clinic_sec5 .schedule td:last-child{padding-right: 14px;
}
/*==================================================================
$facilities
==================================================================*/
/* 機器紹介1 */
.facilities_equip dl{
float:left;
width:42.3%;
min-height:280px;
margin-bottom:30px;
margin-left:3.4%;
padding:3%;
border-top:4px solid #9397BE;
background-color:#f7f7f7;
text-align:justify;
font-size:14px;
}
.facilities_equip dl:nth-child(odd){
margin-left:0;
}
/* 機器紹介名前 */
.facilities_equip dt{
margin-bottom:14px;
padding-bottom:10px;
line-height: 1.7;
font-size:17px;
font-weight:bold;
text-align:left;
}
.facilities_equip dt span{
display:block;
font-size:15px;
}
.facilities_equip_img{
float: right;
width:50%;
margin-left:20px;
}
.facilities_equip_img img{
width:100%;
}
/* 機器紹介2 */
.facilities_equip2 dl{
float:left;
width:31%;
margin-bottom:30px;
margin-right:3.5%;
background-color:#f7f7f7;
text-align:justify;
font-size:14px;
}
.facilities_equip2 dl:nth-child(3n){
margin-right:0;
}
/* 機器紹介名前 */
.facilities_equip2 dt{
}
.facilities_equip2 dt img{
width:100%;
}
.facilities_equip2 dd{
padding: 10px 15px 18px;
line-height: 1.35;
}
.facilities_equip2 dd h4{
text-align:center;
font-size:17px;
font-weight:bold;
}
.facilities_equip2 dd p{
margin-top:7px;
}
/* 機器紹介3 */
.facilities_equip3 dl{
float:left;
width:47.5%;
margin-bottom:35px;
margin-right:5%;
background-color:#f7f7f7;
text-align:justify;
font-size:14px;
}
.facilities_equip3 dl:nth-child(even){
margin-right:0;
}
/* 機器紹介名前 */
.facilities_equip3 dt{
}
.facilities_equip3 dt img{
width:100%;
}
.facilities_equip3 dd{
padding: 10px 15px 18px;
line-height: 1.35;
}
.facilities_equip3 dd h4{
text-align:center;
font-size:17px;
font-weight:bold;
}
.facilities_equip3 dd p{
margin-top:7px;
}
/*==================================================================
$qa
==================================================================*/
.qa1{
}
.qa1 dl{
margin-bottom:25px;
padding-bottom:25px;
border-bottom:1px dotted #c1c1c1;
}
.qa1 dl dt{
position:relative;
margin-bottom: 15px;
padding-left:40px;
font-weight:bold;
}
.qa1 dl dt:before{
position: absolute;
top:-5px;
left:0;
margin-right:7px;
line-height: 1;
font-family:"Times New Roman", Times, serif;
font-weight:normal;
font-size:28px;
color:#262E7C;
content:"Q.";
}
.qa1 dl dd{
position:relative;
padding-left:40px;
}
.qa1 dl dd:before{
position: absolute;
top:-5px;
left:0;
margin-right:7px;
line-height: 1;
font-family:"Times New Roman", Times, serif;
font-weight:normal;
font-size:28px;
color:#C0AB9A;
content:"A.";
}
/*==================================================================
.class.html
==================================================================*/
.oyako_class_box {
padding: 20px 0;
}
.oyako_class_box dl {
margin-bottom: 5px;
}
.oyako_class_box dl dt{
font-weight: bold;
background-color: #ffebf0;
display: inline-block;
padding: 0px 10px;
border-radius: 3px;
}
.oyako_class_box dl:first-child dt{
background-color: #ffc6d4;
}
.oyako_class_box dl dd{
padding-left: 1em;
}
.list03_class li {
margin-bottom: 2px;
}
.overline {
text-decoration: line-through;
}