@charset "UTF-8";
#title1-pan, #title2-pan, #title3-pan {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  color: #FFF;
  margin: 0 0 100px; }
  @media screen and (max-width: 768px) {
    #title1-pan, #title2-pan, #title3-pan {
      margin: 0 0 70px; } }
  @media screen and (max-width: 480px) {
    #title1-pan, #title2-pan, #title3-pan {
      margin: 0 0 40px; } }
  #title1-pan #pan, #title2-pan #pan, #title3-pan #pan {
    width: 100%;
    padding: 10px 2%;
    display: flex; }
    #title1-pan #pan p, #title2-pan #pan p, #title3-pan #pan p {
      background-image: url("../images/arrow_01.svg");
      background-size: 6px;
      background-repeat: no-repeat;
      background-position: right center;
      line-height: 1.6em;
      color: #FFF;
      font-size: 1.2rem;
      padding-right: 10px;
      margin-right: 5px; }
      #title1-pan #pan p:last-of-type, #title2-pan #pan p:last-of-type, #title3-pan #pan p:last-of-type {
        background-image: none;
        padding-right: 0;
        margin-right: 0; }
      #title1-pan #pan p a, #title2-pan #pan p a, #title3-pan #pan p a {
        color: #999; }
  #title1-pan.oem-bg, #title2-pan.oem-bg, #title3-pan.oem-bg {
    background-image: url("../title-bg/oem-bg.webp");
    margin-bottom: 0; }
  #title1-pan.unit-bg, #title2-pan.unit-bg, #title3-pan.unit-bg {
    background-image: url("../title-bg/unit-bg.webp");
    margin-bottom: 0; }
  #title1-pan.design-bg, #title2-pan.design-bg, #title3-pan.design-bg {
    background-image: url("../title-bg/design-bg.webp"); }
  #title1-pan.flow-bg, #title2-pan.flow-bg, #title3-pan.flow-bg {
    background-image: url("../title-bg/flow-bg.webp"); }
  #title1-pan.system-bg, #title2-pan.system-bg, #title3-pan.system-bg {
    background-image: url("../title-bg/system-bg.webp"); }
  #title1-pan.thought-bg, #title2-pan.thought-bg, #title3-pan.thought-bg {
    background-image: url("../title-bg/thought-bg.webp");
    margin-bottom: 0; }
  #title1-pan.bland-bg, #title2-pan.bland-bg, #title3-pan.bland-bg {
    color: #000;
    margin-bottom: 0; }
    #title1-pan.bland-bg #pan p, #title2-pan.bland-bg #pan p, #title3-pan.bland-bg #pan p {
      color: #000; }
  #title1-pan h1, #title2-pan h1, #title3-pan h1 {
    background-image: url("../images/title-arrow.svg");
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    font-weight: 700;
    padding-left: 25px;
    width: 1000px;
    margin: 0 auto; }
    @media screen and (max-width: 1100px) {
      #title1-pan h1, #title2-pan h1, #title3-pan h1 {
        width: 94%; } }
  #title1-pan .h1-subtext, #title2-pan .h1-subtext, #title3-pan .h1-subtext {
    width: 1000px;
    margin: 0 auto 2em;
    padding-left: 25px;
    color: #CC0A14;
    font-weight: 700; }
    @media screen and (max-width: 1100px) {
      #title1-pan .h1-subtext, #title2-pan .h1-subtext, #title3-pan .h1-subtext {
        width: 94%; } }

#title1-pan, #title3-pan {
  height: 160px; }
  @media screen and (max-width: 768px) {
    #title1-pan, #title3-pan {
      height: 140px; } }
  @media screen and (max-width: 480px) {
    #title1-pan, #title3-pan {
      height: 120px; } }
  #title1-pan h1, #title3-pan h1 {
    margin-top: 5px;
    font-size: 4.0rem; }
    @media screen and (max-width: 768px) {
      #title1-pan h1, #title3-pan h1 {
        font-size: 3.0rem; } }
    @media screen and (max-width: 480px) {
      #title1-pan h1, #title3-pan h1 {
        font-size: 2.4rem;
        line-height: 1.2em; } }

#title2-pan {
  height: 250px; }
  @media screen and (max-width: 768px) {
    #title2-pan {
      height: auto;
      padding-bottom: 25px; } }
  #title2-pan h1 {
    margin-top: 0;
    font-size: 2.4rem; }
    @media screen and (max-width: 768px) {
      #title2-pan h1 {
        font-size: 2.0rem; } }
    @media screen and (max-width: 480px) {
      #title2-pan h1 {
        font-size: 1.8rem; } }
  #title2-pan .sub-title {
    width: 1000px;
    margin: 0 auto;
    padding-left: 25px;
    font-size: 4.0rem;
    line-height: 1.4em;
    font-weight: 700; }
    @media screen and (max-width: 1100px) {
      #title2-pan .sub-title {
        width: 94%; } }
    @media screen and (max-width: 768px) {
      #title2-pan .sub-title {
        font-size: 3.0rem; } }
    @media screen and (max-width: 480px) {
      #title2-pan .sub-title {
        font-size: 2.4rem; } }
  #title2-pan .sub-nav {
    width: 1000px;
    margin: 20px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media screen and (max-width: 1100px) {
      #title2-pan .sub-nav {
        width: 94%; } }
    #title2-pan .sub-nav p {
      width: 31%;
      box-sizing: border-box;
      border: 2px solid #333333;
      border-top-left-radius: 50px;
      color: rgba(0, 0, 0, 0.5);
      font-size: 2.0rem;
      font-weight: 700;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #title2-pan .sub-nav p {
          width: 70%;
          margin-bottom: 10px;
          font-size: 1.8rem; } }
      @media screen and (max-width: 480px) {
        #title2-pan .sub-nav p {
          width: 80%;
          margin-bottom: 10px;
          font-size: 1.6rem; } }
      #title2-pan .sub-nav p a {
        display: inline-block;
        width: 100%;
        padding: 15px;
        color: rgba(255, 255, 255, 0.5);
        background-color: #000;
        border-top-left-radius: 50px; }
        @media screen and (max-width: 768px) {
          #title2-pan .sub-nav p a {
            padding: 10px 0; } }
        @media screen and (max-width: 480px) {
          #title2-pan .sub-nav p a {
            padding: 7px 0; } }
        #title2-pan .sub-nav p a:hover {
          color: #FFF;
          background-color: #CC0A14;
          border-top-left-radius: 50px; }
      #title2-pan .sub-nav p.active {
        background-color: #000;
        padding: 15px 0;
        color: #FFF;
        display: flex;
        justify-content: center; }
        @media screen and (max-width: 768px) {
          #title2-pan .sub-nav p.active {
            padding: 10px 0; } }
        @media screen and (max-width: 480px) {
          #title2-pan .sub-nav p.active {
            padding: 7px 0; } }
        #title2-pan .sub-nav p.active img {
          width: 20px;
          margin-right: 5px; }

#title3-pan {
  height: auto; }

