/*  -----------------------------------

    NXCL Style since 2023 
    - Solutions Top Style
    - Solutions Common Style
    - Financial/General Style
    - Solutions Detail Style

    ---------------------------------- */

/*  Solutions Top Style ------------------ */

#sl-solutions #ttl-area .v880x620 {
    padding-top: 196px;
}

/*  Solutions Common Style ------------------ */
.sub-nav h2 + ul > li > a {
    font-weight: bold;
}
.sub-nav .sl-sub_tra h2 + ul > li > a {
    font-weight: normal;
}
.deco-line-sl {
    position: absolute;
    content: "";
    top: 1480px;
    left: -42.45vw;
    width: 52.08vw;
    height: 9.11vw;
    background: url(/common/images/deco-line2.svg) no-repeat left top;
    background-size: 100%;
    z-index: -1;
}
.deco-line-sl-r {
    position: absolute;
    content: "";
    top: 3100px;
    right: -84.38vw;
    width: 107.29vw;
    height: 6.51vw;
    background: url(/common/images/deco-line.svg) no-repeat left top;
    background-size: 100%;
    z-index: -1;
    transform: scale(-1,1);
}
.deco-cube-sl {
    position: absolute;
    content: "";
    top: 2880px;
    right: 200px;
    width: 9.38vw;
    height: 9.38vw;
    background: url(/common/images/deco-cube.svg) no-repeat left top;
    background-size: 100%;
    transform: rotate(0deg);
    z-index: -1;
}

#sl-solutions .p-list {
    padding-left: 1.6rem;
    text-indent: -1.6rem;
    display: block;
}
#sl-solutions .p-list::before {
    content: "・";
    font-weight: bold;
}


.container.wide {
    width: 100%;
}
.container.wide .container__inner,
.container.wide .container__inner.sol section {
    width: 1220px;
    margin: 0 auto;
}
.container.wide .container__inner.sol {
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
}

.container.wide .container__inner.sol .sc-gnl {
    margin-bottom: 100px;
}
.container.wide .container__inner.sol section {
    display: flex;
    justify-content: space-between;
    padding: 80px 0 40px;
    position: relative;
}
.container__inner section.sc-dx .d-flex-col2 div,
.container.wide .container__inner.sol section div {
    width: 590px;
}
.container__inner section.sc-dx figure,
.container.wide .container__inner.sol section figure {
    max-width: 512px;
}
.container.wide .container__inner.sol section.sc-gnl figure {
    position: absolute;
    right: 0;
    z-index: 0;
}
.container.wide .container__inner.sol section.sc-gnl div {
    width: auto;
}
.container.wide .container__inner.sol section.sc-gnl div p {
    width: 590px;
}
.container.wide .container__inner.sol section .btn {
    box-shadow: 0 10px 20px rgb(0 0 0 / 6%);
}


