@charset "utf-8";

/* CSS Document */
/*レビューキャンペーン 2025.06*/
#review {
	display: block;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
	width: 100%;
	max-width: 500px;
	margin: 0 auto 40px;
	color: #003646;
}

#review p,
#review a,
#review span,
#review div,
#review ul,
#review li {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#review a {
	text-decoration: none;
}

/*ヘッダー*/
#review .header_box {
	display: block;
	width: auto;
	max-width: 500px;
	margin: auto;
}

#review .header_box img {
	display: block;
	margin: 0 auto;
	width: auto;
	max-width: 100%;
}

/*ポイント獲得の流れ*/

#review .flow_box {
	padding: 10% 0 ;
}

#review .point_step img {
	display: block;
}

#review .sub_ttl {
	display: block;
	margin: 0 auto ;
	width: 90%;
}

#review .sub_ttl img {
 	display: block;
 	margin: 0 auto;
 	width: auto;
 	max-width: 100%;
 }

#review .flow_box .main_frame {
	display: block;
	position: relative;
	padding: 12px 12px;
}

#review .flow_box .step_box {
	display: block;
	position: relative;
	width: 90%;
	margin: 2% auto 7%;
}

#review .flow_box .step_box .point_step {
	display: block;
}

#review .flow_box .step_box .point_step+.point_step {
	display: block;
	margin-top: 7%;
}

#review .flow_box .step_box .point_step .flow_img {
	display: block;
	width: 100%;
	margin: 0 auto;
}

#review .flow_box .step_box .point_step:first-child:after {
	display: none;
}

#review .flow_box .step_box .point_step .number {
	color: #ff9494;
	font-size: min(4.4vw, 22px);
	font-weight: bold;
}

#review .flow_box .step_box .point_step .flow_ttl {
	color: #404040;
	font-size: min(5vw, 30px);
	letter-spacing: 0.1em;
	font-weight: bold;
	margin: 0 auto 1%;
}

#review .flow_box .step_box .point_step .flow_txt {
	color: #404040;
	font-size: min(4.3vw, 22px);
	letter-spacing: 0.1em;
	font-weight: 500;
}

#review .flow_box .step_box .point_flow {
	display: block;
	width: auto;
	margin: auto;
	position: relative;
	z-index: 3;
}

#review .review_btn {
	font-size: min(5.5vw, 25px);
	font-weight: bold;
	width: 90%;
	letter-spacing: .15em;
	margin: auto;
	position: relative;
	border-radius: 3em;
	line-height: 1.5;
	height: 85px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 auto ;
}

#review .review_btn.detail {
	margin: 5% auto 0;
	font-size: min(3.8vw, 20px);
}

#review .arrow1:after {
	content: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064.28%20149.02%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M1.73%2C18.01c11.1%2C17.04%2C22.19%2C34.08%2C33.29%2C51.13%2C1.62%2C2.49%2C3.37%2C4.93%2C4.87%2C7.49.16.28.27.04.18-.08%2C1.45%2C2.06-.07%2C1.51.26.59.3-.86-.61%2C1-.62%2C1.01-.47.59-.89%2C1.23-1.33%2C1.85-6.47%2C9-12.94%2C17.99-19.4%2C26.99-5.75%2C8-11.5%2C15.99-17.25%2C23.99-3.79%2C5.26-.92%2C13.36%2C4.31%2C16.42%2C6.04%2C3.54%2C12.62.97%2C16.42-4.31%2C12.05-16.76%2C24.1-33.52%2C36.15-50.28%2C3.56-4.96%2C5.96-10.35%2C5.64-16.68-.29-5.81-2.83-10.38-5.86-15.03-6.5-9.98-12.99-19.96-19.49-29.94-5.48-8.42-10.96-16.84-16.44-25.25C18.92.47%2C11.82-1.79%2C6.04%2C1.6.64%2C4.75-1.82%2C12.56%2C1.73%2C18.01h0Z%22%2F%3E%3C%2Fsvg%3E');
	display: inline-block;
	position: absolute;
	width: 8px;
	right: 7%;
	top: 50%;
	transform: translateY(-50%);
}

#review .arrow2:after {
	content: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064.28%20149.02%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23003646%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M1.73%2C18.01c11.1%2C17.04%2C22.19%2C34.08%2C33.29%2C51.13%2C1.62%2C2.49%2C3.37%2C4.93%2C4.87%2C7.49.16.28.27.04.18-.08%2C1.45%2C2.06-.07%2C1.51.26.59.3-.86-.61%2C1-.62%2C1.01-.47.59-.89%2C1.23-1.33%2C1.85-6.47%2C9-12.94%2C17.99-19.4%2C26.99-5.75%2C8-11.5%2C15.99-17.25%2C23.99-3.79%2C5.26-.92%2C13.36%2C4.31%2C16.42%2C6.04%2C3.54%2C12.62.97%2C16.42-4.31%2C12.05-16.76%2C24.1-33.52%2C36.15-50.28%2C3.56-4.96%2C5.96-10.35%2C5.64-16.68-.29-5.81-2.83-10.38-5.86-15.03-6.5-9.98-12.99-19.96-19.49-29.94-5.48-8.42-10.96-16.84-16.44-25.25C18.92.47%2C11.82-1.79%2C6.04%2C1.6.64%2C4.75-1.82%2C12.56%2C1.73%2C18.01h0Z%22%2F%3E%3C%2Fsvg%3E');
	display: inline-block;
	position: absolute;
	width: 8px;
	right: 7%;
	top: 50%;
	transform: translateY(-50%);
}

