@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:#000;
	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%; }

/*******************mv*******************/
.mv{
	width:100%;
	height:137.3vw;
	position:relative;
}
.mv .img{
	width:100%;
	height:100%;
}
.mv .img img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.mv_txt{
	position:absolute;
	width:100%;
	left:1.5%;
	top:4vw;
}
.mv_txt > div{
	width:100%;
	position:relative;
}
.mv_txt h1{
	position:absolute;
	width:48.8%; 
	top: calc((100vw / 750) * 267);
	left:0;
	right:0;
	margin:auto;
}
.mv_txt h1 img,
.mv_txt .cp_date img{
	width:100%;
}
.mv_txt .cp_date{
	position:absolute;
	left:0;
	right:0;
	top: calc((100vw / 750) * 177);
	width:44.2%;
	margin:auto;
}
.mv_txt .mv_logo{
	position:absolute;
	left:0;
	top:0;
	width:26.4%;
}
.mv_txt .mv_logo img{ width:100%; }

.mv {
	background-color: #fff;
	width: 100%;
	margin: auto;
}

.mv_footer_txt {
	padding-bottom: 5.3vw;
}

.mv_footer_txt p {
	color: #DD202D;
	font-size: 4.8vw;
	font-weight: 600;
	text-align: center;
	line-height: 10vw;
}

.mv_footer_txt span {
	font-size:10vw;
}


/*******************INTRO*******************/
.intro{
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
	position:relative;
	font-size:max(1.6rem, min(5.3vw,2.4rem));
	font-size:clamp( 1.6rem, 5.3vw, 2.4rem);
	line-height:1.5;
	text-align:center;
	background:url(https://c.synchrolife.io/campaign/202112_oshimen/assets/img/bg.png) repeat-y center top;
}
.intro p {
	margin-top:2em;
	color: #DD202D;
	font-size: 4.26vw;
	font-weight: 400;
}

.intro span {
	font-size: 8vw;
}
.intro .img {
	width: 100%;
}
.intro .noodle{
	width:90%;
	margin-bottom: 30px;
}




/*******************DOWNLOAD*******************/
.download{
	background-color:#DD202D;
	width:100%;
	padding:24px 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 ;
	padding:clamp( 30px, 16vw, 80px) 0 ;
	position:relative;
	background-color:#DD202D;
	color:#fff;
	font-weight:600;
}
.join h2{
	border:4px solid #FFFFFF;
	box-sizing: border-box;
	border-radius:35px;
	padding:max(13px, min(5vw,11px)) 20px max(15px, min(7vw,13px));
	padding:clamp( 13px, 5vw, 11px) 20px clamp( 15px, 7vw, 13px);
	max-width:500px;
	margin:0 auto 30px;
	line-height:1;
	width:60%;
}
.join dl{
	width:90%;
	background-color:#fff;
	border-radius:3px;
	margin:20px auto 0;
	color:#DD202D;
	text-align:center;
	font-weight:900;
}
.join dt{
	border-bottom:1px dashed #DD202D;
	font-size: max(1.2rem, min(4.3vw,2.4rem));
	font-size: clamp( 1.2rem, 4.3vw, 2.4rem);
	padding:8px;
}
.join dd{
	color:#000;
	font-size: 11.2vw;
	font-weight: 600;
	padding:20px;
}
.join .txt{
	text-align:center;
	font-size: 4.8vw;
	line-height:1.8;
	font-weight: 600;
}
.join .txt span{
	font-size: 9.6vw;
	font-weight: 600;
}


/*******************PRESENT*******************/
.present{
	padding: 55px 0 1px;
	position:relative;
	background:url(https://c.synchrolife.io/campaign/202112_oshimen/assets/img/bg.png) repeat-y center top;
	color:#DD202D;
}
.present h2{
	border:4px solid #DD202D;
	box-sizing: border-box;
	border-radius:35px;
	padding:max(13px, min(5vw,11px)) 20px max(15px, min(7vw,13px));
	padding:clamp( 13px, 5vw, 11px) 20px clamp( 15px, 7vw, 13px);
	max-width:500px;
	margin:0 auto 30px;
	line-height:1;
	width:60%;
}
.present .lead{
	text-align:center;
	width:88%;
	max-width:600px;
	margin:0 auto 50px;
	font-size: 4.8vw;
	line-height:1.8;
	position:relative;
	z-index:10;
	font-weight:600;
}
.present .lead span{
	font-size: 8.53vw;
}
.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:-10px;
}


/*******************SYNCHROLIFE*******************/
.synchrolife{
	background:url(https://c.synchrolife.io/campaign/202112_oshimen/assets/img/synchrolife_mark.svg) no-repeat center center #DD202D;
	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;
	color:#fff;
}
.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/202112_oshimen/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;
	color:#fff;
}
.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/202112_oshimen/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;
}


/*
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; }