@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Asap+Condensed:600');



/*@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
*/



/*additional reset
---------------------------------------------------*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

html {
  overflow-x: hidden!important;
  height: 100%!important;
}


body.safari #content, body.safari #footer {/*サファリでリンク先から戻った時文字が拡大する対応*/
    -webkit-text-size-adjust: 100%;
    position:relative;
}

.floating_bnr{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:100;
    opacity: 0;
  visibility: hidden;
  transition: .3s;
}
.floating_bnr:hover{
    opacity:0.8;
}
.floating_bnr img{
    max-width:100%;
}
.active{
  opacity: 1;
  visibility: visible;
}
/** link **/

a:link {
    color: #1c7fbd;
	text-decoration: underline;
}

a:visited {
    color: #1c7fbd;
}

a:hover,
a:active {
	text-decoration: none;
}
.taC{
    text-align: center;
}
.caution_txt{
    text-align:right;
    font-size:0.7em;
    color: #999;
}
.caution_txt2{
    text-align:right;
    font-size:0.7em;
    color: #999;
	margin-top: 3%;
}

.caution_txt3{
    text-align:right;
    font-size:0.7em;
	margin-top: 3%;
}

.footer a {
    color: #999!important;
}
/*初期設定
----------------------------------------------------*/
#wrapper{
	width: 100%;
	padding: 0 0 0 0;
	overflow: hidden;
	color: #222;
	background: #fff;
}


.fcY {
    color: #dba728;
}

#content {
	margin:0 auto;
	width: 650px;
	text-align: left;
	background-color: #fff;
}

.content-main{
	/*width: 700px;*/
}

img.pics {
	max-width: 100%;
}


.ie8 img{
	width: auto;
}


/*clearfix*/
.clearfix2 {
  clear: both;
  zoom: 1;
}

.clearfix3:after {
  content: "";
  display: block;
  clear: both;
}
/*.buruburu {
    animation: hurueru .2s  infinite;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) }
    25% {transform: translate(2px, 0px)}
    50% {transform: translate(0px, 0spx)}
    75% {transform: translate(0px, 2px) }
    100% {transform: translate(0px, 0px) }
}*/
/*layout
----------------------------------------------------*/

#header{
	height: 85px;
	border-bottom: 1px solid #eee;
 position: relative;
}



.brand{
	position: absolute;
	top:20%;
	display: block;
	width: 100%;
	font-family: 'Asap Condensed', sans-serif;
	color: #222;
	font-size: 40px;
	text-align: center;
}

h1{
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3125;
padding: 20px 0;
}



h2{
	padding:10px 0;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 20px;
	color: #e98b66;
}

