@charset "UTF-8";

/* ------------------------
  common
------------------------ */
#lineup .header {
	background-color:#f05504;
}

#lineup .topList {
	padding:70px 0 10px 0;
	background-color:#fff5e4;
}
#lineup .topList .nav {
	text-align:center;
	margin:0 0 40px 0;
	background-color:#efe2d0;
	border-radius:50px;
}
#lineup .topList .nav ul {
	width:auto;
	margin:0 auto;
	display:table;
	border-spacing:0;
}
#lineup .topList .nav ul > li {
	text-align:left;
	vertical-align:middle;
	display:table-cell;
}
#lineup .topList .nav ul > li.area1,
#lineup .topList .nav ul > li.area3,
#lineup .topList .nav ul > li.area5,
#lineup .topList .nav ul > li.area7 {
	width:85px;
}
#lineup .topList .nav ul > li.area2,
#lineup .topList .nav ul > li.area4,
#lineup .topList .nav ul > li.area6,
#lineup .topList .nav ul > li.area8 {
	width:75px;
}
#lineup .topList .nav ul > li a {
	text-align:center;
	display:block;
	position:relative;
}
#lineup .topList .nav ul > li a:hover {
	opacity:1;
}
#lineup .topList .nav ul > li a:before {
	content:'';
	width:55px;
	height:68px;
	margin:0 0 0 -31px;
	background:url(../img/marker.png) no-repeat center center;
	background-size:cover;
	display:block;
	position:absolute;
	top:-48px;
	left:50%;
}
#lineup .topList .nav ul > li.on a:before {
	background-image:url(../img/marker_on.png);
}
#lineup .topList .nav ul > li a > span {
	width:100%;
	height:50px;
	text-indent:-9999px;
	margin:0 auto;
	background:url(../img/nav.png) no-repeat 0 0;
	background-size:auto 100px;
	display:block;
}
#lineup .topList .nav ul > li.area1 a > span {
	background-position:0 0;
}
#lineup .topList .nav ul > li.area1.on a > span,
#lineup .topList .nav ul > li.area1 a:hover > span {
	background-position:0 -50px;
}
#lineup .topList .nav ul > li.area2 a > span {
	background-position:-85px 0;
}
#lineup .topList .nav ul > li.area2.on a > span,
#lineup .topList .nav ul > li.area2 a:hover > span {
	background-position:-85px -50px;
3}
#lineup .topList .nav ul > li.area3 a > span {
	background-position:-160px 0;
}
#lineup .topList .nav ul > li.area3.on a > span,
#lineup .topList .nav ul > li.area3 a:hover > span {
	background-position:-160px -50px;
}
#lineup .topList .nav ul > li.area4 a > span {
	background-position:-245px 0;
}
#lineup .topList .nav ul > li.area4.on a > span,
#lineup .topList .nav ul > li.area4 a:hover > span {
	background-position:-245px -50px;
}
#lineup .topList .nav ul > li.area5 a > span {
	background-position:-320px 0;
}
#lineup .topList .nav ul > li.area5.on a > span,
#lineup .topList .nav ul > li.area5 a:hover > span {
	background-position:-320px -50px;
}
#lineup .topList .nav ul > li.area6 a > span {
	background-position:-405px 0;
}
#lineup .topList .nav ul > li.area6.on a > span,
#lineup .topList .nav ul > li.area6 a:hover > span {
	background-position:-405px -50px;
}
#lineup .topList .nav ul > li.area7 a > span {
	background-position:-480px 0;
}
#lineup .topList .nav ul > li.area7.on a > span,
#lineup .topList .nav ul > li.area7 a:hover > span {
	background-position:-480px -50px;
}
#lineup .topList .nav ul > li.area8 a > span {
	background-position:-565px 0;
}
#lineup .topList .nav ul > li.area8.on a > span,
#lineup .topList .nav ul > li.area8 a:hover > span {
	background-position:-565px -50px;
}

#lineup .topList .list {
	margin:0 -5px;
}
#lineup .topList .list ul:before,
#lineup .topList .list ul:after {
	display:table;
	content:" ";
}
#lineup .topList .list ul:after {
	clear:both;
}
#lineup .topList .list ul > li {
	width:33.3%;
	margin:0 0 40px 0;
	padding:0 5px;
	box-sizing:border-box;
	float:left;
}
#lineup .topList .list ul > li a {
	text-decoration:none;
	color:#6d4c41;
	display:block;
	position:relative;
}
#lineup .topList .list ul > li a:hover {
	opacity:1;
}
#lineup .topList .list ul > li a:before {
	content:'';
	width:112.5%;
	height:312px;
	background:url(../img/bg_01.png) no-repeat center center;
	background-size:100% auto;
	display:block;
	position:absolute;
	top:-30px;
	left:-6.25%;
	z-index:1;
}
#lineup .topList .list ul > li a:hover:before {
	background-image:url(../img/bg_01_over.png);
}
#lineup .topList .list ul > li a:hover .img img {
	box-shadow:1px 1px 10px rgba(0,0,0,0.1);
}
#lineup .topList .list .ctx {
	text-align:right;
	margin:0 46% 0 0;
	padding:0 0 10px 0;
}
#lineup .topList .list .txt1 {
	margin:0 0 40px 0;
	position:relative;
	z-index:5;
}
#lineup .topList .list .txt1 img {
	width:100%;
	height:auto;
}
#lineup .topList .list .txt2 {
	font-weight:bold;
	color:#6d4c41;
	position:relative;
	z-index:5;
}
#lineup .topList .list .txt3 {
	font-size:90%;
	font-weight:bold;
	line-height:1.2;
	white-space:nowrap;
	color:#6d4c41;
	position:relative;
	z-index:5;
}
#lineup .topList .list .txt3 span {
	font-size:80%;
}
#lineup .topList .list .img {
	width:40%;
	position:absolute;
	right:10px;
	bottom:0;
	z-index:6;
}
#lineup .topList .list .img img {
	width:100%;
	height:auto;
	border-radius:50%;
}

