@charset "UTF-8";
/* ------------------------------
   concept.css
------------------------------ */
.page-ttl {
    height: 800px;
    background: url("../img/theone/bg_fv.jpg") no-repeat center bottom;
    background-size: cover;
}
.page-ttl .inner{
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    text-align: center;
}
.page-ttl .ttl{ text-align: center;}

.ttl_wrap{ margin-bottom: 35px;}

/*lead-btnlink*/
.lead-btnlink{
  margin: 24px auto 0;
  text-align: center;
}
.lead-btnlink a{
  display: block;
  position: relative;
  margin: 0 auto;
  background: #2fa15e;
  width: 500px;
  height: 78px;
  line-height: 78px;
  border-radius: 6px;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  padding-left: 30px;
}
.lead-btnlink a::before{
  position: absolute;
  content: "";
  background: url("../img/common/icon_dl.svg") no-repeat center center /100% auto;
  width: 38px;
  height: 45px;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
}


.sec-ttl.heading-a{
    text-align: center;
    font-size: 3.5rem;
    margin-bottom: 10px;
}
.ttl_wrap .en-ttl{
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: .1em;
    font-weight: 700;
    color: #bc121a;
}
.bg-img_wrap{
    position: relative;
}
.bg-img_wrap .bg-img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.bg-img_wrap .bg-img img{
    display: block;
    width: 100%;
    height: auto;
}
.bg-img_wrap .inner{
    position: relative;
    background: #FFF;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
    box-sizing: border-box;
    z-index: 2;
}
.bg-txt{
    position: absolute;
    left: 50%;
    bottom: 70px;
    transform: translateX(-50%);
    font-size: 20rem;
    line-height: 1;
    color: #f5f5f5;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

.cta_wrap .btn-txt{
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    color: #111111;
    letter-spacing: .05em;
    line-height: 1;
    margin-bottom: 25px;
}
.btn_wrap.cta_wrap .btn{
    font-size: 2.4rem;
    /* max-width: 390px; */
    max-width: 420px;
    padding: 8px 10px 12px 10px;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .page-ttl {
        height: 93vw;
    }
    .page-ttl .inner{
        bottom: 0;
    }
    
    /*lead-btnlink*/
    .lead-btnlink{
      margin-top: 5%;
    }
    .lead-btnlink a{
      width: 320px;
      height: 56px;
      line-height: 56px;
      font-size: 1.6rem;
      padding-left: 1.4em;
    }
    .lead-btnlink a::before{
      width: 24px;
      height: 28px;
      left: 1em;
    }

    .sec-ttl.heading-a{
        font-size: 2.8rem;
        margin-bottom: 1rem;
    }
    .ttl_wrap .en-ttl{
        font-size: 1.1rem;
    }
    .bg-img_wrap .bg-img{
        height: 65vw;
    }
    .bg-img_wrap .bg-img img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        font-family: 'object-fit: cover';
    }
    .bg-txt{
        bottom: 1rem;
        font-size: 9rem;
        }

    .cta_wrap .btn-txt{
        font-size: 1.6rem;
        margin-bottom: 3%;
    }
    .btn_wrap.cta_wrap .btn{
        font-size: 1.6rem;
        /* max-width: inherit; */
        padding: 8px 10px 12px 10px;
        width: 92%;
        max-width: 320px;
    }
    .fixed-btn{ display: none !important;}
}

