@charset "UTF-8";
/* ===========================================
   FLEX GRID SYSTEM sw grid
   =========================================== */

/* ---- GAP プリセット ---- */
.wrap {
--gap: 20px;
}
.wrap.s-gap { --gap: 8px; }
.wrap.m-gap { --gap: 40px; }
.wrap.l-gap { --gap: 100px; }
.wrap.no-gap{ --gap: 0px; }

@media (min-width:1044px) {
.wrap{
--gap:20px;/*大画面だけ変更する場合ここを変更*/
}
}



/* ---- Flex 基本設定 ---- */
.wrap {
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap);
}

/* ---- 幅計算（全 wide-12-* に適用） ---- */
.wrap > [class*="wide-12-"] {
  flex: 0 0 calc((100% - (var(--gap) * (var(--cols,1) - 1))) / var(--cols,1));
min-width: 0;               
  overflow-wrap: anywhere;          
  word-break: break-word;          
}

/* ---- 整列オプション ---- */
.wrap.j-center {
	justify-content:center;
}
.wrap.j-between{
	justify-content: space-between;
}
.wrap.j-end{
	justify-content: flex-end;
}
.wrap.a-center{
	align-items: center;
}
.wrap.top    {
	align-items:flex-start;
}
.wrap.card-equal > * {
  display:flex;
  flex-direction:column;
}



/*配置など*/




.order-1s{
	-ms-flex-order:1;
    -webkit-order:1;
    -webkit-box-ordinal-group:2;
       -moz-box-ordinal-group:2;
	        order:1;
}
.order-2s{
	-ms-flex-order:2;
    -webkit-order:2;
    -webkit-box-ordinal-group:3;
       -moz-box-ordinal-group:3;
	        order:2;
}
.order-3s{
	-ms-flex-order:3;
    -webkit-order:3;
    -webkit-box-ordinal-group:4;
       -moz-box-ordinal-group:4;
	        order:3;
}
.order-4s{
	-ms-flex-order:4;
    -webkit-order:4;
    -webkit-box-ordinal-group:5;
       -moz-box-ordinal-group:5;
	        order:4;
}



/* =====================================================
   ブレークポイント
   s   : モバイル（基本）
   ms  : スマホ横向き
   m   : タブレット以上 (>=835px)
   l   : PC以上(>=1024px)
   xl  : 大画面PC以上(>=1440px)
   ===================================================== */


/* ---- モバイル縦（ベース / s）---- */
.wide-12-12s { --cols:1; }
.wide-12-6s  { --cols:2; }
.wide-12-4s  { --cols:3; }
.wide-12-3s  { --cols:4; }
.wide-12-2s  { --cols:6; }
.wide-12-1s  { --cols:12; }

/* 追加した分数クラス */
.wide-12-5s  { --cols: calc(12 / 5); }
.wide-12-7s  { --cols: calc(12 / 7); }
.wide-12-8s  { --cols: calc(12 / 8); }
.wide-12-9s  { --cols: calc(12 / 9); }
.wide-12-10s { --cols: calc(12 / 10); }
.wide-12-11s { --cols: calc(12 / 11); }


/* ---- スマホ横向き（ms）---- */
@media screen and (max-width:900px) and (orientation:landscape){
  .wide-12-12ms { --cols:1; }
  .wide-12-6ms  { --cols:2; }
  .wide-12-4ms  { --cols:3; }
  .wide-12-3ms  { --cols:4; }
  .wide-12-2ms  { --cols:6; }
  .wide-12-1ms  { --cols:12; }

  .wide-12-5ms  { --cols: calc(12 / 5); }
  .wide-12-7ms  { --cols: calc(12 / 7); }
  .wide-12-8ms  { --cols: calc(12 / 8); }
  .wide-12-9ms  { --cols: calc(12 / 9); }
  .wide-12-10ms { --cols: calc(12 / 10); }
  .wide-12-11ms { --cols: calc(12 / 11); }
}


/* ---- タブレット（m / 835px～）---- */
@media screen and (min-width:835px){
  .wide-12-12m { --cols:1; }
  .wide-12-6m  { --cols:2; }
  .wide-12-4m  { --cols:3; }
  .wide-12-3m  { --cols:4; }
  .wide-12-2m  { --cols:6; }
  .wide-12-1m  { --cols:12; }

  .wide-12-5m  { --cols: calc(12 / 5); }
  .wide-12-7m  { --cols: calc(12 / 7); }
  .wide-12-8m  { --cols: calc(12 / 8); }
  .wide-12-9m  { --cols: calc(12 / 9); }
  .wide-12-10m { --cols: calc(12 / 10); }
  .wide-12-11m { --cols: calc(12 / 11); }
}


/* ---- PC（l / 1024px～）---- */
@media screen and (min-width:1024px){
  .wide-12-12l { --cols:1; }
  .wide-12-6l  { --cols:2; }
  .wide-12-4l  { --cols:3; }
  .wide-12-3l  { --cols:4; }
  .wide-12-2l  { --cols:6; }
  .wide-12-1l  { --cols:12; }

  .wide-12-5l  { --cols: calc(12 / 5); }
  .wide-12-7l  { --cols: calc(12 / 7); }
  .wide-12-8l  { --cols: calc(12 / 8); }
  .wide-12-9l  { --cols: calc(12 / 9); }
  .wide-12-10l { --cols: calc(12 / 10); }
  .wide-12-11l { --cols: calc(12 / 11); }
}


/* ---- 大画面 PC（xl / 1440px～）---- */
@media screen and (min-width:1440px){
  .wide-12-12 { --cols:1; }
  .wide-12-6  { --cols:2; }
  .wide-12-4  { --cols:3; }
  .wide-12-3  { --cols:4; }
  .wide-12-2  { --cols:6; }
  .wide-12-1  { --cols:12; }

  .wide-12-5  { --cols: calc(12 / 5); }
  .wide-12-7  { --cols: calc(12 / 7); }
  .wide-12-8  { --cols: calc(12 / 8); }
  .wide-12-9  { --cols: calc(12 / 9); }
  .wide-12-10 { --cols: calc(12 / 10); }
  .wide-12-11 { --cols: calc(12 / 11); }
	
}