@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&family=Noto+Serif+JP:wght@400;500;700&family=Playfair+Display+SC&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box; }

/*============================================================================
	cheader
=============================================================================*/
#breadcrumbs {
  margin: auto;
  padding-top: 10px;
  width: 90%;
  max-width: 1200px; }
  #breadcrumbs ol li {
    font-size: 1.4rem;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400; }
    #breadcrumbs ol li:not(:last-of-type)::after {
      content: '\00ff1e';
      margin-left: 10px;
      font-size: 1.2rem; }
    #breadcrumbs ol li + li {
      margin-left: 10px; }
    #breadcrumbs ol li a {
      color: #080528;
      font-size: 1.4rem; }
  @media (max-width: 1024px) {
    #breadcrumbs {
      margin-top: 80px; }
      #breadcrumbs ol li {
        font-size: 1.2rem; }
        #breadcrumbs ol li:not(:last-of-type)::after {
          margin-left: 5px;
          font-size: 1.0rem; }
        #breadcrumbs ol li + li {
          margin-left: 5px; }
        #breadcrumbs ol li a {
          font-size: 1.2rem; } }
  @media (max-width: 480px) {
    #breadcrumbs {
      margin-top: 60px; } }

#cheaderArea {
  width: 100%;
  height: 380px;
  background: url("../img/common/bg_mainheader.jpg") no-repeat center right;
  background-size: contain; }
  #cheaderArea h2 {
    margin: auto;
    width: 100%;
    height: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
    visibility: hidden; }
    #cheaderArea h2 .enWrap {
      width: 100%;
      height: 80px;
      text-align: center;
      box-sizing: border-box;
      overflow: hidden;
      display: block;
      position: relative; }
      @media (max-width: 1400px) {
        #cheaderArea h2 .enWrap {
          height: 60px; } }
      #cheaderArea h2 .enWrap span {
        color: #080528;
        font-family: 'Playfair Display SC', serif;
        font-size: 11rem;
        letter-spacing: 0.18em;
        text-indent: 0.18em;
        line-height: 0.64;
        transform: translateY(150%);
        -webkit-transition: all .8s;
        transition: all .8s;
        visibility: hidden; }
        @media (max-width: 1400px) {
          #cheaderArea h2 .enWrap span {
            font-size: 8rem; } }
      #cheaderArea h2 .enWrap::before {
        content: '';
        width: 100%;
        height: 1px;
        background: #080528;
        position: absolute;
        left: 0;
        bottom: 0;
        transform: scale(0, 1);
        transform-origin: center;
        -webkit-transition: all .8s;
        transition: all .8s;
        visibility: hidden; }
    #cheaderArea h2 .jpWrap {
      margin: 35px auto 0;
      height: 38px;
      text-align: center;
      overflow: hidden;
      display: block; }
      #cheaderArea h2 .jpWrap span {
        color: #080528;
        font-size: 3.0rem;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 500;
        letter-spacing: 0.4em;
        text-indent: 0.4em;
        line-height: 1;
        transform: translateY(-100%);
        -webkit-transition: all .8s;
        transition: all .8s;
        visibility: hidden; }
    #cheaderArea h2.active {
      height: 340px;
      visibility: visible; }
      #cheaderArea h2.active .enWrap span {
        transform: translateY(0);
        visibility: visible; }
      #cheaderArea h2.active .enWrap::before {
        transform: scale(1, 1);
        visibility: visible; }
      #cheaderArea h2.active .jpWrap span {
        transform: translateY(0);
        visibility: visible; }
  @media (max-width: 1024px) {
    #cheaderArea {
      height: 240px; }
      #cheaderArea h2 .enWrap {
        height: 46px; }
        #cheaderArea h2 .enWrap span {
          font-size: 6rem;
          letter-spacing: 0.1em;
          text-indent: 0.1em;
          line-height: 0.64; }
      #cheaderArea h2 .jpWrap {
        margin: 20px auto 0;
        height: 40px; }
        #cheaderArea h2 .jpWrap span {
          font-size: 3.0rem;
          letter-spacing: 0.2em;
          text-indent: 0.2em;
          line-height: 1; }
      #cheaderArea h2.active {
        height: 240px; } }
  @media (max-width: 480px) {
    #cheaderArea {
      height: 170px; }
      #cheaderArea h2 .enWrap {
        height: 26px; }
        #cheaderArea h2 .enWrap span {
          font-size: 3.5rem;
          letter-spacing: 0.1em;
          text-indent: 0.1em;
          line-height: 0.64; }
      #cheaderArea h2 .jpWrap {
        margin: 10px auto 0;
        height: 38px; }
        #cheaderArea h2 .jpWrap span {
          font-size: 2.0rem;
          letter-spacing: 0.2em;
          text-indent: 0.2em;
          line-height: 1; }
      #cheaderArea h2.active {
        height: 170px; } }

