@charset "UTF-8";

/* =Reset
-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;word-wrap:break-word;overflow-wrap:break-word;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:inherit;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:super;}
sub{vertical-align:text-bottom;}
input,textarea,select,button{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select,button{*font-size:100%;}
legend{color:#000;}
img {vertical-align:top;}
input[type="radio"],input[type="checkbox"] {vertical-align: -2px;}
label {cursor: pointer;}


/* =Common
-------------------------------------------------------------- */
body {
	text-align: center;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
}
img {
	max-width: 100%;
	height: auto;
}
input[type="submit"], input[type="reset"] {
	appearance: none;
	cursor: pointer;
}

/* clearfix */
.cf:before, .cf:after {content:"";display:table;}
.cf:after {clear:both;}
.clr {clear: both;}


/* =Styles 
-------------------------------------------------------------- */
body {
	font-family: "Noto Sans JP", sans-serif;
	color: #000;
	background: #fff;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 500;
}
a {
	text-decoration: none;
	color: #000;
}
@media ( min-width: 768px ){
	body {
		font-size: 14px;
	}
}
@media ( min-width: 768px ){
	.pc_container {
		min-width: 1100px;
		margin: 0 auto;
	}
	.sp {
		display: none !important;
	}
	.inner {
		max-width: 950px;
		margin: 0 auto;
		padding: 0 75px;
	}
}
@media ( min-width: 768px ){
	.sptab {
		display: none !important;
	}
}
@media ( max-width: 767px ){
	.pc {
		display: none !important;
	}
}
@media ( max-width: 767px ){
	body {
		font-size: 4vw;
	}
	.pc_container {
		width: 100%;
		margin: 0 auto;
	}
	.pctab {
		display: none !important;
	}
	.inner {
		padding: 0 6.666vw;
	}
}
.fw_medium {
	font-weight: 500;
}
.fw_semibold {
	font-weight: 600;
}
.fw_bold {
	font-weight: 700;
}
.fw_extrabold {
	font-weight: 800;
}
.fw_black {
	font-weight: 900;
}
/*-------------------------------
.cta
-------------------------------*/
.cta_wrap {
	position: relative;
}
.cta_wrap.bg {
	background: rgba(255, 255, 255, 0.5);
	padding: 60px 50px 50px;
	box-sizing: border-box;
	width: 700px;
	margin: 0 auto;
}
.follow .cta_wrap {
	padding: 28px 0 5px;
}
.cta_wrap .img_box {
	position: absolute;
	width: 379px;
	height: 48px;
	left: 0;
	right: 0;
	margin: auto;
	top: -26.4px;
}
.install .cta_wrap .img_box {
	width: 416.9px;
	height: 52.8px;
	top: -24px;
}
.cta_wrap .cta {
	width: 401px;
	margin: 0 auto;
}
.install .cta_wrap .cta {
	width: 550px;
}
.cta_wrap .cta a {
	opacity: 1;
	transition: 0.3s;
} 
.cta_wrap .cta a:hover {
	opacity: 0.8;
} 
@media ( max-width: 767px ){
	.cta_wrap.bg {
		padding: 7.333vw 2vw 3.466vw;
		width: 100%;
	}
	.follow .cta_wrap {
		padding: 4.5vw 0 1vw;
	}
	.cta_wrap .img_box {
		width: 58.266vw;
		height: 8vw;
		top: -4vw;
	}
	.install .cta_wrap .img_box {
		width: 58.266vw;
		height: 8vw;
		top: -4vw;
	}
	.cta_wrap .cta {
		width: 78.666vw;
		margin: 0 auto;
	}
	.install .cta_wrap .cta {
		width: 78.666vw;
	}
}


/*-------------------------------
.header
-------------------------------*/
.header {
	background: #24262a;
}
.header .inner {
	display: flex;
	justify-content: center;
	padding: 12px 75px;
}
.header .logo {
	width: 220px;
}
@media ( max-width: 767px ){
	.header .inner {
        padding: 2.5vw 6.666vw;
    }
    .header .logo {
    	display: block;
        width: 35.866vw;
    }
    .header .logo img {
    	width: 100%;
    }
}

