@charset "utf-8";
/* CSS Document */
/*-------------------------------------------*/
/* min-width: 1500px
/*-------------------------------------------*/
@media screen and (min-width: 1500px) {
/*-------------------------------------------*/
/*	TOP
/*-------------------------------------------*/
/*	#top-about(min-width: 1500px)
/*-------------------------------------------*/
#top-about .about-deco-img {
width: 95%;
max-width: 1500px;
margin: 0 auto;
}
#top-about .about-deco-img img.top-about-img02 {
border-radius: var(--round-main);
}
/*	#top-service(min-width: 1500px)
/*-------------------------------------------*/
/*--top-service-bnr--*/
#top-service .top-service-bnr {
max-width: 90%;
}
}
/*-------------------------------------------*/
/* min-width: 1200px
/*-------------------------------------------*/
@media screen and (min-width: 1200px) {
/*-------------------------------------------*/
/*	innerなど、基本スタイル、サイズ設定(投稿のinnnerはこちらで制御)
/*-------------------------------------------*/
/*--アーカイブ(投稿の1カラムで幅が広すぎる対策)--*/
/*--リストタイプとカードタイプ(TOP以外)--*/
body:not(.home) .posted-list-simple,
body:not(.home) .posted-list-card {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}
/*--シングルページ(投稿の1カラムで幅が広すぎる対策)--*/
.common-single-wrap {
width: 100%;
max-width: 980px;
margin: 0 auto;
}
/*	スタッフ紹介(min-width: 1200px)
/*-------------------------------------------*/
/*	写真あり(#staff-photo-area)
/*-------------------------------------------*/

/* 各要素の名前定義(.staff-p-block-wrap) */
.staff-p-block .staff-lead { grid-area: lead; }
.staff-p-block .staff-name-block { grid-area: name; }
.staff-p-block .staff-img-block { grid-area: img; }
.staff-p-block .staff-profile-block { grid-area: profile; }
.staff-p-block .staff-message-block { grid-area: message; }

/* レイアウト */
.staff-p-block .staff-p-block-inner {
display: grid;
/* 左:テキスト 右:写真 */
grid-template-columns: 1fr 41%; 
grid-template-areas:
"lead    img"
"name    img"
"profile img"
"message message";
gap: 0 5%;
}

/* 偶数番目：カラム幅とエリア配置を入れ替える */
.staff-p-block:nth-of-type(even) .staff-p-block-inner {
/* 左:写真 右:テキスト */
grid-template-columns: 41% 1fr;
grid-template-areas:
"img lead"
"img name"
"img profile"
"message message";
}
.staff-p-block:nth-of-type(odd) .staff-lead,
.staff-p-block:nth-of-type(odd) .staff-name-block,
.staff-p-block:nth-of-type(odd) .staff-profile-block {
    margin-left: 25px;
}
/*偶数時*/
.staff-p-block:nth-of-type(even) .staff-lead,
.staff-p-block:nth-of-type(even) .staff-name-block,
.staff-p-block:nth-of-type(even) .staff-profile-block {
    margin-right: 25px;
}

/*--staff-img-block--*/
.staff-p-block .staff-img-block {
/* 画像は全行を貫通させる */
grid-row: 1 / 5;
position: relative;
z-index: 2;
}
.staff-p-block .staff-img-block img {
margin-bottom: 3rem;
}

/*--staff-profile-block--*/
.staff-p-block .staff-profile-block {
    min-height: 3rem;
}

/*--staff-message-block--*/
.staff-p-block .staff-message-block {
margin-top: 3rem;
background: linear-gradient(to right, rgba(var(--color-blacktrans), 0.05) 0%, rgba(var(--color-blacktrans), 0.05) 50%, transparent 100%);
/* 入れ子で親と同じカラム幅にする */
display: grid;
grid-template-columns: 1fr 41%; 
gap: 0 5%;
min-height: 280px;
}
.staff-p-block:nth-of-type(odd) .staff-message-block p {
padding: calc(var(--space-res) + 15px);
padding-right: 0;
}
/* 偶数番目 */
.staff-p-block:nth-of-type(even) .staff-message-block {
grid-template-columns: 41% 1fr; /* 親と同じカラム幅にする */
background: linear-gradient(to left, rgba(var(--color-blacktrans), 0.05) 0%, rgba(var(--color-blacktrans), 0.05) 50%, transparent 100%);
}
.staff-p-block:nth-of-type(even) .staff-message-block p {
grid-column: 2; /* 広い方のカラムに文字を配置 */
padding: calc(var(--space-res) + 15px);
padding-left: 0;
}

}
/*-------------------------------------------*/
/* min-width: 970px
/*-------------------------------------------*/
@media screen and (min-width: 970px) {
/*-------------------------------------------*/
/*	グローバルナビ(ハンバーガーになる前の設定)
/*-------------------------------------------*/
header nav#main-nav ul {
display: flex;
}
header nav#main-nav ul li {
font-family: var(--font-jp-sub);
font-weight: 400;
font-size: var(--font15);
position: relative; /*z-indexの指定や子要素の基準とするために指定*/
z-index: 1; /*ドロップダウンしたメニューが隠れないように*/
line-height: 1.3em;
letter-spacing: 0.125em;
}
/*標準のnavカラー(写真あり固定ページ)*/
header nav#main-nav ul li a {
display: block; /*要素の幅いっぱいにするために指定*/
position: relative;
color: var(--color-white);
padding: 8px;
transition: initial;
text-decoration: none;
}
/*
header nav#main-nav ul li.current a,
header nav#main-nav ul li a:hover {
color: var(--color-main-text);
}
*/
header nav#main-nav > ul > li > a:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 86%;
height: 2px;
background: rgba(var(--color-whitetrans), 0.8);
transition: all 0.3s;
transform: scale(0, 1);
transform-origin: center top;
border-radius: 5px;
}
header nav#main-nav > ul > li > a:hover:after,
header
nav#main-nav
> ul
> li.current-menu-item:not(.menu-item-type-custom.current-menu-item)
> a:after {
transform: scale(0.3, 1);
}
/*マウスオーバー時等にメニューの色を変更 */
header nav#main-nav ul li a:hover,   /*マウスオーバー時*/
header nav#main-nav ul li.current-menu-item a,     /*現在表示されているページのメニュー*/
header nav#main-nav ul li.current-menu-parent a,  /*現在表示されているページの親のメニュー*/
header nav#main-nav ul li.current-post-ancestor a {
color: rgba(var(--color-whitetrans), 0.8);
}
/*fixed固定メニュー */
.fixed header nav#main-nav ul li a,
.fixed header nav#main-nav ul li.menu-item a:hover {
color: var(--color-main-text);
}
.fixed header nav#main-nav > ul > li.menu-item > a:after {
background: var(--color-main-text);
}
/*パーティクルの場合*/
body.body-post-particles-common header nav#main-nav ul li a {
color: var(--color-main-text);
}
body.body-post-particles-common header nav#main-nav > ul > li > a:after {
background: var(--color-main-text);
}
/*--PCは英語(説明文)を出さない--*/
.menu-description {
display: none;
}

