@charset "UTF-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
box-sizing: border-box;
text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
font-size: 62.5%;
}
body {
line-height: 1;
display: none;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.cf::after {
  content:"";
  display:table;
  clear:both;
}

	#contentsWrap { font-size: 1.3rem; line-height: 1.9; text-align: justify; text-justify: inter-ideograph;}
	body { position: relative; left: 0; overflow-x: hidden; -webkit-text-size-adjust: 100%;}
	header { min-width: 1000px; width: 100%; padding: 10px 30px 8px 30px; position: absolute; top: 0; left: 0; z-index: 10;}	
	header.fixed_header { position: fixed; background: rgba(255,179,173,.8); display: none;}	
	header h1 { width: 121px; height: 22px; vertical-align: bottom;}	
	header h1 img { width: 100%;}	
	header ul.icn { float: right; margin-top: -25px; display: table;}
	header ul.icn li { vertical-align: middle; padding-left: 7px; display: table-cell; width: 28px; height: 28px;}	
	header ul.icn li.line span { background: #00b900; border-radius: 28px; position: relative; width: 28px; height: 28px; display: block; margin-top: -2px;}	
	header ul.icn li.line span iframe { position: absolute !important; top: 4px; left: 4px;}	
	header ul.icn li.btn_nav { width: 22px; height: 19px; cursor: pointer;}	
	header ul.icn li.btn_nav img { width: 100%;}	
	
	nav { padding-top: 10px; position: absolute; top: 0; background: #ffb3ad; z-index: 100; position: fixed; visibility: hidden;}	
	nav .inner { overflow: auto;}	
	nav p.btn_nav_close { width: 75%; text-align: right; margin: 20px auto 50px auto; color: white; font-size: 3rem; cursor: pointer;}	
	nav h2 { width: 209px; height: 68px; margin: 0 auto 20px auto;}	
	nav h2 img { width: 100%;}	
	nav li { padding: 20px; font-size: 1.4rem; line-height: 2; border-bottom: 1px solid #ffd9d6;}	
	nav li a { padding: 20px; color: white; text-decoration: none;}	
	nav li a:before { content: ''; width: 10px; height: 10px; display: inline-block; background-image: url(../images/icn_nav.png); background-repeat: no-repeat; background-size: 100%; margin-right: 10px;}	

	.contentWrapper.fixed { position: fixed; width: 100%; height: 100%;}

	#keyvis { min-width: 1000px; background-image: url(../images/bg_keyvis.jpg); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center; position: relative;}
	#keyvis h1 { width: 570px; height: 214px; position: absolute; top: 25%; left: 15%;}
	#keyvis h1 img { width: 100%;}


	h1.sectionTitle { text-align: center; margin-bottom: 60px; font-size: 3.1rem; letter-spacing: 7px;}
	h1.sectionTitle br { display: none;}
	h1.sectionTitle02 { text-align: center; font-size: 2.6rem; letter-spacing: 7px;}
	h1.sectionTitle span { font-size: 2.8rem;}
	.mintyo { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Sawarabi Mincho", serif;}
	p.btn01 { text-align: center; clear: both;}
	p.btn01 a { display: inline-block; margin: 0 auto; padding: 15px 40px; letter-spacing: 2px; color: white; background: #ffb3ad; border-radius: 7px; box-shadow:0px -4px 0px 0px #eba59f inset; transition: all .2s; text-decoration: none;}
	p.btn01 a br { display: none;}
	p.btn01 a:hover { box-shadow: none; padding: 15px 40px 13px 40px; margin-top: 2px;}
	p.btn01 a:after { content: ''; margin-left: 10px; background: url(../images/icn_btn01.png); background-size: cover; vertical-align: -2px; display: inline-block; width: 14px; height: 12px;}
	
	#section01 { width: 1000px; margin: 0 auto; padding: 80px 0;}
	#section01 dl dt { width:  500px; float: left;}
	#section01 dl dt img { width: 100%;}
	#section01 dl dd { width: 500px; padding: 50px; float: left; letter-spacing: 2px;}
	
	#section02 { width: 100%; padding-top: 80px; background: url(../images/bg_section02.jpg); background-size: cover; background-position: center; position: relative;}
	#section02:after { content: ''; width: 100%; min-width: 1000px; height: 90px; background: url(../images/bg_devide_02.png); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; bottom: 0; left: 0;}
	#section02 h1.sectionTitle br { display: none;}	
	#section02 .inner { width: 960px; margin: 0 auto; padding-bottom: 270px; background: url(../images/img_section02_02.png); background-size: 503px 347px; background-repeat: no-repeat; background-position: bottom right;}
	#section02 .inner .trouble { display: table; background-image: url(../images/img_section02_01.png); background-repeat: no-repeat; background-size: 240px 180px; background-position: bottom left;}
	#section02 .inner .trouble h2 { position: relative; width: 680px; margin-left: 260px; padding: 10px; font-size: 1.8rem; text-align: center; color: #ffb3ad; background: white; border: 1px solid #ffb3ad; border-radius: 100px;}
	#section02 .inner .trouble h2 br { display: none;}
	#section02 .inner .trouble h2:before {
		content: "";
		position: absolute;
		bottom: -10px;
		left: 50%;
		margin-left: -9px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 11px 8px 0 9px;
		border-color: white transparent transparent transparent;
		z-index: 1;
	}
	#section02 .inner .trouble h2:after {
		content: "";
		position: absolute;
		bottom: -12px;
		left: 50%;
		margin-left: -10px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 12px 9px 0px 10px;
		border-color: #ffb3ad transparent transparent transparent;
		z-index: 0;
	}
	#section02 .inner .trouble p img { width: 100%;}
	#section02 .inner .trouble ul { display: table; border-spacing: 20px; margin-left: 240px;}
	#section02 .inner .trouble ul li { width: 160px; height: 160px; background: white; display: inline-block; border: 2px solid #ffb3ad; color: #eba59f; text-align: center; vertical-align: middle; display: table-cell;}
	#section02 .inner .trouble ul li span { font-size: 1.9rem; font-weight: 900;}
	#section02 .inner .solution h2 { background: #ffb3ad; font-size: 1.8rem; color: white; padding: 10px; text-align: center; border-radius: 100px; position: relative;}
	#section02 .inner .solution h2 br { display: none;}
	#section02 .inner .solution h2:before {
		content: "";
		position: absolute;
		bottom: -8px; left: 50%;
		margin-left: -9px;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 9px 9px 0 9px;
		border-color: #ffb3ad transparent transparent transparent;
		z-index: 0;
	}
	#section02 .inner .solution ul { margin-top: 60px;}
	#section02 .inner .solution ul li { width: 730px; font-size: 1.4rem; margin-bottom: 15px; padding-bottom: 15px; display: table; border-bottom: 1px dashed #cbc6a9; letter-spacing: 2px;}
	#section02 .inner .solution ul li:last-child { border-bottom: none;}
	#section02 .inner .solution ul li > span { display: table-cell; vertical-align: middle; padding-left: 25px; line-height: 1.5;}
	#section02 .inner .solution ul li img { display: table-cell; vertical-align: middle;}
	#section02 .inner .solution ul li span span { font-size: 2.1rem; font-weight: 900; color: #ffb3ad;}	
	
	#section03 { width: 960px; margin: 0 auto; padding: 80px 0 20px 0;}
	#section03 li { margin-bottom: 16px;}
	#section03 figure { position: relative;}
	#section03 figure figcaption.time { background: white; padding: 20px 20px 0 20px; display: inline-block; border-radius:64px 64px 0 0; position: absolute; bottom: 0; left: 50%;}
	#section03 figure { position: relative;}
	#section03 figure ol li { width: 310px; border: 1px solid #f0f0f0; float: left; margin-right: 10px; border-radius: 4px; overflow: hidden;}
	#section03 figure ol li:nth-child(3n) { margin-right: 0;}
	#section03 figure ol li dl dt img { width: 45px; height: 45px; vertical-align: 0; display: table-cell;}
	#section03 figure ol li figure img { width: 100%;}
	#section03 figure ol li dl dt { font-weight: 900; display: table;}
	#section03 figure ol li dl dt span { display: table-cell; padding: 0 15px; vertical-align: middle; line-height: 1.5;}
	#section03 figure ol li dl dd { font-size: 1.1rem; color: #969696; padding: 15px;}
	#section03 figure figcaption.notice { font-size: 1.1rem; color: gray; text-align: right;}
	
	#section04 { width: 100%; min-width: 1000px; padding: 80px 0;}
	#section04 ul { position: relative; margin: 60px 0;}
	#section04 ul li { width: 192px; height: 192px; float: left; margin-right: 16px; overflow: hidden;}
	#section04 ul li img { width: 100%; /*transition: transform 1s;*/}
/*	#section04 ul li img:hover { transform: scale(1.1);}*/
	 
	#section05 { width: 100%; position: relative; background: url(../images/bg_section05.jpg); background-repeat: no-repeat; background-size: cover; background-position: center top , center;}
	#section05:before { content: ''; width: 100%; min-width: 1000px; height: 90px; background: url(../images/bg_devide_01.png); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; top: 0; left: 0;}
	#section05 .inner {
		width: 960px;
		margin: 0 auto;
		padding-top: 150px;
		background-image: url(../images/img_section05_01.png), url(../images/img_section05_02.png);
		background-size: 400px 180px, 322px 90px;
		background-repeat: no-repeat;
		background-position: top right, bottom left;
	}
	#section05 .inner h1 span.kome { font-size: 1rem;}
	#section05 .inner figure { width: 480px; float: left; padding: 30px; margin-bottom: 30px;}
	#section05 .inner figure h2 { letter-spacing: 2px;}
	#section05 .inner figure figcaption img { width: 100%; display: block; margin: 0 auto;}
	#section05 .inner figure.left figcaption { width: 54px; height: 35px; margin: 0 auto; margin-bottom: 20px;}
	#section05 .inner figure.right figcaption { width: 83px; height: 35px; margin: 0 auto; margin-bottom: 20px;}
	#section05 .inner figure h2 { font-size: 1.8rem; margin-bottom: 20px;}
	#section05 .inner p.notice { text-align: right; font-size: 1rem; color: #333;}
	
	#section06 { width: 960px; margin: 0 auto; padding: 80px 0;}
	#section06 h1 { margin-bottom: 40px; text-align: center; color: #ffb3ad; font-size: 2.4rem; line-height: 1.5; letter-spacing: 2px;}
	#section06 h1 span { font-size: 2.1rem;}
	#section06 ul li { width: 228px; float: left; margin-right: 16px;}
	#section06 ul li:last-child { margin-right: 0;}
	#section06 ul li p img { width: 100%; border-radius: 3px;}
	#section06 ul li dl dt { font-size: 1.2rem; font-weight: 900; margin: 10px 0; color: black;}
	#section06 ul li dl dd { font-size: 1.1rem; margin-bottom: 10px; color: black;}
	p.btn02 { text-align: center; display: block; margin: 0 auto; padding: 3px; color: white; background: #ffb3ad; border-radius: 50px; text-decoration: none; opacity: 1; transition: opacity .1s;}
	p.btn02:after { content: ''; margin-left: 5px; margin-right: -5px; background: url(../images/icn_btn02.png); background-size: cover; display: inline-block; width: 10px; height: 9px;}

	footer { width: 100%; padding: 40px 0 10px 0; background-image: url(../images/bg_footer.jpg); background-size: cover; background-position: center; text-align: center;}
	footer .inner { width: 960px; margin: 0 auto;}
	footer .inner h1 { width: 234px; height: 77px; margin: 0 auto 40px auto;}
	footer .inner h1 img { width: 100%;}
	footer .inner small { color: white;}
	p.btn03 { text-align: center;}
	p.btn03 a { display: inline-block; margin: 0 auto; padding: 15px 40px; font-size: 1.4rem; color: white; background: transparent; border-radius: 7px; border: 1px solid white; transition: border .2s , padding .2s; text-decoration: none; letter-spacing: 2px;}
	p.btn03 a br { display: none;}
	p.btn03 a:hover { border: 3px solid white; padding: 13px 38px;}
	p.btn03 a:after { content: ''; margin-left: 10px; background: url(../images/icn_btn01.png); background-size: cover; vertical-align: -1px; display: inline-block; width: 14px; height: 12px;}

	footer .inner p.lgVeltra { width: 121px; height: 22px; margin: 60px auto 20px auto;}
	footer .inner p.lgVeltra img { width: 100%;}

 @media (max-width: 670px) {
    html { font-size: 70%; }
 	body { min-width: 320px;}
	header { min-width: 320px; padding: 2% 5% 1% 5%;}
	nav { width: 100%; padding-top: 0;}
	nav p.btn_nav_close { width: 95%; margin: 0 auto;}
	nav li { padding: 3%;}
	nav li a { font-size: 1.2rem;}
 	#keyvis { width: 100%; min-width: 320px; background-image: url(../images/bg_keyvis_smp.jpg);}
	#keyvis h1 { position: absolute; top: 20%; left: 50%; width: 80%; margin-left: -40%;}
	 
 	h1.sectionTitle { text-align: left; font-size: 2.1rem; line-height: 1.6; margin-bottom: 8%; letter-spacing: 2px;}
 	.android h1.sectionTitle { letter-spacing: 0;}
	h1.sectionTitle span { font-size: 2rem;}
 	h1.sectionTitle02 { text-align: left; font-size: 1.9rem; line-height: 1.4; width: 80%; margin: 0 auto;}
 	h1.sectionTitle02 br { display: none;}
	p.btn01,
	p.btn03 { width: 90%; margin: 0 auto;}
	p.btn01 a,
	p.btn03 a { font-size: 1.4rem; line-height: 1.5; width: 100%;}
	p.btn01 a br,
	p.btn03 a br { display: block;}
	p.btn01 a:after,
	p.btn03 a:after{ vertical-align: .03rem;}
	p.btn02 a:after{ vertical-align: .2rem;}
	 

	#section01 { width: 100%; margin: 0 auto; padding: 15% 0;}
	#section01 br { display: block;}
	#section01 h1 { width: 80%; margin: 0 auto 15% auto;}
	#section01 dl dt { width: 80%; float: none; margin: 0 auto;}
	#section01 dl dd { width: 80%; padding: 0; margin: 0 auto 5% auto; float: none; letter-spacing: 1px; line-height: 2.1;}

	#section02 { padding-top: 15%;}
	#section02:after { content: none;}
	#section02 h1.sectionTitle br { display: block;}	
	#section02 .inner { width: 80%; margin: 0 auto; padding-bottom: 15%; background: transparent;}
	#section02 .inner .trouble { display: block; background: transparent;}
	#section02 .inner .trouble h2 { width: 100%; margin: 0 0 17rem 0; padding: 2%; font-size: 1.6rem; letter-spacing: 2px; line-height: 1.5;}
	#section02 .inner .trouble h2 br { display: block;}
	#section02 .inner .trouble ul { display: block; margin: 0 0 15% 0; position: relative;}
	#section02 .inner .trouble ul:before { content: '';
		width: 100%;
		height: 40%;
		position: absolute;
		top: -40%;
		display: block;
		background-image: url(../images/img_section02_01.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	 
	#section02 .inner .trouble ul li { width: 100%; height: auto; padding: 2%; margin-bottom: 5%; background: white; display: inline-block; border: 2px solid #ffb3ad; color: #eba59f; text-align: center; font-size: 1.4rem;}
	#section02 .inner .trouble ul li br:first-of-type { display: none;}
	#section02 .inner .solution h2 { font-size: 1.6rem; letter-spacing: 2px; line-height: 1.5;}
	#section02 .inner .solution h2 br { display: block;}
	#section02 .inner .solution ul li { width: 100%;}
	#section02 .inner .solution ul li br { display: none;}
	#section02 .inner .solution ul li span span { font-size: 1.5rem;}

	#section03 { width: 80%; margin: 0 auto;}
	#section03 figure ol li { width: 100%; float: none; border-radius: .4rem; margin-bottom: 10%;}
	#section03 figure ol li dl dd { font-size: 1.2rem;}
	#section03 figure ol li:last-child { margin-bottom: 0;}
	#section03 figure ol li:nth-child(3n) { margin-right: auto; }
	#section03 figure figcaption.notice { font-size: 1rem;}
	 
	#section04 { min-width: 320px; max-width: 100%; overflow: hidden; padding: 6% 0;}
	#section04 ul {margin: 6% 0;}
	 
	#section05:before { content: none;}
	#section05 .inner { width: 80%; margin: 0 auto; padding-top: 30%; background-size: 60%, 60%;}
	#section05 .inner figure { width: 100%; float: none; padding: 0; margin-bottom: 20%;}
	#section05 .inner figure h2 { line-height: 1.5;}
	#section05 .inner figure p { line-height: 2;}
	#section05 .inner figure.left figcaption { width: 16%; margin-bottom: 5%;}
	#section05 .inner figure.right { margin-bottom: 30%;}
	#section05 .inner figure.right figcaption { width: 24%; margin-bottom: 10%;}
	#section05 .inner figure h2 br { display: none; }

	#section06 { width: 100%; padding: 11% 0;}
	#section06 h1 { width: 80%; margin: 0 auto 10% auto; text-align: left; font-size: 2.2rem;}
	#section06 h1 br { display: none;}
	#section06 ul li { width: 100%; float: none; margin: 0 0 8% 0;}
	#section06 ul li:last-child { margin-bottom: 0;}
	#section06 ul li dl { width: 80%; margin: 0 auto;}
	#section06 ul li dl dt { font-size: 1.5rem;}
	#section06 ul li dl dd { font-size: 1.4rem;}
	#section06 ul li p img { border-radius: 0;}
	p.btn02 { width: 80%; margin: 0 auto;}

	footer .inner { width: 100%;}
  }