@charset "UTF-8";

/* header ---------------------------------------*/
.kv{position: relative;}
.header-inner{
	width: 100%;
	display: block;
	margin: 0 auto;
	padding: 23px 0 0 0;
	position: absolute;
	top: 0;
	z-index: 999;
}
.header-inner-content{
	display: flex;
	justify-content: space-between;
}
.header-inner-content h1.logo{
	background: url(../img/index/logo.png) no-repeat top left;
	background-size: 100%;
	width: 97px;
	height: 51px;
	text-indent: -999em;
	position: relative;
	top: 16px;
	left: 30px;
}

.header-inner-content .btn-onlineshop{
	width: 318px;
	position: relative;
	right: 20px;
}
.header-inner-content .btn-onlineshop img{
	width: 100%;
}


/* KV ---------------------------------------*/
/*.kv{
	background: url(../img/index/bg_kv.jpg) no-repeat top center;
	background-size: cover;
	position: relative;
	height: 1080px;
}
*/
/*.kv {
	background: url(../img/index/bg_kv.jpg) no-repeat top center;
	background-size: cover;
	position: relative;
}*/

.kv-main{
	/*width: 1366px;*/
	display: block;
	margin: 0 auto;
	position: relative;
}
/*.kv-main h2{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 536px;
	margin: 96px auto 0;
}*/
/*.kv-main h2{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 35vw;
	max-width: 420px;
	min-width: 420px;
	margin: 11.5vh auto 0;
	position: relative;
	left: -20px;
}

.kv-main h2 img{}
.kv-main h3 img{
	position: absolute;
	left: 0;
	top: -85px;
	width: 113px;
}*/

/*.kv-main {
	display: block;
	margin: 0 auto;
	position: relative;
	height: calc(85vh - 74px);
}

.kv-main h2{
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 500px;
	height: 532px;
}*/

.kv-main h2 img{
	width: 100%;
}

/* wrapper ---------------------------------------*/
.wrapper{
	padding: 188px 0 0 0;
}
.wrapper section{}

/* concept ---------------------------------------*/
section.concept{
	margin-bottom: 55px;
}
.concept-content{
	position: relative;
}
.concept-content h3{
	font-weight: 900;
	font-size: 30px;
	letter-spacing: 0.25em;
	line-height: 1.8em;
}
.concept-content h3 span{
	background: url(../img/index/border_span.png) repeat-x bottom 0 left;
	background-size: 100% 6px;
}

.concept-content-box{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-bottom: 100px;
}

.concept-content-box-flex-txt{
	margin-top: 38px;
	width: calc(100% - 350px);
	padding-left: 3px;
}
.concept-content-box p{
	font-size: 18px;
	line-height: 3.3em;
	box-sizing: border-box;
	letter-spacing: 0.1em;
}
.concept-content-box-flex-img{
	width: 350px;
	position: relative;
	top: -15px;
}
.concept-content-box img{
	width: 100%;
}
img.concept-content-box-bottom-txt{
	width: 640px;
	position: absolute;
	bottom: 50px;
	left: 117px;
}


/* features ---------------------------------------*/
.features{
	background: url(../img/index/sec_2_bottom.png) no-repeat bottom center;
	background-size: 1920px;
	padding-bottom: 527px;
	margin-bottom: 0px;
}
.features-content{}
.features-content h3{}
.features-content h3 img{
	width: 332px;
	display: block;
	margin: 0 auto 66px;
}

.features-content-box{
	margin-bottom: 96px;
}
.features-content-box-01{
	position: relative;
	overflow: hidden;
	padding-bottom: 27px;
	width: calc(100% + 40px);
	left: -40px;
	margin-bottom: 103px;
}
.features-content-box-01 p{
	width: 740px;
	height: 500px;
	box-sizing: border-box;
	padding: 100px 270px 50px 96px;
	background: rgb(245 147 130 / 25%);
	font-size: 18px;
	line-height: 2.61111111111em;
	margin-top: 60px;
	letter-spacing: 0.05em;
}
.features-content-box-01 img.main-img{
	position: absolute;
	top: 0;
	right: 0;
	width: 525px;
	height: 500px;
}
.features-content-box-01 .features-content-box-subtitle{
	position: absolute;
	bottom: 0;
	left: 70px;
	margin: auto;
	width: 224px;
}

