@charset "utf-8";

/* ==========================================================================
   Base Layout & Utility (共通設定)
   ========================================================================== */
.pc_display{
    display: block
}
.sp_display{
    display: none
}
.lower-contents {
    margin-top: 142px;
}
div.contents {
    background-color: #F9F8F9;
    padding-bottom: 1vw;
}
main.main {
  max-width: 1184px !important;
  width: 1184px !important;
  line-height: 2;
  margin: 0 auto;
}
.lower-contents .lower-container {
    padding: 50px 0 100px;
}
img{
    max-width: 100%;
}
/* 余白・レイアウト用ユーティリティ */
.mb30 { margin-bottom: 30px !important; }
.mb50 { margin-bottom: 120px !important; }

.flex-center {
    display: flex;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 59px;
}

.flex-start {
    display: flex;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 59px;
}

/* スマホ時のmain幅調整 */
@media screen and (max-width: 768px) {
.sp_display{
    display: block
}
.pc_display{
    display: none
}
.lower-contents {
    margin-top: 100px !important;
}
  main.main {
    max-width: 95% !important;
    width: 95% !important;
  }
  
  /* 余白・レイアウト用ユーティリティ（SP用再定義） */
  .mb30 {margin-bottom: 4% !important;}
  .mb50 { margin-bottom: 120px !important; }
}


/* ==========================================================================
   Category List Page (.cat-all / カテゴリ一覧ページ)
   ========================================================================== */

/* --- Main Title (cat-all専用: グラデーション下線) --- */
.cat-all h2.main-ttl {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 40px;
  padding-bottom: 10px;
  color: #333;
}
h2.main-ttl:after {
  content: "";
  display: block;
  margin-top: 1%;
  height: 3px;
  background: #6B3906;
  background: linear-gradient(90deg, rgba(107, 57, 6, 1) 0%, rgba(107, 57, 6, 1) 6%, rgba(227, 219, 212, 1) 6%);
}

/* --- Section & Head --- */
.cat-sec {
  margin-bottom: 50px;
}

.cat-head {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  color: #333;
}

/* カテゴリ頭アイコン (茶色のアイコン) */
.cat-head::before {
  content: "";
  display: inline-block;
  /* width: 30px; */
  /* height: 30px; */
  /* margin-right: 10px; */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ヘッダーアイコン画像指定 */
.cat-head::before {/* background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn.webp); */}

.list-col .cat-sec .cat-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.list-col .cat-sec {
    display: flex;
    flex-wrap: wrap;
    width: calc(100%/4);
    padding: 1rem;
}

.list-col .cat-sec:nth-child(2n+1) {
    background: #f8f1f1;
}

.list-col .cat-sec:nth-child(2n+2) {
    background: #f5f3ee;
}

section.list-col {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.list-col .cat-sec .cat-list li {
    height: 4rem;
}

/* --- List & Items --- */
.cat-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cat-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  position: relative;
  transition: opacity 0.3s;
  height: 100%; /* 高さ揃え */
  box-sizing: border-box;
}

.cat-item:hover {
  opacity: 0.7;
}

/* リンク内アイコン (カラー線画アイコン) */
.cat-item::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* テキストエリア */
.cat-item .txt {
  flex-grow: 1;
}

.cat-item small {
  font-size: 11px;
  font-weight: normal;
  color: #666;
  display: block;
}

/* 右側の矢印 (cat-all用はCSS描画のまま維持) */
.cat-item::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;
  transform: rotate(45deg);
  margin-left: 10px;
}

