@charset "UTF-8";
/* CSS Document */
#stylish-items .mainv {
    margin-bottom: 40px;
}

#stylish-items .rightContents {
    max-width: 100%;
    margin: 0 auto 80px;
}

#stylish-items .lead-txt {
    text-align: left; /* 画像に合わせて左寄せ */
    margin-bottom: 2em;
}

/* =========================================
   Cafe/Fastfood Page Layout Utilities
   ========================================= */

/* --- 3列商品リスト (-triline) --- */
/* 既存の -fourline のスタイルを継承しつつ幅を上書き */
.special .special_items_list.-triline .items {
    justify-content: center;
    align-items: flex-start;
}
.special_items_list.-triline ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左詰めで整列 */
}

.special .special_items_list.-triline .items li {
    text-align: left;
    width: 24% !important;
    text-align: center;
    margin-bottom: 1%;
}

.special .special_items_list .items li.unit img {
    width: 100%;
}

.special .special_items_list .items li.unit {
    background: #EAEAEA;
    padding: 1em;
}

/* --- 2列商品リスト (-triline) --- */
/* 既存の -fourline のスタイルを継承しつつ幅を上書き */
.special .special_items_list.-duoline .items {
    justify-content: center;
}
.special_items_list.-duoline ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左詰めで整列 */
}

.special .special_items_list.-duoline .items li {
    text-align: left;
    width: 24%;
    text-align: center;
    margin-bottom: 1%;
}

/* --- コネクター（接続線）エリア --- */
.chain-row {
    display: flex;
    width: 100%;
    height: 60px; /* 線の高さ */
    margin-top: 0; /* 上の商品との隙間調整 */
    margin-bottom: 0px;
    position: relative;
    z-index: 1;
    justify-content: center;
}

/* --- コネクターの基本パーツ --- */
.chain-row .connector {
    width: 26%; /* 商品と同じ幅 */
    height: 100%;
    position: relative;
}


/* --------------------------------------
   基本の直線 (-straight)
   -------------------------------------- */
.chain-row .connector.-straight::before {
  content: "";
  display: block;
  width: var(--line-width);
  height: 100%;
  background-color: var(--color);
  margin: 0 auto;
}
ul.items.flex.-cap-top p {
    margin-bottom: 0.5vw;
}

/* --------------------------------------
   左へ合流するライン (-branch-left)
   形状：中央から下へ → 左へ折れる → 左端から下へ ( ┌┘ のような形 )
   -------------------------------------- */
.chain-row .connector.-branch-left::before {
  /* 縦線（上半分）：中央 */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--line-width);
  height: 50%;
  background-color: var(--color);
}

.chain-row .connector.-branch-left::after {
  /* 横線＋縦線（下半分）：中央から左端へ */
  content: "";
  position: absolute;
  top: 50%;
  right: 50%; /* 中央起点 */
  width: 50%; /* 左端いっぱいまで */
  height: 50%;
  /* 上辺と左辺に線を描く */
  border-top: var(--line-width) solid var(--color);
  border-left: var(--line-width) solid var(--color);
  box-sizing: border-box;
  margin-right: calc(var(--line-width) / -2);
}

/* --- コネクターの基本パーツ --- */
.chain-row .connector {
    width: 25.5%; /* 商品と同じ幅 */
    height: 100%;
    position: relative;
}

/* --------------------------------------
   基本の直線 (-straight)
   -------------------------------------- */
.chain-row .connector.-straight::before {
  content: "";
  display: block;
  width: var(--line-width);
  height: 125%;
  background-color: var(--color);
  margin: -5% auto 0;
}
.chain-row.-yellow .connector.-straight::before {
  background-color: var(--l-yellow);
}
.chain-row.-pink .connector.-straight::before {
  background-color: var(--pink);
}
.chain-row.-l-blue .connector.-straight::before {
  background-color: var(--l-blue);
}
.chain-row.-orange .connector.-straight::before {
  background-color: var(--orange);
}
.chain-row.green2 .connector.-straight::before {
  background-color: var(--green2);
}

/* --------------------------------------
   右へ合流するライン (-branch-right)
   形状：中央から下へ → 右へ折れる → 右端から下へ ( └┐ のような形 )
   -------------------------------------- */
.chain-row .connector.-branch-right::before {
  /* 縦線（上半分）：中央 */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--line-width);
  height: 62.5%; /* 中間地点まで */
  background-color: var(--color);
  margin: -5% auto 0;
}
.chain-row.-yellow .connector.-branch-right::before {
  background-color: var(--l-yellow);
}
.chain-row.-pink .connector.-branch-right::before{
  background-color: var(--pink);
}
.chain-row.-l-blue .connector.-branch-right::before {
  background-color: var(--l-blue);
}
.chain-row.-orange .connector.-branch-right::before {
  background-color: var(--orange);
}
.chain-row.green2 .connector.-branch-right::before {
  background-color: var(--green2);
}

