@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

/*
  font-family: "Noto Serif JP", serif;
  font-family: "Noto Sans JP", serif;
*/


/* -------------------------------------------------------------------------
	BASE
========================================================================= */

:root {
    --def-font-color: #000;
    --accent-color: #D7000F;
	--accent-sub-color: #FFF;
	--font-size-xsmall: 1.0rem;
	--font-size-small: 1.2rem;
	--font-size-medium: 1.4rem;
	--font-size-large: 1.6rem;
	--font-size-xlarge: 1.8rem;
	--font-family-sans: 'Noto Sans JP', sans-serif;
	--font-family-serif: "Noto Serif JP", serif;
	--def-bg-color: #FFF;
	--bg-sub-color: #EBEBEB;
}

* {
	margin: 0px;
	padding: 0px;
	}
html {
	scroll-behavior: smooth;
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-webkit-backface-visibility:hidden;
	}
body {
	width: 100%;
	line-height: 1;
	margin: 0;
	box-sizing: border-box;
	color: var(--def-font-color);
	line-height: 160%;
	font-size: 16px;
	font-size: var(--font-size-large);
	@media (width <= 768px){ font-size: 1.4rem; }
	font-family: var(--font-family-sans), -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-feature-settings: "palt";
	background-color: var(--def-bg-color);
	-webkit-backface-visibility:hidden;
	overflow-wrap: break-word;
	}
body {
	margin-top: 90px;
	@media (width <= 768px){ margin-top: 50px; }
	}

h1, h2, h3, h4, h5, h6, p { margin: 0px; }
b, strong, .bold { font-family: var(--font-family-serif), -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
address { font-style: normal; }
ul {
	list-style: none;
	padding: 0px;
	}
li { padding: 0px; }
input, select { vertical-align: middle; }
a {
	color: inherit;
	text-decoration: none;
	transition : all 0.4s ease 0s;
	}
a { -webkit-tap-highlight-color:transparent; }
a:visited { color: inherit; }
a:hover {
	filter: alpha(opacity=70);
	opacity: 0.7a:active { color: #e71f19; }
;
	}
a:active { color: inherit; }
img {
	width: 100%;
    height: auto;
	border: none;
	vertical-align: top;
	}
.fxsmall { font-size: var(--font-size-xsmall); } 
.fsmall { font-size: var(--font-size-small); } 
.fmedium { font-size: var(--font-size-medium); } 
.flage { font-size: var(--font-size-lage); } 
.fxlage { font-size: var(--font-size-xlage); }
.fkerning { margin-right: -0.4em; }
.bgAccent { background: var(--accent-color); }
.bgAccentSub { background: var(--accent-sub-color); }

#top {}

.hide {
	display: none;
	@media (width <= 768px){ display: inline; }
	}
.show {
	display: inline;
	@media (width <= 768px){ display: none; }
	}
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	@media (width <= 1150px){
		width: 90%;
		max-width: none;
		margin-inlie: auto;
		}
	}

.fadeUp { animation-name:fadeUpAnime; animation-duration:0.7s; animation-fill-mode:forwards; animation-timing-function: ease-out; opacity:0; }
@keyframes fadeUpAnime{ from { opacity: 0; transform: translateY(10px); filter: blur(0px); } to { opacity: 1; transform: translateY(0); filter: blur(0); }}
.fadeUpTrigger { opacity: 0; }



/* -------------------------------------------------------------------------
	HEADER
========================================================================= */
#head {
	width: calc(100% - ((17% / 136.6) * 100));
	height: 90px;
	padding: 0 calc((8.5% / 136.6) * 100);
	position: fixed;
	top: 0;
    z-index: 10;
	display: grid;
	align-items: center;
	grid-template-columns: repeat(2, 1fr);
	background: var(--def-bg-color);
	@media (width <= 768px){
		width: calc(100% - 40px);
		height: 50px;
		padding: 0 20px;
		}
	.logo {
		width: clamp(240px, 100%, 490px);
		@media (width <= 768px){ padding-top: 11px; }
		}
	}
