@charset "UTF-8";


	
	
/* beginning
--------------------- */
#beginning {
	margin-bottom: calc(60 * var(--vw-ratio));
}
	#beginning .txt-16 {
		text-align: center;
		margin-bottom: calc(60 * var(--vw-ratio));
	}

	#beginning ul.btn-list {
		border: solid 1px #41536A;
		border-radius: calc(20 * var(--vw-ratio));
	}
		#beginning ul.btn-list li {
			width: 50%;
		}
		#beginning ul.btn-list li:nth-child(1) {
			border-right: solid 1px #41536A;
		}
			#beginning ul.btn-list li a {
				display: block;
				height: calc(80 * var(--vw-ratio));
				background: #fff;
				line-height: calc(80 * var(--vw-ratio));
				text-align: center;
				font-weight: 500;
			}
			#beginning ul.btn-list li:nth-child(1) a {
				border-radius: calc(20 * var(--vw-ratio)) 0 0 calc(20 * var(--vw-ratio));
			}
			#beginning ul.btn-list li:nth-child(2) a {
				border-radius: 0 calc(20 * var(--vw-ratio)) calc(20 * var(--vw-ratio)) 0;
			}
			#beginning ul.btn-list li a.default:hover {
				background: #EFF3FC;
			}
			#beginning ul.btn-list li a.active {
				background: #053D78;
				color: #fff;
				pointer-events: none;
				position: relative;
			}
			#beginning ul.btn-list li a.active:before {
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
				border-width: calc(10 * var(--vw-ratio)) calc(10 * var(--vw-ratio)) 0 calc(10 * var(--vw-ratio));
				border-color: #053D78 transparent transparent transparent;
				position: absolute;
				bottom: calc(-10 * var(--vw-ratio));
				left: 50%;
				margin-left: calc(-10 * var(--vw-ratio));
			}
@media screen and (max-width: 767px) {
	#beginning {
		margin-bottom: calc(40 * var(--vw-ratio));
	}
		#beginning .txt-16 {
			text-align: left;
			margin-bottom: calc(35 * var(--vw-ratio));
		}

		#beginning ul.btn-list {
			border-radius: calc(15 * var(--vw-ratio));
		}
			#beginning ul.btn-list li a {
				height: auto;
				font-size: calc(16 * var(--vw-ratio));
				line-height: calc(20 * var(--vw-ratio));
				padding: calc(12 * var(--vw-ratio)) 0;
			}
			#beginning ul.btn-list li:nth-child(1) a {
				border-radius: calc(15 * var(--vw-ratio)) 0 0 calc(15 * var(--vw-ratio));
			}
			#beginning ul.btn-list li:nth-child(2) a {
				border-radius: 0 calc(15 * var(--vw-ratio)) calc(15 * var(--vw-ratio)) 0;
			}
}


	
	
/* wbrand
--------------------- */
#wbrand ul.tab li {
	width: 7.33%;
	height: calc(36 * var(--vw-ratio));
	background: #fff;
	border: solid 1px #41536A;
	border-radius: calc(18 * var(--vw-ratio));
	margin-top: 1%;
	margin-right: 1%;
	text-align: center;
	line-height: calc(33 * var(--vw-ratio));
	font-weight: 500;
	cursor: pointer;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
#wbrand ul.tab li:hover {
	background: #EFF3FC;
}
#wbrand ul.tab li.select {
	border: solid 1px #053D78;
	background: #053D78;
	color: #fff;
	pointer-events: none;
}
#wbrand ul.tab li.off {
	border: solid 1px #D3D7DD;
	background: #E2E5E8;
	pointer-events: none;
}

#wbrand .cell {
	padding-top: calc(70 * var(--vw-ratio));
}
	#wbrand .cell h3 {
		margin-bottom: 0;
	}

	#wbrand .cell .product-list .box {
		width: 23.5%;
		background: #F7F7F8;
		border-radius: calc(10 * var(--vw-ratio));
		padding: calc(15 * var(--vw-ratio)) calc(20 * var(--vw-ratio)) calc(90 * var(--vw-ratio)) calc(20 * var(--vw-ratio));
		margin-right: 2%;
		margin-top: 2%;
		position: relative;
	}
	#wbrand .cell .product-list .box:nth-child(4n) {
		margin-right: 0;
	}
		#wbrand .cell .product-list .box h4 {
			text-align: center;
			line-height: calc(25 * var(--vw-ratio));
			margin-bottom: calc(15 * var(--vw-ratio));
		}

		#wbrand .cell .product-list .box .pht {
			background: #fff;
		}

		#wbrand .cell .product-list .box .logo {
			background: #fff;
			margin-top: calc(3 * var(--vw-ratio));
		}

		#wbrand .cell .product-list .box .itmes {
			margin-top: calc(12 * var(--vw-ratio));
		}
			#wbrand .cell .product-list .box .itmes ul li {
				margin-top: calc(5 * var(--vw-ratio));
				line-height: 1.4em;
				padding-left: calc(12 * var(--vw-ratio));
				position: relative;
			}
			#wbrand .cell .product-list .box .itmes ul li:before {
				content: "";
				width: calc(8 * var(--vw-ratio));
				height: calc(8 * var(--vw-ratio));
				background: #053D78;
				border-radius: 50%;
				position: absolute;
				top: calc(5 * var(--vw-ratio));
				left: 0;
			}

		#wbrand .cell .product-list .box a.btn-maker {
			display: block;
			width: -webkit-calc(100% - calc(40 * var(--vw-ratio)));
			width: calc(100% - calc(40 * var(--vw-ratio)));
			height: calc(50 * var(--vw-ratio));
			border-radius: calc(25 * var(--vw-ratio));
			background: #053D78;
			line-height: calc(46 * var(--vw-ratio));
			color: #fff;
			font-weight: 500;
			text-align: center;
			position: absolute;
			bottom: calc(20 * var(--vw-ratio));
			left: calc(20 * var(--vw-ratio));
		}
		#wbrand .cell .product-list .box a.btn-maker:hover {
			background: #292929;
		}