.bg_dark {
	background-image: linear-gradient(180deg, #382348 0%, #382348 20%, #000000 65%, #000000 75%, #382348 100%);
}

/*-------------------------------
.kv
-------------------------------*/
.kv {
	background: url('img/kv_bg.png') no-repeat top center;
	background-size: 1750px;
}
.kv .inner {
	height: 579.5px;
	max-width: 860px;
	position: relative;
}
.kv .catch {
	width: 566px;
	padding-top: 47px;
}
.kv .cta_area {
	position: absolute;
	width: 475px;
	height: 123.5px;
	bottom: 95px;
	left: 376px;
}
.kv .cta_area .cta_wrap {
	width: 100%;
	padding: 37.5px 37.5px 22.5px;
}
.kv .cta_area .cta_wrap .cta {
	width: 400px;
}
@media ( max-width: 767px ){
	.kv {
		background: url('img/kv_bg_sp.png') no-repeat top center/cover;
		background-size: 100%;
	}
	.kv .inner {
		height: 117.2vw;
	}
	.kv .catch {
		width: 57.866vw;
		padding-top: 2vw;
		margin-left: -6.666vw;
		position: relative;
		z-index: 2;
	}
	.kv .cta_area {
		position: absolute;
		width: 64vw;
		height: 32.133vw;
		bottom: 17vw;
		left: 32.533vw;
		z-index: 1;
	}
	.kv .cta_area .cta_wrap {
		width: 100%;
		padding: 6.133vw 6.133vw 2.666vw 14.666vw;
	}
	.kv .cta_area .cta_wrap .img_box {
		width: 52.4vw;
		height: 7.2vw;
		top: -3.6vw;
		right: 1.2vw;
		left: auto;
	}
	.kv .cta_area .cta_wrap .cta {
		width: 100%;
	}
}

/*-------------------------------
.footer
-------------------------------*/
.footer {
	padding: 50px 0;
	background: #000000;
	color: #fff;
}
.footer .notes {
	margin-bottom: 50px;
	line-height: 1.625;
	font-size: 10px;
}
.footer .sns ul {
	display: flex;
	justify-content: center;
    align-items: center;
	gap: 0 20px;
	margin-bottom: 30px;
}
.footer .sns ul li {
	width: 40px;
}
.footer .sns ul li a {
	transition: 0.3s;
}
.footer .sns ul li a:hover {
	opacity: 0.7;
}
.footer .notes ul {
	display: inline-block;
	margin: 0 auto;
}
.footer .notes ul li {
	padding-left: 1em; 
	text-indent: -1em;
	text-align: left;
}
.footer_navi ul {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 26px;
	margin-bottom: 50px;
}
.footer .footer_navi ul li a {
	font-size: 12px;
	position: relative;
	text-decoration: underline;
	opacity: 1;
	transition: 0.3s;
	color: #fff;
}
.footer .footer_navi ul li a:hover {
	text-decoration: none;
	opacity: 0.8;
}
.footer .copyright {
	font-size: 9px;
	font-weight: 600;
}
@media ( max-width: 767px ){
	.footer {
		padding: 6vw 0;
	}
	.footer .sns ul li {
		width: 8vw;
	}
	.footer .notes {
		margin-bottom: 8vw;
		font-size: 2.1333vw;
	}
	.footer .notes ul {
		display: block;
	}
	.footer .footer_navi ul {
		gap: 0 6%;
		margin-bottom: 8vw;
	}
	.footer .footer_navi ul li a {
		font-size: 2.9333vw;
	}
	.footer .copyright {
		font-size: 2.4vw;
	}
}

/*-------------------------------
.follow
-------------------------------*/
.follow {
	width: 100%;
	background: rgba(255, 255, 255, 0.5);
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 999;
	transform: translateY(100%);
	opacity: 0;
	transition: transform .5s, opacity .5s;
}
.follow.fix {
	transform: translateY(0);
	opacity: 1;
}
.follow .content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	gap: 0 50px;
}
.download_btn {
	width: 300px;
	margin: 0 auto;
}
.follow .download_btn {
	width: 380px;
}
.download_btn a {
	color: #fff;
	background: #bb75ef;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 60px;
	border-radius: 50px;
	font-size: 16px;
	opacity: 1;
	transition: 0.3s;
}
.follow .download_btn a {
	height: 50px;
}
.download_btn a:hover {
	opacity: 0.8;
}
.download_btn a::after {
	content: '';
	display: block;
	width: 10px;
	height: 16.5px;
	background: url('img/follow_download_btn_arrow.png') center / contain;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 25px;
}
@media ( max-width: 767px ){
	.follow .content {
		height: 18vw;
	}
	.download_btn {
		width: 80vw;
	}
	.kv .download_btn {
		width: 72vw;
	}
	.follow .download_btn {
		width: 92vw;
	}
	.download_btn a {
		height: 14.666vw;
		border-radius: 10vw;
		font-size: 4.4vw;
		box-sizing: border-box;
	}
	.download_btn a::after {
		width: 2.666vw;
		height: 4.266vw;
		background-size: contain;
		right: 5.333vw;
	}
}

