/*

【CSS記述ルール】

① font-sizeはpxで指定してください
　（rem、%等の指定はしないようお願いいたします）

② business はディレクトリ名に変更してください

③ 必ずディレクトリ名が付いたidセレクタを先頭に記述した後に、要素を記述してください
　（例：#oneday .inner、#oneday .page-title 等）

④ CSS内の画像指定パスは、CSSファイルから見た相対パスで指定してください
　（例：../images/ディレクトリ名/画像名.拡張子）

*/

/*------------------------------------------------------------
common
------------------------------------------------------------*/
.business {
  font-family: 'Noto Sans JP', 'Century Gothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック体, YuGothic, "Yu Gothic Medium", 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
  font-size: 13px;
  font-weight: 400;
}

#business * {
  box-sizing: border-box;
}

#business a {
  transition: opacity .3s;
  color: unset;
}

#business a[href^="tel:"] {
  display: inline-block;
  transition: none;
}

#business a:hover {
  text-decoration: none;
}

#business a:focus-visible {
  outline: none;
}

#business img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

#business .js-fadein {
  opacity: 0;
  transform: translate(0, 20px);
  transition-property: opacity, transform;
  transition-duration: 1s;
}

#business .scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}

#business .text {
  margin-bottom: 2em;
}

#business .text:last-of-type {
  margin-bottom: 0;
}

#business .pc-br {
  display: none;
}

#business .notes {
  display: inline-block;
  position: relative;
  margin-left: 1em;
}

#business .notes::before {
  content: '\0203B';
  display: block;
  position: absolute;
  top: 0;
  left: -1em;
}

#business .inner {
  width: calc(100% - 24px);
  max-width: 1200px;
  margin: 0 auto;
}

#business .sp-blind{
  display: none;
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  .business {
    font-size: 16px;
  }
  
  #business a[href^="tel:"] {
    color: inherit;
    pointer-events: none;
  }
  
  #business a:not([href^="tel:"]):hover {
    opacity: .5;
  }
  
  #business .sp-br {
    display: none;
  }
  
  #business .pc-br {
    display: inline;
  }
  
  #business .sp-blind{
  display: block;
}
}

/*------------------------------------------------------------
font
------------------------------------------------------------*/
#business .font-neworder{
  font-family: "new-order", sans-serif;
  font-weight: 700;
  font-style: normal;
}


/*------------------------------------------------------------
main
------------------------------------------------------------*/
#business .main-wrap{
  position: relative;
}

#business .main-ttl{
  position: absolute;
  color: #0068B7;
  bottom: 43px;
  letter-spacing: .02em;
}

#business .ttl-eng{
  font-size: 40px;
  line-height: 1;
  padding-bottom: 10px;
  display: block;
}

#business .ttl-jpn{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.46;
  display: block;
}

#business .swiper-wrapper{
  transition-timing-function: linear;
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  
  #business .ttl-eng{
    font-size: min(100px, calc(2.5rem + ((1vw - 3.75px) * 3.8835)));
  }
  
  #business .ttl-jpn{
    font-size: min(30px, calc(0.9375rem + ((1vw - 3.75px) * 0.9709)));
  }
  
  #business .main-ttl-outer{
    max-width: 1460px;
  }
}

/*------------------------------------------------------------
bottom
------------------------------------------------------------*/
#business .no-link{
  opacity: .7;
  pointer-events: none;
}

#business .bottom-link-text .text-wrap{
  letter-spacing: .02em;
  padding-right: calc(100vw / 375 * 11);
}

#business .bottom-link-text .text-eng{
  font-size: 28px;
  line-height: 1.3;
}

#business .bottom-link-text .text-jpn{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.46;
}

#business .bottom-links .bottom-link-text .text-jpn{
  font-size: 10px;
}

#business .btn-more .btn-text{
  font-size: 10px;
  transform: scale(.8);
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  padding-top: 3px;
}

#business .btn-more{
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  width: 35px;
  justify-content: center;
}

#business .btn-more::after{
  content: "";
  display: block;
  width: 35px;
  height: 35px;
  background-color: #FF59B1;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
}

