@charset "utf-8";

/* reset */

html{
	scroll-behavior:smooth;
}

body .main, body .footer{
	margin:0;
	width:100%;
	overflow-x:hidden;
	overflow-y: scroll;
        scrollbar-width: none;
        text-rendering:optimizeSpeed;
        -webkit-text-size-adjust: 100%;
        overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

/*

*{
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin-block-start:0;
	margin-block-end:0;
	margin-inline-start:0;
	margin-inline-end:0;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

*::before,
*::after{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6{
	font-size:1rem;
	font-weight:400;
	margin:0;
	padding:0;
	line-height:1.8;
}

p{
	margin:0;
	padding:0;
}

ul,
ol{
	list-style:none;
	padding:0;
	margin:0;
}

figure,
blockquote,
dl,
dd{
	margin:0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

table th{
	font-weight:400;
	text-align:left;
}

a:not([class]){
	text-decoration-skip-ink:auto;
}

::-webkit-scrollbar {
	display: none;
	-webkit-appearance: none;
}

input,
button,
select,
textarea {
	background: transparent;
	border: none;
	border-radius: 0;
	font-family: inherit;
	outline: none;
	margin:0;
}

select,
select option{
	color:#6C6059 !important;
}

textarea {
	resize: vertical;
}

input[type='radio'] {
	appearance: auto;
}

input[type='submit'],
input[type='button'],
label,
button,
select {
	cursor: pointer;
}

select::-ms-expand {
	display: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-outer-spin-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-outer-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="week"]::-webkit-outer-spin-button,
input[type="week"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-outer-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button,
input[type="date"]::-webkit-inner-spin-button {
	display: none;
}

input[type="number"],
input[type="month"],
input[type="datetime-local"],
input[type="week"],
input[type="time"],
input[type="date"] {
	-moz-appearance: textfield;
}

input[type="date"]::-webkit-clear-button,
input[type="month"]::-webkit-clear-button,
input[type="datetime-local"]::-webkit-clear-button,
input[type="time"]::-webkit-clear-button,
input[type="week"]::-webkit-clear-button {
	-webkit-appearance: none;
}

@media(prefers-reduced-motion:reduce){
	*{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
		scroll-behavior:auto !important;
	}
}

*/

/* common */

body{
	background:#fff;
	color:#000;
	font-weight:400;
	line-height:1.8;
	margin:0;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}

.main a{
	color:#000;
	transition: .5s;
	text-decoration:none;
	-webkit-tap-highlight-color: transparent;
}

.main a:hover{
	color:#000;
	text-decoration:none;
}

/* layout */

.main{
	display:block;
	margin:0 auto;
}

/* parts */

.img-fluid{
	display:block;
	max-width:100%;
	width:100%;
	height:auto;
}

/* lp */

.main .fv_area{
	height:calc(100vw / 750 * 1230);
	position:relative;
	overflow: hidden;
	background:url(https://d2w53g1q050m78.cloudfront.net/wwwsutekinistcom/uploads/dist/img/lp/vcbsp2512-c/a01-c.webp) 0 0 no-repeat;
	background-size:contain;
}

.main .fv_area .button{
	position:absolute;
	bottom:min(calc(100vw / 750 * 40), 40px);
	left:min(calc(100vw / 750 * 13), 20px);
/*	left:calc(100vw / 750 * 10);*/
	width:calc(100vw / 750 * 705);
	z-index:2;
}

.main .reg_area{
	height:calc(100vw / 750 * 1204);
	position:relative;
	overflow: hidden;
	background:url(https://d2w53g1q050m78.cloudfront.net/wwwsutekinistcom/uploads/dist/img/lp/vcbsp2512/reg_img.webp) 0 0 no-repeat;
	background-size:cover;
}

.main .reg_area .button{
	position:absolute;
	bottom:min(calc(100vw / 750 * 50), 50px);
	left:min(calc(100vw / 750 * 15), 24px);
/*	left:calc(100vw / 750 * 18);*/
	width:calc(100vw / 750 * 701);
	z-index:2;
}

.main .lp_content a {
	opacity: 1;
	transition: opacity 0.3s ease;
}
.main .lp_content a:hover {
	opacity: 0.7;
}

.main .b_part{
	margin: 0 0 calc(100vw / 750 * 50);
}

.main .video_wrap01{
	width: 100%;
	padding: 0;
	margin: 0 0 80px;
}

.main .video_wrap01 video{
	width: 100%;
	aspect-ratio: 16 / 9; 
	height: auto; 
	display: block;
}

.main .video_wrap02{
    width: 100%;
    height: 100vh;
    overflow: hidden;
	position: relative;
}

.main .video_wrap02 video{
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 画面いっぱいにトリミングして表示 */
}

.main .video_wrap02 .mute{
	position:absolute;
	top:calc(100vw / 750 * 30);
	left:calc(100vw / 750 * 30);
	display:inline-block;
	font-size:calc(100vw / 750 * 48);
	color:#fff;
	cursor:pointer;
	z-index:3;
}

.main .video_wrap03{
	width: 100%;
	padding: 0;
	margin: 0;
}

.main .video_wrap03 video{
	width: 100%;
	aspect-ratio: 1 / 1; 
	height: auto; 
	display: block;
}

.footer{
	padding-bottom:calc(100vw / 750 * 140);
}

.footer .product{
	margin-bottom:calc(100vw / 750 * 48);
}

	.form_container_ec {
		display: none;
	}

	.form_container_sp_ec {
		display: bloack;
	}



@media (min-width:751px) {

	body .main, body .footer{
		width:750px;
		margin:0 auto;
	}
	
	/* lp */
	
	.main .fv_area{
		max-height: 1230px;
	}

	.main .fv_area .button{
		max-width: 705px;
	}

	.main .reg_area{
		max-height: 1204px;
	}

	.main .reg_area .button{
		max-width: 701px;
	}

	.main .b_part{
		margin: 0 0 50px;
	}

	.main .video_wrap01{
		max-height: 421.875px;
	}
		
	.main .video_wrap02{
		max-height: 1327px;
	}

	.main .video_wrap02 .mute{
		top:30px;
		left:160px;
		font-size:32px;
	}
	
	.main .video_wrap03{
		max-height: 750px;
	}
		
	.footer{
		padding-bottom:140px;
	}
	
	.footer .product{
		margin-bottom:48px;
	}

	.form_container_ec {
		display: block;
	}

	.form_container_sp_ec {
		display: none;
	}

}