@charset "Shift_JIS";
/* 雉ｪ蝠上お繝ｪ繧｢ */
.read-question {
font-size:18px;
width: 800px;
height: 150px;
margin: 0 auto;
padding: 20px 50px 20px 50px;
position: relative;
vertical-align: middle;
text-align: left;
background: #f8f8f8;
}
/*雉ｪ蝠�*/
.read-question .inner h3 {
padding-left: 25px;
background-repeat: no-repeat;
font-size: 20px;
}
/*繝ｩ繧ｸ繧ｪ繝懊ち繝ｳ*/
.read-question .table-ul {
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
}
.read-question .table-ul li {
display: table-cell;
vertical-align: middle;
}
.read-question input{
display: none;
}
.read-question label{
display: block;
cursor: pointer;
margin: 5px 2px;
padding: 12px 2px 12px 8px;
border: 1px solid #abb2b7;
background: #fff;
color: #555e64;
font-size: 25px;
text-align: center;
line-height: 140%;
transition: .2s;
background-image: url(../images/rbtn_unchk.png);
background-position:0px 5px;
background-repeat: no-repeat;
border-radius: 5px;
}
/*繝槭え繧ｹ繧ｪ繝ｼ繝舌�縺励◆縺ｨ縺阪�繧ｹ繧ｿ繧､繝ｫ*/
.read-question label:hover {
background-color: #E2EDF9;
}
.read-question input[type="radio"]:checked + label {
background: #0063A4;
color: #FFF;
background-image:url(../images/rbtn_chk.png);
background-position:0px 5px;
background-repeat: no-repeat;
}
/* 荳狗泙蜊ｰ繧｢繧､繧ｳ繝ｳ */
.next-icon {
height: 35px;
text-align: center;
}
.next-icon img{
height: 25px;
margin: 3px;
}
/* 繝励Λ繝ｳ險ｺ譁ｭ螳溯｡後�繧ｿ繝ｳ */
.reflection-obj{
width :420px;
height :100px;
position :relative;
overflow :hidden;
margin: 0 auto;
}
.reflection-obj input{
display: none;
}
.reflection-obj label{
display: block;
float: left;
cursor: pointer;
width: 400px;
margin: 20px 0px 0px 5px;
padding: 12px 5px;
border-right: 1px solid #abb2b7;
background: #bdc3c7;
color: #fff;
font-size: 25px;
text-align: center;
line-height: 140%;
transition: .2s;
border-radius: 5px;
box-shadow:2px 2px 2px #555;
background-color: black;
background-image: -moz-linear-gradient(#434343, black);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#434343), to(black));
background-image: -webkit-linear-gradient(#434343, black);
background-image: -ms-linear-gradient(top, #434343 0%, red 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#434343', EndColorStr='black')";
}
.reflection {
height :100%;
width :30px;
position :absolute;
top :-180px;
left :0;
background-color: #fff;
opacity :0;
transform: rotate(45deg);
animation: reflection 2s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 2s ease-in-out infinite;
-moz-transform: rotate(45deg);
-moz-animation: reflection 2s ease-in-out infinite;
-ms-transform: rotate(45deg);
-ms-animation: reflection 2s ease-in-out infinite;
-o-transform: rotate(45deg);
-o-animation: reflection 2s ease-in-out infinite;
}
@keyframes reflection {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { transform: scale(4) rotate(45deg); opacity: 1; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
/* 險ｺ譁ｭ邨先棡陦ｨ遉ｺ繧ｨ繝ｪ繧｢ */
.result-inner {
font-size:18px;
width: 900px;
margin: 0 auto;
border: 2px solid #cccccc;
position: relative;
vertical-align: middle;
text-align: center;
}
/*險ｺ譁ｭ邨先棡繝倥ャ繝繝ｼ*/
.result-hedder {
font-size:30px;
font-weight:bold;
padding: 10px;
position: relative;
vertical-align: middle;
text-align: center;
background: #2174ed;
color: #fff;
line-height: 50px;
}
/*險育ｮ礼ｵ先棡陦ｨ遉ｺ*/
.result-inner dl {
margin:5px 5px 5px 100px;
width:800px;
font-size:24px;
text-align: left;
}
.result-inner dl span{
font-size:36px;
color: #f66464;
}
.result-inner dt {
float:left;
clear: left;
width:500px;
padding:5px;
line-height: 130%;
}
.result-inner dd {
margin-left:280px;
padding:5px;
width:500px;
line-height: 130%;
}
.result-inner input[type="number"] {
font-size:36px;
color: #f66464;
width:100px;
text-align: right;
vertical-align: auto;
height: 37px;
}
/*蜀崎ｨ育ｮ励�繧ｿ繝ｳ*/
.result-inner input[type="button"]{
display: none;
}
.result-inner .recalculation-btn{
cursor: pointer;
padding: 5px 5px 5px 5px;
border: 1px solid #abb2b7;
color: #fff;
font-size: 25px;
text-align: center;
width:80px;
vertical-align: auto;
margin: 0px 0px 0px 10px;
border-radius: 5px;
box-shadow:0px 3px 0px rgba(136,136,136,1);
background-color:#00b0ed;
font-weight:bold;
}
/*繧ｯ繝ｪ繝�け縺励◆縺ｨ縺阪�繧ｹ繧ｿ繧､繝ｫ*/
.result-inner .recalculation-btn:active {
box-shadow: none;
/*transform: translate3d(0, 3px, 0);*/
transform:translate(0px,3px);
}
.result-comment {
font-size:12px;
padding: 0px 0px 0px 120px;
position: relative;
vertical-align: middle;
text-align: left;
}
/* 繝励Λ繝ｳ陦ｨ遉ｺ繧ｨ繝ｪ繧｢ */
.wrap-deals {
display: inline-block;
font-size:18px;
width: 880px;
margin: 10px 0;
padding: 10px;
position: relative;
vertical-align: middle;
text-align: center;
}
/*縺翫☆縺吶ａ繝励Λ繝ｳ*/
.wrap-deals .result-read {
margin: 5px 0px 10px 0px;
}
.wrap-deals .main-plan {
border: 2px solid #f66464;
width: 856px;
margin: 30px 20px 0px 10px;
}
.wrap-deals .read {
display: inline-block;
font-size:18px;
width: 856px;
position: relative;
vertical-align: middle;
text-align: center;
line-height: 180%;
color: #fff;
background: #f66464;
}
.wrap-deals .plan {
display: inline-block;
font-size:40px;
width: 856px;
position: relative;
vertical-align: middle;
text-align: center;
line-height: 200%;
color: #fff;
background: #f66464;
}
.wrap-deals .pack {
color: #fdfd00;
}
.wrap-deals .storage-time {
position: relative;
text-align: left;
margin: 20px 0px 20px 13px;
}
.wrap-deals .storage-time-label {
font-size:30px;
position: absolute;
top: 25px;
left: 100px;
}
.wrap-deals .storage-time-number {
font-size:40px;
color: #f00;
}
.wrap-deals .storage-time-comment {
font-size:15px;
position: absolute;
top: 70px;
left: 100px;
}
.wrap-deals h5 {
border-bottom: 1px solid #a98044;
padding-left: 25px;
background-image: url(../img/usr/product/h3_icon_flexlog.jpg);
background-repeat: no-repeat;
font-size: 20px;
text-align: left;
width:400px;
margin: 0px 0px 20px 100px;
}
.wrap-deals h5 .Cost-number {
font-size: 30px;
color: #f00;
}
/* 隧ｳ邏ｰ縺ｯ縺薙■繧峨�繧ｿ繝ｳ */
.result-inner .detail-btn{
display: block;
cursor: pointer;
margin: 30px 0px 30px 280px;
padding: 12px 2px 12px 8px;
border: 1px solid #abb2b7;
background: #0063A4;
color: #FFF;
font-size: 25px;
text-align: center;
line-height: 140%;
transition: .2s;
background-image: url(../img/usr/common/right_arrow.png);
background-position:270px 15px;
background-repeat: no-repeat;
border-radius: 5px;
width:300px;
}
/*繝槭え繧ｹ繧ｪ繝ｼ繝舌�縺励◆縺ｨ縺阪�繧ｹ繧ｿ繧､繝ｫ*/
.result-inner .detail-btn:hover {
background-color: #0074B7;
}