@charset "UTF-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
@import url("https://fonts.googleapis.com/css2?family=Marcellus+SC&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;600&display=swap");
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 {
  line-height: 1; }

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

nav ul {
  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; }

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

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #595757;
  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; }

a {
  color: #595757;
  text-decoration: none; }

a:hover {
  text-decoration: none; }

p {
  line-height: 1.8em;
  color: #595757; }

a img {
  border-style: none; }
  a img:hover {
    opacity: 0.7; }

/** float **/
.fl0 {
  float: left; }

.fl10 {
  float: left;
  margin-right: 10px; }

.fr0 {
  float: right; }

.fr10 {
  float: right;
  margin-left: 10px; }

/** padding **/
.pb10 {
  padding-bottom: 10px; }

.pb20 {
  padding-bottom: 20px; }

.pb30 {
  padding-bottom: 30px; }

.pb40 {
  padding-bottom: 40px; }

.pb50 {
  padding-bottom: 50px; }

.pb60 {
  padding-bottom: 60px; }

.pb70 {
  padding-bottom: 70px; }

/** margin **/
.mb10 {
  margin-bottom: 10px; }

.mb20 {
  margin-bottom: 20px; }

.mb30 {
  margin-bottom: 30px; }

.mb40 {
  margin-bottom: 40px; }

.mb50 {
  margin-bottom: 50px; }

.mt10 {
  margin-top: 10px; }

.mt20 {
  margin-top: 20px; }

.mt30 {
  margin-top: 30px; }

.mt40 {
  margin-top: 40px; }

.mt50 {
  margin-top: 50px; }

.ml10 {
  margin-left: 10px; }

.ml20 {
  margin-left: 20px; }

.ml30 {
  margin-left: 30px; }

.ml40 {
  margin-left: 40px; }

.ml50 {
  margin-left: 50px; }

.mr10 {
  margin-right: 10px; }

.mr20 {
  margin-right: 20px; }

.mr30 {
  margin-right: 30px; }

.mr40 {
  margin-right: 40px; }

.mr50 {
  margin-right: 50px; }

/** text **/
.tcenter {
  text-align: center; }

.tright {
  text-align: right; }

.tleft {
  text-align: left; }

/** clear **/
.clear {
  clear: both; }

.pc {
  display: block; }
  @media screen and (max-width: 767px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 767px) {
    .sp {
      display: block; } }

.flb_sb, .wrapper .inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.flb_ct, .loading .logo {
  display: flex;
  justify-content: center; }

.flb_st, .company dl {
  display: flex;
  justify-content: flex-start; }

.flb_ed {
  display: flex;
  justify-content: flex-end; }

.fadeIn {
  opacity: 0;
  transition: 3s; }
  .fadeIn.is-show {
    opacity: 1; }

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50px);
  transition: 2s; }
  .fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn_left {
  opacity: 0;
  transform: translate(-50px, 0);
  transition: 2s; }
  .fadeIn_left.is-show {
    transform: translate(0, 0);
    opacity: 1; }

