@charset "utf-8";

.h1.fs-c-heading--page {
	margin: 0;
}
.fs-l-main {
	padding: 0;
	
}
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme {
    :root,:host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {
    *,:after,:before,::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,: host {
        -webkit-text-size-adjust:100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings,normal);
        font-variation-settings: var(--default-font-variation-settings,normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr: where([title]) {
        -webkit-text-decoration:underline dotted;
        text-decoration: underline dotted
    }

    h1,h2,h3,h4,h5,h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b,strong {
        font-weight: bolder
    }

    code,kbd,samp,pre {
        font-family: var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings,normal);
        font-variation-settings: var(--default-mono-font-variation-settings,normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,ul,menu {
        list-style: none
    }

    img,svg,video,canvas,audio,iframe,embed,object {
        vertical-align: middle;
        display: block
    }

    img,video {
        max-width: 100%;
        height: auto
    }

    button,input,select,optgroup,textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select: is([multiple],[size])) optgroup {
        font-weight:bolder
    }

    :where(select: is([multiple],[size])) optgroup option {
        padding-inline-start:20px
    }

    ::file-selector-button {
        margin-inline-end:4px}

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color:currentColor
        }

        @supports (color: color-mix(in lab, red, red)) {
            ::placeholder {
                color:color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block:0}

    ::-webkit-datetime-edit-year-field {
        padding-block:0}

    ::-webkit-datetime-edit-month-field {
        padding-block:0}

    ::-webkit-datetime-edit-day-field {
        padding-block:0}

    ::-webkit-datetime-edit-hour-field {
        padding-block:0}

    ::-webkit-datetime-edit-minute-field {
        padding-block:0}

    ::-webkit-datetime-edit-second-field {
        padding-block:0}

    ::-webkit-datetime-edit-millisecond-field {
        padding-block:0}

    ::-webkit-datetime-edit-meridiem-field {
        padding-block:0}

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,input: where([type=button],[type=reset],[type=submit]) {
        appearance:button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]: where(:not([hidden=until-found])) {
        display:none!important
    }
}

@layer components;@layer utilities {
    .relative {
        position: relative
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .table {
        display: table
    }
}

:root {
    --black: #080806;
    --ink: #11110f;
    --cream: #eee9df;
    --muted: #9b978e;
    --gold: #b79a5b;
    --line: #eee9df2e
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--black);
    color: var(--cream);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    font-family: Yu Mincho,Hiragino Mincho ProN,Noto Serif JP,serif
}

a {
    color: inherit;
    text-decoration: none
}

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

.image-frame {
    background: #191713;
    overflow: hidden
}

/*.header {
    z-index: 10;
    border-bottom: 1px solid #ffffff1f;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 96px;
    padding: 0 4.5vw;
    font-family: Arial,Hiragino Kaku Gothic ProN,sans-serif;
    display: flex;
    position: absolute;
    top: 0;
    left: 0
}*/

.brand {
    letter-spacing: .2em;
    align-items: center;
    gap: 14px;
    font-size: 10px;
    display: flex
}

.brand-mark {
    border: 1px solid var(--gold);
    width: 44px;
    height: 44px;
    color: var(--gold);
    place-items: center;
    font: 24px/1 serif;
    display: grid;
    transform: rotate(45deg)
}

.brand-mark:first-letter {
    transform: rotate(-45deg)
}

nav {
    letter-spacing: .12em;
    align-items: center;
    gap: 32px;
    font-size: 12px;
    display: flex
}

.nav-shop {
    border: 1px solid var(--cream);
    padding: 13px 20px
}

.hero {
    background: radial-gradient(circle at 63% 42%,#b79a5b1a,#0000 24%),radial-gradient(circle at 48%,#1c1914 0,#0a0907 34%,#050504 70%);
    place-items: center;
    height: 100svh;
    min-height: 720px;
    display: grid;
    position: relative;
    overflow: hidden
}

.hero:before {
    content: "";
    opacity: .23;
    filter: grayscale(.55)contrast(1.25);
    clip-path: polygon(19% 0,100% 0,81% 100%,0 100%);
    background: url(https://nikunoiijima.co.jp/store/wp-content/uploads/2026/08/kiramekimain.png) 50%/cover;
    position: absolute;
    inset: 8% 14%
}

.hero:after {
    content: "";
    background: linear-gradient(90deg,#080806 0,#0000 35% 70%,#080806 100%),linear-gradient(#080806 0,#0000 25% 75%,#080806 100%);
    position: absolute;
    inset: 0
}

.hero-grain {
    z-index: 2;
    opacity: .18;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
    position: absolute;
    inset: 0
}

.hero-copy {
    z-index: 3;
    text-align: center;
    position: relative
}

.eyebrow {
    letter-spacing: .34em;
    text-transform: uppercase;
    font: 10px/1.4 Arial,sans-serif
}

.hero h1 {
    letter-spacing: .12em;
    margin: 28px 0 32px;
    font-size: clamp(42px,6.2vw,92px);
    font-weight: 400;
    line-height: 1.42
}

.hero h1 span {
    display: block
}

.hero-sign {
    color: var(--gold);
    grid-template-columns: auto auto;
    align-items: end;
    column-gap: 12px;
    display: inline-grid
}

.hero-sign span {
    letter-spacing: .3em;
    font-size: 12px
}

.hero-sign b {
    grid-row: span 2;
    font-size: 68px;
    font-weight: 400;
    line-height: .9
}

.hero-sign small {
    letter-spacing: .42em;
    font: 8px Arial
}

.hero-side {
    z-index: 3;
    writing-mode: vertical-rl;
    letter-spacing: .35em;
    color: #77736b;
    margin: 0;
    font: 9px Arial;
    position: absolute;
    top: 50%;
    right: 2.8vw
}

.scroll {
    z-index: 3;
    letter-spacing: .3em;
    color: var(--muted);
    font: 9px Arial;
    position: absolute;
    bottom: 42px;
    left: 4.5vw
}

.scroll:before {
    content: "";
    border-top: 1px solid var(--gold);
    vertical-align: middle;
    width: 52px;
    margin-right: 16px;
    display: inline-block
}

.section-no {
    letter-spacing: .25em;
    color: var(--muted);
    margin: 0;
    font: 10px Arial
}

.gold {
    color: var(--gold)
}

.intro {
    padding: 150px 7vw 170px;
    position: relative
}

.intro-heading {
    text-align: center;
    max-width: 1100px;
    margin: 55px auto 90px
}

.intro h2,.taste h2,.standards h2,.iijima h2,.gift h2 {
    letter-spacing: .08em;
    margin: 20px 0;
    font-size: clamp(36px,5vw,53px);
    font-weight: 400;
    line-height: 1.45;
}
.intro h2 {
    color:#000;
}

.intro-grid {
    grid-template-columns: 1.5fr .55fr;
    align-items: center;
    gap: 8vw;
    max-width: 1100px;
    margin: auto;
    display: grid
}

.intro-image {
    height: 660px
}

.vertical-copy {
    writing-mode: vertical-rl;
    justify-self: center;
    min-height: 500px
}

.vertical-copy p {
    letter-spacing: .12em;
    margin: 0 0 0 28px;
    font-size: 15px;
    line-height: 2.3;
    color: #000;
}

.taste {
    background: var(--cream);
    color: var(--ink);
    grid-template-columns: 58% 42%;
    display: grid
}

.taste-image {
    height: 780px
}

.taste-copy {
    align-self: center;
    padding: 120px 7vw 80px
}

.taste-copy h2 {
    font-size: clamp(36px,4.2vw,54px);
}

.taste-copy>p:last-child {
    letter-spacing: .05em;
    max-width: 520px;
    font-size: 15px;
    line-height: 2.25
}

.standards {
    background: #0d0d0b;
    grid-template-columns: .8fr 1.2fr;
    gap: 10vw;
    padding: 160px 7vw;
    display: grid
}

.standards-title {
    align-self: start;
    position: sticky;
    top: 80px
}

.standards-title>p:last-child {
    color: var(--muted);
    max-width: 430px;
    font-size: 14px;
    line-height: 2
}

.standard-list article {
    border-top: 1px solid var(--line);
    grid-template-columns: 80px 1fr;
    align-content: center;
    column-gap: 20px;
    min-height: 160px;
    display: grid
}

.standard-list article:last-child {
    border-bottom: 1px solid var(--line)
}

.standard-list span {
    color: var(--gold);
    letter-spacing: .2em;
    grid-row: span 2;
    font: 11px Arial
}

.standard-list h3 {
    letter-spacing: .07em;
    margin: 0 0 14px;
    font-size: 23px;
    font-weight: 400
}

.standard-list p {
    color: var(--muted);
    letter-spacing: .06em;
    margin: 0;
    font-size: 13px
}

.iijima {
    grid-template-columns: 1fr 1fr;
    min-height: 850px;
    display: grid
}

.iijima-image img {
    filter: saturate(.65)brightness(.75)
}

.iijima-copy {
    background: #181611;
    flex-direction: column;
    justify-content: center;
    padding: 140px 8vw;
    display: flex
}

.iijima-copy>p:not(.section-no):not(.eyebrow) {
    color: #b7b1a7;
    font-size: 14px;
    line-height: 2.25
}

.iijima-facts {
    border-top: 1px solid var(--line);
    grid-template-columns: repeat(3,1fr);
    margin-top: 50px;
    padding-top: 28px;
    display: grid
}

.iijima-facts div {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.iijima-facts b {
    color: var(--gold);
    letter-spacing: .08em;
    font: 16px Arial
}

.iijima-facts span {
    color: var(--muted);
    font-size: 10px
}

.gift {
    background: var(--cream);
    color: var(--ink);
    padding: 160px 7vw 110px
}

.gift-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 90px
}

.gift-heading>p:last-child {
    max-width: 520px;
    margin: 28px auto 0;
    font-size: 14px;
    line-height: 2
}

.product-grid {
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
    max-width: 1280px;
    margin: auto;
    display: grid
}

.product-image {
    background: #d5cec0;
    height: 410px;
    position: relative;
    overflow: hidden
}

.product-image img {
    transition: transform .7s
}

.product:hover .product-image img {
    transform: scale(1.025)
}

.product-image span {
    color: #fff;
    letter-spacing: .2em;
    font: 10px Arial;
    position: absolute;
    top: 18px;
    left: 18px
}

.product-note {
    color: #756c5e;
    margin: 24px 0 10px;
    font-size: 12px
}

.product h3 {
    letter-spacing: .04em;
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 400
}

.product>p:not(.product-note) {
    margin: 0;
    font-size: 12px
}

.product-bottom {
    border-top: 1px solid #b9b1a3;
    justify-content: space-between;
    align-items: center;
    margin-top: 26px;
    padding-top: 20px;
    display: flex
}

.product-bottom b {
    font: 400 20px Arial
}

.product-bottom small {
    font-size: 9px
}

.product-bottom a {
    letter-spacing: .08em;
    border-bottom: 1px solid;
    padding-bottom: 5px;
    font-size: 11px
}

.product-bottom a span {
    color: var(--gold)
}

.price-note {
    color: #827a6e;
    max-width: 1280px;
    margin: 30px auto 0;
    font-size: 10px
}

.closing {
    text-align: center;
    place-content: center;
    gap: 32px;
    min-height: 620px;
    display: grid;
    position: relative;
    overflow: hidden
}

.closing:before {
    content: "";
    background: radial-gradient(circle,#252016 0,#080806 68%);
    position: absolute;
    inset: 0
}

.closing>* {
    z-index: 1;
    position: relative
}

.closing>p {
    letter-spacing: .14em;
    font-size: clamp(30px,4vw,56px);
    line-height: 1.7
}

.closing-mark {
    color: var(--gold);
    justify-content: center;
    align-items: center;
    gap: 16px;
    display: flex
}

.closing-mark span {
    letter-spacing: .28em;
    font-size: 13px
}

.closing-mark b {
    font-size: 62px;
    font-weight: 400
}

.closing a {
    border: 1px solid var(--gold);
    letter-spacing: .12em;
    justify-content: space-between;
    justify-self: center;
    min-width: 300px;
    padding: 20px 28px;
    font-size: 13px;
    display: flex
}

footer {
    border-top: 1px solid var(--line);
    color: var(--muted);
    letter-spacing: .08em;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 70px 5vw 38px;
    font: 10px/1.8 Arial,sans-serif;
    display: grid
}

.footer-brand {
    color: var(--cream);
    flex-direction: column;
    display: flex
}

.footer-brand b {
    letter-spacing: .16em;
    font: 22px serif
}

.footer-brand span {
    letter-spacing: .3em;
    font-size: 8px
}

.copyright {
    border-top: 1px solid var(--line);
    grid-column: span 2;
    margin: 0;
    padding-top: 24px
}

@media (width<=900px) {
   /* .header {
        height: 74px;
        padding: 0 22px
    }*/

    .brand span:last-child,nav a:not(.nav-shop) {
        display: none
    }

    .brand-mark {
        width: 36px;
        height: 36px;
        font-size: 20px
    }

    .nav-shop {
        padding: 11px 15px
    }

    .hero {
        min-height: 650px
    }

    .hero:before {
        clip-path: none;
        opacity: .2;
        inset: 10% 0
    }

    .hero h1 {
        letter-spacing: .08em;
        font-size: 40px
    }

    .hero-sign b {
        font-size: 58px
    }

    .intro {
        padding: 100px 22px
    }

    .intro-heading {
        text-align: left;
        margin: 45px auto 55px
    }

    .intro-grid {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .intro-image {
        height: 58vh;
        min-height: 430px
    }

    .vertical-copy {
        writing-mode: horizontal-tb;
        min-height: 0
    }

    .vertical-copy p {
        margin: 0 0 18px;
        line-height: 2
    }

    .taste {
        grid-template-columns: 1fr
    }

    .taste-image {
        height: 58vh;
        min-height: 420px
    }

    .taste-copy {
        padding: 80px 24px
    }

    .standards {
        grid-template-columns: 1fr;
        gap: 55px;
        padding: 100px 24px
    }

    .standards-title {
        position: static
    }

    .standard-list article {
        grid-template-columns: 52px 1fr;
        min-height: 150px
    }

    .iijima {
        grid-template-columns: 1fr
    }

    .iijima-image {
        height: 58vh;
        min-height: 420px
    }

    .iijima-copy {
        padding: 90px 24px
    }

    .iijima-facts {
        gap: 12px
    }

    .iijima-facts b {
        font-size: 12px
    }

    .gift {
        padding: 100px 22px 80px
    }

    .gift-heading {
        text-align: left;
        margin-bottom: 60px
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 65px
    }

    .product-image {
        height: 65vw;
        min-height: 330px
    }

    .closing {
        min-height: 540px;
        padding: 50px 22px
    }

    .closing>p {
        font-size: 30px
    }

    footer {
        grid-template-columns: 1fr
    }

    .copyright {
        grid-column: auto
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .product-image img {
        transition: none
    }
}