/*
Theme Name: エルパック
Theme URI: https://l-pack.site/
Description: エルパック
Author: エルパック
Author URI: https://l-pack.site/
*/

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

/*-------------------------------------------
　　reset
-------------------------------------------*/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video, input, select {
	font-size:100%;
	font-weight:inherit;
	font-style:inherit;
	vertical-align:baseline;
	white-space:normal;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	background:transparent;
	text-decoration: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
:focus {outline:0;}
table {border-collapse:collapse; border-spacing:0;}
img {vertical-align:top;}
input, textarea, select, button {-webkit-appearance:none; -moz-appearance:none; appearance:none; outline: none;}



/*-------------------------------------------
　　base
-------------------------------------------*/
body {
	font-family: 游ゴシック体, YuGothic, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック, "Yu Gothic", Meiryo, メイリオ, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "MS PGothic", arial, helvetica, sans-serif;
	font-weight: 200;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	letter-spacing: 0.05em;
	color: #444;
}

a, a:hover {color:#444;}
a:hover {opacity: 0.7;}

img {width: 100%; height: auto;}


.sp_only {display: none;}
.sp_br {display: inline;}
.pc_br {display: block;}
@media screen and (max-width:640px) {
	.pc_only {display: none;}
	.sp_only {display: block;}
	.pc_br {display: inline;}
	.sp_br {display: block;}
}

#l-pack {
	position: relative;
	overflow: hidden;
}


/*-------------------------------------------
　 lp style
-------------------------------------------*/
/* --- Main Visual --- */
#main_visual {
	position: relative;
	margin: 0 0 60px 0;
}
#main_visual .mv_parts_area {
	position: absolute;
	top: 10%;
	left: 5%;
	width: 46%;
}
#main_visual .mv_parts_01 {
	width: 90%;
	margin: 0 auto 5% auto;
}
#main_visual .mv_parts_02 {
	width: 84%;
	margin: 0 auto 5% auto;
}
#main_visual .catch {
	position: absolute;
	bottom: 0;
	padding: 18px 0;
	width: 100%;
	text-align: center;
	font-size: 3.6vw;
	color: #fff;
	background: linear-gradient(to right, rgba(60,175,206,0.7),rgba(6,199,85,0.7));
}
#main_visual .catch strong {
	color: #ffffc1;
}
@media screen and (min-width:1301px) {
	#main_visual .mv_parts_area {
		position: absolute;
		top: 5%;
		left: 12%;
		width: 38%;
	}
}
@media screen and (max-width:1300px) {
	#main_visual .visual_photo img {
		width: 130vw;
		margin-left: -15vw;
	}
}
@media screen and (max-width:640px) {
	#main_visual {
		margin-bottom: 40px;
	}
	#main_visual .visual_photo img {
		width: 100vw;
		margin: 0;
	}
	#main_visual .mv_parts_area {
		position: absolute;
		top: 2%;
		left: 2%;
		width: 96%;
		display: flex;
		flex-direction: column;
	}
	#main_visual .mv_parts_01 {
		width: 100%;
		margin: 0 auto 13% auto;
		order: 1;
	}
	#main_visual .mv_parts_03 {
		order: 2;
		width: 43%;
		margin: 0 0 0 3%;
	}
	#main_visual .mv_parts_03 img {
		margin-bottom: 3%;
	}
	#main_visual .mv_parts_02 {
		width: 58%;
		margin: 8% 0 0 3%;
		order: 3;
	}
	#main_visual .catch {
		font-size: 4.4vw;
		padding: 10px 0;
	}
}