.sc-gnl ul {
    display: grid;
    height: 220px;
    grid-template-columns: 250px 280px 190px 190px 190px;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    grid-auto-flow: column;
    margin-bottom: 60px;
}
.sc-gnl ul li {
    position: relative;
}
.sc-gnl ul li::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;

    background-color: rgb(0, 0, 0);
    filter: blur(10px);
    transform: translateY(10px) scale(1);
    mix-blend-mode: multiply;
    opacity: 6%;
}
.sc-gnl ul li a {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 24px 0 20px;
    border: var(--main-color) solid 1px;
    border-radius: 5px;
    background-color: #fff;
    color: var(--main-color);
    font-weight: bold;
    font-feature-settings: "palt";
    justify-content: space-around;
    letter-spacing: 0.1rem;
    align-items: center;
    text-align: center;
    text-decoration: none!important;
    z-index: 10;
}
.sc-gnl ul li a:hover {
    opacity: 1;
    background-color: #dddae4;
    text-decoration: none;
}
.sc-gnl ul li a span {
    flex: 1 1 auto;
}
.sc-gnl ul li a::before {
    content: "";
    background-repeat: no-repeat;
}
/* proceeds 売上金管理 */
.sc-gnl ul li.gnl-proceeds {
    grid-row: 1/3;
    grid-column: 1/2;
}
.sc-gnl ul li.gnl-proceeds a {
    flex-direction: column;
    justify-content: center;
    font-size: 2rem;
}
.sc-gnl ul li.gnl-proceeds a span {
    flex: inherit;
}
.sc-gnl ul a.sol-proceeds::before {
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
}
/* csd オンライン入出金機 */
.sc-gnl ul a.sol-csd::before {
    width: 36px!important;
    height: 36px!important;
}
/* bag バッグ集配金 */
.sc-gnl ul a.sol-bag::before {
    width: 40px!important;
    height: 38px!important;
}
/* change 両替金配達 */
.sc-gnl ul li.gnl-change {
    grid-row: 1/2;
    grid-column: 3/4;
}
.sc-gnl ul a.sol-change::before {
    width: 22px!important;
    height: 27px!important;
}
/* eos 集金配金オーダー */
.sc-gnl ul li.gnl-eos {
    grid-row: 1/2;
    grid-column: 4/5;
}
.sc-gnl ul a.sol-eos::before {
    width: 22px!important;
    height: 27px!important;
}
/* event イベント等売上金回収サービス */
.sc-gnl ul li.gnl-event {
    grid-row: 1/2;
    grid-column: 5/6;
}
.sc-gnl ul a.sol-event::before {
    width: 26px;
    height: 26px;
    line-height: 1.3rem;
}
.sc-gnl ul a.sol-event::before {
    margin-bottom: 9px;
}
/* voucher 金券類管理 */
.sc-gnl ul a.sol-voucher::before {
    width: 31px!important;
    height: 19px!important;
}
/* valuables 貴重品輸送 */
.sc-gnl ul a.sol-valuables::before {
    width: 30px!important;
    height: 26px!important;
}
/* exam 試験問題輸送 */
.sc-gnl ul a.sol-exam::before {
    width: 23px;
    height: 25px!important;
}
/* not:sol-proceeds 売上金管理 以外 */
.sc-gnl ul li:not(.sol-proceeds) a span {
    font-size: 1.6rem;
}

.sc-gnl ul li a::after {
    content: "";
    position: absolute;
    right: 17px;
    margin: auto;
    vertical-align: middle;
    width: 9px;
    height: 9px;
    border-top: 3px solid var(--main-color);
    border-right: 3px solid var(--main-color);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* max-width: 1600px 
   1600px以下 ================== */
@media screen and (max-width: 1600px){
    .min-solutions .deco-line-sl {
        left: -47.92vw;
    }
}
  
/* max-width: 1439px 
   1439px以下 ================== */
@media screen and (max-width: 1439px){
  .min-solutions .deco-line-sl {
    display: none;
  }
}
/* max-width: 1279px 
   1279px以下 ================== */
@media screen and (max-width: 1279px){
    .container.wide {
        padding: 0;
    }
    .container.wide .container__inner, 
    .container.wide .container__inner.sol section {
        width: 100%;
        gap: 0 20px;
    }
    .container.wide .container__inner {
        padding: 0 5.33vw;
    }
    .container.wide .container__inner.sol {
        padding-right: 0;
    }
    .container.wide .container__inner.sol section.sc-gnl div {
        padding-right: 532px;
        width: 100%;
    }
    .container.wide .container__inner.sol section.sc-gnl div p {
        width: auto;
    }
}
/* max-width: 1199px 
   1199px 以上 ================== */
@media screen and (max-width:1199px) {
    #sl-solutions #ttl-area .v880x620 {
      padding-top: 150px;
      min-height: 474px;
    }
    .deco-line-sl-r,
    .deco-cube-sl {
        display: none;
      }
    .sl-csd-linup .wht-area figure img {
        width: inherit;
        max-width: inherit;
        height: 100%;
    }
    .sc-gnl ul {
        grid-template-columns: 19.53vw 22.66vw 15.41vw 15.41vw 15.41vw;
        gap: 0.94vw;
    }
    .sc-gnl ul li a {
        padding: 0 1.88vw 0 1.17vw;
    }
    .sc-gnl ul li:not(.gnl-proceeds) a span {
        font-size: 1.4rem;
        line-height: 2rem;
        letter-spacing: 0.05rem;
    }
    .sc-gnl ul li a::after {
        right: 1.69vw;
    }
}
/* max-width: 889px 
   889px ================== */