/*--サブメニュー--*/
header nav#main-nav ul li ul.sub-menu {
display: none; /*サブメニューは最初は非表示にしておく*/
font-size: var(--font15);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition:
opacity 0.25s,
visibility 0.25s;
}
header nav#main-nav ul li:hover ul.sub-menu {
display: block; /*マウスオーバー時にサブメニューを表示する*/
position: absolute;
z-index: 1000;
/* border-top: 1px solid #ccc; */
width: 250px;
left: 50%;
transform: translateX(-50%);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
border-radius: var(--round-s);
overflow: hidden;
}
header nav#main-nav ul li ul.sub-menu li {
float: none; /*サブメニューはフロートさせないので解除*/
padding: 0; /*親メニューのパディングを解除*/
font-size: var(--font14);
}
header nav#main-nav ul li ul.sub-menu li a,
.fixed header nav#main-nav ul li.menu-item ul.sub-menu li a {
/* border: 1px solid #eee;  ボーダーの指定 */
border-top: none; /*ボーダートップは重なって太くなるので解除。一番上は ul 要素に指定*/
padding: 13px 1.5rem;
/* background-color: #FFF; */
/* color: #666; */
background-color: rgba(var(--color-blacktrans), 0.7);
color: var(--color-white);
text-align: left;
letter-spacing: 0;
position: relative;
}
header nav#main-nav ul li ul.sub-menu li a:hover,
.fixed header nav#main-nav ul li.menu-item ul.sub-menu li a:hover {
color: var(--color-white);
background-color: rgba(var(--color-maintrans), 0.8);
}
header nav#main-nav ul li ul.sub-menu li a:before {
content: "●";
position: absolute;
left: 1rem;
top: 0.8rem;
font-size: 0.25em;
}
header nav#main-nav ul li ul.sub-menu li:not(:last-of-type) a:after {
content: "";
position: absolute;
width: 90%;
height: 1px;
left: 0;
right: 0;
margin: 0 auto;
bottom: 0;
border-bottom: 1px solid rgba(var(--color-whitetrans), 0.2);
}
/*サブメニューで現在表示されているページのリンクの色を変更する
header nav#main-nav ul li ul.sub-menu li.current-menu-item a,
.fixed header nav#main-nav ul li ul.sub-menu li.current-menu-item a {
display: block;
background-color: var(--color-main); 
}*/

/*----ハンバーガーメニュー---*/
.hamburger-menu {
display: none;
}
/*-------------------------------------------*/
/*	TOP(min-width: 970px)
/*-------------------------------------------*/
/*	採用実績(#top-results)
/*-------------------------------------------*/
#top-results .btn-base {
    padding: 1rem 1.5rem 1rem 1.5rem;
}
#top-results .btn-base-label {
    letter-spacing: 0;
}
/*-------------------------------------------*/
/*	下層(min-width: 970px)
/*-------------------------------------------*/
/*	スタッフ紹介(min-width: 970px)
/*-------------------------------------------*/
#staff-intro .page-lead,
#staff-photo-area .staff-lead .ttl-kakko-hook {
font-size: var(--font26);
}
#staff-nophoto-area .staff-lead .page-lead {
font-size: var(--font20);
}

/*-------------------------------------------*/
/*	投稿設定(min-width: 970px)
/*-------------------------------------------*/
/*	インタビューシングル
/*-------------------------------------------*/
body.single .interview-head .interview-head-text h1.single-ttl {
    font-size: var(--font26);
}
.interview-head-clinfo .interview-head-clinfo-name {
    font-size: var(--font24);
}
}

/*-------------------------------------------*/
/* max-width: 1499px
/*-------------------------------------------*/
@media screen and (max-width: 1499px) {
/*	#top-philosophy(max-width: 1499px)
/*-------------------------------------------*/
#top-philosophy {
padding-bottom: 250px;
}
#top-philosophy .philosophy-deco-img {
left: initial;
right: 5%;
}
/*	#top-service(max-width: 1499px)
/*-------------------------------------------*/
#top-service .service-img-block {
width: 90%;
padding: 0;
}
}

