@charset "UTF-8";


main {
  font-family: "Shippori Antique B1", sans-serif;
  font-weight: 400;
  font-style: normal;
}



/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
/*  共通使用                                                            */      
/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/

/* ------------------------------------------------------------- */
/* StyleSection _  .mask_wrap  テキストをベタ塗りで表示          */
/*  【 移動可能 】                                               */
/* ------------------------------------------------------------- */
.mask_wrap{
  display: table;
  overflow: hidden;
}
.mask-wrap .mask{
  display: table;
  position: relative;
  margin-bottom: .25em;
  left: -100%;
  overflow: hidden;
}
.mask-wrap .mask-bg{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ffffff; 
}



/* ------------------------------------------------------------- */
/* StyleSection _  .item_box マウス over で上にテキスト表示      */
/*  【 移動可能 】                                               */
/* ------------------------------------------------------------- */
/* マウス over で上にテキスト表示 */
.item_box {
  position: relative;

  .item_mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(f, f, f, 0.8);
    opacity: 0;
  }
  .item_mask-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding: 0.5em;
    font-size: 4em;
    text-align: center;
    color: #fff;
    transform: translateY(-50%);
  }
  a:hover .item_mask {
    opacity: 1;
  }
  /* -fade-in */
  .item_mask {
    transition: opacity 1.0s ease;
  }
}

@media screen and (max-width: 1050px) {
  .item_box {
    .item_mask-text {
      top: 70%;
      font-size: 2.4em;
    }
    .item_mask {
      opacity: 0.8;
    }
  }
}



/* ------------------------------------------------------------- */
/* StyleSection _ bottom info                                    */
/*  【 移動可能 】                                               */
/* ------------------------------------------------------------- */

/* ========== スクロースして最下部でアニメーション 表示 ========== */
#targetElement {
  opacity: 0;      /* 初期状態では非表示 */
  transition: opacity 2s ease-in-out;
}
#targetElement.show {
  opacity: 1;
}

footer#targetElement {
  z-index: -2;
  height: 75vh;
  position: fixed;
  bottom: 0;

  /*===== Footer 内表示 =====*/
  .blk1 {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .blk1_1 {
    position: absolute;
    top: 50%;
    left: 50%;
    
    width: 800px;
    height: 500px;
    margin: -250px 0 0 -400px; /* 完全に中央に配置するため wheig と htidth の margin を半分の負の数に設定 */
  }
}


@media screen and (min-width: 1051px) {
  /* スライドして背景だけが残る感じにするためのカバー */
  #footer-cover {
    height: 80vh;
    width: 100%;
    min-height: 980px;
  }
}

@media screen and (max-width: 1050px) {
  /* スライドして背景だけが残る感じにするためのカバー */
  #footer-cover {
    height: 70vh;
    width: 100%;
  }

  footer#targetElement {
    .blk1_1 {
      position: absolute;
      top: 50%;
      left: 50%;
    
      width: 400px;
      height: 300px;
      margin: -150px 0 0 -200px; /* 完全に中央に配置するため wheig と htidth の margin を半分の負の数に設定 */
   }
 }
}


/* ------------------------------------------------------------- */
/* StyleSection _  section Setting                               */
/* ------------------------------------------------------------- */
.head-wrap {
}
.slider-wrap {
  width: 100vw;
}
.foot-wrap {
  width:100vw;
  height: 100vh;
  background: #ccc;
  position: relative;
}

@media screen and (min-width: 1051px) {
  .head-wrap {
    position: relative;
  }
  .foot-wrap {
    position: relative;
  }
}
@media screen and (max-width: 1050px) {

}


/* ------------------------------------------------------------- */
/* StyleSection _ TEXT LOOP                                      */
/* ------------------------------------------------------------- */
.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  
  width:100%;
  margin: 1px 0;
  border-top: 1px solid #21823F;
  border-bottom: 1px solid #21823F;

  .text {
    display: inline-block;
    padding-right: 0.5em;
    animation: marquee 20s linear infinite;
    
    color: #21823F;
    font-size: 2em;
    font-weight: 700;
    letter-spacing: 1em;
  }
  
  .text2 {
    display: inline-block;
    padding-right: 0.5em;
    animation: marquee 20s linear infinite;
    
    color: #21823F;
    font-size: 5em;
    font-weight: 900;
    letter-spacing: 0.5em;
  } 
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}