@media screen and (max-width: 767px) {
	#wbrand ul.tab li {
		width: calc(49 * var(--vw-ratio));
		margin-top: calc(7 * var(--vw-ratio));
		margin-right: calc(7 * var(--vw-ratio));
	}

	#wbrand .cell {
		padding-top: calc(50 * var(--vw-ratio));
	}
		#wbrand .cell .product-list {
			width: 116%;
			margin-left: -8%;
		}
			#wbrand .cell .product-list .box {
				width: 48%;
				padding: calc(15 * var(--vw-ratio)) calc(15 * var(--vw-ratio)) calc(70 * var(--vw-ratio)) calc(15 * var(--vw-ratio));
				margin-right: 4%;
				margin-top: 4%;
				position: relative;
			}
			#wbrand .cell .product-list .box:nth-child(4n) {
				margin-right: 4%;
			}
			#wbrand .cell .product-list .box:nth-child(2n) {
				margin-right: 0;
			}
				#wbrand .cell .product-list .box h4 {
					font-size: calc(16 * var(--vw-ratio));
					line-height: calc(23 * var(--vw-ratio));
				}

				#wbrand .cell .product-list .box .itmes {
					margin-top: calc(10 * var(--vw-ratio));
				}
					#wbrand .cell .product-list .box .itmes h5 {
						font-size: calc(13 * var(--vw-ratio));
					}
	
					#wbrand .cell .product-list .box .itmes ul li {
						font-size: calc(12 * var(--vw-ratio));
					}
					#wbrand .cell .product-list .box .itmes ul li:before {
						top: calc(4 * var(--vw-ratio));
					}

				#wbrand .cell .product-list .box a.btn-maker {
					width: -webkit-calc(100% - calc(30 * var(--vw-ratio)));
					width: calc(100% - calc(30 * var(--vw-ratio)));
					height: calc(40 * var(--vw-ratio));
					border-radius: calc(20 * var(--vw-ratio));
					line-height: calc(36 * var(--vw-ratio));
					bottom: calc(15 * var(--vw-ratio));
					left: calc(15 * var(--vw-ratio));
				}
					#wbrand .cell .product-list .box a.btn-maker span {
						font-size: calc(13 * var(--vw-ratio));
					}
}


	
	
/* other
--------------------- */
#other .btn-site {
	width: 48%;
}
	#other .btn-site a {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: #EFF3FC url("../img/common/icon_external_blue.svg") no-repeat right calc(30 * var(--vw-ratio)) center / calc(36 * var(--vw-ratio));
		height: calc(100 * var(--vw-ratio));
		border-radius: calc(15 * var(--vw-ratio));
		padding-left: calc(30 * var(--vw-ratio));
		font-weight: 500;
	}
	#other .btn-site a:hover {
		background: #292929 url("../img/common/icon_external_white.svg") no-repeat right calc(25 * var(--vw-ratio)) center / calc(36 * var(--vw-ratio));
		color: #fff;
	}
@media screen and (max-width: 767px) {
	#other .inner {
		display: block;
	}
		#other .btn-site {
			width: 100%;
		}
		#other .btn-site:nth-child(1) {
			margin-bottom: calc(20 * var(--vw-ratio));
		}
			#other .btn-site a {
				background: #EFF3FC url("../img/common/icon_external_blue.svg") no-repeat right calc(20 * var(--vw-ratio)) center / calc(30 * var(--vw-ratio));
				height: calc(80 * var(--vw-ratio));
				border-radius: calc(10 * var(--vw-ratio));
				padding-left: calc(20 * var(--vw-ratio));
				padding-right: calc(40 * var(--vw-ratio));
				line-height: 1.3em;
			}
			#other .btn-site a:hover {
				background: #292929 url("../img/common/icon_external_white.svg") no-repeat right calc(15 * var(--vw-ratio)) center / calc(30 * var(--vw-ratio));
				color: #fff;
			}
}


	
	
/* brand
--------------------- */
#brand .point h2 {
	font-size: calc(34 * var(--vw-ratio));
	text-align: center;
	line-height: 1.3em;
	margin-bottom: calc(30 * var(--vw-ratio));
}

