body {
  font-family: "Montserrat","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size: 15px;
  letter-spacing: .05em;
  color: #6b5f52;
}

a {
  transition: opacity .3s;
  text-decoration: none;
  color: #1ca9e3;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border-style: none;
}



.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

/*--------------------------------
 レイアウト
---------------------------------*/
.wrapper {
  padding-top: 0;
}

.section {
  padding: 90px 0;
}
/* 奇数のセッションの背景色変更 */
.section:nth-of-type(odd) {
  background-color: #6b5f52;
}
/* 奇数のセッションの文字色変更 */
.section:nth-of-type(odd) p,
.section:nth-of-type(odd) h2,
.section:nth-of-type(odd) h3 {
  color: #fff;
}
.container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 40px;
}

/*--------------------------------
 見出し
---------------------------------*/
.title {
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 40px;
  text-align: center;
  letter-spacing: .05em;
  color: #6b5f52;
}

.lead {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
}

/*--------------------------------
ヘッダー
---------------------------------*/
.header {
  position: fixed;   /* （viewport）を基準に固定(スクロールしても動かない）*/
  top: 20px;         /* 上から20pxに配置 */
  left: 0;
  width: 100%;       /* 猫とナビを左右に配置したいから、親を100%にする */
  z-index: 1000;     /* 手前に配置 */
  background: transparent;  /* 背景透明 */
  box-shadow: none;   /* 影がついてしまうことがある為、影なしで */
}
/* 猫とナビの位置調整 */
.header .container {
  display: flex;   /* 猫とナビ横並び */
  align-items: center;  /* 縦方向中央揃に */
  justify-content: space-between;  /* 猫とナビ両端配置 */
  padding: 20px 40px;  /* 猫とナビ,左右上下位置調整 */
}

/* ホームアイコンとその中の猫一括*/
.header-brand {
  display: inline-flex;  /* 中身のサイズ分だけの幅で横並び */
  align-items: center;  /* 猫と文字を真ん中 */
  gap: 10px;     /* 猫とホームの間の隙間 */
  padding: 6px 18px 6px 6px;  /* ホームの文字側の左を多めに */
  background: rgba(107, 95, 82, 0.85); /* 茶色の背景 */
  border-radius: 999px;  /* カプセル型*/
  backdrop-filter: blur(6px);  /* 後ろにある背景をぼかす */
  -webkit-backdrop-filter: blur(6px);  /* Safari用の保険 */
  text-decoration: none;
  transition: all 0.3s ease;
}



/* 猫アイコンの外枠の円*/
.brand-icon {
  width: 64px;     /* 円のサイズ*/
  height: 64px;    /* 円のサイズ*/
  border-radius: 50%;   /* 四角→円*/
  background: #ffffff;  /*背景*/
  backdrop-filter: blur(6px);   /*ぼかし*/
  display: flex;   /* 猫をまるの真ん中 */
  align-items: center;   /* 猫をまるの真ん中 */
  justify-content: center;  /* 猫をまるの真ん中 */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
/* 猫ロゴ大きさ */
.brand-icon img {
  width: 34px;
  height: auto;
  object-fit: contain;  /* 全部見えるように収まる*/
}

/* HOMEアイコン文字 */
.brand-text {
  font-size: 14px;   
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #ffffff;
}
/* 左アイコンhover時 */
.header-brand:hover {
  background: rgba(107, 95, 82, 1);
}

.header-brand:hover .brand-text {
  opacity: 0.85;
}
/* なめらかにするための準備 ３つの変化までの時間0.3秒*/
.brand-icon {
  transition:
    transform 0.3s ease,   /* 移動 */
    box-shadow 0.3s ease,  /* 影の変化 */
    background-color 0.3s ease;  /* 背景色の変化 */
}
/* ホバー時（猫アイコン） */
.header-logo a:hover .brand-icon {
  transform: translateY(-2px);     /*猫アイコンを2px上に動かす */
  background: rgba(255,255,255,0.9);   /*背景色の変化(明るくなる) */
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);   /*影の変化 */
}
/* 右のナビ */
.nav-pill {
  display: flex;  /*（文字ナビ ＋ CONTACT）を横並びに*/
  align-items: center;  /*中央揃*/
  gap: 20px;
  background: rgba(255, 255, 255, 0.45); /* 半透明 */
  backdrop-filter: blur(14px);   /* Chromeぼかし */
  -webkit-backdrop-filter: blur(14px);  /* safariぼかし */
  padding: 12px 20px;
  border-radius: 999px;  /* カプセル型*/
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* なめらかにするための準備 ３つの変化までの時間0.25秒*/
  transition:   
  transform 0.25s ease,    /* 移動 */
  box-shadow 0.25s ease,   /* 影の変化 */
  background-color 0.25s ease;   /* 背景色の変化 */
}
/* 右ナビホバー時 */
.nav-pill:hover {
  transform: translateY(-3px);   /*ナビを2px上に動かす */
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);  /*影の変化 */
}
.nav-pill-list {
  display: flex;  /* PROFILE / SKILL / WORKS を横並び */
  gap: 24px;
  list-style: none;
}
 /* PROFILE / SKILL / WORKS /の文字設定 */
