@charset "UTF-8";

h2{
	font-size: 143.7%;
	line-height: 1.3;
	color: var(--red);
}
h2 span{
	font-size: 269%;
}
h3{
	font-size: 256%;
	line-height: 1.3;
	margin-bottom: var(--size-21px);
}
h4{
	font-size: 225%;
	line-height: 1.5;
	font-weight: 700;
	color: var(--red);
	margin-bottom: var(--size-14px);
}
h5{
	font-size: 131%;
	line-height: 1.5;
	font-weight: 700;
	margin-bottom: var(--size-7px);
}

#lineL,
#lineR{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 10px;
	height: 100vh;
	background: url("/parts/img/line.svg") left top repeat-y;
	background-size: 100% auto;
}
#lineR{
	left: inherit;
	right: 0;
}

header{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 998;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100vw;
	padding: var(--size-56px) var(--baseBoxpLR);
	line-height: normal;
	transition: .1s;
}
header:hover{
	background: rgba(255 , 255 , 255 , 0.97);
}
header h1{
	position: absolute;
	left: var(--baseBoxpLR);
	top: var(--size-28px);
	font-size: 75%;
	text-align: center;
	padding-bottom: 0.5em;
}
header h1 strong{
	display: block;
	white-space: nowrap;
	margin-bottom: 1em;
}
header h1 span{
	font-size: 116%;
}
header h1 img{
	max-width: 135px;
}
header ul{
	display: flex;
	align-items: center;
}
header li{
	display: flex;
	align-items: center;
}
header li a{
	display: block;
	padding: var(--size-28px);
	font-weight: 700;
}
header li a span{
	display: block;
	padding-bottom: 0.5em;
	border-bottom: solid 1px rgba(255, 255, 255, 0);
}
header li a:hover span{
	border-bottom: solid 1px #222;
}
header li::after{
	content: "｜";
	padding-bottom: 0.5em;
}
header li:last-child::after{
	content: "";
}
header p{
	padding-bottom: 0.5em;
	margin-left: var(--size-28px);
}
header p img{
	width: 28px;
}

#footNav{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: var(--size-28px);
}
#footNav ul{
	display: flex;
	justify-content: center;
	align-items: center;
}
#footNav li{
	padding: 0 var(--size-7px);
}
#footNav li a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 384px;
	max-width: 42vw;
	border: solid 4px var(--red);
	border-radius: 999px;
	padding: var(--size-28px);
	background: #fff;
	color: var(--red);
	font-weight: 700;
	font-size: 112%;
}

#mv{
	margin-top: var(--size-196px);
}
#mv li img,
#mv03 li img{
	width: 384px !important;
	border-radius: 10px;
	margin: var(--size-14px);
}
#mv{
	width: 100%;
	overflow: hidden;
}
#mv01,
#mv02,
#mv03{
	width: 100%;
}
#mv02{
	margin-top: var(--size-28px);
}
#mv03{
	margin-bottom: var(--size-168px);
}


#topCon{
	display: flex;
	justify-content: space-between;
	margin: var(--size-168px) auto;
}
#topCon > div{
	width: calc(50% - var(--size-14px));
}
#topCon > div:first-child{
	order: 2;
}
#topCon > div:first-child img{
	border-radius: 10px;
}
#topCon > div:last-child{
	order: 1;
}
#topCon h2{
	margin-bottom: var(--size-42px);
}
#topCon h2 strong{
	display: block;
	font-size: 270%;
	line-height: 1.3;
}

#concept{
	max-width: 964px;
}
#concept #redBox{
	background: var(--red);
	border-radius: 10px;
	padding: var(--size-56px) var(--size-42px);
	margin-top: var(--size-56px);
	color: #fff
}

#feature{
	position: relative;
	margin: var(--size-168px) 0;
	padding: var(--size-126px) 0 var(--size-140px) 0;
	background: var(--red3);
}
#feature #featureLogo{
	position: absolute;
	left: calc(50% - var(--size-56px));
	top: var(--size--56px);
	width: var(--size-112px);
}
#feature h3{
	color: var(--red);
	text-align: center;
}
#feature h3 span{
	font-size: 80%;
}
#feature .listBox > ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
}
#feature .listBox > ul > li{
	width: calc(100% / 3);
	padding: var(--size-14px);
}
#feature .listBox > ul > li p{
	padding: 0 0.5em;
}
#feature #genre{
	position: relative;
	background: #fff;
	padding: var(--size-56px);
	margin-top: var(--size-28px);
}
#feature #genre > div{
	position: absolute;
	left: var(--size-14px);
	top: var(--size-14px);
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--red);
}
#feature #genre > div#dotTR{
	left: inherit;
	right: var(--size-14px);
}
#feature #genre > div#dotBL{
	top: inherit;
	bottom: var(--size-14px);
}
#feature #genre > div#dotBR{
	top: inherit;
	left: inherit;
	right: var(--size-14px);
	bottom: var(--size-14px);
}
#feature #genre h5{
	display: flex;
	justify-content: center;
	align-items: center;
}
#feature #genre h5 img{
	display: block;
	width: 24px;
}
#feature #genre h5 span{
	display: block;
	margin-left: 0.3em;
}
#feature #genre ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
}
#feature #genre li{
	border-radius: 30px;
	background: var(--red);
	color: #fff;
	font-weight: 700;
	margin: var(--size-7px);
	padding: var(--size-21px) var(--size-42px);
}
#feature #genreS{
	display: block;
} 