#business .bottom-link-text{
  display: flex;
  flex-wrap: wrap;
  color: #FFF;
}

#business .bottom-illust{
  position: relative;
}

#business .bottom-illust .bottom-link-text{
  position: absolute;
  right: calc(100vw / 375 * 12);
  bottom: 5px;
}

#business .bottom-links{
  background-color: #0068B7;
  padding: 40px 0 10px;
}

#business .bottom-links .bottom-link-text{
  max-width: 288px;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
}

#business .bottom-links .bottom-link-text:last-of-type{
  margin-bottom: 0;
}

#business .bottom-links .btn-more{
  margin-top: 11px;
}

#business .bottom-links .bottom-link-text .text-eng{
  line-height: 1;
}

#business .bottom-links-innerwrap{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
}

#business .bottom-links-innerwrap .hover-area{
  padding-left: 10px;
}


@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  #business .bottom-illust .text-eng{
    font-size: min(80px, calc(1.75rem + ((1vw - 3.75px) * 3.3657)));
  }
  
  #business .bottom-illust .text-jpn{
    font-size: min(30px, calc(0.9375rem + ((1vw - 3.75px) * 0.9709)));
  }
  
  #business .btn-more .btn-text{
    font-size: 16px;
    transform: scale(1);
  }
  
  #business .bottom-illust .bottom-link-text{
    bottom: calc(100vw / 1920 * 80);
    left: 50%;
    transform: translateX(calc(-50% - calc(100vw / 1920 * 123)));
  }
  
  #business .btn-more::after{
    width: 70px;
    height: 70px;
    transition: all .3s ease-out;
    
  }
  
  #business .bottom-link-text{
    flex-wrap: nowrap;
    width: max-content;
  }
  
  #business .bottom-links .bottom-link-text .text-eng{
    font-size: min(60px, calc(1.75rem + ((1vw - 3.75px) * 2.0712)));
  }
  
  #business .bottom-links .bottom-link-text .text-jpn{
    font-size: min(20px, calc(0.9375rem + ((1vw - 3.75px) * 0.3236)));
  }
  
  #business .btn-more{
    padding: 15px;
    width: 70px;
  }
  
  #business .bottom-links-innerwrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: 20px 45px;
  }
  
  #business .bottom-links .bottom-link-text{
    max-width: unset;
    margin-bottom: 0;
  }
  
  #business .bottom-link-text:hover .btn-more{
    color: #FF59B1;
  }
  
  #business .bottom-link-text:hover .btn-more::after{
    background-color: #FFF;
    border: solid 2px #FF59B1;
    transform: translate(-50%, -50%) scale(1.3);
    transform-origin: center;
  }
  
  #business .bottom .hover-area a{
    opacity: 1;
  }
  
  #business .bottom-links-innerwrap .hover-area{
    padding: 0;
  }
  
  #business .bottom-links .bottom-link-text .text-wrap{
    padding-right: 0;
  }

}

/*------------------------------------------------------------
content
------------------------------------------------------------*/
#business .content{
  padding-bottom: 78px;
}

#business .content-message{
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.64;
  margin-bottom: 50px;
}

#business .link-box{
  color: #009D85;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .02em;
  line-height: 1;
  text-align: center;
  border: solid 2px;
  border-radius: 6px;
  padding: 15px 0 22px;
  position: relative;
}

#business .link-box-innerwrap .link-box::after{
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  background: url("../images/business/business_icon_arrow.svg") no-repeat center/contain;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  transition: all .3s ease-out;
}

#business .link-box-innerwrap .link-box:hover::after{
  bottom: 6px;
}

#business .link-box-innerwrap a:hover{
  opacity: 1;
}

#business .link-box-innerwrap .link-outer{
  max-width: 275px;
  margin: 0 auto 15px;
}

#business .link-box-innerwrap .link-outer:last-of-type{
  margin-bottom: 0;
}

#business .link-box-wrap{
  padding: 50px 0;
}

#business .work-box-img01{
  width: calc(100vw / 375 * 340);
  margin: 0 0 20px auto;
}

#business .work-box-ttl{
  font-size: 25px;
  font-weight: bold;
  letter-spacing: .02em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}