h2 {
  font-size: 2.4rem;
  line-height: 1.6em;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1em; }
  @media screen and (max-width: 768px) {
    h2 {
      font-size: 2.2rem; } }
  @media screen and (max-width: 480px) {
    h2 {
      font-size: 2.0rem; } }
  h2.text-left {
    text-align: left; }
  h2.font-color {
    color: #CC0A14; }

.title-en {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #CC0A14;
  font-size: 5.0rem;
  line-height: 1.4em; }
  @media screen and (max-width: 768px) {
    .title-en {
      font-size: 4.0rem; } }
  @media screen and (max-width: 480px) {
    .title-en {
      font-size: 3.0rem; } }

h3 {
  font-weight: 700;
  margin-bottom: 1em; }

.inner {
  width: 1000px;
  margin: 0 auto; }
  @media screen and (max-width: 1100px) {
    .inner {
      width: 94%; } }

.box-gr {
  background-color: #F1F1F1; }

.mg-bottom {
  margin-bottom: 1em; }

/*メインビジュアル*/
.main-bj {
  /*height: 600px;*/
  position: relative;
  /*
    width: 100vw;
    height: 100vh;
  */
  /*
    display: flex;
    align-items: center;
    justify-content: center;
  */
  /*
    @include tbt {
    height: 400px;
    }
    @include sp {
      height: 300px;
    }
  */ }
  .main-bj .box {
    background-color: rgba(255, 255, 255, 0.93);
    border-top-right-radius: 30px;
    border-bottom: 5px solid #CC0A14;
    width: 600px;
    box-sizing: border-box;
    padding: 50px;
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 2; }
    @media screen and (max-width: 768px) {
      .main-bj .box {
        width: 80%;
        padding: 35px; } }
    @media screen and (max-width: 480px) {
      .main-bj .box {
        width: 85%;
        padding: 25px; } }
    .main-bj .box h1 {
      font-size: 2.4rem;
      line-height: 1.4em;
      font-weight: 700;
      margin-bottom: 10px; }
      @media screen and (max-width: 768px) {
        .main-bj .box h1 {
          font-size: 2.0rem; } }
      @media screen and (max-width: 480px) {
        .main-bj .box h1 {
          font-size: 1.8rem; } }
      .main-bj .box h1 span {
        font-size: 4.0rem;
        line-height: 1.2em; }
        @media screen and (max-width: 768px) {
          .main-bj .box h1 span {
            font-size: 3.0rem; } }
        @media screen and (max-width: 480px) {
          .main-bj .box h1 span {
            font-size: 2.4rem; } }
    .main-bj .box .title-en {
      text-align: left;
      font-weight: 700;
      font-size: 1.8rem; }
    .main-bj .box .logo-area {
      width: 200px;
      margin-top: 2em; }
  .main-bj ul {
    margin: 0;
    padding: 0;
    list-style: none; }

/*==================================================
スライダーのためのcss
===================================*/
.slider {
  position: relative;
  z-index: 1;
  /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  height: 60vh;
  /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/ }
  @media screen and (max-width: 768px) {
    .slider {
      height: 40vh; } }
  @media screen and (max-width: 480px) {
    .slider {
      height: 35vh; } }

/*　背景画像設定　*/
.slider-item01 {
  background: url(../images/main-bg1.webp); }

.slider-item02 {
  background: url(../images/main-bg.webp); }

.slider-item {
  width: 100%;
  /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
  height: 60vh;
  /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
  background-repeat: no-repeat;
  /*背景画像をリピートしない*/
  background-position: center;
  /*背景画像の位置を中央に*/
  background-size: cover;
  /*背景画像が.slider-item全体を覆い表示*/ }
  @media screen and (max-width: 768px) {
    .slider-item {
      height: 40vh; } }
  @media screen and (max-width: 480px) {
    .slider-item {
      height: 35vh; } }

.news {
  background-color: #F1F1F1;
  padding: 30px 3%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box; }
  .news .news-title {
    font-weight: 700;
    color: #CC0A14;
    font-size: 1.8rem;
    line-height: 1.4em;
    margin-right: 2em; }
  .news .news-kiji {
    font-size: 1.5rem; }

/*OEM ユニット*/
.index-oem, .index-unitparts {
  margin: 80px 0px;
  padding: 20px 0 50px; }
  @media screen and (max-width: 768px) {
    .index-oem, .index-unitparts {
      margin: 60px 0px;
      padding: 20px 0 30px; } }
  @media screen and (max-width: 480px) {
    .index-oem, .index-unitparts {
      margin: 40px 0px;
      padding: 15px 0 20px; } }
  .index-oem h2, .index-unitparts h2 {
    font-size: 3.0rem;
    line-height: 1.4em;
    margin-bottom: 0.5em;
    text-align: left; }
    @media screen and (max-width: 768px) {
      .index-oem h2, .index-unitparts h2 {
        font-size: 2.4rem; } }
    @media screen and (max-width: 480px) {
      .index-oem h2, .index-unitparts h2 {
        font-size: 1.8rem; } }
  .index-oem .inner, .index-unitparts .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  .index-oem .info-box, .index-unitparts .info-box {
    width: 45%; }
    @media screen and (max-width: 768px) {
      .index-oem .info-box, .index-unitparts .info-box {
        width: 100%; } }
  .index-oem .image, .index-unitparts .image {
    width: 48%; }
    @media screen and (max-width: 768px) {
      .index-oem .image, .index-unitparts .image {
        width: 90%;
        margin: 1em auto; } }
  .index-oem .btn-area, .index-unitparts .btn-area {
    margin-top: 2em;
    display: inline-block;
    font-weight: 700; }
    @media screen and (max-width: 768px) {
      .index-oem .btn-area, .index-unitparts .btn-area {
        margin-top: 1em; } }
    .index-oem .btn-area a, .index-unitparts .btn-area a {
      display: flex;
      align-items: center;
      color: #CC0A14; }
    .index-oem .btn-area img, .index-unitparts .btn-area img {
      width: 40px;
      margin-right: 10px; }
      @media screen and (max-width: 768px) {
        .index-oem .btn-area img, .index-unitparts .btn-area img {
          width: 30px; } }

.index-oem {
  background-image: url("../images/oem-bg1.png"), url("../images/oem-text.svg");
  background-size: 460px,600px;
  background-repeat: no-repeat;
  background-position: left top,right top;
  position: relative; }
  .index-oem::before {
    content: '';
    display: block;
    background: #F1F1F1;
    border-radius: 60px 0 0 60px;
    width: calc(75% + (50vw - 50%));
    height: 89%;
    position: absolute;
    right: calc(50% - 49.3vw);
    bottom: 0;
    z-index: -1;
    box-sizing: border-box; }
    @media screen and (max-width: 1100px) {
      .index-oem::before {
        right: calc(50% - 49.0vw); } }
    @media screen and (max-width: 768px) {
      .index-oem::before {
        display: none; } }
  @media screen and (max-width: 1100px) {
    .index-oem {
      background-size: 40%,600px; } }
  @media screen and (max-width: 768px) {
    .index-oem {
      background-image: url("../images/oem-bg1.png"), url("../images/oem-text.svg"), linear-gradient(180deg, #FFF 0%, #FFF 4%, #F1F1F1 4%, #F1F1F1 100%);
      background-size: 50%,50%,100%;
      border-bottom-left-radius: 60px; } }

.index-unitparts {
  background-image: url("../images/unit-bg1.png"), url("../images/unit-text.svg");
  background-size: 460px,600px;
  background-repeat: no-repeat;
  background-position: right bottom 30px,left bottom;
  position: relative; }
  .index-unitparts::before {
    content: '';
    display: block;
    background: #F1F1F1;
    border-radius: 0 60px 60px 0;
    width: calc(75% + (50vw - 50%));
    height: 89%;
    position: absolute;
    left: calc(50% - 49.3vw);
    bottom: 0;
    z-index: -1;
    box-sizing: border-box; }
    @media screen and (max-width: 768px) {
      .index-unitparts::before {
        display: none; } }
  @media screen and (max-width: 1100px) {
    .index-unitparts {
      background-size: 40%,600px; } }
  @media screen and (max-width: 768px) {
    .index-unitparts {
      background-image: url("../images/unit-bg1.png"), linear-gradient(180deg, #FFF 0%, #FFF 40px, #F1F1F1 40px, #F1F1F1 80%, #F1F1F1 80%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%), url("../images/unit-bg.svg");
      background-size: 50%,100%,100%;
      background-position: right bottom 30px,left bottom,left bottom;
      border-top-right-radius: 40px; } }

/*共同開発・OEM*/
#oem {
  margin-bottom: 80px; }
  @media screen and (max-width: 768px) {
    #oem {
      margin-bottom: 60px; } }
  @media screen and (max-width: 480px) {
    #oem {
      margin-bottom: 40px; } }
  #oem .circle {
    padding-top: 60px;
    background: url("../images/circle-half.svg");
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center top; }
    @media screen and (max-width: 768px) {
      #oem .circle {
        background-size: 80%;
        padding-top: 40px; } }
    @media screen and (max-width: 480px) {
      #oem .circle {
        background-size: 90%;
        padding-top: 30px; } }
  #oem .box-1, #oem .box-1-1 {
    background: linear-gradient(0deg, #FFF 0%, #FFF 30%, #F1F1F1 30%, #F1F1F1 100%);
    padding: 60px 0;
    margin-bottom: 50px; }
    @media screen and (max-width: 768px) {
      #oem .box-1, #oem .box-1-1 {
        margin-bottom: 30px;
        padding: 40px 0; } }
    @media screen and (max-width: 480px) {
      #oem .box-1, #oem .box-1-1 {
        margin-bottom: 20px;
        padding: 30px 0; } }
    #oem .box-1 h2 span, #oem .box-1-1 h2 span {
      font-size: 140%; }
      #oem .box-1 h2 span.red, #oem .box-1-1 h2 span.red {
        color: #CC0A14; }
    #oem .box-1 h2.f-col-bk, #oem .box-1-1 h2.f-col-bk {
      margin-bottom: 0; }
    #oem .box-1 .h2-subtext, #oem .box-1-1 .h2-subtext {
      font-size: 1.6em;
      font-weight: 700;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #oem .box-1 .h2-subtext, #oem .box-1-1 .h2-subtext {
          font-size: 1.4em; } }
      #oem .box-1 .h2-subtext span, #oem .box-1-1 .h2-subtext span {
        font-size: 140%; }
        #oem .box-1 .h2-subtext span.red, #oem .box-1-1 .h2-subtext span.red {
          color: #CC0A14; }
    #oem .box-1 ul.inner, #oem .box-1-1 ul.inner {
      width: 1000px;
      margin: 1em auto 0;
      display: flex;
      justify-content: space-between; }
      @media screen and (max-width: 1100px) {
        #oem .box-1 ul.inner, #oem .box-1-1 ul.inner {
          width: 94%; } }
      @media screen and (max-width: 768px) {
        #oem .box-1 ul.inner, #oem .box-1-1 ul.inner {
          flex-wrap: wrap; } }
      #oem .box-1 ul.inner li, #oem .box-1-1 ul.inner li {
        width: 31%;
        border-top: 2px solid #CC0A14;
        border-bottom: 2px solid #CC0A14;
        border-left: 1px solid #DCDCDC;
        border-right: 1px solid #DCDCDC;
        box-sizing: border-box;
        text-align: center;
        font-size: 2.0rem;
        font-weight: 700;
        padding: 2em 0.5em;
        background-color: #FFF; }
        @media screen and (max-width: 768px) {
          #oem .box-1 ul.inner li, #oem .box-1-1 ul.inner li {
            font-size: 1.8rem; } }
        @media screen and (max-width: 480px) {
          #oem .box-1 ul.inner li, #oem .box-1-1 ul.inner li {
            font-size: 2.0rem;
            width: 90%;
            margin: 0 auto 1em;
            padding: 1em 0.5em; } }
        #oem .box-1 ul.inner li.box-red, #oem .box-1-1 ul.inner li.box-red {
          background-color: #CC0A14;
          color: #FFF;
          border-radius: 6px;
          border: none; }
  #oem .box-1-1 {
    padding-top: 0; }
  #oem .box-2 {
    width: 1000px;
    margin: 0 auto 80px;
    text-align: center; }
    @media screen and (max-width: 1100px) {
      #oem .box-2 {
        width: 94%; } }
    @media screen and (max-width: 768px) {
      #oem .box-2 {
        margin: 0 auto 60px; } }
    @media screen and (max-width: 480px) {
      #oem .box-2 {
        margin: 0 auto 40px; } }
    #oem .box-2 h2 {
      color: #CC0A14; }
      #oem .box-2 h2 span {
        font-size: 140%; }
        #oem .box-2 h2 span.red {
          color: #CC0A14; }
      #oem .box-2 h2.f-col-bk {
        color: #222; }
    #oem .box-2 .picture {
      background-color: #F1F1F1;
      margin: 3em 0;
      padding: 2em 0; }
      @media screen and (max-width: 480px) {
        #oem .box-2 .picture {
          margin: 2em 0; } }
      #oem .box-2 .picture figcaption {
        font-weight: 700;
        font-size: 2.2rem; }
        @media screen and (max-width: 480px) {
          #oem .box-2 .picture figcaption {
            font-size: 2.0rem; } }
    #oem .box-2 .in-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #oem .box-2 .in-box div {
        width: 47%;
        text-align: justify;
        word-break: break-all; }
        @media screen and (max-width: 768px) {
          #oem .box-2 .in-box div {
            width: 100%;
            margin-bottom: 2em; }
            #oem .box-2 .in-box div:last-of-type {
              margin-bottom: 0; } }
        #oem .box-2 .in-box div h3 {
          font-size: 2.0rem;
          margin: 0.5em 0; }
        #oem .box-2 .in-box div img {
          border-radius: 20px;
          border: 2px solid #CC0A14; }
        #oem .box-2 .in-box div.in-box-l, #oem .box-2 .in-box div.in-box-r {
          width: 100%;
          border: 3px solid #DCDCDC;
          border-radius: 15px;
          display: flex;
          flex-wrap: wrap;
          align-items: center; }
          #oem .box-2 .in-box div.in-box-l .img-area, #oem .box-2 .in-box div.in-box-r .img-area {
            width: 40%; }
            @media screen and (max-width: 768px) {
              #oem .box-2 .in-box div.in-box-l .img-area, #oem .box-2 .in-box div.in-box-r .img-area {
                width: 100%;
                margin-bottom: 1em; } }
            #oem .box-2 .in-box div.in-box-l .img-area img, #oem .box-2 .in-box div.in-box-r .img-area img {
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
              border-top-left-radius: 12px;
              border-bottom-left-radius: 12px;
              border: none; }
              @media screen and (max-width: 768px) {
                #oem .box-2 .in-box div.in-box-l .img-area img, #oem .box-2 .in-box div.in-box-r .img-area img {
                  border-top-right-radius: 12px;
                  border-bottom-right-radius: 0;
                  border-top-left-radius: 12px;
                  border-bottom-left-radius: 0; } }
          #oem .box-2 .in-box div.in-box-l .info-area, #oem .box-2 .in-box div.in-box-r .info-area {
            width: 60%;
            box-sizing: border-box;
            padding: 1em 1.5em; }
            @media screen and (max-width: 768px) {
              #oem .box-2 .in-box div.in-box-l .info-area, #oem .box-2 .in-box div.in-box-r .info-area {
                width: 100%; } }
            #oem .box-2 .in-box div.in-box-l .info-area h3, #oem .box-2 .in-box div.in-box-r .info-area h3 {
              margin-top: 0;
              background-image: url("../images/title-arrow.svg");
              background-size: 16px;
              background-repeat: no-repeat;
              background-position: left 0.55em;
              padding-left: 20px; }
        #oem .box-2 .in-box div.in-box-l {
          margin: 1.5em 0;
          flex-direction: row-reverse; }
          #oem .box-2 .in-box div.in-box-l .img-area img {
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0; }
            @media screen and (max-width: 768px) {
              #oem .box-2 .in-box div.in-box-l .img-area img {
                border-top-right-radius: 12px;
                border-bottom-right-radius: 0;
                border-top-left-radius: 12px;
                border-bottom-left-radius: 0; } }
  #oem .box-3 {
    background: linear-gradient(0deg, #FFF 0%, #FFF 20%, #CC0A14 20%, #CC0A14 100%);
    padding: 80px 0; }
    @media screen and (max-width: 768px) {
      #oem .box-3 {
        padding: 60px 0; } }
    @media screen and (max-width: 480px) {
      #oem .box-3 {
        padding: 40px 0; } }
    #oem .box-3 .inner {
      width: 1000px;
      margin: 0 auto;
      text-align: justify; }
      @media screen and (max-width: 1100px) {
        #oem .box-3 .inner {
          width: 94%; } }
      #oem .box-3 .inner h2 {
        color: #FFF;
        text-align: left; }
      #oem .box-3 .inner .top-text {
        width: 700px;
        color: #FFF; }
        @media screen and (max-width: 768px) {
          #oem .box-3 .inner .top-text {
            width: 100%; } }
    #oem .box-3 .f-img {
      padding-left: 5%;
      margin-top: 80px; }
      @media screen and (max-width: 1100px) {
        #oem .box-3 .f-img {
          padding-left: 3%; } }
      @media screen and (max-width: 768px) {
        #oem .box-3 .f-img {
          margin-top: 40px; } }
      @media screen and (max-width: 480px) {
        #oem .box-3 .f-img {
          margin-top: 30px; } }
      #oem .box-3 .f-img img {
        width: 100%; }
  #oem .box-4 {
    width: 1000px;
    margin: 0 auto;
    text-align: justify; }
    @media screen and (max-width: 1100px) {
      #oem .box-4 {
        width: 94%; } }
    #oem .box-4 h2 {
      color: #CC0A14;
      text-align: left;
      margin-bottom: 0; }
    #oem .box-4 .top-text {
      width: 700px; }
      @media screen and (max-width: 768px) {
        #oem .box-4 .top-text {
          width: 100%; } }
    #oem .box-4 .sub-text {
      font-size: 3.4rem;
      margin-bottom: 0.6em;
      font-weight: 700; }
      @media screen and (max-width: 768px) {
        #oem .box-4 .sub-text {
          font-size: 2.8rem; } }
      @media screen and (max-width: 480px) {
        #oem .box-4 .sub-text {
          font-size: 2.4rem;
          line-height: 1.6em; } }
    #oem .box-4 .sub-title {
      font-weight: 700;
      font-size: 2.0rem;
      background-image: url("../images/title-arrow.svg");
      background-size: 18px;
      background-repeat: no-repeat;
      background-position: left 0.45em;
      padding-left: 22px; }
  #oem .box-5 {
    width: 1000px;
    margin: 80px auto 0;
    text-align: justify; }
    @media screen and (max-width: 1100px) {
      #oem .box-5 {
        width: 94%; } }
    #oem .box-5 .inner {
      margin-left: 100px;
      width: 900px;
      margin-bottom: 50px; }
      @media screen and (max-width: 1100px) {
        #oem .box-5 .inner {
          margin: 0 auto 50px;
          width: 100%; } }
      @media screen and (max-width: 768px) {
        #oem .box-5 .inner {
          margin: 0 auto 40px; } }
      #oem .box-5 .inner h3 {
        font-size: 3.0rem;
        color: #CC0A14;
        margin-bottom: 20px;
        line-height: 1.6em;
        background-image: none; }
        @media screen and (max-width: 768px) {
          #oem .box-5 .inner h3 {
            font-size: 2.4rem; } }
        @media screen and (max-width: 480px) {
          #oem .box-5 .inner h3 {
            font-size: 1.8rem; } }
        #oem .box-5 .inner h3.h3-line-l {
          display: inline-block;
          position: relative;
          padding: 20px 0 0 240px;
          color: #CC0A14; }
          @media screen and (max-width: 1100px) {
            #oem .box-5 .inner h3.h3-line-l {
              padding: 15px 0 0 240px; } }
          @media screen and (max-width: 768px) {
            #oem .box-5 .inner h3.h3-line-l {
              padding: 20px 0 0 25%; } }
          @media screen and (max-width: 480px) {
            #oem .box-5 .inner h3.h3-line-l {
              padding: 10px 0 0 33%; } }
          #oem .box-5 .inner h3.h3-line-l::before {
            content: '';
            display: inline-block;
            position: absolute;
            bottom: 0%;
            left: 160px;
            width: 740px;
            height: 1px;
            background-color: #CC0A14; }
            @media screen and (max-width: 1100px) {
              #oem .box-5 .inner h3.h3-line-l::before {
                width: 65vw; } }
            @media screen and (max-width: 768px) {
              #oem .box-5 .inner h3.h3-line-l::before {
                left: 20%;
                width: 80vw; } }
            @media screen and (max-width: 480px) {
              #oem .box-5 .inner h3.h3-line-l::before {
                left: 25%; } }
      #oem .box-5 .inner.no1, #oem .box-5 .inner.no2, #oem .box-5 .inner.no3, #oem .box-5 .inner.no4 {
        position: relative;
        background-size: 100px;
        background-repeat: no-repeat;
        background-position: left top; }
        @media screen and (max-width: 768px) {
          #oem .box-5 .inner.no1, #oem .box-5 .inner.no2, #oem .box-5 .inner.no3, #oem .box-5 .inner.no4 {
            background-size: 10%; } }
        #oem .box-5 .inner.no1 .image, #oem .box-5 .inner.no2 .image, #oem .box-5 .inner.no3 .image, #oem .box-5 .inner.no4 .image {
          position: absolute;
          top: 0;
          left: 0;
          width: 200px;
          box-sizing: border-box;
          z-index: 1;
          padding: 30px 0 0 30px; }
          @media screen and (max-width: 1100px) {
            #oem .box-5 .inner.no1 .image, #oem .box-5 .inner.no2 .image, #oem .box-5 .inner.no3 .image, #oem .box-5 .inner.no4 .image {
              padding: 30px 0 0 0; } }
          @media screen and (max-width: 768px) {
            #oem .box-5 .inner.no1 .image, #oem .box-5 .inner.no2 .image, #oem .box-5 .inner.no3 .image, #oem .box-5 .inner.no4 .image {
              width: 24%;
              padding: 20px 0 0 0; } }
          @media screen and (max-width: 480px) {
            #oem .box-5 .inner.no1 .image, #oem .box-5 .inner.no2 .image, #oem .box-5 .inner.no3 .image, #oem .box-5 .inner.no4 .image {
              width: 30%;
              padding: 15px 0 0 0; } }
          #oem .box-5 .inner.no1 .image img, #oem .box-5 .inner.no2 .image img, #oem .box-5 .inner.no3 .image img, #oem .box-5 .inner.no4 .image img {
            border: 2px solid #CC0A14;
            border-radius: 100%;
            box-sizing: border-box;
            background-color: #FFF; }
        #oem .box-5 .inner.no1 .box-in, #oem .box-5 .inner.no2 .box-in, #oem .box-5 .inner.no3 .box-in, #oem .box-5 .inner.no4 .box-in {
          top: 5%;
          box-sizing: border-box;
          width: inherit; }
          #oem .box-5 .inner.no1 .box-in .box-in-box, #oem .box-5 .inner.no2 .box-in .box-in-box, #oem .box-5 .inner.no3 .box-in .box-in-box, #oem .box-5 .inner.no4 .box-in .box-in-box {
            padding-left: 240px;
            margin-top: 1.5em;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; }
            @media screen and (max-width: 768px) {
              #oem .box-5 .inner.no1 .box-in .box-in-box, #oem .box-5 .inner.no2 .box-in .box-in-box, #oem .box-5 .inner.no3 .box-in .box-in-box, #oem .box-5 .inner.no4 .box-in .box-in-box {
                padding-left: 27%; } }
            @media screen and (max-width: 480px) {
              #oem .box-5 .inner.no1 .box-in .box-in-box, #oem .box-5 .inner.no2 .box-in .box-in-box, #oem .box-5 .inner.no3 .box-in .box-in-box, #oem .box-5 .inner.no4 .box-in .box-in-box {
                padding-left: 33%; } }
            #oem .box-5 .inner.no1 .box-in .box-in-box p, #oem .box-5 .inner.no2 .box-in .box-in-box p, #oem .box-5 .inner.no3 .box-in .box-in-box p, #oem .box-5 .inner.no4 .box-in .box-in-box p {
              padding-left: 0; }
            #oem .box-5 .inner.no1 .box-in .box-in-box .box-in-box-box, #oem .box-5 .inner.no2 .box-in .box-in-box .box-in-box-box, #oem .box-5 .inner.no3 .box-in .box-in-box .box-in-box-box, #oem .box-5 .inner.no4 .box-in .box-in-box .box-in-box-box {
              width: 48%;
              font-size: 1.6rem;
              box-sizing: border-box;
              padding: 1em;
              border: 1px solid #AAAAAA;
              border-radius: 20px; }
              @media screen and (max-width: 768px) {
                #oem .box-5 .inner.no1 .box-in .box-in-box .box-in-box-box, #oem .box-5 .inner.no2 .box-in .box-in-box .box-in-box-box, #oem .box-5 .inner.no3 .box-in .box-in-box .box-in-box-box, #oem .box-5 .inner.no4 .box-in .box-in-box .box-in-box-box {
                  width: 100%; } }
              #oem .box-5 .inner.no1 .box-in .box-in-box .box-in-box-box .s-title, #oem .box-5 .inner.no2 .box-in .box-in-box .box-in-box-box .s-title, #oem .box-5 .inner.no3 .box-in .box-in-box .box-in-box-box .s-title, #oem .box-5 .inner.no4 .box-in .box-in-box .box-in-box-box .s-title {
                text-align: center;
                margin-top: -2.0em; }
                #oem .box-5 .inner.no1 .box-in .box-in-box .box-in-box-box .s-title span, #oem .box-5 .inner.no2 .box-in .box-in-box .box-in-box-box .s-title span, #oem .box-5 .inner.no3 .box-in .box-in-box .box-in-box-box .s-title span, #oem .box-5 .inner.no4 .box-in .box-in-box .box-in-box-box .s-title span {
                  background-color: #F1F1F1;
                  font-weight: 700;
                  padding: 2px 15px; }
            #oem .box-5 .inner.no1 .box-in .box-in-box .movie, #oem .box-5 .inner.no2 .box-in .box-in-box .movie, #oem .box-5 .inner.no3 .box-in .box-in-box .movie, #oem .box-5 .inner.no4 .box-in .box-in-box .movie {
              width: 48%; }
              @media screen and (max-width: 768px) {
                #oem .box-5 .inner.no1 .box-in .box-in-box .movie, #oem .box-5 .inner.no2 .box-in .box-in-box .movie, #oem .box-5 .inner.no3 .box-in .box-in-box .movie, #oem .box-5 .inner.no4 .box-in .box-in-box .movie {
                  width: 100%;
                  margin-top: 1em; } }
        #oem .box-5 .inner.no1 .box-in, #oem .box-5 .inner.no2 .box-in, #oem .box-5 .inner.no3 .box-in, #oem .box-5 .inner.no4 .box-in {
          left: 0%; }
          #oem .box-5 .inner.no1 .box-in p, #oem .box-5 .inner.no2 .box-in p, #oem .box-5 .inner.no3 .box-in p, #oem .box-5 .inner.no4 .box-in p {
            padding-left: 240px;
            text-align: justify;
            margin-bottom: 0.6em; }
            @media screen and (max-width: 768px) {
              #oem .box-5 .inner.no1 .box-in p, #oem .box-5 .inner.no2 .box-in p, #oem .box-5 .inner.no3 .box-in p, #oem .box-5 .inner.no4 .box-in p {
                padding-left: 27%; } }
            @media screen and (max-width: 480px) {
              #oem .box-5 .inner.no1 .box-in p, #oem .box-5 .inner.no2 .box-in p, #oem .box-5 .inner.no3 .box-in p, #oem .box-5 .inner.no4 .box-in p {
                padding-left: 33%; } }
            #oem .box-5 .inner.no1 .box-in p .sub-t, #oem .box-5 .inner.no2 .box-in p .sub-t, #oem .box-5 .inner.no3 .box-in p .sub-t, #oem .box-5 .inner.no4 .box-in p .sub-t {
              font-weight: 700;
              background-image: linear-gradient(transparent 60%, #FFFBD2 60%); }
      #oem .box-5 .inner.no1 {
        background-image: url("../images/flow01.svg"); }
      #oem .box-5 .inner.no2 {
        background-image: url("../images/flow02.svg"); }
      #oem .box-5 .inner.no3 {
        background-image: url("../images/flow03.svg"); }
      #oem .box-5 .inner.no4 {
        background-image: url("../images/flow04.svg"); }

