@charset "utf-8";

body {
font-family: 'SimHei','Lucida Grande', Meiryo, sans-serif;
min-width: 320px;
}

a {
color: #333;
text-decoration: none;
}

img {
max-width: 100%;
height: auto;
}

ol li, ul li {list-style-position: inside;}
sup {
font-size: 1rem;
vertical-align: top;

}

/*========================================
  Common Style
==========================================*/
#wrap {
width: auto;
background-color: #fff;
}
header {position: relative;}
/*header .brand-logo img {
position: relative;
top: 0;
left: 0;
zoom: 1;
z-index: 999;
}*/
header .brand-logo .logo img {
width:40%;
position: relative;
top: 0;
left: 0;
zoom: 1;
z-index: 999;
float: left;
}
header .brand-logo .jp img,header .brand-logo .lang img {
width:20%;
position: relative;
top: 0;
right: 0;
zoom: 1;
z-index: 999;
float: left;
}
.language {
background:#000;
text-align:right;
}
.language .jp img {
width:20%;
}

/* h1
---------------------------------*/
header .mainVisual img {
width: 100%;
height: auto;
background-color: #fff;
}

/* Nav
---------------------------------*/
#gnav {
background-color: #007edf;
height: auto;
width: 100%;
}
#gnav li a {
position: relative;
display: block;
padding: 17px 6% 17px 6%;
border-bottom: 2px dotted #7b99d8;
color: #fff;
font-size: 1.6rem;
font-weight: 600;
}
#gnav li.lsn a {border-bottom: none;}
#gnav li.off a {color: #61b1ee;}
#gnav li a::before, #gnav li a::after {
position: absolute;
top: 50%;
right: 8px;
display: block;
content: '';
width: 12px;
height: 3px;
background-color: #3198e7;
}
#gnav li a::before {
margin-top: -4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#gnav li a::after {
margin-top: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/* nav （COMING SOON） */
#gnav li.off {
position: relative;
display: block;
padding: 17px 6% 17px 6%;
border-bottom: 2px dotted #409fe7;
color: #fff;
font-size: 1.6rem;
font-weight: 600;
}
#gnav li.off {color: #49a4ea;}
#gnav li.lsn {border-bottom: none;}

#gnav li.off::before,
#gnav li.off::after {
position: absolute;
top: 50%;
right: 8px;
display: block;
content: '';
width: 12px;
height: 3px;
background-color: #3198e7;
}

#gnav li.off::before,
#gnav li.off::after {
/*background-color: #61b1ee;*/
}
#gnav li.off::before {
margin-top: -4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#gnav li.off::after {
margin-top: 3px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

/* article / section
---------------------------------*/
article {
line-height: 1.7;
font-size: 1.6rem;
}
section {
width: 100%;
height: auto;
margin-top: 1rem;
font-size: 1.6rem;
}

/* main-info
---------------------------------*/
#main-info {
text-align: center;
margin: 20px auto;
max-width: 88%;
background-color: #fff;
}


/*========================================
Common Class
==========================================*/
.indent-1	 {text-indent: -1em;}
.indent-15 {text-indent: -1.5em;}
.indent-18 {text-indent: -1.8em;}
.indent-2 	{text-indent: -2em;}

/* 余白 */
.pt05 {padding-top: 0.5em;}
.pt1	 {padding-top: 1em;}
.pt2 	{padding-top: 2em;}
.pb07 {padding-bottom: 0.7em;}
.pb1	 {padding-bottom: 1em;}
.pl14 {padding-left: 1.4em;}

.mt1 {margin-top: 1em;}
.mt2 {margin-top: 2em;}
.mt3 {margin-top: 3em;}

.mt-1 {margin-top: -1em;}
.mt-2 {margin-top: -2em;}

.ml-05 {margin-left: -0.5em;}
.ml-2	 {margin-left: -2em;}
.ml05 	{margin-left: 0.5em;}

.mlr6 {margin: 0 6%;}

.mb1		 {margin-bottom: 1em;}
.mb1-5 {margin-bottom: 1.5em;}
.mb2		 {margin-bottom: 2em;}
.mb3 		{margin-bottom: 3em;}

