@charset "utf-8";

@media screen and (max-width: 640px){
/*==============================================
	General setting 
  ==============================================*/
body{font-size:14px;}


/*==============================================
	common class
  ==============================================*/

/* clearfix */
.pkg{ zoom:1; }
.pkg:after{
	content:'';
	display:block;
	clear:both;
}

/* float */
.pull-left { float:left; }
.pull-right{ float:right; }


/* align */
.text-center{ text-align:center; }
.text-left  { text-align:left; }
.text-right { text-align:right; }


/* text */
.text-red  { color:#db0078; }
.text-blue { color:#13398f; }
.text-green{ color:#138f33; }

.text-small{ font-size:10px; }

/* icon */
[class^='icon-'],
[class*=' icon-']{
	display:inline-block;
	width:26px;
	height:26px;
	vertical-align:middle;
}

.icon-circle     { background-position:   0   0; }
.icon-linkarrow  { background-position: -30px 0; }
.icon-onetime    { background-position: -60px 0; }
.icon-loginalert { background-position: -90px 0; }
.icon-loginreport{ background-position:-120px 0; }

[class^='icon-mini-'],
[class*=' icon-mini-']{
	width:16px;
	height:16px;
}
.icon-mini-arrow{ background-position: 0  -60px; }


[class^='icon-security-'],
[class*=' icon-security-']{
	width:45px;
	height:45px;
	-webkit-background-size:135px 45px;
	-moz-background-size:135px 45px;
	background-size:135px 45px;
}
.icon-security-high  { background-position:  0   0; }
.icon-security-middle{ background-position:-45px 0; }
.icon-security-low   { background-position:-90px 0; }



/* button */
.btn{
	width:auto;
	height:auto;
	text-align:center;
	text-indent:0;
	text-decoration:none;
	overflow:hidden;
	background-image:none;
	background-color:transparent;
	background-repeat:no-repeat;
	background-position:0 0;
	border:none;
	padding:10px 20px;
	font-weight:bold;
	color:#ffffff;
	font-size:16px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;
}

.btn-tool-start{
	background-color:#138f33;
	border:4px solid #82c694;
}
.btn-tool-yes{
	background-color:#db0078;
	border:4px solid #ca78a5;
}
.btn-tool-no{
	background-color:#138f33;
	border:4px solid #82c694;
}
.btn-tool-result{
	background-color:#13398f;
	border:4px solid #4e78d7;
}
.btn-case01{
	background-color:#db0078;
	border:4px solid #ca78a5;
}
.btn-case02{
	background-color:#db0078;
	border:4px solid #ca78a5;
}
.btn-case03{
	background-color:#db0078;
	border:4px solid #ca78a5;
}
.btn-complete{
	background-color:#138f33;
	border:4px solid #82c694;
}
.btn-setting{
	background-color:#db0078;
	border:4px solid #ca78a5;
}
.btn-confirm{
	background-color:#13398f;
	border:4px solid #4e78d7;
}

.btn-settingconfirm{
	background-color:#db0078;
	border:4px solid #ca78a5;
}
.btn-3point{
	background-color:#138f33;
	border:4px solid #82c694;
}

/*==============================================
	Layout
  ==============================================*/

/* site width */
html > body{
	min-width:100%;
}
#header > .inner,
#contents > .inner,
#footer > .inner,
.mainVisual .inner,
.navigation > .inner{
	width:100%;
	margin:0 auto;
	text-align:left;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;;
	box-sizing:border-box;
}

#wrapper{
	position:relative;
}

/* header */
#header{
	background-color:#000000;
	padding:10px 0;
	height:45px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	z-index:1;
	overflow:hidden;
}

#header [src*='logo-site.gif']{
	width:200px;
	height:auto;
}
#header .pull-right{
	display:none;
}


/* footer */
#footer{}
#footer > .inner{
	padding:15px 0 10px;
}
#footer > .inner > .pull-left{
	display:none;
}
#footer > .inner > address{
	float:none;
	font-size:10px;
	text-align:center;
}

#footer address .copy{
	font-size:0.86em;
}

/* contents */
#contents > .inner{
	padding:15px 5px;
}


/*==============================================
	Class
  ==============================================*/


/* ttl-icoLine */
.ttl-icoLine{
	font-size:20px;
	margin-bottom:15px;
}
.ttl-icoLine > [class^='icon-'],
.ttl-icoLine > [class*=' icon-']{
	margin-top:-3px;
	vertical-align:middle;
}