/*強み*/
.index-strength {
  padding: 80px 0px;
  background-image: url("../images/strength-bg.svg");
  background-attachment: fixed;
  background-size: 80%;
  background-position: right top 400px;
  background-repeat: no-repeat; }
  @media screen and (max-width: 768px) {
    .index-strength {
      padding: 60px 0; } }
  @media screen and (max-width: 480px) {
    .index-strength {
      padding: 40px 0; } }
  .index-strength h3 {
    font-size: 3.0rem;
    color: #CC0A14;
    margin-bottom: 10px;
    line-height: 1.6em; }
    @media screen and (max-width: 768px) {
      .index-strength h3 {
        font-size: 2.4rem; } }
    @media screen and (max-width: 480px) {
      .index-strength h3 {
        font-size: 1.8rem; } }
    .index-strength h3.h3-line-l {
      display: inline-block;
      position: relative;
      padding: 0 0 0 40%;
      color: #CC0A14; }
      @media screen and (max-width: 768px) {
        .index-strength h3.h3-line-l {
          padding: 0 0 0 37%; } }
      .index-strength h3.h3-line-l::before {
        content: '';
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 49%;
        width: 10%;
        height: 2px;
        background-color: #CC0A14; }
        @media screen and (max-width: 1100px) {
          .index-strength h3.h3-line-l::before {
            left: 28vw;
            width: 5vw; } }
        @media screen and (max-width: 768px) {
          .index-strength h3.h3-line-l::before {
            left: 24vw;
            width: 7vw; } }
        @media screen and (max-width: 480px) {
          .index-strength h3.h3-line-l::before {
            left: 22vw;
            width: 8vw; } }
    .index-strength h3.h3-line-r {
      display: inline-block;
      position: relative;
      padding: 0 20% 0 25%;
      color: #CC0A14; }
      @media screen and (max-width: 768px) {
        .index-strength h3.h3-line-r {
          padding: 0 30% 0 12%; } }
      .index-strength h3.h3-line-r::after {
        content: '';
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 0;
        width: 23%;
        height: 2px;
        background-color: #CC0A14; }
        @media screen and (max-width: 768px) {
          .index-strength h3.h3-line-r::after {
            width: 27%; } }
  .index-strength .inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative; }
    .index-strength .inner.se-box {
      flex-direction: row-reverse; }
    .index-strength .inner.height:before {
      content: "";
      display: block;
      padding-top: 35%; }
  .index-strength .box-1, .index-strength .box-2, .index-strength .box-3 {
    width: 1050px;
    margin: 50px auto 0;
    background-size: 100px;
    background-repeat: no-repeat; }
    @media screen and (max-width: 1100px) {
      .index-strength .box-1, .index-strength .box-2, .index-strength .box-3 {
        width: 100%;
        background-size: 10%; } }
    .index-strength .box-1 .image, .index-strength .box-1 .image-2, .index-strength .box-2 .image, .index-strength .box-2 .image-2, .index-strength .box-3 .image, .index-strength .box-3 .image-2 {
      position: absolute;
      top: 0;
      width: 35%;
      box-sizing: border-box;
      z-index: 1; }
      @media screen and (max-width: 1100px) {
        .index-strength .box-1 .image, .index-strength .box-1 .image-2, .index-strength .box-2 .image, .index-strength .box-2 .image-2, .index-strength .box-3 .image, .index-strength .box-3 .image-2 {
          width: 32%; } }
      .index-strength .box-1 .image img, .index-strength .box-1 .image-2 img, .index-strength .box-2 .image img, .index-strength .box-2 .image-2 img, .index-strength .box-3 .image img, .index-strength .box-3 .image-2 img {
        border: 2px solid #CC0A14;
        border-radius: 100%;
        box-sizing: border-box; }
    .index-strength .box-1 .image, .index-strength .box-2 .image, .index-strength .box-3 .image {
      left: 0; }
    .index-strength .box-1 .image-2, .index-strength .box-2 .image-2, .index-strength .box-3 .image-2 {
      right: 0; }
    .index-strength .box-1 .box-in, .index-strength .box-1 .box-in2, .index-strength .box-2 .box-in, .index-strength .box-2 .box-in2, .index-strength .box-3 .box-in, .index-strength .box-3 .box-in2 {
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      box-sizing: border-box;
      /*white-space: nowrap;*/
      width: inherit; }
    .index-strength .box-1 .box-in, .index-strength .box-2 .box-in, .index-strength .box-3 .box-in {
      left: 0%; }
      .index-strength .box-1 .box-in p, .index-strength .box-2 .box-in p, .index-strength .box-3 .box-in p {
        padding-left: 40%;
        line-height: 1.4em;
        text-align: justify; }
        @media screen and (max-width: 768px) {
          .index-strength .box-1 .box-in p, .index-strength .box-2 .box-in p, .index-strength .box-3 .box-in p {
            padding-left: 37%; } }
    .index-strength .box-1 .box-in2, .index-strength .box-2 .box-in2, .index-strength .box-3 .box-in2 {
      left: 0%; }
      .index-strength .box-1 .box-in2 p, .index-strength .box-2 .box-in2 p, .index-strength .box-3 .box-in2 p {
        padding-left: 25%;
        padding-right: 37%;
        line-height: 1.4em; }
        @media screen and (max-width: 768px) {
          .index-strength .box-1 .box-in2 p, .index-strength .box-2 .box-in2 p, .index-strength .box-3 .box-in2 p {
            padding-left: 12%;
            padding-right: 33%;
            box-sizing: border-box; } }
  .index-strength .box-1 {
    background-image: url("../images/strength-1.svg");
    background-position: left top; }
  .index-strength .box-3 {
    background-image: url("../images/strength-3.svg");
    background-position: left top; }
  .index-strength .box-2 {
    background-image: url("../images/strength-2.svg");
    background-position: right top; }
  .index-strength .btn-area {
    margin-top: 2em;
    display: inline-block;
    font-weight: 700; }
    @media screen and (max-width: 768px) {
      .index-strength .btn-area {
        margin-top: 1em; } }
    .index-strength .btn-area a {
      display: flex;
      align-items: center;
      color: #CC0A14; }
    .index-strength .btn-area img {
      width: 40px;
      margin-right: 10px; }
      @media screen and (max-width: 768px) {
        .index-strength .btn-area img {
          width: 30px; } }

/*ものづくり-index*/
.index-monozukuri {
  background-image: url("../images/monozukuri-p.webp"), url("../images/monozukuri-bg.webp");
  background-size: contain,cover;
  background-repeat: no-repeat;
  background-position: right top , center center;
  padding: 40px 0; }
  @media screen and (max-width: 1100px) {
    .index-monozukuri {
      padding: 35px 0 80vw;
      background-image: url("../images/monozukuri-p-sp.webp"), url("../images/monozukuri-bg.webp");
      background-size: 100%,cover;
      background-repeat: no-repeat;
      background-position: right bottom , center center; } }
  @media screen and (max-width: 768px) {
    .index-monozukuri {
      padding: 30px 0 80vw; } }
  @media screen and (max-width: 480px) {
    .index-monozukuri {
      padding: 25px 0 80vw; } }
  .index-monozukuri .inner-box {
    width: 55%;
    text-align: center;
    color: #FFF;
    font-weight: 700; }
    @media screen and (max-width: 1100px) {
      .index-monozukuri .inner-box {
        width: 90%;
        margin: 0 auto; } }
    .index-monozukuri .inner-box .title-sub {
      font-size: 2.4rem;
      position: relative;
      padding: .5em .7em .4em;
      border-bottom: 2px solid #FFF;
      margin-bottom: 10px; }
      @media screen and (max-width: 768px) {
        .index-monozukuri .inner-box .title-sub {
          font-size: 2.0rem; } }
      @media screen and (max-width: 480px) {
        .index-monozukuri .inner-box .title-sub {
          font-size: 1.8rem; } }
      .index-monozukuri .inner-box .title-sub::before, .index-monozukuri .inner-box .title-sub::after {
        position: absolute;
        left: 50%;
        bottom: -15px;
        width: 30px;
        height: 15px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        content: ''; }
      .index-monozukuri .inner-box .title-sub::before {
        background-color: #FFF; }
      .index-monozukuri .inner-box .title-sub::after {
        bottom: -11px;
        background-color: #CC0A14; }
    .index-monozukuri .inner-box .title {
      font-size: 3.0rem; }
      @media screen and (max-width: 768px) {
        .index-monozukuri .inner-box .title {
          font-size: 2.4rem; } }
      @media screen and (max-width: 480px) {
        .index-monozukuri .inner-box .title {
          font-size: 2.0rem; } }
    .index-monozukuri .inner-box .btn-area {
      margin-top: 1em;
      font-weight: 700; }
      .index-monozukuri .inner-box .btn-area a {
        display: flex;
        justify-content: center;
        align-items: center; }
      .index-monozukuri .inner-box .btn-area img {
        width: 40px;
        margin-right: 10px; }

/*事例-index*/
.index-example {
  padding: 80px 0; }
  @media screen and (max-width: 768px) {
    .index-example {
      padding: 60px 0; } }
  @media screen and (max-width: 480px) {
    .index-example {
      padding: 40px 0; } }
  .index-example a {
    display: block; }
  .index-example .example-box {
    display: flex;
    flex-wrap: wrap; }
    .index-example .example-box .box {
      width: 32%;
      margin-bottom: 1.5em;
      margin-right: 2%;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px; }
      .index-example .example-box .box:nth-child(3n) {
        margin-right: 0; }
      @media screen and (max-width: 768px) {
        .index-example .example-box .box {
          width: 48%;
          margin-right: 4%; }
          .index-example .example-box .box:nth-child(3n) {
            margin-right: 4%; }
          .index-example .example-box .box:nth-child(2n) {
            margin-right: 0; } }
      @media screen and (max-width: 480px) {
        .index-example .example-box .box {
          width: 100%;
          margin-right: 0; }
          .index-example .example-box .box:nth-child(3n) {
            margin-right: 0; } }
      .index-example .example-box .box div {
        background-color: #FFF;
        padding: 10px 1em; }
        .index-example .example-box .box div .date {
          font-size: 1.4rem;
          color: #888888; }
        .index-example .example-box .box div .kiji-title {
          font-weight: 700;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; }
      .index-example .example-box .box figure {
        overflow: hidden; }
        .index-example .example-box .box figure img {
          border-top-left-radius: 30px;
          border-top-right-radius: 30px;
          height: auto;
          object-fit: cover;
          object-position: center;
          display: block;
          transition-duration: 0.2s;
          height: 200px; }
      .index-example .example-box .box a:hover img {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        opacity: 0.8;
        transform: scale(1.2);
        transition-duration: 0.6s; }

/*バナー-index*/
.bnr-area {
  width: 100%;
  margin: 80px auto;
  /*
    @include tby {
      width: 94%;
    }
    @include tbt {
      margin: 60px auto ;
      justify-content: flex-start;
    }
    @include sp {
      margin: 40px auto ;
      justify-content: space-between;
    }
  */ }
  .bnr-area h3 {
    width: 100%;
    font-size: 3.2rem;
    text-align: center; }
    @media screen and (max-width: 768px) {
      .bnr-area h3 {
        font-size: 2.8rem; } }
    @media screen and (max-width: 480px) {
      .bnr-area h3 {
        font-size: 2.4rem; } }
  .bnr-area figure img {
    display: block;
    height: auto; }
  .bnr-area .bnrarea {
    width: 100%;
    height: auto; }

/*お問い合わせ*/
#contact {
  /*background-image: linear-gradient(0deg, #F5FAFF, #BADCFF);*/
  background-color: #F2F2F2; }
  #contact .text-center {
    text-align: center; }
    @media screen and (max-width: 480px) {
      #contact .text-center {
        text-align: justify;
        padding: 0 3%; } }
  #contact .tel {
    width: 500px;
    margin: 1em auto; }
    @media screen and (max-width: 768px) {
      #contact .tel {
        width: 85%; } }
    @media screen and (max-width: 480px) {
      #contact .tel {
        width: 90%; } }

@keyframes mvFadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(40px); }
  to {
    opacity: 1;
    transform: translateY(0);
    text-align: right;
    font-size: 14px;
    margin-top: 10px; } }
