@charset "utf-8";

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

@font-face {
	font-family:'CGothic';
	src:url('images/fonts/CGothic.ttf') format('truetype');
}
@font-face {
	font-family:'CSerif';
	src:url('images/fonts/CSerif.ttf') format('truetype');
}



@-webkit-keyframes blink {
	0%{opacity:0.5;} 100%{opacity:1;}
}
@keyframes blink{
	0%{opacity:0.5;} 100%{opacity:1;}
}
.blink {
	animation:blink 1s ease alternate;
	-webkit-animation:blink 0.5s ease infinite alternate;
}



/* ============================================================================================================
	var setting
============================================================================================================ */
:root,:before,:after {
	--fontFamily-body:'Noto Sans JP' ,sans-serif;
	--fontFamily-sans:'Noto Sans JP' ,sans-serif;
	--fontFamily-serif:'Noto Serif JP' ,serif;
	--fontFamily-CGothic:'CGothic' ,'Noto Sans JP' ,sans-serif;
	--fontFamily-CSerif:'CSerif' ,'Noto Serif JP' ,serif;
	--fontFamily-en:'Fjalla One' ,sans-serif;
	--fontFamily-title:'Noto Sans JP' ,sans-serif;

	--body-bg:#fff;
	--body-fontSize:18px;
	--body-fontColor:#000;
	--body-fontWeight:500;
	--body-lineHeight:2;

	--color-accent:#026854;
	--color-pale:#ebf5f0;
	--color-dark:#010c06;

	--color-blue:#65d3fd;
	--color-navy:#2c4d82;
	--color-sky:#f7fdff;
	--color-mint:#d6e9e4;
	--color-cream:#fffce9;

	--bg-recruit:#dfe7ff;

	--fv-height:100vh;
	--content-title-color:var(--color-accent);
	--content-title-bar:linear-gradient( 90deg ,rgba(68,68,68,0.8) 40%,rgba(136,136,136,0.8) 40%,rgba(136,136,136,0.8) 70%,rgba(204,204,204,0.8) 70% );
	--content-title-bar2:linear-gradient( 90deg ,rgba(136,136,136,0.8) 40%,rgba(170,170,170,0.8) 40%,rgba(170,170,170,0.8) 70%,rgba(204,204,204,0.8) 70% );
}

@media screen and (min-width:800px) { 
	:root,:before,:after {
	}
}
@media screen and (max-width:799px) { 
	:root,:before,:after {
		--body-fontSize:18px;
		--fv-height:640px;

		--content-title-bar:linear-gradient( 90deg ,rgba(68,68,68,0.8) 33.34%,rgba(136,136,136,0.8) 33.34%,rgba(136,136,136,0.8) 66.67%,rgba(204,204,204,0.8) 66.67% );
		--content-title-bar2:linear-gradient( 90deg ,rgba(136,136,136,0.8) 33.34%,rgba(170,170,170,0.8) 33.34%,rgba(170,170,170,0.8) 66.67%,rgba(204,204,204,0.8) 66.67% );

	}
}


[id^="P-recruit"] ,[id^="P-recruit"] :before ,[id^="P-recruit"] :after {
	--color-accent:#021b68;
	--color-pale:#e8eeff;
	--color-mint:#d7dff9;
	--content-title-color:var(--color-accent);
}
[id^="P-recruit"] header {
	background: linear-gradient(180deg ,rgba(255,255,255,0.9) 90% ,rgba(136,204,221,0.9) );
}
[id^="P-recruit"] header .brand-icon img {
	width:2.4em;
}
[id^="P-recruit"] header .brand-text-ja {
	font-size:130%;
}
[id^="P-recruit"] header .brand-text-en {
	font-size:80%;
}
[id^="P-recruit"] header .sub-label {
	font-size:160%;
	font-weight:700;
}

@media screen and (max-width:799px) {
	[id^="P-recruit"] .header-inner {
		padding-left:0.8em;
	}
	[id^="P-recruit"] .header-brand .brand {
		gap:0.3em;
	}
	[id^="P-recruit"] header .brand-icon img {
		width:2.2em;
	}
	[id^="P-recruit"] header .brand-text-ja {
		font-size:120%;
	}
	[id^="P-recruit"] header .brand-text-en {
		font-size:75%;
	}
	[id^="P-recruit"] header .sub-label {
		font-size:150%;
	}
}


/* ============================================================================================================
	CSS reset
============================================================================================================ */
* {
	box-sizing:border-box;
	text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}
html ,body ,div ,p ,span ,iframe ,a ,img ,
h1 ,h2 ,h3 ,h4 ,h5 ,h6 ,
dl ,dt ,dd ,ol ,ul ,li ,
form ,label ,
table ,thead ,tbody ,tfoot ,tr ,th ,td ,
strong ,em ,small ,blockquote ,q ,pre ,
header ,footer ,nav ,article ,section ,aside {
	margin:0;
	padding:0;
	border:0 none;
	color:inherit;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	text-decoration:inherit;
	vertical-align:baseline;
}
th ,td {
	vertical-align:middle;
}
button ,input ,textarea ,select {
	max-width:100%;
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	text-decoration:none;
	letter-spacing:1px;
}
button ,
input[type='submit'] {
	padding:0.3em 1.5em;
}

html ,body {
	min-height:100%;
}
a {
	transition: all 0.3s ease;
}

img {
	vertical-align:bottom;
	max-width:100%;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}
video {
	display:block;
}