#menus {
	input {
		position: absolute;
        top: 0;
        right: 0;
        z-index: 200;
        cursor: pointer;
        width: 70px;
        height: 50px;
        opacity: 0;
		display: none;
		}
	.menuList {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 2em;
		.contact > a {
			padding: 0.4em 0.9em;
			background: var(--accent-color);
			color: var(--accent-sub-color);
			}
		}
	@media (width <= 768px){
		.menu {
			width: 70px;
			height: 50px;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 100;
			background: var(--accent-color);
			transition: .2s ease-in-out;
			box-shadow: 0 0 0 0 var(--accent-color), 0 0 0 0 var(--accent-color);
			cursor: pointer;
			}
		.menu::before {
            content: "";
            width: 20px;
            height: 50px;
            position: absolute;
            top: 0;
            left: -0.5px;
            background:var(--def-bg-color);
			clip-path: polygon(0 0, 100% 0, 0 100%);
            }
		.hamburger {
			width: 20px;
			height: 1px;
			margin: auto;
			position: absolute;
			top: 5px;
			bottom: 0;
			right: 15px;
			background: var(--def-bg-color);
			display: block;
			transform-origin: center;
			transition: .3s ease-in-out;
			}
		.hamburger::before {
			transition: .3s ease-in-out;
			content: "";
			position: absolute;
			display: block;
			width: 100%;
			height: 100%;
			background: var(--def-bg-color);
			}
		.hamburger::before { top: -7px; }
		input { display: block; }
		input:checked + body { overscroll-behavior-y: none; }
		input:checked + .menu {
			border-radius: 0;
			}
		input:checked + .menu .hamburger {
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			}
		input:checked + .menu .hamburger::after {
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg);
			bottom: 0;
			}
		input:checked + .menu .hamburger::before {
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg);
			top: 0;
			}
		input:checked + .menu + ul { opacity: 1; display: flex; }
		.menuList {
			width: 100%;
			height: calc(100vh - 50px);
			padding-top: 3em;
			position: absolute;
			z-index: 200;
			top: 50px;
			left: 0;
			opacity: 0;
			display: none;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			gap: 1.5em;
			transition: .25s 0s ease-in-out;
			background: rgba(0, 0, 0, 0.9);
			color: var(--accent-sub-color);
			}
		a {
			display: block;
			color: inherit;
			}
		}
	}



/* -------------------------------------------------------------------------
	FOOTER
========================================================================= */
#foot {
	margin-top: clamp(80px, calc((13% / 136.6) * 100), 130px);
	padding-bottom: 1em;
	background: var(--bg-sub-color);
	.homeTitle > p { color: var(--def-font-color)!important; }
	.container {
		padding-top: clamp(40px, calc((6% / 120) * 100), 60px);
		}
	.footWrapper {
		margin-inline: calc((8.5% / 136.6) * 100);
		padding-top: 1em;
		display: flex;
		justify-content: center;
		gap: 3em;
		border-top: 1px solid var(--def-font-color);
		font-size: var(--font-size-small);
		@media (width <= 768px){
			margin-inline: 20px;
			flex-direction: column;
			align-items: center;
			gap: 0.5em;
			}
		}
	.copyright {}
	}
