T@charset "utf-8";
/* CSS Document */

/* これはいらないかも */
html,body { height:100%; }
*{ font-family: "Noto Sans JP", "Noto Serif JP", "游ゴシック体", YuGothic, "YuGothic M", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; }
*, *:before, *:after {
box-sizing: border-box;  /* paddingやborderに依存しないwidth,height指定 */
}
/* * { outline: 1px solid red !important; } */
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* スマホで勝手に文字が大きくなるのを制御　-webkit-text-size-adjust:100% scroll-behavior:簡易的なスムーズスクロール */
body {
position: relative;
margin: 0;
padding: 0;
font-size: 1.5rem; /* 15px */
font-weight: 500;
color: #1d1d1d;
line-height: 1.65em;
background: #fff;
letter-spacing: 0.02em;
overflow-x: hidden;
}
@media screen and (max-width: 767px) {
  body {
  line-height: 1.6em;
  font-size: 1.4rem; /* 14px */
  }
}
/* 自動生成リンクを無効に設定 */
.tel-link-none { pointer-events: none; }
/* 	ふわっと切り替え */
a {
text-decoration: none;
color: #1c1416;
transition: 0.5s;
}
a:hover {
text-decoration: none;
color: #1c1416;
opacity: 0.7;
transition: 0.5s;
}
dt, dd {
line-height: 1.7em;
}
ul, ol, ul li, ol li {
list-style: none;
}
p {
margin: 0px;
padding: 0px;
}

/* Pタグで改行するとlightheightが効かないのを防ぐ */
br { line-height: 1; }
h1 { margin: 0px; }

/* パソコンで見たときは"pc"のclassがついた方が表示される */
.pc { display: block!important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた方が表示される */
@media screen and (max-width: 960px) {
  .pc { display: none !important; }
  .sp { display: block!important; }
  [id] {
    /* ヘッダーが50pxなら、少し余裕を持って 60px ほど空けるのが綺麗です */
    scroll-margin-top: 60px !important;
  }
}
.pc-head { display: block!important; }
.sp-head { display: none !important; width: 100%; }
/* スマートフォンで見たときは"sp"のclassがついた方が表示される */
@media screen and (max-width: 1023px) {
  .pc-head { display: none !important; }
  .sp-head { display: block!important; }
}
.br-pc { display: block; }
.br-sp { display: none; }
@media screen and (max-width: 520px) {
  .br-pc { display: none; }
  .br-sp { display: block; }
}
/* PCでは */
.notel {
pointer-events: none;
color: #292929;
}
.foot_area .notel {
pointer-events: none;
color: #a1a1a1;
}


/*************************************************/
/*    navi
/*************************************************/

.head {
display: flex;
justify-content: center;
align-items: center;
margin: 0px  auto;
width: 100vw;
height: 50px;
}
.logo a {
display: flex;
align-items: center;
}
.logo a:hover {
opacity: 1;
}
/* sp */
@media screen and (max-width: 1023px) {
  .sp-head {
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: #fff;
  height: 50px;
  z-index: 1000;
  box-shadow: 0 0 5px darkgrey;
  }
  .logo {
  display: flex;
  justify-content: center;
  width: 60%;
  height: 44px;
  }
  .logo img {
  height: 100%;
  max-width: 300px;
  text-align: center;
  }
  .logo img {
  width: 100%;
  max-width: 300px;
  text-align: center;
  }
  .nav_right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 15%;
  }
  .mail {
  width: 28px;
  }
  .mail a {
  display: flex;
  align-items: center;
  }
  .mail img {
  width: 100%;
  height: auto;
  }
  .nav_area {
  display: flex;
  align-items: center;
  width: 15%;
  }
  /*ハンバーガーメニュー*/
  .hamburger {
  width: 30px;
  height: 40px;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .hamburger__container {
  display: block;
  }
  .hamburger__top,
  .hamburger__middle,
  .hamburger__bottom {
  display: block;
  width: 40px;
  height: 1px;
  background-color: #1d1d1d;
  }
  .hamburger__middle {
  margin: 7px 0 7px 0;
  opacity: 1;
  transition: margin 300ms ease-in-out, opacity 0s ease-in-out;
  }
  .hamburger__top,
  .hamburger__bottom {
  transform: rotate(0);
  transition: transform 300ms ease-in-out, background-color 300ms ease-in-out;
  }
  /*ハンバーガーをクリックしたら起こる処理*/
  .hamburger.js-menu-open {
  transition-delay: 300ms;
  }
  .hamburger.js-menu-open .hamburger__top,
  .hamburger.js-menu-open .hamburger__middle,
  .hamburger.js-menu-open .hamburger__bottom {
  background-color: #fff;
  }
  .hamburger.js-menu-open .hamburger__middle {
  margin: -1px 0 -1px 0;
  opacity: 0;
  transition: margin 300ms ease-in-out, opacity 0s ease-in-out;
  }
  .hamburger.js-menu-open .hamburger__top,
  .hamburger.js-menu-open .hamburger__bottom {
  transition-delay: 300ms;
  }
  .hamburger.js-menu-open .hamburger__top {
  transform: rotate(45deg);
  }
  .hamburger.js-menu-open .hamburger__bottom {
  transform: rotate(-45deg);
  }
  /*スマホナビメニュー*/
  .sp__menu {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: #0ead86;
  visibility: hidden;
  opacity: 0;
  transition: .3s cubic-bezier(.11,.24,.64,1);
  }
  .sp__menu.js-open {
  z-index: 100;
  opacity: 1;
  visibility: visible;
  transition: .3s cubic-bezier(.11,.24,.64,1);
  }
  .sp__menu__container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  }
  .sp__menu__nav ul li {
  text-align: center;
  overflow: hidden;
  padding-bottom: 3px;
  }
  .sp__menu__nav ul li:nth-child(even) {
  margin: 35px 0;
  }
  .sp__menu__nav ul li:nth-child(1) a {
  transition-delay: 50ms;
  }
  .sp__menu__nav ul li:nth-child(1) a::before {
  transition-delay: 130ms;
  }
  .sp__menu__nav ul li:nth-child(2) a {
  transition-delay: 100ms;
  }
  .sp__menu__nav ul li:nth-child(2) a::before {
  transition-delay: 260ms;
  }
  .sp__menu__nav ul li:nth-child(3) a {
  transition-delay: 150ms;
  }
  .sp__menu__nav ul li:nth-child(3) a::before {
  transition-delay: 390ms;
  }
  .sp__menu__nav ul li:nth-child(4) a {
  transition-delay: 200ms;
  }
  .sp__menu__nav ul li:nth-child(4) a::before {
  transition-delay: 520ms;
  }
  .sp__menu__nav ul li:nth-child(5) a {
  transition-delay: 250ms;
  }
  .sp__menu__nav ul li:nth-child(5) a::before {
  transition-delay: 650ms;
  }
  .sp__menu__nav ul li:nth-child(6) a {
  transition-delay: 300ms;
  }
  .sp__menu__nav ul li:nth-child(6) a::before {
  transition-delay: 780ms;
  }
  .sp__menu__nav ul li:nth-child(7) a {
  transition-delay: 350ms;
  }
  .sp__menu__nav ul li:nth-child(7) a::before {
  transition-delay: 910ms;
  }
  .sp__menu__nav ul li a {
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  letter-spacing: 1.3px;
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1);
  position: relative;
  }
  .sp__menu__nav ul li a:before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transform-origin: 100% 0;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.55, 0.05, 0.22, 0.99);
  }
  .sp__menu__nav ul li a.js-menu-open {
  opacity: 1;
  transform: translate3d(0,0,0);
  }
  .sp__menu__nav ul li a.js-menu-open:before {
  transform-origin: 0 0;
  transform: scaleX(1);
  }
  .sp__menu__nav ul li.first {
  padding-bottom: 10px;
  }
  .sp__menu__nav ul li.first a {
  font-size: 1.6rem;
  }
  .sp__menu__nav ul li.first a.vi {
  position: relative;
  margin-right: 30px;
  }
  .sp__menu__nav ul li.first a.vi:after {
  content: "|";
  position: absolute;
  top: 0px;
  right: -19px;
  }
  .nvline {
  display: inline-block;
  margin: 0px 10px;
  font-size: 2.0rem;
  color: #fff;
  }
}
@media screen and (min-width: 1024px) {
  .head {
  width: 98%;
  height: 100px;
  }
  .logo {
  width: 28%;
  max-width: 334px;
  }
  .logo img {
  width: 100%;
  height: auto;
  }
  ul.navi {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 72%;
  }
  ul.navi li a {
  display: 	block;
  position: relative;
  margin-left: 17px;
  margin-right: 17px;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 1.6rem;
  color: #1c1416;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 125%;
  }
  ul.navi li a:after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #1c1416;
  bottom: -12px;
  transform: scale(0, 1);
  transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s;   /*変形の時間*/
  }
  ul.navi li a:hover:after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
  }
  ul.navi li:last-of-type {
  margin-left: 22px;
  }
  ul.navi li a.h_contact {
  margin: 0px;
  padding: 16px 30px;
  width: 100%;
  font-size: 1.7rem;
  color: #fff;
  text-align: center;
  line-height: 100%;
  letter-spacing: 0.1em;
  background: #0ead86;
  transition: background 1s;
  border-radius: 100px;
  }
  ul.navi li a.h_contact:hover {
  color: #fff;
  opacity: 1;
  background: #86d6c2;
  }
  ul.navi li a.h_contact:after {
  display: none;
  }
}

