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

.bgWH {background-color: #FFF;}
.bgRD {background-color: #E4002B;}
.bgOR {background-color: #FF8216;}
.bgGR {background-color: #00874B;}
.txtWH {color: #FFF;}
.txtRD {color: #E4002B;}
.txtOR {color: #FF8216;}
.txtGR {color: #00874B;}
.txtYL {color: #FAE921;}

main {position: relative;}
main::after {position: absolute; z-index: -1; pointer-events: none; content: ''; max-width: 1380px; height: 100%; margin: 0 auto; top: 0; left: 0; right: 0; background-image: url("../img/bg_side.png"),url("../img/bg_side.png"); background-repeat: repeat-y,repeat-y; background-position: right top,left top;}
.container {width: 100%; max-width: 1232px; padding-left: 0; padding-right: 0;}
.containers {width: calc(100% - 40px); max-width: 888px; padding-left: 0; padding-right: 0;}
.mlr,.container,.containers {margin-left: auto; margin-right: auto;}
.mlr20,.col1,.col2,.col3,.col4,.col5,.col6 {margin-left: 20px; margin-right: 20px;}
.col1 {width: calc(16.6666% - 40px);}
.col2 {width: calc(33.3333% - 40px);}
.col3 {width: calc(50% - 40px);}
.col4 {width: calc(66.6666% - 40px);}
.col5 {width: calc(83.3333% - 40px);}
.col6 {width: calc(100% - 40px);}
.full {width: 100%;}
.half {width: 50%;}
.spOnly {display: none;}
@media screen and (max-width: 1392px) {
	main::after {background-position: right 10px top,left 10px top;}
}
@media screen and (max-width: 896px) {
	main::after {background-image: url("../img/bg_side_sp.png"),url("../img/bg_side_sp.png");}
  .containers {width: calc(100% - 30px);}
  .mlr20,.col1,.col2,.col3,.col4,.col5,.col6 {margin-left: 15px; margin-right: 15px;}
  .col1 {width: calc(16.6666% - 30px);}
  .col2 {width: calc(33.3333% - 30px);}
  .col3 {width: calc(50% - 30px);}
  .col4 {width: calc(66.6666% - 30px);}
  .col5 {width: calc(83.3333% - 30px);}
  .col6 {width: calc(100% - 30px);}
	.pcOnly {display: none;}
	.spOnly {display: block;}
}
@media screen and (max-width: 568px) {
  .col1 {width: calc(33.3333% - 30px);}
  .col2,.col3,.col4,.col5,.col6 {width: calc(100% - 30px);}
}

ul.dot {list-style: disc; margin-left: 1.5em;}
ul.num {list-style: decimal; margin-left: 1.5em;}

picture {display: block;}
.brSp {display: none;}
.z1 {position: relative; z-index: 1;}
.z2 {position: relative; z-index: 2;}
.btnCmn {max-width: 615px; width: 100%; margin-left: auto; margin-right: auto;}
.btnCmn.end {padding: 20px; background: #666; border: 5px solid #222; box-shadow: 5px 5px 5px rgba(0,0,0,.3); position: relative;}
.btnCmn a {display: block; width: 100%; padding: 14px; background: #E4002B; border: 5px solid #FFF; box-shadow: 5px 5px 5px rgba(0,0,0,.3); position: relative;}
.btnCmn a span,.btnCmn.end span {width: 426px; display: block; margin: 0 auto;}
.btnCmn a span img,.btnCmn.end span img {width: 100%;}
.btnCmn.end span img {opacity: .5;}
.btnCmn a::before,.btnCmn.end::before {position: absolute; content: ''; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #fff; border-width: 13px 0px 13px 22px; top: 50%; transform: translateY(-50%); right: 20px;}
.btnCmn.end::before {opacity: .5;}
.btnCmn a:hover {transform: scale(1.1);}
.btnCmn a.is-disabled {pointer-events: none; cursor: default; transition: none; background: #666; border-color: #222;}
.btnCmn a.is-disabled span img,.btnCmn a.is-disabled::before {opacity: .5;}
/* PC表示では全ての応募ボタンを#top03のボタンと同じサイズに揃える */
@media screen and (min-width: 897px) {
	.btnCmn:not(.end) {width: 36.6vw;}
	.btnCmn a {padding: 2.28%;}
	.btnCmn a span {width: 73.8%;}
}
.mkrYL span {display: inline; z-index: 1; position: relative; background: linear-gradient(transparent 70%, #FAE921 0%);}
@media screen and (max-width: 896px) {
	.btnCmn {max-width: 360px;}
	.btnCmn a {border: 3px solid #FFF; padding: 10px;}
	.btnCmn.end {border: 3px solid #222; padding: 10px;}
	.btnCmn a span,.btnCmn.end span {width: 186px;}
	.btnCmn a::before,.btnCmn.end::before {border-width: 7px 0px 7px 12px; right: 10px;}
}

/* --deco：飾りSVG（bg_left/bg_right）の表示幅。狭い画面では縮小し、SVGの長さが足りない場合に備えて縦線の位置に線を敷く */
:root {--deco: min(205px, calc(53px + 10.7vw));}
.bgLine {position: absolute; z-index: 1; pointer-events: none; top: calc(61.6px + min(45px, (min(1458px, 88vw) - var(--deco) * 2 - 50px) * .04626) - var(--deco) * .2032); bottom: 0; left: 0; right: 0; margin: 0 auto; width: 88%; max-width: 1458px; background-image: url(../img/bg_left.svg),url(../img/bg_right.svg),linear-gradient(#ef8200,#ef8200),linear-gradient(#ef8200,#ef8200); background-repeat: no-repeat; background-position: left top,right top,left calc(var(--deco) * .2032 - 1px) top calc(var(--deco) * .254),right calc(var(--deco) * .2032 - 1px) top calc(var(--deco) * .254); background-size: var(--deco) auto,var(--deco) auto,2px 100%,2px 100%;}
@media screen and (max-width: 896px) {
	.bgLine {width: 100%; top: calc(26.6px + (100vw - var(--deco) * 2 - 50px) * .04626 - var(--deco) * .2032);}
}

/* タイトルは上部の左右の飾りの間に収める */
.head h1 {position: relative; z-index: 1; max-width: 973px; width: calc(min(1458px, 88%) - var(--deco) * 2 - 50px); padding: 65px 0 45px; margin: 0 auto; font-size: 0;}
.head h1 img {width: 100%;}
header .makerLogo {max-width: 847px; width: calc((min(1458px, 88%) - var(--deco) * 2 - 50px) * .8705); margin: 0 auto; display: flex; align-items: flex-start;}
header .makerLogo > * {display: block; font-size: 0;}
header .makerLogo .logoKewpie {width: 46.1745%;}
header .makerLogo .logoCross {width: 13.557%;}
header .makerLogo .logoOep {width: 40.2685%;}
header .makerLogo img {width: 100%;}
header .campaignContents {max-width: 1302px; width: 77.5%; margin: 23px auto 0;}
@media screen and (max-width: 896px) {
	.head h1 {width: calc(100% - var(--deco) * 2 - 50px); padding: 30px 0;}
	header .makerLogo {width: calc((100% - var(--deco) * 2 - 50px) * .8705);}
	header .campaignContents {width: 85%; margin-top: 15px;}
}

/* 飾り線の内側に収めるコンテンツ幅 */
#top04 .mainImg,#top06,#top07 {width: calc(88% - 180px);}

#top02 .mainImg {max-width: 1597px; width: 95%; margin: max(-18px, -1.07vw) auto 0;}
#top03 {margin-top: max(-200px, -11.9vw); margin-bottom: 25px;}
#top03 .mainImg {max-width: 1577px; width: 93.7%; margin: 0 auto;}
#top03 .btnCmn {position: absolute; left: 0; right: 0; bottom: 11.8%; width: 36.6vw;}
#top03 .btnCmn a {padding: 2.28%;}
#top03 .btnCmn a span {width: 73.8%;}
#top04 {background: #FFF; padding: 35px 0 60px;}
#top04 .mainImg {max-width: 1258px; margin: 0 auto; padding: 0 8px;}
#top04 .btnCmn a {z-index: 1;}
#top04 .mainImg li {position: relative; transform: translateX(-1.13%);}
#top04 .btnDetail {position: absolute; z-index: 1; display: block;}
#top04 .btnDetail img {width: 100%;}
#top04 .btnDetail:hover {transform: scale(1.1);}
#top04 .mainImg li:first-child .btnDetail {left: 80.408%; top: 72.735%; width: 14.224%;}
#top04 .mainImg li:last-child .btnDetail {left: 80.418%; top: 72.023%; width: 14.270%;}
#top04 .mainImg li:first-child {margin-bottom: 44px;}
#top04 .mainImg li:last-child {margin-bottom: 40px;}
#top05 {background: #1ea964; padding: 45px 0 22px;}
#top05 .mainImg {max-width: 1090px; width: calc((88% - 180px) * .866); margin: 0 auto; padding-right: 16px;}
#top05 .card {max-width: 1098px; width: calc(88% - 180px); margin: 28px auto 0;}
#top05 .card li {width: calc(50% - 38px); margin-bottom: 30px; box-shadow: 4px 4px 4px rgba(0,0,0,.5);}
#top06 {margin: 62px auto 57px; background: rgba(255,255,255,.6); max-width: 1200px; padding: 46px 90px 103px;}
#top06 h2 {font-size: clamp(22px, 2.98vw, 50px);}
#top06 .makerLogo {max-width: 891px; width: 100%; margin: 50px auto 66px; padding-right: 5.3%;}
#top06 .ttlLine {font-size: clamp(20px, 2.74vw, 46px); margin-left: -17px; color: #e4002b; margin-bottom: 5px; display: flex; align-items: center;}
#top06 .ttlLine::after {content: ''; flex: 1; background: #e4002b; height: 3px;}
#top06 .txt45 {font-size: clamp(16px, 2.7vw, 45px);}
#top06 .campItem {width: 93%; margin: -5.2% auto 26px; padding-right: 4.1%;}
#top06 .txtArea:last-child .campItem {width: 98.5%; margin: 13px auto 26px; padding-right: 15px;}
#top07 {margin: 0 auto 67px; max-width: 1200px;}
#top07 .comment {background: #d52d00; color: #FFF; font-size: clamp(16px, 2.62vw, 44px); text-align: center; padding: 10px; margin-bottom: 60px; font-weight: 600;}
#top07 .comment p {line-height: 1.65;}
#top07 .flow {background: rgba(255,255,255,.6); padding: 20px 40px 53px;}
.flowStep {margin: 17px auto 5px;}
.flowStep li {width: calc(100%/3 - 25px); position: relative;}
.flowNum {width: 80px; margin: 0 auto; position: absolute; z-index: 1; top: -40px; left: 0; right: 0;}
.flowStep li {border: 3px solid #e4002b; border-radius: 10px; margin-top: 40px; background: #FFF; padding: 50px 10px 10px;}
.txt17 {font-size: 17px; line-height: 1.5;}
.txt35 {font-size: clamp(16px, 2.08vw, 35px);}
.flowStep li:first-child .flowImg {margin: 20px 10px;}
.flowStep li:not(:first-child) .flowImg {margin: 20px auto; max-width: 65px;}
.flowArrow {width: 22px; margin: -10px auto 0;}
.notice {margin-top: 70px;}
.noticeWrap {position: relative; border: 4px solid #e4002b; border-right-width: 34px; padding: 0; background: #FFF; margin-top: 15px;}
/* 標準のスクロールバーは非表示にし、右の赤帯内につまみを表示（index.html内のスクリプトで制御） */
.notice .inner {height: 542px; padding: 30px 25px; overflow-y: auto; scrollbar-width: none;}
.notice .inner::-webkit-scrollbar {display: none;}
.noticeBar {position: absolute; top: 8px; bottom: 8px; right: -34px; width: 34px; cursor: pointer;}
.noticeBar span {display: block; width: 14px; margin: 0 auto; border-radius: 7px; background: #FFF; cursor: grab; touch-action: none;}
.noticeBar span:active {cursor: grabbing;}
.notice .inner dt {color: #e4002b; font-weight: 700;}
.notice .inner dd:not(:last-child) {margin-bottom: 30px;}
@media screen and (max-width: 1392px) {
	#top06 {padding: 46px 5% 80px;}
	#top07 .comment {margin-bottom: 40px;}
	#top07 .flow {padding: 20px 30px 45px;}
	.flowStep li {width: calc(100%/3 - 15px);}
	.flowStep h3.txt24 {font-size: clamp(16px, 1.5vw, 24px);}
	.flowStep .txt17 {font-size: clamp(13px, 1.2vw, 17px);}
	.flowStep .txt17 br {display: none;}
}
@media screen and (max-width: 896px) {
	#top04 .mainImg,#top05 .card,#top06,#top07 {width: calc(100% - var(--deco) * .4064 - 40px);}
	#top05 .mainImg {width: calc((100% - var(--deco) * .4064 - 40px) * .866);}
	#top04 {padding: 30px 0 40px;}
	#top04 .mainImg {padding: 0;}
	#top04 .mainImg li:first-child {margin-bottom: 30px;}
	#top04 .mainImg li:last-child {margin-bottom: 30px;}
	#top05 {padding: 30px 0 10px;}
	#top05 .mainImg {padding-right: 0;}
	#top05 .card {margin-top: 20px;}
	#top05 .card li {width: calc(50% - 10px); margin-bottom: 20px;}
	#top06 {margin: 40px auto; padding: 30px 5% 50px;}
	#top06 .makerLogo {margin: 30px auto 40px;}
	#top06 .ttlLine {margin-left: 0;}
	#top06 .txtArea:last-child .campItem {padding-right: 0;}
	#top06 .mb60 {margin-bottom: 30px;}
	#top07 {margin-bottom: 40px;}
	#top07 .comment {margin-bottom: 30px;}
	#top07 .flow {padding: 20px 20px 35px;}
	.flowStep {max-width: 400px; margin: 10px auto 20px;}
	.flowStep li {width: 100%; margin-top: 50px;}
	.flowStep li:first-child .flowImg {max-width: 260px; margin: 20px auto;}
	.flowStep h3.txt24 {font-size: 20px;}
	.flowStep .txt17 {font-size: 15px;}
	.flowStep .txt17 br {display: inline;}
	.notice {margin-top: 40px;}
	.noticeWrap {border-width: 3px; border-right-width: 26px;}
	.notice .inner {height: 440px; padding: 20px 15px;}
	.noticeBar {top: 6px; bottom: 6px; right: -26px; width: 26px;}
	.noticeBar span {width: 10px; border-radius: 5px;}
	.notice .inner.txt18 {font-size: 14px;}
	.notice .inner dd:not(:last-child) {margin-bottom: 20px;}
}


footer {background: #FFF; padding: 50px 0; position: relative; z-index: 2;}
footer h2 {margin-bottom: 25px;}
footer dt {font-weight: 600;}
footer dt,footer dd {font-size: 21px; line-height: 1.6;}
@media screen and (max-width: 896px) {
	footer {padding: 35px 0;}
	footer h2 {font-size: 18px;}
	footer .txt18 {font-size: 15px;}
	footer dt {font-size: 13px;}
	footer dd {font-size: 15px;}
}

/* SP（568px以下）***********************/
@media screen and (max-width: 568px) {
	/* 飾り線：上部はSVG、縦方向は星のタイル（SVGと同じ58単位周期）と線を繰り返す */
	:root {--deco: 11.57vw;}
	.bgLine {width: 88%; top: 4.41vw; background-image: url(../img/bg_left.svg),url(../img/bg_right.svg),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 58'%3E%3Cg fill='%232c893a'%3E%3Cpath d='M14.87 12.6l2-12.04 2 12.04 2.83 2.83 12.05 2-12.05 2-2.83 2.83-2 12.04-2-12.04-2.82-2.83-12.05-2 12.05-2 2.82-2.83z'/%3E%3Ccircle cx='16.78' cy='46.21' r='2.95'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 58'%3E%3Cg fill='%232c893a' transform='matrix(-1 0 0 1 44 0)'%3E%3Cpath d='M14.87 12.6l2-12.04 2 12.04 2.83 2.83 12.05 2-12.05 2-2.83 2.83-2 12.04-2-12.04-2.82-2.83-12.05-2 12.05-2 2.82-2.83z'/%3E%3Ccircle cx='16.78' cy='46.21' r='2.95'/%3E%3C/g%3E%3C/svg%3E"),linear-gradient(#ef8200,#ef8200),linear-gradient(#ef8200,#ef8200); background-repeat: no-repeat,no-repeat,repeat-y,repeat-y,no-repeat,no-repeat; background-position: left top,right top,left top,right top,left calc(var(--deco) * .2032 - .5px) top calc(var(--deco) * .254),right calc(var(--deco) * .2032 - .5px) top calc(var(--deco) * .254); background-size: var(--deco) auto,var(--deco) auto,calc(var(--deco) * .21245) calc(var(--deco) * .28005),calc(var(--deco) * .21245) calc(var(--deco) * .28005),1px 100%,1px 100%;}
	.brSp {display: inline;}

	.btnCmn {max-width: none; width: 69.88vw;}
	.btnCmn a {border-width: 2px; padding: 1.52vw 0; box-shadow: 3px 3px 3px rgba(0,0,0,.3);}
	.btnCmn a span {width: 46.75vw; position: relative; left: -2.52vw;}
	.btnCmn a::before {border-width: 1.8vw 0 1.8vw 3.4vw; right: 2.65vw;}

	.head h1 {width: 58.07vw; padding: 3.37vw 0;}
	header .makerLogo {width: 62.05vw;}
	header .campaignContents {width: 81.93vw; margin-top: 5.3vw;}

	#top02 .mainImg {width: 96.39vw; margin-top: 3.2vw;}
	#top03 {margin: -10.58vw 0 0; padding-bottom: 6.75vw;}
	#top03 .mainImg {width: 96.39vw;}
	#top03 .btnCmn {position: static; width: 69.88vw; margin-top: 1.5vw;}
	#top03 .btnCmn a {padding: 1.52vw 0;}
	#top03 .btnCmn a span {width: 46.75vw;}

	#top04 {padding: 6.02vw 0 6.5vw;}
	#top04 .mainImg {width: 73.73vw; margin: 0 auto;}
	#top04 .mainImg li {transform: translateX(-2.18%);}
	#top04 .mainImg li:first-child {margin-bottom: 4.65vw;}
	#top04 .mainImg li:last-child {margin-bottom: 4.17vw;}
	#top04 .mainImg li:first-child .btnDetail {left: 64.924%; top: 65.877%; width: 28.867%;}
	#top04 .mainImg li:last-child .btnDetail {left: 64.924%; top: 62.38%; width: 28.976%;}

	#top05 {padding: 4.58vw 0 6.75vw;}
	#top05 .mainImg {width: 73.66vw; margin-left: 12.48vw;}
	#top05 .card {display: block; width: 69.88vw; margin-top: 3.71vw;}
	#top05 .card li {width: 100%; margin-bottom: 4.8vw; box-shadow: 3px 3px 3px rgba(0,0,0,.4);}
	#top05 .card li:last-child {margin-bottom: 0;}

	#top06 {width: 69.4vw; margin: 5.78vw auto 0; padding: 1.95vw 1.5vw 10vw;}
	#top06 h2 {font-size: 4.3vw;}
	#top06 .makerLogo {width: 55.42vw; margin: 2.9vw auto 4.6vw; padding-right: 0; position: relative; left: -1.33vw;}
	#top06 .ttlLine {font-size: 3vw; margin-left: -1vw; margin-bottom: 0;}
	#top06 .ttlLine::after {height: 1px;}
	#top06 .txt45 {font-size: 3vw;}
	#top06 .txt24 {font-size: 2.2vw; padding-right: 1.5vw;}
	#top06 .campItem {width: 59.76vw; margin: -3.6vw auto 1.3vw; padding-right: 0;}
	#top06 .txtArea:last-child .campItem {width: 61.69vw; margin: .25vw auto 1.8vw; padding-right: 0;}
	#top06 .mb60 {margin-bottom: 3.5vw;}

	#top07 {width: 100%; margin-bottom: 9.2vw;}
	#top07 .comment {font-size: 2.75vw; padding: 1.08vw 0; margin-bottom: 0;}
	#top07 .comment p {line-height: 1.58;}
	#top07 .flow {width: 69.4vw; margin: 0 auto; padding: 5.66vw 0 0;}
	#top07 .flow h2.txt50 {font-size: 4.3vw;}
	.flowStep {width: 56.14vw; margin: 0 auto 4.34vw;}
	.flowStep li {margin-top: 9.76vw; border-width: 2px; border-radius: 8px; padding: 6.75vw 2vw 5vw;}
	.flowStep li:first-child {margin-top: 8.3vw;}
	.flowStep li:last-child {padding-bottom: 1.7vw;}
	.flowNum {width: 10.12vw; top: -5.06vw;}
	.flowStep h3.txt24 {font-size: 3.86vw;}
	.flowStep .txt17 {font-size: 2.77vw; font-weight: 700; font-feature-settings: "palt";}
	.flowStep li:first-child .flowImg {max-width: 48.2vw; margin: 2.65vw auto 2.5vw;}
	.flowStep li:not(:first-child) .flowImg {max-width: 9.64vw; margin: 2.2vw auto 3vw;}
	.flowArrow {width: 3.13vw; margin: .6vw auto 0; line-height: 0;}
	.flowStep li p.txt24 {font-size: 3.86vw; line-height: 1.5;}
	.txt35 {font-size: 3.6vw; line-height: 1.73;}
	#top07 .mb10 {margin-bottom: 3.86vw;}
	.notice {margin-top: 12.8vw;}
	.notice h2.txt40 {font-size: 4vw;}
	.noticeWrap {position: relative; width: 68.67vw; margin: 2.9vw auto 0; padding: 0; border: 2px solid #e4002b; border-right-width: calc(4.34vw + 2px);}
	.notice .inner {height: 78.3vw; padding: 2.2vw 2.9vw 2.2vw 3.1vw; font-feature-settings: "palt";}
	.notice .inner.txt18 {font-size: 2.85vw;}
	.notice .inner dt,.notice .inner dd {line-height: 1.53;}
	.notice .inner dd:not(:last-child) {margin-bottom: 4.34vw;}
	.noticeBar {top: 1.2vw; bottom: 1.2vw; right: calc(-4.34vw - 2px); width: calc(4.34vw + 2px);}
	.noticeBar span {width: 1.93vw; border-radius: .97vw;}

	footer {padding: 13vw 0 24vw;}
	footer h2.txt40 {font-size: 4.1vw; margin-bottom: 4.2vw;}
	footer dt {font-size: 2.9vw; line-height: 1.67;}
	footer dd {font-size: 3.57vw; line-height: 1.49; font-feature-settings: "palt";}
	footer dd:not(:last-child) {margin-bottom: 1.8vw;}
	footer .note {font-size: 2.9vw;}
}