@charset "UTF-8";
/* CSS Document */

html {
font-size: 62.5%;
}
body {
font-family: "Kosugi Maru", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
font-size: 1.6rem;
color: #151515;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: bottom;
}
img.radius {
border-radius: 3px;
}
main {
display: block;
}
.head {
position: relative;
}
.head:before {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
content: '\f45c';
font-family: 'Font Awesome 5 Pro';
font-size: 0.8em;
color: #EC008C;
}
h5 {
font-weight: normal;
}
a, a:hover {
color: #151515;
text-decoration: none;
}
a {
transition: 0.3s;
}
span.strong {
font-weight: bold;
color: #FF0004;
}

a.btn {
display: table;
margin: 0 auto;
color: #fff;
background: #EC008C;
border: 1px solid #EC008C;
border-radius: 4px;
}
i.fas {
padding-left: 10px;
}

#reserve {
position: fixed;
bottom: 0;
right: 0;
background: #EC008C;
color: #fff;
}
#reserve>div {
border-bottom: 1px solid #FFF;
margin-bottom: 8px;
text-align: center;
}
#reserve a {
color: #fff;
}

#topImg {
position: relative;
}
#topSlider {
position: relative;
width: 100%;
z-index: 10;
}
.slider img {
width: 90% !important;
margin-left: 10%;
}
.slider>div {
position: relative;
}
.slider .copy {
position: absolute;
z-index: 2100;
top: 50%;
left: 0;
background: #00B097;
transform: translate(0,-50%);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
}

#header {
background: #fff;
}
#header>div{
width: 90%;
max-width: 1280px;
margin: 0 auto;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.gNav ul {
list-style-type: none;
padding-left: 0;
}
.gNav ul li a{
display: block;
}
#subNav li a {
color: #fff;
}

#senior {
text-align: center;
}
#senior > div, #info > ul, #info h2, #office > div, #place h2  {
width: 90%;
max-width: 960px;
margin: 0 auto;
}
#senior h4 {
border-bottom: 1px solid #020202;
border-top: 1px solid #020202;
}
#senior ul {
list-style-type: none;
padding-left: 0;
}

#info {
background: #FFFBC7;
}
#info h2, #place h2 {
background: #EC008C;
color: #fff;
text-align: center;
}
#info h2, #info img, #place h2 {
border-radius: 8px;
}
#info ul {
list-style-type: none;
padding-left: 0;
}
#info img {
padding-bottom: 8px;
}

#place ul {
list-style-type: none;
padding-left: 0;
margin: 0 auto;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-width: 90%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#place li {
background: #EC008C;
border: 1px solid #EC008C;
box-sizing: border-box;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
}
#place li a{
display: block;
color: #fff;
text-align: center;
}

#office {
background: #EAF6FD;
text-align: center;
}
#office ul {
list-style-type: none;
padding-left: 0;
}
#office ul li a {
display: block;
}
#office ul li h3, #senior h3 {
font-weight: normal;
}
#office ul li h3 span, #senior h3 span {
display: block;
font-size: 0.8em;
}

#access {
background: #E0FCFE;
}
#access iframe {
width: 100%;
vertical-align: bottom;
}
#contactInfo h4 span, #contactInfo address span {
display: block;
}
#contactInfo ul {
list-style-type: square;
padding-left: 20px;
}

#footer {
position: relative;
z-index: 2200;
}
#footer small {
display: block;
text-align: center;
background: #fff;
}

@media screen and (max-width:560px){
p, li {
font-size: 1.4rem;
line-height: 180%;
}
	
#logo {
width: 70%;
padding: 4px 0;
}
	
.head {
font-size: 1.8rem;
padding-left: 20px;
}

#reserve {
padding: 6px 0 0 0;
width: 100%;
}
#reserve div {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 6px;
}
#reserve h5 {
font-size: 1.6rem;
padding-right: 10px;
}
#reserve div a {
font-size: 1.6rem;
}
#reserve h6 {
padding-top: 8px;
font-size: 1.5rem;
}
#reserve h6 span {
padding-left: 8px;
}
#reserve div p {
width: 100%;
padding-top: 6px;
font-size: 1.2rem;
}
#reserve p a {
font-size: 1.2rem;
text-align: center;
display: block;
}

a.btn {
font-size: 1.4rem;
padding: 4px 12px;
}
.top-space, a.top-space  {
margin-top: 10px;
}

.gNav a {
font-size: 1.2rem;
}
	
.slider .copy {
width: 36vw;
height: 100px;
font-size: 1.4rem;
}
	
#senior, #info, #place {
padding: 30px 0;
}
#senior h2 {
text-align: center;
font-size: 1.8rem;
padding-bottom: 10px;
}
#senior ul li {
padding-bottom: 24px;
}
#senior ul li:nth-last-child(1) {
padding-bottom: 0;
}
#senior ul li img {
width: 60vw;
display: block;
margin: 0 auto;
}
#senior h3 {
font-size: 1.5rem;
padding: 6px 0 10px;
}
#senior h4 {
font-size: 1.4rem;
padding: 10px 0;
margin-bottom: 10px;
}
#senior p {
font-size: 1.2rem;
}

