/* ========= Reset ========= */
*,
*::before,
*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ========= Base ========= */
:root{
  /* 1rem = 10px */
  font-size:62.5%;
  --gap:2.4rem;                 /* 基本余白 */
  --bg-main:#f5f5f7;            /* Apple 系ライトグレー */
  --ink:#1d1d1f;                /* 本文用インク色 */
  --link:#06c;                  /* Apple ブルー */
  --link-hover:#0040a8;         /* 濃いブルー */
  --border:#d2d2d7;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg-main);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",
              "Hiragino Sans","Noto Sans JP",Arial,sans-serif;
  font-size:1.6rem;             /* 16px */
  line-height:1.75;
  letter-spacing:-.01em;        /* Apple が推奨する微小トラッキング */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ========= Layout ========= */
.container{
  width:min(100% - 4rem, 960px);/* 両サイド 20px の余白 */
  margin-inline:auto;
}

/* ========= Header ========= */
.header{
  padding-block:6rem 5rem;
  text-align:center;
}
.header-logo{
  font-size:3.2rem;
  font-weight:600;              /* Apple 見出しは 600 が基準 */
}

/* ========= Main Content ========= */
.main{ padding-block:var(--gap); }

.intro{
  font-size:1.7rem;
  margin-bottom:var(--gap);
}

.section-title{
  font-size:2.4rem;
  font-weight:600;
  margin-block:var(--gap) 1.2rem;
}

/* -------- リスト -------- */
.materials{
  list-style:disc inside;
  display:grid;
  gap:1.2rem;
  padding-left:1.6rem;
}
.materials a,
.portfolio-link{
  font-size:1.8rem;
  text-underline-offset:.25em;
  text-decoration-thickness:.08em;
  color:var(--link);
  transition:color .15s ease,text-decoration-thickness .2s;
}
.materials a:hover,
.portfolio-link:hover{
  color:var(--link-hover);
  text-decoration-thickness:.18em;
}

/* ポートフォリオをブロック表示して余白確保 */
.portfolio-link{
  display:block;
  margin-top:var(--gap);
}

/* ========= Footer ========= */
.footer{
  border-top:.1rem solid var(--border);
  padding-block:5rem;
  text-align:center;
  font-size:1.4rem;
  background:var(--bg-main);
}
.footer a{
  color:inherit;
  text-decoration:none;
  border-bottom:.1rem solid currentColor;
  transition:border-width .2s;
}
.footer a:hover{ border-bottom-width:.25rem; }

/* ========= Responsive (≤480px) ========= */
@media (max-width:480px){
  :root{ --gap:1.6rem; }
  .header-logo{ font-size:2.6rem; }
  .section-title{ font-size:2.1rem; }
  .materials a,
  .portfolio-link{ font-size:1.6rem; }
}