/* 　==============　トップページここから　==============　*/
:root {
  --main-color-green: #00b7af;
  --main-color-orange: #e6a705;
  --main-color-white: #fff;
  --main-color-yellow: #fff16c;
  --main-color-cream: #f7f3f0;
  --main-color-cream2: #eddebc;
  --font-size-xxl: 36px;
  --font-size-xl: 32px;
  --font-size-l: 24px;
  --font-size-m: 20px;
  --font-size-r: 18px;
  --font-size-s: 14px;
  @media screen and (max-width:750px) {
	  --font-size-xxl: 6.6vw;
	  --font-size-xl: 4.8vw;
	  --font-size-l: 4.4vw;
	  --font-size-m: 4.0vw;
	  --font-size-r: 3.6vw;
	  --font-size-s: 2.6vw;
  }
}
.home{
	.content01{
		text-align: center;
		.inner{
			p{
				text-align:center;
				font-weight:bold;
				padding:3% 0;
				font-size:var(--font-size-r);
				@media screen and (max-width:750px) {
					font-size:var(--font-size-r);
				}
				span{
					color: var(--main-color-yellow) ;
					display: block;
					text-align: center;
					font-size:var(--font-size-xxl);
					font-weight:bold;
					line-height:1.1;
				}
			}
		}
	}/* end content01　*/
	.content02{
		background-color: var(--main-color-cream);
		.inner{
			h2{
				text-align: center;
				font-size: var(--font-size-xxl);

				font-weight: bold;
				vertical-align:middle;
				line-height:1.2;
				margin-bottom:6%;
				span{
					font-size:1.8em;
					padding: 0 15px;
					font-weight: bold;
					vertical-align:baseline;
					color: var(--main-color-orange);
					line-height:1.2;
				}
				& + ul{
					display: flex;
					justify-content:center;
					gap:25px;
					@media screen and (max-width:800px) { 
						gap:3%;
					}
					li{
						background-image: url(../images/content02_baloon.png);
						background-size: 100% auto;
						background-repeat: no-repeat;
						background-position: top center;
						width:20%;
						text-align: center;
						padding: 6.5% 0 7.4%;
						box-sizing: border-box;
						font-size: var(--font-size-m);
						font-weight: bold;
						line-height:1.4;
						color:#fff;
						position:relative;
						@media screen and (max-width:1000px) { 
							padding: 4.5% 0 7.4%;
							font-size: 2.2vw;
						}
						@media screen and (max-width:800px) { 
							width:30%;
							padding: 7.5% 0 17.0%;
							font-size: 3.0vw;
						}
						span{
							font-size: var(--font-size-r);
							font-weight: bold;
							line-height:1.4;
							color: var(--main-color-yellow);
							@media screen and (max-width:1000px) { 
								font-size: 2.6vw;
							}
							@media screen and (max-width:800px) { 
								font-size: 3.6vw;
							}
						}
						&:before{
							content: "";
							position: absolute;
							padding: 30% 12%;
							background-repeat: no-repeat;
							background-size: 100% auto;
							top: -10%;
							left:38%;
						}
						&:nth-child(1):before{
							background-image: url(../images/content02_num01.png);
						}
						&:nth-child(2):before{
							background-image: url(../images/content02_num02.png);
						}
						&:nth-child(3):before{
							background-image: url(../images/content02_num03.png);
						}
					}
				}
			}
		}
		.point{
			padding-top: 4%;
			background-color: var(--main-color-cream);
			& > div{
				padding-bottom:8%;
				 .inner{
					h3{
						position: relative;
						text-align:center;
						span{
							display: inline-block;
							margin: 0 auto;
							color: var(--main-color-green);
							font-weight: bold;
							font-size: var(--font-size-m);
							background-position: left 20px center;
							background-repeat: no-repeat;
							background-size: auto 100%;
							line-height: 1.6;
							padding-left: 80px;
							padding-right: 35px;
							position: relative;
							background-color: var(--main-color-cream);
							@media screen and (max-width:800px) {
								padding-left: 12%;
								padding-right: 3.5%;
								background-position: left;
							}
						}
						&:before{
							content: "";
							display: block;
							width: 100%;
							position: absolute;
							border-bottom:6px solid var(--main-color-green);
							bottom:calc((var(--font-size-m) * 2 * 1.6 / 2) - 3px );
						}
					}
				}
				.voice{
					.inner{
						ul{
							display: flex;
							justify-content: space-between;
							@media screen and (max-width:800px) {
								display: block;
							}
							li{
								p{
									font-size: 0.8rem;
									line-height: 1.3;
									background-color: #fff;
									border:1px solid #000;
									border-radius: 4px;
									padding: 6px 10px;
									box-sizing: border-box;
									width: 70%;
									position: relative;
									@media screen and (max-width:800px) { 
										width: 90%;
									}
								}
							}
						}
					}
				}
			}
			& > .point01 .inner h3 span{
				background-image: url(../images/content02_num01.png);
			}
			& > .point02 .inner h3 span{
				background-image: url(../images/content02_num02.png);
			}
			& > .point03 .inner h3 span{
				background-image: url(../images/content02_num03.png);
			}
			.point01,
			.point02,
			.point03{
				.voice{
					h5{
						font-size: 90px;
						position:relative;
						font-weight: bold;
						color: var(--main-color-green);
						background-image: url(../images/content02_voice_tit.png);
						background-repeat: no-repeat;
						background-position: right bottom;
						width: 30%;
						box-sizing: border-box;
						padding: 20px 80px 20px;
						line-height: 1;
						text-align: right;
						text-shadow: 
						3px 3px 0 #fff,
						-3px 3px 0 #fff,
						-3px -3px 0 #fff,
						3px -3px 0 #fff;
						margin-bottom: -15px;
						z-index: 2;

            @media screen and (max-width: 800px) {
              font-size: 8.0vw;
              background-size: auto 55%;
              padding-left: 5%;
            }
					}
				}
			}
			.point01{
				.ba{
					display: flex;
					width: 94%;
					margin: 0 auto;
					max-width: 1100px;
					justify-content: space-between;
					margin-bottom:4%;
					h4{
						margin-top: 8%;
						margin-bottom: 20px;
					}
					& > div{
						background-repeat: no-repeat;
						background-size: 100% auto;
						background-position: bottom center;
						padding-bottom:15%;
						border-bottom:2px solid #000;
						p{
							text-align: center;
							font-weight: bold;
							font-size: var(--font-size-r);
						}
					}
					.before{
						width: 45%;
						background-image: url(../images/content02_p01_img01.png);
						p{
							padding-left: 12%;
							@media screen and (max-width:800px) { 
								font-size: 1.8vw;
							}
						}
					}
					.after{
						width: 53%;
						background-image: url(../images/content02_p01_img02.png);
						p{
							padding-right: 30%;
							@media screen and (max-width:800px) { 
								font-size: 1.8vw;
							}
						}
					}
					& + p,
					& + p + p{
						text-align: center;
						color: var(--main-color-green);
						font-size: var(--font-size-l);
						font-weight: bold;
						margin-bottom:10px;
						span{
							font-size: var(--font-size-r);
							font-weight: bold;
							padding: 0 2px;
						}
					}
					& + p + p + ul{
						text-align:center;
						li{
							display: inline-block;
							background-color:var(--main-color-green);
							color: #fff;
							font-weight: bold;
							border-radius: 4px;
							padding: 2px 15px;
							margin: 0 4px;
						}
					}
				}
				.voice{
					position:relative;
					@media screen and (max-width:800px) {
						margin-bottom: 8%;
					}
					h5{
						font-size: 90px;
						position:relative;
						font-weight: bold;
						color: var(--main-color-green);
						background-image: url(../images/content02_voice_tit.png);
						background-repeat: no-repeat;
						background-position: right bottom;
						width: 30%;
						box-sizing: border-box;
						padding: 20px 80px 20px;
						line-height: 1;
						text-align: right;
						text-shadow: 
						3px 3px 0 #fff,
						-3px 3px 0 #fff,
						-3px -3px 0 #fff,
						3px -3px 0 #fff;
						margin-bottom: -15px;
						z-index: 2;
						@media screen and (max-width:800px) { 
							font-size: 8.0vw;
							background-size: auto 55%;
							padding-left: 5%;
						}
					}
					& + h5{
						background-color: var(--main-color-green);
						font-size: var(--font-size-m);
						color: #fff;
						font-weight: bold;
						text-align: center;
						width: 60%;
						margin: 0 auto -20px;
						padding: 4px 20px;
						border-radius: 8px;
						position: relative;
						z-index:2;
						@media screen and (max-width:800px) {
							font-size: 3.0vw;
							margin-bottom: -10px;
						}
						& + ul{
							display: flex;
							gap: 0;
							justify-content: center;
							max-width: 90%;
							margin: 0 auto;
						}
					}
					.inner{
						ul{
							li{
								width: calc(100% / 3);
								aspect-ratio: 5 / 5;
								background-repeat:no-repeat;
								background-size:65% auto;
								position:relative;
								p{
									position:absolute;
									@media screen and (max-width:800px) { 
										font-size: 1.8vw;
									}
								}
								&:nth-child(1){
									background-image: url(../images/content02_p01_vmg01.webp);
									background-position: right top;
									p{
										bottom:20%;
										left:20%;
										@media screen and (max-width:800px) { 
											bottom: -20%;
										}
										&:after{
											content: "";
											display: block;
											position: absolute;
											top:-20px;
											left: 60px;
											width: 28px;
											height: 20px;
											background-image: url(../images/content02_arrow02.png);
											background-repeat: no-repeat;
											@media screen and (max-width:800px) {
												left: 12px;
											}
										}
									}
								}
								&:nth-child(2){
									background-image: url(../images/content02_p01_vmg02.webp);
									background-position: center bottom;
									p{
										top:20%;
										right:10%;
										width:50%;
										@media screen and (max-width:800px) {
											width:70%;
											top:-5%;
										}
										&:after{
											content: "";
											display: block;
											position: absolute;
											bottom:-20px;
											right: 40px;
											width: 28px;
											height: 20px;
											background-image: url(../images/content02_arrow03.png);
											background-repeat: no-repeat;
											@media screen and (max-width:800px) {
												right: 9px;
											}
										}
									}
								}
								&:nth-child(3){
									background-image: url(../images/content02_p01_vmg03.webp);
									background-position: left top;
									p{
										bottom:15%;
										right:20%;
										width:65%;
										@media screen and (max-width:800px) {
											width:100%;
											bottom:-18%;
											right:2%;
										}
										&:after{
											content: "";
											display: block;
											position: absolute;
											top:-20px;
											right: 80px;
											width: 28px;
											height: 20px;
											background-image: url(../images/content02_arrow01.png);
											background-repeat: no-repeat;
											@media screen and (max-width:800px) {
												right: 35px;
											}
										}
									}
								}
							}
						}
					}
				}
			}
			.point02,
			.point03{
				.inner{
					h3{
						margin-bottom:3%;
						& + p{
							text-align: center;
							color: var(--main-color-green);
							font-weight: bold;
							font-size: var(--font-size-l);
							@media screen and (max-width:800px) {
								font-size:4vw;
							}
							span{
							font-weight: bold;
							font-size: var(--font-size-r);
							@media screen and (max-width:800px) {
								font-size:3.2vw;
							}
							}				
						}
					}
				}
				.voice{
					ul{
						li{
							width: calc(100% / 3);
							aspect-ratio: 5 / 5;
							background-repeat:no-repeat;
							background-size:65% auto;
							position:relative;
							p{
								position:absolute;
							}
							&:nth-child(1){
								p{
									top:55%;
									right:-25%;
									width:50%;
									@media screen and (max-width: 800px) {
										width:90%;
									}
									&:after{
										content: "";
										display: block;
										position: absolute;
										top:-20px;
										left: 60px;
										width: 28px;
										height: 20px;
										background-image: url(../images/content02_arrow02.png);
										background-repeat: no-repeat;
									}
								}
							}
							&:nth-child(2){
								p{
									top:20%;
									right:-18%;
									width:50%;
									@media screen and (max-width: 800px) {
										width:90%;
									}
									&:after{
										content: "";
										display: block;
										position: absolute;
										bottom:-20px;
										right: 40px;
										width: 28px;
										height: 20px;
										background-image: url(../images/content02_arrow03.png);
										background-repeat: no-repeat;
									}
								}
							}
							&:nth-child(3){
								p{
									bottom:-55%;
									right:-10%;
									width:65%;
									@media screen and (max-width: 800px) {
										width:98%;
									}
									&:after{
										content: "";
										display: block;
										position: absolute;
										top:-20px;
										right: 80px;
										width: 28px;
										height: 20px;
										background-image: url(../images/content02_arrow01.png);
										background-repeat: no-repeat;
									}
								}
							}
						}
					}
				}
			}
			.point02{
				.inner{
					.feature{
						display: flex;
						gap:15px;
						justify-content:center;
						padding:3% 0;
						p{
							text-align: center;
							border:3px solid var(--main-color-green);
							background-color: yellow;
							border-radius: 10px;
							padding: 5px 15px;
							font-size: var(--font-size-m);
							font-weight: bold;
							color:var(--main-color-green);
						}
						& + p{
							text-align: center;
							color: var(--main-color-green);
							font-weight: bold;
							font-size: var(--font-size-l);
							span{
							font-weight: bold;
							font-size: var(--font-size-r);
							}			
						}
					}
				}
				.voice{
					.inner{
						ul{
							li:nth-child(1){
								background-image: url(../images/content02_p02_vmg01.webp);
								background-position: right top;
							}
							li:nth-child(2){
								background-image: url(../images/content02_p02_vmg02.webp);
								background-position: center bottom;
							}
							li:nth-child(3){
								background-image: url(../images/content02_p02_vmg03.webp);
								background-position: left top;
							}
						}
					}
				}
			}
			.point03{
				.inner{
					h3{
						& + p{
							margin-bottom:3%;
							& + p,
							& + p + p + p{
								text-align: center;
								color: var(--main-color-green);
								font-weight: bold;
								font-size: var(--font-size-l);
								span{
								font-weight: bold;
								font-size: var(--font-size-r);
								}
							}
						}
					}
					.emp{
						text-align:center;
						padding:1% 0;
						span{
							background-color: yellow;
							font-size: var(--font-size-l);
							font-weight: bold;
						}
					}
				}
				.voice{
					.inner{
						ul{
							li:nth-child(1){
								background-image: url(../images/content02_p03_vmg01.webp);
								background-position: right top;
							}
							li:nth-child(2){
								background-image: url(../images/content02_p03_vmg02.webp);
								background-position: center bottom;
							}
							li:nth-child(3){
								background-image: url(../images/content02_p03_vmg03.webp);
								background-position: left top;
							}
						}
					}
				}
			}
			.point01,
			.point02,
			.point03{
				.voice{
					.inner{
						ul{
							li{
								@media screen and (max-width:800px) { 
									width: 100%;
									box-sizing: border-box;
									background-size:28% auto;
									aspect-ratio:auto;
									min-height:27vw;
									background-position:right top !important;
									padding:12% 0 0 0;
									box-sizing:border-box;
									p{
										width: 70% !important;
										position: relative;
										left: 0 !important;
										font-size: 2.4vw;
										&:after{
											background-image: url(../images/content02_arrow02.png) !important;
											bottom: -20px !important;
											top: -20px !important;
											left: 90% !important;
											right: 0 !important;
										}
									}
								}
								&:nth-child(2){
									@media screen and (max-width:800px) { 
										background-position:left bottom !important;
										padding-left: 30%;
										width:100%;
										p{
											box-sizing: border-box;
											width: 100% !important;
											left: 0 !important;
											&:after{
												background-image: url(../images/content02_arrow01.png) !important;
												bottom: -20px !important;
												top: -20px !important;
												left: 3% !important;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}/* end content02　*/
	.content03{
		h2{
			font-size: var(--font-size-l);
			text-align: center;
			font-weight: bold;
			background-color: var(--main-color-cream);
			padding: 4% 0 2% 0;
		}
		.questionbox{
			.question01,
			.question02,
			.question03{
				padding:4% 0;
				.inner{
					h3{
						div{
						position:relative;
						z-index:2;
							&:after{
								content: url(../images/content04_arrow.webp);
								display: block;
								position: absolute;
								right: -30px;
								top: 20px;
								z-index: 1;
							}
						}
					}
				}
			}
			.question01{
				background-color:var(--main-color-cream);
				.inner{
					h3{
						background-image: url(../images/content03_img03.webp);
						background-position: right center;
					}
				}
			}
			.question02{
				.inner{
					h3{
						background-image: url(../images/content03_img02.webp);
						background-position: left center;
						div{
							margin-left: 30%;
							&:after{
								right: inherit;
								left: -30px;
								transform: scale(-1, 1);
							}
						}
					}
					.exp{
						display: flex;
						gap:30px;
						& > div{
							width: calc((100% - 30px) / 2 );
							text-align:center;
							h4{
								text-align: center;
							}
						}
					}
				}
			}
			.question03{
				background-color:var(--main-color-cream);
				.inner{
					h3{
						background-image: url(../images/content03_img04.webp);
						background-position: right center;
					}
					.exp{
						h4{
							text-align: center;
							color: #000;
							font-size: var(--font-size-l);
							margin-bottom: 2%;
						}
						& > div{
							padding: 4% 0;
							display: flex;
							gap:20px;
							& > div{
								flex: 1;
								padding: 10px 15px;
								word-wrap: break-word;
								h5{
									border-bottom: 1px solid gray;
									font-weight: bold;
									text-align: center;
									margin-bottom: 10px;
								}
							}
							div:nth-child(1){
								border:4px solid var(--main-color-orange);
								border-radius: 10px;
								h5{
									color:var(--main-color-orange);
									border-color: var(--main-color-orange);
								}
							}
							div:nth-child(2){
								border:4px solid var(--main-color-green);
								border-radius: 10px;
								h5{
									color:var(--main-color-green);
									border-color: var(--main-color-green);
								}
							}
							& + p{
								text-align: center;
								font-size: var(--font-size-l);
								font-weight: bold;
							}
						}
					}
					& + .inner{
						h3{
							text-align:center;
							position:relative;
							background-image:none;
							span{
								font-size: var(--font-size-l);
								font-weight: bold;
								color: var( --main-color-green);
								background-color: var( --main-color-cream);
								padding: 0 15px;
								line-height: 1.2;
								position: relative;
								z-index: 2;
                display: inline-block;
                text-align: center;
							}
							&:after{
								content: "";
								display: block;
								width: 100%;
								border-top: 10px solid var( --main-color-green);
								position: absolute;
								z-index: 1;
								top: calc( 5px + 44px );
							}
							& + p{
								text-align: center;
								font-size: var(--font-size-r);
								font-weight: bold;
								padding-bottom: 2%;
							}
						}
					}
				}
				.style{
					&:has(.btn input:checked),
					&:has(.view:checked){
						ul{
							max-height: 5000px;
						}
						.cover{
							display: none;
						}
						.view{
							display: none;
							& + label{
								display: none;
							}
						}
					}
					.btn{
						width:60%;
						margin-left:auto;
						margin-right:auto;
						position:relative;
						padding-bottom:4%;
						& > div{
						display:flex;
						gap:15px;
						margin-bottom:15px;
							& > div{
								width: 46%;
								display: inline-block;
								input{
									display: none;
									&:checked{
										& + label{
											color: #fff;
										}
									}
								}
								label{
									text-align: center;
									padding: 6px 0;
									font-weight: bold;
									font-size: var(--font-size-m);
									cursor:pointer;
									filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
									background-color: #fff;
									border-radius: 30px;
									width: 100%;
									display: block;
								}
							}
						}
						& > div.jc01{
							& > div{
								input{
									&:checked{
										& + label{
											background-color: var(--main-color-green);
										}
									}
								}
							}
						}
						& > div.jc02{
							& > div{
								input{
									&:checked{
										& + label{
											background-color: var(--main-color-orange);
										}
									}
								}
							}
						}
						& + ul{
							width: 100%;
							padding: 0 5% 2% 5%;
							box-sizing: border-box;
							max-width: 1100px;
							margin: 0 auto;
							display: flex;
							gap:30px 4.0% ;
							flex-wrap:wrap;
							position:relative;
							max-height:700px;
							overflow:hidden;
							transition: all 1.0s 0s ease;
							& + .cover{
								position:relative;
								background: linear-gradient(rgba(247, 243, 240, 0.0), rgba(247, 243, 240, 1.0) 50%, rgba(247, 243, 240, 1.0));
								padding: 5% 0;
								margin-top: -10%;
								z-index: 2;
								& + input {
									display: none;
									& + label {
										width: 60%;
										margin-left: auto;
										margin-right: auto;
										text-align: center;
										color: #fff;
										font-weight: bold;
									}
								}
							}
							li{
								position: relative;
								width: calc(( 100% - 4% ) / 2 );
								border-radius: 10px;
								filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
								background-color: #fff;
								@media screen and (max-width:800px) {
									width: 100%;
								}
								&.none{
									display: none;
								}
								.info{
									padding:10px;
									box-sizing:border-box;
									width:60%;
									@media screen and (max-width:1200px) {
										width:70%;
									}
									@media screen and (max-width:800px) {
										width:65%;
									}
									.job01{
										display: flex;
										border-bottom:1px solid var(--main-color-orange);
										padding-bottom:5px;
										margin-bottom:5px;
										h4{
											background-color: var(--main-color-orange);
											color: #fff;
											text-align: center;
											padding: 5px 24px;
											line-height: 1.4;
											@media screen and (max-width:1000px) {
												padding: 5px 3%;
											}
											@media screen and (max-width:800px) {
												padding: 5px 3%;
												font-size: 3.2vw;
											}
											& + div{
												text-align: center;
												padding: 5px 24px;
												font-weight: bold;
												line-height: 1.4;
												@media screen and (max-width:1000px) {
													padding: 5px 3%;
												}
												@media screen and (max-width:800px) {
												padding: 5px 3%;
												font-size: 3.2vw;
												}
											}
										}
									}
									.job02{
										display: flex;
										gap:10px;
										margin-bottom:5px;
										div:nth-child(1){
											display: flex;
											border-right:1px solid var(--main-color-orange);
											h4{
												font-weight: bold;
												font-size: var(--font-size-s);
												font-weight: bold;
												line-height: 1.3;
												padding:5px;
												& + span{
													font-size: var(--font-size-xxl);
													color: var(--main-color-orange);
													line-height: 1.0;
													padding:5px 15px 5px 5px;
													font-weight: bold;
													@media screen and (max-width:950px) {
														font-size: var(--font-size-xl);
													}
													@media screen and (max-width:900px) {
														font-size: var(--font-size-l);
													}
													@media screen and (max-width:800px) {
														padding:5px 2% 5px 5px;
														font-size: var(--font-size-xxl);
													}
													span{
														font-weight: bold;
														padding-left: 5px;
														@media screen and (max-width:800px) {
															font-size: var(--font-size-s);
														}
													}
												}
											}
										}
										div:nth-child(2){
											display: flex;
											align-items: center;
											h4{
												font-weight: bold;
												font-size: var(--font-size-s);
												font-weight: bold;
												line-height: 1.0;
												padding:5px;
												vertical-align:bottom;
												& + span{
													font-size: var(--font-size-xxl);
													color: var(--main-color-orange);
													line-height: 1.0;
													padding:5px;
													font-weight: bold;
													@media screen and (max-width:950px) {
														font-size: var(--font-size-xl);
													}
													@media screen and (max-width:900px) {
														font-size: var(--font-size-l);
													}
													@media screen and (max-width:800px) {
														font-size: var(--font-size-xxl);
													}
													span{
														font-weight: bold;
														padding-left: 5px;
														line-height: 1.0;
														vertical-align:bottom;
														@media screen and (max-width:800px) {
															line-height: 1.0;
															font-size: var(--font-size-s);
														}
													}
												}
											}
										}
									}
									.job03{
										display: flex;
										background-color: var(--main-color-orange);
										padding: 10px;
										box-sizing: border-box;
										h4{
											line-height: 1.3;
											font-weight: bold;
											font-size: var(--font-size-m);
											background-color: #fff;
											color: var(--main-color-orange);
											padding: 5px 10px;
											font-weight: bold;
											margin-right: 15px;
											& + div{
												color: #fff;
												font-size: calc((var(--font-size-xxl) * 1.4) );
												font-weight: bold;
												line-height: 1.2;
												span{
													font-size: var(--font-size-l);
													font-weight: bold;
													color: #fff;
													padding-left: 5px;
												}
											}
										}
									}
									.job04{
										display: flex;
										h4{
											font-weight: bold;
											font-size: var(--font-size-r);
											font-weight: bold;
											line-height: 1.3;
											padding:5px;
											vertical-align:bottom;
											& + div{
												color: var(--main-color-orange);
												font-size: calc((var(--font-size-xxl) * 1.4) );
												font-weight: bold;
												line-height: 1.0;
												span{
													font-weight: bold;
													font-size: var(--font-size-r);
												}
											}
										}
									}
								}
								.voice{
									width: 40%;
									position: absolute;
									right: 0;
									top: 0;
									background-repeat:no-repeat;
									background-position:top 4px center;
									background-size:60% auto;
									padding:20% 0 0 0 ;
									@media screen and (max-width:1200px) {
										width:30%;
									}
									@media screen and (max-width:800px) {
										width: 35%;
									}
									p{
										background-color: var(--main-color-cream);
										border-radius: 7px;
										filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
										padding: 10px;
										box-sizing: border-box;
										margin-right: -15px;
										margin-top: 15px;
										@media screen and (max-width:1200px) {
											font-size: var(--font-size-s);
											line-height: 1.2;
										}
										@media screen and (max-width:800px) {
											font-size: 2.8vw;
										}
									}
								}
							}
							li.jobcat01{
								.info{
									.job01{
										border-bottom:1px solid var(--main-color-green);
										h4{
											background-color: var(--main-color-green);
										}
									}
									.job02{
										div:nth-child(1){
											border-right:1px solid var(--main-color-green);
											@media screen and (max-width:800px) {
												flex: 1;
											}
											h4{
												& + span{
													color: var(--main-color-green);
													span{
													}
												}
											}
										}
										div:nth-child(2){
											h4{
												& + span{
													color: var(--main-color-green);
												}
											}
										}
									}
									.job03{
										background-color: var(--main-color-green);
										h4{
											color: var(--main-color-green);
										}
									}
									.job04{
										h4{
											& + div{
												color: var(--main-color-green);
											}
										}
									}
								}
							}
							li.jobcat02{
								.info{
									.job01{
										border-bottom:1px solid var(--main-color-orange);
										h4{
											background-color: var(--main-color-orange);
										}
									}
									.job02{
										div:nth-child(1){
											border-right:1px solid var(--main-color-orange);
											@media screen and (max-width:800px) {
												flex: 1;
											}
											h4{
												& + span{
													color: var(--main-color-orange);
													span{
													}
												}
											}
										}
										div:nth-child(2){
											h4{
												& + span{
													color: var(--main-color-orange);
												}
											}
										}
									}
									.job03{
										background-color: var(--main-color-orange);
										h4{
											color: var(--main-color-orange);
										}
									}
									.job04{
										h4{
											& + div{
												color: var(--main-color-orange);
											}
										}
									}
								}
							}
						}
					}
					.btn:has(input:checked){
						& + ul{
							& + .cover{
								display: none;
								& + input{
									display: none;
									& + label{
										display: none;
									}
								}
							}
						}
					}
				}
			}

			& > div{
				.inner{
					h3{
						background-repeat:no-repeat;
						background-size:auto 100%;
						padding: 2% 0 6% 0;
						@media screen and (max-width:800px) {
							background-size:auto 68%;
						}
						div{
							background-color: var(--main-color-green);
							border-radius:10px;
							padding:30px 0;
							width:70%;
							color: #fff;
							text-align: center;
							font-weight: bold;
							font-size: var(--font-size-r);
						}
						& + p{
							font-size: var(--font-size-r);
							text-align:center;
							span{
								font-size: var(--font-size-r);
								background-color:yellow ;
							}
						}
					}
					.exp{
						padding:2% 0;
						h4{
							color: var(--main-color-green);
							font-size: var(--font-size-r);
							font-weight: bold;
							margin-bottom: 2%;
						}
					}
					.comment{
						text-align:center;
						p{
							font-weight: bold;
							padding: 20px 0;
							padding-left: 80px;
							position:relative;
							margin-left:auto;
							margin-right:auto;
							display:inline-block;
							font-size:var(--font-size-s);
							&:before{
								content: "";
								background-image: url(../images/content03_img01.webp);
								background-repeat: no-repeat;
								background-position: left center;
								background-size: 80px auto;
								width: 100px;
								padding-top: 72px;
								display: block;
								position: absolute;
								left: 0;
								top:10%;
							}
						}
					}
				}
			}
			.comment{
			}
		}
	}/* end content03　*/
	.content04{
		.l_inner{
			display: flex;
			align-items: center;
			justify-content: left;
			gap: 10px;
			width: calc( ((100% - 1000px) / 2) + 1000px );
			margin-left: calc( (100% - 1000px) / 2 ) ;
			padding: 4% 0;
			@media screen and (max-width:1000px) {
				width:94%;
				margin-left: auto;
				margin-right: auto;
			}
			@media screen and (max-width:800px) {
				display: block;
				img{
					display: inline-block;
					width: 48%;
				}
			}
			h3{
				color: var(--main-color-green);
				font-weight: bold;
				font-size: var(--font-size-r);
				margin-bottom: 20px;
			}
		}
	}/* end content04　*/

	.content05{
		padding:4% 0;
		.inner{
			h3{
				text-align: center;
				position:relative;
				margin-bottom:2%;
				&:after{
					display: block;
					content: "";
					width: 100%;
					position: absolute;
					border-top:10px solid var(--main-color-green);
					bottom: 0.5em;
					z-index: 1;
				}
				span{
					color: var(--main-color-green);
					font-weight: bold;
					font-size: var(--font-size-r);
					margin-bottom: 20px;
					line-height: 1;
					background-color: #fff;
					z-index: 2;
					position: relative;
					padding: 0 15px;
				}
				& + p{
					text-align: center;
					font-size: var(--font-size-r);
					margin-bottom: 6%;
				}
			}
			h4{
				text-align: center;
				font-size: var(--font-size-l);
				color: var(--main-color-green);
				font-weight: bold;
				border-bottom:2px solid #000;
				padding-bottom:5px;
				margin-bottom:2%;
				span{
					display: block;
					text-align: center;
				}
			}
			h5{
				color: var(--main-color-green);
				font-size: var(--font-size-r);
				font-weight: bold;
				& + p{
					font-weight: bold;
					& + address{
						margin-bottom: 4%;
					}
				}
			}
		}
	}/* end content05　*/
	.content06{
		h2{
			background-color: var( --main-color-green);
			text-align: center;
			font-size: var(--font-size-l);
			color: #fff;
			font-weight: bold;
			padding: 2% 0;
		}
		& > .inner{
			padding:4%;
			box-sizing:border-box;
			h3{
			}
			.comment{
				text-align:center;
				p{
					font-weight: bold;
					padding: 20px 0;
					padding-left: 80px;
					position:relative;
					margin-left:auto;
					margin-right:auto;
					display:inline-block;
					font-size:var(--font-size-s);
					&:before{
						content: "";
						background-image: url(../images/content03_img01.webp);
						background-repeat: no-repeat;
						background-position: left center;
						background-size: 80px auto;
						width: 100px;
						padding-top: 72px;
						display: block;
						position: absolute;
						left: 0;
						top:10%;
					}
				}
				& + p{
					border-radius: 10px;
					border: 4px solid var( --main-color-green);
					background-color: yellow;
					text-align: center;
					width: 40%;
					margin: 0 auto;
					padding: 20px;
					color:var( --main-color-green);
					font-size: var(--font-size-l);
					font-weight: bold;
					box-sizing: border-box;
					@media screen and (max-width:800px) {
						width: 90%;
					}
					span{
						display: block;
						text-align: center;
						font-size: var(--font-size-r);
						font-weight: bold;
					}
				}
			}
			& + .formbox{
				padding-top: 4%;
				background-color: var(--main-color-cream);
				.inner{
					h3{
						text-align:center;
						position:relative;
						margin-bottom:4%;
            span {
              color: var(--main-color-green);
              font-weight: bold;
              font-size: var(--font-size-r);
              margin-bottom: 20px;
              line-height: 1;
              background-color: var(--main-color-cream);
              z-index: 2;
              position: relative;
              padding: 0 15px;
            }
						&:after {
              display: block;
              content: "";
              width: 100%;
              position: absolute;
              border-top: 10px solid var(--main-color-green);
              bottom: 0.5em;
              z-index: 1;
            }
					}
					.tocall{
						margin-bottom:4%;
						h4{
							border:none;
							color: var(--main-color-green);
							font-size: var(--font-size-r);
							font-weight:bold;
							text-align:center;
							& + address{
								text-align: center;
								color: var(--main-color-green);
								font-size: var(--font-size-xxl);
								font-weight:bold;
								line-height:1.2;
								span{
									display: block;
									text-align: center;
									font-weight: bold;
								}
							}
						}
						& + h4{
							border:none;
							color: var(--main-color-green);
							font-size: var(--font-size-r);
							font-weight:bold;
							text-align:center;
							margin-bottom: 2%;
						}				
					}
				}
				table{
					width:80%;
					margin:0 auto;
					margin-bottom:2%;
					@media screen and (max-width:800px) {
						width:100%;
					}
					tr{
						border-top:1px solid #000;
						background-color: #fff;
						&:last-child{
							border-bottom:1px solid #000;
						}
						th,
						td{
							padding: 5px;
						}
					}
				}
			}
		}
	}/* end content06　*/
	.comment{
		padding: 2% 0;
	}
	.applybox{
		background-color: var(--main-color-orange);
		color: #fff;
		padding:3% 0;
		h2{
			text-align: center;
			margin-bottom:2%;
			& > span:nth-child(1){
				color: #fff;
				text-align: center;
				position:relative;
				display:inline-block;
				padding:0 20px;
				margin-bottom:1%;
				&:before{
					content: "";
					display: block;
					border-left: 1px solid #fff;
					height: 50px;
					position: absolute;
					left: 0;
					top: 0;
					transform:rotate(-15deg); 
				}
				&:after{
					content: "";
					display: block;
					border-right: 1px solid #fff;
					height: 50px;
					position: absolute;
					right: 0;
					top: 0;
					transform:rotate(15deg); 
				}
				& + span{
					margin:0 auto;
					display: block;
					text-align:center;
					span{
					font-size: var(--font-size-l);
					font-weight: bold;
					text-align: left;
					display: inline-block;
					color: #fff;
					padding-left: 7vh;
					line-height: 1.2;
					background-image: url(../images/applybox_img01.webp);
					background-repeat: no-repeat;
					background-position: left center;
					background-size: auto 100%;
					}
				}
			}
			& + p{
				margin: 0 auto;
				text-align: center;
				display: block;
				margin:0 auto;
				margin-bottom:2%;
				@media screen and (max-width:800px) {
					margin-bottom:4%;
				}
				span{
					display: inline-block;
					color: #fff;
					border-top: 1px solid #fff;
					border-bottom: 1px solid #fff;
					margin: 0 auto;
					font-size: var(--font-size-r);
				}
			}
		}
		.contactbox{
			display: flex;
			gap:40px;
			flex-wrap: nowrap;
			justify-content: center;
			align-items:center;
			@media screen and (max-width:800px) {
				display: block;
			}
			.totel{
				flex:1;
				@media screen and (max-width:800px) {
					margin-bottom: 6%;
				}
				a{
					display: block;
					text-align: center;
					address{
						flex-shrink: 0;
						padding-left: 50px;
						position:relative;
						text-align: center;
						display: inline-block;
						@media screen and (max-width:800px) {
							padding-left:10%;
							text-align: center;
						}
						&:before{
							content: "";
							display: block;
							width: 20%;
							padding-top: 30%;
							background-image: url(../images/applybox_img02.webp);
							background-repeat: no-repeat;
							background-size: auto 70%;
							background-position: left center;
							position: absolute;
							left: 0;
							top: 0;
						}
						span{
							color: #fff;
							line-height: 1.2;
						}
						span.num{
							display: inline;
							font-size: var(--font-size-xl);
						}
						span.time{
							display: inline;
						}
					}
				}
			}
			.toform{
				flex:1;
				a{
					background-image: url(../images/applybox_img03.webp);
					background-repeat: no-repeat;
					background-position: top center;
					background-size: auto 30px;
					padding: 35px 5% 0 5% ;
					text-align: center;
					font-weight: bold;
			}
		}
	}
}
.formbox{
	button{
	                background: inherit;
                text-shadow: 0px 2px 0px #000;
                background-color: var(--main-color-green);
                color: #fff;
                border: none;
                font-size: var(--font-size-m);
                padding: 15px 40px;
                font-weight: bold;
                border-radius: 10px;
                margin-left: auto;
                margin-right: auto;
                display: block;
        }
}
/* 　==============　トップページここまで　==============　*/