.stick-regular {
    font-family: "Stick", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.kiwi-maru-regular {
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
}

.kaisei-harunoumi-regular {
    font-family: "Kaisei HarunoUmi", serif;
    font-weight: 400;
    font-style: normal;
}

.oswald {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.teko {
    font-family: "Teko", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.m-plus-rounded-1c-regular {
    font-family: "M PLUS Rounded 1c", serif;
    font-weight: 400;
    font-style: normal;
}





/* アニメーション ****************************************************************************************/
@keyframes one {
    0% {
        stroke-dasharray: 0, 0, 0, 100;
    }

    25% {
        stroke-dasharray: 16.6666666667, 83.3333333333, 0, 0;
        /* (100/6),(100/6)*5,0,0 */
    }
}

@keyframes two {
    0% {
        stroke-dasharray: 0, 0, 0, 100;
    }

    50% {
        stroke-dasharray: 0, 16.6666666667, 16.6666666667, 66.6666666667;
        /* 0,(100/6),(100/6),(100/6)*4 */
    }
}

@keyframes three {
    0% {
        stroke-dasharray: 0, 0, 0, 100;
    }

    75% {
        stroke-dasharray: 0, 33.3333333333, 50, 25;
        /* 0,(100/6)*2,(100/6)+(100/4),(100/4) */
    }
}

@keyframes four {
    0% {
        stroke-dasharray: 0, 0, 0, 100;
    }

    100% {
        stroke-dasharray: 0, 75, 25, 0;
        /* 0,(100/4)*3,(100/4)*1,0 */
    }
}


/* リンクの微調整 *************************************************************************************************/
.list_li {
    width: 27%;
    height: 100px;
    align-items: center;
}

/* オフィス風景 *************************************************************************************************/
.office_block {
    width: 100%;
    margin-bottom: 5vw;
    padding: 2vw;
    border-radius: 1vw;
}

.o_tit_block,
.o_txt_block,
.o_pic_block {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5vw;
}

.o_tit_block {
    margin-bottom: 1vw;
    position: relative;
}

.backStr {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.o_tit_block p {
    font-size: 30px;
    font-weight: 600;
    margin-left: 1vw;
    position: relative;
    z-index: 2;
}

.backStr p {
    font-size: 50px;
    color: rgba(0, 0, 0, 0.1);
}

.o_txt_block p {
    background: linear-gradient(transparent 60%, rgba(0, 162, 255, 0.1) 60%);
    width: 10%;
    margin: 0% 20%;
    text-align: center;
    font-size: 18px;

}

.o_pic_block {
    width: 100%;
}

.o_pic_block img {
    cursor: pointer;
    margin: 3vw;
    object-fit: cover;
    width: 30vw;
    height: 20vw;
    transition: transform 0.5s;
    box-shadow: 0px 5px 15px 0px #bababacb;
    border-radius: 3px;
}

.o_pic_block img:hover {
    transform: scale(1.05);
}

/* ポップアップのスタイル */
.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(197, 197, 197, 0.8);
    justify-content: center;
    align-items: center;
    padding: 2vw;
    z-index: 100;
}

.popup-content {
    max-width: 100%;
    max-height: 100%;
}

.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    cursor: pointer;
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    user-select: none;
    transition: 0.6s ease;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}


.o_subtit_block p {
    font-size: 1vw;
    margin: 1.2vw;
    width: 26vw;
}

.o_txt {
    margin: 1.2vw;
    font-size: 0.8vw;
    margin: 1.2vw;
}

.o_txt img {
    width: 20vw;
    height: 15vw;
    object-fit: cover;
    border-radius: 0.3vw;
}

.o_txt p {
    margin-top: 1vw;
    margin-left: 1vw;
    line-height: 1.6vw;
}

/* 数値で見る朝日システム ****************************************************************************************/
.back_img {
    width: 100%;
}

.graph_block {
    width: 80%;
    margin-left: 10%;
}

.graph_content {
    display: flex;
    align-items: center;
    width: 98%;
    margin: 1vw;
    margin-bottom: 5%;
    padding: 4vw;
    background-color: rgb(245, 245, 245);
    border-radius: 3vw;
}

.graph_title {
    font-size: 3vw;
    width: 20%;
    background: #fff;
    border-radius: 1vw;
}

.graph_val {
    width: 80%;
}



/* グラフ1 社員数 *******************************************************/
#line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.line_p {
    opacity: 0;
    fill: #24a4ff;
}

.syainsu_graph text {
    font-weight: bold;
}

.syainsu_title {
    font-family: 'Kaisei HarunoUmi';
}

.syainsu_text1 {
    font-family: 'Kiwi Maru';
    opacity: 0;
}

.syainsu_text2 {
    font-family: 'Stick';
    opacity: 0;
}


/* グラフ2〜5 *******************************************************/
.graph_flex {
    width: 100%;
    margin-bottom: 2vw;
    display: flex;
    align-items: center;
    justify-content: center
}

.graph_flex2 {
    width: 68%;
    margin-left: 16%;
    margin-bottom: 2vw;
    display: flex;
    align-items: center;
    justify-content: center
}

.graph_content2 {
    width: 25vw;
    height: 21vw;
    padding: 2vw;
    margin: 1vw;
    background-color: rgb(245, 245, 245);
    border-radius: 3vw;
}

.graph_content3 {
    width: 30%;
    height: 21vw;
}

.graph_txt {
    fill: #515151;
    font-family: 'Kaisei HarunoUmi';
    font-size: 36px;
    font-weight: bold;
}

.graph_per {
    font-family: 'Stick';
    font-size: 50px;
    font-weight: 600;
}

.graph_num {
    font-family: 'Stick';
    font-size: 30px;
    font-weight: 600;
}

.g_num_t,
.g_per_t {
    font-size: 25px;
}

.circle {
    stroke-dasharray: 1131;
    stroke-dashoffset: 1131;
}

.base {
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 40px;
}

/* 男女比 *************************************************************/
.blue_num,
.blue_per {
    fill: #44c0f0;
}

.orange_num,
.orange_per {
    fill: #ffaa00;
}

.base,
.orange,
.blue {
    fill: none;
    stroke-miterlimit: 10;
}

.orange {
    stroke: #ffaa00;
}

.blue {
    stroke: #44c0f0;
}

.orange,
.blue {
    stroke-width: 25px;
}

.orange_num,
.blue_num,
.orange_per,
.blue_per {
    text-anchor: middle;
    dominant-baseline: middle;
}


/* 文理比 *************************************************************/
.green_num,
.green_per {
    fill: #00d134;
}

.yellow_num,
.yellow_per {
    fill: #ffdd00;
}

.base,
.yellow,
.green {
    fill: none;
    stroke-miterlimit: 10;
}

.yellow {
    stroke: #ffdd00;
}

.green {
    stroke: #00d134;
}

.yellow,
.green {
    stroke-width: 25px;
}

.yellow_num,
.green_num,
.yellow_per,
.green_per {
    text-anchor: middle;
    dominant-baseline: middle;
}


/* 新卒中途比 *************************************************************/
.purple_num,
.purple_per {
    fill: #3399ff;
}

.pink_num,
.pink_per {
    fill: #ff6161;
}

.base,
.pink,
.purple {
    fill: none;
    stroke-miterlimit: 10;
}

.pink {
    stroke: #ff6161;
}

.purple {
    stroke: #3399ff;
}

.pink,
.purple {
    stroke-width: 25px;
}

.pink_num,
.purple_num,
.pink_per,
.purple_per {
    text-anchor: middle;
    dominant-baseline: middle;
}


/* 初学既学比 *************************************************************/
/* .blue2_num,
.blue2_per {
    fill: #3399ff;
}

.red_num,
.red_per {
    fill: #ff6161;
}

.base,
.red,
.blue2 {
    fill: none;
    stroke-miterlimit: 10;
}

.red {
    stroke: #ff6161;
}

.blue2 {
    stroke: #3399ff;
}

.red,
.blue2 {
    stroke-width: 25px;
}

.red_num,
.blue2_num,
.red_per,
.blue2_per {
    text-anchor: middle;
    dominant-baseline: middle;
} */




/* 年齢分布 *************************************************************/
.age_distribution circle {
    fill: none;
}

.c_base {
    stroke-width: 24px;
    stroke: rgba(0, 0, 0, 0.4);
}

.age_d_c {
    stroke-dasharray: 150;
    stroke-dashoffset: 150;
    stroke-width: 20px;
}

.age_d_title {
    font-size: 5px;
    font-weight: bold;
}

.age_d_title_sub {
    font-size: 3.5px;
    font-weight: bold;
}

.age-d-text {
    font-family: 'Stick';
}

/* 社員の年齢分布・勤続年数 **********************************************************/
.ract_graph line {
    stroke: #c5d1dc;

}

.rect {
    opacity: 0;
}

.rect_text {
    font-family: 'Kiwi Maru';
}

/* 育休取得率 ************************************************************************/
.base_2 {
    fill: none;
    stroke: rgba(0, 0, 0, 0.5);
    stroke-width: 2vw;
}

.dansei,
.josei {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
}

.dansei {
    fill: none;
    stroke: #24a4ff;
    stroke-width: 1.3vw;
}

.danjo_t {
    font-size: 1.6vw;
}

.danjo_t2 {
    font-size: 1.6vw;
    fill: none;
    stroke: #fff;
    stroke-width: 0.3vw;
}

.josei {
    fill: none;
    stroke: #ffbf01;
    stroke-width: 1.3vw;
}

.dan_per,
.jo_per {
    font-size: 2vw;
}

.dan_per2,
.jo_per2 {
    font-size: 2vw;
    fill: none;
    stroke: #fff;
    stroke-width: 0.3vw;
}

.ikukyu_title {
    font-size: 28px;
    font-family: 'Kaisei HarunoUmi';
    font-weight: bold;
    fill: #515151;
}

.ikukyu_title_sub {
    font-size: 20px;
    font-family: 'Kaisei HarunoUmi';
    font-weight: bold;
    fill: #515151;

}

.danjo_text {
    font-size: 2vw;
    font-family: 'Stick';
}

/* 日本地図 */
#map2 {
    margin-top: 20px;
}

