@charset "utf-8";

/*MV*/
.mv {
	width: 100vw;
	position: relative;
}

.mv-block {
	position: absolute;
	left: 10%;
	top: 32%;
}

.mv-block img {
	max-width: 480px;
	width: 100%;
	margin-bottom: 4rem;
}

.mv-block h1 {
	color: white;
	font-weight: bold;
	font-size: 2.53vw;
}

@media (max-width: 768px) {
	.mv-block {
		bottom: 15%;
		left: 50%;
		top: unset;
		transform: translateX(-50%);
		width: 80%;
	}

	.mv-block h1 {
		font-size: 5.6vw;
	}
}

/*ABOUT*/
.about {
	max-width: 1200px;
	width: 90%;
	margin: 89px auto 160px auto;
	background-image: url(../img/logo-about.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right;
}

.about h2,
.about .about-block {
	max-width: 1000px;
}

.about-block {
	margin-top: 38px;
	margin-bottom: 75px;
}

.about-block p:not(:first-child) {
	margin-top: 28px;
}

@media (max-width: 787px) {
	.about {
		background-size: 35%, contain;
		background-position: -3% top;
		width: auto;
		margin: 0;
		padding: 70px 8% 0;
	}

	.about-block {
		margin-bottom: 60px;
	}
}

/*GREETING*/
.greeting {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 1316px;
	width: 95%;
	margin: auto;
}

.greeting-img {
	max-width: 495px;
	width: 50%;
}

.greeting-img img {
	width: 100%;
}

.greeting-content {
	width: 50%;
	margin-left: 5%;
}

.greeting-content p {
	max-width: 593px;
	width: 95%;
	margin-top: 51px;
	margin-bottom: 70px;
}

@media (max-width: 768px) {
	.greeting {
		display: block;
		width: 92.1%;
		margin-top: 26.6vw;
	}

	.greeting-img {
		width: auto;
		max-width: 560px;
		margin: auto;
	}

	.greeting-content h2 {
		margin-top: 10.6vw;
	}

	.greeting-content {
		width: 100%;
		max-width: 560px;
		margin: auto;
	}

	.greeting-content p {
		margin-top: 5.33vw;
		margin-bottom: 8vw;
	}
}

/*NEWS*/
.news {
	max-width: 1000px;
	width: 95%;
	margin: 151px auto 113px auto;
}

.aritcle-block {
	margin-top: 23px;
	margin-bottom: 40px;
}

.aritcle-block article {
	display: flex;
	align-items: center;
	padding: 20px 0 20px 20px;
	border-top: 1px solid #CCCCCC;
}

.aritcle-block article:last-child {
	border-bottom: 1px solid #CCCCCC;
}

.news-title {
	flex: 0.95;
}

.category {
	background-color: #F6F6F6;
	padding: 5px 0;
	width: 91px;
	display: block;
	text-align: center;
	font-size: 1.2rem;
	color: #888888;
}

.post-date {
	color: #888888;
	font-size: 1.4rem;
	font-weight: 700;
	margin-right: 15px;
	margin-left: 15px;
	;
}

.post-detail {
	font-size: 1.4rem;
	margin-left: 30px;
	position: relative;
}

.post-detail::after {
	content: '';
	background-image: url(../img/common/post-arrow.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 10px;
	height: 15px;
	display: inline-block;
	position: absolute;
	top: 3px;
	right: -20px;
}

.news .btn {
	margin-left: auto;
	margin-right: 21px;
}

@media (max-width: 768px) {
	.post-detail {
		margin-left: auto;
		/* margin-right: 40px; */
	}

	.news-title {
		width: 100%;
		margin-top: 20px;
		margin-bottom: 10px;
		font-size: 3.73vw;
	}

	.aritcle-block article {
		flex-wrap: wrap;
	}

	.post-date,
	.post-detail {
		font-size: 3.2vw;
	}

	.category {
		font-size: 2.66vw;
		width: fit-content;
	}

	.post-detail::after {
		width: 1.7vw;
		height: 1.86vw;
		top: 1.5vw;
		right: -2.66vw;
	}

	.news-title {
		flex: unset;
	}

	.news {
		margin: 26.66vw auto;
	}

	.aritcle-block {
		margin-bottom: 60px;
	}

	.news .btn {
		margin: auto;
	}
}

/*PRODUCT*/
.product {
	width: 97%;
}

.product .top-section-list {
	margin-right: 0;
	margin-left: 6.66%;
}

@media (max-width: 1300px) {
	.product .section-group {
		left: 40%;
		top: 40%;
	}

	.product .square-btn {
		bottom: 10%;
		width: 46%;
	}

	.product .top-section-list {
		margin-left: 2%;
		max-width: 40%;
	}

	.product .title-wrap {
		margin-left: auto;
		margin-right: 0;
		width: 97%;
	}
}

@media (max-width: 980px) {
	.service .title-wrap {
		width: 97%;
		margin: 0;
		margin-right: auto;
	}

	.title-block {
		width: 23%;
	}
}

@media (max-width: 768px) {
	.product {
		width: 100%;
	}

	.product .top-section-list {
		max-width: unset;
		width: 100%;
		margin: 0;
		margin-top: 25px;
	}

	.product .section-group {
		left: 45%;
		top: 50%;
		width: 65%;
		/* max-width: 330px; */
	}

	.product .title-wrap {
		width: 90%;
		margin: auto;
	}
}

/*SERVICE*/
.service {
	/* max-width: 1330px; */
	width: 97%;
	margin-top: 116px;
	margin-left: auto;
}

.service .section-wrap {
	margin-top: 86px;
	margin-bottom: 140px;
	flex-direction: row-reverse;
	justify-content: flex-start;
	align-items: center;
}

.service .square-btn {
	bottom: 18%;
	right: 12%;
}

@media (max-width: 1300px) {
	.service .section-group {
		left: 40%;
		top: 40%;
	}

	.service .square-btn {
		bottom: 20%;
	}

	.service .top-section-list {
		margin-right: 2%;
		max-width: 40%;
	}
}

@media (max-width: 1080px) {
	.service {
		margin-top: 80px;
	}

	.service .section-wrap {
		margin-top: 50px;
	}

	.service .section-group {
		left: 40%;
		top: 36%;
		width: 70%;
	}

	.service .square-btn {
		bottom: 10%;
		right: 10%;
	}
}

@media (max-width: 980px) {
	.service .title-wrap {
		width: 97%;
		margin: 0;
		margin-right: auto;
	}

	.title-block {
		width: 23%;
	}
}

@media (max-width: 768px) {
	.service {
		width: 100%;
	}

	.service .title-wrap {
		width: 90%;
		margin: auto;
	}

	.service .btn.sp-only {
		margin-top: 60px;
	}

	.service .top-section-list {
		max-width: unset;
		margin-right: 0;
		width: 100%;
	}

	.title-block {
		width: 100%;
	}
}

/*LINK*/
.link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: relative;
	background-image: url(../img/link-bg.webp);
	background-color: #003644;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 297px;
	position: relative;
}

.link-block {
	width: 50%;
}

.link-block a {
	width: 100%;
	display: block;
	color: white;
}

.link-block__text {
	position: absolute;
	top: 40%;
	text-align: center;
	left: 50%;
	transform: translate(-50%, -50%);
}

.link-block .square-btn {
	width: 349px;
	left: 50%;
	transform: translate(-50%);
	bottom: 15%;
}

.link-block__text p {
	font-size: 3.2rem;
	font-weight: bold;
	color: white;
}

.link-block__text span {
	font-size: 2rem;
	letter-spacing: 0.07em;
	color: white;
}

.link-block .square-btn {
	background-color: unset;
	border: 1px solid white;
}

.link-block .square-btn a::after {
	background: url(../img/common/arrow-white.png);
	background-size: 100%, contain;
}

@media (max-width: 768px) {

	/* .link{
        height: 175px;
    } */
	.link {
		height: 40vw;
	}

	.link-block a {
		height: auto;
	}

	/* .link-block__text{
        margin-top: 90px;
    } */
	.link-block__text p {
		font-size: 4.26vw;
	}

	.link-block__text span {
		font-size: 2.66vw;
	}

	.link-block .square-btn {
		max-width: 349px;
		width: 65%;
		bottom: 10%;

	}
}

/*FOTTER*/
footer .container {
	max-width: clamp(320px, 97%, 1200px);
	margin: 0 auto;
}

.footer-contact {
	background-color: #333333;

	.container {
		text-align: center;
	}

	.contact-link {
		width: 90%;
		display: inline-block;
		text-decoration: none;
		font-size: 2.3rem;
		color: #fff;
		background: #044687;
		padding: 46px 0;
		transition: background 0.3s ease;
		transform: skewX(-15deg);

		&:hover {
			background: #ffffff;/* #85c023 */
		}

		span {
			position: relative;
			display: inline-block;
			z-index: 3;
			color: #fff;
			transform: skewX(15deg);
			transition: color 0.3s ease;
		}

		&:hover {
			span {
				color: #044687;
			}
		}
	}
}
@media (max-width: 768px) {
	.footer-contact {
		.contact-link {
			width: 76%;
			font-size: 1.8rem;
			padding: 32px 0;
		}
	}
}

.footer-links {
	background: linear-gradient(#41a1bb, #044687);
	padding: 0 0 70px;

	.container {
		display: flex;
		flex-direction: column;
		gap: 70px;
	}

	.footer-social {
		position: relative;
		text-align: center;
		padding: 24px 0;

		&:before {
			position: absolute;
			content: "";
			display: block;
			width: calc(100% - 20px);
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			height: 1px;
			background: #fff;
		}

		.social-list {
			display: inline-block;

			a {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 12px 50px 12px 44px;
				text-decoration: none;
				color: #fff;
				border: 1px solid #fff;
				gap: 54px;

				svg {
					width: 64px;
				}

				span {
					font-size: clamp(1.8rem, 0.8rem + 5vw, 2.3rem);
					font-weight: 700;

					small {
						display: block;
						font-size: clamp(1.3rem, 0.9rem + 2vw, 1.5rem);
						font-weight: 400;
					}
				}
			}
		}
	}

	.footer-menu {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"column1 column2 column3 column4"
			"column1 column2 column3 column5";
		gap: 60px 40px;
		padding: 0 24px;

		a {
			display: inline;
			padding-bottom: 2px;
			color: #fff;
			background: linear-gradient(to top, currentColor 2px, transparent 99%) no-repeat;
			background-position: 50% 100%;
			background-size: 0% 1px;
			transition: all 0.3s ease-out;

			&:hover {
				background-size: 200% 1px;
			}

		}

		.menu-column {
			.title {
				color: #fff;
				font-size: 1.8rem;
				margin-bottom: 10px;

				&:not(:first-of-type) {
					margin-top: 60px;
				}
			}

			.menu-list {
				margin-left: 1rem;

				li {
					font-size: 1.3rem;
					margin-bottom: 8px;
					&.menu-title {
						display: none;
					}

				}

			}
		}
		.menu-column.column1 {
			grid-area: column1;
		}
		.menu-column.column2 {
			grid-area: column2;
		}
		.menu-column.column3 {
			grid-area: column3;
		}
		.menu-column.column4 {
			grid-area: column4;
		}
		.menu-column.column5 {
			grid-area: column5;
		}
	}
}


@media (max-width: 768px) {

	.footer-links {
		padding: 0 0 20px;

		.container {
			gap: 20px;
		}

		.footer-social {
			padding: 20px 0;

			&:before {
				width: 100%;
			}

			.social-list {
				display: inline-block;
				width: clamp(320px, 100%, 480px);

				a {
					padding: 10px 20px;
					gap: 40px;

					svg {
						width: 40px;
					}

				}
			}
		}

		.footer-menu {
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 0;


			a {
				&::before {
					display: none;
				}
			}

		}

		.footer-menu.accordion-area {
			.menu-column {
				border: 1px solid #fff;
				position: relative;
				cursor: pointer;
				transition: all .5s ease;
				.title {
					font-size: 1.4rem;
					margin-bottom: 0 !important;
					padding: 20px 30px 20px 20px;
					&.close, &.close a {
						color: rgba(255, 255, 255, 0.4);
					}

					&::before {
						position: absolute;
						content: '';
						right: 16px;
						top: 26px;
						color: #fff;
						line-height: 1;
						width: 0.5em;
						height: 0.5em;
						border: 1px solid currentColor;
						border-left: 0;
						border-bottom: 0;
						box-sizing: border-box;
						transform: translateY(-25%) rotate(135deg);
					}
				}
				.title.close::before {
					transform: rotate(315deg);
				}
				.menu-list {
					display: none;
					margin: 0;
					padding: 0 20px 16px;
					li {
						padding-left: 16px;
						&.menu-title {
							display: block;
							font-size: 1.4rem;
							padding-left: 0;
						}
					}
				}
			}
		}
	}
}

.footer-copyright {
	background-color: #000;

	.container {
		text-align: right;
		padding: 34px 0;
		font-size: 1.3rem;
		color: #fff;
	}
}
@media (max-width: 768px) {
	.footer-copyright {
		.container {
			text-align: center;
		padding: 30px 0;
		}
	}
}

.contact-link_border {
	border: solid 2px #044687;
}
.contact-link_border:hover {
	border: solid 2px #333;
}


/* ページの上に戻る */
.pagetop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease, bottom 0.5s ease;
	z-index: 1000;

	.btn-pagetop {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.3);
		display: block;
		position: relative;
		text-indent: -9999px;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: 15px;
			height: 15px;
			border-top: 2px solid #fff;
			border-right: 2px solid #fff;
			transform: translate(-50%, -30%) rotate(315deg);
		}
	}
}