/* --- 各リンクアイコン画像指定 --- */
/* オリジナル印刷 */
.icn-01-01::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_01_01.webp); }
/* ドリンク */
.icn-02-01::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_02_01.webp); }
.icn-02-02::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_02_02.webp); }
.icn-02-03::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_02_03.webp); }
.icn-02-04::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_02_04.webp); }
/* テイクアウト */
.icn-03-01::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_03_01.webp); }
.icn-03-02::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_03_02.webp); }
.icn-03-03::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_03_03.webp); }
.icn-03-04::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_03_04.webp); }
/* 店舗 */
.icn-04-01::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_04_01.webp); }
.icn-04-02::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_04_02.webp); }
.icn-04-03::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_04_03.webp); }
.icn-04-04::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_04_04.webp); }
/* その他 */
.icn-05-01::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_05_01.webp); }
.icn-05-02::before { background-image: url(https://gigaplus.makeshop.jp/ecafesp/img/category/cat_icn_05_02.webp); }

.cap-list a.item-a {
    background: none;
}

.cap-list.quintet li {
    width: calc(80%/5);
}

.cap-list.quad li {
    width: calc(85% / 4);
}

.cap-list a.item-a:after {
    display: none;
}

/* --- SP Responsive (cat-all) --- */
@media screen and (max-width: 768px) {
  .cat-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .cat-item {
    padding: 10px;
    font-size: 10px;
  }
  .cat-item::before {
    width: 30px;
    height: 30px;
    margin-right: 8px;
  }



.list-col .cat-sec:nth-child(2n+1) {
    background: none;
}

.list-col .cat-sec:nth-child(2n+2) {
    background: none;
}

.list-col .cat-sec {
    padding: 0.8em;
}
/*.cat-head::before {
    content: "";
    width: 2em;
    height: 2em;
}*/
.list-col .cat-sec .cat-list {
    flex-wrap: wrap;
    flex-direction: initial;
}

.cat-head {
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 1.2em;
}

.list-col .cat-sec {
    width: 100%;
    margin-bottom: 0.2rem;
}

section.list-col {
    display: flex;
    flex-wrap: wrap;
}

.list-col .cat-sec .cat-list li {
    width: 100%;
    height: 2.5rem;
    margin: 0 auto;
}
}


/* ==========================================================================
   Category Detail Page (.cat-detail / カテゴリ詳細・紙コップページ)
   ========================================================================== */

.cat-detail a {
  text-decoration: none;
  transition: opacity 0.3s;
}
.cat-detail a:hover {
  opacity: 0.8;
}

/* --- Main Title (cat-detail専用: 直線ボーダー) --- */
.cat-detail .main-ttl {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 30px;
  padding-bottom: 10px;
  color: #333;
}


.lead-txt {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 50px;
}

/* --- Anchor Navigation --- */
.anchor-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
}
.anchor-nav li {
  width: 32%;
}
/* ボタンデザインの統一 */
.anchor-nav a {
  display: inline-block;
  width: 100%; /* liの幅いっぱいに */
  box-sizing: border-box; /* paddingを含める */
  border-radius: 900px;
  background: #6b3906; /* 濃い茶色 */
  color: #ffffff;
  padding: 0.5em 0;
  font-size: 1em;
  position: relative;
  text-decoration: none;
  text-align: center;
}
/* 矢印アイコンの統一 (SVG) */
.anchor-nav a::after {
  content: "";
  display: inline-block;
  height: 10px;
  width: 6px;
  background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr.svg) no-repeat;
  background-size: auto;
  margin-left: 1em;
  rotate: 90deg;
}

/* --- View All Button --- */
.view-all-btn {
  text-align: center;
}
.view-all-btn a {
  display: inline-block;
  width: 60%; /* 指定幅があればそれに合わせる、ここではレスポンシブ考慮し%指定 */
  max-width: 576px; /* 指定のwidthに合わせる */
  border-radius: 900px;
   /* 濃い茶色 */
  padding: 0.5em 0;
  font-size: 1.2em;
  position: relative;
  text-decoration: none;
  /* margin-bottomは親要素(.view-all-btn)のmb50で調整 */
  background: #fff;
  border: 1px solid #6b3906;
  color: #6b3906;
}
.view-all-btn a::after {
  content: "";
  display: inline-block;
  height: 10px;
  width: 6px;
  background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr.svg) no-repeat;
  background-size: auto;
  margin-left: 1em;
  filter: invert(1);
}

