/* ============================================================
   components.css
   Design System v2.0 Section 07 / 08 / 09 / 11 参照
============================================================ */

/* ---- ボタン：プライマリ ---------------------------------- */
.btn-primary {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-2);
  padding:          var(--space-3) var(--space-8);
  background-color: var(--color-accent);
  color:            #FFFFFF;
  font-size:        var(--text-sm);
  font-weight:      var(--weight-semibold);
  letter-spacing:   0.08em;
  text-decoration:  none;
  border:           1px solid var(--color-accent);
  cursor:           pointer;
  transition:       background-color var(--duration-fast) var(--ease-out),
                    color            var(--duration-fast) var(--ease-out),
                    border-color     var(--duration-fast) var(--ease-out),
                    transform        var(--duration-fast) var(--ease-out),
                    box-shadow       var(--duration-fast) var(--ease-out);
}
.btn-primary:hover {
  background-color: var(--color-accent-hover);
  border-color:     var(--color-accent-hover);
  color:            #FFFFFF;
  transform:        translateY(-1px);
  box-shadow:       0 4px 16px rgba(198, 31, 31, 0.25);
}
.btn-primary:focus-visible {
  outline:        2px solid var(--color-text);
  outline-offset: 3px;
}
.btn-primary:active {
  background-color: var(--color-accent);
  border-color:     var(--color-accent);
  transform:        translateY(0);
  box-shadow:       none;
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
}

/* ---- ボタン：セカンダリ ---------------------------------- */
.btn-secondary {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              var(--space-2);
  padding:          var(--space-3) var(--space-8);
  background-color: transparent;
  color:            var(--color-text);
  font-size:        var(--text-sm);
  font-weight:      var(--weight-semibold);
  letter-spacing:   0.08em;
  text-decoration:  none;
  border:           1px solid var(--color-text);
  cursor:           pointer;
  transition:       background-color var(--duration-fast) var(--ease-out),
                    color            var(--duration-fast) var(--ease-out),
                    border-color     var(--duration-fast) var(--ease-out),
                    transform        var(--duration-fast) var(--ease-out),
                    box-shadow       var(--duration-fast) var(--ease-out);
}
.btn-secondary:hover {
  background-color: var(--color-text);
  color:            var(--color-bg);
  transform:        translateY(-1px);
  box-shadow:       0 4px 12px rgba(242, 240, 235, 0.06);
}
.btn-secondary:focus-visible {
  outline:        2px solid var(--color-text);
  outline-offset: 3px;
}
.btn-secondary:active {
  transform:  translateY(0);
  box-shadow: none;
  opacity:    0.85;
}
.btn-secondary:disabled {
  opacity: 0.4;
  cursor:  not-allowed;
}

/* ---- ボタン：テキスト ------------------------------------ */
.btn-text {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  padding:         0;
  background:      none;
  border:          none;
  color:           var(--color-text);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-semibold);
  letter-spacing:  0.05em;
  text-decoration: none;
  cursor:          pointer;
  transition:      color var(--duration-fast) var(--ease-out);
}
.btn-text:hover {
  color: var(--color-accent);
}
.btn-text:focus-visible {
  outline:        2px solid var(--color-text);
  outline-offset: 3px;
}

/* ---- カード ---------------------------------------------- */
.card {
  background-color: var(--color-surface);
  border:           1px solid var(--color-border);
  padding:          var(--space-8);
  transition:       border-color var(--duration-normal) var(--ease-out);
}
.card:hover {
  border-color: var(--color-border-strong);
}

/* ---- カード：メディア ------------------------------------ */
.card-media {
  aspect-ratio:  16 / 9;
  overflow:      hidden;
  margin-bottom: var(--space-6);
}
.card-media img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* ---- フォーム：グループ ---------------------------------- */
.form-group {
  margin-bottom: var(--space-6);
}

/* ---- フォーム：ラベル ------------------------------------ */
.form-label {
  display:        block;
  margin-bottom:  var(--space-2);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  color:          var(--color-text);
  letter-spacing: 0.05em;
}