#price h3{
	text-align: center;
}
#price p{
	text-align: center;
	margin-bottom: var(--size-14px);
}
#price table{
	width: 100%;
	border-collapse:  collapse;
}
#price th,
#price td{
	border: solid 1px #fff;
	text-align: center;
	padding: var(--size-21px) var(--size-7px);
	line-height: 1.3;
}
#price th{
	font-size: 112%;
}
#price td{
	padding: var(--size-42px) var(--size-7px);
}
#price th{
	background: var(--red);
	color: #fff;
}
#price tr:nth-child(odd) td{
	background: var(--red2);
}
#price tr:nth-child(even) td{
	background: var(--red3);
}
#price td strong{
	display: block;
}
#price td span{
	font-size: 175%;
}

#flow{
	margin-top: var(--size-168px);
	margin-bottom: var(--size-168px);
}
#flow h3{
	text-align: center;
}
#flowBox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
#flowBox a{
	text-decoration: underline !important;
}
#flowBox a:hover{
	text-decoration: none !important;
}
#flowBox .btn a{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	border: solid 4px var(--red);
	border-radius: 999px;
	padding: var(--size-28px);
	background: #fff;
	color: var(--red);
	font-weight: 700;
	font-size: 112%;
	text-decoration: none !important;
}
#flowBox > div,
#pointBox{
	width: calc(98% / 2);
	border-radius: 10px;
	padding-bottom: var(--size-14px);
	overflow: hidden;
	background: var(--red2);
	margin-bottom: var(--size-28px);
}
#pointBox{
	width: 100%;
	border: solid 6px var(--red);
}
#flowBox > div h5,
#pointBox h5{
	background: var(--red);
	text-align: center;
	color: #fff;
	line-height: 1.1;
	padding: var(--size-21px) 0;
}
#flowBox > div h5 span,
#pointBox h5 span{
	font-size: 75%;
}
#flowBox > div p,
#flowBox > div dl,
#pointBox p,
#pointBox ul{
	margin: var(--size-28px);
}
#flowBox > div p strong,
#flowBox > div dt{
	color: var(--red);
	font-weight: 700;
}
#pointBox p:first-child{
	margin-bottom: 0;
}
#pointBox ul{
	margin-top: 0.5em;
}
#pointBox ul{
	display: flex;
	flex-wrap: wrap;
}
#pointBox ul li{
	margin: 0 1em 0.5em 0;
	font-weight: 700;
	color: var(--red);
	line-height: 1.3;
}
#pointBox ul li span{
	font-size: 87%;
}
#feelsafe{
	background: #fff;
	margin: var(--size-28px);
	padding: var(--size-42px) var(--size-28px);
}
#feelsafe h6{
	text-align: center;
	font-size: 112%;
	line-height: normal;
}
#feelsafe dt{
	font-weight: 700;
	color: var(--red);
	margin-top: 0.5em;
}
#feelsafe dd span{
	font-size: 87%;
}

#faq h3{
	text-align: center;
}
#faq h5{
	margin-top: 1em;
	margin-bottom: 0.6em;
	padding: 0.5em 1.5em;
	background: #f7f7f7;
}

#faq dt{
	font-weight: 700;
	color: var(--red);
	line-height: 1.3;
	border-bottom: dotted 1px #ddd;
	padding: 0.5em 1.5em;
	padding-left: 3.5em;
	text-indent: -1.9em;
	margin-bottom: 0.5em;
}
#faq dt::before{
	content: "Q：";
}
#faq dd{
	line-height: 1.3;
	padding: 0.5em 1.5em;
	padding-left: 3.5em;
	text-indent: -1.9em;
	margin-bottom: 1.2em;
}
#faq dd::before{
	content: "A：";
}
#faq a{
	text-decoration: underline !important;
}
#faq a:hover{
	text-decoration: none !important;
}