/* --- Section Headings --- */
.sec-ttl {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  border-bottom: 2px solid #999;
  display: inline-block;
  padding-bottom: 5px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.sec-desc {
  text-align: center;
  font-size: 14px;
  margin-bottom: 30px;
}

/* --- Section 1: Capacity List --- */
.cap-list {
  list-style: none;
  padding: 0;
  /* flex-center (display: flex) がHTML側で当たっている前提 */
}
.cap-list li {
  width: 30%;
}
.cap-list a {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  border-radius: 900px;
  background: #6b3906;
  color: #ffffff;
  padding: 0.5em 0;
  font-size: 1.2em; /* 必要に応じて調整 */
  position: relative;
  text-decoration: none;
  text-align: center;
}
.cap-list a::after {
  content: "";
  display: inline-block;
  height: 10px;
  width: 6px;
  background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr.svg) no-repeat;
  background-size: auto;
  margin-left: 1em;
}

/* --- Section 2: Design Group --- */
.design-cols {
  gap: 40px;
  align-items: flex-start;
}
.design-group {
  width: 30%;
  text-align: center;
}
.design-group h4 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}
.design-group ul {
  list-style: none;
  padding: 0;
}
.design-group li {
  margin-bottom: 15px;
}

.design-group a {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  border-radius: 900px;
  padding: 0.5em 0;
  font-size: 1.2em;
  font-weight: bold;
  position: relative;
  text-decoration: none;
}
/* 矢印アイコンのスタイル変更（絶対配置をやめてSVG背景に） */
.design-group a::after {
  content: "";
  display: inline-block;
  height: 10px;
  width: 6px;
  background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr.svg) no-repeat;
  background-size: auto;
  margin-left: 1em;
  /* 色変更に対応するため、SVGの色を変えるか、maskを使う等の対応が必要ですが、
     今回は指定のSVG画像を使用します（色はSVG依存になります）。
     もしSVGが黒色で、濃い背景のボタンで見にくい場合は、白色のSVGを用意するかfilterで調整してください */
}
/* 必要であればfilterで白くする（例） */
/* .design-group a::after { filter: invert(1); } */

/* デザイン別ボタン色 */
.btn-white {
  background: #fff;
  border: 1px solid #333;
  color: #333;
}
.btn-craft {
  background: #b68d4c; 
  color: #fff;
  border: 1px solid #b68d4c;
}
.btn-design {
  background: #632e36;
  color: #fff;
  border: 1px solid #632e36;
}

/* --- Section 3: Brand List (商品一覧レイアウト変更) --- */
/* .special .special_items_list.-fourline .flex のスタイルを適用 */
.brand-list {
  list-style: none;
  padding: 0;
  
  display: flex;
  flex-wrap: wrap;
  gap: 1.5%; /* 指定のgap */
  justify-content: flex-start; /* 指定のjustify-content */
  margin-bottom: 3em; /* 指定のmargin-bottom */
}
.brand-list li {
  width: 23.8%;
  margin-bottom: 2rem;
}
.brand-list.triline li {
  width: 31.8%;
  margin-bottom: 2rem;
}
.brand-list img {
  width: 100%;
  height: auto;
  display: block;
}
.brand-list .name {
  text-align: center;
  font-weight: bold;
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}

/* --- SP Responsive (cat-detail) --- */
@media screen and (max-width: 768px) {
 .cap-list {
    flex-direction: row;
    gap: 2%;
  }
.cap-list.quintet li {
    width: calc(95% / 2);
}
.anchor-nav, .cap-list.quintet {
    flex-direction: column;
    flex-wrap: wrap;
    flex-direction: initial;
    gap: 2%;
}
.flex-center {
    gap: 2%;
}
  .anchor-nav li, .cap-list li {
    width: 49% !important;
    margin-bottom: 1em;
  }
  .view-all-btn a {
    width: 70%;
  }
  
  .design-cols {
    flex-direction: column;
    gap: 30px;
  }
  .design-group {
    width: 100%;
  }
  
  /* 商品一覧のSPレイアウト調整 */
  .brand-list {
    gap: 1.6em !important; /* 指定のSP用gap */
    flex-direction: row; /* 横並び維持 */
    flex-wrap: wrap;
  }
  .brand-list li {
    width: 46% !important; /* 2列表示 (100% - gap) / 2 */
  }
  .anchor-nav a {
    font-size: 0.8em;
  }
}
/* ==========================================================================
   Feature Box (.feature-box / 特集エリア：画像左・テキスト右)
   ========================================================================== */
