@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* Overwrite */

.valcam-page a:hover.push {
    color: #014099;
  }

  .pc {    display: block;;}
  .sp {    display: none;;}
  .table_pc {    display: table-cell;;}
  .table_sp {    display: none;;}
  
  .valcam01 {    background: transparent
      radial-gradient(closest-side at 50% 40%, #ffffff 0%, #b1c6d4 110%) 0% 0%
      no-repeat padding-box;;
    padding: 1px 45px 45px 45px;;}

  .valcam01 p,
  .valcam02 p{    padding: 0;;}
  .valcam01__title {    font-size: 24px;;
    font-weight: 700;;
    margin-top: 44px;;
    display: flex;;
    /* justify-content: center;;
    */
    /* align-items: center;;
    ← 縦方向の中央揃え */
    flex-direction: column;;
    /* ← 要素を縦並びにする */
    padding-top: 20px;;}
  .valcam01__logo {    text-align: center;;
    width: 100%;;
    padding-bottom: 14px;;}

   .valcam01__logo img{    width: 28%;;}   

  .valcam01__logo_main {  text-align: center;;
  width: 100%;;}

  .valcam01__logo_main img {  /* text-align: center;;
  */
  width: 68%;;}

  .valcam01__logo_copy {  text-align: center;;
  width: 100%;;
  padding-top: 21px;;}

  .valcam01__logo_copy img {      padding-top: 8px;;
      /* text-align: center;;
      */
  width: 54%;;}

  .valcam01__table-area {      margin-top: 25px;;}
  .valcam01__table {      border: 1px solid #CCCCCC;;
      font-family: 'Noto Sans JP', sans-serif;;
      width: 100%;;}
  .valcam01__table th {      background-color: #C2C2C3;;
      text-align: center;;
      vertical-align: middle;;
      border: 1px solid black;;
      padding: 0;;
      line-height: 15px;;
      color: black;;}
  .valcam01__table tr:first-of-type th:nth-of-type(2){    padding: 5px 0;;}

  .valcam01__table td {      vertical-align: middle;;
      border: 1px solid #CCCCCC;;
      padding: 3px 0;;
      text-align: center;;}

  .valcam01__table td.td_cam {    text-align: center;;}

  .valcam__table td strong {    font-size: 16px;;}

 .valcam01__fig01 {    padding-top: 30px;;
    /* padding-bottom: 30px;;
    */
    text-align: center;;}

  .valcam01__feature01 {      flex-direction: column;;}
  .valcam01__fig01 img {    /* padding-top: 30px;;
    */
    width: 95%;;}
  .valcam01__feature img {    width: 95%;;}

  .features {    display: grid;;
    grid-template-columns: 3fr 2fr;;
    /* 2列 */
  /* margin: 0px 0 25px;;
    */
  /* height: 150px;;
    */}

  .features01 {    display: grid;;
    margin: 8px 0px 0px 0px;;
    font-size: 15px;;
    /* height: 150px;;
    */}

    .features01 ul {    padding: 0px 0px 0px 21px;;}


  /* グリッド内の列を明示的に固定 */
  .left  { grid-column: 1;;}
  .right { grid-column: 2;;}

  /* 子の .feature は単なる縦並びコンテナ */
  .feature {  display: flex;;
  flex-direction: column;;}

  /* 画像の基本スタイル */
  .feature img {  max-width: 65%;;
  height: auto;;
  margin: 5px auto;;}

  .left .feature02 ul {    margin-left: 10px;;
    font-size: 15px;;}

  .right .feature {  display: grid;;
  justify-items: center;;
  /* 横方向中央 */
  align-items: end;;
  /* 縦方向下揃え */
  min-height: 150px;;
  /* 下寄せを効かせるための高さ（調整可） */}

  .valcam01__text_s {    font-size: 15px;;
    letter-spacing: -0.03em;;
    /* 文字詰め少し狭くする */}


  .valcam02 {    background: transparent
      linear-gradient(
        180deg,
        #b1c6d4 0%,
        #dee8ee 22%,
        #ffffff 51%,
        #dee8ee 79%,
        #b1c6d4 100%
      )
      0% 0% no-repeat padding-box;;
    padding: 0 45px 70px 45px;;
    margin-top: -1px;;}

  .valcam02__title01 {    font-size: 24px;;
    font-weight: 700;;
    margin-bottom: 0px;;}

  .valcam02__title {    font-size: 18px;;
    font-weight: 700;;
    color: #014099;;
    /* margin-top: 20px;;
    */
    /* padding-left: 0;;
    */
    /* padding-bottom: 0;;
    */}
  .valcam02__fig01, .valcam02__fig02, .valcam02__fig03 {    padding-top: 21px;;
    padding-bottom: 50px;;
    text-align: center;;}
  .valcam02__fig01 img {    width: 100%;;}
  
  .valcam02__fig02 img {    width: 100%;;}

  .valcam02__fig03 img {    width: 50%;;}

  .valcam03 {    position: relative;;
    padding-bottom: 100px;;}

  .read {    margin-top: 20px;;
    margin-left: -5px;;}
  
/* ---------------------------------------------------------- */

  /* 20240703 VALCAM改修 */
  /* 20251212 VALCAM-XS改修 */

    .spring_icon {    display: grid;;
    grid-auto-flow: row;;
    /* 縦方向に自動配置 */
    justify-items: center;;
    /* 横方向中央揃え */
    row-gap: 6px;;
    /* 行間の余白 */
    margin: 5px 0px;;}

    .feature_icon {      display: grid;;
      grid-auto-flow: row;;
      /* 縦方向に自動配置 */
    justify-items: center;;
      /* 横方向中央揃え */
    row-gap: 6px;;
      /* 行間の余白 */
      margin: 10px 0px 10px;;}

    .app_icon {    display: grid;;
    grid-auto-flow: row;;
    /* 縦方向に自動配置 */
    justify-items: center;;
    /* 横方向中央揃え */
    row-gap: 6px;;
    /* 行間の余白 */
    margin: 10px 0px 10px;;}


  /* featureの表 */
    table th {    width: auto;;}
    
    .table-wrapper01 {    /* margin: 0 10px;;
    */
    overflow-x: auto;;
    -webkit-overflow-scrolling: touch;;}
    .responsive-table01 {    width: 100%;;
    border-collapse: collapse;;
    table-layout: fixed;;}
    .responsive-table01 th {    border: 1px solid #707070;;
    background: #C2C2C3;;
    padding: 1em 5px;;
    text-align: center;;
    vertical-align: middle;;
    font-weight: 700;;
    line-height: 1.25;;}
    .responsive-table01 td {    border: 1px solid #707070;;
    background: #ffffff;;
    padding: 5px 5px;;
    text-align: center;;
    vertical-align: middle;;}
    /* PC時の幅指定 */
    .responsive-table01 col.col01 { width: 14%;;}
    .responsive-table01 col.col02 { width: 14%;;}
    .responsive-table01 col.col03 { width: 14%;;}
    .responsive-table01 col.col04 { width: 20%;;}
    .responsive-table01 col.col05 { width: 14%;;}
    .responsive-table01 col.col06 { width: 14%;;}
    .responsive-table01 col.col07 { width: 14%;;}

    .col05 .spring_icon img {    width: 40%;;
    height: auto;;} 

    .col06 .app_icon img {    width: 60%;;
    height: auto;;}

    /* 表題 通常表示 */
    .normal {    display: inline;;}

    .responsive {    display: none;;}     

  /* feature */
    .valcam01__feature {      display: flex;;
      margin-top: 50px;;}

    #article .valcam01__feature h3 {      font-size: 22px;;
      font-weight: bold;;
      line-height: 32px;;
      background: none;;
      margin-bottom: 10px;;
      padding: 0;;}

    .valcam01__feature_textarea {      width: 60%;;}

    .valcam01__feature03 .valcam01__feature_textarea {      width: 73.7%;;
      padding-bottom: 15px;;}

    #article .valcam01__feature ul li {      background: url(../images/listitem2.svg) no-repeat 0px 7px;;
      font-size: 15px;;
      margin-left: 0;;}

    .valcam_product_01 {      width: 35.7%;;
      position: relative;;}

    .valcam_product_02 {      width: 26.3%;;
      position: relative;;}

    .valcam_product_01 img {      width: 100%;;
      max-width: 223px;;
      position: absolute;;
      bottom: -100;;}

    .valcam_product_02 img {      width: 100%;;
      max-width: 125px;;
      position: absolute;;
      top: 5px;;}

    .valcam_section table th {      font-size: 12px;;
      font-weight: bold;;
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica", "Arial", sans-serif;;}

    .valcam_section table td {      font-size: 12px;;
      font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica", "Arial", sans-serif;;}

    .valcam_section .valcam__table td strong {      font-size: 12px;;}

    .valcam_section .td_2line {      line-height: 16px;;}

    .valcam_section a {      text-decoration: none;;}

    .valcam01__feature.valcam01__feature02 {      flex-direction: column;;}
    .valcam01__text {      font-size: 15px;;}

    .valcam02__text {      font-size: 15px;;}
    #main .valcam01__text01  {      font-size: 15px;;
      font-weight: 700;;}
    
  /* 製品仕様 */

    /* 概要 & CADデータダウンロード*/

      /* ===== レイアウト（2列→1列） ===== */
                .doc-grid {                  display: grid;;
                  grid-template-columns: repeat(2, minmax(0, 1fr));;
                  /* 2列 */
                  gap: 10px 10px;;
                  grid-auto-flow: row dense;;
                  align-items: center;;
                  /* ← 垂直中央揃え（各セル） */
                  grid-template-areas: "left right";;
                  /* 左右の配置を固定 */
                  margin: 10px 0px 10px 0px;;}
                
                .doc01 { grid-area: left;;}

                .bigger {                  padding: 5px;;}

                .bigger a{                  text-decoration: none;;
                  display: flex;;
                  align-items: center;;
                  line-height: 1;;
                  font-size: 14px;;}

                .bigger a .icon_pdf{                  padding-right: 10px;;}                

                .doc02 {                  grid-area: right;;
                  justify-self: end;;}

                .btn_dl {                  padding: 5px 0px 5px 5px;;}

                .btn_daddl {                  margin-left: 1px;;
                  display: flex;;
                  justify-content: center;;
                  align-items: center;;
                  height: 30px;;
                  width: 280px;;
                  border: 1px solid #014099;;
                  color: #014099;;
                  border-radius: 4px;;
                  text-decoration: none;;
                  background-color: white;;
                  /* margin: 10px;;
                  */}

                .btn_daddl img {                  padding-right: 10px;;}

                .btn_daddl a {                  display: flex;;
                  justify-content: center;;
                  align-items: center;;
                  height: 50px;;
                  width: 288px;;
                  border: 1px solid #014099;;
                  color: #014099;;
                  border-radius: 4px;;
                  text-decoration: none;;}

                .btn_daddl:hover {                    color: #F60;;}

    /* 製品仕様表 */

          .table-wrapper {          /* margin: 0 10px;;
          */
          overflow-x: auto;;
          -webkit-overflow-scrolling: touch;;}
          .responsive-table {          width: 100%;;
          border-collapse: collapse;;
          table-layout: fixed;;}
          .responsive-table th {              border: 1px solid #707070;;
              background: #C2C2C3;;
              padding: 1em 5px;;
              text-align: center;;
              vertical-align: middle;;
              font-weight: 700;;
              line-height: 1.25;;}
          .responsive-table td {              border: 1px solid #707070;;
              background: #ffffff;;
              padding: 2px 5px;;
              text-align: center;;
              vertical-align: middle;;}
          /* PC時の幅指定 */
          .responsive-table col.col1 { width: 14%;;}
          .responsive-table col.col2 { width: 18%;;}
          .responsive-table col.col3 { width: 14%;;}
          .responsive-table col.col4 { width: 16%;;}
          .responsive-table col.col5 { width: 14%;;}
          .responsive-table col.col6 { width: 14%;;}
          .responsive-table col.col7 { width: 14%;;}

          .col5 .spring_icon img {            width: 40%;;
            height: auto;;} 

          .col6 .feature_icon img {              width: 60%;;
              height: auto;;}

          .col7 .app_icon img {            width: 60%;;
            height: auto;;
            /* padding-top: 5px;;
            */}

          /* 表題 通常表示 */
          .normal-mf {          display: inline;;}

          .responsive {          display: none;;}     

    /* note */
          .note {              display: inline-flex;;
              align-items: center;;
              margin: 15px 10px 10px 12px;;
              position: relative;;
              flex-wrap: wrap;;
              /* 折り返し可能に */}
            
            .icon-text {              display: inline-flex;;
              align-items: center;;
              margin-right: 2em;;
              font-size: 1em;;
              line-height: 1.2;;
              /* 通常の行間 */}

            .note img {              margin-right: 0.5em;;
              width: 30px;;
              height: auto;;
              margin-bottom: 1px;;}


/* ------- mobile --------- */

  @media screen and (max-width: 480px) {
    /* Overwrite */

    .pc {      display: none;;}
    .sp {      display: block;;}
    .table_pc {      display: none;;}
    .table_sp {      display: table-cell;;}
  
    .features {      grid-template-columns: 1fr;;
      /* スマホでは縦並び */}

    .left, .right {      grid-column: 1;;
      /* 同じ列に入れる（縦並び） */
      /* ※順番はHTMLの並び順（left → right）がそのまま適用されます */}

    .feature ul li {      font-size: 100%;;}

    .feature a.ulink,
    .feature a.pdf {      font-size: 100%;;}

    #article li {      margin-left: 10px;;
      font-size: 10px;;}

    .features01 {      margin: 10px 0px 0px 0px;;}

    .features01 ul {      padding: 0px 0px 0px 0px;;}

    .feature img {      /* margin: 1em auto;;
      */
      max-width: 45%;;
      height: auto;;
      margin: 20px auto;;}

    .valcam01__fig01 {      padding-top: 10px;;
      /* padding-bottom: 30px;;
      */
      text-align: center;;}

    .valcam02__text {      margin-top: 1em;;}

    .left .feature02 ul {      margin-left: 10px;;}

    .valcam01 {    padding: 20px;;}

    .valcam01__title {    /* flex-direction: column-reverse;;
    */
    /* align-items: center;;
    */
      padding-top: 20px;;}

    .valcam01__logo {      width: 100%;;
      text-align: center;;
      padding-bottom: 14px;;}
    .valcam01__logo img{      width: 38%;;}  
      
    .valcam01__logo_main {      width: 100%;;
      text-align: center;;}      
    .valcam01__logo_main img {      width: 89%;;}

    .valcam01__logo_copy {      width: 100%;;
      text-align: center;;
      padding-top: 13px;;}
    .valcam01__logo_copy img {      padding-top: 8px;;
      width: 71%;;}

    .valcam02__fig01, .valcam02__fig02, .valcam02__fig03 {      padding-top: 20px;;
      /* padding-bottom: 30px;;
      */
      text-align: center;;}
    .valcam02__fig01 img {      width: 80%;;}
    
    .valcam02__fig02 img {      width: 80%;;}

    .valcam02__fig03 img {      width: 80%;;}

    .valcam01__copy-txt {    width: 89%;;}
    .valcam01__copy-figure {    width: 90%;;
    padding-top: 30px;;}
    #article .valcam01 p.valcam01__txt {        padding-top: 30px;;}
    .valcam01__compact {    flex-direction: column;;
    padding-top: 10px;;}
    .valcam01__compact-img {    width: 90%;;}
    .valcam01__compact-txt {    width: 55%;;
    padding-top: 20px;;}
    .valcam__table_wrap {      padding: 0 7px;;
      margin: 0 calc(50% - 50vw) 0;}
    .valcam01__table-area {      /* overflow: scroll;;
      */
      margin-top: 10px;;}
    .valcam01__table-strong01--pd_big,
    .valcam01__table-strong01--pd_small {      padding-left: 0;;}
    .valcam01__table-strong01--pd_big-sp {      padding-left: 7px;;}
    .valcam01__table-strong02--pd_mid {      padding-left: 0;;}
    .valcam01__table-strong02--pd_mid-sp {      padding-left: 7px;;}
    .new_td .valcam01__table-strong01--pd_big {      padding-left: 0;;}
    .new_td .valcam01__table-strong02--pd_mid {      padding-left: 0;;}
    .new_td .valcam01__table-strong02--pd_mid-pc {      padding-left: 7px;;}
    .valcam01__table {    font-size: 10px;;
    margin: 0 auto;;}
    .valcam01__table th {padding: 5px 3px;;}
    .valcam01__table td {padding: 3px 3px;;
text-align: center;;}
    .icon_new {        margin-left: 0;;
        margin-right: 0;;
        font-size: 10px;;
        padding: 0 5px;;}
    .valcam__table td strong {    font-size: 12px;;}
    .valcam02 {    padding: 20px 20px 70px 20px;;}

    .valcam02__piercing {        max-width: 262px;;
        margin: 0 auto ;;}
    .valcam02__piercing img{        width: 100%;;}
    .valcam02_endurancetest-title {    margin-top: 50px;;}
    .valcam02_endurancetest-info {    flex-direction: column;;
    margin-left: 0;;
    margin-top: 10px;;}
    .valcam02_endurancetest-img {    width: 100%;;}
    .valcam02_endurancetest-table-area {width: 100%;;
margin: 20px auto 0;;
max-width: 340px;;}
    .valcam02_endurancetest-table {        width: 100%;;
        font-size: 12px;;}
    .valcam02_endurancetest-table-notes {    text-align: center;;}
    .valcam02_endurancetest-graph {    flex-direction: column;;
    margin-left: 0;;}
    .valcam02_endurancetest-graph-img {    width: 100%;;}
    .valcam02_endurancetest-graph-txt {    width: 100%;;
    padding-top: 30px;;}
    .valcam02_endurancetest-table th,
    .valcam02_endurancetest-table td {      padding: 2px 5px;;}
    .valcam03 {    padding-bottom: 30px;;}
    .sp_pd {        padding: 0 3%;;}
    .read {      display: none;;}

    .btn_daddl {      position: relative;;
      top: 0;;
      right: 0;;
      margin: 10px auto;;
      left: 0;;
      display: none;;}

    .valcam-page .bigger a .icon_pdf {      padding-right: 10px;;}

    .btn_daddl a {    margin: 0 auto;;}
    .btn_daddl a img {}
    .valcam-page table.type_v th {      font-size: 10px;;}

    #main .valcam_section table td, 
    #main .valcam_section table td strong, 
    #main .valcam_section table th, 
    #main .valcam_section table td p {      font-size: 10px;;}

    #main .valcam01__table_note {      font-size: 13px;;}

    #main .valcam01__title {      font-size: 20px;;
      padding: 0px;;}
    #main p {      padding: 0px;;
      font-size: 14px;;
      line-height: 1.5;;}
    #main .valcam01__text {      font-size: 14px;;
      /* padding: 0px 5px;;
      */
      margin-top: 0px;;}
    #main .valcam02__text {      font-size: 14px;;
      padding: 0px 0px;;
      margin-top: 0px;;}

    .valcam01__feature ul li{      line-height: 1.4;;}


      #main .valcam02__title01 {      font-size: 22px;;
      padding: 0px;;}

    #main .valcam02__title {      font-size: 16px;;
      padding: 0px;;}

    /* featureの表 */
                .table-wrapper01 {                margin: 2%;;}
                
                .responsive-table01 {                width: 100%;;
                font-size: 75%;;}

                /* セル内の左右パディングを最小化 */
                .responsive-table01 th,
                .responsive-table01 td {                padding: 2px 2px;;}
                
                .responsive-table01 th {                border: .5px solid #707070;;
                font-weight: 700;;}

                .responsive-table01 td {                border: .5px solid #707070;;
                background: #ffffff;;}

                /* 非表示列 */
                .responsive-table01 .col03 {                display: none;;}

                /* mobile時の幅指定 */
                .responsive-table01 col.col01 { width: 16%;;}
                .responsive-table01 col.col02 { width: 16%;;}
                /* .responsive-table01 col.col03 { width: 12%;;} */
                .responsive-table01 col.col04 { width: 22%;;}
                .responsive-table01 col.col05 { width: 12%;;}
                .responsive-table01 col.col06 { width: 142;;}
                .responsive-table01 col.col07 { width: 18%;;}

                .col05 .spring_icon img {                width: 50%;;}

                .col07 .app_icon img {                width: 80%;;}

                /* 表題 responsive 表示 */

                .normal {                display: none;;}

                .responsive {                display: inline;;}

    /* feature */
    .valcam01__feature {      flex-direction: column;;
      margin-top: 35px;;}

    .valcam01__feature_textarea {      width: 100%;;}
  
    .valcam01__feature03 .valcam01__feature_textarea {      width: 100%;;}

    #article .valcam01__feature h3 {      font-size: 20px;;}

    #article .valcam01__feature ul li {      font-size: 14px;;}

    .valcam_product_01 {      width: 82%;;
      margin: 8px auto 5px;;}

    .valcam_product_02 {      width: 47%;;
      margin: 0 auto 15px;;}

    .valcam_product_01 img, .valcam_product_02 img {      position: static;;
      max-width: initial;;}

    /* 製品仕様 */
      /* 製品仕様表 */
      .table-wrapper {      /* margin: 1%;;
      */}
      .responsive-table {      width: 100%;;
      font-size: 75%;;}
      .responsive-table th {          border: .5px solid #707070;;
          padding: 0.25em 1px;;
          font-weight: 700;;}
      .responsive-table td {          border: .5px solid #707070;;
          background: #ffffff;;}

      /* mobile時の幅指定  */
      .responsive-table col.col1 { width: 16%;;}
      .responsive-table col.col2 { width: 14%;;}
      .responsive-table col.col3 { width: 14%;;}
      .responsive-table col.col4 { width: 20%;;}
      .responsive-table col.col5 { width: 12%;;}
      /* .responsive-table col.col6 { width: 14%;;} */
      .responsive-table col.col7 { width: 14%;;}

      /* 非表示列 */
      .responsive-table .col6 {      display: none;;}

      /* セル内のパディングを最小化 */
      .responsive-table th,
      .responsive-table td {      padding: 5px 5px;;}

      .col5 .spring_icon img {      width: 50%;;}

      .col7 .app_icon img {      width: 80%;;}

      /* 表題 responsive 表示 */

      .normal {          display: none;;}

      .responsive {          display: inline;;}

    /* 概要& CADデータダウンロード*/
      /* モバイルは1列に */
      .doc-grid {        grid-template-columns: 1fr;;
        gap: 0px;;
        margin: 0px 0px 0px 0px;;
        grid-template-areas: "left"
        "right";;
        /* 縦並び（doc01 → doc02） */}

      .doc02 {        justify-self: start;;
        /* 左端に揃える（center や end にも切替可） */}

      .bigger {        padding: 10px 0px 5px 3px;;}

      .btn_dl {        padding: 0px 0px 0px 0px;;}

      /* note */
      .icon-text,
      .icon_app {        font-size: 0.8em;;
        line-height: 1.8;;
        /* 行間を広げる */
        margin-bottom: 8px;;
        /* 要素間の余白も追加 */}

  }