@charset "utf-8";

/*font*/
@font-face {font-family: 'BaskervilleLT-RegularOldFace';src: url('/wnb/sipsmith/fonts/38105A_0_0.eot');src: url('/wnb/sipsmith/fonts/38105A_0_0.eot?#iefix') format('embedded-opentype'),url('/wnb/sipsmith/fonts/38105A_0_0.woff2') format('woff2'),url('/wnb/sipsmith/fonts/38105A_0_0.woff') format('woff'),url('/wnb/sipsmith/fonts/38105A_0_0.ttf') format('truetype');}

/*base*/
body { font-family: BaskervilleLT-RegularOldFace;}

html #sipsmithWrap{ visibility: hidden; background:#005142; }
html.wf-active #sipsmithWrap{  visibility: visible;}
html body{ margin: 0; overflow-x: hidden;}
#suntory_contents{ overflow: hidden; -webkit-text-size-adjust: 100%;}


@media screen and (min-width: 1164px){
 #suntory_contents{ margin: 0 auto; overflow: inherit;}
 #suntory_contents .contentsInner{ width: 1164px; margin: 0 auto;}
}

@media screen and (max-width: 1164px){
#suntoryCommonHd_menu_pc{ width: 100%;}
}

#suntory_contents ul,
#suntory_contents ol{ list-style-type: none;}

#suntory_contents .contentsInner p{ font-family: BaskervilleLT-RegularOldFace, serif;}
#suntory_contents #sipsmithWrap{ overflow: hidden;}

.pcOnly{}
.spOnly{ display: none;}

@media screen and (max-width: 767px){
.pcOnly{ display: none;}
.spOnly{ display: block;} 
}

#suntory_contents a img{ -webkit-transition: all .2s ease-in-out 0s; transition: all .2s ease-in-out 0s;}
#suntory_contents a:hover img{ opacity: 0.7;}

/*contents*/
#suntory_contents .contentsInner{ margin: 0 auto; padding: 70px 0 0 0;}

#suntory_contents .mainContentsarea {background: #fff;margin-top: 25px;}
#suntory_contents .mainContentsarea .logo{ clear: both; margin-top: -99px; text-align: center; opacity: 0;
	-webkit-transition: -webkit-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
	-o-transition: -o-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
	transition: transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
}
html.wf-active #suntory_contents .mainContentsarea .logo{ opacity: 1;}
#suntory_contents .mainContentsarea .contentsInner{ padding: 0 0 0; position:relative;}

#suntory_contents .detailContents {position: relative; overflow: hidden;}
#suntory_contents .detailContents h2{ text-align: center; font-size:4.7em; font-family: BaskervilleLT-RegularOldFace, serif; font-weight: normal; position: relative; z-index: 1; color: #fff;
	-webkit-transition: -webkit-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
	-o-transition: -o-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
	transition: transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
}
#suntory_contents .detailContents.show h2{ opacity: 1;}
#suntory_contents .detailContents .img{ text-align: center;}

#suntory_contents .detailContents .contentsInner.more{ clear: both; padding: 0 0 70px 0; }

#suntory_contents .detailContents .detailBlock{ padding: 0 0 0;}
#suntory_contents .detailContents .detailBlock h3{ font-weight: normal; text-align: center; font-size: 3.2em; margin: 0;}
#suntory_contents .detailContents .detailBlock p{ text-align: center; font-size: 1.6em; font-weight: bold; margin: 50px 0; line-height: 2.2;}

#suntory_contents .mainContentsarea .subLinkarea .spMenu,
#suntory_contents .mainContentsarea .subLinkarea .spNav,
#suntory_contents .mainContentsarea .subLinkarea .spLogo{ display: none;}

/*nav*/
#suntory_contents .nav{ height: 87px;}
#suntory_contents .nav .navInner{ background: #005142; color: #fff;}
#suntory_contents .nav .navInner.fixed{ position: fixed; top: 0;}
#suntory_contents .nav .navInner ul{ width: 100%; max-width: 960px; overflow: hidden; display: table; margin: 0 auto; padding: 0 22px; text-align: center; box-sizing: border-box;}
#suntory_contents .nav .navInner ul li{ padding: 32px 0; display: table-cell;}

#suntory_contents .nav .navInner ul li:first-child{ width: 11%;} 
#suntory_contents .nav .navInner ul li:first-child + li{ width: 16%;}
#suntory_contents .nav .navInner ul li:first-child + li + li{width: 13.6%}
#suntory_contents .nav .navInner ul li:first-child + li + li + li{width: 15.5%;}
#suntory_contents .nav .navInner ul li:first-child + li + li + li + li{ width: 10%; }
#suntory_contents .nav .navInner ul li:first-child + li + li + li + li + li{ width: 23%; }

#suntory_contents .nav .navInner ul li a{ font-style: normal; font-weight: 500; font-size: 2em; color: #fff; text-decoration: none; -webkit-transition: all .2s ease-in-out 0s; transition: all .2s ease-in-out 0s;}
#suntory_contents .nav .navInner ul li a:hover{ opacity: 0.7;}

#suntory_contents .nav .navInner.fixed{ width: 100%; z-index: 10;}


