@charset "utf-8";
body{font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

h1, h2, h3, h5, h6 {font-weight: 300}
h4{font-weight: bold}

kbd{	margin: 0 4px}
.well .table{background-color: transparent}
a{color: #007aff}
.js-anchor a{color: inherit}
.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;
}
/*@end*/
/*-------------------------- @group Typography*/
						/*theme index*/

/*.js-i-h1{	font-size: 34px}
.js-i-h1 + .js-i-lead{font-size: 26px}
.js-i-h2{	font-size: 24px}
.js-i-h2 + .js-i-lead{font-size: 20px}
.js-i-h3{	font-size: 20px}
.js-i-h4{	font-size: 18px}
.js-f-intro-text{	font-size: 20px}*/
.js-i-h1{	font-size: 34px}
.js-i-h1 + .js-i-lead{font-size: 26px}
.js-i-h2{	font-size: 20px}
.js-i-h2 + .js-i-lead,
.js-i-h3 + .js-i-lead{font-size: 24px}
.js-i-h3{	font-size: 20px; border-bottom:0; margin-bottom: 0}/*Mac none border*/

.js-i-h4{	font-size: 18px}
.js-f-intro-text{	font-size: 20px}
.js-i-h2:before,.js-i-h3:before{
	font-size: 1.8em;
	margin-right: .2em}
.js-i-lead{	color: #808080}
						/*theme feature*/
.js-f-h1{	font-size: 32px}
.js-f-h1 + .js-f-lead{font-size: 24px}
.js-f-h2{	font-size: 24px; margin-bottom: .2em}
.js-f-h2 + .js-lead{font-size: 32px}
.js-f-h3{	font-size: 18px; border-bottom:1px #ccc dotted; padding-bottom: 0.5em}
.js-f-h3 + .js-lead{font-size: 22px}
.js-f-h4{	font-size: 16px}
.js-f-intro-text{	font-size: 18px}
/*.js-ico+.js-lead{	padding-left: 1.7em}*/
.js-ico+.js-lead-nonicon{	padding-left: 0}
.js-gnav-side-panel-list li.js-gnav-side-panel-buy a:before {
    display: none;
}
.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-ico-buy:before {
    content: "";
    height: 0
}
.js-gnav-side-panel-buy .glyphicon {
    font-size: 24px;
}
.js-gnav-side-panel-buy p:nth-child(2) {
    padding-top: 8px;
}
.js-f-h2:before,.js-f-h3:before{
	font-size: 2em;
	margin-right: .2em}
.js-premiumdictionaries .js-i-h3{font-size: 24px}
@media screen and (min-width:992px) {
	/*theme index*/
	.js-i-h1{	font-size: 50px}
	.js-i-h1 + .js-i-lead{font-size: 40px}
	.js-i-h2{
		font-size: 26px;
		-webkit-justify-content: center;
		justify-content: center}
	.js-i-h2 + .js-i-lead{font-size: 38px; line-height: 1.2}
/*2020*/
	.js-i-h3{	font-size: 24px;
		color: #000;
		-webkit-justify-content: center;
		justify-content: center}/*font-size:28px-24px*/
	.js-i-h3 + .js-i-lead{font-size: 26px;}
	.js-summaryevolution .js-title-h3{text-align: center}
	.js-f-h3 + .js-i-lead{font-size: 22px; padding-top:.5em}

	.js-i-intro-text{	font-size: 20px}
	.js-i-h2:before{	margin-right: .2em}
	/*theme feature*/
	.js-f-h1{	font-size: 42px}
	.js-f-h1 + .js-f-lead{font-size: 32px}
	.js-f-h2{	font-size: 22px}
	.js-f-h2 + .js-f-lead{font-size: 32px}
	.js-f-h3{	font-size: 18px; border-bottom:1px #ccc dotted; padding-bottom: 0.5em; font-weight: bold}
	.js-f-h3 + .js-f-lead{font-size: 22px}
	.js-f-intro-text{	font-size: 18px}
}
.js-flex-box .js-flex-item {	padding-left: 0;}
@media screen and (min-width: 768px){
	.js-flex-box .js-flex-item {	padding-left: 0}

}


/*@end*/
/*---------------------------ATOK SECTION BLOCK*/
section:nth-of-type(2n){	background-color: #fafafa}/*F5F3F3*/

.js-bg-atokintro .js-in-container{position: relative}
.js-bg-atokintro .js-transition-text{font-weight: bold}
.js-bg-atokintro{
	background: #b2fbfb;
	background: -moz-linear-gradient(left, hsl(180,90%,84%) 1%, hsl(196,93%,84%) 50%, hsl(207,98%,84%) 79%, hsl(220,100%,84%) 100%);
	background: -webkit-linear-gradient(left, hsl(180,90%,84%) 1%,hsl(196,93%,84%) 50%,hsl(207,98%,84%) 79%,hsl(220,100%,84%) 100%);
	background: linear-gradient(to right, hsl(180,90%,84%) 1%,hsl(196,93%,84%) 50%,hsl(207,98%,84%) 79%,hsl(220,100%,84%) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2fbfb', endColorstr='#adc9ff',GradientType=1 )}
/*@end*/
/*---------------------------Small scale　Parts*/
						/*theme index*/
/*OS MARK*/
.js-macos-info{
	display: inline-block;
	border-radius: 5px;
	border:1px #404040 solid;
	padding: 3px 5px
}
.js-block-center-icon:before{ /*3グリッドの各項目の上にあるアイコンフォント（マーク）*/
	font-size: 72px;
	display: block;
	color: #325a9e;
	margin-bottom: 16px}

.js-xs-dotted:after{
	content: "";
	display: block;
	width: 80%;
	border-bottom: 1px #ccc dotted;
	padding-top: 48px;
	margin: 0 auto 48px}
.js-xs-dotted:last-child:after{
	display: none}
.js-list-engine img{
	width: auto;
	height: 60px;
	margin: 0 auto 12px}

@media screen and (min-width:768px) {
	.js-xs-dotted:after{
			content: "";
			display: none}
	.js-img-os{
			position: absolute;
			width: 55px;
			height: auto;
			right: 0;
			top: 0}
}
						/*theme feature*/
.js-two-way-block .js-two-way-block-icon img{width: 200px}
.js-two-way-block a:hover{text-decoration: none}
.js-btn-install{
	width: 300px;
	height: auto}
.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}
/*@end*/
/*---------------------------Btn CVN*/
a.js-btn-cvn{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.88, #e90119), color-stop(0.00, #ff475b));
	background: -webkit-linear-gradient(top, #ff475b 0%, #e90119 88%);
	background: -moz-linear-gradient(top, #ff475b 0%, #e90119 88%);
	background: -o-linear-gradient(top, #ff475b 0%, #e90119 88%);
	background: -ms-linear-gradient(top, #ff475b 0%, #e90119 88%);
	background: linear-gradient(to bottom, #ff475b 0%, #e90119 88%);
	border-radius: 5px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3)}

.js-panel-cvn-box a.js-btn-cvn{
	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 );
}
/*a.js-btn-cvn:hover{
		background-color: red;
		background: rgb(247,157,155);
		background: -moz-linear-gradient(top,  rgba(247,157,155,1) 5%, rgba(255,122,122,1) 66%);
		background: -webkit-linear-gradient(top,  rgba(247,157,155,1) 5%,rgba(255,122,122,1) 66%);
		background: linear-gradient(to bottom,  rgba(247,157,155,1) 5%,rgba(255,122,122,1) 66%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d9b', endColorstr='#ff7a7a',GradientType=0 );
		color: #FFF}*/
/*@end*/
/*---------------------------Btn CVN*/
a.js-btn-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 );}*/
/*@end*/
/*---------------------------------------------------------------------------------重複している　coraの更新以降削除　2017/10/26 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}
}
/*@end*/
/*---------------------------Btn CVN BOX BOTTOM*/
.js-atok-panel-cvn .js-panel-cvn-image{
	max-width: 100px;
	width: 100%;
	height: auto;
	margin: 0 auto}
.js-atok-panel-cvn .js-panel-cvn-product{
	padding: 0}
.js-atok-panel-cvn {
	color: #000;
	box-shadow: 0 0 10px #bbb;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 )}
@media screen and (min-width: 992px) {
	.js-atok-panel-cvn .js-panel-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-panel-cvn-product{
		text-align: left;
		padding: 0 30px}
		.js-panel-cvn-product .js-product-catch{font-size:18px}
		.js-panel-cvn-product .js-js-product-name{font-size:24px}
		.js-btn-info-image .js-symbol-right:before{
		left: auto;
		margin-left: 0}
	.js-atok-panel-cvn .js-panel-cvn-box{
		width: 55%;
		margin: 0 auto}
	.js-atok-panel-cvn .js-panel-cvn-box .js-panel-cvn-image{	margin:0}
	.js-atok-panel-cvn .js-panel-cvn-product{text-align: center}
}
.js-panel-cvn .js-product-shoulder,
.js-panel-cvn .js-product-name{
	display: block}
/*@end*/
/*-------------------------- @group Swiper Control*/
.js-bg-editer{
	background-position: 2em 0 0 0;
	background: url(../images/bg-fade-full.png) no-repeat;
	background-size: cover}
ol.js-head-caption+.js-fade .swiper-slide::before{
	background-color: #fcf8e3}
/*@end*/
/*-------------------------- @group download theme*/
.js-dmg-img img{
	display: block;
	margin: 0 auto 24px;
	width: 72px;
	height: auto}
@media screen and (min-width:768px) {
	.js-dmg{
		-js-display: flex;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center; /* Safari */
		align-items:center;
		-webkit-justify-content: center;
		justify-content: center}
	.js-dmg-img{margin-right: 24px}
}
	/*@end*/
/*-------------------------- @group spec theme*/
.js-macos-badge{
	color: #203248;
	display: inline-block;
	padding:3px 4px;
	border:1px #203248 solid;
	border-radius: 3px}
/*@end*/

.js-badge-os {
	font-size: .8em;
	background-color: #fff;
	border: 1px #ddd solid;
	padding: .2em .5em;
	border-radius: 5px;
}

/*追加 20180605*/
@media screen and (min-width: 992px){
.js-product-head:after {	top: -60px}
}
.js-header-info-main{
background: #d1d2d3;
background: -moz-linear-gradient(45deg, hsl(210,2%,82%) 1%, hsl(60,14%,97%) 49%, hsl(60,14%,97%) 100%, hsl(60,14%,97%) 100%);
background: -webkit-linear-gradient(45deg, hsl(210,2%,82%) 1%,hsl(60,14%,97%) 49%,hsl(60,14%,97%) 100%,hsl(60,14%,97%) 100%);
background: linear-gradient(45deg, hsl(210,2%,82%) 1%,hsl(60,14%,97%) 49%,hsl(60,14%,97%) 100%,hsl(60,14%,97%) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d2d3', endColorstr='#f9f9f7',GradientType=1 );}
.js-header-info-box{
	max-width: 930px;
	width: 100%;
	margin: 0 auto;
	position: relative}
.js-header-info-title{
	font-size: 14px;
	color: #000;
	position: absolute;
	line-height: 1.5;
	left: 2em;
	bottom: 37%;}

.js-header-info-date{
	color: #000;
	font-size: 12px;
	position: absolute;
	right: 16px;
	bottom: .5em}

.js-header-info-date-next{
	color: #000;
	font-size: 12px;
	position: absolute;
	right: 16px;
	bottom:5em}

/*-----------------------------202010 add-class*/
.js-header-info-box{text-shadow:
	
}

.js-header-info-osupdate,.js-header-info-osupdate-next{
	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;
	bottom:3em;
    right: 1em;
    background-color: #fff;
	font-size: .6em}

.js-header-info-box .js-header-info-osupdate-next{
	position: absolute;
	bottom:9em;
    right: 1em;
    background-color: #fff;
	font-size: .6em
}
.js-header-info-osupdate-next-small{
	position: absolute;
	bottom:10em;
    right: 1em;
	font-size: .5em;
	color: #000
}


@media screen and (min-width: 768px){
	.js-header-info-box .js-header-info-osupdate{
		background-color: rgb(255 255 255 / .8);
		bottom:2.3em;
		font-size: 1em}
	.js-header-info-box .js-header-info-osupdate-next{
		background-color: rgb(255 255 255 / .8);
		bottom:7.5em;
		font-size: 1em}
	
	.js-header-info-osupdate-next-small{
		
		font-size: .8em;
		bottom:9em;
	}
	.js-header-info-date-next{
		font-size: 18px;
    	right: 16px;
		bottom: 5em
	}
}

/*-----------------------------END 202010 add-class*/
.js-summary-macos-badge{
		position: absolute;
		right: 16px;
		bottom: 2em}
.js-summary-macos-badge img{
	width: 35px;
	height: auto}
.js-header-info-linkl{
	font-size: 12px;
	position: absolute;
	right: 1em;
	top: 1em}
.js-header-info-ossupport{
	position: absolute;
	bottom: 5%;
	right: 50%;
	font-size: 14px}
.js-header-info-ossupport{
	position: absolute;
	bottom: 3%;
	right: 50%;
	font-size: 10px}
@media screen and (min-width: 450px){
	.js-header-info-ossupport{
		bottom: 5%;
		right: 50%}
}

@media screen and (min-width: 768px){
	.js-header-info-title{	left: 4em}
	.js-header-info-date{
		font-size: 18px;
			right: 16px}
	.js-summary-macos-badge img{width: 48px}
	.js-summary-macos-badge{
		bottom: 10%;
		right: 16px}
	.js-header-info-linkl{
		font-size: 14px;
		top:2em;
		right: 16px}
	.js-header-info-ossupport{
		font-size: 16px;
		bottom: 8%;
		right: 50%}
}
@media screen and (min-width: 992px){
	.js-header-info-title{
		font-size: 16px;
		line-height: 1}
	.js-header-info-title{	left: 5em}
}
.js-feature-thum img{
	width: 30%;
	height: auto;
	margin: 0 auto 24px
}
.js-ossupport{
	display: none
}
.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;
}
.cloud-guess-sports{color: #00a2e8}
.cloud-guess-economy{color: #2e52c8}
.cloud-guess-game{color: #1aa944}

.js-cont-history{
	padding-top: 72px
}
/*追加 20200616*/
/* section.js-summarysuggestion .js-fade-caption{
		background-color:#fafafa;
}*/


.js-btn-cvn, .js-gnav-side-panel-buy {
	background-color: #fff
}
.js-text-red{color:#Ffff00;}