@charset "UTF-8";


* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 14px;

    scroll-padding-top: 170px;
}

body {
    color: #6C6C6C;
    /*background: url(images/bg.png);*/
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: .07em;

}

.to-top {
    position: fixed;
    bottom: 1rem;
    right: 0;
    width: 45px;
}

.to-top img {
    width: 100%;
    filter: drop-shadow(2px 3px 5px rgba(58, 57, 57, 0.5));
}


.bg-w {
    background: #fff;
}

img {
    width: 100%;
    height: auto;
}

svg {
    vertical-align: bottom;
}

h2 span,
h3 span,
h4 span,
.archivo-black-regular {
    font-family: "mamelon", "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
}

h2 {
    font-size: 1.8em;
}

h3 {
    font-size: 1.66em;
}

h4 {
    font-size: 1.4em;
}

h5 {
    font-size: 1.2em;
}

.intro {
    font-size: 1.2em;
    padding: 1rem auto;
    text-align: center;
}



section {
    margin: 0 auto;
    max-width: 1260px;
}

.only-pc {
    display: none;
}

address {
    font-style: normal;
}

.btn-common {
    display: block;
    margin: 2rem auto 1rem auto;
    width: 280px;
    padding: 1rem;
    background: #E35952;
    border-radius: 40px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: #FFF;
}

/*--------------*/
.r-css h3 {
    padding-bottom: 3rem;
}

.r-css img {
    padding: 1rem;
    width: auto;
    height: auto;
}

/*--------------*/

.mobile-btn {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 62px;
    height: 60px;
    cursor: pointer;
    z-index: 1000;
    text-align: center;
    background: #E35952;
    border-radius: 0% 0% 20% 0% / 0% 0% 20% 0%;
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.31);
}

.mobile-btn p {
    font-size: 10px;
    position: absolute;
    left: 19px;
    top: 52px;
}

.mobile-btn span {
    display: block;
    position: absolute;
    /* .mobile-btnに対して */
    width: 32px;
    border-bottom: solid 4px #FFF;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 14px;
}

.mobile-btn span:nth-child(1) {
    top: 16px;
}

.mobile-btn span:nth-child(2) {
    top: 28px;
}

.mobile-btn span:nth-child(3) {
    top: 40px;
}

