@charset "UTF-8";

video#openingMp4 {
    border: none;
}
.parent {
  position: relative;
  height: 100vh; /* ビューポートいっぱい */
  z-index: 5;
}


.swiper-slide2 {
    flex-shrink: 0;
    position: relative;
    transition-property: transform;
    display: block
}

br.sp{display:none;}

.tools img.fadein {
    transition: opacity 1s cubic-bezier(.77,0,.175,1), transform 1s cubic-bezier(.77,0,.175,1);
}

img.service_cube_blue_c-1,
img.service_cube_green,
img.service_cube_blue_c,
img.service_circle_blue,
img.service_triangle_c_pink,
img.service_circle_blue-1,
img.service_triangle_c,
img.circle_blue-blur,
img.service_triangle_c2 {
    z-index: 0;
}

body.page-id-1150 main section.w1200 .u-font-roboto{
    display: flex;
    justify-content: center;
}

img.service_cube_blue_c-1 {
    right: -1%;
    top: 12%;
    position: absolute;
    animation: floatY 4s ease-in-out infinite;
}
img.service_cube_green {
    left: -2%;
    top: 20%;
    position: absolute;
    animation: floatY 5s ease-in-out infinite;
}
img.service_cube_blue_c {
    top: 70%;
    left: 7%;
    position: absolute;
    animation: floatY 3.5s ease-in-out infinite;
}
img.service_circle_blue {
    left: 15%;
    top: 10%;
    position: absolute;
    animation: floatY 4.5s ease-in-out infinite;
}
img.service_triangle_c_pink {
    top: 19%;
    right: 27%;
    position: absolute;
    animation: floatY 5.2s ease-in-out infinite;
}
img.service_circle_blue-1 {
    right: 9%;
    top: 26%;
    position: absolute;
    animation: floatY 3.8s ease-in-out infinite;
}
img.service_triangle_c {
    right: 10%;
    bottom: 0%;
    position: absolute;
    animation: floatY 4.7s ease-in-out infinite;
}

img.circle_blue-blur {
    position: absolute;
    left: -20%;
        animation: floatY 4.7s ease-in-out infinite;
}

img.service_triangle_c2 {
    position: absolute;
    right: 0%;
    bottom: 13%;
    animation: floatY 5.2s ease-in-out infinite;
}

@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-18px); }
  100% { transform: translateY(0); }
}
.one-stop2{
  display:block;
  width:100%;
  max-width:870px;
  margin-left: auto;
margin-right: auto;
    margin-top: 65px;
  /* 調整用カスタムプロパティ */
  --dur: 3.2s;   /* 速度 */
  --f: 10%;      /* ほわんっの幅（大きいほど柔らか） */

  /* グラデの形は固定、位置だけ動かす＝ちらつき防止 */
  -webkit-mask:
    linear-gradient(90deg,
      #000 0,                             /* 左は完全表示 */
      #000 calc(50% - var(--f)),          /* ここまで表示 */
      transparent calc(50% + var(--f))    /* ここから非表示（ほわんっ帯） */
    ) left / 200% 100% no-repeat;
  mask:
    linear-gradient(90deg,
      #000 0,
      #000 calc(50% - var(--f)),
      transparent calc(50% + var(--f))
    ) left / 200% 100% no-repeat;

  /* スムーズ化のおまじない */
  will-change: mask-position, -webkit-mask-position;
  backface-visibility: hidden;
  transform: translateZ(0);
  contain: paint;

  animation: oneStopSweep var(--dur) linear infinite;
}