/*-------------------------------------------*/
/* max-width: 1199px
/*-------------------------------------------*/
@media screen and (max-width: 1199px) {
/*-------------------------------------------*/
/*	共通設定
/*-------------------------------------------*/
/*--文字揃え--*/
.text-cl-1199 {
text-align: left !important;
}

/*--表示、非表示--*/
.sp-none-1199 {
display: none;
}
.sp-display-1199 {
display: block;
}
/*-------------------------------------------*/
/*	innerなど、サイズ設定(max-width: 1199px)
/*-------------------------------------------*/
/*--共通inner--*/
.common-inner-setting,
.common-inner,
#page-ttl:before {
width: 90%;
}
/*-------------------------------------------*/
/*	header
/*-------------------------------------------*/
header #header-inner {
width: 95%;
}

/*-------------------------------------------*/
/*	TOP(max-width: 1199px)
/*-------------------------------------------*/
/*	#top-mv(max-width: 1199px)
/*-------------------------------------------*/
#top-mv .mv-text {
left: 5%;
}

/*	#top-about(max-width: 1199px)
/*-------------------------------------------*/
#top-about .about-text-block {
padding: var(--space-main) 0 3rem;
}
#top-about .top-about-bgimg .top-about-bgimg-item {
background-position: 50% center;
}

/*	#top-interview(max-width: 1199px)
/*-------------------------------------------*/
#top-interview .interview-loop-block {
width: 48%;
}
#top-interview .interview-text-block {
width: 52%;
padding: 13.75rem 0 13.75rem 4.25rem;
}
/*	#top-service(max-width: 1199px)
/*-------------------------------------------*/
#top-service .top-service-wrap {
padding-top: var(--space-s);
}
#top-service .service-text-block {
width: calc(100% - 500px);
}
#top-service .diagram > ul > li {
width: 230px;
height: 230px;
}
#top-service .diagram > ul > li:nth-of-type(2) {
margin: -170px -130px 0;
}
#top-service .top-service-bnr ul li a {
padding: 20px;
}
/*-------------------------------------------*/
/*	下層(max-width: 1199px)
/*-------------------------------------------*/
/*--共通--*/
/*--ぱんくずリスト--*/
#breadcrumb .fbc-page .fbc-wrap .fbc-items {
float: none;
padding: 0 !important;
}

/*	会社案内(max-width: 1199px)
/*-------------------------------------------*/
#company-maessage .message-l p {
line-height: 1.8em;
}
/*	スタッフ紹介(max-width: 1199px)
/*-------------------------------------------*/
/*#staff-introduction*/
/*--タイトル周り--*/
#staff-introduction {
margin-top: var(--space-main);
padding-top: var(--space-main);
}
#staff-introduction .staff-ttl-block {
margin-bottom: var(--space-res);
}
#staff-introduction .staff-ttl-block p.sub-eng.ttl-sand-border {
width: fit-content;
padding: 0 1.5em !important;
}
#staff-introduction .staff-ttl-block p.sub-eng.ttl-sand-border:before,
#staff-introduction .staff-ttl-block p.sub-eng.ttl-sand-border:after {
width: 1em !important;
}

/*写真ありのレイアウト*/
#staff-photo-area {
max-width: 900px;
}
.staff-p-block .staff-p-block-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#staff-photo-area .staff-lead,
#staff-photo-area .staff-name-block {
width: 100%;
}
#staff-photo-area .staff-img-block,
#staff-photo-area .staff-profile-block {
width: 50%;
max-width: 350px;
align-self: center;
padding: 0 15px;
}
#staff-photo-area .staff-lead .ttl-kakko-hook {
width: fit-content;
}
#staff-photo-area .staff-name-block {
margin-top: var(--space-ss);
margin-bottom: var(--space-s);
}
#staff-photo-area .staff-message-block {
background: rgba(var(--color-blacktrans), 0.05);
border-radius: var(--round-main);
margin-top: var(--space-s);
padding: var(--space-res);
}
}
/*-------------------------------------------*/
/* max-width: 1024px
/*-------------------------------------------*/
@media screen and (max-width: 1024px) {
  .btn-base-label {
    font-size: 0.875rem;
  }
}

/*-------------------------------------------*/
/* max-width: 969px
/*-------------------------------------------*/
@media screen and (max-width: 969px) {
/*-------------------------------------------*/
/*	共通設定(max-width: 969px)
/*-------------------------------------------*/
/*--文字揃え--*/
.text-cl-969 {
text-align: left !important;
}

/*--表示、非表示--*/
.sp-none-969 {
display: none;
}
.sp-display-969 {
display: block;
}

header {
display: block;
}

header nav ul {
justify-content: center;
}
.page-ttl {
width: 95%;
}
/*-------------------------------------------*/
/*	共通：装飾・レイアウト・デザイン
/*-------------------------------------------*/
/*-------------------------------------------*/
/*	flex設定(max-width: 969px)
/*-------------------------------------------*/
.flex20,
.flex25 {
width: calc(100% / 2);  
}
.flex4-g-main,
.flex5-g-main {
width: calc((100% - var(--gap-main)) / 2);
}
/*	テキストとイメージ(max-width: 969px)
/*-------------------------------------------*/
/*----テキストとイメージ---*/
.text-img-2col-ws,
.text-img-2col-wl,
.text-img-2col-s-ws,
.text-img-2col-s-wl {
width: 100%;
}
.text-img-2col-ws img,
.text-img-2col-wl img,
.text-img-2col-s-ws img,
.text-img-2col-s-wl img {
width: 100%;
max-width: 600px;
margin: 20px auto 0;
display: block;
order: 2;
}
/*----テキストとイメージの左右どちらかをイメージだけで構成し、高さを揃える場合---*/
.text-img-2colfitimg img {
object-fit: initial;
}
/*----テキストとイメージ(alignright)---*/
img.alignright {
float: none;
display: block;
text-align: center;
margin: 0 auto 20px;
}
img.alignright.w35 {
width: 100%;
max-width: 600px;
}
/*-------------------------------------------*/
/*	ハンバーガーメニュー(max-width: 969px)
/*-------------------------------------------*/
header #logo,
header #logo-fixed {
max-width: 150px;
width: calc(100% - 60px);
}
/*--ハンバーガー---*/
#g-nav {
position: fixed;
top: 0px;
right: 0;
z-index: 9999;
padding: 0;
box-sizing: border-box;
}

