@charset "UTF-8";
*{
    box-sizing: border-box;
}
body{
    color: #111;
    font-family: YuGothic, '游ゴシック', 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', Tahoma, Verdana, Arial, Verdana, sans-serif;
    text-transform:none;
    line-height: 1.8;
}
.hero-header .navbar-wrapper {
    margin-bottom: 0;
}
.background-set{
    height:auto;
}
main p{
    line-height: 1.8;
}
main img{
    width: 100%;
    height: auto;
    display: block;
}
main h2{
    font-weight: 700;
    font-size: 1.8em;
    margin: 60px auto 6px;
    text-align: center;
    text-transform: none;
}
main .h2_sub{
    font-size: 1em;
    margin: 0 auto 30px;
    text-align: center;
    width: 100%;
    display: block;
}
.head-area{
    position: relative;
    margin: 0 auto 10px;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
    background: #F8F6FE;
}

.head-img{
    max-width: 1170px;
    max-height: 440px;
    margin: -1px auto 0;
}
/*
.head-text-outer{
    position: absolute;
    width: 45%;
    height: 100%;
    top: 0;
    left: 65%;
    transform: skewX(-20deg);
    background: #fff;
    opacity: 0.7;
    z-index: 2;
}
.head-text{
    position: absolute;
    width: 35%;
    height: 100%;
    top: 0;
    left: 65%;
    z-index: 3;
}
.head-text-inner{
    position: relative;
    height:100%;
    width:100%;
}
.head-text .head-logo{
    position: absolute;
    top: 33%;
    left: 16%;
    display: block;
    width: 70%;
}*/
/*.head-text span{
    position: absolute;
    top: 47%;
    left: 16%;
    width: 84%;
    display: block;
    font-size: 1.2em;
}
.head-text p{
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 90%;
    margin: auto;
    font-size: 0.9em;
    line-height: 1.8;
}*/
@media only screen and (max-width: 767px) {
/*    .head-text-outer{
        position: absolute;
        width: 93%;
        height: 100%;
        top: 0;
        left: 15%;
        transform: skewX(-20deg);
        z-index: 2;
    }
    .head-text{
        position: absolute;
        width: 85%;
        height: 100%;
        top: 0;
        left: 15%;
        z-index: 3;
    }
    .head-text .head-logo{
        position: absolute;
        top: 13%;
        left: 10%;
        display: block;
        width: 90%;
    }*/
/*    .head-text span{
        position: absolute;
        top: 42%;
        left: 16%;
        width: 84%;
        display: block;
        font-size: 1.2em;
    }
    .head-text p{
        position: absolute;
        bottom: 10%;
        left: 7%;
        width: 93%;
        margin: auto;
        font-size: 0.8em;
        line-height: 1.5;
    }*/
}
.sec-area01{
    margin: 0 auto 60px;
    padding: 0;
    width: 100%;
    height: auto;
}
.col-4{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: start;
    flex-wrap: wrap;
    width: 90%;
    height: auto;
    margin: auto;
}
.col-4 .col-inner{
    width:calc(25% - 4px);
    height: auto;
    margin:2px;
    display: block;
}
.col-4 .col-img{
    position: relative;
    width: 100%;
    height: 29vw;
    max-height: 344px;
}
.col-4 .col-img .sec1-img{
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    z-index: 1;
}
.col-4 .col-img .col-img-text{
    position: absolute;
    width: 90%;
    height: 25%;
    min-height: 50px;
    top: 30px;
    left: 0;
    z-index: 2;
    background-color: rgba( 140, 55, 202, 0.5 );
}
.col-4 .col-img .col-img-text p{
    color: #fff;
    font-size: 1.5em;
    padding: 7% 5px 60px 10px;
    font-weight: 600;
}
.col-4 .col-textarea{
    display: block;
}
.col-4 .col-textarea h3{
    display: block;
    font-size: 1.4em;
    margin: auto;
    text-align: center;
    width: 100%;
    padding: 27px 5px;
    font-weight: 600;
}
.col-4 .col-textarea p{
    display: block;
    font-size: 1.2em;
    margin: auto;
    text-align: left;
    width: 100%;
    padding: 0 10px;
}
@media only screen and (max-width: 767px) {
    .col-4{
        display: block;
    }
    .col-4 .col-inner{
        width:calc(100% - 4px);
        height: auto;
        margin:2px;
        display: block;
        margin-bottom: 52px;
    }
    .col-4 .col-img{
        position: relative;
        width: 100%;
        height: 116vw;
        max-height: none;
    }
    .col-4 .col-textarea h3{
        padding: 12px 5px;
    }
}
.sec-outer-purple{
    margin: auto;
    padding: 0;
    width: 100%;
    height: auto;
    background-color: rgba( 142, 148, 186, 0.2 );
}
.sec-area02{
    margin: auto;
    padding: 0;
    width: 100%;
    height: auto;
}
.sec-area02 .sec2-logo{
    width:30%;
    min-width: 300px;
    display: block;
    margin:auto;
}
.sec-area02 .sec2-text{
    width: 48%;
    min-width: 300px;
    display: block;
    margin: 10px auto;
    text-align: left;
    padding: 50px 0;
    font-size: 1.2em;
    line-height: 1.7;
}
.col-3{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: start;
    flex-wrap: wrap; 
    width:66%;
    height: auto;
    margin:auto;
    padding-bottom: 40px;
}
.col-3 .col-inner{
    width:calc(33.33% - 20px);
    height: auto;
    margin:10px;
    display: block;
    background: #fff;
    border-radius: 5px;
}
.col-3 .col-inner img{
    margin:20px auto 0;
    display: block;
    height:50px;
    width: auto;
}
.col-3 .col-inner p{
    padding:20px 9%;
}
@media only screen and (max-width: 767px) {
    .col-3 .col-inner {
        width: calc(100% - 20px);
        height: auto;
        margin: 10px;
        display: block;
        background: #fff;
        border-radius: 5px;
    }
}
.sec-area03{
    margin: auto;
    padding: 0;
    width: 100%;
    height: auto;
    max-width: none;
}
.topimg_area{
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    background: #F8F6FC;
}
.topimg_inner{
    position: relative;
    width: 35%;
    height: auto;
    margin: 0 auto;
    min-width: 768px;
}
.topimg_inner img{
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    margin: auto;
}
@media only screen and (max-width: 767px) {
    .topimg_inner{
        width: 100%;
        min-width: 100%;
    }
}
.topimg_coment1{
    color:#222;
    font-size: 1.5em;
    position: absolute;
    padding:3%;
    text-align: left;
    top:0;
    left:0;
    width:100%;
    line-height: 1.5;
    margin: auto;
}
.topimg_coment1.white{
    color:#FFF;
}
.topimg_coment1.text_right{
    text-align: right;
    left: auto;
    right: 0;
}
.topimg_coment1 .co_title{
    font-size: 0.8em;
    font-weight: 600;
}