/*仁張のものづくり思想*/
#thought {
  background-image: url("../images/thought-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right top;
  padding-bottom: 150px;
  margin-bottom: -60px;
  padding-top: 80px; }
  @media screen and (max-width: 768px) {
    #thought {
      padding-bottom: 180px;
      background-position: center top;
      margin-bottom: -120px;
      padding-top: 60px; } }
  @media screen and (max-width: 480px) {
    #thought {
      padding-bottom: 160px;
      padding-top: 40px; } }
  #thought .text {
    width: 50%; }
    @media screen and (max-width: 768px) {
      #thought .text {
        width: 80%; } }
    @media screen and (max-width: 480px) {
      #thought .text {
        width: 100%; } }

/*仁張のものづくり 開発･設計デザイン*/
#design {
  margin-bottom: 120px; }
  @media screen and (max-width: 768px) {
    #design {
      margin-bottom: 90px; } }
  @media screen and (max-width: 480px) {
    #design {
      margin-bottom: 60px; } }
  #design .box-img-l, #design .box-img-r {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 80px; }
    @media screen and (max-width: 768px) {
      #design .box-img-l, #design .box-img-r {
        margin-top: 60px; } }
    @media screen and (max-width: 480px) {
      #design .box-img-l, #design .box-img-r {
        margin-top: 40px; } }
    #design .box-img-l figure, #design .box-img-r figure {
      width: 30%; }
      @media screen and (max-width: 768px) {
        #design .box-img-l figure, #design .box-img-r figure {
          width: 50%; } }
      #design .box-img-l figure img, #design .box-img-r figure img {
        border-radius: 15px;
        border: 2px solid #CC0A14; }
    #design .box-img-l .in-box, #design .box-img-r .in-box {
      width: 65%; }
      @media screen and (max-width: 768px) {
        #design .box-img-l .in-box, #design .box-img-r .in-box {
          width: 100%;
          margin-top: 1em; } }
    #design .box-img-l .number, #design .box-img-r .number {
      font-size: 6.4rem;
      line-height: 1.0em;
      color: rgba(204, 10, 20, 0.2);
      font-family: 'Montserrat', sans-serif;
      font-weight: 900; }
      @media screen and (max-width: 768px) {
        #design .box-img-l .number, #design .box-img-r .number {
          font-size: 5.4rem; } }
  #design .box-img-r {
    flex-direction: row-reverse; }
    @media screen and (max-width: 768px) {
      #design .box-img-r {
        flex-direction: row; } }
  #design .sub-title {
    text-align: center;
    margin-bottom: 1em; }
    #design .sub-title span {
      padding: 8px 1.5em 10px;
      background-color: #CC0A14;
      color: #FFF;
      font-size: 2.2rem;
      border-radius: 30px; }
      @media screen and (max-width: 768px) {
        #design .sub-title span {
          font-size: 2.0rem; } }
      @media screen and (max-width: 480px) {
        #design .sub-title span {
          font-size: 1.8rem; } }
  #design h3 {
    font-size: 2.4rem;
    background-image: url("../images/title-arrow.svg");
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: left top 14px;
    font-weight: 700;
    padding-left: 22px;
    margin-bottom: 0.4em; }
    @media screen and (max-width: 768px) {
      #design h3 {
        font-size: 2.2rem; } }
    @media screen and (max-width: 480px) {
      #design h3 {
        font-size: 2.0rem; } }
  #design .box-1 {
    background: linear-gradient(0deg, #F1F1F1 0%, #F1F1F1 80%, #FFF 80%, #FFF 100%);
    margin-bottom: 100px;
    padding-bottom: 100px; }
    @media screen and (max-width: 768px) {
      #design .box-1 {
        margin-bottom: 80px;
        padding-bottom: 80px; } }
    @media screen and (max-width: 480px) {
      #design .box-1 {
        margin-bottom: 60px;
        padding-bottom: 60px; } }
  #design .box-2 {
    background: linear-gradient(0deg, #F1F1F1 0%, #F1F1F1 95%, #FFF 95%, #FFF 100%);
    margin-bottom: 100px;
    padding-bottom: 100px;
    position: relative; }
    @media screen and (max-width: 768px) {
      #design .box-2 {
        margin-bottom: 80px;
        padding-bottom: 80px; } }
    @media screen and (max-width: 480px) {
      #design .box-2 {
        margin-bottom: 60px;
        padding-bottom: 60px; } }
    #design .box-2::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 95%;
      width: 5%;
      height: 95%;
      background: #FFF;
      box-sizing: border-box; }
      @media screen and (max-width: 768px) {
        #design .box-2::before {
          left: 98%;
          width: 2%; } }
  #design .top-text {
    width: 760px;
    margin: 0 auto; }
    @media screen and (max-width: 1100px) {
      #design .top-text {
        width: 100%; } }
  #design .flow-box {
    background: linear-gradient(90deg, #F1F1F1 0%, #F1F1F1 95%, #FFF 95%, #FFF 100%);
    margin-top: 100px;
    padding-top: 100px;
    padding-bottom: 70px; }
    @media screen and (max-width: 768px) {
      #design .flow-box {
        background: linear-gradient(90deg, #F1F1F1 0%, #F1F1F1 100%);
        margin-top: 80px;
        padding-top: 80px;
        padding-bottom: 50px; } }
    @media screen and (max-width: 480px) {
      #design .flow-box {
        margin-top: 60px;
        padding-top: 60px;
        padding-bottom: 40px; } }
    #design .flow-box h3 {
      font-size: 3.0rem;
      color: #CC0A14;
      margin-bottom: 20px;
      line-height: 1.6em;
      background-image: none; }
      @media screen and (max-width: 768px) {
        #design .flow-box h3 {
          font-size: 2.4rem; } }
      @media screen and (max-width: 480px) {
        #design .flow-box h3 {
          font-size: 1.8rem; } }
      #design .flow-box h3.h3-line-l {
        display: inline-block;
        position: relative;
        padding: 0 0 0 240px;
        color: #CC0A14; }
        @media screen and (max-width: 1100px) {
          #design .flow-box h3.h3-line-l {
            padding: 10px 0 0 240px; } }
        @media screen and (max-width: 768px) {
          #design .flow-box h3.h3-line-l {
            padding: 20px 0 0 25%; } }
        @media screen and (max-width: 480px) {
          #design .flow-box h3.h3-line-l {
            padding: 10px 0 0 33%; } }
        #design .flow-box h3.h3-line-l::before {
          content: '';
          display: inline-block;
          position: absolute;
          bottom: 0%;
          left: 160px;
          width: 740px;
          height: 1px;
          background-color: #CC0A14; }
          @media screen and (max-width: 1100px) {
            #design .flow-box h3.h3-line-l::before {
              width: 65vw; } }
          @media screen and (max-width: 768px) {
            #design .flow-box h3.h3-line-l::before {
              left: 20%;
              width: 80vw; } }
          @media screen and (max-width: 480px) {
            #design .flow-box h3.h3-line-l::before {
              left: 25%; } }
    #design .flow-box .box-1, #design .flow-box .box-2, #design .flow-box .box-3, #design .flow-box .box-4, #design .flow-box .box-5, #design .flow-box .box-6, #design .flow-box .box-7, #design .flow-box .box-8, #design .flow-box .box-9 {
      width: 1000px;
      margin: 0 auto 80px;
      background-size: 100px;
      background-repeat: no-repeat;
      display: flex;
      flex-wrap: wrap;
      background-position: left top;
      padding-bottom: 0;
      /*align-items: center;*/ }
      @media screen and (max-width: 1100px) {
        #design .flow-box .box-1, #design .flow-box .box-2, #design .flow-box .box-3, #design .flow-box .box-4, #design .flow-box .box-5, #design .flow-box .box-6, #design .flow-box .box-7, #design .flow-box .box-8, #design .flow-box .box-9 {
          width: 94%; } }
      @media screen and (max-width: 768px) {
        #design .flow-box .box-1, #design .flow-box .box-2, #design .flow-box .box-3, #design .flow-box .box-4, #design .flow-box .box-5, #design .flow-box .box-6, #design .flow-box .box-7, #design .flow-box .box-8, #design .flow-box .box-9 {
          width: 94%;
          background-size: 10%;
          margin: 0 auto 40px; } }
      #design .flow-box .box-1.se-box, #design .flow-box .box-2.se-box, #design .flow-box .box-3.se-box, #design .flow-box .box-4.se-box, #design .flow-box .box-5.se-box, #design .flow-box .box-6.se-box, #design .flow-box .box-7.se-box, #design .flow-box .box-8.se-box, #design .flow-box .box-9.se-box {
        flex-direction: row-reverse; }
      #design .flow-box .box-1 .inner, #design .flow-box .box-2 .inner, #design .flow-box .box-3 .inner, #design .flow-box .box-4 .inner, #design .flow-box .box-5 .inner, #design .flow-box .box-6 .inner, #design .flow-box .box-7 .inner, #design .flow-box .box-8 .inner, #design .flow-box .box-9 .inner {
        width: 900px;
        margin: 0;
        position: relative; }
        @media screen and (max-width: 1100px) {
          #design .flow-box .box-1 .inner, #design .flow-box .box-2 .inner, #design .flow-box .box-3 .inner, #design .flow-box .box-4 .inner, #design .flow-box .box-5 .inner, #design .flow-box .box-6 .inner, #design .flow-box .box-7 .inner, #design .flow-box .box-8 .inner, #design .flow-box .box-9 .inner {
            width: 95%; } }
        @media screen and (max-width: 768px) {
          #design .flow-box .box-1 .inner, #design .flow-box .box-2 .inner, #design .flow-box .box-3 .inner, #design .flow-box .box-4 .inner, #design .flow-box .box-5 .inner, #design .flow-box .box-6 .inner, #design .flow-box .box-7 .inner, #design .flow-box .box-8 .inner, #design .flow-box .box-9 .inner {
            width: 100%; } }
        #design .flow-box .box-1 .inner .image, #design .flow-box .box-2 .inner .image, #design .flow-box .box-3 .inner .image, #design .flow-box .box-4 .inner .image, #design .flow-box .box-5 .inner .image, #design .flow-box .box-6 .inner .image, #design .flow-box .box-7 .inner .image, #design .flow-box .box-8 .inner .image, #design .flow-box .box-9 .inner .image {
          position: absolute;
          top: 0;
          left: 0;
          width: 200px;
          box-sizing: border-box;
          z-index: 1;
          padding: 30px 0 0 30px; }
          @media screen and (max-width: 1100px) {
            #design .flow-box .box-1 .inner .image, #design .flow-box .box-2 .inner .image, #design .flow-box .box-3 .inner .image, #design .flow-box .box-4 .inner .image, #design .flow-box .box-5 .inner .image, #design .flow-box .box-6 .inner .image, #design .flow-box .box-7 .inner .image, #design .flow-box .box-8 .inner .image, #design .flow-box .box-9 .inner .image {
              padding: 30px 0 0 0; } }
          @media screen and (max-width: 768px) {
            #design .flow-box .box-1 .inner .image, #design .flow-box .box-2 .inner .image, #design .flow-box .box-3 .inner .image, #design .flow-box .box-4 .inner .image, #design .flow-box .box-5 .inner .image, #design .flow-box .box-6 .inner .image, #design .flow-box .box-7 .inner .image, #design .flow-box .box-8 .inner .image, #design .flow-box .box-9 .inner .image {
              width: 24%;
              padding: 24px 0 0 0; } }
          @media screen and (max-width: 480px) {
            #design .flow-box .box-1 .inner .image, #design .flow-box .box-2 .inner .image, #design .flow-box .box-3 .inner .image, #design .flow-box .box-4 .inner .image, #design .flow-box .box-5 .inner .image, #design .flow-box .box-6 .inner .image, #design .flow-box .box-7 .inner .image, #design .flow-box .box-8 .inner .image, #design .flow-box .box-9 .inner .image {
              width: 30%;
              padding: 15px 0 0 0; } }
          #design .flow-box .box-1 .inner .image img, #design .flow-box .box-2 .inner .image img, #design .flow-box .box-3 .inner .image img, #design .flow-box .box-4 .inner .image img, #design .flow-box .box-5 .inner .image img, #design .flow-box .box-6 .inner .image img, #design .flow-box .box-7 .inner .image img, #design .flow-box .box-8 .inner .image img, #design .flow-box .box-9 .inner .image img {
            border: 2px solid #CC0A14;
            border-radius: 100%;
            box-sizing: border-box;
            background-color: #FFF; }
      #design .flow-box .box-1 .box-in, #design .flow-box .box-1 .box-in2, #design .flow-box .box-2 .box-in, #design .flow-box .box-2 .box-in2, #design .flow-box .box-3 .box-in, #design .flow-box .box-3 .box-in2, #design .flow-box .box-4 .box-in, #design .flow-box .box-4 .box-in2, #design .flow-box .box-5 .box-in, #design .flow-box .box-5 .box-in2, #design .flow-box .box-6 .box-in, #design .flow-box .box-6 .box-in2, #design .flow-box .box-7 .box-in, #design .flow-box .box-7 .box-in2, #design .flow-box .box-8 .box-in, #design .flow-box .box-8 .box-in2, #design .flow-box .box-9 .box-in, #design .flow-box .box-9 .box-in2 {
        /*position: absolute;*/
        top: 5%;
        /*
                transform: translateY(-50%);
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
        */
        box-sizing: border-box;
        /*white-space: nowrap;*/
        width: inherit; }
        #design .flow-box .box-1 .box-in .box-in-box, #design .flow-box .box-1 .box-in2 .box-in-box, #design .flow-box .box-2 .box-in .box-in-box, #design .flow-box .box-2 .box-in2 .box-in-box, #design .flow-box .box-3 .box-in .box-in-box, #design .flow-box .box-3 .box-in2 .box-in-box, #design .flow-box .box-4 .box-in .box-in-box, #design .flow-box .box-4 .box-in2 .box-in-box, #design .flow-box .box-5 .box-in .box-in-box, #design .flow-box .box-5 .box-in2 .box-in-box, #design .flow-box .box-6 .box-in .box-in-box, #design .flow-box .box-6 .box-in2 .box-in-box, #design .flow-box .box-7 .box-in .box-in-box, #design .flow-box .box-7 .box-in2 .box-in-box, #design .flow-box .box-8 .box-in .box-in-box, #design .flow-box .box-8 .box-in2 .box-in-box, #design .flow-box .box-9 .box-in .box-in-box, #design .flow-box .box-9 .box-in2 .box-in-box {
          padding-left: 240px;
          margin-top: 1.5em;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between; }
          @media screen and (max-width: 768px) {
            #design .flow-box .box-1 .box-in .box-in-box, #design .flow-box .box-1 .box-in2 .box-in-box, #design .flow-box .box-2 .box-in .box-in-box, #design .flow-box .box-2 .box-in2 .box-in-box, #design .flow-box .box-3 .box-in .box-in-box, #design .flow-box .box-3 .box-in2 .box-in-box, #design .flow-box .box-4 .box-in .box-in-box, #design .flow-box .box-4 .box-in2 .box-in-box, #design .flow-box .box-5 .box-in .box-in-box, #design .flow-box .box-5 .box-in2 .box-in-box, #design .flow-box .box-6 .box-in .box-in-box, #design .flow-box .box-6 .box-in2 .box-in-box, #design .flow-box .box-7 .box-in .box-in-box, #design .flow-box .box-7 .box-in2 .box-in-box, #design .flow-box .box-8 .box-in .box-in-box, #design .flow-box .box-8 .box-in2 .box-in-box, #design .flow-box .box-9 .box-in .box-in-box, #design .flow-box .box-9 .box-in2 .box-in-box {
              padding-left: 27%; } }
          @media screen and (max-width: 480px) {
            #design .flow-box .box-1 .box-in .box-in-box, #design .flow-box .box-1 .box-in2 .box-in-box, #design .flow-box .box-2 .box-in .box-in-box, #design .flow-box .box-2 .box-in2 .box-in-box, #design .flow-box .box-3 .box-in .box-in-box, #design .flow-box .box-3 .box-in2 .box-in-box, #design .flow-box .box-4 .box-in .box-in-box, #design .flow-box .box-4 .box-in2 .box-in-box, #design .flow-box .box-5 .box-in .box-in-box, #design .flow-box .box-5 .box-in2 .box-in-box, #design .flow-box .box-6 .box-in .box-in-box, #design .flow-box .box-6 .box-in2 .box-in-box, #design .flow-box .box-7 .box-in .box-in-box, #design .flow-box .box-7 .box-in2 .box-in-box, #design .flow-box .box-8 .box-in .box-in-box, #design .flow-box .box-8 .box-in2 .box-in-box, #design .flow-box .box-9 .box-in .box-in-box, #design .flow-box .box-9 .box-in2 .box-in-box {
              padding-left: 33%; } }
          #design .flow-box .box-1 .box-in .box-in-box p, #design .flow-box .box-1 .box-in2 .box-in-box p, #design .flow-box .box-2 .box-in .box-in-box p, #design .flow-box .box-2 .box-in2 .box-in-box p, #design .flow-box .box-3 .box-in .box-in-box p, #design .flow-box .box-3 .box-in2 .box-in-box p, #design .flow-box .box-4 .box-in .box-in-box p, #design .flow-box .box-4 .box-in2 .box-in-box p, #design .flow-box .box-5 .box-in .box-in-box p, #design .flow-box .box-5 .box-in2 .box-in-box p, #design .flow-box .box-6 .box-in .box-in-box p, #design .flow-box .box-6 .box-in2 .box-in-box p, #design .flow-box .box-7 .box-in .box-in-box p, #design .flow-box .box-7 .box-in2 .box-in-box p, #design .flow-box .box-8 .box-in .box-in-box p, #design .flow-box .box-8 .box-in2 .box-in-box p, #design .flow-box .box-9 .box-in .box-in-box p, #design .flow-box .box-9 .box-in2 .box-in-box p {
            padding-left: 0; }
          #design .flow-box .box-1 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-1 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-2 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-2 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-3 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-3 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-4 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-4 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-5 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-5 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-6 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-6 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-7 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-7 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-8 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-8 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-9 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-9 .box-in2 .box-in-box .box-in-box-box {
            width: 48%;
            font-size: 1.6rem;
            box-sizing: border-box;
            padding: 1em;
            border: 1px solid #AAAAAA;
            border-radius: 20px; }
            @media screen and (max-width: 768px) {
              #design .flow-box .box-1 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-1 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-2 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-2 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-3 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-3 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-4 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-4 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-5 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-5 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-6 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-6 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-7 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-7 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-8 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-8 .box-in2 .box-in-box .box-in-box-box, #design .flow-box .box-9 .box-in .box-in-box .box-in-box-box, #design .flow-box .box-9 .box-in2 .box-in-box .box-in-box-box {
                width: 100%; } }
            #design .flow-box .box-1 .box-in .box-in-box .box-in-box-box .s-title, #design .flow-box .box-1 .box-in2 .box-in-box .box-in-box-box .s-title, #design .flow-box .box-2 .box-in .box-in-box .box-in-box-box .s-title, #design .flow-box .box-2 .box-in2 .box-in-box .box-in-box-box .s-title, #design .flow-box .box-3 .box-in .box-in-box .box-in-box-box .s-title, #design .flow-box .box-3 .box-in2 .box-in-box .box-in-box-box .s-title, #design .flow-box .box-4 .box-in .box-in-box .box-in-box-box .s-title, #design .flow-box .box-4 .box-in2 .box-in-box .box-in-box-box .s-title, #design .flow-box .box-5 .box-in .box-in-box .box-in-box-box .s-title, #design .flow-box .box-5 .box-in2 .box-in-box .box-in-box-box .s-title, #design .flow-box .box-6 .box-in .box-in-box .box-in-box-box .s-title, #design .flow-box .box-6 .box-in2 .box-in-box .box-in-box-box .s-title, #design .flow-box .box-7 .box-in .box-in-box .box-in-box-box .s-title, #design .flow-box .box-7 .box-in2 .box-in-box .box-in-box-box .s-title, #design .flow-box .box-8 .box-in .box-in-box .box-in-box-box .s-title, #design .flow-box .box-8 .box-in2 .box-in-box .box-in-box-box .s-title, #design .flow-box .box-9 .box-in .box-in-box .box-in-box-box .s-title, #design .flow-box .box-9 .box-in2 .box-in-box .box-in-box-box .s-title {
              text-align: center;
              margin-top: -2.0em; }
              #design .flow-box .box-1 .box-in .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-1 .box-in2 .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-2 .box-in .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-2 .box-in2 .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-3 .box-in .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-3 .box-in2 .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-4 .box-in .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-4 .box-in2 .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-5 .box-in .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-5 .box-in2 .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-6 .box-in .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-6 .box-in2 .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-7 .box-in .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-7 .box-in2 .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-8 .box-in .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-8 .box-in2 .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-9 .box-in .box-in-box .box-in-box-box .s-title span, #design .flow-box .box-9 .box-in2 .box-in-box .box-in-box-box .s-title span {
                background-color: #F1F1F1;
                font-weight: 700;
                padding: 2px 15px; }
          #design .flow-box .box-1 .box-in .box-in-box .movie, #design .flow-box .box-1 .box-in2 .box-in-box .movie, #design .flow-box .box-2 .box-in .box-in-box .movie, #design .flow-box .box-2 .box-in2 .box-in-box .movie, #design .flow-box .box-3 .box-in .box-in-box .movie, #design .flow-box .box-3 .box-in2 .box-in-box .movie, #design .flow-box .box-4 .box-in .box-in-box .movie, #design .flow-box .box-4 .box-in2 .box-in-box .movie, #design .flow-box .box-5 .box-in .box-in-box .movie, #design .flow-box .box-5 .box-in2 .box-in-box .movie, #design .flow-box .box-6 .box-in .box-in-box .movie, #design .flow-box .box-6 .box-in2 .box-in-box .movie, #design .flow-box .box-7 .box-in .box-in-box .movie, #design .flow-box .box-7 .box-in2 .box-in-box .movie, #design .flow-box .box-8 .box-in .box-in-box .movie, #design .flow-box .box-8 .box-in2 .box-in-box .movie, #design .flow-box .box-9 .box-in .box-in-box .movie, #design .flow-box .box-9 .box-in2 .box-in-box .movie {
            width: 48%; }
            @media screen and (max-width: 768px) {
              #design .flow-box .box-1 .box-in .box-in-box .movie, #design .flow-box .box-1 .box-in2 .box-in-box .movie, #design .flow-box .box-2 .box-in .box-in-box .movie, #design .flow-box .box-2 .box-in2 .box-in-box .movie, #design .flow-box .box-3 .box-in .box-in-box .movie, #design .flow-box .box-3 .box-in2 .box-in-box .movie, #design .flow-box .box-4 .box-in .box-in-box .movie, #design .flow-box .box-4 .box-in2 .box-in-box .movie, #design .flow-box .box-5 .box-in .box-in-box .movie, #design .flow-box .box-5 .box-in2 .box-in-box .movie, #design .flow-box .box-6 .box-in .box-in-box .movie, #design .flow-box .box-6 .box-in2 .box-in-box .movie, #design .flow-box .box-7 .box-in .box-in-box .movie, #design .flow-box .box-7 .box-in2 .box-in-box .movie, #design .flow-box .box-8 .box-in .box-in-box .movie, #design .flow-box .box-8 .box-in2 .box-in-box .movie, #design .flow-box .box-9 .box-in .box-in-box .movie, #design .flow-box .box-9 .box-in2 .box-in-box .movie {
                width: 100%;
                margin-top: 1em; } }
            #design .flow-box .box-1 .box-in .box-in-box .movie .video-area, #design .flow-box .box-1 .box-in2 .box-in-box .movie .video-area, #design .flow-box .box-2 .box-in .box-in-box .movie .video-area, #design .flow-box .box-2 .box-in2 .box-in-box .movie .video-area, #design .flow-box .box-3 .box-in .box-in-box .movie .video-area, #design .flow-box .box-3 .box-in2 .box-in-box .movie .video-area, #design .flow-box .box-4 .box-in .box-in-box .movie .video-area, #design .flow-box .box-4 .box-in2 .box-in-box .movie .video-area, #design .flow-box .box-5 .box-in .box-in-box .movie .video-area, #design .flow-box .box-5 .box-in2 .box-in-box .movie .video-area, #design .flow-box .box-6 .box-in .box-in-box .movie .video-area, #design .flow-box .box-6 .box-in2 .box-in-box .movie .video-area, #design .flow-box .box-7 .box-in .box-in-box .movie .video-area, #design .flow-box .box-7 .box-in2 .box-in-box .movie .video-area, #design .flow-box .box-8 .box-in .box-in-box .movie .video-area, #design .flow-box .box-8 .box-in2 .box-in-box .movie .video-area, #design .flow-box .box-9 .box-in .box-in-box .movie .video-area, #design .flow-box .box-9 .box-in2 .box-in-box .movie .video-area {
              width: 100%;
              /*背景色を横幅いっぱいに広げる*/
              text-align: center;
              margin: auto;
              /*padding: 4% 4% 4% 4%;ここで動画の周りの余白を調整*/
              box-sizing: border-box; }
              #design .flow-box .box-1 .box-in .box-in-box .movie .video-area .vid_main, #design .flow-box .box-1 .box-in2 .box-in-box .movie .video-area .vid_main, #design .flow-box .box-2 .box-in .box-in-box .movie .video-area .vid_main, #design .flow-box .box-2 .box-in2 .box-in-box .movie .video-area .vid_main, #design .flow-box .box-3 .box-in .box-in-box .movie .video-area .vid_main, #design .flow-box .box-3 .box-in2 .box-in-box .movie .video-area .vid_main, #design .flow-box .box-4 .box-in .box-in-box .movie .video-area .vid_main, #design .flow-box .box-4 .box-in2 .box-in-box .movie .video-area .vid_main, #design .flow-box .box-5 .box-in .box-in-box .movie .video-area .vid_main, #design .flow-box .box-5 .box-in2 .box-in-box .movie .video-area .vid_main, #design .flow-box .box-6 .box-in .box-in-box .movie .video-area .vid_main, #design .flow-box .box-6 .box-in2 .box-in-box .movie .video-area .vid_main, #design .flow-box .box-7 .box-in .box-in-box .movie .video-area .vid_main, #design .flow-box .box-7 .box-in2 .box-in-box .movie .video-area .vid_main, #design .flow-box .box-8 .box-in .box-in-box .movie .video-area .vid_main, #design .flow-box .box-8 .box-in2 .box-in-box .movie .video-area .vid_main, #design .flow-box .box-9 .box-in .box-in-box .movie .video-area .vid_main, #design .flow-box .box-9 .box-in2 .box-in-box .movie .video-area .vid_main {
                width: 100%;
                /*max-width: 920px;PC版での最大幅*/ }
      #design .flow-box .box-1 .box-in, #design .flow-box .box-2 .box-in, #design .flow-box .box-3 .box-in, #design .flow-box .box-4 .box-in, #design .flow-box .box-5 .box-in, #design .flow-box .box-6 .box-in, #design .flow-box .box-7 .box-in, #design .flow-box .box-8 .box-in, #design .flow-box .box-9 .box-in {
        left: 0%; }
        #design .flow-box .box-1 .box-in p, #design .flow-box .box-2 .box-in p, #design .flow-box .box-3 .box-in p, #design .flow-box .box-4 .box-in p, #design .flow-box .box-5 .box-in p, #design .flow-box .box-6 .box-in p, #design .flow-box .box-7 .box-in p, #design .flow-box .box-8 .box-in p, #design .flow-box .box-9 .box-in p {
          padding-left: 240px;
          text-align: justify;
          margin-bottom: 0.6em; }
          @media screen and (max-width: 768px) {
            #design .flow-box .box-1 .box-in p, #design .flow-box .box-2 .box-in p, #design .flow-box .box-3 .box-in p, #design .flow-box .box-4 .box-in p, #design .flow-box .box-5 .box-in p, #design .flow-box .box-6 .box-in p, #design .flow-box .box-7 .box-in p, #design .flow-box .box-8 .box-in p, #design .flow-box .box-9 .box-in p {
              padding-left: 27%; } }
          @media screen and (max-width: 480px) {
            #design .flow-box .box-1 .box-in p, #design .flow-box .box-2 .box-in p, #design .flow-box .box-3 .box-in p, #design .flow-box .box-4 .box-in p, #design .flow-box .box-5 .box-in p, #design .flow-box .box-6 .box-in p, #design .flow-box .box-7 .box-in p, #design .flow-box .box-8 .box-in p, #design .flow-box .box-9 .box-in p {
              padding-left: 33%; } }
          #design .flow-box .box-1 .box-in p .sub-t, #design .flow-box .box-2 .box-in p .sub-t, #design .flow-box .box-3 .box-in p .sub-t, #design .flow-box .box-4 .box-in p .sub-t, #design .flow-box .box-5 .box-in p .sub-t, #design .flow-box .box-6 .box-in p .sub-t, #design .flow-box .box-7 .box-in p .sub-t, #design .flow-box .box-8 .box-in p .sub-t, #design .flow-box .box-9 .box-in p .sub-t {
            font-weight: 700;
            background-image: linear-gradient(transparent 60%, #FFFBD2 60%); }
      #design .flow-box .box-1 .box-in2, #design .flow-box .box-2 .box-in2, #design .flow-box .box-3 .box-in2, #design .flow-box .box-4 .box-in2, #design .flow-box .box-5 .box-in2, #design .flow-box .box-6 .box-in2, #design .flow-box .box-7 .box-in2, #design .flow-box .box-8 .box-in2, #design .flow-box .box-9 .box-in2 {
        left: 0%; }
        #design .flow-box .box-1 .box-in2 p, #design .flow-box .box-2 .box-in2 p, #design .flow-box .box-3 .box-in2 p, #design .flow-box .box-4 .box-in2 p, #design .flow-box .box-5 .box-in2 p, #design .flow-box .box-6 .box-in2 p, #design .flow-box .box-7 .box-in2 p, #design .flow-box .box-8 .box-in2 p, #design .flow-box .box-9 .box-in2 p {
          padding-left: 25%;
          line-height: 1.4em; }
          @media screen and (max-width: 768px) {
            #design .flow-box .box-1 .box-in2 p, #design .flow-box .box-2 .box-in2 p, #design .flow-box .box-3 .box-in2 p, #design .flow-box .box-4 .box-in2 p, #design .flow-box .box-5 .box-in2 p, #design .flow-box .box-6 .box-in2 p, #design .flow-box .box-7 .box-in2 p, #design .flow-box .box-8 .box-in2 p, #design .flow-box .box-9 .box-in2 p {
              padding-left: 12%;
              padding-right: 33%;
              box-sizing: border-box; } }
    #design .flow-box .box-1 {
      background-image: url("../images/flow01.svg"); }
    #design .flow-box .box-2 {
      background-image: url("../images/flow02.svg");
      background-position: left 100px top; }
      #design .flow-box .box-2:before {
        display: none; }
      @media screen and (max-width: 1100px) {
        #design .flow-box .box-2 {
          background-position: left 1.0vw top; } }
      @media screen and (max-width: 768px) {
        #design .flow-box .box-2 {
          background-position: left 0 top; } }
    #design .flow-box .box-3 {
      background-image: url("../images/flow03.svg"); }
    #design .flow-box .box-4 {
      background-image: url("../images/flow04.svg");
      background-position: left 100px top; }
      @media screen and (max-width: 1100px) {
        #design .flow-box .box-4 {
          background-position: left 1.0vw top; } }
      @media screen and (max-width: 768px) {
        #design .flow-box .box-4 {
          background-position: left 0 top; } }
    #design .flow-box .box-5 {
      background-image: url("../images/flow05.svg"); }
    #design .flow-box .box-6 {
      background-image: url("../images/flow06.svg");
      background-position: left 100px top; }
      @media screen and (max-width: 1100px) {
        #design .flow-box .box-6 {
          background-position: left 1.0vw top; } }
      @media screen and (max-width: 768px) {
        #design .flow-box .box-6 {
          background-position: left 0 top; } }
    #design .flow-box .box-7 {
      background-image: url("../images/flow07.svg"); }
    #design .flow-box .box-8 {
      background-image: url("../images/flow08.svg");
      background-position: left 100px top; }
      @media screen and (max-width: 1100px) {
        #design .flow-box .box-8 {
          background-position: left 1.0vw top; } }
      @media screen and (max-width: 768px) {
        #design .flow-box .box-8 {
          background-position: left 0 top; } }
    #design .flow-box .box-9 {
      background-image: url("../images/flow09.svg"); }

