/* ------------ base ------------ */
:root :where(.is-layout-flex) {
    gap: 8px;
}
.page-header {
    background: url(../img/header-on-site-childcare.webp) no-repeat center ;
    background-size: contain;
}
.page-header-title {}
.page-header-title:after {content: "Feature";}

h2 > span {
    font-size: 1.45rem;
}

/*  */
.site-body {
    margin: -16% auto 0;
    padding-top: 5em !important;
    background: url(../img/feature-content-bg.webp) no-repeat center -6em;
    background-size: 100%;
}
.site-body-container.container {
    padding: 0;
}
@media (min-width: 480px) {
    .page-header {
        background: url(../img/header-on-site-childcare-pc.webp) no-repeat center ;
        background-size: contain;
    }
    .site-body {
        margin: -6.4em auto 0;
        background: url(../img/feature-content-bg-pc.webp) no-repeat calc((100vw - 1015px)/2) -6em;
        background-size: 962px;
    }
    .site-body-container.container {
        max-width: 100%;
    }
}
@media (min-width: 768px) {
    .site-body {
        margin: -6.4em auto 0;
        background: url(../img/feature-content-bg-pc.webp) no-repeat calc((100vw - 1452px)/2) -10em;
        background-size: 1402px;
    }
}
@media  (min-width: 992px) {
}
@media  (min-width: 1140px) {
    .site-body {
        margin: -6.5em auto 0;
        padding-bottom:10em !important;
        background: url(../img/feature-content-bg-pc.webp) no-repeat calc((100vw - 1798px)/2) -10em;
        background-size: 1658px;
    }
    .site-body-container.container {
        max-width: 1140px;
    }
}

.formButton {
    margin: 3em auto;
    max-width: 330px;
}

/* ---------------- content ------------------ */
#about {
    margin-top: -2.5em;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    
}
.about_text {
    background: #ffffffde;
    /* border: 1px solid #ccc; */
    padding: 3.7em 2.1em 2em;
    margin-top: -5em;
    border-radius: 1em;
}
/*  */
#five_priciples{

}
.titles_item {
    width: 28vw;
    height: 28vw;
    min-height: auto;
    max-width: 150px;
    max-height: 150px;
}
.titles_item .wp-block-cover__inner-container{
    margin-left: -0.5em;
}
.titles_title {
    white-space: nowrap;
}
#principles_list {
    list-style: none;
    padding: 5em 1em;
}
#principles_list li {
    background: #ffffffde;
    box-shadow: 2px 2px 5px #a0a0a0;
    padding: 1em 1.4em 0.8em;
    margin-bottom:1em;
}
#principles_list li h5{ 
    color: var(--font-color3) !important;
    padding: 1em 0em 0.8em;
    font-size: 1em;
    text-align: center;
    position: relative;
}
#principles_list li h5 span { z-index: 2; position: relative; font-size: 1.2em;}
#principles_list li h5:before {
    content: ">";
    background: #ccc;
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    text-align: center;
    line-height: 1;
    border-radius: 50%;
    margin: -1px 0.6em 0 -1.7em;
    z-index: 2;
    position: relative;
}
#principles_list li h5:after {
    content: "";
    display: block;
    position: absolute;
    top: 1.6em;
    right: 0;
    width: calc(100%  - 2.2em);
    height: 1.3em;
    background: #DAF4F5;
    z-index: 0;
}
#principles_list li p{}
/*  */
#features{

}

#features_list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    justify-content: center;
}
#features_list li {
    color: var(--font-color3) !important;
    background: #ffffffde;
    box-shadow: 2px 2px 5px #a0a0a0;
    padding: 0.2em 0.2em;
    font-size: 1em;
    text-align: center;
    height: 150px;
    width: 48%;
    margin: 0 auto 1em;
}
#features_list li h4{ 
    width: max-content;
    max-width: 100%;
    font-size: 1rem;
    margin: 1.5em auto 1.7em;
    padding: 0;
    height: 2.2em;
    position: relative;}
#features_list li h4 span { z-index: 2; position: relative; font-size: 1.2em;}
#features_list li h4:after{
    content: "";
    display: block;
    position: absolute;
    top: 0.8em;
    width: 100%;
    height: 1.3em;
    background: #F5F1DA;
    z-index: 0;
}
#features_list li div{ 
    text-align: left;
    padding: 0 0.5em;
}
/*  */
#service_charge{
    padding: 2em 1em 0;
    max-width: 600px;
    margin: 0 auto;
}
#chargeTableWrap{ 
    background: rgba(255, 255, 255, 0.853);
    border-radius: 1em;
    padding: 1.5em 1.5em;
    box-shadow: 0 0 8px #e0dbdb;
}
#chargeTableWrap h2 { font-size: 1.2em; color: var(--font-color2);}
#chargeTableWrap h3 { font-size: 0.8em; margin:0;}
#chargeTableWrap table { margin: 1em auto 0; border-top: 1px dashed #ccc;;}
#chargeTableWrap table strong { font-size: 1.2em;}
#chargeTableWrap table td {
    padding: 1em 1em;
    display: table-cell;
    background: none;
    border: none;
    border-bottom: 1px dashed #ccc;
}
#chargeTableWrap table tr td:first-child {
    width: 6em;
    color: var(--font-color5);
    vertical-align: top;
}
/*  */
#yoyakuTelWrap {
    margin: 2em auto 4em;
    padding: 1.5em 1em;
    max-width: 600px;
}
/* contact form */
#oscContactForm{
    background: rgba(255, 255, 255, 0.853);
    border-radius: 1em;
    padding: 1.5em 1.5em;
    box-shadow: 0 0 8px #e0dbdb;
}
#oscContactForm .wpcf7,
#oscContactForm form {
    /* max-height: 2000px; */
    opacity: 1;
    transition: opacity 0.45s ease, max-height 0.45s ease, margin 0.45s ease, padding 0.45s ease;
}
.osc-form-hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    visibility: hidden;
}
#oscContactForm.osc-form-done .wpcf7 {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.osc-thanks {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    text-align: center;
    padding: 2em 1.5em;
    border-radius: 0.8em;
    background: #ffffff;
    box-shadow: 0 0 8px #e0dbdb;
    visibility: hidden;
    transition: opacity 0.45s ease, max-height 0.45s ease;
}
.osc-thanks.is-visible {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    color: #1d6684;
}
.osc-thanks__title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 0.6em;
}
.osc-thanks__text {
    margin: 0;
}
.iqItem{

}
.iqItem > p {
    margin-bottom: 0.5em;
    font-weight: bold;
}
input#iqStartTime, input#iqEndTime {
    width: 45%;
}
#iqContactTime {
    width: 6.8em;
}
/*  */

@media (min-width: 480px) {
    #principles_list li h5{
        
    }
}
@media (min-width: 768px) {
    #principles_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #principles_list li {
        width: 42%;
        padding: 2em 2em 2.4em;
        margin: 10px 15px;
    }
    /*  */
    #features_list li { 
        width: 39%;
        justify-content: center;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 0.7em;
        padding: 0 1em 2em;
    }
    #features_list li div {
        text-align: center;
    }
    /*  */
    input#iqStartTime, input#iqEndTime {
        width: 35%;
    }
    #iqContactTime {
        width: 13.2em;
    }
}
@media  (min-width: 992px) {
    
}
@media  (min-width: 1140px) {
    
}