/* --- 資料請求ボタン ---　*/
.request_btn .request_comment {
	font-size: 13px;
	font-size: clamp(11px, 1.7vw, 18px);
	text-align: center;
}
.request_btn .request_comment strong {
	color: #ff5c4d;
}
.request_btn .btn a {
	font-size: 40px;
	font-size: clamp(24px, 4.5vw, 40px);
	line-height: 1.1;
	display: block;
	color: #fff;
	background: linear-gradient(to right, #ff5c4d, #ffba19);
	max-width: 480px;
	width: 70%;
	margin: 16px auto 0 auto;
	text-align: center;
	box-sizing: border-box;
	padding: 20px 0;
	letter-spacing: 0.1em;
}
@media screen and (max-width:640px) {
	.request_btn .btn a {
		padding: 14px 0;
		margin: 10px auto 0 auto;
	}
}

/* --- Main Contents --- */
section h1 {
	color: #3cafce;
	text-align: center;
	font-size: 20px;
	font-size: clamp(16px, 4.4vw, 40px);
	margin-bottom: 40px;
	line-height: 1.3;
}
@media screen and (max-width:640px) {
	section h1 {
		font-size: 20px;
		margin-bottom: 20px;
	}
}

/* --- このようなお困りごとはありませんか？ ---*/
#problem {
	max-width: 900px;
	width: 86%;
	margin: 100px auto;
}
#problem ul li {
	display: flex;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 20px;
}
#problem ul li::before {
	display: block;
	content: '';
	background: url(https://l-pack.site/wp-content/themes/l-pack/images/lpack_16.svg) no-repeat center top;
	width: 25px;
	height: 25px;
	background-size: 100%;
	margin: 2px 8px 0 0;
}
#problem ul li span {
	flex: 1;
}
#problem ul li strong {
	font-weight: bold;
	padding-bottom: 3px;
	border-bottom: 1px solid #3cafce;
}
@media screen and (min-width:801px) {
	#problem ul {
		background: url(https://l-pack.site/wp-content/themes/l-pack/images/lpack_05.png) no-repeat right -5px bottom;
		background-size: 22%;
	}
}
@media screen and (max-width:640px) {
	#problem {
		margin: 70px auto;
	}
	#problem ul li {
		font-size: 13px;
	}
	#problem ul li::before {
		width: 16px;
		height: 16px;
		margin: 4px 6px 0 0;
	}
}

#problem .balloon_area .flex {
	display: flex;
	justify-content: space-between;
}
#problem .balloon {
	position: relative;
	background: #3cafce;
	border-radius: 12px;
	color: #fff;
	text-align: center;
	line-height: 1.5;
	padding: 17px 0;
	font-size: 19px;
	font-size: clamp(13px, 2.3vw, 24px);
	margin: 40px 0 30px 0;
}
#problem .balloon::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 34%;
	margin-left: -10px;
	border: 10px solid transparent;
	border-top: 15px solid #3cafce;
}
#problem .balloon_01::before {
	left: 80%;
}
#problem .balloon_01 {
	width: 43%;
}
#problem .balloon_02 {
	width: 54%;
}
#problem .question {
	text-align: center;
	font-size: 30px;
}
#problem .question span {
	background: linear-gradient(transparent 80%, #ffffc1 20%);
}
@media screen and (max-width:800px) {
	#problem .balloon_area {
		background: url(https://l-pack.site/wp-content/themes/l-pack/images/lpack_05.png) no-repeat left -5px bottom -10px;
		background-size: 30%;
	}
	#problem .balloon_area .flex {
		flex-direction: column;
	}
	#problem .balloon_01 {
		width: 60%;
		order: 2;
		margin: 0 0 30px auto;
	}
	#problem .balloon_02 {
		width: 70%;
		order: 1;
		margin: 40px 0 24px 0;
	}
	#problem .question {
		text-align: right;
	}
}
@media screen and (max-width:640px) {
	#problem .balloon_area {
		background: url(https://l-pack.site/wp-content/themes/l-pack/images/lpack_05.png) no-repeat left -5px bottom -7px;
		background-size: 30%;
	}
	#problem .balloon {
		padding: 10px 0;
	}
	#problem .balloon::before {
		margin-left: -6px;
		border: 6px solid transparent;
		border-top: 10px solid #3cafce
	}
	#problem .balloon_01 {
		width: 70%;
		margin: 0 0 20px auto;
	}
	#problem .balloon_02 {
		width: 90%;
		margin: 30px 0 20px 0;
	}
	#problem .question {
		font-size: 18px;
	}
}