ol ,ul ,li {
	list-style:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
blockquote ,q {
	quotes:none;
}
blockquote:before ,blockquote:after
,q:before ,q:after {
	content:'';
	content:none;
}
header ,footer ,nav ,article ,section ,aside {
	display:block;
}



/* ============================================================================================================
	common
============================================================================================================ */
@media screen and (min-width:800px) { 
	.dispSP {
		display:none !important;
	}
	a[href^="tel:"] {
		pointer-events:none;
	}
}
@media screen and (max-width:799px) { 
	.dispPC {
		display:none !important;
	}
}

.noDisp {
	display:none;
}
.hidden {
	visibility:hidden;
}

.anchorLink {
	cursor:pointer;
}


.small {
	font-size:80%;
}
.em {
	font-size:110%;
}
.strong {
	font-size:180%;
	font-weight:600;
}

.center {
	text-align:center;
}

.ellipsis {
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis;
}

.line-clamp {
	display:-webkit-box;
	overflow:hidden;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:1;
}
.line-clamp.l2 {
	-webkit-line-clamp:2;
}
.line-clamp.l3 {
	-webkit-line-clamp:3;
}

.sendIP {
	padding-top:3em;
	color:#999;
	font-size:80%;
	text-align:right;
}

.withArrow {
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.anchorLink {
	cursor:pointer;
	transition:all 0.3s ease;
}

@media screen and (min-width:800px) { 
	.withArrow:hover {
		font-weight:700;
	}
	.withArrow:hover .material-symbols-outlined {
		animation:hover-slide 1s ease-out infinite;
		font-weight:700;
	}

	@keyframes hover-slide {
		 0%	{ transform:translateX(0); }
		90%	{ transform:translateX(0.3em);}
	}
}
@media screen and (max-width:799px) { 
	.strong {
		font-size:160%;
	}
}

.shadow {
	filter:drop-shadow(1px 1px 3px #000);
}


/* =================================================================================
	cleafix
================================================================================= */
.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	line-height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	display: block; /* for IE8 */
	zoom: 1; 
}



/* =================================================================================
	flex
================================================================================= */
.flex {
	display:flex;
	justify-content:center;
	align-items:center;
}
.flex.left {
	justify-content:flex-start;
}
.flex.right {
	justify-content:flex-end;
}
.flex.between {
	justify-content:space-between;
}
.flex.around {
	justify-content:space-around;
}
.flex.evenly {
	justify-content:space-evenly;
}

.flex.top {
	align-items:flex-start;
}
.flex.bottom {
	align-items:flex-end;
}
.flex.stretch {
	align-items:stretch;
}

.flex.column {
	flex-direction:column;
}
.flex.rev {
	flex-direction:row-reverse;
}
.flex.column.rev {
	flex-direction:column-reverse;
}

.flex.wrap {
	flex-wrap:wrap;
}

.flex.col2 > * {
	width:calc(100% / 2);
}
.flex.col3 > * {
	width:calc(100% / 3);
}
.flex.col4 > * {
	width:calc(100% / 4);
}


.flex > .half {
	width:50%;
}
.flex > .full {
	width:100%;
}

.height-inherit > * {
	height:100%;
}
.height-inherit-all * {
	height:100%;
}


/* =================================================================================
	slider
================================================================================= */




/* ============================================================================================================
	body
============================================================================================================ */
body {
	position:relative;
	line-height:var(--body-lineHeight);
	font-size:var(--body-fontSize);
	font-weight:var(--body-fontWeight);
	color:var(--body-fontColor);
	font-family:var(--fontFamily-body);
	letter-spacing:0.05em;
	text-align:justify;
}

.innerFrame {
	width:100%;
	max-width:1600px;
	min-width:1200px;
	margin:0 auto;
}



@media screen and (min-width:800px) { 
}
@media screen and (max-width:799px) { 
	body {
	}

	.innerFrame {
		width:480px;
		min-width:480px;
		max-width:480px;
	}
}




/* ============================================================================================================
	header
============================================================================================================ */
header {
	position:sticky;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	background: linear-gradient(180deg ,rgba(255,255,255,0.9) 90% ,rgba(204,221,136,0.9) );
	backdrop-filter:blur(0.2em);
	border-bottom:0.3em solid var(--color-accent);
}


.header-inner {
	padding:0.6em 1em;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.header-brand {
	gap:1em;
}
.brand {
	display:flex;
	align-items:center;
	gap:0.6em;
}
.brand-icon img {
	width:3em;
}
.brand-text {
	display:flex;
	flex-direction:column;
	align-items:center;
	line-height:1.3;
}
.brand-text-ja {
	font-size:160%;
	font-weight:700;
}
.brand-text-en {
	color:var(--color-accent);
	font-weight:600;
}

@media screen and (max-width:799px) {
	.header-inner {
		padding:0.5em 1em;
		height:4.6em;
	}
	.brand-icon img {
		width:2.6em;
	}
}



/* =================================================================================
	header > nav
================================================================================= */
.header-nav {
	display:flex;
	align-items:center;
	gap:2em;
}
.header-nav ul {
	display:flex;
	align-items:center;
	gap:1em;
}

.header-nav ul a {
	padding:6px 0.5em 3px;
	border-bottom:3px solid transparent;
}
.header-nav ul a span {
	font-weight:500;
}
@media screen and (min-width:800px) {
	.header-nav ul.index [data-index='index'] ,
	.header-nav ul.company [data-index='company'] ,
	.header-nav ul.services [data-index='services'] ,
	.header-nav ul.works [data-index='works'] ,
	.header-nav ul.recruit [data-index='recruit'] ,
	.header-nav ul.contact [data-index='contact'] ,
	.header-nav ul a:hover {
		border-bottom-color:var(--color-accent);
	}
}


.header-contact .button {
	font-size:95%;
}

.button-frame {
	padding-top:3em;
}
.button {
	padding:0.1em 0.8em 0.2em;
	font-weight:500;
	display:flex;
	align-items:baseline;
	gap:0.3em;
}
.button:not(.link) {
	color:#fff;
	background:var(--color-accent);
	border:1px solid #ccc;
	border-radius:0.4em;
}
.button:not(.back):after {
	content:"\025b6";
	font-size:90%;
}

.button.back {
	color:var(--color-accent);
	background:var(--color-pale);
}
.button.back:before {
	content:"\025c0";
	font-size:90%;
}

.button.link {
	color:var(--color-accent);
	border-bottom:1px dashed var(--color-accent);
}


@media screen and (min-width:800px) {
	.button:hover {
		color:var(--color-accent);
		background:var(--color-pale);
		border-color:var(--color-accent);
	}
	.button.back:hover {
		color:#fff;
		background:var(--color-accent);
	}
}

@media screen and (max-width:799px) {
	.header-brand ,
	.sp-menu {
		position:relative;
		z-index:2;
		overflow:hidden;
		gap:0.5em;
	}
	.header-nav {
		position:fixed;
		z-index:1;
		top:4.8em;
		right:0;
		width:100%;
		height:100vh;
		padding:3em 2em;
		transform:translateY(-110%);
		transition: all 0.5s ease;
		background:rgba(255,255,255,0.95);
		backdrop-filter:blur(0.2em);
		border-top:1px solid var(--color-accent);
		opacity:0;

		display:flex;
		flex-direction:column;
		align-items:center;
		gap:2.5em;
	}
	.navi-open .header-nav {
		transform:translateY(0);
		opacity:1;
	}
	.header-nav ul {
		flex-direction:column;
		gap:2em;
	}
	.header-nav ul a {
		padding:0.5em 2em;
	}
	.header-nav ul a span {
		font-size:120%;
	}
	.header-contact .button {
		padding:0.2em 1em 0.3em;
		font-size:110%;
	}

}


/* ======================================================
	sp menu button
====================================================== */
.sp-menu-button {
	position:relative;
	width:3em;
	aspect-ratio:1/1;
	background:var(--color-pale);
	backdrop-filter:blur(0.2em);
	border:2px solid var(--color-accent);
	border-radius:0.3em;
}

.sp-menu-button span,
.sp-menu-button:before ,
.sp-menu-button:after {
	position:absolute;
	top:50%;
	left:0;
	right:0;
	display:block;
	width:70%;
	margin:auto;
	height:3px;
	background:var(--color-accent);
	transform:translateY(-50%);
	transition: all 0.5s ease;
}
.sp-menu-button:before {
	content:"";
	top:calc(50% - 20%);
}
.sp-menu-button:after {
	content:"";
	top:calc(50% + 20%);
}

.navi-open .sp-menu-button span {
	opacity:0;
}
.navi-open .sp-menu-button:before {
	top:50%;
	transform:translateY(-50%) rotate(225deg);
}
.navi-open .sp-menu-button:after {
	top:50%;
	transform:translateY(-50%) rotate(-225deg);
}




/* ============================================================================================================
	footer
============================================================================================================ */
footer {
	position:relative;
	z-index:20;
	color:#fff;
	background:var(--color-accent);
}

.footer-inner {
	padding:3em 6em 3em 3em;
	display:flex;
	justify-content:space-evenly;
}

.footer-information .brand-icon {
	filter:invert(1);
}
.footer-information .brand-text-en {
	color:#9c9;
}
.footer-data {
	padding-top:2em;
}
.footer-data li {
	font-size:90%;
}

.footer-title {
	margin-bottom:0.3em;
	padding:0 0.5em 0.1em;
	border-bottom:2px solid #eee;
	font-weight:600;
}
.footer-list {
	padding:0 1em;
}
.footer-list li {
	font-size:90%;
}

@media screen and (max-width:799px) {
	.footer-inner {
		padding:3em 2em;
		flex-direction:column;
		gap:2em;
	}
	.footer-list {
		padding-left:0.5em;
		padding-right:0;
	}
	.footer-list li {
		font-size:85%;
		letter-spacing:0;
	}

}


/* ======================================================
	footer link-banners
====================================================== */
.footer-linkBanners {
	padding:1.5em 0;
}
.footer-linkBanners a {
	width:600px;
	max-width:70%;
	outline:0.1em solid rgba(255,255,255,0.4);
}
@media screen and (min-width:800px) {
	.footer-linkBanners a:hover {
		box-shadow:0 0 0.3em #fff;
		filter:brightness(1.1);
	}
}
@media screen and (max-width:799px) {
	.footer-linkBanners {
		padding:0 0 1em;
	}
}


/* ======================================================
	copyright
====================================================== */
.copyright {
	padding:1em 0;
}


/* ======================================================
	pagetop button
====================================================== */
#pageTopButton {
	position:fixed;
	z-index:900;
	right:1em;
	bottom:1em;
	width:3.6em;
}
#pageTopButton .anchorLink {
	aspect-ratio:1/1;
	background:#fff;
	backdrop-filter:blur(0.2em);
	border:2px solid var(--color-accent);
	border-radius:0.3em;
	opacity:0.85;
	display:flex;
	justify-content:center;
	align-items:center;
}
#pageTopButton .anchorLink img {
	filter:invert(1);
}

@media screen and (min-width:800px) {
	#pageTopButton .anchorLink:hover {
		opacity:1;
		filter:contrast(1.2);
	}
}
@media screen and (max-width:799px) {
	#pageTopButton {
		right:0.5em;
		bottom:0.5em;
	}
}