#business .work-box-ttl::before{
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url("../images/business/business_ttl_icon01.svg") no-repeat center/contain;
  margin-right: 15px;
}

#business .box-trafic .work-box-ttl::before{
  background-image: url("../images/business/business_ttl_icon02.svg");
}

#business .box-train .work-box-ttl::before{
  background-image: url("../images/business/business_ttl_icon03.svg");
}

#business .box-machine .work-box-ttl::before{
  background-image: url("../images/business/business_ttl_icon04.svg");
}

#business .box-trans .work-box-ttl::before{
  background-image: url("../images/business/business_ttl_icon05.svg");
}

#business .box-building .work-box-ttl::before{
  background-image: url("../images/business/business_ttl_icon06.svg");
}

#business .work-box-text{
  font-size: 14px;
  font-weight: 500;
  line-height: 1.64;
}

#business .work-box-img-common{
  width: calc(100vw / 375 * 225);
  min-width: 225px;
  margin-bottom: 15px;
}

#business .work-box-text-wrap{
  padding-bottom: 20px;
}

#business .work-box-img-common:nth-of-type(even){
  margin: 0 0 15px auto;
}

#business .work-box-img-wrap .bg{
  position: relative;
  z-index: 0;
  padding-bottom: 106px;
}

#business .work-box-img-wrap .bg::before{
  content: "";
  display: block;
  width: 100%;
  height: calc(100vw / 375 * 400);
  min-height: 400px;
  background: url("../images/business/business_job01_bg_sp.png") no-repeat left/contain;
  position: absolute;
  z-index: -10;
  bottom: 0;
}

#business .box-trafic .work-box-img-wrap .bg::before{
  background-image: url("../images/business/business_job02_bg_sp.png");
}

#business .box-train .work-box-img-wrap .bg::before{
  background-image: url("../images/business/business_job03_bg_sp.png");
}

#business .box-machine .work-box-img-wrap .bg::before{
  background-image: url("../images/business/business_job04_bg_sp.png");
}

#business .box-trans .work-box-img-wrap .bg::before{
  background-image: url("../images/business/business_job05_bg_sp.png");
}

#business .box-building .work-box-img-wrap .bg::before{
  background-image: url("../images/business/business_job06_bg_sp.png");
}

#business .work-box-img-inner-wrap{
  position: relative;
}

#business .work-box-img-inner-wrap::after{
  content: "";
  display: block;
  width: calc(100vw / 375 * 50);
  height: calc(100vw / 375 * 150);
  min-width: 50px;
  min-height: 150px;
  background: url("../images/business/business_job01_img05_sp.png") no-repeat center/contain;
  position: absolute;
  right: 0;
  bottom: -133px;
}

#business .box-trafic .work-box-img-inner-wrap::after{
  background-image: url("../images/business/business_job02_img05_sp.png");
  height: calc(100vw / 375 * 153);
  min-height: 153px;
}

#business .box-train .work-box-img-inner-wrap::after{
  background-image: url("../images/business/business_job03_img05_sp.png");
  width: calc(100vw / 375 * 116);
  height: calc(100vw / 375 * 150);
  min-width: 116px;
  min-height: 150px;
}

#business .box-machine .work-box-img-inner-wrap::after{
  background-image: url("../images/business/business_job04_img05_sp.png");
  width: calc(100vw / 375 * 88);
  height: calc(100vw / 375 * 150);
  min-width: 88px;
  min-height: 150px;
}

#business .box-trans .work-box-img-inner-wrap::after{
  background-image: url("../images/business/business_job05_img05_sp.png");
  width: calc(100vw / 375 * 67);
  height: calc(100vw / 375 * 160);
  min-width: 67px;
  min-height: 160px;
}

#business .box-building .work-box-img-inner-wrap::after{
  background-image: url("../images/business/business_job06_img05_sp.png");
  width: calc(100vw / 375 * 112);
  height: calc(100vw / 375 * 150);
  min-width: 112px;
  min-height: 150px;
}

#business .work-box:nth-of-type(even) .work-box-img-inner-wrap::after{
  left: 0;
}

#business .work-box{
  margin-bottom: 78px;
  padding-top: 70px;
  margin-top: -70px;
}

