body {
    margin: 0; padding: 0;
    background-color: #f5f5f0;
    color: #2d2d2d;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    position: relative;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
}

/* 背景のノイズテクスチャ */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 10;
}

/* --- Canvasの設定 (Cosmic Lines) --- */
#networkCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* * ==========================================
* 03. メインレイアウト (Main Layout)
* ==========================================
*/
main {
    position: relative;
    z-index: 1;
}

.header-spacer {
    width: 100%;
    height: 0px;
    display: block;
}

/* * ==========================================
* 04. TOPメイン画像セクション (Hero Section)
* ==========================================
*/
.hero-section {
    width: 100%;
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    background-color: transparent;
    position: relative;
}

.hero-image {
    max-width: 260px;
    max-height: 60svh;
    width: 65%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.8s ease-out forwards;
    animation-delay: 0.5s;
    margin-top: +3svh;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); filter: blur(5px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* * ==========================================
* 05. 読み物セクション (Content Section)
* ==========================================
*/
.content-section {
    max-width: 800px;
    margin: 9em 0 30px;
    padding: 0px 35px 0 40px;
    line-height: 25px;
    box-sizing: border-box;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-section p {
    width: 100%;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-bottom: 3em;
    text-align: left;
    font-family: "Hina Mincho", serif;
}

.content-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto 4em;
}

/* 画面端まで広げる画像 */
#fade-img-1 {
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -40px;
    margin-right: 0;
    border-radius: 0;
}

/* 右端にピッタリくっつける設定 */
#fade-img-2 {
    width: 98%;
    max-width: 500px;
    margin-right: -40px;
    margin-left: auto;
    border-radius: 0;
    display: block;
}

.foreword-image {
    max-width: 100px;
    width: 100%;
    height: auto;
    display: block;
    margin: 90px auto 7em;
    position: relative;
    z-index: 3;
}

/* 導入コピー（各セクション冒頭のリード文） */
.lead-copy {
    font-family: "Hina Mincho", serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: 0.02em;
    color: #2d2d2d;
    text-align: center;
    width: 100%;
    margin: 0 0 1em;
}

/* 想いテキスト（見出し） */
.omoi-text-typed {
    font-family: "Hina Mincho", serif;
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0em;
    line-height: 1.6;
    color: #2d2d2d;
    margin: 5em 0 20px;
    text-align: center;
    width: 100%;
}

/* 見出し内の強調文字（親のfont-sizeに連動してレスポンシブに拡大縮小） */
.omoi-emphasis {
    font-size: 1.1em;
}

/* スマホ幅では見出し内の改行を適用（タブレット以上で無効化） */
.omoi-text-typed br {
    display: inline;
}

/* 表示状態のクラス */
.concept-title.is-active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.fade-paragraph, .fade-image {
    opacity: 1;
}

/* 想いテキストに添える写真・図版の配置バリエーション */
.content-accent-image {
    margin: 0 0 3em;
}

#fade-img-hara-shacho {
    max-width: 240px;
}

#fade-img-haradukuri {
    max-width: 700px;
}

.content-image-center {
    max-width: 300px;
    margin: 0 auto 3em;
}

.img-overlap-top {
    max-width: 160px;
    margin: -330px 0 3rem 171px;
    align-self: center;
    position: relative;
    z-index: 1;
}

.img-overlap-top.fade-image {
    opacity: 0.65;
}

.align-left { align-self: flex-start; }
.align-right { align-self: flex-end; }

/* 画面（コンテンツ幅）の端にぴったりくっつける */
.bleed-left { align-self: flex-start; margin-left: -40px; }
.bleed-right { align-self: flex-end; margin-right: -40px; }

/* 画面幅いっぱいに広げる（親のmax-width/paddingを無視、ただしiPad Pro幅=1024pxを上限に） */
.full-bleed {
    width: 100vw;
    max-width: 1024px;
    position: relative;
    margin-left: 0;
    margin-right: 0;
}

/* 色反転 */
.img-invert.fade-image { filter: invert(1); }

/* リンク用ホワイトボックス */
.white-box {
    width: 100%;
    max-width: 500px;
    background-color: #ffffff;
    border: 1px solid #189bbc;
    border-radius: 15px;
    padding: 20px 20px;
    box-sizing: border-box;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s;
    overflow: hidden;
    margin-bottom: 0px;
    cursor: pointer;
    z-index: 10;
}

.white-box.is-visible { opacity: 1; transform: translateY(0); }
.white-box:active {
    background-color: #f0f8fa;
    opacity: 0.8;
}

.box-main-img {
    width: 60%;
    height: auto;
    display: block;
    margin: 5px 0 20px;
    z-index: 2;
}

.box-text {
    color: #189bbc;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    text-align: left;
    width: 65%;
    word-break: break-all;
    z-index: 2;
}

.box-side-img {
    position: absolute;
    right: 10px;
    bottom: 20px;
    width: 30%;
    height: auto;
    display: block;
    z-index: 1;
}

