@charset "utf-8";
/* ------------------------------------------------------------

profile.css

------------------------------------------------------------ */

#contents .inner {
	position:relative;
}

.fcfs-line {
	background-color:#90ee90;
}
.reserve-line {
	background-color:#ffb6c1;
}
.rightnow-line {
	background-color:#b0e0e6;
}
.resvDesc-line {
	background-color:#ffa500;
}

/* ------------------------------------------------------------
 profilePhoto
------------------------------------------------------------ */

.profilePhoto {
	position:absolute;
	z-index:5;
}
.profilePhoto .photo {
	width:100%;
	height:100%;
	border-radius:100%;
	overflow:hidden;
	border:10px solid #4b1486;
	box-shadow: 0 0 8px 0px rgba(0,0,0,0.2);
}
.profilePhoto .price {
	width:220px;
	margin:0 auto;
	font-size:1.4rem;
	line-height:1.6;
	text-align:center;
	color:#ffffff;
	background:#666666;
	border-radius:3px;
	position:absolute;
	bottom:10px;
	left:0;
	right:0;
}
.profilePhoto .price .number{
	font-size:2.0rem;
	letter-spacing:0;
}

@media screen and (max-width: 1000px){
	.profilePhoto {
		width:220px;
		height:220px;
		margin:0 auto;
		top:-40px;
		left:0;
		right:0;
	}
}
@media screen and (max-width: 560px){
	.profilePhoto {
		width:200px;
		height:200px;
		top:-20px;
	}
}
@media screen and (min-width: 1001px){
	.profilePhoto {
		width:260px;
		height:260px;
		top:-80px;
		left:2.5%;
	}
}


/* ------------------------------------------------------------
 valAvgTotal
------------------------------------------------------------ */

.valAvgTotal {
	position:absolute;
	z-index:5;
}

@media screen and (max-width: 1000px){
	.valAvgTotal {
		width:220px;
		height:220px;
		margin:0 auto;
		top:400px;
		left:0;
		right:600px;
	}
}
@media screen and (max-width: 560px){
	.valAvgTotal {
		/*width:200px;
		height:200px;
		top:400px;*/
		display:none;
	}
}
@media screen and (min-width: 1001px){
	.valAvgTotal {
		width:260px;
		height:260px;
		top:240px;
		left:2.5%;
	}
}


/* ------------------------------------------------------------
 valAvg
------------------------------------------------------------ */

.valAvg {
	position:absolute;
	z-index:5;
}

@media screen and (max-width: 1000px){
	.valAvg {
		width:220px;
		height:220px;
		margin:0 auto;
		top:440px;
		left:4.5%;
		right:600px;
	}
}
@media screen and (max-width: 560px){
	.valAvg {
		/*width:200px;
		height:200px;
		top:440px;*/
		display:none;
	}
}
@media screen and (min-width: 1001px){
	.valAvg {
		width:260px;
		height:260px;
		top:280px;
		left:4.5%;
	}
}


/* ------------------------------------------------------------
 leadTxt
------------------------------------------------------------ */

.leadTxt > p {
	margin-top:1em;
	color:#ffffff;
}
.leadTxt > p:first-child {
	margin-top:0;
}

@media screen and (max-width: 1000px){
	.leadTxt {
		padding-top:140px;
	}
}
@media screen and (max-width: 560px){
	.leadTxt {
		padding-top:160px;
	}
}
@media screen and (min-width: 1001px){
	.leadTxt {
		padding-left:260px;
	}
}



/* ------------------------------------------------------------
 genreList
------------------------------------------------------------ */

.genreList {
	width:100%;
	max-width:640px;
	margin:15px auto 0;
	text-align:center;
}
.genreList li {
	display:inline-block;
	margin:8px 3px 0;
	padding:8px 1em;
	font-size:1.6rem;
	line-height:1.5;
	letter-spacing:0.1em;
	color:#ffffff;
	text-align:center;
	background:#581477;
	border-radius:5px;
}
@media screen and (min-width: 768px){
	.genreList li {
		font-size:1.8rem;
	}
}



