.pc {
  display: none; }

header {
  position: fixed;
  width: 100%;
  z-index: 2; }
  header h1 {
    position: absolute;
    left: 8%;
    top: 30px;
    width: 35%; }
  header nav {
    position: absolute;
    right: 3%;
    top: 30px;
    text-align: right;
    font-size: 15px; }
    header nav li {
      margin-bottom: 15px; }
    header nav a {
      text-decoration: underline; }

main {
  overflow: hidden; }
  main #mainVisual {
    position: relative;
    background: url("../img/index/image_mono_sp.webp") no-repeat center bottom;
    background-size: cover;
    height: 100vh;
    margin-bottom: 10%; }
    main #mainVisual h2 {
      position: absolute;
      left: 8%;
      bottom: 5vh;
      font-size: 8.2vw;
      padding-right: 8%;
      line-height: 1.2; }
      main #mainVisual h2 span {
        display: block;
        font-size: 2.4vw;
        padding: 10px 0 0 0;
        line-height: 1.8; }
  main #aboutArea {
    position: relative;
    margin: 0 8% 20%; }
    main #aboutArea dl {
      width: 80%;
      margin-bottom: 20px; }
      main #aboutArea dl dt {
        font-size: 13px;
        font-weight: normal; }
      main #aboutArea dl dd {
        font-size: 11px;
        color: #999;
        padding-top: 5px; }
    main #aboutArea .txt {
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      font-size: 11px;
      position: absolute;
      right: 0%;
      top: 0%; }
    main #aboutArea .txt::after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 70px;
      background-color: #999;
      position: absolute;
      top: 90px;
      right: 10px; }
  main #servicesArea {
    position: relative;
    margin: 0 8% 15%;
    padding-bottom: 5%; }
    main #servicesArea .linkBtn {
      position: absolute;
      right: 0%;
      bottom: 0; }
    main #servicesArea dl {
      width: 100%;
      margin-left: 0%;
      margin-bottom: 60px; }
      main #servicesArea dl dt {
        font-size: 13px;
        font-weight: normal; }
      main #servicesArea dl dd {
        font-size: 11px;
        color: #999;
        padding-top: 5px; }
    main #servicesArea ul {
      margin-left: 0%;
      display: flex;
      flex-wrap: wrap; }
      main #servicesArea ul li {
        width: calc(50% - 0px);
        margin-bottom: 40px; }
        main #servicesArea ul li h4 {
          font-size: 17px;
          margin-bottom: 5px;
          line-height: 1.4; }
        main #servicesArea ul li p {
          font-size: 11px;
          color: #666; }
  main #worksArea {
    margin: 0 8% 15%; }
    main #worksArea ul {
      display: flex;
      flex-wrap: wrap; }
      main #worksArea ul li {
        width: calc(100%);
        margin-bottom: 40px; }
        main #worksArea ul li .pht {
          margin-bottom: 20px; }
        main #worksArea ul li dt {
          font-size: 17px;
          margin-bottom: 5px;
          line-height: 1.5; }
        main #worksArea ul li dd {
          font-size: 13px;
          color: #666; }
        main #worksArea ul li a {
          display: block;
          transition: 0.3s; }
        main #worksArea ul li a:hover {
          transition: 0.3s;
          opacity: 0.7; }
  main .linkBtn {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0px;
    font-size: 14px;
    padding-top: 20px; }
    main .linkBtn a {
      text-decoration: underline;
      background: url("../img/common/arrow.svg") no-repeat right center;
      background-size: 30px 30px;
      padding: 10px 40px 10px 0px; }
  main h3 {
    position: relative;
    padding-left: 16px;
    margin-bottom: 20px;
    font-size: 18px; }
  main i {
    background: #000;
    border-radius: 7px;
    width: 7px;
    height: 8px;
    position: absolute;
    left: 0;
    top: 10px; }

#about {
  padding-top: 35%; }
  #about h2 {
    font-size: 36px;
    margin-left: 8%;
    margin-bottom: 15%; }
  #about .warp {
    margin: 0 8% 15% 8%; }
  #about .readjArea {
    font-size: 13px;
    font-weight: normal;
    margin-bottom: 10px;
    text-align: justify; }
    #about .readjArea p {
      margin-bottom: 15px; }
  #about .readeArea {
    font-size: 11px;
    color: #999;
    padding-top: 5px; }
  #about dl {
    border-bottom: 1px solid #999; }
    #about dl dt {
      font-size: 11px;
      font-weight: normal;
      color: #999;
      padding-top: 5px; }
    #about dl dd {
      font-size: 13px;
      padding: 4% 0 5% 0; }
  #about ul {
    overflow: hidden; }
    #about ul li {
      margin-bottom: 5%; }

#service {
  padding-top: 35%; }
  #service h2 {
    font-size: 36px;
    margin-left: 8%;
    margin-bottom: 15%; }
  #service .warp {
    margin: 0 8% 15% 8%; }
  #service h4 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px; }
  #service p {
    font-size: 13px;
    margin-bottom: 30px; }

#contactArea {
  position: relative; }
  #contactArea a {
    display: block;
    background: url("../img/common/bg_contact.webp") no-repeat center top;
    background-size: cover;
    color: #fff;
    transition: 0.3s;
    padding: 8% 8%; }
  #contactArea a:hover {
    transition: 0.3s;
    opacity: 0.9; }
  #contactArea dl dt {
    font-size: 15px;
    margin-bottom: 5%; }
  #contactArea dl dd {
    font-size: 11px; }
  #contactArea .linkBtn {
    position: absolute;
    right: 8%;
    bottom: 15%;
    text-decoration: underline;
    padding-right: 40px;
    font-size: 15px; }
    #contactArea .linkBtn img {
      width: 30px;
      position: absolute;
      right: 0;
      top: 0px; }

footer {
  position: relative;
  background: #000;
  color: #fff;
  padding: 6% 8%; }
  footer a {
    color: #fff;
    text-decoration: underline; }
  footer dl {
    overflow: hidden;
    font-size: 13px;
    margin-bottom: 3%; }
    footer dl dt {
      width: 35%;
      margin: 0 auto; }
    footer dl dd {
      float: left;
      margin-right: 20px;
      padding-top: 0px;
      display: none; }
  footer p {
    font-size: 12px;
    color: #666;
    text-align: center; }