@charset "UTF-8";
.clfl:after {
  content: ".";
  display: block;
  clear: left;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0; }

.clfr:after {
  content: ".";
  display: block;
  clear: right;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0; }

.clf:after, section .wrapper.news .box:after, section .wrapper.square .box:after, section .wrapper.campaign .box:nth-of-type(2):after, #kinousyokai .box:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0; }

.clf, section .wrapper.news .box, section .wrapper.square .box, section .wrapper.campaign .box:nth-of-type(2), #kinousyokai .box {
  min-height: 1px; }

* html .clf, * html section .wrapper.news .box, section .wrapper.news * html .box, * html section .wrapper.square .box, section .wrapper.square * html .box, * html section .wrapper.campaign .box:nth-of-type(2), section .wrapper.campaign * html .box:nth-of-type(2), * html #kinousyokai .box, #kinousyokai * html .box {
  height: 1px;
  /*¥*/
  /*/
    height: auto;
    overflow: hidden;
    /**/ }

.clfl:after {
  content: ".";
  display: block;
  clear: left;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0; }

.clfr:after {
  content: ".";
  display: block;
  clear: right;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0; }

.clf:after, section .wrapper.news .box:after, section .wrapper.square .box:after, section .wrapper.campaign .box:nth-of-type(2):after, #kinousyokai .box:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  font-size: 0.1em;
  line-height: 0; }

.clf, section .wrapper.news .box, section .wrapper.square .box, section .wrapper.campaign .box:nth-of-type(2), #kinousyokai .box {
  min-height: 1px; }

* html .clf, * html section .wrapper.news .box, section .wrapper.news * html .box, * html section .wrapper.square .box, section .wrapper.square * html .box, * html section .wrapper.campaign .box:nth-of-type(2), section .wrapper.campaign * html .box:nth-of-type(2), * html #kinousyokai .box, #kinousyokai * html .box {
  height: 1px;
  /*¥*/
  /*/
    height: auto;
    overflow: hidden;
    /**/ }

.pc {
  display: inline-block !important; }

.sp {
  display: none !important; }

@media (max-width: 980px) {
  .pc {
    display: none !important; }
  .sp {
    display: inherit !important; } }

.oplink {
  transition-duration: 500ms; }
  .oplink:hover {
    opacity: 0.8;
    transition-duration: 500ms; }

.bgcenter {
  background-repeat: no-repeat;
  background-position: center; }

.left {
  float: left; }

.right {
  float: right; }

#header {
  position: relative;
  width: 100%;
  background: white;
  z-index: 9999;
  margin: 0 auto;
  height: 140px; }
  #header #logo {
    left: 42px; }
  #header #inax,
  #header #smenu,
  #header .gmenu.pc {
    right: 45px; }

@-webkit-keyframes line-repetition {
  0% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-moz-keyframes line-repetition {
  0% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-ms-keyframes line-repetition {
  0% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes line-repetition {
  0% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

.mv {
  width: 100%;
  height: calc(100vh - 140px);
  max-height: 780px;
  min-height: 40vw;
  background-image: url(/img/top/mv-dc45a47d.jpg);
  background-position: bottom 0 center;
  background-size: cover;
  position: relative; }
  @media only screen and (max-width: 980px) {
    .mv {
      height: 378px; } }
  .mv .copy {
    position: absolute;
    top: calc(50% - 50px);
    left: 15%; }
    @media only screen and (max-width: 980px) {
      .mv .copy {
        height: 75px;
        width: auto;
        left: 10%; } }
  .mv .scroll {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 35px);
    width: 70px;
    height: 70px;
    background-image: url("/img/top/scroll-877004c4.png");
    background-size: 52px 11px;
    background-position: center;
    background-repeat: no-repeat; }
    @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
      .mv .scroll {
        background-image: url("/img/top/scroll@2x-eb42a518.png"); } }
    .mv .scroll:after {
      display: block;
      content: '';
      width: 100%;
      height: 14px;
      position: absolute;
      bottom: 0;
      background-image: url("/img/top/scroll-arrow-f1f0663b.png");
      background-size: 41px 14px;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-animation-name: line-repetition;
      animation-name: line-repetition;
      -webkit-animation-duration: 1.2s;
      animation-duration: 1.2s;
      -webkit-animation-timing-function: cubic-bezier(0.67, 0.06, 0.69, 0.99);
      animation-timing-function: cubic-bezier(0.67, 0.06, 0.69, 0.99);
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      animation-direction: alternate; }
      @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
        .mv .scroll:after {
          background-image: url("/img/top/scroll-arrow@2x-3aa65f6c.png"); } }

@media (max-height: 920px) {
  .mv .scroll {
    top: calc(100vh - 240px);
    bottom: initial; } }

.wrapper,
#fmt_footer div.fmt_items,
#fmt_navigation div.fmt_location {
  width: calc(100% - 44px);
  max-width: 1070px; }

