@charset "utf-8";

/*-------------------------------------------------------------------
setting basic
-------------------------------------------------------------------*/
.body_fate { 
    font-size: 62.5%; 
}
#wrapper {
    overflow: hidden;
    font-family: 'Noto Serif JP';
    font-weight: 400;
}
.wid100{
    width:100%;
    max-width: 100%;
    height:auto;
    vertical-align: bottom;
}
.fadelink{
    display: block;
    cursor: pointer;
    transition: .6s;
    text-decoration: none;
}

/* フェードイン */
.is-fadeIn {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 1.0s, transform 1.0s;
}
.is-fadeIn.is-scrollIn {
    opacity: 1;
    transform: translate(0, 0);
}

@media screen and (min-width:751px){
    .is-fadeIn {
        transform: translate3d(0, 40px, 0);
    }
    .u-sp{
        display: none !important;
    }
    .fadelink:hover{
        opacity: 0.6;
    }
}
@media screen and (max-width:750px){
    .u-pc{
        display: none !important;
    }
}

/*-------------------------------------------------------------------
HEADER
-------------------------------------------------------------------*/
/* ============ common ============ */
.site_header{
    background: #fff;
    position: relative;
    z-index: 20;
}
.site_logoList{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ============ sp ============ */
@media screen and (max-width:750px){
    .site_header{
        padding: 1vw 0;
    }
    .site_logoItem01{
        width:25.6vw;
        margin: 0 1.3vw 0 0;
    }
    .site_logoItem02{
        width:3.4vw;
        margin: 0 2.6vw 0 0;
    }
    .site_logoItem03{
        width:32.4vw;
    }
}

/* ============ pc ============ */
@media screen and (min-width:751px){
    .site_header{
        padding: 15px 0;
    }
    .site_logoItem01{
        width:192px;
    }
    .site_logoItem02{
        width:26px;
    }
    .site_logoItem03{
        width:243px;
    }
    .site_logoItem:not(:last-child){
        margin: 0 20px 0 0;
    }
}

/*-------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------*/
/* ============ common ============ */
.site_footer {
    color: #999;
    font-family: 'Noto Sans JP';
    background: #000;
    position: relative;
}
.site_footer::before{
    content: "";
    display: block;
    width:100%;
    height: 2px;
    background: url("../img/foot_line.png") repeat-x;
    background-size: auto 100%;
    position: absolute;
    top:-2px;
    left: 0;
    z-index: 100;
}
.foot_inner {
    position: relative;
    max-width: 1366px;
    margin: auto;
}
.pageTopWrapper {
    position: absolute;
    margin: 0;
    z-index: 999;
}
.pageTop__img1 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}
.footerPr {
  text-align: center;
}
.footerDescriptionList_link {
  color: #999;
  text-decoration: none;
  position: relative;
}
.footerDescriptionList_link::before {
  content: ">";
  display: block;
  line-height: 1.0;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 0;
}
.footerDescriptionList_link::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  height: 1px;
  background: #999;
}
.copyright {
    text-align: center;
    line-height: 1.4;
}
.snsList{
    display: flex;
    justify-content: center;
}

/* ============ sp ============ */
@media screen and (max-width:750px){
    .foot_inner{
        padding: 9.3vw 0 12vw;
    }
    .pageTopWrapper {
        bottom: 100%;
        right: 50%;
        transform: translateX(50%);
        width: 24vw;
    }
    .pageTop__img1{
        position: static;
    }
    .footerPr {
        font-size:2.93vw;
        margin: 0 0 5.33vw;
        line-height: 1.4;
    }
    .footerDescription {
        margin: 0 auto 9.3vw;
    }
    .footerDescriptionList{
        display: flex;
        justify-content: center;
    }
    .footerDescriptionListItem:not(:last-child){
        margin: 0 8.6vw 0 0;
    }
    .footerDescriptionList_link {
        font-size:2.93vw;
        display: inline-block;
        padding-left: 2.2vw;
    }
    .footerDescriptionList_link::after {
      bottom: -30%;
      width: calc(100% - 2.2vw);
    }
    .copyright {
         font-size:2.93vw;
    }
    .snsList{
        margin: 0 0 9%;
    }
    .snsItem{
        width:15.4vw;
        margin: 0 1.7vw;
    }
}

/* ============ pc ============ */
@media screen and (min-width:751px){
    .foot_inner{
        padding: 60px 0 40px;
    }
    .pageTopWrapper {
        top: -52px;
        right: 2%;
        width: 100px;
    }
    .footerPr {
      font-size: 1.6em;
        line-height: 1.4;
      margin: 0 0 30px;
    }
    .footerDescription {
        margin: 0 0 2.2%;
    }
    .footerDescriptionList_link {
      padding-left: 15px;
        font-size: 1.6em;
    }
    .footerDescriptionList_link::after {
      bottom: -7px;
      width: calc(100% - 15px);
    }
    .footerDescriptionList {
        display: flex;
        justify-content: center;
        margin: 0 0 35px;
    }
    .footerDescriptionListItem:first-child {
        margin-right: 40px;
    }
    .footerDescriptionList_link:hover::after {
        opacity: 0;
    }
    .copyright {
        font-size: 1.6em;
    }
    .snsList{
        margin: 0 0 40px;
    }
    .snsItem{
        width:67px;
        margin: 0 11px;
    }
}

/*-------------------------------------------------------------------
MAIN
-------------------------------------------------------------------*/
/* ============ common ============ */
/* common */
.inner{
    max-width: 1366px;
    margin: auto;
    position: relative;
}

/* about */
.sec_about{
    padding: 35% 0 0;
    position: relative;
    text-align: center;
}
.sec_about::before{
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100%;
    background:url("../img/about_bg.png")top center no-repeat;
    background-size:cover;
}
.about_content{
    background: url("../img/about_gradate.png") repeat-x center bottom;
    background-size: 100% 100%;
    padding: 14.6% 0 0;
}
.about_inner{
    max-width: 930px;
    width:96%;
    margin: auto;
    padding: 0 0 12.4%;
}
.about_logo{
    width:53.7%;
    margin: 0 auto 2.1%;
}
.about_copy{
    width:61.8%;
    margin: 0 auto 5.3%;
}
.about_movie{
    margin: 0 auto 7.6%;
}
.about_movie iframe{
    width:520px;
    height: 293px;
}
.about_tit{
    width:54.1%;
    margin: 0 auto 3.2%;
}
.about_txt{
    width:96.4%;
    margin: auto;
}


/* app */
.sec_app{
    background: url("../img/app_bg.png") no-repeat;
    background-size: cover;
}
.app_inner{
    padding:3.6% 0 5.1%;
}
.app_logo{
    width:300px;
    margin: 0 auto 40px;
}
.app_flex{
    display: flex;
    justify-content: center;
    margin: 0 0 50px;
}
.app_img{
    width:200px;
    margin: 0 30px 0 0;
}
.app_tit{
    width:272px;
    margin: 0 0 20px;
}
.app_txt{
    width:532px;
}
.app_list{
    display: flex;
    justify-content: center;
}
.app_item{
    width:271px;
    margin: 0 17px;
}


/* ============ main ============ */
/* main content */
.secMain{
    overflow: hidden;
    background: url("../img/main_bg02.png") no-repeat;
    background-size: cover;
    position: relative;
    z-index: 10;
}
.secMain_inner{
    padding:50px 0 60px;
    width:600px;
    margin: auto;
    position: relative;
}
.secMain_bg{
    position: relative;
    z-index: 10;
}
.secMain_txtArea{
    position: absolute;
    z-index: 100;
    width:600px;
    top:0;
    left:50%;
    transform: translateX(-50%);
}
.main_logo{
    width:237px;
    margin: auto;
}
.main_tit{
    width:450px;
    margin: 0 auto 30px;
}
.main_txt{
    width:509px;
    margin: 0 auto 25px;
}
.main_btn{
    display: block;
    width:444px;
    margin: auto;
}

/* chara */
.main_chara{
    position: absolute;
    z-index: 50;
}
.main_chara01{
    width:721px;
    right:calc(100% - 220px);
    top:50px;
}
.main_chara02{
    width:604px;
    top:30px;
    left:calc(100% - 270px);
}

/* deco */
.main_deco{
    position: absolute;
}
.main_deco01{
    width:748px;
    left:-270px;
    top:-5px;
    z-index: 1;
}
.main_deco02{
    width:752px;
    bottom:40px;
    right:-20px;
    z-index: 40;
}
.main_deco03{
    width:736px;
    bottom:-20px;
    right: -195px;
    z-index: 1;
}


/* ============ question ============ */
.secMain-question .secMain_inner{
    width:684px;
    text-align: center;
    padding: 40px 0 60px;
}
.secMain-question .secMain_txtArea{
    top:34px;
}
.qestion_logo{
    width:275px;
    margin: 0 auto 40px;
}
.question_tit{
    font-size: 3.4em;
    line-height: 1.35;
    margin: 0 0 45px;
    font-weight: 600;
    letter-spacing: .05em;
    text-shadow: #fff 2px 0px, #fff -2px 0px, #fff 0px -2px, #fff 0px 2px, #fff 2px 2px, #fff -2px 2px, #fff 2px -2px, #fff -2px -2px, #fff 1px 2px, #fff -1px 2px, #fff 1px -2px, #fff -1px -2px, #fff 2px 1px, #fff -2px 1px, #fff 2px -1px, #fff -2px -1px;
}
.questionItem:not(:last-child){
    margin: 0 auto 5px;
}
.questionBtn{
    width:584px;
    display: flex;
    height: 93px;
    justify-content: center;
    margin: auto;
    align-items: center;
    color: #fff;
    font-size: 2.8em;
    background: url("../img/question_btn.png") no-repeat;
    background-size: contain;
    background-position: top 3px left;
}
.questionBtn-small{
    font-size: 2.4em;
}

/* chara */
.secMain-question .main_chara01{
    right:calc(100% - 180px);
    width:634px;
    top:40px;
}
.secMain-question .main_chara02{
    width:549px;
    top:20px;
    left:calc(100% - 215px);
}

/* deco */
.secMain-question .main_deco01{
    left:-230px;
}
.secMain-question .main_deco02{
    bottom:20px;
    right:-5px;
}
.secMain-question .main_deco03{
    bottom:-20px;
    right: -155px;
}

/* ============ result ============ */
.secMain-result .secMain_inner{
    width: 100%;
    max-width: 1064px;
    padding: 85px 0 190px;
    text-align: center;
}
.secMain-result .secMain_bg{
    width: 651px;
    margin: 0 20px 0 auto;
}
.secMain-result .secMain_txtArea{
    left: auto;
    transform: none;
    right: 20px;
    width:651px;
    top:15px;
    height: 705px;
    background:url("../img/result_bg_inner.png") no-repeat;
    background-size: 590px;
    background-position: left 30px bottom;
}
.secMain-result .secMain_txtArea-result14{
    height: 730px;
    background:url("../img/result_bg_inner02.png") no-repeat;
    background-size: 592px;
    background-position: left 30px bottom;
}
.result_logo{
    width:595px;
    margin: 0 auto 50px;
}
.result_sub{
    width:350px;
    margin: 0 auto 30px;
}
.result_titArea{
    color: #6e5720;
    margin: 0 0 30px;
}
.result_subTit{
    font-size: 3em;
    font-weight: 600;
    margin: 0 0 7px;
}
.result_tit{
    font-size: 6em;
}
.result_txt{
    width: 530px;
    position: relative;
    margin: 0 auto 35px;
    line-height: 1.8;
    font-size: 1.6em;
    font-weight: 600;
}
.result_fitTit{
    width:567px;
    margin: 0 auto 30px;
}
.result_fitName{
    width:577px;
    margin: auto;
}
.result_btnArea{
    position: absolute;
    background: url("../img/result_pattern.png") repeat;
    background-size: 1366px;
    width:100%;
    bottom:0;
    left:0;
    z-index: 100;
    padding: 30px 0;
}
.result_btn{
    width:584px;
    margin: auto;
}
.again_btn{
    display: block;
    width:584px;
    margin: 0 auto 40px;
}

/* chara */
.result_chara{
    position: absolute;
    z-index: 40;
}
.result_chara01{
    width:716px;
    right: 490px;
    top:60px;
}
.result_chara02{
    width:1018px;
    right: 250px;
    top:20px;
}
.result_chara03{
    width:993px;
    right: 450px;
    top:30px;
}
.result_chara04{
    width:865px;
    right: 460px;
    top:-20px;;
}
.result_chara05{
    width:966px;
    right: 460px;
    top:50px;
}
.result_chara06{
    width:748px;
    right: 460px;
    top:40px;
}
.result_chara07{
    width:1238px;
    right: 190px;
    top:-120px;
}
.result_chara08{
    width:1119px;
    right: 344px;
    top:0;
}
.result_chara09{
    width:646px;
    right: 480px;
    top:50px;
}
.result_chara10{
    width: 739px;
    right: 550px;
    top: 40px;
}
.result_chara11{
    width: 776px;
    right: 388px;
    top: 40px;
}
.result_chara12{
    width:498px;
    right: 590px;
    top:100px;
}
.result_chara13{
    width:956px;
    right: 290px;
    top:80px;
}
.result_chara14{
    width:580px;
    right: 460px;
    top:20px;
}
.result_chara15{
    width: 783px;
    right: 495px;
    top: 60px;
}

/* name */
.result_fitName05{
    width:430px;
}
.result_fitName07{
    width:443px;
}
.result_fitName09{
    width:486px;
}
.result_fitName12{
    width:405px;
}

/* deco */
.secMain-result .main_deco{
    z-index: 1;
}
.secMain-result .main_deco01{
    left: auto;
    right: 350px;
}
.secMain-result .main_deco02{
    left: auto;
    right: 180px;
    bottom:190px;
}
.secMain-result .main_deco02{
    left: auto;
    right: 30px;
    bottom:150px;
}

