@charset "UTF-8";
/* balloon */
#mainContents .balloon { position: fixed; width: 245px; right: 10px; bottom: 190px; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; -moz-transform: translateY(440px); -ms-transform: translateY(440px); -webkit-transform: translateY(440px); transform: translateY(440px); }
#mainContents .balloon.on { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); transform: translateY(0px); }
#mainContents .balloon .balloon-main { display: block; }
#mainContents .balloon .balloon-main:hover { opacity: .8; }
#mainContents .balloon .balloon-close { display: block; position: absolute; top: -25px; right: 0; }
@media only screen and (max-width: 640px) {
  #mainContents .balloon { display: none; } }
}
/* modal */
body.modal-open { overflow: hidden; padding-right: 0; position: relative; }
body.modal-open #mainContents { position: static; }
body.modal-open .coccoapo-modal { overflow-x: hidden; overflow-y: auto; }
#matching-modal{z-index: -1;}
body.modal-open #matching-modal{z-index: 1050;}
.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; display: none; background-color: #000; }
.modal-backdrop.fade { opacity: 0; -moz-transition-duration: 0.15s; -o-transition-duration: 0.15s; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity; transition-property: opacity; }
.modal-backdrop.fade.in { opacity: 0.5; }

.coccoapo-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; }
.coccoapo-modal.fade { opacity: 0; -moz-transition-duration: 0.15s; -o-transition-duration: 0.15s; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity; transition-property: opacity; }
.coccoapo-modal.fade.in { opacity: 1; }
.coccoapo-modal .modal-dialog { width: 900px; height: 560px; background: url(/ph/coccoapo/img/index_bg_silver.png) repeat; margin: 50px auto; position: relative; }
.coccoapo-modal .modal-dialog .modal-close { position: absolute; top: 10px; right: 10px; }
.coccoapo-modal .modal-dialog .modal-close:hover { opacity: .8; }

#matching-cube-heading { margin-bottom: 30px; }

