@charset "UTF-8";

#business main .bk_bl{
padding: 136px 0 24px;
margin-top: 136px;
}
.business_map_area{
    position: relative;
  width: 100%;
  padding-top: calc(725 / 1216 * 100%);
    background-image: url(/business/img/business_map.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.business_map_area .map_arrow{
    position: absolute;
    width: 13.194444444444445vw;
    height: auto;
}
.business_map_area .map_arrow.product_sales{
    top: calc(14 / 725 * 100%);
    left: 23.819444444444443vw;
}
.business_map_area .map_arrow.food{
    top: calc(128 / 725 * 100%);
    left: 34.861vw;
}
.business_map_area .map_arrow.cleaning{
    top: calc(38 / 725 * 100%);
    left: 53.40277777777778vw;
}
.business_map_area .map_arrow.transportation{
    top: calc(293 / 725 * 100%);
    left: 14.305vw;
}
.business_map_area .map_arrow.equipment_transportation{
    top: calc(122 / 725 * 100%);
    left: 7.2vw;
}
.business_map_area .map_arrow.packing{
    top: calc(402 / 725 * 100%);
    left: 4.4vw;
}
.business_map_area .map_arrow.construction{
    top: calc(273 / 725 * 100%);
    left: 58.125vw;
}
.business_map_area .map_arrow.biotope{
    top: calc(455 / 725 * 100%);
    left: 65.4861vw;
}
.business_map_area .map_arrow.hotbath{
    top: calc(522 / 725 * 100%);
    left: 35.972vw;
}
.business_map_area .map_arrow a{
    display: block;
}
.business_map_area .map_arrow a:hover{
    opacity: 1;
    animation:bounce 0.8s ease-out;
}
@keyframes bounce {
    0%    { transform:translate(0, 0); }
    16.6% { transform:translate(0, -15px); animation-timing-function:ease-in; }
    33.3% { transform:translate(0, 0); }
    49.8% { transform:translate(0, -10px); animation-timing-function:ease-in; }
    66.4% { transform:translate(0, 0); }
    83%   { transform:translate(0, -2px); animation-timing-function:ease-in; }
    100%  { transform:translate(0, 0); }
}
#business .mb80>h3{
    font-size: 1.6666666666666667vw;
    font-weight: 700;
    line-height: 150%; /* 36px */
    letter-spacing: 0.96px;
    margin-bottom: 46px;
    padding-left: 1.8055555555555554vw;
    position: relative;
}
#business .mb80>h3::after{
    content: '';
    width: 1.25vw;
    height: 1.25vw;
    background-color: #EA81A6;
    position: absolute;
    top: 8px;
    left: 0;
}
#business .mb80:nth-child(2)>h3::after{
    background-color: #ED875B;
}
#business .mb80:nth-child(3)>h3::after{
    background-color: #248677;
}
#business .mb80:nth-child(4)>h3::after{
    background-color: #69BDCD;
}
#business .mb80>h3::before{
    content: '';
    width: 62.77777777777778vw;
    height: 2px;
    background:linear-gradient(
        to right, 
        #69BDCD 0%, #69BDCD 4.2%,
        #fff 4.2%, #fff 100%);
    position: absolute;
    top: 14px;
    right: 0;
}
.column_wrap h6.pink{
	color: #EA81A6;
text-align: center;
	font-size: 20px;
font-weight: 700;
line-height: 150%; /* 30px */
letter-spacing: 0.8px;
padding: 33px 0 27px;
margin: 5px 0;
position: relative;
}
.column_wrap h6.pink::after{
    content: '';
    width: 152px;
    height: 62px;
    background-image: url(/business/img/product_sales/arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    opacity: 0.35;
}
#business .box3_area {
    width: auto;
    justify-content: flex-start;
    margin-left: 21.666666666666668vw;
}
#business .box3_area .box_wrap {
    width: 19.444444444444446vw;
    margin-bottom: 0;
}
#business .box3_area .box_wrap h3{
    font-size: 1.25vw;
}
#business .box3_area .box_wrap p{
    font-size: 1.2vw;
    line-height: 1.8;
}
.column_wrap .colum2.colum_flex .img_box:nth-child(n+3){
margin-top: 32px;
}
.column_wrap .colum3.colum_flex.jc_f{
    justify-content: flex-start;
}
.column_wrap .colum3.colum_flex.jc_f .img_box{
    margin-right: 2.2%;
}
.column_wrap .colum3.colum_flex.jc_f .img_box:nth-child(3n){
    margin-right: 0%;
}
.column_wrap .colum2.colum_flex.box3 .img_box:first-child {
    width: 100%;
}
.column_wrap .colum2.colum_flex.box3 .img_box:first-child {
    width: 100%;
}
.column_wrap .colum2.colum_flex.box3 .img_box:nth-child(n+2) {
    margin-top: 32px;
}
.column_wrap dl.dl2 > div dt{
width: 240px;
}
.column_wrap dl.dl2 > div dd{
	width: calc(100% - 240px);
}
.column_wrap .colum3.colum_flex .txt_box{
    padding: 32px 3% 24px;
    background-color: #FFF3D6;
    width: 30.977%;
}
.column_wrap .colum3.colum_flex .txt_box h5{
    color: #ED875B;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 150%; /* 27px */
    letter-spacing: 0.72px;
    position: relative;
    padding-bottom: 13px;
    margin: 0 0 24px;
}
.column_wrap .colum3.colum_flex .txt_box h5::after{
    content: '';
    width: 33px;
    height: 5px;
    background-color: #ED875B;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.column_wrap .colum3.colum_flex .txt_box:nth-child(2){
    background-color: #FFEBF0;
}
.column_wrap .colum3.colum_flex .txt_box:nth-child(2) h5{
    color: #EA81A6;
}
.column_wrap .colum3.colum_flex .txt_box:nth-child(2) h5::after{
    background-color: #EA81A6;
}
.column_wrap .colum3.colum_flex .txt_box:nth-child(3){
    background-color: #DFF7FF;
}
.column_wrap .colum3.colum_flex .txt_box:nth-child(3) h5{
    color: #69BDCD;
}
.column_wrap .colum3.colum_flex .txt_box:nth-child(3) h5::after{
    background-color: #69BDCD;
}