@media screen and (max-width: 767px){
 html,body,
 #suntoryCommonHd_in,
 #suntoryCommonHd_01,
 #suntoryCommonHd_menu_pc,
 #suntoryCommonHd_menu .suntoryCommon_menu_box_in,
 #suntoryCommonFt_in,
 #suntory_contents,
 #suntory_contents .nav .navInner ul{ min-width: inherit;}
 
 #suntory_contents .nav .navInner.fixed{ position:relative;}
 #suntory_contents,
 #suntory_contents .nav .navInner ul{ min-width: inherit; width: 100%;}
 #suntory_contents #rokuginWrap{ min-width: inherit;}
 
 #suntory_contents .detailContents{ margin-top: 0;}

 #suntory_contents .detailContents h2{ font-size: 2.8em;}

 #suntory_contents .detailArea{ background: none; padding: 0 0 0;}
 #suntory_contents .detailArea::before { background-size: 100% auto; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; content: ""; z-index: -1;}
 #suntory_contents .detailContents .detailBlock{ padding: 0 0 30px;}

 #suntory_contents .mainContentsarea .logo{ padding: 0 50px; width: 220px; margin: 0 auto;}
 #suntory_contents .mainContentsarea .logo img{ margin-top: -36px; width: 100%; height: auto;}
 #suntory_contents .mainContentsarea .catch{ font-size: 1.3em; margin: 15px 0;}
 #suntory_contents .mainContentsarea .contentsInner{ padding: 0 0 10px;}
 #suntory_contents .mainContentsarea .subLinkarea .mediaLinks li{ width: 20px; margin-left: 15px;}
 #suntory_contents .mainContentsarea .subLinkarea .mediaLinks li a{ height: 20px;}
 #suntory_contents .mainContentsarea .subLinkarea .mediaLinks li a img{ width: 100%; height: auto;}
 #suntory_contents .detailContents .detailBlock p{ font-size: 1.4em; margin: 15px auto; text-align: left; line-height: 1.6;}

 #suntory_contents .detailContents .detailBlock h3{ font-size: 1.6em;}
 #suntory_contents .mainContentsarea .subLinkarea{ position: relative; overflow: inherit;}
 #suntory_contents .mainContentsarea .subLinkarea .headContents{ border-top: solid 1px #989898; background: #fff; overflow:hidden; padding: 10px 15px 7px 10px;}
 #suntory_contents .mainContentsarea .subLinkarea .spMenu,
 #suntory_contents .mainContentsarea .subLinkarea .spLogo{ display: block;}
 #suntory_contents .mainContentsarea .subLinkarea .spMenu{ float: none; width: 30px; height: 30px; margin: 15px 15px 0 0; text-indent: -9999px; overflow: hidden; position: absolute; background: url(/wnb/sipsmith/img/btn_spmenu_off.png)no-repeat; background-size: 30px auto; z-index: 10; top: 0; right: 0;}
 #suntory_contents .mainContentsarea .subLinkarea .spMenu.cur{ background: url(/wnb/sipsmith/img/btn_spmenu_on.png)no-repeat; background-size: 30px auto;}
 #suntory_contents .mainContentsarea .subLinkarea .spMenu:hover{ cursor: pointer;}
 #suntory_contents .mainContentsarea .subLinkarea .spLogo{ float: left; width: 88px;}
 #suntory_contents .mainContentsarea .subLinkarea .spLogo img{ width: 100%; height: auto;}
 #suntory_contents .mainContentsarea .subLinkarea ul{ clear: none; float: right; margin: 6px 0 0 0;}

 #suntory_contents .btnOnline a{ font-size:1.4em; padding:2px 30px;}
 
 #suntory_contents .mainContentsarea .nav{ position: absolute; width: 100%; display: none; top: 74px; left: 0; z-index: 1;}
 #suntory_contents .mainContentsarea .navInner{ background: none;}
 #suntory_contents .mainContentsarea .nav .navInner ul{ float: right; width: 80%; clear: both; padding: 55px 0; background: rgba(255,255,255,0.95);}
 #suntory_contents .mainContentsarea .nav .navInner ul li{ display: block; float: none; text-align: left; margin: 0; padding: 10px 30px;}
 #suntory_contents .nav .navInner ul li:first-child,
 #suntory_contents .nav .navInner ul li:first-child + li,
 #suntory_contents .nav .navInner ul li:first-child + li + li,
 #suntory_contents .nav .navInner ul li:first-child + li + li + li,
 #suntory_contents .nav .navInner ul li:first-child + li + li + li + li,
 #suntory_contents .nav .navInner ul li:first-child + li + li + li + li + li{ width: inherit;} 
 #suntory_contents .mainContentsarea .nav .navInner ul li a{ display:block; font-size: 2em; color: #005142; padding: 0; text-decoration: none;}
 
 #suntory_contents .contentsInner{ width: 100%; padding: 40px 30px 20px; box-sizing: border-box; }

 }
 
/*.fade01,
.fade02,
.fade03{ opacity: 0;}*/

.contentsInner.show .fade01{ opacity: 1;
	-webkit-transition: -webkit-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
	-o-transition: -o-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
	transition: transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
}
.contentsInner.show .fade02{ opacity: 1;
	-webkit-transition: -webkit-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.3s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.6s;
	-o-transition: -o-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.3, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.6s;
	transition: transform 1.0s cubic-bezier(.15,.15,.15,1) 0.3s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.6s;
}
.contentsInner.show .fade03{ opacity: 1;
	-webkit-transition: -webkit-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.6s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.9s;
	-o-transition: -o-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.6, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.9s;
	transition: transform 1.0s cubic-bezier(.15,.15,.15,1) 0.6s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.9s;
}

.contentsInner.show.hide .fade03{ opacity: 0;
	-webkit-transition: -webkit-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
	-o-transition: -o-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
	transition: transform 1.0s cubic-bezier(.15,.15,.15,1) 0.0s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.3s;
}
.contentsInner.show.hide .fade02{ opacity: 0;
	-webkit-transition: -webkit-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.3s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.6s;
	-o-transition: -o-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.3, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.6s;
	transition: transform 1.0s cubic-bezier(.15,.15,.15,1) 0.3s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.6s;
}
.contentsInner.show.hide .fade01{ opacity: 0;
	-webkit-transition: -webkit-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.6s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.9s;
	-o-transition: -o-transform 1.0s cubic-bezier(.15,.15,.15,1) 0.6, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.9s;
	transition: transform 1.0s cubic-bezier(.15,.15,.15,1) 0.6s, opacity 1.5s cubic-bezier(.15,.15,.15,1) 0.9s;
}



/*-------------------------unique setting-----------------------------------------*/

#suntory_contents .contentsInner div.mainvisual{ position: relative;}
#suntory_contents .contentsInner div.mainvisual div.mvInner{ position: absolute; top: 50%; left: 12%; transform: translate( -30%, -50%);}
#suntory_contents .contentsInner div.mainvisual div.mvInner .text{ font-size: 2.3em; font-family: "Ryumin Regular KL", serif; display: block; text-align: center;}
#suntory_contents .contentsInner div.mainvisual div.mvInner .text strong{ font-size: 1.913em; font-weight: normal; line-height: 1; font-family: "BaskervilleLT-RegularOldFace";}
#suntory_contents .contentsInner div.mainvisual div.mvInner #div-gpt-ad-1469518796001-0-1{ display: block; width: 168px; margin: 5% auto 0;}
#suntory_contents .contentsInner div.mainvisual div.mvInner #div-gpt-ad-1469518796001-0-6{ display: none;}

#suntory_contents .contentsInner div.mainvisual div.mvInner p.mvLogo{ display: block; opacity: 1 !important; max-width: 422px; margin: 0 auto 30px;}
#suntory_contents .contentsInner div.mainvisual p.mvButton{ position: absolute; top: 50%; right: 15%; transform: translate(30%, -50%);}

@media screen and (max-width: 1420px){

#suntory_contents .contentsInner div.mainvisual div.mvInner .text{ font-size: 1.5vw;}
#suntory_contents .contentsInner div.mainvisual div.mvInner p.mvLogo{ width: 28vw; margin: 0 auto 2vw;}
#suntory_contents .contentsInner div.mainvisual p.mvButton{ width: 22vw;}
	
}

