@charset "UTF-8";
body {
    background-color: #fff;
    line-height: 1.5;
    font-size: 1.6rem;
    /* footer最下部固定 */
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
.l-main {
    max-width: 90%;
    width: 100%;
    margin: 0 auto;
    padding: 30px 0 20px;
    /* footer最下部固定 */
    flex: 1;
}
@media only screen and (min-width: 960px) {
    .l-main {max-width: 800px;}
}
@media only screen and (min-width: 1024px) {
    .l-main {max-width: 960px;}
}

/******* 見出し *******/
.c-title {
    margin-bottom: 1em;
    font-size: 1.6rem;
}
.c-title__inner {
    background: linear-gradient(transparent 50%, #ededed 50%);
    border: 1px solid #00824d;
    border-radius: 5px;
    padding: 0.25em 0.25em 0.25em 1.25em;
    display: block;
    position: relative;
}
.c-title__inner::before {
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    background-color: #00824d;
    width: 5px;
    height: 70%;
    border-radius: 5px;
}

/******* 見出し_サブ（都道府県名） *******/
.c-title--sub .c-title__inner {
    font-size: 1.6rem;
}
.c-title--sub .c-title__inner {
    border: 1px solid #c0c0c0;
}

/******* 見出し_お探しの地域をお選びください *******/
.c-areaTitle {
    font-size: 1.5rem;
    color: #00824d;
    border-bottom: 3px solid #bdbdbd;
}
.c-areaTitle__inner {
    position: relative;
    padding: 0.25em 1em;
    display: inline-block;
}
.c-areaTitle__inner::before {
    position: absolute;
    content: '';
    left: 0;
    bottom: -3px; /* borderの太さ分、下げる */
    width: 100%;
    border-bottom: 3px solid #00824d;
}

/******* エリアリスト *******/
.p-area-container {
    display: none;
}
.p-areaList {
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    margin-bottom: 10%;
}
@media only screen and (min-width: 960px) {
    .p-areaList {margin-bottom: 6rem}
}
.p-areaList__list {
    padding: 5%;
    display: flex;
    flex-wrap: wrap;
    gap: 1em 0;
}
@media only screen and (min-width: 960px) {
    .p-areaList__list {padding: 3rem 6rem;}
}
.p-areaList__item3 {
    max-width: calc(100% / 3);
    width: 100%;
    font-size: 1.3rem;
    color: #073e6b;
    text-decoration: underline;
    cursor: pointer;
    padding-left: 1em;
    background: url(../images/arr_n.gif) no-repeat 0 6px;
}
@media only screen and (min-width: 520px) {
    .p-areaList__item3 {
        max-width: calc(100% / 4);
        font-size: 1.5rem;
        padding-left: 1.25em;
    }
}
.p-areaList__item3:hover {
    text-decoration: none;
}

.p-areaList__item {
    max-width: calc(100% / 2);
    width: 100%;
    font-size: 1.3rem;
    color: #073e6b;
    text-decoration: underline;
    cursor: pointer;
    padding-left: 1em;
    background: url(../images/arr_n.gif) no-repeat 0 6px;
}
@media only screen and (min-width: 520px) {
    .p-areaList__item {
        max-width: calc(100% / 4);
        font-size: 1.5rem;
        padding-left: 1.25em;
    }
}
.p-areaList__item:hover {
    text-decoration: none;
}

.p-areaList__item2 {
    max-width: calc(100% / 1);
    width: 100%;
    font-size: 1.5rem;
    color: #073e6b;
    text-decoration: underline;
    cursor: pointer;
    padding-left: 1em;
    /* background: url(../images/arr_n.gif) no-repeat 0 6px; */
}
@media only screen and (min-width: 520px) {
    .p-areaList__item2 {
        max-width: calc(100% / 3);
        font-size: 1.5rem;
        padding-left: 1.25em;
    }
}
.p-areaList__item2:hover {
    text-decoration: none;
}

.p-areashop-container {
    display: none;
}
.pnavi {
    clear: none;
    width: 95%;
    margin: 0 auto 14px 0;
    padding: 8px 0 0;
    font-size: 13px;
}
@media only screen and (min-width: 960px) {
.pnavi {
    clear: none;
    width: 920px;
    margin: 0 auto 14px 0;
    padding: 8px 0 0;
    font-size: 13px;
}}
