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

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@300;400;500;700&display=swap');
.zen-maru-gothic-light {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

#pageWrap {
    padding: 0px 0 0;
    font-family: 'YakuHanMP', 'Noto Serif JP', serif;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 400;
	text-align: left;
	letter-spacing: -0.05em;
}

#secMain {
	position: relative;
}
#secMain .imgBox {}
.imgBox.capImg::after {
	content: "image photo";
	color: #000;
	text-shadow: none;
}
#secMain #h2Box {
	position: absolute;
	width: 50%;
	left: 45%;
	top: 50%;
	transform: translateY(-50%);
}

.iconBox {
	width: 25%;
	max-width: 100px;
	margin: 0 auto;
}

#sec01 {
	background-color: #f9e7db;
	padding: 5% 0;
	position: relative;
}
#sec01 h3 {
	width: 90%;
	max-width: 800px;
	margin: 50px auto;
	position: relative;
	z-index: 1;
}
#sec01 h3::after {
	content: "";
	position: absolute;
	width: 85%;
	height: 50%;
	right: -2%;
	bottom: -6%;
	background-color: #fff;
	z-index: -1;
}
#sec01 p {
	font-size: 21px;
	text-align: center;
}
#sec01 .figBox {
	width: 30%;
	max-width: 220px;
	margin: 0 auto;
	padding: 3% 0 1%;
}
#sec01 .sankaku {
	position: absolute;
	width: 25%;
	max-width: 230px;
	left: 50%;
	bottom: 0%;
	transform: translate(-50%,70%);
}

.h3Box {
	padding: 15% 0 5%;
	position: relative;
}
.h3Box .blink {
	position: absolute;
	width: 100px;
	bottom: 40%;
	left: calc(50% - 50px);

}
#h3-02 h3 {
	max-width: 1000px;
	margin: 0 auto;
}

#sec02,#sec03 {
	padding: 0 0;
	position: relative;
	background-image: url("../images/bg-sankaku.svg"),url("../images/bg-sankaku02.svg");
	background-repeat: no-repeat,no-repeat;
	background-position: left top, right bottom;
	background-size: 30%,30%;
	margin-top: 5%;
}
.numBox {
	width: 30%;
	max-width: 120px;
	margin: 0 auto;
}
.caseBox {
	max-width: 1000px;
	border: #000 solid 2px;
	background-color: #fff;
	padding: 5%;
	position: relative;
	margin-top: 3%;
}
.caseBox .iconBox {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-20%);
}
.caseBox .flex {
	align-items: center;
}
.caseBox .flex dl {
	width: 64%;
}
.caseBox .flex dt {
	font-size: 34px;
	font-weight: 500;
	text-align: center;

}

.caseBox .flex dd {
	font-size: 20px;
	padding-top: 1em;
}
.caseBox .flex .itemBox {
	width: 30%;
	max-width: 240px;
}
.caseBox .flex .itemBox p {
	font-size: 21px;
	padding-top: 0.5em;
	text-align: center;
	line-height: 1.4;
}
.daysBox {
	max-width: 1000px;
	padding: 5% 0;
	position: relative;
}
.daysBox .imgBox.capImg::after {
	bottom: -1.6em;
}
.daysBox .daysBase{
	position: absolute;
	background-color: #f9e7db;
	width: 7%;
	height: 95%;
	top: 5%;
	left: 3%;
	z-index: -1;
	background-image: url("../images/arwend.svg");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100%;
}

.daysBox .flex-container {
	justify-content: flex-start;
	align-items: center;
	padding: 3% 0;
}
.daysBox .numDay {
	width: 13%;
	margin-right: 3%;
}
.daysBox .txt {
	margin-right: 3%;
}
.daysBox .txt p {
	font-size: 24px;
}
.daysBox .txt p .maru {
	color: #c1272d;
}
.daysBox .txt p .orng {
	color: #df884d;
	font-weight: 500;
}

.daysBox .flex1 .imgBox {
	width: 18%;
}
.daysBox .flex2 .imgBox,.daysBox .flex3 .imgBox {
	width: 28%;
}
.daysBox .flex4 .imgBox {
	width: 34%;
}
.daysBox .flex6 .imgBox {
	width: 20%;
}
.daysBox .flex6 {
	padding: 5% 0;
}
.junbi {
	background-color: #f9e7db;
	margin-left: 16%;
	padding: 3% 5%;
	
}
.junbi h4 {
	width: 45%;
	margin: 0 auto;
}
.junbi p {
	font-size: 21px;
}
.junbi {
	position: relative;
}
.junbi .uLine {
    background: #df884d;
    background-repeat: no-repeat;
    
    transition: all 1.5s ease 1s;
    background-position: 0 0;
		color: #fff;
	display: inline-block;
	background: #DF884D;
background: linear-gradient(0deg, rgba(223, 136, 77, 0) 10%, rgba(223, 136, 77, 1) 10%, rgba(223, 136, 77, 1) 90%, rgba(223, 136, 77, 0) 90%);
}
.junbi .uLine::before,.junbi .uLine::after{
	content: "";
	padding: 0 0.2em;
}
.junbi .flex-container {
	justify-content:space-between;
	align-items: flex-start;
	padding-bottom: 0;
}
.junbi .img01 {
	width: 34%;
}
.junbi .img03 {
	width: 27.7%;
}
.junbi .kira {
	position: absolute;
	width: 15%;
	right: 5%;
	top: -12%;
}
.junbi .plant {
	position: absolute;
	width: 10%;
	right: 10%;
	top: 24%;
}
.junbi .caption {
	font-size: 10px;
	text-align: right;
	padding: 0;
}