.title1{border-bottom: 3px solid #988ffc;}
.title2{border-bottom: 3px solid #e98b66;}
.title3{border-bottom: 3px solid #988ffc;}
.title4{border-bottom: 3px solid #988ffc;}

h3{
	padding:10px 0;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 10px;
	color: #e98b66;
}

.review-title{
	/* border-bottom: 2px solid #ecaacc;*/
	 text-align: center;
	/* background-color: #ecaacc;*/
	 color: #ffffff;
	 margin: 0;
	background-color: #ef9eaf;
    color: #fff;
	border: solid 2px #972a64;
}
.review-title a{
	color: #972a64;
}

p{
	margin-bottom: 10px;
	word-wrap: break-word;
}

.pics{
	margin-bottom: 10px;
}

.fcP{
    color:#988ffc;
}
.ttl{
    text-align: center;
}
.table-wrap table img{
   max-width: 100%;
}
.wrighter_box{
    padding: 10px 2% 5px;
    background: #eceafc;
    margin-bottom: 20px;
}
.wrighter{
    width: 100%;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

}
.wrighter p:first-child{
    width: 25%;

}
.wrighter p:last-child{
    width: 70%;

}

.fwB{
    font-weight: bold;
}

.mt20{
	margin-top: 20px;
}

.marker-yellow{
 background: linear-gradient(transparent 0%, #fff799 0%);
 font-weight: bold;
border-radius:6px;
}

.ranking-paragraph{
  display: none;
}

figure{
	margin-bottom: 20px;
}
figcaption{
	font-size: .8em;
	color: #999;
	text-align: center;
}
.btn{
    width:50%;
    height:50px;
    line-height:50px;
    margin: 0 auto 50px;
}
.btn a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background: linear-gradient(to right, #d06086 0%, #70529c 100%);
    text-align:center;
    color:#FFFFFF;
    font-size:20px;
    font-style:oblique;
    box-shadow: 3px 3px 0px 0px #421c79;
    border-radius: 5px;
}

.review{
	border-right: solid 2px #972a64;
	border-bottom: solid 2px #972a64;
	border-left: solid 2px #972a64;
	margin-bottom: 20px;
	padding: 30px 30px 0px 30px;
	background-color: #fff;
}

figure{
	text-align: center;
}


.ranking-nomal{
	font-size: 0.8rem;
	color: #222;

}
.txt_bg{
	background: linear-gradient(135deg, #ef9eaf 0%, #d06086 100%);
	padding: 20px 15px;
}
.txt_bg_inner{
	background-color: #fff;
	padding: 4% 3% 3%;
    border-radius: 10px;
}
.bg_o{
	background-color: #e98b66;
	color: #fff;
	width: 100%;
	display: block;
	padding: 1% 0;
	margin-bottom: 1%;
}
.best10{
	margin-top: 5%;
	text-align: center;
	color: #000;
	font-size: 1.8em;
}
	
@media only screen and (max-width:839px){
    .wrighter p:last-child{
        font-size: 0.7em;

    }
    .ttl{
        text-align: center;
        font-size: 1em;
    }
    .btn{
        width:80%;
        height:50px;
        line-height:50px;
        margin: 0 auto 50px;
    }
}
.box-voice{
	display: flex;
}

.gray-box{
	/*border: 1px solid #eee;
	background: #f9f9f9;*/
	padding: 1em;
	color: #555;
	margin-bottom: 20px;
	word-wrap: break-word;
	font-size: .90em;
}
.gray-box{
	font-weight:bold;
}
.gray-box p, .gray-box figure{
	margin-bottom: 0px;
}

.gray-box a{
	display: inline-block;
	text-decoration: none;
	border: none;
	padding: .5em 1em;
	background: #287ab7;
	border-radius: 10px;
	border: 2px solid #0981b5;
	color: #015281;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.2;
    text-shadow:
    0 0 25px #edf8ff,
    0 0 20px #edf8ff,
    0 0 0.40px #edf8ff;
    text-align: center;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b7deed+0,71ceef+50,21b4e2+51,b7deed+100;Shape+1+Style */
    background: #b7deed; /* Old browsers */
    background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */
}
.gray-box_orange a {
    display: inline-block;
    text-decoration: none;
    border: none;
    padding: .5em 1em;
    border-radius: 10px;
    border: 2px solid #ff7a1d;
    color: #f56c0d;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 0 25px #fff4ed, 0 0 20px #fff4ed, 0 0 0.4px #fff4ed;
    text-align: center;
    background: #b7deed;
    background: linear-gradient(to bottom, #edd2b7 0%,#ffe1b3 50%,#f3a76f 51%,#edd7b7 100%);
    background: -webkit-linear-gradient(to bottom, #edd2b7 0%,#ffe1b3 50%,#f3a76f 51%,#edd7b7 100%);
    background: -moz-linear-gradient(to bottom, #edd2b7 0%,#ffe1b3 50%,#f3a76f 51%,#edd7b7 100%);
}
.gray-box_green a {
    display: inline-block;
    text-decoration: none;
    border: none;
    padding: .5em 1em;
    background: #287ab7;
    border-radius: 10px;
    border: 2px solid #01811e;
    color: #01811e;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 0 25px #edffee, 0 0 20px #edffee, 0 0 0.4px #edffee;
    text-align: center;
    background: #b7deed;
    background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%);
    background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%);
    background: linear-gradient(to bottom, #dfffe1 0%,#71ef7b 50%,#54e43b 51%,#b7edbb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );
}
.compare-box{
	font-size: 18px;
	line-height: 30px;
}
.compare-box p{
	display: inline-flex;
	flex-wrap:wrap;
}
.compare-box span{
	word-break: keep-all;
}


.user-name{
	color: #fea3cc;
}

#content a.cv-link:link,
#content a.cv-link:visited,
#content a.cv-link:hover,
#content a.cv-link:active
{
	font-size:24px;
	color: #13b5b1;
	font-weight: bold;
}

ul,li{
	list-style: disc;
}


ul.points{
	border:1px solid #eee;
	background: #f9f9f9;
	margin:0px 0 10px;
	padding: 1em 1em 1em 2em;
	font-size: .9em;
}

/*table style*/

.table-blue{
	border:1px solid #ccc;
}
.table-blue p{margin: 0;}
.table-blue th{
	vertical-align: middle;
    background:#e03b6f;
	color: #fff;
	font-weight:bold;
	padding:10px;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
.table-blue td{
	vertical-align: middle;
	line-height:1.3;
	background:#fff;
	padding:0.4em 0.2em;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	}

.post-date{
	color: #aaa;
	padding: .5em;
	font-size: 12px;
}


.customer-voice{
	padding: 16px;
	background: #ffefe9;
	margin-bottom: 20px;
}



/*SNS指定*/
.sns a:link,
.sns a:visited,
.sns a:hover,
.sns a:active {
	color: #fff;
	text-decoration: none;
	border-bottom: none;
}

.sns ul{
	display: flex;
	flex-flow: wrap;
	margin: 20px 0;
}
.sns li{
	display: flex;
	min-width: 50px;
	margin-right: 10px;
}

.sns ul li .fa-hatebu:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold;
    font-style: normal;
}

.sns_icon {
	width: 130px;
	height: 40px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: bold;
	padding: 9px 0;
	text-align: center;
	margin-bottom: 10px;
}
.sns_icon a:link,
.sns_icon a:hover,
.sns_icon a:active,
.sns_icon a:visited {
		color: #fff;

}
.sns .vsbl-mb{margin-left: .2em;}

.facebook_back{
	background-color: #305097;
}

.twitter_back{
	background-color: #55acee;
}

.google_back{
	background-color: #db4a39;
}

.hatena_back{
	background-color: #00a4de;
}
.sns_line{width: 130px; height: auto;}



/*----------- スライダー ------------*/


/*画像ブロック*/
#main-gallery{
	width: 100%;
	height: auto;
	position: relative;
  margin-bottom:20px;
}


/*３枚画像の共通設定*/
#slide1,#slide2,#slide3 {
	-webkit-animation-duration: 10s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 10s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
}

/*slide1*/
#slide1 {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
	position: relative;
	width: 100%;
	height: auto;
}

/*slide2*/
#slide2 {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}

/*slide3*/
#slide3 {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}


/*slide1*/
@keyframes slide1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}

/*slide2*/
@keyframes slide2 {
	0% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}

/*slide3*/
@keyframes slide3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}
/*ボタン*/
.btn-box{
	margin:20px auto 40px;
	text-align: center;
	/*width: 300px;*/
}
.btn-box img{
	max-width: 100%;
}

a.btn{
	text-decoration: none;
	display: inline-block;
	border: none;
	width: 100%;
	padding: .8em 1em;
	background: #287ab7;
	border-radius: 10px;
	border: 2px solid #0981b5;
	color: #00479d;
	font-size: 1.2em;
	font-weight: 700;
text-shadow:
0 0 25px #edf8ff,
0 0 20px #edf8ff,
0 0 0.40px #edf8ff;
	text-align: center;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b7deed+0,71ceef+50,21b4e2+51,b7deed+100;Shape+1+Style */
background: #b7deed; /* Old browsers */
background: -moz-linear-gradient(top, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b7deed 0%,#71ceef 50%,#21b4e2 51%,#b7deed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 ); /* IE6-9 */
}

.btn-box a:hover,
.btn-box a:active{
	opacity: .7;
	transition: 1s;
}

a.cvn{
	display: block;
	position: relative;
	/*padding-left: 20px;*/
}
/*.arw{
	display: block;
	position: absolute;
	top:40px;
	left:-20px;
	-webkit-animation: arwmove 1.2s infinite;
	animation: arwmove 1.2s infinite;
	z-index: 10;
	width: 76px;
}*/

img.btn{
	-webkit-animation: btnmove 2s infinite;
	animation: btnmove 2s infinite;
	z-index: 5;
}

@-webkit-keyframes arwmove {
	0% {left:-50px;}
	40% {left:-20px;}
	100% {left:-50px;}
}

@-webkit-keyframes btnmove {
	0% {transform: scale(1.0);}
	40% {transform: scale(1.05);}
	100% {transform: scale(1.0);}
}

@keyframes arwmove {
	0% {left:-50px;}
	40% {left:-20px;}
	100% {left:-50px;}
}

@keyframes btnmove {
	0% {transform: scale(1.0);}
	40% {transform: scale(1.05);}
	100% {transform: scale(1.0);}
}


/*共通パーツ*/
.ref{
	font-size: .8em;
	color: #999;
}
#content .mt40{
	margin-top: 40px;
}
#content .mt30{
	margin-top: 30px;
}
#content .mt20{
	margin-top: 20px;
}
#content .mt10{
	margin-top: 10px;
}
.mb20{margin-bottom: 20px;}
.pr10{padding-right: 10px;}
.ml20{margin-left: 20px;}

#content .pb30{padding-bottom: 30px;}
#content .tac{
	text-align: center;
}
#content .tar{
	text-align: right;
}

#content .red{
    color: #ff4107;
	font-weight: bold;
}

#content .annotation {
    font-size: 0.7em;
}

#content .light-pink{
	color: #fcccdf;
}
#content .pink{
	color: #fcccdf;
}

.blue{
	color: #0066ff;
}
.marker{
	background: linear-gradient(transparent 0%, #fdfb70 0%);
	color:#ff4433;
	font-size: 18px;
	font-weight: bold;
}

#content .uline{
	text-decoration: underline;
}

#content .black{
	color: #000;
	font-weight: bold;
}

.green{
	color: #009944;
}
.smaller{font-size: .8em;}

.gray{color: #ddd}

#content .wavy { background:url(../img/wavy.png) bottom repeat-x; }

#content .bld{
	font-weight: bold;
}
.tx-m{font-size: 14px;}
#content .tx-s{
	font-size: 12px;
}

.tx-l{font-size: 18px;}

#content .tx-19{font-size: 19px;}
#content .tx-24{font-size: 24px;}

.right{float:right;}

.show-sp{display: none;}
.show-br-sp{display: none;}

