@charset "UTF-8";

html {
	overflow-y:scroll;
    scroll-behavior: smooth;
}


img{
    max-width: 100%;
    height: auto;
}

a{
    color:#0066cc;
    transition: all .5s;
}

a img {
	border: none;
}
#top_bar a:hover img{
    opacity: 0.8;
}

#top_ttl h1{
	margin:0;
	padding:3px 0 0 0;
	font-size:14px;
	font-weight:normal;
}

.entry h2{
	font-size:14px;
	border-bottom:1px dashed #cccccc;
	background: url(/admin/template/default/images/icon_entry.png) no-repeat 0 2px;
	padding-left:20px;
}

.entry h2 a,.entry h2 a:link,.entry h2 a:visited{
	color:#0066cc;
	text-decoration:none;
}

.entry h2 a:hover{
	color:#ff66cc;
}

.bigs{
	font-weight:bold;
	font-size:48px;
}


ul li {
	list-style: none;
}
ol li {
/*	list-style: none;*/
	list-style-position:inside;
	margin:0 10px;
}

.clrfx::after {
	height: 0px; clear: both; display: block; visibility: hidden; content: ".";
}
.clrfx {
	min-height: 1px;
}
* html .clrfx {
	height: 1px;
}
ul.att li{
	margin: 0.5em 2em;
	padding:1em 0 1em 0;
	border-bottom:1px dotted #cccccc;
}
.navTab {
	position: relative; z-index: 500;
	margin: 0 auto;
	width: 1100px;

}
.navTab a {
	text-decoration: none !important;
	transition: .3s;
}

.navTab a:hover {
	text-decoration: none !important;
}

.navTab .listTab {
	background: rgb(48, 116, 186); font-weight: normal;
}
.navTab .listTab li {
	/*border-right-color: rgb(32, 95, 160); border-right-width: 1px; border-right-style: solid;*/
	float: left;
	padding:0 5px 0 5px;
/*	background:url("/admin/template/default/images/arrow_red.png") no-repeat 0 18px;*/

}
.navTab .listTab li:last-child {
	border-right-color: currentColor; border-left-color: rgb(32, 95, 160); border-right-width: medium; border-left-width: 1px; border-right-style: none; border-left-style: solid; float: right;
}
.navTab .listTab li a {
	padding: 13px 8px; height: 18px; text-align: center; color: rgb(255, 255, 255); line-height: 1.6; font-size: 90%; display: block;
}
.navTab .listTab li:first-child a {
	border-radius: 3px 0px 0px; -webkit-border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0;
}
.navTab .listTab li:last-child a {
	border-radius: 0px 3px 0px 0px; border-right-color: currentColor; border-left-color: rgb(32, 95, 160); border-right-width: medium; border-left-width: 1px; border-right-style: none; border-left-style: solid; -webkit-border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0;
}
.navTab .listTab li.unrgstrd a {
	width: 140px;
}
.navTab .lstCtgry {
	background: rgb(255, 255, 255); border-width: medium 1px 1px; border-style: none solid solid; border-color: currentColor rgb(170, 170, 170) rgb(170, 170, 170); border-image: none; left: 110px; top: 34px; font-size: 88%; position: absolute; z-index: 100; box-shadow: 0px 1px 1px 0px #aaa; -moz-box-shadow: 0px 1px 1px 0px #aaa; -webkit-box-shadow: 0px 1px 1px 0px #aaa;
}
.navTab .lstCtgry a {
	padding: 5px 10px; color: rgb(17, 17, 17); overflow: hidden; display: block; -ms-zoom: 1;
}
.navTab .lstCtgry li {
	padding: 0px;
}
.navTab .lstCtgry li a:hover {
	background: rgb(224, 194, 255);
}
.navTab .lstCtgry .lnk a {
	background: rgb(240, 240, 240); text-align: right;
}

.p16p{
	font-size:16px;
}
.p18p{
	font-size:18px;
}
.p20p{
	font-size:20px;
}
.p24p{
	font-size:24px;
}
.p32p{
	font-size:32px;
}

.bigs{
	font-size:48px;
}

/*pager*/
.pagination {
    border-radius: 4px;
    display: inline-block;
    margin: 20px 0;
    padding-left: 0;
}
.pagination > li {
    display: inline;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}
.pagination > li > a, .pagination > li > span {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #428bca;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
}
.pagination > .active > a, .pagination > pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #428bca;
    border-color: #428bca;
    color: #fff;
    cursor: default;
    z-index: 2;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    background-color: #eee;
    border-color: #ddd;
    color: #2a6496;
}

.api_video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.api_video iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

/*　トップページカラム表示*/
#v_list,#s_list{
	width:99%;
	margin:0 auto 20px;
	box-sizing: border-box;
}

#v_list::after{
    clear: both;
    content: "";
    display: block;
    height: 0;
}
#s_list::after{
    clear: both;
    content: "";
    display: block;
    height: 0;
}

#s_list section{
	background:#fff4ff;
}