/* responsive */
@media screen and (min-width:1440px){
    #business .box3_area {
        margin-left: 312px;
    }
    .business_map_area{
      width: 1216px;
      height: 725px;
    }
    .business_map_area .map_arrow{
        width: 190px;
        height: 90px;
    }
    .business_map_area .map_arrow.product_sales{
        top: 14px;
        left: 343px;
    }
    .business_map_area .map_arrow.food{
        top: 128px;
        left: 502px;
    }
    .business_map_area .map_arrow.cleaning{
        top: 38px;
        left: 769px;
    }
    .business_map_area .map_arrow.transportation{
        top: 293px;
        left: 206px;
    }
    .business_map_area .map_arrow.equipment_transportation{
        top: 122px;
        left: 104px;
    }
    .business_map_area .map_arrow.packing{
        top: 402px;
        left: 64px;
    }
    .business_map_area .map_arrow.construction{
        top: 273px;
        left: 837px;
    }
    .business_map_area .map_arrow.biotope{
        top: 455px;
        left: 943px;
    }
    .business_map_area .map_arrow.hotbath{
        top: 522px;
        left: 518px;
    }
    #business .mb80>h3{
        font-size: 24px;
        padding-left: 26px;
    }
    #business .mb80>h3::after{
        width: 18px;
        height: 18px;
        top: 6px;
    }
    #business .box3_area .box_wrap h3{
        font-size: 18px;
        font-weight: 700;
        line-height: 150%; /* 27px */
        letter-spacing: 0.72px;
    }
    #business .box3_area .box_wrap {
        width: 280px;
        margin-bottom: 0;
    }
    #business .mb80>h3::before {
        width: 904px;
    }
    #business .box3_area .box_wrap p {
        font-size: 16px;
    }
    .column_wrap .colum3.colum_flex.jc_f .img_box{
        margin-right: 32px;
    }
    .column_wrap .colum3.colum_flex .txt_box{
        padding: 32px 28px 24px;
    }
}
@media (min-width: 768px) and (max-width: 1100px){
    .column_wrap .colum3.colum_flex .txt_box h5{
        font-size: 1.6vw;
    }
    .column_wrap .colum3.colum_flex .txt_box p{
        font-size: 1.4vw;
        line-height: 1.6;
    }
}
@media screen and (min-width:768px){
}
@media screen and (max-width:767px){
    .img_box.wh100_sp{
		width: 100% !important;
	}
    .breadcrumbs,.aside_wrap .main .breadcrumbs {
		padding: 48px 4% 40px;
	}
    #business .mb80>h3 {
        font-size: 24px;
        padding-left: 26px;
        margin-bottom: 79px;
    }
    #business .mb80>h3::before {
        width: 100%;
        background: linear-gradient(to right, #69BDCD 0%, #69BDCD 51px, #fff 51px, #fff 100%);
        top: 67px;
    }
    #business .mb80>h3::after {
        width: 18px;
        height: 18px;
        top: 9px;
    }
    #business .mb80:nth-child(3)>h3::before {
        top: 114px;
    }
    #business .box3_area {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
    #business .box3_area .box_wrap {
        width: 100%;
        margin-bottom: 32px;
    }
    #business .box3_area .box_wrap:last-child {
        margin-bottom: 0;
    }
    #business .box3_area .box_wrap h3 {
        font-size: 18px;
    }
    #business .box3_area .box_wrap p {
        font-size: 16px;
    }
    .column_wrap h6.pink {
        padding: 12px 0 16px;
        margin: 0;
    }
    .column_wrap h6.pink::after {
        content: '';
        width: 108px;
        height: 44px;
        top: 10%;
    }
    .column_wrap .colum3.colum_flex .img_box{
        margin-top: 0;
    }
    .column_wrap .colum3.colum_flex .img_box:last-child{
        margin-top: 8px;
    }
    .column_wrap .colum_flex .img_box:last-of-type p,
