/*
Theme Name: 株式会社７Gオリジナルテーマ
Theme URI: https://g-local.example.com
Author: KIKUCHI
Author URI: https://your-portfolio.example.com
Description: 7G様用に作成したオリジナルテーマです。
Version: 1.0
License: GNU General Public License v2 or later
License URI: 
Text Domain: g-local-theme
Tags: custom, responsive, minimal
*/


 
 
 /*     しっぽり明朝体
    font-family: "Shippori Mincho", serif; */

 /*     Libre Baskerville
    font-family: "Libre Baskerville", serif; */
    
 /*     ヒラギノ丸ゴ
    font-family: "Zen Maru Gothic", sans-serif; */

 /*     クレー
    font-family: "Klee One", cursive; */


 /* config  */

 body {
   font-family: "Shippori Mincho", "Zen Maru Gothic","Libre Baskerville", serif;
   overflow-x: hidden !important;
   background-color: white;
   position: relative;
 }

 img {
   max-width: 100%;
   object-fit: cover;
 }

figure {
   width: 100% !important; 
}

 main {
   overflow-x: hidden;
 }

 /* fade-in */


/* 全部初期状態は非表示＋変形 */
.fade-in {
   opacity: 0;
   transition: all 0.8s ease;
 }
 
 .fade-in-right {
   transform: translateX(50px);
 }
 .fade-in-bottom {
   transform: translateY(50px);
 }
 .fade-in-left {
   transform: translateX(-50px);
 }
 
 /* 共通で show がついたら元の位置へ */
 .fade-in.show {
   opacity: 1;
   transform: translate(0, 0) !important;
   padding-bottom: 50px;
 }

 /* h3 */

 h3 {
   position: relative;
   font-size: 1.9rem;
 }

 h3::after {
   position: absolute;
   font-size: 5rem;
   font-family: "Libre Baskerville", serif !important;
   font-style: italic;
   font-weight: bold;
   color: #C3E6FF;
   transform: translateY(-50%);
 }

 .main__about h3 {
   margin-bottom: 30px;
   padding: 20px 0;
   border-left: #27A2FD 10px solid; 
 }

 .main__about h3::after {
   content: "About us";
   top: 50%;
   left: 0px;
   transform: translateY(-50%);
   z-index: -10;
 }

 /* -- business -- */

 .main__business h3 {
   margin-bottom: 30px;
   text-align: center;
   padding: 20px 0;
 }

 .main__business h3::after {
   content: "Business";
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: -10;
   color: #8bcfff;
 }


 .main__works h3 {
   margin-bottom: 30px;
   display: flex;
   justify-content: center;
   font-weight: normal;
   z-index: 10;
}

.main__works h3::after {
   content: "Works";
   padding-bottom: 1rem;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
   border-bottom: #005B9F 10px solid; 
   line-height: 3.2rem;
   z-index: -10;
 }

 .main__recruit h3 {
   
   margin-bottom: 30px;
   padding: 20px 0;
   border-left: #005B9F 10px solid; 
 }

 .main__recruit h3::after {
   content: "About us";
   top: 50%;
   left: 0px;
   z-index: -10;
 }

 .main__contact h3 {
   margin-bottom: 30px;

   padding: 20px 0;
   border-left: #005B9F 10px solid; 
   z-index: 10;
 }

 .main__contact h3::after {
   content: "Contact";
   top: 50%;
   left: 0;
   z-index: -10;
 }



 /* --- contact btn --- */

.contact--btn {
   display: flex;
   align-items: center;
   justify-content: center;

   width: 140px;
   height: 33px;
   background-color: #FFB967;
   border: 1px solid #707070;
}

.contact--btn img {
   width: 25px;
   height: 25px;
   margin-right: 10px;
}

.contact--btn p {
   color: white;
   font-weight: bold;
}




/* ------Top header ------*/

.header {
   height: 100px;
   width: 100%;

   padding: 0 15px;

   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: white;

   z-index: 100;
}

#main .header {
   position: fixed;
   top: env(safe-area-inset-top);
   left: 0;
   right: 0;
   z-index: 300;
}

.header h1 {
   display: none;
}

.header__contents {
   height: 100%;
   padding: 10px 0;
}

/* ---header contact--- */

.header__contact {
   margin-bottom: 15px;

   display: flex;
   justify-content: right;
   align-items: center;

}

.header__contact--text {
   font-size: 1rem;
   font-family: "Klee One", cursive;

   margin-right: 1rem;
}

.header__contact--tel {
   margin-right: 1.5rem;

   font-family: "Shippori Mincho", serif;
   font-size: 2rem;
}

/* ---header nav --- */

.header__nav--list {
   display: flex;
   justify-content: right;

   font-family: "Zen Maru Gothic", sans-serif;
   font-size: 1rem;
}

.header__nav--items {
   border-right: 1px solid #333;
}


.header__nav--items:first-child {
   border-left: 1px solid #333;
}


.header__nav--item {
   margin: 0 1.5rem;

   position: relative;
   display: inline-block;
   text-decoration: none;
   color: #000;
}

.header__nav--item:hover {
   transform: scale(1.2);
   transition: all 0.3s ease;
}

.header__nav--item::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   height: 2px;
   width: 0;
   background-color: currentColor;
   transition: width 0.3s ease;

   color: #122A88;
 }

 .header__nav--item:hover::after {
   width: 100%;
 }

 /* burger btn */

 .nav__burger {
   display: none;
 }

 .hamburger {
   font: inherit;
   display: none;
   overflow: visible;
   margin: 0;
   padding: 15px;
   cursor: pointer;
   transition-timing-function: linear;
   transition-duration: .15s;
   transition-property: opacity, filter;
   text-transform: none;
   color: inherit;
   border: 0;
   background-color: transparent;
}