#cpageHeader {
  background: #e6e6ed; }
  #cpageHeader #breadcrumbs {
    margin-bottom: 5px; }
  #cpageHeader #cpageTitleBox {
    margin: auto;
    padding: 25px 45px 0 45px;
    width: 90%;
    max-width: 1200px;
    background: #FFFFFF;
    box-sizing: border-box;
    /*visibility: hidden;
    opacity: 0;*/
    overflow: hidden; }
    #cpageHeader #cpageTitleBox h2 {
      padding: 35px 0 0 28px;
      height: 220px;
      background: url("../img/products/bar_cpageTitle.svg") repeat-y 0 0;
      box-sizing: border-box; }
      #cpageHeader #cpageTitleBox h2 .en {
        margin-bottom: 25px;
        letter-spacing: 0.1em;
        line-height: 1.2;
        display: block; }
      #cpageHeader #cpageTitleBox h2 .jp {
        font-size: 4.5rem;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 500;
        letter-spacing: 0.1em;
        line-height: 1.2;
        display: block; }
    @media (max-width: 1024px) {
      #cpageHeader #cpageTitleBox {
        padding: 20px 30px 0 30px; }
        #cpageHeader #cpageTitleBox h2 {
          padding-bottom: 50px;
          height: auto; }
          #cpageHeader #cpageTitleBox h2 .en {
            margin-bottom: 10px; }
          #cpageHeader #cpageTitleBox h2 .jp {
            font-size: 3.0rem; } }
    @media (max-width: 480px) {
      #cpageHeader #cpageTitleBox {
        padding: 10px 20px 0 20px; }
        #cpageHeader #cpageTitleBox h2 {
          padding: 15px 0 30px 20px;
          height: auto; }
          #cpageHeader #cpageTitleBox h2 .en {
            margin-bottom: 10px;
            font-size: 1.2rem; }
          #cpageHeader #cpageTitleBox h2 .jp {
            font-size: 2.2rem;
            line-height: 1.3; } }
  body.itempage #cpageHeader #cpageTitleBox {
    padding: 20px 45px;
    position: relative; }
    body.itempage #cpageHeader #cpageTitleBox::before {
      content: '';
      width: 9px;
      height: calc(100% - 20px);
      background: url("../img/products/bar_cpageTitle.svg") repeat-y 0 0;
      display: block;
      position: absolute;
      left: 45px;
      bottom: 0; }
    @media (max-width: 480px) {
      body.itempage #cpageHeader #cpageTitleBox {
        padding: 10px 20px; }
        body.itempage #cpageHeader #cpageTitleBox::before {
          height: calc(100% - 10px);
          left: 20px; } }
    body.itempage #cpageHeader #cpageTitleBox .pcode {
      margin: 0 auto 10px;
      text-align: right; }
      body.itempage #cpageHeader #cpageTitleBox .pcode span {
        padding: 0 10px;
        color: #9292af;
        font-size: 1.2rem;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        letter-spacing: 0.1em;
        text-align: right;
        border: 1px solid #9292af;
        box-sizing: border-box;
        display: inline-block; }
    body.itempage #cpageHeader #cpageTitleBox h2 {
      margin: 0 auto 60px;
      padding: 0 0 0 28px;
      height: auto;
      background: none; }
      @media (max-width: 480px) {
        body.itempage #cpageHeader #cpageTitleBox h2 {
          margin: 0 auto 30px; } }
    body.itempage #cpageHeader #cpageTitleBox .itemtagList {
      margin-left: 28px; }
      body.itempage #cpageHeader #cpageTitleBox .itemtagList span {
        margin: 0 12px 10px 0;
        display: block; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span a {
          padding: 0 8px;
          color: #FFFFFF;
          font-size: 1.2rem;
          font-family: 'Noto Sans JP', sans-serif;
          font-weight: 400;
          height: 20px;
          line-height: 20px;
          display: block; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag11 {
          background: #cf3333; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag12 {
          background: #4780d1; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag13 {
          background: #a57426; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag14 {
          background: #ed8597; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag15 {
          background: #4e7269; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag21 {
          background: #cf3333; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag22 {
          background: #4780d1; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag23 {
          background: #a57426; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag24 {
          background: #ed8597; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag25 {
          background: #4e7269; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag31 {
          background: #cf3333; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag32 {
          background: #4780d1; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag33 {
          background: #a57426; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag34 {
          background: #ed8597; }
        body.itempage #cpageHeader #cpageTitleBox .itemtagList span.itemtag35 {
          background: #4e7269; }

@keyframes play {
  from {
    opacity: 0;
    transform: translateX(-100%); }
  to {
    opacity: 1;
    transform: translateX(0); } }
@keyframes maskOut {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(100%); } }
/*============================================================================
	OEM common
=============================================================================*/
article {
  padding: clamp(72px, 9.9996vw, 120px) 0; }
  article .mainTtl {
    margin: 0 auto clamp(30px, 4.8608vw, 50px);
    color: #10005c;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center; }
    article .mainTtl::after {
      content: '';
      margin: clamp(15px, 2.4304vw, 25px) auto 0;
      width: 150px;
      height: 10px;
      background: url("../img/common/ttlBar_navy.svg") repeat-x top left;
      display: block; }
    @media (max-width: 480px) {
      article .mainTtl {
        font-size: 2.2rem; } }
  article .btn {
    margin: auto; }
    article .btn a {
      margin: auto;
      color: #FFFFFF;
      font-size: 2.2rem;
      letter-spacing: 0.1em;
      max-width: 500px;
      width: 80%;
      height: 80px;
      text-align: center;
      line-height: 80px;
      background: #10005c;
      border: 1px solid #10005c;
      display: block;
      position: relative; }
      article .btn a .toggle {
        margin: auto;
        width: 15px;
        height: 15px;
        display: block;
        position: absolute;
        top: 0;
        left: auto;
        right: 36px;
        bottom: 0;
        -webkit-transition: all .4s;
        transition: all .4s;
        transform-origin: center; }
        article .btn a .toggle span {
          width: 15px;
          height: 15px;
          display: block;
          position: relative; }
          article .btn a .toggle span::before, article .btn a .toggle span::after {
            content: '';
            margin: auto;
            width: 100%;
            height: 1px;
            background: #FFFFFF;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0; }
          article .btn a .toggle span::after {
            transform: rotate(90deg); }
      article .btn a:hover {
        color: #10005c;
        background: #FFFFFF; }
        article .btn a:hover .toggle {
          transform: rotate(90deg); }
          article .btn a:hover .toggle span::before, article .btn a:hover .toggle span::after {
            background: #10005c; }
      @media (max-width: 1024px) {
        article .btn a {
          font-size: 1.8rem; }
          article .btn a .toggle {
            width: 10px;
            height: 10px; } }
      @media (max-width: 480px) {
        article .btn a {
          font-size: 1.4rem;
          width: 100%;
          height: 60px;
          line-height: 1.4;
          display: -webkit-flex;
          display: -moz-flex;
          display: flex;
          -webkit-justify-content: center;
          -moz-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center; }
          article .btn a .toggle {
            right: 20px; } }

/*============================================================================
	OEM TOP
=============================================================================*/
#oemHeadWrap {
  margin: auto;
  padding: 0;
  width: 100%; }
  #oemHeadWrap .titleBox {
    margin: auto;
    padding: clamp(30px, 4.8608vw, 50px) 0;
    max-width: 700px;
    width: 90%;
    --x-gradient: linear-gradient(90deg, #10005c 0 16px, transparent 0 calc(100% - 16px), #10005c calc(100% - 16px));
    --y-gradient: linear-gradient(#10005c 0 16px, transparent 0 calc(100% - 16px), #10005c calc(100% - 16px));
    background-image: var(--x-gradient), var(--y-gradient), var(--x-gradient), var(--y-gradient);
    background-repeat: no-repeat;
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    background-position: left top 7.5px, right 7.5px top, left bottom 7.5px, left 7.5px top;
    position: relative;
    z-index: 10; }
    #oemHeadWrap .titleBox p {
      color: #10005c;
      font-size: 2.5rem;
      font-weight: 500;
      line-height: 1.44;
      letter-spacing: 0.1em;
      text-align: center; }
  #oemHeadWrap .readText {
    margin: clamp(48px, 6.6672vw, 80px) auto clamp(60px, 8.3328vw, 100px);
    max-width: 800px;
    width: 90%;
    position: relative;
    z-index: 10; }
    #oemHeadWrap .readText p {
      letter-spacing: 0.1em;
      line-height: 2; }
  #oemHeadWrap picture {
    margin: -20% 0 0;
    width: 100%;
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1; }
    #oemHeadWrap picture::before {
      content: '';
      padding-top: 50.47%;
      display: block; }
    #oemHeadWrap picture img, #oemHeadWrap picture source {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0; }
  @media (max-width: 480px) {
    #oemHeadWrap .titleBox p {
      font-size: 2.0rem; } }