.mobile-btn.active span:nth-child(1) {
    top: 28px;
    left: 14px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.mobile-btn.active span:nth-child(2),
.mobile-btn.active span:nth-child(3) {
    top: 28px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mobile-menu {
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 900;
    display: none;
}

.mobile-menu>div {
    background: #E35952;
    width: 98%;
    font-size: 1rem;
    text-align: center;
    border-radius: 0% 0% 50px 0% / 0% 0% 50px 0%;
    z-index: 900;
}

.mobile-menu ul {
    padding: 2rem 0;
    list-style-type: none;
    line-height: 1.6;
}

.mobile-menu ul li {
    padding: 0.5rem;
}

.mobile-menu a {
    text-decoration: none;
    font-size: 1.2rem;
    color: #FFF;
}

.mobile-menu-contact {
    width: 120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.mobile-menu-contact a {
    display: block;
    width: 70px;
    padding-bottom: 1rem;
}

/*-------header-------*/

header {
    background: url(images/header-bg-l.png) repeat-x;
    position: relative;
    background-size: contain;
    background-position-y: -70px;
}

header>div {
    z-index: 100;
}

h1 {
    padding-top: 1rem;
}

.logo-s {
    display: block;
    width: 200px;
    margin: 0 auto;
}

.logo-l {
    display: none;
}

.logo-sq {
    display: none;
}

.nav-sub {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 60px;
}

hgroup>div {
    margin: 0 auto;
    padding: 2.5rem;
    text-align: center;
    color: #E35952;
}

hgroup h2 {
    font-family: "mamelon", "Archivo Black", sans-serif;
    font-size: 32px;
    position: relative;

    margin-top: 2rem;
}

hgroup p {
    margin: 0 auto;
    line-height: 2.4;
    width: 94%;
}

hgroup p span {
    display: block;
}


hgroup .top {
    max-width: 1336px;
    aspect-ratio: 2 / 1;
    height: auto;
    margin: 0 auto;
    position: relative;
    /*background: url(images/h-img-top.png) no-repeat;*/
    /*background-size: contain;*/
    padding: 0;
}

hgroup .top-text {
    position: relative;
    width: 100%;
}

hgroup .top-text h2 {
    margin: 1rem;
}

/*-------header downstairs-------*/

.downstairs {
    background: none;
}

.downstairs>div {
    position: absolute;
    width: 100%;
}

.downstairs hgroup {
    background: #E35952;
    border-radius: 0% 0% 50px 50px / 0% 0% 50px 50px;
}

.downstairs hgroup h2 {
    margin-top: 180px;
    font-size: 1.8rem;
    line-height: 1rem;

}



hgroup.h-menu01 {
    background: url(images/h-bg-overview.jpg);
    box-shadow: 1px 1px 5px #CCC;
}

hgroup.h-menu01 h2 {
    color: #35712d;
    position: relative;
    line-height: 1.1;
}

hgroup.h-menu01 h2 span {
    font-size: 0.8rem;
}

.h-menu01 h2::before {
    content: url(images/ico-1.svg);
    transform: scale(0.75);
    top: -4.5rem;
    position: absolute;
    left: 0;
    right: 0;
}

hgroup.h-menu02 {
    background: url(images/h-bg-approach.jpg);
    box-shadow: 1px 1px 5px #CCC;
}

hgroup.h-menu02 h2 {
    color: #EA6C18;
    position: relative;
    line-height: 1.1;
}

hgroup.h-menu02 h2 span {
    font-size: 0.8rem;
}

.h-menu02 h2::before {
    content: url(images/ico-2.svg);
    transform: scale(0.6);
    top: -4rem;
    position: absolute;
    left: 0;
    right: 0;
}

hgroup.h-menu03 {
    background: url(images/h-bg-life.jpg);
    box-shadow: 1px 1px 5px #CCC;
}

hgroup.h-menu03 h2 {
    color: #f7e1a8;
    position: relative;
    line-height: 1.1;
}

hgroup.h-menu03 h2 span {
    font-size: 0.8rem;
}

hgroup.h-menu03 h2::before {
    content: url(images/ico-3.svg);
    transform: scale(0.6);
    top: -5rem;
    position: absolute;
    left: 0;
    right: 0;
}


hgroup.h-menu04 {
    background: url(images/h-bg-news.jpg);
    box-shadow: 1px 1px 5px #CCC;
}

hgroup.h-menu04 h2 {
    color: #4B7EBF;
    position: relative;
    line-height: 1.1;
}

hgroup.h-menu04 h2 span {
    font-size: 0.8rem;
}

hgroup.h-menu04 h2::before {
    content: url(images/ico-4.svg);
    transform: scale(0.6);
    top: -4rem;
    position: absolute;
    left: 0;
    right: 0;
}

hgroup.h-menu05 {
    background: url(images/h-bg-health.jpg);
    box-shadow: 1px 1px 5px #CCC;
}

hgroup.h-menu05 h2 {
    color: #DB2A6C;
    position: relative;
    line-height: 1.1;
}

hgroup.h-menu05 h2 span {
    font-size: 0.8rem;
}

hgroup.h-menu05 h2::before {
    content: url(images/ico-5.svg);
    transform: scale(0.6);
    top: -4.5rem;
    position: absolute;
    left: 0;
    right: 0;
}

hgroup.h-menu06 {
    background: url(images/h-bg-service.jpg);
    box-shadow: 1px 1px 5px #CCC;
}

hgroup.h-menu06 h2 {
    color: #226E65;
    position: relative;
    line-height: 1.1;
}

hgroup.h-menu06 h2 span {
    font-size: 0.8rem;
}

hgroup.h-menu06 h2::before {
    content: url(images/ico-6.svg);
    transform: scale(0.6);
    top: -5.5rem;
    position: absolute;
    left: 0;
    right: 0;
}

hgroup.h-menu07 {
    background: url(images/h-bg-addm.jpg);
    box-shadow: 1px 1px 5px #CCC;
}

hgroup.h-menu07 h2 {
    color: #a2221e;
    position: relative;
    line-height: 1.1;
}

hgroup.h-menu07 h2 span {
    font-size: 0.8rem;
}

hgroup.h-menu07 h2::before {
    content: url(images/ico-7.svg);
    transform: scale(0.6);
    top: -4.5rem;
    position: absolute;
    left: 0;
    right: 0;
}



hgroup.h-menu42 {
    background: url(images/h-bg-montessori.jpg);
    box-shadow: 1px 1px 5px #CCC;
}

hgroup.h-menu42 h2 {
    color: #E35952;
    position: relative;
}

hgroup.h-menu42 h2::before {
    content: url(images/ico-42.svg);

    top: -4rem;
    position: absolute;
    left: 0;
    right: 0;
}


hgroup.h-menu43 {
    background: url(images/h-bg-neighbor.jpg);
    box-shadow: 1px 1px 5px #CCC;
}

hgroup.h-menu43 h2 {
    color: #62B15B;
    position: relative;
}

hgroup.h-menu43 h2::before {
    content: url(images/ico-43.svg);

    top: -4rem;
    position: absolute;
    left: 0;
    right: 0;
}

hgroup.h-menu9 {
    box-shadow: 1px 1px 5px #CCC;
    background-image: linear-gradient(#f89b96, #e35952);

}

hgroup.h-menu9 h2 {
    color: #FFF;
    position: relative;
}




.downstairs .parents {
    background: #4E89BC;
}

.downstairs .parents h2,
.downstairs .link h2,
.downstairs .news-article h2,
.downstairs .news-nonna h2,
.downstairs .news-mani h2 {
    margin-top: 4rem;
    font-size: 1.6rem;
    color: #FFF;
}


/*-------news-------*/

.news {
    background: #f1f6fc;
    margin: 2rem auto;
}

.news-front {
    color: #4B7EBF;
}

.news-front h2 span {
    position: relative;
}

.news-front h2 span::after {
    content: url(images/ico-4.svg);
    display: block;
    margin: auto;
    position: absolute;
    transform: scale(0.7);
    top: -1rem;
    right: 0;
}

.news>div,
.news-top>div,
.news-page>div {
    padding: 1rem;
}

.news h2 {
    font-size: 1.2rem;
    line-height: 1;
    position: relative;
}

.news h2 span {
    font-size: 2.4rem;
    display: block;
}

.news-list {
    margin: 1rem 0;
    list-style-type: none;
    border-top: 1px dashed #4B7EBF;
}

.news-list li {
    padding: 0.5rem 2rem 0.5rem 0;
    border-bottom: 1px dashed #4B7EBF;
    background: url(images/arrow-b.svg) no-repeat;
    background-size: 3%;
    background-position: right 50%;
}

.news-list date {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: block;
}

.news-list a {
    display: block;
    text-decoration: none;
}

.btn-text-w {
    background: #4B7EBF url(images/arrow-w.svg) no-repeat;
    background-position-x: 94%;
    background-position-y: 50%;
    background-size: 5%;
    padding: 0.5rem 3rem 0.5rem 1rem;
    border-radius: 20px;
    color: #FFF;
    text-decoration: none;
    display: block;
    margin: 1rem auto;
}

.btn-text-w:hover {
    background: #4172b3 url(images/arrow-w.svg) no-repeat;
    background-position-x: 94%;
    background-position-y: 50%;
    background-size: 5%;
}


.pagination {
    text-align: center;
    display: flex;
    justify-content: center;
}

.pagination a {
    border: 1px solid #4B7EBF;
    padding: 0.3rem 0.6rem;
    border-radius: 30px;
    color: #4B7EBF;
    font-size: small;
    width: 11px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 2px;

}

.nav-links .page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.nav-links a.page-numbers,
.nav-links .current,
.nav-links a.prev,
.nav-links a.next,
.nav-links .dots {

    border: 1px solid #4B7EBF;
    padding: 0.3rem 0.6rem;
    border-radius: 30px;
    color: #4B7EBF;
    font-size: small;
    width: 11px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 2px;
}

.nav-links a.page-numbers:hover {
    color: #4B7EBF;
    background: #ddebff;
    border: 1px solid #4B7EBF;
    border-radius: 30px;
}

.nav-links .current {
    border: 1px solid #4B7EBF;
    padding: 0.3rem 0.6rem;
    border-radius: 30px;
    background: #4B7EBF;
    color: #ddebff;
    font-size: small;
    width: 11px;
    text-decoration: none;
    display: block;
    text-align: center;
    margin: 0 auto;
    margin: 2px;
}

.nav-links a.prev,
.nav-links a.next {
    border: 1px solid #4B7EBF;
    color: #4B7EBF;
    position: relative;
}

.nav-links .dots {
    background: transparent;
    border: none;
}

.page-numbers {
    list-style-type: none;
}

.article-text {
    border-bottom: 1px dashed #4B7EBF;
    padding-bottom: 2rem;
    margin: 2rem 0 1rem 0;
}

.article-text img {
    margin: 1rem;
    width: auto;
}

.news-list date {
    color: #4B7EBF;
}

.news-top h3,
.news-page h3 {
    color: #4B7EBF;
}

.first-news h4,
.first-news date {
    color: #4B7EBF;
}

.first-news h4 {
    padding-top: 2rem;
    border-top: 1px dashed #4B7EBF;
}

.second-news-area {
    margin: 2rem auto;
}

.second-news-area h5 {
    color: #4B7EBF;
}

.for-parents {
    text-align: center;
    display: block;
    color: #FFF;
    background:
        #4B7EBF;
    padding: 1rem;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #4B7EBF;
    border-radius: 20px;
}

.for-parents:hover {
    background: #3e69a1;
}

.about-montessori {
    text-align: center;
    display: block;
    color: #E35952;
    background: url(images/h-bg-montessori.jpg);
    padding: 1rem;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #E35952;
    border-radius: 20px;
}

.about-montessori:hover {
    background: #f3d3ba;
}

.for-friends {
    text-align: center;
    display: block;
    color: #62B15B;
    background: url(images/h-bg-neighbor.jpg);
    padding: 1rem;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #62B15B;
    border-radius: 20px;
}

.for-friends:hover {
    background: #c7f9c5;
}

/*-------menu-s-------*/

.ico-menu-s-1 .menu-s-size {
    background: url(images/menu-round-1.png) no-repeat;
    background-size: contain;
    margin: 0;
    position: relative;
    color: #2B7724;
}

.ico-menu-s-1 img {
    display: block;
    margin: 2rem auto;
    width: 50%;
}

.ico-menu-s-2 .menu-s-size {
    background: url(images/menu-round-2.png) no-repeat;
    background-size: contain;
    margin: 0 0 0 auto;
    position: relative;
    color: #b1440ebe;
}

.ico-menu-s-2 img {
    display: block;
    margin: 2rem auto;
    width: 60%;
}

.ico-menu-s-3 .menu-s-size {
    background: url(images/menu-round-3.png) no-repeat;
    background-size: contain;
    margin: 0;
    position: relative;
    color: #f9dea5be;
}

.ico-menu-s-3 img {
    display: block;
    margin: 2rem auto;
    width: 50%;
}

.ico-menu-s-4 .menu-s-size {
    background: url(images/menu-round-4.png) no-repeat;
    background-size: contain;
    margin: 0 0 0 auto;
    position: relative;
    color: #D53270;
}

.ico-menu-s-4 img {
    display: block;
    margin: 2rem auto;
    width: 60%;
}

.ico-menu-s-5 .menu-s-size {
    background: url(images/menu-round-5.png) no-repeat;
    background-size: contain;
    margin: 0 0 0 auto;
    position: relative;
    color: #206857;
}

.ico-menu-s-5 img {
    display: block;
    margin: 2rem auto;
    width: 40%;
}

.ico-menu-s-6 .menu-s-size {
    background: url(images/menu-round-6.png) no-repeat;
    background-size: contain;
    margin: 0;
    position: relative;
    color: #902b33;
}

.ico-menu-s-6 img {
    display: block;
    margin: 2rem auto;
    width: 40%;
}

.menu-s {
    padding: 2rem;
}

.menu-s-size {
    display: grid;
    place-content: center;
    text-align: center;
    width: 58%;
    line-height: 0.5;
    text-decoration: none;
    color: #FFF;

    padding: 1rem 1rem;
    font-size: 4.2vw;
    text-shadow: 1px 1px 1px #FFF;
}

.menu-s-size span {
    font-family: "Archivo Black", sans-serif;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 1rem;

    display: block;
}


/*-------gallery--------*/

.gallery>div {
    padding: 1rem;
    margin-top: 4rem;
    position: relative;
}

.gallery h2 {
    font-size: 1.2rem;
    line-height: 1;
    text-align: center;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
}

.gallery h2 span {
    font-size: 2.4rem;
    display: block;
}

.gallery h2::after {
    content: url(images/deco-01.png);
    transform: scale(0.9);
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: -3.5rem;
}

.slide-area {
    margin: 5rem auto 2rem auto;
    text-align: center;
}

.gallery img {
    border-radius: 30px;
}

/*-------menu-info--------*/

.menu-info h2,
.outline h2 {
    font-size: 1.2rem;
    line-height: 1;
    position: relative;
    color: #FFF;
    text-align: center;
}

.menu-info h2 span,
.outline h2 span {
    font-size: 2.4rem;
    display: block;
    opacity: 0.7;
}

.menu-info a {
    text-decoration: none;
}

.tour {
    margin: 1rem auto;
    padding: 1rem 0;
    background: #9CC8E0;
    border-radius: 80px 0 0 0;
    color: #FFF;
}

.tour>div {
    padding: 1rem 0;
    margin: 0 1rem;
}

.tour>div:nth-child(2) {
    border-top: 1px dotted #0c8dc4;
    border-bottom: 1px dotted #0c8dc4;
}

.tour-01,
.tour-02,
.tour-03 {
    position: relative;
}

.tour-01:before {
    content: url(images/deco-monte.png);
    display: block;
    position: absolute;
    transform: scale(0.4);
    left: -23rem;
    right: 0;
    top: -1rem;
}

.tour-02:before {
    content: url(images/deco-friend.png);
    display: block;
    position: absolute;
    transform: scale(0.6);
    left: -21rem;
    right: 0;
    top: -1rem;
}

.tour-03:before {
    content: url(images/deco-dl.png);
    display: block;
    position: absolute;
    transform: scale(0.4);
    left: -22rem;
    right: 0;
    top: 0;
}

.tour p {
    color: #0058C9;
    font-size: larger;
    text-align: center;
}

.menu-info .recruit {
    margin: 2rem 0 1rem 0;
    padding: 0 0 0.5rem 0;
    background: #F5CCCC;
    border-radius: 0 0 80px 0;

}

.menu-info .recruit h2 {
    padding: 2rem 0;
    position: relative;
}

.menu-info .recruit h2::before {
    content: url(images/deco-recruit.png);
    display: block;
    position: absolute;
    transform: scale(0.6);
    left: -16rem;
    right: 0;

}

.menu-info .recruit p {
    text-align: center;
    color: #FA7B7B;
    font-size: larger;
    margin-bottom: 1rem;
}


.menu-info .recruit img,
.menu-info .monte img,
.menu-info .tour img {
    margin: 1rem auto;
    width: 25%;
    border-radius: 20px;
}

.outline {
    margin: 2rem auto;
}

.outline>div {
    padding: 2rem 1rem;
    background: #4E8646;
    border-radius: 60px;
}

.outline>div>h2 {
    position: relative;
    padding-bottom: 1rem;
}

.outline>div>h2::before {
    content: url();
    transform: scale(0.8);
    position: absolute;
    display: block;
    right: 0;
    left: -17rem;
    top: 0rem;
}

.outline ul {
    color: #FFF;
    list-style-type: none;

    grid-template-rows: auto;
    grid-template-columns: 100%;
}

.outline div>ul>li>h3 {
    color: #FFDD80;
    font-size: 1.6rem;
    margin: 2rem 0 0.5rem 0;
}

.outline div>ul>li>h4 {
    color: #FFDD80;
    font-size: 1.2rem;
    margin: 2rem 0 0.5rem 0;
}

.outline span {
    display: block;
}

.deco-top-01 {
    padding-top: 3rem;
    position: relative;
}

.deco-top-01::before {
    content: url(images/deco-top-01.png);
    position: absolute;
    top: 0;
}

.access-type {
    list-style-type: disc !important;
    display: grid;
    margin: 0 1rem;
}

.access-type li {
    padding: 0.5rem 0;
}

.map {
    margin-top: 2rem;
    text-align: center;
}


/*--------footer--------*/
footer {

    width: 100%;
    border-radius: 40px 40px 0 0;
    background: #E28C96;


    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 100%;
}

.footer-nav {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

footer h2 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;

}

address {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.footer-nav>ul {
    margin: 2rem;
    list-style-type: none;

}

.footer-nav>ul>li {
    margin: 0.8rem 0;
}

.footer-nav>ul>li a {
    text-decoration: none;
    color: #FFF;
}

.footer-nav>ul span {
    display: block;
    font-family: "Archivo Black", sans-serif;
}

footer h2 {
    width: 65%;
    max-width: 340px;
    margin: 2rem auto 0 auto;
}

address {
    color: #f8e2ae;
    display: grid;
    place-items: end center;
}

address span {
    line-height: 3;
    font-size: small;
}

/*-------------------------------------------------------
common
-------------------------------------------------------*/

.frame-orange {
    margin: 1.5rem 1rem;
    border: #EA6B16 2px solid;
    border-radius: 40px;
}

.frame-orange>div {
    padding: 0 1.5rem;
}

.frame-orange h4 {
    padding: 1rem;
}

.frame-orange-text {
    margin: 2rem 0 3rem 0;
}

.frame-orange-text p {
    margin: 1rem 0;
}

/*--------*/

.frame-green {
    color: #0D6905;
    margin: 1.5rem 1rem;
    border: #0D6905 2px solid;
    border-radius: 40px;
}

.frame-green>div {
    padding: 0 1.5rem;
}

.frame-green h3 {
    padding: 1rem;
    border-bottom: 2px dashed #0D6905;
}

.frame-green-text {
    margin: 2rem 0 3rem 0;
}

.frame-green-text p {
    margin: 1rem 0;
}

.bk-green {
    max-width: 800px;
    margin: 2rem auto;
}

.bk-green dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 1rem;
}

.bk-green dd {
    width: 20%;
    padding: 1rem 0.5rem;
}

.bk-green dt {
    width: 60%;
    padding: 1rem 0.5rem;
}

/*--------*/

.frame-brown {
    margin: 1.5rem 1rem;
    border: #E3CE96 2px solid;
    border-radius: 40px;
    color: #734712;
}

.frame-brown h3 {
    padding: 1rem;
    border-bottom: 2px dashed #734712;
    position: relative;

}

.frame-brown h3 span {
    font-size: 1.6rem;
    color: #fae7d8;
    position: absolute;
    right: 1rem;
    top: 1rem
}

.frame-brown>div {
    padding: 0 1.5rem;
}

.frame-brown dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 1rem;
}

.frame-brown dd {
    width: 30%;
    border-bottom: 1px dashed #734712;
    padding: 1rem 0.5rem;
}

.frame-brown dt {
    width: 60%;
    border-bottom: 1px dashed #734712;
    padding: 1rem 0.5rem;
}




/*--------*/

.frame-none {
    margin: 2rem 1.5rem;
}

/*-----------------------------------------------------
    overview
--------------------------------------------------------*/

.rinen {
    background: #B8DCB8;
    color: #35712d;
}

.rinen h3 {
    text-align: center;
    margin: 0 auto;
    padding: 2rem 1rem 1rem 1rem;
}

.rinen>div {
    display: block;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.rinen h4 {
    text-align: center;
    margin: 1rem;
    padding: 1rem;
    border-top: dashed 2px #35712d;
    border-bottom: dashed 2px #35712d;
    color: #35712d;

    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.rinen h5 {
    margin-top: 1rem;
}

.company-txt {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.company-txt div {
    width: 90%;
    margin: 0 auto;
}

.company-img {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.company-img p {
    width: 80%;
    margin: 0 auto;
}

.btn-company {
    max-width: 300px;
    background: #f1f3cb;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: #2e832b;
    text-decoration: none;
    text-align: center;
    display: block;
    margin: 3rem auto;
}

#dc-01 h3 {
    position: relative;
}

#dc-01 h3::before {
    position: absolute;
    content: url(images/ico-04.png);
    right: 0;
    top: 0;
}

#dc-02 h3 {
    position: relative;
}

#dc-02 h3::before {
    position: absolute;
    content: url(images/ico-31.png);
    right: 0;
    top: 5px;
}

#dc-01 li,
#dc-02 li {
    padding: 1rem 0;
}

.campus h3 {
    padding: 1rem;
    text-align: center;
}

.campus h3 span {
    color: #E2C372;
}

.campus-map {
    border-top: 5px dotted #E2C372;
    border-bottom: 5px dotted #E2C372;
    padding: 2rem;
}

/*-----------------------------------------------------
    approach
--------------------------------------------------------*/

.img-hero {
    margin-top: 1rem;
    vertical-align: middle;
}

.img-element {
    display: block;
    width: auto;
    margin: 1rem auto;
}

.approach-words {
    color: #EA6C18;
    font-size: 1.6rem;
    text-align: center;
    margin: 1rem;
    font-weight: bold;
}



.approach-area1>div>div>ul li {
    list-style-type: none;
    text-align: center;
    margin: 2rem;
}

.approach-area1 h3 {
    text-align: center;
    padding: 1rem;
    border-bottom: dashed 2px #EA6C18;
    color: #EA6C18;
}

.approach-area1>ul {
    margin-top: 3rem;
    color: #EA6C18;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 20px;
}

.approach-area1>ul li {
    list-style-type: none;
    border: 2px solid #EA6C18;
    border-radius: 30px;
}

.approach-area1>ul p {
    margin: 1rem 2rem 2rem 2rem;
    font-size: 1.2rem;
}

.approach-area1 .number {
    background: #EA6C18;
    color: #FFF;
    font-weight: bold;
    padding: 0.8rem 0.9rem;
    border-radius: 30px;
    font-size: 1.3rem;
}

.pillar ol li {
    list-style-type: none;
    margin: 2rem 0;
}

.pillar h5 {
    font-size: 1.2em;
    position: relative;
    margin-top: 4rem;
}

.pillar div img {
    width: 80%;
    margin: 2rem auto;
}

.point1 h5:before {
    content: url(images/img-point01.png);
    position: absolute;
    top: -9rem;
}

.point1 {
    color: #d8838b;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}


.point2 h5 {
    text-align: right;
}

.point2 h5:before {
    content: url(images/img-point02.png);
    position: absolute;
    top: -9rem;
    right: 0;
}

.point2 {
    color: #e9b31e;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}


.point3 h5:before {
    content: url(images/img-point03.png);
    position: absolute;
    top: -9rem;
}

.point3 {
    color: #379906;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}


.point4 h5 {
    text-align: right;
}

.point4 h5:before {
    content: url(images/img-point04.png);
    position: absolute;
    top: -9rem;
    right: 0;
}

.point4 {
    color: #0c8dc4;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.point1 div:first-child,
.point2 div:first-child,
.point3 div:first-child,
.point4 div:first-child {
    width: 90%;
}

.approach-area2 .group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.approach-area2 .h-position>p:nth-child(1) {
    height: 200px;
    display: grid;
    place-items: center;
}

.approach-area2 h3 {
    text-align: center;
    margin: 3rem auto 1rem auto;
    padding: 1rem;
    border-top: dashed 2px #734712;
    color: #734712;
}

.approach-area2 .group-slide {
    background: #fcf7e8;
    border-radius: 30px;
    margin: 1rem auto;
    padding: 2rem;
    text-align: center;
    color: #734712;
}

.nido,
.ic,
.primary {
    border-radius: 40px;
    padding: 1rem 1rem 2rem 1rem;
    background: #f6f4f4;
    color: #656565;
    box-shadow: 1px 1px 5px #CCC;
    margin-top: 2rem;
}

.nido img,
.ic img,
.primary img {
    width: 100px;
    display: block;
    margin: 1rem auto;
}


.nido div:nth-child(1) {
    color: #fa83b1;
    margin: 1rem;
}

.nido h4 {
    text-align: center;
    background: #f5dae4;
    border-radius: 40px;
    font-size: 1.2rem;
    padding: 0.3rem;
    color: #da6793;
}

.nido p {
    margin: 0 auto;
}

.kakomi01 {
    background: #FFF;
    padding: 1.5rem;
    border-radius: 30px;
    border: 3px dashed #f3a7c4;
    margin-top: 1rem;
}

.nido h5 {
    color: #fa83b1;
}


.ic h4 {
    text-align: center;
    background: #f8e5d9;
    border-radius: 40px;
    font-size: 1.2rem;
    padding: 0.3rem;
    color: #9b4d1a;
}

.ic p {
    margin: 0 auto;
}


.ic div:nth-child(1) {
    color: #EA6C18;
    margin: 1rem;
}

.kakomi02 {
    background: #FFF;
    padding: 1.5rem;
    border-radius: 30px;
    border: 3px dashed #f7ac7a;
    margin-top: 1rem;
}

.ic h5 {
    color: #EA6C18;
}



.primary h4 {
    text-align: center;
    background: #edf3cc;
    border-radius: 40px;
    font-size: 1.2rem;
    padding: 0.3rem;
    color: #6B7242;
}

.primary p {
    margin: 0 auto;
}

.kakomi03 {
    background: #FFF;
    padding: 1.5rem;
    border-radius: 30px;
    border: 3px dashed #7db473;
    margin-top: 1rem;
}

.primary h5 {
    color: #3b7033;
}

.primary div:nth-child(1) {
    color: #3b7033;
    margin: 1rem;
}

.kakomi01 img,
.kakomi02 img,
.kakomi03 img {
    width: 90%;
    border-radius: 30px;
}

/*-----------------------------------------------------
    life
--------------------------------------------------------*/

.life-area-01 h2 {
    margin-top: 1rem;
    text-align: center;
    letter-spacing: 0.3rem;
    position: relative;
}

.life-area-01 h2::before {
    position: relative;
    content: "";
    display: inline-block;
    background: url(images/deco-life03.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 3rem;
    left: -1rem;
    width: 2em;
    height: 4em;
    transform: scale(0.6);

}

.life-area-01 h2::after {
    position: relative;
    content: "";
    display: inline-block;
    background: url(images/deco-life04.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 3rem;
    right: -0.5rem;
    width: 2em;
    height: 4em;
    transform: scale(0.6);
}

.life-area-01 h3 {
    text-align: center;
    margin: 3rem 1rem 4rem 1rem;
    padding: 1rem;
    border-top: dashed 2px #FF7926;
    color: #FF7926;

    position: relative;

}

.life-area-01 h3::after {
    content: url(images/ico-06.png);
    transform: scale(0.8);
    position: absolute;
    top: 4rem;
    right: 0;
    left: 0;
}

.life-area-01 img {
    margin: 3rem 1rem 0 1rem;
}


.life-area-02 h3 {
    text-align: center;
    margin: 3rem 1rem 1rem 1rem;
    padding: 1rem;
    border-top: dashed 2px #FF7926;
    color: #FF7926;

}

.health-area-01 {
    background: #FFFCEB;
    padding: 2rem 1.5rem;
}

.health-area-01 h2 {
    margin-bottom: 1rem;
    text-align: center;
    letter-spacing: 0.3rem;
    position: relative;
}

.health-area-01 h2::before {
    position: relative;
    content: "";
    display: inline-block;
    background: url(images/deco-health.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 2.5rem;
    left: 0;
    width: 4em;
    height: 4em;
    transform: scale(0.5);
}

.health-area-01 h2::after {
    position: relative;
    content: "";
    display: inline-block;
    background: url(images/deco-health.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 2.5rem;
    right: 0;
    width: 4em;
    height: 4em;
    transform: scale(0.5);
}

.bk1 span {
    background: url(images/deco-life03.png) no-repeat;
    background-size: 20%;
    background-position: top -0.5rem;
}

.bk2 span {
    background: url(images/deco-life01.png) no-repeat;
    background-size: 20%;
}

.bk3 span {
    background: url(images/deco-health.png) no-repeat;
}

.life-area-01 {
    padding: 0 1rem;
    background: #FFEBE0;
}

#schedule>div {
    padding: 3rem 1rem;
    background: #FFEBE0;
}

#schedule div h3 {
    text-align: center;
    margin: 3rem 1rem 5rem 1rem;
    padding: 1rem;
    border-top: dashed 2px #FD6500;
    color: #FD6500;

    position: relative;
}

#schedule div h3::after {
    content: url(images/ico-32.png);
    transform: scale(0.8);
    position: absolute;
    top: 4rem;
    right: 0;
    left: 0;
}

.year-schedule {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}

.year-schedule>div {
    background: #FFF;
    border-radius: 40px;
    padding-bottom: 1rem;
    filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
    width: 80%;
    margin: 1rem;
}

.year-schedule>div>h4 img {
    display: block;
    max-height: 140px;
    width: auto;
    margin: 0 auto;
}

.year-schedule>div>div>ul {
    margin: 0 1rem 1rem 1rem;
}

.year-schedule>div>div>ul>li {
    padding: 0.5rem;
    list-style-type: none;
}


.spring {
    color: #EB8686;

    width: 85%;
    margin: 1rem 0.5rem;
    padding: 1rem;
}


.spring ul {
    border-top: 1px dashed #EB8686;
}

.spring ul li {
    border-bottom: 1px dashed #EB8686;
}



.summer {
    color: #FF7600;

    width: 85%;
    margin: 1rem 0.5rem;
    padding: 1rem;
}


.summer ul {
    border-top: 1px dashed #FF7600;
}

.summer ul li {
    border-bottom: 1px dashed #FF7600;
}


.autmun {
    color: #AF6835;


    width: 85%;
    margin: 1rem 0.5rem;
    padding: 1rem;
}

.autmun ul {
    border-top: 1px dashed #AF6835;
}

.autmun ul li {
    border-bottom: 1px dashed #AF6835;
}


.winter {
    color: #4E7C8D;


    width: 85%;
    margin: 1rem 0.5rem;
    padding: 1rem;
}

.winter ul {
    border-top: 1px dashed #4E7C8D;
}

.winter ul li {
    border-bottom: 1px dashed #4E7C8D;
}

.e-spring {
    color: #EB8686;
    width: 85%;
    margin: 1rem 0.5rem;
    padding: 1rem;
}

.e-spring ul {
    border-top: 1px dashed #EB8686;
}

.e-spring ul li {
    border-bottom: 1px dashed #EB8686;
}

.spring>div img,
.summer>div img,
.autmun>div img,
.winter>div img,
.e-spring>div img {
    display: block;
    width: 100%;
    border-radius: 30px;
}

.ivent-dl {
    width: 85%;
    margin: 1rem 0.5rem;
    padding: 1rem;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ivent-dl p {
    padding: 0 2rem;
    text-align: center;
}


.life-area-02 {
    padding: 5rem 1rem;
    background: #fff2cd;
}

.life-area-02 h2 {
    margin-top: 1rem;
    text-align: center;
    letter-spacing: 0.3rem;
    position: relative;
}

.life-area-02 h2::before {
    position: relative;
    content: "";
    display: inline-block;
    background: url(images/deco-life01.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 1rem;
    left: -1rem;
    width: 2.5em;
    height: 2em;

}

.life-area-02 h2::after {
    position: relative;
    content: "";
    display: inline-block;
    background: url(images/deco-life02.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 1rem;
    right: -0.5rem;
    width: 2.5em;
    height: 2em;
}

.life-area-02 h3 {
    color: #FF7926;
}

.life-area-02 h4 {
    color: #fff;
    text-align: center;
    max-width: 280px;
    margin: 1rem auto;
    padding: 0.5rem;
    background: #FF7926;
    border-radius: 40px;
    font-weight: normal;
}

.meal-policy {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 1.5rem;
}

.c2 {
    grid-column: span 2 / span 2;
}

.life-area-02 ul li {
    list-style-type: none;
    position: relative;
    display: flex;

}

.syokuiku-1 {
    color: #EA6C18;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 30px;

    margin: 0 auto;
    padding: 1rem;
}

.syokuiku-1 li {
    background: #FFF;
    border-radius: 20px;
    padding: 1rem;
    color: #6C6C6C;
}

.syokuiku-1 .number {
    background: #EA6C18;
    color: #FFF;
    font-weight: bold;
    padding: 0.7rem 0.9rem;
    border-radius: 30px;
    font-size: 1.3rem;

    position: absolute;
    top: -5px;
    left: -5px;
}

.syokuiku-1 img {
    width: 45%;
    border-radius: 20px;
}

.syokuiku-1 p {
    width: 55%;
    padding: 1rem;
}

.syokuiku-2 {
    color: #EA6C18;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 2rem;

    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.syokuiku-2 li {
    display: flex;
    flex-direction: column;

}

.syokuiku-2 .number {
    background: #FFF;
    color: #EA6C18;
    border: 2px solid #EA6C18;
    font-weight: bold;
    padding: 0.7rem 0.9rem;
    border-radius: 30px;
    font-size: 1.3rem;

    position: absolute;
    top: -5px;
    left: -5px;
}

.syokuiku-2 p {
    color: #6C6C6C;
}

.syokuiku-2 h5 {
    margin: 1rem 1rem 1rem 4rem;
}

.syokuiku-2 div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
}

.syokuiku-2 figure img {
    border-radius: 20px;
    margin-top: 1rem;
}

/*------------------------------------------------------
    health
------------------------------------------------------*/

.health-area-01 h3 {
    text-align: center;
    margin: 1rem auto;
    padding: 1rem;
    border-top: dashed 2px #844D8E;
    border-bottom: dashed 2px #844D8E;
    color: #844D8E;
}

.health-area-01 ol {
    width: 100%;
    max-width: 900px;
    margin: 3rem auto;
}

.health-area-01>ol>li {
    display: flex;
    flex-direction: column;
    position: relative;
}

.health-area-01 .number {
    background: #844D8E;
    color: #FFF;
    font-weight: bold;
    padding: 0.7rem 0.9rem;
    border-radius: 30px;
    font-size: 1.3rem;

    position: absolute;
    top: 1rem;
    left: -5px;
}

.health-area-01 ol h4 {
    color: #844D8E;
    margin: 2rem 1rem 1rem 4rem;
}

.health-area-01 ol li ul {
    border-top: 1px solid #CCC;
    margin: 1rem auto;
    width: 100%;
}

.health-area-01 ol li ul li {
    list-style-type: disc;
    list-style-position: inside;
    border-bottom: 1px solid #CCC;
    padding: 1rem 0;
}

.health-area-01 ol img {
    display: block;
    margin: 1rem;
    width: 100%;
    max-width: 300px;
    height: auto;

    border-radius: 30px;
}

.health-area-02 {
    padding: 4rem 1rem;
    background: #F2F2F2;
}

.health-area-02>div {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.health-area-02 h3 {
    text-align: center;
    margin: 1rem auto;
    padding: 1rem;
    border-top: dashed 2px #55918A;
    border-bottom: dashed 2px #55918A;
    color: #55918A;
}

.health-area-02 h4 {
    color: #fff;
    text-align: center;
    max-width: 460px;
    margin: 3rem auto 2rem auto;
    padding: 0.5rem;
    background: #55918A;
    border-radius: 40px;
    font-weight: normal;
    position: relative;
    font-size: 1.3rem;
}

.health-area-02 h4 .number {
    background: #FFF;
    color: #55918A;
    font-weight: bold;
    padding: 0.8rem 0.9rem;
    border-radius: 30px;
    font-size: 1.3rem;
    border: 2px solid #55918A;
    position: absolute;
    left: 0;
    top: -7px;
}

.health-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 16px;

}

.health-1 li {
    background: #FFF;
    border: 3px solid #55918A;
    border-radius: 20px;
    padding: 1rem;
    color: #55918A;
    list-style-type: none;

    font-weight: bold;
    text-align: center;
}

.health-1 li img {
    display: block;
    width: 40%;
    margin: 1rem auto;
}

.health-1-5 {
    grid-column: span 2 / span 2;
    grid-row-start: 3;
}

.health-1-5 span,
.health-area-02 .note p:nth-child(2) {
    color: red;
    display: block;
    margin: 1rem auto;
}

.health-area-02 .note {
    margin: 2rem auto;
    padding: 2rem;
    background: #fdf8ed;
    border: 3px dashed #55918A;
    border-radius: 40px;

}

.health-area-02 .text {
    margin: 2rem auto;
}

.health-area-02 h5 {
    margin: 2rem auto 0 auto;

}

.health-area-02 table {
    width: 100%;
    margin: 1rem auto 0 auto;
}

.health-area-02 table th {
    background-color: #55918A;
    padding: 1rem;
    color: #FFF;
}

.health-area-02 table tr {
    background-color: #FFF;
}

.health-area-02 table tr:nth-child(odd) {
    background-color: #fdf8ed;
}

.health-area-02 table tr td {
    padding: 1rem;
    text-align: center;
}

.table-wrap {
    overflow-x: scroll;
}

.health-2-table {
    width: 100%;
    min-width: 800px;
}

.health-2-table td {
    background-color: #fff;

}

/*------------------------------------------------------
    admission
------------------------------------------------------*/
.guide-area-01>div {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.guide-area-01 h3 {
    max-width: 460px;
    text-align: center;
    color: #ED6196;
    background: #f3f0f1;
    border-radius: 40px;
    margin: 3rem auto 2rem auto;
    padding: 0.5rem;
}

.guide-area-01 dl ul {
    margin: 1rem;
    color: #ED6196;
}

.guide-area-01 table {
    margin: 1rem;
    border: 1px solid #CCC;
}

.guide-area-01 table th {
    background: #CCC;
    padding: 0.5rem;

}

.guide-area-01 table td {
    padding: 0.5rem;
    border: 1px solid #CCC;
}

.guide-area-01 dt {
    margin-top: 2rem;
}

.guide-area-01 dt span,
.guide-step h5 {
    padding-left: 2rem;
    font-size: 1.2rem;
    color: #ED6196;
    position: relative;
    font-weight: bold;
}

.guide-area-01 dt span::before,
.guide-step h5::before {
    content: url(images/guide-ico.png);
    top: 5px;
    left: 0;
    position: absolute;
}

.guide-area-01 dd {
    padding: 1rem;
}

.guide-step>div {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.guide-step>div::after {
    position: absolute;
    content: "\025bc";
    color: #ED6196;
    font-size: 1.2rem;

    top: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.guide-step>div:first-child::after {
    content: " ";
}

.guide-step>div>div {
    margin: 3rem 1rem;
    padding: 1rem 1.5rem;
    border: 2px solid #CDCDCD;
    border-radius: 10px;
    background: #FFF;

}

.guide-step p {
    margin-top: 1rem;
}

.guide-step ul {
    margin: 1rem;
}

/*------------------------------------------------------
    neighbor
------------------------------------------------------*/

.neighbor-area-01>div {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.neighbor-area-01 h3 {
    max-width: 460px;
    text-align: center;
    color: #FFF;
    background: #62B15B;
    border-radius: 40px;

    margin: 3rem auto 2rem auto;
    padding: 0.5rem;
}

.neighbor-area-01 ul,
.neighbor-area-01 ol {
    list-style-position: inside;
    margin: 1rem;
    width: auto;
}

.neighbor-area-01 .dl {
    display: block;
    background: #c2f2bd;
    margin: 1rem auto;
    padding: 1rem;
    width: 240px;
    color: #2B7724;
    text-decoration: none;
    border-radius: 40px;
    border-bottom: 5px solid #2B7724;
    border-right: 3px solid #2B7724;
    border-top: 1px solid #2B7724;
    border-left: 1px solid #2B7724;
}

.neighbor-area-01>div>div {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    background: #fbf4d1;
    margin: 2rem auto;
    padding: 1rem;
    border-radius: 40px;

}

.neighbor-area-01 h4 {
    color: #62B15B;
    padding: 1rem;
    position: relative;
}

.neighbor-area-01 h4::before {
    content: url(images/deco-life06.png);
}

.neighbor-area-01>div>div li {
    margin: 0.5rem;
    padding: 0.5rem;
    border: 2px solid #777424;
    border-radius: 40px;
    background: #fbf7e1;
    list-style-type: none
}

.neighbor-area-01>div>div li a {
    display: block;
    text-decoration: none;
    color: #777424;
    font-weight: bold;
}

/*------------------------------------------------------
    monttessori
------------------------------------------------------*/

.montessori-area-01>div {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 3rem;
    text-align: center;
}

.montessori-area-01 h3 {
    max-width: 460px;
    text-align: center;
    color: #FFF;
    background: #E35952;
    border-radius: 40px;

    margin: 3rem auto 2rem auto;
    padding: 0.5rem;
}


.montessori-area-01 h4 {
    color: #E35952;
    padding: 1rem;
}

.montessori-area-01 .dl {
    display: block;
    background: #f2cbbd;
    margin: 1rem auto;
    padding: 1rem;
    width: 240px;
    color: #E35952;
    text-decoration: none;
    border-radius: 40px;
    border-bottom: 5px solid #E35952;
    border-right: 3px solid #E35952;
    border-top: 1px solid #E35952;
    border-left: 1px solid #E35952;
}

.montessori-area-01 img {
    margin: 2rem auto 1rem auto;

}

.montessori-area-01>div>div {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    background: #fbf4d1;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 40px;

}

/*------------------------------------------------------
    privacy,download
------------------------------------------------------*/

.footmenu-area>div {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 3rem;

}

.footmenu-area h3 {
    border-top: 2px solid #CCC;
    border-bottom: 2px solid #CCC;
    font-weight: normal;
    text-align: center;
    margin: 2rem auto;
    padding: 0.5rem;

}

.footmenu-area h4 {
    font-weight: normal;
}

.footmenu-area ul {
    margin-left: 2rem;
}

.footmenu-area .dl {
    text-align: center;
}

.footmenu-area .dl a {
    display: block;
    margin: 3rem auto 0.5rem auto;
    width: 280px;
    padding: 1rem;
    background: #E35952;
    border-radius: 40px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: #FFF;
}

/*------------------------------------------------------
    service
------------------------------------------------------*/

.service-area .service-menu,
.service-area .service-area-01,
.service-area .service-area-02,
.service-area .service-area-03 {
    max-width: 800px;
    margin: 0 auto;
}

.service-area h3 {
    text-align: center;
    margin: 1rem auto;
    padding: 1rem;
    border-top: dashed 2px #128B86;
    border-bottom: dashed 2px #128B86;
    color: #128B86;
}

.service-menu {
    margin: 2rem auto !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.service-menu a {
    margin: 0.25rem;
    min-width: 320px;
    color: #128B86;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
}

.service-menu a span {
    display: block;
    padding: 0.5rem 1rem;
    border: 4px solid #128B86;
    border-radius: 40px;
    text-align: center;
}

.service-menu .type2 {
    color: #f1762f;
}

.service-menu .type2 span {
    border: 4px solid #f1762f;
}

.service-menu .type3 {
    color: #3c8b12;
}

.service-menu .type3 span {
    border: 4px solid #3c8b12;
}

.service-area-01 {
    margin-top: 3rem !important;
    border-radius: 40px;
    padding: 1rem;
    border: 5px dotted #c2e5e3;
    background: #f9ffff
}

.service-area-01 ul,
.service-area-02 ul {
    margin-left: 1rem;
}

.service-area-01 table,
.service-area-02 table,
.service-area-03 table {
    margin: 0.5rem 0;
    border-collapse: collapse;
    background: #FFF;
}

.service-area-01 table th {
    padding: 0.5rem 1rem;
    border: 1px solid #128B86;
    text-align: center;
    color: #128B86;
    background: #fdf8e2;
    font-weight: normal;
}

.service-area-01 table td {
    padding: 0.5rem 1rem;
    border: 1px solid #128B86;
    text-align: center;
}

.service-area-01 h4 {
    text-align: center;
    padding: 0.5rem 0;
    border-radius: 40px;
    color: #FFF;
    background: #128B86;
}

.service-area-01 h5 {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-radius: 40px;
    color: #128B86;
    background: #dcf0ef;

}

.service-area-01 .box {
    border-radius: 20px;
    margin: 1rem auto;
    padding: 1rem;
    border: 3px solid #128B86;
    background: #FFF;
    color: #128B86;
    max-width: 560px;
}

.service-area-01 .box ul,
.service-area-02 .box ul,
.service-area-03 .box ul {
    display: grid;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 16px;

    text-align: center;
    list-style-type: none;
    font-weight: bold;

    margin-left: 0;

}

.service-area-01 .box ul img,
.service-area-02 .box ul img,
.service-area-03 .box ul img {
    width: 110px;
    padding: 1rem;
    margin-top: 1rem;
    background: #fdf8e2;
    border-radius: 50px;
}


.service-area-02 {
    margin-top: 3rem !important;
    border-radius: 40px;
    padding: 1rem;
    border: 5px dotted #fbcbb0;
    background: #fffbf9;

    text-align: center;
}

.service-area-02 table th {
    padding: 0.5rem 1rem;
    border: 1px solid #f1762f;
    text-align: center;
    color: #f1762f;
    background: #fdf8e2;
    font-weight: normal;
}

.service-area-02 table td {
    padding: 0.5rem 1rem;
    border: 1px solid #f1762f;
    text-align: center;
}

.service-area-02 h4 {
    text-align: center;
    padding: 0.5rem 0;
    border-radius: 40px;
    color: #FFF;
    background: #f1762f;
}

.service-area-02 h5 {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-radius: 40px;
    color: #f1762f;
    background: #f9efe8;

}

.service-area-02 .box {
    border-radius: 20px;
    margin: 1rem auto;
    padding: 1rem;
    border: 3px solid #f1762f;
    background: #FFF;
    color: #f1762f;
    max-width: 560px;
}

.service-area-02 img {
    max-width: 300px;
    border-radius: 40px;
    margin-top: 1rem;
}



.service-area-03 {
    margin-top: 3rem !important;
    border-radius: 40px;
    padding: 1rem;
    border: 5px dotted #ace38f;
    background: #fafff9;

}

.service-area-03 ol,
.service-area-03 li {
    list-style-position: inside;
}

.service-area-03 ol>li {
    margin-top: 1rem;
}

.service-area-03 ul>li>ul {
    margin-left: 1rem;
}

.service-area-03 table th {
    padding: 0.5rem 1rem;
    border: 1px solid #3c8b12;
    text-align: center;
    color: #3c8b12;
    background: #eefbe6;
    font-weight: normal;
    white-space: nowrap;
}

.service-area-03 table td {
    padding: 0.5rem 1rem;
    border: 1px solid #3c8b12;

}

.service-area-03 h4 {
    text-align: center;
    padding: 0.5rem 0;
    border-radius: 40px;
    color: #FFF;
    background: #3c8b12;
}

.service-area-03 h5 {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border-radius: 40px;
    color: #3c8b12;
    background: #d7f1d9;

}

.service-area-03 .box {
    border-radius: 20px;
    margin: 1rem auto;
    padding: 1rem;
    border: 3px solid #3c8b12;
    background: #FFF;
    color: #3c8b12;
    max-width: 560px;
}

.service-area-03 img {
    max-width: 200px;
    border-radius: 40px;
    margin: 1rem auto !important;
}

.service-area-03 .box p {
    text-align: center;
    font-size: 1.1rem;
    padding: 0.5rem;
    margin-bottom: 1rem;
    background: #3c8b12;
    border-radius: 20px;
    color: #FFF;
}

.service-area-03 .box2 {
    margin: 1rem 0;
    padding: 1rem;
    background: #FFF;
    border-radius: 20px;
    border: 1px solid #3c8b12;
    background: #fdf8e2;
    color: #3c8b12;
}

.service-area-03 .box .no-img {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0;
    text-align: left;
    list-style-type: disc;
    font-weight: normal;
}

.service-area-03 .th2 {
    background: #fdf8e2;
    text-align: left;
}

.service-area-03 .flow span {

    background: #FFF;
    color: #3c8b12;
    border: 2px solid #3c8b12;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    font-size: 1.3rem;
    line-height: 2.5;
}

.service-area-03 .map img {
    border-radius: 0;
    max-width: 560px;
    margin: 0 auto;
    display: block;
}


.cap {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;

}

.cap p {
    display: grid;
    place-content: center;
    text-align: center;
}

.cap p img {
    width: 90%;
}

/*-------------*/
/*-------------*/

/*-------------*/
/*-------------*/

.side {
    margin-top: 2rem;
    list-style-type: none;
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 8px;

}

.side ul {
    margin-left: 1rem;
}

.side .cat-side-c {
    margin-left: 1rem;
    list-style-type: disc;
}

.sidebar h3 {
    margin-top: 1rem;
    color: #4B7EBF;
    border-top: dotted 3px #4B7EBF;
    border-bottom: dotted 3px #4B7EBF;
    background: #ebecf4;
    padding: 0.5rem 1rem 0.5rem 3rem;
    font-size: 1.2rem;
    font-family: "Archivo Black", sans-serif;
    position: relative;
}

.sidebar-menu {
    margin-top: 1rem;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.sidebar-menu li {
    list-style-type: none;
    border: 3px solid #4B7EBF;
    padding: 0.5rem 1rem;
    border-radius: 30px;
}

.sidebar-menu li a {
    text-decoration: none;
    display: block;
}

/* TOPカルーセル */

.carousel-top .slider {
    padding-center: inherit;
}

.slider img {
    width: 100%;
}

.slick-slide {
    margin: 0 2px;
}

.slider {
    padding-left: 0;
}

.slick-prev:before,
.slick-next:before {
    color: black;
    left: 10px;
}

.slick-dots {
    bottom: -2rem !important;
}

.slick-dots li button:before {
    font-size: 18px !important;
}

.slick-dots-sp {
    position: absolute;
    bottom: -40px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

.slick-dots-sp li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots-sp li.slick-active button::before {
    color: black;
    opacity: 0.7;
}

.slick-dots-sp li button {
    background: transparent;
    border: 0;
    font-size: 0pt;
}

.slick-dots-sp li button::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "•";
    width: 16px;
    height: 16px;
    font-family: "slick";
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: black;
    opacity: 0.25;
}


.carousel-top {
    padding-top: 30px;
    width: 100%;
}


/*------------------------------------------------------
-----------------------------------------------------

responsive

-----------------------------------------------------
--------------------------------------------------------*/

@media screen and (min-width:640px) and (max-width:819px) {
    header {
        background-position-y: -100px;
    }


}

@media screen and (min-width: 820px) {


    html {

        font-size: 16px;

    }

    iframe {
        width: 100%;
    }

    .btns {
        display: flex;
        justify-content: center;
    }

    .btns a {
        width: 40%;
    }

    .carousel-top {
        padding-top: 10px;
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
    }

    .only-pc {
        display: block;
    }

    .only-sh {
        display: none;
    }


    header {
        background-position-y: -160px;
    }

    .mobile-btn {
        display: none;
    }

    .logo-l {
        display: block;
        width: 260px;
        margin: 1rem auto 2rem auto;
    }

    .logo-s {
        display: none;
    }

    .nav-sub {
        display: flex;
        justify-content: space-around;
        position: absolute;
        top: 3rem;
        width: 240px;
        right: 1rem;
    }


    .nav-sub img {
        width: 64px;
    }

    .nav-pc {
        display: flex;
        flex-wrap: wrap;
        max-width: 1336px;
        margin: 4rem auto 0 auto;
        justify-content: space-around;
        list-style-type: none;
        position: relative;
    }

    .nav-pc a {
        display: block;
        text-decoration: none;
        color: #734712;
        padding: 0.5rem 1rem;

        text-align: center;
        position: relative;
    }

    .menu01::before {
        content: url(images/ico-11.webp);
        display: block;
        margin: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        transform: scale(0.45);
        top: -96px;
    }

    .menu02::before {
        content: url(images/ico-22.webp);
        display: block;
        margin: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        transform: scale(0.45);
        top: -66px;

    }

    .menu03::before {
        content: url(images/ico-33.webp);
        display: block;
        margin: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        transform: scale(0.45);
        top: -80px;
    }

    .menu04::before {
        content: url(images/ico-44.webp);
        display: block;
        margin: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        transform: scale(0.45);
        top: -80px;
    }

    .menu05::before {
        content: url(images/ico-55.webp);
        display: block;
        margin: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        transform: scale(0.45);
        top: -76px;
    }

    .menu06::before {
        content: url(images/ico-66.webp);
        display: block;
        margin: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        transform: scale(0.45);
        top: -80px;
    }

    .menu07::before {
        content: url(images/ico-77.webp);
        display: block;
        margin: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        transform: scale(0.4);
        top: -86px;
    }

    .menu08::before {
        content: url(images/ico-88.webp);
        display: block;
        margin: auto;
        position: absolute;
        left: 0px;
        right: 0px;
        transform: scale(0.4);
        top: -86px;
    }

    /* -------------------------- */
    ドロップダウンメニュー .drop-menu {
        position: relative;
    }

    /* メニューアイテムのホバースタイル */
    .drop-menu:hover .drop-menu-list {
        visibility: visible;
        /* 下層メニューを表示 */
    }

    .nav-main ul>li>ul {
        position: absolute;
        width: 230px;
        z-index: 1000;
        list-style-type: none;
        background: #E35952;
        top: 2.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0px 20px 20px 20px;

        visibility: hidden;
    }

    .nav-main ul>li>ul li {
        border-bottom: 1px dashed #FFF;
    }

    .nav-main ul>li>ul li a {
        color: #FFF;
        font-size: small;
        text-align: left;
    }

    /*----------------------------------------*/





    /*----2nd---*/
    .downstairs {
        background: none;
    }

    .downstairs .logo-l {
        display: none;
    }

    .downstairs .logo-sq {
        display: block;
    }

    .downstairs hgroup>div {
        background: none;
    }

    .downstairs>div {
        position: relative;
        width: 100%;
        padding: 0;
        margin: 0 auto;

        background: #F1ECDE;
        border-radius: 0 0 20px 20px;
        filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));

        display: flex;
        align-items: center;

    }

    .downstairs>div h1 a {
        width: 40px;
        margin: 0 1.5rem 0.5rem 2rem;
    }

    .downstairs .nav-pc {
        margin: 0;
        padding: 0;

        margin-top: 3.5rem;
    }

    .downstairs .nav-pc>ul>li>a {
        padding: 1rem 1.5rem;
    }

    .downstairs .nav-sub {
        position: relative;
        justify-content: end;
        flex-grow: 3;
        top: 0;

    }

    .downstairs .nav-sub p {
        margin-right: 1rem;
    }

    .downstairs hgroup {
        position: relative;
        top: -30px;
    }

    .downstairs hgroup h2 {
        margin-top: 100px;
        text-align: center;
        font-size: 2rem;
    }

    /*
    .downstairs .menu01::before,
    .downstairs .menu02::before,
    .downstairs .menu03::before,
    .downstairs .menu04::before,
    .downstairs .menu05::before,
    .downstairs .menu06::before,
    .downstairs .menu07::before,
    .downstairs .menu08::before {
        content: none;
    }
    */

    .downstairs .parents h2,
    .downstairs .link h2,
    .downstairs .news-article h2,
    .downstairs .news-nonna h2,
    .downstairs .news-mani h2 {
        margin: 1rem 0;
        font-size: 1.6rem;
        color: #FFF;
    }


    /*--------------*/
    .news,
    .news-front,
    .news-top {
        padding: 2rem 0;
    }

    /*.news-top {
        padding: 2rem 0;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-around;
    }
        
    .news-top>div {
        width: calc(100% / 1.5);
    }

    .sideber {
        width: calc(100% / 4) !important;
    }
    */

    .news>div {
        width: 90%;
        margin: 0 auto;
    }

    .side {

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap: 16px;

    }


    /*--------------*/

    .menu-l {
        display: flex;
        flex-direction: row-reverse;
    }


    /*--------------*/

    .menu-s {
        display: flex;
        flex-wrap: wrap;
    }

    .menu-s>div {
        width: 30%;
        margin: 1rem auto;
    }

    .menu-s-size {
        margin: 1rem auto;
        width: 94%;
        font-size: clamp(1.0rem, 2.6vw, 2rem);
    }


    /*--------------*/
    .menu-info {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .menu-info .tour,
    .menu-info .recruit {
        width: 49%;
    }

    .outline>div {
        padding: 2rem 3rem;
    }


    /*--------------*/

    footer {
        margin: 3rem auto 0 auto;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;

        width: 100%;
        max-width: 1336px;
        height: auto;
        border-radius: 40px 40px 0 0;
        background-size: 100%;
        border-radius: 40px 40px 0 0;

        color: #FFF;
    }

    .footer-nav {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .footer-nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .footer-nav ul li {
        width: 50%;
    }

    .footer-nav ul li a {
        color: #FFF;
    }

    .footer-nav ul li span {
        font-size: x-small;
    }

    footer h2 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;

        width: 100%;
        max-width: 100%;
        margin: auto;
    }

    footer h2 img {
        display: block;
        width: 60%;
        max-width: 240px;
        margin: 2rem 0 0 3rem;
    }

    .footer-nav-sub {
        margin-top: 1rem;
        grid-column: 1 / 2;
        grid-row: 2 /3;
    }

    .footer-nav-sub>div {
        display: flex;
        width: 80%;
        margin: 0 0 2rem 3rem;
    }

    .footer-nav-sub>div p {
        width: 70px;
        margin-right: 1rem;
    }

    address {
        grid-column: 1 / 3;
        grid-row: 3 / 4;

        background: none;
        height: auto;
    }

    address span {
        line-height: 2;
        padding-bottom: 1rem;
    }

    /*--------------------------*/
    .flex-2 {
        display: flex;
        justify-content: space-around;
    }

    .flex-2-re {
        display: flex;
        justify-content: space-around;
        flex-direction: row-reverse;
    }

    .year-schedule>div {
        width: 40%;
    }

    .approach-area1>ul {
        grid-template-columns: 1fr 1fr;
    }

    .point1 div:first-child,
    .point2 div:first-child,
    .point3 div:first-child,
    .point4 div:first-child {
        width: 40%;
    }

    .point1 div:nth-child(2),
    .point2 div:nth-child(2),
    .point3 div:nth-child(2),
    .point4 div:nth-child(2) {
        width: 45%;
    }

    .nid>div,
    .ic>div .primary>div {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }

    .nido div:nth-child(1),
    .ic div:nth-child(1),
    .primary div:nth-child(1) {
        grid-row: 1/2;
        grid-column: 1 / 3;
    }


    .service-menu a {
        margin: 0.25rem;
        min-width: 400px;
    }

    .syokuiku-1 {
        grid-template-columns: 1fr 1fr;
    }

    .meal-policy {
        grid-template-columns: repeat(4, 1fr);

    }

    .approach-area2 .group {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }

    .outline>div>div {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }

    .rinen>div {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 2rem;
    }

    .approach-area1 .box-r {
        width: 50%;
    }

    .approach-area1 .box-l {
        width: 50%;
    }

    /*-------------slick slider-----------*/

    /* TOPカルーセル */

    .carousel-top .slider {
        padding-left: inherit;
    }

    .slider img {
        width: 100%;
    }

    .slick-slide {
        margin: 0 2px;
    }

    .slider {
        padding-left: 0;
    }

    .slick-prev:before,
    .slick-next:before {
        color: black;
        left: 10px;
    }


    .slick-dots li button:before {
        font-size: 18px !important;
    }

    .slick-dots-sp {
        position: absolute;
        bottom: -40px;
        list-style: none;
        display: block;
        text-align: center;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .slick-dots-sp li {
        position: relative;
        display: inline-block;
        height: 20px;
        width: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }

    .slick-dots-sp li.slick-active button::before {
        color: black;
        opacity: 0.7;
    }

    .slick-dots-sp li button {
        background: transparent;
        border: 0;
        font-size: 0pt;
    }

    .slick-dots-sp li button::before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 16px;
        height: 16px;
        font-family: "slick";
        font-size: 16px;
        line-height: 16px;
        text-align: center;
        color: black;
        opacity: 0.25;
    }


    @media screen and (min-width: 1000px) {
        hgroup .top-text {
            position: absolute;
            width: 40%;
            top: 5rem;
            left: 3rem;
            text-align: left;
        }
    }