@charset "UTF-8";



.l-content {
    background: #ffffff;
}

.c-headline__img{
    background: url(../img/ourbuisiness/mv.jpg);
    background-repeat: no-repeat;
        background-size: cover;
}

.main_ttl{
    display: grid;
    grid-gap: 30rem;
}
.main_ttl h2{
    font-size: clamp(24px, 36rem, 36rem);
    font-weight: 600;
    display: flex;
    gap: 0 10rem;
}
.main_ttl h2 .icon{
    max-width: 38rem;
    width: 4.1%;
}
.business_intro{
    font-size: 20rem;
    font-weight: 400;
    /* margin-bottom: 200rem; */
}
.main_ttl_txt{
    font-size: clamp(18px, 16rem, 20rem);
    font-weight: 400;
}
.business_intro .main_ttl_txt,
.equipment .main_ttl_txt,
.flow .main_ttl_txt{
    max-width: 800px;
}


.business_intro_img_wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 真ん中に配置 */
  width: 50%; /* 横幅の80% */
  aspect-ratio: 1 / 1; /* 正円を保つ */
  background: rgba(255, 102, 0, 0.1);
    background: linear-gradient(90deg, rgba(255, 102, 0, 0.1) 0%, rgba(255, 192, 0, .1) 100%);
  border-radius: 50%; /* 円形にする */
  z-index: 0; /* 画像の下に配置 */
}


.business_intro_img_wrap {
  position: relative;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10vw 0; 
  box-sizing: border-box;
  margin: 180rem auto 0;
}

/* 背景の円 */
.business_intro_img_wrap::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  aspect-ratio: 1 / 1;
  background-color: #fff4e0;
  border-radius: 50%;
  z-index: 0;
}

.business_intro_img_wrap ul {
  display: flex;
  align-items: flex-end;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.business_intro_img_wrap li {
      width: 50%;
    flex-shrink: 0;
    position: relative;
    --offset: 11vw;
    margin-left: -21%;
    cursor: pointer;
}

/* 1番目 (03) : 一番左・一番【上】 */
.business_intro_img_wrap li:nth-child(1) {
  margin-left: 0;
  transform: translateY(0);
  z-index: 3; 
}

/* 2番目 (02) : 真ん中・中間の高さ */
.business_intro_img_wrap li:nth-child(2) {
  transform: translateY(calc(var(--offset) * -1));
  z-index: 2;
}

/* 3番目 (01) : 一番右・一番【下】 */
.business_intro_img_wrap li:nth-child(3) {
  transform: translateY(calc(var(--offset) * -2));
  z-index: 1;
}

/* 画像サイズ調整 */
.business_intro_img_wrap li img {
  width: 100%;
  height: auto;
  display: block;
}
.business_intro_img_wrap li p.img img {
  width: 100%;
  height: auto;
  display: block;
  /* 左上から影を下ろす設定（右に10px、下に10px、ぼかし15px、透明度のある黒） */
      filter: drop-shadow(23px 3px 9px rgba(98, 105, 145, 0.5));
}

/* 吹き出しの微調整 */
.business_intro_img_wrap li p.icon {
  position: absolute;
  top: unset;
  bottom: 60%;
  right: -5%;
  width: 55%;
}

.business_intro_img_wrap .icon{
    position: absolute;
    top: 0;
    left: 0;
    max-width: 24%;
}
.fukidashi {
    position: absolute;
    animation: fuwafuwa 2s ease-in-out infinite alternate;
}
@keyframes fuwafuwa {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-10px); 
    }
}


/* --- 基本設定 --- */
.business_intro_img_wrap li .fukidashi {
  opacity: 0; /* 通常時は非表示 */
  transform: translateY(10px);
  transition: all 0.5s ease; /* ふわっと出す */
  pointer-events: none;
}

/* --- active時の挙動 --- */

/* 1. 吹き出しを表示 */
.business_intro_img_wrap li.active .fukidashi {
  opacity: 1;
  transform: translateY(0);
}

/* 2. 画像にオレンジの濃い影を追加 */
.business_intro_img_wrap li.active p.img img {
  /* 今の青い影(::after)とは別に、本体に直接オレンジの影を当てる */
  filter: drop-shadow(23px 3px 9px rgba(255, 140, 0, 0.5));
  /* 少し浮き上がらせる演出を入れるとよりactive感が出ます */
  transform: scale(1.05);
  transition: all 0.5s ease;
}