/*ブランドサイト*/
#brand {
  margin: 0 0 80px; }
  @media screen and (max-width: 768px) {
    #brand {
      margin: 0 0 60px; } }
  @media screen and (max-width: 480px) {
    #brand {
      margin: 0 0 40px; } }
  #brand .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #brand .inner .box {
      width: 32%;
      margin-bottom: 2em; }
      @media screen and (max-width: 768px) {
        #brand .inner .box {
          width: 32%; } }
      @media screen and (max-width: 480px) {
        #brand .inner .box {
          width: 48%; } }
      #brand .inner .box .sitename {
        font-weight: 700;
        text-align: center; }
    #brand .inner figure figcaption {
      padding: 0 10px; }
    #brand .inner .bnr {
      width: 100%;
      margin-top: 30px; }

/*フォーム*/
#contact-form {
  width: 1000px;
  margin: 0 auto 80px; }
  @media screen and (max-width: 1100px) {
    #contact-form {
      width: 94%;
      margin-bottom: 60px; } }
  @media screen and (max-width: 768px) {
    #contact-form {
      margin-bottom: 60px; } }
  @media screen and (max-width: 480px) {
    #contact-form {
      margin-bottom: 40px; } }
  #contact-form .inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%; }
    #contact-form .inner .info-box {
      width: 48%;
      box-sizing: border-box; }
      @media screen and (max-width: 768px) {
        #contact-form .inner .info-box {
          width: 100%; } }
      #contact-form .inner .info-box h2 {
        text-align: left; }
      #contact-form .inner .info-box .no1, #contact-form .inner .info-box .no2, #contact-form .inner .info-box .no3 {
        background-size: 1.5em;
        background-repeat: no-repeat;
        background-position: left 0.2em;
        padding-left: 2em;
        margin-bottom: 1.5em; }
      #contact-form .inner .info-box .no1 {
        background-image: url("../images/contact-flow1.svg"); }
      #contact-form .inner .info-box .no2 {
        background-image: url("../images/contact-flow2.svg"); }
      #contact-form .inner .info-box .no3 {
        background-image: url("../images/contact-flow3.svg"); }
      #contact-form .inner .info-box .col-red {
        color: #CC0A14;
        font-weight: 700; }
      #contact-form .inner .info-box .font-b {
        font-weight: 700; }
      #contact-form .inner .info-box .note {
        color: #CC0A14;
        font-size: 1.5rem;
        margin-bottom: 1em; }
      #contact-form .inner .info-box .font-big {
        font-size: 3.0rem;
        font-weight: 700; }
        @media screen and (max-width: 1100px) {
          #contact-form .inner .info-box .font-big {
            font-size: 2.6rem; } }
        @media screen and (max-width: 480px) {
          #contact-form .inner .info-box .font-big {
            font-size: 2.4rem; } }
      #contact-form .inner .info-box .col-box {
        background-color: #CC0A14;
        color: #FFF;
        padding: 1em;
        margin-bottom: 1em; }
        #contact-form .inner .info-box .col-box span {
          font-size: 1.4rem; }
      #contact-form .inner .info-box .mg-top {
        margin-top: 1em; }
      #contact-form .inner .info-box figure {
        text-align: right;
        font-size: 1.4rem; }
        #contact-form .inner .info-box figure.freetel {
          text-align: left;
          font-size: 1.8rem;
          margin: 2em 0; }
          #contact-form .inner .info-box figure.freetel img {
            width: 100%;
            margin-top: 5px; }
        #contact-form .inner .info-box figure.freetel1 {
          text-align: left;
          font-size: 1.8rem;
          margin: 0em 0 2em; }
          #contact-form .inner .info-box figure.freetel1 img {
            width: 60%;
            margin-top: 5px; }
    #contact-form .inner #form {
      width: 48%;
      box-sizing: border-box; }
      @media screen and (max-width: 768px) {
        #contact-form .inner #form {
          width: 100%; } }
      #contact-form .inner #form .font-sm {
        font-size: 1.4rem; }
      #contact-form .inner #form .font-sm-n {
        font-size: 1.4rem;
        font-weight: normal;
        line-height: 1.6em; }
      #contact-form .inner #form a {
        color: #CC0A14;
        text-decoration: underline; }
      #contact-form .inner #form .file-up {
        border: 2px dotted #CCC;
        padding: 1em;
        font-size: 16px;
        margin-bottom: 1em; }

