:root {
  --kg-bg: #f4f6fb;
  --kg-surface: #ffffff;
  --kg-border: #e5e9f2;
  --kg-text: #1f2430;
  --kg-text-muted: #6b7280;
  --kg-primary: #4f46e5;
  --kg-primary-dark: #4338ca;
  --kg-primary-soft: #eef2ff;
  --kg-danger: #e11d48;
  --kg-danger-soft: #fef1f3;
  --kg-sidebar-bg: #171a2b;
  --kg-sidebar-text: #b7bcd6;
  --kg-sidebar-text-active: #ffffff;
  --kg-radius: 12px;
  --kg-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --main-body:#F6F5F3;
  --bs-primary-rgb: 0, 68, 153;
  --btn-button-color:#7c6d5f;
  --header-mobile-height: 114px;
  --ancolor-key-color:#7c6d5f;
}

*{

  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background: rgba(var(--bs-primary-rgb),.4);
  color: var(--kg-text);
  font-family: "Hiragino Sans", "Noto Sans JP", YuGothic, Meiryo, -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
}

a { text-decoration: none; }
img {width: 100%;}
.inner{padding: 0 20px;}


.notice-bar,
.search-bar{
display: none;
}

.material-symbols-outlined{
display: inline-block;
vertical-align: middle;
}


/*
================================================

H E A D E R

================================================
*/
/* 送料無料の帯（#topBar）。js.js が body の先頭に入れ、<html> に .hasTopBar を付ける。
   帯はヘッダーと同じく上に固定し、ヘッダー・カテゴリの帯・本文の上の余白を --topbar-h ぶん下げる */
:root{
--topbar-h: 0px;
}

html.hasTopBar{
--topbar-h: 28px;
}

#topBar{
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
height: var(--topbar-h);
padding: 0 10px;
overflow: hidden;
background: #7c6d5f;
color: #fff;
font-size: 12px;
line-height: var(--topbar-h);
letter-spacing: .05em;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
}

#h{
width: 100%;
height: 60px;
padding: 10px;
overflow: hidden;
background: rgba(255,255,255,.9);
position: fixed;
top: var(--topbar-h);
left: 0;
z-index: 9999;
}

#h .header-top{
display: flex;
justify-content: space-between;
}


#h h1,
#h h1 img{
width: auto;
height: 40px;
}


#h .header-utils{
padding: 10px 0;
}
#h .header-utils ul{
list-style: none;
display: flex;
gap:10px;
}

#h .header-utils ul img{
width: 25px;
}




.box{
  
    padding: 8px 16px;
}



/*
body
*/
#body{
background: #fff;
width: 500px;
margin: 0 auto;
min-height: 100vh;
box-shadow: 0 30px 30px rgba(10, 38, 73, 0.3);
padding-top: calc(60px + var(--topbar-h));
padding-bottom: 50px;
}

@media screen and (max-width: 640px) {
  #body{
    width: 100%;
  }
}



/*
================================================

F O O T E R

================================================
*/





footer{
padding-top: 0px;
width: 100%;
background: var(--ancolor-key-color);
position: relative;
}

footer a{
color: #fff;
}

footer:before{
content: "";
display: block;
height: 50px;
width: 100%;
position: absolute;
top:-50px;
left: 0;
background: transparent no-repeat center bottom;
background-image: url(../images/yk.png);
filter: brightness(0) saturate(100%) invert(43%) sepia(28%) saturate(279%) hue-rotate(348deg) brightness(93%) contrast(84%);
background-size: contain;
}

footer .inner{
padding: 4.0625rem 20px 3.125rem;
max-width: 78.75rem;margin: 0 auto;
text-align: center;
}

footer header h1{
width: 12.5rem;
margin: 0 auto;
}

footer .info{
color: #fff;
font-size: 13px;
}


footer ul{
list-style: none;

}
footer .sns{
display: flex;
justify-content: space-between;
padding: 20px 0;
width: 12.5rem;
margin: 0 auto;
}

footer .sns li{
width: calc(100% / 6 - 5px);
}

footer .sns li img{
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(199deg) brightness(105%) contrast(101%);;
}

footer .info address{
font-style: normal;
}


.f-menu__menu_blk h2{
color: #fff;
font-size: 16px;
padding: 20px 0;
}



