/* ===== 色・フォント・線の変数 ===== */
:root {
    --color-bg: #fffdf8;
    --color-text: #3d3a35;
    --color-pink: #f2b8a2;
    --color-green: #a9c9a4;
    --color-yellow: #f3d27a;

    --font-hand: "Yomogi", cursive;
    --font-body: "Zen Maru Gothic", sans-serif;

    --radius-doodle: 255px 15px 225px 15px / 15px 225px 15px 255px;

    --header-height: 72px;
}

/* ===== ページ全体 ===== */
body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.8;
    /* 日本語を、言葉の切れ目で折り返す(「ハン/ドメイド」のような折り返しを防ぐ)。
       対応していないブラウザでは、ふつうの折り返しになるだけ */
    word-break: auto-phrase;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3 {
    font-family: var(--font-hand);
    font-weight: normal;
}

/* ページ内リンクで飛んだとき、見出しがヘッダーの下に隠れないようにする */
section {
    /* ヘッダーの高さ + 下線の2px */
    scroll-margin-top: calc(var(--header-height) + 2px);
}

/* ===== 共通の部品 ===== */

/* 手描き枠: 角の丸みを不ぞろいにして、わざと少しゆがませる */
.doodle {
    border: 2px solid var(--color-text);
    border-radius: var(--radius-doodle);
}

/* ゆらゆら: 上を支点に、左右に3度ずつ揺れる */
@keyframes sway {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}

.sway {
    display: inline-block;
    transform-origin: top center;
    animation: sway 3s ease-in-out infinite;
}

/* ふわふわ: 上に6px浮いて、もとに戻る */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.floaty {
    animation: floaty 3.5s ease-in-out infinite;
}

/* 同じ動きが並んだとき、少しずつずらして機械っぽさを消す */
.delay-1 { animation-delay: 0.6s; }
.delay-2 { animation-delay: 1.2s; }

/* 手描き枠のボタン(リンク用) */
.btn {
    display: inline-block;
    padding: 8px 22px;
    font-family: var(--font-hand);
    font-size: 18px;
    color: var(--color-text);
    text-decoration: none;
    background-color: var(--color-yellow);
    border: 2px solid var(--color-text);
    border-radius: var(--radius-doodle);
}

/* ボタンは、ふだんはまっすぐ(文字をくっきり見せる)。
   マウスをのせたときと、キーボードで選んだときだけ、ゆらゆらする */
.btn {
    transform-origin: top center;
}

/* まっすぐ(0度)から揺れ始めて、まっすぐに戻る動き。
   sway は -3度から始まるので、マウスをのせた瞬間にカクッと傾いてしまう */
@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-3deg); }
    75%      { transform: rotate(3deg); }
}

.btn:hover,
.btn:focus-visible {
    animation: wiggle 1.2s ease-in-out infinite;
}

/* ===== 提案用サンプルの表示 ===== */
.sample-badge {
    position: fixed;
    right: 8px;
    bottom: 8px;
    z-index: 100;
    margin: 0;
    padding: 2px 10px;
    font-size: 11px;
    color: #8a857c;
    background-color: rgba(255, 253, 248, 0.9);
    border: 1px solid #d8d3c8;
    border-radius: 999px;
}

/* ===== ヘッダー ===== */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    background-color: var(--color-bg);
    border-bottom: 2px solid var(--color-text);
}

/* ロゴの行の高さ = ヘッダーの高さ(メニューを開いても詰まらない) */
.logo {
    display: flex;
    align-items: center;
    height: var(--header-height);
}

.logo img {
    height: 48px;
    width: auto;
    /* 画像の白い背景を、下の生成り色になじませる */
    mix-blend-mode: multiply;
    /* 左側の背景がほんの少し灰色なので、明るくして白にそろえる */
    filter: brightness(1.02);
}

