@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: #0000CD;
	--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:  var(--accent-sub-color); }
	}
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%;
	margin: 0px auto;
	@media (width <= 1150px){
		width: 90%;
		max-width: none;
		margin-inlie: auto;
		}
	}

.fadeUp { animation-name:fadeUpAnime; animation-duration:1.5s; 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; }

/* ---------------------------------------------------
  TOPページ　ボタン
==================================================== */
.fadeUp_2 { animation-name:fadeUpAnime; animation-duration:1.5s; animation-delay: 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%, 240px);
		@media (width <= 768px){
			
		}
		}
	}
#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;
			}
		}
	}


/*---　ボタン　--------------
---------------------------*/

.fixed-btn { 
  position: fixed;
  bottom: 30px;
  left: auto;
  right: 115px;
  width: 185px;
  height: 185px;
  background-color: var(--accent-color);
  color: var(--accent-sub-color) !important;
  border-radius: 100px;
  box-shadow: 1px 1px 5px #FFF;
  z-index: 1;
  text-align: center;
  @media (width <= 768px) {
	right: 30px;
	width: 120px;
	height: 120px;
  }
}

.fixed-btn p {
	font-size: clamp(1.6rem, 1.213rem + 1.65vw, 2.4rem);
	margin-top: 65px;
	@media (width <= 768px) {
		margin-top: 40px;
	}
	 > span {
        font-size: clamp(1.4rem, 1.11rem + 1.24vw, 2rem);
		letter-spacing: 0.2rem;
	}
}


/* -------------------------------------------------------------------------
	top_image
========================================================================= */

	.spnone {
		@media (width <= 768px) {
			display: none;
		}
	}

    .pcnone {
		@media (width >= 768px) {
			display: none;
		}
		@media (width <= 768px) {
			display: block;
		}
	}

	.tagline_img {
		width: 100%;
	}

	.top_image {
		position: relative;
	}

	.tagline_1, .tagline_2 {
		color: var(--accent-sub-color);
		position: absolute;
		width: 20%;
		left: 12%;
		right: auto;
		line-height: 1em;
		@media (width <= 768px) {
			width: 40%;
			left: 30%;
		}
	}

	.tagline_1 {
		top: 70%;
		@media (width <= 768px) {
			top: 20%;
		}
	}

	.tagline_2 {
		top: 80%;
		@media (width <= 768px) {
			top: 33%;
		}
	}

/* -------------------------------------------------------------------------
	Company
========================================================================= */

#Thoughts {
	.container {
		display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 50px calc((3.9% / 112) * 100);
		@media (width <= 1150px) {
		width: 100%;
	    }
	}
	.title {
		margin: 0 0 40px 0;
	}
	.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 {
				line-height: 220%;
				@media (width <= 768px){
					text-align: justify;
					}
				}
            }
	figure {
            width: calc((51.8% / 112) * 100);
			@media (width <= 768px){
			width: 100%;
				}
			@media (width <= 500px){
				>img {
					height: 220px;
					object-fit: cover;
					object-position: top;
					}
				}
            }
}


/* -------------------------------------------------------------------------
	FOOTER
========================================================================= */
#foot {
	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;
			}
		}
	ul {
		display: flex;
		gap: clamp(1.25rem, 0.645rem + 2.58vw, 2.5rem);
		justify-content: center;
		@media (width <= 768px){
		  display: grid;
          column-gap: 3em;
          grid-template-columns: repeat(2, auto);
		}
	}
	}
	.footer-list {
        width: 100%;
		margin-top: clamp(1.875rem, 1.331rem + 2.32vw, 3rem);
	}