/* --- エルパックでビジネス加速！ ---*/
#acceleration {
	position: relative;
	background: linear-gradient(to right, #caedf1, #e8f5e0);
	padding: 120px 0 100px 0;
	margin-bottom: 90px;
}
#acceleration::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -50px;
	border: 50px solid transparent;
	border-top: 40px solid #fff;
}
#acceleration .read {
	background: linear-gradient(to right, #3cafce, #38d277);
	max-width: 900px;
	width: 86%;
	margin: 0 auto;
	color: #fff;
	padding: 20px 0;
}
#acceleration .read p {
	text-align: center;
	margin: 15px 0;
	font-size: 12px;
	font-size: clamp(11px, 1.5vw, 15px);
}
#acceleration .read p strong {
	color: #ffffc1;
	font-size: 19px;
	font-size: clamp(14px, 1.8vw, 22px);
	font-weight: bold;
}
#acceleration .inner {
	background: #fff;
	max-width: 900px;
	width: 86%;
	margin: 0 auto 50px auto;
	box-sizing: border-box;
	padding: 50px 0 30px 0;
}
#acceleration ul {
	display: flex;
	flex-wrap: wrap;
	width: 92%;
	margin: 20px auto 0 auto;
	align-items: stretch;
}
#acceleration ul li {
	width: calc(50% - 1px);
	border-bottom: 1px solid #ccc;
	padding: 20px 0;
	text-align: center;
}
#acceleration ul li .wow {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}
#acceleration ul li:nth-child(2n) {
	border-left: 1px solid #ccc;
}
#acceleration ul li:last-child {
	border: 0;
	margin: 0 auto;
	width: 100%;
}
#acceleration ul li .illust {
	width: 70%;
	flex: 1;
	align-self: center;
	margin-bottom: 10px;
}
#acceleration ul li:nth-child(1) .illust {
	padding-top: 5%;
}
#acceleration ul li:nth-child(4) .illust {
	padding-top: 5%;
}
#acceleration ul li:last-child .illust {
	width: 36%;
}
#acceleration ul li p {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}
#acceleration ul li p strong {
	color: #ff5c4d;
}
#acceleration ul li p.note {
	font-weight: normal;
	font-size: 10px;
	margin-top: 6px;
}
@media screen and (min-width:641px) and (max-width:950px) {
	.midway_br {
		display: block;
	}
}
@media screen and (max-width:640px) {
	#acceleration {
		padding: 60px 0 50px 0;
		margin-bottom: 60px;
	}
	#acceleration::before {
		margin-left: -30px;
		border: 30px solid transparent;
		border-top: 20px solid #fff;
	}
	#acceleration .read {
		padding: 10px 0;
	}
	#acceleration .inner {
		margin: 0 auto 30px auto;
		padding: 50px 0 10px 0;
	}
	#acceleration ul {
		flex-direction: column;
	}
	#acceleration ul li {
		width: 100%;
	}
	#acceleration ul li:nth-child(1) {
		padding-top: 0;
	}
	#acceleration ul li:nth-child(2n) {
		border-left: 0;
	}
	#acceleration ul li:nth-child(1) .illust,
	#acceleration ul li:nth-child(4) .illust {
		padding-top: 0;
	}
	#acceleration ul li .illust,
	#acceleration ul li:last-child .illust {
		width: 46%;
	}
}