/*プライバシー*/
#privacy {
  margin: 0 auto 80px; }
  #privacy .box {
    background-color: #f4f4f4;
    padding: 40px;
    margin-bottom: 40px; }
    @media screen and (max-width: 768px) {
      #privacy .box {
        padding: 20px 15px; } }
    #privacy .box .text {
      margin-bottom: 30px; }
      @media screen and (max-width: 768px) {
        #privacy .box .text {
          margin-bottom: 20px; } }
    #privacy .box .name {
      text-align: right; }
      #privacy .box .name span {
        font-size: 14px;
        font-weight: normal;
        display: block;
        margin-bottom: 10px; }
        @media screen and (max-width: 768px) {
          #privacy .box .name span {
            margin-bottom: 0; } }
    #privacy .box ul {
      margin-bottom: 30px; }
      @media screen and (max-width: 768px) {
        #privacy .box ul {
          margin-bottom: 20px; } }
      #privacy .box ul li {
        padding-left: 20px;
        position: relative;
        margin-bottom: 15px; }
        @media screen and (max-width: 768px) {
          #privacy .box ul li {
            padding-left: 15px;
            margin-bottom: 10px; } }
        #privacy .box ul li:before {
          content: "";
          position: absolute;
          display: inline-block;
          width: 8px;
          height: 2px;
          background-color: #CC0A14;
          left: 5px;
          top: 47%; }
          @media screen and (max-width: 768px) {
            #privacy .box ul li:before {
              width: 7px;
              left: 0;
              top: 12px; } }
  #privacy .top_text {
    line-height: 2;
    margin-bottom: 40px; }
  #privacy dt {
    font-size: 2.0rem;
    border-left: solid 5px #CC0A14;
    margin-bottom: 10px;
    padding: 3px 10px; }
    @media screen and (max-width: 768px) {
      #privacy dt {
        margin-bottom: 5px;
        padding: 2px 6px; } }
  #privacy dd {
    font-weight: normal;
    line-height: 2;
    margin-bottom: 40px;
    font-size: 16px; }
    #privacy dd:last-of-type {
      margin-bottom: 0; }

