/* 全体 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  font-family: "Anton", "Caveat", "Noto Sans JP", "游ゴシック", sans-serif;
  color: #333;
  font-size: 16px;
  font-style: normal;
  margin-left: auto;
  margin-right: auto;
}

body {
  background-color: #ffffff;
  /* 基本の背景色 */
  background-image: linear-gradient(#ffffffe5, #ffffffdc),
    /* ベース色 */ url("img/noise.png");
  /* ノイズ画像 */
  background-repeat: repeat;
  /* 繰り返し */
  background-size: 100px;
  /* ノイズパターンのサイズ調整 */
  color: #333;
  /* テキスト色 */
}

article {
  margin-left: auto;
  margin-right: auto;
  margin-top: 90px;
}

p,
h1,
h2 {
  letter-spacing: 0.1em;
}

img {
  overflow: hidden;
}

img:hover {
  transition: 0.5s;
  filter: saturate(100%);
}

.caveat {
  font-family: "Caveat";
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 44px;
  letter-spacing: 0.05em;
}

.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

a {
  text-decoration: none;
}

a,
a:visited,
a:hover,
a:active {
  color: #333;
}

h2 {
  font-size: 58px;
  text-align: left;
}

h2 {
  transition: 1s;
}

/* h2見出し */
.h2-box {
  height: 90px;
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  display: flex;
  justify-content: center;
}

.h2-titlebox {
  max-width: 1080px;
  width: 1080px;
}

/* 背景の文字 */
.back-text {
  font-family: "Caveat";
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 290px;
  color: #eaeaea;
  transform: rotate(-7.51deg);
  margin-left: auto;
  margin-right: auto;
  max-width: 1650px;
  position: relative;
  z-index: -10;
}

/* 最上部 */
.header-top {
  width: auto;
  height: 12px;
  background-color: #e0e0e0;
}
/* サイドバー（右固定メニュー） */
.sidebar {
  position: fixed;
  right: 0;
  top: 0;
  width: 60px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  z-index: 10;
  display: none;
}

.sidebar a {
  background-color: #333333;
  color: white;
  text-decoration: none;
  writing-mode: vertical-rl;
  margin: 1px 0;
  font-size: 27px;
  width: 60px;
  height: 122px;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 10px 10px 0;
}

.side-menu li:hover {
  transform: translatex(-3px);
  transition: 0.5s;
}

.side-menu a:hover {
  background-color: #e0e0e0;
  transition: 0.5s;
  border-radius: 0 10px 10px 0;
}

/* メインコンテンツ */
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 361px;
  height: 602px;
  margin-top: 100px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.MIHOMORUDESIGN {
  font-size: 28px;
}

.Portfolio {
  font-size: 95px;
}

.webdesiner:hover {
  transition: 1s;
  color: #fc9dcc;
}

.webdesiner {
  transition: 1s;
}

li {
  list-style: none;
}

.container img {
  width: 50px;
  margin-right: 10px;
}

.container .inter {
  margin-top: -20px;
  font-size: 12px;
}

.menu li {
  margin-top: 43px;
  font-size: 28px;
  transition: 0.5s;
}

.main-img img {
  width: 543px;
  height: 346px;
  display: block;
}

.main-img img:hover {
  filter: saturate(100%);
}

.main-img p {
  transform: rotate(-7.51deg);
  position: absolute;
  margin-left: -1.5em;
  margin-top: 10vh;
  transition: 1s;
}

.main-img p:hover {
  transition: 1s;
  color: #88ff98;
}

.main-img {
  display: flex;
  flex-direction: column;
}

.menu a {
  transition: 1s;
}

.menu li a::after {
  background-color: #333; /* 下線の色 */
  bottom: -4px; /* 要素の下端からの距離 */
  content: ""; /* 要素に内容を追加 */
  height: 2px; /* 下線の高さ */
  left: 0; /* 要素の左端からの距離 */
  position: absolute; /* 絶対位置指定 */
  transform: scale(0, 1); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
  transform-origin: left top; /* 変形の原点を左上に指定 */
  transition: transform 0.3s; /* 変形をアニメーション化 */
  width: 100%; /* 要素の幅 */
}
/* リンクにホバーした際の下線の表示 */
.menu li a:hover::after {
  transform: scale(1, 1); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
}

.works:hover {
  transition: 1s;
  color: #a888ff;
}

.profile:hover {
  transition: 1s;
  color: #f7ff88;
}

.contact:hover {
  transition: 1s;
  color: #ff88a2;
}