#contact {
	max-width: 1120px;
	margin-inline: auto;
	margin-bottom: 50px;
	@media (width <= 768px) {
		margin-bottom: clamp(1.875rem, 1.27rem + 2.58vw, 3.125rem);
	}
    .contList {
		margin-top: clamp(2.375rem, 1.165rem + 5.16vw, 4.875rem);
		.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;
			flex-direction: row;
			justify-content: center;
			gap: calc((2% / 65) * 100);
			@media (width <= 768px){
				padding-top: 1.5em;
				flex-direction: column;
				gap: 2em;
				}
			}
		.listWrapper {
			width: 300px;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			align-items: flex-start;
			@media (width <= 768px){
				width: 100%;
                align-items: center;
				justify-content: center;
                text-align: center;
				}
			dt {
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 1.0em;
				font-weight: 600;
				padding: 0.5em 0 0.5em;
				border-bottom: 1px solid #707070;
			    @media (width <= 768px){
				max-width: 300px;
				display: block;
				border-bottom: none;
				}
			}
			dd {
				width: 100%;
				font-size: 0.9em;
				}
			dd > a { color: var(--accent-sub-color); }
			.buttonS {
                min-width: auto;
				max-width: 5em;
				margin-left: auto;
				margin-right: 0;
                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;
					}
				@media (width <= 768px) {
					min-width: 180px;
				}
				}
			}
		.listWrapper:last-of-type {
		
		}
			}
		}
	.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;
			}
			}

	.logo img {
		@media (width <= 768px){
			width: 200px;
		}
	}


.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%;
		aspect-ratio: 1366 / 589;
		.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 {
		.contText {
			dd{
				width: auto;
			}
		}
		.buttonWrapper {
			margin-bottom: clamp(3.75rem, 1.633rem + 9.03vw, 8.125rem);
		}
	}
	.about, .business, .recruit {
		padding-top: clamp(50px, calc((11% / 120) * 100), 110px);
		text-align: center;
		.contText {
			dt {
				padding-top: 32px;
				font-size: clamp(1.8rem, 1.196rem + 2.58vw, 3rem);
				line-height: 150%;
				}
			dd {
				padding-top: 2.4em;
				font-size: clamp(1.4rem, 1.098rem + 1.29vw, 2rem);
				line-height: 200%;
				}
			}
		.buttonWrapper { 
			padding-top: clamp(30px, calc((6% / 120) * 100), 60px);
		}
		}
	.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 {
		background-color: var(--bg-sub-color);
		
		.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(3rem, 2.637rem + 1.55vw, 3.75rem); }
		}
	
	
	
	.recruit {
		background: linear-gradient(#0606CA 0%, #000075 100%);
	    padding-bottom: clamp(3.75rem, 1.633rem + 9.03vw, 8.125rem);       
	}
	.recruit  p{
		color: #FFF;
	}
	.recruit h3{color: #FFF;}
	.recruit dt{color: #FFF;}
		 dd {
		  width: calc(100% - 50%);
		  margin: 0 auto;
			@media (width <= 768px){
				width: 100%;
			 }
	     }
	}

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

    .business-list {
		position: relative;
		justify-content: space-between;
		 &::after {
	    position: absolute;
        top: 40px;
        left: 50%;
        width: 1.5px;
        height: 78%;
        margin-left: -2px;
        content: "";
		background: #BBBBBB;
		@media (width <= 768px) {
			display: none;
		}
		}
    }

	.business-list ul {
	   display: flex;
	   justify-content: center;
	   gap: 150px;
	   margin-top: clamp(3.125rem, 1.613rem + 6.45vw, 6.25rem);
	   padding-bottom: 130px;
		@media (width <=768px) {
			display:block;
			padding-bottom: 30px;
		}
	}

    .business-list ul li {
	   display: flex;
	   flex-direction: column;
	   width: calc((100% - 30%) / 2);
	   position: relative;
	   justify-content: space-between;
		@media (width <= 768px) {
			width:100%;
			margin-top: 50px;
			border-bottom: 1.5px solid #BBBBBB;
			padding: 0 0 40px;
		}
	}

.business-list ul li:last-child {
	border-bottom: none;
}    

	.business-list ul p {
	   font-size: 1.5em;
	   font-weight: 500;
	   line-height: 1.4em;
       margin: 1.7em 0 1.7em;
       display: flex;
	   flex-grow: 1;
       justify-content: center;
       align-items: center;
	   @media (width <= 768px) {
			font-size: 1.2em;
		    line-height: 1.5em;
		}
	}

    .business-btn {
	   font-family: 'Noto Sans JP';
	   font-size: 1.75em;
	   font-weight: 700;
	   padding: 0.8em 0.5em 0.8em 0.8em;
	   align-items: center;
	   background: linear-gradient(#0606CA 0%, #000075 100%);
	   color: #FFF;
		@media (width <= 768px) {
			font-size: 1.5em;
		}
	} 

    .recruit hgroup p {
          font-size: 4.2rem;
		}

    .recruit p {
          font-size: 1.5em;
		}

    .recruit ul {
          width: calc(100% - 50%);
		  display: flex;
		  justify-content: center;
		  margin: 0 auto;
		  gap: 10%;
		   @media (width <= 768px){
			   width: 100%;
			   display: block;
		   }
		}
    .recruit ul li {
          margin-top: clamp(2.5rem, 2.046rem + 1.94vw, 3.438rem);
		  width: calc((100% - 110px) / 2);
		   @media (width <= 768px){
			   width: 100%;
		   }
		}


.buttonL, .buttonS, .buttonF {
	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-sub-color);
		border-right: 2px solid var(--accent-sub-color);
		transform: rotate(45deg);
		}
	}

.buttonM  {
	padding: 1.0em 0.5em 1.0em 1.0em;
	margin-inline: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.8em;
	background: var(--accent-sub-color);
	color: var(--accent-color)!important;
	border: 1px solid var(--accent-color);
	@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);
		}
	}

