/* ======================================== *
* for Mobile --base size 360px
/* ======================================== */
body {
font-size: 1.4rem;
line-height: 2rem;
}
/* ---------- ヘッダー ---------- */
header div {
display: flex;
justify-content: space-between;
background: linear-gradient(to bottom, #462e1e, #3f291b);
height: 55px;
}
header h1 a {
display: block;
line-height: 55px;
}
header h1 img {
height: 25px;
vertical-align: middle;
margin: 0 0 0.3rem 0.7rem;
}
.en header h1 img {
height: 19px;
margin: 0 0 0.3rem 0.5rem;
}
.head_nav {
margin: 0 0.5rem 0 auto;
}
.head_nav_list:first-child {
display: flex;
color: #f2e9da;
}
.head_nav_list > li {
line-height: 55px;
font-size: 1.1rem;
}
.en .head_nav_list > li {
font-size: 1rem;
}
.head_nav_list > li:not(:last-child) {
display: none;
}
/* 言語切替 */
.lang {
position: relative;
}
.lang a {
color: #c39b77;
}
.lang > a {
display: block;
width: 8em;
}
.en .lang > a {
width: 7em;
}
.lang > a::after {
display: block;
content: "";
position: relative;
top: 10px;
right: -45%;
border: 5px solid transparent;
border-left: 5px solid #c39b77;
transform: rotate(90deg);
}
.en .lang > a::after {
top: 1px;
right: -47%;
}
.lang ul li:not(.current) a {
color: #f2e5d2;
}
.lang ul {
position: absolute;
right: -0.5em;
top: 54px;
z-index: 5;
width: 9em;
visibility: hidden;
opacity: 0;
transition: all .3s;
}
.lang ul li a {
display: block;
line-height: 50px;
background: linear-gradient(to bottom, #462e1e, #3f291b);
}
.lang ul li:last-child a {
border-radius: 0 0 6px 6px;
}
.lang:hover > ul,
.lang ul li:hover > ul,
.lang:active > ul,
.lang ul li:active > ul {
visibility: visible;
opacity: 1;
}
/* ---------- /ヘッダー ---------- */
/* ---------- SP版メニュー ---------- */
/* PC版は非表示 */
.gnav_pc {
display: none;
}
/* ハンバーガー */
.drawer_hidden {
display: none;
}
.drawer_open {
display: flex;
height: 55px;
width: 45px;
justify-content: center;
align-items: center;
position: relative;
top: -5px;
z-index: 100;
cursor: pointer;
}
.drawer_open:after {
content: 'MENU';
font-size: 0.9rem;
padding: 3.7rem 0.1rem 0 0;
color: #f2e5d2;
}
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
content: '';
display: block;
height: 2px;
width: 26px;
border-radius: 3px;
background: #f2e5d2;
transition: 0.5s;
position: absolute;
}
.drawer_open span:before {
bottom: 8px;
}
.drawer_open span:after {
top: 8px;
}
/* アイコンクリック時 */
#drawer_input:checked ~ .drawer_open span {
background: rgba(255, 255, 255, 0);
}
#drawer_input:checked ~ .drawer_open span::before {
bottom: 0;
transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
top: 0;
transform: rotate(-45deg);
}
/*
#drawer_input:checked ~ .drawer_open::after {
content: '閉じる';
padding: 3.7rem 0 0 0.2rem;
}
*/
/* メニュー一覧 */
.nav_content {
width: 90%;
height: 100%;
position: fixed;
top: 55px;
left: 100%;
z-index: 99;
background: #e7d2b2 url(../img/gnav_bg.jpg) no-repeat;
background-size: 1500px auto;
transition: .5s;
}
.nav_content ul {
width: 90%;
margin: 30px auto 0;
}
.nav_content li {
border-bottom: 1px dotted #412a1c;
}
.nav_content a {
font-size: 1.6rem;
line-height: 55px;
}
.gnav_sp_bg {
width: 100%;
height: 100%;
position: fixed;
top: 55px;
left: 100%;
z-index: 98;
background: #fff;
opacity: 0;
}
/* アイコンクリック時 */
#drawer_input:checked ~ .nav_content {
left: 10%;
top: 55px;
}
#drawer_input:checked ~ .gnav_sp_bg {
left: 0;
opacity: 50%;
transition: .3s;
}
/* ---------- /SP版メニュー ---------- */
/* ---------- パンくず ---------- */
.bread_crumb {
position: absolute;
top: 55px;
left: 5px;
display: flex;
font-size: 1rem;
letter-spacing: 0;
z-index: 10;
}
.bread_crumb li a {
margin: 0 1rem 0 0;
}
.bread_crumb li a:after {
content: '';
display: inline-block;
width: 0.4rem;
height: 0.4rem;
position: relative;
top: -2px;
left: 3px;
border-top: 1px solid #412a1c;
border-right: 1px solid #412a1c;
transform: rotate(45deg);
}
/* ---------- /パンくず ---------- */
/* ---------- フッター ---------- */
/* PC版は非表示 */
.footer_pc {
display: none;
}
footer nav {
padding: 20px 0 40px;
background: #e7d2b2 url(../img/gnav_bg.jpg) repeat-x;
background-size: 1500px auto;
}
footer .footer_sp {
width: 85%;
margin: 0 auto;
}
footer .footer_sp tr {
border-bottom: 1px dotted #412a1c;
}
footer .footer_sp td {
padding: 1rem 0.2rem;
width: 50%;
}
footer .footer_sp a {
padding: 1rem 0.2rem;
font-size: 1.2rem;
}
footer .copyright {
margin: 0 0 50px;
padding: 0.5rem;
line-height: 1.5rem;
color: #f2e5d2;
font-size: 1rem;
text-align: center;
background: linear-gradient(to bottom, #462e1e, #3f291b);
}
.en footer .copyright {
margin: 0;
}
/* ---------- /フッター ---------- */
/* ---------- SNSシェアボタン ---------- */
.sns {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
}
.sns li a {
display: block;
width: 28px;
height: 28px;
margin: 0 1rem 0;
}
.sns li:first-of-type a {
width: 24px;
height: 24px;
}
/* ---------- /SNSシェアボタン ---------- */
/* ---------- ページトップ ---------- */
.gototop {
width: 40px;
height: 40px;
display: block;
background: #f2e5d2;
border-radius: 50%;
/* border: 1px solid #fff; */
position: fixed;
bottom: 70px;
right: 10px;
z-index: 99;
transition: .5s;
opacity: 0;
}
.en .gototop {
bottom: 45px;
}
.gototop a {
width: 40px;
height: 40px;
display: block;
position: relative;
left: 34.5%;
top: 40%;
width: 12px;
height: 12px;
border-top: 2px solid #412a1c;
border-right: 2px solid #412a1c;
border-radius: 2px;
transform: rotate(-45deg);
}
/* ---------- /ページトップ ---------- */
/* ---------- 固定ボタン（SPのみ） ---------- */
.fixed_btn {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
z-index: 99;
}
.fixed_btn ul {
display: flex;
}
.fixed_btn li {
justify-content: center;
width: 50%;
border-top: 1px solid #555;
background: linear-gradient(to bottom, #2a2a2a, #262626);
}
.fixed_btn li:first-child ,
.fixed_btn li:nth-of-type(2) {
border-right: 1px solid #555;
}
.fixed_btn li a {
line-height: 50px;
color: #fff;
}
.fixed_btn li a::before {
display: inline-block;
position: relative;
top: 3px;
left: -4px;
content: "";
width: 15px;
height: 15px;
}
.fixed_btn li:first-child a::before {
background: url(../img/ico_clock.svg) left bottom no-repeat;
background-size: auto 15px;
}
.fixed_btn li:nth-of-type(2) a::before {
background: url('data:image/svg+xml;utf8,') left 2px bottom 1px no-repeat;
background-size: auto 14px;
}
.fixed_btn li:last-child a::before {
background: url('data:image/svg+xml;utf8,') left 2px bottom 1px no-repeat;
background-size: auto 20px;
}
/* ---------- /固定ボタン（SPのみ） ---------- */
/* ---------- タブ切替 ---------- */
.tab {
display: flex;
flex-wrap: wrap;
}
.tab li {
/* background: linear-gradient(to bottom, #f7ead6, #f2e5d2); */
background: linear-gradient(to bottom, #F7E8D4, #F2E3CE);
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
.tab li a {
display: block;
line-height: 50px;
text-align: center;
}
/* ---------- /タブ切替 ---------- */
/* ---------- コンテンツラップ ---------- */
.wrap {
width: 85%;
margin: 0 auto 50px;
}
.wrap img {
width: 100%;
margin: 0 0 1.5em;
}
.wrap ul {
list-style: disc;
margin: 1em 1em 2em 2.5em;
}
.wrap li {
margin: 0 0 0.7rem;
}
.wrap ul ul {
list-style: circle;
margin: 1rem 0 2rem 2em;
line-height: 1.3em;
}
/* ※付きの注釈 */
.wrap ul.mark {
list-style: none;
padding: 0;
margin: 0 0 0 0.3rem;
}
.wrap ul.mark li.first::before {
margin-left: -1em;
content: '※';
}
.wrap ul.mark li {
padding-left: 1em;
}
/* 要素を並べて表示する */
.wrap .items {
display: flex;
flex-wrap: wrap;
margin: 0 0 5rem;
width: 100%;
list-style: none;
}
.wrap h3 {
min-width: auto;
}
/* 囲み枠 */
.wrap .box {
margin: 0 0 3rem;
padding: 2rem;
border: 1px solid #ccc;
border-radius: 9px;
}
.wrap .box h3 {
margin: 0 0 3rem;
width: 100%;
border-top: none;
}
/* 注釈付きの写真 */
.annotated_box img {
margin: 0;
}
.annotated_box img + p {
margin: 5px 0 2em;
letter-spacing: 0;
font-size: 75%;
text-align: center;
line-height: 1.8rem;
}
.en .annotated_box img + p {
line-height: 1.5rem;
}
/* ---------- /コンテンツラップ ---------- */
/* ---------- 青い汎用リンクボタン ---------- */
.btn {
position: relative;
display: block;
text-align: center;
background: linear-gradient(to bottom, #fff, #f5f9ff);
border: 1px solid #7bace3;
border-radius: 6px;
}
.btn::after {
position: absolute;
right: -2px;
bottom: -2px;
display: block;
content: "";
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #0f5fc3;
transform: rotate(45deg);
}
/* ---------- /青い汎用リンクボタン ---------- */
/* ---------- 電話をかけるボタン ---------- */
.tel {
display: block;
width: 85%;
margin: 5rem auto;
padding: 1.5rem 0;
background: linear-gradient(to bottom, #462e1e, #3f291b);
border-radius: 6px;
color: #f2e5d2;
}
.tel a {
display: block;
width: 100%;
color: #f2e5d2;
font-size: 2.5rem;
line-height: 3rem;
letter-spacing: 0.2rem;
}
.en .tel a {
padding: 1rem 0 1.3rem;
font-size: 2.2rem;
letter-spacing: 0.1rem;
}
.tel a::before {
position: relative;
display: inline-block;
bottom: -2px;
left: 0;
content: "";
width: 27px;
height: 30px;
background: url('data:image/svg+xml;utf8,') left bottom no-repeat;
background-size: auto 30px;
}
.tel span {
font-size: 1.8rem;
letter-spacing: 0;
}
/* ---------- /電話をかけるボタン ---------- */
/* ---------- PDF ---------- */
/* タブに表示するアイコン */
.tab li.pdf {
list-style: none;
background: url(../img/ico_pdf.svg) no-repeat left -15px center;
background-size: auto 50px;
}
.tab li.pdf a {
background: linear-gradient(to bottom, rgba(245,225,196,0.7), rgba(237,217,187,0.7));
}
/* 本文 */
.wrap .pdf {
margin-left: 0;
border: 1px solid #f2e5d2;
border-radius: 6px;
background: #fff;
}
.wrap .pdf li {
list-style: none;
background: url(../img/ico_pdf.svg) no-repeat -15px 0.3em;
background-size: auto 70px;
padding: 1em 1em 1em calc(1em + 45px);
line-height: 40px;
}
/* ---------- /PDF ---------- */
/* ---------- エリア区切り ---------- */
hr {
border: none;
height: 50px;
background: url(../img/hr.png) repeat-x;
background-size: 900px auto;
background-position: 0 -30px;
}
/* ---------- 枠線付きエリア ---------- */
.pickup {
margin: 1em;
padding: 1em;
border-radius: 6px;
border: 1px solid #c39b77;
}
/* ---------- 帯付きテキスト ---------- */
.subtitle {
margin: 0 auto 1rem;
padding: 0.5rem 0;
text-align: center;
color: #fff;
background: linear-gradient(to right, rgba(195,155,119,0), rgba(195,155,119) 27%, rgba(195,155,119) 73%, rgba(195,155,119,0));
}
.subtitle + h2 {
margin-top: 1rem;
}
.bg_light_beige .subtitle + h2 {
padding-top: 1rem;
}
/* ---------- /帯付きテキスト ---------- */
/* ---------- ポップアップ ---------- */
.popup-bg {
position: fixed;
z-index: 100;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: #000;
opacity: 0.5
}
.popup {
--height: 90%;
--width: 85%;
z-index: 101;
position: fixed;
top: calc(50vh - calc(var(--height) /2));
left: calc(calc(100vw - var(--width)) /2);
height: var(--height);
width: var(--width);
overflow-y: scroll;
background-color: white;
box-shadow: 0px 0px 3px 1px #333;
}
.popup > .close-btn {
--size: 25px;
position: absolute;
/* top: calc(var(--size)/4); */
/* left: calc(var(--width) - var(--size) * 5/4); */
top: -2px;
right: 0;
height: var(--size);
width: var(--size);
display: flex;
justify-content: center;
align-items: center;
background-color: #412a1c;
color: white;
font-size: var(--size);
border-radius: 0 0 0 calc(var(--size)/10);
}
.popup > .content {
padding: 10px;
text-align: center;
}
/*hide popup*/
.popup-flag {
display: none;
}
.popup-flag:not(:checked) + .popup-bg {
display: none;
}
.popup-flag:not(:checked) + * + .popup {
display: none;
}
/* ---------- /ポップアップ ---------- */
/* ---------- その他 ---------- */
main section {
padding: 0 0 100px;
}
main table {
border-radius: 3px;
}
main h1 {
font-size: 2.7rem;
line-height: 114px;
}
h2 {
font-size: 2.3rem;
margin: 5rem 0;
line-height: 3rem;
}
.bg_light_beige h2 {
margin: 0;
padding: 5rem 0;
}
h3 {
font-size: 1.8rem;
margin: 5rem auto 2rem;
padding: 0.5rem 0;
line-height: 2.3rem;
border-top: 1px dotted #412a1c;
border-bottom: 1px dotted #412a1c;
}
h4 {
font-size: 1.4rem;
line-height: 1.8rem;
width: 60%;
margin: 1rem auto 0.5rem;
padding: 0.2rem 1em;
text-align: center;
background: #f2e5d2;
border-radius: 3px;
}
main p {
margin-bottom: 3rem;
}
main img {
border-radius: 3px;
}
main dl {
display: flex;
}
main dt {
margin: 0 1.2em 0 0;
white-space: nowrap;
}
/* 余白調整 */
.mb100 {
margin-bottom: 100px;
}
.mb50 {
margin-bottom: 50px;
}
.mt50 {
margin-top: 50px;
}
.mt100 {
margin-top: 100px;
}
.pa_1 {
padding: 1.5rem 1rem 0 2rem;
}
.ma_1 {
margin-top: -1em;
}
/* 表示/非表示の制御 */
.display_pc {
display: none;
}
.display_sp {
display: block;
}
/* ---------------------------------------- *
/* 個別スタイル
/* ---------------------------------------- */
/* ---------- お知らせ ---------- */
#notice .wrap_title {
background: linear-gradient(to bottom, #eaeaea, #e6e5e3);
}
#notice main h1 {
background: url(../img/notice_h1.jpg) right -65px top no-repeat;
background-size: auto 114px;
}
#notice dl {
padding-bottom: 1rem;
margin-bottom: 2rem;
border-bottom: 2px dotted #f2e5d2;
}
#notice.notice_list dl {
font-family: 'Shippori Mincho B1', serif;
}
#notice .date_list dt {
width: 6em;
text-align: right;
}
#notice dd {
flex-basis: 100%;
}
#notice .date {
display: block;
width: 85%;
margin: 0 auto 2rem;
text-align: right;
}
#notice .date_list + hr {
margin-top: 5rem;
}
#notice button {
display: block;
margin: 5rem auto 0;
width: 150px;
}
#notice button a {
line-height: 40px;
}
/* 20251212のみ */
.emergency_20251212 {
margin: 3em auto 0;
}
.emergency_20251212 dt {
width: 6em;
}
.emergency_20251212 dd {
word-break: break-all;
}
.newyear_20251212 {
width: 100%;
margin: 1em 0 2em;
}
.newyear_20251212 th {
text-align: center;
padding: 0.5rem;
border: 1px solid #c7bcad;
}
.newyear_20251212 td {
text-align: center;
vertical-align: middle;
padding: 1rem 0.5rem;
border: 1px solid #c7bcad;
}
/* ---------- 医師紹介 ---------- */
#doctor main h1 {
background-image: url(../img/doctor_1_h1_2.png), url(../img/doctor_1_h1_1.jpg);
background-position: right 0px, -170px 0px;
background-repeat: no-repeat, no-repeat;
background-size: 215px auto, 430px auto;
background-color: #f9f7f6;
}
#doctor .wrap dl {
margin: 0 0 0.7rem;
}
#doctor .tab li { /* 医師一覧ベース幅 */
width: 20%;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
#doctor .tab li:first-child,
#doctor .tab li:nth-of-type(2) { /* 河奈先生・眞鍋先生 */
width: 50%;
}
#doctor .tab li:nth-of-type(3),
#doctor .tab li:nth-of-type(4),
#doctor .tab li:nth-of-type(5),
#doctor .tab li:nth-of-type(6) { /* 木本先生・小牧先生・菊地先生・佐藤先生 */
width: 25%;
}
#doctor .tab li:nth-of-type(2),
#doctor .tab li:nth-of-type(6),
#doctor .tab li:nth-of-type(11) { /* 罫線調整 */
border-right: none;
}
#doctor .career {
margin-bottom: 100px;
}
#doctor .career dl {
display: flex;
flex-wrap: wrap;
width: 100%;
}
#doctor .career dl dt {
font-size:0.95em;
width: 25%;
padding: 0.5rem 1rem;
background: #F0E9DF;
margin: 0;
text-align: center;
border-bottom: #fff 1px solid;
word-wrap: break-word;
font-weight: normal;
}
#doctor .career dl dd {
font-size:0.95em;
width: 75%;
padding: 0.5rem 0.5rem 0.5rem 1rem;
margin: 0;
border-bottom: #f2e5d2 1px dotted;
}
/* ---------- インバウンド ---------- */
#inbound main .wrap_title {
background: url("../img/inbound_h1.jpg") no-repeat right -45px top;
background-size: auto 114px;
}
#inbound main h1 {
position: relative;
background: linear-gradient(to left, rgba(225,241,245,0.2), rgba(225,241,245,0.6) 40%, rgba(225,241,245,1) 75%);
font-size: 2.4rem;
letter-spacing: -0.5px;
}
#inbound main h1 span {
position: absolute;
top: 25%;
left: calc(50% - 5.5em);
font-size: 1.8rem;
}
#inbound .dental {
padding-bottom: 0;
}
#inbound .qr {
text-align: center;
background: #fff;
margin-left: 3rem;
}
#inbound .qr img {
width: 172px;
margin-right: 0;
}
#inbound .qr img + p {
margin-right: 0;
}
/* ---------- 医療連携 ---------- */
#relation main h1 {
background-image: url("../img/relation_h1.jpg"), url("../img/relation_h1_bg.jpg");
background-repeat: no-repeat, repeat;
background-position: right;
background-size: auto 170px ,auto;
}
/* ---------- 設備紹介---------- */
#facilities main h1 {
background-image: url(../img/facilities_h1_1.png), url(../img/facilities_h1_bg.jpg);
background-position: right, left;
background-repeat: no-repeat, no-repeat;
background-size: 190px auto, auto 120px;
background-color: #fff;
}
#facilities .wrap {
margin-bottom: 5rem;
}
#facilities button {
margin: 1rem 0 0;
width: 150px;
}
#facilities button a {
line-height: 40px;
}
#facilities.allergy main h1 {
background-image: url(../img/allergy_h1_1.png), url(../img/facilities_h1_bg.jpg);
background-size: 190px auto, auto 120px;
}
.allergy label img {
border: 1px solid #7bace3;
}
.allergy label img::after {
position: absolute;
right: -2px;
bottom: -2px;
z-index: 10;
display: block;
content: "";
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #0f5fc3;
transform: rotate(45deg);
}
/* ---------- FAQ ---------- */
#faq main h1 {
background-image:url("../img/faq_h1.jpg"), url("../img/faq_h1_bg.jpg");
background-repeat: no-repeat, repeat-x;
background-position: right;
background-size: auto 140px, auto 140px;
}
#faq main .details {
width: 100%;
margin-bottom: 1.8rem;
border-bottom: 2px dotted #f2e5d2;
}
#faq .details_summary {
padding: 1em 1em 1em 2em;
position: relative;
display: block;
cursor: pointer;
font-size: 1em;
line-height: 1.5em;
font-family: 'Shippori Mincho B1', serif;
text-indent:-2.1em;
}
.gothic{
font-family:'Sawarabi Gothic', sans-serif;
}
/* for safari */
#faq .details_summary::-webkit-details-marker {
display: none;
}
#faq .details_summary::before {
display: block;
content: "";
box-sizing: border-box;
position: absolute;
top: calc(50% - 6px);
right: 0px;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #c39b77;
transition: all 0.4s ease-out;
transform-origin: 3px 6px;
transform: rotate(90deg);
}
#faq .details[open] .details_summary::before {
transform: rotate(-90deg);
}
#faq .details_content {
overflow: hidden;
margin: 0;
> * {
margin: 0;
padding-top: 14px;
&:last-child {
padding-bottom: 16px;
}
}
}
#faq .details_content p{
padding-left:2.1em;
text-indent:-2.1em;
color: #333;
}
/* ---------- プライバシーポリシー ---------- */
#privacy main h1 {
background-image: url(../img/privacy_h1_1.jpg);
background-position:right;
background-repeat: no-repeat;
background-size: 565px auto;
background-color: #fff;
}
#privacy .privacy_content {
margin: 2em 0em;
}
#privacy .privacy_content p {
margin: 0em 2em 0.5em;
}
#privacy .privacy_content .font_small {
padding: 2em 0.4em;
}
.privacy_content ol {
list-style-type: decimal;
margin:1em 2em 1em 4.2em;
}
.privacy_content li {
padding:0.5em 0em 0 0;
word-wrap: break-word;
}
/* ---------- 404.html ---------- */
.content404{
padding:2em 0em 0em;
margin: 0;
background: url(../img/content_bg.png) no-repeat #fcfaf7;
background-size: auto 440px;
}
.content404 .dflex{
display: flex;
}
.content404 .dflex{
position: relative;
width: 100%;
margin: 0 auto;
}
.content404 .text {
width: 70%;
}
.content404 .kohari{
width: 30%;
right:0;
top:-25px;
position: absolute;
z-index: 5;
}
/* toppage リンクバナー */
.content404 .btn{
width: 60%;
margin: 3rem auto 0;
padding: 1.1rem 1rem 1.1rem;
}
.content404 a.btn {
line-height: 1.5em;
}
/* ---------- 医療機関のみなさまへ ---------- */
#introduction main h1 {
background-image: url(../img/introduction_h1.jpg);
background-position:right -70px;
background-repeat: no-repeat;
background-size: 400px auto;
background-color: #fff;
}
#introduction p.p_pdf{
padding: 9px 0 0px 39px;
margin: 0 0 0 0px;
left:0px;
position: relative;
}
span.ic_pdf::before {
content:url(../img/ico_pdf.svg) ;
display: inline-block;
width: 60px;
position: absolute;
top: 0em;
left:0;
}