.fukushima_p {
    fill: #ff2525cb;
}

.sendai_p {
    fill: #eaff00db;
}

.tokyo_p {
    fill: #ffaa00d8;
}

.map_line {
    opacity: 0;
    stroke-width: 0.2vw;
    stroke: #515151;
}

.map_p {
    opacity: 0;
}

.map_text {
    font-size: 30px;
    font-family: 'Stick';
    opacity: 0;
}

.map_text tspan {
    font-size: 33px;
}

.map_title {
    font-weight: bold;
}

/* MAP見本 **/
#map1,
#map3 {
    margin-top: 1vw;
}

/* 福利厚生 **********************************************************************************************************/
.eb_contents {
    width: 80%;
    margin-left: 10%;
}

.eb_flex {
    display: flex;
    align-items: center;
    margin-bottom: 2vw;
}

.eb_con {
    width: 60%;
}

.eb_img{
    margin-bottom: 1vw;
    width: 40%;
    padding: 1vw;
}

.eb_img_phone {
    display: none;
}

.eb_title {
    font-weight: 600;
    margin-bottom: 0.5vw;
}

@media (max-width: 768px) {

    .close {
        top: 10%;
        left: 5%;
    }

    .o_tit_block p {
        font-size: 20px;
    }

    .backStr p {
        font-size: 40px;
    }

    .o_tit_block {
        margin: 0% 10%;
    }

    .o_txt_block p {
        background: linear-gradient(transparent 60%, rgba(0, 162, 255, 0.1) 60%);
        width: 45%;
        margin: 0% 12%;
        text-align: center;
        font-size: 18px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .o_pic_block img {
        width: 45%;
        height: 120px;
    }

    .eb_flex {
        display: block;
    }

    .eb_con {
        width: 100%;
    }

    .eb_img{
        display: none;
    }

    .eb_img_phone {
        width: 60%;
        margin: 5% 20%;
        display: block;
    }

}

@media screen and (max-width: 768px) {
    .graph_flex {
        display: block;
    }

    .graph_content {
        width: 80%;
        margin: 10%;
    }

    .graph_content2 {
        padding: 6%;
        padding-bottom: 12%;
        width: 80%;
        height: 100%;
        margin: 10%;
    }

    .base_2 {
        stroke-width: 5vw;
    }

    .danjo_t {
        font-size: 6vw;
    }

    .danjo_t2 {
        font-size: 6vw;
        stroke-width: 1vw;
    }

    .josei,
    .dansei {
        stroke-width: 3vw;
    }

    .dan_per,
    .jo_per {
        font-size: 7vw;
    }

    .dan_per2,
    .jo_per2 {
        font-size: 7vw;
        stroke-width: 1vw;
    }

    .danjo_text {
        font-size: 7vw;
    }

    .age-d-text {
        font-size: 0.7vw;
    }
}