/* ======================================== *
* 医科診療ページ用 -for SP
/* ======================================== */
/* ---------- 医科診療 共通（#medical） ---------- */
#medical main h1 {
background-image: url("../img/medical_h1.jpg"),linear-gradient(rgba(236,228,242,0.8), rgba(233,225,239,1));
background-repeat: no-repeat;
background-position: right;
background-size: auto 130px;
}
#medical .tab li {
width: 50%;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
#medical .tab li:nth-of-type(2),
#medical .tab li:nth-of-type(4) {
border-right: none;
}
/* PC版への影響回避 */
@media screen and (max-width: 999px) {
#medical .tab :not(li:first-of-type) a {
line-height: 20px;
padding-top: 8px;
height: 54px;
}
}
/* ---- 診療科ポリシー以外 共通 ---- */
#medical:not(.medical_policy) main section {
padding: 0;
}
#medical:not(.medical_policy) .wrap {
padding: 5rem 0;
}
#medical:not(.medical_policy) .wrap > h2,
#medical:not(.medical_policy) .wrap > h3 {
margin-top: 0;
}
.intro p,
.forget p,
.alzheimer p {
text-align: center;
}
/* 下向きガイド矢印 */
#medical:not(.medical_policy) hr::before,
.arrow_down::before {
position: relative;
left: calc(50% - 12px);
top: -25px;
display: block;
content: "";
width: 12px;
height: 12px;
border: 12px solid transparent;
border-left: 12px solid #462e1d;
transform: rotate(90deg);
}
#medical:not(.medical_policy) article > hr::before {
display: none;
}
/* キャッチコピーの位置を示す丸い点線 */
.catch span:not(span.font_small) {
position: absolute;
width: 100px;
height: 100px;
background: url(../img/ico_circle.svg) no-repeat top left;
}
/* ---- /診療科ポリシー以外 共通 ---- */
/*---- 診察の流れ ----*/
.medical_flow .bg {
display: none;
}
.medical_flow > div {
position: relative;
padding: 3rem 2rem 2rem;
}
.medical_flow div div { /* テキストコンテンツの表示順調整 */
position: relative;
z-index: 5;
}
.medical_flow div:nth-of-type(2) {
background-color: #fcfaf7;
}
.medical_flow div:nth-of-type(3) {
background-color: #fcf5ea;
}
.medical_flow div:nth-of-type(4) {
background-color: #fcf0de;
}
.medical_flow div:nth-of-type(5) {
background-color: #fcebd2;
}
.medical_flow svg {
position: absolute;
bottom: 10px;
background-repeat: no-repeat;
}
.medical_flow .contact {
/* お問い合わせ */
background: url(../img/ico_call.svg) left 2rem bottom 1rem no-repeat;
background-size: auto 160px;
}
.medical_flow .discussion svg {
/* 相談 ico_discussion.svg */
background-image: url('data:image/svg+xml;utf8,');
}
.medical_flow .consultation svg {
/* 診察 ico_consultation.svg */
background-image: url('data:image/svg+xml;utf8,');
height: 190px;
}
.medical_flow .description svg {
/* 結果説明 ico_description.svg */
background-image: url('data:image/svg+xml;utf8,');
height: 170px;
}
.medical_flow .inspection svg {
/* 検査 ico_blood_check.svg */
background-image: url('data:image/svg+xml;utf8,');
}
.medical_flow .image_inspection svg {
/* 画像検査 ico_mri.svg */
background-image: url('data:image/svg+xml;utf8,');
height: 170px;
}
/* 流れ用 ガイド矢印 */
.medical_flow > div:not(.bg)::after {
position: absolute;
right: calc(50% - 6px);
bottom: -12px;
display: block;
content: "";
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 6px solid #462e1d;
transform: rotate(90deg);
z-index: 1;
}
.medical_flow > div:nth-last-of-type(2):after {
display: none;
}
.medical_flow h3 {
writing-mode: vertical-rl;
text-align: left;
margin: 0 auto 2rem;
padding: 0 0.5rem;
width: auto;
height: 7.5em;
border-top: none;
border-bottom: none;
border-right: 1px dotted #412a1c;
border-left: 1px dotted #412a1c;
}
.medical_flow .catch {
display: block;
position: absolute;
right: 0;
top: 0;
height: 6em;
writing-mode: vertical-rl;
font-family: 'Shippori Mincho B1', serif;
font-size: 80px;
line-height: 80px;
letter-spacing: 0;
opacity: 3%;
overflow: hidden;
}
.medical_flow ul {
text-align: center;
margin: 1rem;
}
.period {
position: relative;
width: 85%;
margin: 0 auto;
padding: 1.5rem 0 0.5rem;
}
/*---- /診察の流れ ----*/
/*---- 検査項目（もの忘れ・アルツハイマー） ----*/
.wrap .items li {
position: relative;
flex: 45%;
margin: 5px;
background: linear-gradient(to bottom, #fff 50%, #f5f9ff);
border: 1px solid #7bace3;
border-radius: 9px;
}
.wrap .items li:nth-of-type(6),
.wrap .items li:nth-of-type(7) {
border: 1px solid #aaa;
}
.wrap .items li a {
display: block;
height: 150px;
background-position: center bottom 5px;
background-repeat: no-repeat;
background-size: auto 80px;
pointer-events: none;
}
.wrap .items .tooth a {
/* ico_dental_check.svg */
background-image: url('data:image/svg+xml;utf8,');
}
.wrap .items .blood a {
/* ico_blood_check.svg */
background-image: url('data:image/svg+xml;utf8,');
}
.wrap .items .cognitive a,
.wrap .bnr_link.full a { /* アルツハイマーフルコースへの案内リンクバナー */
/* ico_brain.svg */
background-image: url('data:image/svg+xml;utf8,');
}
.wrap .items .mri a {
/* ico_mri.svg */
background-image: url('data:image/svg+xml;utf8,');
}
.wrap .items .spect a {
/* ico_spect.svg */
background-image: url('data:image/svg+xml;utf8,');
}
.wrap .items .amyloid a {
/* ico_amyloid.svg */
background-image: url('data:image/svg+xml;utf8,');
}
.wrap .items .gene a {
/* ico_gene.svg */
background-image: url('data:image/svg+xml;utf8,');
/* transform: rotate(45deg); */
}
.wrap .items .description a {
/* ico_description.svg */
background-image: url('data:image/svg+xml;utf8,');
background-position: left 53% bottom 10px;
}
.wrap .items h3 {
margin: 0;
padding-top: 1.5rem;
font-size: 1.6rem;
line-height: 2.3rem;
color: #412a1c;
font-family: 'Sawarabi Gothic', sans-serif;
border: none;
}
.wrap .items .detail {
position: absolute;
right: -30px;
padding: 1rem;
width: 160px;
background: #fff;
background: #d1e8f5;
box-shadow: 0px 0px 0px 2px #fff;
border-radius: 6px;
z-index: 10;
visibility: hidden;
opacity: 0;
transition: all .3s;
}
.wrap .items .detail::after {
position: absolute;
right: 25%;
bottom: -20px;
display: block;
content: "";
width: 10px;
height: 10px;
border: 10px solid transparent;
border-left: 15px solid #d1e8f5;
transform: rotate(90deg);
}
.wrap .items .detail p {
margin-bottom: 1rem;
}
.wrap .items .tooth .detail {
top: -105px;
}
.wrap .items .blood .detail,
.wrap .items .cognitive .detail {
top: -145px;
}
.wrap .items .mri .detail {
top: -205px;
}
.wrap .items .spect .detail {
top: -150px;
}
.wrap .items .amyloid .detail {
top: -185px;
}
/* ApoE4は省略
.wrap .items .gene .detail {
top: -100px;
}
*/
.wrap .items li:hover > .detail,
.wrap .items li:active > .detail {
visibility: visible;
opacity: 1;
}
.wrap .items .detail p {
text-align: left;
}
/* .wrap .items .detail span {
position: absolute;
top: -15px;
right: -15px;
display: block;
width: 30px;
height: 30px;
font-size: 30px;
line-height: 25px;
background: #fff;
border: 1px solid #7bace3;
border-radius: 50%;
}
.wrap .items .detail span:active > .detail {
visibility: hidden;
opacity: 0;
} */
/*---- /検査項目 ----*/
/*---- ご注意いただきたいこと（もの忘れ・アルツハイマー） ----*/
.forget h4,
.alzheimer h4,
.alzheimer_quick h4 {
margin: 2rem auto;
width: 90%;
}
/* もの忘れ */
.eye_list {
display: block;
margin: 2rem auto;
}
.eye_list dt {
text-align: center;
}
.eye_list dd {
margin: 0.5rem auto 4rem;
width: 90%;
}
.eye_list ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 1em 1em 2em;
list-style-position: inside;
}
.eye_list li {
margin-right: 1em;
width: 6em;
}
.alzheimer .wrap table {
width: 95%;
margin: 1rem auto 5rem;
}
/* アルツハイマー */
.alzheimer .wrap th {
padding: 0.5rem;
text-align: center;
vertical-align: middle;
white-space: nowrap;
border: 1px solid #c7bcad;
}
.alzheimer .wrap tr:first-child th {
background: #f2e5d2;
}
.alzheimer .wrap tr:not(tr:first-child) th {
letter-spacing: -2px;
background: #fcfaf7;
}
.alzheimer .wrap td {
padding: 0.5rem;
border: 1px solid #c7bcad;
}
/* ---------- /医科診療 共通（#medical） ---------- */
/* ---------- 診療科ポリシー（.medical_policy） ---------- */
.medical_policy .bk_b1 {
display: inline;
font-size: 1.6rem;
padding: 0.2rem 1em;
text-align: left;
background: #f2e5d2;
border-radius: 3px;
border: none;
}
/* ---------- /診療科ポリシー（.medical_policy） ---------- */
/* ---------- 歯周病が認知症
発症の一因に（.intro） ---------- */
/* vis */
.intro .vis {
position: relative;
margin-top: -5rem;
}
.intro .vis_1 {
height: 250px;
background: url("../img/medical_2_vis_1.jpg") no-repeat left -30px top;
background-size: auto 250px;
}
.intro .vis_2 {
margin-top: -77px;
height: 250px;
background: url("../img/medical_2_vis_2.png") no-repeat right -55px top;
background-size: auto 260px;
}
.intro .vis_1 div,
.intro .vis_2 div {
position: relative;
top: 30%;
height: 70%;
background: #fcfafa;
z-index: -1;
}
.intro .vis_2 div {
background: #f5f9fc;
}
.intro .vis p {
position: absolute;
width: 100px;
height: 100px;
font-family: 'Shippori Mincho B1', serif;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 0px 7px rgba(255,255,255,0.5);
}
.intro .vis p:nth-of-type(1) {
right: 10px;
top: -10px;
padding-top: 30px;
background: linear-gradient(to bottom, #fcfaf7, #fff 50%);
}
.intro .vis p:nth-of-type(2),
.intro .vis p:nth-of-type(5) {
writing-mode: vertical-rl;
right: 21%;
top: 88px;
padding: 15px 20px 0;
text-align: left;
}
.intro .vis p:nth-of-type(3) {
left: 10%;
top: 175px;
width: 80px;
height: 80px;
padding-top: 20px;
}
.intro .vis p:nth-of-type(4) {
left: 29%;
top: 200px;
padding-top: 30px;
}
.intro .vis p:nth-of-type(5) {
left: 5%;
top: 295px;
width: 110px;
height: 110px;
padding: 15px 25px 0;
}
/* 初診料 */
.intro .first_price {
padding: 0 0 5rem;
/* ico_brain.svg */
background: url('data:image/svg+xml;utf8,') no-repeat 50% 50% #fcfaf7;
background-size: 45%;
}
.intro .first_price .tel {
margin-top: 2rem;
}
.intro .pickup {
margin: 5rem auto 0;
}
.intro .pickup p {
display: block;
margin: 0 auto;
width: 12.5em;
font-family: 'Shippori Mincho B1', serif;
text-align: left;
}
.intro .pickup em {
font-style: normal;
font-size: 2.5rem;
line-height: 3rem;
letter-spacing: 0.2rem;
}
/* 初診終了 */
.intro .flow_end {
width: 90%;
margin: 5rem auto 100px;
padding-bottom: 90px;
background-image: url(../img/ico_home.svg), url(../img/ico_clinic.svg);
background-position: left 10px bottom, right 10px bottom;
background-repeat: no-repeat, no-repeat;
background-size: 100px auto, 120px auto;
}
.intro .flow_end h3 {
margin-top: 0;
}
/* 選べる２コース */
.intro .course {
position: relative;
margin: 8em auto;
width: 306px;
list-style: none;
}
.intro .course li:first-of-type .catch {
position: absolute;
top: -90px;
left: -40px;
display: block;
padding-top: 30px;
width: 180px;
height: 100px;
background: radial-gradient(#fcf5ea 50%, #fcfaf7 80%);
}
.intro .course li:first-of-type .catch span {
top: 42px;
right: -50px;
transform: rotate(-180deg);
}
.intro .course li:last-of-type .catch {
position: absolute;
right: -25px;
bottom: -125px;
display: block;
padding-top: 40px;
width: 200px;
height: 120px;
background: radial-gradient(#fcf5ea 50%, #fcfaf7 80%);
}
.intro .course li:last-of-type .catch span {
top: -25px;
left: -55px;
}
.intro .course li {
margin-bottom: 2rem;
}
.intro .course li a {
position: relative;
display: block;
width: 306px;
height: 200px;
color: #412a1c;
background: url(../img/medical_2_btn_1.jpg) no-repeat;
background-size: auto 200px;
z-index: 0;
}
.intro .course li:last-of-type a {
background: url(../img/medical_2_btn_2.jpg) no-repeat;
background-size: auto 200px;
}
.intro .course li a p {
margin: 0;
padding-top: 5px;
color: #fff;
}
.intro .course li h3 {
margin-top: 6rem;
border: none;
}
/* ---------- /歯周病が認知症
発症の一因に（.intro） ---------- */
/* ---------- もの忘れリスク検査コース（.forget） ---------- */
/* vis */
.forget .vis {
background: url(../img/medical_3_vis.jpg) center 200px no-repeat;
background-size: 165% auto;
}
#medical.forget .vis .wrap,
#medical.alzheimer .vis .wrap {
padding-bottom: 0;
}
.forget .vis h2 + p {
margin: -4.5rem 0 4.5rem;
}
.forget .vis .catch {
margin: -15px 0 0 auto;
color: #fff;
writing-mode: vertical-rl;
font-family: 'Shippori Mincho B1', serif;
text-align: left;
text-shadow: 1px 1px 10px rgba(65,42,28,0.35), -1px 1px 10px rgba(65,42,28,0.35), 1px -1px 10px rgba(65,42,28,0.35), -1px -1px 10px rgba(65,42,28,0.35);
}
.forget .summary {
margin-top: 3.5rem;
}
.forget .summary p {
margin-bottom: 0;
padding: 0.5rem;
background: rgba(255,255,255,0.7);
}
.forget .summary p:nth-last-of-type(2) {
background: #fff;
}
.forget .summary p:last-of-type {
padding: 1.5rem 0 100px;
background: #fcfaf7;
}
/* 診察内容のキャッチコピー */
.forget .wrap_catch {
position: relative;
height: 150px;
}
.forget .wrap_catch p,
.forget .items .catch {
position: absolute;
background: radial-gradient(#fcf5ea 30%, #fcfaf7 60%, rgba(255,255,255,0) 80%);
z-index: -1;
}
.forget .wrap_catch p:first-of-type {
top: -20px;
left: -2%;
padding-top: 15px;
width: 160px;
height: 100px;
}
.forget .wrap_catch p:last-of-type {
top: 10px;
right: 0;
padding-top: 30px;
width: 180px;
height: 120px;
}
.forget .items {
margin-top: 15rem;
}
.forget .items .tooth .catch {
top: -130px;
left: -40px;
padding-top: 45px;
width: 180px;
height: 150px;
}
.forget .items .mri .catch {
top: -330px;
right: -25%;
padding-top: 45px;
width: 180px;
height: 180px;
}
.forget .items .tooth .catch span,
.forget .items .mri .catch span {
display: none;
}
.forget .items .mri .catch .font_small {
display: block;
margin-top: 0.7rem;
line-height: 1.5rem;
}
/* フルサポートでその後も安心 */
.forget .after {
list-style: none;
}
.forget .after li:first-of-type {
padding: 2em 2em 7rem;
background: url(../img/ico_clinic.svg) no-repeat center bottom 10px #e8f1fa;
background-size: auto 50px;
}
.forget .after li:last-of-type {
padding: 2em 2em 20rem;
background: url(../img/ico_hospital.svg) no-repeat center bottom 130px #fff0f6;
background-size: auto 60px;
}
.forget .after li h3 {
margin-top: 0;
}
/* ---------- /もの忘れリスク検査コース（.forget） ---------- */
/* ---------- アルツハイマーコース（.alzheimer） ---------- */
/* vis */
.alzheimer .vis {
height: 520px;
background-image: url(../img/medical_4_vis_2.png), url(../img/medical_4_vis_1.jpg);
background-position: right bottom -30px, left -110px bottom -5px;
background-repeat: no-repeat, no-repeat;
background-size: 110% auto, 210% auto;
}
.alzheimer .vis .wrap_catch {
font-family: 'Shippori Mincho B1', serif;
}
.alzheimer .vis .wrap_catch p {
margin-bottom: 2rem;
}
.alzheimer .summary {
padding: 1rem;
background: #f3e6d3;
}
/* もっと見るボタン dedail版 */
.details_summary {
position: relative;
display: block;
width: calc(100% - 4em);
height: 50px;
margin: 2rem 2em 0;
background: linear-gradient(to bottom, #462e1e, #3f291b);
color: #f2e5d2;
font-size: 1.4rem;
text-align: center;
line-height: 50px;
border-radius: 6px;
outline: 0;
transition: 0.5s;
-erbkit-transition: 0.5s;
cursor: pointer;
}
/* for safari */
.details_summary::-webkit-details-marker {
display: none;
}
.details_summary::after {
content: 'もっと見る ▼';
color: #f2e5d2;
}
/* ボタンクリック時 */
.details[open] .details_summary {
top: 300px;
background: linear-gradient(to bottom, #432c1d, #603e29);
}
.details[open] .details_summary::after {
content: '折りたたむ ▲';
color: #c39b77;
}
.details[open] .details_content {
margin: -70px 0 10rem;
}
/* コース切替タブ */
.tabs {
display: flex;
flex-wrap: wrap;
}
.tab_label {
position: relative;
z-index: 1;
flex: 1;
padding: 3rem 1rem 1rem;
border-bottom: 3px solid #fff;
font-size: 1em;
text-align: center;
color: #0f5fc3;
font-family: 'Shippori Mincho B1', serif;
}
.tab_label:hover {
color:#6ba4c2;
}
.tab_label:last-of-type {
line-height: 3em;
}
.tab_content {
flex: 100%;
/* display: none; クイックコース表示時に使用 */
overflow: hidden;
}
input[name="tab_switch"] {
display: none;
}
.tabs input:checked + .tab_label {
background: linear-gradient(to bottom, #fff, #fcfaf7);
border-bottom: 3px solid #f3e6d3;
color: #412a1c;
}
.tabs input:checked + .tab_label::after {
content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0;
border-color: #f3e6d3 transparent transparent transparent;
display: block;
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
transition: all 0.3s ease 0s;
}
#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content {
display: block;
}
.tab_content {
position: relative;
animation: fadeIn 1s ease;
}
.course_bt {
font-weight: 500;
padding: 0.4rem 1rem;
background-color: #fcfaf7;
margin: 1rem 1rem 0rem 0rem;
font-size: 0.5em;
vertical-align: text-bottom;
border-radius: 0.4rem;
}
/* 診察の流れ */
.alzheimer .period {
margin: 0 auto 10rem;
}
/* アミロイドβが溜まっていたら */
.wrap_hospital {
padding-bottom: 60px;
background: url(../img/ico_hospital.svg) no-repeat center bottom;
background-size: auto 60px;
}
/* リンクバナー */
.wrap .bnr_link {
display: block;
margin: 5rem auto;
background: linear-gradient(to bottom, #fff 50%, #f5f9ff);
border: 1px solid #7bace3;
border-radius: 9px;
}
.wrap .bnr_link a {
position: relative;
display: block;
padding: 1.5rem 1rem 1.5rem 75px;
color: #412a1c;
background-position: left 1rem center;
background-repeat: no-repeat;
background-size: auto 60px;
}
.wrap .bnr_link.quick a {
/* ico_call.svg */
background-image: url('data:image/svg+xml;utf8,');
}
.wrap .bnr_link.full a {
padding: 1.5rem 1rem 1.5rem 92px;
/* background-imageはL209付近に記載 */
}
.wrap .bnr_link em {
display: block;
margin-top: 0.5rem;
font-size: 2rem;
color: #0f5fc3;
line-height: 2.5rem;
font-family: 'Shippori Mincho B1', serif;
}
.wrap .bnr_link a::after {
position: absolute;
right: -2px;
bottom: -2px;
display: block;
content: "";
width: 6px;
height: 6px;
border: 6px solid transparent;
border-left: 5px solid #0f5fc3;
transform: rotate(45deg);
}
/* ---------- /アルツハイマーコース（.alzheimer） ---------- */