/* --- エルパックが選ばれる5つの理由 --- */
#reason .flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 980px;
	width: 90%;
	margin: 0 auto 80px auto;
}
#reason ul.reason_list {
	order: 2;
	flex: 1;
	margin: 0 0 0 50px;
}
#reason ul.reason_list li {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	letter-spacing: 0;
}
#reason ul.reason_list li .num {
	max-width: 123px;
	width: 18%;
	margin-top: -10px;
}
#reason ul.reason_list li p {
	width: 80%;
	font-size: 28px;
	font-size: clamp(20px, 3.5vw, 43px);
	font-weight: bold;
	line-height: 1.1;
}
#reason ul.reason_list li p strong {
	color: #b9935f;
}
#reason ul.reason_list li p.note {
	width: 80%;
	margin: 8px 0 30px auto;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.6;
}
.slider {
	width: 40%;
	order: 1;
}
.slick-dots li,
.slick-dots li button {
	margin: 0;
	padding: 0;
	width: 12px;
	height: 12px;
}
.slick-dots li button:before {
	content: '';
	width: 5px;
	height: 5px;
	background: #777;
}
@media screen and (max-width:900px) {
	#reason ul.reason_list {
		margin: 0 0 0 30px;
	}
}
@media screen and (max-width:640px) {
	#reason .flex {
		flex-direction: column;
		width: 100%;
		margin: 0 auto 60px auto;
	}
	#reason ul.reason_list {
		order: 1;
		width: 90%;
		margin: 30px auto;
	}
	#reason ul.reason_list li p {
		font-size: 26px;
	}
	#reason ul.reason_list li p.note {
		width: 100%;
		margin: 8px 0 25px 0;
	}
	.slider {
		width: 100%;
		order: 2;
	}
	.slider .work {
		margin: 0 10px 10px 10px;
	}
}

/* --- エルパックの料金 ---*/
#price {
	background: linear-gradient(to right, #caedf1, #e8f5e0);
	padding: 90px 0 90px 0;
	margin-bottom: 90px;
}
#price > div {
	font-size: 52px;
	text-align: center;
	font-weight: bold;
	line-height: 1.1;
}
#price > div .unit {
	font-size: 40%;
}
#price p {
	text-align: center;
	font-size: 12px;
	margin-top: 15px;
}
@media screen and (max-width:640px) {
	#price {
		padding: 60px 0 60px 0;
		margin-bottom: 60px;
	}
	#price > div {
		font-size: 45px;
	}
}

/* --- ご利用の流れ ---*/
#flow {
	max-width: 900px;
	width: 86%;
	margin: 0 auto 90px auto;
}
#flow .wrapper {
	display: grid;
	grid-template-columns: 28.5% 20% 20% 28.5%;
	column-gap: 1%;
	row-gap: 1.8%;
}
#flow .step1 {
	grid-column: 1 / 5;
}
#flow .step2 {
	grid-column: 1 / 2;
	grid-row: 2 / 4;
}
#flow .step7 {
	grid-column: 4 / 5;
	grid-row: 2 / 4;
}
#flow .box {
	position: relative;
	border: 1px solid #ccc;
	padding: 20px 0;
	box-sizing: border-box;
}
#flow .box h2 {
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
	font-size: 19px;
	font-size: clamp(14px, 1.8vw, 19px);
}
#flow .box h2 .step_num {
	color: #ff5c4d;
	text-align: center;
}
#flow .box p {
	text-align: center;
	font-size: 12px;
	font-size: clamp(10px, 1.0vw, 12px);
}
#flow .illust {
	width: 80%;
	margin: 20px auto 0 auto;
}
#flow .step1 {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
#flow .step1 .illust {
	width: 12%;
	margin: 0 5%;
}
#flow .step1 .text_area {
	flex: 1;
}
#flow .request_btn .btn a {
	width: 100%;
}
#flow p.note {
	text-align: right;
	margin: 25px 0 0 0;
	font-size: 11px;
}
@media screen and (max-width:640px) {
	#flow {
		margin-bottom: 60px;
	}
	#flow .wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
		row-gap: 10px;
	}
	#flow .step1 {
		grid-column: 1 / 3;
		padding: 20px 30px;
	}
	#flow .step2 {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
		padding: 20px 30px;
	}
	#flow .step3 {
		grid-column: 1 / 2;
	}
	#flow .step4 {
		grid-column: 2 / 3;
	}
	#flow .step5 {
		grid-column: 1 / 2;
	}
	#flow .step6 {
		grid-column: 2 / 3;
	}
	#flow .step7 {
		grid-column: 1 / 3;
		grid-row: 5 / 6;
		padding: 20px 30px;
	}
	#flow .step1 h2,
	#flow .step1 h2 .step_num,
	#flow .step1 p,
	#flow .step2 h2,
	#flow .step2 h2 .step_num,
	#flow .step2 p,
	#flow .step7 h2,
	#flow .step7 h2 .step_num,
	#flow .step7 p {
		text-align: left;
	}
	#flow .illust {
		position: absolute;
		width: 30%;
		right: 10px;
		top: 0;
		bottom: 0;
		margin: auto;
		display: flex;
		align-items: center;
	}
	#flow .step1 .illust {
		align-items: flex-start;
		top: 13%;
		right: 7%;
	}
	#flow .illust.pc_only {
		display: none;
	}
	#flow p.note {
		margin: 15px 0 0 0;
	}
}


