@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:1025px){
#wrap {
	position: relative;
}
#wrap::before {
	content: '';
	display: block;
	width: 61.8%;
	height: 150%;
	background-color: var(--color--creamgray);
	position: absolute;
	top: 50%;
	left: -11.8%;
	transform: translate(0%,-50%) rotate(-4deg);
	z-index: -1;
}
#brand {
	width: 100%;
	height: auto;
}
	.brand__inner {
		width: 100%;
		height: auto;
		padding: 0 0 80px;
		margin: 0 auto;
	}
		.brand__top_area {
			width: 100%;
			height: auto;
			margin: 0 auto 110px;
		}
			.brand__top_area__main_image {
				width: 100%;
				height: auto;
			}
				.brand__top_area__main_image picture img {
					width: 100%;
					height: auto;
				}
		.brand__list {
			width: 90%;
			max-width: 1000px;
			height: auto;
			margin: 0 auto;
		}
			.brand__item {
				width: 100%;
				height: auto;
				margin-bottom: 80px;
			}
			.brand__item:last-of-type {
				margin-bottom: 0;
			}
				.brand__wrap {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: space-between;
					align-items: stretch;
				}
					.brand__logo {
						width: 43%;
						height: auto;
						border: solid 1px var(--color--creamgray);
					}
						.brand__logo img {
							width: 100%;
							height: auto;
						}
					.brand__details {
						width: 50%;
						height: auto;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
					}
						.brand__details__wrap {
							width: 100%;
							height: auto;
							margin: 0 auto 25px;
						}
							.brand__name {
								width: 100%;
								height: auto;
								margin: -4px auto 20px;
								font-size: 1.625rem;
								font-weight: 700;
								line-height: 1.5;
								letter-spacing: 0.08em;
							}
								.brand__name small {
									font-size: 1.25rem;
								}
							.brand__txt {
								width: 100%;
								height: auto;
								font-size: 0.875rem;
								font-weight: 500;
								line-height: 2;
								letter-spacing: 0.04em;
							}
						.brand__links {
							width: 100%;
							height: auto;
							margin: auto auto 0;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
							.brand__links__item {
								width: 46.4%;
								height: auto;
							}
								.brand__link__btn {
									display: flex;
									justify-content: center;
									align-items: center;
									width: 100%;
									height: 56px;
									border-radius: 28px;
									background-color: #fff;
									border: solid 1px var(--color--black);
									font-size: 1rem;
									font-weight: 700;
									line-height: 1;
									letter-spacing: 0.05em;
									position: relative;
									transition: .3s;
								}
								.brand__link__btn:hover {
									color: #fff;
									background-color: var(--color--black);
								}
									.brand__link__btn::before {
										content: '';
										display: block;
										width: 14px;
										height: 1px;
										background-color: var(--color--black);
										position: absolute;
										top: 50%;
										right: 23px;
										transform: translate(0%,-50%);
										transition: .3s;
									}
									.brand__link__btn::after {
										content: '';
										display: block;
										width: 6px;
										height: 6px;
										border-top: solid 1px var(--color--black);
										border-right: solid 1px var(--color--black);
										position: absolute;
										top: 50%;
										right: 23px;
										transform: rotate(45deg) translate(0%,-50%);
										transform-origin: center 0%;
										transition: .3s;
									}
									.brand__link__btn:hover::before {
										right: 20px;
										background-color: #fff;
									}
									.brand__link__btn:hover::after {
										right: 20px;
										border-color: #fff;
									}
}