/* メニューボタン(スマホ用) */
.menu-btn {
    padding: 4px 14px;
    font-family: var(--font-hand);
    font-size: 16px;
    color: var(--color-text);
    background-color: var(--color-yellow);
    border: 2px solid var(--color-text);
    border-radius: var(--radius-doodle);
    cursor: pointer;
}

/* メニュー(スマホでは、ふだんは隠しておく) */
.site-nav {
    display: none;
    width: 100%;
}

/* ボタンを押して body に menu-open が付いたら見せる */
.menu-open .site-nav {
    display: block;
}

.site-nav ul {
    margin: 0;
    padding: 8px 0 16px;
    list-style: none;
}

.site-nav a {
    display: block;
    padding: 8px 4px;
    color: var(--color-text);
    text-decoration: none;
}

/* ===== 広いパソコンの幅(1200px以上): メニューを横一列に =====
   9項目が1行に入る幅になるまでは、スマホと同じメニューボタンを使う */
@media (min-width: 1200px) {
    .menu-btn {
        display: none;
    }

    .site-nav {
        display: block;
        width: auto;
    }

    .site-nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 4px 16px;
        padding: 8px 0;
    }

    .site-nav a {
        padding: 4px 0;
        font-size: 14px;
    }
}

/* ===== セクション共通 ===== */
.section {
    max-width: 960px;
    margin: 0 auto;
    padding: 56px 20px;
}

.section-title {
    margin: 0 0 24px;
    font-size: 28px;
    text-align: center;
    /* ピンクの波線を、手描きの下線のように引く */
    text-decoration: underline wavy var(--color-pink);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

/* 写真に手描き枠を付ける(はみ出した角は切り取る) */
.photo {
    overflow: hidden;
    border: 2px solid var(--color-text);
    border-radius: 24px 6px 20px 8px / 8px 20px 6px 24px;
}

.photo img {
    width: 100%;
}

/* 差し色の丸 */
.dots {
    display: flex;
    gap: 8px;
    margin: 0 0 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot-pink   { background-color: var(--color-pink); }
.dot-green  { background-color: var(--color-green); }
.dot-yellow { background-color: var(--color-yellow); }

/* ===== 最初の画面 ===== */
.hero {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px 16px;
}

.hero-title {
    margin: 0 0 12px;
    /* 画面幅の7.5%。ただし24px〜30pxの間におさめる(小さいスマホで「が、」が取り残されないように) */
    font-size: clamp(24px, 7.5vw, 30px);
    line-height: 1.5;
}

.hero-lead {
    margin: 0 0 24px;
}

/* 正方形の写真を横長(4:3)に切り抜いて見せる */
.hero-photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ===== カコクラについて ===== */
.numbers {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 32px 0;
    padding: 0;
    list-style: none;
}

.numbers li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
    padding: 16px 8px;
    background-color: #fff;
}

.numbers-label {
    font-size: 14px;
}

.numbers-value {
    font-family: var(--font-hand);
    font-size: 32px;
    line-height: 1.3;
}

.numbers-value small {
    font-size: 14px;
}

#about .photo {
    margin-top: 32px;
}

/* ===== ドリンクメニュー ===== */
.price-tag-wrap {
    text-align: center;
    margin: 24px 0 32px;
}

/* 値札: ピンクの手描き枠。ふだんはまっすぐで、マウスをのせたときだけ揺れる */
.price-tag {
    display: inline-block;
    transform-origin: top center;
    padding: 6px 24px;
    font-family: var(--font-hand);
    font-size: 20px;
    background-color: var(--color-pink);
    border: 2px solid var(--color-text);
    border-radius: var(--radius-doodle);
}

.price-tag:hover {
    animation: wiggle 1.2s ease-in-out infinite;
}

.price-tag strong {
    font-size: 32px;
    font-weight: normal;
}

/* スマホでは縦に1列 */
.drink-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.drink-item {
    margin: 0;
}


/* 箇条書きの点を、緑の丸にする */
.note-list {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.note-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
}

.note-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-green);
}

/* ===== ワークショップ ===== */
.workshop {
    display: grid;
    gap: 24px;
}

