@charset "UTF-8";

/*---------- font family ----------*/
/*@font-face {
  font-family: 'keifont';
  src: url('/dcms_media/other/keifont.woff2') format('woff2'), 
       url('/dcms_media/other/keifont.woff') format('woff');
}*/
body {
  background-color: #EFFDFF;
}
/* :where(h1,h2,h3,h4,h5,h6), :where(.lib-link__btn) {
  font-weight: 400 !important;
} */
@media print, screen and (max-width: 767px) {
  :where(.lib-link__btn) {
    padding: 15px 20px !important;
  }
}

/*---------- font size ----------*/
@media print, screen and (min-width: 992px) {
  .fs-lg-60 {
    font-size: 3.5rem !important;
  }
}

/*---------- common ----------*/
.lib-breadcrumb__outer {
  display: none;
}
#contents {
  padding-top: 0;
}

/*---------- MV ----------*/
.lp-mv .thumb {
  position: absolute;
  z-index: 1;
}
.lp-mv .lib-card__btn .col:first-child .thumb {
  top: 0%;
  left: -40%;
}
.lp-mv .lib-card__btn .col:last-child .thumb {
  top: -100%;
  right: -30%;
}
.lp-mv .bg-img.thumb:first-of-type {
  bottom: -17%;
  left: -10%;
}
.lp-mv .bg-img.thumb:last-of-type {
  bottom: -8%;
  right: -10%;
}
@media print, screen and (min-width: 992px) {
  .lp-mv .lib-fv__thumb {
    height: 80vh;
  }
}
@media print, screen and (max-width: 991px) {
  .lp-mv .lib-card__btn .col:first-child .thumb {
    top: -20%;
    left: -25%;
    width: 40%;
  }
  .lp-mv .lib-card__btn .col:last-child .thumb {
    right: -20%;
    width: 40%;
  }
  .lp-mv .bg-img.thumb:first-of-type {
    left: 0%;
    width: 25%;
    z-index: 8;
    bottom: -10%;
  }
  .lp-mv .bg-img.thumb:last-of-type {
    bottom: -3%;
    right: 0;
    width: 20%;
  }
}
@media print, screen and (max-width: 767px) {
  .lp-mv .lib-fv__thumb {
    height: 80vh;
  }
  .lp-mv .lib-card__btn .col:first-child .thumb {
    left: -1%;
    width: 25%;
  }
  .lp-mv .lib-card__btn .col:last-child .thumb {
    top: -30%;
    right: 0%;
    width: 25%;
  }
 .lp-mv .bg-img.thumb:last-of-type {
    width: 30%;
  }
  .lp-mv .bg-img.thumb:first-of-type {
    width: 40%;
  }
}

/*---app mv---*/

