@charset "UTF-8";
/*レスポンシブ*/
/*レイアウト*/
/*限定br指定*/
/*スマホだけbr*/
/*タブレットだけbr*/
/*パソコンだけbr*/
/*背景画像*/
/*文字サイズ*/
/*三角作る*/
/*マージン下レスポンシブ一括*/
/*アニメーション*/
/*カラーセット*/
/*グラデーション*/
/*書体*/
/*エフェクト・ぼかし*/
/*エフェクト・スクリーン*/
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500&display=swap");
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

/*------------------------------------------
  源の角ゴシック
  font-family: 'Noto Sans JP', sans-serif;
------------------------------------------*/
/*------------------------------------------
  Fira Sans
  font-family: 'Fira Sans', sans-serif;
------------------------------------------*/
/****************************************************************************************************/
/*
/*　ブラウザスタイルをリセットする（※基本的に編集しない）
/*
/****************************************************************************************************/
/*body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tdタグのマージン、パディングを0pxにする*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, figure, button {
  margin: 0px;
  padding: 0px;
  background: none;
  border: 0;
}

/*tableタグのcellspacingとcellpaddingを0pxにする*/
table {
  border-collapse: collapse;
  border-spacing: 0px;
}

/*javascriptのfieldsetタグとimg(aタグ内のimg)、abbr,acronymタグに表示されるボーダーを0pxにする*/
fieldset, img, abbr, acronym {
  border: 0px;
}

/*address,caption,cite,code,dfn,em,strong,th,varタグのfontスタイルを通常にする*/
address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: normal;
}

/*ol,ulタグのリストスタイル（アローやマージンなど）を無くす*/
ol, ul, li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

/*caption,thタグを左に寄せる*/
caption, th {
  text-align: left;
}

/*hタグの表示を通常のテキストと同じにする*/
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal;
}

img {
  display: inline-block;
  vertical-align: middle;
}

/*qタグの前後にキーワードを配置しない*/
q:before, q:after {
  content: '';
}

main {
  display: block;
}

* {
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
}

html {
  overflow-y: scroll;
}

body {
  width: 100%;
  overflow: hidden;
}

header, footer .flex {
  max-width: 1425px;
  width: 90%;
  margin: 0 auto;
  padding: 30px 0;
}

@media screen and (max-width: 896px) {
  header {
    width: 95%;
    padding: 21px 0;
  }
}

@media screen and (max-width: 480px) {
  header {
    padding: 15px 0;
  }
}

header > .flex {
  align-items: center;
  flex-wrap: nowrap;
}

header > .flex div {
  width: 30%;
}

header > .flex div img {
  width: 100%;
}

@media screen and (max-width: 896px) {
  header > .flex div {
    width: 30%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  header > .flex div {
    width: 60%;
  }
}

header > .flex .flex {
  align-items: center;
  justify-content: flex-end;
  width: 70%;
}

header > .flex .flex div {
  max-width: 260px;
  width: 50%;
  margin-right: 30px;
}

@media screen and (max-width: 896px) {
  header > .flex .flex {
    display: none;
  }
}

header > .flex .flex p {
  color: #3690b8;
  font-family: 'Fira Sans', sans-serif;
  font-size: 1.5rem;
}

@media screen and (max-width: 896px) {
  header > .flex .flex p {
    font-size: 2.83026vw;
  }
}

@media screen and (max-width: 480px) {
  header > .flex .flex p {
    font-size: 6.158475vw;
  }
}

@media screen and (max-width: 896px) {
  header > .flex .flex p {
    font-size: 1.2rem;
  }
}

header > .flex .flex p:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("/kakoubuhin_parts/images/kakoubuhin/before_tell.png");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 6px;
}

@media screen and (max-width: 896px) {
  header > .flex .flex p:before {
    width: 15px;
    height: 15px;
  }
}

header > .flex .flex p span {
  font-size: 0.8rem;
  margin-left: 5px;
}

@media screen and (max-width: 896px) {
  header > .flex .flex p span {
    font-size: 1.509472vw;
  }
}

@media screen and (max-width: 480px) {
  header > .flex .flex p span {
    font-size: 3.28452vw;
  }
}

@media screen and (max-width: 896px) {
  header > .flex .flex p span {
    font-size: .7rem;
  }
}

header > .flex .flex a {
  width: 220px;
  background: #f1703d;
  color: #fff;
  border-radius: 25px;
  padding: 15px 9px;
  text-align: center;
  -webkit-box-shadow: 0 6px #db5d2b;
  box-shadow: 0 6px #db5d2b;
}

@media screen and (max-width: 896px) {
  header > .flex .flex a {
    width: 200px;
    font-size: .9rem;
    padding: 9px;
  }
}

footer {
  padding: 30px 0;
  border-top: solid 3px #3690b8;
}

@media screen and (max-width: 480px) {
  footer {
    padding: 15px 0;
  }
}

footer .flex {
  align-items: flex-end;
}

@media screen and (max-width: 480px) {
  footer .flex {
    padding: 0;
  }
}

@media screen and (max-width: 480px) {
  footer .flex div {
    text-align: center;
  }
  footer .flex div:first-of-type {
    margin-bottom: 9px;
  }
  footer .flex div:last-of-type {
    width: 100%;
  }
}

footer p {
  font-size: 0.8rem;
}

@media screen and (max-width: 896px) {
  footer p {
    font-size: 1.509472vw;
  }
}

@media screen and (max-width: 480px) {
  footer p {
    font-size: 3.28452vw;
  }
}

