/* --- 基本設定 --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    /* スムーズスクロール */
}

body {
    font-family: "Noto Sans JP", sans-serif;
    /* 本文: 仮サンセリフ */
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    /* 基本文字色 (黒に近いグレー) */
    background-color: #fff;
    /* 基本背景色 (白) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Noto Serif JP", serif;
    /* 見出し: 仮セリフ */
    font-weight: 700;
    /* 太め */
    line-height: 1.4;
    color: #111;
    /* 見出しの色 (黒) */
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    /* 画像下の余白対策 */
    border-radius: 0;
    /* 角丸なし */
}

video {
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.7;
}

ul,
ol {
    list-style: none;
}

/* --- 共通レイアウト・パーツ --- */
.section {
    padding-top: 100px;
    /* セクション上下の余白 (大きめに) */
    padding-bottom: 100px;
}

.section-bg-gray {
    background-color: #f8f8f8;
    /* 薄いグレー背景 */
}

.section-container {
    max-width: 1140px;
    /* コンテンツ最大幅 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    /* コンテナ左右の余白 */
    padding-right: 40px;
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    /* 36px相当 */
    text-align: center;
    margin-bottom: 60px;
    /* タイトル下の余白 */
    font-weight: 400;
    /* セリフなので少し細めに */
    user-select: none;
}

.section-subtitle {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    /* サブタイトルはサンセリフ */
    font-size: 0.875rem;
    /* 14px相当 */
    color: #888;
    /* 少し薄いグレー */
    margin-top: 0.5em;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.section-description {
    text-align: center;
    margin-bottom: 40px;
    color: #555;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* カード要素 (立体感) */
.card {
    background-color: #fff;
    border: 1px solid #eee;
    /* 繊細なボーダー */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* 繊細な影 */
    border-radius: 0;
    /* 角丸なし */
    overflow: hidden;
    /* 画像のはみ出し防止 */
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    /* ホバーで少し影を強く */
}

/* ボタン */
.button {
    display: inline-block;
    padding: 12px 30px;
    font-family: "Noto Sans JP", sans-serif;
    /* ボタンはサンセリフ */
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background-color: #222;
    /* 基本ボタン色 (黒) */
    border: 1px solid #222;
    border-radius: 0;
    /* 角丸なし */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease,
        border-color 0.3s ease;
    text-decoration: none;
    /* aタグの場合の下線消去 */
}

.button:hover {
    background-color: #555;
    border-color: #555;
    color: #fff;
    opacity: 1;
    /* aタグのホバー効果を上書き */
}

.button--outline {
    background-color: transparent;
    color: #222;
    border: 1px solid #ccc;
    /* アウトラインは少し薄め */
}

.button--outline:hover {
    background-color: #222;
    border-color: #222;
    color: #fff;
}

/* 必須マーク */
.required {
    color: #aaa;
    /* グレーで控えめに */
    font-size: 0.8em;
    margin-left: 0.3em;
    font-weight: normal;
    font-family: "Noto Sans JP", sans-serif;
}

/* ===== ローディング画面のスタイル ===== */
.loader-wrapper {
    position: fixed;
    /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    /* 背景色 (サイトに合わせて変更) */
    display: flex;
    /* 中央揃えのため */
    justify-content: center;
    /* 水平中央揃え */
    align-items: center;
    /* 垂直中央揃え */
    z-index: 9999;
    /* 他の要素より必ず手前に表示 */
    transition: opacity 0.8s ease, visibility 0.8s ease;
    /* フェードアウトのアニメーション */
}

/* スピナーアニメーションの例 */
.loader {
    border: 8px solid #f3f3f3;
    /* スピナーの背景部分 */
    border-top: 8px solid #3498db;
    /* スピナーの動く部分の色 (サイトに合わせて変更) */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1.5s linear infinite;
    /* spinアニメーションを適用 */
}

/* スピナーを回転させるアニメーション */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== ローディング画面を非表示にするクラス ===== */
.loader-wrapper.loaded {
    opacity: 0;
    /* 透明にする */
    visibility: hidden;
    /* 要素を非表示にし、操作も不可にする */
    display: none;
}

.content-page {
    position: relative;
}
.content-page.visible {
    visibility: visible;
    /* 表示する */
    opacity: 1;
    /* 不透明にする */
    transition: opacity 0.5s ease;
    /* ゆっくり表示されるように */
}

/* --- ヘッダー --- */
.header {
    position: sticky;
    /* スクロール追従 */
    top: 0;
    width: 100%;
    height: 8vh;
    background-color: rgba(255, 255, 255, 0.95);
    /* 少し透過した白 */
    backdrop-filter: blur(10px);
    /* 背景ぼかし (対応ブラウザのみ) */
    border-bottom: 1px solid #eee;
    /* 下境界線 */
    z-index: 1000;
    padding: 15px 0;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

.header-container {
    max-width: 1200px;
    /* ヘッダーは少し広め */
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    font-size: 1.5rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
}

.header-logo a {
    color: #111;
}

.header-logo a:hover {
    opacity: 1;
}

.header-nav {
    /* モバイルでは非表示 (後述) */
}

.header-list {
    display: flex;
    align-items: center;
    gap: 25px;
    /* メニュー項目の間隔 */
}

.header-link {
    font-size: 0.9rem;
    color: #333;
    padding: 5px 0;
    position: relative;
    font-weight: 500;
}

/* ホバー/アクティブ時の下線アニメーション例 */
.header-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #333;
    transition: width 0.3s ease;
}

.header-link:hover::after,
.header-link.is-active::after {
    /* is-activeクラスはJSで制御 */
    width: 100%;
}

.header-button {
    margin-left: 15px;
    padding: 8px 20px;
    /* ヘッダーボタンは少し小さめ */
}

.header-menu-button {
    display: none;
    /* PCでは非表示 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 110;
    /* ナビより手前 */
}

.header-menu-button span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #333;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.header-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);
    background: #fff;
    display: none;
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s ease 0.5s;
}

.header-menu.active {
    /* 表示状態 */
    transform: translateX(0);
    opacity: 1;
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease, visibility 0s ease 0s;
    /* 表示時はvisibilityの遅延は不要 */
}

.header-menu-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.header-menu-list li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 75px;
    list-style: none;
}