/* ---- フォーム：入力 -------------------------------------- */
.form-input {
  display:          block;
  width:            100%;
  padding:          var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  color:            var(--color-text);
  font-size:        var(--text-base);
  font-family:      var(--font-jp);
  border:           1px solid var(--color-border);
  transition:       border-color var(--duration-fast) var(--ease-out);
}
.form-input:focus-visible {
  outline:        2px solid var(--color-text);
  outline-offset: 2px;
  border-color:   var(--color-text);
}
.form-input:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}
.form-input::placeholder {
  color: var(--color-text-muted);
}

/* ---- フォーム：テキストエリア ---------------------------- */
.form-textarea {
  display:          block;
  width:            100%;
  min-height:       160px;
  padding:          var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  color:            var(--color-text);
  font-size:        var(--text-base);
  font-family:      var(--font-jp);
  border:           1px solid var(--color-border);
  resize:           vertical;
  transition:       border-color var(--duration-fast) var(--ease-out);
}
.form-textarea:focus-visible {
  outline:        2px solid var(--color-text);
  outline-offset: 2px;
  border-color:   var(--color-text);
}
.form-textarea::placeholder {
  color: var(--color-text-muted);
}

/* ---- フォーム：セレクト ---------------------------------- */
.form-select {
  display:             block;
  width:               100%;
  padding:             var(--space-3) var(--space-8) var(--space-3) var(--space-4);
  background-color:    var(--color-surface);
  color:               var(--color-text);
  font-size:           var(--text-base);
  font-family:         var(--font-jp);
  border:              1px solid var(--color-border);
  appearance:          none;
  -webkit-appearance:  none;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23F2F0EB' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--space-4) center;
  cursor:              pointer;
  transition:          border-color var(--duration-fast) var(--ease-out);
}
.form-select:focus-visible {
  outline:        2px solid var(--color-text);
  outline-offset: 2px;
  border-color:   var(--color-text);
}

/* ---- フォーム：エラー ------------------------------------ */
.form-error {
  display:    block;
  margin-top: var(--space-1);
  font-size:  var(--text-xs);
  color:      var(--color-error);
}

/* ---- CTAセクション --------------------------------------- */
.cta-section {
  background-color: var(--color-text);
  color:            var(--color-bg);
  padding:          var(--space-24) 0;
  text-align:       center;
}
.cta-section-inner {
  max-width: 800px;
  margin:    0 auto;
  padding:   0 var(--space-6);
}
.cta-section-title {
  font-size:     var(--text-h2);
  font-weight:   var(--weight-bold);
  line-height:   var(--leading-heading);
  margin-bottom: var(--space-6);
}
.cta-section-body {
  font-size:     var(--text-lg);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-8);
}

/* ---- コンタクトセクション追加テキスト -------------------- */
.cta-section .form-label {
  color: var(--color-bg);
}
.contact-philosophy {
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-12);
}

/* ---- コンタクトフォーム ---------------------------------- */
.contact-form {
  max-width:  640px;
  margin:     var(--space-8) auto 0;
  text-align: left;
}
.contact-form-guide {
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-6);
  text-align:    left;
}
.form-privacy {
  font-size:     var(--text-xs);
  color:         var(--color-text-muted);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-6);
  text-align:    left;
}

/* ---- セクション見出し ------------------------------------ */
.section-heading {
  text-align:    center;
  margin-bottom: var(--space-16);
}
.section-heading-title {
  font-size:     var(--text-h2);
  font-weight:   var(--weight-bold);
  line-height:   var(--leading-heading);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}
.section-heading-body {
  font-size:     var(--text-base);
  color:         var(--color-text-sub);
  line-height:   var(--leading-body);
  max-width:     640px;
  margin-inline: auto;
}

