@charset "utf-8";

:root {
    --vw: 100px;
    --vh: 100px
}

@media(min-width:769px),
print {
    .hiroba_01 {
        padding-bottom: 74px
    }

    .hiroba_01 .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }

    .hiroba_01 .common_ttl {
        width: 580px;
        height: 280px;
        margin-bottom: 0
    }

    .hiroba_01 .common_ttl .ttl {
        margin-top: 30px;
        background-position: bottom left;
        text-align: left;
        letter-spacing: 0;
        font-size: 2.8rem;
    }

    .hiroba_01 .common_ttl .txt {
        text-align: left
    }

    .hiroba_01 img {
        width: 326px;
        margin-left: 46px
    }

    .hiroba_02 .row + .row{
        margin-top: 110px;
    }

    .hiroba_wrap {
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    .hiroba_02 .row:nth-child(even) .hiroba_wrap{
        -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    }

    .hiroba_wrap > div{
        width:  calc(55% - 40px);
    }

    .hiroba_wrap > div:nth-child(1){
        width:  45%;
    }

    .hiroba_wrap .tag {
        display: inline-block;
        background: #46AE99;
        color: #FFFFFF;
        padding: 8px 12px;
        border-radius: 5px;
    }

    .hiroba_wrap .ttl {
        margin: 20px 0;
        font-size: 2.2rem;
        font-weight: bold;
        line-height: 1.6;
    }

    .hiroba_wrap .txt {
        font-size: 1.25rem;
        line-height: 1.8;
    }

    .hiroba_img_wrap {
        margin-top: 40px;
    }

    .hiroba_img {
        width: 25%;
        padding: 5px;
    }

    .hiroba_img:nth-child(1) {
        display: none;
    }
    
    .flickity-page-dots{
        display: none;
    }
}

