@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;
}

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



/** link **/

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

a:visited {
    color: #1c7fbd;
}

a:hover,
a:active {
	text-decoration: none;
}
.taC{
    text-align: center;
}
.taR{
    text-align: right;
}


/*初期設定
----------------------------------------------------*/
#wrapper{
	width: 700px;
    margin: 0 auto;
	padding: 0 0 0 0;
	overflow: hidden;
	color: #222;
	background: #fff;
}
#content {
	margin:0 auto;
	width: 700px;
	text-align: left;
	background-color: #fff;
	color: #000;
}

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

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


.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: 65px;
	border-bottom: 1px solid #eee;
 position: relative;
	background-color: #21d5fa;

}*/



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

h1{
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
padding: 0px 0;
	text-align: center;
}



h2 {
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	margin: 50px 0 0px;
	color: #000;
	text-align: center;
    padding: 1%;

}


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

}

h4 {
	padding: 10px 0 0;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.8;
	margin: 50px 0 0px;
	color: #000;
	text-align: center;
}

h5 {
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	margin: 50px 0 15px;
	color: #000;
	text-align: center;
  background-color: #fffcda;
  padding: 1%;
}

h6 {
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	margin: 50px 0 0px;
	color: #000;
	text-align: center;
  background-color: #fffcda;
    padding: 1%;
}

h7 {
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	margin: 50px 0 0px;
	color: #000;
	text-align: center;

}

h8 {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
	margin: 0px 0 0px;
	color: #000;
	text-align: left;
    background-color: #d8fbff;
    padding: 1%;
    width: 100%;
    display: block;

}

h8 img {
    margin: 0;
}

.p_text{
font-size: 14px;
margin-top: 10px;
}

.review-title{
	/* border-bottom: 2px solid #ecaacc;*/
	 text-align: center;
	/* background-color: #ecaacc;*/
	 color: #ffffff;
	 margin: 0;
	 background: -webkit-repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    background: repeating-linear-gradient(-45deg, #f5edfd, #f5edfd 5px, #fdfcff 5px, #fdfcff 10px);
    color: #4a1086;
	border: solid 2px #988ffc;;


}

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

.pics{
	margin-bottom: 10px;
}

.fcP{
    color:#21d5fa;
}
.fcR{
    color:#FF0000;
}
.fcB{
    color:#629FFF;
	font-weight: bold;
}
.fsS{
	font-size: 12px;
}
.fsM{
	font-size: 14px;
}
.fsL{
	    font-size: 1.1rem;
}
.fsXL{
	font-size: 19px;
    
}
.fsXS{
	font-size: 10px;
    
}
.lh {
	line-height: 1.2
    
}



.ttl{
    text-align: center;
}
.table-wrap table img{
   max-width: 100%;
   padding: 5% 0;
   margin: 0 auto;
}
.wrighter_box{
    padding: 10px 2% 5px;
    background: #d9f9ff;
    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:#d0ccfc;
    text-align:center;
    color:#FFFFFF;
    font-size:20px;
    font-style:oblique;
    box-shadow: 3px 3px 0px 0px #988ffc;
    border-radius: 5px;
}

.review{
    margin-bottom: 10%;
    margin-top: 5%;
    padding: 15px 15px 0px 15px;
    background-color: #fff;
    border-radius: 20px;
    height: 800px;
}

@media (max-width: 677px) {
    .review {
        height: 650px;
    }
}

figure{
	text-align: center;
}


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

}
@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: #000;
	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; */
    margin-bottom: 10px;
}


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;
}

@media (max-width:677px) {
    .mt10 img {
        margin: 0 0 10%;
    }

    #content .mt10{
        margin-top: 0;
    }
}

.mb20{margin-bottom: 20px;}
.mb50{margin-bottom: 50px!important;}
.mt30{margin-top: 30px;}
.pr10{padding-right: 10px;}
.ml20{margin-left: 20px;}

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

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

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

#content .blue{
	color: #0066ff;
}
#content .marker{
	background: linear-gradient(transparent 60%, #fdfb70 0%);
	font-weight: bold;
	
}
.marker_pink{
    background: linear-gradient(transparent 60%, #fffec5 0%);
	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: #0070ff;
	display: block;
}

#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 0;
}


#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%;
		padding:0 15px;}

}

/*@media only screen and (max-width:839px){*//*スマホ表示で反映させる設定*/
@media only screen and (max-width:839px){/*スマホ表示で反映させる設定*/
	.content-main{width: 100%;}
	img.pics{height: auto;}
	.header-inner{width: 100%}
	h1{font-size: 19px;}
	h2{font-size: 22px;}
	h3{font-style: 17px;}
	.sns{display: none;}
	.box-voice{
	    flex-direction: column;
	}
	.table-blue{width: 650px;}
	.table-wrap{
        width: 100%;
        overflow:auto;
        /*overflow-x:scroll;*/
	}
	.show-sp{display: block;}
	
	.acc_btn {
        display: block;
        width: 60%;
        text-align: center;
        padding: 10px;
        margin: 20px auto;
        background: #21d5fa;
        color: #fff;
        letter-spacing: 0px;
    }
    .acc_btn_close {
    	width: 100%;
    	margin:0 auto;
        display: none;
    }
}