@media only screen and (max-width: 768px) {
	#lineup .topList {
		padding:30px 10px 5px 10px;
	}
	#lineup .topList .nav {
		text-align:center;
		margin:0 0 30px 0;
		background:none;
		border-radius:0;
	}
	#lineup .topList .nav ul {
		display:flex;
		flex-wrap:wrap;
	}
	#lineup .topList .nav ul > li {
		padding:0 1px 1px 0;
		display:block;
	}
	#lineup .topList .nav ul > li.area1,
	#lineup .topList .nav ul > li.area2,
	#lineup .topList .nav ul > li.area3,
	#lineup .topList .nav ul > li.area4,
	#lineup .topList .nav ul > li.area5,
	#lineup .topList .nav ul > li.area6,
	#lineup .topList .nav ul > li.area7,
	#lineup .topList .nav ul > li.area8 {
		width:25%;
	}
	#lineup .topList .nav ul > li a:before {
		display:none;
	}
	#lineup .topList .nav ul > li.on a:before {
		display:none;
	}
	#lineup .topList .nav ul > li a {
		background-color:#efe2d0;
	}
	#lineup .topList .nav ul > li.on a,
	#lineup .topList .nav ul > li a:hover {
		background-color:#f05504;
	}
	#lineup .topList .nav ul > li.area1 a {
		border-radius:20px 0 0 0;
	}
	#lineup .topList .nav ul > li.area4 a {
		border-radius:0 20px 0 0;
	}
	#lineup .topList .nav ul > li.area5 a {
		border-radius:0 0 0 20px;
	}
	#lineup .topList .nav ul > li a > span {
		background-image:url(../img/nav_sp.png);
	}
	#lineup .topList .nav ul > li.area1 a > span,
	#lineup .topList .nav ul > li.area3 a > span,
	#lineup .topList .nav ul > li.area5 a > span,
	#lineup .topList .nav ul > li.area7 a > span {
		width:85px;
	}
	#lineup .topList .nav ul > li.area2 a > span,
	#lineup .topList .nav ul > li.area4 a > span,
	#lineup .topList .nav ul > li.area6 a > span,
	#lineup .topList .nav ul > li.area8 a > span {
		width:75px;
	}

	#lineup .topList .list {
		margin:0 15px;
	}
	#lineup .topList .list ul {
		max-width:350px;
		margin:0 auto;
	}
	#lineup .topList .list ul > li {
		width:auto;
		margin:0 0 20px 0;
		padding:0 5px;
		float:none;
	}
	#lineup .topList .list ul > li a:before {
		height:100%;
	}
	#lineup .topList .list .txt2 {
		margin:0 0 5px -15px;
	}
	#lineup .topList .list .txt3 {
		white-space:auto;
		margin-left:-15px;
	}
}