.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, .buttonF {
	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;
			}
		}
	}

.buttonM {
	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 #0000CD;
	&::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;
	@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);}
		}
	}

/* -------------------------------------------------------------------------
	Company
========================================================================= */
.company-pageTitleWrapper {
	width: 100%;
	max-height: 300px;
	aspect-ratio: 1366 / 300;
	@media (width <= 768px){ aspect-ratio: 375 / 160; }
	background: url(../img/company_photo.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);}
		}
	}

.buisiness-pageTitleWrapper {
	width: 100%;
	max-height: 300px;
	aspect-ratio: 1366 / 300;
	@media (width <= 768px){ aspect-ratio: 375 / 160; }
	background: url(../img/buisiness_photo.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);}
		}
	}

.recruit-pageTitleWrapper {
	width: 100%;
	max-height: 300px;
	aspect-ratio: 1366 / 300;
	@media (width <= 768px){ aspect-ratio: 375 / 160; }
	background: url("../img/recruit_photo.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);}
		}
	}


.contact-pageTitleWrapper {
	width: 100%;
	max-height: 300px;
	aspect-ratio: 1366 / 300;
	@media (width <= 768px){ aspect-ratio: 375 / 160; }
	background: url("../img/contact_photo.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);}
		}
}


.pageSection-container {
	width: 100%;
	max-width: 1200px;
	padding: 3.5em 0;
	margin: 0px auto;
	@media (width <= 768px) {
		width: 90%;
		padding: 2.5em 0;
	}
}

.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-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 {
		max-width: 800px;
		padding-top: 4em;
		padding: 0.7em 0.2em;
		border-bottom: 1px solid #C4C4C4;
		display: flex;
		justify-content: flex-start;
		/*gap: 4em;*/
		>dt { min-width: 9em; }
		}
	}



/* -------------------------------------------------------------------------
	Our Buisiness
========================================================================= */
#west {
	padding: 0;
	padding-top: 90px;
	margin-top: -90px;
	ul {
		text-align: left;
		font-size: clamp(1.6rem, 1.406rem + 0.83vw, 2rem);
	}
}

#east {
	padding-top: 90px;
	margin-top: -90px;
	ul {
		font-size: clamp(1.6rem, 1.406rem + 0.83vw, 2rem);
	}
}

#west .subTitle, #east .subTitle{
	padding: 2.5em 0 1.5em 0; 
	@media (width <= 768px) {
		padding: 2em 0 1em 0;
	}
}

#west,#east .buttonWrapper {
	   font-size: 1.5em;
	   margin-bottom: 16px;
		@media (width <= 768px){
			text-align: center;
		}
		p {
			margin-top: 1em;
			@media (width <= 768px){
				text-align: center;
			}
		}
		a {
			font-size: 0.8em;
			margin: 1em 0;
			@media (width <= 768px){
				margin-inline: auto;
			}
		}
}
       
.buisiness-copy {
	width: 100%;
	padding: 1.5em 0;
	font-size: clamp(1.8rem, 1.316rem + 2.06vw, 2.8rem);
	font-weight: 500;
	line-height: normal;
}


