@charset "UTF-8";
/*
 *  SiteName : Miz ポートフォリオ
 *  SiteUrl : https://www.wideglo.jp/staff/miz/
 *  © 2025 Wideglo
 */
/*==============================================================
  loading
==============================================================*/
#loading {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #007a88;
  overflow: hidden;
  transition: all 0.5s ease;
}
#loading p {
  position: absolute;
  top: 50%;
  width: 100%;
  letter-spacing: 0.15em;
  color: #ffffff;
  text-align: center;
  transform: translateY(-50%);
  font-size: 32px;
  font-size: 3.2rem;
}
#loading p.textAnim {
  opacity: 0;
}
#loading p.textAnim span {
  display: inline-block;
}
#loading p.textAnim > span {
  height: 1.2em;
  overflow: hidden;
}
#loading p.textAnim > span > span {
  animation: textAnim 0.5s backwards;
}

/*==============================================================
  firstView
==============================================================*/
#firstView {
  position: relative;
  height: 100vh;
  min-height: 700px;
  padding: 0;
  overflow: hidden;
}
#firstView .contents {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 70%;
  min-width: 1000px;
  padding: 12.5vh 0 calc(12.5vh + 40px);
  border-radius: 20px;
  background-color: rgba(0, 122, 136, 0.4);
  color: #ffffff;
  text-align: center;
  opacity: 0;
  transition: all 1.5s ease;
  transform: translate(-50%, -50%);
}
#firstView .contents h1 {
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 72px;
  font-size: 7.2rem;
}
#firstView .contents h1 span {
  display: block;
  margin: 40px auto 80px;
  letter-spacing: 0.15em;
  font-size: 40px;
  font-size: 4rem;
}
#firstView .contents ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 80%;
  margin: 0 auto;
}
#firstView .contents ul li {
  width: 20%;
  text-align: center;
  font-size: 24px;
  font-size: 2.4rem;
}
#firstView .contents ul li a {
  color: #ffffff;
}
#firstView .contents ul li a span {
  display: block;
  margin: 0 auto 16px;
  font-size: 48px;
  font-size: 4.8rem;
}
#firstView .contents .scrollIcon {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
}
#firstView .contents .scrollIcon a {
  color: #ffffff;
  font-size: 24px;
  font-size: 2.4rem;
}
#firstView .contents .scrollIcon a::before, #firstView .contents .scrollIcon a::after {
  position: absolute;
  right: 0;
  left: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  transform: rotate(135deg);
  animation: scrollanim 2s infinite;
  content: "";
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}
#firstView .contents .scrollIcon a::before {
  bottom: -16px;
  animation-delay: 0s;
}
#firstView .contents .scrollIcon a::after {
  bottom: -32px;
  animation-delay: 0.15s;
}
#firstView .firstviewImage {
  position: relative;
  right: -5%;
  z-index: -1;
  width: 100%;
  height: 33.3333333333vh;
  min-height: 233.3333333333px;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: all 1.5s ease;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: lighten;
}
#firstView .firstviewImage:nth-of-type(3) {
  right: auto;
  left: -5%;
}
#firstView .contentsShow {
  top: 50%;
  opacity: 1;
}
#firstView .firstviewimageShow {
  right: 0;
  opacity: 1;
}
#firstView .firstviewimageShow:nth-of-type(3) {
  left: 0;
}