.blinking{
    -webkit-animation:0.5s linear 0s alternate none infinite running blink;
    -moz-animation:0.5s linear 0s alternate none infinite running blink;
    animation:0.5s linear 0s alternate none infinite running blink;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink{
    0% {opacity:0;}
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes blink{
    0% {opacity:0;}
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}


.block-voice{
	margin:20px 0;
	padding: 30px 20px 20px 30px;

	background: #fefaf2 url(../img/quote.png) no-repeat 10px 10px;
	/*border: 1px solid #f2af29;*/
}

#footer a:link,
#footer a:hover,
#footer a:visited,
#footer a:active
{
	color: #fff;
}

#content .ref{font-size: 12px;}/*出典用*/
#content figcaption.ref a:link,
#content figcaption a:link,
#content figcaption a:hover,
#content figcaption a:active
{color: #666; text-decoration: underline;}





/*footer*/
#footer{
	padding: 30px 10px 0px;
}


#footer p{
	text-align: center;
	color: #999;
	line-height: 1.5;
	font-size:12px;
}

#footer .tx-ss{
	font-size: 11px;
}


/*レスポンシブ用*/

/*@media only screen and (min-width:840px){*//*PC表示で反映させる設定*/
@media only screen and (min-width:840px){/*PC表示で反映させる設定*/
	.box-voice img{
		margin-right: 20px;
	}
	.box-voice p{margin-top: 20px;}
}

@media only screen and (max-width:999px){/*コンテンツ幅の調整*/
	#content{width: 100%;
}

}

/*@media only screen and (max-width:839px){*//*スマホ表示で反映させる設定*/
@media only screen and (max-width:839px){/*スマホ表示で反映させる設定*/
	.content-main{width: 100%;}
	img.pics{width: 100%; height: auto;}
	.header-inner{width: 100%}
	h1{font-size: 20px;}
	h2{font-size: 22.5px;}
	h3{font-style: 17px;}
	.sns{display: none;}
	.box-voice{
	flex-direction: column;
	}
	.table-blue{width: 650px;}
	.table-wrap{
	width: 100%;
	overflow:auto;
	overflow-x:hidden;
	}

	.show-sp{display: block;}
}


.no1_linkbtn{
    display: none;
}

@media only screen and (max-width:499px){/*ボタンの改行を調整*/
	.show-br-sp{display: inline-block;}
	.gray-box a,.gray-box_orange a,.gray-box_green a{width: 100%;}

}

.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.arrow1::before{
left: 260px;
width: 21px;
height: 2px;
background: #ffffff;
	transition: all 0.8s ease;
}
.arrow1::after{
left: 260px;
width: 18px;
height: 18px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
	transition: all 0.8s ease;
}
.arrow1:hover::before{
left: 260px;
width: 21px;
height: 2px;
background: #2FAFB1;
	transition: all 0.8s ease;
}
.arrow1:hover::after{
left: 260px;
width: 18px;
height: 18px;
border-top: 2px solid #2FAFB1;
border-right: 2px solid #2FAFB1;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
	transition: all 0.8s ease;
}
@media only screen and (max-width:839px){
	.best10 {
		font-size: 1.4em;
	}
	.no1_linkbtn{
        display: block;
	position: fixed;
	right:0;
	bottom: 0;
	z-index: 5000;
	    width:100%;
}
    .no1_linkbtn img{
        width: 100%;
    }
.arrow{
position: relative;
display: inline-block;
padding: 0 0 0 16px;
color: #000;
vertical-align: middle;
text-decoration: none;
font-size: 15px;
}
.arrow::before,
.arrow::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.arrow1::before{
left: 140px;
width: 14px;
height: 2px;
background: #ffffff;
	transition: all 0.8s ease;
}
.arrow1::after{
left: 140px;
width: 12px;
height: 12px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
	transition: all 0.8s ease;
}
.arrow1:hover::before{
left: 140px;
width: 14px;
height: 2px;
background: #ffffff;
	transition: all 0.8s ease;
}
.arrow1:hover::after{
left: 140px;
width: 12px;
height: 12px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
	transition: all 0.8s ease;
}
.ranking-paragraph{
  display: block;
}

}

/*form*/
.searchform {
    display: inline-block;
    text-align: left;
}
.searchtable {
    border-collapse: collapse;
    font-size: 15px;
    line-height: 25px;
    border: none !important;
	 border: 1px solid #cfcfcf;
}

.serchtable-border{
	  border-top: 1px solid #cfcfcf;
	  border-right: 1px solid #cfcfcf;
	  border-bottom: 1px solid #cfcfcf;
	  padding: 10px;
}



.searchbox {
    font-size: 15px;
    padding: 5px;
    border: 1px solid #DDD;
    border-radius: 5px;
    width: 80%;
}
form input {
    vertical-align: middle;
}

.thisinfotable td, .thisinfotable th {
    font-size: 12px;
    line-height: 20px;
}
.thisinfotable td, .thisinfotable th {
    border: 1px solid #cfcfcf;
    font-size: 15px;
    line-height: 20px;
	padding: 10px;
}


.border-none{
	border-style: none;
}
.searchtable .searchtabletitle {
    background-color: #f6f6f6;
    min-width: 120px;
	border:1px solid #cfcfcf;
	padding: 10px;
}
.searchtable .searchbutton {
    background-color: #fb8bc6;
    border: none;
    color: white;
    padding: 10px 50px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    line-height: 15px;
    margin-top: 20px;
}
.searchtable .searchcenter {
    text-align: center;
}
.objecttable tr, td {
    border: none;
}

.searchordercontainer dd{
    display: inline-block;
    margin-left: 20px;
    margin-top:0px;
    line-height: 20px;
}
.searchordercontainer a{
    text-decoration: none;
}

