/*★★★★★★★★★★★!!! no modification needed !!!★★★★★★★★★★★*/

@charset "utf-8";
/*-------------------------- @group Bootstrap Overwrite*/
body, input, textarea, select, button {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale}
body{
	font-family: Meiryo, "メイリオ", "MS Pゴシック Ex+", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka, arial, helvetica, sans-serif;
	font-size: 16px;/*Bootstrap fontsize 14px*/
	line-height: 1.5;
	background-color: #fff;
	color: #5E5E5E}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
	line-height: 1.2;
	margin-top: 0}
small{
	/*font-size: inherit;*/
	color: #919191}
a:link,a:visited,a:hover,a:active{	text-decoration: none}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,ul, ol,label,p,
.panel,.table,.lead,.breadcrumb,.alert,.media-heading{margin-bottom: 0}
/*.lead {
	font-size: 17px;
	line-height: 1.4}*/
.media{margin-top: 0}
.pager{margin: .5em 0}
.table{	background-color: #FFF}
.pager li>a, .pager li>span {border: 0}
.well{margin-bottom: 0}
.label{padding: 0 3px}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
	padding-right: 12px;
	padding-left: 12px;
}
.js-price-notis .btn a{/*ATOK-Passport only*/
		white-space:normal;
}
/*@end*/
/*-------------------------- @group Typography*/
/*index theme*/
.js-title-h1{	font-size: 26px}
.js-title-h2{	font-size: 22px}
.js-title-h3{	font-size: 18px;
				border-bottom: 1px #ccc dotted;
				padding-bottom: 0.5em}
.js-title-h4{	font-size: 16px;
				font-weight: bold}
.js-title-h1 + .js-lead{font-size: 20px}
.js-title-h2 + .js-lead{font-size: 18px}
@media screen and (min-width:768px) {
	.js-title-h1{	font-size: 28px}
	.js-title-h2{	font-size: 24px}
	.js-title-h3{	font-size: 20px}
	.js-title-h4{	font-size: 18px}
	.js-title-h1 + .js-lead{font-size: 20px}
	.js-title-h2 + .js-lead{font-size: 19px}
	.js-title-h3 + .js-lead{font-size: 18px}
}
@media screen and (min-width:996px) {
	.js-title-h1{	font-size: 38px}
	.js-title-h2{	font-size: 30px}
	.js-title-h3{	font-size: 24px}
	.js-title-h4{	font-size: 20px}
	.js-title-h1 + .js-lead{font-size: 22px}
	.js-title-h2 + .js-lead{font-size: 19px}
	.js-title-h3 + .js-lead{font-size: 18px}
}
.js-title-h2:before,.js-title-h3:before, .js-title-h4:before, .js-list-styled .js-list-styled-icon-item:before {
	font-size: 2em;
	/*margin-right: 10px*/}
@media screen and (min-width:768px) {
	.js-title-h2:before, .js-title-h3:before, .js-title-h4:before{
	/*margin-right: 10px*/}
}

.js-list-styled .js-list-styled-icon-item:before{margin-top: -.1em}
.js-lead{line-height: 1.3}
.js-text-l{font-size: 3em}
.js-text-m{font-size: 2em}
.js-text-s{font-size: 14px}
.js-text-ss{font-size: 12px}
.js-line-center-height{	margin-top: 100%}
/*Gray color*/
.text-muted,.js-text-muted{color: #888} 													/*-----------------------------mac over*/
/*Annotation character*/
.js-annotation{
	font-size: 14px;
	line-height: 1.2}
/*Mark control*/
.js-ico-new:before{					color:#ff0000}
.js-ico-up:before{					color:#ff8b00}
.js-ico-limitation:before{			color:#008c00}
.js-ico-amenity:before{				color:#0080FF}
.js-btn-cvn,.js-gnav-side-panel-buy{background-color: #e90019}
a.js-btn-cvn{color: #fff}
.js-gnav-side-list a,
.js-gnav-side-panel-list a,
.js-price a,
.js-footer-info a{color: inherit}
.js-ico-right:after{
	font-family: 'onlinecatalog' !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale}
.js-ico-right-arrowdown:after{	content: "\e907"}
.js-ico-right-arrowright:after{	content: "\e909"}
.js-icon-left:before{margin-right: 3px}
.js-gnav-side-list .js-icon-left:before{font-size: 30px}	/* text-icon */
.js-flex-box .js-flex-item{
	display: block/*IE10対策*/;
	padding-left:10px}
@media screen and (min-width: 768px) {
	.js-flex-box .js-flex-item{
	/*padding-left:10px*/}
}

/*Number emphasis*/
.js-point-block .js-point-value{
	font-size: 38px;
	line-height: 1;
	letter-spacing: -2px}
.js-point-block .js-point-description{	display: block}
@media screen and (min-width:992px) {
	.js-point-block .js-point-value{	font-size: 99px}
}
.js-point-word{
	font-size: 2em;
	line-height: 1}
.js-point-unit{margin-left: .5em}
.js-point-block .js-point-description{	display: block}
@media screen and (min-width:992px) {
	.js-point-block .js-point-value{
		font-size: 72px;
		letter-spacing: -5px}
}
/*@end*/
/*-------------------------- @group section block*/
.js-content-wrap{	padding-top: 50px}/*header offset avoidance*/
.js-bg-wrap{		padding-top: 48px; padding-bottom: 48px}
.js-bg-wrap-half{	padding-top: 48px}
.js-bg-wrap-s{		padding-top: 36px; padding-bottom: 36px}
.js-bg-secondary-page > section:nth-child(even),
.js-bg-secondary{	background-color:#fafafa}
.js-section-index:after{
	content: '';
	clear: both;
	display: block;
	width: 70%;
	height: 120px;
	margin: 0 auto;
	border-bottom: solid 1px #3A3A3A;
}
@media screen and (min-width: 992px) {
	.js-in-container{margin-right: 210px}/*side menu*/
	.js-bg-wrap-half{padding-top: 72px}
	.js-bg-wrap{padding-top: 72px; padding-bottom: 72px}
	}
.js-content-body{z-index: 50}
.js-gnav-side	{z-index: 51}
.js-nav-guide	{z-index: 52}
@media screen and (min-width:992px) {
	.js-indent-container{padding: 0 48px}
	.js-indent-half-container{padding: 0 24px}
	.js-content-body{z-index: 52}
	.js-gnav-side	{z-index: 50}
}
/*@end*/

/*---------------------------@group Small scale　Parts*/
/*Mac (index link)*/
.js-transition{overflow: hidden}
.js-transition-text {font-size: 20px}
/*Add dashed line*/
.js-with-dotted{
	border-bottom:1px #888 dotted;
	padding-bottom:.5em}
.js-with-dotted-top{
	border-top:1px #ddd dotted;
	padding-top:.5em}
.js-with-line{		border:1px #888 solid}
.js-img-outline,
.js-img-outline-blank{	border:1px #ccc solid}
.js-img-outline-blank{	padding: 12px}
.js-indent-letters{	padding-left: 2em}
.js-bottom-caption,.js-top-caption{
	font-size: 14px;
	padding:.5em 0 0}
.js-top-caption{	padding: 0}

/*About Passport element*/
.js-block-center-icon:before{
	font-size: 72px;
	display: block;
	color: #888;
	margin-bottom: 16px}
/* btn-box*/
.js-btnbox{	padding: 11px}
@media screen and (min-width: 768px) {
	.js-btnbox{	padding: 15px}
	.js-pagetransition .js-btn-cvn{/*text link*/
		margin: 0 0;
		max-width: 230px;
		float: right}
	}
/*text indent*/
.js-text-indent{
	padding-left:1em;
	text-indent:-1em}
.js-bg-color-default{background-color: #fff}
.js-block-indent{padding-left:1.5em}
/*画像hover処理*/
.js-hover:hover{
	opacity: 0.6;
	filter: "alpha(opacity=60)";
	-ms-filter: "alpha(opacity=60)";
	-khtml-opacity: 0.6;
	-moz-opacity: 0.6}
.js-text-indent-step{
	padding-left:3.5em;
	text-indent:-3.5em}
.table>tbody>tr>th.js-lower-item{padding-left: 2em}

/*On Mouse Expansion*/
@media screen and (min-width: 1170px) {
	.js-top-caption-2lines .js-top-caption{min-height:auto}
}
@media screen and (min-width: 992px) {
	.jsv-scale img {
		-moz-transition: -moz-transform 0.1s linear;
		-webkit-transition: -webkit-transform 0.1s linear;
		-o-transition: -o-transform 0.1s linear;
		-ms-transition: -ms-transform 0.1s linear;
		transition: transform 0.1s linear}
	.jsv-scale-l img:hover {
		-webkit-transform: scale(2.12);
		-moz-transform: scale(2.12);
		-o-transform: scale(2.12);
		-ms-transform: scale(2.12);
		transform: scale(2.12);
		position:relative;
		z-index:1}
	.jsv-scale-m img:hover {
		-webkit-transform: scale(2.08);
		-moz-transform: scale(2.08);
		-o-transform: scale(2.08);
		-ms-transform: scale(2.08);
		transform: scale(2.08);
		position:relative;
		z-index:1}
	.jsv-scale-s img:hover {
		-webkit-transform: scale(1.51);
		-moz-transform: scale(1.51);
		-o-transform: scale(1.51);
		-ms-transform: scale(1.51);
		transform: scale(1.51);
		position:relative;
		z-index:1}
}
.js-width-badge:before{
	display: block;
	position: absolute;
	top: 0px;
	right:-50px;
	border-radius: 50%;
	width: 45px;
	height: 45px;
	color: #fff;
	text-align: center;
	font-size: 22px;
	line-height: 45px}
@media screen and (min-width: 768px) {
	.js-width-badge:before{
		top: -18px;
		right:-18px}
}
.js-width-badge-discount:before{
	content: "早期割引";
	background-color: #ff7300;
	padding-top: 6px;
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 1.1}
.js-width-badge-dl:before{
	content: "\e025";
	background-color: #299941}
/*index共通　イントロインフォメーション*/
.js-header-info-link{
	padding-top: 1.5em;
	width: 100%}
.js-header-info-link li p{
	padding:12px 0}
.js-header-info-link li:after{
	content: "";
	display: block;
	width: 70px;
	height: 1px;
	margin: 0 auto;
	border-bottom: 1px #fff solid}
.js-header-info-link li:last-child::after{
	border-bottom: 0}
.js-product-cvn .js-product-shoulder,
.js-product-cvn .js-product-name,
.js-productlineup-name .js-product-name span{	display: block}
.js-product-cvn .js-btn-cvn,
.js-pagetransition .js-btn-cvn{
	margin: 0 auto;
	font-size: 16px;
	padding:10px 10px 10px 25px;
	min-width: 230px;
	max-width: 400px;
	font-weight: 100}
.btn .js-pagetransition-m{
	white-space: normal}

/*---------------------------ATOK NAV GUIDE*/
.js-nav-guide {font-size: 13px}
.js-nav-guide .navbar{min-height: 30px}
.js-nav-guide .navbar-text{
	margin-top: 5px;
	margin-bottom: 5px}
.js-nav-guide .navbar{
	border-radius: 0;
	margin-bottom: 0}
.js-nav-guide .navbar-text .glyphicon:before{margin-right: .3em}
.js-nav-guide .navbar-default .navbar-toggle{
	border:0;
	margin-top: 10px;
	margin-bottom: 0}
.js-nav-guide .js-btnbox{padding: 10px 0}
@media screen and (min-width:768px) {
	.js-navbar-info .navbar-text{
			margin-right: 0;
			margin-left: 5px}
	.js-navbar-info .js-iconset-text{font-size: 12px}
}
@media screen and (min-width:992px) {
	.js-nav-guide{
			padding-left: 10px;
			padding-right: 10px}
	.js-nav-guide {padding-right: 210px}
	.js-nav-guide .navbar-collapse{padding-left:80px}
	.js-list-engine img{
			width: auto;
			height: 75px;
			margin: 0 auto 24px}
}
@media screen and (min-width:1200px) {
	.js-navbar-info {font-size: 14px}
}
.js-bg-editer {
	background-position: 2em 0 0 0;
	background: url(bg-atokwin.png) no-repeat;
	background-size: cover}
.js-bg-text-deepcorrect{
	background-color: #fceaed}
.js-underline-text-deepcorrect{
	text-decoration:underline; color:#FF0000}
.js-underline-color-text-deepcorrect{
	color:#5E5E5E}
/*@end*/

.js-ossupport .js-ossupport-list{
	padding-left: 0}
.js-ossupport .js-ossupport-list .badge{
	padding:.5em;
	border-radius: 2em}

.js-badge-win{background-color:#0067b8; color: #FFF}
.js-badge-mac{background-color:#797979; color: #fff}
.js-badge-android{background-color:#6ab344; color:#fff }
.js-badge-nonsupport{background-color: #fff; border:1px #ddd solid; color: #ddd}
.js-badge-os{
	font-size: .8em;
	background-color: #fff;
	border:1px #ddd solid;
	padding:.2em .5em;
	border-radius: 5px}

/*CVN Btn*/
.js-product-cvn-box .js-product-cvn-image img{
	width: 100px; height: auto}
.js-product-cvn-box{	text-align: center}
.js-product-cvn .js-product-shoulder{font-size: 16px}
.js-product-cvn .js-product-name{
	font-size: 28px;
	line-height: 1.2}
.js-product-cvn span{
	display: block;
	font-size: 80%}
.js-header-info-cont a{	color: #fff}
@media screen and (min-width: 768px) {
	.js-product-cvn-box{
			-js-display: flex;
		display: -webkit-flex;
			display: -ms-flex;
				display: flex;
		-ms-align-items: center;
	-webkit-align-items: center;
			align-items: center}
	.js-product-nameset{
		text-align: left;
		padding-left:1.5em;
			-ms-flex-grow: 1;
		-webkit-flex-grow: 1;
				flex-grow: 1}
	.js-header-info-image-cont{	position: relative}
	.js-header-info-image-cont .jsv-mainimage-info{
		position: absolute;
		width: 8em;
		padding:.5em;
		text-align: center;
		border:1px #FFF solid;
		right: .5em;
		bottom: .5em}
}
@media screen and (min-width:1200px) {
	.js-header-info-image{
		float: left;
		max-width: 850px;
		width: 75%;
		border-right:15px #fff solid}
	.js-header-info-cont{
		padding-left:15px;
		float: left;
		width: 25%}
}
.js-header-info-link a.js-ico-right-arrowright:after{
	padding-bottom: 4px}
/*featureページ帯ヘッダー*/
.feature-header{
	/*padding-top: 50px;*/
	text-align: center}
.feature-header img{
	width: 930px;
	height: auto}
/*@end*/
.js-with-ico .js-ico:before{font-size: 2em}

/*---------------------------@group Flexbox Definition*/
.js-flex-box{
		-js-display: flex;
	display: -webkit-flex;
		display: -ms-flex;
			display: flex}
.js-flex-middle{
		-ms-align-items: center;
	-webkit-align-items: center;
			align-items: center}
.js-flex-center{
	-ms-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center}
.js-icon-text,.js-width-full{
	-ms-flex-grow: 1;
	-webkit-flex-grow: 1;
	flex-grow: 1}
/*@end*/
/*---------------------------@group Anchor*/
.js-anchor{	border-bottom: 1px #ddd solid}
.js-anchor .js-icon-left:before{	font-size: 26px}
.js-anchor-frame{padding-top: 60px}/*h3用アンカーフレーム　手前のマージンは必ず削除*/
@media screen and (min-width:992px) {	.js-anchor .js-icon-left:before{font-size: 32px}}
.js-anchor .js-anchor-list{
	-ms-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;
	padding-top:5px;
	padding-left: 10px}
.js-anchor .js-anchor-item{
	width: 24%;
	border-radius: 5px;
	background-color: #fff;
	list-style: none;
	margin:0 3px 6px}
.js-anchor .js-anchor-item a{
	width: 100%;
	min-height: 40px;
	height: 100%;
	line-height: 1;
	border-radius: 5px;
	padding: 4px;
	background-color: #fff}
.js-anchor .js-anchor-item a:hover{
	background-color: #eee;
	text-decoration: none}
.js-anchor .js-icon-text{
	width: 0%;
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow:hidden}
.js-anchor-item .js-ico-in-text:before{
	font-size: 1.3em}
/*@end*/
/*---------------------------@group Btn CVN*/
a.js-btn-cvn{
	min-width: 170px;
	max-width: 180px;
	color: #fff;
	background-color: #e90019;
	padding: 5px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: .5px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale}
a.js-btn-cvn:hover{text-decoration: none}
/*@end*/
/*-------------------------- @group Swiper Control*/
.js-head-caption{
	background-color: #fcf8e3;
	border-radius: 5px 5px 0 0;
	padding:5px 1em 5px 2em;
	font-size: 14px}
ol.js-head-caption+.js-fade {	counter-reset: swiper-slide-number -1}
ol.js-head-caption+.js-fade .swiper-slide::before{
	display: block;
	position: absolute;
	left: 0;
	font-size: 12px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	overflow:hidden;
	font-weight: bold;
	background-color: #fcf8e3;
	top: 10px;
	text-align:center;
	counter-increment: swiper-slide-number;
	content: counter(swiper-slide-number)}
@media screen and (min-width:768px) {
	ol.js-head-caption+.js-fade .swiper-slide::before{
		font-size: 14px;
		width: 30px;
		height: 30px;
		line-height: 30px}
}
ol.js-head-caption+.js-fade .swiper-slide:last-child::before{	counter-reset: swiper-slide-number 0}

.swiper-container{	overflow:visible}
.js-swiper-inner-clipping-mask{overflow: hidden}
.swiper-pagination{position: static}
.js-panelin-slide .swiper-button-next, .swiper-container-rtl .swiper-button-prev{	right: -40px}
.js-panelin-slide .swiper-button-prev, .swiper-container-rtl .swiper-button-next{	left: -40px}
@media screen and (min-width:800px) {
	.swiper-button-next, .swiper-container-rtl .swiper-button-prev{	right: -30px}
	.swiper-button-prev, .swiper-container-rtl .swiper-button-next{	left: -30px}
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {	margin: 0 12px}
.js-fade-number-img .swiper-slide img{	width: 90%}
.js-fade-caption{background-color: #fff}
/*@end*/
/*-------------------------- @group　to-top*/
.js-to-top{
	display: block;
	position: fixed;
	text-align: center;
	right: 15px;
	bottom: 15px;
	width: 50px;
	height: 36px;
	border-radius: 5px;
	background-color: rgba(10, 10, 10, 0.50)}
	a.js-to-top:link:before,
	a.js-to-top:visited:before,
	a.js-to-top:hover:before,
	a.js-to-top:active:before{
	text-decoration: none;
display: block}
.js-to-top:before{
	display: block;
	content: "\e90a";
	color: #fff;
	font-size: 24px;
	padding-top: 6px}
@media screen and (min-width: 768px) {	.js-to-top{bottom: 60px}}
@media screen and (min-width: 992px) {	.js-to-top{right: 230px}}
/*@end*/
/*---------------------------@group Page movie box*/
.js-playbtn{
	position: absolute;
	top: 0;
	left: 0}
/*@end*/
/*---------------------------@group Page sharing header*/
.js-product-head{
	position: fixed;
	width: 100%;
	color: #fff;
	z-index: 100}
.js-product-head,.js-product-head:after{background-color: #5f5c5c}/*左肩背景丸*/
.js-product-head .js-product-nameset{
	line-height: 1.2;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	padding-left: 1em;
	padding-right: 30px}
.js-product-head a .js-logo-2row{
	line-height: 1}
.js-product-head a:hover{text-decoration: none}
.js-header-info{
	height: 50px;
	-webkit-align-items: center; /* Safari */
	align-items:		center}
.js-product-head .js-product-shoulder{
	font-size: .8em;
	padding-left: 1em}
.js-product-head .js-logo-2row:before{
	width: 64px;
	font-size: 28px;
	color: #fff}
.js-product-head .js-gnav-toggle:before{
	font-size: 30px;
	position: absolute;
	top: 50%;
	margin-top: -15px;
	right: 15px;
	cursor: pointer}
.js-logo-2row{width: 64px}
@media screen and (min-width: 992px) {
	.js-header-info{
		-webkit-flex-direction: row-reverse;
				flex-direction: row-reverse}
	.js-product-head .js-product-nameset{
		padding-left:85px}
	.js-product-head:after{
		content: "";
		width: 126px;
		height:126px;
		position: absolute;
		border-radius: 50%;
		top: -30px;
		left: -30px}
	.js-product-head-image{
		width: 50px;
		margin-top: 16px;
		height: auto;
		position: absolute;
		z-index: 100}
	.js-product-head .js-logo-2row:before{	right: 15px}
}
/*@end*/
/*-------------------------------------------------@group gnav*/
.js-gnav-side{
	position: fixed;
	width: 90%;
	height: 90%;
	overflow-y: scroll;
	margin-left: 5%;
	box-shadow: 0 0 7px #333;
	background: #fff}
.js-gnav-side-title{
	font-size: .7em;
	padding:.3em;
	color: #FFF;
	background-color: #444}
/*@end*/
/*---------------------------gnav Add*/
.js-gnav-side{	padding-top: 61px}
@media screen and (min-width: 992px) {
	.js-gnav-side{
		overflow-y: auto;
		left: auto;
		right: 0;
		width: 210px;
		margin: 0 0 0 0;
		box-shadow: 0 0 0;
		border-left: 1px #ccc solid;
		height: auto}
/*---------------------------gnav Add*/
	.js-gnav-side {
		position: absolute;
		min-height: calc(100vh - 50px)}
	.js-gnav-side.js-gnav-side-top {
		position: fixed;
		/*top: 50px;*/
	}
	.js-gnav-side.js-gnav-side-bottom {
		position: fixed;
		top: unset;
		bottom: 0}
	.js-gnav-side.js-gnav-side-sticky {
		position: sticky;
		top: 50px;
		float: right}
}
.js-gnav-side .js-icon-text{
	word-wrap: break-word;
	width: 0%}
.js-gnav-side .js-gnav-side-buy-top{
	position: fixed;
	width: 90%;
	top: 50px;
	background: inherit;
	border-bottom: 1px #ccc solid}
@media screen and (min-width: 992px) {
	.js-gnav-side .js-gnav-side-buy-top{
	width: 210px}
}
.js-gnav-side a,
.js-gnav-side a:hover,
.js-panel-cvn-box a:hover{	text-decoration: none}
.js-gnav-side .js-gnav-side-list{
	font-size: 14px;
	border-top:1px #ccc solid}
.js-gnav-side .js-gnav-side-list,.js-gnav-side-info-list{
	margin: 0 15px;
	border-right:1px #ccc solid;
	border-left:1px #ccc solid;
	background-color: #fff}
.js-gnav-side .js-gnav-side-list li a,
.js-gnav-side .js-gnav-side-info-list li{	border-bottom: 1px #ccc solid}
.js-gnav-side .js-gnav-side-list li a{	padding: 8px 5px}
.js-gnav-side .js-gnav-side-list .active,
.js-gnav-side .js-gnav-side-list a:hover{
	background-color:rgba(0,0,0,0.1);
	color: #5e5e5e;}
.js-gnav-side-list a,
.js-gnav-side-panel-list a{	color: #404040}
.js-gnav-side a.js-white-letter{color: #fff}
.js-btn-info{
	font-size: 14px;
	line-height: 1.3;
	padding: 5px;
	background-color: #888}
.js-btn-info{color:#fff;}
.js-btn-info-image a{	padding: 0}
.js-btn-info-image img{
	max-width: 200px;
	width: 100%}
.js-gnav-side-list{color: red;	margin-top: 62px}
.js-content-wrap .js-gnav-side-list{	margin-top: 0}
.js-gnav-side-infobtn{background-color: #eee}
	/* gnav内のpanel*/

.js-gnav-side-panel-list{
	margin: 0 15px;
	border-left:1px #ccc solid;
	-webkit-flex-wrap:wrap;
			flex-wrap:wrap}
.js-gnav-side-panel-list li{
	font-size: 11px;
	text-align: center;
	border-right:1px #ccc solid;
	border-bottom:1px #ccc solid;
	width: 50%}
.js-gnav-side-panel-list li a{
	display: block;
	width: 100%;
	padding: 10px 7px}
.js-gnav-side-panel-list li a:hover{	background-color: rgba(0,0,0,0.1)}
.js-gnav-side-panel-list li a:before{
	color: #606060;
	font-size: 24px;
	margin-bottom: .5em;
	display: block}
@media screen and (min-width: 992px) {
	.js-gnav-side .js-gnav-side-list,.js-gnav-side-info-list{
		margin:0;
		border-right:0;
		border-left:0}
	.js-gnav-side-panel-list{
		margin: 0 ;
		border-left: 0}
	.js-gnav-side-panel-list li:nth-child(even){border-right: 0}
}
/*.js-gnav-side{margin-top: 50px}*/
.js-content-wrap .js-gnav-side{margin-top: 0}
.js-gnav-side-panel-list .js-gnav-side-panel-buy a:before{color: #fff}
/*@end*/

/*---------------------------@group SNS*/
.js-sns-box {	padding: 24px}
.js-sns-box li{	margin: 0 6px 0 0}
/*.js-sns-box li:nth-child(3){margin-top: -11px}*/
.fb-like.fb_iframe_widget>span{vertical-align: inherit /*facebook style in html*/!important}
/*@end*/
/*---------------------------@group FOOTER*/
.js-footer{background-color: #fcfcfc}
.js-footer-info {
	width: 100%;
	text-align: center;
	line-height: 1;
	font-size: 12px;
	padding: 15px;
	background-color: #3a3a3a;
	color: #fff}
.js-footer-info a{ color: #fff}
@media screen and (min-width:768px) {
	.js-footer-info{
	text-align: left;
	-js-display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-align-items: center;
	-webkit-align-items: center;
	align-items: center}
	.js-footer-info .js-info-update{
	text-align: left;
	-js-display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-ms-align-items: center;
	-webkit-align-items: center;
	align-items: center
	-ms-flex-grow:1;
	-webkit-flex-grow:1;
	flex-grow:1}
	.js-logo-just-1row{margin-right: 1em}
}
/*@end*/
/*---------------------------@group nav-pager breadcrumb*/
.js-footer-breadcrumb .breadcrumb,
.js-nav-pager{
	border-radius: 0;
	font-size: 14px}
/*@end*/
/*-------------------------- @group spec theme*/
div.js-bg-fff section:nth-of-type(2n){	background-color: #fff}
.js-navtab{	font-size: 12px}
.js-navtab li{	width: 50%}/*default*/
/*--------------------------Spec*/
.js-system h2 + .js-behavior-item,
.js-structure h2 + .js-behavior-item{
	padding-top: 24px;
	border-top: 1px #777 solid}
.js-behavior-item{	border-bottom:1px #777 solid}
.js-behavior-item-title{
	font-size: 14px;
	font-weight: bold}
.js-behavior-item-name .macos-logo{
	width: 35px;
	margin: 0 1em}
.js-behavior-item-name{line-height: 1.5}
.js-s-notes,.js-s-notes small{
	font-size: 12px;
	color: #777;
	font-weight: 400}
.js-lineup-table .table>thead>tr>th,
.js-comparing-table .table>thead>tr>th{
	vertical-align: top;
	font-size: 12px;
	color:#5e5e5e;
	text-align: center}
.js-lineup-table .table>thead>tr>th:first-child,
.js-comparing-table .table>thead>tr>th:first-child{vertical-align: bottom}
.js-comparing-table .table>tbody>tr>th,
.js-lineup-table .table>tbody>tr>th{
	font-size: 14px;
	color:#5e5e5e}
.js−lineup .table>tbody>tr>td{vertical-align: middle}
.js-comparing .js-comparing-table thead th,
.js-comparing .js-comparing-table tbody td{text-align: center}
.js-comparing .js-comparing-table tbody th,
.js-comparing .js-comparing-table tbody td{vertical-align: middle}
.js-comparing .js-comparing-table tbody td{font-size: 14px}
.js-comparing .js-comparing-table tbody td:before,
.js-lineup .js-lineup-table tbody td:before{
	font-size: 32px;
	display: block}
.js-comparing-table thead th:first-child{text-align: left}
.js-comparing .js-comparing-table tbody tr th small,
.js-comparing .js-comparing-table tbody tr td small{display: block}
.js-comparing-table .table>tbody>tr>th.js-sub-headline{background-color: #f5f5f5}
.js-comparing-oldversion{background-color: #FFEBEC}
	/* spec.html #lineup --- */
.js-lineup colgroup col.super-premium{background-color: #FFE6B3}
.js-lineup colgroup col.premium{background-color: #FFEBEC}
.js-lineup colgroup col.standard{background-color: #F7FBFF}
.js-lineup-table .js-sub-headline{
	background-color: #f5f5f5;
	border-top: 1px #ddd solid;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 12px}
.js-lineup-table .table>tbody>tr>td{
	text-align: center}
.js-lineup-table .table{
	border-bottom: 1px #777 solid}
.js-lineup-table .js-lineup-table-featured {
	background-color: #fae6e8}
	.js-lineup-table thead th img,
	.js-comparing-table thead th img{
	max-width: 75px;
	width: 100%;
	margin: 0 auto 1em auto}
.js−lineup .js-lineup-table {
	width: 100%;
	margin: 0 auto}
.js−lineup .js-lineup-table colgroup col.premium {
	background-color: #FAE6E8;}
.js−lineup .js-lineup-table thead th:first-child {
	vertical-align: bottom}
.js−lineup tbody th small {
	display: block;
	font-weight: normal}
.js−lineup tbody td sup {
	font-size: 12px;
	font-weight: normal}
@media screen and (max-width: 767px) {
	.js−lineup tbody th small {
	display: none}
}
.table>tbody>tr>th .js-lineup-title-slender{font-weight: normal}
	/* spec.html #price --- */
.js-s-price-title {
	border-bottom: dashed 1px #a9a9a9;
	padding-bottom: 3px;
	font-size: 20px;
	line-height: 1.6}
.js-s-price .js-price-box {
	text-align: center;
	margin-bottom: 60px}
.js-s-price .js-price-box dt{
	text-align: center;
	font-size: 12px;
	font-weight: normal;
	margin-bottom: 12px}
.js-s-price .js-price-box dd{
	line-height: 1.7}
.js-s-price .js-price-box dt img{
	margin-bottom: 6px;
	height: 90px;
	width: auto}
.js-s-price .js-btn-shop>p{	font-size: 14px}
.js-price-box a{
	color: inherit;
	display: block;
	width: 160px;
	border:1px #777 solid;
	padding:3px 5px;
	margin-left: auto;
	margin-top: 0;
	margin-right: auto}
.js-price-box a:hover{
	text-decoration: none;
	background-color: #ccc}
.js-s-price .js-price-box dt.js-j_license-title{
	font-size: 18px;
	font-weight: bold;
	border: solid 1px #666;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	padding: 14px 0;
	color: #777;
	margin-bottom: 1em}
.js-j_license .js-price span{
	display: inline}
.js-j_license span{
	display: block;
	font-size: 11px;
	font-weight: normal}
.js-btn-square{
	display: block;
	padding:5px;
	border:1px #999 solid}
.js-price-info{
	color: red;
	font-size: 14px;
	display: inline-block;
}
a.js-btn-square{
	color: inherit}
a:hover.js-btn-square{
	display: block;
	text-decoration: none;
	background-color: #ccc}
.js-qa-info-box a{
	display: block;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 10px}
.js-qa-info-box a:hover {
	display: block;
	color: rgba(94, 94, 94, 0.8);
	background-color: rgba(94, 94, 94, 0.2);
	text-decoration: none}
.js-qa-info-box{
	margin-bottom: 2em}
.js-qa-info-cont{
	padding-bottom: 1em;
	border-bottom: 1px #ccc solid}
.js-dial-number{
	font-size: 2em;
	font-weight: bold}
.js-aaa-label{
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: #e46262;
	border-radius: 50%;
	color: #fff;
	font-size: 14px;
	padding-top: 5px;
	left: 50%;
	margin-left: 40px}
@media screen and (min-width: 767px) {
	.js-aaa-label{
		margin-left: 25px;
		top: -25px}
}
.js-qa-info-title{font-weight: bold}
/*PRICE(ATOK Passport)*/
.js-function-name{
	font-size: 90%;
	font-weight: 100}
.js-price-table .js-s-price .js-price-box dt img{
	width: 100px;
	height: auto}
/*@end*/
/**
 * timeline
 * --------------------------------------------------
 */
 .timeline dl {
 	position: relative;
 	top: 0;
 	/*padding-bottom: 24px;*/
 	margin: 0;
 }
 .timeline dl:before {
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	/* left: 50%;*/
 	z-index: 10;
 	width: 2px;
 	margin-left: -1px;
 	content: '';
 	background-color: #ccd1d9;
 }
 .timeline dl dt {
 	position: relative;
 	/*top: 24px;*/
 	z-index: 11;
 	width: 8em;
 	padding: 3px 5px;
 	/*  margin: 0 auto 30px;*/
 	font-weight: normal;
 	color: white;
 	text-align: center;
 	background-color: #aab2bd;
 	border-radius: 4px;

 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 }
 .timeline dl dd {
 	position: relative;
 	z-index: 11;
 }
 .timeline dl dd .circ {
 	position: absolute;
 	top: 15px;
 	/*  left: 50%;*/
 	z-index: 11;
 	width: 22px;
 	height: 22px;
 	margin-left: -11px;
 	background-color: #ccc;
 	border: 4px solid #f5f7fa;
 	border-radius: 50%;

 	-webkit-border-radius: 50%;
 	-moz-border-radius: 50%;
 }
 .timeline dl dd .time {
 	position: absolute;
 	top: 4px;
 	left: 50%;
 	display: inline-block;
 	width: 4em;
 	padding: 10px 20px;
 	color: #555;
 }
 .timeline dl dd .events {
 	position: relative;
 	/*width: 47%;*/
 	/*padding: 10px 10px 0;*/
 	/*margin-top: 31px;*/
 	/*background-color: white;*/
 	border-radius: 4px;

 	-webkit-border-radius: 4px;
 	-moz-border-radius: 4px;
 }
 .timeline dl dd .events:before {
 	position: absolute;
 	top: 12px;
 	width: 0;
 	height: 0;
 	content: '';
 	border-style: solid;
 	border-width: 6px;
 }
 .timeline dl dd .events .events-object {
 	margin-right: 10px;
 }
 .timeline dl dd .events .events-body {
 	overflow: hidden;
 	zoom: 1;
 	margin-left: 75px;
 	font-size: 14px
 }
 .timeline dl dd .events .events-body .events-heading {
 	border-bottom: 1px #ccc dotted;
 	padding-bottom: .5em;
 	margin: 0 0 .5em;
 	font-size: 14px;
 	font-weight: bold;
 	color: #777
 }
 .timeline dl dd.pos-right .time {
 	margin-left: -100px;
 	text-align: right;
 }
 .timeline dl dd.pos-right .events {
 	float: right;
 }
 .timeline dl dd.pos-right .events:before {
 	left: -12px;
 	border-color: transparent white transparent transparent;
 }
 .timeline .time{
 	font-size: 90%
 }

 .timeline dl:before {
 	left: 60px;
 }
 .timeline dl dt {
 	margin: 0 0 24px;
 }
 .timeline dl dd .circ {
 	left: 60px;
 }
 .timeline dl dd .time {
 	left: 0;
 }

 .timeline dl dd.pos-right .time {
 	padding: 15px 0;
 	margin-left: 0;
 	text-align: center;
 }
 .timeline dl dd.pos-right .events {
 	float: right;
 	width: 100%;

 }
 .timeline dl dd.pos-right .events:before{display: none}
.js-text-indent {
 	padding-left: 1em;
	text-indent: -1em;}

.js-annotation {
	font-size: 14px;
	line-height: 1.2}
.timeline .time{
	font-size: 12px;
	font-weight: bold;
	letter-spacing:-.5px}
.timeline .label{padding: .3em .6em .2em}
.js-to-top{z-index: 12}

/*time line*/
.js-in-month{display: none}

.timeline .panel{
	margin-bottom: 24px
}
.timeline .panel-footer ul{
	padding-left: 20px
}
/*-------------------------------------------------@group Virtical Margine*/
/*Bootstrap Collaboration*/
.jsv-bootstrap-standard,
.jsv-bootstrap-standard_xs	{margin-bottom: 12px}
.jsv-bootstrap-standard_sm	{margin-bottom: 0}
.jsv-bootstrap-standard_md	{margin-bottom: 0}
.jsv-bootstrap-standard_lg	{margin-bottom: 0}

/*Font vertical rhythm------テキスト*/
.jsv-line-ss,
.jsv-line-ss_xs				{margin-bottom: .5em}
.jsv-line-ss_sm				{margin-bottom: 0}
.jsv-line-ss_md				{margin-bottom: 0}
.jsv-line-ss_lg				{margin-bottom: 0}

.jsv-line-s,
.jsv-line-s_xs				{margin-bottom: 1em}
.jsv-line-s_sm				{margin-bottom: 0}
.jsv-line-s_md				{margin-bottom: 0}
.jsv-line-s_lg				{margin-bottom: 0}

.jsv-line-m,
.jsv-line-m_xs				{margin-bottom: 1.5em}
.jsv-line-m_sm				{margin-bottom: 0}
.jsv-line-m_md				{margin-bottom: 0}
.jsv-line-m_lg				{margin-bottom: 0}

/*Basic vertical rhythm------要素、ブロック*/
.jsv-base-half,
.jsv-base-half_xs			{margin-bottom: 12px}/*base line-height　半分*/
.jsv-base-half_sm			{margin-bottom: 0}
.jsv-base-half_md			{margin-bottom: 0}
.jsv-base-half_lg			{margin-bottom: 0}

.jsv-base-s,
.jsv-base-s_xs				{margin-bottom: 24px}/*base line-height　1つ分　*/
.jsv-base-s_sm				{margin-bottom: 0}
.jsv-base-s_md				{margin-bottom: 0}
.jsv-base-s_lg				{margin-bottom: 0}

.jsv-base-m,
.jsv-base-m_xs				{margin-bottom: 48px}/*base line-height　2つ分　*/
.jsv-base-m_sm				{margin-bottom: 0}
.jsv-base-m_md				{margin-bottom: 0}
.jsv-base-m_lg				{margin-bottom: 0}

.jsv-base-l,
.jsv-base-l_xs				{margin-bottom: 72px}/*base line-height　3つ分　*/
.jsv-base-l_sm				{margin-bottom: 0}
.jsv-base-l_md				{margin-bottom: 0}
.jsv-base-l_lg				{margin-bottom: 0}

.jsv-base-ll,
.jsv-base-ll_xs			{margin-bottom: 96px}/*base line-height　4つ分　*/
.jsv-base-ll_sm			{margin-bottom: 0}
.jsv-base-ll_md			{margin-bottom: 0}
.jsv-base-ll_lg			{margin-bottom: 0}

@media screen and (min-width:768px) {/*--------------------------▼	_sm sizeのみ	▼*/
	.jsv-bootstrap-standard_xs		{margin-bottom: 0}
	.jsv-bootstrap-standard_sm		{margin-bottom: 12px}

	.jsv-line-ss_xs				{margin-bottom: 0}
	.jsv-line-ss_sm				{margin-bottom: .5em}
	.jsv-line-s_xs				{margin-bottom: 0}
	.jsv-line-s_sm				{margin-bottom: 1em}
	.jsv-line-m_xs				{margin-bottom: 0}
	.jsv-line-m_sm				{margin-bottom: 1em}

	.jsv-base-half_xs			{margin-bottom: 0}
	.jsv-base-half_sm			{margin-bottom: 12px}

	.jsv-base-s_xs				{margin-bottom: 0}
	.jsv-base-s_sm				{margin-bottom: 24px}

	.jsv-base-m_xs				{margin-bottom: 0}
	.jsv-base-m_sm				{margin-bottom: 48px}

	.jsv-base-l_xs				{margin-bottom: 0}
	.jsv-base-l_sm				{margin-bottom: 72px}

	.jsv-base-ll_xs				{margin-bottom: 0}
	.jsv-base-l_sm				{margin-bottom: 96px}
}
@media screen and (min-width:992px){/*--------------------------▼	_md sizeのみ	▼*/
	.jsv-bootstrap-standard_sm{margin-bottom: 0}
	.jsv-bootstrap-standard_md{margin-bottom: 12px}

	.jsv-line-ss_sm				{margin-bottom: 0}
	.jsv-line-ss_md				{margin-bottom: .5em}
	.jsv-line-s_sm				{margin-bottom: 0}
	.jsv-line-s_md				{margin-bottom: 1em}
	.jsv-line-m_sm				{margin-bottom: 0}
	.jsv-line-m_md				{margin-bottom: 1em}

	.jsv-base-half_sm			{margin-bottom: 0}
	.jsv-base-half_md			{margin-bottom: 12px}

	.jsv-base-s_sm				{margin-bottom: 0}
	.jsv-base-s_md				{margin-bottom: 24px}

	.jsv-base-m_sm				{margin-bottom: 0}
	.jsv-base-m_md				{margin-bottom: 48px}

	.jsv-base-l_sm				{margin-bottom: 0}
	.jsv-base-l_md				{margin-bottom: 72px}

	.jsv-base-ll_sm				{margin-bottom: 0}
	.jsv-base-l_md				{margin-bottom: 96px}
}

@media screen and (min-width:1200px){/*--------------------------▼	_lg sizeのみ	▼*/
	.jsv-bootstrap-standard_md{margin-bottom: 0}
	.jsv-bootstrap-standard_lg{margin-bottom: 12px}

	.jsv-line-ss_md				{margin-bottom: 0}
	.jsv-line-ss_lg				{margin-bottom: .5em}
	.jsv-line-s_md				{margin-bottom: 0}
	.jsv-line-s_lg				{margin-bottom: 1em}
	.jsv-line-m_md				{margin-bottom: 0}
	.jsv-line-m_lg				{margin-bottom: 1em}

	.jsv-base-half_md			{margin-bottom: 0}
	.jsv-base-half_lg			{margin-bottom: 12px}

	.jsv-base-s_md				{margin-bottom: 0}
	.jsv-base-s_lg				{margin-bottom: 24px}

	.jsv-base-m_md				{margin-bottom: 0}
	.jsv-base-m_lg				{margin-bottom: 48px}

	.jsv-base-l_md				{margin-bottom: 0}
	.jsv-base-l_lg				{margin-bottom: 72px}

	.jsv-base-ll_md				{margin-bottom: 0}
	.jsv-base-l_lg				{margin-bottom: 96px}
}
@media screen and (min-width:768px){/*--------------------------▼	_sm size以降マージン無し	▼*/
	.jsv-clear_sm{	margin-bottom: 0}
}
@media screen and (min-width:992px){/*--------------------------▼	_md size以降マージン無し	▼*/
	.jsv-clear_md{	margin-bottom: 0}
}
@media screen and (min-width:1200px){/*--------------------------▼	_md size以降マージン無し	▼*/
	.jsv-clear_lg{	margin-bottom: 0}
}
/*@end-----------------------------*/
/*残件クラス*/
.js-lineup-table .product-name {
	padding: 6px 1em 0;
	font-size: 14px;
}
.js-table-underline .table{
	border-bottom:1px #ddd solid}
.js-manual{	font-size: 14px}
.js-manual th{	font-size: 13px}

.js-atok-creditdic{
	border-top: 1px #ccc solid;
	padding-top: 48px
}
/*ショップを探すボタン非表示処理*/
/*a[href^="http://www.justsystems.com/jp/shop/"],
a[href^="/jp/shop/"]{
	display: none
}*/
/*他への影響があるので念のためクラス名を変更して対応*/
.js-lineup-table .js-product-name {
	font-size: 14px;
}
/*---------------------------@group Single Page */
.js-singlepage-shared-foot .js-nav-pager{display: none}
.js-singlepage-block .js-in-container{margin-right: 0}
/*@end-----------------------------*/
.js-icon-2way{
	width: 50px;
	height: auto;
	margin:1em auto}
.js-anchor-wrap-m{	padding-top: 72px}


/*FORM SEARCH*/
.spec-android-pro .btn{
	white-space:inherit}
.js-model-item-list{overflow: hidden;}
@media screen and (min-width: 768px){
.spec-android-pro .js-model-item-list li{
	width: 50%;
	float: left}
}

.js-search-string p {
	display: inline-block;
	border: solid 1px #999;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	width: 36px;
	height: 36px;
	margin-right: 7px;
	margin-bottom: 7px;
	text-align: center;
	line-height: 36px;
	cursor: pointer}
.js-search-string p.js-search-string-other {
	width: auto;
	padding: 0 8px}
@media screen and (min-width: 768px) {
	.js-search-string p:hover {
		background-color: #F2F2F2;
	}
}

/*ATOK Passport class*/
.aboutatok .js-aboutatok-panel-info.panel-footer {
	background-color: #fff}
.js-bgcolor-muted{
	background-color: #fafafa}