@charset "utf-8";
/* ---------------------------------------------- Contents

　※body~p~header~hooter etcの基礎htmlタグ、
　root（色の制御文字サイズ・文字間・文字の太さなどの制御）
　ファーストビュー、
　ページ全体まとめの制御、main（コンテンツ）内の使いまわしが可能なコンテナレイアウトなど、
　主要となる要素はこちらに。
　※main内の使いまわしが効かないコンテナレイアウト（例：インフォメーションコンテナ等）は「parts.css」に記述する。

:root
  ├─ font-size: フォントサイズ値まとめルート元 ;
  └─ メイン・サブカラー値まとめ

*{ 全称セレクター
  ├─ *{box-sizing（要素の幅と高さにpaddingとborderを含める）
  └─ *{outline:(全ての要素にアウトライン(マゼンタカラー）を引いてレイアウト確認)

Basic tags
  ├─ body
  ├─ h2
  ├─ p, li 
  └─ a/a~

全体制御&使用
  ├─ :whereまとめ
  └─ .break-keep ※改行用制御　スマホ時に改行する

header
  ├─ .hide + #scrollArea
  ├─ header
  ├─ header .logo-svg
  └─ nav (.btn-headerはbutton.cssに記述)

ファーストビュー
  └─ .fast-view > .zoom-img＝ファーストビュー<picture>画像がhoverでズームアップ

main
  └─ .main-flex + .anken-flex(display: flex;を共有使用)

footer
  ├─ .footer-wrap
  ├─ footer tags
  ├─ footer li.logo-svg
  └─ .footer-flex

 */