#variationImgDum .close{
position: absolute;
top:5px;
right: 5px;
background: #aaa;
line-height: 1;
border-radius: 100px;
padding: 10px;
}

/*
================================================

検索窓（#SearchBlock）。ヘッダーの虫眼鏡で上から出てくる。
開け閉めは js.js が .in を付け外しする。
色・価格・人気の検索キーワードは js.js が作り、できたら .ready が付いて出てくる

================================================
*/
#SearchBlock{
--sb-key: var(--ancolor-key-color, #7c6d5f);
--sb-line: #e7e2da;
--sb-soft: #f6f3ee;
--sb-text: #2b2620;

position: fixed;
inset: 0;
z-index: 99999;
display: block;
background: rgba(30,24,18,.45);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}

#SearchBlock.in{
opacity: 1;
visibility: visible;
transition: opacity .25s ease;
}

/* 開いている間は、後ろのページをスクロールさせない */
html.searchOpen,
html.searchOpen body{
overflow: hidden;
}

#SearchBlock .input{
position: relative;
width: 100%;
max-width: 560px;
max-height: 100%;
margin: 0 auto;
padding: 0 20px 28px;
overflow-y: auto;
overscroll-behavior: contain;
background: #fff;
color: var(--sb-text);
border-radius: 0 0 14px 14px;
box-shadow: 0 8px 24px rgba(0,0,0,.15);
transform: translateY(-100%);
transition: transform .3s ease;
}

#SearchBlock.in .input{
transform: none;
}

/* ---- 見出し（SEARCH と ✕） ---- */
#SearchBlock .sbHead{
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
height: 56px;
margin: 0 -20px 16px;
padding: 0 8px 0 20px;
background: #fff;
border-bottom: 1px solid var(--sb-line);
}

#SearchBlock .sbHead .ttl{
display: flex;
align-items: baseline;
gap: 10px;
font-weight: normal;
}

#SearchBlock .sbHead .en{
font-family: "Cormorant Garamond", serif;
font-size: 1.3rem;
letter-spacing: .15em;
}

#SearchBlock .sbHead .jan{
font-size: .75rem;
color: #8a8178;
}

#SearchBlock .close{
position: static;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: none;
border-radius: 0;
font-size: 1.1rem;
cursor: pointer;
}

/* ---- キーワードとカテゴリー ---- */
#SearchBlock .sbKeyword{
display: flex;
align-items: center;
height: 48px;
margin-bottom: 10px;
padding: 0 4px 0 16px;
border: 1px solid var(--sb-line);
border-radius: 24px;
background: var(--sb-soft);
}

#SearchBlock .sbKeyword:focus-within{
border-color: var(--sb-key);
background: #fff;
}

#SearchBlock input[type=text]{
flex: 1;
min-width: 0;
height: 100%;
border: 0;
background: transparent;
color: var(--sb-text);
font-size: 16px;   /* 16px 未満だと iPhone が入力時に拡大する */
outline: none;
}

#SearchBlock .search-btn{
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: none;
cursor: pointer;
}

#SearchBlock .search-btn img{
width: 22px;
height: 22px;
}

#SearchBlock select{
width: 100%;
height: 44px;
padding: 0 16px;
border: 1px solid var(--sb-line);
border-radius: 22px;
background: #fff;
color: var(--sb-text);
font-size: 16px;
}

/* ---- 色・価格・人気の検索キーワード（できるまで出さない） ---- */
#SearchBlock .sbFilter,
#SearchBlock #keyword_list{
display: none;
}

#SearchBlock .sbFilter.ready,
#SearchBlock #keyword_list.ready{
display: block;
margin-top: 22px;
}

#SearchBlock h3{
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 12px;
font-size: .85rem;
font-weight: bold;
}

/* 色：丸い色見本。押すと縁取り＋チェック */
#SearchBlock .sbColors{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
gap: 12px 4px;
list-style: none;
}

#SearchBlock .sbColors label{
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-size: .65rem;
line-height: 1.3;
text-align: center;
cursor: pointer;
}

#SearchBlock .sbColors input{
position: absolute;
opacity: 0;
pointer-events: none;
}

#SearchBlock .sbColors em{
position: relative;
display: block;
width: 38px;
height: 38px;
border-radius: 50%;
background-image: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.18) 100%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
transition: box-shadow .15s ease;
}

