/* css for hp_build 4 */
html {
       font-size:16px;
       }
body {
       width:100%; 
       color:ivory;
       font-family: "メイリオ", "Meiryo", sans-serif;
       background-color:slategray;
       max-width:800px;
       margin:auto;
       }
h1   {
       color:pink;
       font-size:1.2rem;
       text-align:center;
       letter-spacing:2px;
       margin:20px auto 10px auto;
       padding:20px 20px 10px 20px;
       text-shadow:1px 2px 2px black;
       }  
p     {padding:0px;margin:0px;color:black;}
/*  */
#div_root {
      width:95%;
      abackground-color:ivory;
      margin:8px auto 8px auto;
      }
#div_text {
      width:90%;
      margin:10px auto 20px auto;
      padding:10px;
      clear:left;
      }
#div_text p {
      text-align:left;
      color:black;
      }

/* box define */

#box0 {
      width:95%;
      height:200px;
      margin:10px auto 10px auto;
      color:red;
      font-weight:700;
      display:flex;
      justify-content:center;
      }
#box1 {
       background-color:lightblue;  
       }
#box2 {
       background-color:yellow;     
       }
#box2 img {
       width:40%;
       float:right;
       }
#box3 {
       background-color:lavender;     
       }
#box2 {
       width:50%;
       }
#box2 p {
       color:black;
       } 
#box1 , #box3 {
       width:24%;
       }
#box1 , #box2 , #box3 {
       padding:10px;
       border-radius:5px;
       }
#box1 ul , #box3 ul  {
       width:80%;
       text-align:left;
       margin:auto;
       padding:0px;
       color:black;
       list-style-type:decimal;
       list-style-position:inside;
       }
#box1 li , #box3 li  {
       border:1px solid blue;
       margin:10px auto 10px 10px;
       box-shadow:1px 2px 2px black;
       }

/*------------- mobile responsive -------*/
@media screen and (max-width: 414px) 
{ 
       h1   {
              font-size:1.0rem;
      }
      #box0 {
                      display:flex;
                      flex-direction : column ;
                      justify-content:center;
                      height:400px;
      }
      #box1 , #box2 , #box3 {
                     width:95%;
      }
      #box1 {
                       order:2;
                       height:30%;
       }
      #box2 {
                       order:1;
                       height:40%;
       }
     #box2 img {
                      width:30%;
       }
      #box3 {
                      order:3;
                      height:30%;
       }
      #box1 ul , #box3 ul  {
                       width:50%;
       }
}

/* -----------------------------------*/