@charset "utf-8";

/*-------------------------- @group Product unique ATOK*/
.js-specific-color{color: #0e6eb8}
.js-specific-bgcolor{background-color:  #0e6eb8}
.js-specific-bgcolor-muted{background-color:  #0e6eb8}
.js-pagetransition a.js-btn-cvn{	background-color: #0e6eb8}
.js-products-info {
	background-color: #0e6eb8;
	color: #fff}

.js-case-title{
	width:8em;
	margin-right: .5em;
	font-size: .8em}
.js-case-correct,
.js-case-error{	color: #8c8c8c}
.js-case-correct:before,.js-case-error:before{
	line-height: 1;
	margin-right: .5em}
.js-case-correct:before,
.js-case-correct .js-case-item-point{	color: #658ff0}
.js-case-error:before{	color:#ff1759}
.js-case-item{	font-size: 16px}

kbd{
	line-height: 2;
	padding: 5px 8px;
	color: #333;
	border: 1px #ccc solid;
	background-color: #eee;
	border-radius: 3px;
	-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
	margin: 0 4px}

.js-atok-passport .feature-header.js-specific-bgcolor{	background-color: #e7e7e7}
/*@end*/
@media screen and (min-width: 992px){
.js-product-head:after {	top: -60px}
}

.js-header-info-main{
background: #f9f9f7;
background: -moz-linear-gradient(top, hsl(60,14%,97%) 0%, hsl(60,14%,97%) 49%, hsl(210,2%,82%) 100%);
background: -webkit-linear-gradient(top, hsl(60,14%,97%) 0%,hsl(60,14%,97%) 49%,hsl(210,2%,82%) 100%);
background: linear-gradient(to bottom, hsl(60,14%,97%) 0%,hsl(60,14%,97%) 49%,hsl(210,2%,82%) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f7', endColorstr='#d1d2d3',GradientType=0 );}
.js-header-info-box{
	max-width: 930px;
	width: 100%;
	margin: 0 auto;
	position: relative}
.js-header-info-title{
	font-size: 14px;
	color: #000;
	padding-right: 1em;
	padding-left: 1em;
	position: absolute;
	top: 25%;
	line-height: 1.5;
	margin-top: -1em;
	width: 100%;
	text-align:center}
.js-header-info-date{
	font-size: 10px;
	position: absolute;
	right: 1em;
	bottom: .5em}
@media screen and (min-width: 992px){
.js-header-info-title{
	font-size: 16px;
	line-height: 1}
.js-header-info-date{font-size: 12px}
}



.js-spec-by-os .modal-content iframe{
	width: 100%;
	min-height: 400px;
	height: auto;
	background-color: #fff
}
.spec-by-os .modal{
	padding-top: 50px
}
.spec-by-os .modal .modal-lg{
	height: 500px
}

.js-atok-feature .js-specific-bgcolor {
	background-color: #e7e7e7
}
.js-lineup-table thead th img,
.js-lineup-table tfoot td img{
	width: 85px;
	max-width: 85px;
	margin-bottom: 0}
.js-lineup-table tfoot .product-name {
	padding: 6px 1em 0;
	font-size: 14px;
	text-align: center;
	font-weight: bold
}
.js-feature-thum img{
	width: 30%;
	height: auto;
	margin: 0 auto 24px
}

/*2019 追加*/
.js-bg-andoridpro{
	background-image:url("../images/bg-atokandroid.png");
	background-repeat: no-repeat;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	-ms-background-size:cover;
}
.jsv-bg-catch{
	background: #010f36;
	background: -moz-linear-gradient(-45deg, #010f36 1%, #061836 100%);
	background: -webkit-linear-gradient(-45deg, #010f36 1%,#061836 100%);
	background: linear-gradient(135deg, #010f36 1%,#061836 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#010f36', endColorstr='#061836',GradientType=1 );
}
.jsv-img-catch{padding-right: 210px}
.js-product-nameset{font-size: 12px}
@media screen and (min-width: 768px){
	.js-product-nameset{font-size: 16px}
	.js-aj-indentcont{padding: 0 24px}
}
.js-result-num p{display: inline-block;}
.js-top-wrap-m{padding-top: 48px}

/*BOOT FLAT*/
.js-product-head {	z-index: 500}






/*FIRSTSTEP implantation　(ATOK 2017 for Mac)*/
/*---------------------------------------------------------------------- @group index*/
.title-lev2{
	text-align: center;
	padding-bottom: .4em;
	border-bottom: 1px #ccc solid
}
.clear{			clear: both}
.content-consent ul{margin-left: 0}
.img-main img{
	max-width: 362px;
	width: 100%
}
.img-main{
	padding:2em 0;
	text-align: center;
}
.img-seal img{	width: 150px}
.img-2way img{width: 196px}
.img-step img{
	height: 132px;
	width: auto
}
.img-seal img{
	max-width:150px;
	border-radius: 50%;
	/* box-shadow */
	box-shadow:3px 3px 6px 0px #d6d3d6 inset;
	-moz-box-shadow:3px 3px 6px 0px #d6d3d6 inset;
	-webkit-box-shadow:3px 3px 6px 0px #d6d3d6 inset;
}
.img-seal img,
.img-2way img{	margin:0 .5em}
a.img-2way{
	color: inherit;
	display: block;
	cursor: pointer
}
a:hover.img-2way{
	color: #00a693
}
.title-main{	padding-top: 48px}
@media screen and (	min-width: 750px) {

	.title-lev3{	font-size: 24px}
	.step-arrow{	margin-top: 100px}
	.step-block{	margin-left: 5%}
	.img-main{
	background: -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 120, color-stop(0.90, #fff), color-stop(0.51, #FFF7CD), color-stop(0.00, #FFF7CD));
	background: -webkit-radial-gradient(50% 100%,  #FFF7CD 0%, #FFF7CD 51%, #fff 90%);
	background: -moz-radial-gradient(50% 100%,  #FFF7CD 0%, #FFF7CD 51%, #fff 90%);
	background: -o-radial-gradient(50% 100%,  #FFF7CD 0%, #FFF7CD 51%, #fff 90%);
	background: -ms-radial-gradient(50% 100%,  #FFF7CD 0%, #FFF7CD 51%, #fff 90%);
	background: radial-gradient(50% 100%,  #FFF7CD 0%, #FFF7CD 51%, #fff 90%);
	}
}
@media screen and (max-width: 750px) {
	.step-arrow img{
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}
	.title-main-nl{
		margin-bottom: 54px; /*36x1.5*/

	}
}
/*@end*/
/*---------------------------------------------------------------------- @group index form*/
.btn-start-reg img,
.btn-end-reg img{
	max-width: 252px;
	width: 100%
	}
img.btn-start-reg-off {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}
img.btn-start-reg-on{
	-webkit-filter: grayscale(0%);
	filter: none;
}
img.btn-start-reg-on:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-khtml-opacity: 0.6;
	-moz-opacity: 0.6;
	cursor: pointer;
}
.form-license label{font-weight: 100}
.form-user label{	line-height: 34px}
.form-user input{	font-size: 18px}
.form-user .row{	margin-bottom: 0}
.form-user .form-group{	display: block}
/*@end*/
/*---------------------------------------------------------------------- @group common style*/
.table{			background:#fff;}
.well .table{	background: transparent;}
.center-cont{	text-align: center}
.t-line-nl{		margin-bottom: 1.5em; /*n1行分x1.5　line-height*/
				display: block}
.s-indent{		padding-left:1em;}
.s-indent-150{	padding-left: 1.5em}
.s-indent-150-item{
	text-indent:-1.5em;
	display: block
}
.s-indent small,
.s-indent li{
	text-indent:-1em;
	display: block
}
.box-indent{	margin-left: 1em}
.box-s-indent{	margin-left: 1.5em}
.b-chapter-nl{	margin-bottom: 72px; /*24x4*/}
.hover:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	-khtml-opacity: 0.6;
	-moz-opacity: 0.6;
	cursor: pointer;
}
.no-list-style li{	list-style: none;}
.block-nl{display: block}
.content-warp{	padding:90px 0 0;}
.content-inner,
.cont-inner-single{	padding:0 20px;}
.second-content-inner{
	max-width: 80%;
	width: 100%
	}
.t-block-step span{	font-size: 3em}
.btn-next img{	max-width: 150px}
.btn-next button{
	border: none;
	background: none
}
@media screen and (min-width: 992px) {
	.content-inner{
		max-width: 960px;
		width: 100%
	}
	.inner-in-cont{
		max-width: 780px;
		width: 100%
	}
}
@media screen and (min-width: 750px) {
	.form-inline .t-line-nl{
		margin-bottom: 1.5em; /*n1行分x1.5　line-height*/
		display: block
	}
}
/*@end*/
/*---------------------------------------------------------------------- @group item-list*/
.item-list .item-list-title{
	background-color: #f5f5f5;
}
.item-list-title,
.item-list-product{
	border: 1px #eee solid;
	padding:.5em 0;
	overflow: hidden;
}
.item-list-title p,
.item-list-product p{
	min-height: 52px;
	text-align: center;
	font-size: .8em;
	padding:.5em;
	border-right: 1px #eee dotted;
	word-wrap: break-word;
	line-height: 1.4
}
.item-list-product p{	padding:7px 5px 0;}
.item-list-title p:last-child,
.item-list-product p:last-child{
	border-right: 0;
}
.item-list-product,
.item-list-title{
	display: table;
	}
.item-list-title p,
.item-list-product p{
	width: 160px;
	display: table-cell;
	vertical-align: top;
	word-wrap:break-word
}
.item-list-title p:last-child,
.item-list-product p:last-child{
	width: 310px
	}
.t-counter{padding:0 1em 0 0}
@media screen and (min-width: 750px){
	.item-list-product p img{
		max-width: 180px;
		display: inline-block
	}
	.item-list-title p,
	.item-list-product p{
		vertical-align: middle
	}
}
.item-list-title p:last-child{
	text-align: left;
	padding-left: 1.3em
	}

/*@end*/
/*---------------------------------------------------------------------- @group confirm.html*/
.p-mark{
	font-size: .9em;
	text-align: center
}
@media screen and (min-width: 750px){
	.p-mark{	width: 600px;}
	.p-mark p{
		display: table-cell;
		vertical-align: middle
	}
	.p-mark p:first-child{
		padding-right: 20px
	}
}
/*@end*/
/*---------------------------------------------------------------------- @group confirm.html*/
.popup-thanks .modal-header,
.popup-thanks .modal-body,
.popup-thanks .modal-footer{
	padding:20px
}
.popup-thanks .modal-header{
	font-size: 1.5em;
	border-bottom: 0
}
.popup-thanks .modal-dialog {
	max-width: 550px;
	width: 100%;
	margin: 100px auto;
	text-align: center
}
.popup-thanks img.img-thanks-download{
	max-width: 227px
}
.popup-thanks img.img-thanks-close{
	max-width: 173px;
	cursor: pointer
}
.popup-thanks .modal-footer{
	text-align: center;
	border-top: 0
}
/*@end*/
/*---------------------------------------------------------------------- @group firststep.html*/
.btn-default.js-btn-blue {
	color: #FFF;
	background: #41a7ff;
	background: -moz-linear-gradient(top,  #41a7ff 1%, #3090ff 49%, #217aff 100%);
	background: -webkit-linear-gradient(top,  #41a7ff 1%,#3090ff 49%,#217aff 100%);
	background: linear-gradient(to bottom,  #41a7ff 1%,#3090ff 49%,#217aff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41a7ff', endColorstr='#217aff',GradientType=0 )}
/*@end*/






/*---------------------------------------------------------------------- @group Helper base_layout_new.css*/
@media screen and (min-width: 992px){
	footer .site-information {
	padding-right: 0
	}
}
/*@end*/

.js-step-subject{
	font-size: 12px;
}
.js-product-cvn .js-btn-cvn,
.js-gnav-side-panel-buy .js-ico-buy{
	background: #7bb5b0;
    background: -moz-linear-gradient(top, #7bb5b0 0%, #43ada6 41%, #49a2bd 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #7bb5b0), color-stop(41%, #43ada6), color-stop(100%, #49a2bd));
    background: -webkit-linear-gradient(top, #7bb5b0 0%, #43ada6 41%, #49a2bd 100%);
    background: -o-linear-gradient(top, #7bb5b0 0%, #43ada6 41%, #49a2bd 100%);
    background: -ms-linear-gradient(top, #7bb5b0 0%, #43ada6 41%, #49a2bd 100%);
    background: linear-gradient(to bottom, #7bb5b0 0%, #43ada6 41%, #49a2bd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7bb5b0', endColorstr='#49a2bd', GradientType=0 );
}
.js-gnav-side-panel-buy .js-ico-buy:before {
    content: ""}
.js-gnav-side-panel-list li.js-gnav-side-panel-buy a:before{
	display: none}
.js-btn-cvn, .js-gnav-side-panel-buy{background-color: #FFF}
.js-gnav-side-panel-buy .glyphicon{
	font-size: 24px}
.js-gnav-side-panel-buy p:nth-child(2){
	padding-top: 8px}
.js-fade-caption.js-fade-caption-bg,
.js-bgcolor-muted{
	background-color: #fafafa}


.js-header-info-osupdate{
	font-size: .8em;
	display: inline-block;
	border-radius: 5px;
    border: 1px #404040 solid;
	padding: 2px 7px}
.js-header-info-box .js-header-info-osupdate{
	position: absolute;
	margin-top: 1em;
    right: 1em;
    background-color: #fff;
}
@media screen and (min-width: 768px){
	.js-header-info-box .js-header-info-osupdate{
		background-color: rgb(255 255 255 / .8);
		bottom:3em;
		font-size: 1em}
}