@charset "UTF-8";
/* CSS Document */
.notes-area {
    margin: 0% auto 0;
}
#contentWrap {
	color: #000;
}
#contentWrap .boxWidth {
	background-color: #efebe7;
	box-shadow: 2px 6px 6px rgba(0,0,0,0.2);
	
	padding-bottom: 3%;
	position: relative;
	z-index: 1;
	padding: 30px 50px;
}
h3.h3-02 {
		width: 96%;
	}
#sec01 {
	padding: 20px;
	/*margin: 0 4% 0;*/
	background-color: #f9f6ed;
	h4 {
		width: 100%;
		padding-bottom: 1em;
		font-size: 20px;
	}
	.leftBox {
		width: 50%;
		background-color: #fff;
		padding: 15px;
		dl {
			width: 32%;
			container-type: inline-size;
			dt {
				font-size: 9.2cqw;
			}
			dd {
				font-size: 8cqw;
				text-align: justify;
				line-height: 1.3;
				padding-top: 1em;
			}
		}
		.img01 {
			width: 50%;
			&::after {
				right: auto;
				left: 22%;
			}
		}
		.img02 {
			width: 15%;
			container-type: inline-size;
			p {
				font-size: 15.5cqw;
			}
		}
		.caption {
			font-size: 10px;
		}
	}
	.rightBox {
		width: 48%;
		container-type: inline-size;
		h5 {
			width: 100%;
			font-size: 2.8cqw;
			span {
				display: inline-block;
				width: 8em;
				margin-right: 0.5em;
			}
		}
		p {
			width: 25%;
		}
		.img01 {
			width: 54%;
		}
		.img02 {
			width: 17%;
		}
	}
}

#sec02 {
	padding: 20px;
	margin: 3% 0 0;
	background-color: #fff;
	align-items: center;
	dl {
		width: 45%;
		dt {
			font-size: 16px;
			padding: 0.3em;
			margin-bottom: 0.5em;
			border-bottom: rgba(0,0,0,0.6) solid 1px;
		}
	}
	.figBox {
		width: 53%;
		max-width: 554px;
		.caption {
			font-size: 10px;
		}
	}
}

#sec03 {
	margin: 3% 0 0;
}
#sec03 .itemBox {
	align-items: flex-start;
	width: 31%;
	.imgBox {
		width: 53%;
		.caption {font-size: 10px;}
	}
	dl {
		width: 44%;
	}
}


@media screen and (max-width: 959px){
	
	#sec01 {
		container-type: inline-size;
    .leftBox {
        width: 100%;
    }
		.rightBox {
        width: 100%;
			margin-top: 30px;
    }
	}
	#sec01 h4 {
		font-size: clamp(15px, 2.8cqw, 20px);
		
    }
	#sec01 .rightBox {
		h5 {
			padding-bottom: 1em;
		}
        p {
            width: 30%;
					font-size: 13px;
        }
		.img01 {
			width: 48%;
		}
		.img02 {
			width: 15%;
		}
  }
	#sec02 {
    dl {
        width: 100%;
			dd {
				font-size: 13px;
			}
    }
		.figBox {
			 width: 100%;
		}
	}
	#sec03 .itemBox {
    align-items: flex-start;
    width: 100%;
		max-width: 350px;
		margin: 0 auto;
		padding: 15px 0;
	}



	
}

@media screen and (max-width: 599px){
	#contentWrap .boxWidth {
	  padding: 10px;
	}
	h3.h3-02, .boxWidth {
	  width: 100%;
	}
	h3.h3-02 .jp {
	  position: static;
	  display: block;
	  padding-top: 0.3em;
	}
	#sec01 {
	  padding: 15px;
	}
	#sec01 h4 {
	  font-size: 16px;
	  text-align: center;
	}
	#sec01 .leftBox {
		max-width: 400px;
		margin: 0 auto;
		dl {
			width: 100%;

			dt {
				font-size: 15px;
			}
			dd {
				font-size: 13px;
			}
		}
		.img01 {
			width: 100%;
			padding: 15px 0;
		}
		.img02 {
			width: 30%;
			margin: 0 auto;
		}
		.caption {
			width: 100%;
		}
	}
	#sec01 .rightBox {
	  h5 {
	    text-align: center;
	    font-size: 16px;
	    line-height: 1.4;
	    span {
	      display: block;
	      width: 10em;
	      margin: 0 auto 5px;
	    }
	  }
	  p {
	    width: 100%;
	    font-size: 13px;
			padding-bottom: 1em;
	  }
	  .img01 {
	    width: 75%;
	  }
	  .img02 {
	    width: 24%;
	  }
	}
	#sec03 {
    padding: 30px 0;
}
	#sec03 .itemBox {
		max-width: 300px;
    .imgBox {
        width: 75%;
			max-width: 250px;
			margin: 0 auto;
    }
		dl {
			width: 100%;
		}
}


}