* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
}
h2 {

   margin-bottom: 10px;

}
header {
    background-color: #eee;
    /*color: white;*/
    padding: 15px 0;
    text-align: center;
}
header h1 {
    margin: 0;
    font-size: 16px;
    font-weight: normal;
    padding-left: 20px;
    /*text-align: left;*/
}
nav {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
    padding-left: 20px;
}
nav ul li {
    display: inline;
}
nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
nav ul li a:hover {
    color: #1a73e8;
}
main {
    padding: 20px;
}
.recommended-section {
    width: 100%;
    margin-bottom: 40px;
}
.recommended-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    padding-left: 20px;
}
.recommended-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.recommended-item {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: calc(33% - 20px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.recommended-item img {
    width: 100%;
    height: auto;
}
.recommended-item h2 {
    font-size: 18px;
    margin: 10px 0;
    padding-left: 10px;
}
.recommended-item p {
    font-size: 14px;
    color: #666;
    margin: 10px 0;
    padding-left: 10px;
}
.recommended-item a {
    display: block;
    text-align: center;
    padding: 10px;
    background-color: #1a73e8;
    color: white;
    text-decoration: none;
    border-top: 1px solid #ddd;
}
.recommended-item a:hover {
    background-color: #1666c1;
}
.landing-section {
    max-width: 1000px;
    margin: 20px auto 0;
    display: flex;
    gap: 20px;
}
.landing-content {
    flex: 3;
}
.landing-page-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.landing-page-item {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: calc(33% - 20px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.landing-page-item img {
    width: 100%;
    height: auto;
}
.landing-page-item h2 {
    font-size: 18px;
    margin: 10px 0;
    padding-left: 10px;
}
.landing-page-item p {
    font-size: 14px;
    color: #666;
    margin: 10px 0;
    padding-left: 10px;
}
.landing-page-item a {
    display: block;
    text-align: center;
    padding: 10px;
    background-color: #1a73e8;
    color: white;
    text-decoration: none;
    border-top: 1px solid #ddd;
}
.landing-page-item a:hover {
    background-color: #1666c1;
}
.sidebar {
    flex: 1;
    min-width: 18%;
    background-color: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.sidebar h3 {
    font-size: 18px;
    margin-bottom: 10px;
}
.sidebar ul {
    list-style: none;
    padding: 0;
}
.sidebar ul li {
    margin-bottom: 10px;
}
.sidebar ul li a {
    text-decoration: none;
    color: #1a73e8;
}
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}


.container {
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.top-section {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.main-section {
    flex: 3;
    margin-right: 20px;
}

.main-section img {
    width: 100%;
    height: auto;
}

.main-section .top-title {
    font-size: 24px;
    margin: 10px 0;
    text-align: left;
}

.main-section .top-description {
    font-size: 16px;
    margin-bottom: 20px;
}

.main-section .image-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.main-section .image-grid .image-item {
    flex: 1 1 calc(50% - 10px);
    margin-bottom: 10px;
}

.main-section .image-grid img {
    width: 100%;
    height: auto;
}

.main-section .image-title {
    font-size: 18px;
    margin: 5px 0;
}

.main-section .image-description {
    font-size: 14px;
}

.sub-column {
    flex: 1;
}

.sub-column img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.sub-column ul {
    list-style-type: none;
    padding: 0;
}

.sub-column ul li {
    margin-bottom: 10px;
}

.bottom-section {
    display: flex;
    flex-direction: column;
}

.bottom-section .list-item {
    display: flex;
    margin-bottom: 10px;
}

.bottom-section .thumbnail {
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

.bottom-section .list-title {
    font-size: 16px;
    margin: 0;
}

.bottom-section .list-description {
    font-size: 14px;
}

/* 写真表示スタイル */
.image-full {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px;
}

.image-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: space-between;
    flex-wrap: wrap; /* 小さな画面で折り返し */
}



/* 写真表示スタイル */


.image-row.one img {
    flex-basis: 100%; /* 横幅全体を使う */
    max-width: 600px;
}
.image-row.one .image-caption-container {
    flex-basis: 100%; /* 横幅全体を使う */

}
.image-row.two .image-caption-container {
    flex-basis: calc(50% - 10px); /* 横2列の幅 */

}

.image-row.three .image-caption-container {
    flex-basis: calc(33.33% - 10px); /* 横3列の幅 */

}

.image-caption-container {
    display: flex;
    flex-direction: column; /* 画像の下にキャプションを配置 */
    align-items: center; /* 中央揃え */
    box-sizing: border-box; /* パディングやボーダーを含めたサイズ調整 */
}

.image-caption-container img {
    width: 100%; /* 親要素に合わせて画像の幅を調整 */
    height: auto !important; /* 高さを自動調整 */
    flex: 1;
    width: 100% !important;
    min-width: 0; /* 最小幅の制約を解除 */
    object-fit: cover; /* 縮尺を維持してトリミング */
    object-position: center; /* 中央を基準にトリミング */
    height: auto; /* デフォルトの高さ */
}

.image-caption-container .caption {
    margin-top: 8px; /* キャプションと画像の間隔 */
    text-align: center;
    font-size: 14px;
    color: #555; /* キャプションの色 */
}











.category-banner {
      width: 100%;
      height: 40px;
      background: linear-gradient(45deg, #0073e6, #00c6ff);
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
      margin-bottom: 20px;
}


/*ここからインデックスページ*/
/* 全体のスタイル */



h1 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
}
h2 {
    font-size: 26px;
    margin-bottom: 20px;
}
h3 {
    font-size: 20px;
    margin-bottom: 15px;
}
/* リスト全体のスタイル */
.index-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.index-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.index-item:hover {
    background-color: #f5f5f5;
}

.index-thumbnail img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.index-content {
    flex: 1;
}

.index-title {
    font-size: 18px;
    margin: 0 0 10px;
    color: #007BFF;
    text-decoration: none;
    transition: color 0.3s;
}

.index-title:hover {
    color: #0056b3;
}

.index-description {
    font-size: 14px;
    color: #555;
}

/* ページネーション */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: all 0.3s;
}

.pagination a:hover {
    background-color: #007BFF;
    color: #fff;
    border-color: #007BFF;
}

.pagination .active {
    background-color: #007BFF;
    color: #fff;
    border-color: #007BFF;
    pointer-events: none;
}

.pagination .disabled {
    color: #bbb;
    border-color: #ddd;
    pointer-events: none;
}


/*詳細ページ*/
 /* 全体のスタイル */




.midashi {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

p {
    margin-bottom: 20px;
    font-size: 16px;
}

/*ここからサンテックプレスリリース*/

.product-description {
            background-color: #fff;
            border-radius: 8px;
            padding: 2%;
            margin-bottom: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 96%;
        }

        .product-description p {
            font-size: 18px;
            color: #333;
            margin: 0;
            width: 100%;
        }

        .product-specifications {
            background-color: #fff;
            border-radius: 8px;
            padding: 2%;
            margin-bottom: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 96%;
            word-break: break-all;
        }

        .product-specifications h3 {
            font-size: 20px;
            margin-bottom: 10px;
            color: #555;
            border-bottom: 2px solid #ddd;
            padding-bottom: 5px;
            width: 100%;
        }

        .product-specifications ul {
            list-style-type: none;
            padding: 0;
        }

        .product-specifications li {
            margin: 8px 0;
            color: #444;
            font-size: 16px;
        }

        .product-specifications strong {
            color: #222;
            font-weight: bold;
        }

        .product-price {
            background-color: #ffecec;
            color: #e60000;
            font-size: 24px;
            font-weight: bold;
            padding: 2%;
            border-radius: 8px;
            margin: 15px 0;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 96%;
        }

        .product-category, .related-equipment, .note {
            background-color: #fff;
            border-radius: 8px;
            padding: 2%;
            margin-bottom: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 16px;
            width: 96%;
        }

        .product-category span, .related-equipment span {
            font-weight: bold;
            color: #555;
        }

        .note {
            font-size: 14px;
            color: #666;
        }

        .related-equipment {
            margin-bottom: 20px;
        }

        @media screen and (max-width: 600px) {


            .product-description, .product-specifications, .product-price, .product-category, .related-equipment, .note {
                padding: 15px;
                margin-bottom: 10px;
            }

            .product-price {
                font-size: 20px;
            }

            .product-specifications h3 {
                font-size: 18px;
            }

            .product-specifications li, .note, .product-category, .related-equipment {
                font-size: 14px;
            }
        }


/*上部にカテゴ表示部分*/
.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    list-style: none;
    margin: 20px 0;
}

.category-item {
    background-color: #f4f4f4;
    border-radius: 5px;
    padding: 8px 12px;
    margin: 5px;
    transition: all 0.3s ease;
}

.category-item a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
}

.category-item:hover {
    background-color: #ddd;
}




/* 全幅補足ボックス */
.qa-note-full {
  width: 100%;
  background: #0f172a; /* ダークネイビー背景 */
  color: #f8fafc;
  margin: 2rem 0;
  padding: 1.2rem 0;
}

.qa-note-inner {
  max-width: 1100px; /* 本文幅を制御 */
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: left; /* 左寄せ */
}

.qa-note-inner strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #38bdf8; /* アクセント水色 */
}

.qa-note-inner p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #e2e8f0;
}
.qa-table th {
  text-align: left;

}


/*サンテックのコンベクションオーブンの表*/
.d_table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.d_table th,
.d_table td {
  border: 1px solid #ddd;
  padding: 10px 12px;
  text-align: center;
}

.d_table th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #333;
}

.d_table tr:nth-child(even) {
  background-color: #fafafa;
}

.d_table tr:hover {
  background-color: #f0f8ff;
  transition: 0.2s;
}

.d_table td:first-child {
  text-align: left;
  font-weight: 500;
}

/* ▼ Q&A 表：CSS（コピペ可） */
.qa-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.qa-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid #e8e8ec;
  border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  font-family:"Segoe UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  font-size:14.5px;
  line-height:1.75;
}
.qa-table thead th{
  position:sticky; top:0; z-index:1;
  text-align:left;
  padding:14px 16px;
  font-weight:700;
  letter-spacing:.02em;
  color:#1f2328;
  background:
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border-bottom:1px solid #e5e7eb;
}
.qa-table td{
  vertical-align:top;
  padding:14px 16px;
  color:#24292f;
}
.qa-table tbody tr td:first-child{
  width:28%;
  font-weight:600;
  color:#111827;
  border-right:1px solid #f1f3f5;
  background:
    linear-gradient(90deg, rgba(66,133,244,0.08) 0%, rgba(66,133,244,0) 60%);
}
.qa-table tbody tr:not(:last-child) td{
  border-bottom:1px solid #f3f4f6;
}
.qa-table tbody tr{
  transition:background-color .2s ease, box-shadow .2s ease;
}
.qa-table tbody tr:hover{
  background:#fbfdff;
  box-shadow:inset 0 0 0 1px rgba(66,133,244,.08);
}
/*ブレッドクラム*/
.breadcrumb {font-size:.92rem; margin:8px 0 16px; color:#555;}
  .breadcrumb ol {list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4em;}
  .breadcrumb li {display:flex; align-items:center;}
  .breadcrumb li+li::before {content:"›"; margin:0 .4em; opacity:.6;}
  .breadcrumb a {text-decoration:none; color:#0a66c2;}
  .breadcrumb a:hover {text-decoration:underline;}
  .breadcrumb [aria-current="page"] {color:#222; font-weight:600;}


@media (max-width: 720px){
  .qa-table{ font-size:14px; }
  .qa-table tbody tr td:first-child{ width:38%; }
}




/* ===== TopRanker トップページ追加CSS ===== */

.top-home-container {
    padding-top: 30px;
    padding-bottom: 30px;
}

.top-home-hero {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid #ddd;
}

.top-home-hero-text {
    flex: 1;
}

.top-home-lead {
    color: #1a73e8;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}

.top-home-title {
    font-size: 32px;
    line-height: 1.4;
    margin-bottom: 15px;
    color: #222;
}

.top-home-description {
    font-size: 16px;
    color: #555;
    line-height: 1.9;
    margin-bottom: 20px;
}

.top-home-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.top-home-btn {
    display: inline-block;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.top-home-btn-primary {
    background-color: #1a73e8;
    color: #fff;
}

.top-home-btn-primary:hover {
    background-color: #1666c1;
}

.top-home-btn-secondary {
    background-color: #f4f4f4;
    color: #333;
    border: 1px solid #ddd;
}

.top-home-btn-secondary:hover {
    background-color: #e9e9e9;
}

.top-home-hero-image {
    flex: 0 0 38%;
}

.top-home-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.top-home-section {
    margin-bottom: 35px;
}

.top-home-section-title {
    font-size: 24px;
    margin-bottom: 18px;
    padding-left: 12px;
    border-left: 5px solid #1a73e8;
    color: #222;
}

.top-home-feature-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.top-home-feature-item {
    flex: 1 1 calc(33.333% - 14px);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.top-home-feature-item h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.top-home-feature-item p {
    margin-bottom: 0;
    font-size: 15px;
    color: #555;
    line-height: 1.8;
}

.top-home-pickup-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.top-home-pickup-item {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #fff;
    transition: background-color 0.3s ease;
}

.top-home-pickup-item:hover {
    background-color: #f5f5f5;
}

.top-home-pickup-thumb {
    flex: 0 0 160px;
}

.top-home-pickup-thumb img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: block;
}

.top-home-pickup-body {
    flex: 1;
}

.top-home-pickup-title {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    color: #007BFF;
    text-decoration: none;
    margin-bottom: 8px;
}

.top-home-pickup-title:hover {
    color: #0056b3;
}

.top-home-pickup-text {
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
    line-height: 1.8;
}

.top-home-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0;
    list-style: none;
    margin: 0;
}

.top-home-category-list li {
    margin: 0;
}

.top-home-category-list a {
    display: inline-block;
    padding: 10px 16px;
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.top-home-category-list a:hover {
    background: #ddd;
}

.top-home-index-guide {
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
    border: 1px solid #d6e6fb;
    border-radius: 8px;
    padding: 28px 24px;
    text-align: center;
    margin-top: 10px;
}

.top-home-index-guide h2 {
    font-size: 26px;
    margin-bottom: 12px;
    color: #222;
}

.top-home-index-guide p {
    max-width: 760px;
    margin: 0 auto 20px;
    color: #555;
    line-height: 1.9;
}

/* レスポンシブ */
@media (max-width: 950px) {
    .top-home-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .top-home-hero-image {
        flex: none;
    }

    .top-home-feature-item {
        flex: 1 1 100%;
    }
}

@media (max-width: 600px) {
    .top-home-title {
        font-size: 26px;
    }

    .top-home-section-title {
        font-size: 22px;
    }

    .top-home-pickup-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .top-home-pickup-thumb {
        flex: none;
        width: 100%;
    }

    .top-home-pickup-thumb img {
        width: 100%;
        height: auto;
    }

    .top-home-buttons {
        flex-direction: column;
    }

    .top-home-btn {
        text-align: center;
        width: 100%;
    }
}




/* レスポンシブ対応 */

@media (min-width: 950px) {
.sp_mode_only {
   display: none;
}

}

@media (max-width: 950px) {

.pc_mode_only {
   display: none;
}

.container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
main {
    padding: 10px 5px 10px 5px;
}
.top-section {
   flex-direction: column;
}

.main-section {
   margin-right: 0;
}

.main-section .image-grid {
   gap: 10px;
}

.main-section .image-grid .image-item {
   flex: 1 1 calc(50% - 10px);
   max-width: calc(50% - 10px);
}
    

}

@media (max-width: 600px) {
.pc_mode_only {
   display: none;
}
main {
    padding: 10px 5px 10px 5px;
}
.container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

}