/* .link */
.link{
	font-size:16px;
	font-weight:bold;
	padding-left:30px;
	text-indent:-30px;
}
.link > [class^='icon']
.link > [class*=' icon']{
	margin-right:4px;
}
.link > a{
	text-decoration:none;
	color:#138f33;
}
.link > a:hover{
	text-decoration:underline;
	color:#138f33;
}

/* block */
.block{ margin-bottom:50px; }


/* unit */
.unit{}
.unit > .title{
	font-size:16px;
	margin-bottom:5px;
	line-height:18px;
	padding:0 10px;
}
.unit > .text{
	padding:0 10px 15px;
	font-size:14px;
}
.unit > .text > *{
	margin-bottom:5px;
}
.unit > .button-area{
	margin-top:10px;
	padding:15px 10px 10px;
}
.unit > .button-area > .message{
	margin-bottom:5px;
	font-size:12px;
	text-align:center;
	line-height:16px;
}
.unit > .button-area .btn{
	display:block;
	margin:0 auto;
}
.unit > div > [src*='loginreport.png']{
	width:100%;
	height:auto;
}


/* list */
.list-step{
	background:none;
}
.list-step:after{
	content:'';
	display:block;
	clear:both;
}
.list-step > li{
	
	margin-bottom:15px;
	float:none;
	margin-right:auto;
	margin-left:auto;
	position:relative;
}

.list-step > li:after{
	content:'';
	border-top:10px solid #13398f;
	border-left:20px solid transparent;
	border-right:20px solid transparent;
	position:absolute;
	bottom:-15px;
	left:50%;
	margin-left:-20px;
}

.list-step > li.last{
	margin-right:auto;
}
.list-step > li.last:after{
	display:none;
}


.list-inline{}
.list-inline > li{
	display:inline-block;
	padding-left:10px;
	padding-right:10px;
	*display:inline;
	*zoom:1;
}



/*==============================================
	Unique Class
  ==============================================*/

/* mainVisual */
.mainVisual{
	-webkit-background-size:25px;
	-moz-background-size:25px;
	background-size:25px;
}
.mainVisual > .mainVisual-img{
	background:url('../images/mainvisual-img-smp2.png') no-repeat 100% 0%;
	height:auto;
	padding:0;
}
.mainVisual > .mainVisual-img .inner{
	padding:10px 0;
	background:url('../images/mainvisual-img-smp1.png') no-repeat 0 0;
}

.mainVisual .lead,
.mainVisual .title{
	text-indent:0;
	overflow:hidden;
	background-repeat:no-repeat;
	background-position:0 0;
	background-image:none;
	color:#13398f;
	line-height:1.2;
	text-shadow:1px 1px 0px #fcee6d,
	            -1px -1px 0px #fcee6d;
}

.mainVisual .lead{
	font-weight:bold;
	font-size:12px;
	padding-left:60px;
	margin-right:50px;
	height:auto;
	margin-bottom:5px;
}
.mainVisual .lead > span{
	font-size:16px;
	display:block;
}

.mainVisual .title{
	height:auto;
	padding-right:100px;
	margin-bottom:5px;
}
.mainVisual .title > span{
	display:block;
	font-size:12px;
	padding-left:10px;
}
.mainVisual .title > strong{
	display:block;
	font-size:28px;
	text-indent:-0.5em;
	padding-left:20px;
}
.mainVisual .title > strong > span{
	display:inline-block;
	white-space:nowrap;
}

.mainVisual .description{
	line-height:1.2;
	font-size:14px;
	margin-bottom:5px;
	max-width:580px;
	padding:0 10px;
}
.mainVisual .note{
	padding:0 10px 0 20px;
	font-size:10px;
}



/* navigation */
.navigation{
	z-index:100;
	background:url('../images/icon-navigation.png') no-repeat 50% 50% transparent;
	height:33px;
	width:31px;
	position:absolute;
	top:5px;
	right:5px;
}
.navigation > .inner{
	display:none;
	background-color:#565454;
	padding-top:2px;
	padding-left:2px;
	padding-bottom:1px;
	position:absolute;
	top:31px;
	right:-5px;
	width:200px;
}
.navigation li{
	float:none;
	margin-bottom:1px;
}
.navigation li > a{
	color:#ffffff;
	text-decoration:none;
	height:auto;
	overflow:hidden;
	text-indent:0;
	background-image:none;
	border:5px solid transparent;
	padding:5px 10px 5px 20px;
	font-size:14px;
	font-weight:bold;
	line-height:1.1;
}
.navigation li > a.active{
	position:relative;
}
.navigation li > a.active:before{
	content:'';
	display:block;
	border-left:8px solid #ffffff;
	border-top:7px solid transparent;
	border-bottom:7px solid transparent;
	position:absolute;
	top:5px;
	left:5px;
}


