@charset "UTF-8";

/* reset
================================================================================*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; color:#61492c; }
body { line-height: 1.6; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }


/* ‹¤’Ê
================================================================================*/
.inner{ width:960px; margin:0 auto;}
/* clearfix */
.clearfix { zoom: 1;}
.clearfix:after { content: ""; display: block; clear: both;}
.clear { clear: both;}

/* head
================================================================================*/
#header{ width:100%; height: 63px; border-bottom:solid 1px rgb(181, 167, 130);  background: rgb(222, 246, 243); margin-bottom:20px;}
#header h1{font-size: 34px; color:#795b38; text-align:left; line-height:36px; padding-top:16px;}

#head{ background:url(../images/ranking_bg.jpg) repeat-x bottom; margin-bottom:20px;}
#head p strong{ color:#ff5a6e;}
.head_main{ background:url(../images/ranking_head.jpg) no-repeat; height:205px; text-align:center; margin:20px 0; padding:100px 400px 50px 0px;}
.head_main h2{ font-size:26px;font-family: "Ÿà–¾’©", YuMincho, "ƒqƒ‰ƒMƒm–¾’© ProN W3", "Hiragino Mincho ProN","HG–¾’©E","‚l‚r ‚o–¾’©","‚l‚r –¾’©",serif;  }
.head_main h2 strong{ font-size:52px; display:block;}
.head_thum li{ display:inline-block; padding:5px; margin-bottom:20px;}