#g-nav.nav-open {
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}

#g-nav #g-nav-inner {
display: none;
}

#g-nav.nav-open #g-nav-inner {
display: block;
overflow: auto;
position: absolute;
padding: 80px 30px;
margin: 0px;
border-right: 0px solid #e5e5e5;
background-color: rgba(255, 255, 255, 0.9);
background-color: rgba(var(--color-blacktrans), 0.8);
background-color: rgba(var(--color-main-texttrans), 0.9);
float: none;
width: 88vw;
height: 100%;
right: 0;
}
header nav#main-nav ul {
display: block;
}
header nav#main-nav ul li.menu-item {
font-size: var(--font15);
line-height: 1.3em;
}
header nav#main-nav ul#menu-global > li.menu-item {
border-bottom: 1px solid rgba(var(--color-whitetrans), 0.3);
padding: 20px 0;
}
header nav#main-nav ul#menu-global > li.menu-item:first-of-type {
padding: 0 0 20px;
}
header nav#main-nav ul#menu-global > li.menu-item:last-of-type {
border-bottom: none;
}
header nav#main-nav ul li a {
position: relative;
padding: 10px 10px 10px 15px;
display: block;
color: var(--color-white);
text-decoration: none;
}
header nav#main-nav ul li a:before {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-top: 1px solid rgba(var(--color-whitetrans), 0.7);
border-right: 1px solid rgba(var(--color-whitetrans), 0.7);
top: 50%;
left: 0;
transform: translateY(-50%) rotate(45deg);
z-index: 2;
}
/*
header nav#main-nav ul li.current a,
header nav#main-nav ul li a:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" ><path fill="%23858585" d="M3.64,8.95c-.12,0-.25-.05-.34-.15-.18-.19-.17-.49.02-.67l3.28-3.13L3.31,1.87c-.19-.18-.2-.48-.02-.67.18-.19.48-.2.67-.02l3.64,3.48c.09.09.15.21.15.34s-.05.25-.15.34l-3.64,3.48c-.09.09-.21.13-.33.13Z" /></svg>');
background-position: left center;
background-repeat: no-repeat;
background-size: 10px 8px;
}
*/
/*--英語(説明文)--*/
.menu-description {
display: block;
color: var(--color-white);
position: relative;
font-family: var(--font-eng-main);
font-weight: 500;
font-size: var(--font20);
line-height: 1em;
padding-left: 0.75em;
margin-bottom: 13px;
}
.menu-description:before {
content: "";
position: absolute;
width: 0.25em;
height: 0.25em;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: var(--color-main);
border-radius: 50%;
}
/*--お問い合わせ--*/
.contact_btn {
margin-left: 0px;
}
.contact_btn a {
padding: 10px 10px 10px calc(2em + 10px);
width: 100%;
max-width: 300px;
}
/*--ホバー時の設定解除--*/
header nav#main-nav ul li:hover ul.sub-menu {
position: initial;
}
header nav#main-nav ul li ul.sub-menu,
header nav#main-nav ul li:hover ul.sub-menu {
display: block;
box-shadow: none;
width: calc(100% - 1em);
margin-left: auto;
transform: initial;
}
header nav#main-nav ul li ul.sub-menu li a {
background-color: transparent;
padding: 5px 5px 5px 15px;
border: none;
}
header nav#main-nav > ul > li.menu-item > a:after {
content: none;
}
header nav#main-nav ul li ul.sub-menu li a:hover {
background-color: transparent;
}
/*--ハンバーガーメニュー--*/
#g-nav .hamburger-menu {
cursor: pointer;
position: fixed;
z-index: 10000;
right: 20px;
top: 20px;
display: flex;
flex-direction: column;
justify-content: space-around;
height: 30px;
width: 30px;
}

.hamburger-line {
background-color: var(--color-white);
height: 1px;
width: 30px;
transition: 0.3s;
}
/*パーティクルの場合*/
body.body-post-particles-common .hamburger-line {
background-color: var(--color-main-text);
}
/*オープン時のハンバーガー*/
#g-nav.nav-open .hamburger-line {
background-color: var(--color-white);
}
/*追従時のハンバーガー*/
.fixed .hamburger-line {
background-color: var(--color-main-text);
}
#g-nav.nav-open .hamburger-line:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
#g-nav.nav-open .hamburger-line:nth-child(2) {
opacity: 0;
}
#g-nav.nav-open .hamburger-line:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
/*-------------------------------------------*/
/*	共通投稿設定(max-width: 969px)
/*-------------------------------------------*/
/*イメージ付カード式*/
.posted-list-card ul.posted-list li {
padding: 0rem 1rem;
}
/*	インタビューシングル
/*-------------------------------------------*/
.interview-head {
background-color: rgba(var(--color-whitetrans),0.7);
padding: var(--space-res);
border-radius: var(--round-main);
}
.interview-head .interview-head-text,
.interview-head .interview-head-img {
width: 100%;
}
.interview-head .interview-head-text {
background-color: transparent;
margin: 0;
padding: 0;    
}
.interview-head .interview-head-img {
border-radius: var(--round-main);
overflow: hidden;
margin-top: var(--space-s);
}
.interview-main-text {
    font-size: var(--font18);
}

