@charset "UTF-8";

@import "../../common/func/sp.css";

/* ---------------------------------------------------------------------
*
*    ■サントリーホールデザイン スマホモードCSS
*
* ------------------------------------------------------------------- */

#menuSearch ul li,
#menuSearch ul li h3,
#menuSearch ul li a,
#menuSearch ul li span {
	width:49.7%;
	min-width:140px;
	box-sizing:border-box;
}
#index #areaContents {	background: #fff;}
#index #areaContents {
	padding-bottom: 56.25vw;
	background: url(../../../cmn_img/theme/4158/footer_img.jpg) no-repeat center bottom #fff;
	background-size: 100% auto;
}
#blockSearch .wrapper-search {
	padding:15px 20px;
	text-align: center;
}
#blockSearch .wrapper-search h3 {
    display: inline-block;
	padding-left: 28px;
	padding-bottom: 15px;
	background: url(../../../cmn_img/theme/4158/ico_search.png) no-repeat left top;
}
#list #blockSearch .wrapper-search {
	padding-bottom:0px;
}

ul.list-type-compati li {
	padding:10px 0px;
}
ul.list-type-compati li span.article {
	padding-left:0px;
}

#det #blockUpper #navPager ul {
	padding-top:0px;
}

#sakka_list #pageLink {
	padding-top:10px;
}
#listSakka {
	padding-top:10px;
}
#sakka_det #blockData {
	padding-top:10px;
	padding-bottom:7px;
}

#blockInquiry{
	padding: 20px;
	margin: 50px 2% 0;
}
#blockInquiry h5,
#blockInquiry p{
	padding: 0;
}


/* ▼▼▼　20170727 add css ▼▼▼
------------------------------------*/
.disp_pc {	display: none;}
.disp_sp {	display: block;}

#wrapperAll {
    width: auto;
    margin: 0;
}
#header {
	max-width: auto;
	background: #780023;
}
#headerTop {
	width: 100%;
	max-width: 1164px;
	margin: auto;
	overflow: hidden;
}

#footer {
    height: 139.84375vw;
    padding: 0;
    text-indent: -9999px;
	background: url(../../../cmn_img/theme/4158/footer_sp.jpg) no-repeat center;
	background-size: 100% auto;
}

#blockSearch {
	position: relative;
	padding: 20px 0 30px;
	color: #fff;
	background: #550000;
}
#blockSearch .wrapper-search {
	position: relative;
	width: auto;
	max-width: 1164px;
	margin: auto;
	padding: 0;
}
#blockSearch h3 {
	display: block;
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	padding: 0 0 12px;
}
#blockInput:after {
	content: " ";
	display: block;
	clear: both;
}
#blockSearch .wrapper {
	float: none;
	width: 100%;
	margin-top: 10px;
	padding: 0 20px;
	box-sizing: border-box;
	white-space:nowrap;
}
#blockSearch #blockInput label.title,
#blockSearch label.date {
	display: block !important;
	position: relative;
	top: 0;
	left: 0;
	display: block;
	float: left;
	width: 25%;
	height: 35px;
	margin-right: 2%;
	padding: 0;
	color: #fff;
	line-height: 35px;
	text-align: center;
	background: #770030;
	white-space: nowrap;
}
#blockSearch #blockInput .title_composer label.title {
	padding-top:5px;
	line-height: 12px;
	box-sizing:border-box;
}

#blockSearch input[type="text"],
#blockSearch select{
	border-radius: 0;
	background: #fff;
}

#blockSearch input[type="text"],
#blockSearch input[type="text"]#searchKeyword,
#blockSearch input[type="text"]#searchPerformer,
#blockSearch input[type="text"]#searchProgram,
#blockSearch input[type="text"]#searchComposer {
	float: right;
	width: 73%;
	height: 35px;
	margin: 0;
	padding: 0 10px;
	color: #995566;
	border: none;
	box-sizing: border-box;
}
#blockSearch input[type="text"].range_value {
	float:none;
	margin:0px;
}

#blockSearch input[type="text"]#searchSYear,
#blockSearch input[type="text"]#searchSMonth,
#blockSearch input[type="text"]#searchSDay {
	height: 35px;
	border: none;
	padding: 0 10px;
	color: #995566;
	box-sizing: border-box;
}