/*************************************************/
/*    slider
/*************************************************/

.slider-wrapper {
position: relative;
width: 100%;
margin: 0px auto;
}
.visual-text {
font-family: "Noto Serif JP", serif;
position: absolute;
top: 50%;
left: 50%;
display: flex;
justify-content: center;
width: 100%;
font-size: 4.8rem;
font-weight: 600;
color: #fff;
line-height: 160%;
z-index: 10;
text-shadow: 0 0 10px #1b1643;
letter-spacing: -0.1em;
transform: translate(-50%, -50%);
pointer-events: none; /* クリックをスライダーに通す */
}
.slide img {
width: 100%;
height: auto;
}
.slick-prev,
.slick-next {
display: none !important;
}
@media screen and (min-width: 961px) {
  .visual-text  {
  font-size: 6.0rem;
  text-align: center;
  }
}
@media screen and (min-width: 1280px) {
  .visual-text {
  font-size: 7.0rem; 
  }
}
@media screen and (min-width: 1500px) {
  .visual-text {
  font-size: 8.0rem;
  }
}

/*************************************************/
/*    top
/*************************************************/

.h1-mess {
margin: 15px auto 0px;
padding: 0px 10%;
font-size: 15px;
font-weight: 500;
line-height: 170%;
}
.work-img01 .h1-mess {
margin-top: 5px;
}
.h1-mess.contact {
margin-top: 0px;
}
h2.h2-ourwork {
font-family: "Poppins", sans-serif;
padding: 25px 30px 15px;
font-size: 3.4rem;
font-weight: 500;
text-align: center;
line-height: 100%;
}
h2.h2-ourwork span.h2our {
font-family: "Noto Sans JP", sans-serif;
display: block;
font-size: 1.8rem;
}
h2.h2-work {
position: relative;
margin: 0px 10% 20px;
padding: 0px 0px 0px 45px;
font-size: 2.6rem;
font-weight: 600;
}
h2.h2-work.elect {
margin: 0px auto;
padding: 25px 0px 0px 0px;
font-size: 2.0rem;
text-align: center;
}
h2.h2-work:before {
content: "";
position: absolute;
top: -40%;
left: 0px;
width: 34px;
height: 35px;
background-image: url("../images/top-01-work.svg");
background-size: cover;
background-position: left top;
}
h2.h2-work.elect:before {
top: 5px;
left: 50%;
width: 25px;
height: 26px;
transform: translate(-50%, -50%);
}
h2.h2-work.elect.elect02:before { background-image: url("../images/top-02-work.svg"); }
h2.h2-work.elect.elect03:before { background-image: url("../images/03-work.svg"); }
h2.h2-work.elect.elect04:before { background-image: url("../images/04-work.svg"); }
h2.h2-work.elect.elect05:before { background-image: url("../images/05-work.svg"); }
h2.h2-work.elect.elect06:before { background-image: url("../images/06-work.svg"); }