/* ============================================================================================================
	main contents
============================================================================================================ */
main {
	position:relative;
}
@media screen and (min-width:800px) {
	main {
		min-width:1200px;
	}
}
@media screen and (max-width:799px) {
	main {
		width:480px;
	}
}


/* ============================================================================================================
	main contents
============================================================================================================ */
#main-contents {
	position:relative;
	z-index:10;
	background:#fff;
}

#main-contents > section {
	position:relative;
	padding:6em 0 8em;
}

#main-contents .innerFrame {
	max-width:1200px;
	padding:0 1em;
}


.bg-pale {
	background-color:var(--color-pale);
	color:var(--body-fontColor);
}
.bg-mint {
	background-color:var(--color-mint);
	color:var(--body-fontColor);
}
.bg-sky {
	background-color:var(--color-sky);
	color:var(--body-fontColor);
}
.bg-blue {
	background-color:var(--color-recruit);
	color:var(--body-fontColor);
}
.bg-accent {
	background-color:var(--color-accent);
	--content-title-color:#fff;
	color:#fff;
}
.bg-accent :after {
	--content-title-bar:var(--content-title-bar2);
}
.bg-dark {
	background-color:var(--color-dark);
	--content-title-color:#fff;
	color:#fff;
}
.bg-dark :after {
	--content-title-bar:var(--content-title-bar2);
}
.bg-blue {
	background-color:var(--bg-recruit);
}

[class^='bg-'] {
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
}
.bg-1 {
	background-image:url(images/bg/bg1.webp);
}
.bg-2 {
	background-image:url(images/bg/bg2.webp);
}
.bg-3 {
	background-image:url(images/bg/bg3.webp);
}
.bg-3b {
	background-image:url(images/bg/bg3a.webp),url(images/bg/bg3b.webp);
	background-position:50% 0,50% 100%;
	background-size:contain;
}
.bg-4 {
	background-image:url(images/sdgs/sdgs_bg.png);
	background-position:50% 100%;
	background-size:contain;
}
.bg-5 {
	background-image:url(images/bg/bg5.webp);
}
.bg-5b {
	background-image:url(images/bg/bg5a.webp),url(images/bg/bg5b.webp);
	background-position:50% 0,50% 100%;
	background-size:contain;
}
.bg-6 {
	background-image:url(images/bg/bg6.webp);
}
.bg-6b {
	background-image:url(images/bg/bg5a.webp),url(images/bg/bg6b.webp);
	background-position:50% 0,50% 100%;
	background-size:contain;
}

.bg-rev {
	color:#fff;
	background-color:#222;
}
.bg-rev.bg-1 {
	background-image:url(images/bg/bg1rev.webp);
}



#main-contents.spacer {
	padding-top:6em;
}

@media screen and (max-width:799px) {
	#main-contents > section {
		padding:4em 0;
		scroll-margin-top:3em;
	}
	#main-contents.spacer {
		padding-top:4em;
	}

	.bg-1 ,
	.bg-2 ,
	.bg-3 {
		background-size:cover;
	}

	.bg-4 ,
	.bg-5b ,
	.bg-6b {
		background-size:960px;
	}
}


/* ======================================================
	common - content title
====================================================== */
.content-title {
	position:relative;
	padding:0 0 0.3em;
	color:var(--content-title-color);
}

.content-title-inner {
	padding-bottom:0.3em;
	position:relative;
	display:flex;
	justify-content:flex-start;
	align-items:baseline;
	gap:1em;
}
.content-title.right .content-title-inner {
	justify-content:flex-end;
}


.content-title-inner .en {
	font-size:420%;
	font-weight:900;
}
.content-title-inner .ja {
	font-size:180%;
	font-weight:600;
}

.content-title-inner:has(.ja-only) {
	padding-bottom:1.5em;
}
.content-title-inner .ja-only {
	font-size:240%;
	font-weight:700;
}

.content-title-inner:after {
	content:"";
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	display:block;
	width:100%;
	height:1.5em;
	background:var(--content-title-bar);
}

.content-title span[class*="icon-"] {
	padding-left:1.15em;
	background-position:0 55%;
	background-repeat:no-repeat;
	background-size:1em;
}
.content-title span.ja-only[class*="icon-"] {
	padding-left:1.4em;
	background-size:1.2em;
}


.content-title span[class*="icon-company"] {
	background-image:url(images/icons/icon_company.png);
}
.content-title span[class*="icon-works"] {
	background-image:url(images/icons/icon_works.png);
}
.content-title span[class*="icon-news"] {
	background-image:url(images/icons/icon_news.png);
}
.content-title span[class*="icon-contact"] {
	background-image:url(images/icons/icon_contact.png);
}
.content-title span[class*="icon-sdgs"] {
	background-image:url(images/icons/icon_sdgs.png);
}
.content-title span[class*="icon-access"] {
	background-image:url(images/icons/icon_access.png);
}
.content-title span[class*="icon-services"] {
	background-image:url(images/icons/icon_services.png);
}
.content-title span[class*="icon-service1"] {
	background-image:url(images/icons/icon_service1.png);
}
.content-title span[class*="icon-service2"] {
	background-image:url(images/icons/icon_service2.png);
}
.content-title span[class*="icon-service3"] {
	background-image:url(images/icons/icon_service3.png);
}
.content-title span[class*="icon-service4"] {
	background-image:url(images/icons/icon_service4.png);
}
.content-title span[class*="icon-form"] {
	background-image:url(images/icons/icon_form.png);
}

.content-title span[class*="--rev"] {
	filter:brightness(0) invert(1);
}



@media screen and (min-width:800px) {
	[id^="desc"] .content-title-inner {
		padding-left:1em;
		padding-right:1em;
	}
}
@media screen and (max-width:799px) {
	.content-title-inner {
		padding:0 0 2.4em;
		line-height:1.6;
		align-items:center;
		flex-direction:column;
		gap:0;
	}
	.content-title-inner .en {
		line-height:1.6;
		font-size:210%;
	}
	.content-title-inner .ja {
		font-size:130%;
	}

	.content-title-inner):after {
		height:1.2em;
	}

	.content-title-inner:has(.ja-only) {
		padding-bottom:2em;
	}
	.content-title-inner:has(.ja-only):after {
		height:1em;
	}
	.content-title-inner .ja-only {
		font-size:150%;
	}
}



/* ======================================================
	common - content body
====================================================== */
.content-body {
	overflow:hidden;
}


/* ======================================================
	common - center-text
====================================================== */
.center-text {
	padding:3em 1em 0;
	text-align:center;
}

.center-text p span {
	font-size:110%;
}

@media screen and (max-width:799px) {
	.center-text {
		padding:2em 1em 0;
		text-align:justify;
	}
	.center-text p span {
		font-size:100%;
	}
}


/* ======================================================
	common - CTA
====================================================== */
#CTA {
	position:relative;
	border-top:1em solid var(--color-accent);
	border-bottom:1em solid var(--color-accent);
}

.contact-message {
	padding:2em 0;
	gap:4em;
}
.contact-message .image {
	width:15em;
}
.contact-message .text {
}


.contact-list.flex {
	gap:2em;
}
.contact-cell > * {
	display:block;
	padding:0 0 0.8em;
	text-align:center;
	border-radius:1em;
	color:#fff;
	background:#f90;
	box-shadow:0.3em 0.3em #c60;
}
.contact-cell.link-line > * {
	background:#00b900;
	box-shadow:0.3em 0.3em #060;
}
.contact-cell.link-tel > * {
	background:#06f;
	box-shadow:0.3em 0.3em #03c;
}

.contact-cell .icon {
	padding-top:0.5em;
}
.contact-cell .icon img {
	width:4em;
}
.contact-cell .text span {
	font-weight:600;
}

@media screen and (min-width:800px) {
	#CTA .contact-message-frame {
		width:1000px;
		min-width:1000px;
		margin:0 auto;
		padding:0 3em;
	}
	.contact-cell > :hover {
		transform:translate(0.3em ,0.3em);
		box-shadow:0 0 transparent;
	}

}
@media screen and (max-width:799px) {
	#main-contents > section#CTA {
		padding:1em;
	}
	#main-contents #CTA .innerFrame{
		width:100%;
		min-width:100%;
	}
	#CTA .innerFrame {
		padding:3em 1em;
	}

	.contact-message.flex {
		padding-bottom:0;
		flex-direction:column-reverse;
		gap:0;
	}

	.contact-list.flex {
		padding-left:0.2em;
		padding-right:0.5em;
		flex-direction:column;
		gap:1.5em;
	}
	.contact-list.flex.col3 > * {
		width:100%;
	}
	.contact-cell > * {
		padding:0.5em 0.5em 0.5em 1em;
		display:flex;
		align-items:center;
	}
	.contact-cell .icon {
		padding-top:0;
	}
	.contact-cell .icon img {
		width:3.5em;
	}
	.contact-cell .text {
		padding-left:0.6em;
	}
	.contact-cell .text span {
		font-size:120%;
	}
	.contact-cell > *:after {
		content:url(images/icons/arrow.png);
		margin-left:auto;
		line-height:1;
	}
	.contact-cell > *.anchorLink:after {
		transform:rotate(90deg);
	}
}