#blockSearch input[type="text"]#searchSYear {
	width: 18.0%;
	margin: 0 2.7778% 0 0;
}
#blockSearch input[type="text"]#searchSMonth {
	width: 13.0%;
	margin: 0 2.7778% 0 1.6%;
}
#blockSearch input[type="text"]#searchSDay {
	width: 13.0%;
	margin: 0 2.7778% 0 1.6%;
}

#blockSearch div.wrapper.f9 {
	white-space:nowrap;
}
#blockSearch input[type="text"].range_value {
	width:34.4%;
	height: 35px;
	border:none;
	padding:0 5px 2px;
}
#blockSearch input[type="text"].range_value::placeholder {
	color:#bbb;
	padding-bottom: 5px;
}

@media screen and (min-width:321px){
	#blockSearch input[type="text"].range_value.from {
		float:left;
	}
	#blockSearch input[type="text"].range_value.to {
		float:right;
	}
	span.range {
		position:relative;
		left:2px;
		top:8px;
	}
}

@media screen and (min-width:768px){
	span.range {
		position:relative;
		left:8px;
	}
}

#blockSearch select {
	width: 73%;
	height: 35px;
	margin: 0;
	padding: 0 0 0 10px;
	color: #995566;
	font-size: 16px;
	border: none;
	box-sizing: border-box;
}
#blockBtn ul li#btnSearch {
	margin:0 5px;
	border: none;
	box-shadow: none;
}
#list #blockSearch #blockBtn {
	margin-top: 20px;
}
#blockBtn ul li#btnReset button,
#blockBtn ul li#btnSearch button {
	display: block;
	width: 120px;
	line-height: 40px;
	color: #fff;
	font-size: 16px;
	text-align: center;
	background: #bb0022;
	border: none;
	box-shadow: none;
}
#blockBtn ul li#btnReset button {
	background:#867474;
}

#blockBtn ul li#btnSearch button i {display: none;}

#panList {
  margin: 0;
	padding: 10px 2% 20px;
	background: #fff;
}
#panList strong {
	font-weight: normal;
}
#panList a {
	color: #994466;
}
#panList i {	display: none;}
#panList ul {	padding: 0;}
#blockOption {
	max-width: 1164px;
	margin: 0 auto 55px;
	padding: 0;
}
p#msgHitCnt {
	padding: 10px 20px;
	color: #660011;
	background: #f1ebeb;
}
#blockOption .wrapper {
	padding: 20px 20px 0;
	box-sizing: border-box;
}
#blockOption .wrapper select {
	height: 35px;
	margin: 0;
	padding-left: 5px;
	color: #995566;
	border: 1px solid #ddcccc;
	background: linear-gradient(to bottom, #fdfdfd, #f0e9e9);
}

#blockInput #blockOption .wrapper #searchStage select {
	background: #fff;
}
#blockSort {
	width: 70%;
	max-width: 465px;
	margin: 0 0 0;
}
#blockOption .wrapper select#listResultNaviCategory {
	width: 95%;
	font-size: 13px;
	margin-right: 5.4%;
}
#blockOption #changeCnt {
	width: 20%;
	margin-left: 2%;
	color: #995566;
}
#blockOption #changeCnt select {
	width: 60%;
	margin: 0 15px 0 0;
}

#navPager {
	width: 100%;
}
#navPager.block-bottom {
	float:none;
}

#list #navPager.block-bottom {
	margin-bottom:25px;
}

#det #navPager {
	text-align:center;
}
#listResult+#navPager {
	padding: 0 20px;
	box-sizing: border-box;
}
#navPager li {
	width: 17.143%;
	margin: 0 1.2%;
	border: 1px solid #ddcccc;
}
#navPager li#navFirst {	margin: 0 1.2% 0 0;}
#navPager li#nowPage {	margin: 0 2.3%;}
#navPager li#navLast {	margin: 0 0 0 1.2%;}

#navPager li a {
	width: 100%;
	height: 33px;
	margin: 0;
	padding: 0;
	color: #995566;
	line-height: 33px;
	text-align: center;
	text-decoration: none;
	border: none;
	background: linear-gradient(to bottom, #fdfdfd, #f0e9e9);
}
#navPager li:hover a {
	background: linear-gradient(to bottom, #f0e9e9, #fdfdfd);
}
#nowPage {
	width: 14.2858%;
	color: #995566;
	line-height: 35px;
	text-align: center;
	background: #f1ebeb;
}

