@charset "UTF-8";
/* Reset css */
/* ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

html {
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
}
body::-webkit-scrollbar {
  display: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  list-style: none;
}

dt {
  font-weight: var(--font-bold);
}

b,
strong {
  font-weight: var(--font-bold);
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
}

th {
  text-align: left;
  font-weight: var(--font-bold);
}



/* Lenis */
/* ============================================ */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}



/* Style */
/* ============================================ */
:root {
  --ease: cubic-bezier(.215,.61,.355,1);
  --white: #FFF;
  --ttlColor: #A89856;
  --blue: #001FB0;
  --black: #0D0E38;
  --font-normal: 400;
  --font-bold: 700;
  --appear-move: opacity 1000ms var(--ease);
  --font-small: clamp(.6rem, 2.7vw, 1rem);
  --font-large: clamp(.9rem, 3.2vw, 1.4rem);
  --font-h2: clamp(2rem, 8vw, 3.5rem);
  --opacityFade: opacity 1000ms var(--ease);
}
::selection {
  color: var(--black);
  background-color: var(--ttlColor);
}
body {
  background:var(--blue);
  margin:0;
  text-align:center;
  color: var(--white);
  font-size: 3.4vw;
  font-weight: var(--font-normal);
  transition: background-color 1200ms var(--ease);
}
.visually-hidden {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pc {
  display: none;
}
.sp {
  display: inline-block;
}
@media print, screen and (min-width: 769px) {
  :root {
    --font-small: clamp(.6rem, .85vw, 1rem);
    --font-large: clamp(.9rem, 1.1vw, 1.4rem);
    --font-h2: 2.57vw;
  }
  body {
    font-size: 1.1vw;
  }
  .pc {
    display: inline-block;
  }
  .sp {
    display: none;
  }

}



/* Font */
/* ============================================ */
.en {
  font-family: "sui-generis", sans-serif;
  font-weight: var(--font-normal);
  font-style: normal;
}
.menu {
  font-family: "sui-generis", sans-serif;
  font-weight: var(--font-bold);
  font-style: normal;
}



/* HOME */
/* ============================================ */
header {
  position: fixed;
  top: 3vw; left: 0; right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* 左右に寄せる */
  align-items: center;
  width: 92vw;
  z-index: 10;
}
h1#logo {
  width: 14.4vw;
}
header .menu {
  display: flex;
  font-size: 3.2vw;
  gap: 3vw;
}
#wrap {
  position: relative;
}
#tagline {
  position: fixed;
  top: 0;
  height: 76.5vw;
  width: 100vw;
  padding: 0 13vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.layer1 {
  position: relative;
  width: 90vw;
  margin: 0 auto 30vw;
  background-color: var(--blue);
}
section h2 {
  font-size: 2.2vw;
  width: 100%;
  height: 4.5vw;
  text-align: left;
}
#keyvisual {
  position: relative;
  margin: 65vw 0 0;
}
.para {
  position: relative;
  height: 470vw;
  overflow: clip;
}
#visual {
  position: sticky;       /* ビューポートに“貼る” */
  top: 0;
  height: 262vw;
  background-color: var(--blue);
  pointer-events: none;   /* 背景なので触れない */
}
#art_sp {
  display: block;
  width: 100%;
  height: 262vw;
  object-fit: cover;
  transform: translateY(-17vw);
}
#art_pc {
  display: none;
}
#copytxt {
  position: relative;
  font-size: 21vw;
  line-height: 1.2;
  margin-top: -12vw;
}
#company {
  position: relative;
  width: 100%;
  padding: 20vw 0 10vw;
}
#company_content {
  text-align: left;
  padding: 13vw 10vw 9vw;
  background-color: var(--black);
}
#profile dt {
  color: var(--ttlColor);
  font-family: "sui-generis", sans-serif;
  font-weight: var(--font-normal);
  font-style: normal;
  font-size: 2.2vw;
  letter-spacing: .1em;
}
#profile dd {
  margin-bottom: 4vw;
}
#access {
  padding: 20vw 0 0;
}
.map-wrap{
  position: relative;
  width: 100%;
  height: 100vw;
  overflow: hidden;
}
.map-wrap iframe {
  margin: -65vw 0 0;
  width:100%;
  height:240vw;
  border:0;
  filter:grayscale(100%) contrast(120%) brightness(90%);
}
.map-wrap.tint::after{
  content:""; position:absolute; inset:0;
  background:#001fb0;
  opacity: .3;
  pointer-events:none;
}
.marquee{
  position: relative;
  overflow: hidden;
  width: 100%;
  font-size: 27vw;
  line-height: 1;
  height: 1.2em;
  --dur: 12s;
}
.marquee .row{
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: slide var(--dur) linear infinite;
}
@keyframes slide{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
#copyrights {
  font-size: 2vw;
  height: 6vw;
}

@media print, screen and (min-width: 769px) {
  header {
    position: fixed;
    top: 1vw; left: 0; right: 0;
    margin: 0 auto;
    display: flex;
    width: 85vw;
  }
  h1#logo {
    width: 6vw;
  }
  header .menu {
    font-size: 1.16vw;
  }
  #tagline {
    height: 26vw;
    padding: 0 35vw;
  }
  .layer1 {
    margin: 0 auto 0;
  }
  section h2 {
    font-size: .75vw;
    height: 1.5vw;
  }
  #keyvisual {
    position: relative;
    margin: 24vw 0 0;
  }
  .para {
    position: relative;
    height: 110vh;
    background-color: var(--blue);
  }
  #art_sp {
    display: none;
  }
  #visual {
    width: 100vw;
    height: 100vh;
    background: url("./images/keyvisual_pc.webp") no-repeat center -5.6vw / 104%;
    background-attachment: fixed;
  }
  #copytxt {
    display: none;
  }
  #company {
    padding: 8vw 0 0;
  }
  #company_content {
    padding: 8vw 10vw 4.5vw;
  }
  #profile dt {
    font-size: .65vw;
  }
  #profile dd {
    margin-bottom: 3.5vw;
  }
  #access {
    padding: 8vw 0 8vw;
  }
  .map-wrap{
    position: relative;
    width: 100%;
    height: 32vw;
    overflow: hidden;
  }
  .map-wrap iframe {
    margin: -15vw 0 0;
    width:100%;
    height:64vw;
    border:0;
    filter:grayscale(100%) contrast(120%) brightness(90%);
  }
  .marquee{
    height: 1.05em;
    font-size: 17vw;
    background-color: var(--blue);
  }
  #copyrights {
    font-size: .8vw;
    height: 2.5vw;
  }
}