/* normalize */
html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust:100%;}body {margin:0;}main {display:block;}h1,h2,h3,h4,h5,h6 {font-weight:800;margin:0;padding:0;}hr {box-sizing:content-box;height:0;overflow:visible;}pre {font-family:monospace, monospace;font-size:1em;}a {background-color:transparent;}abbr[title] {border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong {font-weight:800;}code,kbd,samp {font-family:monospace, monospace;font-size:1em;}small {font-size:80%;}sub,sup {font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub {bottom:-0.25em;}sup {top:-0.5em;}img {border-style:none;}button,input,optgroup,select,textarea {font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input {overflow:visible;}button,select {text-transform:none;}button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style:none;padding:0;}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {outline:1px dotted ButtonText;}fieldset {padding:0.35em 0.75em 0.625em;}legend {box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress {vertical-align:baseline;}textarea {overflow:auto;}[type="checkbox"],[type="radio"] {box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height:auto;}[type="search"] {-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance:none;}::-webkit-file-upload-button {-webkit-appearance:button;font:inherit;}details {display:block;}summary {display:list-item;}template {display:none;}[hidden] {display:none;}picture,figure{display:block;}button{background-color: transparent;border: none;cursor: pointer;outline: none;padding: 0;appearance: none;}
* {box-sizing: border-box; outline: none; margin: 0; padding: 0;word-wrap: break-word; overflow-wrap: break-word;}
::selection {background: #ECD;}

/* common */
html, body {width:100%; height:100%;}
html { font-size: 62.5%; line-height:1.6;}
body , textarea, input {font-family:"Noto Sans JP","Noto Sans JP fallback", sans-serif; font-weight:700;}
body {
min-width: 320px;
color: #333;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
font-size: 1.6rem;
position:relative; z-index:0;
opacity:0;
}
p {margin-bottom:1em;}
p:last-child {margin-bottom:0;}
a { color: #333; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer;}
ul,ol{list-style: none outside;}
img {max-width: 100%; width:100%; height: auto; vertical-align:top;user-select: none;-webkit-user-select: none;-webkit-user-drag: none;image-rendering: crisp-edges;}
svg {display:block; fill:#FFF;}
svg.hidden{height:0;}

/* class */
.nowrap{white-space: nowrap;}
.blur{
background-color:rgba(255,255,255,.95);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 0 10px rgba(255,255,255,.8);
}
.animate {overflow:hidden;}

body{opacity:1 !important;}
#header,#body,#footer,#page-top{opacity:0;}

/*opening*/
#opening{
width: 100%;
height: 100vh;
animation: opAnime 1s linear 3s forwards;
position: absolute;
inset: 0;
z-index:11;
background:#B70;
display:none;
flex-flow: column;
align-items: center;
justify-content: center;
overflow:hidden;
}
#opening p {
position: relative;
z-index: 1;
text-align:center;
}
#opening p img {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
max-width:none;
width:auto;
height:5vh;
}
#opening p:after{
content: "";
background:#B70;
inset:0;
position:absolute;
z-index: 1;
animation: textAnime1 .5s linear forwards;
}
#opening p:nth-of-type(2):after{
animation: textAnime1 .5s linear .6s forwards;
}
#opening p:nth-of-type(3):after{
animation: textAnime1 .5s linear 1.2s forwards;
}
#opening p:nth-of-type(4):after{
animation: textAnime1 .5s linear 2.1s forwards;
}
@keyframes textAnime1 {
0% {transform: translateX(0);}
100% {transform: translateX(100%);}
}
@keyframes opAnime {
0%{opacity: 1;}
99%{opacity: 0;}
100%{opacity: 0;visibility: hidden;}
}
@media only screen and (max-width: 760px) {
#opening{
padding:10vw;
}
}


/*arrows*/
div.arrows {
position: absolute;
z-index: 5;
width: 45px;
height:80px;
margin: auto;
bottom:50px;
left:50%;
transform: translateX(-50%);
}
div.arrows span {
position: relative;
display:block;
opacity: 0;
animation-iteration-count: infinite;
animation-duration: 2.0s;
animation-name: scroll;
}
div.arrows span::before,div.arrows span::after{
position: absolute;
display:block;
content: "";
border-bottom:5px solid #FFF;
left:0%;
bottom:0;
width:62%;
 transform: rotate(45deg); 
}
div.arrows span::after {
left:auto;
right:0%;
transform: rotate(-45deg); 
}
div.arrows b {
position: relative;
display:block;
top:0;
margin-bottom: 20px;
font-size:10px;
font-weight:800;
text-align:center;
color:#FFF;
transform: scaleX(.9);
transform-origin: left center;
width: 110%;
}
div.arrows span:nth-of-type(1) { animation-delay:.2s; top: 0px; }
div.arrows span:nth-of-type(2) { animation-delay: .5s; top: 20px; }
div.arrows span:nth-of-type(3) { animation-delay: .8s; top: 40px; }
@keyframes scroll { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} }


/*gnavi*/
@media only screen and (max-width: 760px) {
#gnavi-pc {display: none;}
#header-sns {display:none;}
#gnavi-sp{display: block;}
#gnavi-pc .submenu-container{display:none;}
#header_inner{display:none;}
}
@media only screen and (min-width: 761px) and (max-width: 960px) {
#gnavi-pc {display:none;}
#header-sns {display:none;}
#gnavi-sp{display:block;}
#gnavi-pc .submenu-container{display:none;}
#header_inner{display:none;}
}
@media only screen and (min-width: 961px) { 
#gnavi-pc {display:block;}
#header-sns {display:block;}
#gnavi-sp{display:none;}
#gnavi-pc .submenu-container{display:none;}
#header_inner{display:none;}
}

/* 桜の花びらのスタイル */
.petal {
  position: absolute;
  background-color: #FEE; /* 花びらの色 */
  border-radius: 100% 0 100% 0;
  animation: animate-petal 10s linear;
}

.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FEE;
  border-radius: 100% 0 100% 0;
  transform: rotate(15deg);
}