.no1_linkbtn{
    display: none;
}
/*.table-wrap table th a{
    color: #fff;
}*/
@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){
	.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, th {
    font-size: 12px;
    line-height: 20px;
}
.thisinfotable td, th {
    border: 1px solid #cfcfcf;
    font-size: 15px;
    line-height: 20px;
	padding: 1%;
}


.border-none{
	border-style: none;
}
.searchtable .searchtabletitle {
    background-color: #f6f6f6;
    min-width: 120px;
	border:1px solid #cfcfcf;
	padding: 10px;
}
.searchtable .searchbutton {
    background-color: #21d5fa;
    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: 10px;
}
.objecttitle{
    font-size:24px;
    font-weight:bold;
    text-align: center;
    width: 95%;
    margin: 0 auto;
    background-color: #21d5fa;
    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: 100%;
		margin: 5% auto;
	}
	/*ランキング表*/
.rankTable {
	background: #eaf7fd;
	width: 400px;
	margin: 3% auto;
	box-sizing: border-box;
}
.rankTable table {
	background: #ffffff;
	width: 100%;
	margin: auto;
	box-sizing: border-box;
	padding: 1%;
	border-radius: 5px;
	margin-top: -28px;
}
.rankTable tr td:first-child {
	background-color: #fffde8;
}
  
_:lang(x)+_:-webkit-full-screen-document, .rankTable table {
    background: #ffffff;
	width: 100%;
	margin: auto;
	box-sizing: border-box;
	padding: 1%;
	border-radius: 5px;
	margin-top: -216px;
}

.rankTable table tr th {
    background: #8fdb43;
	color: #fff;
	border-radius: 0;
/*	padding: 0.5% 0;*/
	font-weight: bold;
	vertical-align: middle;
	    z-index: 100;
}
.rankTable table tr:first-child td {
	background: #ffffff;
	border-radius: 0;
	padding-top:15px;
	font-size: 1.5rem;
	vertical-align: top;
	line-height: 0.7;
	border-right: 2px dotted #c4c4c4;
}
.rankTable table tr:last-child td {
	background: #ffffff;
	border-radius: 0;
	padding: 3% 0 1% 0;
	font-size: 1.5rem;
	vertical-align: top;
	line-height: 1;
	border-right: 2px dotted #c4c4c4;
}
.rankTable table tr:first-child th:last-child,
.rankTable table tr:last-child th:last-child {
	border-right: none;
}
.rankTable table tr:first-child td:nth-child(2){
	color: #dba728;
	text-align: center;
	font-weight: bold;
}
.rankTable table tr:first-child th:nth-child(2) {
	color: #9d9a93;
	text-align: center;
}
.rankTable table tr:first-child th:nth-child(3) {
	color: #c56e6e;
	text-align: center;
}

.rankTable table tr:last-child td:nth-child(2){
	color: #dba728;
	text-align: center;
	font-weight: bold;
}
.rankTable table tr:last-child th:nth-child(2) {
	color: #9d9a93;
	text-align: center;
}
.rankTable table tr:last-child th:nth-child(3) {
	color: #c56e6e;
	text-align: center;
}
.rankTable table tr:first-child th:nth-child(4) {
	color: #74cccc;
    text-align: center;
}
.rankTable table tr:first-child th:nth-child(5){
	color: #74cccc;
    text-align: center;
}
.rankTable table tr:first-child th:nth-child(6){
	color: #74cccc;
    text-align: center;
}
.rankTable table tr:last-child th:nth-child(4) {
	color: #74cccc;
     text-align: center;
}
.rankTable table tr:last-child th:nth-child(5){
	color: #74cccc;
    text-align: center;
}
.rankTable table tr:last-child th:nth-child(6){
	color: #74cccc;
    text-align: center;
}
.rankTable table tr:first-child td a,
.rankTable table tr:last-child td a {
	font-size: 0.6rem;
}
.rankTable table tr:first-child td a img,
.rankTable table tr:last-child td a img {
	padding: 5% 0;
}


.rankTable td {
	border-right: 2px dotted #c4c4c4;
	text-align: center;
	padding: 2% 0;
	width: calc(100% / 6);
	font-size: 13px;
	vertical-align: top;
	line-height: 1.5;
}
.rankTable td:last-child {
	border-right: none;
}
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){
.fixed {
    position: sticky;
    left: 0;
    padding: 2px;
    }
}

@media (max-width: 620px){
	.rankTable {
		/*padding: 20px 0 0 0;*/
        border: 10px solid #cbe8ae;
        border-top: 10px solid #cbe8ae;
		border-width: 5px;
		overflow-x: scroll;
		width: 100%;
		box-sizing: border-box;
		margin: 0;
		background: #ffffff;
		padding-top: 0px;
	}
	.rankTable table {
		width: 420px;
	}
	.rankTable table tr.sp_th {
		/*display: block;*/
		height: 28px;
	}
	.rankTable table tr.sp_th th {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		width: calc(100% - 12%);
		text-align: center;
		padding-top: 5px;
	}
	.scrollok {
		display: block;
		text-align: center;
		color: #0b4685;
		/*position: absolute;*/
		right: 0;
		left: 0;
		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.2rem;
	}
	span.so {
		font-size: 2.2rem;
	}span.ba {
		font-size: 2.8rem;
	}
	.rankTable table tr th {
		font-size: 0.7rem;
		text-align: center;
	}
}
/*ランキング表*/
.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 (min-width: 620px){
	.kaso_pro_tbl table {
		width: 100%;
		margin: 5% auto;
	}
	/*ランキング表*/
.rankTable {
	background: #eaf7fd;
	width: 800px;
	margin: 3% auto;
	box-sizing: border-box;
}
.rankTable table {
	background: #ffffff;
	width: 100%;
	margin: auto;
	box-sizing: border-box;
	padding: 1%;
	border-radius: 5px;
	margin-top: -28px;
}
.rankTable table tr th {
    border: none;
    background: #8fdb43;
	color: #fff;
	border-radius: 0;
	font-weight: bold;
	vertical-align: middle;
}
.rankTable table tr:first-child td,
.rankTable table tr:last-child td {
	background: #ffffff;
	border-radius: 0;
	padding: 1% 0;
	font-size: 1.5rem;
	vertical-align: top;
	line-height: 1;
	border-right: 2px dotted #c4c4c4;
} 
.rankTable table tr:first-child td:last-child,
.rankTable table tr:last-child td:last-child {
	border-right: none;
}
.rankTable table tr:first-child td:nth-child(2){
	color: #dba728;
	text-align: center;
	font-weight: bold;
}
.rankTable table tr:first-child th:nth-child(2) {
	color: #9d9a93;
	text-align: center;
}
.rankTable table tr:first-child th:nth-child(3) {
	color: #c56e6e;
	text-align: center;
}

.rankTable table tr:last-child td:nth-child(2){
	color: #dba728;
	text-align: center;
	font-weight: bold;
}
.rankTable table tr:last-child th:nth-child(2) {
	color: #9d9a93;
	text-align: center;
}
.rankTable table tr:last-child th:nth-child(3) {
	color: #c56e6e;
	text-align: center;
}
.rankTable table tr:first-child th:nth-child(4) {
	color: #74cccc;
  text-align: center;
}
.rankTable table tr:first-child th:nth-child(5){
	color: #74cccc;
    text-align: center;
}
.rankTable table tr:first-child th:nth-child(6){
	color: #74cccc;
    text-align: center;

}
.rankTable table tr:last-child th:nth-child(4) {
	color: #74cccc;
    text-align: center;
}
    
.rankTable table tr:last-child th:nth-child(5){
	color: #74cccc;
    text-align: center;
    border: none;
}
.rankTable table tr:first-child th:nth-child(5){
    border: none;
}
.rankTable table tr td:nth-child(5){
    border: none;
}
.rankTable table tr:last-child th:nth-child(6){
	color: #74cccc;
    text-align: center;
}
.rankTable table tr:first-child td a,
.rankTable table tr:last-child td a {
	font-size: 1rem;
}
.rankTable table tr:first-child td a img,
.rankTable table tr:last-child td a img {
	padding: 5% 0;
}


.rankTable td {
	border-right: 2px dotted #c4c4c4;
	text-align: center;
	width: calc(100% / 6);
	font-size: 14px;
	vertical-align: top;
}
.rankTable td:last-child {
	border-right: none;
}
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 (min-width: 620px){
	.rankTable {
		/*padding: 20px 0 0 0;*/
        border: 10px solid #cbe8ae;
        border-top: 10px solid #cbe8ae;
		border-width: 10px;
		/*overflow-x: scroll;*/
		width: 100%;
		box-sizing: border-box;
		margin: 0 0 20px 0;
		background: #ffffff;
	}
	.rankTable table {
		width: 100%;
	}
	.rankTable table tr.sp_th {
		/*display: block;*/
		height: 28px;
	}
	.rankTable table tr.sp_th th {
	/*	position: absolute;*/
		left: 0;
		right: 0;
		margin: auto;
		width: calc(100% - 20px);
		text-align: center;
		padding-top: 5px;
	}
	.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: 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.9rem;
		text-align: center;
	}
}
/*ランキング表*/
.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% - 12.9%);
}
}

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