/* ------------------------------------------------------------- */
/* StyleSection _ 画像２分割スライド表示                         */
/* ------------------------------------------------------------- */
.img-wrap1 {
  overflow: hidden;
  position: relative;
}

.img-wrap1::before,
.img-wrap1::after {
  animation: 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #fff;
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.img-wrap1::before {
  animation-name: img-wrap-before;
  inset: 0 0 50%;
}

.img-wrap1::after {
  animation-name: img-wrap-after;
  inset: 50% 0 0;
}

@keyframes img-wrap-before {
  100% {
    transform: translateX(100%);
  }
}

@keyframes img-wrap-after {
  100% {
    transform: translateX(-100%);
  }
}


@media screen and (max-width: 1050px) {
  #construction .left-cont {
    min-width:220px;
  }

  #construction .right-cont .text-cont {
    p {
      padding: 70px 10px;
      text-align: center;
      font-size: 3em;
      font-weight: 700;
      letter-spacing: 0.2em;
    }
    div {

    }
  }
}



/* ------------------------------------------------------------- */
/* StyleSection _ foot-wrap                                      */
/* ------------------------------------------------------------- */
/*
.foot-wrap {
  height: 90vh;
  width: 100%;  background-color: #0D220D;
}
*/




/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
/* StyleSetting_ #home                                                  */      
/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/

/* ------------------------------------------------------------- */
/* StyleSection_ head-wrap  ( 画像ギャラリー )                   */
/* ------------------------------------------------------------- */
#home .hw-box {

  width: 100vw;

  .blk1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100vw;
    height: 74vh;
  }
  .item1, .item2, .item3 {
    width: calc(100% / 3 - 30px);
    overflow: hidden;
  }
  .blk1 {
    position: relative;
  }
  .fv1-top-title {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 1050px) {
  #home .hw-box {

    .item1{
      width: 100vw;
    }
    .item2, .item3{
      display: none;
    }
  }
}

/* ------------------------------------------------------------- */
/* StyleSection _ gallery  ( 画像の遅延処理 )                    */
/* ------------------------------------------------------------- */
#home .hw-box .blk1 div {
  position: relative;
}
.fade-img1 img, .fade-img2 img, .fade-img3 img {
  width: 100%;        /* 画像の幅 */
  opacity: 0;          /* 初期状態は非表示 */
  animation: fadeIn 3s ease-in-out forwards; /* アニメーションの設定 */
  position: absolute;
  bottom: 0;
  transform: scale(1.1); 
}
.gallery .fade-img1 img { animation-delay: 0s;   }
.gallery .fade-img2 img { animation-delay: 0.2s; }
.gallery .fade-img3 img { animation-delay: 0.6s; }

@keyframes fadeIn {
  0% {
    opacity: 0; /* 初期状態は非表示 */
    transform: scale(1);
  }
  100% {
    opacity: 1; /* 完全表示 */
    transform: scale(1.1); /* 拡大率 */
  }
}


/* ------------------------------------------------------------- */
/* StyleSection _ slider-wrap ( タイトル設定  )                  */
/* ------------------------------------------------------------- */
@media screen and (min-width: 1051px) {
  .slider-wrap .blk1 {
    width: 100vw;

    display:flex;
    flex-wrap: nowrap;
    justify-content:space-between;

    /* タイトル BOX */
    .ttl_box {
      width: 24%;
      padding: 20px 0;
    }
    .ttl_box_inner {
      border-radius: 0 20px 20px 0;
      box-shadow: 2px 2px 8px gray;
      overflow: hidden;
      background-image: url("../../home/img/ttl_box_bk.webp");
    }
    .ttl_box_inner h2 {
      padding: 4px 12px;
      font-size:2em;
      height: 80px; 
    }
    .ttl_box_inner p {
      padding: 4px 12px 4px 20px;
      font-size: 1.4em;
      line-height: 1.3em;
      height: 190px; 
    }
  }
}


@media screen and (max-width: 1050px) {
  .slider-wrap .blk1 {
    /* =====  タイトル BOX ===== */
    .ttl_box_inner {
      width: 100vw;
      overflow: hidden;
      background-image: url("../../home/img/ttl_box_bk.webp");
    }
     .ttl_box_inner h2 {
      text-align: center;
      font-size: 2em;
      padding: 20px 0;
    }
    .ttl_box_inner p {
      padding: 0 30px 20px 30px;
      font-size: 1.2em;
      line-height: 1.3em;
    }
  }
}