/* ---- タグ ------------------------------------------------ */
.tag {
  display:        inline-flex;
  align-items:    center;
  padding:        var(--space-1) var(--space-3);
  border:         1px solid var(--color-border);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  color:          var(--color-text-sub);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- バッジ ---------------------------------------------- */
.badge {
  display:          inline-flex;
  align-items:      center;
  padding:          var(--space-1) var(--space-2);
  background-color: var(--color-accent);
  color:            #FFFFFF;
  font-size:        var(--text-xs);
  font-weight:      var(--weight-semibold);
  letter-spacing:   0.03em;
}

/* ---- ボタン：サイズ修飾子 -------------------------------- */
.btn--lg {
  padding:   var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* ---- 区切り線 -------------------------------------------- */
.divider {
  border:     none;
  border-top: 1px solid var(--color-border);
  margin:     var(--space-16) 0;
}

/* ---- モーション軽減対応 ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary {
    transition: background-color var(--duration-fast) var(--ease-out),
                color            var(--duration-fast) var(--ease-out),
                border-color     var(--duration-fast) var(--ease-out);
  }
  .btn-primary:hover,
  .btn-secondary:hover {
    transform:  none;
    box-shadow: none;
  }
}

/* ---- セクション背景バリアント ----------------------------- */
/* approach.css でも同定義あり（重複は無害） */
.section--alt {
  background-color: var(--color-surface);
}

/* ---- サービスグリッド ------------------------------------- */
.services-grid {
  display:    grid;
  gap:        var(--space-6);
  list-style: none;
  padding:    0;
  margin:     0;
}
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 業種別グリッド --------------------------------------- */
.industries-grid {
  display:    grid;
  gap:        var(--space-6);
  list-style: none;
  padding:    0;
  margin:     0;
}
@media (min-width: 768px) {
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Worksグリッド（トップページ実績3カード） ------------ */
.works-grid {
  display:    grid;
  gap:        var(--space-8);
  list-style: none;
  padding:    0;
  margin:     0;
}
@media (min-width: 768px) {
  .works-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.works-card {
  background-color: var(--color-surface);
  border:           1px solid var(--color-border);
  display:          flex;
  flex-direction:   column;
  transition:       border-color var(--duration-normal) var(--ease-out),
                    transform    var(--duration-normal) var(--ease-out);
}
.works-card:hover {
  border-color: var(--color-border-strong);
  transform:    translateY(-2px);
}

.works-card__thumb {
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  background:   var(--color-bg);
}
.works-card__thumb img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.works-card:hover .works-card__thumb img {
  transform: scale(1.02);
}

.works-card__body {
  padding:        var(--space-6);
  flex:           1;
  display:        flex;
  flex-direction: column;
}

.works-card__category {
  font-family:    var(--font-en);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  var(--space-2);
  display:        block;
}

.works-card__title {
  font-size:     var(--text-base);
  font-weight:   var(--weight-semibold);
  color:         var(--color-text);
  line-height:   var(--leading-tight);
  margin-bottom: var(--space-3);
}

.works-card__text {
  font-size:     var(--text-sm);
  color:         var(--color-text-sub);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-6);
  flex:          1;
}

.works-card__link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-1);
  font-family:     var(--font-en);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-semibold);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--duration-fast) var(--ease-out);
  margin-top:      auto;
}
.works-card__link::after {
  content: ' →';
}
.works-card:hover .works-card__link {
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  .works-card,
  .works-card__thumb img {
    transition: none;
  }
  .works-card:hover {
    transform: none;
  }
  .works-card:hover .works-card__thumb img {
    transform: none;
  }
}

/* ---- カード見出し・本文（共通） --------------------------- */
.card h3 {
  font-size:     var(--text-base);
  font-weight:   var(--weight-semibold);
  color:         var(--color-text);
  line-height:   var(--leading-tight);
  margin-bottom: var(--space-3);
  margin-top:    var(--space-3);
}
.card p {
  font-size:     var(--text-sm);
  color:         var(--color-text-sub);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-4);
}

/* ---- Works: Concept Project 注記 -------------------------- */
.works-concept-notice {
  border:            1px solid var(--color-border);
  border-left:       3px solid var(--color-accent);
  background-color:  var(--color-surface);
  padding:           var(--space-4) var(--space-6);
  margin-bottom:     var(--space-8);
}
.works-concept-notice__label {
  font-family:    var(--font-en);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-bottom:  var(--space-2);
}
.works-concept-notice__text {
  font-size:     var(--text-sm);
  color:         var(--color-text-sub);
  line-height:   var(--leading-body);
  margin-bottom: var(--space-2);
}
.works-concept-notice__note {
  font-size:  var(--text-xs);
  color:      var(--color-text-muted);
  line-height: var(--leading-body);
}