@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


#pageWrap {
  padding: 0 0;
	font-family: 'YakuHanMP','Noto Sans JP', sans-serif;
}
#sec01 {}

#sec02 {
	padding: 5% 0;
}
#sec02 h3 {
	font-size: 36px;
	color: #e8546b;
	font-weight: 600;
	border-top: #e8546b solid 1px;
	border-bottom: #e8546b solid 1px;
	width: 20em;
	margin: 0 auto;
}
#sec02 .lead {
	font-size: 22px;
	padding-top: 1em;
	line-height: 2;
}

#sec03 {
	background-color: #fceef4;
}
.boxWidth {
	max-width: 1100px;
	container-type: inline-size;
}
.sec h3 {
	background: #F08B74;
background: linear-gradient(82deg, rgba(240, 139, 116, 1) 0%, rgba(247, 206, 108, 1) 100%);
	color: #fff;
	text-align: center;
	font-size: 3.5cqw;
}
#sec03 .itemBox {
	background-color: #fff;
	border: #999 solid 1px;
	border-radius: 18px;
	margin-top: 30px;
	padding: 30px;
}
#sec03 .itemBox dl {
	width: 62%;
	container-type: inline-size;
}
#sec03 .itemBox dl dt {
	color: #e8546b;
	font-size: 5.2cqw;
	font-weight: 500;
	justify-content: flex-start;
	line-height: 1.3;
}
#sec03 .itemBox dl dt .merit {
	font-family: "Roboto", sans-serif;
	font-weight: 600;
	letter-spacing: 0;
	position: relative;
	font-size: 116%;
	margin-right: 0.5em;
}
#sec03 .itemBox dl dt .merit span {
	font-size: 70%;
	margin-right: 0.3em;
}
#sec03 .itemBox dl dt .md {
	text-align: left;
}
.uLine {
	background: #F9DBE8;
background: linear-gradient(180deg, rgba(249, 219, 232, 0) 63%, rgba(249, 219, 232, 1) 63%, rgba(249, 219, 232, 1) 90%, rgba(249, 219, 232, 0) 90%);
	background-repeat: no-repeat;
	background-size: 0%;
	transition: 2s 0s;
}
.uLine.active {
	background-size: 100%;
}
#sec03 .itemBox dl dt .md .uLine {
	/*background: #F9DBE8;
background: linear-gradient(180deg, rgba(249, 219, 232, 0) 63%, rgba(249, 219, 232, 1) 63%, rgba(249, 219, 232, 1) 90%, rgba(249, 219, 232, 0) 90%);*/
	
}


#sec03 .itemBox dl dd {
	font-size: 3.4cqw;
	text-align: justify;
	padding-top: 0.5em;
	line-height: 1.5;
}
#sec03 .itemBox dl dd .uLine {
	background: #FCD25B;
background: linear-gradient(180deg, rgba(252, 210, 91, 0) 63%, rgba(252, 210, 91, 1) 63%, rgba(252, 210, 91, 1) 94%, rgba(252, 210, 91, 0) 94%);
	background-repeat: no-repeat;
	background-size: 0%;
	transition: 2s 0s;

}
#sec03 .itemBox dl dd .uLine.active {
	background-size: 100%;
}

#sec03 .itemBox dl dd .caption {
	font-size: 12px;
	padding-top: 1em;
}
#sec03 .itemBox .rightBox {
	width: 35%;
	max-width: 360px;
}
#sec03 .itemBox .rightBox .imgBox {
	border-radius: 7px;
	overflow: hidden;
}
#sec03 .capImg::after {
	right: 0.8em;
	bottom: 0.3em;
}
#sec03 .itemBox .rightBox a {
	background-color: #e8546b;
	border-radius: 10px;
	font-size: 20px;
	color: #fff;
	display: flex;
justify-content: center;
align-items: center;
	height: 2em;
	margin-top: 7px;
	position: relative;
}
#sec03 .itemBox .rightBox a::after {
	content: "▼";
	transform: rotateZ(-90deg);
	font-size: 60%;
	margin-left: 1em;
	position: absolute;
	right: 10px;
}

#sec04 {
}
#sec04 .typeBox {
	width: 90%;
	max-width: 860px;
	margin: 30px auto;
}
#sec04 .zumenBox {
	max-width: 630px;
	margin: 0 auto;
}
#sec04 .items {
	max-width: 860px;
	margin: 50px auto 0;
	background-color: #fdf7fa;
	border: #e8546b solid 1px;
	padding: 50px 50px 30px;
	position: relative;
	border-radius: 10px;
	container-type: inline-size;
}
#sec04 .items h4 {
	background-color: #e8546b;
	color: #fff;
	font-size: 3.0cqw;
	width: 21em;
	height: 2em;
	line-height: 2em;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
}
#sec04 .items h4::before,#sec04 .items h4::after {
	content: "";
	width: 1em;
	height: 2em;
	position: absolute;
	top:0;
	right: 99.9%;
	border-left: transparent 1em solid;
	border-top: #e8546b 1em solid;
	border-bottom: #e8546b 1em solid
}
#sec04 .items h4::after {
	right: auto;
	left: 99.9%;
	border: none;
	border-right: transparent 1em solid;
	border-top: #e8546b 1em solid;
	border-bottom: #e8546b 1em solid
}
#sec04 .items .imgBox {
}
#sec05 {
	background-color: #fceef4;
}
#sec05 .flex {
	padding-top: 30px;
}
#sec05 .flex dl {
	width: 58%;
	container-type: inline-size;
}
#sec05 .flex dt {
	color: #e8546b;
	font-size: 5.2cqw;
	font-weight: 500;
	text-align: left;
	line-height: 1.5;
}
#sec05 .flex dt .uLine {
	background: #FCD25B;
