@charset "utf-8";

/*　タイトル */
.tit_bar {
    font-size: 2.3rem;
    background: #0071A9;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .05em;
}

.titbar_icon_none {
    font-size: 4.5rem;
}

.tit_bar img {
    width: 27px;
    margin-right: 10px;
}

/* おすすめ */
.osusume_bg {
    background: #e7feff;
    overflow: hidden;
}

#osusume ul {
    display: flex;
    max-width: 1020px;
    margin: 0 auto;
    flex-wrap: wrap;
    align-items: center;
}

#osusume ul li {
    display: flex;
    align-items: center;
    width: 50%;
    font-size: 20px;
    padding: 30px 75px;
    line-height: 1.6;
    min-height: 130px;
    box-sizing: border-box;
    position: relative;
    font-weight: bold;
}

#osusume ul li:nth-child(2) {
    background: #c9f0ff;
}

#osusume ul li:nth-child(2) span,
#osusume ul li:nth-child(3) span {
    position: relative;
    z-index: 2;
}

#osusume ul li:nth-child(2)::before,
#osusume ul li:nth-child(3)::before {
    position: absolute;
    content: "";
    background: #c9f0ff;
    height: 100%;
    width: 250%;
    z-index: 1;
    top: 0;
    left: 0;
}

#osusume ul li:nth-child(3)::before {
    right: 0;
    left: auto;
}

#osusume ul li:nth-child(3) {
    background: #c9f0ff;
}

/* 治験ボランティアってなんだろう? */
.tiken-lead {
    font-size: 1.8rem;
    width: 1020px;
    margin: 30px auto 40px;
    line-height: 1.8;
    letter-spacing: .05em;
}

.tiken-lead span {
    color: #0071A9;
    font-weight: bold;
}

@media screen and (max-width:768px) {
    .tiken-lead {
        font-size: 1.4rem;
        width: 90%;
        margin: 17px auto 20px;
        line-height: 1.6;
        letter-spacing: .05em;
    }
}

/* about-person */
.conditions-list {
    display: flex;
    gap: 30px 0;
    justify-content: space-between;
    width: 1020px;
    margin: 30px auto 0;
    position: relative;
}

.conditions-list::before {
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    background: url(../img/arrow-blue-icon.png)no-repeat;
    background-size: contain;
    width: 35px;
    height: 30px;
}

.conditions-item {
    width: calc(33% - 30px);
}

.conditions-item>div>img {
    width: 60px;
    display: block;
    margin: 0 auto 15px;
}

.inr_icon-conditions img {
    width: 100%;
}

.inr_icon-conditions {
    position: relative;
}

.inr_icon-conditions p {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%);
    font-size: 18px;
    color: #FFFFFF;
}

.conditions-lead {
    font-size: 20px;
    margin: 15px 0 0;
    text-align: center;
    font-weight: bold;
    line-height: 1.7;
    letter-spacing: .05em;
}

.wp_top-img {
    text-align: center;
    display: table;
    margin: 0 auto 45px;
}

.wp_top-img div img {
    width: 100%;
}

.wp_top-img .osusume_lead-img {
    width: 815px;
    margin-top: 70px;
}

.wp_top-img .osusume_tit-img {
    width: 615px;
    margin: 35px auto 0;
    text-align: center;
}

.wp_under-img {
    text-align: center;
    display: table;
    margin: 0 auto 45px;
}

.wp_under-img div img {
    width: 100%;
}

.wp_under-img .osusume_lead-img {
    width: 820px;
    margin: 30px auto 0;
}

.wp_under-img .osusume_tit-img {
    width: 1025px;
    margin: 40px auto 0;
    text-align: center;
}

@media screen and (max-width:768px) {
    .conditions-list {
        display: flex;
        flex-direction: column;
        gap: 30px 0;
        justify-content: space-between;
        width: 100%;
        margin: 30px auto 0;
        position: relative;
    }

    .conditions-list::before {
        bottom: -26px;
        width: 17px;
        height: 15px;
    }

    .conditions-item {
        width: 100%;
    }

    .conditions-item>div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 17px;
    }

    .conditions-item>div>img {
        width: 40px;
        height: 50px;
        display: block;
        margin: 0;
    }

    .inr_icon-conditions img {
        width: 215px;
    }


    .inr_icon-conditions p {
        bottom: 13px;
        font-size: 1.3rem;
    }

    .conditions-lead {
        font-size: 1.4rem;
        margin: 10px 0 0;
    }

    .wp_top-img {
        text-align: center;
        display: table;
        margin: 0 auto 15px;
    }

    .wp_top-img .osusume_lead-img {
        width: 315px;
        margin-top: 45px;
    }

    .wp_top-img .osusume_tit-img {
        width: 308px;
        margin: 17px auto 0;
        text-align: center;
    }

    .wp_under-img {
        text-align: center;
        display: unset;
        margin: 0 auto 45px;
    }

    .wp_under-img .osusume_lead-img {
        margin: 0px auto ;
    }

    .wp_under-img .osusume_tit-img {
        margin: 0px auto;
    }
}

