@charset "utf-8";
/* areaBox ========== */
.areaBox{
    width: 100%;
}
.areaBox__inner{
    width: 100%;
}
.areaBox__list{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.areaBox__item{
    width: 100%;
    min-height: 110px;
    display: flex;
    position: relative;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
/* 画像領域もクリック可能にする */
.areaBox__link::before{
    content: "";
    display: inline-block;
    width: 40%;
    min-width: 30vmin;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px 0 0 8px;
    flex-shrink: 0;
}
.areaBox__item::after{
    content: "\f105";
    font-family: FontAwesome;
    font-size: 2.0rem;
    font-style: normal;
    font-weight: normal;
    color: var(--link-color);
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translate(0, -50%);
    pointer-events: none;
}
.areaBox__itemInner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 32px 16px 16px;
}
/* .areaBox__item--hokkaido .areaBox__link::before{

} */
.areaBox__item--kanto .areaBox__link::before{
    background-image: url(/images/top/top_area_kanto.webp);
}
.areaBox__item--koshinetsu .areaBox__link::before{
    background-image: url(/images/top/top_area_koshinetsu.webp);
}
.areaBox__item--tokai .areaBox__link::before{
    background-image: url(/images/top/top_area_tokai.webp);
    background-position: bottom right;
}
/* .areaBox__item--chugoku .areaBox__link::before{

} */
.areaBox__item--shikoku .areaBox__link::before{
    background-image: url(/images/top/top_area_shikoku.webp);
}
.areaBox__item--kansai .areaBox__link::before{
    background-image: url(/images/top/top_area_kansai.webp);
}
.areaBox__item--kyushu .areaBox__link::before{
    background-image: url(/images/top/top_area_kyushu.webp);
}
.areaBox__item--tohoku .areaBox__link::before{
    background-image: url(/images/top/top_area_tohoku.webp);
}
.areaBox__link{
    width: 100%;
    height: 100%;
    display: flex;
    text-decoration: none;
    padding: 0;
}
.areaBox__txt{
    font-size: clamp(1.4rem, 1.31rem + 0.24vw, 1.6rem);
    color: #333333;
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.5em;
    margin-top: 0.2em;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.areaBox__txt span::after{
    content: "/";
    padding-left: 0.5em;
}
.areaBox__txt span:last-of-type::after{
    content: "";
    padding-left: 0;
}
.areaBox__txtHead{
    font-size: clamp(1.6rem, 1.42rem + 0.48vw, 2.0rem);
    font-weight: bold;
    margin-top: -0.2em;
}
.areaBox__img{
    width: 100%;
    max-width: 180px;
    border-radius: 16px 0 0 16px;
}
.areaBox__txtWrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 16px;
}
@media screen and (min-width: 600px), print {
    .areaBox__item::after{
        font-size: 2.4rem;
        right: 16px;
    }
}
@media screen and (min-width:768px),print {
    .areaBox__list{
        gap: 24px;
    }
    .areaBox__item{
        width: calc(50% - 12px);
        min-height: 140px;
        border-radius: 16px;
    }
    .areaBox__link::before{
        width: 30%;
        min-width: 18vmin;
        border-radius: 16px 0 0 16px;
    }
    .areaBox__itemInner{
        padding: 16px 40px 16px 24px;
    }
}
@media screen and (min-width:960px),print {

}
@media (hover: hover) {
    .areaBox__item:hover{
        transform: translateY(-4px);
        box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.1);
    }
}


/* guideBox ========== */
.guideBox{
    width: 100%;
}
.guideBox__inner{
    width: 100%;
}
.guideBox__list{
    display: flex;
    flex-direction: column;
    gap: 16px 0;
}
.guideBox__item{
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.guideBox__link{
    width: 100%;
    height: 100%;
    display: flex;
    text-decoration: none;
}
.guideBox__img{
    width: 100%;
    max-width: 90px;
    min-width: 90px;
    display: flex;
    align-items: center;
    border-radius: 16px 0 0 16px;
    overflow: hidden;
}
.guideBox__img > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.guideBox__txtWrap{
    width: calc(100% - 90px);
    padding: 16px;
}
.guideBox__txtHead{
    font-weight: bold;
    color: var(--link-color);
    text-decoration: underline;
}
.guideBox__txt{
    color: #333333;
    margin-top: 0.2em;
}
@media screen and (min-width: 600px), print {
    .guideBox__list{
        flex-direction: row;
        gap: 16px;
    }
    .guideBox__item{
        width: calc(50% - 8px);
    }
}
@media screen and (min-width:768px),print {
    .guideBox__list{
        gap: 24px;
    }
    .guideBox__item{
        width: calc(50% - 12px);
    }
    .guideBox__img{
        width: 100%;
        max-width: 180px;
        border-radius: 16px 0 0 16px;
    }
    .guideBox__txtWrap{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 32px 16px;
    }
    .guideBox__txtHead{
        font-size: 1.6rem;
    }
}
@media screen and (min-width:960px),print {
    .guideBox__list{
        gap: 32px;
    }
    .guideBox__item{
        width: calc(50% - 16px);
    }
}
@media (hover: hover) {
    .guideBox__item:hover{
        transform: translateY(-4px);
        box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.1);
    }
}


/* infoBox ========== */
.infoBox{
    font-size: 1.4rem;
    width: 100%;
}
.infoBox__inner{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px 0;
}
.infoBox__outline{
    padding: 16px;
    border: 1px solid #E5E5E5;
    border-radius: 16px;
}
.newsBox__list{
    width: 100%;
}
.newsBox__item{
    display: flex;
    gap: 0 8px;
    margin-bottom: 1.2em;
    padding-bottom: 1.2em;
    border-bottom: 1px solid #E5E5E5;
}
.newsBox__item:nth-child(n+4){
    display: none;
}
.newsBox__itemTime{
    white-space: nowrap;
}
.newsBox__itemTxt{
    color: var(--link-color);
    text-decoration: underline;
}
.infoBox__btn{
    text-align: left;
    margin: 24px 0 0;
}
.faqBox__list{
    width: 100%;
}
.faqBox__item{
    display: flex;
    gap: 0 8px;
    margin-bottom: 1.2em;
    padding-bottom: 1.2em;
    border-bottom: 1px solid #E5E5E5;
}
.faqBox__itemTxt{
    width: 100%;
}
.faqBox__itemTxtQ{
    color: var(--link-color);
    width: 100%;
    position: relative;
    padding-left: 2rem;
    padding-right: 2rem;
    text-decoration: underline;
    cursor: pointer;
}
.faqBox__itemTxtQ::before{
    content: "Q.";
    color: #333333;
    font-weight: bold;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.faqBox__itemTxtQ::after{
    content: "\f067";
    font-family: FontAwesome;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}
.faqBox__itemTxtQ--on::after{
    content: "\f068";
}
.faqBox__itemTxtA{
    display: none;
    margin-top: 1.2em;
}
.faqBox__itemTxtA--bold{
    font-weight: bold;
}
.faqBox__itemTxtBg{
    display: inline-block;
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #cccccc;
    background-color: #F4F4F4;
    border-radius: 8px;
}
@media screen and (min-width:768px),print {
    .newsBox, .faqBox{
        width: 50%;
    }
    .infoBox__inner{
        align-items: flex-start;
        flex-direction: row;
        gap: 32px;
    }
    .infoBox__outline{
        padding: 24px;
    }
}
@media (hover: hover) {
    .newsBox__itemTxt:hover, .faqBox__itemTxtQ:hover{
        color: #333333;
        text-decoration: none;
    }
}