background: linear-gradient(180deg, rgba(252, 210, 91, 0) 63%, rgba(252, 210, 91, 1) 63%, rgba(252, 210, 91, 1) 94%, rgba(252, 210, 91, 0) 94%);
	background-size: 0%;
	background-repeat: no-repeat;
	transition: 1s;
}
#sec05 .flex dt .uLine.active {
	background-size: 100%;
}

#sec05 .flex dd {
	font-size: 14px;
	text-align: left;
	padding: 1em 0 0;
}
#sec05 .flex dd .figBox {
	padding-top: 2em;
}
#sec05 .flex .rightBox {
	width: 36%;
}
#sec05 .flex .rightBox img {
	filter: drop-shadow(3px 4px 8px rgba(0, 0, 0, 0.5));
}
#sec05 .flex .rightBox .caption {
	font-size: 10px;
	text-align: left;
	line-height: 1.3;
	padding-top: 1em;
}
#sec05 .hikaku {
	padding-top: 3%;
}
#sec05 .hikaku .h4-02 {
	color: #e8546b;
	font-size: 40px;
	position: relative;
}
#sec05 .hikaku .h4-02::before,
#sec05 .hikaku .h4-02::after {
	content: "";
	position: absolute;
	width: calc((100% - 13em) / 2);
	height: 5px;
	background-color:#e8546b; 
	left: 0;
	top: 48%;
}
#sec05 .hikaku .h4-02::after {
	left: auto;
	right: 0;
}
#sec05 .hikaku .caption {
	font-size: 10px;
	padding-top: 1em;
	text-align: left;
}

#sec06 {
}
#sec07 {
	background-color: #fceef4;
}
#sec07 .flex {
	padding: 3% 0 0;
}
#sec07 .flex .itemBox {
	width: 24%;
	max-width: 258px;
	background-color: #fff;
	padding-bottom: 20px;
	position: relative;
}
#sec07 .flex .itemBox a {
	display: block;
}
#sec07 .flex .itemBox p {
	padding: 1em;
	text-align: left;
	font-size: 12px;
	color: #000;
	line-height: 1.4;
}
#sec07 .flex .itemBox ::after {
	content:"";
	position: absolute;
	width: 5%;
	height: 100%;
	bottom: 6px;
	right: 8px;
	background-image: url("../images/icon-win.svg");
	background-position: left bottom;
	background-repeat: no-repeat;
	background-size: 100%;
}

.sec {
	padding: 3% 0;
}

@media screen and (max-width: 959px) {
}

@media screen and (max-width: 599px) {
	#sec02 h3 {
		font-size: clamp(18px, 5.1vw, 20px);
		line-height: 1.3;
		width: 14em;
		padding: 0.3em 0;
	}
	#sec02 .lead {
		font-size: clamp(13px, 3.7vw, 15px);
	}
	.sec h3 {
    font-size: 6cqw;
		font-size: clamp(12px, 6cqw, 24px);
		line-height: 1.3;
		padding: 0.3em 0;
	}
	#sec03 .itemBox {
		border-radius: 8px;
		margin-top: 15px;
		padding: 5%;
	}
	#sec03 .itemBox dl {
		width: 100%;
	}
	#sec03 .itemBox dl dt {
		font-size: 6.4cqw;
		font-size: clamp(12px, 6.4cqw, 24px);
	}
	#sec03 .itemBox dl dd {
		font-size: 4.4cqw;
		font-size: clamp(12px, 4.4cqw, 16px);
		padding: 0.5em 0;
	}


	#sec03 .itemBox dl dd .caption {
		font-size: 10px;
	}
	#sec03 .itemBox .rightBox {
		width: 100%;
		max-width: 360px;
		margin: 10px auto;
	}
	#sec03 .itemBox .rightBox a {
    font-size: 5.8cqw;
		font-size: clamp(12px, 5.8cqw, 20px);
	}
	#sec04 .typeBox {
    max-width: 300px;
}
	#sec04 .zumenBox {
    max-width: 500px;
	}
	#sec04 .items {
		margin: 25px auto 0;
		padding: 30px 5% 5%;
		position: relative;
		border-radius: 10px;
		container-type: inline-size;
	}
	#sec04 .items .imgBox {
		max-width: 400px;
		margin: 0 auto;
	}
	#sec04 .items h4 {
		background-color: #e8546b;
		color: #fff;
		font-size: 4.4cqw;
		font-size: clamp(12px, 4.4cqw, 20px);
	}
	#sec05 .flex {
    max-width: 400px;
		margin: 0 auto;
}
	#sec05 .flex dl {
		width: 100%;
	}

	#sec05 .flex .rightBox {
		width: 100%;
		
	}
	
	#sec05 .flex .rightBox .figBox {
		width: 80%;
		padding-top: 30px;
		margin: 0 auto;
	}
	#sec05 .hikaku {
		max-width: 400px;
		margin: 0 auto;
	}
	#sec05 .hikaku .h4-02 {
		font-size: 5.2cqw;
		line-height: 1.3;
		padding: 6px 0;
		margin-bottom: 10px;
	}
	#sec05 .hikaku .h4-02::before,
	#sec05 .hikaku .h4-02::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 3px;
		background-color:#e8546b; 
		left: 0;
		top: 0;
	}
	#sec05 .hikaku .h4-02::after {
		top: auto;
		bottom: 0;
	}
	.sec {
		padding: 30px 0;
	}
	#sec07 .flex {
		gap:20px 20px;
		justify-content: center;
	}
	#sec07 .flex .itemBox {
		width: 100%;
		max-width: 260px;
		position: relative;
	}
	#sec07 .flex .itemBox p {
    padding: 1em 0.6em;
}
}