/* Template */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+JP:wght@100..900&display=swap");


:root {
  --font-51:51px;
  --font-41:41px;
  --font-28:28px;
  --font-21:21px;
  --font-16:16px;
  --font-13:13px;
  --opacity-0:0;
  --opacity-4:0.04;
  --opacity-8:0.08;
  --opacity-10:0.1;
  --opacity-20:0.2;
  --opacity-32:0.32;
  --opacity-50:0.5;
  --opacity-100:1;
  
  /* color */
  --color-base: #fff;
  --color-bg: #141516;
  --color-surface: #f7f7f7;
  --color-border: #fff;
  --color-primary: #20f8ff;
  
  /* font color*/
  --textColor-def:#fff;
  --textColor-hover:#20f8ff;

  /* spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-80: 80px;

  /* font */
  --font-8: 8px;
  --font-14: 14px;
  --font-16: 16px;
  --font-20: 20px;
  --font-24: 24px;
  --font-32: 32px;
  --font-40: 40px;
  --font-80: 80px;

  /* radius */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-40: 40px;
  --radius-80: 80px;

  /* opacity */
  --opacity-0: 0;
  --opacity-4: 0.04;
  --opacity-8: 0.08;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-32: 0.32;
  --opacity-50: 0.5;
  --opacity-80: 0.8;
  --opacity-100: 1;

  /* easing */
  /* 減速 */
  --ease-default: cubic-bezier(0, 0.8, 0, 1);
  /* 加速＆減速 */
  --ease-accelerationdeceleration: cubic-bezier(1, 0, 0, 1);
  --ease-accelerationdeceleration-looser: cubic-bezier(0.77, 0, 0.18, 1);
}


.opa0 {opacity: var(--opacity-0);}
.opa4 {opacity: var(--opacity-4);}
.opa8 {opacity: var(--opacity-8);}
.opa10 {opacity: var(--opacity-10);}
.opa20 {opacity: var(--opacity-20);}
.opa32 {opacity: var(--opacity-32);}
.opa50 {opacity: var(--opacity-50);}
.opa80 {opacity: var(--opacity-80);}
.opa100 {opacity: var(--opacity-100);}

.radius8-full {border-radius: var(--radius-8);}
.radius12-full {border-radius: var(--radius-12);}
.radius16-full {border-radius: var(--radius-16);}
.radius20-full {border-radius: var(--radius-20);}
.radius40-full {border-radius: var(--radius-40);}
.radius80-full {border-radius: var(--radius-80);}

.mbm-difference {mix-blend-mode: difference;}
.mbm-overlay {mix-blend-mode: overlay;}
.mbm-multiply {mix-blend-mode: multiply;}
.mbm-screen {mix-blend-mode: screen;}


html {
  font-feature-settings: "palt";
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
    font-feature-settings: inherit;
    color: var(--textColor-def);
    font-size: var(--font-16);
    line-height: 1.4;
    letter-spacing: 0.05em;
}

body * {
  font-feature-settings: inherit;
}

h1 {
	font-size: var(--font-51);
}
@media screen and (max-width: 1024px) {h1 {font-size: 40px;}}
@media screen and (max-width: 768px) {h1 {font-size: 32px;}}
@media screen and (max-width: 480px) {h1 {font-size: 26px;}}
h2 {
	font-size: var(--font-51);
}
@media screen and (max-width: 1024px) {h2 {font-size: 40px;}}
@media screen and (max-width: 768px) {h2 {font-size: 32px;}}
@media screen and (max-width: 480px) {h2 {font-size: 26px;}}
h3 {
	font-size: var(--font-41);
}
@media screen and (max-width: 1024px) {h3 {font-size: 34px;}}
@media screen and (max-width: 768px) {h3 {font-size: 28px;}}
@media screen and (max-width: 480px) {h3 {font-size: 22px;}}
h4 {
	font-size: var(--font-28);
}
@media screen and (max-width: 1024px) {h4 {font-size: 24px;}}
@media screen and (max-width: 768px) {h4 {font-size: 20px;}}
@media screen and (max-width: 480px) {h4 {font-size: 18px;}}
h5 {
	font-size: var(--font-21);
}
@media screen and (max-width: 1024px) {h5 {font-size: 19px;}}
@media screen and (max-width: 768px) {h5 {font-size: 17px;}}
@media screen and (max-width: 480px) {h5 {font-size: 15px;}}
h6 {
	font-size: var(--font-16);
}
@media screen and (max-width: 1024px) {h6 {font-size: 15px;}}
@media screen and (max-width: 768px) {h6 {font-size: 14px;}}
@media screen and (max-width: 480px) {h6 {font-size: 13px;}}

