#wrapper {
  width: 100%;
  overflow-x: hidden; }
  #wrapper .contents {
    font-size: 18px;
    font-size: 1.8rem;
    background: url(../img/bg01.gif) no-repeat right top 80px, url(../img/bg02.gif) no-repeat right top 430px; }
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      #wrapper .contents {
        overflow: hidden; } }
    @media screen and (max-width: 768px) {
      #wrapper .contents {
        background-position: right top 60px,right top 410px;
        background-size: contain, contain; } }
    #wrapper .contents .inner {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto; }
      @media screen and (max-width: 768px) {
        #wrapper .contents .inner {
          padding: 0 3.5%; } }
      #wrapper .contents .inner .top {
        width: 100%;
        padding: 80px 0; }
        @media screen and (max-width: 768px) {
          #wrapper .contents .inner .top {
            padding: 50px 0 35px; } }
        #wrapper .contents .inner .top::after {
          content: '';
          display: block;
          clear: both; }
        #wrapper .contents .inner .top h1 {
          width: 350px;
          float: left;
          position: relative;
          font-size: 50px;
          font-size: 5rem;
          font-weight: bold;
          line-height: .8; }
          @media screen and (max-width: 768px) {
            #wrapper .contents .inner .top h1 {
              width: 100%;
              font-size: 25px;
              font-size: 2.5rem; } }
          #wrapper .contents .inner .top h1:before {
            content: "";
            position: absolute;
            left: 0;
            bottom: -20px;
            width: 60px;
            height: 7px;
            background: #000;
            display: block; }
            @media screen and (max-width: 768px) {
              #wrapper .contents .inner .top h1:before {
                width: 45px;
                height: 4px;
                bottom: -15px; } }
          #wrapper .contents .inner .top h1 span.jp {
            font-size: 24px;
            font-size: 2.4rem;
            display: block;
            letter-spacing: -1px; }
            @media screen and (max-width: 768px) {
              #wrapper .contents .inner .top h1 span.jp {
                font-size: 12px;
                font-size: 1.2rem; } }
          #wrapper .contents .inner .top h1 span.big {
            font-size: 70px;
            font-size: 7rem;
            font-weight: bold; }
            @media screen and (max-width: 768px) {
              #wrapper .contents .inner .top h1 span.big {
                font-size: 30px;
                font-size: 3rem; } }
        #wrapper .contents .inner .top p {
          display: inline-block;
          float: right;
          width: calc(100% - 350px);
          margin-top: 20px;
          line-height: 1.7; }
          @media screen and (max-width: 768px) {
            #wrapper .contents .inner .top p {
              width: 100%;
              margin-top: 30px;
              font-size: 12px;
              font-size: 1.2rem;
              line-height: 1.5;
              text-align: left; } }
        #wrapper .contents .inner .top ul.pankuzu {
          -js-display: flex;
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          width: 350px;
          margin-top: 73px;
          float: left; }
          @media screen and (max-width: 768px) {
            #wrapper .contents .inner .top ul.pankuzu {
              margin-top: 15px; } }
          #wrapper .contents .inner .top ul.pankuzu li {
            font-size: 14px;
            font-size: 1.4rem; }
            @media screen and (max-width: 768px) {
              #wrapper .contents .inner .top ul.pankuzu li {
                font-size: 10px;
                font-size: 1rem; } }
            #wrapper .contents .inner .top ul.pankuzu li a {
              font-size: 14px;
              font-size: 1.4rem;
              color: #e00b00; }
              @media screen and (max-width: 768px) {
                #wrapper .contents .inner .top ul.pankuzu li a {
                  font-size: 10px;
                  font-size: 1rem; } }
      #wrapper .contents .inner .case {
        -js-display: flex;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: flex-end;
        align-items: -webkit- flex-end;
        align-items: flex-end;
        margin-bottom: 90px; }
        @media screen and (max-width: 768px) {
          #wrapper .contents .inner .case {
            display: block;
            margin-bottom: 45px; } }
        #wrapper .contents .inner .case.reverse {
          -webkit-flex-direction: row-reverse;
          flex-direction: -webkit- row-reverse;
          flex-direction: row-reverse; }
        #wrapper .contents .inner .case:nth-of-type(3) dl.right {
          margin-top: 147px; }
          @media screen and (max-width: 768px) {
            #wrapper .contents .inner .case:nth-of-type(3) dl.right {
              margin-top: 0; } }
        #wrapper .contents .inner .case:nth-last-of-type(1) {
          margin-bottom: 147px; }
          @media screen and (max-width: 768px) {
            #wrapper .contents .inner .case:nth-last-of-type(1) {
              margin-bottom: 74px; } }
        #wrapper .contents .inner .case::after {
          content: '';
          display: block;
          clear: both; }
        #wrapper .contents .inner .case dl {
          width: 37%;
          border-bottom: solid 8px #000; }
          @media screen and (max-width: 768px) {
            #wrapper .contents .inner .case dl {
              width: 100%;
              border-bottom-width: 5px;
              margin-top: 0;
              margin-bottom: 30px; } }
          #wrapper .contents .inner .case dl.left {
            float: left;
            margin-right: 1.5%; }
            @media screen and (max-width: 768px) {
              #wrapper .contents .inner .case dl.left {
                margin-right: 0; } }
          #wrapper .contents .inner .case dl.right {
            float: right; }
          #wrapper .contents .inner .case dl dt {
            line-height: 1;
            font-size: 30px;
            font-size: 3rem;
            font-weight: bold; }
            @media screen and (max-width: 768px) {
              #wrapper .contents .inner .case dl dt {
                padding-left: 5%;
                font-size: 18px;
                font-size: 1.8rem; } }
            #wrapper .contents .inner .case dl dt span {
              font-size: 36px;
              font-size: 3.6rem;
              font-weight: bold; }
              @media screen and (max-width: 768px) {
                #wrapper .contents .inner .case dl dt span {
                  font-size: 22px;
                  font-size: 2.2rem; } }
          #wrapper .contents .inner .case dl dd {
            border-top: solid 1px #cecfd3;
            padding: 9px 0;
            padding-left: 48px;
            font-size: 16px;
            font-size: 1.6rem; }
            @media screen and (max-width: 768px) {
              #wrapper .contents .inner .case dl dd {
                padding: 7px 0;
                padding-left: 12%;
                font-size: 12px;
                font-size: 1.2rem; } }
        #wrapper .contents .inner .case .imgBox {
          width: 61%;
          padding-right: 50px;
          position: relative;
          bottom: 0; }
          @media screen and (max-width: 768px) {
            #wrapper .contents .inner .case .imgBox {
              width: 100%;
              padding-right: 25px; } }
          #wrapper .contents .inner .case .imgBox.left {
            float: left;
            margin-right: 1.5%; }
            @media screen and (max-width: 768px) {
              #wrapper .contents .inner .case .imgBox.left {
                margin-right: 0; } }
          #wrapper .contents .inner .case .imgBox.right {
            float: right; }
          @media screen and (max-width: 768px) {
            #wrapper .contents .inner .case .imgBox img {
              width: 100%; } }
          #wrapper .contents .inner .case .imgBox p {
            display: inline-block;
            width: 335px;
            position: absolute;
            top: 35px;
            right: 0;
            transform-origin: left top;
            -moz-transform: translateX(332px) rotate(90deg);
            -webkit-transform: translateX(332px) rotate(90deg);
            -o-transform: translateX(332px) rotate(90deg);
            -ms-transform: translateX(332px) rotate(90deg);
            transform: translateX(332px) rotate(90deg);
            line-height: 1;
            font-size: 30px;
            font-size: 3rem;
            font-weight: 200;
            letter-spacing: -1px; }
            @media screen and (max-width: 768px) {
              #wrapper .contents .inner .case .imgBox p {
                width: 200px;
                top: 13px;
                font-size: 18px;
                font-size: 1.8rem;
                letter-spacing: 0;
                -moz-transform: translateX(199px) rotate(90deg);
                -webkit-transform: translateX(199px) rotate(90deg);
                -o-transform: translateX(199px) rotate(90deg);
                -ms-transform: translateX(199px) rotate(90deg);
                transform: translateX(199px) rotate(90deg); } }
            #wrapper .contents .inner .case .imgBox p span {
              font-size: 50px;
              font-size: 5rem;
              font-weight: 200; }
              @media screen and (max-width: 768px) {
                #wrapper .contents .inner .case .imgBox p span {
                  font-size: 25px;
                  font-size: 2.5rem; } }

/*# sourceMappingURL=layout.css.map */