.column_wrap .colum_flex .leftimg_box:last-of-type p,
.column_wrap .colum3 p{
	margin-bottom: 0;
}
.column_wrap .colum2.colum_flex .img_box:nth-child(n+3) {
    margin-top: 16px;
}
.column_wrap .colum3.colum_flex.jc_f .img_box:nth-child(3n) {
    margin-right:2.2%;
}
.column_wrap .colum3.colum_flex.jc_f .img_box:nth-child(2n) {
    margin-right: 0%;
}
.column_wrap .colum3.colum_flex.jc_f .img_box{
    margin-top: 8px;
}
.column_wrap .colum2.colum_flex.box3 .img_box:nth-child(n+2) {
    margin-top: 16px;
}
.column_wrap dl.dl2 > div dt,.column_wrap dl.dl2 > div dd{
    width: 100%;
    }
    .column_wrap .colum3.colum_flex .txt_box{
        width: 100%;
        margin-bottom: 24px;
        padding: 32px 28px 24px;
    }
    .column_wrap .colum3.colum_flex .txt_box:last-child{
        margin-bottom: 0;
    }
    .business_map_outer {
        position: relative;
        text-align: center;
      }
    .business_map_wrap {
        max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
      }
      .business_map_area {
        width: 887px;
        height: 529px;
        padding: 0;
      }
      .business_map_wrap::-webkit-scrollbar {
        display: none;
      }
      .scroll-hint-icon {
        display: none !important;
      }
      .custom-scroll-hint {
        background: url("/common/img/scroll-hint-hand.png") no-repeat center center;
        background-size: contain;
        width: 111px;
        height: 111px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
        z-index: 10;
        pointer-events: none;
        animation: hintMove 1.5s ease-in-out infinite;
        transition: opacity 0.3s ease;
      }
      /* フェードアウトアニメーション */
      .custom-scroll-hint.fade-out {
        opacity: 0;
      }
      @keyframes hintMove {
        0%, 100% { transform: translate(-50%, -50%) translateX(-10px); }
        50% { transform: translate(-50%, -50%) translateX(10px); }
      }
      .business_map_area .map_arrow{
        width: 170px;
}
.business_map_area .map_arrow.product_sales {
    top: -3px;
        left: 234px;
}
.business_map_area .map_arrow.food{
    top: 90px;
        left: 340px;
}
.business_map_area .map_arrow.cleaning{
    top: 20px;
        left: 548px;
}
.business_map_area .map_arrow.transportation{
    top: 204px;
        left: 130px;
}
.business_map_area .map_arrow.equipment_transportation{
    top: 80px;
        left: 56px;
}
.business_map_area .map_arrow.packing{
    top: 290px;
        left: 30px;
}
.business_map_area .map_arrow.construction{
    top: 185px;
    left: 600px;
}
.business_map_area .map_arrow.biotope{
    top: 326px;
    left: 670px;
}
.business_map_area .map_arrow.hotbath{
    top: 370px;
        left: 370px;
}
}