/* width */
.w30 {width: 30%;}
.w50 {width: 50%;}
.w56 {width: 56%;}
.w88 {width: 88%;}
.w94 {width: 94%; text-align: center;}
.w100 {width: 100%;}

/* font */
.06875rem {font-size:0.6875rem;}
.075rem {font-size:0.75rem;}
.0875rem {font-size: 0.875rem;}
.1rem {font-size: 1rem;}
.1142rem {font-size: 1.142rem;}
.1333rem {font-size: 1.333rem;}

.small-tx {
font-size: 1.2rem;
line-height: 1.3;
padding-top: 8px;
}
.tx-center {text-align: center;}
.tx-left {text-align: left;}

.bold {font-weight: bold;}

/* bg color */
.dgray {background-color: #cecece;}
.lgray {background-color: #e5e5e5;}
.wh {background-color: #fff;}

.radius5 {
-ms-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius: 5px;
}
.box-siz {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Top Page
=====================================================*/
#main{position: relative; margin-top:0;}
#main .mainVisual{
/*margin-top: -1rem;*/
}
#main ul.top-btn{
	width: 72%;
	margin-left: 14%;
	margin-right: 14%;
	padding-bottom: 100px;
	list-style: none;
	position: absolute;
	bottom: 0%;
	z-index: 999;
}

#main ul.top-btn li:nth-of-type(3){
	margin-top: 15px;
}

#youtubeMovie{
	width: 288px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}
/* whats Page
=====================================================*/
/* sub画像1 */
.sub-image1 img {
position: absolute;
top: 65%;
right: 0;
z-index: 100;
width: 40%;
height: auto;
padding-right: 1%;
}
/* whats1 */
#whats1 {
margin-top: 2em;
background-color: #fff;
position: relative;
}
#whats1 .title1 img {
width: 80%;
height: auto;
margin-right: 20%;
margin-bottom: 2.2em;
z-index: 50;
}
#whats1 .whats-tx1 {
width: 86%;
margin-right: 7%;
margin-left: 7%;
margin-bottom: 2.2em;
}
/* whats2 */
#whats2 .whats-title2 img {
width: 93%;
height: auto;
margin-left: 7%;
margin-bottom: 1.8em;
}
#whats2 .whats-tx2 {
width: 86%;
margin: 0 7%;
margin-bottom: 3em;
}
/* whats3 */
#whats3 .whats-title3 img {
width: 80%;
height: auto;
margin-right: 20%;
margin-bottom: 2.2em;
z-index: 50;
}
#whats3 .whats-tx3 {
width: 86%;
margin: 0 7%;
}

/* spec
=====================================================*/
.left-title1 { /*左タイトル*/
width: 80%;
height: auto;
margin-right: 20%;
margin-bottom: 1.5em;/*	z-index: 50;*/
}
.left-title2 { /*左タイトル*/
width: 93.5%;
height: auto;
margin-right: 6.5%;
margin-bottom: 1.5em;/*	z-index: 50;*/
}
#spec .image1 img {
width: 58%;
margin: 0 21% 0;
}
.right-title2 {
width: 94%;
margin-left: 6%;
margin-bottom: 1.5em;
}
.right-title {
width: 100%;
margin-bottom: 3.0em;
}
/* content-inner
---------------------------------*/
.content-inner {
width: 88%;
margin: 0 auto;
}
.content-inner2 {
/*	width: 88%;
height: auto;
margin: 0 auto;
margin-right: 6%;
margin-left: 6%;
margin-bottom: 2em;*/
}
/* step */
.content-inner a {
color: #58a8ce;
font-weight: bold;
}
.content-inner ul li {
list-style-type: disc;
margin-bottom: 1em;
margin-left: -5px;/*padding*/
}

/* table
---------------------------------*/
table.specArea {
width: 100%;
margin: 0 auto;
font-size: 1.4rem;
border-bottom: 1px solid #5c5c5c;
}
table.specArea th, td {
padding: 5px;
border-top: 1px solid #5c5c5c;
/*vertical-align: middle;*/
line-height: 1.4;
}
table.specArea th {
width: 38%;
background: #cecece;
}

