@charset "UTF-8";

/*----------------------
 mainVisual
----------------------*/
#mainVisual .content {
	background-color: transparent;
	padding: 0;
}
#mainVisual .bg {
	height: 0;
	background-image: url(/whisky/makersmark/img/howto/bg_main_sp.jpg);
	padding: calc(543 / 750 * 100%) 0 0 0;
}
#mainVisual .titleImage img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 1%;
	width: calc(214 / 768 * 100%);
	margin: auto;
}
#mainVisual .phrase img {
	position: absolute;
	top: 47px;
	left: 15.5%;
	width: calc(435 / 768 * 100%);
	margin: auto;
}
@media screen and (min-width:769px) {
	#mainVisual .content {
	}
	#mainVisual .bg {
		height: 65vh;
		background-image: url(/whisky/makersmark/img/howto/bg_main@2x.jpg);
		padding: 0;
	}
	#mainVisual .titleImage img {
		bottom: 165px;
		width: calc(214 / 1600 * 100%);
		max-width: 214px;
	}
	#mainVisual .phrase img {
		width: calc(435 / 1600 * 100%);
		max-width: 435px;
	}
}

/*----------------------
 blackboard
----------------------*/
#blackboard {
	color: #ffffff;
	background-color: #0f0f0f;
	background-image: url(/whisky/makersmark/img/howto/bg_blackboard@2x.jpg);
	background-position: center top;
	background-repeat: repeat;
	background-size: 100vw auto;
}

/*----------------------
 introduction
----------------------*/
#introduction .content {
	background-color: transparent;
	padding: 0;
}
#introduction .content:before {
	content: none;
}
#introduction .textWrap {
	background-color: transparent;
	margin: 0 auto 50px auto;
}
#introduction .movieWrap {
	width: 92%;
	margin: auto;
	text-align: center;
}
#introduction .movie {
	position: relative;
	text-align: center;
	padding: calc(393 / 700 * 100%) 0 0 0;
	border: solid 2px #b60107;
}
#introduction .movie iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
#introduction .movieWrap .phrase {
	font-size: 18px;
	margin: 0 0 40px 0;
	padding: 24px 0 0 0;
}
@media screen and (min-width:769px) {
	#introduction .content {
		padding: 0 0 105px 0;
	}
	#introduction .textWrap {
		position: relative;
		top: -165px;
		min-height: 165px;
		margin: 0 auto;
		padding: 60px 95px 0 110px;
	}
	#introduction .textWrap:before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 165px;
		background-image: url(/whisky/makersmark/img/howto/bg_blackboard@2x.jpg);
		background-position: center 90px;
		background-repeat: repeat;
		background-size: 100vw auto;
	}
	#introduction .textWrap>* {
		position: relative;
	}
	#introduction .movieWrap {
		width: 780px;
		margin: -10vh auto 0 auto;
	}
}

/*----------------------
 product01
----------------------*/
#product01 .content {
	position: relative;
	z-index: 1;
}
#product01 .bgParts .item11 {
	bottom: -60px;
	right: calc(-90 / 828 * 100%);
	width: calc(278 / 828 * 100%);
	background-image: url(/whisky/makersmark/img/howto/parts_11@2x.png);
	background-position: left bottom;
	padding: calc(213 / 828 * 100%) 0 0 0;
}
#product01 .bgParts .item12 {
	display: none;
}
#product01 .bgParts .item13 {
	display: none;
}
#product01 .textWrap .text {
	margin: 0 0 30px 0;
}
#product01 .textWrap .name {
	position: relative;
	line-height: 41px;
}
#product01 .textWrap .name:after {
	content: "";
	position: absolute;
	top: 0;
	right: -30%;
	width: 20%;
	max-width: 200px;
	background-image: url(/whisky/makersmark/img/howto/parts_08@2x.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: contain;
	padding: calc(214 / 215 * 20%) 0 0 0;
}
#product01 .slideArea {
	color: #0f0f0f;
}
#product01 .slideType02 .list {
	width: 400%;
}
#product01 .slideType02 .item {
	flex-basis: calc(100% / 4);
}
@media screen and (min-width:769px) {
	#product01 .content {
		padding: 0 0 75px 0;
	}
	#product01 .textWrap .name:after {
		top: -134px;
		right: -31%;
		width: 50%;
		max-width: 215px;
		padding: 50% 0 0 0;
	}
	#product01 .textWrap {
		margin: 36px 0 0 0;
		padding: 0 100px 0 48px;
	}
	#product01 .textWrap .title {
		font-size: 40px;
		line-height: 41px;
	}
	#product01 .textWrap .text {
		margin: 0 0 100px 0;
	}
}
@media screen and (min-width: 1008px) {
	#product01 .bgParts .item11 {
		bottom: 20px;
		left: calc(35 / 653 * 100%);
		right: auto;
		width: calc(358 / 653 * 100%);
		background-image: url(/whisky/makersmark/img/howto/parts_11@2x.png);
		background-position: left bottom;
		padding: calc(274 / 653 * 100%) 0 0 0;
	}
	#product01 .bgParts .item12 {
		display: block;
		top: 0;
		left: calc(23 / 653 * 100% + 48px);
		width: calc(518 / 653 * 100%);
		background-image: url(/whisky/makersmark/img/howto/parts_12@2x.png);
		background-position: left bottom;
		padding: calc(234 / 653 * 100%) 0 0 0;
	}
	#product01 .bgParts .item13 {
		display: block;
		top: 0;
		right: calc(-200 / 653 * 100%);
		width: calc(263 / 653 * 100%);
		background-image: url(/whisky/makersmark/img/howto/parts_13@2x.png);
		background-position: center bottom;
		padding: calc(221 / 653 * 100%) 0 0 0;
	}
}