.ico-after-mv-arr {
      display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.ico-after-mv-arr:has(.txt) .txt:after {
    content: ""; 
    display: inline-block;
    position: static;
    background-image: url(/dcms_media/image/app-mv-arr.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}

.app-text-shadow {
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.app-mv-btn {
  border: 4px solid  var(--WHT) !important;
}

.app-mv-btn:hover {
  border: 4px solid var(--OTH) !important;
  background-color: var(--WHT);
}

.p-bg {
&.--app-mv::before {
    background-color: #137D81;
}
}

.app-mv-qr img {
transition: 0.3s;
}

.app-mv-qr:hover img {
  opacity: 0.8;
transition: 0.3s;
}





/*---------- 悩み解決 ----------*/
.--app-feature .bg-img.thumb {
  position: absolute;
  z-index: 1;
}
.--app-feature .bg-img.thumb:first-of-type {
  bottom: -5%;
  left: 11%;
}
.--app-feature .bg-img.thumb:last-of-type {
  bottom: -10%;
  right: 10%;
}
@media print, screen and (min-width: 992px) {
  .--app-feature .lib-fv__thumb {
    height: 400px;
  }
}
@media print, screen and (max-width: 991px) {
  .--app-feature .lib-fv__thumb img {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  }
  .--app-feature .lib-fv__thumb {
    height: 350px;
  }
}
@media print, screen and (max-width: 767px) {
  .--app-feature .lib-fv__thumb {
    height: 50vh;
  }
  .--app-feature .bg-img.thumb {
    width: 30%;
  }

    .--app-feature .bg-img.thumb:first-of-type {
    bottom: -1%;
  }
  .--app-feature .bg-img.thumb:last-of-type {
    bottom: -2%;
  }
}

/*---------- 導入効果 ----------*/
.lp-point::before {
  mix-blend-mode: multiply;
}
.lp-point .bg-img.thumb {
  position: absolute;
  z-index: 1;
  top: -200%;
  right: -40%;
}

@media print, screen and (max-width: 767px) {
  .lp-point .bg-img.thumb {
    top: -430%;
    right: -30%;
  }
}

/*---------- 料金 ----------*/
.lp-price .bg-img.thumb {
  position: absolute;
  z-index: 1;
  top: -35%;
  left: 15%;
} 
.w-30 {
  width: 30% !important;
}
.lp-price th {
  font-weight: normal;
}
.lp-price thead {
  border-top: none !important;
}
/*.lp-price .--head {
  position: relative;
  border: none !important;
}
.lp-price .--head::before {
  position: absolute;
  content: "";
  top: -1rem;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: var(--OTH);
  z-index: -1;
}*/

@media print, screen and (min-width: 992px) {
  .lp-price .lib-scroll__cover {
    overflow: visible;
  }
}
@media print, screen and (max-width: 991px) {
  .lp-price .bg-img.thumb {
    top: -25%;
    left: 0%;
  }
}
@media print, screen and (max-width: 767px) {
  .lp-price .bg-img.thumb {
    top: -13%;
    width: 25%;
  }
  .lp-point .lib-scroll__outer:before {
    top: -30px;
  }
}

/*---------- CTA ----------*/
.bg-lother[class*=__btn] {
  color: var(--WHT);
}
.bg-lother[class*=__btn]:hover {
  color: var(--OTH);
}
.lp-cta .bg-img.thumb {
  position: absolute;
  z-index: 1;
}
.lp-cta .bg-img.thumb:first-of-type {
  top: -10%;
  right: 0;
}
.lp-cta .bg-img.thumb:nth-of-type(2) {
  bottom: -10%;
  left: 0;
}
.lp-cta .bg-img.thumb:last-of-type {
  bottom: -10%;
  right: 0;
}

@media print, screen and (max-width: 991px) {
  .lp-cta .bg-img.thumb {
    width: 25%;
  }
  .lp-cta .bg-img.thumb:last-of-type {
    width: 20%;
  }
}
@media print, screen and (max-width: 767px) {
  .lp-cta .bg-img.thumb {
    width: 40%;
  }
  .lp-cta .bg-img.thumb:last-of-type {
    width: 30%;
  }
  .lp-cta .lib-fv__thumb {
    height: 90vh;
  }
}

/*---------- header ----------*/
.lib-header__outer.lib-header-BS02 .lib-induce__btn {
  border-radius: var(--bs-border-radius-pill) !important;
  width: 200px;
  font-weight: normal;
}
.lib-header__outer.lib-header-BS02 .lib-nav__btn {
  font-weight: normal;
}
@media print, screen and (min-width: 992px) {
  .lib-header__outer.lib-header-BS02 .lib-induce__btn {
    height: 60px;
  }
  .is-scroll .lib-header__outer.lib-header-BS02 .lib-induce__btn {
    height: 50px;
  }
  .is-scroll .lib-header__outer.lib-header-BS02 .lib-induce__outer>li {
    align-items: center;
  }
  /* #wrapper:has(.lib-header-BS02) {
    padding-top: 0;
  } */
  .lib-nav__panel:has(.lib-induce__outer) {
    padding-right: 440px;
  }
  .lib-header__outer.lib-header-BS02 .lib-induce__outer {
    width: auto;
    height: auto;
    flex-direction: row;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
  }
  .lib-header__outer.lib-header-BS02 .lib-induce__outer>li {
    max-width: none;
    white-space: nowrap;
    margin-right: 1rem;
  }
  .lib-header__outer.lib-header-BS02 .lib-induce__btn {
    padding: 16px;
  }
  .lp-header.lib-header__outer.lib-header-BS02 {
    /* box-shadow: none; */
    /* background-color: transparent; */
  }
  .is-scroll .lp-header.lib-header__outer.lib-header-BS02 {
    -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .2);
    background-color: var(--WHT);
  }
}
@media print, screen and (max-width: 991px) {
  .lib-nav__outer .lib-induce__outer {
    flex-direction: column;
    align-items: center;
  }
  .lib-nav__outer .lib-induce__outer:has(>li:nth-child(2))>li {
    width: 100%;
    margin-bottom: 1rem;
  }
}


/*---------- footer ----------*/
.lp-footer a {
  color: inherit !important;
  font-weight: normal;
}

.lp-footer .lib-induce__btn {
  color: #fff !important;
}

.lp-footer .lib-induce__btn:hover {
  color: var(--ACC) !important;
}

.lp-footer.lib-footer__outer.lib-footer-BS01 .lib-footer__utility .wrap {
  padding-top: 1rem;
}
.lp-footer.lib-footer__outer.lib-footer-BS01 .lib-footer__utility, 
.lp-footer .lib-footer__copyright {
  background-color: transparent !important;
}
.lp-footer .lib-footer__copyright {
  color: var(--DEF);
}
.lib-footer__outer.lib-footer-BS01 .lib-footer__copyright {
  padding: 0;
  margin: 0;
}
@media print, screen and (max-width: 767px) {
  .lib-footer__outer.lib-footer-BS01 .lib-footer__info {
    padding-bottom: 0;
  }
}

/*---app mv---*/

.ico-after-mv-arr {
      display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.ico-after-mv-arr:has(.txt) .txt:after {
    content: ""; 
    display: inline-block;
    position: static;
    background-image: url(/dcms_media/image/app-mv-arr.png);
    background-size: contain;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
}

.app-text-shadow {
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.app-mv-btn {
  border: 4px solid  var(--WHT) !important;
}

.app-mv-btn:hover {
  border: 4px solid var(--OTH) !important;
  background-color: var(--WHT);
}

.p-bg {
&.--app-mv::before {
    background-color: #137D81;
}

/* &.--app-feature::before {
    background-color: #1BB3C7;
} */

&.--app-benefits::before {
    background-color: #0FD5E3;
}

&.--app-faq::before {
    background-color: #0FD5E3;
}
}

.app-mv-qr img {
transition: 0.3s;
}

.app-mv-qr:hover img {
  opacity: 0.8;
transition: 0.3s;
}

/*---app 設定---*/
.ff-zendots {
  font-family: "Zen Dots", sans-serif;
}

.lib-menu__btn {
    background-color: var(--ACC);
    border: var(--ACC) 2px solid;
}


/*---J-QUESTの特徴---*/
/* .lib-wide__outer.--app-feature {
    background-image: 
        url('/dcms_media/image/app-backdesign01.png'), 
        url('/dcms_media/image/app-backdesign02.png'),
        url('/dcms_media/image/bg-1557886097.jpeg');

    background-position: 
        left top,
        right top, 
        center;     

    background-repeat: 
        no-repeat, 
        no-repeat, 
        no-repeat;

    background-size: 
        100px auto, 
        100px auto, 
        cover;   
} */

.lib-wide__outer.--app-feature {
  background-image: 
        url('/dcms_media/image/bg-app-about.jpg');
}

.--feature-contents img {
      max-height: 250px;
    object-fit: cover;
    object-position: top;
}

.le-5 {
  letter-spacing: 5px;
}

/*---特典---*/
.--app-benefits {
  background-image: url('/dcms_media/image/bg-1853772508.jpeg');
}

.--benefits-contents .lib-card__title {
  border-bottom: 4px solid var(--OTH);
}

/*---CTA---*/
.--app-cta {
      background-image: url('/dcms_media/image/app-backdesign03.png'), 
        url('/dcms_media/image/app-backdesign02.png');
    background-repeat: no-repeat, no-repeat;
    background-size: 500px;
    background-position: left bottom,right top;
  position: relative;
}

.--app-cta .lib-link__btn:hover .txt {
color: var(--DEF) !important;
}

.--app-cta .bg-img.thumb {
  position: absolute;
  z-index: 1;
}
.--app-cta .bg-img.thumb:first-of-type {
  top: -18%;
  left: 5%;
}
.--app-cta .bg-img.thumb:last-of-type {
  bottom: -10%;
  right: 10%;
}
@media print, screen and (min-width: 992px) {
  .--app-cta .lib-fv__thumb {
    height: 400px;
  }
}
@media print, screen and (max-width: 991px) {
  .--app-cta .lib-fv__thumb img {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  }
  .--app-cta .lib-fv__thumb {
    height: 350px;
  }
}
@media print, screen and (max-width: 767px) {
  .--app-cta .lib-fv__thumb {
    height: 50vh;
  }
  .--app-cta .bg-img.thumb {
    width: 30%;
  }
  .--app-cta .bg-img.thumb:last-of-type {
    bottom: -5%;
  }
}

/*---j-questが募集している案件とは？---*/
/* ボタンのデフォルト矢印（擬似要素）を消す */
.lib-swiper__btn::after {
    display: none !important;
}

/* 前へボタンの設定 */
.swiper-button-prev {
    background-image: url('/dcms_media/image/app-arr-prev.png'); /* 戻るボタン画像パス */
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px; /* 画像のサイズに合わせて調整 */
    height: 40px;
}

/* 次へボタンの設定 */
.swiper-button-next {
    background-image: url('/dcms_media/image/app-arr-next.png'); /* 送るボタン画像パス */
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
}

/* 見切れを綺麗に見せるための設定 */
.lib-sld-001__slider {
    overflow: visible !important; /* スライダーの外側まで画像を見せる */
}

.lib-swiper__outer {
    overflow: hidden; /* 親要素で画面外をカット */
}

.--app-work .bg-img.thumb {
  position: absolute;
  z-index: 1;
}
.--app-work .bg-img.thumb:first-of-type {
  bottom: -6%;
  left: 4%;
}
.--app-work .bg-img.thumb:last-of-type {
  bottom: -10%;
  right: 10%;
}
@media print, screen and (min-width: 992px) {
.--app-work .lib-fv__thumb {
    height: 400px;
  }
}
@media print, screen and (max-width: 991px) {
.--app-work .lib-fv__thumb img {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  }
.--app-work .lib-fv__thumb {
    height: 350px;
  }
}
@media print, screen and (max-width: 767px) {
.--app-work .lib-fv__thumb {
    height: 50vh;
  }
.--app-work .bg-img.thumb {
    width: 30%;
  }

  .--app-work .bg-img.thumb:first-of-type {
    bottom: -6%;
    left: 4%;
}
  
.--app-work .bg-img.thumb:last-of-type {
    bottom: -8%;
    right: 0;
  }
}

@media print and (hover: hover) and (pointer: fine), screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
.lib-swiper__btn:hover {
  background-color: transparent;
  opacity: .8;
}
}

/*JS追加*/
/* ============================================================
   スライダー全体を画面幅いっぱいに広げる設定
   ============================================================ */
   .lib-swiper__outer.lib-wide__outer.--app-work {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden; /* ブラウザの横スクロールを防止 */
  }
  
  /* スライダー本体のクリップを解除して、画面外までカードを見せる */
  .js-media__slider-app {
    overflow: visible !important;
    width: 100%;
  }
  
  /* ============================================================
     スライドカードのスタイル調整
     ============================================================ */
  .js-media__slider-app .swiper-slide {
    transition: all 0.4s ease;
    opacity: 0.4;    /* 基本（見切れ部分）は薄くする */
    height: auto;
    /* カードが巨大化するのを防ぐ */
    max-width: 450px; 
  }
  
  /* 画面内に「表示されている」スライド（中央3枚＋見切れ分）を明るくする */
  .js-media__slider-app .swiper-slide-visible {
    opacity: 1;
  }
  
  /* 真ん中のアクティブな1枚を少し強調（お好みで。不要なら削除してください） */
  .js-media__slider-app .swiper-slide-active {
    /* transform: scale(1.03); */
    z-index: 2;
  }
  
  /* ============================================================
     ナビゲーション・ページネーションの調整
     ============================================================ */
  /* 矢印やドットを元のコンテンツ幅（1200px）の中央に配置する */
  .lib-swiper__control {
    max-width: 1200px;
    margin: 30px auto 0;
    position: relative;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* ボタンのデフォルト矢印（擬似要素）を消す */
  .lib-swiper__btn::after {
    display: none !important;
  }
  
  /* 前へボタンの設定 */
  .swiper-button-prev {
    background-image: url('/dcms_media/image/app-arr-prev.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    position: relative; /* control内での配置用 */
    top: auto;
    left: auto;
    margin: 0 15px;
  }
  
  /* 次へボタンの設定 */
  .swiper-button-next {
    background-image: url('/dcms_media/image/app-arr-next.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    position: relative; /* control内での配置用 */
    top: auto;
    right: auto;
    margin: 0 15px;
  }
  
  /* ページネーションのドット */
  .swiper-pagination {
    position: relative;
    bottom: auto;
    width: auto !important;
  }

  .lib-swiper__btn:focus {
    background-color: transparent;
    opacity: .5;
}

.swiper-pagination-bullet-active {
  background-color: var(--OTH)!important;
  border-color: var(--OTH)!important;
}

.lib-swiper__control .lib-swiper__pagination {
  align-self: end;
}

/*---ユーザーの声---*/
.--app-voice .lib-card__txtarea {
    position: relative;
    margin-bottom: 25px; /* 三角形と下の画像の間の余白 */
}

.--app-voice .lib-card__txtarea::before {
    content: "";
    position: absolute;
    bottom: -15px;      /* 三角形の高さ分、下に配置 */
    left: 50%;
    transform: translateX(-50%);
    /* borderを使って白い三角形を作成 */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #fff; /* 上向きの底辺を白にすることで下向き三角に見せる */
    z-index: 1;
}

/* --- 3. 画像の右上に app16.png を重ねる --- */
.--app-voice .lib-card__thumb {
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto; /* キャラクターを中央寄せ */
}

.--app-voice .lib-card__thumb::after {
    content: "";
    position: absolute;
    top: -20px;     /* 右上の位置微調整 */
    right: -30px;   /* 右上の位置微調整 */
    width: 45px;    /* app16.pngの表示サイズ */
    height: 45px;
    background-image: url('/dcms_media/image/app16.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
}

/*---よくある質問---*/
.lib-cnt-021__btn:before, .lib-cnt-021__panel:before {
    background-color: var(--ACC);
    border-radius: 0.2rem;
}

.lib-cnt-021__panel:before {
    content: "A";
    background-color: var(--OTH);
    top: 0;
}

/* 元の棒状の線を消して、画像を設定する */
.lib-toggle__btn[aria-expanded] > .txt:before {
    display: none; /* beforeは使わないので非表示に */
}

.lib-toggle__btn[aria-expanded] > .txt:after {
    content: "";
    width: 44px;   /* 画像のサイズに合わせて調整してください */
    height: 44px;  /* 画像のサイズに合わせて調整してください */
    background-image: url('/dcms_media/image/faq-togglebtn.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent; /* 背景色をクリア */
    
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    
    /* 中央揃えと回転のアニメーション設定 */
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease; /* 0.3秒かけて滑らかに回転 */
}

@media print, screen and (max-width: 767px) {
  .lib-toggle__btn[aria-expanded] > .txt:after {
    width: 33px;   /* 画像のサイズに合わせて調整してください */
    height: 33px;  /* 画像のサイズに合わせて調整してください */
}
}

/* クリックして開いた時 (aria-expanded="true") の挙動 */
.lib-toggle__btn[aria-expanded="true"] > .txt:after {
    /* 180度回転させる。translateY(-50%)を忘れると位置がズレるので注意 */
    transform: translateY(-50%) rotate(180deg);
}

@media print and (hover: hover) and (pointer: fine), screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
.lib-toggle__btn[aria-expanded]:hover {
    background-color: transparent;
}
}

.--app-faq .bg-img.thumb {
  position: absolute;
  top: -50px;
  right: 3%;
}

@media print, screen and (min-width: 767px) {
.mb-md-n15 {
  margin-bottom: -15px;
}
}


/*-------------------------------app-header---------------------------------*/
@media print, screen and (min-width: 992px) {
.is-scroll .lib-header__logo img {
  width: 150px;
}
}