* {
    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: #294c7a;
    color: white;
    padding: 15px 0;
    
}
header h1 {
    margin: 0;
    font-size: 24px;
    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;
}
.top-section a {
    text-decoration: none;
}
.main-section {
    flex: 3;
    margin-right: 20px;
}

.main-section img {
    width: 100%;
    height: auto;
}
.main-section a {
    text-decoration: none;
}
.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;
}

/* リスト全体のスタイル */
.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;
}


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




h1 {
    text-align: center;
    font-size: 24px;
    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;
            }
        }


/* ここからサイドバーのリリース Picked Up  */

        .picked-up {
            display: block;
            margin: 20px 0;
        }

        .picked-up-item {
            background-color: #f4f4f4;
            border-radius: 8px;
            width: 280px;
            margin: 5px 5px 15px 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .picked-up-item:hover {
            transform: scale(1.03);
        }

        .picked-up-link {
            text-decoration: none;
            color: #333;
            display: block;
        }

        .picked-up-thumbnail {
            text-align: center;
            padding: 10px;
        }

        .picked-up-thumbnail img {
            width: 100px;
            height: auto;
            border-radius: 5px;
        }

        .picked-up-content {
            padding: 10px;
        }

        .picked-up-title {
            font-size: 1.1em;
            margin: 5px 0;
            font-weight: bold;
            color: #333;
        }

        .picked-up-description {
            font-size: 0.9em;
            color: #666;
        }




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

@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);
}

}



body {
  background: #fff8cc !important;
  /*color: #cc0000 !important;*/
  font-size: 18px !important;
  line-height: 2 !important;
}

p {
  margin: 0 0 1.2em !important;
}