.fadeIn_right {
  opacity: 0;
  transform: translate(50px, 0);
  transition: 2s; }
  .fadeIn_right.is-show {
    transform: translate(0, 0);
    opacity: 1; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes fade-out {
  0% {
    opacity: 1;
    z-index: 9999; }
  100% {
    opacity: 0;
    z-index: 0; } }
@keyframes imgopacity {
  0% {
    opacity: 1; }
  100% {
    opacity: 0.5; } }
@keyframes logocolor {
  0% {
    filter: brightness(0) invert(1); }
  100% {
    filter: none; } }
@-webkit-keyframes rainbow {
  0% {
    background-position: 0% 82%; }
  50% {
    background-position: 100% 19%; }
  100% {
    background-position: 0% 82%; } }
@-moz-keyframes rainbow {
  0% {
    background-position: 0% 82%; }
  50% {
    background-position: 100% 19%; }
  100% {
    background-position: 0% 82%; } }
@-o-keyframes rainbow {
  0% {
    background-position: 0% 82%; }
  50% {
    background-position: 100% 19%; }
  100% {
    background-position: 0% 82%; } }
@keyframes rainbow {
  0% {
    background-position: 0% 82%; }
  50% {
    background-position: 100% 19%; }
  100% {
    background-position: 0% 82%; } }
@keyframes comp-in {
  0% {
    opacity: 0;
    z-index: -1; }
  90% {
    opacity: 1; }
  100% {
    opacity: 1;
    z-index: 1; } }
@keyframes comp-out {
  0% {
    opacity: 1;
    z-index: 1; }
  90% {
    opacity: 0; }
  100% {
    opacity: 0;
    z-index: -1; } }
body {
  background: #fff;
  line-height: 1.7em;
  font-size: 15px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #595757;
  -webkit-text-size-adjust: 100%; }

img {
  max-width: 100%; }

* {
  box-sizing: border-box; }

/* ローディング */
.loading {
  background: #fff;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  -webkit-animation: fade-out 3s ease 7s 1 forwards;
  animation: fade-out 3s ease 7s 1 forwards;
  z-index: 9999; }
  .loading.loaded {
    opacity: 0;
    visibility: hidden; }
  .loading ul {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    -webkit-animation: fade-out 2s ease 3s 1 forwards;
    animation: fade-out 2s ease 3s 1 forwards; }
    .loading ul li {
      display: block;
      color: #ccc;
      margin: 0 30px;
      opacity: 0; }
      .loading ul li img {
        display: block; }
      .loading ul li:nth-child(-n + 3) img {
        width: 25px; }
      .loading ul li:nth-child(4) {
        animation-name: fadein;
        animation-duration: 10s; }
        .loading ul li:nth-child(4) img {
          width: 60px; }
      .loading ul li:nth-child(1), .loading ul li:nth-child(3) {
        transform: rotate(50deg);
        margin-top: 10px; }
      .loading ul li:nth-child(2) {
        transform: rotate(120deg);
        margin-top: 40px; }
      .loading ul li:nth-child(1) {
        -webkit-animation: fade-in 1s ease 0.6s 0.4 forwards;
        animation: fade-in 1s ease 0.6s 0.4 forwards; }
      .loading ul li:nth-child(2) {
        -webkit-animation: fade-in 1s ease 1.2s 0.4 forwards;
        animation: fade-in 1s ease 1.2s 0.4 forwards; }
      .loading ul li:nth-child(3) {
        -webkit-animation: fade-in 1s ease 1.8s 0.4 forwards;
        animation: fade-in 1s ease 1.8s 0.4 forwards; }
      .loading ul li:nth-child(4) {
        -webkit-animation: fade-in 1s ease 2.4s 0.4 forwards;
        animation: fade-in 1s ease 2.4s 0.4 forwards; }
  .loading .logo {
    width: 100vw;
    height: 100vh;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0; }
    .loading .logo img {
      display: block;
      width: min(90vw, 300px);
      height: auto;
      opacity: 0;
      -webkit-animation: fade-in 3s ease 4s 1 forwards;
      animation: fade-in 3s ease 4s 1 forwards; }

/* 背景 */
.paper, .wrapper::before {
  background-image: repeating-linear-gradient(to bottom, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px); }

.cross {
  background: radial-gradient(circle, transparent 20%, #fff 20%, #fff 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #fff 20%, #fff 80%, transparent 80%, transparent) 50px 50px, linear-gradient(#eee 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #eee 2px, #fff 2px) -1px 0;
  background-size: 25px 25px, 50px 25px, 25px 25px, 25px 25px; }

.gradation {
  background: linear-gradient(124deg, #000, #333, #666, #999, #222, #E5E5E5, #fff, #D8D8D8, #A5A5A5);
  background-size: 1800% 1800%;
  -webkit-animation: rainbow 18s ease infinite;
  -z-animation: rainbow 18s ease infinite;
  -o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }

/* コンテンツ */
.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; }
  .wrapper::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5; }
  .wrapper .inner {
    align-items: center;
    position: relative;
    width: 80%;
    margin: auto;
    height: 80%;
    opacity: 0; }
    @media screen and (max-width: 767px) {
      .wrapper .inner {
        flex-direction: column; } }
    .wrapper .inner h1 {
      width: 20%;
      cursor: pointer; }
      @media screen and (max-width: 767px) {
        .wrapper .inner h1 {
          width: 60%; } }
    .wrapper .inner .btn {
      width: 30%;
      height: 100%;
      display: block;
      box-shadow: 0 32px 30px -30px rgba(0, 0, 0, 0.6);
      /*box-shadow: 0 2px 4px rgba(255,255,255,0.3);*/
      position: relative;
      transition: .5s; }
      @media screen and (max-width: 767px) {
        .wrapper .inner .btn {
          width: 100%;
          height: 40%; } }
      .wrapper .inner .btn::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.3);
        transition: .5s; }
      .wrapper .inner .btn img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .wrapper .inner .btn b {
        color: #fff;
        font-family: "Marcellus SC", serif;
        font-size: min(1.6em, 30px);
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        letter-spacing: 0.1em;
        text-align: center;
        line-height: 1.4em;
        transition: .3s;
        padding-top: 90px; }
        .wrapper .inner .btn b span {
          display: block;
          text-align: center;
          color: #fff;
          font-size: 16px;
          font-family: "Noto Serif JP", serif;
          line-height: 2em;
          font-weight: 400;
          padding-top: 22px;
          opacity: 0; }
          @media screen and (max-width: 767px) {
            .wrapper .inner .btn b span {
              font-size: 14px;
              line-height: 1.8em;
              padding-top: 15px; } }
      .wrapper .inner .btn:hover {
        box-shadow: none;
        transition: .5s; }
        .wrapper .inner .btn:hover b {
          font-size: min(2em, 40px);
          transition: .3s;
          padding-top: 0; }
          @media screen and (max-width: 767px) {
            .wrapper .inner .btn:hover b {
              font-size: min(1.8em, 40px); } }
          .wrapper .inner .btn:hover b span {
            opacity: 1; }
        .wrapper .inner .btn:hover::before {
          background: rgba(0, 0, 0, 0.6);
          transition: .5s; }
    .wrapper .inner.show {
      animation: fade-in 2s linear forwards; }