#error {
  width: 1000px;
  margin: 0 auto;
  padding: 60px 0;
  text-align: center; }
  @media screen and (max-width: 1100px) {
    #error {
      width: 94%;
      padding: 40px 0; } }
  #error p {
    line-height: 2;
    margin-bottom: 40px;
    font-weight: 700;
    text-align: center; }
    @media screen and (max-width: 768px) {
      #error p {
        line-height: 2;
        margin-bottom: 40px;
        font-weight: 700;
        text-align: justify; } }
  #error dl {
    background-color: #f4f4f4;
    display: inline-block;
    text-align: justify;
    padding: 40px;
    font-weight: normal; }
    @media screen and (max-width: 768px) {
      #error dl {
        background-color: #f4f4f4;
        display: inline-block;
        text-align: justify;
        padding: 30px 20px;
        font-weight: normal; } }
    #error dl dt {
      font-size: 20px;
      margin-bottom: 10px;
      text-align: center; }
      @media screen and (max-width: 768px) {
        #error dl dt {
          font-size: 18px;
          margin-bottom: 10px;
          text-align: center; } }
    #error dl dd {
      line-height: 1.8; }
      @media screen and (max-width: 768px) {
        #error dl dd {
          line-height: 1.8;
          font-size: 14px; } }

.movie-youtube {
  width: 760px;
  margin: 60px auto; }
  @media screen and (max-width: 768px) {
    .movie-youtube {
      width: 94%;
      margin: 40px auto; } }
  .movie-youtube .youtube {
    width: 100%;
    margin: 0 auto; }
    @media screen and (max-width: 768px) {
      .movie-youtube .youtube {
        width: 100%; } }
    .movie-youtube .youtube div {
      position: relative;
      padding-bottom: 56.25%;
      /*アスペクト比 16:9の場合の縦幅*/
      height: 0;
      overflow: hidden; }
      .movie-youtube .youtube div iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }