@charset "utf-8";

/* common
------------------------------------------------------*/
div#contents div.sunmush{
	max-width:1024px;
	margin:0 auto 120px;
	padding:30px;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
}
	

/* ttl
------------------------------------------------------*/
div.sunmush h1#cttl span{
	background-image:url(../img/ttl/sunmush.webp),url(../img/bk_gray.png);
}
div.sunmush h2.pttl{
	position:relative;
	margin:0 0;
	padding:15px;
	color:#fff;
	font-size:32px;
	text-align:center;
	background-repeat:no-repeat;
	background-position:right 60px center,center center;
	background-image:url(../../label/img/mush_ttl.webp);
	background-size:200px auto,auto;
}
div.sunmush h2.pttl::before{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:100vw;
	height:100%;
	background:linear-gradient(135deg, #0073e6, #00c3ff);
	z-index:-1;
}

/* secret
------------------------------------------------------*/
div#secret ul li{
	margin:0 auto 90px;
	padding:0 0 0 224px;
	background-repeat:no-repeat;
	background-position:left top;
	background-size:auto;
}
div#secret ul li:nth-child(1){background-image:url(../../sunmush/img/secret1.webp);}
div#secret ul li:nth-child(2){background-image:url(../../sunmush/img/secret2.webp);}
div#secret ul li:nth-child(3){background-image:url(../../sunmush/img/secret3.webp);}

div.characteristics div#contents h3.sttl{
	font-size:24px;
	font-weight:bold;
}
div.characteristics div#contents h3.sttl:after{
	width:100%;
	height:5px;
	content:"";
	display:block;
	margin:15px 0 20px;
	background-image:linear-gradient(90deg, #0073ff, #00d097);
}
div#secret ul li p{
	margin-bottom:30px;
}
div#secret ul li:nth-child(2) p{
	padding-right:270px;
	background:url(../../sunmush/img/acorns.webp) no-repeat right top;
}
div#secret ul li:nth-child(3) a.btn{
	max-width: calc(320px - 32px + 6em);
}


/* howtobuy
------------------------------------------------------*/
div.howtobuy div#howtobuy {
	margin-bottom:0;
}
div.howtobuy h1#cttl span{
	background-image:url(../img/ttl/howtobuy.webp),url(../img/bk_gray.png);
}
div.howtobuy div#howtobuy p.outline {
	margin-bottom:30px;
}
div.howtobuy div#howtobuy ul{
	margin-bottom:-60px;
}
div.howtobuy div#howtobuy ul li{
	width:calc(50% - 30px);
	margin:0 60px 60px 0;
	padding:150px 0 0;
	background-repeat:no-repeat;
	background-position:center top;
	background-size:auto;
}
div.howtobuy div#howtobuy ul li:nth-child(1){background-image:url(../../sunmush/img/icon_shop.webp);}
div.howtobuy div#howtobuy ul li:nth-child(2){background-image:url(../../sunmush/img/icon_event.webp);}
div.howtobuy div#howtobuy ul li:nth-child(3){background-image:url(../../sunmush/img/icon_car.webp);}
div.howtobuy div#howtobuy ul li:nth-child(4){background-image:url(../../sunmush/img/icon_net.webp);}

div.howtobuy div#howtobuy ul li:nth-child(2n){
	margin-right:0;
}

div.howtobuy div#howtobuy ul li h3.sttl{
	padding:20px 0 15px 75px;
	color:#5096c8;
	font-size:24px;
	font-weight:bold;
	background-repeat:no-repeat;
	background-position:left center;
	background-size:auto;
}
div.howtobuy div#howtobuy ul li:nth-child(1) h3.sttl{color:#4a9f00;background-image:url(../../sunmush/img/chara1.webp);}
div.howtobuy div#howtobuy ul li:nth-child(2) h3.sttl{color:#e16464;background-image:url(../../sunmush/img/chara2.webp);}
div.howtobuy div#howtobuy ul li:nth-child(3) h3.sttl{color:#a16c32;background-image:url(../../sunmush/img/chara3.webp);}
div.howtobuy div#howtobuy ul li:nth-child(4) h3.sttl{color:#5096c8;background-image:url(../../sunmush/img/chara4.webp);}
div.howtobuy div#howtobuy ul li:nth-child(3) p{
	margin-bottom:30px;
}
div.howtobuy div#howtobuy ul li p strong{
	color:#ff4646;
	font-weight:bold;
}
div.howtobuy div#howtobuy ul li p strong{
	color:#ff4646;
	font-weight:bold;
}


/* acorns
------------------------------------------------------*/
div.acorns div#acorns {
	margin-bottom:0;
}
div.acorns h1#cttl span{
	background-image:url(../img/ttl/acorns.webp),url(../img/bk_gray.png);
}
div.acorns div#contents h3.sttl{
	font-size:24px;
	font-weight:bold;
}
div.acorns div#contents h3.sttl:after{
	width:100%;
	height:5px;
	content:"";
	display:block;
	margin:15px 0 20px;
	background-image:linear-gradient(90deg, #0073ff, #00d097);
}
div.acorns div#contents p.outline {
	padding-top:calc(42% + 30px);
	background:url(../../sunmush/img/acorns_main.webp) no-repeat center top / 100% auto;
}
div.acorns div#contents p{
	margin-bottom:90px;
}


/* Responsive Design
------------------------------------------------------*/

/* 1060px以下 */
@media screen and (max-width:1060px){
	div#contents div.sunmush{
		max-width:100%;
	}
	div#secret ul li{
		padding:0 0 0 190px;
	}
	div#secret ul li:nth-child(2) p{
		padding-right:220px;
	}
}