/*

@media screen and (max-width: 699px){
.searchtable tr th{
position: inherit;
}
.searchtable table{width: 100%;}
.searchtable table td {
padding: 15px 0;
}
}*/


.index_search {
    width: 100%;
    table-layout: fixed;
}

.index_search tr th{
width: 30%;
}
.index_search table td {
    border-right: none;
}
.searchtable, tr, td, th {
    border: 1px solid #cfcfcf;
}

@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: 130%; */
        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: 130%; */
        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 {
        /* display: block;
        padding: 5px; */
        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;
    }

    /*form*/
    .searchform {
        display: inline-block;
        text-align: left;
    }
    .searchtable {
        border-collapse: collapse;
        font-size: 15px;
        line-height: 25px;
        border: none !important;
    }
    /*.searchtable,.searchtable tr,.searchtable td,.searchtable th {
        border: 1px solid #cfcfcf;
        padding: 5px 10px 5px 10px;
    }*/
    
    .searchtable, tr, td, th {
        border: 1px solid #cfcfcf;
        padding: 5px 10px 5px 10px;
    }
    .searchbox {
        font-size: 15px;
        padding: 5px;
        border: 1px solid #DDD;
        border-radius: 5px;
        width: 80%;
    }
    form input {
        vertical-align: middle;
    }

    .thisinfotable td, th {
        font-size: 12px;
        line-height: 20px;
    }
    .thisinfotable td, th {
        font-size: 15px;
        line-height: 20px;
    }
    .searchtable .searchtabletitle {
        background-color: #f6f6f6;
        min-width: 120px;
    }
    
    .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 tr, td　{
        border:none;
    }
    .objectimg p　{
        text-align: center;
    }
    .objectmaintext {
        font-size:20px;
        font-weight: bold;
    }
    .thisinfotable {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
    }
    .thisinfotable td,th {
        font-size: 15px;
        line-height: 20px;
    }


}


@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;
}


}
.marker_start {
    background-position: 0% bottom;
}
.marker_line {
    background: -webkit-linear-gradient(left, #fdff3b 50%, transparent 50%) 100% 0% / 200% 70% no-repeat;
    background: linear-gradient(to right, #fdff3b 50%, transparent 50%) 100% 0% / 200% 70% no-repeat;
    transition: background-position 1s ease-out;
    -webkit-transition: background-position 1s ease-out;
	    margin-bottom: 35px;
}
.cta_btn {
	text-align: center;
    margin-bottom: 20px;
}
.cta_btn2 {
	text-align: center;
    margin-bottom: 40px;
}
.cta_btn a{
    padding: 10px 20px;
	background-color: #21d5fa;
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 3px #aaa;
    display: block;
    width: 50%;
    margin: auto;
}

.cta_btn2 a{
    padding: 10px 20px;
	background-color: #ff963f;
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 3px #aaa;
    display: block;
    width: 50%;
    margin: auto;
}
  

@media (max-width: 767px){
.cta_btn a{
    padding: 10px 20px;
	background-color: #21d5fa;
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 3px #aaa;
    display: block;
    width: 65%;
    margin: auto;
}

.cta_btn2 a{
    padding: 10px 20px;
	background-color: #ff963f;
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 3px #aaa;
    display: block;
    width: 65%;
    margin: auto;
}
  }
.animate {
    -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;
}
.animate69, .a-btnsub69, .a-option69 {
    animation-duration: 1.4s!important;
    -webkit-animation-duration: 1.4s;
    -ms-animation-duration: 1.4s;
    -moz-animation-duration: 1.4s!important;
}
.animate69 {
    -webkit-animation-name: animate69;
    -moz-animation-name: animate69;
    -o-animation-name: animate69;
    animation-name: animate69;
}
@keyframes animate69 {
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);
}
}
.textlink{
	text-align: right;
	font-weight: bold;
	display: block;
	margin-bottom: 50px;
}
figure.mb0 {
	margin-bottom: 0;
}
.cta {
	width: 100%;
	text-align: center;
	margin-bottom: 50px;
}
.cta img {
	width: 100%;
}
.cta p {
	margin-bottom: 0;
	font-weight: bold;
}
figure.imgframe {
    border: 10px solid #cbe8ae;
	padding: 10px;
}
figure.imgframe2 {
    border: 10px solid #daf9ff;
    padding: 10px;
}
footer {
	margin-top: 5%;
    background: #f6af38;
	color: #fff;
	text-align: center;
	padding: 30px;
	font-size: 13px;
    padding-bottom: 12%;
	line-height:1.1;
}

@media (max-width:677px) {
    footer {
        margin-top: 10%;
        padding-bottom: 30%;
    }
}

footer a:visited,
footer a:link {
	color: #fff;
	display: block;
}
.double-flash {
	animation: double-flash_5476 3s ease infinite;
	transform-origin: 50% 50%;
}
@keyframes double-flash_5476 {
	0% { opacity:1 }
	16.66667% { opacity:0 }
	33.33333% { opacity:1 }
	50% { opacity:0 }
	66.66667% { opacity:1 }
	100% { opacity:1 }
}
.caution_txt{
    text-align:right;
    font-size:0.6em;
}
@media screen and (min-width: 640px) {
.pc_no {
    display:none;
}
}
/*PC、SPの非表示設定*/
    .pc_none { display:inline!important; }
    .sp_none { display:none!important; }
@media screen and (max-width: 768px) {
    /*タブレット、スマホの場合*/
    .pc_none { display:none!important; }
    .sp_none { display:inline!important; }
    #wrapper{
        width: 100%;
    }
    h1 img.pics {
        width: 100%;
        height: auto;
    }
    
}
.sp_ce{
    text-align: center;
}

.searchordercontainer {
    margin-bottom: 5%;
}

h3 {
    margin-top: 60px;
    position: relative;
    background: #ffeac7;
    color: #eb5a09;
    font-size: 20px;
    text-align: center;
    border-top: 2px solid #eb5a09;
    border-bottom: 2px solid #eb5a09;
    font-size: 30px;
}

h2 .pics{
    margin-bottom: 0px;
}
.try{
    border: 5px solid #fdd228;
}
.try h3{
    margin: 0;
    padding: 0;
}
.try .content{
    padding: 3%;
}
.try .cta{
    margin-bottom: 20px;
}
.try img.pics {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 768px) {
    /*タブレット、スマホの場合*/
    h3 {
        margin: 40px 0 0;
        font-size: 22px;
    }
}

table.point{
    width: 60%;
    margin: 0 auto;
    border: 1px solid #999;
}
table.point td{
    font-size: 0.8rem;
    text-align: center;
    border: 1px solid #999;
    vertical-align: middle;
    padding: 4px;
    background-color: #fff;
}
table.point td:nth-child(1){
    background: #f7f7f7;
}
@media screen and (max-width: 768px) {
    /*タブレット、スマホの場合*/
    table.point{
        width: 85%;
        margin: 0 auto;
        border: 1px solid #999;
    }
}
h3.mt5{
        margin: 40px 5px 20px;
}

