/***********************
 リセット　初期設定
***********************/

.con_box p,
.con_box li,
.con_box dt,
.con_box dd{
    line-height: 1.6 !important;
    letter-spacing: 0.05em !important;
	font-size: var(--size-14-16);
	br {
		margin-bottom:0;
	}
}

main {
ul,
li,
dl,
dt,
dd {
	list-style:none;
	text-indent:0;
	}

}
ul {
/* 	margin: 0 auto !important; */
}
a,a:hover,a:link {
	text-decoration:none;
}

/***********************
 旧製品ページ上書き
***********************/
.l-contents,
.l-contents__inner {
	display: block !important;
	margin:initial !important;
	padding:initial !important;
	width: 100% !important;
	.p-service-entry__header {
		margin-bottom: 0;
		h1 {
			display:none;
		}
	}
}
.l-page-header,
.l-secondary {
	display:none;
}

/***********************
 製品ページトップ
***********************/
.p-cover {
	height: clamp(300px, 209.091px + 24.242vw, 500px);
	background-size:contain;
	background-position-y: clamp(200px, 213.636px + -3.636vw, 170px);
	border-bottom:1px solid #eee;
}

.p-cover:before {
	background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.9) 100%);
}

.p-cover__inner {
	position:relative;
	display:block;
	width: min(100%, 1180px);
	margin:0 auto;
	padding:var(--size-30-50) var(--size-20-40) 0;
}
.p-cover h1 {
/* 	position:absolute;
    top: 15%;
    left:0; */
	margin: var(--size-20-40) 0 var(--size-10-20);
    transform: translateY(-30%);
	font-size: clamp(22px, 15.636px + 1.697vw, 36px);
	font-family: auto;
	font-weight:600;
	padding-top:10px;
	line-height:1.35;
	&:before {
		content: "";
		display: inline-block;
		background: url(/wp/wp-content/uploads/2023/09/logo_koujiyasan.png) no-repeat;
		/* padding-top: 3em; */
		background-size: contain;
		filter: drop-shadow(1px 1px 1px white) drop-shadow(-1px -1px 1px white) drop-shadow(-1px 1px 1px white) drop-shadow(1px -1px 1px white);
		width: clamp(150px, 5.114rem + 18.18vw, 300px);
		height:100%;
		position: absolute;
		left: 0;
		bottom: clamp(15px, 5.909px + 2.424vw, 35px);
	}
}

.p-cover .p-cover__sub {
/* 	position:absolute;
    top: clamp(130px, 120.909px + 2.424vw, 150px);
    left:0; */
	margin:0 ;
	width: min(100%, 600px);
/* 	font-family: auto; */
	font-size:clamp(16px, 0.864rem + 0.68vw, 22px);
/* 	width: max(320px, 50%); */
/* 	width:clamp(320px, 12.614rem + 31.52vw, 580px); */
	text-shadow:0px 0px 6px rgba(0, 0, 0, 0.85);
	line-height:1.6;
}

/***********
 main
***********/

.l-contents__inner {
	position:relative;
	margin-top:clamp(25px, 0.852rem + 3.03vw, 50px);
	.img_pc_sysytem {
		position:relative;
		margin:0;
	}
	.img_pc_sysytem img {
		position:absolute;
		bottom:-30px;
		right:0;
		width:max(250px, 45%);
	}
	.form_box {
		margin:0 auto;
		padding:var(--size-30-50) 0;
		text-align:center;
		.form_lead {
			font-size:var(--size-16-20);
			font-weight:600;
			margin-bottom:var(--size-15-20);
			padding: 15px;
			line-height:1.6;
		}
	}
}