/* ===========================
	icon flip
=========================== */
.icon-flip {
	filter:invert(1);
	perspective:1000px;
}
.icon-flip .icon-card {
	width:1.3em;
	aspect-ratio:1/1;
	line-height:1;
	position:relative;
	transform-style:preserve-3d;
	-webkit-transform-style:preserve-3d;
}
.icon-flip .icon-card > * {
	position:absolute;
	inset:0;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:rotateY(0deg);
}
.icon-flip  .icon-card > *.icon-corp {
	transform:rotateY(180deg);
}

.icon-flip:hover .icon-card {
}

.rotate-1:not(.off) > .icon-flip .icon-card {
	transition:transform 4s ease 2.5s;
	transform:rotateY(180deg);
}


.rotate-infinite:not(.off) > .icon-flip .icon-card {
	animation:rotateCard 4s linear 4s infinite;
	transform:rotateY(180deg);
}

@keyframes rotateCard {
	0%	{
		transform:rotateY(180deg);
	}
	100% {
		transform:rotateY(-180deg);
	}
}

/* ======================================================
	back ground
====================================================== */
.fv-back {
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
}
.slider > li {
	position:absolute;
	inset:0;
	transition: opacity 3s ease;
}
.slider > li:not(:first-child) {
	opacity:0;
}
.slider img {
	width:100%;
	height:var(--fv-height);
	min-height:600px;
	object-fit:cover;
}



/* ============================================================================================
	contents header
============================================================================================ */
.bg-company {
	background:url(images/contents/page_company.webp) 50% 100% no-repeat;
	background-size:cover;
}
.bg-works {
	background:url(images/contents/page_works.webp) 50% 0 no-repeat;
	background-size:cover;
}
.bg-services {
	background:url(images/contents/page_services.webp) 50% 0 no-repeat;
	background-size:cover;
}
.bg-contact {
	background:url(images/contents/page_contact.webp) 50% 50% no-repeat;
	background-size:cover;
}

@media screen and (max-width:799px) {
	.bg-contact {
		background-position:0 20%;
		background-size:520px;
	}
}


/* ======================================================
	page header
====================================================== */
#contents-header {
	position:relative;
}
.contents-header-text {
	width:1200px;
	height:400px;
	margin:auto;
	padding:3em 1em 0;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	gap:1em;

	color:#fff;
	filter:drop-shadow(1px 1px 3px #000);
}
.contents-header-text .row-1 {
	line-height:1.4;
}
.contents-header-text .row-1 span {
	font-size:360%;
	font-weight:800;
}
.contents-header-text .row-p {
	padding-left:2em;
}
.contents-header-text .row-p p + p {
	padding-top:0.6em;
}
.contents-header-text .row-p span {
	font-size:130%;
}

@media screen and (max-width:799px) {
	.contents-header-text {
		max-width:100%;
		height:auto;
	}
	.contents-header-text.flex.top {
		max-width:100%;
		height:210px;
		padding:0;
		flex-direction:column;
		justify-content:flex-start;
		gap:0;
	}
	.contents-header-text.flex.top:not(.rev) {
		padding-top:2em;
	}
	.contents-header-text .row-1 {
		padding-left:1.5em;
	}
	.contents-header-text .row-1 span {
		font-size:220%;
	}
}


/* ======================================================
	page header page-label
====================================================== */
.page-label {
	display:flex;
	justify-content:flex-end;
}
.page-label-cell {
	position:relative;
	padding:0 2em;
	display:flex;
}
.page-label-cell span {
	font-size:240%;
	font-weight:700;
}
.page-label-cell:after ,
.page-label-cell span:after {
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:3px;
	background:#fff;
}
.page-label-cell span:after {
	left:100%;
	width:360px;
}
@media screen and (max-width:799px) {
	.page-label {
		align-self:flex-end;
	}
	.page-label-cell {
		padding:0 1em;
	}
	.page-label-cell span {
		font-size:100%;
	}
	.page-label-cell span:after {
		content:none;
	}
}


/* ======================================================
	page header sub-text
====================================================== */
.contents-header-sub {
	padding-top:1em;
}
.contents-header-sub .innerFrame {
	max-width:1200px;
	padding:3em 1em;
	text-align:center;
	background:linear-gradient(90deg,transparent,#dfd 20%,#dfd 80%,transparent);
}
.contents-header-sub p {
	line-height:2;
}
.contents-header-sub p span {
	font-size:130%;
	font-weight:300;
}
@media screen and (max-width:799px) { 
	.contents-header-sub {
	}
	.contents-header-sub .innerFrame {
		padding:1.5em 1em 4em;
		background:linear-gradient(180deg,#dfd calc(100% - 3em),transparent);
	}
	.contents-header-sub p {
		line-height:2;
	}
	.contents-header-sub p + p {
		padding-top:1em;
	}
	.contents-header-sub p span {
		font-size:100%;
		font-weight:400;
	}
}



/* ======================================================
	page header anchor-buttons
====================================================== */
.row-button {
	padding-top:1.5em;
	gap:1em;
}
.row-button .button {
	padding:0.2em 1em 0.3em;
	line-height:1.4;
	justify-content:center;
	align-items:center;
	color:var(--color-accent);
	background:var(--color-pale);
}
.row-button .button span {
	font-size:90%;
}
.row-button .button:after {
	content:"▼";
}

@media screen and (min-width:800px) {
	.row-button .button:hover {
		color:#fff;
		background:var(--color-accent);
	}
}
@media screen and (max-width:799px) {
	.row-button.flex {
		padding-top:0;
		display:grid;
		gap:0.6em;
		grid-template-columns:repeat( 2 ,1fr );
		align-items:stretch;
	}
	.row-button .button {
		justify-content:space-between;
	}
}



/* ============================================================================================
	top
============================================================================================ */


/* =================================================================================
	top - fv
================================================================================= */
#fv {
	position:sticky;
	z-index:1;
	top:0;
	left:0;
	right:0;
	height:var(--fv-height);
	min-height:600px;
}
@media screen and (min-width:800px) { 
	#fv {
		min-width:1200px;
	}
}
@media screen and (max-width:799px) { 
	#fv {
	}
}



/* ======================================================
	fore ground
====================================================== */
.fv-fore {
	position:absolute;
	z-index:2;
	top:5em;
	bottom:8%;
	left:0;
	right:0;
	padding:2em;
}

