@charset "utf-8";

:root {
	--color-red:#F32840;
}

/*
GLOBAL
***************************************************************************/
html { 
	font-size: 62.5%; 
	-webkit-overflow-scrolling: touch;
}

body{
	width: 100%;
	height:100%;
	font-family:'Noto Sans JP', sans-serif;
	overflow-wrap: break-word;
	word-wrap: break-word;
	text-align: left;
	font-size: 1.6rem;
	line-height: 1.5;
	color:#FFF;
	background:url(https://c.synchrolife.io/campaign/202110_kome/assets/img/bg_01.png) repeat-y center top;
	background-size:100% auto;
	font-weight:400;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	overflow-x: hidden;
	position:relative;
}


/*
DEFAULT
***************************************************************************/
body,
h1,h2,h3,h4,h5,h6,p,
ul,ol,li,dl,dt,dd,
form,fieldset,legend,pre,blockquote,figure {
	margin: 0;
	padding: 0;
	font-feature-settings: "normal";
	-webkit-font-feature-settings: "normal";
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,video {
	display: block;
}

*:focus { outline: none; }

.clearfix:after {
	display: block;
	clear: both;
	content: "";
	overflow: hidden;
}

li { list-style-type: none; }

table {
	width: 100%;
	border-collapse: collapse;
}

/* ▼LINK▼ */
a {
	color: var(--color-font);
	text-decoration: none;
	outline: none;
	transition-duration:0.3s;
}

/* ▼IMG▼ */
img, input[type="image"]{
	max-width: 100%;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
	border: none;
}

.pcview a:hover{opacity:0.6;}
.pcview a[href*="tel:"]{
	pointer-events: none;
	cursor: default;
}
.pcview a[href*="tel:"]:hover{opacity:1;}
.pcview .sp{display: none;}
.mobile .pc{display: none;}



/*
CONTENTS
***************************************************************************/
.container{ width:100%; }

/*******************KV*******************/
.kv{
	width:100%;
	height:123.5vw;
	position:relative;
}
.kv .img{
	width:100%;
	height:100%;
}
.kv .img img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.kv_txt{
	position:absolute;
	width:47vw;
	left:6%;
	top:8vw;
}
.kv_txt > div{
	width:100%;
	position:relative;
}
.kv_txt h1{ width:70%; }
.kv_txt .cp_date{
	position:absolute;
	right:0;
	top:0;
	width:40%;
}
.kv_txt .cp_date img{ filter:drop-shadow(0 5.71px 5.71px rgba(0,0,0,0.25)); }

@media screen and (min-width: 751px) {
	.kv{ height:59vw; }
	.kv_txt{
		width:77%;
		left:50%;
		transform:translateX(-50%);
		top:3vw;
	}
	.kv_txt h1{ width:19%; }
	.kv_txt .cp_date{
		right:auto;
		width:11%;
		left:17%;
	}
}


/*******************INTRO*******************/
.intro{
	width:88%;
	max-width:920px;
	margin:-35vw auto 8vw;
	background-color:#000;
	box-sizing:border-box;
	position:relative;
	padding:30px 5px;
	font-size:max(1.6rem, min(5.3vw,2.4rem));
	font-size:clamp( 1.6rem, 5.3vw, 2.4rem);
	line-height:1.8;
	text-align:center;
}
.intro .txt1{ font-weight:900; }
.intro .txt2{
	font-weight:900;
	font-size:max(2.4rem, min(7.5vw,3.6rem));
	font-size:clamp( 2.4rem, 7.5vw, 3.6rem);
}
.intro .txt3{
	color:#000;
	background-color:#FFF;
	font-weight:900;
	font-size:max(2.2rem, min(6.9vw,3.6rem));
	font-size:clamp( 2.2rem, 6.9vw, 3.6rem);
	padding-bottom:0.1em;
}

@media screen and (min-width: 751px) {
	.intro{ margin:-19vw auto 50px; }
}


/*******************DOWNLOAD*******************/
.download{
	background-color:#515151;
	width:100%;
	padding:15px 0;
}
.dl_inner{
	width:88%;
	margin:0 auto;
	max-width:530px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.mobile .dl_inner{ max-width:330px; }
.dl_inner .dl_qr{
	flex:0 1 20%;
	position:relative;
}
.dl_inner .dl_qr_cmt{
	position: absolute;
    background-color: #000;
    width: 122px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    font-size: 1rem;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}
.dl_inner .dl_qr_cmt::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -4px;
    background: linear-gradient(to left bottom , rgba(0,0,0,1),rgba(0,0,0,1) 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,0));
}
.mobile .dl_inner .dl_qr{ display:none; }
.dl_inner .dl_app{
	flex:0 1 159px;
	margin:0 0 0 15px;
}
.dl_inner .dl_app a{display:block;}
.dl_inner .dl_app .apple{ margin-bottom:10px; }
.mobile .dl_inner .dl_app{ margin:0; }
.mobile .dl_inner .dl_app .apple{ margin-bottom:0; }
.iphone .dl_inner a.google{ display:none; }
.android .dl_inner a.apple{ display:none; }
.dl_inner .dl_sns{
	flex:1 1 152px;
	display:flex;
	justify-content:flex-end;
}
.mobile .dl_inner .dl_sns{ flex:1 1 46%; }
.dl_inner .dl_sns a{
	width:40px;
	margin-left:max(5px, min(3vw,16px));
	margin-left:clamp( 5px, 3vw, 16px);
}


/*******************JOIN*******************/
.join{
	padding:max(30px, min(16vw,80px)) 0 0 ;
	padding:clamp( 30px, 16vw, 80px) 0 0 ;
	position:relative;
}
.join .txt{
	text-align:center;
	font-size:max(1.6rem, min(5.3vw,2.4rem));
	font-size:clamp( 1.6rem, 5.3vw, 2.4rem);
	line-height:1.8;
}
.join .txt strong{
	font-weight:900;
	font-size:max(2.6rem, min(7.5vw,3.6rem));
	font-size:clamp( 2.6rem, 7.5vw, 3.6rem);
}
.join .img{
	display:block;
	width:12vw;
	max-width:94px;
	position:absolute;
	top:max(10px, min(5.3vw,25px));
	top:clamp( 10px, 5.3vw, 25px);
	right:max(10px, min(5.3vw,30px));
	right:clamp( 10px, 5.3vw, 30px);
}

@media screen and (min-width:1201px) {
	.join .img{
		right:auto;
		left:50%;
		margin-left:475px;
	}
}


/*******************PRESENT*******************/
.present{
	padding:55px 0 max(20px, min(10.6vw,70px));
	padding:55px 0 clamp( 20px, 10.6vw, 70px);
	position:relative;
}
.present .lead{
	text-align:center;
	width:88%;
	max-width:600px;
	margin:0 auto 30px;
	font-size:max(1.6rem, min(5.3vw,2.4rem));
	font-size:clamp( 1.6rem, 5.3vw, 2.4rem);
	line-height:1.8;
	position:relative;
	z-index:10;
}
.present ul{
	width:88%;
	max-width:600px;
	margin:0 auto 7vw;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.present li{
	flex:0 1 46.5%;
	margin:0 0 max(10px, min(5vw,60px));
	margin:0 0 clamp( 10px, 5vw, 60px);
	position:relative;
}
.present li a{
	text-decoration:underline;
	font-size:max(1.1rem, min(3.7vw,1.8rem));
	font-size:clamp( 1.1rem, 3.7vw, 1.8rem);
	display:block;
}
.present li figure{
	display:block;
	margin:0 0 max(3px, min(1.3vw,10px));
	margin:0 0 clamp( 3px, 1.3vw, 10px);
	position:relative;
}
.present li figcaption{
	position:absolute;
	text-align:right;
	font-size:max(.8rem, min(1vw,1.4rem));
	font-size:clamp( .8rem, 1vw, 1.4rem);
	line-height:1;
	right:5px;
	bottom:max(2px, min(.8vw,8px));
	bottom:clamp( 2px, .8vw, 8px);
}
.present li .num{
	position:absolute;
	width:26%;
	top:-5px;
	right:-5px;
}
.present .ine{
	width:40vw;
	max-width:295px;
	margin:0 auto;
}
.present .nezumi{
	position:absolute;
	width:34vw;
	max-width:280px ;
	top:-10px;
	left:-6vw;
}

@media screen and (min-width: 751px) {
	.present ul{ margin:0 auto 5px; }
	.present li .num{
		width:21.4%;
		top:-10px;
		right:-10px;
	}
}
@media screen and (min-width: 951px) {
	.present .nezumi{ left:0; }
}
@media screen and (min-width: 1201px) {
	.present .nezumi{ 
		left:auto;
		right:50%;
		margin-right:315px;     
	}
}


/*******************ABOUT*******************/
.about{
	background:url(https://c.synchrolife.io/campaign/202110_kome/assets/img/kome_ph.png) no-repeat 60% bottom;
	background-size:160% auto;
	padding:0 0 43vw;
}
.about_box{
	background-color:#000;
	width:88%;
	max-width:920px;
	margin:0 auto;
	text-align:center;
	box-sizing:border-box;
	padding:max(20px, min(.8vw,60px)) max(10px, min(6%,40px)) max(20px, min(12vw,60px));
	padding:clamp( 20px, 8vw, 60px) clamp( 10px, 6%, 40px) clamp( 20px, 12vw, 60px);
	font-size:max(1.2rem, min(4.3vw,2rem));
	font-size:clamp( 1.2rem, 4.3vw, 2rem);
	line-height:1.75;
}
.about_box .txt1{
	font-weight:900;
	font-size:1.2em;
}
.about_box strong{
	font-weight:900;
	font-size:.875em;
}
.about_box strong span{ font-size:1.714em; }

@media screen and (min-width: 751px) {
	.about{ padding:0 0 275px; }
	.about_box strong span{ font-size:2em; }
}
@media screen and (min-width: 1101px) {
	.about{
		background:url(https://c.synchrolife.io/campaign/202110_kome/assets/img/kome_ph.png) no-repeat center bottom;
		background-size:100% auto;
	}
}


/*******************SYNCHROLIFE*******************/
.synchrolife{
	background:url(https://c.synchrolife.io/campaign/202110_kome/assets/img/synchrolife_mark.svg) no-repeat center center var(--color-red);
	background-size:134px auto;	
	padding:max(40px, min(16vw,65px)) max(20px, min(8vw,50px)) max(40px, min(16vw,100px));
	padding:clamp( 40px, 16vw, 65px) clamp( 20px, 8vw, 50px) clamp( 40px, 16vw, 100px);
	text-align:center;
}
.synchrolife h2{
	font-weight:700;
	font-size:max(2rem, min(6.4vw,3.2rem));
	font-size:clamp( 2rem, 6.4vw, 3.2rem);
	margin-bottom:max(10px, min(5.9vw,25px));
	margin-bottom:clamp( 10px, 5.9vw, 25px);
}
.synchrolife p{
	font-size:max(1.2rem, min(4.3vw,2.4rem));
	font-size:clamp( 1.2rem, 4.3vw, 2.4rem);
	letter-spacing:.01em;
}


/*******************INSTALL*******************/
.install{
	background:url(https://c.synchrolife.io/campaign/202110_kome/assets/img/download_bg_sp.png) no-repeat center center;
	background-size:cover;
	padding:max(30px, min(12.8vw,80px)) 0 0 ;
	padding:clamp( 30px, 12.8vw, 80px) 0 0 ;
	text-align:center;
}
.install_inner{
	width:79%;
	max-width:670px;
	margin:0 auto;
}
.install_inner .txt{ margin:0 0 8.5vw; }
.install_inner h2{ margin:0 0 6vw; }
.install_inner h3{
	font-weight:400;
	font-size:max(1.8rem, min(5.8vw,2.2rem));
	font-size:clamp( 1.8rem, 5.8vw, 2.2rem);
	line-height:1.45;
	margin-bottom:10.6vw;
}
.install_link{
	width:100%;
	max-width:250px;
	margin:0 auto;
	display:flex;
	justify-content:space-between;
}
.mobile .install_link{ display:block; }
.install_link .install_qr{ flex:0 1 38.4%; }
.mobile .install_link .install_qr{ display:none; }
.install_link .install_app{ flex:0 1 54%; }
.install_link .install_app .apple{ margin-bottom:14px; }
.mobile .install_link .install_app{
	width:200px;
	margin:0 auto;
}
.install_link .install_app a,
.install_link .install_app img{
	display:block;
	width:100%;
}
.mobile .install_link .install_app .apple{ margin:0; }
.iphone .install_link .install_app .google{ display:none; }
.android .install_link .install_app .apple{ display:none; }
.install_inner .ph{ padding:0 9%; }

@media screen and (min-width: 751px) {
	.install{
		background:url(https://c.synchrolife.io/campaign/202110_kome/assets/img/download_bg_pc.png) no-repeat center center;
		background-size:cover;
	}
	.install_inner{
		display:flex;
		justify-content:space-between;
	}
	.install_inner .txt{
		margin:0;
		order:2;
		flex:0 1 350px;
		padding:68px 30px 0 ;
		box-sizing:border-box;
		max-width:350px;
	}
	.install_inner h2{ margin:0 0 15px; }
	.install_inner h3{ margin-bottom:24px; }
	.install_inner .ph{
		order:1;
		padding:0;
		flex:0 1 240px;
	}
}


/*******************FOOTER*******************/
footer{
	background-color:#FFF;
	border-top:1px #DFDFDF solid;
}
.f_sns{
	padding:4.3vw 0;
	border-bottom:1px #DFDFDF solid;
	display:flex;
	width:100%;
	margin:0 auto;
	justify-content:center;
}
.f_sns a{
	flex:0 1 10.6vw;
	margin:0 3.2vw;
}
.f_sns a img{width:100%;}
.f_inner .cr{
	color:#aaa;
	line-height:1;
	font-size:max(.8rem, min(2.7vw,1.4rem));
	font-size:clamp( .8rem, 2.7vw, 1.4rem);
	text-align:center;
	padding:4.3vw 0;
}

@media screen and (min-width: 751px) {
	.f_inner{
		display:flex;
		width:85%;
		max-width:1014px;
		margin:0 auto;
		padding:17px 0;
		align-items:center;
		justify-content:space-between;
	}
	.f_sns{
		padding:0;
		border-bottom:none;
		flex:0 1 136px;
		margin:0;
		order:2;
		justify-content:space-between;
	}
	.f_sns a{
		flex:0 1 24%;
		margin:0;
	}
	.f_inner .cr{
		text-align:left;
		padding:0;
		order:1;
	}
}



/*
COMMON PARTS
***************************************************************************/
/* ▼display▼ */
.block { display:block; }
.inline { display:inline; }
.none { display:none!important; }

/* ▼position▼ */
.posit_r { position:relative!important; }
.posit_a { position:absolute!important; }
.posit_f { position:fixed!important; }

.align_c { text-align:center!important; }
.align_r { text-align:right!important; }
.align_l { text-align:left!important; }

.disp_l { float:left!important; }
.disp_r { float:right!important; }

.va_top { vertical-align:top!important; }
.va_mid { vertical-align:middle!important; }
.va_btm { vertical-align:bottom!important; }

/* ▼width▼ */
.w5per { width:5%; }
.w10per { width:10%; }
.w15per { width:15%; }
.w20per { width:20%; }
.w25per { width:25%; }
.w30per { width:30%; }
.w35per { width:35%; }
.w50per { width:50%; }
.w55per { width:55%; }
.w60per { width:60%; }
.w70per { width:70%; }
.w75per { width:75%; }
.w80per { width:80%; }
.w100per { width:100%!important; }


/* ▼area▼ */


/* ▼font▼ */
.medium { font-weight:500!important; }
.regular { font-weight:400!important; }
.bold{font-weight:700!important;}
.black{font-weight:900!important;}

.c_black{color:#000;}

.size10 { font-size:1rem!important; }
.size11 { font-size:1.1rem!important; }
.size12 { font-size:1.2rem!important; }
.size13 { font-size:1.3rem!important; }
.size14 { font-size:1.4rem!important; }
.size16 { font-size:1.6rem!important; }
.size18 { font-size:1.8rem!important; }
.size20 { font-size:2.0rem!important; }
.size22 { font-size:2.2rem!important; }
.size24 { font-size:2.4rem!important; }
.size28 { font-size:2.8rem!important; }
.size30 { font-size:3.0rem!important; }

.lh2 { line-height:2!important; }
.lh18 { line-height:1.8!important; }
.lh16 { line-height:1.6!important; }
.lh15 { line-height:1.5!important; }
.lh14 { line-height:1.4!important; }

.txt_line{ background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0) 75%,#ee815c 75%,#ee815c);  }


/* ▼link▼ */
a.line, .line { text-decoration:underline!important; }
a.no_line { text-decoration:none!important; }

/* ▼title▼ */
.title_01{
	margin-bottom:max(10px, min(8vw,30px)) ;
	margin-bottom:clamp( 10px, 8vw, 30px) ;
	text-align:center;
}
.title_01 span{
	background-color:#000;
	font-weight:900;
	font-size:max(2rem, min(6.4vw,2.8rem)) ;
	font-size:clamp( 2rem, 6.4vw, 2.8rem) ;
	line-height:1;
	padding:.3em 1em;
	display:inline-block;
	box-shadow:3px 3px 0 #6c6c6c;
}

/* ▼btn▼ */

/* ▼background▼ */
.bg_none { background:none!important; }

/* ▼border▼ */
.border_none { border:none!important; }