@charset "utf-8";

/* common */
/* small screen */
@media (max-width: 849.9px) {
html {
 width: 350px;
 height: 300px;
 margin-left: auto;
 margin-right: auto;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
 background-color: #C0C0C0;
 border: 0;
 padding: 0;
}
.box1 {
 width: 100%;
 height: 100%;
 background-image: url("../img/yoake.png");
background-repeat: no-repeat;
background-size: cover;
}

.box2 {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
padding: 20px;
}

.box3{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  padding: 0;
 }

.p1 {
font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシチE��  Medium', meiryo,serif;
font-size: 150%;
position: top left;
color: white;
}

.p2 {
font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシチE��  Medium', meiryo,serif;
 font-size: 130%;
position: top left;
color: white;
}

.p3 {
font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシチE��  Medium', meiryo,serif;
 font-size: 75%;
 color: white;
}
}
/* large screen */
@media (min-width: 850px) {
html {
    width: 800px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    background-color: #C0C0C0;
   }
   .box1 {
    width: 100%;
    height: 100%;
    background-image: url("../img/yoake.png");
    background-repeat: no-repeat;
    background-size: cover;
    }
   
   .box2 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   padding: 20px;
   }

   .box3{
    position: absolute;
    left: 50%;
    transform:translateX(-50%) translateY(-100%);
    padding: 0;
   }
   
   .p1 {
   font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシチE��  Medium', meiryo,serif;
   font-size: 250%;
   position: top left;
   color: white;
   }
   
   .p2 {
   font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシチE��  Medium', meiryo,serif;
    font-size: 200%;
   position: top left;
   color: white;
   }
   
   .p3 {
   font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシチE��  Medium', meiryo,serif;
    font-size: 140%;
    color: white;
   }
}