@charset 'utf-8';

/*  共通 
----------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400,700&subset=japanese');
html{max-width:100%;}
html body{margin:0;}
.spOnly{display:none;}
#suntory_contents img{
	width: 100%;
	vertical-align: bottom;
}
#suntory_contents em,#suntory_contents span{	font: inherit;}
#suntory_contents{overflow:hidden;-webkit-text-size-adjust:100%;font-family: 'Noto Sans JP', sans-serif;}
#suntory_contents ul,#suntory_contents ol{list-style-type:none;}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* .nav */
#suntory_contents .navwrap .navInner{
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	display: table;
}
#suntory_contents .navwrap .navInner .nav{
	display: table-cell;
	vertical-align: middle;
	padding: 15px 0;
	text-align: center;
}
#suntory_contents .navwrap .navInner .nav a{
	font-size: 18px;
	color: #cd6829;
	text-decoration: none;
	opacity: 0.6;
}
#suntory_contents .navwrap .navInner .nav.toTop a{
	font-size: 34px;	
	color: #613006;
	letter-spacing: 0.1em;
	text-decoration: none;
	opacity: 1;
}
#suntory_contents .navwrap .navInner .nav.active a{	opacity: 1;}
#suntory_contents .isFixed{ padding-top: 80px;}
#suntory_contents .isFixed .navwrap{
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
}

/* .maincontArea */
#suntory_contents .maincontArea .contentsInner{ background: #d6864c;}
#suntory_contents .maincontArea .mv{
	position: relative;
	width: 100%;
	height: 325px;
	background: url(/wnb/guide/bar/img/img_kv02_pc.jpg) no-repeat center;
	background-size: cover;
	margin: 0 auto;
	text-align: center;
}
#suntory_contents.index .maincontArea .mv{
	background: url(/wnb/guide/bar/img/img_kv01_pc.jpg) no-repeat center;
	background-size: auto;
	height: 477px;
}
#suntory_contents .maincontArea .mv .mvtxt{
	position: absolute;
	width: 330px;
	top: 65px;
	right: 0;
	left: 0;
	margin: 0 auto;
}
#suntory_contents.index .maincontArea .mv .mvtxt{
	width: 345px;
	top: 102px;
	left: 220px;
}
#suntory_contents .maincontArea .mv img{ vertical-align: bottom;}

/*.detailconArea*/
#suntory_contents .detailconArea{ background: #e9ded1;}
#suntory_contents .detailconArea .contentsInner{ padding: 60px 0 100px;}

#suntory_contents .detailconArea .frame{
	width: 1030px;
	margin: 0 auto;
}
#suntory_contents.index .detailconArea .frame{ width: 580px;}
#suntory_contents .detailconArea h1{
	margin-bottom: 60px;
	color: #cd6829;
	font-size: 40px;
	font-weight: 300;
}
#suntory_contents.index .detailconArea h1{
	margin-bottom: 40px;
	color: #613006;
	font-size: 44px;
	line-height: 1.3;
	text-align: center;
}
#suntory_contents .detailconArea h1 span{ border-bottom: 1px solid #cd6829;}
#suntory_contents .detailconArea .txt{ font-size: 18px;}
#suntory_contents .detailconArea .orange{ color: #cd6829;}
#suntory_contents.index .detailconArea .txt{ font-size: 20px;}
#suntory_contents .detailconArea .btn.next a{	padding-right: 45px;}
#suntory_contents .detailconArea .btn.back a:before,
#suntory_contents .detailconArea .navBtn.col2 .btn.back a:after,
#suntory_contents .detailconArea .btn.next a:after{
	content: '';
	display: block;
	position: absolute;
	right: 30px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 13px;
	height: 13px;
	border-top: 2px solid #613006;
	border-right: 2px solid #613006;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#suntory_contents .detailconArea .btn.back a:before,