.header-menu-list li:not(:last-child) {
    border-bottom: #333 solid 1px;
}

.header-menu-list .header-item .sns-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    width: 50%;
}
.header-menu-list li img {
    width: 50px;
    height: 50px;
}
/* --- ヒーロー --- */
.hero {
    position: relative;
    background-color: #fff;
    /* 白背景 */
    padding: 120px 0;
    /* 上下の余白を特に大きく */
    width: 100%;
    height: calc(100vh - 72.47px);
    /* 背景の動画をはみ出ないようにする */
    overflow: hidden;
}

.hero video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    object-fit: cover;
    filter: brightness(0.5);
    transform: scale(1.3);
}

.hero-container {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    padding: 150px 40px 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* テキストと画像で2分割 */
    align-items: center;
    gap: 60px;
    z-index: 2;
}

.hero-title {
    font-size: 3rem;
    /* 48px相当 */
    margin-bottom: 20px;
    color: #fff;
    font-weight: 400;
    /* セリフなので少し細めに */
}

.hero-description {
    font-size: 1.1rem;
    /* 18px相当 */
    color: #eee;
    margin-bottom: 40px;
}

.hero-button {
    font-size: 1rem;
}

/* --- サービス紹介 --- */
.service-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* レスポンシブなグリッド */
    gap: 30px;
    /* カード間の余白 */
}

.service-item {
    position: relative;
    height: auto;
    max-height: 600px;
    background: #fff;
    border-radius: 13px;
    /* 文字色を白に */
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 薄い影 */
    padding: 5px;
}

.service-img {
    border-radius: 8px;
    height: 60%;
    overflow: hidden;
}
.service-item-image {
    width: 100%;
    z-index: 1;
    filter: brightness(1);
    /* 画像を少し暗くする */
    object-fit: cover;
    /* 画像をコンテナに合わせて調整 */
    transition: transform 1.3s ease-in-out;
}

.service-item-image:hover {
    transform: scale(1.1);
}

.service-item-content {
    position: relative;
    width: 100%;
    height: auto;
    color: #fff;
    z-index: 2;
    /* 文字を前面に表示 */
}

.service-item-title {
    text-align: left;
    margin-top: -35px;
    font-size: 1.3rem;
    color: #ddd;
    padding-left: 10px;
}

.service-item-description {
    font-size: 0.7rem;
    margin-top: 10px;
    color: #333;
}

