@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body {
	-webkit-text-size-adjust: 100%;
	font-family: "Noto Sans JP", sans-serif;
	font-size:min(1.9vw,19px);
	text-align:center;
	color:#000;
	line-height:1.5;
	font-feature-settings: "palt";
}

@media screen and (max-width:768px){
	body {
		font-size:4.1vw;
	}
}

a {
	color:#000;
	transition : opacity 0.4s;
	-webkit-transition : opacity 0.4s;
	opacity:1;
	outline:none;
}
a:hover {
	opacity: 0.8;
}

@media screen and (max-width:768px){
	a:hover {
		opacity: 1;
	}
}

a.btn {
	display:inline-block;
	transition : transform 0.4s, box-shadow 0.4s;
	-webkit-transition : transform 0.4s, box-shadow 0.4s;
}
a.btn:hover {
	opacity: 1;
	transform:translateY(-4px);
}

@media screen and (max-width:768px){
	a.btn:hover {
		transform:none;
	}
}


img{
	max-width:100%;
}

.only_smart,
.only_smart_i{
	display:none !important;
}
@media screen and (max-width:768px){
	.only_pc{
		display:none !important;
	}
	
	.only_smart{
		display:block !important;
	}
	.only_smart_i{
		display:inline-block !important;
	}
}

#wrapper{
}

.inner{
	width:min(94%,1000px);
	margin:auto;
}


/* 色関係 */
.orange{
	color:#fdd000;
}
.wine{
	color:#971f24;
}
.purple{
	color:#a8399c;
}


/* 書式 */
.bold{
	font-weight:bold;
}



/* header */
header{
	width:100%;
	background-color:#1a1a1a;
	position:fixed;
	z-index:100;
}
header .inner{
	height:80px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
}
header .inner .head_logo{
	width:170px;
}
header .inner .head_nav{
	display: -webkit-flex;
	display: flex;
}
header .inner .head_nav li:last-child{
	margin-left:15px;
}
header .inner .head_nav li a.btn{
	border-radius:100px;
	box-shadow:0 0 10px rgba(255,255,255,1);
}
header .inner .head_nav li a.btn:hover{
	box-shadow:0 4px 15px rgba(255,255,255,0.8);
}

@media screen and (max-width:768px){
	header .inner{
		height:60px;
	}
	header .inner .head_logo{
		width:124px;
	}
	header .inner .head_nav{
		margin-right:-1.5%;
	}
	header .inner .head_nav li{
		width:85px;
	}
	header .inner .head_nav li:last-child{
		margin-left:0px;
	}
	header .inner .head_nav li a.btn{
		border-radius:0;
		box-shadow:none;
	}
	header .inner .head_nav li a.btn:hover{
		box-shadow:none;
	}
}

@media screen and (max-width:340px){
	header .inner .head_logo{
		width:115px;
	}
}


/* article */
article{
	padding-top:80px;
	position:relative;
}
article:before{
	content:'';
	display:block;
	width:50%;
	height:100%;
	background:url(../images/bg1.png) right top;
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
}
article:after{
	content:'';
	display:block;
	width:50%;
	height:100%;
	background:url(../images/bg2.png) left top;
	position:absolute;
	top:0;
	right:0;
	z-index:-1;
}

@media screen and (max-width:768px){
	article{
		padding-top:60px;
	}
	article:before{
		background-size:113px auto;
	}
	article:after{
		background-size:187px auto;
	}
}