/*-------------------------------------------*/
/*	TOP(max-width: 969px)
/*-------------------------------------------*/
/*	#top-mv(max-width: 969px)
/*-------------------------------------------*/
#mv-posted-block {
width: 90%;
left: 0;
right: 0;
bottom: 40px;
margin: 0 auto;
}

/*	top-about(max-width: 969px)
/*-------------------------------------------*/
#top-about .top-about-bgimg {
display: none;
}
#top-about .top-about-wrap {
width: 90%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#top-about .top-about-wrap .common-inner {
width: 100%;
}
#top-about .about-deco-img {
width: 100%;
}
#top-about .about-text-block {
width: 100%;
}

#top-about .about-deco-img img.top-about-img02,
#top-about .about-deco-img img {
object-fit: cover;
width: 70%;
height: 320px;
border-radius: var(--round-main);
margin-bottom: var(--space-ss);
}
#top-about .about-deco-img img.top-about-img02 {
margin-bottom: 0;
}
/*	私たちの理念:#top-philosophy(max-width: 969px)
/*-------------------------------------------*/
#top-philosophy {
padding-bottom: var(--space-main);
}
#top-philosophy:after {
height: 100%;
}
.philosophy-deco-img {
display: none;
}
#top-philosophy .philosophy-text-block,
#top-philosophy .philosophy-img-block {
width: 100%;
}
#top-philosophy .philosophy-img-block {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#top-philosophy .philosophy-img-block img {
width: 50%;
height: 320px;
}
/*	事業内容:#top-service(max-width: 969px)
/*-------------------------------------------*/
#top-service .service-text-block {
width: 100%;
}
.service-dim-block {
order: 2;
margin: var(--space-ss) auto 0;
}
#top-service .diagram > ul {
padding-top: 0;
}
#top-service .diagram > ul > li:nth-of-type(2) {
margin: 0 10px;
}
#top-service .top-service-bnr {
margin: var(--space-s) auto;
}
#top-service .top-service-bnr ul li a {
padding: 13px 10px 10px 10px;
}
/*	採用実績:#top-results(max-width: 969px)
/*-------------------------------------------*/
#top-results .top-results-wrap {
width: calc(95% + 10px);
}
#top-results .results-text-block,
#top-results .results-loop-block {
width: 100%;
}
#top-results .results-text-block {
padding: 0 10px;
}
#top-results .results-loop-block {
margin-top: var(--space-s);
}

/*	#top-interview(max-width: 969px)
/*-------------------------------------------*/
#top-interview .interview-text-block {
width: 100%;
padding: var(--space-main) 0 var(--space-s);
}
#top-interview .interview-text-block {
order: initial;
}
/*--#top-interview:swipertate--*/
#top-interview .interview-loop-block {
width: 100%;
display: block;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw;
padding-bottom: var(--space-main);
}
#top-interview .interview-loop-block .loop-infinite-tate {
width: 100%;
margin-top: var(--space-ss);
}
#top-interview .interview-loop-block .loop-infinite-tate .swiper {
position: relative !important;
height: auto;
}
/*	#top-blog(max-width: 969px)
/*-------------------------------------------*/
body.home #top-blog .posted-list-card ul.posted-list li {
width: 50%;
}
/*	#top-news(max-width: 969px)
/*-------------------------------------------*/
.posted-list-simple ul.posted-list li .posted-date {
width: fit-content;
font-size: var(--font15);
align-self: center;
margin-right: 0.75rem;
}
.posted-list-simple ul.posted-list li .posted-a-head {
padding: 24px 0 8px 20px;
}
.posted-list-simple ul.posted-list li .posted-a-text {
width: 100%;
padding: 0px 20px 24px 20px;
margin-left: 0;
}
.posted-list-simple ul.posted-list li a .posted-a-text .btn-base-icon-item {
width: 30px;
justify-content: flex-end;
}

/*-------------------------------------------*/
/*	下層(max-width: 969px)
/*-------------------------------------------*/
/*--下層タイトル周り--*/
#page-ttl h1 {
font-size: 1.75em;
}
/*--写真がある場合(文字がホワイト)--*/
#page-ttl {
padding: 180px 0px 130px;
}
/*--写真がない場合--*/
body.body-post-particles-common #page-ttl {
padding: 8.5rem 0px 5rem;
}


/*	会社案内(max-width: 969px)
/*-------------------------------------------*/
#company-info table {
width: 100%;
}
/*	スタッフ紹介(max-width: 969px)
/*-------------------------------------------*/
/*--アニメーション--*/
.staff-intro-block-r.io-active .staff-intro-img01.fadein-item img {
animation-delay: 0.2s;
}
.staff-intro-block-r.io-active .staff-intro-img02.fadein-item img {
animation-delay: 0.4s;
}
/*--#staff-intro--*/
#staff-intro .staff-intro-block-l,
#staff-intro .staff-intro-block-r {
width: 100%;
}
#staff-intro .staff-intro-img01 {
width: 80%;
}
#staff-intro .staff-intro-img01 img {
object-fit: cover;
width: 100%;
height: 320px;
}
/*--写真有無共通--*/
.staff-lead .staff-lead-num {
margin-bottom: var(--space-ss);
margin-right: 0;
width: auto;
}
.staff-lead {
display: block;
}

