@charset "UTF-8";
/* CSS Document */

#contentWrap {

}

.wBox {
	background-color: #fff;
	box-shadow: 2px 6px 6px rgba(0,0,0,0.2);
	position: relative;
	z-index: 1;
	padding: 30px 50px;

}
#sec01 {
	width: 100%;
}
#sec01 .flex {
	align-items: flex-end;
	
}
#sec01 .flex .leftBox {
	width: 59.1%;
	max-width: 650px;
	
	
}
#sec01 .flex .leftBox .kanki{
	background-color: #f9f6ed;
	padding: 15px 25px;
	margin-top: 50px;
}
#sec01 .flex .leftBox .kanki .imgBox{
	max-width: 530px;
	margin: 0 auto;
	padding-top: 10px;
}
#sec01 .flex .rightBox {
	width: 37%;
}
#sec01 .flex .rightBox .itemBox {
	padding: 15px 0;
	flex-direction: row-reverse;
	border-bottom: #999 dotted 1px;
}

#sec01 .flex .rightBox .imgBox {
	width: 58.1%;
	max-width: 230px;
}
#sec01 .flex .rightBox dl {
	width: 40%;
	padding-left: 10px;
}
#sec01 .flex .rightBox dt {
	border-bottom: #777 solid 1px;
}
#sec01 .flex .rightBox dd {
	padding-top: 0.3em;
	letter-spacing: 0em;
	font-size: 12px;
}
#sec01 .flex .rightBox .item05 {
	.imgBox {
		width: 43%;
		max-width: 170px;
	}
	dl {
		width: 55%;
	}
}
#sec01 .flex02 {
	background-color: #efebe7;
	padding: 30px;
	margin-top: 30px;
	gap:0px 0px;
	justify-content: space-between;
}

#sec01 .flex02 .lineTate {
	width: 1px;
	background-color: #999;
}
#sec01 .flex02 .itemBox {
    width: 31%;
    max-width: 100%;
	container-type: inline-size;
}
#sec01 .flex02 .item01 {

	.imgWrap {

		.imgBox {
			width: 49%;
		}
	}
}
#sec01 .flex02 .item02 {

	h5 {
		text-align: center;
		font-size: 16px;
		font-size: 4.8cqw;
	}
	.hyoka {
		width: 70%;
		margin: 0 auto;
		padding: 10px 0;０
	}
	dl {
		position: relative;
		dt {
			display: block;
			font-size: 4.2cqw;
			font-size: clamp(14px, 4.2cqw, 16px);
			border: none;
			text-align: left;
			padding: 0;
			height: auto;
			color: #003155;
			font-weight: 500;
			padding-top: 0.3em;
		}
		dd {
			padding-bottom: 1em;
		}
	}
	
	.fig {
		position: absolute;
		width: 24%;
		right: 0;
		bottom: -5%;
		max-width: 100px;
	}
	.dd03 {
		width: 70%;
	}
}
#sec01 .flex02 .item03 {
	.imgBox {
		width: 60%;
		margin: 0 auto;
	}
}


@media screen and (max-width: 959px){
	#sec01 .flex .leftBox .kanki {
    margin-top: 20px;
}
	#sec01 .flex {
		max-width: 500px;
		margin: 0 auto;
	}
	#sec01 .flex .leftBox {
		width: 100%;

	}
	#sec01 .flex .leftBox .kanki{
	}

	#sec01 .flex .rightBox {
		width: 100%;
	}
	#sec01 .flex02 .itemBox {
    width: 100%;
    max-width: 100%;
		padding: 30px 0;
	}
		
	#sec01 .flex02 .lineTate {
		display: none;
	}
	#sec01 .flex02 .item01 {
		.imgWrap {
			max-width: 300px;
			margin: 0 auto;
    }
	}
	#sec01 .flex02 .item02 .fig {
		bottom: -5%;
	}

}
@media screen and (max-width: 599px){
	.boxWidth {
		width: 100%;
	}
	h3.h3-02, .boxWidth {
	  width: 100%;
	}
	h3.h3-02 .jp {
	  position: static;
	  display: block;
	  padding-top: 0.3em;
		line-height: 1.4;
	}
	.wBox {
    padding: 15px;
}
	#sec01 .flex .rightBox .itemBox {
		justify-content: center;
		padding-bottom: 30px;
		border: none;
		background-color: #fff;
		box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
		margin: 20px auto;
		padding: 15px 30px 30px;
		.imgBox {
			width: 100%;
			max-width: 300px;
		}
		dl {
			width: 100%;
			padding-left: 0;
			dd {
				font-size: 13px;
				text-align: justify;
				line-height: 1.5;
			}
		}
	}
	#sec01 .flex .rightBox .item05 {
    .imgBox {
        width: 70%;
        max-width: 250px;
    }
	}
	#sec01 .flex02 {
		margin: 0 auto;
		width: 100%;
		padding: 20px;
		max-width: 500px;
}


}