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

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

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

/* ストアボタン */
.store-links { margin-top: 6px; }
.store-links a { display: inline-block; margin-right: 8px; }
.store-links img { height: 40px; }

.pc-only { display: block; }
.sp-only { display: none; }

/*--------------------------------
 レイアウト
---------------------------------*/
.wrapper { padding-top: 73px; }
.section { padding: 90px 0; }
.section:nth-of-type(odd) { background-color: #f7f7f7; }
.container { max-width: 1340px; margin: 0 auto; padding: 0 40px; }

/*--------------------------------
 見出し
---------------------------------*/
.title {
  font-size: 34px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 40px;
  text-align: center;
  letter-spacing: .05em;
  color: #333;
}
.lead { font-size: 16px; line-height: 1.8; margin-bottom: 30px; }

/*--------------------------------
 ヘッダー
---------------------------------*/
.header {
  position: fixed;
  top: 0;
  z-index: 100; /* gnavより下、ページより上 */
  width: 100%;
  background-color: #fff;
  box-shadow: 0 5px 10px -6px rgba(0,0,0,.1);
}
.header .container {
  position: relative; /* ← 配置基準を固定 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 16px;
}

.header-logo {
  font-size: 30px;
  font-weight: bold;
  line-height: 1.2;
  margin-right: 20px;
  letter-spacing: .05em;
}
.header-logo a { color: #333; }

/* --- ハンバーガー（フレックス配置に統一） --- */
.hamburger {
  position: relative;              /* z-indexを効かせる */
  margin-left: auto;               /* 右端へ */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;                     /* タップしやすい当たり判定 */
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 1002;
}
/* 旧span線は無効化（保険） */
.hamburger span { display: none !important; }

/* SVG を常時“黒”で描画（iOSでも確実に効かせる） */
.hamburger-svg {
  width: 28px;
  height: 22px;
  display: block;
  pointer-events: none;            /* クリックは親buttonへ */
}
.hamburger-svg rect {
  fill: #333 !important;
}

/* 右からスライドインする GNAV */
.gnav {
  position: fixed;
  top: 0;
  right: -260px; /* 初期は画面外 */
  height: 100dvh;
  width: 260px;
  background: #fff;
  box-shadow: -4px 0 8px rgba(0,0,0,0.1);
  transition: right 0.3s ease;
  padding: 80px 24px 24px; /* 上はヘッダー分＋余白 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 1001;

  /* 閉じている間は当たり判定を無効化（ハンバーガーに被らないように） */
  pointer-events: none;
}
.gnav.open {
  right: 0;
  pointer-events: auto;
}

.gnav-list {
  display: flex;
  flex-direction: column; /* 縦並び固定 */
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.gnav-item:not(:last-child) { margin-right: 0; }
.gnav-item a {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  padding: 5px 0;
  transition: .3s;
  letter-spacing: .05em;
  color: #333;
}
.gnav-item a:after { display: none; }

/*--------------------------------
 メインビジュアル
---------------------------------*/
.mv {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mv img {
  display: block;
  width: 100%;
  height: auto;
}
.mv-container { padding: 40px; }

.mv-title {
  font-size: 60px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 5px;
  letter-spacing: .1em;
}
.mv-subtitle {
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 40px;
  letter-spacing: .08em;
}
.mv-text { font-size: 16px; line-height: 1.8; }

/*--------------------------------
 Works
---------------------------------*/
.works-list { display: flex; flex-wrap: wrap; margin-bottom: -40px; }
.works-item {
  width: 31.74603%;
  margin-right: 1.58730%;
  margin-bottom: 40px;
  color: #333;
}
.works-item:hover { opacity: .9; }
.works-item:nth-of-type(3n) { margin-right: 0; }
.works-img img { border: 1px solid #e6e6e6; }

.works-name { font-size: 20px; font-weight: bold; margin-top: 8px; text-align: center;}
.works-name a { color: #333; text-decoration: none; display: inline-block; }
.works-name a:hover { text-decoration: underline; }

.works-info { font-size: 20px; margin-top: 5px; }
.store-btn { height: 40px; width: auto; }

.indent-list {
  padding-left: 1em; /* 既存の字下げ */
  margin-bottom: 1.8em; /* 一行分またはお好みの余白 */
}

.article-body img {
  width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-bottom: 1.8em; /* 段落の line-height(1.8) に揃えて“1行” */
}

/* App / Play ボタンを縦並び＆中央寄せ（必要な場合に使用） */
.store-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.store-links img {
  width: 160px;
  height: auto;
  display: block;
}

/* 詳細ページのボタン群（使用している場合） */
.works-store-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
}
.works-store-links img {
  width: 180px;
  height: auto;
  display: block;
}

.works-thumb-link img {
  width: 300px;  
  height: 300px; 
  object-fit: cover; /* はみ出した部分をトリミングして見栄えを統一 */
  display: block;
  margin: 0 auto;
}

.home-link { margin-top: 0; text-align: center; }
.home-link a {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  padding: 12px 24px;
  background-color: #333;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.home-link a:hover { background-color: #555; }

/*--------------------------------
 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; }
.contact-item { display: inline-block; margin-right: 10px; }
.contact-icon { height: 45px; width: auto; }

/*--------------------------------
 ページトップ
---------------------------------*/
.page-top {
  font-weight: bold;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  background-color: #4c4c4c;
}
.page-top .material-icons-outlined { vertical-align: bottom; color: #fff; }

/*--------------------------------
 フッター
---------------------------------*/
.footer { padding: 30px; background-color: #333; }
.copyright { font-size: 10px; text-align: center; color: #797979; }

/*--------------------------------
 下層：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 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; }

/*--------------------------------
 Media Queries
---------------------------------*/
@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; }

  .wrapper { padding-top: 57px; }
  .section { padding: 60px 0; }
  .container { padding: 0 20px; }

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

  .mv { display: flex; align-items: center; justify-content: center; text-align: center; }
  .mv-container { padding: 20px; }
  .mv-title { font-size: 30px; }
  .mv-subtitle { font-size: 16px; margin-bottom: 20px; }
  .mv-text { font-size: 14px; line-height: 1.7; }

  /* Works */
  .works-name { font-size: 16px; }
  .works-info { margin-top: 3px; }
  .works-list { justify-content: space-between; }
  .works-item { flex: 0 0 48%; margin-right: 0; margin-bottom: 30px; }

  .works-store-links img { width: 150px; }
  .store-links img { width: 120px; }

  /* 下層 */
  .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; }
  .article-body img {
    width: 150px;
    height: auto;
    display: block;
    margin: 0 auto 1.8em;
  }

  .works-thumb-link img {
    width: 80%;        /* 画面幅の70%に縮小 */
    height: auto;
    margin: 0 auto;    /* 中央寄せ */
    display: block;
  }
}

/* ===== PCだけヘッダーを画面端まで寄せる ===== */
@media screen and (min-width: 1024px) {
  /* ヘッダー内の.containerをフル幅にし、左右余白を小さく */
  .header > .container {
    max-width: none;   /* 1340pxの上限を解除して画面いっぱいに */
    width: 100%;
    margin: 0;         /* 0 auto の中央寄せを解除 */
    padding: 20px 20px;
  }
}

/* 固定ヘッダー分のオフセット量（PC/スマホで切り替え） */
:root { --header-offset: 73px; }              /* PC */
@media (max-width: 767px) { :root { --header-offset: 57px; } } /* iPhone SE 等 */

/* ブラウザのアンカー移動時に余白を確保（対応ブラウザ向け） */
html {
  scroll-behavior: smooth;                     /* 好みで。滑らかスクロール */
  scroll-padding-top: var(--header-offset);    /* アンカー位置の上に余白 */
}

/* 念のため対象セクション側にも余白を指示（互換用） */
#works, #contact, :target {
  scroll-margin-top: var(--header-offset);
}

.home-link a {
  font-size: 24px;     /* 文字サイズを少し小さく */
  padding: 8px 16px;   /* ボタン内余白も調整 */
}

.works-store-links img {
  width: 160px;   /* 好きな幅に変更（例: 140px） */
  height: auto;   /* 縦横比は維持 */
}

@media screen and (max-width: 767px) {
  .works-store-links img { width: 140px; }
  .home-link a { font-size: 22px; padding: 6px 14px; }
}

/* 固定ヘッダーの高さ（PC/スマホ） */
:root { --header-offset: 73px; }
@media (max-width: 767px) { :root { --header-offset: 57px; } }

/* アンカー見出しの直前にダミーの余白を作って、ヘッダー被りを防ぐ */
#works::before,
#contact::before {
  content: "";
  display: block;
  height: var(--header-offset);
  margin-top: calc(-1 * var(--header-offset));
}

html { scroll-padding-top: var(--header-offset); scroll-behavior: smooth; }

.article-body ul {
  padding-left: 1em; /* 一文字分の字下げ */
}

.article-body li {
  word-break: break-word; /* 長いURLがはみ出さないように折り返す */
}

.article-body a {
  word-break: break-all;     /* 単語の途中でも折り返す */
  overflow-wrap: anywhere;   /* できるところで折り返す */
}

.article-body hr {
  margin-top: 1em;    /* 横線の上に1行分の余白 */
  margin-bottom: 1em; /* 横線の下に1行分の余白 */
}