@charset "UTF-8";
/* ============================================================
   tocotoCoffee カスタマイズCSS
   たたき台デザイン(1034px) を 1280px 実装に ×1.24 換算。
   色はPNGピクセルサンプリング、余白は座標差分から算出。
   ============================================================ */
/* PSD全テキストレイヤー = YuMincho (ロゴ/コピーライト: Light, 他: Demibold)。
   游明朝非搭載環境向けフォールバックとして Shippori Mincho を読み込む */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600&display=swap');

:root {
    --tc-bg: #dddbda;
    --tc-brown-header: #3a1f11;
    --tc-brown-hero: #312012;
    --tc-brown-text: #2b1810;
    --tc-brown-body: #3b2c20;
    --tc-btn-light: #886244;
    --tc-btn-dark: #3e2515;
    --tc-panel: #d4cac0;
    --tc-dot: #8f847c;
    --tc-dot-active: #392315;
    --tc-font-serif: '游明朝', 'Yu Mincho', YuMincho, 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
    --tc-font-en: '游明朝', 'Yu Mincho', YuMincho, 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
}

body {
    background: var(--tc-bg);
    font-family: var(--tc-font-serif);
    /* PSD: 本文含む全テキストが YuMincho-Demibold (tracking 75 = 0.075em) */
    font-weight: 600;
    letter-spacing: 0.075em;
    color: var(--tc-brown-text);
}
.ec-layoutRole {
    background: var(--tc-bg);
}

/* ------------------------------------------------------------
   ヘッダーバー（検索・会員ナビ・カート） 高さ64px
   バー背景は全幅、内容はヒーローと同じ1070px内に収める
   ------------------------------------------------------------ */
.ec-layoutRole__header {
    background: transparent;
}
.ec-headerNaviRole {
    background: var(--tc-brown-header);
    max-width: none;
    margin: 0;
    min-height: 62px; /* デザイン実測50px×1.24 */
    padding: 8px max(3%, calc((100% - 1095px) / 2));
    align-items: center;
}
/* SP用ドロワーボタンはPCでは非表示 */
.ec-headerNaviRole .ec-headerRole__navSP {
    display: none;
}
/* 検索一式は左端から160pxオフセット（デザイン座標差より）・1行に固定 */
.ec-headerNaviRole .ec-headerNaviRole__search {
    margin-left: 160px;
}
.ec-headerNaviRole .ec-headerSearch .searchform {
    display: flex;
    align-items: center;
}
.ec-headerNaviRole .ec-headerSearch__category,
.ec-headerNaviRole .ec-headerSearch__keyword {
    float: none;
    margin: 0;
    width: auto;
}
.ec-headerNaviRole .ec-headerSearch .ec-select,
.ec-headerNaviRole .ec-headerSearch .ec-input {
    margin: 0;
}
/* デフォルトの黒背景・丸角ラッパー装飾を白ボックスに置換 */
.ec-headerNaviRole .ec-headerSearch .ec-select.ec-select_search {
    background: #fefefd;
    border-radius: 2px;
    width: 110px; /* デザイン実測89px×1.24 */
    margin-right: 6px;
    overflow: hidden;
}
.ec-headerNaviRole .ec-headerSearch .ec-select.ec-select_search::before {
    border-top-color: var(--tc-brown-header);
}
.ec-headerNaviRole .ec-headerSearch__keywordBtn .ec-icon img {
    width: 16px;
    height: 16px;
}
.ec-headerNaviRole .ec-headerSearch__category .ec-select select {
    background: #fefefd;
    color: var(--tc-brown-text);
    border: none;
    border-radius: 2px;
    font-family: var(--tc-font-serif);
    font-size: 13px;
    height: 36px; /* デザイン実測29px×1.24 */
    width: 100%;
    max-width: none;
    padding: 0 22px 0 10px;
}
.ec-headerNaviRole .ec-headerSearch__keyword {
    background: #fefefd;
    border: none;
    border-radius: 2px;
    width: 174px; /* デザイン実測140px×1.24 */
}
.ec-headerNaviRole .ec-headerSearch__keyword input[type="search"] {
    height: 36px;
    width: 100%;
    padding-right: 36px;
    font-size: 13px;
    font-family: var(--tc-font-serif);
}
.ec-headerNaviRole .ec-headerSearch .ec-headerSearch__keywordBtn {
    color: var(--tc-brown-header);
    font-size: 16px;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
}
.ec-headerNaviRole .ec-headerNav .ec-headerNav__item,
.ec-headerNaviRole .ec-headerNav .ec-headerNav__itemLink,
.ec-headerNaviRole .ec-headerNav a,
.ec-headerNaviRole .ec-headerNav .ec-headerNav__itemIcon {
    color: #fff;
    font-size: 14px; /* デザイン実測: アイコン+6文字で110px幅 → 14px相当 */
}
.ec-headerNaviRole .ec-cartNavi {
    background: transparent;
    color: #fff;
}
.ec-headerNaviRole .ec-cartNavi .ec-cartNavi__icon,
.ec-headerNaviRole .ec-cartNavi .ec-cartNavi__price {
    color: #fff;
}
.ec-headerNaviRole .ec-cartNavi .ec-cartNavi__badge {
    background: var(--tc-btn-light);
}

