/*==================================================
vw単位の横のコメントのpxは
ウィンドウサイズが750pxの時のフォントサイズ
==================================================*/

#windowSize {
	position: fixed;
	bottom: 0px;
}

/*==============================
			共通
==============================*/
body {
	font-family: sans-serif;
	text-align: center;
	padding: 0;
	margin: 0;
}

/* Javascript無効時の文字 */
#noJavascript {
	display: block;
}

/* Javascript有効時の文字や画像領域 */
#onJavascript {
	display: none;
	width: 100%;
	margin: auto;
}

/* 小さいスペース */
.spaceSmall {
	height: 2.4vw; /* 18px */
}

@media screen and ( min-width:751px ){
	.spaceSmall {
		height: 18px;
	}
}

/* 小さいマージン(table用) */
.marginSmall {
	margin-bottom: 2.4vw; /* 18px */
}

@media screen and ( min-width:751px ){
	.marginSmall {
		margin-bottom: 18px;
	}
}

/* 中くらいのスペース */
.spaceMedium {
	height: 8.267vw; /* 62px */
}

@media screen and ( min-width:751px ){
	.spaceMedium {
		height: 62px;
	}
}

/* 中くらいのスペース(PC用) */
.spaceMediumPC {
	height: 8.8vw; /* 66px */
}

@media screen and ( min-width:751px ){
	.spaceMediumPC {
		height: 66px;
	}
}

/* 矢印画像 */
.arrowImg {
	width: 5.067vw; /* 38px */
	border: none;
}

@media screen and ( min-width:751px ){
	.arrowImg {
		width: 38px;
		border: none;
	}
}

/* 改行 */
.noBr {
	display: inline;
}

@media screen and ( min-width:1000px ){
	.noBr {
		display: none;
	}
}

/* リンク */
.link {
	text-decoration: none;
}

/*==============================
		ページトップ
==============================*/
#pageTop {
	background-image: url("../img/header.png");
	background-size: 100% 100%;
	width: 100%;
	height: 85.2vw; /* 639px */
}

@media screen and ( min-width:751px ){
	#pageTop {
		background-image: url("../img/header.png");
		background-size: 100% 100%;
		width: 100%;
		height: 639px;
	}
}

/* ロゴ画像 */
#pageTopImg {
	width: 24.267vw; /* 182px */
}

@media screen and ( min-width:751px ){
	#pageTopImg {
		width: 182px;
	}
}

/* 1つ目の文字 */
#pageTopStr1 {
	font-weight: 600;
	font-size: 6.4vw; /* 48px */
	line-height: 8.267vw; /* 62px */
	color: #FFFFFF;
}

@media screen and ( min-width:751px ){
	
	#pageTopStr1 {
		font-weight: 600;
		font-size: 48px;
		line-height: 62px;
		color: #FFFFFF;
	}
}

/* 2つ目の文字 */
#pageTopStr2 {
	font-weight: 300;
	font-size: 3.467vw; /* 26px */
	line-height: 5.067vw; /* 38px */
	color: #FFFFFF;
}

@media screen and ( min-width:751px ){
	#pageTopStr2 {
		font-weight: 300;
		font-size: 26px;
		line-height: 38px;
		color: #FFFFFF;
	}
}

/* 1つ目のスペース */
#pageTopSpace1 {
	height: 4vw; /* 30px */
}

@media screen and ( min-width:751px ){
	#pageTopSpace1 {
		height: 30px;
	}
}

/* 2つ目のスペース */
#pageTopSpace2 {
	height: 14.133vw; /* 106px */
}

@media screen and ( min-width:751px ){
	#pageTopSpace2 {
		height: 106px;
	}
}

/*==============================
	ダウンロード1と2共通
==============================*/
/* table */
.downloadTable {
	margin: auto;
	line-height: 0px;
	border: none;
}

.downloadTable th {
	border: none;
}

/* docomoのロゴ */
.downloadDocomoLogo {
	width: 17.867vw; /* 134px */
	border: none;
}