/* 影(::after)も画像と一緒に動くように調整 */
.business_intro_img_wrap li.active p.img::after {
  transform: scale(1.05);
  transition: all 0.5s ease;
}













.Industry{
    background: #ff6600;
    padding: 50rem 0;
    overflow: hidden;
}
.Industry h3{
    color: #fff;
    font-size: 32rem;
    font-weight: 500;
    margin-bottom: 30rem;
}
.Industry_scrool {
    overflow: hidden; /* はみ出しを隠す */
    display: flex;    /* 画像を横並びにする */
}

.Industry_scrool img {
    width: 80%;      /* 画像の元サイズを維持 */
    height: auto;     /* 必要に応じて高さを指定 */
    flex-shrink: 0;   /* 画像が縮まないように固定 */
    animation: scroll-left-to-right 20s linear infinite;
}

.equipment{
    padding-top: 200rem;
}
.example{
    padding-top: 50rem;
}

@keyframes scroll-left-to-right {
    0% {
        transform: translateX(0); /* 左に隠れた状態から開始 */
    }
    100% {
        transform: translateX(-100%);    /* 右へ移動 */
    }
}

.ploglem_wrap{
    margin-top: 80rem;
}
.ploglem_wrap ul{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0 5rem;
}
.ploglem_wrap li{
    display: flex;
    flex-direction: column;
    gap: 30rem 0;
}
.ploglem_wrap li:nth-child(even){
    margin-top: 80rem;
}
.ploglem_wrap li .ploglem{
     /* --- 正円にするための追加設定 --- */
    width: 100%;          /* 任意のサイズを指定（例: 220px） */
    aspect-ratio: 1 / 1;   /* 縦横比を1:1に固定 */
    /* -------------------------- */

    background: #fff;
    box-shadow:2rem 2rem 10rem rgba(255,102,0,0.3);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* paddingが大きすぎると円が崩れるため調整 */
    padding: 20px; 
    gap: 10px 0;
}
.ploglem_wrap li .ploglem .ploglem_ttl{
    text-align: center;
    color: #ff6600;
    font-weight: 700;
    font-size: 16rem;
}
.ploglem_wrap li .ploglem .ploglem_txt{
    text-align: center;
    font-size: 18rem;
    line-height: 1.5;
    font-weight: 600;
}
.ploglem_comment{
    display: flex;
    align-items: center;
    gap: 0 10rem;
    max-width: 100%;
    margin: auto;
}
.ploglem_comment .icon{
    width: 60%;
    max-width: 50px;
}
.ploglem_comment p{
    font-size: 14rem;
}

.arrow{
    width: 8%;
    margin: 100rem auto;
    display: block;
}
.answer{
    background: linear-gradient(90deg, #ff6600 0%, #ffc000 100%);
    padding: 60rem 75rem 60rem 70rem;
    border-radius: 30rem;
}
.answer p{
    text-align: center;
    font-size: 36rem;
    color: #fff;
    font-weight: 600; 
}
.main_txt_wrap{
    margin: 100rem auto;
}
.main_txt_wrap p{
    text-align: center;
    font-size: 8.2svw;
    line-height: 1;
    white-space: nowrap;
}

.service_wrap{
    margin: 100rem auto;
    display: grid;
    grid-gap: 100rem 0;
}
.service_tab_wrap{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0 20rem;
}
.service_tab_wrap li{
    flex: 1;
}
.service_tab_wrap li a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15rem 0;
    border: 1px solid #bdbdbd;
    padding: 40rem 25rem;
    border-radius: 30rem;
    transition: .3s;
}
.service_tab_wrap li a .icon{
   height: 120rem;
   margin-bottom: 10rem;
}
.service_tab_wrap li a .icon img{
    height: 100%;  /* 親要素（.icon）の高さに合わせる */
    width: auto;   /* 横幅は自動計算でアスペクト比を維持 */
}
.service_tab_wrap li a .en_ttl{
    text-align: center;
    color: #ff6600;
    font-size: 14rem;
}
.service_tab_wrap li a .ja_ttl{
    text-align: center;
    font-size: 24rem;
    font-weight: 600;
    line-height: 1;
}
.service_tab_arrow {
    position: relative;
    width: 20px; /* 矢印を表示させるエリアの幅 */
    height: 10px; /* 矢印を表示させるエリアの高さ */
    margin: 30rem auto 0; /* 上の要素との間隔 */
}