p {
	font-size: var(--font-16);
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    display: block;
}
audio,canvas,progress,video {
    display: inline-block;
    vertical-align: baseline;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden],template {
    display: none;
}
a:active,a:hover {
    outline: 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
p {
   font-feature-settings: "palt";
}

.blur {
	background-color: rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(100px);
	-webkit-backdrop-filter: blur(100px);
}

/* Breakpoint */

/* 1440px以下*/
@media screen and (max-width: 1440px) {
}

/* 1024x以下*/
@media screen and (max-width: 1024px) {
}

/* 768x以下*/
@media screen and (max-width: 768px) {
}

/* 480px以下*/
@media screen and (max-width: 480px) {
}




/* 1441px以上*/
@media screen and (min-width: 1441px) {
}

/* 1025px以上*/
@media screen and (min-width: 1025px) {
}

/* 769x以上*/
@media screen and (min-width: 769px) {
}

/* 481px以上*/
@media screen and (min-width: 481px) {
}



/* wrapper */
#wrapper {
    overflow: hidden;
    background: var(--color-bg);
}



/* header */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9998;
  background: transparent;
  isolation: auto;
  /* will-change: transform; */
}

.header-bg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  
  pointer-events: none; /* 下にあるコンテンツのクリックを邪魔しない */
  transition: all 0.3 var(--ease-default);
}

#logo {
  position: relative;
  left:50%;
  padding: 40px 0;
  margin-left: -28px;
  z-index: 2;
  transition: all 0.3 var(--ease-default);
}
@media screen and (max-width: 768px) {
  #logo {
      padding: 20px 0;
      margin-left: -22px;
  }
}
@media screen and (max-width: 480px) {
  #logo {
      padding: 16px 0;
      margin-left: -22px;
  }
}

#logo a {
  display: inline-block;
}

#lottie {
  width: 56px;
  display: block;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
@media screen and (max-width: 768px) {
  #lottie {
    width: 44px;
  }
}
@media screen and (max-width: 480px) {
}

#lottie svg {
  display: block;
}

/* footer */

footer {
  width: 100%;
  height: 80px;
  height: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9998;
}

footer #pagetop {
  line-height: 0;
}

footer #pagetop a {
  position: absolute;
  display: inline-block;
  width: 160px;
  height: 80px;
  left:50%;
  bottom: 0;
  margin: 0 0 0 -80px;
  padding: 0;
  border-radius: 50% / 100% 100% 0 0;
  backdrop-filter: blur(40px);
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.4s var(--ease-accelerationdeceleration-looser);
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.4);

  position: relative; /* SVG配置用 */
  overflow: hidden;

  transform: translateY(100%);
  opacity: 0;
}

footer #pagetop a img {
  display: block;
}

footer #pagetop a:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.8);
}

/* SVG */
.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 80px;
}

/* 線 */
.progress-bg,
.progress-bar {
  fill: none;
  stroke-linecap: butt; /* ← まずはこれにする（ズレ確認用） */
}

/* 背景 */
.progress-bg {
  stroke: rgba(0,0,0,0.2);
}

/* 本体 */
.progress-bar {
  stroke: #000;
  stroke-width: 8;

  stroke-dasharray: 245;
  stroke-dashoffset: 245;
}


/* アイコン中央寄せ */
footer #pagetop a img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  z-index: 2;
}




/* #main */

main {
  width: 100%;
}


/* 遷移 */
#page-transition {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 1;
  pointer-events: none;
  z-index: 9999;
}


#js {
  display: none;
}


/* split text */
.split-line {
  overflow: hidden;
}

.split-line .line {
  display: block;
  overflow: hidden;
}

.split-line .line-inner {
  display: block;
}

/* shuffle-text */
.shuffle-text {
  display: inline-block;/* 高さと幅の計算を崩さないために必須 */
  transition: opacity 0.2s ease;/* 画面外に消える時に少し滑らかになります */
}