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


	
	
/* charm-beginning
--------------------- */
#charm-beginning {
	width: 100%;
	padding: 100px 0;
}
	#charm-beginning h2 {
		font-size: 2.0rem;
		font-weight: 700;
		line-height: 1.6em;
		text-align: center;
		margin-bottom: 40px;
	}

	#charm-beginning .anchor-list a.ac-link {
		width: 13.5%;
		display: block;
		background: #fff url("../../common/img/icon_ac_arrow.svg") no-repeat center bottom 15px;
		border-radius: 10px;
		text-align: center;
		padding: 20px 5px 45px 5px;
	}
	#charm-beginning .anchor-list a.ac-link:hover {
		background: #fff url("../../common/img/icon_ac_arrow.svg") no-repeat center bottom 10px;
		color: #74B933;
	}
		#charm-beginning .anchor-list a.ac-link .head {
			font-size: 1.2rem;
			font-weight: 600;
			line-height: 1;
		}

		#charm-beginning .anchor-list a.ac-link .number {
			font-size: 4.0rem;
			font-weight: 600;
			line-height: 1;
			margin-bottom: 8px;
		}

		#charm-beginning .anchor-list a.ac-link h3 {
			font-size: 1.4rem;
			font-weight: 600;
			letter-spacing: 0;
			line-height: 1.4em;
		}


	
	
/* charm
--------------------- */
.charm .head {
	width: 180px;
	font-size: 8.0rem;
	line-height: 1;
	-ms-writing-mode: tb-lr;
	writing-mode: vertical-lr;
}

.charm .area {
	width: -webkit-calc(100% - 180px);
	width: calc(100% - 180px);
}
	.charm .area h2 {
		font-size: 4.6rem;
		font-weight: 700;
		line-height: 1.3em;
		margin-bottom: 25px;
	}

	.charm .area .pht {
		margin-bottom: 50px;
	}

	.charm .area h3 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 3.2rem;
		font-weight: 700;
		line-height: 1.3em;
		margin-bottom: 20px;
	}
		.charm .area h3 .en {
			font-size: 1.6rem;
			font-weight: 600;
			margin-top: 3px;
			padding-right: 20px;
		}

	.charm .area ul.episode li {
		width: 48%;
		margin-right: 4%;
		background: #F8FCF4;
		border-radius: 20px;
		box-shadow: 10px 10px 10px 0px rgba(0, 163, 60, 0.15);
		margin-bottom: 50px;
		padding: 30px;
		font-size: 1.6rem;
		line-height: 1.8em;
		position: relative;
	}
	.charm .area ul.episode li:nth-child(2n) {
		margin-right: 0;
	}
	.charm .area ul.episode li:nth-child(3),
	.charm .area ul.episode li:nth-child(4) {
		margin-bottom: 0;
	}
	.charm .area ul.episode li:before {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent #f8fcf4 transparent transparent;
		border-width: 0px 34px 34px 0px;
		position: absolute;
		bottom: -33px;
		left: 30px;
	}

	.charm.bg-gr-light .area ul.episode li {
		background: #fff;
	}
	.charm.bg-gr-light .area ul.episode li:before {
		border-color: transparent #fff transparent transparent;
	}


	
	
