@charset "utf-8";

/* -----------------------------
	会社概要
-------------------------------- */
.company-area {
	position: relative;
	margin: 100px 0;
}

/*.company-area::before {
	content: "";
	width: 30%;
	height: 600px;
	background: var(--palegreen);
	position: absolute;
	bottom: -100px;
	left: 0;
	z-index: -2;
}*/

.company-area::after {
	content: "KR Dontics KR Dontics KR Dontics KR Dontics";
	position: absolute;
	left: 0;
	font-size: 18.0rem;
	font-family: var(--en);
	overflow: hidden;
	white-space: nowrap;
	font-weight: 300;
  	animation: marquee 60s linear infinite;
	letter-spacing: .6rem;
	line-height: 1;
	bottom: -35px;
	color: #FFFFFF;
	z-index: 1;
}

@keyframes marquee {
  0% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  100% {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
	}
}

.company-area .inner {
	padding: 100px 100px 180px;
	/*background: var(--palegreen);*/
	/*border: 1px solid #eee;*/
	position: relative;
	/*background: #F5FAFB;*/
	/*background: rgba(211,241,241,.5);*/
	/*background: rgba(230,230,230,.1);*/
	background: var(--palegreen);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.company-area .company-table {
	width: 100%;
	border-collapse: collapse;
}

.company-area .company-table th {
	border-bottom: 1px solid #ccc;
	padding: 30px 0;
	font-size: 1.6rem;
	line-height: 1.6;
	width: 25%;
	text-align: left;
}

.company-area .company-table td {
	border-bottom: 1px solid #ccc;
	padding: 30px 0;
	font-size: 1.6rem;
	line-height: 1.6;
	width: 75%;
	text-align: left;
}

@media screen and (max-width: 768px){
	.company-area {
		margin: 40px 0 50px;
	}
	
	.company-area .inner {
		padding: 30px 20px 100px;
		backdrop-filter: none;
		background: #F2F9FB;
	}
	
	.company-area::before {
		display: none;
	}
	
	.company-area::after {
		font-size: 8.0rem;
		bottom: -15px;
		z-index: 2;
		color: #D3E9EE;
		letter-spacing: .2rem;
	}
	
	.company-area .company-table th {
		width: 100%;
		display: block;
		border-bottom: none;
		padding: 15px 0 0;
	}

	.company-area .company-table td {
		width: 100%;
		display: block;
		padding: 10px 0 15px;
	}
}

.access-area {
	padding: 0 0 100px;
}

.access-area iframe{
	width: 100%;
	height: 400px;
}

@media screen and (max-width: 768px){
	.access-area {
		padding: 0;
	}

	.access-area iframe{
		width: 100%;
		height: 50vw;
	}
}