#issuesArea {
  background: #E9EFF3; }
  #issuesArea .issuesBox {
    margin: auto;
    padding: clamp(24px, 3.8892vw, 40px) clamp(48px, 6.6672vw, 80px);
    max-width: 850px;
    width: 84%;
    background: #FFFFFF; }
    #issuesArea .issuesBox ul li {
      padding-left: 1.5em;
      color: #080528;
      font-size: 2.2rem;
      font-weight: 500;
      line-height: 1.5;
      position: relative; }
      #issuesArea .issuesBox ul li + li {
        margin-top: 0.5em; }
      #issuesArea .issuesBox ul li::before {
        content: '';
        width: 14px;
        height: 20px;
        background: url("../img/oem/icon_check.svg") no-repeat center center/contain;
        display: block;
        position: absolute;
        top: 0.5em;
        left: 0; }
    @media (max-width: 480px) {
      #issuesArea .issuesBox {
        padding: clamp(24px, 3.8892vw, 40px); }
        #issuesArea .issuesBox ul li {
          font-size: 1.6rem; } }

#reasonArea {
  background: url("../img/oem/bg01.jpg") repeat center center; }
  #reasonArea .mainTtl {
    margin-bottom: clamp(48px, 6.6672vw, 80px);
    color: #FFFFFF; }
    #reasonArea .mainTtl::after {
      background: url("../img/common/ttlBar_white.svg") repeat-x top left; }
  #reasonArea .container {
    max-width: 1080px;
    width: 80%; }
    #reasonArea .container section {
      margin: 0 7.4% clamp(36px, 5.8338vw, 60px) 0;
      padding: clamp(21px, 3.4034vw, 35px);
      width: 46.3%;
      background: #FFFFFF; }
      #reasonArea .container section:nth-of-type(2n) {
        margin-right: 0; }
      #reasonArea .container section h3 {
        padding-bottom: 5px;
        color: #10005C;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        border-bottom: 1px solid #10005C; }
        #reasonArea .container section h3 .num {
          margin-right: 20px;
          font-size: 6.0rem;
          font-weight: 700;
          line-height: 1; }
        #reasonArea .container section h3 .jp {
          margin: auto 0 0 0;
          font-size: 2.8rem;
          font-weight: 700;
          letter-spacing: 0.1em;
          line-height: 1.25; }
      #reasonArea .container section figure {
        margin: clamp(12px, 1.9446vw, 20px) auto;
        width: 70%; }
      #reasonArea .container section p {
        color: #10005C;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: 1.8rem;
        line-height: 1.4;
        letter-spacing: 0.1em; }
      @media (max-width: 1024px) {
        #reasonArea .container section {
          margin: 0 0 clamp(36px, 5.8338vw, 60px) 0;
          width: 100%; }
          #reasonArea .container section figure {
            width: 40%;
            float: left; }
          #reasonArea .container section p {
            margin: clamp(12px, 1.9446vw, 20px);
            width: 50%;
            float: right; } }
      @media (max-width: 480px) {
        #reasonArea .container section h3 .num {
          margin-right: 10px;
          font-size: 3.0rem; }
        #reasonArea .container section h3 .jp {
          font-size: 1.8rem; }
        #reasonArea .container section figure {
          width: 70%;
          float: none; }
        #reasonArea .container section p {
          margin: 0;
          font-size: 1.4rem;
          width: 100%;
          float: none; } }