/* ------------------------------------------------------------- */
/* StyleSection _ head-wrap 内 .hw-box .blk2 ( スライダー )      */
/* ------------------------------------------------------------- */
  .slider-wrap .slider {
  
    margin-top: 30px;
    width: 74%;                         /*  【注意】 .ttl_box と調整  */

    img {
      width: 100%;
      height: 21.9vh;                   /* 写真の高さを指定 */
      min-height: 264px;                /* 最小値を指定 */
      border-radius: 5px;
      box-shadow: 3px 3px 8px gray;
    }
    .slick-slide {
      padding: 0 10px;                  /* 左右に10pxの隙間 */
    }
    .slick-list {
      margin: 0 -10px;                  /* スライダー端のずれを相殺 */
      height: auto;
    }
  }
@media screen and (min-width: 1051px) {
}
@media screen and (max-width: 1050px) {
  .slider-wrap .slider {
  
    margin-top: 20px;
    width: 100%;

    img {
      height: 19vh;                     /* 写真の高さを指定 */
    }

    .slick-slide {
      padding: 0 6px;                   /* 左右に10pxの隙間 */
    }
    .slick-list {
      margin: 0 -6px;                   /* スライダー端のずれを相殺 */
      height: auto;
    }
  }
}




/* ------------------------------------------------------------- */
/* StyleSection _ .mid-wrap1  パララックス                       */
/* ------------------------------------------------------------- */
.mid-wrap1 {

  width: 100%;
  background-color: #0D220D;
  padding: 30px 0;
  
  .blk1 {
  
    position: relative;
    margin-inline: auto;


    img {
      width: 100%;
      height: auto;
      vertical-align: bottom;
    }
    .js-sticky2 {
      position: sticky;
      top: 0;
    }
    .js-sticky2 .js-sticky-img {
      height: 100%;
    }
    .js-sticky2 .js-sticky-img img {
      height: 100%;
      object-fit: cover;
    }
    .c-card {
      background: #fff;
      text-align: center;
      color: #000;
      overflow: hidden;
    }
  }
}

@media screen and (min-width: 1051px) {
  .mid-wrap1 {
    .blk1 {
    
      max-width: 1200px;
      padding-inline: 40px;

      .c-card {
        padding-top: 32px;
        border-radius: 40px;
      }
      .c-card__title {
        font-size: 40px;
      }
      .c-card__desc {
        margin-top: 16px;
        margin-bottom: 24px;
        font-size: 1.6em;
      }
    }
  }

}


@media screen and (max-width: 1050px) {
  .mid-wrap1 {
    .blk1 {
 
      padding-inline: 10px;

      .c-card {
        padding-top: 28px;
        border-radius: 40px;
      }
      .c-card__title {
        font-size: 40px;
      }
      .c-card__desc {
        margin-top: 16px;
        margin-bottom: 24px;
        font-size: 1.2em;
        letter-spacing: -0.1em;
      }
    }
  }
}




/* ------------------------------------------------------------- */
/* StyleSection _ .mw-blk ピン止めスクロールトリガー             */
/* ------------------------------------------------------------- */
.mid-wrap2 {
  width: 100vw;

  /*===== pin スクリプト内使用 設定 =====*/
  .pin-spacer {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); //四角形
  }
  .event1 .image {
    top: 50%;
    background-image: url("../../home/img/pin/pin_csec_img_900x1200_event1.webp");
  }
  .event2 .image {
    background-image:  url("../../home/img/pin/pin_csec_img_900x1200_event2.webp");
  }
  .event3 .image {
    background-image:  url("../../home/img/pin/pin_csec_img_900x1200_event3.webp");
  }
  .event4 .image {
    background-image:  url("../../home/img/pin/pin_csec_img_900x1200_event4.webp");
  }

  /*===== pin セクション 設定 =====*/
  .mw-blk1 {
    width: 100vw;
    background-color: #B37431;
  }

  .box {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background-color: #ccc;
  }
  .pinSection {
    height: 100%;
    width: 100vw;
    position: relative;
  }
  .image {
    transform: translate(-50%, -50%);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat; 
  }

}