.workshop-menu {
    display: block;
    max-width: 420px;
    margin: 0 auto;
}

/* 説明文は、行の右端まで詰めて折り返す(スタッフ紹介と同じ) */
.workshop-text p {
    word-break: normal;
    line-break: strict;
}

.workshop-btn {
    margin: 28px 0 12px;
    text-align: center;
}

.small-note {
    font-size: 13px;
    text-align: center;
}

/* 強調: 太字にして、からし色のマーカーを文字の下半分に引く */
.marker {
    font-weight: 700;
    background: linear-gradient(transparent 55%, var(--color-yellow) 55%);
}

/* 途中で折り返したくない言葉に使う */
.nowrap {
    white-space: nowrap;
}
/* ボタンの色ちがい */
.btn-pink  { background-color: var(--color-pink); }
.btn-green { background-color: var(--color-green); }

/* ===== スタッフ紹介 ===== */
.staff-together {
    margin-bottom: 32px;
}

.staff-list {
    display: grid;
    gap: 32px;
}

.staff-card {
    padding: 20px;
    background-color: #fff;
}

/* 縦長の写真を正方形に切り抜く(顔が切れないよう、上を基準にする) */
.staff-card .photo img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 20%;
}

/* 紹介文は長いので、言葉の切れ目ではなく、行の右端まで詰めて折り返す
   (auto-phrase のままだと、行の右側にすき間が残る) */
.staff-card p {
    word-break: normal;
    /* 「ー」や小さい「ゃ・っ」などを、行の頭に置かない */
    line-break: strict;
}

.staff-role {
    margin: 16px 0 0;
    font-size: 14px;
}

/* スタッフ紹介の最後のひとこと */
.staff-message {
    margin: 32px 0 0;
    font-family: var(--font-hand);
    font-size: 20px;
    text-align: center;
}

.staff-name {
    margin: 0 0 8px;
    font-size: 26px;
}

/* ===== Instagram(見本) ===== */
.insta-account {
    margin: -8px 0 20px;
    text-align: center;
}

.insta-account a {
    color: var(--color-text);
    font-family: var(--font-hand);
    font-size: 18px;
}

/* 正方形の写真を3列に並べる(Instagram のプロフィールの並びと同じ) */
.insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.insta-grid a {
    display: block;
    overflow: hidden;
    border-radius: 6px;
}

.insta-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* マウスをのせると、写真が少し大きくなる */
.insta-grid a:hover img {
    transform: scale(1.05);
}

.insta-notice {
    margin: 20px 0 16px;
    padding: 10px 16px;
    font-size: 14px;
    text-align: center;
    background-color: #fbe3da;
    border: 2px dashed var(--color-pink);
    border-radius: 12px;
}

.insta-more {
    text-align: center;
}

/* ===== 店舗情報 ===== */
.shop-info {
    display: grid;
    grid-template-columns: 4em 1fr;
    gap: 12px 16px;
    max-width: 480px;
    margin: 0 auto 32px;
}

.shop-info dt {
    font-family: var(--font-hand);
    font-size: 18px;
}

.shop-info dd {
    margin: 0;
}

.shop-info a {
    color: var(--color-text);
}

.shop-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ボタンの幅をそろえる */
.shop-links li {
    width: 100%;
    max-width: 300px;
}

.shop-links .btn {
    display: block;
    text-align: center;
    font-size: 16px;
}

