﻿



/*-- 

content_productd

====================================================== --*/

#content_productd{
	padding-top:0;
}
#content_productd .headline02{
	text-align:left;
}

/*-- box_main --*/

#content_productd .box_main{
}
#content_productd .box_main ._photo{
	margin-bottom:4rem;
}
#content_productd .box_main ._title{
	max-width:64rem;
	margin:0 auto 4rem;
}
#content_productd .box_main ._text{
	text-align:center;
	font-size:3.4rem;
	line-height:1.5;
	margin-bottom:5rem;
}
/* tb */
@media screen and (max-width:811px){
	#content_productd .box_main ._title{
		max-width:44rem;
		margin-bottom:3rem;
	}
	#content_productd .box_main ._text{
		font-size:2.4rem;
		margin-bottom:3rem;
	}
}
/* sp */
@media screen and (max-width:767px){
	#content_productd .box_main ._photo{
		position:relative;
		width:94vw;
		margin:0 calc(50% - 47vw) 3rem;
	}
	#content_productd .box_main ._text{
		font-size:2rem;
	}
}

/*-- lst_product --*/

#content_productd .lst_product{
	display:flex;
	align-items:stretch;
	justify-content:flex-start;
	gap:3rem;
	flex-wrap:wrap;
}
#content_productd .lst_product_item{
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--c-main-grade);
	color:var(--c-white);
	text-align:center;
	font-size:2.4rem;
	width:calc((100% - 3rem) / 2);
	border-radius:2rem;
	padding:2rem;
	line-height:1.5;
}
/* tb */
@media screen and (max-width:811px){
	#content_productd .lst_product_item{
		font-size:2rem;
	}
}
/* sp */
@media screen and (max-width:767px){
	#content_productd .lst_product{
		gap:1.5rem;
	}
	#content_productd .lst_product_item{
		font-size:1.8rem;
		width:100%;
		padding:1.5rem;
	}
}

/*-- box_product --*/

#content_productd .box_product{
	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
	gap:6%;
}
#content_productd .box_product ._photo{
	width:30%;
}
#content_productd .box_product ._text{
	width:64%;
}
/* tb */
@media screen and (max-width:811px){
	#content_productd .box_product ._photo{
		width:40%;
	}
	#content_productd .box_product ._text{
		width:55%;
	}
}
/* sp */
@media screen and (max-width:660px){
	#content_productd .box_product{
		gap:2rem;
		flex-wrap:wrap;
	}
	#content_productd .box_product ._photo{
		width:100%;
		max-width:40rem;
		margin:0 auto;
	}
	#content_productd .box_product ._text{
		width:100%;
	}
}

/*-- top-button --*/

._top-button{
	position:absolute;
	top:-1rem;
	right:3rem;
	z-index:3;
}
/* tb */
@media screen and (max-width:1000px){
	._top-button{
		top:0.5rem;
		right:3rem;
	}
}
/* sp */
@media screen and (max-width:767px){
	._top-button{
		position: relative;
		top:inherit;
		right:inherit;
		margin-bottom:4rem;
	}
}



/*-- 

case

====================================================== --*/

.lst_case{
	display:flex;
	align-items:stretch;
	justify-content:flex-start;
	flex-wrap:wrap;
	gap:4rem;
}
.lst_case_item{
	width:calc((100% - 4rem * 3) / 4);
	display:flex;
	align-items:stretch;
	justify-content:flex-start;
	flex-direction:column;
	overflow:hidden;
	background:var(--c-white);
	border-radius:2rem;
	box-shadow:0 0 1rem 1rem rgba(0,0,0,0.05);
	text-decoration:none!important;
	transition:box-shadow .2s ease,transform .2s ease;
}
.lst_case_item:hover{
	opacity:1;
	transform:translate(0,0.2rem);
	box-shadow:0 0 1rem 0.2rem rgba(0,0,0,0.05);
}
.lst_case_item a{
	padding:2rem;
	line-height:1.5;
	text-decoration:none;
}
.lst_case_inner ._image{
		aspect-ratio:3 / 2;
}
.lst_case_item figcaption{
	font-size:1.4rem;
	text-align:center;
	padding:1rem 0;
}
/* tb */
@media screen and (max-width:1000px){
	.lst_case{
		justify-content:flex-start;
		gap:4rem;
	}
	.lst_case_item{
		width:calc((100% - 4rem * 2) / 3);
	}
	.lst_case_item a{
		padding:1.5rem;
	}
}
/* sp */
@media screen and (max-width:767px){
	.lst_case{
		gap:3rem;
	}
	.lst_case_item{
		width:calc((100% - 3rem) / 2);
	}
	.lst_case_item a{
		padding:1rem;
	}
}