.pin_inner {
/* .come { background-image: url("../../home/img/pin/pin_csec_img_900x1200_event4.webp"); } */
 .come { background-color: #EFEFEF; }

}


/*===== pin セクション PC  設定 =====*/
@media screen and (min-width: 1051px) {
  .box {
    min-height: 1000px;  /*最小高さを設定*/ 
  }

  .pinSection {
    min-width: 1050px;
  }


  /*===== 写真表示 div =====*/
  .image {
    top: -50%;
    left: 25%;
    height: 600px;
    width: 450px;
  }

  /*===== 写真連動 div =====*/
  .pin_tbox1, .pin_tbox2 {
    right: 10%;
    position: absolute;
    height: 500px;
    width: 36%;

  }

  /* 1枚目のみ設定を変える */
  .pin_tbox1 {
    top: 30%;
  }
  /* ２枚目以降は設定共通 */
  .pin_tbox2 {
    top: -70%;
  }

  .pin_inner {
    width: 100%;
    height: 100%;
    position: relative;
    
    padding: 20px 40px 40px 40px;
    background-color: #fff;

    text-shadow: 2px 2px 4px gray;

    border-radius: 10px;
    box-shadow: 3px 3px 10px gray;

  }
  .pin_inner p{
    font-size: 2.8em;
  }
  .pin_inner div.come {
    padding: 30px 14px 14px 14px;
    font-size: 1.8em;
    letter-spacing: -0.1em;
    min-height: 360px;
    border-radius: 10px;
  }
  
  /* circle 画像を回転 */
  .circle-img-l, .circle-img-r {
    position: absolute;
    top:  -200px;
    left: -400px;
    z-index: -1;
  }
  .circle-img-l img {
    width: 600px;
  }
  .circle-img-r img {
    width: 600px;
  }
}


/*===== pin セクション SP  設定 =====*/
@media screen and (max-width: 1050px) {

  .event1 .image {
    top: 40%;   /* 【注意】下記と連動値 */
   }

  /*===== 写真表示 div =====*/
  .image {
    top: -60%;   /* 【注意】.event1 .image の top を100 から差し引き分をマイナス */
    left: 50%;
   
    height: 70vh;
    width: 80vw;
    z-index: 3;
  }

  /*===== 写真連動 div =====*/
  .pin_tbox1, .pin_tbox2 {
    left : 5vw;
    width: 90vw;
    position: absolute;
    box-shadow: 3px 3px 8px gray;
    z-index: 4;
  }

  /* 1枚目のみ設定を変える */
  .pin_tbox1 {
    bottom: 6vh;
  }
  /* ２枚目以降は設定共通 */
  .pin_tbox2 {
 /*   top:-40vh; */
    bottom: 106vh;
  }
  .pin_inner {
    height: 38vh;
    padding: 10px 5px;
    
    border-radius: 10px;
    background-color: #fff;
  }
  .pin_inner p{
    padding-left: 10px;
    font-size: 2em;
  }
  .pin_inner div.come {
    padding: 14px 14px 14px 14px;
    font-size: 1.4em;
    line-height: 1.2em;

    min-height: 23vh;
    border-radius: 10px;
  }

  /* circle 画像を回転 */
  .circle-img-l, .circle-img-r {
    position: absolute;
    top:  -200px;
    left: -150px;
    z-index: -4;
  }
  .circle-img-l img {
    width: 500px;
  }
  .circle-img-r img {
    width: 500px;
  }
}


/* サークル回転アニメーション */
.circle-img-l img {
  animation:15s linear infinite rotation-l;
}
.circle-img-r img {
  animation:15s linear infinite rotation-r;
}
@keyframes rotation-l{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(-360deg); }
}
@keyframes rotation-r{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}



/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
/*  StyleSetting_ #construction                                                */      
/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/

#construction .sec99 {
  position: relative;
  height: 380px;
  background: url(../images/ttl/construction_ttlbg_pc.webp) bottom center no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 1050px) {
  #construction .sec99 {
    height: 480px;
    background: url(../images/ttl/construction_ttlbg_sp.webp) bottom center no-repeat;
    background-size: 100%;
    
  }
}



#construction .mid2 {
  width:100%;
  height: 100%;
  display: flex;
  justify-content: space-between; /* または space-around, space-evenly */

  background-color: #fff;
  padding-bottom: 20px;
}


#construction .left-cont {
  position: relative;

  .fixe-cont {
    position: sticky;
    top: 20%;
    left: 0;

    width: 100%;
    height: 100vh;
  }