#contact {
	max-width: 1120px;
	margin-inline: auto;
	margin-bottom: 50px;
    .contList {
		padding-right: calc((6% / 112) * 100);
		@media (width <= 768px){
			padding-right: 0;
			flex-direction: column;
			align-items: center;
			border-right: none;
			}
		.logo {
			width: clamp(300px, calc((37% / 65) * 100), 370px);
			margin-bottom: 2em;
			@media (width <= 768px){
				margin-inline: auto;
				margin-bottom: 0.5em;
				}
			}
		dl {
			/*width: calc((75.5% / 120) * 100);
			@media (width <= 768px){ width: 100%; }*/
			display: flex;
			justify-content: space-between;
			flex-direction: row;
			gap: calc((4% / 65) * 100);
			@media (width <= 768px){
				padding-top: 1.5em;
				flex-direction: column;
				gap: 2em;
				}
			}
		.listWrapper {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-end;
			gap: 10px;
			@media (width <= 768px){
				justify-content: center;
                text-align: center;
				}
			dt {
				width: 100%;
				font-size: 1.3em;
				font-weight: 600;
				padding: 0.5em 0 0.5em;
				border-bottom: 1px solid #707070;
			    @media (width <= 768px){
				max-width: 300px;
				}
			}
			dd {
				width: 100%;
				font-size: 0.9em;
				}
			dd > a { color: var(--accent-sub-color); }
			.buttonS {
                min-width: auto;
				max-width: 5em;
				margin-left: 1.9em;
                padding: 0.4em 1.8em 0.4em 1em;
                display: inline-block;
                position: relative;
				font-size: 0.7em;
				line-height: 120%;
				&::after {
					width: 5px;
					height: 5px;
					margin: auto;
					position: absolute;
					right: 0.8em;
					top: 0;
					bottom: 0;
					border-width: 1px;
					}
				}
			}
		.listWrapper:last-of-type {
			max-width: 270px;
			@media (width <= 768px){ max-width: none; }
			}
		}
	.contactWrapper {
		padding-top: clamp(30px, calc((5% / 120) * 100), 50px);
		display: flex;
		justify-content: space-between;
		gap: calc((4% / 112) * 100);
		@media (width <= 768px){
			flex-direction: column;
			align-items: center;
			gap: 3em;
			}
		.listWrapper_form {
			max-width: 300px;
			padding: 2em 2em;
			background: var(--accent-sub-color);
			@media (width <= 768px){ text-align: center; }
			.buttonS {
				margin-top: 1em;
				color: var(--accent-sub-color)!important;
				text-align: center;
				line-height: 120%;
				background: var(--accent-color);
				border: 1px solid var(--accent-sub-color);
				@media (width <= 768px){ width: 100%; }
				&::after {
					border-color: var(--accent-sub-color);
					}
				& span { font-size: 0.8em; }
				}
			}
		}
    }

.modal-open{ cursor: pointer; }
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	}
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	}
.modal-container.active{
	opacity: 1;
	visibility: visible;
	}
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 800px;
	width: 90%;
	}
.modal-close{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
	}
.modal-content{
	background: #fff;
	text-align: left;
	padding: 30px;
	& h4 {
		font-size: 1.2em;
		font-weight: 700;
		text-align: center;
		}
	& p { padding-top: 1em; }
	}


/* -------------------------------------------------------------------------
	HOME
========================================================================= */
.homeTitle {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 0.4em;
    >* {
        font-weight: 400;
        font-size: 1em;
        }
    >p {
        color: var(--accent-color);
        font-size: 4.2rem;
        font-weight: 700;
        line-height: 100%;
        }
    }

