@charset "UTF-8";
#work {
  /* カテゴリ設定 */ }
  #work .cont__header {
    background-color: #FF8F00; }
    #work .cont__header .box__cat_ttl:before {
      background: url("../work/img/img_main.jpg") no-repeat center top;
      background-size: cover; }
    #work .cont__header .box__cat_nav a.active {
      color: #FF8F00; }
      #work .cont__header .box__cat_nav a.active span {
        border-color: #FF8F00; }
  #work.factory .cont__area .layout_factory {
    margin-bottom: 80px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #work.factory .cont__area .layout_factory {
        padding: 10px; } }
    #work.factory .cont__area .layout_factory .info_area {
      max-width: 470px; }
    #work.factory .cont__area .layout_factory .col-sm-pull-6 .info_area {
      float: right; }
    #work.factory .cont__area .layout_factory .ttl {
      background-color: #FF8F00;
      padding: 5px 10px 5px 15px;
      overflow: hidden; }
      #work.factory .cont__area .layout_factory .ttl h2 {
        display: inline-block;
        color: #fff;
        margin-right: 20px;
        font-size: 24px;
        font-size: 2.4rem; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #work.factory .cont__area .layout_factory .ttl h2 {
            font-size: 18px;
            font-size: 1.8rem; } }
      #work.factory .cont__area .layout_factory .ttl a {
        display: inline-block;
        background-color: #fff;
        font-family: "Montserrat", "Noto Sans JP", "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, sans-serif;
        font-weight: bold;
        padding: 2px;
        width: 100px;
        text-align: center;
        position: relative;
        top: 2px;
        font-size: 14px;
        font-size: 1.4rem;
        float: right; }
    #work.factory .cont__area .layout_factory .txt {
      padding: 15px 0; }
      #work.factory .cont__area .layout_factory .txt p {
        margin-bottom: 1.2em;
        line-height: 1.8; }
    #work.factory .cont__area .layout_factory .product {
      background-color: #f3f3f3;
      border-top: solid 2px #FF8F00;
      border-bottom: solid 2px #FF8F00;
      padding: 8px 20px; }
      #work.factory .cont__area .layout_factory .product h3 {
        color: #FF8F00;
        font-size: 16px;
        font-size: 1.6rem;
        margin-left: -10px;
        margin-bottom: 10px; }
      #work.factory .cont__area .layout_factory .product p {
        margin-bottom: 10px; }
      #work.factory .cont__area .layout_factory .product.buhin dl {
        display: table;
        margin-bottom: 10px; }
        #work.factory .cont__area .layout_factory .product.buhin dl dt {
          display: table-cell;
          background-color: #fff;
          color: #FF8F00;
          border: solid 1px #FF8F00;
          text-align: center;
          vertical-align: middle;
          line-height: 1.5;
          width: 1.6em;
          padding: 0.3em; }
        #work.factory .cont__area .layout_factory .product.buhin dl dd {
          display: table-cell;
          line-height: 1.6;
          padding-left: 10px; }
      #work.factory .cont__area .layout_factory .product .product_div {
        display: flex; }
        #work.factory .cont__area .layout_factory .product .product_div .box {
          margin-right: 30px; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            #work.factory .cont__area .layout_factory .product .product_div .box {
              margin-right: 20px; } }
          #work.factory .cont__area .layout_factory .product .product_div .box .img {
            width: 150px; }
            @media only screen and (max-width: 768px), print and (min-width: 2cm) {
              #work.factory .cont__area .layout_factory .product .product_div .box .img {
                width: 140px; } }
      #work.factory .cont__area .layout_factory .product .product_item {
        width: 150px;
        margin-right: 15px; }
        #work.factory .cont__area .layout_factory .product .product_item:last-child {
          margin-right: 0; }
        #work.factory .cont__area .layout_factory .product .product_item .product_p {
          text-align: center;
          margin-bottom: 3px; }
    #work.factory .cont__area .layout_factory .flex {
      display: flex;
      justify-content: center;
      padding: 15px; }
  #work.job .cont__area {
    padding-bottom: 40px; }
    @media only screen and (max-width: 768px), print and (min-width: 2cm) {
      #work.job .cont__area .layout_1 {
        padding-bottom: 40px; } }
    #work.job .cont__area .layout_job {
      padding: 20px 0 30px; }
      #work.job .cont__area .layout_job h2 {
        text-align: center;
        margin-bottom: 60px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #work.job .cont__area .layout_job h2 {
            margin-bottom: 40px; } }
        #work.job .cont__area .layout_job h2:before {
          content: "[　";
          display: inline-block; }
        #work.job .cont__area .layout_job h2:after {
          content: "　]";
          display: inline-block; }
      #work.job .cont__area .layout_job.line {
        position: relative; }
        #work.job .cont__area .layout_job.line:before {
          display: block;
          content: "";
          width: 100%;
          height: 100%;
          background-color: rgba(255, 101, 0, 0.06);
          position: absolute;
          top: 40px;
          left: 0;
          z-index: -1; }
        #work.job .cont__area .layout_job.line h2 {
          color: #ff6500; }
        #work.job .cont__area .layout_job.line .inner dl dt {
          background-color: #ff6500; }
      #work.job .cont__area .layout_job.staff {
        margin-top: 120px;
        position: relative; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #work.job .cont__area .layout_job.staff {
            margin-top: 80px;
            padding-bottom: 50px; } }
        #work.job .cont__area .layout_job.staff:before {
          display: block;
          content: "";
          width: 100%;
          height: 100%;
          background-color: rgba(255, 143, 0, 0.06);
          position: absolute;
          top: 40px;
          left: 0;
          z-index: -1; }
        #work.job .cont__area .layout_job.staff h2 {
          color: #FF8F00; }
        #work.job .cont__area .layout_job.staff .inner dl dt {
          background-color: #FF8F00; }
      #work.job .cont__area .layout_job .inner {
        text-align: center; }
        #work.job .cont__area .layout_job .inner dl {
          display: inline-block; }
          @media only screen and (max-width: 768px), print and (min-width: 2cm) {
            #work.job .cont__area .layout_job .inner dl {
              width: 100%;
              display: block; }
              #work.job .cont__area .layout_job .inner dl.active dt i:after {
                display: none; } }
          #work.job .cont__area .layout_job .inner dl dt {
            display: flex;
            width: 180px;
            height: 180px;
            align-items: center;
            justify-content: center;
            margin: 2px 1px;
            background-color: #FF8F00;
            font-size: 17px;
            font-size: 1.7rem;
            color: #fff;
            letter-spacing: 0.05em;
            line-height: 1;
            transition: all .2s ease-out;
            cursor: pointer; }
            @media only screen and (max-width: 768px), print and (min-width: 2cm) {
              #work.job .cont__area .layout_job .inner dl dt {
                width: 100%;
                height: auto;
                margin: 2px 0;
                justify-content: flex-start;
                padding: 20px;
                position: relative; } }
            #work.job .cont__area .layout_job .inner dl dt i {
              position: relative;
              width: 30px;
              height: 20px;
              display: block;
              bottom: 4px;
              opacity: 0.8;
              margin-left: 10px; }
              @media only screen and (max-width: 768px), print and (min-width: 2cm) {
                #work.job .cont__area .layout_job .inner dl dt i {
                  position: absolute;
                  bottom: auto;
                  right: 5px;
                  top: 50%;
                  height: 30px;
                  margin-top: -1px; } }
              #work.job .cont__area .layout_job .inner dl dt i:before {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0px;
                display: block;
                height: 1px;
                width: 20px;
                background-color: #fff;
                transition: all .2s ease-out; }
                @media only screen and (max-width: 768px), print and (min-width: 2cm) {
                  #work.job .cont__area .layout_job .inner dl dt i:before {
                    position: static; } }
              #work.job .cont__area .layout_job .inner dl dt i:after {
                content: "";
                position: absolute;
                left: 15px;
                bottom: 4px;
                display: block;
                height: 1px;
                width: 13px;
                background-color: #fff;
                transform: rotate(45deg);
                transition: all .2s ease-out; }
                @media only screen and (max-width: 768px), print and (min-width: 2cm) {
                  #work.job .cont__area .layout_job .inner dl dt i:after {
                    transform: rotate(90deg);
                    width: 20px;
                    position: static; } }
            @media only screen and (min-width: 769px), print and (min-width: 2cm) {
              #work.job .cont__area .layout_job .inner dl dt:hover {
                text-indent: -1em;
                opacity: 0.8; }
                #work.job .cont__area .layout_job .inner dl dt:hover i:before {
                  width: 27px;
                  left: 10px; }
                #work.job .cont__area .layout_job .inner dl dt:hover i:after {
                  left: 33px; } }
  #work .pop_job {
    background-color: #fff;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-bottom: 50px; }
    @media only screen and (min-width: 769px), print and (min-width: 2cm) {
      #work .pop_job {
        margin-bottom: 30px; } }
    #work .pop_job.active {
      display: block !important; }
    #work .pop_job.line .txt h1 {
      color: #ff6500; }
      #work .pop_job.line .txt h1 span {
        background-color: #ff6500; }
    #work .pop_job.line .voice {
      background-color: rgba(255, 101, 0, 0.1); }
      #work .pop_job.line .voice p span {
        border: solid 2px #ff6500; }
        #work .pop_job.line .voice p span:after {
          border-right: 18px solid #ff6500; }
    #work .pop_job.staff .txt h1 {
      color: #FF8F00;
      text-align: left; }
      #work .pop_job.staff .txt h1 span {
        background-color: #FF8F00; }
    #work .pop_job.staff .voice {
      background-color: rgba(255, 143, 0, 0.1); }
      #work .pop_job.staff .voice p span {
        border: solid 2px #FF8F00; }
        #work .pop_job.staff .voice p span:after {
          border-right: 18px solid #FF8F00; }
    #work .pop_job .col-sm-12 .txt {
      padding: 25px; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #work .pop_job .col-sm-12 .txt {
          padding: 15px; } }
    #work .pop_job .txt {
      padding: 25px  25px 25px 0; }
      @media only screen and (max-width: 768px), print and (min-width: 2cm) {
        #work .pop_job .txt {
          padding: 15px; } }
      #work .pop_job .txt h1 {
        font-size: 24px;
        font-size: 2.4rem;
        margin-bottom: 20px;
        text-align: left; }
        #work .pop_job .txt h1 span {
          color: #fff;
          display: inline-block;
          padding: 5px;
          width: 120px;
          text-align: center;
          font-size: 16px;
          font-size: 1.6rem;
          margin-right: 20px;
          position: relative;
          top: -3px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #work .pop_job .txt h1 {
            display: none; } }
      #work .pop_job .txt h3 {
        font-size: 18px;
        font-size: 1.8rem;
        margin-bottom: 10px;
        font-weight: bold;
        text-align: left; }
    #work .pop_job .voice {
      display: table; }
      #work .pop_job .voice h3 {
        display: table-cell;
        width: 200px;
        text-align: center;
        vertical-align: middle;
        letter-spacing: 0.1em;
        font-size: 15px;
        font-size: 1.5rem;
        padding-left: 20px; }
        #work .pop_job .voice h3 span {
          font-size: 24px;
          font-size: 2.4rem;
          font-family: "Montserrat", "Noto Sans JP", "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Arial, sans-serif;
          font-weight: bold; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #work .pop_job .voice h3 {
            display: block;
            padding-left: 0;
            width: 100%;
            margin-top: 10px; } }
      #work .pop_job .voice p {
        display: table-cell;
        vertical-align: middle;
        padding: 20px; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #work .pop_job .voice p {
            padding: 15px; } }
        #work .pop_job .voice p span {
          display: block;
          background-color: #fff;
          border-radius: 8px;
          padding: 15px 20px;
          position: relative; }
          #work .pop_job .voice p span:before {
            content: "";
            position: absolute;
            top: 50%;
            left: -24px;
            margin-top: -12px;
            border: 8px solid transparent;
            border-right: 16px solid #FFF;
            z-index: 2; }
          #work .pop_job .voice p span:after {
            content: "";
            position: absolute;
            top: 50%;
            left: -30px;
            margin-top: -14px;
            border: 10px solid transparent;
            z-index: 1; }
        @media only screen and (max-width: 768px), print and (min-width: 2cm) {
          #work .pop_job .voice p {
            display: block;
            padding: 10px; }
            #work .pop_job .voice p span:before {
              display: none; }
            #work .pop_job .voice p span:after {
              display: none; } }
    #work .pop_job .mfp-close {
      width: 40px;
      height: 40px;
      position: absolute;
      top: -25px;
      right: -35px;
      cursor: pointer; }
      #work .pop_job .mfp-close:before {
        display: block;
        content: "";
        width: 40px;
        height: 1px;
        background-color: #fff;
        transform: rotate(-45deg); }
      #work .pop_job .mfp-close:after {
        display: block;
        content: "";
        width: 40px;
        height: 1px;
        background-color: #fff;
        transform: rotate(45deg); }