.recommended-lot {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.recommended-usage {
    color: #333;
    border-bottom: #333 solid 1px;
    padding: 5px 10px;
    margin: 10px 0 10px 0;
}

.silk-print-link {
    margin-top: 10px;
    margin-right: 20px;
    color: #333;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.arrow-icon {
    transform: translateY(10%);
}
/* --- 料金案内 --- */
.price-example {
    padding: 40px;
    text-align: center;
    max-width: 700px;
    margin: 40px auto 0;
}

.price-example-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* --- 料金案内 --- */
.price {
    /* 必要であればセクション特有のスタイル */
}

.price-table {
    margin-bottom: 50px;
    /* テーブル間の余白 */
    padding: 40px;
}

.price-table:last-of-type {
    /* 同じセクション内の最後の料金表なら下の余白少なめ */
    margin-bottom: 30px;
}

.price-table-title {
    font-size: 1.5rem;
    /* 24px相当 */
    text-align: center;
    margin-bottom: 10px;
    font-weight: 700;
    /* 見出しを少し強調 */
}

.price-table-caption {
    font-size: 0.9rem;
    /* 14px相当 */
    color: #666;
    text-align: center;
    margin-bottom: 30px;
}

/* スマホ表示時にテーブルがはみ出す場合のスクロール対応 */
.price-table-scroll-wrapper {
    overflow-x: auto;
    /* 横スクロールを可能に */
    -webkit-overflow-scrolling: touch;
    /* iOSでの慣性スクロール */
    margin-bottom: 30px;
}

.price-table {
    width: 100%;
    /* テーブルの最小幅を指定（横スクロール発生目安） */
    border-collapse: collapse;
    /* 罫線を重ねる */
    table-layout: fixed;
    /* 列幅を均等にしやすい */
}

.price-table th,
.price-table td {
    border: 1px solid #eee;
    /* 繊細な罫線 */
    padding: 15px 10px;
    text-align: center;
    font-size: 0.95rem;
    /* 15px相当 */
    vertical-align: middle;
    /* セル内容を中央揃え */
}

.price-table thead th {
    background-color: #f8f8f8;
    /* 見出し行の背景色 */
    font-family: "Noto Serif JP", serif;
    /* 見出しフォント適用 */
    font-weight: 700;
    color: #333;
}

.price-table tbody td {
    font-weight: 700;
    /* 価格を太字に */
    color: #111;
    font-family: "Noto Sans JP", sans-serif;
    /* 価格はサンセリフが見やすい場合も */
}

/* 最初の列（見出し列）のスタイル */
.price-table th:first-child,
.price-table td:first-child {
    background-color: #fff;
    /* 白背景 */
    font-weight: normal;
    color: #555;
    text-align: left;
    /* 左揃え */
    padding-left: 15px;
}

.price-table-notes {
    font-size: 0.85rem;
    /* 13.6px相当 */
    color: #666;
    border-top: 1px dashed #ddd;
    /* 上部に区切り線 */
    padding-top: 20px;
    margin-top: 20px;
    /* テーブルとの間に余白 */
}

.price-table-notes p {
    margin-bottom: 5px;
}

.price-table-notes p:last-child {
    margin-bottom: 0;
}

.price-table-notes strong {
    font-weight: 700;
    color: #333;
}

.section-more-button-area {
    text-align: center;
    margin-top: 40px;
    /* セクションの下部余白 */
}

/* --- お客様に届くまで --- */
.flow-list {
    display: flex;
    justify-content: space-between;
    counter-reset: flow-counter;
    /* 番号用カウンター */
    gap: 30px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 50px 0;
}

.flow-item {
    flex: 1;
    text-align: center;
    padding: 0 15px;
    position: relative;
}

/* 区切り線（最後以外） */
.flow-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -15px;
    /* gapの半分 */
    width: 1px;
    height: 80px;
    background-color: #eee;
    transform: translateY(-50%);
}

.flow-number {
    display: inline-block;
    font-family: "Noto Serif JP", serif;
    font-size: 3rem;
    color: #ccc;
    /* 番号は薄く */
    margin-bottom: 15px;
    line-height: 1;
}

.flow-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.flow-description {
    font-size: 0.9rem;
    color: #666;
}

/* --- 会社概要 --- */
#company {
    position: relative;
    box-shadow: inset 0px 5px 20px rgba(0, 0, 0, 0.6);
    padding: 20px 0;
}