@media screen and (max-width: 767px){
#suntory_contents .contentsInner div.mainvisual div.mvInner{ position: static; transform: none;}
#suntory_contents .contentsInner div.mainvisual div.mvInner .text{ font-size: 1.6em; text-align: center; display: block; margin-bottom: 5px;}
#suntory_contents .contentsInner div.mainvisual div.mvInner .text strong{ font-size: 1.6em;}

#suntory_contents .contentsInner div.mainvisual div.mvInner #div-gpt-ad-1469518796001-0-1{ display: none;}    
#suntory_contents .contentsInner div.mainvisual div.mvInner #div-gpt-ad-1469518796001-0-6{ display: block; width: 168px; margin: 20px auto 0;}
#suntory_contents .contentsInner div.mainvisual #div-gpt-ad-1469518796001-0-6{ padding: 5% 15%; margin: 0 auto; width: auto; max-width: 236px;}
#suntory_contents .contentsInner div.mainvisual #div-gpt-ad-1469518796001-0-6 img{ width: 100%; height: auto;}

#suntory_contents .contentsInner div.mainvisual div.mvInner p.mvLogo{ width: 60%; margin: 0 auto 15px; padding-top: 19px;}
#suntory_contents .contentsInner div.mainvisual p.mvButton{ width: 93%; margin: 10px auto 0; position: static; transform: none;}
    
}

/*about*/
.detailContents#about{}	
.detailContents#about .contentsInner{color: #fff;}	
.detailContents#about .contentsInner .frame{ width: 905px; height: 330px; margin: 0 auto; padding: 130px 60px 0; background: url(/wnb/sipsmith/img/img_frame_01_pc.png) no-repeat 0 0; background-size: 100% auto;}
#suntory_contents .detailContents#about .contentsInner{ padding: 20px 0 70px;}
#suntory_contents .detailContents#about .contentsInner p{ font-size: 1.8em; font-family: "Ryumin Regular KL", serif; text-align: left;}

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

.detailContents#about .contentsInner ul{ width: 1010px; display: table; margin: 20px auto 0;}
.detailContents#about .contentsInner ul li{ width: 238px; display: inline-block; margin-right: 15px;}
.detailContents#about .contentsInner ul li:last-child{ margin-right: 0;}

.detailContents#about .contentsInner ul li img{ width: 100%; height: auto;}

