@charset "utf-8";
/* CSS Document */

/*code copy*/
	.codecopy {width: 100%; text-align: center;}
	#copybutton {width: 90%; font-size:min(3.5vw,28px); margin: 15px; border: 1px solid #7b7b7b;border-radius: 5px; background:#ddd;}
	.count {display: block;position: relative;}
	.count div {position: absolute;right: 2%; bottom:20%;font-size:min(4.5vw,35px);color: #000;}


/*detail*/
    .toggle {
    	display: none;
    }
    .Label {
    	padding: 0;
    	display: block;
    }
    .Label,
    .content {
    	-webkit-backface-visibility: hidden;
    	backface-visibility: hidden;
    	transform: translateZ(0);
    	transition: all 0.3s;
    }
    .content {		/*本文*/
    	height: 0;
    	padding:0;
    	overflow: hidden;
    }
    .toggle:checked + .Label + .content {
    	height: auto;
    	transition: all .3s;
    }


div#mboi {
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	padding: 0;
}

div#mboi img{
	width: 100%;
	max-width: 750px;
	margin: 0;
	padding: 0;
	display: block;
}

div#mboi section{
	position: relative;
}

div#mboi section a:hover{
	filter: brightness(1.1)
}

div#mboi .offer a{
	width: 96%;
	display: block;
	position: absolute;
	top: 7%;
	left: 2%;
	animation: spin 1s ease-in-out infinite;
}

div#mboi .type a{
	width: 32%;
	display: block;
	position: absolute;
	top: 37%;
	left: 17%;
}

div#mboi .teiki3coupon a.sm{
	width: 90%;
	display: block;
	position: absolute;
	top: 2%;
	left: 5%;
	animation: spin 1s ease-in-out infinite;
}

div#mboi .teiki3coupon a.ml{
	width: 90%;
	display: block;
	position: absolute;
	bottom: 34%;
	left: 5%;
	animation: spin 1s ease-in-out infinite;
}

div#mboi .teiki3coupon a.ll{
	width: 90%;
	display: block;
	position: absolute;
	bottom: 1%;
	left: 5%;
	animation: spin 1s ease-in-out infinite;
}

div#mboi .teiki1coupon a{
	width: 86%;
	display: block;
	position: absolute;
	bottom: 5%;
	left: 7%;
	animation: spin 1s ease-in-out infinite;
}