.features-content-box-02{
	position: relative;
	overflow: hidden;
	padding-bottom: 100px;
	display: flex;
	justify-content: right;
	width: calc(100% + 40px);
}
.features-content-box-02 p{
	width: 740px;
	height: 515px;
	box-sizing: border-box;
	padding: 80px 90px 50px 270px;
	background: rgb(245 147 130 / 25%);
	font-size: 18px;
	line-height: 2.61111111111em;
	margin-top: 60px;
}
.features-content-box-02 img.main-img{
	position: absolute;
	top: 0;
	left: 0;
	width: 540px;
	height: 654px;
}
.features-content-box-02 .features-content-box-subtitle{
	position: absolute;
	bottom: 15px;
	right: -30px;
	margin: auto;
	width: 434px;
}

.features-content-copy{}
.features-content-copy h4{
	line-height: 2em;
	font-size: 30px;
	font-weight: 900;
	text-align: center;
	display: block;
	color: #F59382;
	letter-spacing: 0.22em;
	margin-bottom: 15px;
}
.features-content-copy p{
	text-align: center;
	font-size: 18px;
	line-height: 2.5em;
	letter-spacing: 0.15em;
}


/* howto ---------------------------------------*/
.howto{
	position: relative;
	padding-top: 382px;
	margin-bottom: 120px;
}
.howto img.hand{
	position: absolute;
		left: 0;
		top: 40px;
		width: 35vw;
		max-width: 662px;
}

.howto-bg{
	background: url(../img/index/sec_3_bg_top.png) no-repeat top center;
	background-size: cover;
	padding-top: 160px;
}

.howto-content{
	padding-bottom: 120px;
}
.howto-content h3{}
.howto-content h3 img{
	width: 326px;
	display: block;
	margin: 0 auto 70px;
}
.howto-content-cocktail{}
.howto-content-cocktail-list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.howto-content-cocktail-list-item{
	width: 32%;
	min-height: 513px;
	background: rgb(255 255 255 / 40%);
	border-radius: 185px;
	box-shadow: 2px 2px 9px rgba(0, 0, 0, .16);
	position: relative;
}
.howto-content-cocktail-list-item h5{
	font-size: 25px;
	font-weight: 900;
	text-align: center;
	display: block;
	padding-top: 43px;
	letter-spacing: 0.1em;
	line-height: 1.5em;
	margin-bottom: 8px;
}
.howto-content-cocktail-list-item h5 span{
	background: url(../img/index/border_span.png) repeat-x bottom left;
	background-size: 100% 6px;
}

.howto-content-cocktail-list-item p{
	font-size: 18px;
	text-align: center;
	display: block;
	letter-spacing: 0.07em;
	line-height: 1.3em;
}
.howto-content-cocktail-list-item p span{
	background: url(../img/index/border_span.png) repeat-x bottom left;
	background-size: 100% 6px;
}
.howto-content-cocktail-list-item img{
	position: absolute;
	bottom: 0;
}
.howto-content-cocktail-list-item:nth-child(1) img{
	width: 343px;
	bottom: 2px;
	left: -39px;
	max-width: none;
}
.howto-content-cocktail-list-item:nth-child(2) img{
	width: 275px;
	bottom: 0px;
	left: -10px;
	max-width: none;
}
.howto-content-cocktail-list-item:nth-child(3) img{
	width: 392px;
	bottom: 40px;
	left: -11px;
	max-width: none;
}


/* product ---------------------------------------*/
.product{
	margin-bottom: 76px;
}
.product-bg{
	background: url(../img/index/main_bottom.png) no-repeat bottom center;
	background-size: 100%;
	padding-bottom: 688px;
}