section {
    border: 1px solid #cccccc;
    margin: 5px;
    padding: 5px;
    width: 160px;
	float: left;
	height:200px;
	overflow:hidden;
}

section::after {
    clear: both;
    content: "";
    display: block;
    height: 0;
}

.p_item{
	clear:both;
	position:relative;

}

.tmb{
    margin-bottom: 5px;
}

.tmb img{
	width:160px;
}

.p_txt {
    margin: 0 0 0 0;
    max-width: 500px;
    padding: 0;
    line-height: 1.2;
}

.p_txt2 {
    margin: 0 0 0 0;
    max-width: 500px;
    padding: 0;
    line-height: 1.2;
}


.p_txt a,.p_txt2 a{
	font-weight:normal;
	font-size:13px;
	text-decoration:none;
}

.p_txt a,.p_txt a:link,.p_txt a:visited,.p_txt2 a,.p_txt2 a:link,.p_txt2 a:visited{
	color:#666666;
}

.p_txt a:hover,.p_txt2 a:hover{
	color:#FFBFC1;
}

.price_txt{
	position:absolute;
	top:180px;
	right:3px;
	font-size:9px;
	color:#aaaaaa;
}

#v_list a:hover img{
    opacity: 0.8;
}

#footer a,#footer a:link,#footer a:visited{
	color:#ffffff;
	text-decoration:none;
}

#footer a:hover{
	color:#ff66cc;
}

.mbox a,.mbox a:link,.mbox a:visited{
	color:#0066cc;
	text-decoration:none;
}

.mbox a:hover{
	color:#ff66cc;
}

.recent_img img{
	width:94%;
}

.recent_img a:hover img{
	opacity:0.8;
}


.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

.mbox{
/*	border:1px solid #603;*/
	background:#ffffff;
	margin:0 0 25px 0;
}

.mbox h3{
	font-size:15px;
	color:#444444;
	margin:0 0 3px 0;
	padding:5px;
	text-align:left;
/*	border-bottom:2px solid #cccccc;*/
}

.mbox p{
	margin:10px;
	
}

.mbox ul{
	margin:3px 10px 10px 10px;
	
}

.mbox ul li{
	list-style:none;
	padding:5px 0 5px 0;
/*	background: url(/admin/template/default/images/icon_category2.png) no-repeat 0 6px;*/
	border-bottom:1px dotted #cccccc;
}

.mbox ul li a,.mbox ul li a:visited{
	color:#0066cc;
	text-decoration:none;
}

.mbox ul li a:hover{
	color:#ff66cc;
}

a:hover{
	color:#ff66cc;
}

#main dl{
	margin:20px 0 20px 10px;
}

#main dl dt{
	margin:0 0 0 10px;
	padding:5px 0 0 0;
	border-top:1px dashed #cccccc;
}

#main dl dd{
	margin:0 0 50px 10px;
	font-weight:bold;
	font-size:18px;
}

#main ul{
	margin:3px 10px 10px 10px;
	padding: 15px;
	background: aliceblue;
	border: 2px solid #ccc;
	
}

#main ul li{
	list-style:none;
	padding:5px 0 5px 22px;
	background: url(/admin/template/default/images/check.png) no-repeat 0 6px;
	font-size: large;
}

/* #main ul li:before{
	content: '☑ ';
	color:#ff0000;
	size: large;
} */

#main .p_navi ul.pagination{
	margin:3px 10px 10px 10px;
	padding: 15px;
	background:none;
	border:none;
	
}

#main .p_navi ul.pagination li{
	list-style:none;
	padding:5px 0 5px 22px;
	background:none;
	font-size:14px;
}

#main ul.stmp{
	margin:0px 0 0 15px;
	padding:5px;
	background:none;
	border:none;
	
}

#main ul.stmp li{
	padding:5px 0 5px 22px;
	font-size:14px;
}