.hamburger-box {
   position: relative;
   display: inline-block;
   width: 40px;
   height: 24px;
}

.hamburger--squeeze .hamburger-inner {
   transition-timing-function: cubic-bezier(.55,.055,.675,.19);
   transition-duration: 75ms;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
   position: absolute;
   width: 40px;
   height: 4px;
   transition-timing-function: ease;
   transition-duration: .15s;
   transition-property: transform;
   border-radius: 4px;
   background-color: #122A88;
}

.hamburger-inner {
   top: 50%;
   display: block;
   margin-top: -2px;
}

.hamburger--squeeze .hamburger-inner:before {
   transition: top 75ms ease .12s, opacity 75ms ease;
}

.hamburger-inner:before {
   top: -10px;
}

.hamburger-inner:after, .hamburger-inner:before {
   display: block;
   content: "";
}

.hamburger--squeeze .hamburger-inner:after {
   transition: bottom 75ms ease .12s, transform 75ms cubic-bezier(.55,.055,.675,.19);
}

.hamburger-inner:after {
   bottom: -10px;
}

.hamburger-inner:after, .hamburger-inner:before {
   display: block;
   content: "";
}


.hamburger--squeeze.is-active .hamburger-inner {
   transition-delay: .12s;
   transition-timing-function: cubic-bezier(.215,.61,.355,1);
   transform: rotate(45deg);
}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {
   background-color: #122A88;
}

.hamburger--squeeze.is-active .hamburger-inner:before {
   top: 0;
   transition: top 75ms ease, opacity 75ms ease .12s;
   opacity: 0;
}

.hamburger--squeeze.is-active .hamburger-inner:after {
   bottom: 0;
   transition: bottom 75ms ease, transform 75ms cubic-bezier(.215,.61,.355,1) .12s;
   transform: rotate(-90deg);
}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {
   background-color: #122A88;
}





/* ーーー　footer ーーー */

footer {
   background-color: #005B9F;
   text-align: center;
}

.footer__nav {
   background-color: #AEDCFF;
   border: 1px white solid;
}

.footer__nav--list {
   display: flex;
   justify-content: center;
   align-items: center;
}

.footer__nav--items {
   padding:  2rem 0;
}

.footer__nav--item {
   padding: 0 2rem;
   border-right: 1px solid #333;
}


.footer__nav--items:first-child .footer__nav--item{
   border-left: 1px solid #333;
}

.footer__contents {
   margin: 2rem;
   color: white;
}

.footer__title {
   display: block;
   margin: 0 auto;
   width: 40vw !important;
}

.footer__title h1 {
   display: none;
}

.footer__contact {
   display: flex;
   justify-content: center;
   align-items: center;
}

.footer__contact--text {
   font-size: 0.7rem;
}
.footer__contact .tel {
   margin: 3rem;
   font-size: 2rem;
}  

.footer__links {
   display: flex;
   justify-content: center;

}

.footer__link {
   padding: 0 1rem;
}

.copy-light {
   margin-top: 2rem;
   padding: 2rem;
   border-top: 1px solid white;
   color: white;

   font-size: 0.7rem;
}






/* ----- main ----- */


/* --- main head --- */

.main__head {
   position: relative;

   max-width: 100%;
   height: 600px;
   margin-top: 80px;

   z-index: -10;

   overflow: hidden;
}

.head__slider {
   width: 100%;
   height: 600px;
   overflow: hidden;
   position: relative;
   margin: 0px auto;
   border: 1px solid #ccc;

 }
 .head__slides {
   display: flex;
   transition: transform 0.5s ease-in-out;
   width: 100%;
 }

 .head__slides img {
   width: 100%;
   height: 600px !important;
   object-fit: cover;
   flex-shrink: 0;

 }
/* 
 .nav-button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   color: #fff;
   border: none;
   padding: 7px;
   cursor: pointer;
   font-size: 100px;

   z-index: 10;
 }

 .prev {
   left: 10px;
 }

 .next {
   right: 10px;
 } */

 /* -- h2 -- */

h2 {
   font-family: "Shippori Mincho", serif;
   z-index: 100;

   color: white;

   font-size: 2.75rem;
   font-weight: bold;

   position: absolute;
   transform: translateY(-100%);
   top: 93%;
   left: 0;

 }

 
