.reviewBox {
display: block;
max-width: 500px;
background: #F5F7FF;
border: 1px solid #7B86C6;
margin: 20px auto;
padding: 0;
border-radius: 10px;
}
.reviewBox .reviewBox_content {
padding: 30px;
}
.reviewBox .reviewBox_title1 {
margin: 0;
padding: 12px;
background: #7B86C6;
text-align: center;
font-size: 15px !important;
font-weight: bold;
border-radius: 10px 10px 0 0;
line-height: 1.3em;
border: none;
color: #fff !important;
}
.reviewBox .reviewBox_title1:before {
font-family: "Font Awesome 5 Free";
content: "\f005";
font-weight: 600;
padding-right: 5px;
font-size: .9em !important
}
.reviewBox .reviewBox_title2 {
margin: 0;
padding: 0;
line-height: 1.3em;
font-size: 16px;
margin-bottom: 10px;
font-weight: bold;
border: none;
}
.reviewBox .reviewBox_title2:before {
content: none !important;
}
.reviewBox .reviewBox_top {
margin: auto;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.reviewBox .reviewBox_top p {
margin: 0;
padding: 0;
line-height: 1.3em;
padding-bottom: 12px;
font-size: 15px !important;
}
.reviewBox .reviewBox_top p:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: 600;
padding-right: 5px;
font-size: .8em;
}
.reviewBox .reviewBox_top .reviewBox_left,
.reviewBox .reviewBox_top .reviewBox_right {
width: 50%;
}
.reviewBox .reviewBox_top .reviewBox_right img {
display: block;
margin: auto;
width: 160px;
}
.reviewBox .reviewBox_center {
margin-top: 10px;
}
.reviewBox .reviewLink {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.reviewBox .reviewLink a {
font-size: 15px !important;
color: #444 !important;
border: 2px solid #444;
padding: .6em 2em;
margin: 5px;
width: 50%;
text-align: center;
margin-top: 30px;
text-decoration: none;
}
.reviewBox .reviewLink a:nth-child(2) {
background: #7B86C6;
color: #fff !important;
border: 2px solid #7B86C6;
}
.reviewBox .reviewLink a:before {
font-family: "Font Awesome 5 Free";
content: "\f138";
font-weight: 600;
padding-right: 5px;
}
.reviewBox .reviewBox_center {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
padding: 20px 0;
}
.reviewBox .reviewBox_center .progress-circle {
width: 25%;
margin: auto;
}
.reviewBox .progress-circle {
font-size: 12px !important;
margin: 20px;
position: relative;
/* so that children can be absolutely positioned */
padding: 0;
width: 5em !important;
height: 5em !important;
background-color: #D7DBF3;
border-radius: 50%;
line-height: 5em;
}
.reviewBox .reviewBox_score {
font-size: 13px !important;
text-align: center;
line-height: 1em;
z-index: 4;
padding-top: 5.5em;
display: block;
font-weight: 600;
}
.reviewBox .reviewBox_score p {
margin: 0;
font-size: 12px !important;
width: 120% !important;
margin-left: -10% !important;
}
.reviewBox .progress-circle:after {
border: none;
position: absolute;
top: 0.5em;
left: 0.5em;
text-align: center;
display: block;
border-radius: 50%;
width: 4em;
height: 4em;
background-color: #F5F7FF;
content: " ";
}
.reviewBox .progress-circle .progress-text {
position: absolute;
line-height: 2.6em;
width: 2.6em;
text-align: center;
display: block;
color: #444 !important;
font-size: 23px !important;
z-index: 2;
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sogoe UI", Verdana, "メイリオ", Meiryo, sans-serif;
}
.reviewBox .left-half-clipper {
border-radius: 50%;
width: 5em;
height: 5em;
position: absolute;
/* needed for clipping */
clip: rect(0, 5em, 5em, 2.5em);
/* clips the whole left half*/
}
.reviewBox .progress-circle.over50 .left-half-clipper {
clip: rect(auto, auto, auto, auto);
}
.reviewBox .value-bar {
position: absolute;
/*needed for clipping*/
clip: rect(0, 2.5em, 5em, 0);
width: 5em !important;
height: 5em !important;
border-radius: 50%;
border: 0.5em solid #7B86C6;
box-sizing: border-box;
}
.reviewBox .progress-circle.over50 .first50-bar {
position: absolute;
/*needed for clipping*/
clip: rect(0, 5em, 5em, 2.5em);
background-color: #7B86C6;
border-radius: 50%;
width: 5em;
height: 5em;
}
.reviewBox .progress-circle:not(.over50) .first50-bar {
display: none;
}
.reviewBox .progress-circle.p0 .value-bar {
display: none;
}
.reviewBox .progress-circle.p1 .value-bar {
transform: rotate(4deg);
}
.reviewBox .progress-circle.p10 .value-bar {
transform: rotate(36deg);
}
.reviewBox .progress-circle.p20 .value-bar {
transform: rotate(72deg);
}
.reviewBox .progress-circle.p30 .value-bar {
transform: rotate(108deg);
}
.reviewBox .progress-circle.p40 .value-bar {
transform: rotate(144deg);
}
.reviewBox .progress-circle.p50 .value-bar {
transform: rotate(180deg);
}
.reviewBox .progress-circle.p60 .value-bar {
transform: rotate(216deg);
}
.reviewBox .progress-circle.p70 .value-bar {
transform: rotate(252deg);
}
.reviewBox .progress-circle.p80 .value-bar {
transform: rotate(288deg);
}
.reviewBox .progress-circle.p90 .value-bar {
transform: rotate(324deg);
}
.reviewBox .progress-circle.p100 .value-bar {
transform: rotate(360deg);
}
@media screen and (max-width:480px) {
.reviewBox .reviewBox_content {
padding: 15px;
}
.reviewBox .reviewBox_top .reviewBox_right img {
width: 220px;
}
.reviewBox .reviewBox_top p {
font-size: 13px !important;
}
.reviewBox .reviewBox_top p:first-child {
font-size: 15px !important;
}
.reviewBox .reviewBox_center {
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.reviewBox .reviewLink a {
padding: .5em;
}
.reviewBox .reviewBox_top {
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.reviewBox .reviewBox_top .reviewBox_left {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
width: 90%;
margin: auto;
margin-top: 20px;
}
.reviewBox .reviewBox_top .reviewBox_right {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
width: 100%;
}
.reviewBox .reviewLink a {
font-size: 13px !important;
}
.reviewBox .progress-circle .progress-text {
line-height: 2.2em;
width: 2.2em;
font-size: 23px !important;
}
.reviewBox .progress-circle {
font-size: 10px !important;
}
.reviewBox .reviewBox_score p {
font-size: 10px !important;
}
}
サイトマップ | 人生の目標を持つこと
本 ペ ー ジ は プ ロ モ ー シ ョ ン が 含 ま れ て い ま す
サイトマップ
2023.01.02
タイトルとURLをコピーしました
