@charset "utf-8";

body {
  font: 1rem /1.8 "游ゴシック", "游ゴシック体", "Yo Gothic", YoGothic, "游明朝", "YuMincho", sans-serif;
  color: #fff;
}


.wrapper::before {
  content: "";
  background: radial-gradient(#cb1589, #231816);
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: -100;
}

.inner {
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.df {
  display: flex;
}

.sb {
  justify-content: space-between;
}

.jc_c {
  justify-content: center;
}

.f_w {
  flex-wrap: wrap;
}

.mb_20 {
  margin-bottom: 20px;
}

.mb_50 {
  margin-bottom: 50px;
}

.mb_80 {
  margin-bottom: 80px;
}

.mb_150 {
  margin-bottom: 150px;
}

a {
  color: #fff;
}

header {
  text-align: center;
  padding: 5% 0 2%;
  position: relative;
}

.site_logo {
  margin-bottom: 100px;
  opacity: 0;
  transition: 1.5s;
  transform: scale(.6);
}

.site_logo.active {
  opacity: 1;
  transform: scale(1);
}

.r_img {
  position: absolute;
  right: 0;
  transform: translate(50%, -143%);
  opacity: 0;
  transition: 1s;
}

.r_img.active {
  transform: translate(0, -143%);
  opacity: 1;
  z-index: -1;
}

.l_img {
  position: absolute;
  left: 0;
  transform: translate(-50%, -130%);
  opacity: 0;
  transition: 1s;
}

.l_img.active {
  transform: translate(0, -130%);
  opacity: 1;
  left: -165px;
  z-index: -1;
}

nav {
  position: absolute;
  width: 100%;
  top:0;
  left:0;
  z-index: 100000;
  background: #006335;
  filter: drop-shadow(.5rem .5rem 1rem #fff);
}

nav li {
  width: calc(100% / 5);
  height: 4%;
  text-align: center;
  border: 3px solid #fff;
  border-radius: 5px;
  margin: .5%;
}

nav li:hover {
  opacity: .5;
  transition: .3s;
}

nav li span {
  border: 1px solid #fff;
  border-radius: 2px;
  display: block;
  padding: 3px 0;
  margin: -8px 3px;
}

nav li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5% 0;
}

section {
  margin-bottom: 12%;
  padding: 0 5%;
  box-sizing: border-box;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 8%;
}

section div p {
  margin-bottom: 5%;
}

main {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.left::before {
  position: absolute;
  left: 0;
  transform: translate(-80%, -15%);
  opacity: 0;
  transition: 0.8s;
  content: url(../images/cloud1.png);
  z-index: -1;
}

.left.active::before {
  transform: translate(-10%, -15%);
  opacity: 1;
}

.right::before {
  position: absolute;
  right: 0;
  transform: translate(80%, -15%);
  opacity: 0;
  transition: 0.8s;
  content: url(../images/cloud2.png);
  z-index: -1;
}

.right.active::before {
  transform: translate(0%, -15%);
  opacity: 1;
}

#owner {
  display: block;
  position: relative;
  background-color: #000;
  min-width: 320px;
  min-height: 500px;
  background-color: #000;
  background-image: url(../images/top_pc_dragon01.png), url(../images/top_pc_dragon02.png), url(../images/bg.jpg);
  background-position: left -150px center, right -150px center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: cover, cover, cover;
  z-index: 0;
  box-sizing: border-box;
  padding-top: 63px;
}

#owner img {
  filter: drop-shadow(.5rem .5rem 1rem #e23);
  margin-top: 30px;
}

.owner_item h2 {
  margin-top: 30px;
}

.owner_item {
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px) saturate(150%);
  padding: 0 30px;
}

.owner_item p {
  text-shadow: 2px 2px 5px #000, 2px -2px 5px #000, -2px 2px 5px #000, -2px -2px 5px #000;

}

.content_item,
.item li,
#auto_taku li,
#manual_taku li,
#other li {
  background: rgb(4, 4, 10);
  background-image: url(../images/img04.png), url(../images/img03.png), url(../images/img02.png), url(../images/img01.png), url(../images/bar01.png), url(../images/bar01.png), url(../images/bar02.png), url(../images/bar02.png), linear-gradient(180deg, rgba(4, 4, 10, 1) 0%, rgba(44, 64, 122, 0.9192051820728291) 28%, rgba(10, 35, 41, 0.9051995798319328) 52%, rgba(1, 14, 18, 1) 100%);
  background-position: bottom right, bottom left, top right, top left, top left, top right, bottom, top, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, repeat-x, repeat;
  padding: 2% 4% 2% 2%;
  margin: 0 0 5%;
  box-sizing: border-box;
}

.content h3 {
  margin: 0 0 0 3%;
}

.content_item img {
  width: 25%;
  filter: drop-shadow(.5rem .5rem 1rem #000);
}

#pai .content .right img {
  order: 2;
}

.content_item div {
  width: 70%;
}

h2,
h3,
h4 {
  text-shadow: 9px 4px 5px rgba(0, 0, 0, 1);
  color: #c1ab05;
  margin-bottom: 1%;
}

h2,
.catch {
  text-align: center;
}

.item li,
#auto_taku li,
#manual_taku li,
#other li {
  width: 30%;
  padding: 0;
}

.item li a,
#auto_taku li a,
#manual_taku li a,
#other li a {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 10% 10% 3% 10%;
  box-sizing: border-box;
}

.item li img,
#auto_taku li img,
#manual_taku li img,
#other li img {
  width: 250px;
  align-self: center;
  margin-bottom: 10px;
}

footer {
  padding: 80px 0 20px;
  background: url(../images/line.png) repeat-x center top /auto 30px, linear-gradient(#000, #191970);
  animation: bg-slider 60s linear infinite;
}

@keyframes bg-slider {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -1467px 0;
  }
}

footer div.inner {
  align-items: flex-end;
  margin-bottom: 100px;
}

.footer_logo {
  margin-right: 100px;
}

footer p {
  text-align: center;
}

#top {
  position: fixed;
  right: calc((100% - 1280px) / 2);
  bottom: 50px;
  width: 50px;
  height: 50px;
  z-index: 1000000;
}

#top a {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  color: transparent;
  border-radius: 50%;
  background-color: rgba(189, 166, 7, .8);
}

#top a::before {
  font-size: 2rem;
  content: "^";
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 6%);
  display: block;
}