@charset "utf-8";

/*
  File Name   : top.css
  Description : Write top content styles
*/

/* root
============================================================ */
:root {
	--white: #fff;
	--lightgray: #f3f3f3;
	--black: #333;
	--gold: #ac9358;
	--red: #e30000;
	--dark-red: #820002;
	--background-base: #f2f2e0;
	--background-gray: #EFEFEF;
	--top-background: #ddd;
	--sidebar-odd: #F6F7EA;
	--sidebar-even: #F0EFDE;
	--personal-red: #960000;
	--business-red: #760000;
}

/* top
============================================================ */
.top-header {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 10;
}

.top-header-inner {
	display: grid;
	justify-content: end;
	padding: 20px 10px;
}



/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1000px) {
	.top-header-inner {
		padding: 10px;
	}

	.top-header-tel img {
		height: 35px;
	}

	.top-header-contact img {
		height: 20px;
	}
}

@media screen and (max-width: 811px) {
	.top-header .header-content {
		display: none;
	}
}

/* lay-side-nav-toggle-btn
============================================================ */
/* sp
------------------------------------------------------------ */
@media screen and (max-width: 811px) {
	#home .lay-side-nav-toggle-btn {
		display: block;
	}

	#home .lay-side-nav-toggle-btn-inner span {
		background-color: var(--red);
	}
}

/* lay-container
============================================================ */
#home #lay-container {
	background: linear-gradient(180deg, var(--white) 0%, var(--white) 41%, var(--top-background) 41%, var(--top-background) 100%);
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1000px) {
	#home #lay-container {
		background: linear-gradient(180deg, var(--white) 0%, var(--white) 14%, var(--top-background) 14%, var(--top-background) 100%);
	}
}

@media screen and (max-width: 481px) {
	#home #lay-container {
		background: linear-gradient(180deg, var(--white) 0%, var(--white) 36%, var(--top-background) 36%, var(--top-background) 100%);
	}
}

/* top-main
============================================================ */
.top-inner {
	display: flex;
	padding: 3% 0 3% 4%;
}

#js-home-bottom {
	background: var(--top-background);
	margin-top: -1px;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1000px) {
	.top-inner {
		flex-direction: column;
		padding: 0% 18.5% 7%;
	}
}

@media screen and (max-width: 481px) {
	.top-inner {
		padding: 0 0 30px 0;
	}
}

/*
============================================================ */
/* lay-head-general-tel-btn
============================================================ */
.lay-head-general-tel-btn {
	display: none;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 811px) {
	.lay-head-general-tel-btn {
		display: block;
		position: fixed;
		top: 0;
		right: 60px;
		z-index: 1000;
		cursor: pointer;
		height: 60px;
		padding-top: 12px;
		padding-left: 15px;
	}

	.lay-head-general-tel-btn a {
		display: block;
		z-index: 1000;
	}

	.lay-head-general-tel-btn img {
		height: 35px;
		width: 35px;
	}
}

/* kv-wrap
============================================================ */
#home .kv-wrap {
	position: relative;
	z-index: 1;
	width: 40%;
	margin: 0 auto;
}

#home .kv-wrap .kv-inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

#home .kv-wrap .kv-inner .kv-area {
	overflow: hidden;
	position: relative;
	z-index: 1;
	width: 100%;
	opacity: 0;
	box-shadow: 0 0 10px rgba(0, 0, 0, .45);
}

#home .kv-wrap .kv-inner .kv-item {
	vertical-align: top;
}

#home .kv-wrap .kv-inner .kv-item:nth-child(n+2) {
	display: none;
}

#home .kv-wrap .kv-inner .slick-initialized .kv-item {
	display: inline-block;
}

#home .kv-wrap .kv-inner .kv-item .kv-item-img {}

#home .kv-wrap .kv-inner .kv-item .kv-item-img img {
	object-fit: contain;
	width: auto;
}

#home .kv-wrap .kv-inner .slick-list {
	overflow: hidden;
	width: 100%;
	height: auto;
	padding: 0;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1200px) {
	#home .kv-wrap {
		width: 45%;
	}
}

@media screen and (max-width: 1000px) {
	#home .kv-wrap {
		order: 2;
		width: 100%;
		margin-top: 5%;
	}
}

@media screen and (max-width: 811px) {}

@media screen and (max-width: 481px) {
	#home .kv-wrap {
		order: 2;
		margin-top: 14px;
		width: 70%;
	}

	#home .kv-wrap .kv-inner .kv-area {
		/* box-shadow: none; */
	}
}