/* 位置だけ左→右に動かす */
@keyframes oneStopSweep{
  0%   { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  92%  { -webkit-mask-position:   0% 0; mask-position:   0% 0; }
  100% { -webkit-mask-position:   0% 0; mask-position:   0% 0; }
}

/* モーション削減ユーザーには静止表示 */
@media (prefers-reduced-motion: reduce){
  .one-stop2{ animation:none; -webkit-mask-position:100% 0; mask-position:100% 0; }
}

body.page-id-1150 main section.w1200 {
    margin-top: 100px;
        position: relative;
}

img.triangle_blue {
    position: absolute;
    top: 35%;
  animation: floatY 4s ease-in-out infinite;
    left: -13%;
    transition: left 1.1s cubic-bezier(.7,-0.2,.3,1.2);
}
img.circle_yellow {
    position: absolute;
    animation: floatY 5s ease-in-out infinite;
    top: -12%;
    left: 27%;
    right: auto;
    transform: translateX(-50%);
    transition: top 1.1s cubic-bezier(.7,-0.2,.3,1.2);
    animation: floatY 3.5s ease-in-out infinite;
    width: 17%;
}
img.cube_green {
    position: absolute;
    top: 44%;
    right: 3%;
  animation: floatY 4.5s ease-in-out infinite;
    transition: right 1.1s cubic-bezier(.7,-0.2,.3,1.2);
}
img.flying.triangle_blue {
  left: -40%;
}
  animation: floatY 5.2s ease-in-out infinite;
img.flying.circle_yellow {
  top: -400px;
}
img.flying.cube_green {
    right: 3% !important;
    animation: none !important;
}
img.flying.deco_pink {
    left: 27% !important;
    top: 5% !important;
    animation: none !important;
}
/* PC・タブレット共通 */
.center_p b, .center_p p {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 0.8s cubic-bezier(.77,0,.18,1);
            animation: floatY 4.7s ease-in-out infinite;
}


img.service_cube_green2 {
    position: absolute;
    bottom: 57%;
    left: -32%;
      animation: floatY 3.8s ease-in-out infinite;
}

img.service_circle_blue-2 {
    position: absolute;
    right: -32%;
        transition: right 1.1s cubic-bezier(.7,-0.2,.3,1.2);
}
b.show-b span{
    color: #fff;
}
.center_p .show-b {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.1s;
      margin-top: 110px;
	margin-top: 300px;
      animation: none;
}

.center_p .show-p {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.7s;
          animation: none;
}


  /* サービス紹介フェードイン */
  .fadein {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(.77,0,.175,1), transform 1s cubic-bezier(.77,0,.175,1);
  }
  .fadein.visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* ボタンホバー */
  .c-button01 a, .c-button01.-center a {
    transition: background 0.3s, color 0.3s, transform 0.3s;
  }
  .c-button01 a:hover, .c-button01.-center a:hover {
    background: #00aaff;
    color: #fff;
  }
  /* 画像スライドイン */
  .slidein {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 1s, transform 1s;
  }
  .slidein.visible {
    opacity: 1;
    transform: translateX(0);
  }

section.bak_fff {
    padding-bottom: 1px;
    overflow: hidden;
    background: #ffffff;
}
.fa-arrow-right:before {
    font-size: 15px;
}
.l-header_button01 i {
    font-size: 25px;
}
.p-index_case#js-index-kv.is-act {
    margin-top: 0;
    padding: 0;
}
.l-header__buttons {
    background: rgb(255 255 255 / 30%);
    margin-top: -10px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.l-header__menu {
  margin-left: auto;
}
.l-footer {
    background-color: #323E3E;
}
.img_center {
    text-align: center;
}
.u-radius-10 {
    border-radius: 5px;
}
section.center_p {
    text-align: center;
}
section.center_p b {
    font-size: 36px;
    line-height: 160%;
    margin-bottom: 40px;
    display: block;
}
.p-index_news__grid { 
	background: #ffffff;
}
.base-image {
    width: 100%;
    height: auto;
    display: block;
}
.service_box .c-ico.-circle {
    background: #fff;
    border: 1px solid #ffffff;
}
section.center_p {
    text-align: center;
    padding-bottom: 100px;
    padding-top: 100px;
}

.floating-bg {
  display: none;
}

.floating-bg .float {
  position: absolute;
  width: 40px;
  opacity: 0.5;
  animation: float 12s ease-in-out infinite;
}

/* それぞれランダムな位置と動きを指定 */
.shape-1 { top: 10%; left: 20%; animation-delay: 0s; }
.shape-2 { top: 30%; left: 60%; animation-delay: 2s; }
.shape-3 { top: 70%; left: 40%; animation-delay: 4s; }
.shape-4 { top: 50%; left: 80%; animation-delay: 1s; }
.shape-5 { top: 80%; left: 10%; animation-delay: 3s; }
.shape-6 { top: 15%; left: 70%; animation-delay: 2.5s; }
.shape-7 { top: 60%; left: 30%; animation-delay: 4.5s; }
.shape-8 { top: 40%; left: 50%; animation-delay: 1.5s; }
.shape-9 { top: 85%; left: 60%; animation-delay: 3.5s; }
.shape-10 { top: 95%; left: 90%; animation-delay: 0.5s; }

/* ゆらゆら動くアニメーション */
@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-20px) rotate(5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.p-company_profile__table dl ol li {
    margin-bottom: 10px;
}
.p-company_profile__table dl ol li p {
    line-height: 140%;
}
.p-company_profile__table dl ol li b {
    color: #9a9a9a;
    font-weight: 500;
    font-size: 14px;
}
section.item td {
    border: 1px solid #323F66;
    text-align: center;
    padding: 15px 0;
    width: 25%;
}
.w1200 {
    max-width: 1200px;
    margin: auto;
    width: 96%;
}
body.page-id-1150 h4 {
    background: rgb(255 255 255 / 40%);
    font-size: 30px;
    padding-left: 30px;
    margin-bottom: 100px;
    font-family: 'Roboto', sans-serif;
}
section.item {
    padding-bottom: 150px;
}
section.item table{
    margin-bottom: 50px;
    margin-top: 10px;
}
.tools.sales div a img, .tools div a img {
    right: 50px;
    position: absolute;
    height: auto;
    width: auto;
    min-width: auto;
    min-height: auto;
    margin-top: auto;
}

body.page-id-1150 h2 {
    color: rgb(255 255 255 / 40%);
    text-align: center;
    font-size: 128px;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    line-height: 120%;
}
section.center {
    text-align: center;
    margin-bottom: 100px;
}
body.page-id-1150 main section {
    margin-bottom: 50px;
}
.tools {
    border: 1px solid;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    height: 360px;
    font-weight: 500;
    gap: 2%;
}
.tools img {
    margin-top: -31px;
    max-width: 726px;
}
.tools.sales img {
    margin-top: -100px;
}

body.page-id-1150 h5 {
    font-size: 42px;
    line-height: 42px;
    margin-top: 12px;
    margin-bottom: 12px;
}
body.page-id-1150 h5 span {
    font-size: 14px;
    color: #ffffff;
    display: block;
    padding: 0;
    margin: 0;
    line-height: normal;
    margin-top: 7px;
}
section.item.w1200 .c-button01 a .c-ico {
    background: #fff;
}

section.item.w1200 .c-button01 a .c-ico:hover {
    background: #bbc1d0;
}


body.page-id-1150 main section.item .c-button01 a:hover {
    background: #5b6172;
}
.tools div { text-align: center; }
.tools div a {
    margin: auto;
    font-size: 14px;
        position: relative;
}
.tools.sales {
    flex-direction: row-reverse;
    padding-top: 70px;
    padding-bottom: 0;
    height: 360px;
}
.tools .c-button01 {margin-top: 20px;}
body.page-id-1150 main section.bak_fff {
    margin-bottom: 0;
}
body.page-id-1150 h3 {
    font-size: 32px;
    margin-top: 10px;
    margin-bottom: 10px;
}
body.page-id-1150 h3 span{
    color: #fff;
}
img.one_stop {
    margin-top: 50px;
    margin-bottom: 100px;
}
.c-service_overview {
    display: flex;
    margin-top: 160px;
    margin-bottom: 210px;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.gradation {
    background: linear-gradient(to right, #53AAD1, hsl(0deg 0% 100% / 40%));
    padding-left: 100px;
}
.c-service_overview h3 span {
    font-size: 64px;
    display: block;
    color: #ffffff;
    font-weight: 300;
    letter-spacing: 0.3rem;
}
.c-service_overview h3 {
    font-size: 26px;
    border-bottom: 1px solid #354269;
    line-height: 1.2;
    padding-bottom: 10px;
}
.c-service_overview .c-button01 a {
    background: no-repeat;
    color: #fff;
}
.service_box {
    text-align: left;
    margin-left: 0px;
}
.service_box p {
    margin-top: 30px;
    margin-bottom: 40px;
    font-size: 20px;
    line-height: 1.8;
}
.gradation {
    background: linear-gradient(to right, #53AAD1, hsl(0deg 0% 100% / 30%));
    padding-left: 100px;
    position: relative;
    width: 60%;
    height: 240px;
}
.gradation img {
    position: absolute;
    top: -32%;
    right: -5%;
    max-width: 1000px;
    width: 100%;
}

.c-service_overview::after{
  content: "";
  position: absolute;
  top: -24%;
  left: 50%;
  right: 0;
  bottom: 0;
  background-image: url('https://www.sugita-pridea.co.jp/img/2025/deco/group01.svg');
  background-size: contain;
  background-position: center;
  z-index: 1;
  width: 211px;
  height: 71px;
  background-repeat: no-repeat;
}
.tools__images {
    position: relative;
}
.tools__images .heart, .tools__images .pikapika, .tools__images .kirakira, .tools__images .bikkuri{
    position: absolute;
}

img.kirakira {
    bottom: 45%;
}

img.bikkuri {
    top: 30%;
    right: 1%;
}
.tools__images .pikapika {
    top: 23%;
}
.c-service_overview::before {
content: "";
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: -15%;
    background-image: url(https://www.sugita-pridea.co.jp/img/2025/deco/group02.svg);
    background-size: contain;
    background-position: center;
    z-index: 1;
    width: 216px;
    height: 60px;
    background-repeat: no-repeat;
}

body.home,
body.page-id-1150{
    height: 100vh;
    background-image: radial-gradient(circle closest-corner at 24% 24%, #c8dfeb, #85C1DD);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body.page-id-1150{
  height: auto
}

body.home::after,
body.page-id-1146::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2000hv;
    background: white;
    z-index: -1; /* コンテンツの下に置く */
}


body.page-id-1150 main section.item .c-button01 a {
        background-color: #323F66;
        color: #fff;
    }

body.page-id-1150 main.l-main {
    color: #323F66;
    margin-top: 100px;
    letter-spacing: .15em;
    font-weight: 500;
}
  
.l-header__buttons { margin-top:0px; }

  .deco-bg {
    position: relative;
    width: 100%;
    height: 100%;
  }
    .deco-bg img {
      position: absolute;
      transition: left 0.8s, top 0.8s;
      animation: floatUpDown 3s ease-in-out infinite;
    }
.deco-bg img.deco02 {
    position: absolute;
    top: 25% !important;
    left: 10% !important;
}
.deco-bg img.deco01 {
    position: absolute;
    top: 5% !important;
    right: 5% !important;
    left: auto !important;
    animation: deco-move-left-right 10s ease-in-out infinite;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 0.8s cubic-bezier(.77,0,.18,1);
}
img.cube_blue_c {
    bottom: 0%;
    left: 15%;
}

    .deco01-visible {
        opacity: 1;
        transform: translateY(0) !important;
        transition-delay: 0.2s;
    }
}

.deco-bg img.deco03 {
    position: absolute;
    bottom: -12% !important;
    right: 15% !important;
}
.deco-bg .deco01 {
  animation: deco-move-left-right 6s ease-in-out infinite;
}
.deco-bg .deco02 {

}
.deco-bg .deco03 {
  animation: deco-move-up-down 7s ease-in-out infinite;
      right: 6%;
    bottom: -12%;
}

@keyframes floatUpDown {
   0% { transform: translateY(0); }
   50% { transform: translateY(-30px); }
   100% { transform: translateY(0); }
}
@keyframes deco-move-left-right {
  0% { transform: translateX(0); }
  50% { transform: translateX(30px); }
  100% { transform: translateX(0); }
}
@keyframes deco-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes deco-move-up-down {
  0% { transform: translateY(0); }
  50% { transform: translateY(25px); }
  100% { transform: translateY(0); }
}

img.base-image.persistent-mark {
    bottom: 10px;
}

header a {
    color: #355384;
}

@media (max-width: 1400px) {
.deco-bg img.deco01 {
    width: 15%;
}
.deco-bg img.deco02 {
    width: 14%;
    left: 3% !important;
}
.deco-bg img.deco03 {
    right: 1% !important;
    width: 16%;
}

}

img.cube_blue_sai_sp {
    display: none;
}

@media screen and (max-width: 1000px) {


body.page-id-1150 {
    overflow-x: clip;
}
    .center_p b, .center_p p {
        animation: ease-in-out infinite;
    }
    .center_p b{
        margin-top:100px;}
        
br.pc {
    display: none;
}
.c-service_overview::before{
    bottom: 59%;
    z-index: -1;
}
.deco-bg img.deco01 { width: 59%; right: -11% !important; top: 14% !important;opacity: 1;}

.deco-bg img.deco02 { width: 11%;left: 3% !important; }

.deco-bg img.deco03 {
        right: 0 !important;
        width: 35%;
        left: -3%;
        bottom: -22% !important;
	}

img.cube_blue_sai_sp {
    right: -8%;
    width: 18%;
    top: 53%;
    display: block;
}
img.triangle_blue {
        min-height: auto !important;
        height: auto;
        top: 24%;
        width: 27%;
}

img.cube_green { right: -15% !important;}

img.nanameue { width: 90%; max-width: 500px;}
.c-service_overview h3 span {
    font-size: 30px;
}
.c-service_overview h3 {
    display: flex;
    flex-direction: row-reverse;
    font-size: 15px;
    justify-content: flex-end;
    align-items: end;
}
}


@media screen and (max-width: 768px) {

img.nanameue { width: 90%; max-width:100%;}

.l-header__head {
    padding: 0;
    margin: 0;
    width: 100%;
}
.l-header__head.c-fluid {
    justify-content: space-between;
    height: min(4.0816326531vw + 74.693877551px, 74px);
}

.l-header__head {
    height: min(4.0816326531vw + 74.693877551px, 77px);
}

img.circle_yellow {
        min-height: auto !important;
        height: auto;
        width: 20% !important;
        top: 43% !important;
        right: -5% !important;
        left: auto;
        z-index: -1;
}
.l-header__logo img {
    margin-left: 10px;
}
section.center_p b {
    font-size: 20px;
}
.c-service_overview h3 span {
    font-size: 30px;
}
.service_box {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    text-align: center;
}

body.page-id-1150 h2 {
    font-size: 60px;
}
  section.item {
    display: block;
  }
  section.item td {
    width: 50%;
    display: block;
    float: left;
    margin: 0 0 -1px -1px;
  }
body.page-id-1150 h3 {
    font-size: 25px;
    line-height: 140%;
}
.tools {
    display: block;
    height: auto;
}
.tools img {
        margin-top: 10px;
        width: 98%;
        margin: auto;
}
body.page-id-1150 h5 {
    font-size: 30px;
}
body.page-id-1150 main section .c-button01.-center,
.tools div a {
    max-width: 190px;
    margin: auto;
}

section.center_p b {
    font-size: 20px;
}

section.center_p {
    padding-top: 50px;
}

}


[data-aos^=fade][data-aos^=fade].aos-animate {  opacity: 1; }


img.jump-out-image.jump-out {
    width: 110%; /* 1.1倍のサイズで終了 */
    max-width: 110%;
    transform-origin: center center;
}
.base-image {
  max-width: 100%;
  height: auto;
  display: block;
  z-index: 1;
  position: relative;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}



/* カラーオーバーレイ */
.color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(45deg,
              #fff200, #a8ff00, #00ffc3,
              #00cfff, #5b60ff, #ff57f0,
              #ff8a00, #fff200);
  background-size: 400% 400%;
  mix-blend-mode: hue;
  opacity: 0;
  z-index: 2;
  /* マスク設定 - びっくりマークの形に制限 (複数のパスパターンを試す) */
  mask-image: url("./images/bikkuri_new.png");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center; 
  /* Safari/WebKitブラウザ用 */
  -webkit-mask-image: url("./images/bikkuri_new.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}
/* アニメーション */
@keyframes flashColor {
  0% { 
    opacity: 0.8; 
    background-position: 0% 50%;
  }
  50% { 
    opacity: 0.9; 
    background-position: 100% 50%;
  }
  100% { 
    opacity: 0.8; 
    background-position: 0% 50%;
  }
}
@keyframes jumpOut {
  0% {
    transform: translate3d(0, 0, -100px) scale(0.1);
  }
  60% {
    transform: translate3d(0, 0, 20px) scale(1.2);
  }
  80% {
    transform: translate3d(0, 0, 0) scale(1.05);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1.1);
  }
}
.color-overlay.animate {
  animation: flashColor 1.5s ease-in-out infinite;
}
.jump-out {
  animation: jumpOut 1s cubic-bezier(0.17, 0.89, 0.32, 1.25) forwards;
}

.swiper.js-index-case-slider.swiper-initialized.swiper-horizontal {
  height: auto;
}

.swiper-slide2 {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-slide2 img {
    /* width: 100%; */
    /* height: auto; */
    /* display: block;*/
}
.service_box {
    transform: translateY(40px) !important;
    transition: opacity 0.8s cubic-bezier(.7,-0.2,.3,1.2), transform 0.8s cubic-bezier(.7,-0.2,.3,1.2);
        color: #355384;
        margin-left: 7%;
}
.service_box.is-visible {
    opacity: 1;
    transform: translateY(0) !important;
}

.screen {
  position: absolute;
  width: 100%;
  height: 100%;
}

.mark-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 29.5%;
    height: 51.7%;
    width: auto;
    transform-origin: bottom center;
    z-index: 10;
}



.mark-wrapper.bururun2-start {
    animation: bururun2 2s ease-in-out infinite;
}

article.p-index {
    margin-top: 35px;
    margin-top: -100vh;
}

.l-header__head, .l-header__menu {
    background: none;
}
.one_stopbox .sp{
    display: none;
}

                @keyframes bururun2 {

                        0%,
                        100% {
                                transform: scale(1);
                        }

                        2% {
                                transform: scale(1.06);
                        }

                        4% {
                                transform: scale(0.97);
                        }

                        6% {
                                transform: scale(1);
                        }

                        8% {
                                transform: scale(1.05);
                        }

                        10% {
                                transform: scale(0.98);
                        }

                        12% {
                                transform: scale(1);
                        }
                }

.tools div a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.fadeinbox {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 0.8s cubic-bezier(.77,0,.18,1);
}
.fadeinbox.is-fadein {
  opacity: 1;
  transform: translateY(0);
}

.bak_white {
    background: #fff;
    padding: 0;
    margin: 0;
    padding-bottom: min(4.0816326531vw + 34.693877551px, 100px);
    padding-top: min(4.0816326531vw + 34.693877551px, 100px);
}
.bak_white .c-container.-l {
    margin-top: 0;
    margin-bottom: 0;
}

.p-index_case_link01__img {
    aspect-ratio: 382/382;
}

.swiper-slide2{
    height: 38.55vh !important;
    width: 38.55vh !important;
    flex-shrink: 0;
}

.p-index_case .container {
    padding: 0;
}

.swiper-wrapper2 {
    transition-timing-function: linear;
}

.p-index_case_link01__img {
    aspect-ratio: 382 / 382 !important;
}

.swiper-wrapper2 {
  transition-timing-function: linear !important;
}
.p-index_case#js-index-kv .swiper-slide2 {
    margin-right: 32px !important;
    background: #fff;
}

.p-index_case#js-index-kv {
    margin-right: 0 !important;
}


.swiper-wrapper2 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.swiper {
  overflow: hidden;
  position: relative;
  width: 100%; /* 必要に応じて調整 */
}

.swiper-wrapper2 {
  display: flex;
  width: 100%;
  animation: scrollLeft 20s linear infinite; /* 20秒でスクロール、永遠にループ */
}

.swiper-slide2 {
  flex-shrink: 0;
  width: auto;
  height: 100%;
  margin-right: 20px; /* スライド間の間隔 */
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* -100%で最初から最後のスライドまで移動 */
  }
}

div#js-drawer .l-header_button01 {
    align-self: center;
}

.p-index_case#js-index-kv {
    margin-top: 80px;
}