.navigation li.navi-top,
.navigation li.navi-case01,
.navigation li.navi-case02,
.navigation li.navi-case03,
.navigation li.navi-setting{ width:195px; }

.navigation li.navi-top > a,
.navigation li.navi-top > a:link{ background-color:#ffa302; }
.navigation li.navi-case01 > a,
.navigation li.navi-case01 > a:link,
.navigation li.navi-case02 > a,
.navigation li.navi-case02 > a:link,
.navigation li.navi-case03 > a,
.navigation li.navi-case03 > a:link { background-color:#db0078; }
.navigation li.navi-setting > a,
.navigation li.navi-setting > a:link{ background-color:#138f33; }


.navigation li.navi-top > a.active{ border-color:#ffa302; }
.navigation li.navi-case01 > a.active,
.navigation li.navi-case02 > a.active,
.navigation li.navi-case03 > a.active{ border-color:#db0078; }
.navigation li.navi-setting > a.active{ border-color:#138f33; }


/* navigation-case */
.navigation-case{ width:auto; }
.navigation-case > li{
	display:block;
	margin-bottom:10px;
}
.navigation-case > li > a{
	display:block;
	width:290px;
	height:310px;
	margin:0 5px;
	overflow:hidden;
	background-image:url('../images/navi-case.png');
	background-repeat:no-repeat;
	*display:inline;
	*zoom:1;
}
.navigation-case > li > a > span{
	display:inline-block;
	width:290px;
	height:310px;
	overflow:hidden;
	text-indent:-9999px;
	*display:inline;
	*zoom:1;
}

.navigation-case > li.navi-case01 > a{ background-position:   0   0; }
.navigation-case > li.navi-case02 > a{ background-position:-300px 0; }
.navigation-case > li.navi-case03 > a{ background-position:-600px 0; }
.navigation-case > li.navi-case01 > a:hover{ background-position:   0   -320px; }
.navigation-case > li.navi-case02 > a:hover{ background-position:-300px -320px; }
.navigation-case > li.navi-case03 > a:hover{ background-position:-600px -320px; }


/* unit-tool */
.unit-tool{
	border:4px solid #ffa302;
}
.unit-tool > .unit-title{
	text-indent:0;
	height:auto;
	background-image:none;
	font-weight:bold;
	text-align:center;
	padding:5px 5px 9px;
	font-size:16px;
}
.unit-tool > .unit-body,
.unit-tool > .unit-body > .inner{
	height:auto;
	min-height:0;
}
.unit-tool > .unit-body > .inner > .box{
	padding:10px;
}
.unit-tool > .unit-body > .inner .message{
	font-size:16px;
	text-align:left;
	padding-bottom:10px;
	font-weight:normal;
}
.unit-tool > .unit-body .txt-tool-opening{
	height:auto;
	background:none;
	color:#138f33;
	text-shadow:0 0 1px #ffffff;
	font-weight:bold;
}


.unit-tool > .unit-body .txt-tool-opening{
	text-indent:0;
	text-align:center;
}

.unit-tool > .unit-body > #toolOpening{
	background-position:50% 0;
	-webkit-background-size:150% auto;
	-moz-background-size:150% auto;
	background-size:150% auto;
}
.unit-tool > .unit-body > #toolInput{
	background-position:105% 100%;
	-webkit-background-size:75px 70px;
	-moz-background-size:75px 70px;
	background-size:75px 70px;
}
.unit-tool #yesno{
	text-align:left;
}
.unit-tool #yesno .btn{
	margin-right:15px;
	width:100px;
}


/* unit-case */
.unit-case{
	border:5px solid #fcee6d;
}
.unit-case > .unit-head{
	min-height:40px;
	border-bottom:5px solid #fcee6d;
}
.unit-case > .unit-head > .title{
	font-size:18px;
	padding-top:5px;
	padding-bottom:5px;
}
.unit-case > .unit-head > .description{
	font-size:16px;
	padding-bottom:5px;
	line-height:1.1;
}

.unit-case > .unit-body > .unit{
	padding:10px;
}
.unit-case > .unit-body > .unit > .text{
	padding:0 0 5px;
}
.unit-case > .unit-body > .unit > .image > img{
	width:100%;
	height:auto;
	display:block;
}
.unit-case > .unit-body > .unit > .image > .note{
	width:90%;
	margin-left:5px;
}

.unit-case > .unit-foot{
	padding:10px;
}
.unit-case > .unit-foot .btn{
	display:block;
}

/* unit-security */
.unit-security{}
.unit-security > .title{
	color:#13398f;
	font-weight:bold;
	font-size:18px;
	margin-bottom:10px;
}

.unit-security [class^='security-lebel-'],
.unit-security [class*=' security-lebel-']{
	background-size:60px 55px;
	background-color:#fff8bb;
	background-repeat:no-repeat;
	background-position:100% 100%;
	padding:5px 40px 5px 5px;
	min-height:45px;
}
.unit-security [class^='security-lebel-']:after,
.unit-security [class*=' security-lebel-']:after{
	content:'';
	display:block;
	clear:both;
}

.unit-security [class^='security-lebel-'] > .message,
.unit-security [class*=' security-lebel-'] > .message{
	overflow:hidden;
	padding:0 5px;
	display:table-cell;
}
.unit-security [class^='security-lebel-'] .icon-security,
.unit-security [class*=' security-lebel-'] .icon-security{
	width:45px;
	height:auto;
	-webkit-background-size:135px 45px;
	-moz-background-size:135px 45px;
	background-size:135px 45px;
	float:none;
	display:table-cell;
}
.unit-security .security-lebel-high   .icon-security{ background-position:  0   50%; }
.unit-security .security-lebel-middle .icon-security{ background-position:-45px 50%; }
.unit-security .security-lebel-low    .icon-security{ background-position:-90px 50%; }

.unit-security [class^='security-lebel-'] .title,
.unit-security [class*=' security-lebel-'] .title{
	font-size:14px;
	line-height:1.1;
	margin-bottom:3px
}
.unit-security .security-lebel-high   .title{ color:#238a04; }
.unit-security .security-lebel-middle .title{ color:#ffa302; }
.unit-security .security-lebel-low    .title{ color:#da0779; }

.unit-security [class^='security-lebel-'] .text,
.unit-security [class*=' security-lebel-'] .text{
	font-size:12px;
	line-height:1.2;
}



/* panel */
.panel{
	margin-bottom:20px;
	zoom:1;
}
.panel:after{
	content:'';
	display:block;
	clear:both;
}

.panel > .pull-right{
	width:100%;
	float:none;
}

.panel .panel-1,
.panel .panel-2,
.panel .panel-3{
	display:block;
	text-decoration:none;
	width:100%;
}
.panel .panel-1 > dl > dt,
.panel .panel-2 > dl > dt,
.panel .panel-3 > dl > dt{
	font-size:16px;
	height:auto;
	text-indent:0;
	background-image:none;
	color:#ffffff;
	font-weight:bold;
	line-height:1.1;
	padding:5px 5px 11px;
}
.panel .panel-1 > dl > dt > .label,
.panel .panel-2 > dl > dt > .label,
.panel .panel-3 > dl > dt > .label{
	display:inline-block;
	color:#13398f;
	background-color:#feed53;
	padding:2px 5px;
	margin-right:5px;
}

.panel .panel-1 > dl > .text img,
.panel .panel-2 > dl > .text img,
.panel .panel-3 > dl > .text img{
	width:100%;
	height:auto;
}



.panel .panel-1{
	float:none;
	margin-bottom:5px;
}

/*==============================================
	背景画像
  ==============================================*/

/* bg */
.bg-green{ background:url('../images/bg-green.png') repeat 0 0; }
.bg-pink { background:url('../images/bg-pink.png') repeat 0 0; }
.bg-blue { background:url('../images/bg-blue.png') repeat 0 0; }
.bg-gray { background:url('../images/bg-gray.png') repeat 0 0; }


.bg-bottomarrow{
	background:url('../images/bg-bottomarrow.png') no-repeat 50% 0;
	padding-top:30px;
}

.bg-illust01{
	background:none;
	padding-right:0;
}
.bg-case01-body{
	-webkit-background-size:240px 150px;
	-moz-background-size:240px 150px;
	background-size:240px 150px;
	padding-bottom:130px;
	padding-right:0;
}
.bg-case02-body{
	-webkit-background-size:240px 180px;
	-moz-background-size:240px 180px;
	background-size:240px 180px;
	padding-bottom:160px;
	padding-right:0;
}
.bg-case03-body{
	-webkit-background-size:240px 160px;
	-moz-background-size:240px 160px;
	background-size:240px 160px;
	padding-bottom:150px;
	padding-right:0;
}
.bg-case01-head,
.bg-case02-head,
.bg-case03-head{
	-webkit-background-size:40px;
	-moz-background-size:40px;
	background-size:40px;
	padding-left:50px;
}
.bg-security-high,
.bg-security-middle,
.bg-security-low{
	background-size:120px 70px;
}

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


}