/* ------------------------------------------------------------
 blogList
------------------------------------------------------------ */

.blogList {
	padding:30px 10px;
}
.blogList .box {
	padding:10px;
	border:1px solid #dddddd;
	background:#ffffff;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
}
.blogList .box .photo img {
	width: 100%;
	height:200px;
	object-fit: cover;
}

.blogList .box .title{
	padding:25px 8px 10px;
	font-size:2.0rem;
	line-height:1.5;
}
.blogList .box .date{
	padding:0 8px 15px;
	font-size:1.2rem;
	line-height:1.5;
}
.blogList .box .txt{
	padding:0 8px 15px;
}
.blogList .box .txt p {
	font-size: 16px;
	line-height: 2;
}

@media screen and (max-width: 559px) {
	.blogList  {
		overflow:hidden;
	}
	.blogList .box {
		width:98%;
		margin:0 1%;
		float:left;
	}
}

@media screen and (min-width: 560px) {
	.blogList  {
		overflow:hidden;
	}
	.blogList .box {
		width:49%;
		margin:0 0.5%;
		float:left;
	}
}

@media screen and (min-width: 960px) {
	.blogList {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.blogList .box {
		width:31.33%;
		margin:0 1%;
	}
}


/*-----------------------------------------------------------------
	.slider
-----------------------------------------------------------------*/

.sliderBlog {
	position:relative;
	overflow:hidden;
}
.sliderBlog .slick-prev{
	position: absolute; 
	z-index:1;
	margin:auto 0;
	padding:0; 
	display:block; 
	border:none; 
	width:24px; 
	height:64px; 
	top:0;
	bottom: 0;
	left:0; 
	margin:auto 0; 
	background:#000000; 
	background-size: 11px auto; 
	text-indent: -9999px; 
	overflow: hidden;
	cursor: pointer;
}
.sliderBlog .slick-prev::after {
	content: '';
	margin:auto;
	width: 14px;
	height: 14px;
	border-left: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position:absolute;
	top:0;
	bottom:0;
	left:8px;
}
.sliderBlog .slick-next{ 
	position: absolute; 
	z-index: 1;
	margin:auto 0;
	padding: 0;
	display: block; 
	border: none; 
	width: 24px; 
	height: 64px; 
	top:0;
	bottom: 0;
	right: 0; 
	margin:auto 0; 
	background:#000000;
	background-size: 11px auto; 
	text-indent: -9999px; 
	overflow: hidden;
	cursor: pointer;
}
.sliderBlog .slick-next::after {
	content: '';
	margin:auto;
	width: 14px;
	height: 14px;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position:absolute;
	top:0;
	bottom:0;
	right:8px;
}
.sliderBlog .slick-dots{
	width:;
	position:absolute;
	left:0;
	bottom:0;
	z-index:10;
	text-align:center;
	width:100%;
}
.sliderBlog .slick-dots li{ 
	display:inline-block;
	width:12px; 
	height:12px;
	margin:0 5px;
}
.sliderBlog .slick-dots li button{
	display:inline-block;
	width:12px; 
	height:12px;
	margin:0;
	padding:0;
	border:0px; 
	background:#666666;
	border-radius:12px;
	text-indent:-9999px;
	cursor:pointer;
	overflow:hidden;
}
.sliderBlog .slick-dots li.slick-active button{
	background:#c8974e;
}



/* ------------------------------------------------------------
 reviewList
------------------------------------------------------------ */

.reviewList {
	padding:30px 10px;
}
.reviewList li {
	height:10px 30px;
	margin-top:20px;
	padding:10px 30px;
	border:double #dddddd;
	background:#ffffff;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.1);
}
.reviewList li:first-child {
	margin-top:0px;
}
.reviewList li .name {
	margin-bottom:12px;
	padding:0 0 8px;
	font-size:1.8rem;
	line-height:1.5;
	letter-spacing:0.1em;
	font-weight:bold;
	text-align:left;
	border-bottom:1px solid #dddddd;
}
.reviewList li .genre {
	margin:8px 3px 0;
	padding:8px 1em;
	font-size:1.6rem;
	line-height:1.5;
	letter-spacing:0.1em;
	color:#ffffff;
	text-align:center;
	background:#581477;
	border-radius:5px;
	float: left;
}
.reviewList li .evaluation {
	margin-bottom:12px;
	padding:0 0 8px;
	letter-spacing:0.1em;
}
.reviewList li .evaluation .left {
	float: left;
}
.reviewList li .evaluation .right {
	float: right;
}
.reviewList li .evaluation .average-score {
	display: flex;
	justify-content: center;
}
.reviewList li .evaluation .star-rating {
	position: relative;
	width: 5em;
	height: 1em;
	font-size: 17px;
}
.reviewList li .evaluation .star-rating-front {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #ffcc33;
	height: 25px;
}
.reviewList li .evaluation .star-rating-back {
	color: #ccc;
}
.reviewList li .evaluation .appraiser-comment-title {
	position: absolute;
	float: left;
	left:10.5%;
}
.reviewList li .evaluation .appraiser-comment {
	position: absolute;
	float: left;
	left:14.5%;
}

.reviewList li .rowclear {
	clear: both;
}

/* ------------------------------------------------------------
 revPageChange
------------------------------------------------------------ */
.revPageChange {
	max-width:900px;
	margin:10px auto;
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.revPageChange .prevBtn,
.revPageChange .nextBtn{
	width:100px;
	padding:3px 0;
	font-size:1.2rem;
	line-height:1.4;
	letter-spacing:0.1em;
	text-align:center;
	background:#ffffff;
	border:1px solid #bbbbbb;
	border-radius:5px;
	box-shadow: 0 0 1px 0px rgba(0,0,0,0.2);
	cursor:pointer;
	transition:all 0.5s ease;
	position:relative;
}
.revPageChange .prevBtnNotPush,
.revPageChange .nextBtnNotPush {
	width:100px;
	padding:3px 0;
	font-size:1.2rem;
	line-height:1.4;
	letter-spacing:0.1em;
	text-align:center;
	background:#f5f5f5;
	border:1px solid #bbbbbb;
	border-radius:5px;
	box-shadow: 0 0 1px 0px rgba(0,0,0,0.2);
	cursor:pointer;
	transition:all 0.5s ease;
	position:relative;
}
.revPageChange .prevBtn:hover,
.revPageChange .nextBtn:hover{
	opacity:0.6;
}
.revPageChange .prevBtn:after,
.revPageChange .prevBtnNotPush:after {
	display: block;
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #333333;
	border-bottom: 2px solid #333333;
	transform: rotate(135deg);
	margin-top: -3px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 10px;
}
.revPageChange .nextBtn:after,
.revPageChange .nextBtnNotPush:after {
	display: block;
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #333333;
	border-bottom: 2px solid #333333;
	transform: rotate(-45deg);
	margin-top: -3px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	right: 10px;
}
@media screen and (min-width: 767px){
	.revPageChange .prevBtn,
	.revPageChange .nextBtn,
	.revPageChange .prevBtnNotPush,
	.revPageChange .nextBtnNotPush{
		width:140px;
		font-size:1.4rem;
	}
}

/* ------------------------------------------------------------
 profileData
------------------------------------------------------------ */
.profileData {
	width:100%;
	max-width:840px;
	margin:20px auto 0;
}
.profileData dl {
	display: flex;
	flex-wrap: wrap;
}
.profileData dl dt{
	padding:15px;
	font-weight:bold;
}
.profileData dl dd{
	padding:15px;
}
.profileData dl dt .mark{
	display:inline-block;
	margin-right:6px;
	color:#b72269;
}
.profileData dl dd p{
	margin-top:1em;
}
.profileData dl dd p:first-child{
	margin-top:0;
}
.profileData dl dd .photo{
	width:200px;
	height:200px;
	overflow:hidden;
	border-radius:100px;
	border:8px solid #4b1486;
}

@media screen and (max-width: 559px) {
	
	.profileData dl dt{
		width: 100%;
		background:#dddddd;
		position:relative;
		border-radius:5px;
	}
	.profileData dl dt::after{
		content: "";
		width:16px;
		margin:0 auto;
		border-top: 10px solid #dddddd;
		border-right: 8px solid transparent;
		border-left: 8px solid transparent;
		position:absolute;
		left:0;
		right:0;
		bottom:-10px;
		z-index:2;
	}
	.profileData dl dd{
		width: 100%;
		padding:20px 15px;
	}
	.profileData dl dd .photo{
		margin:0 auto;
	}
	
}
@media screen and (min-width: 560px) {
	
	.profileData dl dt{
		width: 300px;
		border-top:1px solid #dddddd;
	}
	.profileData dl dd{
		width: calc(100% - 300px);
		padding:15px;
		border-top:1px solid #dddddd;
	}
	.profileData dl dt:nth-last-child(2),
	.profileData dl dd:last-child{
		border-bottom:1px solid #dddddd;
	}
}



/* ------------------------------------------------------------
 form reset
------------------------------------------------------------ */
button,
input,
select,
textarea {
	outline: none;
	box-sizing: border-box;
	background-color: transparent;
	border-style: none;
	color: inherit;
}
select {
	-moz-appearance: none; /* Firefox 36+ */
	-webkit-appearance: none; /* Chrome 41+ */
}
select::-ms-expand {
	display: none; /* Internet Explorer 11+ */
}
select::-ms-value {
	color: currentColor; /* Internet Explorer 11+ */
}



/* ------------------------------------------------------------
 edit
------------------------------------------------------------ */

.fileBtn {
	display:block;
	width:200px;
	margin-top:10px;
	padding: 5px;
	font-size:1em;
	line-height:1.5;
	color: #111111;
	text-align:center;
	background-color: #dddddd;
	border-radius:5px;
	border:1px solid #cccccc;
	cursor: pointer;
	box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
}
.fileBtn input {
	display:none;
}

textarea {
	width:100%;
	padding:12px;
	border: 1px solid #c5c5c5;
	background:#ffffff;
	border-radius:5px;
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2) inset;
	font-size:1em;
}
textarea:focus{
    box-shadow: 0 0 7px #eeeeee;
    border: 1px solid #666666;
}

.inputTxt {
    width:100%;
    max-width:510px;
    margin:3px 0 5px 0;
    padding:12px;
    border: 1px solid #c5c5c5;
    border-radius:5px;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2) inset;
    font-size:1em;
}

