/* ================================
　　　　　　　　　カラー
================================= */

.red{ color: var(--color-red); }
.orange{ color: var(--color-orange); }
.black{ color: var(--color-black); }
.blue{ color: var(--color-blue); }
.gold{ color: var(--color-gold); }
.sliver{ color: var(--color-silver); }
.bronze{ color: var(--color-bronze); }
.beige{ color: var(--color-beige); }
.gray{ color: var(--color-gray); }
.bg-beige{ background-color: var(--color-beige); }
.bg-gray{ background-color: var(--color-gray); }

/* ================================
　　　　　　　　　余白
================================= */

.m0{ margin: 0 !important; }
.m5{ margin: 5px !important; }
.m10{ margin: 10px !important; }
.m15{ margin: 15px !important; }
.m20{ margin: 20px !important; }

.mt0{ margin-top: 0 !important;}
.mt5{ margin-top: 5px !important; }
.mt10{ margin-top: 10px !important; }
.mt15{ margin-top: 15px !important; }
.mt20{ margin-top: 20px !important; }
.mt25{ margin-top: 25px !important; }
.mt30{ margin-top: 30px !important; }
.mt35{ margin-top: 35px !important; }
.mt40{ margin-top: 40px !important; }
.mt45{ margin-top: 45px !important; }
.mt50{ margin-top: 50px !important; }
.mt55{ margin-top: 55px !important; }
.mt60{ margin-top: 60px !important; }
.mt70{ margin-top: 70px !important; }
.mt80{ margin-top: 80px !important; }
.mt90{ margin-top: 90px !important; }
.mt100{ margin-top: 100px !important; }

.mt-5{ margin-top: -5px !important; }
.mt-10{ margin-top: -10px !important; }

.mb0{ margin-bottom: 0 !important; }
.mb5{ margin-bottom: 5px !important; }
.mb10{ margin-bottom: 10px !important; }
.mb15{ margin-bottom: 15px !important; }
.mb20{ margin-bottom: 20px !important; }
.mb25{ margin-bottom: 25px !important; }
.mb30{ margin-bottom: 30px !important; }
.mb35{ margin-bottom: 35px !important; }
.mb40{ margin-bottom: 40px !important; }
.mb45{ margin-bottom: 45px !important; }
.mb50{ margin-bottom: 50px !important; }
.mb55{ margin-bottom: 55px !important; }
.mb60{ margin-bottom: 60px !important; }
.mb70{ margin-bottom: 70px !important; }
.mb80{ margin-bottom: 80px !important; }
.mb90{ margin-bottom: 90px !important; }
.mb100{ margin-bottom: 100px !important; }

.mb-5{ margin-bottom: -5px !important; }
.mb-10{ margin-bottom: -10px !important; }

.mr0{ margin-right: 0 !important; }
.mr1{ margin-right: 1px !important; }
.mr2{ margin-right: 2px !important; }
.mr3{ margin-right: 3px !important; }
.mr4{ margin-right: 4px !important; }
.mr5{ margin-right: 5px !important; }
.mr10{ margin-right: 10px !important; }
.mr15{ margin-right: 15px !important; }
.mr20{ margin-right: 20px !important; }

.ml0{ margin-left: 0 !important; }
.ml1{ margin-left: 1px !important; }
.ml2{ margin-left: 2px !important; }
.ml3{ margin-left: 3px !important; }
.ml4{ margin-left: 4px !important; }
.ml5{ margin-left: 5px !important; }
.ml10{ margin-left: 10px !important; }
.ml15{ margin-left: 15px !important; }
.ml20{ margin-left: 20px !important; }

.p0{ padding: 0 !important; }
.p5{ padding: 5px !important; }
.p10{ padding: 10px !important; }
.p15{ padding: 15px !important; }
.p20{ padding: 20px !important; }
.p25{ padding: 25px !important; }
.p30{ padding: 30px !important; }

.pt0{ padding-top: 0 !important; }
.pt5{ padding-top: 5px !important; }
.pt10{ padding-top: 10px !important; }
.pt15{ padding-top: 15px !important; }
.pt20{ padding-top: 20px !important; }
.pt25{ padding-top: 25px !important; }
.pt30{ padding-top: 30px !important; }
.pt35{ padding-top: 35px !important; }
.pt40{ padding-top: 40px !important; }
.pt45{ padding-top: 45px !important; }
.pt50{ padding-top: 50px !important; }
.pt55{ padding-top: 55px !important; }
.pt60{ padding-top: 60px !important; }
.pt70{ padding-top: 70px !important; }
.pt80{ padding-top: 80px !important; }
.pt90{ padding-top: 90px !important; }
.pt100{ padding-top: 100px !important; }