.company-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.company-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.company-image {
    position: absolute;
    filter: brightness(0.7);
    overflow: hidden;
}

.company-image > img {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    aspect-ratio: 9 / 16;
}

/* 3番目 */
.company-image.image1 {
    width: 300px;
    top: 30%;
    left: 65%;
    transform: translateY(-50%);
    z-index: 97;
    filter: brightness(0.7) blur(2px);
}

/* ４番目 */
.company-image.image2 {
    width: 300px;
    top: 25%;
    left: 82%;
    z-index: 98;
    transform: translateY(-50%);
    filter: blur(1px);
}

/* １番目 */
.company-image.image3 {
    width: 280px;
    top: 50%;
    left: -2%;
    z-index: 99;
    transform: translateY(-50%);
}

/* ２番目 */
.company-image.image4 {
    width: 200px;
    top: 65%;
    left: 25%;
    z-index: 98;
    transform: translateY(-50%);
    filter: brightness(0.7) blur(2px);
}

/* 上の画像 */
.company-image.image5 {
    width: 300px;
    top: 65%;
    left: 53%;
    z-index: 98;
    transform: translateY(-50%);
    filter: brightness(0.7) blur(2px);
}

/* 下の画像 */
.company-image.image6 {
    width: 350px;
    top: 65%;
    left: 13%;
    z-index: 98;
    transform: translateY(-50%);
    filter: brightness(0.7) blur(2px);
}

/* 空白を埋める画像 */
.company-image.image7 {
    width: 250px;
    top: 65%;
    left: 9%;
    z-index: 97;
    transform: translateY(-50%);
    filter: blur(3px);
}

.company-info {
    position: relative;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 25px;
    /* 少し広めの余白 */
    border-radius: 6px;
    /* 少し角丸に */
    /* オプション：わずかな影で立体感を出す */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.company-definition-list dt {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    /* color: #FFFFFF; */
    /* 白から変更 */
    color: #444;
    /* 濃いめのグレー（黒に近い） */
    margin-top: 15px;
    font-size: 1.4rem;
}

.company-definition-list dd {
    font-family: "Noto Serif JP", serif;
    margin-left: 0;
    margin-bottom: 5px;
    /* color: #FFFFFF; */
    /* 白から変更 */
    color: #222;
    /* dtより少し薄いグレー */
    font-size: 1.3rem;
}

.company-definition-list dt:first-child {
    margin-top: 0;
}

/* --- 会社理念 --- */
.philosophy-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    text-align: center;
}

.philosophy-icon {
    font-size: 4.5rem;
    /* アイコンサイズ (実際のアイコンに置き換え) */
    margin-bottom: 20px;
    color: #aaa;
    /* アイコン色 */
}

