@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: #222;
	text-decoration: none;
}

a:visited {
	color: #222;
}

a:hover,
a:active {
	text-decoration: none;
}


/*初期設定
----------------------------------------------------*/
#rapper{
	width: 100%;
	padding: 0 0 0 0;
	overflow: hidden;
	color: #222;
	background: #fff;
}




#content {
	margin:0 auto;
	width: 700px;
	text-align: left;
	background-color: #fff;
	padding:15px 30px;
}

/*.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;
}



/*--------------------▼▼▼▼ TOPにsearch_form.htmlを設置する際に必要なcss ▼▼▼▼--------------------*/
/*--------------------search.html内のtable関係共用css--------------------*/
tr , td , th { /*（TOPにsearch_form.htmlを設置する際はclassを追加すること）*/
    border: 1px solid #ccc;
    padding: 5px 10px 5px 10px;
    text-align: center;
}

/*--------------------検索(search_form.html用css)--------------------*/
.form .searchtable {
    margin: auto;
}
.searchtable{
    line-height: 25px;
    padding: 5px 10px 5px 10px;
    text-align: center;
}
.index_search td{
    border: none;
}
.index_search {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    font-size: 1em;
}
.searchtable .searchtabletitle{
    min-width: 120px;
    background-color: #f6f6f6;
    padding: 10px;
}
.index_search th {
    border-collapse: collapse;
    background-color: #f6f6f6;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    font-size: 80%;
    padding: 10px;
    line-height: 1.4;
    border-right: 1px solid #ccc;
    margin: auto;
}
.index_search td {
    border-collapse: collapse;
    text-align: left;
    vertical-align: middle;
    font-size: 80%;
    width: 70%;
    padding: 0px 0px 0px 30px;
}
.searchtable .searchbutton {
    background-color: #FF6D46;
    border: none;
    color: white;
    padding: 10px 50px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    line-height: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 42%;
}
.searchtable .searchcenter {
    text-align: center;
}
@media screen and (max-width: 760px){
    .index_search th {
        border: none;
        color: #464646;
        font-size: 16px;
        width: 100%;
        display: block;
    }
    .index_search td {
        border: none;
        padding: 10px;
        font-size: 14px;
        width: 100%;
        display: block;
        text-align: center;
    }
    .index_search tr {
        border: none;
    }
    .searchtable .searchbutton {
        width: 80%;
    }
}

/*--------------------▲▲▲▲ TOPにsearch_form.htmlを設置する際に必要なcss ▲▲▲▲--------------------*/

/*--------------------検索数--------------------*/
.searchordercontainer table {
    margin: auto;
    border-collapse: collapse;
    border-spacing: 0;
}
.searchordercontainer table tr td {
    margin: auto;
    border: 1px solid #cfcfcf;
}
.fontsizenormal {
    font-size: 16px;
}
.searchordercontainer dd {
    display: inline-block;
    margin: auto;
    line-height: 20px;
}
@media screen and (max-width: 760px){
    .fontsizenormal {
        font-size: 0.8em;
    }
}

/*--------------------各商品--------------------*/
#sort_table {
    border-collapse: collapse;
    width: 100%;
}
.eachobject {
    width: 100%;
    margin: 0 auto;
}
.objecttable {
    margin: auto;
    width: 100%;
    border: 2px solid #ccc;
    text-align: center;
    margin: auto auto 50px auto;
}

/*--------------------商品タイトル--------------------*/
.objecttitle {
    text-align: center;
    margin: 30px auto 0;
    border-bottom: none;
    color: #fff;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    padding: 10px;
    background: #007CA7;
    width: 100%;
}
.objectimg p {
    text-align: center;
}

/*--------------------商品画像--------------------*/
.objectimg img{
    max-width: 100%;
    height: 100%;
}

/*--------------------商品詳細一覧--------------------*/
.thisinfotable {
    margin: auto;
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
table.objecttable .thisinfotable th {
    background: #C0E3F0;
    font-weight: bold;
}
.objecttable tr, .objecttable td {
    padding: 10px;
    text-align: center;
    width: 50%;
}
.thisinfotable td, th {
    border: 1px solid #cfcfcf;
    font-size: 15px;
    padding: 10px;
}
.oflBtn {
    width: 65%;
    margin: 0 auto;
}
@media screen and (max-width: 760px){
    .oflBtn {
        width: 100%;
    }
    .thisinfotable td, th {
        border: 1px solid #cfcfcf;
        font-size: 14px;
        padding: 10px;
    }
}

/*--------------------footer--------------------*/
footer{
    background-color: #cfcfcf;
    padding: 30px;
    text-align: center;
}
footer p{
    font-size: 14px;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 15px;
}
footer a{
    color: #fff;
    font-size: 16px;
}

/*追記*/
h1{
    font-size: 35px;
    font-weight: bold;
    text-align: center;
}
.red{
    color: #c53737;
    font-weight: bold;
}
@media screen and (max-width: 800px){
h1{
    font-size: 30px;
}
}



/*layout
----------------------------------------------------*/

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



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

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



h2{
	padding:10px 0;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 20px;
}

.title1{border-bottom: 3px solid #f8b551;}
.title2{border-bottom: 3px solid #f19ec2;}
.title3{border-bottom: 3px solid #287ab7;}
.title4{border-bottom: 3px solid #39b5a8;}

h3{
	padding:10px 0;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;

}

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

.pics{
	margin-bottom: 10px;
}

figure{
	margin-bottom: 20px;
	text-align: center;
}
figcaption{
	font-size: .8em;
	color: #999;
}


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

.btn11 {
    width: 100%;
    text-align: center;
    font-size: .8rem;
}


.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.6em;
    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;
}

.txt_small{
	display: inline-block;
	text-align: right;
	font-size: 12px;
	text-indent: -1em;
    margin-left: 1em;
}
.ar{
	text-align: right;
}
.fs12{
	font-size: 12px;
}
.fs14{
	font-size: 14px;
}

#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;
	color: #fff;
	font-weight:bold;
	padding:0;
	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;
	}

.table-top{
  background: #287ab7;
}

.ranking-title{
  margin: 4%;
  display: block;
}

.ranking-img{
  max-width: 73%;
  margin: 10% 10% 3% 10%;
}

.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: #ff4433;
	font-weight: bold;
}

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

#content .blue{
	color: #0066ff;
}
#content .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 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:15px;}

}

