@charset "UTF-8";

/*-------- 全体 --------*/
body {
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
.wrapper{
    max-width: 800px;
    margin: 0 auto;
    padding: 2%;
}
img{
    max-width: 100%;
    text-align: center;
}

a div:hover {
    opacity: 0.7;
}

a img:hover {
    opacity: 0.7;
}


@media screen and (max-width: 800px){
.wrapper{
    width: 100%;
}
.contents{
    padding: 0 2%;
}
}

/*-------- 共通 --------*/
.mark{
    background: linear-gradient(transparent 65%, #f9e975 60%);
    padding: 0 5px;
}
.red{
    color: #c53737;
    font-weight: bold;
}
.blue{
    color: #0e72dd;
    font-weight: bold;
}
.orange{
    color: #f5a15f;
    font-weight: bold;
}
.whi{
    color: #fff;
}
.co_g{
    color: #919191;
}
.co_p{
    color: #ff007b;
    font-weight: bold;
}

.strong{
    text-align: center;
    font-size: 26px;
    margin: 30px auto;
}


.fsL{
    font-size: 120% !important;
}
.fsS{
    font-size: 80%;
    color: #999;
}
p.tyu{
  font-size: 12px;
  text-align: right;
}
b {
    font-weight: bold;
}
.lis{
    line-height: 1.7;
}
.lin {
    background: linear-gradient(to bottom, transparent 0%, transparent 40%, #ffff66 40%, #ffff66 100%);
    height: 80%;
    vertical-align: bottom;
    font-weight: bold;
}

.mt5{
    margin-top: 5%;
}

.ta-c{
    text-align: center;
}
.ta-r{
    text-align: right;
}

.mt1{
    margin-top: 1%;
}
.mt2{
    margin-top: 2%;
}
.mt3{
    margin-top: 3%;
}
.mt4{
    margin-top: 4%;
}

.mb1{
    margin-bottom: 1%;
}
.mb2{
    margin-bottom: 2%;
}
.mb3{
    margin-bottom: 3%;
}
.mb4{
    margin-bottom: 4%;
}

.pt1{
    padding-top: 1%;
}
.pt2{
    padding-top: 2%;
}
.pt3{
    padding-top: 3%;
}
.pt4{
    padding-top: 4%;
}

.pb1{
    padding-bottom: 1%;
}
.pb2{
    padding-bottom: 2%;
}
.pb3{
    padding-bottom: 3%;
}
.pb4{
    padding-bottom: 4%;
}


.pc_ds{
    display: inline-block;
}

.sp_ds{
    display: none;
}

@media screen and (max-width: 800px){

.beautiful_body{
    margin-bottom: 20px;
}
    
    
p.tyu{
  font-size: 7px;
}
.pc_ds{
    display: none;
}

.sp_ds{
    display: inline-block;
}
}


/*-------- タイトル周り --------*/
h1{
    font-size: 35px;
    font-weight: bold;
    text-align: center;
}

h2{
    font-size: 23px;
    font-weight: bold;
    background-color: #ff007b;
    padding: 3%;
    line-height: 1.2;
    color: #fff;
}



@media screen and (max-width: 800px){
h1{
    font-size: 30px;
}

h2{
    font-size: 20px;
}

}

/*----------表----------*/
.comparison-table a{
        text-decoration: none;
        color: #333;
}

.comparison-table a:hover {
        text-decoration: underline;
}

.comparison-table{
        width: 100%;
        padding: 1%;
        word-wrap: break-word;
}

.comparison-table table{
        width: 100%;
        table-layout: fixed;
        border: 10px solid #D5F3F9;
}

.comparison-table td,.comparison-table th{
        vertical-align: middle;
        line-height: 1.3;
}

.comparison-table th{
        text-align: center;
        background-color: #9DE6F3;
        color: #fff;
        padding: 1.5% 0;
}

.comparison-table td{
        text-align: center;
        border-right: 2px dotted #eee;
        padding: 1.5%;
}

.comparison-table td:last-child{
        border-right: none;
}

.comparison-table td img{
        width: 100%;
}

/*評価の星*/
.comparison-table td .star-ratings-css {
        unicode-bidi: bidi-override;
    color: #c5c5c5;
    font-size: 15px;
    height: 4px;
    width: 80px;
    margin: 0 auto;
    position: relative;
    padding: 0;
        text-align: initial;
        word-wrap: normal;
}
.comparison-table td .star-ratings-css-top {
  color: #ffd400;
  padding: 0;
  position: absolute;
  z-index: 1;
  display: block;
  top: 0;
  left: 0;
  overflow: hidden;
}
.comparison-table td .star-ratings-css-bottom {
  padding: 0;
  display: block;
  z-index: 0;
}

/*◎〇▲×*/
.comparison-table td.berry::before{
        content: "◎";
        font-weight: bold;
        color: #ff3a3a;
        font-size: 250%;
}

.comparison-table td.good::before{
        content: "〇";
        color: #9de6f3;
        font-size: 250%;
}

.comparison-table td.usually::before{
        content: "△";
        font-weight: bold;
        color: #ffe20f;
        font-size: 250%;
}

.comparison-table td.not::before{
        content: "×";
        font-weight: bold;
        color: #636363;
    font-size: 250%;
}

/*表　SP*/
@media (max-width: 767px) { 
.comparison-table table{
        display: block;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
}

.comparison-table td{
    width: calc(100% / 3);
    white-space: normal;
}

.comparison-table th{
        position: absolute;
    left: 14px;
    right: 14px;
    z-index: 2;
}

.comparison-table tr{
        display: table-row;
        height: 35px;
}

}

/*ボタン　横揺れ*/
.shuffling {
    animation-duration: 1.4s!important;
    -webkit-animation-duration: 1.4s;
    -ms-animation-duration: 1.4s;
    -moz-animation-duration: 1.4s!important;
    -webkit-animation-name: shuffling;
    -moz-animation-name: shuffling;
    -o-animation-name: shuffling;
    animation-name: shuffling;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@-moz-keyframes shuffling {
    0% {-moz-transform: skewX(9deg);}
    10% {-moz-transform: skewX(-8deg);}
    20% {-moz-transform: skewX(7deg);}
    30% {-moz-transform: skewX(-6deg);}
    40% {-moz-transform: skewX(5deg);}
    50% {-moz-transform: skewX(-4deg);}
    60% {-moz-transform: skewX(3deg);}
    70% {-moz-transform: skewX(-2deg);}
    80% {-moz-transform: skewX(1deg);}
    90% {-moz-transform: skewX(0deg);}
    100% {-moz-transform: skewX(0deg);}
}
@-o-keyframes shuffling {
    0% {-o-transform: skewX(9deg);}
    10% {-o-transform: skewX(-8deg);}
    20% {-o-transform: skewX(7deg);}
    30% {-o-transform: skewX(-6deg);}
    40% {-o-transform: skewX(5deg);}
    50% {-o-transform: skewX(-4deg);}
    60% {-o-transform: skewX(3deg);}
    70% {-o-transform: skewX(-2deg);}
    80% {-o-transform: skewX(1deg);}
    90% {-o-transform: skewX(0deg);}
    100% {-o-transform: skewX(0deg);}
}
@-webkit-keyframes shuffling {
    0% {-webkit-transform: skewX(9deg);}
    10% {-webkit-transform: skewX(-8deg);}
    20% {-webkit-transform: skewX(7deg);}
    30% {-webkit-transform: skewX(-6deg);}
    40% {-webkit-transform: skewX(5deg);}
    50% {-webkit-transform: skewX(-4deg);}
    60% {-webkit-transform: skewX(3deg);}
    70% {-webkit-transform: skewX(-2deg);}
    80% {-webkit-transform: skewX(1deg);}
    90% {-webkit-transform: skewX(0deg);}
    100% {-webkit-transform: skewX(0deg);}
}
@keyframes shuffling {
    0% {transform: skewX(9deg);}
    10% {transform: skewX(-8deg);}
    20% {transform: skewX(7deg);}
    30% {transform: skewX(-6deg);}
    40% {transform: skewX(5deg);}
    50% {transform: skewX(-4deg);}
    60% {transform: skewX(3deg);}
    70% {transform: skewX(-2deg);}
    80% {transform: skewX(1deg);}
    90% {transform: skewX(0deg);}
    100% {transform: skewX(0deg);}
}

footer{
    background-color: #b3b3b3;
    padding: 5%;
    text-align: center;
}

footer a{
    color: #fff;
}