#SearchBlock .sbColors input:checked + em{
box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px #fff, 0 0 0 4px var(--sb-key);
}

#SearchBlock .sbColors input:checked + em::after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 13px;
margin: -9px 0 0 -4px;
border-right: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(45deg);
filter: drop-shadow(0 0 1px rgba(0,0,0,.6));
}

#SearchBlock .sbColors input:focus-visible + em{
outline: 2px solid var(--sb-key);
outline-offset: 4px;
}

#SearchBlock .sbColors input:checked ~ span{
font-weight: bold;
}

/* 価格：つまみ2つのスライダー。range を2枚重ね、つまみだけ押せるようにする */
#SearchBlock .sbPriceLabel{
font-size: .85rem;
font-weight: normal;
color: #8a8178;
}

#SearchBlock .sbPriceLabel.on{
font-weight: bold;
color: var(--sb-key);
}

#SearchBlock .sbSlider{
position: relative;
height: 36px;
margin: 0 11px;
}

#SearchBlock .sbSlider .track{
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
margin-top: -2px;
border-radius: 2px;
background: var(--sb-line);
}

#SearchBlock .sbSlider .fill{
position: absolute;
top: 0;
bottom: 0;
border-radius: 2px;
background: var(--sb-key);
}

#SearchBlock .sbSlider input[type=range]{
position: absolute;
top: 0;
left: -11px;
width: calc(100% + 22px);
height: 36px;
margin: 0;
background: none;
-webkit-appearance: none;
appearance: none;
pointer-events: none;
}

#SearchBlock .sbSlider input[type=range]::-webkit-slider-runnable-track{
height: 36px;
background: none;
}

#SearchBlock .sbSlider input[type=range]::-moz-range-track{
height: 36px;
background: none;
}

#SearchBlock .sbSlider input[type=range]::-webkit-slider-thumb{
width: 22px;
height: 22px;
margin-top: 7px;
border: 2px solid var(--sb-key);
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
-webkit-appearance: none;
appearance: none;
pointer-events: auto;
cursor: grab;
}

#SearchBlock .sbSlider input[type=range]::-moz-range-thumb{
width: 18px;
height: 18px;
border: 2px solid var(--sb-key);
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.2);
pointer-events: auto;
cursor: grab;
}

#SearchBlock .sbSlider input[type=range]:focus-visible::-webkit-slider-thumb{
box-shadow: 0 0 0 4px rgba(124,109,95,.3);
}

/* 目盛り（価格帯の区切り） */
#SearchBlock .sbTicks{
position: absolute;
top: 50%;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
margin-top: 6px;
list-style: none;
pointer-events: none;
}

#SearchBlock .sbTicks li{
width: 1px;
height: 5px;
background: #c9c1b6;
}

#SearchBlock .sbEnds{
display: flex;
justify-content: space-between;
margin-top: 2px;
font-size: .7rem;
color: #8a8178;
}

/* ---- クリアと「この条件で探す」 ---- */
#SearchBlock .sbActions{
display: flex;
gap: 10px;
margin-top: 26px;
}

#SearchBlock .sbActions button{
height: 48px;
border-radius: 24px;
font-size: .9rem;
font-weight: bold;
cursor: pointer;
}

#SearchBlock .sbClear{
flex: 0 0 auto;
padding: 0 18px;
border: 1px solid var(--sb-line);
background: #fff;
color: var(--sb-text);
}

#SearchBlock .sbSubmit{
flex: 1;
border: 0;
background: var(--btn-button-color, var(--sb-key));
color: #fff;
}

#SearchBlock .sbSubmit .num{
font-weight: normal;
}

/* ---- 人気の検索キーワード ---- */
#SearchBlock #keyword_list{
padding-top: 22px;
border-top: 1px solid var(--sb-line);
}

#SearchBlock .sbKeywordList{
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
}

#SearchBlock .sbKeywordList a{
display: inline-block;
padding: 7px 14px;
border: 1px solid var(--sb-line);
border-radius: 18px;
background: var(--sb-soft);
color: var(--sb-text);
font-size: .8rem;
line-height: 1.3;
text-decoration: none;
}

#SearchBlock .sbKeywordList a::before{
content: "#";
margin-right: 2px;
color: #8a8178;
}