.con_box {
	margin:0 auto;
	padding:var(--size-30-50) 0;
	text-align:center;
	margin: 0 calc(50% - 50vw);
    width: 100vw;
	&:nth-child(odd) {
		background: #f1f3f7;
		background-size: 100vw;
	}
	&:last-of-type {
		border-bottom:1px solif #ddd;
		box-shadow:0px 3px 7px -2px rgba(0, 0, 0, 0.15);
	}
	.con_inner {
		max-width: 1180px;
		margin:0 auto;
		padding:0 var(--size-20-40);
		> h2 {
			font-size: clamp(20px, 13.636px + 1.697vw, 34px);
			font-weight:700;
			margin-bottom:var(--size-20-30);
			&:before {
				content: "-";
				padding-right: 0.3rem;
			}
			&:after {
				content: "-";
				padding-left: 0.3rem;
			}
		}
		+ p {
			font-size: var(--size-15-18);
			margin:0 auto var(--size-30-40);
			max-width:960px;
		}
	}
}

.ttl_kouji {
	width:clamp(200px, 9.659rem + 12.12vw, 300px);
}

.con_box_inner {
	list-style:none !important;
}

[class*="grid_"] {
	display: grid;
	list-style: none;
	padding: 0 2vw 3vh;
	gap:1.5em;
	padding:0;
	margin:0;
	li {
		background-color:#fff;
		border:2px solid #ccc;
		dt {
			.kouji_img {
				width: min(85%, 200px);
				margin: 0 auto;
			}
		}
		dd {
			text-align:left;
			padding-top: var(--size-15-20);
			font-size: var(--size-13-15);
		}
	}
}

.grid_2 {
	/*     grid-template-columns: repeat(2, 1fr); */
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap:1em;
	li {
		padding:var(--size-15-20);
	}
	&.worrie li {
		border:1px solid rgba(var(--clr-main-rgb), 1);
		border-top-width:var(--size-10-15);
		border-bottom-width:var(--size-5-10);
		background:#ffffff url(/wp/wp-content/uploads/2023/09/ico_trouble.png) left 5px bottom 2px no-repeat;
		background-size:120px auto;
		border-radius:10px;
		dl {
			margin: 0;
		}
		dt {
			color:var(--clr-main);
			font-size: var(--size-16-20);
			/* 	color:#4d4600; */
		}
	}
}

.grid_3 {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	li {
		padding:var(--size-15-20);
		/* 	padding-top:80px; */
		display:flex;
		flex-direction: column;
		.con_center {
			margin:0 auto;
			text-align:center;
			dl {
				padding-bottom:var(--size-20-30);
				dd img {
					height: 50px;
				}
				dd:last-child {
					/* 	padding-top:10px; */
				}
			}
		}
	}
}

.grid_2_1 {
    grid-template-columns: 2fr, 1fr;
}

[class*="link_file_"] {
	display:inline-block;
	margin:2px !important;
	padding:.2em .4em;
	background:#faf6ea;
	border-radius:3px;
	font-size: var(--size-12-14) !important;
	white-space: nowrap;
	width:fit-content;
	&.link_file_01 {
		background:#faf6ea;
		border:1px solid #d39500;
		color:#d39500;
	}
	&.link_file_02 {
		background:#e2f4e8;
		border:1px solid #13ba4e;
		color:#13ba4e;
	}
}



.btn_prd {
	margin: var(--size-15-30) auto 0 !important;
	&.btn_grid {
		display:grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		width:min(100%, 640px);
	}
	a {
		display:block;
		width: fit-content;
		margin-top:var(--size-15-20);
		background:var(--clr-main);
		margin:0 auto;
		padding:12px 18px;
		color:#fff;
	}
}

.grid_3 li .btn_prd {
	margin-top: auto !important;
	padding-top:20px;
}


/***** メリット *****/