.service_tab_arrow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg); /* 45度回転させてV字に */
    width: 10px;  /* 矢印のサイズ */
    height: 10px; /* 矢印のサイズ */
    border-right: 2px solid #111; /* 矢印の線の太さと色 */
    border-bottom: 2px solid #111; /* 矢印の線の太さと色 */
    transition: .3s;
}

@media (hover: hover) {
    .service_tab_wrap li a:hover{
        border: 1px solid #fff;
        box-shadow:2rem 2rem 10rem rgba(255,102,0,0.3);
    }
    .service_tab_wrap li a:hover .service_tab_arrow::after{
        border-right: 2px solid #ff6600; /* 矢印の線の太さと色 */
    border-bottom: 2px solid #ff6600; /* 矢印の線の太さと色 */
    }
}



.service_contents_wrap {
    display: flex;
    flex-direction: column;
    gap: 300rem 0; /* 隙間なく重ねる場合 */
}
.service_contents{
    position: sticky;
    top: 10vh; /* 画面上部から少し下げて固定（調整可） */
    overflow: hidden;
    background: #F3F4F6;
    border-radius: 80rem;
    padding: 60rem 80rem 120rem;
    height: 80svh;

}
.service_contents.construction::before{
    background: url(../img/ourbuisiness/service_contents_bg01.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
}
.service_contents.maintenance::before{
    background: url(../img/ourbuisiness/service_contents_bg02.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
}
.service_contents.inspection::before{
    background: url(../img/ourbuisiness/service_contents_bg03.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
}
.service_contents.claenliness::before{
    background: url(../img/ourbuisiness/service_contents_bg04.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
}
.service_contents::before{
    content: '';
    display: block;
    width: 84vh;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    bottom: -302rem;
    right: -100rem;
    z-index: 0;
}


.service_contents_txt_wrap{
    display: grid;
    grid-gap: 15rem;
    position: relative;
    z-index: 1;
}
.service_contents_txt_wrap .en_ttl{
    text-align: center;
    font-size: 14rem;
    color: #ff6600;
}
.service_contents_txt_wrap .ja_ttl{
    text-align: center;
    font-size: 32rem;
}
.service_contents_txt_wrap .service_contents_txt{
    max-width: 500px;
    margin: auto;
    /* font-size: 16rem; */
    font-size: clamp(12px, 16rem, 16rem);
    text-align: justify;
    font-weight: 400;
}
.service_contents_box{
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
    background: rgba(255,255,255,.95);
    border-radius: 40rem;
    padding: 30rem;
    max-width: 320px;
    margin-top: 20rem;
    /* min-height: 400rem; */
    position: relative;
    z-index: 1;
}
.service_contents_box ul{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.service_contents_box li{
    flex-basis: 48.1%;
    
}
.service_contents_box li a{
    display: block;
    text-align: center;
    font-size: 13rem;
    line-height: 1.2;
    font-weight: 600;
    background: #fff;
    border: 1px solid #bdbdbd;
    border-radius: 8rem;
    min-height: 50rem;
    padding: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s;
    position: relative;
}
.service_contents_box li a::before{
    content: '';
    display: block;
    position: absolute;
    bottom: 3rem; right: 3rem;
    width: 16rem; height: 16rem;
    background: url(../img/ourbuisiness/plus.svg) no-repeat;
    background-size: contain;
}
@media (hover: hover) {
    .service_contents_box li a:hover{
    border: 1px solid #FFA343;
    background: #FFA343;
    color: #fff;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
    }
}


.service_contents_wrap {
    position: relative; /* stickyの基準 */
}

/* ドットのコンテナを親要素の下部中央に固定 */
.fixed_dots_container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 25rem;         /* 親要素の全高に広げる */
    pointer-events: none;
    z-index: 100;
}

/* 実際に画面下部に張り付く部分 */
.dots_inner {
    position: sticky;
    top: 0; /* stickyの基準 */
    height: 90vh; /* 画面いっぱいの高さの中で位置を決める */
    display: flex;
    align-items: flex-end; /* 下側に寄せる */
    justify-content: center;
    gap: 15px;
    padding-bottom: 15rem; /* 画面下からの距離（ここを調整） */
}

.dot {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    margin: 0 5px; /* 外枠が出る分、少し余白を広げると綺麗です */
    transition: all 0.3s ease;
    position: relative; /* 疑似要素の基準 */
}

.dot.active {
    background: #ff6b00;
    transform: scale(1); /* 本体は大きくせず、外枠で見せるのが最近のトレンドです */
}

/* active時に外側に表示されるオレンジの輪 */
.dot.active::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;  /* ドット本体(12px)より一回り大きく */
    height: 18px;
    border: 1px solid #ff6b00; /* オレンジの線 */
    border-radius: 50%;
    box-sizing: border-box;
}




/* .repeat{
    border: 5px solid transparent; 
    border-radius: 30rem;
    
    background-image: linear-gradient(#fff, #fff), 
                      linear-gradient(90deg, rgba(255, 102, 0, 1) 0%, rgba(255, 192, 0, 1) 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;

    box-shadow: 2px 2px 15px 0px rgba(255, 107, 0, 0.1);
    padding: 40rem 60rem 60rem;
    overflow: hidden;
    position: relative;
}
.repeat::before{
    content: '';
    display: block;
    width: 62%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    bottom: -142rem;
    right: -100rem;
    z-index: 0;
    background: url(../img/ourbuisiness/repeat_img.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom right;
}
.repeat .txt_area{
    max-width: 40%;
    width: 320px;
    display: grid;
    grid-gap: 15rem 0;
}
.repeat .txt_area .ttl{
    color: #ff6600;
    font-weight: 600;
    font-size: 32rem;
    line-height: 1.3;
}
.repeat .txt_area .ttl span{
    font-size: 150%;
}
.repeat .txt_area .ttl small{
    display: block;
    font-size: 90%;
}
.repeat .txt_area .txt{
    color: #ff6600;
    font-size: 20rem;
    line-height: 1.8;
}
.repeat .txt_area .c-btn{}
.repeat .txt_area .c-btn a{
    color: #fff;
    background: #ff6600;
    width: 320px;
}
.repeat .c-btn>a>span, .repeat .c-btn>button>span{
    background: #fff;
}
@media (hover: hover) {
.repeat .txt_area .c-btn a:hover{
    color: #fff;
    background: #111;
}
.repeat .c-btn>a:hover>span, .repeat .c-btn>button:hover>span{
    background: #fff;
}
}
.repeat .icon{
    position: absolute;
    top: 4%;
    left: 35%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    max-width: 14%;
    display: none;

} */

.gray{
    background: #F3F4F6;
}
.flow{
        padding-top: 200rem;
        padding-bottom: 240rem;
}
.flow_wrap{
    margin: 50rem auto 10rem;
    display: grid;
    grid-gap: 30rem 0;
    position: relative; /* 線の基準点 */
    z-index: 0;
}
/* 縦の破線 */
.flow_wrap::before {
    content: "";
    position: absolute;
    left: calc(42rem + 1.05em);
    top: 50rem;
    bottom: 80rem;
    width: 6px; /* ドットの直径 */
    
    /* 
       重要：radial-gradient の％を小さくして、
       描画領域（background-size）の中に余白を作ります 
    */
    background-image: radial-gradient(#ff6600 25%, transparent 30%);
    
    /* 
       重要：縦横を同じ数値（例: 20px）にすると、
       20px四方の正方形の中にドットが1つ描かれ、それがリピートされます
    */
        background-size: 10px 10px;
    
    background-repeat: repeat-y;
    background-position: center; /* ドットを中央に寄せる */
    z-index: 0;
    transform: translateX(-50%);
}
.flow_box{
    background: #fff;
    border-radius: 9999px;
    padding: 20rem 20rem 20rem 40rem;
    display: flex;
    align-items: center;
    gap: 0 20rem;
    min-height: 135rem;
}
.flow_box .num{
    background: linear-gradient(90deg, rgba(255, 102, 0, 1) 0%, rgba(255, 192, 0, 1) 100%);
    color: #fff;
    font-size: 18rem;
    
    /* 正円にするための必須設定 */
    aspect-ratio: 1 / 1;    /* 縦横比を1:1に固定 */
    width: 2.1em;             /* フォントサイズに連動した幅（適宜調整） */
    display: inline-flex;   /* 中の文字を中央に寄せる準備 */
    align-items: center;    /* 上下中央 */
    justify-content: center;/* 左右中央 */
    border-radius: 50%;     /* 角を丸めて正円に */
    
    /* 不要になる設定 */
    /* padding: 6rem 12rem; */ /* 正円を維持するため削除、または上下左右均等にする */
    line-height: 1;
    text-align: center;
    position: relative; /* z-indexを有効にするため */
    z-index: 3;
}
.flow_box .ttl{
    color: #ff6600;
    font-size: 22rem;
    flex-basis: 24%;
}
.flow_box .txt{
    font-size: 18rem;
}


.flow_cap{
    display: block;
    margin-left: auto;
    line-height: 1.5;
    padding-top: 8rem;
}



@media (hover: hover) {
}




/* モーダル詳細 */

.c-modal-wrap{
    display: block;
    margin: 14% auto 0;
}

.c-modal-close {
    top: 0;
    bottom: auto;
    right: 58%;
    -webkit-transform: translate(calc(600rem + 50%), -50%);
    transform: translate(calc(600rem + 50%), -50%);
    z-index: 10000;
    line-height: 0;
    pointer-events: auto;
    cursor: pointer;
    position: absolute;
    z-index: 10;
}
.c-modal-close button {
    position: relative;
    background: url(../img/recruit/btn_close.svg) no-repeat center;
    background-size: 100% auto;
    pointer-events: auto;
}
.c-modal-close button:after, .c-modal-close button:before{
    display: none;
}
@media print, screen and (min-width: 960px) {
    .c-modal-close button {
        width: 60px;
        height: 60px;
    }
}

.modal-construction{
    width: 900rem;
    margin-inline: auto;
    padding: 60rem 60rem 60rem;
    background: #F2F4F5;
    border-radius: 30rem;
    position: relative;
    display: grid;
    grid-gap: 30rem 0;
}
.modal-construction h5{
    font-size: 34rem;
    font-weight: 600;
}
.construction_box{
    display: flex;
    justify-content: space-between;
    gap: 0 30rem;
}
.construction_box .img{
    flex-basis: 30%;
}
.construction_box .txt{
    font-size: 18rem;
    text-align: justify;
    font-weight: 500;
    flex-basis: 65%;
}




@media (max-width: 768px) {
    .c-headline__img{
   background-size: cover;
           background-position: right -140rem bottom 0rem;
}


.main_ttl{
    display: grid;
    grid-gap: 30rem;
}
.main_ttl h2{
    font-size: 24rem;
    line-height: 1.8;
    font-weight: 600;
    display: flex;
    gap: 0 10rem;
}
.main_ttl h2 .icon{
    max-width: 38rem;
    width: 10%;
}
.business_intro{
    font-size: 14rem;
    line-height: 1.8;
    font-weight: 400;
    /* margin-bottom: 100rem; */
}
.main_ttl_txt{
    font-size: 14rem;
    font-weight: 400;
}
.business_intro .main_ttl_txt,
.equipment .main_ttl_txt,
.flow .main_ttl_txt{
    max-width: 465px;
}
.business_intro_img_wrap{
    position: relative;
    width: 100%;
    margin: 60rem auto 0;
}
.business_intro_img_wrap ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 80rem 0;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.business_intro_img_wrap li {
    --offset: 0;
    width: 80%;
    margin: auto;
    position: relative;
}
.business_intro_img_wrap li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #fff4e0;
    border-radius: 50%;
    z-index: 0;
}
.business_intro_img_wrap li:nth-child(1) {
    margin: auto;
}
.business_intro_img_wrap li:nth-child(2) {
    transform: translateY(0);
    z-index: 2;
    margin-top: 60rem;
}
.business_intro_img_wrap li:nth-child(3) {
    transform: translateY(0);
    z-index: 1;
    margin-top: 30rem;
}
.business_intro_img_wrap::before {
    width: 100%;
    display: none;
}
.business_intro_img_wrap li p.img img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(5px 3px 9px rgba(98, 105, 145, 0.5));
}
.business_intro_img_wrap li.active p.img img {
  /* 今の青い影(::after)とは別に、本体に直接オレンジの影を当てる */
  filter: drop-shadow(5px 3px 9px rgba(255, 140, 0, 0.5));
  /* 少し浮き上がらせる演出を入れるとよりactive感が出ます */
  transform: scale(1.05);
  transition: all 0.5s ease;
}

.business_intro_img_wrap li p.icon img{width: 150%;}
.business_intro_img_wrap li p.icon {
    bottom: 75%;
}

    .fukidashi {
        position: absolute;
        left: 0%;
        top: 11%;
        width: 20%;
        animation: fuwafuwa 2s ease-in-out infinite alternate;
    }
@keyframes fuwafuwa {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-10px); /* 上に10px動く */
    }
}
.business_intro_img_wrap li .fukidashi{
    opacity: 1;
}

.business_intro_img_wrap .js-fade {
  opacity: 0;
  transform: scale(0.1) !important; /* 少し小さく */
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 発火時：不透明にして元の大きさに */
.business_intro_img_wrap .js-fade.js-fade-on {
  opacity: 1;
  transform: scale(1) !important; /* ポンッ！と元のサイズへ */
}












.Industry{
    background: #ff6600;
    padding: 50rem 0;
    overflow: hidden;
}
.Industry h3{
    color: #fff;
    font-size: 24rem;
    font-weight: 500;
    margin-bottom: 30rem;
}
.Industry_scrool {
    overflow: hidden; /* はみ出しを隠す */
    display: flex;    /* 画像を横並びにする */
}

.Industry_scrool img {
    width: 370%;      /* 画像の元サイズを維持 */
    height: auto;     /* 必要に応じて高さを指定 */
    flex-shrink: 0;   /* 画像が縮まないように固定 */
    animation: scroll-left-to-right 20s linear infinite;
}

.equipment{
    padding-top: 100rem;
}

@keyframes scroll-left-to-right {
    0% {
        transform: translateX(0); /* 左に隠れた状態から開始 */
    }
    100% {
        transform: translateX(-100%);    /* 右へ移動 */
    }
}

.ploglem_wrap{
    margin-top: 80rem;
}
.ploglem_wrap ul{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:unset;
    gap: 60rem 0;
}
.ploglem_wrap li{
    display: flex;
    flex-direction: column;
    gap: 30rem 0;
}
.ploglem_wrap li:nth-child(even){
    margin-top: 0;
}
.ploglem_wrap li .ploglem{
     /* --- 正円にするための追加設定 --- */
    width: 80%;          /* 任意のサイズを指定（例: 220px） */
    aspect-ratio: 1 / 1;   /* 縦横比を1:1に固定 */
    /* -------------------------- */

    margin: auto;

    background: #fff;
    box-shadow:2rem 2rem 10rem rgba(255,102,0,0.3);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* paddingが大きすぎると円が崩れるため調整 */
    padding: 20px; 
    gap: 10px 0;
}
.ploglem_wrap li .ploglem .ploglem_ttl{
    text-align: center;
    color: #ff6600;
    font-weight: 700;
    font-size: 16rem;
}
.ploglem_wrap li .ploglem .ploglem_txt{
    text-align: center;
    font-size: 18rem;
    line-height: 1.5;
    font-weight: 600;
}
.ploglem_comment{
    display: flex;
    align-items: center;
    gap: 0 10rem;
    max-width: 95%;
    margin: auto;
}
.ploglem_comment .icon{
    width: 80%;
    max-width: 70px;
}
.ploglem_comment p{
    font-size: 14rem;
}

.arrow {
        width: 20%;
        margin: 60rem auto;
        display: block;
    }
.answer{
    background: linear-gradient(90deg, #ff6600 0%, #ffc000 100%);
    padding: 30rem 35rem 30rem 30rem;
    border-radius: 30rem;
}
.answer p{
    text-align: center;
    font-size: 24rem;
    color: #fff;
    font-weight: 600; 
}
.main_txt_wrap{
    margin: 50rem auto 0;
}
.main_txt_wrap p{
    text-align: center;
    font-size: 12.5svw;
    line-height: 1;
    white-space: nowrap;
}

.service_wrap{
    margin: 50rem auto;
    display: grid;
    grid-gap: 50rem 0;
}
.service_tab_wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10rem;
}
.service_tab_wrap li{
    flex-basis: 45%;
}
.service_tab_wrap li a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15rem 0;
    border: 1px solid #bdbdbd;
    padding: 30rem 5rem;
    border-radius: 30rem;
    transition: .3s;
}
.service_tab_wrap li a .icon{
   height: 60rem;
   margin-bottom: 10rem;
}
.service_tab_wrap li a .icon img{
    height: 100%;  /* 親要素（.icon）の高さに合わせる */
    width: auto;   /* 横幅は自動計算でアスペクト比を維持 */
}
.service_tab_wrap li a .en_ttl{
    text-align: center;
    color: #ff6600;
    font-size: 15rem;
}
.service_tab_wrap li a .ja_ttl{
    text-align: center;
    font-size: 20rem;
    font-weight: 600;
    line-height: 1;
}
.service_tab_arrow {
    position: relative;
    width: 20px; /* 矢印を表示させるエリアの幅 */
    height: 10px; /* 矢印を表示させるエリアの高さ */
    margin: 0 auto 0; /* 上の要素との間隔 */
}

.service_tab_arrow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(45deg); /* 45度回転させてV字に */
    width: 10px;  /* 矢印のサイズ */
    height: 10px; /* 矢印のサイズ */
    border-right: 2px solid #111; /* 矢印の線の太さと色 */
    border-bottom: 2px solid #111; /* 矢印の線の太さと色 */
    transition: .3s;
}




