/* ==================================================

	reset

================================================== */

#main_content img {
	width: 100%;
}
@media screen and (min-width: 1024px) {
	#main_content img {
		width: auto;
	}
}

#main_content h2,
#main_content h3,
#main_content h4 {
	font-weight: normal;
}

li {
	list-style-type: none;
}

/* ==================================================

	common

================================================== */

.sub_content {
	margin-top: 80px;
}


.sub_title {
	color: #c8932b;
	font-size: 1.8rem;
	font-weight: normal;
}
@media screen and (min-width: 768px) {
	.sub_title {
		font-size: 25px;
	}
}

.reading p {
	line-height: 1.8;
}
.reading * + p {
	margin-top: 1.5rem;
}

.fcccc {
	color: #ccc;
}
#main_content .bg000 {
	color: #fff;
}



/* ==================================================

	main

================================================== */

.main .copy {
	font-size: 1.4rem;
}

.main .copy_area h2 {
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 1.2;
	letter-spacing: 1px;
}
.main .copy_area .text {
	margin-top: .5rem;
	font-size: 1.8rem;
	letter-spacing: 1px;
}
.main .btn_area {
	line-height: 1.3;
}
.main .price {
	font-weight: normal;
}
.main .price > span {
	font-size: 3rem;
}
.main .footnote_area {
	text-align: center;
}

@media screen and (max-width: 1023px) {
	.main .copy_area {
		margin-top: 2rem;
		text-align: center;
	}
	.main .btn_area {
		margin-top: 2rem;
		text-align: center;
	}
	.main .footnote_area {
		padding: 2rem 1.6rem;
	}
}

@media screen and (min-width: 768px) {
	.main .copy {
		font-size: 1.8rem;
		letter-spacing: 4px;
	}
	.main .copy_area h2 {
		font-size: 3.8rem;
	}
	.main .copy_area .text {
		font-size: 2.5rem;
	}
}

@media screen and (min-width: 1024px) {
	.main {
		position: relative;
		height: 500px;
	}
	.main .copy_area {
		position: absolute;
		top: 30px;
		left: 30px;
	}
	.main .copy {
		font-size: 20px;
	}
	.main .copy_area h2 {
		line-height: 1.4;
	}
	.main .btn_area {
		position: absolute;
		left: 30px;
		bottom: 100px;
	}
	.main .footnote_area {
		position: absolute;
		left: 10px;
		bottom: 10px;
	}
	.main .btn_area {
		font-size: 15px;
	}
	.main .price > span {
		font-size: 35px;
	}
	.main .gda_area {
		position: absolute;
		top: 30px;
		right: 30px;
	}
}



/* ----------------------------------------
	intel
---------------------------------------- */

.intel {
	display: flex;
	justify-content: center;
	align-items: center;
}
.intel p {
	margin-left: 1.5rem;
}

@media screen and (max-width: 1023px) {
	.intel img {
		width: 50px !important;
	}
	.intel p {
		font-size: 1.2rem;
	}
}

@media screen and (min-width: 1024px) {
	.intel img {
		width: 60px;
	}
	.intel p {
		font-size: 13px;
	}
    .intel {
        justify-content: flex-start;
    }
}



/* ==================================================

	chara

================================================== */

#content_graphics h2:not(.hLine),#content_performance h2,#content_entertainment h2 {
	font-size: 24px;
	margin-bottom: 15px;
}
.chara_icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80px;
	height: 80px;
	background: #c8932b;
	border-radius: 1rem;
	color: #fff;
	line-height: 1.2;
	text-align: center;
}
.chara_box {
	background: #f2f2f2;
	padding: 1rem;
}
.bgf2f2f2 .chara_box {
	background: #fff;
}
.title_bob {
	position: relative;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	text-align: center;
}
.title_bob::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 5rem;
	height: .4rem;
	background: #c8932b;
}
@media screen and (min-width: 768px) {
	.chara_box {
		padding: 1.5rem;
	}
}
@media screen and (min-width: 1024px) {
	#content_graphics h2:not(.hLine),#content_performance h2,#content_entertainment h2 {
		font-size: 36px;
	}
	.chara_box {
		padding: 20px;
	}
}



