:root {
  --primary-color: #D7776E;
  --secondary-color:#F0EFEF;
  --header-h: 80px;
  --sticky-top: 100px;
  --fs-24-20: clamp(1.25rem, 1.1245rem + 0.4292vw, 1.5rem);
  --fs-20-16: clamp(1rem, 0.6953rem + 0.6339vw, 1.25rem);
  --fs-60-40: clamp(2.5rem, 1.8723rem + 2.1459vw, 3.75rem);
}

@media screen and (max-width: 768px) {
:root{ --header-h: 60px; }
}

html{scroll-behavior: smooth; scroll-padding-top: var(--sticky-top); scrollbar-gutter: stable;}

body{font-family: 'Noto Sans JP', sans-serif;font-size: clamp(0.8125rem, 0.584rem + 0.4754vw, 1rem);/*16/13 */font-weight:400; line-height:1.7; color:#1A1A1A; overflow-x: hidden; letter-spacing:0.05em; }

.global_inner{max-width:1300px; margin:0 auto; position:relative;padding: 0 20px;}
img{max-width:100%; height:auto;}
a {transition:0.4s all;}

.box{display:flex;justify-content: space-between; }
h1,h2,h3,h4,h5{font-weight:500; letter-spacing:0px;}
h2{font-size:16px;line-height: 1.5;}
h2 span{font-size: clamp(1.125rem, 0.668rem + 0.9509vw, 1.5rem);/*24/18*/font-family: "Roboto", sans-serif; display:block;}

.flex_between{display:flex;justify-content: space-between;}
.flex_between .contents{width:70%;}

.anchor{ margin-bottom:130px;}
.anchor ul{display:flex;column-gap: 20px;}
.anchor ul li{ position:relative; overflow:hidden; color:#FFF; background:#1A1A1A; border-radius:6px; margin-bottom:25px; width:100%; }
.anchor ul li::before{ content:""; position:absolute; inset:0; background:url('../../assets/image/top_company_link_hover.png') no-repeat center center; background-size:cover; opacity:0; transition:opacity 0.3s ease; z-index:0; }
.anchor ul li a{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; color:#FFF; padding:25px 30px;  }

.anchor ul li img{ transition: transform 0.3s ease; width:17px; }


@media screen and (max-width: 768px) {
.anchor{ margin-bottom:50px;}
.anchor ul{column-gap:10px;}
.anchor ul li{ margin-bottom:0px;}
.anchor ul li a{padding:15px;font-size:13px;}
.anchor ul li img{width:10px;}
}


@media screen and (max-width: 768px) {
body{font-size:15px;line-height:1.5; letter-spacing:1px; overflow-wrap: anywhere;}
.box{flex-direction:column;}
.flex_between{flex-direction:column;}
.flex_between .contents{width:100%;}
.heading_side{width:100%;}
}












header{position: fixed;top: 0px; left: 50%; transform: translateX(-50%); width: 100%; padding-left:1%; padding-right:1%; z-index:3; display:flex;align-items: center;justify-content: space-between;height:var(--header-h); background:#FFF; padding-top:0px; }
header img{transition: opacity 0.3s ease;}

header #navArea .inner{width:100%;}
nav{display:flex;justify-content: space-between;align-items: center;margin-left:0px; margin-right:0px;}
header .logo{margin-left:0px;}
header .logo a{display:flex;align-items: center;}
header .logo img{width:190px; height:auto;}
header ul.btn-menu{display:none;}

nav ul{display:flex;align-items: center;flex-wrap: wrap;}
nav ul li{font-size:14px;position: relative;}
nav ul li a{color:#222;  padding-right:15px; padding-left:15px;transition:0.5s all; }

header ul.sub-menu{display:flex;align-items: center; flex-wrap: nowrap;}
header ul.sub-menu li a{display:block; margin-left:0px;}
header ul.sub-menu li a img{height:auto; width:39px;}

header ul.sub-menu li.entry{  width: 150px;
  height: 52px; margin-left:20px;
}
header ul.sub-menu li.entry a{
  display:block;
  position: relative;
}
header ul.sub-menu li.entry a img{
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  transition: opacity 0.3s ease;
}



@media screen and (max-width: 1350px) {
nav ul li a{ padding-right:10px; padding-left:10px; }
}

@media screen and (max-width: 1300px) {
header .logo img{width:160px; }
}

@media screen and (max-width: 1250px) {
header ul.sub-menu li a img{height:auto; width:35px;}
header ul.sub-menu li.entry a img{width:130px;}
}


/*====================
グローバルナビ：ドロップダウン
=====================*/
@media screen and (min-width: 769px) {
nav ul.menu > li.has-child{display:flex; align-items:center; height:var(--header-h);}
nav ul.menu .dropdown{display:block; position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:220px; background:#FFF; box-shadow:0 5px 15px rgba(0,0,0,0.1); padding:10px 0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.3s, visibility 0.3s; z-index:4;}
nav ul.menu .dropdown li{width:100%; font-size:14px;}
nav ul.menu .dropdown li a{display:block; padding:10px 20px; white-space:nowrap; color:#222;}
nav ul.menu > li.has-child:hover .dropdown, nav ul.menu > li.has-child:focus-within .dropdown{opacity:1; visibility:visible; pointer-events:auto;}
}


/*====================
ハンバーガーメニュー
=====================*/
@media screen and (max-width: 768px) {
header{height:var(--header-h); position:fixed;left: unset;right: 0;width: 100%;transform: unset;top: 0px; z-index:3;display:flex;align-items: center;justify-content: space-between; padding:0px 10px; border-radius:0px;}
nav {display:block; position:fixed; top:0; right:-220px; bottom:0; width:220px; background:var(--secondary-color); -webkit-overflow-scrolling:touch; transition:all 0.5s; z-index:102; opacity:0; margin-left:0px; margin-right:0px;}
.open nav {right:0; opacity:1; top:0px; width:100%; padding-top:60px; overflow-y:auto; color:#FFF; box-shadow:0px 0px 10px 5px rgba(0, 0, 0, 0.08);}
nav ul li:after{content:none;}
nav ul li a{color:#000; font-size:20px;}
header .logo{margin-left:10px;}
header .logo img{width:auto; height:40px;}
header ul.btn-menu{	display: flex;	flex-direction: row;padding: 0px;margin: 0px;position:absolute;right:70px;}
header ul.btn-menu img{width:110px;}
header ul.btn-menu li{	margin:0 5px 0 0;padding: 0px;}

header ul{padding-right:0%; padding-top:0px;font-size:24px;flex-direction: column;}
header ul.menu li{text-align:center; margin-bottom:20px; }

nav ul.menu .dropdown{display:block; position:static; opacity:1; visibility:visible; transform:none; background:none; box-shadow:none; padding:10px 0 0; min-width:0;}
nav ul.menu .dropdown li{margin-bottom:10px;}
nav ul.menu .dropdown li a{font-size:16px;}

header ul.sub-menu{ background:rgba(255, 255, 255, 0.7); width:80%; margin:20px 0; margin-left:auto; margin-right:auto; padding:20px 0; }
header ul.sub-menu li a{display:block; color:#1A1A1A; padding:10px 20px; text-align:center;}






/*============
ハンバーガーメニューのトグル
=============*/
#toggle_btn {display: block;position: fixed;top:0px; right:0px;width: 55px;height: 55px;transition: all .5s;cursor: pointer;z-index: 103; background:var(--secondary-color);}
#toggle_btn p{font-size:12px;}
#toggle_btn span {display: block;position: absolute;left: 15px;width: 25px;height: 2px;background-color: #000;border-radius: 2px;transition: all .5s;}
#toggle_btn span:nth-child(1) {top: 18px;}
#toggle_btn span:nth-child(2) {top: 26px; }
#toggle_btn span:nth-child(3) {top: 34px;}
.open #toggle_btn span {background-color: #000;}
.open #toggle_btn span:nth-child(1) {transform: translateY(8px) rotate(-315deg);}
.open #toggle_btn span:nth-child(2) {opacity: 0;}
.open #toggle_btn span:nth-child(3) {transform: translateY(-8px) rotate(315deg);}

}


/*========================
キービジュアル
=========================*/
.kv{max-width:1300px; margin-left:auto; margin-right:auto; margin-top:150px; padding-left:50px; padding-right:50px;}
.kv .box .photo{width:75%;}
.kv .copy{ width:25%; writing-mode: vertical-rl;  text-orientation: mixed; font-weight:600;font-size: clamp(1.25rem, 0.4883rem + 1.5848vw, 1.875rem);/*30/20*/ margin-top:-30px;    display: flex;
    align-items: center;
}

@media screen and (max-width: 768px) {
.kv{margin-top:130px; padding-left:20px; padding-right:20px;}
.kv .box{flex-direction: row;}
}


/*========================
トップ：イントロダクション
=========================*/
.top_introduction{margin-top:100px;}
.top_introduction .box{ display:grid; grid-template-columns:65fr 35fr; grid-template-rows:1fr 1fr; gap:10px; height:580px; grid-template-areas:"video photo" "video link"; }
.top_introduction .box .video{ grid-area:video; }
.top_introduction .box .photo{ grid-area:photo; height:100%; }
.top_introduction .box .link{ grid-area:link; height:100%; position:relative; overflow:hidden; }
.top_introduction .box video,
.top_introduction .box img{ width:100%; height:100%; object-fit:cover; display:block; }


@media screen and (max-width: 768px) {
.top_introduction{margin-top:50px;}
.top_introduction .box{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; height:auto; grid-template-areas:"video video" "photo link"; }
.top_introduction .box .video{ aspect-ratio:16/9; height:auto; }
.top_introduction .box .photo,
.top_introduction .box .link{ height:auto; aspect-ratio:1/1; }
}






/*========================
トップ：会社を知る ／ 働く環境を知る
=========================*/
.top_company, .top_environment{ margin-top:10px; height:576px; padding-left:45px;}
.top_company .box, .top_environment .box{align-items: center;}
.top_company .text_area, .top_environment .text_area{width:380px;font-size:16px;}
.top_company .text_area ul, .top_environment .text_area ul{margin-top:60px;}
.top_company .text_area ul li, .top_environment .text_area ul li{ position:relative; overflow:hidden; color:#FFF; background:#1A1A1A; border-radius:6px; margin-bottom:25px; }
.top_company .text_area ul li::before, .top_environment .text_area ul li::before{ content:""; position:absolute; inset:0; background:url('../../assets/image/top_company_link_hover.png') no-repeat center center; background-size:cover; opacity:0; transition:opacity 0.3s ease; z-index:0; }
.top_company .text_area ul li a, .top_environment .text_area ul li a{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; color:#FFF; padding:28px; }
.top_company .text_area ul li img, .top_environment .text_area ul li img{ transition: transform 0.3s ease; width:23px; }
.top_company .photo, .top_environment .photo{width:calc(100% - 420px); height:576px;}
.top_company .photo img, .top_environment .photo img{width:100%; height:100%; object-fit:cover;}

@media screen and (max-width: 768px) {
.top_company, .top_environment{height:auto;}
.top_company{padding-left:0px; padding-right:0px; margin-top:50px;}
.top_environment{padding:30px 0; margin-top:0;}
.top_company .text_area, .top_environment .text_area{width:100%;}
.top_company .text_area ul, .top_environment .text_area ul{margin-top:20px;}
.top_company .text_area ul li, .top_environment .text_area ul li{margin-bottom:20px;}
.top_company .text_area ul li a, .top_environment .text_area ul li a{padding:20px;}
.top_company .photo, .top_environment .photo{width:100%; height:auto; margin-top:30px; aspect-ratio:4/3;}
}


/*========================
人物カード（トップ：人を知る ／ 人を知る 共通）
=========================*/
.top_people .swiper-slide, .people .item{position:relative;}
.top_people .swiper-slide .text_area, .people .item .text_area{padding:23px;}
.top_people .swiper-slide .text_area .name, .people .item .text_area .name{font-size:20px;}
.top_people .swiper-slide .text_area .dept, .people .item .text_area .dept{font-size:13px; line-height:1.6;}
.top_people .swiper-slide .play, .people .item .play{position:absolute; right:15px; bottom:15px; width:54px; height:25px;}
.top_people .swiper-slide .play img, .people .item .play img{transition: opacity 0.4s ease;}
.top_people .swiper-slide .photo, .people .item .photo{ overflow:hidden; }
.top_people .swiper-slide .photo img, .people .item .photo img{ transition: transform 0.4s ease; }
.top_people .interview .swiper-slide .play .arrow, .people .interview .item .play .arrow{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition: transform 0.3s ease; z-index:1; }
.top_people .interview .swiper-slide .play .arrow img, .people .interview .item .play .arrow img, .people .interview_detail .item .play .arrow img{ position:static; width:16px; height:auto; display:block; }


/*========================
トップ：人を知る
=========================*/
.top_people{background:var(--secondary-color); margin-top:10px;}
.top_people .inner{padding:80px 0 80px 45px;}
.top_people .heading{display:flex;align-items: center;}
.top_people .heading .text{margin-left:30px;}
.top_people .heading .more{margin-left:auto;}
.top_people h3{margin-top:60px; font-size:24px;}

@media screen and (max-width: 768px) {
.top_people .inner{padding:50px 0;}
.top_people .heading{flex-direction: column;    align-items: flex-start;}
.top_people .heading .text{margin-left:0; margin-top:30px;}
.top_people .heading .more{ margin-top:30px;}
}


/*========================
トップ：成長の軌跡
=========================*/
.top_growth {background:var(--secondary-color); margin-top:10px; height:520px;}
.top_growth .inner{padding:0px 0 0px 45px;}
.top_growth .text_area{width:40%; min-width:450px; padding-top:60px;}
.top_growth .text_area .copy{  font-size:32px;  font-weight:700;  line-height:1.4;  margin-top:60px;}
.top_growth .text_area .text{margin-top:30px;}
.top_growth .photo{position:relative; padding:10px 0 10px 0;height:520px;}
.top_growth .photo img{ cursor: pointer;width:100%; height:100%; object-fit:cover; }
.top_growth .photo img.scope{position:absolute; bottom:25px; right:25px; width:34px; height:auto;z-index:2;}

.img-modal{ position:fixed; top:0; left:0; width:100%; height:100%; display:none; z-index:9999; align-items:center; justify-content:center; }
.img-modal.is-active{ display:flex; }
.img-modal-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); }
.img-modal-inner{ position:relative; max-width:90%; max-height:90%; z-index:1; }
.img-modal-photo{ display:block; max-width:100%; max-height:90vh; }
.img-modal-close{ position:absolute; top:40px; right:40px; background:none; border:none; color:#000; font-size:32px; line-height:1; cursor:pointer; }


@media screen and (max-width: 768px) {
.top_growth{height:auto;}
.top_growth .inner{padding-left:0px; padding-right:0px;}
.top_growth .text_area{width:100%; min-width:unset; padding-top:30px;}
.top_growth .text_area .copy{margin-top:30px; font-size:26px;}
.top_growth .photo{height:auto; aspect-ratio:4/3; margin-top:20px;}
.top_growth .photo img{ width:auto; height:auto;}
.img-modal-close{top:20px; right:20px;}
}


/*========================
トップ：フット
=========================*/
.top_foot {margin-top:10px;}
.top_foot .links .item{width:49.5%; height:280px;}
.top_foot .copy{max-width:880px; margin-left:auto; margin-right:auto; margin-top:110px;}
.top_foot .text{font-size:24px; font-weight:700; margin-top:55px; text-align:center;}
.top_foot .entry{width:360px;margin:60px auto 0 auto; height:120px;}
.top_foot .entry a img{width:360px;}

@media screen and (max-width: 768px) {
.top_foot .copy{margin-top:50px;}
.top_foot .text{font-size:20px; margin-top:30px;}
.top_foot .entry{margin-top:30px; width:300px;}
.top_foot .entry a img{ width:300px;}
.top_foot .links .item{width:100%; height:150px; margin-bottom:15px;}
}

/*========================
下層：ヘッダー
=========================*/
.head{ position:relative; height:516px; margin-top:70px; color:#FFF; margin-bottom:130px;  }
.head .photo{ position:absolute; left:0; top:0px; width:100%; height:516px; z-index:-1; }
.head .photo img{ width:100%; height:100%; object-fit:cover; }
.head h1{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); text-align:center; font-size:24px; width:100%; max-width:810px; }
.head h1 span{margin-bottom:24px;display: block;}
.head h1 span img{height:86px;width:auto;}
.head .text{position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width:100%; max-width:800px; text-align:center; }

.head.small{height:100px; margin-bottom:0px;}

.head.recruitment{height:225px; min-height:unset; margin-bottom:0px;background:var(--secondary-color); color:#000;}
.head.recruitment h1{font-size:36px; font-weight:700;}


@media screen and (max-width: 768px) {
.head{height:auto; min-height:300px; padding:60px 20px; margin-bottom:50px;display: flex;flex-direction: column;justify-content: center;}
.head h1{position:static; top:auto; left:auto; transform:none; max-width:none; font-size:20px;}
.head h1 span img{height:35px; width:auto; max-width:100%;}
.head .text{position:static; bottom:auto; left:auto; transform:none; max-width:none; margin-top:20px;}
.head.small{height:auto; padding:0px; min-height:50px;}
.head .photo{height:300px;}
.head.recruitment{height:200px; margin-bottom:0px;background:var(--secondary-color); color:#000;}
}

/*========================
下層：共通
=========================*/
.heading_side{width:25%;position:sticky; top:var(--sticky-top);align-self:flex-start;}
.heading_side h2{ font-size:32px; font-weight:700;}
.heading_side h2 span{display:block;color:var(--primary-color); font-weight:500;}
.heading_side .text{margin-top:40px;}

@media screen and (max-width: 768px) {
.heading_side{width:100%; margin-bottom:30px;position:static;}
}
/*========================
下層：採用メッセージ
=========================*/
.message .box{align-items:flex-start; padding-left:40px; padding-right:20px;}
.message .copy{font-size:42px; font-weight:700;width:50%; position:sticky; top:var(--sticky-top);}
.message .copy.is-fixed{ position:fixed !important; margin-top:0; z-index:2; }
.message .item{width:50%; font-size: var(--fs-20-16);margin-left:auto;}

.message .item .promise{ min-height:1280px; }
.message .item .promise .photo{ position:sticky; margin-top:50px; }
.message .item .promise .photo:nth-of-type(1){ top:var(--sticky-top); }
.message .item .promise .photo:nth-of-type(2){ top:calc(var(--sticky-top) + 50px); }
.message .item .promise .photo:nth-of-type(3){ top:calc(var(--sticky-top) + 100px); }
.message .item .promise .photo.is-fixed{ position:fixed !important; margin-top:0; z-index:2; }

.message .chairman_message{position: relative;    z-index: 2;}
.message .chairman_message a{background:var(--secondary-color);display:flex;align-items: center;justify-content: space-between; padding:0 70px; height:260px; max-width:1300px; margin-left:auto; margin-right:auto;transition:0.4s all;}
.message .chairman_message a .title{font-size: clamp(1.5625rem, 1.1817rem + 0.7924vw, 1.875rem);/*30/25*/ font-weight:700;}

@media screen and (max-width: 768px) {
.message .box{ padding:0;}
.message .copy{width:100%; font-size:36px; background-color:#FFF; }
.message .item{width:100%; margin-top:50px;}
.message .copy.is-fixed{ background-image:url("../../assets/image/bg.jpg"), linear-gradient(#FFF, #FFF); background-size:cover, cover; background-position:center top, center top; background-clip:text, border-box; -webkit-background-clip:text, border-box; padding:20px 0;top: 60px;}

.message .item .promise .photo{margin-top:30px;}
.message .item .promise .photo:nth-of-type(1){ top:250px; }
.message .item .promise .photo:nth-of-type(2){ top:300px; }
.message .item .promise .photo:nth-of-type(3){ top:350px; }
.message .chairman_message h2{text-align:center;}
.message .chairman_message a{flex-direction: column; padding:30px;height: auto;}
.message .chairman_message a .title{margin-top:20px; margin-bottom:20px;}

}



/*========================
下層：取締役会長メッセージ
=========================*/
.message_chairman .item{width:47%;}
.message_chairman .item:first-child{position:sticky; top:var(--sticky-top); align-self:flex-start;}
.message_chairman .item h3{font-size:32px; margin-bottom:45px;}
.message_chairman .item .photo{margin-top:40px;}
.message_chairman .item .text{margin-bottom:45px;}

@media screen and (max-width: 768px) {
.message_chairman .item{width:100%;}
.message_chairman .item:first-child{position:static; }
.message_chairman .item h3{margin-top:50px;}
}

/*========================
下層：会社を知る
=========================*/
.company .greeting .text_area{ width:65%;}
.company .greeting .text_area .text{ margin-top:45px;}
.company .greeting .photo{ width:30%;}
.company .greeting .photo .name{text-align:right; margin-top:20px;}


.company .links{ margin-top:130px;}
.company .links .item{height:280px; width:33%;}
.company .links .item.hover_card{margin-top:0; }
.company .links .item.business.hover_card{background: url('../../assets/image/company_links01.jpg') no-repeat center center ;background-size: cover;  }
.company .links .item.data.hover_card{background: url('../../assets/image/company_links02.jpg') no-repeat center center;background-size: cover; }
.company .links .item.value.hover_card{background: url('../../assets/image/company_links03.jpg') no-repeat center center;background-size: cover; }
.company .links .item.hover_card::before{background: #1A1A1A;  background-size: cover; }

.company .links.col2 .box{justify-content: center;}
.company .links.col2 .box .item{margin-left:40px; margin-right:40px; height:180px;}


.company .data .box{ display:grid; grid-template-columns:repeat(3, 1fr); gap:13px; }
.company .data .box .item{ text-align:center; position:relative; background:var(--secondary-color); padding:24px 16px;display:flex;flex-direction: column;    min-height:250px;}
.company .data .box .item h3{font-size: var(--fs-20-16); font-weight:700;}
.company .data .box .item img{position:absolute; left:16px; top:20px; width:49px; height:49px;}
.company .data .box .item .flex{display:flex;flex-wrap: wrap;}
.company .data .box .item .flex .number{margin-left:2%; margin-right:2%; width:46%;}
.company .data .box .item .number_wrap{min-height:120px;  display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
.company .data .box .item .number_wrap .number{color:var(--primary-color);font-family:"Roboto", sans-serif; font-weight:700; letter-spacing:0px;white-space: nowrap; line-height:1;}
.company .data .box .item .number_wrap .number span.big{font-size: clamp(3.9375rem, 1.8809rem + 4.2789vw, 5.625rem);/*90/63*/}
.company .data .box .item .number_wrap .number span.medium{font-size: clamp(3.25rem, 1.4981rem + 3.645vw, 4.6875rem);/*75/52*/}
.company .data .box .item .number_wrap .number span.small{font-size: clamp(2.625rem, 1.254rem + 2.8526vw, 3.75rem);/*60/42*/}


.company .data .box .item .number_wrap .number span{font-size: clamp(1.25rem, 0.8692rem + 0.7924vw, 1.5625rem);/*25/20*/font-family:"Roboto", sans-serif; margin-left:3px; margin-right:3px;}
.company .data .box .item .number_wrap .number span.black{color:#1A1A1A;}

.company .data .box .item .foot{font-weight:500; display:flex;justify-content: center;align-items: center;flex-direction: column;min-height: 70px;}
.company .data .box .item .foot span{font-size:14px; font-weight:400;}


.company .value .contents .item{background:var(--secondary-color);display:flex;justify-content: space-between; margin-bottom:25px; position:relative;}
.company .value .contents .item .text_area{width:70%;padding:55px 60px;}
.company .value .contents .item .text_area h3{color:var(--primary-color); font-size: var(--fs-24-20);  font-weight:700; line-height:1.4;position: relative;}
.company .value .contents .item .text_area .text{margin-top:30px;}
.company .value .contents .item .photo{width:30%;}
.company .value .contents .item .photo img{width:100%; height:100%; aspect-ratio:1; object-fit:cover;}

.company .value .contents{counter-reset:num;}
.company .value .contents .item{counter-increment:num;}
.company .value .contents .item:before{content:counter(num, decimal-leading-zero); line-height:1; position:absolute; left:20px; top:20px; font-size:var(--fs-60-40); color:#FFF; font-family:"Roboto", sans-serif; font-weight:500;}

.company .business h3 {font-size: var(--fs-24-20);    font-weight: 700;    line-height: 1.4;    position: relative;    margin-top: 40px; margin-bottom:40px;}
.company .business .point1{ margin-top:100px;}
.company .business .point1 .box{margin-top:100px;}
.company .business .point1 .project{width:40%;}
.company .business .point1 .ic_project{width:20%; text-align:center; margin-top:100px;}
.company .business .point1 .ic_project img{width:60%;}
.company .business .point1 .project .heading{padding:35px; background:#1A1A1A; color:#FFF;}
.company .business .point1 .project .heading .photo{margin-top:20px;}
.company .business .point1 .project .heading h4{text-align:center;}
.company .business .point1 .project .heading .name{margin-top:20px; text-align:center;}
.company .business .point1 .project .heading .text{margin-top:25px;}
.company .business .point1 .project .step{background:var(--secondary-color); padding:30px;}

.company .business .point1 .project .step .item{display:flex; padding:25px 20px;align-items: center; background:#FFF;}
.company .business .point1 .project .step .item .icon{ width:50px; margin-right:20px;}
.company .business .point1 .project .step .item .text_area{ width:calc(100% - 70px);}
.company .business .point1 .project .step .item .text_area h5{color:var(--primary-color); font-weight:700;}

.company .business .point1 .project .step .arrow{text-align:center; margin:15px 0;} 

.company .business .point2{ margin-top:130px;}
.company .business .point2 .box{    display: grid;    grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);gap: 15px; margin-top:100px;}
.company .business .point2 .box .item{background:var(--secondary-color); padding:25px; position:relative;}
.company .business .point2 .box .item .icon{position:absolute; left:15px; top:20px;}
.company .business .point2 .box .item h4{text-align:center; font-weight:700;}
.company .business .point2 .box .item .text{font-size:var(--fs-20-16);color:var(--primary-color); font-weight:700; margin-top:25px; min-height:70px;display:flex;justify-content: center;align-items: center;}
.company .business .point2 .box .item dl.dept{display:flex;align-items: center; margin-top:25px;}
.company .business .point2 .box .item dl.dept dt{font-weight:400;}
.company .business .point2 .box .item dl.dept dd{ background:#1A1A1A; color:#FFF; padding:5px; margin-right:10px; line-height:1;}

.company .business .point3{ margin-top:130px;}
.company .business .point3 .flex_between .contents > div{margin-top:45px;}
.company .business .point3 .box{ margin-top:100px;display:grid; grid-template-columns:repeat(3, 1fr); gap:60px 10px;}
.company .business .point3 .box .item{}
.company .business .point3 .box .item .photo{ position:relative; overflow:hidden;}
.company .business .point3 .box .item .photo img{ transition:transform 0.4s ease;}
.company .business .point3 .box .item:hover .photo img{ transform:scale(1.15); }

.company .business .point3 .box .item .text_area{padding-top:15px; padding-left:15px;}
.company .business .point3 .box .item .text_area h3{font-size:var(--fs-20-16); margin-top:15px; margin-bottom:0px;}
.company .business .point3 .box .item .text_area .area{font-size:14px;}
.company .business .point3 .box .item .plus{background:#FFF; border-radius:6px; padding:3px; position:absolute; right:10px; bottom:10px; width:50px; height:25px;display:flex;justify-content: center;align-items: center;transition:0.3s all;}
.company .business .point3 .box .item:hover .plus{ background:var(--primary-color); color:#FFF;transition:0.3s all; }

.company .business .point3 .box .item.js-case{cursor:pointer;}
.company .business .point3 .box .item .modal_text{display:none;}

.case-modal{position:fixed; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:20px; z-index:9999; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.4s ease, visibility 0.4s ease;}
.case-modal.is-active{opacity:1; visibility:visible; pointer-events:auto;}
.case-modal-overlay{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8);}
.case-modal-inner{position:relative; z-index:1; background:#FFF; width:100%; max-width:900px; max-height:90vh; overflow-y:auto; padding:40px;}
.case-modal-close{position:absolute; top:10px; right:15px; background:none; border:none; color:#1A1A1A; font-size:32px; line-height:1; cursor:pointer; z-index:2;}
.case-modal-photo img{width:100%; height:auto;}
.case-modal-body{margin-top:30px;}
.case-modal-body .area{font-size:14px;}
.case-modal-body h3{font-size:var(--fs-20-16); margin-top:15px;}
.case-modal-body .text{margin-top:20px;}


@media screen and (max-width: 768px) {
.company .greeting .text_area{ width:100%;}
.company .greeting .text_area .text{margin-top:30px;}
.company .greeting .photo{ width:100%; margin-top:30px;}

.company .links{margin-top:60px;}
.company .links .item{width:100%; height:220px; margin-bottom:15px;}
.company .links.col2 .box .item{margin-left:0; margin-right:0; width:100%; height:160px;}

.company .data .box{grid-template-columns:1fr;}
.company .data .box .item{ padding:20px 10px; min-height:150px;}

.company .data .box .item .foot{min-height:unset;}

.company .value .contents .item{flex-direction:column;}
.company .value .contents .item .text_area{width:100%; padding:70px 24px 24px;}
.company .value .contents .item .photo{width:100%;}
.company .value .contents .item .photo img{aspect-ratio:16/9;}

.company .business h3{margin-top:20px; margin-bottom:20px;}
.company .business .point1{margin-top:50px;}
.company .business .point1 .box{margin-top:50px;}
.company .business .point1 .project{width:100%;}
.company .business .point1 .project .step{padding:20px;}
.company .business .point1 .ic_project{width:140px; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px;}
.company .business .point1 .ic_project img{width:100%;}
.company .business .point2{ margin-top:50px;}
.company .business .point2 .box{margin-top:50px; display:block;}
.company .business .point2 .box .item{margin-bottom:20px;}
.company .business .point2 .box .item .text{min-height:unset;}



.company .business .point3{ margin-top:50px;}

.company .business .point3 .box{grid-template-columns:1fr; gap:30px 0; margin-top:50px;}
.company .business .point3 .flex_between .contents > div{margin-top:0;}

.case-modal-inner{padding:20px;}
.case-modal-body{margin-top:20px;}
.case-modal-close{position:fixed; top:10px; right:15px; color:#FFF; font-size:36px;}

}






/*========================
人を知る
=========================*/
.people .box{flex-wrap: wrap;}
.people .item{width:48.5%; background:var(--secondary-color); margin-bottom:30px;}

@media screen and (max-width: 768px) {
.people .item{width:100%;}
}

.people .movie{margin-bottom:130px;}

.people .interview_detail .item{width:47%; background:#FFF; position:sticky; top:calc(var(--sticky-top) + 20px); align-self:flex-start;}
.people .interview_detail .item h2{font-family:"Roboto", sans-serif;color:var(--primary-color); font-size:24px; margin-top:30px; }
.people .interview_detail .text_area{width:47%; padding-top:100px;}
.people .interview_detail .text_area .name{font-size:20px; margin-top:10px;}
.people .interview_detail .text_area h3{margin-top:60px; font-size:20px;color:var(--primary-color); font-weight:700;}
.people .interview_detail .text_area h3:first-of-type{margin-top:120px;}
.people .interview_detail .text_area .title{margin-top:30px; font-size:24px; font-weight:700;}
.people .interview_detail .text_area .text{margin-top:50px; }
.people .interview_detail .text_area .photo{margin-top:60px; text-align:center; }
.people .interview_detail .text_area .photo img{width:80%;}

.people .interview_detail .text_area .question{margin-top:100px;}
.people .interview_detail .text_area .question h3{background:var(--secondary-color); padding:30px; color:#000;display:flex;align-items: center;}
.people .interview_detail .text_area .question h3 span{color:var(--primary-color); margin-right:25px; }


.people .interview_detail .ohter_interview{background:var(--secondary-color); padding-top:100px; padding-bottom:60px; margin-top:100px;}
.people .interview_detail .ohter_interview h2{font-size:32px; text-align:center; font-weight:700; margin-bottom:60px;}
.people .interview_detail .ohter_interview .item{width:32.5%; background:#FFF;}
.people .interview_detail .ohter_interview .item .text_area{ padding:23px; margin-top:0;}

@media screen and (max-width: 768px) {
.people .interview_detail .item{width:100%;position:static;}
.people .interview_detail .text_area{width:100%; padding-top:20px;}
.people .interview_detail .ohter_interview .item{width:100%; margin-bottom:20px;}
.people .interview_detail .text_area h3{margin-top:50px; font-size:16px;}
.people .interview_detail .text_area h3:first-of-type{margin-top:50px;}
.people .interview_detail .text_area .photo{margin-top:30px;}
.people .interview_detail .text_area .photo img{width:100%;}
.people .interview_detail .text_area .question{margin-top:50px;}
.people .interview_detail .text_area .question h3{padding:15px;}
.people .interview_detail .text_area .text{margin-top:30px;}

.people .movie{margin-bottom:50px;}

}

/*========================
働く環境を知る
=======================*/
.environment h3{ font-size: var(--fs-24-20); font-weight:700; line-height:1.4;position: relative; margin-top:60px;}
.environment h3:first-of-type{margin-top:40px;}
.environment h4{font-size: var(--fs-20-16);margin-top:60px; font-weight:700;}
.environment .text{margin-top:40px;}
.environment .photo{margin-top:60px;}
.environment .box{margin-top:20px;  display:grid; grid-template-columns:repeat(2, 1fr);  gap:15px;}
.environment .box .item{background:var(--secondary-color); padding:45px; position:relative;}
.environment .box .item h5{font-size: var(--fs-24-20);  font-weight:700;color:var(--primary-color);position: relative;}
.environment .box .item .text{margin-top:20px;}
.environment .benefits{margin-top:130px;}


.environment .contents .box{counter-reset:num;}
.environment .contents .item{counter-increment:num;}
.environment .contents .item:before{content:counter(num, decimal-leading-zero); line-height:1; position:absolute; left:15px; top:15px; font-size:var(--fs-60-40); color:#FFF; font-family:"Roboto", sans-serif; font-weight:500;}

@media screen and (max-width: 768px) {
.environment .box{grid-template-columns:1fr; grid-template-rows:auto;    margin-top: 30px;}
.environment h3{ margin-top:30px;}
.environment h3:first-of-type{margin-top:20px;}
.environment .text{margin-top:20px;}
.environment .photo{margin-top:30px;}
.environment .box .item{padding:30px;}
.environment .contents .item:before{top:10px; left:10px;}
.environment .benefits{margin-top:50px;}
}


/*========================
よくある質問
=======================*/
.faq .item{margin-top:55px;}
.faq h2{font-size:32px; font-weight:700; margin-top:80px;}
.faq h2:first-of-type{margin-top:0;}
.faq h2 + .item{margin-top:30px;}
.faq .item h3{display:flex; align-items:center; background:var(--secondary-color); padding:16px; padding-right:60px; font-size:var(--fs-20-16); cursor:pointer; position:relative; transition:0.3s all;}
.faq .item h3:first-of-type{margin-top:0;}
.faq .item h3 span{background:#1A1A1A; height:55px; width:55px; font-family:"Roboto", sans-serif; font-weight:500; font-size:32px; display:flex; justify-content:center; align-items:center; color:#FFF; margin-right:40px; flex-shrink:0;}
.faq .item h3::after{content:"＋"; position:absolute; right:15px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:28px; line-height:1; color:#1A1A1A;}
.faq .item h3:hover{ background:#E6E4E4; }
.faq .item.is-open h3::after{content:"－";}
.faq .item .text{display:none; margin-top:25px; font-size:var(--fs-20-16);}
.faq .item .text a{text-decoration:underline;}

@media screen and (max-width: 768px) {
.faq .item{margin-top:30px;}
.faq h2{font-size:24px; margin-top:50px;}
.faq h2 + .item{margin-top:20px;}
.faq .item h3{padding:12px; padding-right:45px;}
.faq .item h3 span{height:40px; width:40px; font-size:24px; margin-right:15px;}
.faq .item h3::after{right:10px; width:26px; height:26px; font-size:22px;}
.faq .item .text{margin-top:15px;}
}
/*========================
募集要項
=======================*/
.recruitment .greeting .text_area{width:47%;}
.recruitment .greeting .text_area .text{margin-top:45px;}
.recruitment .greeting .photo{width:47%;}


.recruitment .list{margin-top:130px;}
.recruitment .list .box{margin-top:20px; flex-wrap:wrap; gap:20px;}
.recruitment .list .box:first-of-type{margin-top:50px;}
.recruitment .list h2{ font-size:32px; font-weight:700; text-align:center; margin-left:auto; margin-right:auto;}
.recruitment .list h2 span{display:block;color:var(--primary-color); font-weight:500;}
.recruitment .list .item{background:var(--secondary-color); position:relative; width:calc(50% - 10px);}
.recruitment .list .item h3{color:var(--primary-color); font-size: var(--fs-24-20); }
.recruitment .list .item .text{margin-top:23px;}

.recruitment .list .item a.hover-link{display:block;padding:50px 90px 50px 50px; }
.recruitment .list .item a.hover-link .hover-arrow{position: absolute; top: 48%; right: 30px; }
.recruitment .list .item a.hover-link:hover{color:#000; }

.recruitment .detail h2{ font-size:32px; font-weight:700; text-align:center; margin-left:auto; margin-right:auto; margin-top:60px;}
.recruitment .detail .item{margin-top:60px;}


.recruitment .detail .entry{width:360px;margin:60px auto 0 auto; height:120px;}
.recruitment .detail .entry a img{width:360px;}

@media screen and (max-width: 768px) {
.recruitment .detail .entry{margin-top:30px; width:300px;}
.recruitment .detail .entry a img{ width:300px;}
}

@media screen and (max-width: 768px) {
.recruitment .greeting .text_area{width:100%;}
.recruitment .greeting .photo{width:100%; margin-top:30px;}

.recruitment .list{margin-top:50px;}
.recruitment .list .box{ margin-top:30px;}
.recruitment .list .item{width:100%;}
.recruitment .list .item a.hover-link{padding:25px 60px 25px 25px;}
.recruitment .list .item a.hover-link .hover-arrow{right: 20px; }
}

/*========================
パンくず
=========================*/
.breadcrumbs{ position:absolute; top:25px; left:40px; }
.breadcrumbs ul{display:flex;}
.breadcrumbs ul li{position:relative;margin-right: 30px; padding-right:10px;}
.breadcrumbs ul li:after{content:""; background:url('../../assets/image/ic_line.png') no-repeat; height:1px; width:20px;position: absolute; top: 50%; right: -20px; transform: translateY(-50%);  }
.breadcrumbs ul li:last-child:after{content:none;}

.head.small .breadcrumbs ul li a,.head.recruitment .breadcrumbs ul li a{color:#C3C3C3;}
.head.small .breadcrumbs ul li:last-child,.head.recruitment .breadcrumbs ul li:last-child{color:#1A1A1A;}


@media screen and (max-width: 768px) {
.breadcrumbs{display:none;}
}
/*========================
もっと見る
=========================*/
.hover-link-wrap{ display:flex; align-items:center; }
.hover-link{ display:flex; align-items:center; color:var(--text-color, #222); transition: color 0.3s ease; }
.hover-arrow{ position:relative; display:inline-block; width:var(--icon-size, 23px); height:var(--icon-size, 23px); margin-left:20px; transition: transform 0.3s ease; }
.hover-arrow img{ position:absolute; top:50%; left:0; transform: translateY(-50%); width:var(--icon-size, 23px); height:auto; transition: opacity 0.3s ease; }
.hover-arrow .img-hover{ opacity:0; }


/*========================
カード
=========================*/
.hover_card{ position:relative; display:block; overflow:hidden;  background: #1A1A1A;  color: #FFF;}
.hover_card::before{content: "";  position: absolute;  inset: 0;  background: url('../../assets/image/card_hover.png') no-repeat center center;  background-size: cover;  opacity: 0;  transition: opacity 0.3s ease;  z-index: 0;}
.hover_card a{position:relative;  z-index:1;  display:flex;  justify-content:center;  align-items:center;  flex-direction:column;  width:100%;  height:100%;}
.hover_card span{ font-family:"Roboto", sans-serif; display:block; font-size:24px; }
.hover_card img.arrow{  position:absolute;  right:40px;  bottom:20px;  width:32px;  height:auto;  z-index:1;  transition: transform 0.3s ease;}


@media screen and (max-width: 768px) {
.hover_card img.arrow{  right:20px;  bottom:20px;  width:20px;  }
}

/*========================
テーブル
=========================*/
table{width:100%;}
table th, table td {border: solid 1px #ccc;	font-weight: normal;vertical-align: middle;	line-height: 160%;padding:20px;}

table th{background:var(--secondary-color); }
table th:first-child{width:20%;}
table td .btn{margin-top:0;}



@media screen and (max-width: 768px) {
table th, table td{display:block; width:100%;}
table th{padding:10px;}
table td{padding:10px;}
table th:first-child{width:100%;}
table.col3 th,table.col3 td{display:table-cell; width:auto;padding:10px 5px;}
}


/*========================
画像hover
=========================*/
.crossfade{ position:relative; display:block; }
.crossfade img{ position:absolute; top:0; left:0; width:var(--img-width, 100%); height:auto; transition: opacity 0.6s ease; }
.crossfade .img-hover{ opacity:0; }

/*========================
文字の背景に画像
=========================*/
.text_clip_bg{ background-image:url('../../assets/image/bg.jpg'); background-size:cover; background-position:top; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; font-weight:700; font-size:32px; }

@media screen and (max-width: 768px) {
.text_clip_bg{ font-size:25px;}
}


.swiper{width: 100%; margin-top:30px; padding-bottom:40px !important;}
.swiper-slide{background:#FFF;}


/*==============================
フッター
==============================*/
footer{ background:#1A1A1A; padding:70px; margin-top:115px;color:#FFF; position:relative; z-index:2;}
footer .logo{width:192px; margin-left:auto; margin-right:auto;}
footer .menu{margin-top:85px;}
footer .menu ul{display:flex;justify-content: space-between;}
footer .sns{position:absolute; left:20px; bottom:-5px;}
footer .sns ul{display:flex;}
footer .sns ul li{margin-right:40px;}
footer .sns ul li img{width:39px;}
footer .copyright{ margin-top:85px; text-align:center; font-size:14px;}


@media screen and (max-width: 768px) {
footer{margin-top:50px; padding:30px;}
footer .global_inner{padding:0;}
footer .menu{margin-top:50px;}
footer .menu ul{flex-wrap: wrap; font-size:13px;}
footer .menu ul li{width:50%;}
footer .sns{position:static; margin-top:20px;}
footer .sns ul li{margin-right:20px;}
footer .sns ul li img{width:30px;}
footer .copyright{ margin-top:50px; font-size:12px;}
}


/*==============================
PAGETOP
==============================*/
#page_top {position: fixed;bottom: 30px;right: 40px; display:none; z-index:1;}
#page_top a {background-color: #999;color: #fff;text-align: center;	text-decoration: none;display: flex; width:52px; height:52px; border-radius:4px;   align-items: center;
    justify-content: center;}
#page_top img{width:15px;}

@media screen and (max-width: 768px) {
#page_top {bottom: 20px; right:25px; }
}





@media screen and (max-width: 768px) {
.pc{display:none !important;}
}

@media screen and (min-width: 769px) {
.sp{display:none !important;}
}


/*==============================
ホバー（マウス操作デバイスのみ）
==============================*/
@media (hover:hover) and (pointer:fine){

.anchor ul li:hover a{ color:#1A1A1A; }
.anchor ul li:hover::before{ opacity:1; }
.anchor ul li a:hover img{ transform:translateY(8px); }

header img:hover{ opacity:0.7; }
nav ul li a:hover{ transition:0.1s all; text-decoration:underline; }

.top_company .text_area ul li:hover a, .top_environment .text_area ul li:hover a{ color:#1A1A1A; }
.top_company .text_area ul li:hover::before, .top_environment .text_area ul li:hover::before{ opacity:1; }
.top_company .text_area ul li a:hover img, .top_environment .text_area ul li a:hover img{ transform:translateX(8px); }

.top_people .swiper-slide:hover, .people .item:hover{ cursor:pointer; }
.top_people .swiper-slide:hover .play .img-default, .people .item:hover .play .img-default{ opacity:0; }
.top_people .swiper-slide:hover .play .img-hover, .people .item:hover .play .img-hover{ opacity:1; }
.top_people .swiper-slide:hover .photo img, .people .item:hover .photo img{ transform:scale(1.15); }
.top_people .interview .swiper-slide:hover .play .arrow, .people .interview .item:hover .play .arrow{ transform:translate(calc(-50% + 8px), -50%); }
.people .interview_detail .item:hover{ cursor:default; }

.message .chairman_message a:hover{ background:#1A1A1A; color:#FFF; }

.company .links .hover_card:hover a{ color:#FFF; }

.recruitment .detail .item a.hover-link:hover{ color:#1A1A1A; }

.hover-link:hover{ color:var(--text-color-hover, var(--primary-color)); }
.hover-link:hover .hover-arrow{ transform:translateX(var(--arrow-move, 8px)); }
.hover-link:hover .hover-arrow .img-default{ opacity:0; }
.hover-link:hover .hover-arrow .img-hover{ opacity:1; }

.hover_card:hover::before{ opacity:1; }
.hover_card:hover{ color:#000; }
.hover_card:hover img.arrow{ transform:translateX(15px); }
.hover_card:hover a{ color:#000; }

.crossfade:hover .img-default{ opacity:0; }
.crossfade:hover .img-hover{ opacity:1; }

#page_top a:hover{ background-color:#666; text-decoration:none; }

}


/*==============================
アクセシビリティ
==============================*/
a:focus-visible, button:focus-visible, #toggle_btn:focus-visible{ outline:2px solid var(--primary-color); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}