body {
  background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
  text-shadow: 0px -1px 1px rgba(0,0,0,0.7);
}

.box4{text-align:center;}

.box1 {
 font-size:50px;
text-align:center;
    padding:0.5em 1em;
    margin: 0.5em 0.5em;
    border:double 10px #87cefa
}
.box1 p {
    margin: 0; 
    padding: 0;

}
.box2 {
 font-size:30px;
text-align:center;
    padding:2em 1em;
    margin: 5em 5em;
    border: solid 10px #87cefa
    
}
.box2 p {
    margin: 0; 
    padding: 0;

}


#menu {
  width: 800px;
  height: 45px;
  padding: 0;
  margin: auto;
  list-style-type: none;
  background: #483d8b;
  box-shadow: 3px 3px 3px #aaa;
}
#menu li {
  width: 25%;
  float: left;
  padding: 0;
  margin: 0;
  text-align:center;
}
#menu li a {
  width:auto;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 12px 0;
  text-decoration: none;
  text-shadow: 0px -1px 1px rgba(0,0,0,0.7);
  display: block;
}
#menu li a:hover {
  background: #ffa500;
}

/*画像の上に文字を表示する*/
.example {
  position: relative;
  }

.example p {
  position: absolute;
  top: 80%;
  left: 80%;
  color: black;
  font-weight: bold; /*太字に*/
  font-size: 60px;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  /*文字の装飾は省略*/
  }

.example img {
  width: 100%;
  }
/*ここまで*/


/* トリミング */
/* トリミングしたいサイズで枠を作る */
.trim {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
/* 中央に合わせてトリミング */
.trim img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*ここまで*/