@charset "utf-8";

/* CSS Document */
/* ------------------------------------------------------------------------ */

/*  Basic Style

/* ------------------------------------------------------------------------ */

/* Flexible Images */

img {
	max-width: 100%;
	height: auto;
	width/***/
	: auto;
}


#mainBlock {
	clear: both;
	width: 100%;
}

.sp_style,
.tablet_style {
	display: none;
}

h1{
	margin:0;
}

.mv img {
	width: 100%;
}
figure{
	margin: 0;
	text-align: center;
}

ul.indent > li{
	padding-left: 1em;
	text-indent: -1em;
}


/*見出し*/

h2 {
	font-weight: 700;
	text-align: center;
	line-height: 1;
}

h2 span {
	font-size: 55%;
	line-height: 1.7;
}

/* --- margin --- */

.auto  { margin-right : auto; margin-left : auto;}
.mb0   { margin-bottom	: 0 !important;}
.mt0   { margin-top	: 0 !important;}
.mt5   { margin-top	: 5 !important;}
.mt10  { margin-top	: 10px !important;}
.mt15  { margin-top	: 15px !important;}
.mt50  { margin-top	: 50px !important;}



/* --- padding --- */

.pt0  { padding-top : 0 !important;}
.pb0  { padding-bottom : 0 !important;}
.pb5  { padding-bottom : 5px !important;}
.pb10 { padding-bottom : 10px !important;}
.pb15 { padding-bottom : 15px !important;}
.pb20 { padding-bottom : 20px !important;}


/* --- display --- */
.txt_c { text-align : center !important;} 
.st-siteHeader_2{
	border-bottom: none;
}
.contents_inner{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}
#contentsBlock{
	color: #0d0d0d;
	font-size: 16px;
	word-break: break-word;
}
#contentsBlock *,* ::after,* ::before{
	box-sizing: border-box;
}

.sp_img{
	display: none;
}

.minfnt{
	font-size: 12px;
}

/* ABOUT */
.l-about{
	text-align: center;
	padding-top: 40px;
}
.l-about .contents_area{
	padding: 80px 0 140px;
}

.l-about .lead{
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	margin: 40px 0;
}



/* MOVIE */
.l-movie{
	background: #efeeec;
	padding: 40px 0 20px;
}
.l-movie h2{
	margin: -62px 0 80px;
}
.l-movie .video_box{
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}
	.l-movie .video_box .youtube{
		max-width: 640px;
		width: 70%;
	}
		.l-movie .video_box .youtube .inner{
			position: relative;
			width: 100%;
			padding-top: 56.25%;
		}
			.l-movie .video_box .youtube iframe{
				position: absolute;
				top: 0;
				right: 0;
				width: 100%;
				height: 100%;
			}

.l-movie .video_box figure{
	margin-bottom: 20px;
	margin-left: 20px;
	max-width: 280px;
	width: 30%;
	padding: 6% 0 0;
}

/* PRESENT */
.l-present{
	padding: 100px 0;
}

.l-present h2{
	margin-bottom: 70px;
}