/* ------------------------------------------------------------
   ロゴ（バー下28px・フォント42px）
   ------------------------------------------------------------ */
.tc-headerLogo {
    padding: 20px 0 0; /* バー下端62→ロゴインク上端84の座標差分より */
}
.tc-headerLogo .ec-headerTitle .tc-logo {
    margin: 0;
    text-align: center;
    line-height: 1; /* 行ボックスの余白を排除して座標を合わせる */
}
.tc-logo a {
    font-family: var(--tc-font-en);
    /* PSDはヘッダー/フッター同サイズだが、デザインPNGはヘッダー側が小さい。PNG実測230px幅×1.24より47px */
    font-size: 47px;
    font-weight: 300; /* YuMincho-Light */
    letter-spacing: 0.075em;
    color: var(--tc-brown-text);
    text-decoration: none;
}
.tc-logo a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* ------------------------------------------------------------
   グローバルナビ（ロゴ下22px・ヒーロー上28px）
   ------------------------------------------------------------ */
.tc-gnav {
    margin-top: -7px; /* ロゴ行ボックス下の余白を相殺(ナビインク座標146に合わせる) */
    padding: 0 0 13px;
}
.tc-gnav__list {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.15;
}
.tc-gnav__item {
    position: relative;
    padding: 0 36px;
}
.tc-gnav__item + .tc-gnav__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: #9b8f82;
}
.tc-gnav__item a {
    font-family: var(--tc-font-serif);
    font-size: 16px; /* PSD 16px(1x) = PNG実測12.6×1.24 */
    letter-spacing: 0.075em;
    color: var(--tc-brown-text);
    text-decoration: none;
}
.tc-gnav__item a:hover {
    opacity: 0.7;
}

/* ------------------------------------------------------------
   共通パーツ
   ------------------------------------------------------------ */
.tc-btn {
    display: inline-block;
    min-width: 130px;
    padding: 9px 20px;
    background: var(--tc-btn-light);
    color: #fff;
    font-family: var(--tc-font-serif);
    font-size: 14px; /* PNG実測11×1.24 */
    letter-spacing: 0.075em;
    text-align: center;
    text-decoration: none;
    transition: opacity 0.2s;
}
.tc-btn:hover {
    color: #fff;
    opacity: 0.8;
    text-decoration: none;
}
.tc-btn--dark {
    background: var(--tc-btn-dark);
    min-width: 200px;
}
.tc-btn--small {
    min-width: 76px;
    padding: 7px 14px;
}
/* moreボタンをNEW ITEM・新着商品と同一中心線(c=246.5)に揃える */
.tc-newItem__side .tc-btn--small {
    margin-left: 17px;
}
.tc-secLabel {
    font-family: var(--tc-font-en);
    font-size: 14px; /* PNG実測11.1×1.24 */
    letter-spacing: 0.075em;
    color: var(--tc-brown-body);
    margin: 0 0 12px; /* ラベル→見出しインク間21pxの座標差分より */
}

/* ------------------------------------------------------------
   メインビジュアル 幅1070px・高さ392px
   ------------------------------------------------------------ */