/* point
---------------------------------*/
#point {
margin-top: 1.5em;
}
.left-point {
float: left;
width: 54%;
border-left: 1px solid #4ecaca;
padding-left: 0.5em;
padding-top: 0.4em;
padding-bottom: 0.4em;
margin-bottom: 2em;
}
.point-lead{	margin: 0 6% 1.8em;}

.left-point dt {
font-size: 1.8rem;
padding-bottom: 1.5rem;
}
.left-point dd {
font-size:1.3rem;
line-height: 1.4;
}
.left-point dd.minH {
	min-height:9em;
}

dd.small-tx {
font-size: 1.2rem;
line-height: 1.3;
padding-top: 8px;
}
dd.small-tx  sup{
	vertical-align: top;
}

.right-img {
float: right;
width: 40%;
padding-top: 1.2em;
}
.right-img2 img {
float: right;
width: 34%;
padding-top: 1em;
}
.spec-easy img {
border-left: 1px solid #4ecaca;
padding-left: 0.5em;
padding-bottom: 0.4em;
margin-top: -2em;
margin-bottom: 2em;
}
.link-tx a{
	font-size: 1.4rem;
}

/*  pinkArea
---------------------------------*/
.pinkArea {
background-color: #ffe0ea;
color: #ff0084;
font-weight: 700;
padding: 12px 11px;
margin-bottom: 1.8em;
}
.pinkArea dt {
font-size: 1.6rem;
color: #333;
font-weight: normal;
}

/*  simulation img
---------------------------------*/
.spec-limage {
width: 33%;
margin-top: 1em;
margin-bottom: 1px;}

/* howto
=====================================================*/

.step-img1{
	margin-top:1em;
	margin-bottom:1em;
}

.howto-inner2 {
width: 96%;
margin:0 auto;
/*margin-left: 2%;
margin-right: 2%;*/
}

/**/
#step{font-size:1.6rem;}
.howto-inner,.step-inner {width: 100%;}
.step-inner h3{
	margin-left:-0.6em;
}
.step-inner ul{
	margin-top:-0.2em;
	}
.step-inner ul li{
	list-style-position:inside;
	margin-left:0.1em;
	font-size:1.4rem;
	line-height:1.5;
}
ul.note li{
	list-style:none;
	line-height:1.3;
	font-size:1.3rem;
}

.title-follow{
	width:93%;
	margin-left:7%;
	margin-bottom:1.5em;
}
.follow-img{
	margin-bottom:1em;
}
.howto-inner li{
	padding-bottom:0.8em;
}

#note p{
	margin-top:2em;
}

.bg-gray {
background-color: #efefef;
padding: 15px 12px;
z-index: 999;
}
.bg-gray ul.list li {
list-style: inside;
list-style-type: disc;
font-size:1.5rem;
}
.bg-gray ul.non li {
list-style: none;
line-height: 1.2;
}

#note ul.list2 li{
line-height:1;
font-size:1.4rem;
padding-bottom:0;
}

#note ul.list3{
font-size:1.6rem;
margin-top:2em;
}
#note .last-image {
	margin-top:-2px;
	margin-top:-15%;
}
#howtoChui{
	border: solid 1px #000;
	padding:10px;
	font-size: 1.4rem;
	margin-left: 40px;
	margin-right: 40px;
}
hr{
/*	width: 94%;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #666;
	background-color: #000;
	text-align: center;*/
}
.nidan{
	margin-left:5px;
	margin-bottom: 1.5rem;
}
/* footer
-------------------------------------------------*/
footer {
width: 100%;
background-color: #000;
border-top: 1px solid #666;
border-top-width :94%;
margin: 0 auto;
/*position: relative;*/
}
/* pagetop
---------------------------------*/
#pagetop {
position: fixed;
right: 10px;
bottom: 20px;
}
#pagetop img {
width: 60px;
height: 60px;
}

