/* = Common Layout
-------------------------------------------------------------- */
.content-width {
	position: relative;
	box-sizing: border-box;
	max-width: 1040px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

.sec-inner {
	padding: 100px 0;
	position: relative;
}

.bg-black {
	background: #111;
	color: #fff;
}

.bg-black-grad {
	background: linear-gradient(to top, #111, #181818 150px, #111 150px);
}

/* Component
----------------------------------------------------------------- */
/* btn */
.btn {
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 250px;
	padding: 20px 30px;
	margin: 0 auto;
	font-size: 1.8rem;
	color: #fff;
	line-height: 1;
	text-align: left;
	background: #F66E0B;
	border-radius: 30px;
	flex-shrink: 0;
}

.btn::before {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	border-radius: 100%;
	border: 1px solid #fff;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
}

.btn::after {
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	border-width: 1px;
	border-style: solid;
	border-color: transparent #fff #fff transparent;
	transform: translate(50%, -60%) rotate(45deg);
	position: absolute;
	right: 35px;
	top: 50%;
}

.btn:hover {
	opacity: .7;
	text-decoration: none;
}

.btn-sub {
	display: block;
	box-sizing: border-box;
	width: 300px;
	padding: 20px;
	line-height: 1;
	text-align: center;
	background: #fff;
	border: 1px solid #888;
	flex-shrink: 0;
}

.btn-submit {
	margin: 0 auto;
	border: none;
	text-align: center;
}

/* ttl */
.ttl {
	font-size: 3.2rem;
	line-height: 1.3;
	font-weight: 400;
	margin: 0;
}

.item .ttl {
	font-size: 2.6rem;
	margin-bottom: 20px;
}

.sec-ttl {
	text-align: center;
	margin: 0 0 50px;
	font-size: 3.6rem;
	font-weight: 400;
	line-height: 1.3;
	overflow: hidden;
}

.sec-ttl span {
	position: relative;
	display: inline-block;
	margin: 0 20px;
	padding: 0 20px;
}

.sec-ttl span::before,
.sec-ttl span::after {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #5d5d5d;
	position: absolute;
	top: 50%;
}

.sec-ttl span::before {
	right: 100%;
}

.sec-ttl span::after {
	left: 100%;
}

.black-ttl {
	padding: 30px;
	margin: 0 0 75px;
	background: #000;
	font-size: 2.6rem;
	line-height: 1.3;
	font-weight: 400;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	position: relative;
}

.black-ttl::before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-width: 16px 10px 0 10px;
	border-style: solid;
	border-color: #000 transparent transparent transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.sub-ttl {
	font-size: 2.0rem;
	margin: 40px 0 10px;
}

/* text */
.txt-box p {
	margin: 0;
}

.txt-box p + p {
	margin-top: 1em;
}

.read-box {
	text-align: center;
	margin-bottom: 65px;
}

/* list */
.blue-list {
	margin: 1em 0;
}

.blue-list li {
	padding-left: 1.3em;
	text-indent: -1.3em;
	margin: 0.6em 0;
	line-height: 1.3;
}

 .blue-list li::first-letter {
	color: #00FFEA;
}

@media screen and (max-width: 767px) {
	/* btn */
	.btn {
		margin: 0 auto;
	}

	/* ttl */
	.ttl {
		font-size: 2.6rem;
	}

	.item .ttl {
		font-size: 2.1rem;
	}

	.sec-ttl {
		font-size: 2.8rem;
	}

	.black-ttl {
		padding: 20px;
		margin: 0 0 50px;
		font-size: 2.1rem;
	}

	.sub-ttl {
		font-size: 1.8rem;
		margin: 30px 0 10px;
	}
}

/* header
----------------------------------------------------------------- */
#header {
	padding: 25px;
}

/* mv
----------------------------------------------------------------- */
#mv {
	background: url("../images/mv_bg.png") no-repeat center center / cover;
	padding: 350px 0 145px;
	color: #fff;
	overflow-x: hidden;
}

#mv .ttl {
	font-size: 3.8rem;
	padding: 13px 0;
	position: relative;
	z-index: 0;
}

#mv .ttl::before {
	content: '';
	display: block;
	width: 100vw;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}

