@charset "UTF-8";


html { font-size: 62.5%} /* 10px=1rem */
*,
*::before,
*::after { box-sizing: border-box;}

#splash { display: none;}
#splash img {
  position: fixed;
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
  width: 300px;
  opacity: 0;
}
#landing-effect.active { animation: landing 1.3s ease-in 0.3s forwards;}
@keyframes landing {
  0% { transform: scale(0.8, 1.4) translate(50%, -100%); opacity: 1}
  5% { transform: scale(0.8, 1.4) translate(50%, -15%)}
  10% { transform: scale(1.4, 0.6) translate(25%, 30%)}
  15% { transform: scale(0.9, 1.1) translate(50%, -10%)}
  20% { transform: scale(0.95, 1.2) translate(50%, -30%)}
  25% { transform: scale(0.95, 1.2) translate(50%, -10%)}
  30% { transform: scale(1.1, 0.9) translate(45%, 5%)}
  35%, 40%, 50% { transform: scale(1.0, 1.0) translate(50%, 0%)}
  50% {
    width: 300px;
    bottom: 50%;
    right: 50%;
  }
  99% {
    display: block;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    transform: translate(0, 0);
    width: 80px;
    opacity: 1;
  }
  100% {
    bottom: 2rem;
    right: 2rem;
    transform: translate(0, 0);
    width: 80px;
    opacity: 0;
  }
}

body {
  margin: 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 1.6rem;
  -webkit-text-size-adjust: 100%;
  height: 100vh;
}
#page-contents {
  min-height: 100vh;
  background: url(../img/bg-top.png) no-repeat right 8% bottom/80%;
  animation: fadeIn 1s ease-out 1.6s forwards;
  opacity: 0;
}
#words,
#contact,
#notfound {
  background: #212121;
}
#words #page-contents,
#contact #page-contents,
#notfound #page-contents {
  background-image: none;
  animation: fadeInSub 1s ease-out 0.5s forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    background: url(../img/bg-top.png) no-repeat right 8% bottom/80%; /* 設定時間経過後の表示を防止 */
  }
}
@keyframes fadeInSub {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    background-image: none;
  }
}

#page-contents-gr {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotate(0.03deg);
}
#page-contents-gr h1 {
  margin-top: -3rem;
}
#page-contents-gr h1::before {
  display: block;
  content: "";
  height: 80px;
  background: url(../img/clock.svg) no-repeat center/contain;
  margin-bottom: 3rem;
}
a { text-decoration: none}
a:hover {}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#catch {
  font-family: "Noto Serif JP", serif;
  margin: 0 5vw 5vw;
  position: relative;
  z-index: 1;
  text-shadow:
    3px 3px 3px #fff, -3px -3px 3px #fff,
    -3px 3px 3px #fff,  3px -3px 3px #fff,
    3px 0px 3px #fff, -3px -0px 3px #fff,
    0px 3px 3px #fff,  0px -3px 3px #fff;
}
#words #catch,
#contact #catch,
#notfound #catch { 
  color: #ff8c16;
  text-shadow: none;
}
#catch h1 {
  font-size: 4.2rem;
  font-weight: bold;
  margin: 0;
  padding-top: 1.82rem;
}
#catch p {
  font-size: 1.65rem;
  margin: 0;
}
#logo {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}
#logo svg {
  display: block;
  min-height: 100vh;
}
#logo svg {
  fill: transparent; /*塗り*/
  stroke: #201716; /*線の色*/
  stroke-width: 0.3; /*線の太さ*/
  stroke-dasharray: 2000; /*線の間隔（長さ）*/
  stroke-dashoffset: 0; /*線の開始位置*/
}
#logo .st1,
#logo .st2,
#logo .st3,
#logo .st4,
#logo .st5 {
  animation: textAnime 1s ease-in-out forwards;
  opacity: 0;
}
#logo .st1 { animation-delay: 1.5s}
#logo .st2 { animation-delay: 2.3s}
#logo .st3 { animation-delay: 2.7s}
#logo .st4 { animation-delay: 3.1s}
#logo .st5 { animation-delay: 3.5s}
@keyframes textAnime {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
    opacity: 1
  }
  50% {
    fill: transparent;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #201716;
    opacity: 1;
  }
}
nav#menu:target { bottom: 0}
nav#menu:target ~ div#menu-toggle #menu-open { display: none}
nav#menu:target ~ div#menu-toggle #menu-close { display: block}
nav {
  width: 100%;
  rotate: 0.03deg;
  background: rgba(255,140,22,68%);
  margin: 0;
  position: fixed;
  left: 0;
  bottom: -100%;
  z-index: 99;
  transition: all 0.3s;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 1rem;
  padding-bottom: 47px;
}
nav li {
  padding: 0.5rem 1rem 0;
  margin-bottom: 1rem;
  border-bottom: 1px dotted white;
  transform-origin: left bottom;
  transition: 0.3s;
}
nav li:hover {
  border-bottom: 1px solid #ff8c16;
}
nav li:first-child a::before { content: "#01"}
nav li:nth-child(2) a::before { content: "#02"}
nav li:nth-child(3) a::before { content: "#03"}
nav li:last-child { margin-top: 2rem}
nav a {
  display: block;
  color: white;
  transform-origin: left bottom;
  transition: 0.3s;
}
nav a:hover { color: #ff8c16}
nav a::before {
  font-size: 3rem;
  font-family: "Noto Serif JP", serif;
  font-style: italic;
  font-weight: bold;
  margin-right: 1rem;
}
nav a span {
  display: inline-block;
  text-align: center;
  font-size: 1rem;
  line-height: 1.2;
}
nav a em {
  display: block;
  font-size: 1.8rem;
  font-style: normal;
}
#menu-toggle a#menu-open,
#menu-toggle a#menu-close {
  padding: 1.2rem 1rem;
  text-align: center;
  background: rgba(252,126,47,75%);
  color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
}
#menu-toggle a#menu-close { display: none}
footer {
  display: block;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  line-height: 1;
}
footer a::before {
  font-family: "Noto Sans JP", sans-serif;
  content: "\0a9";
  font-size: 1.6rem;
  vertical-align: 1.5px;
  margin-right: 3px;
  color: #666;
}
footer img { width: 80px}