/* appeal
--------------------- */
#appeal {
	padding-top: 100px;
}
	#appeal h2 {
		font-size: 2.0rem;
		font-weight: 700;
		line-height: 1.6em;
		text-align: center;
		margin-bottom: 60px;
	}

	#appeal .list .whitebox {
		border-radius: 20px;
		margin-bottom: 80px;
		padding: 0 80px 80px 80px;
	}
	#appeal .list .whitebox:nth-child(1) {
		background: #fff url("../img/appeal/illust01.svg") no-repeat right top / auto 210px;
	}
	#appeal .list .whitebox:nth-child(2) {
		background: #fff url("../img/appeal/illust02.svg") no-repeat right top / auto 210px;
	}
	#appeal .list .whitebox:nth-child(3) {
		background: #fff url("../img/appeal/illust03.svg") no-repeat right top / auto 210px;
	}
	#appeal .list .whitebox:nth-child(4) {
		background: #fff url("../img/appeal/illust04.svg") no-repeat right top / auto 210px;
	}
	#appeal .list .whitebox:nth-child(5) {
		background: #fff url("../img/appeal/illust05.svg") no-repeat right top / auto 210px;
	}
	#appeal .list .whitebox:nth-child(6) {
		background: #fff url("../img/appeal/illust06.svg") no-repeat right top / auto 210px;
	}
	#appeal .list .whitebox:nth-last-child(1) {
		margin-bottom: 0;
	}
		#appeal .list .whitebox .head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 50px 0;
			position: relative;
		}
		#appeal .list .whitebox .head:before {
			content: "";
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 26px 37px 0px 37px;
			position: absolute;
			bottom: -15px;
			left: 50%;
			margin-left: -37px;
		}
		#appeal .list .whitebox:nth-child(1) .head:before,
		#appeal .list .whitebox:nth-child(4) .head:before {
			border-color: #3ba1d3 transparent transparent transparent;
		}
		#appeal .list .whitebox:nth-child(2) .head:before,
		#appeal .list .whitebox:nth-child(5) .head:before {
			border-color: #DE7674 transparent transparent transparent;
		}
		#appeal .list .whitebox:nth-child(3) .head:before,
		#appeal .list .whitebox:nth-child(6) .head:before {
			border-color: #74B933 transparent transparent transparent;
		}
			#appeal .list .whitebox .head dl {
				padding-bottom: 5px;
			}
			#appeal .list .whitebox .head dl.blue {
				border-bottom: dashed 2px #3BA1D3;
			}
			#appeal .list .whitebox .head dl.red {
				border-bottom: dashed 2px #DE7674;
			}
			#appeal .list .whitebox .head dl.yellow-green {
				border-bottom: dashed 2px #74B933;
			}
				#appeal .list .whitebox .head dl dt {
					font-size: 1.7rem;
					font-weight: 600;
					line-height: 1;
					text-align: center;
				}
				#appeal .list .whitebox .head dl dd {
					font-size: 6.8rem;
					font-weight: 600;
					line-height: 1;
				}

			#appeal .list .whitebox .head h3 {
				width: -webkit-calc(100% - 110px);
				width: calc(100% - 110px);
				font-size: 4.0rem;
				font-weight: 700;
				line-height: 1.3em;
			}
				#appeal .list .whitebox .head h3 span {
					background: linear-gradient(transparent 70%, #FFF617 70%);
				}

		#appeal .list .whitebox .area {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			background: #F7F7F7;
			border-radius: 20px;
			padding: 50px;
		}
			#appeal .list .whitebox .area .pht {
				width: 47.5%;
				border-radius: 15px;
			}

			#appeal .list .whitebox .area .text {
				width: 47.5%;
			}
				#appeal .list .whitebox .area .text h4 {
					font-size: 2.6rem;
					font-weight: 700;
					line-height: 1.4em;
					margin-bottom: 15px;
				}


	
	
/* development
--------------------- */
#development ul.pht-list li {
	width: 32%;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 30px;
}


	
	
/* training
--------------------- */
#training .flow {
	max-width: 1100px;
	margin: 0 auto;
}


	
	
/*training
--------------------- */
#new-employees {
	background-color: rgba(91, 184, 205, 0.15);
}
#staff {
	background-color: rgba(121, 184, 88, 0.15);
	border-top: solid 2px #fff;
}
#manager {
	background-color: rgba(227, 129, 135, 0.15);
	border-top: solid 2px #fff;
}
	.training .title {
		margin-bottom: 0;
	}

	.training .notes {
		font-size: 1.4rem;
		line-height: 1.6em;
		margin-top: 40px;
	}

	.training .list .box {
		margin-top: 40px;
		background: #fff;
		border-radius: 20px;
		padding: 25px;
	}
	.training .list.column2 .box {
		width: 48.25%;
		margin-right: 3.5%;
	}
	.training .list.column2 .box:nth-child(2n) {
		margin-right: 0;
	}
	.training .list.column3 .box {
		width: 31%;
		margin-right: 3.5%;
	}
	.training .list.column3 .box:nth-child(3n) {
		margin-right: 0;
	}
		.training .list .box .head {
			height: 36px;
			border-radius: 6px;
			font-size: 1.6rem;
			font-weight: 700;
			text-align: center;
			line-height: 36px;
			margin-bottom: 20px;
		}

		.training .list .box h3 {
			font-size: 2.2rem;
			font-weight: 700;
			line-height: 1.3em;
			margin-bottom: 10px;
		}

		.training .list .box .txt {
			line-height: 1.6em;
		}

		.training .list .box ol.number-list {
			background: #F7F7F7;
			border-radius: 10px;
			margin-top: 15px;
			padding: 20px 15px 20px 35px;
		}
			.training .list .box ol.number-list li {
				font-size: 1.4rem;
				line-height: 1.5em;
				margin-bottom: 5px;
			}
			.training .list .box ol.number-list li:nth-last-child(1) {
				margin-bottom: 0;
			}