.philosophy-title {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.philosophy-item p {
    font-size: 0.95rem;
    color: #666;
}

/* よくあるご質問 */
.faq-block {
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 薄い影 */
    border: 1px solid #eee;
    /* 例: 見た目のための境界線 */
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    /* ★ これが重要: max-height アニメーションに必要 */
    cursor: pointer;
    /* クリック可能を示す */
    transition: all 0.2s ease;
    /* ★ アニメーションの設定 */
}

.faq-block:hover {
    background: #f4f4f4;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* ホバー時の影 */
}

.faq-block h3 {
    user-select: none;
    padding: 15px 50px 15px 20px;
    /* アイコンスペース確保 */
    margin: 0;
    position: relative;
    /* アイコンの位置基準 */
    font-size: 1.1em;
}

.faq-block .toggle-icon {
    position: absolute;
    top: 27px;
    right: 20px;
    transform: translateY(-50%);
    /* アイコンを中央に配置 */
    transition: transform 0.3s ease;
    /* ★ アイコン回転のアニメーション */
    font-size: 1.2em;
    /* アイコンサイズ調整 */
    line-height: 0;
    /* 余計なスペース削除 */
}

.faq-block.active .toggle-icon {
    transform: translateY(-50%) rotate(180deg);
}

/* hideの時は質問を非表示にする */
.questions-container {
    /* --- ★ アニメーションの核 --- */
    max-height: 0;
    /* ★ 初期状態は高さを0に */
    opacity: 0;
    /* ★ 初期状態は透明に */
    overflow: hidden;
    /* ★ はみ出たコンテンツを隠す */
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    /* ★ アニメーション設定 */
    padding: 0 20px;
    /* 左右のパディングは維持 */
}

.faq-block.active .questions-container {
    max-height: 500px;
    /* ★ 開いたときの最大高さを十分に設定 (コンテンツ量に応じて調整) */
    opacity: 1;
    /* ★ 表示 */
    padding: 20px;
    /* ★ 開いたときの上下パディングを追加 */
}

.question-container {
    font-size: 1.05rem;
    text-align: left;
}

.question-container:not(:last-child) {
    border-bottom: #bbb solid 1px;
    margin-bottom: 30px;
    /* セクション間の余白 */
    padding-bottom: 30px;
}

.question-container .question {
    position: relative;
    padding-left: 1.5em;
    /* Q.のスペース確保 */
    margin-bottom: 0.5rem;
    font-weight: bold;
}

/* 質問にQ.をつける */
.question-container .question::before {
    content: "Q.";
    position: absolute;
    top: -1px;
    left: -1px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    /* 質問の色 */
}

.question-container .answer {
    position: relative;
    padding-left: 1.5em;
    /* A.のスペース確保 */
}

/* 回答にA.をつける */
.question-container .answer::before {
    content: "A.";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #555;
    /* 回答の色 */
}

/* --- お問い合わせ --- */
.contact-container {
    max-width: 800px;
    /* フォームは少し幅を狭める */
}

.contact-form {
    margin-top: 40px;
}

.form-group {
    margin-bottom: 25px;
}

.form-group-label {
    display: block;
    margin-bottom: 8px;
    font-family: "Noto Serif JP", serif;
    font-size: 1rem;
    font-weight: 700;
    color: #111;
}

.form-group-input,
.form-group-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 0;
    /* 角丸なし */
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group-input:focus,
.form-group-textarea:focus {
    outline: none;
    border-color: #555;
    /* フォーカス時に枠線を濃く */
}

.form-group-textarea {
    resize: vertical;
    /* 縦方向のみリサイズ可 */
}

.contact-submit-area {
    text-align: center;
    margin-top: 40px;
}

.contact-submit {
    min-width: 200px;
    padding: 15px 30px;
    font-size: 1rem;
}

/* --- フッター --- */
.footer {
    background-color: #222;
    /* フッター背景 (黒) */
    color: #ccc;
    /* フッター文字色 (薄いグレー) */
    padding: 60px 0 30px;
    font-size: 0.875rem;
}

.footer-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

.footer-logo {
    font-size: 1.5rem;
    font-family: "Noto Serif JP", serif;
    margin-bottom: 30px;
    color: #fff;
}

.footer-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* モバイルで折り返し */
    gap: 15px 30px;
    /* 縦横の隙間 */
    margin-bottom: 30px;
}

.footer-link {
    color: #ccc;
}

.footer-link:hover {
    color: #fff;
    opacity: 1;
}

.footer-copyright {
    font-size: 0.8rem;
    color: #888;
}
.sns-icon {
    color: white;
    font-size: 1.7rem;
    width: 1.7rem;
}

/* white-detail */

.first-cell {
    border-top: none !important;
    border-left: none !important;
}

.table-header-row {
    border-bottom: #555 solid 2px;
}

.size-cell {
    background: #eee !important;
    color: #333 !important;
}

/* 見本に色をつける */
.sample-cells {
    background-color: #dfdfdf !important;
}

/* 通常ロットに色を付ける */
.normal-cells {
    background-color: #cfcfcf !important;
}

/* 特大ロットに色を付ける */
.large-cells {
    background-color: #bfbfbf !important;
}

.align-center th {
    text-align: center !important;
    color: #333 !important;
    font-weight: 700 !important;
}

/* テーブル左上の斜線ヘッダーセル */
.diagonal-header-cell {
    position: relative;
    /* 子要素の絶対配置の基準 */
    padding: 0;
    /* テキスト位置を制御しやすくするため、元のpaddingを一旦リセット */
    line-height: 1.2;
    /* 必要に応じて調整 */
    vertical-align: middle;
    /* セル内の垂直位置基準 */
    min-width: 100px;
    /* 最低幅確保（調整要） */
    min-height: 50px;
    /* 最低高さ確保（調整要）*/
}

