/* -----------------------------
■ 全体
----------------------------- */
body {
	padding-top: 0; }

/* -----------------------------
■ メインビジュアル
----------------------------- */
.mainImage {
	text-align: center; }

/* -----------------------------
■ エリア共通
----------------------------- */
.areaWrapper {
	width: 1100px;
	margin: 100px auto 0; }

.areaWrapper h2 {
	color: #000;
	font-size: 20px;
	font-weight: bold;
	line-height: 30px; }

.areaWrapper p {
	margin-top: 25px;
	color: #2a2a2a;
	font-size: 14px;
	line-height: 26px; }

.areaWrapper p:first-child {
	margin-top: 0; }

.areaWrapper .caption {
	margin-top: 10px;
	color: #4d5269;
	font-size: 12px;
	font-weight: bold;
	line-height: 21px; }

.areaWrapper .twoColumnWrapper {
	margin-top: 40px; }

.areaWrapper .movie {
	margin-top: 40px;
	text-align: center; }

.areaWrapper .movie .left {
	float: left;
	width: 524px; }

.areaWrapper .movie .right {
	float: right;
	width: 524px; }

.areaWrapper .textLink {
	color: #4d5269;
	font-size: 14px;
	line-height: 24px; }

.areaWrapper .textLink span {
	display: inline-block;
	padding-right: 34px;
	background: url(../images/bg_linkarrow.png) no-repeat right center; }

