/* ======================================== *
* 医科ページ用 -for PC
/* ======================================== */
@media screen and (min-width: 1000px) {
/* ---------- 医科診療 共通 ---------- */
#medical main h1 {
background-size: auto 310px;
}
#medical .tab li {
width: auto;
border: none;
}
#medical .tab li a {
line-height: 2rem;
}
#medical .tab li:first-of-type a {
line-height: 4rem;
}
.forget section,
.alzheimer section {
background: url(../img/content_bg.png) left -45px bottom 20px no-repeat;
background-size: 550px;
}
/*---- 検査項目（もの忘れ・アルツハイマー） ----*/
.wrap .items li {
flex: 180px;
margin: 10px 5px;
}
.wrap .items li:last-of-type {
margin-right: 25.5%;
position: relative;
}
.wrap .items li:last-of-type div {
position: absolute;
right: -250px;
bottom: 0;
}
.wrap .items li:last-of-type p {
text-align: left;
}
.wrap .items li a {
height: 180px;
}
.wrap .items h3 {
min-width: auto;
width: auto;
padding-top: 2.5rem;
}
.wrap .items .detail {
right: -80px;
}
.wrap .items .detail::after {
right: 40%;
}
.wrap .items .tooth .detail {
top: -80px;
}
.wrap .items .blood .detail {
top: -105px;
}
.wrap .items .cognitive .detail {
top: -125px;
}
.wrap .items .mri .detail {
top: -180px;
}
.wrap .items .spect .detail {
top: -105px;
}
.wrap .items .amyloid .detail {
top: -135px;
}
.wrap .items .tooth:hover,
.wrap .items .blood:hover,
.wrap .items .cognitive:hover,
.wrap .items .spect:hover,
.wrap .items .amyloid:hover,
.wrap .items .mri:hover {
cursor: pointer;
background: linear-gradient(to bottom, #fff 50%, #edf4ff);
transition: all .3s;
}
/*---- リンクバナー ----*/
.wrap .bnr_link {
margin: 8rem auto;
}
/*---- ご注意いただきたいこと（もの忘れ・アルツハイマー） ----*/
.forget h4,
.alzheimer h4 {
display: block;
}
.eye_list ul {
margin: 0 auto;
width: 30%;
}
/*---- 診察の流れ（３ステップ時） ----*/
.medical_flow.three_step > div {
flex-basis: 35%;
}
/*---- 診察の流れ（４ステップ時） ----*/
.medical_flow {
display: flex;
justify-content: center;
}
.medical_flow > div {
position: relative;
flex-basis: 25%;
padding: 3rem 2rem 2rem;
}
.medical_flow div div { /* テキストコンテンツの表示順調整 */
position: relative;
z-index: 5;
}
.medical_flow h3 {
min-width: auto;
}
#medical .medical_flow ul {
text-align: left;
list-style: disc inside;
margin: 2rem 1rem;
}
#medical .medical_flow p {
text-align: left;
}
.medical_flow .contact {
background-position: center bottom;
}
.medical_flow svg {
left: calc(50% - 100px);
width: 200px;
background-position: bottom;
}
.medical_flow .catch {
font-size: 75px;
line-height: 75px;
}
.medical_flow > div:not(.bg)::after {
right: -20px;
top: 50px;
width: 10px;
height: 10px;
border: 10px solid transparent;
border-left: 10px solid #462e1d;
transform: rotate(0deg);
}
.period {
border-bottom: 6px solid #efe5dc;
}
.period::after {
position: absolute;
right: -15px;
bottom: -15px;
display: block;
content: "";
width: 12px;
height: 12px;
border: 12px solid transparent;
border-left: 12px solid #efe5dc;
transform: rotate(0deg);
}
}
/* 診察の流れ（４ステップ時の大画面用表示調整） */
@media screen and (min-width: 1600px) {
.medical_flow .bg {
display: block;
flex-grow: 1;
background: #fcfaf7;
}
.medical_flow .bg:last-of-type {
background: #fcebd2;
}
}
/* ---------- /医科診療 共通 ---------- */
@media screen and (min-width: 1000px) {
/* ---------- 歯周病が認知症
発症の一因に（.intro） ---------- */
/* vis */
.intro .vis {
display: flex;
justify-content: space-between;
}
.intro .vis_1 {
flex-grow: 1;
height: 300px;
background-position: left bottom;
background-size: auto 300px;
}
.intro .vis_2 {
flex-basis: calc(50% + 28px);
margin-top: 0;
height: 300px;
background-image: url("../img/medical_2_vis_3.jpg"), url("../img/medical_2_vis_2.png");
background-position: left bottom, right bottom;
background-size: auto 70%, auto 300px;
}
.intro .vis p:nth-of-type(1) {
left: 23%;
top: 45px;
}
.intro .vis p:nth-of-type(2) {
left: 28%;
top: 160px;
padding: 20px 25px 0;
}
.intro .vis p:nth-of-type(3) {
left: 44%;
top: 124px;
}
.intro .vis p:nth-of-type(4) {
left: 51%;
top: 165px;
}
.intro .vis p:nth-of-type(5) {
left: auto;
right: 24%;
top: 65px;
padding: 20px 30px 0;
background: linear-gradient(to bottom, #fcfaf7, #fff 40%);
}
/* 初診料 */
.intro .first_price .wrap_catch {
font-size: 2rem;
line-height: 2.7rem;
}
.intro .tel {
margin: 2rem auto 10rem;
}
.intro .pickup {
margin: 10rem auto 0;
}
/* 初診終了 */
.intro .flow_end {
padding-bottom: 20px;
background-position: left 5% bottom, right 5% bottom;
background-size: 15% auto, 17% auto;
}
/* 選べる２コース */
.intro .course {
display: flex;
justify-content: center;
width: 900px;
}
.intro .course li:first-of-type .catch {
left: -60px;
}
.intro .course li:last-of-type .catch {
right: -40px;
}
.intro .course li {
margin: 0 1.5rem;
}
.intro .course li a:hover {
opacity: 0.8;
}
.intro .course li a p {
padding-top: 8px;
}
.intro .course li h3 {
min-width: 400px;
}
}
/* ---------- /歯周病が認知症
発症の一因に（.intro） ---------- */
/* ---------- もの忘れリスク検査コース（.forget） ---------- */
@media screen and (min-width: 1000px) {
.forget .vis {
background-position: center 230px;
background-size: 100% auto;
}
.forget .vis h2 + p {
margin: -7rem 0 4.5rem;
}
.forget .vis .catch {
margin: -10px 13% 0 auto;
font-size: 2.6rem;
line-height: 3.5rem;
opacity: 0.7;
}
.forget .vis .catch span:first-of-type {
margin-right: 13%;
}
.forget .summary {
margin-top: 6rem;
}
.forget .summary p {
padding: 1rem;
}
/* 診察内容のキャッチコピー */
.forget .wrap_catch p:first-of-type {
left: 20%;
padding-top: 40px;
}
.forget .wrap_catch p:last-of-type {
top: 0;
right: 18%;
padding-top: 45px;
}
.forget .items .tooth .catch {
left: -60px;
}
.forget .items .tooth .catch span {
display: block;
bottom: -50px;
left: 15px;
}
.forget .items .mri .catch {
top: -190px;
right: -40%;
}
.forget .items .mri .catch span:not(span.font_small) {
display: block;
bottom: -5px;
right: 10px;
transform: rotate(-130deg);
}
/* フルサポートでその後も安心 */
.forget .after {
display: flex;
}
.forget .after li:first-of-type {
flex-basis: 50%;
padding: 2em 0 20rem;
background-position: center bottom 100px;
background-size: auto 70px;
}
.forget .after li:last-of-type {
flex-basis: 50%;
padding: 2em 0 20rem;
background-position: center bottom 100px;
background-size: auto 75px;
}
.forget .after li h3 {
min-width: auto;
width: 100%;
}
/* ---------- アルツハイマーコース（.alzheimer） ---------- */
/* vis */
.alzheimer .vis {
height: 400px;
background: url(../img/medical_4_vis.jpg) no-repeat right bottom;
background-size: cover;
/* background-position: right bottom -30px, left -70px bottom -5px;
background-size: 75% auto, 130% auto; */
}
/* アミロイドβが溜まっていたら */
.wrap_hospital {
width: 85%;
margin: 0 auto 100px;
padding: 0 0 0 180px;
background: url(../img/ico_hospital.svg) no-repeat left center;
background-size: auto 100px;
}
.wrap_hospital p {
text-align: left;
}
/* コースタブ */
.tab_label {
font-size: 2rem;
line-height: 3em;
}
/* リンクバナー */
.wrap .bnr_link a {
padding: 3rem 2rem 3rem 100px;
background-position: left 2rem center;
background-size: auto 70px;
}
.wrap .bnr_link.full a {
padding: 3rem 2rem 3rem 120px;
background-size: auto 75px;
}
}