@charset "UTF-8";
/*==========================================================================================

  ■ Common

==========================================================================================*/
.heading-h1 {
  display: none; }

/* 基本
========================================================*/
#reface {
  color: #58858e;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400; }
  #reface .dp_sp {
    display: none; }
  #reface .dp_pc {
    display: block; }
  @media screen and (max-width: 760px) {
    #reface .dp_sp {
      display: block; }
    #reface .dp_pc {
      display: none !important; } }

#story img {
  display: block;
  max-width: 100%;
  height: auto; }

@media screen and (min-width: 760px) {
  #reface section#lineup .item a .pic {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s; }
  #reface section#lineup .item a:hover .pic {
    opacity: 0.7; }
  #reface section#lineup .link a:hover {
    background: #7a97ab;
    color: #fff;
    text-decoration: none; } }

/*==========================================================================================

	■ Main

==========================================================================================*/
#reface {
  position: relative;
  background: #f5f5f5;
  overflow: hidden; }
  #reface .main {
    position: relative;
    z-index: 2; }
    #reface .main h1 {
      position: absolute;
      left: 5%;
      top: 16%;
      width: 27.7%; }
    #reface .main img {
      width: 100%;
      height: auto; }
    @media screen and (max-width: 760px) {
      #reface .main h1 {
        width: 47.33%;
        top: 8%; } }
  #reface section .v_line {
    position: relative; }
    #reface section .v_line:before {
      content: "";
      display: block;
      position: absolute;
      z-index: 1;
      top: 130px;
      left: 5%;
      width: 1px;
      height: calc(100% - 150px);
      background: #acbcc1; }
    #reface section .v_line:after {
      position: absolute;
      left: 5.39%;
      top: calc(100% - 34px);
      content: "";
      width: 1px;
      height: 16px;
      background: #acbcc1;
      -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      transform: rotate(40deg); }
  #reface section h2 {
    position: absolute;
    left: 4%;
    width: 30px;
    height: 100%;
    margin: 0; }
    #reface section h2 img {
      width: 100%;
      height: auto; }
  #reface section .pic_area {
    position: relative;
    z-index: 2; }
  @media screen and (max-width: 760px) {
    #reface section .v_line:before {
      top: 130px;
      height: calc(100% - 130px); }
    #reface section .v_line:after {
      left: 5.65%;
      top: calc(100% - 12px);
      height: 13px; }
    #reface section h2 {
      width: 15px;
      height: 100%; } }
  @media screen and (max-width: 540px) {
    #reface section .v_line:before {
      left: 5%;
      top: 105px;
      height: calc(100% - 105px);
      opacity: 0.5; }
    #reface section .v_line:after {
      left: 6%;
      top: calc(100% - 12px);
      height: 13px;
      opacity: 0.5; }
    #reface section h2 {
      left: 4%;
      width: 12px; } }
  #reface section#story h2 {
    top: 40px; }
  #reface section#story .sec_body {
    position: relative; }
  #reface section#story .text_area {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 15px; }
    #reface section#story .text_area p {
      position: absolute;
      z-index: 10;
      display: inline-block;
      padding: 0em  0.5em 0 0.8em;
      font-size: 100%;
      text-align: center;
      line-height: 2.4em;
      letter-spacing: 0.025em;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 0.95); }
      #reface section#story .text_area p.fontL,
      #reface section#story .text_area p .fontL {
        font-size: 146%;
        font-weight: 500;
        letter-spacing: 0.12em; }
      #reface section#story .text_area p.text_multiple {
        padding: 0.8em 1.5em; }
    @media screen and (max-width: 1040px) {
      #reface section#story .text_area {
        font-size: 13px; } }
  #reface section#story .pic_area img {
    margin: 0 auto;
    position: relative;
    z-index: 5; }
  #reface section#story .pic_area.picL img {
    width: 100%;
    height: auto;
    margin: 0; }
  #reface section#story .bg_gra {
    position: absolute;
    z-index: 1; }
  #reface section#story .sec01.sec_body .pic_area,
  #reface section#story .sec03.sec_body .pic_area,
  #reface section#story .sec05.sec_body .pic_area {
    margin: 0 auto;
    padding: 80px 0;
    width: 75%; }
    #reface section#story .sec01.sec_body .pic_area img,
    #reface section#story .sec03.sec_body .pic_area img,
    #reface section#story .sec05.sec_body .pic_area img {
      max-width: 100%; }
  #reface section#story .sec01.sec_body .bg_gra {
    top: -80%;
    left: 50%;
    width: 1000px;
    height: 940px; }
  #reface section#story .sec02.sec_body .bg_gra {
    top: -90%;
    left: 50%;
    width: 1660px;
    height: 1890px;
    margin-left: -830px; }
  #reface section#story .sec05.sec_body .bg_gra {
    bottom: 95%;
    left: 50%;
    width: 1000px;
    height: 940px; }
  #reface section#story .text_area .text1 {
    top: 224px;
    left: 7.5%; }
  #reface section#story .text_area .text2 {
    top: -250px;
    left: 59.3%; }
  #reface section#story .text_area .text3 {
    top: -177px;
    right: 0; }
  #reface section#story .text_area .text4 {
    top: -340px;
    left: 8.3%; }
  #reface section#story .text_area .text5 {
    top: -290px;
    left: 13.9%; }
  #reface section#story .text_area .text6 {
    top: 60px;
    right: 0.5%; }
  #reface section#story .text_area .text7 {
    top: 260px;
    left: 6.2%; }
  #reface section#story .text_area .text8 {
    top: 20px;
    right: 2%; }
  #reface section#story .text_area .text9 {
    top: 580px;
    right: 2.3%; }
  #reface section#story .text_area .text10 {
    top: 360px;
    left: 5.75%; }
  #reface section#story .text_area .text11 {
    top: 0px;
    right: 0;
    padding: 0;
    text-align: left !important;
    background: none !important; }
    #reface section#story .text_area .text11 span {
      display: inline-block;
      white-space: nowrap;
      padding: 0.15em  0.5em 0.25em 0.8em;
      background-color: rgba(255, 255, 255, 0.95);
      border-radius: 4px; }
      #reface section#story .text_area .text11 span:last-child {
        margin-top: 0.4em;
        margin-left: 1.1em; }
  #reface section#story .text_area .text12 {
    top: 250px;
    left: 7.5%; }
  #reface section#story .text_area .text13 {
    top: 400px;
    left: 12.16%;
    padding: 0em 0.3em 0 1.2em; }
  @media screen and (max-width: 1040px) {
    #reface section#story .text_area .text9 {
      top: 360px; }
    #reface section#story .text_area .text10 {
      top: 300px;
      left: 2%; }
    #reface section#story .text_area .text11 {
      top: 50px; }
    #reface section#story .text_area .text12 {
      top: 150px;
      left: 7.5%; }
    #reface section#story .text_area .text13 {
      top: 260px;
      left: 12.16%; } }
  @media screen and (max-width: 760px) {
    #reface section#story h2 {
      top: 4em; }
    #reface section#story .sec01.sec_body .pic_area,
    #reface section#story .sec03.sec_body .pic_area,
    #reface section#story .sec05.sec_body .pic_area {
      padding: 0;
      width: 80%; }
    #reface section#story .text_area {
      padding-left: 12px;
      text-align: center;
      font-size: 14px; }
      #reface section#story .text_area p {
        position: inherit;
        top: auto !important;
        left: auto !important;
        display: block;
        padding: 0;
        margin: 0;
        font-size: 100%;
        line-height: 2.3em;
        letter-spacing: 0.01em;
        background: none; }
        #reface section#story .text_area p.fontL,
        #reface section#story .text_area p .fontL {
          display: inline-block;
          left: auto;
          right: auto;
          margin: 30px 0;
          padding: 0em  0.5em 0 1.2em;
          font-size: 116%;
          background-color: rgba(255, 255, 255, 0.95); }
        #reface section#story .text_area p.text_multiple {
          padding: 0; }
      #reface section#story .text_area .text11 span.fontL:first-child {
        padding: 0em  0.8em; }
    #reface section#story .pic_area {
      text-align: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      #reface section#story .pic_area p {
        font-size: 12px;
        line-height: 2.3em; }
    #reface section#story .bg_gra {
      position: absolute;
      z-index: 1; }
    #reface section#story .sec02.sec_body .pic_area,
    #reface section#story .sec04.sec_body .pic_area,
    #reface section#story .sec05.sec_body .pic_area {
      margin: 30px auto; }
    #reface section#story .sec01.sec_body .pic_area {
      margin: 0 auto 30px; }
    #reface section#story .sec03.sec_body .pic_area,
    #reface section#story .sec06.sec_body .pic_area {
      margin: 30px auto 0; }
    #reface section#story .sec01.sec_body .pic_area img,
    #reface section#story .sec03.sec_body .pic_area img,
    #reface section#story .sec05.sec_body .pic_area img {
      margin-left: 7px; }
    #reface section#story .sec01.sec_body .bg_gra {
      top: -70%;
      left: 28%;
      width: 220%;
      height: 220%; }
    #reface section#story .sec02.sec_body .bg_gra {
      top: -80%;
      left: -224%;
      margin-left: 0px;
      width: 260%;
      height: 300%; }
    #reface section#story .sec05.sec_body .bg_gra {
      display: none; }
    #reface section#story .text_area .text11 {
      text-align: center !important; }
      #reface section#story .text_area .text11 span.fontL {
        padding: 0em  0.5em 0 0.8em;
        margin: 0.3em 0; }
    #reface section#story .text_area .text_last {
      position: absolute;
      top: -7em;
      width: 100%;
      text-align: center;
      z-index: 10; }
    #reface section#story .text_area .text13 {
      position: static;
      right: auto !important;
      white-space: nowrap; } }
  @media screen and (max-width: 540px) {
    #reface section#story h2 {
      top: 3.2em; }
    #reface section#story .text_area {
      font-size: 11px; }
      #reface section#story .text_area p {
        font-weight: 500; }
        #reface section#story .text_area p.fontL,
        #reface section#story .text_area p .fontL {
          margin: 16px 0;
          letter-spacing: 0.08em; }
      #reface section#story .text_area .text1.fontL {
        margin: 23px 0; }
      #reface section#story .text_area .text11 {
        padding-bottom: 12px; }
    #reface section#story .sec02.sec_body .pic_area,
    #reface section#story .sec04.sec_body .pic_area,
    #reface section#story .sec05.sec_body .pic_area {
      margin: 20px auto; }
    #reface section#story .sec01.sec_body .pic_area {
      margin: 0 auto 20px; }
    #reface section#story .sec06.sec_body .pic_area {
      margin: 20px auto 0; }
    #reface section#story .sec03.sec_body .pic_area {
      margin: 20px auto 10px; } }
  @media screen and (max-width: 340px) {
    #reface section#story .text_area {
      font-size: 10px; } }
  #reface section#lineup {
    padding-bottom: 60px;
    background: #f5f5f5; }
    #reface section#lineup h2 {
      top: 115px; }
    #reface section#lineup .v_line:before {
      top: 250px;
      height: calc(100% - 235px); }
    #reface section#lineup .v_line:after {
      position: absolute;
      left: 5.39%;
      top: 100%;
      content: "";
      width: 1px;
      height: 16px;
      background: #acbcc1;
      -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
      transform: rotate(40deg); }
    #reface section#lineup .sec_body {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      max-width: 1000px;
      margin: 0 auto;
      padding: 175px 0 0;
      text-align: center; }
      #reface section#lineup .sec_body .item {
        width: 50%;
        margin-bottom: 70px;
        font-size: 15px;
        line-height: 1.74; }
        #reface section#lineup .sec_body .item h3 {
          margin: 0;
          font-size: 26px;
          font-family: 'Vollkorn', serif;
          letter-spacing: 0.02em; }
        #reface section#lineup .sec_body .item small {
          font-size: 11px; }
        #reface section#lineup .sec_body .item .pic_area {
          position: relative;
          max-width: 375px;
          margin: 0 auto 5px; }
          #reface section#lineup .sec_body .item .pic_area img {
            display: block;
            width: 100%; }
          #reface section#lineup .sec_body .item .pic_area .illust {
            position: absolute;
            z-index: 5; }
      @media screen and (max-width: 1040px) {
        #reface section#lineup .sec_body {
          width: 80%; }
          #reface section#lineup .sec_body .item {
            width: 46%; } }
    #reface section#lineup .link {
      text-align: center;
      position: relative;
      z-index: 5; }
      #reface section#lineup .link img {
        display: block;
        width: 184px;
        margin: 0 auto 25px; }
      #reface section#lineup .link a {
        display: inline-block;
        padding: 0.8em 2.5em;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        font-size: 13px;
        color: #7a97ab;
        border: #7a97ab 1px solid;
        font-family: 'Noto Sans JP', sans-serif;
        letter-spacing: 0.06em; }
    @media screen and (max-width: 760px) {
      #reface section#lineup {
        position: relative;
        z-index: 1; }
        #reface section#lineup h2 {
          top: 55px; }
        #reface section#lineup .v_line:before {
          top: 130px;
          height: calc(100% - 119px); }
        #reface section#lineup .v_line:after {
          left: 5.65%;
          top: 100%;
          height: 14px; }
        #reface section#lineup .sec_body {
          display: block;
          padding: 45px 0 0;
          text-align: center; }
          #reface section#lineup .sec_body .item {
            width: auto;
            max-width: 86%;
            min-width: 200px;
            margin: 0 auto 50px;
            font-size: 14px;
            font-weight: 500; }
            #reface section#lineup .sec_body .item h3 {
              display: inline-block;
              margin: 0 0.5em 0 0;
              font-size: 20px; }
            #reface section#lineup .sec_body .item small {
              font-size: 12px; }
            #reface section#lineup .sec_body .item .pic_area {
              margin-top: 6px;
              width: 80%;
              margin: 0 auto; }
        #reface section#lineup .link {
          padding-top: 20px; }
          #reface section#lineup .link img {
            width: 140px;
            margin: 0 auto 20px; }
          #reface section#lineup .link a {
            font-size: 12px; } }
    @media screen and (max-width: 540px) {
      #reface section#lineup h2 {
        top: 50px; }
      #reface section#lineup .v_line:before {
        top: 106px;
        height: calc(100% - 93px); }
      #reface section#lineup .v_line:after {
        left: 6%; }
      #reface section#lineup .sec_body .item {
        font-size: 12px;
        margin: 0 auto 30px; }
        #reface section#lineup .sec_body .item h3 {
          font-size: 14px; }
        #reface section#lineup .sec_body .item small {
          font-size: 10px; }
        #reface section#lineup .sec_body .item .pic_area {
          margin: 3px auto 2px; } }
    @media screen and (max-width: 340px) {
      #reface section#lineup .sec_body .item {
        font-size: 11px; } }

/*==========================================================================================

  ■ Animation

==========================================================================================*/
#reface .animated {
  opacity: 0;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: .2s;
  animation-delay: .2s; }
  #reface .animated.illust {
    opacity: 1; }

#reface .animated.set_fadeSP {
  opacity: 1; }

#reface .animated.fadeIn {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s; }

#reface .animated.fadeOut {
  -webkit-animation-duration: 1.8s;
  animation-duration: 1.8s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s; }

#reface .animated.delay {
  -webkit-animation-delay: 1s;
  animation-delay: 1s; }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@media screen and (max-width: 760px) {
  #reface .animated.set_fadeSP {
    opacity: 0; }
  #reface .animated.fadeSP {
    -webkit-animation-duration: 1.8s;
    animation-duration: 1.8s; }
  #reface .fadeSP {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn; } }