@charset "utf-8";
/* ===========================================
  
  詳細ページ
  PCレスポンシブ対応 (800px以上)

=========================================== */
@media (min-width: 801px) {
  .g-breadcrumb {
    background: #f5f4f1;
  }
  /* Item Main Container */
  .item-container {
    width: 1120px;
    margin: 0 auto;
    padding: 0;
  }

  /* Item Detail Section */
  .item-detail {
    background: #f5f4f1;
    .item-container {
      padding: 32px 0 100px;
    }
  }

  .item-detail__header {
    display: flex;
    max-width: 1120px;
    margin-bottom: 100px;
    padding: 24px 24px 48px;
    gap: 40px;
    background: #fff;
    border-radius: 10px;
  }

  .item-detail__image-container {
    flex: 1;
  }

  .item-detail__image {
    margin-bottom: 32px;
    width: 600px;
    height: 451px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .item-detail__image img {
    width: auto;
    height: 431px;
    border-radius: 8px;
  }
  
  .item-detail__title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #333;
    line-height: 1.8;
  }

  .item-detail__title-logo {
    display: block;
    margin-bottom: 8px;
  }

  .item-detail__description {
    font-size: 18px;
    color: #666;
    margin-bottom: 16px;
    line-height: 1.8;
    font-weight: 400;
    text-align: justify;
  }

  .item-detail-discount {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 6px;
  }

  .item-detail-discount-text {
    display: flex;
    align-items: center;
    height: 30px;
    background: #ff2965;
    color: white;
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
    border-radius: 5px;
    font-family: "Inter","Noto Sans JP", "Quicksand", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  }

  .item-detail-discount-plus {
    color: #ff2965;
    font-size: 24px;
    font-weight: 600;
    margin: 0 5px;
  }

  .item-detail-price {
    border-radius: 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    .price-label {
      font-size: 16px;
      color: #ff2965;
      margin-bottom: 0;
      position: relative;
      top: 6px;
    }
  
    .price {
      font-size: 44px;
      font-weight: 700;
      color: #ff2965;
      font-family: "Inter", Arial, sans-serif;
    }
    .price-unit {
      margin-left: 3px;
      position: relative;
      top: -3px;
      font-size: 18px;
      color: #ff2965;
    }
  }

  .item-detail-catalog-price {
    text-align: right;
    margin-bottom: 32px;
  }

  .item-detail-catalog-price-text {
    font-size: 14px;
    color: #666;
  }

  .item-detail-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    .btn-primary {
      background: #fc7907;
      padding: 8px 30px;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: background-color 0.3s;
      height: 68px;
      position: relative;
    }
    .btn-primary__icon {
      width: 55px;
      height: 54px;
      flex-shrink: 0;
    }
    .btn-primary__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }
    
    .btn-main-text {
      position: relative;
      left: -22px;
      font-size: 20px;
      font-weight: 700;
      color: white;
    }
    
    .btn-small-text {
      position: relative;
      left: -22px;
      font-size: 14px;
      font-weight: 400;
      color: white;
    }

    .btn-secondary {
      background: #1a2d51;
      color: white;
      padding: 8px 30px;
      border: 2px solid #1a2d51;
      border-radius: 6px;
      font-size: 20px;
      font-weight: 500;
      display: flex;
      text-align: center;
      height: 68px;
      align-items: center;
      justify-content: center;
      position: relative;
    } 
    
    .btn-icon {
      color: white;
      position: absolute;
      right: 32px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
    }
  }

  .item-detail-consult {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .txt {
      font-size: 14px;
      color: #333;
      margin: 0;
      text-align: left;
      padding: 15px 20px;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="348px" height="77px"><path fill-rule="evenodd" stroke-width="1px" stroke="rgb(204, 204, 204)" fill="rgb(255, 255, 255)" d="M344.478,57.103 L324.903,59.452 C319.594,67.889 310.205,73.500 299.500,73.500 L33.500,73.500 C16.931,73.500 3.500,60.069 3.500,43.500 L3.500,33.500 C3.500,16.931 16.931,3.500 33.500,3.500 L299.500,3.500 C316.069,3.500 329.500,16.931 329.500,33.500 L329.500,43.500 C329.500,44.556 329.444,45.598 329.338,46.625 L344.478,57.103 Z"/></svg>');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 348px 77px;
      width: 348px;
      height: 77px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .item-detail-consult__icon {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
  }

  .item-detail-review {
    padding: 14px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-bottom: 40px;
    .txt {
      font-size: 16px;
      color: #1a2d51;
      margin: 0;
      text-align: center;
    }
    .rating-score {
      position: relative;
      top: 1px;
      margin-left: 10px;
      font-weight: bold;
      font-size: 32px;
      color: #ff2965;
      font-family: "Inter", Arial, sans-serif;
    }
.rating-stars {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  color: 
#ffd400;
  font-size: 30px;
  line-height: 1;
  width: fit-content;
}

.stars-background {
  color: 
#ddd;
  display: block;
}

.stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  color: 
#FFD700;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}
  }

  .item-detail-catalog {
    text-align: center;
    .catalog-btn {
      display: block;
      padding: 12px 20px;
      font-size: 16px;
      color: #1a2d51;
      border: 1px solid #1a2d51;
      border-radius: 4px;
      transition: all 0.3s;
      height: 50px;
      line-height: 24px;
      width: 100%;
      text-align: center;
      position: relative;
    }
  
    .btn-icon {
      position: absolute;
      right: 32px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 16px;
    }

    .catalog-btn:hover {
      background-color: #1a2d51;
      color: white;
      i {
        color: white;
      }
    }
  }

  .item-detail-color-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 15px;
    margin-bottom: 38px;
    max-width: calc(6 * 94px + 5 * 7px);
  
    .color-name {
      font-size: 12px;
      color: #666;
      text-align: center;
    }
  
    .color-option img {
      width: 94px;
      height: 75px;
      cursor: pointer;
      transition: border-color 0.3s;
    }
  
    .color-option.active img {
      border: 3px solid #ff2965;
    }
  }

  .item-detail__specs {
    .specs-title {
      margin-bottom: 11px;
      font-size: 16px;
      font-weight: bold;
      line-height: 1.5;
      color: #333;
    }

    .specs-table {
      table-layout: fixed;
      border-collapse: collapse;
      width: 100%;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      font-size: 14px;
    }

    .specs-table th,
    .specs-table td {
      border-bottom: 1px dashed #ccc;
      vertical-align: middle;
      color: #666;
    }

    .specs-table th {
      width: 131px;
      padding: 7px 10px;
      padding-left: 0;
      font-weight: bold;
      text-align: left;
    }
    .specs-table td {
      padding: 10px 20px;
    }
  }
  
  .item-detail__switch {
    margin-bottom: 40px;
    border-bottom: 1px solid #d1d5db;
  }
  .item-detail__tabs {
    display: flex;
    align-items: flex-end;
    padding: 0 18px;
    margin-bottom: -1px;
  }

  .item-detail__tab {
    width: calc(100% * 1 / 2);
    font-size: 16px;
    line-height: 42px;
    display: block;
    height: 42px;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid #d7dae0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #f3f4f6;
  }

  .item-detail__tab.active {
    font-weight: bold;
    border-top: 1px solid #d7dae0;
    border-left: 1px solid #d7dae0;
    border-right: 1px solid #d7dae0;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #fff;
  }

  .tab-content {
    display: none;
  }

  .tab-content.active {
    display: block;
  }

  /* お客様の声 */
  .item-voice-container {
    width: 1120px;
    margin: 0 auto;
  }

  .item-voice__title {
    text-align: center;
    color: #2C5282;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .item-voice__icon {
    width: 240px;
    height: auto;
  }

  .item-voice__subtitle {
    display: block;
    margin-bottom: 10px;
    font-size: 24px;
    color: #1a2d51;
  }

  .item-voice__hd {
    font-size: 40px;
    color: #1a2d51;
    line-height: 1;
  }

  .item-voice__carousel {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
  }

  .item-voice__carousel-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #1a2d51;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background 0.3s ease;
    flex-shrink: 0;
    z-index: 3;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    i {
      color: #fff;
    }
  }

  #voicePrevBtn {
    position: absolute;
    left: -30px;
    top: 130px;
  }
  #voiceNextBtn {
    position: absolute;
    right: -30px;
    top: 130px;
  }

  .item-voice__carousel-btn:hover {
      background: #2A4365;
  }

  .item-voice__carousel-btn:disabled {
    background: #2A4365;
    opacity: 0.5;
  }

  .item-voice__items-container {
      overflow: hidden;
      flex: 1;
  }

  .item-voice__items {
      display: flex;
      gap: 30px;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }


  .item-voice__link {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
    display: block;
  }

  .item-voice__item {
    flex: 0 0 calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
  }

  .item-voice__image {
    img {
      width: 100%;
      height: 230px;
      border-radius: 30px;
    }
  }

  .item-voice__user {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 6px;
  }

  .item-voice__user {
    font-size: 13px;
    line-height: 1.384;
    color: #6a6a6a;
  }

  .item-voice__text {
    font-size: 16px;
    color: #333333;
    line-height: 1.5;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    text-align: justify;
  }

  /* お見積りシミュレーション */
  .item-custom {
    padding: 90px 0 0;
    width: 100%;
    background-color: #fcfaf7;
  }
  .item-custom__title {
    text-align: center;
    color: #2C5282;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .item-custom__icon-search {
    width: 120px;
    height: auto;
  }
  .item-custom__subtitle {
    display: block;
    margin-bottom: 10px;
    font-size: 24px;
    color: #1a2d51;
  }

  .item-custom__hd {
    font-size: 40px;
    color: #1a2d51;
    line-height: 1;
  }
  .item-custom__lead {
    font-size: 20px;
    color: #2C5282;
    margin-bottom: 48px;
    line-height: 1.8;
    text-align: center;
  }
  .item-custom__note {
    font-size: 16px;
    font-weight: 400;
  }
  .item-custom__content-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
  }

  .item-custom__content__hd {
    font-size: 36px;
    color: #e60f3d;
  }

  .item-custom__content__hd--txt {
    font-size: 18px;
    color: #1a2d51;
  }
  .item-custom__section {
    padding: 50px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  .item-custom__section-inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
  }
  .item-custom__section:nth-child(odd) {
    background-color: #f4efe7;
  }
  
  .item-custom__section:nth-child(even) {
    background-color: #fcfaf7;
  }
  .item-custom__section-title {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 0 0 290px;
  }
  .item-custom__section-step {
    font-size: 32px;
    font-weight: bold;
    color: #e60f3d;
    font-family: "Inter", Arial, sans-serif;
  }

  .item-custom__section-label {
    font-size: 32px;
    color: #1a2d51;
  }

  /* STEP 01 */
  .door-type-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
    margin-bottom: 20px;
  }

  .door-type-note {
    max-width: 1120px;
    margin: 0 auto;
    color: #1a2d51;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    white-space: nowrap;
  }

  .door-type-note__type {
    font-weight: bold;
  }

  .door-type-note__text {
    font-weight: 400;
  }

  .door-type-note__prefix {
    font-weight: 400;
  }

  .door-type-wrapper {
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 183px;
  }

  .door-type-option {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 10px;
    width: 183px;
    height: 183px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .door-type-option:hover,
  .door-type-option.selected {
    border: 4px solid #e5103e;
    background: #fff5f2;
  }

  .door-type-icon {
    width: auto;
    height: 108px;
    margin: 0 auto;
    display: block;
  }

  .door-type-name {
    font-size: 24px;
    font-weight: 500;
    color: #1a2d51;
    text-align: center;
  }

  /* STEP 02 */
  .ranma-options {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
  }
  .ranma-wrapper {
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 183px;
  }

  .ranma-option {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 10px;
    width: 183px;
    height: 183px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }
  .ranma-image {
    width: auto;
    height: 108px;
    margin: 0 auto;
    display: block;
  }

  .ranma-name {
    font-size: 24px;
    font-weight: 500;
    color: #1a2d51;
    text-align: center;
  }

  .ranma-note {
    color: #1a2d51;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    grid-column: 3;
    align-self: start;
    white-space: nowrap;
  }

  .ranma-note__type {
    font-weight: bold;
  }

  .ranma-note__text {
    font-weight: 400;
  } 
  .ranma-option:hover,
  .ranma-option.selected {
    border: 4px solid #e5103e;
    background: #fff5f2;
  }

  /* STEP 03 */
  .color-category-title {
    font-size: 24px;
    font-weight: bold;
    color: #1a2d51;
    margin-bottom: 20px;
    text-align: left;
  }

  .color-category-title--spacing {
    margin-top: 64px;
  }

  .color-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    width: 100%;
  } 

  .color-choice {
    text-align: center;
    cursor: pointer;
  }

  .color-item {
    img {
      width: 180px;
      height: 100px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
  }

  .color-choice.selected .color-item {
    border: 4px solid #e5103e;
  }

  .color-grid .color-name {
    font-size: 24px;
    color: #1a2d51;
    margin-top: 5px;
    text-align: center;
  }

  /* STEP 04,05,06 */
  .width-options,
  .height-options,
  .suspension-options {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
  }
  .width-wrapper,
  .height-wrapper,
  .suspension-wrapper {
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 183px;
  }

  .width-option,
  .height-option,
  .suspension-option {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 10px;
    width: 183px;
    height: 183px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .width-option:hover,
  .width-option.selected,
  .height-option:hover,
  .height-option.selected,
  .suspension-option:hover,
  .suspension-option.selected {
    border: 4px solid #e5103e;
    background: #fff5f2;
  }

  .width-image,
  .height-image,
  .suspension-image {
    width: auto;
    height: 108px;
    margin: 0 auto;
    display: block;
  }

  .width-name,
  .height-name,
  .suspension-name {
    font-size: 24px;
    font-weight: 500;
    color: #1a2d51;
    text-align: center;
  }
  .suspension-note {
    color: #1a2d51;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    white-space: nowrap;
  }

  .suspension-note__text {
    font-weight: 400;
  }

  /* STEP 07以降の共通スタイル */
  .key-options,
  .inner-frame-options,
  .outer-frame-options,
  .handle-type-options,
  .threshold-options {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 37px;
  }

  .key-wrapper,
  .inner-frame-wrapper,
  .outer-frame-wrapper,
  .handle-type-wrapper,
  .threshold-wrapper {
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 390px;
  }

  .key-option,
  .inner-frame-option,
  .outer-frame-option,
  .handle-type-option,
  .threshold-option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 10px;
    width: 390px;
    height: 115px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 0 20px 0 0;
    gap: 20px;
    box-sizing: border-box;
    border: 4px solid transparent;
  }

  .key-option:hover,
  .key-option.selected,
  .inner-frame-option:hover,
  .inner-frame-option.selected,
  .outer-frame-option:hover,
  .outer-frame-option.selected,
  .handle-type-option:hover,
  .handle-type-option.selected,
  .threshold-option:hover,
  .threshold-option.selected {
    border-color: #e5103e;
  }

  .key-image,
  .inner-frame-image,
  .outer-frame-image,
  .handle-type-image,
  .threshold-image {
    width: auto;
    height: 100%;
    flex-shrink: 0;
    display: block;
    border-radius: 4px 0 0 4px;
  }

  .key-info,
  .inner-frame-info,
  .outer-frame-info,
  .handle-type-info,
  .threshold-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
  }

  .key-name,
  .inner-frame-name,
  .outer-frame-name,
  .handle-type-name,
  .threshold-name {
    font-size: 20px;
    font-weight: 500;
    color: #1a2d51;
    text-align: center;
    line-height: 1.6;
  }

  .key-price,
  .inner-frame-price,
  .outer-frame-price,
  .handle-type-price,
  .threshold-price {
    font-size: 16px;
    font-weight: 600;
    color: #e5103e;
    text-align: center;
  }

  /* next shape */
  .triangle-section {
    width: 100vw;
    height: 100px;
    margin-left: calc(-50vw + 50%);
    position: relative;
    overflow: hidden;
    background-color: #f4efe7;
  }

  .triangle-shape {
    width: 100%;
    height: 100px;
    background: #fcfaf7;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .triangle-section--campaign {
    width: 100vw;
    height: 100px;
    margin-left: calc(-50vw + 50%);
    position: relative;
    overflow: hidden;
    background: #fcfaf7;
  }

  .triangle-shape--campaign {
    width: 100%;
    height: 100px;
    background: #f4efe7;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }


  .triangle-section--end {
    width: 100vw;
    height: 100px;
    margin-left: calc(-50vw + 50%);
    position: relative;
    overflow: hidden;
    background: none;
  }

  .triangle-shape--end {
    width: 100%;
    height: 100px;
    background: #fcfaf7;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }


  /* お支払い方法 */
  .payment-method {
    background: #f4efe7;
    padding: 60px 0;
    margin: 0 auto;
  }

  .payment-method__title {
    font-size: 32px;
    color: #0084b9;
    text-align: center;
    margin-bottom: 20px;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  .payment-method__subtitle {
    font-size: 20px;
    color: #1a2d51;
    text-align: center;
    margin-bottom: 32px;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  .payment-method__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .payment-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #fff;
    height: 115px;
    box-sizing: border-box;
    cursor: pointer;
    border: 4px solid transparent;
    transition: all 0.3s;
  }

  .payment-option:hover,
  .payment-option.selected {
    border: 4px solid #e5103e;
    background: #fff5f2;
  }
  .payment-method__description {
    max-width: 842px;
    height: 225px;
    margin: 40px auto 0;
    padding: 30px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .payment-method__description-text {
    margin: 0 0 16px 0;
    font-size: 20px;
    color: #1a2d51;
    line-height: 1.6;
  }
  .payment-method__note {
    font-size: 13px;
    font-weight: 400;
  }
  .payment-prefix,
  .payment-suffix {
    font-size: 24px;
    color: #ff2965;
  }

  .payment-number {
    position: relative;
    top: 3px;
    font-size: 44px;
    font-family: "Inter", Arial, sans-serif;
    color: #ff2965;
    font-weight: 700;
    margin: 0 3px;
  }

  /* キャンペーン・割引サービス */
  .campaign-section {
    background: #fcfaf7;
    padding: 60px 0;
    margin: 0 auto;
  }

  .campaign-section__title {
    font-size: 32px;
    color: #da7d0f;
    text-align: center;
    margin-bottom: 32px;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  .campaign-section__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .campaign-section__content-title {
    font-size: 28px;
    color: #1a2d51;
    text-align: center;
    margin-bottom: 16px;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }

  .campaign-section__content-subtitle {
    font-size: 20px;
    color: #1a2d51;
    text-align: center;
    margin-bottom: 32px;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    grid-column: 1 / -1;
    font-weight: 400;
  }

  .campaign-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #fff;
    height: 115px;
    box-sizing: border-box;
    cursor: pointer;
    border: 4px solid transparent;
    transition: all 0.3s;
  }

  .campaign-option:hover,
  .campaign-option.selected {
    border: 4px solid #e5103e;
    background: #fff5f2;
  }

  .campaign-name {
    font-size: 20px;
    color: #1a2d51;
    line-height: 1.6;
  }

  /* お見積り結果を表示する */
  .estimate-result-section {
    padding: 40px 0;
    text-align: center;
  }

  .estimate-result-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 600px;
    height: 90px;
    margin: 0 auto;
    background: #1a2d51;
    text-decoration: none;
    text-align: center;
    border-radius: 45px;
    padding: 0 30px;
    transition: all 0.3s ease;
    gap: 2px;
    letter-spacing: .2ex;
  }

  .estimate-result-main {
    font-size: 20px;
    font-weight: bold;
    color: white;
  }
  
  .estimate-result-sub {
    font-size: 16px;
    font-weight: 400;
    color: white;
  }
  
  .estimate-result-btn i {
    position: absolute;
    right: 40px;
    font-size: 16px;
    color: white;
  }

  /* 追従見積結果 */
  .final-price-section {
    padding: 12px;
    border-top: 1px solid #ddd;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    background-color: rgba(26, 46, 83, 0.9);
  }

  .final-price-section.visible {
    transform: translateY(0);
  }

  .final-price-content {
    width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .final-price-section.visible .final-price-title {
    margin-bottom: 0;
  }

  .final-price-section.visible .final-price {
    margin-bottom: 0;
  }

  .final-price-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 80px;
  }

  .final-price-right {
    .estimate-btn {
      background: #e5103e;
      color: white;
      padding: 8px 40px;
      border: none;
      font-size: 24px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background-color 0.3s;
      width: 425px;
      position: relative;
    }

    .estimate-btn i.fas.fa-chevron-right {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: #fff;
    }

    .estimate-btn-subtitle {
      font-size: 16px;
      color: #fff;
      text-align: center;
    }
  }

  .final-price-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
  }
  
  .final-price-subtitle {
    margin-left: 13px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
  }

  .final-price {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    font-family: "Inter", Arial, sans-serif;
  }
  
  .final-price-unit {
    margin-left: 8px;
    font-size: 24px;
    font-weight: 400;
    color: #fff;
  }
}

/* ===========================================
  SPレスポンシブ対応 (800px以下)
=========================================== */
@media only screen and (max-width: 800px) {
  .item-detail {
    padding: 0 1rem;
  }
  .item-detail__header {
    margin-top: 1rem;
  }
  .item-detail__title {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: bold;
  }
  .item-detail__title-logo {
    display: block;
    margin-bottom: 0.5rem;
  }
  .item-detail__image {
    margin-bottom: 1rem;
    padding: 0.625rem 0;
    border: 1px solid #ccc;
    text-align: center;
    img {
      max-height: 16.3125rem;
    }
  }
  .item-detail-catalog-price-text {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0.25rem 0;
    text-align: center;
  }
  .item-detail-price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    .price-label {
      color: #ff2965;
    }
    .price {
      font-size: 1.875rem;
      font-weight: 700;
      color: #ff2965;
      font-family: "Inter", Arial, sans-serif;
      line-height: 1;
    }
    .price-unit {
      font-size: 1rem;
      color: #ff2965;
    }
  }
  .item-detail-discount {
    display: flex;
    align-items: center;
  }
  .item-detail-discount-text {
    display: flex;
    align-items: center;
    height: 1.75rem;
    background: #ff2965;
    color: white;
    font-size: 0.875rem;
    padding: 0 0.5rem;
    border-radius: 5px;
    font-family: "Inter","Noto Sans JP", "Quicksand", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  }

  .item-detail-discount-plus {
    color: #ff2965;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0.25rem;
  }
  .item-detail__description {
    margin: 0.5rem 0 1rem;
    font-size: 0.875rem;
    text-align: justify;
    font-weight: 400;
  }
  .item-detail-color-choice {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    .hd {
      font-weight: bold;
    }
  }
  .item-detail-color-options {
    margin: 0 -1rem 0;
    padding: 0 1rem;
    display: flex;
    overflow-x: scroll;
    gap: 0.5rem;
    .color-option {
      img {
        border-radius: 5px;
        width: 4.375rem;
        height: 2.1875rem;
      }
    }
    .color-option:active {
      img {
        border: 2px solid #ff2965;
      }
    }
    .color-name {
      display: none;
    }
  }
  .item-detail-color-options::-webkit-scrollbar {
    display: none;
  }
  .item-detail-buttons {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    width: 100%;
    .btn-primary {
      background: #fc7907;
      padding: 0.5rem 1.5rem;
      border: none;
      border-radius: 6px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      height: 4rem;
      position: relative;
    }
    .btn-primary__icon {
      width: 55px;
      height: 54px;
      flex-shrink: 0;
    }
    .btn-primary__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
    }
    
    .btn-main-text {
      position: relative;
      left: -1.3rem;
      font-size: 1rem;
      font-weight: 700;
      color: white;
      letter-spacing: 0.2ex;
      font-feature-settings: normal;
    }
    
    .btn-small-text {
      position: relative;
      left: -1.3rem;
      font-size: 0.875rem;
      font-weight: 400;
      color: white;
      font-feature-settings: normal;
    }
    
    .btn-icon {
      color: white;
      position: absolute;
      right: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1rem;
    }
  }
  .item-detail__switch {
    border-bottom: 1px solid #d1d5db;
  }
  .item-detail__tabs {
    display: flex;
    align-items: flex-end;
    padding: 0 0.25rem;
    margin-bottom: -1px;
  }

  .item-detail__tab {
    width: calc(100% * 1 / 2);
    font-size: 1rem;
    line-height: 2rem;
    display: block;
    height: 2rem;
    text-align: center;
    cursor: pointer;
    border-bottom: 1px solid #d7dae0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #f3f4f6;
  }

  .item-detail__tab.active {
    font-weight: bold;
    border-top: 1px solid #d7dae0;
    border-left: 1px solid #d7dae0;
    border-right: 1px solid #d7dae0;
    border-bottom: 1px solid #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #fff;
  }

  .tab-content {
    display: none;
  }

  .tab-content.active {
    display: block;
    margin-top: 1rem;
  }

  .item-detail__specs {
    margin: 1.5rem 0;
    .specs-title {
      font-size: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #1a2d51;
      font-weight: bold;
    }
    .specs-table {
      width: 100%;
      font-size: 0.75rem;
      border-collapse: collapse;
      th {
        width: 5rem;
        padding:  0.5625rem 0;
        line-height: 1.66;
        vertical-align: top;
        border-bottom: 1px solid #e5e7eb;
        font-weight: bold;
        text-align: left;
      }
      td {
        position: relative;
        padding:  0.5625rem 0;
        line-height: 1.66;
        vertical-align: top;
        border-bottom: 1px solid #e5e7eb;
      }
    }
  }
  .item-detail-catalog {
    text-align: center;
    .catalog-btn {
      display: block;
      padding: 0.5rem 1.5rem;
      font-size: 1rem;
      color: #1a2d51;
      border: 1px solid #1a2d51;
      border-radius: 6px;
      width: 100%;
      text-align: center;
      position: relative;
    }
  
    .btn-icon {
      position: absolute;
      right: 1.5rem;
      top: 52%;
      transform: translateY(-50%);
      font-size: 0.8rem;
    }
  }
  .item-detail-review {
    text-align: center;
    margin: 1rem 0;
    .txt {
      font-weight: bold;
    }
    .rating-score {
      position: relative;
      top: 1px;
      font-weight: bold;
      margin-left: 1rem;
      font-size: 1.5rem;
      color: #ff2965;
      font-family: "Inter", Arial, sans-serif;
    }

.rating-stars {
  position: relative;
  display: inline-block;
  margin-left: 0.5rem;
  color: #ffd400;
  font-size: 1.5rem;
  line-height: 1;
  width: fit-content;
}

.stars-background {
  color: #ddd;
  display: block;
}

.stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  color: #FFD700;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

  }
  .g-header-contact-btn {
    display: none;
  }

  /* お客様の声 */
  .item-voice {
    margin: 3.125rem 0;
    .g-more-btn {
    background: #fff;
    color: #1a2d51;
    border: 1px solid #1a2d51;
      i {
        color: #1a2d51;
      }
    }
  }
  .item-voice__title {
    display: flex;
    justify-content: center;
  }
  .item-voice__title {
    text-align: center;
    gap: 0.5rem;
    img {
      width: 7.53125rem;
    }
  }
  .item-voice__subtitle {
    display: block;
    font-size: 0.875rem;
  }
  .item-voice__hd {
    font-size: 1.375rem;
    text-align: center;
  }

  .item-voice__carousel {
    margin: 1rem -1rem 2rem;
    position: relative;
    overflow-x: hidden;
  }

  .item-voice__items-container {
    overflow-x: hidden;
    margin: 0 -1rem;
    padding: 0 1rem;
  }

  .item-voice__items {
    display: flex;
    gap: 1rem;
    transition: transform 0.3s ease-in-out;
  }

  .item-voice__item {
    flex: 0 0 calc(100% - 4rem);
    margin: 0 auto;
  }

  .item-voice__image {
    width: 100%;
    height: 12rem;
    border-radius: 30px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 30px;
    }
  }

  .item-voice__user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .item-voice__user-ico {
    width: 2.5rem;
    height: 2.5rem;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .item-voice__user-profile {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #666;
  }

  .item-voice__text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .item-voice__carousel-btn {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #1a2d51;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 10;
    i {
      color: white;
    }
  }

  #voicePrevBtn {
    left: 0.8rem;
  }

  #voiceNextBtn {
    right: 0.8rem;
  }

  .item-voice__carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }



  /* お見積りシミュレーション */
  .item-custom {
    padding-top: 3.125rem;
    background-color: #fcfaf7;
  }
  .item-custom__title {
    display: flex;
    justify-content: center;
  }
  .item-custom__title {
    margin-bottom: 1rem;
    text-align: center;
    gap: 0.5rem;
    img {
      width: 4rem;
    }
  }
  .item-custom__subtitle {
    display: block;
    font-size: 0.875rem;
  }
  .item-custom__hd {
    font-size: 1.375rem;
    text-align: center;
  }
  .item-custom__lead {
    margin-bottom: 1rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .item-custom__note {
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.33;
  }
  .item-custom__content-header {
    display: flex;
    align-items: baseline;
    padding: 0 1rem;
    margin-bottom: 1rem;
    .item-custom__content__hd {
      font-size: 1.5rem;
      color: #e60f3d;
    }
    .item-custom__content__hd--txt {
      margin-left: 0.5rem;
      font-size: 0.875rem;
    }
  }
  .item-custom__section-title {
    margin-bottom: 1rem;
    padding: 0 1rem;
  }
  .item-custom__section-step {
    font-size: 1.25rem;
    font-weight: bold;
    color: #e60f3d;
    font-family: "Inter", Arial, sans-serif;
  }
  .item-custom__section-label {
    font-size: 1.25rem;
    font-weight: bold;
  }
  .item-custom__section {
    padding: 2rem 0;
  }
  .item-custom__section.first {
    padding-top: 0;
  }
  .item-custom__section:nth-child(odd) {
    background-color: #f4efe7;
  }
  
  .item-custom__section:nth-child(even) {
    background-color: #fcfaf7;
  }

  /* STEP 01 */
  .door-type-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0.9375rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
    overflow-x: scroll;
  }

  .door-type-grid::-webkit-scrollbar {
    display: none;
  }

  .door-type-note {
    padding: 0 1rem;
    margin: 0 auto;
    color: #1a2d51;
    font-size: 0.875rem;
    line-height: 1.5;
    font-weight: 400;
  }

  .door-type-note__type {
    font-weight: bold;
  }

  .door-type-note__text {
    font-weight: 400;
  }

  .door-type-note__prefix {
    font-weight: 400;
  }

  .door-type-wrapper {
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 7.8125rem;
  }

  .door-type-option {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 0.5rem;
    width: 7.8125rem;
    height: 7.8125rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .door-type-option:hover,
  .door-type-option.selected {
    border: 2px solid #e5103e;
    background: #fff5f2;
  }

  .door-type-icon {
    width: auto;
    height: 4.1875rem;
    margin: 0 auto;
    display: block;
  }

  .door-type-name {
    font-size: 1rem;
    font-weight: 500;
    color: #1a2d51;
    text-align: center;
  }

  /* STEP 02 */
  .ranma-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9375rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
    overflow-x: scroll;
  }
  .ranma-options::-webkit-scrollbar {
    display: none;
  }

  .ranma-wrapper {
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 7.8125rem;
  }

  .ranma-option {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 10px;
    width: 7.8125rem;
    height: 7.8125rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }
  .ranma-image {
    width: auto;
    height: 4.1875rem;
    margin: 0 auto;
    display: block;
  }

  .ranma-name {
    font-size: 1rem;
    font-weight: 500;
    color: #1a2d51;
    text-align: center;
  }

  .ranma-note {
    color: #1a2d51;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    grid-column: 3;
    align-self: start;
    white-space: nowrap;
  }

  .ranma-note__type {
    font-weight: bold;
  }

  .ranma-note__text {
    padding-left: 1em;
    font-weight: 400;
  } 
  .ranma-option:hover,
  .ranma-option.selected {
    border: 2px solid #e5103e;
    background: #fff5f2;
  }

  /* STEP 03 */
  .color-category-title {
    font-weight: bold;
    font-size: 1.25rem;
    padding-bottom: 0.25rem;
    margin-bottom: 1rem;
    text-align: center;
    border-bottom: 1px solid #1a2d51;
  }

  .color-category-title--spacing {
    margin-top: 2rem;
  }

  .color-content {
    padding: 0 1rem;
  }

  .color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1rem;
    width: 100%;
  } 

  .color-choice {
    text-align: center;
  }

  .color-item {
    text-align: center;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    img {
        width: 6rem;
        height: 3rem;
        border-radius: 0.625rem;
    }
  }

  .color-choice.selected .color-item {
    border: 2px solid #e5103e;
  }

  .color-grid .color-name {
    font-size: 0.875rem;
    margin-top: 0.5rem;
    text-align: center;
    white-space: nowrap;
  }

  /* STEP 04,05,06 */
  .width-options,
  .height-options,
  .suspension-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9375rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
    overflow-x: scroll;
  }
  .width-options::-webkit-scrollbar,
  .height-options::-webkit-scrollbar,
  .suspension-options::-webkit-scrollbar {
    display: none;
  }
  .width-wrapper,
  .height-wrapper,
  .suspension-wrapper {
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 7.8125rem;
  }

  .width-option,
  .height-option,
  .suspension-option {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 10px;
    width: 7.8125rem;
    height: 7.8125rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .width-option:hover,
  .width-option.selected,
  .height-option:hover,
  .height-option.selected,
  .suspension-option:hover,
  .suspension-option.selected {
    border: 2px solid #e5103e;
    background: #fff5f2;
  }

  .width-image,
  .height-image,
  .suspension-image {
    width: auto;
    height: 4.1875rem;
    margin: 0 auto;
    display: block;
  }

  .width-name,
  .height-name,
  .suspension-name {
    font-size: 1rem;
    font-weight: 500;
    color: #1a2d51;
    text-align: center;
  }
  .suspension-note {
    color: #1a2d51;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
  }

  .suspension-note__text {
    font-weight: 400;
  }

  /* STEP 07以降の共通スタイル */
  .key-options,
  .inner-frame-options,
  .outer-frame-options,
  .handle-type-options,
  .threshold-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 1rem;
  }

  .key-wrapper,
  .inner-frame-wrapper,
  .outer-frame-wrapper,
  .handle-type-wrapper,
  .threshold-wrapper {
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .key-option,
  .inner-frame-option,
  .outer-frame-option,
  .handle-type-option,
  .threshold-option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    height: 6rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    box-sizing: border-box;
  }

  .key-option:hover,
  .key-option.selected,
  .inner-frame-option:hover,
  .inner-frame-option.selected,
  .outer-frame-option:hover,
  .outer-frame-option.selected,
  .handle-type-option:hover,
  .handle-type-option.selected,
  .threshold-option:hover,
  .threshold-option.selected {
    border: 2px solid #e5103e;
    background: #fff5f2;
  }

  .key-image,
  .inner-frame-image,
  .outer-frame-image,
  .handle-type-image,
  .threshold-image {
    width: 4.3rem;
    height: auto;
    background-size: cover;
    flex-shrink: 0;
    display: block;
    border-radius: 8px 0 0 8px;
  }

  .key-info,
  .inner-frame-info,
  .outer-frame-info,
  .handle-type-info,
  .threshold-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
  }

  .key-name,
  .inner-frame-name,
  .outer-frame-name,
  .handle-type-name,
  .threshold-name {
    font-size: 1rem;
    font-weight: 500;
    color: #1a2d51;
    text-align: center;
    line-height: 1.6;
  }

  .key-price,
  .inner-frame-price,
  .outer-frame-price,
  .handle-type-price,
  .threshold-price {
    font-size: 1rem;
    font-weight: 600;
    color: #e5103e;
    text-align: center;
  }

 /* next shape */
  .triangle-section {
    width: 100vw;
    height: 2.8125rem;
    margin-left: calc(-50vw + 50%);
    position: relative;
    overflow: hidden;
    background-color: #f4efe7;
  }

  .triangle-shape {
    width: 100%;
    height: 2.8125rem;
    background: #fcfaf7;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  .triangle-section--campaign {
    width: 100vw;
    height: 2.8125rem;
    margin-left: calc(-50vw + 50%);
    position: relative;
    overflow: hidden;
    background: #fcfaf7;
  }

  .triangle-shape--campaign {
    width: 100%;
    height: 2.8125rem;
    background: #f4efe7;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }


  .triangle-section--end {
    width: 100vw;
    height: 2.8125rem;
    margin-left: calc(-50vw + 50%);
    position: relative;
    overflow: hidden;
    background: none;
  }

  .triangle-shape--end {
    width: 100%;
    height: 2.8125rem;
    background: #fcfaf7;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  /* お支払い方法 */
  .payment-method {
    background: #f4efe7;
    padding: 2rem 0;
    margin: 0 auto;
  }

  .payment-method__title {
    font-size: 1.5rem;
    color: #0084b9;
    text-align: center;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .payment-method__subtitle {
    font-size: 1rem;
    color: #1a2d51;
    text-align: center;
    margin: 0 auto 1rem;
  }

  .payment-method__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .payment-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #fff;
    height: 4rem;
    box-sizing: border-box;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
  }

  .payment-option:hover,
  .payment-option.selected {
    border: 2px solid #e5103e;
    background: #fff5f2;
  }
  .payment-method__description {
    margin: 1.5rem 1rem 0;
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #fff;
  }

  .payment-method__description-text {
    margin: 0 0 0.5rem 0;
    color: #1a2d51;
    line-height: 1.6;
  }
  .payment-method__note {
    font-size: 0.75rem;
    font-weight: 400;
    color: #9ca3af;
    padding-left: 1em;
    text-indent: -1em;
    text-align: left;
  }
  .payment-prefix,
  .payment-suffix {
    font-size: 1rem;
    color: #ff2965;
  }

  .payment-number {
    position: relative;
    top: 1px;
    font-size: 1.5rem;
    font-family: "Inter", Arial, sans-serif;
    color: #ff2965;
    font-weight: 700;
    margin: 0 3px;
  }

  /* キャンペーン・割引サービス */
  .campaign-section {
    background: #fcfaf7;
    padding: 2rem 0;
    margin: 0 auto;
  }

  .campaign-section__title {
    font-size: 1.5rem;
    color: #da7d0f;
    text-align: center;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .campaign-section__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.5rem;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .campaign-section__content-title {
    font-size: 1rem;
    color: #1a2d51;
    text-align: center;
    margin-bottom: 0.5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .campaign-section__content-subtitle {
    font-size: 0.875rem;
    color: #1a2d51;
    text-align: center;
    margin: 0 auto 1rem;
  }

  .campaign-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: #fff;
    height: 4rem;
    box-sizing: border-box;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
  }

  .campaign-option:hover,
  .campaign-option.selected {
    border: 2px solid #e5103e;
    background: #fff5f2;
  }

  /* お見積り結果を表示する */
  .estimate-result-section {
    margin: 0 1rem;
    padding: 2rem 0;
    text-align: center;
  }

  .estimate-result-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 5rem;
    margin: 0 auto;
    background: #1a2d51;
    text-decoration: none;
    text-align: center;
    border-radius: 45px;
    padding: 0 1rem;
    transition: all 0.3s ease;
    letter-spacing: .2ex;
  }

  .estimate-result-main {
    font-size: 1.125rem;
    font-weight: bold;
    color: white;
  }
  
  .estimate-result-sub {
    font-size: 1rem;
    font-weight: 400;
    color: white;
  }
  
  .estimate-result-btn i {
    position: absolute;
    right: 1rem;
    font-size: 1rem;
    color: white;
  }

  /* 追従見積結果 */
  .final-price-section {
    border-top: 1px solid #ddd;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
    background-color: rgba(26, 46, 83, 0.9);
  }

  .final-price-section.visible {
    transform: translateY(0);
  }

  .final-price-content {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .final-price-section.visible .final-price-title {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    line-height: 1;
  }

  .final-price-section.visible .final-price {
    margin-bottom: 0;
  }

  .final-price-left {
    display: flex;
    align-items: center;
    margin: 1rem 0 0.8rem;
    gap: 3rem;
  }

  .final-price-right {
    .estimate-btn {
      background: #e5103e;
      color: white;
      padding: 8px 40px;
      border: none;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background-color 0.3s;
      width: 100vw;
      position: relative;
    }

    .estimate-btn i.fas.fa-chevron-right {
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: #fff;
    }

    .estimate-btn-subtitle {
      font-size: 0.75rem;
      color: #fff;
      text-align: center;
    }
  }

  .final-price-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
  }
  
  .final-price-subtitle {
    font-size: 0.75rem;
    font-weight: 400;
    color: #fff;
  }

  .final-price {
    font-size: 1.875rem;
    font-weight: 700;
    color: #fff;
    font-family: "Inter", Arial, sans-serif;
  }
  
  .final-price-unit {
    font-size: 1rem;
    margin-left: 0.25rem;
    font-weight: 400;
    color: #fff;
  }
  
}