#lineup .detail {
	padding:0 0 60px 0;
	background-color:#fff5e4;
}
#lineup .detail .img1 {
	width:16.32%;
	margin:0 auto;
	position:relative;
	z-index:10;
}
#lineup .detail .img1 img {
	width:100%;
	height:auto;
	border-radius:50%;
}
#lineup .detail .img2:before,
#lineup .detail .img2:after {
	display:table;
	content:" ";
}
#lineup .detail .img2:after {
	clear:both;
}
#lineup .detail .img2 > li {
	width:33%;
	padding:0 20px 20px 0;
	box-sizing:border-box;
	float:left;
}
#lineup .detail .img2 > li img {
	width:100%;
	height:auto;
}
#lineup .detail .box1 {
	margin:-50px 70px 40px 70px;
	padding:70px 100px 50px 100px;
	background-color:#fff;
	box-shadow:1px 1px 5px rgba(0,0,0,0.1);
	border-radius:100px;
	position:relative;
	z-index:1;
}
#lineup .detail .box1:before {
	content:'';
	width:55px;
	height:35px;
	background:url(../img/bg_02.png) no-repeat center center;
	background-size:100% 100%;
	display:block;
	position:absolute;
	top:-34px;
	left:33%;
}
#lineup .detail .txt1 {
	margin:0 0 15px 0;
}
#lineup .detail .txt2 {
	font-size:150%;
	font-weight:bold;
	line-height:1.5;
	color:#F05504;
	margin:0 0 10px 0;
}
#lineup .detail .txt3 {
	font-size:100%;
	font-weight:bold;
	color:#6D4C41;
	margin:0 0 30px 0;
}
#lineup .detail .txt3 span {
	font-size:70%;
}
#lineup .detail .txt4 p {
	font-size:94%;
	line-height:2;
	color:#4E342E;
}
#lineup .detail .txt5 {
	font-size:114%;
	font-weight:bold;
	color:#F05504;
	margin:30px 0 10px 0;
}
#lineup .detail .txt6 li {
	color:#6D4C41;
	font-size:100%;
  font-weight: 600;
	padding:0 0 0 1em;
	position:relative;
}
#lineup .detail .txt6 li:before {
	content:'';
	width:10px;
	height:10px;
	background-color:#f05504;
	border-radius:50%;
	display:block;
	position:absolute;
	top:0.4em;
	left:0;
}
#lineup .detail .txt6 li .sub {
	font-size:75%;
	color:#6D4C41;
	margin:0 0 0 10px;
	display:inline-block;
}
#lineup .detail .txt7 > li {
	width:100px;
	text-align:center;
	margin:-50px 0 0 0;
	position:absolute;
	top:50%;
}
#lineup .detail .txt7 > li a {
	text-decoration:none;
	color:#6D4C41;
}
#lineup .detail .txt7 > li.prev {
	left:-50px;
}
#lineup .detail .txt7 > li.next {
	right:-50px;
}
#lineup .detail .txt7 > li .img {
	margin:0 0 15px 0;
	position:relative;
}
#lineup .detail .txt7 > li .img img {
	width:100px;
	height:auto;
	border:solid 3px #6d4c41;
	border-radius:50%;
	box-sizing:border-box;
}
#lineup .detail .txt7 > li .img:before {
	content:'';
	width:20px;
	height:20px;
	margin:0 0 0 -10px;
	background:#6d4c41 url(../../common/img/arrow_02.png) no-repeat center center;
	background-size:90% 90%;
	border-radius:50%;
	display:block;
	position:absolute;
	bottom:-10px;
	left:50%;
}
#lineup .detail .txt7 > li.prev .img:before {
	transform:rotate(180deg);
}
#lineup .detail .txt7 > li .ctx {
	line-height:1.4;
}
#lineup .detail .txt7 > li a:hover {
	color:#F05504;
	opacity:1;
}
#lineup .detail .txt7 > li a:hover .img img {
	border:solid 3px #F05504;
}
#lineup .detail .txt7 > li a:hover .img:before {
	background-color:#F05504;
}
#lineup .detail .txt8 {
	width:300px;
	margin:0 auto;
}
#lineup .detail .txt8 a {
	font-size:100%;
	font-weight:bold;
	line-height:1;
	text-align:center;
	text-decoration:none;
	color:#fff;
	padding:20px 0;
	background-color:#6d4c41;
	border-radius:8px;
	display:block;
	position:relative;
}
#lineup .detail .txt8 a:before {
	content:'';
	width:20px;
	height:20px;
	margin:-10px 0 0 0;
	background:url(../../common/img/arrow_02.png) no-repeat center center;
	background-size:cover;
	display:block;
	position:absolute;
	top:50%;
	right:15px;
}

#lineup .detail .note {
	color: #4e342e;
	font-size: 12px;
	line-height: 2;
}

@media only screen and (max-width: 768px) {
	#lineup .detail {
		padding:0 0 30px 0;
	}
	#lineup .detail .img1 {
		width:26.6%;
	}
	#lineup .detail .img2 > li {
		width:50%;
		padding:0 5px 5px 5px;
	}
	#lineup .detail .box1 {
		margin:-15px 10px 30px 10px;
		padding:20px 20px 10px 20px;
		border-radius:25px;
	}
	#lineup .detail .box1:before {
		content:'';
		width:28px;
		height:18px;
		top:-17px;
		left:26%;
	}
	#lineup .detail .txt3 {
		margin:0 0 20px 0;
	}
	#lineup .detail .txt4 p {
		line-height:1.6;
	}
	#lineup .detail .txt7 {
		text-align:center;
		margin:30px 0 0 0;
	}
	#lineup .detail .txt7 > li {
		width:100px;
		text-align:center;
		margin:0;
		display:inline-block;
		position:static;
		top:0;
	}
	#lineup .detail .txt7 > li.prev {
		margin-right:20px;
	}
	#lineup .detail .txt7 > li.next {
		margin-left:20px;
	}
	#lineup .detail .txt7 > li .img img {
		border:solid 2px #6d4c41;
	}
	#lineup .detail .txt7 > li .ctx br {
		display:none;
	}
	#lineup .detail .txt7 > li a:hover .img img {
		border:solid 2px #F05504;
	}
	#lineup .detail .txt8 {
		max-width:300px;
		width:auto;
	}
}