@media (max-width: 1000px) {
.center_p b, .center_p p {
    opacity: 1;
    max-width: 80%;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    font-weight: 600;
    line-height: 1.8;
}
html, body {
  width: 100%;
  overflow-x: hidden;
}

.l-header__buttons {
    padding-bottom: 7px;
}
.swiper-slide2 {
      width: 30vh ! IMPORTANT;
      height: 30vh ! IMPORTANT;
}
.c-service_overview {
        display: block;
        margin-top: 60px;
        margin-bottom: 0px;
        height: 80%;
}
  .gradation {
        margin-bottom: 35px;
        padding-left: 0;
        width: 90%;
        padding-bottom: 210px;
        padding-top: 0.25%;
        height: auto;
}
.gradation img {
top: -12%;
        right: -9%;
        width: 100%;
}
.tools div {
    margin-top: 20px;
}
.service_box p {
        text-align: left;
        font-size: 18px;
        font-weight: 600;
}
br.sp{
  display:block;
}
img.service_cube_green2 {
        left: -7%;
        z-index: 1;
        bottom: 43%;
        width: 17%;
}
.fadein.visible {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}
.tools.sales img {
    margin: auto;
}

body.page-id-1150 h4 {
    font-size: 20px;
    margin-bottom: 30px;
}
.tools.sales {
    padding-top: 50px;
    padding-bottom: 50px;
    flex-direction: column-reverse;
}
.tools {
    display: flex;
    flex-direction: column-reverse;
    padding-top: 50px;
        padding-bottom: 50px;
}
.c-button01.u-font-roboto {
    padding-left: min(1.6326530612vw + 13.8775510204px, 40px);
    padding-right: min(1.6326530612vw + 13.8775510204px, 40px);
}

.jump-out-image {
        width: 100%;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 100%;
        height: auto;
}


.swiper-slide2 {
  flex-shrink: 0;
}
img.base-image.persistent-mark {
	width: 9%;
	top:auto !important;
	bottom: 0 !important;
 }

.l-header_button01, .c-hamburger {
    background: none;
}

.l-header_button01 a {
    aspect-ratio: 100 / 80;
}
.one_stopbox .one-stop2 {
        margin: 0;
}
img.service_circle_blue-2,
img.service_triangle_c2,
img.circle_blue-blur,
img.service_cube_blue_c-1,
img.service_cube_green,
img.service_cube_blue_c,
img.service_circle_blue,
img.service_triangle_c_pink,
img.service_circle_blue-1,
img.service_triangle_c,
img.circle_blue-blur,
img.service_triangle_c2 {
   width: 9%;
}
img.service_triangle_c_pink {
    top: -8%;
}
img.service_circle_blue {
    top: -6%;
}
img.service_cube_green {
    top: 2%;
}
img.service_cube_blue_c-1 {
    top: -1%;
}
img.service_circle_blue-1 {
    top: 4%;
    width: 5%;
    right: 7%;
}
img.service_cube_blue_c {
    width: 24%;
    right: -6%;
    left: auto;
    top: auto;
    bottom: 20%;
}
img.service_triangle_c {
        bottom: -77%;
        right: 1%;
        z-index: 1;
        width: 14%;
}
section.center_p b span {
    color: #fff;
}
.center_p .show-p {
        text-align: left;
        width: 70%;
        margin: auto;
        margin-left: 5%;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.8;
    }

.center_p .show-b {
    text-align: left;
    margin-left: 4%;
    font-size: 30px;
    margin-top: 150px;
}
section.center_p {
        padding-bottom: 50%;
}
.deco-bg img.deco02 {
    width: 33%;
    right: -3%;
    left: auto !important;
    top: auto !important;
    bottom: -8%;
}
.service_box {
    margin-bottom: 0px;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;
}
.home #page {
    padding-bottom: 2%;
}
.c-service_overview::after {
    background-image: url(https://www.sugita-pridea.co.jp/img/2025/deco/group01_sp.svg);
    top: -16%;
    right: -6%;
    left: auto;
}
img.cube_blue_c {
    bottom: -14%;
    width: 8%;
    left: 25%;
}
img.cube_green {
    right: 20% !important;
    width: 15%;
    top: 5%;
    height: auto !important;
    min-height: auto !important;
}

.mark-wrapper {
        width: auto;;
        top: 37.88vh;
        height: 28.96vh;
}
video#openingMp4 {
    margin-top: 0 !important;
}
    img.nanameue {
        margin-top: 34%;
    }

}

