@charset "UTF-8";
#collabo {
	
}
#collabo section{
	/* max-width:1100px; */
	margin-inline:auto;
	padding-inline:50px;
}
#collabo section *{
	color:#020339;
}
#collabo #mv{
	position:relative;
	background: url(img/collabo/mv_img.png)no-repeat  100%  -40%;
	padding-top: 40px;
}
#collabo #mv h1{
	position:relative;
	z-index:1;
	max-width: 1000px;
	margin-inline: auto;
}
#collabo #mv h1:before{
	content:"";
	width:100%;
	height:100%;
	/* background: url(img/collabo/mv_deco1.svg)no-repeat right bottom; */
	position:absolute;
	bottom: 0;
	right: 0;
	z-index: -1;
}
#collabo #mv:before{
	content:"";
	width:100%;
	height:100%;
	background: url(img/collabo/mv_deco1.svg)no-repeat 100%;
	position:absolute;
	bottom: 0;
	right: -140px;
	z-index: 0;
}
#collabo #mv:after{
	content:"";
	width:100%;
	height:100%;
	background:url(img/collabo/mv_deco2.svg)no-repeat left top;
	position:absolute;
	bottom: 50px;
	left: -140px;
}
#collabo #mv img{
	height:auto;
	max-height: 100%;
}
#collabo #about{
	max-width:1100px;
	margin-inline:auto;
	margin-bottom:80px
}
#collabo #about img{
	position:relative;
	padding-left:10px;
}
#collabo #intro{
	position:relative;
	z-index: 0;
}
#collabo #intro .inner{
	position:relative;
	border-radius:40px;
	padding: 120px 40px 80px;
	margin-top:40px;
	max-width: 1000px;
	margin-inline: auto;
	margin-bottom: 80px;
	background:#fff;
	box-shadow:4px 4px 10px rgba(0, 0, 0 , 0.1)
}
#collabo #intro:before{
	content:"";
	position:absolute;
	top:-40px;
	right:-130px;
	width:470px;
	height:calc(100% + 80px);
	background:url(img/collabo/bg_slash1.svg)no-repeat;
	z-index: -3;
}
#collabo #intro h2{
	position:absolute;
	left: -20px;
	top:-80px;
}
#collabo #intro h2 img{
	max-width:30vw;
}
#collabo #intro p{
	max-width:794px;
	margin-inline:auto;
	font-size: 18px;
	line-height: 2;
	font-weight: bold;
	color: #020339;
}
#collabo #product .productBox{
	max-width:720px;
	margin-inline:auto;
	margin-bottom: 120px;
	position:relative;
}
#collabo #product .productBox .productImg{
	border-radius:40px 40px 0 0;
    aspect-ratio: 68/ 78;
	position: relative;
	z-index: 2;
	outline: solid 20px #ffe5a7;
	outline-offset: -20px;
}

#collabo #product .productBox .productImg .bgImg{
	position:absolute;
	width: 82vw;
	max-width: 1147px;
	right: calc(25% - 180px);
	z-index: -1;
}