.topimg_coment2{
    color:#FFF;
    font-size: 1em;
    position: absolute;
    padding: 5% 5% 2%;
    text-align: left;
    bottom:0;
    left:0;
    width:100%;
    background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8));
}
@media only screen and (max-width: 767px) {
    .topimg_area{
        width:100%;
    }
    .topimg_coment1{
        font-size: 1.2em;
        position: absolute;
        padding: 2%;
        text-align: left;
        top: 0;
        left: 0;
        width: 90%;
        line-height: 1.3;
    }
    .topimg_coment2{
        color:#FFF;
        font-size: 0.8em;
        position: absolute;
        padding:5%;
        text-align: left;
        bottom:0;
        left:0;
        width:100%;
        line-height: 1.2;
    }
    .topimg_coment1.text_right{
        right:0;
    }
}
.logo_area{
    width:100%;
    height: auto;
    margin: 10px auto;
}

.img_area{
    width:45%;
    height: auto;
    min-width: 668px;
    margin: 0 auto 10vw;
}
.sec-area03-03 .img_area img{
    width:70%;
    margin:auto;
}
@media only screen and (max-width: 767px) {
    .logo_area,
    .img_area,
    .sec-area03-03 .img_area img{
        width:100%;
        min-width: 100%;
    }
}
.img_area .attention{
    text-align: right;
    font-size: 0.8em;
}
.img_area .img_area_text{
    text-align: left;
    font-size: 1.2em;
    width: 80%;
    margin: auto;
}
.sec-area03-03 .img_area .img_area_text{
    width: 70%;
}
@media only screen and (max-width: 767px) {
    .img_area .img_area_text{
        width: 90%;
    }
    .sec-area03-03 .img_area .img_area_text{
        width: 90%;
    }
}
.img_area .img_area_text h2{
    text-align: left;
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.5
}
.btn_img{
    width: 100%;
}
.btn_inner{
    width: 200px;
    margin: 40px auto 10px;
    padding: 12px 10px;
    display: block;
    background: #C9BDDE;
    border: #C9BDDE 2px solid;
    border-radius: 28px;
    text-align: center;
    color: #fff;
    font-size: 1.3em;
    cursor: pointer;
    transition: all 0.3s;
}
.btn_inner:hover{
    background: #FFF;
    color: #552b9f;
}
.video_outer{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100vh;
    background: #000;
    display: none;

}
.vedeo_block{
    opacity: 0.5;
}
.video_inner{
    width:100%;
    max-width: 940px;
    margin:auto;
    position: fixed;
    top: 50%;
    left: 50%;
}
.video_inner_af{
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: all 0.3s;
}
.video_inner_be{
    -webkit-transform: translate(-50%, -30%);
    -ms-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
    opacity: 0;
    transition: all 0.3s;
    display: none;
}
.bgvid{
    width: 100%;
    background: #FFF;
}
.video_close{
    width:100%;
}
.go_modal{
    position: absolute;
    top: -50px;
    right: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.go_modal > .go_line1 {
    position: absolute;
	left:10px;
	width: 30px;
	height: 4px;
	background-color: #000;
    top:12px;
    -webkit-transform: translateY(11px) rotate(-45deg);
    transform: translateY(11px) rotate(-45deg);
}
.go_modal > .go_line2 {
    position: absolute;
	left:10px;
	width: 30px;
	height: 4px;
	background-color: #000;
    bottom:12px;
    -webkit-transform: translateY(-11px) rotate(45deg);
    transform: translateY(-11px) rotate(45deg);
}
.modal_fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling:touch;
}
.col-2{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: start;
    flex-wrap: wrap; 
    width:60%;
    height: auto;
    margin:auto;
    padding-bottom: 30px;
}
.logo_area .col-2{
    width: 40%;
    min-width: 768px;
}
@media only screen and (max-width: 767px) {
    .logo_area .col-2{
        width: 90%;
        min-width: 90%;
    }
}
.sec-area03-02 .logo_area .col-2{
    -webkit-justify-content: left;
    justify-content: left;
}
.col-2 .col-inner{
    width: calc(50% - 14px);
    height: auto;
    margin: 7px;
    display: block;
}
.col-2 .col-2-left {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: left;
    justify-content: left;
    -webkit-align-items: center;
    align-items: start;
    flex-wrap: wrap; 
    width: 100%;
    text-align: center;
}
.col-2 .col-2-left .left{
    width:60%;
}
.col-2 .col-2-left .right{
    width:20%;
}
@media only screen and (max-width: 767px) {
    .col-2 .col-2-left .right{
        width:40%;
    }
}
.sec-area03-03 .col-2 .col-2-left .left{
    width:30%;
}
.sec-area03-03 .col-2 .col-2-left .right{
    width:70%;
}
.col-2 .col-2-left .logosub{
    padding:5px;
}
.col-2 .col-2-left .left .logoouter img,
.col-2 .col-2-left .right .logoouter img{
    width: auto;
    height: 40px;
    margin: auto;
}
.col-2 .col-2-right {
    width: 100%;
    padding:5px;
    font-size: 1em;
}
.sec-area03-02 .col-2 .col-2-left{
    -webkit-justify-content: left;
    justify-content: left;
}
.sec-area03-02 .col-2 .col-2-left .left{
    width:60%;
}
@media only screen and (max-width: 767px) {
    .col-2 {
        width: 90%;
        height: auto;
        margin: auto;
        padding-bottom: 30px;
    }
    .col-2 .col-inner {
        width: calc(100% - 2px);
        height: auto;
        margin: 1px;
        display: block;
    }
    .sec-area03-02 .col-2 .col-2-left .left .logoouter img{
        margin: auto 0;
    }
    .sec-area03-02 .col-2 .col-2-left .logosub {
        text-align: left;
    }
}
.r_col2{
    width: 60%;
    margin:auto;
    min-width:768px;
}
@media only screen and (max-width: 767px) {
    .r_col2{
        width: 94%;
        min-width: 94%;
    }   
}
.r_col2_inner{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: start;
    align-items: start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap; 
    width:100%;
    height: auto;
    margin:auto;
    margin-bottom: 5vw;
}
.sec-area03-01 .r_col2_inner:nth-child(2n),
.sec-area03-02 .r_col2_inner:nth-child(2n),
.sec-area03-03 .r_col2_inner:nth-child(2n+1){
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
@media only screen and (max-width: 767px) {
    .r_col2_inner{
        margin-bottom: 15vw;
    }
    .sec-area03-01 .r_col2_inner:nth-child(2n),
    .sec-area03-02 .r_col2_inner:nth-child(2n),
    .sec-area03-03 .r_col2_inner:nth-child(2n+1){
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

.r_col2_img{
    width: 50%;
}
.r_col2_img img,
.r_col2_img_right img{
    width: 90%;
    margin:auto;
}
@media only screen and (max-width: 767px) {
    .r_col2_img img,
    .r_col2_img_right img{
        width: 100%;
        margin:auto;
    }
}
.r_col2_img_right{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: center;
    align-items: center;
    flex-wrap: wrap; 
    width: 50%;
}
.r_col2_img_right a{
    width: 50%;
}
img.r_col2_img_nolift{
    width: 83%;
    margin: 15px 62px 5px 6%;
}
.r_col2_text{
    text-align: left;
    font-size: 1.2em;
    width: 50%;
    margin: 0 auto;
}
.r_col2_text h3{
    font-size: 1.1em;
    font-weight: 600;
    padding:0 1%;
    line-height: 1.8;
}
.r_col2_text p{
    padding:5px 1%;
}
.r_col2_text .font_small{
    font-size: 0.8em;
}
@media only screen and (max-width: 767px) {
    .r_col2_text h3{
        font-size: 1em;
        padding:6px 1% 0;
    }
    .r_col2_img,
    .r_col2_img_right,
    .r_col2_text{
        width: 100%;
    }
}
.text_fleximg{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: start;
    flex-wrap: wrap; 
    width:100%;
}
.text_fleximg_left{
    width:65%;
}
.text_fleximg_right{
    width:35%;
}
.text_fleximg_right img{
    width:100%;
    margin: auto;
}
/*
@media only screen and (max-width: 767px) {
    .text_fleximg_left{
        width:100%;
    }
    .text_fleximg_right{
        width:90%;
    }
    .text_fleximg_right img{
        width:35%;
        margin: auto;
    }
}
*/
.feature{
    width: 55%;
    margin: auto;
    color: #471E68;
    min-width: 708px;
    max-width: 1170px;
}
@media only screen and (max-width: 767px) {
    .feature{
        width:90%;
        min-width: 90%;
    }
}
.feature h4{
    width:100%;
    margin: 3vw auto;
    text-align: left;
    font-size: 1.5em;
    font-weight: 600;
}
.feature p{
    width:100%;
    margin: 0 auto 5vw;
    text-align: left;
    font-size: 1.2em;
}
.sec-area04{
    margin: auto;
    padding: 0;
    width: 100%;
    height: auto;
    max-width: 1170px;
}
.col-2-lwid{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    flex-wrap: wrap; 
    width:70%;
    height: auto;
    margin:auto;
    padding-bottom: 40px;
}
.col-2-lwid .col-left{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: start;
    flex-wrap: wrap; 
    width:calc(60% - 10px);
    height: auto;
    margin:5px;
    font-size: 1.2em;
}
.col-2-lwid .col-left .table-left{
    width:calc(20% - 10px);
    height: auto;
    margin:10px 5px;
    display: block;
    font-weight: 600;
}
.col-2-lwid .col-left .table-right{
    width:calc(80% - 10px);
    height: auto;
    margin:10px 5px;
    display: block;
}
.col-2-lwid .col-right{
    width:calc(40% - 10px);
    height: auto;
    margin:5px;
    display: block;
}
@media only screen and (max-width: 767px) {
    .col-2-lwid {
        width: 100%;
        height: auto;
        margin: auto;
        padding-bottom: 40px;
    }
    .col-2-lwid .col-left,
    .col-2-lwid .col-right{
        width: calc(90% - 2px);
        height: auto;
        margin: 5px 1px;
    }
    }
.sec-area05{
    margin: auto;
    padding: 0;
    width: 100%;
    height: auto;
    max-width: 1170px;
}
.inquiry_b{
    display: block;
    border:1px solid #471e68;
    color:#471e68;
    padding:10px;
    width:300px;
    height:auto;
    margin:80px auto;
    text-align: center; 
}
.inquiry_b:hover{
    opacity: 0.6;
}
.bottom-m{
    margin-bottom: 20px;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示されます */
.pc {
	display: block !important;
	text-align: center;
	margin: 0 auto;
}

.sp {
	display: none !important;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示されます */
@media only screen and (max-width: 767px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
}