.pb0{ padding-bottom: 0 !important;}
.pb5{ padding-bottom: 5px !important; }
.pb10{ padding-bottom: 10px !important; }
.pb15{ padding-bottom: 15px !important; }
.pb20{ padding-bottom: 20px !important; }
.pb25{ padding-bottom: 25px !important; }
.pb25{ padding-bottom: 25px !important; }
.pb30{ padding-bottom: 30px !important; }
.pb35{ padding-bottom: 35px !important; }
.pb40{ padding-bottom: 40px !important; }
.pb45{ padding-bottom: 45px !important; }
.pb50{ padding-bottom: 50px !important; }
.pb55{ padding-bottom: 55px !important; }
.pb60{ padding-bottom: 60px !important; }
.pb70{ padding-bottom: 70px !important; }
.pb80{ padding-bottom: 80px !important; }
.pb90{ padding-bottom: 90px !important; }
.pb100{ padding-bottom: 100px !important; }

.pr0{ padding-right: 0 !important; }
.pr1{ padding-right: 1px !important; }
.pr2{ padding-right: 2px !important; }
.pr3{ padding-right: 3px !important; }
.pr4{ padding-right: 4px !important; }
.pr5{ padding-right: 5px !important; }
.pr10{ padding-right: 10px !important; }
.pr15{ padding-right: 15px !important; }
.pr20{ padding-right: 20px !important; }

.pl0{ padding-left: 0 !important; }
.pl1{ padding-left: 1px !important; }
.pl2{ padding-left: 2px !important; }
.pl3{ padding-left: 3px !important; }
.pl4{ padding-left: 4px !important; }
.pl5{ padding-left: 5px !important; }
.pl10{ padding-left: 10px !important; }
.pl15{ padding-left: 15px !important; }
.pl20{ padding-left: 20px !important; }

/* ================================
　　　　　　　　　文字
================================= */

.fs10{ font-size: 10px !important; }
.fs12{ font-size: 12px !important; }
.fs13{ font-size: 13px !important; }
.fs14{ font-size: 14px !important; }
.fs15{ font-size: 15px !important; }
.fs16{ font-size: 16px !important; }
.fs18{ font-size: 18px !important; }
.fs20{ font-size: 20px !important; }
.fs22{ font-size: 22px !important; }
.fs24{ font-size: 24px !important; }
.fs26{ font-size: 26px !important; }
.fs28{ font-size: 28px !important; }
.fs30{ font-size: 30px !important; }
.fs32{ font-size: 32px !important; }
.fs34{ font-size: 34px !important; }
.fs36{ font-size: 36px !important; }
.fs38{ font-size: 38px !important; }
.fs40{ font-size: 40px !important; }

.fwn{ font-weight: normal; }
.fwb{ font-weight: bold; }
.fw100{ font-weight: 100; }
.fw200{ font-weight: 200; }
.fw300{ font-weight: 300; }
.fw400{ font-weight: 400; }
.fw500{ font-weight: 500; }
.fw600{ font-weight: 600; }
.fw700{ font-weight: 700; }
.fw800{ font-weight: 800; }
.fw900{ font-weight: 900; }

.text-underline{ text-decoration: underline; }
.text-through{ text-decoration: line-through; }

/* ================================
　　　　　　　　　行間
================================= */

.lh10{ line-height: 10px !important; }
.lh20{ line-height: 20px !important; }
.lh30{ line-height: 30px !important; }
.lh40{ line-height: 40px !important; }
.lh50{ line-height: 50px !important; }

/* ================================
　　　　　　　　　配置
================================= */

.text-center{ text-align: center; }
.text-right{ text-align: right; }
.text-left{ text-align: left; }
.text-justify{ text-align: justify; }

.flex-center{ justify-content: center; }
.flex-start{ justify-content: start; }
.flex-end{ justify-content: end; }
.flex-between{ justify-content: space-between; }
.flex-around{ justify-content: space-around; }
.flex-evenly{ justify-content: space-evenly; }

/* ================================
　　　　　　　　　その他
================================= */

.link-invalid{ pointer-events: none; }
.hide{ display: none; }
.show{ display: block; }
.list-none{ list-style: none; }

.line-clamp1{ overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1; }
.line-clamp2{ overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; }
.line-clamp3{ overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3; }

.marker{ background: linear-gradient(transparent 10%, #F9F9D6 10% 90%, transparent 90%); }


/* SP表示：商品グループ横幅100％用 */
@media screen and (max-width:767px){
  .width100-n1 > li:nth-child(-n+1){flex:0 0 100%;}
  .width100-n2 > li:nth-child(-n+2){flex:0 0 100%;}
  .width100-n3 > li:nth-child(-n+3){flex:0 0 100%;}
}