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

#pageWrap {
    padding: 0px 0 0;
}
.notes-area {
    margin: 0 auto 0;
}
.boxWidth {
	container-type: inline-size;
}
#sec01 {
	padding: 2em 0;
	h3 {
		font-size: 36px;
		font-size: clamp(16px, 3.2cqw, 36px);
		line-height: 1.5;
		sup {
			font-size: 40%;
			margin: 0;
			position: relative;
			top: -1.5em;
			left: -1em;
		}
	}
	p {
		font-size: clamp(10px, 1.4vw, 13px);
		padding-top: 1em;
	}
}

#sec02 {
	position: relative;
	.txtBox {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}
}
#sec02 .parkingBox {
	position: absolute;
	top: 3%;
	left: 50%;
	transform: translateX(-50%);
	background: #AA1F24;
background: linear-gradient(90deg, rgba(170, 31, 36, 1) 0%, rgba(232, 149, 130, 1) 100%);
	padding: 20px 0;
	.flex-container {
		width: 90%;
		max-width: 1000px;
		align-items: center;
		margin: 0 auto;
		}
	.leftBox {
		width: 66%;
		container-type: inline-size;
		p {
			text-align: left;
			font-size: clamp(13px, 1.7cqw, 16px);
			font-size: 4.7cqw;
			color: #fff;
			line-height: 1.3;
			span {

				color: #f4e827;
				font-size: 130%;
			}
		}
	}
	.imgBox {
		width: 32%;
	}
}

#sec03 {
	padding: 5% 0;
	background-color: #243161;
}
#sec03 .h3Box {
	color: #d9d98f;
	padding-bottom: 30px;
	h3 {
		font-size: clamp(16px, 3.8cqw, 42px);
	}
	h4 {
		font-size: clamp(16px, 2.8cqw, 36px);
		line-height: 1.3;
		font-weight: 300;
	}
}
#sec03 .parkBox {
	background-color: #fff;
	padding: 30px 0;
}
#sec03 .park01,#sec03 .park02 {
	width: 94%;
	max-width: 1000px;
	margin: 0 auto;
	h4 {
		background-color: #02438f;
		color: #fff;
		font-size: clamp(16px, 2.2cqw, 30px);
		font-weight: 400;
		padding: 0.2em 1em;
		border-radius: 0.5em;
	}
}
#sec03 .park02 {
	h4 {
		background-color: #991e23;
		color: #f4e827;
	}
}
#sec03 .flex {
	margin-top: 15px;
}
#sec03 .park01 {
	.box01 {
		width: 30%;
	}
	.box02 {
		width: 39.4%;
}
		.capImg2::before {
    content: "image";
    font-size: 10px;
    position: absolute;
    right: 51%;
    bottom: 0.1em;
    color: #fff;

	}
	.box03 {
		width: 30%;
	}
}
#sec03 .sankaku {
	font-size: 4.4cqw;
	line-height: 1;
	color: #991e23;
	padding: 20px 0;
}
#sec03 .park02 .flex {
	align-items: flex-start;
	margin-top: 0;
	max-width: 930px;
	margin: 0 auto;
}
#sec03 .park02 {
  max-width: 1000px;
  .box01 {
    width: 16%;
  }
  .box02 {
    width: 39%;
		padding-top: 30px;
    container-type: inline-size;
    li {
      background-color: #a28922;
      color: #fff;
      font-size: 5.7cqw;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      height: 2em;
      border-radius: 0.3em;
    }
  }
  .box03 {
		padding-top: 30px;
    width: 41%;
  }
}

#sec03 .parkBox h3 {
	font-size: clamp(13px, 4.7cqw, 32px);
	color: #991e23;
	text-align: center;
	line-height: 1.3;
	span {
		font-size: 200%;
		position: relative;
		top: 0.1em;
	}
}

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

@media screen and (max-width: 599px) {
  #sec01 {
    h3 {
      font-size: clamp(16px, 5cqw, 24px);
    }
  }
  #sec02 .parkingBox {
    position: static;
    width: 100%;
    transform: translate(0, 0);
    .leftBox {
      width: 100%;
      p {
        text-align: center;
        font-size: clamp(13px, 4.7cqw, 21px);
      }
    }
    .imgBox {
      width: 70%;
      margin: 10px auto 0;
    }
  }
  #sec03 .parkBox {
    padding: 15px 10px;
  }
  #sec03 .park01 {
    max-width: 400px;
    .box01 {
      width: 75%;
      margin: 0 auto;
    }
    .box02 {
      width: 100%;
      margin: 15px 0;
    }
    .box03 {
      width: 75%;
      margin: 0 auto;
    }
  }
  #sec03 .park02 {
    max-width: 400px;
    .box01 {
      width: 32%;
    }
    .box02 {
      width: 68%;
    }
    .box03 {
      width: 80%;
      margin: 0 auto;
    }
  }
  #sec03 .park01, #sec03 .park02 {
    h4 {
      font-size: clamp(16px, 3.4cqw, 20px);
    }
  }
}