#SearchBlock .sbKeywordList a:hover,
#SearchBlock .sbKeywordList a:focus-visible{
border-color: var(--sb-key);
background: var(--sb-key);
color: #fff;
}

#SearchBlock .sbKeywordList a:hover::before{
color: inherit;
}

@media (prefers-reduced-motion: reduce){
  #SearchBlock,
  #SearchBlock .input{
  transition: none;
  }
}


#gGroup,
#globalMain{
background-color: rgb(240,240,240);
position: sticky;
z-index: 99;
}

/* #h が position:fixed で高さ60pxある。top:0 だとその裏に潜ってしまうので
   ヘッダーの高さぶん下げて、ヘッダーのすぐ下に貼り付くようにする */
#gGroup{
top: calc(60px + var(--topbar-h));
}

/* 商品ページでは #globalMain が #gGroup の下にもう一段入る。
   同じ top にすると重なって上の段が隠れるので、1段目の高さぶん下げる
   （--ggroup-h は js.js が #gGroup の実寸から入れる） */
#globalMain{
top: calc(60px + var(--topbar-h) + var(--ggroup-h, 40px));
z-index: 98;
}



#gGroup ul,
#groups{
list-style: none;
display: flex;
-webkit-box-align: center;
align-items: center;
padding: 0px 4px;
min-height: 40px;
overflow-x: auto;
overflow-y: hidden;
}


#gGroup .on{
border-bottom: solid 3px #000;
}

/* スクロールバーは出さない。SPは指でなぞる、PCは掴んで動かす（js.js） */
#gGroup ul,
#groups{
-ms-overflow-style: none;
scrollbar-width: none;
}

#gGroup ul::-webkit-scrollbar,
#groups::-webkit-scrollbar{
display: none;
}

/* 商品ページのオプション並びも、帯と同じようにスクロールバーを出さず掴んで動かす
   （item.css はキャッシュが効きにくいのでこちらに置いている） */
.ItemBody .variation .op{
-ms-overflow-style: none;
scrollbar-width: none;
}

.ItemBody .variation .op::-webkit-scrollbar{
display: none;
}

@media screen and (min-width: 641px) {
  #gGroup ul,
  #groups,
  .ItemBody .variation .op{
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }
  #gGroup ul.dragging,
  #groups.dragging,
  .ItemBody .variation .op.dragging{
    cursor: grabbing;
  }
}



#gGroup li,
#groups li{
position: relative;
display: flex;
-webkit-box-align: center;
align-items: center;
height: 40px;
margin-left: 14px;
}

#gGroup a,
#groups a{
display: block;
color: #000;
display: flex;
-webkit-box-align: center;
align-items: center;
white-space: nowrap;

padding: 3px 5px;
border-bottom: 2px solid transparent;
box-sizing: border-box;
line-height: 22px;
color: rgb(98, 105, 114);
font-weight: 400;
text-align: center;
font-size: 13px;
}




#groups a{
border: solid 1px rgb(98, 105, 114);
border-radius: 3px;
}

/* 横に続きがあることを知らせる（右端・左端をぼかして矢印を出す）。
   横に流れる並びの入れ物に js.js が .hasScrollHint を付けて左右にボタンを置き、
   溢れていて、まだその向きに続きがあるときだけ .more-next / .more-prev を付ける。
   使っている所: グローバルカテゴリの帯（#gGroup / #globalMain）、
   商品ページの「この商品が出てくる動画」（#itemVideo .scrollBox）。
   ぼかしの色は入れ物の背景に合わせて --hint-bg で変える */
.hasScrollHint{
--hint-bg: rgb(240,240,240);
}

.hasScrollHint .scrollHint{
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
width: 48px;
padding: 0;
border: none;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity .2s, visibility .2s;
}

.hasScrollHint .scrollHint--next{
right: 0;
justify-content: flex-end;
background: linear-gradient(to right, transparent, var(--hint-bg) 60%);
}

.hasScrollHint .scrollHint--prev{
left: 0;
justify-content: flex-start;
background: linear-gradient(to left, transparent, var(--hint-bg) 60%);
}

/* 矢印は線で描く（文字だと端末で形がまちまちになる） */
.hasScrollHint .scrollHint::before{
content: "";
display: block;
width: 8px;
height: 8px;
margin: 0 10px;
border-top: solid 2px rgb(98, 105, 114);
border-right: solid 2px rgb(98, 105, 114);
}

