/* parts */
/* media query */
/* layout */
/* padding, margin */
/* headline */
/* color */
/* flex */
/* other */
/* btn */
/* link */
/* topimg-area */
#topimg-area {
  width: 100%;
  height: 100vh;
  position: relative; }
  #topimg-area h1 {
    line-height: 1;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 3; }
    #topimg-area h1 span {
      color: #fff;
      width: 28em;
      height: 28em;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-box-lines: multiple;
      -moz-box-lines: multiple;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(8px);
      background: rgba(0, 0, 0, 0.2);
      border: solid 5px #fff;
      border-radius: 100%; }
      #topimg-area h1 span span {
        padding: 0;
        border: none;
        width: auto;
        height: auto;
        display: inline-block;
        backdrop-filter: none;
        background: none; }
        #topimg-area h1 span span.ja {
          font-family: fot-klee-pro, sans-serif;
          font-style: normal;
          font-weight: 500;
          font-size: 8em; }
        #topimg-area h1 span span.en {
          font-family: 'Century Gothic';
          font-size: 2.5rem;
          font-weight: bold; }
          #topimg-area h1 span span.en span {
            letter-spacing: 0.2em;
            text-indent: 0.2em; }
        #topimg-area h1 span span::before {
          display: none; }
  #topimg-area ul {
    width: 100%;
    height: 100vh;
    position: relative;
    list-style: none; }
    #topimg-area ul li {
      width: 100%;
      height: 100%;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-box-lines: multiple;
      -moz-box-lines: multiple;
      align-items: center;
      position: absolute;
      z-index: 1; }
      #topimg-area ul li img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        z-index: 1;
        opacity: 0;
        -moz-animation: topImg 27s infinite;
        -webkit-animation: topImg 27s infinite;
        animation: topImg 12s infinite; }
      #topimg-area ul li:nth-of-type(1) img,
      #topimg-area ul li:nth-of-type(1) .obj-l span.obj-inner,
      #topimg-area ul li:nth-of-type(1) .obj-r span.obj-inner,
      #topimg-area ul li:nth-of-type(1) .obj-l::after,
      #topimg-area ul li:nth-of-type(1) .obj-r::after {
        -moz-animation-delay: 0s;
        -webkit-animation-delay: 0s;
        animation-delay: 0s; }
      #topimg-area ul li:nth-of-type(2) img,
      #topimg-area ul li:nth-of-type(2) .obj-l span.obj-inner,
      #topimg-area ul li:nth-of-type(2) .obj-r span.obj-inner,
      #topimg-area ul li:nth-of-type(2) .obj-l::after,
      #topimg-area ul li:nth-of-type(2) .obj-r::after {
        -moz-animation-delay: 4s;
        -webkit-animation-delay: 4s;
        animation-delay: 4s; }
      #topimg-area ul li:nth-of-type(3) img,
      #topimg-area ul li:nth-of-type(3) .obj-l span.obj-inner,
      #topimg-area ul li:nth-of-type(3) .obj-r span.obj-inner,
      #topimg-area ul li:nth-of-type(3) .obj-l::after,
      #topimg-area ul li:nth-of-type(3) .obj-r::after {
        -moz-animation-delay: 8s;
        -webkit-animation-delay: 8s;
        animation-delay: 8s; }
      #topimg-area ul li .obj-l {
        padding-right: 10em; }
        #topimg-area ul li .obj-l::after {
          width: 0;
          height: 1px;
          position: absolute;
          top: 50%;
          left: calc(50% + 2em);
          z-index: 10;
          display: block;
          background: #fff;
          content: ''; }
      #topimg-area ul li .obj-r {
        padding-left: 10em; }
        #topimg-area ul li .obj-r::after {
          width: 0;
          height: 1px;
          position: absolute;
          top: 50%;
          right: calc(50% + 2em);
          z-index: 10;
          display: block;
          background: #fff;
          content: ''; }
      #topimg-area ul li .obj-l,
      #topimg-area ul li .obj-r {
        width: 50%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 10; }
        #topimg-area ul li .obj-l span.obj-inner,
        #topimg-area ul li .obj-r span.obj-inner {
          color: #fff;
          width: 14em;
          height: 14em;
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: -moz-flex;
          display: flex;
          -webkit-box-lines: multiple;
          -moz-box-lines: multiple;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          position: relative;
          backdrop-filter: blur(8px);
          background: rgba(0, 0, 0, 0.1);
          border: solid 1px #fff;
          border-radius: 100%;
          opacity: 0;
          -moz-animation: topImg 12s infinite;
          -webkit-animation: topImg 12s infinite;
          animation: topImg 12s infinite; }
          #topimg-area ul li .obj-l span.obj-inner span.ja,
          #topimg-area ul li .obj-r span.obj-inner span.ja {
            font-family: fot-klee-pro, sans-serif;
            font-style: normal;
            font-weight: 500;
            font-size: 1.9em;
            font-weight: bold; }
          #topimg-area ul li .obj-l span.obj-inner span.en,
          #topimg-area ul li .obj-r span.obj-inner span.en {
            font-family: 'Century Gothic';
            font-size: 0.9em; }
        #topimg-area ul li .obj-l::after,
        #topimg-area ul li .obj-r::after {
          -moz-animation: topObj 12s infinite;
          -webkit-animation: topObj 12s infinite;
          animation: topObj 12s infinite; }