/* 1024px */
@media screen and (max-width: 1024px) {


	
	
/* charm-beginning
--------------------- */
#charm-beginning {
	padding: 70px 0;
}
	#charm-beginning h2 {
		font-size: 1.8rem;
		margin-bottom: 25px;
	}

	#charm-beginning .anchor-list {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: center;
	}
		#charm-beginning .anchor-list a.ac-link {
			width: 23.5%;
			background: #fff url("../../common/img/icon_ac_arrow.svg") no-repeat center bottom 15px;
			margin-top: 2%;
			margin-right: 2%;
		}
		#charm-beginning .anchor-list a.ac-link:nth-child(4n),
		#charm-beginning .anchor-list a.ac-link:nth-last-child(1) {
			margin-right: 0;
		}


	
	
/* charm
--------------------- */
.charm .head {
	width: 120px;
	font-size: 6.0rem;
}

.charm .area {
	width: -webkit-calc(100% - 120px);
	width: calc(100% - 120px);
}
	.charm .area h2 {
		font-size: 3.6rem;
	}

	.charm .area .pht {
		margin-bottom: 40px;
	}

	.charm .area h3 {
		font-size: 2.6rem;
	}
		.charm .area h3 .en {
			font-size: 1.4rem;
		}

	.charm .area ul.episode li {
		border-radius: 15px;
		margin-bottom: 50px;
		padding: 25px;
		font-size: 1.5rem;
		line-height: 1.7em;
	}
	.charm .area ul.episode li:nth-child(2n) {
		margin-right: 0;
	}
	.charm .area ul.episode li:nth-child(3),
	.charm .area ul.episode li:nth-child(4) {
		margin-bottom: 0;
	}
	.charm .area ul.episode li:before {
		border-width: 0px 30px 30px 0px;
		bottom: -29px;
		left: 30px;
	}


	
	
/* appeal
--------------------- */
#appeal {
	padding-top: 80px;
}
	#appeal h2 {
		font-size: 1.8rem;
		margin-bottom: 40px;
	}

	#appeal .list .whitebox {
		border-radius: 15px;
		margin-bottom: 60px;
		padding: 0 30px 30px 30px;
	}
	#appeal .list .whitebox:nth-child(1) {
		background: #fff url("../img/appeal/illust01.svg") no-repeat right top / auto 134px;
	}
	#appeal .list .whitebox:nth-child(2) {
		background: #fff url("../img/appeal/illust02.svg") no-repeat right top / auto 134px;
	}
	#appeal .list .whitebox:nth-child(3) {
		background: #fff url("../img/appeal/illust01.svg") no-repeat right top / auto 134px;
	}
	#appeal .list .whitebox:nth-child(4) {
		background: #fff url("../img/appeal/illust02.svg") no-repeat right top / auto 134px;
	}
	#appeal .list .whitebox:nth-child(5) {
		background: #fff url("../img/appeal/illust01.svg") no-repeat right top / auto 134px;
	}
	#appeal .list .whitebox:nth-child(6) {
		background: #fff url("../img/appeal/illust02.svg") no-repeat right top / auto 134px;
	}
		#appeal .list .whitebox .head {
			padding: 30px 0;
		}
			#appeal .list .whitebox .head dl dt {
				font-size: 1.5rem;
			}
			#appeal .list .whitebox .head dl dd {
				font-size: 5.0rem;
			}

			#appeal .list .whitebox .head h3 {
				width: -webkit-calc(100% - 85px);
				width: calc(100% - 85px);
				font-size: 2.8rem;
			}

		#appeal .list .whitebox .area {
			border-radius: 15px;
			padding: 30px;
		}
			#appeal .list .whitebox .area .pht {
				border-radius: 10px;
			}

			#appeal .list .whitebox .area .text h4 {
				font-size: 2.2rem;
			}


	
	
/* development
--------------------- */
#development ul.pht-list li {
	margin-bottom: 25px;
	border-radius: 15px;
}


	
	
/*training
--------------------- */
.training .notes {
	font-size: 1.3rem;
	margin-top: 30px;
}

