/*-------------------------------------
  general
-------------------------------------*/
html{
	font-size: 100%;
}
body{
	font-family: "Noto Sans JP", sans-serif;
	font-style: normal;
	font-size: 14px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	body{
		font-size: 18px;
		background: url(../images/revenge-bg.png) no-repeat top center;
		background-attachment: fixed;
		background-size: cover;
	}
}

a,
a:link{
	text-decoration: underline;
}
a:hover{
	text-decoration: none;
}
p{
	font-size: 1em;
}
ol,li{
	list-style: none;
	padding: .5rem 0;
}
ul{
	padding: 0;
	margin-bottom: 0;
}
img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

/*-------------------------------------
  footer
-------------------------------------*/
footer{
	background: none;
	padding: 0;
}
footer .copy{
	background-color: #C6EAFC;
    font-size: .9em;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
}

/*-------------------------------------
  amazon-campaign-lp
-------------------------------------*/
main{
	padding: 0;
}
.container{
	--bs-gutter-x: 50px;
}
.w700{
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.container{
		--bs-gutter-x: 100px;
	}
	.container.w700{
		padding-left: 0;
		padding-right: 0;
	}
}

/* main-image */
.main-image__img{
	position: relative;
}
.main-image__ttl{
	position: absolute;
	bottom: calc(100% * .045);
	right: 0;
	width: 56%;
}
h1{
	text-align: center;
	font-size: 1em;
}
h1 span{
	display: block;
	font-weight: 900;
	font-size: 1.25em;
	color: #df4c1e;
	margin-bottom: 5px;
}
h1 b{
	display: block;
}

@media (min-width: 768px) {
	.main-image__ttl{
		bottom: calc(100% * .075);
	}
	h1 span{
		margin-bottom: 15px;
	}
}

.main-image__text{
	background-color: #000b3d;
	overflow: hidden;
	text-align: center;
	color: #fff;
}
.main-image__text > p{
	white-space: nowrap;
}
.main-image__text b{
	display: block;
}
.main-image__text span{
	font-size: .9em;
}
.main-image__em{
	color: #f9be4c;
	font-size: 1.5em;
	font-weight: 900;
}

@media (min-width: 768px) {
	.main-image__text span{
		font-size: 1em;
	}
}

.cta{
	width: 100%;
	text-align: center;
	margin: 35px 0 50px;
}
.cta a{
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 1.5em;
	padding: 15px;
	background: #f9be4c;
	color: #000;
	font-weight: 700;
	text-decoration: none;
}
.cta a:hover{
	opacity: 0.75;
}
.tactics{
	background-color: #fff;
	color: #000;
	text-align: left;
	padding: 20px;
	margin-bottom: 50px;
}
.tactics img{
	margin-bottom: 1em;
}

@media (min-width: 768px) {
	.cta{
		margin: 50px 0 100px;
	}
	.cta a{
		padding: 25px 15px;
	}
	.tactics{
		padding: 50px;
	}
}

.toc{
	background: #c6eafc;
	padding: 50px 0;
}
h2{
	font-size: 1.25em;
	font-weight: 900;
	text-align: center;
	margin-bottom: 25px;
}
dl{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0;
}
dl dt,
dl dd{
	margin-bottom: 0;	
}
dl dt{
	width: 30%;
}
dl dd{
	width: 70%;
}
.chapter{
	overflow: hidden;
	padding-bottom: 50px;
}
.heading{
	text-align: center;
	margin-top: 50px;
	margin-bottom: 25px;
	font-weight: 700;
}
.heading span{
	display: inline-block;
	font-size: 1.25em;
	padding: 5px 10px;
	color: #fff;
	background-color: #000;
}
figcaption{
	text-align: center;
	margin-top: 15px;
}
.chapter.bg-blue{
	background: #c6eafc;
}
.book{
	margin-top: 25px;
}
.book__img{
	max-width: 450px;
	margin: 0 auto 35px;
}
.book__dtl{
	max-width: 400px;
	margin: 0 auto 50px;
	border: #df4c1e 1px solid;
	background: #fff;
	padding: 25px 20px;
}
.book__dtl p{
	font-size: .9em;
	text-align: center;
	font-weight: 700;
}
.book__isbn{
	margin-bottom: 0;
}
.book__dtl dl{
	font-size: .9em;
}

@media (min-width: 768px) {
	.book{
		margin-top: 75px;
	}
	.book__dtl{
		padding: 50px 40px;
	}
}

