@charset "utf-8";

/* --------------------------------
   □ performance
-------------------------------- */

ul.tab{
    font-size: 14px;
}

.accentArea{
    
}

.accentArea p.accent_text{
    position: relative;
    background: url("../../../images/concept/performance/accent.jpg") 50% 50% no-repeat;
    padding: 35px 0;
    background-size: cover;
    text-align: center;
    margin-bottom: 0;
}

.center_text{
    padding: 80px 0;
}

.center_text p{
    text-align:center; 
}

#accent .area .text{
    font-size: 19px;
    font-weight: 700;
    line-height: 2;
}

#accent .area .text span.marker{
    background-image: linear-gradient(transparent 70%, #efecbd 70%);
    background-repeat: no-repeat;
}

#type{
    padding: 80px 0;
    background: #f8f7f2;
}

#type .explain{
    width: 37%;
}

#type .explain h3{
    margin-bottom: 25px;
}

#type .explain p.description{
    margin-bottom: 40px;
    font-size: 23px;
}

#type .explain p.img{
    text-align: center;
}
#type section{
    margin-bottom: 80px;
}

#type section:last-child{
    margin-bottom: 0;
}

#type section .type.mb40{
    margin-bottom: 40px;
}

#type section p.buttonStyle{
    margin-bottom: 0;
    clear: both;
}

#type section p.buttonStyle a{
    background: #fff;
    display: block;
    color: #623333;
    border: 2px solid #623333;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    position: relative;
    font-weight: 700;
    font-size: 18px;
}

#type section p.buttonStyle a:hover{
    opacity: 0.7;
}

#type section p.image{
    margin-bottom: 0;
}

#type section.right_img .explain{
    float: left;
}

#type section.left_img .explain{
    float: right;
}

#type section.right_img p.image{
    float: right;
    margin-right: -25px;
}

#type section.left_img p.image{
    float: left;
}

#details{
    padding: 80px 0;
}

#details section.imageArea .area{
	position: relative;
	max-width: 1336px;
	margin:0 0 40px auto;
	box-sizing: border-box;
}

#details span.red{
    color: #e22525;
    font-weight: 700;
}

#details .image{
	width: 100%;
	height: auto;
	text-align: right;
}


	#details .image img{
		width: 750px;
		height: auto;
		object-fit: contain;
	}

#details .explain{
	position: absolute;
	width: 50%;
    max-width: 560px;
    background: #f9f9f5;
    padding: 105px 40px;
	top: 5%;
	bottom: 5%;
	left: 0;
	right: 59% ;
}

#details .explain dl dt{
    font-size: 26px;
    font-weight: 700;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
    margin-bottom: 30px;
}

#details .explain dl dt span{
    background: linear-gradient(transparent 58%, #efc8ae 65%);
}

#details section.imageArea .area.reverse{
	margin:0 auto 40px 0;
}

	#details section.imageArea .area.reverse .explain{
		left: 52%;
		right: 0;
	}

	#details section.imageArea .area.reverse .image{
		text-align: left;
	}

.chapter ul.btn{
	width:1000px;
	margin:0 auto;
	padding: 40px 0;
	border-bottom:2px solid #414141;
    border-top: 2px solid #414141;
}

.chapter ul.btn li{
	float:left;
	width:480px;
	margin-right: 40px;
}

.chapter ul.btn li:last-child{
	margin-right:0;
}

@media only screen and (max-width : 950px) {
	
		ul.tab{
			font-size: 14px;
		}

		.accentArea{
			
		}

		.center_text,#type{
			padding: 50px 4%;
		}

		.center_text p{
			text-align:center; 
		}

		#accent .area .text{
			font-size: 16px;
			line-height: 1.8;
			text-align: left;
		}

		#type .explain{
			width: 100%;
		}
	
		#type .explain p.description {
			margin-bottom: 40px;
			font-size: 20px;
		}	
	
		#type section{
			margin-bottom: 50px;
		}

		#type section .type.mb40{
			margin-bottom: 40px;
		}


		#type section p.buttonStyle a{
			font-size: 14px;
		}

		#type section.right_img .explain{
			float: inherit;
		}

		#type section.left_img .explain{
			float: inherit;
		}

		#type section.right_img p.image{
			float: inherit;
			margin-right: 0;
			width: 100%;
			height: auto;
		}

		#type section.left_img p.image{
			float:  inherit;
			width: 100%;
			height: auto;
		}
	
		#type section.right_img p.image,
		#type section.left_img p.image{
			width: 100%;
			height: auto;
			object-fit: scale-down;
		}

		#details{
			padding: 50px 0;
		}
		
		#details section.imageArea .area{
			margin: 0 auto;
			max-width: inherit;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			padding: 0 4%;
			box-sizing: border-box;
		}

		#details .image{
			width: 100%;
			height: auto;
			text-align: center;
		}


			#details .image img{
				width: 100%;
				height: auto;
				object-fit: contain;
			}

		#details .explain{
			position: static;
			width: 100%;
			max-width: inherit;
			padding: 40px;
		}

			#details section.imageArea .area.reverse .image{
				text-align: center;
			}

			#details .explain dl dt{
				font-size: 2.0rem;
			}
}