.feature-box {
  background: #fff;
  border-radius: 20px;
  padding: 35px 50px;
  display: flex;
  align-items: center;
  gap: 50px;
  /* 影をつける場合 */
  /* box-shadow: 0 5px 15px rgba(0,0,0,0.05); */
  margin-bottom: 4em;
}
.bg-g {
    background: #EAEAEA;
    border-radius: 0;
}

.fb-img {
  width: 24%; /* 画像エリアの幅 */
  flex-shrink: 0;
  text-align: center;
}
.fb-img img {
  width: 100%;
  height: auto;
  max-width: 250px; /* 画像が大きくなりすぎないように制限 */
}

.fb-txt {
  flex-grow: 1;
}

.fb-ttl {
  font-size: 27px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 10px;
  display: inline-block;
  color: #333;
  width: 100%;
}
h3.fb-ttl:after {
   content: "";
  display: block;
  margin-top: 1%;
  height: 3px;
  background: linear-gradient(90deg, rgba(107, 57, 6, 1) 0%, rgba(107, 57, 6, 1) 6%, rgba(227, 219, 212, 1) 6%);
}
.bg-g .fb-ttl:after {
    display: none;
}
.bg-g .fb-ttl {
    border: none;
}
.fb-txt p {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

/* ボタン (view-all-btnのスタイルを踏襲) */
.fb-btn a {
  display: inline-block;
  width: 100%;
  max-width: 400px; /* 少し幅広に */
  border-radius: 900px;
  background: #6b3906;
  color: #ffffff;
  padding: 0.5em 0;
  font-size: 1.2em;
  position: relative;
  text-decoration: none;
  text-align: center;
}
.fb-btn a::after {
  content: "";
  display: inline-block;
  height: 10px;
  width: 6px;
  background: url(https://gigaplus.makeshop.jp/ecafesp/img/special/common/arr.svg) no-repeat;
  background-size: auto;
  margin-left: 1em;
}

/* --- SP Responsive (Feature Box) --- */
@media screen and (max-width: 768px) {
.lower-contents .lower-container {
    padding: 20px 0 100px;
}
    .cat-item small{
        font-size: 0.8em;
    }
h3.fb-ttl:after {
    display: none;
}
  .feature-box {
    flex-direction: column;
    padding: 30px 20px;
    gap: 30px;
    text-align: center; /* スマホでは中央揃え */
  }

  .fb-img {
    width: 60%;
    margin: 0 auto;
  }

  .fb-ttl {
    display: block; /* 中央揃えのためにブロック要素化、あるいはinline-blockのままtext-align:center */
    width: 100%;
    border-bottom: 1px solid #ccc;
  }
  
  .fb-txt p {
    text-align: left; /* テキストは左揃えの方が見やすい場合 */
  }
  
  .fb-btn a {
    width: 100%;
    max-width: none;
  }
.flex-center {
    justify-content: flex-start !important;
}
.sec-desc {
    text-align: center;
}
}
/* ==========================================================================
   Color Buttons (.drinkgoods カラー選択ボタン用)
   ========================================================================== */
.cap-list a[class*="btn-color-"] {
  border: 1px solid transparent; /* 枠線のベース */
}

/* 白：背景白、文字黒、枠線グレー */
.cap-list a.btn-color-white {
  background: #ffffff;
  color: #333333;
  border-color: #333333;
}
.cap-list a.btn-color-white::after {
  /* 白背景用に見えやすい矢印画像に変えるか、黒フィルターをかける */
  filter: invert(1); /* 黒矢印にする */
}
.design-group a.btn-white::after {
  /* 白背景用に見えやすい矢印画像に変えるか、黒フィルターをかける */
  filter: invert(1); /* 黒矢印にする */
}

/* 黒 */
.cap-list a.btn-color-black { background: #000000; }

/* 赤 */
.cap-list a.btn-color-red { background: #ff2939; }

/* 黄色・オレンジ */
.cap-list a.btn-color-orange { background: #fbdf10; }

/* 緑 */
.cap-list a.btn-color-green { background: #00a968; }

/* 青・紺 */
.cap-list a.btn-color-blue { background: #004098; }

/* 透明（水色で表現） */
.cap-list a.btn-color-clear { background: #008db7; }

/* その他（茶色） */
.cap-list a.btn-color-brown { background: #6f4b23; }