/*.....................................................................
	layout.css
	version v1
	copylight petarna co.,ltd.
	date 2017.10.01
	
	update 2017.10.23 基底の[data-layout|="row"]にmax-height: 100%;と[data-layout|="row"] > *にheight: inherit;追加
.....................................................................*/

/* 
  カラムレイアウト基本設定

  基底値 row
  <elm data-layout="row">
    <elm>...</elm>
    <elm>...</elm>
    ...
  </elm>
=======================================================================*/

/*
  基底
.....................................................................*/
[data-layout|="row"] {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  max-height: 100%;
}

[data-layout|="row"] > * {
  width: 100%;
}

/*
  継承 (並び右から左へ)
.....................................................................*/
[data-layout|="row-reverse"] {
  flex-direction: row-reverse;
}

/*
  継承 上揃え
.....................................................................*/
[data-layout|="row-top"] {
  align-items: flex-start;
}

/*
  継承 中央揃え
.....................................................................*/
[data-layout|="row-center"] {
  align-items: center;
}

/*
  継承 下揃え
.....................................................................*/
[data-layout|="row-bottom"] {
  align-items:flex-end;
}

/*
  継承 中央揃え
.....................................................................*/
[data-layout|="row-center-center"] {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
  align-items: center;
}

/*
  スペース
=======================================================================*/

/*
  スペース 左
.....................................................................*/
[data-attr*="spl-1"]  { margin-left:1%; }
[data-attr*="spl-2"]  { margin-left:2%; }
[data-attr*="spl-3"]  { margin-left:3%; }
[data-attr*="spl-4"]  { margin-left:4%; }
[data-attr*="spl-5"]  { margin-left:5%; }
[data-attr*="spl-10"] { margin-left:10%; }
[data-attr*="spl-15"] { margin-left:15%; }
[data-attr*="spl-20"] { margin-left:20%; }
[data-attr*="spl-25"] { margin-left:25%; }
[data-attr*="spl-30"] { margin-left:30%; }
[data-attr*="spl-35"] { margin-left:35%; }
[data-attr*="spl-40"] { margin-left:40%; }
[data-attr*="spl-45"] { margin-left:45%; }
[data-attr*="spl-50"] { margin-left:50%; }
[data-attr*="spl-55"] { margin-left:55%; }
[data-attr*="spl-60"] { margin-left:60%; }
[data-attr*="spl-65"] { margin-left:65%; }
[data-attr*="spl-70"] { margin-left:70%; }
[data-attr*="spl-75"] { margin-left:75%; }
[data-attr*="spl-80"] { margin-left:80%; }
[data-attr*="spl-85"] { margin-left:85%; }
[data-attr*="spl-90"] { margin-left:90%; }
[data-attr*="spl-95"] { margin-left:95%; }

/*
  スペース 右
.....................................................................*/
[data-attr*="spr-1"]  { margin-right:1%; }
[data-attr*="spr-2"]  { margin-right:2%; }
[data-attr*="spr-3"]  { margin-right:3%; }
[data-attr*="spr-4"]  { margin-right:4%; }
[data-attr*="spr-5"]  { margin-right:5%; }
[data-attr*="spr-10"] { margin-right:10%; }
[data-attr*="spr-15"] { margin-right:15%; }
[data-attr*="spr-20"] { margin-right:20%; }
[data-attr*="spr-25"] { margin-right:25%; }
[data-attr*="spr-30"] { margin-right:30%; }
[data-attr*="spr-35"] { margin-right:35%; }
[data-attr*="spr-40"] { margin-right:40%; }
[data-attr*="spr-45"] { margin-right:45%; }
[data-attr*="spr-50"] { margin-right:50%; }
[data-attr*="spr-55"] { margin-right:55%; }
[data-attr*="spr-60"] { margin-right:60%; }
[data-attr*="spr-65"] { margin-right:65%; }
[data-attr*="spr-70"] { margin-right:70%; }
[data-attr*="spr-75"] { margin-right:75%; }
[data-attr*="spr-80"] { margin-right:80%; }
[data-attr*="spr-85"] { margin-right:85%; }
[data-attr*="spr-90"] { margin-right:90%; }
[data-attr*="spr-95"] { margin-right:95%; }

/*
  左右スペース 子要素一括
.....................................................................*/
[data-attr*="childSpaceLeftRight-1"] > * { margin-left:1%; margin-right:1%; }
[data-attr*="childSpaceLeftRight-2"] > * { margin-left:2%; margin-right:2%; }
[data-attr*="childSpaceLeftRight-3"] > * { margin-left:3%; margin-right:3%; }
[data-attr*="childSpaceLeftRight-4"] > * { margin-left:4%; margin-right:4%; }
[data-attr*="childSpaceLeftRight-5"] > * { margin-left:5%; margin-right:5%; }
[data-attr*="childSpaceLeftRight-10"] > * { margin-left:10%; margin-right:10%; }

