/* ===================================
    基本・共通設定
    =================================== */
.pc {
  display: none !important;
}

.sp {
  display: block; 
}
@media screen and (min-width: 768px) {
  .pc {
    display: block !important; 
  }

  .sp {
    display: none !important;
  }
}

 body {
     font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
     color: #333;
     line-height: 1.6;
     background-color: #f8f9fa;
 }

 .br-sp {
     display: none;
 }

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

 /* 1. 商品説明文全体の枠組み（幅・中央寄せなど） */
  .robosmoothie {
      max-width: 800px;
      margin: 0 auto;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      box-sizing: border-box;
  }


  /* 3. 【重要】商品説明の枠内にある画像「だけ」を可変にする */
  .robosmoothie img {
      max-width: 100% !important;
      height: auto !important;
      vertical-align: bottom;
  }



 /* ===================================
    1. メインビジュアル / ヘッダー SP
    =================================== */
 .hero {
     position: relative;
     text-align: center;
 }


 /* ===================================
    2. お悩み解決比較 SP
    =================================== */

 .trouble-section {
     padding: 20px 15px;
     background-color: #fff;
 }

 /* タイトル装飾 */
 .trouble-title-wrapper {
     text-align: center;
     margin-bottom: 25px;
 }

 .trouble-title {
     display: inline-block;
     position: relative;
     font-size: 2.5rem;
     line-height: 1.4 !important;
     font-weight: bold;
     color: #333;
     padding: 16px 60px;
     background: #f1f5f9;
     border-radius: 20px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 /* レイアウト */
 .comparison-grid {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .comparison-col {
     padding: 16px 12px;
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }

 /* ---- 上：お悩み（赤系） ---- */
 .col-trouble {
     background-color: #fff5f5;
     border: 1px solid #fed7d7;
 }

 .title-trouble {
     color: #c53030;
     border-bottom: 2px solid #feb2b2;
 }

 .icon-x {
     color: #e53e3e;
     font-weight: bold;
     margin-right: 6px;
     font-size: 1.0rem;
     flex-shrink: 0;
 }

 /* ---- 下：解決（緑・青系） ---- */
 .col-solution {
     background-color: #f0fdf4;
     border: 1px solid #bbf7d0;
 }

 .title-solution {
     color: #15803d;
     border-bottom: 2px solid #86efac;
 }

 .icon-check {
     color: #16a34a;
     font-weight: bold;
     margin-right: 6px;
     font-size: 1.0rem;
     flex-shrink: 0;
 }

 /* 共通パーツ */
 .comparison-col-title {
     font-size: 2rem;
     font-weight: bold;
     margin-bottom: 12px;
     text-align: center;
     padding-bottom: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
 }

 .comparison-list {
     list-style: none;
 }

 .comparison-list li {
     margin-bottom: 10px;
     display: flex;
     align-items: flex-start;
     font-size: 1.5rem;
     line-height: 1.45;
     color: #333;
 }

 .comparison-list li:last-child {
     margin-bottom: 0;
 }

 /* ===================================
    3. 特徴カード SP
    =================================== */

 .solutions-section {
     padding: 35px 15px;
     background-color: #f8fafc;
 }

 .solutions-header {
     text-align: center;
     margin-bottom: 25px;
 }

 .solutions-main-title {
     font-size: 2rem;
     font-weight: bold;
     color: #222;
     line-height: 1.4;
 }

 .highlight-quote {
     color: #0052cc;
 }

 /* スマホ時（2列 × 2行） */
 .card-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
 }

 .card {
     background: #fff;
     padding: 16px 10px;
     border-radius: 8px;
     text-align: center;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
     border: 1px solid #e2e8f0;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* アイコン画像表示エリア */
 .card-icon-wrapper {
     height: 70px;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .card-icon-img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
 }

 .card-title {
     font-size: 1.5rem;
     font-weight: bold;
     margin-bottom: 8px;
     color: #1e293b;
     line-height: 1.35;
 }

 .card-desc {
     font-size: 1.3rem;
     color: #64748b;
     text-align: left;
     line-height: 1.45;
     margin-top: auto;
     /* 説明テキストの高さを揃える */
 }

 .sp-only {
     display: inline;
 }


 /* ===================================
    4. 5つの理由セクション SP
    =================================== */
 .reasons-section {
     padding: 40px 0;
     background-color: #fff;
 }

 .reasons-header {
     padding: 0 20px;
     margin-bottom: 20px;
 }

 .reasons-sub-title {
     font-size: 1.5rem;
     color: #555;
     font-weight: bold;
     margin-bottom: 2px;
 }

 .reasons-main-title {
     font-size: 2rem;
     font-weight: bold;
     color: #222;
 }

 .reasons-list {
     display: flex;
     flex-direction: column;
 }

 .reason-item {
     display: flex;
     flex-direction: column;
     padding: 25px 20px;
     gap: 15px;
     align-items: center;
 }

 .reason-item:nth-child(even) {
     background-color: #f8fafc;
 }

 .reason-image-wrapper {
     width: 100%;
     max-width: 280px;
     flex-shrink: 0;
     text-align: center;
 }

 .reason-image {
     width: 100%;
     border-radius: 6px;
     object-fit: cover;
 }

 .reason-content {
     flex-grow: 1;
     width: 100%;
 }

 .reason-title {
     font-size: 2rem;
     font-weight: bold;
     color: #111;
     margin-bottom: 10px;
     line-height: 1.3;
 }

 .reason-number {
     font-size: 2rem;
     color: #333;
     margin-right: 4px;
 }

 .reason-headline {
     font-size: 1.5rem;
     color: #111;
 }

 .reason-text {
     font-size: 1.5rem;
     color: #555;
     line-height: 1.6;
 }

 /* ===================================
    5. 調理活用・調理メニュー SP
    =================================== */
 .cooking-section {
     padding: 0px 20px;
     background-color: #fff;
 }

 .cooking-title {
     font-size: 2rem;
     font-weight: bold;
     color: #333;
     margin-bottom: 20px;
 }

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

 /* ===================================
    6. スペック（仕様表） (SP基準)
    =================================== */
 .spec-section {
     padding: 40px 20px;
     background-color: #fff;
 }

 .spec-title {
     font-size: 2rem;
     font-weight: bold;
     color: #222;
     margin-bottom: 15px;
 }

 .spec-table-wrapper {
     width: 100%;
 }

 .spec-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.8rem;
     background-color: #fff;
     border: 1px solid #999;
 }

 .spec-table th,
 .spec-table td {
     border: 1px solid #a6a6a6;
     padding: 8px 8px;
     text-align: left;
     vertical-align: middle;
     line-height: 1.4;
 }

 .spec-table th {
     background-color: #fdf2d0;
     font-weight: bold;
     color: #333;
     width: 20%;
 }

 .spec-table td {
     background-color: #fff;
     color: #333;
     width: 30%;
 }

 /* ===================================
    7. 全国の飲食店・施設で活躍中！ SP
    =================================== */

 .usecase-section {
     padding: 35px 15px;
     background-color: #fff;
 }

 .usecase-header {
     margin-bottom: 25px;
 }

 .usecase-main-title {
     font-size: 2.5rem;
     font-weight: bold;
     color: #222;
     margin-bottom: 5px;
 }

 .usecase-sub-title {
     font-size: 1.5rem;
     color: #666;
 }

 /* 2列レイアウト（スマホ） */
 .usecase-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px 10px;
 }

 .usecase-card {
     display: flex;
     flex-direction: column;
 }

 /* 写真画像の表示枠設定 */
 .usecase-img-wrapper {
     width: 100%;
     overflow: hidden;
     border-radius: 4px;
 }

 .usecase-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .usecase-category {
     font-size: 1.5rem;
     font-weight: bold;
     color: #333;
     margin-bottom: 4px;
     margin: 12px 10px 8px 10px !important;
     padding-bottom: 6px;
     position: relative;
     /* 線の基準点 */
 }


 .usecase-desc {
     font-size: 1.3rem;
     color: #666;
     line-height: 1.4 !important;
     margin: 0 10px !important;
     line-height: 1.5;

 }

 /* 2列グリッド */
 .usecase-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 16px 12px;
 }

 .usecase-card {
     background: #ffffff;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
     padding-bottom: 14px;
     display: flex;
     flex-direction: column;
 }

 /* 画像エリア */
 .usecase-img-wrapper {
     height: 110px;
     border-radius: 0;
 }

 /* オレンジ線 */

 .usecase-category::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 20px;
     height: 2px;
     background-color: #f39800;
 }


 /* ===================================
    8. FAQ（よくある質問） (SP/PC共通)
    =================================== */
 .faq-section {
     max-width: 800px;
     margin: 0 auto;
     padding: 40px 20px;
     color: #333333;
 }

 .faq-title {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 30px;
     color: #444444;
 }

 .faq-item {
     padding-bottom: 24px;
     margin-bottom: 24px;
     border-bottom: 2px solid #e0e0e0;
 }

 .faq-item:last-child {
     border-bottom: none;
     padding-bottom: 0;
     margin-bottom: 0;
 }

 .faq-question {
     font-size: 16px;
     font-weight: bold;
     margin: 0 0 12px 0;
     color: #333333;
     line-height: 1.5;
 }

 .faq-answer {
     font-size: 14px;
     color: #666666;
     line-height: 1.6;
     margin: 0;
 }

 .faq-answer-label {
     display: block;
     font-size: 12px;
     font-weight: bold;
     color: #888888;
     margin-bottom: 4px;
 }

 /* ===================================
    PC・タブレット表示用の調整 (600px以上)
    =================================== */
 @media (min-width: 600px) {

     /* 1. ヘッダー */

     .feature-item {
         width: 85px;
         height: 85px;
         font-size: 0.78rem;
     }

     /* 2. お悩み解決 */

     .trouble-title {
         font-size: 2.5rem;
     }

     .comparison-col {
         padding: 20px 18px;
     }

     .comparison-col-title {
         font-size: 1.5rem;
     }

     .comparison-grid {
         display: grid;
         gap: 12px;
         grid-template-columns: 1fr 1fr;
     }

     .comparison-list li {
         font-size: 1.5rem;
         margin-bottom: 12px;
     }

     .trouble-section {
         padding: 40px 20px;
     }

     .section-title {
         font-size: 1.4rem;
     }

     .comparison-col {
         padding: 18px 15px;
     }

     .comparison-col-title {
         font-size: 1.5rem;
     }

     .comparison-list li {
         font-size: 1.5rem;
     }

     /* 3. 特徴カード (4列に展開) */
     .solutions-section {
         padding: 40px 15px;
     }

     .solutions-header {
         font-size: 1.4rem;
     }

     .card-grid {
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
     }

     .card {
         padding: 18px 8px;
     }

     .card-title {
         font-size: 1.5rem;
     }

     .card-desc {
         font-size: 1.2rem;
     }

     /* 4. 理由 (PC時横並びに切り替え) */

     .solutions-section {
         padding: 45px 20px;
     }

     .solutions-main-title {
         font-size: 2.5rem;
     }

     .sp-only {
         display: none;
         /* PCでは改行解除 */
     }

     .card-grid {
         grid-template-columns: repeat(4, 1fr);
         gap: 15px;
     }

     .card {
         padding: 20px 12px;
     }

     .card-icon-wrapper {
         width: 70px;
         height: 70px;
         margin-bottom: 12px;
     }

     .card-title {
         font-size: 1.5rem;
     }

     .card-desc {
         font-size: 1.2rem;
     }

     .reasons-header {
         padding: 0 30px;
     }

     .reasons-main-title {
         font-size: 2.5rem;
         text-align: center;
     }

     .reasons-sub-title {
         font-size: 1.5rem;
         color: #555;
         font-weight: bold;
         margin-bottom: 2px;
         text-align: center;
     }

     .reason-item {
         flex-direction: row;
         padding: 30px;
         gap: 30px;
     }

     .reason-image-wrapper {
         width: 220px;
     }

     .reason-title {
         font-size: 2rem;
     }

     .reason-text {
         font-size: 1.5rem;
     }

     /* 5. 調理活用 */
     .cooking-title {
         font-size: 2.5rem;
         text-align: center;
     }

     /* 6. スペック表 */

     .spec-title {
         font-size: 2.5rem;
         font-weight: bold;
         color: #222;
         margin-bottom: 15px;
         text-align: center;
     }

     .spec-table {
         font-size: 1.2rem;
         text-align: center;
     }

     .spec-table th,
     .spec-table td {
         padding: 10px 12px;
     }

     /* 7. 活躍中セクション (4列に展開) */
     .usecase-section {
         padding: 60px 20px;
         max-width: 1200px;
         margin: 0 auto;
         font-family: "Helvetica Neue", Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
         box-sizing: border-box;
     }

     .usecase-header {
         text-align: center;
         margin-bottom: 40px;
     }

     .usecase-main-title {
         font-size: 2.2rem;
         font-weight: 700;
         color: #222222;
         letter-spacing: 0.04em;
         margin-bottom: 10px;
         line-height: 1.3;
     }

     .usecase-sub-title {
         font-size: 1.1rem;
         color: #666666;
         letter-spacing: 0.02em;
         margin: 0;
     }

     .usecase-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 24px 20px;
     }

     .usecase-card {
         background: #ffffff;
         border-radius: 12px;
         overflow: hidden;
         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         display: flex;
         flex-direction: column;
         padding-bottom: 16px;
     }

     .usecase-card:hover {
         transform: translateY(-6px);
         box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
     }

     .usecase-img-wrapper {
         width: 100%;
         overflow: hidden;
         position: relative;
     }

     .usecase-img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         transition: transform 0.4s ease;
     }

     .usecase-card:hover .usecase-img {
         transform: scale(1.05);
     }

     .usecase-category {
         font-size: 1.3rem;
         font-weight: 700;
         color: #1a1a1a;
         margin: 16px 16px 8px 16px;
         line-height: 1.4;
         position: relative;
         padding-bottom: 6px;
     }

     .usecase-category::after {
         content: "";
         position: absolute;
         left: 0;
         bottom: 0;
         width: 24px;
         height: 2px;
         background-color: #f39800;
     }

     .usecase-desc {
         font-size: 1.3rem;
         color: #555555;
         line-height: 1.6;
         margin: 3% !important;
     }


 }

 /* ショールームテキストバナー */
 .showroom-stock-banner {
     background-color: #fff9e6;
     border: 2px solid #ffb700;
     border-radius: 8px;
     padding: 15px;
     margin: 20px 0;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     box-sizing: border-box;
     text-align: center;
 }

 .showroom-image-box {
     margin-bottom: 12px;
     text-align: center;
     max-width: 800px;
 }

 .showroom-image-box img {
     width: 50%;
     max-width: 320px;
     min-width: 200px;
     height: auto;
     display: inline-block;
     border-radius: 4px;
     margin-top: 20px;
 }

 .showroom-badge {
     display: inline-block;
     background-color: #ff9900;
     color: #ffffff;
     font-size: 12px;
     font-weight: bold;
     padding: 4px 10px;
     border-radius: 4px;
     margin-bottom: 8px;
     line-height: 1.2;
 }

 .showroom-text {
     font-size: 20px;
     color: #333333;
     line-height: 1.6;
     margin: 0;
     padding: 0;
     text-align: center;
 }

 .showroom-text strong {
     color: #d90000;
     font-weight: bold;
 }

 @media (max-width: 768px) {
     .showroom-text {
         font-size: 16px;
         color: #333333;
         padding: 0;
         text-align: left;
     }

     .showroom-image-box img {
         width: 100%;
         min-width: 200px;
         display: inline-block;
         border-radius: 4px;
         margin-top: 20px;
     }
 }