/* -----------------------------
■ 全体
----------------------------- */
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 .textLink {
	color: #4d5269;
	font-size: 14px;
	line-height: 24px; }

.areaWrapper .textLink span {
	display: inline-block;
	padding-right: 34px;
	background: url(../trueperformance/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; }

/* -----------------------------
■ 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 .net {
	position: relative;
	transition: background 1s; }

.plotWrapper .netInner {
	opacity: 0;
	transition: opacity 1s; }

.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: 104px;
	left: 185px; }

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

.gw1 .line2 {
	margin-top: -9px;
	margin-left: -402px; }

.gw1 .line3 {
	margin-top: 45px;
	margin-left: -138px; }

.gw1 .line4 {
	margin-top: -9px;
	margin-left: -374px; }

/* cpu */
.gw2 .plotWrapper {
	top: 117px;
	left: 173px; }

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

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

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

.gw2 .line3 {
	margin-top: 0px;
	margin-left: -290px; }

.gw2 .line4 {
	margin-top: -5px;
	margin-left: -226px; }

.gw2 .line5 {
	margin-top: 20px;
	margin-left: -108px; }

.gw2 .line6 {
	margin-top: 18px;
	margin-left: -24px; }

.gw2 .line5 p ,
.gw2 .line6 p {
	right: -52px;
	color: #4d5269; }

.gw2 .plotWrapper .net {
	width: 284px;
	padding: 2px 0 4px 10px;
	color: #4d5269;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	box-sizing: border-box;
	background: url(../trueperformance/images/bg_graph_net.png) no-repeat -469px 0; }

.gw2 .plotWrapper.on .net {
	animation: gw2net 1s ease-in-out forwards alternate; }

.gw2 .plotWrapper.on .netInner {
	animation: gw2netInner 1s ease-in-out forwards alternate; }

@keyframes gw2net {
	0% { background-position: -469px 0; }
	40% { background-position: -469px 0; }
	100% { background-position: -114px 0;}
}

@keyframes gw2netInner {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

.gw2 .plotWrapper .net span {
	font-size: 12px;
	line-height: 16px; }

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

.gw2 .plotWrapper .ico2 {
	top: 192px;
	right: 30px;
    animation: gw2ico2 1s ease-in-out infinite alternate;}

@keyframes gw2ico1 {
    0% {top: 42px;}
    100% {top: 52px;}
}

@keyframes gw2ico2 {
    0% {top: 192px;}
    100% {top: 202px;}
}

/* gpu */
.gw3 .plotWrapper {
	top: 117px;
	left: 173px; }

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

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

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

.gw3 .line3 {
	margin-top: 0px;
	margin-left: -290px; }

.gw3 .line4 {
	margin-top: -5px;
	margin-left: -226px; }

.gw3 .line5 {
	margin-top: 20px;
	margin-left: -108px; }

.gw3 .line6 {
	margin-top: 18px;
	margin-left: -26px; }

.gw3 .line5 p ,
.gw3 .line6 p {
	right: -52px;
	color: #4d5269; }

.gw3 .plotWrapper .net {
	width: 284px;
	padding: 2px 0 4px 10px;
	color: #4d5269;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	box-sizing: border-box;
	background: url(../trueperformance/images/bg_graph_net.png) no-repeat -469px 0; }

.gw3 .plotWrapper.on .net {
	animation: gw3net 1s ease-in-out forwards alternate; }

.gw3 .plotWrapper.on .netInner {
	animation: gw3netInner 1s ease-in-out forwards alternate; }

@keyframes gw3net {
	0% { background-position: -469px 0; }
	40% { background-position: -469px 0; }
	100% { background-position: -114px 0;}
}

@keyframes gw3netInner {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

.gw3 .plotWrapper .net span {
	font-size: 12px;
	line-height: 16px; }

.gw3 .plotWrapper .ico1 {
	top: 42px;
	right: 32px;
    animation: gw3ico1 1s ease-in-out infinite alternate;}

.gw3 .plotWrapper .ico2 {
	top: 190px;
	right: 147px;
    animation: gw3ico2 1s ease-in-out infinite alternate;}

@keyframes gw3ico1 {
    0% {top: 42px;}
    100% {top: 52px;}
}

@keyframes gw3ico2 {
    0% {top: 190px;}
    100% {top: 200px;}
}

/* work1 */
.gw4 .plotWrapper {
	top: 127px;
	left: 173px;
	width: 350px; }

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

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

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

.gw4 .line3 {
	margin-top: 0px;
	margin-left: -88px; }

.gw4 .line4 {
	margin-top: -5px;
	margin-left: -120px; }

.gw4 .line5 {
	margin-top: 20px;
	margin-left: -270px; }

.gw4 .line6 {
	margin-top: 18px;
	margin-left: -300px; }

.gw4 .line5 p ,
.gw4 .line6 p {
	right: -46px;
	color: #4d5269; }

.gw4 .plotWrapper .net {
	width: 336px;
	padding: 2px 0 4px 10px;
	color: #4d5269;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	box-sizing: border-box;
	background: url(../trueperformance/images/bg_graph_net.png) no-repeat -469px 0; }

.gw4 .plotWrapper.on .net {
	animation: gw4net 1s ease-in-out forwards alternate; }

.gw4 .plotWrapper.on .netInner {
	position: relative;
	z-index: 1;
	animation: gw4netInner 1s ease-in-out forwards alternate; }

@keyframes gw4net {
	0% { background-position: -469px 0; }
	40% { background-position: -469px 0; }
	100% { background-position: -316px 0;}
}

@keyframes gw4netInner {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

.gw4 .plotWrapper .net span {
	font-size: 12px;
	line-height: 16px; }

.gw4 .plotWrapper .ico1 {
	top: 7px;
	right: 170px;
    animation: gw4ico1 1s ease-in-out infinite alternate;}

.gw4 .plotWrapper .ico2 {
	top: 155px;
	right: 166px;
    animation: gw4ico2 1s ease-in-out infinite alternate;}

.gw4 .plotWrapper .netCorner {
	right: 184px; }

@keyframes gw4ico1 {
    0% {top: 7px;}
    100% {top: 27px;}
}

@keyframes gw4ico2 {
    0% {top: 155px;}
    100% {top: 175px;}
}

/* work2 */
.gw5 .plotWrapper {
	top: 127px;
	left: 173px;
	width: 350px; }

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

.gw5 .line1 {
	margin-top: 12px;
	margin-left: -80px; }

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

.gw5 .line3 {
	margin-top: 0px;
	margin-left: -88px; }

.gw5 .line4 {
	margin-top: -5px;
	margin-left: -120px; }

.gw5 .line5 {
	margin-top: 20px;
	margin-left: -270px; }

.gw5 .line6 {
	margin-top: 18px;
	margin-left: -300px; }

.gw5 .line1 .val,
.gw5 .line3 .val {
	font-size: 20px;
	letter-spacing: -1.5px; }

.gw5 .line5 p ,
.gw5 .line6 p {
	right: -52px;
	color: #4d5269; }

.gw5 .plotWrapper .net {
	width: 336px;
	padding: 2px 0 4px 10px;
	color: #4d5269;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	box-sizing: border-box;
	background: url(../trueperformance/images/bg_graph_net.png) no-repeat -469px 0; }

.gw5 .plotWrapper.on .net {
	animation: gw5net 1s ease-in-out forwards alternate; }

.gw5 .plotWrapper.on .netInner {
	position: relative;
	z-index: 1;
	animation: gw5netInner 1s ease-in-out forwards alternate; }

@keyframes gw5net {
	0% { background-position: -469px 0; }
	40% { background-position: -469px 0; }
	100% { background-position: -316px 0;}
}

@keyframes gw5netInner {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

.gw5 .plotWrapper .net span {
	font-size: 12px;
	line-height: 16px; }

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

.gw5 .plotWrapper .ico2 {
	top: 155px;
	right: 182px;
    animation: gw5ico2 1s ease-in-out infinite alternate;}

.gw5 .plotWrapper .netCorner {
	right: 174px; }

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

@keyframes gw5ico2 {
    0% {top: 155px;}
    100% {top: 175px;}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.gw6 .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;}
}



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

.gw6 .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;}
}
.gw6 .line2_2 {
	bottom: 14px;
	left: 54px;
	width: 2px;
	height: 173px;
	opacity: 0; }

.gw6 .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;}
}

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

.gw6 .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;}
}

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

.gw6 .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;}
}

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

.gw6 .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;}
}


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

.gw6 .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(../trueperformance/images/bg_frameLeft.png) no-repeat 0 center; }

.speechWrapper .frameRight {
	display: inline-block;
	padding: 35px 90px 35px 0;
	background: url(../trueperformance/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: 0 10px;
	color: #fff;
	font-size: 20px;
	line-height: 30px;
	border-radius: 5px;
	vertical-align: text-bottom;
	background-color: #4d5269; }

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

.modelWrapper .tableWrapper {
	margin-top: 35px; }

.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: 50%;
	padding: 20px 0 30px;
	text-align: center; }

.modelWrapper li:first-child {
	border-right: 1px solid #ddd; }

.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; }