body {
    background-color: black;
    background-image: url(image/bg1.png);
  }
  @font-face {
  font-family: roman;
  src: url(https://dl.dropbox.com/s/f9cfrx4wyt13rwv/ROMANTIC.TTF);
  }
  @font-face {
  font-family:'kiwi';
  src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
  }

/* this is for index page*/

  #one{
    width: 600px;
    height: 65px;
    border: 4px solid #fdbdd8;
    border-radius:  25px 0 0 25px ;
    color: pink;
    background-color:#fdbdd8 ;
    filter: blur(2px);
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10em;
  }
  
  #two{
    width: 550px;
    height: 300px;
    border: 4px solid #fdbdd8;
    border-radius: 0 0 25px 25px;
    color: red;
    background-color: white;
    filter: blur(2px);
    display: block;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
  
  }
  #three{
      width: 550px;
      height: 290px;
      padding-top: 10px;
      border-radius: 0 0 25px 25px;
      color: pink;
      filter: blur(.25px);
      display: block;
      margin-top: -12.25em;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      font-size: 25px; 
      font-family: 'kiwi';
      color: #fdbdd8;
    }
  #four{
    font-size: 35px;
    font-family: 'kiwi';
    color: #AC5077;
    text-align: center;
    display: block;
    margin-top: -1.75em;
    margin-left: auto;
    margin-right: 5em;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
    font-style: italic;
    filter: blur(.5px);
    font-weight:bold; 
      animation-name: floating;
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-timing-function: ease-in-out;
      
  }
  
  @keyframes floating {
      0% { transform: translate(0,  0px); }
      50%  { transform: translate(0, 15px); }
      100%   { transform: translate(0, -0px); }    
  }
  @media(orientation: portrait){
    body{
      width: 400px;
      height: auto;


    }


  }
    /* this is for home page*/
    
    .grid-container {
      display: grid;
      grid-template-columns: 300px 600px 300px;
      gap: -5px -5px;
      width: 1200px;
      padding: 10px;
      margin-left:auto;
      margin-right:auto;

    }
    .grid-item {
      padding: 20px;
      font-size: 30px;
      text-align: center;
      font-family: 'kiwi';
      color: #fdbdd8;
    }
    .box21 {
      margin:1em 0; /* 中央寄せは0をautoに変更 */
      width:100%;
      height: 100%;
      }
      .u01 {
      background:url(image/f-ue.gif) repeat-x;
      height:23px;
      margin:0 23px
      }
      .s01 {
      background:url(image/f-sita.gif) repeat-x;
      height:23px;
      margin:0 23px
      }
      .box-top {
      background-image:url(image/f-kado1.gif), url(image/f-kado2.gif);
      background-position:top left, top right;
      background-repeat:no-repeat, no-repeat;
      height:23px
      }
      .box-center {
      background-image:url(image/f-migi.gif), url(image/f-hidari.gif);
      background-position:top right, top left;
      background-repeat:repeat-y, repeat-y
      }
      .box-inner {
      background:#fff; /* 背景色 */
      margin:0 23px
      }
      .box-bottom {
      background-image:url(image/f-kado3.gif), url(image/f-kado4.gif);
      background-position:top left, top right;
      background-repeat:no-repeat, no-repeat;
      height:23px
      }