@charset "utf-8";

@media screen and (max-width: 650px) {

  html {
    font-size: 14px;
  }

  .wrapper {
    width: 90%;
  }

  h1 {
    font-size: 3rem;
    line-height: 3rem;
  }

  h2 {
    color: var(--main-color);
    font-size: 5rem;
    margin-bottom: 2.5rem;
    position: relative;
    transform: translate3d(-50px, 0, 0);
    transition: 1s;
    opacity: 0;
  }

  /* header */
  header {
    background-color: rgba(255, 255, 255, .7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  /* main-visual */
  .main-visual img {
    min-width: 80%;
    height: auto;
    top: 30%;
    right: 0;
    left: 50%;
    transform: translate(-50%, -30%);
  }

  /* works */
  .works h2::after {
    content: "/ 制作実績";
    position: absolute;
    left: 0;
    bottom: .5rem;
    font-size: 1.5rem;
  }

  .works .search-list {
    gap: 1rem;
    flex-wrap: wrap;
  }

  .search-list-item {
    width: calc((100% - 1rem) / 2);
    text-align: center;
  }

  .works .works-list {
    width: 100%;
  }

  .works .works-list-item {
    max-width: calc((100% - 1rem) / 2);
  }

  /* about */
  .about h2::after {
    content: "/ 私について";
    position: absolute;
    left: 0;
    bottom: .5rem;
    font-size: 1.5rem;
  }

  .about .container {
    width: 100%;
  }

  .about .profile {
    flex-direction: column;
  }

  .about .photo,
  .about .text {
    width: 100%;
  }

  .about .photo img {
    margin-bottom: 1.5rem;
  }

  /* contact */
  .contact h2::after {
    content: "/ 連絡先";
    position: absolute;
    left: 0;
    bottom: .5rem;
    font-size: 1.5rem;
  }

  .contact address {
    font-size: 2rem;
  }

  /* about me */
  .skill h3::after {
    content: "/ 何ができるのか";
    position: absolute;
    left: 0;
    bottom: .5rem;
    font-size: 1.5rem;
  }

  .skill .container {
    width: 100%;
    flex-direction: column;
  }

  .skill .design,
  .skill .cording {
    width: 100%;
  }

  .skill .design {
    margin-bottom: 3rem;
  }

  /* Strength */
  .strength h3::after {
    content: "/ 私の強み";
    position: absolute;
    left: 0;
    bottom: .5rem;
    font-size: 1.5rem;
  }

  .items {
    flex-direction: column;
  }

  .strength .item {
    width: 100%;
  }

  .strength .num01 p {
    position: absolute;
    top: 28%;
    left: 12%;
  }

  .strength .num02 p {
    position: absolute;
    bottom: 35%;
    left: 16%;
  }

  .strength .num03 p {
    position: absolute;
    bottom: 35%;
    right: 15%;
  }

  .careerplan .container {
    width: 100%;
    flex-direction: column;
  }

  .careerplan .anime {
    width: 100%;
    margin-bottom: 2.5rem;
    padding-right: 0;
  }
  
  .careerplan .plan-box {
    width: 100%;
  }
  
  /* Study */
  .study h3::after {
    content: "/ バナートレース";
    position: absolute;
    left: 0;
    bottom: .5rem;
    font-size: 1.5rem;
  }

  .study img {
    width: calc((100% - 1rem) / 2);
    height: auto;
  }

  /* Works */
  /* Works-item */
  .works-item .container {
    width: 100%;
  }

  .works-item .works-name {
    flex-direction: column;
  }

  footer {
    padding: 3rem 0 8rem;
  }  

  /* bottom-nav */
  header {
    display: none;
  }

  .top-page {
    bottom: 6rem;
  }

  .bottom-nav {
    opacity: 1;
    visibility: visible;
  }

  .bottom-nav ul {
    box-shadow: 0 -1px 3px rgba(82, 96, 102, .3);
    position: fixed;
    left: 0;
    bottom: 0;
    background: white;
    width: 100%;
  }

  .bottom-nav li {
    display: table;
    table-layout: fixed;
    width: 100%;
    padding: 1rem;
    list-style: none;
    text-align: center;
  }


  .bottom-nav i {
    font-size: 1.5rem;
  }

  .bottom-nav a span {
    display: block;
    margin-top: .5rem;
    font-size: .8rem;
  }
}