@charset "UTF-8";

/* Product - AppCheck */

/* Common */
h3.title { display:inline-block; border-bottom:1px solid #ccc; word-break:keep-all; }

div#slideBackground { width:100%; height:100%; background-image:url('/res/img/sub/visual/v_why.jpg'); background-position:center center; background-size:cover; position:fixed; top:0; left:0; z-index:1; }

section#mqSlide { width:100%; display:flex; flex-direction:column; overflow:hidden; position:relative; z-index:101; }
section#mqSlide > div { min-height:100vh; display:-ms-flexbox; display:flex; -ms-flex-direction:column; flex-direction:column; -ms-flex-pack:center; justify-content:center; position:relative; text-align:center; color:#fff; }
section#mqSlide > div > * { padding-left:20px; padding-right:20px; }
section#mqSlide > div > h2 { margin-top:150px; }
section#mqSlide > div > h2 > b > span { display:block; }
section#mqSlide > div > p.title { padding:15px 10px; font-weight:bold; font-style:italic; display:inline-block; background-color:rgba(255, 255, 255, .1); color:#222; }
section#mqSlide > div > p.description { margin-bottom:150px; }
section#mqSlide > div > p.description > span { display:block; line-height:1.6; }

/* Guard */
div#slideGuard { width:100%; background-color:#fff; position:relative; z-index:102; }
div#slideGuard > div { overflow:hidden; padding-left:15px; padding-right:15px; text-align:center; }
div#slideGuard > div > p.descript { margin-top:20px; background-color:#eee; padding:15px; border-radius:100px; }
div#slideGuard > div > p.point > span { margin-top:6px; display:block; }
div#slideGuard img { max-width:100%; max-height:100%; }

/* Video */
div#slideVideo { width:100%; background:url('../../../img/sub/cont/why/img_why_video.jpg') center center no-repeat; background-size:cover; position:relative; z-index:102; }
div#slideVideo > div { overflow:hidden; padding-left:15px; padding-right:15px; text-align:center; }
div#slideVideo > div > dl { background-color:rgba(30, 180, 100, .9); }
div#slideVideo > div > dl > dt { color:#ff0; font-weight:bold; }
div#slideVideo > div > dl > dd.text { color:#fff; }
div#slideVideo > div > dl > dd.text > span { line-height:1.4; }
div#slideVideo > div > dl > dd.btn > a { display:inline-block; border:1px solid #fff; color:#fff; font-weight:bold; }
div#slideVideo > div > dl > dd.btn > a:focus,
div#slideVideo > div > dl > dd.btn > a:hover { background:#fff; color:#1fb467; }

/* Shield */
div#slideShield { width:100%; background-color:#fff; position:relative; z-index:102; }
div#slideShield > div { overflow:hidden; padding-left:15px; padding-right:15px; text-align:center; }
div#slideShield > div > div > dl { padding:30px 20px; background-position:center bottom; background-size:cover; background-repeat:no-repeat; }
div#slideShield > div > div > dl:nth-of-type(1) { background-image:url('../../../img/sub/cont/why/img_why_shield_f1.jpg'); }
div#slideShield > div > div > dl:nth-of-type(2) { background-image:url('../../../img/sub/cont/why/img_why_shield_f2.jpg'); }
div#slideShield > div > div > dl:nth-of-type(3) { background-image:url('../../../img/sub/cont/why/img_why_shield_f3.jpg'); }
div#slideShield > div > div > dl > dt { color:#ff0; font-weight:bold; }
div#slideShield > div > div > dl > dd { color:#fff; word-break:keep-all; line-height:1.4; }
div#slideShield > div > p.point > span { margin-top:6px; display:block; }
div#slideShield img { max-width:100%; max-height:100%; }

/* Share */
div#slideShare { width:100%; background:url('../../../img/sub/cont/why/img_why_share.jpg') center center no-repeat; background-size:cover; position:relative; z-index:102; }
div#slideShare > div { overflow:hidden; padding-left:15px; padding-right:15px; text-align:center; }
div#slideShare > div > p.txt { margin-bottom:10px; font-size:1.2em; }
div#slideShare > div > p.point > span { margin-top:6px; display:block; }
div#slideShare img { max-width:100%; max-height:100%; }

/* Stable */
div#slideStable { width:100%; background-color:#fafafa; position:relative; z-index:102; }
div#slideStable > div { overflow:hidden; padding-left:15px; padding-right:15px; text-align:center; }
div#slideStable > div > div > dl { padding-top:100px; background-position:center top; background-repeat:no-repeat; word-break:keep-all; }
div#slideStable > div > div > dl:nth-of-type(1) { background-image:url('../../../img/sub/cont/why/img_why_user.png'); }
div#slideStable > div > div > dl:nth-of-type(2) { background-image:url('../../../img/sub/cont/why/img_why_gs.png'); }
div#slideStable > div > div > dl:nth-of-type(3) { background-image:url('../../../img/sub/cont/why/img_why_setup.png'); }
div#slideStable > div > div > dl:nth-of-type(4) { background-image:url('../../../img/sub/cont/why/img_why_feather.png'); }
div#slideStable > div > div > dl:nth-of-type(5) { background-image:url('../../../img/sub/cont/why/img_why_tools.png'); }
div#slideStable > div > div > dl > dt { color:#1fb467; font-weight:bold; }

/* Customer */
#slideCustomer { width:100%; background-color:#fff; overflow:hidden; position:relative; z-index:101; }
#slideCustomer > div { padding-left:15px; padding-right:15px; overflow:hidden; text-align:center; }
#slideCustomer > div > ul { display:-ms-flex-box; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-pack:justify; justify-content:space-between; }
#slideCustomer > div > ul > li { text-align:center; border:1px solid #eee; }
#slideCustomer > div > ul > li:hover { border-color:#080; }
#slideCustomer > div > ul > li > img { max-width:100%; max-height:100%; vertical-align:bottom; }

div.arrow { width:80px; height:53px; position:absolute; left:50%; bottom:40px; margin-left:-40px; background:url('/res/img/index/img_scrolling_arrow.png') no-repeat; z-index:101; opacity:.3; }

/*** Mobile ***/
@media screen and (min-width:1px) and (max-width:639px) {
	/* Common */
	h3.title { padding-bottom:18px; margin-bottom:35px; font-size:3em; }

	/* Main */
	section#mqSlide > div > h2 { font-size:4em; word-break:break-all; }
	section#mqSlide > div > p.title { font-size:1.6em; margin-top:30px; }
	section#mqSlide > div > p.description { font-size:1.4em; margin-top:30px; }

	/* Guard */
	div#slideGuard { padding-top:40px; padding-bottom:40px; }
	div#slideGuard > div > p.point { font-size:1.1em; }
	div#slideGuard > div > p.point > span { font-size:1.4em; }

	/* Video */
	div#slideVideo { padding-top:40px; padding-bottom:40px; }
	div#slideVideo > div > dl { margin:20px auto; padding:40px 20px; }
	div#slideVideo > div > dl > dt { font-size:2.5em; }
	div#slideVideo > div > dl > dd { margin-top:15px; }
	div#slideVideo > div > dl > dd.text { font-size:1.3em; }
	div#slideVideo > div > dl > dd.btn > a { padding:10px 20px; font-size:1.6em; }

	/* Shield */
	div#slideShield { padding-top:40px; padding-bottom:40px; }
	div#slideShield > div > p.img { margin-bottom:20px; }
	div#slideShield > div > div > dl:not(:first-of-type) { margin-top:10px; }
	div#slideShield > div > div > dl > dd { margin-top:10px; }
	div#slideShield > div > p.point { font-size:1.1em; }
	div#slideShield > div > p.point > span { font-size:1.4em; }

	/* Share */
	div#slideShare { padding-top:40px; padding-bottom:40px; }
	div#slideShare > div > p.point { font-size:1.1em; }
	div#slideShare > div > p.point > span { font-size:1.4em; }
	
	/* Stable */
	div#slideStable { padding-top:40px; padding-bottom:40px; }
	div#slideStable > div > div > dl:not(:last-of-type) { margin-bottom:40px; padding-bottom:40px; border-bottom:1px dashed #dadada; }
	div#slideStable > div > div > dl > dd { margin-top:10px; }

	/* Customer */
	div#slideCustomer { padding-top:40px; padding-bottom:40px; }
	div#slideCustomer > div > h3 { margin-bottom:15px; font-size:3em; }
	div#slideCustomer > div > ul > li { width:48%; margin-top:15px; }
}

/*** Mobile & Tablet ***/
@media screen and (min-width:1px) and (max-width:1019px) {
	/* Features */
	div.feature > div { background-position:center top; }
	div.feature > div > ul > li:not(:first-of-type) { margin-top:15px; }

	/* Guard */
	div#slideGuard > div > p.point { margin-top:20px; }

	/* Shield */
	div#slideShield > div > p.img { margin-bottom:30px; }
	div#slideShield > div > div > dl > dt { font-size:1.4em; }
	div#slideShield > div > div > dl > dd { font-size:1.2em; }
	div#slideShield > div > p.point { margin-top:20px; }

	/* Share */
	div#slideShare > div > p.point { margin-top:20px; }

	/* Stable */
	div#slideStable > div > div > dl > dt { font-size:1.2em; }
}

/*** Tablet ***/
@media screen and (min-width:640px) and (max-width:1019px) {
	/* Common */
	h3.title { padding-bottom:20px; margin-bottom:40px; font-size:3.25em; }

	/* Main */
	section#mqSlide > div > h2 { font-size:5.5em; }
	section#mqSlide > div > p.title { font-size:1.8em; }
	section#mqSlide > div > p.description { font-size:1.5em; }
	section#mqSlide > div > ul { margin-top:40px; }
	section#mqSlide > div > ul > li > a { font-size:1.8em; }

	/* Guard */
	div#slideGuard { padding-top:60px; padding-bottom:60px; }
	div#slideGuard > div > p.descript { font-size:1.4em; }
	div#slideGuard > div > p.point { font-size:1.2em; }
	div#slideGuard > div > p.point > span { font-size:1.6em; }

	/* Video */
	div#slideVideo { padding-top:60px; padding-bottom:60px; }
	div#slideVideo > div > dl { margin:20px auto; padding:40px 20px; }
	div#slideVideo > div > dl > dt { font-size:3em; }
	div#slideVideo > div > dl > dd.text { font-size:1.4em; }
	div#slideVideo > div > dl > dd.btn > a { padding:10px 40px; font-size:1.8em; }

	/* Shield */
	div#slideShield { padding-top:60px; padding-bottom:60px; }
	div#slideShield > div > p.point { font-size:1.2em; }
	div#slideShield > div > p.point > span { font-size:1.6em; }

	/* Share */
	div#slideShare { padding-top:60px; padding-bottom:60px; }
	div#slideShare > div > p.point { font-size:1.2em; }
	div#slideShare > div > p.point > span { font-size:1.6em; }

	/* Stable */
	div#slideStable { padding-top:60px; padding-bottom:60px; }

	/* Customer */
	#slideCustomer { padding-top:60px; padding-bottom:60px; }
	#slideCustomer > div > ul > li { width:24%; margin-top:15px; }
	#slideCustomer > div > ul > li:nth-of-type(1),
	#slideCustomer > div > ul > li:nth-of-type(2),
	#slideCustomer > div > ul > li:nth-of-type(3),
	#slideCustomer > div > ul > li:nth-of-type(4) { margin-top:0; }
	#slideCustomer > div > ul > li:not(:nth-of-type(4n+1)) { margin-left:1.25%; }
}

/*** Tablet & Desktop ***/
@media screen and (min-width:640px) {
	section#mqSlide > div > p.title { margin-top:40px; }
	section#mqSlide > div > p.description { margin-top:40px; }

	/* Video */
	div#slideVideo > div > dl > dd { margin-top:20px; }
	div#slideVideo > div > dl > dd > span { display:block; }

	/* Shield */
	div#slideShield > div > p.img { margin-bottom:30px; }
	div#slideShield > div > div { display:-ms-flexbox; display:flex; -ms-flex-pack:justify; justify-content:space-between; }
	div#slideShield > div > div > dl { width:31%; }
	div#slideShield > div > div > dl > dt { font-size:1.6em; }
	div#slideShield > div > div > dl > dd { margin-top:15px; }

	/* Stable */
	div#slideStable > div > div { display:-ms-flexbox; display:flex; -ms-flex-pack:justify; justify-content:space-between; }
	div#slideStable > div > div > dl { width:17%; }
	div#slideStable > div > div > dl > dd { margin-top:15px; }

	#slideCustomer > div > ul:after { content:""; -ms-flex:auto; flex:auto; }
}

/*** Desktop ***/
@media screen and (min-width:1020px) {
	/* Common */
	h3.title { padding-bottom:20px; margin-bottom:50px; font-size:3.5em; }

	/* Main */
	section#mqSlide > div > h2 { font-size:7em; }
	section#mqSlide > div > p.title { font-size:2em; }
	section#mqSlide > div > p.description { font-size:1.6em; }

	/* Guard */
	div#slideGuard { padding-top:80px; padding-bottom:80px; }
	div#slideGuard > div { width:1000px; margin-left:auto; margin-right:auto; }
	div#slideGuard > div > p.descript { font-size:1.4em; }
	div#slideGuard > div > p.point { margin-top:40px; font-size:1.5em; }
	div#slideGuard > div > p.point > span { font-size:2em; }

	/* Video */
	div#slideVideo { padding-top:80px; padding-bottom:80px; }
	div#slideVideo > div > dl { width:700px; margin:30px auto; padding:50px 30px; border-radius:200px; }
	div#slideVideo > div > dl > dt { font-size:4em; }
	div#slideVideo > div > dl > dd.text { font-size:1.6em; }
	div#slideVideo > div > dl > dd.btn > a { padding:12px 60px; font-size:2em; border-radius:100px; }

	/* Shield */
	div#slideShield { padding-top:80px; padding-bottom:80px; }
	div#slideShield > div { width:1000px; margin-left:auto; margin-right:auto; }
	div#slideShield > div > div > dl > dd { font-size:1.3em; }
	div#slideShield > div > p.point { margin-top:40px; font-size:1.5em; }
	div#slideShield > div > p.point > span { font-size:2em; }

	/* Share */
	div#slideShare { padding-top:80px; padding-bottom:80px; }
	div#slideShare > div { width:1000px; margin-left:auto; margin-right:auto; }
	div#slideShare > div > p.point { margin-top:40px; font-size:1.5em; }
	div#slideShare > div > p.point > span { font-size:2em; }

	/* Stable */
	div#slideStable { padding-top:80px; padding-bottom:80px; }
	div#slideStable > div { width:1000px; margin-left:auto; margin-right:auto; }
	div#slideStable > div > div > dl > dt { font-size:1.3em; }
	div#slideStable > div > div > dl > dt > span { display:block; }

	/* Customer */
	#slideCustomer { padding-top:80px; padding-bottom:80px; }
	#slideCustomer > div { width:1000px; margin-left:auto; margin-right:auto; }
	#slideCustomer > div > ul > li { width:19%; margin-top:15px; }
	#slideCustomer > div > ul > li:nth-of-type(1),
	#slideCustomer > div > ul > li:nth-of-type(2),
	#slideCustomer > div > ul > li:nth-of-type(3),
	#slideCustomer > div > ul > li:nth-of-type(4),
	#slideCustomer > div > ul > li:nth-of-type(5) { margin-top:0; }
	#slideCustomer > div > ul > li:not(:nth-of-type(5n+1)) { margin-left:1.25%; }
}