@media (max-width: 768px) {

	.header-nav--sp,
	.header-subnav--sp {
		display: block;
		width: 0;
		transition: left 0.5s ease;
		position: absolute;
		left: 100vw;
		top: 70px;
		z-index: 1500; /* 20250908 100 → 1500 */
		background: #ffffffcc;
		color: #333;
		overflow: scroll;
	}

	.subnav-contact {}


	.subnav-contact {
		position: relative;
		overflow: hidden;
		text-decoration: none;
		display: inline-block;
		background: #044687;
		border: 1px solid #044687;
		padding: 12px 20px;
		margin-top: 24px;
		line-height: 1;
		font-size: 2.3rem;
		text-align: center;
		font-weight: 700;
		outline: none;
		left: 50%;
		transform: skewX(-15deg) translateX(-50%);
	}

	.subnav-contact span {
		position: relative;
		display: inline-block;
		z-index: 3;
		color: #fff;
		transform: skewX(15deg);
	}



	.header-subnav--sp {
		background: #333;
		color: #FFF;
		top: 50px;
	}

	.header-subnav--sp.active {
		top: 50px;
		background: #333;
		color: white;
	}

	.header-nav--sp.active,
	.header-subnav--sp.active {
		width: 100vw;
		left: 0;
	}

	.header-subnav--sp.active a,
	.header-nav--sp.active p a {
		color: white;
		display: block;
		line-height: 10vw;
	}

	.header-nav--sp.active p a {
		color: #333;
	}

	.header-nav--sp.active p,
	.header-subnav--sp.active p {
		font-weight: 500;
		font-size: 1.6rem;
		line-height: 10vw;
		padding-left: 3rem;
	}

	.header-nav--sp.active p.detail-title,
	.header-subnav--sp.active p.detail-title {
		padding-left: 7rem;
		position: relative;
	}

	.header-subnav--sp.active p.detail-title {
		border-bottom: 1px solid #666;
	}

	.header-nav--sp ul,
	.header-subnav--sp ul {
		width: 100%;
		margin: auto;
		padding: 24px;
	}

	.header-nav--sp ul li:not(:last-child) {
		padding: 0px;
		border-bottom: 1px solid #333;
	}

	.header-nav--sp ul li:first-child {
		border-top: 1px solid #333;
	}

	.header-subnav--sp ul li {
		border-bottom: 1px solid #666;
	}

	.header-nav--sp ul li:nth-child(-n+20),
	.header-subnav--sp ul li:nth-child(-n+20) {
		position: relative;
	}

	.sp-nav-detail ul li::after,
	.sp-subnav-detail ul li::after,
	.detail-title::after,
	.sp-subnav-head::after,
	.sp-nav-head::after {
		content: '';
		background-repeat: no-repeat;
		background-size: contain;
		display: block;
		position: absolute;
		width: 25px;
		height: 15px;
		right: 5%;
		top: 4.3vw;
	}

	.sp-nav-detail ul li::after,
	.sp-subnav-detail ul li::after {
		background-image: url(../img/common/black-arrow.png);
	}

	.header-subnav--sp a .detail-title::after {
		background-image: url(../img/common/arrow-white.png);
	}

	.sp-subnav-detail ul li::after,
	.sp-subnav-head::after {
		background-image: url(../img/common/arrow-white.png);
	}

	.sp-subnav-head::after {
		background-image: none;
	}

	.header-subnav--sp ul li:nth-child(-n+20)::after {
		background-image: url(../img/common/arrow-white.png);
	}

	.sp-nav-head.down::after {
		background-image: url(../img/common/arrow-black-down.png);
	}

	.sp-nav-head.down.active::after {
		background-image: url(../img/common/arrow-black-up.png);
	}

	.sp-subnav-head.down::after {
		background-image: url(../img/common/arrow-white-down.png);
	}

	.sp-subnav-head.down.active::after {
		background-image: url(../img/common/arrow-white-up.png);
	}

	.header-nav--sp ul .header-list--contact,
	.header-nav--sp ul .header-list--document {
		width: 80%;
		text-align: center;
		margin: auto;
		background-color: #E9F5FA;
		font-size: 1.4rem;
		margin-top: 20px;
		border-bottom: none;
	}

	.header-nav--sp .header-list--contact a,
	.header-nav--sp .header-list--document a {
		color: #182E40;
	}

	.sp-nav-detail,
	.sp-subnav-detail {
		display: none;
	}

	.sp-subnav-detail {
		background-color: #333;
	}

	.sp-nav-detail.active,
	.sp-subnav-detail.active {
		display: block;
		border-top: solid 1px black;
	}

	.sp-subnav-detail.active {
		border-top: solid 1px #666;
	}

	.detail-title {
		position: relative;
	}

	.detail-title:not(:last-child) {
		border-bottom: 1px solid #182E40;
	}

	.sp-subnav-detail .detail-title:not(:last-child) {
		border-bottom: 1px solid #FFF;
	}

	.sp-subnav-detail.active .child-list-label {
		padding: 1rem 0;
		border-bottom: 1px solid #fff;
	}

	.sp-subnav-detail.active ul.child-list li a {
		font-weight: 500;
		font-size: 3vw;
		line-height: 10vw;
		padding-left: 18vw;
		display: block;
	}

	.sp-subnav-detail.active .detail-title span {
		position: absolute;
		top: 3vw;
		font-size: 1.7vw;
	}
}

@media (max-width:500px) {

	.header-nav--sp.active p.detail-title,
	.header-subnav--sp.active p.detail-title {
		font-size: 3vw;
	}

	.header-nav--sp.active p.detail-title,
	.header-subnav--sp.active p.detail-title {
		padding-left: 4rem;
	}

	.sp-subnav-detail.active ul.child-list li a {
		padding-left: 6rem;
	}
}

@media (max-width:400px) {

	.header-nav--sp.active p,
	.header-subnav--sp.active p {
		padding-left: 2rem;
	}

	.sp-nav-detail ul li::after,
	.sp-subnav-detail ul li::after,
	.detail-title::after,
	.sp-subnav-head::after,
	.sp-nav-head::after {
		width: 18px;
		height: 10px;
		right: 5%;
		top: 3.7vw;
	}

	.sp-subnav-detail.active .detail-title span.font-small {
		font-size: 2.5vw;
		position: initial;
	}
}

/* FIX */