@media screen and (max-width: 889px){
    #sl-solutions #ttl-area {
        padding: 0;
    }
    #sl-solutions #ttl-area #breadcrumb {
        padding: 0 5.33vw;
    }
    #sl-solutions #ttl-area .ttl-h1 {
      padding-top: 76px;
    }
    #sl-solutions #ttl-area .ttl-title {
        padding: 0 5.33vw;
    }
    #sl-solutions #ttl-area .ttl-visual {
        max-width: 100vw;
    }
    .container.wide .container__inner.sol {
        padding-right: 5.33vw;
    }   
    .container.wide .container__inner.sol section.sc-gnl div {
        padding-right: 0;
    }
    .container__inner section.sc-dx .d-flex-col2 div,
    .container.wide .container__inner.sol section div,
    .container.wide .container__inner.sol section.sc-gnl div p {
        width: 100%;
    }
    .container__inner section.sc-dx figure,
    .container.wide .container__inner.sol section figure {
        max-width: 100%;
    }
    .container.wide .container__inner.sol section {
        flex-direction: column;
    }
    .sc-gnl ul {
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 100px repeat(5 , 90px);
        height: auto;
        margin: 0 5.33vw 40px;
        gap: 15px;
    }
    .sc-gnl ul li {
        display: inline-block;
    }
    .sc-gnl ul li a {
        padding: 0 4vw 0 2.67vw;
    }
    .sc-gnl ul a.sol-proceeds,
    .sc-gnl ul a.sol-csd,
    .sc-gnl ul a.sol-bag {
        padding: 0 6.67vw 0 5.33vw;
    }
    /* proceeds 売上金管理 */
    .sc-gnl ul li.gnl-proceeds {
        grid-row: 1/2;
        grid-column: 1/3;
    }
    .sc-gnl ul li.gnl-proceeds a {
        flex-direction: initial;
        justify-content: space-around;
    }
    .sc-gnl ul li.gnl-proceeds a::before {
        margin-bottom: 0;
    }
    .sc-gnl ul li.gnl-proceeds a span {
        flex: 1 1 auto;
        font-size: 2rem;
    }
    .sc-gnl ul a.sol-proceeds::before {
        width: 46px;
        height: 46px;
    }
    /* csd オンライン入出金機 */
    .sc-gnl ul li.gnl-csd {
        grid-row: 2/3;
        grid-column: 1/3;
    }
    .sc-gnl ul a.sol-csd::before {
        width: 50px!important;
        height: 50px!important;
    }
    /* bag バッグ集配金 */
    .sc-gnl ul li.gnl-bag {
        grid-row: 3/4;
        grid-column: 1/3;
    }
    .sc-gnl ul a.sol-bag::before {
        width: 51px!important;
        height: 50px!important;
    }
    /* change 両替金配達 */
    .sc-gnl ul li.gnl-change {
        grid-row: 4/5;
        grid-column: 1/2;
    }
    .sc-gnl ul a.sol-change::before {
        width: 33px!important;
        height: 40px!important;
    }
    /* eos 集金配金オーダー */
    .sc-gnl ul li.gnl-eos {
        grid-row: 4/5;
        grid-column: 2/3;
    }
    .sc-gnl ul a.sol-eos::before {
        width: 32px!important;
        height: 38px!important;
    }
    /* event イベント等売上金回収サービス */
    .sc-gnl ul li.gnl-event {
        grid-row: 5/6;
        grid-column: 1/2;
    }
    .sc-gnl ul a.sol-event::before {
        width: 36px;
        height: 37px;
    }
    /* voucher 金券類管理 */
    .sc-gnl ul li.gnl-voucher {
        grid-row: 5/6;
        grid-column: 2/3;
    }
    .sc-gnl ul a.sol-voucher::before {
        width: 38px!important;
        height: 24px!important;
    }
    /* valuables 貴重品輸送 */
    .sc-gnl ul a.sol-valuables::before {
        width: 40px!important;
        height: 36px!important;
    }
    /* exam 試験問題輸送 */
    .sc-gnl ul a.sol-exam::before {
        width: 40px;
        height: 34px!important;
    }
    .sc-gnl ul li:not(.gnl-proceeds) a span {
        font-size: 1.8rem;
        letter-spacing: 0.08rem;
        line-height: 2.4rem;
    }
    .sc-gnl ul li a::after {
        right: 1.33vw;
    }
    .sol > section > div > p:last-child {
        text-align: center;
    }
    .container.wide .container__inner.sol section.sc-gnl figure {
        position: static;
        right: initial;
        z-index: auto;
    }
    .container.wide .container__inner.sol figure {
        margin-top: -65px;
        padding: 0 3.33vw;
    }
    .container.wide .container__inner.sol figure img {
        width: 100%;
    }
}
/* max-width: 768px 
   768px ================== */