#suntory_contents .detailconArea .navBtn.col2 .btn.back a:after{
	left: 15px;
	right: auto;
	border: none;
	border-bottom: 2px solid #613006;
	border-left: 2px solid #613006;
	z-index: 2;
}
#suntory_contents .detailconArea .navBtn.col2 .btn.back a:after{ left: 25px;}
#suntory_contents .detailBtn,
#suntory_contents .detailconArea .btn{
	width: 100%;
}
#suntory_contents .detailBtn a,
#suntory_contents .detailconArea .btn a{
	position: relative;
	width: 100%;
	display: table;
	padding: 15px 30px 20px;
	color: #613006;
	font-size: 20px;
	text-align: center;
	border: 2px solid #fff;
	text-decoration: none;
	border-radius: 10px;
	box-shadow: 0 0 13px rgba(0,0,0,0.3);
	box-sizing: border-box;
	transition: background 0.5s;
}
#suntory_contents .detailBtn a:hover,
#suntory_contents .detailconArea .navBtn .btn a:hover,
#suntory_contents .detailconArea .linkBtn .btn a:hover{ background: #fff;}
#suntory_contents .detailconArea .navBtn{
	position: relative;
	margin-top: 80px;
}
#suntory_contents .detailconArea .navBtn .btn p{
	display: table-cell;
	vertical-align: middle;
	color: #613006;
}
#suntory_contents .detailconArea .navBtn .btn{ margin-top: 15px;}
#suntory_contents .detailconArea .navBtn .btn:first-child{	margin-top: 0;}
#suntory_contents .detailconArea .navBtn .btn a{
	background: #d3bca4;
	display: table;
	width: 100%;
	font-size: 20px;
}
#suntory_contents .detailconArea .navBtn.col2 .btn{ width: 32%;}
#suntory_contents .detailconArea .navBtn.col2 .btn a{ padding: 15px 15px 15px 35px;}
#suntory_contents .detailconArea .navBtn .btn a span{ 
	font-size: 22px;
	border-bottom: 1px solid #613006;
}
#suntory_contents .detailconArea .navBtn .btn .btnTxt{
	width: 70%;
	text-align: left;
}
#suntory_contents .detailconArea .navBtn .btn .btnNum{	font-size: 16px;}
#suntory_contents .detailconArea .linkBtn{ margin-top: 80px;}
#suntory_contents.index .detailconArea .linkBtn{ margin-top: 90px;}
#suntory_contents .detailconArea .linkBtn .btn{
	width: 49%;
	float: left;
	margin-left: 2%;
}
#suntory_contents .detailconArea .linkBtn .btn:first-child{	margin-left: 0;}
#suntory_contents .detailconArea .linkBtn .btn a{
	background: #bd9c79;
	padding: 10px 12px 12px 25px;
	font-size: 16px;
	line-height: 1.2;
}
#suntory_contents.index .detailconArea .linkBtn .btn a{
	font-size: 20px;
	border-width: 1px;
}
#suntory_contents .detailconArea .linkBtn .btn a span{
	display: table-cell;
	vertical-align: middle;
}
#suntory_contents .detailconArea .linkBtn .btn span.small{
	display: inline;
	font-size: 0.8rem;
	border: none;
	vertical-align: baseline;
}