/*--写真なし--*/
#staff-nophoto-area .staff-nop-block,
#staff-nophoto-area .staff-lead .page-lead {
width: 100%;
}

/*	事業内容(max-width: 969px)
/*-------------------------------------------*/
#business-service .business-contents-intro-l,
#business-service .business-contents-intro-r {
width: 100%;
}
#business-service .business-contents-intro-r {
margin-top: var(--space-s);
}
/*-------------------------------------------*/
/*	footer(max-width: 969px)
/*-------------------------------------------*/
.footer-inner.flex {
display: block;
}
.footer-l,
.footer-r {
width: 100%;
padding-right: 0;
}
.footer-l {
text-align: center;
border-top: 1px solid rgba(var(--color-whitetrans), 0.3);
padding-top: var(--space-s);
}
.footer-r {
margin-top: var(--space-s);
}
.footer-logo-list {
width: 100%;
max-width: 380px;
}
.foot-sns {
padding-right: 0;
}
.footer-sub-list,
.foot-sns ul {
justify-content: center;
}
.footer-r .foot-nav {
width: 33.333%;
}
.footer-r #footer_nav04.foot-nav {
width: 100%;
}
.footer-r #footer_nav04.foot-nav ul {
display: flex;
flex-wrap: wrap;
}
.footer-r #footer_nav04.foot-nav ul li {
width: 33.333%;
padding: 5px;
}
.footer-bottom {
margin-top: 30px;
}
.footer-bottom .footer-bottom-nav {
margin-bottom: 20px;
padding-right: 0;
}
}

/*-- END (max-width: 969px)--*/
/*-------------------------------------------*/
/* max-width: 769px
/*-------------------------------------------*/
@media screen and (max-width: 769px) {
/*-------------------------------------------*/
/*	共通設定
/*-------------------------------------------*/
/*--文字揃え--*/
.text-cl-769 {
text-align: left !important;
}

/*--表示、非表示--*/
.sp-none-769 {
display: none;
}

.sp-display-769 {
display: block;
}
/*--ボタン--*/
.btn-base {
-webkit-column-gap: 1rem;
-moz-column-gap: 1rem;
column-gap: 1rem;
width: 100%;
min-width: initial;
padding: 0.875rem 1.5rem 0.875rem 2rem;
}
/*矢印*/
.btn-base-icon {
height: 1.125rem;
padding-left: 1rem;
}
.svg-arrow-left,
.svg-arrow-right {
width: 0.8125rem;
height: 0.3125rem;
}
.svg-arrow-up,
.svg-arrow-down {
width: 0.3125rem;
height: 0.8125rem;
}
/*-------------------------------------------*/
/*	flex設定(max-width: 769px)
/*-------------------------------------------*/
.flex50,
.flex33 {
width: 100%;  
}
.flex2-g-main,
.flex3-g-main {
width: 100%;
}
/*-------------------------------------------*/
/*	TOP
/*-------------------------------------------*/
/*	#top-mv(max-width: 769px)
/*-------------------------------------------*/
.mv-looptext-container {
display: none;
}

/*	事業内容:#top-service(max-width: 769px)
/*-------------------------------------------*/
#top-service .diagram > ul {
padding-top: 180px;
}
#top-service .diagram > ul > li:nth-of-type(2) {
margin: -170px -130px 0;
}

/*-------------------------------------------*/
/*	下層
/*-------------------------------------------*/
/*	スタッフ紹介(max-width: 769px)
/*-------------------------------------------*/
/*--写真あり--*/
#staff-photo-area .staff-lead .staff-lead-num strong {
font-size: 3rem;
}
#staff-photo-area .staff-img-block,
#staff-photo-area .staff-profile-block {
width: 100%;
max-width: 350px;
align-self: initial;
padding: 0;
}
#staff-photo-area .staff-profile-block {
margin: var(--space-s) auto 0;
}

/*	会社案内(max-width: 769px)
/*-------------------------------------------*/
#company-maessage .message-l,
#company-maessage .message-r,
#company-maessage .prof01,
#company-maessage .prof02 {
width: 100%;
}
#company-maessage .message-l {
order: 2;
}
#company-maessage .message-r {
text-align: center;
margin-bottom: 30px;
}
img.company-president {
width: 100%;
max-width: 400px;
margin: 0 auto;
display: block;
}
#company-maessage .prof {
padding: 50px 5px;
}
#company-maessage .prof01 {
padding: 0;
margin-bottom: 30px;
}
/*-------------------------------------------*/
/*	共通投稿設定(max-width: 769px)
/*-------------------------------------------*/
/*	採用実績アーカイブ&シングル
/*-------------------------------------------*/
.result-sns-btn a {
    width: 100%;
}
.result-sns-btn a span {
    display: block;
    margin: 0 auto 8px;
}
/*	インタビューシングル
/*-------------------------------------------*/
.interview-message-l,
.interview-message-r {
    width: 100%;
}
.interview-message-r {
    border: none;
    border-top: 1px solid rgba(var(--color-blacktrans), 0.3);
    padding-left: 0;
padding-top: var(--space-ss);
}
/*-------------------------------------------*/
/*	#common-contact(CTA)(max-width: 769px)
/*-------------------------------------------*/
#common-contact .common-contact-l,
#common-contact .common-contact-r {
width: 100%;
}
#common-contact .common-contact-r {
margin-top: var(--space-s);
}