#home {
	.mainvisual{
		width: 100%;
		max-height: 678px;
		aspect-ratio: 1366 / 678;
		background: url(../img/main_bg.webp) center top / cover no-repeat;
		.container {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: calc((22% / 136.6) * 100);
			@media (width <= 768px){ gap: calc((3.5% / 37.5) * 100); }
			}
		}
	.tagline {
		padding-top: clamp(5px, 5%, 110px);
		color: var(--accent-sub-color);
		font-weight: 500;
		font-size: clamp(2.5rem, 0.893rem + 2.5vw, 6.7rem);
		font-family: var(--font-family-serif);
		line-height: 150%;
		span {
			opacity: 0;
			transition: opacity 1s ease-in-out;
			}
		/*>span:nth-of-type(7) {margin-right: -0.4em; }*/
		@media (width <= 768px){
			>span:nth-of-type(6) {margin-right: 0; }
			>span:nth-of-type(6)::after {
				content: "";
				width: 0;
				height: 0;
				font-size: 0;
				display: block;
				}
			}
		/*@media (prefers-reduced-motion: no-preference) {
			display: inline-block;
			animation: fadeIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) calc(var(--index) * 0.15s) both infinite;
			}*/
		}
	.logo {
		width: clamp(130px, 26.8%, 322px);
		animation-delay: 1.5s;
		}
	.about {}
	.about, .business {
		padding-top: clamp(50px, calc((11% / 120) * 100), 110px);
		text-align: center;
		.contText {
			dt {
				padding-top: 30px;
				font-size: clamp(1.8rem, 1.196rem + 2.58vw, 3rem);
				line-height: 150%;
				}
			dd {
				padding-top: 1.2em;
				font-size: clamp(1.4rem, 1.098rem + 1.29vw, 2rem);
				line-height: 200%;
				}
			}
		}
	.message {
		margin-top: clamp(50px, calc((8% / 120) * 100), 80px);
		padding: calc((8% / 120) * 100) 0;
		@media (width <= 768px){ padding: 40px 0; }
		background: var(--bg-sub-color);
		text-align: left;
		.container {
			max-width: 1120px;
			@media (width <= 1120px){ width: 90%; }
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 50px calc((3.9% / 112) * 100);
			}
        figure {
            width: calc((51.8% / 112) * 100);
			@media (width <= 768px){
			width: 100%;
				}
			@media (width <= 500px){
				>img {
					height: 220px;
					object-fit: cover;
					object-position: top;
					}
				}
            }
		figcaption {
			padding-top: 0.8em;
			font-size: clamp(1.5rem, 1.235rem + 1.13vw, 2.2rem);
			font-weight: 500;
			@media (width <= 768px){
				text-align: center;
				}
			}
        .messageText {
            width: calc((56% / 112) * 100);
			@media (width <= 768px){
				width: 100%;
				order: -1;
				}
			> dt {
				font-size: clamp(1.5rem, 0.493rem + 4.3vw, 3.5rem);
				line-height: 120%;
				@media (width <= 768px){
				text-align: center;
				}
				}
			> dd {
				padding-top: 2em;
				line-height: 220%;
				@media (width <= 768px){
					text-align: center;
					}
				}
            }
        .buttonWrapper { width: 100%; }
        }
	.business {
		.list {
			padding-top: clamp(30px, calc((6% / 120) * 100), 60px);
			display: grid;
			grid-template-columns: repeat(4,1fr);
			gap: 35px 30px;
			@media (width <= 768px){
				grid-template-columns: repeat(2,1fr);
				gap: 15px 15px;
				}
			}
        .buttonWrapper { padding-top: clamp(30px, calc((6% / 120) * 100), 60px); }
		}
	}


.buttonL, .buttonS {
	padding: 1.2em 0.5em 1.2em 1.2em;
	margin-inline: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.8em;
	background: var(--accent-color);
	color: var(--accent-sub-color)!important;
	@media (width <= 768px){
		width: calc(220px - 1em);
		padding: 1em 0.4em 1em 1em;
		}
	&::after {
		content: "";
		display: block;
		border-top: 2px solid var(--accent-color);
		border-right: 2px solid var(--accent-color);
		transform: rotate(45deg);
		}
	}
.buttonL {
	width: calc(320px - 2.2em);
	font-size: 1.2em;
	font-weight: 600;
	@media (width <= 768px){ font-size: 1em; }
	&::after {
		width: 10px;
		height: 10px;
		transform: rotate(45deg);
		@media (width <= 768px){
			width: 8px;
			height: 8px;
			}
		}
	}
.buttonS {
	min-width: 180px;
	padding: 0.5em 0 0.5em 0.5em;
	background: var(--accent-sub-color);
	color: var(--accent-color)!important;
	border: 1px solid #D7000F;
	&::after {
		width: 7px;
		height: 7px;
		/*border-width: 1px;*/
		transform: rotate(45deg);
		@media (width <= 768px){
			width: 6px;
			height: 6px;
			}
		}
	}


.alternative {
	position: fixed !important;
	inset: 0 !important;
	display: block !important;
	inline-size: 4px !important;
	block-size: 4px !important;
	contain: strict !important;
	pointer-events: none !important;
	opacity: 0 !important;
	}

@keyframes taglineAnime {
	0% { opacity: 0; filter: blur(0); }
	100% { opacity: 1; filter: blur(0); }
	}