@media screen and ( min-width:751px ){
	.downloadDocomoLogo {
		width: 134px;
		border: none;
	}
}

/* KDDIのロゴ */
.downloadKddiLogo {
	width: 10.4vw; /* 78px */
	border: none;
}

@media screen and ( min-width:751px ){
	.downloadKddiLogo {
		width: 78px;
		border: none;
	}
}

/* Softbankのロゴ */
.downloadSoftbankLogo {
	width: 22.133vw; /* 166px */
	border: none;
}

@media screen and ( min-width:751px ){
	.downloadSoftbankLogo {
		width: 166px;
		border: none;
	}
}

/* ダウンロード矢印 */
.downloadArrow {
	width: 3.2vw; /* 24px */
	border: none;
}

@media screen and ( min-width:751px ){
	.downloadArrow {
		width: 24px;
		border: none;
	}
}

/* iOSのダウンロード画像 */
.downloadiOSImg {
	width: 30.933vw; /* 232px */
	border: none;
}

@media screen and ( min-width:751px ){
	.downloadiOSImg {
		width: 232px;
		border: none;
	}
}

/* Androidのdocomoのダウンロード画像 */
.downloadDocomoImg {
	width: 30.133vw; /* 226px */
	border: none;
}

@media screen and ( min-width:751px ){
	.downloadDocomoImg {
		width: 226px;
		border: none;
	}
}

/* AndroidのKDDIのダウンロード画像 */
.downloadKddiImg {
	width: 30.133vw; /* 226px */
	border: none;
}

@media screen and ( min-width:751px ){
	.downloadKddiImg {
		width: 226px;
		border: none;
	}
}

/* AndroidのSoftbankのダウンロード画像 */
.downloadSoftbankImg {
	width: 30.133vw; /* 226px */
	border: none;
}

@media screen and ( min-width:751px ){
	.downloadSoftbankImg {
		width: 226px;
		border: none;
	}
}

/* PCのQRコード画像 */
.pcQR {
	width: 21.19947vw; /* 159px */
	border: none;
}

@media screen and ( min-width:751px ){
	.pcQR {
		width: 159px;
		border: none;
	}
}

/* モバイル、PC兼用文字 */
#download1str2 {
	font-weight: 300;
	font-size: 3.467vw; /* 26px */
	line-height: 5.067vw; /* 38px */
	color: #4e65f5;
}

@media screen and ( min-width:751px ){
	#download1str2 {
		font-weight: 300;
		font-size: 26px;
		line-height: 38px;
		color: #4e65f5;
	}
}

/*==============================
	ダウンロード1(モバイル)
==============================*/
#mobileDownload1 {
	width: 100%;
	display: none;
}

/* 1つ目のスペース */
#spaceDownload1 {
	height: 6.133vw; /* 46px */
}

@media screen and ( min-width:751px ){
	#spaceDownload1 {
		height: 52px;
	}
}

/* 1つ目の文字 */
.mobileDownload1str {
	font-weight: 600;
	font-size: 4vw; /* 30px */
	line-height: 5.867vw; /* 44px */
	color: #333333;
}

@media screen and ( min-width:751px ){
	.mobileDownload1str {
		font-weight: 600;
		font-size: 30px;
		line-height: 44px;
		color: #333333;
	}
}

/* iOS用ダウンロード領域 */
#iosDownload1 {
	display: none;
}

/* Android用ダウンロード領域 */
#androidDownload1 {
	display: none;
}