.chain-row .connector.-branch-right::after {
  /* 横線＋縦線（下半分）：中央から右端へ */
  content: "";
  position: absolute;
  top: 35%;
  left: 50%;
  width: 51%; /* 右端いっぱいまで */
  height: 62.5%;
  /* 上辺と右辺に線を描くことで「L字の逆」を作る */
  border-top: var(--line-width) solid var(--color);
  border-right: var(--line-width) solid var(--color);
  box-sizing: border-box; 
  /* box-sizingによりborder分が内側計算になるため、
     右端の縦線が隣のセルとぴったり重なるように位置を微調整 */
  margin-left: calc(var(--line-width) / -2);
}
.chain-row.-yellow .connector.-branch-right::after{
  border-top: var(--line-width) solid var(--l-yellow);
  border-right: var(--line-width) solid var(--l-yellow);
}
.chain-row.-pink .connector.-branch-right::after{
  border-top: var(--line-width) solid var(--pink);
  border-right: var(--line-width) solid var(--pink);
}
.chain-row.-l-blue .connector.-branch-right::after{
  border-top: var(--line-width) solid var(--l-blue);
  border-right: var(--line-width) solid var(--l-blue);
}
.chain-row.-orange .connector.-branch-right::after{
  border-top: var(--line-width) solid var(--orange);
  border-right: var(--line-width) solid var(--orange);
}
.chain-row.green2 .connector.-branch-right::after{
  border-top: var(--line-width) solid var(--green2);
  border-right: var(--line-width) solid var(--green2);
}

/* --------------------------------------
   左へ合流するライン (-branch-left)
   形状：中央から下へ → 左へ折れる → 左端から下へ ( ┌┘ のような形 )
   -------------------------------------- */
.special .special_items_list.-triline .items li.two-calum {
    width: 24%;
    margin: 0 13%;
}

.chain-row .connector.-branch-left::before {
  /* 縦線（上半分）：中央 */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--line-width);
  height: 62.5%;
  background-color: var(--color);
  margin: -5% auto 0;
}
.chain-row.-yellow .connector.-branch-left::before {
  background-color: var(--l-yellow);
}
.chain-row.-pink .connector.-branch-left::before {
  background-color: var(--pink);
}
.chain-row.-l-blue .connector.-branch-left::before {
  background-color: var(--l-blue);
}
.chain-row.-orange .connector.-branch-left::before {
  background-color: var(--orange);
}
.chain-row.green2 .connector.-branch-left::before {
  background-color: var(--green2);
}

.chain-row .connector.-branch-left::after {
  /* 横線＋縦線（下半分）：中央から左端へ */
  content: "";
  position: absolute;
  top: 35%;
  right: 50%; /* 中央起点 */
  width: 51%; /* 左端いっぱいまで */
  height: 62.5%;
  /* 上辺と左辺に線を描く */
  border-top: var(--line-width) solid var(--color);
  border-left: var(--line-width) solid var(--color);
  box-sizing: border-box;
  margin-right: calc(var(--line-width) / -2);
}
.chain-row.-yellow .connector.-branch-left::after {
  border-top: var(--line-width) solid var(--l-yellow);
  border-left: none;
}
.chain-row.-pink .connector.-branch-left::after {
  border-top: var(--line-width) solid var(--pink);
  border-left: var(--line-width) solid var(--pink);
}
.chain-row.-l-blue .connector.-branch-left::after {
  border-top: var(--line-width) solid var(--l-blue);
  border-left: var(--line-width) solid var(--l-blue);
}
.chain-row.-orange .connector.-branch-left::after {
  border-top: var(--line-width) solid var(--orange);
  border-left: var(--line-width) solid var(--orange);
}
.chain-row.green2 .connector.-branch-left::after {
  border-top: var(--line-width) solid var(--green2);
  border-left: var(--line-width) solid var(--green2);
}
p.item-name {
    text-align: center;
}

.special .special_items_list p {
    margin: 0.3em 0 1.5em;
}
.special .special_items_list {
    margin: 0 0 4%;
}
.special .special_items_list.-fourline .flex {
    margin-bottom: 2em;
}

.special .more_btn a:not(last-child) {
    margin-bottom: 4em;
}
@media screen and (max-width: 768px) {
.special .special_items_list p.text-center {
    text-align: left;
    width: 100%;
}
    .special .special_items_list.chained .flex li {
        width: 29.8% !important;
    }
.chain-row .connector {
    width: 26.5% !important;
}
    .special .special_items_list.-duoline .items li {
        width: 24% !important;
}
.chain-row .connector.-straight::before {
    height: 90%;
    margin: 14% auto 0;
}
.chain-row .connector.-branch-right::before {
    top: 19%;
    left: 50%;
    height: 50%;
    margin: 0 auto 0;
}
.chain-row .connector.-branch-right::after {
    top: 64%;
    left: 50%;
    width: 53%;
    height: 48.5%;
}
.chain-row .connector.-branch-left::before {
    top: 30%;
    left: 50%;
    height: 47%;
    margin: -5% auto 0;
}
.chain-row .connector.-branch-left::after {
    top: 64%;
    RIGHT: 50%;
    width: 53%;
    height: 48.5%;
}
.special .special_items_list.-triline .items li.two-calum {
    margin: 0 15%;
}
    .special .more_btn .-mt2em a {
        width: 95% !important;
        margin-top: 2em;
    }
    .special .special_items_list {
    text-align: center;
    border-radius: 10px;
    margin: 0 0 10%;
}

.special .special_items_list.-fourline .flex {
    margin-bottom: 2em;
    justify-content: space-evenly;
}

.special .special_items_list.-fourline.-card .flex {
    margin-bottom: 2em;
    justify-content: space-between;
}
}