/*-------------------------------
.install
-------------------------------*/
.install {
	padding: 80px 0;
	background: url('img/install_bg.jpg') center / cover;
}
.install .contents .title {
	font-size: 40px;
	font-weight: bold;
	margin: 0 0 80px;
	color: #fff;
	text-shadow: 3px 3px 0 #000, -3px -3px 0 #000,
	  -3px 3px 0 #000,  3px -3px 0 #000,
	  3px 0 0 #000, -3px  0 0 #000,
	  0 3px 0 #000,  0 -3px 0 #000;
}
.install .lead {
	font-size: 14px;
	line-height: 2.045;
	margin-bottom: 35px;
}
@media ( max-width: 767px ){
	.install {
		padding: 8vw 0;
		background: url('img/install_bg_sp.jpg') center / cover;
	}
	.install .contents .title {
		font-size: 7.333vw;
		line-height: 1.272;
		margin: 0 0 9.333vw;
		text-shadow: 2px 2px 0 #000, -2px -2px 0 #000,
		  -2px 2px 0 #000,  2px -2px 0 #000,
		  2px 0 0 #000, -2px  0 0 #000,
		  0 2px 0 #000,  0 -2px 0 #000;
	}
	.install .lead {
		width: 80vw;
		font-size: 3.2vw;
		line-height: 1.6;
		text-align: left;
		margin: 0 auto 7.333vw;
	}
}

/*-------------------------------
.point
-------------------------------*/
.point {
	color: #fff;
	padding: 45px 0 0;
}
.point .bdr_box {
	padding: 0 62.5px 80px;
	box-sizing: border-box; 
	width: 770px;
	margin: 0 auto;
}
.point .bdr_box .flex_box {
	display: flex;
	justify-content: space-between;
}
.point .bdr_box .flex_box .img_box {
	width: 225px;
}
.point .bdr_box .flex_box .txt_box {
	width: 380px;
	padding-top: 35px;
}
.point .bdr_box .flex_box .txt_box .title {
	text-align: left;
	margin-bottom: 47px;
	padding: 0 10px 20px;
	position: relative;
}
.point .bdr_box .flex_box .txt_box .title .tag {
	color: #000;
	font-size: 14px;
	font-weight: bold;
	font-family: "Arial", "メイリオ";
	line-height: 1.2;
	margin-bottom: 15px;
	margin-left: 8px;
	position: relative;
    z-index: 1;
    text-align: center;
    width: 64px;
    display: block;
}
.point .bdr_box .flex_box .txt_box .title .tag::before {
	transform: skewX(-30deg);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color:#fff;
}
.point .bdr_box .flex_box .txt_box .title .point_tit {
	font-size: 22.5px;
	line-height: 1.6;
	font-weight: 700;
}
.point .bdr_box .flex_box .txt_box .title::after {
	position: absolute;
	content: '';
	background: url('img/point_tit_line.png') no-repeat center / contain;
	width: 367px;
	height: 40.5px;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}