/* Tablet ================================================== */
@media all and (min-width:600px) and (max-width:1024px){
#wrap {
	position: relative;
}
#wrap::before {
	content: '';
	display: block;
	width: 61.8%;
	height: 100%;
	background-color: var(--color--creamgray);
	position: absolute;
	top: 0;
	left: -11.8%;
	transform: rotate(-4deg);
	z-index: -1;
}
#brand {
	width: 100%;
	height: auto;
}
	.brand__inner {
		width: 100%;
		height: auto;
		padding: 0 0 100px;
		margin: 0 auto;
	}
		.brand__top_area {
			width: 100%;
			height: auto;
			margin: 0 auto 60px;
		}
			.brand__top_area__main_image {
				width: 100%;
				height: auto;
			}
				.brand__top_area__main_image picture img {
					width: 100%;
					height: auto;
				}
		.brand__list {
			width: 90%;
			height: auto;
			margin: 0 auto;
		}
			.brand__item {
				width: 100%;
				height: auto;
				margin-bottom: 80px;
			}
			.brand__item:last-of-type {
				margin-bottom: 0;
			}
				.brand__wrap {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: space-between;
					align-items: stretch;
				}
					.brand__logo {
						width: 43%;
						height: auto;
						border: solid 1px var(--color--creamgray);
					}
						.brand__logo img {
							width: 100%;
							height: auto;
						}
					.brand__details {
						width: 52%;
						height: auto;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
					}
						.brand__details__wrap {
							width: 100%;
							height: auto;
							margin: 0 auto 35px;
						}
							.brand__name {
								width: 100%;
								height: auto;
								margin: -2px auto 10px;
								font-size: 1.5rem;
								font-weight: 700;
								line-height: 1.5;
								letter-spacing: 0.08em;
							}
								.brand__name small {
									font-size: 1.25rem;
								}
							.brand__txt {
								width: 100%;
								height: auto;
								font-size: 0.875rem;
								font-weight: 500;
								line-height: 2;
								letter-spacing: 0.04em;
							}
						.brand__links {
							width: 100%;
							height: auto;
							margin: auto auto 0;
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
							.brand__links__item {
								width: 47%;
								height: auto;
							}
								.brand__link__btn {
									display: flex;
									justify-content: center;
									align-items: center;
									width: 100%;
									height: 56px;
									border-radius: 28px;
									background-color: #fff;
									border: solid 1px var(--color--black);
									font-size: 1rem;
									font-weight: 700;
									line-height: 1;
									letter-spacing: 0.05em;
									position: relative;
									transition: .3s;
								}
									.brand__link__btn::before {
										content: '';
										display: block;
										width: 14px;
										height: 1px;
										background-color: var(--color--black);
										position: absolute;
										top: 50%;
										right: 23px;
										transform: translate(0%,-50%);
										transition: .3s;
									}
									.brand__link__btn::after {
										content: '';
										display: block;
										width: 6px;
										height: 6px;
										border-top: solid 1px var(--color--black);
										border-right: solid 1px var(--color--black);
										position: absolute;
										top: 50%;
										right: 23px;
										transform: rotate(45deg) translate(0%,-50%);
										transform-origin: center 0%;
										transition: .3s;
									}
}

/* SP ================================================== */
@media all and (max-width:599px){
#wrap {
	position: relative;
}
#wrap::before {
	content: '';
	display: block;
	width: 61.8%;
	height: 100%;
	background-color: var(--color--creamgray);
	position: absolute;
	top: 0;
	left: -11.8%;
	transform: rotate(-4deg);
	z-index: -1;
}
#brand {
	width: 100%;
	height: auto;
}
	.brand__inner {
		width: 100%;
		height: auto;
		padding: 0 0 100px;
		margin: 0 auto;
	}
		.brand__top_area {
			width: 100%;
			height: auto;
			margin: 0 auto 60px;
		}
			.brand__top_area__main_image {
				width: 100%;
				height: auto;
			}
				.brand__top_area__main_image picture img {
					width: 100%;
					height: auto;
				}
		.brand__list {
			width: 90%;
			height: auto;
			margin: 0 auto;
		}
			.brand__item {
				width: 100%;
				height: auto;
				margin-bottom: 80px;
			}
			.brand__item:last-of-type {
				margin-bottom: 0;
			}
				.brand__wrap {
					width: 100%;
					height: auto;
				}
					.brand__logo {
						width: 100%;
						height: auto;
						border: solid 1px var(--color--creamgray);
						margin-bottom: 25px;
					}
						.brand__logo img {
							width: 100%;
							height: auto;
						}
					.brand__details {
						width: 100%;
						height: auto;
					}
						.brand__details__wrap {
							width: 100%;
							height: auto;
							margin-bottom: 25px;
						}
							.brand__name {
								width: 100%;
								height: auto;
								margin: 0 auto 12px;
								font-size: 1.5rem;
								font-weight: 700;
								line-height: 1.5;
								letter-spacing: 0.08em;
							}
								.brand__name small {
									font-size: 1.25rem;
								}
							.brand__txt {
								width: 100%;
								height: auto;
								font-size: 0.875rem;
								font-weight: 500;
								line-height: 2;
								letter-spacing: 0.04em;
							}
						.brand__links {
							width: 100%;
							height: auto;
							margin: 0 auto;
						}
							.brand__links__item {
								width: 100%;
								height: auto;
								margin: 0 auto 20px;
							}
							.brand__links__item:last-of-type {
								margin-bottom: 0;
							}
								.brand__link__btn {
									display: flex;
									justify-content: center;
									align-items: center;
									width: 100%;
									height: 56px;
									border-radius: 28px;
									background-color: #fff;
									border: solid 1px var(--color--black);
									font-size: 1rem;
									font-weight: 700;
									line-height: 1;
									letter-spacing: 0.05em;
									position: relative;
									transition: .3s;
								}
									.brand__link__btn::before {
										content: '';
										display: block;
										width: 14px;
										height: 1px;
										background-color: var(--color--black);
										position: absolute;
										top: 50%;
										right: 23px;
										transform: translate(0%,-50%);
										transition: .3s;
									}
									.brand__link__btn::after {
										content: '';
										display: block;
										width: 6px;
										height: 6px;
										border-top: solid 1px var(--color--black);
										border-right: solid 1px var(--color--black);
										position: absolute;
										top: 50%;
										right: 23px;
										transform: rotate(45deg) translate(0%,-50%);
										transform-origin: center 0%;
										transition: .3s;
									}
}