@media only screen and (max-width: 980px) {
  .wrapper {
    width: 100%; } }

section {
  background-color: #eee;
  padding-top: 46px;
  padding-bottom: 46px; }
  @media only screen and (max-width: 980px) {
    section {
      padding-top: 0;
      padding-bottom: 0; } }
  section .wrapper.news {
    margin-top: 0; }
    section .wrapper.news .box {
      background: #fff;
      padding: 25px 35px; }
      @media only screen and (max-width: 980px) {
        section .wrapper.news .box {
          padding: 15px; } }
    section .wrapper.news h3 {
      width: 155px;
      margin-right: 30px;
      margin-top: 6px;
      float: left; }
      @media only screen and (max-width: 980px) {
        section .wrapper.news h3 {
          float: none;
          width: 100%;
          margin-top: 5px;
          margin-bottom: 15px; }
          section .wrapper.news h3 > img {
            height: 10px;
            width: auto; } }
    section .wrapper.news .links {
      width: calc(100% - 185px);
      float: left; }
      @media only screen and (max-width: 980px) {
        section .wrapper.news .links {
          float: none;
          width: 100%; } }
    section .wrapper.news a {
      display: -webkit-flex;
      -webkit-flex-wrap: wrap;
      display: flex;
      flex-wrap: wrap;
      line-height: 30px;
      color: #1a1a1a; }
      @media only screen and (max-width: 980px) {
        section .wrapper.news a {
          line-height: 17px; } }
      section .wrapper.news a:hover {
        color: #f56f00; }
      section .wrapper.news a .date {
        width: 106px;
        font-size: 14px;
        letter-spacing: 0.075em;
        font-family: helvetica, arial, sans-serif; }
        @media only screen and (max-width: 980px) {
          section .wrapper.news a .date {
            width: 70px;
            font-size: 10px;
            font-weight: normal; } }
      section .wrapper.news a .title {
        font-size: 15px;
        font-weight: bold;
        letter-spacing: 0.08em;
        width: calc(100% - 106px); }
        @media only screen and (max-width: 980px) {
          section .wrapper.news a .title {
            font-size: 10px;
            font-weight: normal;
            width: calc(100% - 70px); } }
  @media only screen and (max-width: 980px) {
    section .wrapper.square {
      margin-top: 1px; } }
  section .wrapper.square h3 {
    margin-bottom: 2px;
    background: #fff;
    padding: 2px 35px 0;
    display: -webkit-flex;
    -webkit-align-items: center;
    display: flex;
    align-items: center;
    height: 86px; }
    @media only screen and (max-width: 980px) {
      section .wrapper.square h3 {
        padding: 20px 15px;
        display: block;
        position: relative;
        height: auto;
        margin-bottom: 0; }
        section .wrapper.square h3 > img {
          height: 15px;
          width: auto; } }
    section .wrapper.square h3 b {
      font-size: 16px;
      letter-spacing: 0.08em;
      margin-left: 36px;
      margin-right: auto;
      color: #1a1a1a; }
      @media only screen and (max-width: 980px) {
        section .wrapper.square h3 b {
          font-size: 10px;
          transform: scale(0.9);
          transform-origin: left;
          display: block;
          margin-top: 13px;
          margin-left: 0; } }
    section .wrapper.square h3 .arrow {
      margin-left: auto;
      margin-right: 0;
      font-size: 15px;
      font-weight: bold;
      color: #595959;
      line-height: 1em;
      letter-spacing: 0.03em;
      display: -webkit-flex;
      -webkit-align-items: center;
      display: flex;
      align-items: center; }
      section .wrapper.square h3 .arrow:after {
        display: block;
        content: '';
        background-image: url(/img/icon-15px-orange-e35c6453.svg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        width: 21px;
        height: 21px;
        margin-left: 16px; }
        @media only screen and (max-width: 980px) {
          section .wrapper.square h3 .arrow:after {
            width: 15px;
            height: 15px; } }
      section .wrapper.square h3 .arrow:hover {
        color: #f56f00; }
      @media only screen and (max-width: 980px) {
        section .wrapper.square h3 .arrow {
          font-size: 10px;
          transform: scale(0.9);
          transform-origin: right;
          position: absolute;
          right: 15px;
          top: 20px; }
          section .wrapper.square h3 .arrow:after {
            margin-left: 8px; } }
  section .wrapper.square .box {
    background: #fff;
    padding: 35px; }
    @media only screen and (max-width: 980px) {
      section .wrapper.square .box {
        padding: 0 0 10px 0; } }
    section .wrapper.square .box .oplink {
      display: block;
      letter-spacing: 0.03em;
      width: calc((100% - 70px) / 3);
      float: left; }
      @media only screen and (max-width: 980px) {
        section .wrapper.square .box .oplink {
          margin-left: 15px !important;
          margin-right: 15px;
          margin-bottom: 25px;
          width: calc(100% - 30px); } }
      section .wrapper.square .box .oplink:not(:first-child) {
        margin-left: 35px; }
      section .wrapper.square .box .oplink > img {
        width: 100%;
        height: auto; }
      section .wrapper.square .box .oplink h4 {
        margin: 20px 0 15px;
        font-size: 16px;
        color: #000; }
        @media only screen and (max-width: 980px) {
          section .wrapper.square .box .oplink h4 {
            font-size: 13px;
            margin: 15px 0 11px; } }
      section .wrapper.square .box .oplink p {
        font-size: 12px;
        line-height: 22px;
        color: #333; }
        @media only screen and (max-width: 980px) {
          section .wrapper.square .box .oplink p {
            font-size: 11px;
            line-height: 20px; } }
  section .wrapper.campaign {
    display: block; }
    section .wrapper.campaign:hover .box:nth-of-type(1) .arrow {
      color: #f56f00; }
    @media only screen and (max-width: 980px) {
      section .wrapper.campaign {
        margin-top: 1px; } }
    section .wrapper.campaign .box:nth-of-type(1) {
      background: #fff;
      padding: 2px 35px 0;
      display: -webkit-flex;
      -webkit-align-items: center;
      display: flex;
      align-items: center;
      height: 86px; }
      @media only screen and (max-width: 980px) {
        section .wrapper.campaign .box:nth-of-type(1) {
          padding: 20px 15px 10px;
          display: block;
          position: relative;
          height: auto;
          margin-bottom: 0; } }
      section .wrapper.campaign .box:nth-of-type(1) b {
        font-size: 18px;
        letter-spacing: 0.08em;
        margin-right: auto;
        color: #1a1a1a; }
        @media only screen and (max-width: 1050px) {
          section .wrapper.campaign .box:nth-of-type(1) b {
            font-size: 16px; } }
        @media only screen and (max-width: 980px) {
          section .wrapper.campaign .box:nth-of-type(1) b {
            font-size: 10px;
            transform: scale(0.9);
            transform-origin: left; } }
      section .wrapper.campaign .box:nth-of-type(1) .arrow {
        margin-left: auto;
        margin-right: 0;
        font-size: 15px;
        font-weight: bold;
        color: #595959;
        line-height: 1em;
        letter-spacing: 0.03em;
        display: -webkit-flex;
        -webkit-align-items: center;
        display: flex;
        align-items: center; }
        section .wrapper.campaign .box:nth-of-type(1) .arrow:after {
          display: block;
          content: '';
          background-image: url(/img/icon-15px-orange-e35c6453.svg);
          background-repeat: no-repeat;
          background-size: 100% auto;
          width: 21px;
          height: 21px;
          margin-left: 16px; }
          @media only screen and (max-width: 980px) {
            section .wrapper.campaign .box:nth-of-type(1) .arrow:after {
              width: 15px;
              height: 15px; } }
        @media only screen and (max-width: 980px) {
          section .wrapper.campaign .box:nth-of-type(1) .arrow {
            font-size: 10px;
            transform: scale(0.9);
            transform-origin: right;
            position: absolute;
            right: 15px;
            top: 20px; }
            section .wrapper.campaign .box:nth-of-type(1) .arrow:after {
              margin-left: 8px; } }
    section .wrapper.campaign > img {
      width: 100%;
      height: auto;
      vertical-align: top; }
    section .wrapper.campaign .box:nth-of-type(2) {
      background: #fff;
      padding: 35px; }
      @media only screen and (max-width: 980px) {
        section .wrapper.campaign .box:nth-of-type(2) {
          padding: 10px; } }
      section .wrapper.campaign .box:nth-of-type(2) img {
        vertical-align: top;
        width: 100%;
        height: auto; }
  section .wrapper.anniversary {
    display: block;
    transition-duration: 500ms; }
    section .wrapper.anniversary > img {
      vertical-align: top;
      width: 100%;
      height: auto; }
    section .wrapper.anniversary:hover {
      opacity: 0.8;
      transition-duration: 500ms; }
    @media only screen and (max-width: 980px) {
      section .wrapper.anniversary {
        margin-top: 0; } }
  section .wrapper.linkboxes {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media only screen and (max-width: 980px) {
      section .wrapper.linkboxes {
        margin-top: 1px;
        width: 100%;
        background-color: #F7F7F7; } }
    section .wrapper.linkboxes a {
      width: calc((100% - 44px)/3);
      margin-bottom: 22px;
      background: #fff;
      cursor: pointer;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      flex-direction: column;
      justify-content: space-between; }
      section .wrapper.linkboxes a:nth-child(3n) {
        margin-left: auto;
        margin-right: 0; }
      section .wrapper.linkboxes a:nth-child(3n-1) {
        margin-left: auto;
        margin-right: auto; }
      section .wrapper.linkboxes a:nth-child(3n-2) {
        margin-left: 0;
        margin-right: auto; }
      @media only screen and (max-width: 980px) {
        section .wrapper.linkboxes a {
          margin: 0;
          width: calc(50% - 0.5px); }
          section .wrapper.linkboxes a:nth-child(2n) {
            margin-left: 1px; }
          section .wrapper.linkboxes a:nth-child(2n-1) {
            margin-left: 0; } }
      section .wrapper.linkboxes a .text {
        padding: 34px 5px 29px 25px; }
        @media only screen and (max-width: 980px) {
          section .wrapper.linkboxes a .text {
            padding: 15px; } }
      section .wrapper.linkboxes a h5 {
        font-size: 17px;
        letter-spacing: 0.03em;
        color: #000; }
        @media only screen and (max-width: 980px) {
          section .wrapper.linkboxes a h5 {
            font-size: 10px;
            line-height: 23px; } }
      section .wrapper.linkboxes a p {
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0.05em;
        color: #747474;
        margin-top: 8px; }
        @media only screen and (max-width: 980px) {
          section .wrapper.linkboxes a p {
            font-size: 10px;
            letter-spacing: -0.01em;
            line-height: 17px;
            font-weight: normal; } }
      section .wrapper.linkboxes a > img {
        width: 100%;
        height: auto;
        vertical-align: bottom; }

#kinousyokai,
#osusume {
  padding-bottom: 65px; }
  @media only screen and (max-width: 980px) {
    #kinousyokai,
    #osusume {
      padding-bottom: 50px; } }
  #kinousyokai h3,
  #osusume h3 {
    text-align: center;
    padding: 47px 0;
    font-size: 18px;
    letter-spacing: 0.15em; }
    @media only screen and (max-width: 980px) {
      #kinousyokai h3,
      #osusume h3 {
        font-size: 11px;
        letter-spacing: 0.02em;
        padding: 25px 0; } }

#kinousyokai {
  background-color: #fff; }
  #kinousyokai .box {
    background-color: #fafafa;
    max-width: 950px;
    width: calc(100% - 124px);
    margin: 0 auto;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap; }
    @media only screen and (max-width: 980px) {
      #kinousyokai .box {
        width: 100%; } }
    #kinousyokai .box > div:first-child {
      float: left;
      width: 50%;
      position: relative; }
      @media only screen and (max-width: 980px) {
        #kinousyokai .box > div:first-child {
          display: none; } }
      #kinousyokai .box > div:first-child > div {
        position: absolute;
        height: 100%;
        display: -webkit-flex;
        -webkit-align-items: center;
        display: flex;
        align-items: center;
        margin-left: 65px; }
        #kinousyokai .box > div:first-child > div > img {
          max-width: 383px;
          width: calc(100% - 40px);
          height: auto; }
    #kinousyokai .box > div:nth-child(2) {
      float: left;
      width: 50%; }
      @media only screen and (max-width: 980px) {
        #kinousyokai .box > div:nth-child(2) {
          width: 100%; } }
    #kinousyokai .box .movie {
      width: 475px;
      height: 267px;
      position: relative; }
      @media only screen and (max-width: 980px) {
        #kinousyokai .box .movie {
          width: 100%;
          height: 180px; } }
      #kinousyokai .box .movie .moviestart {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: transparent url(/img/top/kinousyokai-thumb-67c35944.jpg) no-repeat center;
        background-size: cover;
        -webkit-display: flex;
        -webkit-justify-content: center;
        -webkit-align-items: center;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer; }
        #kinousyokai .box .movie .moviestart:hover .btn {
          opacity: 0.8;
          transition-duration: 0.2s; }
        #kinousyokai .box .movie .moviestart .btn {
          transition-duration: 0.2s;
          width: 90px;
          height: auto; }
          @media only screen and (max-width: 980px) {
            #kinousyokai .box .movie .moviestart .btn {
              width: 65px; } }
    #kinousyokai .box .moviebox {
      display: none;
      position: relative; }
    #kinousyokai .box .closeBtn {
      position: absolute;
      right: 0;
      bottom: -20px;
      cursor: pointer; }

