@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

/* Reset-----------------------------------------------------------*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, code, em, font, img,  small, strong, ol, ul, li, form, label, table,  tr, th, td, dl, dd, dt, article, aside, footer, header, menu, nav, section, summary, textarea,main, figure,figcaption{margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
i{font-style:normal;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} html {-webkit-text-size-adjust:none;-webkit-touch-callout: none;} a {outline:none;text-decoration:none;} iframe {border:none;} ul, ol { list-style: none;} img { border: none; vertical-align:bottom;max-width: 100%;height: auto;width /***/:auto;} :focus { outline: 0;}
table { border-collapse: collapse;border-spacing:0;font-size:inherit;font:100%;} h1, h2, h3, h4, h5, h6 {line-height:1.4;} html {height: 100%;font-size: 62.5%;}
body {
font-size: 1rem ;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-style: normal;
color: var(--color01);
background: #000;
font-weight: normal;
letter-spacing:0.08rem;
font-feature-settings :palt;
height: 100%;
overflow-x:hidden;
line-height: 1.8;
scroll-behavior: smooth;
}
@-ms-viewport { width: device-width; }

:root {
  --color00: #fff;
  --color01: #1b1b1b;
  --color02: #f8f8f8;
  --color03: #e9e9e9;
}


/* common -----------------------------------------------------------*/
body { overflow-x: hidden; position: relative;}
*,*::before,*::after { box-sizing: border-box;}

a { color: var(--base-color);}

button{ font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; color: var(--base-color);}
input, select, textarea{ font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.5rem; background:#fff; border:1px solid #d1d0ce; font-size: 1.4rem; padding: 0.8rem; color: var(--base-color);}
select{ padding:0.8rem 3rem 0.8rem 1rem; cursor:pointer; color: var(--base-color);}
select::-ms-expand { display: none;}
.select{ position:relative;}
.select::after { right: 1rem; top: calc(35%); width: 0.7rem; height: 0.7rem; transform: rotate(-45deg); position: absolute; display: block; border-bottom: 2px solid var(--third-color); border-left: 2px solid var(--third-color); content:''; -index: 2;}
input[type=checkbox], input[type=radio] { display: none;}
input[type=checkbox] + label, input[type=radio] + label { position: relative; display: inline-block; padding: 0 0 0 2.5rem; margin: 0; vertical-align: middle; cursor: pointer;}
input[type=checkbox] + label:after, input[type=radio] + label:after { position: absolute; top: 50%; left: 0; display: block; border: 1px solid #d1d0ce; border-radius: 0.2rem; background:#fff; content: ''; margin-top: -1rem; width: 2rem; height: 2rem;}
input[type=checkbox] + label:before, input[type=radio] + label:before { left: 0; top:0; width: 20px; height: 13px; transform: rotate(-45deg); position: absolute; display: block; border-bottom: 2px solid var(--first-color); border-left: 2px solid var(--first-color); content: ''; opacity: 0; z-index: 2;}
input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before { opacity: 1;}
input[type=checkbox] + label:hover, input[type=radio] + label:hover { opacity: 0.7;}
label{ user-select: none;}
input[type=submit]{ border:none;}
textarea{resize: vertical;}

hr { display: block; height: 1px; border: 0; border-top: 1px dotted #e4e4e4; margin: 1rem 0; padding: 0; }
hr.bd_none{ display: block; height: 1px; border: 0; border-top:none; margin: 1rem 0; padding: 0; }

.txt_al { text-align:left !important; }
.txt_ar { text-align:right !important; }
.txt_ac { text-align:center !important; }

.w15{ width:15% !important;}
.w25{ width:25% !important;}
.w30{ width:30% !important;}
.w45{ width:45% !important;}
.w50{ width:50% !important;}
.w60{ width:60% !important;}
.w65{ width:65% !important;}
.w100{ width:100% !important;}

.fixed { position: fixed; width: 100%; height: 100%;}
.line-through{ text-decoration:line-through;}
.-nowrap{ white-space: nowrap; overflow-x: scroll; scroll-behavior: smooth; }

/* header__ -------------------------------------*/
[id^="header__"] { width:100%; height:100vh; display: block; position: relative;}
h1{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 img{ width: 30rem; max-width: 50vw;}

/* video */
.video{
  width: 100%;
  height: 100vh;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #000;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (min-width: 768px) {
  /* kv */
  h1{
    min-width: 960px;
  }
  /* video */
  .video{
    min-width: 960px;
  }
}
x