/* 即席リセットスタイル2026 */
*, *::before, *::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	color-scheme: light dark; /* OS設定に応じた色の最適化 */
	scroll-behavior: smooth;
}

body {
	min-height: 100dvh;
	line-height: 2;
	-webkit-font-smoothing: antialiased;
}

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

input, button, textarea, select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* リストのスタイルを消す場合（必要に応じて） */
ul, ol {
	list-style: none;
}


/* 基本レイアウト */
body {
	font-family: sans-serif;
	background: #f4f4f4;
	color: #333;
	>*:nth-of-type(3) {
	}
}
header {
  position: fixed;
  left: 3rem;
  top: 1rem;
  z-index: 1;

  .headerTitle {
    display: block;
    margin: 1rem 0;
    height: 8rem; /* 初期サイズ */
    aspect-ratio: 4 / 1;
    background: url(/assets/img/logo.svg) no-repeat left center;
    background-size: contain;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;

    /* 0.5秒かけてなめらかに変化させる */
    transition: height 0.5s ease-in-out;
  }
}

/* 1px以上スクロールした時のスタイル */
:root[data-scrolled="true"] header .headerTitle {
  height: 3rem;
}

nav {
  position: fixed;
  right: 3rem;
  top: 1rem;
  z-index: 1;
  
  /* 背景の変化をなめらかにする */
  padding: 0.5rem 1rem; /* 背景がついた時に窮屈にならないよう調整 */
  border-radius: 4px;   /* 角を少し丸める（任意） */
  background-color: transparent;
  ul {
    display: flex;
    gap: 1rem;
    li {
      text-shadow: 1px 1px 2px #fff;
      a {
        color: #333;
        text-decoration: none;
      }
    }
  }
}

/* 1px以上スクロールした時のスタイル */
:root[data-scrolled="true"] nav {
  background-color: rgba(255, 255, 255, 0.8);
  /* もしくは background-color: #ffffffcc; */
  
  /* スクロール時に影をつけて浮かせたい場合は追加 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

footer {
	margin: 4rem auto;
	text-align:center;
	.inner {
		display:grid;
		gap:2rem;
	}
	.inner::before {
		content:'';
		display:block;
		width:100%;
		height:10rem;
		background:url(/assets/img/logo.svg) center center /contain no-repeat;
	}

}