#areaContents {
	padding-bottom: 56.25vw;
	background: url(../../../cmn_img/theme/4158/footer_img.jpg) no-repeat center bottom;
	background-size: 100% auto;
}
#listResult {
	border: none;
	margin: 0 0 40px;
	padding: 0 20px !important;
}
ul.list-type-compati li {
	width: 100%;
	float: none;
	margin: 1em 0 0;
	padding: 1em 0 0;
	border-top: 1px #cccccc dotted;
	border-bottom: none;
}
ul.list-type-compati li:nth-child(even) {	float: none;}
ul.list-type-compati li:nth-child(1) {
	margin: 0;
	padding: 0;
	border-top: none;
}
ul.list-type-compati .photo {
	width: 92px !important;
	height: 132px !important;
	margin: 0 3% 0 0;
}
ul.list-type-compati .article {
	width: 65% !important;
}
ul.list-type-compati li .title {
	padding-bottom: 5px;
	font-size: 15px;
	font-weight: bold;
	line-height: 26px;
}
ul.list-type-compati li span.title a {
	color: #660011;
}
ul.list-type-compati li .detail {
	font-size: 13px;
	line-height: 22px;
}
#det
#detailMain {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 4px solid #660011;
}
#blockPhoto {
	padding: 0 20px;
	box-sizing: border-box;
}
#blockPhoto.type-Thumb #imagearea {
	display: block !important;
	width: 100% !important;
	margin: auto;
	text-align: center;
	vertical-align: middle;
}
#blockPhoto.type-Thumb #imagearea img {
	width: 100%;
}
#blockPhoto #imageContainer img.fit {
	max-width: 100%;
	width: 100%;
}

#pictCaption{
	display:none;
}

p#navZoom {
	width: 160px;
	height: 45px;
	margin: 20px auto 0px;
	border: none;
}
p#navZoom a,
p#navZoom a:hover {
	display: block;
	width: 160px;
	height: 45px;
	padding-left:25px;
	color:#fff;
	background: url(../../../cmn_img/theme/4158/btn_enlargement.png) no-repeat center;
}
p#navZoom a:hover {
	opacity: 0.8;
}
p#navZoom i {
	display:none;
}
/* 拡大テキスト */
p#navZoom span {
	font-size:17px;
	font-weight:normal;
	line-height:2.6em;
}

#blockData {
	width: 100%;
	box-sizing: border-box;
}
#blockDoc h1:not(.strong) {
	padding: 0 2%;
}
#blockDoc h1 strong {
	color: #660011;
	font-size: 20px;
	font-weight: bold;
	line-height: 30px;
}
#blockData table {	border: none;}
#blockData table tr:nth-child(odd) {
	background: #f5f0f0;
}
#blockData table th {
	width:55px;
	padding: 5px 0 5px 10px;
	color: #660011;
	font-size: 13px;
	line-height: 26px;
	font-weight: 500;
	border: none;
	border-top: 1px solid #ddcccc;
	border-bottom: 1px solid #ddcccc;
}
#blockData table td {
	padding: 5px 10px;
	color: #660011;
	font-size: 13px;
	line-height: 26px;
	font-weight: normal;
	border: none;
	border-top: 1px solid #ddcccc;
	border-bottom: 1px solid #ddcccc;
}

#pageTop {
	text-align: left;
	text-indent: -9999px;
	position: absolute;
}
#pageTop a {
	display: block;
	position: fixed;
	bottom: 63px;
	right: 20px;
	z-index: 9999;
	width: 40px;
	height: 40px;
	margin: 0;
	text-indent: -9999px;
	background: url(../../../cmn_img/theme/4158/btn_pagetop.png) no-repeat center;
	background-size: 40px 40px;
}
/* ▲▲▲　20170727 add css ▲▲▲
------------------------------------*/

@media only screen and (max-width:480px){
	#blockSort {
		max-width: auto;
		margin: 0;
	}
	#blockOption .wrapper select#listResultNaviCategory {
		width: auto;
			font-size: 13px;
		margin-right: 4%;
	}
	#blockOption #changeCnt {
		margin-left: 0;
		color: #995566;
	}
	#blockOption #changeCnt select {
		width: auto;
		margin: 0 15px 0 0;
	}
}
@media only screen and (max-width:430px){
	#blockSort {width: 100%;}
	#blockOption #changeCnt {width: 100%;}
}