.label {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Meiryo', sans-serif;
}


body.page-id-1150 h2 img {
    margin: 0;
    padding: 0;
    opacity: 0.4;
    line-height: normal;
    width: 70%;
    max-width: 527px;
    margin-bottom: 30px;
}


img.deco_pink {
    display:none;
}


@media (max-width: 1000px) {
.tools__images .heart, .tools__images .pikapika, .tools__images .kirakira, .tools__images .bikkuri {
    width: 8%;
}
.tools__images .pikapika {
    top: 18%;
    left: 1.5%;
}
.tools__images .bikkuri {
    top: 14%;
}

.tools__images .kirakira {
    top: 75%;
}
.tools__images .heart {
    right: 3%;
    top: -6%;
}
img.deco_pink {
    top: 5% !important;
    position: absolute;
    width: 9%;
    left: 27%;
    display:block;
}
.tools div img.textImg {
    min-width: 300px;
    width: 90%;
}
.tools.sales img.textImg2 {
    min-width: 300px;
    width: 85%;
}
.service_text_area p.fadein.visible {
    font-weight: 600;
    width: 380px;
    display: block;
    margin-top: 15px;
}
section.item td,
.service_text_area p.fadein.visible,
body.page-id-1150 main.l-main,
.tools {
    font-size: 19px;
}

body.page-id-1150 main {
    font-weight: 500;
}

.service_text_area p {
    text-align: left;
}

body.page-id-1150 h3 {
	letter-spacing: 0.15rem;
	font-weight: 500;
    margin-top: 50px;
}

 .swiper-wrapper2 {
    animation: scrollLeftMobile 10s linear infinite; /* スマホ向けに調整 */
 }

  /* スマホ用アニメーション */
  @keyframes scrollLeftMobile {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-400%); /* スマホ向けにアニメーション範囲を調整 */
    }
  }