.present_wrap{
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
	.present_wrap .presentA,
	.present_wrap .present_box_wrap{
		width: 48.5%;
	}
	.present_wrap .present_box{
		background: #eff4f7;
		padding: 25px 20px;
		position: relative;
	}
.present_wrap .present_box::before{
	content: "";
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 98px;
	height: 100px;
	display: block;
	position: absolute;
	top: -8px;
	left: -8px;
}
.present_wrap .presentA::before{
	background-image: url("/-/media/cojp/product/labelwriter/special/cube/kojimajick/newlife/icon-prize-a");
}
.present_wrap .presentB::before{
	background-image: url("/-/media/cojp/product/labelwriter/special/cube/kojimajick/newlife/icon-prize-b");
}
.present_wrap .presentC::before{
	background-image: url("/-/media/cojp/product/labelwriter/special/cube/kojimajick/newlife/icon-prize-c");
}
		.present_wrap .present_box figure{
			max-width: 400px;
			margin: 0 auto 25px;
			position: relative;
		}
			.present_box_wrap .present_box figure img{
				border-radius: 5px;
				overflow: hidden;
			}
			.present_wrap .present_box figure figcaption{
				width: 90px;
				height: 90px;
				background: #0d2ea1;
				border-radius: 50%;
				color: #fff;
				font-size: 24px;
				font-weight: 700;
				line-height: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: absolute;
			}
				.present_wrap .present_box figure figcaption span{
					font-size: 36px;
				}

				.present_wrap .presentA figure figcaption{
					right: -7px;
					bottom: -6px;
				}
				.present_wrap .presentB figure figcaption{
					right: -70px;
					bottom: 0;
				}
				.present_wrap .presentC figure{
					margin-bottom: 35px;
				}
				.present_wrap .presentC figure figcaption{
					right: -25px;
					bottom: -60px;
				}

	.present_wrap .presentA{
		padding-top: 80px;
	}
		.present_wrap .presentA .detail{
			padding: 15px;
		}
	.present_box_wrap .presentB{
		margin-bottom: 5%;
	}
		.present_box_wrap .flex{
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
		}
			.present_box_wrap .presentB .flex figure{
				margin-right: 15px;
			}

			.present_box_wrap .presentC .flex figure{
				max-width: 175px;
				width: 40%;
				margin: 0 25px 0 0;
			}
			.present_box_wrap .presentB .flex .detail{
				width: 40%;
			}
			.present_box_wrap .presentC .flex .detail{
				width: 53%;
			}
				.presentB .flex .detail a{
					color: #2d69b3;
					text-decoration: underline;
				}
					.presentB .flex .detail a:hover{
						text-decoration: none;
					}

.present_box .ttlBox p{
	text-align: center;
}
.present_box.presentA .ttlBox p{
	padding-left: 2%;
	text-align: center;
}
.present_box .ttlBox h3{
	line-height: 1.6;
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 20px;
	text-align: center;
}

.apply_btn{
	display: block;
	max-width: 500px;
	width: 100%;
	margin: 70px auto 40px;
	padding: 7px 2px;
	background: #1e1b03;
	border-radius: 5px;
	position: relative;
}
.apply_btn::before,
.apply_btn::after{
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	display: block;
	position: absolute;
}
.apply_btn::before{
	background-image: url("/-/media/cojp/product/labelwriter/special/cube/kojimajick/newlife/icon-kiran");
	width: 43px;
	height: 54px;
	top: -10px;
	left: -60px;
}
.apply_btn::after{
	background-image: url("/-/media/cojp/product/labelwriter/special/cube/kojimajick/newlife/icon-go");
	width: 85px;
	height: 39px;
	top: -36px;
	right: -75px;
}
	.apply_btn span{
		border-top: dashed 2px #fff;
		border-bottom: dashed 2px #fff;
		display: block;
		width: 100%;
		color: #fff;
		text-align: center;
		font-size: 20px;
		font-weight: 700;
		padding: 10px 0 8px;
		position: relative;
	}
		.apply_btn span::before{
			content: "";
			background: url("/-/media/cojp/product/labelwriter/special/cube/kojimajick/newlife/icon-arrow") no-repeat center;
			background-size: contain;
			width: 15px;
			height: 19px;
			position: absolute;
			right: 20px;
			top: 50%;
			transform: translateY(-50%);
		}

.present_intro .txt_box{
	max-width: 540px;
	width: 100%;
	margin: 0 auto;
	font-size: 18px;
}
.present_intro .txt_box dt{
	float: left;
}
.present_intro .txt_box dd::after{
	display: block;
	content: "";
	clear: both;
}
#sns_area {
	margin: 20px auto 50px;
}

.present_intro .scroll_box{
	max-height: 300px;
	overflow: auto;
	border: solid 1px #bfbfbf;
}
.present_intro .scroll_box .inner{
	padding: 20px 10px;
}

.present_intro .scroll_box .inner p strong{
	font-weight: 700;
}