/*sec01*/
.sec01{
    position: relative;
    padding: 70px 0 0 0;
    box-sizing: border-box;
}
.achievement_wrap{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.achievement_wrap .achievement-box+.achievement-box{ margin-left: 70px;}

.achievement-box .achievement-txt{
    text-align: center;
    font-size: 2.5rem;
    letter-spacing: .025em;
    font-weight: 700;
    margin-bottom: 10px;
}
.achievement-box .achievement-txt02{
    text-align: center;
    font-size: 2.7rem;
    font-weight: 700;
    color: #bc111a;
    letter-spacing: -.025em;
}
.achievement-box .achievement-txt02 .num{
    font-size: 6.6rem;
    line-height: 1;
    margin-right: 7px;
}
.achievement-box .achievement-txt02 .sub{
    position: relative;
    bottom: 7px;
    margin-left: 3px;
    font-size: 1.3rem;
    color: #111111;
    vertical-align: sub;
    font-weight: 400;
}

.achievement-note{
    margin-top: 25px;
    margin-left: -30px;
    font-size: 1.5rem;
    color: #333333;
    letter-spacing: .025em;
    margin-bottom: 70px;
}

.sec01 .text{
    width: 100%;
    max-width: 990px;
    margin: 0 auto 50px auto;
    font-size: 1.8rem;
    line-height: calc(40 / 18);
    letter-spacing: -.005em;
}
.sec01 .img_wrap{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.sec01 .img_wrap div+div{ margin-left: 50px;}

.sec01 .bg-gray{
    margin-top: 90px;
    padding: 73px 0 62px 0;
}

.sec01 .recommended_box{
    margin: 0 auto;
    width: 100%;
    max-width: 935px;
    padding: 40px 46px 60px 46px;
    border: 4px solid #bc121a;
    box-sizing: border-box;
}
.sec01 .recommended_box h3{
    text-align: center;
    font-size: 3.5rem;
    margin-bottom: 50px;
}

.sec01 .recommended_box .ico-check{}
.sec01 .recommended_box .ico-check li{
    position: relative;
    font-size: 2.4rem;
    letter-spacing: -.025em;
    padding-left: 48px;
    box-sizing: border-box;
}
.sec01 .recommended_box .ico-check li+li{ margin-top: 19px;}
.sec01 .recommended_box .ico-check li:before{
    position: absolute;
    display: block;
    left: 0;
    top: 4px;
    content: '';
    background: url("../img/theone/icon-check.png") no-repeat center center;
    background-size: 100% auto;
    width: 33px;
    height: 31px;
}

@media screen and (max-width: 767px) {
    .sec01{
        padding: 10% 0 0 0;
        display: block;
    }
    .achievement_wrap{
        justify-content: space-between;
        flex-wrap: wrap;
        margin-bottom: 8%;
    }
    .achievement-box{
        width: 48%;
        margin-bottom: 8%;
    }
    .achievement_wrap .achievement-box+.achievement-box{ margin-left: 0;}
    .achievement_wrap .achievement-box:nth-of-type(3),
    .achievement_wrap .achievement-box:nth-of-type(4){ margin-bottom: 0;}

    .achievement-box .achievement-txt{
        font-size: 1.8rem;
        margin-bottom: 2%;
    }
    .achievement-box .achievement-txt02{
        font-size: 2.4rem;
    }
    .achievement-box .achievement-txt02 .num{
        font-size: 5.4rem;
    }
    .achievement-box .achievement-txt02 .sub{
        bottom: 7px;
        font-size: 1.0rem;
    }
    .achievement-note{
        margin-top: 0;
        margin-left: -10px;
        font-size: 1.2rem;
        margin-bottom: 12%;
    }
    .sec01 .text{
        max-width: inherit;
        margin: 0 auto 6% auto;
        font-size: 1.4rem;
    }

    .sec01 .img_wrap div+div{ margin-left: 4%;}

    .sec01 .bg-gray{
        margin-top: 14%;
        padding: 10% 0 12% 0;
    }

    .sec01 .recommended_box{
        width: 92%;
        max-width: inherit;
        padding: 5% 4%;
        border: 3px solid #bc121a;
    }
    .sec01 .recommended_box h3{
        font-size: 2.2rem;
        margin-bottom: 10%;
    }

    .sec01 .recommended_box .ico-check li{
        font-size: 1.6rem;
        padding-left: 36px;
    }
    .sec01 .recommended_box .ico-check li+li{ margin-top: 12px;}
    .sec01 .recommended_box .ico-check li:before{
        top: 4px;
        width: 27px;
        height: 27px;
    }

}

/*sec-realzation*/
.sec-realzation.bg-img_wrap{
    padding-top: 24%;
}
.sec-realzation.bg-img_wrap .inner{
    padding: 55px 100px 80px 100px;
}
.sec-realzation .ttl_wrap{ margin-bottom: 55px;}

.realzation-box{
    display: flex;
    justify-content: space-between;
}
.realzation-box.-reverse{
    flex-direction: row-reverse;
}
.realzation-box+.realzation-box{ margin-top: 115px;}

.realzation-box .txt{
    width: 52%;
    box-sizing: border-box;
}
.realzation-box .txt .box-ttl{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 2.4rem;
    font-weight: 700;
    color: #bc121a;
    letter-spacing: .05em;
    margin-bottom: 25px;
    box-sizing: border-box;
}
.realzation-box .txt .box-ttl span{
    display: block;
    width: calc(100% - 7rem);
}
.realzation-box .txt .box-ttl span.num{
    position: relative;
    top: -13px;
    line-height: 1;
    width: 7rem;
    margin-right: 10px;
    font-size: 5.8rem;
    font-weight: 700;
    color: #141414;
}
.realzation-box:nth-of-type(4) .txt .box-ttl span.num{ top: -5px;}
.realzation-box .txt .box-ttl{ margin-right: -17px;}

.realzation-box .txt p{
    font-size: 1.7rem;
    line-height: calc(30 / 17);
    letter-spacing: -.005em;
}
.realzation-box .txt p+p{ margin-top: 20px;}

.realzation-box .img{
    width: 46%;
    max-width: 454px;
}


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

    .sec-realzation.bg-img_wrap{
        padding-top: 31%;
    }
    .sec-realzation.bg-img_wrap .inner{
        padding: 5% 4%;
    }
    .sec-realzation .ttl_wrap{ margin-bottom: 3rem;}

    .realzation-box{
        display: block;
    }

    .realzation-box+.realzation-box{ margin-top: 10%;}

    .realzation-box .txt{
        width: 100%;
    }
    .realzation-box .txt .box-ttl{
        font-size: 2.2rem;
        margin-bottom: 5%;
    }
    .realzation-box .txt .box-ttl span{
        width: calc(100% - 6rem);
    }
    .realzation-box .txt .box-ttl span.num{
        top: 0;
        width: 6rem;
        font-size: 4.8rem;
    }
    .realzation-box:nth-of-type(4) .txt .box-ttl span.num{ top: 0;}
    .realzation-box .txt .box-ttl{ margin-right: 0;}

    .realzation-box .txt p{
        font-size: 1.4rem;
    }
    .realzation-box .txt p+p{ margin-top: 4%;}

    .realzation-box .img{
        width: 100%;
        max-width: 454px;
        margin: 4% auto 0 auto;
    }
}

/*sec-reason*/
.sec-reason{
    position: relative;
    padding: 115px 0 115px 0;
    box-sizing: border-box;
}
.sec-reason .inner{
    padding: 0 35px;
    box-sizing: border-box;
}
.sec-reason .bg-txt{
    bottom: auto;
    top: -100px;
    z-index: -1;
}
.sec-reason .ttl_wrap{ margin-bottom: 70px;}

.reason-box+.reason-box{ margin-top: 75px;}
.reason-box .box-ttl_wrap{
    margin-bottom: 20px;
}
.reason-box .box-ttl_wrap p.reason-txt span{
    position: relative;
    font-size: 2.4rem;
    color: #111111;
    font-weight: 700;
    padding-left: 38px;
    box-sizing: border-box;
}
.reason-box .box-ttl_wrap p.reason-txt span:before{
    position: absolute;
    left: 0;
    top: 4px;
    display: block;
    content: '';
    background: url("../img/common/mark_logo.svg") no-repeat center center;
    background-size: 100% auto;
    width: 28px;
    height: 29px;
}
.reason-box .box-ttl_wrap .box-ttl{
    font-size: 2.9rem;
    line-height: calc(40 / 30);
    color: #bc121a;
    letter-spacing: .05em;
    margin-right: -29px;
}
.reason-box:nth-child(4) .box-ttl_wrap .box-ttl,
.reason-box:nth-child(5) .box-ttl_wrap .box-ttl{ letter-spacing: -.01em;}

.reason-box p{
    font-size: 1.8rem;
    line-height: calc(36 / 18);
    letter-spacing: -.005em;
    box-sizing: border-box;
}
.reason-box p+p{ margin-top: 20px;}

.reason-box .img{
    float: right;
    margin-top: 15px;
    margin-left: 65px;
    margin-bottom: 10px;
}
.reason-box:nth-of-type(2) .img{
    margin-top: 0;
    margin-bottom: 0;
}

.reason-box.-reverse .img{
    float: left;
    margin-left: auto;
    margin-right: 65px;
}

.sec-reason+.cta_wrap{
    margin-bottom: 90px;
}
@media screen and (min-width: 1286px) {
    .reason-box:nth-of-type(4) .box-ttl,
    .reason-box:nth-of-type(5) .box-ttl{ white-space: nowrap;}
}
@media screen and (max-width: 767px) {
    .sec-reason{
        padding: 24% 0 14% 0;
    }
    .sec-reason .inner{
        padding: 0;
    }
    .sec-reason .bg-txt{
        top: -1%;
    }
    .sec-reason .ttl_wrap{ margin-bottom: 10%;}

    .reason-box {
        display: flex;
        flex-direction: column;
    }
    .reason-box+.reason-box{ margin-top: 10%;}
    .reason-box .box-ttl_wrap{
        order: 1;
        margin-bottom: 4%;
    }
    .reason-box .box-ttl_wrap p.reason-txt span{
        font-size: 2.0rem;
        padding-left: 28px;
    }
    .reason-box .box-ttl_wrap p.reason-txt span:before{
        top: 4px;
        width: 22px;
        height: 23px;
    }
    .reason-box .box-ttl_wrap .box-ttl{
        font-size: 2.2rem;
        margin-right: 0;
    }

    .reason-box p{
        order: 3;
        font-size: 1.4rem;
    }
    .reason-box p+p{ margin-top: 4%;}

    .reason-box .img,
    .reason-box.-reverse .img{
        order: 2;
        float: none;
        margin: 0 auto 4% auto;
    }
    .sec-reason+.cta_wrap{
        margin-bottom: 12%;
    }

}

/*sec-voice*/
.sec-voice{
    padding: 0 0 66px 0;
    box-sizing: border-box;
}
.sec-voice.bg-img_wrap{
    padding-top: 17%;
}
.sec-voice.bg-img_wrap .inner {
    padding: 40px 86px 95px 70px;
}
.sec-voice .sec-ttl.heading-a {
    text-align: center;
    font-size: 4.4rem;
    margin-bottom: 10px;
}
.sec-voice .ttl_wrap{ margin-bottom: 76px;}

.voice_box{
    display: flex;
    padding-bottom: 18px;
    border-bottom: 1px solid #f5f5f5;
    box-sizing: border-box;
}
.voice_box+.voice_box{ margin-top: 34px;}
.voice_box .txt{
    width: 63%;
    padding-right: 57px;
    box-sizing: border-box;
}
.voice_box .txt .box-ttl{
    font-size: 2.4rem;
    line-height: calc(36 / 24);
    font-weight: 700;
    color: #333333;
    margin-bottom: 30px;
}
.voice_box .txt .potision{
    text-align: right;
    font-size: 1.8rem;
    line-height: calc(22 / 18);
    color: #261e1c;
    margin-bottom: 5px;
}
.voice_box .txt .name{
    text-align: right;
    font-size: 2.0rem;
    color: #261e1c;
    letter-spacing: .05em;
}

.voice_box .img{
    width: 37%;
    max-width: 382px;
}
@media screen and (max-width: 767px) {
    .sec-voice{
        padding: 0 0 14% 0;
    }
    .sec-voice.bg-img_wrap{
        padding-top: 48%;
    }
    .sec-voice.bg-img_wrap .inner {
        padding: 5% 4%;
    }
    .sec-voice .sec-ttl.heading-a {
        font-size: 2.8rem;
    }
    .sec-voice .ttl_wrap{ margin-bottom: 12%;}

    .voice_box{
        display: flex;
        flex-direction: column-reverse;
        padding-bottom: 8%;
    }

    .voice_box+.voice_box{ margin-top: 8%;}
    .voice_box .txt{
        width: 100%;
        padding-right: 0;
    }
    .voice_box .txt .box-ttl{
        font-size: 2.0rem;
        margin-bottom: 4%;
    }
    .voice_box .txt .potision{
        font-size: 1.3rem;
    }
    .voice_box .txt .name{
        font-size: 1.6rem;
    }
    .voice_box .img{
        width: 100%;
        max-width: 382px;
        margin: 0 auto 4% auto;
    }
}


/*sec-curriculum*/
.sec-curriculum{
    padding: 115px 0 80px 0;
    box-sizing: border-box;
}
.sec-curriculum .ttl_wrap{ margin-bottom: 50px;}
.sec-curriculum .sec-ttl.heading-a {
    font-size: 4.4rem;
}

.curriculum_list{
    width: 100%;
    max-width: 936px;
    margin: 0 auto;
    border: 4px solid #bc121a;
    padding: 43px 47px 57px 47px;
    box-sizing: border-box;
}

.curriculum_list dl{
    display: flex;
}
.curriculum_list dl+dl{ margin-top: 14px;}
.curriculum_list dt{
    position: relative;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: .025em;
    color: #bc121a;
    padding-left: 42px;
    box-sizing: border-box;
}
.curriculum_list dt:before{
    position: absolute;
    left: 0;
    top: 4px;
    display: block;
    content: '';
    background: url("../img/common/mark_logo.svg") no-repeat center center;
    background-size: 100% auto;
    width: 28px;
    height: 29px;
}

.curriculum_list dd{
    position: relative;
    font-size: 2.5rem;
    letter-spacing: .025em;
    padding-left: 26px;
    box-sizing: border-box;
}
.curriculum_list dd:before{
    position: absolute;
    left: 0;
    top: 1px;
    display: block;
    content: '：';
}
@media screen and (max-width: 767px) {
    .sec-curriculum{
        padding: 12% 0 10% 0;
    }
    .sec-curriculum .ttl_wrap{ margin-bottom: 8%;}
    .sec-curriculum .sec-ttl.heading-a {
        font-size: 2.8rem;
    }

    .curriculum_list{
        max-width: inherit;
        margin: 0 auto;
        border: 3px solid #bc121a;
        padding: 5% 4%;
    }

    .curriculum_list dl{
        display: flex;
    }
    .curriculum_list dl+dl{ margin-top: 3%;}
    .curriculum_list dt{
        top: 3px;
        width: 10rem;
        font-size: 1.8rem;
        padding-left: 28px;
    }
    .curriculum_list dt:before{
        top: 3px;
        width: 20px;
        height: 21px;
    }

    .curriculum_list dd{
        width: calc(100% - 10rem);
        font-size: 1.6rem;
        margin-top: 5px;
        padding-left: 22px;
    }

}

/*sec-flow*/
.sec-flow{
    margin-top: 90px;
    padding: 0 0 150px 0;
    box-sizing: border-box;
}
.sec-flow.bg-img_wrap{
    padding-top: 21%;
}
.sec-flow.bg-img_wrap .inner {
    padding: 57px 70px 95px 70px;
}
.sec-flow .sec-ttl.heading-a {
    text-align: center;
    font-size: 4.4rem;
    margin-bottom: 10px;
}
.sec-flow .ttl_wrap{ margin-bottom: 25px;}

.sec-flow .lead{
    font-size: 2.4rem;
    margin-bottom: 40px;
}

.flow_wrap{
    padding: 0 60px;
    box-sizing: border-box;
}
.flow_wrap .flow_list{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flow_wrap .flow_list:after{
    position: relative;
    display: block;
    content: '';
    width: 28%;
    max-width: 295px;
}
.flow_wrap .flow_list li{
    position: relative;
    width: 28%;
    max-width: 295px;
    margin-bottom: 45px;
    display: flex;
    flex-direction: column;
}
.flow_wrap .flow_list li:after{
    position: absolute;
    right: -60px;
    top: 96px;
    display: block;
    content: '';
    background: url("../img/support/arrow.png") no-repeat center center;
    background-size: 100% auto;
    width: 23px;
    height: 23px;
}
.flow_wrap .flow_list li a{
	color: #3366cc;
}
.flow_wrap .flow_list li:nth-of-type(3n):after{ display: none;}

.flow_wrap h3{
    order: 2;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: calc(24 / 18);
    color: #bc121a;
    margin-bottom: 14px;
}
.flow_wrap p{
    order: 3;
    font-size: 1.6rem;
    line-height: calc(24 / 16);
    letter-spacing: .01em;
    padding-right: 5px;
    box-sizing: border-box;
}
.flow_wrap .img{
    order: 1;
    margin-bottom: 15px;
}

.sec-flow .btn_wrap{ margin-top: 70px;}
.sec-flow .btn_wrap .btn{
    /* max-width: 366px; */
    max-width: 420px;
    margin: 0 auto;
}

.sec-flow .cta_wrap{
    margin-top: 0;
}

@media screen and (max-width: 767px) {
    .sec-flow{
        margin-top: 12%;
        padding: 0 0 18% 0;
    }
    .sec-flow.bg-img_wrap{
        padding-top: 52%;
    }
    .sec-flow.bg-img_wrap .inner {
        padding: 5% 4% 8% 4%;
    }
    .sec-flow .sec-ttl.heading-a {
        font-size: 2.8rem;
    }
    .sec-flow .ttl_wrap{ margin-bottom: 5%;}

    .sec-flow .lead{
        margin-bottom: 12%;
        font-size: 1.4rem;
    }

    .flow_wrap{
        padding: 0 0;
    }
    .flow_wrap .flow_list{
        display: block;
    }
    .flow_wrap .flow_list:after{
        display: none;
    }
    .flow_wrap .flow_list li{
        position: relative;
        width: 100%;
        max-width: inherit;
        margin-bottom: 0;
    }
    .flow_wrap .flow_list li+li{ margin-top: 22%;}
    .flow_wrap .flow_list li:after{
        position: absolute;
        right: 0;
        left: 0;
        margin: 0 auto;
        top: auto;
        bottom: -15%;
        transform: rotate(90deg);

        width: 23px;
        height: 23px;
    }
    .flow_wrap .flow_list li:nth-of-type(3n):after{ display: block;}
    .flow_wrap .flow_list li:last-of-type:after{ display: none;}

    .flow_wrap h3{
        font-size: 1.8rem;
        margin-bottom: 2%;
    }
    .flow_wrap p{
        font-size: 1.4rem;
        padding-right: 0;
    }
    .flow_wrap .img{
        max-width: 295px;
        margin: 0 auto 4% auto;
    }

    .sec-flow .btn_wrap{ margin-top: 12%;}
    .sec-flow .btn_wrap .btn{
        max-width: inherit;
        margin: 0 auto;
        width: 92%;
    }

}