@charset "UTF-8";
@media only screen and (max-width: 1054px) {
  .main .hero .hero--copy {
    font-size: 61px; }

  .main .hero .hero--img {
    left: 384px;
    width: calc(100% - 384px); }

  .main .hero .hero--credit {
    left: 40px; }

  .main .fff .fff--slide {
    left: 384px;
    width: calc(100% - 384px); }

  .main .fff .fff--nav ul li {
    font-size: 52px; } }
@media only screen and (max-width: 894px) {
  /* common
  =================================================================== */
  /* layout
  =================================================================== */
  /* animation delay
  =================================================================== */
  /* 3d
  =================================================================== */
  /* font
  =================================================================== */
  /* form
  =================================================================== */
  /* hero
  =================================================================== */
  .main {
    margin-bottom: 50px;
    margin-top: 0; }
    .main .hero {
      top: 85px;
      height: calc(100% - 85px);
      min-height: inherit; }
      .main .hero .hero--img {
        left: 50px;
        top: 152px;
        width: calc(100% - 100px);
        height: calc(100% - 222px); }
        .main .hero .hero--img li .hero--img--logo {
          height: 50px;
          left: -10px;
          bottom: 10px; }
      .main .hero .hero--copy {
        left: 28px;
        top: 25px;
        font-size: 22px;
        transform: translateY(0);
        -webkit-transform: translateY(0); }
      .main .hero .hero--credit {
        left: 28px;
        bottom: 20px;
        width: calc(100% - 28px);
        height: 31px; }
        .main .hero .hero--credit dl dt {
          height: 15px;
          margin-bottom: 9px;
          background-size: auto 100%; }
        .main .hero .hero--credit dl dd {
          height: 9px;
          background-size: auto 100%; }
    .main .fff {
      min-height: inherit; }
      .main .fff .fff--nav {
        left: 50px;
        width: calc(50% - 50px); }
      .main .fff .fff--slide {
        left: 50%;
        width: 50%; }
        .main .fff .fff--slide ul {
          float: left; }
          .main .fff .fff--slide ul:nth-child(1) {
            width: 25%; }
          .main .fff .fff--slide ul:nth-child(2) {
            width: 45%; }
          .main .fff .fff--slide ul:nth-child(3) {
            width: 30%; }
          .main .fff .fff--slide ul:nth-child(4), .main .fff .fff--slide ul:nth-child(5) {
            display: none; }

  .phisology .inner--title {
    margin-bottom: 30px; }
  .phisology dt {
    font-size: 16px;
    margin-bottom: 11px; }
  .phisology dd {
    font-size: 12px;
    margin-bottom: 25px;
    text-align: left; }
    .phisology dd br {
      display: none; }

  /* 上書き
  =================================================================== */
  .top .column.column--3 li {
    margin-bottom: 20px; }
    .top .column.column--3 li:last-child {
      margin-bottom: 0; }

  .en .main {
    margin-bottom: 230px; }
    .en .main .hero .hero--credit {
      height: 21px; } }
@media only screen and (max-width: 622px) {
  .main .fff .fff--nav {
    left: 28px;
    width: calc(50% - 28px); }
    .main .fff .fff--nav h2 {
      font-size: 12px;
      padding-bottom: 25px;
      margin-bottom: 25px; }
      .main .fff .fff--nav h2:after {
        width: 4px; }
    .main .fff .fff--nav ul li {
      margin-bottom: 30px;
      font-size: 28px; } }