.author{
	background: #c6eafc;
	padding-bottom: 25px;
	overflow: hidden;
}
.author h2{
	background-color: #000b3d;
	color: #fff;
	line-height: 70px;
	height: 70px;
}
.author__img{
	max-width: 300px;
	margin: 50px auto;
}
.author__name{
	text-align: center;
	font-weight: 700;
	margin-top: 15px;
}

@media (min-width: 768px) {
	.author{
		padding-bottom: 50px;
	}
}

.campaign__dtl{
	background: #FFDD03;
	overflow: hidden;
	text-align: center;
	padding-bottom: 25px;
	margin-top: 50px;
	margin-bottom: 50px;
}
.campaign__period{
	padding: 25px 20px 0;
	font-size: .9em;
}

.present-item .heading{
	margin-top: 25px;
}
.present-item .heading span{
	background: #ff3131;
	padding: 5px 25px;
	margin-bottom: 25px;
}
.present-item .heading p{
	font-size: .9em;
}
.present-item h2{
	font-weight: 900;
}
.present-item img{
	margin-bottom: 10px;
}
.present-item .image-s{
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
}
.present-item p:last-child{
	border-bottom: #707070 1px solid;
	padding-bottom: 25px;
}
.present-item.__end{
	margin-bottom: 50px;
}
.present-item.__end p:last-child{
	border-bottom: none;	
}

@media (min-width: 768px) {
	.present-item .heading{
		margin-top: 50px;
	}
	.present-item img{
		margin-bottom: 20px;
	}
	.present-item-item{
		padding-bottom: 50px;
	}
}

.present-tiktok{
	margin-bottom: 50px;
}
.present h3{
	color: #ff3131;
	font-size: 1.25em;
	font-weight: 900;
	text-align: center;
	margin-bottom: 25px;
	border-top: 5px solid #ff3131;
	border-bottom: 5px solid #ff3131;
	padding: 25px 0px;
}
.present__em{
	max-width: 300px;
	margin: 0 auto;
}
.present-item__name{
	max-width: 325px;
	margin-left: auto;
	margin-right: auto;
	background-color: #c6eafc;
	padding: 5px;
	text-align: center;
	font-weight: 700;
	font-size: .9em;
	margin-top: 25px;
	margin-bottom: 25px;
}
.present__message{
	margin-bottom: 50px;
}
.present__message h4{
	text-align: center;
	font-weight: 700;
	margin-bottom: 25px;
}
.method .dtl{
	background: #C6EAFC;
	overflow: hidden;
	padding: 0 20px 25px;
}
.method h2{
	border-top: #05A9CF 5px solid;
	border-bottom: #05A9CF 5px solid;
	padding: 25px 0;
}
.method h3{
	font-size: 1.25em;
	font-weight: 900;
	text-align: center;
	margin-bottom: 25px;
}
.method .heading{
	margin-top: 25px;
}
.method .heading.border-b{
	border-bottom: #707070 1px solid;
	margin-bottom: 15px;
}
.method .heading span{
	border: #05A9CF 5px solid;
	background: #fff;
	color: #05A9CF;
	margin-bottom: 25px;
}
.method .heading h3{
	margin-bottom: 25px;
}
.method .caution-box{
	border: #FF4D33 5px solid;
	background: #fff;
	font-weight: 700;
	padding: 20px 20px 0;
	margin-top: 20px; 
	margin-bottom: 25px;
}
.method .caution{
	width: 110px;
	margin-left: auto;
	margin-right: auto;
	height: 110px;
	line-height: 110px;
	text-align: center;
	background: #FF4D33;
	color: #fff;
	font-size: 1.25em;
	font-weight: 700;
	margin-bottom: 20px;
}
.method .border-box{
	margin-bottom: 25px;
}
.method .arrow{
	max-width: 375px;
	margin-left: auto;
	margin-right: auto;
}
.method .cta{
	width: 100%;
	text-align: center;
	padding: 0 20px;
}
.method .cta a{
	display: block;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 15px;
	background: #FF4D33;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
}

@media (min-width: 768px) {
	.method .dtl{
		padding: 0 50px 25px;
	}
	.method .heading{
		margin-top: 50px;
	}
	.method .cta{
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
	}
	.method .cta a{
		padding: 25px 15px;
		font-size: 1.25em;
	}
}