@media only screen and (max-width:768px) {
    .hiroba_01 .common_ttl .ttl {
        line-height: 1.6;
    }

    .hiroba_01 img {
        display: block;
        width: 79.03645833333334vw;
        margin: 0 auto
    }

    .hiroba_02 .row {
        padding-right: 0;
        padding-left: 0;
    }

    .hiroba_02 .row .hiroba_wrap > div:nth-child(1) {
        padding-right: 4.166666666666666vw;
        padding-left: 4.166666666666666vw;
        margin-bottom: 20px;
    }

    .hiroba_02 .row + .row{
        margin-top: 110px;
    }

    .hiroba_wrap .tag {
        display: inline-block;
        background: #46AE99;
        color: #FFFFFF;
        padding: 8px 12px;
        border-radius: 5px;
    }

    .hiroba_wrap .ttl {
        margin: 20px 0;
        font-size: 6.338541666666666vw;
        font-weight: bold;
        line-height: 1.6;
    }

    .hiroba_wrap .txt {
        font-size: 4.338541666666666vw;
        line-height: 1.8;
    }

    .hiroba_wrap_img{
        display: none;
    }

    .hiroba_img_wrap {
        margin-top: 40px;
        display: block;
    }

    .hiroba_img {
        width: 100%;
    }

    .hiroba_02 .list ul li {
        width: 100%;
        padding: 5.208333333333334vw 0;
        border: 4px solid #96d3c8;
        border-radius: 1.3020833333333335vw;
        background: #fff
    }

    .hiroba_02 .list ul li+li {
        margin-top: 3.90625vw
    }

    .hiroba_02 .list ul li .list_ttl {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .hiroba_02 .list ul li .list_ttl .icon {
        width: 15.494791666666666vw;
        height: 15.494791666666666vw
    }

    .hiroba_02 .list ul li .list_ttl p {
        margin-top: 3.90625vw;
        color: #50b6a4;
        font-size: 5.338541666666666vw;
        letter-spacing: 0;
        line-height: 1.5;
        text-align: center
    }

    .hiroba_02 .voiceList {
        margin-top: 8.333333333333332vw
    }

    .hiroba_02 .voiceList ul li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 5.208333333333334vw;
        border-radius: 1.3020833333333335vw;
        background: #fefcf0
    }

    .hiroba_02 .voiceList ul li+li {
        margin-top: 3.125vw
    }

    .hiroba_02 .voiceList ul li .left {
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 21.484375vw
    }

    .hiroba_02 .voiceList ul li .left img {
        width: 100%
    }

    .hiroba_02 .voiceList ul li .right {
        width: calc(100% - 21.484375vw);
        padding-left: 3.90625vw
    }

    .hiroba_02 .voiceList ul li .right p {
        color: #5e5e5e;
        font-size: 3.3854166666666665vw;
        line-height: 2
    }

    .hiroba_02 .voiceList ul li .right p.name {
        margin-top: 1.8229166666666667vw;
        color: #50b6a4
    }

    .hiroba_03 .common_ttl .ttl {
        margin-bottom: 5.989583333333334vw;
        line-height: 1.3
    }

    .hiroba_03 .boxList {
        margin-top: 6.770833333333333vw
    }

    .hiroba_03 .boxList ul li {
        padding: 5.208333333333334vw 4.947916666666666vw;
        border: 4px solid #96d3c8;
        border-radius: 1.3020833333333335vw;
        background-color: #fff
    }

    .hiroba_03 .boxList ul li+li {
        margin-top: 3.90625vw
    }

    .hiroba_03 .boxList ul li:nth-of-type(1) .image {
        width: 55.46875vw;
        margin-top: 5.208333333333334vw;
        margin-bottom: 5.208333333333334vw
    }

    .hiroba_03 .boxList ul li:nth-of-type(2) .image {
        width: 56.25vw;
        margin-top: 5.208333333333334vw
    }

    .hiroba_03 .boxList ul li:nth-of-type(3) .image {
        width: 25.390625vw
    }

    .hiroba_03 .boxList ul li .ttl {
        font-size: 3.3854166666666665vw;
        text-align: center
    }

    .hiroba_03 .boxList ul li .ttl span {
        display: block;
        margin-top: 1.3020833333333335vw;
        color: #50b6a4;
        font-size: 5.46875vw
    }

    .hiroba_03 .boxList ul li .image {
        margin-top: 4.166666666666666vw;
        margin-right: auto;
        margin-bottom: 3.125vw;
        margin-left: auto
    }

    .hiroba_03 .boxList ul li .txt {
        font-size: 3.3854166666666665vw;
        line-height: 1.8
    }

    .hiroba_04 .common_ttl {
        margin-bottom: 9.114583333333332vw
    }

    .hiroba_04 .list ul li {
        width: 100%;
        padding: 5.729166666666666vw 0;
        border: 4px solid #96d3c8;
        border-radius: 1.3020833333333335vw;
        background: #fff
    }

    .hiroba_04 .list ul li+li {
        margin-top: 5.208333333333334vw
    }

    .hiroba_04 .list ul li .list_ttl {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .hiroba_04 .list ul li .list_ttl .icon {
        width: 15.494791666666666vw
    }

    .hiroba_04 .list ul li .list_ttl p {
        margin-top: 6.510416666666667vw;
        color: #50b6a4;
        font-size: 5.46875vw;
        line-height: 1.5;
        text-align: center
    }

    .hiroba_04 .list ul li .list_txt {
        margin-top: 2.604166666666667vw;
        padding: 0 5.729166666666666vw;
        font-size: 3.3854166666666665vw;
        line-height: 1.8
    }

    .hiroba_05 .common_ttl .previous {
        margin-bottom: 1.8229166666666667vw;
        font-size: 6.25vw;
        text-align: center
    }

    .hiroba_05 .common_ttl .ttl {
        font-size: 7.291666666666667vw;
        letter-spacing: .26041666666666663vw;
        line-height: 1.4
    }

    .hiroba_05 .common_ttl .ttl span {
        color: #50b6a4;
        font-weight: 700
    }

    .hiroba_05 .box {
        display: block;
        padding: 6.25vw 5.989583333333334vw;
        border-radius: 1.3020833333333335vw;
        background: #fff
    }

    .hiroba_05 .box p {
        font-size: 3.3854166666666665vw
    }

    .hiroba_05 .box+.box {
        margin-top: 5.729166666666666vw
    }

    .hiroba_05 .box_ttl>span:not(.box_ttl_tag) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: #50b6a4;
        font-size: 5.46875vw;
        letter-spacing: .13020833333333331vw;
        text-align: center
    }

    .hiroba_05 .box_ttl_tag {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 32.29166666666667vw;
        height: 7.03125vw;
        margin: 3.6458333333333335vw auto 0;
        background: #50b6a4;
        color: #fff;
        font-size: 3.6458333333333335vw;
        letter-spacing: .26041666666666663vw
    }

    .hiroba_05 .box_txt {
        margin-top: 4.6875vw;
        line-height: 2;
        text-align: center
    }

    .hiroba_05 .box .imgWrap {
        width: 79.03645833333334vw;
        height: 33.203125vw;
        margin: 5.208333333333334vw auto 6.510416666666667vw;
        background: url(../images/about/about_05_img01_sp.png) no-repeat top left / contain;
        font-size: 0
    }

    .hiroba_05 .box .arrow {
        margin: 6.25vw 0 0;
        padding: 0 0 13.020833333333334vw;
        background: url(../images/about/about_05_img05_arrow.png) no-repeat bottom 5.729166666666666vw center / 16.666666666666664vw auto;
        color: #fec823;
        font-size: 5.208333333333334vw;
        text-align: center
    }

    .hiroba_05 .box .lrWrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .hiroba_05 .box .lrWrap .left {
        margin-top: 2.604166666666667vw;
        line-height: 1.8
    }

    .hiroba_05 .box .lrWrap .right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    .hiroba_05 .box .lrWrap .right img {
        width: 37.76041666666667vw
    }

    .hiroba_05 .box .lrWrap_2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
        margin-top: 3.90625vw
    }

    .hiroba_05 .box .lrWrap_2 .left {
        margin-top: 9.114583333333332vw
    }

    .hiroba_05 .box .lrWrap_2 .left .circle_ttl {
        position: relative;
        width: 24.21875vw;
        height: 5.078125vw;
        margin: 0 auto;
        color: #50b6a4;
        font-size: 4.166666666666666vw;
        font-weight: 700;
        line-height: 5.078125vw;
        text-align: center
    }

    .hiroba_05 .box .lrWrap_2 .left .circle_ttl:before,
    .hiroba_05 .box .lrWrap_2 .left .circle_ttl:after {
        display: block;
        position: absolute;
        top: .390625vw;
        width: 1.5625vw;
        height: 5.078125vw;
        background: url(../images/about/circle_ttl_deco.png) no-repeat top left / contain;
        content: ''
    }

    .hiroba_05 .box .lrWrap_2 .left .circle_ttl:before {
        right: -.5208333333333333vw
    }

    .hiroba_05 .box .lrWrap_2 .left .circle_ttl:after {
        left: 0;
        -webkit-transform: scale(-1, 1);
        transform: scale(-1, 1)
    }

    .hiroba_05 .box .lrWrap_2 .left .circle_list {
        margin-top: 4.427083333333334vw;
        border-bottom: 1px solid #d2d2d2
    }

    .hiroba_05 .box .lrWrap_2 .left .circle_list li {
        position: relative;
        padding: 3.125vw 4.947916666666666vw;
        border-top: 1px solid #d2d2d2;
        font-size: 3.3854166666666665vw;
        line-height: 1
    }

    .hiroba_05 .box .lrWrap_2 .left .circle_list li:before {
        display: block;
        position: absolute;
        top: .26041666666666663vw;
        bottom: 0;
        left: 0;
        width: 3.125vw;
        height: 3.125vw;
        margin: auto;
        border: 2px solid #96d3c8;
        border-radius: 50%;
        content: ''
    }

    .hiroba_05 .box ul.two li+li {
        margin-top: 6.510416666666667vw
    }

    .hiroba_05 .box ul.two li p {
        text-align: left
    }

    .hiroba_05 .box ul.two li p:not(.mini) {
        margin-top: 2.34375vw;
        font-size: 3.90625vw
    }

    .hiroba_05 .box ul.two li p.mini {
        margin-top: .5208333333333333vw;
        line-height: 1.9
    }

    .hiroba_05 .box ul.list {
        margin-top: 4.166666666666666vw
    }

    .hiroba_05 .box ul.list li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 13.802083333333334vw;
        border-width: 4px;
        border-style: solid;
        border-radius: 1.3020833333333335vw;
        border-color: #96d3c8;
        color: #50b6a4;
        font-size: 3.90625vw;
        text-align: center
    }

    .hiroba_05 .box ul.list li+li {
        margin-top: 2.604166666666667vw
    }
}