h2.h2-work.elect.gereral:before {
padding-top: 20px;
}
h2.h2-work.elect.general:after {
content: "（新増築）";
position: absolute;
bottom: 8px;
left: 50%;
font-size: 1.3rem;
white-space: nowrap;
transform: translate(-50%, -50%);
}
h2.h2-work.h2-work02:before { background-image: url("../images/top-02-work.svg"); }
h2.h2-project {
font-family: "Poppins", sans-serif;
padding: 25px 30px 15px;
font-size: 3.4rem;
font-weight: 500;
text-align: center;
line-height: 100%;
letter-spacing: 0.03em;
}
h2.h2-project span.h2pro {
font-family: "Noto Sans JP", sans-serif;
display: block;
font-size: 1.8rem;
}
h2.h2-info {
font-family: "Poppins", sans-serif;
padding: 35px 30px 15px;
font-size: 3.4rem;
font-weight: 500;
text-align: center;
line-height: 100%;
letter-spacing: 0.03em;
}
h2.h2-info span.h2info {
font-family: "Noto Sans JP", sans-serif;
display: block;
font-size: 1.8rem;
}
h2.h2-recruit {
padding: 25px 30px 15px;
font-size: 3.0rem;
font-weight: 500;
text-align: center;
line-height: 100%;
letter-spacing: 0.03em;
}
h2.h2-recruit span.h2rec {
display: block;
padding-top: 6px;
font-size: 1.5rem;
}
h3.h3-ourwork {
margin: 8px 0px 0px;
font-size: 1.5rem;
font-weight: 500;
line-height: 145%;
}
h3.h3-ourwork span.h3our {
display: block;
font-weight: 600;
}
h3.h3-news-ttl {
flex: 1;
margin: 0;
font-size: 1.5rem;
font-weight: 500;
line-height: 130%;
}
/* message */
.t-mess-cont,
.t-work-cont,
.about-cont,
.contact-cont {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 35px;
width: 100%;
background: #fff;
}
.t-mess-cont.work-img01 {
margin-top: 25px;
}
.t-work-cont {
margin-top: 0px;
padding-top: 25px;
}
.t-work-cont.work02 {
padding-top: 45px;
}
.t-mess-cont:before,
.t-work-cont:before,
.about-cont:before,
.contact-cont:before {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 200px;
background-image: url("../images/top-message.webp");
background-size: cover;
background-position: right center;
}
.t-mess-cont.work-img01:before { background-image: url("../images/work-img01.webp"); }
.t-work-cont:before { background-image: url("../images/top-work01.webp"); }
.t-work-cont.work02:before { background-image: url("../images/top-work02.webp"); }
.about-cont:before { bottom: 15px; background-image: url("../images/about-img01.webp"); background-position: center center; }
.contact-cont:before { bottom: 15px; background-image: url("../images/contact-img.webp"); background-position: center center; }
.contact-cont.recruit:before { bottom: 15px; background-image: url("../images/recruit-img.webp"); background-position: center center; }
.t-mess-area,
.t-work-area,
.about-area {
margin: 0px;
padding-bottom: 250px;
width: 100%;
}
.about-area.about-wrk {
padding: 0px;
}
.work-img01 .t-mess-area {
padding-bottom: 230px;
}
.t-mess-txt {
position: relative;
padding: 20px 10% 0px;
font-size: 2.9rem;
font-weight: 500;
line-height: 125%;
}
.t-mess-txt:before {
content: "MESSAGE";
position: absolute;
top: -15%;
left: 10%;
font-family: "Poppins", sans-serif;
font-size: 2.1rem;
}
a.banner-link {
margin: 0px;
padding: 15px 40px;
width: 100%;
font-size: 1.7rem;
color: #fff;
text-align: center;
line-height: 100%;
letter-spacing: 0.1em;
background: #0ead86;
transition: background 1s;
border-radius: 100px;
}
a.banner-link:hover {
color: #fff;
opacity: 1;
background: #86d6c2;
}
.bn-t-mess,
.bn-work {
margin: 40px auto 0px;
text-align: center;
}
.bn-t-mess.bn-pro {
margin: 50px auto 10px;
}
.bn-t-mess.bn-protop {
margin: 50px auto;
}
/* our work */
.our-sl-cont {
width: 100%;
}
.content-slider {
width: 95%;
margin: 0px auto;
overflow: hidden;
}
.content-slider .slick-slide {
opacity: 1 !important; 
transition: transform 1000ms cubic-bezier(0.7, 0, 0.3, 1) !important;
}
.slide-item {
padding: 0 10px;
box-sizing: border-box;
}
.content-slider .slide-item a {
display: block;
text-decoration: none;
cursor: pointer;
}
.slide-image img {
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 370 / 300;
border-radius: 10px;
}
.slick-dotted.slick-slider {
margin-bottom: 0px !important;
padding-bottom: 40px;
}
.content-slider .slick-dots {
bottom: 0px;
}
.slick-dots li button:before {
font-size: 12px !important;
}
/* work */
.t-work-wrp {
margin-top: 20px;
}
.work-txt01 {
display: flex;
align-items: center;
padding: 0px 10% 15px;
font-size: 1.9rem;
font-weight: 700;
}
.work-txt01:after {
content: "";
width: 80px;
height: 1px;
background-color: #636479;
display: block;
margin-left: 15px;
}
.work-txt01.work-txt-af:after {
width: 50px;
}
.work-txt02 {
padding: 0px 10% 0px;
font-size: 1.4rem;
}
/* project */
.t-pro-cont {
display: grid;
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
grid-auto-columns: 45%; /* 半分見せる */
gap: 20px 20px;
justify-content: center;
margin: 0px 20px;
overflow: hidden;
}
.t-pro-cont img {
width: 100%;
height: auto;
border-radius: 10px;
}
.pro-txt {
font-size: 1.4rem;
text-align: center;
line-height: 130%;
}
/* info */
ul.news-list {
margin: 0 auto 50px;
padding: 0;
width: 85%;
max-width: 680px;
}
.news-cont {
border-top: 1px dotted #999;
}
.news-cont:last-child {
border-bottom: 1px dotted #999;
}
.news-wrp {
display: flex;
align-items: center;
padding: 18px 10px;
text-decoration: none;
}
.news-date {
flex: 0 0 85px;
font-size: 1.4rem;
padding: 2px 0px 0px 0px;
}
a.n-link {
transition: background-color 0.3s;
cursor: pointer;
}
a.n-link:hover {
text-decoration: underline;
}
/* recruit */
section.t-recruit-wrp:before {
content: "";
display: block;
width: 100%;
height: 200px;
background-image: url("../images/top-recruit-sp.webp");
background-size: cover;
background-position: center center;
}
.t-recruit_txt {
margin: 0px 10% 20px;
}
@media screen and (max-width: 960px) {
  .content-slider .slick-list {
  padding-right: 30% !important; 
  overflow: visible !important;
  }
  .slide-image img {
  aspect-ratio: 16 / 10;
  }
  section.pro-cont {
  margin-top: 20px;
  padding-bottom: 35px;
  background: #effdff;
  border-top: 8px solid #6bdfc2;
  }
}
@media screen and (min-width: 961px) {
  .h1-mess {
  margin: 0px;
  padding: 0px;
  font-size: 16px;
  line-height: 180%;
  }
  .about-area .h1-mess {
  width: 75%;
  max-width: 800px;
  }
  .about-area .h1-mess.contact {
  width: 100%;
  max-width: inherit;
  text-align: center;
  margin-top: -15px;
  font-size: 1.7rem;
  line-height: 200%;
  }
  h2.h2-ourwork {
  display: flex;
  align-items: center;
  padding: 7% 0px 2% 3.5%;
  font-size: 4.1rem;
  text-align: left;
  }
  h2.h2-ourwork span.h2our {
  display: inline-block;
  padding-left: 15px;
  font-size: 1.7rem;
  }
  h2.h2-work {
  margin: 0px 0px 35px;
  padding-left: 68px;
  width: 70%;
  font-size: 3.5rem;
  }
  h2.h2-work.elect {
  padding-top: 35px;
  font-size: 2.8rem;
  }
  h2.h2-work:before {
  top: -65%;
  width: 46px;
  height: 47px;
  }
  h2.h2-work.elect:before {
  width: 35px;
  height: 36px;
  }
  h2.h2-work.elect.general:after {
  bottom: 9px;
  font-size: 1.4rem;
  }
  h2.h2-project {
  font-size: 5.0rem;
  }
  h2.h2-project span.h2pro {
  font-size: 2.0rem;
  }
  h2.h2-info {
  padding: 55px 0px 15px;
  font-size: 4.8rem;
  }
  h2.h2-info span.h2info {
  padding-top: 5px;
  font-size: 2.2rem;
  }
  h2.h2-recruit {
  padding: 55px 0px 15px;
  font-size: 3.5rem;
  }
  h2.h2-recruit span.h2rec {
  font-size: 1.5rem;
  }
  h3.h3-ourwork {
  margin-top: 15px;
  font-size: 1.6rem;
  }
  h3.h3-ourwork span.h3our {
  display: inline-block;
  padding-right: 10px;
  font-size: 1.5rem;
  }
  h3.h3-news-ttl {
  font-size: 1.6rem;
  }
  /* message */
  .t-mess-cont,
  .t-work-cont {
  margin-top: 90px;
  height: 550px;
  }
  .t-mess-cont.work-img01 {
  margin-top: 70px;
  height: 450px;
  }
  .t-work-cont {
  margin: 0px auto 110px;
  padding: 0px;
  max-width: 1410px;
  height: 489px;
  }
  .about-cont,
  .contact-cont {
  margin-top: 90px;
  }
  .t-mess-cont:before,
  .t-work-cont:before,
  .about-cont:before,
  .contact-cont:before {
  width: 60%;
  height: 100%;
  background-position: right center;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  }
  .about-cont:before,
  .contact-cont:before {
  top: 0px;
  bottom: inherit;
  width: 85%;
  max-width: 1500px;
  height: 400px;
  }
  .about-area,
  .about-area.about-wrk {
  display: flex;
  align-items: center;
  margin: 470px 10% 0px;
  padding: 0px;
  }
  .about-area.about-wrk {
  margin: 0px 10%;
  width: 80%;
  }
  .t-work-cont:before {
  left: inherit;
  right: 0px;
  width: 50%;
  border-radius: 15px;
  }
  .t-work-cont {
  justify-content: flex-start;
  }
  .t-work-cont.work02 {
  justify-content: flex-end;
  margin-bottom: 60px;
  }
  .t-work-cont.work02:before {
  left: 0px;
  right: inherit;  
  }
  .t-mess-area,
  .t-work-area,
  .work-img01 .t-mess-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 20px 20px 40px;
  width: 40%;
  }
  .t-work-area {
  width: 50%;
  }
  .t-mess-txt {
  margin-bottom: 25px;
  padding: 0px;
  font-size: 4.0rem;
  }
  .t-mess-txt:before {
  top: -30%;
  left: 0px;
  font-size: 2.3rem;
  }
  .bn-t-mess {
  margin: 45px 0px 0px;
  width: 100%;
  text-align: left;
  }
  .bn-t-mess.bn-pro {
  margin: 50px auto 0px;
  text-align: center;
  }
  .bn-t-mess.bn-protop {
  margin: 100px auto 120px;
  text-align: center;
  }
  .bn-work {
  margin: 40px 0px;
  text-align: left;
  }
  a.banner-link {
  padding: 20px 55px;
  }
  /* our work */
  .our-sl-cont {
  padding-left: 2%;
  }
  .content-slider {
  overflow: hidden; 
  }
  .slide-item {
  padding: 0 5%;
  }
  .content-slider .slick-list {
  padding-left: 0 !important; 
  padding-right: 12% !important; 
  overflow: visible !important;
  transform: translate3d(0, 0, 0); 
  }
  .content-slider .slick-track {
  margin-left: 0 !important;
  }
  .content-slider a:has(.slide-item) {
  display: block;
  text-decoration: none;
  }
  .content-slider .slide-image img {
  width: 100%;
  aspect-ratio: 370 / 300;
  object-fit: cover;
  transition: filter 0.5s ease !important;
  filter: grayscale(0%);
  backface-visibility: hidden;	
  }
  .content-slider a:hover .slide-image img {
  filter: grayscale(100%) !important;
  opacity: 0.8;
  }
  .slick-dots li button:before {
  font-size: 14px !important;
  }
  .t-work-wrp {
  margin-top: 110px;
  }
  .work-txt01,
  .work-txt02 {
  padding: 0px 2px 0px 0px;
  }
  .work-txt01 {
  padding-bottom: 15px;
  font-size: 2.3rem;
  font-weight: 600;
  }
  .work-txt02 {
  font-size: 1.6rem;
  line-height: 185%;
  }
  /* info */
  section.t-info-wrp {
  margin: 80px 0px 0px;
  width: 100%;
  background: #f7f7f7;
  }
  ul.news-list {
  margin: 20px auto 0px;
  padding-bottom: 100px;
  }
  .news-wrp {
  padding: 30px 20px;
  }
  .news-date {
  flex: 0 0 170px;
  padding-left: 15px;
  font-size: 1.6rem;
  }
  /* recruit */
  section.t-recruit-wrp:before {
  height: 400px;
  background-image: url("../images/top-recruit-pc.webp");
  }
  .t-recruit_txt {
  margin: 0px 10% 15px;
  text-align: center;
  line-height: 190%;
  }
}
@media screen and (min-width: 1032px) {
  /* project */
  .t-pro-cont {
  grid-auto-flow: row;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 1300px) {
  .h1-mess {
  width: 400px;
  }
  h2.h2-ourwork {
  padding-left: 0.9%;
  }
  .about-area .h1-mess {
  line-height: 190%;
  }
  .work-img01 .h1-mess {
  width: 450px;
  font-size: 1.7rem;
  }
  h2.h2-work.elect {
  padding-top: 80px;
  font-size: 3.5rem;
  }
  h2.h2-work.elect.general:after {
  bottom: 14px;
  font-size: 1.6rem;
  }
  h2.h2-project {
  padding-bottom: 40px;
  font-size: 6.0rem;
  }
  h2.h2-work.elect:before {
  top: 40px;
  width: 41px;
  height: 42px;
  }
  h2.h2-project span.h2pro {
  font-size: 2.2rem;
  }
  h2.h2-info {
  padding: 90px 30px 20px;
  }
  h2.h2-info span.h2info {
  font-size: 2.2rem;
  }
  h2.h2-recruit {
  padding: 120px 0px 20px;
  }
  h2.h2-recruit span.h2rec {
  padding-top: 14px;
  }
  .t-mess-area,
  .work-img01 .t-mess-area {
  padding: 0px 0px 0px 100px;
  }
  .work-img01 .t-mess-area {
  margin-top: -40px;
  }
  .t-mess-cont.work-img01 {
  margin-top: 100px;
  }
  .about-cont:before,
  .contact-cont:before {
  height: 550px;
  }
  .about-area {
  margin-top: 650px;
  }
  .t-mess-txt {
  margin-bottom: 20px;
  font-size: 48px;
  }
  .bn-t-mess {
  margin: 60px 0px 0px;
  }
  .bn-work {
  margin-top: 50px;
  }
  .our-sl-cont {
  padding-left: 12%;
  }
  .content-slider {
  width: 100%;
  }
  .t-work-cont .t-work-area {
  padding: 20px 20px 20px 10%;
  }
  /* project */
  section.pro-cont {
  margin-top: 100px;
  }
  .t-pro-cont {
  gap: 40px 30px;
  margin: 0px auto;
  padding-bottom: 20px;
  max-width: 1410px;
  }
  .pro-txt {
  padding-top: 5px;
  font-size: 1.6rem;
  }
  /* info */
  section.t-info-wrp {
  margin-top: 150px;
  }
  /* recruit */
  section.t-recruit-wrp:before {
  height: 580px;
  }
}
@media screen and (min-width: 1500px) {
  .t-work-cont .t-work-area {
  padding: 20px 20px 20px 0px;
  }
  .t-work-cont.work02 .t-work-area {
  padding: 20px 20px 20px 10%;
  }
}

/*************************************************/
/*    H1
/*************************************************/

h1.h1-cate {
margin: 80px auto 0px;
padding: 0px 10%;
font-size: 2.3rem;
font-weight: 600;
color: #2a2a2a;
max-width: 1410px;
}
h1.h1-cate span.subttl {
display: block;
font-family: "Poppins", sans-serif;
padding-bottom: 15px;
font-size: 4.5rem;
font-weight: 700;
line-height: 100%;
}
h1.h1-cate span.subttl.small {
font-size: 4.0rem;
}
.pankuzu {
display: none;
}
@media screen and (min-width: 961px) {
  h1.h1-cate {
  margin: 80px auto 0px;
  padding: 0px 50px;
  font-size: 2.3rem;
  }
  h1.h1-cate span.subttl,
  h1.h1-cate span.subttl.small {
  padding-bottom: 25px;
  font-size: 6.5rem;
  }
}
@media screen and (min-width: 1024px) {
  h1.h1-cate {
  margin-top: 30px;
  padding: 0px;
  width: 84%;
  font-size: 2.9rem;
  }
  h1.h1-cate span.subttl,
  h1.h1-cate span.subttl.small {
  padding-bottom: 40px;
  font-size: 7.5rem;
  }
  .pankuzu {
  display: flex;
  justify-content: flex-end;
  margin: 10px auto 0px;
  width: 96%;
  max-width: 1650px;
  }
  .pankuzu a,
  .pankuzu .current {
  font-size: 1.4rem;
  }
  .pankuzu a {
  position: relative;
  padding-right: 20px;
  font-weight: 600;
  color: #0ead86;
  }
  .pankuzu a:after {
  content: ">";
  position: absolute;
  display: inline-block;
  padding-left: 5px;
  color: #1d1d1d;
  }
}
@media screen and (min-width: 1300px) {
  h1.h1-cate {
  font-size: 3.0rem;
  font-weight: 500;
  }
  h1.h1-cate span.subttl,
  h1.h1-cate span.subttl.small {
  padding-bottom: 30px;
  font-size: 9.5rem;
  }
  .t-work-cont.work02 {
  padding-top: 0px;
  }
  .pankuzu {
  margin-top: 30px;
  }
}
@media screen and (min-width: 1500px) {
  .pankuzu {
  width: 88%;
  }
}
/*************************************************/
/*    work
/*************************************************/

h2.h2-work03 {
font-size: 2.6rem;
font-weight: 600;
text-align: center;
line-height: 100%;
}
h2.h2-work03 span.h2work,
h2.h2-work span.h2work {
display: block;
padding-top: 5px;
font-size: 1.3rem;
}
h2.h2-work span.h2work { font-size: 1.2rem; }
h2.h2-work.elect.general span.h2work {
padding-top: 20px;
}
.work-read {
padding: 0px 10% 8px;
font-size: 2.6rem;
font-weight: 600;
line-height: 140%;
}
.work-communicate-cont {
margin-top: 30px;
padding: 25px 0px 45px;
width: 100%;
background: #f5f7f7;
}
.work-area {
padding: 0px 10%;
}
.work-txt03 {
padding-top: 15px;
font-size: 1.4rem;
}
.work-txt04 {
font-size: 1.6rem;
font-weight: 700;
}
.work-txt05,
.spele {
display: none;
}
.work-txt06 {
margin: 20px auto 10px;
width: 85%;
font-size: 2.0rem;
font-weight: 700;
line-height: 150%;
}
.work-txt07 {
margin: 15px auto 0px;
width: 85%;
font-size: 1.4rem;
}
.w-list-cont {
margin: 20px auto 0px;
padding: 0px 10%;
}
.w-list-cont.spnone { display: block; }
.w-list-cont.pcnone { display: none; }
.w-list-cont img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 10px;
}
.work-ttl {
display: block;
padding-top: 0px;
font-size: 1.4rem;
}