/* ---------------------------------------------- :root */ :root { /* 値まとめ */
  /* rootで設定した数値の呼び出し例　＝font-size: var(--xxs); */
  /* rootで設定した数値の呼び出し例　　border: 4px solid var(--gold);} */
  /* fonts size */
  --xxs: xx-small;
  --xs: x-small;
  --s: small;
  --m: medium;
  --l: large;
  --xl: x-large;
  --xxl: xx-large;
  /* NIIKKEN colors */ /* main colors */
  --nikken-blue: #0064ff; /* ニッケンブルー */
  --nikken-light-blue: #3383FF; /* ニッケンブルー80% */
  --nikken-blue-grad: linear-gradient(#005bea, #00c6fb 50%, #8debd1); /* ニッケンブルーグラデ */
  --nikken-red: #e63819; /* ニッケン　レッド */
  --nikken-emerald-green: #31BFB0; /* ニッケン　エメラルドグリーン90％ */
  /* button colors */
  --gold: #b29400; /* ゴールド */
  --nikken-dark-red: #c00; /* ダークレッド　ボタン影 */
  --dark-gold: #897200; /* ダークゴールド　ボタン影 */
}
/* ---------------------------------------------- 全称セレクター */
* { /* 要素の幅と高さにpaddingとborderを含める */
  box-sizing: border-box;
}
/*　*{outline: 1px solid magenta;} ※全ての要素にアウトライン(マゼンタカラー）を引いてレイアウト確認*/
/* ---------------------------------------------- Basic tags */
html {}
body {
  color: #666; /* color: #767676; うすいグレー */
  letter-spacing: 2px;
  /*   font-family: "M PLUS 1p", Meiryo, YuGothic, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif; */
  background-attachment: fixed;
  background-color: hsla(0, 0%, 100%, 1);
  background-image:
    radial-gradient(at 46% 28%, hsla(202, 100%, 85%, 1) 0px, transparent 50%), radial-gradient(at 12% 48%, hsla(167, 68%, 90%, 1) 0px, transparent 50%), radial-gradient(at 20% 88%, hsla(210, 100%, 87%, 1) 0px, transparent 50%), radial-gradient(at 87% 15%, hsla(216, 100%, 88%, 1) 0px, transparent 50%);
}
h2 {
  color: #fff;
  font-size: var(--xl);
}
p, li {
  font-size: var(--s);
  line-height: 2;
  word-break: break-word; /* Safariで句読点が頭にくる改行されるので、回避対策 */
  word-break: normal; /* Safariで句読点が頭にくる改行されるので、回避対策 */
}
a {
  text-decoration: none;
}
/* ---------------------------------------------- :where( */
/* レスポンシブ 対デバイス別横幅調整 */ :where(header, .zoom-img, .merit, .main-flex, footer) {
  width: clamp(300px, 100%, 900px);
}
/* レスポンシブ コンテナ親 */ :where(header, .main-flex, .fast-view, main, footer) {
  container-type: inline-size;
}
:where(.btn-header a, .btn-red a, footer .co-ltd, .anken-box p, .anken-box-tag-red, .anken-box-tag-gold, .anken-box-tag-emerald, .anken-box td) {
  font-weight: bold;
}
:where(header, .anken-box, .btn-red, footer) {
  /* テキスト中央寄せにしたいクラス名まとめ */
  text-align: center;
}
/* width */ :where(.anken-box) {
  width: calc(100% - 5%);
}
:where(header, .zoom-img, .merit, .main-flex, footer, footer .logo-svg, .footer-flex, footer p, .anken-box table) {
  margin: 0 auto;
}
/* ---------------------------------------------- 全体制御&使用 */
.break-keep { /* 改行用制御 コンテンツ・ブロックモデルに応じてレスポンシブ */
  word-break: keep-all; /* スマホ時に改行する */
}
/* ---------------------------------------------- header */
.hide { /* scrollArea.js用 */
  transform: translateY(-100%); /* 上に消えるようにする */
}
#scrollArea {
  /*width: 100%; 横幅サイズも入れる*/
  /*max-width: 900px; .all-crampの最大値と同じに数値にする */
  position: sticky; /* 固定　→position: fixed ;だと、ヘッダー内のdisplay: flex;とぶつかって挙動がおかしくなる  */
  top: 0; /* 表示場所を一番上に */
  transition: .5s; /* スクロール時に一瞬で消えると物足りないので.hideの処理を0.5秒で行う */
  z-index: 100; /* 前面に表示されるようにする */
  background: #fff;
}
header {
  display: flex;
  justify-content: space-between;
}
header .logo-svg {
  width: 100%;
  max-width: 110px;
  padding: 12px 0 12px 13px;
}
@container (width > 768px) { /* タブレット～PC 親=header */
  header .logo-svg {
    width: 100%;
    max-width: 140px;
    padding: 12px 0 12px 18px;
  }
}
/* ---------------------------------------------- .fast-view > .zoom-img  */
.fast-view {
  width: 100%;
  padding: 40px 0 10px;
  /* height: 100%;
	position: fixed;
  top: 0;
  z-index: -1;
   */
}
/* ファーストビュー<picture>画像がhoverでズームアップ */
@container (width > 768px) { /* タブレット横向き～PC間に反映 親=fast-view */
  .zoom-img {
    cursor: pointer;
    overflow: hidden;
  }
  .zoom-img img {
    height: auto;
    transition: transform .6s ease; /* ゆっくり変化させる */
  }
  .zoom-img:hover img {
    transform: scale(1.05); /* 拡大 */
  }
}
.zoom-img {
  padding-bottom: 10px;
}
/* ---------------------------------------------- .main-flex + anken-flex */
.main-flex {
  background: #fff;
  width: 100%;
  /* margin-top: 1000px; xiaomi lite 11 */
}
.main-flex, .anken-flex {/* .anken-flex内の案件の※細かい記述はparts.cssへ記載 */
  display: flex;
  flex-direction: column;
  place-items: center;
  row-gap: 50px;
  padding: 20px 0 50px;
}
/* ---------------------------------------------- footer */
.footer-wrap {
  background: #3C3C41;
}
footer {
  display: flex;
  row-gap: 25px;
  flex-direction: column;
}
footer p, footer a {
  color: #ccc;
}
footer p {
  padding-bottom: 15px;
}
footer a:hover {
  color: var(--nikken-blue);
  text-decoration: underline;
}
footer li {
  font-size: var(--s);
}
/* .logo-svg */
footer li.logo-svg {
  width: 100%;
  max-width: 110px;
  padding: 35px 0 35px 0;
}
@container (width > 768px) { /* タブレット～PC 親=footer */
  footer li.logo-svg {
    width: 100%;
    max-width: 145px;
    padding: 35px 0 35px 0;
  }
}
/* footer-flex */
.footer-flex {
  display: flex;
}
ul.footer-flex {
  flex-direction: column;
  /* row-gap: 1px; */
}
@container (width > 768px) { /* タブレット～PC 親=footer */
  ul.footer-flex {
    flex-direction: row;
    column-gap: 30px;
  }
}