@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:1025px){
#company {
	width: 100%;
	height: auto;
}
	.company__inner {
		width: 90%;
		max-width: 1086px;
		height: auto;
		padding: 0 0 100px;
		margin: 0 auto;
	}
		.company__btn_area {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: solid 1px var(--color--gray);
		}
			.company__tab_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 64px;
				background-color: var(--color--creamgray);
				font-size: 1.25rem;
				font-weight: 700;
				letter-spacing: 0.04em;
				color: var(--color--gray);
				position: relative;
				cursor: pointer;
			}
			.company__tab_btn.active {
				background-color: var(--color--darkgray);
				color: #fff;
				pointer-events: none;
			}
				.company__tab_btn_icon {
					width: 6.5px;
					height: auto;
					margin-left: 15px;
					fill: var(--color--gray);
				}
				.active .company__tab_btn_icon {
					fill: #fff;
					transform: rotate(90deg);
				}
		.company__panel_area {
			width: 100%;
			height: auto;
		}
			.company__panel {
				display: none;
				width: 100%;
				height: auto;
			}
			.company__panel.active {
				display: block;
			}
				.company__panel__inner {
					width: 95%;
					max-width: 1000px;
					height: auto;
					padding: 50px 0 0;
					margin: 0 auto;
				}
					.company__panel__heading {
						width: 100%;
						height: auto;
						padding: 20px 0;
						margin: 0 auto 60px;
						border-bottom: solid 1px var(--color--lightgray);
						font-size: 1.625rem;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.05em;
						position: relative;
					}
						.company__panel__heading::after {
							content: '';
							display: block;
							width: 50px;
							height: 1px;
							background-color: var(--color--yellow);
							position: absolute;
							bottom: -1px;
							left: 0;
						}
					/* 会社概要 */
					.philosophy__wrap {
						width: 100%;
						height: auto;
						padding: 0 0 100px;
					}
						.philosophy__heading {
							width: 100%;
							height: auto;
							margin-bottom: 35px;
							font-size: 1.75rem;
							font-weight: 700;
							line-height: 2.0;
							letter-spacing: 0.1em;
							text-align: center;
						}
						.philosophy__txt {
							width: 100%;
							height: auto;
							font-size: 1rem;
							font-weight: 500;
							line-height: 2;
							letter-spacing: 0.06em;
							text-align: center;
						}
					/* 会社概要 */
					.profile__wrap {
						width: 100%;
						height: auto;
						margin: 0 auto;
					}
						.profile__list {
							width: 100%;
							max-width: 700px;
							height: auto;
							margin: 0 auto;
							border-bottom: solid 1px var(--color--lightgray);
						}
							.profile__item {
								width: 100%;
								height: auto;
								border-top: solid 1px var(--color--lightgray);
								font-size: 0.875rem;
								line-height: 2.0;
								letter-spacing: 0.04em;
								display: flex;
								justify-content: space-between;
								align-items: flex-start;
								flex-wrap: wrap;
							}
								.profile__item__heading {
									width: 150px;
									height: auto;
									padding: 12px 10px;
									font-weight: 700;
								}
								.profile__item__details {
									width: calc(100% - 150px);
									height: auto;
									padding: 12px 0;
									font-weight: 500;
								}
									.profile__item__details .note {
										display: inline-block;
										margin-top: 5px;
										font-size: 0.75rem;
									}
								.profile__item__map {
									width: 100%;
									height: auto;
									padding-bottom: 40px;
								}
									.profile__item__map iframe {
										width: 100%;
										height: 390px;
									}
					/* 沿革 */
					.history__wrap {
						width: 100%;
						height: auto;
						margin: 0 auto;
					}
						.history__list {
							width: 100%;
							max-width: 700px;
							height: auto;
							margin: 0 auto;
							border-bottom: solid 1px var(--color--lightgray);
						}
							.history__item {
								width: 100%;
								height: auto;
								padding: 12px 0;
								border-top: solid 1px var(--color--lightgray);
								font-size: 0.875rem;
								line-height: 2.0;
								letter-spacing: 0.04em;
							}
								.history__info {
									width: 100%;
									height: auto;
								}
									.history__info__item {
										width: 100%;
										height: auto;
										display: flex;
										justify-content: space-between;
										align-items: flex-start;
									}
										.history__info__heading {
											width: 145px;
											height: auto;
											padding: 0 30px 0 0;
											font-weight: 700;
											text-align: right;
										}
											.history__info__heading .year {
												width: auto;
												height: auto;
											}
											.history__info__heading .month {
												display: inline-block;
												width: 50px;
												height: auto;
											}
										.history__info__details {
											width: calc(100% - 145px);
											height: auto;
											padding: 0;
											font-weight: 500;
											position: relative;
										}
											.history__info__details .note {
												display: inline-block;
												margin-top: 5px;
												font-size: 0.75rem;
											}
											.histoyu__image {
												position: absolute;
											}
												.histoyu__image::before,
												.histoyu__image::after {
													content: '';
													display: block;
													background-color: var(--color--gray);
													position: absolute;
													opacity: 0;
												}
												.histoyu__image::before {
													width: 3px;
													height: 3px;
													border-radius: 1.5px;
													opacity: 0;
												}
												.histoyu__image::after {
													height: 1px;
												}
												.histoyu__image img {
													width: 100%;
													height: auto;
													opacity: 0;
													transform: scale(0.85,0.85);
													transition: .4s;
													transition-delay: .6s;
												}
												.img_on.histoyu__image::before {
													opacity: 1;
												}
												.img_on.histoyu__image img {
													opacity: 1;
													transform: scale(1,1);
												}
											.histoyu__image_01 {
												width: 182px;
												height: auto;
												top: -40px;
												right: -9px;
												transform: translate(100%,0%);
											}
												.histoyu__image_01::before {
													top: 52px;
													left: -246px;
												}
												.histoyu__image_01::after {
													width: 246px;
													top: 53px;
													left: -245px;
													transform: rotate(-4deg);
													transform-origin: 0% 50%;
												}
												.img_on.histoyu__image_01::after {
													animation: histoyu__image_01-line .3s ease 1 forwards;
												}
												@keyframes histoyu__image_01-line {
													0% {
														opacity: 0;
														transform: rotate(-4deg) scale(0,1);
													}
													100% {
														opacity: 1;
														transform: rotate(-4deg) scale(1,1);
													}
												}
											.histoyu__image_02 {
												width: 149px;
												height: auto;
												top: -25px;
												left: -164px;
												transform: translate(-100%,0%);
											}
												.histoyu__image_02::before {
													top: 37px;
													right: -164px;
												}
												.histoyu__image_02::after {
													width: 144px;
													top: 38px;
													right: -164px;
													transform: rotate(-5deg);
													transform-origin: 100% 50%;
												}
												.img_on.histoyu__image_02::after {
													animation: histoyu__image_02-line .3s ease 1 forwards;
												}
												@keyframes histoyu__image_02-line {
													0% {
														opacity: 0;
														width: 0px;
													}
													100% {
														opacity: 1;
														width: 144px;
													}
												}
											.histoyu__image_03 {
												width: 182px;
												height: auto;
												top: -90px;
												right: -11px;
												transform: translate(100%,0%);
											}
												.histoyu__image_03::before {
													top: 130px;
													left: -210px;
												}
												.histoyu__image_03::after {
													width: 180px;
													top: 131px;
													left: -210px;
													transform: rotate(-10deg);
													transform-origin: 0% 50%;
												}
												.img_on.histoyu__image_03::after {
													animation: histoyu__image_03-line .3s ease 1 forwards;
												}
												@keyframes histoyu__image_03-line {
													0% {
														opacity: 0;
														width: 0px;
													}
													100% {
														opacity: 1;
														width: 180px;
													}
												}
											.histoyu__image_04 {
												width: 156.5px;
												height: auto;
												top: -32px;
												left: -146px;
												transform: translate(-100%,0%);
											}
												.histoyu__image_04::before {
													top: 37px;
													right: -146px;
												}
												.histoyu__image_04::after {
													width: 139px;
													top: 38.2px;
													right: -144px;
													transform: rotate(3deg);
													transform-origin: 100% 50%;
												}
												.img_on.histoyu__image_04::after {
													animation: histoyu__image_04-line .3s ease 1 forwards;
												}
												@keyframes histoyu__image_04-line {
													0% {
														opacity: 0;
														width: 0px;
													}
													100% {
														opacity: 1;
														width: 139px;
													}
												}
}

