@charset "utf-8";

/* ルートでの変数設定　問題が起きたらコメントアウト */

:root {
	--sidebar-width: 100%;
	--toggler-size: 30px;
/*	--toggler-line-size: calc(var(--toggler-size) / (var(--toggler-line-number) + var(--toggler-line-number) - 1)); */
	--toggler-offset-left: 10px;
	--toggler-offset-top: 10px;
}

/* 	フォントの大きさ定義
	最小時12px　最大時16pxとする
*/

html {
  font-size: 75%;
  font-family: sans-serif;
  color: #333333;
}


/* 	edge用のハック
===========================================*/
@supports (-ms-ime-align:auto) {
html {
    font-size: 1em;
  }
}



/*	各見出しのフォントの大きさ定義
	h1は通常ロゴにあてています。一応3倍で定義
	h2は本文の２倍　ページのタイトル用　最小時24px相当
	h3も本文の２倍　中見出し用　最小時18px相当
	h4は本文の1.33倍　小見出し用　最小時　16px相当
	h5は本文の1.16倍でちょっと大きい程度　　最小時14px相当
*/
h1 {font-size: 3em;}
h2 {font-size: 2em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.33em;}
h5 {font-size: 1.166em;}

/*　本文の行間
===================================================*/
p {
	line-height: 1.75em;
}


/*　大枠設定
===================================================*/

@media (min-width: 320px) {
	.container {
		position:relative;
		width: 100vw;
		height: calc(100vh - 2em);
		background-image: url(../../images/bg.jpg), url(../../images/bg2.jpg);
		background-repeat: no-repeat;
		background-position: 15% 50%;
		background-color: #cbc4b3;
		background-size: cover;
	}
}

@media (min-width: 415px) {
	.container {
		position:relative;
		margin: 0 auto;
		width: 960px;
		height: calc(100vh - 2em);
		background-image: url(../../images/bg.jpg), url(../../images/bg2.jpg);
		background-repeat: no-repeat;
		background-position: 0 calc((100vh - 755px) / 2);
		background-color: #cbc4b3;
		background-size: auto;
	}
}


.text-wrapper::-webkit-scrollbar {
	display: none;
}


@media (min-width: 320px) {
	.text-wrapper {
		box-sizing: border-box;
		margin: 0 auto;

		width: 90%;
		height: calc(100vh - 2em);
		overflow: auto;
		-ms-overflow-style: none;
	}
}

@media (min-width: 415px) {
	.text-wrapper {
		margin: 0 0 0 58.33%;
		width: 36.458%;
		height: calc(100vh - 2em);
		overflow: auto;
		-ms-overflow-style: none;
	}
   
}


@media (min-width: 320px) {
	.sma-wrapper {
		padding: 10px;
		-webkit-backdrop-filter: blur(10px);
		background-color: rgba(225,225,225,0.3);

	}
}
@media (min-width: 415px) {
	.sma-wrapper {
		padding: 0;
		-webkit-backdrop-filter: none;
		background-color: transparent;
	}
}





@media (min-width: 320px) {
	#logo {
		display: none;
		}
}

@media (min-width: 415px) {
	#logo {
		display: block;
		position: absolute;
		top: calc((100vh - 250px) / 2);
		left: 18%;
		margin: 0;
		width: 250px;
		height: 0;
		padding-top: 250px;
		background-image: url(../../images/logo.png);
		overflow: hidden;
		animation-name: logoanime;
		animation-duration: 10s;
		animation-timing-function: ease;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: none;
		animation-play-state: running;
	}
}

@media (min-width: 320px) {
	#logo2 {
		display: block;
		margin: calc((100vh - 2em - 200px) / 2) auto;
		width: 250px;
		height: 0;
		padding-top: 250px;
		background-image: url(../../images/logo.png);
		overflow: hidden;
		animation-name: logoanime;
		animation-duration: 10s;
		animation-timing-function: ease;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-fill-mode: none;
		animation-play-state: running;
	}
	
}