/*-------------------------------------------*/
/*	#common-bnr(max-width: 769px)
/*-------------------------------------------*/
#common-bnr #common-bnr-top ul li {
width: 100%;
}
#common-bnr #common-bnr-top ul li a {
padding: 35px 20px 45px;
}
#common-bnr #common-bnr-btm ul li {
width: 50%;
}

/*-------------------------------------------*/
/*	footer
/*-------------------------------------------*/
.footer-r #footer_nav04.foot-nav ul li {
width: 50%;
}
}

/*-------------------------------------------*/
/* max-width: 660px
/*-------------------------------------------*/
@media screen and (max-width: 660px) {
body {
font-size: 15px;
}
h2 {
font-size: 20px;
}
body.single h1.single-ttl {
font-size: 19px;
padding: 20px 5px;
}
/*-------------------------------------------*/
/*	共通設定(max660)
/*-------------------------------------------*/
/*--文字揃え--*/
.text-cl-660 {
text-align: left !important;
}

/*--表示、非表示--*/
.sp-none-660 {
display: none;
}

.sp-display-660 {
display: block;
}
/* サイズ */
#content {
padding: 30px 0 60px;
}
/*-------------------------------------------*/
/*	flex設定(max-width: 660px)
/*-------------------------------------------*/
.flex25,
.flex20 {
width: 100%;
}
.flex4-g-main,
.flex5-g-main {
    width: 100%;
}
/*-------------------------------------------*/
/*	innerなど、サイズ設定(max-width: 660px)
/*-------------------------------------------*/
#page-ttl:before {
width: 95%;
}
/*	共通投稿設定
/*-------------------------------------------*/
/*イメージ付カード式*/
.posted-list-card ul.posted-list li {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.posted-list-card ul.posted-list li:last-of-type {
margin-bottom: 0;
}
.posted-content {
margin: 2em 0;
}
.posted-list-simple ul.posted-list li .posted-ttl {
width: 100%;
}
/*	ブログアーカイブ
/*-------------------------------------------*/
#blog-cat-list ul li {
  padding: 3px; 
}

/*-------------------------------------------*/
/*	TOP(max660)
/*-------------------------------------------*/
body.home .copy-main {
font-size: var(--font20);
}

/*	私たちについて:#top-about(max-width: 660px)
/*-------------------------------------------*/
#top-about .about-deco-img img.top-about-img02,
#top-about .about-deco-img img {
height: 220px;
}
/*	私たちの理念:#top-philosophy(max-width: 660px)
/*-------------------------------------------*/
#top-philosophy .philosophy-img-block {
justify-content: flex-end;
border-radius: 0;
}
#top-philosophy .philosophy-img-block img {
width: calc(50% - 10px);
height: 240px;
border-radius: var(--round-main);
}
#top-philosophy .philosophy-img-block img.top-philosophy-img02 {
margin-top: 2.5rem;
margin-left: 10px;
}
/*	事業内容:#top-service(max-width: 660px)
/*-------------------------------------------*/
#top-service .service-img-block .service-img-block-wrap {
border-radius: var(--round-main);
}
#top-service .service-img-block img {
width: 100%;
}
#top-service .top-service-bnr ul li {
width: 100%;
padding: var(--space-ss) 0;
}

/*--news--*/
.posted-list-simple ul.posted-list li a .posted-a-wrap {
display: block;
background-position: right center;
}
/*-------------------------------------------*/
/*	下層(max660)
/*-------------------------------------------*/
#page-ttl h1 {
font-size: 1.55em;
line-height: 1.4em;
}
/*	固定ページ共通ナビ(ページリンク部分)
/*-------------------------------------------*/
.page-nav ul li.flex33 {
width: calc(100% / 3);
}

/*--サイトマップ--*/
.sitemap-l,
.sitemap-r {
width: 100%;
}

/*--共通--*/
.pager ul li {
font-size: 13px;
}
/*	会社案内(max-width: 660px)
/*-------------------------------------------*/
img.company-president {
max-width: 280px;
}
#company-info table tr th,
#company-info table tr td {
display: block;
padding: 30px 5px;
}
#company-info table tr th {
text-align: left;
border-bottom: 1px dashed rgba(var(--color-blacktrans), 0.1);
padding: 20px 5px;
}
/*	スタッフ紹介(max-width: 660px)
/*-------------------------------------------*/
#staff-intro .staff-intro-img01 img {
height: 220px;
}
#staff-intro .staff-intro-img02 {
margin-top: var(--space-ss);
}

/*#staff-introduction*/
/*--タイトル周り--*/
#staff-introduction .staff-ttl-block p.sub-eng.ttl-sand-border {
font-size: var(--font28);
}

/*--写真有無共通--*/
.staff-p-block,
.staff-nop-block {
margin-bottom: var(--space-s);
}

/*--写真あり--*/
#staff-photo-area .staff-img-block,
#staff-photo-area .staff-profile-block {
max-width: 280px;
}

/*--写真なし--*/
#staff-nophoto-area .staff-nop-block {
padding: 24px 10px 10px 24px;
}