/*----------------------
 squeezedWrap
----------------------*/
#squeezedWrap .content {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	color: #0f0f0f;
	background-color: #fbe1ad;
	padding: 48px 0;
}
#squeezedWrap .content:before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	right: 0;
	height: 5px;
	background-image: url(/whisky/makersmark/img/common/bg_wave_01.png);
	background-position: center center;
	background-repeat: repeat-x;
	background-size: auto 5px;
}
#squeezedWrap .bgParts {
	display: none;
}
#squeezedWrap .bgParts .item01 {
	top: 519px;
	left: -2px;
	width: 20%;
	background-image: url(/whisky/makersmark/img/howto/parts_09@2x.png);
	background-position: left bottom;
	padding: calc(300 / 315 * 20%) 0 0 0;
}
#squeezedWrap .bgParts .item02 {
	bottom: 135px;
	right: -10px;
	width: 20%;
	background-image: url(/whisky/makersmark/img/howto/parts_10@2x.png);
	background-position: left bottom;
	padding: calc(344 / 197 * 20%) 0 0 0;
	transition: bottom 1s;
}
#squeezedWrap .contentInner {
	width: auto;
	padding: 0 24px;
}
@media screen and (min-width:769px) {
	#squeezedWrap .content {
		padding: 62px 0 25px 0;
	}
	#squeezedWrap .bgParts .item01 {
		width: calc(300 / 1600 * 100%);
		padding: calc(315 / 1600 * 100%) 0 0 0;
	}
	#squeezedWrap .bgParts .item02 {
		width: calc(197 / 1600 * 100%);
		padding: calc(344 / 1600 * 100%) 0 0 0;
	}
}
@media screen and (min-width:1100px) {
	#squeezedWrap .bgParts {
		display: block;
	}
}

/*----------------------
 squeezed
----------------------*/
#squeezed {
	max-width: 990px;
	text-align: center;
	margin: auto;
	padding: 0 0 30px 0;
}
#squeezed .title {
	margin: 0 0 40px 0;
}
#squeezed .box {
}
#squeezed .textWrap {
	text-align: left;
}
#squeezed .textWrap dt {
	font-size: 22px;
	margin: 0 0 17px 0;
}
#squeezed .textWrap dt .sub {
	display: block;
	font-size: 20px;
	margin: 10px 0 15px 0;
}
#squeezed .textWrap dd {
	font-size: 15px;
	line-height: 26px;
	margin: 0 0 44px 0;
}
#squeezed .image {
	max-width: 385px;
	margin: 0 auto 30px auto;
}
#squeezed .note {
	font-size: 11px;
	line-height: 16px;
	text-align: left;
}
@media screen and (min-width:769px) {
	#squeezed {
		padding: 0 0 52px 0;
	}
	#squeezed .title {
		margin: 0 0 47px 0;
	}
	#squeezed .box {
		display: flex;
	}
	#squeezed .textWrap {
		flex-basis: calc(605 / 990 * 100%);
		padding: 41px 90px 0 40px;
		box-sizing: border-box;
	}
	#squeezed .image {
		flex-basis: calc(385 / 990 * 100%);
		margin: 0;
	}
	#squeezed .note {
		padding: 0 0 0 40px;
	}
}

