/* 　==============　トップページここから　==============　*/
.home{
	header{
		padding-bottom: 60vh;
		overflow: hidden;
		position:relative;
		@media screen and (max-width:750px) {
		}
		.mv{
			position: absolute;
				width: 100vw;
				bottom: 0;
			img{
				height: auto;
				width: 100vw;
			}
		}
		.hbnr{
			position:absolute;
			width: 100%;
			padding-top: 18%;
			z-index: 2;

			@media screen and (max-width:750px) { 
			padding-top: 2%;
			top:15%;
			}
			.inner{
				transition: all 0.5s 0s ease;
				text-align: right;

				a{
					display: inline-block;
				}
				img{
					filter: drop-shadow(0px 0px 15px #000);
					width: 30%;
					@media screen and (max-width:750px) { 
					width: 50%;
					}
				}

				@media screen and (max-width:1200px) { 
					padding-right:120px;
					width: 100%;
					min-width: 100%;
					box-sizing: border-box;
				}
				@media screen and (max-width:750px) { 
					text-align: center;
					padding-right:0;
					padding-left: 0;
				}
			}
		}
	}
	.wrapper{
		.content{
		}
		.content01{
			position: relative;
			z-index: 2;
			padding:30px 0 80px;
			h2{	
				color: var(--main-color-orange);
				font-size: var(--font-size-xxl);
				font-weight: bold;
				min-width: 32%;
				margin-right: auto;
				position:relative;
				padding:40px 40px 40px 70px;
				box-sizing:border-box;
				align-self: center;
				@media screen and (max-width:750px) {
					width: 75%;
					text-align: center;
					padding: 10% 5% 10% 7%;
					margin-right: auto;
					margin-left: auto;
				}
			&:before{
				position: absolute;
				left: 0;
				top:0;
				content: "「";
				display: block;
				font-size:80px;
				font-weight: normal;
			}
			&:after{
				position: absolute;
				right: 0;
				bottom:0;
				content: "」";
				display: block;
				font-size:80px;
				font-weight: normal;
			}
			+ div{
				width: 54%;
				padding:60px 0 0;
				margin-bottom: 50px;
				@media screen and (max-width:750px) {
					width: 100%;
					padding: 0 5%;
					box-sizing: border-box;
				}
				& > span{
					@media screen and (max-width:1000px) {
						display: block !important;
					}
					@media screen and (max-width:750px) {
						display: none !important;
					}
				}
				img{
					display: block;
					margin-top: -50px;


				}
				p{
					margin-bottom:40px;
				}
				a{
					span{
					color:#fff;
					}
				}
			}
			}
			.inner{
				> div{
					display: flex;
					@media screen and (max-width:750px) {
						display: block;
					}
				}
				>	span{
					display: block;
					text-align: center;
					@media screen and (max-width:1200px) {
						text-align: center;
					}
					img{
						margin-right: -60px;
						margin-bottom: -20px;
						@media screen and (max-width:1000px) {
							margin-right: 0;
							margin-bottom: 0;
						}
					}
				}
			}

		}
		.content02{
			background-color:var(--main-color-green);
			h2{
				color:#fff;
				&:after{
					border-bottom-color: #fff;
				}
			}
			section{
				.case{
					background-color: #fff;
					margin-bottom: 60px;
					box-sizing: border-box;
					padding: 20px 30px;
					h3{
						color: var(--main-color-green);
						text-align: center;
						font-size: var(--font-size-xl);
						margin-bottom: 20px;
					}
					ul{
						display: flex;
						gap:0 26px ;
						@media screen and (max-width:750px) {
							display: block;
						}
						li{
							@media screen and (max-width:750px) {
								margin-bottom: 40px;
								&:last-child{
									margin-bottom: 0;
								}
								img{
									width: 100%;
								}
							}
							flex:1;
							h4{
								font-size: var(--font-size-m);
								margin-bottom: 12px;
							}
						}
					}
				}
			}
			.select{
				padding-bottom:60px;
				p{
					text-align: left;
					padding: 2% 2%;
					font-size: var(--font-size-r);
					color: var(--main-color-green);
					margin-bottom: 30px;
					align-self: center;
					font-weight: bold;
					@media screen and (max-width:750px) {
						text-align: center;
					}
				}
				& > div{
					& > div{
						display: flex;
						align-items:flex-start;
						padding-bottom:20px;
						margin-bottom:-20px;
						@media screen and (max-width:750px) {
							display: block;
						}
						img{
								width: 68%;
								height: auto;
								@media screen and (max-width:750px) {
								width: 100%;
								}

						}
						& + a{
							width: 80%;
							margin-left: auto;
							margin-right: auto;
							@media screen and (max-width:750px) {
								width: 80%;
							}
							span{
								font-size: var(--font-size-l);
								color: #fff;
							}
						}
					}
					ul{
						display: flex;
						justify-content: center;
						margin-bottom:-20px;
						padding:20px 0 40px;
							img{
								width: 70%;
								height: auto;
							}
						& + a{
							width: 600px;
							margin-left: auto;
							margin-right: auto;
							@media screen and (max-width:750px) {
								width: 80%;
							}
							span{
								color: #fff;
								padding: 5px 0;
								font-size: var(--font-size-m);
							}
						}
					}
				}
			}
		}
		.content03{
			.fcont{
				background-color: var(--main-color-green);
				padding-bottom:2%;
				margin-bottom:3%;
				h2{
					color: #fff;
					&:after{
						border-bottom-color: #fff;
					}
				}
				.select{
					padding-bottom:60px;
					p{
						text-align: left;
						padding: 2% 2%;
						font-size: var(--font-size-r);
						color: var(--main-color-green);
						margin-bottom: 30px;
						align-self: center;
						font-weight: bold;
						@media screen and (max-width:750px) {
							text-align: center;
						}
					}
					& > div{
						& > div{
							display: flex;
							align-items:flex-start;
							padding-bottom:20px;
							margin-bottom:-20px;
							@media screen and (max-width:750px) {
								display: block;
							}
							img{
									width: 68%;
									height: auto;
									@media screen and (max-width:750px) {
									width: 100%;
									}

							}
							& + a{
								width: 80%;
								margin-left: auto;
								margin-right: auto;
								@media screen and (max-width:750px) {
									width: 80%;
								}
								span{
									font-size: var(--font-size-l);
									color: #fff;
								}
							}
						}
						ul{
							display: flex;
							justify-content: center;
							margin-bottom:-20px;
							padding:20px 0 40px;
								img{
									width: 70%;
									height: auto;
								}
							& + a{
								width: 600px;
								margin-left: auto;
								margin-right: auto;
								@media screen and (max-width:750px) {
									width: 80%;
								}
								span{
									color: #fff;
									padding: 5px 0;
									font-size: var(--font-size-m);
								}
							}
						}
					}
				}
			}
			padding:0 0 60px 0;
			ul{
				display: flex;
				gap:15px 45px;
				flex-wrap:wrap;
					@media screen and (max-width:750px) {
					gap:15px 3%;
					}
				li{
					background-size: 100% auto;
					background-repeat: no-repeat;
					background-position: left bottom;
					a{
                    	display: block;
                    	font-weight: bold;
                    	position:relative;
                    	h3{
												font-size: 36px;
												font-weight: bold;
												@media screen and (max-width:1200px) {
												font-size: 3.3vw;
												}
											
                    		&:after{
											  color: var(--main-color-orange);
												content:"＞";
												position: absolute;
												right: 49%;
												font-weight: bold;
												font-family:  
											    "Hiragino Kaku Gothic ProN",
											    "Hiragino Sans",
											    Meiryo,
											    sans-serif;
											  transition: all 0.5s 0s ease;
                    		}
                    	}
                    	&:hover{
	                    	h3{
	                    		&:after{
								right: 47%;
	                    		}
	                    	}                    		
                    	}
					}
				}
				li.full{
					width: 100%;
                    font-size: var(--font-size-xxl);
					a{
                    	padding: 8.6% 0 14.8% 4%;
					}
				}
				li.half{
					width: calc((100% - 45px) / 2);
          font-size: var(--font-size-l);
					@media screen and (max-width:750px) {
						width: calc((100% - 3%) / 2);
					}
					a{
                    	padding: 15.6% 0 24.8% 8%;
                    	h3{
												font-size: 24px;

												@media screen and (max-width:1200px) {
												font-size: 2.4vw;
												}
                    		&:after{
							right: 42%;
                    		}
                    	}
                    	h3.sub{
                    		&:after{
						    color: var(--main-color-green);
							right: 52%;
                    		}
                    	}
                    	&:hover{
	                    	h3{
	                    		&:after{
								right: 40%;
	                    		}
	                    	}  
	                    	h3.sub{
	                    		&:after{
								right: 50%;
	                    		}
	                    	}                       		
                    	}
					}
				}
				.bnr00{background-image: url(../images/home_content03_bnr00.png);}
				.bnr01{background-image: url(../images/home_content03_bnr01.png);}
				.bnr02{background-image: url(../images/home_content03_bnr02.png);}
				.bnr03{background-image: url(../images/home_content03_bnr03.png);}
				.bnr04{background-image: url(../images/home_content03_bnr04.png);}
			}
		}
		.content04{
			padding: 40px 0;
			background-color: var(--main-color-cream);
			.inner{
				display:flex;
				justify-content: space-between;
				@media screen and (max-width:1000px) {
					display:block;
				}
				> div{
					h2{
						font-size: 48px;
						font-weight: bold;
						letter-spacing: 8px;
 						@media screen and (max-width:750px) {
						font-size: 6.4vw;
						letter-spacing: 0.3vw;
 						}
						& + a{
							span{
								width: 90%;
								color: #fff;
							}
						}
					}
				}
				ul{
					@media screen and (max-width:1000px) {
					margin-bottom:40px;
						& + a{
							display: block;
							width: 40%;
							margin-right: 60%;
							@media screen and (max-width:750px){
								width: 80%;
								margin-right: auto;
								margin-left: auto;
							}
							span{
								color: #fff;
							}
						}
					}
					li{
						border-bottom: 1px dashed #666;
						padding: 8px 10px;
						display:flex;
						@media screen and (max-width:1000px) {
							flex-wrap: wrap;
						}
						span{
							display: block;
							font-size: var(--font-size-r);
						}
						.date{
							padding-right: 15px;
						}
						.cat{
							background-color: var(--main-color-white);
							color:var(--main-color-green);
							font-weight: bold;
							font-size: var(--font-size-s);
							padding: 3px 15px;
						}
						.cont{
							min-width: 480px;
							display: block;
							padding-left: 15px;
							a{
								text-decoration: underline;
							}
								@media screen and (max-width:1000px) {
								padding-left: 0;
								min-width: 1px;
								max-width: 100%;
								}
						}
					}
				}
			}
		}
		.content05{
			.qa{
				ul{
					li{
						margin-bottom:2%;
						background-color:var(--main-color-cream);
						box-sizing:border-box;
						border-radius:10px;
						.qbox{

							&:hover{

							}
							label{
								cursor:pointer;
								display:block;
								padding:10px 15px 20px 15px;
								position:relative;
								&:before{
									content:"Q";
									font-weight: bold;
									font-size: var(--font-size-xl);
									padding-right: 10px;
								}
								&:after{
									content:"＞";
									font-weight: bold;
									font-size: var(--font-size-xl);
									position: absolute;
									right: 25px;
									transition: all 1.0s 0s ease;
									transform: rotate(90deg) scaleX(1.0);
									top:1rem;
								}
								input{
									display: none;
								}
							}
						}
						.abox{
							max-height: 0px;
							overflow: hidden;
							transition: all 1.0s 0s ease;
							padding:0 15px 0 15px;
							box-sizing:border-box;
							&:before{
								content:"A";
								font-weight: bold;
								font-size: var(--font-size-xl);
								padding-right: 10px;
							}
						}
						&:has(input:checked){
							.qbox{
								label{
									&:after{
										transform: rotate(90deg) scaleX(-1.0);
									}
								}
							}
							.abox{
								max-height: 200px;
								overflow: hidden;
								padding-bottom: 20px;
							}
						}
					}
				}
			}
			.instabox{
				width: 80%;
				margin-right: auto;
				margin-left: auto;
				@media screen and (max-width:750px){
					width: 100%;
				}
			}
		}
	}
}
/* 　==============　トップページここまで　==============　*/