@charset "UTF-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

html { -webkit-text-size-adjust: 100%; min-width: 0 !important; }

body { font-size: 62.5%; } /* =10px */

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

/* clearfix */
.clearfix:after, .clearfix:before { content: ''; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.pc_block{ display: none;}

/* --------------------------------------------------
font color
-------------------------------------------------- */
.red {color: #ff0000;}
.pink{color: #ff0080;}
.blue{color: #002DC5;}
.orange{color: #FF7700;}
.green{color: #00B206;}

/* font span */
.bold{ font-weight: bold; }
.yellow_line { background: linear-gradient(transparent 50%, #ffff00 20%); }

.none{ opacity: 0.3; }

/* --------------------------------------------------
header
-------------------------------------------------- */
#header{
	width: 100%;
    text-align: center;
	margin: auto;
}
@media (min-width: 992px){
	#header{
		width: 700px;
	}
}
/* --------------------------------------------------
common
-------------------------------------------------- */
body {
	line-height: 1;
    margin: 0 auto;
}

#wrapper {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	width: auto;
	margin: 0 auto;
	background-color: #faf0e6;
	/*padding: 0;*/
	/*-webkit-text-size-adjust: 100%;*/
	position: relative;
}

#content {
	width: 100%;
	margin: 0 auto;
	color: #333;
	font-size: 1.6em; /* 16px */
	line-height: 1.7em;	
}

@media (min-width: 992px){
	#content{
		width: 700px;
	}
}

/* breadcrumb */
.breadcrumb {
    margin: 20px 10px 10px;
    padding: 0;
	list-style: none;
	color: #333;
}

.breadcrumb li {
  display: inline;
  list-style: none;
}

.breadcrumb li:after {
  content: '>';
  padding: 0 0.2em;
  color: #555;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
	text-decoration: none;
	color: #333;
	text-decoration: underline;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------
inner
-------------------------------------------------- */
.inner{ /* base */
	width: 90%;
	margin: auto;
    padding: 15px 0 0 0;
}

p{
	width: 100%;
	padding: 5px 0;
	text-align: left;
	margin: auto;
	color: #222;
	line-height: 1.7em;
}

.pic{
	width: 100%;
    margin: auto;
    display: block;
    text-align: center;
	padding: 5px 0;
}

h1.info{
    padding: 20px;
    background: #35bbef;
    color: #fff;	
}

h5 {
  position: relative;
  padding: 1.5rem 2rem;
  color: #fff;
  font-size: 1.6em; /* 16px */
  border-radius: 10px;
  background: #ff6600;
}

h5:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #ff6600 transparent transparent transparent;
}
/* --------------------------------------------------
search
-------------------------------------------------- */
.search{
    width: 94%;
    background: #fff;
    margin: 0 auto 30px;
    border: 5px solid #65bec7;
}
.search h2.title{
    width: 100%;
    text-align: center;
    padding: 10px 0 10px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 1.2em;
    background: #65bec7;
}
button{
	background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}
button.itembutton{
flex: 1 1 auto;
    width: 90%;
    margin: 20px auto;
    padding: 16px 15px;
    text-align: center;
    font-size: 1.2em;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 100% auto;
    color: #fff;
    border-radius: 10px;
    font-weight: bold;
    display: block;
}
table button.itembutton{
    flex: 1 1 auto;
    width: 90%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-size: 0.8em;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 100% auto;
    color: #fff;
    border-radius: 7px;
    font-weight: bold;
    display: block;	
}
table button.itembutton a{
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 12px 8px;
}

button.button_o{
    background-image: linear-gradient(to top, #1b6b2c 0%, #0dcc0a 100%);
}
/*--- btn animation ---*/
.yureru-s {
    animation: yureru-s 2s infinite;
}
@keyframes yureru-s {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

.upload{
    margin: 30px auto;
    border: 3px solid #34bbef;
	background: #fff;
}
.upload .date{
	text-align: center;
    background: #34bbef;
    color: #fff;
}
.upload p{
    color: #000;
    text-align: left;
    width: 90%;
    line-height: 1.5em;
}


/* --------------------------------------------------
tables
-------------------------------------------------- */
.map-table {
	padding: 0 5%;
	margin: 0;
    border-collapse: collapse !important;
    border: 2px solid #ddd !important;
    background: #fff;
    font-size: 0.8em;
}
.map-table tr {
    text-align: center;
}
.map-table th {
    width: 20%;
    vertical-align: middle;
    border: 2px solid #ddd;
}
.map-table td {
    padding: 15px 0;
    border: 2px solid #ddd;
    width: calc(80%/3);
    line-height: 1.4em;
}
.map-table .rank-num01 {
    width: 70%;
}
.map-table td img.rank-num{
    width: 50%;	
}
.map-table .ranking-btn{
	width: 100%;
}
.map-table .ranking-btn img{
	width: 90%;
    display: block;
    margin: auto;
}

h2.table_title{
    background: #0089ff;
    color: #fff;
    font-size: 1.2em;
    text-align: center;
    padding: 6px 0;
    margin-top: 20px;	
}

/* --------------------------------------------------
about
-------------------------------------------------- */
.about{
    margin: 10px auto;
    border: 2px solid #ff3b74;
    background: #fff;
}
.about .title{
    text-align: center;
    background: #ff3b74;
    color: #fff;
    font-size: 1.3em;
    padding: 6px 0;
}
.about p{
	font-weight: bold;
    color: #333;
    text-align: left;
    width: 90%;
    line-height: 1.5em;
}

.ranking{
    background-color: #fff;
    width: auto;
    margin: 0 auto 24px;
	padding: 7px;
    position: relative;
}
.ranking .left{ float: left; width: 100%;}
.ranking .right{
	clear: both;
	width: 96%;
	margin: auto;
	padding-top: 20px;

    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.ranking.first{
	border: solid 3px #e2b73b;
    border-top: solid 3px #e2b73b;
	border-bottom: solid 3px #e2b73b;
}
.ranking.second{
	border: solid 3px #bbbbbb;
     border-top: solid 3px #bbbbbb;	
    border-bottom: solid 3px #bbbbbb;
}
.ranking.third{
	border: solid 3px #dea084;
     border-top: solid 3px #dea084;
    border-bottom: solid 3px #dea084;
}
.ranking.normal{
	border: solid 3px #ff9ebb;
	border-top: solid 3px #ff9ebb;
    border-bottom: solid 3px #ff9ebb;
}

.ranking .icon{
	/*
	position: absolute;
    top: 10px;
    left: 10px;
	*/
    width: 12%;
	float: left;
}
.ranking .rank{
	font-size: 1.9em;
    width: 72%;
    padding: 0 0 4px 0;
    text-align: left;
    margin: 7px 0 0 58px;
    font-weight: bold;
	color: #fe4c81;
}
.ranking.first .rank{ color: #fab927; margin-top: 17px; }
.ranking.second .rank{ color: #acb0b1; margin-top: 17px; }
.ranking.third .rank{ color: #c47746; margin-top: 17px; }


.ranking h2.title{
    font-size: 1.7em;
    width: 100%;
    padding: 0 0 10px 0;
    text-align: left;
    margin: 20px 0 0 0;
    /*border-bottom: 1px dashed #ff9ebb;*/
}
/*
.ranking.first h2.title{ border-bottom: 1px dashed #e2b73c; }
.ranking.second h2.title{ border-bottom: 1px dashed #bbbbbb; }
.ranking.third h2.title{ border-bottom: 1px dashed #dea084; }
*/

.ranking .evaluation{
    font-size: 1.8em;
    width: 100%;
    padding: 0 0 7px 0;
    text-align: left;
    margin: 0;
    font-weight: bold;
    border-bottom: 1px solid #d8d8d8;
}
/*.ranking .evaluation span.star{ color: #FFE313; }*/

/*-- ランキング 星評価 --*/
.ranking .evaluation span.star {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 32px;
    font-size: 32px;
}
.ranking .evaluation span.star:before, .ranking .evaluation span.star:after {
    position: absolute;
    top: 3px;
    left: 0;
    content: "★★★★★";
    display: inline-block;
    height: 32px;
    line-height: 32px;
}
.ranking .evaluation span.star:before {
  color: #ddd;
}
.ranking .evaluation span.star:after {
  color: #ffa500;
  overflow: hidden;
  white-space: nowrap;
}

.rate0:after {
  width: 0;
}

.rate1:after {
  width: 31px;
}

.rate1-5:after {
  width: 49px;
}

.rate2:after {
  width: 65px;
}

.rate2-5:after {
  width: 81px;
}

.rate3:after {
  width: 97px;
}

.rate3-5:after {
  width: 112px;
}

.rate4:after {
  width: 129px;
}

.rate4-5:after {
  width: 145px;
}

.rate5:after {
  width: 170px;
}
/*-- //ランキング 星評価 --*/


.ranking .thum{
    width: 100%;
    margin: 7px auto;;
}

.ranking .point{
    border: 2px solid #fe4c81;
    border-radius: 6px;
    margin: 12px auto 0;
}
.ranking .point h3{
    background: #fe4c81;
    color: #fff;
    padding: 4px 0;
    margin: 0 0 10px 0;
    text-align: center;
    font-size: 1.5em;
}

.ranking .point ul {
  list-style-type: none;
	padding: 0 10px;
}
.ranking .point li {
	position: relative;
    padding: 0 0 4px 20px;
    margin-bottom: 7px;
    font-weight: bold;
    border-bottom: 1px dashed #fe4c81;
    font-size: 1.2em;
}
.ranking .point li::after {
  content: '';
  display: block;
  position: absolute;
  top: .5em;
  left: 0;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fe4c81;
  border-bottom: 2px solid #fe4c81;
  transform: rotate(-45deg);
}
.ranking .point li:last-child{
	border-bottom:  none;
}

.ranking .review h3{
    position: relative;
    background: #ecfbff;
    color: #1fafd6;
    padding: 12px 0;
    margin: 20px 0 10px;
    text-align: center;
    font-size: 1.5em;
}
.ranking .review h3:before,
.ranking .review h3:after {
  position: absolute;
  left: 0;
  width: 100%;
  content: '';
  border-top: 2px solid #1fafd6;
}
.ranking .review h3:before {
  top: 6px;
}
.ranking .review h3:after {
  bottom: 6px;
}

.ranking .img{
    width: 27%;
    padding: 20px 60px 0 64px;
    float: left;
}
.ranking ul.icon_detail{
    list-style: none;
    width: 34%;
    padding: 60px 0 0 0;
    float: left;
}
.ranking ul.icon_detail li{}
.ranking .price{
    font-size: 1.0em;
    width: 100%;
    padding: 0;
    text-align: left;
    margin: 0 10px 0 10px;
	
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}
.ranking .price_normal{
    font-size: 1.0em;
    width: auto;
    padding: 0;
    text-align: left;
    margin: 10px;
	
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}
.ranking .price span.regular{
    font-size: 1.3em;
}
.ranking .price span.label{
    background-color: #e60100;
    color: #fff;
    padding: 10px;
    margin-left: 10px;
    font-size: 1.0em;
    vertical-align: top;
}
.ranking .reco{
    background-color: #ffffca;
    margin: 12px auto;
    width: 100%;
    border-radius: 10px;
    padding: 10px 20px;
	
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}
.ranking .reco .title{
    text-align: left;
    padding: 0 0 6px 0;
    width: 100%;
    margin: auto;
    border-bottom: solid 1px #333;
}
.ranking .reco ul{
    margin: 10px 20px 10px 30px;
    width: 90%;
    font-size: 1.0em;
    line-height: 1.6em;
}
.ranking .desc{
    width: 100%;	
	
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 4;
    -webkit-order: 4;
    order: 4;
}
.ranking table{
    border-collapse: separate;
    border-spacing: 0;
    width: 96%;
    margin: auto;
}
.ranking table th{
    width: 35%;
    padding: 10px;
    background-color: #e2e2e2;
    font-weight: initial;
    border-bottom: solid 4px #fff;
    border-right: solid 4px #fff;
}
.ranking table td{
    width: 55%;
    padding: 10px 20px;
    background-color: #f3f3f3;
    border-bottom: solid 4px #fff;
    border-right: solid 4px #fff;
}
.ranking button.button_r a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 20px 8px;
}
.ranking button.button_r:hover{
	opacity: 0.7;
}
.ranking .review{
    width: 100%;
    margin: auto;
}
.ranking .review .list{
    padding: 0;
    width: 100%;
    margin: 18px auto 18px;
}
.ranking .review h4{
	border-bottom: solid 1px #777;
    font-size: 1.0em;
    font-weight: initial;
    padding: 0 10px 6px 10px;
    margin: 0 auto 10px;
    width: 90%;
}
.ranking .review .review_icon{
	float: left;
    width: 16%;
    text-align: center;
    padding: 16px 0 0 0;
}
.ranking .review .review_icon span{
    text-align: center;
    display: block;
    font-size: 0.8em;
}
.ranking .review .review_icon img{
    width: 90%;
}
.review_talk {
    position: relative;
    margin: 0 10px 0 67px;
    padding: 12px;
    max-width: 80%;
    color: #555;
    font-size: 0.8em;
    background: #fffbdf;
    border-radius: 7px;
}
.review_talk.man{
	background: #dff8ff;
}
.review_talk.woman{
	background: #ffe5e5;
}

.review_talk:before {
    content: "";
    position: absolute;
    top: 34%;
    left: -20px;
    margin-top: -15px;
    border: 10px solid transparent;
    border-right: 15px solid #fffbdf;
}
.review_talk.man:before{
	border-right: 15px solid #dff8ff;
}
.review_talk.woman:before{
	border-right: 15px solid #ffe5e5;
}

.review_talk p {
	margin: 0;
	padding: 0;
    font-size: 1.1em;
}

@media (min-width: 992px){
	.ranking .review .list{
		padding: 10px 20px 0 20px;	
	}
	.ranking .review h4{
		border-bottom: solid 1px #777;
		font-size: 1.4em;
		font-weight: initial;
		padding: 0 0 6px 0;
		margin-bottom: 10px;
	}
	.ranking .review .review_icon{
		float: left;
		width: 10%;
		text-align: center;
		padding: 16px 0 0;
	}
	.ranking .review .review_icon span{
		text-align: center;
		display: block;
		font-size: 0.8em;
	}
	.review_talk {
		position: relative;
		margin: 0 0 0 90px;
    	padding: 20px 28px;
		max-width: 72%;
		color: #555;
		font-size: 16px;
		background: #fffbdf;
		border-radius: 7px;
	}

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

	.review_talk p {
		margin: 0;
		padding: 0;
		font-size: 1.1em;
	}
}

.ranking .btn{
    width: 100%;
    margin: auto;
    padding: 10px 0 20px;
    text-align: center;
}
.ranking button.button_r {
    background-image: linear-gradient(to top, #ff9244 0%, #ff0a0a 100%);
	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .5);
}
.ranking button.button_d{
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .5);
    background-color: #fff;
}

.ranking button.button_d:hover{
	opacity: 0.7;
}

.ranking button.itembutton {
    flex: 1 1 auto;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    font-size: 1.5em;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 100% auto;
    color: #fff;
    border-radius: 7px;
    font-weight: bold;
    display: block;
}
.ranking button.button_o a {
    text-decoration: none;
    color: #fff;
    display: block;
    padding: 20px 8px;
}
.ranking button.button_o:hover{
	opacity: 0.7;
}

.ranking button.itembutton_half {
    flex: 1 1 auto;
    width: 46%;
    margin: 0;
    text-align: center;
    font-size: 0.9em;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 100% auto;
    color: #fff;
    border-radius: 7px;
    font-weight: bold;
    display: inline-block;
}
.ranking button.button_d a{
	color: #777;
    text-decoration: none;
	display: block;
	padding: 20px 8px;
}
/* item_XXX only */
.details .ranking h3.title{
    font-size: 1.1em;
    width: 90%;
    padding: 0 0 4px 0;
    text-align: left;
    margin: 28px auto 0;
    border-bottom: 1px dashed #b1b1b1;	
}

/* --------------------------------------------------
footer
-------------------------------------------------- */
footer{
	margin: auto;
    padding: 0;
    font-size: 1.0em;
    line-height: 1.4em;
    text-align: center;
    background-color: #FFF;
}
footer a:link, footer a:hover, footer a:visited { text-decoration: none; color: #444; font-weight: bold; }

footer .site{
    background: #35bbef;
    padding: 10px 30px;
    color: #fff;
    line-height: 1.2em;
    text-align: center;
}
footer .copy{
    background: #35bbef;
    padding: 0 30px;
    color: #fff;
    text-align: center;
    font-size: 0.7em;
}
footer ul{
	display: inline-flex;
    list-style: none;
    padding: 16px 0;
}
footer ul li{
    border-left: 1px solid #333;
    padding: 0 8px 0 8px;
}
footer ul li:first-child{
	border-left: none;
}

/* --------------------------------------------------
page-top
-------------------------------------------------- */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
#page-top a {
    background: #b1b1b1;
    text-decoration: none;
    color: #fff;
    width: 60px;
    padding: 12px 0;
    text-align: center;
    display: block;
    font-size: 1.3em;
}
#page-top a:hover {
    text-decoration: none;
    background: #777;
	color: #ffffff;
}

/* --------------------------------------------------
anime
-------------------------------------------------- */
.slide{
    animation-name: fadeleft;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.fade_off {
  -webkit-transform: translate(-20px, 0);
  opacity: 0;
}

.fade_on {
  -webkit-transition: all 1s;
  -webkit-transform: translate(0, 0);
  opacity: 1;
}

/* --------------------------------------------------
tables
-------------------------------------------------- */
table.table_block {
    border-collapse: collapse;
    border-spacing: 5px;
    margin: 0 auto;
    padding: 0;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #777;
}

table.table_block tr{
    border: 1px solid #777;
}

table.table_block tr:last-child{
  border-bottom: none;
}

table.table_block th{
    position: relative;
    width: 10%;
    background-color: #eee;
    color: #555;
    text-align: center;
    padding: 10px;
    border-right: 1px solid #777;
    font-weight: initial;
}

table.table_block td{
    text-align: left;
    width: 30%;
    background-color: #fff;
    padding: 10px 10px;
}
/*--- item pase ---*/
.item{
    width: 100%;
    margin: 60px auto;
}