/* ===== フッター ===== */
footer {
    margin-top: 40px;
    padding: 32px 20px 56px;
    border-top: 2px solid var(--color-text);
    text-align: center;
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 20px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.footer-nav a {
    font-size: 14px;
    color: var(--color-text);
    text-decoration: none;
}

.copyright {
    margin: 0;
    font-size: 12px;
}

/* ===== パソコンの幅(768px以上): 各セクションを2列に ===== */
@media (min-width: 768px) {
    .staff-list {
        grid-template-columns: 1fr 1fr;
    }

    .insta-grid {
        gap: 12px;
    }

    /* 2人の写真は、横長に切り抜いて高さをおさえる(空を少し切る) */
    .staff-together img {
        aspect-ratio: 2 / 1;
        object-fit: cover;
        object-position: center 70%;
    }

    /* ボタンを2つずつ2段に並べる */
    .shop-links {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 640px;
        margin: 0 auto;
    }

    .shop-links li {
        max-width: 300px;
    }

    .drink-list {
        grid-template-columns: 1fr 1fr;
    }

    .workshop {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 40px;
    }

    .hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 40px;
        padding-top: 56px;
    }

    .hero-title {
        /* 2列のときは列の幅が半分になるので、画面幅に合わせて30px〜40pxで変える */
        font-size: clamp(30px, 3.6vw, 40px);
    }

    #about > p,
    #drink > p {
        text-align: center;
    }
}

/* ===================================================
   追加ページ(委託販売・カレンダー・プライバシーポリシー・お問い合わせ)
   =================================================== */

/* 今いるページのメニュー項目に、ピンクの下線を引く */
.site-nav a[aria-current="page"],
.footer-nav a[aria-current="page"] {
    text-decoration: underline wavy var(--color-pink);
    text-underline-offset: 6px;
}

/* 追加ページの見出しの下の余白 */
.page .section-title {
    margin-bottom: 32px;
}

/* 追加ページの文章は、行の右端まで詰めて折り返す */
.page p,
.page li {
    word-break: normal;
    line-break: strict;
}

.page a:not(.btn) {
    color: var(--color-text);
}

/* 小見出し(ページの中の区切り) */
.page h2 {
    margin: 48px 0 16px;
    padding-left: 12px;
    font-size: 22px;
    border-left: 6px solid var(--color-green);
}

.page h3 {
    margin: 28px 0 8px;
    font-size: 18px;
}

/* ===== プライバシーポリシー ===== */
.policy {
    max-width: 720px;
    margin: 0 auto;
}

.policy p {
    margin: 0 0 12px;
}

.policy .note-list {
    margin: 0 0 12px;
}

.policy-date {
    margin-top: 40px;
    text-align: right;
}

/* ===== お問い合わせ ===== */
.contact-form {
    max-width: 560px;
    margin: 0 auto;
}

.form-field {
    margin-bottom: 20px;
}

.form-field label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--font-hand);
    font-size: 18px;
}

.form-field small {
    font-family: var(--font-body);
    font-size: 13px;
}

.form-field input,
.form-field textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 16px; /* 16px より小さいと、iPhone で入力時に画面が拡大されてしまう */
    color: var(--color-text);
    background-color: #fff;
    border: 2px solid var(--color-text);
    border-radius: 10px 4px 12px 4px / 4px 12px 4px 10px;
}

.form-field textarea {
    min-height: 160px;
    resize: vertical;
}

/* 送れないことを知らせる、ピンクのお知らせ */
.form-notice {
    margin: 28px 0 16px;
    padding: 12px 16px;
    text-align: center;
    background-color: #fbe3da;
    border: 2px dashed var(--color-pink);
    border-radius: 12px;
}

.form-submit {
    text-align: center;
}

/* 押せないボタン */
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    animation: none;
}

/* ===== カコクラカレンダー ===== */
.calendar {
    max-width: 760px;
    margin: 0 auto;
}

.cal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* 月の表示。ページの小見出し(.page h2)の飾りは付けない */
.page .cal-title {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--font-hand);
    font-size: 20px;
    font-weight: normal;
    white-space: nowrap;
}

.cal-nav {
    padding: 4px 10px;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.cal-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    background-color: #fff;
}

.cal-table th,
.cal-table td {
    border: 1px solid #d8d3c8;
    text-align: center;
}

.cal-table th {
    padding: 6px 0;
    font-family: var(--font-hand);
    font-weight: normal;
    background-color: var(--color-bg);
}

