/* フォント */

@font-face {
  font-family: 'TATSUTAfont';
  src: url('/assets/TATSUTAfont.woff2') format('woff2');
  font-display: swap;
}

/* 共通 */

body, html{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #5ca3cf;
}

h1,h2{
    font-family: 'TATSUTAfont', sans-serif;
}


/* HEADER */

header{
    position: fixed;
    top: 0;
    left: 0;    
    height: 50px;
    width: 100svw;
    display: flex;
    opacity: 1;
    visibility: visible;
    z-index: 90;
}
div.site_title{
    margin: 20px 0 0 20px;
    opacity: 0;
    visibility: hidden;
    display: flex;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
header, h1{
    font-family: 'TATSUTAfont', sans-serif;
    margin: 0;
    font-size: min(7vh, 50px);
}
@media (max-width: 480px) {
    header h1.header_title_english{
        display: none;
    }
}
div.site_title.header_visible{
    opacity: 1;
    visibility: visible;
}
header img.hamburger{
    margin: 20px 20px 0 auto;
    height: min(10vh, 70px);
    z-index: 100;
}
header img.hamburger:not(.menu_opend):hover{
    content: url(/assets/icons/hamburger_2.svg);
    animation: hamburger 0.7s steps(1);
}
@keyframes hamburger {
  0%, 45%,
  50%, 54%, 58%,
  63%, 66%, 69%,
  72%, 74%, 76%, 78% {
    content: url(/assets/icons/hamburger.svg);
  }

  5%, 15%, 25%, 35%,
  52%, 56%, 60%,
  64.5%, 67.5%, 70.5%,
  73%, 75%, 77%, 79%,
  80%, 100% {
    content: url(/assets/icons/hamburger_2.svg);
  }
}
header img.hamburger.menu_opend{
    content: url(/assets/icons/hamburger_close.svg);
}

.mainmenu{
    display: none;
    position: fixed;
    height: 100svh;
    width: 100svw;
    z-index: 95;
    background-color: #143b53;
    background-image: url(/assets/menu_bg.webp);
    background-position: right bottom; /* ← ここを修正 */
    background-repeat: no-repeat;
    background-size: 30svh;
}

.mainmenu.showmenu{
    display: block;
}
.mainmenu ul{
    list-style: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 0;
    margin: 0;
}
.mainmenu ul li{
    margin-bottom: 20px;
}
.mainmenu ul a{
    width: calc(100svw - 40px);
    display: block;
    text-decoration: none;
    color: #fff;
}
.mainmenu ul::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background-color: #fff;
}

.mainmenu::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 24px;
  width: calc(100% - 100px);
  height: 2px;
  background-color: #fff;
}
.mainmenu ul a:hover{
    transform: translateX(10px);
    animation: flicker 1s step-start infinite;
}
@keyframes flicker {
  0%   { opacity: 1.0; }
  3%   { opacity: 0.0; }
  6%   { opacity: 0.95; }
  9%   { opacity: 0.05; }
  12%  { opacity: 1.0; }
  15%  { opacity: 0.0; }
  18%  { opacity: 0.85; }
  21%  { opacity: 0.1; }
  24%  { opacity: 1.0; }
  27%  { opacity: 0.0; }
  30%  { opacity: 0.7; }
  33%  { opacity: 0.05; }
  36%  { opacity: 0.9; }
  40%  { opacity: 0.2; }
  44%  { opacity: 0.8; }
  48%  { opacity: 0.15; }
  52%  { opacity: 0.95; }
  56%  { opacity: 0.25; }
  60%  { opacity: 0.75; }
  64%  { opacity: 0.0; }
  68%  { opacity: 0.85; }
  72%  { opacity: 0.3; }
  76%  { opacity: 0.9; }
  80%  { opacity: 0.1; }
  84%  { opacity: 0.6; }
  88%  { opacity: 0.35; }
  92%  { opacity: 0.95; }
  96%  { opacity: 0.2; }
  100% { opacity: 0.9; }
}

.mainmenu ul li.menu_sns{
    margin-bottom: 1em;
}
.mainmenu ul li.menu_sns a{
    display: flex;
    align-items: center;
    margin: 0 0 0.2em 0;
}
.menu_sns img{
  width: 0.7em;
  height: 0.7em;
   filter: brightness(0) invert(0.7);
}
.menu_sns p{
    color: hsl(0, 0%, 70%);
    display: block;
    margin: 0 0 0 0.5em;
    font-size: 0.5em;
}