/*--------------------
head
----------------------*/
.read-head{
	aspect-ratio: 8/2;
}
	#wellness .read-head{
		background: url(../images/index/thumb-wellness.jpg) no-repeat center bottom;
		background-size: cover;
	}
	#year100 .read-head{
		background: var(--white) url(../images/100year/bg.png) no-repeat center;
		background-size: cover;
	}
	@media screen and (max-width: 767px){
		.read-head{
			aspect-ratio: 8/4;
		}
	}

/*--------------------
 common
----------------------*/
.read-bg{
	padding-bottom: 2em;
}

	#wellness .read-bg{
		background:
		url("../images/common/bg-noise.png") left top/78px auto repeat,
		url("../images/wellness/bg-left.png") left top/270px auto repeat-y,
		url("../images/wellness/bg-right.png") right bottom/270px auto repeat-y,
		var(--cream);
	}
	#year100 .read-bg{
		background: 
		url("../images/common/bg-noise.png") left top/150px auto repeat,
		url("../images/100year/bg.png") center bottom/125% auto no-repeat,
		linear-gradient(180deg,rgb(0,145,65) 0%,rgb(220,250,250) 100%)
	}

/* box */
.read-contents{
	max-width: 960px;
	width: calc(100% - 5%);
	margin: 0 auto;
	padding-top: 2em;
}
.read-inner-large{
	max-width: 780px;
	width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.read-inner{
	padding-top: 3.5em;
	padding-bottom: 2.5em;
	max-width: 620px;
	width: 88%;
	margin-left: auto;
	margin-right: auto;
}
/*img*/
.image-width{
	max-width: 540px;
	width: 88%;
	margin-left: auto;
	margin-right: auto;
}
.image-width-small{
	max-width: 420px;
	width: 88%;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------
 font
----------------------*/
.read-title{
	font-size: clamp(32px, 3.2323232323vw, 54px);
	/*clamp  (32 / 990 *100)vw */
}
.kakoi span{
	padding: .25em 0;
	padding-left: 3px;
	padding-right: 3px;
}
	@media screen and (max-width: 990px){
		.kakoi span{
			display: inline-block;
			padding-left: 6px;
			padding-right: 6px;
		}
	}

/*--------------------
 svg
----------------------*/
.svg--wave{
	position: relative;
	z-index: 3;
	padding-top: 7em;
}
.svg-wave-01 svg{
	position: absolute;
	top: -2px;
	left: 0;
	transform: scaleX(-1);
}
.svg-wave-02 svg{
	position: absolute;
	top: -2px;
	left: 0;
}
/*--------------------
 corner
----------------------*/
.corner-clippath{
	position: relative;
	z-index: 3;
	padding-top: 3em;
}
.corner-clippath-left{
	position: absolute;
	top: 0;
	left: 0;
	width: 6em;
	height: 6em;
	clip-path: polygon(0 0, 100% 0, 0 100%);
}
.corner-clippath-right{
	position: absolute;
	top: 0;
	right: 0;
	width: 6em;
	height: 6em;
	clip-path: polygon(0% 0%,100% 0%, 100% 100%);
}
	@media screen and (max-width: 990px){
		.corner-clippath-left{
			width: 4em;
			height: 4em;
		}
		.corner-clippath-right{
			width: 4em;
			height: 4em;
		}
	}

/*--------------------
 wellness
----------------------*/
.wellness-no1{
	background:
	linear-gradient(0deg, #fff 0%, rgba(248, 230, 102, .2) 100%),
	url("../images/common/bg-noise.png") center/78px auto repeat;
}
.wellness-midashi{
	font-size: clamp(20px, 2vw, 26px);
	/*clamp  (20 / 990 *100)vw */
	padding: .25em 1em;
	border-radius: 5em;
	display: inline-block;
}
.wellness-no2{
	padding-bottom: 4em;
}
.wellness-no2 .wellness-midashi{
	margin-left: auto;
}
.wellness-no1 .svg--wave img.point-01 {
	position: absolute;
	top: 0;
	right: 1.5em;
	max-width: 110px;
}
.wellness-no2 .svg--wave img.point-02 {
	position: absolute;
	top: 0;
	left: 1.5em;
	max-width: 110px;
}
.wellness-no2 .svg--wave img.point-03 {
	position: absolute;
	top: 0;
	right: 1.5em;
	max-width: 65px;
}
/*--------------------
 100year
----------------------*/

.year100-no1{
	background:
	linear-gradient(180deg, rgba(216,194,144, .4) 75%, var(--beigecream) 100%),
	url("../images/common/bg-noise.png") center/100px auto repeat;
}
.year100-no3{
	padding-bottom: 2.5em;
	background:
	url("../images/common/bg-noise.png") center/100px auto repeat,
	var(--green);
}

.year100-midashi{
	font-size: clamp(24px, 2.42424242424vw, 32px);
	/*clamp  (20 / 990 *100)vw */
	border-bottom: 5px double;
	border-top: 5px double;
}
.year100-sub-midashi{
	font-size: clamp(20px, 2.0202020202vw, 26px);
	/*clamp  (20 / 990 *100)vw */
}
.fill-year100-no1{
	fill: #3382c7;
}
.year100-no3 .xxx-large{
	font-size: clamp(24px, 2.42424242424vw, 32px);
	/*clamp  (20 / 990 *100)vw */
	letter-spacing: 3px;
}
.history-eng{
	font-size: clamp(26px, 2.62626262626vw, 32px);
	/*clamp  (26 / 990 *100)vw */
}
.history-eng{
	padding-top: 1em;
	padding-bottom: .5em;
	padding-right: 130px;
	position: relative;
	line-height: 1.5;
}
.history-eng .p-right{
	width: 125px;
	right: .5em;
	bottom: 0;
	position: absolute;
	z-index: 6;
}
	@media screen and (max-width: 767px){
		.history-eng{
			padding-right: 105px;
		}
		.history-eng .p-right{
			width: 95px;
		}
	}

.year100-history{
	padding: 0 0 5em;
}
.year100-history li{
	border-left: 2px solid var(--deepgreen);
	position: relative;
}
.year100-history li:before{
	position: absolute;
	top: -.7em;
	left: -.7em;
	width: 1.25em;
	height: 1.25em;
	background: var(--green);
	border-radius: 50%;
	content: "";
}
.year100-history li .item{
	padding: 2.5em 2em;
	position: relative;
}
.year100-history li .bg-on:before{
	position: absolute;
	width: calc(100% - .75em);
	height: 100%;
	top: 50%;
	right: 0;
	background: 
	url("../images/common/bg-noise.png") center/78px auto repeat,
	rgba(200,235,225,.45);
	transform: translateY(-50%);
	content: "";
	z-index: 0;
	border-radius: 1em;
}
.year100-history li .year-txt{
	width: 145px;
	font-size: clamp(30px, 3.0303030303vw, 32px);
	/*clamp  (26 / 990 *100)vw */
	line-height: 1.0;
	position: relative;
	z-index: 1;
}
.year100-history li .year-body{
	width: calc(100% - 145px);
	position: relative;
	z-index: 1;
}
	@media screen and (max-width: 767px){
		.year100-history li .item{
			padding: 1.25em;
		}
		.year100-history li .year-txt{
			width: 40%;
		}
		.year100-history li .year-body{
			width: calc(100% - 40%);
		}
	}


.his-img-txt {
	justify-content: space-between;
	align-items: center;
}
.his-img-txt .img{
	width: 47.5%;
}
.his-img-txt .txt{
	width: 47.5%;
}
	@media screen and (max-width: 767px){
		.his-img-txt .img{
			width: 100%;
		}
		.his-img-txt .txt{
			width: 100%;
			margin-top: .5em;
		}

	}
.year100-portrait {
	text-align: center;
}
.year100-portrait img{
	width: 180px;
}