@charset "UTF-8";
body{
    overflow: hidden;
}

.loadArea{
    position: fixed;
    z-index: 999999;
    display: table;
    width: 100%;
    background: #ffffff;
    top: 0;
    left: 0;
    height: 100vh;
    pointer-events: none;
}

.loadArea .loadImgPos{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
@media only screen and (max-width:767px){
    .loadArea .loadImgPos{
        padding-bottom:50px;
    }
}

.loadArea .loadImgPos > img{
    max-width: 90%;
    height: auto;
}

.information{
    padding-top: 40px;
    padding-bottom: 40px;
    background: #EFEFEF;
}

.informationTitle{
    float: left;
    width: 20%;
}

.information dl{
    float: left;
    width: 80%;
}

.information dt{
    font-size: 15px;
    color: #232323;
    float: left;
    font-weight: normal;
    width: 15%;
    margin-bottom: 15px;
}

.information dd a{
    font-size: 15px;
    color: #333333;
    float: left;
    width: 85%;
    word-wrap: break-word;
    margin-bottom: 15px;
    text-decoration: underline;
}

.information dd a:hover{
    color: #666666;
}

.t7_b10{
    padding-top: 60px;
}

.about{
    padding-top: 100px;
    font-size: 16px;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    color: #232323;
    line-height: 26px;
    letter-spacing: 1.4px;

}

.white_arrow{
    min-height: 114px;
    background: #EFEFEF;
    background-image: url(../images/white_bg.png);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}

.gray_arrow{
    min-height: 114px;
    background: #fff;
    background-image: url(../images/gray_bg.png);
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}

.aboutLeftBox{
    width: 50%;
    float: left;
    position: relative;
}

.aboutLeftImg1{
}

.aboutLeftImg1 img{
    margin: auto;
}

.aboutLeftImg2{
    position: absolute;
    top: 47%;
    z-index: 2;
}

.aboutLeftImg3{
    position: absolute;
    top: 70%;
    z-index: 1;
    right: 27%;
}

.aboutLeftImg3 img{
    margin: auto;
}

.aboutRightBox{
    width: 50%;
    float: left;
}

.aboutTitle{
    margin-top: 5px;
    margin-bottom: 40px;
}

.aboutTitle .aboutTitleBack{
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.aboutTitle .aboutTitleBack::after{
    display: block;
    content: " ";
    background: #1567b1;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .7s;
}

.aboutTitle.is-animated .aboutTitleBack::after{
    left: 100%;
}

.aboutText{
    margin-bottom: 50px;
}

.box{
    clear: both;
    max-width: 500px;
    width: 100%;
    height: 130px;
    padding: 25px 0px;
    position: relative;
    background: #fff;
}

.aboutBox{
    border: 1px solid #1567b1;
    margin-left: 20px;
    opacity: 0;
    transition: all .7s;
}

.aboutBox.is-animated{
    opacity: 1;
}

.aboutBox::before{
    content: "";
    border-bottom: 1px solid #1567b1;
    position: absolute;
    top: 64px;
    width: 120px;
    left: -120px;
}

.aboutBox::after{
    content: "";
    border: 2.5px solid #1567b1;
    position: absolute;
    top: 62px;
    width: 2px;
    border-radius: 50%;
    left: -122px;
}

.aboutBoxText{
    color: #1567b1;
    letter-spacing: 1.4px;
    margin-bottom: 10px;
    line-height: 20px;
    padding-left: 80px;
    background-image: url(../images/question_1.png);
    background-repeat: no-repeat;
    background-position: left 40px top;
}

.aboutBoxText:last-child{
    margin-bottom: 0px;
}

.boxLink{
    position: absolute;
    bottom: -30px;
    right: -13%;
    width: 300px;
    height: 50px;
    line-height: 50px;
    font-weight: normal;
    padding-right: 10px;
    text-align: center;
    font-size: 15px!important;
}

.aboutBoxLink{
    background: #1567b1;
    border: 1px solid #1567b1;
    color: #fff;
    background-image: url(../images/arrow_2.png);
    background-repeat: no-repeat;
    background-position: right 30px center;
    text-decoration: none;
    transition: all .3s;
}

.aboutBoxLink:hover{
    background: #ffffff;
    color: #1567b1;
    text-decoration: none;
    background-image: url(../images/arrow_1.png);
    background-repeat: no-repeat;
    background-position: right 30px center;
}

.work{
    background: #EFEFEF;
}

.workLeftBox{
    width: 54%;
    float: left;
}

.workTitle{
    margin-bottom: 40px;
}

.workTitle .workTitleBack{
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.workTitle .workTitleBack::after{
    display: block;
    content: " ";
    width: 100%;
    height: 100%;
    background: #29abe2;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .7s;
}

.workTitle.is-animated .workTitleBack::after{
    left: 100%;
}

.workText{
    margin-bottom: 40px;
}

.workLeftImg img{
    margin-bottom: 10px;
}

.workImgText{
    color: #1567b1;
    text-align: center;
    font-size: 15px;
    line-height: 15px;
}

.workLeftImg{
    margin-bottom: 30px;
}

.workSubText{
    clear: both;
    font-size: 13px;
    line-height: 20px;
}

.workRightBox{
    width: 46%;
    float: right;
}

.workImg{
    text-align: right;
    margin-bottom: 50px;
}

.workImg .workImgBack{
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.workImg .workImgBack::after{
    display: block;
    content: " ";
    background: #cccccc;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .7s;
}

.workImg.is-animated .workImgBack::after{
    left: 100%;
}

.workImg img{
    margin-left: auto;
}

.workBox{
    border: 1px solid #29abe2;
    margin-left: 20px;
    opacity: 0;
    transition: all .7s;
}

.workBox.is-animated{
    opacity: 1;
}

.workBox::before{
    content: "";
    border-left: 1px solid #29abe2;
    position: absolute;
    top: -190px;
    height: 190px;
    width: 2px;
    right: 50px;
}

.workBox::after{
    content: "";
    border: 2.5px solid #29abe2;
    position: absolute;
    top: -190px;
    width: 2px;
    border-radius: 50%;
    right: 49px;
}

.workBoxLink{
    background: #29abe2;
    color: #fff;
    border: 1px solid #29abe2;
    right: -3%;
    background-image: url(../images/arrow_2.png);
    background-repeat: no-repeat;
    background-position: right 30px center;
    transition: all .3s;
}

.workBoxLink:hover{
    background: #ffffff;
    color: #29abe2;
    background-image: url(../images/arrow_2.png);
    background-repeat: no-repeat;
    background-position: right 30px center;
    text-decoration: none;
}

.workBoxText{
    color: #29abe2;
    letter-spacing: 1.4px;
    margin-bottom: 10px;
    line-height: 20px;
    padding-left: 80px;
    background-image: url(../images/question_2.png);
    background-repeat: no-repeat;
    background-position: left 40px top;
}

.environmentTitle{
    text-align: right;
    margin-bottom: 30px;
}

.environmentTitle .environmentTitleBack{
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.environmentTitle .environmentTitleBack::after{
    display: block;
    content: " ";
    width: 200%;
    height: 100%;
    background: #7ac943;
    position: absolute;
    top: 0;
    left: -200%;
    transition: all 1s;
}

.environmentTitle.is-animated .environmentTitleBack::after{
    left: 100%;
}

.environmentTitle .environmentTitleBack > img{
    opacity: 0;
    transition-delay: .3s;
}

.environmentTitle.is-animated .environmentTitleBack > img{
    opacity: 1;
}

.environmentBoxTopLeft{
    width: 36%;
    float: left;
    position: relative;
    background: #EFEFEF;
    padding: 40px;
    padding-right: 20px;
    opacity: 0;
    transition: all .7s;
}

.environmentBoxTopLeft.is-animated{
    opacity: 1;
}

.environment_abu{
    position: absolute;
    top: -15px;
    left: -15px;
}

.environmentPointTitle{
    color: #1567b1;
    font-size: 24px;
    margin-bottom: 20px;
}

.environmentList{
    padding-left: 20px;
    letter-spacing: 4px;
    line-height: 18px;
    margin-bottom: 10px;
}

.environmentList li{
    margin-bottom: 10px;
}

.environmentBoxTopRight{
    width: 60%;
    float: right;
    position: relative;
}

.environmentTopImg1 img{
}

.environmentTopImg2 img{
    position: absolute;
    bottom: 0;
    left: 120px;
    z-index: 2;
}

.environmentTopImg3 img{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.environmentBoxBottomLeft{
    float: left;
}

.environmentBoxBottomRight{
    width: 50%;
    float: right;
    letter-spacing: 2.8px;
    padding-top: 25px;
}

.environmentBoxBottomLeft{
    border: 1px solid #7ac943;
    opacity: 0;
    transition: all .7s;
}

.environmentBoxBottomLeft.is-animated{
    opacity: 1;
}

.environmentBoxBottomLeft::before{
    content: "";
    border-left: 1px solid #7ac943;
    position: absolute;
    top: -70px;
    height: 70px;
    width: 2px;
    left: 90px;
}

.environmentBoxBottomLeft::after{
    content: "";
    border: 2.5px solid #7ac943;
    position: absolute;
    top: -70px;
    width: 2px;
    border-radius: 50%;
    left: 88px;
}

.environmentBoxLink{
    background: #7ac943;
    color: #fff;
    border: 1px solid #7ac943;
    right: -7%;
    background-image: url(../images/arrow_2.png);
    background-repeat: no-repeat;
    background-position: right 20px center;
    transition: all .3s;
}

.environmentBoxLink:hover{
    background: #fff;
    color: #7ac943;
    text-decoration: none;
    background-image: url(../images/arrow_2.png);
    background-repeat: no-repeat;
    background-position: right 20px center;
}

.environmentBoxText{
    color: #7ac943;
    letter-spacing: 1.4px;
    margin-bottom: 10px;
    line-height: 20px;
    padding-left: 80px;
    background-image: url(../images/question_3.png);
    background-repeat: no-repeat;
    background-position: left 40px top;
}

.member{
    background: #EFEFEF;
    padding-bottom: 30px;
}

.memberTitle{
    text-align: center;
    margin-bottom: 40px;
}

.memberTitle .memberTitleBack{
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.memberTitle .memberTitleBack::after{
    display: block;
    content: " ";
    width: 200%;
    height: 100%;
    background: #ff9b8b;
    position: absolute;
    top: 0;
    left: -200%;
    transition: all 1s;
}

.memberTitle.is-animated .memberTitleBack::after{
    left: 100%;
}

.memberTitle .memberTitleBack > img{
    opacity: 0;
    transition-delay: .3s;
}

.memberTitle.is-animated .memberTitleBack > img{
    opacity: 1;
}

.memberTitle img{
    margin: auto;
}

.memberText{
    text-align: center;
    margin-bottom: 50px;
    letter-spacing: 0.2em;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.memberImgArea > div,
.memberImgLink{
    width: 25%;
    float: left;
    position: relative;
    border-radius: 50%;
    transition: all .3s;
    height: fit-content;
}

.memberImgLink:hover{
    box-shadow: 0px 0px 30px rgb(0, 0, 0, 0.2);
}

.memberImgArea .topMemberImgOff{

}

.memberImgArea .topMemberImgOn{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
}

.memberImgArea .member_1 .topMemberImgOff{
    -webkit-animation: memberAnimation_off_1 15s infinite;
    animation: memberAnimation_off_1 15s infinite;
}

.memberImgArea .member_2 .topMemberImgOff{
    -webkit-animation: memberAnimation_off_2 15s infinite;
    animation: memberAnimation_off_2 15s infinite;
}

.memberImgArea .member_3 .topMemberImgOff{
    -webkit-animation: memberAnimation_off_3 15s infinite;
    animation: memberAnimation_off_3 15s infinite;
}

.memberImgArea .member_4 .topMemberImgOff{
    -webkit-animation: memberAnimation_off_4 15s infinite;
    animation: memberAnimation_off_4 15s infinite;
}

.memberImgArea .member_1 .topMemberImgOn{
    -webkit-animation: memberAnimation_1 15s infinite;
    animation: memberAnimation_1 15s infinite;
}

.memberImgArea .member_2 .topMemberImgOn{
    -webkit-animation: memberAnimation_2 15s infinite;
    animation: memberAnimation_2 15s infinite;
}

.memberImgArea .member_3 .topMemberImgOn{
    -webkit-animation: memberAnimation_3 15s infinite;
    animation: memberAnimation_3 15s infinite;
}

.memberImgArea .member_4 .topMemberImgOn{
    -webkit-animation: memberAnimation_4 15s infinite;
    animation: memberAnimation_4 15s infinite;
}

.memberImgArea .topMemberImgOff > img,
.memberImgArea .topMemberImgOn > img{
    width: 100%;
    height: auto;
}

.member_2,.member_4{
    margin-top: 15%;
}

.memberQuestionBox{
    border: 1px solid #ff9b8b;
    margin-left: 220px;
    opacity: 0;
    transition: all .7s;
}

.memberQuestionBox.is-animated{
    opacity: 1;
}

.memberImgArea{
    /* overflow: hidden; */
    margin-bottom: 60px;
    display: flex;
    justify-content: space-around;
}

.memberQuestionBox::before{
    content: "";
    border-left: 1px solid #ff9b8b;
    position: absolute;
    top: -80px;
    height: 80px;
    width: 2px;
    left: 50px;
}

.memberQuestionBox::after{
    content: "";
    border: 2.5px solid #ff9b8b;
    position: absolute;
    top: -80px;
    width: 2px;
    border-radius: 50%;
    left: 48px;
}

.memberBoxLink{
    background: #ff9b8b;
    color: #fff;
    border: 1px solid #ff9b8b;
    right: -270px;
    background-image: url(../images/arrow_2.png);
    background-repeat: no-repeat;
    background-position: right 35px center;
    transition: all .3s;
}

.memberBoxLink:hover{
    background: #fff;
    color: #ff9b8b;
    text-decoration: none;
    background-image: url(../images/arrow_2.png);
    background-repeat: no-repeat;
    background-position: right 35px center;
}

.memberBoxText{
    color: #ff9b8b;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
    line-height: 20px;
    padding-left: 76px;
    font-size: 16px;
    background-image: url(../images/question_4.png);
    background-repeat: no-repeat;
    background-position: left 40px top;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;

}



.center{
    display: inline-block;
}

.text_center{
    text-align: center;
    height: 90px;
}


@media screen and (max-width:1200px){
    .memberQuestionBox {
        margin-left: 150px;
    }
}

@media screen and (max-width:990px){
    .memberQuestionBox {
        margin-left: 120px;
    }

    .memberBoxLink {
        right: -80px;
    }

    .memberBoxLink.boxLink {
        bottom: -40px;
        right: -100px;
    }
}

@media screen and (max-width:767px) {
    .informationTitle{
        width: 50%;
        margin-bottom: 15px;
    }
    .information{
        padding-top: 31px;
        padding-bottom: 26px;
    }
    .aboutLeftImg1{
        width: 95%;
        margin-bottom: 15px;
    }
    .aboutTitle{
        width:85%;
        margin-bottom: 15px;
    }
    .information dl{
        width: 100%;
        clear: both;
    }
    .information dt{
        width: 100%;
        margin-bottom: 10px;
    }
    .information dd a{
        width: 100%;
    }
    .about{
        padding-top: 30px;
    }
    .aboutLeftBox,.aboutRightBox,.workLeftBox,.workRightBox,.environmentBoxTopRight,.environmentBoxBottomRight,.environmentBoxTopLeft,.environmentBoxBottomLeft{
        width: 100%;
        clear: both;
        float: none;
    }
    .aboutBox,.workBox,.memberQuestionBox{
        margin-left: 0px;
        max-width: 100%;
    }
    .aboutTitle,.aboutText{
        padding-left: 30px;
    }
    .aboutBox::before {
        border-left: 1px solid #1567b1;
        top: -280%;
        width: 1px;
        height: 280%;
        left: 10px;
    }
    .aboutBox::after {
        top: -280%;
        width: 1px;
        left: 8px;
    }
    .aboutText{
        margin-bottom: 20px;
    }
    .boxLink {
        position: absolute;
        bottom: -40px;
        right: 0;
        left: 0;
        margin: auto;
        width: 90%;
    }
    .memberText{
        margin-left:-8px;
        margin-right:-8px;
        margin-bottom:20px;
    }
    .memberImgArea > div{
        width: 100%;
        float:none;
        clear: both;
    }
    .memberImgArea > div > div,
    .memberImgSPLink{
        width: 50%;
        float: left;
        position: relative;
    }
    .white_arrow{
        background-image: url(../images/sp/white_bg.png);
        min-height: 100px;
    }
    .gray_arrow{
        background-image: url(../images/sp/gray_bg.png);
        min-height: 100px;
    }
    .work,.environment,.member{
        padding-top: 30px;
    }
    .workTitle{
        width: 80%;
        margin-bottom: 15px;
    }
    .workText{
        margin-bottom: 20px;
    }
    .workLeftImg img{
        margin-bottom: 5px;
    }
    .workLeftImg{
        margin-bottom: 10px;
    }
    .workImgBox{
        overflow: hidden;
        margin-bottom: 10px;
    }
    .workSubText{
        margin-bottom: 15px;
    }
    .workImg{
        margin-bottom: 20px;
    }
    .workBox::before{
        top: -50%;
        height: 50%;
        width: 2px;
        right: unset;
        left: 15px;
    }
    .workBox::after{
        top: -50%;
        width: 2px;
        border-radius: 50%;
        right: unset;
        left: 13px;
    }
    .environmentTitle{
        text-align: left;
        margin-bottom: 15px;
    }
    .environmentBoxBottomRight{
        padding-top: 15px;
        padding-bottom: 30px;
    }
    .environmentBoxTopLeft{
        padding: 20px;
        margin-bottom: 20px;
    }
    .environmentList li{
        margin-bottom: 5px;
    }
    .environment_abu{
        position: absolute;
        top: -10px;
        left: -10px;
        width: 40px;
    }
    .environmentBoxBottomLeft::before {
        top: -30%;
        height: 30%;
        width: 2px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .environmentBoxBottomLeft::after {
        top: -30%;
        width: 2px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .memberTitle{
        width: 60%;
        margin: auto;
        text-align: center;
        margin-bottom: 15px;
    }
    .member_2, .member_4{
        margin-top: 28%;
    }
    .member_3{
        margin-top: -10%;
    }
    .member_4{
        margin-top: 15%;
    }
    .memberImgArea{
        margin-bottom: 20px;
    }
    .memberQuestionBox::before{
        top: -60px;
        height: 60px;
        width: 2px;
        left: 80px;
    }
    .memberQuestionBox::after{
        top: -60px;
        width: 2px;
        left: 78px;
    }
    .member{
        padding-bottom: 0px;
    }
    .about{
        font-size: 15px;
        line-height: 24px;
        letter-spacing: 4.4px;
    }

    .aboutBoxText{
        padding-left: 40px;
        background-image: url(../images/sp/question_1.png);
        background-position: left 16px top;
        background-size: 12px;
        letter-spacing: inherit;
    }
    .t7_b10{
        font-size: 15px;
        letter-spacing: inherit;
        letter-spacing: 4.4px;
    }
    .workSubText{
        font-size: 15px;
    }
    .workImgText{
        letter-spacing: 0px;
    }

    .box{
        padding: 25px 0px 10px;
        height: auto;
    }

    .memberQuestionBox{
        padding: 20px 10px 9px 6.5%;
        width: 97.5%;
        margin: auto;
    }

    .workBoxText {
        padding-left: 40px;
        background-image: url(../images/sp/question_2.png);
        background-position: left 16px top;
        background-size: 12px;
        letter-spacing: inherit;
    }
    .environmentBoxBottomRight{
        letter-spacing: 4.4px;
    }
    .environmentBoxText{
        padding-left: 40px;
        background-image: url(../images/sp/question_3.png);
        background-position: left 16px top;
        background-size: 12px;
        letter-spacing: inherit;
    }
    .memberBoxText {
        padding-left: 33px;
        background-image: url(../images/sp/question_4.png);
        background-position: left 3px;
        background-size: 8px;
        letter-spacing: inherit;
        font-size: 0.95em;
        line-height: 1.3em;
    }

    .memberBox{
        position: relative;
    }
}
@media print, screen and (min-width:768px){
    .memberText{
        font-size:16px;
    }
}

/*==============================================================================
2018/12/13 追記
==============================================================================
 INFORMATION
==============================================================================*/
.information{

}

.information .informationArea{
    width: 95%;
    max-width: 1070px;
    margin: auto;
}

.information .informationArea .informationMainTitle{
    width: 166px;
    float: left;
    position: relative;
    top: -9px;
}

.information .informationArea .informationMainTitle > img{
    width: 100%;
    height: auto;
}

.information .informationArea .informationList{
    float: right;
    width: 845px;
}

.information .informationArea .informationList .informationLine{
    display: table;
    width: 100%;
    margin-bottom: 10px;
}

.information .informationArea .informationList > .informationLine:last-child{
    margin-bottom: 0;
}

.information .informationArea .informationList .informationLine .informationDate{
    display: table-cell;
    font-size: 1.05em;
    width: 112px;
}

.information .informationArea .informationList .informationLine .informationListTitle{
    display: table-cell;
    word-break: break-all;
    font-size: 1.05em;
}
.information .informationArea .informationList .informationLine a.informationListTitle{
    text-decoration: underline;
    color:#333;
}
.information .informationArea .informationList .informationLine a.informationListTitle:hover,
.information .informationArea .informationList .informationLine a.informationListTitle:hover:focus{
    opacity: 0.8;
}


@media screen and (max-width:1220px){
    .information .informationArea .informationList{
        width: 80.6%;
    }
}

@media screen and (max-width:990px){
    .information .informationArea .informationList{
        width: 75%;
    }
}

@media screen and (max-width:767px){
    .information .informationArea {
        width: 88%;
    }

    .information .informationArea .informationMainTitle {
        width: 162px;
        float: none;
        top: 0;
        margin-bottom: 16px;
    }

    .information .informationArea .informationList {
        width: 100%;
        float: none;
    }

    .information .informationArea .informationList .informationLine {
        display: block;
    }

    .information .informationArea .informationList .informationLine .informationDate {
        display: block;
        width: 100%;
        margin-bottom: 6px;
    }

    .information .informationArea .informationList .informationLine .informationListTitle {
        display: block;
        margin-bottom: 14px;
    }
}

/*==============================================================================
 ABOUT US
==============================================================================*/
.aboutArea{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.aboutArea .aboutContentBox{

}

.aboutArea .aboutContentBox .aboutLeftContent{
    width: 42.5%;
    float: left;
}

.aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList{
    position: relative;
    height: 38vw;
    max-height: 503px;
}

.aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList .aboutPhoto{
    position: absolute;
    overflow: hidden;
}

.aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList > .aboutPhoto:nth-child(1){
    top: 0;
    right: 0;
    width: 88.3%;
    max-width: 450px;
}

.aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList > .aboutPhoto:nth-child(2){
    top: 47.5%;
    left: 0;
    width: 47%;
    max-width: 240px;
    z-index: 2;
}

.aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList > .aboutPhoto:nth-child(3){
    bottom: 0;
    right: 16.5%;
    width: 47%;
    max-width: 240px;
    z-index: 1;
}

.aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList .aboutPhoto::after{
    display: block;
    content: " ";
    background: #cccccc;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -200%;
    transition: all 1s;
}

.aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList.is-animated .aboutPhoto::after{
    left: 100%;
}

.aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList .aboutPhoto > img{
    width: 100%;
    height: auto;
    opacity: 0;
    transition-delay: .3s;
}

.aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList.is-animated .aboutPhoto > img{
    opacity: 1;
}

.aboutArea .aboutContentBox .aboutRightContent{
    width: 52.3%;
    float: right;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutTitle {
    margin-bottom: 28px;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutTitle .aboutTitleBack{
    position: relative;
    overflow: hidden;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutTitle .aboutTitleBack::after{
    display: block;
    content: " ";
    background: #1567b1;
    height: 100%;
    width: 200%;
    position: absolute;
    top: 0;
    left: -200%;
    transition: all 1s;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutTitle.is-animated .aboutTitleBack::after{
    left: 100%;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutTitle .aboutTitleBack > img{
    width: 100%;
    height: auto;
    opacity: 0;
    transition-delay: .3s;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutTitle.is-animated .aboutTitleBack > img{
    opacity: 1;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutTextArea{
    line-height: 1.82em;
    letter-spacing: 0.15em;
    margin-bottom: 40px;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea{
    position: relative;
    opacity: 0;
    transition: all .7s;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea.is-animated{
    opacity: 1;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutExplaneBox{
    position: relative;
    border: 1px solid #1567b1;
    background: #fff;
    width: 79.5%;
    margin-left: 4%;
    padding: 23px 10px 23px 37px;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutExplaneBox::before{
    content: "";
    display: block;
    background: #1567b1;
    width: 120px;
    height: 1px;
    position: absolute;
    top: 64px;
    left: -120px;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutExplaneBox::after{
    content: "";
    display: block;
    background: #1567b1;
    width: 5px;
    height: 5px;
    position: absolute;
    top: 62px;
    border-radius: 50%;
    left: -122px;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutExplaneBox .aboutExplane{
    color: #1567b1;
    background-image: url(../images/question_1.png);
    background-repeat: no-repeat;
    background-position: left 4px;
    font-size: 15px;
    letter-spacing: 0.25em;
    line-height: 1.7em;
    margin-bottom: 4px;
    padding-left: 40px;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutExplaneBox > .aboutExplane:last-child{
    margin-bottom: 0;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutLinkBtn{
    background: #1567b1;
    border: 1px solid #1567b1;
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    letter-spacing: 0.25em;
    width: 300px;
    padding: 10px 0;
    position: absolute;
    bottom: -33px;
    right: 0.5%;
    transition: all .3s;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutLinkBtn:hover{
    background: #ffffff;
    color: #1567b1;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutLinkBtn .aboutLinkBtnText{
    padding-left: 25px;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutLinkBtn .aboutLinkBtnText::after{
    display: inline-block;
    content: " ";
    background: url(../images/arrow_7.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7px;
    width: 7px;
    height: 10px;
    padding-left: 29px;
    transition: all .3s;
}

.aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutLinkBtn:hover .aboutLinkBtnText::after{
    background: url(../images/arrow_3.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7px;
}

@media screen and (max-width:950px){
    .aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutExplaneBox {
        width: 93.5%;
        margin-left: 2%;
        padding: 23px 10px 23px 19px;
    }

    .aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutLinkBtn {
        right: 0;
    }
}

@media screen and (max-width:767px){
    .aboutArea .aboutContentBox .aboutLeftContent {
        width: 92%;
        float: none;
        margin-bottom: 22px;
    }

    .aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList {
        height: 78vw;
        max-height: inherit;
    }

    .aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList > .aboutPhoto:nth-child(1) {
        width: 89.5%;
        max-width: inherit;
    }

    .aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList > .aboutPhoto:nth-child(2) {
        top: 52.5%;
        width: 40.5%;
        max-width: inherit;
    }

    .aboutArea .aboutContentBox .aboutLeftContent .aboutPhotoList > .aboutPhoto:nth-child(3) {
        right: 28.5%;
        width: 40.3%;
        max-width: inherit;
    }

    .aboutArea .aboutContentBox .aboutRightContent {
        width: 100%;
        float: none;
    }

    .aboutArea .aboutContentBox .aboutRightContent .aboutTitle{
        margin: 0;
        margin-bottom: 9px;
        padding-left: 40px;
        width: 85%;
        max-width: 286.88px;
    }

    .aboutArea .aboutContentBox .aboutRightContent .aboutTextArea{
        padding-left: 40px;
        line-height: 1.7em;
        margin-bottom: 23px;
    }

    .aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutExplaneBox {
        width: 100%;
        margin-left: 0;
        padding: 17px 10px 19px 21px;
    }

    .aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutExplaneBox::before {
        width: 1px;
        height: 102vw;
        top: -102vw;
        left: 20px;
        z-index: 3;
    }

    .aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutExplaneBox::after {
        top: -102vw;
        left: 18px;
        z-index: 3;
    }

    .aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutExplaneBox .aboutExplane {
        line-height: 1.5em;
        background-size: 10px;
        padding-left: 35px;
    }

    .aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutLinkBtn {
        right: 5%;
        width: 89.4%;
        font-size: 15px;
        padding: 12.5px 0;
        bottom: -41px;
    }
}

@media screen and (max-width:350px){
    .aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutLinkBtn .aboutLinkBtnText {
        padding-left: 10px;
    }

    .aboutArea .aboutContentBox .aboutRightContent .aboutExplaneArea .aboutLinkBtn .aboutLinkBtnText::after {
        padding-left: 0px;
    }
}

/*==============================================================================
 WORK
==============================================================================*/
.workArea{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.workArea .workTitle{
    margin-bottom: 29px;
}

.workArea .workTitle .workTitleBack{
    position: relative;
    overflow: hidden;
}

.workArea .workTitle .workTitleBack::after{
    display: block;
    content: " ";
    background: #29abe2;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -200%;
    transition: all 1s;
}

.workArea .workTitle.is-animated .workTitleBack::after{
    left: 100%;
}

.workArea .workTitle .workTitleBack > img{
    width: 100%;
    height: auto;
    opacity: 0;
    transition-delay: .3s;
}

.workArea .workTitle.is-animated .workTitleBack > img{
    opacity: 1;
}

.workArea .workContentBox{

}

.workArea .workContentBox .workLeftContent{
    width: 54.3%;
    float: left;
}

.workArea .workContentBox .workLeftContent .workMainExplane{
    font-size: 16px;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    color: #232323;
    line-height: 1.85em;
    letter-spacing: 0.2em;
    margin-bottom: 35px;
}

.workArea .workContentBox .workLeftContent .workPhotoList{
    text-align: center;
    margin-bottom: 27px;
}

.workArea .workContentBox .workLeftContent .workPhotoList .workPhotoCell{
    text-align: center;
    width: 32.671%;
    display: inline-block;
    margin-bottom: 29px;
}

.workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(4),
.workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(5){
    margin-bottom: 0;
}

.workArea .workContentBox .workLeftContent .workPhotoList .workPhotoCell .workPhotoBox{
    width: 90%;
}

.workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(1) .workPhotoBox{
    margin: 0 auto 0 0;
}

.workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(2) .workPhotoBox{
    margin: auto;
}

.workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(3) .workPhotoBox{
    margin:  0 0 0 auto;
}

.workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(4) .workPhotoBox{
    margin: 0 auto 0 0;
}

.workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(5) .workPhotoBox{
    margin:  0 0 0 auto;
}

.workArea .workContentBox .workLeftContent .workPhotoList .workPhotoBox .workPhoto{
    margin-bottom: 14px;
}

.workArea .workContentBox .workLeftContent .workPhotoList .workPhotoBox .workPhoto > img{
    width: 100%;
    height: auto;
}

.workArea .workContentBox .workLeftContent .workPhotoList .workPhotoBox .workPhotoText{
    color: #1567b1;
    font-size: 15px;
    line-height: 1em;
    letter-spacing: 0.2em;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.workArea .workContentBox .workLeftContent .workSubExplane{
    font-size: 13px;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    color: #232323;
    line-height: 1.7em;
    letter-spacing: 0.25em;
}

.workArea .workContentBox .workRightContent{
    width: 43.5%;
    float: right;
}

.workArea .workContentBox .workRightContent .workRightMainPhoto{
    width: 85%;
    margin: 0 0 50px auto;
}

.workArea .workContentBox .workRightContent .workRightMainPhoto .workImgBack{
    position: relative;
    overflow: hidden;
}

.workArea .workContentBox .workRightContent .workRightMainPhoto .workImgBack::after{
    display: block;
    content: " ";
    background: #cccccc;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -200%;
    transition: all 1s;
}

.workArea .workContentBox .workRightContent .workRightMainPhoto.is-animated .workImgBack::after{
    left: 100%;
}

.workArea .workContentBox .workRightContent .workRightMainPhoto .workImgBack > img{
    width: 100%;
    height: auto;
    opacity: 0;
    transition-delay: .3s;
}

.workArea .workContentBox .workRightContent .workRightMainPhoto.is-animated .workImgBack > img{
    opacity: 1;
}

.workArea .workContentBox .workRightContent .workExplaneArea{
    position: relative;
    opacity: 0;
    transition: all .7s;
}

.workArea .workContentBox .workRightContent .workExplaneArea.is-animated{
    opacity: 1;
}

.workArea .workContentBox .workRightContent .workExplaneArea .workExplaneBox{
    padding: 22px 10px 22px 7.5%;
    position: relative;
    background: #fff;
    border: 1px solid #29abe2;
    width: 96%;
}

.workArea .workContentBox .workRightContent .workExplaneArea .workExplaneBox::before{
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 190px;
    background: #29abe2;
    top: -190px;
    right: 11.8%;
}

.workArea .workContentBox .workRightContent .workExplaneArea .workExplaneBox::after{
    content: "";
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    background: #29abe2;
    border-radius: 50%;
    top: -190px;
    right: 11.5%;
}

.workArea .workContentBox .workRightContent .workExplaneArea .workExplaneBox .workExplane{
    color: #29abe2;
    font-size: 15px;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    line-height: 1.7em;
    letter-spacing: 0.25em;
    background-image: url(../images/question_2.png);
    background-repeat: no-repeat;
    background-position: left 5px;
    margin-bottom: 5px;
    padding-left: 38px;
}

.workArea .workContentBox .workRightContent .workExplaneArea .workExplaneBox > .workExplane:last-child{
    margin-bottom: 0;
}

.workArea .workContentBox .workRightContent .workExplaneArea .workLinkBtn{
    display: block;
    width: 300px;
    padding: 10px 0;
    letter-spacing: 0.25em;
    text-align: center;
    font-size: 14px;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    background: #29abe2;
    color: #ffffff;
    border: 1px solid #29abe2;
    position: absolute;
    bottom: -33px;
    right: 0;
    transition: all .3s;
}

.workArea .workContentBox .workRightContent .workExplaneArea .workLinkBtn:hover{
    background: #ffffff;
    color: #29abe2;
    text-decoration: none;
}

.workArea .workContentBox .workRightContent .workExplaneArea .workLinkBtn .workLinkBtnText{
    padding-left: 25px;
}

.workArea .workContentBox .workRightContent .workExplaneArea .workLinkBtn .workLinkBtnText::after{
    display: inline-block;
    content: " ";
    background: url(../images/arrow_7.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7px;
    width: 7px;
    height: 10px;
    padding-left: 29px;
    transition: all .3s;
}

.workArea .workContentBox .workRightContent .workExplaneArea .workLinkBtn:hover .workLinkBtnText::after{
    background: url(../images/arrow_4.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7px;
}

@media screen and (max-width:1310px){
    .workArea .workContentBox .workLeftContent .workPhotoList .workPhotoBox .workPhotoText {
        font-size: 13px;
    }
}

@media screen and (max-width:1250px){
    .workArea .workContentBox .workLeftContent .workPhotoList .workPhotoCell {
        width: 32%;
    }
}

@media screen and (max-width:1200px){
    .workArea .workContentBox .workLeftContent .workPhotoList .workPhotoCell .workPhotoBox {
        width: 92%;
    }

    .workArea .workContentBox .workLeftContent .workPhotoList .workPhotoBox .workPhotoText {
        font-size: 11px;
        letter-spacing: 0em;
    }
}

@media screen and (max-width:900px){
    .workArea .workContentBox .workRightContent .workExplaneArea .workLinkBtn {
        width: 260px;
    }
}

@media screen and (max-width:767px){
    .workArea .workTitle {
        margin-bottom: 8px;
        width: 83%;
        max-width: 280px;
    }

    .workArea .workContentBox .workLeftContent {
        width: 100%;
        float: none;
    }

    .workArea .workContentBox .workRightContent {
        width: 100%;
        float: none;
    }

    .workArea .workContentBox .workLeftContent .workMainExplane {
        font-size: 15px;
        line-height: 1.79em;
        letter-spacing: 0.25em;
        margin-bottom: 19px;
    }

    .workArea .workContentBox .workLeftContent .workPhotoList {
        margin-bottom: 17px;
    }

    .workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(3){
        width: 100%;
    }

    .workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(1),
    .workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(2),
    .workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(4),
    .workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(5){
        width: 48%;
    }

    .workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(2) .workPhotoBox {
        margin: 0 0 0 auto;
    }

    .workArea .workContentBox .workLeftContent .workPhotoList > .workPhotoCell:nth-child(3) .workPhotoBox {
        margin: auto;
        width: 46%;
    }

    .workArea .workContentBox .workLeftContent .workPhotoList .workPhotoBox .workPhoto {
        margin-bottom: 4px;
    }

    .workArea .workContentBox .workLeftContent .workPhotoList .workPhotoBox .workPhotoText{
        font-size: 14px;
        letter-spacing: 0.19em;
            word-break: keep-all;
    }

    .workArea .workContentBox .workLeftContent .workPhotoList .workPhotoCell {
        margin-bottom: 14px;
    }

    .workArea .workContentBox .workLeftContent .workSubExplane {
        font-size: 15px;
        letter-spacing: 0.2em;
        line-height: 1.75em;
        margin-bottom: 11px;
    }

    .workArea .workContentBox .workRightContent .workRightMainPhoto {
        width: 100%;
        margin: 0 0 28px auto;
    }

    .workArea .workContentBox .workRightContent .workExplaneArea .workExplaneBox {
        width: 100%;
    }

    .workArea .workContentBox .workRightContent .workExplaneArea .workExplaneBox .workExplane {
        font-size: 14px;
        line-height: 1.2em;
        letter-spacing: 0.25em;
        background-position: left 3px;
        background-size: 9px;
        margin-bottom: 8px;
        padding-left: 35px;
    }

    .workArea .workContentBox .workRightContent .workExplaneArea .workLinkBtn {
        width: 89%;
        right: 5.5%;
        padding: 14px 0;
        bottom: -40px;
    }

    .workArea .workContentBox .workRightContent .workExplaneArea .workExplaneBox::before {
        height: 63px;
        top: -63px;
        right: inherit;
        left: 6%;
    }

    .workArea .workContentBox .workRightContent .workExplaneArea .workExplaneBox::after {
        top: -63px;
        right: inherit;
        left: 5.5%;
    }
}

/*==============================================================================
 ENVIRONMENT
==============================================================================*/
.environmentArea{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.environmentArea .environmentTitle{

}

.environmentArea .environmentTitle .environmentTitleBack{

}

.environmentArea .environmentTitle .environmentTitleBack > img{
    width: 100%;
    height: auto;
}

.environmentArea .environmentContentBox{

}

.environmentArea .environmentContentBox .environmentRightContent{
    width: 50%;
    float: right;
}

.environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList{
    position: relative;
    width: 100%;
    height: 24.7vw;
    max-height: 329px;
    margin-bottom: 35px;
}

.environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList .environmentPhoto{
    position: absolute;
    overflow: hidden;
}

.environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList > .environmentPhoto:nth-child(1){
    right: 0;
    top: 0;
    width: 67.5%;
}

.environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList > .environmentPhoto:nth-child(2){
    right: 58%;
    bottom: 0;
    max-width: 240px;
    width: 40%;
    z-index: 2;
}

.environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList > .environmentPhoto:nth-child(3){
    left: -20.2%;
    top: 25%;
    max-width: 240px;
    width: 40%;
}

.environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList .environmentPhoto::after{
    display: block;
    content: " ";
    background: #cccccc;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -200%;
    transition: all 1s;
}

.environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList.is-animated .environmentPhoto::after{
    left: 100%;
}

.environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList .environmentPhoto > img{
    width: 100%;
    height: auto;
    opacity: 0;
    transition-delay: .3s;
}

.environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList.is-animated .environmentPhoto > img{
    opacity: 1;
}

.environmentArea .environmentContentBox .environmentRightContent .environmentExplane{
    line-height: 1.82em;
    letter-spacing: 0.2em;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.environmentArea .environmentContentBox .environmentLeftContent{
    width: 41.6%;
    float: left;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox{
    position: relative;
    background: #EFEFEF;
    width: 84.2%;
    padding: 34px 7%;
    margin-bottom: 40px;
    opacity: 0;
    transition: all .7s;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox.is-animated{
    opacity: 1;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox::after{
    display: block;
    content: " ";
    background: url(../images/environment_img1.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 55px;
    height: 62px;
    position: absolute;
    top: -18px;
    left: -20px;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox .environmentPointTitle{
    color: #1567b1;
    font-size: 24px;
    margin-bottom: 12px;
    padding-left: 5px;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox .environmentPointList{

}

.environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox .environmentPointList .environmentPoint{
    position: relative;
    padding-left: 20px;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox .environmentPointList .environmentPoint::after{
    display: block;
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox .environmentPointEtc{
    padding-left: 5px;
    letter-spacing: 0.25em;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea{
    position: relative;
    opacity: 0;
    transition: all .7s;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea.is-animated{
    opacity: 1;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentExplaneBox{
    position: relative;
    border: 1px solid #7ac943;
    padding: 22px 10px 22px 7.5%;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentExplaneBox::before{
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 70px;
    background: #7ac943;
    top: -70px;
    left: 90px;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentExplaneBox::after{
    content: "";
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    background: #7ac943;
    border-radius: 50%;
    top: -70px;
    left: 88px;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentExplaneBox .environmentExplane{
    color: #7ac943;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    line-height: 1.7em;
    letter-spacing: 0.25em;
    padding-left: 38px;
    background-image: url(../images/question_3.png);
    background-repeat: no-repeat;
    background-position: left 3px;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentLinkBtn{
    display: block;
    width: 300px;
    padding: 10px 0;
    letter-spacing: 0.25em;
    text-align: center;
    font-size: 14px;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    background: #7ac943;
    color: #ffffff;
    border: 1px solid #7ac943;
    position: absolute;
    bottom: -33px;
    right: -35px;
    transition: all .3s;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentLinkBtn:hover{
    background: #fff;
    color: #7ac943;
    text-decoration: none;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentLinkBtn .environmentLinkBtnText{
    padding-left: 11px;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentLinkBtn .environmentLinkBtnText::after{
    display: inline-block;
    content: " ";
    background: url(../images/arrow_7.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7px;
    width: 7px;
    height: 10px;
    padding-left: 13px;
    transition: all .3s;
}

.environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentLinkBtn:hover .environmentLinkBtnText::after{
    background: url(../images/arrow_5.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7px;
}

@media screen and (max-width:767px){
    .environmentArea .environmentTitle {
        max-width: 317px;
        width: 94%;
        margin: 0 0 13px auto;
    }

    .environmentArea .environmentContentBox .environmentRightContent {
        width: 100%;
        float: none;
    }

    .environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList {
        height: 70.7vw;
        max-height: inherit;
    }

    .environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList > .environmentPhoto:nth-child(1) {
        width: 70%;
        max-width: inherit;
    }

    .environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList > .environmentPhoto:nth-child(2) {
        right: 28.3%;
        width: 44.5%;
        max-width: inherit;
    }

    .environmentArea .environmentContentBox .environmentRightContent .environmentPhotoList > .environmentPhoto:nth-child(3) {
        left: 0;
        top: 40%;
        max-width: inherit;
        width: 48.5%;
    }

    .environmentArea .environmentContentBox .environmentLeftContent {
        width: 100%;
        float: none;
    }

    .environmentArea .environmentContentBox .environmentRightContent .environmentExplane{
        font-size: 15px;
        letter-spacing: 0.2em;
        line-height: 1.75em;
        margin-bottom: 36px;
    }
    

    .environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox.is-animated{
        width: 94%;
        margin: auto;
        margin-bottom: 30px;
        padding: 34px 7.7%;
    }
    
    .environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox .environmentPointTitle{
        width:55px;
        margin-bottom: 13px;
    }

    .environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox .environmentPointList{

    }

    .environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox .environmentPointList .environmentPoint {
        padding-left: 18px;
        font-size: 14px;
        margin-bottom: 5px;
        line-height:24px;
    }

    .environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentExplaneBox::before {
        height: 62px;
        top: -62px;
        left: 50%;
    }

    .environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentExplaneBox::after {
        top: -62px;
        left: 49.5%;
    }

    .environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentExplaneBox {
        padding: 22px 10px 22px 6.5%;
    }

    .environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentExplaneBox .environmentExplane {
        font-size: 14px;
        padding-left: 36px;
        line-height: 1.3em;
        background-size: 10px;
    }

    .environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentLinkBtn{
        width: 90%;
        right: 5%;
        font-size: 15px;
        padding: 14px 0;
    }

    .environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentLinkBtn .environmentLinkBtnText {
        padding-left: 1px;
    }

    .environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentLinkBtn .environmentLinkBtnText::after {
        padding-left: 2px;
    }
}
@media print,screen and (min-width:768px){
    .environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox{
        font-size:16px;
    }
    .environmentArea .environmentContentBox .environmentRightContent .environmentExplane{
        font-size:16px;
    }
    .environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox .environmentPointTitle{
        width:75px;
        margin-bottom: 18px;
    }
    .environmentArea .environmentContentBox .environmentLeftContent .environmentPointBox .environmentPointList .environmentPoint{
        line-height:28px;
    }
    .environmentArea .environmentContentBox .environmentLeftContent .environmentExplaneArea .environmentExplaneBox{
        margin-bottom:30px;
    }
}

/*==============================================================================
 MEMBER
==============================================================================*/
.memberArea{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.memberBoxLink{
    background: #ff9b8b;
    display: block;
    border: 1px solid #ff9b8b;
    right: -270px;
    bottom: -30px;
    width: 300px;
    padding: 10px 0;
    letter-spacing: 0.25em;
    text-align: center;
    font-size: 14px;
    font-weight:bold;font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    color: #ffffff;
    position: absolute;
    height: inherit;
    line-height: inherit;
    transition: all .3s;
}

.memberBoxLink:hover{
    background: #ffffff;
    color: #ff9b8b;
}

.memberBoxLink .memberLinkBtnText{

}

.memberBoxLink .memberLinkBtnText::after{
    display: inline-block;
    content: " ";
    background: url(../images/arrow_7.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7px;
    width: 7px;
    height: 10px;
    padding-left: 13px;
    transition: all .3s;
}

.memberBoxLink:hover .memberLinkBtnText::after{
    background: url(../images/arrow_6.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 7px;
}

@media screen and (max-width:767px){
    .memberTitle {
        width: 197px;
    }

    .memberBoxLink.boxLink{
        left: inherit;
        right: 2%;
        width: 100%;
        bottom: -62px;
        padding: 14px 0;
    }
}