.hasScrollHint .scrollHint--next::before{
transform: rotate(45deg);
animation: scrollHintNudge 1.6s ease-in-out infinite;
}

.hasScrollHint .scrollHint--prev::before{
transform: rotate(-135deg);
}

.hasScrollHint.more-next .scrollHint--next,
.hasScrollHint.more-prev .scrollHint--prev{
opacity: 1;
visibility: visible;
}

/* 右向きの矢印だけ、少し揺らして「まだある」と気づかせる */
@keyframes scrollHintNudge{
0%, 100% { translate: 0 0; }
50% { translate: 4px 0; }
}

@media (prefers-reduced-motion: reduce){
  .hasScrollHint .scrollHint--next::before{
  animation: none;
  }
}










/*
================================================

B R E A D C R U M P S

================================================
*/

#breadcrumbs{
padding: 10px;
}

#breadcrumbs ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: .7rem;
}
#breadcrumbs li:after{
  content: ">";
  display: inline-block;
  margin: 0 10px;
}

#breadcrumbs li:nth-last-of-type(1):after{
  display: none;
}
#breadcrumbs ul a{
  color: #777;
}







/*
================================================

お気に入り（カラーミーのお気に入り機能）
登録済みのボタンには js.js / favorite_button.js が .on を付ける

================================================
*/
[data-favorite-button-selector]{
cursor: pointer;
}

.fav .material-symbols-outlined{
transition: color .15s ease;
}

.fav.on .material-symbols-outlined{
color: #e0245e;
font-variation-settings: 'FILL' 1;
}



/*
================================================

フリーページ（sayakobo2017 から移したもの）

旧テンプレートは PC 幅（730〜1000px）前提で作られていて、
スマホ用の指定も画面幅で切り替えているため、500px の #body に入れると
はみ出したり、上の img {width:100%} で小さな画像が大きくなったりする。
本文は #contnets、金属アレルギー・リンク集は #wrap に入っている

================================================
*/
#body > #contnets{
padding: 0 15px 30px;
}

#contnets *{
max-width: 100%;
}

#contnets img{
width: auto;
max-width: 100%;
height: auto;
}

#contnets ul,
#contnets ol{
padding-left: 1.2em;
}

#contnets .box{
padding: 0;
}

/* 見出し（よくある質問・特集など） */
#contnets h2.ttl{
padding: 10px 0;
margin-bottom: 15px;
border-bottom: 1px solid #eee;
font-size: 18px;
}

#contnets h2.ttl .en{
display: inline-block;
margin-right: 10px;
}

#contnets h2.ttl .jan{
display: inline-block;
font-size: .6em;
color: #aaa;
}

/* 当店を初めてご利用するお客様へ：ページ内の目次 */
#contnets #first ul.category{
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 15px;
}

#contnets #first ul.category li a{
display: block;
padding: 4px 10px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 12px;
color: #333;
}

/* カテゴリー一覧（category.js が中身を作る） */
#contnets #category ul{
list-style: none;
padding: 0;
}

#contnets #category li{
padding: 0;
}

#contnets #category .large{
display: block;
width: auto;
height: auto;
background: #f4f2ee;
margin: 20px 0 8px;
}

#contnets #category .large .h{
display: block;
position: relative;
overflow: hidden;
padding: 12px 10px;
}

#contnets #category .large .h a{
display: block;
position: relative;
color: #333;
font-weight: bold;
}

#contnets #category .large .h em{
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 50px;
opacity: .4;
z-index: 0;
}

#contnets #category .mid_box > ul{
display: flex;
flex-wrap: wrap;
}

#contnets #category .mid{
display: block;
width: 50%;
padding: 6px 4px;
}

#contnets #category .mid a{
display: flex;
align-items: center;
gap: 8px;
font-size: .8rem;
color: #333;
}

#contnets #category .mid em{
flex: 0 0 28px;
width: 28px;
height: 28px;
margin: 0;
border-radius: 50%;
overflow: hidden;
}

#contnets #category .mid em img{
width: 100%;
height: 100%;
object-fit: cover;
}

#contnets #category li.small_box{
display: none;
}

/* 金属アレルギー（Allergy.css のスマホ用の指定を常に効かせる）・リンク集 */
#body > #wrap{
width: 100%;
}