/*----------------------
 variation
----------------------*/
#variation {
	max-width: 990px;
	text-align: center;
	margin: auto;
	padding: 30px 0 0 0;
	border-top: 2px solid #776855;
}
#variation .title {
	text-align: center;
	margin: 0 0 40px 0;
}
#variation .imageWrap {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	max-width: 670px;
	margin: 0 auto 0 auto;
}
#variation .bottle {
	flex-basis: 33%;
}
#variation .bottle .image {
	width: 75%;
	max-width: 132px;
	margin: 0 auto 9px auto;
}
#variation .bottle:nth-child(2).animate.animeType01 {
	transition-delay: 0.3s;
}
#variation .bottle:nth-child(2).animate.animeType01 .lazyloaded {
	transition-delay: 0.3s;
}
#variation .bottle:nth-child(3).animate.animeType01 {
	transition-delay: 0.6s;
}
#variation .bottle:nth-child(3).animate.animeType01 .lazyloaded {
	transition-delay: 0.6s;
}
#variation .bottle p {
	min-height: 36px;
	font-size: 12px;
	line-height: 18px;
}
#variation .text {
	font-size: 15px;
	line-height: 26px;
	text-align: left;
}
@media screen and (min-width:769px) {
	#variation {
		padding: 50px 0 20px 0;
	}
	#variation .title {
		margin: 0 0 30px 0;
	}
	#variation .bottle {
	}
	#variation .bottle p {
		font-size: 14px;
		line-height: 18px;
	}
	#variation .text {
		padding: 0 80px 0 90px;
	}
}

/*----------------------
 bottomNav
----------------------*/
#bottomNav {
}
#bottomNav .content {
	position: relative;
}
/*
#bottomNav .content:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	height: 5px;
	background-image: url(/whisky/makersmark/img/common/bg_wave_02.png);
	background-position: center center;
	background-repeat: repeat-x;
	background-size: auto 5px;
}
*/

#bottomNav .navItem .bg {
	background-image: url(/whisky/makersmark/img/howto/bg_bottomNav_01@2x.jpg);
}

/*----------------------
openwax
----------------------*/

#openwaxWrap .content {
	position: relative;
	height: 190px;
	background: #AF272F url(../img/howto/bg_open_wax.gif)  center top repeat-x;
	text-align: center;
}
#openwaxWrap .content .logo {
	width: 52%;
	margin: 0 auto;
	padding: 20px 0;
}
#openwaxWrap .content .bottle {
	position: absolute;
	left: 50%;
	bottom: 0;	
	margin-left: -54%;
	width: 50%;
}
#openwaxWrap .content a {
	display: block;
	font-size: 13px;
	padding-top: 6%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#openwaxWrap .content a span {
	font-size: 20px;
	display: block;
	line-height: 2;
	padding-top: 16%;
	font-weight: bold;
}

#openwaxWrap .content .btn {
    content: "";
    position: absolute;
	top: 62%;
    right: 5%;
    width: 10px;
    height: 10px;
    margin: auto;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    transform: rotate(135deg);
}

#openwaxWrap .content:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	height: 5px;
	background-image: url(/whisky/makersmark/img/common/bg_wave_02.png);
	background-position: center center;
	background-repeat: repeat-x;
	background-size: auto 5px;
}
@media screen and (orientation: landscape) {
	#openwaxWrap .content .logo {
	    width: 37%;
	}
	#openwaxWrap .content a span {
	    padding-top: 7%;
	}
	#openwaxWrap .content .bottle {
	    margin-left: -47%;
	    width: 30%;
	}
}
@media screen and (min-width:769px) {
	#openwaxWrap .content {
		height: 300px;
	}
	#openwaxWrap .content .logo {
		width: 230px;
		margin: 0 auto;
		padding: 18px 0;
	}
	#openwaxWrap .content .bottle {
		margin-left: -353px;
	}
	#openwaxWrap .content .bottle {
		margin-left: -421px;
		width: 390px;
	}
	#openwaxWrap .content a {
	    font-size: 16px;
	    padding-top: 74px;
	}
	#openwaxWrap .content a span {
		font-size: 32px;
		line-height: 2;
		padding-top: 60px;
	}
	#openwaxWrap .content .btn {
		top: 58%;
	}
}