/*==============================================================
  aboutMe
==============================================================*/
#aboutMe .contents .aboutMyself {
  display: flex;
  flex-wrap: wrap;
}
#aboutMe .contents .aboutMyself .ownImage {
  width: 21%;
  margin: 0 40px 0 0;
  overflow: hidden;
}
#aboutMe .contents .aboutMyself .ownImage > img {
  border-radius: 50%;
}
#aboutMe .contents .aboutMyself .ownImage .contact {
  margin: 16px auto 0;
  text-align: center;
}
#aboutMe .contents .aboutMyself .ownImage .contact p {
  font-weight: 700;
  font-size: 14px;
  font-size: 1.4rem;
}
#aboutMe .contents .aboutMyself .ownImage .contact ul {
  display: flex;
  justify-content: flex-start;
  margin: 8px 0;
  text-align: center;
}
#aboutMe .contents .aboutMyself .ownImage .contact ul li {
  margin: 0 16px 0 0;
  text-align: center;
  flex-grow: 1;
  font-size: 12px;
  font-size: 1.2rem;
}
#aboutMe .contents .aboutMyself .ownImage .contact ul li:nth-last-of-type(1) {
  margin: 0;
}
#aboutMe .contents .aboutMyself .ownImage .contact ul li img {
  display: block;
  height: 24px;
  margin: 0 auto 8px;
}
#aboutMe .contents .aboutMyself .ownImage .contact ul + p {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  font-size: 1.2rem;
}
#aboutMe .contents .aboutMyself .selfIntroduction {
  width: 21%;
  padding: 16px 40px 16px 0;
  border-right: 3px #ffffff solid;
}
#aboutMe .contents .aboutMyself .selfIntroduction ul {
  margin: 0 0 -16px;
}
#aboutMe .contents .aboutMyself .selfIntroduction ul li {
  margin: 0 0 16px;
}
#aboutMe .contents .aboutMyself .selfIntroduction ul li span {
  display: block;
  margin: 0 0 8px;
  font-weight: 700;
}
#aboutMe .contents .aboutMyself .selfIntroduction ul li span.material-icons {
  display: inline-block;
  margin: 0 0 0 4px;
  font-weight: 400;
  vertical-align: -5px;
  font-size: 20px;
  font-size: 2rem;
}
#aboutMe .contents .aboutMyself > p {
  width: calc(58% - 83px - 40px);
  padding: 4px 0 0 40px;
}
#aboutMe .contents .ownCharacteristics {
  display: flex;
  align-items: stretch;
  margin: 48px 0 0;
}
#aboutMe .contents .ownCharacteristics > div {
  width: calc(50% - 20px);
  padding: 24px;
  border-radius: 10px;
}
#aboutMe .contents .ownCharacteristics h3 {
  font-weight: 700;
  color: #ffffff;
  font-size: 24px;
  font-size: 2.4rem;
}
#aboutMe .contents .ownCharacteristics h3 + p {
  margin: 0 0 24px;
  text-align: right;
  font-size: 12px;
  font-size: 1.2rem;
}
#aboutMe .contents .ownCharacteristics h3 + p span {
  font-weight: 700;
  vertical-align: -2px;
  font-size: 14px;
  font-size: 1.4rem;
}
#aboutMe .contents .ownCharacteristics h4 {
  margin: 16px 0;
  font-weight: 700;
  color: #ffffff;
}
#aboutMe .contents .ownCharacteristics h5 {
  margin: 16px 0 8px;
  font-weight: 700;
  color: #ffffff;
}
#aboutMe .contents .ownCharacteristics h5 span {
  display: inline-block;
  margin: 0 4px 0 0;
  color: #ffffff;
  vertical-align: -6px;
}
#aboutMe .contents .ownCharacteristics .sixteenPersonalities {
  margin: 0 40px 0 0;
  background-color: rgba(136, 97, 154, 0.3);
}
#aboutMe .contents .ownCharacteristics .strengthsFinder {
  background-color: rgba(0, 157, 78, 0.3);
}