.star5_rating {
    position: relative;
    font-size: 1.2em;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #ffda0d /* グレーカラー 自由に設定化 */ /*font-size: 30px; フォントサイズ 自由に設定化 */;
}
.star5_rating:before {
    content: '☆☆☆☆☆';
}
.star5_rating[data-rate="4-5"]:after {
    width: 90%;
}
.star5_rating:after {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffda0d /* イエローカラー 自由に設定化 */;
}
.star5_rating:after {
    content: '★★★★★';
}
.star5_rating[data-rate="5"]:after{ width: 92%; } 
.star5_rating[data-rate="4-9"]:after{     width: 95%; }
.star5_rating[data-rate="4-4"]:after{     width: 90%; }
.star5_rating[data-rate="4"]:after{     width: 88%; } 
.star5_rating[data-rate="3-5"]:after{ width: 73%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2-5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1-5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0-5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */



/* モーダルウィンドウ */
.madal_container {
	background: rgba(0, 0, 0, .7);
	position: fixed;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 10000;
}

.madal_contents {
    width: 29%;
    height: auto;
    position: absolute;
    top: 44%;
    left: 50%;
	  -ms-transform: translate(-50%, -50%);
	  -webkit-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
}

.madal_contents span {
    cursor: pointer;
    position: absolute;
    top: -38px;
    right: -33px;
    color: #fff;
    font-size: 2em;
    z-index: 11111;
    font-weight: bold;
}

.active {
    display: block !important;
    animation-name: fadeIn;
    animation-duration: .2s;
    animation-fill-mode: both;
}

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

.madal_contents {
    width: 70%;
    height: auto;
    position: absolute;
    top: 35%;
    left: 0;
    right: 0;
    margin: auto;
    transform: inherit;
}

.madal_contents span {
    cursor: pointer;
    position: absolute;
    top: -26px;
    right: -23px;
    color: #fff;
    font-size: 1.5em;
    Z-INDEX: 11111;
    font-weight: bold;
}

}
.rela{
    position: relative;
}
.timer{
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: 3%;
    right: 3%;
    color: #fff;
    font-size: 2vw;
}
.timer p{
    font-size: 1vw;
    padding: 7% 0 0;
}
.madal_contents img{
    width: 100%;   
}

tr td .btn1{
    background: #ff681c;
    box-shadow: #8b0000 0px 2px;
    padding: 0 4px 4px;
    margin: 0 3px 0;
    border-radius: 10px;
    color: #fff;
}
td .btn2{
    background: #ffa41c;
    box-shadow: #8b0000 0px 2px;
    padding: 0 4px 4px;
    margin: 0 3px 0;
    border-radius: 10px;
    color: #fff;
}
td .btn2 a{
        font-size: 14px;
    color: #fff;
    text-decoration: none;
}
/* 以下アニメーション展開 */
/* 共通CSS */
.animate{
    -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;
}

/* シャッフル */
.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;
}
@-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);}
}

/* 追従CTA */
.texts{ 
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    text-align: center;
    z-index: 999;
}

.text02 p{
    margin: 0;
}
.texts .text02{
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}
/* .text03{
display: flex;
    flex-wrap: nowrap;
    text-align: center;
    justify-content: center;
    background: rgb(0 0 0 / 68%);
    color: #fff;
} */
.realtimeuserscounter.box {
    color: #ffcc00;
}
/* .text04 {
    background: #ffcc00;
    font-weight: bold;
} */
#floating {
    position: fixed;
    bottom: 1%;
    right: 0;
    z-index: 100;
    width: 100%;
    display: none;
    }

    #floating img {
        width: 100%;
        margin: 0 auto;
        display: block;
    }

    #floating_pc {
        display: none;
    }
  
      #floating_pc img {
        display: block;
    }

@keyframes ShiftText{
0% {
    opacity: 0;
}
1%, 25% {
    top: 0em;
    opacity: 1;
}
26%, 50% {
    top: -1.5em;
}
51%, 75% {
    top: -3em;
}
76%, 100% {
    top: -4.6em;
}
}
.blink{
    animation-name: flash;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    color: #ff0000 !important;
}
.flash {
    animation: flash 3s ease infinite;
    transform-origin: 50% 50%;
}
/* .text04 {
    background: #ffcc00;
    font-weight: bold;
} */

@keyframes flash {
    0% { opacity:1 }
    50% { opacity:0 }
    100% { opacity:1 }
}

/* PC版追従CTA */
.footbtn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    /* width: 100%; */
    z-index: 10;
    max-width: 700px;
}
.footbtn img{
    margin: 0 auto;
    /* width: 100%; */
    max-width: 700px;
}

/* 1205修正 */

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

/* point */
.point {
    margin: 3% auto 5%;
}
.comment img{
    margin: auto;
    margin-top: 0;
    width: 16%;
}
.comment{
    display: flex;
    width: 86%;
    align-items:flex-start;
    justify-content:space-between;
    margin: 30px 0 20px;
}
@media screen and (max-width:640px) {
.top_title02 img{
    width: 100%;
    margin-top: 10px;
}

img.w50{
    width: 100%;
    margin: auto;
    margin-top: 30px;
}
.balloon1-right:before {
    content: "";
    position: absolute;
    top: 20%;
    left: 100%;
    margin-top: -15px;
    border: 10px solid transparent;
    border-left: 14px solid #e0edff;
}

.balloon1-left:before {
    content: "";
    position: absolute;
    top: 20%;
    right: 100%;
    margin-top: -15px;
    border: 10px solid transparent;
    border-right: 14px solid #fff;
}
.balloon2-left:before {
    content: "";
    position: absolute;
    top: 20%;
    right: 100%;
    margin-top: -15px;
    border: 10px solid transparent;
    border-right: 14px solid #f0f8ff;
}
}

@media screen and (min-width:640px) {
.top_title02 img{
    width: 49%;
}

img.w50{
    width: 50%;
    margin: auto;
    margin-top: 30px;
}
.balloon1-right:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -15px;
    border: 10px solid transparent;
    border-left: 14px solid #d8f7f3;
}

.balloon1-left:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -15px;
    border: 10px solid transparent;
    border-right: 14px solid #d8f7f3;
}
.balloon2-left:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -15px;
    border: 10px solid transparent;
    border-right: 14px solid #d8f7f3;
}

}

.balloon1-right p {
    padding: 0;
}

.balloon1-top {
    position: relative;
    display: inline-block;
    margin: 28px 0 0 0;
    padding: 18px 15px;
    min-width: 120px;
    max-width: 100%;
    border-radius: 10px;
    color: #000;
    font-size: 16px;
    background: #d8fbff;
    box-shadow: 2px 4px 3px rgb(0 0 0 / 11%);
}

.balloon1-top:before {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    bottom: 100%;
    margin-top: -24px;
    border: 10px solid transparent;
    border-bottom: 14px solid #fff;
}