#bizStyleArea {
  margin: auto;
  max-width: 910px;
  width: 80%; }
  #bizStyleArea section {
    margin: clamp(42px, 5.8332vw, 70px) auto 0;
    max-width: 800px; }
    #bizStyleArea section h3 {
      margin-bottom: clamp(15px, 2.4304vw, 25px);
      color: #080528;
      font-size: 2.8rem;
      font-weight: 600;
      line-height: 1.4;
      text-align: center; }
    #bizStyleArea section table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #707070; }
      #bizStyleArea section table tr th {
        padding: clamp(12px, 1.9446vw, 20px);
        color: #FFFFFF;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1.8rem;
        font-weight: 700;
        text-align: center;
        background: #10005c;
        border: 1px solid #707070; }
      #bizStyleArea section table tr td {
        padding: clamp(12px, 1.9446vw, 20px);
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1.8rem;
        border: 1px solid #707070; }
      @media (max-width: 1024px) {
        #bizStyleArea section table tr th {
          font-size: 1.4rem; }
        #bizStyleArea section table tr td {
          font-size: 1.4rem; } }
    @media (max-width: 480px) {
      #bizStyleArea section h3 {
        font-size: 2.0rem; }
      #bizStyleArea section table tr th {
        width: 100%;
        display: block; }
      #bizStyleArea section table tr td {
        width: 100%;
        display: block; } }
  #bizStyleArea .consultBox {
    margin: clamp(54px, 7.5vw, 90px) auto 0;
    padding: clamp(45px, 6.2496vw, 75px);
    text-align: center;
    border: 4px double #10005c; }
    #bizStyleArea .consultBox .catch {
      font-size: 2.0rem; }
    #bizStyleArea .consultBox .btn {
      margin-top: clamp(30px, 4.8608vw, 50px); }
    @media (max-width: 1024px) {
      #bizStyleArea .consultBox .catch {
        font-size: 1.8rem; } }
    @media (max-width: 480px) {
      #bizStyleArea .consultBox {
        padding: 20px; }
        #bizStyleArea .consultBox .catch {
          font-size: 1.6rem; } }

