@charset "UTF-8";
/* CSS Document */
.main_vi{
	background: url("../img/lower/product/bg.png");
	background-size: cover;
	background-position: top center;
}
.contents2{
	background: url("../img/lower/product/bg2.png");
	background-size: cover;
	background-position: top center;
}

#product .txt_area2{
	margin-bottom: 80px;
}
.txt_area .fb{
	font-weight: 600;
	margin-bottom: 32px;
}
.txt_area .list{
	margin-top: 18px;
}
.txt_area .list dl{
	display: flex;
	margin-bottom: 20px;
}
.txt_area .list dl dt{
	width: 20%;
	position: relative;
	padding-left: 10px;
	font-size: 1.6rem;
	font-weight: 600;
}
.txt_area .list dl dt::before{
	content: "";
	width: 4px;
	height: 50%;
	background: #11BAE7;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
}
.txt_area .list dl dd{
	width: 100%;
	font-size: 1.6rem;
}
#product .contents2{
	padding: 80px 5.83vw;
	margin-bottom: 80px;
}
#product .contents2 h2{
	color: #fff;
}
#product .product_btn{
	display: flex;
}
#product .product_btn a{
	background: url("../img/lower/product/bg6.png");
	background-size: cover;
	background-position: left;
	position: relative;
	width: 201px;
	height: 336px;
}
#product .product_btn a::before{
	content: "";
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.3s;
}
#product .product_btn a:hover::before{
	background: rgba(0,0,0,0);
}
#product .product_btn a:nth-child(2){
	background: url("../img/lower/product/bg3.png");
	background-size: cover;
	background-position: left;
}
#product .product_btn a:nth-child(3){
	background: url("../img/lower/product/bg4.png");
	background-size: cover;
	background-position: left;
}
#product .product_btn a:nth-child(4){
	background: url("../img/lower/product/bg7.png");
	background-size: cover;
	background-position: left;
}
#product .product_btn a:nth-child(5){
	background: url("../img/lower/product/bg5.png");
	background-size: cover;
	background-position: left;
}
#product .product_btn .link_cnt{
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 2;
	display: flex;
	align-items: flex-end;
}
#product .product_btn a p{
	color: #fff;
	font-size: 1.8rem;
	font-weight: 600;
	margin-right: 10px;
}
#product .inquery .fb{
	margin-bottom: 16px;
}
#product .inquery_btn a{
	background: #11BAE7;
	padding: 12px;
	text-align: center;
	border-radius: 50px;
	max-width: 280px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
	position: relative;
}
#product .inquery_btn a:hover{
	background: #fff;
}
#product .inquery_btn a p{
	color: #fff;
	font-size: 1.6rem;
}
#product .inquery_btn a:hover p{
	color: #11BAE7;
}
#product .inquery_btn .link_cnt .Circle{
	border-color: #fff;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-10px,-50%);
}
#product .inquery_btn .link_cnt .Circle.active .Circle_overlay{
	background: #fff;
}
#product .inquery_btn .link_cnt .Circle.active svg{
	filter: #11BAE7;
	filter: invert(1);
	filter: invert(66%) sepia(67%) saturate(749%) hue-rotate(164deg) brightness(92%) contrast(92%);
}

/*pr*/
#pr .main_vi::before{
	content: "";
	width: 384px;
	height: 364px;
	background: url("../img/lower/product/pr1_bg.png");
	background-size: 100%;
	position: absolute;
	top: 0;
	right: 50%;
	transform: translate(90%, 0px);
}
#pr .contents{
	width: 75.3%;
}
#pr .contents .cnt{
	padding-bottom: 56px;
	border-bottom: solid 1px #CDCDCD;
}
#pr .contents .cnt:last-child{
	padding-bottom: 0px;
	border-bottom: none;
}
#pr .column{
	gap:0px;
	justify-content: space-between;
}
#pr .column img{
	width: calc(50% - 16px);
	margin-top: 32px; 
}
#pr .img{
	margin-top: 32px;
}
#pr .img img{
	width: 100%;
}

/*pr2*/
#pr.pr2 .main_vi::before{
	content: "";
	width: 488px;
	height: 364px;
	background: url("../img/lower/product/pr2_bg.png");
	background-size: 100%;
	position: absolute;
	top: 0;
	right: 50%;
	transform: translate(90%, 0px);
}

/*pr3*/
#pr.pr3 .main_vi::before{
	content: "";
	width: 488px;
	height: 364px;
	background: url("../img/lower/product/pr4_bg.png");
	background-size: 100%;
	position: absolute;
	top: 0;
	right: 50%;
	transform: translate(90%, 50px);
}
.pr3 .column2{
	display: flex;
	margin-top: 32px;
}
.pr3 .column2 .column_img{
	width: calc(50% - 16px);
}
.pr3 .column2 .column_img img{
	width: 100%;
}
.pr3 .column2 .column_txt{
	margin-left: 32px;
}
.pr3 .column2 .column_txt p{
	font-size: 1.4rem;
	line-height: 2;
}

/*pr4*/
#pr.pr4 .main_vi::before{
	content: "";
	width: 488px;
	height: 364px;
	background: url("../img/lower/product/pr3_bg.png");
	background-size: 100%;
	position: absolute;
	top: 0;
	right: 50%;
	transform: translate(90%, 20px);
}
.pr4 .fb2{
	margin-bottom: 26px;
	margin-top: 32px;
}

/*or4*/
#pr.or4 .main_vi::before{
	content: "";
	width: 384px;
	height: 364px;
	background: url("../img/lower/product/or4_bg.png");
	background-size: 100%;
	position: absolute;
	top: 0;
	right: 50%;
	transform: translate(90%, 0px);
}
/*820*/
@media only screen and (max-width: 820px) {
	#pr .main_vi::before,#pr.pr2 .main_vi::before{
		display: none;
	}
	#product .product_btn {
        flex-wrap: wrap;
    }
    /* 最初の a 要素は 1 カラム */
    #product .product_btn a:first-child {
        width: 100%;
		background: url("../img/lower/product/bg6_sp.png");
		background-size: cover;
    }
    /* 2 番目以降は 2 カラム */
    #product .product_btn a:not(:first-child) {
        width: calc(50%); /* 2カラムにする */
    }
	#product .product_btn a::before{
		background: rgba(0, 0, 0, 0.4);
	}
	#product .product_btn a p{
		font-size: 1.6rem;
	}
	#product .inquery{
		text-align: center;
	}
	#product .inquery_btn a{
		justify-content: center;
		margin: 0 auto;
	}
}
/*sp*/
@media only screen and (max-width: 767px) {
	.main_vi {
		background: url("../img/lower/product/bg.png");
		background-size: cover;
		background-position: left;
	}
	.contents2 {
		background: url(../img/lower/product/bg2_sp.png);
		background-size: cover;
		background-position: bottom right;
	}
	.txt_area .fb{
		font-size: 1.8rem;
	}
	
	.txt_area .list{
		margin-top: 30px;
	}
	.txt_area .list dl{
		display: block;
		margin-bottom: 20px;
	}
	.txt_area .list dl dt{
		margin-bottom: 8px;
		line-height: 1;
		width: 100%;
	}
	.txt_area .list dl dt::before{
		height: 60%;
	}
	
	/*pr1*/
	#pr .contents{
		width: auto;
	}
	#pr .column img{
		width: 100%;
		margin-top: 32px; 
	}
	
	/*pr3*/
	.pr3 .column2{
		display: block;
		margin-top: 32px;
	}
	.pr3 .column2 .column_img{
		width: 100%;
	}
	.pr3 .column2 .column_txt{
		margin-left: 0px;
	}
}