/*============================================================
共通CSS
  ◆ このファイルの目的
    - サイト全体のリセット（余計なデフォルト装飾を排除）
    - ベースデザインの統一（文字色・余白・リンク色など）
    - レスポンシブに対応した横幅制御

  ◆ 編集のポイント
    - 文字色 / リンク色などは基本的に変数で管理
    - 横余白（--gutter）は画面幅に応じて自動調整
    - コンテナ幅（--container-max）は必要に応じて変更
    - 他の人が触る場合は「変数」を変えるだけで
      サイト全体に反映されるように設計

  ◆ よく使うクラス
    .container   : 中央寄せ + 最大幅制御
    .full-width  : 常に横幅100%（背景をフル表示したいとき）
    .container--narrow / --wide / --fluid : 幅のバリエーション

  ◆ 注意点
    - h1,h2,h3 は基本リセット。サイズ指定はここで最低限のみ。
      デザインによって上書きOK。
    - 白背景が基本。背景色が濃いセクションでは
      見出しやリンク色を別途上書きすること。

  ◆ 共通CSS（スマホファースト版）
  - ブレイクポイント: 360 / 768 / 960 / 1200 (min-width)
  - 余白やレイアウトはモバイル基準 → 広い幅で段階強化
============================================================*/


/****************
基本設定
****************/
:root {
  --container-max: 1200px;     /* 中身の最大幅 */
  --gutter: 1rem;              /* 横余白（ガター、スマホ基準） */
  --color-text: #333;
  --color-link: #3366CC;
  --color-link-hover: #66DDEE;
  --radius: 8px;
	--color-blue:#3366CC;
	--color-lightblue:#dbe8fc;
	--color-orange:#ffa500;
	--color-orange-hover:#ffdd66;
	--color-gray:#CCCCCC;
	--color-darkgray:#333333;
	--color-lightgray:#e1e1e1;
	--color-lightgray2:#f9f9f9;
	--color-black:#000000;
	--color-white:#FFFFFF;
	--color-gradation-light:#00eefd;
	--color-gradation-dark:#183d8a;
}

html,
body {
  width: 100%;
	height:100%; /* footer位置固定のため */
	min-width:320px;
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "Roboto",
               "Noto Sans JP",
               -apple-system,
               BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN",
               "Hiragino Sans",
               "Yu Gothic",
               "YuGothic",
               "Segoe UI",
               Arial,
               sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
}
html{
	scroll-behavior: smooth;
}
body {
  min-height: 100dvh;      /* 100vhよりモバイルに強い */
  display: flex;
  flex-direction: column;
}
main{
	flex:1;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/****************
ユーティリティカラー
****************/
.blue { color: var(--color-blue); }
.black { color: var(--color-black); }


/****************
タイポグラフィ
****************/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: 700;
  line-height: inherit;
  color: var(--color-text);
}

h1 { font-size: clamp(1.8rem, 3.5vw, 2.2rem); }
h2 {
	font-weight: 700;
	font-size: clamp(1.6rem, 2.8vw, 2.0rem);
}
h3 {
	font-weight: 700;
	/*font-size: clamp(1.3rem, 2.2vw, 1.5rem);*/
	font-size: clamp(1.2rem, 2vw, 1.5rem);
}

p {
  margin: 0 0 1em;
  padding: 0;
}

@media (max-width: 360px){
  br.spNone {
    display: none;
  }
}

@media (max-width: 640px){
  .spNone {
    display: none;
  }
}

/****************
メディア要素
****************/
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

figure,
blockquote {
  margin: 0;
  padding: 0;
}

/****************
リスト / テーブル
****************/
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  margin: 0;
  padding: 0;
}

table {
  margin: 0;
  padding: 0;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

thead,
tbody,
tfoot,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  text-align: inherit;
  vertical-align: baseline;
}

/* 横スクロールラッパー（テーブルなど） */
.table-wrap { overflow-x: auto; }

/****************
フォーム / リンク
****************/
form{
	margin:0;
	padding:0
}

input,
textarea,
select,
button {
	width:100%;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--color-gray);
	border-radius:4px;
  background: var(--color-white);
  color: inherit;
  font: inherit;
	outline: none;
	min-height:40px;
	box-sizing: border-box;
}
textarea { min-height: 120px; }

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-blue);   /* 好きな色に */
  background-color: var(--color-lightblue); /* 背景色を変える */
  /*box-shadow: 0 0 4px rgba(0, 102, 204, 0.6); /* お好みで光らせる */
	outline: none;
}

button { cursor: pointer; }

a {
  color: var(--color-link);
  text-decoration: none;
  text-underline-offset: .15em;
  transition: color .3s ease;
}

a:hover { color: var(--color-link-hover); }

/****************
アクセシビリティ
****************/
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/****************
レイアウト：背景100% と 中身の幅制御
****************/
.container {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.full-width {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* 幅バリエーション */
/*.container--narrow { --container-max: 960px; }
.container--wide   { --container-max: 1440px; }
.container--fluid  { --container-max: none;   }
*/

/****************
大枠レイアウト
****************/
div#head {
	margin:0;
	padding:0;
	border-bottom:1px solid var(--color-lightgray);
	position: fixed; /* スクロール固定のため */
	width:100%;
	top:0; /* スクロール固定のため */
	z-index: 10000; /* スクロール固定のため */
}

header,
section,
footer {
	width: 100%;
}

/* 中身だけを最大1200pxに制限＆中央寄せ（直下の子に適用） */
header > *,
section > *,
footer > * {
	width: min(100%, var(--container-max)); /* = 1200px */
	margin-inline: auto;
	padding-inline: var(--gutter);
}

header ul,
footer ul {
	display: flex;
	gap: 12px;
	padding-block: 12px;
	margin: 0;
	width:100%;
}

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

.container--fluid > * {
	width: 100%;
	margin-inline: 0;
	padding-inline: 0; /* 余白が必要ならここは消す */
}

div.columnHalf{
  display: flex;
  flex-direction: column;
	gap:64px;
}
@media (min-width: 768px) {
	div.columnHalf {
		flex-direction: row;
	}
	div.columnHalf > section {
		flex: 1;            /* 均等に広がる（=50%ずつ） */
	}
}

/****************
ページトップ遷移
****************/
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px var(--color-link);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid var(--color-link);
    border-right: 3px solid var(--color-link);
    transform: translateY(20%) rotate(-45deg);
}


/****************
ブレイクポイント
****************/
@media (max-width: 359.98px) {
	header ul,footer ul,section { gap: 8px; }
}
@media (min-width: 360px) {
  :root { --gutter: 1.125rem; }
}
@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
	header ul,footer ul,section { gap: 10px; }
}
@media (min-width: 768px) {
  :root { --gutter: 2rem; }
	header ul,footer ul,section { gap: 16px; }
}
@media (min-width: 960px) {
  :root { --gutter: 2.25rem; }
}
@media (min-width: 1200px) {
  :root { --gutter: 2.5rem; }
  body { font-size: 17px; }
	header ul,footer ul,section { gap: 20px; }
}