@charset "UTF-8";

/* =========================================================
 imgvisual
========================================================= */
.gray,.gray .summary,.gray #summary{background-color: #f2f2f2;}
#imgvisual .imgvisual{
	background: url('../images/image-ai.jpg') no-repeat center center #030406;position: relative;
	-webkit-background-size: auto 100%;-moz-background-size: auto 100%;
	-ms-background-size: auto 100%;-o-background-size: auto 100%;background-size: auto 100%;
}
#imgvisual .copy{
	width: 100%;position: absolute;top: 50%;left: 50%;color: #fff;text-align: center;
	-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);
}
#imgvisual .copy .jp{ padding-bottom: 1.5em; }
#imgvisual .copy .en{ font-family: "UniversBQ Bold", sans-serif; }

.pcblock{display: block;}
.spblock{display: none;}
/*//////////////////////////
PC-TAB
//////////////////////////*/
@media only screen and (min-width:768px) {
	/* =========================================================
	 imgvisual
	========================================================= */
	#imgvisual .imgvisual{
		padding-top: 28.6%;-webkit-background-attachment: fixed;-moz-background-attachment: fixed;
		-ms-background-attachment: fixed;-o-background-attachment: fixed;background-attachment: fixed;
	}
	#imgvisual .copy{ line-height: 1.5; }
	#imgvisual .copy .jp{ font-size: 24px; }
	#imgvisual .copy .en{ font-size: 18px; }

	#container._colornav #header{ background: #373737; }
	#header._hide{
        -webkit-transform: translateY(0);-moz-transform: translateY(0);
        -ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);
    }
	.detail-area {
	    min-width: 1125px;
	    width: 80%;
	    margin-left: auto;
	    margin-right: auto;
	    padding-bottom: 40px;
	}
	.ai-area{
	    text-align: center;
		max-width: 73%;
		margin-left: auto;
		margin-right: auto;
	}
	.ai-area .title:last-of-type{
		padding-top: 2.8em;
	}
	.add-block .title:last-of-type{
		padding-top: 0;
	}

	#summary .ai-performance{
		padding-top: 80px;
    	padding-bottom: 50px;
	}
	#summary .ai-detail-area{
		padding-bottom: 80px;
	}
	#summary .ai-performance .title{
		padding-bottom: 50px;
	}
	#summary .ai-performance .text-middle{
		line-height: 1.5;
	}
	#summary .ai-performance .title:nth-of-type(2){
		padding: 45px 0 30px;
	}
	.ai-box-area{
		display: flex;
		justify-content: space-between;
	}
	.ai-box{
		width: 46.4%;
	}
	.text-set{
		text-align: left;
	}
	.ai-box .text-set .title{
		text-align: left;
		padding: 30px 0 16px;
		line-height: 1;
	}
	#summary .add-content ul{
		overflow: hidden;
		padding-top: 0;
	}
	#summary .add-content .text{
		clear: both;
	}
	#summary .add-content ul{
	    display: flex;
		justify-content: space-between;
	}
	#summary .add-content ul .text{
		color: #404040;
	    font-size: 11px;
	    line-height: 15px;
	    margin: 15px 0 0;
	}
	#summary .add-content ul li{
		float: none;
		width: 27.1%;
		position: relative;
	}
	#summary .add-content ul li .trim{
		position: relative;
	}
	#summary .add-content ul li .trim:after{
		content: "→";
		font-size: 20px;
		position: absolute;
		top: 50%;
    	left: 113%;
	}
	#summary .add-content ul li:last-of-type .trim:after{
		display: none;
	}
	#summary .add-content ul li .li-in{
		padding-left: 0;
		padding-right: 0;
	}
	.after-text{
		width: 94%;
		max-width: 73%;
	    margin-left: auto;
	    margin-right: auto;
	    margin-top: 50px;
	    font-size: 13px;
    	line-height: 20px;
	}
	.after-text span{
	    font-size: 11px;
	}
}

/*//////////////////////////
SP
//////////////////////////*/
@media only screen and (max-width:767px) {
	/* =========================================================
	 imgvisual
	========================================================= */
	#imgvisual .imgvisual{
		padding-top: 59%;background-position: 18% center;
	}
	#imgvisual .copy .jp{ font-size: 14px; }
	#imgvisual .copy .en{ font-size: 10px; }

	/* =========================================================
	 detail
	========================================================= */
	#details .details li .img,
	#details .details li .text-set .data{ display: none; }

	.pcblock{display: none;}
	.spblock{display: block;}

	#summary .ai-performance .title:nth-of-type(2){
	    padding-top: 12%;
	}

	.ai-box{
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 8%;
	}

	.ai-box:nth-of-type(2){
		padding-bottom: 13%;
	}

	.ai-box .text-set .title{
		padding-top: 1.8em;
		padding-bottom: 1.1em;
		text-align: left;
	}

	.ai-box .text-set .text{
		line-height: 1.5;
	}

	#summary .ai-performance .title{
		letter-spacing: 0.9px
	}
	#summary .ai-performance .text-middle{
		line-height: 1.5;
	}

	#summary .block-item{padding-top: 0;}
	#summary .block-item li .trim{
		padding-left:0;
		padding-right: 0; 
	}
	#summary .add-content ul .text{
		color: #888888;
	    font-size: 11px;
	    line-height: 15px;
	    margin: 10px 0 0;
	}
	#summary .add-content ul li .trim{
		position: relative;
	}
	#summary .add-content ul li .trim:after{
		content: "↓";
	    width: 16px;
	    height: 23px;
	    font-size: 20px;
	    position: absolute;
	    top: 116%;
	    left: 0;
	    right: 0;
	    margin: 0 auto;
	}
	#summary .add-content ul li:last-of-type .trim:after{
		display: none;
	}

	.after-text{
	    margin-top: 50px;
	    font-size: 10px;
    	line-height: 16px;
	}

}