/* =========  Basic Setting  ========= */
:root {

  /* Color */
  --col-darkgray: #161A1D;
  --col-gray: #F1F2F4;
  --col-blue: #0000C5;
  --col-lightblue: #E6E6F9;
  --col-white: #fff;

}

html,
body {
  background: var(--col-blue);
  color: var(--col-white);
  font-family: "Helvetica-Regular", Helvetica;
}


/* ========= Container & Section ========= */

/* Container */
.container {
  min-width: 393px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 128px 64px;
}

.container-hero {
  min-width: 393px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 0 64px 64px;
}

@media (max-width: 767px) {
  .container {
    padding: 64px 24px;
  }
  .container-hero {
    padding: 0 24px 64px;
  }
}

/* Section */
section {
  min-width: 393px;
  background-color: var(--col-blue);
}

.section-title {
  font: 20px/1.0 "Helvetica-Regular", Helvetica;
  margin: 0 0 64px;
}


@media (min-width:768px) {
  .section-subtitle {
    font: 40px/1.2 "Helvetica-Regular", Helvetica;
    margin: 0;
  }
}

@media (max-width:767px) {
  .section-title {
    font: 20px/1.0 "Helvetica-Regular", Helvetica;
  }
  .section-subtitle {
    font: 28px/1.0 "Helvetica-Regular", Helvetica;
  }
}

/* =========  Common  ========= */

/* Gneral setting */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .3s ease;
}

a:hover {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

/* Split */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}

.split-left,
.split-right {
  min-width: 0;
}

@media (min-width:768px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width:767px) {
}

/* ========= Header ========= */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: transparent;
  z-index: 1000;
}

.site-header-bar {
  min-width: 393px;
  max-width: 1440px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 48px 64px 0;
  flex-wrap: wrap;
}

.site-title {
  font-family: "Helvetica-Regular", Helvetica;
  letter-spacing: 0.2em;
  font-size: 16px;
  color: var(--col-white);
  gap: 12px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font: 12px/1 "Helvetica-Regular", Helvetica;
  color: var(--col-white);
  text-decoration: none;
  white-space: nowrap;
}

[id] {
  scroll-margin-top: 128px;
}

@media (max-width:767px) {
  .site-header-bar {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 24px 0;
    gap: 24px;
  }
  .site-nav {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font: 11px/1 "Helvetica-Regular", Helvetica;
  }
  .site-header-bar {
    flex-direction: row;           /* 横並びに戻す */
    justify-content: space-between;/* 左右端揃え */
    align-items: flex-start;
    padding: 24px;
    gap: 0;
    text-align: left;
  }

  .site-title {
    display: flex;
    flex-direction: column;        /* 縦積み */
    align-items: flex-start;       /* 左寄せ */
    font-size: 14px;
    letter-spacing: 0.1em;
    gap: 4px;
  }

  .site-title span {
    display: block;                /* 1段ごとにブロック化 */
  }
}

/* =========  Hero  ========= */

.hero {
  height: 100svh;
  display: flex;
  align-items: flex-end;
}

.hero-title {
  font: 56px/1.1 "Helvetica-Regular", Helvetica;
}

.hero-lead {
  font: 20px/1.5 "Helvetica-Regular", Helvetica;
}

@media (min-width:768px) {
  .hero .split {
    display: flex;
    align-items: flex-end;
  }

  .hero .split-left,
  .hero .split-right {
    flex: 1;
  }
}

@media (max-width:767px) {

  .container-hero {
    margin: 0 0 80px;
  }
  .hero-title {
    font: 28px/1.2 "Helvetica-Regular", Helvetica;
  }
  .hero-lead {
    font: 18px/1.4 "Helvetica-Regular", Helvetica;
  }
  
}


/* =========  About  ========= */

.about-text {
  font: 16px/1.5 "Helvetica-Regular", Helvetica;
  margin: 0 0 48px;
}

.about a {
  font-style: italic;
  text-decoration: underline;
}

/* ベース（スマホ含む） */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;     /* ブロックは縦1列 */
  row-gap: 64px;                  /* values-block 同士の間隔 */
}

.values-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 各ブロック内で3カラム */
  gap: 64px;                                        /* value-item 同士の間隔 */
  align-items: start;
}

.value-item {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;                                        /* 画像とキャプションの間隔はお好みで */
}

.value-item img.svg-icon,
.value-item svg {
  width: 100%;
  height: auto;
  display: block;
}