.fv-fore-text {
	width:100%;
	max-width:1400px;
	height:100%;
	margin:auto;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	filter:drop-shadow(1px 1px 3px #000);
}
.fv-fore > * {
	overflow:hidden;

	--fontSize-ratio:6;
	font-size:clamp( calc(1200px / 100 * var(--fontSize-ratio)) ,calc( 1vw * var(--fontSize-ratio)) ,calc(1400px / 100 * var(--fontSize-ratio)) );
	color:#fff;
	font-weight:900;
	line-height:1.6;
}

.fv-fore .row-3 {
	margin-top:auto;
	display:flex;
	justify-content:flex-end;
	align-items:center;
	gap:0.3em;
	font-size:clamp( calc(1200px / 100 * var(--fontSize-ratio) * 0.65) ,calc( 1vw * var(--fontSize-ratio) * 0.65) ,calc(1400px / 100 * var(--fontSize-ratio) * 0.65) );
}

.fv-fore .row-3 .text {
	padding-bottom:0.05em;
}

@media screen and (max-width:799px) {
	.fv-fore {
	}
	.fv-fore > * {
		font-size:260%;
	}
	.fv-fore .row-3 {
		font-size:80%;
		justify-content:center;
	}
}


/* ======================================================
	top - about
====================================================== */
.about-content.flex {
	padding:4em 1em 0;
	gap:4em;
}
.about-text p + p {
	padding-top:2em;
	padding-left:1em;
}
.about-image img {
	max-height:28em;
}

@media screen and (max-width:799px) {
	.about-content.flex {
		padding-top:2em;
		flex-direction:column;
		gap:2em;
	}
	.about-content.flex > * {
		width:100%;
	}
	.about-text p + p {
		padding-top:1em;
		padding-left:0;
	}
	.about-image img {
		aspect-ratio:2/1;
		object-fit:cover;
	}
}



/* ======================================================
	top - business overview
====================================================== */
.overview-list.flex {
	padding:6em 1em 1em;
	gap:0.5em;
}
.overview-cell {
	padding:0.8em 0.8em 1.5em;
	border-radius:1em;
	box-shadow:1px 1px 5px transparent;
	transition:box-shadow 0.5s ease;
}
.overview-cell .icon {
	width:100%;
	padding:1.5em;
	height:auto;
	background:#fff;
	border-radius:50%;
	box-shadow:0.1em 0.1em 1em #ccc inset;
}
.overview-cell .icon img {
	width:100%;
	aspect-ratio:1/1;
	object-fit:contain;
	transition: transform 0.5s ease;
}
.overview-cell p {
	padding-top:0.5em;
}
.overview-cell p span {
	font-size:110%;
	font-weight:700;
}


@media screen and (min-width:800px) {
	.overview-cell:hover {
		background:rgba(255,255,255,0.2);
		box-shadow:1px 1px 5px #000;
	}
	.overview-cell:hover img {
		transform:scale(1.15);
	}
}

@media screen and (max-width:799px) {
	.overview-list.flex.col4 {
		flex-wrap:wrap;
		padding:2em 0 1em;
		gap:0;
	}
	.overview-list.flex.col4 > * {
		width:calc(50% - 0.5em);
	}
	.overview-cell {
		padding:0 0.5em 2em;
	}
	.overview-cell p span {
		font-size:100%;
	}
}





/* ======================================================
	top - news
====================================================== */
.news-list {
	padding:1.5em 3em;
	border-radius:1em;
}
.news-cell {
	position:relative;
	padding:0.5em;
	border-bottom:1px solid var(--color-accent);
}
.news-cell .news-link {
	position:relative;
	padding:0.3em 0.5em 0.5em 1em;
	line-height:1.6em;
	border-radius:0.5em;
	transition: background 0.5s ease;
}
.news-cell .news-link:after {
	content:url(images/icons/arrow.png);
	padding-top:0.2em;
	line-height:1;
	filter:invert(1);
}

.news-cell .date span {
	font-size:90%;
}
.news-cell .title {
	font-weight:500;
}

@media screen and (min-width:800px) {
	.news-title {
		width:25%;
	}
	.news-list {
		width:75%;
	}

	.news-link:hover {
		color:#fff;
		background:var(--color-accent);
	}
	.news-link:hover:after {
		filter:invert(0);
	}
}

@media screen and (max-width:799px) {
	.news-content.flex {
		flex-direction:column;
		gap:4em;
	}
	.news-list {
		padding:1em 1.5em 1.5em;
	}
	.news-cell {
		padding-right:0;
	}
	.news-cell .news-link {
		padding:0.3em 0 0.3em 0.3em;
	}
}





/* ============================================================================================
	company
============================================================================================ */




/* ======================================================
	company - access
====================================================== */
.access-layout {
	padding:4em 1em 0;
	display:grid;
	grid-template-columns:repeat( 2 ,1fr );
	gap:1.5em;
}

.access-card{
	padding:1.5em;
	color:var(--body-fontColor);
	background:rgba(255,255,255,0.96);
	border:1px solid var(--color-accent);
	border-radius:0.5em;
	display:flex;
	flex-direction:column;
}
.access-card h3 {
	text-align:center;
}
.access-card h3 span:not([class]) {
	font-size:130%;
	font-weight:600;
}

.access-info {
	padding:1em 0 1.5em;
}
.access-info li {
	display:flex;
	gap:0.5em;
}
.access-info .head {
	width:6em;
	color:var(--color-accent);
	text-align:right;
}
.access-info .head span{
	font-size:90%;
	font-weight:600;
}

.access-info .text {
	flex-frow:1;
}
.access-info .text span{
	font-size:90%;
	font-weight:500;
}

.access-card iframe {
	margin-top:auto;
}

.access-memo {
	padding-top:1em;
	text-align: center;
}
.access-memo span {
	color:#ccc;
}
.bg-rev .access-memo span {
	color:#bbb;
}

.access-layout.single {
	display:flex;
	justify-content:center;
}
.access-layout.single .access-info {
	padding-bottom:0;
}


@media screen and (min-width:800px) {
	.access-layout.single > * {
		width:60%;
	}
	.access-layout.single .head {
		width:10em;
	}
	.access-layout.single .text {
		width:calc(100% - 10em);
	}
	.access-layout.single .access-info > li {
		gap:1em;
	}

}
@media screen and (max-width:799px) {
	.access-layout {
		padding:2em 1em 0;
		grid-template-columns:1fr;
	}
	.access-card{
		padding:1.5em 0.5em;
	}
	.access-info {
		line-height:1.6;
	}

	.access-info li.sp-column {
		padding:0.5em 0.5em 0;
		flex-direction:column;
		border-top:1px dashed #9c9;
	}
	.access-info li.sp-column .head {
		text-align:left;
	}
	.access-info li.sp-column .text {
		width:100%;
		display:flex;
		justify-content:flex-end;
	}

	.access-layout .access-info li.sp-column {
		gap:0;
	}
	.access-layout .access-info li.sp-column li {
		flex-direction:column;
		gap:0;
	}
	.access-info li.sp-column li > span + span {
		padding-left:2em;
	}
	.access-info li.sp-column .hidden {
		display:none;
	}

	.access-layout.single > * {
		width:100%;
	}
}


.company-info .brand {
	padding-bottom:1em;
	justify-content:center;
}



/* ============================================================================================
	services
============================================================================================ */


/* ======================================================
	services - SDGs
====================================================== */
.sdgs-section {
	position:relative;
}

.sdgs-section:after {
	content:"";
	position:absolute;
	bottom:0em;
	left:0;
	right:0;
	display:block;
	height:1.5em;
	background:url(images/sdgs/sdgs_bar.png) 50% 50% no-repeat;
	background-size:100% 100%;
}


.sdgs-para {
	margin:0 auto;
	padding:4em 2em 0;
}
.sdgs-para p + p {
	padding-top:0.5em;
}

.sdgs-logo-container {
	max-width:800px;
	margin:0 auto;
	padding:4em 1em 0;
}

.sdgs-card-list {
	max-width:800px;
	margin:0 auto;
	padding-top:4em;
	display:grid;
	gap:1em;
}

.sdgs-card {
	padding:1em 1.5em;
	background:rgba(255,255,255,0.6);
	border:1px solid var(--color-accent);
	border-radius:0.5em;
	gap:2em;
}
.sdgs-card h3 span {
	font-weight:700;
}
.sdgs-card p {
	padding-left:0.5em;
	line-height:1.6;
}
.sdgs-card p span {
	font-size:85%;
}

.sdgs-card-icons {
	flex-shrink:0;
	width:14em;
	gap:1em;
}
.sdgs-card-icons img {
	width:4em;
}

@media screen and (max-width:799px) {
	.sdgs-para {
		padding:3em 1em 0;
		text-align:justify;
	}
	.sdgs-card {
		display:block;
	}
	.sdgs-card-icons {
		padding-top:1em;
		width:100%;
	}
}



/* ======================================================
	services - description
====================================================== */
.description-list {
	max-width:1000px;
	margin:0 auto;
	padding-top:3em 0.5em 0;
}

.description-cell {
	position:relative;
	width:100%;
	gap:3em;
}
.description-cell .image {
	order:2;
	flex-shrink:0;
	width:25%;
	margin:0 auto;
}
.description-cell .image img {
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
}

.description-cell .text {
	flex-grow:1;
}


@media screen and (min-width:800px) {
}
@media screen and (max-width:799px) {
	.description-list {
		padding:2em 0.5em 0;
	}
	.description-cell.flex {
		gap:2em;
		flex-direction:column;
	}
	.description-cell .image {
		width:80%;
	}
	.description-cell .image img {
		aspect-ratio:3/1;
	}

	.description-cell .center-text {
		padding:0 0.5em;
	}
	.description-cell .center-text p {
		line-height:1.6;
	}
	.description-cell .text-inner p span {
		font-size:90%;
	}
}



/* ============================================================================================
	works
============================================================================================ */

/* ======================================================
	works - list
====================================================== */
.works-list {
	padding:6em 1em 1em;
	display:grid;
	grid-template-columns:repeat( 2 ,1fr );
	gap:3em;
}

.works-cell {
	position:relative;
	outline:2px solid #090;
	box-shadow:4px 4px 0 2px rgba(204,204,204,0.8);
}

.works-cell .image {
	aspect-ratio:1/1;
}
.works-cell .image img {
	width:100%;
	height:100%;
	object-fit:cover;
}
.works-cell .text {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	overflow:hidden;
	filter:drop-shadow( 2px 2px 3px #000 );
	color:#fff;
	background:linear-gradient( 180deg ,transparent 40% ,rgba(0,0,0,0.4) );
}
.works-cell .text-inner.flex {
	padding:1em 3em;
	height:100%;
	gap:3em;
}

.works-cell h3.flex {
	gap:0.3em;
}
.works-cell h3 .label {
	padding:0 0.5em 0.1em;
	font-size:85%;
	font-weight:600;
	color:#fff;
	background:var(--color-accent);
	border-radius:0.3em;
}
.works-cell h3 .name {
	font-size:120%;
	font-weight:700;
	color:#fff;
}

.works-cell dl {
	line-height:1.6;
	font-size:90%;
	font-weight:600;
}
.works-cell dt {
}
.works-cell dd {
	padding-left:1em;
}

.works-cell dd + dt {
	padding-top:0.8em;
}

@media screen and (max-width:799px) {
	.works-list:not(.mini) {
		padding:4em 1em 1em;
		grid-template-columns:1fr;
		gap:1.5em;
	}
	.works-cell .image {
		aspect-ratio:4/5;
	}
	.works-cell .text-inner.flex {
		padding:1em;
		gap:1.5em;
	}
	.works-cell dd {
		padding-left:0.5em;
	}
}


/* ======================================================
	works - list (mini)
====================================================== */
.works-list.mini {
	padding:4em 2em 2em;
	grid-template-columns:repeat( 3 ,1fr );
	gap:2em;
}
.works-list.mini .works-cell .image {
	aspect-ratio:2/1;
	filter:saturate(1.6) brightness(1);
}
.works-list.mini .works-cell .text-inner.flex {
	padding:0.5em 1em;
	line-height:1.6;
}
.works-list.mini .works-cell h3 .name {
	font-size:110%;
}

@media screen and (max-width:799px) {
	.works-list.mini {
		grid-template-columns:1fr;
	}
	.works-list.mini .works-cell .image {
		aspect-ratio:3/1;
	}
}


/* ======================================================
	works - list (grid)
====================================================== */
.works-grid-list {
	padding:4em 2em 0;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:2em;
}
.works-grid-list .works-cell {
	scroll-margin-top:8em;
	background:rgba(255,255,255,0.9);
}
.works-grid-list .works-cell .text-inner.flex {
	padding:2em;
	gap:1.5em;
}
.works-grid-list .works-cell h3 .name {
	color:var(--color-accent);
}

.works-info-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1em;
}

.works-info-grid {
	width:100%;
}
.works-info-grid dt {
	padding-left:0.5em;
	color:var(--color-accent);
	background:var(--color-mint);
}
.works-info-grid dd {
	font-weight:500;
}

.works-grid-list .info-image img {
	width:100%;
	aspect-ratio:3/1;
	object-fit:cover;
}

@media screen and (max-width:799px) { 
	.works-grid-list {
		padding:3em 1em 0;
		grid-template-columns:1fr;
		gap:2em;
	}
	.works-grid-list .works-cell {
		scroll-margin-top:6em;
	}
	.works-grid-list .works-cell dl {
		padding:0.5em 0 0;
	}
	.works-grid-list .works-cell .text-inner.flex {
		padding:1em;
		gap:1em;
	}
	.works-info-grid {
		font-size:90%;
	}
}



/* ============================================================================================
	news
============================================================================================ */
#main-contents > section.section-news {
	padding-top:4em;
}
.news-list-frame {
	padding:4em 1em 0;
}
.post_frame {
	width:1000px;
	margin:0 auto;
	padding:0 1em;
}

