@charset "utf-8";

/* ==========トップページ========== */

/*ヘッダー設定*/
header {
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/*webp対応*/
.webp header {
  background-image: url(../img/main_pc.webp);
}

/*webp非対応*/
.no-webp header {
  background-image: url(../img/main_pc.png);
}

header .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

header h1 {
  font-family: "Edu AU VIC WA NT Arrows", cursive;
  color: #3d3d3d;
  padding: 1rem 0;
  font-size: clamp(3rem, -2.348rem + 14.29vw, 4.5rem);
  text-align: left;
  letter-spacing: 0.2rem;
}

.main_text span {
  display: block;
  text-align: left;
}

header .site-header-nav {
  padding: 7rem 3rem;
}

.site-header-nav li {
  width: 100%;
  margin-right: 45%;
  color: #3d3d3d;
  margin-top: 2rem;
  text-align: left;
}

header li a {
  color: #3d3d3d;
  font-weight: 700;
  font-size: 1.5rem;
}

header li a:hover {
  opacity: 0.5;
}

/*メインビジュアル*/
main {
  margin-top: 0;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＝＝＝＝＝＝＝ABOUT ME＝＝＝＝＝＝*/

#about {
  margin-bottom: 0;
}

.text .content-title {
  font-size: clamp(1.5rem, -3.135rem + 12.38vw, 2.8rem);
  color: #3d3d3d;
  font-family: "Yomogi", cursive;
  font-optical-sizing: auto;
  font-style: normal;
}

#about .content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 名前 */
#about .about_name {
  display: flex;
  justify-content: center;
  height: auto;
  gap: 2rem;
}

/* イラスト */
#about .profile_img {
  width: 5rem;
  height: auto;
  nav-right: 1rem;
  border-radius: 50%;
  box-shadow: 2px 2px 5px 0px #3d3d3d;
}

#about .content span {
  color: #578e7e;
}

#about .content p {
  margin-top: 1.5rem;
  line-height: 1.8;
  margin-left: auto;
  margin-right: auto;
}

#about .text {
  text-align: left;
}

#about .text .btn_link a {
  margin: 2rem 3rem 0 auto;
}

/* about ビューポートアニメーション */
.about_card {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(50px);
}
.about_list.in-view .about_card {
  opacity: 1;
  transform: translateY(0);
}
.about_list .about_card:last-child {
  transition-delay: 0.4s;
}

/* ウェブサイト */
.site {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.reverse {
  flex-direction: row-reverse;
}

#website {
  margin-bottom: 0;
}

#website h3 {
  font-size: 1.5rem;
  color: #578e7e;
}

#website ul li {
  margin: 2rem auto;
  margin-top: clamp(2.5rem, -8.642rem + 29.76vw, 5.625rem);
}

#website .site_title span {
  color: #578e7e;
}

#website .content-title {
  margin-bottom: 0;
}

.site_text {
  text-align: left;
  width: 40vw;
  margin: 1rem;
  margin-top: 0;
}

.site_list {
  margin-top: 1rem;
  line-height: 1.8;
}

/* モックアップ画像 */
.site_link {
  cursor: pointer;
  max-width: 350px;
  width: 100%;
}

.site_link img {
  box-shadow: 2px 2px 5px #3d3d3d;
  margin-right: 2rem;
  width: 300px;
  height: auto;
  height: auto;
  transition: transform 0.6s ease; /* ゆっくり変化させる */
}

/* 拡大 */
.site_link:hover img {
  transform: scale(1.1); /* 拡大 */
}

/* リンクボタン */
.web_link {
  margin-top: -2rem;
}

.btn_link a {
  margin-left: auto;
  margin-right: 12%;
  margin-top: 1rem;
}

.reverse_link a {
  margin-left: 12%;
}

.about_link {
  margin-top: -3rem;
}

.lp_link {
  margin-top: -6rem;
}

/* バナー */
#work-banner ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 2rem;
  column-gap: 1rem;
}

#work-banner ul li {
  margin: 0 auto;
}

#work-banner img {
  box-shadow: 1px 1px 8px #3d3d3d;
  transition: transform 0.6s ease; /* ゆっくり変化させる */
  width: 250px;
  height: auto;
}

/* 拡大 */
#work-banner img:hover {
  transform: scale(1.07); /* 拡大 */
}

#work-banner {
  margin-bottom: 0;
}

#work-banner h3 {
  color: #578e7e;
}

#work-banner .content-title {
  font-weight: normal;
}

.banner p {
  margin-top: 0.5rem;
}

/* バナー ビューポートアニメーション*/

/* .banner {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(50px);
}

.work-list.in-view .banner {
  opacity: 1;
  transform: translateY(0);
}

.work-list li:nth-of-type(2) .banner {
  transition-delay: 0.4s;
}

.work-list li:nth-of-type(3) .banner {
  transition-delay: 0.8s;
} */

/* スキル */
.skill_content {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.skill_content img {
  max-width: 4rem;
  height: auto;
  transition: transform 0.6s ease; /* ゆっくり変化させる */
}

.skill_content img:hover {
  transform: scale(1.1); /* 拡大 */
}

.skill_content .skill_icon,
.skill_content .skill_icon2 {
  width: 23%;
  margin: 0 auto;
  margin-top: 1rem;
}

.skill_content .skill_icon img,
.skill_content .skill_icon2 img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  margin: 1rem auto;
}
.skill_content .skill_icon p:first-child,
.skill_content .skill_icon2 p:first-child {
  font-size: 1.2rem;
  color: #578e7e;
}

.skill_content .skill_icon p:last-child,
.skill_content .skill_icon2 p:last-child {
  text-align: left;
  line-height: 1.8;
}

/* skill ビューポートアニメーション */
.skill_icon {
  transition: 0.6s;
  opacity: 0;
  transform: translateY(50px);
}
.skill_list.in-view .skill_icon {
  opacity: 1;
  transform: translateY(0);
}