.cal-table td {
    height: 56px;
    padding: 4px 2px;
    vertical-align: top;
    font-size: 14px;
}

.cal-sat { color: #5f8f5a; }
.cal-sun { color: #c9715a; }

/* 前の月・次の月の日付は、うすく */
.cal-table td.is-other {
    color: #c4beb3;
}

/* 今日: からし色の丸 */
.cal-day {
    display: inline-block;
    min-width: 26px;
    line-height: 26px;
    border-radius: 50%;
}

.is-today .cal-day {
    background-color: var(--color-yellow);
    font-weight: 700;
}

/* 予定のある日: ピンクの点(スマホ)/ 予定の名前(パソコン) */
.cal-event-dot {
    display: block;
    width: 8px;
    height: 8px;
    margin: 2px auto 0;
    border-radius: 50%;
    background-color: var(--color-pink);
}

.cal-event-name {
    display: none;
}

/* 表の下の、その月の予定の一覧 */
.cal-list {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.cal-list li {
    padding: 10px 4px;
    border-bottom: 1px dashed #d8d3c8;
}

.cal-list-date {
    display: inline-block;
    min-width: 5.5em;
    font-family: var(--font-hand);
    font-size: 18px;
}

.cal-empty {
    margin: 24px 0 0;
    text-align: center;
}

.cal-info {
    margin-top: 40px;
    text-align: center;
}

/* ===== 委託販売希望の作家様へ ===== */
.itaku-gallery {
    display: grid;
    gap: 20px;
    margin-top: 24px;
}

.itaku-gallery a {
    display: block;
}

.itaku-buttons {
    margin: 24px 0;
    text-align: center;
}

.itaku-design {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.itaku-design li {
    margin-bottom: 12px;
    padding: 12px 16px;
    background-color: #fff;
    border: 2px solid var(--color-text);
    border-radius: 14px 4px 16px 4px / 4px 16px 4px 14px;
}

.itaku-design strong {
    display: block;
    font-family: var(--font-hand);
    font-size: 18px;
    font-weight: normal;
}

/* ===== 必要書類 ===== */
.doc-list {
    max-width: 560px;
    margin: 0 auto 32px;
    padding: 0;
    list-style: none;
}

/* 書類の名前と、ダウンロードボタンを横に並べる */
.doc-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 16px 20px;
    background-color: #fff;
    border: 2px solid var(--color-text);
    border-radius: 14px 4px 16px 4px / 4px 16px 4px 14px;
}

.doc-name {
    font-family: var(--font-hand);
    font-size: 18px;
}

.doc-item .btn {
    padding: 4px 18px;
    font-size: 15px;
}

@media (min-width: 768px) {
    .page .cal-title {
        font-size: 26px;
    }

    .cal-nav {
        padding: 4px 16px;
        font-size: 15px;
    }

    .cal-table td {
        height: 84px;
        font-size: 15px;
    }

    .cal-event-dot {
        display: none;
    }

    .cal-event-name {
        display: block;
        margin-top: 2px;
        padding: 1px 2px;
        font-size: 12px;
        line-height: 1.4;
        text-align: left;
        background-color: #fbe3da;
        border-radius: 4px;
    }

    .itaku-gallery {
        grid-template-columns: 1fr 1fr;
    }

    /* 魅力の箇条書きを2列に */
    .charm-list {
        columns: 2;
        column-gap: 32px;
    }

    .charm-list li {
        break-inside: avoid;
    }
}

/* ===== スクロールで、ふわっと出てくる =====
   JavaScriptが動くとき(html に js クラスがあるとき)だけ、最初は隠しておく */
.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 画面に入って is-visible が付いたら、もとの位置に戻って見える */
.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ===== 動きを減らす設定の端末では、動きを全部止める =====
   (このかたまりは、いつもファイルのいちばん最後に置く) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    /* スクロールで出てくる部品も、最初から見せておく */
    .js .reveal {
        opacity: 1;
        transform: none;
    }
}