/* iOS用マスク領域 */
.comingSoonWrapper {
	position: relative;
	pointer-events: none;	/* マスク領域のイベントを無効 */
}
.comingSoonFilter{
	/* 形状 */
	width: 40%;	/* 画面幅に対して相対的に指定 */
	border-radius: 10px;	/* 角丸 */
	/* フィルター色 */
	background-color: rgba(0, 0, 0, 1.0);
	/* 表示位置 */
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	/* 文字 */
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 4vw; /* 30px */
	line-height: 5.867vw; /* 44px */
}
@media screen and ( min-width:751px ){
	#comingSoonFilter {
		/* 形状 */
		width: 40%;	/* 画面幅に対して相対的に指定 */
		border-radius: 10px;	/* 角丸 */
		/* フィルター色 */
		background-color: rgba(0, 0, 0, 1.0);
		/* 表示位置 */
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		/* 文字 */
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		font-size: 30px;
		line-height: 44px;
	}
}
#comingSoonStr {
	margin-top: 1.333vw; /* 10px */ /*スペース調整*/
	font-weight: 300;
	font-size: 3.467vw; /* 26px */
	line-height: 5.067vw; /* 38px */
	color: #000000;
}

@media screen and ( min-width:751px ){
	#comingSoonStr {
		margin-top: 10px;/*スペース調整*/
		font-weight: 300;
		font-size: 26px;
		line-height: 38px;
		color: #000000;
	}
}

/*==============================
	ダウンロード2(モバイル)
==============================*/
#mobileDownload2 {
	width: 100%;
	display: none;
}

/* 1つ目の文字 */
#mobileDownload2str {
	font-weight: 600;
	font-size: 4.533vw; /* 34px */
	line-height: 6.4vw; /* 48px */
	color: #333333;
}

@media screen and ( min-width:751px ){
	#mobileDownload2str {
		font-weight: 600;
		font-size: 34px;
		line-height: 48px;
		color: #333333;
	}
}

/* iOS用ダウンロード領域 */
#iosDownload2 {
	display: none;
}

/* Android用ダウンロード領域 */
#androidDownload2 {
	display: none;
}

/*==============================
	ダウンロード1(PC)
==============================*/
#pcDownload1 {
	display: none;
}

#pcDownload1str1 {
	font-weight: 600;
	font-size: 4vw; /* 30px */
	line-height: 5.867vw; /* 44px */
	color: #333333;
}

@media screen and ( min-width:751px ){
	#pcDownload1str1 {
		font-weight: 600;
		font-size: 30px;
		line-height: 44px;
		color: #333333;
	}
}

/*==============================
	ダウンロード2(PC)
==============================*/
#pcDownload2 {
	display: none;
}

#pcDownload2str1 {
	font-weight: 600;
	font-size: 4vw; /* 30px */
	line-height: 5.867vw; /* 44px */
	color: #333333;
}

@media screen and ( min-width:751px ){
	#pcDownload2str1 {
		font-weight: 600;
		font-size: 30px;
		line-height: 44px;
		color: #333333;
	}
}

/*==============================
		アプリの特長1
==============================*/
#features1 {
	width: 100%;
	margin: auto;
	background: linear-gradient(#FFFFFF, #F0F4FD);
}

/* 画像領域 */
#features1img{
	position: relative;
	width: 100%;
	padding-top: 126.667vw; /* 950px */
	overflow: hidden;
	margin: 0 auto;
}

@media screen and ( min-width:751px ){
	#features1img{
		position: relative;
		width: 100%;
		padding-top: 950px;
		overflow: hidden;
		margin: 0 auto;
	}
}

#features1img img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 132.533vw; /* 994px */
}

@media screen and ( min-width:751px ){
	#features1img img{
		width: 994px;
	}
}



/* 1つ目の文字 */
#features1str1 {
	font-weight: 300;
	font-size: 4.533vw; /* 34px */
	line-height: 6.4vw; /* 48px */
	color: #333333;
}

@media screen and ( min-width:751px ){
	#features1str1 {
		font-weight: 300;
		font-size: 34px;
		line-height: 48px;
		color: #333333;
	}
}

/* 2つ目の文字 */
#features1str2 {
	font-weight: 300;
	font-size: 3.467vw; /* 26px */
	line-height: 5.067vw; /* 38px */
	color: #4e65f5;
}