/* ページの見出し　*/
    .head_h1 {
        margin:  0;                 /* デフォルトCSS打ち消し */
        position:  relative;        /* 位置調整 */
        font-weight:  normal;       /* 文字の太さ調整 */
        font-size: 21px;            /* 文字サイズ指定 */
        padding: 10px 5px 10px 30px;  /* 余白指定 */
        margin-bottom:  20px;       /* 周りの余白指定 */
    }
    p {
        margin:  0;                 /* デフォルトCSS打ち消し */
        line-height: 2;             /* 行間調整 */
    }

    .head_h1:before {
        content: '';                /* 空の要素を作る */
        height: 110%;               /* 高さ指定 */
        width: 3px;                 /* 幅指定 */
        display:  block;            /* ブロック要素にする */
        position:  absolute;        /* 位置調整 */
        left: 14px;                 /* 位置調整 */
        top: -3px;                  /* 位置調整 */
        margin:  auto;              /* 位置調整 */
        background-color:  #fff;    /* 背景色指定 */
        transform: rotate(3deg);    /* 回転 */
    }
    .head_h1:after {
        content: '';                /* 空の要素を作る */
        height: 116%;               /* 高さ指定 */
        width: 3px;                 /* 幅指定 */
        display:  block;            /* ブロック要素にする */
        position:  absolute;        /* 位置調整 */
        left: 14px;                 /* 位置調整 */
        top: -6px;                  /* 位置調整 */
        margin:  auto;              /* 位置調整 */
        background-color:  #fff;    /* 背景色指定 */
        transform: rotate(-15deg);  /* 回転 */
    }

    .head_h2 {
        margin:  0;                 /* デフォルトCSS打ち消し */
        position:  relative;        /* 位置調整 */
        font-weight:  normal;       /* 文字の太さ調整 */
        font-size: 16px;            /* 文字サイズ指定 */
        padding: 10px 5px 10px 30px;  /* 余白指定 */
        margin-bottom:  20px;       /* 周りの余白指定 */
    }
    p {
        margin:  0;                 /* デフォルトCSS打ち消し */
        line-height: 2;             /* 行間調整 */
    }

    .head_h2:before {
        content: '';                /* 空の要素を作る */
        height: 110%;               /* 高さ指定 */
        width: 3px;                 /* 幅指定 */
        display:  block;            /* ブロック要素にする */
        position:  absolute;        /* 位置調整 */
        left: 14px;                 /* 位置調整 */
        top: -3px;                  /* 位置調整 */
        margin:  auto;              /* 位置調整 */
        background-color:  #fff;    /* 背景色指定 */
        transform: rotate(3deg);    /* 回転 */
    }
    .head_h2:after {
        content: '';                /* 空の要素を作る */
        height: 116%;               /* 高さ指定 */
        width: 3px;                 /* 幅指定 */
        display:  block;            /* ブロック要素にする */
        position:  absolute;        /* 位置調整 */
        left: 14px;                 /* 位置調整 */
        top: -6px;                  /* 位置調整 */
        margin:  auto;              /* 位置調整 */
        background-color:  #fff;    /* 背景色指定 */
        transform: rotate(-15deg);  /* 回転 */
    }

.pg_item .pg_img {
    float: left;
    border: 1px solid #cccccc;
    padding: 5px;
    width: 320px;
}

.pg_item .pg_img img {
    width: 320px;
}

.pg_item .pg_detail {
    float: left;
    margin-left: 10px;
    width: 360px;
}

.pg_item::after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}



#main dl.pg dt{
float: left;
margin: 0;
padding: 0;
width: 100px;
position: relative;
font-size: .8em;
border-top:none;
}


#main dl.pg{
border-top: 1px dotted #aaa;
padding-top:6px;
margin: 2px 0 0 10px;
width:98%;
}

#main dl.pg dd{
margin: 0 0 6px;
padding: 0 0 6px 110px;
border-bottom: 1px dotted #aaa;
font-size: 1.0em;
font-weight:normal;
}




#main input[type=text],#main input[type=email],#main input[type=password]{
	border: 1px solid #88a;
	background-color:#F8EFEF;
	border-top-color: rgb(204, 204, 204);
	border-right-color: rgb(204, 204, 204);
	border-bottom-color: rgb(204, 204, 204);
	border-left-color: rgb(204, 204, 204);
	font-size: 20px;
	width: 70%;
	min-height: 30px;
	display: block;
	margin-bottom: 15px;
	margin-top: 5px;
	outline: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
	padding:5px;
	color:#444444;
}

#main textarea{
	border: 1px solid #88a;
	background-color:#F8EFEF;
	border-top-color: rgb(204, 204, 204);
	border-right-color: rgb(204, 204, 204);
	border-bottom-color: rgb(204, 204, 204);
	border-left-color: rgb(204, 204, 204);
	padding:5px;
	font-size: 20px;
	width: 90%;
	min-height: 30px;
	display: block;
	margin-bottom: 15px;
	margin-top: 5px;
	outline: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
	color:#444444;
}