/*	事業内容(max-width: 660px)
/*-------------------------------------------*/
#page-business .business-head-l {
width: 100%;
}
#page-business .business-head-r {
width: 90%;
margin-left: auto;
padding-top: 0.5rem;
}
#page-business .business-head-img.business-head-r-img01 {
width: 40%;
}
#page-business .business-head-img.business-head-r-img02 {
width: 50%;
margin-top: -100px;
}
/*-------------------------------------------*/
/*	page-top(max660)
/*-------------------------------------------*/
#page-top {
bottom: 15px;
right: 15px;
}
/*-------------------------------------------*/
/*	#common-bnr(CTA)(max-width: 660px)
/*-------------------------------------------*/
#common-bnr #common-bnr-btm ul li {
width: 100%;
}
/*-------------------------------------------*/
/*	footer(max660)
/*-------------------------------------------*/
.footer-r .foot-nav {
width: 100%;
padding-top: var(--space-s);
padding-bottom: calc(var(--space-s) - 10px);
border-top: 1px solid rgba(var(--color-whitetrans), 0.3);
}
.footer-r .foot-nav .footer-sub-eng {
width: 100%;
}
/*--foot-nav(CONTENTS)--*/
#footer_nav03-ul {
display: flex;
flex-wrap: wrap;
}
.footer-r .foot-nav-ul ul.sub-menu {
display: flex;
flex-wrap: wrap;
}
.footer-r .foot-nav-ul ul.sub-menu li {
padding: 5px;
}
.footer-bottom {
padding: 20px 0 10px;
}
.footer-bottom .footer-bottom-nav ul {
display: block;
}
.footer-bottom .footer-bottom-nav ul li {
padding: 0 0 5px;
}
}

/*-- END (max-width: 660px)--*/
/*-------------------------------------------*/
/* max-width: 480px
/*-------------------------------------------*/
@media screen and (max-width: 480px) {
/*-------------------------------------------*/
/*	共通設定
/*-------------------------------------------*/
/*--文字揃え--*/
.text-cl-480 {
text-align: left !important;
}

/*--表示、非表示--*/
.sp-none-480 {
display: none;
}

.sp-display-480 {
display: block;
}

/*-------------------------------------------*/
/*	TOP(max-width: 480px)
/*-------------------------------------------*/
/*	私たちについて:#top-about(max-width: 660px)
/*-------------------------------------------*/
#top-about .about-deco-img img.top-about-img02,
#top-about .about-deco-img img {
height: 180px;
}
/*	事業内容:#top-service(max-width: 480px)
/*-------------------------------------------*/
#top-service .diagram > ul {
padding-top: 140px;
}
#top-service .diagram > ul > li {
width: 180px;
height: 180px;
padding: 0px 10px;
}
#top-service .diagram > ul > li:nth-of-type(2) {
margin: -140px -100px 0;
}
#top-service .diagram > ul > li h3 {
font-size: var(--font18);
}

/*	#top-blog(max-width: 480px)
/*-------------------------------------------*/
body.home #top-blog .posted-list-card ul.posted-list li {
width: 100%;
}

/*-------------------------------------------*/
/*	下層(max480)
/*-------------------------------------------*/
/*-------------------------------------------*/
/*	footer(max480)
/*-------------------------------------------*/
/*--foot-nav(LINKS)--*/
.footer-r #footer_nav04.foot-nav ul li {
width: 100%;
max-width: 300px;
margin: 0 auto;
}

/*	事業内容(max480)
/*-------------------------------------------*/
/*--アニメーション無効に--*/
#business-service .io-active .img-cover-slide,
#business-service .io-active .bg-cover-slide,
#business-service .cover-slide.io-active::after {
animation: none;
content: none;
}

/*-------------------------------------------*/
/*	ページネーション
/*-------------------------------------------*/
/*	archiveページネーション
/*-------------------------------------------*/
.nav-links a.prev,
.nav-links a.next {
    width: 13px;
}
.nav-links span:not(.my-arrow-left, .my-arrow-right),
.nav-links a:not(.next, .prev) {
margin: 0 1px;
}

}

/*-- END (max-width: 480px)--*/
/*-------------------------------------------*/
/* max-width: 370px
/*-------------------------------------------*/
@media screen and (max-width: 370px) {
/*-------------------------------------------*/
/*	共通設定
/*-------------------------------------------*/
/*--文字揃え--*/
.text-cl-370 {
text-align: left !important;
}

/*--表示、非表示--*/
.sp-none-370 {
display: none;
}

.sp-display-370 {
display: block;
}
/*-------------------------------------------*/
/*	見出しスタイル
/*-------------------------------------------*/
/*--ttl-sand-border--*/

.ttl-sand-border {
border-bottom: 1px solid;
padding-bottom: 15px;
}
.ttl-sand-border:before,
.ttl-sand-border:after {
content: none;
}

/*-------------------------------------------*/
/*	下層
/*-------------------------------------------*/
/*	スタッフ紹介
/*-------------------------------------------*/
/*#staff-introduction*/
/*--タイトル周り--*/
#staff-introduction .staff-ttl-block p.sub-eng.ttl-sand-border {
padding: 0 1.5em 10px !important;
}
/*-------------------------------------------*/
/*	ページネーション
/*-------------------------------------------*/
/*	archiveページネーション
/*-------------------------------------------*/
.nav-links span:not(.my-arrow-left, .my-arrow-right),
.nav-links a:not(.next, .prev) {
width: fit-content;
height: auto;
line-height: initial;
padding: 7px;
margin: 0 1px;
border-radius: 6px;
}
}

/* 画面の高さが低い（スマホ横向きなど）時の上書き */
@media screen and (max-height: 550px) and (max-width: 960px) {
  #top-mv .mv-media {
    height: auto;      /* 高さを固定しない */
    min-height: 100dvh; /* 最低でも画面分は確保しつつ、溢れたら伸びる */
  }
}