.ec-layoutRole__mainBottom {
    padding: 0;
}
.tc-mainVisual {
    max-width: 1095px; /* デザイン実測883px×1.24 */
    margin: 0 auto;
    padding: 0;
}
/* 見出し・本文は固定。スライド（フェード切替）するのは背景画像レイヤーだけ */
.tc-mainVisual__inner {
    position: relative;
    display: flex;
    background: var(--tc-brown-hero);
    overflow: hidden;
    height: 392px;
}
.tc-mainVisual__slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 55%; /* 旧レイアウトの画像領域（100% - テキスト50% + 重なり5%）と同じ */
}
.tc-mainVisual__slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.tc-mainVisual__slide.is-active {
    opacity: 1;
}
.tc-mainVisual__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tc-mainVisual__text {
    flex: 0 0 50%; /* コンテナ実幅1006px×50%-左padding74px > キャッチ32px×12文字(413px) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 0 40px 79px; /* キャッチ左インク位置172-ヒーロー左端93 */
    color: #fff;
    background: linear-gradient(90deg, var(--tc-brown-hero) 82%, rgba(49, 32, 18, 0));
    position: relative;
    z-index: 1;
}
.tc-mainVisual__catch {
    font-size: 32px; /* PSD 32.5px(1x) = PNG実測25.7×1.24 */
    font-weight: 600;
    line-height: 1.85; /* PSD leading 60/32.5 */
    letter-spacing: 0.075em;
    margin: 0 0 24px;
}
.tc-mainVisual__lead {
    font-size: 15px; /* PNG実測11.5×1.24 */
    line-height: 1.55; /* PSD leading 24/16 */
    letter-spacing: 0.075em;
    margin: 0 0 30px; /* 本文4行化に合わせて余白を詰めた（旧 32px / 40px） */
}
.tc-mainVisual__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0 0;
}
.tc-mainVisual__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--tc-dot);
    cursor: pointer;
}
.tc-mainVisual__dot.is-active {
    background: var(--tc-dot-active);
}

/* ------------------------------------------------------------
   コンセプト 内容幅940px（テキスト38.5% / 画像56%）
   ------------------------------------------------------------ */
.tc-concept {
    max-width: 988px;
    margin: 0 auto;
    padding: 35px 24px 40px; /* サブ画像とRECOMMENDパネルの間に明確な余白を確保 */
}
.tc-concept__inner {
    display: flex;
    justify-content: space-between;
    gap: 3%;
}
.tc-concept__text {
    flex: 0 0 40.5%; /* 見出し27px×13文字(377px)が1行で収まる幅 */
    padding-top: 20px;
}
.tc-concept__title {
    font-family: var(--tc-font-serif);
    font-size: 27px; /* PNG実測21.5×1.24 */
    font-weight: 600;
    letter-spacing: 0.075em;
    margin: 0 0 12px; /* 見出し→本文インク間26pxの座標差分より */
}
.tc-concept__body {
    font-size: 13px; /* PNG実測10.4×1.24 */
    line-height: 2.15; /* PNG行ピッチ22.75px実測より */
    letter-spacing: 0.075em;
    color: var(--tc-brown-body);
    margin: 0 0 36px; /* 本文最終行→ボタン上端44pxの座標差分より */
}
.tc-concept__images {
    flex: 0 0 56%;
    position: relative;
    min-height: 402px;
}
.tc-concept__imgMain {
    position: absolute;
    top: -10px; /* デザイン: メイン画像上端はラベルインクより10px上 */
    right: 0;
    width: 82%; /* デザイン実測432px/526px */
    height: auto;
}
.tc-concept__imgSub {
    position: absolute;
    top: 195px; /* 下端がRECOMMENDパネル上端に接する位置(めり込み防止) */
    left: 0;
    width: 65.5%; /* デザイン実測345px/526px */
    height: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ------------------------------------------------------------
   おすすめ商品 パネル幅940px
   ------------------------------------------------------------ */
.tc-recommend {
    max-width: 988px;
    margin: 0 auto;
    padding: 0 24px;
}
.tc-recommend__inner {
    background: var(--tc-panel);
    padding: 16px 22px 26px;
}
.tc-recommend__heading {
    margin-bottom: 10px; /* 見出しインク下端→画像上端13pxの座標差分より */
}
.tc-recommend__en {
    font-family: var(--tc-font-en);
    font-size: 16px; /* PSD 16px(1x) */
    letter-spacing: 0.075em;
}
.tc-recommend__sep {
    margin: 0 10px;
    color: #8d8074;
}
.tc-recommend__ja {
    font-size: 16px; /* PSDでは英字と同サイズ16px */
    letter-spacing: 0.075em;
}
.tc-recommend__list {
    display: flex;
    gap: 33px;
}
.tc-recommend__item {
    flex: 1 1 50%;
    color: var(--tc-brown-text);
    text-decoration: none;
}
.tc-recommend__item:hover {
    opacity: 0.8;
    text-decoration: none;
    color: var(--tc-brown-text);
}
.tc-recommend__image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 345 / 134;
    object-fit: cover;
}
.tc-recommend__name {
    font-size: 14px; /* PNG実測11×1.24 */
    letter-spacing: 0.075em;
    margin: 14px 0 0;
}