/*   electrical work   */
.work-ele-wrp {
display: grid;
margin: 0px auto;
width: 85%;
max-width: 1250px;
}
.work-ele-main {
grid-area: 1 / 1;
width: 90%;
z-index: 1;
}
.work-communicate-cont.kasou:nth-child(2n) .work-ele-main  {
margin-left: auto;
margin-right: 0px;
}
.work-ele-main img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 10px;
}
.work-ele-img {
margin: 25px auto 0px;
width: 85%;
max-width: 720px;
}
.work-ele-img img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 10px;
}
.work-ele-txt {
grid-area: 1 / 1;
margin: 65px 0px 0px auto;
padding: 30px 20px 15px 20px;
background: #fff;
border-radius: 10px;
z-index: 2;
}
.work-communicate-cont.kasou:nth-child(2n) .work-ele-txt  {
margin: 65px auto 0px 0px;
}
@media screen and (min-width: 961px) {
  h2.h2-work03 {
  font-size: 3.3rem;
  }
  h2.h2-work.elect span.h2work,
  h2.h2-work.elect.general span.h2work {
  padding-top: 15px;
  font-size: 1.5rem;
  font-weight: 500;
  }
  h2.h2-work.elect.general span.h2work {
  padding-top: 30px;
  }
  .work-read {
  margin-bottom: 20px;
  padding: 0px;
  font-size: 3.0rem;
  }
  .work-txt05 {
  display: block;
  padding: 20px 0px 60px;
  font-size: 3.3rem;
  font-weight: 600;
  text-align: center;
  }
  .work-txt06 {
  margin: 20px auto 10px;
  }
  .work-txt07 {
  margin-top: 15px;
  line-height: 170%;
  }
  .work-txt07.second {
  margin-top: 50px;
  }
  .work-communicate-cont {
  margin-top: 40px;
  padding: 40px 0px;
  }
  .work-communicate-cont.kasou {
  margin-top: 0px;
  padding: 40px 0px 60px;
  border-top: 1px solid #dae3e4;
  }
  .work-communicate-cont.kasou:first-of-type {
  margin-top: 40px;
  border: none;
  }
  .work-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 40px;
  margin: 0px auto;
  width: 80%;
  }
  .w-list-cont {
  padding: 0px;
  width: 100%;
  }
  .w-list-cont img {
  height: 200px;
  }
  .work-ele-main {
  width: 80%;
  max-width: 720px;
  }
  .work-ele-main img {
  height: 350px;
  }
  .work-ele-txt {
  padding: 50px 20px 40px 20px;
  width: 60%;
  }
  .work-ele-img-cont {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px 40px;
  width: 85%;
  margin: 20px auto 70px;
  }
  .work-ele-img {
  width: 100%;
  }
  .work-ele-img img {
  height: auto;
  }
  .spele {
  display: block;
  }
  .pcele {
  display: none;
  }
}
@media screen and (min-width: 1024px) {
  h2.h2-work03 {
  font-size: 3.3rem;
  }
  .work-area {
  padding: 0px 10% 40px;
  }
  .work-list {
  grid-template-columns: repeat(3, 1fr);
  width: 90%;
  max-width: 1330px;
  }
  .work-list.communi {
  grid-template-columns: repeat(1, 1fr);
  }
  .w-list-cont.pcnone {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 40px;
  }
  .full-width {
  grid-column: 1 / 4; /* 1本目の線から4本目の線まで（3列分） */
  margin: 0px auto;
  }
  .work-txt07 {
  font-size: 1.5rem;
  }
  .w-list-cont.spnone { display: none; }
}
@media screen and (min-width: 1300px) {
  h2.h2-work03 {
  text-align: left;
  width: 360px;
  font-size: 4.6rem;
  }
  h2.h2-work03.last {
  width: auto;
  font-size: 4.0rem;
  text-align: center;
  }
  h2.h2-work03 span.h2work {
  padding-top: 20px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 100%;
  }
  h2.h2-work03.last span.h2work {
  padding: 15px 0px 20px;
  font-size: 1.4rem;
  }
  h2.h2-work.elect span.h2work,
  h2.h2-work.elect.general span.h2work {
  padding-top: 18px;
  }
  h2.h2-work.elect.general span.h2work {
  padding-top: 40px;
  }
  .work-txt05 {
  margin-top: -20px;
  padding-bottom: 80px;
  font-size: 4.4rem;
  font-weight: 500;
  }
  .work-txt06 {
  margin-top: 25px;
  width: 80%;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 170%;
  }
  .work-txt07 {
  width: 80%;
  line-height: 170%;
  }
  .work-read {
  padding: 0px;
  font-size: 3.5rem;
  font-weight: 500;
  }
  .work-communicate-cont {
  margin-top: 120px;
  padding: 90px 0px 100px;
  }
  .work-communicate-cont:last-of-type {
  max-width: 1280px;
  margin: 120px auto 70px;
  border-radius: 20px;
  }
  .work-communicate-cont.kasou,
  .work-communicate-cont.kasou:last-of-type {
  margin-top: 0px;
  padding: 90px 0px 100px;
  max-width: none;
  border-radius: 0px;
  }
  .work-communicate-cont.kasou:first-of-type {
  margin-top: 100px;
  }
  .work-area {
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: center;
  margin: 0px auto;
  padding: 0px 0px 55px;
  width: 85%;
  max-width: 1330px;
  }
  .work-area.vehicles {
  display: block;
  padding-bottom: 30px;
  text-align: center;
  }
  .work-txt03 {
  padding: 0px;
  font-size: 1.5rem;
  line-height: 180%;
  }
  .work-list {
  width: 85%;
  }
  .work-list.vehicles {
  display: block;
  }
  .work-link {
  display: grid;
  justify-content: center;
  margin: 10px 0px 0px;
  }
  .work-txt04 {
  width: 100%;
  font-size: 2.0rem;
  font-weight: 500;
  }
  .work-txt07,
  .work-ele-img-cont {
  width: 80%;
  max-width: 1250px;
  }
  .work-ele-img-cont {
  margin-bottom: 90px;
  }
  .work-ttl {
  width: 100%;
  padding-bottom: 5px;
  font-size: 1.3rem;
  }
  .vehicles .w-list-cont img {
  max-width: 1045px;
  height: auto;
  border-radius: 15px;
  }
  .work-communicate-cont.kasou .work-ele-txt,
  .work-communicate-cont.kasou:nth-child(2n) .work-ele-txt {
  margin-top: 95px;
  }
  .work-ele-main img {
  height: auto;
  border-radius: 15px;
  }
  .work-ele-txt {
  padding: 45px 20px 65px 20px;
  max-width: 625px;
  min-height: 480px;
  border-radius: 15px;
  }
}
@media screen and (min-width: 1500px) {
  .w-list-cont img {
  max-width: 400px;
  height: 315px;
  }
}