.businesscontent {
   margin: 3em 0;
   font-weight: 600;
   line-height: 3.2rem;
   p {
	font-size: clamp(1.8rem, 1.406rem + 0.83vw, 2.2rem);
	@media (width <= 768px){
		text-align: left !important;
	}
   }
}


.requirements {
   max-width: 900px;
   @media (width <= 768px){
	text-align: left;
   }
    li {
	 @media (width <= 768px){
		line-height: 2.5rem;
		margin-bottom: .5em;
	 }
   }
}

.requirements div {
   padding-bottom: 32px;
   > dt {
	   font-size: clamp(1.8rem, 1.606rem + 0.83vw, 2.2rem);
	   font-weight: 500;
	   padding-bottom: 16px;
   }
    > dd {
		font-size: clamp(1.6rem, 1.406rem + 0.83vw, 2rem);
	}
}

.department {
  padding-bottom: 24px;
}

.Achievements {
   line-height: clamp(2.5rem, 2.016rem + 2.06vw, 3.5rem);
}


/* -------------------------------------------------------------------------
	採用情報　Recruit
========================================================================= */
#anker {
	@media (width <= 768px) {
		padding: 1.5em 0;
	}
}

#anker .subTitle {
	@media (width <= 768px) {
		padding: 2.5em 0 1.5em 0;
	}
}

#anker div {
	text-align: center;
}

#anker div ul {
	display: flex;
	justify-content: center;
	width: 400px;
	margin: 0 auto;
	@media (width <= 768px) {
		display: block;
		width: 100%;
	}
}

.west-button {
  display: inline-block;
  width: 210px;
  position: relative;
  padding: 1em 2em;
  font-weight: bold;
  color: var(--accent-color) !important;
	&::before {
	 content: '';
     width: 8px;
     height: 8px;
     border: 0;
     border-bottom: 2px solid var(--accent-color); /* 矢印の色 */
     border-right: 2px solid var(--accent-color); /* 矢印の色 */
     transform: rotate(45deg);
     position: absolute;
     top: 50%;
     left: 25px;
     margin-top: -6px;
	}
}

.east-button {
  display: inline-block;
  width: 170px;
  position: relative;
  padding: 1em 2em;
  font-weight: bold;
  color: var(--accent-color) !important;
  @media (width <= 768px) {
	width: 210px;
  }
	&::before {
	 content: '';
     width: 8px;
     height: 8px;
     border: 0;
     border-bottom: 2px solid var(--accent-color); /* 矢印の色 */
     border-right: 2px solid var(--accent-color); /* 矢印の色 */
     transform: rotate(45deg);
     position: absolute;
     top: 50%;
     left: 25px;
     margin-top: -6px;
	}
}

.west-button{
    &::after {
        position: absolute;
        top: 8px;
        left: 95%;
        width: 1.5px;
        height: 78%;
        margin-left: -2px;
        content: "";
        background: #BBBBBB;
		@media (width <= 768px){
			display: none;
		}
    }
}

.portrait ul {
	font-size: clamp(1.8rem, 1.406rem + 0.83vw, 2.2rem);
	font-weight: 500;
	> li {
		margin-bottom: 32px;
		line-height: 1.4em;
	}
	@media (width <= 768px) {
		text-align: left;
		 > li {
			margin-bottom: 24px;
		 }
	}
}

.qualification {
	display: flex;
	@media (width <= 768px) {
		display: block;
		line-height: 2.4rem;
	   }
	 > li {
       margin-right: 3.2rem;
	   @media (width <= 768px){
		margin-right: auto;
		line-height: 2.8rem;
	   }
	 }
	b {
		font-family:  "Noto Sans JP";
	}
}

.work p {
	font-size: clamp(1.6rem, 1.406rem + 0.83vw, 2rem);
	span {
		font-size: 16px;
		@media(width <= 768px){
			font-size: 12px;
		}
	}
	@media(width <= 768px){
		text-align: left !important;
	}
}

.work div {
	font-size: clamp(1.6rem, 1.406rem + 0.83vw, 2rem);
	line-height: clamp(2.5rem, 2.016rem + 2.06vw, 3.5rem);
	@media (width <= 768px){
		text-align: left;
	}
    dt {
		font-size: clamp(1.8rem, 1.606rem + 0.83vw, 2.2rem);
		font-weight: 500;
		margin-top: 20px;
	}
	dd {
		margin-top: 1.2rem;
		font-size: clamp(1.6rem, 1.406rem + 0.83vw, 2rem);
		@media(width <= 768px){
			margin-top: 1.2rem;
		}
	}
}