.grid_merit {
	/* 	display:grid; */
	grid-template-columns: repeat(2, 1fr);
	gap:4vw;
	padding:0 var(--size-30-50);
	@media screen and (max-width: 767px) {
		grid-template-columns: repeat(1, 1fr);
		gap:20px;
		padding:0;
	}
	li {
		position:relative;
		display: flex;
		flex-direction: column;
		background-color:#fff;
		border-width:2px;
		border-style:solid;
		border-color:rgba(255,153,51,1);
		border-radius:var(--size-10-15);
		overflow:hidden;
		dl {
			margin: 0;
		}
		dt {
			/* 	color:#ff0000; */
			background: rgba(255,153,51,1);
			color: #fff;
			padding: var(--size-10-15) 0;
			font-size:clamp(20px, 16.364px + 0.97vw, 28px);
			border-bottom: var(--size-10-15) solid rgba(255,255, 255,.5);
			&:before {
				position:absolute;
				left:0;
				top:0;
				content: "Merit";
				font-size: clamp(50px, 36.364px + 3.636vw, 80px);
				color:rgba(255, 255, 255, .25);
				font-weight:700;
			}
		}
		dd {
			text-align:left;
			padding: var(--size-15-20);
		}
		.merit_image {
			margin:auto 0 0 0;
			img {
				width:100%;
				/* 	height: clamp(100px, 77.273px + 6.061vw, 150px); */
			}
		}
	}
}


/***** 導入事例 *****/
.jirei_box {
	background:#fff;
	border:1px solid #ddd;
	padding:var(--size-20-40);
	> h2 {
		text-align:left;
	}
	.section1 {
		display:grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap:3vw;	
	}
}

.company_left {
	order:1;
	width:100%;
	/* 	margin-bottom:var(--size-15-20); */
	img {
		border:1px solid #eee;
	}
}

.company_right {
	order:2;
	margin:0;
	width:100%;
}

.company_left table,
.company_right table {
	margin-bottom:var(--size-15-20);
	
}

.company_right td {
	text-align:left;
}

.jirei_box .style5a,
.jirei_box .post_row,
.jirei_box .style5a,
.jirei_box .voice_right {
	display:none;
}

.section2 {
	text-align:left;
}

.voice_left {
	width:100%;
	padding-top:20px;
	line-height:1.5;
	p {
		font-weight:600 !important;
		margin-bottom:var(--size-15-20);
		&:before {
			content:"お客様の声";
			background:#ff6666;
			border-radius:3px;
			color:#fff;
			font-size:var(--size-14-16);
			margin-right:7px;
			padding:.2em .7em;
		}
	}
}

.jirei_box_sub {
	padding:var(--size-20-40) 0 0;
	.su-post:hover {
		opacity:.7;
	}
	dt {
		padding-bottom:var(--size-15-20);
		font-size:var(--size-18-22);
	}
}

.jirei_box_sub_inner {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
	padding: 0 !important;
	h2 {
		text-align:center;
		padding:var(--size-10-15) 0; 
	}
}

/***** よくあるご質問 *****/

.faq_box {
	display:flex;
	flex-direction: column;
	margin: 0;
	> li {
		/* 	margin-bottom:var(--size-15-20) !important;
		border-bottom:1px solid #ddd; */
		padding:var(--size-15-20);
		&:nth-child(odd) {
			background:#f5f5f5;
		}
		dl {
			text-align:left;
			dt {
				font-size:var(--size-15-18);
				margin-bottom:15px !important;
				&:before {
					content:"Q";
					font-weight:700;
					font-size:var(--size-20-30);
					color:rgba(var(--clr-main-rgb), .6);
					/* 	color:rgba(0,0,0,.3); */
					padding-right:.3em;
				}
			}
			dd {
				/* 	font-size:var(--size-15-18); */
				padding-left:.5em;
				padding-bottom:var(--size-5-10);
				a {
					white-space: nowrap;
					padding-left:.5em;
					text-decoration:underline;
				}
				p {
					margin-bottom:.5em;
				}
				ul {
					padding-left:var(--size-20-30);
					li {
						list-style:disc;
					}
				}
			}
		}
	}
}

