@charset "utf-8";
/*
Theme Name: L-style
Theme URI: http://www./
Description: L-style
Version: 1.0
Author: L-style
Author URI: http://www./
Tags: L-style
*/
@media screen and (max-width: 767px){
.pc-block{
display: none;
}
.sp-block{
display: block;
}
.inner {
max-width: 100%;
width: 100%;
margin: 0 auto;
padding:0 20px;
}
.button {
width: auto;
font-size: 2.0rem;
font-size: 20px;
}
.h-type-01::before{
margin-bottom: 0;
font-size: 48px;
font-size: 4.8rem;
}
.h-type-01.type-right {
text-align: center;
}
.h-type-02::before{
margin-bottom: 0;
}
.h-type-03 > span{
margin-bottom: 0;
line-height: 1.8;
}
p.more.type-view-more-01{
display: block;
}
p.more.type-view-more-01 > a{
display: block;
}
p.more.type-view-more-01 > a > span{
display: block;
width: 100%;
}
/* #menu */
/*******************
* menu
********************/
#menu div.menu-content{
width: 100%;
}
#menu div.menu-content div.menu-content-body > div.menu-block{
flex-direction: column;
}
#menu div.menu-content::before{
width: auto;
}
#menu div.menu-content div.menu-content-body > div.menu-block dl.list > dt {
margin-bottom: 0;
}
#menu div.menu-content div.menu-content-body > div.menu-block > div.about{
margin-bottom: 2.2em;
}
/*******************************
/* main
*******************************/
#hero {
margin-bottom: 4.2em;
}
#header {
margin-top: 0;
}
#header > div.wrap > div.nav{
display: none;
}
#header > div.wrap > div#menu.menu{
position: fixed;
top: 10px;
width: 62px;
height: 62px;
}
#menu div.menu-icon{
width: 62px;
height: 62px;
}
#menu div.menu-icon > span{
left: 16px;
}
#menu div.menu-icon > i{
width: 100%;
text-align: center;
}
body.menu-open #menu div.menu-icon > span:nth-child(1), body.menu-open #menu div.menu-icon > span:nth-child(2) {
top: 20px;
left: 18px;
}
#header > div.wrap > div.logo{
height: clamp(120px, 16vh, 160px);
}
#header > div.wrap > div.logo > a{
width: 85%;
height: 85%;
padding: 6% 2.8% 2.8% 10%;
}
#header > div.wrap > div.logo > a div.mark{
width: 90%;
}
#header > div.wrap > div.logo > a div.name {
margin-top: 4px;
}
#header > div.wrap > div.logo > a div.name h1{
line-height: 1;
text-align: center;
}
#header > div.wrap > div.logo > a div.name h1 > span{
line-height: 1;
font-size: 20px;
font-size: 2.0rem;
}
#header > div.wrap > div.logo > a div.name h1 > span > span{
margin-right: 0;
display: block;
font-size: 14px;
font-size: 1.4rem;
}
#header.resize > div.wrap > div.logo{
transform: scale(0.75);
}
#hero > div.wrap > div.head p.primary{
font-size: 36px;
font-size: 3.6rem;
}
div.home-greeting {
margin-bottom: 6.7em;
}
div.home-greeting > div.wrap > div.layout{
flex-direction: column;
}
div.home-greeting > div.wrap > div.layout > div.image{
border-radius: 0;
}
div.home-greeting > div.wrap > div.layout > div.body{
padding: 12% 6% 6% 6%;
}
div.home-greeting > div.wrap > div.layout > div.body > div.body > div.title{
margin-bottom: 1em;
}
div.home-greeting > div.wrap > div.layout > div.body > div.head {
margin-bottom: 2.5em;
}
div.home-greeting > div.wrap > div.layout > div.body > div.body > div.more{
text-align: center;
margin-top: 3.8em;
}
div.home-facility > div.wrap > div.area::before{
height: calc((100% - 12%) + 8.2em);
top: auto;
bottom: -3%;
left: -18%;
}
div.home-facility > div.wrap > div.area > div.head{
margin-bottom: 1.6em;
}
div.home-facility > div.wrap > div.area > div.body > ul.list{
flex-direction: column;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li {
flex: 0 1 auto;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li+li{
margin-top: 4rem;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li:nth-child(n + 3){
margin-top: 4rem;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li div.box > div.head > a > div.image{
margin-bottom: 1.4em;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li div.box > div.head > a > div.image > span.arrow{
right: -0.8em;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li div.box > div.head > a > div.image > span.arrow > span::before{
width: 50px;
height: 50px;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li div.box > div.head > a > div.image > span.arrow > span::after{
left: 55%;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li div.box > div.head > a > div.name{
padding: 0 0.8em;
margin-bottom: 1.4em;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li div.box > div.overview{
padding: 0 0.8em;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li div.box > div.overview > div.contact > div.address p.address{
display: inline;
}
div.home-facility > div.wrap > div.area > div.body > ul.list > li div.box > div.overview > div.contact > div.address p.address span.sub{
margin-left: 0;
}
div.home-news{
padding: 0 0 0.8em 0;
}
div.home-news > div.wrap > div.area{
flex-direction: column;
}
div.home-news > div.wrap > div.area > div.head{
width: auto;
}
div.home-news > div.wrap > div.area > div.body > div.news-list > ul.list > li{
padding: 0 1.8em;
}
div.home-news > div.wrap > div.area > div.body > div.news-list > ul.list > li > a{
flex-direction: column;
padding: 1.5em 0;
}
div.home-news > div.wrap > div.area > div.body > div.news-list > ul.list > li > a::before{
top: 1.8em;
}
div.home-news > div.wrap > div.area > div.body > div.news-list > ul.list > li > a span.time{
margin-right: 0;
}
div.home-news > div.wrap > div.area > div.body > div.news-list > ul.list > li:hover{
margin-left: auto;
}
div.home-news > div.wrap > div.area > div.body > div.news-list > ul.list > li > a:hover::before{
left: 0;
}
div.home-about > div.wrap > div.head {
padding: 6.2em 0 2.4em 0;
}
div.home-about > div.wrap > div.body{
padding: 0 0 4.2em 0;
}
div.home-about > div.wrap > div.body > div.slide > div.slide-about div.swiper-slide{
width: min(100%, 320px);
}
div.home-about > div.wrap > div.body > div.slide > div.slide-about div.box > a div.body {
padding: 1.2em 1.2em 2.8em 1.2em;
}
.logo-mark-origin-01 > div.mark{
width: 76%;
}
#footer > div.footer-content{
padding: 4.2em 6% 4.8em 6%;
}
#footer > div.footer-content > div.wrap > div.clinic > ul.list{
flex-direction: column;
}
#footer > div.footer-content > div.wrap > div.clinic > ul.list > li{
flex: 0 1 auto;
}
#footer > div.footer-content > div.wrap > div.clinic > ul.list > li+li{
margin-top: 1rem;
}
#footer > div.footer-content > div.wrap > div.overview{
margin-bottom: 2em;
}
#footer > div.footer-content > div.wrap > div.overview > div.block > div.menu{
display: none;
}
#footer > div.footer-content > div.wrap > div.overview > div.block > div.logo{
position: relative;
width: 100%;
}
#footer > div.footer-copyright > div.wrap{
flex-direction: column;
}
#footer > div.footer-content > div.wrap > div.overview > div.block > div.summary {
order: 2;
flex: 0 1 auto;
margin-left: auto;
text-align: center;
margin-top: 2rem;
}
#container.inner-page{
padding-bottom: 4.5em;
}
body.page #hero.inner-hero > .wrap, body.archive #hero.inner-hero > .wrap, body.single #hero.inner-hero > .wrap {
height: calc(70vh - 90px);
min-height: 420px;
flex-direction: column;
}
body.page #hero.inner-hero > .wrap > div.head, body.archive #hero.inner-hero > .wrap > div.head, body.single #hero.inner-hero > .wrap > div.head{
width: auto;
height: calc(70vh - 90px);
min-height: 420px;
}
body.page #hero.inner-hero > div.wrap > div.head {
width: 100%;
left: 0;
}
body.page #hero.inner-hero > div.wrap > div.head > div.title-text{
width: 100%;
margin-top: 50%;
}
body.page #hero.inner-hero > div.wrap > div.head > div.title-text h2{
text-align: center;
line-height: 1.5;
}
body.page #hero.inner-hero > div.wrap > div.head > div.title-text h2::before{
font-size: 24px;
font-size: 2.4rem;
}
body.page #hero.inner-hero > div.wrap > div.head > div.title-text h2 > span{
font-size: 48px;
font-size: 4.8rem;
}
#container.inner-page section .inner-block01 {
background: #fffdf6;
padding-top: 8.6em;
padding-bottom: 10.5em;
padding: 4.8em 20px 4em;
}
#container.inner-page section .inner-block02 {
padding: 3.8em 20px 0;
}
#container.inner-page section .wrap .layout .head .h-type-02 > span{
font-size: 36px;
font-size: 3.6rem;
}
#container.inner-page section .wrap .layout .head .h-type-02::before{
font-size: 24px;
font-size: 2.4rem;
}
body.greeting section .inner-block01 .wrap .layout .body .title .h-type-03 > span{
font-size: 30px;
font-size: 3.0rem;
margin-bottom: 1em;
}
body.greeting section .wrap .layout .text p:nth-child(1){
text-align: left;
}
body.greeting section .wrap .layout .text p span{
display: inline;
}
body.greeting section .wrap .layout .text p:nth-child(2){
margin-top: 4rem;
}
body.greeting section .inner-block02 .wrap .layout .body .text {
margin-top: 2rem;
}
body.doctor section .inner-block01 .wrap .layout .body .title .h-type-03 > span{
margin-top: 1.6em;
}
body.doctor section .inner-block02 .wrap .layout .body .box .doctor-name{
padding: 6px 20px;
font-size: 18px;
font-size: 1.8rem;
}
body.doctor section .inner-block02 .wrap .layout .body .box .flex-box{
flex-direction: column;
padding-top: 20px;
}
body.doctor section .inner-block02 .wrap .layout .body .box .flex-box div+div{
margin-top: 2rem;
}
body.doctor section .inner-block02 .wrap .layout .body .box .flex-box .post dl dd {
margin-top: 0;
}
body.doctor section .inner-block02 .wrap .layout .body .box .flex-box .post dl+dl{
margin-top: 2rem;
}
body.doctor section .inner-block02 .wrap .layout .body .box+.box {
margin-top: 60px;
}
#container.inner-page section .wrap{
max-width: 100%;
}
body.page-template section .inner h4 span{
font-size: 18px;
font-size: 1.8rem;
}
body.page-template section div.block .about{
margin: 60px auto 0;
}
body.page-template section div.block .about ul li dl{
flex-direction: column;
}
body.page-template section div.block .about ul li dl dt{
width: auto;
}
body.page-template section div.block .about ul li dl dd{
width: auto;
font-size: 16px;
}
body.page-template section .inner-block01 .wrap .layout .body .title .h-type-03 > span{
font-size: 18px;
font-size: 1.8rem;
margin-top: 1.8em;
}
body.page-template .tmp-clinic-information .inner{
padding: 0;
}
body.page-template section div.block .subject .box{
margin-top: 20px;
}
body.page-template section div.block .subject .box+.box{
margin-top: 20px;
}
body.page-template section div.block .subject dl{
flex-direction: column;
}
body.page-template section div.block .subject dl dt{
width: 100%;
}
body.page-template section div.block .subject dl dd{
width: auto;
margin-top: 1rem;
}
body.page-template section div.block .access .flex-box{
padding-left: 0;
flex-direction: column;
align-items: baseline;
}
body.page-template section div.block .access > div.box .map iframe{
width: 100%;
}
body.page-template section .clinic-medical-notice div.block .flex-box{
flex-direction: column;
}
body.page-template section .clinic-medical-notice div.block .flex-box > div.box {
width: auto;
}
body.page-template section .clinic-medical-notice div.block .flex-box > div.box > p a.expansion{
width: 100%;
margin-top: 1rem;
}
body.page-template section .clinic-medical-notice div.block > a.button{
width: auto;
margin-top: 50px;
font-size: 20px;
}
body.page-template section .clinic-medical-notice div.block > a.button span:after{
right: -54px;
width: 1.5em;
height: 1.5em;
}
body.page-template .clinic-medical-notice .inner{
padding: 0;
}
body.page-template section .clinic-medical-notice div.block {
margin-top: 4.8em;
}
body.page-template section .clinic-medical-notice div.block .notice .box+.box {
margin-top: 4rem;
}
body.page-template section .clinic-medical-notice div.block .notice .box .text-erea {
padding-top: 20px;
}
body.page-template section .clinic-medical-notice div.block .notice .box .title{
padding: 6px 0px 0 30px;
font-size: 24px;
font-size: 2.4rem;
line-height: 1.5;
}
body.page-template section .clinic-medical-notice div.block .flex-box > div.box > .text{
margin-top: 20px;
}
body.page-template section .clinic-medical-notice div.block .flex-box > div.box+.box{
margin-top: 4rem;
}
body.abashiri-hifu-ka #hero.inner-hero > div.wrap > div.head > div.title-text{
margin-top: 40%;
}
body.abashiri-hifu-ka #hero.inner-hero > div.wrap > div.head > div.title-text h2 > span{
font-size: 38px;
font-size: 3.8rem;
}
body.recruit section .wrap .layout .body .title .h-type-03 > span{
margin-top: 2.2em;
}
body.category div.home-news{
padding: 12.2em 0 6.2em 0;
}
}
@media screen and (max-width:380px){
}