/* --- お客様の声 ---*/
#voice {
	background: linear-gradient(to right, #caedf1, #e8f5e0);
	padding: 90px 0 90px 0;
	margin-bottom: 90px;
}
#voice .box {
	max-width: 900px;
	width: 86%;
	box-sizing: border-box;
	margin: 20px auto;
	background: #fff;
	border-radius: 12px;
	padding: 20px 25px;
	display: flex;
	align-items: center;
}
#voice .box .illust {
	max-width: 100px;
	width: 14%;
	margin-right: 20px;
}
#voice .box p {
	flex: 1;
	font-size: 16px;
	font-size: clamp(12px, 1.4vw, 16px);
}
@media screen and (max-width:640px) {
	#voice {
		padding: 60px 0 50px 0;
		margin-bottom: 60px;
	}
	#voice .box {
		flex-direction: column;
	}
	#voice .box .illust {
		width: 30%;
		margin: 0 0 10px 0;
	}
	#voice .box p {
		text-align: justify;
		font-size: 13px;
		line-height: 1.9;
		letter-spacing: 0;
	}
}

/* --- よくある質問 ---*/
#faq dl {
	max-width: 900px;
	width: 86%;
	margin: 0 auto;
	margin-bottom: 90px;
	font-size: 18px;
	border-top: 1px solid #ccc;
}
#faq dl dt {
	display: flex;
	font-weight: bold;
	padding-top: 30px;
}
#faq dl dd {
	display: flex;
	padding: 8px 0 30px 0;
	border-bottom: 1px solid #ccc;
}
#faq dl dt span,
#faq dl dd span {
	flex: 1;
}
#faq dl dt::before,
#faq dl dd::before {
	display: inline-block;
	content: 'Q';
	background: #3cafce;
	width: 30px;
	height: 30px;
	font-size: 19px;
	text-align: center;
	color: #fff;
	border-radius: 50%;
	margin-right: 10px;
}
#faq dl dd::before {
	content: 'A';
	background: #ff5c4d;
}
@media screen and (max-width:640px) {
	#faq dl {
		font-size: 14px;
		margin-bottom: 60px;
	}
	#faq dl dt::before,
	#faq dl dd::before {
		width: 22px;
		height: 22px;
		font-size: 14px;
	}
	#faq dl dt {
		padding-top: 20px;
	}
	#faq dl dd {
		padding: 8px 0 20px 0;
	}
}

/* --- 想い ---*/
#thought {
	padding: 90px 20px;
	margin-bottom: 90px;
	background: url(https://l-pack.site/wp-content/themes/l-pack/images/lpack_24.png) no-repeat center bottom 20%;
	background-size: 100%;
}
#thought h1 {
	color: #fff;
}
#thought p {
	text-align: center;
	font-size: 13px;
	font-size: clamp(11px, 1.2vw, 16px);
	color: #000;
	line-height: 2.3;
}
@media screen and (max-width:1080px) {
	#thought {
		background: url(https://l-pack.site/wp-content/themes/l-pack/images/lpack_24.png) no-repeat center bottom 20%;
		background-size: 130%;
	}
}
@media screen and (max-width:640px) {
	#thought {
		padding: 60px 20px;
		margin-bottom: 60px;
		background: url(https://l-pack.site/wp-content/themes/l-pack/images/lpack_24.png) no-repeat center bottom;
		background-size: cover;
	}
	#thought p {
		text-align: center;
		font-size: 13px;
		color: #000;
		line-height: 2.3;
	}
}