#sec03 .daysBox .flex1 .imgBox {
	width: 23%;
}
#sec03 .daysBox .flex3 .imgBox {
	width: 29.6%;
}
#sec03 .daysBox .flex3 {
	position: relative;
}
#sec03 .daysBox .flex3 .kira {
	position: absolute;
	width: 15%;
	right: 5%;
	bottom: 0;
}
#sec03 .daysBox .flex4 .imgBox {
	width: 29.6%;
}
#sec03 .daysBox .flex6 .imgBox {
	width: 20%;
}
#sec03 .daysBox .flex6 {
	padding: 5% 0;
}
#sec03 .junbi .flex-container {
	column-gap: 0 4%;
	max-width: 690px;
	margin: 0 auto;
}
#sec03 .junbi .img01 {
	width: 48%;
}

@media screen and (max-width: 959px) {
	#sec01 p {
    font-size: 2.4vw;
	}
	.h3Box {
    padding: 20% 0 5%;
	}
	.h3Box .blink {
    width: 80px;
    left: calc(50% - 40px);
	}
	.caseBox {
		padding-top: 10%;
	}
	.caseBox .flex {
		align-items: flex-end;
	}
	.caseBox .flex dt {
		font-size: 3.3vw;
	}

	.caseBox .flex dd {
		font-size: 2.2vw;
	}
	.caseBox .flex .itemBox p {
    font-size: 2.2vw;
	}
	.daysBox .txt p,.junbi p {
    font-size: 2.2vw;
	}
}
@media screen and (max-width: 599px) {
	#secMain {
		background-color: #df884d;
	}
	
	#secMain #h2Box {
    position: static;
    width: 80%;
		margin: 0 auto;
    transform: translateY(0%);
	}
	#sec01 h3::after {
    width: 100%;
		height: 40%;
	}
	#sec01 p {
		font-size: clamp(14px, 4vw, 16px);
  }
	#sec01 .figBox {
    width: 50%;
		padding: 5% 0;
	}
	#sec01 .sankaku {
    width: 40%;
	}
	.h3Box .blink {
    position: absolute;
    width: 60px;
    bottom: 50%;
    left: calc(50% - 30px);
	}
	.caseBox .flex {
		justify-content: center;
		padding-top: 23%;
	}
	.caseBox .flex dl {
		width: 100%;
	}
	.caseBox .flex dt {
		font-size: clamp(23px, 6.4vw, 25px);
	}

	.caseBox .flex dd,.caseBox .flex .itemBox p {
		font-size: clamp(14px, 4vw, 16px);
		padding: 1em 0;
	}
	.caseBox .flex .itemBox {
		width: 60%;
		max-width: 240px;
	}
	.daysBox .txt p,.junbi p {
    font-size: clamp(14px, 4vw, 16px);
	}
	.daysBox .imgBox {
		margin: 0 auto;
		padding: 10px 0 0;
	}
	.daysBox .flex1 .imgBox,.daysBox .flex2 .imgBox, .daysBox .flex3 .imgBox,.daysBox .flex4 .imgBox,.daysBox .flex6 .imgBox,
	#sec03 .daysBox .flex1 .imgBox,#sec03 .daysBox .flex3 .imgBox,#sec03 .daysBox .flex6 .imgBox{
    width: 60%;
		transform: translateX(5%);
	}
	.daysBox .flex6 .imgBox,#sec03 .daysBox .flex6 .imgBox {
		width: 40%;
	}
	.daysBox .numDay {
    width: 20%;
    margin-right: 3%;
	}
	.daysBox .txt {
		width: 75%;
		margin-right: 0;
	}
	.daysBox .txt p br {
		display: none;
	}
	.junbi {
		width: 85%;
		margin-left: 13%;
	}
	.junbi p br {
		display: none;
	}
	.junbi .uLine {
		display: inline;
	}
	.junbi .uLine::before, .junbi .uLine::after,#sec03 .daysBox .flex3 .kira {
		display: none;
	}
	.junbi h4 {
		width: 80%;
	}
	.junbi .kira,.junbi .plant {
		display: none;
	}
	.junbi .img01,.junbi .img03,#sec03 .junbi .img01 {
		width: 100%;
	}

}