@charset "UTF-8";
/* CSS Property Order
1.Visual					display, opacity, position, z-index, transform
2.Box Model					overflow, width, min-width, max-width, margin, padding, border, box-sizing, box-shadow
3.Background				background, background-image, background-position, background-size, background-color
4.Color,Font,Text			color, font-weight, font-size, line-height, letter-spacing, text-decoration, text-align
5.Table						table, vertical-align
6.UI						content, cursor
7.Animation 				transition, animation
8.Other						
--------------------------*/
/*--------------------------
wrapper
container
outer
inner
box
group
area
unit
item
--------------------------*/




/*root
--------------------------*/
:root{
	/*color--------*/
	--color_pk_black:#000;
	--color_pk_white:#fff;
	--color_pk_blue_opa_10:rgb(21,163,194,0.1);
	--color_pk_blue_62:#15A3C2;
	--color_pk_blue_50:#0085a3;
	--color_pk_blue_40:#00677D;
	--color_pk_orange_62:lch(62% 83.8 56.7);
	--color_pk_orange_50:lch(50% 83.8 56.7);
	--color_pk_orange_40:lch(40% 83.8 56.7);
	--color_bg_secondary:#F9F7F4;
	--color_border_dark_primary:rgba(0,0,0,0.4);
	--color_border_dark_secondary:rgba(0,0,0,0.2);
	--color_font_dark_primary:rgba(0,0,0,0.9);
	--color_font_dark_secondary:rgba(0,0,0,0.4);
	--color_font_light_primary:rgba(255,255,255,0.98);
	--color_font_light_secondary:rgba(255,255,255,0.4);

	/*font--------*/
	--font_4xl:1.5rem;/*24*/
	--font_3xl:1.375rem;/*22*/
	--font_2xl:1.25rem;/*20*/
	--font_xl:1.125rem;/*18*/
	--font_l:1rem;/*16*/
	--font_m:0.875rem;/*14*/
	--font_s:0.75rem;/*12*/
	--font_xs:0.625rem;/*10*/
	--line-height_heading:1.3;
	--line-height_body:1.6;
	--line-height_label:1.3;

	/*radius
	--------*/
	--radius_xl:16px;
	--radius_l:12px;
	--radius_m:6px;
	--radius_s:4px;
}


/*master
--------------------------*/
html						{scroll-behavior: smooth; scroll-padding-top:72px;}
body						{color:var(--color_font_dark_primary); font-size:var(--font_m); line-height:var(--line-height_body);}
body						{font-family:"Inter","Noto Sans JP", sans-serif; font-weight:400; font-style:normal; text-align:justify;}

article						{padding:24px;}

img							{max-width:100%;}
h2							{font-size:var(--font_4xl); font-weight:bold; text-align:center; line-height:1.2;}
h2 span						{display:inline-block;}
h2+p						{font-size:var(--font_l); text-align:center;}
h3							{display:grid; grid-template-columns:1fr auto 1fr; justify-content:center; align-items:center; gap:16px; margin-bottom:24px; font-size:var(--font_2xl); font-weight:bold; text-align:center; line-height:1.2;}
h3::before,
h3::after					{content:""; display:block; width:100%; height:1px; background:var(--color_border_dark_secondary);}

button						{height:48px; border-radius:var(--radius_m); text-box-trim:trim-both;}