/* ----------------------------------------
	twentytwenty
---------------------------------------- */

.twentytwenty-horizontal .twentytwenty-before-label:before,
.twentytwenty-horizontal .twentytwenty-after-label:before {
	top: 0;
	margin-top: 0;
}
.twentytwenty-horizontal .twentytwenty-before-label:before { left: 0; }
.twentytwenty-horizontal .twentytwenty-after-label:before { right: 0; }
.twentytwenty-before-label:before,
.twentytwenty-after-label:before {
	background: rgba(0,0,0,.5);
	border-radius: 0;
}
.twentytwenty-before-label:before { content: "Standard Dynamic Range"; }
.twentytwenty-after-label:before { content: "High Dynamic Range"; }



/* ==================================================

	RTX STUDIO desktop

================================================== */

#contents_rtx_studio p:not(.footnote) {
	letter-spacing: 1px;
}
#contents_rtx_studio p + p {
	margin-top: 10px;
}
#contents_rtx_studio .button {
	background-color: #76b900;
}
#contents_rtx_studio h2.rtx_title {
	font-size: 24px;
	margin-bottom: 15px;
}
.rtx_studio {
	background: #76b900;
}
.rtx_studio h2 {
	color: #fff;
	line-height: 1.2;
}
.rtx_studio h2 span {
	font-size: 40px;
}
.rtx_studio p {
	color: #004832;
}
@media screen and (min-width: 1024px) {
	#contents_rtx_studio h2.rtx_title {
		font-size: 36px;
	}
	.rtx_studio h2 span {
		font-size: 60px;
	}
	.rtx_studio {
		height: 480px;
	}
	.rtx_studio p {
		color: #004832;
		font-size: 15px;
	}
}

.ray_tracing {
	background: url(images/m/ray_tracing.jpg) no-repeat top right;
	background-size: cover;
}
.ai_assist {
	background: url(images/m/ai_assist.jpg) no-repeat center;
	background-size: cover;
}
.video_8k {
	background: url(images/m/video_8k.jpg) no-repeat top right;
	background-size: cover;
}

@media screen and (min-width: 1024px) {
	.ray_tracing {
		background: url(images/ray_tracing.jpg) no-repeat;
		height: 416px;
	}
	.ai_assist {
		background: url(images/ai_assist.jpg) no-repeat;
		height: 430px;
	}
	.ai_assist > div {
		width: 505px;
	}
	.video_8k {
		background: url(images/video_8k.jpg) no-repeat;
		height: 430px;
	}
}

/* 210205 */
#contents_rtx_studio .acco_basic .acco_trigger {
    background: #000;
    padding: 1rm 2rem;
    font-size: 1.6rem;
}
.acco_basic .acco_trigger::after {
	content: "\FF0B";
	font-size: 3rem;
    transition: .3s;
}
.acco_basic .acco_trigger.acco_open::after {
	content: "\FF0B";
    transform: translateY(-50%) rotate(-45deg);
}

@media screen and (min-width: 768px) {
    #contents_rtx_studio .acco_basic .acco_trigger {
        text-align: center;
        font-size: 24px;
    }
    .acco_basic .acco_trigger::after {
        font-size: 4rem;
    }
}



/* ==================================================

	performance

================================================== */