/* merideme */
.meritto,
.demeritto {
    margin: 50px 0 0 0;
}

.merideme-list {
    width: 1000px;
    display: flex;
    margin: 30px auto 0;
}

.merideme-list li {
    padding: 0 0 0 50px;
}

.merideme-list li:first-child {
    padding: 0 0 0 0;
}

.merideme-list li:nth-child(-n+3) {
    border-right: 1px dotted #231815;
    height: 115px;
}

.merideme-list .head_tit {
    font-size: 21px;
    color: #0071A9;
    font-weight: bold;
    margin: 0 0 20px 0;
    width: 195px;
    position: relative;
}

.merideme-list .head_tit::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -16px;
    content: "";
    width: 6px;
    height: 20px;
    background: #0071A9;
}

.merideme-list li p:nth-child(2) {
    font-size: 16px;
    color: #000000;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .02em;
}

.merideme-list li:first-child p:nth-child(2) {
    width: 195px;
}

.merideme-list li:nth-child(2) p:nth-child(2) {
    width: 230px;
}

.merideme-list li:nth-child(3) p:nth-child(2) {
    width: 215px;
}

.merideme-list li:last-child p:nth-child(2) {
    width: 215px;
}

.demeritto .tit_bar {
    background: #CEEAF0;
}

.demeritto .tit_bar {
    color: #000000 !important;
}

.meritto .tit_bar span {
    color: #FFFF00 !important;
}

.demeritto .tit_bar span {
    color: #0071A9 !important;
}

.oneArea {
    background: linear-gradient(90deg, #DEF1F5 0%, #DEF1F5 49.5%, #fff 49.5%, #fff 50.5%, #E9DBCF 50.5%, #E9DBCF 100%);
    justify-content: center;
    align-items: center;
    width: 100%;
}

@media screen and (max-width:768px) {
    .meritto{
        margin: 30px 0 0 0;
    }

    .demeritto{
        margin: 10px 0 0 0;
    }

    .merideme-list {
        width: 90%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    .merideme-list li {
        padding: 0 0 0 0;
    }

    .merideme-list li:first-child {
        padding: 0 0 0 0;
    }

    .merideme-list li:nth-child(-n+3) {
        border-right: unset;
        height: unset;
    }

    .merideme-list li:nth-child(n+2):nth-child(-n+4) {
        border-top:  1px dotted #231815;
    }

    .merideme-list .head_tit {
        font-size: 1.8rem;
        margin: 20px 0 10px 0;
        padding: 0 0 0 15px;
        width: 100%;
    }

    .merideme-list .head_tit::before {
        left: 0px;
        width: 5px;
        height: 18px;
    }

    .merideme-list li p:nth-child(2) {
        font-size: 1.4rem;
        line-height: 1.8;
        padding: 0 0 0 15px;
        margin: 0 0 13px 0;
    }

    .merideme-list li:first-child p:nth-child(2) {
        width: 100%;
    }

    .merideme-list li:nth-child(2) p:nth-child(2) {
        width: 100%;
    }

    .merideme-list li:nth-child(3) p:nth-child(2) {
        width: 100%;
    }

    .merideme-list li:last-child p:nth-child(2) {
        width: 100%;
    }

    .oneArea {
        background: linear-gradient(90deg, #DEF1F5 0%, #DEF1F5 49.5%, #fff 49.5%, #fff 50.5%, #E9DBCF 50.5%, #E9DBCF 100%);
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}

/* tiken-schedule */
#tiken-schedule {
    background: url(../img/schedule-bg.png)no-repeat;
    background-size: cover;
    height: 485px;
    margin: 100px 0 0 0;
}

.wp_tiken-schedule {
    width: 1000px;
    margin: 0 auto 0;
    padding: 65px 0 0 0;
}

.wp_tiken-schedule h3 {
    width: 670px;
    line-height: 55px;
    font-size: 2.1rem;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    background: #0071A9;
    letter-spacing: .1em;
}

.schedule-list {
    width: 670px;
    display: flex;
    flex-wrap: wrap;
    gap: 25px 0;
    flex-direction: column;
    height: 280px;
    margin-top: 35px;
}

.schedule-list li {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    padding: 0 0 0 30px;
    position: relative;
    letter-spacing: .1em;
}

.schedule-list li::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    content: "";
    width: 13px;
    height: 13px;
    background: #0F9BDC;
}


@media screen and (max-width:768px) {
    #tiken-schedule {
        background: url(../img/schedule-bg_sp.png)no-repeat;
        background-size: cover;
        height: 170px;
        margin: 15px 0 0 0;
        margin-bottom:390px;
    }
    
    .wp_tiken-schedule {
        width: 100%;
        padding: 65px 0 0 0;
    }
    
    .wp_tiken-schedule h3 {
        width: 230px;
        line-height: 36px;
        font-size: 1.3rem;
        text-align: center;
        position: relative;
    }

    .wp_tiken-schedule h3::before {
        position: absolute;
        top: 0;
        right: -15px;
        content: "";
        width: 0;
        height: 0;
        border-right: 15px solid transparent; /* 左側のボーダーを透明に */
        border-bottom: 36px solid #0071A9; /* 上側のボーダーを青色に */
    }

    .schedule-list {
        width: 90%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 0;
        flex-direction: column;
        height: 320px;
        margin: 95px auto 0;
        padding: 0 0 45px 0;
        border-bottom: 1px #231815 dashed;
    }
    
    .schedule-list li {
        font-size: 1.3rem;
        padding: 0 0 0 17px;
        position: relative;
        line-height: 1.8;
    }

    .schedule-list li:nth-child(n+1):nth-child(-n+7){
        width: 160px;
    }

    .schedule-list li:nth-child(n+8):nth-child(-n+16){
        width: 160px;
    }
    
    .schedule-list li::before {
        left: 0px;
        top: 7px;
        transform: unset;
        width: 10px;
        height: 10px;
    }
    
    
}

/* 登録会 */
#meeting {
    background: url(../img/jissi_bg.jpg)no-repeat center;
    background-size: 100%;
    padding: 100px 0 80px;
}