.work-text {
	margin-top: initial !important;
}

.business-trip div {
	font-size: clamp(1.6rem, 1.406rem + 0.83vw, 2rem);
    line-height: 3rem;
	@media (width <= 768px){
		text-align: left;
	}
	dt {
		margin-bottom: 1.2rem;
	}
	dd {
		margin-bottom: 1.6rem;
	}
    ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em 1.2em;
	}
}

.reception {
	line-height: clamp(2.5rem, 2.016rem + 2.06vw, 3.5rem);
}

.recruit-img {
	width: 100%;
	margin-top: 3em;
	display: flex;
	gap: 72px;
	@media(width <= 768px) {
		display: block;
	}
	img {
		@media(width <= 768px) {
			margin-bottom: 20px;
		}
	}
}

.conditions {
	ul {
		display: grid;
		width: fit-content;
		grid-template-columns: repeat(2, auto);
		gap: 0.5em 2em;
		@media (width <= 768px){
			display: block;
		}
	}
}

.conditions div {
    margin-top: 1em;
	@media (width <= 768px){
		text-align: left;
	}
	dt {
		font-size: clamp(1.8rem, 1.606rem + 0.83vw, 2.2rem);
		font-weight: 500;
		margin-bottom: 1.2rem;
	}
	dd {
		font-size: clamp(1.6rem, 1.406rem + 0.83vw, 2rem);
		line-height: 3rem;
	}
}

/* -------------------------------------------------------------------------
	採用情報　Recruit Interview
========================================================================= */

.Interview {
	margin-top: clamp(6rem, 5.032rem + 4.13vw, 8rem);
	margin-bottom: clamp(4rem, 3.032rem + 4.13vw, 6rem);
	background-color: var(--bg-sub-color);
	h2 {
		font-size: 16px;
	}
}

.Interview-list {
	display: flex;
	flex-wrap: wrap;
	width: calc((100% - 4rem));
	gap: 2rem;
	padding: 8rem 2rem 2rem;
	@media (width <= 768px) {
		padding: 5rem 2rem 2rem;
	}
}

.persons-info {
	display: flex;
	flex-direction: column;
	height: clamp(18rem, 16.548rem + 6.19vw, 21rem);
    padding: 10px;
	border: 1px solid #f8f8f8;
    background-color: #fff;
}

.persons-img {
	max-width: 373px;
}

.persons-text {
	margin: 0px !important;
	font-size: clamp(1.4rem, 1.206rem + 0.83vw, 1.8rem);
	@media (width <= 768px) {
		margin: 0px !important;
		text-align: left !important;
	}
}

.persons-name {
	font-size: clamp(1.2rem, 1.006rem + 0.83vw, 1.6rem);
	margin-top: auto !important;
	@media (width <= 768px) {
		text-align: left !important;
	}
}

.persons-year {
	font-size: 15px;
	margin: 1.8rem;
}

.post-text {
	padding: 24px 19px 30px;
}

.post-content {
	margin-bottom: 24px;
	font-size: 1.8rem;
	letter-spacing: .15em;
	line-height: 1.3;
}

#inquiry {
	text-align: center;
}

#inquiry .buttonWrapper {
	text-align: center;
	margin: 2em 0 4em 0;
	@media(width <= 768px){
		margin: 1.2em 0 3em 0;
	}
	span {
		font-size: 0.8em;
	}
	p {
		font-size: clamp(1.4rem, 1.061rem + 1.45vw, 2.1rem);
	}
	a {
		margin: 1em auto;
	}
}

#inquiry , .buttonF {
	margin: 1em auto;
	display: block;
	line-height: 1em;
	position: relative;
	padding: 0.7em;
	&::after {
		content: '';
		display: inline;
		position: absolute;
		top: 28px;
		right: 45px;
		/*--border-top: 2px solid var(--accent-sub-color);
        border-right: 2px solid var(--accent-sub-color);*/
		}
}

/* -------------------------------------------------------------------------
	お問い合わせ　contact
========================================================================= */