#contents_performance .perf_tab_navi {;
	text-align: center;
	cursor: pointer;
}
#contents_performance .perf_tab_navi li div {;
	font-size: 16px;
	font-weight: 600;
	padding-top: 5px;
	padding-bottom: 14px;
	line-height: 1.2;
}
#contents_performance .perf_tab_navi li img {;
	width: auto;
	height: 5rem;
}
#contents_performance .perf_tab_navi li {
	border-bottom: 2px solid #666;
}
#contents_performance .perf_tab_navi li.tab_current {
	border-bottom: 5px solid #76b900;
}
#contents_performance .perf_tab_navi li:nth-child(n+4) {
	margin-top: 20px;
}
@media screen and (min-width: 768px) {
	#contents_performance .perf_tab_navi li:nth-child(n+4) {
	margin-top: 0;
	}
}
#contents_performance .tab_content {
	text-align: center;
	padding: 40px 0;
}
#contents_performance .tab_content img:first-child {
	width: auto;
	height: 8rem;
}
#contents_performance .tab_content h3 {
	font-size: 24px;
	margin: 10px 0 20px;
}
#contents_performance .tab_content h4 {
	font-size: 24px;
}
#contents_performance .tab_content p {
	font-size: 14px;
	margin: 0 0 8px;
}

@media screen and (min-width: 768px) {
	.w140_md {
		width: 140px!important;
	}
}

/* ==================================================

	gallery

================================================== */

.gallery > li {
	padding: 1rem;
	background: #f2f2f2;
	box-shadow: 0 0 .5rem 0 rgba(0,0,0,.2);
	border-radius: .5rem;
	color: #5a5a5a;
}

.gallery_gda {
	padding: 1rem;
	background: #000;
	box-shadow: 0 0 .5rem 0 rgba(0,0,0,.2);
	border-radius: .5rem;
	color: #5a5a5a;
    margin-bottom: 4rem;
}
.gallery_gda h4 {
	position: relative;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	letter-spacing: .2rem;
	text-align: center;
    margin-top: 2rem;
    font-size: 1.8rem;
}
.gallery_gda h4::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 4rem;
	height: .3rem;
	background: #767676;
}
@media screen and (min-width: 768px) {
	.gallery_gda {
        padding: 1.5rem 2rem;
    }
}
@media screen and (min-width: 1024px) {
	.gallery_gda {
        padding: 30px;
    }
}



/* ==================================================

	view

================================================== */

.view_title {
	background: #c8932b;
}

@media screen and (min-width: 768px) {
	.view_photo {
		display: flex;
		align-items: center;
		height: 320px;
	}
	.view_photo img {
		max-height: 320px;
		object-fit: contain;
	}
}

@media screen and (min-width: 1024px) {
	.view_area {
		padding: 0;
	}
	.view_list {
		display: block;
	}
	.size .view_list {
		display: flex;
	}
	.view_list > div:nth-of-type(n+2) {
		margin-top: 40px;
		border-top: 1px solid #c8932b;
	}
	.size .view_list > div:nth-of-type(n+2) {
		margin-top: 0;
		border-top: none;
	}
	.view_title {
		width: 290px;
		padding: 5px;
		font-size: 22px;
		text-align: center;
		letter-spacing: 6px;
	}
	.view_list > div {
		width: 100%;
	}
	.size .view_list > div {
		width: 49%;
	}
	.view_inner {
		display: flex !important;
	}
	.size .view_inner {
		display: block !important;
	}
	.view_photo {
		display: block;
		order: 2;
		width: 700px;
		height: auto;
		margin-left: auto;
	}
	.size .view_photo {
		width: 100%;
		order: 1;
	}
	.view_photo img {
		max-height: none;
	}
	.size .view_photo img {
		width: 100%;
	}
	.view_detail {
		order: 1;
		width: 290px;
		margin-top: 20px;
		padding: 0 10px;
		background: none;
	}
	.size .view_detail {
		order: 2;
		width: 100%;
		padding: 20px 15px;
		background: linear-gradient(to bottom, #f2f2f2, #fff);
		font-size: 13px;
	}
	.view_detail_list > li {
		position: relative;
		margin: 0 0 10px 25px;
		padding-bottom: 10px;
		color: #c8932b;
	}
	.view_detail_list > li::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: -25px;
		width: 270px;
		height: 2px;
		border-bottom: 1px dotted #333;
	}
	.view_footer {
		padding: 0 10px;
	}
}