@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
:root {
  /* ヘッダーの高さ */
  --header-height: 80px;
	
  /* カラーパレット */
  --color-primary1: #EF8C1A;/* オレンジ（濃い） */
	--color-primary1-2: #FFC583;/* オレンジ（薄い） */
	--color-primary2: #1B82E6;/* ブルー（濃い） */
	--color-primary2-2: #88C5FF;/* ブルー（薄い） */
	--color-primary2-3: #E5F2FF;/* ブルー（極薄い） */
	--color-primary3: #0EAC1A;/* グリーン（濃い） */
	--color-primary3-2: #9AEDA0;/* グリーン（薄い） */
  --color-text: #000;
  --color-white: #FFF;
  --color-gray-light: #f5f5f5;
  --color-gray: #CFCFCF;
  --color-gray-dark: #4C4C4C;
  /* ホバーカラー（テキストリンク） */
  --color-primary-hover: #000;
  /* ホバーカラー（ボタン） */
  --color-btn-hover: #FFF;
  /* フォントサイズ */
  --font-xs: 1.5rem;
  --font-sm: 1.7rem;
  --font-md: 2.2rem;
  --font-lg: 2.7rem;
  --font-xl: 4.0rem;
  --font-xxl: 5.0rem;
  /* ブレークポイント */
  --breakpoint-desktop: 1100px;
  /* コンテナー幅 */
  --container-max-width: 1260px;
  --container-basic-max-width: 1025px;
  --container-narrow-max-width: 840px;
  /* スペーシング */
  --space-xs: 1rem;
  --space-sm: 3rem;
  --space-md: 5.5rem;
  --space-lg: 7.5rem;
  --space-xl: 10rem;
  --space-xxl: 13rem;
}
@media (max-width: 1024px) {
  :root {
    /* フォントサイズ */
    --font-xs: 1.2rem;
    --font-sm: 1.35rem;
    --font-md: 1.5rem;
    --font-lg: 1.75rem;
    --font-xl: 2.0rem;
    --font-xxl: 2.4rem;
    /* スペーシング */
    --space-xs: 1.0rem;
    --space-sm: 1.5rem;
    --space-md: 2.2rem;
    --space-lg: 3.5rem;
    --space-xl: 4.5rem;
	 --space-xxl: 5.5rem;
  }
}
@media (max-width: 768px) {
	--header-height: 60px;
}
/* モダンリセット */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  color: var(--color-text);
  line-height: 1.8;
}
table, input, textarea, select, option {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.8;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s;
}
a:hover {
  color: var(--color-primary-hover);
}
/* アクセシビリティ */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: none;
}
/* レスポンシブデザイン */
@media (min-width: 1101px) {
  .sp {
    display: none !important;
  }
}
@media (max-width: 1100px) {
  .pc {
    display: none !important;
  }
}
/* コンテナー */
.container, .container-basic, .container-narrow {
  margin: auto;
  position: relative;
  max-width: var(--container-max-width);
  width: 100%;
  padding: 0 30px;
}
.container-basic {
  max-width: var(--container-basic-max-width);
  padding: 0;
}
.container-narrow {
  max-width: var(--container-narrow-max-width);
  padding: 0;
}
@media (max-width: 768px) {	
	.container, .container-basic, .container-narrow {
	  padding: 0 14px;
	}
	.container > .container-narrow,
	.container > .container-basic{
	  padding: 0;
	}
}

.bold{
	font-weight: bold;
}

/* アニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}
/* スクリーンリーダー専用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== スクロールでFV以外のセクションをフェードイン ===== */
.fade-in-on-scroll{
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
  transition: opacity 1s ease;/*透過*/
  /*transition:transform .3s ease;*//*移動*/
  transition-delay: 0s;/*遅延*/
}
.fade-in-on-scroll.is-visible{opacity: 1; transform: none;}

/* お好みで少し遅延（セクションごとに段差を付けたい場合） */
/*.fade-in-on-scroll:nth-of-type(2){ transition-delay: .05s; }
.fade-in-on-scroll:nth-of-type(3){ transition-delay: .1s; }
.fade-in-on-scroll:nth-of-type(4){ transition-delay: .15s; }*/

/* アクセシビリティ：動きを減らす設定のユーザーにはアニメ無効 */
@media (prefers-reduced-motion: reduce){
  .fade-in-on-scroll{ opacity: 1; transform: none !important; transition: none; }
}