/*
  .img-wrap {
    .img-blk1 { background-color: #ccc; }
    .img-blk2 { background-color: #1B451B; }
    .img-blk3 { background-color: #ccc; }
  }
*/
  .js-sticky-img {  
    margin-bottom: -2px;  /* 画像の下に余白が出るため調整 */
    padding-right: 10px;
  }
  img {
    width:100%;
    height:66.2vh;
    border-radius: 10px;
  }
}
@media screen and (min-width: 1051px) {
  #construction .left-cont {
    width: 40%;
    min-width:380px;
    height: 100vh;
  }
}
@media screen and (max-width: 1050px) {
  #construction .left-cont {
  
    width: 40%;
    height: 100vh;
  
    .js-sticky-img {  
      margin-bottom: -2px;  /* 画像の下に余白が出るため調整 */
      padding-right: 10px;
    }
    img {
      width:100%;
      height:48.65vh;
    }
  }
}
@media screen and (max-width: 880px) {
  #construction .left-cont {
    img {
      height:49.1vh;
    }
  }
}

@media screen and (max-width: 780px) {
  #construction .left-cont {
    img {
      height:49.38vh;
    }
  }
}





/* ------------------------------------------------------------- */
/* StyleSection _ #construction .mid2 .right-cont                       */
/* ------------------------------------------------------------- */

#construction .right-cont {
  width:60%;

  img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  .wrap {
    position: relative;
  }

  .js-sticky {
    position: sticky;
    top: 0;
    overflow: hidden;
    height: 100vh;
  }
  .js-sticky .js-sticky-img {
    height: 100%;
  }
  .js-sticky .js-sticky-img img {
    height: 100%;
    object-fit: cover;
  }

}


#construction .right-cont .text-cont {
  width:100%;
  height: 500px;
  color: #fff;
  text-shadow: 4px 4px 8px gray;
  
  p {
    padding: 140px 40px 10px 40px;
    text-align: center;
    font-size: 3em;
    font-weight: 700;
    letter-spacing: 0.2em;
  }
  
  div {
    padding: 20px 100px 10px 100px;
    font-size: 2em;
    
  }
}

@media screen and (max-width: 880px) {
  #construction .left-cont {
    img {
      height:49.1vh;
    }
  }
}

@media screen and (max-width: 780px) {
  #construction .left-cont {
    img {
      height:49.38vh;
    }
  }


  #construction .right-cont .text-cont {
    width:100%;
    p {
      padding: 140px 40px 10px 40px;
      text-align: center;
      font-size: 2em;
      font-weight: 600;
      letter-spacing: 0.2em;
    }
    
    div {
      padding: 0;
      font-size: 1.6em;
      
    }
  }
}



/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
/*  StyleSetting_ #business                                                */      
/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/

#business .sec99 {
  position: relative;
  height: 380px;
  background: url(../images/ttl/business_ttlbg_pc.webp) bottom center no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 1050px) {
  #business .sec99 {
    height: 480px;
    background: url(../images/ttl/business_ttlbg_sp.webp) bottom center no-repeat;
    background-size: 100%;
    
  }
}



#business .mid2 {
  width:100%;
  height: 100%;
  display: flex;
  justify-content: space-between; /* または space-around, space-evenly */

  background-color: #fff;
  padding-bottom: 20px;
}


#business .left-cont {
  position: relative;

  .fixe-cont {
    position: sticky;
    top: 20%;
    left: 0;

    width: 100%;
    height: 100vh;
  }
/*
  .img-wrap {
    .img-blk1 { background-color: #ccc; }
    .img-blk2 { background-color: #1B451B; }
    .img-blk3 { background-color: #ccc; }
  }
*/
  .js-sticky-img {  
    margin-bottom: -2px;  /* 画像の下に余白が出るため調整 */
    padding-right: 10px;
  }
  img {
    width:100%;
    height:66.2vh;
    border-radius: 10px;
  }
}
@media screen and (min-width: 1051px) {
  #business .left-cont {
    width: 40%;
    min-width:380px;
    height: 100vh;
  }
}
@media screen and (max-width: 1050px) {
  #business .left-cont {
  
    width: 40%;
    height: 100vh;
  
    .js-sticky-img {  
      margin-bottom: -2px;  /* 画像の下に余白が出るため調整 */
      padding-right: 10px;
    }
    img {
      width:100%;
      height:48.65vh;
    }
  }
}
@media screen and (max-width: 880px) {
  #business .left-cont {
    img {
      height:49.1vh;
    }
  }
}

