@charset "UTF-8";
/* Scss Document */
/*メディアクエリ*/
/*〜〜メディアクエリ*/
/*オープニングアニメ*/
.start {
  background: #FEFEFA;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 9000; }
  @media (max-width: 560px) {
    .start {
      display: none; } }

.start h1 {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 370px;
  display: none; }
  .start h1 .illust {
    width: 190px;
    margin: 0 auto 27px; }

/*〜〜オープニングアニメ*/
@media (max-width: 560px) {
  header {
    display: none; } }

main {
  width: 100%;
  padding-top: 80px;
  box-sizing: border-box; }
  main ::after {
    content: "";
    display: block;
    clear: both; }

.top-img {
  width: 94%;
  max-width: 1366px;
  height: 0;
  padding-bottom: 781px;
  margin: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; }
  @media (max-width: 1225px) {
    .top-img {
      padding-bottom: 63.7%; } }
  @media (min-width: 561px) {
    .top-img {
      background-image: url("../img/top/img-1-pc.jpg"); } }
  @media (max-width: 560px) {
    .top-img {
      background-image: url("../img/top/img-1-sp.jpg"); } }

@media (min-width: 561px) {
  .top-img.animated {
    animation-delay: 3s; } }

.top-sp {
  background: #FEFEFA;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  position: relative; }
  .top-sp h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 190px; }
    .top-sp h1 .illust {
      width: 165px;
      margin: 0 auto 27px; }
  @media (min-width: 561px) {
    .top-sp {
      display: none; } }

.sub-group {
  width: 100%;
  max-width: 1366px;
  margin: 160px auto 0;
  text-align: left;
  box-sizing: border-box; }
  @media (max-width: 1366px) {
    .sub-group {
      margin: 11.7% auto 0; } }
  @media (max-width: 560px) {
    .sub-group {
      width: 94%;
      margin: 15px auto 0; } }
  .sub-group .link {
    width: 53%;
    padding-bottom: 144px; }
    @media (max-width: 1366px) {
      .sub-group .link {
        padding-bottom: 10.5%; } }
    .sub-group .link figure {
      transition: .5s; }
    .sub-group .link h3 {
      height: 30px;
      margin-top: 22px;
      transition: .5s; }
    .sub-group .link p {
      margin-top: 1em;
      transition: .5s; }
    .sub-group .link .arrow {
      margin-top: 18px;
      transition: .5s; }
    .sub-group .link a:hover figure, .sub-group .link a:hover h3, .sub-group .link a:hover p {
      opacity: .5; }
    .sub-group .link a:hover .arrow {
      transform: translateX(30px); }
    @media (max-width: 560px) {
      .sub-group .link {
        width: 100%;
        padding-bottom: 15px; }
        .sub-group .link h3, .sub-group .link p, .sub-group .link .arrow {
          display: none; } }
  .sub-group .photo-l {
    width: 440px;
    height: 277px;
    clear: both;
    position: relative; }
    @media (max-width: 1366px) {
      .sub-group .photo-l {
        width: 33%;
        height: 0;
        padding-bottom: 20%; } }
    @media (max-width: 560px) {
      .sub-group .photo-l {
        width: 100%;
        height: 0;
        padding-bottom: 62%; } }
  .sub-group .photo-s {
    width: 340px;
    height: 211px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative; }
    @media (max-width: 1366px) {
      .sub-group .photo-s {
        width: 25%;
        height: 0;
        padding-bottom: 15.5%; } }
    @media (max-width: 560px) {
      .sub-group .photo-s {
        width: 100%;
        height: 0;
        padding-bottom: 62%; } }
  .sub-group:nth-of-type(odd) .link h3, .sub-group:nth-of-type(odd) .link p, .sub-group:nth-of-type(odd) .link .arrow {
    padding-left: 3rem; }
  .sub-group:nth-of-type(odd) .photo-l {
    margin-left: auto;
    margin-right: 171px; }
    @media (max-width: 1366px) {
      .sub-group:nth-of-type(odd) .photo-l {
        margin-right: 12.5%; } }
    @media (max-width: 560px) {
      .sub-group:nth-of-type(odd) .photo-l {
        margin: 0 auto 15px; } }
  .sub-group:nth-of-type(odd) .photo-s {
    margin-left: 171px; }
    @media (max-width: 1366px) {
      .sub-group:nth-of-type(odd) .photo-s {
        margin-left: 12.5%; } }
    @media (max-width: 560px) {
      .sub-group:nth-of-type(odd) .photo-s {
        margin: 0 auto; } }
  .sub-group:nth-of-type(even) .link {
    float: right; }
  .sub-group:nth-of-type(even) .photo-l {
    margin-left: 171px; }
    @media (max-width: 1366px) {
      .sub-group:nth-of-type(even) .photo-l {
        margin-left: 12.5%; } }
    @media (max-width: 560px) {
      .sub-group:nth-of-type(even) .photo-l {
        margin: 0 auto 15px; } }
  .sub-group:nth-of-type(even) .photo-s {
    margin-left: auto;
    margin-right: 171px; }
    @media (max-width: 1366px) {
      .sub-group:nth-of-type(even) .photo-s {
        margin-right: 12.5%; } }
    @media (max-width: 560px) {
      .sub-group:nth-of-type(even) .photo-s {
        margin: 0 auto; } }
  .sub-group .bgImg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; }