/*==============================================================
  career
==============================================================*/
#career .contents h3 {
  margin: 0 0 40px;
  padding: 16px 16px 16px 24px;
  border-radius: 24px 0;
  background-color: rgba(0, 122, 136, 0.3);
  font-weight: 700;
  color: #ffffff;
  font-size: 24px;
  font-size: 2.4rem;
}
#career .contents ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 -40px;
}
#career .contents ul + h3 {
  margin: 48px 0 40px;
}
#career .contents ul li {
  width: calc((100% - 48px) / 4);
  margin: 0 16px 40px 0;
  text-align: center;
}
#career .contents ul li:nth-of-type(4n) {
  margin: 0 0 40px;
}
#career .contents ul li a {
  display: inline;
}
#career .contents ul li a h4 {
  margin: 24px 0 0;
  font-weight: 700;
}
#career .contents ul li a h4 .material-icons {
  display: inline-block;
  margin: 0 0 0 4px;
  vertical-align: -4px;
  font-size: 18px;
  font-size: 1.8rem;
}
#career .contents ul li p {
  margin: 16px 0;
}
#career .contents ul li p span {
  font-weight: 700;
}
#career .contents ul li .careerlistCheckbox {
  display: none;
}
#career .contents ul li .careerlistBtn {
  display: inline-block;
  position: relative;
  width: 160px;
  padding: 16px 0;
  border: 1px rgb(68, 68, 68) solid;
  border-radius: 3px;
  transition: all 0.5s ease;
}
#career .contents ul li .careerlistBtn::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(68, 68, 68);
  transition: all 0.5s ease;
  transform: scaleX(0);
  content: "";
  transform-origin: right;
  transition-property: transform;
}
#career .contents ul li .careerlistBtn:hover {
  color: #ffffff;
  cursor: pointer;
}
#career .contents ul li .careerlistBtn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
#career .contents ul li .careerlistBtn span {
  position: relative;
}
#career .contents ul li .modalWindow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s ease;
}
#career .contents ul li .modalWindow .modalwindowBackground {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(68, 68, 68, 0.6);
}
#career .contents ul li .modalWindow .modalContets {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: calc(70% - 96px);
  height: calc(70% - 96px);
  padding: 48px;
  border-radius: 20px;
  background-color: #ffffff;
  text-align: left;
  overflow-x: auto;
  transform: translate(-50%, -50%);
}
#career .contents ul li .modalWindow .modalContets::-webkit-scrollbar {
  width: 15px;
}
#career .contents ul li .modalWindow .modalContets .careercloseBtn {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 1;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
#career .contents ul li .modalWindow .modalContets .careercloseBtn::before, #career .contents ul li .modalWindow .modalContets .careercloseBtn::after {
  display: block;
  position: absolute;
  top: 16px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(0, 122, 136, 0.3);
  content: "";
}
#career .contents ul li .modalWindow .modalContets .careercloseBtn::before {
  transform: rotate(45deg);
}
#career .contents ul li .modalWindow .modalContets .careercloseBtn::after {
  transform: rotate(-45deg);
}
#career .contents ul li .modalWindow .modalContets h5 {
  position: relative;
  margin: 0 0 32px;
  font-weight: 700;
  color: #007a88;
  font-size: 32px;
  font-size: 3.2rem;
}
#career .contents ul li .modalWindow .modalContets h5 span {
  margin: 0 0 0 16px;
  color: rgb(68, 68, 68);
  font-size: 16px;
  font-size: 1.6rem;
}
#career .contents ul li .modalWindow .modalContets table {
  width: 100%;
  margin: 32px 0 -24px;
}
#career .contents ul li .modalWindow .modalContets table tr {
  display: block;
  margin: 0 0 24px;
}
#career .contents ul li .modalWindow .modalContets table tr th {
  width: 136px;
  padding: 12px;
  border-radius: 3px;
  background-color: rgba(0, 122, 136, 0.3);
  font-weight: 700;
  color: #ffffff;
  vertical-align: middle;
}
#career .contents ul li .modalWindow .modalContets table tr td {
  padding: 8px 0 8px 16px;
  line-height: 1.5em;
  vertical-align: middle;
}
#career .contents ul li .modalWindow .modalContets .logoImage {
  position: absolute;
  right: 32px;
  bottom: 32px;
}
#career .contents ul li .modalWindow .modalContets .logoImage img {
  height: 30px;
}
#career .contents ul li #rakutencareerCheckbox:checked ~ .rakutenCareer {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #yahoocareerCheckbox:checked ~ .yahooCareer {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #amazoncareerCheckbox:checked ~ .amazonCareer {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #aupaycareerCheckbox:checked ~ .aupayCareer {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #rakutenproductionCheckbox:checked ~ .rakutenProduction {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #yahooproductionCheckbox:checked ~ .yahooProduction {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #aupayproductionCheckbox:checked ~ .aupayProduction {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #futureshopproductionCheckbox:checked ~ .futureshopProduction {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #makeshopproductionCheckbox:checked ~ .makeshopProduction {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #colormeproductionCheckbox:checked ~ .colormeProduction {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #shopifyproductionCheckbox:checked ~ .shopifyProduction {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #corporatesiteproductionCheckbox:checked ~ .corporatesiteProduction {
  z-index: 2;
  opacity: 1;
}
#career .contents ul li #brandsiteproductionCheckbox:checked ~ .brandsiteProduction {
  z-index: 2;
  opacity: 1;
}

/*==============================================================
  skill
==============================================================*/
#skill .contents ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
#skill .contents ul li {
  width: calc((100% - 64px) / 5);
  margin: 0 16px 0 0;
  text-align: center;
}
#skill .contents ul li:nth-last-of-type(1) {
  margin: 0;
}
#skill .contents ul li a {
  display: inline;
}
#skill .contents ul li a img {
  max-width: 80%;
}
#skill .contents ul li a h3 {
  margin: 24px 0 16px;
  font-weight: 700;
}
#skill .contents ul li a h3 .material-icons {
  display: inline-block;
  margin: 0 0 0 4px;
  vertical-align: -3px;
  font-size: 18px;
  font-size: 1.8rem;
}
#skill .contents ul li p span {
  font-weight: 700;
}

