@charset "utf-8";


/*//////////////////////////////////////////////////
全体
//////////////////////////////////////////////////*/

::selection {color: #fff; background-color: #639e76;}
::-moz-selection {color: #fff; background-color: #639e76;}
@font-face {font-family: MPLUS1p-M; src: url('font/MPLUS1p-Medium.ttf') format("truetype");}

html {width: 100%; height: 100%; font-size: 62.5%;}
body {width: 100%; height: 100%; min-width: 375px; position: relative; z-index: 1; left: 0; top: 0; background-color: #fff;}
header, main, footer, #loading_cover, #modal_menu, #header_fix, #humb_wrap, #humb_wrap_fix, #pagetop, input, textarea, select, button {
	font-size: 1.4rem; line-height: 2.0; color: #424242; font-weight: 500; letter-spacing: .1rem; -webkit-text-size-adjust: 100%; word-wrap: break-word; overflow-wrap: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; -webkit-font-smoothing: antialiased;
	font-family: 'MPLUS1p-M', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
header, main, footer {width: 100%; overflow: hidden;}
main, img, video {display: block;}
img {flex-shrink: 0;}
input, textarea, select, button {outline: none;}
input[type="submit"], input[type="button"], input[type="radio"], input[type="checkbox"], select, button {cursor: pointer;}
:-ms-input-placeholder {color: #757575;}
::-moz-placeholder {color: #757575;}
::-webkit-input-placeholder {color: #757575;}
a {text-decoration: none; }
a:link, a:visited, a:hover {color: #424242;}
pre {white-space: pre-wrap;}

.gothic {font-family: 'MPLUS1p-M', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif!important; font-weight: 500!important;}
.min {font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif!important; font-weight: 500!important;}

.underline {text-decoration: underline;}
.l-space-n {letter-spacing: normal;}
.l-space-1 {letter-spacing: .1rem;}
.l-space-2 {letter-spacing: .2rem;}
.l-space-4 {letter-spacing: .4rem;}
.l-space-8 {letter-spacing: .8rem;}
.cf:after {content: ''; display: block; clear: both;}
.fit-img img {width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';}
.scroll-style {overflow: scroll; -ms-overflow-style: none; scrollbar-width: none;}
.scroll-style::-webkit-scrollbar {display: none;}
.vertical-txt {-ms-writing-mode: tb-rl; -o-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; text-orientation: upright;}
.keep-txt {word-break: keep-all; white-space: nowrap;}
.margin-0 {margin: 0!important;}
.marker {background: linear-gradient(transparent 75%, #ffff00 75%); color: #424242;}
.gra-1 {background: linear-gradient(-45deg, #424242, #757575);}

.color-white {color: #fff!important;}
.color-font {color: #424242!important;}
.color-subfont {color: #9e9e9e!important;}
.color-line {color: #e0e0e0!important;}

.title-lg {font-size: 2.4rem!important;}
.x-lg {font-size: 2.0rem!important;}
.x-lg-2 {font-size: 1.8rem!important;}
.lg {font-size: 1.6rem!important;}
.md {font-size: 1.4rem!important;}
.sm {font-size: 1.2rem!important;}
.x-sm {font-size: 1.0rem!important;}

@media only screen and (min-width: 640px) {
	header, main, footer, #loading_cover, #modal_menu, #header_fix, #humb_wrap, #humb_wrap_fix, #pagetop, input, textarea, select, button {
		font-size: 1.5rem;
	}
	.title-lg {font-size: 3.0rem!important;}
    .x-lg {font-size: 2.4rem!important;}
	.x-lg-2 {font-size: 2.1rem!important;}
	.lg {font-size: 1.8rem!important;}
	.md {font-size: 1.5rem!important;}
	.sm {font-size: 1.3rem!important;}
	.x-sm {font-size: 1.1rem!important;}
}

@media only screen and (min-width: 960px) {
	header, main, footer, #loading_cover, #modal_menu, #header_fix, #humb_wrap, #humb_wrap_fix, #pagetop, input, textarea, select, button {
		font-size: 1.6rem;
	}
    .title-lg {font-size: 3.6rem!important;}
	.x-lg {font-size: 2.8rem!important;}
	.x-lg-2 {font-size: 2.4rem!important;}
	.lg {font-size: 2.0rem!important;}
	.md {font-size: 1.6rem!important;}
	.sm {font-size: 1.4rem!important;}
	.x-sm {font-size: 1.2rem!important;}
}

@media (hover: hover) {
	.hover-48 {transition: opacity .4s;}
	.hover-48:hover {opacity: .48;}
	.hover-64 {transition: opacity .4s;}
	.hover-64:hover {opacity: .64;}
}


/*//////////////////////////////////////////////////
共通
//////////////////////////////////////////////////*/

.ul-1 {
	line-height: 1.7; display: inline-block; text-align: left;
}
.ul-1 li {
	list-style: none; position: relative; z-index: 1; left: 0; top: 0; padding: 0 0 0 14px; margin: 8px 0 0;
}
.ul-1.attention li {
	padding: 0 0 0 16px;
}
.ul-1 li:first-of-type {
	margin: 0;
}
.ul-1 li::before {
	content: ''; display: inline-block; background-color: #424242; width: 8px; height: 8px; border-radius: 50%; position: absolute; z-index: 1; left: 0; top: 7px;
}
.ul-1.color-white li::before {
	background-color: #fff;
}
.ul-1.md li::before {
    top: 8px;
}
.ul-1.attention li::before {
	content: '※'; background: none; width: auto; height: auto; border-radius: 0; top: 0!important;
}
.ul-1 span {
	display: inline-block;
}

#pagetop {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 50%; border: solid 1px #424242; background-color: #fff; box-sizing: border-box; position: fixed; z-index: 10; right: 20px; bottom: -32px; cursor: pointer; opacity: 0; transition: all .4s;
}
#pagetop .arrow {
	display: block; background-image: url("../img/common/common_arrow.svg"); background-size: cover; width: 6px; height: 6px; transform: rotate(-90deg);
}

@media only screen and (min-width: 640px) {
	.ul-1 li {
		padding: 0 0 0 16px;
	}
	.ul-1.attention li {
		padding: 0 0 0 18px;
	}
	.ul-1 li::before {
		top: 7.5px;
	}
    .ul-1.md li::before {
        top: 9px;
    }
    
	#pagetop {
		width: 40px; height: 40px; right: 26px; bottom: -40px;
	}
    #pagetop .arrow {
	    width: 7px; height: 7px;
    }
}

@media only screen and (min-width: 960px) {
	.ul-1 li {
		padding: 0 0 0 18px;
	}
	.ul-1.attention li {
		padding: 0 0 0 20px;
	}
	.ul-1 li::before {
		top: 8px;
	}
    .ul-1.md li::before {
        top: 10px;
    }
    
	#pagetop {
		width: 48px; height: 48px; right: 32px; bottom: -48px;
	}
    #pagetop .arrow {
	    width: 8px; height: 8px;
    }
}

@media (hover: hover) {
	#pagetop .arrow {
		transition: opacity .4s;
	}
	#pagetop:hover .arrow {
		opacity: .48;
	}
}


/*//////////////////////////////////////////////////
ローディング
//////////////////////////////////////////////////*/

#loading_cover {
	line-height: 1; width: 100%; min-width: 375px; height: 100vh; position: fixed; z-index: 100; left: 0; top: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #fff;
}
.loading-logo {
	display: none; width: 240px; height: 66px;
}
.loading-logo img {
	width: 100%; height: 100%;
}

@media only screen and (min-width: 640px) {
    .loading-logo {
	   width: 360px; height: 99px;
    }
}

@media only screen and (min-width: 960px) {
    .loading-logo {
	   width: 480px; height: 132px;
    }
}

/*//////////////////////////////////////////////////
フッター
//////////////////////////////////////////////////*/

footer {
	line-height: 1; padding: 0 0 32px;
}
footer .inner {
    width: calc(100% - 40px); padding: 40px 0; margin: 0 auto; border-radius: 6px; background-color: #edf6f0;
}
footer .logo { 
    display: block; width: 240px; height: 66px; margin: 0 auto;
}
footer .logo img {  
    width: 100%; height: 100%;
}
footer .copy {
    text-align: center; margin: 32px 0 0;
}

@media only screen and (min-width: 640px) {
    footer {
	    padding: 0 0 40px;
    }
    footer .inner {
        width: calc(100% - 52px); padding: 52px 0; border-radius: 7px;
    }
    footer .logo { 
        width: 360px; height: 99px;
    }
    footer .copy {
        margin: 40px 0 0;
    }
}

@media only screen and (min-width: 960px) {
    footer {
	    padding: 0 0 48px;
    }
    footer .inner {
        width: calc(100% - 64px); padding: 64px 0; border-radius: 8px;
    }
    footer .logo { 
        width: 480px; height: 132px;
    }
    footer .copy {
        margin: 48px 0 0;
    }
}


/*//////////////////////////////////////////////////
01.フロントページ
//////////////////////////////////////////////////*/

.front-page .hero {
    width: calc(100% - 40px); padding: 60px 0; margin: 20px auto 0; border-radius: 6px; overflow: hidden; position: relative; z-index: 1; left: 0; top: 0;
}
.front-page .hero::before {
    content: ''; display: block; width: 100%; height: 100%; background-color: rgba(255, 255, 255, .64); position: absolute; z-index: 2; left: 0; top: 0;
}
.front-page .hero .img {
    width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;
}
.front-page .hero h1 {
    width: 240px; height: 130px; margin: 0 auto; position: relative; z-index: 3; left: 0; top: 0;
}
.front-page .hero h1 img {
    width: 100%; height: 100%;
}
.front-page .hero p {
    line-height: 1.7; text-align: center; width: 88%; max-width: 600px; padding: 32px 0 52px; margin: 40px auto 0; border-radius: 6px; background-color: #f38e9a; position: relative; z-index: 3; left: 0; top: 0;
}
.front-page .hero p::after {
    content: ''; display: block; background-image: url("../img/common/common_arrow-white.svg"); background-size: cover; width: 12px; height: 12px; position: absolute; z-index: 1; left: 50%; bottom: 32px; transform: translate(-50%, 0) rotate(90deg);
}

.front-page .clinic-info {
    padding: 60px 0 0;
}
.front-page .clinic-info .inner {
    width: calc(100% - 40px); max-width: 600px; margin: 0 auto;
}
.front-page .clinic-info h2 {
    line-height: 1.7; text-align: center; position: relative; z-index: 1; left: 0; top: 0;
}
.front-page .clinic-info h2::before {
    content: ''; display: block; background-image: url("../img/common/common_logo-icon.svg"); background-size: cover; width: 40px; height: 40px; margin: 0 auto 12px;
}
.front-page .clinic-info .wrap {
    margin: 40px 0 0; border-radius: 6px; overflow: hidden;
}
.front-page .clinic-info .gmap {
    height: 240px;
}
.front-page .clinic-info .txt-wrap {
    text-align: center; padding: 40px 24px; box-sizing: border-box; background-color: #edf6f0;
}
.front-page .clinic-info .txt-wrap h3 {
    line-height: 1.7;
}
.front-page .clinic-info .txt-wrap .addr {
    margin: 12px 0 0;
}
.front-page .clinic-info .txt-wrap .addr br {
    display: block;
}
.front-page .clinic-info .txt-wrap .addr .space {
    display: none;
}
.front-page .clinic-info .txt-wrap .tel {
    margin: 12px 0 0;
}
.front-page .clinic-info .txt-wrap .tel a {
    display: inline-block;
}
.front-page .clinic-info .txt-wrap .access {
    margin: 12px 0 0;
}
.front-page .clinic-info .txt-wrap .map a {
    display: inline-block; padding: 0 8px 0 0; position: relative; z-index: 1; left: 0; top: 0;
}
.front-page .clinic-info .txt-wrap .map a::after {
    content: ''; display: block; background-image: url("../img/common/common_arrow.svg"); background-size: cover; width: 6px; height: 6px; position: absolute; z-index: 1; right: 0; top: 50%; transform: translate(0, -50%);
}
.front-page .clinic-info .time-table {
    line-height: 1.4; color: #639e76; max-width: 480px; margin: 20px auto 0; border: solid 2px #8fc4a0; box-sizing: border-box; border-radius: 6px; background-color: #fff; overflow: hidden;
}
.front-page .clinic-info .time-table table {
    width: 100%;
}
.front-page .clinic-info .time-table table tr {
    border-top: solid 2px #8fc4a0;
}
.front-page .clinic-info .time-table table tr:first-of-type {
    border-top: none;
}
.front-page .clinic-info .time-table table th {
    width: 33.4%; padding: 8px; vertical-align: middle; border-left: solid 2px #8fc4a0; background-color: #639e76; color: #fff;
}
.front-page .clinic-info .time-table table th:first-of-type {
     border-left: none;
}
.front-page .clinic-info .time-table table th span {
    display: inline-block;
}
.front-page .clinic-info .time-table table td {
    width: 33.3%; padding: 8px; vertical-align: middle; border-left: solid 2px #8fc4a0;
}
.front-page .clinic-info .time-table table td sup {
    vertical-align: text-top;
}
.front-page .clinic-info .ul-wrap {
    text-align: left; max-width: 480px; margin: 12px auto 0;
}

.front-page .greeting {
    padding: 60px 0;
}
.front-page .greeting .inner {
    width: 88%; margin: 0 auto;
}
.front-page .greeting h2 {
    line-height: 1.7; text-align: center; position: relative; z-index: 1; left: 0; top: 0;
}
.front-page .greeting h2::before {
    content: ''; display: block; background-image: url("../img/common/common_logo-icon.svg"); background-size: cover; width: 40px; height: 40px; margin: 0 auto 12px;
}
.front-page .greeting .txt-wrap {
    max-width: 600px; margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px;
}
.front-page .greeting .txt-wrap .img {
    width: 240px; height: 240px; border-radius: 50%; overflow: hidden; margin: 0 auto;
}
.front-page .greeting .txt-wrap p span {
    display: inline-block;
}
.front-page .greeting .txt-wrap .sign {
    width: 100%; text-align: right;
}
.front-page .greeting .profile {
    margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 40px;
}
.front-page .greeting .profile .item {
    width: 100%;
}
.front-page .greeting .profile h3 {
    line-height: 1.7;
}
.front-page .greeting .profile table {
    line-height: 1.4; width: 100%; border-top: solid 2px #dde9f4; margin: 16px 0 0;
}
.front-page .greeting .profile table tr {
    border-bottom: solid 2px #dde9f4;
}
.front-page .greeting .profile table th {
    text-align: left; padding: 8px;
}
.front-page .greeting .profile table td {
    padding: 8px;
}

@media only screen and (min-width: 640px) {
    .front-page .hero {
        width: calc(100% - 52px); padding: 90px 0; margin: 26px auto 0; border-radius: 7px;
    }
    .front-page .hero h1 {
        width: 360px; height: 195px;
    }
    .front-page .hero p {
        width: 90%; padding: 40px 0 66px; margin: 52px auto 0; border-radius: 7px;
    }
    .front-page .hero p::after {
        width: 14px; height: 14px; bottom: 40px;
    }
    
    .front-page .clinic-info {
        padding: 90px 0 0;
    }
    .front-page .clinic-info .inner {
        width: calc(100% - 52px);
    }
    .front-page .clinic-info h2::before {
        width: 52px; height: 52px; margin: 0 auto 14px;
    }
    .front-page .clinic-info .wrap {
        margin: 52px 0 0; border-radius: 7px;
    }
    .front-page .clinic-info .gmap {
        height: 360px;
    }
    .front-page .clinic-info .txt-wrap {
        padding: 52px 36px;
    }
    .front-page .clinic-info .txt-wrap .addr {
        margin: 14px 0 0;
    }
    .front-page .clinic-info .txt-wrap .addr br {
        display: none;
    }
    .front-page .clinic-info .txt-wrap .addr .space {
        display: inline;
    }
    .front-page .clinic-info .txt-wrap .tel {
        margin: 14px 0 0;
    }
    .front-page .clinic-info .txt-wrap .access {
        margin: 14px 0 0;
    }
    .front-page .clinic-info .txt-wrap .map a {
        padding: 0 10px 0 0;
    }
    .front-page .clinic-info .txt-wrap .map a::after {
        width: 7px; height: 7px;
    }
    .front-page .clinic-info .time-table {
        margin: 26px auto 0; border-radius: 7px;
    }
    .front-page .clinic-info .time-table table th {
        padding: 10px;
    }
    .front-page .clinic-info .time-table table td {
        padding: 10px;
    }
    .front-page .clinic-info .ul-wrap {
        margin: 14px auto 0;
    }
    
    .front-page .greeting {
        padding: 90px 0;
    }
    .front-page .greeting .inner {
        width: 90%;
    }
    .front-page .greeting h2::before {
        width: 52px; height: 52px; margin: 0 auto 14px;
    }
    .front-page .greeting .txt-wrap {
        margin: 52px auto 0; gap: 50px;
    }
    .front-page .greeting .profile {
        margin: 52px 0 0; gap: 50px;
    }
    .front-page .greeting .profile .item {
        width: calc(50% - 25px);
    }
    .front-page .greeting .profile table {
        margin: 20px 0 0;
    }
    .front-page .greeting .profile table th {
        padding: 10px;
    }
    .front-page .greeting .profile table td {
        padding: 10px;
    }
}

@media only screen and (min-width: 960px) {
    .front-page .hero {
        width: calc(100% - 64px); padding: 120px 0; margin: 32px auto 0; border-radius: 8px;
    }
    .front-page .hero h1 {
        width: 480px; height: 260px;
    }
    .front-page .hero p {
        width: 92%; padding: 48px 0 80px; margin: 64px auto 0; border-radius: 8px;
    }
    .front-page .hero p::after {
        width: 16px; height: 16px; bottom: 48px;
    }
    
    .front-page .clinic-info {
        padding: 120px 0 0;
    }
    .front-page .clinic-info .inner {
        width: calc(100% - 64px); max-width: 100%;
    }
    .front-page .clinic-info h2::before {
        width: 64px; height: 64px; margin: 0 auto 16px;
    }
    .front-page .clinic-info .wrap {
        margin: 64px 0 0; border-radius: 8px; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
    }
    .front-page .clinic-info .gmap {
        width: 50%; height: auto;
    }
    .front-page .clinic-info .txt-wrap {
        width: 50%; padding: 64px 48px;
    }
    .front-page .clinic-info .txt-wrap .addr {
        margin: 16px 0 0;
    }
    .front-page .clinic-info .txt-wrap .addr br {
        display: block;
    }
    .front-page .clinic-info .txt-wrap .addr .space {
        display: none;
    }
    .front-page .clinic-info .txt-wrap .tel {
        margin: 16px 0 0;
    }
    .front-page .clinic-info .txt-wrap .access {
        margin: 16px 0 0;
    }
    .front-page .clinic-info .txt-wrap .map a {
        padding: 0 12px 0 0;
    }
    .front-page .clinic-info .txt-wrap .map a::after {
        width: 8px; height: 8px;
    }
    .front-page .clinic-info .time-table {
        margin: 32px auto 0; border-radius: 8px;
    }
    .front-page .clinic-info .time-table table th {
        padding: 12px;
    }
    .front-page .clinic-info .time-table table td {
        padding: 12px;
    }
    .front-page .clinic-info .ul-wrap {
        margin: 16px auto 0;
    }
    
    .front-page .greeting {
        padding: 120px 0;
    }
    .front-page .greeting .inner {
        width: 92%;
    }
    .front-page .greeting h2::before {
        width: 64px; height: 64px; margin: 0 auto 16px;
    }
    .front-page .greeting .txt-wrap {
        max-width: 900px; margin: 64px auto 0; gap: 60px;
    }
    .front-page .greeting .txt-wrap p {
        width: calc(100% - 300px);
    }
    .front-page .greeting .profile {
        margin: 64px 0 0; gap: 60px;
    }
    .front-page .greeting .profile .item {
        width: calc(50% - 30px);
    }
    .front-page .greeting .profile table {
        margin: 24px 0 0;
    }
    .front-page .greeting .profile table th {
        padding: 12px;
    }
    .front-page .greeting .profile table td {
        padding: 12px;
    }
}

@media only screen and (min-width: 1280px) {
    .front-page .clinic-info .txt-wrap .addr br {
        display: none;
    }
    .front-page .clinic-info .txt-wrap .addr .space {
        display: inline;
    }
    
    .front-page .greeting .inner {
        width: 1200px;
    }
}