.objecttable{
    border:2px solid #ccc;
    text-align:center;
    margin: auto auto 50px auto;
    width: 95%;
}
.objecttable tr, td{
    border:none;
    padding: 3px;
}
.objecttitle{
    font-size:24px;
    font-weight:bold;
    text-align: center;
    width: 95%;
    margin: 0 auto;
    background-color: #bdb8fc;
    border: 1px solid #cfcfcf;
	border-bottom: none;
    color: #fff;
}
.objectimg p{
    text-align: center;
}
.objectmaintext {
    font-size:20px;
    font-weight: bold;
}
.thisinfotable {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
.thisinfotable td th{
    border: 1px solid #cfcfcf;
    font-size: 15px;
    line-height: 20px;
}


.oflBtn{
    width: 65%;
    margin: 0 auto;
}

.fontsizenormal {
    font-size:16px;
}

.btn_search{
	width: 95%;
	margin: 0 auto;
	text-align: center;
}
@media screen and (max-width: 575px) {
    .fontsizenormal {
        font-size:0.8em;
    }
}

.searchordercontainer dd{
    display: inline-block;
    margin-left: 20px;
    margin-top:0px;
    line-height: 20px;
}
.searchordercontainer a{
    text-decoration: none;
}
@media (max-width: 620px){
	.kaso_pro_tbl table {
		width: 95%;
		margin: 5% auto;
	}
	/*ランキング表*/






	
td.txt_only {
	font-size: 1.5rem;
	color: #333333;
	padding: 2.5% 0;
}
span.ex, span.go, span.so, span.ba {
	font-weight: normal;
	line-height: 70px;
}
span.ex {
	font-size: 5rem;
	color: #f8525d;
}
span.go {
	font-size: 3.5rem;
	color: #7cd0dd;
}
span.so {
	font-size: 3.2rem;
	color: #f5c132;
}
span.ba {
	font-size: 4rem;
	color: #7a7a7a;
}
span.txt_ex {
	font-weight: bold;
	color: #f8525d;
}
/*.scrollok {
	display: none;
}*/

span.ex, span.go, span.so, span.ba {
		line-height: 50px;
	}
	span.ex {
		font-size: 3.5rem;
	}
	span.go {
		font-size: 2.5rem;
	}
	span.so {
		font-size: 2.2rem;
	}span.ba {
		font-size: 3rem;
	}
	.rankTable table tr th {
		font-size: 1rem;
	}
}

@media (max-width: 620px){




	.scrollok {
		display: block;
		text-align: center;
		color: #0b4685;
		/*position: absolute;*/
		right: 0;
		left: 0;
		background: #edf5fa;
		width: 100%;
		margin: auto;
	}
	span.ex, span.go, span.so, span.ba {
		line-height: 50px;
	}
	span.ex {
		font-size: 2.5rem;
	}
	span.go {
		font-size: 2.5rem;
	}
	span.so {
		font-size: 2.2rem;
	}span.ba {
		font-size: 3rem;
	}
	.rankTable table tr th {
		font-size: 1rem;
	}
}
/*ランキング表*/
.kaso .kaso_pro_tbl th,
.kaso .kaso_pro_tbl td{
	border: 1px solid #cccccc;
	font-size: 1rem;
}
.kaso_pro_tbl table {
	width: 100%;
	margin: 5% auto;
	margin-inline: auto;
    white-space: nowrap;
    font-size: 14px;
}
/*ランキング表*/
.bgY{
	background-color: #fffce5;
}
.rankTable{
width: 100%;
margin-inline: auto;
white-space: nowrap;
font-size: 14px;
}
.rankTable table {
	width: 100%;
	border-collapse: collapse;
    min-width: 1400px;
}

.table-scroll-wrapper {
	overflow-x: auto;
	width: 100%;
	border-radius: 10px 10px 0 0;
  }

span.name {
width: 100%;
}
span.name_img{
	width: 74%;
	display: block;
	margin-left: 13%;
}
.name_img01{
width: 74%;
display: block;
margin-left: 13%;
}

.rank_ttl{
	padding: 0.3%;
	font-size: 1em;
	color: #fff;
	line-height: 1.2;
	font-weight: bold;
	border-bottom: 1px solid #ffffff;
	border-right: 1px dotted #fff;
	background: #d06086;
	text-align: center;
	width: 9%;
	vertical-align: middle;
}

td.bgY {
	padding-top: 10px; /* 上部の余白を調整 */
	text-align: center;
	vertical-align: middle;
	position: relative;
  }
  

  td .crown {
	width: 30px; /* 画像のサイズを調整 */
	height: auto;
	display: block;
	margin: 0 auto; /* 画像を中央に配置 */
  }
  
  /* コンテンツ（リンク）をbgYの<td>内に表示 */
  td.bgY .content {
	display: block; /* ブロック要素にして、コンテンツを表示 */
  }
  
.table_flex {
display: flex;
height: 74px;
width: 174px;
align-items: center;
padding-bottom: 2%;
}
.table_flex02 {
	display: flex;
	height: 88px;
	width: 174px;
	align-items: center;
	padding-bottom: 2%;
	}
	.table_flex03 {
		display: flex;
		height: 103px;
		width: 174px;
		align-items: center;
		padding-bottom: 2%;
		}
		.rankTable th{
			left: 0;
		}
.rankTable td:last-child {
border-right: none;
}
.rankTable tr:last-child th, .rankTable tr:last-child td{
border-bottom: none;
}
/* .rankTable th img {
height: 90px;
} */
.rankTable th a {
color: #1c7fbd;
}
.rankTable .ex {
color: #ff0000;
font-size: 1.6em;
}
.rankTable .go {
color: #aadaf6;
font-size: 1.6em;
}
.rankTable .so {
color: #f5c132;
font-size: 1.6em;
}
.rankTable .bad {
    font-size: 1.6em;
}
.site_btn01{
display: block;
width: 90%;
margin: 5px auto;
line-height: 1.2;
padding: 5px;
border-radius: 5px;
background-color: #ea4283;
box-shadow: 2px 2px 0 #cb1751;
color: #fff;
font-weight: bold;
}
.site_btn02{
display: block;
width: 100%;
margin: 5px auto;
line-height: 1.2;
padding: 5px;
border-radius: 5px;
background-color: #0c9c07;
box-shadow: 2px 2px 0 #0a6c06;
color: #fff;
font-weight: bold;
}
@media screen and (max-width:760px){
.rankTable {
	overflow-x: scroll;
}
.rankTable table{
    width: 1200px;
	overflow-x: scroll;
	min-width: 1400px; /* もしくは1400pxなど大きめに調整 */
	border-collapse: separate;
	border-spacing: 0; /* 罫線がダブらないように */
  }
}

span.name_img01 {
    width: 53%;
    margin-left: 25%;
}
span.name_img {
    width: 53%;
    margin-left: 25%;
}
}
.site_btn02{
display: block;
width: 100%;
margin: 5px auto;
line-height: 1.2;
padding: 5px;
border-radius: 5px;
background-color: #0c9c07;
box-shadow: 2px 2px 0 #0a6c06;
color: #fff;
font-weight: bold;
}
@media (min-width: 620px){
	.kaso_pro_tbl table {
		width: 100%;
		margin: 5% auto;
	}
	
td.txt_only {
	font-size: 1.5rem;
	color: #333333;
	padding: 2.5% 0;
}
span.ex, span.go, span.so, span.ba {
	font-weight: normal;
	line-height: 70px;
}
span.ex {
	font-size: 5rem;
	color: #f8525d;
}
span.go {
	font-size: 3.5rem;
	color: #7cd0dd;
}
span.so {
	font-size: 3.2rem;
	color: #f5c132;
}
span.ba {
	font-size: 4rem;
	color: #7a7a7a;
}
span.txt_ex {
	font-weight: bold;
	color: #f8525d;
}
/*.scrollok {
	display: none;
}*/

span.ex, span.go, span.so, span.ba {
		line-height: 50px;
	}
	span.ex {
		font-size: 3.5rem;
	}
	span.go {
		font-size: 2.5rem;
	}
	span.so {
		font-size: 2.2rem;
	}span.ba {
		font-size: 3rem;
	}
	.rankTable table tr th {
		font-size: 1rem;
	}
}







	.renakTable td {
		background: #fff6f1;
	}
	.scrollok {
		display: block;
		text-align: center;
		color: #0b4685;
		/*position: absolute;*/
		right: 0;
		left: 0;
		background: #edf5fa;
		width: 100%;
		margin: auto;
	}
	span.ex, span.go, span.so, span.ba {
		line-height: 20px;
	}
	span.ex {
		font-size: 3.5rem;
	}
	span.go {
		font-size: 2.5rem;
	}
	span.so {
		font-size: 2.2rem;
	}span.ba {
		font-size: 3rem;
	}
	.rankTable table tr th {
		font-size: 0.75rem;
	}

/*ランキング表*/
.kaso .kaso_pro_tbl th,
.kaso .kaso_pro_tbl td{
	border: 1px solid #cccccc;
	font-size: 1rem;
}
.kaso_pro_tbl table {
	width: 100%;
	margin: 5% auto;
}