.balloon1-top p {
    padding: 0;
}

.balloon1-left {
    position: relative;
    display: inline-block;
    margin: 0 0 0 15px;
    padding: 10px 15px;
    min-width: 120px;
    max-width: 100%;
    border-radius: 10px;
    color: #000;
    font-size: 16px;
    background: #d8f7f3;
    /* box-shadow: 2px 4px 3px rgb(0 0 0 / 11%); */
    width: 80%;
}
.balloon1-left p {
    padding: 0;
}
.balloon2-left {
    position: relative;
    display: inline-block;
    margin: 0 0 0 15px;
    padding: 10px 15px;
    min-width: 120px;
    max-width: 100%;
    border-radius: 10px;
    color: #000;
    font-size: 16px;
    background: #f0f8ff;
    /* box-shadow: 2px 4px 3px rgb(0 0 0 / 11%); */
    width: 80%;
}
.balloon2-left p {
    padding: 0;
}
/* 商品比較表 */
.shouhin_table{
    margin-top:20px;
   
    border: 3px #eb5a09 solid;

    
}

.shouhin_table th:first-child {
    padding-top: 10px;
    padding-bottom: 10px;
  }

.shouhin_table tr>th:first-child, .shouhin_table tr>td:first-child{
    position:sticky;
    left:0;
}

.shouhin_table tr>td:first-child{
    border-right:#fff;
}

.shouhin_table>table{
    width:1110px;
    border-collapse:collapse;
}

.shouhin_table th, .shouhin_table td{
    font-size: 10px;
    text-align:center;
    padding:1px;
    border:2px solid #E6E6E6;
}

.shouhin_table th{
    background-color:#f7f7f7;
}

.shouhin_table td{
    background-color:#fff;
}

.shouhin_table td.highlight {
    background-color: #FFFBE8;
}
.space {
    letter-spacing: -1px;
}


.sum img{
    width:50px;
    display: block;
    margin: 0 auto;
}
.star{
    color:#f89a07;
}

.tableBtn{
    background-color:#78c118;
    color:#fff!important;
    text-decoration:none;
    font-weight:bold;
    margin: 0px 50px 0px 10px;
    border-radius:10px;
    box-shadow:0 0.2em #62ab02;
    display: inline-block;
    width: 97%;
    padding: 5px 7px;
    line-height: 1.2;
}





