@charset "UTF-8";
@media (min-width: 769px) {
  main {
    background: url(../img/mito/bg-lab.png) no-repeat center center;
    background-size: 1300px;
    overflow: hidden; }

  #introduction-box {
    position: relative; }
    #introduction-box .leftside h2 {
      height: 63px; }
    #introduction-box #photo-box {
      width: 485px;
      height: 640px;
      background: url(../img/mito/img-intro.jpg) no-repeat center center;
      background-size: cover; }

  #conclusion-box {
    background-image: url(../img/mito/img20a.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 40px) 39px;
    background-size: 13%; }

  #number-box img {
    width: 159px; }

  #chara-box1 {
    position: absolute;
    z-index: 100;
    bottom: -57px;
    right: 133px; }
    #chara-box1 img {
      width: 365px;
      height: auto; }

  #chara-box2 {
    z-index: 100;
    position: absolute;
    bottom: -102px;
    right: -92px; }
    #chara-box2 img {
      width: 225px;
      height: auto; }

  #chara-box3 {
    position: absolute;
    z-index: 100;
    bottom: 97px;
    right: -99px; }
    #chara-box3 img {
      width: 65%;
      height: auto; }

  #research-box, #future-box, #point-box, #item-box, #student-box, #if-box {
    float: left; }

  #task-box, #result-box, #schedule-box, #lifestyle-box {
    float: right; }

  /**幅を決める**/
  #research-box, #future-box, #point-box, #schedule-box, #lifestyle-box {
    width: 510px;
    position: relative;
    z-index: 2;
    background-color: #fefefe; }

  #task-box, #result-box, #item-box, #student-box, #if-box {
    width: 300px;
    position: relative;
    z-index: 2;
    background-color: #fefefe; }

  #schedule-box {
    margin: -100px 0 0; }
    #schedule-box table .tim .img01 {
      width: 60%; }

  .hashigo-yoko-box.h01 {
    margin-top: 120px;
    float: left;
    width: 68px;
    height: 70px; }
  .hashigo-yoko-box.h01 img {
    width: 35px;
    display: block;
    margin: 0 auto; }
  .hashigo-yoko-box.h02 {
    float: right;
    width: 68px;
    height: 120px;
    margin: 130px -15px 0 0; }
    .hashigo-yoko-box.h02 img {
      width: 60px;
      display: block;
      margin: 10px auto; }
  .hashigo-yoko-box.h04 {
    float: left;
    width: 68px;
    height: 70px;
    margin-top: 250px; }
  .hashigo-yoko-box.h05 {
    float: right;
    margin-top: 170px;
    padding: 20px 0;
    width: 68px; }

  .hashigo-tate-box.h01 {
    clear: both;
    float: right;
    width: 520px;
    height: 222px;
    margin: -205px 0 0 0;
    padding: 0 0 30px 100px;
    background-position: 407px center; }
  .hashigo-tate-box.h02, .hashigo-tate-box.h03 {
    float: left;
    width: 510px;
    height: 185px;
    margin: 0 auto 0 20px;
    padding: 0; }
  .hashigo-tate-box.h04 {
    float: right;
    width: 300px;
    height: 68px;
    margin: 0 150px 0 auto;
    padding: 0; }
  .hashigo-tate-box.h05 {
    float: right;
    margin-top: 170px;
    padding: 20px 0; }
  .hashigo-tate-box.h06 {
    position: relative;
    z-index: 1;
    height: 130px;
    width: 70px;
    float: left;
    margin-top: -330px;
    margin-left: 130px; }
  .hashigo-tate-box.h07 {
    padding: 45px 0;
    width: 70px;
    height: 85px;
    margin-left: 130px; }

  #result-box {
    margin-left: 15px; }

  #future-box {
    margin-top: 70px; }
    #future-box .future-img {
      width: 100%; }

  #point-box .point-img {
    width: 100%; }

  #student-box .student-img {
    width: 45%;
    display: block;
    margin: 0 auto; }

  .box-img {
    width: 100%; }

  .imagetestbox {
    width: 300px;
    height: 200px;
    float: right;
    background-color: #ccc; }

  .middle-img-box {
    height: 0;
    width: 100%;
    text-align: right; }
    .middle-img-box img {
      position: relative;
      z-index: 1;
      height: 175px;
      width: auto;
      margin-top: 50px;
      margin-right: 40px; }

  #conclusion-box {
    z-index: 2;
    position: relative; }
    #conclusion-box .margin10::after {
      content: "";
      display: block;
      clear: both; }
    #conclusion-box .margin10 .one-word {
      display: table;
      float: left;
      margin-right: 10px; }
    #conclusion-box .margin10 p {
      margin: 15px 0 0 0;
      line-height: 1.4;
      float: right;
      width: 80%; }

  .img-conclusion {
    float: right;
    margin-right: 40px;
    width: 143px; }

  #afterred-img-box {
    position: relative;
    z-index: 2;
    height: 0;
    width: 100%; }
    #afterred-img-box img {
      margin: 0 auto 0 20px;
      width: 140px; }

  #curves-img-box {
    position: relative;
    z-index: 1;
    background: url(../img/mito/img07.png) no-repeat 150px center;
    background-size: contain;
    padding: 52px 0 52px;
    height: 67px; }
    #curves-img-box img {
      height: 80px;
      margin: 0 auto 0 270px;
      display: block; }

  .item-detail {
    width: auto; }

  #item-box .item1 {
    background: url(../img/mito/img09.png) no-repeat right center;
    background-size: 39%;
    margin-bottom: 10px; }
  #item-box .item2 {
    background: url(../img/mito/img10.png) no-repeat right center;
    background-size: 40%;
    margin-bottom: 10px; }
  #item-box .item3 {
    background: url(../img/mito/img11.png) no-repeat right center;
    background-size: 30%;
    margin-bottom: 10px; }

  #after-lifestyle-box {
    float: right; }
    #after-lifestyle-box img {
      display: block;
      width: 130px;
      position: relative;
      z-index: 1;
      margin: -5px 390px 0 0; }

  #student-box {
    margin-top: 90px; }

  #if-box {
    margin-top: 80px; }

  #recommend-img-box {
    background: url(../img/mito/bg-recimg.png) no-repeat right top;
    width: 397px;
    position: absolute;
    z-index: 2;
    margin-top: 1px;
    margin-right: -100px;
    padding-top: 901px;
    top: 112px;
    right: 127px;
    background-size: 48%; }
    #recommend-img-box img {
      top: 78px;
      width: 266px;
      right: -11px;
      display: block;
      position: absolute;
      -moz-transform: rotate(10deg);
      -webkit-transform: rotate(10deg);
      -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      transform: rotate(10deg); }

  #before-footer-bssox img {
    width: 1220px;
    display: block;
    position: relative;
    margin: 0 auto;
    top: -210px; }

  #before-recommend-box {
    width: 100%;
    height: 0;
    z-index: 1;
    position: relative; }
    #before-recommend-box img {
      width: 600px;
      display: block;
      position: relative;
      top: -203px;
      margin: 0 60px 0 auto; }

  #message-box::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -15px;
    border: 10px solid transparent;
    border-left: 25px solid #eb8a7d; }

  #lifestyle-box .spe01 {
    width: 200px;
    float: right;
    margin: 0 0 0 20px;
    font-size: 0.75rem;
    line-height: 0; }
    #lifestyle-box .spe01 img {
      width: 200px;
      margin: 0 0 10px; }

  #before-footer-box img {
    width: 28%;
    position: relative;
    margin-top: -108px;
    margin-left: -460px; }

  #interest-box .arrow-box {
    height: 235px; }
  #interest-box .onebox {
    height: 235px; }
    #interest-box .onebox img.interest-img1 {
      width: 100px;
      display: block;
      margin: 20px auto 0; }
    #interest-box .onebox img.interest-img2 {
      width: 70px;
      display: block;
      margin: 10px auto 0; }

  #before-footer-box {
    width: 1300px; }

  #item-box .sp-item-img {
    display: none !important; }
  #item-box .item-name, #item-box .item-detail {
    margin: 0 auto 0 0; } }