.fadeIn.animated {
  animation-duration: 3s; }

.history .photo-l .bgImg.src1 {
  background-image: url("../img/top/img-3-1.jpg"); }
.history .photo-l .bgImg.src2 {
  background-image: url("../img/top/img-3-2.jpg");
  animation: bgAnime 12s infinite; }
.collecitons .photo-l .bgImg.src1 {
  background-image: url("../img/top/img-6-1.jpg"); }
.collecitons .photo-l .bgImg.src2 {
  background-image: url("../img/top/img-6-2.jpg");
  animation: bgAnime 12s infinite; }
.cultural .photo-l .bgImg.src1 {
  background-image: url("../img/top/img-9-1.jpg"); }
.cultural .photo-l .bgImg.src2 {
  background-image: url("../img/top/img-9-2.jpg");
  animation: bgAnime 12s infinite; }
.kenji .photo-l .bgImg.src1 {
  background-image: url("../img/top/img-12-1.jpg"); }
.kenji .photo-l .bgImg.src2 {
  background-image: url("../img/top/img-12-2.jpg");
  animation: bgAnime 12s infinite; }

.history .photo-s .bgImg.src1 {
  background-image: url("../img/top/img-4-1.jpg"); }
.history .photo-s .bgImg.src2 {
  background-image: url("../img/top/img-4-2.jpg");
  animation: bgAnime 12s infinite;
  animation-delay: 3s; }
.collecitons .photo-s .bgImg.src1 {
  background-image: url("../img/top/img-7-1.jpg"); }
.collecitons .photo-s .bgImg.src2 {
  background-image: url("../img/top/img-7-2.jpg");
  animation: bgAnime 12s infinite;
  animation-delay: 3s; }
.cultural .photo-s .bgImg.src1 {
  background-image: url("../img/top/img-10-1.jpg"); }
.cultural .photo-s .bgImg.src2 {
  background-image: url("../img/top/img-10-2.jpg");
  animation: bgAnime 12s infinite;
  animation-delay: 3s; }
.kenji .photo-s .bgImg.src1 {
  background-image: url("../img/top/img-13-1.jpg"); }
.kenji .photo-s .bgImg.src2 {
  background-image: url("../img/top/img-13-2.jpg");
  animation: bgAnime 12s infinite;
  animation-delay: 3s; }

@keyframes bgAnime {
  0% {
    opacity: 1; }
  25% {
    opacity: 0; }
  50% {
    opacity: 0; }
  75% {
    opacity: 1; }
  100% {
    opacity: 1; } }