/* 860px以下 */
@media screen and (max-width:860px){
	div.sunmush h2.pttl{
		margin:0 0;
		font-size:28px;
		background-position:right 40px center,center center;
		background-size:150px auto,auto;
	}
	div#secret ul li{
		padding:0 0 0 160px;
	}
	div#secret ul li:nth-child(2) p{
		padding-right:180px;
		background-size:150px auto;
	}
	div.howtobuy div#howtobuy ul li{
		width:calc(50% - 30px);
		padding:120px 0 0;
		background-size:auto 110px;
	}
	div.howtobuy div#howtobuy ul li h3.sttl{
		padding:15px 0 12px 60px;
		font-size:20px;
		background-size:auto 50px;
	}
}

/* 780px以下 */
@media screen and (max-width:780px){
	div#contents div.sunmush{
		padding:30px 20px;
	}
	div.sunmush h2.pttl{
		margin:0 0;
		font-size:26px;
		background-position:right 30px center,center center;
		background-size:130px auto,auto;
	}
	div#secret ul li{
		margin:0 auto 60px;
		padding:0;
		background-position:center top;
		background-size:auto 180px;
		padding-top:190px;
	}
	div.characteristics div#contents h3.sttl{
		font-size:22px;
	}
	div#secret ul li:nth-child(2) p{
		padding-right:0;
		padding-bottom:190px;
		background-position:center bottom;
		background-size:200px auto;
	}
	div.howtobuy div#howtobuy ul{
		margin-bottom:-45px;
	}
	div.howtobuy div#howtobuy ul li{
		width:100%;
		margin:0 0 45px 0;
		padding:100px 0 0;
		background-size:auto 90px;
	}
	div.howtobuy div#howtobuy ul li h3.sttl{
		padding:12px 0 10px 55px;
		font-size:20px;
		background-size:auto 45px;
	}
	div.acorns div#contents p.outline {
		padding-top:calc(42% + 20px);
	}
	div.acorns div#contents p{
		margin-bottom:60px;
	}
}

/* 640px以下 */
@media screen and (max-width:640px){
	div#contents div.sunmush{
		padding:20px 15px;
		border-radius:20px;
	}
	div.sunmush h2.pttl{
		margin:0 0;
		padding:12px;
		font-size:24px;
		background-position:right 20px center,center center;
		background-size:110px auto,auto;
	}
	div#secret ul li{
		margin:0 auto 45px;
		padding-top:160px;
		background-size:auto 150px;
	}
	div.characteristics div#contents h3.sttl{
		font-size:20px;
	}
	div.characteristics div#contents h3.sttl:after{
		margin:10px 0 15px;
	}
	div#secret ul li p{
		margin-bottom:20px;
	}
	div#secret ul li:nth-child(2) p{
		padding-bottom:160px;
		background-size:170px auto;
	}
	div#secret ul li:nth-child(3) a.btn{
		max-width: calc(100% - 32px);
	}
	div.howtobuy div#howtobuy ul{
		margin-bottom:-30px;
	}
	div.howtobuy div#howtobuy ul li{
		margin:0 0 30px 0;
		padding:80px 0 0;
		background-size:auto 70px;
	}
	div.howtobuy div#howtobuy ul li h3.sttl{
		padding:10px 0 8px 50px;
		font-size:18px;
		background-size:auto 40px;
	}
	div.howtobuy div#howtobuy ul li:nth-child(3) p{
		margin-bottom:20px;
	}
	div.acorns div#contents h3.sttl{
		font-size:20px;
	}
	div.acorns div#contents h3.sttl:after{
		margin:10px 0 15px;
	}
	div.acorns div#contents p.outline {
		padding-top:calc(42% + 15px);
	}
	div.acorns div#contents p{
		margin-bottom:45px;
	}
}

/* 540px以下 */
@media screen and (max-width:540px){
	div#contents div.sunmush{
		padding:15px 10px;
		border-radius:15px;
	}
	div.sunmush h2.pttl{
		padding:10px;
		font-size:22px;
		line-height:1.4;
		background-position:right 15px center,center center;
		background-size:90px auto,auto;
	}
	div#secret ul li{
		margin:0 auto 30px;
		padding-top:130px;
		background-size:auto 120px;
	}
	div.characteristics div#contents h3.sttl{
		font-size:18px;
	}
	div#secret ul li p{
		margin-bottom:15px;
		font-size:14px;
	}
	div#secret ul li:nth-child(2) p{
		padding-bottom:130px;
		background-size:140px auto;
	}
	div.howtobuy div#howtobuy p.outline {
		margin-bottom:20px;
	}
	div.howtobuy div#howtobuy ul{
		margin-bottom:-20px;
	}
	div.howtobuy div#howtobuy ul li{
		margin:0 0 20px 0;
		padding:60px 0 0;
		background-size:auto 55px;
	}
	div.howtobuy div#howtobuy ul li h3.sttl{
		padding:8px 0 6px 45px;
		font-size:16px;
		background-size:auto 35px;
	}
	div.howtobuy div#howtobuy ul li p{
		font-size:14px;
	}
	div.howtobuy div#howtobuy ul li:nth-child(3) p{
		margin-bottom:15px;
	}
	div.acorns div#contents h3.sttl{
		font-size:18px;
	}
	div.acorns div#contents p.outline {
		padding-top:calc(42% + 10px);
	}
	div.acorns div#contents p{
		margin-bottom:30px;
		font-size:14px;
	}
}