#business .work-box:last-of-type{
  margin-bottom: 0;
}

#business .work-box:nth-of-type(even) .work-box-img01{
  margin: 0 0  20px 0;
}

#business .work-box:nth-of-type(even) .work-box-img-common{
  margin: 0 0 15px auto;
}

#business .work-box:nth-of-type(even) .work-box-img-common:nth-of-type(even){
  margin: 0 0 15px 0;
}

#business .work-box .work-box-img-common:last-of-type{
  margin-bottom: 0;
}

@media print, screen and (min-width: 768px) {/* ---------- タブレット・PC以上 ---------- */
  #business .content-message{
    font-size: 18px;
    line-height: 2.5;
    margin-bottom: 100px;
  }
  
  #business .link-box-innerwrap{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 12px;
  }
  
  #business .link-box-innerwrap .link-outer{
    max-width: unset;
    width: 100%;
    margin: 0;
  }
  
  #business .link-box{
    font-size: min(24px, calc(0.9375rem + ((1vw - 3.75px) * 0.5825)));
    padding: 10px 17px 45px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.25;
    border: solid 4px;
    border-radius: 12px;
  }
  
  #business .link-box-innerwrap .link-box::after{
    width: 18px;
    height: 10px;
    bottom: 22px;
  }
  
  #business .link-box-innerwrap .link-box:hover::after{
    bottom: 12px;
  }
  
  #business .link-box-wrap{
    padding: 100px 0;
  }
  
  #business .work-box-text-wrap{
    width: calc(100% - 24px);
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row-reverse;
  }
  
  #business .work-box-img01{
    margin-right: calc(-50vw + 50%);
    width: 50vw;
  }
  
  #business .work-box:nth-of-type(even) .work-box-text-wrap{
    flex-direction: row;
  }
  
  #business .work-box:nth-of-type(even) .work-box-img01{
    margin-right: 0;
    margin-left: calc(-50vw + 50%);
  }
  
  #business .work-box-img01 img{
    max-height: 400px;
    object-fit: cover;
    object-position: left;
    height: 100%;
    width: 100%;
    border-radius: 20px 0 0 20px;
  }
  
  #business .work-box-ttl{
    font-size: 36px;
  }
  
  #business .work-box-ttl::before{
    width: 80px;
    height: 80px;
  }
  
  #business .work-box-text{
    font-size: 18px;
    line-height: 2.5;
    padding-left: 20px;
  }
  
  #business .work-box-prof{
    max-width: 600px;
    padding: 30px 60px 0 40px;
  }
  
  #business .work-box-img-wrap .bg::before{
    background: url("../images/business/business_job01_bg02_pc@2x.png") no-repeat bottom/contain;
    width: 100%;
    max-width: 1415px;
    height: 102px;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    min-height: unset;
  }
  
  #business .work-box-img-wrap .bg::after{
    content: "";
    display: block;
    background-color: #CCEBE7;
    width: 50vw;
    position: absolute;
    bottom: 0;
    height: 420px;
    z-index: -20;
  }
  
  #business .work-box:nth-of-type(even) .work-box-img-wrap .bg::after{
    right: 0;
  }
  
  #business .box-trafic .work-box-img-wrap .bg::before{
    background-image: url("../images/business/business_job02_bg02_pc@2x.png");
  }
  
  #business .box-train .work-box-img-wrap .bg::before{
    background-image: url("../images/business/business_job03_bg02_pc@2x.png");
  }
  
  #business .box-machine .work-box-img-wrap .bg::before{
    background-image: url("../images/business/business_job04_bg02_pc@2x.png");
  }
  
  #business .box-trans .work-box-img-wrap .bg::before{
    background-image: url("../images/business/business_job05_bg02_pc@2x.png");
  }
  
  #business .box-building .work-box-img-wrap .bg::before{
    background-image: url("../images/business/business_job06_bg02_pc@2x.png");
  }
  
  #business .work-box-img-common{
    width: 100%;
    margin: 0;
  }
  
  #business .work-box-img-inner-wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 30px;
    position: relative;
    z-index: 0;
    padding-bottom: 46px;
  }
  
  #business .work-box-img-inner-wrap::before{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    z-index: -10;
    width: calc(50vw + 360px);
    height: 420px;
    background-color: #CCEBE7;
    border-radius: 0 120px 0 0;
    overflow: hidden;
  }
  
  #business .work-box:nth-of-type(even) .work-box-img-inner-wrap::before{
    right: 0;
    border-radius: 120px 0 0 0;
  }
  
  #business .work-box-img-common:nth-of-type(even){
    margin: 0;
  }
  
  #business .work-box-img-inner-wrap::after{
    background-image: url("../images/business/business_job01_bg01_pc@2x.png");
    width: 100% !important;
    height: 420px !important;
    bottom: 0;
    z-index: -5;
  }
  
  #business .box-trafic .work-box-img-inner-wrap::after{
    background-image: url("../images/business/business_job02_bg01_pc@2x.png");
  }
  
  #business .box-train .work-box-img-inner-wrap::after{
    background-image: url("../images/business/business_job03_bg01_pc@2x.png");
    right: -115px;
  }
  
  #business .box-machine .work-box-img-inner-wrap::after{
    background-image: url("../images/business/business_job04_bg01_pc@2x.png");
  }
  
  #business .box-trans .work-box-img-inner-wrap::after{
    background-image: url("../images/business/business_job05_bg01_pc@2x.png");
  }
  
  #business .box-building .work-box-img-inner-wrap::after{
    background-image: url("../images/business/business_job06_bg01_pc@2x.png");
  }
  
  #business .work-box-img-icon img{
    width: 100%;
    max-width: 100px;
  }
  
  #business .box-train .work-box-img-icon img{
    max-width: 235px;
  }
  
  #business .box-machine .work-box-img-icon img{
    max-width: 175px;
  }
  
  #business .box-trans .work-box-img-icon img{
    max-width: 134px;
  }
  
  #business .box-building .work-box-img-icon img{
    max-width: 140px;
  }
  
  #business .work-box-img-icon{
    position: absolute;
    width: fit-content;
    bottom: -84px;
    right: 190px;
    min-width: unset;
  }
  
  #business .box-trafic .work-box-img-icon{
    left: 160px;
  }
  
  #business .box-train .work-box-img-icon{
    left: 50%;
  }
  
  #business .box-machine .work-box-img-icon{
    left: 20px;
  }
  
  #business .box-trans .work-box-img-icon{
    right: 56px;
  }
  
  #business .box-building .work-box-img-icon{
    right: 50%;
  }
  
  #business .work-box-img-wrap .bg{
    padding-bottom: 0;
  }
  
  #business .work-box{
    margin-bottom: 184px;
    padding-top: 100px;
    margin-top: -100px;
  }
  
  #business .work-box:nth-of-type(even) .work-box-prof{
    padding: 30px 30px 0 50px;
  }
  
  #business #building .work-box-prof{
    padding: 0px 30px 14px 50px;
  }
  
  #business .work-box:nth-of-type(even) .work-box-img-common,
  #business .work-box:nth-of-type(even) .work-box-img-common:nth-of-type(even){
    margin: 0;
  }
  
  #business .work-box:nth-of-type(even) .work-box-img02{
    order: 3;
  }
  
  #business .work-box:nth-of-type(even) .work-box-img03{
    order: 2;
  }
  
  #business .work-box:nth-of-type(even) .work-box-img04{
    order: 1;
  }
  
  #business .box-train .work-box-img04{
    order: 3;
  }
  
  #business .work-box:nth-of-type(even) .work-box-img01 img{
    object-position: center;
    border-radius: 0 20px 20px 0;
  }
  
  #business .work-box.box-building .work-box-img01 img{
    max-height: 500px;
    object-position: 70%;
  }
  
  #business .work-box-wrap{
    overflow: hidden;
    padding-bottom: 80px;
    margin-top: -100px;
    padding-top: 100px;
  }
  
  #business .content{
    padding-bottom: 120px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1020px) {/* ---------- タブレット・PC以上 ---------- */
  #business .work-box-img01, #business .work-box:nth-of-type(even) .work-box-img01{
    margin: 0;
  }
}