/* .cta */
.cta{
	width:94%;
}
.cta h2{
	width:min(37%,396px);
	margin:auto;
}
.cta .lineup{
	max-width:900px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.cta .lineup li{
	width:min(46%,412px);
}
.cta .lineup li:first-child{
	transform:translateX(8%);
}
.cta .lineup li .btn{
	display:block;
	width:min(90%,370px);
	margin-top:min(1.5%,15px);
	border-radius:100px;
	box-shadow:0 0 10px rgba(255,255,255,1);
}
.cta .lineup li .btn:hover{
	box-shadow:0 4px 15px rgba(255,255,255,0.8);
}

@media screen and (max-width:768px){
	.cta{
		width:94%;
	}
	.cta h2{
		width:auto;
	}
	.cta .lineup{
		width:100%;
	}
	.cta .lineup li{
		width:48%;
	}
	.cta .lineup li:first-child{
		transform:none;
	}
	.cta .lineup li .btn{
		width:94%;
		margin:3% auto 0;
		border-radius:0;
		box-shadow:none;
	}
	.cta .lineup li .btn:hover{
		box-shadow:none;
	}
}


/* #mv */
#mv{
	padding:15px 0 min(12%,120px);
	background:url(../images/mv_bg.webp)no-repeat center -20px;
	background-size:min(135%,1457px) auto;
}
#mv .cta{
	margin-top:max(-10%,-110px);
}
#mv .make_wrapper{
	margin-top:min(7%,70px);
	filter: drop-shadow(0 10px 10px rgba(0,0,0,0.5));
}
#mv .make{
	padding:1.5em 0;
	background-color:rgba(255,255,255,0.8);
	clip-path:polygon(0 0, 100% 0, 100% calc(100% - 2em), calc(100% - 2em) 100%, 0 100%);
}
#mv .make section{
	width:min(84%,790px);
	margin:auto;
	padding-left:min(14%,140px);
	position:relative;
}
#mv .make section figure{
	width:min(15%,120px);
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
}
#mv .make section .title{
	display:block;
	width:8em;
	height:1.4em;
	line-height:1.3;
	font-size:min(2.5vw,25px);
	font-weight:normal;
	background-color:#000;
	border-radius:100px;
}
#mv .make section p{
	margin-top:0.5em;
	text-align:left;
}

@media screen and (max-width:768px){
	#mv{
		padding:0 0 5%;
		background-image:none;
	}
	#mv{
		margin-top:0;
	}
	#mv .make_wrapper{
		margin-top:3%;
		filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
	}
	#mv .make_wrapper .title{
		display:block;
		width:8em;
		height:1.4em;
		margin:auto;
		line-height:1.3;
		font-size:5.6vw;
		font-weight:normal;
		background-color:#000;
		border-radius:100px;
		transform:translateY(50%);
		position:relative;
		z-index:1;
	}
	#mv .make{
		padding:1.5em 0 1em;
	}
	#mv .make section{
		width:90%;
		padding-left:29%;
		position:relative;
	}
	#mv .make section figure{
		width:29%;
	}
}


/* .cont */
.cont{
	padding:min(7%,70px) 0 min(7%,70px);
}


/* #cont1 */
#cont1{
}
#cont1 .top_sec{
	background:#000 url(../images/cont1_bg.webp)no-repeat center top;
}
#cont1 .top_sec h2{
	display:inline-block;
	width:min(55.6vw,556px);
	margin-top:-120px;
}
#cont1 .top_sec .tab{
	margin-top:min(3vw,30px);
	display: -webkit-flex;
	display: flex;
}
#cont1 .top_sec .tab li{
	width:50%;
	line-height:2;
	border-radius:1em 1em 0 0;
	font-size:min(2.8vw,28px);
	font-weight:bold;
	color:#fff;
}
#cont1 .top_sec .tab li:first-child{
	background:url(../images/bg1.png) 3% 0;
}
#cont1 .top_sec .tab li:last-child{
	background:url(../images/bg2.png) 50% 45%;
}

#cont1 .tab_cont{
	display: -webkit-flex;
	display: flex;
}
#cont1 .tab_cont > li{
	width:50%;
	padding:0 min(3%,30px);
}
#cont1 .tab_cont > li .recipe{
	padding:5% 0;
}
#cont1 .tab_cont > li .recipe h3{
	font-size:min(3vw,30px);
	color:#fff;
	text-align:left;
	white-space:nowrap;
}
#cont1 .tab_cont > li .recipe figure{
	margin-top:4%;
}
#cont1 .tab_cont > li .recipe figure figcaption{
	margin-bottom:0.5em;
	color:#fff;
	text-align:right;
}
#cont1 .tab_cont > li .recipe .sec{
	padding:0 5% 5%;
	text-align:left;
	background-color:#fff;
}
#cont1 .tab_cont > li:first-child .recipe:first-child .sec,
#cont1 .tab_cont > li:last-child .recipe:first-child .sec{
}
#cont1 .tab_cont > li .recipe .sec h4{
	padding-top:5%;
}
#cont1 .tab_cont > li .recipe .sec .material{
	margin-top:0.5em;
}
#cont1 .tab_cont > li .recipe .sec .material div{
	line-height:1.45;
	padding:0 0.3em;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