#body > #wrap #intro,
#body > #wrap .genre{
margin-left: 0;
margin-right: 0;
padding: 20px 10px;
}

#body > #wrap #intro article{
width: 100%;
float: none;
padding: 20px;
}

#body > #wrap #lead article{
width: 90%;
padding: 10px;
}

#body > #wrap #lead h1{
font-size: 120%;
}

#body > #wrap #lead h1 span{
font-size: 24px;
}

#body > #wrap #action h1{
width: 100%;
margin-top: 40px;
}

#body > #wrap .genre .contents{
width: 100%;
}

#body > #wrap .imgWrap{
float: none;
width: 50%;
height: 150px;
margin: 0 auto;
}

#body > #wrap .txtWrap{
position: static;
width: 100%;
max-width: none;
margin: 20px 0 0;
padding: 20px 10px;
}

#body > #wrap .txtWrap h1{
text-align: center;
background-position: center top;
}

#body > #wrap .txtWrap h1 span{
margin-left: 10px;
}

#body > #wrap .itembox .items{
width: 49%;
padding: 10px;
}

#body > #wrap .more{
width: 300px;
max-width: 100%;
padding: 10px 0 10px 40px;
background: url(//sayakobo.jp/images/Allergy/btn-s.png);
}

#body > #wrap .more a{
display: block;
padding-left: 0;
font-size: 18px;
}

#body > #wrap .more a span{
display: block;
}



/*
================================================

ショップの案内（?mode=sk：配送・送料／支払い方法／特定商取引法に基づく表記）

中身はカラーミーが出す旧来の HTML（colormekit の mar_b_50・txt_28・col-lg-6 などの印付き）。
新テンプレートは colormekit の見た目に頼らないので、ここで整える。
・ネコポスの説明文に閉じていない <b> があり、後ろが全部太字になるので dd は太さを戻す
・氏名・住所は文字の画像。上の img {width:100%} で大きく引き伸ばされるので元の大きさにする
・閉じていない <b> の中に入るので、#body > #info のように親を決め打ちしない
・#info へのリンクで開くと固定ヘッダーとグループの帯の下に隠れるので、その分ずらす

================================================
*/
#delivery,
#payment,
#info{
margin: 0;
padding: 10px 15px 20px;
font-weight: normal;
scroll-margin-top: calc(60px + var(--topbar-h, 0px) + 50px);
}

#delivery h2,
#payment h2,
#info h2{
margin: 10px 0 15px;
padding: 10px 0;
border-bottom: 1px solid #eee;
font-size: 18px;
font-weight: bold;
line-height: 1.4;
}

#delivery dl,
#payment dl,
#info dl{
margin: 0;
padding: 0;
}

/* colormekit の2列（col-lg-6）は使わず、1列に並べる */
#info .row{
display: block;
margin: 0;
}

#info .row > .col{
float: none;
width: auto;
padding: 0;
}

#delivery dt,
#payment dt,
#info dt{
margin: 0;
padding: 10px 0 4px;
border-top: 1px solid #f0eeea;
font-size: 14px;
font-weight: bold;
color: #2b2620;
}

#delivery dl > dt:first-child,
#payment dl > dt:first-child,
#info .row > dl:first-child > dt:first-child{
border-top: 0;
}

#delivery dd,
#payment dd,
#info dd{
margin: 0 0 12px;
padding: 0;
font-size: 13px;
font-weight: normal;
line-height: 1.8;
color: #4a443d;
overflow-wrap: anywhere;
}

/* 閉じていない <b> が後ろの dd にも入り込むので、dd の中の <b> は太字にしない（送料の一行だけ太字に戻す） */
#delivery dd b,
#payment dd b{
font-weight: normal;
}

#delivery dd span[style*="large"]{
font-weight: bold;
}

#delivery img,
#payment img,
#info img{
width: auto;
max-width: 100%;
height: auto;
vertical-align: middle;
}

/* 氏名・住所の文字画像。元の画像が大きいので、本文の文字に近い高さにそろえる */
#info dd img{
max-height: 24px;
}

/* クレジットカードのロゴは横に並べる */
#payment .payment_img{
max-height: 26px;
margin: 0 4px 4px 0;
}

#delivery a,
#payment a,
#info a{
color: var(--ancolor-key-color, #7c6d5f);
text-decoration: underline;
}