.item_box2{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
@media only screen and (max-width:767px){
.item_box2{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
  }
.item_list{
	background: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 5px 10px;
	margin-bottom: 10px;
	padding: 11px;
	max-width: 310px;
}




.member_list{
	background: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 10px 0 0;
	margin-bottom: 15px;
	padding: 8px;
	max-width: 210px;
}
.member_list img{
	max-width: 90px;
	margin-right: 8px;
}

@media only screen and (max-width:1000px){
.member_list{
	background: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	margin-bottom: 15px;
	padding: 8px;
	max-width: 296px;
}
.member_list img{
	max-width: 90px;
	margin-right: 8px;
}
  .item_list{
	background: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 5px 0px;
	margin-bottom: 10px;
	padding: 11px;
	max-width: 306px;
}
  }

  .member_text{
	margin-bottom: 10px;
    word-wrap: break-word;
    font-size: 15px;
}

@media only screen and (max-width:767px){
.member_list{
	background: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	margin-bottom: 15px;
	padding: 8px;
	max-width: 269px;
}
.member_list img{
	max-width: 90px;
	margin-right: 8px;
}
  }

/* --- BOXの定義 -------------------------------------------------*/
.box {
    position: relative;   /* タイトル用に親要素定義  */
    box-sizing: border-box; /* 罫線・余白も含む大きさ  */
    margin: 6% auto;    /* BOXの位置               */
    /*background: #c9e8ff;*/                /* BOXの背景色             */
    padding: 2%; /* BOX内の余白             */
    border-top: 2px dotted #0faabf;
    border-bottom: 2px dotted #0faabf;
    /*border: 3px solid #c9e8ff;*/       /* BOXの枠線               */
    /*border-radius: 11px;*/   /* BOXの角丸               */
    font-size: min(5vw,20px);
  text-align: center;
  }
   /* --- タイトル部分の定義 ----------------------------------------*/
  .box::before {
    position      : absolute;          /* 親からの相対位置の定義  */
    position      : absolute;          /* 親からの相対位置の定義  */
    display       : inline-block;      /* インラインボックス定義  */
    box-sizing    : border-box;        /* 罫線・余白も含む大きさ  */
    line-height   : 1;                 /* 1行の高さを初期化       */
    background    : #0faabf;;           /* タイトル背景色          */
    color         : #ffffff;           /* タイトルの文字色        */
    content       : attr(title);       /* タイトルに[title]を表示 */
    font-weight   : bold;              /* タイトルは太字          */
    padding       : 9px;          /* タイトル内の余白        */
    top           : -2px;              /* 枠線分上を指定          */
    left          : 0px;              /* 枠線分左を指定          */
    border-radius : 0 0 8px 0;            /* タイトルの角丸          */
    font-size     : 15px;              /* タイトルの文字サイズ    */
  }

.balloon1-left {
    position: relative;
    display: inline-block;
    margin: 10px 0 10px 15px;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    font-size: 16px;
    background: #d8f7f3;
	border-radius: 10px
}

.balloon1-left:before {
    content: "";
    position: absolute;
    top: 60%;
    left: -20px;
    margin-top: -15px;
    border: 10px solid transparent;
    border-right: 15px solid #d8f7f3;
}

.balloon1-left p {
    margin: 0;
    padding: 0;
	 font-size: 14px;
}
.balloon1-right {
    position: relative;
    display: inline-block;
    margin: 10px 15px 10px 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #000;
    font-size: 16px;
    background: #d8f7f3;
	border-radius: 10px;
}

.balloon1-right:before {
    content: "";
    position: absolute;
    top: 62%;
    right: -23px;
    margin-top: -15px;
    border: 8px solid transparent;
    border-left: 11px solid #d8f7f3;
}

.balloon1-right p {
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.fukidashi-l{
	display: flex;
	align-items: center;
}
.fukidashi-l img{
	max-width: 100px;
}
.fukidashi-r{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.fukidashi-r img{
	max-width: 100px;
}
@media only screen and (max-width:439px){

	.fukidashi-l img {
    max-width: 80px;
}
	.fukidashi-r img {
    max-width: 80px;
}
  }
/* DSスライダー */
/*------ スライダーの横幅 ------*/
/*
.ds_slider_wrap{
    padding: 5%;
    border: 3px solid #ff7889;

}
*/
.ds_slider_ttl{
    background-color: #ff7889;
    color: #fff;
    width: 20%;
    padding: 0.5%;
    text-align: center;
    margin-top: 3%;
    font-size: 25px;
    border-radius: 5px 5px 0 0;
}
.ds_slider{
    width:100%;
    margin:0 auto;

  }
  
  /*------ スライダー画像 ------*/
  .ds_slider img{
      width:100%;
    padding: 0 10%;
  }
  
@media only screen and (max-width:767px){

  .ds_slider img{
    width:100%;
    padding: 0% 7% 6% 7%
  }
  }



  /*-------- 高さ調整 ----------*/
  .ds_slider .slick-slide{
        height:auto!important;
  }
  
  /*---------- 矢印 ----------*/
  .ds_slider .slick-next{
        right: 12px !important;
  }

    .ds_slider .slick-prev{
        left: 12px !important;
  }

    .ds_slider .slick-arrow{
        width: initial!important;
        height: initial!important;
        z-index:2!important;
    }

    .ds_slider .slick-arrow:before{
        font-size: 25px!important;
        color: #0faabf;
    }

    .ds_slider_bg{
        width: 95%;
        margin:0 auto;

    }
    .slick-dots {
        bottom: 0px!important;
        
    }
@media (max-width: 667px) {
    .ds_slider .slick-next{
        right:0!important;
    }

    .ds_slider .slick-prev{
        left: 0 !important;
    }
    .ds_slider .slick-arrow:before{
        font-size: 20px!important;
        color: #0faabf;
    }
}

/* ------アコーディオン（グラデ）--------- */
.cp_box *, .cp_box *:before, .cp_box *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_box {
	position: relative;
}
.cp_box label {
	position: absolute;
	z-index: 1;
	bottom: 0;
	width: 100%;
	height: 90px; /* グラデーションの高さ */
	cursor: pointer;
	text-align: center;
	/* 以下グラデーションは背景を自身のサイトに合わせて設定してください */
/*	background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(250, 252, 252, 0.95) 90%);*/
}
.cp_box input:checked + label {
	background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box label:after {
	line-height: 2.5rem;
	position: absolute;
	z-index: 2;
	bottom: -50px;
	left: 50%;
	width: 16rem;
	content: '▼ 他サプリの詳細も見る';
	transform: translate(-50%, 0);
	letter-spacing: 0.05em;
	color: #ffffff;
	border-radius: 20px;
	background-color: #e45454;
}
.cp_box input {
	display: none;
}
.cp_box .cp_container {
	overflow: hidden;
    height: 0; /* 開く前に見えている部分の高さ */
	transition: all 0.5s;
}
.cp_box input:checked + label {
	/* display: none ; 閉じるボタンを消す場合解放 */
}
.cp_box input:checked + label:after {
	font-family: FontAwesome;
	content: '▲ 閉じる';
}
.cp_box input:checked ~ .cp_container {
	height: auto;
	padding-bottom: 10px; /* 閉じるボタンのbottomからの位置 */
	transition: all 0.5s;
}
/* ------アコーディオン（グラデ）ここまで　--------- */

@media screen and (min-width: 640px){	
/* PC時 */
.pc {
display:inline;
}
.sp {
display:none;
}
}



/* 240305 */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    color: #fff;
    background-color: #f6af38;
    padding: 7px;
    /* font-weight: bold; */
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-container {
    display: flex;
    align-items: center;
    height: 1.6rem;
}
.header-text {
    font-size: 14px;
}
.logo-image {
    height: 30px;
    width: 30px;
    margin-left: 5px;
}

img,
video{
    display: block;
    object-fit: contain;
    width: 100%;
    margin: 20px auto;
}
h2{
    padding: 0;
}
h2 img{
    margin: 0;
}
#wrapper{
    margin-top: 40px;
}
#content{
    padding: 0 2%;
}
.pr_anno{
    display: block;
    text-align: right;
    font-size: 14px;
    color: #999;
    padding-right: 10px;
    margin: 5px auto;
}
.items h2{
    margin-top: 30px;
}
.item_box2{
    border: 2px solid #eb5a09;
    background-color: #ffeac7;
    padding: 4px 4px 0;
    justify-content: space-between;
    border-radius: 0 0 20px 20px;
}
.item_list{
    width:49%;
    display: block;
    margin: 0 0 8px;
    padding: 10px;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
}

.item_list .name{
    font-weight: bold;
    color: #eb5a09;
    text-align: center;
    font-size: 14px;
    white-space: nowrap;
}

.item_list .intro{
    font-size: 10px;
    margin-bottom: 0;
    line-height: 16px;
    height: 60px;
    text-align: center;
}

.item_list img {
    max-width: 100px;
    margin: 0 auto;
}

.intro p {
    font-size: 14px;
    margin-bottom: 0;
}

@media (max-width: 700px) {
    .item_list {
        display: block;
        height: auto;
    }

    .products_image {
        width: 60%;
        height: 60px;
        margin: 0 auto 10%;
    }

    .item_list .name {
        line-height: 20px;
        height: 20px;
        margin-top: 5%;
        margin-bottom: 1%;
    }

    .item_list .intro {
        height: 7vh;
    }

    .intro p {
        font-size: 10px;
    }

}
.sv_card_wrapper{
    margin: 10px auto;
}
.sv_card{
    border-radius: 10px;
    border: 1px solid #eb5a09;
    background-color: #fff;
    padding: 5px;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
}
.sv_card:first-child{
    margin-right: 1%;
}
.sv_card>img{
    width: 20%;
    margin: 1%;
}
.sv_card .name{
    font-weight: bold;
    color: #eb5a09;
    font-size: 16px;
    text-align: left;
    margin: 3% 0 0;
}
.sv_card .name .account{
    font-size: 0.7em;
    color: #666;
    font-weight: normal;
}
.sv_card .intro{
    margin-bottom: 0;
    font-size: 11px;
}

.sv_profile {
    margin-left: 5%;
}

img.sep_arrow{
    margin: 0 auto;
}
.separate{
    background-color: #e3f6f4;
    padding: 20px 2%;
}
.separate p:last-child{
    margin-bottom: 0;
}
.fcP,
.red{
    color: #ff0000 !important;
}

.balloon1-left,
.balloon1-right{
    background-color: #ffffff;
}
.balloon1-left::before{
    border-right-color: #ffffff;
}
.balloon1-right::before{
    border-left-color: #ffffff;
}

.point{
    margin-bottom: 80px;
}

@media (max-width: 677px) {
    .point {
        margin-bottom: 5%;
    }
}

.fukidashi-l img,
.fukidashi-r img{
    margin: 0;
}
.star_rate{
    color: #f89a07;
}
.table_lead{
    margin: 20px auto -10px;
    text-align: center;
}
.shouhin_table>table{
    width: 666px;
}
.shouhin_table tr th{
    background-color: #eb5a09;
    color: #fff;
    /* opacity: 0.7; */
    border-top: none;
    /*width: 6.1%;*/
}

.shouhin_table tr>th:first-child,
.shouhin_table tr>td:first-child{
    z-index: 5;
}
/*.shouhin_table tr th:nth-child(4){
    width: 8%;
}*/
/*.shouhin_table tr th:first-child{*/
/*    border-right: none;*/
/*    border-left: 2px solid #E6E6E6;*/
/*}*/
/*.shouhin_table tr th:nth-child(2),*/
/*.shouhin_table tr td:nth-child(2){*/
/*    border-left: none;*/
/*}*/
.shouhin_table tr th:nth-child(1),
.shouhin_table tr th:nth-child(2),
.shouhin_table tr th:nth-child(3),
.shouhin_table tr th:nth-child(4),
.shouhin_table tr th:nth-child(5){
    font-weight: bold;
    opacity: 1;
}
.shouhin_table tr td:nth-child(4) a{
    margin: 0;
    text-decoration: none;
}
.shouhin_table tr td:nth-child(5) {
    font-size: 10px;
    line-height: 1.3;
}

.shouhin_table tr td:nth-child(12) {
    font-size: 10px;
    line-height: 1.3;
}

.detail_ttl{
    margin: 30px 0 0;
    padding: 0;
    background: none;
}

@media (max-width: 677px) {
    .detail_ttl {
        margin: 5% 0 0;
    }

    .detail_ttl img {
        margin: 0 0 5%;
    }
}

.detail_box{
    padding: 15px;
    border-radius: 20px;
    background-image:
    repeating-linear-gradient(
        90deg,
        #f7f7f7 ,
        #f7f7f7 1px,
        transparent 1px,
        transparent 15px
    ),
    repeating-linear-gradient(
        0deg,
        #f7f7f7 ,
        #f7f7f7 1px,
        #fff 1px,
        #fff 15px
    );
    margin: 3%;
}
.detail_box p {
    margin-bottom: 17px;
}
.detail_box .pics {
    margin-bottom: 17px;
}

h6{
    background: none;
    padding: 0;
}
h6 img{
    margin: 0;
    padding: 0 5%;
}
.ds_slider .slick-arrow:before{
    color: #eb5a09;
}

.cta_lead{
    text-align: center;
    color: #ff963f;
    font-weight: bold;
    margin-bottom: 0;
}

.cta_lead01 {
    text-align: center;
    color: #62ab02;
    font-weight: bold;
    margin-bottom: 0;
    font-size: 30px;
}

@media (max-width:700px) {
    .cta_lead01 {
        font-size: 17px;
    }
}

.cta_btn2{
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
.cta_btn2::before{
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny 4s ease-in-out infinite;
}
@-webkit-keyframes shiny {
    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; }
}
.cta_btn a,
.cta_btn2 a{
    width: 90%;
}
.cta_btn a{
    background-color: #71d4c7;
}
.cta_btn2 a{
    background: linear-gradient(to bottom, #ff963f 0%, #ed610e 100%);
}

.separate_line{
    margin: 60px auto 20px;
}
.cp_box label:after{
    background-color: #999;
}
.closing_box{
    margin-top: 100px;
    background-color: #ffeac7;
    overflow: hidden;
    margin-top: 20%;
}
.closing_box h2{
    margin: 0;
}
.closing_box h2 img{
    margin: 0;
}
.closing_box>div{
    padding: 15px;
}
.closing_img{
    filter: drop-shadow(3px 3px 1px rgba(0,0,0,0.2));
}


@media (max-width: 677px) {
    .closing_box {
        margin-top: 30%;
    }
}


h8{
    background: none;
    padding: 0;
}
.p_ttl{
    border-left: 4px solid #eb5a09;
    padding: 3px 0 3px 5px;
    line-height: 1;
    font-size: 20px;
    margin-top: 5%;
    padding: 5px 10px;
    font-weight: bold;
    margin-bottom: 10px;
}


.under_point_box .p_ttl{
    margin-top: 0;
}

@media (max-width:677px) {
    .under_point_box .p_ttl{
        line-height: 1.3;
    }

    
}

.p_ttl>span{
    vertical-align: middle;
    color: #3a72d1;
    font-weight: bold;
    margin-right: 5px;
    font-size: 30px;
}
.under_point_box{
    border-radius: 10px;
    margin-bottom: 15px;
}

@media (max-width: 677px) {
    .under_point_box {
        margin-bottom: 0;
    }
}


.under_page .ds_slider img{
    padding-bottom: 0;
}
.under_page .slick-dots{
    bottom: 0px !important;
}

@media screen and (min-width:769px) {
    .pr_anno {
        font-size: 10px;
    }
    .item_box2 {
        padding: 15px 15px 0;
    }
    .item_list {
        width: 32%;
    }
    .item_list .name,
    .sv_card .name {
        font-size: 18px;
    }

    .sv_card img {
        width: 10%;
        
    }
    .item_list .intro {
        font-size: 14px;
        text-align: center;
    }
    .sv_card .intro {
        font-size: 13px;
    }
    .sv_card:first-child {
        margin-right: 0;
    }
    .sv_card_wrapper {
        justify-content: space-between;
    }
}   
/* 
hamburger(ハンバーガーアイコン)
=================================== */
.hamburger {
    position: absolute;
    right: 15px;
    top: 10px;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 300;
}

.hamburger__line {
    position: absolute;
    width: 25px;
    height: 3px;
    right: 0;
    background-color: #fff;
    transition: all 0.5s;
}

.hamburger__line--1 {
    top: 1px;
}

.hamburger__line--2 {
    top: 10px;
}

.hamburger__line--3 {
    top: 20px;
}

/*ハンバーガーがクリックされたら*/
.open .hamburger__line--1 {
    transform: rotate(-45deg);
    top: 11px;
}

.open .hamburger__line--2 {
  opacity: 0;
}

.open .hamburger__line--3 {
    transform: rotate(45deg);
    top: 11px;
}

/* 
sp-nav(ナビ)
=================================== */
.sp-nav {
    position: fixed;
    top: -100%; /*ハンバーガーがクリックされる前はWindow上部に隠す*/
    right: 0;
    width: 90%; /* 出てくるスライドメニューの幅 */
    height: 23vh;
    background-color: #FFFFFFE0;
    transition: all 0.5s;
    color: #333333;
    z-index: 200;
    /*overflow-y: auto;*/
    text-align: left;
    padding: 2em 0em 0.5em;
    border-radius: 0 0 15px 15px;
}
.sp-nav a {
    text-decoration: none;
    color: #333333;
    line-height: 1.4;
    font-weight: 500;
}
/*ハンバーガーがクリックされたら上からスライド*/
.open .sp-nav {
    top: 0;
}
@media screen and (max-width: 699px){
.sp-nav {
     height: 19vh;
}
}

/* 
black-bg(ハンバーガーメニュー解除用bg)
=================================== */
.black-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    cursor: pointer;
    z-index: 100;
}

/*ハンバーガーメニューが開いたら表示*/
.open .black-bg {
    opacity: 0.3;
    visibility: visible;
}

/* 2024725 */
.balloon1-right_01:before {
    content: "";
    position: absolute;
    top: 20%;
    left: 100%;
    margin-top: -15px;
    border: 10px solid transparent;
    border-left: 14px solid #e0edff;
}

.balloon1-left_01:before {
    content: "";
    position: absolute;
    top: 20%;
    right: 100%;
    margin-top: -15px;
    border: 10px solid transparent;
    border-right: 14px solid #fff;
}

.balloon1-left_01 {
    position: relative;
    display: inline-block;
    margin: 0 0 0 15px;
    padding: 10px 15px;
    min-width: 120px;
    max-width: 100%;
    border-radius: 10px;
    color: #000;
    font-size: 16px;
    background: #ffeac7;
    /* box-shadow: 2px 4px 3px rgb(0 0 0 / 11%); */
    width: 80%;
}
.balloon1-left_01 p {
    padding: 0;
}

.balloon1-left_01 {
    position: relative;
    display: inline-block;
    margin: 10px 0 10px 15px;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    font-size: 16px;
    background: #ffeac7;
      border-radius: 10px
  }
  
.balloon1-left_01:before {
    content: "";
    position: absolute;
    top: 60%;
    left: -20px;
    margin-top: -15px;
    border: 10px solid transparent;
    border-right: 15px solid #ffeac7;
}

.balloon1-left_01 p {
    margin: 0;
    padding: 0;
}
.balloon1-right_01 {
    position: relative;
    display: inline-block;
    margin: 10px 15px 10px 0;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #000;
    font-size: 16px;
    background: #ffeac7;
    border-radius: 10px;
}

.balloon1-right_01:before {
    content: "";
    position: absolute;
    top: 62%;
    right: -23px;
    margin-top: -15px;
    border: 8px solid transparent;
    border-left: 11px solid #ffeac7;
}

.balloon1-right_01 p {
    margin: 0;
    padding: 0;
}

.content_ttl {
    margin: 0;
}

.content_image {
    margin: 0;
    padding: 3%;

}

.senoppychewable_content {
    background-color: #ffeac7;
    padding-bottom: 10%;
}

.senoppychewable_content_01 {
    background-color: #ffeac7;
    padding-bottom: 3%;
}

.senoppy_content {
    background-color: #ffeae6;
    padding-bottom: 10%;
}

.senoppy_content_01 {
    background-color: #ffeae6;
    padding-bottom: 3%;
}

.maxgpc_content {
    background-color: #e6f9ff;
    padding-bottom: 10%;
}

.karada_senobiru_content {
    background-color: #f0f0f0;
    padding-bottom: 10%;
}

.btn_cta01 {
    padding-right: 3%;
    margin: 0;
}

@media (max-width: 667px) {
    .wide {
    margin: 0 calc(50% - 50vw);  /* 画面幅いっぱいにはみ出させるためのネガティブマージン */
    width: 100vw;                /* 幅を画面幅いっぱいに指定 */
    }

    .intro_01 {
        line-height: 5px;
        margin-top: 3%;
    }
}


.next {
    width: 20px;
    margin: 0 auto;
}

.intro_01 {
    font-size: 7px; color: #898989; 
    text-align: right;
}

.text_big {
    font-size: 25px;
}

@media (max-width: 677px) {
    .text_big {
        font-size: 20px;
    }

    .item_list .next {
        width: 20px;
        margin: 5% auto 0;
    }
}

.mokuji {
    background-color: #f7f7f7;
    border-radius: 10px;
    padding: 16px;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.mokuji_ttl {
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}


#containouter {
    font-size: 15px;
}


.ranking {
    display: flex;
    gap: 8px;
}

.ranking_01 {
    background-color: #f2b50d;
    border-style: solid;
    border-radius: 4px;
    border-width: 1px;
    color: #fff;
    padding: 1px 3px;

}

.ranking_02 {
    background-color: #738c8c;
    border-style: solid;
    border-radius: 4px;
    border-width: 1px;
    color: #fff;
    padding: 1px 3px;

}

.ranking_03 {
    background-color: #b36b4d;
    border-style: solid;
    border-radius: 4px;
    border-width: 1px;
    color: #fff;
    padding: 1px 3px;

}

.ranking_no {
    font-size: 16px;
    margin: 2px;
}

@media (max-width: 677px) {
    #containouter a {
        font-size: 12px;
    }
    .ranking_no {
        font-size: 12px;
    }
    .mokuji_ttl {
        font-size: 20px;
    }
    .mokuji_ttl #index span::after{
        font-size: 12px;
    }
    
}

#containouter li {
    border-bottom: 1px solid #e7e7e7;
    padding: 0;
    list-style: none;
}