.inst_lead {
	padding-top:var(--size-30-50);
	span {
		font-size:1.2em;
		font-weight:600;
	}
}

/***************************
 * 製品個別ページ
***************************/
.con_product {
	line-height:1.7;
	.con_head {
		background: #222;
		height:500px;
		padding: var(--size-20-30) 15px;
		.head_inner {
			width: min(100%, 1200px);
			margin: 0 auto;
			display: grid;
			gap: var(--size-20-30);
			grid-template-columns: 2fr 3fr;
			.ttl_block {
				order: 2;
				text-align:left;
				color:#fff;
				.catch {

				}
			}
			figure {
				order: 1;
				img {
					width: 100%;
				}

			}
		}
		.kouji_series {
			text-align:left;
			background: rgba(255, 255, 255, .5);
			border-radius: var(--size-5-10);
			padding: var(--size-15-30);
			.sysytem_lst {
				/* 					display:grid; */
			}
		}
	}
	.con_area {
		padding: var(--size-50-70) 15px;
		margin:0 auto;
		text-align:center;
		.con_inner {
			width: min(100%, 1100px);
			margin: 0 auto;
			
		}
		h2 {
			font-size: var(--size-20-40);
			margin-bottom: var(--size-30-50);
			text-align:center;
		}
		.lead {
			width: min(100%, 850px);
			text-align:left;
		}
		.rec_lst {
			display:flex;
			flex-wrap: wrap;
			justify-content: space-around;
			gap: var(--size-15-20);
			width: min(100%, 1000px);
			margin: 0 auto;
			li {
				width: min(100%, 310px);
/* 				flex:3; */
				mark {
					display: block;
					background: #88b5d3;
					width:80px;
					height: 80px;
					margin: 0 auto;
					border-radius:50vh;
					color: #fff;
					font-size: var(--size-15-17);
					font-weight:600;
					line-height:80px;
					span {
						font-size:1.6em;
					}
				}
				dl {
					padding-top: 10px;
					dt {
						font-size:1.2em;
					}
				}
			}
		}
	}
}
.form_block {
	margin:0 auto;
	padding: var(--size-30-50) 15px;
	background: var(--clr-main);
	ul {
		display: flex;
        flex-wrap: wrap;
		justify-content: center;
		gap: 30px;
		
		li {
			width: min(85%, 400px);
			text-align:center;
			.form_txt {
				color: #fff;
				margin-bottom: 15px;
				font-size: var(--size-13-15);
			}
			a {
				display:block;
				background: #fff;
				border-radius: 50vh;
				padding: var(--size-15-20);
				font-size: var(--size-15-20);
				font-weight:600;
			}
		}
	}
}
.func_lst {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
	gap: var(--size-20-40);
	width: min(100%, 900px);
	margin: 0 auto;
	> div {
		display:flex;
		flex-direction:column;
		gap: var(--size-10-20);
		h3 {
			margin:0;
			font-size:1.5em;
		}
		figure {
			margin: 0 auto;
			width:90%;
			aspect-ratio: 1;
			border-radius: 50vh;
			border: 1px solid #ddd;
		}
	}
}

.con_video {
	background: #222;
	h2,p {
		color: #fff;
	}
	.supp {
		display: block;
		font-size:.85em;
	}
}

.con_example {
	.company_block {
		display:grid;
		grid-template-columns: 2fr 3fr;
		text-align:left;
		.cont {
			display: block;
			text-align:right;
			margin-top:.5em;
		}
		
	}
	.company_lst {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
		gap: var(--size-15-30);
		text-align: left;
		li {
		}
	}
}

/********************
 * effect
********************/

/* 汎用 */
.con_box img {
	opacity:0;
	&.active {
		animation: fadein .5s ease-in-out .2s 1 normal forwards;
		transform: translate(0, 0);	
	}
}

/* 個別設定 */

