@charset "utf-8";
/* PC */
@media screen and (min-width:768px) {
	#suntory_contents {
		color: #291009;
	}
	.contents.remotetour {
		background: url("../img/img22/common/bg01.jpg") repeat top center;
		min-width: 1164px;
	}
	.contentsgroup.group01 {
		position: relative;
	}
	.contentsgroup.group02 .sepalate {
		width: 100%;
		height: 200px;
		position: absolute;
		top: -90px;
		left: 0;
		background: url("../img/img22/common/bgsep.png") no-repeat center bottom;
		min-width: 1164px;
	}
	.contentsgroup.group02 {
		position: relative;
		background: url("../img/img22/common/bg02.jpg") repeat top center;
		min-width: 1164px;
		padding: 240px 0 90px 0;
	}
	.mv {
		height: 660px;
		min-width: 1164px;
		background: url("../img/img22/pc/top/mv_pc.png") no-repeat top center;
		margin: 0 auto 20px auto;
	}
	.mv .headinner {
		width: 1164px;
		margin: 0 auto;
		position: relative;
	}
	.mv .mvtext {
		width: 605px;
		position: absolute;
		top: 138px;
		right: 20px;
	}
	.sectionwrapper {
		width: 1164px;
		margin: 0 auto;
		position: relative;
	}
	.lead {
		margin: 0 0 80px 0;
	}
	.lead .title {
		width: 834px;
		margin: 0 auto 30px auto;
	}
	.lead .leadbody {
		width: 1064px;
		margin: 0 auto;
	}
	.lead .leadpic {
		width: 551px;
		float: left;
	}
	.lead .leadtext {
		width: 460px;
		float: right;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.8;
		padding: 20px 0 0 0;
	}
	.lead .fintext {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 1.8;
		margin: 40px 0 0 0;
	}
	.feature {
		margin: 0 0 50px 0;
		position: relative;
		padding: 0 0 90px 0;
	}
	.feature .title {
		width: 455px;
		margin: 0 auto 30px auto;
	}
	.feature .featurelist {
		width: 960px;
		margin: 0 auto;
	}
	.feature .featurelist li {
		position: relative;
	}
	.feature .featurelist li .text {
		font-size: 16px;
		line-height: 1.5;
	}
	.feature .featurelist li.feature01 {
		height: 235px;
	}
	.feature .featurelist li.feature01 .pic {
		width: 442px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.feature .featurelist li.feature01 .textgroup {
		width: 397px;
		position: absolute;
		top: 25px;
		right: 130px;
	}
	.feature .featurelist li.feature01 .text {
		width: 340px;
		position: absolute;
		top: 76px;
		left: 55px;
	}
	.feature .featurelist li.feature02 {
		height: 215px;
	}
	.feature .featurelist li.feature02 .pic {
		width: 339px;
		position: absolute;
		top: 0;
		left: 90px;
	}
	.feature .featurelist li.feature02 .textgroup {
		width: 400px;
		position: absolute;
		top: 25px;
		right: 90px;
	}
	.feature .featurelist li.feature02 .text {
		width: 340px;
		position: absolute;
		top: 76px;
		left: 65px;
	}
	.feature .featurelist li.feature03 {
		height: 235px;
	}
	.feature .featurelist li.feature03 .pic {
		width: 402px;
		position: absolute;
		top: 0;
		left: 12px;
	}
	.feature .featurelist li.feature03 .textgroup {
		width: 406px;
		position: absolute;
		top: 25px;
		right: 155px;
	}
	.feature .featurelist li.feature03 .text {
		width: 340px;
		position: absolute;
		top: 78px;
		left: 65px;
	}
	.feature .bottompic {
		width: 249px;
		position: absolute;
		bottom: 10px;
		right: 20px;
	}
	.orderdetail {
		margin: 0 0 80px 0;
		position: relative;
	}
	.orderdetail .title {
		width: 455px;
		margin: 0 auto 50px auto;
	}
	.orderdetail .imgpic {
		width: 558px;
		position: absolute;
		top: 80px;
		left: 0;
	}
	.orderdetail .orderdetailbody {
		width: 510px;
		margin: 0 70px 0 584px;
	}
	.orderdetail .detailgroup {
		width: 510px;
		height: 200px;
		padding: 25px;
		position: relative;
	}
	.orderdetail .detailgroup.yamazaki {
		padding: 25px;
	}
	.orderdetail .detailgroup.hakushu {
		padding: 25px 35px;
	}
	.orderdetail .detailgroup.yamazaki .pic {
		width: 273px;
		position: absolute;
		top: -34px;
		left: -30px;
	}
	.orderdetail .detailgroup.hakushu .pic {
		width: 273px;
		position: absolute;
		bottom: -34px;
		right: -30px;
	}
	.orderdetail .detailgroup.yamazaki .detailset {
		width: 225px;
		float: right;
	}
	.orderdetail .detailgroup.hakushu .detailset {
		width: 225px;
		float: left;
	}
	.orderdetail .detailgroup .detailset .name {
		margin: 0 0 15px 0;
	}
	.orderdetail .detailgroup .btn {
		background: #fff;
		transition: 0.3s;
	}
	.orderdetail .detailgroup .btn:hover {
		background: #ffe052;
	}
	.orderdetail .detailgroup.yamazaki {
		background: url("../img/img22/common/yamazaki_detailbg.png") no-repeat center center;
		background-size: contain;
		margin: 0 0 30px 0;
	}
	.orderdetail .detailgroup.hakushu {
		background: url("../img/img22/common/hakushu_detailbg.png") no-repeat center center;
		background-size: contain;
	}
	#tour {
		margin: 0 0 80px 0;
	}
	#tour .tourlabel {
		width: 200px;
		position: absolute;
		top: -240px;
		left: 50%;
		margin: 0 0 0 -100px;
		z-index: 2;
	}
	#tour .title {
		width: 978px;
		margin: 0 auto 30px auto;
	}
	#tour .leadtext {
		text-align: center;
		font-weight: normal;
		font-size: 20px;
		line-height: 1.8;
		margin: 0 0 30px 0;
	}
	#tour .tourgroup {
		width: 1044px;
		margin: 0 auto;
	}
	#tour .tourslide {
		width: 520px;
		float: left;
	}
	.slick-dots {
		bottom: -10%;
	}
	#tour .tourset {
		width: 480px;
		float: right;
	}
	#tour .tourset .tourdetail {
		width: 230px;
		padding: 20px;
		color: #fff;
	}
	#tour .note {
		width: 520px;
		margin: -20px 0 0 70px;
		font-size: 10px;
		line-height: 1.5;
		padding-left: -1em;
		text-indent: -1em;
	}
	#tour .tourset .tourdetail.yamazaki {
		float: left;
		background: rgba(119, 81, 60, 0.8);
	}
	#tour .tourset .tourdetail.hakushu {
		float: right;
		background: rgba(37, 81, 66, 0.8);
	}
	#tour .tourset .tourname {
		margin: -25px -25px 20px 0;
	}
	#tour .tourset .tourtext {
		font-size: 14px;
		line-height: 1.5;
		margin: 0 5px 10px 5px;
	}
	#tour .tourset .btn {
		background: #fff;
		transition: 0.3s;
	}
	#tour .tourset .btn:hover {
		background: #ffe052;
	}
	#tour .tourset .btn.fin {
		background: rgba(184, 184, 184, 0.6);
	}
	#tour .tourset .btn.fin:hover {
		background: rgba(184, 184, 184, 0.6);
	}
	#tour .tourset .btn01 {
		margin: 0 0 10px 0;
	}
	#tour .tourset .btn02 {
		margin: 0 0 10px 0;
	}
	#onlineshop .title {
		width: 978px;
		margin: 0 auto 40px auto;
	}
	#onlineshop .shopbody {
		width: 840px;
		margin: 0 auto;
	}
	#onlineshop .shopbody .leadtext {
		text-align: center;
		font-weight: normal;
		font-size: 20px;
		line-height: 1.8;
		margin: 0 0 40px 0;
	}
	#onlineshop .shopbody .shopbtnset {
		width: 480px;
		margin: 0 auto 80px auto;
	}
	#onlineshop .shopbody .btn {
		width: 230px;
		transition: 0.3s;
	}
	#onlineshop .shopbody .btn01 {
		float: left;
		background: rgba(119, 81, 60, 0.8);
	}
	#onlineshop .shopbody .btn02 {
		float: right;
		background: rgba(37, 81, 66, 0.8);
	}
	#onlineshop .shopbody .btn.fin {
		background: rgba(66, 66, 66, 0.8);
		opacity: 0.4;
	}
	#onlineshop .shopbody .btn:hover {
		background: #ffe052;
	}
	#kentei .title {
		width: 978px;
		margin: 0 auto 40px auto;
	}
	#kentei .kenteibody {
		width: 840px;
		margin: 0 auto;
	}
	#kentei .kenteibody .pic {
		width: 310px;
		float: left;
	}
	#kentei .kenteibody .kenteigroup {
		width: 480px;
		float: right;
	}
	#kentei .kenteibody .leadtext {
		text-align: center;
		font-weight: normal;
		font-size: 20px;
		line-height: 1.8;
		margin: 0 0 30px 0;
	}
	#kentei .kenteibody .btn {
		width: 230px;
		transition: 0.3s;
	}
	#kentei .kenteibody .btn01 {
		float: left;
		background: rgba(119, 81, 60, 0.8);
	}
	#kentei .kenteibody .btn02 {
		float: right;
		background: rgba(37, 81, 66, 0.8);
	}
	#kentei .kenteibody .btn.fin {
		background: rgba(66, 66, 66, 0.8);
		opacity: 0.4;
	}
	#kentei .kenteibody .btn:hover {
		background: #ffe052;
	}
	#kentei .kenteibody .btn.fin:hover {
		background: rgba(66, 66, 66, 0.8);
	}
}
/* SP */
@media screen and (max-width:767px) {
	#suntory_contents {
		color: #291009;
		padding: 0;
	}
	.contents.remotetour {
		background: url("../img/img22/common/bg01.jpg") repeat top center;
		background-size: 200px auto;
		overflow: hidden;
	}
	.contentsgroup.group01 {
		position: relative;
	}
	.contentsgroup.group02 .sepalate {
		width: 100%;
		height: 80px;
		position: absolute;
		top: -50px;
		left: 0;
		background: url("../img/img22/common/bgsep.png") no-repeat center bottom;
		background-size: 600px auto;
	}
	.contentsgroup.group02 {
		position: relative;
		background: url("../img/img22/common/bg02.jpg") repeat top center;
		background-size: 200px auto;
		padding: 25% 0 12% 0;
	}
	.mv {
		padding: 0 0 8% 0;
	}
	.mv .headinner {
		position: relative;
	}
	.mv .mvtext {
		margin: 5% 0 0 0;
	}
	.sectionwrapper {
		position: relative;
	}
	.lead {
		margin: 0 0 10% 0;
	}
	.lead .title {
		margin: 0 0 5% 0;
	}
	.lead .leadbody {}
	.lead .leadpic {
		margin: 0 10% 5% 10%;
	}
	.lead .leadtext {
		font-size: 14px;
		font-weight: bold;
		line-height: 1.8;
		margin: 0 5% 5% 5%;
	}
	.lead .fintext {
		font-size: 14px;
		font-weight: bold;
		line-height: 1.8;
		text-align: center;
		margin: 0 5% 5% 5%;
	}
	.feature {
		margin: 0 0 8% 0;
		position: relative;
	}
	.feature .title {
		margin: 0 0 5% 0;
	}
	.feature .featurelist {
		width: 90%;
		margin: 0 auto;
	}
	.feature .featurelist li {
		position: relative;
	}
	.feature .featurelist li .text {
		font-size: 14px;
		line-height: 1.5;
		width: 82%;
	}
	.feature .featurelist li.feature01 {
		margin: 0 0 5% 0;
	}
	.feature .featurelist li.feature01 .text {
		position: absolute;
		top: 23%;
		left: 12%;
	}
	.feature .featurelist li.feature01 .pic {
		margin: -5% 5% 0 8%;
	}
	.feature .featurelist li.feature02 {
		margin: 0 0 5% 0;
	}
	.feature .featurelist li.feature02 .text {
		position: absolute;
		top: 23%;
		left: 12%;
	}
	.feature .featurelist li.feature02 .pic {
		margin: -5% 9% 0 9%;
	}
	.feature .featurelist li.feature03 .text {
		position: absolute;
		top: 24%;
		left: 12%;
	}
	.feature .featurelist li.feature03 .pic {
		margin: -5% 3% 0 12%;
	}
	.feature .bottompic {
		margin: 8% 18% 0 34%;
	}
	.orderdetail {
		margin: 0 0 50px 0;
		position: relative;
	}
	.orderdetail .title {
		margin: 0 0 5% 0;
	}
	.orderdetail .imgpic {
		width: 100%;
		margin: 0 0 5% 0;
	}
	.orderdetail .orderdetailbody {
		margin: 0 5%;
	}
	.orderdetail .detailgroup {
		position: relative;
	}
	.orderdetail .detailgroup.yamazaki {
		padding: 5%;
	}
	.orderdetail .detailgroup.hakushu {
		padding: 5% 8%;
	}
	.orderdetail .detailgroup.yamazaki .pic {
		width: 52%;
		position: absolute;
		top: -14%;
		left: -4%;
	}
	.orderdetail .detailgroup.hakushu .pic {
		width: 52%;
		position: absolute;
		bottom: -16%;
		right: -4%;
	}
	.orderdetail .detailgroup.yamazaki .detailset {
		width: 49%;
		float: right;
	}
	.orderdetail .detailgroup.hakushu .detailset {
		width: 49%;
		float: left;
	}
	.orderdetail .detailgroup .detailset .name {
		margin: 0 0 7% 0;
	}
	.orderdetail .detailgroup .btn {
		background: #fff;
	}
	.orderdetail .detailgroup.yamazaki {
		background: url("../img/img22/common/yamazaki_detailbg.png") no-repeat center center;
		background-size: contain;
		margin: 0 0 5% 0;
	}
	.orderdetail .detailgroup.hakushu {
		background: url("../img/img22/common/hakushu_detailbg.png") no-repeat center center;
		background-size: contain;
	}
	#tour {
		margin: 0 0 10% 0;
	}
	#tour .tourlabel {
		width: 30%;
		position: absolute;
		top: -8%;
		left: 50%;
		margin: 0 0 0 -15%;
		z-index: 2;
	}
	#tour .title {
		margin: 0 0 5% 0;
	}
	#tour .leadtext {
		text-align: center;
		font-weight: normal;
		font-size: 14px;
		line-height: 1.8;
		margin: 0 5% 8% 5%;
	}
	#tour .tourgroup {
		margin: 0 auto;
	}
	#tour .tourslide {
		margin: 0 -5% 15% -5%;
	}
	.slick-dots {
		bottom: -15%;
	}
	#tour .tourset {
		margin: 0 5%;
	}
	#tour .tourset .tourdetail {
		padding: 5% 8%;
		color: #fff;
	}
	#tour .note {
		margin: 5% 10% 0 10%;
		font-size: 10px;
		line-height: 1.5;
		padding-left: -1em;
		text-indent: -1em;
	}
	#tour .tourset .tourdetail.yamazaki {
		background: rgba(119, 81, 60, 0.8);
		margin: 0 0 8% 0;
	}
	#tour .tourset .tourdetail.hakushu {
		background: rgba(37, 81, 66, 0.8);
	}
	#tour .tourset .tourname {
		margin: -8% -12% 5% 0;
	}
	#tour .tourset .tourtext {
		font-size: 12px;
		line-height: 1.5;
		margin: 0 5% 5% 5%;
	}
	#tour .tourset .btn {
		background: #fff;
		padding: 0 8%;
	}
	#tour .tourset .btn01 {
		margin: 0 0 5% 0;
	}
	#tour .tourset .btn02 {
		margin: 0 0 5% 0;
	}
	#tour .tourset .btn.fin {
		background: rgba(184, 184, 184, 0.6);
	}
	#onlineshop .title {
		margin: 0 0 5% 0;
	}
	#onlineshop .shopbody {
		margin: 0 5% 10% 5%;
	}
	#onlineshop .shopbody .shopbtnset {
		margin: 0 10%;
	}
	#onlineshop .shopbody .leadtext {
		text-align: center;
		font-weight: normal;
		font-size: 14px;
		line-height: 1.8;
		margin: 0 0 8% 0;
	}
	#onlineshop .shopbody .btn {
		width: 100%;
	}
	#onlineshop .shopbody .btn01 {
		background: rgba(119, 81, 60, 0.8);
		margin: 0 0 5% 0;
	}
	#onlineshop .shopbody .btn02 {
		background: rgba(37, 81, 66, 0.8);
	}
	#kentei .title {
		margin: 0 0 5% 0;
	}
	#kentei .kenteibody {
		margin: 0 5%;
	}
	#kentei .kenteibody .pic {
		width: 70%;
		margin: 0 auto 5% auto;
	}
	#kentei .kenteibody .kenteigroup {
		margin: 0 10%;
	}
	#kentei .kenteibody .leadtext {
		text-align: center;
		font-weight: normal;
		font-size: 14px;
		line-height: 1.8;
		margin: 0 0 8% 0;
	}
	#kentei .kenteibody .btn {
		width: 100%;
	}
	#kentei .kenteibody .btn01 {
		background: rgba(119, 81, 60, 0.8);
		margin: 0 0 5% 0;
	}
	#kentei .kenteibody .btn02 {
		background: rgba(37, 81, 66, 0.8);
	}
	#kentei .kenteibody .btn.fin {
		background: rgba(66, 66, 66, 0.8);
		opacity: 0.4;
	}
}