#words .text {
  font-weight: 100;
  font-size: 2rem;
  font-family: "New Tegomin", sans-serif;
  color: #fafafa;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
  overflow-y: hidden;
}
#words footer img,
#contact footer img,
#notfound footer img { filter: contrast(0.6);}
#form,
#message {
  position: absolute;
  top: 0;
  margin: 150px 0 0 0;
  padding-bottom: 100px;
  width: 100%;
  rotate: 0.03deg;
}
#form form {
  padding: 0 1rem;
  margin-top: -2.6rem;
}
#form fieldset,
#form button {
  background-color: #fff;
  border: none;
  border-radius: 10px;
  padding: 2rem;
}
#form legend { padding-top: 5rem;}
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  transform: rotate(0.03deg);
  padding: 7px;
  border-radius: 5px;
  border: 1px solid #ddd;
  margin: 1rem;
}
input:-webkit-autofill { /* Chromeのオートコンプリート背景色を無効化 */
  box-shadow: 0 0 0 1000px white inset;
}
textarea { height: 6.5em;}
input:focus,
select:focus,
textarea:focus { background-color: antiquewhite;}
input:not([type="radio"]),
select,
textarea {
  width: 96%;
  display: block;
}
label:has(input[type="radio"]) { padding-right: 4rem;}
legend.required::after {
  content: "必須";
  display: inline-block;
  background-color: #f30;
  color: #fff;
  padding: 0 4px;
  margin-left: 5px;
  border-radius: 4px;
  font-size: 1.2rem;
  vertical-align: 1.4px;
}
input[type="radio"] {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border: 2px solid #7a7a7a;
  border-radius: 50%;
  vertical-align: -14px;
  &::before {
    content: "";
    display: block;
    position: absolute;
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  &:checked::before {
    background-color: #7a7a7a;
  }
}
#form button {
  font-size: inherit;
  padding: 1.4rem;
  text-align: center;
  display: block;
  width: 60%;
  margin: 4rem auto 0;
  letter-spacing: 20px;
  text-indent: 20px;
  background-color: antiquewhite;
}
#form button:hover,
#form button:focus {
  background-color: #ff8c16;
  cursor: pointer;
}
#message {
  color: #fff;
  padding-top: 5rem;
}
#message p {
  width: 90%;
  margin: 1.5em auto;
}
#message a {
  color: #aaa;
  display: inline-block;
  position: relative;
}
#message a:hover { color: #ff8c16;}
#message a::before {
  font: var(--fa-font-solid);
  content: "\f06a";
  margin-right: 6px;
}
#message a::after {
  content: "";
  display: block;
  border-bottom: 1px dotted #aaa;
  position: absolute;
  width: 100%;
  bottom: -5px;
}
#message a:hover::after {
  border-bottom: 1px solid #ff8c16;
}

/* ========================================
Media Queries
======================================== */
@media (min-width: 600px) {
  .newline { display: none}
  #catch h1 {
    font-size: 6.6rem;
    margin: 0 0 0.5rem;
    padding-top: 5.478rem;
  }
  #catch p {
    font-size: 2.2rem;
    margin: revert;
  }
  #logo { right: 5vw}
  nav {
    width: 280px;
    margin: 0 3vw;
    background-color: transparent;
    position: relative;
    z-index: 2;
  }
  nav li { border-bottom-color: #ccc}
  nav li:hover { transform: scale(1.2)}
  nav li:last-child { margin-top: 5rem}
  nav li a {
    color: #aaa;
    transition: 0.6s;
  }
  nav li a::before { font-size: 4.2rem}
  nav li a span {
    font-size: 1.4rem;
    line-height: normal;
  }
  #menu-toggle a#menu-open,
  #menu-toggle a#menu-close { display: none}
  nav#menu:target ~ div#menu-toggle #menu-close { display: none}
  footer {
    bottom: 2rem;
    right: 2rem;
  }
  #form, #message {
    margin: calc(210px + 6vw) 0 0 0;
    padding-bottom: 6vw;
    padding-left: 300px;
  }
  #form form {
    padding: 0 4rem;
  }
}
@media (min-width: 926px) {
  #form,
  #message {
    margin: calc(210px + 6vw) 0 0 calc(300px + 6vw);
    padding-left: 0;
    width: 60vw;
  }
}