#info h2, #place h2 {
font-size: 2.2rem;
letter-spacing: 2px;
padding: 10px 0;
margin-bottom: 10px;
}
#info div {
margin-bottom: 30px;
}
#info div:nth-last-child(1) {
margin-bottom: 0;
}
#info img {
margin-bottom: 4px;
}
#info h3 {
font-size: 1.5rem;
}
#info ul li {
font-size: 1.3rem;
}
#info div a {
font-size: 1.5rem;
padding: 4px 8px;
margin: 0 8px 8px 0;
}
	
#place li {
margin-bottom: 16px;
}
#place li a{
padding: 8px 0;
}
	
#office {
padding: 30px 0;
}
#office h2 {
text-align: center;
font-size: 1.8rem;
padding-bottom: 10px;
}
#office ul li {
padding-bottom:  20px;
}
#office ul li:nth-last-child(1) {
padding-bottom: 0;
}
#office ul li a {
display: flex;
}
#office ul li div {
width: 30%;
padding-right: 5%;
}
#office ul li h3 {
width: 65%;
font-size: 1.4rem;
text-align: left;
}
#office ul li h3 span {
padding-top: 4px;
}

#access iframe {
height: 400px;
}
#contactInfo {
padding: 20px 0;
text-align: center;
}
#contactInfo ul {
display: table;
margin: 0 auto;
padding-left: 0;
text-align: left;
}
#contactInfo address span {
display: table;
margin: 0 auto;
text-align: left;
white-space: nowrap;
}
#footer small {
padding: 10px 0;
}
}

@media screen and (min-width:561px){
.nobr {
display: none;
}

#reserve {
z-index: 2300;
}
#reserve h6 {
padding-top: 10px;
font-size: 1.6rem;
}
#reserve h6 span {
display: block;
font-size: 1.8rem;
}
	
#senior ul {
display: flex;
}
#senior ul li {
width: 32%;
margin-right: 2%;
}
#senior ul li:nth-child(3) {
margin-right: 0;
}

#info ul {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#info li {
width: 48%;
padding-bottom: 30px;
}
#info li:nth-child(odd) {
margin-right: 4%;
}
#info li:nth-last-child(-n+X) {
padding-bottom: 0;
}
#info a {
display: block;
}
	
#place li {
margin-bottom: 30px;
}
#place li a{
padding: 10px 0;
font-size: 0.9em;
}
	
#office ul {
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

#access {
display: flex;
}
#access>div {
width: 50%;
}
#contactInfo {
display: flex;
justify-content: center;
align-items: center;
}
}

@media screen and (min-width: 561px) and (max-width: 959px) {
#logo {
width: 33vw;
padding: 10px 0;
}

.slider .copy {
width: 30vw;
height: 120px;
font-size: 1.8rem;
}
	
.head {
font-size: 2rem;
padding-left: 28px;
}
	
#reserve {
padding: 8px;
}
#reserve div {
margin-bottom: 8px;
}
#reserve h5 {
font-size: 1.6rem;
}
#reserve div a {
font-size: 2rem;
}
#reserve div p {
padding-top: 18px;
font-size: 1.3rem;
}
#reserve p a {
font-size: 1.3rem;
}
	
a.btn {
font-size: 16px;
font-size: 1.6rem;
padding: 8px 24px;
transition: .6s;
}
a.btn:hover {
color: #e06868;
background: #fff;
}
.top-space, a.top-space  {
margin-top: 30px;
}

#senior, #info, #place {
padding: 40px 0;
}
#senior h2 {
font-size: 2rem;
padding-bottom: 16px;
}
#senior h3 {
font-size: 1.6rem;
padding: 8px 0 12px;
}
#senior h4 {
font-size: 1.5rem;
padding: 12px 0;
margin-bottom: 12px;
}
#senior p {
font-size: 1.3rem;
}

#info h2, #place h2 {
font-size: 2.8rem;
letter-spacing: 3px;
padding: 6px 0;
margin-bottom: 16px;
}
#info h3 {
font-size: 1.6rem;
}
	
#office {
padding: 40px 0;
}
#office h2 {
font-size: 2rem;
padding-bottom: 16px;
}
#office ul li {
width: 48%;
margin-bottom: 30px;
}
#office ul li:nth-child(odd) {
margin-right: 4%;
}
#office ul li:nth-last-child(-n+2) {
margin-bottom: 0;
}
#office ul li h3 {
font-size: 1.5rem;
padding-top: 16px;
}
#office ul li h3 span {
padding-top: 6px;
}
	
#access iframe {
height: 450px;
}
	
#footer small {
font-size: 1.1rem;
padding: 6px 0;
}
}

@media screen and (max-width:959px){
#header {
padding: 10px 0;
}
	
.gNav {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#mainNav {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
#mainNav ul li:nth-child(even) {
background: #FFE1E2;
}
#subNav {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
padding-top: 20px;
}
#subNav li {
padding: 0 4px;
}
#subNav li a {
background: #EC008C;
border-radius: 8px;
padding: 3px 8px;
}