h2 span {
   font-size: 3.7rem !important;
 } 

 .skewed {
   position: absolute;
   top: -60%;
   width: 100%;
   height: 100%;
   background: #2c3e50;
   transform: skewY(22deg);
   transform-origin: top right;
   
   background-color: #27A2FD;
   opacity: calc(0.5);
 }


 .skewed--bottom {
   position: absolute;
   top: 90%;
   left: 0;

   max-width: 1200px;
   width: 100%;
   height: 100%;

   background: #2c3e50;
   transform: skewY(22deg);

   background-color: #27A2FD;
   opacity: calc(0.5);
 }

 /* ---- main news ---- */

 .main__news {
   padding: 50px 0;

   background-color: #E8F6FF;
 }

 .main__news h3 {
   display: none;
 }

 .main__news--area {

   max-width: 1000px;
   margin: 0 auto;
 }

 .main__news--list {
   padding: 2rem 0;

   border-bottom: 2px dotted #333;
 }

 .main__news--list:first-child {
   border-top: 2px dotted #333;
 }

 .main__news--items {
   max-width: 80%;
   margin: 0 auto;
   display: flex;

   font-size: 1rem;

   color: #005B9F;
 }

 .main__news--items span {
   width: 20vw;
 }

 .main__news--item {
   text-decoration: underline 1px #005B9F;
 }

 .main__news--btn {
   display: flex;
   justify-content: right;
   width: 100%;
   padding-right: 10%;
 }






 /* --- kari ---  */
 
 .main__link--btn {
   --primary-color: #373737;
   --hovered-color: #005B9F;
   position: relative;
   display: flex;
   font-weight: 600;
   font-size: 1.5rem;
   gap: 0.5rem;
   align-items: center;

   padding: 0;
   margin: 30px 0 0 0 ;
   border: none;
   background: none;
   cursor: pointer;
 }

 .main__link--btn p {
   margin: 0;
   position: relative;
   font-size: 1.5rem;
   color: var(--primary-color);
 }
 
 .main__link--btn::after {
   position: absolute;
   content: "";
   width: 0;
   left: 0;
   bottom: -7px;
   background: var(--hovered-color);
   height: 2px;
   transition: 0.3s ease-out;
 }
 
 .main__link--btn p::before {
   position: absolute;
   /*   box-sizing: border-box; */
   content: "詳しく見る";
   width: 0%;
   inset: 0;
   color: var(--hovered-color);
   overflow: hidden;
   transition: 0.3s ease-out;
 }
 
 .main__link--btn:hover::after {
   width: 100%;
 }
 
 .main__link--btn:hover p::before {
   width: 100%;
 }
 
 .main__link--btn:hover svg {
   transform: translateX(4px);
   color: var(--hovered-color);
 }
 
 .main__link--btn svg {
   color: var(--primary-color);
   transition: 0.2s;
   position: relative;
   width: 15px;
   transition-delay: 0.2s;
 }

 /* ---- main about ----  */

 .about__h3--767px {
   display: none;
 }

 .main__about {
   max-width: 1000px;
   width: 100%;
   margin: 100px auto 200px auto;
   display: flex;
 }

 .main__about div {
   width: 100% !important;
   position: relative;
 }

 .main__about img {
   width: 60%;
 }

 .about__img--767px {
   display: none;
 }

 .main__about h4 {
   margin-bottom: 1.7rem;
   font-size: 1.6rem;
   font-weight: bold;
 }

 .main__about--strong, .main__about--text {
   margin-bottom: 20px;
   width: 90%;
 }

 .main__about--strong {
   font-size: 1.3rem;
 }

 .main__about--text {
   line-height: 1.6rem;
 }

 .main__about--btn .main__link--btn{
   position: absolute;
   left: 40%;
 }

/* ーーー　メイン事業内容　ーーー */

.main__business {
   max-width: 1440px;
   width: 100%;
   margin: 0 auto;
   position: relative;
   color: white;
}

.main__business::after {
   position: absolute;
   top: -10%;
   width: 100%;
   height: 60%;
	content: "";background-image: linear-gradient(to bottom, rgba(60, 79, 255, 0.25), rgba(60, 79, 255, 0.25)), url(img/hirakara.jpg);
   background-size: cover; background-position: center; background-repeat: no-repeat;
   z-index: -100;
}

.main_business--text {
   text-align: center;
   margin-bottom: 3rem;
   font-size: 1.2rem;
}

.main__business--contents {
   display: flex;
   max-width: 1000px;
   width: 100%;
   margin: 0 auto;
   justify-content: space-between;
   color: #333;
}

.main__business--content {
   width: 30%;
}


.main__business--contents img {
   height: 240px;
   object-fit: cover;
}

.main__business--contents h4 {
   margin: 1rem 0;
   padding-bottom: 1rem;
   font-size: 1.3rem;
   font-weight: bold;
   text-align: center;
   border-bottom: 2px solid #122A88;
}

.main__business--contents p {
   line-height: 1.8rem;
}





/* --- メインワーク --- */


 .main__works {
   background-color: #e2f2fd;
   margin: 8rem auto;
   width: 100%;
   height: 100%;
   z-index: -200;
}



/* -- メインワーク　スライド　-- */
.main__works--slids {
   position: relative;
   height: calc( 34vw + 3.2rem + 7rem);
   width: 100%;
   overflow: hidden;
   margin: 5rem 0 0 0;


   display: flex;
   align-items: end;
   justify-content: center;
 }
 /* ーー　他のスライドを透明化　ーー */

 .main__works--slid img{
   object-fit: cover;
   height: 20vw;
   width: 100%;
   transition: all 0.3s ease;
 }

.slid2 img {
   height: 26.6vw !important;
   transition: all 0.3s ease;
 }
 
 .main__works--slid {
   position: absolute;
   bottom: 0;
   
   opacity: 1;
   z-index: 1;
 }
 
 /* slid1 → 左寄り・小さめ */
 .slid1 {
   left: 0;
   width: 30vw;
   opacity: 0.6;
   z-index: 2;
   transition: all 0.3s ease;
   font-size: 0.8rem;
 }
 
 /* slid2 → 中央・大きめ */
 .slid2 {
   left: 50%;
   width: 40vw;
   transform: translateX(-50%);
   opacity: 1;
   z-index: 3;
   transition: all 0.3s ease;
 }
 
  
 /* slid3 → 右・小さめ */
 .slid3 {
   right: 0;
   width: 30vw;
   opacity: 0.6;
   z-index: 2;
   transition: all 0.3s ease;
   font-size: 0.8rem;
 }

 .slid4 {
   right: 0;
   transform: translateX(100%);
   transition: all 0.3s ease;
   opacity: 0;
 }

 .slid5 {
   transform: translateX(-100%);
   left: 0;
   transition: all 0.3s ease;
   opacity: 0;
 }



/* ー　メインワークスのh４　ー */
 .main__works--slid h4 {
    width: 50%;
    height: 3.2rem;
    margin: 1rem auto 2rem auto;
    padding-bottom: 0.8rem;

    font-size: 1.2rem;
    text-align: center;
   border-bottom: #1433b2 3px solid;
 }

 .main__works--slid p {
   width: 75%;
   line-height: 1.2rem;
   height: 7rem;
   margin: 0 auto;
 }