/* ------------------------------------------------------------
   新着商品 側ラベル22% + 3列グリッド
   ------------------------------------------------------------ */
.tc-newItem {
    max-width: 988px;
    margin: 0 auto;
    /* デザインPNGでは価格→フッター間が4pxしかないがコラージュ起因の異常値と判断し、
       他セクション間(75〜87px)と同じリズムに正規化 */
    padding: 32px 24px 64px;
}
.tc-newItem__inner {
    display: flex;
    gap: 5%;
}
.tc-newItem__side {
    flex: 0 0 22%;
    padding: 40px 0 0 22px; /* デザインのNEW ITEMインクは本文左端+22px */
}
.tc-newItem__en {
    font-family: var(--tc-font-en);
    font-size: 18px; /* PNG実測14.3×1.24 */
    letter-spacing: 0.075em;
    margin: 0 0 10px;
}
.tc-newItem__ja {
    font-size: 12px; /* PSD 14px(1x)、PNG実測では10×1.24=12 */
    letter-spacing: 0.075em;
    margin: 0 0 16px; /* 新着商品→moreボタン間21pxの座標差分より */
    padding-left: 30px;
}
.tc-newItem__grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 45px; /* 行間: 価格下端→次段画像上端29pxの座標差分より */
}
.tc-newItem__item {
    color: var(--tc-brown-text);
    text-decoration: none;
}
.tc-newItem__item:hover {
    opacity: 0.8;
    text-decoration: none;
    color: var(--tc-brown-text);
}
.tc-newItem__thumb {
    position: relative;
}
.tc-newItem__bag {
    width: 53%; /* デザイン実測105px/列幅199px */
    height: auto;
    display: block;
}
.tc-newItem__beans {
    position: absolute;
    right: 0;
    bottom: 6%;
    width: 37%;
    border-radius: 50%;
}
.tc-newItem__name {
    font-size: 12px;
    letter-spacing: 0.075em;
    margin: 8px 0 4px; /* 画像下端→商品名インク間11pxの座標差分より */
}
.tc-newItem__price {
    font-size: 12px;
    letter-spacing: 0.075em;
    margin: 0;
}

/* ------------------------------------------------------------
   フッター（濃ブラウン帯 #3C2416・白文字・帯高さ約120px）
   ------------------------------------------------------------ */
