body { background: none; font-size: 14px; line-height: 1.4em; } .hidden-sm { display: none !important; } img.center, img.block-center { position: relative; margin: 0 auto; max-width: 100%; z-index: 22; } .full-container { background-image: url(../images/common/sp/mBnr.jpg); background-size: 100%; padding-top: 150px; } .body-container { background-image: url(../images/common/sp/mBg.jpg); background-size: 100%; } .body-footer { background-image: url(../images/common/sp/mBg.jpg); background-size: 100%; padding: 30px 10px 20px; } .body-footer .copyrightTxt { font-size: .8em; margin: 5px auto; } /******************************** *** Header Part ********************************/ header{ background-image: url(../images/common/sp/naviBg.jpg); background-size: 100%; min-height: auto; } .navi-container { padding-top: 8px; } .naviInfo { display: table; margin: 0 auto; } .navi-container .navi_btn { margin: 0 2px; width: 136px; height: 31px; } .navi-container .navi_btn:before { background-size: 100%; } .navi-container a:hover .navi_btn:before { top: 0; } .breadcrumb { max-width: inherit; margin: 6px auto 10px; font-size: 0.9em; padding: 0 25px; } .paragraph strong { font-size: 130%; } /******************************** Header Part End ********************************/ .body-container .commonMenuBox .cmnInfo { margin: -1px auto; } .body-container .commonMenuBox .cmnTop, .body-container .commonMenuBox .cmnBtm { background-size: 100%; min-height: 20px; } .body-container .commonMenuBox .cmnTop { background-image: url(../images/common/menu/sp/cmnTitTop.jpg); } .body-container .commonMenuBox .cmnBtm { background-image: url(../images/common/menu/sp/cmnTitBtm.jpg); } .commonMenuBox .infoelement { padding: 0px 15px; } .commonMenuBox .iconelement { margin-right: 5px; width: 50px; height: 50px; } .commonMenuBox .infoelement .titelement h3:first-child { font-size: 16px; } .commonMenuBox .titelement { padding-left: 56px; font-size: 79%; } .commonMenuBox .titelement .title { font-size: 1.6em; } header .secDesc { width: 89%; margin: 10px auto 12px; } .secDesc br { display: none; } /*################## Button ##################*/ .free-btn, .charge-btn, .shuffle-btn { background-size: 100%; margin: 0 auto 10px; height: 75px; width: 150px; } .free-container .submit-btn { width: 210px; height: 63px; font-size: 1.1em; background-size: 100%; } .free-container .secCommon .submit-btn { width: 220px; } .submit-btn-last { width: 190px; height: 43px; } .submit-btn-trial, .submit-btn-type3 { top: 90px; width: 280px; height: 87px; } .secCommon .submit-btn-trial { top: 120px; height: 72px; } .res_type1_box1 .submit-btn-trial { top: 52px; height: 72px; z-index: 33; } .free-container .submit-btn:hover, .submit-btn-trial:hover, .submit-btn-type3:hover { background-position: center bottom; } .free-container .submit-btn .title { top: 22px; } .free-btn .title, .charge-btn .title, .submit-btn .title { top: 42%; font-size: 20px; } .charge-btn .adjust, .submit-btn .adjust { padding-top: 13px; } .free-btn .adjust { padding-top: 24px; } .free-container .jiki-btn { background-size: 100%; top: 50px; left: 20px; width: 245px; height: 110px; } .free-container .jiki-btn:hover { background: transparent url(../images/result/type2/res_type2_btn.png) no-repeat center bottom; background-size: 100%; } /*################## Button End ##################*/ /*################## info-container ##################*/ .info-container .section { background-image: url(../images/info/sp/proTop.jpg), url(../images/info/sp/infBtm.jpg), url(../images/info/sp/infBg.jpg); background-size: 100%; margin: 0 auto 10px; max-width: inherit; font-size: 1em; } .info-container .section.profile { padding: 104px 0 45px; } .info-container .section.profile .secInfo { padding: 140px 30px 30px; } .info-container .section.profile .secInfo ul li { margin-bottom: 6px; padding-right: 15px; } .info-container .section.profile .secInner { background-image: url(../images/info/sp/proMsg.jpg); background-size: 100%; padding: 65px 30px 10px; margin-bottom: 0; } .info-container .section.profile .proSign { background-size: 100%; width: 115px; height: 50px; } /*###### End Profile ######*/ .info-container .section.about { background-image: url(../images/info/sp/abtTop.jpg), url(../images/info/sp/introBtm.jpg), url(../images/info/sp/introBg.jpg); padding: 22px 0 35px; background-size: 100%; } .info-container .section.about .heading { height: 40px; } .info-container .abtSec { margin-bottom: 0; } .info-container .abtSec.abtSecCatch { background-image: url(../images/info/sp/abtCatch.jpg); background-size: 100%; padding: 10px 14px 9px 118px; height: 164px; } .info-container .abtSec .paragraph { padding: 0 25px; } .info-container .abtSec .abtTit { width: 280px; height: 145px; } .info-container .abtSecTit .abtTit { background-image: url(../images/info/sp/abtTop2.jpg); background-size: 100%; width: 100%; height: 85px; } .info-container .abtSecTit .paragraph { padding: 0 25px; } .info-container .abtSec .abtTit { background-size: 100%; width: 100%; font-size: 17px; } .info-container .abtSec1 .abtTit { background-image: url(../images/info/sp/introTit1.jpg); height: 55px; } .info-container .abtSec2 .abtTit { background-image: url(../images/info/sp/introTit2.jpg); padding: 11px 21px; height: 75px; } .info-container .abtSec3 .abtTit { background-image: url(../images/info/sp/introTit3.jpg); padding: 9px 34px; height: 56px; } /*###### End About ######*/ /*################## info-container End ##################*/ /*### sample-container ################*/ .samp-container .section.sample { background-size: 100%; padding: 70px 12px 50px; margin: -1px 0; } .samp-container .section.sample .sampImg { width: 110px; margin-right: 6px; } .samp-container .section.sample .test { float: left; width: 58%; } .samp-container .section.sample .test img { width: 175px; } .samp-container .section.sample .secSamp1, .samp-container .section.sample .secSamp3, .samp-container .section.sample .secSamp4, .samp-container .section.sample .secSamp5, .samp-container .section.sample .secSamp6, .samp-container .section.sample .secSamp8 { padding-top: 0; } /*################## sample-container End ##################*/ /*########################## input-container ##########################*/ .input-container .komiCatch{ background-image: url(../images/input/inpTopBg.jpg); background-position: -60px top; background-size: 160%; padding-top: 30px; } .input-container .komiCatch .komiMsg, .result-container .resCatch { max-width: 230px; margin: 0 10px 20px auto; padding: 12px 9px; } .komi { background-image: url(../images/input/sp/inpKmTop.jpg), url(../images/input/sp/inpKmBtm.jpg), url(../images/input/sp/inpKmBg.jpg); background-size: 100%; margin-bottom: -12px; padding: 70px 25px 50px; } .komi .komiUl { font-size: inherit; } .komi ul li { background-size: 20px; background-position: left 3px; margin-top: 10px; padding-top: 0; padding-left: 25px; font-size: 1.1em; } /*######### question #########*/ .input-container .formCatch { background: transparent url(../images/input/sp/formCatch.jpg) no-repeat center top; background-size: 100%; padding-top: 68px; width: 100%; } .question { background-image: url(../images/input/sp/inpFmBtm.jpg),url(../images/input/sp/inpFmBg.jpg); background-size: 100%; padding-bottom: 20px; } .question .top-heading.self { background-image: url(../images/input/sp/inpFmMe.jpg); padding: 85px 25px 10px; background-size: 100%; } .question .top-heading.target { background-image: url(../images/input/sp/inpFmYou.jpg); padding: 60px 25px 0; background-size: 100%; } .question .formInfo .inputHolder { display: table; margin: 0 auto; } .question form span.inbold, .question form span.bold { text-align: left; } .question form span.bold.birthTime, .question form span.bold.birth { display: inline-table; width: 100%; } .question form span.inbold { color: #000; font-size: 1.3em; } .question select.form_mm { margin-left: 6px; } select { -webkit-rtl-ordering: logical; -webkit-text-fill-color: #000000; opacity: 1; -webkit-border-radius: 3px; border-radius: 3px; } .question .inputRow.rBirthTime .attention { margin-top: 0; } .question .rGender { margin: 10px 7px 10px 1px; } .question form #sex11+span, .question form #sex21+span { display: initial; background: none; } .question .rGender span { margin-right: 0; min-width: 80px; } .question form span.birth_unit { display: inline-table; margin-left: -2px; width: 13px; height: 29px; font-weight: bold; } .question .inputRow.name .col:first-child { height: 32px; text-align: left; } .question .inputRow .attention { margin-top: -10px; font-size: 0.8em; } .question select.form_year { margin-left: 0px; width: 75px; } .question select.form_hh { margin-left: 0px; } input[type="text"], input[type="date"] { margin-left: 0; width: 268px; } .spanError { top: 16px; left: 147px; font-size: 9px; } /*.input_submit a { display: table; }*/ /*################## input-container End ##################*/ /*########################## result-container ##########################*/ .result-container .subbody-container { background-image: url(../images/result/sp/rsltBg.jpg); background-size: 100%; max-width: inherit; padding: 0; } .result-container .secGreeting { background-image: url(../images/result/sp/rsltInfTop1.jpg); background-size: 100%; min-height: 120px; padding: 25px 0 0; } .result-container .secGreeting .greetingInfo { background-image: url(../images/result/sp/resMsgImg2.jpg); background-size: 100%; padding: 10px 20px; min-height: 170px; } .result-container .secGreeting .greetingInfo .paragraph { padding: 0; max-width: 100%; width: 100%; line-height: 1.5em; } .result-container .secGreeting .greetingInfo .paragraph:before { content: ''; float: right; display: table; width: 120px; height: 110px; } .result-container .secCommon .secInList .paragraph, .result-container .secListing .secInList .paragraph { padding: 0 22px; } /*######### secCommon #########*/ .result-container .bigTit { background-size: 100%; } .result-container .secCommon {} .result-container .secCommon .commonCatch { background-image: url(../images/result/sp/resInfoTop2.jpg); background-size: 100%; height: 80px; } /*######### secCommon End #########*/ /*######### secListing #########*/ .result-container .secListing { background-size: 100%; padding-bottom: 40px; } .result-container .secListing .fixed-cont { width: inherit; } .result-container .secCommon .secTitle, .result-container .secListing .secTitle { background: none; border-image-source: url(../images/result/sp/rsltTitBgSub.jpg); border-image-slice: 40 40 40 40 fill; border-image-width: 20px 20px 20px 20px; border-image-repeat: round stretch; margin-bottom: 10px; padding: 18px 10px; font-size: 16px; line-height: 1.4em; clear: both; } .result-container .secCommon .secTitle br, .result-container .secListing .secTitle br { display: none; } .result-container .secListing .listFateAns .secTitle { margin-left: 0; padding: 10px; width: 217px; border: none; } .result-container .secListing .listFateAns .secTitle .paragraph { padding: 0; font-size: 17px; } .result-container .secListing .secTitle.titHeadline { margin-bottom: 10px; padding: 0 10px; font-size: 15px; border: none; } .result-container .secTitle.titMain { background: none; padding: 24px 10px; border-image-source: url(../images/result/sp/rsltTitBg.jpg); border-image-slice: 40 80 40 80 fill; border-image-width: 20px 40px 20px 40px; border-image-repeat: round stretch; } .result-container .secTitle.titHeadline { font-size: 15px; } .result-container .secTitle.titHeadline2 { margin-top: 0; width: 100%; border: none; } .result-container .secTitle.titHeadline2 br { display: none; } .result-container .secCommon .secTitle .paragraph, .result-container .secListing .secTitle .paragraph { padding: 0 12px; line-height: 1.4em; } .result-container .secListing .secList { padding-bottom: 10px; } .result-container .secListing .listFateAns { background-image: url(../images/result/sp/rsltInfTop5.jpg); background-size: 100%; padding: 0; } .result-container .secListing .listFateAns .fateCatch { padding: 18px; font-size: 16px; } .result-container .secListing .secMsg { background-size: 100%; margin-bottom: 0; padding-top: 10px; min-height: 220px; } .result-container .secListing .listAisyou .secMsg { background-image: url(../images/result/sp/rsltInfTop2.jpg); } .result-container .secListing .listPlus .secMsg { background-image: url(../images/result/sp/rsltInfTop3.jpg); } .result-container .secListing .listMinus .secMsg { background-image: url(../images/result/sp/rsltInfTop4.jpg); } .result-container.two-1 .secListing .listYesno { background-image: url(../images/result/sp/resInfoTop4.jpg); } .result-container .secListing .secMsg .resCatch { max-width: 100%; width: 60%; margin-left: 13px; padding: 10px 12px; } .result-container .secListing .listPlus .secMsg .paragraph { margin-right: 10px; } /*######### secListing End #########*/ .my_name, .single_name, .you_name, .single_name_you { padding: 1px 0 0; font-size: 68%; line-height: 100%; } .single_name, .single_name_you { width: 100%; margin: 0 auto; } .my_name2, .single_name2, .you_name2, .single_name_you2 { color: #fff; font-size: 68%; text-align: center; line-height: 105%; padding: 5px 0 5px; letter-spacing: -0.05rem; } /* ---------------------- * result_type1 *---------------------- */ [class^="res_type1_bg"], .res_type1_chart { background-size: 100%; width: 300px; } .res_type1_bg1 { height: 230px; } .res_type1_bg2 { height: 346px; } .res_type1_bg3 { height: 230px; } .res_type1_chart.cate1 { height: 138px; } .res_type1_chart.cate2 { height: 138px; } .res_type1_chart.cate3 { height: 138px; } .res_type1_chart.cate4 { height: 227px; } .res_type1_chart.cate5 { height: 138px; } .res_type1_chart.cate6 { height: 227px; } .scroll_box.res_type1_with_headline1 { margin-top: -17px; } .scroll_box.res_type1_with_headline2, .scroll_box.res_type1_with_headline3 { margin-top: -20px; } .res_type1_with_headline1 .res_type1_chart { height: 174px; background-position: center 36px; } .res_type1_with_headline2 .res_type1_chart, .res_type1_with_headline3 .res_type1_chart { height: 263px; background-position: center 36px; } /*チャクラ*/ [class^="res_type1_chakra"] img { width: 23px; height: 23px; position: absolute; } .res_type1_bg1 .res_type1_chakra1 img:nth-of-type(1), .res_type1_bg3 .res_type1_chakra1 img:nth-of-type(1) { top: 42px; left: 64.5px; } .res_type1_bg1 .res_type1_chakra1 img:nth-of-type(2), .res_type1_bg3 .res_type1_chakra1 img:nth-of-type(2) { top: 65px; left: 64.5px; } .res_type1_bg1 .res_type1_chakra1 img:nth-of-type(3), .res_type1_bg3 .res_type1_chakra1 img:nth-of-type(3) { top: 98px; left: 64.5px; } .res_type1_bg1 .res_type1_chakra1 img:nth-of-type(4), .res_type1_bg3 .res_type1_chakra1 img:nth-of-type(4) { top: 130px; left: 64.5px; } .res_type1_bg1 .res_type1_chakra1 img:nth-of-type(5), .res_type1_bg3 .res_type1_chakra1 img:nth-of-type(5) { top: 160px; left: 64.5px; } .res_type1_bg1 .res_type1_chakra1 img:nth-of-type(6), .res_type1_bg3 .res_type1_chakra1 img:nth-of-type(6) { top: 183px; left: 64.5px; } .res_type1_bg1 .res_type1_chakra1 img:nth-of-type(7), .res_type1_bg3 .res_type1_chakra1 img:nth-of-type(7) { top: 206px; left: 64.5px; } .res_type1_bg1 .res_type1_chakra2, .res_type1_bg3 .res_type1_chakra2 { display:none; } .res_type1_bg2 .res_type1_chakra1 img:nth-of-type(1) { top: 48px; left: 48.5px; } .res_type1_bg2 .res_type1_chakra1 img:nth-of-type(2) { top: 65px; left: 76.5px; } .res_type1_bg2 .res_type1_chakra1 img:nth-of-type(3) { top: 86px; left: 63.5px; } .res_type1_bg2 .res_type1_chakra1 img:nth-of-type(4) { top: 126px; left: 63.5px; } .res_type1_bg2 .res_type1_chakra1 img:nth-of-type(5) { top: 160px; left: 63.5px; } .res_type1_bg2 .res_type1_chakra1 img:nth-of-type(6) { top: 183px; left: 63.5px; } .res_type1_bg2 .res_type1_chakra1 img:nth-of-type(7) { top: 206px; left: 63.5px; } .res_type1_bg2 .res_type1_chakra2 img:nth-of-type(1) { top: 48px; left: 228.5px; } .res_type1_bg2 .res_type1_chakra2 img:nth-of-type(2) { top: 65px; left: 200.5px; } .res_type1_bg2 .res_type1_chakra2 img:nth-of-type(3) { top: 86px; left: 213.5px; } .res_type1_bg2 .res_type1_chakra2 img:nth-of-type(4) { top: 126px; left: 213.5px; } .res_type1_bg2 .res_type1_chakra2 img:nth-of-type(5) { top: 160px; left: 213.5px; } .res_type1_bg2 .res_type1_chakra2 img:nth-of-type(6) { top: 183px; left: 213.5px; } .res_type1_bg2 .res_type1_chakra2 img:nth-of-type(7) { top: 206px; left: 213.5px; } /*○*/ .res_type1_maru1 img { width: 50px; height: 38px; position: absolute; } .res_type1_maru2 img { width: 50px; height: 38px; position: absolute; } .res_type1_bg1 .res_type1_maru1 img:nth-of-type(1), .res_type1_bg3 .res_type1_maru1 img:nth-of-type(1) { top: 34px; left: 52px; } .res_type1_bg1 .res_type1_maru1 img:nth-of-type(2), .res_type1_bg3 .res_type1_maru1 img:nth-of-type(2) { top: 57px; left: 52px; } .res_type1_bg1 .res_type1_maru1 img:nth-of-type(3), .res_type1_bg3 .res_type1_maru1 img:nth-of-type(3) { top: 90px; left: 52px; } .res_type1_bg1 .res_type1_maru1 img:nth-of-type(4), .res_type1_bg3 .res_type1_maru1 img:nth-of-type(4) { top: 122px; left: 52px; } .res_type1_bg1 .res_type1_maru1 img:nth-of-type(5), .res_type1_bg3 .res_type1_maru1 img:nth-of-type(5) { top: 152px; left: 52px; } .res_type1_bg1 .res_type1_maru1 img:nth-of-type(6), .res_type1_bg3 .res_type1_maru1 img:nth-of-type(6) { top: 175px; left: 52px; } .res_type1_bg1 .res_type1_maru1 img:nth-of-type(7), .res_type1_bg3 .res_type1_maru1 img:nth-of-type(7) { top: 198px; left: 52px; } .res_type1_bg1 .res_type1_maru2, .res_type1_bg3 .res_type1_maru2 { display: none; } .res_type1_bg2 .res_type1_maru1 img:nth-of-type(1) { top: 41px; left: 34px; } .res_type1_bg2 .res_type1_maru1 img:nth-of-type(2) { top: 57px; left: 62px; } .res_type1_bg2 .res_type1_maru1 img:nth-of-type(3) { top: 78px; left: 48px; } .res_type1_bg2 .res_type1_maru1 img:nth-of-type(4) { top: 118px; left: 48px; } .res_type1_bg2 .res_type1_maru1 img:nth-of-type(5) { top: 152px; left: 48px; } .res_type1_bg2 .res_type1_maru1 img:nth-of-type(6) { top: 175px; left: 48px; } .res_type1_bg2 .res_type1_maru1 img:nth-of-type(7) { top: 198px; left: 48px; } .res_type1_bg2 .res_type1_maru2 img:nth-of-type(1) { top: 41px; left: 214px; } .res_type1_bg2 .res_type1_maru2 img:nth-of-type(2) { top: 57px; left: 186px; } .res_type1_bg2 .res_type1_maru2 img:nth-of-type(3) { top: 78px; left: 200px; } .res_type1_bg2 .res_type1_maru2 img:nth-of-type(4) { top: 118px; left: 200px; } .res_type1_bg2 .res_type1_maru2 img:nth-of-type(5) { top: 152px; left: 200px; } .res_type1_bg2 .res_type1_maru2 img:nth-of-type(6) { top: 175px; left: 200px; } .res_type1_bg2 .res_type1_maru2 img:nth-of-type(7) { top: 198px; left: 200px; } /*重要*/ .res_type1_strong img { width: 192px; height: 146px; position: absolute; } .res_type1_bg1 .res_type1_strong img, .res_type1_bg3 .res_type1_strong img { display:none; } .res_type1_bg2 .res_type1_strong img { top: 65px; left: 54px; } .res_type1_light { width: 192px; height: 146px; position: absolute; top: 65px; left: 54px; background-image: url(../images/result/type/res_type1_light.png); background-repeat: no-repeat; background-size: 100% 100%; } /*手*/ .res_type1_hand { background-image: url(../images/result/type/res_type1_hand.png); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; } .res_type1_bg1 .res_type1_hand, .res_type1_bg3 .res_type1_hand { width: 77px; height: 65px; top: 160px; left: 89px; } .res_type1_bg1.strong1 .res_type1_hand, .res_type1_bg3.strong1 .res_type1_hand {top: 40px;} .res_type1_bg1.strong2 .res_type1_hand, .res_type1_bg3.strong2 .res_type1_hand {top: 60px;} .res_type1_bg1.strong3 .res_type1_hand, .res_type1_bg3.strong3 .res_type1_hand {top: 95px;} .res_type1_bg1.strong4 .res_type1_hand, .res_type1_bg3.strong4 .res_type1_hand {top: 130px;} .res_type1_bg1.strong5 .res_type1_hand, .res_type1_bg3.strong5 .res_type1_hand {top: 160px;} .res_type1_bg1.strong6 .res_type1_hand, .res_type1_bg3.strong6 .res_type1_hand {top: 180px;} .res_type1_bg1.strong7 .res_type1_hand, .res_type1_bg3.strong7 .res_type1_hand {top: 200px;} .res_type1_bg2 .res_type1_hand { width: 77px; height: 65px; top: 140px; left: 150px; } /*テキスト*/ [class^="res_type1_bg"] .res_type1_text1 { width: 100%; position: absolute; margin: 0 auto; text-align: center; top: 10px; left: 0; } [class^="res_type1_bg"] .res_type1_text1 .res_type1_title { font-size: 90%; } [class^="res_type1_bg"] .res_type1_text2 { font-size: 10px; line-height: 14px; } .res_type1_bg1 .res_type1_text2, .res_type1_bg3 .res_type1_text2 { width: 203px; height: 162px; top: 53px; left: 116px; } .res_type1_bg2 .res_type1_text2 { top: 245px; left: 0; height: 82px; width: 100%; } .res_type1_text2 i, .res_type1_text2 strong { font-size: 102%; } .res_type1_bg_headline { margin: 0px auto; width: 300px; height: 46px; } .res_type1_bg_headline .res_type1_headline { font-size: 12px; line-height: 14px; text-align: center; } .res_type1_chart .res_type1_chartbg { left: 10px; width: 138px; height: 138px; } .res_type1_with_headline1 .res_type1_chart .res_type1_chartbg, .res_type1_with_headline2 .res_type1_chart .res_type1_chartbg, .res_type1_with_headline3 .res_type1_chart .res_type1_chartbg { top: 36px; } .res_type1_chart .res_type1_chartbg.you { left: 405px; } .res_type1_chart .res_type1_chartbg.you { left: 152px; } /*棒グラフ*/ .res_type1_chart [class^="res_type1_bargragh"] { width: 100px; height: 108px; top: 15px; left: 186px; } .res_type1_chart.cate4 .res_type1_bargragh1, .res_type1_chart.cate6 .res_type1_bargragh1, .res_type1_chart.cate4 .res_type1_bargragh2, .res_type1_chart.cate6 .res_type1_bargragh2 { top: 142px; right: 166px; width: 100px; height: 70px; } .res_type1_chart.cate4 .res_type1_bargragh2, .res_type1_chart.cate6 .res_type1_bargragh2 { top: 142px; left: 166px; } .res_type1_with_headline1 .res_type1_chart [class^="res_type1_bargragh"] { top: 51px; } .res_type1_with_headline2 .res_type1_chart [class^="res_type1_bargragh"], .res_type1_with_headline3 .res_type1_chart [class^="res_type1_bargragh"] { top: 178px; } .res_type1_chart.cate1 .res_type1_bargragh1 div:nth-of-type(1), .res_type1_chart.cate2 .res_type1_bargragh1 div:nth-of-type(1), .res_type1_chart.cate3 .res_type1_bargragh1 div:nth-of-type(1), .res_type1_chart.cate5 .res_type1_bargragh1 div:nth-of-type(1) { top: 4px; height: 8px; } .res_type1_chart.cate4 .res_type1_bargragh1 div:nth-of-type(1), .res_type1_chart.cate6 .res_type1_bargragh1 div:nth-of-type(1) { top: 2px; height: 6px; } .res_type1_chart.cate4 .res_type1_bargragh2 div:nth-of-type(1), .res_type1_chart.cate6 .res_type1_bargragh2 div:nth-of-type(1) { top: 2px; height: 6px; } .res_type1_chart.cate1 .res_type1_bargragh1 div:nth-of-type(2), .res_type1_chart.cate2 .res_type1_bargragh1 div:nth-of-type(2), .res_type1_chart.cate3 .res_type1_bargragh1 div:nth-of-type(2), .res_type1_chart.cate5 .res_type1_bargragh1 div:nth-of-type(2) { top: 19px; height: 8px; } .res_type1_chart.cate4 .res_type1_bargragh1 div:nth-of-type(2), .res_type1_chart.cate6 .res_type1_bargragh1 div:nth-of-type(2) { top: 12px; height: 6px; } .res_type1_chart.cate4 .res_type1_bargragh2 div:nth-of-type(2), .res_type1_chart.cate6 .res_type1_bargragh2 div:nth-of-type(2) { top: 12px; height: 6px; } .res_type1_chart.cate1 .res_type1_bargragh1 div:nth-of-type(3), .res_type1_chart.cate2 .res_type1_bargragh1 div:nth-of-type(3), .res_type1_chart.cate3 .res_type1_bargragh1 div:nth-of-type(3), .res_type1_chart.cate5 .res_type1_bargragh1 div:nth-of-type(3) { top: 35px; height: 8px; } .res_type1_chart.cate4 .res_type1_bargragh1 div:nth-of-type(3), .res_type1_chart.cate6 .res_type1_bargragh1 div:nth-of-type(3) { top: 22px; height: 6px; } .res_type1_chart.cate4 .res_type1_bargragh2 div:nth-of-type(3), .res_type1_chart.cate6 .res_type1_bargragh2 div:nth-of-type(3) { top: 22px; height: 6px; } .res_type1_chart.cate1 .res_type1_bargragh1 div:nth-of-type(4), .res_type1_chart.cate2 .res_type1_bargragh1 div:nth-of-type(4), .res_type1_chart.cate3 .res_type1_bargragh1 div:nth-of-type(4), .res_type1_chart.cate5 .res_type1_bargragh1 div:nth-of-type(4) { top: 50px; height: 8px; } .res_type1_chart.cate4 .res_type1_bargragh1 div:nth-of-type(4), .res_type1_chart.cate6 .res_type1_bargragh1 div:nth-of-type(4) { top: 32px; height: 6px; } .res_type1_chart.cate4 .res_type1_bargragh2 div:nth-of-type(4), .res_type1_chart.cate6 .res_type1_bargragh2 div:nth-of-type(4) { top: 32px; height: 6px; } .res_type1_chart.cate1 .res_type1_bargragh1 div:nth-of-type(5), .res_type1_chart.cate2 .res_type1_bargragh1 div:nth-of-type(5), .res_type1_chart.cate3 .res_type1_bargragh1 div:nth-of-type(5), .res_type1_chart.cate5 .res_type1_bargragh1 div:nth-of-type(5) { top: 65px; height: 8px; } .res_type1_chart.cate4 .res_type1_bargragh1 div:nth-of-type(5), .res_type1_chart.cate6 .res_type1_bargragh1 div:nth-of-type(5) { top: 42px; height: 6px; } .res_type1_chart.cate4 .res_type1_bargragh2 div:nth-of-type(5), .res_type1_chart.cate6 .res_type1_bargragh2 div:nth-of-type(5) { top: 42px; height: 6px; } .res_type1_chart.cate1 .res_type1_bargragh1 div:nth-of-type(6), .res_type1_chart.cate2 .res_type1_bargragh1 div:nth-of-type(6), .res_type1_chart.cate3 .res_type1_bargragh1 div:nth-of-type(6), .res_type1_chart.cate5 .res_type1_bargragh1 div:nth-of-type(6) { top: 81px; height: 8px; } .res_type1_chart.cate4 .res_type1_bargragh1 div:nth-of-type(6), .res_type1_chart.cate6 .res_type1_bargragh1 div:nth-of-type(6) { top: 52px; height: 6px; } .res_type1_chart.cate4 .res_type1_bargragh2 div:nth-of-type(6), .res_type1_chart.cate6 .res_type1_bargragh2 div:nth-of-type(6) { top: 52px; height: 6px; } .res_type1_chart.cate1 .res_type1_bargragh1 div:nth-of-type(7), .res_type1_chart.cate2 .res_type1_bargragh1 div:nth-of-type(7), .res_type1_chart.cate3 .res_type1_bargragh1 div:nth-of-type(7), .res_type1_chart.cate5 .res_type1_bargragh1 div:nth-of-type(7) { top: 96px; height: 8px; } .res_type1_chart.cate4 .res_type1_bargragh1 div:nth-of-type(7), .res_type1_chart.cate6 .res_type1_bargragh1 div:nth-of-type(7) { top: 62px; height: 6px; } .res_type1_chart.cate4 .res_type1_bargragh2 div:nth-of-type(7), .res_type1_chart.cate6 .res_type1_bargragh2 div:nth-of-type(7) { top: 62px; height: 6px; } /* ---------------------- * result_type2 *---------------------- */ .res_type2_text1 { background-image: url(../images/result/type/res_type2_cate_txt1.jpg); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; width: 150px; height: 138px; top: 0px; left: 150px; } .res_type1_chart.cate4 .res_type2_text1, .res_type1_chart.cate6 .res_type2_text1 { background-image: url(../images/result/type/res_type2_cate_txt2.jpg); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; width: 300px; height: 88px; top: 138px; left: 0; } .res_type2_text2 { position: absolute; width: 123px; height: 9em; top: 23px; left: 164px; margin: 0 auto; padding: 0px 0px; box-sizing: border-box; color: #000; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 10px; line-height: 13px; text-align: left; letter-spacing: -0.02em; overflow: hidden; } .res_type1_chart.cate4 .res_type2_text2, .res_type1_chart.cate6 .res_type2_text2 { position: absolute; width: 237px; height: 5em; top: 148px; left: 30px; } .res_type2_text2 strong, .res_type2_text2 i { font-size: 108%; } .res_type2_text2 strong { color: #c30a0a; } .res_type2_text2 i { color: #0a50c3; } .res_type2_text_img { position: absolute; width: 150px; height: 138px; top: 0px; left: 154px; background-image: url(../images/result/type/res_type2_cate_trial1.jpg); background-repeat: no-repeat; background-size: 100% 100%; } .res_type1_chart.cate4 .res_type2_text_img, .res_type1_chart.cate6 .res_type2_text_img { position: absolute; width: 300px; height: 88px; top: 138px; left: 0; background-image: url(../images/result/type/res_type2_cate_trial2.jpg); background-repeat: no-repeat; background-size: 100% 100%; } .res_type2_text3 { background-color: rgba(0,0,0,0.5); position: absolute; display: flex; top: 0; left: -4px; width: 308px; flex-direction: column; align-items: center; justify-content: center; } .res_type2_text3 p { font-size: 93%; } .res_type1_chart.cate1 .res_type2_text3, .res_type1_chart.cate2 .res_type2_text3, .res_type1_chart.cate3 .res_type2_text3, .res_type1_chart.cate5 .res_type2_text3 { padding-top: 9px; height: 138px; } .res_type1_chart.cate4 .res_type2_text3, .res_type1_chart.cate6 .res_type2_text3 { height: 227px; } .res_type2_text3 div { width: 90%; text-align: center; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; color: #ffe552; font-size: 90%; line-height: 130%; } [class^="res_type2_img"] img { width: 50px; height: 27px; position: absolute; } .res_type1_chart.cate1 .res_type2_img1 img:nth-of-type(1), .res_type1_chart.cate2 .res_type2_img1 img:nth-of-type(1), .res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(1) { top: 0px; left: 58px; } .res_type1_chart.cate3 .res_type2_img1 img:nth-of-type(1) { top: 0px; left: 56px; } .res_type1_chart.cate1 .res_type2_img1 img:nth-of-type(2), .res_type1_chart.cate2 .res_type2_img1 img:nth-of-type(2), .res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(2) { top: 14px; left: 105px; } .res_type1_chart.cate3 .res_type2_img1 img:nth-of-type(2) { top: 14px; left: 99px; } .res_type1_chart.cate1 .res_type2_img1 img:nth-of-type(3), .res_type1_chart.cate2 .res_type2_img1 img:nth-of-type(3), .res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(3) { top: 81px; left: 114px; } .res_type1_chart.cate3 .res_type2_img1 img:nth-of-type(3) { top: 81px; left: 109px; } .res_type1_chart.cate1 .res_type2_img1 img:nth-of-type(4), .res_type1_chart.cate2 .res_type2_img1 img:nth-of-type(4), .res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(4) { top: 109px; left: 88px; } .res_type1_chart.cate3 .res_type2_img1 img:nth-of-type(4) { top: 109px; left: 84px; } .res_type1_chart.cate1 .res_type2_img1 img:nth-of-type(5), .res_type1_chart.cate2 .res_type2_img1 img:nth-of-type(5), .res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(5) { top: 109px; left: 21px; } .res_type1_chart.cate3 .res_type2_img1 img:nth-of-type(5) { top: 109px; left: 24px; } .res_type1_chart.cate1 .res_type2_img1 img:nth-of-type(6), .res_type1_chart.cate2 .res_type2_img1 img:nth-of-type(6), .res_type1_chart.cate3 .res_type2_img1 img:nth-of-type(6), .res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(6) { top: 81px; left: -2px; } .res_type1_chart.cate1 .res_type2_img1 img:nth-of-type(7), .res_type1_chart.cate2 .res_type2_img1 img:nth-of-type(7), .res_type1_chart.cate3 .res_type2_img1 img:nth-of-type(7), .res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(7) { top: 14px; left: 5px; } .res_type1_chart.cate1 .res_type2_img2 img, .res_type1_chart.cate2 .res_type2_img2 img, .res_type1_chart.cate3 .res_type2_img2 img, .res_type1_chart.cate5 .res_type2_img2 img { display: none; } .res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(1) { top: 16px; left: 103px; } .res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(1) { top: 0px; left: 54px; } .res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(2) { top: 18px; left: 112px; } .res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(2) { top: 18px; left: 105px; } .res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(3) { top: 81px; left: 115px; } .res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(3) { top: 111px; left: 85px; } .res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(4), .res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(4) { top: 112px; left: 88px; } .res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(5) { top: 112px; left: 22px; } .res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(5) { top: 112px; left: 26px; } .res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(6), .res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(6) { top: 81px; left: -3px; } .res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(7) { top: 18px; left: 7px; } .res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(7) { top: 18px; left: 4px; } .res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(1) { top: 14px; left: 248px; } .res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(1) { top: 0px; left: 196px; } .res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(2) { top: 18px; left: 252px; } .res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(2) { top: 18px; left: 247px; } .res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(3) { top: 81px; left: 254px; } .res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(3) { top: 111px; left: 230px; } .res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(4), .res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(4) { top: 112px; left: 231px; } .res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(5) { top: 112px; left: 164px; } .res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(5) { top: 112px; left: 169px; } .res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(6), .res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(6) { top: 16px; left: 146px; } .res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(7) { top: 18px; left: 149px; } .res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(7) { top: 18px; left: 145px; } /*手*/ .res_type2_hand { background-image: url(../images/result/type/res_type1_hand.png); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; } .res_type1_chart.cate1 .res_type2_hand, .res_type1_chart.cate2 .res_type2_hand, .res_type1_chart.cate3 .res_type2_hand, .res_type1_chart.cate5 .res_type2_hand { width: 77px; height: 65px; top: 20px; left: 170px; } .res_type1_chart.cate4 .res_type2_hand, .res_type1_chart.cate6 .res_type2_hand { width: 77px; height: 65px; top: 140px; left: 30px; } /* ---------------------- * result_type2 *---------------------- */ /* ---------------------- * result_type3 *---------------------- */ .res_type3_bg { width: 308px; margin: 0 auto 10px; background-repeat: no-repeat; background-size: 246px auto; background-position: top center; position: relative; overflow: hidden; /* height: 246px;*/ height: 276px; background-image: url(../images/result/type/res_type3_bg1.jpg); } /*テキスト*/ [class^="res_type3_text"] { font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; position: absolute; width: 300px; left: 4px; margin: 0 auto; text-align: center; font-size: 13px; line-height: 18px; letter-spacing: -0.05em; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; } .res_type3_text1 { color: #000; top: 15px; } .res_type3_text2 { color: #b210b4; bottom: 50px; } .res_type3_text2+p { left: 0; bottom: 7px; font-size: 12px; } /*タロットボタン*/ .shuffle-btn { width: 162px; height: 51px; top: 125px; left: 73px; } /*タロット*/ .res_type3_tarot_box { width: 246px; height: 246px; margin: 0 auto; position: absolute; top: 0; left: 31px; } .res_type3_tarot_box [class^="res_tarot_img"] { width: 35px; height: 58px; position: absolute; } .res_tarot_bg2 { width: 246px; height: 246px; position: absolute; top: 0; left: 31px; } /*シャッフル前*/ .res_type3_bg .res_tarot_img0 { top: 13px; left: 2px; } /*PAT1：芽生えのスプレッド*/ .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(1), .res_type3_bg.pat1 .res_tarot_img2:nth-of-type(1), .res_type3_bg.pat1 .res_tarot_img3:nth-of-type(1), .res_type3_bg.pat1 .res_tarot_img4:nth-of-type(1) { top: 65px; left: 2px; } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(2), .res_type3_bg.pat1 .res_tarot_img2:nth-of-type(2), .res_type3_bg.pat1 .res_tarot_img3:nth-of-type(2), .res_type3_bg.pat1 .res_tarot_img4:nth-of-type(2) { top: 65px; left: 37px; } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(3), .res_type3_bg.pat1 .res_tarot_img2:nth-of-type(3), .res_type3_bg.pat1 .res_tarot_img3:nth-of-type(3), .res_type3_bg.pat1 .res_tarot_img4:nth-of-type(3) { top: 94px; left: 71px; } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(4), .res_type3_bg.pat1 .res_tarot_img2:nth-of-type(4), .res_type3_bg.pat1 .res_tarot_img3:nth-of-type(4), .res_type3_bg.pat1 .res_tarot_img4:nth-of-type(4) { top: 65px; left: 210px; } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(5), .res_type3_bg.pat1 .res_tarot_img2:nth-of-type(5), .res_type3_bg.pat1 .res_tarot_img3:nth-of-type(5), .res_type3_bg.pat1 .res_tarot_img4:nth-of-type(5) { top: 65px; left: 175px; } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(6), .res_type3_bg.pat1 .res_tarot_img2:nth-of-type(6), .res_type3_bg.pat1 .res_tarot_img3:nth-of-type(6), .res_type3_bg.pat1 .res_tarot_img4:nth-of-type(6) { top: 94px; left: 140px; } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(7), .res_type3_bg.pat1 .res_tarot_img2:nth-of-type(7), .res_type3_bg.pat1 .res_tarot_img3:nth-of-type(7), .res_type3_bg.pat1 .res_tarot_img4:nth-of-type(7) { top: 123px; left: 106px; } /*PAT2：花拓くスプレッド*/ .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(1), .res_type3_bg.pat2 .res_tarot_img2:nth-of-type(1), .res_type3_bg.pat2 .res_tarot_img3:nth-of-type(1), .res_type3_bg.pat2 .res_tarot_img4:nth-of-type(1) { top: 65px; left: 175px; } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(2), .res_type3_bg.pat2 .res_tarot_img2:nth-of-type(2), .res_type3_bg.pat2 .res_tarot_img3:nth-of-type(2), .res_type3_bg.pat2 .res_tarot_img4:nth-of-type(2) { top: 94px; left: 210px; } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(3), .res_type3_bg.pat2 .res_tarot_img2:nth-of-type(3), .res_type3_bg.pat2 .res_tarot_img3:nth-of-type(3), .res_type3_bg.pat2 .res_tarot_img4:nth-of-type(3) { top: 94px; left: 140px; } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(4), .res_type3_bg.pat2 .res_tarot_img2:nth-of-type(4), .res_type3_bg.pat2 .res_tarot_img3:nth-of-type(4), .res_type3_bg.pat2 .res_tarot_img4:nth-of-type(4) { top: 123px; left: 175px; } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(5), .res_type3_bg.pat2 .res_tarot_img2:nth-of-type(5), .res_type3_bg.pat2 .res_tarot_img3:nth-of-type(5), .res_type3_bg.pat2 .res_tarot_img4:nth-of-type(5) { top: 65px; left: 71px; } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(6), .res_type3_bg.pat2 .res_tarot_img2:nth-of-type(6), .res_type3_bg.pat2 .res_tarot_img3:nth-of-type(6), .res_type3_bg.pat2 .res_tarot_img4:nth-of-type(6) { top: 94px; left: 37px; } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(7), .res_type3_bg.pat2 .res_tarot_img2:nth-of-type(7), .res_type3_bg.pat2 .res_tarot_img3:nth-of-type(7), .res_type3_bg.pat2 .res_tarot_img4:nth-of-type(7) { top: 123px; left: 2px; } /*PAT3：値を伸ばすスプレッド*/ .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(1), .res_type3_bg.pat3 .res_tarot_img2:nth-of-type(1), .res_type3_bg.pat3 .res_tarot_img3:nth-of-type(1), .res_type3_bg.pat3 .res_tarot_img4:nth-of-type(1) { top: 123px; left: 2px; } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(2), .res_type3_bg.pat3 .res_tarot_img2:nth-of-type(2), .res_type3_bg.pat3 .res_tarot_img3:nth-of-type(2), .res_type3_bg.pat3 .res_tarot_img4:nth-of-type(2) { top: 94px; left: 37px; } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(3), .res_type3_bg.pat3 .res_tarot_img2:nth-of-type(3), .res_type3_bg.pat3 .res_tarot_img3:nth-of-type(3), .res_type3_bg.pat3 .res_tarot_img4:nth-of-type(3) { top: 65px; left: 71px; } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(4), .res_type3_bg.pat3 .res_tarot_img2:nth-of-type(4), .res_type3_bg.pat3 .res_tarot_img3:nth-of-type(4), .res_type3_bg.pat3 .res_tarot_img4:nth-of-type(4) { top: 94px; left: 106px; } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(5), .res_type3_bg.pat3 .res_tarot_img2:nth-of-type(5), .res_type3_bg.pat3 .res_tarot_img3:nth-of-type(5), .res_type3_bg.pat3 .res_tarot_img4:nth-of-type(5) { top: 65px; left: 210px; } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(6), .res_type3_bg.pat3 .res_tarot_img2:nth-of-type(6), .res_type3_bg.pat3 .res_tarot_img3:nth-of-type(6), .res_type3_bg.pat3 .res_tarot_img4:nth-of-type(6) { top: 94px; left: 175px; } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(7), .res_type3_bg.pat3 .res_tarot_img2:nth-of-type(7), .res_type3_bg.pat3 .res_tarot_img3:nth-of-type(7), .res_type3_bg.pat3 .res_tarot_img4:nth-of-type(7) { top: 123px; left: 210px; } /*PAT4：実りのスプレッド*/ .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(1), .res_type3_bg.pat4 .res_tarot_img2:nth-of-type(1), .res_type3_bg.pat4 .res_tarot_img3:nth-of-type(1), .res_type3_bg.pat4 .res_tarot_img4:nth-of-type(1) { top: 51px; left: 106px; } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(2), .res_type3_bg.pat4 .res_tarot_img2:nth-of-type(2), .res_type3_bg.pat4 .res_tarot_img3:nth-of-type(2), .res_type3_bg.pat4 .res_tarot_img4:nth-of-type(2) { top: 80px; left: 71px; } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(3), .res_type3_bg.pat4 .res_tarot_img2:nth-of-type(3), .res_type3_bg.pat4 .res_tarot_img3:nth-of-type(3), .res_type3_bg.pat4 .res_tarot_img4:nth-of-type(3) { top: 109px; left: 37px; } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(4), .res_type3_bg.pat4 .res_tarot_img2:nth-of-type(4), .res_type3_bg.pat4 .res_tarot_img3:nth-of-type(4), .res_type3_bg.pat4 .res_tarot_img4:nth-of-type(4) { top: 138px; left: 71px; } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(5), .res_type3_bg.pat4 .res_tarot_img2:nth-of-type(5), .res_type3_bg.pat4 .res_tarot_img3:nth-of-type(5), .res_type3_bg.pat4 .res_tarot_img4:nth-of-type(5) { top: 138px; left: 140px; } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(6), .res_type3_bg.pat4 .res_tarot_img2:nth-of-type(6), .res_type3_bg.pat4 .res_tarot_img3:nth-of-type(6), .res_type3_bg.pat4 .res_tarot_img4:nth-of-type(6) { top: 109px; left: 175px; } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(7), .res_type3_bg.pat4 .res_tarot_img2:nth-of-type(7), .res_type3_bg.pat4 .res_tarot_img3:nth-of-type(7), .res_type3_bg.pat4 .res_tarot_img4:nth-of-type(7) { top: 80px; left: 140px; } /*PAT5：弦を伸ばすスプレッド*/ .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(1), .res_type3_bg.pat5 .res_tarot_img2:nth-of-type(1), .res_type3_bg.pat5 .res_tarot_img3:nth-of-type(1), .res_type3_bg.pat5 .res_tarot_img4:nth-of-type(1) { top: 65px; left: 210px; } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(2), .res_type3_bg.pat5 .res_tarot_img2:nth-of-type(2), .res_type3_bg.pat5 .res_tarot_img3:nth-of-type(2), .res_type3_bg.pat5 .res_tarot_img4:nth-of-type(2) { top: 94px; left: 175px; } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(3), .res_type3_bg.pat5 .res_tarot_img2:nth-of-type(3), .res_type3_bg.pat5 .res_tarot_img3:nth-of-type(3), .res_type3_bg.pat5 .res_tarot_img4:nth-of-type(3) { top: 65px; left: 140px; } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(4), .res_type3_bg.pat5 .res_tarot_img2:nth-of-type(4), .res_type3_bg.pat5 .res_tarot_img3:nth-of-type(4), .res_type3_bg.pat5 .res_tarot_img4:nth-of-type(4) { top: 94px; left: 106px; } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(5), .res_type3_bg.pat5 .res_tarot_img2:nth-of-type(5), .res_type3_bg.pat5 .res_tarot_img3:nth-of-type(5), .res_type3_bg.pat5 .res_tarot_img4:nth-of-type(5) { top: 123px; left: 71px; } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(6), .res_type3_bg.pat5 .res_tarot_img2:nth-of-type(6), .res_type3_bg.pat5 .res_tarot_img3:nth-of-type(6), .res_type3_bg.pat5 .res_tarot_img4:nth-of-type(6) { top: 123px; left: 37px; } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(7), .res_type3_bg.pat5 .res_tarot_img2:nth-of-type(7), .res_type3_bg.pat5 .res_tarot_img3:nth-of-type(7), .res_type3_bg.pat5 .res_tarot_img4:nth-of-type(7) { top: 123px; left: 2px; } /*1枚表示*/ .res_box1 { background-size: 100%; min-height: 154px; width: 125px; } .res_type3_img { width: 72px; height: 133px; display: block; margin: 0px auto; padding-top: 10px; } /* ---------------------- * result_type3 *---------------------- */ /* ---------------------- * result_type4 *---------------------- */ /* ---------------------- * result_type4 *---------------------- */ /* ---------------------- * result_type5 *---------------------- */ .res_type_datebox { width: 277px; margin: 0px auto; padding: 5px 0px 10px; font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 200%; color: #fcff00; text-shadow: 0 0 8px #ff9600, 0 0 8px #ff9600, 0 0 8px #ff9600, 0 0 8px #ff9600; position: relative; overflow: hidden; } /* ---------------------- * result_type5 *---------------------- */ /* ---------------------- * result_type6(last) *---------------------- */ .res_last_top { width: 320px; height: 250px; margin: 0 auto 10px; background-image: url(../images/common/res_last_top.jpg); background-repeat: no-repeat; background-size: 100% 100%; background-position: top center; } /* ---------------------- * result_type6(last) *---------------------- */ /* ---------------------- * animation *---------------------- */ [class^="res_type1_chakra"] img, [class^="res_type1_maru"] img, .res_type1_strong img, .res_type1_light, .res_type1_bg1 > .res_type1_text2, .res_type1_bg2 > .res_type1_text2, .res_type1_bg3 > .res_type1_text2, .res_type1_hand, .scroll_box .res_type1_chartbg canvas, .res_type2_img1 img, .res_type2_img2 img, .res_type2_text1, .res_type2_text2, .res_type2_text3, .res_type2_hand, .res_type2_text_img, .res_tarot_img2, .res_tarot_img3, .res_tarot_img4, .res_type3_btn_box.init, .res_type3_tarot_box.dummy img, .res_type3_tarot_box.back img, .res_type3_text1, .res_type3_text2 { opacity: 0; } .scroll_box .display_off [class^="res_type1_bargragh"] div img { width: 0%; } .res_type3_btn_box img { cursor: pointer; } .res_type3_tarot_box img.res_tarot_img1 { transition: transform 0.4s ease-out 0.1s; } .res_type3_btn_box.end img {display:none; opacity:0;} .res_type2_mask1 { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(1) { transform: translate(0px,-52px); } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(2) { transform: translate(-35px,-52px); } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(3) { transform: translate(-69px,-81px); } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(4) { transform: translate(-208px,-52px); } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(5) { transform: translate(-173px,-52px); } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(6) { transform: translate(-138px,-81px); } .res_type3_bg.pat1 .res_tarot_img1:nth-of-type(7) { transform: translate(-104px,-110px); } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(1) { transform: translate(-173px,-52px); } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(2) { transform: translate(-208px,-81px); } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(3) { transform: translate(-138px,-81px); } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(4) { transform: translate(-173px,-110px); } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(5) { transform: translate(-69px,-52px); } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(6) { transform: translate(-35px,-81px); } .res_type3_bg.pat2 .res_tarot_img1:nth-of-type(7) { transform: translate(0px,-110px); } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(1) { transform: translate(0px,-110px); } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(2) { transform: translate(-35px,-81px); } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(3) { transform: translate(-69px,-52px); } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(4) { transform: translate(-104px,-81px); } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(5) { transform: translate(-208px,-52px); } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(6) { transform: translate(-173px,-81px); } .res_type3_bg.pat3 .res_tarot_img1:nth-of-type(7) { transform: translate(-208px,-110px); } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(1) { transform: translate(-104px,-38px); } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(2) { transform: translate(-69px,-67px); } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(3) { transform: translate(-35px,-96px); } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(4) { transform: translate(-69px,-125px); } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(5) { transform: translate(-138px,-125px); } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(6) { transform: translate(-173px,-96px); } .res_type3_bg.pat4 .res_tarot_img1:nth-of-type(7) { transform: translate(-138px,-67px); } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(1) { transform: translate(-208px,-52px); } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(2) { transform: translate(-173px,-81px); } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(3) { transform: translate(-138px,-52px); } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(4) { transform: translate(-104px,-81px); } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(5) { transform: translate(-69px,-110px); } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(6) { transform: translate(-35px,-110px); } .res_type3_bg.pat5 .res_tarot_img1:nth-of-type(7) { transform: translate(0px,-110px); } @keyframes fadein { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeout { 0% {opacity: 1;} 100% {opacity: 0;} } @keyframes fadeinout { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} } @keyframes fudeji2 { 0% {transform:translate(0px,0px);} 33% {transform:translate(220px,0px);} 66% {transform:translate(0px,50px);} 100% {transform:translate(220px,50px);} } .anime1 .res_type1_chakra1 img {animation:fadein2 1.0s linear 0.3s 1 forwards;} .anime1 .res_type1_hand {transform-origin: right;} .anime1 .res_type1_hand {animation:fadein 0.5s linear 1.3s 1 forwards, movehand 0.3s linear 2.8s 2 forwards, fadeout 0.5s linear 4.0s 1 forwards;} .anime1 .res_type1_maru1 img {animation:fadein2 0.5s linear 3.5s 1 forwards;} .anime1 .res_type1_text2 {animation:fadein 1.0s linear 4.0s 1 forwards;} .anime2 [class^="res_type1_chakra"] img {animation:fadein2 1.0s linear 0.3s 1 forwards;} .anime2 [class^="res_type1_maru"] img, .anime2 .res_type1_strong img {animation:fadein2 0.5s linear 1.3s 1 forwards;} .anime2 .res_type1_hand {transform-origin: right;} .anime2 .res_type1_hand {animation:fadein 0.5s linear 2.0s 1 forwards, movehand 0.3s linear 2.8s 2 forwards, fadeout 0.5s linear 4.0s 1 forwards;} .anime2 .res_type1_light {animation:fadeinout 1.5s ease 4.0s 1 forwards;} .anime2 .res_type1_text2 {animation:fadein 1.0s linear 5.0s 1 forwards;} .anime1 .res_type1_chartbg canvas {animation:fadein 1.0s linear 0.3s 1 forwards;} .anime1 [class^="res_type1_bargragh"] img {transition: width 1.0s ease-out 0.3s;} .res_type2_text3 input {display:none;} .anime3 .res_type2_text1 {animation:fadein 1.0s linear 0.5s 1 forwards;} .anime3 .res_type2_img1 img {animation:fadein3 0.5s linear 1.5s 1 forwards;} .anime3 .res_type2_hand {animation:fadein 0.5s linear 2.0s 1 forwards, fudeji1 1.5s ease 2.5s 1 forwards, fadeout 0.5s linear 4.0s 1 forwards;} .anime3 .res_type2_text2, .anime3 .res_type2_text_img {animation:fadein 1.0s linear 3.9s 1 forwards;} .anime3 .res_type2_text3 {animation:fadein 1.0s linear 4.0s 1 forwards;} .anime4 .res_type2_text1 {animation:fadein 1.0s linear 0.5s 1 forwards;} .anime4 .res_type2_img1 img, .anime4 .res_type2_img2 img {animation:fadein3 0.5s linear 1.5s 1 forwards;} .anime4 .res_type2_hand {animation:fadein 0.5s linear 2.0s 1 forwards, fudeji2 1.5s ease 2.5s 1 forwards, fadeout 0.5s linear 4.0s 1 forwards;} .anime4 .res_type2_text2, .anime4 .res_type2_text_img {animation:fadein 1.0s linear 3.9s 1 forwards;} .anime4 .res_type2_text3 {animation:fadein 1.0s linear 4.0s 1 forwards;} .anime_btn .res_type2_text3 input {display:inline-block; animation:fadein 1.0s linear 0s 1 forwards;} .anime_end .res_type2_hand {animation:none;} .anime_end .res_type2_img1 img, .anime_end .res_type2_img2 img, .anime_end .res_type2_text2, .anime_end .res_type2_text_img, .anime_end .res_type2_text1, .anime_end .res_type2_text3, .anime_end .res_type2_text3 input {opacity:1; animation:none;} .res_type3_btn_box.anime_btn p, .res_type3_btn_box.anime_btn img {animation: fadeout 0.2s linear 0s 1 forwards;} .res_type3_btn_box.anime_btn1 img {display:inline-block;animation: fadein 0.2s linear 0s 1 forwards;} .anime2 .res_type3_tarot_box.dummy img, .anime2 .res_type3_tarot_box.back img {animation: fadein 0.2s linear 0s 1 forwards;} .anime1 .res_type3_tarot_box.dummy img:nth-of-type(1) {animation: fadeout 1s linear 0s 1 forwards;} .anime2 .res_tarot_bg2 canvas {animation: fadeout 0.2s linear 0.4s 1 forwards;} .anime1 .res_tarot_img1 { transform: translate(0px,0px) !important; } .anime_end .res_tarot_bg2, .anime_end .res_type2_mask1.trail {display:none;} .noshuffle .res_tarot_bg2, .noshuffle .res_type3_btn_box.start, .noshuffle .res_type3_btn_box.end {display:none;} .noshuffle .res_type3_tarot_box.dummy img, .noshuffle .res_type3_tarot_box.back img {opacity: 1;} .result-container .secListing .listJiki.bigTit { background-image: url(../images/result/resInfoTop13.jpg); background-size: 103%; padding-top: 78px; } .jikiBox { padding: 13px 20px; max-width: 295px; font-size: 23px; } .result-container .secListing .listJiki.bigTit .secInfo { min-height: auto; } .result-container .secListing .listLast .secMsg .resCatch { margin-top: 53px; } .result-container .secListing .listLast .secMsg .resCatch:before { background-image: url(../images/result/sp/resInfoTop12.png); background-size: 100%; top: -48px; left: -67px; padding-top: 0; width: 137%; height: 53px; } /*######### blur #########*/ .free-container .blur, .free-container .listLast .secMsg .blur { background-image: url(../images/result/blur/sp/text_img_m3.png); background-size: 100%; position: relative; margin-top: 10px; padding-top: 27px; height: 135px; } .free-container .listLast .secMsg .blur { height: 105px; } .free-container .listYesno .secMsg .blur, .free-container .secCommon .blur { background-image: url(../images/result/blur/sp/text_img_m3.png); background-size: 100%; position: relative; margin-top: 10px; padding-top: 35px; height: 126px; } .free-container .listYesno .secMsg .blur { background-repeat: repeat-y; height: 136px; } /*######### blur End #########*/ /*########################## result-container End ##########################*/