.nav-pill-list a {
  font-size: 13px;
  font-weight: 500;
  color: #6b635b;
  position: relative;
  /* なめらかにするための準備変化までの時間0.2秒*/
  transition: 
  color 0.2s ease,  /* 文字色 */
  transform 0.2s ease;   /* 移動 */
}
/* ナビ文字ホバー時 */
.nav-pill-list a:hover {
  color: #2f2a25;
  transform: translateY(-1px);
}
/*contactの文字設定と楕円 */
.nav-pill-contact {
  background: #6b5f52;
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
}
/* contactホバー時 */
.nav-pill-contact:hover {
  background-color: #2f2a25; /* 少し濃く */
}

/* スクロールしたら見た目を変える*/
.header.is-scrolled .nav-pill {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
/*--------------------------------
 メインビジュアル
---------------------------------*/

.mv {
  position: relative;  /* 基準 */
  width: 100%;
  height: 100svh;
  display: flex;    /* 横並にはしないがコンテンツを真ん中に持ってくる為 */
  align-items: center;  /*文字を中央*/
  justify-content: center;  /*名刺を中央*/
  overflow: hidden;   /*はみ出した装飾を見せない為*/
}

/* 一番下の背景写真 */
.mv-bg {
  position: absolute;
  inset: 0;     /* 上下左右すべて0指定 */
  z-index: 0;    /*一番下のレイヤー  */
  background-image: url("../img/main.png");  /*背景画像*/
  background-size: cover;     /*余白が出ない*/
  background-position: center;   /*画面サイズ変わっても真ん中表示するように*/
}
.mv-inner-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ガラスカード名刺（背景の一つ上のレイヤー） */
.mv-inner {
  position: relative;  /*zindexの為に必要*/
  z-index: 2;  /*下から3番目(一番上)のレイヤー  */
  background: rgba(255, 255, 255, 0.78);   /*少し透明の白*/
  padding: 32px 20px;
  border-radius: 16px;  /*角丸*/
  backdrop-filter: blur(4px);   /*背景ぼかし*/
  -webkit-backdrop-filter: blur(4px);  /*背景ぼかし（Safari対策）*/
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  text-align: center;
}

/* 猫ロゴHANAHAPPY位置サイズ調整 */
.mv-logo {
  display: block;  /*margin auto効かせる為にブロック要素にする*/
  max-width: 480px;   /*広がりすぎないようにmax480px*/
  width: 100%;    /*親要素（mv-content）の幅いっぱいに合わせて縮み、max-width:480pxで上限を制御*/
  height: auto;   /*写真の比率を崩さない為*/
  margin: 36px auto 0;  /*上　右左　下*/
}

/* 行動コピー用帯（ベージュ）のデザイン */
.mv-catch-area {
  position: relative;    /*中の装飾や擬似要素を配置するための基準（今は使っていない）*/
  width: 100%;         /*親要素（mv-inner）の幅いっぱいに合わせて縮み、max-width:720pxで上限を制御*/
  max-width: 720px;   /*広がりすぎないようにmax720px*/
  height: 64px;
  margin: 0 auto 40px;   /*中央寄せ*/
  /*透明グラデーション*/
  background: linear-gradient(
    to bottom,
    rgba(190, 176, 163, 0.9),
    rgba(175, 160, 145, 0.9)
  );
  border-radius: 8px;  /*角丸*/
  display: flex;       /*テキスト＆ベージュの帯を中央にする為にflexにする*/
  align-items: center;  /*テキスト中央*/
  justify-content: center;   /*ベージュの帯中央*/
}
/* 「使う人を考えた、、」の文字 */
.mv-catch {
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0.15em;
  margin: 0;
  line-height: 1;   /*行の高さは「１」×18px：ベージュ帯の真ん中配置する為*/
  padding: 10px 24px;
}

/* 「想いを汲み取り」サイズ&文字調整*/
.catch-copy {
  font-size: 18px;
  font-weight: 500;
  color: #6b5f52;      /* ロゴと同系色 */
  letter-spacing: 0.1em;
  margin-top: 50px;
  opacity: 0;     /* 透明待機（最初は表示しない）後々１になる */
  transform: translateY(12px);     /*ゆっくり出る準備：12px下にある状態から0pxの位置に移動*/
  animation: fadeUp 1s ease-out forwards;    /*fadeUp:名前 1s:時間 ease-out:動き方（最初早く最後遅く） forwards:最終状態（アニメーション後の状態を保持する）*/
  animation-delay: 0.6s;       /* 0.6秒後にアニメーション開始 */
}
/* 「想いを汲み取り」アニメーション */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 左下のクローバーClover */
.section {
  position: relative; /* worksのsection基準 */
}
/* クローバー左右共通 */
.clover-art {
  position: absolute;  /* 3つのクローバーをabsolute化 */
  z-index: 1;     /* 背景の上 */
  bottom: -120px;   /* worksのsection基準としてクローバーを120px分セクションの外側にずらし、一部だけ見えるように配置しています。 */
}
/* 左下*/
.clover-left {
  left: -120px;
}
/* 右上（左のミラー）*/
.clover-right {
  right: -120px;
}
/* 真ん中 */
.clover-center {
  left: 50%;
  transform: translateX(-50%);
  bottom: -200px;   /* ← 左右より下にする */
}
.clover {
  width: 600px;  /* 左右サイズ */
  opacity: 0.48;  /* 薄く */
}
/* 真ん中 */
.clover-small {
  width: 360px;     /* 左右より小さく */
  opacity: 0.30;    /* さらに薄く */
}
/* 左右反転 */
.clover-mirror {
   transform: scaleX(-1) rotate(180deg);  /*左右反転　180度回転*/
}

/* 左下 */
.clover-left .clover {
  animation: clover-fuwafuwa 6s ease-in-out infinite;   /*1回の動きにかかる時間６秒　ease-in-out:ゆっくり→滑らか→ゆっくり　infinite:永遠にくりかえす*/
}
/* 右下：逆揺れ */
.clover-right .clover {
  animation: clover-fuwafuwa-reverse 6s ease-in-out infinite;
}
/* 左右よりゆっくり */
.clover-center .clover {
  animation: clover-fuwafuwa 8s ease-in-out infinite;  
}
/* ゆっくり表示 */
.clover-fade {
  opacity: 0;   /*最初は透明*/
  transform: translateY(20px);   /*最初は少し下にいる*/
  animation: clover-fadeup 1.8s ease-out forwards;  /*1.8秒後から最初早く最後遅く最終状態保持*/
  animation-delay: 0.6s;           /*アニメーションを「0.6秒待ってから」始める*/
}

@keyframes clover-fuwafuwa {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(-8px) rotate(-2deg); }
  50%  { transform: translateX(0) rotate(0deg); }
  75%  { transform: translateX(8px) rotate(2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes clover-fuwafuwa-reverse {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(8px) rotate(2deg); }
  50%  { transform: translateX(0) rotate(0deg); }
  75%  { transform: translateX(-8px) rotate(-2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes clover-fadeup {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}





/*--------------------------------
 Works
---------------------------------*/
.works-list {
  display: grid;    /* この中の子要素を表として並べる */
  grid-template-columns: repeat(3, 1fr);  /*３=列　1fr=残り幅を当分する単位*/
  gap: 24px;   /*縦横余白24px*/
}

.works-item {
  color: #6b5f52;
}

.works-img {
  position: relative;    /* 画像を基準にする（文字配置の為） */
  aspect-ratio: 1/1;
  overflow: hidden;  /* はみ出しを隠す */
}
.works-item:hover {
  opacity: .9;
}
.works-overlay {
  position: absolute;
  inset: 0;  /* 全て0 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}
/* overlay 内だけ調整 */
.works-overlay .works-name {
  align-self: flex-start;
  padding: 5px 16px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(95,80,65,0.52) 20%,
    rgba(95,80,65,0.52) 80%,
    rgba(0,0,0,0) 100%
  );
  color: #fff;
  font-size: 14px;
  margin-top: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.works-overlay .works-info {
  align-self: flex-start;  /* 左寄せ */
  padding: 6px 18px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    rgba(95, 80, 65, 0.65) 20%,
    rgba(95, 80, 65, 0.65) 80%,
    rgba(0,0,0,0) 100%
  );
  color: #fff;
  font-size: 11px;
  opacity: 0.9;
  margin-top: 4px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
/*影を少し濃く*/
.works-overlay .works-name,
.works-overlay .works-info {
  text-shadow:
    0 1px 3px rgba(0,0,0,0.6),
    0 3px 10px rgba(0,0,0,0.35);
}

.works-img img {
  width: 100%;
  height: 100%;
  object-fit:cover;
}

.works-name {
  font-size: 12px;
  font-weight: bold;
  margin-top: 8px;
}

.works-info {
  font-size: 10px;
  margin-top: 5px;
}

/*--------------------------------
 Skill
---------------------------------*/
.skill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: -50px;
}

.skill-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 48%;
  margin-bottom: 50px;
}

.skill-img {
  width: 60px;
  height: auto;
  margin-right: 20px;
}

.skill-body {
  flex: 1;
}

.skill-name {
  margin-bottom: 10px;
}

.skill-text {
  font-size: 14px;
  line-height: 1.8;
}

/*--------------------------------
 About
---------------------------------*/
.profile {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
  margin: 0 auto;
}
.profile-img {
  width: 20%;
  margin-right: 30px;
  border-radius: 50%;
}
.profile-img img {
  border-radius: 50%;
}
.profile-body {
  flex: 1;
}

.profile-body p {
  font-size: 15px;
  line-height: 1.8;
}

.profile-body p:not(:last-child) {
  margin-bottom: 30px;
}

/*--------------------------------
 Contact
---------------------------------*/
.contact {
  text-align: center;
}

.contact-item:not(:last-child) {
  margin-right: 10px;
}

.contact-text {
  margin-top: 10px;
}

/*--------------------------------
 ページトップ
---------------------------------*/
.page-top {
  font-weight: bold;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  background-color: #b9ab9f;
}

.page-top .material-icons-outlined {
  vertical-align: bottom;
  color: #fff;
}

/*--------------------------------
 フッター
---------------------------------*/
.footer {
  padding: 30px;
  background-color: #6b5f52;
}

.copyright {
  font-size: 10px;
  text-align: center;
  color: #fff;
}

/*--------------------------------
 下層：Worksページ
---------------------------------*/
.article {
  padding: 80px 0;
}

.article-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.article-title {
  margin-bottom: 30px;
  text-align: center;
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
  margin-bottom: 80px;
}

.article-body h3 {
  position: relative;
  font-size: 18px;
  margin-bottom: 5px;
  padding-left: 1em;
}

.article-body img {
  width: 100%;
  height: auto;
}

.article-body h3:not(:first-child) {
  margin-top: 50px;
}

.article-body h3::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  content: "";
  border-radius: 3px;
  background-color: #333;
}

.article-body p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.home-link {
  text-align: center;
}

/*media Queries 767
----------------------------------------------------*/
@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }

  /* 見出し */
  .title {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .lead {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
  }

  /* レイアウト */

  .section {
    padding: 60px 0;
  }

  .container {
    padding: 0 20px;
  }

  /* ヘッダー */
  .header .container {
    padding: 15px;
  }

  .header-logo {
    font-size: 15px;
    margin-right: 15px;
  }

  .gnav-item:not(:last-child) {
    margin-right: 10px;
  }

  .gnav-item a {
    font-size: 10px;
  }

  .gnav-item a:after {
    display: none;
  }

  /* メインビジュアルファーストビューサイズ */
  .mv {
    height: auto;
    min-height: 100svh;  /* ← 最低でも1画面分は確保 */
    padding: 110px 0 70px; 
  }

  .mv-container {
    padding: 0 20px;
  }

  .mv-title {
    font-size: 30px;
  }
  .mv-subtitle {
    font-size: 16px;
    margin-bottom: 20px;
  }
  /* 名刺カード少し小さく */
  .mv-inner {
    padding: 24px 16px;
  }
 /* キャッチ帯 */
  .mv-catch-area {
    margin-bottom: 24;
    height: 52px;
    border-radius: 6px;
  }
  .mv-catch {
    font-size: 16px;
    letter-spacing: 0.1em;
  }
  .catch-copy {
    margin-top: 28px;
    font-size: 16px; /* 少しだけ締め */
  }
  .mv-text {
    top: 75%;
    font-size: 14px;
    line-height: 1.7;
  }
  /* 中央ロゴサイズ */
  .mv-logo {
  max-width: 300px; 
  }

  /* Works */
  .works-name {
    font-size: 12px;
  }

  .works-info {
    margin-top: 3px;
  }

  .works-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }


  /* Skill */
  .skill-list {
    display: block;
    margin-bottom: 0;
  }

  .skill-item {
    width: 100%;
    margin-bottom: 35px;
  }

  .skill-item:last-child {
    margin-bottom: 0;
  }

  .skill-name {
    margin-bottom: 5px;
  }

  .skill-text {
    font-size: 13px;
    line-height: 1.7;
  }

  /* About */
  .profile {
    display: block;
  }
  .profile-img {
    width: 150px;
    margin: 0 auto;
    margin-bottom: 25px;
  }

  .profile-body p {
    font-size: 14px;
    line-height: 1.7;
  }

  .profile-body p:not(:last-child) {
    margin-bottom: 20px;
  }

  /* フッター */
  .footer {
    padding: 20px;
  }

  /* 下層ページ */
  .article {
    padding: 50px 0;
  }

  .article-body h3 {
    font-size: 16px;
    padding-left: .8em;
  }

  .article-body h3:not(:first-child) {
    margin-top: 30px;
  }

  .article-body p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
  }
}

/* メインビジュアル:1770px以上の場合はクローバー拡大 */
@media screen and (min-width: 1770px) {
.clover {
  width: 780px;
}

.clover-small {
  width: 468px;
}

}
/* 600px以下の場合 */
@media (max-width: 600px) {
/* works:写真1フレームにする */  
  .works-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* 猫とナビの位置上下にする */
.header .container {
  flex-wrap: wrap;
}
  .header-logo {
    width: 100%;
    margin-bottom: 10px;
  }
    .header-nav {
    width: 100%;
  }
}