/* --- Footer ---*/
footer {
	padding: 30px;
	margin-top: 100px;
	background: #efefef;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
footer ul {
	display: flex;
	border-left: 1px solid #444;
}
footer ul li {
	font-size: 14px;
	line-height: 1.1;
	border-right: 1px solid #444;
	padding: 0 15px;
}
footer .copyright {
	font-size: 10px;
	text-align: right;
}
@media screen and (max-width:720px) {
	footer {
		padding: 30px 0 10px 0;
		flex-direction: column;
	}
	footer ul {
		flex-direction: column;
		border: 0;
		margin-bottom: 20px;
	}
	footer ul li {
		border: 0;
		padding: 0 0 10px 0;
		font-size: 13px;
		text-align: center;
	}
	footer .copyright {
		text-align: center;
		width: 100%;
		border-top: 1px solid #ccc;
		padding-top: 10px;
	}
}
@media screen and (max-width:640px) {
	footer {
		margin-top: 60px;
	}
}


/*-------------------------------------------
 2nd Page
-------------------------------------------*/
.second_page {
	background: linear-gradient(to right, #caedf1, #e8f5e0);
	min-height: 100vh;
}
.second_page main {
	max-width: 900px;
	width: 88%;
	margin: 0 auto;
	background: #fff;
	min-height: 100vh;
	box-sizing: border-box;
	padding-bottom: 100px;
}
h1.page_title {
	color: #3cafce;
	text-align: center;
	font-size: 20px;
	font-size: clamp(18px, 3.6vw, 30px);
	margin-bottom: 50px;
	line-height: 1.3;
	padding-top: 80px;
}
@media screen and (max-width:640px) {
	.second_page main {
		padding-bottom: 60px;
	}
	h1.page_title {
		padding-top: 40px;
	}
}


/*-------------------------------------------
 Request Page
-------------------------------------------*/
input:not([type="checkbox"]), select, textarea {
	border: 1px solid #ccc;
	font-size: 16px;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
	border-radius: 0;
}
select {
	-webkit-appearance:auto; -moz-appearance:auto; appearance:auto;
	color: #444;
}
input[type="submit"] {
	font-size: 20px;
	font-size: clamp(16px, 2.5vw, 20px);
	line-height: 1.1;
	display: block;
	color: #fff;
	background: linear-gradient(to right, #ff5c4d, #ffba19);
	max-width: 300px;
	width: 65%;
	margin: 60px auto 0 auto;
	text-align: center;
	box-sizing: border-box;
	padding: 16px 0;
	letter-spacing: 0.1em;
	cursor: pointer;
	border: 0;
	border-radius: 0;
}
input[type="submit"]:hover {
	opacity: 0.7;
}

.request dl {
	max-width: 500px;
	width: 88%;
	margin: 0 auto;
}
.request dl dt {
	width: 100%;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: bold;
}
.request dl dd {
	width: 100%;
	margin-bottom: 30px;
	position: relative;
}
.request .required {
	display: inline-block;
	margin-left: 3px;
	text-align: center;
	font-size: 10px;
	color: #fff;
	background: #ff5c4d;
	padding: 3px 6px;
	border-radius: 3px;
	line-height: 1.1;
}
.privacy_policy {
	width: 100%;
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid #ccc;
	font-size: 11px;
	height: 250px;
	overflow-y: scroll;
	margin-bottom: 20px;
}
.privacy_policy h2 {
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 10px;
}
.privacy_policy h3 {
	font-weight: bold;
	font-size: 13px;
	margin-top: 20px;
}
.request input[type="checkbox"] {
	-webkit-appearance:auto; -moz-appearance:auto; appearance:auto;
	width: 15px;
	cursor: pointer;
}
.request input[type="checkbox"]:checked {
	background: #3cafce;
}

#l-pack.request .wpcf7-not-valid-tip {
	position: absolute;
	top: -35px;
	right: -0.5em;
	font-size: 11px;
	color: #ff5c4d;
}
#l-pack.request .check_area {
	position: relative;
}
#l-pack.request .check_area .wpcf7-list-item {
	margin: 0;
}
#l-pack.request .check_area .wpcf7-not-valid-tip {
	top: 26px;
	left: 0;
}
@media screen and (max-width:640px) {
	.request .required {
		margin-top: -2px;
	}
	.request dl dt {
		font-size: 12px;
	}
	#l-pack.request .check_area .wpcf7-not-valid-tip {
		top: 26px;
		left: 0;
	}
}