@media screen and (max-width: 768px){
    .container.wide .container__inner.sol section {
        padding-top: 40px;
    }
}
/* max-width: 519px 
   519px ================== */
@media screen and (max-width: 519px){
    #sl-solutions #ttl-area .ttl-h1 {
      padding-top: 7.32vw /* 38px */
    }
    .sc-gnl ul {
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 19.27vw repeat(5 , 15.41vw);
    }
    .sc-gnl ul li a::after {
        right: 2.89vw;
    }
    .sc-gnl ul li.gnl-proceeds a::before {
        width: 23.5px!important;
    }
    .sc-gnl ul li.gnl-proceeds a span {
        font-size: 1.5rem;
        line-height: 2.3rem;
    }
    .sc-gnl ul li:not(.gnl-proceeds) a span {
        font-size: 1.3rem;
        line-height: 1.7rem;
        letter-spacing: 0.16rem;
    }
    .sc-gnl ul {
        grid-template-rows: 15.41vw repeat(5 , 12.52vw);
        gap: 3.08vw;
    }
    /* proceeds 売上金管理 */
    .sc-gnl ul a.sol-proceeds::before {
        width: 6.4vw!important;
        height: 6.4vw!important;
    }
    /* csd オンライン入出金機 */
    .sc-gnl ul a.sol-csd::before {
        width: 6.67vw!important;
        height: 6.67vw!important;
    }
    /* bag バッグ集配金 */
    .sc-gnl ul a.sol-bag::before {
        width: 6.67vw!important;
        height: 6.67vw!important;
    }
    /* change 両替金配達 */
    .sc-gnl ul a.sol-change::before {
        width: 4.4vw!important;
        height: 5.33vw!important;
    }
    /* eos 集金配金オーダー */
    .sc-gnl ul a.sol-eos::before {
        width: 4.4vw!important;
        height: 5.33vw!important;
    }
    /* event イベント等売上金回収サービス */
    .sc-gnl ul a.sol-event::before {
        width: 4.8vw!important;
        height: 4.93vw!important;
    }
    /* voucher 金券類管理 */
    .sc-gnl ul a.sol-voucher::before {
        width: 5.07vw!important;
        height: 3.2vw!important;
    }
    /* valuables 貴重品輸送 */
    .sc-gnl ul a.sol-valuables::before {
        width: 5.33vw!important;
        height: 4.53vw!important;
    }
    /* exam 試験問題輸送 */
    .sc-gnl ul a.sol-exam::before {
        width: 4.4vw!important;
        height: 4.8vw!important;
    }
}
/* max-width: 390px 
   390px 以下 ================== */