/*************************************************/
/*    project
/*************************************************/

h2.h2-project02 {
font-size: 1.5rem;
font-weight: 500;
line-height: 130%;
}
h2.h2-project02 span.date {
display: block;
font-size: 1.3rem;
font-weight: 700;
}
h2.h2-project03 {
margin: 20px 30px 0px;
font-size: 2.0rem;
font-weight: 600;
text-align: center;
line-height: 150%;
}
h3.h3-project {
margin: 0px auto 25px;
font-size: 1.6rem;
font-weight: 600;
color: #2a2a2a;
text-align: center;
}
h3.h3-project span.subttl {
display: block;
font-family: "Poppins", sans-serif;
padding-bottom: 2px;
font-size: 3.0rem;
font-weight: 700;
line-height: 100%;
}

.project-bg {
margin-top: 40px;
padding: 40px 0px;
width: 100%;
background: #f5f7f7;
}
.project-nav {
display: flex;
flex-wrap: wrap;
gap: 10px 5px;
margin: -15px 5% 20px;
padding: 0px;
}
.project-nav a {
padding: 8px 15px;
min-width: 100px;
text-align: center;
border-radius: 50px;
background: #fff;
white-space: nowrap;
}
.project-nav a.current { color: #fff;  background: #0ead86; border-color: #0ead86; }
.project-nav a:hover {
background: #d6fcf3;
border: 1px solid #0ead86;
}
.project-wrp {
margin: 0px auto;
width: 85%;
}
.project-cont {

}
.project-img img {
width: 100%;
height: 180px;
object-fit: cover;
border-radius: 10px;
}
.project-txt {
display: flex;
justify-content: space-between;
margin: 0px 0px 20px;
}
.project-txt .cate {
margin-top: 7px;
}
.project-txt .cate span {
padding: 4px 10px;
font-size: 1.1rem;
font-weight: 700;
border-radius: 50px;
background: #fff;
border: 1px solid #848484;
white-space: nowrap;
}


/*   detail   */
.de-cate {
display: flex;
align-items: center;
justify-content: center;
margin: 35px 0px 6px;
}
.de-cate span {
padding: 5px 20px;
font-size: 1.3rem;
font-weight: 600;
color: #fff;
background: #0ead86;
border-radius: 50px;
letter-spacing: 0.05em;
}
.de-cate:before {
content: "";
flex-grow: 0.5; /* 残りの幅を全て線で埋める */
height: 1px;
background-color: #a7a7a7;
}
.de-cate:after {
content: "";
flex-grow: 0.5; /* 残りの幅を全て線で埋める */
height: 1px;
background-color: #a7a7a7;
}
.pro-detail {
margin: 30px auto 0px;
width: 85%;
max-width: 800px;
}
.pro-detail img {
margin: 0px 0px 15px;
width: 100%;
height: auto;
border-radius: 10px;
}
table.detail {
margin: 0px auto 40px;
width: 87%;
max-width: 820px;
border-collapse: separate;
border-spacing: 10px 0;
}
table.detail th {
padding: 15px 0px 10px 10px;
width: 25%;
font-size: 1.5rem;
text-align: left;
vertical-align: middle;
border-bottom: 2px solid #0ead86;
}
table.detail td {
padding: 15px 0px 10px 10px;
width: 75%;
font-size: 1.5rem;
border-bottom: 2px solid #c1c3c3;
}
.de-else-bg {
padding: 30px 0px;
background: #f5f7f7;
}

@media screen and (min-width: 961px) {
  h2.h2-project02 {
  font-size: 1.7rem;
  }
  h3.h3-project {
  margin: 25px auto 0px;
  font-size: 2.2rem;
  }
  h3.h3-project span.subttl  {
  padding-bottom: 19px;
  font-size: 4.8rem;
  font-weight: 600;
  }
  .project-txt .cate span {
  padding: 4px 20px;
  font-size: 1.3rem;
  font-weight: 500;
  }
  .project-nav {
  margin: 15px 5% 20px;
  }
  .project-wrp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 50px;
  margin-top: 60px;
  }
  .project-img img {
  height: 250px;
  }
  .pro-detail img {
  margin: 0px 0px 80px;
  }
  table.detail {
  margin-bottom: 130px;
  border-spacing: 15px 0;
  }
  table.detail th,
  table.detail td {
  padding: 35px 0px 35px 10px;
  font-size: 1.7rem;
  font-weight: 600;
  }
  table.detail th {
  width: 35%;
  }
  table.detail td {
  width: 65%;
  }
}
@media screen and (min-width: 1300px) {
  h2.h2-project03 {
  margin: 50px 30px 0px;
  font-size: 3.0rem;
  }
  h3.h3-project {
  font-size: 2.5rem;
  }
  h3.h3-project span.subttl  {
  padding-bottom: 30px;
  font-size: 6.6rem;
  }
  .project-bg {
  margin-top: 120px;
  padding: 70px 0px 100px;
  }
  .project-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 10px;
  margin: 0px auto 20px;
  padding: 1px 0px;
  width: 94%;
  max-width: 1410px;
  background: #fff;
  border-radius: 50px;
  }
  .project-nav a {
  padding: 15px 11px;
  font-size: 1.7rem;
  min-width: 160px;
  border: 1px solid #fff;
  }
  .project-nav a.current {
  border: 1px solid #0ead86;
  }
  .project-nav a.current:hover {
  background: #0ead86;
  }
  .project-wrp {
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 75px;
  max-width: 1410px;
  }
  .project-img img {
  height: 350px;
  }
  .de-else-bg {
  padding: 80px 0px;
  }
  .de-cate {
  margin-top: 90px;
  }
  .de-cate span {
  padding: 6px 30px;
  font-size: 1.5rem;
  }
  .pro-detail {
  margin: 60px auto 0px;
  }
}