/* ーー　マインワークス　ボタン　ーー */
.main__works--slids button {
   position: absolute;
   top: 17vw;
   z-index: 100;
   font-weight: bold;

   color: #005B9F;
}

.works--back {
   left: 25vw;
}

.works--back img {
   height: 4.5rem;
}

.works--next {
   right: 25vw;
   transform: rotate(180deg);
}

.works--next img {
   height: 4.5rem;
}

.main__works--btn {
   display: flex;
   justify-content: right;
   max-width: 60%;
   margin: 0 auto;
   padding-bottom: 5rem;
}


/* ーーー　メインリクルート　ーーー */

.main__recruit {
   position: relative;
   display: flex;
   flex-direction:row-reverse;
   max-width: 1440px;
   width: 100%;
   margin: 0 auto 10rem auto;
   padding: 3rem;
}

.main__recruit::after {
   position: absolute;
   top: 9rem;
   content: "";
   background-color: #EFFFF8;
   width: 100%;
   height: calc(100% - 8rem);
   z-index:-100;
}

.main__recruit--img {
   max-width: 40vw;
   object-fit: cover;
}

/* ーー　メインリクルート右側　ーー */

.main__recruit--area {
   position: relative;
   margin: 0 0 0 5rem;
}
.main__recruit--area.fade-in {
   transition: all 1.2s ease;
}

/* ーー　リクルートh３　ーー */

.main__recruit--h4 {
   position: absolute;
   left: 10%;
   font-size: 2.5rem;
}

.main__recruit--h4::after {
      content: "";
      background: url(img/X_BLUE.png);
      background-size: cover; background-position: center; background-repeat: no-repeat;
      bottom: 0;
      right: 0;
      transform: translate(50%, 50%);
      width: 60px;
      height: 60px;
      position: absolute;
      z-index: 10;
}

.main__recruit--h4s {
   position: absolute;
   left: 40%;
   font-size: 2.5rem;
   margin-top: 2.5rem;
}

/* ーー　リクルート　テキスト　ーー*/

.main__recruit p {
   margin: 9rem 0 0 0 ;

   line-height: 1.5rem;
}

/* ーー　リクルートエリア　img　ーー */

.recruit__area--img {
   display: flex;
   justify-content: space-around;
   object-fit: cover;
}

.recruit__area--img img {
   width: 20vw;
   height: 100%;
   margin: 3rem 0 0 0;
}

.recruit__area--img img:nth-child(2) {
   margin-top: 4.5rem !important;
}

/* ーーー　メインコンタクト　ーーー */

.main__contact--area {
   width: 100%;
   height: auto;
   
   background-color: white;
   background-image:linear-gradient(to bottom, white, rgba(111, 189, 249, 0.569)), url('img/hirakara.jpg') !important;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   z-index: -100;
}

.main__contact {
   max-width: 1000px;
   margin: 0 auto;
   padding-bottom: 5rem;
   display: flex;
}

.contact--left, .contact--right {
   width: 50vw;
   margin: 0 3rem;
}

.contact--left p {
   margin: 2rem 0;
}

.contact--left .tel {
   font-size: 2.5rem;
}


.contact--right .contact--btn {
   width: 200px;
   height: 50px;
	margin: 0 auto;
}

.contact--right .contact--btn img {
   width: 40px;
   height: 40px;
   margin-right: 10px;
}

.contact--right .contact--btn p {
   font-size: 1.5rem;
}

.main__contact--ins {
	margin-top: 60px;
}




/* media queri */

/* max1200px */
@media screen and (max-width: 1200px){

   .main__recruit--area {
      margin: 0 0 0 3rem;
   }
   .main__recruit--h4, .main__recruit--h4s {
      font-size: 2.3rem;
   }
}
/* max1200px end */


