@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
.lv2_main_img > img {
    max-width: 480px;
    width: 50%;
    position: absolute;
    bottom: 0;
    right: 6%;
}
.area_read {
    padding: 120px 20px 120px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.area_read p {
    text-align: center;
    font-size: 22px;
    color: #453E8D;
    font-weight: bold;
    line-height: 1.75;
}
.area_read p .tab,
.area_box p .tab{
    display: block;
}
.area_inner{
    max-width: 1440px;
    margin: 0 auto;
}
.area_box{
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 120px;
    display: flex;
    gap: 64px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.area_box img{
    width: 50%;
    max-width: 640px;
}
.area_box .text{
    flex: 1;
}

/* area_tab */
.area_tab_section{
    background: #F7F7FA;
    padding: 120px 16px;
}
.area_tab{
    max-width: 1440px;
    margin: 0 auto;
}
.tab {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
.tab-buttons {
    display: flex;
  }
.tab-buttons li {
    width: 240px;
    font-size: 24px;
    color: #fff;
    padding: 10px 10px 0;
    text-align: center;
    background: #fff;
    border: 4px solid #fff;
    border-bottom: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
    border-radius: 30px 30px 0 0;
    position: relative;
}
.tab-buttons li span{
    display: block;
    background: #688EC9;
    padding: 16px 24px;
    border-radius: 22px 22px 0 0;
}
.tab-buttons li:hover,
.tab-buttons li.active {
    border: 4px solid #453E8D;
    border-bottom: none;
}
.tab-buttons li.active::before{
    position: absolute;
    bottom: -4px;
    right: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: #fff;
}
.tab-buttons li.active span,
.tab-buttons li.active span {
    background:  #453E8D;
}
.tab-contents .content {
    display: none;
    padding: 80px 40px;
    animation: fadeIn 0.3s ease-in-out;
    border: 4px solid #453E8D;
    background: #fff;
}
.tab-contents .content.nigata{
    background: #fff url(../img/area/content_bk-nigata.png) no-repeat right 5% top 2%;
    background-size: 30%;
}
.tab-contents .content.akita{
    background: #fff url(../img/area/content_bk-akita.png) no-repeat right 5% top 2%;
    background-size: 23%;
}
.tab-contents .content.tokyo{
    background: #fff url(../img/area/content_bk-tokyo.png) no-repeat right 5% top 2%;
    background-size: 40%;
}
.tab-contents .content.chiba{
    background: #fff url(../img/area/content_bk-chiba.png) no-repeat right 5% top 2%;
    background-size: 30%;
}
.tab-contents .content.active {
    display: block;
}
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
.tab-contents h2{
    font-size: 32px;
    text-align: center;
    line-height: 1.25;
    margin-bottom: 64px;
}
.tab-contents h2 span{
    color: #453E8D;
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 60px;
}
.tab-cont_title {
    font-size: 28px;
    background: #fff;
    margin-bottom: 48px;
    position: relative;
}
.tab-cont_title::before{
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    background: #453E8D;
    position: absolute;
    top: 50%;
}
.tab-cont_title span{
    display: inline-block;
    background: #fff;
    padding-right: 16px;
    position: relative;
}
.tab-cont_title img {
    max-width: 40px;
    vertical-align: text-bottom;
    margin-right: 6px;
}
/* content_workplace */
.workplace_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 24px;
}
.workplace_list > li{
    width: 30%;
    max-width: 400px;
    min-width: 300px;
}
.workplace_list > li h4{
    color: #453E8D;
    font-size: 24px;
    border-left: 6px solid #EBD259;
    padding-left: 8px;
    line-height: 1;
}
.tag_work {
    display: flex;
    gap: 4px;
}
.tag_work li{
    font-size: 13px;
    background: #F2F1F7;
    border-radius: 50px;
    padding: 6px 16px;
    margin: 12px 0 16px;
    text-align: center;
}
.workplace_list > li p{
    margin-top: 16px;
    font-weight: normal;
}

/* content_voice */
.content_voice{
    border-radius: 30px;
    text-align: center;
    padding: 60px 24px 80px;
    margin: 80px auto 120px;
    position: relative;
    background: #FBF6DE url(../img/area/voice_bkimg_01.png) no-repeat left top 40px;
    background-size: 20%;
}
.content_voice::before {
    content: "";
    display: block;
    background: url(../img/top/about_bkimg01.png) no-repeat center;
    background-size: contain;
    width: 20%;
    height: 150px;
    position: absolute;
    right: -16px;
    top: 30px;
}
.content_voice::after {
    content: "";
    display: block;
    background: url(../img/area/voice_bkimg_02.png) no-repeat center;
    background-size: contain;
    width: 20%;
    height: 80px;
    position: absolute;
    left: -16px;
    bottom: 16px;
}
.content_voice .icon_voice{
    width: 54px;
}
.content_voice h3{
    font-size: 32px;
    color: #453E8D;
    margin-bottom: 54px;
}
.content_voice h3 span{
    color: #444444;
    font-size: 20px;
    position: relative;
    padding: 0 20px;
}
.content_voice h3 span::before,
.content_voice h3 span::after{
    content: "";
    display: block;
    width: 17px;
    height: 22px;
    position: absolute;
    top: 0;
}
.content_voice h3 span::before{
    background: url(../img/area/voice_title-left.png) no-repeat;
    background-size: contain;
    left: 0;
}
.content_voice h3 span::after{
    background: url(../img/area/voice_title-right.png) no-repeat;
    background-size: contain;
    right: 0;
}
.content_voice ul{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px 40px;
}
.content_voice li{
    background: #fff;
    border-radius: 45% 43% 35% 44% / 58% 44% 34% 40%;
    padding: 24px 0;
    min-width: 240px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content_voice li h4{
    color: #453E8D;
    font-size: 18px;
    background: url(../img/area/content_voice_title_bk.png) no-repeat center;
    background-size: contain;
    line-height: 40px;
}
.content_voice li p{
    font-size: 14px;
    font-weight: normal;
    text-align: center;
}
/* content_private */
.content_private ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}
.content_private li{
    width: 30%;
    max-width: 320px;
}
.content_private li p{
    font-weight: normal;
    margin-top: 24px;
}
@media print, screen and (max-width: 980px) {
    .area_read {
        padding: 60px 20px;
    }
    .area_read p{
        font-size: 18px;
    }
    .area_read p .tab,
    .area_box p .tab{
        display: none;
    }
    /* area_box */
    .area_box{
        gap: 40px;
    }
    .lv2_section_title {
        font-size: 32px;
    }
    .area_box .text{
        width: 80%;
        min-width: 330px;
        flex: none;
    }
    .workplace_list{
        justify-content: center;
    }
    /* area_tab_section */
    .tab-buttons li{
        width: 180px;
    }
    .content_private li {
        width: 45%;
        max-width: 320px;
    }
}
@media screen and (max-width: 768px) {
    /* area_box */
    .area_box img{
        width: 90%;
    }
    .tab-contents .content{
        padding: 80px 24px;
    }
    /* area_tab_section */
    .tab-buttons li{
        width: 25%;
    }
    .tab-contents h2 {
        font-size: 28px;
        margin-bottom: 56px;
    }
    .tab-cont_title{
        font-size: 24px;
    }
    .workplace_list > li {
        width: 100%;
        max-width: 400px;
        min-width: auto;
    }
    .content_voice::before {
        width: 28%;
        height: 150px;
        top: -8px;
    }
    .content_voice h3 {
        font-size: 28px;
    }
    
}


@media screen and (max-width: 580px) {
    .area_read br.tab{
        display: none;
    }
    .area_box,
    .area_tab_section{
        padding: 80px 16px;
    }
    .lv2_section_title {
        font-size: 28px;
    }
    .tab-cont_title img {
        max-width: 28px;
    }
     /* area_tab_section */
     .tab-buttons li{
        width: auto;
    }
    .tab-buttons li span{
        padding: 24px 24px;
        writing-mode: vertical-rl;
    }
    .workplace_list > li h4{
        font-size: 22px;
    }
    .content_voice h3 {
        font-size: 24px;
    }
    .content_voice h3 span{
        font-size: 18px;
    }
    .tab-cont_title{
        text-align: center;
    }
    .tab-cont_title span{
        padding-right: 0;
    }
    .tab-cont_title span img{
        display: block;  
        margin: 0 auto;      
    }
    .tab-cont_title::before{
        display: none;
    }
    .content_private li {
        width: 100%;
        max-width: 320px;
    }
}
@media screen and (max-width: 480px){
    .tab-cont_title {
        font-size: 22px;
    }
    .tab-buttons li{
        padding: 8px 8px 0;
    }
    .tab-buttons li span{
        padding: 24px 10px;
    }
    .tag_work li{
        font-size: 12px;
    }
    .tab-contents .content{
        padding: 80px 16px;
    }
    .content_voice h3 span{
        font-size: 16px;
    }
    /* content_voice */
    .content_voice li p .sp_br{
        display: none;
    }
}
@media screen and (max-width: 380px){
    .lv2_section_title {
        font-size: 26px;
    }
    .area_box, .area_tab_section{
        padding: 60px 8px;
    }
    .tag_work li{
        font-size: 11px;
    }
}