.service_contents_wrap {
    display: flex;
    flex-direction: column;
    gap: 50rem 0; /* 隙間なく重ねる場合 */
}
.service_contents{
    position: relative;
    top: 0vh; /* 画面上部から少し下げて固定（調整可） */
    overflow: hidden;
    background: #F3F4F6;
    border-radius: 40rem;
    padding: 60rem 20rem 270rem;
    height: auto;

}
.service_contents::before{
    content: '';
    display: block;
    width: 100%;
    height: 250rem;
    aspect-ratio: 1; 
    border-radius: 0;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
}


.service_contents_txt_wrap{
    display: grid;
    grid-gap: 15rem;
    position: relative;
    z-index: 1;
}
.service_contents_txt_wrap .en_ttl{
    text-align: center;
    font-size: 15rem;
    color: #ff6600;
}
.service_contents_txt_wrap .ja_ttl{
    text-align: center;
    font-size: 24rem;
}
.service_contents_txt_wrap .service_contents_txt{
    max-width: 100%;
    margin: auto;
    font-size: 14rem;
    text-align: justify;
    font-weight: 400;
}
.service_contents_box{
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
    background: rgba(255,255,255,.95);
    border-radius: 20rem;
    padding: 15rem;
    max-width: 100%;
    margin-top: 0;
    /* min-height: 400rem; */
    position: relative;
    z-index: 1;
}
.service_contents_box ul{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.service_contents_box li{
    flex-basis: 48.1%;
    
}
.service_contents_box li a{
    text-align: center;
    font-size: 13rem;
    line-height: 1.2;
    font-weight: 600;
    background: #fff;
    border: 1px solid #bdbdbd;
    border-radius: 8rem;
    min-height: 50rem;
    padding: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.service_contents_box li a::before{
    width: 12rem; height: 12rem;
}

.service_contents_wrap {
    position: relative; /* stickyの基準 */
}

.fixed_dots_container {
    display: none;
}





/* .repeat{
    border: 5px solid transparent; 
    border-radius: 30rem;
    background-image: linear-gradient(#fff, #fff), 
                      linear-gradient(90deg, rgba(255, 102, 0, 1) 0%, rgba(255, 192, 0, 1) 100%);
    
    background-origin: border-box;
    background-clip: padding-box, border-box;

    box-shadow: 2px 2px 15px 0px rgba(255, 107, 0, 0.1);
    padding: 40rem 20rem 240rem;
    overflow: hidden;
    position: relative;
}
    .repeat::before {
        content: '';
        display: block;
        width: 53vh;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        position: absolute;
        bottom: -205rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        z-index: 0;
        background: url(../img/ourbuisiness/repeat_img_sp.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom left;
    }
.repeat .txt_area{
    max-width: 40%;
    width: 320px;
    display: grid;
    grid-gap: 25rem 0;
}
.repeat .txt_area .ttl{
    color: #ff6600;
    font-weight: 600;
    font-size: 24rem;
    line-height: 1.3;
}
.repeat .txt_area .ttl span{
    font-size: 150%;
}
.repeat .txt_area .ttl small{
    display: block;
    font-size: 90%;
}
.repeat .txt_area .txt{
    color: #ff6600;
    font-size: 14rem;
    line-height: 1.8;
}
.repeat .txt_area .c-btn{}
.repeat .txt_area .c-btn a{
    color: #fff;
    background: #ff6600;
    width: 280px;
}
.repeat .c-btn>a>span, .repeat .c-btn>button>span{
    background: #fff;
} */


.gray{
    background: #F3F4F6;
}
.flow{
        padding-top: 100rem;
        padding-bottom: 100rem;
}
.flow_wrap{
    margin: 50rem auto 10rem;
    display: grid;
    grid-gap: 30rem 0;
    position: relative; /* 線の基準点 */
    z-index: 0;
}
.flow_box {
    border-radius: 40rem;
        display: grid;
        /* 左側に数字(自動幅)、右側にテキスト(残り全部) */
        grid-template-columns: auto 1fr; 
        /* タイトルとテキストを縦に並べる */
        grid-template-areas: 
            "num ttl"
            "num txt";
        gap: 10rem 20rem;
        padding: 30rem 25rem; /* スマホ用に余白を調整 */
        align-items: start; /* 上揃えに（中央だとtxtが長い時にnumが浮くため） */
    }

    .flow_box .num {
        grid-area: num;
        margin-top: 5rem; /* タイトルの1行目と高さを合わせる調整 */
    }

    .flow_box .ttl {
        grid-area: ttl;
        flex-basis: auto; /* PC版の24%設定を解除 */
        font-size: 21rem;
        font-weight: bold;
    }

    .flow_box .txt {
        grid-area: txt;
        font-size: 14rem;
        line-height: 1.6;
    }

    /* 破線の位置がズレる場合は調整 */
    .flow_wrap::before {
        left: calc(29rem + 1.05em); /* padding-leftの25remに合わせる */
        bottom: 125rem;
    }


.flow_cap{
    display: block;
    margin-left: auto;
    line-height: 1.5;
    padding-top: 8rem;
}

/* モーダル詳細 */

.c-modal-wrap{
    display: block;
    margin: 30% auto 0;
}

.c-modal-close {
        top: 0;
        right: 0;
        -webkit-transform: translate(-8rem, -50%);
        transform: translate(-8rem, -50%);
    }

.modal-construction{
    width: calc(100% - 40rem);
        padding: 30rem 20rem;
}
.modal-construction h5{
    font-size: 21rem;
    font-weight: 600;
}
.construction_box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30rem 0;
}
.construction_box .img{
    flex-basis: 30%;
}
.construction_box .txt{
    font-size: 14rem;
    text-align: justify;
    font-weight: 500;
    flex-basis: 65%;
}

}


.l-footer {
    position: relative;
}
.l-content{
    position: relative;
    padding-bottom: 0;
}
.c-breadcrumb {
    position: absolute;
    right: 100rem;
    bottom: 120rem;
    z-index: 20;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10rem;
    font-size: 15rem;
    font-weight: 500;
}
.c-breadcrumb a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #BDBDBD;
}
.c-breadcrumb a:after {
    display: block;
    margin-left: 10rem;
    content: "";
    width: 12rem;
    height: 1rem;
    background: #BDBDBD;
}

@media screen and (max-width: 959px) {
    .c-breadcrumb {
        right: auto;
        left: 20rem;
        bottom: 40rem;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        gap: 5rem;
        font-size: 13rem;
    }
    .c-breadcrumb a:after {
        margin-left: 5rem;
    }
}