/* max1000px */
@media screen and (max-width: 1000px){

   .header {
      height: 90px;
      z-index: 300;
   }

   h3 {
      font-size: 1.8rem;
   }

   h3::after {
      font-size: 4.5rem;
   }

   /* header */
   .header__title {
      width: 30vw;
   }
   

   .header__contact--text {
      font-size: 14px;
   }


   .header__contact--tel {
      font-size: 1.4rem;
   }

   .header__nav--item {
      margin: 0 1rem;
   }


   .main__about {
      padding: 0 1rem ;
   }

   .main__recruit {
      overflow: hidden;
      max-width: 100%;
      padding: 1rem;
   }

   .main__business--contents {
      justify-content: space-around;
   }

   .main__recruit--area {
      margin: 0 0 0 2.8rem;
   }
   .main__recruit--h4, .main__recruit--h4s {
      font-size: 2.1rem;
   }

   .footer__nav--items {
      padding: 1.5rem 0;
   }

   .footer__title img {
      width: 30vw;
   }
}
/* max1000px end */
/* max900px */

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

   h3 {
      font-size: 1.5rem;
   }

   h3::after {
      font-size: 4rem;
   }

   .header {
      height: 80px;
      position: fixed;
      top: env(safe-area-inset-top);
      right: 0;
      left: 0;
   }

   .header__contents {
      display: none;
   }

   .hamburger {
      display: inline-block;
   }

   .nav__burger {
      display: block;
      position: absolute;
      top: 80px;
      right: -70vw;
   

      background-color: #005B9F;
      color: white;
      width: 70vw;
      height: calc(var(--vh, 1vh) * 90 - 80px);
      z-index: 1220;
      transition: all 0.2s ease-in;
   }

   .nav__burger--list {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      height: 100%;
      margin-left: 2rem;
   }

   .nav__burger.is-active {
      right: 0;
   }


   

   .works--back img , .works--next img{
      height: 3.5rem;
   }



}
/* max900px end */

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

   .main__link--btn p {
      font-size: 1rem;
   }

   h2 {
      margin-left: 10px;
      font-size: 1.8rem ;
   }

   h2 span {
      font-size: 2.5rem !important;
   }

   .header__title {
      width: 50vw;
   }

   .main__news--items {
      flex-wrap: wrap;
      max-width: 90%;
   }

   .main__news--items .date {
      width: 100vw;
      margin-bottom: 1rem;
   }

   .about__img--767px {
      display: block;
   }

   .main__about img {
      width: 100%;
      margin-bottom: 30px;
   }

   .main__about {
      display: block;
   }
   
   .max-1440px {
      display: none;
   }

   .main__about h3 {
      text-align: center;
      border-left: none;
   }

   .main__about h3::after {
      font-size: 3rem;
      width: max-content;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -10;
      border-bottom: 5px solid #122A88;
   }

   .main__about h4 {
      font-size: 1.4rem;
      text-align: center;
   }

   .main__about--strong {
      text-align: center;
      font-size: 1.2rem;
   }

   .main__about--text {
      width: 90vw;
      margin: 0 auto;
   }

   .main__business::after {
      height: 247px;
   }

   .main__business--contents {
      flex-direction: column;
   }

   .main__business--content {
      width: 100%;
      display: flex;
      padding: 0 1rem;
      margin: 1.5rem 0;
   }

   .main__business--content div {
      padding-left: 0.8rem;
   }

   .main__business--contents img {
      height: 30vw;
      width: 30vw;
   }

   .main__business--contents h4 {
      margin: 0 0 0.5rem 0;
      padding: 0 0 5px 1rem;
      text-align: left;
      border-bottom: 5px solid #005B9F;
   }

   .main__business--contents p {
      line-height: 1.2rem;
  }

  .main__business--contents .fade-in-left {
   transform: translate(0, 20px);
  }

  .main__business--contents  .fade-in-right  {
   transform: translate(0 ,50px);
  }

  .main__works {
   padding-bottom: 0.5rem;
  }
    .main__works h3::after {
        border-bottom: 5px solid #005B9F;
        padding: 0;
    }
  .works--next img , .works--back img {
   height: 2.5rem;
  }

   .works--next {
      right: 10vw;
   }
   .works--back {
      left: 10vw;
   }

   .main__works--slids {
      height: calc(40vw + 3.2rem + 7rem);
   }

   .main__works--slids button {
      top: 13.3vw;
   }


   .main__works--slid h4 {
      margin: 0.5rem auto 0.5rem auto;
      height: 2.2rem;
      width: 90%;
   }

   .main__works--slid p {
      width: 90%;
   }

   .main__works--slid img {
      height: 30vw;
   }

   .slid1 {
      left: -20vw;
      width: 40vw;
  }

  .slid2 {
   width: 60vw;
  }

  .slid2 img {
   height: 40vw !important;
}

  .slid3 {
   right: -20%;
   width: 40vw;
  }

  .main__recruit--area {
   margin: 0;
  }

  .main__recruit {
   display: block;
  }

  .main__recruit--h4 {
   left: 0;
  }

  .main__recruit--h4s {
   right: 0 !important;
   left: auto;
  }

  .recruit__area--img {
   display: block;
  }

  .recruit__area--img img {
   width: 80vw;
   margin-bottom: 2rem;
  }

  .recruit__area--img img:nth-child(2) {
   margin: 0 0 0 10vw !important;
}

.main__recruit--img {
   max-width: 80vw;
   margin-top: 1rem;
}

.main__recruit::after {
   right: 0;
}

/* main contact */ 

.main__contact {
   display: block;
}

.main__contact h3 {
   border: none;
   text-align: center;
   margin-bottom: 4rem;
}
.main__contact h3::after {
   transform: translate(-50%, -50%);
   left: 50%;
   border-bottom: 5px solid #005B9F;
   line-height: 4rem;
}

.contact--left, .contact--right {
   width: 95%;
   margin: 0 auto;
}

.contact--left p {
   width: 90%;
   margin: 2rem auto;
	display:flex; 
	justify-content:center;
	text-align:center;
}

.contact--left a {
   display: flex;
   justify-content: center;
}

.contact--right .contact--btn {
   margin: 3rem auto;
}

/* footer */

.footer__nav {
   display: none;
}

.footer__contents {
   margin: 0;
}

.footer__title img {
   width: 50vw;
   margin: 2rem auto;
}

.footer__contact {
   display: block;
}

.footer__contact--text {
   margin-bottom: 0.5rem;
}

.footer__contact--btn .contact--btn {
   margin: 2rem auto;
}

.footer__links {
   margin-top: 2rem;
}
}
  
/* max767x end */


/* -------------- about page -------------- */

/* 共通 */

#about #header {
   height: 100px;
}

.sub-page .header {
   position:fixed;
   top: env(safe-area-inset-top);
   left: 0;
   right: 0;
   background-color: transparent;
   color: white;
}

.sub-page .header.scrolled {
   background-color: white !important;
}

.sub-page .header__nav--item {
   color: white;
}

.sub-page .header__nav--items:first-child {
   border-left: 1px solid #ffffff;
}

.sub-page .header__nav--items {
   border-right: 1px solid #ffffff;
}

.scrolled {
   background-color: white;
   color: #333 !important;
}

.scrolled .header__nav--item {
   color: #333;
}

.scrolled .header__nav--items:first-child {
   border-left: 1px solid #333;
}

.scrolled .header__nav--items {
   border-right: 1px solid #333;
}

.subpage__head {
   height: calc(var(--vh, 1vh) * 60);
   position: relative;
}