/* -------------------------------------------------------------------------
	PAGES
========================================================================= */
.pageWrapper {}
.pageTitleWrapper {
	width: 100%;
	max-height: 300px;
	aspect-ratio: 1366 / 300;
	overflow: hidden;
	@media (width <= 768px){ aspect-ratio: 375 / 160; }
	background: url(../img/main_bg.webp) center top / cover no-repeat;
	color: var(--accent-sub-color);
	> .container {
		max-width: none;
		padding: 0 calc((8.5% / 136.6) * 100);
		@media (width <= 768px){ padding: 0 20px; width: calc(100% - 40px);}
		}
	}
.breadcrumbs {
	padding: 1em 0;
	@media (width <= 768px){ padding: 0.5em 0; }
	display: flex;
	gap: 1em;
	font-size: var(--font-size-small);
	li:not(:last-of-type)::after {
		content: "＞";
		padding-left: 1em;
		}
	a { color: var(--accent-sub-color); }
	}
.pageTitle {
	margin-top: 1.5em;
	display: flex;
	flex-direction: column-reverse;
	gap: 1em;
	@media (width <= 768px){
		margin-top: 0.8em;
		gap: 0.5em;
		}
	h1 {
		font-size: var(--font-size-xlarge);
		font-weight: 700;
		@media (width <= 768px){ font-size: 1em; }
		}
	> p {
		font-size: clamp(2.6rem, -0.118rem + 11.6vw, 8rem);
		font-weight: 700;
		line-height: 100%;
		}
	}
.pageSection {
	padding: 3.5em 0;
	@media (width <= 768px){ padding: 2.5em 0; }
	}
.title, .subTitle {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.6em;
	font-size: clamp(1.8rem, 0.8rem + 4.27vw, 4rem);
	font-weight: 500;
	line-height: 100%;
	&::before {
		content: "";
		width: 4px;
		height: clamp(4rem, 2.636rem + 5.82vw, 7rem);
		display: block;
		--accent-sub2-color: #0090D8;
		background: var(--accent-sub2-color);
		}
	}
.subTitle {
	gap: 0.9em;
	font-size: clamp(1.6rem, 1.327rem + 1.16vw, 2.2rem);
	&::before { height: clamp(2.5rem, 1.591rem + 3.88vw, 4.5rem); }
	}

.tableList {
	> div {
		padding: 0.7em 0.2em;
		border-bottom: 1px solid #C4C4C4;
		display: flex;
		justify-content: flex-start;
		gap: 1em;
		>dt { min-width: 7em; }
		}
	}

/*  ---------------------------------------------------------*/
#about {}
#overview .tableList {
	max-width: 600px;
	padding-top: 4em;
	@media (width <= 768px){ padding-top: 2em; }
	}
#history .tableList { padding-top: 1.5em; }
#customers {
	padding-bottom: 0;
	.list {
		padding-top: 2em;
		display: flex;
		flex-wrap: wrap;
		gap: 1.3em 3em; 
		> li {
			width: calc((39.4% / 120) * 100);
			@media (width <= 768px){ width: 100%; }
			}
		}
	}


/*  ---------------------------------------------------------*/
#business {}
#businessLine {
	.lineList {
		padding-top: 3em;
		@media (width <= 768px){ padding-top: 2em; }
		display: flex;
		flex-wrap: wrap;
		gap: 1em 3em;
		font-size: clamp(1.5rem, 1.273rem + 0.97vw, 2rem);
		> li {
			width: calc((40% / 120) * 100);
			@media (width <= 768px){ width: 100%; }
			margin-left: 1em;
			text-indent: -1em;
			&::before { content: "●"; }
			}
		}
	}
#example {
	padding-bottom: 0;
	.list {
		padding-top: 2em;
		@media (width <= 768px){ padding-top: 1em; }
		display: flex;
		flex-wrap: wrap;
		gap: 50px 100px;
		@media (width <= 768px){ gap: 30px 50px; }
		> li {
			width: calc((40% / 120) * 100);
			@media (width <= 500px){ width: 100%; }
			font-size:clamp(1.4rem, 1.218rem + 0.78vw, 1.8rem);
			& figcaption {
				padding-top: 0.8em;
				&::before { content: "●"; }
				}
			}
		}
	}

.br-sp {
    display: none;
}

@media (max-width: 768px) {
    .br-sp {
        display: block;
    }
}