@media screen and (max-width: 780px) {
  #business .left-cont {
    img {
      height:49.38vh;
    }
  }
}





/* ------------------------------------------------------------- */
/* StyleSection _ #business .mid2 .right-cont                       */
/* ------------------------------------------------------------- */

#business .right-cont {
  width:60%;

  img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  .wrap {
    position: relative;
  }

  .js-sticky {
    position: sticky;
    top: 0;
    overflow: hidden;
    height: 100vh;
  }
  .js-sticky .js-sticky-img {
    height: 100%;
  }
  .js-sticky .js-sticky-img img {
    height: 100%;
    object-fit: cover;
  }

}


#business .right-cont .text-cont {
  width:100%;
  height: 500px;
  color: #fff;
  text-shadow: 4px 4px 8px gray;
  
  p {
    padding: 140px 40px 10px 40px;
    text-align: center;
    font-size: 3em;
    font-weight: 700;
    letter-spacing: 0.2em;
  }
  
  div {
    padding: 20px 100px 10px 100px;
    font-size: 2em;
    
  }
}

@media screen and (max-width: 880px) {
  #business .left-cont {
    img {
      height:49.1vh;
    }
  }
}

@media screen and (max-width: 780px) {
  #business .left-cont {
    img {
      height:49.38vh;
    }
  }


  #business .right-cont .text-cont {
    width:100%;
    p {
      padding: 140px 40px 10px 40px;
      text-align: center;
      font-size: 2em;
      font-weight: 600;
      letter-spacing: 0.2em;
    }
    
    div {
      padding: 0;
      font-size: 1.6em;
    }
  }
}




/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
/*  StyleSetting_ #company                                                */      
/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/

#company {
  .sec_info1 , .sec_info2 , .sec_info3 {
    background-color: #fff;
  }
}


#company .sec99 {
  position: relative;
  height: 380px;
  background: url(../images/ttl/company_ttlbg_pc.webp) bottom center no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 1050px) {
  #company .sec99 {
    height: 480px;
    background: url(../images/ttl/company_ttlbg_sp.webp) bottom center no-repeat;
    background-size: 100%;
    
  }
}



#company .mid2 {
  width:100%;
  height: 100%;
  display: flex;
  justify-content: space-between; /* または space-around, space-evenly */

  padding-bottom: 20px;
}


#company .left-cont {
  position: relative;

  .fixe-cont {
    position: sticky;
    top: 20%;
    left: 0;

    width: 100%;
    height: 100vh;
  }
/*
  .img-wrap {
    .img-blk1 { background-color: #ccc; }
    .img-blk2 { background-color: #1B451B; }
    .img-blk3 { background-color: #ccc; }
  }
*/
  .js-sticky-img {  
    margin-bottom: -2px;  /* 画像の下に余白が出るため調整 */
    padding-right: 10px;
  }
  img {
    width:100%;
    height:66.2vh;
    border-radius: 10px;
  }
}
@media screen and (min-width: 1051px) {
  #company .left-cont {
    width: 40%;
    min-width:380px;
    height: 100vh;
  }
}
@media screen and (max-width: 1050px) {
  #company .left-cont {
  
    width: 40%;
    height: 100vh;
  
    .js-sticky-img {  
      margin-bottom: -2px;  /* 画像の下に余白が出るため調整 */
      padding-right: 10px;
    }
    img {
      width:100%;
      height:48.65vh;
    }
  }
}
@media screen and (max-width: 880px) {
  #company .left-cont {
    img {
      height:49.1vh;
    }
  }
}

@media screen and (max-width: 780px) {
  #company .left-cont {
    img {
      height:49.38vh;
    }
  }
}




/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
/*  StyleSetting_ #recruit                                                */      
/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/

#recruit {
  .sec_info1 , .sec_info2 , .sec_info3 {
    background-color: #fff;
  }
}

#recruit .sec99 {
  position: relative;
  height: 380px;
  background: url(../images/ttl/recruit_ttlbg_pc.webp) bottom center no-repeat;
  background-size: 100%;
  
  .txt2 {
   letter-spacing: 1em;
  }
  .update_date {
    font-size: 0.6em;
  }
  
}

@media screen and (max-width: 1050px) {
  #recruit .sec99 {
    height: 480px;
    background: url(../images/ttl/recruit_ttlbg_sp.webp) bottom center no-repeat;
    background-size: 100%;

  .txt2 {
   letter-spacing: 0.2em;
  }
  .update_date {
    letter-spacing: 0.01;
  }

  }
  
  
}