.typeSelect{
	display:inline-block;
}
.typeSelect select{
	outline:none;
	text-overflow: '';
	width: 100%;
	vertical-align: middle;
	line-height: 1;
	padding:10px 30px 10px 10px;
	border-radius: 5px;
	font-size: 1em;
	background-color: #fff;
	border: 1px solid #cccccc;
	position: relative;
	cursor: pointer;
	box-shadow: 5px 5px 20px -15px rgb(0, 0, 0, 0.03);
	display: inline-block;
}
.typeSelect select.short{
	margin-right:5px;
}
.typeSelect select:focus{
    box-shadow: 0 0 7px #eeeeee;
    border: 1px solid #666666;
}
.typeSelect select::-ms-expand {
	display: none;
}
.typeSelect label{
	position: relative;
}
.typeSelect label::before{
	display: block;
	content: '';
	width: 1px;
	height: 36px;
	background: #cccccc;
	margin-top: -17px;
	position: absolute;
	top: 50%;
	right: 28px;
	z-index: 3;
}
.typeSelect label:after {
	display: block;
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #333333;
	border-bottom: 2px solid #333333;
	transform: rotate(45deg);
	margin-top: -3px;
	pointer-events: none;
	position: absolute;
	top: 50%;
	right: 13px;
}
.typeSelect .after-label{
	vertical-align: middle;
	font-size: 12px;
}


@media screen and (max-width: 767px){
	.typeSelect select.short{
		width: 85px;
	}
}
@media screen and (min-width: 768px){
	.typeSelect select.short{
		width: 100px;
	}
}
@media screen and (min-width: 960px){
	.typeSelect label::before{
		right: 35px;
	}
	.typeSelect label:after {
		right: 15px;
	}
}