#cont1 .tab_cont > li .recipe .sec .material.add{
	position:relative;
}
#cont1 .tab_cont > li .recipe .sec .material.add:before{
	content:'';
	display:block;
	height:calc(100% - 2.4em);
	border-left:0.4em solid #fee2e3;
	position:absolute;
	left:0.6em;
	bottom:0.5em;
	z-index:1;
}
#cont1 .tab_cont > li .recipe .sec .material.add div{
	-webkit-align-items: flex-end;
	align-items: flex-end;
	padding-left:1.5em;
	position:relative;
}
#cont1 .tab_cont > li .recipe .sec .material.add div:first-child dt {
		text-indent:-1em;
}
#cont1 .tab_cont > li .recipe .sec .material.little {
	margin-top:1.2em;
}

#cont1 .tab_cont > li .recipe .sec.sec_wine .material div{
	border-bottom:2px dashed rgba(151,31,36,0.5);
}
#cont1 .tab_cont > li .recipe .sec.sec_purple .material div{
	border-bottom:2px dashed rgba(146,8,131,0.5);
}

#cont1 .tab_cont > li .recipe .sec .make{
	margin-top:0.5em;
	counter-reset: my-counter;
}
#cont1 .tab_cont > li .recipe .sec .make li{
	padding:0.3em 0 0.3em 2em;
	position:relative;
}
#cont1 .tab_cont > li .recipe .sec .make.make_wine li{
	border-bottom:2px dashed rgba(151,31,36,0.5);
}
#cont1 .tab_cont > li .recipe .sec .make.make_purple li{
	padding-top:0.5em;
	padding-bottom:0.5em;
	border-bottom:2px dashed rgba(146,8,131,0.5);
}
#cont1 .tab_cont > li .recipe .sec .make li:before{
	content: counter(my-counter);
	counter-increment: my-counter;
	width:1.5em;
	height:1.5em;
	display: flex;
	justify-content: center;
	color:#fff;
	align-items: center;
	border-radius:50%;
	position:absolute;
	left:0;
}
#cont1 .tab_cont > li .recipe .sec .make.make_wine li:before{
	background-color:#971f24;
}
#cont1 .tab_cont > li .recipe .sec .make.make_purple li:before{
	background-color:#a8399c;
}

#cont1 .bottom{
	width:80%;
	margin-top:min(3%,30px);
}
#cont1 .bottom h3{
	color:#fff;
}
#cont1 .bottom h3 .small{
	display:block;
	font-size:min(2.5vw,25px);
}
#cont1 .bottom h3 .large{
	display:block;
	font-size:min(3.9vw,39px);
}
#cont1 .bottom figure{
	margin-top:min(1.5%,15px);
}

#cont1 .cta{
	margin-top:min(5%,50px);
}
#cont1 .banner{
	display:inline-block;
	max-width:864px;
	margin-top:min(5%,50px);
}


@media screen and (max-width:768px){
	#cont1 .top_sec{
		margin-bottom:-2px;
		background:#000 url(../images/cont1_bg_s.webp)no-repeat center top;
		background-size:100% auto;
	}
	#cont1 .top_sec h2{
		display:inline-block;
		width:80%;
		margin-top:-5%;
	}
	#cont1 .top_sec .tab{
		width:100%;
		margin-top:5%;
		padding:0 2%;
		-webkit-justify-content: space-around;
		justify-content: space-around;
		-webkit-align-items: flex-end;
		align-items: flex-start;
	}
	#cont1 .top_sec .tab li{
		width:48%;
		font-size:4.2vw;
		font-weight:normal;
		cursor:pointer;
	}
	#cont1 .top_sec .tab li.active{
		font-weight:bold;
		border:2px solid;
		border-bottom:none;
	}
	#cont1 .top_sec .tab li:first-child{
		background-size:113px auto;
	}
	#cont1 .top_sec .tab li:last-child{
		background-size:187px auto;
	}

	#cont1 .tab_cont{
		display: block;
		width:100%;
		border-top:2px solid #fff;
		border-bottom:2px solid #fff;
	}
	#cont1 .tab_cont > li{
		width:auto;
		padding-bottom:9%;
	}
	#cont1 .tab_cont > li:first-child{
		background:url(../images/bg1.png) right top;
		background-size:113px auto;
	}
	#cont1 .tab_cont > li:last-child{
		background:url(../images/bg2.png) left top;
		background-size:187px auto;
		display:none;
	}
	
	#cont1 .tab_cont > li .recipe h3{
		font-size:6.5vw;
	}
	#cont1 .tab_cont > li .recipe .sec .make{
		margin-top:0.5em;
		counter-reset: my-counter;
	}
	#cont1 .tab_cont > li .recipe .sec .make li{
		padding:0.3em 0 0.3em 2em;
		position:relative;
	}
	#cont1 .tab_cont > li .recipe .sec .make.make_wine li{
		border-bottom:2px dashed rgba(151,31,36,0.5);
	}
	#cont1 .tab_cont > li .recipe .sec .make.make_purple li{
		border-bottom:2px dashed rgba(146,8,131,0.5);
	}
	#cont1 .tab_cont > li .recipe .sec .make li:before{
		content: counter(my-counter);
		counter-increment: my-counter;
		width:1.5em;
		height:1.5em;
		display: flex;
		justify-content: center;
		color:#fff;
		align-items: center;
		border-radius:50%;
		position:absolute;
		left:0;
	}
	#cont1 .tab_cont > li .recipe .sec .make.make_wine li:before{
		background-color:#971f24;
	}
	#cont1 .tab_cont > li .recipe .sec .make.make_purple li:before{
		background-color:#a8399c;
	}
	
	#cont1 .bottom{
		width:100%;
	}
	#cont1 .bottom h3 .small{
		font-size:4.1vw;
	}
	#cont1 .bottom h3 .large{
		font-size:6.5vw;
	}
	#cont1 .bottom figure{
		margin-top:3%;
	}
	
	#cont1 .cta{
		margin-top:9%;
	}
}