@media screen and ( min-width:751px ){
	#features1str2 {
		font-weight: 300;
		font-size: 26px;
		line-height: 38px;
		color: #4e65f5;
	}
}

/*==============================
		アプリの特長2
==============================*/
#features2 {
	width: 100%;
	margin: auto;
	background: linear-gradient(#FFFFFF, #F0F4FD);
}

/* 画像領域 */
#features2img{
	position: relative;
	width: 100%;
	padding-top: 119.2vw; /* 894px */
	overflow: hidden;
	margin: 0 auto;
}

@media screen and ( min-width:751px ){
	#features2img{
		position: relative;
		width: 100%;
		padding-top: 894px;
		overflow: hidden;
		margin: 0 auto;
	}
}

#features2img img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 142.667vw; /* 1070px */
}

@media screen and ( min-width:751px ){
	#features2img img{
		width: 1070px;
	}
}

/* 1つ目の文字 */
#features2str {
	font-weight: 300;
	font-size: 4.533vw; /* 34px */
	line-height: 6.4vw; /* 48px */
	color: #333333;
}

@media screen and ( min-width:751px ){
	#features2str {
		font-weight: 300;
		font-size: 34px;
		line-height: 48px;
		color: #333333;
	}
}

/*==============================
		もっと繋がろう
==============================*/
#moreConnect {
	width: 100%;
}

/* 画像と文字の領域 */
#moreConnectImgStr {
	position: relative;
	margin: auto;
	word-wrap: normal;
}

/* 画像 */
#moreConnectImg {
	width: 59.733vw; /* 448px */
}

@media screen and ( min-width:751px ){
	#moreConnectImg {
		width: 448px;
	}
}

/* 画像の上の文字 */
#moreConnectStr {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 5%;
	margin: auto;
	text-align: center;
	font-weight: 300;
	font-size: 4.533vw; /* 34px */
	line-height: 6.4vw; /* 48px */
	color: #333333;
}

@media screen and ( min-width:751px ){
	#moreConnectStr {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 5%;
		margin: auto;
		text-align: center;
		font-weight: 300;
		font-size: 34px;
		line-height: 48px;
		color: #333333;
	}
}

/* 1つ目のスペース */
#spaceMoreConnect1 {
	height: 58.667vw; /* 440px */
}

@media screen and ( min-width:751px ){
	#spaceMoreConnect1 {
		height: 440px;
	}
}

/* 2つ目のスペース */
#spaceMoreConnect2 {
	height: 48vw; /* 360px */
}

@media screen and ( min-width:751px ){
	#spaceMoreConnect2 {
		height: 360px;
	}
}

/*==============================
			末尾
==============================*/
#lastStriOS {
	font-weight: 300;
	font-size: 2.4vw; /* 18px */
	line-height: 3.467vw; /* 26px */
	color: #999999;
}

@media screen and ( min-width:751px ){
	#lastStriOS {
		font-weight: 300;
		font-size: 18px;
		line-height: 26px;
		color: #999999;
	}
}

#lastStrAndroid {
	font-weight: 300;
	font-size: 2.4vw; /* 18px */
	line-height: 3.467vw; /* 26px */
	color: #999999;
}

@media screen and ( min-width:751px ){
	#lastStrAndroid {
		font-weight: 300;
		font-size: 18px;
		line-height: 26px;
		color: #999999;
	}
}

#lastStr {
	font-weight: 300;
	font-size: 2.4vw; /* 18px */
	line-height: 3.467vw; /* 26px */
	color: #999999;
}

@media screen and ( min-width:751px ){
	#lastStr {
		font-weight: 300;
		font-size: 18px;
		line-height: 26px;
		color: #999999;
	}
}

#lastSpace1 {
	height: 86.4vw; /* 648px */

}

@media screen and ( min-width:751px ){
	#lastSpace1 {
		height: 648px;
	}
}

#lastSpace2 {
	height: 17.6vw; /* 132px */
}

@media screen and ( min-width:751px ){
	#lastSpace2 {
		height: 132px;
	}
}