/*--------------------------------------
  sec1
--------------------------------------*/
#sec1 {
  padding: 48px 0;
}

#sec1 .decoration {
  margin: 94px 25px 0;
}
#sec1 .set {
  background: var(--blue);
  border-radius: 20px;
  padding: 46px 27px 42px 23px;
  color: #fff;
  margin-bottom: 50px;
}
#sec1 .set > h3 {
  font-size: 22px;
  letter-spacing: 0.05em;
  margin-left: 4px;
}
#sec1 .set .ttl {
  font-size: 17px;
  margin: 8px 0 8px 2px;
}
#sec1 .set .item {
  margin-bottom: 29px;
}
#sec1 .set .item .note {
  color: #fff;
}
#sec1 .set .btn-cus {
  margin-top: 56px;
  text-align: center;
}
#sec1 .set .btn-cus a {
  font-size: 14px;
  padding: 0 45px;
}
#sec1 .set.set2 {
  background: var(--yellow);
}
#sec1 .set.set2 .item .tags p {
  background: var(--green);
}
#sec1 .set.set3 {
  background: var(--green);
}
#sec1 .set.set3 .item .tags p {
  background: var(--purple);
}
#sec1 .set.set4 {
  background: var(--purple);
}
#sec1 .set.set5 {
  background: #000;
}
#sec1 .set.set5 .item .tags p {
  background: var(--blue);
}

@media screen and (max-width: 768px) {
  #sec1 .set .item .note {
    font-size: 15px;
    margin-top: 22px;
  }
  #sec1 .set .item h3 {
    font-size: 19px;
  }
  #sec1 .set .item .tags {
    margin-top: 7px;
  }
  #sec1 .set .item .tags p {
    height: 29.5px;
    font-size: 13px;
    padding: 0 27px;
  }
}
/*--------------------------------------
    PC
  --------------------------------------*/
@media screen and (min-width: 768px) {
  /*--------------------------------------
      sec1
    --------------------------------------*/
  #sec1 {
    padding: 70px 0 173px;
  }
  #sec1 .ttl-common + .f800 {
    margin-left: 0;
  }

  #sec1 .decoration {
    width: 380px;
    margin: 63px -10px -10px auto;
  }
  #sec1 .set {
    position: relative;
    z-index: 2;
    margin: 0 -32px 0 -34px;
    border-radius: 30px;
    padding: 91px 57px 44px;
    margin-bottom: 99px;
  }
  #sec1 .set > h3 {
    font-size: 37px;
  }
  #sec1 .set .ttl {
    font-size: 19px;
    margin: 19px 0 19px 3px;
  }
  #sec1 .set .slider {
    margin-left: 3px;
    margin-right: 4px;
  }
  #sec1 .set .slider .slick-list {
    padding-right: 130px;
  }
  #sec1 .set .slider .slick-arrow {
    width: 48px;
    height: 48px;
    top: 124px;
  }
  #sec1 .set .slider .slick-arrow:hover {
    opacity: 0.8;
  }
  #sec1 .set .slider .slick-prev {
    left: -25px;
  }
  #sec1 .set .slider .slick-next {
    right: -25px;
  }
  #sec1 .set .slider .item .note {
    margin-top: 18px;
  }
  #sec1 .set .btn-cus {
    position: absolute;
    top: 127px;
    margin: 0;
    right: 60px;
  }
  #sec1 .set .btn-cus a {
    height: 43px;
    line-height: 44px;
  }
}

/*# sourceMappingURL=company-details.css.map */

@media screen and (max-width: 768px) {
  .c-row2.slider {
    display: flex; /* フレックスボックスを利用して子要素を横並びに */
    overflow-x: auto; /* 横方向のスクロールを有効にする */
    -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールをスムーズにする */
    padding-bottom: 15px; /* スクロールバーが表示される場合のための余白（任意） */

    /* もしSlick SliderなどのJSライブラリがSPでも有効な場合、
       レイアウトが崩れるのを防ぐために一部リセットが必要な場合があります。
       例: .slick-track { display: flex !important; transform: none !important; }
            .slick-list { overflow: visible !important; }
    */
  }

  .c-row2.slider .item {
    flex: 0 0 auto; /* アイテムが縮まず、コンテンツに応じた幅を持つようにする */
    width: 250px; /* 各アイテムの幅を指定（例: 250px）。お好みの幅に調整してください。 */
    margin-right: 15px; /* アイテム間の余白 */
  }

  /* 最後のアイテムの右マージンを削除する場合 */
  .c-row2.slider .item:last-child {
    margin-right: 0;
  }
}

/* SP表示時 (例: max-width: 768px) のみ適用 */
@media screen and (max-width: 768px) {
  .c-row2.slider {
    /* ← 横スクロールさせたい要素のセレクタに変更してください */
    overflow-x: scroll; /* 横スクロールを常に許可し、スクロールバーの領域を確保しようとします */
    -webkit-overflow-scrolling: touch; /* iOSでの慣性スクロールをスムーズにするため */

    /* --- WebKit系ブラウザ (Chrome, Safari, Edgeなど) のスクロールバースタイル --- */
    /* スクロールバー全体のスタイル（トラック部分の背景と高さ） */
    &::-webkit-scrollbar {
      height: 10px; /* 横スクロールバーの高さ（太さ）。お好みの太さに調整してください。 */
      background-color: #e0e0e0; /* スクロールバーの溝（トラック）の色。薄いグレーなど。 */
    }

    /* スクロールバーのつまみ (thumb) のスタイル */
    &::-webkit-scrollbar-thumb {
      background-color: #888888; /* つまみの色。トラックより濃い色にすると目立ちます。 */
      border-radius: 5px; /* つまみの角を丸くする（任意） */
      border: 2px solid #e0e0e0; /* つまみの周りにトラックと同じ色の境界線を引くと、つまみが細く見える効果（任意） */
    }

    /* スクロールバーのトラック部分の角のスタイル（あまり使われないことが多い） */
    /*
    &::-webkit-scrollbar-track-piece {
      background-color: #f0f0f0;
    }
    */

    /* --- Firefox向けのスクロールバースタイル --- */
    /* FirefoxではWebKitほど詳細なカスタマイズはできませんが、色と太さを指定できます */
    scrollbar-width: thin; /* スクロールバーの太さを指定 ('auto', 'thin', 'none') */
    scrollbar-color: #888888 #e0e0e0; /* 1つ目の色が「つまみ」、2つ目の色が「トラック」の色 */
  }
}