#osusume {
  background-color: #f9f7f1; }
  #osusume .wrapper {
    margin-top: 0; }
    @media only screen and (max-width: 980px) {
      #osusume .wrapper {
        margin: 0 15px;
        width: calc(100% - 30px); } }
  #osusume .box {
    width: calc(50% - 15px);
    background-color: #fff;
    float: left; }
    @media only screen and (max-width: 980px) {
      #osusume .box {
        float: none;
        padding: 15px;
        width: calc(100% - 30px); } }
    #osusume .box:nth-child(2n) {
      margin-left: 30px; }
      @media only screen and (max-width: 980px) {
        #osusume .box:nth-child(2n) {
          margin-left: 0;
          margin-top: 15px; } }
    #osusume .box img {
      width: 100%;
      height: auto; }
    #osusume .box .text {
      padding: 27px 37px 37px; }
      @media only screen and (max-width: 980px) {
        #osusume .box .text {
          padding: 0; } }
    #osusume .box h5 {
      font-size: 19px;
      letter-spacing: 0.08em;
      color: #1a1a1a; }
      @media only screen and (max-width: 980px) {
        #osusume .box h5 {
          font-size: 13px;
          letter-spacing: 0em;
          margin-top: 14px; } }
    #osusume .box p {
      font-size: 14px;
      letter-spacing: 0.06em;
      line-height: 2em;
      color: #1a1a1a;
      margin-top: 15px;
      margin-bottom: 20px; }
      @media only screen and (max-width: 980px) {
        #osusume .box p {
          font-size: 11px;
          line-height: 20px;
          letter-spacing: -0.01em;
          margin-top: 11px;
          margin-bottom: 13px; } }
    #osusume .box a {
      display: block;
      height: 60px;
      border-radius: 3px;
      background-color: #f36f20;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 0.1em;
      -webkit-display: flex;
      -webkit-justify-content: center;
      -webkit-align-items: center;
      display: flex;
      justify-content: center;
      align-items: center; }
      #osusume .box a:after {
        content: '';
        display: inline-block;
        height: 20px;
        width: 13px;
        background-image: url(/img/top/icon-popup-01a98e6f.svg);
        background-size: 13px auto;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: 13px; }
      @media only screen and (max-width: 980px) {
        #osusume .box a {
          font-size: 13px;
          letter-spacing: 0.03em;
          height: 45px; } }

#info_box {
  border-top: 0; }
  #info_box .wrapper {
    max-width: 950px;
    margin-top: 80px; }
    @media only screen and (max-width: 980px) {
      #info_box .wrapper {
        width: calc(100% - 30px); } }

.footnav .wrapper,
footer .wrapper {
  width: auto;
  max-width: initial; }