#supportArea {
  background: #E9EFF3; }
  #supportArea section {
    margin: auto;
    padding: clamp(36px, 5.8338vw, 60px) clamp(45px, 6.2496vw, 75px);
    max-width: 1200px;
    width: 90%;
    background: #FFFFFF; }
    @media (max-width: 480px) {
      #supportArea section {
        padding: 30px 20px; } }
    #supportArea section h3 {
      margin: 0 0 clamp(24px, 3.8892vw, 40px);
      padding-bottom: 3px;
      width: fit-content;
      border-bottom: 1px solid #10005c;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex; }
      #supportArea section h3 .num {
        font-size: 5.0rem;
        font-weight: 700;
        line-height: 1; }
      #supportArea section h3 .jp {
        margin: auto 0 0 20px;
        font-size: 2.8rem;
        font-weight: 700;
        line-height: 1.4; }
      @media (max-width: 1024px) {
        #supportArea section h3 {
          width: 100%; }
          #supportArea section h3 .num {
            font-size: 4.0rem; }
          #supportArea section h3 .jp {
            font-size: 2.2rem; } }
      @media (max-width: 480px) {
        #supportArea section h3 .num {
          font-size: 3.0rem; }
        #supportArea section h3 .jp {
          font-size: 1.6rem; } }
    #supportArea section p {
      font-size: 2.0rem; }
    #supportArea section ul {
      margin: clamp(21px, 3.4034vw, 35px) auto 0;
      padding: clamp(12px, 1.9446vw, 20px) clamp(24px, 3.8892vw, 40px);
      border: 1px solid #10005c; }
      #supportArea section ul li {
        padding-left: 1.5em;
        color: #080528;
        font-size: 2.0rem;
        font-weight: 500;
        line-height: 1.5;
        position: relative; }
        #supportArea section ul li + li {
          margin-top: 0.5em; }
        #supportArea section ul li::before {
          content: '';
          width: 12px;
          height: 18px;
          background: url("../img/oem/icon_check.svg") no-repeat center center/contain;
          display: block;
          position: absolute;
          top: 0.5em;
          left: 0; }
    #supportArea section .imageBox {
      margin: clamp(24px, 3.8892vw, 40px) clamp(-33px, -5.34vw, -55px) 0;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      position: relative; }
      #supportArea section .imageBox figure {
        width: 23.7%; }
    #supportArea section .btn {
      margin-top: clamp(36px, 5.8338vw, 60px); }
      #supportArea section .btn a {
        font-size: 1.8rem;
        max-width: 420px;
        height: 70px;
        line-height: 70px;
        letter-spacing: 0; }
        #supportArea section .btn a .toggle {
          right: 15px; }
    #supportArea section + section {
      margin-top: clamp(48px, 6.6672vw, 80px); }
    @media (max-width: 1024px) {
      #supportArea section p {
        font-size: 1.6rem; }
      #supportArea section ul li {
        font-size: 1.6rem; }
        #supportArea section ul li::before {
          width: 10px;
          height: 14px; } }
    @media (max-width: 480px) {
      #supportArea section p {
        font-size: 1.4rem; }
      #supportArea section ul li {
        font-size: 1.4rem; }
      #supportArea section .imageBox {
        margin: clamp(24px, 3.8892vw, 40px) auto 0;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        #supportArea section .imageBox figure {
          margin: 0 4% 10px 0;
          width: 48%; }
          #supportArea section .imageBox figure:nth-of-type(2n) {
            margin-right: 0; }
      #supportArea section .btn a {
        font-size: 1.4rem;
        max-width: 420px;
        height: 60px;
        line-height: 1.4;
        letter-spacing: 0; }
        #supportArea section .btn a .toggle {
          right: 10px; } }