a.button					{display:grid; place-content:center; max-width:264px; height:64px; margin:0 auto; border-radius:var(--radius_m); background-image:linear-gradient(75deg, #055fb5, #2b9bc0 50%, #055fb5); background-size:200% 100%; color:var(--color_font_light_primary); font-size:var(--font_xl); font-weight:bold; cursor:pointer; transition:all 0.2s ease-out;}
a.button:hover				{background-position:-100% 0;}
a.button.type2				{background-image: linear-gradient(75deg, #2b9bc0, #2bbbc0 50%, #2b9bc0);}

.icon_acc			{display:block; position:relative; width:24px; height:24px;}
.icon_acc::before,
.icon_acc::after	{position:absolute; top:11px; left:4px; width:16px; height:2px; background:#262626; content:""; transition:all 0.5s ease-out;}
.icon_acc::after	{transform:rotate(90deg);}

.label_xl					{font-size:var(--font_xl); line-height:var(--line-height_label);}
.label_l					{font-size:var(--font_l); line-height:var(--line-height_label);}
.label_m					{font-size:var(--font_m); line-height:var(--line-height_label);}
.label_s					{font-size:var(--font_s); line-height:var(--line-height_label);}
.label_xs					{font-size:var(--font_xs); line-height:var(--line-height_label);}

.wrapper::after					{content:""; position:fixed; top:0; bottom:0; left:0; right:0; background:image-set(url(../img/bg.avif) 1x, url(../img/bg@2x.avif) 2x) center center / cover no-repeat;}
.wrapper .container				{display:grid; grid-template-columns:1fr 456px 1fr; position:relative; top:0; left:0; padding:48px 0; z-index:10;}
.wrapper .container .spsize		{position:relative; border-radius:var(--radius_l); overflow:hidden;  background:#F0FAFF; box-shadow:0px 12px 24px 0px rgba(0, 0, 0, 0.8);}


/*header
--------------------------*/
header													{display:grid; align-content:center; position:absolute; top:0; left:0;  width:100%; height:72px; border-bottom:1px solid var(--color_border_dark_primary); background:var(--color_pk_white);}
header .outer											{display:flex; justify-content:space-between; align-items:center; padding:12px 24px;}
header .inner_left										{}
header .inner_left a img								{display:block; height:32px;}
header .inner_right button								{z-index:100; display:none; justify-content:center; align-items:center; width:48px; height:48px; border-radius:50%; border:1px solid var(--color_border_dark_primary); background:var(--color_pk_white); transition:all 0.1s ease-out;}
header .inner_right button .hamburger					{position:relative; width:28px;}
header .inner_right button .hamburger::before,
header .inner_right button .hamburger::after			{content:""; position:absolute; top:0; left:0; width:100%; height:2px; display:inline-block; background:var(--color_pk_black); border-radius: 1px; transition:all 0.3s ease-out;}
header .inner_right button .hamburger::before			{top:-8px;}
header .inner_right button .hamburger::after			{top:8px;}
header .inner_right button span							{display:block; width:100%; height:2px; background:var(--color_pk_black); border-radius: 1px; opacity:1; transition:all 0.3s ease-out;}
header .inner_right button.close span					{opacity:0;}
header .inner_right button.close .hamburger::before		{top:0; transform:rotate(45deg);}
header .inner_right button.close .hamburger::after		{top:0; transform:rotate(-45deg);}


/*nav
--------------------------*/
nav									{display:flex; justify-content:right; align-items:flex-start; padding:0 48px;}
nav > div							{position:sticky; top:48px; width:264px;}
nav .logo img						{display:block; filter:invert(100%) sepia(0%) saturate(0%) hue-rotate(137deg) brightness(107%) contrast(101%);}
nav ul								{margin:72px 0 0 16px;}
nav ul li							{color:var(--color_font_light_primary); font-size:var(--font_l); font-weight:bold;}
nav ul li:nth-of-type(n + 2)		{margin-top:24px;}
nav ul li:nth-last-of-type(2)		{margin-top:32px;}
nav ul li:nth-last-of-type(-n + 2)	{font-size:var(--font_m);}
nav ul li a							{display:flex; align-items:center; gap:8px; min-height:24px; line-height:1.2;}
nav ul li a::before					{content:""; display:block; width:24px; height:1px; background:var(--color_font_light_primary); transition:all 0.1s ease-out;}
nav ul li a:hover::before			{width:48px;}
nav ul li a img						{opacity:0.9; filter:invert(100%) sepia(2%) saturate(898%) hue-rotate(201deg) brightness(119%) contrast(100%);}
nav .bottom							{margin-top:72px;}
nav .bottom .button					{height:48px; font-size:var(--font_l);}
nav .bottom p						{margin-top:12px; color:var(--color_font_light_primary); text-align:center;}


/*main
--------------------------*/
main											{padding-top:72px;}

/*--top--*/
#top											{display:grid; justify-items:center; gap:12px; background:image-set(url(../img/top_bg.avif) 1x, url(../img/top_bg@2x.avif) 2x) center center / cover no-repeat; padding-top:32px;}
#top .logo										{display:block; margin:0 auto;}
#top .logo path									{fill: #ffffff;}
#top h1											{border-radius:var(--radius_m); padding:8px 24px; background:var(--color_pk_white); color:var(--color_font_dark_primary); font-size:var(--font_xl); font-weight:bold; text-box-trim:trim-both;}
#top .image										{display:block; max-width:100%; margin:0 auto;}

/*--message--*/
#message										{margin-top:-46px; padding:0 24px 24px;}
#message section								{display:grid; justify-items:center;}
#message section h2								{margin-top:24px;}
#message section p								{margin-top:12px; font-feature-settings: "palt";}

/*--industry--*/
#industry section h3 span						{padding:8px 24px; border-radius:20px; border:1px solid var(--color_border_dark_secondary); background:var(--color_pk_white);}
#industry section img							{display:block; max-width:100%; margin:0 auto 24px;}
#industry section p.kome						{margin-top:4px; font-size:var(--font_xs);}

/*--job--*/
#job > section									{border-radius:var(--radius_l); border:1px solid var(--color_border_dark_primary); background:var(--color_pk_white); padding:24px;}
#job hgroup										{display:grid; justify-items:center;}
#job hgroup:nth-of-type(n + 2)					{margin-top:24px;}
#job hgroup.shokai h5							{background:linear-gradient(transparent 50%, #ffff00 50%); font-size:var(--font_3xl); font-weight:bold; text-box-trim:trim-both;}
#job hgroup.shokai p							{margin:4px 0 8px; font-size:var(--font_l); font-weight:bold;}
#job hgroup.shokai img:nth-of-type(1)			{margin-bottom:24px;}
#job hgroup.anshin h5							{display:flex; justify-content:center; align-items:center; margin-bottom:8px; font-size:var(--font_l); font-weight:bold; line-height:1;}
#job hgroup.anshin h5::before,
#job hgroup.anshin h5::after					{content:""; display:block; width:2px; height:16px; margin:0 4px; background:var(--color_font_dark_primary); transform:rotate(-25deg);}
#job hgroup.anshin h5::after					{transform:rotate(25deg);}
#job hgroup.anshin .group:nth-of-type(n + 2)	{margin-top:24px;}
#job hgroup.anshin .group h4					{display:grid; justify-items:center; min-height:40px; margin-bottom:16px; padding:8px 12px; border:1px solid var(--color_border_dark_secondary); border-radius:var(--radius_m); background-image:linear-gradient(135deg, #fff100, #ffcc00); font-size:var(--font_l); font-weight:bold; text-box-trim:trim-both;}
#job hgroup.anshin .group .area					{display:flex; align-items:center; gap:12px;}
#job hgroup.anshin .group .area img				{width:72px;}
#job hgroup.anshin .group .area p				{flex-grow:1; text-align:justify;}
#job hgroup.anshin .group .area p span			{display:block; margin-bottom:4px; font-weight:bold;}
#job hgroup.houshu								{margin-top:48px;}
#job hgroup.houshu h3							{width:100%;}
#job hgroup.houshu img:nth-of-type(1)			{margin:12px 0 48px;}

/*--contact--*/
#contact										{padding-top:48px;}
#contact section h3								{margin-bottom:24px;}
#contact section h3 span						{min-width:168px; padding:8px 24px; border-radius:20px; border:1px solid var(--color_border_dark_secondary); background:var(--color_pk_white);}
#contact section h3 + p							{text-align:center;}
#contact section h3 + p span					{display:block; font-weight:bold;}
#contact section .button						{margin-top:24px;}


/*footer
--------------------------*/
footer													{display:grid; place-content:center; place-items:center; padding:48px 48px 24px;}
footer a												{display:grid; place-content:center; place-items:center;}
footer a img											{display:block;}
footer a span											{font-size:var(--font_xs);}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*hover対応
------------------------------------------------------------------------------*/
@media (hover: hover) {

}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*Responsive[Tablet]
------------------------------------------------------------------------------*/
@media screen and (max-width:860px){

	.wrapper .container						{display:block; width:456px; margin:0 auto; padding:0;}
	.wrapper .container .spsize				{overflow:visible; border-radius:0;}
	header									{position:sticky; border-radius:0; z-index:20;}
	header .inner_right button				{z-index:100; display:flex;}
	nav										{display:none; background:white;}
	nav > div								{top:72px;}
	nav .logo								{display:none;}
	nav ul									{margin:48px 0 0;}
	nav ul li								{color:var(--color_font_dark_primary);}
	nav ul li a::before						{background:var(--color_font_dark_primary);}
	nav ul li a img							{filter:none;}
	nav .bottom								{margin-top:48px;}
	nav .bottom .button						{height:64px; background-image:linear-gradient(75deg, #055fb5, #2b9bc0 50%, #055fb5);}
	nav .bottom p							{color:var(--color_font_dark_primary);}
	main									{padding-top:0;}
	footer									{padding:72px 48px 32px;}
	.nav_open header						{border-bottom:none;}
	.nav_open nav							{display:grid; justify-content:center; position:fixed; top:0; bottom:0; right:0; left:0; z-index:10; animation:fade 0.3s;}
	@keyframes fade							{0% {opacity:0;} 100% {display:grid; opacity:1;}}
	.nav_close nav							{justify-content:center; position:fixed; top:0; bottom:0; right:0; left:0; z-index:10; animation:fadeout 0.3s;}
	@keyframes fadeout						{0% {display:grid; opacity:1;} 100% {display:none; opacity:0;}}
}


/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/*Responsive[Smartphone]
------------------------------------------------------------------------------*/
@media screen and (max-width:500px){

	.wrapper::after							{display:none;}
	.wrapper .container						{display:block; width:100%; margin:0 auto; padding:0;}
	.wrapper .container .spsize				{border-radius:0; box-shadow:none;}
	header									{border-radius:0;}
	nav										{padding:0 24px;}
	nav > div								{width:100%;}

}