.button_example{
	border-top-color: #CB236C;border-right-color: #819BCB;border-bottom-color: #819BCB;border-left-color: #819BCB;border-width: 18px 1px 1px 1px;border-style: solid;-webkit-box-shadow: #B4B5B5 0px 1px 1px inset;-moz-box-shadow: #B4B5B5 0px 1px 1px inset; box-shadow: #B4B5B5 0px 1px 1px inset; -webkit-border-radius: 8px; -moz-border-radius: 8px;border-radius: 8px;font-size:34px;font-family:arial, helvetica, sans-serif; padding: 15px 100px 15px 100px; text-decoration:none; display:inline-block;text-shadow: 2px 2px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
	background-color: #3093C7; background-image: -webkit-gradient(linear, left top, left bottom, from(#3093C7), to(#1C5A85));
	background-image: -webkit-linear-gradient(top, #3093C7, #1C5A85);
	background-image: -moz-linear-gradient(top, #3093C7, #1C5A85);
	background-image: -ms-linear-gradient(top, #3093C7, #1C5A85);
	background-image: -o-linear-gradient(top, #3093C7, #1C5A85);
	background-image: linear-gradient(to bottom, #3093C7, #1C5A85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093C7, endColorstr=#1C5A85);
}

.button_example a{
	color:#FFFFFF;
	text-decoration:none;
}

.button_example:hover{
	border-top-color: #FFDE0A;border-right-color: #819BCB;border-bottom-color: #819BCB;border-left-color: #819BCB;border-width: 18px 1px 1px 1px;border-style: solid;
	background-color: #26759E; background-image: -webkit-gradient(linear, left top, left bottom, from(#26759E), to(#133D5B));
	background-image: -webkit-linear-gradient(top, #26759E, #133D5B);
	background-image: -moz-linear-gradient(top, #26759E, #133D5B);
	background-image: -ms-linear-gradient(top, #26759E, #133D5B);
	background-image: -o-linear-gradient(top, #26759E, #133D5B);
	background-image: linear-gradient(to bottom, #26759E, #133D5B);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759E, endColorstr=#133D5B);
	cursor:pointer;
}

.btn01{
    display: block;
    width: 300px;
    padding: 15px 0;
    margin: auto;
    background: #569f3c;
    color: #FFF;
    text-decoration: none;
    text-align: center;
}
.btn01:hover{
    background: #225f0d;
		color:#ffffff;
}

.btn02 {
	/*キラッと光る基点とするためrelativeを指定*/
	position: relative;
  display: block;
  width: 300px;
  padding: 15px 0;
  margin: auto;
  background:#D88701;
  color: #FFF;
  text-decoration: none;
  text-align: center;
	cursor:pointer;
}

/*キラッと光る*/
.btn02::before {
content: '';
	/*絶対配置でキラッと光るの位置を決める*/
position: absolute;
top: 0;
left: -75%;
	/*キラッと光る形状*/
	width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.btn02:hover::before {
animation: shine 0.7s;
}

.btn02:hover{
	color:#ffffff;
	}
	
@keyframes shine {
100% {
	left: 125%;
}
}


/*　ランキング　*/
.mbox ul.ranking li{
	padding:3px 0 0 0;
	background: url(/admin/template/default/images/icon_r0.fw.png) no-repeat 0 5px;

}

.mbox ul.ranking li .rank_thumb{
	float:left;
	padding:40px 0 3px 0;
	width:70px;
}

.mbox ul.ranking li .rank_txt{
	float:left;
	padding:10px 0 3px 5px;
	width:200px;
}

.mbox ul.ranking li:first-child{
	background: url(/admin/template/default/images/icon_r1.fw.png) no-repeat 0 5px;
}
.mbox ul.ranking li:nth-child(2){
	background: url(/admin/template/default/images/icon_r2.fw.png) no-repeat 0 5px;
}
.mbox ul.ranking li:nth-child(3){
	background: url(/admin/template/default/images/icon_r3.fw.png) no-repeat 0 5px;
}
.mbox ul.ranking li:nth-child(4){
	background: url(/admin/template/default/images/icon_r4.fw.png) no-repeat 0 5px;
}
.mbox ul.ranking li:nth-child(5){
	background: url(/admin/template/default/images/icon_r5.fw.png) no-repeat 0 5px;
}
.mbox ul.ranking li:nth-child(6){
	background: url(/admin/template/default/images/icon_r6.fw.png) no-repeat 0 5px;
}
.mbox ul.ranking li:nth-child(7){
	background: url(/admin/template/default/images/icon_r7.fw.png) no-repeat 0 5px;
}
.mbox ul.ranking li:nth-child(8){
	background: url(/admin/template/default/images/icon_r8.fw.png) no-repeat 0 5px;
}
.mbox ul.ranking li:nth-child(9){
	background: url(/admin/template/default/images/icon_r9.fw.png) no-repeat 0 5px;
}
.mbox ul.ranking li:nth-child(10){
	background: url(/admin/template/default/images/icon_r10.fw.png) no-repeat 0 5px;
}



/*文字列強制折り返し*/
body{
	word-break: break-all;
	overflow-wrap: break-word;
}


.p_item .tmb {
    position: relative;
}
.p_item .tmb::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255,255,255,.2);
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}
.p_item .tmb:hover::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
}
@-webkit-keyframes circle {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}
@keyframes circle {
    0% {
    opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

table{margin-bottom: 20px; border-collapse: collapse; border-spacing: 0; }
table th{
	background: #f0f0f0;
}
table th,table td{
	border: 1px solid #aaaaaa;
	vertical-align: top;
	padding: 5px;
}


/*星表示用*/
.star_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #dddddd; /* グレーカラー設定 */
    font-size:22px; /* 星のサイズ指定 */
		top:2px;
}

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

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

.star_rating[data-rate="5"]:after{ width: 100%; }
.star_rating[data-rate="4.9"]:after{ width: 94%; }
.star_rating[data-rate="4.8"]:after{ width: 93%; }
.star_rating[data-rate="4.7"]:after{ width: 92%; }
.star_rating[data-rate="4.6"]:after{ width: 91%; }
.star_rating[data-rate="4.5"]:after{ width: 90%; }
.star_rating[data-rate="4.4"]:after{ width: 89%; }
.star_rating[data-rate="4.3"]:after{ width: 88%; }
.star_rating[data-rate="4.2"]:after{ width: 87%; }
.star_rating[data-rate="4.1"]:after{ width: 86%; }
.star_rating[data-rate="4"]:after{ width: 80%; }
.star_rating[data-rate="3.9"]:after{ width: 74%; }
.star_rating[data-rate="3.8"]:after{ width: 73%; }
.star_rating[data-rate="3.7"]:after{ width: 72%; }
.star_rating[data-rate="3.6"]:after{ width: 71%; }
.star_rating[data-rate="3.5"]:after{ width: 70%; }
.star_rating[data-rate="3.4"]:after{ width: 69%; }
.star_rating[data-rate="3.3"]:after{ width: 68%; }
.star_rating[data-rate="3.2"]:after{ width: 67%; }
.star_rating[data-rate="3.1"]:after{ width: 66%; }
.star_rating[data-rate="3"]:after{ width: 60%; }
.star_rating[data-rate="2.9"]:after{ width: 54%; }
.star_rating[data-rate="2.8"]:after{ width: 53%; }
.star_rating[data-rate="2.7"]:after{ width: 52%; }
.star_rating[data-rate="2.6"]:after{ width: 51%; }
.star_rating[data-rate="2.5"]:after{ width: 50%; }
.star_rating[data-rate="2.4"]:after{ width: 49%; }
.star_rating[data-rate="2.3"]:after{ width: 48%; }
.star_rating[data-rate="2.2"]:after{ width: 47%; }
.star_rating[data-rate="2.1"]:after{ width: 46%; }
.star_rating[data-rate="2"]:after{ width: 40%; }
.star_rating[data-rate="1.9"]:after{ width: 34%; }
.star_rating[data-rate="1.8"]:after{ width: 33%; }
.star_rating[data-rate="1.7"]:after{ width: 32%; }
.star_rating[data-rate="1.6"]:after{ width: 31%; }
.star_rating[data-rate="1.5"]:after{ width: 30%; }
.star_rating[data-rate="1.4"]:after{ width: 29%; }
.star_rating[data-rate="1.3"]:after{ width: 28%; }
.star_rating[data-rate="1.2"]:after{ width: 27%; }
.star_rating[data-rate="1.1"]:after{ width: 26%; }
.star_rating[data-rate="1"]:after{ width: 20%; }
.star_rating[data-rate="0.9"]:after{ width: 14%; }
.star_rating[data-rate="0.8"]:after{ width: 13%; }
.star_rating[data-rate="0.7"]:after{ width: 12%; }
.star_rating[data-rate="0.6"]:after{ width: 11%; }
.star_rating[data-rate="0.5"]:after{ width: 10%; }
.star_rating[data-rate="0.4"]:after{ width: 9%; }
.star_rating[data-rate="0.3"]:after{ width: 8%; }
.star_rating[data-rate="0.2"]:after{ width: 7%; }
.star_rating[data-rate="0.1"]:after{ width: 6%; }
.star_rating[data-rate="0"]:after{ width: 0%; }


/*星登録用*/

.stars span{
  display: flex;               /* 要素をフレックスボックスにする */
  flex-direction: row-reverse; /* 星を逆順に並べる */
  justify-content: flex-end;   /* 逆順なので、左寄せにする */
}

.stars input[type='radio']{
	position: absolute;
	opacity:0;
}

.stars label{
  color: #D2D2D2;              /* 未選択の星をグレー色に指定 */
  font-size: 30px;             /* 星の大きさを30pxに指定 */
  padding: 0 5px;              /* 左右の余白を5pxに指定 */
  cursor: pointer;             /* カーソルが上に乗ったときに指の形にする */
}

.stars label:hover,
.stars label:hover ~ label,
.stars input[type='radio']:checked ~ label{
  color: #F8C601;              /* 選択された星以降をすべて黄色にする */
}

/*ページトップへ戻るボタン*/
#page_top {
    position: fixed;
    bottom: 30px;
    right: 20px;
    opacity:0.8;
}
#page_top a {
    background-color: #999;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 20px 20px;
}
#page_top a:hover {
    background-color: #666;
    text-decoration: none;
}

.reviewwrap{
	background:#f2f2ff;
    padding:15px;
}
.review-comment{
	padding:15px;
    margin-bottom:10px;
	background:#ffffff;
	border:1px solid #cccccc;
}
.review-comment p{
    line-height:1.6;
}
.review-p{
    margin-top:10px;
	font-style:italic;
	color:#cccccc;
	text-align:right;
}

/*ボタン*/
a.btn_red{
	border:1px solid #df0909;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius:3px;
	font-size:1.6em;
	font-family:arial, helvetica, sans-serif;
	padding: 28px 10px 28px 10px;
	text-decoration:none;
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	font-weight:bold;
	color: #FFFFFF;
	background-color: #f62b2b;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f62b2b), to(#d20202));
	background-image: -webkit-linear-gradient(top, #f62b2b, #d20202);
	background-image: -moz-linear-gradient(top, #f62b2b, #d20202);
	background-image: -ms-linear-gradient(top, #f62b2b, #d20202);
	background-image: -o-linear-gradient(top, #f62b2b, #d20202);
	background-image: linear-gradient(to bottom, #f62b2b, #d20202);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f62b2b, endColorstr=#d20202);
	width:74%;
}

a.btn_red:hover{
	border:1px solid #b30808;
	background-color: #e40a0a;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e40a0a), to(#9f0202));
	background-image: -webkit-linear-gradient(top, #e40a0a, #9f0202);
	background-image: -moz-linear-gradient(top, #e40a0a, #9f0202);
	background-image: -ms-linear-gradient(top, #e40a0a, #9f0202);
	background-image: -o-linear-gradient(top, #e40a0a, #9f0202);
	background-image: linear-gradient(to bottom, #e40a0a, #9f0202);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e40a0a, endColorstr=#9f0202);
}

a.btn_blue{
	border:1px solid #25729a;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius:3px;
	font-size:1.6em;
	font-family:arial, helvetica, sans-serif;
	padding: 28px 10px 28px 10px;
	text-decoration:none;
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	font-weight:bold;
	color: #FFFFFF;
	background-color: #3093c7;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#3093c7), to(#1c5a85));
	background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
	background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
	background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
	width:74%;
}

a.btn_blue:hover{
	border:1px solid #1c5675;
	background-color: #26759e;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#26759e), to(#133d5b));
	background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
	background-image: -moz-linear-gradient(top, #26759e, #133d5b);
	background-image: -ms-linear-gradient(top, #26759e, #133d5b);
	background-image: -o-linear-gradient(top, #26759e, #133d5b);
	background-image: linear-gradient(to bottom, #26759e, #133d5b);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
}

a.btn_black{
	border:1px solid #2a2c2f;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius:3px;
	font-size:1.6em;
	font-family:arial, helvetica, sans-serif;
	padding: 28px 10px 28px 10px; text-decoration:none;
	display:inline-block;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
	font-weight:bold;
	color: #FFFFFF;
	background-color: #45484d;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#45484d), to(#000000));
	background-image: -webkit-linear-gradient(top, #45484d, #000000);
	background-image: -moz-linear-gradient(top, #45484d, #000000);
	background-image: -ms-linear-gradient(top, #45484d, #000000);
	background-image: -o-linear-gradient(top, #45484d, #000000);
	background-image: linear-gradient(to bottom, #45484d, #000000);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#45484d, endColorstr=#000000);
	width:74%;
}

a.btn_black:hover{
	border:1px solid #151617;
	background-color: #2d2f32;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#2d2f32), to(#1a1a1a));
	background-image: -webkit-linear-gradient(top, #2d2f32, #1a1a1a);
	background-image: -moz-linear-gradient(top, #2d2f32, #1a1a1a);
	background-image: -ms-linear-gradient(top, #2d2f32, #1a1a1a);
	background-image: -o-linear-gradient(top, #2d2f32, #1a1a1a);
	background-image: linear-gradient(to bottom, #2d2f32, #1a1a1a);
	filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#2d2f32, endColorstr=#1a1a1a);
}

.products {
    background: #f2f2ff;
    padding: 15px;
    border:1px solid #cccccc;
}
table.product-table{
    width:100%;
}
table.product-table td{
    background:#ffffff;
}

/*　新着口コミ用　*/
a.com_card{
	color:#444444;
	text-decoration:none;
	position: relative;
  display: block;
}
.t_com{
	display:flex;
	box-shadow: 0 1px 5px rgba(0,0,0,0.2);
	margin:0 auto 10px;
	height:105px;
	width:97%;
}
.com{
	width:80%;
	padding:5px;
}
.com_img{
		width:20%;
}
.com_img img{
		width:140px;
}
.com_ttl{
	font-size:15px;
	font-weight:bold;
	color:#0066cc;
}

.com_name span{
	display:inline-block;
}
/*キラッと光る*/
a.com_card::before {
content: '';
	/*絶対配置でキラッと光るの位置を決める*/
position: absolute;
top: 0;
left: -75%;
	/*キラッと光る形状*/
	width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 100%);
transform: skewX(-45deg);
}
.t_com:hover{
	background:#FDF4FF;
}
/*hoverした際の移動のアニメーション*/
a.com_card:hover::before {
animation: shine 1.3s;
}

@keyframes shine {
100% {
	left: 125%;
}
}

/* ハンバーガーメニュー */
.menu-content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 80;
	background-color: #3584bb;
	overflow-y:scroll;
}
.menu-content ul {
	padding: 10px 15px 0;
}
.menu-content ul li {
	border-bottom: solid 1px #ffffff;
	list-style: none;
}
.menu-content ul li a {
	display: block;
	width: 100%;
	font-size: 15px;
	box-sizing: border-box;
	color:#ffffff;
	text-decoration: none;
	padding: 9px 15px 10px 0;
	position: relative;
}
.menu-content ul li a::before {
	content: "";
	width: 7px;
	height: 7px;
	border-top: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	transform: rotate(45deg);
	position: absolute;
	right: 11px;
	top: 16px;
}
#menu-btn-check:checked ~ .menu-btn{
	background-color:transparent;/* メニュー展開時の背景を透明にする */
}

#menu-btn-check:checked ~ .menu-btn span {
	background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
	bottom: 0;
	transform: rotate(45deg);
  transition: 0.5s;
}
#menu-btn-check:checked ~ .menu-btn span::after {
	top: 0;
	transform: rotate(-45deg);
  transition: 0.5s;
}

#menu-btn-check {
	display: none;
}

.menu-btn {
	position: fixed;
	top: 3px;
	right: 7px;
	display: none;
	height: 50px;
	width: 50px;
	justify-content: center;
	align-items: center;
	z-index: 99999;
	background-color: #000000;
	cursor:pointer;
	border-radius:5px;
	transition: all 0.5s 0s ease-out;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
	content: '';
	display: block;
	height: 3px;
	width: 25px;
	border-radius: 3px;
	background-color: #ffffff;
	position: absolute;
  transition: 0.5s;
}
.menu-btn span:before {
	bottom: 8px;
}
.menu-btn span:after {
	top: 8px;
}

.menu-content {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 100%;/*leftの値を変更してメニューを画面外へ*/
	z-index: 9999;
	background-color:rgba(0, 0, 0, 0.9);
	transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
	left: 0;/*メニューを画面内へ*/
}


/*　ランキングテンプレート　*/
.rank-wrap{
	margin-bottom: 1.5em;
}
.rank-rev{
	display:flex;
}
.rank-rev h2{
	margin:0.4em 0 0.2em 1em;
	font-size: 1.3em;
	text-align:left;
	padding:0;
	background:none;
	color:#000000;
}
#main .rank-title p{
	margin:0.2em 0 0.2em 1.2em;
}
.rank-wrap .rank-desc{
  background-color: #f9f9f9;
  padding: .8em 1em;
  margin-bottom: 1em;
}
.rank-btn-wrap{
	display:flex;
	margin:0;
}
.rank-buy-link,.rank-desc-link{
	flex:1;
	margin:5px;
}
.rank-buy-link a,.rank-desc-link a{
	color: #fff;
	padding:0.8em 0.8em;
	border-radius: 3px;
	display: inline-block;
	width:92%;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}
.rank-buy-link a{
	background:#2bc136;
}

.rank-desc-link a{
	background:#ce3a2f;
}

#main p.star_wrap{
	margin: -0.8em 0 0.2em 1.5em;
}


/*　比較テーブル　*/
.review_table{
	margin-bottom:1em;
	max-width: 94%;
	margin: 0 auto;
}

.review_table table{
	border:1px solid #cccccc;
	border-collapse:collapse;
	width: 100%;
}

.review_table table th,.review_table table td{
	border:1px solid #cccccc;
	padding:7px;
}

.review_table table th{
	width:25%;
	background:#f9f9f9;
}
.review_table table td{
	width:75%;
}





/*===============================================
●style.css 画面の横幅が769px以上
===============================================*/

@media screen and (min-width: 769px){

body, div, dl, dt, dd, ul, ol, li, table, th, td,fieldset, pre, form, p, blockquote{
	margin: 0;
	padding: 0;
}

body{
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 14px;
	line-height: 1.6em;
	color:#444444;
}

#wrapper{
	width: 1100px;
	text-align: left;
	margin: 10px auto;
	background-color: #ffffff;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);

}

#top_bar{
	padding:5px;
}

#top_bar img{
	padding:0;
	margin:0;
	vertical-align:middle;
}

#top_ttl{
	margin:0 auto;
	width:1100px;
}

#top_ttl::after{
    clear: both;
    content: "";
    display: block;
    height: 0;
}

#top_site_ttl{
	float:left;
}

#top_rss{
	float:right;
	margin-right:10px;
}

#topper2{
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.17);
}

#header{
	background-color: #FFFFFF;
	background: url();
	margin: 0 auto;
	width: 1100px;
	line-height: 1.0em;
	padding:0px 0 0px 0;
}



#menu{
    clear: both;
	margin:10px 0 0 0;
	width: 200px;
    height: 100%;
	background-color: #f0f0f0;
    float: left;
}

#main{
	margin:10px 0 10px 0;
	padding:10px;
	width: 750px;
    height: 100%;
	/* background-color: #ffffff; */
    float: left;
    overflow:hidden;
	/* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.27); */
}
/*
#main h2{
	font-size:20px;
	color:#444444;
	line-height:150%;
	margin:10px 0 10px 5px;
}
*/

#menu2{
	margin:10px 0 10px 15px;
	padding:5px;
	width: 305px;
    height: 100%;
	/* background-color: #ffffff; */
    float: left;
	/* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.27); */
}


#footer{
    clear: both;
/*	width: 1100px;*/
	background:#603;
	color:#ffffff;
    text-align: center;
	margin: 0 auto;
	padding: 20px 0 40px;
}


#main .title_bar {
	margin:0;
	overflow: hidden;
}

.ttl {
	padding:5px;
	width: 100%;
	overflow: hidden;
	clear: both;
	border-top-color: rgb(170, 170, 170);
	border-top-width:
	1px; border-top-style: solid;
	background-color: rgb(234, 234, 234);
}

h1{
	line-height:1.1em;
}


#main .title_bar .ttl h2 {
	padding: 0px 10px;
	font-weight:bold;
	float: left;
}

#main .title_bar .ttl p {
	padding: 0px 10px;
}

.content{
	width:90%;
	background:#ffffff;
	border:1px solid #603;
	margin:0 auto 10px;
	padding:10px;
}

.date{
	margin:0 auto 10px;
	width:90%;
	text-align:right;
}

.banner{
	margin:0 auto 10px;
	width:94%;
}

.nanashi{
	font-weight:bold;
	color:green;
	padding-right:5px;
}
.times{
	font-size:12px;
}

.red{
	color:#ff0000;
}

.ress{
	margin:0 0 50px 10px;
	font-weight:bold;
	font-size:18px;
}

.blue{
	color:#0066cc;
}


#mainSearchWrap {
    background-color: rgb(244, 243, 240);
    margin-bottom: 20px;
    padding:0;
}

#mainSearch {
    font-size: 75%;
    position: relative;
    text-align: center;
}

form {
    margin: 0;
    padding: 0;
}

#mainSearch fieldset {
    margin: 0;
    display: inline;
    padding-right: 50px;
    border:none;
}

#mainSearch .search-title {
    margin: 0;
    font-size: 120%;
    font-weight: bold;
    padding: 10px 7px 0 0;
}

.search-box {
    background-color: rgb(169, 169, 169);
    margin-bottom: 2px;
    margin-top: 2px;
    padding: 6px;
}

.mainsearch-txt {
    background: rgb(255, 255, 255) none repeat scroll 0 0;
/*    border: medium none currentcolor;*/
	border:2px solid #cccccc;
    color: rgb(120, 120, 120);
    font-size: 15px;
    height: 24px;
    line-height: 1.5;
    margin-right: 0;
    padding: 2px 5px 3px;
    vertical-align: middle;
    width: 200px;
}

#mainSearch .searchBottun {
    line-height: 1.22;
    margin-top: 1px;
    padding: 3px 2px 3px 5px;
}

.mainsearch-btn {
    background: rgba(0, 0, 0, 0) url("/admin/template/default/images/bg_navi_btns_mod_area.png") no-repeat scroll 0 -227px;
    border: medium none currentcolor;
    cursor: pointer;
    font-weight: bold;
    height: 33px;
    letter-spacing: 0.3em;
    overflow: hidden;
    text-indent: -9998px;
    vertical-align: middle;
    width: 80px;
}

.un_line {
	border-bottom-color: rgb(203, 212, 140); border-bottom-width: 1px; border-bottom-style: dotted;
}

.big_titleQstn {
	background: url("/admin/template/default/images/kaiketu.png") no-repeat;
}

.big_titleBA{
	background: url("/admin/template/default/images/best.png") no-repeat;
	/* background-position: right 30px; */
}

.qa_back {
	/* background-position: right 30px; */
	background-color:#fafafa;
}

.usr_icon {
	margin: 0px 10px 0px 5px; width: 60px; float: left;
}
.usrInfo {
	padding: 0px 0px 30px;
}
.usrInfo .prof {
	margin: 0px 10px 0px 0px; float: left;
}
.usrInfo .name {
	width: 360px; float: left;
}
.usrInfo .day {
	float: right;
}
.usrInfo .name {
	overflow: hidden; -ms-word-break: break-all; -ms-word-wrap: break-word;
}
.usrInfo .day {
	padding: 0px 0px 0px 20px; width: 160px; text-align: right; font-size: 88%; vertical-align: top;
}
.usrInfo .day span.time {
	padding: 0px 0px 0px 8px;
}

.usrQstn {
	width: 90%; float: left;
}

.re_textsup {
	margin: 0px 0px 37px;
}
.re_textsup span {
	margin: 0px 0px 10px; padding: 5px 5px 2px; width: 35px; color: rgb(255, 255, 255); line-height: 1; font-size: 90%; font-weight: bold; display: block; background-color: rgb(153, 153, 153);
}

.plus_an {
	padding-top: 20px;
	padding-bottom: 20px;
	border-top-color: rgb(221, 221, 221);
	border-top-width: 1px;
	border-top-style: solid;
}











}