#meeting h2 {
    margin-bottom: 50px;
}

#meeting p {
    font-size: 1.8rem;
    width: 725px;
    margin: 0 auto;
    color: #fff;
    padding-top: 40px;
    line-height: 2;
}

#meeting h2 {
    font-size: 6.2rem;
    color: #fff;
    text-align: center;
}


/* 登録会 */
#voice {
    padding: 40px 0;
    margin: 35px auto 30px;
}

.mb20 {
    margin-bottom: 30px;
}

#voice ul {
    display: flex;
    justify-content: space-between;
    width: 1020px;
    margin: 0 auto;
}

#voice li {
    width: 450px;
    text-align: center;
}

#voice li h3 {
    color: #3481C9;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 25px 0 20px;
}

#voice li p {
    text-align: left;
    font-size: 1.8rem;
    line-height: 1.8;
}

#voice li img {
    width: 125px;
    margin: 0 auto;
    text-align: center;
}


/* 治験の5つのポイント */
#five_point {
    padding: 80px 0 40px;
}

#five_point h2 img {
    width: 415px;
    margin: 0 auto 75px;
    display: block;
}

#five_point .inr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.five_point_con {
    width: 475px;
    position: relative;
    margin-bottom: 50px;
    background: #ECECEC;
    padding-bottom: 35px;
}

.five_point_con h3 {
    text-align: center;
    color: #0071A9;
    font-weight: bold;
    font-size: 2.8rem;
    margin-top: 40px;
    margin-bottom: 2.5rem;
    line-height: 1.5;
}


.five_point_con p {
    font-size: 1.8rem;
    line-height: 1.8;
    width: 380px;
    margin: 0 auto;
}

.five_point_con:last-child p {
    width: 780px;
}


.five_point_con:after {
    display: block;
    width: 110px;
    height: 110px;
    line-height: 110px;
    color: #fff;
    background: #0071A9;
    text-align: center;
    position: absolute;
    font-size: 6.2rem;
    top: 130px;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-weight: bold;
}


.five_point_con:nth-child(1):after {
    content: "1";
}

.five_point_con:nth-child(2):after {
    content: "2";
}

.five_point_con:nth-child(3):after {
    content: "3";
}

.five_point_con:nth-child(4):after {
    content: "4"
}

.five_point_con:nth-child(5):after {
    content: "5";
    top: 320px;
}