/* Tablet ================================================== */
@media all and (min-width:600px) and (max-width:1024px){
#company {
	width: 100%;
	height: auto;
}
	.company__inner {
		width: 90%;
		height: auto;
		padding: 0 0 100px;
		margin: 0 auto;
	}
		.company__btn_area {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: solid 1px var(--color--gray);
		}
			.company__tab_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 54px;
				background-color: var(--color--creamgray);
				font-size: 1.125rem;
				font-weight: 700;
				letter-spacing: 0.04em;
				color: var(--color--gray);
				position: relative;
				cursor: pointer;
			}
			.company__tab_btn.active {
				background-color: var(--color--darkgray);
				color: #fff;
				pointer-events: none;
			}
				.company__tab_btn_icon {
					width: 6.5px;
					height: auto;
					margin-left: 15px;
					fill: var(--color--gray);
				}
				.active .company__tab_btn_icon {
					fill: #fff;
					transform: rotate(90deg);
				}
		.company__panel_area {
			width: 100%;
			height: auto;
		}
			.company__panel {
				display: none;
				width: 100%;
				height: auto;
			}
			.company__panel.active {
				display: block;
			}
				.company__panel__inner {
					width: 100%;
					height: auto;
					padding: 50px 0 0;
					margin: 0 auto;
				}
					.company__panel__heading {
						width: 100%;
						height: auto;
						padding: 18px 0;
						margin: 0 auto 60px;
						border-bottom: solid 1px var(--color--lightgray);
						font-size: 1.5rem;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.05em;
						position: relative;
					}
						.company__panel__heading::after {
							content: '';
							display: block;
							width: 50px;
							height: 1px;
							background-color: var(--color--yellow);
							position: absolute;
							bottom: -1px;
							left: 0;
						}
					/* 会社概要 */
					.philosophy__wrap {
						width: 100%;
						height: auto;
						padding: 0 0 120px;
					}
						.philosophy__heading {
							width: 100%;
							height: auto;
							margin-bottom: 35px;
							font-size: 1.75rem;
							font-weight: 700;
							line-height: 2.0;
							letter-spacing: 0.1em;
							text-align: center;
						}
						.philosophy__txt {
							width: 100%;
							height: auto;
							font-size: 1rem;
							font-weight: 500;
							line-height: 2;
							letter-spacing: 0.06em;
							text-align: center;
						}
					/* 会社概要 */
					.profile__wrap {
						width: 100%;
						height: auto;
						margin: 0 auto;
					}
						.profile__list {
							width: 100%;
							max-width: 700px;
							height: auto;
							margin: 0 auto;
							border-bottom: solid 1px var(--color--lightgray);
						}
							.profile__item {
								width: 100%;
								height: auto;
								border-top: solid 1px var(--color--lightgray);
								font-size: 0.875rem;
								line-height: 2.0;
								letter-spacing: 0.04em;
								display: flex;
								justify-content: space-between;
								align-items: flex-start;
								flex-wrap: wrap;
							}
								.profile__item__heading {
									width: 150px;
									height: auto;
									padding: 12px 10px;
									font-weight: 700;
								}
								.profile__item__details {
									width: calc(100% - 150px);
									height: auto;
									padding: 12px 0;
									font-weight: 500;
								}
									.profile__item__details .note {
										display: inline-block;
										margin-top: 5px;
										font-size: 0.75rem;
									}
								.profile__item__map {
									width: 100%;
									height: auto;
									padding-bottom: 40px;
								}
									.profile__item__map iframe {
										width: 100%;
										height: 390px;
									}
					/* 沿革 */
					.history__wrap {
						width: 100%;
						height: auto;
						margin: 0 auto;
					}
						.history__list {
							width: 100%;
							max-width: 700px;
							height: auto;
							margin: 0 auto;
							border-bottom: solid 1px var(--color--lightgray);
						}
							.history__item {
								width: 100%;
								height: auto;
								padding: 12px 0;
								border-top: solid 1px var(--color--lightgray);
								font-size: 0.875rem;
								line-height: 2.0;
								letter-spacing: 0.04em;
							}
								.history__info {
									width: 100%;
									height: auto;
								}
									.history__info__item {
										width: 100%;
										height: auto;
										display: flex;
										justify-content: space-between;
										align-items: flex-start;
										flex-wrap: wrap;
									}
										.history__info__heading {
											width: 135px;
											height: auto;
											padding: 0 30px 0 0;
											font-weight: 700;
											display: flex;
											justify-content: space-between;
											align-items: center;
										}
											.history__info__heading .year {
												width: auto;
												height: auto;
											}
											.history__info__heading .month {
												width: auto;
												height: auto;
												margin: 0 0 0 auto;
											}
										.history__info__details {
											width: calc(100% - 135px);
											height: auto;
											padding: 0;
											font-weight: 500;
										}
											.history__info__details .note {
												display: inline-block;
												margin-top: 5px;
												font-size: 0.75rem;
											}
											.histoyu__image {
												display: none;
											}
}

