body {
    font-family: "Noto Serif JP", serif;
    font-size: 1vw;
    font-weight: bold;
    overflow-x: hidden;
}
/* ------------------------------------------------------
header-pc
------------------------------------------------------ */
.header-pc-upper-area {
    display: flex;
    align-items: center;
    width: 100%;
}
.header-pc-upper-img-area {
    display: flex;
    justify-content: space-between;
    margin-left: 2vw;
    margin-right: 2vw;
    width: 78vw;
}
.header-img-wrap h2 {
    font-size: 0.7vw;
}
.header-img-wrap img {
    margin-top: 2%;
    width: 16vw;
}
#store-icon-img {
    width: 10vw;
}
#header-upper-mail-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 6vw;
    height: 5vw;
    color: #fff;
    background-color: #fea059;
}
#header-upper-mail-btn img {
    width: 2vw;
}
#header-upper-mail-btn p {
    margin-top: 3%;
    font-size: 0.9vw;
}
#header-upper-tel-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12vw;
    height: 5vw;
    text-align: center;
    font-size: 1.3vw;
    color: #fff;
    background-color: #f18cc0;
}
.header-pc-bottom-area {
    width: 100%;
    background-color: #0d8adf;
}
.header-pc-bottom-area ul {
    display: flex;
    justify-content: space-around;
    color: #fff;
}
.header-pc-bottom-area ul li {
    text-align: center;
    cursor: pointer;
    line-height: 1.3;
}
.header-pc-bottom-area ul li a {
    display: block;
    padding: 1vw 3vw;
    text-align: center;
    line-height: 1.3;
    color: #fff;
}
.header-pc-bottom-area ul li a span {
    display: block;
    font-size: 0.6vw;
}
/* ------------------------------------------------------
top-img-wrap
------------------------------------------------------ */
.top-img-wrap {
    position: relative;
}
.top-img-area img {
    width: 100%;
}
.news-area {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 2.5vw 0;
    width: 90vw;
    background-color: rgba(255, 255, 255, 0.9); 
}
#topics-text {
    width: 10vw;
    text-align: center;
    font-size: 1.3vw;
}
.news-wrap {
    width: 39vw;
}
.active-wrap {
    margin-right: 2vw;
    width: 39vw;
}
.news-item {
    margin-bottom: 3%;
}
.active-item {
    margin-bottom: 3%;
}
.news-wrap > a:last-child .news-item {
    margin-bottom: 0;
}
.active-wrap > a:last-child .active-item {
    margin-bottom: 0;
}
.news-meta {
    display: flex;
    align-items: center;
    margin-bottom: 1%;
}
.news-tag {
    margin-right: 1vw;
    padding: 0.3vw 1.5vw;
    font-size: 0.8vw;
    color: #fff;
    background-color: #fea059;
}
.active-tag {
    margin-right: 1vw;
    padding: 0.3vw 1.5vw;
    font-size: 0.8vw;
    color: #fff;
    background-color: #f18cc0;
}
/* ------------------------------------------------------
card-area
------------------------------------------------------ */
.card-area {
    margin: 10% auto;
    width: 80vw;
}
.right-img-area {
    display: flex;
    align-items: center;
}
.right-text-area {
    margin-right: 3vw;
    width: 47vw;
}
.right-text-area h2 {
    margin-bottom: 5%;
    font-size: 1.5vw;
    color: #0d8adf;
}
.right-text-area p {
    font-size: 1.2vw;
    line-height: 1.5;
}
.right-text-area a {
    display: block;
    width: 100%;
    margin-top: 8%;
    text-align: right;
    font-size: 1.3vw;
}
.right-img-area img {
    width: 30vw;
}
.legt-img-area {
    display: flex;
    align-items: center;
    margin-left: 5vw;
}
.left-text-area {
    margin-left: 3vw;
    width: 47vw;
}
.left-img-area img {
    width: 25vw;
}
.left-text-area h2 {
    margin-bottom: 5%;
    font-size: 1.5vw;
    color: #0d8adf;
}
.left-text-area p {
    font-size: 1.2vw;
    line-height: 1.5;
}
.left-text-area a {
    display: block;
    width: 100%;
    margin-top: 8%;
    text-align: right;
    font-size: 1.3vw;
}
.card-area-magin-bottom {
    margin-bottom: 8%;
}
/* ------------------------------------------------------
wrap01
------------------------------------------------------ */
.wrap01 {
    display: flex;
    justify-content: space-between;
    padding: 5vw 12vw;
    width: 100%;
    background-color: #f4f1f1;
}
.wrap01 a img {
    width: 35.5vw;
}
/* ------------------------------------------------------
wrap02
------------------------------------------------------ */
.wrap02 {
    margin: 10% auto 5% auto;
    width: 80vw;
}
.wrap02-card-area {
    display: flex;
    align-items: center;
    padding: 2vw 3vw;
    border: solid 2px #0d8adf;
}
.wrap02-card-text-area {
    width: 35.5vw;
}
.wrap02-card-text-area h2 {
    margin-bottom: 5%;
    font-size: 1.5vw;
    color: #0d8adf;
}
.wrap02-card-text-area p {
    font-size: 1.2vw;
    line-height: 1.5;
}
.wrap02-card-text-area a {
    display: block;
    width: 100%;
    margin-top: 8%;
    text-align: right;
    font-size: 1.3vw;
}
.wrap02-card-area img {
    margin-left: 3vw;
    width: 35.5vw;
}
.wrap02-card-area-margin-bottom {
    margin-bottom: 2%;
}
/* ------------------------------------------------------
banner-area
------------------------------------------------------ */
.banner-area {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 10% auto;
    width: 80vw;
}
.banner-area img {
    width: 39vw;
}
/* ------------------------------------------------------
footer
------------------------------------------------------ */
footer {
    padding: 5vw 5vw 1vw 5vw;
    width: 100%;
    border-top: solid 2px #333;
    border-bottom: solid 2px #0d8adf;
}
.footer-wrap {
    margin-bottom: 5vw;
    font-size: 1.2vw;
}
.footer-wrap img {
    margin-bottom: 1%;
    width: 20vw;
}
.footer-area ul {
    display: flex;
    flex-wrap: wrap;
}
.footer-area ul li {
    padding-left: 1.2vw;
    margin-bottom: 1.5vw;
    width: 17.84vw;
    font-size: 1.2vw;
    border-left: solid 0.5vw #0d8adf;
}
#copyright-text {
    margin-top: 3.5vw;
    text-align: center;
}