.five_point_con:nth-child(5) h3 img {
    width: 580px;
    margin: 0 auto;
}


.five_point_con img {
    width: 100%;
}

.five_point_con:nth-child(5) {
    width: 100%;
}

/* 例えば */
#example {
    background: #ECECEC;
}

#example>ul {
    width: 1020px;
    margin: 0 auto 80px;
    padding: 50px 0 35px;
}

#example>ul li {
    position: relative;
    margin-bottom: 35px;
}

#example>ul li .example_con {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background: #fff;
    width: 605px;
}

#example>ul li:nth-child(2)>div {
    width: 630px;
}

#example>ul li:nth-child(3)>div {
    width: 707px;
}

.example_con .pc {
    display: block;
}

.example_con .sp {
    display: none !important;
}

@media screen and (max-width:768px) {
    #example>ul li:nth-child(2)>div {
        width: 90%;
    }

    #example>ul li:nth-child(3)>div {
        width: 90%;
    }

    .example_con .pc {
        display: none !important;
    }

    .example_con .sp {
        display: block;
    }
}


#example>ul li .example_con h2 {
    background: #0071A9;
    color: #fff;
    font-size: 2.1rem;
    padding: 15px 30px;
    font-weight: bold;
}

#example>ul li .example_con ul {
    padding: 15px 30px;
}

#example>ul li .example_con ul li {
    font-size: 1.8rem;
    text-indent: -1em;
    line-height: 1.6;
    margin-bottom: 5px;
    font-weight: bold;
}


#example>ul li:nth-child(2) .example_con {
    left: auto;
    right: 0;
}

#example>ul li img {
    width: 483px;
    margin-right: 0;
    margin-left: auto;
}

#example>ul li:nth-child(2) img {
    width: 496px;
    margin-right: auto;
    margin-left: 0;
}

/* 流れ */
#flow {
    background: #f3fafd;
    padding: 45px 0 60px;
}

#flow h2 {
    font-size: 3.2rem;
    text-align: center;
    background: #54bfef;
    color: #fff;
    padding: 3rem 0;
    font-weight: bold;
}

.flow_con_wp {
    background: #fff;
    padding: 50px 60px;
    border: solid 2px #54bfef;
}

.flow_con_wp ul {
    width: 820px;
    margin: 0 auto;
    overflow: hidden;
}

.flow_con_wp ul li {
    display: flex;
    margin-bottom: 50px;
}

.flow_con_wp ul li .num span {
    font-size: 1.6rem;
    color: #fff;
    background: #000;
    padding: 30px 0;
    width: 135px;
    text-align: center;
    display: block;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    font-weight: bold;
}

.flow_con_wp ul li .num {
    position: relative;
}

.flow_con_wp ul li .num:before {
    position: absolute;
    left: 0;
    right: 0;
    content: "";
    margin: 0 auto;
    display: block;
    height: 170%;
    width: 3px;
    background: #000;
    top: 0px;
}

.flow_con_wp ul li .step1 span {
    background: #79af38;
}

.flow_con_wp ul li .step2 span {
    background: #67ac54;
}

.flow_con_wp ul li .step3 span {
    background: #3da891 !important;
}

.flow_con_wp ul li .step4 span {
    background: #1da4c0 !important;
}

.flow_con_wp ul li .step5 span {
    background: #07a1df !important;
}

.flow_con_wp ul li:nth-child(1) h3 {
    color: #79af38;
}

.flow_con_wp ul li:nth-child(2) h3 {
    color: #67ac54;
}

.flow_con_wp ul li:nth-child(3) h3 {
    color: #3da891 !important;
}

.flow_con_wp ul li:nth-child(4) h3 {
    color: #1da4c0 !important;
}

.flow_con_wp ul li:nth-child(5) h3 {
    color: #07a1df !important;
}


.flow_con_wp ul li .step1:before {
    background: #67ac54 !important;
}

.flow_con_wp ul li .step2:before {
    background: #3da891 !important;
}

.flow_con_wp ul li .step3:before {
    background: #1da4c0 !important;
}

.flow_con_wp ul li .step4:before {
    background: #07a1df !important;
}

.flow_con_wp ul li .step5:before {
    display: none
}

.flow_txt {
    margin-left: 3rem;
    flex: 1;
}

.flow_txt h3 {
    font-size: 3rem;
    line-height: 1.4;
    font-weight: bold;
}

.flow_txt h3 span {
    display: block;
    font-size: 2.2rem;
}

.flow_txt p {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-top: 10px;
}