#review .pink {
	color: #ffffff;
	background-color: #ff79b9;
}

#review .green {
	color: #003646;
	background-color: #7df37d;
}

#review .exp {
	display: block;
	color: #003646;
	font-size: min(3.6vw, 18px);
	font-weight: 500;
	letter-spacing: .15em;
	text-align: center;
	margin-top: 3%;
}

#review .flow_box .link_btn {
	display: block;
	color: #404040;
	font-size: min(4.4vw, 22px);
	letter-spacing: .15em;
	font-weight: bold;
	text-align: center;
	background-color: #ffffff;
	border: 2px solid #404040;
	width: 100%;
	padding: 2%;
	margin: 5% auto;
	position: relative;
}

#review .flow_box .link_btn:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 55%;
	right: 4%;
	width: 8px;
	height: 8px;
	line-height: 1.5;
	margin-top: -8px;
	border-top: 2px solid #404040;
	border-left: 2px solid #404040;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

/*レビュー投稿の手順*/
#review .review_box {
	background: #e7ffe7;
	padding: 10% 0 5%;
}

#review .review_box .main_frame {
	display: block;
	position: relative;
}

#review .review_box .howto_box {
	display: block;
	width: 90%;
	margin: 0 auto;
	padding: 10% 0 0;
	position: relative;
}

#review .review_box .howto_box .review_step_img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto 10%;
}

#review .review_box .step_box .review_step {
	display: block;
	width: auto;
	margin: auto;
	position: relative;
	z-index: 3;
}

/*レビューキャンペーンについて*/
#review .explain_box {
	display: block;
	background: url(../img/bg.jpg) center top;
	background-size: contain;
	padding: 5% 0;
}

#review .explain_box .main_frame {
	display: block;
	position: relative;
}

#review .explain_box .description {
	display: block;
	color: #404040;
	width: 90%;
	background-color: #fff;
	margin: 0 auto;
	padding: 3% 0 10%;
	/* margin: 0 auto 13%; */
	position: relative;
}

#review .explain_box .description ul {
	font-weight: 500;
}

#review .explain_box .description ul li + li {
	margin-top: 3%;
}

#review .explain_box .btn_box .icon_point {
	display: block;
	position: absolute;
	top: -130px;
	left: -50px;
}

#review .explain_box .link_box {
	background: #e7ffe7;
	margin: 10% auto 0;
	padding: 10% 0 ;
}

#review .catch_txt {
	display: block;
	font-size: min(5vw, 28px);
	width: 90%;
	position: relative;
	text-align: center;
	font-weight: 700;
	margin: 0 auto;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 50%;
	letter-spacing: .15em;
}

#review .link_btn_area  {
	margin-top: 10%;
}

#review .link_btn_area a + a{
	margin-top: 4%;
}

#review .gaiyou_ttl {
	font-size: min(4.5vw, 18px);
	font-weight: 500;
	letter-spacing: 0.1em;
	margin-top: 5%;
	color: #003646;
}

#review .gaiyou_ul {
	font-size: min(4.2vw, 15px);
	font-weight: 500;
	letter-spacing: .03em;
	margin-top: 0;
	color: #003646;
}

#review .gaiyou_ul li {
	margin-top: 0%;
	color: #003646;
}

#review .gaiyou_ul li+li {
	margin-top: 3%;
}

#review .kochira a {
	color: #404040;
	text-underline-offset: 8px;
	text-decoration: underline;
}

#review .catch_ttl {
	width: max-content;
	margin: 0 auto 3%;
	color: #ff79b9;
	font-weight: bold;
	font-size: min(4.3vw, 21px);
	letter-spacing: 0.08em;
	line-height: 2;
	text-align: center;
}

#review .catch_ttl .deco {
	display: inline-block;
	position: relative;
}

#review .catch_ttl .deco::before,
#review .catch_ttl .deco::after {
	display: block;
	position: absolute;
	bottom: 0.1em;
	width: 0.1em;
	height: 1.2em;
	background: #ff79b9;
	content: "";
	font-weight: normal;
}

#review .catch_ttl .deco::before {
	-webkit-transform: rotate(-20deg);
	left: -0.8em;
	transform: rotate(-20deg);
	top: 0.6em;
}

#review .catch_ttl .deco::after {
	-webkit-transform: rotate(20deg);
	right: -0.8em;
	transform: rotate(20deg);
	top: 0.6em;
}