#collabo #product .productBox:nth-of-type(2) .productImg .bgImg{
	position:absolute;
	right:auto;
	left: calc(25% - 180px);
	z-index: -2;
}
#collabo #product .productBox .productImg .img{
	position: absolute;
	z-index:1;
}
#collabo #product .productBox:nth-of-type(1) .productImg .img{
	max-width:400px;
	display:flex;
	align-items: flex-end;
	top: 0;
	bottom:0;
	right: -120px;
	padding-bottom: 80px;
	margin:auto;
}
#collabo #product .productBox:nth-of-type(2) .productImg .img{
	max-width:310px;
	display:flex;
	align-items: flex-end;
	top:0;
	bottom:0;
	padding-bottom: 80px;
	left: -120px;
	margin:auto;
}
#collabo #product .productBox .productTxt {
	box-shadow:inset 0 10px 10px rgba(0, 0, 0 , 0.1);
	border-radius:0 0 40px 40px;
}
#collabo #product .productBox h2{
	background:#020339;
	color:#fff;
	display:inline-block;
	padding:10px;
	line-height:1;
	position: absolute;
	left:-50px;
	bottom: 80px;
	margin-bottom: 0;
	min-width: 380px;
	text-align: center;
}
#collabo #product .productBox:nth-of-type(2) h2{
	left:auto;
	right:-50px
}
#collabo #product .productBox .collabo{
	padding: 20px;
	font-size: 22px;
	font-weight: bold;
	line-height:1;
	position: absolute;
	display: table;
	left: 0px;
	bottom: 0px;
	margin-top: auto;
	border-radius: 0 20px 0 0;
	margin: 0;
	background: #ffe5a8;
}
#collabo #product .productBox:nth-of-type(2) .collabo{
	left:auto;
	right:0;
	border-radius: 20px 0 0 0 ;
}
#collabo #product .productBox .collabo span{
	border:solid 3px #020339;
	padding-inline:3px;
}
#collabo #product .productBox .productTxt{
	background:#ffe5a7;
	position: relative;
	z-index: 2;
}
#collabo #product .productBox .productTxt p.img{
	display:none;
}
#collabo #product .productBox .productTxt p.txt{
	padding: 50px 10px;
	max-width: 540px;
	margin:0 auto;
}
#collabo hr{
	background: url(img/collabo/border.svg) no-repeat center;
	padding: 60px;
	border:none;
	margin-block: 50px;
}
#collabo #detail .box{
	max-width:1000px;
	margin-inline:auto;
	position:relative;
	z-index: 1;
	padding-top:100px;
}
#collabo #detail .box:nth-of-type(1):before{
	content:"";
	position:absolute;
	top:80px;
	left:-130px;
	width:470px;
	height:calc(100% + 80px);
	background:url(img/collabo/bg_slash2.svg)no-repeat;
	z-index: -1;
}
#collabo #detail .box:nth-of-type(2):before{
	content:"";
	position:absolute;
	top:80px;
	right:-130px;
	width:470px;
	height:calc(100% + 80px);
	background:url(img/collabo/bg_slash3.svg)no-repeat;
	z-index: -1;
}
#collabo #detail .box:nth-of-type(2) h2{
	right:auto;
	left:-50px;
}
#collabo #detail .box:nth-of-type(1) .txt{
	padding-left:50%;
	margin-top:60px;
	font-size:18px;
	line-height:2;
	background: url(https://www.nanchiku.co.jp/renewal/wp-content/themes/custom-themes/img/collabo/img1_2.png)no-repeat 40px center;
}
#collabo #detail .box:nth-of-type(2) .txt{
	padding-right:50%;
	margin-top:60px;
	font-size:18px;
	line-height:2;
}
#collabo #detail .box:nth-of-type(3) h2{
	top: -120px;
	right: -90px;
}
#collabo #detail .box:nth-of-type(3) .txt{
	margin-top:60px;
	font-size:18px;
	line-height:2;
}
#collabo #detail .box h2{
	position:absolute;
	right:-50px;
	top:0;
}
#collabo #detail .box.last{
	max-width: 700px;
	padding: 120px 0;
}
#collabo #detail .box.last p{
	max-width:100%;
}
#collabo #shop{
	background:#ffe5a7;
	border-radius:60px;
	padding: 40px;
}
#collabo #shop dl{
	border:none;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 1000px;
	margin: auto;
}
#collabo #shop dl dt,
#collabo #shop dl dd{
	flex-basis:50%;
}
#collabo #shop dl dt{
	font-size:34px;
	justify-content: center;
}
#collabo #shop dl dd ul{
	font-size:24px;
	padding-left:0;
	list-style:none;
}
#collabo #shop dl dd ul li{
	background:#020339;
	color:#fff;
	border-radius:10px;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:20px;
	padding:20px;
	position:relative;
}
#collabo #shop dl dd ul li small{
	position:absolute;
	text-align:right;
	right:0;
	bottom:0;
	font-size:12px;
	padding: 4px 8px;
	color: #fff;
}
#collabo #shop dl *:before{
	content:none;
}
#collabo #collaboContact {
	text-align:center;
	padding: 100px 0 0;
	color:#020339;
}
#collabo #collaboContact h2{
	font-size:28px;
	color:#020339;
}
#collabo #collaboContact p{
	font-size:24px;
	font-weight: bold;
}