.child {
display: none;
}
.menu {
position: relative;
}
.menu:before {
position: absolute;
top: 0;
right:10px;
content: '\f078';
font-family: 'Font Awesome 5 Pro';
}

.menu.active:before {
content: '\f077';
}
	
#contactInfo h4 {
font-size: 1.6rem;
}
#contactInfo h4 span {
font-size: 1.3rem;
}
#contactInfo address {
padding-bottom: 16px;
font-size: 1.6rem;
}
#contactInfo address div {
font-size: 1.3rem;
}

#place li {
width: 48%;
}
#place li:nth-child(odd) {
margin-right: 4%;
}
}

@media screen and (min-width:960px){
a[href^="tel:"] {
pointer-events: none;
}
	
.head {
font-size: 24px;
font-size: 2.4rem;
padding-left: 30px;
}
	
#reserve {
padding: 10px;
}
#reserve div {
margin-bottom: 10px;
}
#reserve h5 {
font-size: 18px;
font-size: 1.8rem;
}
#reserve div a {
font-size: 22px;
font-size: 2.2rem;
}
#reserve div p {
padding-top: 20px;
font-size: 14px;
font-size: 1.4rem;
}
#reserve p a {
font-size: 1.4rem;
}
	
a.btn {
font-size: 16px;
font-size: 1.6rem;
padding: 8px 24px;
transition: .6s;
}
a.btn:hover {
color: #EC008C;
background: #fff;
}
.top-space, a.top-space  {
margin-top: 30px;
}

.drawer-toggle {
display: none;
}

#header {
padding: 30px 0;
}
#logo {
padding-top: 20px;
width: 420px;
}
.gNav {
width: 600px;
}
#mainNav {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
}
#mainNav .drawer-menu {
width: 100%;
height: 40px;
display: flex;
}
#mainNav .drawer-menu li {
position: relative;
}
#mainNav .drawer-menu li a {
display: block;
width: 175px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 18px;
font-size: 1.8rem;
}
#mainNav .drawer-menu li ul {
top: 40px;
left: 0;
position: absolute;
z-index: 5000;
}
#mainNav .drawer-menu li ul li {
overflow: hidden;
height: 0;
transition: .6s;
}
#mainNav .drawer-menu li ul li a {
border-top: 1px solid #eee;
font-size: 14px;
font-size: 1.4rem;
background: #fff;
}
#mainNav .drawer-menu li:hover > ul > li {
overflow: visible;
height: 40px;
}
#subNav {
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#subNav li {
background: #EC008C;
padding: 4px 0;
border-radius: 8px;
}
#subNav li a {
font-size: 14px;
font-size: 1.4rem;
padding: 4px 20px;
}

#senior, #info, #place {
padding: 50px 0;
}
#senior h2 {
font-size: 22px;
font-size: 2.2rem;
padding-bottom: 20px;
}	
#senior h3 {
font-size: 18px;
font-size: 1.8rem;
padding: 10px 0 16px;
}
#senior h4 {
font-size: 16px;
font-size: 1.6rem;
padding: 16px 0;
margin-bottom: 16px;
}
#senior p {
font-size: 14px;
font-size: 1.4rem;
}

#info h2, #place h2 {
font-size: 30px;
font-size: 3rem;
letter-spacing: 3px;
padding: 8px 0;
margin-bottom: 20px;
}
#info h3 {
font-size: 20px;
font-size: 2rem;
}
	
#place ul {
max-width:960px;
}
#place li {
width: 24%;
margin-right: 1.33333%;
margin-bottom: 30px;
}
#place li:nth-child(4n) {
margin-right: 0;
}
#place li {
transition: .6s;
}
#place li a {
transition: .6s;
}
#place li:hover {
background: #fff;
}
#place li:hover a {
color: #EC008C;
}

#office {
padding: 50px 0;
}
#office h2 {
font-size: 22px;
font-size: 2.2rem;
padding-bottom: 20px;
}
#office ul li {
width: 32%;
margin-right: 2%;
margin-bottom: 40px;
}
#office ul li:nth-child(3n) {
margin-right: 0;
}
#office ul li:nth-last-child(-n+3) {
margin-bottom: 0;
}
#office ul li h3 {
font-size: 16px;
font-size: 1.6rem;
padding-top: 20px;
}
#office ul li h3 span {
padding-top: 8px;
}
	
#access iframe {
height: 500px;
}

#contactInfo h4 {
font-size: 22px;
font-size: 2.2rem;
}
#contactInfo h4 span {
font-size: 16px;
font-size: 1.6rem;
}
#contactInfo address {
padding-bottom: 20px;
font-size: 20px;
font-size: 2rem;
}
#contactInfo address span {
font-size: 0.8em;
}
	
#footer small {
font-size: 12px;
font-size: 1.2rem;
padding: 8px 0;
}
}

@media screen and (min-width: 960px) and (max-width: 1439px) {
.slider .copy {
width: 360px;
height: 180px;
font-size: 24px;
font-size: 2.4rem;
}
}

@media screen and (min-width:1440px){
.slider .copy {
width: 400px;
height: 200px;
font-size: 28px;
font-size: 2.8rem;
}
}