[data-attr*="childSpaceLeftRight-"] > *:first-child {
  margin-left: 0;
}

[data-attr*="childSpaceLeftRight-"] > *:last-child {
  margin-right: 0;
}

/*
  左スペース 子要素一括
.....................................................................*/
[data-attr*="childSpaceLeft-1"] > * { margin-left:1%; }
[data-attr*="childSpaceLeft-2"] > * { margin-left:2%; }
[data-attr*="childSpaceLeft-3"] > * { margin-left:3%; }
[data-attr*="childSpaceLeft-4"] > * { margin-left:4%; }
[data-attr*="childSpaceLeft-5"] > * { margin-left:5%; }
[data-attr*="childSpaceLeft-10"] > * { margin-left:10%; }

/*
  右スペース 子要素一括
.....................................................................*/
[data-attr*="childSpaceRight-1"] > * { margin-right:1%; }
[data-attr*="childSpaceRight-2"] > * { margin-right:2%; }
[data-attr*="childSpaceRight-3"] > * { margin-right:3%; }
[data-attr*="childSpaceRight-4"] > * { margin-right:4%; }
[data-attr*="childSpaceRight-5"] > * { margin-right:5%; }
[data-attr*="childSpaceRight-10"] > * { margin-right:10%; }

/*
  幅 固定 w-00 レスポンシブ rw-00
.....................................................................*/
[data-attr*="w-5"],  [data-attr*="rw-5"]  { width: 5%;  }
[data-attr*="w-10"], [data-attr*="rw-10"] { width: 10%; }
[data-attr*="w-14"], [data-attr*="rw-14"] { width: 14%; }
[data-attr*="w-15"], [data-attr*="rw-15"] { width: 15%; }
[data-attr*="w-16"], [data-attr*="rw-16"] { width: 16.666%; }
[data-attr*="w-20"], [data-attr*="rw-20"] { width: 20%; }
[data-attr*="w-25"], [data-attr*="rw-25"] { width: 25%; }
[data-attr*="w-30"], [data-attr*="rw-30"] { width: 30%; }
[data-attr*="w-33"], [data-attr*="rw-33"] { width: 33.333%; }
[data-attr*="w-35"], [data-attr*="rw-35"] { width: 35%; }
[data-attr*="w-40"], [data-attr*="rw-40"] { width: 40%; }
[data-attr*="w-45"], [data-attr*="rw-45"] { width: 45%; }
[data-attr*="w-50"], [data-attr*="rw-50"] { width: 50%; }
[data-attr*="w-55"], [data-attr*="rw-55"] { width: 55%; }
[data-attr*="w-60"], [data-attr*="rw-60"] { width: 60%; }
[data-attr*="w-65"], [data-attr*="rw-65"] { width: 65%; }
[data-attr*="w-70"], [data-attr*="rw-70"] { width: 70%; }
[data-attr*="w-75"], [data-attr*="rw-75"] { width: 75%; }
[data-attr*="w-80"], [data-attr*="rw-80"] { width: 80%; }
[data-attr*="w-85"], [data-attr*="rw-85"] { width: 85%; }
[data-attr*="w-90"], [data-attr*="rw-90"] { width: 90%; }
[data-attr*="w-95"], [data-attr*="rw-95"] { width: 95%; }
[data-attr*="w-100"],[data-attr*="rw-100"]{ width: 100%;}

/*
  デバイス 769px~
=======================================================================*/
@media screen and (min-width: 769px) {

}

/*
  デバイス 0px~1024px
=======================================================================*/
@media screen and (max-width: 1024px) {

/*
  基底の変更
.....................................................................*/
[data-layout|="row"] {
  position: relative;
  flex-wrap: wrap;
}

/*
  スペース 子要素一括の変更
.....................................................................*/
[data-attr*="childSpaceLeftRight-"] > * {
  margin-left:0;
  margin-right:0;
}

/*
  幅 レスポンシブ rw-00 の変更
.....................................................................*/
[data-attr*="rw-"] {
  width: 100%;
}

/*
  左スペース
.....................................................................*/
[data-attr*="spl-"] {
  margin-left:0;
}

/*
  右スペース
.....................................................................*/
[data-attr*="spr-"] {
  margin-right:0;
}

}

/*
  デバイス 425px~768px
=======================================================================*/
@media screen and (min-width: 426px) and (max-width: 768px) {

}

/*
  デバイス ~425px
=======================================================================*/
@media screen and (max-width: 425px) {


}