/* テキスト共通スタイル */
.diagonal-text {
    position: absolute;
    display: block;
    font-size: 0.8em;
    /* テキストサイズを小さめに（調整要） */
    font-weight: normal;
    /* 通常の太さ */
    color: #555;
    /* テキストの色（調整要） */
    /* 必要に応じて transform: rotate() なども検討 */
}

/* 右上のテキスト「枚数」の位置調整 */
.diagonal-text--top-right {
    top: 8px;
    /* 上からの位置（微調整必須） */
    right: 8px;
    /* 右からの位置（微調整必須） */
}

/* 左下のテキスト「大きさ」の位置調整 */
.diagonal-text--bottom-left {
    bottom: 8px;
    /* 下からの位置（微調整必須） */
    left: 8px;
    /* 左からの位置（微調整必須） */
}

.point-container {
    text-align: left;
}

.point-container p {
    position: relative;
    /* ::before の絶対配置の基準点になります */
    padding-left: 1.5em;
    /* ※を表示するスペース + ※とテキスト間の隙間を確保 */
    margin-bottom: 0.8em;
    /* 段落間の余白 (適宜調整) */
    line-height: 1.6;
    /* 行の高さ (適宜調整) */
    /* text-indent は使いません */
}

.point-container p::before {
    content: "※";
    /* 表示する文字 */
    position: absolute;
    /* 絶対配置 */
    left: 0;
    /* 親要素(p)の左端(paddingの内側0px地点)に配置 */
    top: 0;
    /* 親要素(p)の上端に配置 (フォントやline-heightによっては微調整が必要な場合あり) */
    /* width: 1.2em; */
    /* 必要なら幅を指定して text-align も可能 */
    /* text-align: left; */
    /* この配置により、pタグのテキストはpadding-leftで指定した位置から開始される */
}

/* 赤文字のスタイル (HTMLのspanタグに対応) */
.point-container p span {
    color: red;
    font-weight: bold;
    /* 画像に合わせて太字に */
}

/* 印刷技法のページ 　スマホ版は列を1列に*/
.section-container {
    max-width: 1100px; /* コンテンツの最大幅 */
    margin: 40px auto; /* 上下のマージンと左右中央寄せ */
    padding: 0 20px; /* 左右の余白 */
}

.skill-list {
    display: grid; /* グリッドレイアウトを適用 */
    grid-template-columns: repeat(2, 1fr); /* 2つの列を均等な幅で作成 */
    gap: 30px; /* カード間の間隔 (縦横両方) */
}

.skill-card {
    background-color: #fff; /* カードの背景色 */
    border: 1px solid #eee; /* カードの境界線 */
    border-radius: 2px; /* カードの角を丸める */
    margin-bottom: 0;
    padding: 25px; /* カード内の余白 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* 控えめな影で見やすく */
    display: flex; /* 中の要素を制御しやすく */
    flex-direction: column; /* 画像とテキストを縦に並べる */
    transition: box-shadow 0.3s ease; /* ホバー時の変化を滑らかに */
}

/* 最後のカードの下マージンをリセット（グリッドレイアウトでは不要） */
.skill-list > .skill-card:last-child {
    margin-bottom: 0;
}

.skill-card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* ホバー時に影を少し濃く */
}

.print-img {
    margin-bottom: 20px; /* 画像とテキストの間隔 */
    text-align: center; /* 画像を中央に配置 */
}

.print-img img {
    max-width: 100%; /* 画像がコンテナからはみ出さないように */
    height: auto; /* 画像の縦横比を維持 */
    display: block; /* 画像下の余分なスペースを削除 */
    margin: 0 auto; /* text-align: center と合わせて中央寄せを確実にする */
    border-radius: 1px; /* 画像の角も少し丸める */
}

.print-text {
    text-align: left; /* テキストは左揃えを基本とする */
}

.skill-name {
    font-size: 1.25rem; /* スキル名（見出し）のサイズ */
    font-weight: 600; /* 少し太字に */
    color: #222; /* 見出しの色 */
    margin-top: 0; /* 上のデフォルトマージンを削除 */
    margin-bottom: 10px; /* 説明文との間隔 */
}

.skill-desc {
    font-size: 0.95rem; /* 説明文のサイズ */
    color: #555; /* 説明文の色 */
    line-height: 1.6; /* 行間を読みやすく */
    margin: 0; /* 下のデフォルトマージンを削除 */
}

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