/* SP ================================================== */
@media all and (max-width:599px){
#company {
	width: 100%;
	height: auto;
}
	.company__inner {
		width: 90%;
		height: auto;
		padding: 0 0 100px;
		margin: 0 auto;
	}
		.company__btn_area {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: solid 1px var(--color--gray);
		}
			.company__tab_btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 54px;
				background-color: var(--color--creamgray);
				font-size: 1.125rem;
				font-weight: 700;
				letter-spacing: 0.04em;
				color: var(--color--gray);
				position: relative;
				cursor: pointer;
			}
			.company__tab_btn.active {
				background-color: var(--color--darkgray);
				color: #fff;
				pointer-events: none;
			}
				.company__tab_btn_icon {
					width: 6.5px;
					height: auto;
					margin-left: 15px;
					fill: var(--color--gray);
				}
				.active .company__tab_btn_icon {
					fill: #fff;
					transform: rotate(90deg);
				}

		.company__panel_area {
			width: 100%;
			height: auto;
		}
			.company__panel {
				display: none;
				width: 100%;
				height: auto;
			}
			.company__panel.active {
				display: block;
			}
				.company__panel__inner {
					width: 100%;
					height: auto;
					padding: 50px 0 0;
					margin: 0 auto;
				}
					.company__panel__heading {
						width: 100%;
						height: auto;
						padding: 13px 0;
						margin: 0 auto 30px;
						border-bottom: solid 1px var(--color--lightgray);
						font-size: 1.375rem;
						font-weight: 700;
						line-height: 1;
						letter-spacing: 0.05em;
						position: relative;
					}
						.company__panel__heading::after {
							content: '';
							display: block;
							width: 50px;
							height: 1px;
							background-color: var(--color--yellow);
							position: absolute;
							bottom: -1px;
							left: 0;
						}
					/* 会社概要 */
					.philosophy__wrap {
						width: 100%;
						height: auto;
						padding: 0 0 100px;
					}
						.philosophy__heading {
							width: 100%;
							height: auto;
							margin-bottom: 35px;
							font-size: 1.25rem;
							font-weight: 700;
							line-height: 2.0;
							letter-spacing: 0.1em;
							text-align: center;
						}
						.philosophy__txt {
							width: 100%;
							height: auto;
							font-size: 0.875rem;
							font-weight: 500;
							line-height: 2;
							letter-spacing: 0.06em;
						}
					/* 会社概要 */
					.profile__wrap {
						width: 100%;
						height: auto;
						margin: 0 auto;
					}
						.profile__list {
							width: 100%;
							height: auto;
							margin: 0 auto;
							border-bottom: solid 1px var(--color--lightgray);
						}
							.profile__item {
								width: 100%;
								height: auto;
								border-top: solid 1px var(--color--lightgray);
								font-size: 0.875rem;
								line-height: 2.0;
								letter-spacing: 0.04em;
								display: flex;
								justify-content: space-between;
								align-items: flex-start;
								flex-wrap: wrap;
							}
								.profile__item__heading {
									width: 110px;
									height: auto;
									padding: 12px 0;
									font-weight: 700;
								}
								.profile__item__details {
									width: calc(100% - 110px);
									height: auto;
									padding: 12px 0;
									font-weight: 500;
								}
									.profile__item__details .note {
										display: inline-block;
										margin-top: 5px;
										font-size: 0.75rem;
									}
								.profile__item__map {
									width: 100%;
									height: auto;
									padding-bottom: 40px;
								}
									.profile__item__map iframe {
										width: 100%;
										height: 300px;
									}
					/* 沿革 */
					.history__wrap {
						width: 100%;
						height: auto;
						margin: 0 auto;
					}
						.history__list {
							width: 100%;
							height: auto;
							margin: 0 auto;
							border-bottom: solid 1px var(--color--lightgray);
						}
							.history__item {
								width: 100%;
								height: auto;
								padding: 12px 0;
								border-top: solid 1px var(--color--lightgray);
								font-size: 0.875rem;
								line-height: 2.0;
								letter-spacing: 0.04em;
							}
								.history__info {
									width: 100%;
									height: auto;
								}
									.history__info__item {
										width: 100%;
										height: auto;
										display: flex;
										justify-content: space-between;
										align-items: flex-start;
										flex-wrap: wrap;
									}
										.history__info__heading {
											width: 115px;
											height: auto;
											padding: 0 20px 0 0;
											font-weight: 700;
											display: flex;
											justify-content: space-between;
											align-items: center;
										}
											.history__info__heading .year {
												width: auto;
												height: auto;
											}
											.history__info__heading .month {
												width: auto;
												height: auto;
												margin: 0 0 0 auto;
											}
										.history__info__details {
											width: calc(100% - 115px);
											height: auto;
											padding: 0;
											font-weight: 500;
										}
											.history__info__details .note {
												display: inline-block;
												margin-top: 5px;
												font-size: 0.75rem;
											}
											.histoyu__image {
												display: none;
											}
}