/*  TOP 
----------------------------------------*/
.iziModal-content{
	font-family: 'Noto Sans JP', sans-serif;
	position: relative;
	padding: 80px 30px!important;
}
.iziModal-content img{ width: 100%;}
.iziModal-content p[data-izimodal-close="closeBtn"]{
	content: '';
	display: block;
	position: absolute;
	right: 7%;
	top: 30px;
	width: 47px;
	height: 47px;
	margin: 0;
}
.iziModal-content p[data-izimodal-close="closeBtn"]:hover{
	cursor: pointer;
}
.iziModal-content .frame{
	max-width: 640px;
	margin: 0 auto;
}
.iziModal-content h2,
.iziModal-content .name{
	color: #612806;
	text-align: center;
}
.iziModal-content h2{
	margin: 0 auto 10px;
	font-size: 32px;
	font-weight: normal;
}
.iziModal-content h2 span{ border-bottom: 1px solid #612806;}
.iziModal-content .name{
	margin: 0;
	font-size: 20px;
}
.iziModal-content .txt{	margin: 60px 0 0;}
.iziModal-content .txt span{ color: #cd6829;}

/* #modal */
#suntory_contents .detailconArea #modal{ display: none;}
#suntory_contents .detailBtn{	margin-top: 60px;}
#suntory_contents .detailBtn a{	font-size: 24px;}
#suntory_contents .detailBtn a span{	border-bottom: 1px solid #613006;}

/*  下層
----------------------------------------*/
#suntory_contents .detailconArea h2{
	margin-bottom: 40px;
	color: #cd6829;
	font-size: 30px;
	font-weight: 400;
}
#suntory_contents .detailconArea h2 em{ 
	padding-right: 1em;
	color: #613006;
}
#suntory_contents .detailconArea h2 em,
#suntory_contents .detailconArea h2 span{
	display: inline-block;
	vertical-align: top;
}
#suntory_contents .detailconArea .detailBox{
	width: 100%;
	margin-bottom: 35px;
}
#suntory_contents .detailconArea .detailBox.col2.tate.clearfix:after{
	clear: left;
}
#suntory_contents .detailconArea .detailBox.col2 .txt{
	width: 56%;
	float: left;
} 
#suntory_contents .detailconArea .detailBox.col2.tate .txt{ width: 69%;}
#suntory_contents .detailconArea .detailBox.col2 .ph{
	width: 38%;
	float: right;
} 
#suntory_contents .detailconArea .detailBox.col2 .ph span{
	display: block;
	margin-top: 15px;
}
#suntory_contents .detailconArea .detailBox.col2 .ph span:first-child{ margin-top: 0;}
#suntory_contents .detailconArea .detailBox.col2.tate .ph{ width: 25%;}
 #suntory_contents .pageTop a{
	background: url(/wnb/guide/bar/img/icon_pagetop.png) no-repeat center 0;
	background-size: 57px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 70px;
	margin: 0 auto;
	padding-top: 70px;
	z-index: 2;
	font-size: 1rem;
	color: #613006;
	text-decoration: none;
	text-align: center;
	 transition: background 0.4s;
}
#suntory_contents .pageTop a:hover{ 
	background: url(/wnb/guide/bar/img/icon_pagetop_active.png) no-repeat center 0;
	background-size: 57px;
	 vertical-align: top; 
}
/* -- 1024px以下 -- */
@media screen and (max-width: 1024px) {
	#suntory_contents .detailconArea .frame{ width: 97%;}
}

/* -- 767px以下 -- */
@media screen and (max-width:767px){
/*  共通［SP］
----------------------------------------*/
	html,body{overflow-x:hidden;}
	.pcOnly{display:none;}
	.spOnly{display:block;}
	
	/*.nav*/
	#suntory_contents .navwrap .navInner{ background: #e9ded1;}
	#suntory_contents .navwrap .navInner .nav{
		display: block;
		background: #fff;
		margin-top: 5px;
		padding: 0;
	}
	#suntory_contents .navwrap .navInner .nav a{ 
		padding: 10px 5px;
		display: block;
	}
	#suntory_contents .isFixed{ padding-top: 104px;}
	#suntory_contents .isFixed .navwrap{
		top: 0;
		background: none;
	}
	#suntory_contents .isFixed .navwrap .navInner .nav:first-child{ margin-top: 0;}
	#suntory_contents.innerPage .navwrap .navInner{	border-bottom: #65360d solid 1px;}
	#suntory_contents.innerPage .navwrap .navInner .nav{ border-top: #65360d solid 1px;}
	#suntory_contents.innerPage .navwrap .navInner .nav:last-child{	margin-top: 0;}
	
	/*.maincontArea*/
	#suntory_contents .maincontArea .mv,
	#suntory_contents.index .maincontArea .mv{
		height: auto;
		background: none;
	}
	#suntory_contents.index .maincontArea .mv .mvtxt{
		position: relative;
		width: 63%;
		margin: 0;
		padding: 2px 0 20px;
		left: 25%;
		right: auto;
		top: auto;
}

	/*.detailconArea*/
	#suntory_contents .detailconArea .contentsInner{ padding: 50px 0 25px}
	#suntory_contents.index .detailconArea .contentsInner{ padding-top: 20px;}
	#suntory_contents .detailconArea .frame{
		width: 100%;
		padding: 0 4%;
		box-sizing: border-box;
	}
	#suntory_contents.index .detailconArea .frame{ width: 100%;}
	#suntory_contents .detailconArea h1,
	#suntory_contents.index .detailconArea h1,
	#suntory_contents .detailconArea h2{
		margin-bottom: 20px;
		font-size: 1.4rem;
		font-weight: 400;
	}
	#suntory_contents .detailconArea h1 span{
	  display: inline-block;
    padding-bottom: 0.3em;
	}
	#suntory_contents .detailconArea .txt,
	#suntory_contents.index .detailconArea .txt{ font-size: 1rem;}
	#suntory_contents .detailconArea .btn.back a:before,
	#suntory_contents .detailconArea .navBtn.col2 .btn.back a:after,
	#suntory_contents .detailconArea .btn.next a:after{
		width: 7px;
		height: 7px;
		right: 20px;
		border-width: 1px;
	}
	#suntory_contents .detailconArea .btn.back a:before{
		right: auto;
		left: 10px;
	}
	#suntory_contents .detailconArea .navBtn.col2 .btn.back a:after{
		right: auto;
		left: 18px;
	}
	#suntory_contents .detailconArea .btn.next a{ padding-right: 27px;}
	#suntory_contents .detailconArea .navBtn,
	#suntory_contents .detailconArea .linkBtn,
	#suntory_contents.index .detailconArea .linkBtn{ margin-top: 40px;}
	#suntory_contents .detailconArea .linkBtn .btn a{ text-align: left;}
	#suntory_contents .detailconArea .linkBtn .btn{
		width: 100%;
		float: none;
		margin: 15px 0 0;
	}
	#suntory_contents .detailBtn a,
	#suntory_contents .detailconArea .btn a{
		border-width: 1px;
		padding: 10px 1em;
	}
	#suntory_contents .detailconArea .btn.back a,
	#suntory_contents.index .detailconArea .btn.back a{
		padding-right: 5px;
		font-size: 0.8rem;
	}
		
	