#matching-cube { width: 900px; margin: 0 auto; padding: 0 20px 20px; box-sizing: border-box; overflow: hidden; }
#matching-cube a { text-decoration: none; color: #533277; }
#matching-cube .cube-sec { width: 560px; float: left; }
#matching-cube .cube-sec .cube-main { width: 560px; height: 540px; margin: 0 auto; position: relative; z-index: 0; overflow: hidden; }
#matching-cube .cube-sec .cube-main.full-width { overflow: visible; }
#matching-cube .cube-sec .cube-main .panel { display: none; width: 560px; height: 540px; position: absolute; left: 0; top: 0; z-index: 0; }
#matching-cube .cube-sec .cube-main .panel.current { z-index: 2 !important; }
#matching-cube .cube-sec .cube-main .panel.next { z-index: 1 !important; }
#matching-cube .cube-sec .cube-main .panel.init-img { position: relative; z-index: 0; }
#matching-cube .cube-sec .cube-main .panel.init-img a { display: block; line-height: 0; }
#matching-cube .cube-sec .cube-main .panel.init-img a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
#matching-cube .cube-sec .cube-main .panel.init-img a:hover img { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
#matching-cube .cube-sec .cube-main .panel.second-anim { width: 900px; height: 540px; background: #fff; margin-top: 30px; }
#matching-cube .cube-sec .cube-main .panel.second-anim .anim-wrap { line-height: 0; display: none; }
#matching-cube .cube-sec .cube-main .panel.second-anim .anim-wrap img { width: 605px; }
#matching-cube .cube-sec .cube-main .panel.text-result, #matching-cube .cube-sec .cube-main .panel.chart-result { width: 900px; height: 560px; background: #fff; margin: 0 -20px; }
#matching-cube .cube-sec .cube-main .main-carousel { position: relative; z-index: 0; }
#matching-cube .cube-sec .cube-main .main-carousel .open-anim { position: absolute; top: 0; left: 0; width: 560px; height: 540px; z-index: 1; }
#matching-cube .cube-sec .cube-main .main-carousel .open-anim .oa-left, #matching-cube .cube-sec .cube-main .main-carousel .open-anim .oa-right { -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
#matching-cube .cube-sec .cube-main .main-carousel .open-anim .oa-left { position: absolute; top: 50px; left: 0; width: 280px; height: 490px; background: url(/ph/coccoapo/img/index_bg_silver.png) repeat; }
#matching-cube .cube-sec .cube-main .main-carousel .open-anim .oa-right { position: absolute; top: 50px; right: 0; width: 280px; height: 490px; background: url(/ph/coccoapo/img/index_bg_silver.png) repeat; background-position: -280px 0; }
#matching-cube .cube-sec .cube-main .main-carousel.current .open-anim .oa-left { -moz-transform: translate3d(-500px, 0, 0); -webkit-transform: translate3d(-500px, 0, 0); transform: translate3d(-500px, 0, 0); }
#matching-cube .cube-sec .cube-main .main-carousel.current .open-anim .oa-right { -moz-transform: translate3d(500px, 0, 0); -webkit-transform: translate3d(500px, 0, 0); transform: translate3d(500px, 0, 0); }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont { width: 560px; float: left; position: relative; z-index: 0; padding-top: 50px; height: 490px; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont.bg-0 .q-boxes { background: url(/ph/coccoapo/img/mc_new/bg_cont_0.jpg) no-repeat; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont.bg-1 .q-boxes { background: url(/ph/coccoapo/img/mc_new/bg_cont_1.jpg) no-repeat; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont.bg-2 .q-boxes { background: url(/ph/coccoapo/img/mc_new/bg_cont_2.jpg) no-repeat; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont.bg-3 .q-boxes { background: url(/ph/coccoapo/img/mc_new/bg_cont_3.jpg) no-repeat; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont.q-cont .q-boxes { width: 560px; height: 490px; padding: 40px 0; box-sizing: border-box; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont .q-heading { position: absolute; width: 0; height: 0; padding: 46px 0 0 379px; overflow: hidden; top: 2px; left: 0; background: url(/ph/coccoapo/img/mc_new/q_heading.png) no-repeat; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont .q-heading-sub { position: absolute; width: 0; height: 0; overflow: hidden; top: 18px; right: 0; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont .q-heading-sub.qhs-1 { padding: 30px 0 0 162px; background: url(/ph/coccoapo/img/mc_new/q_heading_sub_1.png) no-repeat; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont .q-heading-sub.qhs-2 { padding: 30px 0 0 169px; background: url(/ph/coccoapo/img/mc_new/q_heading_sub_2.png) no-repeat; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont .q-heading-sub.qhs-3 { padding: 31px 0 0 137px; background: url(/ph/coccoapo/img/mc_new/q_heading_sub_3.png) no-repeat; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont .q-heading-sub.qhs-4 { padding: 30px 0 0 135px; background: url(/ph/coccoapo/img/mc_new/q_heading_sub_4.png) no-repeat; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont .btn-goresult { position: absolute; top: 170px; left: 150px; }
#matching-cube .cube-sec .cube-main .main-carousel .c-cont .c-last-txt { position: absolute; top: 260px; left: 160px; color: #3b0056; line-height: 2; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box { text-align: center; margin: 40px 0; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box.q-box-left { text-align: left; padding-left: 100px; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box.q-box-left .p-ttl { text-indent: -100px; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box .p-ttl { color: #fff; padding-left: 60px; font-size: 20px; font-weight: bold; text-align: left; margin-bottom: 10px; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box a { display: inline-block; *display: inline; *zoom: 1; line-height: 32px; background: #fff; border: 1px solid #3b0056; width: 160px; margin: 0 16px 5px; font-size: 16px; letter-spacing: -0.5px; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box a.sbtn { font-size: 14px; width: 70px; margin: 0 2px 5px; position: relative; z-index: 0; vertical-align: top; letter-spacing: 0; text-align: center; line-height: 34px; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box a.sbtn.fix-h { height: 30px; line-height: 1.0; padding: 2px 0; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box a.sbtn .small { font-size: 10px; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box a.mbtn { width: 110px; margin: 0 5px 5px; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box a.s-txt { font-size: 12px; vertical-align: top; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box a.s-txt.multi { line-height:1.2; padding:2px 0; }
#matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box a:hover, #matching-cube .cube-sec .cube-main .main-carousel .q-cont .q-box a.current { background: #3b0056; color: #fff; text-decoration: none; }
#matching-cube .cube-sec .cube-main .text-result { position: relative; z-index: 0; }
#matching-cube .cube-sec .cube-main .text-result .open-anim { position: absolute; top: 0; left: 0; width: 1000px; height: 460px; z-index: 1; }
#matching-cube .cube-sec .cube-main .text-result .open-anim .oa-top, #matching-cube .cube-sec .cube-main .text-result .open-anim .oa-bottom { -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; -webkit-transition-delay: 0.6s; transition-delay: 0.6s; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); }
#matching-cube .cube-sec .cube-main .text-result .open-anim .oa-top { -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -webkit-transform-origin: bottom left; transform-origin: bottom left; position: absolute; top: 0; left: -250px; width: 1500px; height: 230px; background: #fff; }
#matching-cube .cube-sec .cube-main .text-result .open-anim .oa-bottom { -moz-transform-origin: top right; -ms-transform-origin: top right; -webkit-transform-origin: top right; transform-origin: top right; position: absolute; bottom: 0; left: -250px; width: 1500px; height: 230px; background: #fff; }
#matching-cube .cube-sec .cube-main .text-result.current .open-anim .oa-top { -moz-transform: translate3d(0, -400px, 0); -webkit-transform: translate3d(0, -400px, 0); transform: translate3d(0, -400px, 0); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#matching-cube .cube-sec .cube-main .text-result.current .open-anim .oa-bottom { -moz-transform: translate3d(0, 400px, 0); -webkit-transform: translate3d(0, 400px, 0); transform: translate3d(0, 400px, 0); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#matching-cube .cube-sec .cube-main .text-result .t-result { line-height: 0; display: none; position: relative; z-index: 0; }
#matching-cube .cube-sec .cube-main .text-result .t-result .t-res-txt { position: absolute; width: 330px; top: 180px; right: 25px; font-size: 12px; line-height: 19px; color: #fff; }
#matching-cube .cube-sec .cube-main .text-result .btn-next { position: absolute; display: block; width: 160px; top: 400px; right: 100px; }
#matching-cube .cube-sec .cube-main .chart-result .c-result { display: none; position: relative; z-index: 0; width: 900px; height: 560px; }
#matching-cube .cube-sec .cube-main .chart-result .c-result.c-result-red { background: #e60013; }
#matching-cube .cube-sec .cube-main .chart-result .c-result.c-result-pink { background: #eb6ea5; }
#matching-cube .cube-sec .cube-main .chart-result .c-result.c-result-orange { background: #f49c00; }
#matching-cube .cube-sec .cube-main .chart-result .c-result.c-result-blue { background: #0080c8;}
#matching-cube .cube-sec .cube-main .chart-result .c-result .label-left { position: absolute; color: #fff; font-family: serif; font-size: 20px; font-weight: bold; top: 50px; left: 260px; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .label-right { position: absolute; color: #fff; font-family: serif; font-size: 20px; font-weight: bold; top: 50px; left: 670px; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .result-banner { position: absolute; top: 85px; left: 35px; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .room-banner { position: absolute; top: 380px; left: 70px; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .room-banner a { display: block; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .room-banner a:hover { opacity: .8; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .button-item { position: absolute; left: 540px; top: 380px; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .button-item a { display: block; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .button-item a:hover { opacity: .8; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .button-top { position: absolute; left: 540px; top: 460px; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .button-top a { display: block; }
#matching-cube .cube-sec .cube-main .chart-result .c-result .button-top a:hover { opacity: .8; }
#matching-cube .cube-sec .cube-main .item-result .i-result { line-height: 0; display: none; position: relative; z-index: 0; }
#matching-cube .cube-sec .cube-main .item-result .i-result .btn-viewdetail { position: absolute; display: block; width: 145px; top: 200px; right: 50px; }
#matching-cube .cube-sec .cube-main .item-result .i-result .i-res-txt { position: absolute; width: 200px; top: 160px; left: 40px; color: #fff; text-align: center; font-size: 15px; line-height: 1.4; }
#matching-cube .cube-sec .cube-main .item-result .btn-retry { position: absolute; display: block; width: 120px; top: 410px; right: 50px; }
#matching-cube .cube-sec .cube-main .chart-result #cobweb-chart { position: absolute; width: 170px; height: 170px; top: 120px; left: 650px; }
#matching-cube .cube-sec .cube-main .chart-result .cobweb-txt { position: absolute; color: #3c0057; font-size: 12px; }
#matching-cube .cube-sec .cube-main .chart-result .cobweb-txt.ct-0 { top: 100px; left: 713px; }
#matching-cube .cube-sec .cube-main .chart-result .cobweb-txt.ct-1 { top: 130px; left: 800px; }
#matching-cube .cube-sec .cube-main .chart-result .cobweb-txt.ct-2 { top: 190px; left: 825px; }
#matching-cube .cube-sec .cube-main .chart-result .cobweb-txt.ct-3 { top: 260px; left: 800px; }
#matching-cube .cube-sec .cube-main .chart-result .cobweb-txt.ct-4 { top: 290px; left: 713px; }
#matching-cube .cube-sec .cube-main .chart-result .cobweb-txt.ct-5 { top: 260px; left: 645px; }
#matching-cube .cube-sec .cube-main .chart-result .cobweb-txt.ct-6 { top: 197px; left: 613px; }
#matching-cube .cube-sec .cube-main .chart-result .cobweb-txt.ct-7 { top: 130px; left: 650px; }
#matching-cube .cube-sec .cube-main .chart-result .btn-backtrend { position: absolute; display: block; width: 165px; top: 410px; right: 210px; }
#matching-cube .cube-sec .cube-main .chart-result .btn-viewitem { position: absolute; display: block; width: 165px; top: 410px; right: 20px; }
#matching-cube .cube-sec .cube-main .chart-result .img-result { position: absolute; display: block; width: 290px; top: 400px; left: 15px; line-height: 0; }
#matching-cube .list-sec { width: 280px; float: right; margin-left: 20px; }
#matching-cube .list-sec .list-inner { width: 280px; margin: 0 auto; }
#matching-cube .list-sec .list-inner .play-users { margin-bottom: 10px; padding: 5px 0 10px; color: #fff; text-align: center; }
#matching-cube .list-sec .list-inner .play-users .pu-ttl { margin-top: 0; font-size: 18px; margin-bottom: 5px; line-height: 16px; color: #3b0055; font-weight: bold; }
#matching-cube .list-sec .list-inner .play-users .pu-box { width: 280px; margin: 10px auto 0 auto; padding: 10px 0; line-height: 20px; background: #3b0055; color: #ffffff; }
#matching-cube .list-sec .list-inner .play-users .pu-box span { display: inline-block; *display: inline; *zoom: 1; font-size: 15px; }
#matching-cube .list-sec .list-inner .play-users .pu-box .number { color: #fff; width: 158px; font-size: 24px; font-family: "メイリオ", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", sans-serif; font-weight: bold; }
#matching-cube .list-sec .list-inner .check-memo .cm-ttl { margin-top: 0; margin-bottom: 10px; color: #3b0055; font-size: 16px; line-height: 1; text-align: center; border-radius: 5px; font-weight: bold; padding-top: 25px; }
#matching-cube .list-sec .list-inner .check-memo .question-list { height: 490px; padding: 10px 15px; background-color: #fffdee; box-sizing: border-box; }
#matching-cube .list-sec .list-inner .check-memo .question-list .ql { display: none; font-size: 12px; color: #221814; line-height: 22px; padding: 8px 0; margin: 0; }
#matching-cube .list-sec .list-inner .check-memo .question-list .ql a { display: block; cursor: pointer; overflow: hidden; *zoom: 1; }
#matching-cube .list-sec .list-inner .check-memo .question-list .ql .qt { float: left; width: 150px; line-height: 22px; font-size: 11px; color: #5a5655; font-weight: bold; }
#matching-cube .list-sec .list-inner .check-memo .question-list .ql .at { display: none; float: right; width: 100px; text-align: left; color: #3b0055; font-size: 13px; line-height: 22px; font-weight: bold; }
#matching-cube .list-sec .list-inner .check-memo .question-list .ql .at.small { line-height:1.2; font-size:12px; padding-top:3px; }

#matching-cube-shadow { width: 950px; margin: 0 auto; }

.cube-main p { margin-top: 0; }
.cube-main .list > li { font-size: 11px; font-size: 1.1rem; line-height: 1.2; }

#matching-cube figure { position: relative; }

#matching-cube figure::before { position: absolute; top: 0; left: -75%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); transform: skewX(-25deg); }

#matching-cube figure:hover::before { -webkit-animation: shine 1.0s; animation: shine 1.0s; }

@-webkit-keyframes shine { 100% { left: 125%; } }
@keyframes shine { 100% { left: 125%; } }


.result-bottom-banner{
  position: absolute;
  top: 456px;
  left: 115px;
}

.result-bottom-banner a:hover{
  opacity: .6;
}

.banner-top-anan a:hover {
    opacity: .6;
}
/* bn try bottom  */
@media only screen and (max-width: 640px) {
  #brandSiteFooter{
    height: auto;
  }
  body.btm-banner{
    padding-bottom: 15.6%;
  }

  body.btm-banner .pageTop>a{
    padding-bottom: 15%;
  }

  #bnTryBtm{
    display: none;
  }
  body.btm-banner #bnTryBtm{
      display: block;
  }

  #bnTryBtm{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10000;
  }
}