#recruit .mid2 {
  width:100%;
  height: 100%;
  display: flex;
  justify-content: space-between; /* または space-around, space-evenly */

  padding-bottom: 20px;
}


#recruit .left-cont {
  position: relative;

  .fixe-cont {
    position: sticky;
    top: 20%;
    left: 0;

    width: 100%;
    height: 100vh;
  }
/*
  .img-wrap {
    .img-blk1 { background-color: #ccc; }
    .img-blk2 { background-color: #1B451B; }
    .img-blk3 { background-color: #ccc; }
  }
*/
  .js-sticky-img {  
    margin-bottom: -2px;  /* 画像の下に余白が出るため調整 */
    padding-right: 10px;
  }
  img {
    width:100%;
    height:66.2vh;
    border-radius: 10px;
  }
}
@media screen and (min-width: 1051px) {
  #recruit .left-cont {
    width: 40%;
    min-width:380px;
    height: 100vh;
  }
}
@media screen and (max-width: 1050px) {
  #recruit .left-cont {
  
    width: 40%;
    height: 100vh;
  
    .js-sticky-img {  
      margin-bottom: -2px;  /* 画像の下に余白が出るため調整 */
      padding-right: 10px;
    }
    img {
      width:100%;
      height:48.65vh;
    }
  }
}
@media screen and (max-width: 880px) {
  #recruit .left-cont {
    img {
      height:49.1vh;
    }
  }
}

@media screen and (max-width: 780px) {
  #recruit .left-cont {
    img {
      height:49.38vh;
    }
  }
}




/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
/*  StyleSetting_ #inquiry                                                */      
/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
#inquiry .sec99 {
  position: relative;
  height: 380px;
  background: url(../images/ttl/inquiry_ttlbg_pc.webp) bottom center no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 1050px) {
  #inquiry .sec99 {
    height: 480px;
    background: url(../images/ttl/inquiry_ttlbg_sp.webp) bottom center no-repeat;
    background-size: 100%;
  }
}


/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
/*  StyleSetting_ #recruit                                               */      
/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
#recruit .sec99 {
  position: relative;
  height: 380px;
  background: url(../images/ttl/recruit_ttlbg_pc.webp) bottom center no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 1050px) {
  #recruit .sec99 {
    height: 480px;
    background: url(../images/ttl/recruit_ttlbg_sp.webp) bottom center no-repeat;
    background-size: 100%;
  }
}




/* ------------------------------------------------------------- */
/* StyleSection _ #inquiry #recruit  (complete) .mid2_comp       */
/* ------------------------------------------------------------- */
#inquiry .mid2_comp , #recruit .mid2_comp {
  width:100%;
  background-color:#fff;

  .wrap {
    width:1120px;
    margin: 0 auto;  /* 中央寄せ */
    padding: 80px 0;
  }

  .comp_blk {

    .txt1{
      width:80%;
      margin: 0 auto;  /* 中央寄せ */
      margin-bottom:40px;
      font-size: 1.6em;
      padding: 0 20px;
      text-align:center;
    } 
    .txt2{
      margin-left: 0.5em;
      font-size: 1.2em;
      width:70%;
      margin: 0 auto;  /* 中央寄せ */
    }
    dl{
      margin-bottom: 20px;
      padding: 0 2em;
    }
    dt{
      text-align: center;
      font-size: 1.4em;
    }
    dd{
      font-size: 1em;
      padding: 0 1em;
      text-indent: 0.5em;
    }
  }
  
  /* .address_box  */
  .address_box {
    margin-top: 100px;
    padding: 15px 20px 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #E5E5E5;
    
    h3 {
      text-align: center;
    }
    p{
      text-align: center;
    }
    p.txt1 {
      font-size: 1.2em;
    } 
    
    h4 {
      margin: 10px 0 6px 0;
      font-size: 1.6em;
      text-align: center;
    }
  }
}