#developFlowArea {
  background: url("../img/oem/bg01.jpg") repeat center center; }
  #developFlowArea .mainTtl {
    margin-bottom: clamp(48px, 6.6672vw, 80px);
    color: #FFFFFF; }
    #developFlowArea .mainTtl::after {
      background: url("../img/common/ttlBar_white.svg") repeat-x top left; }
  #developFlowArea .topRead {
    margin: 0 auto clamp(72px, 9.9996vw, 120px);
    color: #FFFFFF;
    font-size: 1.8rem;
    width: 90%;
    max-width: 1024px; }
    @media (max-width: 480px) {
      #developFlowArea .topRead {
        font-size: 1.6rem; } }
  #developFlowArea ol {
    margin: auto;
    width: 90%;
    max-width: 1200px; }
    #developFlowArea ol > li {
      margin: 0 3% 0 0;
      padding-bottom: clamp(24px, 3.8892vw, 40px);
      width: 22.75%;
      background: #FFFFFF;
      border-radius: clamp(18px, 2.9162vw, 30px);
      position: relative; }
      #developFlowArea ol > li .num {
        margin: -70px auto 0;
        width: 140px; }
      #developFlowArea ol > li .ttl {
        margin: 15px 15px 20px;
        color: #10005c;
        font-size: 3.0rem;
        font-weight: 700;
        line-height: 1.2;
        text-align: center; }
      #developFlowArea ol > li ul {
        margin: 0 20px;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400; }
        #developFlowArea ol > li ul li {
          margin-left: 1.5em;
          color: #000000;
          list-style: disc; }
      #developFlowArea ol > li:nth-of-type(4) {
        margin-right: 0; }
      #developFlowArea ol > li + li::before {
        content: '';
        margin: auto;
        width: 26px;
        aspect-ratio: 26 / 44;
        background: url("../img/oem/allow.svg") no-repeat center center;
        display: block;
        position: absolute;
        top: 0;
        left: -11.5%;
        right: auto;
        bottom: 0; }
    @media (max-width: 1024px) {
      #developFlowArea ol {
        display: block; }
        #developFlowArea ol > li {
          margin: 0 0 40px;
          padding: 10px;
          width: 100%;
          display: -webkit-flex;
          display: -moz-flex;
          display: flex; }
          #developFlowArea ol > li .num {
            margin: auto 0;
            width: 80px;
            height: 80px; }
          #developFlowArea ol > li .ttl {
            margin: auto 0 auto 20px; }
          #developFlowArea ol > li ul {
            margin: 0 0 0 auto;
            width: 40%; }
          #developFlowArea ol > li + li::before {
            transform: rotate(90deg);
            top: auto;
            left: 0;
            right: 0;
            bottom: 100%; } }
    @media (max-width: 480px) {
      #developFlowArea ol > li {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
        #developFlowArea ol > li .num {
          width: 40px;
          height: 40px; }
        #developFlowArea ol > li .ttl {
          font-size: 2.0rem; }
        #developFlowArea ol > li ul {
          margin: 0 0 0 60px;
          width: 100%; }
        #developFlowArea ol > li + li::before {
          transform: rotate(90deg);
          top: auto;
          left: 0;
          right: 0;
          bottom: 100%; } }