/*************************************************/
/*    about us
/*************************************************/

h2.h2-about {
font-family: "Poppins", sans-serif;
margin: 0px 10%;
font-size: 2.3rem;
font-weight: 600;
line-height: 115%;
}
h2.h2-about02 {
display: flex;
align-items: center; 
margin: 35px 0px 6px;
font-size: 2.2rem;
font-weight: 600;
}
h2.h2-about02:after {
content: "";
flex-grow: 0.5; /* 残りの幅を全て線で埋める */
height: 1px;
background-color: #494949;
margin-left: 15px;
}
h2.h2-about03 {
margin: 25px auto 0px;
font-size: 1.6rem;
font-weight: 600;
color: #2a2a2a;
text-align: center;
}
h2.h2-about03 span.subttl {
display: block;
font-family: "Poppins", sans-serif;
padding-bottom: 2px;
font-size: 3.0rem;
font-weight: 700;
line-height: 100%;
}
h3.h3-about {
margin: 0px 0px 7px;
font-size: 1.7rem;
font-weight: 600;
line-height: 125%;
}
h3.h3-about span {
padding-right: 10px;
}
h3.h3-about02 {
margin: 18px 0px 0px;
font-size: 2.2rem;
font-weight: 700;
}
h3.h3-about03 {
margin: 18px 0px;
font-size: 2.0rem;
font-weight: 600;
text-align: center;
}
.about-list {
margin: 0px 10%;
width: 80%;
}
a.about-work {
display: block;
margin-bottom: 10px;
padding: 15px 0px;
width: 100%;
border-bottom: 1px solid #747474;
transition: transform 0.3s ease-in;
}
.about-txt {
position: relative;
padding-right: 60px;
width: 100%;
font-size: 1.3rem;
}
.about-txt:after {
content: "→";
position: absolute;
top: 50%;
right: 0px;
font-size: 1.8rem;
transform: translate(-50%, -50%);
transition: transform 0.4s cubic-bezier(0.68, -0.8, 0.32, 1.6);
}
.about-txt02 {
padding: 15px 0px 10px;
font-size: 1.4rem;
}
.about-read {
font-size: 1.3rem;
}
.about-sign {
font-family: "Noto Serif JP", serif;
text-align: right;
font-size: 2.0rem;
font-weight: 600;
line-height: 130%;
}
.about-sign span.sign-ttl {
font-family: "Noto Serif JP", serif;
display: block;
padding-right: 3px;
font-size: 1.5rem;
}
a.about-work:hover .about-txt:after { /* hoverで右に3px移動 */
transform: translate(3px, -50%);
}
section.about-wksec {
margin-top: 30px;
border-top: 1px solid #d3dcdd;
}
section.about-wksec.first {
margin-top: 10px;
border: none;
}
.about-top-cont {
margin: 0px 10%;
}
.about-top-cont > .about-top-img {
display: none;
}
.about-top-img {
margin: 20px 0px 0px;
}
.about-top-img img {
width: 100%;
height: auto;
}
.slowgan {
margin: 15px auto 25px;
padding: 20px 15%;
background: #f6f6f6;
width: 80%;
max-width: 930px;
}
.slowgan img {
width: 100%;
max-width: 424px;
height: auto;
}
table.about-company {
border-collapse: collapse;
margin: 0px auto;
width: 90%;
max-width: 930px;
border-top: 1px solid #e1e1e1;
border-left: 1px solid #e1e1e1;
}
table.about-company th {
width: 30%;
line-height: 130%;
font-weight: 600;
background: #f6f6f6;
border-bottom: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}
table.about-company td {
width: 70%;
line-height: 130%;
vertical-align: middle;
border-bottom: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}
.map {
display: flex;
align-items: center;
justify-content: center;
}
.map a {
margin-left: 10px;
width: 50px;
}
.map img,
.coworker img {
width: 100%;
height: auto;
vertical-align: bottom;
}
ul.rank li {
padding: 0px 0px 5px;
}
.map-area {
position: relative;
width: 90%;
max-width: 930px;
margin: 0px auto 5px;
padding-top: 56.25%;
height: 0;
}
.map-area iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.map-car {
margin: 0px auto;
width: 90%;
max-width: 930px;
font-size: 1.3rem;
}
.coworker {
margin: 25px auto;
width: 90%;
}
@media screen and (max-width: 960px) {
  table.about-company th {
  display: block;
  padding: 9px 10px 9px 15px;
  width: 100%;
  font-size: 1.4rem;
  }
  table.about-company td {
  display: block;
  padding: 12px 10px 12px 15px;
  width: 100%;
  font-size: 1.3rem;
  text-align: center;
  }
}
@media screen and (min-width: 961px) {
  h2.h2-about {
  margin: 0px;
  padding: 0px;
  width: 25%;
  max-width: 280px;
  font-size: 3.0rem;
  }
  h2.h2-about03 {
  margin: 25px auto 0px;
  font-size: 2.2rem;
  }
  h2.h2-about03 span.subttl {
  padding-bottom: 19px;
  font-size: 4.8rem;
  font-weight: 500;
  }
  h3.h3_about {
  margin: 0px 0px 20px;
  padding-top: 60px;
  font-size: 4.0rem;
  }
  h3.h3-about03 {
  margin: 40px 0px;
  font-size: 3.0rem;
  }
  .about-list {
  margin: 0px;
  width: 75%;
  }
  section.about-wksec,
  section.about-wksec.first {
  margin-top: 50px;
  padding: 60px 0px 40px;
  border-top: 1px solid #d3dcdd;
  }
  .slowgan {
  margin: 55px auto 65px;
  padding: 50px 20%;
  }
  table.about-company th,
  table.about-company td {
  padding: 30px 10px 30px 40px;
  font-size: 1.6rem;
  text-align: left;
  vertical-align: middle;
  height: 90px;
  }
  .map {
  justify-content: flex-start;
  margin: -15px 0px;
  }
  .map a {
  margin-left: 20px;
  width: 70px;
  }
  ul.rank li {
  padding: 0px 0px 12px;
  }
  .map-area {
  padding-top: 40%;
  }
  .coworker {
  margin: 60px auto;
  }
}
@media screen and (min-width: 1024px) {
  h2.h2-about02 {
  margin: 35px 0px 10px;
  font-size: 3.0rem;
  }
  h2.h2-about02:after {
  margin-left: 25px;
  }
  h3.h3-about02 {
  margin: 25px 0px 0px;
  font-size: 2.8rem;
  }
  .about-txt {
  padding-right: 50px;
  }
  .about-txt02 {
  padding: 20px 0px 10px;
  font-size: 1.5rem;
  line-height: 190%;
  }
  .about-read {
  font-size: 1.6rem;
  }
}
@media screen and (min-width: 1200px) {
  h3.h3-about03 {
  margin: 60px 0px 55px;
  font-size: 3.5rem;
  }
  .about-top-cont {
  display: flex;
  justify-content: center;
  max-width: 1330px;
  }
  .about-top-img {
  display: none;
  }
  .about-top-cont > .about-top-img {
  display: block;
  width: 50%;
  max-width: 665px;
  }
  .about-txt-area {
  padding-left: 6%;
  width: 50%;
  }
  .slowgan {
  padding: 50px 0px;
  text-align: center;
  }
  table.about-company th {
  width: 26%;
  }
  .map-car {
  padding: 10px 0px 0px 15px;
  font-size: 1.5rem;
  }
  .coworker-bg {
  width: 100%;
  background-image: url("../images/about-img04.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }
  .coworker {
  margin: 80px auto;
  max-width: 1054px;
  }
}
@media screen and (min-width: 1300px) {
  h2.h2-about02 {
  margin: 35px 0px 17px;
  }
  h3.h3-about {
  margin: 0px 0px 13px;
  font-size: 2.0rem;
  }
  h3.h3-about02 {
  margin: 40px 0px 0px;
  font-size: 2.8rem;
  }
  section.about-wksec,
  section.about-wksec.first {
  margin-top: 80px;
  padding: 70px 0px 0px;
  }
  .about-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px 5%;
  }
  a.about-work {
  margin: 0px;
  padding: 0px;
  }
  .about-txt {
  margin-bottom: 18px;
  font-size: 1.5rem;
  }
  .about-txt02 {
  padding: 30px 5% 40px 0px;
  line-height: 200%;
  }
  .about-sign {
  font-size: 2.3rem;
  }
  .about-sign span.sign-ttl {
  font-size: 1.5rem;
  }
}


/*************************************************/
/*    contact
/*************************************************/


.thanks_read {
padding: 90px 40px 70px;
font-size: 1.8rem;
text-align: center;
line-height: 250%;
}
/* recaptcha */
.recaptcha_bg {
margin: 0px auto 20px;
padding: 15px 15px;
width: 90%;
max-width: 380px;
font-size: 1.3rem;
font-weight: 600;
text-align: center;
line-height: 160%;
color: #787878;
letter-spacing: 0;
background: #ddfff7;
border-radius: 5px;
}
.recaptcha_bg a {
color: #2ebf9b;
}
.recaptcha_bg a:hover {
color: #0ead86;
text-decoration: underline;
}
/* rechaptureロゴ非表示 */
.grecaptcha-badge { visibility: hidden; }

@media screen and (max-width: 425px) {
  .thanks_read {
  padding-top: 40px;
  font-size: 1.5rem;
  text-align: left;
  line-height: 200%;
  }
}
@media screen and (min-width: 834px) {
  .item_cont.contact {
  padding-top: 95px;
  border-left: 2px solid #152e54;
  border-right: 2px solid #152e54;
  }
  .recaptcha_bg {
  margin: 0px auto 70px;
  font-size: 1.4rem;
  font-weight: 500;
  }
}

/*************************************************/
/*    footer
/*************************************************/

footer {
width: 100%;
margin: 0px;
padding: 25px 0px 0px;
background-image: url("../images/footer-bg-sp.webp");
background-size: cover;
background-position: center center;
}
footer.top {
margin: 50px 0px 0px;
}
.f-logo {
margin: 0px auto;
width: 80px;
}
.f-logo img {
width: 100%;
height: auto;
}
.f-right {
display: none;
}
.address {
padding: 0px 30px 45px;
font-size: 1.4rem;
font-weight: 500;
text-align: center;
line-height: 160%;
}
.address span.company {
display: block;
padding: 5px 0px 8px;
font-size: 1.7rem;
font-weight: 600;
}
.copyright {
width: 100%;
padding: 5px 0px;
font-size: 1.2rem;
font-weight: 400;
text-align: center;
line-height: 150%;
color: #fff;
letter-spacing: 0.1em;
background: #178b6f;
}
@media screen and (max-width: 480px) {
  .address {
  padding-bottom: 20px;
  font-size: 1.2rem;
  line-height: 140%;
  }
  .address span.company {
  font-size: 1.5rem;
  }
  .copyright {
  font-size: 1.0rem;
  }
}
@media screen and (min-width: 1024px) {
  footer {
  margin-top: 100px;
  padding: 40px 0px 0px;
  background-image: url("../images/footer-bg-pc.webp");
  }
  footer.top {
  margin-top: 120px;
  }
  .foot {
  display: flex;
  justify-content: space-between;
  margin: 20px auto 70px;
  padding: 0px 30px;
  max-width: 1250px;
  }
  .f-left {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 35%;
  }
  .f-logo {
  margin: 0px;
  width: 128px;
  }
  .f-logo img {
  -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1));
  filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1)); 
  }
  .address {
  padding: 5px 0px 10px;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: left;
  line-height: 170%;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1);
  }
  .address span.company {
  font-size: 1.9rem;
  font-weight: 700;
  }
  .address span.company span.company-inn {
  font-size: 1.5rem;
  }
  .address span.post {
  font-size: 1.4rem;
  }
  .f-right {
  display: grid;
  grid-template-columns: 2.5fr 1fr 1fr 1fr;
  gap: 0 18px;
  margin-top: 20px;
  width: 70%;
  }
  .f-navi {
  position: relative;
  margin-top: 30px;
  padding: 10px 20px 0px 0px;
  }
  .f-navi:before {
  content: "Business";
  position: absolute;
  top: -40px;
  left: 0px;
  font-size: 1.7rem;
  font-weight: 600;
  color: #2c6f44;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1);
  }
  .f-navi:nth-child(2):before { content: "Project"; }
  .f-navi:nth-child(3):before { content: "Company"; }
  .f-navi:nth-child(4):before { content: "Contact"; }
  .f-navi:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #2c6f44;
  -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 3px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 3px rgba(255, 255, 255, 1));  /* SafariなどのWebkitブラウザ用 */
  filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 3px rgba(255, 255, 255, 1)) drop-shadow(0px 0px 3px rgba(255, 255, 255, 1));   
  }
  .f-navi.f-business {
  display: flex;
  }
  li.f-cate-top a,
  li.f-cate-sub a {
  display: block;
  padding: 13px 0px 0px;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1);
  }
  li.f-cate-sub a {
  padding: 9px 0px 0px;
  font-size: 1.5rem;
  }
  li.first a {
  padding-top: 15px;
  }
  .copyright {
  padding: 8px 0px;
  font-size: 1.1rem;
  text-align: center;
  line-height: 140%;
  width: 100%;
  }
}