/* ボタンバー */
.btn_bar {
    background: #E2E0D0;
    padding: 20px 0;
}

.btn01 a {
    width: 445px;
    font-size: 2.4rem;
    text-align: center;
    margin: 0 auto;
    background: #02137C url(../img/icon_right.png) no-repeat right 20px center;
    background-size: 20px;
    display: block;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    line-height: 1;
    padding: 25px 0;
    border-radius: 20px;
    position: relative;
}



.btn01 a:before {
    position: absolute;
    content: "";
    width: 36px;
    height: 36px;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    background: url(../img/icon_en.png)no-repeat center;
    background-size: 100%;
}





/* 利用 */
#riyou ul {
    width: 1020px;
    margin: 4rem auto 4rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#riyou ul li {
    width: 31%;
    margin-bottom: 25px;
    background: #000;
    color: #fff;
    border-radius: 10px;
    padding: 40px 30px;
    box-sizing: border-box;
}

#riyou ul li .btn01 a {
    width: 100%;
    font-size: 20px;
    color: #0071AA;
}

#riyou ul li .btn01 {
    padding-top: 30px;
}

#riyou ul li .btn01 a:before {
    position: absolute;
    content: "";
    width: 32px;
    height: 32px;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    background: url(../img/icon_en02.png)no-repeat center;
    background-size: 100%;
}


#riyou ul li .btn01 a {
    background: #fff url(../img/icon_right03.png) no-repeat right 20px center;
    background-size: 20px;
}

#riyou ul li:nth-child(1) {
    background: #0071AA;
}

#riyou ul li:nth-child(2) {
    background: #E99E3B;
}

#riyou ul li:nth-child(3) {
    background: #008045;
}

#riyou ul li:nth-child(4) {
    background: #736357;
}

#riyou ul li:nth-child(5) {
    background: #DB1E79;
}

#riyou ul li:nth-child(6) {
    background: #AF272D;
}

#riyou ul li:nth-child(7) {
    background: #C2145A;
}

#riyou ul li:nth-child(8) {
    background: #E5811E;
}

#riyou ul li:nth-child(9) {
    background: #0F9CDD;
}

#riyou ul li h3,
#riyou ul li p {
    color: #fff;
    font-weight: bold;
}

#riyou ul li h3 {
    font-size: 2.4rem;
    margin: 20px 0 15px;
}

#riyou ul li p {
    font-size: 1.8rem;
    line-height: 1.8;
}

#riyou ul li .num {
    font-weight: bold;
    font-size: 5rem;
}

#riyou ul li span.riyou_span {
    line-height: 1.8;
    font-size: 1.5rem;
    margin-top: 1em;
    display: block;
}


/* ボランティア */
#volunteer {
    padding: 50px 0 40px;
}



/* ボランティアについて */
.vo_about h2 {
    font-size: 3rem;
    color: #53bfef;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.vo_about p {
    max-width: 665px;
    font-size: 1.8rem;
    line-height: 1.8;
    margin: 0 auto 50px;
}

/* どんな人が参加 */
.vo_who {
    background: #5fbce4;
    max-width: 1020px;
    margin: 0 auto;
    padding: 35px 0;
}

.vo_who h3 {
    text-align: center;
    font-size: 2.7rem;
    color: #fff;
    font-weight: bold;
    margin-bottom: 24px;
}

.vo_who ul {
    display: flex;
    justify-content: space-between;
    width: 924px;
    margin: 0 auto;
}