@media screen and (max-width:799px) {
	.post_frame {
		width:100%;
	}
}



/* ======================================================
	news - post
====================================================== */

.post_main {
	padding:0 2em 4em;
	border-bottom:1px solid var(--color-accent);
}
.post_main .date span {
	color:var(--color-accent);
	font-size:90%;
}
.post_main .title span {
	font-size:180%;
	font-weight:600;
	color:var(--color-accent);
}
.post_main .text {
	padding:2em;
	line-height:1.6;
}

@media screen and (max-width:799px) {
	.post_main {
		padding:0 1em 3em;
	}
	.post_main .title span {
		font-size:150%;
	}
	.post_main .text {
		padding:1em;
	}
}


/* ============================================================================================
	recruit job
============================================================================================ */

/* ================= 採用情報-詳細 ================= */
:root {
	--green-main:#22875A;
	--bg-alt:#F5F6F7;
	--bg-alt:#eaf8ec;
	--line-gray:#D9DEE3;
	--text-heading:#1A1A1A;
	--text-body:#3a3a3a;
	--bg-white:#FFFFFF;
	--radius-card:4px;
}

#main-contents .recruit-section section {
	padding:8em 0;
}



/* ============================================================================================
	recruit
============================================================================================ */
.recruit-section .content-body {
	padding-top:4em;
}

.recruit-section .content-subtitle {
	display:flex;
	justify-content:center;
}
.recruit-section .content-subtitle span {
	padding:0 2em 0.5em;
	font-size:160%;
	font-weight:700;
	border-bottom:2px solid var(--color-blue);
}

.recruit-content-text {
	padding-top:2em;
}
.recruit-content-text.flex {
	gap:2em;
	overflow:hidden;
}
.recruit-content-text p + p{
	padding-top:1em;
}

.img_sub {
	width:20em;
}


.recruit-section .content-title-inner {
	padding-bottom:2em;
	flex-direction:column-reverse;
	justify-content:center;
	align-items:center;
	gap:0;
}
.recruit-section .content-title-inner:after {
	height:1.2em;
}
.recruit-section .content-title-inner span.sub {
	line-height:1;
	color:var(--color-navy);
	font-size:160%;
	font-weight:600;
}

@media screen and (max-width:799px) {
	#main-contents .recruit-section section {
		padding:4em 0;
	}
	.recruit-section .content-subtitle {
		text-align:center;
		line-height:1.6;
	}
	.recruit-section .content-subtitle span {
		padding:0 1em 0.5em;
		font-size:130%;
	}


	.recruit-content-text.flex {
		position:relative;
	}
	.recruit-content-text.flex > .text {
		position:relative;
		width:100%;
		padding:0 1em;
		z-index:2;
		background:rgba(255,255,255,0.8);
	}
	.recruit-content-text.flex > .text p span {
		font-size:90%;
		font-weight:500;
	}
	.recruit-content-text.flex > .image {
		position:absolute;
		z-index:1;
		top:2em;
		right:0;
		width:80%;
	}

	.recruit-content-text.flex.rev > .text {
		padding-bottom:2em;
	}
	.recruit-content-text.flex.rev > .image {
		top:unset;
		bottom:0;
		width:60%;
	}

	.recruit-section .content-title-inner span.ja-only {
		line-height:1.4;
		padding-bottom:0.3em;
	}
	.recruit-section .content-title-inner span.sub {
		font-size:120%;
		padding-bottom:0.5em;
	}

	

}



/* =================================================================================
	recruit - fv
================================================================================= */
.bg-recruit {
	background:url(images/recruit/recruit_fv.webp) 50% 75% no-repeat;
}

.bg-recruit .contents-header-text {
	position:relative;
	height:600px;
	padding:2em 1em 0;
	justify-content:flex-start;
	gap:0;
}

.row-label {
	position:absolute;
	right:0;
	top:0;
	padding:0.5em 0.5em 0;
}
.recruit-label {
	padding:0 1em 0.2em;
	color:#fff;
	background:var(--color-navy);
	border-radius:0.3em;
	gap:0.5em;
}
.recruit-label .icon {
	width:1.2em;
	filter:invert(1);
}

.bg-recruit .row-1 {
	line-height:1.4;
}
.bg-recruit .row-1 .l2 {
	padding-left:3em;
}