@media screen and (max-width: 767px) {
	#collabo #mv{
		background:none;
		padding: 0;
	}
	#collabo #mv h1{
		padding:0
	}
	#collabo #mv:before,
	#collabo #mv:after{
		background:none;
	}
	#collabo #about img{
		padding:0;
	}
	#collabo #about{
		padding-inline:0;
	}
	#collabo #intro p{
		font-size:16px;
	}
	#collabo #intro .inner{
		padding-inline:30px;
		padding-bottom: 40px;
	}
	#collabo #intro{
		padding-top: 0px;
		padding-inline: 30px;
	}
	#collabo #intro:before{
		background-image:url(img/collabo/bg_slash1_sp.png);
		background-position:right;
	}
	#collabo #intro h2{
		position: relative;
		/* left: 40px; */
		right: 0;
		margin: auto;
		top:-180px;
		margin-bottom: -160px;
	}
	#collabo #intro h2 img{
		max-width: 100%;
		margin-inline: auto;
		max-width: 280px;
		display: table;
	}
	#collabo #product{
		padding-inline:12.5px;
	}
	#collabo #product .productBox .productImg .img{
		display: none!important;
	}
	#collabo #product .productBox .productTxt p.img{
		display:block;
		padding: 40px 60px 0;
		margin-bottom:0;
		text-align: center;
		max-width: 320px;
		margin-inline: auto;
	}
	#collabo #product .productBox .productTxt p.txt{
		padding-top:20px;
		font-size: 16px;
		padding-inline: 20px;
	}
	#collabo #product .productBox .productImg .bgImg{
		width: calc(100vw + 10px);
		aspect-ratio: 1/1;
		object-fit: cover;
		left: -13px;
		top: -30px;
	}
	#collabo #product .productBox:nth-of-type(2) .productImg .bgImg{
		left: -13px;
		width: calc(100vw + 10px);
	}
	#collabo #product .productBox .productImg{
        border-radius:20px 20px 0 0;
        outline: solid 10px #ffe5a7;
        outline-offset: -10px;
        aspect-ratio: 1/1;
    }

	#collabo #product .productBox h2{
		font-size:25px;
		bottom: 70px;
		min-width: 300px;
		left: -20px;
	}
	#collabo #product .productBox:nth-of-type(2) h2{
		right: -20px;
	}
	#collabo #product .productBox .collabo{
		font-size:16px;
	}

	#collabo #detail {
		padding-inline: 10px;
	}
	#collabo #detail .box .txt{
		padding-inline:0!important;
		margin-top: 20px!important;
		font-size: 16.1px!important;
		padding-inline: 20px!important;
	}
	#collabo #detail .box:nth-of-type(1) .txt {
	    padding-left: 50%;
	    margin-top: 60px;
	    font-size: 18px;
	    line-height: 2;
	    background: url(img/collabo/img1_2.png) no-repeat center 20px;
		padding-top:280px;
	}
	#collabo #detail .box h2{
		position:relative;
		left:0;
		right:0;
		margin-bottom: -50px;
		margin-inline:auto;
		max-width: 280px;
	}
	#collabo #detail .box:nth-of-type(2) h2{
		left:0;
		right:0;
		margin-bottom: -50px;
		margin-inline:auto;
	}
	#collabo #detail .box:nth-of-type(3) h2{
		top:0;
		margin-bottom: 0px;
	}
	#collabo #product .productBox{
		margin-bottom:80px
	}
#collabo #detail .box{
	padding-top: 50px;
}
	#collabo #detail .box.last {
    padding: 60px 0;
}
	#collabo #shop{
		padding-inline:20px;
		border-radius:30px;
	}
	#collabo #shop dl{
		flex-direction:column;
	}

	#collabo #shop dl dd ul li{
		font-size:16px;
	}
	#collabo #shop dl dd ul li small{
		font-size:10px;
	}

	#collabo hr{
		background-size:cover;
		padding: 50px;
		margin-block: 0px;
	}

	#collabo #detail .box:nth-of-type(1):before{
		top: 180px;
		width: 110px;
		left: -10px;
		background-size: 200%;
	}
	#collabo #detail .box:nth-of-type(2):before{
		top: 180px;
		width: 110px;
		right: -10px;
		background-size: 200%;
	}
	#collabo #shop dl dt{
		font-size:20px;
	}
	#collabo #collaboContact{
		padding-top:80px;
	}
	#collabo #collaboContact h2{
		font-size:20px;
	}
	#collabo #collaboContact p{
		font-size:17px;
	}
	#collabo #detail .box:nth-of-type(1) .txt{
		background-size:300px!important;
	}
}
@media screen and (min-width: 940px) {
	#collabo #detail .box:nth-of-type(3) h2 {
	    top: -110px;
	    right: -200px;
	}
	#collabo #mv:before{
		bottom:-200px;
	}
}
@media screen and (min-width: 1300px) {
	#collabo #product .productBox .productImg .bgImg{
	position:absolute;
	width: 82vw;
	max-width: 1147px;
	right: calc(25% - 240px);
	z-index: -2;
}

#collabo #product .productBox:nth-of-type(2) .productImg .bgImg{
	position:absolute;
	right:auto;
	left: calc(25% - 240px);
	z-index: -2;
}
}
@media screen and (min-width: 768px)  and (max-width: 1120px) {
	#collabo #product .productBox .productImg .bgImg{
		width:90vw;
		right: calc(25% - 140px);
	}
}
@media screen and (min-width: 1200px) {
	#collabo #intro h2 {
	    top: -120px;
	    left: -40px;
	}
	#collabo #intro h2 img{
		max-width: 370px;
	}
}