@charset "UTF-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ＭＳ ゴシック", "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ StdN", "Hiragino Kaku Gothic StdN", sans-serif;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-align: left;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ul {
  list-style: none;
}

ol {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  text-decoration: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  color: #000;
}

a:focus {
  text-decoration: none;
}

img {
  width: 100%;
  vertical-align: bottom;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

button {
  border-color: transparent;
}

input[type="text"],
input[type="email"],
textarea,
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

address {
  font-style: normal;
}

input[type="text"] {
  width: 100%;
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 3px;
  border: 1px solid #ddd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

textarea {
  width: 100%;
  padding: 10px 15px;
  border-radius: 3px;
  height: 200px;
  border: 1px solid #ddd;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.hhr .video_play_pause {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

/* ==============================
container
============================= */
.m-container {
  padding: 60px 1.25rem;
  margin-right: auto;
  margin-left: auto;
  max-width: 65rem;
}

/* ==============================
mask
============================= */
.m-mask {
  background-color: #000;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0.5;
  z-index: 10;
}

/* ==============================
fit
============================= */
.m-fit {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  font-family: "object-fit: cover;";
}

/* ==============================
color
============================= */
.m-orange-color {
  color: #f19100;
}

/* ==============================
表示・非表示
============================= */
/* max-width: 991.98px */
.m-lg-show-inline {
  display: none;
}

@media screen and (max-width: 991.98px) {
  .m-lg-show-inline {
    display: inline;
  }
}

.m-lg-hide-inline {
  display: inline;
}

@media screen and (max-width: 991.98px) {
  .m-lg-hide-inline {
    display: none;
  }
}

/* max-width: 575.98px */
.m-sm-show-inline {
  display: none;
}

@media screen and (max-width: 575.98px) {
  .m-sm-show-inline {
    display: inline;
  }
}

.m-sm-hide-inline {
  display: inline;
}

@media screen and (max-width: 575.98px) {
  .m-sm-hide-inline {
    display: none;
  }
}

/* ==============================
up arrow
============================= */
.m-upArrow {
  width: 3.75rem;
  height: 3.75rem;
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 15;
  opacity: 0;
}

@media screen and (max-width: 575.98px) {
  .m-upArrow {
    width: 2.5rem;
    height: 2.5rem;
    bottom: 0.9375rem;
    right: 0.9375rem;
  }
}

/* ===================================
header
=================================== */
.header {
  position: absolute;
  width: 100%;
  z-index: 11;
}

@media screen and (max-width: 575.98px) {
  .header {
    background-color: #fff;
    position: fixed;
    z-index: 100;
  }
}

.header__wrap {
  margin: 0 auto;
  padding: 0.625rem 1.25rem;
  max-width: 85rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header__logo {
  width: 4.75rem;
}

@media screen and (max-width: 575.98px) {
  .header__logo {
    width: 12vw;
  }
}

.header__nav {
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 575.98px) {
  .header__nav {
    font-size: 14px;
    font-size: 4.375vw;
  }
}

.header__nav nav {
  padding: 0 1.25rem 0 0;
  border-right: 1px solid #fff;
}

.header__nav nav a {
  color: #fff;
}

@media screen and (max-width: 575.98px) {
  .header__nav nav {
    padding: 0 0.625rem 0 0;
    display: none;
  }
}

.header__contact {
  padding: 0 0 0 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
}

@media screen and (max-width: 575.98px) {
  .header__contact {
    padding: 0;
    font-size: 12px;
    font-size: 3.75vw;
  }
}

.header__contact img {
  padding: 0 0.625rem 0 0;
  width: 1.5625rem;
}

@media screen and (max-width: 575.98px) {
  .header__contact img {
    padding: 0 0.3125rem 0 0;
  }
}

.header__contact p {
  height: 2rem;
  color: #fff;
}

@media screen and (max-width: 575.98px) {
  .header__contact p {
    color: #000;
    line-height: 27px;
    line-height: 8.4375vw;
  }
}

/* ===================================
footer
=================================== */
.footer {
  padding: 4.375rem 0;
  background-color: #000;
}

.footer__wrap {
  text-align: center;
}

.footer__content {
  padding: 0.3125rem 1.875rem;
  background-color: #fff;
  display: inline-block;
}

.footer__contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.25rem;
  -webkit-transition: .6;
  transition: .6;
}

@media screen and (max-width: 575.98px) {
  .footer__contact {
    font-size: 16px;
    font-size: 5vw;
  }
}

.footer__contact:hover {
  opacity: .5;
}

.footer__contact img {
  margin: 0 0.625rem 0 0;
  width: 1.5625rem;
  text-align: center;
}

/* ===================================
home
=================================== */
/*====== mv ======*/
.mv {
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #000;
}

@media screen and (max-width: 575.98px) {
  .mv {
    padding: 3.375rem 0 0;
  }
}

.mv__image {
  position: relative;
  z-index: 3;
  visibility: visible;
  opacity: 1;
  height: 37.5rem;
}

@media screen and (min-width: 1900px) {
  .mv__image {
    height: 47.5rem;
  }
}

@media screen and (max-width: 991.98px) {
  .mv__image {
    height: 28.75rem;
  }
}

@media screen and (max-width: 575.98px) {
  .mv__image {
    height: 26.25rem;
  }
}

.mv__catch {
  width: 100%;
  z-index: 11;
  color: #fff;
  text-align: center;
  position: absolute;
  text-align: center;
  top: 7.5rem;
  line-height: 1.5;
}

@media screen and (max-width: 575.98px) {
  .mv__catch {
    top: 7.5rem;
    line-height: 1.5rem;
  }
}

.mv__catch span:first-child {
  padding: 0 0 0.625rem;
  font-size: 2.5rem;
  border-bottom: 1px solid #fff;
}

@media screen and (max-width: 1199.98px) {
  .mv__catch span:first-child {
    font-size: 2rem;
  }
}

@media screen and (max-width: 991.98px) {
  .mv__catch span:first-child {
    font-size: 1.625rem;
  }
}

@media screen and (max-width: 575.98px) {
  .mv__catch span:first-child {
    margin: 0 0 20px;
    display: inline-block;
    font-size: 14px;
    font-size: 4.375vw;
  }
}

.mv__catch span:last-child {
  font-size: 3.875rem;
  font-weight: 700;
}

@media screen and (max-width: 1199.98px) {
  .mv__catch span:last-child {
    font-size: 3rem;
  }
}

@media screen and (max-width: 991.98px) {
  .mv__catch span:last-child {
    font-size: 2.625rem;
  }
}

@media screen and (max-width: 575.98px) {
  .mv__catch span:last-child {
    font-size: 22px;
    font-size: 6.875vw;
  }
}

.mv__scroll {
  color: #fff;
  text-align: center;
  width: 3.125rem;
  z-index: 11;
  bottom: 0;
  font-size: 0.75rem;
  position: absolute;
  left: 48%;
  right: 52%;
}

@media screen and (max-width: 575.98px) {
  .mv__scroll {
    font-size: 11px;
    font-size: 3.4375vw;
    left: 45%;
    right: 55%;
  }
}

.mv__scroll:after {
  margin: 0.625rem auto 0;
  display: block;
  width: 0.0625rem;
  height: 2.125rem;
  background-color: #fff;
  content: "";
}

@media screen and (max-width: 575.98px) {
  .mv__scroll:after {
    margin: 0.3125rem auto 0;
    height: 0.875rem;
  }
}

/* HOLOGRAM HOME PROJECTOR */
.hhr {
  padding: 5rem 0;
  text-align: center;
}

.hhr__title {
  font-size: 3rem;
}

@media screen and (max-width: 575.98px) {
  .hhr__title {
    font-size: 18px;
    font-size: 5.625vw;
  }
}

.hhr__title:after {
  margin: 0.625rem auto 0;
  max-width: 6.25rem;
  width: 80%;
  height: 0.0625rem;
  background-color: #a7a7a7;
  display: block;
  content: "";
}

.hhr__text {
  margin: 2.5rem 0;
  padding: 0 1.25rem;
  font-size: 1.375rem;
}

@media screen and (max-width: 575.98px) {
  .hhr__text {
    font-size: 16px;
    font-size: 5vw;
  }
}

.hhr__text p {
  margin: 0 0 1.25rem;
}

.hhr__video {
  margin: 0 auto;
  max-width: 27.5rem;
  position: relative;
}

.hhr__video video {
  max-width: 27.5rem;
}

@media screen and (max-width: 575.98px) {
  .hhr__video video {
    width: 90%;
  }
}

.hhr .video_play_pause {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #fff;
  color: #000;
  font-size: 3.75rem;
  z-index: 10;
  cursor: pointer;
}

.hhr .video_play_pause > input {
  display: none;
}

.hhr .video_play_pause > input:not(:checked) + span::before {
  position: absolute;
  top: 50%;
  left: 42%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0px;
  height: 0px;
  border: 0.25em solid transparent;
  border-left: 0.3em solid currentColor;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "";
}

.hhr .video_play_pause > input:checked + span::before,
.hhr .video_play_pause > input:checked + span::after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  width: 0.1em;
  height: 0.5em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "";
}

.hhr .video_play_pause > input:checked + span::before {
  left: 40%;
}

.hhr .video_play_pause > input:checked + span::after {
  left: 60%;
}

/* LIVE ART BOOKSの活用イメージ */
.utilizationImage__title {
  text-align: center;
  padding: 0 1.25rem;
}

.utilizationImage__title span {
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  font-size: 1.875rem;
  border: 1px solid #000;
  background-color: #fff;
  display: inline-block;
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__title span {
    padding: 1.875rem 1.25rem;
    font-size: 20px;
    font-size: 6.25vw;
  }
}

.utilizationImage__wrap {
  margin: -3.75rem 0 0;
  padding: 10rem 0 6.25rem;
  background: url("../img/section1-bg.jpg") repeat top center;
}

.utilizationImage__caption {
  padding: 7.5rem 0 3.75rem;
  text-align: center;
  font-size: 1.625rem;
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__caption {
    font-size: 18px;
    font-size: 5.625vw;
  }
}

.utilizationImage__list {
  padding: 0 1.25rem;
}

.utilizationImage__list__item {
  margin: 0 auto 5rem;
  padding: 1.875rem;
  max-width: 62.5rem;
  background-color: #fff;
  border-radius: 3.75rem;
  position: relative;
}

.utilizationImage__list__item:last-child {
  margin: 0 auto;
}

.utilizationImage__list__item__number {
  font-size: 1.875rem;
  border-radius: 50%;
  width: 3.75rem;
  height: 3.75rem;
  border: 1px solid #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #fff;
  position: absolute;
  top: -1.9375rem;
  left: 46%;
  right: 56%;
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__list__item__number {
    left: 41%;
    right: 59%;
  }
}

.utilizationImage__list__item__dt {
  padding: 2.5rem 3.75rem 1.25rem 0;
  font-size: 1.875rem;
  text-align: center;
}

.utilizationImage__list__item__dt:after {
  margin: 0.625rem auto 0;
  max-width: 6.25rem;
  width: 80%;
  height: 0.0625rem;
  background-color: #a7a7a7;
  display: block;
  content: "";
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__list__item__dt {
    padding: 1.25rem 0 1.25rem;
    font-size: 18px;
    font-size: 5.625vw;
  }
}

.utilizationImage__list__item__dd {
  padding: 0.625rem 0;
  font-size: 1.25rem;
  text-align: center;
}

@media screen and (max-width: 575.98px) {
  .utilizationImage__list__item__dd {
    font-size: 0.875rem;
  }
}

.utilizationImage__list__item__dd .annotation {
  font-size: 0.75rem;
}

.utilizationImage__list__item__dd p {
  margin: 0 0 0.9375rem;
}

.utilizationImage__list__item__annotation {
  font-size: 0.875rem;
  color: #808080;
}

/*# sourceMappingURL=style.css.map */