/* SQUARE */
/*表示最適化*/
*{
  font-size: calc(100vw / 24);
}
body{  
  width: 24em;
  margin: 0 auto;
}
@media screen and (min-width: 480px){
  *{
    font-size: 20px;
  }
  body{
    width: 480px;
  }
}
@media screen and (min-width: 768px){
  *{
    font-size: calc(20px + (100vw - 480px) / 96);
  }
  body{
    width: 24em;
  }
}
*{
  box-sizing : border-box;
  margin : 0;
  padding : 0;
  line-height : 1rem;
}
body{  
  width : 24rem;
  margin : 0 auto;
   -webkit-text-size-adjust : 100%;
  word-break : break-all;
}
img{
  max-width : 100%;
  max-height : 100%;
  vertical-align : middle;
}
a{
  text-decoration : none;
}
ul , ol , li{
  list-style : none;
}
p{
  width : 100%;
}
hr{
  border : solid 0.05rem #efefef;
}

:root{
  --w : 100%;
  --h : auto;
  --p : 0;
  --m : 0;
  --split : 24;
  --sticky : 0;
  --txt : left;
  --bg-c : #888;
  --clr : #888;
  --bd : 1px solid #000;
  --bd-r : 50%;
  --shadow : 0;
  --side : wrap;
  --box : block;
}
[style *= "--w"]{
  width : var(--w);
}
[style *= "--h"]{
  height : var(--h);
}
[style *= "--p"]{
  padding : var(--p);
}
[style *= "--m"]{
  margin : var(--m);
}
[style *= "--sticky"]{
  position : -webkit-sticky;
  position : sticky;
  z-index : 9999;
  top : calc(var(--sticky) * 1rem);
}
[style *= "--box"]{
  display : var(--box);
}
[style *= "--split"] ,
[style *= "--split"] *{
  font-size : calc(24rem / var(--split));
}
[style *= "--txt"]{
  text-align : var(--txt);
}
[style *= "--bg-c"]{
  background-color : var(--bg-c);
}
[style *= "--clr"] ,
[style *= "--clr"] *{
  color : var(--clr);
}
[style *= "--bd"]{
  border : var(--bd);
}
[style *= "--bd-r"]{
  border-radius : var(--bd-r);
}
[style *= "--shadow"]{
  box-shadow : var(--shadow);
}
[style *= "--side"]{
  display : -webkit-flex;
  display : flex;
  flex-wrap : var(--side);
}

/* LIST SYSTEM */
ol , ul{
  --li-w : 100%;
  --li-h : 100%;
  --li-m : 0;
  --li-p : 0;
}
[style *= "--li-w"]>li{
  width : calc(0.999 * var(--li-w) * 1rem);
}
[style *= "--li-h"]>li{
  height : calc(0.999 * var(--li-h) * 1rem);
}
[style *= "--li-p"]>li{
  padding : var(--li-p);
}
[style *= "--li-m"]>li{
  margin : var(--li-m);
}