/* Confirm */
.confirm dl {
	max-width: 500px;
	width: 88%;
	margin: 0 auto;
}
.confirm dl dt {
	display: block;
	width: 100%;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: bold;
}
.confirm dl dd {
	display: block;
	width: 100%;
	margin-bottom: 30px;
	position: relative;
	border: 1px solid #ccc;
	font-size: 16px;
	padding: 10px;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 46px;
}
.confirm .wpcf7-previous {
	-webkit-appearance:none; -moz-appearance:none; appearance:none;
	font-size: 13px;
	border: 1px solid #ccc;
	color: #444;
	background: #efefef;
	display: block;
	max-width: 300px;
	width: 65%;
	margin: -10px auto 0 auto;
	padding: 10px 0;
	letter-spacing: 0.1em;
	cursor: pointer;
	border-radius: 0;
	text-align: center;
}
.confirm .wpcf7-previous:hover{
	opacity: 0.7;
}

/* Thanksページ */
.wpcf7-response-output {
	text-align: center;
}
.thanks p {
	text-align: center;
	line-height: 2.0;
	font-size: 13px;
}


/*-------------------------------------------
 プライバシーポリシー Page
-------------------------------------------*/
.privacy .wrapper {
	max-width: 800px;
	width: 88%;
	margin: 0 auto;
}
.privacy h2 {
	font-size: 16px;
	font-weight: bold;
	margin: 60px 0 10px 0;
}
.privacy p {
	margin-bottom: 20px;
	font-size: 14px;
}

/*-------------------------------------------
 特定商取引に基づく表記 Page
-------------------------------------------*/
.law table {
	border-top: 1px solid #ccc;
	line-height: 1.4;
	max-width: 800px;
	width: 88%;
	margin: 0 auto;
}
.law table th {
	border-bottom: 1px solid #ccc;
	font-size: 14px;
	font-weight: bold;
	background: #f8f8f8;
	padding: 12px 20px;
	text-align: right;
	width: 30%;
}
.law table td {
	border-bottom: 1px solid #ccc;
	font-size: 14px;
	padding: 12px 20px;
	width: 70%;
}
.law table td a {
	text-decoration: underline;
}
.law table td a:hover {
	text-decoration: none;
}
@media screen and (max-width:640px) {
	.law table th {
		display: block;
		width: 100%;
		padding: 8px 0;
		text-align: center;
		border: 0;
	}
	.law table td {
		display: block;
		width: 100%;
		padding: 12px 0 24px 0;
	}
}


/*-------------------------------------------
 404 Page
-------------------------------------------*/
.error404 p {
	text-align: center;
	line-height: 2.0;
	font-size: 13px;
}
.back_btn a {
	font-size: 20px;
	font-size: clamp(16px, 2.5vw, 20px);
	line-height: 1.1;
	display: block;
	color: #fff;
	background: linear-gradient(to right, #ff5c4d, #ffba19);
	max-width: 300px;
	width: 60%;
	margin: 30px auto 0 auto;
	text-align: center;
	box-sizing: border-box;
	padding: 16px 0;
	letter-spacing: 0.1em;
}