/* タブレット向け (例: 992px以下) */
@media (max-width: 991.98px) {
    .section {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }

    .section-container,
    .hero-container,
    .header-container,
    .footer-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .header{
        padding: 10px 0;
    }
    /* ヘッダー: ナビを隠し、ハンバーガーボタン表示 */
    .header-nav {
        display: none;
        /* ここでナビを隠す (JSで表示切り替え) */
        /* 必要ならここにモバイル用ナビのスタイル */
    }

    .header-menu-button {
        position: relative;
        display: block;
    }

    .hero-container {
        grid-template-columns: 1fr;
        /* 縦積みに */
        text-align: center;
    }

    .hero-image {
        margin-top: 40px;
        order: -1;
        /* 画像を上に */
    }

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

    .company-container {
        grid-template-columns: 1fr;
        /* 縦積み */
    }

    .company-map {
        margin-top: 40px;
    }

    .philosophy-list {
        grid-template-columns: 1fr;
        /* 縦積み */
        gap: 40px;
    }

    .flow-list {
        flex-direction: column;
        /* 縦積み */
        border: none;
        padding: 0;
    }

    .flow-item {
        padding: 20px 0;
        border-bottom: 1px solid #eee;
    }

    .flow-item:not(:last-child)::after {
        display: none;
        /* 区切り線非表示 */
    }

    .flow-item:last-child {
        border-bottom: none;
    }
}

/* モバイル向け (例: 768px以下) */
@media (max-width: 767.98px) {
    .section {
        padding: 30px 0;
    }
    .header {
        height: auto;
        padding: 10px 0;
    }
    .header-container {
        height: 4vh;
    }
    .hero {
        height: 50vh;
    }
    .hero-container{
            padding: 30px 40px 0 40px;
    }

    .section-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .hero {
        padding: 80px 0;
    }

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

    .hero-description {
        font-size: 1rem;
    }

    .service-list {
        grid-template-columns: 1fr;
        /* 1列 */
        gap: 30px;
    }
    .achievements-list {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        /* 画面幅に応じて2列など */
        gap: 15px;
    }

    .footer-list {
        gap: 10px 20px;
    }

    .price-table-scroll-wrapper {
        overflow: hidden;
    }
    .price-table {
        padding: 30px 20px;
        width: 100%;
    }

    .price-table-title {
        font-size: 1.3rem;
    }

    .price-table-caption {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }

    .price-table th,
    .price-table td {
        padding: 12px 8px;
        font-size: 0.9rem;
    }

    .price-table-notes {
        font-size: 0.8rem;
    }

    .skill-list {
        display: contents;
    }
    .skill-card {
        margin-bottom: 10px;
    }

    .company-info {
        background-color: #fff;
    }
}

/* モバイル向け (例: 576px以下) */
@media (max-width: 575.98px) {
    body {
        font-size: 15px;
    }

    .section-container,
    .hero-container,
    .header-container,
    .footer-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .button {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    .section {
        width: 100%;
    }
    .section-description {
        font-size: 0.75rem;
    }
    .service-item {
        height: auto;
        max-height: 560px;
        margin: 0 10px;
    }
    .contact-submit {
        min-width: 150px;
        padding: 12px 20px;
    }

    .price-table-title{
        font-size:1rem;
    }
    .price-table-scroll-wrapper {
        margin-left: -20px;
        /* コンテナのpadding分、左にずらす */
        margin-right: -20px;
        padding-left: 20px;
        /* スクロール領域の左右に余白確保 */
        padding-right: 20px;
        overflow: scroll;
    }

    .price-table-scroll-wrapper > table {
        min-width: 782px;
    }
    .price-table {
        overflow: scroll;
    }

    .price-table th,
    .price-table td {
        font-size: 0.85rem;
        padding: 10px 5px;
    }

    .price-table-notes {
        font-size: 0.75rem;
    }
    .questions-container {
        overflow: scroll;
    }
}

@media (max-width: 400px) {
    p{
        font-size: 0.6rem;
    }
    .service-img {
        height: 180px;
    }
    .service-item.card{
        max-height: 450px;
    }
    .service-item-description{
        font-size: 0.6rem;
    }
    .price-table-title {
        font-size: 0.85rem;
    }
    .flow-description {
        font-size: 0.7rem;
    }
    .philosophy-item p {
        font-size: .75rem;
    }
}