header{
  position: fixed;
  animation:slide 2.5s 1s 1 forwards;
  -webkit-animation:slide 2.5s 1s 1 forwards;
  -moz-animation:slide 2.5s 1s 1 forwards;
    /* font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; */
  font-family: a-otf-ryumin-pr6n, serif;
  font-weight: 300;
  font-style: normal;
  z-index: 100;
}@media screen and (max-width: 1024px){
  header{
  animation:sp_slide 2.5s 1s 1 forwards;
  -webkit-animation:sp_slide 2.5s 1s 1 forwards;
  -moz-animation:sp_slide 2.5s 1s 1 forwards;
}}

.header_content{
  background-color: #3c114d;
  width:100vw;
  height: 100vh;
  transition: all 1s;
  left:0;
}

.header_content::before{
  position: fixed;
  top: 52vh;
  bottom:50%;
  left:-1.5vw;
  content: '';
	width: 4em;/*幅*/
	height: 4em;/*高さ*/
	border-radius: 50%;/*角丸*/
  background-color: #3c114d;
}@media screen and (max-width: 1024px){
  .header_content::before{
    display: none;
}}

.header_items{
  opacity: 0;
  position: fixed;
  top: 7vh;
  left: 4vw;
  letter-spacing: 0.5em;
  color:#fff;
}@media screen and (max-width: 1024px){
  .header_items{
    top: 20vh;
}}

.header_items > a{
  display: block;
  text-decoration: none;
  font-size: 0.8em;
  line-height: 2em;
  margin: 3vw 0;
}@media screen and (max-width: 1024px){
  .header_items > a{
    font-size: 1.5em;
}}

@keyframes slide{
    100% {transform:translateX(95vw);}
}
@-webkit-keyframes slide{
    100% {transform:translateX(95vw);}
}
@-moz-keyframes slide{
    100% {transform:translateX(95vw);}
}

@keyframes sp_slide{
    100% {transform:translateX(100vw);}
}
@-webkit-keyframes sp_slide{
    100% {transform:translateX(100vw);}
}
@-moz-keyframes sp_slide{
    100% {transform:translateX(100vw);}
}

.btn-area{
  position: absolute;
  top: 51.5%;
  left: -1%;
}@media screen and (max-width: 1024px){
  .btn-area{
    display: none;
    top: 0;
    left: 90vw;
    z-index: 200;
}}

.btn-trigger {
  position: relative;
  width: 2.5em;
  height: 4.4em;
  cursor: pointer;
}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  border-radius: 4px;
}@media screen and (max-width: 1024px){
  .btn-trigger span {
    background-color: rgb(19, 31, 68);
}}

.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 30%;
}
.btn-trigger span:nth-of-type(2) {
  top: 50%;
}
.btn-trigger span:nth-of-type(3) {
  top: 70%;
}
#btn03.active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
#btn03.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-45deg);
  transform: translateY(0.9em) rotate(-45deg);
}
#btn03.active span:nth-of-type(2) {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
#btn03.active span:nth-of-type(3) {
  opacity: 0;
}

.action{
  transform:translateX(-10vw);
}@media screen and (max-width: 1024px){
.action{
  transform:translateX(-50vw);
}}

.action > .header_items{
opacity: 1;
}

.sp_show{
display:none;
position: fixed;

}@media screen and (max-width: 1024px){
.sp_show{
  display:block;
}}