/* #cont2 */
#cont2{
	background-color:#fff;
}
#cont2 .cont2_top{
	width:min(56%,563px);
	margin:auto;
}
#cont2 section{
	margin-top:min(3%,30px);
	margin-bottom:min(7%,70px);
}
#cont2 section h2{
	padding:1.5% 0;
	background-color:#0083c2;
	border-radius:2em 2em 0 0;
}
#cont2 section h2 img{
	width:76%;
}
#cont2 section .cont_wrapper{
	padding:3% 5% 5%;
	background-color:#e4f6fe;
	border:8px solid #0083c2;
	border-top:none;
}
#cont2 section .cont_wrapper p{
	font-size:min(2.7vw,28px);
	font-weight:bold;
	color:#0083c2;
}
#cont2 section .cont_wrapper figure{
	width:86%;
	margin:1.5% auto 3%;
}

#cont2 .company{
	font-size:12px;
}

@media screen and (max-width:768px){
	#cont2 .cont2_top{
		width:80%;
	}
	#cont2 section{
		margin-top:min(3%,30px);
		margin-bottom:min(7%,70px);
	}
	#cont2 section h2{
		margin-bottom:-1.5%;
		padding:7% 0 0;
	}
	#cont2 section h2 img{
		width:86%;
	}
	#cont2 section .cont_wrapper{
		padding:3% 0 5%;
		border:1.2vw solid #0083c2;
		border-top:none;
	}
	#cont2 section .cont_wrapper p{
		font-size:6vw;
	}
	#cont2 section .cont_wrapper figure{
		width:86%;
		margin:1.5% auto 9%;
	}
	#cont2 section .cont_wrapper a{
		display:inline-block;
		width:90%;
	}
	#cont2 .company{
		font-size:12px;
	}
}


/* footer */
footer{
	line-height:50px;
	font-ize:14px;
	font-weight:300;
	color:#fff;
	background-color:#000;
}


/* top_top */
#topbtn{
	width:50px;
	line-height:50px;
	font-size:21px;
	border-radius:50%;
	color:#fff;
	background-color:rgba(0,0,0,0.5);
	position:fixed;
	z-index:102;
	right:20px;
	bottom:-150px;
	-webkit-transition: bottom 0.8s;
	-moz-transition: bottom 0.8s;
	-ms-transition: bottom 0.8s;
	transition: bottom 0.8s;
}
@media screen and (max-width:768px){
	#topbtn{
		width:40px;
		line-height:40px;
		font-size:18px;
		right:15px;
	}
}


/* fadein */
.fadein0 {
  opacity : 0.01;
  -webkit-transition-property: opacity;
  transition-property : opacity;
  -webkit-transition-duration: 1.5s;
  transition-duration : 1.5s;
}

.fadein0.scrollin{
  opacity : 1;
}