/*@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: 18px;}
	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;}

  .ranking-title{
    margin: 2%;
    display: block;
    height: 63px;
  }
}



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

}
.no1_linkbtn{
	position: fixed;
	right:50px;
	bottom: 50px;
	z-index: 5000;
	    width:320px;
    height:80px;
    line-height:80px;
}
.no1_linkbtn a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background-color: rgba(244, 73, 136,0.7);
    border:2px solid #2FAFB1;
    color:#FFFFFF;
	text-indent: 2.5em;
    font-size:20px;
    font-weight:bold;
    font-style:oblique;
    transition: all 0.8s ease;
}
.no1_linkbtn  a:hover{
    background-color: rgba(255,255,255,0.7);
    color:#2FAFB1;
    margin-left:0px;
    margin-top:0px;
    border:2px solid #2FAFB1;
    box-shadow:none;
}
.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{
	position: fixed;
	right:10px;
	bottom: 10px;
	z-index: 5000;
	    width:180px;
    height:60px;
    line-height:60px;
}
.no1_linkbtn a{
    display:block;
    width:100%;
    height:100%;
    text-decoration: none;
    background-color: rgba(244, 73, 136,0.7);
    border:2px solid #2FAFB1;
    color:#FFFFFF;
	text-indent: 0em;
    font-size:15px;
    font-weight:bold;
    font-style:oblique;
    transition: all 0.8s ease;
}
.no1_linkbtn  a:hover{
    background-color: rgba(244, 73, 136,0.7);
    color:#ffffff;
    margin-left:0px;
    margin-top:0px;
    border:2px solid #2FAFB1;
    box-shadow:none;
}
.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;
}

}
#footer a:link
{
	 text-decoration: underline;
}
.gray-box_orange a {
    display: inline-block;
    text-decoration: none;
    border: none;
    padding: .5em 1em;
    background: #287ab7;
    border-radius: 10px;
    border: 2px solid #ff8400;
    color: #fff;
    font-size: 1.6em;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 0 25px #fd782b, 0 0 20px #fd782b, 0 0 0.4px #fd782b;
    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, #ffeb6b 0%,#ff8e51 50%,#ff8e51 51%,#ffc600 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed',GradientType=0 );
}

/*---------------------------------
アコーディオンボックス
--------------------------------*/
.acbox{
  width: auto;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
}

.acbox label{
  width: auto;
  font-size: 22px; /* ラベルの文字サイズ */
  font-weight: bold;
  text-align: center;
  background: #287ab7; /* ラベルの背景色 */
  position: relative;
  display: block;
  padding:8px;
  border-radius: 4px; /* ラベルの角の丸み */
  cursor: pointer;
  color: #fff;
}

.acbox label:hover{
  background: #51a1dc; /* ラベルにマウスを乗せた時の背景色 */
}

.acbox input{
  display: none;
}

.acbox label:after{
  color: #fff;
  content:"▼"; /* ラベルのアイコン */
  position: absolute;
  font-size: 16px;
  top: 50%;
  right: 25px;
  margin-top: -14px;
}

.acbox input:checked ~ label::after {
  content:"▲"; /* ラベルをクリックした後のアイコン */
}

.acbox div{
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.15s; /* 開閉スピードの設定 */
}

.acbox input:checked ~ div{
  height: auto;
  padding: 18px; /* 開いた部分の枠内の余白 */
  border-radius: 0px;
  background: #f9f9f9; /* 開いた部分の背景色 */
  opacity: 1;
}

.acbox input:checked ~ label {
  background: #287ab7; /* クリック後のラベルの背景色 */
}

.acbox-under{
  font-size: 15px; /* 開いた部分の文字サイズ */
  color: #555555; /* 開いた部分の文字色 */
}

/*ボタン*/
.yureru-s {
    animation: yureru-s 2s infinite;
}
@keyframes yureru-s {
    0% {
        transform: translate(3px, 0px);
    }
    5% {
        transform: translate(-3px, 0px);
    }
    10% {
        transform: translate(3px, 0px);
    }
    15% {
        transform: translate(-3px, 0px);
    }
    20% {
        transform: translate(3px, 0px);
    }
    25% {
        transform: translate(-3px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
    /*font-size: 30px; フォントサイズ 自由に設定化 */
}

.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */

.star5_rating[data-rate="2.5"]:after{ width: 50%; } 

.star5_rating[data-rate="3"]:after{ width: 60%; } 

.box27 {
     position: relative;
    margin: 2em 0 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
    background: ivory;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}