.red {
	color: #d61f19; }

.green {
	color: #00a000; }

.blue {
	color: #0080cb; }

/* -----------------------------
■ A テキスト:画像 334:716
----------------------------- */
.areaA .textWrapper {
	float: left;
	width: 334px; }

.areaA .imgWrapper {
	position: relative;
	float: right;
	width: 716px;
	padding-bottom: 20px; }

/* -----------------------------
■ B　画像:画像  524:524
----------------------------- */
.areaB .twoColumnWrapper .left {
	float: left;
	width: 524px; }

.areaB .twoColumnWrapper .right {
	float: right;
	width: 524px; }

/* -----------------------------
■ C テキスト:画像   524:524
----------------------------- */
.areaC .textWrapper {
	float: left;
	width: 524px; }

.areaC .imgWrapper {
	float: right;
	width: 524px; }

.areaC .tcw2iw {
	margin-top: 50px; }

/* -----------------------------
■ イラスト
----------------------------- */
.illustModel {
	position: absolute;
	bottom: 10px;
	left: -366px; }

/* -----------------------------
■ グラフ
----------------------------- */
.graphWrapper {
	position: relative; }

.plotWrapper {
	overflow: hidden;
	position: absolute; }

.plotWrapper .line {
	transition: margin-left 1s; }

.plotWrapper .lineInner {
	position: relative;
	display: inline-block; }

.plotWrapper .line p {
	position: absolute;
	top: 0;
	right: 10px;
	margin: 0;
	color: #fff;
	font-weight: bold; }

.line .val,
.line .per {
	font-size: 16px;
	line-height: 32px; }

.plotWrapper .abb {
	position: absolute;
	top: 0px;
	left: 8px; }

.plotWrapper .ico {
	display: none;
	position: absolute; }

.netCorner {
	position: absolute;
	top: 0;
	right: 0; }

.graphWrapper .line1 .val,
.graphWrapper .line3 .val {
	font-size: 26px;
	line-height: 44px; }

.graphWrapper .line1 .per,
.graphWrapper .line3 .per {
	font-size: 16px;
	line-height: 44px; }

.graphWrapper .line2 .val,
.graphWrapper .line4 .val {
	font-size: 20px;
	line-height: 44px; }

.graphWrapper .line2 .per,
.graphWrapper .line4 .per {
	font-size: 12px;
	font-weight: bold;
	line-height: 44px; }

/* model */
.gw1 .plotWrapper {
	top: 110px;
	left: 215px; }

.gw1 .line1 {
	margin-top: 24px;
	margin-left: -436px; }

.gw1 .line2 {
	margin-top: -7px;
	margin-left: -130px; }

.gw1 .line3 {
	margin-top: 34px;
	margin-left: -374px; }

.gw1 .line4 {
	margin-top: -7px;
	margin-left: -130px; }

.gw2 .plotWrapper {
	top: 80px;
	left: 150px;
	padding-bottom: 36px; }

.gw2 .plotWrapper .line {
	position: relative; }

.gw2 .line1 {
	margin-top: 6px;
	margin-left: -324px; }

.gw2 .line2 {
	margin-top: -5px;
	margin-left: -255px; }

.gw2 .plotWrapper .ico1 {
	top: 0;
	left: 250px;
    animation: gw2ico1 1s ease-in-out infinite alternate;}

@keyframes gw2ico1 {
    0% {top: 30px;}
    100% {top: 40px;}
}

.gw3 .plotWrapper {
	top: 80px;
	left: 151px;
	padding-right: 20px;
	padding-bottom: 36px; }

.gw3 .plotWrapper .line {
	position: relative; }

.gw3 .line1 {
	margin-top: 6px;
	margin-left: -324px; }

.gw3 .line2 {
	margin-top: -5px;
	margin-left: -256px; }

.gw3 .plotWrapper .ico1 {
    top: 0;
    left: 250px;
    animation: gw3ico1 1s ease-in-out infinite alternate;}

@keyframes gw3ico1 {
    0% {top: 30px;}
    100% {top: 40px;}
}

/* cpu */
.gw4 .plotWrapper {
	top: 85px;
	left: 151px;
	padding-right: 20px;
	padding-bottom: 36px; }

.gw4 .plotWrapper .line {
	position: relative; }

.gw4 .line1 {
	margin-top: 12px;
	margin-left: -326px; }

.gw4 .line2 {
	margin-top: -5px;
	margin-left: -284px; }

.gw4 .plotWrapper .ico1 {
    top: 0;
    left: 272px;
    animation: gw4ico1 1s ease-in-out infinite alternate;}

@keyframes gw4ico1 {
    0% {top: 35px;}
    100% {top: 45px;}
}

/* work2 */
.gw5 .plotWrapper {
	top: 60px;
	left: 146px;
	padding-top: 42px;
	padding-bottom: 36px; }

.gw5 .plotWrapper .line {
	position: relative; }

.gw5 .line1 {
	margin-left: -264px; }

.gw5 .line2 {
	margin-top: -5px;
	margin-left: -340px; }

.gw5 .plotWrapper .ico1 {
	top: 0;
	right: 24px;
    animation: gw5ico1 1s ease-in-out infinite alternate;}

@keyframes gw5ico1 {
    0% {top: 0px;}
    100% {top: 15px;}
}

.gw5 .plotWrapper .abb {
	left: 15px; }


.gw6 .plotWrapper {
	top: 60px;
	left: 146px;
	padding: 42px 20px 36px 0; }

.gw6 .plotWrapper .line {
	position: relative; }

.gw6 .line1 {
	margin-left: -298px; }

.gw6 .line2 {
	margin-top: -5px;
	margin-left: -332px; }

.gw6 .plotWrapper .ico1 {
	top: 0;
	right: 0;
    animation: gw6ico1 1s ease-in-out infinite alternate;}

@keyframes gw6ico1 {
    0% {top: 0px;}
    100% {top: 15px;}
}

.gw6 .plotWrapper .abb {
	left: 15px; }


/* concept */
.gw7 {
	position: relative; }

.gw7 .plotWrapper {
	position: absolute;
	top: 125px;
	left: 137px;
	width: 357px;
	height: 190px; }

.gw7 .line1,
.gw7 .line2 {
	position: absolute; }

.gw7 .line1 {
	background-color: #ccc; }

.gw7 .line2 {
	background-color: #00f; }

.gw7 .line1_1 {
	top: 174px;
	left: 0;
	width: 0px;
	height: 2px; }

.gw7 .on .line1_1 {
	animation: conceptLine1_1 .2s ease-in-out forwards alternate; }

@keyframes conceptLine1_1 {
    0% {width: 0px;}
    100% {width: 55px;}
}
.gw7 .line1_2 {
	bottom: 14px;
	left: 54px;
	width: 2px;
	height: 0px; }

.gw7 .on .line1_2 {
	animation: conceptLine1_2 .4s ease-in-out forwards alternate; }

@keyframes conceptLine1_2 {
    0% {height: 0px;}
    50% {height: 0px;}
    100% {height: 173px;}
}

.gw7 .line1_3 {
	top: 3px;
	left: 54px;
	width: 0px;
	height: 2px; }

.gw7 .on .line1_3 {
	animation: conceptLine1_3 .6s ease-in-out forwards alternate; }

@keyframes conceptLine1_3 {
    0% {width: 0px;}
    66% {width: 0px;}
    100% {width: 17px;}
}

.gw7 .line1_4 {
	top: 3px;
	left: 70px;
	width: 2px;
	height: 0px; }

.gw7 .on .line1_4 {
	animation: conceptLine1_4 .8s ease-in-out forwards alternate; }

@keyframes conceptLine1_4 {
	0% {height: 0px;}
	75% {height: 0px;}
	100% {height: 103px;}
}

.gw7 .line1_5 {
	top: 104px;
	left: 71px;
	width: 0px;
	height: 2px; }

.gw7 .on .line1_5 {
	animation: conceptLine1_5 1.0s ease-in-out forwards alternate; }

@keyframes conceptLine1_5 {
	0% {width: 0px;}
	80% {width: 0px;}
	100% {width: 286px;}
}

.gw7 .line2_1 {
	top: 174px;
	left: 0;
	width: 55px;
	height: 2px;
	opacity: 0; }

.gw7 .on .line2_1 {
	animation: conceptLine2_1 1.2s ease-in-out forwards alternate; }

@keyframes conceptLine2_1 {
	0% {opacity: 0;}
	83% {opacity: 0;}
	100% {opacity: 1;}
}
.gw7 .line2_2 {
	bottom: 14px;
	left: 54px;
	width: 2px;
	height: 173px;
	opacity: 0; }

.gw7 .on .line2_2 {
	animation: conceptLine2_2 1.2s ease-in-out forwards alternate; }

@keyframes conceptLine2_2 {
	0% {opacity: 0;}
	83% {opacity: 0;}
	100% {opacity: 1;}
}

.gw7 .line2_3 {
	top: 3px;
	left: 54px;
	width: 17px;
	height: 2px;
	opacity: 0; }

.gw7 .on .line2_3 {
	animation: conceptLine2_3 1.6s ease-in-out forwards alternate; }

@keyframes conceptLine2_3 {
	0% {opacity: 0;}
	62.5% {opacity: 0;}
	75% {opacity: 1;width: 17px;}
	100% {opacity: 1;width: 32px;}
}

.gw7 .line2_4 {
	top: 3px;
	left: 70px;
	width: 2px;
	height: 103px;
	opacity: 0; }

.gw7 .on .line2_4 {
	animation: conceptLine2_4 1.6s ease-in-out forwards alternate; }

@keyframes conceptLine2_4 {
	0% {opacity: 0;}
	62.5% {opacity: 0;}
	75% {opacity: 1;height: 103px;left:70px;}
	100% {opacity: 1;height: 78px;left:84px;}
}

.gw7 .line2_5 {
	top: 104px;
	left: 71px;
	width: 286px;
	height: 2px;
	opacity: 0; }

.gw7 .on .line2_5 {
	animation: conceptLine2_5 1.6s ease-in-out forwards alternate; }

@keyframes conceptLine2_5 {
	0% {opacity: 0;}
	62.5% {opacity: 0;}
	75% {opacity: 1;width:286px;top:104px;left:71px;}
	100% {opacity: 1;width:274px;top:79px;left:84px;}
}


.gw7 .arrow {
	position: absolute;
	top: 4px;
	left: 0;
	opacity: 0; }

.gw7 .on .arrow {
	animation: conceptArrow 1.8s ease-in-out forwards alternate; }

@keyframes conceptArrow {
	0% {opacity: 0;}
	77.7% {opacity: 0;}
	100% {opacity: 1;}
}



/* 共通 */

.plotWrapper.on .line {
	margin-left: 0; }

/* -----------------------------
■ 吹き出し
----------------------------- */
.speechWrapper {
	margin-top: 95px;
	text-align: center; }

.speechWrapper .frameLeft {
	position: relative;
	display: inline-block;
	padding-left: 90px;
	background: url(../images/bg_frameLeft.png) no-repeat 0 center; }

.speechWrapper .frameRight {
	display: inline-block;
	padding: 35px 90px 35px 0;
	background: url(../images/bg_frameRight.png) no-repeat right center; }

.speechWrapper .tag {
	position: absolute;
	width: 100%;
	top: -15px;
	left: 0;
	text-align: center; }

.speechWrapper .tag span {
	display: inline-block;
	padding: 0 10px;
	color: #d61f19;
	font-size: 20px;
	line-height: 30px;
	border: 2px solid #d61f19;
	border-radius: 5px; }

.speechWrapper p {
	font-size: 24px;
	font-weight: bold;
	line-height: 38px; }

.speechWrapper .bigfont {
	font-size: 32px;
	line-height: 52px; }

.speechWrapper .red {
	color: #d61f19; }

.speechWrapper .black {
	color: #000; }

/* ----------------------
■ タブ
---------------------- */
.tabWrapper {
	width: 1100px;
	margin: 90px auto 0; }

.tabWrapper .left,
.tabWrapper .right {
	float: left;
	width: 50%;
	text-align: center; }

.tabWrapper div a {
	display: block;
	line-height: 90px;
	border: 1px solid #b5b9c8; }

.tabWrapper div a:hover {
	text-decoration: none; }

.tabWrapper div a .inner {
	display: inline-block;
	color: #4d5269;
	font-size: 24px;
	vertical-align: middle; }

.tabWrapper div a .tag {
	display: inline-block;
	margin-right: 10px;
	padding: 0 10px;
	color: #fff;
	font-size: 20px;
	line-height: 34px;
	border-radius: 5px;
	vertical-align: middle;
	background-color: #4d5269; }

.tabWrapper .current a {
	background-color: #808090; }

.tabWrapper .current a .inner {
	color: #fff; }

.tabWrapper .current a .tag {
	color: #4d5269;
	background-color: #fff; }

/* ----------------------
■ 見出し
---------------------- */
.headWrapper h2 {
	margin: 0 0 50px;
	padding-bottom: 10px;
	color: #4d5269;
	font-size: 30px;
	line-height: 36px;
	border-bottom: 2px solid #4d5269; }

.headWrapper h2 span {
	display: inline-block;
	margin-right: 10px;
	padding: 2px 10px 0;
	color: #fff;
	font-size: 20px;
	line-height: 30px;
	border-radius: 5px;
	vertical-align: top;;
	background-color: #4d5269; }

/* ----------------------
■ 商品リンク
---------------------- */
.modelWrapper h2 {
	color: #4d5269;
	font-size: 24px;
	font-weight: bold;
	line-height: 30px;
	text-align: center; }

.modelWrapper .tableWrapper {
	width: 1100px;
	margin: 35px auto 0; }

.modelWrapper .tableWrapper .left,
.modelWrapper .tableWrapper .right {
	float: left;
	width: 550px;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box; }

.modelWrapper .tableWrapper .right {
	border-right: 1px solid #ddd; }

.modelWrapper .type {
	color: #000;
	font-size: 16px;
	font-weight: bold;
	line-height: 38px;
	text-align: center; }

.modelWrapper .left .type {
	border-right: none; }

.modelWrapper ul {
	display: table;
	width: 100%;
	border-top: 1px solid #ddd; }

.modelWrapper li {
	display: table-cell;
	width: 33.3333%;
	padding: 20px 0 30px;
	text-align: center;
	border-left: 1px solid #ddd; }

.modelWrapper li:first-child {
	border: none;  }

.modelWrapper li a {
	display: block; }

.modelWrapper li a:hover {
	text-decoration: none; }

.modelWrapper li .name {
	margin-top: 20px;
	color: #4d5269;
	font-size: 22px;
	font-weight: bold;
	line-height: 34px; }

.modelWrapper li .name span {
	font-size: 10px;
	vertical-align: text-top; }

.modelWrapper li .size {
	margin-top: 5px;
	color: #4d5269;
	font-size: 16px;
	line-height: 24px; }

.modelWrapper li .arrow {
	margin-top: 15px; }

/* -----------------------------
■ 画像のみ
----------------------------- */
.imageWrapper {
	margin-top: 40px;
	text-align: center; }

/* -----------------------------
■ バナー
----------------------------- */
.bnrWrapper {
	margin-top: 100px;
	text-align: center; }

/* -----------------------------
■ windows10
----------------------------- */
.win10Wrapper {
	margin-top: 40px;
	text-align: center; }

/* -----------------------------
■ 汎用
----------------------------- */
h2,h3,h4 {
	font-weight: normal; }

a {
	transition: opacity .4s; }

a:hover {
	opacity: .6; }

.textR {
	text-align: right; }