.subpage__head--img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   object-position: 50% 100%;
}

.subpage__h2 {
   position:absolute;
   font-size: 2rem;
   color: #fff;
   bottom: -50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.subpage__h2::after {
   content: "About us";
   position: absolute;
   transform: translate(-50%, -50%);
   width:max-content;
   top: 5%;
   left: 50%;
   font-size: 5rem;
   color: #27A2FD;
   font-family: "Libre Baskerville", serif !important;
   font-style: italic;
   font-weight: bold;
   z-index: -10;
}

.subpage__h2--back {
   position: absolute;
   transform: translate(-50%, -50%);
   bottom: 0;
   left: 50%;
   font-size: 5rem;
   color: #C3E6FF;
   font-family: "Libre Baskerville", serif !important;
   font-style: italic;
   font-weight: bold;
}

/* about us main */

.about__company {
   max-width: 900px;
   width: 100%;
   margin: 100px auto;
   padding: 50px;
   text-align: center;
   border: 1px solid #333;
   box-shadow: 1px 2px 8px rgba(0, 0, 0.5, 0.5);
}

.about__company h3 {
   position: relative;
   font-size: 2.5rem;
   font-weight: bold;
   display: inline-block;
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
}

/* アニメーションする下線 */
.animated-border::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0; /* ← 右から */
   width: 100%;
   height: 5px;
   background-color: #6aa8e9;
   transform: scaleX(0);       /* 最初は非表示 */
   transform-origin: left;    /* 右から左に伸ばす */
   transition: transform 2s ease;
 }
 
 /* 表示されたら下線が右から左に出てくる */
 .animated-border.show::after {
   transform: scaleX(1);
 }

.about__company .h3--subtitle {
   font-size: 1.8rem;
   margin-bottom: 2.5em;
}

.about__company .text {
   font-size: 1.2rem;
}

/* vision */

.vision {
   position: relative;
   padding: 100px 0;
   background-image: url(img/hirakara.jpg);
   background-position: [center];
   background-repeat: no-repeat;
   background-size: cover;
}

.vision .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.5);
}

.vision .text-area {
   position: relative;
   max-width: 70%;
   width: 100%;
   margin: 0 auto;
   padding: 5rem;
   background-color: white;
   border: 1px solid #333;
   z-index: 10;
}

.vision h3 {
   text-align: center;
   margin: 0 auto 3rem auto;
   color: #122A88;

   font-size: 1.8rem;
}

.vision p {
   line-height: 2rem;
}

/* business */

.business {
   position: relative;
   padding-bottom: calc(var(--vh, 1vh) * 10);
}

.business__background {
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #DDF1FF;
   z-index: -100;
}

.business h3 {
   position: relative;
   text-align: center;
   padding: 150px 0;
}

.business h3::after {
   content: "Business";
   position: absolute;
   top: 50%;
   left: 50%;
   font-size: 5rem;
   font-family: "Libre Baskerville", serif !important;
   font-style: italic;
   font-weight: bold;
   border-bottom: 7px solid #27A2FD;
   color: #afdbfb;
   transform: translate(-50%, -50%);
   z-index: -10;
}

.business section {
   display: flex;
   max-width: 1000px;
   width: 100%;
   height: 25rem;
   margin: 0 auto 200px auto;
}

.business img {
   max-width: 50%;
   width: 100%;
   object-fit: cover;
}

.business .text-area {
   padding: 2rem 5% 2rem 0;
}

.business .text-area h4 {
   text-align: center;
   border-bottom: 3px solid #27A2FD;
   font-size: 1.8rem;
   padding-bottom: 1rem;
   margin-bottom: 2rem;
}

.business .text-area p {
   line-height: 2rem;
   font-size: 1rem;
}

.business__estate {
   flex-direction:row-reverse;
}

.business__estate .text-area {
   padding: 2rem 0 2rem 5%;
}


/* company */

.company h3 {
   color: #122A88;
   text-align: center;
   padding: 5rem 0 3rem 0;
}

.company table {
   width: 900px;
   margin: 0 auto 200px auto;
   border: 1px solid #333;
}

.company th , .company td {
   padding: 1.1rem;
}

.company th {
   width: 300px;
   border-right: 1px solid #333;
   border-bottom: 1px solid #333;
   vertical-align: middle;
   background-color: #c3c3c35d;
}

.company td {
   width: 600px;
   border-bottom: 1px solid #333;
   vertical-align: middle;
}

.company .border-none th, .company .border-none td {
   border-bottom: 0px solid #333;
   padding: 1.1rem 1.1rem 0 1.1rem;
}

/* about page responsiv */

/* max1000px */
@media screen and (max-width: 1000px){

   .vision .text-area {
      padding: 3rem;
   }

   .vision p {
      line-height: 1.8rem;
   }

   .business section {
      max-width: 95%;
   }

   .company table {
      width: 800px;
   }
}
/* max1000px end */
/* max900px */
@media screen and (max-width: 900px){

   .sub-page main {
      margin-top: 0;
   }

   .about__company {
      max-width: 700px;
      padding: 20px;
   }

   .about__company h3 {
      font-size: 2.2rem;
   }

   .about__company .h3--subtitle {
      font-size: 1.6rem;
      margin-bottom: 2rem;
   }

   .vision .text-area {
      padding: 2.5rem;
   }

   .business {
      padding-bottom: 1rem;
   }

   .company table {
      max-width: 700px;
   }

}
/* max900px end */
/* max767px */
@media screen and (max-width: 767px){

   #about #header {
      height: 80px;
   }

   .subpage__h2::after {
      font-size: 4rem;
   }

   .subpage__h2 {
      font-size: 1.8rem;
   }

   .about__company {
      max-width: 95%;
   }

   .about__company h3 {
      font-size: 1.3rem;
   }

   .about__company .h3--subtitle {
      font-size: 1.1rem;
   }

   .animated-border::after {
      height: 2px;
   }

   .about__company .text {
      font-size: 1rem;
      line-height: 1.3rem;
   }

   .vision .text-area {
      max-width: 85%;
      padding: 2rem 1rem;
   }

   .vision h3 {
      font-size: 1.4rem;
   }

   .vision p {
      line-height: 1.5rem;
   }

   .business section {
      flex-direction: column-reverse;
      height: 100%;
      max-width: 90%;
      margin: 0 auto 50px auto;
   }

   .business img {
      max-width: 100%;
   }

   .business .text-area {
      padding: 2rem 0 ;
  }

  .business .text-area p {
   line-height: 1.5rem;
  }

   .company table {
      max-width: 95%;
	   width:100%;
   }

   .company th, .company td {
      padding: 1rem 0.5rem;
   }

   .company .border-none th, .company .border-none td {
      padding: 1rem 0.5rem 0 0.5rem;
   }
}