.product-content{
	padding-bottom: 120px;
}
.product-content h3{}
.product-content h3 img{
	width: 202px;
	display: block;
	margin: 0 auto 70px;
}
.product-content-list{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.product-content-list-item{
}
.product-content-list-item.item01{
	width: calc(100% - 500px);
	max-width: 430px;
}
.product-content-list-item.item01 img{}
.product-content-list-item.item02{
	width: 500px;
	letter-spacing: 0.1em;
	font-weight: bold;
	padding-top: 10px;
}
.product-content-list-item.item02 h5{
	font-size: 25px;
	letter-spacing: 0.13em;
	margin-bottom: 18px;
}
.product-content-list-item.item02 h5 span{
	background: url(../img/index/border_span.png) repeat-x bottom left;
	background-size: 100% 6px;
}
.product-content-list-item.item02 strong{
	font-size: 20px;
	letter-spacing: 0.15em;
	display: block;
	margin-bottom: 18px;
}
.product-content-list-item.item02 strong small{
	font-size: 13px;
}
.product-content-list-item.item02 .sub-info{
	margin-bottom: 17px;
}
.product-content-list-item.item02 .sub-info b{
	font-size: 20px;
	color: #F59382;
	display: block;
	line-height: 1.5em;
	padding-left: 4em;
	text-indent: -4em;
	letter-spacing: 0.17em;
}
.product-content-list-item.item02 p{
	font-size: 18px;
	line-height: 2.4em;
	font-weight: normal;
	letter-spacing: 0.12em;
	margin-bottom: 65px;
}
.product-content-list-item.item02 a{
	width: 470px;
	display: block;
}
.product-content-list-item.item02 a img{
	width: 100%;
}


.footer-content{
	width: 1000px;
	display: block;
	margin: 0 auto;
	padding-bottom: 33px;
}
.footer-content-inner{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.footer-content-inner-box{}
.footer-content-inner-box-01{
	width: 390px;
}
.footer-content-inner-box-01 ul{}
.footer-content-inner-box-01 ul li{margin-bottom: 15px;}
.footer-content-inner-box-01 ul li a{}
.footer-content-inner-box-01 ul li a img{
	width: 100%;
}
.footer-content-inner-box-01 ul li.parts-sns{
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	margin-top: 30px;
}
.footer-content-inner-box-01 ul li.parts-sns a{
	width: 40px;
	display: block;
	margin-right: 20px;
}
.footer-content-inner-box-01 ul li.parts-sns img{width: 100%;}


.footer-content-inner-box-02{
	width: 500px;
}
.footer-content-inner-box-02 p.caution{
	font-size: 13px;
	font-weight: normal;
	line-height: 2.2em;
	letter-spacing: 0.07em;
	margin-bottom: 30px;
}
.footer-content-inner-box-02 p.company{}
.footer-content-inner-box-02 p.company strong{
	font-size: 20px;
	letter-spacing: 0.16em;
	margin-bottom: 13px;
	display: block;
}
.footer-content-inner-box-02 .company strong{
	display: block;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 0.2em;
	margin-bottom: 11px;
}
.footer-content-inner-box-02 .company p{
	font-size: 20px;
	font-weight: normal;
	letter-spacing: 0em;
	display: block;
	margin-bottom: 12px;
}
.footer-content-inner-box-02 .company small{font-size: 16px;}


.bottom-fixed{
	position:fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
}
.bottom-fixed a{
	width: 96px;
	height: 96px;
	display: block;
}
.bottom-fixed a img{width: 100%;}

.top-fixed{
	position:fixed;
	top: 20px;
	right: 20px;
	z-index: 999;
}
.top-fixed a{
	display: block;
}
.top-fixed a img{width: 100%;}

.btn-onlineshop{
	width: 321px;
}

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


	/* header ---------------------------------------*/
	.header-inner{
		width: 100%;
		padding: 10px 0 0 0;
	}
	.header-inner-content{}
	.header-inner-content h1.logo{
		width: 65px;
		height: 33px;
		top: 10px;
		left: 20px;
	}

	.btn-onlineshop{
		width: 72px;
		right: 14px;
	}
	.btn-onlineshop img{
		width: 100%;
	}


	/* KV ---------------------------------------*/
	/*.kv{
		background: url(../img/index/bg_kv_sp.jpg) no-repeat top center;
		background-size: cover;
		position: relative;
		height: 94vh;
	}
	.kv-main{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 85vh;
	}
	.kv-main h2 {
		position: absolute;
		display: block;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 88%;
		height: 50vh;
	}*/
	.kv-main h2 img {
		width: 100%;
	}


	/* wrapper ---------------------------------------*/
	.wrapper{
		padding: 122px 0 0 0;
		background: url(../img/index/bg_asa_sp.jpg) no-repeat top center;
		background-size: 100%;
	}
	.wrapper section{}

	/* concept ---------------------------------------*/
	section.concept{}
	.concept-content{
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	.concept-content h3{
		font-size: 23px;
		letter-spacing: 0.2em;
		line-height: 1.95em;
		width: calc(100% - 35px);
		display: block;
		margin: 0 0 0 35px;
	}
	.concept-content h3 span{}

	.concept-content-box{
		width: 100%;
		padding-bottom: 75px;
	}

	.concept-content-box p{
		font-size: 16px;
		letter-spacing: 0.05em;
		line-height: 2.8em;
		width: calc(100% - 70px);
		margin: 36px auto 0;
	}
	.concept-content-box p.indent{
		margin-top: 0;
		padding-top: 16px;
		line-height: 2.0em;
	}
	.concept-content-box p.indent span{
		padding: 0px 0 0 63px;
		display: block;
		background: url(../img/index/bg_p_indent_line.png) no-repeat top 15px left;
		background-size: 53px 1px;
		margin-bottom: 13px;
	}
	.concept-content-box p.indent-next{
		margin-top: 0;
	}
	
	.concept-content-box img{
		width: 100%;
		top: 0;
		margin-top: 40px;
	}
	img.concept-content-box-bottom-txt{
		width: 100%;
		left: 0;
	}


	/* features ---------------------------------------*/
	.features{
		background: url(../img/index/sec_2_bottom_sp.png) no-repeat bottom 3% center,url(../img/index/bg_asa_sp.jpg) no-repeat top center;
		background-size: 100%,100%;
		padding-bottom: 177%;
		margin-bottom: 0;
	}
	.features-content{}
	.features-content h3{}
	.features-content h3 img{
		width: 268px;
		display: block;
		margin: 0 auto 57px;
	}

	.features-content-box{
		margin-bottom: 34px;
	}
	.features-content-box-01{
		width: 100%;
		left: 0;
		padding-bottom: 33px;
		margin-bottom: 47px;
	}
	.features-content-box-01 p{
		width: calc(100% - 25px);
		/*padding: 68px 38px 50px 36px;*/
		padding: 18vw 38px 50px 36px;
		margin-top: 278px;
		font-size: 3.72vw;
		letter-spacing: 0.12em;
		height: auto;
		line-height: 2.86em;
	}
	.features-content-box-01 img.main-img{
		width: 100%;
		height: auto;
	}
	.features-content-box-01 .features-content-box-subtitle{
		bottom: 0;
		left: 35px;
		margin: auto;
		width: 175px;
	}

	.features-content-box-02{
		width: 100%;
		padding-bottom: 83px;
	}
	.features-content-box-02 p{
		width: calc(100% - 20px);
		/*padding: 84px 38px 91px 36px;*/
		padding: 23vw 38px 148px 36px;
		margin-top: 264px;
		font-size: 3.72vw;
		letter-spacing: 0.12em;
		height: auto;
		line-height: 2.86em;
	}
	.features-content-box-02 img.main-img{
		width: 100%;
		height: auto;
	}
	.features-content-box-02 .features-content-box-subtitle{
		width: 308px;
		right: 2px;
		bottom: 18px;
	}

	.features-content-copy{}
	.features-content-copy h4{
		font-size: 19px;
		margin-bottom: 16px;
		line-height: 2.02em;
	}
	.features-content-copy p{font-size: 16px;}


	/* howto ---------------------------------------*/
	.howto{
		padding-top: 43vw;
		padding-bottom: 133px;
		background: url(../img/index/bg_asa_sp.jpg) no-repeat top center;
		background-size: 100%;
		margin-bottom: 0;
	}
	.howto img.hand{
		position: absolute;
		left: 0;
		top: 7px;
		width: 69vw;
		max-width: 662px;
	}
	.howto-bg{
		background: url(../img/index/sec_3_bg_top_sp.png) no-repeat top center;
		background-size: cover;
		padding-top: 164px;
	}

	.howto-content{
		padding-bottom: 100px;
	}
	.howto-content h3{}
	.howto-content h3 img{
		width: 270px;
		margin: 0 auto 63px;
	}
	.howto-content-cocktail{}
	.howto-content-cocktail-list{
		width: calc(100% - 68px);
		display: block;
		margin: 0 auto;
	}
	.howto-content-cocktail-list-item{
		width: 100%;
		padding-bottom: 5vh;
		box-sizing: content-box;
		min-height: 496px;
		margin-bottom: 30px;
	}
	.howto-content-cocktail-list-item h5{
		font-size: 20px;
		font-weight: 900;
		text-align: center;
		display: block;
		padding-top: 43px;
		letter-spacing: 0.1em;
		line-height: 1.55em;
		margin-bottom: 12px;
	}
	.howto-content-cocktail-list-item p{
		font-size: 17px;
	}
	.howto-content-cocktail-list-item p span{}
	.howto-content-cocktail-list-item img{}
	.howto-content-cocktail-list-item:nth-child(1) img{
		width: calc(100% + 68px);
		display: block;
		bottom: 0px;
		max-width: calc(100% + 68px);
		left: -34px;
		right: 0;
		margin: auto;
	}
	.howto-content-cocktail-list-item:nth-child(2) img{
		width: calc(100% + 68px);
		display: block;
		bottom: 0px;
		max-width: calc(100% + 68px);
		left: -34px;
		right: 0;
		margin: auto;
	}
	.howto-content-cocktail-list-item:nth-child(3) img{
		width: calc(100% + 68px);
		display: block;
		bottom: 40px;
		max-width: calc(100% + 68px);
		left: -34px;
		right: 0;
		margin: auto;
	}
	.howto-content-cocktail-list-item:nth-child(3){
		min-height: 504px;
	}
	.howto-content-cocktail-list-item:nth-child(1) h5{font-size: ;}
	.howto-content-cocktail-list-item:nth-child(2) h5{font-size: 19px;margin-bottom: 21px;}
	.howto-content-cocktail-list-item:nth-child(3) h5{font-size: 23px;}


	/* product ---------------------------------------*/
	.product{
		margin-bottom: 69px;
		background: url(../img/index/bg_asa_sp.jpg) no-repeat top center;
		background-size: 100%;
	}
	.product-bg{
		background: url(../img/index/main_bottom_sp.png) no-repeat bottom center;
		background-size: 100%;
		padding-bottom: 34vw;
	}

	.product-content{
	}
	.product-content h3{}
	.product-content h3 img{
		width: 164px;
		margin: 0 auto 61px;
	}
	.product-content-list{}
	.product-content-list-item{}
	.product-content-list-item.item01{
		width: calc(100% - 70px);
		display: block;
		margin: 0 auto 26px;
	}
	.product-content-list-item.item01 img{}
	.product-content-list-item.item02{
		width: calc(100% - 70px);
		display: block;
		margin: 0 auto;
	}
	.product-content-list-item.item02 h5{}
	.product-content-list-item.item02 h5 span{}
	.product-content-list-item.item02 strong{}
	.product-content-list-item.item02 strong small{}
	.product-content-list-item.item02 .sub-info{
		margin-bottom: 26px;
	}
	.product-content-list-item.item02 .sub-info b{
		font-size: 15px;
		color: #F59382;
		display: block;
		line-height: 1.9em;
		padding-left: 4em;
		text-indent: -4em;
		letter-spacing: 0.17em;
	}
	.product-content-list-item.item02 p{
		font-size: 15px;
		line-height: 2.68em;
		font-weight: normal;
		letter-spacing: 0.18em;
		margin-bottom: 24px;
	}
	.product-content-list-item.item02 a{
		width: 100%;
	}
	.product-content-list-item.item02 a img{}

	.footer-content{
		width: 100%;
	}
	.footer-content-inner{
		width: 100%;
	}
	.footer-content-inner-box{}
	.footer-content-inner-box-01{
		width: calc(100% - 70px);
		display: block;
		margin: 0 auto 35px;
	}
	.footer-content-inner-box-01 ul{}
	.footer-content-inner-box-01 ul li{}
	.footer-content-inner-box-01 ul li a{}
	.footer-content-inner-box-01 ul li a img{}
	.footer-content-inner-box-01 ul li.parts-sns{
		justify-content: center;
	}
	.footer-content-inner-box-01 ul li.parts-sns a{
		width: 46px;
		display: block;
		margin: 0px 20px;
	}
	.footer-content-inner-box-01 ul li.parts-sns img{}

	.footer-content-inner-box-02{
		width: calc(100% - 70px);
		display: block;
		margin: 0 auto;
	}
	.footer-content-inner-box-02 p.caution{
		line-height: 2.3em;
		margin-bottom: 23px;
	}
	.footer-content-inner-box-02 p.caution span{
		display: block;
		text-indent: -1.1em;
		padding-left: 1.1em;
	}
	.footer-content-inner-box-02 .company strong{
		font-size: 15px;
		margin-bottom: 15px;
	}
	.footer-content-inner-box-02 .company p{
		font-size: 16px;
		font-weight: normal;
		letter-spacing: 0.05em;
		display: block;
		margin-bottom: 15px;
	}
	.footer-content-inner-box-02 .company small{
		font-size: 14px;
	}

	.bottom-fixed{
		position: fixed;
		bottom: 30px;
		right: 23px;
		z-index: 999;
	}
	.bottom-fixed a {
		width: 50px;
		height: 50px;
		display: block;
	}
	.bottom-fixed a img{}

	.top-fixed{
		position:fixed;
		top: 10px;
		right: 10px;
	}
	.top-fixed a{
		display: block;
		width: 100px;
	}
	.top-fixed a img{width: 100%;}

	.btn-onlineshop{
		width: 100%;
		right: 0;
	}

	.concept-content-box{display: block;}
	.concept-content-box-flex-txt{
		width: calc(100% - 70px);
		margin: 36px auto 0;
	}
	.concept-content-box-flex-txt p{
		font-size: 16px;
		letter-spacing: 0.05em;
		line-height: 2.8em;
		width: 100%;
		margin: 36px auto 0;
	}
	.concept-content-box-flex-img{
		width: 100%;
		position: relative;
		top: 0;
	}

}



/* iphone5 iphoneSE用 */
@media screen and (max-width: 376px){
	.howto-content-cocktail-list-item{
		padding-bottom: 0;
	}
}

@media screen and (min-width: 1680px){
/*	.kv{
		height: 91.5vh;
	}
	.kv-main h2{
		left: -5px;
		width: 28vw;
		align-items: center;
		margin: 13.6vh auto;
		max-width: 530px;
	}*/

}

@media screen and (min-width: 768px){
	.features-content-box-02{
		justify-content: flex-end;
	}
}