/* ==========================================================================
Base
========================================================================== */
/* iPhone 320px */
@media only screen and (min-width:320px){html{font-size: 67%;}}
/* Android 360px 1.125 */
@media only screen and (min-width:360px){html{font-size: 70%;}}
/* iPhone6 375px 117.1875 */
@media only screen and (min-width:375px){html{font-size: 79%;}}
/* iPhone6 plus 414px 1.29375 */
@media only screen and (min-width:412px){html{font-size: 77%;}}
/* sm */
@media(min-width: 576px){html{font-size: 73%;}}
/* md */
@media(min-width: 768px){html{font-size: 80%;}}
/* lg */
@media(min-width: 992px){html{font-size: 81.25%;}}
/*xl*/
@media(min-width:1200px){html{font-size: 81%;}}
/*2xl*/
@media(min-width:1366px){html{font-size: 83%;}}
/*4xl*/
@media(min-width:1800px){html{font-size: 85%;}}
html,html a{text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
html,body{overflow-x: hidden;height: 100%;background-color: #191919;}
body{position: relative;background-color: #fff;min-height: 100%;height: auto; color: #fff;font-family:FOT-筑紫ゴシック Pro E,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;letter-spacing: .01rem;background: none;font-weight: 300;margin: 0;}
p{line-height: 1.8;color: #ccc;}
h1,h2,h3,h4,h5,h6{line-height: 1.6;}




.font-ZenKakuGN-L{font-family:Zen Kaku Gothic N L,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif}
.font-ZenKakuGN-R{font-family:Zen Kaku Gothic N R,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif}
.font-ZenKakuGN-M{font-family:Zen Kaku Gothic N M,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif}
.font-ZenKakuGN-B{font-family:Zen Kaku Gothic N B,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif}

.font-GothicMB101-R{font-family:Gothic MB101 Regular,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;}
.font-GothicMB101-M{font-family:Gothic MB101 Medium,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;}
.font-GothicMB101-DB{font-family:FOT-筑紫ゴシック Pro E,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;}
.font-MidashiGoMB31{font-family:FOT-セザンヌ Pro DB,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;}
.font-HiraUDRd-W6{font-family:Hiragino UD Sans Rd W6 JIS2004,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;}


.font-Reimin-U{font-family:FOT-モード明朝Bラージ ProN H;}

#nav-works .nuxt-link-exact-active.nuxt-link-active{opacity: .25;}
#nav-works .nuxt-link-exact-active.nuxt-link-active:hover{cursor: default;}


@font-face {font-family: 'hel-n-UL';src: url("/fonts/hel-n-UL.woff2") format("woff2"),url("/fonts/hel-n-UL.woff") format("woff");}
.font-hel-n-UL{font-family:hel-n-UL,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;}

@font-face {font-family: 'hel-n-L';src: url("/fonts/hel-n-L.woff2") format("woff2"),url("/fonts/hel-n-L.woff") format("woff");}
.font-hel-n-L{font-family:hel-n-L,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;}

@font-face {font-family: 'hel-n-R';src: url("/fonts/hel-n-R.woff2") format("woff2"),url("/fonts/hel-n-R.woff") format("woff");}
.font-hel-n-R{font-family:hel-n-R,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;}

@font-face {font-family: 'hel-n-B';src: url("/fonts/hel-n-B.woff2") format("woff2"),url("/fonts/hel-n-B.woff") format("woff");}
.font-hel-n-B{font-family:hel-n-B,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;}

@font-face {font-family: 'hel-n-M';src: url("/fonts/hel-n-M.woff2") format("woff2"),url("/fonts/hel-n-M.woff") format("woff");}
.font-hel-n-M{font-family:hel-n-M,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",sans-serif;}



.fz-075em{font-size: .75em;}
.fz-065em{font-size: .65em;}
.fz-05em{font-size: .5em;}


.hvr-bg-wht:hover .clr-wht{color: #000 !important;}


.z-9{z-index: 9;}
.z-8{z-index: 8;}
.z-7{z-index: 7;}
.z-6{z-index: 6;}
.z-5{z-index: 5;}

.w-105{width: 105%;}
.w-107{width: 107%;}


.ls-n03{letter-spacing: -0.3rem;}
.ls-n04{letter-spacing: -0.4rem;}
.ls-n05{letter-spacing: -0.5rem;}
.ls-0105{letter-spacing: 0.15rem;}
.ls-01075{letter-spacing: 0.175em;}
.ls-0305{letter-spacing: 0.35rem;}
.ls-006{letter-spacing: .06em;}
.ls-007{letter-spacing: .07em;}
.ls-1{letter-spacing: 1rem;}
.ls-105{letter-spacing: 1.5rem;}
.ls-2{letter-spacing: 2rem;}
.ls-3{letter-spacing: 3rem;}


.mt-atc-right{margin-top: -1.8rem;}
.mt-atc-right-sm{margin-top: -1.5rem;}
.mb-atc-right{margin-bottom: -1.8rem;}


.m-n5{margin:-3rem!important}
.mt-n5,.my-n5{margin-top:-3rem!important}
.mr-n5,.mx-n5{margin-right:-3rem!important}
.mb-n5,.my-n5{margin-bottom:-3rem!important}
.ml-n5,.mx-n5{margin-left:-3rem!important}


.m-n6{margin:-4rem!important}
.mt-n6,.my-n6{margin-top:-4rem!important}
.mr-n6,.mx-n6{margin-right:-4rem!important}
.mb-n6,.my-n6{margin-bottom:-4rem!important}
.ml-n6,.mx-n6{margin-left:-4rem!important}

.m-n7{margin:-5rem!important}
.mt-n7,.my-n7{margin-top:-5rem!important}
.mr-n7,.mx-n7{margin-right:-5rem!important}
.mb-n7,.my-n7{margin-bottom:-5rem!important}
.ml-n7,.mx-n7{margin-left:-5rem!important}

.m-n8{margin:-6rem!important}
.mt-n8,.my-n8{margin-top:-6rem!important}
.mr-n8,.mx-n8{margin-right:-6rem!important}
.mb-n8,.my-n8{margin-bottom:-6rem!important}
.ml-n8,.mx-n8{margin-left:-6rem!important}


.aspect-sq:before { content:""; display: block; padding-top: 100%; }

.pl-4075{padding-left: 2.5rem;}


.nuxt-link-exact-active,header .nuxt-link-active{border-color: #b7b7b7 !important;color: #f3e758 !important;}
#nav-partners .nuxt-link-exact-active{opacity: .5}

.page-link{color: #333;font-size: 1.2rem;}
a:hover,a:active,a:focus{color: #000 !important;text-decoration: none;}
a:hover span.bbsd.d-inline-block.text-left{border-bottom-color: #000 !important;}

.bg-red{background: #e61919;}
.bg-blk-op05{background: rgba(0,0,0,.5);}
.bg-blk-op07{background: rgba(0,0,0,.7);}
.bg-blk-op075{background: rgba(0,0,0,.75);}
.bg-blk-op08{background: rgba(0,0,0,.8);}
.bg-blk-op085{background: rgba(0,0,0,.85);}
.bg-blk-op095{background: rgba(0,0,0,.95);}
.bg-pink{background-color: #ff85c3 !important}
.bg-gray-light{background-color: #f1f1f1 !important}
.bg-gray-dark{background-color: #292929 !important}
.bg-green{background-color: #00c850;}
.bg-green-dark{background-color: #0bc29d;}
.bg-blue{background-color: #00a0e6;}
.bg-yellow{background-color: #f3e758;}
.bg-orange{background-color: #ffd288;}
.bg-orange-red{background-color: #f96f0a;}


.hvr-bg-gray-light:hover{background-color: #f8f8f8 !important;}
.hvr-bg-red:hover{background-color: #e61919 !important;}
.hvr-tdu:hover{text-decoration: underline;}

.bc-yellow{border-color: #f3e758 !important;}
.bc-red{border-color: #e61919 !important;}
.bc-gray{border-color: #ccc !important}
.bc-gray-light{border-color: #ccc !important}
.bc-gray-dark{border-color: #b7b7b7 !important}

.clr-red{color: #e61919 !important;}
.clr-gray-dark{color: #191919 !important;}
.clr-gray-light{color: #ccc !important;}
.clr-yellow,.hvr-clr-yellow:hover,.hvr-clr-yellow:hover .fa,.hvr-clr-yellow:hover h2,.hvr-clr-yellow:hover p{color: #f3e758 !important;}


.h-05rem{height: .5rem;}
.h-06rem{height: .6rem;}
.h-07rem{height: .7rem;}
.h-08rem{height: .8rem;}
.h-09rem{height: .9rem;}


.liComment{padding-left: 1rem;}
  .liComment>li{position: relative;padding-left: .25rem;}
    .liComment>li::before{position: absolute;content: "*";top:0;left:-1.15rem;color: #191919;vertical-align: middle;font-size: 1em;}

.listDl dt:after {content: ":";padding-right: .5rem;padding-left: .5rem;}

.dlFaq {padding-left: 1.35em;}
.dlFaq dt {margin-bottom: .5rem;margin-top: 2rem;}
.dlFaq dt::before {content:'Q.';margin-left: -1.2em;margin-right: .2em;}


.pt-105,.py-105{padding-top: .375rem;}
.pb-105,.py-105{padding-bottom: .375rem;}
.pr-105,.px-105{padding-right: .375rem;}
.pl-105,.px-105{padding-left: .375rem;}
.p-105{padding: .375rem;}

/*common*/
#logo-hibigei{background: url('/img/global/logo-hibiart-wht.svg') no-repeat;}

/*vision*/
.tl-re .tl-v{margin-top: -3.5rem;line-height: 7;}
.tl-re img{padding: 2.5rem;}
.tl-po .tl-v{margin-top: -2.45rem;line-height: 4.5;}
.tl-po img{padding: 3.35rem;}
.tl-fu .tl-v{margin-top: -1.8rem;line-height: 6.5;}
.tl-fu img{padding:3rem;}


.scale-102{transform: scale(1.2);}

/*work*/
.box-entry img{width: 100% !important;height: auto !important;}
.p-wht{font-size: 1.15rem;line-height: 2;margin-top: -.05em;padding: 2.5rem 2rem;background: #fff;color: #333;}
  .p-wht + .p-wht{padding-top: 0 !important;margin-top: -.5em;}


.page-item.active .page-link {background-color: #333;border-color: #333;}


  #navSide{top: 0rem;}
  #navSide.navFixed{position: fixed;z-index: 2;}
  #navSide.navFixed.navCate{left: calc(100vw * 0.08333333 - 0.625rem);width: calc(100vw * 0.91666667 * 0.25 - 2.25rem);}


.cd-form input[type="radio"] + label, .cd-form input[type="checkbox"] + label{position: relative;}

.w-23{width: 23%;}

.btn-biz{bottom: 2rem;right:0;}

#inquiry{min-height: 16rem;}
.input--filled .input__label-content{color: #fcfcfc !important;transform:translate3d(-.65em, -2.65em, 0) !important;}
.input--filled .input__label::after {background:none !important;}

.bf-clr-wht:before{color: #fff;}

.modal-backdrop {background-color: rgba(41,41,41,.98);}



 /*pagetop*/
 #pagetop{z-index:500;display: none;}
   #pagetop:hover{opacity:1;cursor: pointer;}


/* ==========================================================================
Responsive
========================================================================== */
/* sm */
@media(min-width: 576px){
  #navSide.navFixed.navCate{left: calc((100vw - 540px * 0.91666667) / 2 + 1rem);width: calc((540px * 0.91666667 * 0.25) - 2.373rem);}
/*vision*/
.tl-re .tl-v{margin-top: -5.25rem;line-height: 7.65;}
.tl-re img{padding: 3.5rem;}
.tl-po .tl-v{margin-top: -3.24rem;line-height: 4.25;}
.tl-po img{padding: 5.5rem;}
.tl-fu .tl-v{margin-top: -3.8rem;line-height: 6.2;}
.tl-fu img{padding: 5rem;}

.p-wht{line-height: 3 !important;padding: 3rem 4rem;}
  .p-wht + .p-wht{margin-top: -1.25em;}
.btn-biz{bottom: 2.5rem;}
}
/* md */
@media(min-width: 768px){
  #navSide.navFixed{right: calc((100vw - 720px * 0.91666667) / 2 + .85rem);width: calc((720px * 0.91666667 * 0.16666667) - 3.6105rem);}
  #navSide.navFixed.navCate{left: auto;right: calc((100vw - 720px * 0.91666667) / 2 + .95rem);width: calc((720px * 0.91666667 * 0.25) - 2.373rem);}

.w-md-43{width: 43% !important;}
.w-md-45{width: 45% !important;}

.ml-md-n01{margin-left: -.1rem !important;}

  .h-md-63rem{height: 63rem !important;}
  .h-md-65rem{height: 65rem !important;}
  .h-md-66rem{height: 66rem !important;}
  .h-md-67rem{height: 67rem !important;}
  .h-md-68rem{height: 68rem !important;}
  .h-md-69rem{height: 69rem !important;}
  .h-md-70rem{height: 70rem !important;}
  .h-md-72rem{height: 72rem !important;}
  .h-md-73rem{height: 73rem !important;}
  .h-md-74rem{height: 74rem !important;}
  .h-md-75rem{height: 75rem !important;}

.row.add3x-md-gutters {margin-right: -4rem !important;margin-left: -4rem !important;}
.add3x-md-gutters > [class*=col-], .add3x-md-gutters > .col {padding-right: 4rem;padding-left: 4rem;}
.ls-md-1{letter-spacing: 1rem;}
.ls-md-2{letter-spacing: 2rem;}
.ls-md-3{letter-spacing: 3rem;}
.btn-biz{bottom: 3rem;}
/*vision*/
.tl-re .tl-v{margin-top: -5.75rem;line-height: 6.2;}
.tl-re img{padding: 4.75rem;}
.tl-po .tl-v{margin-top: -3.25rem;line-height: 4.45;}
.tl-po img{padding: 6rem}
.tl-fu .tl-v{margin-top: -2.75rem;line-height: 5.72;}
.tl-fu img{padding: 5rem;}
.p-wht{line-height: 3 !important;padding: 4rem 5rem;}

}
@media(min-width: 768px) and (max-width: 991px){
}
/* lg */
@media(min-width: 992px){


.w-lg-25{width: 25% !important;}
.w-lg-27{width: 27% !important;}
.w-lg-30{width: 30% !important;}
.w-lg-31{width: 31% !important;}
.w-lg-33{width: 33% !important;}
.w-lg-37{width: 37% !important;}

  .h-lg-63rem{height: 63rem !important;}
  .h-lg-65rem{height: 65rem !important;}
  .h-lg-66rem{height: 66rem !important;}
  .h-lg-67rem{height: 67rem !important;}
  .h-lg-68rem{height: 68rem !important;}
  .h-lg-69rem{height: 69rem !important;}
  .h-lg-70rem{height: 70rem !important;}
  .h-lg-72rem{height: 72rem !important;}
  .h-lg-73rem{height: 73rem !important;}
  .h-lg-74rem{height: 74rem !important;}
  .h-lg-75rem{height: 75rem !important;}

/*vision*/
.tl-re .tl-v{margin-top: -7.5rem;line-height: 7.5;}
.tl-re img{padding: 4.5rem;}
.tl-po .tl-v{margin-top: -4.6rem;line-height: 5.4;}
.tl-po img{padding: 7rem;}
.tl-fu .tl-v{margin-top: -4rem;line-height: 7;}
.tl-fu img{padding: 6.5rem;}
}
/* iPad landscape iPad Pro */
@media(min-width:1024px) and (max-width : 1366px) {
}
/*xl*/
@media(min-width:1200px){

.w-xl-23{width: 23% !important;}
.w-xl-117{width: 117%;}
.btn-biz{right: calc(25vw - 6.5rem);}

.h-xl-65rem{height: 65rem !important;}
.h-xl-2075rem{height: 2.75rem !important;}
.ls-xl-n04{letter-spacing: -0.4rem !important;}

/*vision*/
.tl-re .tl-v{margin-top: -9rem;line-height: 7.15;}
.tl-re img{padding: 4.75rem;}
.tl-po .tl-v{margin-top: -5.2rem;line-height: 5.22;}
.tl-po img{padding: 9rem;}
.tl-fu .tl-v{margin-top: -4.8rem;line-height: 6.8;}
.tl-fu img{padding: 8rem;}
.scale-1{transform: scale(1);}
}
/*2xl*/
@media(min-width:1366px){
   #pagetop{margin-right: calc((100vw - 1200px)/2) !important;}

  .pl-2xl-10, .px-2xl-10 {padding-left: 8rem!important;}
  .pr-2xl-10, .px-2xl-10 {padding-right: 8rem!important;}

  .w-2xl-21{width: 21% !important;}
  .w-2xl-22{width: 22% !important;}
  .w-2xl-23{width: 23% !important;}
  .w-2xl-25{width: 25% !important;}
  .w-2xl-27{width: 27% !important;}
  .w-2xl-30{width: 30% !important;}
  .w-2xl-105{width: 105%;}
  .w-2xl-107{width: 107%;}
  .w-2xl-115{width: 115%;}
  .w-2xl-47rem{width: 47rem !important;}
  .w-2xl-50rem{width: 50rem !important;}
  .w-2xl-53rem{width: 53rem !important;}
  .w-2xl-55rem{width: 55rem !important;}
  .h-2xl-63rem{height: 63rem !important;}
  .h-2xl-65rem{height: 65rem !important;}
  .h-2xl-70rem{height: 70rem !important;}
  .h-2xl-72rem{height: 72rem !important;}
  .h-2xl-73rem{height: 73rem !important;}
  .h-2xl-74rem{height: 74rem !important;}
  .h-2xl-75rem{height: 75rem !important;}

  .btn-biz{bottom: 4rem;}
  .btn-biz{right: calc(25vw - 7rem);}
}
/*3xl*/
@media(min-width:1600px){
  .w-3xl-21{width: 21% !important;}
  .w-3xl-22{width: 22% !important;}
  .w-3xl-47rem{width: 47rem !important;}
  .h-3xl-65rem{height: 65rem !important;}
  .h-3xl-70rem{height: 70rem !important;}

  .pl-3xl-10, .px-3xl-10 {padding-left: 8rem!important;}
  .pr-3xl-10, .px-3xl-10 {padding-right: 8rem!important;}
  .btn-biz{right: calc(33.33333vw - 7rem);}
}
/*4xl*/
@media(min-width:1800px){
.w-4xl-20rem{width: 20rem !important;}
.w-4xl-50rem{width: 50rem !important;}
.w-4xl-53rem{width: 53rem !important;}
.w-4xl-55rem{width: 55rem !important;}
.h-4xl-63rem{height: 63rem !important;}
}