/* 下線 */
.deco_underline {
	text-decoration: underline;
}
/* リスト　中黒 */
.list__dot li {
    margin: 0.8em 0;
    position: relative;
    padding-left: 17px;
}
.list__dot li a:hover {
	opacity: 0.8;
}
.list__dot li::before {
	background: #6d6e70;
    border-radius: 50%;
    content: "";
    display: block;
    height: 6px;
    left: 0;
    position: absolute;
    top: 0.65em;
    width: 6px;
}
@media (max-width: 767px) {
    .list__dot {
        padding-left: 0;
    }
}

/* margin  */
.mt_08 {
	margin-top: 0.8em;
}
.mt_09 {
	margin-top: 0.9em;
}
.mt_10 {
	margin-top: 1em;
}
.mt_20 {
	margin-top: 2em;
}
.mb_08 {
	margin-bottom: 0.8em;
}
.mb_09 {
	margin-bottom: 0.9em;
}
.mb_10 {
	margin-bottom: 1em;
}
.mb_20 {
	margin-bottom: 2em;
}
.ml_08 {
	margin-left: 0.8em;
}
.ml_09 {
	margin-left: 0.9em;
}
.ml_10 {
	margin-left: 1em;
}
.ml_20 {
	margin-left: 2em;
}
/* FIX */