@charset "utf-8";

/* -----------------------
   初期設定
----------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 1em; /* 16px 相当 */
}

body {
  background-color: #fff;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
p {
  margin: 0;
} 

/* -----------------------
   共通スタイル
----------------------- */

section {
  padding: 6.25em 0; /* 100px */
}

.wrapper {
  width: 100%;
  max-width: 75em; /* 1200px */
  margin: 0 auto; 
  padding: 0 1.25em;   /* 20px */
  box-sizing: border-box;
}

.title-box {
  margin-bottom: 3.125em; /* 50px */
}

.section-title {
  color: #707070;
  font-size: 5em; /* 5rem → 5em */
  text-align: left;
  font-weight: bold;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

/* もし線を復活させたいならコメント外してね */
/*
.section-title::after {
  content: "";
  display: block;
  width: 1.875em; 
  height: 0.125em; 
  background-color: #707070; 
  margin: 0.2em auto 0;
  border-radius: 3.125em; 
}
*/

/* サブタイトル用（下の小さい文字） */
.title-bottom {
  text-align: left;
  font-size: 0.9em;
  color: #666;
  margin-top: 0.5em;
}

/* 共有ボタン */

.btn {
  width: 25em; /* 400px */
  color: #707070;
  letter-spacing: 0.5em;
  display: inline-block;
  background-color: #1B2833;
  margin: 10em 0;
  padding: 1.875em 1.875em; /* 30px */
  border-radius: 3.125em;   /* 50px */
  transition: all 0.3s ease;
}

.btn a {
  text-decoration: none;
  font-size: 1.2em;
  color: #ffffff;
  font-weight: bold;
}

.btn:hover {
  background-color: #d8cbbc;
}

.btn:hover a {
  color: #fff;
}

/* -----------------------
   グローバルメニュー
----------------------- */

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site_globalmenu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.25em 1.25em; /* 20px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,51%);
  backdrop-filter: blur(5px); /* ぼかしの効果、オシャレ */
  z-index: 100;
  transition: all 0.3s ease;
}


.site_logo {
  display: flex;
  align-items: center;
}

.site_logo img {
  height: 1.875em; /* 30px */
}

.site_logo p {
  margin-left: 0.625em; /* 10px */
  font-size: 0.875em;   /* 14px */
  color: #333;
}

/* -----------------------
   ナビゲーション（PC）
----------------------- */

.global_nav {
  padding: 0 3em; /* 50px */
}


.global_nav.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: #fff; /* 必要なら */
}

.global_nav ul {
  display: flex;
  list-style: none;
  gap: 4em; /* 70px */
}

.global_nav li {
  margin-left: 1.25em; /* 20px */
}

.global_nav a {
  text-decoration: none;
  color: #707070;
  font-weight: bold;
  transition: 0.3s;
}

.global_nav a:hover {
  color: #666;
}

/* -----------------------
   ハンバーガーボタン
----------------------- */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 0.3125em;  /* 5px */
  width: 1.5625em; /* 25px */
  height: auto;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 0.1875em; /* 3px */
  width: 100%;
  background: #333;
  border-radius: 0.1875em;
}

/* -----------------------
   メインビジュアル全体
----------------------- */

.main_visual {
  position: relative;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

.mein_box img {
  width: 100%;
  height: auto;
  display: block;
}

/* 見出し */
.main_visual h2 {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 1em;
  letter-spacing: 0.05em;
  text-shadow: 0 0.125em 0.375em rgba(0, 0, 0, 0.3); /* 0 2px 6px */
}

/* サブテキスト */
.main_visual p {
  font-size: 1.2em;
  margin: 0.5em 0;
  letter-spacing: 0.05em;
}

/* 名前の部分だけちょっと目立たせる */
.main_visual p:last-child {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 1.5em;
}

/* -----------------------
   works
----------------------- */

.works {
  background-color: #fff;
  text-align: center;
}

.work-blok {
  max-width: 75em; /* 1200px */
  margin: 0 auto;
  text-align: center;
}

/* 画像リスト全体 */
.work_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  gap: 0;
  margin: 0 auto;
  max-width: 75em; /* 1200px */
}

/* 各アイテム */
.work-item {
  flex: 0 0 25%;
  max-width: 25%;
  position: relative;
}

.work-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* 画像部分 */
.work-img {
  position: relative;
  overflow: hidden;
}

.work-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
  transition: transform 0.5s ease;
}

/* テキストオーバーレイ */
.work-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 0.9375em 0.625em; /* 15px 10px */
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ホバーで文字を出す */
.work-img:hover .work-text {
  opacity: 1;
}

/* タイトル文字 */
.work-text h3 {
  font-size: 1em;
  margin-bottom: 0.3125em; /* 5px */
}

.work-text p {
  font-size: 0.8em;
  margin: 0;
}