/* kv loading
============================================================ */
#home .kv-loading {
	position: absolute;
	z-index: 0;
	top: calc(50% - 40px - 30px);
	left: calc(50% - 40px);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#home .kv-loading::after {
	content: "";
	position: absolute;
	z-index: -1;
	overflow: hidden;
	width: 80px;
	height: 80px;
	border-top: 4px solid rgba(0, 0, 0, .1);
	border-right: 4px solid rgba(0, 0, 0, .1);
	border-bottom: 4px solid rgba(0, 0, 0, .1);
	border-left: 4px solid #333;
	border-radius: 50%;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load-animation 1.1s infinite linear;
	animation: load-animation 1.1s infinite linear;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 811px) {
	#home .kv-loading {
		top: calc(50% - 35px);
		left: calc(50% - 35px);
	}

	#home .kv-loading::after {
		width: 70px;
		height: 70px;
	}
}

@-webkit-keyframes load-animation {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes load-animation {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* top-content
============================================================ */
.top-content {
	width: 60%;
}

.top-main {
	display: grid;
	place-items: center;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1200px) {
	.top-content {
		width: 55%;
	}
}

@media screen and (max-width: 1000px) {

	.top-main,
	.top-content {
		display: contents;
	}
}

/* top-section
============================================================ */
.top-section {
	width: 100%;
}

.top-section-logo {
	padding: 5vw 10% 8% 10%;
	text-align: center;
}

.top-section-logo img {
	width: 35%;
}

.top-section-keyword {
	text-align: center;
}

.top-section-keyword img {
	width: 54%;
}

.top-section-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10% 2%;
	width: 54%;
	margin-inline: auto;
	margin-top: 6%;
}

.top-section-list li a {
	display: flex;
	background: var(--white);
	align-items: center;
	padding: 6% 4%;
	position: relative;
}

.top-section-list li a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 13%;
	transform: translateY(-50%);
	border-style: solid;
	border-width: 6px 0 6px 6px;
	border-color: transparent transparent transparent var(--red);
}

.top-section-list li a img {
	width: 12%;
}

.top-section-list li h2 {
	font-size: 1vw;
	font-weight: normal;
	margin-left: 2%;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1200px) {
	.top-section-keyword img {
		width: 65%;
	}

	.top-section-list {
		width: 65%;
	}
}

@media screen and (max-width: 1000px) {

	.top-section,
	.top-section-inner {
		display: contents;
	}

	.top-section-head {
		order: 1;
	}

	.top-section-logo img {
		width: 35%;
	}

	.top-section-logo {
		padding-top: 0;
		margin-top: 5%;
	}

	.top-section-keyword img {
		width: 80%;
	}

	.top-section-list {
		order: 3;
		width: 100%;
		margin-top: 10%;
	}

	.top-section-list li h2 {
		font-size: 1.8vw;
	}
}

@media screen and (max-width: 481px) {
	.top-section-head {
		display: contents;
	}

	.top-section-logo {
		order: 1;
		padding: 0;
		z-index: 1;
		margin-top: 14px;
	}

	.top-section-logo img {
		width: 100px;
	}

	.top-section-keyword {
		order: 3;
		margin-top: 20px;
	}

	.top-section-keyword img {
		width: 50%;
	}

	.top-section-list {
		margin-top: 20px;
		padding-inline: 15px;
	}

	.top-section-list li a::after {
		right: 5%;
		border-width: 4px 0 4px 4px;
	}

	.top-section-list li h2 {
		font-size: 3.2vw;
	}
}

/* top-footer
============================================================ */
.top-footer {
	margin-top: 8%;
}

.top-footer-inner {
	display: grid;
}

.top-footer ul {
	margin-inline: auto;
	font-size: 0.75vw;
	display: flex;
	justify-content: center;
}

.top-footer ul li a {
	padding-inline: 0.5rem;
	display: block;
	line-height: 1;
}

.top-footer ul li:not(:first-child) a {
	border-left: 1px solid var(--black);
}

.top-footer-copyright {
	margin-top: 3%;
	font-size: 0.75vw;
	text-align: center;
}

/* sp
------------------------------------------------------------ */
@media screen and (max-width: 1000px) {
	.top-footer {
		order: 4;
		margin-top: 13%;
	}
}

@media screen and (max-width: 481px) {

	.top-footer ul,
	.top-footer-copyright {
		font-size: 10px;
	}
}