html { margin: 0; padding: 0; }
body {
font-family: '微軟正黑體', '蘋果儷黑體', '新細明體', "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Tahoma, Verdana, sans-serif;
background: #000 url(../images/common/mBgTop.jpg) no-repeat center top;
background-attachment: fixed;
margin: 0;
padding: 0;
color: #000;
font-size: 18px;
line-height: 1.5em;
}
@media (max-width: 1200px){
body { display: inline-block; }
}
.hidden-md { display: none!important; }
div { display: block; }
.noBg { background: none!important; padding: 0!important; }
.clear { clear: both; }
.clearfix:after {
content: " ";
display: block;
font-size: 0;
clear: both;
height: 0;
}
*:first-child+html .clearfix { zoom: 1; }
.txtHide { text-indent: -9999px; }
img.center {
display: block;
margin: 0 auto;
}
.block-center {
display: table;
margin: 0 auto;
}
a:hover { text-decoration: none; }
.disp-inline { display: inline-table; }
.pull-left { float: left; }
.pull-right { float: right; }
.no-touch { pointer-events: none; }
section.small, .result-container section.small {
margin: 0 auto;
width: 950px;
}
.col { float: left; }
.colFull { width: 100%; }
h1, h2, h3, h4, h5, h6 { line-height: 1.3em; }
strong { font-weight: bold !important; }
.paragraph {
line-height: 1.8em;
text-align: justify;
}
.paragraph p {
margin-bottom: 10px;
text-indent: 17px;
}
.paragraph p.text-center { text-align: center; }
.paragraph strong { color: #fae150; font-style: normal; font-weight: bold; font-size: 150%; }
.secGreeting .paragraph strong, .secMsg .paragraph strong { font-size: initial; }
.paragraph p.text-center strong { font-size: 160%; line-height: 120%; color: #fff; }
.paragraph p.text-center strong strong { color: #fe0; }
.secMsg .paragraph p { text-indent: 0; }
p.big { font-size: 1.1em; }
p.small {
font-size: .9em;
line-height: 1.3em;
}
p.no-indent { text-indent: 0; }
.tCenter { text-align: center; }
.title {
font-size: 1.4em;
line-height: 1.2em;
font-weight: bold;
}
.whiteGrad::after { color: #fff; }
.tgrad { position: relative; width: 100%; }
.tgrad:before, .tgrad:after {
position: absolute;
content: attr(title);
display: block;
width: 100%;
top: 0;
left: 0;
}
.gradColor::after { color: #330356; }
.gradTop::after {
mask-image: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0.4) 40%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0));
-webkit-mask-image: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0.4) 40%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0));
}
.gradBtm::after {
mask-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.2) 52%, rgba(0, 0, 0, 0));
-webkit-mask-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.2) 52%, rgba(0, 0, 0, 0));
}
.tRed, .attention { color: red; }
.tMaroon { color: #9c0005; }
.tYellow { color: #ff0; }
.tGray { color: #d1d1d1; }
.tSPurple { color: #d7b0ff; }
.tLGreen { color: #B8FFAA; }
.tLYellow { color: #FDD891; }
.nLYellow { color: #ffeeaa; }
.tLPink { color: #FFAAFF; }
.tDGreen { color: #0a5d01; }
.tBrown { color: #941601; }
.tAqua { color: #2ee8e6; }
.tDBlue { color: #01258d; }
.tBlue { color: #3a24fc; }
.tPurple { color: #960fc7; }
.tLPurple { color: #d78ef6; }
.tDPurple { color: #44237e; }
.tPink { color: #ff5d99; }
.tGold { color: #e4d271; }
.tBlack { color: #000; }
.tWhite { color: #fff; }
/********************************
*** Header Part
********************************/
header{
background: transparent url(../images/common/naviBg.jpg) no-repeat center top;
min-height: 125px;
}
.navi-container {
background: transparent;
margin: 0 auto;
padding-top: 15px;
max-width: 990px;
width: 100%;
height: 50px;
text-align: center;
}
.navi-container .naviInfo { display: table; margin: 0 auto; }
.navi-container .navi_btn {
position: relative;
margin: 0 auto;
width: 296px;
height: 63px;
}
.navi-container a:hover .navi_btn:before { top: 4px; background-position: center bottom; }
.navi-container .navi_btn:before {
content: "";
position: relative;
background: transparent url(../images/common/button/naviTop.jpg) no-repeat center top;
display: table;
width: 100%;
height: 100%;
}
.navi-container .navi_profile:before { background-image: url(../images/common/button/naviHome.jpg); }
.navi-container .navi_info:before { background-image: url(../images/common/button/naviInfo.jpg); }
.navi-container .navi_input:before { background-image: url(../images/common/button/naviInput.jpg); }
.paid-container .navi-container { background: transparent; }
.mIndex .navi-container a .navi_btn.navi_input, .paid-container .navi-container a { display: none; }
.breadcrumb {
margin: 50px auto 15px;
max-width: 760px;
color: #eee;
font-size: .9em;
line-height: 1.5em;
text-shadow: 0px 2px 2px #1a0267;
}
.breadcrumb a { color: #abc; }
/* .commonMenuBox */
.body-container .commonMenuBox .cmnInfo {
background: transparent url(../images/common/menu/cmnTitBg.jpg) repeat-y center center;
margin: 0 auto 0;
padding: 0;
max-width: 830px;
color: #836;
font-size: 1.1em;
}
/*.body-container .commonMenuBox .cmnInfo h3 { text-shadow: 0 0 7px #8261ef; }*/
.body-container .commonMenuBox .cmnTop, .body-container .commonMenuBox .cmnBtm {
background: transparent url(../images/common/menu/cmnTitTop.jpg) no-repeat center bottom;
min-height: 50px;
}
.body-container .commonMenuBox .cmnBtm {
background-image: url(../images/common/menu/cmnTitBtm.jpg);
background-position: center top;
}
.commonMenuBox .infoelement {
position: relative;
padding: 0 60px;
}
.commonMenuBox .iconelement {
background: transparent no-repeat center top;
background-size: 100%;
position: relative;
float: left;
width: 70px;
height: 70px;
}
.commonMenuBox .infoelement .titelement h3:first-child {
color: #680947;
font-size: 1.3em;
margin-bottom: 2px;
text-shadow: none;
}
.commonMenuBox .titelement { padding-left: 80px; }
/* icon: free, xiangyu, danlian, erdwl, ngrdxy, qihedu, jiehun, life, future, job, total, bulun, fuhuoai, qingyu, kulian, jwzh, nianyun, jueduan, fuyuan, lovedirection, rjkx, spdyx, suyuan, zhenxin, turningpoint, kaiyun, remarry, divoice, agediff, yueyun, jddlq, spdlq, nightqhd, youqy, money */
.commonMenuBox .iconelement.free { background-image: url(../images/common/icon/icon0.png); }
.commonMenuBox .iconelement.xiangyu { background-image: url(../images/common/icon/icon1.png); }
.commonMenuBox .iconelement.danlian { background-image: url(../images/common/icon/icon2.png); }
.commonMenuBox .iconelement.erdwl { background-image: url(../images/common/icon/icon3.png); }
.commonMenuBox .iconelement.ngrdxy { background-image: url(../images/common/icon/icon4.png); }
.commonMenuBox .iconelement.qihedu { background-image: url(../images/common/icon/icon6.png); }
.commonMenuBox .iconelement.jiehun { background-image: url(../images/common/icon/icon7.png); }
.commonMenuBox .iconelement.life { background-image: url(../images/common/icon/icon8.png); }
.commonMenuBox .iconelement.future { background-image: url(../images/common/icon/icon9.png); }
.commonMenuBox .iconelement.job { background-image: url(../images/common/icon/icon10.png); }
.commonMenuBox .iconelement.total { background-image: url(../images/common/icon/icon11.png); }
.commonMenuBox .iconelement.bulun { background-image: url(../images/common/icon/icon12.png); }
.commonMenuBox .iconelement.fuhuoai { background-image: url(../images/common/icon/icon13.png); }
.commonMenuBox .iconelement.qingyu { background-image: url(../images/common/icon/icon14.png); }
.commonMenuBox .iconelement.kulian { background-image: url(../images/common/icon/icon15.png); }
.commonMenuBox .iconelement.jwzh { background-image: url(../images/common/icon/icon16.png); }
.commonMenuBox .iconelement.nianyun { background-image: url(../images/common/icon/icon17.png); }
.commonMenuBox .iconelement.jueduan { background-image: url(../images/common/icon/icon18.png); }
.commonMenuBox .iconelement.fuyuan { background-image: url(../images/common/icon/icon19.png); }
.commonMenuBox .iconelement.lovedirection { background-image: url(../images/common/icon/icon20.png); }
.commonMenuBox .iconelement.rjkx { background-image: url(../images/common/icon/icon21.png); }
.commonMenuBox .iconelement.spdyx { background-image: url(../images/common/icon/icon22.png); }
.commonMenuBox .iconelement.suyuan { background-image: url(../images/common/icon/icon23.png); }
.commonMenuBox .iconelement.zhenxin { background-image: url(../images/common/icon/icon24.png); }
.commonMenuBox .iconelement.turningpoint { background-image: url(../images/common/icon/icon26.png); }
.commonMenuBox .iconelement.kaiyun { background-image: url(../images/common/icon/icon27.png); }
.commonMenuBox .iconelement.remarry { background-image: url(../images/common/icon/icon28.png); }
.commonMenuBox .iconelement.divoice { background-image: url(../images/common/icon/icon29.png); }
.commonMenuBox .iconelement.agediff { background-image: url(../images/common/icon/icon30.png); }
.commonMenuBox .iconelement.yueyun { background-image: url(../images/common/icon/icon31.png); }
.commonMenuBox .iconelement.jddlq { background-image: url(../images/common/icon/icon32.png); }
.commonMenuBox .iconelement.spdlq { background-image: url(../images/common/icon/icon33.png); }
.commonMenuBox .iconelement.nightqhd { background-image: url(../images/common/icon/icon34.png); }
.commonMenuBox .iconelement.youqy { background-image: url(../images/common/icon/icon35.png); }
.commonMenuBox .iconelement.money { background-image: url(../images/common/icon/icon36.png); }
header .secDesc {
margin: 10px auto;
width: 67%;
color: #ccc;
font-size: 1em;
text-shadow: 0px 2px 2px #1a0267;
}
.full-container {
background: transparent url(../images/common/mBnr.png) no-repeat center top;
display: table;
margin: 0 auto;
padding-top: 460px;
width: 100%;
}
.body-container {
background: transparent url(../images/common/mBg.jpg) repeat-y center top;
display: table;
margin: 0 auto;
min-height: 295px;
max-width: 990px;
width: 100%;
z-index: 44;
}
.fixed-cont, .subbody-container { margin: 0 auto; }
.body-footer {
background: transparent url(../images/common/mBg.jpg) repeat-y center top;
color: #fff;
padding: 20px 0;
text-align: center;
max-width: 990px;
margin: 0 auto;
}
.body-footer .copyrightTxt {
margin-top: 20px;
text-align: center
}
.body-footer a {
color: #e8ca22;
font-weight: bold;
text-shadow: 0px 2px 2px #674302;
}
/*##################
Button
##################*/
.input_submit a { text-decoration: none; }
.free-btn, .charge-btn, .shuffle-btn {
background: transparent no-repeat center top;
position: relative;
display: inline-table;
width: 360px;
height: 170px;
margin-bottom: 15px;
vertical-align: top;
cursor: pointer;
}
.free-btn:hover, .charge-btn:hover, .shuffle-btn:hover { background-position: center bottom; }
.free-btn { background-image: url(../images/common/button/btnFree.png); }
.charge-btn { background-image: url(../images/common/button/btnSubmit.png); }
.shuffle-btn.start { background-image: url(../images/result/type/res_type3_btn1.png); }
.shuffle-btn.end { background-image: url(../images/result/type/res_type3_btn2.png); }
.free-btn .btnText, .charge-btn .btnText {
font-family: "ヒラギノ明朝 ProN W6", HiraMinProN-W6, HG明朝E, "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
display: table-cell;
padding: 40px 20px;
height: 100%;
width: 100%;
line-height: 0;
font-size: 1.8em;
text-align: center;
opacity: .85;
color: #f5be19;
vertical-align: middle;
text-shadow: -4px 1px 3px #000, 0 -5px 3px #000, 0 4px 3px #000, 4px 4px 5px #000, 0 4px 3px #000;
}
.free-btn .adjust { padding-top: 60px; }
.charge-btn .adjust, .submit-btn .adjust { padding-top: 40px; }
.free-btn .title, .charge-btn .title, .submit-btn .title {
width: 100%;
font-size: 35px;
text-align: center;
text-shadow: 0px 0px 2px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 10px #fff, 0px 0px 15px #fff;
}
.free-container .submit-btn .title {
position: relative;
top: 35%;
font-size: 1.2em;
letter-spacing: 0.1em;
}
.free-btn .btnText { letter-spacing: 5px; }
.free-container .charge-btn .btnText {
padding: 0;
font-size: 1.6em;
}
.free-container .submit-btn {
position: relative;
background: transparent url(../images/common/button/btnNext.png) no-repeat center top;
float: none;
display: table;
width: 300px;
height: 90px;
margin: 0 auto;
padding: 0;
font-size: 1.1em;
}
.free-container .secCommon .submit-btn { width: 340px; }
.free-container .submit-btn:hover { background-position: center -90px; }
.free-container .jiki-btn {
position: absolute;
background: transparent url(../images/result/type2/res_type2_btn.png) no-repeat center top;
float: none;
display: table;
width: 490px;
height: 220px;
left: 175px;
top: 180px;
opacity: 0;
animation: fadein 1.0s linear 9s 1 forwards;
}
.free-container .jiki-btn:hover { background: transparent url(../images/result/type2/res_type2_btn.png) no-repeat center bottom; }
/*################## Button End ##################*/
/*##################
info-container
##################*/
.info-container .section {
position: relative;
background: transparent;
background-image: url(../images/info/proTop.jpg), url(../images/info/infBtm.jpg), url(../images/info/infBg.jpg);
background-position: center top, center bottom, center top;
background-repeat: no-repeat, no-repeat, repeat-y;
margin: 0 auto 30px;
max-width: 840px;
color: #100;
font-size: 0.9em;
}
.info-container .section.profile { padding: 210px 0 80px; }
.info-container .section.profile .secInfo { padding: 420px 80px 30px; }
.info-container .section.profile .secInfo ul h4 {
padding-top: 12px;
line-height: 1.5em;
font-weight: normal;
}
.info-container .section.profile .secInfo ul li { margin-bottom: 20px; }
.info-container .section.profile .secInfo ul li span {
display: block;
margin-left: 4px;
padding-top: 5px;
}
.info-container .section.profile .secInner {
position: relative;
background: transparent url(../images/info/proMsg.jpg) no-repeat center top;
margin: 0 auto;
padding: 150px 80px 0;
}
.info-container .section.profile .proSign {
background: transparent url(../images/info/proSign.jpg) no-repeat;
margin: 0 0 0 auto;
width: 245px;
height: 130px;
}
.info-container .section.about {
background-image: url(../images/info/abtTop.jpg), url(../images/info/introBtm.jpg), url(../images/info/introBg.jpg);
padding: 60px 0 80px;
font-weight: bold;
color: #fff;
}
.info-container .section.about .heading { height: 110px; }
.info-container .abtSec .paragraph { margin: 0 auto; }
.info-container .abtSec .paragraph a {
display: block;
padding: 10px 10px 5px;
color: #ff3;
border-bottom: 2px dashed #2f2f2f;
}
.info-container .abtSec .paragraph a:hover { color: #e2e216; }
.info-container .abtSec .paragraph p span { color: #c20a0a; }
.info-container .abtSec .abtTit, .info-container .abtSec.abtSecCatch {
background: transparent no-repeat center top;
margin: 0 auto;
color: transparent;
font-size: 2em;
line-height: 1.5;
}
.info-container .abtSec.abtSecCatch { background-image: url(../images/info/abtCatch.jpg); padding: 24px 40px 24px 308px; height: 380px; }
.info-container .abtSec1 .abtTit { background-image: url(../images/info/introTit1.jpg); height: 150px; }
.info-container .abtSec2 .abtTit { background-image: url(../images/info/introTit2.jpg); height: 176px; }
.info-container .abtSec3 .abtTit { background-image: url(../images/info/introTit3.jpg); height: 129px; }
.info-container .abtSec .paragraph { padding: 0 78px; }
/*###### End About ######*/
.samp-container .section.sample {
position: relative;
background: transparent;
background-image: url(../images/info/sample/sampTop.jpg), url(../images/info/sample/sampBtm.jpg), url(../images/info/sample/sampBg.jpg);
background-position: center top, center bottom, center top;
background-repeat: no-repeat, no-repeat, repeat-y;
margin: 0 auto 30px;
padding: 240px 130px 80px;
max-width: 840px;
font-size: 0.9em;
}
.samp-container .section.sample .sampImg { margin-right: 20px; }
.samp-container .section.sample p span { color: #D3191C; font-weight: bold; }
.samp-container .section.sample .secSamp1 { padding-top: 130px; }
.samp-container .section.sample .secSamp3 { padding-top: 100px; }
.samp-container .section.sample .secSamp4 { padding-top: 220px; }
.samp-container .section.sample .secSamp5 { padding-top: 160px; }
.samp-container .section.sample .secSamp6 { padding-top: 90px; }
.samp-container .section.sample .secSamp8 { padding-top: 100px; }
/*###### End Sample ######*/
/*################## info-container End ##################*/
/*##########################
input-container
##########################*/
.komi {
background: transparent;
background-image: url(../images/input/inpKmTop.jpg), url(../images/input/inpKmBtm.jpg), url(../images/input/inpKmBg.jpg);
background-repeat: no-repeat, no-repeat, repeat-y;
background-position: center top, center bottom, center top;
padding: 210px 0 110px;
}
.komi .komiUl {
position: relative;
display: block;
margin: 0 auto;
max-width: 590px;
font-size: 1em;
line-height: 1.5em;
z-index: 33;
}
.komi ul li {
background: transparent url(../images/input/iconStar.jpg) no-repeat left 2px;
margin-top: 8px;
padding-left: 45px;
padding-top: 6px;
color: #dcb;
line-height: 1.7em;
}
.komi ul li br { display: none; }
/*######### question #########*/
.question {
background: transparent;
background-repeat: no-repeat, repeat-y;
background-position: center bottom, center top;
background-image: url(../images/input/inpFmBtm.jpg), url(../images/input/inpFmBg.jpg);
padding: 0 0 100px;
}
.question .top-heading {
background: transparent no-repeat center top;
padding: 200px 0 30px;
}
.question .top-heading.self { background-image: url(../images/input/inpFmMe.jpg); }
.question .top-heading.target { background-image: url(../images/input/inpFmYou.jpg); padding-top: 130px; }
.question .formInfo .inputHolder {
display: table;
margin: 0 auto;
}
.question form span.inbold, .question form span.bold {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
display: inline;
width: 35px;
height: 32px;
color: #462f03;
font-size: 1.5em;
line-height: 1.5em;
font-weight: bold;
text-align: right;
text-shadow: 0px 0px 2px #fff, 0 0px 2px #fff, 0px 0px 5px #fff, 0px 0px 10px #fff;
}
.question form span.inbold {
color: #000;
font-size: 1.2em;
text-shadow: none;
}
.question form #sex11+span,
.question form #sex21+span {
display: initial;
background: none;
}
.question form #sex12+span,
.question form #sex22+span {
background-position: -310px -337px;
background-size: 650px;
}
.question form label.inbold {
font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
color: #000;
font-size: 1.5em;
line-height: 36px;
cursor: pointer;
}
.question form label.inbold input { vertical-align: middle; margin-bottom: 6px; }
.question form span.birth, .question form span.birthTime {
position: relative;
top: 5px;
}
.question form span.birth_unit {
display: inline-table;
margin-left: -2px;
width: 22px;
height: 29px;
font-weight: bold;
vertical-align: bottom;
}
.question form .form_month+span.birth_unit { background-position: -165px -395px; }
.question form .form_day+span.birth_unit { background-position: -312px -395px; }
.question .col { float: left; }
.tcolHalf { width: 48%; }
.question .col:first-child { margin-right: 0px; }
.question .inputRow {
display: table;
margin: 10px auto;
min-width: 90%;
}
.question .inputRow.name .col {
float: left;
text-align: center;
}
.question .inputRow.name .col:first-child {
position: relative;
display: table;
width: 110px;
height: 40px;
margin-right: -16px;
}
.question .inputRow .attention {
display: table;
margin: 0 auto;
font-size: 0.9em;
}
.question .rName span,
#default_check+span {
position: relative;
top: 3px;
}
.question .rBirthTime { margin: 10px 0; }
.question select.form_hh {
margin-left: 20px;
width: 90px;
}
.question select.form_mm {
margin-left: 0px;
width: 90px;
}
.question .rGender { margin: 10px 7px; }
.question .rGender span {
position: relative;
top: 0px;
}
.question .target .rGender { position: relative; z-index: 0; }
.question .target .rGender:before {
content: '';
position: absolute;
width: 150px;
height: 30px;
cursor: default;
z-index: 9;
}
.question .gender {
display: table;
float: left;
min-width: 96px;
margin-right: 20px;
}
.question select {
margin: 0 5px;
padding: 5px;
font-size: 1.2em;
box-shadow: 1px 1px 1px 0 #8e8e8e inset;
border-radius: 6px;
}
select {
-webkit-appearance: menulist;
box-sizing: border-box;
align-items: center;
white-space: pre;
-webkit-rtl-ordering: logical;
cursor: default;
border-width: 1px;
border-style: solid;
border-color: initial;
border-image: initial;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 65px;
vertical-align: middle;
margin: 0 3px 3px 5px;
padding: 5px;
-webkit-border-radius: 3px;
border: 2px solid #7d7d7d;
border-radius: 3px;
background-color: #fff;
background-image: url(../images/common/iconArrow.png);
background-repeat: no-repeat;
background-position: 92% center;
-webkit-background-size: 16px;
background-size: 10px;
}
input[type="text"],
input[type="date"] {
background: #fff;
display: inline-block;
width: 220px;
margin-bottom: 3px;
margin-left: 5px;
padding: 7px 5px;
appearance: none;
-webkit-appearance: none;
vertical-align: middle;
border: 2px solid #7d7d7d;
border-radius: 7px;
-webkit-border-radius: 3px;
font-size: 1.2em;
box-shadow: 1px 1px 1px 0 #8e8e8e inset;
}
.question select option {
padding: 20px;
}
.question select.form_year {
margin-left: 20px;
width: 90px;
}
.question .entry_save {
text-align: center;
font-weight: bold;
font-size: 15px;
margin: 0 auto 30px;
}
.caption_input {
width: 213px;
position: absolute;
top: 60px;
right: 10px;
}
.formBtn_content {
color: #fff;
text-align: center;
padding: 0 35px;
font-size: 17px;
line-height: 1.4em;
}
.formBtn_content span {
font-weight: bold;
}
.formBtn_text {
width: 498px;
margin: 170px auto 10px;
}
.input_submit {
display: table;
margin: 30px auto 0;
}
.input_submit a {
display: inline-block;
margin: 0 auto;
text-decoration: none;
}
.spanError {
position: absolute;
display: none;
color: #ffc200;
top: -22px;
left: 212px;
background: rgba(22,22,22,66%);
border: 1px solid #171717;
font-size: 13px;
width: 120px;
text-align: center;
line-height: 1.5em;
border-radius: 3px;
text-indent: 0;
}
/*################## input-container End ##################*/
/*##########################
result-container
##########################*/
.result-container .secUser { margin-bottom: 20px; /*color: #df60ff;*/ font-size: 15px; text-align: center; }
.result-container .secUser .targetNm { /*color: #608aff;*/ }
.result-container .fadein { opacity: 0; }
.result-container .scroll_box { overflow: hidden; display: none; }
.scroll_box.res_type1_with_headline1 { margin-top: -54px; }
.scroll_box.res_type1_with_headline2,
.scroll_box.res_type1_with_headline3 { margin-top: -35px; }
.res_type_none { display: none !important; }
.res_type_hidden { visibility: hidden; }
.side_by_side { width: 92%; margin: 0 auto; }
/*######### secGreeting #########*/
.result-container .subbody-container {
background: transparent url(../images/result/rsltBg.jpg) repeat-y center top;
color: #fff;
max-width: 840px;
}
/*** secGreeting ***/
.result-container .resCatch strong { color: #fae150; font-style: normal; font-weight: bold; font-size: 150%; line-height: 1.3em; }
.result-container .listPlus .resCatch strong { color: #db9dff; }
.result-container .listMinus .resCatch strong { color: #6eddd6; }
.result-container .secGreeting {
position: relative;
background: transparent url(../images/result/rsltInfTop1.jpg) no-repeat center top;
padding: 40px 0 20px;
color: #fff;
font-weight: bold;
/* text-shadow: 0 0 5px #000, 0 0 8px #000, 0 0 10px #000;*/
}
.result-container .secGreeting .greetingInfo {
padding: 40px 50px 20px;
min-height: 380px;
}
.result-container .secGreeting .greetingInfo .paragraph {
margin: 0;
padding-top: 35px;
width: 395px;
line-height: 1.4em;
}
.result-container .secGreeting .greetingInfo .paragraph p { text-indent: 20px; text-shadow: 0 0 5px #000, 0 0 8px #000, 0 0 10px #000; }
.result-container .secGreeting .greetingInfo .paragraph i { font-style: inherit; }
/*** End secGreeting ***/
/*######### secCommon #########*/
.result-container .secCommon {
margin: 0 auto;
max-width: 840px;
}
/*######### secCommon End #########*/
/*######### secListing #########*/
.result-container .secListing {
background: transparent url(../images/result/rsltBtm.jpg) no-repeat center bottom;
padding-bottom: 130px;
}
.result-container .secListing .secInfo strong { /* font-style: normal; font-weight: bold; */ }
.result-container .secListing .fixed-cont { width: 840px; }
.result-container .secListing .secList {
background: transparent;
padding: 0 0 30px;
color: #fff;
}
.result-container .secListing .listFateAns {
background: transparent url(../images/result/rsltInfTop5.jpg) no-repeat center top;
text-align: center;
}
.result-container .secListing .listFateAns .fateCatch {
padding: 58px;
color: transparent;
font-size: 33px;
line-height: 1.2em;
}
.result-container .secCommon .secTitle,
.result-container .secListing .secTitle {
background: transparent url(../images/result/rsltTitBgSub.jpg) no-repeat center top;
background-size: 100%;
position: relative;
margin: 0 auto 30px;
padding: 40px 0;
color: #fff;
font-size: 18px;
font-weight: bold;
text-shadow: 0px -1px 20px #000, 0px -1px 20px #000, 0px -1px 10px #000;
}
.result-container .secTitle.titMain {
background-image: url(../images/result/rsltTitBg.jpg);
margin-bottom: 0;
padding: 50px;
font-size: 140%;
text-shadow: 0px -1px 20px #ff5806, 0px -1px 20px #ff5806, 0px -1px 10px #ff5806;
}
.result-container .secTitle.titHeadline { background: none; padding: 20px 50px 0; font-size: 22px; }
.result-container .secTitle.titHeadline2 {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
margin: 20px auto;
width: 700px;
color: #ffe552;
font-size: 140%;
line-height: 130%;
text-align: center;
}
.result-container .secTitle.titHeadline2 i,
.result-container .secTitle.titHeadline2 strong {
font-size: 110%;
color: #14f7c4;
}
.result-container .secTitle.titHeadline3 {
width: 700px;
margin: 10px auto;
text-align: center;
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HGP明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
text-shadow: 0px 0px 10px #ff5806, 0px 0px 10px #ff5806;
color: #fff;
font-size: 180%;
line-height: 150%;
}
.result-container .secListing .listSpread > .secTitle, .result-container .secListing .listSpread > .secInfo,
.result-container .secListing .listPlus > .secTitle, .result-container .secListing .listPlus > .secInfo { display: none; }
.result-container .secListing .secTitle.titMain, .result-container .secListing .secTitle.titHeadline { display: block; }
.result-container .secListing .listFateAns .secTitle {
background: none;
float: left;
margin-left: 20px;
margin-bottom: 0;
padding-bottom: 30px;
max-width: 530px;
width: 100%;
}
.result-container .secListing .listFateAns .secTitle .paragraph {
font-size: 23px;
line-height: 1.5em;
}
.result-container .secCommon .secTitle .paragraph, .result-container .secListing .secTitle .paragraph { padding: 0 30px; text-align: center; }
.result-container .secListing .secInfo { min-height: 120px; }
.result-container .secListing .secInList { clear: both; }
.result-container .secCommon .secInList .paragraph,
.result-container .secListing .secInList .paragraph {
position: relative;
padding: 0px 80px;
z-index: 2;
}
/*######### secListing End #########*/
.result-container .secListing .secMsg {
background: transparent no-repeat center top;
padding: 50px 0 30px;
min-height: 390px;
}
.result-container .secListing .secMsg {}
.result-container .secListing .secMsg .paragraph {
background: rgba(85,48,9,0.62);
float: left;
margin: 0 0 20px 40px;
padding: 20px;
min-height: 130px;
width: 500px;
color: #fff;
line-height: 160%;
text-shadow: 0 0 5px #562f06, 0 0 8px #562f06, 0 0 10px #562f06;
box-shadow: 0px 0px 16px 5px #78ae65;
border: 1px solid #78ae65;
border-radius: 16px;
}
.result-container .secListing .listPlus .secMsg .paragraph {
float: right;
margin: 0 40px 20px 0;
}
.result-container .secListing .listAisyou .secMsg { background-image: url(../images/result/rsltInfTop2.jpg); }
.result-container .secListing .listPlus .secMsg { background-image: url(../images/result/rsltInfTop3.jpg); }
.result-container .secListing .listMinus .secMsg { background-image: url(../images/result/rsltInfTop4.jpg); }
.result-container.two-1 .secListing .listYesno { background-image: url(../images/result/resInfoTop4.jpg); }
.result-container .secListing .secMsg .resCatch {
max-width: 450px;
margin-right: 40px;
}
.my_name, .single_name, .you_name, .single_name_you {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
display: inline-table;
padding: 15px 0 0;
width: 47%;
color: #a42cc9;
font-size: 100%;
text-align: center;
line-height: 1.3em;
letter-spacing: -0.05rem;
}
.you_name, .single_name_you { color: #2a7228; }
#res_type1_bg1 .you_name br { display: none; }
/* ----------------------
* result_type1
*---------------------- */
[class^="res_type1_bg"],
.res_type1_chart {
background-position: top center;
background-repeat: no-repeat;
background-size: 780px auto;
position: relative;
overflow: hidden;
width: 800px;
margin: 0 auto 10px;
}
.res_type1_bg1 { background-image: url(../images/result/type/res_type1_bg1.jpg); height: 620px; }
.res_type1_bg2 { background-image: url(../images/result/type/res_type1_bg2.jpg); height: 900px; }
.res_type1_bg3 { background-image: url(../images/result/type/res_type1_bg3.jpg); height: 620px; }
.res_type1_chart.cate1 { background-image: url(../images/result/type/res_type1_cate1.jpg); height: 360px; }
.res_type1_chart.cate2 { background-image: url(../images/result/type/res_type1_cate2.jpg); height: 360px; }
.res_type1_chart.cate3 { background-image: url(../images/result/type/res_type1_cate3.jpg); height: 360px; }
.res_type1_chart.cate4 { background-image: url(../images/result/type/res_type1_cate4.jpg); height: 590px; }
.res_type1_chart.cate5 { background-image: url(../images/result/type/res_type1_cate5.jpg); height: 360px; }
.res_type1_chart.cate6 { background-image: url(../images/result/type/res_type1_cate6.jpg); height: 590px; }
.res_type1_with_headline1 .res_type1_chart {
background-position: center 94px;
height: 454px;
}
.res_type1_with_headline2 .res_type1_chart,
.res_type1_with_headline3 .res_type1_chart {
background-position: center 94px;
height: 684px;
}
/*チャクラ*/
[class^="res_type1_chakra"] img {
position: absolute;
width: 60px;
height: 60px;
}
.res_type1_bg1 .res_type1_chakra1 img:nth-of-type(1),
.res_type1_bg3 .res_type1_chakra1 img:nth-of-type(1) { top: 108px; left: 178px; }
.res_type1_bg1 .res_type1_chakra1 img:nth-of-type(2),
.res_type1_bg3 .res_type1_chakra1 img:nth-of-type(2) { top: 168px; left: 178px; }
.res_type1_bg1 .res_type1_chakra1 img:nth-of-type(3),
.res_type1_bg3 .res_type1_chakra1 img:nth-of-type(3) { top: 254px; left: 178px; }
.res_type1_bg1 .res_type1_chakra1 img:nth-of-type(4),
.res_type1_bg3 .res_type1_chakra1 img:nth-of-type(4) { top: 338px; left: 178px; }
.res_type1_bg1 .res_type1_chakra1 img:nth-of-type(5),
.res_type1_bg3 .res_type1_chakra1 img:nth-of-type(5) { top: 416px; left: 178px; }
.res_type1_bg1 .res_type1_chakra1 img:nth-of-type(6),
.res_type1_bg3 .res_type1_chakra1 img:nth-of-type(6) { top: 476px; left: 178px; }
.res_type1_bg1 .res_type1_chakra1 img:nth-of-type(7),
.res_type1_bg3 .res_type1_chakra1 img:nth-of-type(7) { top: 536px; left: 178px; }
.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: 118px; left: 138px; }
.res_type1_bg2 .res_type1_chakra1 img:nth-of-type(2) { top: 168px; left: 208px; }
.res_type1_bg2 .res_type1_chakra1 img:nth-of-type(3) { top: 224px; left: 173px; }
.res_type1_bg2 .res_type1_chakra1 img:nth-of-type(4) { top: 328px; left: 173px; }
.res_type1_bg2 .res_type1_chakra1 img:nth-of-type(5) { top: 416px; left: 173px; }
.res_type1_bg2 .res_type1_chakra1 img:nth-of-type(6) { top: 476px; left: 173px; }
.res_type1_bg2 .res_type1_chakra1 img:nth-of-type(7) { top: 536px; left: 173px; }
.res_type1_bg2 .res_type1_chakra2 img:nth-of-type(1) { top: 118px; left: 602px; }
.res_type1_bg2 .res_type1_chakra2 img:nth-of-type(2) { top: 168px; left: 532px; }
.res_type1_bg2 .res_type1_chakra2 img:nth-of-type(3) { top: 224px; left: 567px; }
.res_type1_bg2 .res_type1_chakra2 img:nth-of-type(4) { top: 328px; left: 567px; }
.res_type1_bg2 .res_type1_chakra2 img:nth-of-type(5) { top: 416px; left: 567px; }
.res_type1_bg2 .res_type1_chakra2 img:nth-of-type(6) { top: 476px; left: 567px; }
.res_type1_bg2 .res_type1_chakra2 img:nth-of-type(7) { top: 536px; left: 567px; }
/*○*/
.res_type1_maru1 img, .res_type1_maru2 img { position: absolute; 130px; height: 100px; }
.res_type1_bg1 .res_type1_maru1 img:nth-of-type(1),
.res_type1_bg3 .res_type1_maru1 img:nth-of-type(1) { top: 88px; left: 143px; }
.res_type1_bg1 .res_type1_maru1 img:nth-of-type(2),
.res_type1_bg3 .res_type1_maru1 img:nth-of-type(2) { top: 148px; left: 143px; }
.res_type1_bg1 .res_type1_maru1 img:nth-of-type(3),
.res_type1_bg3 .res_type1_maru1 img:nth-of-type(3) { top: 234px; left: 143px; }
.res_type1_bg1 .res_type1_maru1 img:nth-of-type(4),
.res_type1_bg3 .res_type1_maru1 img:nth-of-type(4) { top: 318px; left: 143px; }
.res_type1_bg1 .res_type1_maru1 img:nth-of-type(5),
.res_type1_bg3 .res_type1_maru1 img:nth-of-type(5) { top: 396px; left: 143px; }
.res_type1_bg1 .res_type1_maru1 img:nth-of-type(6),
.res_type1_bg3 .res_type1_maru1 img:nth-of-type(6) { top: 456px; left: 143px; }
.res_type1_bg1 .res_type1_maru1 img:nth-of-type(7),
.res_type1_bg3 .res_type1_maru1 img:nth-of-type(7) { top: 516px; left: 143px; }
.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: 98px; left: 103px; }
.res_type1_bg2 .res_type1_maru1 img:nth-of-type(2) { top: 148px; left: 173px; }
.res_type1_bg2 .res_type1_maru1 img:nth-of-type(3) { top: 204px; left: 137px; }
.res_type1_bg2 .res_type1_maru1 img:nth-of-type(4) { top: 308px; left: 137px; }
.res_type1_bg2 .res_type1_maru1 img:nth-of-type(5) { top: 396px; left: 137px; }
.res_type1_bg2 .res_type1_maru1 img:nth-of-type(6) { top: 456px; left: 137px; }
.res_type1_bg2 .res_type1_maru1 img:nth-of-type(7) { top: 516px; left: 137px; }
.res_type1_bg2 .res_type1_maru2 img:nth-of-type(1) { top: 98px; left: 567px; }
.res_type1_bg2 .res_type1_maru2 img:nth-of-type(2) { top: 148px; left: 497px; }
.res_type1_bg2 .res_type1_maru2 img:nth-of-type(3) { top: 204px; left: 532px; }
.res_type1_bg2 .res_type1_maru2 img:nth-of-type(4) { top: 308px; left: 532px; }
.res_type1_bg2 .res_type1_maru2 img:nth-of-type(5) { top: 396px; left: 532px; }
.res_type1_bg2 .res_type1_maru2 img:nth-of-type(6) { top: 456px; left: 532px; }
.res_type1_bg2 .res_type1_maru2 img:nth-of-type(7) { top: 516px; left: 532px; }
/*重要*/
.res_type1_strong img {
width: 500px;
height: 380px;
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: 170px; left: 150px; }
.res_type1_light {
width: 500px;
height: 380px;
position: absolute;
top: 170px;
left: 150px;
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: 200px;
height: 170px;
top: 416px;
left: 232px;
}
.res_type1_bg1.strong1 .res_type1_hand, .res_type1_bg3.strong1 .res_type1_hand {top: 96px;}
.res_type1_bg1.strong2 .res_type1_hand, .res_type1_bg3.strong2 .res_type1_hand {top: 176px;}
.res_type1_bg1.strong3 .res_type1_hand, .res_type1_bg3.strong3 .res_type1_hand {top: 256px;}
.res_type1_bg1.strong4 .res_type1_hand, .res_type1_bg3.strong4 .res_type1_hand {top: 336px;}
.res_type1_bg1.strong5 .res_type1_hand, .res_type1_bg3.strong5 .res_type1_hand {top: 416px;}
.res_type1_bg1.strong6 .res_type1_hand, .res_type1_bg3.strong6 .res_type1_hand {top: 496px;}
.res_type1_bg1.strong7 .res_type1_hand, .res_type1_bg3.strong7 .res_type1_hand {top: 576px;}
.res_type1_bg2 .res_type1_hand {
width: 200px;
height: 170px;
top: 340px;
left: 460px;
}
/*テキスト*/
[class^="res_type1_bg"] .res_type1_text1 {
width: 100%;
position: absolute;
margin: 0 auto;
text-align: center;
top: 36px;
left: 0;
}
[class^="res_type1_bg"] .res_type1_text1 .res_type1_title {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
font-size: 170%;
line-height: 1;
color: #875109;
text-shadow: 0 0 5px #fff, 0 0 8px #fff, 0 0 10px #fff;
}
[class^="res_type1_bg"] .res_type1_text1 .res_type1_title strong {
color: #4028B7;
font-size: 100%;
font-weight: normal;
}
[class^="res_type1_bg"] .res_type1_text2 {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
position: absolute;
margin: 0 auto;
padding: 0 40px;
color: #000;
font-size: 120%;
line-height: 135%;
text-align: left;
box-sizing: border-box;
}
.res_type1_bg1 .res_type1_text2,
.res_type1_bg3 .res_type1_text2 {
width: 366px;
height: 412px;
top: 139px;
left: 390px;
}
.res_type1_bg2 .res_type1_text2 {
width: 630px;
height: 212px;
top: 632px;
left: 80px;
}
.res_type1_text_box {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-items: center;
}
.res_type1_text2 i,
.res_type1_text2 strong {
color: #c20a0a;
font-size: 110%;
}
.res_type1_bg_headline {
background-image: url(../images/result/type/res_type1_bg_headline.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: relative;
display: flex;
width: 780px;
height: 120px;
margin: 0 auto;
overflow: hidden;
align-items: center;
}
.res_type1_bg_headline .res_type1_headline {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
font-size: 150%;
line-height: 1;
color: #000;
display: block;
margin: 0 auto;
}
.res_type1_bg_headline .res_type1_headline i,
.res_type1_bg_headline .res_type1_headline strong {
color: #c20a0a;
font-size: 100%;
}
.res_type1_chart .res_type1_chartbg {
background-image: url(../images/result/type/res_type1_chartbg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
width: 360px;
height: 360px;
top: 0;
left: 35px;
}
.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: 94px; }
.res_type1_chart .res_type1_chartbg.you { left: 405px; }
/*棒グラフ*/
.res_type1_chart [class^="res_type1_bargragh"] {
position: absolute;
width: 260px;
height: 280px;
top: 40px;
left: 495px;
box-sizing: border-box;
}
.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 {
position: absolute;
top: 370px;
left: auto;
right: 453px;
width: 248px;
height: 182px;
}
.res_type1_chart.cate4 .res_type1_bargragh2,
.res_type1_chart.cate6 .res_type1_bargragh2 {
top: 370px;
left: 453px;
}
.res_type1_with_headline1 .res_type1_chart [class^="res_type1_bargragh"] { top: 134px; }
.res_type1_with_headline2 .res_type1_chart [class^="res_type1_bargragh"], .res_type1_with_headline3 .res_type1_chart [class^="res_type1_bargragh"] { top: 464px; }
.res_type1_chart [class^="res_type1_bargragh"] div {
position: absolute;
display: block;
width: 100%;
}
.res_type1_chart .res_type1_bargragh2 div { display: none; }
.res_type1_chart.cate4 .res_type1_bargragh2 div,
.res_type1_chart.cate6 .res_type1_bargragh2 div { display: block; }
.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: 10px; height: 20px; }
.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: 5px; height: 16px; }
.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: 5px; height: 16px; }
.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: 50px; height: 20px; }
.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: 31px; height: 16px; }
.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: 31px; height: 16px; }
.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: 90px; height: 20px; }
.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: 57px; height: 16px; }
.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: 57px; height: 16px; }
.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: 130px; height: 20px; }
.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: 83px; height: 16px; }
.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: 83px; height: 16px; }
.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: 170px; height: 20px; }
.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: 109px; height: 16px; }
.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: 109px; height: 16px; }
.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: 210px; height: 20px; }
.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: 135px; height: 16px; }
.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: 135px; height: 16px; }
.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: 250px; height: 20px; }
.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: 161px; height: 16px; }
.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: 161px; height: 16px; }
.res_type1_chart [class^="res_type1_bargragh"] div img {
width: 0%;
height: 100%;
display: block;
margin: 0 auto 0 0;
}
.res_type1_chart.cate4 .res_type1_bargragh1 div img,
.res_type1_chart.cate6 .res_type1_bargragh1 div img { margin: 0 0 0 auto; }
[class^="res_type1_bargragh"] div img.bar_point5 {width:5%;}
[class^="res_type1_bargragh"] div img.bar_point10 {width:10%;}
[class^="res_type1_bargragh"] div img.bar_point15 {width:15%;}
[class^="res_type1_bargragh"] div img.bar_point20 {width:20%;}
[class^="res_type1_bargragh"] div img.bar_point25 {width:25%;}
[class^="res_type1_bargragh"] div img.bar_point30 {width:30%;}
[class^="res_type1_bargragh"] div img.bar_point35 {width:35%;}
[class^="res_type1_bargragh"] div img.bar_point40 {width:40%;}
[class^="res_type1_bargragh"] div img.bar_point45 {width:45%;}
[class^="res_type1_bargragh"] div img.bar_point50 {width:50%;}
[class^="res_type1_bargragh"] div img.bar_point55 {width:55%;}
[class^="res_type1_bargragh"] div img.bar_point60 {width:60%;}
[class^="res_type1_bargragh"] div img.bar_point65 {width:65%;}
[class^="res_type1_bargragh"] div img.bar_point70 {width:70%;}
[class^="res_type1_bargragh"] div img.bar_point75 {width:75%;}
[class^="res_type1_bargragh"] div img.bar_point80 {width:80%;}
[class^="res_type1_bargragh"] div img.bar_point85 {width:85%;}
[class^="res_type1_bargragh"] div img.bar_point90 {width:90%;}
[class^="res_type1_bargragh"] div img.bar_point95 {width:95%;}
[class^="res_type1_bargragh"] div img.bar_point100 {width:100%;}
/* ----------------------
* result_type2
*---------------------- */
.res_type2_text1 {
position: absolute;
width: 390px;
height: 360px;
top: 0px;
left: 400px;
background-image: url(../images/result/type/res_type2_cate_txt1.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.res_type1_chart.cate4 .res_type2_text1,
.res_type1_chart.cate6 .res_type2_text1 {
position: absolute;
width: 780px;
height: 230px;
top: 360px;
left: 10px;
background-image: url(../images/result/type/res_type2_cate_txt2.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.res_type2_text2 {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
position: absolute;
width: 312px;
height: 226px;
top: 66px;
left: 434px;
margin: 0 auto;
padding: 0px 0px;
color: #000;
font-size: 120%;
line-height: 135%;
overflow: hidden;
text-align: left;
box-sizing: border-box;
}
.res_type1_chart.cate4 .res_type2_text2,
.res_type1_chart.cate6 .res_type2_text2 {
position: absolute;
width: 634px;
height: 136px;
top: 392px;
left: 78px;
}
.res_type2_text2 strong,
.res_type2_text2 i {
font-size: 110%;
}
.res_type2_text2 strong { color: #c30a0a; }
.res_type2_text2 i { color: #0a50c3; }
.res_type2_text_img {
background: url(../images/result/type/res_type2_cate_trial1.jpg) no-repeat;
background-size: 100% 100%;
position: absolute;
width: 390px;
height: 360px;
top: 0px;
left: 400px;
}
.res_type1_chart.cate4 .res_type2_text_img,
.res_type1_chart.cate6 .res_type2_text_img {
background: transparent url(../images/result/type/res_type2_cate_trial2.jpg) no-repeat;
background-size: 100% 100%;
position: absolute;
width: 780px;
height: 230px;
top: 360px;
left: 10px;
}
.res_type2_text3 {
background-color: rgba(0,0,0,0.5);
position: absolute;
display: flex;
width: 100%;
top: 0;
left: 0;
width: 800px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.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 {
height: 360px;
}
.res_type1_chart.cate4 .res_type2_text3,
.res_type1_chart.cate6 .res_type2_text3 {
height: 590px;
}
.res_type2_text3 p {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
display: table;
width: 80%;
color: #ffe552;
font-size: 140%;
text-align: center;
line-height: 150%;
}
[class^="res_type2_img"] img {
width: 130px;
height: 70px;
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.cate3 .res_type2_img1 img:nth-of-type(1),
.res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(1) { top: 0px; left: 150px; }
.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.cate3 .res_type2_img1 img:nth-of-type(2),
.res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(2) { top: 36px; left: 272px; }
.res_type1_chart.cate1 .res_type2_img1 img:nth-of-type(3),
.res_type1_chart.cate2 .res_type2_img1 img:nth-of-type(3) { top: 210px; left: 306px; }
.res_type1_chart.cate3 .res_type2_img1 img:nth-of-type(3) { top: 210px; left: 302px; }
.res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(3) { top: 210px; left: 306px; }
.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.cate3 .res_type2_img1 img:nth-of-type(4),
.res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(4) { top: 290px; left: 230px; }
.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.cate3 .res_type2_img1 img:nth-of-type(5) { top: 290px; left: 70px; }
.res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(5) { top: 290px; left: 66px; }
.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: 210px; left: -6px; }
.res_type1_chart.cate1 .res_type2_img1 img:nth-of-type(7),
.res_type1_chart.cate2 .res_type2_img1 img:nth-of-type(7) { top: 36px; left: 18px; }
.res_type1_chart.cate3 .res_type2_img1 img:nth-of-type(7) { top: 36px; left: 22px; }
.res_type1_chart.cate5 .res_type2_img1 img:nth-of-type(7) { top: 36px; left: 18px; }
.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),
.res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(1) { top: 0px; left: 150px; }
.res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(2),
.res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(2) { top: 46px; left: 280px; }
.res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(3),
.res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(3) { top: 210px; left: 306px; }
.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: 290px; left: 230px; }
.res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(5),
.res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(5) { top: 290px; left: 70px; }
.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: 210px; left: -6px; }
.res_type1_chart.cate4 .res_type2_img1 img:nth-of-type(7),
.res_type1_chart.cate6 .res_type2_img1 img:nth-of-type(7) { top: 46px; left: 18px; }
.res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(1),
.res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(1) { top: 0px; left: 520px; }
.res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(2),
.res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(2) { top: 46px; left: 650px; }
.res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(3),
.res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(3) { top: 210px; left: 670px; }
.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: 290px; left: 600px; }
.res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(5),
.res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(5) { top: 290px; left: 440px; }
.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: 140px; left: 354px; }
.res_type1_chart.cate4 .res_type2_img2 img:nth-of-type(7),
.res_type1_chart.cate6 .res_type2_img2 img:nth-of-type(7) { top: 46px; left: 388px; }
/*手*/
.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: 200px;
height: 170px;
top: 50px;
left: 440px;
}
.res_type1_chart.cate4 .res_type2_hand,
.res_type1_chart.cate6 .res_type2_hand {
width: 200px;
height: 170px;
top: 370px;
left: 80px;
}
/* ----------------------
* result_type3
*---------------------- */
.res_type3_bg {
background-image: url(../images/result/type/res_type3_bg1.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: 640px auto;
position: relative;
height: 640px;
width: 800px;
margin: 0 auto 10px;
overflow: hidden;
}
/*テキスト*/
[class^="res_type3_text"] {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
width: 720px;
position: absolute;
left: 40px;
margin: 0 auto;
text-align: center;
font-size: 170%;
line-height: 130%;
text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff;
}
.res_type3_text1 { color: #000; top: 40px; }
.res_type3_text2 { color: #b210b4; bottom: 40px; }
.res_type3_text2+p { position: absolute; left: 110px; bottom: 10px; text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff; }
/*タロットボタン*/
.shuffle-btn {
position: absolute;
top: 360px;
left: 190px;
width: 420px;
height: 133px;
}
/*タロット*/
.res_type3_tarot_box {
width: 640px;
height: 640px;
margin: 0 auto;
position: absolute;
top: 0;
left: 80px;
}
.res_type3_tarot_box [class^="res_tarot_img"] {
width: 90px;
height: 150px;
position: absolute;
}
.res_tarot_bg2 {
width: 640px;
height: 640px;
position: absolute;
top: 0;
left: 80px;
}
/*シャッフル前*/
.res_type3_bg .res_tarot_img0 { top: 35px; left: 5px; }
/*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: 170px; left: 5px; }
.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: 170px; left: 95px; }
.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: 245px; left: 185px; }
.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: 170px; left: 545px; }
.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: 170px; left: 455px; }
.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: 245px; left: 365px; }
.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: 320px; left: 275px; }
/*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: 170px; left: 455px; }
.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: 245px; left: 545px; }
.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: 245px; left: 365px; }
.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: 320px; left: 455px; }
.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: 170px; left: 185px; }
.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: 245px; left: 95px; }
.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: 320px; left: 5px; }
/*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: 320px; left: 5px; }
.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: 245px; left: 95px; }
.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: 170px; left: 185px; }
.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: 245px; left: 275px; }
.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: 170px; left: 545px; }
.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: 245px; left: 455px; }
.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: 320px; left: 545px; }
/*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: 133px; left: 275px; }
.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: 208px; left: 185px; }
.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: 283px; left: 95px; }
.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: 358px; left: 185px; }
.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: 358px; left: 365px; }
.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: 283px; left: 455px; }
.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: 208px; left: 365px; }
/*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: 170px; left: 545px; }
.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: 245px; left: 455px; }
.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: 170px; left: 365px; }
.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: 245px; left: 275px; }
.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: 320px; left: 185px; }
.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: 320px; left: 95px; }
.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: 320px; left: 5px; }
/*1枚表示*/
.res_type3_img {
width: 150px;
height: 278px;
margin: 53px auto 0px;
}
.res_type_datebox {
width: 720px;
margin: 0px auto;
padding: 10px 0px 30px;
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
font-size: 360%;
color: #fcff00;
text-shadow: 0 0 15px #ff9600, 0 0 15px #ff9600, 0 0 15px #ff9600, 0 0 15px #ff9600;
position: relative;
overflow: hidden;
}
/* ----------------------
* result_type5
*---------------------- */
/* ----------------------
* result_type6(last)
*---------------------- */
.res_last_top {
width: 840px;
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;
}
.res_last_text .text3 {
color: #fff;
font-size: 150%;
line-height: 150%;
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
text-shadow: 0 0 10px #562f06, 0 0 10px #562f06, 0 0 10px #562f06, 0 0 10px #562f06, 0 0 10px #562f06;
}
/* ------- 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,
.shuffle-btn.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_tarot_box img.res_tarot_img1 { transition: transform 0.4s ease-out 0.1s; }
.shuffle-btn.end { 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,-135px); }
.res_type3_bg.pat1 .res_tarot_img1:nth-of-type(2) { transform: translate(-90px,-135px); }
.res_type3_bg.pat1 .res_tarot_img1:nth-of-type(3) { transform: translate(-180px,-210px); }
.res_type3_bg.pat1 .res_tarot_img1:nth-of-type(4) { transform: translate(-540px,-135px); }
.res_type3_bg.pat1 .res_tarot_img1:nth-of-type(5) { transform: translate(-450px,-135px); }
.res_type3_bg.pat1 .res_tarot_img1:nth-of-type(6) { transform: translate(-360px,-210px); }
.res_type3_bg.pat1 .res_tarot_img1:nth-of-type(7) { transform: translate(-270px,-285px); }
.res_type3_bg.pat2 .res_tarot_img1:nth-of-type(1) { transform: translate(-450px,-135px); }
.res_type3_bg.pat2 .res_tarot_img1:nth-of-type(2) { transform: translate(-540px,-210px); }
.res_type3_bg.pat2 .res_tarot_img1:nth-of-type(3) { transform: translate(-360px,-210px); }
.res_type3_bg.pat2 .res_tarot_img1:nth-of-type(4) { transform: translate(-450px,-285px); }
.res_type3_bg.pat2 .res_tarot_img1:nth-of-type(5) { transform: translate(-180px,-135px); }
.res_type3_bg.pat2 .res_tarot_img1:nth-of-type(6) { transform: translate(-90px,-210px); }
.res_type3_bg.pat2 .res_tarot_img1:nth-of-type(7) { transform: translate(0px,-285px); }
.res_type3_bg.pat3 .res_tarot_img1:nth-of-type(1) { transform: translate(0px,-285px); }
.res_type3_bg.pat3 .res_tarot_img1:nth-of-type(2) { transform: translate(-90px,-210px); }
.res_type3_bg.pat3 .res_tarot_img1:nth-of-type(3) { transform: translate(-180px,-135px); }
.res_type3_bg.pat3 .res_tarot_img1:nth-of-type(4) { transform: translate(-270px,-210px); }
.res_type3_bg.pat3 .res_tarot_img1:nth-of-type(5) { transform: translate(-540px,-135px); }
.res_type3_bg.pat3 .res_tarot_img1:nth-of-type(6) { transform: translate(-450px,-210px); }
.res_type3_bg.pat3 .res_tarot_img1:nth-of-type(7) { transform: translate(-540px,-285px); }
.res_type3_bg.pat4 .res_tarot_img1:nth-of-type(1) { transform: translate(-270px,-98px); }
.res_type3_bg.pat4 .res_tarot_img1:nth-of-type(2) { transform: translate(-180px,-173px); }
.res_type3_bg.pat4 .res_tarot_img1:nth-of-type(3) { transform: translate(-90px,-248px); }
.res_type3_bg.pat4 .res_tarot_img1:nth-of-type(4) { transform: translate(-180px,-323px); }
.res_type3_bg.pat4 .res_tarot_img1:nth-of-type(5) { transform: translate(-360px,-323px); }
.res_type3_bg.pat4 .res_tarot_img1:nth-of-type(6) { transform: translate(-450px,-248px); }
.res_type3_bg.pat4 .res_tarot_img1:nth-of-type(7) { transform: translate(-360px,-173px); }
.res_type3_bg.pat5 .res_tarot_img1:nth-of-type(1) { transform: translate(-540px,-135px); }
.res_type3_bg.pat5 .res_tarot_img1:nth-of-type(2) { transform: translate(-450px,-210px); }
.res_type3_bg.pat5 .res_tarot_img1:nth-of-type(3) { transform: translate(-360px,-135px); }
.res_type3_bg.pat5 .res_tarot_img1:nth-of-type(4) { transform: translate(-270px,-210px); }
.res_type3_bg.pat5 .res_tarot_img1:nth-of-type(5) { transform: translate(-180px,-285px); }
.res_type3_bg.pat5 .res_tarot_img1:nth-of-type(6) { transform: translate(-90px,-285px); }
.res_type3_bg.pat5 .res_tarot_img1:nth-of-type(7) { transform: translate(0px,-285px); }
@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(580px,0px);}
66% {transform:translate(0px,110px);}
100% {transform:translate(580px,110px);}
}
.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;}
.shuffle-btn.anime_btn p,
.shuffle-btn.anime_btn {animation: fadeout 0.2s linear 0s 1 forwards;}
.shuffle-btn.anime_btn1 {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; }
.anime3 img.res_tarot_img3 {animation: fadeinout 1s linear 1.1s 1 forwards;}
.anime3 img.res_tarot_img3:nth-of-type(1) {animation-delay: 1.1s;}
.anime3 img.res_tarot_img3:nth-of-type(2) {animation-delay: 1.2s;}
.anime3 img.res_tarot_img3:nth-of-type(3) {animation-delay: 1.3s;}
.anime3 img.res_tarot_img3:nth-of-type(4) {animation-delay: 1.4s;}
.anime3 img.res_tarot_img3:nth-of-type(5) {animation-delay: 1.5s;}
.anime3 img.res_tarot_img3:nth-of-type(6) {animation-delay: 1.6s;}
.anime3 img.res_tarot_img3:nth-of-type(7) {animation-delay: 1.7s;}
.anime3 img.res_tarot_img2 {animation: fadein 0.1s linear 1.6s 1 forwards;}
.anime3 img.res_tarot_img2:nth-of-type(1) {animation-delay: 1.6s;}
.anime3 img.res_tarot_img2:nth-of-type(2) {animation-delay: 1.7s;}
.anime3 img.res_tarot_img2:nth-of-type(3) {animation-delay: 1.8s;}
.anime3 img.res_tarot_img2:nth-of-type(4) {animation-delay: 1.9s;}
.anime3 img.res_tarot_img2:nth-of-type(5) {animation-delay: 2.0s;}
.anime3 img.res_tarot_img2:nth-of-type(6) {animation-delay: 2.1s;}
.anime3 img.res_tarot_img2:nth-of-type(7) {animation-delay: 2.2s;}
.anime3 img.res_tarot_img4 {animation: fadein 1.0s linear 2.5s 1 forwards;}
.anime3 .res_type3_text1,
.anime3 .res_type3_text2 {animation: fadein 1.0s linear 1.6s 1 forwards;}
.anime2 .shuffle-btn.init {animation: fadein 0.5s linear 0.5s 1 forwards;}
.anime_end .res_type3_tarot_box.back img,
.anime_end .shuffle-btn.init {opacity: 1;}
.anime_end .res_type3_tarot_box img,
.anime_end .shuffle-btn.init {animation:none !important; transition: none !important;}
.anime_end .res_tarot_bg2,
.anime_end .res_type2_mask1.trail {display:none;}
.noshuffle .res_tarot_bg2,
.noshuffle .shuffle-btn.start, .noshuffle .shuffle-btn.end {display:none;}
.noshuffle .res_type3_tarot_box.dummy img,
.noshuffle .res_type3_tarot_box.back img {opacity: 1;}
.res_box1 {
margin: 0 auto 10px;
width: 300px;
text-align: center;
}
.res_box1 {
background-image: url(../images/result/type/res_type3_bg2.jpg);
min-height: 384px;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top center;
}
.res_box2 {
width: 700px;
text-align: left;
float: left;
padding: 0;
}
.res_box3 {
width: 700px;
margin: 0 auto 20px;
padding: 0;
text-align: left;
}
.res_box4 { margin-left: 80px; }
.res_box5 {
float: left;
width: 340px;
}
.res_box6 {
float: left;
width: 420px;
padding: 20px 0 0;
text-align: left;
}
/* pattern1------ */
.res_sub_top {
background: url(../images/common/res_sub_top.jpg) no-repeat;
background-size: 100% 100%;
margin-top: 10px;
width: 840px;
height: 100px;
}
.res_sub_tl { background: url(../images/common/res_sub_tl.jpg) repeat-y; width: 840px; }
.res_sub_bg { background: url(../images/common/res_sub_bg.jpg) repeat-y; width: 840px; }
.res_sub_bt {
width: 840px;
height: 120px;
background: url(../images/common/res_sub_bt.jpg) no-repeat;
background-size: 100% 100%;
}
.res_sub_box {
margin: 0 80px;
padding: 0 0 10px;
text-align: left;
}
.res_sub_box2 {
float: left;
width: 430px;
text-align: left;
}
.res_sub_bg2 .res_sub_box {
padding: 20px 0 0;
}
.res_sub_center {
background: url(../images/common/res_sub_center.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 100px;
}
/* pattern1------ */
/* pattern2------ */
.res_sub_top2 {
background: url(../images/common/res_sub_top.jpg) no-repeat;
background-size: 100% 100%;
margin-top: 10px;
width: 840px;
height: 100px;
}
.res_sub_tl2 { background: url(../images/common/res_sub_tl.jpg) repeat-y; width: 840px; }
.res_sub_bg2 { background: url(../images/common/res_sub_bg2.jpg) repeat-y; width: 840px; }
.res_sub_bt2 {
background: url(../images/common/res_sub_bt2.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 130px;
}
.res_sub_center2 {
background: url(../images/common/res_sub_center2.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 100px;
}
/* pattern2------ */
/* pattern3------ */
.res_sub_top3 {
background: url(../images/common/res_sub_top.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 100px;
margin-top: 10px;
}
.res_sub_tl3 { background: url(../images/common/res_sub_tl.jpg) repeat-y; width: 840px; }
.res_sub_bg3 { background: url(../images/common/res_sub_bg3.jpg) repeat-y; width: 840px; }
.res_sub_bt3 {
background: url(../images/common/res_sub_bt3.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 130px;
}
.res_sub_center3 {
background: url(../images/common/res_sub_center3.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 100px;
}
/* pattern3------ */
/* pattern4------ */
.res_sub_top4 {
background: url(../images/common/res_sub_top4.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 330px;
margin: 30px 0 0;
}
.res_sub_tl4 {
background: url(../images/common/res_sub_tl4.jpg) repeat-y;
width: 840px;
}
.res_sub_bg4 {
background: url(../images/common/res_sub_bg4.jpg) repeat-y;
width: 840px;
clear: both;
}
.res_sub_bt4 {
background: url(../images/common/res_sub_bt4.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 100px;
}
.res_sub_center4 {
background: url(../images/common/res_sub_center4.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 90px;
}
/* pattern4------ */
/* pattern5------ */
.res_sub_top5 {
background: url(../images/common/res_sub_top5.png) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 295px;
}
.res_sub_center5 {
background: url(../images/common/res_sub_center5.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height:390px;
}
.res_sub_img5 {
float: left;
margin: 0 0 20px;
width: 340px;
height: 400px;
}
.res_sub_bg5 {
background: url(../images/common/res_sub_bg4.jpg) repeat-y;
width: 840px;
}
.res_sub_bt5 {
background: url(../images/common/res_sub_bt4.jpg) no-repeat;
background-size: 100% 100%;
width: 840px;
height: 132px;
}
.res_card_img { display: block; }
.jikiBox {
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
display: block;
margin: 0 auto;
color: #fcff00;
font-size: 45px;
font-weight: bold;
text-shadow: 0 0 15px #ff9600, 0 0 15px #ff9600, 0 0 15px #ff9600, 0 0 15px #ff9600;
}
.jikiBox .paragraph { text-align: center; }
/*######### blur #########*/
.free-container .blur {
background: transparent url(../images/result/blur/text_img_m3.png) no-repeat center top;
background-size: 100%;
position: relative;
margin-top: 10px;
padding-top: 65px;
height: 155px;
}
.free-container .listYesno .secMsg .blur,
.free-container .listLast .secMsg .blur {
background: transparent url(../images/result/blur/text_img_s2.png) no-repeat center top;
background-size: 100%;
position: relative;
margin-top: 10px;
padding-top: 85px;
height: 210px;
}
.free-container .blur a {
display: table;
margin: 0 auto;
text-decoration: none;
}
/*######### blur End #########*/
/*########################## result-container End ##########################*/
/* ----------------------
* animation
*---------------------- */
@keyframes fadein {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadein2 {
0% {opacity: 0; transform:scale(1.3);}
100% {opacity: 1; transform:scale(1.0);}
}
@keyframes fadein3 {
0% {opacity: 0; transform:scale(0.8);}
100% {opacity: 1; transform:scale(1.0);}
}
@keyframes fadeout {
0% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeinout {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeinout2 {
0% {opacity: 0; transform: scale(0.5)}
50% {opacity: 1;}
100% {opacity: 0; transform: scale(2.0)}
}
@keyframes movehand {
0% {transform:rotate(0deg);}
50% {transform:rotate(-10deg);}
100% {transform:rotate(0deg);}
}
@keyframes fudeji1 {
0% {transform:translate(0px,0px);}
33% {transform:translate(260px,0px);}
66% {transform:translate(0px,190px);}
100% {transform:translate(260px,190px);}
}