﻿@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@1,400;1,600;1,700&display=swap');
.font1{
    font-family: 'Zilla Slab', serif;
}
#main_nav li a,
.sc_nav li a,
.top_cms_title h4,
.more a,
footer #footer #footer_links li a,
#copyright,
#menu_wrap li a,
#page_title h2{
    font-family: 'Zilla Slab', serif;
    font-weight:700;
}
.linkStyle{
    color:#222;
    text-decoration:underline;
}
.linkStyle:hover{
    transition:all 0.3s;
    opacity:0.7;
}

.bg_color2{
    background-color: #222;
}



/*--all page---------------------------
-------------------------------------*/
#body{
    overflow:hidden;
}

h1 img {
    max-width: 500px;
}
footer{
    background-image:url(./Dup/img/ft.jpg);
    background-size:cover;
}
#footer_txt p,
footer #footer #footer_links li a,
footer #footer #footer_links li::after,
#copyright{
    color:white;
}
#page-top{
    color:#777;
}

/*--top page---------------------------
-------------------------------------*/
/* じわっと出現 */
.load-blurTrigger{
    opacity: 0;
}
.load-blur{
  animation-name:load-blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes load-blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}
.catch{
    top:15%;
    left:11%;
    z-index:1;
}
.catch .en{
    font-size: 10rem;
    font-weight: 700;
    line-height: 1;
}
.circre{
    top: 33%;
    right: 11%;
    z-index: 1;
    width: 20vw;
}
/*右回転*/
.rotate {
  display: inline-block;
  animation: r1 50s linear infinite;
}
 
@keyframes r1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } 
}
.intro_outer{
    background-image:url(./Dup/img/bg.jpg);
    background-size:cover;
}
.intro_txt{
    position:relative;
    z-index:2;
}
.intro_title{
    z-index:1;
}
.neontext {
  animation: flicker 1.5s infinite alternate;
  color: #fff;
  font-size:5rem;
  font-weight:600;
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
      text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #777,
      0 0 80px #777,
      0 0 90px #777,
      0 0 100px #777,
      0 0 150px #777;
  }
  20%, 24%, 55% {
      text-shadow: none;
  }
}
.intro_txt .font1{
    font-weight: 700;
    font-size: 8rem;
    line-height: 1;
    padding-top: 20px;
}

.intro_txt h2{
    background-color:transparent;
}
.txt_roop{
    margin-bottom: 100px;
    margin-top: 30px;
    opacity:0.7;
}
#roop {
    width: 100%;
    height: 130px;
    background: url(./Dup/img/txt_roop.png) repeat-x;
    background-position: 0 0;
    -webkit-animation: bgroop 50s linear infinite;
    animation: bgroop 50s linear infinite;
}
@-webkit-keyframes bgroop {
    from {
        background-position: 1956px  0;
    }
    to {
        background-position: 0 0;
    }
}

.point01{
    top: -28%;
    right: 15%;
    font-weight: 700;
    font-size: 6rem;
    z-index:2;
}
.point02{
    font-weight: 700;
    font-size: 6rem;
    line-height: 1;
}
.p01,.p02{
    font-size:7rem;
}
.contents_title{
    font-size:5rem;
    font-weight:700;
    line-height:1;
}

.top_cms_title h4{
    font-size:3rem;
    color: #222;
}



/*--under page---------------------------
-------------------------------------*/
#page_title h2{
    font-size: 3rem;
}
#page_title p{
    font-weight:bold;
    opacity:1;
}


/* ---------- responsive ---------- */
@media screen and (max-width: 1700px){
.catch {
    left: 7%;
}
}

@media screen and (max-width: 1500px){
.neontext{
    font-size:4rem;
}
.catch {
    left: 4%;
}
.catch .en{
    font-size:8rem;
}
}

@media screen and (max-width: 1200px){
.catch .en {
    font-size: 6rem;
}
}

@media screen and (max-width: 840px){
.catch .en {
    font-size: 5rem;
}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#menu_bt > div span{
    background-color: #222;
}
.catch {
    top: 67%;
    left: 5%;
}
.catch .en {
    font-size: 6rem;
}
#intro{
    margin-bottom:50px;
}
.intro_title {
    top: 3%;
}
#intro h3 {
    font-size: 50px;
    margin-left: 30px;
}
.circre {
    top: 26%;
    right: 3%;
    width: 28vw;
}
.intro_txt .font1{
    font-size:6rem;
}
.point01{
    right:22%;
}
#top_contents1 .contents1_txt{
    margin:auto;
}
#top_contents1 .contents1_txt h3{
    transform:none;
}
.contents_title{
    margin-left: 15px;
}
#menu_wrap ul li{
    text-align: center;
}
}

/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
header #header {
    padding: 17px 20px 27px;
}
#header h1 img{
    width:70%!important;
}
#menu_bt {
    top: 20px;
    right: 10px;
}
.catch {
    top: 67%;
}
.catch .en {
    font-size: 3rem;
}
#intro h3 {
    font-size: 40px;
    transform: translateY(-40px);
}
.intro_txt .font1 {
    font-size: 4rem;
}
#intro .intro_txt h2{
    transform:none;
    padding: 0 20px;
}
.circre {
    top: 20%;
    right: -11%;
    width: 40vw;
}
.point01,.point02{
    font-size:3rem;
}
.p01,.p02{
    font-size: 4rem;
}
.txt_roop {
    margin-bottom: 45px;
    margin-top: 45px;
}
.contents_title {
    font-size: 3rem;
}
.top_cms_title h4 {
    font-size: 2rem;
}
#page_title h2 {
    font-size: 2.6rem;
    line-height: 1.2;
}
}

/* ---------- IEの処理 ---------- */
@media all and (-ms-high-contrast: none){

}

body{
  position: relative;
  cursor: none; /*もともとあるカーソルは非表示に*/
}
/*
a{
  display:inline-block;
  margin:40px;
}
*/
/*カーソル要素*/
#cursor{
  position: fixed;
  /*丸の大きさと色の指定*/
  background: #fff;
  border-radius:5px;
  width: 10px;
  height: 10px;
  margin: -10px 0 0 -10px;/*真ん中にくるようにマイナスマージンで調整*/
  z-index: 999;/*一番手前に来るように*/
  pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
  opacity: 0;
  transition: transform 0.1s;/*アニメーションの秒数指定*/
}
/*ちょっと遅れてついてくるストーカー要素*/
#stalker{
  position: fixed;
  /*丸の大きさと色の指定*/
  background: #555;
  width: 60px;
  height: 60px;
  border-radius:30px;
  margin: -30px 0 0 -30px;/*真ん中にくるようにマイナスマージンで調整*/
  z-index: 998;/*カーソルの後ろに来るように*/
  pointer-events: none;/*クリックできなくなるのを防ぐため。noneで対応*/
  opacity: 0;
  transition: transform 0.5s;/*アニメーションの秒数指定*/
}
#cursor.active,
#stalker.active{
  transform: scale(1.4);
}