.work-item:nth-child(n+7) {
  display: none;
}

/* -----------------------
   skills
----------------------- */

.skills {
  background-color: #fafafa;
  text-align: center;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.875em; /* 30px */
  margin-bottom: 1.875em;
  margin: 0 auto;
  max-width: 62.5em; /* 1000px */
}

.skill_item {
  background: #fff;
  border-radius: 0.75em; /* 12px */
  padding: 1.25em;       /* 20px */
  width: 13.75em;        /* 220px */
  text-align: center;
  transition: transform 0.3s ease;
}

.skill_item:hover {
  transform: translateY(-0.3125em); /* 5px */
}

.skill_item img {
  width: 8.4375em; /* 135px */
  height: auto;
}

.skill-text h3 {
  font-size: 1.125em; /* 18px */
}

.skill_time {
  font-size: 0.875em; /* 14px */
  color: #888;
  margin: auto;
  margin-bottom: 0.5em; /* 8px */
  background-color: #e9e9e9;
  padding: 0.3em;
  width: 50%;
}

.skill-text p:last-child {
  font-size: 0.875em; /* 14px */
  color: #555;
}

/* -----------------------
   プロフィール
----------------------- */

.profile {
  padding: 6.25em 0; /* 100px */
}

.profile_inner {
  display: flex;
  align-items: flex-start;
  max-width: 56.25em; /* 900px */
  margin: 0 auto;
  gap: 3.75em;        /* 60px */
  flex-wrap: wrap;
}

.profile_img img {
  width: 18.75em; /* 300px */
  height: auto;
  padding: 1.25em; /* 20px */
  object-fit: cover;
}

.profile_text {
  flex: 1;
}

.profile_name p {
  font-size: 2.5em; /* 40px */
  font-weight: bold;
  color: #333;
  margin: 0.5em 0;
  letter-spacing: 0.3em;
}

rt {
  font-size: 0.4em;  /* 13px */
  margin-bottom: 0.9em; /* 15px */
}

.career {
  list-style: none;
  padding: 0;
  margin-bottom: 1.25em; /* 20px */
}

.career li {
  font-size: 1em;      /* 16px */
  color: #555;
  margin-bottom: 0.6em; /* 10px */
  position: relative;
  padding-left: 1.25em;   /* 20px */
}

.career li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #c4a77d;
  font-weight: bold;
}

.intro {
  font-size: 0.9em; /* 14px */
  line-height: 1em;
  color: #444;
  white-space: pre-line;
}

/* -----------------------
   コンタクト
----------------------- */

.contact {
  background-color: #fafafa;
  text-align: center;
  padding-bottom: 5em;
}

.contact-form {
  max-width: 37em; /* 600px */
  margin: 0 auto;
  text-align: left;
  padding-top: 5em;
}

.contact-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.4em; /* 5px */
  color: #555;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.7em 0.9em; /* 12px 15px */
  margin-bottom: 1.25em;    /* 20px */
  border: 1px solid #d9cfc3; /* 1px */
  border-radius: 0.3em;   /* 6px */
  font-size: 0.8em;       /* 14px */
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
}

.contact-form textarea {
  min-height: 7.5em; /* 120px */
}

.contact-form .btn {
  display: block;
  margin: 0 auto;
  margin-top: 5em;
  padding: 1.875em 1.875em; /* 30px */
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 3.5em;     /* 56px */
  font-size: 1em;           /* 16px */
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
}

.contact-form .btn:hover {
  background-color: #555;
}

/* -----------------------
   フッダー
----------------------- */

.footer {
  background-color: #efeae4;
  padding: 4.375em 1.25em; /* 70px 20px */
  text-align: center;
  color: #555;
  font-size: 0.875em;      /* 14px */
}

.footer_logo img {
  height: 2.8125em; /* 45px */
}

.footer .footer_logo h3 {
  font-size: 1.875em; /* 30px */
  font-weight: bold;
  color: #333;
}

.footer .footer_logo {
  text-align: center;
  margin-top: 1.875em;  /* 30px */
  margin-bottom: 3.125em; /* 50px */
}

.footer .footer_logo p {
  font-size: 0.75em; /* 12px */
  color: #888;
}

.sns {
  margin-top: 1.25em; /* 20px */
}

.footer .footer_nav ul,
.footer .sns ul {
  list-style: none;
  padding: 0;
  margin: 0.625em 0; /* 10px */
  display: flex;
  justify-content: center;
  gap: 4.375em; /* 70px */
}

.footer .footer_nav a,
.footer .sns a {
  text-decoration: none;
  color: #555;
  transition: color 0.3s ease;
}

.footer .footer_nav a:hover,
.footer .sns a:hover {
  color: #c4a77d;
}