@media (max-width: 380px){
.rankTable table tr.sp_th th {
  width: calc(100% - 7.9%);
  color: #fff;
}
}

@media (max-width: 330px){
.rankTable table tr.sp_th th {
  width: calc(100% - 14.9%);
}
}
@media (max-width: 620px){
/*search form*/

  .index_search {
    background: #fff;
	margin: 0 auto;
  }
	.search_box {
		/*border: 2px solid #ecaacc;*/
		padding: 5% 0 5%;
	}
  .index_search th {
    border-collapse: collapse;
    border: none;
    color: #464646;
    background-color: #e9e9e9;
    font-weight: bold;
    vertical-align: middle;
    font-size: 16px;
    padding: 5px;
    line-height: 1.4;
	  width: 95%;
	  margin: auto;
    display: block;
	 text-align: center;
  }
  .index_search td {
    border-collapse: collapse;
    border: none;
    vertical-align: middle;
    padding: 5px;
    font-size: 14px;
    width: 100%;
    display: block;
	text-align: center;
  }
  .btn-more {
    background-color: #fafbb2;
    color: #787878;
    margin-left: 50px;
    margin-right: 50px;
    padding: 20px;
    font-size: 1.2em;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #fafbb2;
    cursor: pointer;
  }
  .btn-more::before {
    content: "＋";
  }
  .btn-more.close::before {
    content: "―";
  }
  .dropdown {
    background-color: #ffffff;
  }
  .dropdown ul {
    margin-left: 2em;
  }
  .dropdown ul li {
    list-style-type: disc;
  }
  .spbr label {
    padding: 3px;
    border: none;
  }

.item-price table {
  border: #cccccc 1px solid;
  table-layout: fixed;
  width: 100%;
}

.item-price table th {
  background: #fffae5;
}

.item-price table td {
  background: #ffffff;
}

.point_txt_w_l {
  width: 275px;
}

.point_txt_w_r {
  width: 450px;
  font-size: 16px;
  line-height: 1.5em;
}

.formBtn{
	width: 90%;
		margin: 0 auto;
}


}


@media (min-width: 620px){
  .research_inner {
    padding: 10px;
  }
  .research_inner h4 {
    font-size: 16px;
  }


.index_search {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
}

.index_search th {
  border-collapse: collapse;
  border: #cccccc 1px solid;
  background-color: #f6f6f6;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  font-size: 80%;
  padding: 10px;
  line-height: 1.4;
}

.index_search td {
  border-collapse: collapse;
  border: #cccccc 1px solid;
  text-align: left;
  vertical-align: middle;
  font-size: 80%;
}

.formBtn{
	display: none;
}


}

.tyousa {
    background-color: #f7f7f7;
    padding: 3%;
	margin: 0 auto;
	max-width: 100%;
	font-size: 0.8rem;
}

.tyousa p{
    margin-bottom:0;
        color: #656565;
      font-size: 0.8rem;
}
/*accordion*/

.close {
    display: none;
    margin:0 auto;
}
.OaC_btn {
    display: block;
    margin: 0 auto;
    padding: 1.2%;
    text-decoration: none;
    background: #972a64;
    text-align: center;
    color: #FFFFFF;
    font-size: 20px;
    font-style: oblique;
    box-shadow: 3px 3px 0px 0px #681340;
    border-radius: 5px;
    margin: 30px auto ;
}
.OaC_btn:last-letter{
    font-size:12px;
    vertical-align:middle;
}
.center {
    text-align: center;
}  

section{
    display: block;
}
@media only screen and (max-width: 1640px){
#footer{
	padding: 30px 10px 50px;
}
}
@media only screen and (max-width: 839px){
    .floating_bnr{
    bottom:0px;
    right:0px;
}
.floating_bnr img{
    width:100%;
}
#footer {
    padding: 11px 10px 20px;
}
}
a.btn-radius-solid {
background: linear-gradient(to bottom, #e6d4ff 0%, #9990ff 100%);
    box-shadow: #ccc 4px 5px 5px;
    margin: 5% auto 10% auto;
    line-height: 1.5em;
    height: auto;
    text-decoration: none;
    display: block;
    width: 98%;
    padding: 1.2em 0.3em;
    border-radius: 10px;
    border: 2px solid #ffffff;
    color: #ffffff;
    font-size: 1.3em;
    font-weight: bold;
    text-shadow: 0 0 25px #5547d5;
    text-align: center;
}

details {
  border: 2px solid #ffa0c8;
    border-radius: 10px;
}
details:not(:last-child) {
  margin-bottom: 20px;
}

/**
 * list-style: none; ←デフォルト三角削除（Chrome非対応）
 * cursor: pointer; ←カーソルをポインターに
**/
details summary {
 list-style: none;
    cursor: pointer;
    padding: 10px 3px;
    text-align: center;
    border-radius: 10px 10px 0 0;
    color: #ffffff;
    font-size: 1.1em;
    background: linear-gradient(to top, #ffcde2 0%, #ff66a7 100%);
    font-weight: bold;
}
/**
 * Chrome用のデフォルト三角削除
**/
details summary::-webkit-details-marker {
  display: none;
}
/**
 * Font Awesomeのプラスアイコン使用
**/
details summary::before {
  font-family: FontAwesome;
  content: '\f067';
  margin-right: 20px;
}
/**
 * アコーディオンがオープン時はマイナスアイコンに変更
**/
details[open] summary::before {
  content: '\f068';
}

details p {
  padding: 10px 0;
}
details p, details img, details h3, details a{
	width: 96%!important;
    margin: 0 auto;
    display: block;
}
 .grad-wrap {
  position: relative;
}


 .grad-item {
  position: relative;
  overflow: hidden;
  height: 26px;
  /*隠した状態の高さ*/
}

 .grad-item::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
  content: "";
  z-index: 1;
}

 .grad-trigger {
  display: none;
  /*チェックボックスは常に非表示*/
}

 .grad-trigger:checked~.grad-btn::before {
  content: "閉じる"
    /*チェックされていたら、文言を変更する*/
}

 .grad-trigger:checked~.grad-item {
  height: auto;
  /*チェックされていたら、高さを戻す*/
}

 .grad-trigger:checked~.grad-item::before {
  display: none;
  /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

 #section1 {
  padding: 0 4%;
}
.comments{
    overflow:auto;
    height: 500px;
    border: 3px solid #972a64;
    padding:2%;
	background-color: #fff;
	border-radius: 10px 10px 0 0;
}
.comments2{
    overflow:auto;
    height: 500px;
    border:5px solid #dddddd;
    padding:2%;
	background-color: #fff;
}
.comment_box{
    border-bottom:1px solid #ddd;
        margin-top: 3%;
        padding: 3%;
}
.name{
    font-weight:bold;
    margin-bottom: 0;
}
.date{
    text-align: right;
    color:#60935b;
    margin-bottom: 1%;
    font-size:0.8em;
	font-weight: bold;
}
.date2{
    text-align: right;
    color:#818181;
    margin-bottom: 1%;
    font-size:0.8em;
	font-weight: bold;
}
.icon{
    display: flex;
    margin-bottom: 0;
    align-items: center;
}
.icon img{
    width:50px;
    margin-right:3%;
}
.star{
    color:#ffcc00;
}
.animation{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
}

.keyframe6 {
  animation-name: poyopoyo;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
/* slide */

.slide {
  position: relative;
  margin: 0;
  padding: 0;
}
.slide .item {
  position: relative;
  height: 670px;
}
@media screen and (max-width:699px){
    .slide .item {
  height: 345px;
}
}
.slide .item::before {
  display: block;
  padding-top: 95%;
  content: "";
  position: relative;
  overflow: hidden;
}
.slide .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}
.slide > .slick-list,
.slide > .slick-list > .slick-track,
.slide > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

/* slide-navigation */

.slide-navigation {
  position: relative;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.slide-navigation .item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  width: calc(94%/6);
  height: 100%;
  margin: 0.5%;
  padding: 0;
}
.slide-navigation .item::before {
  display: block;
  padding-top: 70%;
  content: "";
}
.slide-navigation .item img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 100%;
}
.slide-navigation .current::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0.5;
  background: #000;
}
.minitable{
    margin: 0;
    font-size:0.8em;
}
.minitable table{
    border: 5px solid #e98b66;
    width:100%;
	background-color: #fff;
	margin-top: 4%;
}
.minitable th{
    font-weight:bold;
    color:#e98b66;
}
.minitable td{
    padding-left:0;
}
.minitable th,.minitable td{
vertical-align: middle;
    border: none;
	font-weight: bold;
}
.minitable tr{
border-bottom: 2px dotted #ddd;
}