@media screen and (max-width: 480px) {
  footer p {
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  footer img {
    width: 80%;
    margin: 0 auto;
  }
}

.back_blue {
  position: relative;
}

.back_blue:after {
  position: absolute;
  content: "";
  display: block;
  width: 300%;
  height: 100%;
  top: 0;
  left: -100%;
  background: #ccebf9;
  z-index: -10;
}

.back_yellow {
  position: relative;
}

.back_yellow:after {
  position: absolute;
  content: "";
  display: block;
  width: 300%;
  height: 100%;
  top: 0;
  left: -100%;
  background: #fffed8;
  z-index: -10;
}

.center {
  margin: 0 auto;
  text-align: center;
}

.red_text {
  color: #ff0000;
}

.bold_text_700 {
  font-weight: 700;
}

.marker_blue {
  display: inline;
  padding: 0 10px 0;
  background: linear-gradient(transparent 60%, #ccebf9 60%);
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.contact-link {
  background: #fffed8;
}

.contact-link > div {
  display: block;
  width: 65%;
}

@media screen and (max-width: 896px) {
  .contact-link > div {
    width: 100%;
  }
}

.contact-link > div div.flex {
  width: 90%;
  padding: 30px 20px;
  margin: 0 auto;
  justify-content: center;
}

@media screen and (max-width: 1439px) {
  .contact-link > div div.flex {
    padding: 20px 0;
  }
}

@media screen and (max-width: 990px) {
  .contact-link > div div.flex {
    padding: 15px 0;
  }
}

@media screen and (max-width: 896px) {
  .contact-link > div div.flex {
    padding: 20px;
  }
}

@media screen and (max-width: 480px) {
  .contact-link > div div.flex {
    padding: 0;
  }
}

.contact-link > div div.flex p {
  width: 45%;
  color: #f1703d;
  font-size: 2.8rem;
  font-family: 'Fira Sans', sans-serif;
  letter-spacing: 0.02em;
  margin: 0 10% 0 0;
}

@media screen and (max-width: 1439px) {
  .contact-link > div div.flex p {
    font-size: 2.3rem;
  }
}

@media screen and (max-width: 1205px) {
  .contact-link > div div.flex p {
    font-size: 2rem;
    margin-right: 5%;
  }
}

@media screen and (max-width: 990px) {
  .contact-link > div div.flex p {
    width: 100%;
    text-align: center;
    margin: 0 auto 21px;
  }
}

.contact-link > div div.flex p:before {
  position: relative;
  content: "";
  display: inline-block;
  background-image: url("/kakoubuhin_parts/images/kakoubuhin/contact-link_icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 5px;
  left: 5px;
  width: 40px;
  height: 40px;
}

@media screen and (max-width: 1439px) {
  .contact-link > div div.flex p:before {
    width: 35px;
    height: 35px;
  }
}

@media screen and (max-width: 1205px) {
  .contact-link > div div.flex p:before {
    width: 30px;
    height: 30px;
  }
}

.contact-link > div div.flex p span {
  display: block;
  font-size: .8rem;
  line-height: 1em;
  position: relative;
  top: 5px;
}

.contact-link > div div.flex a {
  width: 45%;
  background: #f1703d;
  color: #fff;
  border-radius: 25px;
  padding: 15px 9px;
  text-align: center;
  box-shadow: 0 6px #db5d2b;
}

@media screen and (max-width: 1205px) {
  .contact-link > div div.flex a {
    width: 40%;
    font-size: 1rem;
  }
}

@media screen and (max-width: 990px) {
  .contact-link > div div.flex a {
    padding: 9px;
    font-size: .9rem;
  }
}

@media screen and (max-width: 896px) {
  .contact-link > div div.flex a {
    width: 70%;
    margin: 0 15% 20px;
  }
}

@media screen and (max-width: 480px) {
  .contact-link > div div.flex a {
    width: 100%;
    margin: 0 auto 15px;
  }
}

.contact-link > div.img {
  display: block;
  width: 35%;
  position: relative;
}

@media screen and (max-width: 896px) {
  .contact-link > div.img {
    max-width: 400px;
    width: 70%;
    margin: 0 auto 30px;
  }
}

@media screen and (max-width: 480px) {
  .contact-link > div.img {
    width: 90%;
  }
}

.contact-link > div.img img {
  display: block;
  width: 100%;
  height: 215px;
  object-fit: cover;
}

@media screen and (max-width: 480px) {
  .contact-link > div.img img {
    height: 150px;
  }
}

.contact-link > div p.title {
  padding: 20px;
  line-height: 1em;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  background: #f1703d;
}

@media screen and (max-width: 480px) {
  .contact-link > div p.title {
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.2em;
    margin-bottom: 15px;
  }
}

/*

.contact-link {
  align-items: stretch;
  flex-wrap: nowrap;
  position: relative;
}
  @media screen and (max-width:896px) {
    .contact-link {
      display: block; } }
  .contact-link > div {
    width: 69%;
    background: #fffed8; }
    @media screen and (max-width:896px) {
      .contact-link > div {
        width: 100%; } }
    .contact-link > div .title {
      padding: 12px 43px;
      margin-bottom: 30px;
      background: #f1703d;
      color: #fff;
      font-size: 1.5rem;
      font-weight: 500; }
      @media screen and (max-width:896px) {
        .contact-link > div .title {
          font-size: 2.83026vw; } }
      @media screen and (max-width:480px) {
        .contact-link > div .title {
          font-size: 6.158475vw; } }
      @media screen and (max-width:896px) {
        .contact-link > div .title {
          text-align: center;
        margin-bottom: 0; } }
    .contact-link > div .flex {
      align-items: center;
      justify-content: flex-start;
      flex-wrap: nowrap;
      margin: 0 auto 30px;
      width: 90% }
      @media screen and (max-width:896px) {
        .contact-link > div .flex {
          position: inherit;
          text-align: center;
          -webkit-transform: translateY(0) translateX(0);
          transform: translateY(0) translateX(0);
          top: 50%;
          padding: 9px; } }
      @media screen and (max-width:480px) {
        .contact-link > div .flex {
          flex-wrap: wrap;
        }
      }
      .contact-link > div .flex p{
        text-align: left;}
      .contact-link > div .flex p {
        margin-right: 30px;
        color: #f1703d;
        font-size: 3rem;
        font-family: 'Fira Sans', sans-serif;
        letter-spacing: 0.02em; }
        @media screen and (max-width:896px) {
          .contact-link > div .flex p {
            font-size: 5.66052vw;
            margin-bottom: 30px; } }
        @media screen and (max-width:480px) {
          .contact-link > div .flex p {
            margin: 0 auto 15px;
            font-size: 12.31695vw; } }
        @media screen and (max-width:896px) {
          .contact-link > div .flex p {
            width: 60%; } }
        @media screen and (max-width:480px) {
          .contact-link > div .flex p {
            width: 100%;
            font-size: 1.8rem;
            text-align: center;
            margin-bottom: 15px; } }
        .contact-link > div .flex p:before {
          position: relative;
          content: "";
          display: inline-block;
          background-image: url("/kakoubuhin_parts/images/kakoubuhin/contact-link_icon.svg");
          background-size: contain;
          background-repeat: no-repeat;
          top: 5px;
          left: 5px;
          width: 40px;
          height: 40px; }
          @media screen and (max-width:480px) {
            .contact-link > div .flex p:before {
              width: 30px;
              height: 30px; } }
        .contact-link > div .flex p span {
          display: block;
          font-size: 0.85rem; }
          @media screen and (max-width:896px) {
            .contact-link > div .flex p span {
              font-size: 1.603814vw; } }
          @media screen and (max-width:480px) {
            .contact-link > div .flex p span {
              font-size: 3.4898025vw; } }
      .contact-link > div .flex a {
        background: #f1703d;
        color: #fff;
        border-radius: 25px;
        padding: 15px 9px;
        width: 35%;
        text-align: center;
        -webkit-box-shadow: 0 6px #db5d2b;
                box-shadow: 0 6px #db5d2b;
        font-size: 1.3rem; }
        @media screen and (max-width:896px) {
          .contact-link > div .flex a {
            font-size: 2.452892vw; } }
        @media screen and (max-width:480px) {
          .contact-link > div .flex a {
            font-size: 5.337345vw; } }
        @media screen and (max-width:896px) {
          .contact-link > div .flex a {
            width: 35%;
            font-size: .9rem; } }
        @media screen and (max-width:480px) {
          .contact-link > div .flex a {
            width: 100%;
            margin-bottom: 15px; } }
  .contact-link .img {
    width: 31%; 
    img{
      width: 100%;
    }
  }
    @media screen and (max-width:896px) {
      .contact-link > .img {
        display: none; } }
  */
.index {
  padding-top: 50px;
  /*********************
     ⬇共通⬇
     *********************/
  /*********************
     ⬇ヘッダー⬇
     *********************/
  /*********************
     ⬇ハンバーガー⬇
     *********************/
  /*********************
     ⬇スライダー⬇
     *********************/
  /*********************
     ⬇プロダクト⬇
     *********************/
  /*********************
     ⬇フッター⬇
     *********************/
  /*********************
     ⬇コピーライト⬇
     *********************/
}

@media screen and (max-width: 896px) {
  .index {
    padding-top: 30px;
  }
}

@media screen and (max-width: 480px) {
  .index {
    padding-top: 0;
  }
}

.index a {
  text-decoration: none;
}

.index .hmbg, .index .product, .index .footer, .index .copylight {
  max-width: 1600px;
  width: 90%;
  margin: 0 auto;
}

.index .hmbg a, .index .product a, .index .footer a, .index .copylight a {
  color: #000;
}

.index .hmbg a img, .index .product a img, .index .footer a img, .index .copylight a img {
  width: 100%;
}

.index .hmbg .small, .index .product .small, .index .footer .small, .index .copylight .small {
  font-size: 0.7rem;
  display: block;
}

@media screen and (max-width: 896px) {
  .index .hmbg .small, .index .product .small, .index .footer .small, .index .copylight .small {
    font-size: 1.320788vw;
  }
}

@media screen and (max-width: 480px) {
  .index .hmbg .small, .index .product .small, .index .footer .small, .index .copylight .small {
    font-size: 2.873955vw;
  }
}

.index .hmbg h3, .index .product h3, .index .footer h3, .index .copylight h3 {
  font-family: 'Noto Serif JP', serif;
}

.index .left_nav h3, .index .hmbg h3 {
  padding: 12px 0 14px;
  margin-bottom: 9px;
  line-height: 1em;
  border-top: solid 1px #043e59;
  border-bottom: solid 1px #043e59;
  font-size: 1.2rem;
}

@media screen and (max-width: 896px) {
  .index .left_nav h3, .index .hmbg h3 {
    font-size: 2.264208vw;
  }
}

@media screen and (max-width: 480px) {
  .index .left_nav h3, .index .hmbg h3 {
    font-size: 4.92678vw;
  }
}

.index .left_nav ul, .index .hmbg ul {
  margin-bottom: 48px;
}

.index .left_nav ul:first-of-type li, .index .hmbg ul:first-of-type li {
  text-indent: 10px;
}

.index .left_nav ul > li:before, .index .hmbg ul > li:before {
  content: "◆";
  color: #043E59;
  font-size: 0.7rem;
}

@media screen and (max-width: 896px) {
  .index .left_nav ul > li:before, .index .hmbg ul > li:before {
    font-size: 1.320788vw;
  }
}

@media screen and (max-width: 480px) {
  .index .left_nav ul > li:before, .index .hmbg ul > li:before {
    font-size: 2.873955vw;
  }
}

.index .left_nav ul .show, .index .hmbg ul .show {
  display: block;
}

.index .left_nav ul .show.active, .index .hmbg ul .show.active {
  display: block;
}

.index .left_nav ul li, .index .hmbg ul li {
  padding: 15px 0 15px 0;
  border-bottom: solid 1px #dee4e7;
  font-size: 0.85rem;
}

@media screen and (max-width: 896px) {
  .index .left_nav ul li, .index .hmbg ul li {
    font-size: 1.603814vw;
  }
}

@media screen and (max-width: 480px) {
  .index .left_nav ul li, .index .hmbg ul li {
    font-size: 3.4898025vw;
  }
}

@media screen and (max-width: 896px) {
  .index .left_nav ul li, .index .hmbg ul li {
    font-size: 1rem;
  }
}

.index .left_nav ul li ul, .index .hmbg ul li ul {
  margin-bottom: 0;
}

.index .left_nav ul li li, .index .hmbg ul li li {
  border-bottom: none;
  padding: 0;
  font-size: 0.75rem;
}

@media screen and (max-width: 896px) {
  .index .left_nav ul li li, .index .hmbg ul li li {
    font-size: 1.41513vw;
  }
}

@media screen and (max-width: 480px) {
  .index .left_nav ul li li, .index .hmbg ul li li {
    font-size: 3.0792375vw;
  }
}

@media screen and (max-width: 896px) {
  .index .left_nav ul li li, .index .hmbg ul li li {
    font-size: .9rem;
  }
}

.index .left_nav ul li li:before, .index .hmbg ul li li:before {
  display: none;
}

.index .left_nav ul li li:first-of-type, .index .hmbg ul li li:first-of-type {
  padding-top: 12px;
}

.index .left_nav ul li li a, .index .hmbg ul li li a {
  display: block;
  background: #edf1f2;
  padding: 12px 0 15px 30px;
  border-radius: 3px;
  margin-bottom: 5px;
}

.index .left_nav ul li li li, .index .hmbg ul li li li {
  border-bottom: none;
  padding: 0;
}

.index .left_nav ul li li li:first-of-type, .index .hmbg ul li li li:first-of-type {
  padding: 0;
}

.index .left_nav ul li li li a, .index .hmbg ul li li li a {
  position: relative;
  display: block;
  background: #fff;
  padding: 9px 0 9px 45px;
  margin-bottom: 0;
}

.index .left_nav ul li li li a:before, .index .left_nav ul li li li a:after, .index .hmbg ul li li li a:before, .index .hmbg ul li li li a:after {
  content: "";
  position: absolute;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}

.index .left_nav ul li li li a:before, .index .hmbg ul li li li a:before {
  display: block;
  width: 3px;
  height: 1px;
  background: #666666;
  top: 50%;
  left: 40px;
}

.index .left_nav ul li li li a:after, .index .hmbg ul li li li a:after {
  top: 45%;
  left: 39px;
  width: 3px;
  height: 3px;
  border-top: 1px solid #666666;
  border-right: 1px solid #666666;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.index .left_nav ul li p, .index .hmbg ul li p {
  font-size: 0.85rem;
}

@media screen and (max-width: 896px) {
  .index .left_nav ul li p, .index .hmbg ul li p {
    font-size: 1.603814vw;
  }
}

@media screen and (max-width: 480px) {
  .index .left_nav ul li p, .index .hmbg ul li p {
    font-size: 3.4898025vw;
  }
}

.index .flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

@media screen and (max-width: 480px) {
  .index .pc {
    display: none;
  }
}

.index .sp {
  display: none;
}

@media screen and (max-width: 480px) {
  .index .sp {
    display: block;
  }
}

@media screen and (min-width: 897px) {
  .index .pcbr {
    display: block;
  }
}

@media screen and (max-width: 896px) {
  .index .pcbr {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .index .pcbr {
    display: none;
  }
}

@media screen and (min-width: 897px) {
  .index .tbbr {
    display: none;
  }
}

@media screen and (max-width: 896px) {
  .index .tbbr {
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .index .tbbr {
    display: none;
  }
}

@media screen and (min-width: 897px) {
  .index .spbr {
    display: none;
  }
}

@media screen and (max-width: 896px) {
  .index .spbr {
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .index .spbr {
    display: block;
  }
}

.index .header {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  background: #fff;
}

@media screen and (max-width: 896px) {
  .index .header {
    width: 100%;
    padding-top: 15px;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
  }
}

.index .header > .flex {
  margin: 0 auto 30px;
  flex-wrap: nowrap;
}

@media screen and (max-width: 896px) {
  .index .header > .flex {
    max-width: 1200px;
    width: 90%;
    margin-bottom: 15px;
  }
}

.index .header .flex {
  align-items: center;
}

.index .header .flex div.flex {
  width: 44%;
  flex-wrap: nowrap;
}

@media screen and (max-width: 896px) {
  .index .header .flex div.flex {
    width: 100%;
  }
}

.index .header .flex div.flex h1 {
  width: 150px;
}

@media screen and (max-width: 896px) {
  .index .header .flex div.flex h1 {
    margin: 0 45px 0 0;
    width: 120px;
  }
}

@media screen and (max-width: 480px) {
  .index .header .flex div.flex h1 {
    width: 100px;
    margin-right: 0;
  }
}

@media screen and (max-width: 896px) {
  .index .header .flex div.flex h1 img {
    width: 100%;
  }
}

.index .header .flex div.flex p {
  width: 60%;
  font-size: 0.75rem;
  letter-spacing: .05em;
  white-space: nowrap;
  line-height: 1.25rem;
}

@media screen and (max-width: 896px) {
  .index .header .flex div.flex p {
    font-size: 1.41513vw;
  }
}

@media screen and (max-width: 480px) {
  .index .header .flex div.flex p {
    font-size: 3.0792375vw;
  }
}

@media screen and (max-width: 896px) {
  .index .header .flex div.flex p {
    display: none;
  }
}

@media screen and (max-width: 896px) {
  .index .header .flex div.flex .sp {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    width: 30%;
  }
}

@media screen and (max-width: 480px) {
  .index .header .flex div.flex .sp {
    width: 45%;
  }
}

.index .header .flex div.flex .sp a {
  width: 50%;
  display: block;
}

.index .header .flex div.flex .sp a:nth-of-type(2) {
  margin-right: 20%;
}

@media screen and (max-width: 480px) {
  .index .header .flex div.flex .sp a:nth-of-type(2) {
    margin-right: 45px;
  }
}

@media screen and (max-width: 480px) {
  .index .header .flex div.flex .sp a:nth-of-type(2) img {
    width: 85%;
  }
}

@media screen and (max-width: 896px) {
  .index .header .flex div.flex .sp a {
    width: 12%;
  }
  .index .header .flex div.flex .sp a:first-of-type {
    margin-right: 15px;
  }
}

@media screen and (max-width: 480px) {
  .index .header .flex div.flex .sp a {
    width: 20%;
  }
  .index .header .flex div.flex .sp a:first-of-type {
    margin-right: 9px;
  }
}

.index .header .flex div.flex .sp a img {
  width: 100%;
}

@media screen and (max-width: 480px) {
  .index .header .flex div.flex .sp a img {
    width: 90%;
  }
}

.index .header .flex ul.flex {
  width: 500px;
}

@media screen and (max-width: 480px) {
  .index .header .flex ul.flex {
    width: 100%;
  }
}

.index .header .flex ul.flex li a {
  position: relative;
  font-size: 0.9rem;
  color: #014a6c;
}

@media screen and (max-width: 896px) {
  .index .header .flex ul.flex li a {
    font-size: 1.698156vw;
  }
}

@media screen and (max-width: 480px) {
  .index .header .flex ul.flex li a {
    font-size: 3.695085vw;
  }
}

.index .header .flex ul.flex li a:before {
  position: absolute;
  content: "";
  display: inline-block;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  top: 50%;
}

@media screen and (max-width: 480px) {
  .index .header .flex ul.flex li a:before {
    display: none;
  }
}

@media screen and (max-width: 896px) {
  .index .header .flex ul.flex li:first-of-type {
    width: 100%;
    margin-bottom: 9px;
  }
}

@media screen and (max-width: 896px) {
  .index .header .flex ul.flex li:nth-of-type(2), .index .header .flex ul.flex li:last-of-type {
    width: 50%;
    text-align: right;
  }
}

.index .header .flex ul.flex li:nth-of-type(2) a:before, .index .header .flex ul.flex li:last-of-type a:before {
  width: 23px;
  height: 18px;
}

.index .header .flex ul.flex li:nth-of-type(2) a:before {
  background-image: url("/kakoubuhin_parts/images/index/icon_cart.png");
  background-size: contain;
  background-repeat: no-repeat;
  left: -20px;
}

.index .header .flex ul.flex li:last-of-type a:before {
  background-image: url("/kakoubuhin_parts/images/index/icon_fav.png");
  background-size: contain;
  background-repeat: no-repeat;
  left: -15px;
}

@media screen and (max-width: 896px) {
  .index .header .pc {
    display: none;
  }
}

.index .header .hmbg_toggle {
  position: relative;
  margin-left: auto;
  height: 100%;
  border-top: solid 1px #043E59;
  border-bottom: solid 1px #043E59;
  position: absolute;
  width: 25px;
  height: 20px;
  z-index: 150;
}

@media screen and (max-width: 896px) {
  .index .header .hmbg_toggle {
    top: 35%;
    right: 5%;
  }
}

.index .header .hmbg_toggle:before {
  position: absolute;
  content: "";
  width: 25px;
  height: 1px;
  background: #043E59;
  top: 50%;
}

@media screen and (max-width: 896px) {
  .index table {
    width: 50%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .index table {
    width: 100%;
  }
}

.index form {
  position: relative;
}

@media screen and (max-width: 480px) {
  .index form td {
    width: 100%;
  }
}

.index form td:before {
  position: absolute;
  content: "";
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
  background-image: url("/kakoubuhin_parts/images/index/icon_search.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  top: 50%;
  right: 12px;
  display: inline-block;
  z-index: 10;
}

@media screen and (max-width: 896px) {
  .index form td:before {
    right: 27%;
  }
}

@media screen and (max-width: 480px) {
  .index form td:before {
    right: 12px;
  }
}

.index #searchbox {
  background: #F7F7F5;
  padding: 12px;
  width: 250px;
  border-radius: 50px;
  -webkit-box-shadow: 1px 1px 4px #ccc inset;
  box-shadow: 1px 1px 4px #ccc inset;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 896px) {
  .index #searchbox {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .index #searchbox {
    width: 100%;
  }
}

.index #sendButton {
  position: absolute;
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
  background: #055685;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  top: 50%;
  text-indent: -999999999px;
  right: 5px;
}

@media screen and (max-width: 896px) {
  .index #sendButton {
    right: 26%;
  }
}

@media screen and (max-width: 480px) {
  .index #sendButton {
    right: 5px;
  }
}

.index form.sp {
  width: 90%;
  margin: 0 auto 15px;
}

@media screen and (max-width: 896px) {
  .index form.sp {
    margin-top: 45px;
    display: block;
  }
}

@media screen and (max-width: 480px) {
  .index form.sp {
    margin-top: 70px;
  }
}

.index .hmbg {
  position: fixed;
  overflow: scroll;
  z-index: 100;
  right: 0;
  height: 90vh;
  width: 0;
  background: #fff;
  -webkit-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@media screen and (max-width: 896px) {
  .index .hmbg {
    top: 65px;
  }
}

@media screen and (max-width: 480px) {
  .index .hmbg {
    top: 60px;
  }
}

.index .hmbg.active {
  width: 100%;
}

.index .hmbg .hmbg_menu {
  -webkit-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  padding: 15px;
}

@media screen and (max-width: 896px) {
  .index .hmbg .hmbg_menu {
    padding: 15px 5%;
  }
}

@media screen and (max-width: 480px) {
  .index .hmbg .hmbg_menu {
    padding: 15px;
  }
}

.index .hmbg .hmbg_menu.active {
  display: block;
}

.index .hmbg .hmbg_menu:nth-of-type(2) {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.index .hmbg .hmbg_menu:nth-of-type(2) h3 {
  width: 100%;
}

.index .hmbg .hmbg_menu:nth-of-type(2) li {
  width: 48%;
  margin-bottom: 15px;
}

.index .hmbg .hmbg_menu:nth-of-type(2) li a {
  margin-bottom: 0;
}

.index .hmbg .bland li {
  border-bottom: 0;
  padding-bottom: 0;
}

.index .hmbg .bland li:before {
  display: none;
}

.index .slider {
  background: #043e59;
  padding: 30px 0 75px;
  margin-bottom: 75px;
  overflow: hidden;
  width: 100%;
}

@media screen and (max-width: 896px) {
  .index .slider {
    padding: 15px 0 30px;
  }
}

.index .slider a {
  display: block;
  background: #fff;
}

.index .slider img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.index .slider img:hover {
  opacity: .75;
}

.index .slider .slick-slide {
  margin: 0 21px;
  z-index: 10;
}

.index .slider .slick-list {
  position: relative;
  width: 150%;
  padding: 0 !important;
  left: 50%;
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
}

@media screen and (max-width: 480px) {
  .index .slider .slick-list {
    width: 100%;
  }
}

.index .slider .slick-prev, .index .slider .slick-next {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 45%;
  background: #043E59;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media screen and (max-width: 896px) {
  .index .slider .slick-prev, .index .slider .slick-next {
    width: 30px;
    height: 30px;
    top: 35%;
  }
}

.index .slider .slick-prev:before, .index .slider .slick-next:before {
  content: "";
  position: absolute;
  display: block;
  top: 35%;
  left: 35%;
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.index .slider button {
  z-index: 50;
}

.index .slider .slick-prev {
  left: 25%;
}

@media screen and (max-width: 480px) {
  .index .slider .slick-prev {
    left: 1%;
  }
}

.index .slider .slick-prev:before {
  background-image: url("/kakoubuhin_parts/images/index/arrow_prv.png");
  background-size: contain;
  background-repeat: no-repeat;
}

@media screen and (max-width: 896px) {
  .index .slider .slick-prev:before {
    top: 35%;
    left: 33%;
  }
}

.index .slider .slick-next {
  right: 25%;
}

@media screen and (max-width: 480px) {
  .index .slider .slick-next {
    right: 1%;
  }
}

.index .slider .slick-next:before {
  background-image: url("/kakoubuhin_parts/images/index/arrow_nxt.png");
  background-size: contain;
  background-repeat: no-repeat;
  top: 30%;
  left: 40%;
}

@media screen and (max-width: 896px) {
  .index .slider .slick-next:before {
    top: 25%;
    left: 36%;
  }
}

.index .slider .slick-dots {
  bottom: 30px;
}

@media screen and (max-width: 896px) {
  .index .slider .slick-dots {
    bottom: 8px;
  }
}

.index .slider .slick-dots button:before {
  color: #fff;
}

.index .product .left_nav {
  width: 15%;
}

@media screen and (max-width: 896px) {
  .index .product .left_nav {
    display: none;
  }
}

.index .product .main {
  width: 62%;
}

@media screen and (max-width: 896px) {
  .index .product .main {
    width: 100%;
  }
}

.index .product .main h3 {
  font-size: 1.2rem;
  padding-bottom: 21px;
  margin-bottom: 30px;
  border-bottom: double 4px #043e59;
}

@media screen and (max-width: 896px) {
  .index .product .main h3 {
    font-size: 2.264208vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .main h3 {
    font-size: 4.92678vw;
  }
}

.index .product .main .flex {
  align-items: stretch;
}

.index .product .main .item {
  position: relative;
  width: 24%;
  margin-bottom: 45px;
}

@media screen and (max-width: 480px) {
  .index .product .main .item {
    width: 48%;
    margin-bottom: 30px;
  }
}

.index .product .main .item a {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  margin-bottom: 15px;
  -webkit-transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.index .product .main .item a:hover {
  opacity: .5;
}

.index .product .main .item img {
  position: absolute;
  width: 100%;
  z-index: 10;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
}

.index .product .main .item > p {
  margin-bottom: 42px;
}

@media screen and (max-width: 480px) {
  .index .product .main .item > p {
    margin-bottom: 30px;
  }
}

.index .product .main .item p {
  text-align: center;
  font-size: 0.9rem;
}

@media screen and (max-width: 896px) {
  .index .product .main .item p {
    font-size: 1.698156vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .main .item p {
    font-size: 3.695085vw;
  }
}

.index .product .main .item p .small {
  color: #043e59;
  letter-spacing: 0.3em;
}

@media screen and (max-width: 480px) {
  .index .product .main .item p .small {
    padding-bottom: 9px;
  }
}

.index .product .main .item .price {
  font-family: 'Oswald';
  letter-spacing: .1em;
  position: absolute;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  width: 100%;
  bottom: 0;
  left: 50%;
  margin-bottom: 0;
}

.index .product .main .item .price .small {
  display: inline-block;
  color: #000;
  letter-spacing: .1em;
}

.index .product .main .new, .index .product .main .recommend {
  margin-bottom: 60px;
}

.index .product .main .new .bnr {
  width: 48%;
  -webkit-transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.index .product .main .new .bnr:hover {
  opacity: .5;
}

@media screen and (max-width: 896px) {
  .index .product .main .new .bnr:first-of-type {
    margin-bottom: 15px;
  }
}

.index .product .right_nav {
  width: 15%;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 60px;
  }
}

.index .product .right_nav img {
  width: 100%;
}

.index .product .right_nav .bnr,
.index .product .right_nav .tel {
  margin-bottom: 15px;
  font-size: .7rem;
  font-weight: 100;
  text-align: center;
}

.index .product .right_nav .bnr img,
.index .product .right_nav .tel img {
  margin: 0 0 5px;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .bnr,
  .index .product .right_nav .tel {
    width: 32%;
    order: 2;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .bnr,
  .index .product .right_nav .tel {
    width: 48%;
  }
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .tel {
    width: 100%;
    order: 2;
    text-align: center;
  }
  .index .product .right_nav .tel img {
    width: 80%;
    max-width: 300px;
    display: block;
    margin: 0 auto 10px;
  }
}

.index .product .right_nav .bland h3 {
  padding: 12px 0 14px;
  margin-bottom: 15px;
  line-height: 1em;
  border-top: solid 1px #043e59;
  border-bottom: solid 1px #043e59;
  font-size: 1.2rem;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .bland h3 {
    font-size: 2.264208vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .bland h3 {
    font-size: 4.92678vw;
  }
}

.index .product .right_nav .bland li {
  margin-bottom: 30px;
  border-bottom: 0;
  padding: 0;
}

.index .product .right_nav .bland li:before {
  display: none;
}

.index .product .right_nav .bland a {
  display: block;
  margin-bottom: 18px;
}

.index .product .right_nav .bland p {
  font-size: 0.7rem;
  line-height: 1.7em;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .bland p {
    font-size: 1.320788vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .bland p {
    font-size: 2.873955vw;
  }
}

.index .product .right_nav .news {
  margin-bottom: 45px;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .news {
    width: 100%;
    order: 1;
  }
}

.index .product .right_nav .news h3 {
  padding: 9px 0;
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
  margin-bottom: 24px;
}

.index .product .right_nav .news dt {
  font-family: 'Oswald';
  letter-spacing: .1em;
  font-size: 0.6rem;
  margin-bottom: 9px;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .news dt {
    font-size: 1.132104vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .news dt {
    font-size: 2.46339vw;
  }
}

.index .product .right_nav .news dd {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: solid 1px #d4d8d9;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .news dd {
    font-size: 1.320788vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .news dd {
    font-size: 2.873955vw;
  }
}

.index .product .right_nav .news dd:last-of-type {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.index .product .right_nav .text_link {
  position: relative;
  padding: 45px 0;
  margin-bottom: 45px;
  text-align: center;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .text_link {
    font-size: 1.226446vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .text_link {
    font-size: 2.6686725vw;
  }
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .text_link {
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    order: 3;
    width: 23%;
    padding: 9px;
    width: 48%;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .text_link {
    padding: 18px 9px 15px;
    font-size: .6rem;
    line-height: 1.9em;
  }
}

.index .product .right_nav .text_link:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 250px;
  top: 0;
  left: 0;
  display: block;
  z-index: -10;
}

.index .product .right_nav .text_link:first-of-type:before {
  background-image: url("/kakoubuhin_parts/images/index/background01.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .text_link:first-of-type:before {
    background-image: url("/kakoubuhin_parts/images/index/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 110px;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .text_link:first-of-type:before {
    background-image: url("/kakoubuhin_parts/images/index/background01.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    height: 250px;
  }
}

.index .product .right_nav .text_link:last-of-type h4 {
  font-size: 1.2rem;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .text_link:last-of-type h4 {
    font-size: 2.264208vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .text_link:last-of-type h4 {
    font-size: 4.92678vw;
  }
}

.index .product .right_nav .text_link:last-of-type:before {
  background-image: url("/kakoubuhin_parts/images/index/background02.jpg");
  background-size: contain;
  background-repeat: no-repeat;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .text_link:last-of-type:before {
    background-image: url("/kakoubuhin_parts/images/index/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 110px;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .text_link:last-of-type:before {
    background-image: url("/kakoubuhin_parts/images/index/background02.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    height: 250px;
  }
}

.index .product .right_nav .text_link h4 {
  font-family: 'Noto Serif JP', serif;
  margin-bottom: 15px;
  font-size: 1.2rem;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .text_link h4 {
    font-size: 2.264208vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .text_link h4 {
    font-size: 4.92678vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .text_link h4 {
    margin-bottom: 9px;
    font-size: .9rem;
    line-height: 1.3em;
  }
}

.index .product .right_nav .text_link .small {
  font-size: 0.9rem;
}

@media screen and (max-width: 896px) {
  .index .product .right_nav .text_link .small {
    font-size: 1.698156vw;
  }
}

@media screen and (max-width: 480px) {
  .index .product .right_nav .text_link .small {
    font-size: 3.695085vw;
  }
}

.index .footer {
  width: 90%;
  margin: 0 auto;
  max-width: 1400px;
}

@media screen and (max-width: 896px) {
  .index .footer {
    min-width: inherit;
  }
}

.index .footer > .flex {
  margin-bottom: 45px;
  border-bottom: solid 1px #bbbebf;
}

.index .footer h3 {
  width: 100%;
  font-size: 1.3rem;
  margin-bottom: 15px;
}

@media screen and (max-width: 896px) {
  .index .footer h3 {
    font-size: 2.452892vw;
  }
}

@media screen and (max-width: 480px) {
  .index .footer h3 {
    font-size: 5.337345vw;
  }
}

.index .footer .sns, .index .footer .shop_list {
  margin-bottom: 45px;
}

.index .footer .sns {
  width: 400px;
}

@media screen and (max-width: 896px) {
  .index .footer .sns {
    width: 100%;
    text-align: center;
    margin-bottom: 60px;
  }
}

.index .footer .sns .fb {
  max-width: 400px;
  width: 100%;
  margin-bottom: 30px;
}

@media screen and (max-width: 896px) {
  .index .footer .sns .fb {
    margin: 0 auto 30px;
  }
}

.index .footer .sns .inst {
  position: relative;
  margin: 0 auto;
}

.index .footer .sns .inst .pc {
  max-width: 500px;
  width: 100%;
}

.index .footer .sns .inst .sp {
  max-width: 300px;
  width: 100%;
  text-align: center;
}

.index .footer .sns .inst a:before {
  position: absolute;
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: #fff;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.index .footer .sns .inst a:hover:before {
  opacity: .6;
}

.index .footer .shop_list {
  width: calc(100% - 440px);
}

@media screen and (max-width: 896px) {
  .index .footer .shop_list {
    width: 100%;
  }
}

@media screen and (max-width: 896px) {
  .index .footer .shop_list h3 {
    text-align: center;
  }
}

.index .footer .shop_list .item {
  width: 48%;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

@media screen and (max-width: 896px) {
  .index .footer .shop_list .item {
    justify-content: space-between;
    width: 30%;
    margin-bottom: 30px;
    flex-wrap: wrap;
  }
  .index .footer .shop_list .item:first-of-type {
    order: 1;
  }
  .index .footer .shop_list .item:nth-of-type(2) {
    order: 6;
  }
  .index .footer .shop_list .item:nth-of-type(3) {
    order: 2;
  }
  .index .footer .shop_list .item:nth-of-type(4) {
    order: 5;
  }
  .index .footer .shop_list .item:nth-of-type(5) {
    order: 3;
  }
  .index .footer .shop_list .item:nth-of-type(6) {
    order: 7;
  }
  .index .footer .shop_list .item:nth-of-type(7) {
    order: 4;
  }
}

.index .footer .shop_list .item img {
  max-width: 150px;
  width: 50%;
  margin: 0 15px 15px 0;
}

@media screen and (max-width: 896px) {
  .index .footer .shop_list .item img {
    width: 100%;
    max-width: inherit;
    margin: 0 0 15px;
  }
}

.index .footer .shop_list .item p {
  width: 50%;
}

@media screen and (max-width: 896px) {
  .index .footer .shop_list .item p {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .index .footer .shop_list .item p {
    font-size: .9rem;
  }
}

.index .footer .notes {
  /*justify-content: flex-start;*/
  padding-bottom: 30px;
}

.index .footer .notes h3 {
  font-size: 1.1rem;
}

@media screen and (max-width: 896px) {
  .index .footer .notes h3 {
    font-size: 2.075524vw;
  }
}

@media screen and (max-width: 480px) {
  .index .footer .notes h3 {
    font-size: 4.516215vw;
  }
}

.index .footer .notes .item {
  width: 45%;
}

@media screen and (max-width: 896px) {
  .index .footer .notes .item {
    width: 45%;
  }
}

@media screen and (max-width: 480px) {
  .index .footer .notes .item {
    width: 100%;
  }
}

.index .footer .notes .item p {
  line-height: 1.7em;
  margin-bottom: 15px;
  font-size: 0.7rem;
}

@media screen and (max-width: 896px) {
  .index .footer .notes .item p {
    font-size: 1.320788vw;
  }
}

@media screen and (max-width: 480px) {
  .index .footer .notes .item p {
    font-size: 2.873955vw;
  }
}

.index .footer .notes .item:first-of-type {
  margin-right: 45px;
}

@media screen and (max-width: 480px) {
  .index .footer .notes .item:first-of-type {
    margin: 0 0 45px;
  }
}

.index .copylight {
  text-align: right;
  width: 100%;
}

@media screen and (max-width: 480px) {
  .index .copylight {
    text-align: center;
  }
}

.index .copylight p {
  margin-bottom: 45px;
  font-size: 0.7rem;
}

@media screen and (max-width: 896px) {
  .index .copylight p {
    font-size: 1.320788vw;
  }
}

@media screen and (max-width: 480px) {
  .index .copylight p {
    font-size: 2.873955vw;
  }
}

.kakoubuhin {
  position: relative;
  /*------------------------
     一括共通
     ------------------------*/
  /*------------------------
     メイン
     ------------------------*/
  /*------------------------
     スマホ用flexメニュー
     ------------------------*/
  /*------------------------
     イントロ
     ------------------------*/
  /*------------------------
     加工部品の調達｜トラブル
     ------------------------*/
  /*------------------------
     加工部品調達代行とは？
     ------------------------*/
  /*------------------------
     加工部品事例
     ------------------------*/
  /*------------------------
     選ばれる理由
     ------------------------*/
  /*------------------------
     スタッフボイス
     ------------------------*/
  /*------------------------
     お問い合わせフォーム
     ------------------------*/
}

.kakoubuhin .intro .content,
.kakoubuhin .trouble .content,
.kakoubuhin .what .content,
.kakoubuhin .case .content,
.kakoubuhin .reason .content,
.kakoubuhin .voice .content,
.kakoubuhin .contact .content {
  max-width: 1425px;
  width: 90%;
  margin: 0 auto;
  padding: 30px 0 0;
}

.kakoubuhin .intro .copy,
.kakoubuhin .trouble .copy,
.kakoubuhin .what .copy,
.kakoubuhin .case .copy,
.kakoubuhin .reason .copy,
.kakoubuhin .voice .copy,
.kakoubuhin .contact .copy {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 75px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .intro .copy,
  .kakoubuhin .trouble .copy,
  .kakoubuhin .what .copy,
  .kakoubuhin .case .copy,
  .kakoubuhin .reason .copy,
  .kakoubuhin .voice .copy,
  .kakoubuhin .contact .copy {
    font-size: 2.452892vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .intro .copy,
  .kakoubuhin .trouble .copy,
  .kakoubuhin .what .copy,
  .kakoubuhin .case .copy,
  .kakoubuhin .reason .copy,
  .kakoubuhin .voice .copy,
  .kakoubuhin .contact .copy {
    font-size: 5.337345vw;
  }
}

.kakoubuhin .intro h2,
.kakoubuhin .trouble h2,
.kakoubuhin .what h2,
.kakoubuhin .case h2,
.kakoubuhin .reason h2,
.kakoubuhin .voice h2,
.kakoubuhin .contact h2 {
  text-align: center;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .intro h2 img,
  .kakoubuhin .trouble h2 img,
  .kakoubuhin .what h2 img,
  .kakoubuhin .case h2 img,
  .kakoubuhin .reason h2 img,
  .kakoubuhin .voice h2 img,
  .kakoubuhin .contact h2 img {
    width: 95%;
  }
}

.kakoubuhin .spbr {
  display: none;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .spbr {
    display: block;
  }
}

.kakoubuhin main {
  margin-bottom: 30px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin main {
    margin-bottom: 0;
  }
}

.kakoubuhin main img {
  width: 100%;
}

@media screen and (max-width: 480px) {
  .kakoubuhin main img {
    width: 140%;
    position: relative;
    left: -65px;
  }
}

.kakoubuhin .sp_menu {
  display: none;
  background: #fffed8;
  -webkit-transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: all 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  border-top: solid 1px #f1703d;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .sp_menu {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
  }
}

.kakoubuhin .sp_menu.active {
  opacity: 0;
}

.kakoubuhin .sp_menu .flex {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: nowrap;
  width: 100%;
}

.kakoubuhin .sp_menu .flex p {
  font-size: 1.1rem;
  width: 85%;
  text-align: center;
  padding: 6px 0;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 500;
}

.kakoubuhin .sp_menu .flex p a {
  color: #f1703d;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .sp_menu .flex p a {
    font-size: 1.5rem;
    margin-right: 6px;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .sp_menu .flex p a {
    font-size: 1.2rem;
  }
}

.kakoubuhin .sp_menu .flex span {
  font-size: .7rem;
  color: #f1703d;
}

.kakoubuhin .sp_menu .flex > a {
  position: relative;
  display: block;
  background: #f1703d;
  width: 15%;
  text-align: center;
}

.kakoubuhin .sp_menu .flex > a i {
  position: absolute;
  color: #fff;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  top: 50%;
  left: 50%;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .sp_menu .flex > a i {
    font-size: 2rem;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .sp_menu .flex > a i {
    font-size: 1.3rem;
  }
}

.kakoubuhin .intro {
  margin-bottom: 120px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .intro {
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .intro {
    margin-bottom: 30px;
  }
}

.kakoubuhin .intro .con_01 {
  margin-bottom: 40px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .intro .con_01 {
    margin: 15px;
  }
}

.kakoubuhin .intro .con_01 .item {
  position: relative;
  background: #3690b8;
  width: 31%;
  padding: 48px 30px 20px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .intro .con_01 .item {
    padding: 30px 15px 15px;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .intro .con_01 .item {
    width: 100%;
    margin-bottom: 30px;
    padding: 40px 15px 15px;
  }
}

.kakoubuhin .intro .con_01 .item h3 {
  position: absolute;
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
  top: -23px;
  left: 50%;
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .intro .con_01 .item h3 {
    top: -10px;
  }
}

.kakoubuhin .intro .con_01 .item h3 img {
  width: 100%;
}

.kakoubuhin .intro .con_01 .item > img {
  width: 48%;
}

.kakoubuhin .intro .con_02 {
  align-items: stretch;
  margin-bottom: 50px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .intro .con_02 {
    align-items: center;
  }
}

.kakoubuhin .intro .con_02 div {
  position: relative;
  width: 65.5%;
  background: #ccebf9;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .intro .con_02 div {
    width: 100%;
    padding: 15px 0;
    margin-bottom: 45px;
  }
}

.kakoubuhin .intro .con_02 div:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-width: 16px 0 16px 20px;
  border-color: transparent transparent transparent #ccebf9;
  border-style: solid;
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
  top: 50%;
  right: -20px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .intro .con_02 div:before {
    top: inherit;
    bottom: -20px;
    right: inherit;
    left: 50%;
    -webkit-transform: translateY(0) translateX(-50%);
    transform: translateY(0) translateX(-50%);
    width: 0;
    height: 0;
    border-width: 20px 16px 0 16px;
    border-color: #ccebf9 transparent transparent transparent;
    border-style: solid;
  }
}

.kakoubuhin .intro .con_02 div p {
  position: absolute;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  top: 50%;
  left: 50%;
  width: 90%;
  font-size: 1.1rem;
  line-height: 1.8em;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .intro .con_02 div p {
    font-size: 2.075524vw;
    position: inherit;
    font-size: .9rem;
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    top: 0;
    left: 0;
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .intro .con_02 div p {
    font-size: 4.516215vw;
    position: inherit;
    font-size: .8rem;
    -webkit-transform: translateY(0) translateX(0);
    transform: translateY(0) translateX(0);
    top: 0;
    left: 0;
    margin: 0 auto;
  }
  .kakoubuhin .intro .con_02 div p br {
    display: none;
  }
}

.kakoubuhin .intro .con_02 > p {
  width: 31%;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .intro .con_02 > p {
    width: 50%;
    margin: 0 auto;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .intro .con_02 > p {
    width: 100%;
  }
}

.kakoubuhin .intro .con_02 > p img {
  width: 100%;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .intro .con_02 img {
    width: 100%;
  }
}

.kakoubuhin .trouble h2 {
  margin-bottom: 150px;
}

@media screen and (max-width: 1520px) {
  .kakoubuhin .trouble h2 {
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .trouble h2 {
    margin-bottom: 30px;
  }
}

.kakoubuhin .trouble h2 img {
  max-width: 650px;
  width: 90%;
}

.kakoubuhin .trouble .con_01 {
  position: relative;
  margin-bottom: 120px;
}

@media screen and (max-width: 1520px) {
  .kakoubuhin .trouble .con_01 {
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .trouble .con_01 {
    margin-bottom: 90px;
  }
}

.kakoubuhin .trouble .con_01 > div {
  position: relative;
  width: 100%;
  text-align: center;
  height: 500px;
}

@media screen and (max-width: 1520px) {
  .kakoubuhin .trouble .con_01 > div {
    display: none;
  }
}

@media screen and (max-width: 896px) {
  .kakoubuhin .trouble .con_01 > div {
    display: block;
    width: 100%;
    height: inherit;
  }
}

.kakoubuhin .trouble .con_01 > div img {
  position: relative;
  top: 30px;
  width: 270px;
}

@media screen and (max-width: 1520px) {
  .kakoubuhin .trouble .con_01 > div img {
    top: 0;
    width: 20%;
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 896px) {
  .kakoubuhin .trouble .con_01 > div img {
    width: 30%;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .trouble .con_01 > div img {
    width: 50%;
  }
}

.kakoubuhin .trouble .con_01 .trouble_con1_img {
  display: none;
}

@media screen and (max-width: 1520px) {
  .kakoubuhin .trouble .con_01 .trouble_con1_img {
    display: block;
    width: 90%;
    margin: 0 auto 120px;
  }
}

@media screen and (max-width: 896px) {
  .kakoubuhin .trouble .con_01 .trouble_con1_img {
    display: none;
  }
}

.kakoubuhin .trouble .con_01 .item {
  position: absolute;
  max-width: 500px;
  width: 100%;
  background: #eee;
  padding: 30px;
  z-index: -5;
}

@media screen and (max-width: 1520px) {
  .kakoubuhin .trouble .con_01 .item {
    position: inherit;
    margin-bottom: 30px;
  }
}

.kakoubuhin .trouble .con_01 .item div {
  position: absolute;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  top: 50%;
  left: 50%;
  width: 90%;
}

.kakoubuhin .trouble .con_01 .item p {
  font-size: 1.3rem;
  font-weight: 500;
  text-align: center;
  margin-bottom: 15px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .trouble .con_01 .item p {
    font-size: 2.452892vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .trouble .con_01 .item p {
    font-size: 5.337345vw;
  }
}

.kakoubuhin .trouble .con_01 .item span {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .trouble .con_01 .item span {
    font-size: 1.88684vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .trouble .con_01 .item span {
    font-size: 4.10565vw;
  }
}

.kakoubuhin .trouble .con_01 .item_01 {
  height: 200px;
  top: -60px;
  left: 150px;
}

.kakoubuhin .trouble .con_01 .item_02 {
  height: 230px;
  top: 30px;
  right: 150px;
}

@media screen and (max-width: 1520px) {
  .kakoubuhin .trouble .con_01 .item_02 {
    right: inherit;
  }
}

.kakoubuhin .trouble .con_01 .item_02:before {
  position: absolute;
  content: "";
  background-image: url("/kakoubuhin_parts/images/kakoubuhin/trouble_ before.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 64px;
  height: 40px;
  top: -10px;
  right: 30px;
}

.kakoubuhin .trouble .con_01 .item_03 {
  height: 250px;
  bottom: 0;
  left: 170px;
}

.kakoubuhin .trouble .con_01 .item_03:before {
  position: absolute;
  content: "";
  background-image: url("/kakoubuhin_parts/images/kakoubuhin/trouble_ before.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 64px;
  height: 40px;
  bottom: -10px;
  left: 30px;
}

@media screen and (max-width: 1520px) {
  .kakoubuhin .trouble .con_01 .item_01, .kakoubuhin .trouble .con_01 .item_02, .kakoubuhin .trouble .con_01 .item_03 {
    top: inherit;
    max-width: 100%;
    position: inherit;
  }
  .kakoubuhin .trouble .con_01 .item_01, .kakoubuhin .trouble .con_01 .item_03 {
    left: inherit;
  }
}

.kakoubuhin .trouble .con_02 {
  position: relative;
  padding-top: 120px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .trouble .con_02 {
    padding-top: 60px;
  }
}

.kakoubuhin .trouble .con_02:before {
  position: absolute;
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
  content: "";
  width: 0;
  height: 0;
  border-width: 60px 60px 0 60px;
  border-color: #fff transparent transparent transparent;
  border-style: solid;
  top: 0;
  left: 50%;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .trouble .con_02:before {
    width: 0;
    height: 0;
    border-width: 30px 30px 0 30px;
    border-color: #fff transparent transparent transparent;
    border-style: solid;
  }
}

.kakoubuhin .trouble .con_02 h3 {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .1em;
  margin-bottom: 69px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .trouble .con_02 h3 {
    font-size: 3.396312vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .trouble .con_02 h3 {
    font-size: 1.4rem;
  }
}

.kakoubuhin .trouble .con_02 h3 span {
  position: relative;
}

.kakoubuhin .trouble .con_02 h3 span:before, .kakoubuhin .trouble .con_02 h3 span:after {
  position: absolute;
  display: inline-block;
  content: "";
  width: 100%;
  height: 5px;
  background: #fff100;
  z-index: -5;
  left: 0;
}

.kakoubuhin .trouble .con_02 h3 span:before {
  bottom: 5px;
}

.kakoubuhin .trouble .con_02 h3 span:after {
  bottom: -5px;
}

.kakoubuhin .trouble .con_02 .flex {
  align-items: stretch;
}

.kakoubuhin .trouble .con_02 .flex .item {
  position: relative;
  background: #fff;
  padding: 70px 15px 45px;
  margin-bottom: 45px;
  width: 30%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6em;
  -webkit-box-shadow: 6px 6px #b7d3e0;
  box-shadow: 6px 6px #b7d3e0;
}

@media screen and (max-width: 1520px) {
  .kakoubuhin .trouble .con_02 .flex .item {
    padding: 70px 30px 30px;
    text-align: justify;
  }
  .kakoubuhin .trouble .con_02 .flex .item br {
    display: none;
  }
}

@media screen and (max-width: 896px) {
  .kakoubuhin .trouble .con_02 .flex .item {
    padding: 70px 15px 45px;
    font-size: 2.264208vw;
    width: 100%;
    margin-bottom: 75px;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .trouble .con_02 .flex .item {
    font-size: 4.92678vw;
    padding: 50px 15px 30px;
  }
}

.kakoubuhin .trouble .con_02 .flex .item:before {
  position: absolute;
  content: "";
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
  background-image: url("/kakoubuhin_parts/images/kakoubuhin/trouble_icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  top: -60px;
  left: 50%;
  width: 98px;
  height: 98px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .trouble .con_02 .flex .item:before {
    top: -50px;
    width: 80px;
    height: 80px;
  }
}

.kakoubuhin .what h2 {
  padding: 21px 0;
  background: #3690b8;
  margin-bottom: 39px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .content {
    padding: 0;
  }
}

.kakoubuhin .what .con_01 {
  margin-bottom: 126px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_01 {
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_01 .copy {
    margin-bottom: 120px;
  }
}

.kakoubuhin .what .con_01 .center p {
  position: relative;
  font-size: 2.3rem;
  display: inline-block;
  text-align: left;
  padding-left: 130px;
  margin-bottom: 36px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_01 .center p {
    font-size: 4.339732vw;
    text-align: center;
    padding: 0;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_01 .center p {
    font-size: 9.442995vw;
  }
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_01 .center p {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_01 .center p {
    font-size: 1.3rem;
    text-align: center;
  }
}

.kakoubuhin .what .con_01 .center p:before {
  position: absolute;
  content: "";
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
  top: 55%;
  left: 0;
  width: 110px;
  height: 110px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_01 .center p:before {
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    top: -45px;
    left: 50%;
    width: 80px;
    height: 80px;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_01 .center p:before {
    width: 70px;
    height: 70px;
  }
}

.kakoubuhin .what .con_01 .center.icon01 p:before {
  background-image: url("/kakoubuhin_parts/images/kakoubuhin/what_icon01.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.kakoubuhin .what .con_01 .center.icon02 p:before {
  background-image: url("/kakoubuhin_parts/images/kakoubuhin/what_icon02.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.kakoubuhin .what .con_01 .center.icon03 p:before {
  background-image: url("/kakoubuhin_parts/images/kakoubuhin/what_icon03.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.kakoubuhin .what .con_01 .center > span {
  display: block;
  font-size: 1.2rem;
  line-height: 1.6em;
  margin-bottom: 45px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_01 .center > span {
    font-size: 2.264208vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_01 .center > span {
    font-size: 4.92678vw;
  }
}

.kakoubuhin .what .con_01 .flex {
  align-items: stretch;
  margin-bottom: 150px;
}

.kakoubuhin .what .con_01 .flex:last-of-type {
  margin: 0;
}

.kakoubuhin .what .con_01 .flex .item {
  background: #ccebf9;
  width: 48%;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_01 .flex .item {
    width: 100%;
    margin-bottom: 15px;
  }
}

.kakoubuhin .what .con_01 .flex .item p {
  text-align: center;
  color: #fff;
  background: #3690b8;
  padding: 15px 0;
  font-weight: 500;
  font-size: 1.3rem;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_01 .flex .item p {
    font-size: 2.452892vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_01 .flex .item p {
    font-size: 5.337345vw;
  }
}

.kakoubuhin .what .con_01 .flex .item div {
  padding: 15px 30px;
  text-align: center;
}

.kakoubuhin .what .con_01 .flex .item img {
  width: 100%;
}

.kakoubuhin .what .con_02 {
  padding-top: 90px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_02 {
    padding-top: 60px;
  }
}

.kakoubuhin .what .con_02 > span {
  background: #fff;
  max-width: 140px;
  width: 80%;
  text-align: center;
  display: block;
  padding: 6px;
  border: solid 1px #3690b8;
  border-radius: 50px;
  color: #3690b8;
  margin: 0 auto 15px;
}

.kakoubuhin .what .con_02 h3 {
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 60px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_02 h3 {
    font-size: 3.77368vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_02 h3 {
    font-size: 8.2113vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_02 h3 {
    font-size: 1.4rem;
  }
}

.kakoubuhin .what .con_02 .flex {
  position: relative;
  align-items: stretch;
}

.kakoubuhin .what .con_02 .flex .arrow {
  position: absolute;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  top: 50%;
  left: 50%;
  text-align: center;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_02 .flex .arrow {
    position: inherit;
  }
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_02 .flex .arrow {
    width: 100%;
    position: absolute;
    top: 47%;
  }
}

.kakoubuhin .what .con_02 .flex .arrow p {
  color: #3690b8;
  margin-bottom: 15px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_02 .flex .arrow p {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_02 .flex .arrow p {
    font-size: 1rem;
  }
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_02 .flex .arrow img {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_02 .flex .arrow img {
    width: 10%;
  }
}

.kakoubuhin .what .con_02 .flex .item {
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  width: 42%;
  margin-bottom: 90px;
}

.kakoubuhin .what .con_02 .flex .item img {
  width: 80%;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_02 .flex .item {
    width: 100%;
    margin-bottom: 220px;
  }
  .kakoubuhin .what .con_02 .flex .item:last-of-type {
    margin-bottom: 60px;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_02 .flex .item {
    margin-bottom: 180px;
  }
}

@media screen and (max-width: 896px) {
  .kakoubuhin .what .con_02 .flex .item img {
    width: 50%;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .what .con_02 .flex .item img {
    width: 100%;
  }
}

.kakoubuhin .what .con_02 .flex .item p {
  text-align: center;
  color: #3690b8;
  border-bottom: solid 1px #3690b8;
  padding: 0 0 15px;
  margin-bottom: 30px;
}

.kakoubuhin .what .con_02 .flex .item div {
  text-align: center;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .case .content {
    padding-top: 0;
  }
}

.kakoubuhin .case h2 {
  padding: 21px 0;
  background: #fea361;
  margin-bottom: 39px;
}

.kakoubuhin .case .con_01 .flex {
  align-items: stretch;
}

.kakoubuhin .case .con_01 .flex .item {
  width: 23%;
  margin-bottom: 60px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .case .con_01 .flex .item {
    width: 32%;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .case .con_01 .flex .item {
    width: 48%;
    margin-bottom: 45px;
  }
}

.kakoubuhin .case .con_01 .flex .item img {
  width: 100%;
  margin-bottom: 15px;
}

.kakoubuhin .case .con_01 .flex .item dl {
  font-size: 0.9rem;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .case .con_01 .flex .item dl {
    font-size: 1.698156vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .case .con_01 .flex .item dl {
    font-size: 3.695085vw;
  }
}

.kakoubuhin .case .con_01 .flex .item dt {
  width: 20%;
}

.kakoubuhin .case .con_01 .flex .item dd {
  width: 80%;
}

.kakoubuhin .case .con_01 .flex .item dt, .kakoubuhin .case .con_01 .flex .item dd {
  padding-bottom: 6px;
  border-bottom: solid 1px #dddddd;
  margin-bottom: 6px;
  font-size: .8rem;
  font-weight: 100;
}

.kakoubuhin .case .con_01 .flex .item dt:last-of-type, .kakoubuhin .case .con_01 .flex .item dd:last-of-type {
  border: 0;
}

.kakoubuhin .reason {
  border-top: solid 5px #fea361;
  padding-top: 60px;
}

.kakoubuhin .reason h2 {
  margin-bottom: 45px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .reason .content {
    padding: 0;
  }
}

.kakoubuhin .reason .flex {
  align-items: stretch;
}

.kakoubuhin .reason .item {
  width: 48%;
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 6px 6px #e5e4c2;
  box-shadow: 6px 6px #e5e4c2;
  padding: 30px;
  margin-bottom: 60px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .reason .item {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .reason .item {
    width: 100%;
    padding: 21px;
  }
}

.kakoubuhin .reason .item .title {
  max-width: 170px;
  width: 100%;
  padding: 9px 12px;
  margin: 0 0 30px;
  background: #fff100;
  border-radius: 50px;
  text-align: center;
  -webkit-box-shadow: 4px 4px #ecdf00;
  box-shadow: 4px 4px #ecdf00;
  font-size: 1rem;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .reason .item .title {
    font-size: 1.88684vw;
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .reason .item .title {
    font-size: 4.10565vw;
    padding: 5px;
    margin: 0 auto 15px;
  }
}

.kakoubuhin .reason .item p {
  letter-spacing: .05em;
  line-height: 1.8em;
  font-size: 1.2rem;
}

@media screen and (max-width: 1520px) {
  .kakoubuhin .reason .item p {
    text-align: justify;
  }
  .kakoubuhin .reason .item p br {
    display: none;
  }
}

@media screen and (max-width: 896px) {
  .kakoubuhin .reason .item p {
    font-size: 2.264208vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .reason .item p {
    font-size: 4.92678vw;
  }
}

.kakoubuhin .voice {
  margin-bottom: 120px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .voice {
    margin-bottom: 90px;
  }
}

.kakoubuhin .voice .contact-link {
  margin-bottom: 90px;
}

.kakoubuhin .voice h2 {
  position: relative;
  font-size: 1.8rem;
  margin-bottom: 90px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .voice h2 {
    font-size: 3.396312vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .voice h2 {
    font-size: 7.39017vw;
  }
}

.kakoubuhin .voice h2:before, .kakoubuhin .voice h2:after {
  position: absolute;
  width: 100%;
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
  left: 50%;
}

.kakoubuhin .voice h2:before {
  content: attr(data-text);
  top: -20px;
  font-size: 1rem;
  font-weight: 700;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .voice h2:before {
    font-size: 1.88684vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .voice h2:before {
    font-size: 4.10565vw;
  }
}

.kakoubuhin .voice h2:after {
  content: "";
  height: 12px;
  border-top: solid 1px #3690b8;
  border-bottom: solid 1px #3690b8;
  bottom: -30px;
}

.kakoubuhin .voice .item {
  width: 29%;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .voice .item {
    width: 100%;
    margin-bottom: 60px;
  }
  .kakoubuhin .voice .item:last-of-type {
    margin-bottom: 0;
  }
}

.kakoubuhin .voice .item img {
  margin: 0 auto 30px;
  width: 50%;
  display: block;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .voice .item img {
    width: 180px;
  }
}

.kakoubuhin .voice .item .title {
  text-align: center;
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 1rem;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .voice .item .title {
    font-size: 1.88684vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .voice .item .title {
    font-size: 4.10565vw;
  }
}

.kakoubuhin .voice .item p {
  font-size: 0.9rem;
  line-height: 1.8em;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .voice .item p {
    font-size: 1.698156vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .voice .item p {
    font-size: 3.695085vw;
  }
}

.kakoubuhin .contact h2 {
  position: relative;
  padding: 12px;
  background: #f1703d;
  color: #fff;
  font-size: 2.3rem;
  font-weight: 700;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .contact h2 {
    font-size: 4.339732vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact h2 {
    font-size: 9.442995vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact h2 {
    font-size: 1.4rem;
  }
}

.kakoubuhin .contact h2:before {
  position: absolute;
  content: "";
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
  bottom: -30px;
  left: 50%;
  width: 0;
  height: 0;
  border-width: 30px 22.5px 0 22.5px;
  border-color: #f1703d transparent transparent transparent;
  border-style: solid;
}

.kakoubuhin .contact .content {
  padding-top: 60px;
}

.kakoubuhin .contact .copy {
  margin: 20px;
}
.kakoubuhin .contact .subcopy {
  margin: 30px;
  font-size:1rem;
  text-align:center;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .contact .copy {
    margin: 0 auto 20px;
    font-size: 1rem;
  }
  .kakoubuhin .contact .subcopy {
    margin: 0 auto 30px;
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .copy {
    margin: 0 auto 20px;
    font-size: .9rem;
  }
  .kakoubuhin .contact .subcopy {
    margin: 0 auto 30px;
    font-size: 0.75rem;
  }
}

.kakoubuhin .contact .copy a {
  color: #3690b8;
  border-bottom: solid 1px #3690b8;
}

.kakoubuhin .contact .form {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.kakoubuhin .contact .form dt, .kakoubuhin .contact .form dd {
  background: #fff;
  -webkit-box-shadow: 3px 3px #e5e4c2;
  box-shadow: 3px 3px #e5e4c2;
  font-size: 0.9rem;
  margin-bottom: 9px;
  text-align: left;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .contact .form dt, .kakoubuhin .contact .form dd {
    font-size: 1.698156vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form dt, .kakoubuhin .contact .form dd {
    font-size: 3.695085vw;
  }
}

.kakoubuhin .contact .form dt {
  width: 25%;
  padding: 20px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form dt {
    width: 100%;
    margin-bottom: 0;
    padding: 15px 15px 0;
  }
}

.kakoubuhin .contact .form dd {
  width: 73%;
  padding: 20px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form dd {
    width: 100%;
  }
}

.kakoubuhin .contact .form dd ul p {
  font-size: 1.1rem;
  margin-bottom: 9px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .contact .form dd ul p {
    font-size: 2.075524vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form dd ul p {
    font-size: 4.516215vw;
  }
}

.kakoubuhin .contact .form dd ul li {
  position: relative;
  font-size: 0.9rem;
  padding-left: 18px;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .contact .form dd ul li {
    font-size: 1.698156vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form dd ul li {
    font-size: 3.695085vw;
  }
}

.kakoubuhin .contact .form dd ul li:last-of-type {
  margin-bottom: 9px;
}

.kakoubuhin .contact .form dd ul li:before {
  position: absolute;
  content: "";
  -webkit-transform: translateY(-50%) translateX(0);
  transform: translateY(-50%) translateX(0);
  top: 50%;
  left: 0;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #f1703d;
}

.kakoubuhin .contact .form input, .kakoubuhin .contact .form textarea {
  padding: 6px;
  border-radius: 5px;
  background: #f2f6f8;
  -webkit-box-shadow: 2px 2px 4px #dfeaee inset;
  box-shadow: 2px 2px 4px #dfeaee inset;
}

.kakoubuhin .contact .form input::-webkit-input-placeholder, .kakoubuhin .contact .form textarea::-webkit-input-placeholder {
  color: #999;
}

.kakoubuhin .contact .form input::-moz-placeholder, .kakoubuhin .contact .form textarea::-moz-placeholder {
  color: #999;
}

.kakoubuhin .contact .form input:-ms-input-placeholder, .kakoubuhin .contact .form textarea:-ms-input-placeholder {
  color: #999;
}

.kakoubuhin .contact .form input::-ms-input-placeholder, .kakoubuhin .contact .form textarea::-ms-input-placeholder {
  color: #999;
}

.kakoubuhin .contact .form input::placeholder, .kakoubuhin .contact .form textarea::placeholder {
  color: #999;
}

.kakoubuhin .contact .form input {
  max-width: 380px;
  width: 100%;
}

.kakoubuhin .contact .form textarea {
  height: 145px;
}

.kakoubuhin .contact .form .w_short input:first-of-type {
  width: 110px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form .w_short input:first-of-type {
    width: 80px;
  }
}

.kakoubuhin .contact .form .w_short input:last-of-type {
  width: 155px;
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form .w_short input:last-of-type {
    width: 100px;
  }
}

.kakoubuhin .contact .form .w_short p {
  color: #999;
  font-size: 0.8rem;
  display: inline-block;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .contact .form .w_short p {
    font-size: 1.509472vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form .w_short p {
    font-size: 3.28452vw;
  }
}

.kakoubuhin .contact .form .w_100 input, .kakoubuhin .contact .form .w_100 textarea {
  max-width: inherit;
  width: 100%;
}

.kakoubuhin .contact .form .w_100 > p {
  color: #f1703d;
  font-size: 2rem;
  font-family: 'Fira Sans', sans-serif;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .contact .form .w_100 > p {
    font-size: 3.77368vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form .w_100 > p {
    font-size: 8.2113vw;
  }
}

.kakoubuhin .contact .form .w_100 > p.tel-icon:before {
  position: relative;
  content: "";
  display: inline-block;
  background-image: url("/kakoubuhin_parts/images/kakoubuhin/contact-link_icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  top: 5px;
  left: 5px;
  width: 32px;
  height: 32px;
}

.kakoubuhin .contact .form .w_100 > p span {
  display: block;
  font-size: 0.85rem;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .contact .form .w_100 > p span {
    font-size: 1.603814vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form .w_100 > p span {
    font-size: 3.4898025vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form .w_100 > p span {
    display: block;
  }
}

.kakoubuhin .contact .form button{
  width: 90%;
  display: block;
  max-width: 360px;
  margin: 0 auto;
}

.kakoubuhin .contact .form #button {
  padding: 12px;
  margin: 0 auto 60px;
  background: #f1703d;
  border-radius: 50px;
}

.kakoubuhin .contact .form button p {
  font-size: 1.3rem;
  color: #fff;
  font-weight: 700;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .contact .form button p {
    font-size: 2.452892vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form button p {
    font-size: 5.337345vw;
  }
}

.kakoubuhin .contact .form button p input {
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  font-size: 1.3rem;
}

@media screen and (max-width: 896px) {
  .kakoubuhin .contact .form button p input {
    font-size: 2.452892vw;
  }
}

@media screen and (max-width: 480px) {
  .kakoubuhin .contact .form button p input {
    font-size: 5.337345vw;
  }
}

.kakoubuhin .contact .form .flex {
  align-items: stretch;
  margin-bottom: 45px;
}

.spbr {
  display: none;
}

@media screen and (max-width: 480px) {
  .spbr {
    display: block;
  }
}

.required::after{
  content:"必須";
  color:#f1703d;
  margin: 0 0 0 1em;
}


/*メールフォーム の改修に伴う更新　福田 悠太 2023.01.25*/
.paragraph{
  margin:0 0 1em;
}

.paragraph a{
  color:#f1703d;

}

.stepchart {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width:90%;
  margin:0 auto 1.5em;
}

.stepchart::before {
  content: "";
  width:70%;
  height: 1px;
  background: #f1703d;
  position: absolute;
  z-index: 0;
  left: 15%;
  top:25px;
}

.stepchart li{
  position: relative;
  width: 30%;
  text-align: center;
  font-size:1em;
  letter-spacing: .1em;
}
.stepchart li::before{
  content:attr(data-text);
  display: block;
  text-align: center;
  color:#f1703d;
  font-size:1.5em;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  border:1px solid #f1703d;
  background: #fff;
  margin: 0 auto 0.5rem;
  font-weight: 600;

}

.stepchart li.current{
  color:#f1703d;
}

.stepchart li.current::before{
  color:#fff;
  border:1px solid #f1703d;
  background: #f1703d;
}

#button[disabled]{
  pointer-events: none;
  color:#fff;
  background: #cac9ab !important;
}

.screen-reader-response{
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  height: auto !important;
  text-align: center !important;
  margin: 0 0 1em !important;
  font-weight: 600 !important;
  font-size:2em !important;
  color:#f1703d !important;
  clip-path:none !important;
}