@charset "UTF-8";
/*******************************

TopCss

*******************************/

/*-----------------------------
top-sec
-----------------------------*/
h2.top-ttl {
    margin-bottom: 30px;
}

h2.top-ttl .en {
    display: block;
    margin-bottom: 30px;
}

h2.top-ttl .jp {
    font-weight: bold;
    font-size: 190%;
    letter-spacing: .1em;
}

.top-sec .txt-box {
    text-align: left;
}

/*-----------------------------
mainimg
-----------------------------*/
.mainimg {
    width: 100%;
    overflow: hidden;
}

.mainimg .inner{
    position: relative;
    max-width: 1366px;

    float: right;
    text-align: right;
}

.mainimg .img {
}

.mainimg .maintxt{
    display: block;
    width: 33.5%;
    position: absolute;
    top:31.5%;
    left:6%;
}

@media screen and (max-width: 896px) {
   .mainimg .maintxt{
    width: 39%;
    top:30.5%;
    left:1%;
}
}

/*-----------------------------
about
-----------------------------*/
.about {
    width: 100%;
    background: url(../img/top/about-back.png) right top no-repeat;
    padding-top: 200px;
    margin-top: -200px;
    margin-bottom: 130px;
}

.about .flex {
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;

    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.about .txt-box {
    width: 45%;
    max-width: 700px;
    padding-left: 5%;
}

.about figure {
    padding: 50px 5% 0 0;
    margin: 0;
    width: 50%;
    max-width: 690px;
    text-align: left;
    background: url(../img/top/about-photo-back.png) left top no-repeat;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px) {

    .about {
        margin-bottom: 50px;
    }

    .about .txt-box {
        width: 90%;
        max-width: 90%;
        padding-left: 0;
        margin: 0 auto;
    }

    .about figure {
        padding: 50px 0 0 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
    .about {
        background: none;
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 50px;
    }
}

/*-----------------------------
interview
-----------------------------*/
.interview {
    width: 100%;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 170px;
}

.interview .inner {
    width: 96%;
    max-width: 1312px;
    position: relative;
}

.interview .txt-box {
    position: absolute;
    width: 39%;
    top: 0;
    left: 0;
    padding-top: 10%;
    padding-bottom: 20px;
}

.interview .movie-list {
    background: url(../img/top/bg-dot.png) 20% -100px no-repeat, url(../img/top/bg-dot.png) right 60% no-repeat, url(../img/top/interview-back.png) 30% 30% no-repeat;
    padding-top: 100px;
    border-radius: 0 0 20px 20px;
}

.interview .movie-list ul {
    width: 80%;
    max-width: 1050px;
    margin: 0 auto;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.interview ul li {
    width: 48%;
    max-width: 485px;
    margin-bottom: 140px;
    text-align: left;
}

.interview ul::before {
    content: '';
    display: block;
    width: 50%;
}

.interview ul li .movie-wrap {
    width: 100%;
}


.interview ul li h3 {
    font-weight: bold;
    font-size: 130%;
    margin: 20px 0 10px
}

.interview ul li span {
    display: block;
    font-size: 90%;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 1024px) {
    .interview .txt-box {
        width: 43%;
        padding-top: 0;
        border-radius: 20px;
    }
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px) {
    .interview {
        width: 100%;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        margin-bottom: 50px;
    }
    .interview .inner {
        width: 100%;
        max-width: 100%;
    }
    .interview .txt-box {
        position: relative;
        width: 90%;
        margin: 0 auto;
        top: auto;
        left: auto;
        border-radius: 0;
        padding-top: 50px;
        background: url(../img/top/bg-dot.png) right -100px no-repeat;
    }

    .interview .movie-list {
        background: url(../img/top/interview-back-tab.jpg) no-repeat;
        background-size: cover;
        padding-top: 50px;
        border-radius: 0;
    }

    .interview .movie-list ul {
        width: 90%;
        max-width: 90%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .interview ul li {
        margin-bottom: 50px;
    }

    .interview ul::before {
        display: none;
    }
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {

    .interview {
        margin-bottom: 50px;
    }

    .interview .txt-box {
        padding-top: 0;
        background: none;
    }

    .interview ul li {
        width: 100%;
        max-width: 100%;
    }
}

/*-----------------------------
crosstalk
-----------------------------*/
.crosstalk {
    width: 100%;
    margin-bottom: 200px;
}

.crosstalk h2.top-ttl,
.crosstalk h2.top-ttl .en {
    margin-bottom: 10px;
}

.crosstalk .inner {
    width: 100%;
    max-width: 1262px;
    position: relative;
}

.crosstalk .txt-box {
    width: 50%;
    position: absolute;
    right: 0;
    padding-left: 3%;
    padding-top: 22%;
    padding-bottom: 150px;
    background: url(../img/top/crosstalk-img.png) 90% 30px no-repeat, url(../img/top/bg-dot.png) right bottom no-repeat;
}

.crosstalk figure {
    margin: 0;
}

.crosstalk {
    margin-bottom: 100px;
}

@media screen and (max-width: 896px) {
    .crosstalk h2.top-ttl,
    .crosstalk h2.top-ttl .en {
        margin-bottom: 30px;
    }

    .crosstalk .inner {
        width: 100%;
        max-width: 100%;
    }

    .crosstalk .txt-box {
        width: 90%;
        margin: 0 auto;
        position: relative;
        right: auto;
        padding: 0;
        background: url(../img/top/crosstalk-img.png) right 0 no-repeat;
        background-size: contain;
    }
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
    .crosstalk .txt-box {
        background: none;
    }
}

/*-----------------------------
相性診断
-----------------------------*/
.choose_box {
    background: url(../img/top/diag-back.jpg) center 0 no-repeat;
    background-size: cover;
    padding: 200px 0;
    margin-top: -100px;
}

.choose_box .d-wrap {
    background: #fff;
    border-radius: 10px;
    width: 90%;
    max-width: 860px;
    margin: 0 auto;
    padding: 10px;
}

.choose_box .d-wrap .border {
    border-radius: 10px;
    padding: 2px;
    background: -webkit-linear-gradient(0deg, #fba877, #eee2a5, #ddf0df, #f0f7ca);
}

.choose_box .d-wrap .borderIn {
    padding: 60px 0 0 0;
    height: 500px;
    border-radius: 10px;
    background: #fff;

}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px) {
    .choose_box {
        padding: 100px 0;
        margin-top: -120px;
    }
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
    .choose_box {
        margin-top: -150px;
    }

    .choose_box .d-wrap .borderIn {
        padding: 40px 0 0 0;
        height: 450px;
    }
}

/*----スタート画面----*/
.choose_box .start {
    width: 90%;
    margin: 0 auto;
    max-width: 730px;
}

.choose_box .start dt span {
    display: block;
    font-weight: bold;
    letter-spacing: .05em;
    margin-bottom: 25px;
}

.choose_box .start dd {
    position: relative;
    padding-top: 50px;
}

.choose_box .start dd::before {
    position: absolute;
    display: block;
    content: url(../img/top/diag-img01.png);
    top: 0;
    left: 0;
    z-index: 0;
}

.choose_box .start dd::after {
    position: absolute;
    display: block;
    content: url(../img/top/diag-img02.png);
    top: 0;
    right: 0;
    z-index: 0;
}

.choose_box .start dd p {
    position: relative;
    display: inline-block;
    width: auto;
    font-size: 90%;
    text-align: center;
    letter-spacing: .05em;
    margin-bottom: 40px;
    z-index: 1;
    text-shadow: 2px 2px 2px #fff,
    -1px 2px 2px #fff,
    1px -2px 2px #fff,
    -1px -2px 2px #fff;
}

.choose_box .start dd p span {
    display: block;
    font-size: 90%;
    color: #a7a7a7;
}

.choose_box .start a.btn {
    margin: 0 auto;
    z-index: 1;
}

@media screen and (max-width: 650px) {
    .choose_box .start dd::before,
    .choose_box .start dd::after {
        display: none;
    }
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
    .choose_box .start {
        margin-top: 50px;
    }
    .choose_box .start dt span {
        margin-bottom: 15px;
    }

    .choose_box .start dd {
        padding-top: 20px;
    }

    .choose_box .start dd p {
        margin-bottom: 30px;
    }
}


/*----質問画面----*/
.choose_box .question {
    width: 90%;
    margin: 0 auto;
    max-width: 730px;
}

.choose_box .question dt span {
    display: block;
    margin-top: -25px;
}

.choose_box .question dd {
    position: relative;
    padding-top: 40px;
}

.choose_box .question dd p.txt {
    font-weight: bold;
    text-align: center;
    font-size: 120%;
    letter-spacing: .05em;
}

.choose_box .question dd ul {
    max-width: 440px;
    margin: 40px auto 0;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.choose_box .question dd li a {
    display: block;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    text-align: center;
    border: 2px solid #f4a778;
    color: #f4a778;
    position: relative;
}

.choose_box .question dd li a:after {
    display: block;
    content: "\f0da";
    font-family: FontAwesome;
    height: 15px;
    color: #f9b37f;
    position: absolute;
    bottom: 40px;
    right: 0;
    left: 0;
    margin: auto;
    font-style: normal;
}

.choose_box .question dd li a:hover {
    border: none;
    color: #fff;
}

.choose_box .question dd li a:hover:after {
    color: #fff;
}

.choose_box .question dd li p {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.choose_box .question dd li p span {
    display: block;
}

.choose_box .question dd li p span.en {
    font-weight: bold;
    font-style: italic;
    letter-spacing: .2em;
    font-size: 180%;
    line-height: 1;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px) {
    .choose_box .question dd li a {
        width: 170px;
        height: 170px;
    }
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
    .choose_box .question dd ul {
        max-width: 250px;
        margin: 20px auto 0;
        display: block;
    }

    .choose_box .question dd li {
        width: 100%;
        margin: 0;
    }

    .choose_box .question dd li a {
        display: block;
        width: 100%;
        height: auto;
        max-width: 250px;
        font-size: 90%;
        border-radius: 50px;
        margin: 20px 0;
        padding: 15px 10px;
        letter-spacing: .3em;
    }

    .choose_box .question dd li a:after {
        display: block;
        content: "\f0da";
        font-family: FontAwesome;
        height: 15px;
        color: #f9b37f;
        position: absolute;
        bottom: 40px;
        right: 0;
        left: 0;
        margin: auto;
        font-style: normal;
    }

    .choose_box .question dd li a:after {
        top: 0;
        bottom: 0;
        right: 20px;
        left: auto;
    }

    .choose_box .question dd li p {
        position: relative;
        display: block;
        left: auto;
        top: auto;
        -webkit-transform: none;
        transform: none;
    }

    .choose_box .question dd li p span {
        display: inline-block;
    }

    .choose_box .question dd li p span.en {
        padding-right: 10px;
    }
}

/*----結果画面----*/
.choose_box .answer-wrap a.btn {
    margin: 0 auto 15px;
}

.choose_box .answer-wrap a.return {
    display: block;
    text-decoration: underline;
    font-size: 90%;
    color: #fdab61;
    letter-spacing: .05em;
}

.choose_box .answer-wrap a.return:after {
    content: " \f0da";
    font-family: FontAwesome;
    color: #f9b37f;
}

.choose_box .answer {
    width: 90%;
    margin: 0 auto;
    padding: 30px 0;
    max-width: 580px;
}

.choose_box .answer p.txt {
    font-weight: bold;
    text-align: center;
    font-size: 110%;
    letter-spacing: .05em;
    line-height: 2.5;
    padding-bottom: 20px;
}

.choose_box .answer p.txt span {
    display: block;
    border-bottom: 2px dotted #e5e5e5;
}

.choose_box .answer dl {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 15px;
}

.choose_box .answer dl dt {
    margin-right: 20px;
}

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px) {
    .choose_box .answer p.txt {
        width: 80%;
        margin: 0 auto;
    }

    .choose_box .answer p.txt span {
        display: inline;
    }
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
    .choose_box .answer {
        padding: 15px 0;
    }

    .choose_box .answer-wrap a.return {
        font-size: 100%
    }

    .choose_box .answer p.txt {
        width: 90%;
        text-align: left;
    }

    .choose_box .answer dl dt {
        width: 33%;
        margin-right: 2%;
    }

    .choose_box .answer dl dd {
        width: 65%;
    }
}

/*-----------------------------
バナー
-----------------------------*/
.top-banner {
    width: 90%;
    max-width: 1160px;
    margin: 0 auto 100px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.top-banner li.ban-data {
    width: 100%;
    background: url(../img/top/ban-data-img.png) left center no-repeat, #fffbdf;
    background-size: cover;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.top-banner li.ban-data dl {
    width: 90%;
    margin: 70px auto 40px;
    text-align: left;
}

.top-banner li.ban-data dl dt {
    font-weight: bold;
    font-size: 400%;
    letter-spacing: .1em;
    line-height: 1.2;
    margin-bottom: 15px;
    text-shadow: 2px 2px 2px #fffbdf,
    -1px 2px 2px #fffbdf,
    1px -2px 2px #fffbdf,
    -1px -2px 2px #fffbdf;
}

.top-banner li.ban-data dl p {
    text-shadow: 2px 2px 2px #fffbdf,
    -1px 2px 2px #fffbdf,
    1px -2px 2px #fffbdf,
    -1px -2px 2px #fffbdf;
}

.top-banner li.ban-bottom {
    width: 49%;
    border-radius: 10px;
}

.top-banner li.ban-wel {
    background: url(../img/top/ban-wel.jpg) center center no-repeat;
    background-size: cover;
}

.top-banner li.ban-req {
    background: url(../img/top/ban-req.jpg) center center no-repeat;
    background-size: cover;
}

.top-banner li.ban-bottom dl {
    width: 80%;
    margin: 135px auto 60px;
    text-align: left;
}

.top-banner li.ban-bottom dl dt {
    color: #fff;
    font-weight: bold;
    font-size: 250%;
    letter-spacing: .1em;
    line-height: 1.2;
    margin-bottom: 15px;
    line-height: 1;
    word-wrap: break-word;
}

.top-banner li.ban-bottom dl p {
    color: #fff;
    font-size: 120%;
    letter-spacing: .3em;
    color: #fff;
}

/*==== tablet タブレット用css ===*/
@media screen and (max-width: 1024px) {
.top-banner li.ban-bottom dl {
    width: 90%;
}
    }

/*==== mobile スマフォ横〜用css ===*/
@media screen and (max-width: 896px) {
    .top-banner li.ban-bottom dl {
        margin: 100px auto 40px;
    }
}

/*==== mobile スマフォ縦用css ===*/
@media screen and (max-width: 480px) {
    .top-banner {
        margin-bottom: 50px;
    }

    .top-banner li.ban-data {
        margin-bottom: 20px;
    }

    .top-banner li.ban-data dl {
        margin: 50px auto 30px;
    }

    .top-banner li.ban-bottom {
        width: 100%;
        margin-bottom: 20px;
    }

    .top-banner li.ban-bottom dl {
        margin: 50px auto 30px;
    }
}