@media screen and (max-width: 767px){

#suntory_contents .detailContents#about h2{ padding: 40px 0 10px;}
#suntory_contents .detailContents#about .contentsInner{ padding: 0;}
.detailContents#about .contentsInner .frame{ width: 100%; height: auto; margin: 0; padding: 19% 0 0; background: url(/wnb/sipsmith/img/img_frame_top_sp.png) no-repeat center top; background-size: contain;}
.detailContents#about .contentsInner .frameInner{ background: url(/wnb/sipsmith/img/img_frame_center_sp.png) repeat-y center top; background-size: contain;}
.detailContents#about .contentsInner .frameBottom{ background: url(/wnb/sipsmith/img/img_frame_bottom_sp.png) no-repeat center bottom; background-size: contain; padding-bottom: 18%;}
#suntory_contents .detailContents#about .contentsInner p{ font-size: 1.4em;}
.detailContents#about .contentsInner .frameInner p{ padding: 0 8%; margin: 6.2% 0 0;}

.detailContents#about .contentsInner ul{ width: calc(100% - 20px); margin-top: 10px;}
.detailContents#about .contentsInner ul li{ width: 49%; margin-right: 5px;}
.detailContents#about .contentsInner ul li:nth-of-type(2n){ margin-right: 0;}

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


/*product*/
.detailContents#product .contentsInner{ width: 995px;}
.detailContents#product{ background: url(/wnb/sipsmith/img/bg_map01.png) no-repeat 0 0;background-size: cover;}	
.detailContents#product h2{color: #000; margin-bottom: 50px;}

/*-------------------------*/
.detailContents#product .contentsInner .detailBlock{ width: 100%; display: table; margin: 0 auto; min-width: 825px;}
.detailContents#product .contentsInner .detailBlock div.left,
.detailContents#product .contentsInner .detailBlock div.right{ width: 47%; display: inline-table; margin: 0px 10px 0 50px; position: relative; min-width: 380px;}
.detailContents#product .contentsInner .detailBlock div.left{ margin: 0; float: left;}
.detailContents#product .contentsInner .detailBlock div.right{ margin: 0; float: right;}
.detailContents#product .contentsInner .detailBlock div img{ width: 100%; height: auto;}
.detailContents#product .contentsInner .detailBlock div.right img{ margin-left: 40px;}

.detailContents#product .contentsInner .detailBlock div p.caption{ position: absolute; top: 2%; left: -35%; right: 52%;}

.detailContents#product .contentsInner .detailBlock div p.caption .title{ display: block; font-size: 1.4em; text-align: right; font-weight: normal;}
.detailContents#product .contentsInner .detailBlock div p.caption .text{ display: block; font-size: 1.05em; text-align: right; font-weight: normal; font-family: "Ryumin Regular KL", serif;}

.detailContents#product .contentsInner .detailBlock div.right p.caption{ position: absolute; top: 2%; left: 50%; right: -35%;}
.detailContents#product .contentsInner .detailBlock div p.caption .title{ text-align: right;}
.detailContents#product .contentsInner .detailBlock div p.caption .text{ text-align: right; font-family: "Ryumin Regular KL", serif;}

.detailContents#product .contentsInner .detailBlock div.right p.caption .title{ text-align: left;}
.detailContents#product .contentsInner .detailBlock div.right p.caption .text{ text-align: left;}

.detailContents#product .contentsInner .detailBlock div.titleBox{ width: 100%; display: block; margin: 0 0 20px 0;}

.detailContents#product .contentsInner .detailBlock div.notesBox{ width: 100%; display: block; margin: 0;}

.detailContents#product .contentsInner .detailBlock div p{ margin: 0 20px; line-height: 1.5; text-align: left; vertical-align: top; font-size: 1.8em; height:  150px; font-family: "Ryumin Regular KL", serif;}
.detailContents#product .contentsInner .detailBlock div h3{ font-size: 4.5em; margin: -28% 0 0 0; padding-bottom: 30px; text-align: center; background: url(/wnb/sipsmith/img/img_productborder_01_pc.png) no-repeat center bottom; letter-spacing: 2px;}

.detailContents#product .contentsInner .detailBlock div h4{ font-size: 2em; text-align: left; margin-bottom: 10px;}

.detailContents#product .contentsInner .detailBlock div.notesBox dl dt{ width: 68px; height: 83px; display: inline-block; margin-bottom: 10px;}
.detailContents#product .contentsInner .detailBlock div.notesBox dl dd{ display: inline-block; width: calc(100% - 90px); vertical-align: top; margin: 10px 0 0 10px; font-size: 1.6em; font-family: "Ryumin Regular KL", serif; font-weight: bold;}
.detailContents#product .contentsInner .detailBlock div.right div.notesBox dl dt img{ margin-left: 0;}

.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-2,
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-2_ad_container,
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-3,
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-3_ad_container{ width: 236px; margin: 0 auto; height: auto; min-width: 0;}
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-2 img,
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-3 img{ margin: 0; width: 236px;}

.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-7,
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-8{ display: none;}

@media screen and (max-width: 1170px){
.detailContents#product .contentsInner .detailBlock div p.caption{ font-size: 1.4em;}
}

@media screen and (max-width: 767px){
.detailContents#product .contentsInner{ width: 100%;}
.detailContents#product h2{margin-bottom: 0;}
.detailContents#product .contentsInner .detailBlock{ min-width: 90%;}
.detailContents#product .contentsInner .detailBlock div.left,
.detailContents#product .contentsInner .detailBlock div.right{ width: calc(100% - 20px); display: block; margin: 0 auto 30px; min-width: calc(100% - 20px);}
.detailContents#product .contentsInner .detailBlock div.left{ padding-bottom: 30px; border-bottom: 1px solid #000; margin: 0 auto; float: none;}
.detailContents#product .contentsInner .detailBlock div.right{ margin: 0; float: none;}
    
.detailContents#product .contentsInner .detailBlock div.titleBox{ height: auto; margin: 0 0 20px 0;}
.detailContents#product .contentsInner .detailBlock div.notesBox{ height: auto;}
.detailContents#product .contentsInner .detailBlock div img{ width: 90%; height: auto; margin: 0 auto;}
.detailContents#product .contentsInner .detailBlock div.right,
.detailContents#product .contentsInner .detailBlock div.right img{ margin: 30px auto 0;}
.detailContents#product .contentsInner .detailBlock div h4{ text-align: center; font-size: 1.6em;}
.detailContents#product .contentsInner .detailBlock div p{ margin: 0; font-size: 1.4em;}
.detailContents#product .contentsInner .detailBlock div h3{ font-size: 2.8em; margin: -50px 0 0 0; padding-bottom: 30px;}
.detailContents#product .contentsInner .detailBlock div.notesBox dl dd{ font-size: 1.4em; margin-top: 0;}

.detailContents#product .contentsInner .detailBlock div p{ height: auto;}

.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-2,
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-3{ display: none;}
    
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-7,
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-7_ad_container,
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-8,
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-8_ad_container{ display: block; padding: 0; margin: 0 auto; width: auto; max-width: 236px;}
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-7 img,
.detailContents#product .contentsInner .detailBlock #div-gpt-ad-1469518796001-0-8 img{ width: 100%; height: auto;}

.detailContents#product .contentsInner .detailBlock div.right .parent-iframe-relative img{ margin: 0 auto;}

.detailContents#product .contentsInner .detailBlock div p.caption{ position: static; top: 0; left: 0;}
.detailContents#product .contentsInner .detailBlock div p.caption .title{ text-align: center; font-size: 1.5em;}
.detailContents#product .contentsInner .detailBlock div p.caption .text{ text-align: center;}

.detailContents#product .contentsInner .detailBlock div.right p.caption{ position: static; top: 0; left: auto; right: 0;}
.detailContents#product .contentsInner .detailBlock div p.caption .title{ text-align: center;}
.detailContents#product .contentsInner .detailBlock div p.caption .text{ text-align: center;}

.detailContents#product .contentsInner .detailBlock div.right p.caption .title{ text-align: center;}
.detailContents#product .contentsInner .detailBlock div.right p.caption .text{ text-align: center;}    

.detailContents#product .contentsInner .detailBlock div.right dt img{ margin: 0;}

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



/*gallery*/
.detailContents#gallery{}	
.detailContents#gallery .contentsInner{color: #fff;}

/*-------------------------*/
.detailContents#gallery .contentsInner .detailBlock .photoArea{ position: relative; height: 1700px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p{ position: absolute;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p img{ display: block; transition-duration: 0.3s; overflow: hidden; background: url(/wnb/sipsmith/img/img_arrow_green.png) no-repeat 0 0;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p img:hover{ transform: scale(1.1); transition-duration: 0.3s; cursor: pointer; opacity: 1;}


.detailContents#gallery .contentsInner .detailBlock .photoArea p .btn img{ background: none;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p img:hover{ transform: scale(1.1); transition-duration: 0.3s; cursor: pointer; opacity: 1;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p span{ overflow: hidden; display: block; position: relative;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p span.text{ font-size: 1.2em; line-height: 1.2; font-family: "Ryumin Regular KL", serif; padding-top: 10px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p span img.arrow{ position: absolute; bottom: 10px; right: 15px; width: 11px !important; height: 14px !important;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo01{ top: 0; left: 110px; background: url(/wnb/sipsmith/img/img_gallery_01_pc.png) no-repeat 0 0; width: 491px; height: 391px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo01 span{ width: 373px; height: 274px; margin: 53px 0 0 58px;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo02{ top: 55px; left: 655px; background: url(/wnb/sipsmith/img/img_gallery_02_pc.png) no-repeat 0 0; width: 413px; height: 321px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo02 span{ width: 355px; height: 272px; margin: 20px 0 0 21px;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo03{ top: 440px; left: 245px; background: url(/wnb/sipsmith/img/img_gallery_03_pc.png) no-repeat 0 0; background-size: 100% auto; width: 310px; height: 243px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo03 span{ width: 234px; height: 170px; margin: 33px 0 0 36px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo03 span img{ width: 100%; height: auto;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo04{ top: 450px; left: 600px; background: url(/wnb/sipsmith/img/img_gallery_04_pc.png) no-repeat 0 0; width: 576px; height: 494px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo04 span{ width: 496px; height: 412px; margin: 31px 0 0 32px;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo05{ top: 760px; left: 0; background: url(/wnb/sipsmith/img/img_gallery_07_pc.png) no-repeat 0 0; width: 414px; height: 316px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo05 span{ width: 316px; height: 220px;  margin: 46px 0 0 42px;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo06{ top: 985px; left: 445px; background: url(/wnb/sipsmith/img/img_gallery_06_pc.png) no-repeat 0 0; background-size: 100% auto; width: 211px; height: 233px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo06 span{ width: 135px; height: 163px; margin: 32px 0 0 35px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo06 span img{ width: 100%; height: auto;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo07{ top: 1060px; left: 695px; background: url(/wnb/sipsmith/img/img_gallery_05_pc.png) no-repeat 0 0; width: 420px; height: 308px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo07 span{ width: 317px; height: 215px; margin: 40px 0 0px 48px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo07 span img{ width: 100%; height: auto;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo08{ top: 1300px; left: 260px; background: url(/wnb/sipsmith/img/img_gallery_08_pc.png) no-repeat 0 0; width: 361px; height: 321px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo08 span{ width: 255px; height: 213px; margin: 49px 0 0 46px;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo05 span.btn,
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo07 span.btn{ width: 47px; height: 46px; position: absolute; top: 36%; left: 36%; transform: translate(-50%, -50%); display: block;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo05 span.btn img:hover,
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo07 span.btn img:hover{ transform: scale(1); transition-duration: 0.3s; cursor: pointer; opacity: 0.7;}

.remodal .modalWrap .frame{ width: 100%; height: auto; padding: 16% 0 50px; max-width: 840px; margin: 0 auto; background: url(/wnb/sipsmith/img/bg_modalframe_01.png) no-repeat center top; background-size: contain; position: relative;}
.remodal .modalWrap .frameInner{ background: url(/wnb/sipsmith/img/bg_modalframe_02.png) repeat-y center top; background-size: contain;}
.remodal .modalWrap .frameBottom{ background: url(/wnb/sipsmith/img/bg_modalframe_03.png) no-repeat center bottom; background-size: contain; padding-bottom: 21%;}

.remodal .modalWrap .frameInner p{ padding: 0 10%; margin: 20px 0 0; font-family: "Ryumin Regular KL", serif; font-size: 1em; line-height: 2.5; padding-bottom: 230px;}
.remodal .modalWrap .frameInner p.img{ width: 360px; height: auto; margin: 0 auto; position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); padding-bottom: 0;}
.remodal .modalWrap .frameInner p.img img{ width: 100%; height: auto;}

.remodal .modalWrap .frameInner p.photo05{ padding-bottom: 360px;}
.remodal .modalWrap .frameInner p.img.photo05{ bottom: 130px; padding-bottom: 0;}

.remodal .modalWrap .frameInner p.photo08{ padding-bottom: 275px;}
.remodal .modalWrap .frameInner p.img.photo08{ bottom: 125px; padding-bottom: 0;}

@media screen and (max-width: 767px){

.detailContents#gallery .contentsInner .detailBlock .photoArea{ position: relative; height: 1085px; width: 320px; margin: 0 auto;}   
.detailContents#gallery .contentsInner .detailBlock .photoArea p span img{ width: 100%; height: auto;}    
.detailContents#gallery .contentsInner .detailBlock .photoArea p span img.arrow{ position: absolute; bottom: 5px; right: 5px; width: 7px !important; height: 9px !important; background: none !important;}
    
.detailContents#gallery .contentsInner .detailBlock .photoArea p span.text{ font-size: 0.8em; line-height: 1.2; text-align: center;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo01{ top: -15px; left: 50%; background-size: cover; height: 161px; width: 205px; transform: translateX(-50%);}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo01 span{ width: 156px; height: 115px; margin: 22px 0 0 22px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo01 span.text{ width: 170px; margin-left: 15px; padding-top: 7px;}
    
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo02{ top: 185px; left: 15px; background-size: cover; height: 129px; width: 166px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo02 span{ width: 144px; height: 109px; margin: 8px 0 0 8px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo02 span.text{ width: 170px; margin: 3px 0 0 -4px; padding-top: 13px;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo03{ top: 240px; left: 200px; background-size: cover; height: 95px; width: 115px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo03 span{ width: 90px; height: 69px; margin: 12px 0 0 13px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo03 span.text{ width: 115px; margin: 7px 0 0 -1px; padding-top: 9px;}    

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo04{ top: 370px; left: 50%; background-size: cover; height: 193px; width: 225px; transform: translateX(-50%);}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo04 span{ width: 197px; height: 164px; margin: 9px 0 0 11px;}
    
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo05{ top: 600px; left: 10px; background-size: cover; height: 134px; width: 176px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo05 span{ width: 135px; height: 92px; margin: 20px 0 0 19px;}

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo06{ top: 625px; left: 200px; background-size: cover; height: 105px; width: 95px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo06 span{ width: 61px; height: 74px; margin: 14px 0 0 15px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo06 span.text{ margin: 0 0 0 -3px; width: 100px; padding-top: 22px; }    
    
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo07{ top: 770px; left: 120px; background-size: cover; height: 127px; width: 173px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo07 span{ width: 132px; height: 90px; margin: 17px 0 0 20px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo07 span.text{ padding-top: 6px;} 

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo08{ top: 935px; left: 60px; background-size: cover; height: 122px; width: 138px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo08 span{ width: 99px; height: 83px; margin: 18px 0 0 17px;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo08 span.text{ width: 150px; margin-left: -10px; padding-top: 6px;} 

.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo05 span.btn{ width: 27px; height: 26px; position: absolute; top: 36%; left: 36%; transform: translate(-50%, -50%); display: block;}
.detailContents#gallery .contentsInner .detailBlock .photoArea p.photo07 span.btn{ width: 27px; height: 26px; position: absolute; top: 36%; left: 36%; transform: translate(-50%, -50%); display: block;}

.remodal .modalWrap .frame{ width: 100%; height: auto; padding: 16% 0 0; margin: 0 auto; background: url(/wnb/sipsmith/img/bg_modalframe_01_sp.png) no-repeat center 0; background-size: 100px auto;}
.remodal .modalWrap .frameInner p{ padding: 0; margin: 20px 0 0; font-size: 0.85em; line-height: 1.5; padding-bottom: 20px;}
.remodal .modalWrap .frameInner p.img{ width: 100%; height: auto; margin: 0 auto 10px; position: static; transform: none;}
.remodal .modalWrap .frameInner p.img img{ width: 65%; height: auto; margin: 0 auto; display: block;}    
.remodal .modalWrap .frameInner{ background: none;}
.remodal .modalWrap .frameBottom{ background: none; padding-bottom: 0;}

    
.remodal .modalWrap .frameInner p.photo05{ padding-bottom: 20px;}
.remodal .modalWrap .frameInner p.img.photo05{ bottom: 0;}

.remodal .modalWrap .frameInner p.photo08{ padding-bottom: 20px;}
.remodal .modalWrap .frameInner p.img.photo08{ bottom: 0;}
    
}


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


/*cocktails*/
.detailContents#cocktails{ background: url(/wnb/sipsmith/img/bg_map01.png) no-repeat 0 0;background-size: cover;}	
.detailContents#cocktails h2{color: #000;}
.detailContents#cocktails .contentsInner{}

/*-------------------------*/
.detailContents#cocktails .contentsInner .detailBlock .slide{ width: 1164px;}
.detailContents#cocktails .contentsInner .detailBlock dl{ width: 1164px; background: #fff; margin: 60px 0 0; position: relative;}
.detailContents#cocktails .contentsInner .detailBlock dl dt{ width: 50%; display: inline-block;}
.detailContents#cocktails .contentsInner .detailBlock dl dt img{ width: 100%; height: auto;}
.detailContents#cocktails .contentsInner .detailBlock dl dd{ width: calc(50% - 30px); display: inline-block; margin: 20px 0 0 20px; vertical-align: top; position: relative;}
.detailContents#cocktails .contentsInner .detailBlock dl dd h3{ text-align: left; line-height: 1.25; font-size: 3.6em; letter-spacing: 2px;}
#suntory_contents .detailContents#cocktails .contentsInner .detailBlock dl dd p{ margin: 0; text-align: left;}
.detailContents#cocktails .contentsInner .detailBlock dl dd h4{ font-size: 1.9em; margin-top: 40px; padding-bottom: 15px; display: inline-block; background: url(/wnb/sipsmith/img/img_cocktailsborder_01_pc.png) no-repeat center bottom; font-family: "Ryumin Regular KL", serif;}
#suntory_contents .detailContents#cocktails .contentsInner .detailBlock dl dd p.title{ font-size: 1.6em; line-height: 1; font-weight: bold; font-family: "Ryumin Regular KL", serif;}
#suntory_contents .detailContents#cocktails .contentsInner .detailBlock dl dd p.img{ position: absolute; top: 0; right: 5%; width: 50%; max-width: 200px;}
#suntory_contents .detailContents#cocktails .contentsInner .detailBlock dl dd p.img img{width: 100%; height: auto; display: inline-block;}
.detailContents#cocktails .contentsInner .detailBlock dl dd ul li{ font-size: 1.8em; font-family: "Ryumin Regular KL", serif; line-height: 1.5; padding-right: 10px; font-weight: bold;}
.detailContents#cocktails .contentsInner .detailBlock dl dd ol li{ font-size: 1.8em; font-family: "Ryumin Regular KL", serif; line-height: 1.5; list-style-type: decimal; margin-left: 1em; padding: 0 10px 0 5px; font-weight: bold;}

@media screen and (max-width: 960px){
.detailContents#cocktails .contentsInner .detailBlock .slide{ width: 100%;}
}

@media screen and (max-width: 767px){
#suntory_contents .detailContents#cocktails .detailBlock{ padding: 0 5% 15px;}
    
.detailContents#cocktails .contentsInner .detailBlock .slide{ width: 100%;}
.detailContents#cocktails .contentsInner .detailBlock dl{ margin: 10px 0 0; padding-bottom: 30px;}
.detailContents#cocktails .contentsInner .detailBlock dl dt{ width: 100%; display: block;}
.detailContents#cocktails .contentsInner .detailBlock dl dt img{ width: 100%; height: auto;}
.detailContents#cocktails .contentsInner .detailBlock dl dd{ width: 100%; display: block; margin: 5px 0 0 15px;}
.detailContents#cocktails .contentsInner .detailBlock dl dd h3{ font-size: 2.7em;}
.detailContents#cocktails .contentsInner .detailBlock dl dd h4{ font-size: 1.4em; margin-top: 20px; padding-bottom: 15px; display: inline-block;}
#suntory_contents .detailContents#cocktails .contentsInner .detailBlock dl dd p.title{ font-size: 1.3em; margin-bottom: 0;}
.detailContents#cocktails .contentsInner .detailBlock dl dd ul li{ font-size: 1.4em; padding-right: 25px;}
.detailContents#cocktails .contentsInner .detailBlock dl dd ol li{ font-size: 1.4em; margin: 0 2em 0 1em; padding-left: 5px;}
    
#suntory_contents .detailContents#cocktails .contentsInner .detailBlock dl dd p.img{ position: static; width: 100%; max-width: none; margin: 3% 0;}
#suntory_contents .detailContents#cocktails .contentsInner .detailBlock dl dd p.img img{width: 45%; height: auto;}

}

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

/*story*/
.detailContents#story{}	
.detailContents#story .contentsInner{color: #fff;}
.detailContents#story .detailBlock{ margin: 0 auto;}

/*-------------------------*/
.detailContents#story .contentsInner p.lead{ font-size: 3em; text-decoration: underline; margin: 20px 0 50px; line-height: 1.5; font-family: "Ryumin Regular KL", serif;}
.detailContents#story .contentsInner p.img{ width: 40%; display: inline-block; max-width: 440px; margin: 5px 0 0 0;}
.detailContents#story .contentsInner p.img img{ width: 100%; height: auto;}
.detailContents#story .contentsInner p.text{ width: 55%; display: inline-block; text-align: left; vertical-align: top; margin: 0 0 0 30px ; font-size: 1.8em; line-height: 1.9; font-family: "Ryumin Regular KL", serif;}


@media screen and (max-width: 767px){

#suntory_contents .detailContents#story .detailBlock{ padding: 0 5% 30px;}
    
.detailContents#story .contentsInner p.lead{ font-size: 1.6em; margin: 0; text-align: center;}
.detailContents#story .contentsInner p.img{ width: 100%; display: block; margin-top: 30px;}
.detailContents#story .contentsInner p.text{ width: 100%; display: block; margin: 10px auto 0; font-size: 1.4em;}
    
}

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

/*craft*/
.detailContents#craft{ background: url(/wnb/sipsmith/img/bg_map01.png) no-repeat 0 0; background-size: cover;}	
.detailContents#craft h2{color: #000;}
.detailContents#craft .detailBlock{ margin: 0 auto;}

.detailContents#craft .contentsInner p.lead{ font-size: 3em; text-decoration: underline; margin: 20px 0 50px; line-height: 1.5; font-family: "Ryumin Regular KL", serif;}
.detailContents#craft .contentsInner p.img{ width: 45%; display: inline-block; float: right; max-width: 440px; margin: 5px 0 50px;}
.detailContents#craft .contentsInner p.img img{ width: 100%; height: auto;}
.detailContents#craft .contentsInner p.text{ width: 49%; display: inline-block; text-align: left; vertical-align: top; float: right; margin: 0 35px 70px 0; font-size: 1.8em; line-height: 1.9; font-family: "Ryumin Regular KL", serif;}


@media screen and (max-width: 767px){

#suntory_contents .detailContents#craft .detailBlock{ padding: 0 5% 30px;}
    
.detailContents#craft .contentsInner p.lead{ font-size: 1.6em; margin: 0; text-align: center;}
.detailContents#craft .contentsInner p.img{ width: 100%; display: block; margin: 30px 0 10px;}
.detailContents#craft .contentsInner p.text{ width: 100%; display: block; margin: 0 auto 30px; font-size: 1.4em;}
    
}

/*lineup*/
.detailContents#lineup{}	
.detailContents#lineup .contentsInner{color: #fff;}	

/*-------------------------*/
.detailContents#lineup .contentsInner .detailBlock{ width: 880px; display: table; margin: 0 auto; position: relative; padding-bottom: 110px;}
.detailContents#lineup .contentsInner .detailBlock div.left,
.detailContents#lineup .contentsInner .detailBlock div.right{ width: 375px; display: inline-table; margin: 0px 10px 0 50px;}
.detailContents#lineup .contentsInner .detailBlock div.right{ margin: 0;}
.detailContents#lineup .contentsInner .detailBlock div p.img{ width: 156px; margin: 0 auto;}
.detailContents#lineup .contentsInner .detailBlock div p.img img{ width: 100%; height: auto;}
.detailContents#lineup .contentsInner .detailBlock div.right img{ margin-left: 0;}

.detailContents#lineup .contentsInner .detailBlock div.titleBox{ width: 100%; display: block; margin: 0;}
.detailContents#lineup .contentsInner .detailBlock div.notesBox{ width: 100%; height: 410px; display: block; margin: 0 0 20px 0;}

.detailContents#lineup .contentsInner .detailBlock div p{ margin: 0 20px; line-height: 1.5; text-align: left; vertical-align: top;}
.detailContents#lineup .contentsInner .detailBlock div h3{ font-size: 3.8em; margin: -10% 0 0 0; text-align: center; letter-spacing: 2px;}
.detailContents#lineup .contentsInner .detailBlock div h4{ font-size: 2em; font-family: "Ryumin Regular KL", serif; text-align: left; margin-bottom: 10px;}

.detailContents#lineup .contentsInner .detailBlock div.notesBox dl dt{ width: 68px; height: 83px; display: inline-block; margin-bottom: 10px;}
.detailContents#lineup .contentsInner .detailBlock div.notesBox dl dd{ display: inline-block; width: calc(100% - 90px); vertical-align: top; margin: 10px 0 0 10px; font-size: 1.4em; }
.detailContents#lineup .contentsInner .detailBlock div.right div.notesBox dl dt img{ margin-left: 0;}

.detailContents#lineup .contentsInner .detailBlock ul{ margin: 15px 0 30px;}
.detailContents#lineup .contentsInner .detailBlock .right ul{  margin: 15px 0 30px 65px;}
.detailContents#lineup .contentsInner .detailBlock ul li{ font-size: 1.8em; font-family: "Ryumin Regular KL", serif; line-height: 2;}

.detailContents#lineup .contentsInner .detailBlock p.awardTtl{ text-align: center; margin: 85px 0 10px; font-size: 1.25rem; font-weight: normal;}
.detailContents#lineup .contentsInner .detailBlock div.titleBox dl{ display: block;}
.detailContents#lineup .contentsInner .detailBlock div.titleBox dl dt{ width: 77px; height: 77px; display: inline-block; margin-bottom: 10px; margin-left: 10px; vertical-align: middle;}
.detailContents#lineup .contentsInner .detailBlock div.titleBox dl dt.h70Img{ height: 70px;}
.detailContents#lineup .contentsInner .detailBlock div.titleBox dl dd{ display: inline-block; width: calc(100% - 105px); vertical-align: middle; margin: 0 0 10px 10px; font-size: 1.6em;}

.detailContents#lineup .contentsInner .detailBlock div #div-gpt-ad-1469518796001-0-4,
.detailContents#lineup .contentsInner .detailBlock div #div-gpt-ad-1469518796001-0-5{ margin: 0 auto; width: 257px;}
.detailContents#lineup .contentsInner .detailBlock div #div-gpt-ad-1469518796001-0-9,
.detailContents#lineup .contentsInner .detailBlock div #div-gpt-ad-1469518796001-0-10{ display: none;}


@media screen and (max-width: 767px){

.detailContents#lineup .contentsInner .detailBlock{ width: 100%; padding: 0;}
.detailContents#lineup .contentsInner .detailBlock div.left,
.detailContents#lineup .contentsInner .detailBlock div.right{ width: 90%; display: block; margin: 0 auto 30px;}
.detailContents#lineup .contentsInner .detailBlock div.titleBox{ height: auto; margin: 0 0 20px 0;}
.detailContents#lineup .contentsInner .detailBlock div.notesBox{ height: auto;}
.detailContents#lineup .contentsInner .detailBlock div p.img{ width: 30%;}
.detailContents#lineup .contentsInner .detailBlock div img{ width: 90%; height: auto; margin: 0 auto;}
.detailContents#lineup .contentsInner .detailBlock div.right{ margin: 0 auto 30px;}
.detailContents#lineup .contentsInner .detailBlock div.right img{ margin: 0 auto;}

.detailContents#lineup .contentsInner .detailBlock div p{ margin: 0;}
.detailContents#lineup .contentsInner .detailBlock div h3{ font-size: 2em; margin: -10% 0 0 0; padding-bottom: 0; letter-spacing: 2px;}
.detailContents#lineup .contentsInner .detailBlock div.notesBox dl dd{ font-size: 1.2em;}

.detailContents#lineup .contentsInner .detailBlock ul{ margin: 0 0 5px;}
.detailContents#lineup .contentsInner .detailBlock ul li{ font-size: 1.4em; text-align: center;}

.detailContents#lineup .contentsInner .detailBlock p.awardTtl{ margin: 6px 0 5px; font-size: 1rem;}
.detailContents#lineup .contentsInner .detailBlock div.titleBox dl{ position: inherit; width: 90%; margin: 0 auto; max-width: 215px;}
.detailContents#lineup .contentsInner .detailBlock div.titleBox dl dt{ width: 37px; height: 37px; vertical-align: middle; margin-bottom: 6px;}
.detailContents#lineup .contentsInner .detailBlock div.titleBox dl dt.h70Img{ height: 35px;}
.detailContents#lineup .contentsInner .detailBlock div.titleBox dl dd{ width: calc(100% - 52px); font-size: 1.2em; vertical-align: middle; margin: 0 0 10px 0;}

.detailContents#lineup .contentsInner .detailBlock div #div-gpt-ad-1469518796001-0-4,
.detailContents#lineup .contentsInner .detailBlock div #div-gpt-ad-1469518796001-0-5{ display: none;}

.detailContents#lineup .contentsInner .detailBlock div #div-gpt-ad-1469518796001-0-9,
.detailContents#lineup .contentsInner .detailBlock div #div-gpt-ad-1469518796001-0-10{ display: block; padding: 10px 0 0; margin: 0 auto; width: 237px;}    

.detailContents#lineup .contentsInner .detailBlock .right ul{ margin: 0 0 5px;}
}
/*-------------------------*/


/*mainvisual*/
.mainContentsarea#top .contentsInner{ background: url(/wnb/sipsmith/img/bg_mainvisual_01_pc.png) no-repeat 0 0; background-size: 100% auto; width: 100%; height: auto;}
.mainContentsarea#top .mainvisual img{ width: 100%; height: auto;}

@media screen and (max-width: 767px){
.mainContentsarea#top .contentsInner{ background: url(/wnb/sipsmith/img/bg_mainvisual_01_sp.png) no-repeat 0 0; background-size: cover; width: 100%; height: auto;}
.mainContentsarea#top .mainvisual img{ width: 100%; height: auto;}
    
}


/*181127 rewrite*/
@media screen and (max-width: 767px){
#suntory_contents .detailContents .contentsInner.more{ padding: 0; }
}


/*-----------------------------------------------------------------modal*/

.modalWrap{width: 935px; height: 670px; padding: 70px 0 0; position: relative;text-align: left; overflow: hidden; overflow-y: auto;}
.modalWrap dl{width: 780px;margin: 0 auto;}
.modalWrap dl dt iframe{ display:block;}
.modalWrap dl dt img{width: 100%; height: auto; display: none;}
.modalWrap dl dt.movieNone img{ display: block;}
.modalWrap dl dd.text{font-size: 1em; margin: 0 0 85px 0; width: 100%;}

.modalWrap .modalBtn{ text-align: center; display: table; margin: 60px auto;}

.modalWrap h3{ font-size: 2.37rem; text-align: center; font-family: Arial, Helvetica, Verdana, sans-serif;}
.modalWrap .modalDlBtn{ width: 780px; margin: 30px auto 0}
.modalWrap .modalDlBtn li{ width: 370px; height: 115px; display: inline-block; margin-right: 35px; margin-bottom: 30px; box-sizing: border-box;}
.modalWrap .modalDlBtn li:nth-child(even){ margin-right: 0;}

/*----ie8---*/
.modalWrap .modalDlBtn li:first-child + * ,
.modalWrap .modalDlBtn li:first-child + * + * + * ,
.modalWrap .modalDlBtn li:first-child + * + * + * + * + * ,
.modalWrap .modalDlBtn li:first-child + * + * + * + * + * + * + * { margin-right: 0;}
/*----ie8---*/

.modalWrap .modalDlBtn li a{ width: 100%; height: 115px; border-radius: 5px; color: #fff; font-size: 1.3rem; line-height: 1.2; text-decoration: none; background: #0071a9; text-align: center; display: block; position: relative;}
.modalWrap .modalDlBtn li a span{ width: 290px; display:block; position: absolute; top: 50%; transform: translateY(-50%); padding: 0 40px; font-family: Arial, Helvetica, Verdana, sans-serif;}

.modalWrap .closeBtn{position: absolute; top: 10px; right: 20px; cursor: pointer;}

.remodal.movie{ background: none;}
.remodal.movie .modalWrap{width: 780px; height: 440px; padding: 70px 0 0; position: relative;text-align: left; overflow: hidden; margin: 0 auto;}

.remodal.movie .remodal-close{ right: 0; top: 0; background: url(../img/btn_modal_close_w.png) no-repeat 0 0 !important;}

.remodal.yt { width:700px; height:394px; background:none;}
.remodal.yt .inner{ position: relative; width: 700px; padding: 57px 0 0;}
.remodal.yt button{ background:url(../../img/btn_close.png) no-repeat !important; top:0; right:0; width:47px; height:46px;}

@media screen and (max-width: 767px){
.modalWrap{width: auto; height: 100%; max-height: 80vh; padding:25px 15px 0; position: relative; box-sizing: border-box;}
.modalWrap dl{width: 100%;margin: 0 auto;word-break:break-all;}
.modalWrap dl dt{position: relative; width: 100%; padding-top: 56.25%;}
.modalWrap dl dt.movieNone{position: relative; width: 100%; padding-top: 0;}
.modalWrap dl dt iframe{position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}
.modalWrap dl dt img{width: 100%; height: auto; display:none; }
.modalWrap dl dd.text{font-size: 1.4em;}

.modalWrap p.ttl{ width: 100%; margin: 0 auto 10px; font-size: 2rem;}
.modalWrap dl dd.text{font-size: 0.6em;}
.modalWrap .modalBtn{ margin: 30px auto;}
.modalWrap .modalBtn img{ width: 50%;}

.modalWrap h3{ font-size: 1.4rem;}
.modalWrap .modalDlBtn{ width: 100%; margin: 15px 0;}
.modalWrap .modalDlBtn li{ width: 240px; height: 60px; margin: 15px auto; display: block;}
.modalWrap .modalDlBtn li:nth-child(even){ margin: 15px auto;}
.modalWrap .modalDlBtn li a{ width: 100%; height: 60px; font-size: 1.0rem;}
.modalWrap .modalDlBtn li a span{ width: 160px; display:block; position: absolute; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0 40px;}

.modalWrap .closeBtn{position: absolute; top: 10px; right: 10px;}
.remodal-wrapper { padding: 0;}

.remodal.movie .modalWrap{ width: calc(100% - 20px); height: auto; position: relative; text-align: left; overflow: inherit; margin: 0 auto; padding: 0;} 
.remodal.movie .modalWrap iframe{position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

.remodal.movie .remodal-close{ right: 0; top: 0; background: url(../img/btn_modal_close_w.png) no-repeat 0 0 !important; background-size: 22px auto !important; width: 22px; height: 22px;}

.remodal.movie{ width:100%; height:auto;  background: none;}
.remodal.movie .inner {position: relative; width: 100%; padding: 56.25% 0 0;}
.remodal.movie .inner iframe{position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; padding-top: 28px;}

.remodal-close{ width: 30px; height: 30px; background-size: 30px auto !important;}    
    
}

#suntory_contents .pageTopWrap{ position: relative; width: 100%; z-index: 10; top: 70px;}
#suntory_contents .pageTopWrap .pageTop{ position: absolute; right: 20px; opacity: 0; z-index: 1;}
#suntory_contents .pageTopWrap .pageTop.fixed{ position: fixed; transition: opacity 0.4s ease; bottom: 20px;}
#suntory_contents .pageTopWrap .pageTop.show{ opacity: 1; z-index: 10; bottom: 80px;}
#suntory_contents .pageTopWrap .pageTop.show.fixed{ opacity: 1; z-index: 10; bottom: 20px;}
#suntory_contents .pageTopWrap .pageTop a:hover{opacity: 0.8;}
#suntory_contents .pageTopWrap .pageTop img{width: 111px; height: auto;}
#suntory_contents .pageTop a:hover{ cursor: pointer; opacity: 0.7;}

@media screen and (max-width: 767px){
#suntory_contents .pageTopWrap .pageTop{ overflow: hidden; right: 10px;}
#suntory_contents .pageTopWrap .pageTop img{width: 55px; height: auto;}

.mb30Sp{ margin-bottom: 30px !important;}	
	
}