/* footer
================================================================================*/
#footer{ background:#e4e4e4; border-top:solid 1px rgb(181, 167, 130); margin:20px 0 0;}
.footbox{ width:960px; position:relative; margin:0 auto; padding:20px 0; }
.footbox ul{ width:600px; margin:20px; }
.footbox ul li{ list-style: square; line-height:2; font-size:20px; }
.footbox ul li a{ color:#61492c;} 
.address{ text-align:center; padding:10px; }
#pageTop{ position: fixed; bottom:100px; right:100px; }

/* main
================================================================================*/
.ti{	position: relative;	display: inline-block; font-size:28px; border-radius:20px;	padding: 0 15px; margin:20px 0 40px;	width: 100%;	min-width: 115px;	height:80px;	color:#fff;	line-height:80px;	text-align: center;	background: #fd7989;	z-index: 0;}
.ti:after { content: "";position: absolute;bottom: -20px;left: 50%;margin-left: -20px;display: block;width: 0px;height: 0px;border-style: solid;border-width: 20px 20px 0 20px;border-color: #fd7989 transparent transparent transparent;}
.tx_c{ text-align:center;}
.tx_c strong{ color:#ff5a6e;}

.ranking_box{ border:1px solid #b5a782; margin:20px 0;}
.ranking_box .name{ background:url(../images/ranking_ti.jpg) left center no-repeat; padding-left:80px; margin:30px; font-size:24px; }
.ranking_box .photo{ padding:30px; background:#ffd9d9; text-align:center;}
.ran_h { border-left:5px solid #ff9494; margin:20px; padding:0 10px; font-size:20px; color:#f33256; }
.tx{ padding:0 20px;}
.icon{ padding:0 20px; }
.icon li{background:#f33256;	border-radius: 3px; -webkit-border-radius: 3px;	-moz-border-radius:3px;  	behavior: url(PIE.htc); color:#fff; display: inline-block; margin-bottom:5px; padding:0px 10px;}

.ran_L{ width:430px; float:left; margin:20px 0 20px 20px;}
.ran_R{ width:410px; float:right; margin:20px 20px 20px 0 ;}
.ran_L dl dt{ font-size:20px; color:#f33256; border-bottom:1px solid #DDDDDD;}

table.hyouka{ width:96%; margin:16px auto; background:#f4f4f4; border-collapse: separate; border-spacing: 10px; padding:10px;}
table.hyouka th{ text-align:left; border-bottom:1px dotted #a08461;}
table.hyouka td span{ color:#ffdb33;}
table.hyouka tr td{ border-bottom:1px solid #fff;}

.link {	display: inline-block;text-decoration:none; text-align:center; position: relative;	width:100%;	margin:10px;	height: 50px;	border-radius: 4px;	color: #fff;	font-weight: 600;	line-height: 50px;	-webkit-box-sizing: content-box;	-moz-box-sizing: content-box;	box-sizing: content-box;	-webkit-transition: none;	transition: none;	text-shadow: 0px 1px 0px #f56778;}
.link,.link:hover {	border-bottom: 4px solid #cb5462;	background-color: #f56778;	background-image: -webkit-linear-gradient(top, #f997b0, #f56778);	background-image: linear-gradient(to bottom, #f997b0, #f56778);	box-shadow: inset 1px 1px 0 #fbc1d0;}
.link::before,.link::after {	bottom: -1px;	left: -1px;	width: 200px;	height: 50px;	border: 1px solid #ee8090;	border-bottom: 1px solid #b84d5a;	border-radius: 4px;	-webkit-box-sizing: content-box;	-moz-box-sizing: content-box;	box-sizing: content-box;	-webkit-transition: none;	transition: none;}
.link::before {	height: 48px;	bottom: -4px;	border-top: 0;	border-radius: 0 0 4px 4px;	box-shadow: 0 1px 1px 0px #bfbfbf;}
.link:hover {	background: #f56778;	background-image: -webkit-linear-gradient(top, #f56778, #f997b0);	background-image: linear-gradient(to bottom, #f56778, #f997b0);	color: #913944;	text-shadow: 0px 1px 0px #f9a0ad;}
.link:active {	bottom: -4px;	margin-bottom: 4px;	border: none;	box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);}
.link:active::before,.link:active::after {	border: none;	box-shadow: none;}

.qa dt{ background:url(../images/ranking_q.jpg) no-repeat bottom; padding:0 0 0 90px; line-height:2.6;  min-height:68px; font-size:24px;}
.qa dd{ border:1px solid #f7c5cf; padding:20px; margin:20px 0 20px 90px; position:relative;}
.qa dd:before{ content: url(../images/ranking_a.jpg); width:55px; height:50px; position:absolute; left:-60px; top:0; }

.end_salon { padding:20px; border-bottom:1px dotted #C7BBA4;}
.end_salon dt{ width:310px; float:left;}
.end_salon dd{ width:600px; float:right;}
.end_salon dd strong{ font-size:20px; padding:3px 0; border-bottom:1px solid #C7BBA4;} 
 
 h7{ display:block;}

/*----------------------------------------------*/
@media screen and (max-width: 736px) { 

/* ‹¤’Ê
================================================================================*/
.inner{width: 94%;margin:0 auto;}
img{max-width: 100%;}
  iframe{width: 100%; height: 250px;}  

/* head
================================================================================*/
#header{ width:100%; height: 63px; border-bottom:solid 1px rgb(181, 167, 130);  background: rgb(222, 246, 243); margin-bottom:20px;}
#header h1{font-size: 7vw;line-height:36px;padding-top: 5%;text-align: center;}
#head{ background:url(../images/ranking_bg.jpg) repeat-x bottom; margin-bottom:20px;}
#head p strong{ color:#ff5a6e;}
.head_main{background:url(../images/ranking_head.jpg) no-repeat;height: auto;text-align:center;margin:20px 0;padding: 8% 3% 10%;background-size: cover;}
.head_main h2{font-size: 5vw;font-family: "Ÿà–¾’©", YuMincho, "ƒqƒ‰ƒMƒm–¾’© ProN W3", "Hiragino Mincho ProN","HG–¾’©E","‚l‚r ‚o–¾’©","‚l‚r –¾’©",serif; serif;line-height: 1.3;text-align: left;}
.head_main h2 strong{font-size: 6vw;display:block;}
.head_thum li{ display:inline-block; padding:5px; margin-bottom:20px;}

/* footer
================================================================================*/
#footer{ background:#e4e4e4; border-top:solid 1px rgb(181, 167, 130); margin:20px 0 0;}
.footbox{ width:100%; position:relative; margin:0 auto; padding:20px 0; }
.footbox ul{width: 90%;margin: 10% auto;padding-left: 26px;}
.footbox ul li{list-style: square;line-height:2;font-size: 4vw;}
.footbox ul li a{ color:#61492c;} 
.address{ text-align:center; padding:10px; }
#pageTop{position: fixed;bottom: 4vw;right: 4vw;width: 60px;}

/* main
================================================================================*/
.ti{position: relative;display: block;font-size: 6vw;border-radius:20px;padding: 3%;margin: 20px auto 40px;width: 95%;min-width: auto;height: auto;color:#fff;line-height: 1.2;text-align: center;background: #fd7989;z-index: 0;}
.ti:after { content: ""; position: absolute;bottom: -20px;left: 50%;margin-left: -20px;display: block;width: 0px;height: 0px;border-style: solid;border-width: 20px 20px 0 20px;border-color: #fd7989 transparent transparent transparent;}
.tx_c{ text-align:center;}
.tx_c strong{ color:#ff5a6e;}

.ranking_box{border:1px solid #b5a782;margin: 20px auto;}
.ranking_box .name{background:url(../images/ranking_ti.jpg) left center no-repeat;padding-left: 40px;margin: 5% 3%;font-size: 6vw;background-size: 26px;}
.ranking_box .photo{ padding:30px; background:#ffd9d9; text-align:center;}
.ran_h {border-left:5px solid #ff9494;margin: 5% 3%;padding: 0 3%;font-size: 5vw;color:#f33256;}
.tx{ padding:0 20px;}
.icon{ padding:0 20px; }
.icon li{background:#f33256;	border-radius: 3px; -webkit-border-radius: 3px;	-moz-border-radius:3px;  	behavior: url(PIE.htc); color:#fff; display: inline-block; margin-bottom:5px; padding:0px 10px;}

.ran_L{width: 90%;float:none;margin:3% auto;}
.ran_R{ width:100%; float:none; margin:3% auto;}
.ran_L dl dt{font-size: 6vw;color:#f33256;border-bottom:1px solid #DDDDDD;}

table.hyouka{ width:96%; margin:16px auto; background:#f4f4f4; border-collapse: separate; border-spacing: 10px; padding:10px;}
table.hyouka th{ text-align:left; border-bottom:1px dotted #a08461;}
table.hyouka td span{ color:#ffdb33;}
table.hyouka tr td{ border-bottom:1px solid #fff;}

.link {display: block;text-decoration:none;text-align:center;position: relative;width: 90%;margin: 3% auto;height: 50px;border-radius: 4px;color: #fff;font-weight: 600;line-height: 50px;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;-webkit-transition: none;transition: none;text-shadow: 0px 1px 0px #f56778;}
.link,.link:hover {	border-bottom: 4px solid #cb5462;	background-color: #f56778;	background-image: -webkit-linear-gradient(top, #f997b0, #f56778);	background-image: linear-gradient(to bottom, #f997b0, #f56778);	box-shadow: inset 1px 1px 0 #fbc1d0;}
.link::before,.link::after {	bottom: -1px;	left: -1px;	width: 200px;	height: 50px;	border: 1px solid #ee8090;	border-bottom: 1px solid #b84d5a;	border-radius: 4px;	-webkit-box-sizing: content-box;	-moz-box-sizing: content-box;	box-sizing: content-box;	-webkit-transition: none;	transition: none;}
.link::before {	height: 48px;	bottom: -4px;	border-top: 0;	border-radius: 0 0 4px 4px;	box-shadow: 0 1px 1px 0px #bfbfbf;}
.link:hover {	background: #f56778;	background-image: -webkit-linear-gradient(top, #f56778, #f997b0);	background-image: linear-gradient(to bottom, #f56778, #f997b0);	color: #913944;	text-shadow: 0px 1px 0px #f9a0ad;}
.link:active {	bottom: -4px;	margin-bottom: 4px;	border: none;	box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);}
.link:active::before,.link:active::after {	border: none;	box-shadow: none;}

.qa dt{background: url(../images/ranking_q.jpg) no-repeat bottom left;padding: 0 0 0 64px;line-height: 1.3;min-height: 68px;font-size: 6vw;}
.qa dd{border:1px solid #f7c5cf;padding:20px;margin: 3% auto 15%;position:relative;}
.qa dd:before{content: none;width:55px;height:50px;position:absolute;left:-60px;top:0;}

.end_salon { padding:20px; border-bottom:1px dotted #C7BBA4;}
.end_salon dt{ width:100%; float:none;}
.end_salon dd{ width:100%; float:none;}
.end_salon dd strong{ font-size:20px; padding:3px 0; border-bottom:1px solid #C7BBA4;} 
 




/*----------------------------------------------*/
}