#mv .ttl span {
	display: inline-block;
	width: calc( 100% - 300px);
}

#mv .txt-box {
	margin-top: 20px;
	font-size: 2rem;
}

#mv .txt-box p {
	margin: 0;
}

#mv .txt-box p::first-letter {
	color: #00FFEA;	
}

#mv .img-box {
	width: 300px;
	position: absolute;
	bottom: 50%;
	right: 20px;
	transform: translateY(50%);
}

@media screen and (max-width: 767px) {
	#mv {
		padding: 300px 0 50px;
	}

	#mv .ttl {
		font-size: 2.8rem;
		text-align: center;
	}

	#mv .ttl span {
		width: 100%;
	}

	#mv .img-box {
		position: static;
		transform: none;
		margin: 20px auto 0;
	}
}

/* intro
----------------------------------------------------------------- */
#intro-sec {
	background: url("../images/bg_white.png") no-repeat top center / 100% auto;
}

#intro-sec .sec-inner {
	padding: 20px 0;
}

#intro-sec .content-box {
	gap: 20px;
	align-items: center;
}

#intro-sec .img-box {
	flex-shrink: 0;
	margin-left: -185px;
}

#intro-sec .txt-box li {
	font-size: 2.4rem;
}

@media screen and (max-width: 767px) {
	#intro-sec .img-box {
		margin: 0;		
	}

	#intro-sec .txt-box li {
		font-size: 2.1rem;
	}
}


/* trouble
----------------------------------------------------------------- */


/* advantage
----------------------------------------------------------------- */
.advantage-bg {
	width: 100%;
	display: flex;
	gap: 1em;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.loop {
	animation: loop 15s linear infinite;
	color: #fff;
	font-size: 12rem;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	background: linear-gradient(90deg, #3190D7 0%, #F94EFF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin: 0;
}

@keyframes loop {
	0%{
		transform: translateX(0);
	}
	100%{
		transform: translateX(-100%);
	}
}

#advantage-sec .content-box {
	gap: 40px;
}

#advantage-sec .item {
	flex-basis: 50%;
	padding: 300px 50px 50px;
}

#advantage-sec .item.item-1 {
	background: url("../images/advantage_img_01.png") no-repeat top center / cover;
}

#advantage-sec .item.item-2 {
	background: url("../images/advantage_img_02.png") no-repeat top center / cover;
}

@media screen and (max-width: 767px) {
	.advantage-bg {
		position: static;
		transform: none;
		margin-bottom: 100px;
	}

	.loop {
		font-size: 5rem;
	}

	#advantage-sec .item {
		padding: 200px 20px 30px;
	}
}

/* about
----------------------------------------------------------------- */
#about-sec .item {
	align-items: center;
	position: relative;
}

#about-sec .item + .item {
	padding-top: 50px;
	margin-top: 50px;
	border-top: 1px solid #222;
}

#about-sec .item + .item::before {
	content: '';
	display: block;
	width: 100%;
	height: 15px;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(-50%);
	background-image: url("../images/about_icon_left.png"), url("../images/about_icon_center.png"), url("../images/about_icon_right.png");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center left, center center, center right;
}

#about-sec .item .img-box,
#about-sec .item .txt-box {
	flex-basis: 50%;
}

#about-sec .item .img-box {
	box-sizing: border-box;
	padding-right: 6%;
}

#about-sec .item .point {
	font-size: 1.3rem;
	margin-bottom: 20px;
}

#about-sec .item .point::first-letter {
	color: #00FFEA;
}

@media screen and (max-width: 767px) {
	#about-sec .item .img-box {
		margin-bottom: 20px;
		padding: 0;
	}
}

/* company
----------------------------------------------------------------- */
#company-sec {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f8f8f8), url("../images/bg_white.png");
	background-repeat: no-repeat, no-repeat;
	background-position: top center, top center;
	background-size: 100% auto, 100% auto;
}

#company-sec .content-box {
	gap: 40px;
}

#company-sec .item {
	align-items: stretch;
	background: #111;
	border-radius: 10px;
	overflow: hidden;
}

#company-sec .item .img-box {
	flex-basis: 38%;
	flex-shrink: 0;
}