.vo_who ul li {
    position: relative;
    text-align: center;
    width: 283px;
    padding: 35px 0;
    background-image: linear-gradient(135deg, #5fbce4 30px, #fff 30px calc(100% - 30px), #fff 30px);
}

.vo_who ul li>img {
    position: absolute;
    left: 12px;
    top: 10px;
    width: 32px;
}

.vo_who ul li h4 {
    font-size: 2.3rem;
    color: #EF2C61;
    font-weight: bold;
    margin-bottom: 10px;
}


.vo_who ul li h4 span {
    font-size: 1.5rem;
    display: block;
    margin-top: 5px;
}


.vo_who ul li p {
    font-size: 1.8rem;
    line-height: 1.4;
}


.vo_merideme {
    max-width: 1020px;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
}

.vo_merideme .merideme_box {
    width: 48%;
    padding: 30px 30px 40px;
    box-sizing: border-box;
}

.vo_merideme .merideme_box h3 {
    text-align: center;
    color: #fff;
    font-size: 2.7rem;
    margin-bottom: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vo_merideme .merideme_box h3 img {
    width: 30px;
    margin-right: 5px;
}

.vo_merideme .merideme_box ul {
    padding: 2em 30px 20px;
    position: relative;
}

.vo_merideme .merideme_box ul li {
    font-size: 18px;
    padding: 1em 0;
    padding-left: 40px;
    line-height: 1.5;
    border-bottom: dotted 1px #000;
    font-weight: bold;
}

.vo_merideme .merideme_box ul>img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
}

.vo_merideme .merideme_box ul li:last-child {
    border: none;
}

.vo_merideme .merideme_box:nth-child(1) ul li:nth-child(2),
.vo_merideme .merideme_box:nth-child(1) ul li:nth-child(3) {
    padding: 1.36em 0;
    padding-left: 40px;
}

.vo_merideme .merideme_box:nth-child(1) ul {
    background-image: linear-gradient(135deg, #f0b859 30px, #fff 30px calc(100% - 30px), #fff 30px);
}

.vo_merideme .merideme_box:nth-child(2) ul {
    background-image: linear-gradient(135deg, #a6c45b 30px, #fff 30px calc(100% - 30px), #fff 30px);
}

.vo_merideme .merideme_box:nth-child(1) {
    background: #f0b859;
}

.vo_merideme .merideme_box:nth-child(2) {
    background: #a6c45b;
}

.vo_ft p {
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.8;
    margin-bottom: 15px;
}

.vo_ft h4 {
    text-align: center;
    font-size: 3.3rem;
    font-weight: bold;
}


#freedial h4 {
    display: flex;
    align-items: center;
    font-size: 2.4rem;
    justify-content: center;
    font-weight: bold;
    padding: 50px 0 45px;
}

#freedial h4 img {
    width: 390px;
    margin: -15px 0.5em 0;
}

/* 関連情報 */
#connection {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3fafd;
    padding: 20px 0;
    margin-bottom: 55px;
}

#connection h2 {
    font-size: 2.5rem;
    font-weight: bold;
}

#connection ul {
    display: flex;
}

#connection ul li {
    margin-left: 15px;
    background: #005bb6 url(../img/icon_right.png) no-repeat center bottom 15px;
    background-size: 20px;
    border-radius: 20px;
}

#connection ul li:nth-child(3) {
    padding-top: 1em;
}

#connection ul a {
    color: #fff;
    border-right: 10px;
    display: block;
    line-height: 1.4;
    font-size: 1.6rem;
    justify-content: center;
    width: 124px;
    padding: 20px 0 40px;
    text-align: center;
    text-decoration: none;
}