@media screen and (max-width: 768px) {
  #number2-box img {
    width: 158px; }

  #student-box .student-img {
    display: block;
    margin: 0 auto;
    width: 40%; }

  #item-box .sp-item-img {
    display: block !important;
    width: 30%;
    height: auto;
    float: left; }
  #item-box .item1 .sp-item-img img, #item-box .item2 .sp-item-img img, #item-box .item3 .sp-item-img img {
    width: 100%;
    height: auto; }
  #item-box .item1 .sp-item-img img {
    margin-top: 20px; }
  #item-box .item2 .item-name {
    margin-top: 10px; }
  #item-box .item2 .sp-item-img img {
    margin-top: 40px; }
  #item-box .item3 .item-name {
    margin-top: 20px;
    margin-bottom: 0; }
  #item-box .item3 .sp-item-img img {
    margin-top: 20px;
    width: 65%; }
  #item-box .item-name, #item-box .item-detail {
    width: 68%;
    float: right; }

  #schedule-box table .tim .img01 {
    width: 55%; }

  /*#future-box .future-img,*/
  #after-lifestyle-box, #recommend-img-box {
    display: none; }

  #conclusion-box {
    background-image: url(../img/mito/img20a.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) 60px;
    background-size: 43%; }

  .img-conclusion {
    display: none; }

  #future-box .future-img, .box-img {
    width: 80%;
    display: block;
    margin: 10px auto 0; }

  #lifestyle-box .spe01 {
    font-size: 0.78rem;
    width: 50%;
    text-align: center;
    float: right;
    padding: 10px 0 0; }
    #lifestyle-box .spe01 img {
      width: 80%;
      display: block;
      margin: 0 auto 5px; }

  #before-recommend-box {
    max-width: 420px;
    width: calc(100% - 40px);
    margin: 0 auto -10px; }
    #before-recommend-box img {
      width: 100%; }

  #interest-box .onebox .p2 ul {
    width: 69%;
    float: left; }
  #interest-box .onebox img.interest-img1, #interest-box .onebox img.interest-img2 {
    display: block;
    width: 30%;
    float: right;
    margin: 0; }

  #photo-sp-box img {
    margin: 0 20px 0 auto; }
  #photo-sp-box .mini-box {
    height: 130px;
    width: 200px;
    margin: -130px auto 0 -7px; }
    #photo-sp-box .mini-box img {
      margin-left: -16px;
      margin-left: -16px;
      top: -30px;
      position: relative;
      -moz-transform: scale(1) rotate(-8deg);
      -webkit-transform: scale(1) rotate(-8deg);
      -o-transform: scale(1) rotate(-8deg);
      -ms-transform: scale(1) rotate(-8deg);
      transform: scale(1) rotate(-8deg); }

  .sp-tate-box.long img {
    display: flex;
    height: 80px;
    width: auto; }

  #before-footer-box {
    display: block !important;
    z-index: 2;
    position: relative;
    width: 100%;
    text-align: right;
    height: 80px;
    margin-top: -90px; }
    #before-footer-box img {
      width: 54%;
      height: auto;
      margin-top: 23px; } }

/*# sourceMappingURL=p-mito.css.map */