.p-cover h1 {
	animation: fadein .7s ease-in-out .6s 1 normal forwards;
	transform: translate(0, 30px);
}
.p-cover__sub {
	animation: fadein .7s ease-in-out .8s 1 normal forwards;
	transform: translate(0, 30px);
}
.l-contents__inner .img_pc_sysytem img {
	animation: fadein .5s ease-in-out .2s 1 normal forwards;
	transform: translate(0, 0);
}


.worrie.effect li {
	opacity:0;  /* 最初は非表示にしておく */
	transform: translate(0, 50px);
}

.worrie.effect.active li {
	&:nth-child(1) {
		animation: fadein .5s ease-in-out .1s 1 normal forwards;
	}
	&:nth-child(2) {
		animation: fadein .5s ease-in-out .3s 1 normal forwards;
	}
	&:nth-child(3) {
		animation: fadein .5s ease-in-out .5s 1 normal forwards;
	}
	&:nth-child(4) {
		animation: fadein .5s ease-in-out .7s 1 normal forwards;
	}
}

.kouji.effect li {
	opacity:0;  /* 最初は非表示にしておく */
	transform: translate(0, 50px);
}

.kouji.effect.active li {
	&:nth-child(1) {
		animation: fadein .5s ease-in-out .1s 1 normal forwards;
	}
	&:nth-child(2) {
		animation: fadein .5s ease-in-out .2s 1 normal forwards;
	}
	&:nth-child(3) {
		animation: fadein .5s ease-in-out .3s 1 normal forwards;
	}
	&:nth-child(4) {
		animation: fadein .5s ease-in-out .8s 1 normal forwards;
	}
	&:nth-child(5) {
		animation: fadein .5s ease-in-out .9s 1 normal forwards;
	}
	&:nth-child(6) {
		animation: fadein .5s ease-in-out 1s 1 normal forwards;
	}
	&:nth-child(7) {
		animation: fadein .5s ease-in-out 1.2s 1 normal forwards;
	}
}

.grid_merit.effect.active li {
	&:nth-child(1) {
		animation: fadeup 1s ease-in-out .1s 1 normal forwards;
	}
	&:nth-child(2) {
		animation: fadeup 1s ease-in-out .2s 1 normal forwards;
	}
	&:nth-child(3) {
		animation: fadeup 1s ease-in-out .3s 1 normal forwards;
	}
	&:nth-child(4) {
		animation: fadeup 1s ease-in-out .8s 1 normal forwards;
	}
}

.faq_box.effect li {
	opacity:0;  /* 最初は非表示にしておく */
	transform: translate(0, 20px);
	&:nth-child(1) {
		animation: fadein .5s ease-in-out .1s 1 normal forwards;
	}
	&:nth-child(2) {
		animation: fadein .5s ease-in-out .3s 1 normal forwards;
	}
	&:nth-child(3) {
		animation: fadein .5s ease-in-out .5s 1 normal forwards;
	}
	&:nth-child(4) {
		animation: fadein .7s ease-in-out .7s 1 normal forwards;
	}
	&:nth-child(5) {
		animation: fadein .7s ease-in-out .9s 1 normal forwards;
	}
	&:nth-child(6) {
		animation: fadein .7s ease-in-out 1.1s 1 normal forwards;
	}
	&:nth-child(7) {
		animation: fadein .7s ease-in-out 1.3s 1 normal forwards;
	}
}



/*******************
 * エフェクト
*******************/

@keyframes fadein {
  0% {
     opacity: 0
  }
  100% {
	opacity: 1;
	transform: translate(0, 0); /* 終了時の位置をデフォルトに */
  }
}

@keyframes fadeup {
  0% {
     opacity: 0;
	transform: scale(0.7);
  }
  50% {
     opacity: 0.95;
	transform: scale(1.05);
  }
  70% {
     opacity: 1;
	transform: scale(0.95);
  }
  100% {
     opacity: 1;
	transform: scale(1);
  }
}