@charset "UTF-8";

/****************************************

		style.css 

*****************************************/

:root {
  --color_black : #333333;
  --color_gray : #f0edeb;
  --color_orange : #ff7a00;
  --color_green : #8fc31f;
}

html, body {
    /* font-family: "MFW-PMiGoMB1StdN-DeBold","mb31", sans-serif; */
	
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	font-style: normal;

    color: var(--color_black);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    font-size: 20px;
    letter-spacing: .14em;
}
body.no_scroll{ overflow: hidden; }
	
a{ }
a:hover{ }
		
::selection { color: #eee; background-color: #000;}
::-moz-selection { color: #eee; background: #000; }  
:focus {-moz-outline-style: none;}

hr{ border-bottom: 1px solid #666; margin: 5px 0; }
small{ font-size: 80%; }
.ib{ display: inline-block; }
.hide { display: none;  }
.clear { clear: both; }
img, svg,embed,object,video { max-width: 100%; height: auto; }

.figtree-b { font-family: "Figtree", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; }
.figtree-eb { font-family: "Figtree", sans-serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; }

.md{ opacity: 0; }

/* pc,sp切り替え
-------------------------------------------------------------------------------------------------- */
.pc{ display: block; }
.sp{ display: none; }


/*
-----------------------------------------------------------------------------------------------------------------------------------------
		container
----------------------------------------------------------------------------------------------------------------------------------------- */
#container{ width: 100%; min-width: 1100px; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		header
----------------------------------------------------------------------------------------------------------------------------------------- */
header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 25px; height: 90px; display: flex; align-items: center; }
	.header_logo{ width: 180px; }



/*
-----------------------------------------------------------------------------------------------------------------------------------------
		top_slide
----------------------------------------------------------------------------------------------------------------------------------------- */
#top_slide_wrap{ position: fixed; top: 0; left: 0; z-index: -1; width: 100%; }
	#top_slide_wrap .top_slide{ opacity: 0; height: 80vh; }
	#top_slide_wrap .slick-track{ /* height: calc(var(--bHeight)*100); */ height: 100vh; }
		#top_slide_wrap .slide_item{ position: absolute !important; top: 0 !important; left: 0 !important; transition: all 0.3s cubic-bezier(.7,0,.39,1), filter 1.5s ease, opacity 2000ms ease !important; filter: brightness(200%); }
			#top_slide_wrap .slide_item img{ height: 100vh; width: 100%; object-fit: cover; transition: scale 7s linear; }
			#top_slide_wrap .slide_item.zoom_in img{ scale: 1.1; }
		
		#top_slide_wrap .slick-current{ filter: brightness(100%); }
		
		.top_slide .slick-current::after{
			content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: rgba(0,0,0,0.5);
			animation: progress_line 5s linear forwards; }
		@keyframes progress_line{
				0%{ width: 0;} 100%{ width: 100%;}
			}

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		toppage
----------------------------------------------------------------------------------------------------------------------------------------- */	
#main{ width: 100%; max-width: 1280px; margin: 0 auto;  }

/* top_logo-shoulder
-------------------------------------------------------------------------------------------------- */
.top_logo-shoulder{ display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: calc(var(--bHeight)*100); }
	.top_logo-shoulder img{ width: 300px; }

/* message
-------------------------------------------------------------------------------------------------- */
.message{ width: 80%; margin: 0 auto; position: relative; padding-top: 350px; padding-bottom: 350px; line-height: 2.0; }
	.message .m_txt{ position: relative; z-index: 10; margin-bottom: 100px; line-height: 2.6em; }
	.message .m_img{ position: absolute; bottom: 30%; right: 0; width: 80%; }

/* contents_list
-------------------------------------------------------------------------------------------------- */
.cl_wrap{ background-color: var(--color_gray); padding: 150px 50px;  }
.contents_list{ display: flex; width: 100%; max-width: 1280px; margin: 0 auto; gap: 20px; flex-wrap: wrap; }
	.contents_list .cl_thumb{ width: 100%; height: 300px; border: 2px solid #333; }
	.contents_list .cl_thumb.w_half{ width: auto; flex: 1; }
		.contents_list .cl_thumb a{ width: 100%; height: 100%; position: relative; z-index: 5; transition: all 0.3s cubic-bezier(.7,0,.39,1); display: flex; }
			.cl_title_wrap{ width: 50%; display: flex; align-items: center; padding-left: 80px; }
				.cl_title{ }
					.cl_title .en{ font-size: 2.5rem; letter-spacing: .11em; line-height: 1; margin-bottom: 10px;}
					.cl_title .jp{ font-size: .9rem;}
			.cl_img{ width: 50%; overflow: hidden; }
				.cl_img img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.3s cubic-bezier(.7,0,.39,1); }
		.contents_list .cl_thumb a:hover{ color: #fff; background-color: #333; }
				.contents_list .cl_thumb a:hover .cl_img img{ opacity: .8; transform: scale(1.05); }

/* 矢印付きボタン
-------------------------------------------------------------------------------------------------- */
	.d_bt{ position: relative; padding: 20px 20px 20px 60px; border: 2px solid var(--color_black); display: inline-block; font-size: .9rem; line-height: 1; transition: all 0.3s cubic-bezier(.7,0,.39,1);}
		.d_bt  span{ position: relative; z-index: 5;}
		.d_bt::before{ content: ''; width: 80px; height: 9px; position: absolute; top: 50%; left: -10px; z-index: 2;
			background: url(../images/arrow.png) no-repeat; background-size: contain; transition: all 0.3s cubic-bezier(.7,0,.39,1); }
		.d_bt::after{ content: ''; width: 0; height: 100%; position: absolute; top: 0; left: auto; right: 0; background-color: var(--color_black); transition: all 0.3s cubic-bezier(.7,0,.39,1); }
	.d_bt:hover{ padding-left: 70px; color: #fff; }
		.d_bt:hover::before{ left: -2px; filter: brightness(500%); }
		.d_bt:hover::after{ width: 100%; left: 0; }


/*
-----------------------------------------------------------------------------------------------------------------------------------------
		paged
----------------------------------------------------------------------------------------------------------------------------------------- */	
.page_title_wrap{ width: 100%; max-width: 1280px; margin: 0 auto; height: 400px; display: flex; align-items: end; }
	.page_title{ padding-bottom: 80px; }
		.page_title .en{ font-size: 4.5rem; letter-spacing: .1em; line-height: 1.2; position: relative; color: var(--color_gray); --after-width: 0%; }
		.page_title .en::after{ content: attr(data-entitle); color: var(--color_black); position: absolute; top: 0; left: 0; z-index: 1; width: var(--after-width); overflow: hidden; white-space: nowrap; }
		.page_title .jp{ font-size: .9rem; }


/* main_contents
-------------------------------------------------------------------------------------------------- */
.pcon_wrap{ background-color: var(--color_gray); padding: 150px 0 250px;  }
	.p_contents{ width: 100%; max-width: 1280px; margin: 0 auto; line-height: 2.0; }
		.page_toptxt{ margin-bottom: 150px; }
span.hifun{ letter-spacing: 0; display: inline-block; transform: scaleX(3); transform-origin: top left; width: 3em; }
	

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		ace plus value
----------------------------------------------------------------------------------------------------------------------------------------- */
.value_description{ display: flex; flex-direction: column; gap: 5em 0; }
	.value_part{ display: flex; gap: 4em; align-items: center; }
		.value_part .initialword{ display: flex; align-items: center; gap: 4em; width: 325px; }
		.value_part.value_part_plus .initialword{ flex-direction: column; align-items: flex-start; gap: 0;}
			.value_part .initial{ font-size: 4.5rem; color: var(--color_orange); min-width: 80px; text-align: center; letter-spacing: 0; }
			.value_part.value_part_plus .initial{ letter-spacing: .14em;}
			.value_part .word{ width: 160px; }
		.value_part .line{ width: 2px; background-color: var(--color_black); height: 150px; }
		.value_part .render{ display: flex; flex-direction: column; gap: 1.3em 0; }
			.value_part .render_title{ font-size: 2.1rem; letter-spacing: .14em; }
			.value_part .render_txt{}

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		business_contets
----------------------------------------------------------------------------------------------------------------------------------------- */
.business_contets{ display: flex; flex-direction: column; gap: 5em 0; }
	.business_part{ display: flex; gap: 4em; }
		.business_part .number{ font-size: 2.8rem; color: var(--color_green); min-width: 80px; text-align: center; letter-spacing: 0; line-height: 90px; }
		.business_part .b_tt{ display: flex; flex-direction: column; gap: 1.3em 0; }
			.business_part .b_title{ font-size: 2.1rem; letter-spacing: .14em; }
			.business_part .b_txt{}

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		profile_contets
----------------------------------------------------------------------------------------------------------------------------------------- */
.profile_contets{ display: flex; flex-direction: column; gap: 150px 0; }
	.profile_part{ display: flex; flex-direction: column; gap: 2em; }
		.pp_col{ display: flex; }
		.pp_col .profile_part{ flex: 1; }
			.profile_part .pp_title{ font-size: 1.5rem; letter-spacing: .14em; }
				.profile_part .pp_title span{ letter-spacing: .14em; }
				.profile_part .pp_title span.ceo{ font-size: 1rem; }
				.profile_part .pp_title span.yomigana{ font-size: .8rem; }
			.profile_part .pp_txt{ padding-left: 35px; /* margin-bottom: 30px; */}
			.profile_part .pp_img{ max-width: 700px; margin: 15px auto; }
			.profile_part .pp_img_01{ width: 520px; padding-left: 50px; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		project_contents
----------------------------------------------------------------------------------------------------------------------------------------- */
.project_contents{ display: flex; flex-direction: column; gap: 2em 0; }
		.project_title{ font-size: 1.5rem; }
		.project_img{ display: flex; flex-direction: column; align-items: center; gap: 2em; margin-top: 20px; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		recruit
----------------------------------------------------------------------------------------------------------------------------------------- */
.recruit .page_toptxt{ margin-bottom: 0px; padding-bottom: 100px; border-bottom: 1px solid #333; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		contact
----------------------------------------------------------------------------------------------------------------------------------------- */
.contact .contact_form{ padding-top: 0; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		privacy policy
----------------------------------------------------------------------------------------------------------------------------------------- */
.privacypolicy .p_contents{ font-size: .9rem; letter-spacing: .05em; }
	.privacypolicy .p_contents h2{ font-size: 1.1rem; margin-bottom: .2em; }
	.privacypolicy .p_contents p{ margin-bottom: 3em; }



/*
-----------------------------------------------------------------------------------------------------------------------------------------
		form 関連 : input etc
-----------------------------------------------------------------------------------------------------------------------------------------
*/
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea { 
	background: #fff; color: #333; letter-spacing: 0.1rem; width: 100%; padding: 8px 10px; border-radius: 1px; 
	-webkit-transition: all .3s; transition: all .3s;
	}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="password"]:focus, textarea:focus{ background: rgba(0,238,255,0.05); box-shadow: 0px 0px 0px 1px #bbb inset; }
input[type="text"]:selected{ background: rgba(0,0,0,0.2); }

input[type=radio],input[type=checkbox] { display: none; }
	.radio, .checkbox,
	input[type=radio] + span,
	input[type=checkbox] + span,
	input[type="number"]{
	box-sizing: border-box;
	-webkit-transition: all 0.2s linear; transition: all 0.2s linear;
	position: relative; display: inline-block;
	margin: 2px; padding: 2px 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.05);
	vertical-align: middle; cursor: pointer; background: rgba(77,77,71,0.06);
	}
	.radio:hover, .checkbox:hover{ border-color: #000; }
	input[type=radio]:checked + .radio,
	input[type=checkbox]:checked + .checkbox{ border-color: #000; background: #000; color: #fff; }
	input[type="number"]{ cursor: default; }
	input[type="number"]:hover{ border-color: rgba(0,0,0,0.3); }
	
input[type=radio] + span,
input[type=checkbox] + span { padding: 8px 15px 8px 36px ; /* border-color: #e9e9e9; */ line-height: 2.2rem; }
input[type=radio] + span:hover { }
input[type=radio] + span:hover:after { }
input[type=radio] + span:after,
input[type=checkbox] + span:after { content: ''; position: absolute; top: 50%; left: 12px; display: block; margin-top: -7px; width: 12px; height: 12px; border: 1px solid #bbb; border-radius: 50%; z-index: 1; } 
input[type=radio] + span:before,
input[type=checkbox] + span:before { -webkit-transition: all 0.2s linear; transition: all 0.2s linear; content: ''; position: absolute; display: block; opacity: 0; z-index: 2; }
input[type=radio] + span:before { top: 50%; left: 14px; margin-top: -5px; width: 10px; height: 10px; border-radius: 50%; background-color: #111; }
input[type=checkbox] + span:before { top: 50%; left: 12px; margin-top: -10px; border-top: 6px solid transparent; border-right: 12px solid transparent; border-bottom: 4px solid #111; border-left: 4px solid #111; transform: rotate(-50deg); }
input[type=radio]:checked + span:before,
input[type=checkbox]:checked + span:before { opacity: 1; }

input[type="submit"],input[type="reset"],
button[type="submit"] { cursor: pointer; }

input[type="number"]{ min-width: 64px; padding-right: 0; margin: 0; width: 100%; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ /* -webkit-appearance: none; */ }

.password_wrap{ position: relative; display: block; }
	.password_wrap .eye_icon{ position: absolute; top: 0; right: 0; width: 40px; height: 42px; cursor: pointer; }
	.password_wrap .eye_icon::after{ font-family: "Font Awesome 6 Pro"; font-weight: 900; content: '\f06e'; position: absolute; top: 0; right: 10px; line-height: 42px; }
	.password_wrap .eye_icon.hide_pass::after{ content: '\f070'; }
	
.select_box_wrap{ position: relative; }
.select_box_wrap::before,
.select_box_wrap::after{
	content: ''; position: absolute; top: 50%; right: 12px; display: block; margin-top: -5px; border-width: 5px 3px; border-style: solid; border-color: transparent transparent #777 transparent; pointer-events: none; transform: translate(0px,-7px); }
.select_box_wrap::before{ transform: rotate(180deg) translate(0px,-7px); }
select { cursor: pointer; text-overflow: ellipsis; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; vertical-align: inherit; border-radius: 0;
    background: #f3f3f3; border: 1px solid rgba(0,0,0,0.05);
    padding: 3px 32px 3px 15px;
    }
select::-ms-expand { display: none; }

/* Styling Selectbox */
.dropdown { position: relative; text-align: left; margin-left: auto; display: inline-block; }
.dropdown .select { cursor: pointer; display: block; padding: 0px 23px 0 10px; text-align: right; }
.dropdown .select::after{
	content: ''; position: absolute; top: 7px; right: 10px; display: block; width: 5px; height: 5px; margin-top: 0;
	border: 1px solid #000; border-width: 0 1px 1px 0; transform: rotate(45deg); }
.dropdown .dropdown-menu {
    position: absolute; background-color: #fff; width: 150px; right: 0; top: 30px;
    margin-top: 1px; border: 1px solid #ccc; overflow: hidden; display: none;
    /* max-height: 144px;  */ overflow-y: auto; z-index: 9;
    padding: 0; list-style: none; }
.dropdown .dropdown-menu li{ padding: 10px 15px; transition: all .2s ease-in-out; cursor: pointer; border-bottom: 1px dashed #999; }
.dropdown .dropdown-menu li:last-of-type{ border: none; }
.dropdown .dropdown-menu li:hover { background-color: #f2f2f2; }
.dropdown .dropdown-menu li:active { background-color: #e2e2e2; }

.required{ color: red; font-size: .7rem; }


/* contact form 7
-------------------------------------------------------------------------------------------------------------------------------------- */
.contact_form{ padding-top: 100px; max-width: 800px; margin: 0 auto; font-size: .9rem; }
		.wpcf7-form p.required_notice{ text-align: right; }
	.wpcf7-form .item{ border-bottom: 1px solid #ccc; padding: 20px 0; align-items: center; }
	.wpcf7-form .item:nth-of-type(2){ border-top: 1px solid #ccc; }
	.wpcf7-form.sent .item,
	.wpcf7-form.sent .submit,
	.wpcf7-form.sent p{ /* display: none; */ pointer-events: none; opacity: .7; } /* 送信完了後非表示 */
	.wpcf7-form .item.hide{ display: none; }
		.wpcf7-form .item > div{ width: 70%; margin: 2px 0; }
		.wpcf7-form .item .item_title{ width: 30%; }
		.wpcf7-form .item.address div:nth-of-type(2n):not(:last-child){ margin-bottom: 10px; }
			.wpcf7-form-control-wrap.KBN span span.wpcf7-list-item{ display: block; }
		.wpcf7-form .submit{ text-align: center; }
			.wpcf7-form .submit > div{ position: relative; }
		div.wpcf7 .submit .ajax-loader { position: absolute; top: 50%; left: 63%; }
		
	.wpcf7-form input[type=radio] + span,
	.wpcf7-form input[type=checkbox] + span{ background: #fff; }
		
	.wpcf7-mail-sent-ok{ display: none !important; }/* ちょっと邪魔なんで */
	.form_wrap .thanks{ display: none;
		border-top: 1px solid #ccc; margin-top: 30px; padding-top: 30px; text-align: center; }
		.form_wrap .thanks span{ font-size: 1.8rem; font-weight: bold; line-height: 3.0rem; }
		#main .form_wrap a.bt_back{ color: #fff; text-decoration: none; margin-top: 30px; margin-bottom: 10px;}

	.wpcf7-form-control-wrap.select::after{
	content: ''; position: absolute; top: 50%; right: 16px; display: block; width: 6px; height: 6px; margin-top: -5px;
	border: 1px solid #000; border-width: 0 1px 1px 0; transform: rotate(45deg); pointer-events: none; }
	select.wpcf7-select{ /* border: 1px solid #c7cad1; */ background: #fff; color: #333; letter-spacing: 0.1rem; cursor: default; padding: 0 32px 0 14px; height: 40px; max-width: 100%; } 	
		span.wpcf7-list-item{ margin: 0 !important; }
	
	.contact_form .submit{ text-align: center; margin-top: 60px;}
		.contact_form .submit_wrap{ }
			.contact_form .submit_wrap input[type="submit"]{ margin-top: 0; letter-spacing: .14em; }
			div.wpcf7 .submit .wpcf7-spinner,
			div.wpcf7 .submit .ajax-loader {
				display: block; width: 100%; height: 100%; background: url(../images/three-dots.svg) center center no-repeat;
				background-color: #333; background-size: 15%; position: absolute; top: 0; left: 0; z-index: 9; pointer-events: none;
				padding: 0; margin: 0; opacity: 1; border-radius: 0;
				}
			div.wpcf7 .submit .wpcf7-spinner:before,
			div.wpcf7 .submit .ajax-loader:before{ display: none; }
	.wpcf7-not-valid-tip{ color: #df353d !important; font-size: .7rem; letter-spacing: .1em; }
	.wpcf7-validation-errors{ border: none !important; background: #666;}
	div.wpcf7-response-output{ border: none !important; background: #ddd !important; color: #000 !important; padding: 50px 50px !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 20px !important; text-align: center;  }
	/* div.wpcf7 .ajax-loader{ display: none !important; } //ちょっと邪魔なんで */

	.contact_form .address{ display: flex; flex-wrap: wrap; gap: 5px 1em; align-items: center;}
		.contact_form .address .yubinno{ width: 10em;}

	/* 矢印付きボタン */
	.submit_wrap p{ position: relative; border: 2px solid var(--color_black); display: inline-block; font-size: .9rem; line-height: 1; transition: all 0.3s cubic-bezier(.7,0,.39,1);}
		.submit_wrap p > span{ position: relative; z-index: 5; height: 100%; display: inline-block; }
		.submit_wrap p::before{ content: ''; width: 80px; height: 9px; position: absolute; top: 50%; left: -10px; z-index: 2;
			background: url(../images/arrow.png) no-repeat; background-size: contain; transition: all 0.3s cubic-bezier(.7,0,.39,1); }
		.submit_wrap p::after{ content: ''; width: 0; height: 100%; position: absolute; top: 0; left: auto; right: 0; background-color: var(--color_black); transition: all 0.3s cubic-bezier(.7,0,.39,1); }
		.submit_wrap p:hover::before{ left: -2px; filter: brightness(500%); }
		.submit_wrap p:hover::after{ width: 100%; left: 0; }
			.contact_form .submit_wrap input{ padding: 20px 50px 20px 80px; transition: all .3s cubic-bezier(.7,0,.39,1); }
			.contact_form .submit_wrap p:hover input{ padding-left: 100px; color: #fff; }

	.submit_notice{ font-size: .7rem; letter-spacing: .1em; margin-top: 30px;}

.grecaptcha-badge { visibility: hidden; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		footer
----------------------------------------------------------------------------------------------------------------------------------------- */	
footer{ background-color: var(--color_black); padding: 150px 0; line-height: 1.6em; }
	.f_contents{ width: 100%; max-width: 1280px; margin: 0 auto; color: #fff; position: relative; }
		ul.f_navi{ display: flex; flex-wrap: wrap; width: 66%; gap: .6em 0; transform: translateY(-10px); }
			.f_navi li{ width: 33%; }
				.f_navi li a,
				.gnavi_ul li a{ display: inline-block; position: relative; line-height: 2em; }
					.f_navi li a::after,
					.gnavi_ul li a::after{ content: ''; width: 0; height: 1px; position: absolute; bottom: 0; left: 0; background-color: #fff; transition: all 0.3s cubic-bezier(.7,0,.39,1); }
				.f_navi li a:hover::after,
				.gnavi_ul li a:hover::after{ width: 100%; }
		.f_contents .address{ padding: 80px 0; font-size: .7rem;}
			.f_contents a.map{ display: inline-block; border: 1px solid #fff; padding: 6px 15px; line-height: 1; transition: all 0.3s cubic-bezier(.7,0,.39,1); margin-top: 5px; }
			.f_contents a.map:hover{ color: #333; background-color: #fff; }
		.f_contents .copyright{ font-size: .7rem;}
		.f_contents .f_logo{ position: absolute; top: 0; right: 0; width: 120px; }

		.f_contents .recaptcha_announce{ font-size: .55rem; line-height: 1.4; letter-spacing: .15em;}


/*
-----------------------------------------------------------------------------------------------------------------------------------------
		navi
----------------------------------------------------------------------------------------------------------------------------------------- */	
#navi{ position: fixed; top: 0; right: 0; width: 100%; z-index: 101; }
	#navi .navbar_3line{ position: absolute; top: 15px; right: 15px; width: 60px; height: 60px; z-index: 22; cursor: pointer; }
		#navi .navbar_3line div{
			position: absolute; left: 50%;
			width: 55%; height: 2px; background: #000; border-radius: 0px;
			margin-left: -25%; margin-top: -2%;
			transition: all 0.2s; -webkit-transition: all 0.2s;
			transform-origin: center center; -webkit-transform-origin: center center;
			-webkit-transform-origin-x: 50%; -webkit-transform-origin-y: 50%;
		}
		#navi .navbar_3line div:first-child{ top: 33%; }
		#navi .navbar_3line div:nth-child(2){ top: 50%; }
		#navi .navbar_3line div:last-child{ top: 67%;}
		#navi.nav_on .navbar_3line div{ background-color: #fff;}
		#navi.nav_on .navbar_3line div:first-child{ transform: rotate(45deg); top: 50%; }
		#navi.nav_on .navbar_3line div:nth-child(2){ transform: scaleX(0); opacity: 0; }
		#navi.nav_on .navbar_3line div:last-child{ transform: rotate(-45deg); top: 50%; }

.gnavi{
	position: absolute; top: 0; right: calc(max(350px, 33vw) * -1); z-index: 21;
	width: max(350px, 33vw); height: 100vh; background: #333; color: #fff;
	transition: right 0.3s cubic-bezier(.7,0,.39,1);
	overflow-y: scroll; -webkit-overflow-scrolling: touch;
	display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 3em;
	}
	.nav_on .gnavi{ right: 0; }
		.g_logo{ width: 80px;}
		.g_logo,
		.menu_list{
			opacity: 0;
			transform: translateX(40px);
			transition: all 0.8s ease;
			/* transition: all 0.8s cubic-bezier(.7,0,.39,1); */
			transition-delay: 0.25s;
		}
		.nav_on .g_logo{ opacity: 1; transform: translateX(0); }
		.nav_on .menu_list{ opacity: 1; transform: translateX(0); }
			.gnavi_ul{ display: flex; gap: .6em; flex-direction: column; }
			.menu_list li{ width: 100%; }
			.menu_list .copyright{ font-size: .6rem; letter-spacing: .14em; margin-top: 5em; }





/*
-----------------------------------------------------------------------------------------------------------------------------------------
		Back to top button
----------------------------------------------------------------------------------------------------------------------------------------- */	
#back-top { position: fixed; bottom: -61px; right: 0; transition: all 0.4s cubic-bezier(.7,0,.39,1); }
#back-top a { width: 61px; height: 61px; display: block; position: relative; background: #333; }
	#back-top a:after{
		content: ''; width: 10px; height: 10px;
		display: block; position: absolute; top: calc(50% - 5px); left: calc(50% - 5px);
		border: 1px solid #eee;
		border-width: 1px 1px 0 0;
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
#back-top.show{ bottom: 0; }





/* ページ遷移用
-------------------------------------------------------------------------------------------------- */
body::after {
	content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
	background-color:#fff; z-index: 9999; pointer-events: none; opacity: 0;
	-webkit-transition: opacity 1.0s ease;
	transition: opacity 1.0s ease;
}
body.fadeout::after{ opacity: 1; transition: opacity 0.4s ease; }






/*
-----------------------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------------------
		MEDIA QUERIES
----------------------------------------------------------------------------------------------------------------------------------------- */	

/* 1176↑ 
----------------------------------------------- */
@media only screen and (min-width: 1176px) {

}/* end @media */


/* 767 ↓ 
----------------------------------------------- */
@media only screen and (max-width: 767px) {

html, body {
    font-size: max(4vw,16px);
    letter-spacing: .14em;
}

/* pc,sp切り替え
-------------------------------------------------------------------------------------------------- */
.pc{ display: none; }
.sp{ display: inline-block; }


/*
-----------------------------------------------------------------------------------------------------------------------------------------
		container
----------------------------------------------------------------------------------------------------------------------------------------- */
#container{ width: 100%; min-width: auto; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		header
----------------------------------------------------------------------------------------------------------------------------------------- */
header{ padding: 15px; height: auto;}
	.header_logo{ width: 40vw; }



/*
-----------------------------------------------------------------------------------------------------------------------------------------
		top_slide
----------------------------------------------------------------------------------------------------------------------------------------- */

	
/*
-----------------------------------------------------------------------------------------------------------------------------------------
		toppage
----------------------------------------------------------------------------------------------------------------------------------------- */	
#main{ width: 100%; max-width: auto; margin: 0 auto; }

/* top_logo-shoulder
-------------------------------------------------------------------------------------------------- */
.top_logo-shoulder{ padding-top: 5%; }
	.top_logo-shoulder img{ width: 60vw; }

/* message
-------------------------------------------------------------------------------------------------- */
.message{ width: 100%; padding: 10em 6vw; text-align: justify; }
	.message .m_txt{ margin-bottom: 5em; line-height: 2.0; }
	.message .m_img{ position: absolute; bottom: 30%; right: 0; width: 100%; }
		.message .m_img img{ width: 100vw; height: 80vh; object-fit: cover; }

/* contents_list
-------------------------------------------------------------------------------------------------- */
.cl_wrap{ padding: 6vw; padding-bottom: 12vw;  }
.contents_list{ max-width: auto; gap: 6vw; }
	.contents_list .cl_thumb{ height: auto; }
	.contents_list .cl_thumb.w_half{ width: auto; flex: 1; }
		.contents_list .cl_thumb a{ flex-direction: column; }
			.cl_title_wrap{ width: 100%; padding: 6vw 0 6vw 6vw; }
					.cl_title .en{ font-size: 2.2rem; letter-spacing: .11em;}
					.cl_title .jp{ font-size: .85rem;}
			.cl_img{ width: 100%; }

/* 矢印付きボタン
-------------------------------------------------------------------------------------------------- */
	.d_bt{ position: relative; padding: 20px 20px 20px 60px; border: 2px solid var(--color_black); display: inline-block; font-size: .9rem; line-height: 1; transition: all 0.3s cubic-bezier(.7,0,.39,1);}
		.d_bt  span{ position: relative; z-index: 5;}
		.d_bt::before{ content: ''; width: 80px; height: 9px; position: absolute; top: 50%; left: -10px; z-index: 2;
			background: url(../images/arrow.png) no-repeat; background-size: contain; transition: all 0.3s cubic-bezier(.7,0,.39,1); }
		.d_bt::after{ content: ''; width: 0; height: 100%; position: absolute; top: 0; left: auto; right: 0; background-color: var(--color_black); transition: all 0.3s cubic-bezier(.7,0,.39,1); }
	.d_bt:hover{ padding-left: 70px; color: #fff; }
		.d_bt:hover::before{ left: -2px; filter: brightness(500%); }
		.d_bt:hover::after{ width: 100%; left: 0; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		paged
----------------------------------------------------------------------------------------------------------------------------------------- */	
.page_title_wrap{ max-width: auto; height: 165px; }
	.page_title{ padding: 0 0 6vw 6vw; white-space: nowrap; }
		.page_title .en{ font-size: 2.0rem; letter-spacing: .1em; }
		.page_title .jp{ font-size: .8rem; letter-spacing: .11em; margin-top: .2em; }

/* main_contents
-------------------------------------------------------------------------------------------------- */
.pcon_wrap{ padding: 4em 0 8em;  }
	.p_contents{ max-width: auto; padding: 0 6vw; line-height: 1.8; }
		.page_toptxt{ margin-bottom: 4em; text-align: justify; }
span.hifun{ letter-spacing: 0; display: inline-block; transform: scaleX(3); transform-origin: top left; width: 3em; }
	
/*
-----------------------------------------------------------------------------------------------------------------------------------------
		ace plus value
----------------------------------------------------------------------------------------------------------------------------------------- */
.value_description{ gap: 5em 0; }
	.value_part{ gap: 1em; flex-direction: column; }
		.value_part .initialword{ gap: .5em; width: auto; flex-direction: column; }
		.value_part.value_part_plus .initialword{ align-items: center; }
			.value_part .initial{ font-size: 2.8rem; min-width: auto; letter-spacing: .14em; line-height: 1; white-space: nowrap; }
				.value_part .initial span{ color: #fff; display: contents; }
			.value_part .word{ width: auto; font-size: .85rem; }
		.value_part .line{ height: 40px; }
		.value_part .render{ gap: 1em 0; text-align: center;  }
			.value_part .render_title{ font-size: 2.0rem; line-height: 1; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		business_contets
----------------------------------------------------------------------------------------------------------------------------------------- */
.business_contets{ gap: 5em 0; }
	.business_part{ gap: 1em; flex-direction: column; }
		.business_part .number{ font-size: 1.9rem; line-height: 1; }
		.business_part .b_tt{ gap: .5em 0; align-items: center; }
			.business_part .b_title{ font-size: 1.9rem; line-height: 1.5; text-align: center; }
			.business_part .b_txt{ text-align: justify; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		profile_contets
----------------------------------------------------------------------------------------------------------------------------------------- */
.profile_contets{ gap: 4em 0; }
	.profile_part{ gap: 1em; }
		.pp_col{ flex-direction: column; gap: 1.5em; }
		.pp_col .profile_part{ flex: 1; }
			.profile_part .pp_col > div:first-of-type{ order: 2;}
			.profile_part .pp_col > div:nth-of-type(2){ order: 1;}
			.profile_part .pp_title{ font-size: 1.25rem; letter-spacing: .14em; }
				.profile_part .pp_title span.ceo{ font-size: .8rem; }
				.profile_part .pp_title span.yomigana{ font-size: .6rem; }
			.profile_part .pp_txt{ padding-left: 0px; margin-bottom: 30px; font-size: .9rem; text-align: justify; letter-spacing: .05em; }
			.profile_part .pp_img{ max-width: auto;}
			.profile_part .pp_img_01{ width: 70%; padding-left: 0px; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		project_contents
----------------------------------------------------------------------------------------------------------------------------------------- */
.project_contents{  }
		.project_title{ font-size: 1.25rem; }
		.project_img{ gap: 1em; }

/*
-----------------------------------------------------------------------------------------------------------------------------------------
		recruit
----------------------------------------------------------------------------------------------------------------------------------------- */
.recruit .page_toptxt{ padding-bottom: 4em; }


/* contact form 7
-------------------------------------------------------------------------------------------------------------------------------------- */
.contact_form{ padding-top: 2em; max-width: auto; }
	.wpcf7-form .item{ flex-direction: column; gap: .5em; }
		.wpcf7-form .item > div{ width: 100%; margin: 2px 0; }
		.wpcf7-form .item .item_title{ width: 100%; }

	div.wpcf7-response-output{ padding: 6vw !important;  }



/*
-----------------------------------------------------------------------------------------------------------------------------------------
		footer
----------------------------------------------------------------------------------------------------------------------------------------- */	
footer{ padding: 11vw 6vw; }
	.f_contents{ max-width: auto; }
		ul.f_navi{ flex-direction: column; width: 100%; gap: .1em 0; }
			.f_navi li{ width: auto; }
		.f_contents .address{ padding: 2vw 0 6vw; font-size: .85rem; line-height: 1.6em; }
			.f_contents a.map{ padding: 8px 15px; margin-top: 10px; }
		.f_contents .copyright{ font-size: .8rem;}
		.f_contents .f_logo{ width: 20vw; }


/*
-----------------------------------------------------------------------------------------------------------------------------------------
		navi
----------------------------------------------------------------------------------------------------------------------------------------- */	
	#navi .navbar_3line{ top: 1vw; right: 1vw; width: 16vw; height: 16vw; }


.gnavi{}
	.menu_list{ font-size: 1.5rem; letter-spacing: .14em;}
			.gnavi_ul{ gap: .4em; }
			.menu_list .copyright{ font-size: .8rem; letter-spacing: .1em; margin-top: 3em; }

    
}/* end @media */




/* 480↑ - 767↓
----------------------------------------------- */

@media only screen and (min-width: 480px) and (max-width: 767px) {

}/* end @media */

/* 480↓
----------------------------------------------- */

@media only screen and (max-width: 480px) {

}/* end @media */