/* #mail_form */
.amazon-campaign-form{
	background: #C6EAFC;
	overflow: hidden;
	margin-top: 50px;
}
.amazon-campaign-form h2{
	background: #000b3d;
	overflow: hidden;
	color: #fff;
	padding: 35px 0;
	margin-top: 0;
}
.amazon-campaign-form .form-wrapper{
	width: calc(100% - 40px);
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 25px;
	padding: 25px 20px;
	background: #fff;
	overflow: hidden;
}
#mail_form h3{
	display: inline-block;
	font-size: 1em;
	font-weight: 700;
	margin-top: 25px;
	margin-bottom: 25px;
}
#mail_form dl dt,
#mail_form dl dd{
	width: 100%;
}
#mail_form dl dt{
	margin-bottom: 25px;
}
#mail_form dl dd{
	margin-bottom: 10px;
}
#mail_form .notes{
	font-size: .9em;
    color : #FF4D33;
	margin-bottom: 25px;
}
#mail_form dl.pick{
	margin-top: 25px;
}
#mail_form dl dd span.error_blank,
#mail_form dl dd span.error_format,
#mail_form dl dd span.error_match{
	display : block;
	color : #FF4D33;
	margin-top : 3px;
}
#mail_form textarea,
#mail_form input[type="text"],
#mail_form input[type="email"]{
	width: 100%;
}
#mail_form textarea,
#mail_form input[type="text"],
#mail_form input[type="email"],
#mail_form input[type="button"]{
	padding: 8px;
	border: 1px solid #707070;
	-webkit-appearance : none;
	-moz-appearance: none;
	appearance: none;
}
#mail_form dl.item dt,
#mail_form dl.item dd{
	text-align: center;	
}
#mail_form dl.item label{
	display: none;
}
#mail_form input[type="number"]{
	border: none;
	text-align: center;
	font-size: 1.25em;
	font-weight: 700;
	-webkit-appearance : none;
	-moz-appearance: none;
	appearance: none;
}
#mail_form button{
	background: #fff;
	color: #000;
	border: none;
	font-size: 1.25em;
	font-weight: 700;
}
#mail_form input[type="checkbox"]{
	position: relative;
	width: 24px;
	height: 24px;
	border: 3px solid #707070;
	margin-right: .5rem;
	vertical-align: -5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
#mail_form input[type="checkbox"]:checked:before{
	position: absolute;
	top: -5px;
	left: 8px;
	transform: rotate(45deg);
	width: 10px;
	height: 20px;
	border-right: 5px solid #FF4D33;
	border-bottom: 5px solid #FF4D33;
	content: '';
}
#mail_form input[type="button"]{
	display: block;
	width: 100%;
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 15px;
	background: #FF4D33;
	color: #fff;
	font-weight: 700;
	border: none;
	border-radius: 999px;
	cursor: pointer;
}
#mail_form input[type="button"]:hover{
	opacity: 0.75;
}
#mail_form span.required{
	display: inline-block;
	padding: 0 8px 1px;
	margin-right: 1rem;
	color: #fff;
	font-weight: 700;
	border-radius: 3px;
	background: #FF4D33;
}
#mail_form span.optional{
	display: none;
}

@media (min-width: 768px) {
	.amazon-campaign-form .form-wrapper{
		max-width: 700px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 50px;
		margin-bottom: 50px;
		padding: 50px 40px;
	}
	#mail_form dl dt{
		width: 40%;
	}
	#mail_form dl dd{
		width: 60%;
	}
	#mail_form dl.item dt{
		width: 60%;
		text-align: left;
	}
	#mail_form dl.item dd{
		width: 40%;
	}
	#mail_form .notes{
		margin-bottom: 50px;
	}
	#mail_form dl.pick{
		margin-top: 50px;
	}
	#mail_form dl.pick dt{
		width: 100%;
		text-align: left;
	}
	#mail_form dl.pick dd{
		width: 100%;
	}
	#mail_form input[type="button"]{
		padding: 25px 15px;
		font-size: 1.25em;
	}
}

.thanks h1{
	font-size: 2.5em;
	font-weight: 700;
	margin-top: 50px;
	margin-bottom: 50px;
}
.thanks .lead{
	font-size: 1em;
	font-weight: 400;
}
.thanks .borderbox{
	background-color: #c6eafc;
	padding: 20px;
	margin-top: 25px;
	margin-bottom: 25px;
}
.thanks__end{
	margin-bottom: 25px;
}

@media (min-width: 768px) {
	.thanks h1{
		margin-top: 100px;
		margin-bottom: 100px;
		text-align: center;
	}
	.thanks .lead{
		text-align: center;
	}
	.thanks .row{
		justify-content: space-between;
	}
	.thanks .borderbox{
		width: 48%;
		padding: 50px;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.thanks__end{
		text-align: center;
		margin-bottom: 50px;
	}
}


