/* site_user_review.css -ユーザーレビュー特設サイト用- */

.star .star__badge {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  position: relative; }

.star .star__num {
  color: #343739;
  font-family: montserrat; }
  .star .star__num span {
    text-decoration: underline; }
  .star .star__num:before {
    content: "("; }
  .star .star__num:after {
    content: ")"; }

.star.starg--lg .star__badge {
  width: 120px; }

#review .col-6 {
  float:left;
  position:relative;
  min-height:1px;
  padding-left:4px;
  padding-right:4px;
  width:50%; }

#review .btn-style2 {
  border:1px solid #e60012;
  color:#e60012;
  background:#FFF;
  text-align:center;
  display:block;
  font-size:15px;
  line-height:20px;
  padding:16px 0;
  text-decoration:none!important;
  font-weight:700;
  margin:0 auto 8px;
  max-width:280px; }
  #review .btn-style2:hover {
    border-color:#d70011;
    color:#d70011; }

.modal {
 font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",メイリオ,Meiryo,"ＭＳ Ｐゴシック","Helvetica Neue",Helvetica,Arial,sans-serif }
#modalOverlay,#modalWindow {
 position:fixed;
 top:0;
 left:0 }
#modalWindow {
 display:none;
 bottom:0;
 right:0;
 margin:auto;
 background:#FFF;
 box-shadow:0 0 8px rgba(0,0,0,.3);
 transition:margin-top .3s ease,height .3s ease;
 -webkit-transform:translateZ(0);
 transform:translateZ(0) }
#modalWindow.show {
 display:block }
#modalWindow * {
 -webkit-font-smoothing:antialiased }
#modalWindow::after {
 content:'';
 width:100%;
 height:0;
 opacity:0;
 position:absolute;
 left:0;
 bottom:0;
 z-index:1;
 transition:height .3s ease-in-out,opacity .3s ease-in-out;
 pointer-events:none }
#modalWindow iframe {
 border:0;
 margin:0 0 -6px;
 width:100%;
 transition:height .3s ease }
#modalOverlay {
 display:none;
 height:100%;
 width:100% }
#modalWindow ::-webkit-scrollbar {
 overflow:visible;
 height:7px;
 width:7px }
#modalWindow ::-webkit-scrollbar-thumb {
 background-color:rgba(0,0,0,.2);
 background-clip:padding-box;
 border:solid transparent;
 border-width:0;
 min-height:28px;
 padding:100px 0 0;
 box-shadow:inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07) }
#modalWindow ::-webkit-scrollbar-thumb:active {
 background-color:rgba(0,0,0,.4) }
#modalWindow ::-webkit-scrollbar-button {
 height:0;
 width:0 }
#modalWindow ::-webkit-scrollbar-track {
 background-clip:padding-box;
 border:solid transparent;
 border-width:0 0 0 2px }
#modalWindow.transitionIn iframe {
 -webkit-animation:modal-fadeIn 1.3s;
 animation:modal-fadeIn 1.3s }
#modalOverlay.comingIn,#modalWindow.comingIn {
 -webkit-animation:modal-comingIn .5s ease;
 animation:modal-comingIn .5s ease }
#modalOverlay.comingOut,#modalWindow.comingOut {
 -webkit-animation:modal-comingOut .5s cubic-bezier(.16,.81,.32,1);
 animation:modal-comingOut .5s cubic-bezier(.16,.81,.32,1);
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards }
@-webkit-keyframes modal-comingIn {
 0% {
  opacity:0;
  -webkit-transform:scale(.9) translateY(-20px) perspective(600px) rotateX(10deg);
  transform:scale(.9) translateY(-20px) perspective(600px) rotateX(10deg) }
 100% {
  opacity:1;
  -webkit-transform:scale(1) translateY(0) perspective(600px) rotateX(0);
  transform:scale(1) translateY(0) perspective(600px) rotateX(0) }
}
@keyframes modal-comingIn {
 0% {
  opacity:0;
  -webkit-transform:scale(.9) translateY(-20px) perspective(600px) rotateX(10deg);
  transform:scale(.9) translateY(-20px) perspective(600px) rotateX(10deg) }
 100% {
  opacity:1;
  -webkit-transform:scale(1) translateY(0) perspective(600px) rotateX(0);
  transform:scale(1) translateY(0) perspective(600px) rotateX(0) }
}
@-webkit-keyframes modal-comingOut {
 0% {
  opacity:1;
  -webkit-transform:scale(1);
  transform:scale(1) }
 100% {
  opacity:0;
  -webkit-transform:scale(.9);
  transform:scale(.9) }
}
@keyframes modal-comingOut {
 0% {
  opacity:1;
  -webkit-transform:scale(1);
  transform:scale(1) }
 100% {
  opacity:0;
  -webkit-transform:scale(.9);
  transform:scale(.9) }
}

@media screen and (max-width:720px) {
  #review .col-6 {
    float:none;
    width:100%; }
}

@media screen and (max-width:480px) {
  .star.starg--lg .star__badge {
    width: 60px; }
  .review .review__title {
    display:block;
    font-weight:normal; }
  .review .review_date {
    display:block;
    font-weight:normal;
    color: #9a99ad; }
  .review .review_username {
    padding-left:0px; }
  .main .review .review__useful span {
    margin: 0 0 0 6px;
    display: inline-block; }
  #review .btn-style2 {
    max-width:none; }
    #review .btn-style2:after {
    font-family:mumo;
    content:"\E4A0";
    color:#e60012;
    position:absolute;
    right:8px;
    font-size:10px;
    line-height:14px;
    top:50%;
    margin-top:-7px; }
}