.center_p .show-b {
    font-size: 30px;
    margin-top:80px;
}

.one_stopbox .sp {
        display: block;
        color: #1a91d8;
        text-align: left;
        font-size: 20px;
        margin-left: 8%;
}
.one_stopbox {
    margin-top: 50px;
}
.one_stopbox .one-stop2 {
    margin: 0;
}
img.triangle_blue{
z-index:-1;
}

.p-index_case__slider .swiper-slide2{
width: 60% !important;
  height:auto !important;
}


.p-index_case_link01__img {
    aspect-ratio: 300 / 300 !important;
}

.p-index_case#js-index-kv .swiper-slide2 {
    margin-right:7% !important;
}
.p-index_case#js-index-kv{
    margin-top: 6.43vh;
        margin-top: 14.43vh;
}
  body {
    overflow-x: hidden;
  }
  .gradation {
}
    img.nanameue {
        /* top: 0; */
    }
body.page-id-1150 main.l-main {
    letter-spacing: 0.15rem;
}

img.deco_pink {
    top: 95px;
    position: absolute;
    width: 9%;
    left: 33%;
}

.c-service_overview h3 img {
    width: 190px;
    margin-right: 10px;
}

}


@media (max-width: 768px) {


.one { display: none; }

.step { width: 24% !important; }

.line { width: 6% !important; }

.line.last {  width: 10% !important; }

.line.last::before,.line.last::after { width: 10px; }

.flow{margin-top: 5px !IMPORTANT;}

.center_p p{}


}