.copyright {
  display: block;
  padding: 0.625em 0; /* 10px */
  text-align: center;
  justify-content: center;
  background-color: #e0d7cd;
  color: #707070;
  font-size: 0.625em; /* 10px */
}

/* -----------------------
   スマホ表示
----------------------- */

@media screen and (max-width: 64.0625em) { /* 1025px */
  .site_logo {
    flex-direction: column;
    align-items: center;
    letter-spacing: 0.1em;
  }

  .site_logo img {
    height: 1.5625em; /* 25px */
  }
}

@media screen and (max-width: 56.25em) { /* 900px */

}

@media screen and (max-width: 48em) { /* 768px */
  .site_logo {
    flex-direction: column;
    align-items: center;
  }

  .site_logo img {
    height: 1.5625em; /* 25px */
  }

  .site_logo p {
    font-size: 0.5em;
    color: #333;
  }

  .global_nav ul {
    margin: 0;
  }

  .global_nav li {
    margin: 0.625em 0; /* 10px */
  }

  /* ハンバーガー表示設定 */
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 0.3125em; /* 5px */
    position: relative;
    z-index: 1001;
  }

  .hamburger span {
    display: block;
    height: 0.1875em; /* 3px */
    width: 1.5625em;  /* 25px */
    background: #333;
    border-radius: 0.1875em;
    transition: 0.3s;
  }

  /* ハンバーガー開閉アニメーション */
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(0.25em, 0.3125em);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(0.3125em, -0.3125em);
  }

  /* グローバルナビ（非表示状態） */
  .global_nav {
    display: none;
    position: absolute;
    top: 4.375em;      /* 70px */
    left: 0;
    width: 100%;
    background: #fff;
    text-align: center;
    padding: 2.5em 0; /* 40px */
    z-index: 1000;
    border-top: 0.0625em solid #ddd; /* 1px */
  }

  /* ハンバーガークリックで表示 */
  .global_nav.active {
    display: block;
    animation: fadeIn 0.3s ease;
  }

  .global_nav ul {
    display: flex;
    flex-direction: column;
    gap: 1.5625em; /* 25px */
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .global_nav a {
    text-decoration: none;
    color: #333;
    font-size: 1.125em; /* 18px */
    font-weight: bold;
  }

  .global_nav a:hover {
    color: #c4a77d;
  }

  .main_visual {
    height: 60vh;
    padding: 0.625em; /* 10px */
  }
  .main_visual h2 {
    font-size: 1.8em;
  }
  .main_visual p {
    font-size: 1em;
  }

  /* フェードイン演出 */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-0.625em); /* 10px */
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* -----------------------
     works
  ----------------------- */

  .work_list {
    justify-content: center;
    padding-right: 0;
  }
  .work-item {
    flex: 0 1 50%;
  }

  /* -----------------------
     skills
  ----------------------- */
  .skill-list {
    flex-direction: column;
    align-items: center;
  }

  .skill_item {
    width: 80%;
  }

  /* -----------------------
     profile
  ----------------------- */

  .profile_img img {
    width: 21.875em; /* 350px */
    height: auto;
  }

  .profile_name p {
    font-size: 2.1875em; /* 35px */
    text-align: center;
    letter-spacing: 0.15em;
  }

  .footer .global_nav ul,
  .footer .sns ul {
    flex-direction: column;
    gap: 0.625em; /* 10px */
  }

  .profile_inner {
    flex-direction: column;
    align-items: center;
    gap: 1.875em; /* 30px */
  }

  .profile_text {
    text-align: center;
  }

  rt {
    font-size: 0.75em; /* 12px */
  }

  ruby {
    font-size: 1.25em; /* 20px */
  }

  .career li {
    font-size: 0.875em;   /* 14px */
    padding-left: 0.9375em; /* 15px */
    text-align: left;
  }

  .intro {
    font-size: 0.8125em; /* 13px */
    line-height: 1.6;
    text-align: left;
  }

  /* -----------------------
     footer
  ----------------------- */

  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5em 1.25em; /* 40px 20px */
    color: #fff;
  }

  .footer_logo {
    margin-bottom: 0.625em; /* 10px */
  }

  .footer_logo img {
    width: 8.75em; /* 140px */
    height: auto;
  }

  .footer_logo p {
    font-size: 0.875em; /* 14px */
    margin-top: 0.5em;
    letter-spacing: 0.05em;
  }

  .footer_nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.75em; /* 12px */
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .footer_nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1em; /* 16px */
    letter-spacing: 0.1em;
    transition: opacity 0.3s;
  }

  .footer_nav a:hover {
    opacity: 0.7;
  }
}

/* スマホ縦（1列） */
@media (max-width: 30em) { /* 480px */
  .work-item {
    flex: 0 1 100%;
  }
}

@media screen and (max-width: 23.4375em) { /* 375px */
  .footer_nav ul {
    gap: 1.375em; /* 22px */
  }
}