/* ----------- news page ---------- */

.news .subpage__h2::after {
   content: "News";
}

.news__contents {
   max-width: 1000px;
   width: 100%;
   margin: 0 auto;
}

.news__contents h3 {
   font-size: 1.8rem;
   text-align: center;
   padding: 5rem 0 3rem 0;
}

.news__contents ul {
   padding-bottom: 200px;
}

.news__contents li {
   display: flex;
   flex-direction: column;

   padding: 2rem 1rem;
   border-bottom: 2px solid #27A2FD;
}
.news__contents li:first-child {
   border-top: 2px solid #27A2FD;
}

.news__contents span {
   margin-bottom: 0.8rem;
}


.information_pop::after {
   content: "お知らせ";
   font-size: 0.9rem;
   margin-left: 1rem;
   padding: 0.2rem 1rem;
   background-color: #FFA53C;
   color: white;
   border-radius: 30px;
}

.news_pop::after {
   content: "ニュース";
   font-size: 0.9rem;
   margin-left: 1rem;
   padding: 0.2rem 1rem;
   background-color: #005B9F;
   color: white;
   border-radius: 30px;
}

/* max1200px end */
/* max1000px */
@media screen and (max-width: 1000px){
   
   .news__contents {
      max-width: 850px;
   }

}
/* max1000px end */
/* max900px */
@media screen and (max-width: 900px){

   .news__contents {
      max-width: 95%;
   }

   .news__contents ul {
      padding-bottom: 100px;
   }

}
/* max900px end */
/* max767px */
@media screen and (max-width: 767px){

   .news__contents h3 {
      font-size: 1.5rem;
   }

   .news__contents li:first-child {
      border-top: 1px solid #27A2FD;
  }

  .news__contents li {
   border-bottom: 1px solid #27A2FD;
  }

   .information_pop::after {
      padding: 0.1rem 0.8rem;
   }

   .news_pop::after {
      padding: 0.1rem 0.8rem;
   }

}
/* max767px end */


/* -------- news page template --------- */

.news__template {
   max-width: 1000px;
   margin: 0 auto;
}

.news__template h3 {
   margin-top: 3rem;
   padding: 10px;
   background-color: #D9EFFF;
   border: 1px solid #222;
   font-size: 1.5rem;
}

.date-author {
   text-align: right;
   margin: 0.5rem 1rem 0 0;
   color: #565656;
}

.date-author .date {
   margin-right: 1rem;
}

.news__template .text-area {
   margin-bottom: 50px;
}

.news__template .text-area img {
   width:fit-content;
   height:fit-content ;
   object-fit: cover;
   margin: 3rem 0;
}

.news__template .text-area p {
   line-height: 2rem;
}

.news__template .news__btn--back {
   position: relative;
   display: flex;
   justify-content: right;
   margin: 0 5rem 100px 0;
   font-size: 1.2rem;
   text-decoration: underline;
}

.news__template .news__btn--back::before {
   content: "≪";
}


/* max1000px */
@media screen and (max-width: 1000px){

   .news__template {
      max-width: 90%;
   }

}
/* max1000px end */
/* max900px */
@media screen and (max-width: 900px){

}
/* max900px end */
/* max767px */
@media screen and (max-width: 767px){

   .news__template h3 {
      font-size: 1.2rem;
   }

   .date-author {
      font-size: 14px;
   }

   .news__template .text-area p {
      line-height: 1.5rem;
   }

   .news__template .news__btn--back {
      font-size: 18px;
      margin: 0 1rem 100px 0;
   }
}
/* max767px end */



/* --------- works oage -------- */

.works {
   background-color: whitesmoke;
   z-index: 0;
}

.works .subpage__h2::after {
   content: "Works";
}

.works .works__contents {
   max-width: 1200px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   width: 100%;
   margin: 100px auto;
}

.works__content {
   position: relative;
   max-width: 30%;
   width: 30vw;
   padding: 1rem;
   margin-bottom: 3rem;
   display: flex;
   flex-direction: column;
   border: 1px solid #333;
   background-color: white;
   box-shadow: 2px 2px 8px rgba(0, 0, 0.5, 0.5); /* 影 */
}
/* 
.background {
   content: "";
   position: absolute;
   top: 1rem;
   left: 1rem;
   width: 100%;
   height: 100%;
   background-color: #000;
   z-index: ;
} */

.works__content .text-area {
   order: 2;
}

.works__content .text-area h3 {
   font-size: 1.3rem;
   font-weight: bold;
   margin: 0.5rem 0 ;
   padding-bottom: 0.3rem;
   border-bottom: 2px solid #27A2FD;
}