/* footer-inner
---------------------------------*/
.footer-inner {
width: 100%;
margin:0 auto;
margin-left: -0.5em;
font-size: 1.2rem;
}
.footer-inner nav {
padding-top: 1.6em;
margin: 0 auto 0.8em;
}
.footer-inner nav ul {
text-align: center;
margin-bottom: 0.6em;
}
.footer-inner nav li {
font-size: 1.4rem;
line-height: 1;
border-left: 1px solid #999;
padding-left: 0.5em;
margin-left: 0.5em;
display: -moz-inline-box;
display: inline-block;
*display: inline;
*zoom: 1;
}
.footer-inner nav li:first-child {
border-left: none;
}
.footer-inner nav li a {
color: #999;
}
.footer-logo {
margin-bottom: 0.8em;
}
.footer-logo img {
width: 70%;
margin: 0 15%;
}
footer .copy {
width: 100%;
background-color: #1b1b1b;
}
footer .copy p {
width: 92%;
padding-top: 8px;
padding-bottom: 8px;
margin: 0 auto;
}

/*---------------------------------------------------  whats */
#whats h2{
	margin-bottom: 0.1em;
}

#whats{
	margin-bottom: 20px;
}
/*---------------------------------------------------  howto */
#howto h2{
	margin-bottom: 0.5em;
}
#howto .howtopoint {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}
#howto .howtopoint li{
	text-indent:-1em;
	list-style-type: none;
	margin-bottom: 1em;
}
#howto .howtopoint a{
	color:#58a8ce;
	text-decoration: underline;
}
#howto .howtofooter{
	margin-bottom: 5em;
}
#howto #column{
	background-color: #efefef;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	padding:5%;
	font-size: 1.4rem;
}
#howto #column ul li{
	text-indent:-1em;
	list-style-type: none;
	margin-bottom: 0.5em;
}






/*---------------------------------------------------  vocie */
#vocie .voiceTopList {
	margin:0 6.52%;
	margin-top:1.5rem;
	margin-bottom:5rem;
}
#vocie .voiceTopList li {
	list-style:none;
	border-top:1px solid #4ecaca;
	padding-top:1.25rem;
	margin-top:1.25rem;
}
#vocie .voiceTopList li:first-child {
	border-top:none;
}
#vocie .voiceTopList li:first-child {
	margin-top:0;
}
#vocie .voiceTopList li a {
	text-decoration:underline;
}
#vocie .voiceTopList li a img {
	float:right;
	width:32.22%;
	padding-right:0.83%;
}
#vocie .voiceTopList li a p {
	font-size:1.3rem;
	line-height: 1.4;
	padding-right:41.66%;
}




#vocie .vocieInner {
	margin:0 6.52%;
}
#vocie .vocieInner p {
	font-size:1.3rem;
	line-height: 2;
}
#vocie .vocieInner p + p {
	margin-top:1em;
}
#vocie .vocieInner figure {
	margin:3rem 0 0;
}
#vocie .hdgImg01 {
	border-bottom:1px solid #4ecaca;
	margin-top:3rem;
	padding-bottom:2.75rem;
	margin-bottom:2.75rem;
}
#vocie .hdg01 {
	font-size:2rem;
	font-size:1.9rem;
	line-height:1.3;
	padding-left:6.52%;
	padding-bottom:2rem;
	margin:3rem 6.52% 2rem 0 ;
	border-bottom:1px solid #4ecaca;
}

#vocie .infoBox {
	margin:5rem 6.52% 4rem;
	padding:2.5rem;
	border:1px solid #4ecaca;
}
#vocie .infoBox .hdg {
	margin:0.5rem 0 ;
}
#vocie .infoBox dl {
	margin-bottom:1rem;
}
#vocie .infoBox dt {
	color:#4ecaca;
	font-size:1.3rem;
	line-height:1.2;
	font-weight:bold;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho" serif;
	margin-bottom:0.5rem;
}
#vocie .infoBox dd {
	font-size:1.3rem;
	line-height:1.2;
	font-weight:bold;
}
#vocie .infoBox dd a {
	color:#4ecaca;
}

/* Clearfix
*****************************************/
#vocie .voiceTopList li:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

#vocie .voiceTopList li {
 *display: inline-table;
 *zoom: 1;
}