/*==============================================================
  apps
==============================================================*/
#apps .contents ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
#apps .contents ul li {
  width: calc((100% - 64px) / 5);
  margin: 0 16px 40px 0;
  text-align: center;
}
#apps .contents ul li:nth-of-type(5n) {
  margin: 0 0 16px;
}
#apps .contents ul li a {
  display: inline;
}
#apps .contents ul li a img {
  max-width: 60%;
}
#apps .contents ul li a h3 {
  margin: 24px 0 16px;
  font-weight: 700;
}
#apps .contents ul li a h3 .material-icons {
  display: inline-block;
  margin: 0 0 0 4px;
  vertical-align: -3px;
  font-size: 18px;
  font-size: 1.8rem;
}
#apps .contents ul li p {
  font-size: 14px;
  font-size: 1.4rem;
}
#apps .contents ul li p span {
  font-weight: 700;
}

/*==============================================================
  work
==============================================================*/
#work .contents h3 {
  margin: 0 0 40px;
  padding: 16px 16px 16px 24px;
  border-radius: 24px 0;
  background-color: rgba(0, 122, 136, 0.3);
  font-weight: 700;
  color: #ffffff;
  font-size: 24px;
  font-size: 2.4rem;
}
#work .contents ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 -40px;
}
#work .contents ul + h3 {
  margin: 48px 0 40px;
}
#work .contents ul li {
  width: calc((100% - 48px) / 4);
  margin: 0 16px 40px 0;
  text-align: center;
}
#work .contents ul li:nth-of-type(4n) {
  margin: 0 0 40px;
}
#work .contents ul li h4 {
  margin: 24px 0 16px;
  font-weight: 700;
}
#work .contents ul li p {
  margin: 16px 0;
}
#work .contents ul li p span {
  font-weight: 700;
}
#work .contents ul li .worklistBtn {
  display: inline-block;
  position: relative;
  width: 160px;
  padding: 16px 0;
  border: 1px rgb(68, 68, 68) solid;
  border-radius: 3px;
  transition: all 0.5s ease;
}
#work .contents ul li .worklistBtn::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(68, 68, 68);
  transition: all 0.5s ease;
  transform: scaleX(0);
  content: "";
  transform-origin: right;
  transition-property: transform;
}
#work .contents ul li .worklistBtn:hover {
  color: #ffffff;
  cursor: pointer;
}
#work .contents ul li .worklistBtn:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
#work .contents ul li .worklistBtn span {
  position: relative;
}
#work .contents ul li .modalWindow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.5s ease;
}
#work .contents ul li .modalWindow .modalwindowBackground {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(68, 68, 68, 0.6);
}
#work .contents ul li .modalWindow .modalContets {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: calc(70% - 96px);
  height: calc(70% - 96px);
  padding: 48px;
  border-radius: 20px;
  background-color: #ffffff;
  text-align: left;
  overflow-x: auto;
  transform: translate(-50%, -50%);
}
#work .contents ul li .modalWindow .modalContets::-webkit-scrollbar {
  width: 15px;
}
#work .contents ul li .modalWindow .modalContets .workcloseBtn {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 1;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
#work .contents ul li .modalWindow .modalContets .workcloseBtn::before, #work .contents ul li .modalWindow .modalContets .workcloseBtn::after {
  display: block;
  position: absolute;
  top: 16px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(0, 122, 136, 0.3);
  content: "";
}
#work .contents ul li .modalWindow .modalContets .workcloseBtn::before {
  transform: rotate(45deg);
}
#work .contents ul li .modalWindow .modalContets .workcloseBtn::after {
  transform: rotate(-45deg);
}
#work .contents ul li .modalWindow .modalContets h5 {
  position: relative;
  margin: 0 0 32px;
  font-weight: 700;
  color: #007a88;
  font-size: 32px;
  font-size: 3.2rem;
}
#work .contents ul li .modalWindow .modalContets h5 span {
  margin: 0 0 0 16px;
  color: rgb(68, 68, 68);
  font-size: 16px;
  font-size: 1.6rem;
}
#work .contents ul li .modalWindow .modalContets h5 span a {
  display: inline;
}
#work .contents ul li .modalWindow .modalContets table {
  width: 100%;
  margin: 32px 0 -24px;
}
#work .contents ul li .modalWindow .modalContets table tr {
  display: block;
  margin: 0 0 24px;
}
#work .contents ul li .modalWindow .modalContets table tr th {
  width: 136px;
  padding: 12px;
  border-radius: 3px;
  background-color: rgba(0, 122, 136, 0.3);
  font-weight: 700;
  color: #ffffff;
  vertical-align: middle;
}
#work .contents ul li .modalWindow .modalContets table tr td {
  padding: 8px 0 8px 16px;
  line-height: 1.5em;
  vertical-align: middle;
}
#work .contents ul li .modalWindow .modalContets .logoImage {
  position: absolute;
  right: 32px;
  bottom: 32px;
}
#work .contents ul li .modalWindow .modalContets .logoImage img {
  height: 80px;
}
#work .contents ul li #iksprayersworkCheckbox:checked ~ .iksprayersWork,
#work .contents ul li #garagetherapyworkCheckbox:checked ~ .garagetherapyWork,
#work .contents ul li #detailfactoryworkCheckbox:checked ~ .detailfactoryWork {
  z-index: 2;
  opacity: 1;
}
@media only screen and (max-width: 48.0625em){
  #loading p {
    font-size: 24px;
    font-size: 2.4rem;
  }
  #firstView {
    min-height: 500px;
  }
  #firstView .contents {
    min-width: 90%;
    padding: 11.1111111111vh 0 calc(11.1111111111vh + 24px);
  }
  #firstView .contents h1 {
    letter-spacing: 0.1em;
    font-size: 48px;
    font-size: 4.8rem;
  }
  #firstView .contents h1 span {
    margin: 24px auto 40px;
    letter-spacing: 0.08em;
    font-size: 24px;
    font-size: 2.4rem;
  }
  #firstView .contents ul {
    margin: 0 auto -24px;
  }
  #firstView .contents ul li {
    width: 33.3333333333%;
    margin: 0 0 24px;
    font-size: 16px;
    font-size: 1.6rem;
  }
  #firstView .contents ul li a span {
    margin: 0 auto 8px;
    font-size: 32px;
    font-size: 3.2rem;
  }
  #firstView .contents .scrollIcon {
    bottom: 56px;
  }
  #firstView .contents .scrollIcon a {
    font-size: 16px;
    font-size: 1.6rem;
  }
  #aboutMe .contents .aboutMyself {
    display: block;
  }
  #aboutMe .contents .aboutMyself .ownImage {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
  }
  #aboutMe .contents .aboutMyself .ownImage > img {
    width: 40%;
  }
  #aboutMe .contents .aboutMyself .ownImage .contact {
    width: calc(60% - 16px);
    margin: 8px 0 0 16px;
  }
  #aboutMe .contents .aboutMyself .ownImage .contact p {
    font-size: 12px;
    font-size: 1.2rem;
  }
  #aboutMe .contents .aboutMyself .ownImage .contact ul {
    margin: 16px 0;
  }
  #aboutMe .contents .aboutMyself .ownImage .contact ul li {
    font-size: 10px;
    font-size: 1rem;
  }
  #aboutMe .contents .aboutMyself .ownImage .contact ul li img {
    height: 24px;
  }
  #aboutMe .contents .aboutMyself .ownImage .contact ul + p {
    font-size: 10px;
    font-size: 1rem;
  }
  #aboutMe .contents .aboutMyself .selfIntroduction {
    width: 100%;
    padding: 24px 0 0;
    border-right: none;
  }
  #aboutMe .contents .aboutMyself .selfIntroduction ul {
    display: flex;
    flex-wrap: wrap;
  }
  #aboutMe .contents .aboutMyself .selfIntroduction ul li {
    width: 45%;
  }
  #aboutMe .contents .aboutMyself .selfIntroduction ul li:nth-of-type(2n) {
    width: 55%;
  }
  #aboutMe .contents .aboutMyself .selfIntroduction ul li span.material-icons {
    vertical-align: -3px;
    font-size: 16px;
    font-size: 1.6rem;
  }
  #aboutMe .contents .aboutMyself > p {
    width: 100%;
    margin: 16px 0 0;
    padding: 0;
  }
  #aboutMe .contents .ownCharacteristics {
    display: block;
    margin: 24px 0 0;
  }
  #aboutMe .contents .ownCharacteristics > div {
    width: calc(100% - 32px);
    padding: 16px;
  }
  #aboutMe .contents .ownCharacteristics .sixteenPersonalities {
    margin: 0 auto 24px;
  }
  #career .contents h3 {
    border-radius: 16px 0;
    font-size: 16px;
    font-size: 1.6rem;
  }
  #career .contents ul li {
    width: calc((100% - 16px) / 2);
  }
  #career .contents ul li:nth-of-type(2n) {
    margin: 0 0 40px;
  }
  #career .contents ul li .careerlistBtn {
    width: calc(100% - 2px);
  }
  #career .contents ul li .modalWindow .modalContets {
    width: calc(90% - 48px);
    height: calc(90% - 48px);
    padding: 24px;
    border-radius: 10px;
  }
  #career .contents ul li .modalWindow .modalContets .careercloseBtn {
    top: 16px;
    right: 16px;
  }
  #career .contents ul li .modalWindow .modalContets h5 {
    margin: 0 0 24px;
    font-size: 24px;
    font-size: 2.4rem;
  }
  #career .contents ul li .modalWindow .modalContets h5 span {
    display: block;
    margin: 8px 0 0;
  }
  #career .contents ul li .modalWindow .modalContets table {
    margin: 24px 0 0;
  }
  #career .contents ul li .modalWindow .modalContets table tr th {
    display: block;
    width: calc(100% - 24px);
  }
  #career .contents ul li .modalWindow .modalContets table tr td {
    display: block;
    margin: 8px 0 0;
    padding: 0 0 0 8px;
  }
  #career .contents ul li .modalWindow .modalContets .logoImage {
    position: static;
    margin: 32px 0 0;
    text-align: center;
  }
  #skill .contents ul {
    margin: 0 0 -40px;
  }
  #skill .contents ul li {
    width: calc((100% - 16px) / 3);
    margin: 0 8px 40px 0;
  }
  #skill .contents ul li:nth-of-type(3n) {
    margin: 0 0 40px;
  }
  #skill .contents ul li:nth-last-of-type(1) {
    margin: 0 8px 40px 0;
  }
  #skill .contents ul li a h3 {
    margin: 16px 0 8px;
  }
  #skill .contents ul li a h3 .material-icons {
    font-size: 16px;
    font-size: 1.6rem;
  }
  #skill .contents ul li p {
    font-size: 12px;
    font-size: 1.2rem;
  }
  #apps .contents ul {
    margin: 0 0 -40px;
  }
  #apps .contents ul li {
    width: calc((100% - 16px) / 3);
    margin: 0 8px 40px 0;
  }
  #apps .contents ul li:nth-of-type(3n) {
    margin: 0 0 40px;
  }
  #apps .contents ul li:nth-of-type(5n) {
    margin: 0 8x 40px 0;
  }
  #apps .contents ul li a h3 {
    margin: 16px 0 8px;
  }
  #apps .contents ul li a h3 .material-icons {
    font-size: 16px;
    font-size: 1.6rem;
  }
  #apps .contents ul li p {
    font-size: 12px;
    font-size: 1.2rem;
  }
  #work .contents h3 {
    border-radius: 16px 0;
    font-size: 16px;
    font-size: 1.6rem;
  }
  #work .contents ul li {
    width: calc((100% - 16px) / 2);
  }
  #work .contents ul li:nth-of-type(2n) {
    margin: 0 0 40px;
  }
  #work .contents ul li .worklistBtn {
    width: calc(100% - 2px);
  }
  #work .contents ul li .modalWindow .modalContets {
    width: calc(90% - 48px);
    height: calc(90% - 48px);
    padding: 24px;
    border-radius: 10px;
  }
  #work .contents ul li .modalWindow .modalContets .workcloseBtn {
    top: 16px;
    right: 16px;
  }
  #work .contents ul li .modalWindow .modalContets h5 {
    margin: 0 0 24px;
    font-size: 24px;
    font-size: 2.4rem;
  }
  #work .contents ul li .modalWindow .modalContets h5 span {
    display: block;
    margin: 8px 0 0;
  }
  #work .contents ul li .modalWindow .modalContets table {
    margin: 24px 0 0;
  }
  #work .contents ul li .modalWindow .modalContets table tr th {
    display: block;
    width: calc(100% - 24px);
  }
  #work .contents ul li .modalWindow .modalContets table tr td {
    display: block;
    margin: 8px 0 0;
    padding: 0 0 0 8px;
  }
  #work .contents ul li .modalWindow .modalContets .logoImage {
    position: static;
    margin: 32px 0 0;
    text-align: center;
  }
}