#stepArea .topRead {
  margin: 0 auto clamp(36px, 5.8338vw, 60px);
  font-size: 1.8rem;
  max-width: 860px;
  width: 90%; }
  @media (max-width: 480px) {
    #stepArea .topRead {
      font-size: 1.6rem; } }
#stepArea dl {
  margin: auto;
  max-width: 660px;
  width: 84%;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  position: relative; }
  #stepArea dl dt {
    margin-right: -58px;
    width: 116px;
    position: relative;
    z-index: 2; }
  #stepArea dl dd {
    padding: 15px clamp(30px, 4.8608vw, 50px) 15px clamp(60px, 8.3328vw, 100px);
    width: calc(100% - 58px);
    background: #E9EFF3;
    border-radius: clamp(18px, 2.9162vw, 30px); }
    #stepArea dl dd .ttl {
      margin-bottom: 10px;
      font-size: 2.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 1.4; }
    #stepArea dl dd .read {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 1.8rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      line-height: 1.6; }
  #stepArea dl + dl {
    margin-top: clamp(36px, 5.8338vw, 60px); }
    #stepArea dl + dl::before {
      content: '';
      margin: auto;
      width: 5px;
      height: clamp(36px, 5.8338vw, 60px);
      background: #10005c;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: auto;
      transform: translateY(-100%); }
  @media (max-width: 480px) {
    #stepArea dl {
      width: 90%; }
      #stepArea dl dt {
        margin-right: -20px;
        width: 60px; }
      #stepArea dl dd {
        padding: 10px 10px 10px 30px;
        width: calc(100% - 20px); }
        #stepArea dl dd .ttl {
          font-size: 2.0rem; }
        #stepArea dl dd .read {
          font-size: 1.4rem; }
      #stepArea dl + dl::before {
        width: 3px; } }

#oemFaqArea {
  background: #E9EFF3; }
  #oemFaqArea .innerBox {
    margin: auto;
    max-width: 1200px;
    width: 90%; }
  #oemFaqArea .accordionBox {
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%; }
    #oemFaqArea .accordionBox .targetBtn {
      padding: clamp(6px, 0.9716vw, 10px) clamp(18px, 2.9162vw, 30px);
      color: #FFFFFF;
      font-size: 2.0rem;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.05em;
      height: 80px;
      background: #10005c;
      cursor: pointer;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative; }
      #oemFaqArea .accordionBox .targetBtn::before {
        content: 'Q.';
        margin-right: 0.5em;
        color: #FFFFFF;
        font-size: 2.5rem;
        font-weight: 700; }
      #oemFaqArea .accordionBox .targetBtn .toggle {
        margin: auto;
        padding: 25px;
        width: 80px;
        height: 80px;
        background: #FFFFFF;
        border: 1px solid #10005c;
        display: block;
        position: absolute;
        top: 0;
        left: auto;
        right: 0;
        bottom: 0; }
        #oemFaqArea .accordionBox .targetBtn .toggle span {
          width: 30px;
          height: 30px;
          display: block;
          position: relative; }
          #oemFaqArea .accordionBox .targetBtn .toggle span::before, #oemFaqArea .accordionBox .targetBtn .toggle span:after {
            content: '';
            margin: auto;
            width: 100%;
            height: 1px;
            background: #080528;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0; }
          #oemFaqArea .accordionBox .targetBtn .toggle span:after {
            transform: rotate(90deg); }
      @media (max-width: 480px) {
        #oemFaqArea .accordionBox .targetBtn {
          padding: 5px 40px 5px 10px;
          font-size: 1.6rem;
          height: auto;
          min-height: 40px; }
          #oemFaqArea .accordionBox .targetBtn::before {
            margin: 0 10px auto 0;
            font-size: 1.8rem; }
          #oemFaqArea .accordionBox .targetBtn .toggle {
            padding: 10px;
            width: 40px;
            height: 40px;
            bottom: auto; }
            #oemFaqArea .accordionBox .targetBtn .toggle span {
              width: 20px;
              height: 20px; } }
    #oemFaqArea .accordionBox .acdInner {
      padding: 0;
      width: 100%;
      max-height: 0;
      overflow: hidden;
      transition: .5s;
      transition-duration: .3s; }
      #oemFaqArea .accordionBox .acdInner .answerBox {
        padding: clamp(18px, 2.9162vw, 30px) clamp(18px, 2.9162vw, 30px) clamp(18px, 2.9162vw, 30px) clamp(45.6px, 6.3336vw, 76px);
        background: #FFFFFF;
        border-left: 1px solid #10005c;
        border-right: 1px solid #10005c;
        border-bottom: 1px solid #10005c;
        position: relative; }
        #oemFaqArea .accordionBox .acdInner .answerBox::before {
          content: 'A.';
          color: #10005c;
          font-size: 2.5rem;
          font-weight: 700;
          line-height: 1;
          position: absolute;
          top: clamp(21px, 3.4034vw, 35px);
          left: clamp(18px, 2.9162vw, 30px); }
        #oemFaqArea .accordionBox .acdInner .answerBox p {
          font-size: 1.8rem;
          line-height: 2; }
        @media (max-width: 480px) {
          #oemFaqArea .accordionBox .acdInner .answerBox::before {
            font-size: 1.8rem; }
          #oemFaqArea .accordionBox .acdInner .answerBox p {
            font-size: 1.4rem;
            line-height: 1.75; } }
    #oemFaqArea .accordionBox.active .targetBtn .toggle span:after {
      transform: rotate(0deg); }
    #oemFaqArea .accordionBox.active .acdInner {
      overflow-y: auto; }
    #oemFaqArea .accordionBox + .accordionBox {
      margin-top: clamp(30px, 4.8608vw, 50px); }