@media screen and (max-width: 768px) {

    /*　タイトル */
    .tit_bar {
        font-size: 1.5rem;
        background: #0071A9;
        color: #fff;
        text-align: center;
        padding: 12px 5%;
        font-weight: bold;
        justify-content: left;
    }

    #voice {
        padding-bottom: 20px;
    }

    .mb20 {
        margin-bottom: 20px;
    }

    .titbar_icon_none {
        font-size: 1.8rem;
        justify-content: center;
    }

    .tit_bar img {
        width: 20px;
        margin-right: 6px;
    }

    .btn_bar {
        padding: 12px 0;
    }

    .btn01 a {
        max-width: 300px;
        font-size: 1.5rem;
        text-align: center;
        margin: 0 auto;
        background: #02137C url(../img/icon_right.png) no-repeat right 13px center;
        background-size: 15px;
        display: block;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        line-height: 1;
        padding: 18px 0;
        border-radius: 20px;
        position: relative;
    }

    .btn01 a:before {
        position: absolute;
        content: "";
        width: 22px;
        height: 22px;
        top: 50%;
        left: 15px;
        transform: translateY(-50%);
        background: url(../img/icon_en.png)no-repeat center;
        background-size: 100%;
    }


    #connection h2 {
        font-size: 1.5rem;
    }

    .osusume_bg {
        background: none;
    }

    #osusume ul {
        width: 90%;
        margin: 15px auto 20px;
    }

    #osusume ul li:nth-child(2)::before,
    #osusume ul li:nth-child(3)::before {
        background: none;
        display: none;
    }

    #osusume ul li {
        background: none !important;
        padding: 0;
        min-height: auto;
        margin-bottom: 10px;
        border-left: 6px solid #8ad4f3;
        font-size: 1.4rem;
        font-weight: normal;
        padding-left: 1em;
    }

    #osusume ul li br {
        display: none;
    }

    #osusume ul {
        display: block;
    }

    #osusume ul li {
        width: 100%;
    }





    /* 流れ */
    #flow {
        padding: 25px 0;
    }

    #flow h2 {
        font-size: 2rem;
        padding: 0.8em;
    }

    #flow .flow_wp {
        width: 90%;
        margin: 0 auto;
    }

    .flow_con_wp {
        padding: 20px 5%;
    }


    .flow_con_wp ul {
        width: 100%;
    }

    .flow_con_wp ul li {
        display: block;
        margin-bottom: 2.5rem;
    }

    .flow_txt {
        margin-left: 0;
    }

    .flow_txt h3 {
        font-size: 1.6rem;
        line-height: 1.8;
    }

    .flow_txt h3 span {
        font-size: 1.3rem;
    }

    .flow_txt p {
        font-size: 1.4rem;
        margin-top: 5px;
    }


    .flow_con_wp ul li .num span {
        width: 200px;
        margin: 0 auto 20px;
        border-radius: 10px;
        padding: 1em 0;
        font-size: 1.5rem;
    }


    .flow_con_wp ul li {
        margin-bottom: 20px;
    }

    .flow_con_wp ul li .num:before {
        width: 0;
    }

    .flow_con_wp ul li .num:before {
        /*疑似要素にをブロック要素にする*/
        content: '';

        /*positionの指定*/
        position: absolute;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        top: 100%;
        background: none !important;
    }

    .flow_con_wp ul li:nth-child(1) .num:before {
        border-top: 10px solid #79af38;
    }

    .flow_con_wp ul li:nth-child(2) .num:before {
        border-top: 10px solid #67ac54;
    }

    .flow_con_wp ul li:nth-child(3) .num:before {
        border-top: 10px solid #3da891 !important;
    }

    .flow_con_wp ul li:nth-child(4) .num:before {
        border-top: 10px solid #1da4c0 !important;
    }

    .flow_con_wp ul li:nth-child(5) .num:before {
        border-top: 10px solid #07a1df !important;
    }


    .flow_con_wp ul li .step5:before {
        display: block
    }

    #volunteer {
        padding: 30px 0 25px;
    }

    .vo_about {
        width: 90%;
        margin: 0 auto;
    }

    .vo_about h2 {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .vo_about p {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }

    .vo_who ul li:nth-child(3) {
        margin-bottom: 0;
    }

    .vo_who ul li h4 {
        font-size: 2rem;
    }

    .vo_who ul li p {
        font-size: 1.4rem;
    }

    .vo_who h3 {
        font-size: 2rem;
    }

    .vo_who ul {
        display: block;
        margin: 0 auto;
        width: 90%;
    }

    .vo_who ul li {
        width: 100%;
        margin-bottom: 20px;
    }

    .vo_merideme {
        display: block;
        margin-top: 20px;
        margin-bottom: 0;
    }

    .vo_merideme .merideme_box h3 img {
        width: 20px;
    }


    .vo_merideme .merideme_box {
        padding: 30px 5%;
    }

    .vo_merideme .merideme_box h3 {
        font-size: 2rem;
    }

    .vo_merideme .merideme_box {
        width: 100%;
        margin-bottom: 20px;
    }

    .vo_merideme .merideme_box ul {
        padding: 3% 5%;
    }

    .vo_merideme .merideme_box ul li {
        font-size: 1.4rem;
        padding: 20px 0 20px 35px;
    }

    .vo_ft {
        width: 90%;
        margin: 0 auto;
    }

    .vo_ft p {
        text-align: left;
        font-size: 1.4rem;
    }

    .vo_ft p br {
        display: none;
    }

    .vo_ft h4 {
        font-size: 1.6rem;
        text-align: left;
    }


    #freedial h4 {
        display: block;
        text-align: center;
        width: 70%;
        margin: 0 auto;
        font-size: 1.7rem;
        padding: 30px 0;
    }

    #freedial h4 a {
        display: block;
    }

    #freedial h4 img {
        margin: 10px 0;
        width: 100%;
    }

    #connection {
        display: block;
        text-align: center;
        padding: 20px 25px;
        margin-bottom: 20px;
    }

    #connection ul {
        width: 90%;
        justify-content: space-between;
        margin: 15px auto 0;
    }

    #connection ul li {
        width: 30%;
        margin: 0;
    }

    #connection ul a {
        width: auto;
        font-size: 1.3rem;
    }

    .five_point_con:nth-child(1):after {
        content: "";
        background-image: url(../img/point01_num.png);
        background-size: contain;
    }

    .five_point_con:nth-child(2):after {
        content: "";
        background-image: url(../img/point02_num.png);
        background-size: contain;
    }

    .five_point_con:nth-child(3):after {
        content: "";
        background-image: url(../img/point03_num.png);
        background-size: contain;
    }

    .five_point_con:nth-child(4):after {
        content: "";
        background-image: url(../img/point04_num.png);
        background-size: contain;
    }

    .five_point_con:nth-child(5):after {
        content: "";
        background-image: url(../img/point05_num.png);
        background-size: contain;
        top: 320px;
    }

    .five_point_con,
    .five_point_con:nth-child(5) {
        width: 90%;
        margin: 0 auto 2rem;
    }

    .five_point_con:after,
    .five_point_con:nth-child(5):after {
        top: 25vw;
        width: 20.4vw;
        height: 20.4vw;
        line-height: 20.4vw;
        font-size: 11.8vw;
    }


    .five_point_con h3 {
        font-size: 2rem;
        margin: 25px 0 15px;
        letter-spacing: .1em;
    }

    .five_point_con p,
    .five_point_con:last-child p {
        width: 90%;
        font-size: 1.3rem;
    }

    #five_point {
        padding-top: 4rem;
    }

    #five_point h2 img {
        width: 80%;
        margin-bottom: 3rem;
    }

    .five_point_con:nth-child(5) h3 img {
        width: 70%;
        margin-top: 15vw;
    }

    #riyou {
        margin-bottom: 3rem;
    }

    #riyou ul {
        display: block;
        width: 100%;
        margin-top: 25px;
    }

    #riyou ul li {
        width: 90%;
        margin: 0 auto 10px;
        padding: 20px;
    }

    #riyou ul li .riyou_tit {
        display: flex;
        align-items: center;
        margin-bottom: 18px;
    }

    #riyou ul li .riyou_tit span {
        font-size: 2.5rem;
    }

    #riyou ul li .riyou_tit span img{
        width: 29px;
        height: auto;
    }

    #riyou ul li span.riyou_span {
        font-size: 1.3rem;
        margin-top: 0.5em;
    }

    #riyou ul li h3 {
        font-size: 1.8rem;
        margin: 0;
        margin-left: 1em;
    }

    #riyou ul li p {
        font-size: 1.3rem;
    }

    #example>ul {
        width: 100%;
        margin: 0 0 20px;
        padding: 10px 0 0;
    }

    #example>ul li {
        margin-bottom: 0;
    }

    #example>ul li img {
        width: 100%;
        padding-left: 5%;
        box-sizing: border-box;
    }

    #example>ul li:nth-child(2) img {
        width: 100%;
        padding-right: 5%;
        padding-left: 0;
    }

    #example>ul li .example_con {
        width: 90%;
        margin: 0 auto;
        left: 0 !important;
        right: 0 !important;
        position: relative;
        transform: translateY(-10%);
        -webkit-transform: translateY(-10%);
        -ms-transform: translateY(-10%);
    }

    #example>ul li .example_con h2 {
        font-size: 1.4rem;
    }

    #example>ul li .example_con ul li {
        font-size: 1.3rem;
    }


    #voice {
        padding: 10px 0;
        margin: 0;
    }

    #voice ul {
        width: 100%;
        display: block;
    }

    #voice li {
        width: 100%;
        padding: 25px 0;
        margin-bottom: 10px;
    }

    #voice li img {
        width: 125px;
    }

    #voice li h3 {
        font-size: 15px;
        margin: 10px auto 15px;
    }

    #voice li {
        background: #DEF1F5;
    }

    #voice li p {
        width: 90%;
        margin: 0 auto;
        font-size: 1.4rem;
    }

    #voice li:nth-child(2) {
        background: #E9DBCF;
    }

    .oneArea {
        background: none;
    }


    /* 登録会 */
    #meeting {
        background: url(../img/jissi_bg.jpg)no-repeat center;
        background-size: cover;
        padding: 35px 0 30px;
    }

    #meeting h2 {
        margin-bottom: 20px;
        line-height: 1.4;
    }

    #meeting p {
        font-size: 1.4rem;
        width: 90%;
        margin: 0 auto;
        color: #fff;
        padding-top: 40px;
        line-height: 2;
    }

    #meeting h2 {
        font-size: 3.6rem;
        color: #fff;
        text-align: center;
    }

    #qa {
        margin: 20px 0;
    }

}

@media (min-width: 769px) and (max-width: 1000px) {
    .five_point_con:nth-child(5):after {
        top: 30vw;
    }
}