#contact-sec, .pageSection-container {
	padding: 2.5em 0;
}

#contact-sec .buttonWrapper {
	margin-top: clamp(0.8rem, 0.413rem + 1.65vw, 1.6rem);
	span {
		font-size: 0.8em;
	}
	a {
		display: block;
		line-height: 1em;
	}
}

#contact-sec .buttonL{
	position: relative;
	padding: 0.7em;
	@media (width <= 768px){
		width: calc(220px - 1em);
	}
		&::after {
		  display: inline;
		  width: 10px;
          height: 10px;
		  top: 28px;
          transform: rotate(45deg);
		  content: "";
          position: absolute;
          right: 45px;
          border-top: 2px solid var(--accent-sub-color);
          border-right: 2px solid var(--accent-sub-color);
		  @media (width <= 768px){
			width: 7px;
			height: 7px;
			top: 20px;
			right: 33px;
		  }
		}
}

.contactcontent {
	width: 400px;
	@media (width <= 768px){ 
		width: 100%;
		border-bottom: 1.5px solid #BBBBBB;
		padding: 3.5rem 0 3.5rem 0;
	}
}

.contact-copy {
	text-align: center;
	margin: 5em;
	@media (width <= 768px) {
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 5em 0 0 0;
	}
}

.contact-inner {
	display: flex;
	max-width: 800px;
	margin: 0 auto;
	margin-bottom: 6em;
	@media (width <= 768px){
		display: block;
		margin-bottom: 3em;
		 > div:last-child {
			border-bottom: none;
		 }
	}
}

.contact-inner {
	&::after {
      position: absolute;
      top: 640px;
      left: 50%;
      width: 2px;
      height: 20%;
      margin-left: 0px;
      content: "";
      background: #BBBBBB;
	  @media (width <= 768px){
		display: none;
	  }
	}
}

.west-info,.east-info div {
	text-align: center;
	 .contact-name {
		font-size: clamp(1.8rem, 1.606rem + 0.83vw, 2.2rem);
		margin-bottom: clamp(0.8rem, 0.413rem + 1.65vw, 1.6rem);
	 }
	 .contact-number {
		position: relative;
		font-size: clamp(3rem, 2.516rem + 2.06vw, 4rem);
		&::before {
		   content: '';
		   display: inline-block;
		   position: absolute;
		   top: 5%;
		   left: 10%;
		   width: 28px;
		   height: 39px;
		   background: url(../img/icon-tel.svg);
		   background-size: 28px 39px;
		   @media (width <= 768px) {
			top: 0%;
			left: 10%;
			width: 26px;
			height: 37px;
			background-size: 26px 37px;
		   }
		}
	 }
	 .contact-reception {
		font-size: clamp(1.4rem, 1.303rem + 0.41vw, 1.6rem);
	}
}



.company-info {
	line-height: clamp(2.8rem, 2.461rem + 1.45vw, 3.5rem);
}


.company-info a {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
	@media (width <= 768px) {
		pointer-events: auto;
	}
}


/*  ---------------------------------------------------------*/
#about { 
  .message {
		margin-top: clamp(50px, calc((8% / 120) * 100), 80px);
		@media (width <= 768px){ padding: 40px 0; }
		text-align: left;
		.container {
			@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 {
				line-height: 220%;
				@media (width <= 768px){
					text-align: center;
					}
				}
            }
}


#overview .tableList {
	max-width: 600px;
	padding-top: 4em;
	@media (width <= 768px){ padding-top: 2em; }
	> div {
		@media (width <= 768px) {
		>dt { min-width: 9em; }
		}
	  }
	}


#history .tableList { 
	padding-top: 1.5em;
	dt {min-width: 14em;}
	@media (width <= 768px){ padding-top: 2em; }
	> div {
		@media (width <= 768px) {
		>dt { min-width: 9em; }
		}
	  }
	}
    

#customers {
	padding-bottom: 130px;
	.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%; }
			}
		}
	}

.space {
	margin-left: 40px;
	@media (width <= 768px) {
		margin-left: 0px;
	}
}


/*  ---------------------------------------------------------*/
#business {
	background-color: var(--bg-sub-color);
}
	
#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: "●"; }
				}
			}
		}
	}