/* 追記 */
.mv {
	max-width: 700px;
	margin: 0 auto;
}
.merihari_frame{
	position: relative;
}
.Fwmax{
	font-size:min(6.4vw,33px);
}
.Fwmax3{
	font-size:min(5.4vw,30px);
}

.ttl{
    left: 0;
    right: 0;
    position: absolute;
    margin-top: -19%;
}
@media (max-width: 768px) {
	.ttl{
		margin-top: -18%;
	}
}
.ttl01{
	background-color:#e98b66 ;
	padding: 1%;
	color: #fff;
}
.subttl{
	font-size:min(5.4vw,33px);
	display: block;
	margin-bottom: 15px;
	line-height: 1.2;
}
.subttl02{
	font-size:min(5.2vw,33px);
display: block;
margin-bottom: 15px;
line-height: 1.2;
}
.fcO{
	color:#e37042 ;
}
.fcG{
	color: #87b382;
}
.mainttl{
	font-size:min(4.4vw,33px);
	line-height: 1.3;
	display: block;
}
.first_txt {
	font-size: 2.3rem;
	font-weight: bold;
	margin-left: 4.5%;
}
.second_txt {
	font-size: 2rem;
	font-weight: bold;
	margin-left: 5%;
}
.third_txt {
	font-size: 2rem;
	font-weight: bold;
	margin-left: 5%;
}
.first_txt2 {
	font-size: 1.6rem;
	font-weight: bold;
	margin-left: -4%;
}
.conent_green {
    position:relative;
	background-color: #e9f3e8;
	padding: 3% 3.5% 0%;
}
/* ミニ比較表 */
.mini_table table,.mini_table2 table{
	width: 80%;
	border-collapse: collapse;
	margin: 10% auto 0;
  }
  
  .mini_table table tr{
	border-bottom: solid 2px #e9f3e8;
  }
  .mini_table2 table tr{
	border-bottom: solid 2px #ffffff;
  }
  
  .mini_table table tr:last-child,.mini_table2 table tr:last-child{
	border-bottom: none;
  }
  
  .mini_table table th, .mini_table2 table th{
	position: relative;
	text-align: left;
	width: 30%;
	background-color: #d06086;
	color: white;
	text-align: center;
	padding: 7.5px 0;
	font-weight: bold;
	vertical-align: middle;
  }
  .mini_table table th:after,.mini_table2 table th:after{
	display: block;
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	top:calc(50% - 10px);
	right:-10px;
	border-left: 10px solid #d06086;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
  }
  .mini_table2 table th:after{
	display: block;
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	top:calc(50% - 10px);
	right:-10px;
	border-left: 10px solid #e98b66;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
  }
  
  .mini_table table td{
	text-align: left;
	width: 70%;
	text-align: center;
	background-color: #fff;
	padding: 7.5px 0;
  }
  .mini_table2 table td{
	text-align: left;
	width: 70%;
	text-align: center;
	background-color: rgb(245, 245, 245);
	padding: 7.5px 0;
  }
  
  
  .btn_to {
	margin: 5% 0;
  }
  .newcolor {
	margin-top: 2.5%;
  }
  .jituryoku {
	max-width: 90%;
	margin: 13% auto -15%;
  }
  .jituryoku_inner_bg {
	background-color: #fff;
	max-width: 100%;
	margin: 0 auto;
	padding: 17% 5%;
  }
   .jituryoku_inner_bg2 {
	background-color: #fff;
	max-width: 100%;
	margin: 0 auto;
	padding: 17% 5% 10%;
  } 
  .jituryoku_inner_bg3 {
	background-color: #fff;
	max-width: 100%;
	margin: 0 auto;
	padding: 8% 5% 5%;
  }
.point_viage_minttl {
	color: #333;
	font-weight: bold;
	font-size: 1.65rem;
	margin-bottom: 3%;
	line-height: 1.4;
}
.point_viage_minttl2 {
	color: #3eb0f1;
	font-weight: bold;
	font-size: 1.65rem;
	margin-bottom: 3%;
	line-height: 1.4;
}
.viage_ari {
	max-width: 100%;
	margin-top: 5%;
}
.runa_bg_orange {
	background-color: #ffedc7;
	padding: 3% 3.5% 2%;
}
.LUNA_new {
	margin-top: 2%;
}
.ninki_ttl {
	margin: 10% auto 5%;
}
.viage_ninki_ttl {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-bottom: 1%;
	margin-bottom: 10px;
}
.viage_ninki_ttl>img{
	width: 26%;
	margin-right: 2%;
}
.sono_reason {
	font-weight: bold;
	font-size: 1.7rem;
	line-height: 1;
	position: relative;
	top: 3px;
}
.kaihatu {
	max-width: 95%;
	margin: 10% auto -12%;
}
.gray_bg {
	background-color: #f0f0f0;
    padding: 35px 3.5% 10%;
    margin-top: -15px;
}
.osusume_pt {
	max-width: 142px;
	margin-top: 6%;
}
.osusume_txt {
	font-weight: bold;
	font-size: 1.5rem;
	margin-bottom: 3%;
}
.function {
	max-width: 700px;
    padding: 0 30px;
    margin: 0 auto;
	position: absolute;
	top: 40%;
	left:0;
}
.kome {
	font-size: 2px;
}
.mv video {
	max-width: 100%;
}