#company-sec .item .img-box img {
	height: 100%;
	min-height: 360px;
	object-fit: cover;
}

#company-sec .item .txt-box {
	padding: 50px;
	color: #fff;
}

#company-sec .item .ttl {
	font-size: 2.4rem;
}

#company-sec .sub-box {
	margin-top: 50px;
	align-items: center;
	gap: 20px;
}

#company-sec .sub-box p {
	font-size: 2.4rem;
}

@media screen and (max-width: 767px) {
	#company-sec .item .ttl {
		font-size: 2.0rem;
	}

	#company-sec .item .img-box img {
		min-height: 200px;
	}

	#company-sec .item .txt-box {
		padding: 30px 20px;
	}

	#company-sec .sub-box {
		margin-top: 30px;
	}

	#company-sec .sub-box p {
		font-size: 1.8rem;
	}
}

/* cart
----------------------------------------------------------------- */
/* product */
#product .content-box {
	gap: 30px 80px;
}

#product .img-box {
	flex-basis: 34%;
	flex-shrink: 0;
}

		/* === 販売開始前 ↓ === */
		#product .ttl {
			margin-bottom: 45px;
			font-weight: bold;
		}

		#product .price span {
			font-size: 3.2rem;
			font-weight: bold;
		}
		/* === 販売開始前 ↑ === */

		/* === 販売開始後 ↓ === */
		#product .txt-box .cartjs_box {
			padding: 0 !important;
		}

		#product .txt-box form.cartjs_product_form > * {
			width: 100% !important;
		}

		#product .txt-box .cartjs_cart_in {
			margin-bottom: 0 !important;
		}

		#product .txt-box .cartjs_cart_in strong {
			font-size: 3.2rem !important;
			font-weight: bold !important;
			line-height: 1.3;
		}

		#product .txt-box .cartjs_product_explain {
			margin-top: 45px !important;
		}

		#product .txt-box .cartjs_product_explain > br,
		#product .txt-box .cartjs_product_explain ul > br {
			display: none;
		}

		#product .txt-box table,
		#product .txt-box tbody,
		#product .txt-box tr,
		#product .txt-box th,
		#product .txt-box td {
			display: block;
			width: 100% !important;
			border: 0;
			background: transparent;
			padding: 0 !important;
		}

		#product .txt-box table {
			margin-bottom: 40px !important;
		}

		#product .txt-box th {
			font-size: 2.0rem;
			font-weight: bold !important;
			margin: 40px 0 10px;
		}

		#product .txt-box .cartjs_sales_price td {
			font-size: 3.2rem !important;
			line-height: 1;
		}

		#product .txt-box .cartjs_cart_in {
			text-align: left !important;
			display: flex;
		}

		#product .txt-box .cartjs_cart_in input[type="submit"] {
			display: block;
			box-sizing: border-box;
			width: 250px !important;
			padding: 20px 30px;
			font-size: 1.8rem !important;
			line-height: 1;
			background: #F66E0B !important;
			border-radius: 30px !important;
			flex-shrink: 0;
		}
		/* === 販売開始後 ↑ === */

/* register */
#register {
	margin-top: 80px;
}

/* form */
#myform {
	padding: 50px;
	border: 2px solid #E5E5E5;
}

.m-dl-box dl {
  margin: 0;
  padding: 30px;
  gap: 15px 40px;
}

.m-dl-box dl + dl {
  border-top: 1px solid #eeeeee;
}

.m-dl-box dt {
  flex-basis: 230px;
  font-size: 1.8rem;
  flex-shrink: 0;
}

.m-dl-box dt .required {
  padding: 2px 6px;
  font-size: 1.2rem;
  color: #ffffff;
  background-color: #d83b1b;
  border-radius: 30px;
}

.m-dl-box dt .optional {
  background-color: #666666;
}

.m-dl-box dd {
	flex-grow: 1;
  margin: 0;
}

.m-dl-box dd p {
	margin: 0;
}

.label-box {
	text-align: center;
}

/* notion */
.notion {
	margin-top: 60px;
	padding: 50px;
	background: #f8f8f8;
	border-radius: 10px;
}