/* ラップトップ以上でブロックを2列に */
@media (min-width:768px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);  /* values-block ×2 を横並び */
    column-gap: 64px;                        /* 列間も64px */
    max-width: 1024px;                       /* 指定の最大幅 */
    margin-inline: auto;  
    padding: 48px 0 0;                   /* 左右センター */
  }
}

@media (max-width:767px) {
  .about {
    max-width: 1024px;                       /* 指定の最大幅 */
    margin-inline: auto;  
  }
  .values-grid {
    gap: 16px;                                        /* value-item 同士の間隔 */
    padding: 32px 16px 0;
  }
  .values-block {
    gap: 48px;                                        /* value-item 同士の間隔 */
  }
}

/* =========  Projects  ========= */

.projects {
  background-color: var(--col-gray);
  color: var(--col-darkgray);
}

.project-title {
  font: 16px/1.0 "Helvetica-Regular", Helvetica;
  color: var(--col-blue);
  margin: 0 0 12px;
}

.project-meta {
  font: 16px/1.5 "Helvetica-Regular", Helvetica;
  margin: 0 0 24px;
}
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 64px 0;
  align-items: stretch; /* ← 高さ揃え */
}

.work-card {
  display: flex;
  flex-direction: column;
  height: 100%;         /* グリッドセルに合わせる */
}

.work-card img {
  margin-top: auto;     /* 画像を一番下に寄せる */
  width: 100%;
  border-radius: 32px;
  height: auto;
  display: block;
}

@media (min-width:768px) {
  .work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:767px) {
  .project-title {
    font: 20px/1.0 "Helvetica-Regular", Helvetica;
  }
}


/* =========  Contact CTA  ========= */

.contact-cta {
  margin-top: 48px;
  padding-inline: 24px;
  display: flex;
  justify-content: center;
}

.contact-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  padding: 20px 32px;
  background-color: var(--col-lightblue);
  color: var(--col-blue);
  text-decoration: none;
  border-radius: 4px;
  font: 18px/1.5 "Helvetica-Regular", Helvetica;
  transition: background-color .2s ease, opacity .2s ease;
}

.contact-button img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

@media (min-width:768px) {
  .contact-cta {
    padding-inline: 0;
  }
  .contact-button {
    width: 640px;
    padding: 32px 64px;
    max-width: none;
  }
}

@media (max-width:767px) {

  .contact-cta {
    margin-top: 48px;
    padding-inline: 0;
  }
  
  .contact-button {
    width: 100%;
    padding: 20px 32px;
    max-width: none;
  }
}



/* =========  Footer  ========= */

.site-footer {
  background-color: var(--col-gray);
  color: var(--col-darkgray);
  border-radius: 24px 24px 0 0;
}

.footer-bar {
  min-width: 393px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 88px 64px 128px;
  display: flex;
  flex-direction: column;     /* smartphone: 縦積み */
  gap: 16px;
  align-items: flex-start;
}

.footer-links {
  color: var(--col-blue);
  display: flex;
  gap: 24px;                  /* リンク間隔 */
  flex-wrap: wrap;            /* 文字が長い場合の折返し */
}

.footer-links a {
  text-decoration: none;
}

.copyright {
  font: 14px/1 "Helvetica-Regular", Helvetica;
}

@media (min-width:768px) {
  .footer-bar {
    flex-direction: row;      /* 横並び */
    justify-content: space-between; /* 両端揃え */
    align-items: center;      /* ベースラインを整える */
    gap: 0;
  }
}

@media (max-width:767px) {
  .footer-bar {
    padding: 40px 24px 144px;
    display: flex;
    flex-direction: column;     /* smartphone: 縦積み */
    gap: 24px;
    align-items: flex-start;
  }

}

/* ==== Sticky CTA (mobile only) ==== */

.sticky-cta {
  display: none;                /* デフォルト非表示（PC/タブレット）*/
}

@media (max-width: 767px) {

  .sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;                  /* 端末のセーフエリアも考慮 */
    padding: 12px 24px 40px;
    background: transparent;    /* 透過（下にボタンのみ表示）*/
    opacity: 0.9;
    z-index: 1100;              /* ヘッダーより上 */
    display: block;
  }

  /* 既存の .contact-button を流用しつつ、固定用に微調整 */
  .contact-button--sticky {
    width: 100%;                /* 既存モバイルと同じ幅指定 */
    max-width: none;
    padding: 20px 32px;         /* 既存モバイルのサイズと同一 */
    border-radius: 4px;         /* 既存値 */
  }
}