.ec-footerRole {
    background: #3c2416;
    border-top: none;
    margin-top: 0;
    padding: 22px 0 8px;
}
.ec-footerRole .ec-footerNavi {
    padding-top: 0;
}
.ec-footerRole .ec-footerNavi .ec-footerNavi__link a {
    color: #fff;
    font-family: var(--tc-font-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.075em;
    text-decoration: underline;
}
.ec-footerRole .ec-footerNavi .ec-footerNavi__link a:hover {
    color: #fff;
    opacity: 0.7;
}
.ec-footerRole .ec-footerTitle {
    padding: 0;
}
.ec-footerRole .ec-footerTitle .ec-footerTitle__logo {
    line-height: 1.2; /* フッター帯高さ119pxの座標差分より詰める */
}
.ec-footerRole .ec-footerTitle .ec-footerTitle__logo a {
    font-family: var(--tc-font-en);
    font-size: 41px; /* PNG実測202px幅×1.24より */
    font-weight: 300; /* YuMincho-Light */
    letter-spacing: 0.075em;
    color: #fff;
    text-decoration: none;
}
.ec-footerRole .ec-footerTitle .ec-footerTitle__logo a:hover {
    color: #fff;
    opacity: 0.7;
}
.ec-footerRole .ec-footerTitle .ec-footerTitle__copyright {
    color: #fff;
    font-size: 12px; /* PSD 12px(1x) YuMincho-Light */
    font-weight: 300;
    letter-spacing: 0.075em;
    margin-top: 6px;
}

/* ------------------------------------------------------------
   レスポンシブ（暫定: SPデザイン確定後に調整）
   ------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
    .ec-headerNaviRole .ec-headerRole__navSP {
        display: block;
    }
    .ec-headerNaviRole .ec-headerNaviRole__search {
        margin-left: 0;
    }
    .tc-logo a {
        font-size: 32px;
    }
    .tc-gnav__item {
        padding: 0 14px;
    }
    .tc-gnav__item a {
        font-size: 12px;
    }
    .tc-mainVisual__inner {
        flex-direction: column;
        height: auto;
    }
    .tc-mainVisual__text {
        flex: none;
        padding: 32px 6%;
        background: var(--tc-brown-hero);
    }
    /* SPはテキストの下に画像を置く（画像だけがフェード切替） */
    .tc-mainVisual__slider {
        position: relative;
        order: 2;
        width: 100%;
        height: 64vw; /* hero.jpg 487×312 の比率 */
    }
    .tc-mainVisual__catch {
        font-size: 24px;
    }
    /* SPでは<br>を無効にして自然な折り返しにする */
    .tc-mainVisual__lead {
        font-size: 13px;
    }
    .tc-mainVisual__lead br {
        display: none;
    }
    .tc-concept__inner {
        flex-direction: column;
        gap: 32px;
    }
    .tc-concept__text {
        padding-top: 0;
    }
    .tc-concept__title {
        font-size: 22px; /* 375px幅で13文字が1行に収まるサイズ */
    }
    .tc-concept__body {
        margin-bottom: 32px;
    }
    /* SPは絶対配置をやめて通常フローで重ね配置 */
    .tc-concept__images {
        min-height: 0;
        height: auto;
    }
    .tc-concept__imgMain {
        position: static;
        width: 100%;
    }
    .tc-concept__imgSub {
        position: static;
        display: block;
        width: 72%;
        margin-top: -18%;
    }
    .tc-recommend__list {
        flex-direction: column;
        gap: 24px;
    }
    .tc-newItem__inner {
        flex-direction: column;
        gap: 32px;
    }
    .tc-newItem__side {
        padding-top: 0;
    }
    .tc-newItem__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 8%;
    }
}

/* ------------------------------------------------------------
   カテゴリ一覧上部の案内文（業務用販売）
   ------------------------------------------------------------ */
.tc-categoryIntro {
    max-width: 940px;
    margin: 0 auto;
    padding: 48px 20px 40px;
}
.tc-categoryIntro__title {
    font-family: var(--tc-font-serif);
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0.075em;
    color: var(--tc-brown-text);
    margin: 0 0 20px;
}
.tc-categoryIntro__body p {
    font-size: 14px;
    line-height: 2.15;
    letter-spacing: 0.075em;
    color: var(--tc-brown-body);
    margin: 0 0 14px;
}
.tc-categoryIntro .tc-btn {
    margin-top: 18px;
}
@media only screen and (max-width: 767px) {
    .tc-categoryIntro {
        padding: 32px 6% 28px;
    }
    .tc-categoryIntro__title {
        font-size: 22px;
    }
    .tc-categoryIntro__body p {
        font-size: 13px;
        line-height: 2;
    }
}
.tc-categoryIntro__member {
    margin-top: 36px;
    padding: 24px 28px;
    background: var(--tc-panel);
}
.tc-categoryIntro__member p {
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.075em;
    color: var(--tc-brown-body);
    margin: 0;
}
.tc-categoryIntro__member .tc-categoryIntro__memberLead {
    font-weight: 600;
    color: var(--tc-brown-text);
}
.tc-categoryIntro__memberBtns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px;
}
.tc-categoryIntro__memberBtns .tc-btn {
    margin-top: 0;
}