@media (max-width: 750px){
    .jituryoku_inner_bg {
		background-color: #fff;
		max-width: 100%;
		margin: 0 auto;
		padding: 17% 3% 2%;
	  }
	.function {
		max-width: 100%;
		padding: 0;
		margin: 0 auto;
		top: 36.5%;
	}
	.function img{
		padding: 0 5px;
	}
	.slider01,.slider01-1 {
		margin-bottom: 2%;
	}
	.mv {
		max-width: 100%;
		padding: 0;
	}
	.point_viage_minttl {
		font-size: 1.3rem;
		margin-bottom: 3%;
		line-height: 1.4;
	}
	.mini_table table,.mini_table2 table{
		width: 100%;
		margin: 10% auto 0;
	}
	.sono_reason{
		font-size: 1.5rem;
	}
	.jituryoku {
		max-width: 100%;
	}
	.kaihatu {
		max-width: 100%;
		margin: 10% auto -12%;
	}
	.third_txt {
		font-size: 1.5rem;
	}
	.first_txt2 {
		font-size: 1.5rem;
		margin-left: -4%;
	}
	.second_txt {
		font-size: 1.5rem;
	}
	.caution_txt2{
		margin-right: 4%;
	}
	.review {
		margin-bottom: 20px;
		padding: 30px 16px 0px 16px;
		background-color: #fff;
	}
	.tyousa {
		margin: 0 auto;
		max-width: 92%;
	}
	.tyousa p{
		  font-size: 0.7rem;
	}
	.kome {
		font-size: 10px;
	}
}
.merihari_bg {
	background-color: #fff;
	padding: 8% 3% 5%;
	border-radius: 10px;
	margin: 8% 0 0%;
}
.merihari_ttl {
	max-width: 98%;
	margin: 0 auto 4%;
	font-weight: bold;
}
img {
	width: 100%;
}
@media (max-width: 768px) { 
.merihari_ttl {
	max-width: 90%;
	margin: 0 auto 7%;
}
.mini_table table td {
    
    font-size: 14px;
}
  .mini_table2 table td{
	font-size: 14px;
  }
}
/* 改行レスポンシブ */ 
@media (min-width: 768px) { 
    .br-sp {  
        display: none;  
    }  
}      
@media (max-width: 768px) { 
    .br-pc { display:none; }  
} 


/* 追加分 */
.viage_cp{
	margin-top: 80px;
}

.crown {
	width: 25%;
    padding: 0;
    margin-bottom: 4%;
}
@media (max-width: 768px) { 
    .crown {
        margin-top: -3px;
    }
} 

/* accordion */
.grad-wrap {
	position: relative;
}

.grad-btn {
	z-index: 2;
	position: absolute;
	right: 0;
	bottom: -35px;
	left: 0;
	width: 50%;
	margin: auto;
	padding: 1.2%;
	border-radius: 5px;
	background: #972a64;
	color: #fff;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	transition: .2s ease;
	box-shadow: 3px 3px 0px 0px #681340;
	height: 45px;
	font-style: oblique;
  }

.grad-btn::before {
	content: "続きを読む▼";
}

.grad-item::before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 90px;
	/*グラデーションで隠す高さ*/
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
	background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.9) 50%, #fff 100%);
	content: "";
	z-index: 1;
}

.grad-trigger {
	display: none;
	/*チェックボックスは常に非表示*/
  }
  
   .grad-trigger:checked~.grad-btn::before {
	content: "閉じる▲"
	  /*チェックされていたら、文言を変更する*/
  }
  
   .grad-trigger:checked~.grad-item {
	height: auto;
	/*チェックされていたら、高さを戻す*/
  }
  
   .grad-trigger:checked~.grad-item::before {
	display: none;
	/*チェックされていたら、grad-itemのbeforeを非表示にする*/
  }

  .nana_ttl {
	margin-top: 30px;
  }
  
  .fz_min {
      position: absolute;
      font-size:15px;
  }

  


/*240409*/
*{
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.content_wrapper{
	max-width: 700px;
	margin: 0 auto;
}
.pics{
	border-radius: 10px;
}
.pics:last-child{
	margin-bottom: 0;
}
.fcP{
    color: #d06086;
}
.mv_pr{
    padding-right: 10px;
}
.best10{
	margin-bottom: 0;
}
.rankTable{
	width: 94%;
	margin: 0 auto;
	border-radius: 10px 10px 0 0;
	box-shadow: 5px 5px 0 #ddd;
}
.rankTable .crown{
	object-fit: contain;
}
.table-wrap{
	margin-top: 20px;
}
#VIAGE .top{
	position: relative;
	background-image: url('../img/product_ttl_top.png');
	background-position: top center;
	background-size: cover;
	padding: 20px 0 30px;
	text-align: center;
}
#VIAGE .top .crown{
	width: 10%;
	margin: 0 auto;
	display: block;
	margin-bottom: 5px;
}
#VIAGE .top a,
#VIAGE .top span{
	color: #fff;
	font-size: 28px;
	font-weight: 700;
}
#VIAGE .top span{
	margin-right: 5px;
}
#VIAGE .top a{
	text-decoration: none;
}
#VIAGE .top span sup{
	font-size: 10px;
	vertical-align: bottom;
	position: relative;
	top: -6px;
}
#VIAGE .lead{
	/*background: linear-gradient(to right, #d06086 0%, #70529c 100%);*/
	padding: 0px 15px 10px;
}
#VIAGE .lead p{
	color: #fff;
	text-align: justify;
	margin: 0 auto;
}
#VIAGE .lead p a{
	color: #fff;
}
.content_pink{
	background-color: #fae2e7;
	padding: 30px 15px;
	margin-top: -15px;
}
.ttl_line{
	display: block;
	width: 84%;
	margin: 0 auto 15px;
}
.slide-navigation{
	margin-top: 5px;
}
.slick-slide{
	border-radius: 10px;
	overflow: hidden;
}
.red{
	color: #d06086;
	font-weight: bold;
}
.yellow{
	color: #ffffa0;
	font-weight: bold;
}
.mini_table table{
	border-radius: 10px;
	overflow: hidden;
}
.caution_txt2{
	color: #777;
}

.rew_ttl{
	margin: 20px 0 10px;
}
.mid_ttl, .mid_ttl2, .mid_ttl3{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 25px;
}
.mid_ttl p{
	display: block;
	font-size: min(5.4vw, 33px);
    line-height: 1.2;
	color: #d06086;
	font-weight: 600;
	text-align: center;
	margin: 0 20px;
}
.mid_ttl2 p{
	display: block;
	font-size: min(5.4vw, 33px);
    line-height: 1.2;
	color: #8489c3;
	font-weight: 600;
	text-align: center;
	margin: 0 20px;
}
.mid_ttl3 p{
	display: block;
	font-size: min(5.4vw, 33px);
    line-height: 1.2;
	color: #3681ab;
	font-weight: 600;
	text-align: center;
	margin: 0 20px;
}
.mid_ttl img, .mid_ttl2 img, .mid_ttl3 img{
	width: 15px;
}
.jituryoku_ttl{
	position: relative;
	top: 50px;
	margin-top: -40px;
}
.point_viage{
	text-align: center;
	margin: 20px auto 15px;
}
.point_viage span{
	border-radius: 100px;
	background-color: #d06086;
	color: #fff;
	padding: 7px 30px 5px;
	font-weight: bold;
	position: relative;
}
.point_viage span::before{
	content: '';
	border: 10px solid transparent;
	border-top: 10px solid #d06086;
	position: absolute;
	top: 100%;
	left: 41%;
}
.margin_adj{
	margin-bottom: 15px;
}

#LUNA{
	margin-top: 40px;
}
#LUNA .top{
	position: relative;
	background-image: url('../img/product_ttl_top02.png');
	background-position: top center;
    background-size: cover;
    padding: 35px 0;
	text-align: center;
}
#LUNA .top .crown{
	width: 10%;
	margin: 0 auto;
	display: block;
	margin-bottom: 5px;
}
#LUNA .top a{
	color: #fff;
	font-size: 28px;
	font-weight: 700;
}
#LUNA .top a{
	text-decoration: none;
}
.runa_bg_orange{
    padding-top: 40px;
    margin-top: -20px;
	background-color: #dfeef5;
}
#LUNA .lead{
	background: linear-gradient(to right, #cdc6e7 0%, #3681ab 100%);
	padding: 0px 15px 10px;
}
#LUNA .ttl_line{
	margin-bottom: 0;
}
.kaihatu_ttl{
    position: relative;
    top: 50px;
    margin-top: -40px;
}
.point_viage.luna span{
	background-color: #3681ab;
}
.point_viage.luna span::before{
	border-top: 10px solid #3681ab;
}

