/* =============================================
   Lim Modular Studio — common.css
   共通変数・リセット・共通コンポーネント
   ============================================= */

/* --- Variables --- */
:root {
  /* Accent */
  --accent:        #6a38b9;   /* メインアクセント */
  --accent-grid:   #6D28D9;   /* グリッド専用（opacity調整前提） */
  --accent-dark:   #4C1D95;   /* ホバー・ダーク */
  --accent-tint:   #EDE9FE;   /* タグ・ラベル背景 */
  --accent-hover:  #c5a7ee;   /* ホバー時の明るいアクセント */

  /* Text */
  --text-primary:   #3e3849;  /* 見出し・本文 */
  --text-secondary: #746989;  /* サブテキスト */
  --text-muted:     #aa9ebf;  /* ナビリンク・ヒント */

  /* Base */
  --bg:             #ffffff;
  --surface:        #F5F5F5;
  --border:         #E5E5E5;
  --border-light:   #F0F0F0;

  /* Typography */
  --font-sans: "Noto Sans JP", system-ui, sans-serif;
  --font-sansEn: "Montserrat", sans-serif;
  --font-Logo: "Numans", sans-serif;
  --font-mono: ui-monospace, 'Courier New', monospace;

  /* Layout */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --max-width: 1280px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.7;
  overflow-x: clip;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent-dark);
  /* text-decoration: none; */
  transition: color 0.25s ease, opacity 0.25s ease;
}

a:hover {
  opacity: 0.7;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.page {
  max-width: 1440px;
  margin: 0 auto;
}

/* --- Navigation --- */
.nav {
  display: flex;
  align-items: center;
  padding: 22px 32px;
  width: 100%;
}

.nav-logo {
  font-family: var(--font-Logo);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.nav-logoicon {
  width: 21px;
  height: auto;
  display: inline-block;
  margin-bottom:5px;
}

.logo-text {
  margin-right: -0.18em;
}

.nav-links {
  margin-left: auto;
  display: flex;
  gap: 2px;
  list-style: none;
  overflow: hidden;
}

.nav-links a {
  /*テキストの基点とするためrelativeを指定*/
	position: relative;
  /*はみ出る要素を隠す*/
	overflow: hidden;
	padding: 0 55px 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  /* transition: color 0.25s ease; */
  text-decoration: none;
}

.nav-links a .txt-jp {
  color:var(--accent-dark);
  font-weight:bold;
  font-size: 16px;
  top: 3.6px;
}

.nav-links li span {
  /*絶対配置でテキストの位置を決める*/
	position: absolute;
	left: 50%;
	top:0;
    /*アニメーションの指定*/
	/* transition: all .5s; */
	transition: opacity .35s ease-out, transform .35s ease-out;;
	transform: translate(-50%, 0);/*X方向に-50% ※中央寄せにするため*/
  /*ブロック要素にして透過なし、テキスト折り返しなし*/  
	display: block;
	opacity:1;
	white-space: nowrap;
}

/*差し替わるテキストの設定*/
.nav-links li span:nth-child(2){
	opacity:0;/*透過0に*/
  transform: translate(-50%,100%);/*X方向に-50% Y方向に100%*/
}

/*hoverするとテキストが入れ替わる設定*/
.nav-links li:hover span:nth-child(1){
	opacity:0 !important;/*透過0に*/
  transform: translate(-50%,-100%);/*X方向に-50% Y方向に-100%*/
}

.nav-links li:hover span:nth-child(2){
	opacity:1 !important;/*不透明に*/
	transform: translate(-50%, 0);/*X方向に-50% Y方向に0*/
}

/* --- Buttons --- */
.btn-primary {
  font-size: 14px;
  padding: 7px 20px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  border: 0.5px solid var(--accent);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-primary:hover {
  color: var(--accent-dark);
  background: var(--accent-hover);
}

.btn-ghost {
  font-size: 14px;
  padding: 7px 20px;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--accent);
  border: 0.5px solid var(--accent);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
}

.btn-ghost:hover {
  background: var(--accent-hover);
  color: #fff;
  border-color: var(--accent-dark);
  opacity: none;
}

/* --- Tags --- */
.tag {
  font-size: 12px;
  font-family: var(--font-sans);
  padding: 4px 10px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent-dark);
}

/* --- Scroll hint --- */
.scroll-hint {
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.scroll-line {
  width: 24px;
  height: 0.5px;
  background: #CCC;
}

.scroll-txt {
  font-size: 9px;
  font-family: var(--font-mono);
  color: #BBB;
  letter-spacing: 0.1em;
}

/* --- Page Top Button --- */
#page-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 200;
  width: 66px;
  height: 66px;
  border-radius: 5px;
  background: rgba(109, 40, 217, 0.4); /* accent-grid opacity 0.4相当 */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: translateX(80px);
  transition: background 0.25s ease;
}

#page-top:hover {
  background: rgba(109, 40, 217, 0.6);
}

#page-top .material-symbols-outlined {
  font-size: 37px;
  color: #fff;
}

/* 出現アニメーション */
#page-top.is-show {
  animation: pageTopShow 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#page-top.is-hide {
  animation: pageTopHide 0.3s ease-in forwards;
}

@keyframes pageTopShow {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pageTopHide {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(80px); }
}

/* 背景モチーフの上に乗るテキストに白フチ */
.main-heading,
.sub-copy,
.section-eyebrow,
.section-heading,
.about-p,
.meta-label,
.meta-value,
.service-block-title,
.service-list li,
.coming-soon-label,
.coming-soon-text,
.contact-lead {
  text-shadow:
    0 0 8px rgba(255,255,255,0.99),
    0 0 8px rgba(255,255,255,0.99),
    0 0 8px rgba(255,255,255,0.99);
}

/* @media (max-width: 1023px) {
  body {
    overscroll-behavior-y: none;
  }
} */

@media (max-width: 767px) {
body {
  overscroll-behavior-y: none;
}
#page-top {
  width: 50px;
  height: 50px;
  right:0;
  bottom:0;
 }
}