@charset "utf-8";
/* ==========

1. Reset
2. Common
3. Order
4. Section
	4-1. Header
	4-2. Section Campaign Flow
	4-3. Section Campaign Detail

========== */
/**
 1. Reset - uaplus.css version 0.3.0
 */
@layer{*,:after,:before{box-sizing:border-box}:focus-visible{outline-offset:3px}html{-webkit-text-size-adjust:none;text-size-adjust:none;font-size:62.5%;line-height:1.5;scrollbar-gutter:stable}body{font-size:1.6rem}h1{font-size:2em;margin-block:.67em}abbr[title]{cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media (forced-colors:active){mark{color:highlighttext;background-color:highlight}}audio,iframe,img,svg,video{max-block-size:100%;max-inline-size:100%}fieldset{min-inline-size:0}label:has(+input:not([type=radio],[type=checkbox]),select,textarea){display:block}textarea:not([rows]){min-block-size:6em}button,input,select,textarea{font-family:inherit;font-size:inherit}[type=search]{-webkit-appearance:textfield}@supports (-webkit-touch-callout:none){[type=search]{border:1px solid -apple-system-secondary-label;background-color:canvas}}input:where([type=tel],[type=url],[type=email],[type=number]):not(:placeholder-shown){direction:ltr}table{border-collapse:collapse;border:1px solid}th,td{border:1px solid;padding:.25em .5em;vertical-align:top}dialog::backdrop{background:oklch(0% 0 0/.3)}dialog,[popover],dialog::backdrop{opacity:0;transition:opacity .15s ease-out, display .15s allow-discrete, overlay .15s allow-discrete}dialog[open],:popover-open,dialog[open]::backdrop{opacity:1}@starting-style{dialog[open],:popover-open,dialog[open]::backdrop{opacity:0}}[hidden]:not([hidden=until-found]){display:none!important}img{display:block}summary{cursor:default}iframe{border:none}@supports (position-area:block-end span-inline-end){[popover]{margin:0;position-area:block-end span-inline-end}}}
/* --------------------

	2. Common

-------------------- */
.wrapper {
	width: 1000px;
	margin: 0 auto;
}
@media screen and (max-width: 667px) {
	.wrapper { width: 94%; }
}

.centering {
	text-align: center;
	margin: 0 auto;
}

.marBtm60 { margin-bottom: 6rem; }
@media screen and (max-width: 667px) {
	.marBtm60 { margin-bottom: 4rem; }
}

.f14 { font-size: 1.4rem; }
@media screen and (max-width: 667px) {
	.f14 { font-size: 1.2rem; }
}


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

	3. Order

-------------------- */
.order { margin: 0 auto 6rem; }
@media screen and (max-width: 667px) {
	.order {
		width: 80%;
		margin: 0 auto 4rem;
	}
	
	.with100 { width: 100%!important; }
}

.order img { margin: 0 auto; }

.orderBtn {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.orderBtn img {
	display: block;
	max-width: 100%;
	height: auto;
	pointer-events: none;
}

.orderBtn_off { position: relative; }

.orderBtn_on {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transform: translateY(0);
	transition: transform 0.15s ease;
}

.orderBtn:hover .orderBtn_off { opacity: 0; }

.orderBtn:hover .orderBtn_on {
	opacity: 1;
	transform: translateY(3px);
}

.spFixedBtn { display: none; }

@media screen and (max-width: 667px) {
	.spFixedBtn {
		display: block;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1000;
		padding: 1rem 2rem calc(1rem + env(safe-area-inset-bottom));
	}

	.spFixedBtn a {
		display: block;
		width: min(100%, 480px);
		margin: 0 auto;
	}

	.spFixedBtn img {
		display: block;
		width: 100%;
		height: auto;
	}

	body { padding-bottom: 10rem; }
}


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

	4. Section

-------------------- */
/* 4-1. Header --- */
h1 {
	margin: 0 auto 5rem;
	text-align: center;
}
@media screen and (max-width: 667px) {
	h1 { margin: 0 auto 3rem; }
}


/* 4-2. Section Campaign Flow --- */
.campaignFlow {
	margin: 0 auto 8rem;
	padding: 6rem 3rem 1rem;
	background: url("../img/cp_amazon/bg_sky-diago.png") repeat;
}
@media screen and (max-width: 667px) {
	.campaignFlow {
		margin: 0 auto 4rem;
		padding: 2rem 3rem 1rem;
	}
}

.campaignFlow h2 { margin-bottom: 3rem; }

.campaignFlow ol {
	display: flex;
	justify-content: space-between;
	margin: 0 auto 5rem;
	padding: 0;
}
@media screen and (max-width: 667px) {
	.campaignFlow ol {
		flex-direction: column;
		gap: 4rem;
		margin: 0 auto 3rem;
	}
}

.campaignFlow li {
	display: flex;
	flex-direction: column;
	width: 300px;
	padding-bottom: 3rem;
	list-style: none;
	background-color: #fff;
	border: 3px solid #dbeffb;
	border-radius: 30px;
	position: relative;
}
@media screen and (max-width: 667px) {
	.campaignFlow li {
		display: grid;
		grid-template-columns: 36% 1fr;
		grid-template-areas:
			"stepImg heading"
			"stepImg text";
		column-gap: 1.5rem;
		align-items: center;
		width: 100%;
		padding: 4.5rem 1.5rem 2.5rem;
		margin-bottom: 1rem;
	}
}

.campaignFlow li h3 {
	order: 3;
	margin-bottom: 0rem;
	color: #055697;
	font-size: 2.4rem;
	text-align: center;
}
@media screen and (max-width: 667px) {
	.campaignFlow li h3 {
		grid-area: heading;
		margin: 0 0 1rem;
		font-size: 2rem;
		line-height: 1.5;
		text-align: left;
	}
}

.stepIc {
	order: 1;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);;
}
@media screen and (max-width: 667px) {
	.stepIc { width: 24%; }
}

.stepImg {
	order: 2;
	display: block;
	margin: 9rem auto 0;
}
@media screen and (max-width: 667px) {
	.stepImg {
		grid-area: stepImg;
		margin: 0;
	}
	.stepImg img {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
}

.campaignFlow ol li > p {
	order: 4;
	text-align: center;
}
@media screen and (max-width: 667px) {
	.campaignFlow ol li > p {
		grid-area: text;
		margin: 0;
		font-size: 1.4rem;
		line-height: 1.7;
		text-align: left;
	}
	.campaignFlow ol li > p br { display: none; }
}

/* 4-3. Section Campaign Detail --- */
.azDetail { margin: 0 auto 6rem; }
@media screen and (max-width: 667px) {
}

.azDetail > section { margin: 0 auto 4rem; }

.azDetail h2 {
	margin: 0 0 3rem;
	padding: 1rem 0 1.3rem 2rem;;
	color: #333;
	font-size: 2.8rem;
	border-left: 5px solid #055697;
}
@media screen and (max-width: 667px) {
	.azDetail h2 { font-size: 2rem; }
}

.azDetail h3:before {
	content: "■";
	margin-right: 0.5rem;
}
.azDetail p, .azDetail li { line-height: 1.7; }
@media screen and (max-width: 667px) {
	.azDetail h3 { font-size: 1.6rem; }
	.azDetail p, .azDetail li { font-size: 1.4rem; }
}