@media screen and (max-width: 1050px) {
	#inquiry .mid2_comp , #recruit .mid2_comp {
	  .wrap {
			width:100%;
	    padding: 80px 0;
	  }

	  .comp_blk {
	    .txt1{
	      width:100%;
	    } 
	    .txt2{
	      width:100%;
	      margin-left: 0;
	    }
	    dl{
        padding: 0;
	    }
	    dt{
	    }
	    dd{
        text-align: left;
        padding: 0 10px;
	    }
	  }
	  
	  /* .address_box  */
	  .address_box {
	    margin-top: 40px;
	    h3 {
	      text-align: center;
	    }
	    p{
	      text-align: center;
	    }
	    p.txt1 {
	      text-align: left;
	      text-indent: 0.5em;
	      font-size: 1.2em;
	    } 
	    h4 {
	      margin: 10px 0 6px 0;
	      font-size: 1.6em;
	      text-align: center;
	    }
	  }
	}
}



/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
/*  StyleSetting_ #privacy                                              */      
/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/

#privacy  .sec99 {
  position: relative;
  height: 380px;
  background: url(../images/ttl/privacy_ttlbg_pc.webp)center no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 1050px) {
  #privacy  .sec99 {
    height: 480px;
    background: url(../images/ttl/privacy_ttlbg_sp.webp) bottom center no-repeat;
    background-size: 100%;
    
  }
}


/* ------------------------------------------------------------- */
/* StyleSection _ #privacy .mid2                                 */
/* ------------------------------------------------------------- */
#privacy .mid2 {
  width:100%;
  background-color:#fff;

  /* DIV.secPriva */
  .secPriva {
    .wrap {
      width:1120px;
      margin: 0 auto;  /* 中央寄せ */
      
      padding: 80px 0;
    }
  }

  /* DIV.secPriva_blk */ 
  .secPriva_blk {

    .txt1{
      width:80%;
      margin: 0 auto;  /* 中央寄せ */
      margin-bottom:40px;
      font-size: 1.2em;
      padding: 0 20px;
    } 
    .txt2{
      margin-left: 0.5em;
      font-size: 1.2em;
    }
    dl{
      margin-bottom: 20px;
      padding: 0 2em;
    }
    dt{
      text-align: center;
      font-size: 1.4em;
    }
    dd{
      font-size: 1em;
      padding: 0 1em;
    }
    ol{
      padding: 0 1.4em;
    }
  }

  /* DIV.address_box  */
  .address_box {
    padding: 15px 20px 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #E5E5E5;

    p{
      text-align: center;
    }
    h3 {
      margin: 10px 0 6px 0;
      font-size: 1.6em;
      text-align: center;
    }
  }
}


@media screen and (max-width: 1050px) {
  #privacy .mid2 {

    /* DIV.secPriva */
    .secPriva {
      .wrap {
        width:100%;
        margin: 0;
        
        padding:30px 0;
      }
    }

    /* DIV.secPriva_blk */ 
    .secPriva_blk {
      dl{
        margin-bottom: 20px;
        padding : 0;
      }

      dd{
        font-size: 1em;
        padding: 0 1em;
      }
      ol{
        padding: 0 1.4em;
      }
    }

    /* DIV.address_box  */
    .address_box {
      h3 {
        font-size: 1.6em;
      }
    }
  }
}





/* ------------------------------------------------------------- */
/* StyleSection _ .mid3 ( 共通設定 )                             */
/* ------------------------------------------------------------- */
.mid3 {
  position: relative;
  
  height:800px;
  width:100%;
  background-color:#0D220D; 

   .blk1 {
    position: relative;

    width: 92%;
    height: 80%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);

    border-radius: 50px 50px 0 0; 
    background-color: #fff;
  }

  .blk2 {
    h2 {
      text-align: center;
      padding: 20px 100px;
      font-size: 2.6em;
    }
    p {
      text-align: center;
      padding: 0 150px;
      font-size: 1.6em;
    }
  }
  
  .marquee {
    position: absolute;
    bottom: 10px;
  }
}

@media screen and (max-width: 780px) {
  .mid3 {
    .blk2 {
      h2 {
        margin-top: 50px;
        padding: 0 8px;
        font-size: 2em;
      }
      p {
        margin-top: 40px;
        padding: 0 15px;
        font-size: 1.4em;
      }
    }
  }
}






/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/
/*  StyleSetting_ #error                                                */      
/*■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■〓■*/

#error {
  .sec_info1 , .sec_info4 {
    background-color: #fff;
  }
}

#error .sec99 {
  position: relative;
  height: 380px;
  background: url(../images/ttl/error_ttlbg_pc.webp) bottom center no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 1050px) {
  #company .sec99 {
    height: 480px;
    background: url(../images/ttl/error_ttlbg_sp.webp) bottom center no-repeat;
    background-size: 100%;
  }
}