@media (min-width: 415px) {
	#logo2 {
		display: none;
	}
}




@keyframes logoanime {
  0% {
    transform: scale(1);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  }

  50% {
    transform: scale(1.1);
	box-shadow: 8px 8px 8px rgba(0,0,0,0.2);
  }

  100% {
    transform: scale(1);
	box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  }
}



/*　各ブロック
===================================================*/
#lp-block01 {
	width: 100%;
	height: 0;
	padding-top: 79.14%;
	background-image: url(../../images/lp_block01.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#lp-block02 {
	width: 100%;
	height: 0;
	padding-top: 42%;
	background-image: url(../../images/lp_block02.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#lp-block03 {
	width: 100%;
	height: 0;
	padding-top: 159.14%;
	background-image: url(../../images/lp_block03.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#lp-block04 {
	width: 100%;
	height: 0;
	margin-bottom: 30px;
	padding-top: 200.2%;
	background-image: url(../../images/lp_block04.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#lp-block05 {
	width: 100%;
	height: 0;
	padding-top: 213.428%;
	background-image: url(../../images/lp_block05.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#lp-block06 {
	width: 100%;
	height: 0;
	padding-top: 142.28%;
	background-image: url(../../images/lp_block06.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#lp-block07 {
	width: 100%;
	height: 0;
	margin-bottom: 15px;
	padding-top: 11.428%;
	background-image: url(../../images/lp_block07.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#lp-system01 {
	width: 100%;
	height: 0;
	margin-bottom: 30px;
	padding-top: 97.14%;
	background-image: url(../../images/system01.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#lp-system02 {
	width: 100%;
	height: 0;
	margin-bottom: 30px;
	padding-top: 97.14%;
	background-image: url(../../images/system02.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#lp-system03 {
	width: 100%;
	height: 0;
	margin-bottom: 30px;
	padding-top: 97.14%;
	background-image: url(../../images/system03.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}




a.lp-btn01 {
	display: block;
	width: 100%;
	height: 0;
	margin: 20px 0 40px 0;
	padding-top: 20.57%;
	background-image: url(../../images/lp_btn_off.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

a.lp-btn01:hover {
	background-image: url(../../images/lp_btn_on.png);
}


a.lp-btn02 {
	display: block;
	width: 100%;
	height: 0;
	margin: 20px 0 40px 0;
	padding-top: 20.57%;
	background-image: url(../../images/lp_btn2_off.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

a.lp-btn02:hover {
	background-image: url(../../images/lp_btn2_on.png);
}

.copy {
	display: block;
	width: 100%;
	text-align: right;
}

.form-block {
	margin-bottom: calc(100vh / 4);
}

.form-block h4 {
	margin-bottom: 0.5em;
	margin-top: 0;
	color: #ff00ff;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}


.formText {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 1em 0;
	padding: 0.5em 0.5em;
	border: 1px solid #e6e6e6;
	font-size: 1.6em;
	color: #333333;
}

.formText:focus {
	outline: 1px solid #ff00ff;
}

.radio-list {
	margin: 0 0 2em 0;
	list-style: none;
}

.radio-list li {
	margin-bottom:1em;
}

input[type="radio"] {
	margin-right: 0.5em;
}



textarea {
resize: vertical;

}



.btnType01 {
	margin-bottom: 1em;
	width: 100%;
	height: 60px;
	font-size: 2em;
	font-weight: bold;
	color: #ffffff;
	background: -moz-linear-gradient( 90deg, rgb(255,0,255) 0%, rgb(255,203,255) 100%);
	background: -webkit-linear-gradient( 90deg, rgb(255,0,255) 0%, rgb(255,203,255) 100%);
	background: -ms-linear-gradient( 90deg, rgb(255,0,255) 0%, rgb(255,203,255) 100%);
	background: gradient( 90deg, rgb(255,0,255) 0%, rgb(255,203,255) 100%);
	border-style: none;
}

button.btnType01:active  {
	width: 100%;
	height: 60px;
	font-size: 2em;
	font-weight: bold;
	color: #ffffff;
	background: -moz-linear-gradient( 90deg, rgb(36,151,178) 0%, rgb(170,218,229) 100%);
	background: -webkit-linear-gradient( 90deg, rgb(36,151,178) 0%, rgb(170,218,229) 100%);
	background: -ms-linear-gradient( 90deg, rgb(36,151,178) 0%, rgb(170,218,229) 100%);
	background: gradient( 90deg, rgb(36,151,178) 0%, rgb(170,218,229) 100%);
	border-style: none;
}


.formTable {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1em;
	border: 1px solid #534741;
	font-size: 1.3em;
}

.formTable th {
	padding: 0.5em;
	background-color: #998675;
	color: #ffffff;
	border: 1px solid #534741;
	text-align: left;
}

.formTable td {
	padding: 0.3em;
	background-color: #e5dfd8;
	color: #333333;
	border: 1px solid #534741;
	text-align: left;
}







footer {
	box-sizing: border-box;
	width: 100%;
	height: 2em;
	padding: 0.5em;
	background-color: #333333;
	color: #f0f0f0;
	text-align: center;
}




/*　背景
===================================================*/
.errorTitle {
	width: 55%;
	height: 0;
	padding-top: 20%;
	margin: 0 auto;
	box-sizing: border-box;
	background-image: url("../img/icon_logo_j.svg");
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 100%;
	overflow: hidden;
}




/*　追加要素　20180417
===================================================*/
#ex_01 {
	width: 100%;
	height: 0;
	padding-top: 97.14%;
	background-image: url(../../images/lp_ex_01.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

.ex_02 {
	width: 100%;
	height: 0;
	padding-top: 109.14%;
	background-image: url(../../images/lp_ex_02.png);
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

@media (min-width: 320px) {
	.container2 {
		position:relative;
		width: 100vw;
		height: calc(100vh - 2em);
		background-image: url(../../images/bg_ver2.jpg), url(../../images/bg2_ver2.jpg);
		background-repeat: no-repeat;
		background-position: 15% 50%;
		background-color: #e4e3df;
		background-size: cover;
	}
}

@media (min-width: 415px) {
	.container2 {
		position:relative;
		margin: 0 auto;
		width: 960px;
		height: calc(100vh - 2em);
		background-image: url(../../images/bg_ver2.jpg), url(../../images/bg2_ver2.jpg);
		background-repeat: no-repeat;
		background-position: 0 calc((100vh - 755px) / 2);
		background-color: #e4e3df;
		background-size: auto;
	}
}










/* アニメーション関連 */

/* タイミングファンクション */
.anm_tf_ease {
	animation-timing-function: ease;
}
.anm_tf_linear {
	animation-timing-function: linear;
}
.anm_tf_ease_in {
	animation-timing-function: ease-in;
}
.anm_tf_ease_out {
	animation-timing-function: ease-out;
}
.anm_tf_ease_in_out {
	animation-timing-function: ease-in-out;
}


/* 継続時間 */

.anm_dt_025s {
	animation-duration: 0.25s;
}


.anm_dt_03s {
	animation-duration: 0.3s;
}

.anm_dt_05s {
	animation-duration: 0.5s;
}

.anm_dt_1s {
	animation-duration: 1s;
}

.anm_dt_2s {
	animation-duration: 2s;
}


.anime_ease_out_025s {
  transition: all .25s ease-out;
}

/* 遅延再生 */

.anm_delay_025s {
	animation-delay: 0.25s;
}

.anm_delay_03s {
	animation-delay: 0.3s;
}

.anm_delay_05s {
	animation-delay: 0.5s;
}

.anm_delay_1s {
	animation-delay: 1s;
}

/* 無限再生 */
.anm_loop {
	animation-iteration-count: infinite;
}