@media screen and (max-width:390px) {
    .sc-gnl ul {
        margin: 0 6.41vw 40px;
    }
    .sc-gnl ul li a::after {
        right: 10px;
        width: 6px;
        height: 6px;
        border-top-width: 2px;
        border-bottom-width: 2px;
    }
    .sc-gnl ul {
        grid-template-rows: 20.51vw repeat(5 , 16.67vw);/* 65px*/
    }
    .container.wide .container__inner.sol figure {
        margin-top: -50px;
    }
}

/*  Financial/General ----------------- */

#sl-financial #ttl-area .ttl-h1,
#sl-general #ttl-area .ttl-h1 {
    position: initial;
}

/* max-width: 1199px 
   1199px 以下 ================== */
@media screen and (max-width:1199px) {
    #sl-financial #ttl-area .ttl-h1,
    #sl-general #ttl-area .ttl-h1 {
      height: inherit;
    }
}

/* max-width: 889px 
   889px 以下 ================== */
@media screen and (max-width:889px) {
    #sl-financial #ttl-area,
    #sl-general #ttl-area {
        padding: 0;
    }
    #sl-financial #ttl-area #breadcrumb,
    #sl-general #ttl-area #breadcrumb {
        padding: 0 5.33vw;
    }
    #sl-financial #ttl-area .ttl-title,
    #sl-general #ttl-area .ttl-title {
        padding: 0 5.33vw;
    }
    #sl-financial #ttl-area .ttl-visual,
    #sl-general #ttl-area .ttl-visual {
        max-width: 100vw;
    }
}

/*  Solutions Detail Style ------------------ */
.sl-csd-linup .wht-area {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 0fr;
    padding: 0;
    font-size: 1.4rem;
}
.sl-csd-linup .wht-area .sl-tag {
    grid-row: 1/2;
    grid-column: 1/2;
    padding: 40px 0 20px 40px;
}
.sl-tag li {
    display: inline-block;
    min-width: 100px;
    padding: 4px 15px;
    background-color: #d6e5a0;
    font-size: 1.4rem;
    line-height: 2.6rem;
    border-radius: 18px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 10px;
}
.sl-csd-linup .wht-area .sl-tag + p {
    grid-row: 2/3;
    grid-column: 1/2;
    padding: 0 0 30px 40px;
    border-bottom: #222 1px solid;
}
.sl-csd-linup .wht-area figure {
    grid-row: 1 / 4;
    grid-column: 2 /3;
    padding: 50px 36px;
}
.sl-csd-linup .wht-area figure img {
    max-width: 180px;
}
.sl-csd-linup .wht-area .d-flex-col2 {
    grid-row: 4 /5;
    grid-column: 1 / 3;
    padding: 10px 40px 40px 40px;
    gap: 0 30px;
}
.sl-csd-linup .wht-area .d-flex-col2 li {
    flex: 1 1 auto;
}
.sl-csd-linup .wht-area .d-flex-col2 li a {
    justify-content: center;
    padding: 15px;
}
.sl-csd-linup .wht-area dl {
    grid-row: 3 / 4;
    grid-column: 1 /2;
    padding: 10px 0 40px 40px;
    display: flex;
    flex-wrap: wrap;
}
.sl-csd-linup .wht-area dl dt {
    flex-basis: 30%;
    font-weight: bold;
}
.sl-csd-linup .wht-area dl dd {
    flex-basis: 70%;
    text-indent: -1.6rem;
    padding-left: 1.6rem;
}
.sl-csd-linup .wht-area dl dd::before {
    content: ":";
    margin: 0 5px;
}
/* max-width: 1199px 
   1199px 以下 ================== */
