:root {
  --blue: #00B1E3;
  --bg-blue: #CAEFFF;
  --pink: rgb(255,125,100);
}
#bodyproduct #topimage{
	background:url(./img/h1.jpg?) no-repeat center center;
	background-size:cover;
}
.toiawase{
	background-color:var(--bg-blue);
	.kangei{
		display:flex;
		justify-content:center;
		align-items:center;
		gap:10px;
	}
	.kangei p{
	}
	.kangei p img{
		width:120px;
	}
	.u_line{
		background: linear-gradient(transparent 60%, rgba(255, 255, 255, 1) 60%);
	}
	.inner{
		padding-top:0;
		padding-bottom:0;
	}
	.inner h2{
		font-family:sans-serif !important;
		font-size:1.3rem !important;
	}
	.toiawase_link{
		display:flex;
		justify-content:center;
		gap:2em;
		@media (max-width: 767px){
			flex-direction:column;
		}
		div{
		}
		dt{
			margin:0;
			text-align:center;
		}
		dd{
			margin:0;
			text-align: center;
		}
		dd a {
			line-height: 1.2;
			display: inline-block;
			text-align: center;
			position: relative;
			padding: 1.5em calc(2em + 5%);
			margin: 5px 0;
			border:solid 1px var(--pink);
			background-color: var(--pink);
			color: #FFF;
			border-radius: 50px;
			font-weight: bold;
			box-shadow:7px 7px 0 rgba(0,0,0,0.25);
		}
		dd.saiyo a {
			color: var(--pink);
			background-color: #FFF;
		}
		@media screen and (min-width: 992px) {
			dd a {
				min-width: 360px;
			}
		}
		dd a:after {
			display: block;
			position: absolute;
			top: calc(50% - 6px);
			right: 1.5em;
			content: "";
			display: inline-block;
			width: 8px;
			height: 8px;
			margin-right: 8px;
			border-top: 2px solid currentColor;
			border-right: 2px solid currentColor;
			transform: rotate(45deg);
		}
		@media (hover: hover) {
			dd a:hover {
				color: var(--pink);
				background-color: #FFF;
			}
			dd.saiyo a:hover {
				background-color: var(--pink);
				color: #FFF;
			}
		}
	}

}
#maincol .mainimage_wrap{
	position:relative;
	.mainimage{
	}
	.maintext{
		margin:0 0 50px;
		@media (min-width: 768px){
			position:absolute;
			top:0;
			left:0;
			width:70%;
			max-width:600px;
		}
		h3{
			color:#333;
			font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
			background:none;
			border:0;
		}
		ul{
			margin:0;
			padding:0;
			list-style:none;
			display:flex;
			gap:20px;
			@media (max-width: 767px){
			justify-content:center;
			}
		}
		ul li{
			background-color:var(--blue);
			color:#FFF;
			border-radius:50%;
			width:9em;
			aspect-ratio: 1;
			display:flex;
			justify-content:center;
			align-items:center;
			font-weight:bold;
			font-size:clamp(0.8rem, 1vw, 1.15rem);
			text-align:center;
		}
	}
}
ul.jisseki{
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
	gap:20px;
	@media (max-width: 767px){
		flex-direction:column;
	}
	li{
		flex:1;
	}
	img{
		border:solid 1px #ccc;
	}
}

#maincol .wakaremichi{
	background-color:#EFEFEF;
	border-radius:20px;
	max-width:740px;
	margin:5% auto;
	padding:1em ;
	h3{
		color:#333;
		font-size: 1.2em;
		background:none;
		border:0;
		text-align:center;
	}
	dl.step{
		div{
			background-color:#FFF;
			border-radius:10px;
			padding:1em;
			margin:1em auto;
			text-align:center;
			position:relative;
			max-width:660px;
		}
		div:not(:last-child) {
			margin:1em auto 5em;
		}
		div:not(:last-child)::after {
			display:block;
			content: "";
			width: 2em;
			height: 1.5em;
			background: var(--blue);
			clip-path: polygon(50% 100%, 0 0, 100% 0);
			position:absolute;
			bottom:-3em;
			left:calc(50% - 1em);
		}
		dt{
			color:var(--blue);
			font-weight:bold;
			font-size:1.1em;
			margin-bottom:0.5em;
		}
		dd{
			margin:0;
		}
		ul{
			display:flex;
			margin:0;
			padding:0;
			list-style:none;
		}
		li{
			display:flex;
			flex-direction:column;
			justify-content: flex-start; 
			padding:0 10px;
			gap:10px;
			width:50%;
			&:first-child{
				border-right:2px solid var(--blue);
			}
			img{
				display:block;
				width:80%;
				margin:0 auto;
			}
			small{
				display:block;
				text-align:left;
			}
			strong{
				display:block;
			}
		}
	}
}

@media (min-width: 768px){}
@media (max-width: 767px){}