/* ============ sp ============ */
@media screen and (max-width:750px){
    /* about */
    .sec_about{
        padding: 28vw 0 0;
    }
    .about_content{
        background: url("../img/about_gradate_sp.png") repeat-x center bottom;
        background-size: 100% 100%;
        padding: 30vw 0 0;
    }
    .about_inner{
        max-width: 100%;
        padding: 0 0 14.6vw;
    }
    .about_logo{
        width:66.6vw;
        margin: 0 auto 2.6vw;
    }
    .about_copy{
        width:76.6vw;
        margin: 0 auto 8vw;
    }
    .about_movie{
        margin: 0 auto 7.6%;
    }
    .about_movie iframe{
        width:84vw;
        height: 47.2vw;
    }
    .about_tit{
        width:67.3vw;
        margin: 0 auto 10.6vw;
    }
    .about_txt{
        width:94.2vw;
    }

    /* app */
    .app_inner{
        padding:6.6vw 10.6vw 21.3vw;
    }
    .app_logo{
        width:40vw;
        margin: 0 auto 4vw;
    }
    .app_flex{
        align-items: center;
        position: relative;
        justify-content: flex-start;
        margin: 0 0 49.3vw;
    }
    .app_img{
        width:26.6vw;
        margin: 0 4vw 0 0;
    }
    .app_tit{
        width:36.2vw;
        margin: 0;
    }
    .app_txt{
        width:76.1vw;
        position: absolute;
        top:calc(100% + 4.66vw);
        left: 0;
    }
    .app_item{
        width:36.1vw;
        margin: 0 2.2vw;
    }

    /* ============ main ============ */
    /* main content */
    .secMain{
        background: url("../img/main_bg02_sp.png") no-repeat;
        background-size: cover;
    }
    .secMain_inner{
        padding:5.33vw 0 10.6vw;
        width:93.3vw;
    }
    .secMain_txtArea{
        width:93.3vw;
        top:0;
    }
    .main_logo{
        width:31.6vw;
    }
    .main_tit{
        width:58.4vw;
        margin: 0 auto 6.6vw;
    }
    .main_txt{
        width:67.6vw;
        margin: 0 auto 6.6vw;
    }
    .main_btn{
        width:81.3vw;
    }

    /* chara */
    .main_chara01{
        width:69.6vw;
        right:calc(100% - 38.6vw);
        top:22.1vw;
    }
    .main_chara02{
        width:60.5vw;
        top:18.1vw;
        left:auto;
        right:-17.3vw;
    }

    /* deco */
    .main_deco01{
        width:100vw;
        left:-29.2vw;
        top:0;
    }
    .main_deco02{
        width:100vw;
        bottom:3.3vw;
        right:-1.3vw;
    }
    .main_deco03{
        width:98.2vw;
        bottom:40.8vw;
        right: -18.6vw;
    }
    
    /* ============ question ============ */
    .secMain-question .secMain_inner{
        width:93.3vw;
        padding: 12vw 0 14.6vw;
    }
    .secMain-question .secMain_txtArea{
        top:5.33vw;
    }
    .qestion_logo{
        width:34vw;
        margin: 0 auto 8vw;
    }
    .question_tit{
        font-size: 4.5vw;
        margin: 0 0 10.6vw;
    }
    .questionItem:not(:last-child){
        margin: 0 auto 1.3vw;
    }
    .questionBtn{
        width:82.13vw;
        height: 16.66vw;
        font-size: 4.8vw;
        line-height: 1.1;
        background: url("../img/question_btn_sp.png") no-repeat;
        background-size: contain;
        background-position: top 0.4vw left;
    }

    /* chara */
    .secMain-question .main_chara01{
        right:auto;
        width:69.6vw;
        top:22.6vw;
        left:-32vw;
    }
    .secMain-question .main_chara02{
        width:60.4vw;
        top:20vw;
        left:auto;
    }

    /* deco */
    .secMain-question .main_deco01{
        left:-29.3vw;
        top:6vw;
    }
    .secMain-question .main_deco02{
        bottom:9.3vw;
        right:-1.3vw;
    }
    .secMain-question .main_deco03{
        bottom:21.3vw;
        right: -16vw;
    }
    
    /* ============ result ============ */
    .secMain-result .secMain_inner{
        padding: 11.3vw 0 34.6vw;
    }
    .secMain-result .secMain_bg{
        width: 72.6vw;
        margin: 0 4vw 0 auto;
    }
    .secMain-result .secMain_txtArea{
        right: 4vw;
        width: 72.6vw;
        top:1.3vw;
        padding: 19.2vw 0 0;
        height: 122.2vw;
        background:url("../img/result_bg_inner_sp.png") no-repeat;
        background-size: 63.46vw;
        background-position: left 4.47vw bottom;
    }
    .secMain-result .secMain_txtArea-result14{
        height: 134.4vw;
        background: url(../img/result_bg_inner02_sp.png) no-repeat;
        background-size: 62.46vw;
        background-position: left 4.7vw bottom;
    }
    .result_logo{
        width:77.8vw;
        margin: 0 7.1vw 0 0;
        position: absolute;
        right: 0;
        top:0;
    }
    .result_sub{
        width:56.2vw;
        margin: 0 auto 7vw;
    }
    .result_titArea{
        margin: 0 0 6vw;
    }
    .result_subTit{
        font-size: 4vw;
        margin: 0 0 1.3vw;

    }
    .result_tit{
        font-size: 8vw;
    }
    .result_txt{
        width: 60vw;
        margin: 0 auto 5vw;
        line-height: 1.6;
        text-align: left;
        font-size: 3.3vw;
    }
    .result_fitTit{
        width:59vw;
        margin: 0 auto 3vw;
    }
    .result_fitName{
        width:60vw;
    }
    .result_btnArea{
        background: url("../img/result_pattern_sp.png") repeat;
        background-size: 100%;
        padding: 4vw 0;
    }
    .result_btn{
        width:82.1vw;
    }
    .again_btn{
        width:82.1vw;
        margin: 0 auto 8.3vw;
    }

    /* chara */
    .result_chara01{
        width:106.8vw;
        right: 37.6vw;
        top:16vw;
    }
    .result_chara02{
        width:135.7vw;
        right: 8vw;
        top:18.6vw;
    }
    .result_chara03{
        width:132.4vw;
        right: 32vw;
        top:13.3vw;
    }
    .result_chara04{
        width:115.3vw;
        right: 30.6vw;
        top:10.6vw;;
    }
    .result_chara05{
        width:128.8vw;
        right: 33.3vw;
        top:22vw;
    }
    .result_chara06{
        width: 99vw;
        right: 36vw;
        top: 18.6vw;
    }
    .result_chara07{
        width:165vw;
        right: -6vw;
        top:-8vw;
    }
    .result_chara08{
        width: 151vw;
        right: 17vw;
        top: 18vw;
    }
    .result_chara09{
        width:86.1vw;
        right: 37.8vw;
        top:22vw;
    }
    .result_chara10{
        width: 111vw;
        right: 41vw;
        top: 16vw;
    }
    .result_chara11{
        width: 103.4vw;
        right: 25vw;
        top: 18.3vw;
    }
    .result_chara12{
        width: 66.4vw;
        right: 61vw;
        top: 26vw;
    }
    .result_chara13{
        width:127.4vw;
        right: 12vw;
        top:20vw;
    }
    .result_chara14{
        width:77.3vw;
        right: 36vw;
        top:20vw;
    }
    .result_chara15{
        width:104.4vw;
        right: 42vw;
        top:20.6vw;
    }

    /* name */
    .result_fitName04{
        width:53.06vw;
    }
    .result_fitName05{
        width:54vw;
    }
    .result_fitName10{
        width:56.2vw;
    }
    .result_fitName12{
        width:52vw;
    }
    .result_fitName13{
        width:60vw;
    }
    .result_fitName14{
        width:57vw;
    }
    .result_fitName15{
        width:56.8vw;
    }

    
    /* deco */
    .secMain-result .main_deco01{
        right: 26.6vw;
        top:5.33vw;
    }
    .secMain-result .main_deco02{
        display: none;
    }
    .secMain-result .main_deco02{
        right: -16vw;
        bottom:49.3vw;
    }
}

/* ============ tablet ============ */
@media screen and (max-width:930px) and (min-width:751px){
    .about_inner,
    .app_inner{
        width:90%;
        margin: auto;
    }
    .result_chara01{
        right: 370px;
    }
    .result_chara02{
        right: 50px;
    }
    .result_chara03{
        right: 250px;
    }
    .result_chara04{
        right: 260px;
    }
    .result_chara05{
        right: 300px;
    }
    .result_chara06{
        right: 310px;
    }
    .result_chara07{
        right: 30px;
    }
    .result_chara08{
        right: 180px;
    }
    .result_chara09{
        right: 320px;
    }
    .result_chara10{
        right: 370px;
    }
    .result_chara11{
        right: 240px;
    }
    .result_chara12{
        right: 440px;
    }
    .result_chara13{
        right: 140px;
    }
    .result_chara14{
        right: 325px;
    }
    .result_chara15{
        right: 385px;
    }
}