.company {
  background: #fff;
  width: 34%;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 50%;
  box-shadow: 0 32px 30px -30px rgba(0, 0, 0, 0.6);
  text-align: center;
  /*@extend .flb_ct;
  flex-direction: column;*/
  opacity: 0;
  z-index: -1;
  overflow-y: scroll;
  padding: 30px 10px;
  margin-left: -17%; }
  @media screen and (max-width: 767px) {
    .company {
      display: block;
      width: 90%;
      height: 90%;
      top: 5%;
      left: 5%;
      padding: 30px 20px;
      margin-left: 0; } }
  .company h2 {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1em;
    padding-bottom: 30px; }
    @media screen and (max-width: 767px) {
      .company h2 {
        font-size: 12px;
        line-height: 1.4em; } }
    .company h2 b {
      display: block;
      font-family: "Marcellus SC", serif;
      font-size: 30px;
      padding-bottom: 10px;
      letter-spacing: 0.2em; }
      @media screen and (max-width: 767px) {
        .company h2 b {
          font-size: 22px; } }
  .company dl {
    flex-wrap: wrap; }
    @media screen and (max-width: 767px) {
      .company dl {
        padding-bottom: 20px; } }
    .company dl dt, .company dl dd {
      letter-spacing: 0.1em; }
      @media screen and (max-width: 767px) {
        .company dl dt, .company dl dd {
          font-size: 13px; } }
    .company dl dt {
      width: 33%;
      text-align: right;
      padding-right: 30px;
      padding-bottom: 20px;
      font-weight: 500; }
      @media screen and (max-width: 767px) {
        .company dl dt {
          width: 33%;
          padding-bottom: 10px;
          padding-right: 0;
          text-align: left; } }
    .company dl dd {
      width: 60%;
      padding-bottom: 20px;
      font-weight: 300;
      text-align: left; }
      @media screen and (max-width: 767px) {
        .company dl dd {
          padding-bottom: 10px;
          letter-spacing: 0.05em;
          width: 67%; } }
      .company dl dd a:hover {
        text-decoration: underline; }
      .company dl dd dl {
        display: block; }
        .company dl dd dl dt {
          width: 100%;
          text-align: left;
          padding-right: 0;
          padding-bottom: 0; }
        .company dl dd dl dd {
          width: 100%;
          padding-bottom: 10px; }
          @media screen and (max-width: 767px) {
            .company dl dd dl dd {
              padding-bottom: 5px; } }
    .company dl ul li {
      display: block; }
  .company .close {
    display: none;
    cursor: pointer; }
    @media screen and (max-width: 767px) {
      .company .close {
        display: inline-block;
        font-size: 13px;
        font-weight: 700; } }
  .company.show {
    animation: comp-in 1s linear forwards; }
  .company.hide {
    animation: comp-out 1s linear forwards; }