@media (max-width: 600px) {
.service_box {
    margin-top: 25%;
}

.center_p p{}

section.item td,
.service_text_area p.fadein.visible,
body.page-id-1150 main.l-main,
.tools {
    font-size: 16px;
}
.service_text_area p.fadein.visible {
    width: 340px;
}

.center_p .show-p,.service_box p {
    font-size: 16px;
}

.tools div img { width: 75%; }
.center_p .show-b {
    font-size: 25px;
}
  .gradation {
    /* padding-top: initial; */
    /* height: auto; */
}
.center_p .show-p {
    width:95%;
}
}



@media (max-width: 500px) {


    
    img.nanameue {
        /* top: 0; */
    }
.service_box p {
    font-size: 14px;
    line-height: 1.5;
}
  
body.page-id-1150 h3 {
    font-size: 22px;
    width: 100%;
}
.p-index_case_link01__img {
    aspect-ratio: 250 / 250 !important;
}
  .gradation {
    padding-bottom: 150px;
}


}

@media (max-width: 480px) {


.center_p p{}

section.item td,
.service_text_area p.fadein.visible,
body.page-id-1150 main.l-main{
    font-size: 14px;
}
.tools {
    font-size: 16px;
    line-height: 1.5;
}
    .service_text_area p {
                width: 90%;
                margin-left: 6%;
                font-size: 16px;;
    }
.c-service_overview {
    height: auto;
    padding-bottom: 130px;
}
.center_p .show-b {
    font-size: 22px;
}
}

@media (max-width: 400px) {
.gradation {
    padding-bottom: 120px;
}
}

.swiper-wrapper2 {
  animation: none;
}


.l-header__buttons {
  display: flex;
  align-items: center; /* 全体は中央揃え */
}

.l-header_button01 {
  align-self: flex-start; /* この要素だけ上揃え */
}

.l-header__buttons {
    align-self: flex-start;
}

/* section#js-index-kv フェードイン */
section#js-index-kv,
.p-index_case#js-index-kv .swiper-slide2 {
  opacity: 0;
  transition: opacity 1s cubic-bezier(.33,1,.68,1);
}
section#js-index-kv.show,
.p-index_case#js-index-kv.show .swiper-slide2 {
  opacity: 1;
}

.nanameue {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 0.8s cubic-bezier(.77,0,.18,1);
}
.nanameue.is-fadein {
  opacity: 1;
  transform: translateY(0);
}