#profile{
	max-width: 964px;
	margin: var(--size-168px) auto;
}
#profile #cameraman{
	width: 80%;
	max-width: 280px;
	margin: 0 auto;
	margin-bottom: var(--size-56px);
}
#profile h6{
	text-align: center;
	margin-bottom: 1em;
}
#profile h6 strong{
	font-size: 112%;
}
#profile p{
	margin-bottom: 2em;
}
#profile dl{
	display: flex;
	border-bottom: dotted 1px #ddd;
	margin-top: 1em;
}
#profile dt{
	width: 12em;
	padding: 0.5em;
	padding-right: 3em;
	font-weight: 700;
	text-align: right;
}
#profile dd{
	width: calc(100% - 12em);
	padding: 0.5em;
}
#profile dd span{
	font-size: 87%;
}

#privacypolicy{
	background: #f7f7f7;
	font-size: 87%;
	padding-top: var(--size-70px);
	padding-bottom: var(--size-70px);
}
#privacypolicy h5{
	margin: var(--size-28px) 0;
	text-align: center;
}
#privacypolicy dl{
	border-bottom: var(--brderDot1px);
	padding-bottom: var(--size-28px);
	margin: var(--size-28px) 0;
}
#privacypolicy dl:last-child{
	border-bottom: none;
}
#privacypolicy dt{
	font-weight: 700;
}
#privacypolicy dd ul{
	padding: 0.5em 2em;
}
#privacypolicy dd li{
	list-style: decimal;
	margin-bottom: 0.2em;
}
#privacypolicy a{
	text-decoration: underline !important;
}
#privacypolicy a:hover{
	text-decoration: none !important;
}

#copyright{
	font-weight: 700;
	line-height: normal;
	text-align: center;
	font-size: 87%;
	margin-top: var(--size-168px);
	padding-bottom: var(--size-280px);
}



@media screen and (max-width: 1380px) {



}



@media screen and (max-width: 1366px) {/* iPad pro　landscape */



}



@media screen and (max-width: 1194px) {/* iPad pro 11　landscape */



}



@media screen and (max-width: 1024px) {/* iPad pro　portrait */

	#topCon h2 strong{
		font-size: 228%;
	}


}



@media screen and (max-width: 768px) {/* TB */



}



@media screen and (max-width: 759px) {/* SP */

	h3{
		font-size: 200%;
	}
	h4{
		font-size: 180%;
	}

	#lineL,
	#lineR{
		width: 1.5vw;
	}

	header{
		position: relative;
		z-index: 10000;
		padding: var(--size-56px) var(--baseBoxpLR);
		line-height: normal;
		transition: 0S;
		background: none;
	}
	header h1{
		position: absolute;
		top: 8vw;
		left: 30%;
		width: 40vw;
		padding-bottom: 0;
	}
	header h1 img{
		max-width: inherit;
		width: 23vw;
	}
	header ul{
		position: fixed;
		justify-content: center;
		left: 0;
		bottom: 0;
		width: 100vw;
		background: #fff;
	}
	header li a{
		padding: var(--size-42px) var(--size-28px);
	}
	header li a span{
		padding-bottom: 0;
		border-bottom: none;
	}
	header li a:hover span{
		border-bottom: none;
	}
	header li::after{
		padding-bottom: 0;
	}
	header p{
		padding-bottom: 0;
		margin-left: 0;
		margin-right: var(--size-28px);
	}
	header p img{
		width: 10vw;
	}

	#footNav{
		bottom: 20vw;
		padding: 0;
	}
	#footNav li a{
		width: 42vw;
		padding: var(--size-14px) 0;
	}

	#mv{
		margin-top: var(--size-196px);
	}
	#mv li img,
	#mv03 li img{
		width: 54vw !important;
	}

	#topCon{
		flex-wrap: wrap;
		justify-content: center;
		margin-bottom: var(--size-28px);
	}
	#topCon > div{
		width: 100%;
	}
	#topCon > div:first-child{
		margin-top: var(--size-56px);
	}

	#concept{
		max-width: inherit;
	}

	#feature .listBox > ul > li{
		width: 80vw;
	}

	#feature #genre{
		padding: var(--size-70px) var(--size-28px);
	}
	#feature #genre li{
		border-radius: 4vw;
		padding: var(--size-14px) var(--size-28px);
	}

	#price th{
		font-size: 100%;
	}
	#price td span{
		font-size: 150%;
	}

	#flowBox{
		justify-content: center;
	}
	#flowBox > div{
		width: 80vw;
	}
	#pointBox{
		width: 100%;
	}

	#faq h3{
		font-size: 125%;
	}

	#profile{
		max-width: inherit;
	}
	#profile #cameraman{
		width: 45vw;
		max-width: inherit;
	}
	#profile dt{
		width: 9.5em;
		padding-right: 1.5em;
	}
	#profile dd{
		width: calc(100% - 11em);
	}

#copyright{
	padding-bottom: 60vw;
}

}