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

/* shinseikai.jp - himari
-----------------------------------------------------*/

/* ==============================================
    flow
============================================== */
#flow div {
    width: 100%;
    max-width: 42em;
    margin: 0 auto;
}
.flow {
    display: grid;
    grid-template-columns: 5.625em auto;
    grid-gap: 0 1.3em;
    margin: 1.5em 0 2em;
}
.flow dt,
.flow dd {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.flow dt {
    position: relative;
    min-height: 86px;
    align-items: center;
    font-size: 22px;
    background: no-repeat left center;
    background-size: 100% auto;
}
.flow dt::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 22px);
    content: "";
    display: block;
    width: 18px;
    height: 15px;
    background: #f8a6c9;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.flow dt span {
    writing-mode: vertical-rl;
    font-weight: 400;
}
.flow:nth-of-type(1) dt { background-image: url("image/service_flow1.png") }
.flow:nth-of-type(2) dt { background-image: url("image/service_flow2.png") }
.flow:nth-of-type(3) dt { background-image: url("image/service_flow3.png") }
.flow:nth-of-type(4) dt { background-image: url("image/service_flow4.png") }
.flow:nth-of-type(5) dt { background-image: url("image/service_flow5.png") }
.flow:nth-of-type(6) dt { background-image: url("image/service_flow6.png") }
.flow:nth-of-type(6) dt::after {
    content: none;
}
.flow dd h3 {
    margin-top: 0;
}
.flow:nth-of-type(5) dd h3 {
    margin-bottom: 0;
}

@media screen and (max-width: 700px) {
    .flow dt {
        font-size: clamp(1.125rem, 0.792rem + 1.33vw, 1.375rem)
    }
}
@media screen and (max-width: 400px) {
    .flow {
        grid-gap: 0 0.7em;
    }
}

/* ==============================================
    facility
============================================== */
#facility li + li {
    margin-top: 1em;

}

/* ==============================================
    pricing
============================================== */
#pricing table {
    width: 100%;
    margin-bottom: 0.5em;
}
#pricing th,
#pricing td {
    width: 50%;
    padding: 0.5em;
    border: 1px solid #f29400;
    text-align: center;
    font-weight: 400;
    
}
#pricing thead th {
    background: #fef9ca;
}

/* ==============================================
    faq
============================================== */
#faq dt,
#faq dd {
    position: relative;
    line-height: 1.25;
}
#faq dt {
    margin-bottom: 1.1em;
    padding: 1em 3.2em 1em 4.6em;
    border: 1px solid #f39800;
    border-radius: 2em;
    font-size: 1.125em;
    cursor: pointer;
}
#faq dt::after {
    position: absolute;
    top: 50%;
    right: 1.38em;
    transform: translateY(-50%);
    content: "";
    display: block;
    width: 1em;
    height: 0.83em;
    background: #f8a6c9;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: all .4s;
}
#faq dt.is_open::after {
    transform: translateY(-50%) rotate(180deg);
}
#faq dd {
    display: none;
    width: 100%;
    max-width: 1115px;
    margin: 0 auto 40px;
    padding: 1.375em;
    padding-left: 5em;
    background: #fef9ca;
}
#faq dt span,
#faq dd span {
    position: absolute;
    left: 0.9em;
    margin-top: -0.25em;
    font-size: 22px;
    color: #e83f93;
    font-weight: 500;
}
@media screen and (max-width: 700px) {
    #faq dt {
        padding-left: 4em;
    }
    #faq dd {
        padding-left: 4.5em;
    }
    #faq dt span,
    #faq dd span {
        margin-top: -0.15em;
        font-size: 18px;
    }
}
@media screen and (max-width: 500px) {
    #faq dt {
        padding-left: 3.6em;
    }
    #faq dd {
        padding-left: 4.2em;
    }
    #faq dt span,
    #faq dd span {
        font-size: 16px;
    }
}

#faq .box {
    margin-top: 80px;
}
#faq .btn a {
    padding: 1em;
    font-size: 20px;
}
#faq .btn a::before {
    margin-right: 1.3em;
    background-image: url("image/service_download.svg")
}
@media screen and (max-width: 700px) {
    #faq .box {
        margin-top: clamp(3.125rem, 0.625rem + 10vw, 5rem);
    }
    #faq .btn a {
        font-size: clamp(1rem, 0.712rem + 1.23vw, 1.25rem);
    } 
}

/* ==============================================
    howtouse
============================================== */
#howtouse .btn {
    margin-top: 1.5em;
}
#howtouse .btn a {
    max-width: 320px;
    padding: 0.7em 0;
    border-color: #f39800;
    font-size: 1.125em;
}
#howtouse .btn a::before {
    content: none;
}



/* ==============================================
    download
============================================== */
@media screen and (min-width: 401px) {
    #download h2 br {
        display: none;
    }
}
#download .btn li + li {
    margin-top: 1.25em;
}
#download .btn a {
    padding-left: 2em;
    text-align: left;
}
#download .btn a::before {
    background-image: url("image/file_pdf.svg")
}