@charset "UTF-8";

html, body {
  margin: 0;
  padding: 0;
}

* {
	-webkit-text-size-adjust: none;
	color: #444;
}

body {
    -webkit-text-size-adjust: 100%;
}

@font-face {
	font-family: "Noto Sans JP";
  src: url(/common/font/NotoSansCJKjp-Medium.woff) format("woff");
  src: url(/common/font/NotoSansCJKjp-Medium.woff2) format("woff2");
}

.fonts-noto-sans {
	font-family: 'Noto Sans JP', sans-serif;
}

main {
	max-width: 100%;
	padding: 0 0 48px;
	margin: 0;
}

.section {
	width: 100%;
}

.section .inner {
	max-width: 1036px;
  width: 100%;
  padding: 0 32px;
	margin: 0 auto;
}

.block01,
.block04,
.block06 {
	background-color: #efefef;
}

.block01 .inner {
	padding: 60px 32px 50px;
}

.ttlh2 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 40px;
	color: #aa0000;
	text-align: center;
}

.block01 .ttlh2 {
	margin-bottom: 35px;
}

.txtLead {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.block02 {
	background-color: #aa0000;
}

.block02 .inner {
  max-width: 972px;
	padding: 30px 30px 30px 290px;
	position: relative;
}

.block02 * {
	color: #ffffff;
}

.block02 .batchIcon01 {
	max-width: 198px;
	position: absolute;
	top: -28px;
	left: 80px;
}

.block02 dt {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

.block02 dd {
	font-size: 16px;
}

.block03 .inner {
	padding: 70px 32px 60px;
}

.ttlh3 {
	color: #aa0000;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 30px;
	text-align: center;
	margin-bottom: 45px;
}

.block03 .ttlh3 {
	color: #aa0000;
}

.ttlh3::before {
	content: '';
	display: inline-block;
	background: url(/topics/lp/affiliate/images/icon_affiliate01.png) no-repeat;
	background-size: contain;
	width: 50px;
	height: 50px;
	margin: 0 20px -15px 0;
}

.boxType01 li {
	font-family: 'Noto Sans JP', sans-serif;
	background-color: #efefef;
	font-size: 22px;
	text-align: center;
	padding: 30px;
	margin-bottom: 2px;
}

.checkIcon {
	display: block;
}

.checkIcon::before {
	content: '';
	display: inline-block;
	background: url(/topics/lp/affiliate/images/icon_affiliate02.png) no-repeat;
	background-size: contain;
	width: 24px;
	height: 24px;
	margin: 0 10px -4px 0;
}

.highlight {
	background: linear-gradient(transparent 60%, #e0d498 60%);
}

.clmBox2 {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	margin: 35px 0 0;
}

.clmBox2 .clm {
	width: 48.793%;
}

.clmBox2 .clm img {
	width: 100%;
}

.clmBox2 .clm:first-child {
	margin-right: 2.414%;
}

.block04 .inner {
	padding: 60px 32px 50px;
}

.boxType02 {
	border-left: 5px solid #ffffff;
	width: 100%;
	padding: 0 0 40px 50px;
	margin-bottom: 20px;
}

.numIcon {
	background-color: #b89d0c;
	border-radius: 50%;
	display: block;
	width: 48px;
	height: 0;
	padding: 24px 0;
	margin: 0 0 0 -76px;
	position: relative;
}

.numIcon span {
	color: #ffffff;
	font-size: 32px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.flowBox {
	font-family: 'Noto Sans JP', sans-serif;
	margin: -46px 0 0 0;
}

.flowBox dt {
	color: #aa0000;
	font-size: 26px;
	margin-bottom: 15px;
}

.flowBox dd {
	font-size: 16px;
}

.block05 {
	background-color: #d2cbb9;
}

.block05 .inner {
	padding: 60px 32px 50px;
}

.block05 .clmBox2 .clm {
	border-radius: 10px;
	width: 48.971%;
}

.block05 .clmBox2 .clm:first-child {
	margin-right: 2.058%;
}

.btnArea01 {
	border-radius: 0 0 6px 6px;
	background-color: #ffffff;
	padding: 0 38px 23px;
}

.btnType01 {
	display: block;
	background-color: #aa0000;
	color: #ffffff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 26px;
	text-align: center;
	padding: 20px 35px;
	margin-bottom: 15px;
	position: relative;
}

.btnType01:hover {
	opacity: 0.7;
}

.btnType01::after {
	content: '';
	display: block;
	background: url(/topics/lp/affiliate/images/icon_arrowr01.png) no-repeat;
	background-size: contain;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	right: 3.75%;
	transform: translateY(-50%);
}

.block06 .inner {
	padding: 60px 40px 50px;
}

.linkBox01 {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	width: 91.255%;
	margin: 0 auto;
}

.linkBox01 a {
	background-color: #ffffff;
	border-radius: 8px;
	font-size: 20px;
	font-weight: bold;
	display: block;
	padding: 20px 30px 20px 40px;
	position: relative;
}

.linkBox01 a:hover {
	opacity: 0.7;
}

.linkBox01 a::after {
	content: '';
	display: block;
	background: url(/topics/lp/affiliate/images/icon_arrowr02.png) no-repeat;
	background-size: contain;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
}

.linkBox01 li {
	margin-right: 20px;
}

.linkBox01 li:nth-child(2) {
	margin-right: 0;
}

.noteType01 {
	font-size: 18px;
	margin-top: 30px;
}

.noteType01 li {
	display: table;
	color: #444444;
}

.noteType01 span {
	display: table-cell;
}

.sns-box {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 255px;
    margin: 45px auto 0;
}

.sns-box__item {
		width: 66px;
		height: 66px;
}

.sns-box__item a {
    display: block;
}

.footer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 48px;
	background: #e50012;
}

.footer__bottom {
	display: inline-block;
}

.footer__copyright {
	font-size: 0.6875rem;
	color: #fff;
}

.pc-none {
	display: none;
}

.sp-none {
	display: block;
}

/***sp***/
@media screen and (max-width: 767px) {
	main {
		padding: 0 0 46px;
	}
	.section .inner {
		margin: 0;
	}
	.block01 .inner {
		padding: 12% 5.333% 10.666%;
	}
	.ttlh2 {
		font-size: 24px;
	}
	.block01 .ttlh2 {
		margin-bottom: 8.403%;
	}
	.txtLead {
		font-size: 15px;
		text-align: left;
	}
	.block02 .inner {
		padding: 8% 2.666% 8% 39.4666%;
	}
	.block02 .batchIcon01 {
		max-width: 34.666%;
		position: absolute;
		top: -11.009%;
		left: 2.133%;
	}
	.block02 dt {
		font-size: 14px;
		margin-bottom: 4.608%;
	}
	.block02 dd {
		font-size: 12px;
	}
	.block03 .inner {
		padding: 6.666% 5.333% 8%;
	}
	.ttlh3 {
		font-size: 20px;
		margin-bottom: 7.002%;
	}
	.ttlh3::before {
		display: block;
		width: 10.447%;
		height: 0;
		padding-top: 10.447%;
		margin: 0 auto 2.985%;
	}
	.boxType01 li {
		font-size: 14px;
		text-align: left;
		padding: 4.477%;
	}
	.checkIcon {
		text-indent: -6.557%;
		padding-left: 6.557%;
	}
	.checkIcon::before {
		width: 5.901%;
		height: 0;
		padding-top: 5.901%;
		margin: 0 1.967% -1.311% 0;
	}
	.clmBox2 {
		margin: 4.918% 0 0;
	}
	.block04 .inner {
		padding: 6.666% 5.333% 9.333%;
	}
	.boxType02 {
		padding: 0 0 8.695% 8.695%;
		margin-bottom: 4.347%;
	}
	.numIcon {
		font-size: 18px;
		width: 9.677%;
		height: 0;
		padding: 4.8385% 0;
		margin: 0 0 0 -15.483%;
	}
	.numIcon span {
		font-size: 18px;
	}
	.flowBox {
		margin: -9.333% 0 0 0;
	}
	.flowBox dt {
		font-size: 16px;
		margin-bottom: 3.333%;
	}
	.flowBox dd {
		font-size: 14px;
	}
	.block05 .inner {
		padding: 6.666% 5.333% 8%;
	}
	.block05 .clmBox2 .clm {
		width: 48%;
		border-radius: 0 0 5.263%;
	}
	.block05 .clmBox2 .clm:first-child {
		margin-right: 4%;
	}
	.btnArea01 {
		border-radius: 0 0 5.263% 5.263%;
		padding: 0 4.705% 9.375%;
	}
	.btnType01 {
		font-size: 14px;
		padding: 14.285% 12.987%;
		margin-bottom: 0;
	}
	.btnType01:hover {
		opacity: 1;
	}
	.btnType01::after {
		width: 7.792%;
		height: 0;
		padding-top: 7.792%;
		top: 50%;
		right: 3.75%;
		transform: translateY(-50%);
	}
	.block06 .inner {
		padding: 10.666% 5.333%;
	}
	.linkBox01 {
		border-radius: 10px;
		background-color: #ffffff;
		display: block;
		width: 100%;
		padding: 0 5%;
		margin: 0;
	}
	.linkBox01 li {
		padding: 7.407% 7.407% 7.407% 0;
	}
	.linkBox01 li:first-child {
		border-bottom: 1px solid #f1f1f1;
	}
	.linkBox01 a {
		background: none;
		border-radius: 0;
		font-size: 14px;
		text-align: left;
		padding: 0;
		position: relative;
	}
	.linkBox01 a:hover {
		opacity: 1;
	}
	.linkBox01 a::after {
		left: 102%;
	}
	.linkBox01 li {
		margin-right: 0;
	}
	.noteType01 {
		font-size: 12px;
		margin-top: 4%;
	}
	.noteType01 li {
		display: block;
	}
	.sns-box {
			justify-content: space-around;
			width: 80%;
			margin: 10% auto 0;
	}
	.sns-box__item {
			width: 27.5%;
			height: 27.5%;
	}
	.sns-box__item a {
			display: block;
	}
	.page-top {
			margin-top: 6.666%;
			text-align: right;
	}
	.page-top a {
			display: inline-block;
			color: #444;
			font-size: 14px;
			margin-left: 6.666%;
			position: relative;
	}
	.page-top a:before {
		border-top: 1px solid #444;
		border-right: 1px solid #444;
		content: '';
		display: block;
		transform: rotate(-45deg);
		width: 8px;
		height: 8px;
		position: absolute;
		top: 47.619%;
		left: -26.785%;
	}
	.sp-none {
		display: none;
	}
	.pc-none {
		display: block;
	}
	.footer {
		height: 46px;
	}
}

@media screen and (min-width: 768px) {
	.noteType01.typeC li {
		display: table;
		margin: 0 auto;
	}
}

/*sp adjster*/
/* @media screen and (max-width: 330px) {

} */