#containouter a {
    text-decoration: none;
    color: #666666;
}

.mokuji input[type="checkbox"] {
    display: none;
}

.mokuji label {
   padding: 5px;
   font-size: 14px;
   color: #646464;
   right: -47%;
   position: relative;
}





.mokuji input:checked ~ #containouter {
    height: auto;
    transition: all 0.5s;
}

.mokuji #containouter {
    overflow: hidden;
    height: 0;
    transition: all 0.5s;
}

.under_ttl {
    margin-top: 0;
    display: inline-block;
}

.ds_slider_01 {
    height: 870px;
}

@media (max-width:677px) {
    .ds_slider_01 {
        height: 690px;
    }
}




/*開く*/
.mokuji label:before{
    content: "[＋開く]";/*"表示"などに変更可*/}
/*閉じる*/
.mokuji input:checked ~ label:before {
     content: "[－閉じる]";/*"非表示"などに変更可*/}

.mokuji input{display:none;}
/*最初は非表示*/
.mokuji .hidden_show
{height:0;padding:0;overflow:hidden;transition:0.8s;}
/*クリックでopen*/
.mokuji input:checked ~ .hidden_show
{padding: 10px 0;height:auto;}


.tabs {
    margin-top: 15px;
}

.tab-buttons {
    display: flex;
    list-style: none;
    padding: 0;
    margin-bottom: 10px;
    
  }

 

  .tab-buttons li {
    width: 33.33%;
    text-align: center;
    padding: 5px;
    cursor: pointer;
    background: white;
    border: 1px solid #eb5a09;
    border-bottom: none;
    margin-right: 5px;
    border-radius: 8px 8px 0 0;
    font-size: 0.8rem;
    color: #eb5a09;
  }
  .tab-buttons li.active {
    background: #eb5a09;
    font-weight: bold;
    color: white;
  }
  .tab-content {
    display: none;
    margin-top: -30px;
  }
  .tab-content.active {
    display: block;
  }
  
  .shouhin_table tr th {
    width: 51px;
}

  @media (max-width: 700px) {
    .shouhin_table>table {
        width: 354px;
    }
    
    

    
  }

  @media (max-width: 700px) {
    .shouhin_table table {
        width: 100%;
    }
    
    #kosupa .shouhin_table  table tr th:nth-child(6) {
        width: 70px;
        
    }
    #kosupa .shouhin_table  table tr th:nth-child(5) {
        width: 60px;
        
    }
}

a.cta-main1st {
    font-size: 1rem;
    margin: 1rem auto;
    padding: 0.5rem;
    text-align: center;
    width: 90%;
    border-radius: 8px;
    background: linear-gradient(to bottom, #72d450, #3f9b28);
    color: #fff;
    text-decoration: none;
    display: block;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 3px #aaa;
    
    /* キラッと光る効果 */
    position: relative;
    overflow: hidden;
}

/* ぱきっとした光る効果 */
a.cta-main1st::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny 4s ease-in-out infinite;
}

@keyframes shiny {
    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用のプレフィックス付きも追加 */
@-webkit-keyframes shiny {
    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; }
}