@charset "utf-8"; /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; height: auto; vertical-align: bottom; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } /* base */ :root { --root-font-size: 16; } * { letter-spacing: var(--spacing); } body { background: #FFF; color: #585858; font-family: "Sawarabi Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", sans-serif; font-size: calc( 16 / var(--root-font-size) * 1rem ); font-style: normal; font-weight: 400; letter-spacing: 0; line-height: 1; overscroll-behavior-y: none; } html,body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { animation-name: fadeIn; animation-duration: 1s; } body.active { overflow: hidden; height:100%; } a {color: #585858; text-decoration: none;} a:hover {color: #C1BEBE; text-decoration: none;} a:hover img { filter: alpha(opacity=70); -khtml-opacity: 0.7; -moz-opacity: 0.7; opacity: 0.7; } a, a:hover, a img, a:hover img { transition: 0.5s 0s; } .clear {clear: both;} .clearfix:after { content: ""; display: block; clear: both; } ::selection { background: rgba(245, 168, 160, 0.7); color: #FFF; } ::-moz-selection { background: rgba(245, 168, 160, 0.7); color: #FFF; } /* layout */ #wrap { width: 100%; margin: 0 auto; } .pc { display: inherit; } .sp { display: none; } @media screen and (max-width: 960px) { .pc { display: none; } .sp { display: inherit; } } /*----- common -----*/ main { display: block; /* IE */ } main { padding: 25px 0 0; } div.mainTtlWrap { display: flex; justify-content: space-between; width: 100%; background: linear-gradient(180deg, transparent 0%, transparent 62.5%, #E6EEF6 62.5%, #E6EEF6 100%); margin: 0 auto; } .mainTtl { width: 32.5%; background: url("../images/h_bg.png") repeat-x left bottom 16.875vw; background-size: 32.5vw 13vw; color: #89A9CD; padding: 75px 0 16.875% 7.5vw; } .mainTtl h1, .mainTtl p { position: relative; z-index: 9; width: 600px; line-height: 1.5; } .mainTtl .jp { font-size: min(2.25vw, calc( 28 / var(--root-font-size) * 1rem )); } .mainTtl .en { font-size: min(1.25vw, calc( 16 / var(--root-font-size) * 1rem )); padding: 5px 0 0; } .mainImg { width: 67.5%; height: 45vw; } .mainImg.about-us { background: url("../images/h_about-us.png") no-repeat top center; background-size: cover; } .mainImg.history { background: url("../images/h_history.png") no-repeat top center; background-size: cover; } .mainImg.medical-services { background: url("../images/h_medical-services.png") no-repeat top center; background-size: cover; } .mainImg.dermatology-and-allergy { background: url("../images/h_dermatology-and-allergy.png") no-repeat top center; background-size: cover; } .mainImg.cosmetic-dermatology { background: url("../images/h_cosmetic-dermatology.png") no-repeat top center; background-size: cover; } .mainImg.vaccination { background: url("../images/h_vaccination.png") no-repeat top center; background-size: cover; } .mainImg.treatment-cost { background: url("../images/h_treatment-cost.png") no-repeat top center; background-size: cover; } .mainImg.clinic-hours-and-access { background: url("../images/h_clinic-hours-and-access.png") no-repeat top center; background-size: cover; } .mainImg.news-and-doctors-column { background: url("../images/h_news-and-doctors-column.png") no-repeat top center; background-size: cover; } .mainImg.medical-questionnair-form { background: url("../images/h_medical-questionnair-form.png") no-repeat top center; background-size: cover; } .mainImg.recruit { background: url("../images/h_recruit.png") no-repeat top center; background-size: cover; } .mainImg.insurance-medical-institution-notice { background: url("../images/h_insurance-medical-institution-notice.png") no-repeat top center; background-size: cover; } .subTtl { color: #89A9CD; padding: 0 0 50px; } main#treatment-cost section#cosmetics .subTtl { padding: 0 0 25px; } .subTtl.bgW { display: flex; align-items: center; justify-content: center; min-height: 167px; background: url("../images/bg1Left.png") no-repeat right calc(50% + 450px) center, url("../images/bg1Right.png") no-repeat left calc(50% + 450px) center; background-size: 255px 167px, 255px 167px; padding: 25px 0; margin: 0 0 25px; } .subTtl.bgB { display: flex; align-items: center; justify-content: center; min-height: 167px; background: url("../images/bg2Left.png") no-repeat right calc(50% + 450px) center, url("../images/bg2Right.png") no-repeat left calc(50% + 450px) center; background-size: 255px 167px, 255px 167px; padding: 25px 0; margin: 0 0 25px; } .subTtl.center { text-align: center; } .subTtl .jp { font-size: calc( 28 / var(--root-font-size) * 1rem ); } .subTtl .jp.small { font-size: calc( 24 / var(--root-font-size) * 1rem ); } .subTtl .jp span { font-size: calc( 20 / var(--root-font-size) * 1rem ); padding: 0 0 0 1em; } .subTtl .en { padding: 5px 0 0; } .subTtl.flexWrap { align-items: center; } .subTtl.flexWrap .jp { padding: 0 25px 0 0; } .flexWrap { display: flex; } .btn, .hBtn { position: relative; display: flex; align-items: center; justify-content: center; transition: 0.5s 0s; } .btn.round { width: 100%; height: 60px; border-radius: 30px; font-size: calc( 18 / var(--root-font-size) * 1rem ); } .btn.square { justify-content: flex-start; width: 100%; height: 80px; border-radius: 10px; font-size: calc( 20 / var(--root-font-size) * 1rem ); padding: 0 30px; } .btn.menuSquare { justify-content: flex-start; width: 100%; max-width: 465px; height: 80px; border-radius: 10px; font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 0 30px; } .btn.menuRound { justify-content: flex-start; width: 100%; max-width: 220px; height: 80px; border-radius: 40px; font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 0 30px; } .btn.blank { justify-content: flex-start; width: 100%; height: 130px; border-radius: 10px; font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 0 30px; } .btn.dl { width: 100%; height: 80px; border-radius: 10px; font-size: calc( 24 / var(--root-font-size) * 1rem ); padding: 0 0 0 1em; } .btn.introduction { max-width: 300px; } .hBtn { width: 150px; height: 60px; border-radius: 10px; font-size: calc( 16 / var(--root-font-size) * 1rem ); } .btn.center { margin: 0 auto; } .btn.white { background: #FFF; } .btn.white:hover, .btn.blue:hover, .btn.pink:hover, .btn.lightBlue:hover, .hBtn.blue:hover, .hBtn.pink:hover { background: #DBDBDB; color: inherit; } .btn.blue, .hBtn.blue { background: #A0BCDC; color: #FFF; } .btn.pink, .hBtn.pink { background: #F5A8A0; color: #FFF; } .btn.lightBlue { background: #E6EEF6; } .btn.gray { background: #DBDBDB; } .btn.gray:hover { background: #A0BCDC; color: #FFF; } .btn.arrow::after { content: ""; position: absolute; top: 0; bottom: 0; right: 30px; width: 8px; height: 12px; background: url("../images/arrow_right.svg") no-repeat center center; background-size: contain; margin: auto 0; transition: 0.5s 0s; } .btn.arrow:hover::after { background: url("../images/arrow_rightW.svg") no-repeat center center; background-size: contain; } .btn.arrow_bottomW::after { content: ""; position: absolute; top: 0; bottom: 0; right: 30px; width: 12px; height: 8px; background: url("../images/arrow_bottomW.svg") no-repeat center center; background-size: contain; margin: auto 0; transition: 0.5s 0s; } .btn.arrow_bottomW:hover::after { background: url("../images/arrow_bottom.svg") no-repeat center center; background-size: contain; } .btn.arrow_bottomB::after { content: ""; position: absolute; top: 0; bottom: 0; right: 30px; width: 12px; height: 8px; background: url("../images/arrow_bottom.svg") no-repeat center center; background-size: contain; margin: auto 0; transition: 0.5s 0s; } .btn.arrow_bottomB:hover::after { background: url("../images/arrow_bottomW.svg") no-repeat center center; background-size: contain; } @media screen and (max-width: 960px) { div.mainTtlWrap { display: flex; justify-content: space-between; width: 100%; background: linear-gradient(180deg, transparent 0%, transparent 75%, #E6EEF6 75%, #E6EEF6 100%); margin: 0 auto; } .mainTtl { width: 32.5%; background: url("../images/h_bg.png") repeat-x left bottom 11.25vw; background-size: 32.5vw 13vw; color: #89A9CD; padding: 25px 0 11.25% 5vw; } .mainTtl .jp { font-size: min(2.8125vw, calc( 28 / var(--root-font-size) * 1rem )); } .mainTtl .en { font-size: min(1.5625vw, calc( 16 / var(--root-font-size) * 1rem )); padding: 5px 0 0; } .subTtl { color: #89A9CD; padding: 0 0 25px; } main#treatment-cost section#cosmetics .subTtl { padding: 0 0 25px; } .subTtl.bgW { display: flex; align-items: center; justify-content: center; min-height: 115px; background: url("../images/bg1Left.png") no-repeat right calc(50% + 180px) center, url("../images/bg1Right.png") no-repeat left calc(50% + 180px) center; background-size: 175.6px 115px, 175.6Px 115px; padding: 25px 0; margin: 0 0 25px; } .subTtl.bgB { display: flex; align-items: center; justify-content: center; min-height: 115px; background: url("../images/bg2Left.png") no-repeat right calc(50% + 180px) center, url("../images/bg2Right.png") no-repeat left calc(50% + 180px) center; background-size: 175.6px 115px, 175.6px 115px; padding: 25px 0; margin: 0 0 25px; } .subTtl.bgW div, .subTtl.bgB div { padding: 25px 0 0; } .subTtl.center { text-align: center; } .subTtl .jp { font-size: calc( 24 / var(--root-font-size) * 1rem ); } .subTtl .jp.small { font-size: calc( 20 / var(--root-font-size) * 1rem ); } .subTtl .jp span { font-size: calc( 18 / var(--root-font-size) * 1rem ); padding: 0 0 0 0.5em; } .subTtl .en { font-size: calc( 14 / var(--root-font-size) * 1rem ); padding: 5px 0 0; } .subTtl.flexWrap { align-items: center; flex-wrap: wrap; } .subTtl.flexWrap .jp { width: 100%; padding: 0; } .flexWrap { display: flex; } .btn, .hBtn { position: relative; display: flex; align-items: center; justify-content: center; transition: 0.5s 0s; } .btn.round { width: 100%; height: 60px; border-radius: 30px; font-size: calc( 16 / var(--root-font-size) * 1rem ); } .btn.square { justify-content: flex-start; width: 100%; height: auto; min-height: 60px; border-radius: 10px; font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 10px 5vw; } .btn.menuSquare { justify-content: flex-start; width: 100%; max-width: 100%; height: 80px; border-radius: 10px; font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 10px 5vw; } .btn.menuRound { justify-content: flex-start; width: 100%; max-width: 220px; height: 40px; border-radius: 20px; font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 10px 5vw; margin: 0 0 0 auto; } .btn.blank { justify-content: flex-start; width: 100%; height: 80px; border-radius: 10px; font-size: calc( 16 / var(--root-font-size) * 1rem ); padding: 0 30px; } .btn.dl { width: 100%; height: 80px; border-radius: 10px; font-size: calc( 18 / var(--root-font-size) * 1rem ); padding: 0 0 0 1em; } .btn.introduction { max-width: 300px; } .hBtn { width: 150px; height: 60px; border-radius: 10px; font-size: calc( 16 / var(--root-font-size) * 1rem ); } .btn.center { margin: 0 auto; } .btn.white { background: #FFF; } .btn.arrow { padding: 10px calc(5vw + 8px) 10px 5vw; } .btn.white:hover, .btn.blue:hover, .btn.pink:hover, .btn.lightBlue:hover, .hBtn.blue:hover, .hBtn.pink:hover { background: #DBDBDB; color: inherit; } .btn.blue, .hBtn.blue { background: #A0BCDC; color: #FFF; } .btn.pink, .hBtn.pink { background: #F5A8A0; color: #FFF; } .btn.lightBlue { background: #E6EEF6; } .btn.gray { background: #DBDBDB; } .btn.gray:hover { background: #A0BCDC; color: #FFF; } .btn.arrow::after { content: ""; position: absolute; top: 0; bottom: 0; right: 5vw; width: 8px; height: 12px; background: url("../images/arrow_right.svg") no-repeat center center; background-size: contain; margin: auto 0; transition: 0.5s 0s; } .btn.arrow:hover::after { background: url("../images/arrow_rightW.svg") no-repeat center center; background-size: contain; } .btn.arrow_bottomW::after { content: ""; position: absolute; top: 0; bottom: 0; right: 30px; width: 12px; height: 8px; background: url("../images/arrow_bottomW.svg") no-repeat center center; background-size: contain; margin: auto 0; transition: 0.5s 0s; } .btn.arrow_bottomW:hover::after { background: url("../images/arrow_bottom.svg") no-repeat center center; background-size: contain; } .btn.arrow_bottomB::after { content: ""; position: absolute; top: 0; bottom: 0; right: 30px; width: 12px; height: 8px; background: url("../images/arrow_bottom.svg") no-repeat center center; background-size: contain; margin: auto 0; transition: 0.5s 0s; } .btn.arrow_bottomB:hover::after { background: url("../images/arrow_bottomW.svg") no-repeat center center; background-size: contain; } } @media screen and (max-width: 600px) { div.mainTtlWrap { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; background: none; margin: 0 auto; } .mainTtl { width: 100%; background: none; color: #89A9CD; padding: 0 5%; } .mainTtl h1, .mainTtl p { position: relative; z-index: 9; width: 100%; line-height: 1.5; } .mainTtl .jp { font-size: calc( 24 / var(--root-font-size) * 1rem ); } .mainTtl .en { font-size: calc( 14 / var(--root-font-size) * 1rem ); padding: 5px 0; } .mainImg { width: 100%; height: 90vw; } .mainImg.about-us { background: url("../images/h_about-us.png") no-repeat top right 70%; background-size: cover; } .mainImg.history { background: url("../images/h_history.png") no-repeat top right 70%; background-size: cover; } .mainImg.medical-services { background: url("../images/h_medical-services.png") no-repeat top right 70%; background-size: cover; } .mainImg.dermatology-and-allergy { background: url("../images/h_dermatology-and-allergy.png") no-repeat top right 70%; background-size: cover; } .mainImg.cosmetic-dermatology { background: url("../images/h_cosmetic-dermatology.png") no-repeat top right 70%; background-size: cover; } .mainImg.vaccination { background: url("../images/h_vaccination.png") no-repeat top right 70%; background-size: cover; } .mainImg.treatment-cost { background: url("../images/h_treatment-cost.png") no-repeat top right 70%; background-size: cover; } .mainImg.clinic-hours-and-access { background: url("../images/h_clinic-hours-and-access.png") no-repeat top right 70%; background-size: cover; } .mainImg.news-and-doctors-column { background: url("../images/h_news-and-doctors-column.png") no-repeat top right 70%; background-size: cover; } .mainImg.medical-questionnair-form { background: url("../images/h_medical-questionnair-form.png") no-repeat top right 70%; background-size: cover; } .mainImg.recruit { background: url("../images/h_recruit.png") no-repeat top right 70%; background-size: cover; } .mainImg.insurance-medical-institution-notice { background: url("../images/h_insurance-medical-institution-notice.png") no-repeat top right 70%; background-size: cover; } } /*----- header -----*/ header { width: 100%; } header .site-header { position: fixed; top: 0; left: 0; width: 100%; } header div.nav.flexWrap { align-items: center; justify-content: space-between; width: 100%; height: 150px; padding: 0 5%; margin: 0 auto; transition: 1s 0s; } header .site-header.fixed-header div.flexWrap { height: 120px; } header .logo { width: 20.5vw; max-width: 246px; transition: 1s 0s; } header .site-header.fixed-header .logo { width: 18.45vw; max-width: 221.4px; } header nav ul.flexWrap { align-items: center; flex-wrap: wrap; justify-content: flex-end; } header nav ul.information { padding: 0 0 15px; } header nav ul.information li.tel { padding: 0 min(1.25vw, 15px) 0 0; } header nav ul.information li.btn { padding: 0 0 0 10px; } header nav ul.gNav li.ttl { line-height: 30px; padding: 0 5px; margin: 0 0 0 min(2.5vw, 30px); } header nav ul.gNav li.ttl { border-bottom: transparent dashed 1px; transition: 0.5s 0s; } header nav ul.gNav li.ttl:hover { border-bottom: #89A9CD dashed 1px; } header nav ul.gNav li.ttl a:hover { color: #585858; } address.tel { position: relative; display: inline-block; color: #89A9CD; font-size: calc( 28 / var(--root-font-size) * 1rem )!important; padding: 0 0 0 25px; } address.tel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 20px; height: 28px; background: url("../images/icon_tel.svg") no-repeat center center; background-size: contain; margin: auto 0; } address.tel a { color: #89A9CD; } @media screen and (max-width: 960px) { header { width: 100%; padding: 10px 5%; } header .logo { width: 143px; max-width: 143px; transition: 1s 0s; } address.tel { position: relative; display: inline-block; color: #89A9CD; font-size: calc( 22 / var(--root-font-size) * 1rem )!important; padding: 0 0 0 23px; } address.tel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18px; height: 25.2px; background: url("../images/icon_tel.svg") no-repeat center center; background-size: contain; margin: auto 0; } address.tel a { color: #89A9CD; } } /* ------------------------------------------------------------------------------ ドロップダウンメニュー ------------------------------------------------------------------------------ */ header .gnavi__list { position: relative; } header .dropdown__lists { visibility: hidden;/*非表示*/ opacity: 0;/*不透明度0*/ position: absolute; z-index: -1; top: 30px; left: -25px; padding: 25px 0 0; transition: 0.5s 0s; } header .gnavi__list:hover .dropdown__lists { visibility: visible;/*ホバーしたら表示*/ opacity: 1; z-index: 99; } header nav ul.gNav li.ttl div.inner { position: relative; background: #F7F7F7; border-radius: 10px; padding: 15px 25px; } header nav ul.gNav li.ttl div.inner::before { content: ""; position: absolute; top: -15px; left: 45px; width: 0; height: 0; border-style: solid; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 18px solid #F7F7F7; border-top: 0; } header nav ul.gNav li.ttl div.about-us.inner { width: 330px; } header nav ul.gNav li.ttl div.medical-services.inner { width: 390px; } header nav ul.gNav li.ttl div.inner a:hover { color: #C1BEBE; } header nav ul.gNav li.ttl div.inner p.ttl { position: relative; width: 100%; border-bottom: #89A9CD dashed 1px; font-size: calc( 20 / var(--root-font-size) * 1rem ); padding: 5px 0; margin: 0 0 15px; } header nav ul.gNav li.ttl div.inner p.ttl::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 8px; height: 12px; background: url("../images/arrow_right.svg") no-repeat center center; background-size: contain; margin: auto 0; } header nav ul.gNav li.ttl div.inner div.flexWrap { justify-content: space-between; } header nav ul.gNav li.ttl div.inner div.flexWrap ul { } header nav ul.gNav li.ttl div.inner div.flexWrap ul li { padding: 0 0 5px; } header nav ul.gNav li.ttl div.inner div.flexWrap ul li a { position: relative; padding: 0 0 0 1.25em; } header nav ul.gNav li.ttl div.inner div.flexWrap ul li a::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0.75em; height: 1px; background: #89A9CD; margin: auto 0; } /*----- main -----*/ main h1, main h2, main h3, main p, main table, main ul li, main ol li { line-height: 1.5; } #medical-services div.subject { width: 90%; max-width: 1200px; margin: 0 auto; } section#medical-services div.subject { margin: -100px auto 0; } #medical-services div.subject.flexWrap { flex-wrap: wrap; justify-content: space-between; padding: 50px 0; } #medical-services div.subject div.dermatology-and-allergy, #medical-services div.subject div.cosmetic-dermatology { display: flex; flex-direction: column; width: 45%; padding: 0 0 100px; } #medical-services div.subject div.vaccination { overflow: hidden; width: 100%; background: #FFF; border-radius: 10px; } #medical-services div.subject div.vaccination div.flexWrap { justify-content: space-between; } #medical-services div.subject div.vaccination div.imgBlock { width: 45%; background: url("../images/medical-services_img3.png") no-repeat center center; background-size: cover; } #medical-services div.subject div.vaccination div.txtBlock { align-content: center; width: 55%; padding: 50px 5%; } #medical-services div.subject div.ttlWrap { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; margin: 0 0 25px; } #medical-services div.subject div.dermatology-and-allergy div.ttlWrap { background: url("../images/medical-services_img1.png") no-repeat center center; background-size: contain; } #medical-services div.subject div.cosmetic-dermatology div.ttlWrap { background: url("../images/medical-services_img2.png") no-repeat center center; background-size: contain; } #medical-services div.subject .ttl { font-size: calc( 24 / var(--root-font-size) * 1rem ); } #medical-services div.subject div.ttlWrap .ttl { text-align: center; padding: 5em 0 0; text-shadow: 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF; } #medical-services div.subject p.txt { padding: 25px 0 50px; } #medical-services div.subject a.btn { max-width: 300px; margin-top: auto; } @media screen and (max-width: 960px) { main h1, main h2, main h3, main p, main table, main ul li, main ol li { line-height: 1.5; } #medical-services div.subject { width: 90%; max-width: 1200px; margin: 0 auto; } section#medical-services div.subject { margin: 0 auto; } #medical-services div.subject.flexWrap { flex-wrap: wrap; justify-content: center; padding: 25px 0; } #medical-services div.subject div.dermatology-and-allergy, #medical-services div.subject div.cosmetic-dermatology { display: flex; flex-direction: column; width: 100%; max-width: 550px; padding: 0 0 50px; margin: 0 auto; } #medical-services div.subject div.vaccination { overflow: hidden; width: 100%; max-width: 550px; background: #FFF; border-radius: 10px; margin: 0 auto; } #medical-services div.subject div.vaccination div.flexWrap { flex-wrap: wrap; justify-content: center; } #medical-services div.subject div.vaccination div.imgBlock { width: 100%; height: 200px; background: url("../images/medical-services_img3.png") no-repeat center center; background-size: cover; } #medical-services div.subject div.vaccination div.txtBlock { align-content: center; width: 100%; padding: 25px 5vw 50px; } #medical-services div.subject div.ttlWrap { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; margin: 0; } #medical-services div.subject div.dermatology-and-allergy div.ttlWrap { background: url("../images/medical-services_img1.png") no-repeat center center; background-size: contain; } #medical-services div.subject div.cosmetic-dermatology div.ttlWrap { background: url("../images/medical-services_img2.png") no-repeat center center; background-size: contain; } #medical-services div.subject .ttl { font-size: calc( 20 / var(--root-font-size) * 1rem ); } #medical-services div.subject div.ttlWrap .ttl { text-align: center; padding: 5em 0 0; text-shadow: 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF, 0 0 10px #FFF; } #medical-services div.subject p.txt { padding: 25px 5vw; } #medical-services div.subject div.vaccination div.txtBlock p.txt { padding: 25px 0; } #medical-services div.subject a.btn { max-width: 300px; margin-top: auto; margin: 0 auto; } } /*----- article -----*/ section.article { padding: 75px 0; } section.article div.inner { width: 90%; max-width: 1200px; padding: 50px 0 0; margin: 0 auto; } section.article div.inner.flexWrap { justify-content: space-between; } section.article div.inner div.articleBlock { width: 65%; } div.informationWrap div.articleBlock ul.archive { padding: 0 0 50px; } div.informationWrap div.articleBlock ul.archive li.article { border-top: #89A9CD dashed 1px; padding: 25px 0; } div.informationWrap div.articleBlock ul.archive li.article:last-child { border-bottom: #89A9CD dashed 1px; } section.article div.inner div.articleBlock ul.archive li.article { padding: 0 0 75px; } section.article div.inner div.articleBlock div.information { padding: 0 25px; } div.articleBlock div.information p.date { line-height: 30px; padding: 0 15px 10px 0; } div.articleBlock ul.category { } div.articleBlock ul.category li { display: inline-block; background: #F8D2CD; border-radius: 15px; line-height: 30px; padding: 0 1em; margin: 0 5px 10px 0; } div.articleBlock ul.category li.color-pink { background: #F8D2CD; } div.articleBlock ul.category li.color-lightBlue { background: #E6EEF6; } div.articleBlock ul.category li.color-gray { background: #DEDEDE; } div.articleBlock ul.category li.color-blue { background: #B6CCE5; } section.article div.inner div.articleBlock .ttl { border-bottom: #89A9CD dashed 1px; font-size: calc( 24 / var(--root-font-size) * 1rem ); padding: 0 25px 15px; margin: 0 0 30px; } section.article div.inner div.articleBlock ul.archive li.article .content { padding: 0 25px; } section.article div.inner div.articleBlock .content { padding: 0 25px 75px; } section.article div.inner div.articleBlock .content p { margin: 0 0 25px; } section.article div.inner div.articleBlock .content p.center { text-align: center; } section.article div.inner div.articleBlock .content a { text-decoration: underline; } section.article div.inner div.articleBlock .content a:hover { text-decoration: none; } section.article div.inner div.articleBlock .content img { max-width: 100%; height: auto; margin: 25px 0; } section.article div.inner div.articleBlock .content .youtube { width: 100%; position: relative; padding-top: 56.25%; margin: 25px 0; } section.article div.inner div.articleBlock .content .youtube iframe { width: 100% !important; height: 100% !important; position: absolute; top: 0; right: 0; } section.article div.inner aside.sideBlock { width: 30%; padding: 40px 0 0; } section.article div.inner aside.sideBlock p.ttl { border-bottom: #89A9CD dashed 1px; color: #89A9CD; font-size: calc( 24 / var(--root-font-size) * 1rem ); text-align: center; padding: 0 0 15px; } section.article div.inner aside.sideBlock ul li { border-bottom: #89A9CD dashed 1px; text-align: center; padding: 30px 0; } section.article div.inner aside.sideBlock ul li a { text-decoration: underline; } section.article div.inner aside.sideBlock ul li a:hover { text-decoration: none; } #pagenation, .pagenation { width: 100%; background: url("../images/lineArticle.png") no-repeat center top; background-size: contain; padding: calc(3% + 50px) 25px 0; } #pagenation ul { display: flex; align-items: center; justify-content: center; } #pagenation ul li { font-size: calc( 20 / var(--root-font-size) * 1rem ); margin: 0 10px!important; } #pagenation ul li .page-numbers { display: block; width: 30px; height: 30px; background: #FFF; border-radius: 50%; color: inherit; line-height: 28px; text-align: center; text-indent: 0.05em; } #pagenation ul li span.page-numbers.current { background: #A0BCDC; color: #FFF; } #pagenation ul li .prev.page-numbers, #pagenation ul li .next.page-numbers { position: relative; background: none!important; } #pagenation ul li .prev.page-numbers .arrow, #pagenation ul li .next.page-numbers .arrow { display: inline-block; width: 30px; height: 30px; } #pagenation ul li .prev.page-numbers .arrow { background: url("../images/arrow_prev.svg") no-repeat center center; background-size: contain; } #pagenation ul li .next.page-numbers .arrow { background: url("../images/arrow_next.svg") no-repeat center center; background-size: contain; } .pagenation { display: flex; align-items: center; justify-content: space-between; } .pagenation div.prev, .pagenation div.next { width: 30px; } .pagenation div.back { width: 30%; } .pagenation div.back p { color: #89A9CD; font-size: calc( 20 / var(--root-font-size) * 1rem ); text-align: center; } .pagenation div.back p a { color: #89A9CD; } .pagenation div.back p a:hover { color: #C1BEBE; } @media screen and (max-width: 960px) { section.article { padding: 75px 0; } section.article div.inner { width: 90%; max-width: 1200px; padding: 25px 0 0; margin: 0 auto; } section.article div.inner.flexWrap { flex-wrap: wrap; justify-content: space-between; } section.article div.inner div.articleBlock { width: 100%; padding: 0 0 75px; } div.informationWrap div.articleBlock ul.archive { padding: 0 0 50px; } div.informationWrap div.articleBlock ul.archive li.article { border-top: #89A9CD dashed 1px; padding: 25px 0; } div.informationWrap div.articleBlock ul.archive li.article:last-child { border-bottom: #89A9CD dashed 1px; } section.article div.inner div.articleBlock ul.archive li.article { padding: 0 0 50px; } section.article div.inner div.articleBlock div.information { padding: 0; } div.articleBlock div.information p.date { line-height: 25px; padding: 0 15px 10px 0; } div.articleBlock ul.category { } div.articleBlock ul.category li { display: inline-block; background: #F8D2CD; border-radius: 15px; line-height: 25px; padding: 0 0.5em; margin: 0 5px 10px 0; } div.articleBlock ul.category li.color-pink { background: #F8D2CD; } div.articleBlock ul.category li.color-lightBlue { background: #E6EEF6; } div.articleBlock ul.category li.color-gray { background: #DEDEDE; } div.articleBlock ul.category li.color-blue { background: #B6CCE5; } section.article div.inner div.articleBlock .ttl { border-bottom: #89A9CD dashed 1px; font-size: calc( 20 / var(--root-font-size) * 1rem ); padding: 0 0 15px; margin: 0 0 30px; } section.article div.inner div.articleBlock ul.archive li.article .content { padding: 0; } section.article div.inner div.articleBlock .content { padding: 0 0 75px; } section.article div.inner div.articleBlock .content p { margin: 0 0 25px; } section.article div.inner div.articleBlock .content p.center { text-align: center; } section.article div.inner div.articleBlock .content a { text-decoration: underline; } section.article div.inner div.articleBlock .content a:hover { text-decoration: none; } section.article div.inner div.articleBlock .content img { max-width: 100%; height: auto; margin: 25px 0; } section.article div.inner div.articleBlock .content .youtube { width: 100%; position: relative; padding-top: 56.25%; margin: 25px 0; } section.article div.inner div.articleBlock .content .youtube iframe { width: 100% !important; height: 100% !important; position: absolute; top: 0; right: 0; } section.article div.inner aside.sideBlock { width: 100%; padding: 40px 0 0; } section.article div.inner aside.sideBlock p.ttl { border-bottom: #89A9CD dashed 1px; color: #89A9CD; font-size: calc( 20 / var(--root-font-size) * 1rem ); text-align: center; padding: 0 0 15px; } section.article div.inner aside.sideBlock ul li { border-bottom: #89A9CD dashed 1px; text-align: center; padding: 15px 0; } section.article div.inner aside.sideBlock ul li a { text-decoration: underline; } section.article div.inner aside.sideBlock ul li a:hover { text-decoration: none; } #pagenation ul { display: flex; align-items: center; justify-content: center; } #pagenation ul li { font-size: calc( 20 / var(--root-font-size) * 1rem ); margin: 0 10px!important; } #pagenation ul li .page-numbers { display: block; width: 30px; height: 30px; background: #FFF; border-radius: 50%; color: inherit; line-height: 28px; text-align: center; text-indent: 0.05em; } #pagenation ul li span.page-numbers.current { background: #A0BCDC; color: #FFF; } #pagenation ul li .prev.page-numbers, #pagenation ul li .next.page-numbers { position: relative; background: none!important; } #pagenation ul li .prev.page-numbers .arrow, #pagenation ul li .next.page-numbers .arrow { display: inline-block; width: 30px; height: 30px; } #pagenation ul li .prev.page-numbers .arrow { background: url("../images/arrow_prev.svg") no-repeat center center; background-size: contain; } #pagenation ul li .next.page-numbers .arrow { background: url("../images/arrow_next.svg") no-repeat center center; background-size: contain; } .pagenation { display: flex; align-items: center; justify-content: space-between; } .pagenation div.prev, .pagenation div.next { width: 30px; } .pagenation a:hover img { filter: alpha(opacity=100); -khtml-opacity: 1; -moz-opacity: 1; opacity: 1; } .pagenation div.back { width: calc(100% - 60px); } .pagenation div.back p { color: #89A9CD; font-size: calc( 18 / var(--root-font-size) * 1rem ); text-align: center; } .pagenation div.back p a { color: #89A9CD; } .pagenation div.back p a:hover { color: #C1BEBE; } } /*----- footer -----*/ footer { } footer p, footer table, footer small { line-height: 1.5; } footer .fTop { width: 90%; max-width: 1200px; padding: 150px 0; margin: 0 auto; } footer .fTop .information { width: 100%; } footer .fTop .information.flexWrap { flex-wrap: wrap; justify-content: space-between; padding: 0 0 25px; } footer .fTop .information .googleMapBlock { width: 46.25%; padding: 0 0 50px; } footer .fTop .information .googleMapBlock iframe { width: 100%; height: 100%; } footer .fTop .information .imgBlock { width: 52.5%; padding: 0 0 50px; } footer .fTop .information .informationBlock { width: 46.25%; padding: 0 0 50px; margin: 0 0 0 5%; } footer .fTop .information .informationBlock div.logo { padding: 0 0 25px; } footer .fTop .information .informationBlock p.department { font-size: calc( 20 / var(--root-font-size) * 1rem ); padding: 0 0 25px; } section#clinic-hours div.opening-hours { width: 90%; max-width: 1080px; margin: 0 auto; } div.opening-hours table { overflow: hidden; width: 100%; background: #FFF; border: #A0BCDC solid 1px; border-collapse: separate; border-radius: 10px; margin: 0 0 15px; } div.opening-hours table thead { background: #B6CCE5; color: #FFF; } div.opening-hours table th, div.opening-hours table td { font-size: min(1.25vw, calc( 16 / var(--root-font-size) * 1rem )); vertical-align: middle; padding: 15px 0; } section#clinic-hours div.opening-hours table th, section#clinic-hours div.opening-hours table td { font-size: calc( 20 / var(--root-font-size) * 1rem ); } div.opening-hours table tbody th, div.opening-hours table tbody td { border-top: #A0BCDC solid 1px; } div.opening-hours table th { width: 27.5%; text-align: center; } div.opening-hours table td { width: 10%; border-left: #A0BCDC solid 1px; text-align: center; } div.opening-hours table td:last-child { width: 12.5%; } div.opening-hours table tbody td { font-size: min(1.5vw, calc( 18 / var(--root-font-size) * 1rem )); } section#clinic-hours div.opening-hours table tbody td { font-size: calc( 20 / var(--root-font-size) * 1rem ); } div.opening-hours table tbody td span.open { position: relative; display: inline-block; width: 1.5vw; max-width: 18px; height: 1.25vw; max-height: 18px; } section#clinic-hours div.opening-hours table tbody td span.open { width: 18px; height: 18px; } div.opening-hours table tbody td span.open::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 1.5vw; max-width: 18px; height: 1.5vw; max-height: 18px; background: #A0BCDC; border-radius: 50%; margin: auto; } section#clinic-hours div.opening-hours table tbody td span.open::before { width: 18px; height: 18px; } div.opening-hours table tbody td span.sat.open::before { background: #F5A8A0; } div.opening-hours table tbody td span.close { position: relative; display: inline-block; width: 1.75vw; max-width: 21px; height: 1.25vw; max-height: 18px; } section#clinic-hours div.opening-hours table tbody td span.close { width: 21px; height: 18px } div.opening-hours table tbody td span.close::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 1.75vw; max-width: 21px; height: 1px; background: #707070; margin: auto; transform: rotate(-45deg); } section#clinic-hours div.opening-hours table tbody td span.close::before { width: 21px; height: 1px } div.opening-hours p.note { position: relative; padding: 0 0 0 25px; margin: 0 0 25px; } section#clinic-hours div.opening-hours p.note { font-size: calc( 20 / var(--root-font-size) * 1rem ); } div.opening-hours p.note::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 20px; height: 20px; background: #F5A8A0; border-radius: 50%; margin: auto 0; } footer .fTop .information .informationBlock .address { padding: 0 0 15px; } footer .fTop .information .informationBlock .address span { font-size: calc( 20 / var(--root-font-size) * 1rem ); } footer .fTop .information .parkingBlock { width: 38.75%; padding: 0 0 50px; margin: 0 5% 0 0; } footer .fTop .information .parkingBlock p { font-size: calc( 24 / var(--root-font-size) * 1rem ); text-align: center; padding: 25px 0; } footer .fTop .information .parkingBlock p span { font-size: calc( 20 / var(--root-font-size) * 1rem ); padding: 0 0 0 50px; } footer .fTop .payment { width: 100%; max-width: 1000px; background: #F7F7F7; border-radius: 10px; padding: 25px min(10%, 100px); margin: 0 auto 40px; } footer .fTop .line { width: 100%; max-width: 1000px; border: #A0BCDC dashed 1px; border-radius: 10px; padding: 30px min(10%, 100px); margin: 0 auto; } footer .fTop .payment.flexWrap, footer .fTop .line.flexWrap { align-items: center; } footer .fTop .payment p, footer .fTop .line p { width: 67.5%; font-size: calc( 20 / var(--root-font-size) * 1rem ); } footer .fBottom { position: relative; background: #A2BBDC; margin: 164px 0 0; padding: 100px 0 50px; } footer .fBottom::before { content: ""; position: absolute; top: -164px; left: 0; right: 0; width: 100%; height: 164px; background: url("../images/f_bg.png") repeat-x center bottom; background-size: 2100px 164px; margin: auto 0; } footer .pageTop { position: absolute; top: -135px; left: calc(50% + 380px); width: 190px; height: 190px; background: url("../images/page_top_img.png") no-repeat center bottom; background-size: 184px 120px; } footer .pageTop img { position: absolute; top: 0; right: 15px; width: 80px; height: 80px; transition: 0.5s 0s; } footer .pageTop:hover img { top: -5px; } footer .pageTop a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } footer .copyright { text-align: center; } footer .copyright small { color: #FFF; } @media screen and (max-width: 1200px) { footer .fBottom::before { content: ""; position: absolute; top: -164px; left: 0; right: 0; width: 100%; height: 164px; background: url("../images/f_bg.png") no-repeat right -360px bottom; background-size: 2100px 164px; margin: auto 0; } footer .pageTop { position: absolute; top: -135px; left: inherit; right: 120px; width: 190px; height: 190px; background: url("../images/page_top_img.png") no-repeat center bottom; background-size: 184px 120px; } } @media screen and (max-width: 960px) { footer .fTop { width: 90%; max-width: 1200px; padding: 75px 0; margin: 0 auto; } footer .fTop .information { width: 100%; } footer .fTop .information.flexWrap { flex-wrap: wrap; justify-content: space-between; padding: 0; } footer .fTop .information .googleMapBlock { width: 100%; padding: 0 0 50px; } footer .fTop .information .googleMapBlock iframe { width: 100%; height: 350px; } footer .fTop .information .imgBlock { width: 100%; padding: 0 0 50px; } footer .fTop .information .imgBlock img { border-radius: 10px; } footer .fTop .information .informationBlock { width: 100%; padding: 0 0 50px; margin: 0; } footer .fTop .information .informationBlock div.logo { width: 180px; padding: 0 0 25px; margin: 0 auto; } footer .fTop .information .informationBlock p.department { font-size: calc( 16 / var(--root-font-size) * 1rem ); text-align: center; padding: 0 0 25px; } section#clinic-hours div.opening-hours { width: 90%; max-width: 1080px; margin: 0 auto; } div.opening-hours table { overflow: hidden; width: 100%; background: #FFF; border: #A0BCDC solid 1px; border-collapse: separate; border-radius: 5px; margin: 0 0 15px; } div.opening-hours table thead { background: #B6CCE5; color: #FFF; } div.opening-hours table th, div.opening-hours table td { font-size: min(3.5vw, calc( 14 / var(--root-font-size) * 1rem )); vertical-align: middle; padding: 10px 0; } section#clinic-hours div.opening-hours table th, section#clinic-hours div.opening-hours table td { font-size: min(3.5vw, calc( 14 / var(--root-font-size) * 1rem )); } div.opening-hours table tbody th, div.opening-hours table tbody td { border-top: #A0BCDC solid 1px; } div.opening-hours table th { width: 25%; text-align: center; } div.opening-hours table td { width: 10%; border-left: #A0BCDC solid 1px; text-align: center; } div.opening-hours table td:last-child { width: 15%; } div.opening-hours table tbody td { font-size: min(3.5vw, calc( 14 / var(--root-font-size) * 1rem )); } section#clinic-hours div.opening-hours table tbody td { font-size: min(3.5vw, calc( 14 / var(--root-font-size) * 1rem )); } div.opening-hours table tbody td span.open { position: relative; display: inline-block; width: 3.5vw; max-width: 14px; height: 3vw; max-height: 14px; } section#clinic-hours div.opening-hours table tbody td span.open { width: 3.5vw; max-width: 14px; height: 3vw; max-height: 14px; } div.opening-hours table tbody td span.open::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 3.5vw; max-width: 14px; height: 3.5vw; max-height: 14px; background: #A0BCDC; border-radius: 50%; margin: auto; } section#clinic-hours div.opening-hours table tbody td span.open::before { width: 3.5vw; max-width: 14px; height: 3.5vw; max-height: 14px; } div.opening-hours table tbody td span.sat.open::before { background: #F5A8A0; } div.opening-hours table tbody td span.close { position: relative; display: inline-block; width: 4vw; max-width: 16px; height: 3vw; max-height: 14px; } section#clinic-hours div.opening-hours table tbody td span.close { width: 4vw; max-width: 16px; height: 3vw; max-height: 14px; } div.opening-hours table tbody td span.close::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 4vw; max-width: 16px; height: 1px; background: #707070; margin: auto; transform: rotate(-45deg); } section#clinic-hours div.opening-hours table tbody td span.close::before { width: 4vw; max-width: 16px; height: 1px } div.opening-hours p.note { position: relative; font-size: min(3.5vw, calc( 14 / var(--root-font-size) * 1rem )); padding: 0 0 0 min(calc(3.5vw + 5px), 19px); margin: 0 0 25px; } section#clinic-hours div.opening-hours p.note { font-size: min(3.5vw, calc( 14 / var(--root-font-size) * 1rem )); } div.opening-hours p.note::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3.5vw; max-width: 14px; height: 3.5vw; max-height: 14px; background: #F5A8A0; border-radius: 50%; margin: auto 0; } footer .fTop .information .informationBlock .address { font-size: calc( 14 / var(--root-font-size) * 1rem ); padding: 0 0 15px; } footer .fTop .information .informationBlock .address span { font-size: calc( 16 / var(--root-font-size) * 1rem ); } footer .fTop .information .parkingBlock { width: 100%; padding: 0 0 50px; margin: 0; } footer .fTop .information .parkingBlock p { font-size: calc( 24 / var(--root-font-size) * 1rem ); text-align: center; padding: 25px 0; } footer .fTop .information .parkingBlock p span { font-size: calc( 20 / var(--root-font-size) * 1rem ); padding: 0 0 0 25px; } footer .fTop .payment { width: 100%; max-width: 1000px; background: #F7F7F7; border-radius: 10px; padding: 30px min(10%, 100px); margin: 0 auto 40px; } footer .fTop .line { width: 100%; max-width: 1000px; border: #A0BCDC dashed 1px; border-radius: 10px; padding: 30px min(10%, 100px); margin: 0 auto; } footer .fTop .payment.flexWrap, footer .fTop .line.flexWrap { align-items: center; flex-wrap: wrap; } footer .fTop .payment p, footer .fTop .line p { width: 100%; font-size: calc( 18 / var(--root-font-size) * 1rem ); text-align: center; padding: 0 0 15px; } footer .fTop .payment ul.flexWrap { width: 100%; justify-content: center; } footer .fTop .line a { width: 100%; text-align: center; } footer .fBottom { position: relative; background: #A2BBDC; margin: 123px 0 0; padding: 100px 0 115px; } footer .fBottom::before { content: ""; position: absolute; top: -123px; left: 0; right: 0; width: 100%; height: 123px; background: url("../images/f_bg_sp.png") repeat-x center bottom; background-size: 980px 123px; margin: auto 0; } footer .pageTop { position: absolute; top: -100px; left: calc(50% + 25px); width: 142.5px; height: 142.5px; background: url("../images/page_top_img.png") no-repeat center bottom; background-size: 138px 90px; } footer .pageTop img { position: absolute; top: 0; right: 15px; width: 60px; height: 60px; transition: 0.5s 0s; } footer .pageTop:hover img { top: -5px; } footer .pageTop a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } footer .copyright { font-size: calc( 12 / var(--root-font-size) * 1rem ); text-align: center; } footer .copyright small { color: #FFF; } } /*----- page_top -----*/ /*リンクの形状*/ /*リンクを右下に固定*/ #page_top { position: fixed; right: 5%; z-index: 9; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #FFF; /*はじめは非表示*/ opacity: 0; transform: translateY(85px); cursor: pointer; } /*上に上がる動き*/ #page_top.UpMove { animation: UpAnime 0.5s forwards; } #page_top p { position: relative; color: #9EAA59; font-size: calc( 12 / var(--root-font-size) * 1rem ); font-weight: 700; letter-spacing: 0.1em; text-align: center; text-indent: 0.1em; padding: 20px 0 0; } #page_top p::before { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 15px; height: 15px; background: url("../images/arrow_g.svg") no-repeat center center; background-size: contain; margin: 0 auto; } @keyframes UpAnime { from { opacity: 1; transform: translateY(85px); } to { opacity: 1; transform: translateY(0); } } /*下に下がる動き*/ #page_top.DownMove { animation: DownAnime 0.5s forwards; } @keyframes DownAnime { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(95px); } } @media screen and (max-width: 960px) { #page_top { display: none; } } .grecaptcha-badge {visibility: hidden;} /*----- sp nav -----*/ /*アクティブになったエリア*/ #g-nav { /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/ position: fixed; opacity: 0;/*はじめは透過0*/ z-index: -1; /*ナビのスタート位置と形状*/ top: 0; left: 0; width: 100%; height: 100vh;/*ナビの高さ*/ background: #A0BCDC; transition: 0.25s 0s; } /*アクティブクラスがついたら透過なしにして最前面へ*/ #g-nav.panelactive { opacity: 1; z-index: 1000; } /*ナビゲーションの縦スクロール*/ #g-nav-list { display: none;/*はじめは表示なし*/ /*ナビの数が増えた場合縦スクロール*/ position: fixed; z-index: 999; width: 100%; height: 100vh; overflow: auto; -webkit-overflow-scrolling: touch; } #g-nav.panelactive #g-nav-list { display: block;/*クラスが付与されたら出現*/ } /*ナビゲーション*/ #g-nav div.inner { position: relative; width: 90%; max-width: 360px; background: url("../images/nav_bg1.png") no-repeat center top; background-size: contain; padding: 10px 0 73px; margin: 50px auto 25px; opacity: 0;/*はじめは透過0*/ } #g-nav div.inner::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 204px; height: 48px; background: url("../images/nav_bg2.png") no-repeat center center; background-size: contain; margin: 0 auto; } /*背景が出現後にナビゲーションを表示*/ #g-nav.panelactive div.inner { opacity: 1; } #g-nav div.reservation { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 132px; background: url("../images/nav_bg3.svg") no-repeat center top; background-size: cover; } #g-nav div.reservation::before { content: ""; position: absolute; top: -38px; left: 0; right: 0; width: 78px; height: 38px; background: url("../images/illust_pippi2.svg") no-repeat center center; background-size: contain; margin: 0 auto; } #g-nav div.reservation a { position: relative; display: flex; align-items: center; justify-content: center; width: 180px; height: 40px; background: #F5A8A0; border-radius: 20px; color: #FFF; } #g-nav div.block { position: relative; width: 100%; background: #FFF; padding: 50px min(7.5vw, 30px); } #g-nav div.block::after { content: ""; position: absolute; bottom: 0; right: min(3.75vw, 15px); width: 90px; height: 128px; background: url("../images/illust_baerery2.svg") no-repeat center center; background-size: contain; } #g-nav ul { position: relative; padding: 0 0 50px; } /*リストのレイアウト設定*/ #g-nav li { border-bottom: #89A9CD dashed 1px; font-size: min(4vw, calc( 16 / var(--root-font-size) * 1rem )); } #g-nav li:first-child { border-top: #89A9CD dashed 1px; } #g-nav li a { display: block; padding: 15px 5px; } /*アコーディオン全体*/ #g-nav .accordion-area { } #g-nav .accordion-area div.inner { width: 100%; margin: 0 auto; } /*アコーディオンタイトル*/ #g-nav .accordion-area .title { position: relative; cursor: pointer; padding: 15px 5px; transition: 0.5s 0s; } #g-nav .accordion-area .title.close { } /*アイコンの＋と×*/ #g-nav .accordion-area .title::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 18px; height: 12px; background: url("../images/arrow_right.svg") no-repeat center center; background-size: contain; margin: auto 0; transition: 0.5s 0s; } /*　closeというクラスがついたら形状変化　*/ #g-nav .accordion-area li .title.close::after { transform: rotate(180deg); } /*アコーディオンで現れるエリア*/ #g-nav .accordion-area .box { display: none;/*はじめは非表示*/ padding: 0 5px; } #g-nav .accordion-area .box ul { padding: 0 0 10px; } #g-nav .accordion-area .box ul:first-of-type { margin: 0 1em 0 0; } #g-nav .accordion-area .box ul li { position: relative; border-bottom: none; padding: 0 0 0 1em; } #g-nav .accordion-area .box ul li::before { content: ""; position: absolute; top: calc(10px + 0.5em); left: 0; width: 0.75em; height: 1px; background: #89A9CD; } #g-nav .accordion-area .box ul li:first-child { border-top: none; } #g-nav .accordion-area .box ul li a { display: block; padding: 10px 5px; } /*ボタンの設定*/ .openbtn { position: fixed; z-index: 1001;/*ボタンを最前面に*/ top: 10px; right: 5%; display: inline-block; width: 50px; height: 50px; background: #FFF; border-radius: 5px; cursor: pointer; appearance: none; } .openbtn.active { background: none; } .openbtn span { display: inline-block; box-sizing: border-box; position: absolute; left: 0; right: 0; width: 30px; height: 2px; background: #A0BCDC; border-radius: 1px; margin: 0 auto; transition: all 0.5s; } .openbtn.active span { background: #FFF; } .openbtn span:nth-of-type(1) { top: 15px; animation: menu-bar1 0.5s forwards; } .openbtn span:nth-of-type(2) { top: 0; bottom: 0; margin: auto; } .openbtn span:nth-of-type(3) { bottom: 15px; animation: menu-bar2 0.5s forwards; } .openbtn.active span:nth-of-type(1) { animation: menu-active-bar1 0.5s forwards; } .openbtn.active span:nth-of-type(2) { display: none; } .openbtn.active span:nth-of-type(3) { animation: menu-active-bar2 0.5s forwards; } @keyframes menu-bar1 { 0% { transform: translateY(9px) rotate(30deg); } 50% { transform: translateY(9px) rotate(0); } 100% { transform: translateY(0) rotate(0); } } @keyframes menu-bar2 { 0% { transform: translateY(-9px) rotate(-30deg); } 50% { transform: translateY(-9px) rotate(0); } 100% { transform: translateY(0) rotate(0); } } @keyframes menu-active-bar1 { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(9px) rotate(0); } 100% { transform: translateY(9px) rotate(30deg); } } @keyframes menu-active-bar2 { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(0); } 100% { transform: translateY(-9px) rotate(-30deg); } } #scrollNav { position: fixed; left: 0; bottom: 0; z-index: 99; display: flex; justify-content: center; width: 100%; height: 90px; background: rgba(255, 255, 255, 0.9); padding: 10px; } #scrollNav div { margin: 0 5px; } #scrollNav div.reservation a { display: flex; align-items: center; justify-content: center; width: 240px; height: 70px; background: #F5A8A0; border-radius: 5px; color: #FFF; line-height: 70px; text-align: center; } /* fadeUp */ .fadeUp { animation-name: fadeUpAnime; animation-duration: 1.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(75px); } to { opacity: 1; transform: translateY(0); } } /* スクロールをしたら出現する要素にはじめに透過0を指定　*/ .fadeUpTrigger { opacity: 0; } @keyframes scroll_bar { 0% {top: 30px;} 100% {top: 130px;} } @keyframes scroll_barhide { 0% {opacity: 0;} 10% {opacity: 1;} 50% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }