@charset "utf-8";

:root{
    --size-gap:32px;
    --size-gap-half:16px;
    --size-header:96px;
    --size-footer:60px;
    --size-header-pc:88px;
    --color-main:#03ff00;
}
::selection {
  /* color: #000;
  background-color: #03ff00; */
}
html{
    line-height: 1;
    cursor: url(../../arrow-cursor-outline.svg),auto;}

body{
    /* font-family: 'Noto Serif JP', serif; */
    /* font-family: 'Zen Kaku Gothic New', sans-serif; */
    /* font-family: "Figtree", sans-serif; */
    font-family: sans-serif;
    /* animation: fadeIn 1s ease-in-out; */
    background-color: #000;
  }

img {
  -webkit-touch-callout: none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
	-webkit-user-drag: none;
  -khtml-user-drag: none;
	/* user-drag: none;
  touch-callout:none; */
  user-select:none;
}

/* ページ遷移アニメーション */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ページ遷移後のアニメーション */
body.transitioning {
  animation: fadeOut .5s ease-in-out forwards;
}

/* ページ遷移：暗転オーバーレイ */
.overlay_all {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(0, 0, 0, 1); /* 完全な黒 */
  opacity: 0;
  pointer-events: none; /* クリックできないように */
  z-index: 1000; /* 上に表示 */
}
.overlay_all.transitioning {
  opacity: 1;
  animation: fadeIn 1s ease-in-out;
}

.overlay_allimg {
  -webkit-user-drag: none; /* Chrome, Safari, Opera */
  -khtml-user-drag: none;  /* Konqueror */
  -moz-user-drag: none;    /* Firefox */
  -o-user-drag: none;      /* Opera */
  user-select: none;
  -webkit-user-select:none;	 /* Google Chrome、Safari*/
	-webkit-user-drag:none;
	-moz-user-select:none;	/* Firefox*/
	-khtml-user-select:none;
	-khtml-user-drag:none;
  /* pointer-events: none; */
  -webkit-touch-callout: none;
  -webkit-user-select:none;
}
header{
    padding: var(--size-gap-half);
    position: absolute;
    top: 0;
    /* z-index: 999; */
}
header h1{
    font-size: 2rem;
    font-weight: 600;
    margin-left: -4px;
}
header h1 img{
  width: 260px;
}
header h1:hover{
  background-color: #03ff00;
}
header h1:hover img{
  filter: invert(100%);
}



footer{
    color: #fff;
    text-align: center;
    margin-top: var(--size-gap);
}
footer a{
  color: blue;
}
footer a:visited{
  color: blue;
}
.copylight{
    font-size: .8rem;
}

.br_sp{
  display: block;
}

@media screen and (min-width:1024px) {
header h1{
    font-size: 1.6rem;
    font-weight: 600;
}
nav{
    font-size: .9rem;
}
.footer_icon i{
    font-size: 1.4rem;
}
.br_sp{
  display: none;
}
}


/* マウスストーカーのスタイル */
.stalker {
  background-color: var(--color-main); /* 背景色 */
  border-radius: 50%; /* 正円 */
  height: 30px; /* 円の高さ */
  left: -15px; /* widthの半分 */
  opacity: 0; /* カーソルを画面内に入れるまでは透明 */
  pointer-events: none; /* 直下のリンクをクリック可能にする */
  position: fixed; /* スクロールしてもカーソルの位置で固定 */
  top: -15px; /* widthの半分 */
  transition: transform .3s ease-out; /* 遅れてついてくる時間 */
  width: 30px; /* 円の幅 */
  z-index: 999; /* 一番上に来るように */
  /* background-image: url(../../img/meri_web_05.webp); */
}