@charset "utf-8";

/* トップ */
html{font-family: 'Dancing Script', cursive;
font-family: 'Josefin Sans', sans-serif;
scroll-behavior: smooth;
}
.nav span{font-size: 150%;}
.message span{color: red;font-size: 120%;}
.message span.e{color: orange;}
body{
  background-image:radial-gradient(#f9e900,#ffffff);
}
article{
  width: 100%;
  height: 180vh;
  background-color: black;
  -webkit-clip-path: polygon(0 0,100% 15%,100% 85%,0 100%);
  clip-path: polygon(0 0,100% 15%,100% 85%,0 100%);
}
.toppage{
  justify-content: space-between;
}
h1{
  color: white;
  justify-content: left;
  font-size: 700%;
  margin-top: 0%;
  margin-right: 10%;
  margin-left: 5%;
  padding-top: 3%;
  line-height: 1;
  width: 10%;
  white-space: nowrap;
  overflow: hidden;
  animation: jojo
  7s linear
  infinite;
  text-shadow:
  0 0.03em 0.03em #FFAB91,
  0 0.03em 0.03em #000,
  0 0.03em 0.03em #FBE9E7;
}
@keyframes jojo {
  from{
    width: 0%;
    opacity: 0;
  }
  to{
    width: 100%;
    opacity: 1;
}
}
h2{
  color: white;
  justify-content: center;
  font-size: 200%;
  margin-top: 5%;
  margin-left: 5%;
  margin-bottom: 2%;
  text-shadow:
  0 0.1em 0.1em #FFAB91,
  0 0.1em 0.1em #000,
  0 0.1em 0.1em #FBE9E7;
}
h3{
  color: white;
  justify-content: center;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 1%;
  font-size: 100%;
  min-width: 95%;
}
a:hover{
  color:#4699ca;
}
.nav li{
  list-style-type: none;
  padding: 25px 0px 0px 25px;
  color:white;
  font-size: 120%;
  margin: 0px 0px 0px 20px;
  font-weight: bold;
  font-style: italic;
  z-index: 10010;
}
span.f{
  font-size:3em;
  color: white;
  position: absolute;
  top: 900px;
  left: 700px;
}
.s{
  font-size: .4em;
}
.lifestyle{width:35%; position:absolute; top:700px; left:600px;opacity: .5;}
.lifestyle img{
  height: 300px;
  width:400px;
  max-width:50%;
}

/* 1200px以下画面に適用 */
@media screen and (max-width: 1200px) {
  article{
    width: 100%;
    height: 200vh;
    background-color: black;
    -webkit-clip-path: polygon(0 0,100% 15%,100% 85%,0 100%);
    clip-path: polygon(0 0,100% 15%,100% 85%,0 100%);
  }
  .toppage{
    justify-content: space-between;
  }
  .lifestyle{width:35%; position:absolute; top:700px; left:580px;opacity: .5;}
  .lifestyle img{
    height: 300px;
    width:600px;
    max-width:70%;
  }
  .message span{color: red;font-size: 105%;}
  .message span.e{color: orange;}
  h1{
    color: white;
    justify-content: center;
    font-size: 700%;
    margin-top: 0%;
    margin-right: 10%;
    margin-left: 5%;
    line-height: 1;
    padding-top: 5%;
  }
  h1.message{
    padding-top: 20%;
  }
}
span.f{
  font-size:3em;
  color: white;
  position: absolute;
  top: 800px;
  left: 500px;
}

/* 750px以下画面に適用 */
@media screen and (max-width: 960px) {
  article{
    width: 100%;
    height: 100vh;
    background-color: black;
    -webkit-clip-path: polygon(0 0,100% 15%,100% 85%,0 100%);
    clip-path: polygon(0 0,100% 15%,100% 85%,0 100%);
  }
  .toppage{
    justify-content: space-between;
  }
  .lifestyle{width:35%; position:absolute; top:700px; left:580px;opacity: .5;}
  .lifestyle img{
    height: 300px;
    width:600px;
    max-width:70%;
  }
  .message span{color: red;font-size: 105%;}
  .message span.e{color: orange;}
  h1{
    color: white;
    justify-content: center;
    font-size: 700%;
    margin-top: 0%;
    margin-right: 10%;
    margin-left: 5%;
    line-height: 1;
    padding-top: 5%;
  }
  h1.message{
    padding-top: 20%;
  }
}
span.f{
  font-size:3em;
  color: white;
  position: absolute;
  top: 800px;
  left: 500px;
}

/* 600px以下画面に適用 */
@media screen and (max-width: 599px) {
  html{font-family: 'Dancing Script', cursive;
  font-family: 'Josefin Sans', sans-serif;
    scroll-behavior: smooth;
  }
  .message span{color: red;font-size: 105%;}
  .message span.e{color: orange;}
  body{
    background-image:radial-gradient(#f9e900,#ffffff);
  }
  article{
    width: 100%;
    height: 220vh;
    background-color: black;
    -webkit-clip-path: polygon(0 0,100% 10%,100% 90%,0 100%);
    clip-path: polygon(0 0,100% 10%,100% 90%,0 100%);
  }
  .toppage{
    justify-content: space-between;
  }
  h1{
    color: white;
    justify-content: center;
    font-size: 400%;
    margin-top: 0%;
    margin-right: 10%;
    margin-left: 5%;
  }
  h1.message{
    padding-bottom: 10px;
    padding-top: 120px;
    padding-left: 30px;
    padding-right: 10px;
    width: 10%;
    white-space: nowrap;
    overflow: hidden;
    animation: jojo
    7s linear
    infinite;
    text-shadow:
    0 0.03em 0.03em #FFAB91,
    0 0.03em 0.03em #000,
    0 0.03em 0.03em #FBE9E7;
  }
  @keyframes jojo {
    from{
      width: 0%;
      opacity: 0;
    }
    to{
      width: 100%;
      opacity: 1;
  }
}
  h2{
    color: white;
    justify-content: left;
    text-align: left;
    font-size: 175%;
    margin-top: 15%;
    margin-bottom: 10%;
    max-width: 95%;
    text-shadow:
    0 0.1em 0.1em #FFAB91,
    0 0.1em 0.1em #000,
    0 0.1em 0.1em #FBE9E7;
  }
  a:hover{
    color:#4699ca;
  }
  .nav li{
    list-style-type: none;
    padding: 20px 3px 3px 50px;
    font-size: 190%;
    margin: 10px 0 0 10px;
    font-weight: bold;
    width: 75%;
    max-width: 75%;
    font-style: italic;
  }
  h3{
    color: white;
    text-align: left;
    font-size: 110%;
    margin-top: 5%;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 5%;
    padding-right: 1%;
    max-width: 95%;
  }
  .nav li{
    margin-bottom: 5%;
    padding-bottom: 5%;
  }
  span.f{
    font-size:4em;
    color: white;
    position: absolute;
    top: 1280px;
    left: 50px;
    margin-bottom: 100px;
  }
  .s{
    font-size: .5em;
  }
  .lifestyle{width:50%; position:absolute; top:1250px; left:160px;opacity: .5;}
  .lifestyle img{
    height: 200px;
    width:300px;
    max-width:50%;
}
@media screen and (max-width: 559px) {
  span.f{
    font-size:4em;
    color: white;
    position: absolute;
    top: 1350px;
    left: 50px;
    margin-bottom: 100px;
  }
  .lifestyle{width:50%; position:absolute; top:1325px; left:160px;opacity: .5;}
}
@media screen and (max-width: 300px) {
  span.f{
    font-size:4em;
    color: white;
    position: absolute;
    top: 1300px;
    left: 50px;
    margin-bottom: 100px;
  }
  .lifestyle{width:50%; position:absolute; top:1280px; left:140px;opacity: .5;}
  h1.message{
    padding-left: 5px;
    padding-right: 5px;
    margin-left: auto;
    margin-right: auto;
  }
  h2{
    text-align: center;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 24px;
  }
  h3{max-width: 100%;}
  .nav li{
    padding-left: 20px;
  }
}