.main-sns {
  width: 122px;
  height: 46px;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

.main-sns li {
  margin: 0;
}

.main-sns li:hover {
  transform: translatey(-3px);
  transition: 0.5s;
}

.scroll {
  text-align: center;
  margin: 70px 0 25px;
}

.scroll a {
  display: block;
  margin-bottom: 8px;
  transition: 1s;
}

.scroll a:hover {
  transition: 1s;
  color: #cf6a6a;
}

.scroll img:hover {
  transform: translatey(3px);
  transition: 0.5s;
}

/* works */
.work-box {
  max-width: 1080px;

  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -300px;
  margin-bottom: 100px;
  z-index: 10;
}

.work-box img {
  border: 1px solid #333;
  padding: 10px;
}

.works-right {
  width: 50%;
  margin: 0 -20px 0 0;
}
.works-left {
  width: 50%;
  margin: 0 0 0 -40px;
}

.work-box p {
  margin: auto;
  line-height: 2.2em;
  max-width: 460px;
}

.work-box .inter {
  font-size: 20px;
  margin: 20px auto;
}

.work-box img {
  display: block;
  margin: 10px auto;
}

h3 {
  font-size: 106px;
  margin: 20px auto;
  text-align: center;
}

.works-right-inner {
  width: 540px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 50px auto;
  align-items: flex-end;
}

.works-right-inner2 {
  width: 540px;
  height: 330px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-top: 50px;
  align-items: stretch;
}

.works-right-inner2 img {
  margin: 1px auto;
}

.works-left img,
.works-right img {
  transition: 1s;
}

.works-left img:hover,
.works-right img:hover {
  transform: scale(1.01, 1.01);
  transition: 0.5s;
  filter: saturate(100%);
}

/* PROFILE */
.prof-box {
  max-width: 1080px;
  margin: 0 auto 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -300px;
}

.back-text2 {
  transform: rotate(7.51deg);
  margin-top: 0.3em;
  text-align: right;
}

.prof-img img {
  max-width: 342px;
  height: auto;
  margin-left: 10%;
  display: block;
}

.prof-img {
  display: flex;
  flex-direction: column;
}

.prof-text {
  max-width: 506px;

  font-family: "Noto Sans JP";
  line-height: 2em;
  margin-right: 10%;
}
.prof-img p {
  transform: rotate(-7.51deg);
  position: absolute;
  transition: 1s;
}

.prof-img p:hover {
  transition: 1s;
  color: rgb(233, 123, 169);
}

/*CONTACT */
.contact-box {
  max-width: 1080px;
  display: flex;
  justify-content: space-between;
  margin: -200px auto 150px;
  align-items: center;
}

.contact-text {
  width: 300px;
}

.contact-button {
  width: 162px;
  height: 58px;
  display: block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  font-size: 26px;
  text-align: center;
  transition: 1s;
}

.contact-button:hover {
  background-color: #ff88a2;
  transition: 1s;
}

.contact-button:visited {
  color: #fff;
}

.contact-img {
  width: 374px;
  height: 300px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.contact-img img {
  display: block;
}

.contact-img p {
  transform: rotate(7.51deg);
  position: absolute;
  right: -1vw;
  top: -2vh;
  transition: 1s;
}

.contact-img p:hover {
  transition: 1s;
  color: rgb(141, 233, 123);
}

/* フッター */
.footer-box {
  width: auto;
  height: 84px;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-inner {
  width: 1080px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-inner nav {
  height: 34px;
}

.footer-inner a {
  color: #fff;
  font-size: 28px;
}

.footer-menu {
  width: 500px;
  display: flex;
  justify-content: space-between;
}

.footer-menu li {
  margin: 0;
  display: flex;
  align-items: center;
  transition: 0.5s;
}

.footer-inner p {
  color: #fff;
}

.footer-menu li:hover {
  transform: translatey(-8px);
  transition: 0.5s;
}

.footer-name {
  display: none;
}

/* スマホレイアウト */
@media screen and (max-width: 768px) {
  /* 800pxまでの幅の場合に適応される */
  body {
    background-color: #ffffff;
  }

  article {
    margin-top: 10px;
  }

  .container {
    width: 361px;
    height: 602px;
    margin-top: 100px;
    margin-left: -2px;
    margin-right: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .sidebar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background-color: #333333;
  }

  .side-menu {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }

  .sidebar a {
    color: white;
    text-decoration: none;
    writing-mode: horizontal-tb;
    font-size: 16px;
    width: auto;
    height: 100%;
    padding: 0;
    margin: 0;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
  }

  .side-menu a:hover {
    background-color: #e0e0e0;
    transition: 0.5s;
    border-radius: 0;
  }

  .main-img {
    position: absolute;
    z-index: -10;
    opacity: 0.5;
  }

  .main-img img {
    width: 100%;
    height: 100%;
  }

  .prof-img {
    opacity: 0.5;
  }

  .back-text {
    display: none;
  }
  .work-box {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .works-left,
  .works-right {
    margin: 20px 0;
  }

  .work-box img,
  .works-right-inner,
  .works-right-inner2 {
    width: 100%;
  }

  h3 {
    width: 100%;
    font-size: 10vw;
  }

  .works-left {
    margin-bottom: 100px;
  }

  .prof-box {
    margin: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .prof-text {
    margin: 10%;
    width: 290px;
  }

  .contact-img img,
  .contact-img p {
    display: none;
  }

  .contact-text a {
    text-align: center;
    margin: 3em auto 0;
  }

  .contact-box {
    margin: 10% 0 -10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .contact-text {
    text-align: center;
  }

  .footer-box {
    height: 160px;
  }

  .footer-inner {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* 最上部 */
  .header-top {
    display: none;
  }

  .footer-menu {
    width: 380px;
  }

  .footer-menu a {
    display: none;
  }

  .footer-name {
    text-align: center;
    font-size: 20px;
    margin: 0;
  }
}