.runa_bg_orange .mini_table table th,
.runa_bg_orange .mini_table2 table th{
	background-color: #989bbe;
}
.runa_bg_orange .mini_table table th:after,
.runa_bg_orange .mini_table2 table th:after{
	border-left-color: #989bbe;
}
.runa_bg_orange .comments{
	border-color: #3681ab;
}
.runa_bg_orange .OaC_btn{
	background-color: #989bbe;
	box-shadow: 3px 3px 0px 0px #4a4e74;
}
.runa_bg_orange .review-title{
	background-color: #aed7ed;
	border: solid 2px #3681ab;
}
.runa_bg_orange .review-title a{
	color: #3681ab;
}
.runa_bg_orange .review{
	border: solid 2px #3681ab;
	border-top: none;
}
#third{
	margin-top: 40px;
}
#third .top{
	position: relative;
	background-image: url('../img/product_ttl_top03.png');
	background-position: top center;
    background-size: cover;
    padding: 35px 0;
    text-align: center;
}
#third .top p{
	color: #57524a;
	font-size: 24px;
	font-weight: 700;
	margin: 0;
}
#third .top span{
	margin-right: 5px;
}
#third .top a{
	text-decoration: none;
}
#third .top span sup{
	font-size: 10px;
	vertical-align: bottom;
	position: relative;
	top: -6px;
}
#third .lead{
	background: linear-gradient(to right, #e8e4d9 0%, #beb9b3 100%);
	padding: 0px 15px 10px;
}
.gray_bg h2{
	color: #57524a;
}
.gray_bg .title2{
	border-bottom-color: #57524a;
}
.gray_bg .mini_table table th,
.gray_bg .mini_table2 table th{
	background-color: #908c86;
}
.gray_bg .mini_table2 table th:after{
	border-left-color: #908c86;
}
.gray_bg .point_viage span{
	background-color: #908c86;
}
.gray_bg .point_viage span::before{
	border-top-color: #908c86;;
}

@media only screen and (min-width:840px){
    #VIAGE .top{
        padding: 60px 0;
    }
    #LUNA .top,
    #third .top{
        padding: 80px 0;
    }
    #VIAGE .top .crown{
        width: 6%;
    }
    #VIAGE .top a,
    #VIAGE .top span,
    #LUNA .top a,
    #third .top p{
        font-size: 36px;
    }
    .content_pink,
    .runa_bg_orange,
    .gray_bg{
        padding-top: 50px;
        margin-top: -30px;
    }
}

/*-------- アコーディオン --------*/
.show_more span {
	display: block;
    margin: 0 auto;
    padding: 2.9% 0 2.2%;
    text-decoration: none;
    background: #d2668b;
    text-align: center;
    color: #FFFFFF;
    font-size: 20px;
    font-style: oblique;
    box-shadow: 3px 3px 0px 0px #ac365f;
    border-radius: 5px;
    margin: 30px auto;
  }
  .show_more {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 15px;
	padding-top: 60px;
	text-align: center;
	line-height: 15px;
	background: linear-gradient(180deg,rgb(255, 255, 255, 0) 0%,#fff 70%);
	cursor: pointer;
	transition: bottom 0.2s;
  }
  .acc_wrapper {
	margin: 20px auto;
  }
.frame {
    margin: 0 0 120px;
}
  .acc_content_wrapper {
	position: relative;
	margin-bottom: 80px;
  }
  
  @media screen and (max-width: 760px){
	  .show_more span {
		  padding: 5% 3% 4%;
	  }
	  .frame {
		margin: 0 0 130px;
	}
  }
  .acc_content {
	height: 44vh;
	overflow: hidden;
	padding: 0 0 30px;
  }
  
   .pc {
    display: block;
  }
 .sp {
    display: none;
  }


@media screen and (max-width:740px){
.pc {
	display: none;
	  }
.sp {
		display: block;
	  }
}

/*ポップアップスライダー*/
.popup-slider{
    margin-bottom: 30px;
}

/*追従*/
.follow-cta {
    position: fixed;
    bottom: 20px; /* フッターからの距離 */
	right: 6px;
    z-index: 1000; /* 他の要素の上に表示されるように */
    opacity: 0; /* 初期状態は透明 */
    transition: opacity 0.5s ease; /* フェードイン・フェードアウトのアニメーション */
}

.follow-cta img {
    max-width: 450px;
    height: auto; /* 高さは自動調整 */
}

.follow-cta.show {
    opacity: 1; /* 表示状態 */
}
th.rank_ttl {
	width: 10% !important;
	z-index: 5;
}

@media screen and (max-width:740px){
	th.rank_ttl {
        width: 13% !important;
    }
	.follow-cta img {
		width: 300px;
		height: auto; /* 高さは自動調整 */
	}
}

.rankTable .crown {
    object-fit: contain;
    position: absolute;
    top: 9%;
    right: 0;
    left: 0;
    margin: auto;
}
.crown_posi {
    position: relative;
}

.column_button {
    text-align: center;
    margin: 2% 0;
}

.sticky-col1 {
	position: sticky;
	left: 0;
	z-index: 9999;
	background-color: #d06086;
  }
  .sticky-col {
	position: sticky;
	left: 0;
	z-index: 9999;
	background-color: #fff;
  }

  .rankTable{
	width: 100%;
	margin-inline: auto;
	white-space: nowrap;
	font-size: 14px;
	border: 3px solid #d06086;
	overflow-x: scroll;
	}

	.rankTable table {
		width: 1130px;
	}
	
	.rankTable td,.rankTable th{
	width: 1500px;
	border-right: 2px dotted #e1e1e1;
	border-bottom: 2px solid #e1e1e1;
	font-size: 0.8em;
	text-align: center;
	vertical-align: middle;
	line-height: 1.0;
	height: 65px;
	}

	.table-container {
		font-size: 1.2em;
		width: 100%;
	  }

	  /* セルの幅を広くする */
.img-col {
	width: 90px; /* お好みの幅に調整 */
	min-width: 120px;
  }
  
  /* 画像を大きくする */
  .img-col img {
	width: 100px;
	height: auto;
	display: block;
	margin: 0 auto; /* 中央寄せ */;
  }

  .table-wrap{
	margin-top: 15px;
}

.btn_col {
	width: 95px; /* 任意の幅に調整 */
	min-width: 95px; /* 幅を保たせたい場合に追加 */
  }

  .score_col {
	width: 120px; /* またはお好みで */
	min-width: 120px;
  }

  .product_col {
	max-width: 100%;
	width: 90px;
	min-width: 100px;
	
  }

  .col {
	width: 90px;
	min-width: 100px;
  }
  
header {
    background-color: #ffe3ec;
    height: 40px;
    margin: auto;
    max-width: 700px;
    display: flex;
    color: #f875a4;
    align-items: center;
    padding: 0 10px;
}
header img {
    width: 30px;
    object-fit: contain;
    margin-right: 6px;
}
header p {
    margin: 0;
}