.bg-recruit .contents-header-text .row-p {
	padding-top:2em;
	padding-left:0;
	line-height:1.6;
}
.bg-recruit .contents-header-text .row-p span {
	font-size:130%;
}

.row-recruit-en {
	width:100%;
	padding-top:2em;
	color:#fff;
	background:rgba(44,77,130,0.8);
	font-family:var(--fontFamily-en);
	clip-path:polygon(0 3em,100% 0,100% 100%,0 100%);
}
.row-recruit-en-inner {
	max-width:1200px;
	margin:0 auto;
	padding:0 2em;
}
.row-recruit-en .corp {
	text-align:right;
}
.row-recruit-en .corp {
	font-size:130%;
}
.row-recruit-en .text {
	text-align:center;
}
.row-recruit-en .text span {
	color:var(--color-blue);
	font-size:300%;
}



@media screen and (max-width:799px) {
	.bg-recruit {
		background-position:50% 100%;
		background-size:960px;
	}
	.bg-recruit .contents-header-text {
		height:600px;
		padding:0.5em 0;
	}
	.row-label {
		position:relative;
		align-self:flex-end;
		padding-bottom:1em;
	}
	.recruit-label {
		font-size:85%;
	}
	.bg-recruit .contents-header-text .row-1 {
		padding-left:0;
		text-align:center;
	}
	.bg-recruit .contents-header-text .row-1 span {
		padding:0;
		font-size:180%;
	}
	.bg-recruit .row-1.flex.top {
		align-items:center;
	}

	.bg-recruit .contents-header-text .row-p {
		padding-top:1em;
		text-align:center;
	}
	.bg-recruit .contents-header-text .row-p p {
	}
	.bg-recruit .contents-header-text .row-p span {
		font-size:110%;
	}

	.row-recruit-en {
		padding-top:1.5em;
		clip-path:polygon(0 2em,100% 0,100% 100%,0 100%);
	}
	.row-recruit-en-inner {
		padding:0 0.5em;
	}
	.row-recruit-en .corp {
		font-size:100%;
		line-height:1;
	}
	.row-recruit-en .text span {
		font-size:120%;
	}
}



/* =================================================================================
	recruit - recommended
================================================================================= */
#main-contents .recruit-section section#recommended {
	padding:0;
}

.bg-recruit2 {
	background:url(images/recruit/recruit_image_2.webp) 50% 50% no-repeat;
}

.recommended-filter {
	width:1000px;
	min-width:1000px;
	height:32em;
	background:url(images/recruit/recruit_image_2b.webp) 0 100% no-repeat;
	background-size:auto 28em;
	filter:drop-shadow(0.2em 0.2em 0.4em #000);
}

.recommended-label {
	font-family:var(--fontFamily-en);
	line-height:1.4;
}
.recommended-label .white {
	color:#fff;
	font-size:300%;
}
.recommended-label .blue {
	color:var(--color-blue);
	font-size:300%;
}
.recommended-content {
	padding-top:3em;
	padding-left:50%;
}

.recommended-title {
	color:#fff;
}
.recommended-title span {
	font-size:200%;
	font-weight:600;
}
.recommended-title span.en {
	font-size:120%;
	font-weight:600;
}


.recommended-list {
	padding-top:2em;
}
.recommended-list ul {
	padding:0.5em 1em;
	background:rgba(255,255,255,0.96);
	backdrop-filter:blur(0.1em);
}
.recommended-list ul li {
	padding:0.3em 1em;
	gap:0.3em;
}
.recommended-list ul li + li {
	border-top:1px dashed var(--color-navy) ;
}
.recommended-list ul li span:not([class]) {
	font-weight:600;
}

@media screen and (max-width:799px) {
	#main-contents .innerFrame.recommended-filter {
		width:100%;
		min-width:auto;
		height:auto;
		background-size:auto 22em;
	}
	.recommended-label .white {
		font-size:150%;
	}
	.recommended-label .blue {
		font-size:150%;
	}
	.recommended-title span {
		font-size:160%;
	}
	.recommended-title span.en {
		font-size:80%;
	}
	.recommended-content.flex.left {
		padding-top:1em;
		padding-left:0;
		justify-content:center;
	}
	.recommended-list {
		padding:6em 0 1.5em;
	}
	.recommended-list ul {
		font-size:90%;
	}
}


/* =================================================================================
	recruit - works
================================================================================= */
.recruit-works {
	padding:0 1em;
	display:grid;
	grid-template-columns:repeat( 4 ,1fr );
	gap:1em;
}
.recruit-works-cell {
	padding:1em 0.5em;
	background:var(--color-cream);
	border-radius:0.5em;
	text-align:center;
}
.recruit-works-cell .image {
	padding-bottom:0.5em;
}
.recruit-works-cell img {
	width:80%;
}
.recruit-works-cell h3 {
	width:100%;
	line-height:1.2;
	height:3.6em;
	color:#fff;
	background:var(--color-navy);
	border-radius:0.3em;
}
.recruit-works-cell h3 span {
	font-size:120%;
	font-weight:600;
}
.recruit-works-cell p {
	padding:0.5em 0.5em 0;
	line-height:1.6;
	text-align:justify;
}
.recruit-works-cell p span {
	font-size:90%;
}

@media screen and (max-width:799px) {
	.recruit-works {
		padding:0;
		grid-template-columns:repeat( 2 ,1fr );
	}
	.recruit-works-cell p {
		line-height:1.4;
	}
}




/* =================================================================================
	recruit - sub-catch
================================================================================= */
#main-contents .recruit-section section#sub-catch {
	padding:0;
}

.bg-recruit3 {
	background:url(images/recruit/recruit_image_3.webp) 50% 100% no-repeat;
}
.sub-catch-label {
	height:420px;
	padding-bottom:2em;
	color:#ffff;
	text-align:center;
}
.sub-catch-label .ja {
	width:100%;
	line-height:1.5;
	padding-bottom:0.3em;
	background:linear-gradient( 90deg ,transparent ,#09f ,#09f ,transparent );
}
.sub-catch-label .ja span {
	font-size:200%;
	font-weight:600;
}
.sub-catch-label .en {
	padding-top:0.5em;
	filter: drop-shadow(0.2em 0.2em 0.4em #000);
}
.sub-catch-label .en span {
	font-size:150%;
	font-weight:600;
}

@media screen and (max-width:799px) {
	#main-contents .recruit-section section#sub-catch {
		padding:8em 0 1em;
		background-size:cover;
	}
	.sub-catch-label {
		height:auto;
		padding-bottom:0;
	}
	.sub-catch-label .ja span {
		font-size:130%;
	}
	.sub-catch-label .en span {
		font-size:80%;
	}
}


/* =================================================================================
	recruit - workplace
================================================================================= */
.workplace-point {
	padding:0 2em;
	display:grid;
	grid-template-columns:repeat( 3 ,1fr );
	gap:2em;
}
.workplace-point-cell {
	padding:0 1em 1.5em;
	background:#ebf0f3;
	border-radius:0.5em;
	text-align:center;
}
.workplace-point-cell .label {
	padding:0 4em;
	color:#fff;
	background:var(--color-blue);
	clip-path:polygon( 0 0 ,100% 0 ,calc(100% - 1em) 100% ,1em 100% );
}
.workplace-point-cell .label span {
	font-size:120%;
	font-weight:700;
}
.workplace-point-cell .image {
	padding:1.5em 0 1em;
}
.workplace-point-cell .image img {
	width:10em;
}
.workplace-point-cell h3 {
	width:100%;
	padding-bottom:0.3em;
	border-bottom:2px solid var(--color-navy);
}
.workplace-point-cell h3 span {
	font-size:130%;
	font-weight:600;
}
.workplace-point-cell p {
	padding:0.8em 0.5em 0;
	text-align:justify;
	line-height:1.6;
}

@media screen and (max-width:799px) {
	.workplace-point {
		padding:0 1em;
		grid-template-columns:1fr;
	}
	.workplace-point-cell .image img {
		width:6em;
	}
}


/* =================================================================================
	recruit - job list
================================================================================= */
.job-grid {
	display:grid;
	grid-template-columns:repeat( 3 ,1fr );
	align-items:stretch;
	gap:1.5em;
}

.job-card {
	background:#fff;
	border-radius:0.5em;
	border:1px solid var(--color-navy);
	overflow:hidden;
}
.job-card .job-image img {
	width:100%;
	aspect-ratio:2/1;
	object-fit:cover;
}
.job-card-inner {
	padding:1em;
}
.job-tags {
	gap:0.5em;
}
.job-tags + .job-tags {
	padding-top:0.3em
}

.job-tag {
	padding:0 0.5em 0.15em;
	line-height:1.4;
	color:#fff;
	background:#f90;
	border-radius:0.3em;
}
.job-tag.c2 {
	background:#090;
}
.job-tag.c3 {
	background:#06c;
}


.job-tag span {
	font-size:85%;
	font-weight:500;
}

.job-title {
	padding-top:0.5em;
	line-height:1.4;
}
.job-title span {
	font-size:110%;
	font-weight:600;
}

.job-desc {
	padding-top:0.6em;
	line-height:1.5;
}
.job-desc p {
	min-height:3.8em;
	padding:0.3em 0.8em;
	border:1px solid var(--color-accent);
	border-radius:0.3em;
	text-align:center;
}
.job-desc span {
	font-size:90%;
}
.job-card .button-frame {
	padding-top:1em;
}
.job-card .button {
	padding:0.1em 2em 0.2em;
}

@media screen and (min-width:800px) {
	.job-title {
		height:3.8em;
		display:-webkit-box;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
	}
}
@media screen and (max-width:799px) {
	.recruit-content-text.center {
		padding:2em 0.5em 0;
		text-align:justify;
	}
	.job-grid {
		grid-template-columns:1fr;
	}
	.job-card .job-image img {
		aspect-ratio:3/1;
	}
}


/* ============================================================================================
	job
============================================================================================ */
#main-contents .recruit-section.job-section section {
	padding:3em 0;
}
#main-contents .recruit-section.job-section .innerFrame {
	width:1100px;
	min-width:1100px;
}
#main-contents .recruit-section.job-section .form-preview {
	max-width:1000px;
	padding:2em 1em 0;
	text-align:justify;
}