#inquiryArea .topRead {
  margin: 0 auto clamp(36px, 5.8338vw, 60px);
  font-size: 1.8rem;
  max-width: 860px;
  width: 90%; }
  @media (max-width: 480px) {
    #inquiryArea .topRead {
      font-size: 1.6rem; } }
#inquiryArea #formWrap {
  padding-bottom: 0; }
  #inquiryArea #formWrap form .horizontal-item + .horizontal-item {
    margin-left: 0; }
  #inquiryArea #formWrap form p.fl {
    margin-top: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    #inquiryArea #formWrap form p.fl span + input {
      margin-left: 1em; }
    #inquiryArea #formWrap form p.fl input[type="text"] {
      width: 70%; }
    #inquiryArea #formWrap form p.fl input + span {
      margin-left: 1em; }
    #inquiryArea #formWrap form p.fl.price span:first-of-type {
      width: 5em;
      text-align: left; }
    #inquiryArea #formWrap form p.fl.price input[type="text"] {
      width: 50%; }
  #inquiryArea #formWrap form .privacyBox {
    margin: clamp(60px, 8.3328vw, 100px) auto; }
    #inquiryArea #formWrap form .privacyBox p {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 1.8rem; }
      #inquiryArea #formWrap form .privacyBox p.agree {
        margin-top: clamp(24px, 3.8892vw, 40px);
        font-family: 'Noto Serif JP', serif;
        font-size: 2.4rem; }
        #inquiryArea #formWrap form .privacyBox p.agree span.mwform-checkbox-field label {
          padding-left: 32px; }
          #inquiryArea #formWrap form .privacyBox p.agree span.mwform-checkbox-field label input[type="checkbox"] + .mwform-checkbox-field-text::before {
            width: 20px;
            height: 20px; }
          #inquiryArea #formWrap form .privacyBox p.agree span.mwform-checkbox-field label input[type="checkbox"] + .mwform-checkbox-field-text::after {
            width: 14px;
            height: 8px; }
      @media (max-width: 480px) {
        #inquiryArea #formWrap form .privacyBox p {
          font-size: 1.4rem; }
          #inquiryArea #formWrap form .privacyBox p.agree {
            font-size: 1.8rem; } }
#inquiryArea .consultBox {
  margin: 0 auto;
  padding: clamp(45px, 6.2496vw, 75px);
  text-align: center;
  width: 80%;
  max-width: 910px;
  border: 4px double #10005c; }
  #inquiryArea .consultBox h3 {
    margin-bottom: clamp(12px, 1.9446vw, 20px);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.25; }
  #inquiryArea .consultBox .catch {
    font-size: 2.0rem; }
  #inquiryArea .consultBox .btn {
    margin-top: clamp(30px, 4.8608vw, 50px); }
  @media (max-width: 480px) {
    #inquiryArea .consultBox {
      padding: 20px; }
      #inquiryArea .consultBox h3 {
        font-size: 2.2rem; }
      #inquiryArea .consultBox .catch {
        font-size: 1.6rem; } }