/*ipad*/
@media screen and (max-width: 900px){
	.present_wrap .present_box figure figcaption{
		font-size: 18px;
		width: 72px;
		height: 72px;
	}
	.present_wrap .presentC figure figcaption {
		right: -20px;
		bottom: -30px;
	}
		.present_wrap .present_box figure figcaption span{
			font-size: 28px;
		}
	.present_wrap .present_box::before{
		width: 70px;
		height: 72px;
		top: -5px;
		left: -6px;
	}
}

/*スマホ*/
@media screen and (max-width: 767px) {
	.l-about{
		padding-top: 0;
	}
	.l-about .contents_area{
		padding: 30px 0 60px;
	}
	.l-about h2 img{
		max-width: 309px;
		width: 65%;
	}
	.l-movie{
		padding-bottom: 30px;
	}
	.l-movie h2{
		margin: -62px 0 40px;
	}
	.l-movie h2 img{
		max-width: 202px;
		width: 46%;
	}
	.l-movie .video_box{
		display: block;
		text-align: center;
	}
	.l-movie .video_box .youtube{
		margin: 0 auto;
		width: 100%;
	}
	.l-movie .video_box figure{
		display: none;
	}
	
	.l-present{
		padding: 30px 0;
	}
	.l-present h2 {
		margin-bottom: 50px;
	}
	.l-present h2 img{
		width: 88%;
	}
	.present_wrap{
		display: block;
	}
	.present_wrap .presentA,
	.present_wrap .present_box_wrap{
		width: 100%;
	}
	.present_box_wrap .presentB .flex figure{
		max-width: 229px;
		width: 58%;
	}
	.present_box_wrap .presentB .flex .detail{
		width: 66%;
	}
	
	.present_wrap .present_box{
		margin-bottom: 20px;
	}
	.present_wrap .presentA{
		padding-top: 25px;
	}
	.present_box .ttlBox p{
		text-align: center;
	}
	.present_wrap .present_box figure{
		margin: 0 auto 15px;
	}
	.present_wrap .presentA .detail{
		padding: 0;
	}
	.present_box_wrap .presentB .flex figure{
		margin: 0 15px 0 0;
	}
	.apply_btn{
		margin: 60px auto 30px;
		width: 83%;
	}
	.apply_btn::before{
		top: auto;
		bottom: -20px;
		left: -30px;
		width: 30px;
	}
	.apply_btn::after{
		top: -37px;
		right: -40px;
		width: 65px;
	}
	.apply_btn span::before{
		right: 10px;
		width: 10px;
	}
	.present_intro .txt_box{
		font-size: 16px;
	}
	#sns_area{
		margin: 20px auto 30px;
	}
}
@media screen and (max-width: 640px) {
	.sp_style {
		display: block !important;
	}
	.sp_img{
		display: block;
	}
	.pc_img{
		display: none;
	}
}
@media screen and (max-width: 500px) {
	.pc_style,.tablet_style{
		display: none;
	}
	.present_box .ttlBox{
		padding-left: 55px;
	}
	.present_box .ttlBox p,
	.present_box .ttlBox h3{
		text-align: left;
	}
	.present_box.presentA .ttlBox p{
		text-align: left;
	}
	.present_box .ttlBox h3{
		margin-bottom: 10px;
	}
	.present_box_wrap .presentC .flex{
		display: block;
	}
	.present_box_wrap .presentC .flex figure{
		margin: 0 auto 15px;
		width: 100%;
	}
	.present_box_wrap .presentC .flex .detail{
		width: 100%;
	}
	.present_wrap .present_box figure figcaption{
		font-size: 12px;
		width: 50px;
		height: 50px;
	}
	.present_wrap .presentB figure figcaption{
		right: -20px;
		bottom: -10px;
	}
	.present_wrap .presentC figure figcaption{
		right: -10px;
		bottom: -10px;
	}
	.present_wrap .present_box figure figcaption span{
		font-size: 20px;
	}
	.present_box_wrap .presentB .flex .detail {
		width: 66%;
	}
	.apply_btn span{
		font-size: 18px;
	}
}