.job-head {
	color:#fff;
	background:var(--color-navy);
	text-align:center;
}
.job-head span {
	font-size:130%;
	font-weight:600;
}

@media screen and (max-width:799px) {
	#main-contents .recruit-section.job-section .innerFrame {
		width:100%;
		min-width:auto;
	}

	#main-contents .recruit-section.job-section .form-preview {
		padding:1em 0.5em 0;
	}
	.form-preview .text-body {
		line-height:1.6;
	}
	.form-preview .text-body span {
		font-size:90%;
	}
}



/* =================================================================================
	job - fv
================================================================================= */
#main-contents .recruit-section.job-section section#job-fv-title {
	padding:2em 0 0;
}


#job-fv {
	padding:2em;
}
#job-fv .innerFrame {
	width:1200px;
}
#job-fv .job-tags {
	padding-bottom:0.8em;
}
#job-fv .job-tag span {
	font-size:130%;
}

.job-fv-title {
	padding:0.5em 1.5em;
	line-height:1.4;
	color:#fff;
	background:var(--color-navy);
}
.job-fv-title span {
	font-size:180%;
	font-weight:700;
}
.job-fv-image {
	padding:2em 4em;
}
.job-fv-image img {
	width:100%;
}


.job-fv-info .label {
	padding:0.3em 2em;
	color:#fff;
	background:var(--color-navy);
	align-self:flex-start;
}
.job-fv-info .label span {
	font-size:120%;
	font-weight:600;
}
.job-fv-info .value {
	flex-grow:1;
	padding:0.5em 0;
	color:var(--color-navy);
	text-align:center
}
.job-fv-info .value span {
	font-size:240%;
	font-weight:700;
}


.job-saraly ,
.job-data > * {
	border:5px solid var(--color-navy);
	border-radius:1em;
	overflow:hidden;
}

.job-data {
	padding-top:2em;
	display:grid;
	grid-template-columns:repeat( 2 ,1fr );
	gap:2em;
}


@media screen and (min-width:800px) {
	.job-fv-info {
		width:1000px;
		margin:0 auto;
	}

	.job-fv-image img {
		aspect-ratio:5/2;
		object-fit:cover;
	}

	.job-saraly {
		min-height:8em;
	}
	.job-fv-info .job-saraly .value span {
		font-size:300%;
	}
}
@media screen and (max-width:799px) {

	#job-fv .innerFrame {
		width:100%;
		min-width:auto;
	}
	#job-fv .job-tag span {
		font-size:110%;
	}

	.job-fv-title {
		padding:0.5em 1em;;
	}
	.job-fv-title span {
		font-size:130%;
	}

	.job-fv-title span br {
		display:none;
	}

	.job-fv-image {
		padding:2em 1em;
	}

	.job-saraly.flex.between {
		flex-direction:column;
	}
	.job-data {
		grid-template-columns:1fr;
	}
	.job-fv-info .label {
		width:100%;
		padding:0.1em 0;
		text-align:center;
	}
	.job-fv-info .label span {
		font-size:100%;
	}
	.job-fv-info .value {
		padding:0.3em 0;
	}
	.job-fv-info .value span {
		font-size:160%;
	}
}


/* =================================================================================
	job - point
================================================================================= */
.job-point {
	display:grid;
	grid-template-columns:repeat( 2 ,1fr );
	gap:2em;
}
.job-point-card {
	background:#fff;
}
.job-point-card .label.flex {
	padding:0.5em 1em;
	color:#fff;
	background:var(--color-navy);
	gap:0.5em;
}
.job-point-card .label .number {
	width:1.8em;
	line-height:1.6;
	color:var(--color-navy);
	background:var(--color-pale);
	aspect-ratio:1/1;
}
.job-point-card .label .number span {
	font-size:90%;
	font-weight:600;
}
.job-point-card .label .title span {
	font-size:110%;
	font-weight:600;
}
.job-point-card .text {
	padding:1em 1.5em;
}

@media screen and (max-width:799px) {
	.job-point {
		grid-template-columns:1fr;
	}
	.job-point-card .text span {
		font-size:90%;
	}
}


/* =================================================================================
	job - images
================================================================================= */
.job-images {
	padding:0 2em;
	display:grid;
	grid-template-columns:repeat( 3 ,1fr );
	gap:2em;
}
.form-preview + .job-images {
	padding-top:3em;
}
.job-images img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
}

@media screen and (max-width:799px) {
	.job-images {
		padding:0;
		gap:0.5em;
	}
	.form-preview + .job-images {
		padding-top:3em;
	}
}


/* =================================================================================
	job - details
================================================================================= */
.job-details {
	padding-bottom:2em;
}
.job-item {
	padding-bottom:2em;
}

@media screen and (max-width:799px) {
	.job-details {
		padding-bottom:0;
	}
}





/* =================================================================================
	recruit button
================================================================================= */
#main-contents > section#toRecruit {
	padding-bottom:6em;
}

.recruit-button-frame {
	padding-bottom:4em;
}

#toRecruit a {
	outline:0.2em solid #fff;
}

@media screen and (min-width:800px) {
	#toRecruit a:hover {
		filter:drop-shadow(0 0 0.3em var(--color-navy)) contrast(1.1);
	}
}



/* =================================================================================
	job slider
================================================================================= */
#recruit-slider {
	max-width:1920px;
	margin:0 auto;
	padding-top:4em;
/*
	display:flex;
	justify-content:center;
*/
	overflow:hidden;
}
.job-slider {
  transition: none;
}
#recruit-slider .job-card {
	width:360px;
	margin:0 0.5em;
}
#recruit-slider .job-card-inner {
	padding:0.5em 0;
}
#recruit-slider .job-tags.flex.left {
	padding-bottom:0.5em;
	justify-content:center;
	gap:0.3em;
}
#recruit-slider .job-tag span {
	font-size:80%;
}
#recruit-slider .job-card .button-frame {
	border-top:1px solid var(--color-mint);
	padding-top:0.5em;
}
#recruit-slider .job-card .button {
	line-height:1.6;
}
#recruit-slider .job-card .button span {
	font-size:90%;
}
#recruit-slider .slick-dotted.slick-slider {
	margin-bottom:0;
	padding-bottom:2em;
}
#recruit-slider .slick-dots {
	bottom:0;
}

@media screen and (max-width:799px) {
	#recruit-slider .job-card {
		width:280px;
	}
	#recruit-slider .job-card .job-image img {
		aspect-ratio:7/3;
	}
	#recruit-slider .job-tags .sp-frame {
		width:100%;
		display:flex;
		justify-content:center;
	}
}