.works__content .text-area .where {
   margin-bottom: 0.5rem;
   padding-bottom: 0.3rem;
}

.works__content .text-area .text {
   line-height: 1.5rem;
}

.works__content img {
   height: calc(326px * 0.75);
   order: 1;
   object-fit: cover;
   object-position: center;
}

/* max1200px */
@media screen and (max-width: 1200px){
   
   .works .works__contents {
      max-width: 95%;
   }

   .works__content img {
      height: calc(30vw * 0.75);
   }

}
/* max1200px end */
/* max1000px */
@media screen and (max-width: 1000px){


   .fade-in-right {
      transform: translateX(20px);
    }
    .fade-in-bottom {
      transform: translateY(20px);
    }
    .fade-in-left {
      overflow: hidden;
      transform: translateX(-20px);
    }

   .works .works__contents {
      max-width: 95%;
   }

   .works__content {
      max-width: calc(var(--vh, 1vh) * 30);
      width: 100%;
   }

   .works__content img {
      height: calc(30vw * 0.75);
   }

}
/* max1000px end */
/* max900px */
@media screen and (max-width: 900px){


}
/* max900px end */
/* max767px */
@media screen and (max-width: 767px){

   .works .works__contents {
      max-width: 90%;
   }

   .works__content {
      max-width: 100%;
      width: 100%;
   }

   .works__content img {
      height: calc(90vw * 0.75);
   }
}
/* max767px end */

/* -------- contact page -------- */


.contact .subpage__h2::after {
   content: "Contact";
}

.contact-from {
   max-width: 1000px;
   width: 100%;
   margin: 100px auto;
   border-top: 1px solid #333;
}

.contact__content {
   display: flex;
   align-items: center;
   width: 100%;
   border-left: 1px solid #333;
   border-right: 1px solid #333;
   border-bottom: 1px solid #333;
   height: 80px;
}


.contact__title {
   width: 30%;
   height: 100%;
   padding-left: 10px;
   display: flex;
   align-items: center;
   border-right: 1px solid #333;
   background-color: #F7F7F7;
}

.contact__content p {
   width: 70%;
}

.contact__content input {
   border: 1px solid #888888;
   width: 90%;
   height: 50%;
   padding: 10px;
   margin-left: 1rem;
}

.contact__content.text-area {
   height: 10rem;
}

.contact__content textarea {
   height: 9rem;
   border: 1px solid #888888;
   width: 90%;
   padding: 10px;
   margin-left: 1rem;
}

input[type="radio"] {
   appearance: auto;         /* ← デフォルトの表示を戻す（重要） */
   -webkit-appearance: radio; /* Safari向け */
   margin: 0 4px 0 0;
   width: auto;
   height: auto;
 }

.wpcf7-not-valid-tip {
   margin-left: 1rem;
}

.contact__btn {
   display: flex;
   justify-content: center;
   margin: 3rem;
}

.wpcf7-submit {
   display: flex;
   justify-content: center;
   padding: 1rem 3rem;
   border: 1px solid #888888;
   background-color: #27A2FD;
   color: white;
}



/* max1000px */
@media screen and (max-width: 1000px){

   .contact-from {
      max-width: 90%;
   }
}
/* max1000px end */
/* max900px */
@media screen and (max-width: 900px){

}
/* max900px end */
/* max767px */
@media screen and (max-width: 767px){
	
	
	.company th {
	max-width: 30%;
		width: 100%;
	}
	
	.company td {
		max-width: 70%;
		width: 100%;
	}

   .contact__content {
      height: 60px;
   }

   .contact__title {
      max-width: 30%;
      width: 100%;
   }

   .contact__content input {
      padding: 5px;
   }
	
	.recruit__area--img .fade-in.show{
		padding:0 !important;
		
	}

    .main__recruit--img {
		margin: 0 0 0 auto !important;
    }
	
	.recruit__area--img img:first-child{
		margin: 50px 0 !important;
	}
	
	.recruit__area--img img {
        margin: 0 0 0 10vw !important;
    }

}
/* max767px end */



/* ------ privacy policy -------- */

.works .works__contents {
    justify-content: space-around;
}

.privacy {
	margin-bottom: 70px;
}

.privacy h3 , .privacy pre {
	max-width: 1000px ;
    width: 100% ;
    margin: 0 auto;
}

.privacy h3 {
	margin: 70px auto 50px auto; 
	text-decoration-line: underline;
}

.privacy  .subpage__head {
	margin-bottom: 80px ;
}

@media screen and (max-width: 1000px){
	
	.privacy h3 , .privacy pre {
		max-width: 95% !important;
	}
	
	.contact__content p {
    width: 100%;
}
	
	.footer__contact--text {
		margin: 0 !important;
	}
	
	.company tr {
		width: 100%;
	}
	
	.company th {
		width: 30% !important;
	}
	
	.company td {
		width: 70% !important;
	}
	
}

.footer__contact--text {
	margin-right: 3rem;
}


@media screen and (max-width: 767px){
	.main__works h3::after{
		top:25%;
	}
	
	.main__business--contents .fade-in.show {
		padding: 0 5px ;
	}
	
	.main__about {
    margin: 50px auto 150px auto;
}
	.main__works {
		margin: 50px auto;
	}
	
	.main__recruit {
		    margin: 0 auto 100px auto;
	}
	
	.skewed {
		top: -70%;
	}
	.skewed--bottom {
		top: 80%;
	}
	h2 {
		margin-left: 5px ;
	}
	.main__about h3::after {
		font-size: 3.5rem;
	}
	
	.subpage__head {
    height: 500px !important;
    position: relative;
}
	
	#sb_instagram.sbi_tab_col_2 #sbi_images {
		padding: 10px;
	}

}

.news {
	background-color: #E8F6FF;
}