@media screen and (max-width:1199px) {
    .sl-csd-linup .wht-area figure img {
        width: inherit;
        max-width: inherit;
        height: 100%;
    }
}
/* max-width: 889px 
   889px 以下 ================== */
@media screen and (max-width:889px) {
    .sl-csd-linup .wht-area figure img {
        width: 180px;
        height: auto;
    }
    .sl-csd-linup .wht-area .btn-pdf {
        margin-bottom: 30px;
    }
}
/* max-width: 768px 
   768px 以下 ================== */
@media screen and (max-width:768px) {
    .sl-csd-linup .wht-area {
        display: block;
    }
    .sl-csd-linup .wht-area .sl-tag,
    .sl-csd-linup .wht-area .sl-tag + p {
        padding-right: 40px;
    }
    .sl-csd-linup .wht-area .sl-tag + p {
        margin-bottom: 0;
    }
    .sl-csd-linup .wht-area figure {
        margin-bottom: 0;
    }
    .sl-csd-linup .wht-area dl {
        display: block;
        padding: 10px 40px 40px 40px;
    }
    .sl-csd-linup .wht-area dl dt::after {
        content: ":";
        margin: 0 5px;
    }
    .sl-csd-linup .wht-area dl dd {
        padding-left: 0;
        text-indent: 0;
        margin-bottom: 30px;
    }
    .sl-csd-linup .wht-area dl dd:last-child {
        margin-bottom: 0;
    }
    .sl-csd-linup .wht-area dl dd::before {
        content: none;
    }
    .sl-csd-linup .wht-area .btn-pdf:last-child {
        margin-bottom: 0;
    }
}
/* max-width: 519px 
   519px 以下 ================== */
@media screen and (max-width:519px) {
    .sl-csd-linup .wht-area .sl-tag {
        padding: 3.85vw 3.85vw 1.93vw; /* 519px:20px 20px 10px */
    }
    .sl-csd-linup .wht-area .sl-tag + p {
        padding: 0 3.85vw 3.85vw; /* 519px:20px 20px 10px */
    }
    .sl-tag li {
        font-size: 1rem;
        line-height: 1.8rem;
        min-width: initial;
        margin-bottom: 0.96vw; /* 519px:5px */
        margin-right: 0.96vw; /* 519px:5px */
    }
    .sl-csd-linup .wht-area figure {
        padding: 3.85vw;
        margin-bottom: 0;
    }
    .sl-csd-linup .wht-area figure img {
        width: 23.12vw;/* 519px:120px */
    }
    .sl-csd-linup .wht-area dl {
        padding: 0 3.85vw 2.89vw; /* 519px:20px 20px 15px */
    }
    .sl-csd-linup .wht-area dl dd {
        margin-bottom: 2.89vw;
    }
    .sl-csd-linup .wht-area .d-flex-col2 {
        padding: 0 3.85vw 3.85vw;
    }
    .sl-csd-linup .wht-area .d-flex-col2 li {
        margin-bottom: 2.89vw;
    }
    #sl-financial  #ttl-area .ttl-h1,
    #sl-general  #ttl-area .ttl-h1 {
        margin-bottom: 70px
      }
}
/* max-width: 390px 
   390px 以下 ================== */
@media screen and (max-width:390px) {
    #sl-solutions .container__inner.sol section div > h2 + p {
        margin-bottom: 10.26vw; /* 390px:40px */
    }
    .container.wide .container__inner.sol section .btn {
        width: 46.15vw;/* 390px:180px */
        height: 11.54vw;/* 390px:45px */
    }
    .container.wide .container__inner.sol section figure {
        padding: 0 4.23vw;/* 390px:0 16.5px */
    }
    .container.wide .container__inner.sol .sc-gnl {
        margin-bottom: 17.95vw; /* 390px:70px */
    }
}