@charset "utf-8";

/* CSS Document */

/* ----------------------------------------------------------------
	- common
---------------------------------------------------------------- */
html, body {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

#canvas {
  touch-action: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

* {

	margin: 0;
	padding: 0;

	/* iOS対策 */
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);

	/* タッチ対応 */
	user-select: none;
	-webkit-user-select: none;
}

::selection {

	background: none;
}

::-moz-selection {

	background: none;
}

body {

	background-color: #000;;
	overflow: hidden;
}

#overlay {

	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	/*background-color: #c2c3c4;*/
}

#loading {

	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 128px;
	height: 128px;
	margin: auto;
}

#ic_360 {

	position: absolute;
	left: 0;
	top: 0;
	width: 128px;
	height: 128px;
}

.fadein {

	animation-name: kf_fadein;
	animation-duration: 0.60s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.fadeout {

	animation-name: kf_fadeout;
	animation-duration: 0.60s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

@keyframes kf_fadein {

	0% { opacity: 0.00 }
  100% { opacity: 1.00 }
}

@keyframes kf_fadeout {

	  0% { opacity: 1.00 }
	100% { opacity: 0.00 }
}

/* ---------------------------------------------------------
   Header
--------------------------------------------------------- */
#header {
  width: 100%;
  background: #ffffff;
  padding: 20px 40px;
  position: absolute;  /* canvas 上に重ねる */
  top: 0;
  left: 0;
  z-index: 1000;
}

.header-inner {
  display: flex;
  align-items: flex-start;
}

.logo {
  width: 172px;   /* 必要に応じて調整して下さい */
  height: auto;
}

@media screen and (max-width: 768px) {
  #header {
    padding: 12px 20px;
  }

  .logo {
    width: 140px;  /* スマホ表示用に縮める例 */
    height: auto;
  }
}

/* ---------------------------------------------------------
   Footer (Shimadzu style)
--------------------------------------------------------- */
#footer {
  width: 100%;
  background: #ebebeb;                       /* 白背景 */
  color: #333;
  padding: 20px 0;
  border-top: 5px solid #adadad;          /* 上の薄いグレー線 */
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1000;
  font-size: 14px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;         /* 左メニュー / 右コピーライト */
  align-items: center;
}

/* 左のメニュー */
.footer-nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.footer-nav ul li {
  display: inline-block;
}

.footer-nav ul li a {
  color: #005bac;                         /* Shimadzu のリンク色 */
  text-decoration: none;
}

.footer-nav ul li a:hover {
  text-decoration: underline;
}

/* 右側のコピーライト画像 */
.footer-info img.footer-copy {
  height: 16px;        /* 高さ固定の方が公式っぽい */
  width: auto;
  display: block;
}
/* 縦ライン付きメニュー */
.footer-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.footer-nav ul li {
  position: relative;
  padding: 0 12px;
  font-size: 14px;
}

/* 各項目の左に縦線 */
.footer-nav ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: #888;       /* 落ち着いた薄グレー */
}

/* 最後の項目の右にも縦線を追加 */
.footer-nav ul li:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: #888;
}


/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media screen and (max-width: 768px) {

  #footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100% !important;     /* ← 最重要 */
    margin: 0 !important;        /* ← これで右寄りが確実に消える */
    padding: 15px 0;
    z-index: 2000;
  }

  .footer-inner {
    width: 100%;
    max-width: 100% !important;  /* ← 中の幅制限を解除 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    margin: 0 auto !important;   /* ← 中央確実化 */
  }

  .footer-nav ul {
    justify-content: center;
  }

  .footer-info,
  .footer-info img.footer-copy {
    text-align: center;
    margin: 0 auto;
    width: auto;
  }
  .footer-info img.footer-copy {
    height: 13px;   /* ← スマホ時の高さを13pxに */
    width: auto;    /* 横比率は自動 */
  }
}

/* タブレット（iPad）用 */
@media screen and (max-width: 1024px) {
#header {
  z-index: 3000;   /* ← footer より前、canvas より前に出す */
  position: fixed; /* ← iPad で確実に表示される */
  top: 0;
  left: 0;
  width: 100%;
}
  #footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 2000;
    padding: 15px 0;
  }

  .footer-inner {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    margin: 0 auto;
  }

  .footer-nav ul {
    justify-content: center;
  }

  .footer-info,
  .footer-info img.footer-copy {
    text-align: center;
    margin: 0 auto;
    width: auto;
  }
}


body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* メニュー部分を中央に配置する */
.menuBox {
  flex: 1;
  display: flex;
  justify-content: center;   /* 横中央 */
  align-items: center;       /* 縦中央 */
  text-align: left;
  line-height: 1.8;
  font-size: 3em;
}

/* 文字などの装飾 */
.menuBox ul {
  list-style: none;     /* デフォルトの黒丸を消す */
  padding: 0;
  margin: 0;
}
.menuBox li {
  position: relative;
  padding-left: 1em;    /* 文字を少し右にずらす */
}
.menuBox li::before {
  content: "・";        /* ← この黒丸を追加 */
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;          /* 白い丸 */
  font-size: 1em;
  line-height: 1.8;
}

.menuBox a {
  color: #fff;
  text-decoration: none;
}

.menuBox a:hover {
  text-decoration: underline;
  text-decoration-color: #fff;
}