.training .list .box {
	margin-top: 30px;
	border-radius: 15px;
	padding: 20px;
}
.training .list.column3 .box {
	width: 48.25%;
}
.training .list.column3 .box:nth-child(3n) {
	margin-right: 3.5%;
}
.training .list.column3 .box:nth-child(2n) {
	margin-right: 0;
}
	.training .list .box .head {
		height: 32px;
		border-radius: 4px;
		font-size: 1.5rem;
		line-height: 32px;
		margin-bottom: 15px;
	}

	.training .list .box h3 {
		font-size: 2.0rem;
		margin-bottom: 8px;
	}

	.training .list .box ol.number-list {
		border-radius: 7px;
	}
		.training .list .box ol.number-list li {
			font-size: 1.3rem;
		}



}





/* max 768px */
@media screen and (max-width: 768px) {


	
	
/* charm-beginning
--------------------- */
#charm-beginning {
	padding: 60px 0;
}
	#charm-beginning h2 {
		font-size: 1.7rem;
		margin-bottom: 25px;
	}

	#charm-beginning .anchor-list a.ac-link {
		width: 48.5%;
		margin-top: 3%;
		margin-right: 3%;
	}
	#charm-beginning .anchor-list a.ac-link:nth-child(2n),
	#charm-beginning .anchor-list a.ac-link:nth-last-child(1) {
		margin-right: 0;
	}
		#charm-beginning .anchor-list a.ac-link .head {
			font-size: 1.0rem;
		}

		#charm-beginning .anchor-list a.ac-link .number {
			font-size: 3.0rem;
		}


	
	
/* charm
--------------------- */
.charm .inner {
	display: block;
}
	.charm .head {
		width: 100%;
		font-size: 2.0rem;
		-ms-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
		margin-bottom: 20px;
	}

	.charm .area {
		width: 100%;
	}
		.charm .area h2 {
			font-size: 2.8rem;
			margin-bottom: 20px;
		}

		.charm .area .pht {
			margin-bottom: 35px;
		}

		.charm .area h3 {
			font-size: 2.3rem;
			margin-bottom: 15px;
		}
			.charm .area h3 .en {
				font-size: 1.2rem;
				padding-right: 15px;
			}

		.charm .area ul.episode {
			display: block;
		}
			.charm .area ul.episode li {
				width: 100%;
				margin-bottom: 40px;
				padding: 20px;
				font-size: 1.4rem;
				line-height: 1.6em;
				margin-right: 0;
			}
			.charm .area ul.episode li:nth-child(3) {
				margin-bottom: 40px;
			}


	
	
/* appeal
--------------------- */
#appeal {
	padding-top: 60px;
}
	#appeal h2 {
		font-size: 1.7rem;
		margin-bottom: 40px;
	}

	#appeal .list .whitebox {
		border-radius: 15px;
		margin-bottom: 40px;
		padding: 0 25px 25px 25px;
	}
	#appeal .list .whitebox:nth-child(1),
	#appeal .list .whitebox:nth-child(2),
	#appeal .list .whitebox:nth-child(3),
	#appeal .list .whitebox:nth-child(4),
	#appeal .list .whitebox:nth-child(5),
	#appeal .list .whitebox:nth-child(6) {
		background: #fff none;
	}
		#appeal .list .whitebox .head {
			display: block;
			padding: 25px 0;
		}
			#appeal .list .whitebox .head dl {
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: left;
				margin-bottom: 5px;
				padding-bottom: 0;
				border-bottom: none !important;
			}
				#appeal .list .whitebox .head dl dt {
					font-size: 1.6rem;
				}
				#appeal .list .whitebox .head dl dd {
					font-size: 1.6rem;
					padding-left: 8px;
				}

			#appeal .list .whitebox .head h3 {
				width: 100%;
				font-size: 2.3rem;
				line-height: 1.5em;
				text-align: center;
			}

		#appeal .list .whitebox .area {
			display: block;
			padding: 25px;
		}
			#appeal .list .whitebox .area .pht {
				width: 100%;
			}
	
			#appeal .list .whitebox .area .text {
				width: 100%;
				padding-top: 18px;
			}
				#appeal .list .whitebox .area .text h4 {
					font-size: 1.8rem;
				}


	
	
/* development
--------------------- */
#development ul.pht-list {
	width: 114%;
	margin-left: -7%;
}
	#development ul.pht-list li {
		margin-bottom: 20px;
		height: 100%;
		aspect-ratio: 1 / 1;;
	}
		#development ul.pht-list li img {
			height: 100%;
			object-fit: cover;
		}


	
	
/*training
--------------------- */
.training .notes {
	font-size: 1.3rem;
	margin-top: 30px;
}

.training .list {
	display: block;
}
	.training .list .box {
		width: 100% !important;
		margin-right: 0 !important;
	}


}