.notion-box + .notion-box {
	margin-top: 40px;
}

.notion-box h3 {
	font-size: 1.8rem;
	margin: 0;
}

.notion-box .txt-box {
	padding: 20px 30px;
	border: 1px solid #D5D5D5;
	border-radius: 6px;
	background: #fff;
	height: 190px;
	overflow-y: scroll;
}

@media screen and (max-width: 767px) {
	/* product */
			/* === 販売開始前 ↓ === */
			#product .ttl {
				margin-bottom: 30px;	
			}
			/* === 販売開始前 ↑ === */

			/* === 販売開始後 ↓ === */
			#product .txt-box .cartjs_cart_in input[type="submit"] {
				margin: 0 auto 20px;
			}

			#product .txt-box .cartjs_sk_link_other {
				text-align: center !important;
			}
			/* === 販売開始後 ↑ === */

	/* register */
	#register {
		margin-top: 50px;
	}

	/* form */
	#myform {
		padding: 30px 20px;
	}

	.m-dl-box dl {
		padding: 20px 0;
	}

	.m-dl-box dt {
 	 flex-basis: auto;
 	}

 	.notion {
		padding: 30px 20px;
	}

	.notion-box .txt-box {
		padding: 20px;
	}
}

/* cta
----------------------------------------------------------------- */
.cta-sec {
	background: url("../images/cta_bg.png") no-repeat center center / cover;
	color: #fff;
	text-align: center;
}

.cta-sec .sec-inner {
	padding: 50px 0;
}

.cta-sec .ttl {
	font-size: 3.2rem;
	color: #fff;
	margin-bottom: 50px;
}

.cta-sec .img-box-wrap {
	position: absolute;
	bottom: -20px;
	right: 0;	
}

.sub-cta {
	margin-bottom: 80px;
	align-items: center;
}

.sub-cta .ttl {
	text-align: center;
	margin-bottom: 40px;
}

.sub-cta .txt-box {
	border-top: 2px solid #E5E5E5;
	border-bottom: 2px solid #E5E5E5;
	text-align: center;
	position: relative;
}

.sub-cta .txt-box .inner {
	display: inline-block;
	text-align-last: left;
	padding: 30px 0;
	margin: 0;
}

.sub-cta .txt-box li {
	font-size: 2.4rem;
}

.sub-cta-btn {
	display: inline-block;
	width: auto;
	padding: 10px 30px;
	color: #000;
	background: #fff;
	border-radius: 0;
	position: absolute;
	right: 0;
	top: 100%;
	transform: translateY(-50%);
	white-space: nowrap;
}

.sub-cta-btn::before {
	width: 26px;
	height: 26px;
	border: 1px solid #000;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
}

.sub-cta-btn::after {
	width: 4px;
	height: 4px;
	border-color: transparent #000 #000 transparent;
	transform: translate(50%, -60%) rotate(45deg);
	right: 13px;
	top: 50%;
}

.sub-cta-btn:hover {
	opacity: 1;
	color: rgba(0, 0, 0, 0.7);
}

@media screen and (max-width: 767px) {
	.cta-sec .ttl {
		font-size: 2.4rem;
		margin-bottom: 30px;
	}

	.cta-sec .img-box-wrap {
		position: relative;
		bottom: 0;
		margin-bottom: 20px;
	}

	.sub-cta .txt-box li {
		font-size: 2.1rem;
	}

	.sub-cta-btn {
		padding-right: 60px;
		right: 50%;
		top: 100%;
		transform: translate(50%, -50%);
	}

	.sub-cta-btn::before {
		right: 30px;
	}

	.sub-cta-btn::after {
		right: 43px;
	}
}

/* footer
----------------------------------------------------------------- */
#footer .footer-content {
	border-top: 1px solid #D5D5D5;
	padding: 45px 0 50px;
	align-items: flex-end;
	gap: 20px 100px;
}

#footer .footer-content .logo {
	margin-bottom: 20px;
	text-align: left;
}

#footer .footer-content .copyright {
	flex-shrink: 0;
}

@media screen and (max-width: 767px) {
	#footer .footer-content {
		align-items: center;
	}

	#footer .footer-content .logo {
		text-align: center;
	}
}