#link-box-trigger {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* * ==========================================
* 06. スクロール誘導表示
* ==========================================
*/
.scroll-guide {
    position: fixed; left: 15px; bottom: 45px; z-index: 9990; display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity 1s ease; pointer-events: none;
}
.scroll-guide.is-active { opacity: 1; }
.scroll-text { font-size: 10px; letter-spacing: 0.2em; color: rgb(195, 140, 100); writing-mode: vertical-rl; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }
.scroll-line { width: 1px; height: 50px; background: rgba(195, 140, 100, 0.2); position: relative; overflow: hidden; }
.scroll-line::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(195, 140, 100); animation: scrollLineAnim 2s cubic-bezier(0.76, 0, 0.3, 1) infinite; }
@keyframes scrollLineAnim { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.1% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* * ==========================================
* 07. 製品ストーリーへの導線ボタン
* ==========================================
*/
.story-cta-container {
    width: 100%;
    max-width: 800px;
    margin: 2em auto 3em;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.story-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 320px;
    padding: 18px 30px;
    box-sizing: border-box;
    font-family: "Hina Mincho", serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    border: 1px solid rgb(195, 140, 100);
    border-radius: 50px;
    background-color: rgb(195, 140, 100);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}

.story-cta-button:hover,
.story-cta-button:active {
    background-color: rgb(175, 122, 84);
    border-color: rgb(175, 122, 84);
}

/* * ==========================================
* 08. パンくずリスト
* ==========================================
*/
.breadcrumb-container {
    padding: 40px 20px 80px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}

.breadcrumbs {
    list-style: none; display: flex; padding: 0; margin: 0;
    align-items: center;
    font-size: 12px; letter-spacing: 0.05em;
    color: #189bbc;
}

.breadcrumbs li:last-child a {
    text-decoration: none;
    color: #a0cadf;
}

.breadcrumbs li:not(:last-child)::after { content: "/"; margin: 0 8px; color: #ccc; }

/* ============================================================
   PC・タブレット レイアウト（768px以上）
   ============================================================ */
@media (min-width: 768px) {

    body { max-width: none; box-shadow: none; margin: 0; }

    /* ヒーロー画像: 大きく */
    .hero-image {
        max-width: 380px;
    }

    /* 本文エリア: 中央揃え・余白拡大 */
    .content-section {
        max-width: 860px;
        margin: 9em auto 30px;
        padding: 0 60px;
    }

    .content-section p {
        font-size: 17px;
        line-height: 2;
    }

    /* 見出し: フォント拡大 */
    .omoi-text-typed {
        font-size: 26px;
        margin: 5em 0 25px;
    }

    /* タブレット以上では改行を無効化 */
    .omoi-text-typed br {
        display: none;
    }

    .lead-copy {
        font-size: 22px;
    }

    .bleed-left { margin-left: -60px; }
    .bleed-right { margin-right: -60px; }

    /* 左端まで広げる画像: 新しいpaddingに合わせる */
    #fade-img-1 {
        width: calc(100% + 60px);
        margin-left: 0px;
    }

    /* 右端にピッタリくっつける設定: 新しいpaddingに合わせる */
    #fade-img-2 {
        margin-right: auto;
        margin-left: auto;
        max-width: 580px;
    }

    /* 製造方針タイトル装飾画像 */
    .foreword-image {
        max-width: 130px;
    }

    /* foreword-imageの拡大に合わせて重なり量も比例させ、縦の見切れを防ぐ */
    .img-overlap-top {
        margin-top: -404px;
    }

    /* リンクボックス: 少し大きく */
    .white-box {
        max-width: 600px;
    }

    .box-text {
        font-size: 14px;
    }

    /* 製品ストーリーへの導線ボタン */
    .story-cta-container {
        max-width: 960px;
        padding: 0 30px;
        margin-top: 3em;
    }

    .story-cta-button {
        padding: 20px 34px;
    }

    /* パンくず */
    .breadcrumb-container {
        max-width: 960px;
        padding: 40px 30px 80px;
    }
    .breadcrumbs { font-size: 12px; }

    .img-overlap-top {
        max-width: 218px;
        margin: -387px 0 3rem 220px;
    }
}

/* ============================================================
   PC ワイドレイアウト（1024px以上）
   ============================================================ */
@media (min-width: 1024px) {

    .hero-image {
        max-width: 440px;
    }

    .content-section {
        max-width: 960px;
        padding: 0 100px;
    }

    .omoi-text-typed {
        font-size: 28px;
    }

    .lead-copy {
        font-size: 24px;
    }

    .bleed-left { margin-left: -100px; }
    .bleed-right { margin-right: -100px; }

    #fade-img-1 {
        width: calc(100% + 100px);
        margin-left: 0px;
    }

    #fade-img-2 {
        max-width: 620px;
    }

    .foreword-image {
        max-width: 115px;
    }

    .white-box {
        max-width: 680px;
    }

    .story-cta-container {
        max-width: 1060px;
        padding: 0 50px;
    }

    .breadcrumb-container {
        max-width: 1060px;
        padding: 40px 50px 80px;
    }

    .img-overlap-top {
        max-width: 185px;
        margin: -346px 0 3rem 180px;
    }
}