@charset "UTF-8";

/* ===================
mainVisual
===================== */


.hiroba__name {
    margin-top: -40px;
    color:var(--primary-Orange,#F19625);
    text-align: center;
    font-family: "Zen Maru Gothic";
    font-size: 2.4rem;
    font-weight: 700;
}

.hiroba__mainTxt {
    margin-top: 27px;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.7;
}

.hirobaImg__group {
    text-align: center;
    padding: 30px 10% 0;
    position: relative;
}

.hiroba__photo2 {
    display: block;
    margin: 20px 0;
    margin-left: auto;
    width: 60%;
}

.hirobaImg__group::before {
    position: absolute;
    content: '';
    display: block;
    width: 45%;
    height: 30%;
    background-image: url(../images/hiroba_photoIllust.png);
    top: 35%;
    left: 0px;
    background-repeat: no-repeat;
    background-size: contain;
}

.hiroba__photo3 {
    width: 86%;
}

.hiroba__commentIllustSP {
    display: block;
    margin: 36px auto 0;
    width: 50%;
    max-width: 200px;
}

.hiroba__commentIllustPC {
    display: none;
}

.mainVisual {
    width: 100%;
}

/* mainVisual pc */
@media screen and (min-width:769px) {

    .mainVisual {
        width: 100%;
    }

    .mainVisual__title {
        position: relative;
    }

    .mainVisual__title::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 435px;
        background-image: url(../images/hirobaPC_mainBG.png);
        top: 0px;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .hiroba__name {
        margin-top: -30px;
        font-size: 4.8rem;
    }
    
    .hiroba__mainTxt {
        width: 80%;
        margin: 30px auto 60px;
        font-size: 2.4rem;
    }

    .spBr {
        display: none;
    }
    
    .hiroba__photo1{
        width: 100%;
    }

    .hirobaImg__group {
        padding: 0;
    }

    .hirobaImg__item1 {
        width: 56%;
    }

    .hirobaImg__PC1 {
        display: flex;
        padding: 40px 0px;
        justify-content: center;
        gap: 40px;
    }

    .hiroba__commentIllustPC {
        display: block;
        width: 25%;
    }

    .hiroba__commentIllustSP {
        display: none;
    }

    .hirobaImg__item2 {
        width: 50%;
    }

    .hirobaImg__item3 {
        width: 40%;
    }


    .hiroba__photo2{
        position: static;
        margin: 0;
        width: 100%;
    }
    
    .hirobaImg__group::before {
        display: none;
    }
    
    .hirobaImg__PC2 {
        display: flex;
        padding-bottom: 40px;
        flex-direction:row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 50px;
        padding: 0 15%;
    }
    .hiroba__photo3 {
        width: 100%;
    }
    
    .hiroba__commentIllust {
        display: block;
        margin: 36px auto 0;
        width: 50%;
        max-width: 250px;
    }

}/* mainVisual pc */

/* ===================
information
===================== */

.en--kawawa {
    color: #F19625;
}

.info__group {
    margin: 0 auto;
    width: 87%;
    display: flex;
    padding: 40px 3%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    border-radius: 20px;
    background-color: #FFF;
}

.info__item {
    width: 100%;
    display: flex;
    padding: 10px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-top: 1px dashed #e2dbd8;
}

.info__email {
    width: 50%;
}

.info__email.copied {
    width: 98px;
}

.note--mail {
    margin-top: 5px;
}

.hiroba__email.copied {
    width: 98px;
}

.info--email {
    display: flex;
    flex-direction: column;
}

.info__itemLast {
    border-top: none;
}

.info__item:last-of-type {
    border-bottom:  1px dashed #e2dbd8;
}

.info__title {
    font-size: 1.6rem;
    font-weight: 500;
}

.info__txt {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7;
}

.info__note {
    font-size: 1.2rem;
}

.how__group {
    display: flex;
    padding: 40px 0px 80px;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.how__group::after {
    content: '';
    display: block;
    width: 162px;
    height: 145px;
    position: absolute;
    background-image: url(../images/hirobaSP_howBG.png);
    background-repeat: no-repeat;
    background-size: contain;
    left: 0px;
    bottom: 0px;
    z-index: -10;
}

.how__first, .how__second {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.how__icon {
    width: 93px;
    height: 70px;
}

.how__second {
    margin-top: 20px;
}

.how__txt {
    margin-top: 12px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7;
}

.topic--promise {
    background-color: #FBE374;
    margin: 0 auto;
    padding: 40px 0;
}

.topic__wave, .topic__waveImg {
    width: 100%;
}

.promise__group {
    background-color: #FBE374;
    display: flex;
    padding-bottom: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.promise__item {
    width: 280.5px;
    height: 280.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background-image: url(../images/promiseSP_BG1.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.promise__item:nth-of-type(2) {
    background-image: url(../images/promiseSP_BG2.png);
    width: 280.5px;
    height: 284px;
}

.promise__item:last-of-type {
    background-image: url(../images/promiseSP_BG3N.png);
    width: 289px;
}

.promise__title {
    margin: 64px auto 0;
    font-family: "Zen Maru Gothic";
    font-size: 2rem;
    font-weight: 600;
}

.title--orange{
    color: var(--primary-Orange,#F19625);
}
    
.title--pink {
    color: var(--primary-Pink,#EF3E57);
}

.title--green {
    color: var(--primary-Green,#2AB27B);
}

.promise__txt {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
}

.promise__hope {
    background-color: #FBE374;
}

.promise__txt2 {
    padding: 20px 0 60px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7;
}

/* information pc */
@media screen and (min-width:769px) {

    .section--information {
        position: relative;
    }

    .section--information::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 420px;
        background-image: url(../images/hirobaPC_infoTitleBG.png);
        top: 0px;
        background-repeat: no-repeat;
        background-size: 100%;
        z-index: -20;
    }

    .how__group {
        position: relative;
    }

    .how__group::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 550px;
        background-image: url(../images/hirobaPC_howBG.png);
        top: 0px;
        background-repeat: no-repeat;
        background-size: 100%;
        z-index: -10;
    }

    .info__group {
        margin: 40px auto;
        width: 72%;
        max-width: 1500px;
        padding: 72px 7%;
    }

    .info__item {
        padding: 16px 0;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 13%;
    }

    .info__email {
        width: 190px;
    }

    .info__title {
        width: 150px;
        padding-left: 40px;
        text-align: start;
        font-size: 1.8rem;
    }
    
    .info__txt {
        font-size: 1.8rem;
        width: 70%;
    }

    .info__note {
        font-size: 1.6rem;
    }

    .how__group {
        padding: 40px 0px 60px;
    }

    .how__first ,.how__second{
        width: 77%;
        max-width: 1200px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 20px;
        gap: 20px;
    }

    .how__second {
        margin-top: 56px;
    }

    .how__icon {
        min-width: 235px;
        height: 130px;
    }

    .how__txt {
        margin-top: 0;
        font-size: 2rem;
        font-weight: 400;
        text-align: left;
    }

    .topic--promise {
        position: relative;
    }

    .topic__waveImg {
        display: flex;
        vertical-align: top;
    }

    .promise {
        position: relative;
    }

    .promise::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 250px;
        background-image: url(../images/hirobaPC_promiseLeft.png);
        top: 0px;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 20;
    }

    .promise__hope {
        background-color:#FBE374;
    }

    .promise__txt2 {
        display: block;
        margin: 0 auto;
        width: 90%;
        position: relative;
    }

    .promise__txt2::after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 220px;
        background-image: url(../images/hirobaPC_promiseRight.png);
        top: 0px;
        background-repeat: no-repeat;
        background-size: 100%;
    }


    .promise__group {
        padding: 40px 1%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1%;
    }

    .promise__txt2 {
        padding: 0 0 122px;
        font-size: 2.4rem;
    }

    .promise__title {
        font-size: 3.2rem;
    }

    .promise__txt {
        font-size: 1.6rem;
    }

    .promise__item {
        background-image: url(../images/promisePC_BG1.png);
        width: 340px;
        height: 340px;
    }
    
    .promise__item:nth-of-type(2) {
        background-image: url(../images/promisePC_BG2.png);
        width: 340px;
        height: 344px;
    }
    
    .promise__item:last-of-type {
        background-image: url(../images/promisePC_BG3.png);
        width: 344px;
        height: 342px;
    }

}/* information pc */

@media screen and (min-width: 768px) and (max-width: 1025px){ 
    .info__group {
        width: 90%;
    }
}

/* ===================
support
===================== */

.section--support {
    position: relative;
}

.support__txt {
    display: block;
    margin: 25px auto;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7; 
}

/* support pc */
@media screen and (min-width:769px) {

    .section--support::after {
        content: '';
        display: block;
        width: 100%;
        height: 250px;
        position: absolute;
        background-image: url(../images/hirobaPC_supportLeft.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: 0px;
    }

    .info--support {
        width: 90%;
    }

    .support__txt {
        margin: 64px auto 0;
        font-size: 2.4rem;
    }

}/* support pc */

/* ===================
refresh
===================== */

.refresh__drive {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
}

.topic--refresh {
    margin: 0 auto 40px;
}

.title--white {
    margin-top: -20px;
}

.refresh__calender {
    display: block;
    margin: 0 auto;
    width: 90%;
    height: 300px;
}

.refresh__illustImg {
    width: 100%;
}

/* refresh pc */
@media screen and (min-width:769px) {
.refresh__calender {
    margin-bottom: 80px;
    width: 76%;
    height: 723px;
}

.refresh__drive {
    margin-top: 40px;
}

}

/* ===================
news
===================== */

.section--news {
    padding-bottom: 30px;
}

.title--news::after {
    width: 200px;
}

/* news pc */
@media screen and (min-width:769px) {

    .section--news {
        margin-top: 50px;
        padding-bottom: 72px;
    }

    .section--news {
        position: relative;
    }

    .section--news::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 246px;
        background-image: url(../images/hirobaPC_newsLeft.png);
        top: 0px;
        background-repeat: no-repeat;
        background-size: contain;
    }
}/* news pc */

/* ===================
accsess
===================== */

.title--access::after {
    width: 200px;
}

.accsess--train {
    margin: 10px 0 0;
    display: flex;
    justify-content: center;
}

.accsess--txt {
    margin: 0;
    position: relative;
}

.accsess--txt::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    background-image: url(../images/accsess_trainIcon.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    top: 1px;
    left: -20px;
}

.accsess__group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.accsess__adress {
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
}

.accsess__btn {
    width: 76%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.btn__access {
    text-align: center;
    width: 50%;
    padding: 8px 0px 8px 15px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.7;
    border-radius: 20px;
    border: 2px solid var(--primary-brown, #5D321B);
}

.btn--map {
    position: relative;
}

.btn--map::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    background-image: url(../images/accsess_mapIcon.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    top: 11px;
    left: 14px;
}

.btn--tel {
    position: relative;
}

.btn--tel::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    background-image: url(../images/accsess_phoneIcon.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    top: 10px;
    left: 8px;
}

.accsess__txt {
    font-size: 1.2rem;
    font-weight: 500;
}

.accsess--note {
    text-align: center;
    margin-top: 0px;
    font-weight: 400;
}

.accsess__note {
    font-weight: 400;
}

.accsess__photo {
    margin: 20px auto 0;
    width: 93%;
}

.accsessImg__item {
    border-radius: 20px;
    margin-bottom: 8px;
    
}

.accsess__imgTxt {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 400;
}

.contact__group {
    margin: 20px auto 0;
    width: 90%;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 11px;
    background-image: url(../images/hirobaSP_snsKawawaBG.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.hiroba__contact {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.contact__txt {
    align-items: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7;
}

.sns__txt {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7;
}

.sns {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hiroba__email {
    width: 206px;
}

/* accsess pc */
@media screen and (min-width:769px) {

    .accsess__group {
        width: 51%;
    }

    .section--accsess {
        position: relative;
    }

    .section--accsess::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 350px;
        background-image: url(../images/hirobaPC_accsessRight.png);
        top: 0px;
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .accsess--train {
        margin: 20px 0 0;
    }

    .accsess--txt::before {
        width: 40px;
        height: 40px;
        top: 0px;
        left: -40px;
    }

    .accsess__img {
        display: flex;
        flex-direction: column;
    }

    .accsess__groupPC {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        margin: 0 10%;
        gap: 5%;
    }

    .accsess__group {
        align-items: flex-start;
        gap: 0px;
    }

    .accsess__img {
        margin: 0;
        width: 100%;
        font-size: 1.6rem;
    }

    .accsess__photo {
        margin: 0;
        width: 48%;
    }

    .accsess__adress {
        text-align: start;
        font-size: 2.4rem;
    }

    .accsess__btn {
        margin-top: 20px;
        width: 76%;
        flex-direction: column;
        gap: 8px;
    }

    .btn__access {
        font-size: 1.8rem;
        width: 142px;
        height: 26px;
        padding: 0 0 0 26px;
        border-radius: 0px;
        border: none;
        text-align:start;
    }
    
    .btn--map::before {
        width: 24px;
        height: 24px;
        top: 5px;
        left: 0px;
    }
    
    .btn--tel::before {
        width: 24px;
        height: 24px;
        top: 2px;
        left: -3px;
    }

    .accsess__txt {
        margin-top: 24px;
        font-size: 1.6rem;
    }

    .accsess--note {
        text-align: start;
        margin-top: 0px;
    }

    .contact__group {
        margin: 112px auto 0;
        width: 40%;
        height: 240px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 11px;
        background-image: url(../images/hirobaPC_snsKawawaBG.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .contact__txt {
        font-size: 2.4rem;
    }

    .hiroba__email {
        width: 227px;
    }

    .sns__txt {
        font-size: 1.6rem;
    }

    .accsess__imgTxt {
        font-size: 1.6rem;
        font-weight: 400;
    }
}/* accsess pc */