@-webkit-keyframes topImg {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  33% {
    opacity: 1; }
  43% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@-moz-keyframes topImg {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  33% {
    opacity: 1; }
  43% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@keyframes topImg {
  0% {
    opacity: 0; }
  10% {
    opacity: 1; }
  33% {
    opacity: 1; }
  43% {
    opacity: 0; }
  100% {
    opacity: 0; } }
@-webkit-keyframes topObj {
  0% {
    width: 0; }
  20% {
    width: calc(50% - 16em); }
  33% {
    width: calc(50% - 16em); }
  43% {
    width: 0; }
  100% {
    width: 0; } }
@-moz-keyframes topObj {
  0% {
    width: 0; }
  20% {
    width: calc(50% - 16em); }
  33% {
    width: calc(50% - 16em); }
  43% {
    width: 0; }
  100% {
    width: 0; } }
@keyframes topObj {
  0% {
    width: 0; }
  20% {
    width: calc(50% - 16em); }
  33% {
    width: calc(50% - 16em); }
  43% {
    width: 0; }
  100% {
    width: 0; } }
.top-link {
  text-align: center;
  padding-bottom: 0.5em;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  justify-content: center;
  position: absolute;
  margin: 0 auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100; }
  .top-link a {
    width: 9em;
    height: 9em;
    margin-left: 2em;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    z-index: 10; }
    .top-link a:hover, .top-link a:focus, .top-link a:active {
      text-decoration: none;
      color: #fff; }
    .top-link a span {
      color: #fff;
      font-weight: bold;
      font-size: 1em;
      line-height: 1.2;
      width: 6.6em;
      height: 6.6em;
      margin-top: 0.2em;
      margin-left: 0.2em;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-box-lines: multiple;
      -moz-box-lines: multiple;
      flex-direction: column;
      justify-content: center;
      position: relative;
      z-index: 10;
      border-radius: 50%;
      backdrop-filter: blur(8px); }
    .top-link a:after {
      width: 100%;
      height: 100%;
      position: absolute;
      top: -1em;
      left: -1em;
      z-index: 11;
      display: block;
      background-image: url(../img/top/bg_toplink.svg);
      background-repeat: no-repeat;
      background-size: contain;
      content: ''; }

/* top-section */
.top-section {
  padding: 5em 0; }
  @media screen and (min-width: 1520px) {
    .top-section .top-section-inner {
      width: 100%;
      padding-left: calc(50% - 760px);
      padding-right: calc(50% - 760px);
      position: relative;
      text-align: left; } }
  @media screen and (min-width: 1361px) and (max-width: 1520px) {
    .top-section .top-section-inner {
      width: 100%;
      padding-left: calc(50% - 660px);
      padding-right: calc(50% - 660px);
      position: relative;
      text-align: left; } }
  @media screen and (min-width: 1281px) and (max-width: 1360px) {
    .top-section .top-section-inner {
      width: 100%;
      padding-left: 5%;
      padding-right: 5%;
      position: relative;
      text-align: left; } }
  @media screen and (min-width: 991px) and (max-width: 1280px) {
    .top-section .top-section-inner {
      width: 100%;
      padding-left: 5%;
      padding-right: 5%;
      position: relative;
      text-align: left; } }
  @media screen and (min-width: 768px) and (max-width: 990px) {
    .top-section .top-section-inner {
      width: 100%;
      padding-left: 5%;
      padding-right: 5%;
      position: relative;
      text-align: left; } }
  @media screen and (min-width: 576px) and (max-width: 767px) {
    .top-section .top-section-inner {
      width: 100%;
      padding-left: 5%;
      padding-right: 5%;
      position: relative;
      text-align: left; } }
  .top-section h2 {
    font-family: fot-klee-pro, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 2.4em;
    text-align: center;
    width: 100%;
    padding: 0.5em 0;
    margin-bottom: 0.5em;
    position: relative;
    display: inline-block; }
  .top-section ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    justify-content: space-between;
    list-style: none; }
    .top-section ul li {
      width: 32%;
      padding: 2em; }
      .top-section ul li dl dt {
        font-size: 1.8em;
        font-family: fot-klee-pro, sans-serif;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 0;
        text-align: center; }
        .top-section ul li dl dt a {
          width: 80%;
          margin: 0 10%;
          display: inline-block;
          position: relative; }
          .top-section ul li dl dt a::before {
            width: 50%;
            height: 40%;
            display: block;
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 10;
            background-image: url(../img/top/icon_img.svg);
            background-repeat: no-repeat;
            background-size: 100% auto;
            background-position: right bottom;
            content: ''; }
        .top-section ul li dl dt figure {
          width: 100%;
          padding-top: 100%;
          position: relative;
          border-radius: 50%;
          overflow: hidden;
          z-index: 1; }
          .top-section ul li dl dt figure img {
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            object-fit: cover; }
      .top-section ul li dl dd {
        font-family: fot-klee-pro, sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 1.15em;
        padding: 2em 5% 0; }
        .top-section ul li dl dd.detail-link {
          text-align: right;
          padding-top: 0.5em; }
          .top-section ul li dl dd.detail-link a {
            color: #605A44;
            letter-spacing: 0;
            width: 6em;
            height: 5.5em;
            padding-left: 1.25em;
            margin-left: auto;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: -moz-flex;
            display: flex;
            -webkit-box-lines: multiple;
            -moz-box-lines: multiple;
            align-items: center;
            background: url(../img/common/bg_more.svg);
            background-repeat: no-repeat;
            background-size: contain; }

/* mobile */
@media screen and (max-width: 575px) {
  #topimg-area {
    width: 100%;
    height: 55vh;
    position: relative; }
    #topimg-area h1 {
      font-size: 0.6rem; }
      #topimg-area h1 span span.en {
        font-size: 2rem; }
    #topimg-area ul {
      height: 55vh; }
      #topimg-area ul li .obj-l {
        padding-right: 0;
        justify-content: flex-start; }
      #topimg-area ul li .obj-r {
        padding-left: 0;
        justify-content: flex-end; }
      #topimg-area ul li .obj-l span.obj-inner,
      #topimg-area ul li .obj-r span.obj-inner {
        width: 10em;
        height: 10em; }

  .top-section {
    text-align: left;
    width: 100%;
    padding: 2em 1.5em 2em 1.5em; }
    .top-section ul {
      flex-direction: column; }
      .top-section ul li {
        width: 100%; } }

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