/*  TOP［SP］
----------------------------------------*/
	/* #modal */
	.iziModal{ min-width: 100%;}
	.iziModal-content{ padding: 65px 5% 40px!important;}
	.iziModal-content p[data-izimodal-close="closeBtn"]{
		width: 7%;
		height: auto;
		right: 10px;
		top: 10px;
		background-size: contain;
	}
	.iziModal-content .frame{
		max-width: 100%;
		padding: 0 3%;
	}
	.iziModal-content h2{	font-size: 1.4rem;}
	.iziModal-content .name{
		margin-top: 20px;
		font-size: 0.9rem;
	}
	.iziModal-content .txt{ margin-top: 20px;}
	
	/*.detailconArea*/
	#suntory_contents .detailBtn a,
	#suntory_contents .detailconArea .navBtn .btn a span{ font-size: 0.9rem;}
	#suntory_contents .detailconArea .navBtn .btn .btnNum{	font-size: 0.8rem;}
	#suntory_contents .detailconArea .navBtn.col2 .btn{ width: 49%;}
	#suntory_contents .detailconArea .navBtn.col2 .btn a{
		padding: 10px 1em 10px 30px;
		text-align: left;
	}
	#suntory_contents .detailBtn{	margin-top: 25px;}

	
/*  下層［SP］
----------------------------------------*/
	#suntory_contents .detailconArea .detailBox{
		margin-bottom: 60px;
	}
	#suntory_contents .detailconArea .detailBox.col2.tate.clearfix:after{ clear: both;}
	#suntory_contents .detailconArea .detailBox.col2 .txt,
	#suntory_contents .detailconArea .detailBox.col2.tate .txt,
	#suntory_contents .detailconArea .detailBox.col2 .ph,
	#suntory_contents .detailconArea .detailBox.col2.tate .ph{
		width: 100%;
		float: none;
	}
	#suntory_contents .detailconArea .detailBox.col2 .ph{ 
		width: 84%;
		margin-top: 25px;
		margin-left: auto;
		margin-right: auto;
	}
	#suntory_contents .detailconArea .detailBox.col2.tate .ph{ width: 56%;}
	#suntory_contents .pageTop a{ 
		background: url(/wnb/guide/bar/img/icon_pagetop.png) no-repeat center 0;
		background-size: 100%;
		width: 35px;
		height: auto;
		top: -5px;
		left: inherit;
		right: 5px;
    padding-top: 38px;
		font-size: 0.8rem;
		letter-spacing: 0.1em;
	}
	#suntory_contents .pageTop a:hover{	
		background: url(/wnb/guide/bar/img/icon_pagetop_active.png) no-repeat center 0;
		background-size: 100%;
	}
}