@charset "utf-8";

/* パーツ・タイトル */
img{	vertical-align: bottom; width: 100%; height: auto; border: none;}
a img{	border: none;}
body{	background-color: #fff; font-family: "Noto Sans JP", "ArialMT", sans-serif; color: #333; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.5;}
body h2.ttl2{	margin: 0 auto 32px; width: 292px;}
ol,ul{	list-style: none; counter-reset: number;}
.btn_area{	display: flex; justify-content: space-between; max-width: 1080px; margin: 0 auto; gap: 1%;}
.btn_area a img{	transition: all .5s;}
.btn_area a:hover img{	opacity: 0.8;}

/* メインビジュアル */
.main{	background: url(/campaign/new-tvcm-campaign/img/main_bg.webp) repeat left top, #C0030E; border-bottom: 10px solid transparent; border-image: linear-gradient(90deg,#F4C41E 0%,#B17B32 10%,#DCB340 28%,#FBF9D3 48%,#EBBC45 65%,#A46F3B 84%,#C48A31 100%) 1 / 0 0 10px; background-size: contain;}
.mv_inner{	position: relative; max-width: 1197px; width: 100%; margin: 0 auto;}
.logo{	position: absolute; top: 5%; left: 4%; width: 100%; max-width: 220px;}
.logo img{	text-align: left;}

/* プレゼント内容 */
.present{	background: url(/campaign/new-tvcm-campaign/img/pres_bg_btm.webp) no-repeat left bottom,url(/campaign/new-tvcm-campaign/img/pres_bg.gif) repeat left top; padding: 96px 0 13%; background-size: contain, auto; position: relative; box-shadow: inset 0px 18px 15px 0px rgba(17,17,26,0.5);}
.present h2{	margin: 0 auto 40px; max-width: 1042px; width: 100%; filter: drop-shadow(0px 4px 5px rgba(0,0,0,0.6));}
.present ul{	display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; max-width: 1080px; width: 100%; margin-bottom: 48px; gap: 24px 4%;}
.present li{	width: calc(96% / 2);}
.present dl{	margin: 0 auto; text-align: center; color: #fff; text-align: left; max-width: 960px;}
.present dt{	margin-bottom: 8px; font-weight: bold;}
.present dd{	margin-bottom: 8px;}

/* 応募方法 */
.app_requirements{	max-width: 1080px; width: 100%; margin: 0 auto 64px; padding-top: 24px;}
.app_requirements h2.ttl2{	margin-bottom: 0;}
.app_req_inner{	margin-bottom: 40px;}

/* 応募手順 */
.flow{	background: url(/campaign/new-tvcm-campaign/img/flow_bg_top.webp) no-repeat left top,#efefef; background-size: contain, auto; padding: 15% 0 80px;}
.items_to_prepare{	margin: 0 auto 32px; max-width: 778px;}
.flow ul{	max-width: 1080px; margin: 0 auto 40px; display: flex; justify-content: space-between; flex-wrap: nowrap; gap: 0 1%;}
.flow dl{	max-width: 1080px; margin: 0 auto; background: #fff; border-radius: 10px; padding: 32px 2%; box-sizing: border-box; display: flex; align-items: center; margin-bottom: 64px;}
.flow dt{	font-weight: bold; color: #a70714; font-size: 16px; width: 25%;}
.flow dd{	font-weight: bold; font-size: 14px; width: 70%; border-left: 2px solid #efefef; padding-left: 2%; margin-left: 2%;}
.flow dd li{	line-height: 1.7; text-indent: -1em; padding-left: 1em; margin-bottom: 4px;}
.flow  .support_id_steps{	margin-bottom: 0; display: block; text-align: left;}

/* 応募要項 */
.campaign_app_guide{	max-width: 960px; padding: 80px 0 0; margin: 0 auto 80px;}
.campaign_app_guide h3{	font-size: 26px; font-weight: bold; margin-bottom: 24px;}
.campaign_app_guide .guide_summ{	border-top: 3px solid #b0b0b0; border-bottom: 3px solid #b0b0b0; padding: 32px 1em; text-align: left; box-sizing: border-box;}
.guide_summ h4{	font-size: 20px; font-weight: bold; margin-bottom: 8px;}
.guide_summ ul,.guide_summ p{	padding-left: 1em; margin-bottom: 24px;}
.guide_summ li{	line-height: 1.7; text-indent: -1em; padding-left: 1em;}

/* 注意事項 */
.campaign_caution{	max-width: 1080px; margin: 0 auto 120px;}
.campaign_caution .notes{	text-align: left; margin: 0 auto 72px; width: 960px;}
.campaign_caution .notes li{	line-height: 1.7; text-indent: -1em; padding-left: 1em; margin-bottom: 8px;}
.campaign_caution .notes li a{	color: #0172bd; text-decoration: underline;}
.contact{	width: 740px; padding: 24px 0; border-top: 3px solid #b0b0b0; border-bottom: 3px solid #b0b0b0; margin: 0 auto 80px; display: flex; justify-content: center}
.contact p{	font-size: 20px; font-weight: bold; margin-right: 24px;}
.contact span{	display: block; font-size: 18px;}
.contact address{	font-size: 50px; font-weight: bold; background: url(/campaign/new-tvcm-campaign/img/call_ico.svg) no-repeat left center; background-size: 40px; line-height: 1; padding-left: 50px; color: #8C101A; font-style: normal;}

/* youtube */
.youtube_pr{	background: #930515;}
.youtube_pr_inner{	max-width: 1080px; margin: 0 auto; padding: 24px 0 0; display: flex; justify-content: space-between; align-items: flex-start;}
.ytb_left{	max-width: 563px; padding-top: 20px;}
.ytb_left a{	max-width: 477px; display: block; margin: 4px auto 0;}
.youtube_pr a img{	transition: all .5s;}
.youtube_pr a:hover img{	transition: all .5s; opacity: 0.7;}
.cm_character{	max-width: 489px;}
.youtube_pr .message{	margin: 0 auto; padding: 16px 0; color: #fff; font-size: 1.6em; text-align: center; font-weight: bold; background: #6e010e;}

/* footer */
footer{	padding: 40px 0; text-align: center;}
footer small{	margin: 0; font-size: 14px; color: #666;}

/* SPparts */
.sp_parts{	display: none;}

/* SP */
@media screen and (max-width: 767px){

	/* SP 基本設定 */
	.sp_parts{	display: block;}
	.pc_parts{	display: none;}
	body{	width: 100%; font-family: "Noto Sans JP","Hiragino Kaku Gothic ProN", "ArialMT", sans-serif; color:#333; font-size:14px;}
	h2,h3{	font-size:100%;}
	p{	margin:0;}

	/* パーツ・タイトル */
	body h2.ttl2{	margin: 0 auto 16px; width: 50%; max-width: 292px; height: auto;}
	.btn_area{	display: block; width: 100%; margin: 0 auto;}
	.btn_area li + li{	margin-top: 16px;}

	/* mv */
	.main{	border-width: 5px; border-bottom: none;}
	.mv_inner{	width: 100%; position: relative; max-width: inherit;}
	.logo{	position: relative; margin: 0 auto 2%; left: inherit; top: inherit; width: 50%; max-width: 140px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 3%;}

	/* プレゼント内容 */
	.present{	width: 92%; padding: 32px 4% 15%; box-shadow: inset 0 20px 20px -10px rgba(17,17,26,0.5);}
	.present h2{	width: 100%; margin-bottom: 16px; filter: drop-shadow(0px 3px 0px rgba(0,0,0,0.2));}
	.present ul{	display: block; width: 96%; margin-bottom: 24px; padding: 0;}
	.present li{	width: 100%; margin-bottom: 16px;}
	.present dl{	width: 94%;}
	.present dt{	text-indent: -.5em;}
	.present dd{	text-indent: -1em; padding-left: 1em;}

	/* 応募方法 */
	.app_requirements{	width: 94%; margin: 0 auto 40px;}
	.app_requirements h2.ttl2{	margin-bottom: 8px;}
	.app_req_inner{	margin-bottom: 24px;}

	/* 応募手順 */
	.flow{	padding: 20% 3% 24px;}
	.items_to_prepare{	margin: 0 auto 24px;}
	.flow ul{	width: 100%; margin: 0 auto 24px; display:block;}
	.flow li + li{	margin-top: 16px;}
	.flow dl{	width: 100%; display: block; padding: 24px 3%; box-sizing: border-box; margin-bottom: 32px;}
	.flow dt{	width: 100%; text-align: center; margin-bottom: 16px;}
	.flow dd{	font-size: 14px; width: 100%; border: none; padding-left: 0; margin-left: 0;}
	.flow dd li{	text-indent: -1em; padding-left: 1em; margin-bottom: 10px;}
	.flow dd li + li{	margin-top: 0;}

	/* 応募要項 */
	.campaign_app_guide{width: 94%; padding: 56px 0 0;}
	.campaign_app_guide h3{	font-size: 18px;}
	.campaign_app_guide .guide_summ{	padding: 24px 0 0; width: 98%; margin: 0 auto}
	.guide_summ h4{	font-size: 16px;}
	.guide_summ ul{	padding-left: 0;}
	.guide_summ li, .guide_summ p{	padding-left: 1em; text-indent: -1em;}

	/* 注意事項 */
	.campaign_caution{	width: 90%; margin: 0 auto 40px;}
	.campaign_caution .notes{	width: 100%; margin-bottom: 32px}
	.contact{	width: 100%; display: block; padding: 16px 0; margin-bottom: 32px;}
	.contact p{	margin: 0 0 8px; font-size: 18px;} 
	.contact span{	font-size: 16px;}
	.contact address{	font-size: 36px; background-size: 28px; padding-left: 38px; line-height: 1; display: inline-block;}

	/* youtube */
	.youtube_pr_inner{	width: 97%; padding: 16px 0 0 2%;}
	.ytb_left{	width: 55%; padding-top: 2%;}
	.cm_character{	width: 45%;}
	.youtube_pr .message{font-size: 16px; padding: 8px 0;}

	/* footer */
	footer{	padding: 20px 5%; width: 90%; background: none;}
}

@media screen and (min-width: 481px) and (max-width: 767px){
	.logo{	top: 4%;}
	.present ul{	display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; gap: 16px 0;}
	.present li{	width: calc(97% / 2); margin-bottom: 0;}
}
@media screen and (min-width: 641px) and (max-width: 767px){
	.logo{	max-width: 200px; top: 4%;}
}

.mb05{ margin-bottom: 5px !important;}
.mb10{ margin-bottom: 10px !important;}
.mb15{ margin-bottom: 15px !important;}
.mb20{ margin-bottom: 20px !important;}
.mb25{ margin-bottom: 25px !important;}
.mb30{ margin-bottom: 30px !important;}
.mb40{ margin-bottom: 40px !important;}

.mr0{ margin-right: 0 !important;}
.mr10{ margin-right: 10px !important;}