#brand .brand-items {
	margin-top: calc(90 * var(--vw-ratio));
}
	#brand .brand-items .pht-column {
		margin-top: calc(30 * var(--vw-ratio));
		margin-bottom: calc(30 * var(--vw-ratio));
	}
		#brand .brand-items .pht-column li {
			width: 49%;
			overflow: hidden;
			border-radius: calc(10 * var(--vw-ratio));
		}

	#brand .brand-items h4 {
		font-size: calc(24 * var(--vw-ratio));
		margin-bottom: calc(10 * var(--vw-ratio));
	}

	#brand .brand-items .txt-16 {
		margin-bottom: calc(40 * var(--vw-ratio));
	}

	#brand .brand-items .lineup {
		border: solid 3px #E9ECEF;
		border-radius: calc(10 * var(--vw-ratio));
		padding: calc(25 * var(--vw-ratio)) calc(50 * var(--vw-ratio));
		position: relative;
		margin-bottom: calc(35 * var(--vw-ratio));
	}
		#brand .brand-items .lineup h5 {
			display: inline-block;
			background: #fff;
			padding: 0 calc(10 * var(--vw-ratio));
			font-size: calc(22 * var(--vw-ratio));
			font-weight: 500;
			line-height: 1;
			position: absolute;
			top: calc(-12 * var(--vw-ratio));
			left: calc(40 * var(--vw-ratio));
		}

		#brand .brand-items .lineup ul.list-icon li {
			line-height: 1.4em;
			padding-left: calc(12 * var(--vw-ratio));
			margin-top: calc(4 * var(--vw-ratio));
			margin-bottom: calc(4 * var(--vw-ratio));
			margin-right: calc(35 * var(--vw-ratio));
			position: relative;
		}
		#brand .brand-items .lineup ul.list-icon li:before {
			content: "";
			width: calc(8 * var(--vw-ratio));
			height: calc(8 * var(--vw-ratio));
			background: #053D78;
			border-radius: 50%;
			position: absolute;
			top: calc(8 * var(--vw-ratio));
			left: 0;
		}

	#brand .brand-items .btn {
		margin: 0 auto;
	}
@media screen and (max-width: 767px) {
	#brand .point h2 {
		font-size: calc(28 * var(--vw-ratio));
		line-height: 1.4em;
		text-align: center;
		margin-bottom: calc(25 * var(--vw-ratio));
	}
	
	#brand .point .flow {
		width: 118%;
		margin-left: -9%;
	}

	#brand .brand-items {
		margin-top: calc(60 * var(--vw-ratio));
	}
		#brand .brand-items .pht-column {
			width: 118%;
			margin-top: calc(17 * var(--vw-ratio));
			margin-left: -9%;
			margin-bottom: calc(20 * var(--vw-ratio));
		}

		#brand .brand-items h4 {
			font-size: calc(20 * var(--vw-ratio));
			line-height: 1.4em;
			margin-bottom: calc(8 * var(--vw-ratio));
		}

		#brand .brand-items .txt-16 {
			margin-bottom: calc(30 * var(--vw-ratio));
		}

		#brand .brand-items .lineup {
			border: solid 3px #E9ECEF;
			border-radius: calc(10 * var(--vw-ratio));
			padding: calc(25 * var(--vw-ratio)) calc(35 * var(--vw-ratio));
			position: relative;
			margin-bottom: calc(30 * var(--vw-ratio));
		}
			#brand .brand-items .lineup h5 {
				font-size: calc(20 * var(--vw-ratio));
				left: calc(25 * var(--vw-ratio));
			}

		#brand .brand-items .btn {
			margin: 0 auto;
		}
}


	
	
/* eftc
--------------------- */
#eftc .bg-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #EFF3FC;
	padding: calc(30 * var(--vw-ratio));
	border-radius: calc(10 * var(--vw-ratio));
}
	#eftc .bg-box .logo {
		width: 20%;
		background: #fff;
		padding: 0 calc(20 * var(--vw-ratio));
		border-radius: calc(10 * var(--vw-ratio));
	}

	#eftc .bg-box .text {
		width: 80%;
		padding-left: calc(30 * var(--vw-ratio));
	}
		#eftc .bg-box .text .txt-16 {
			margin-bottom: calc(15 * var(--vw-ratio));
			letter-spacing: 0.1em;
		}
@media screen and (max-width: 767px) {
	#eftc .bg-box {
		display: block;
		padding: calc(25 * var(--vw-ratio));
	}
		#eftc .bg-box .logo {
			width: 100%;
			background: #fff;
			padding: 0 calc(50 * var(--vw-ratio));
			border-radius: calc(10 * var(--vw-ratio));
		}

		#eftc .bg-box .text {
			width: 100%;
			margin-top: calc(20 * var(--vw-ratio));
			padding-left: 0;
		}
			#eftc .bg-box .text .txt-16 {
				margin-bottom: calc(12 * var(--vw-ratio));
			}
}