.point .bdr_box .flex_box .txt_box .sub_tit {
	background-image: linear-gradient(90deg, rgba(0,0,0,0), #382348 50%, rgba(0,0,0,0));
	font-size: 15px;
	font-weight: 700;
	padding: 20px 0;
	margin-bottom: 30px;
	letter-spacing: 0.1em;
}
.point .bdr_box p {
	font-size: 14px;
	line-height: 2;
}
.splide__pagination__page {
	opacity: 1;
	background: #414142;
	width: 10px;
	height: 10px;
	margin: 7px;
}
.splide__pagination__page.is-active {
	transform: scale(1);
}
.splide__arrow {
	width: 48px;
	height: 48px;
	opacity: 1;
}
.splide__arrow svg {
	display: none;
}
.splide__arrow.splide__arrow--prev {
	background: url('img/arrow_prev.png') no-repeat center / contain;
}
.splide__arrow.splide__arrow--next {
	background: url('img/arrow_next.png') no-repeat center / contain;
}
@media ( max-width: 767px ){
	.point {
		padding: 9.333vw 0 0;
	}
	.point .bdr_box {
		padding: 0 0 15vw;
		width: 100%;
	}
	.point .bdr_box .flex_box {
		flex-direction: column-reverse; 
	}
	.point .bdr_box .flex_box .img_box {
		width: 44.8vw;
		margin: 0 auto 4vw;
	}
	.point .bdr_box .flex_box .txt_box {
		width: 100%;
		padding-top: 0;
		width: 81.333vw;
		margin: 0 auto;
	}
	.point .bdr_box .flex_box .txt_box .title {
		display: flex;
		margin-bottom: 5.333vw;
		padding: 0 0 2.666vw;
		justify-content: space-between;
	}
	.point .v5 .bdr_box .flex_box .txt_box .title {
		height: 17.333vw;
		align-items: center;
	}
	.point .bdr_box .flex_box .txt_box .title .tag {
		font-size: 3vw;
		margin-bottom: 0;
		margin-left: 1vw;
	    width: 13.333vw;
	    height: 4vw;
	    margin-left: 1vw;
	    margin-top: 2vw;
	    line-height: 1.5;
	}
	.point .bdr_box .flex_box .txt_box .title .point_tit {
		font-size: 4.666vw;
		line-height: 1.6;
		font-weight: 700;
		width: 63.333vw;
	}
	.point .bdr_box .flex_box .txt_box .title::after {
		background: url('img/point_tit_line.png') no-repeat center / contain;
		width: 81.333vw;
		height: 9vw;
	}
	.point .bdr_box .flex_box .txt_box .sub_tit {
		background-image: linear-gradient(90deg, rgba(0,0,0,0), #56366e 50%, rgba(0,0,0,0));
		font-size: 3.7333vw;
		padding: 2vw 0;
		margin-bottom: 5.333vw;
	}
	.point .bdr_box p {
		font-size: 3vw;
	}
	.splide__pagination__page {
		width: 2.666vw;
		height: 2.666vw;
		margin: 2vw;
	}
	.splide__arrow {
		width: 12.666vw;
		height: 12.666vw;
	}
	.splide__arrow--prev {
		left: 0.5em;
	}
	.splide__arrow--next {
		right: 0.5em;
	}
}

/*-------------------------------
.movie
-------------------------------*/
.movie {
	padding: 0;
}
.movie .title {
	font-size: 35px;
	font-weight: bold;
	margin: 0 0 30px;
	color: #fff;
}
.movie .movie_wrap {
	width: 700px;
	height: 393.75px;
	margin: 0 auto 40px;
}
.movie .movie_wrap iframe {
	width: 100%;
	height: 100%;
}
.movie .fl_box {
	display: flex;
	align-items: flex-end;
	gap: 0 5%;
}
.movie .fl_box .img_box {
	width: 30%;
}
.movie .fl_box .txt_box {
	width: 65%;
	font-size: 14px;
	line-height: 2.045;
	color: #fff;
	text-align: left;
	padding-bottom: 50px;
}
.movie .fl_box .txt_box .sub_tit {
	font-size: 25px;
	margin-bottom: 15px;
	font-weight: bold;
}
@media ( max-width: 767px ){
	.movie .title {
		font-size: 6vw;
		margin: 0 0 7.333vw;
		line-height: 1.4;
	}
	.movie .movie_wrap {
		width: 100%;
		height: 48.666vw;
		margin: 0 auto 6vw;
	}
	.movie .fl_box {
		margin-left: -3.2vw;
		gap: 0 5vw;
		align-items: center;
		margin-bottom: 3vw;
	}
	.movie .fl_box .img_box {
		width: 30vw;
	}
	.movie .fl_box .txt_box {
		width: 65vw;
		font-size: 2.8vw;
		line-height: 1.714;
		padding-bottom: 0;
	}
	.movie .fl_box .txt_box .sub_tit {
		font-size: 5.2vw;
		margin: 0;
	}
	.movie .lead {
		color: #fff;
		text-align: left;
		font-size: 2.8vw;
		line-height: 1.714;
		padding-bottom: 12vw;
	}
}

/*-------------------------------
.modal
-------------------------------*/
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.70);
    z-index: 9998;
    cursor: pointer;
}
.modal-content {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 400px;
    z-index: 9999;
    background: #fff;
    box-sizing: border-box;
    padding: 40px;
    margin: 0;
}
.lock {
    overflow: hidden;
}
.modal-content p {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	margin-bottom: 30px;
}