@charset "utf-8";
/* CSS Document */

/* ========== デザイン・リブランディング ========== */
:root {
 --accent: #1e40af;
 --lita-red: #c8331a; /* aio_guideline.cssと統一（旧: #e60020） */
 --border: #cccccc;
 --border-light: #e2e8f0;
 --border-dark: #555555;
 --border-card: #f1f5f9;
 --cta-bg:#375371;
 --danger-gold: #f59e0b;
 --dark:          #636363;
 --dark-steel:    #181e2a;
 --dark-border:   #252c3a;
 --gray-bg: #f0f3f6;
 --hover-blue: #1e3a8a;
 --lita-blue:     #1c2975;
 --lita-red-dim:  #8a2210;
 --lita-amber:    #d4860a;
 --primary-deep: #0f172a;
 --text-main: #1e293b;
 --text-sub: #64748b;
 --textGray: #555555;
 --white: #ffffff;
 --black: #111111;
 --mono:          'JetBrains Mono', monospace;
 --screenshot-bg: #f8fafc;
 --screenshot-border: var(--border-light);
 --screenshot-text-color: var(--text-sub);
 --catchphrase-color: var(--primary-deep);
/* 1. Blue (起点 - 既存) */
  --cBlue-bg:     rgba(28, 41, 117, .40);
 --cBlue-border: #5a7ae0;
 --cBlue-text:   #b8caff;

  /* 2. Indigo */
  --cIndigo-bg:     rgba(63, 81, 181, .15);
 --cIndigo-border: #7986cb;
 --cIndigo-text:   #c5cae9;

  /* 3. Purple */
  --cPurple-bg:     rgba(156, 39, 176, .15);
 --cPurple-border: #ba68c8;
 --cPurple-text:   #e1bee7;

  /* 4. Pink */
  --cPink-bg:     rgba(233, 30, 99, .15);
 --cPink-border: #f06292;
 --cPink-text:   #f8bbd0;

  /* 5. Red (既存) */
  --cRed-bg:     rgba(200, 51, 26, .13);
 --cRed-border: #e06050;
 --cRed-text:   #ffb8a8;

  /* 6. Orange */
  --cOrange-bg:     rgba(220, 100, 20, .13);
 --cOrange-border: #ffb74d;
 --cOrange-text:   #ffe0b2;

  /* 7. Amber (既存) */
  --cAmber-bg:     rgba(212, 134, 10, .13);
 --cAmber-border: #d4a040;
 --cAmber-text:   #ffd080;

  /* 8. Green */
  --cGreen-bg:     rgba(76, 175, 80, .13);
 --cGreen-border: #81c784;
 --cGreen-text:   #c8e6c9;

  /* 9. Teal */
  --cTeal-bg:     rgba(0, 150, 136, .13);
 --cTeal-border: #4db6ac;
 --cTeal-text:   #b2dfdb;

  /* 10. Gray (無彩色) */
  --cGray-bg:     rgba(158, 158, 158, .13);
 --cGray-border: #9e9e9e;
 --cGray-text:   #f5f5f5;
}
/* ========== INIT ========== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	font-size:16px;
}
body {
	font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	font-stretch: normal;
	letter-spacing:0.05rem;
	line-height: 1.6;
	overflow-x: hidden;
	min-width: 320px;
	font-feature-settings: "palt"
}
a {
	color: var(--accent);
	transition:color 0.2s;
}
a:hover {
	color: var(--lita-red);
}
.ib {
	display: inline-block;
}
.st {
	font-weight:500
}
ul {
	list-style: none;
}
.disnon {
	display:none !important
}
.tx_l {
	text-align:left
}
.tx_c {
	text-align:center
}
.tx_r {
	text-align:right
}
.mb05 {
	margin-bottom:0.5rem !important;
}
.mb1 {
	margin-bottom:1rem !important;
}
.mb2 {
	margin-bottom:2rem !important;
}
.mt0 {
	margin-top:0 !important;
}
.mt05 {
	margin-top:0.5rem !important;
}
.mt1 {
	margin-top:1rem !important;
}
.mt2 {
	margin-top:1rem !important;
}
.mt3 {
	margin-top:3rem !important;
}
.ml1 {
	margin-left:1rem !important;
}
.mk1, .ulMk1 > li {
	text-indent:-1rem;
	padding-left:1rem;
	position:relative;
}
.ulMk1.st {
	font-size:1.1em;
	font-weight:500 !important;
}
.ulMk1 li {
	margin-top: 0.2rem;
}
.ulMk1 li:first-child {
	margin-top: 0;
}
.mk1.kome, .ulMk1.kome > li, .mk1.dot, .ulMk1.dot > li {
	text-indent:0;
	position:relative;
}
.mk1.kome:before, .ulMk1.kome li:before {
	content:"※";
	text-align:center;
	width:1rem;
	position:absolute;
	left:0;
	top:0;
	color:var(--lita-red);
	display:inline-block
}
.mk1.dot:before, .ulMk1.dot li:before {
	content:"・";
	text-align:center;
	width:1rem;
	position:absolute;
	left:0;
	top:0;
	display:inline-block
}

/* ========== HEADER ========== */
#header {
	background: rgba(255, 255, 255, 0.98);
	backdrop-filter: blur(10px);
	border-top: 2px solid var(--danger-gold);
	border-bottom: 1px solid var(--border-light);
	top: 0;
	z-index: 1000;
	position: relative;
}
.headerTop {
	max-width: 1280px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.0rem 2.5rem;
	gap: 2rem;
}
.logoArea {
	position: relative;
	z-index: 2000;
}
.logoArea p a {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	text-decoration: none;
	color: var(--primary-deep);
}
.logoArea img {
	width: 130px;
	height: auto;
}
.logoArea span {
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.02em;
}
/* デスクトップメニュー */
#gnaviArea ul {
	list-style: none;
	display: flex;
	gap: 1.2rem;
	align-items: center;
}
#gnaviArea a {
	text-decoration: none;
	color: var(--text-main);
	font-weight: 400;
	font-size: 0.95rem;
	transition: 0.3s;
	position: relative;
	display: inline-block;
	white-space:nowrap;
}
#gnaviArea a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--black);
	transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#gnaviArea a:hover {
	color: var(--accent);
}
#gnaviArea a:hover::after {
	width: 100%;
}
/* お問合わせボタン */
#gnaviArea a.contact-btn {
	background-color: var(--black);
	color: var(--white);
	padding: 0.3rem 1rem;
	font-weight: 600;
	transition: all 0.3s ease;
	position: relative;
	border:1px solid var(--black);
	text-align:center;
}
#gnaviArea a.contact-btn::after {
	display:none;
}
#gnaviArea a.contact-btn:hover {
	color: var(--black);
	background-color:  var(--white);
}
/* ハンバーガーボタン */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 35px;
	height: 24px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 1050;
	padding: 0;
	margin-left: auto;
}
.hamburger span {
	width: 100%;
	height: 4px;
	background-color: var(--primary-deep);
	transition: 0.3s;
}
.hamburger::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	pointer-events: none;
	transition: background 0.3s;
	z-index: 998;
}
.hamburger.active::before {
	pointer-events: auto;
}
/* ========== PAGE TOP ========== */
#pageTop {
	position: fixed;
	bottom: 1.2rem;
	right: 0.8rem;
	width: 60px;
	height: 60px;
	background: var(--primary-deep);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
	z-index: 2000;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
	border: none;
	padding: 0;
}
#pageTop:hover {
	background-color: var(--hover-blue);
}
#pageTop:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
#pageTop.show {
	opacity: 1;
	visibility: visible;
}
#pageTop::before {
	content: '';
	width: 14px;
	height: 14px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	transform: rotate(-45deg);
	margin-top: 8px;
}
/* ==========  FNAV  ========== */
#fnav {
	text-align: center;
	padding: 1.5rem 0;
	border-bottom: 1px solid #666;
	background: var(--primary-deep);
}
#fnav h2 {
	font-size: 1.2rem;
	text-align: left;
	font-weight: 500;
	margin-bottom: 1rem;
	color: var(--white);
}
#fnav .fnav-inner {
	max-width: 1280px;
	padding: 0 2.5rem;
	margin: 0 auto;
}
#fnav .fnav-link {
	display: flex;
	gap: 1rem;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
}
#fnav .fnav-link > ul {
	width: calc((100% - 2rem) / 3);
	min-width: 200px;
	font-size:0.9rem;
}
/* AIOリンク 調整 */
#aioIndex {
	display:none;
}
#aio #aioIndex {
	display: inherit
}


#fnav .fnav-link ul li {
	text-align: left;
	position: relative;
	color: var(--border);
}
#fnav .fnav-link ul li a {
	padding-left: 1em;
	text-align: left;
	text-decoration: none;
	position: relative;
	color: var(--border);
	display:inline-block;
	transition: color 0.2s;
}
#fnav .fnav-link ul li a:hover {
	color: var(--white);
}
#fnav .fnav-link > ul > li > a::before {
	color: #999999;
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: .45em;
	width: 6px;
	height: 10px;
	background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20141.2%20247.4%22%20fill%3D%22%23999999%22%3E%3Cpolygon%20points%3D%228.7%2C0%200%2C8.8%2053%2C61.9%200%2C114.9%208.7%2C123.7%2070.6%2C61.8%20%22%2F%3E%3C%2Fsvg%3E);
	background-size: 12px 20px;
}
#fnav .fnav-link > ul > li > ul {
	margin-left:0.7rem;
}
#fnav .fnav-link > ul > li > ul > li > a::before {
	color: #999999;
	content: '・';
	display: block;
	position: absolute;
	left: 0.25rem;
}


/* ------  タブレット：768px 未満 → 2列  ------ */
@media (max-width: 767px) {
#fnav .fnav-inner {
	padding: 0 1.5rem;
}
#fnav .fnav-link {
	gap: 1.5rem;
	justify-content: flex-start;
}
#fnav .fnav-link ul {
	width: calc(50% - 0.75rem);
	min-width: 0;
}
}

/* ------  スマートフォン：480px 未満 → 1列  ------ */
@media (max-width: 479px) {
#fnav {
	padding: 1.25rem 0;
}
#fnav .fnav-inner {
	padding: 0 1.25rem;
}
#fnav .fnav-link {
	flex-direction: column;
	gap: 1.25rem;
}
#fnav .fnav-link ul {
	width: 100%;
}
#fnav h2 {
	font-size: 1.1rem;
	margin-bottom: 0.75rem;
}
}
/* ========== FOOTER ========== */
#footer {
	background: var(--primary-deep);
	text-align: center;
}
#footer p {
	display:block;
	padding:2rem 4%
}
#footer small {
	color: #FFF;
	text-align:center;
}
/* ========== DL-TABLE ========== */
dl.dl_table {
border-top: 1px solid #ddd;
margin: auto auto 1rem;
display: grid;
grid-template-columns: 160px 1fr;
}

dl.dl_table dt, dl.dl_table dd {
padding: 1.2rem 0;
border-bottom: 1px solid #ddd;
margin: 0;
align-items: start;
}
dl.dl_table dt{
	font-weight:700;
}
dl.dl_table a {
	text-decoration:none;
	color:var(--text-main);
}
/* ========== 新着情報 ========== */
.news_table {
  border-top: 1px solid #ddd;
  margin: auto auto 1rem;
  display: grid;
  grid-template-columns: 160px 1fr;
}

.news_row {
  display: contents;
  text-decoration: none;
  color: inherit;
}

.news_row:hover .news_dt,
.news_row:hover .news_dd {
  background-color: #f5f5f5;
}

.news_dt, .news_dd {
  border-bottom: 1px solid #ddd;
}

.news_dt {
  padding: 1.2rem 0 1.2rem 0.2rem;
  font-weight: 700;
  display:flex;
  align-items: flex-start;
  white-space:nowrap;
  gap:0.5rem;
}
.news_dt strong {
	font-size:0.9rem;
	display:inline-block;
	padding:0;
	text-align:center;
	width:3.6rem;
}
*[data-category="NEWS"]   { background: #2563eb; color:var(--white); } /* 青 */
*[data-category="ご注意"] { background: #dc2626; color:var(--white); } /* 赤 */
p[data-category="NEWS"],
p[data-category="ご注意"] { display:inline-block; padding: 0 0.5rem}
.news_dd {
  padding: 1.2rem 0.2rem 1.2rem 1rem;
}
@media (max-width: 640px) {
  .news_table {
    grid-template-columns: 1fr;   /* 2カラム → 1カラムに */
  }
  .news_row:hover .news_dt {
    background-color: #f5f5f5;   /* ホバー色をdtにも維持 */
  }
  .news_dt {
    padding: 0.8rem 0.2rem 0.3rem;
    border-bottom: none;          /* dtとddの間の線を消す */
    align-items: center;
    gap: 0.4rem;
  }
  .news_dd {
    padding: 0.3rem 0.2rem 0.8rem 1.2rem;
    border-bottom: 1px solid #ddd; /* 区切り線はddの下だけに集約 */
  }
}
/* ========== TABLE ========== */
div.tbl_basic {}
.tbl_basic table {
	table-layout:fixed;
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 2px;
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
}
.tbl_basic th, .tbl_basic td {
	border-top: 1px solid var(--border);
	border-left: 1px solid var(--border);
	vertical-align: top;
	box-sizing:border-box;
}
.tbl_basic th {
	background-color: #f8fbfb;
	padding:12px;
	font-weight: bold;
	box-sizing:border-box;
	font-feature-settings: "palt";
	letter-spacing:-0.05em;
}
.tbl_basic th p {
	font-weight: bold;
}
.tbl_basic thead th {
	border-bottom: 3px double #CCC;
	padding: 8px 0;
	text-align: center;
	vertical-align: middle;
	width: auto;
}
.tbl_basic tbody th {
	text-align: left;
	vertical-align: middle;
	width: auto;
	vertical-align: middle;
}
.tbl_basic td {
	padding: 12px 10px;
}
/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  padding: 1rem 2.5rem;
  font-weight: 700;
  font-size: 1.2rem;
  transition: 0.3s;
  box-shadow: 0 5px 7px rgba(37, 99, 235, 0.3);
  border: none;
  cursor: pointer;
}
.btn:hover {
  color: #fff;
  background: var(--hover-blue);
  transform: scale(1.05);
}
.btn.back {
  background: #888;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2);
}
.btn.back:hover {
  background: #666;
}
.tLine{
	border-top:1px dotted var(--border); margin-top:1.5rem; padding-top:1.5rem; text-align:center;
}
/* ========== ページタイトルエリア（.breadcrumb）========== */
.breadcrumb {
	background-color: var(--gray-bg);
	border-bottom: 1px solid var(--border);
}
.breadcrumb ul {
	display:flex;
	flex-wrap: nowrap;
	overflow: hidden;
	max-width:1280px;
	margin:auto;
	font-size:0.75rem;
	padding:0.2rem 2.5rem;
}
.breadcrumb ul li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.breadcrumb ul a {
	text-decoration:none;
	color: var(--text-sub);
}
.breadcrumb ul a:hover {
	color: var(--lita-red);
}
.breadcrumb ul li:before {
	content:">";
	margin:0 0.5rem;
}
.breadcrumb ul li:first-child:before {
	content:"";
	display:none;
}
 @media (max-width:640px) {
.breadcrumb {
	display: none;
}
}
/* ========== ページタイトルエリア（.main-bar）========== */
.main-bar {
	position: relative;
	overflow: hidden;
	background-color: var(--white);
}
.main-inner {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 3rem 2.5rem;
	z-index: 1;
}
.main-bar h1 {
	font-size: clamp(1.8rem, 5vw, 3.0rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 1rem;
}
.main-bar h1 .accent {
	font-weight: 700;
}
.main-bar p {
	font-size: 1rem;
 margin-top: .5rem;
}
/* ========== セクションナビ ========== */
.layer-nav {
	border-bottom: 1px solid var(--border);
	background: var(--white);
	overflow-x: auto;
}
.layer-nav-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 2.5rem;
	display: flex;
	gap: 0;
}
.layer-nav a {
	display: block;
	padding: 0.85rem 1.4rem;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--text-sub);
	border-bottom: 3px solid transparent;
	white-space: nowrap;
	transition: color 0.2s, border-color 0.2s;
}
/* ========== セクション共通 ========== */
section {
	margin: auto;
}
section .sec-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 4rem 2.5rem;
	position:relative;
}
/* sectionのnth-childで背景色を自動交互切り替え（グレー→白→グレー…） */
main section:nth-child(odd) {
	background-color: var(--gray-bg);
}
main section:nth-child(even) {
	background-color: var(--white);
}
/* sectionのnth-childで背景色を自動交互切り替え（グレー→白→グレー…） */
main.reverse section:nth-child(odd) {
	background-color: var(--white);
}
main.reverse section:nth-child(even) {
	background-color: var(--gray-bg);
}
section.w1080 .sec-inner {
	max-width: 1080px;
}
h2 {
	font-size: clamp(1.5rem, 4vw, 2.2rem);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.01em;
}
.subtitle {
	text-align:center;
	font-size:2rem;
	margin:1.2rem;
	font-weight:500;
}
section .sec-inner h2 {
	position: relative;
	padding-bottom: 1.2rem;
	margin-bottom: 2rem;
}
section .sec-inner h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 48px;
	height: 3px;
}
/* ========== CONTACT ========== */
section.cta-section {
  text-align: center;
  background-color: var(--cta-bg) !important;
}
section.cta-section .sec-inner .bg{
	padding:2.5rem 0.2rem;
    background-color: var(--white);
}

/* ========== カード共通 ========== */
.card {
	padding: 0.2rem 0.5em 2.5rem ;
	border-bottom: 1px solid var(--border);
}
a.card {
	text-decoration:none;
	transition:all 0.4s;
}
a.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
a.card .card-more  {
  margin-top:0.5rem;
  color: var(--accent);
  font-weight: 700;
  transition:0.2s;
}
a:hover.card .card-more  {
	color: var(--lita-red);
}

.card .badge {
	font-size: 0.8rem;
	font-weight: 700;
}
.card h3 {
	/* font-family: bodyのNoto Sans JPを継承 */
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 700;
	color: var(--text-main); /* 旧: var(--black)→未定義のため修正 */
	border-bottom: 0;
	margin-bottom: 0.5rem;
	padding-bottom: 0;
	line-height: 1.2;
	text-align: left;
}
.card p {
	font-size: 0.975rem;
	color: var(--textGray);
	line-height: 1.85;
	margin: 0;
	text-align: left;
}
.card.bg {
	margin-top: 2.5rem;
	padding: 1.2rem 2rem;
	border: none;
	border-left: 4px solid var(--lita-blue);
}
main section:nth-child(odd) .card.bg {
	background-color: var(--gray-bg);
}
main section:nth-child(even) .card.bg {
	background: var(--white);
}
.card.bg h3 {
	color: var(--lita-blue);
}
/* カードの左ボーダーカラー（3種） */
.cardBlue {
	border-left: 3px solid var(--lita-blue);
	padding-left: 1.2rem;
}
.cardRed {
	border-left: 3px solid var(--lita-red);
	padding-left: 1.2rem;
}
.cardAmber {
	border-left: 3px solid var(--lita-amber);
	padding-left: 1.2rem;
}
.grid-3 .card.cardBlue {
	padding:1.2rem 1.5rem;
	background: rgba(28, 41, 117, .08);
	border-left: 3px solid #5a7ae0;
	border-bottom:0;
}
.grid-3 .card.cardRed {
	padding:1.2rem 1.5rem;
	background: rgba(200, 51, 26, .08);
	border-left: 3px solid #e06050;
	border-bottom:0;
}
.grid-3 .card.cardAmber {
	padding:1.2rem 1.5rem;
	background: rgba(212, 134, 10, .08);
	border-left: 3px solid #d4a040;
	border-bottom:0;
}
/* ========== コールアウト ========== */
.callout {
	border-left: 3px solid var(--lita-red);
	background: var(--white);
	padding: 1.2rem 1.5rem;
	margin: 2rem 0;
}
.callout h3 {
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lita-red);
 margin-bottom: .5rem;
}
.callout p {
 font-size: .925rem;
	line-height: 1.7;
	color: var(--text-main);
}
/* ========== グリッド（横2列）========== */
.grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(1, 1fr); /* スマホは1列 */
}
@media (min-width: 640px) {
.grid {
	grid-template-columns: repeat(2, 1fr); /* 480px以上で2列 */
}
}
/* ========== 3列グリッド（横3列）========== */
.grid-3 {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(1, 1fr);
}
 @media (min-width: 640px) {
.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}
}

/* ========== カードレスポンシブ ========== */
@media (max-width: 768px) {
.grid {
	gap: 1.5rem;
}
}
@media (max-width: 640px) {
.card, .grid .card {
	padding: 1.2rem 0;
}
.card.bgGray {
	padding:1.2rem;
	margin-top:1.2rem;
}
.grid .card, .grid-3 .card {
	padding: 1.2rem 0.2rem;
}
.main-inner, section .sec-inner {
	padding: 2rem 1.2rem;
}
}
/* ========== SCREENSHOT（共通レイアウト） ========== */
.screenshot {
	background: transparent !important;
}

.screenshot .scr-inner {
	border-radius:15px;
	display: flex;
	background: var(--screenshot-bg);
	overflow: hidden;
	border: 1px solid var(--screenshot-border);
}
.screenshot .scr-inner > * {
	width:50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.screenshot .scr-inner > .txtArea {
	flex: 1;
	padding: 1.5rem 2rem;
	flex-direction: column;
	gap: 0.8rem;
}
.screenshot .scr-inner > .txtArea p {
	font-size: 1.1rem;
	line-height: 1.4;
	margin-bottom: 0;
	display: block;
	width: 100%;
}
.screenshot .scr-inner > .imgArea {
	flex: 1.2;
	padding: 0;
	background-color: #0c112b;
}
.screenshot .scr-inner > .imgArea img {
	width: 100%;
	height:auto;
	display: block;
	vertical-align: bottom;
}
.screenshot h2 {
	display: block;
	width: 100%;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 700;
	color: var(--catchphrase-color);
	margin-bottom: 0;
	line-height: 1.2;
}
.screenshot h2::after {
	display: none;
}

/* ========== INPUT ========== */
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], textarea {
	border:1px solid var(--border);
	padding:0.8rem;
	font-size:1rem;
	font-family:inherit;
	width:100%; 
	vertical-align:bottom;
}
input#name{ max-width:420px;}
input[type="tel"],
input[type="date"]{
	 max-width:200px;
}

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
	font-family: inherit;
	font-size: 1rem;
}
/* 必須マーク */
.required-mark {
	color: #d9534f;
	font-weight: bold;
	font-size: 1.2em;
	margin-left: 2px;
}
/* 注意メッセージ */
.notice {
	background-color: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	padding: 12px;
	margin-bottom: 1.5rem;
	color: #856404;
	font-size: 0.95rem;
	line-height: 1.6;
}
select {
	cursor: pointer;
	box-sizing: border-box;
	font-family:inherit;
	border:0;
}
.select {
	display:inline-block;
	position:relative;
	border:1px solid var(--border);
}
.select select {
	padding: 0.8rem 35px 0.8rem 0.8rem;
	background-color:white;
	box-sizing:border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.select:after {
	content: '▼';
	display: inline-block;
	width: 1em;
	height: 1em;
	position: absolute;
	right: 20px;
	top: 50%;
	transform:translateY(-50%);
	pointer-events: none;
	line-height:1;
}
.checkbox-group, .radio-group {
	display: flex;
    flex-wrap: wrap;
	gap: 1.5rem;
}
input[type="checkbox"], input[type="radio"] {
	display: none;
}
input[type="checkbox"] + label, 
input[type="radio"] + label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	padding: 10px 10px 10px 30px;
	line-height: 1.2;
}
input[type="checkbox"] + label:before, 
input[type="radio"] + label:before {
	position: absolute;
	content: "";
	top: 50%;
	left: 5px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #FFF;
	border:4px solid #CCC;
	box-sizing:border-box;
}
input[type="radio"] + label:before {
	border-radius:50%;
}
input[type="checkbox"]:checked + label, 
input[type="radio"]:checked + label {
	color:var(--lita-blue)
}
input[type="checkbox"]:checked + label:after, 
input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: 11px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #000;
}
input[type="radio"] + label:before, 
input[type="radio"]:checked + label:after {
	border-radius:50%;
}
#captchaBox{
	display:inline-block;
	border:1px solid var(--border); 
	border-radius:10px; 
	background-color:var(--white); 
	padding:1rem; 
}
#captchaBox span{
	font-size:1.2em; 
	font-weight:bold; 
	letter-spacing:2px;
}
/* ====== RULE NO BADGE ====== */
.rule-badge {
	background: var(--lita-blue);
	color: var(--white);
	font-family: 'JetBrains Mono', monospace;
	font-weight: 800;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 1.2rem;
}
/* ========== ルール見出しカード（トップ固有） ========== */
.rule-header {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}
.rule-header .rule-num {
	flex-shrink: 0;
	margin-bottom: 0;
 margin-top: .15rem;
}
.rule-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: .08em;
	width: 2rem;
	height: 2rem;
	color: var(--white);
	border-radius: 50%;
 margin-bottom: .8rem;
}
.rule-header-body h3 {
	font-weight: 700;
	color: var(--txblack);
 margin-bottom: .3rem;
	line-height: 1.3;
}
.rule-header-body p {
 font-size: .9rem;
	color: var(--text-sub);
	margin: 0;
	line-height: 1.6;
}
/* ========== コードブロック ========== */
.code-wrap {
	margin: 0.5rem 0 0;
}
.code-label {
 font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted-dark);
 padding: .55rem 1rem;
	background: #252c3a;
	border-top: 1px solid var(--dark-border);
	border-left: 1px solid var(--dark-border);
	border-right: 1px solid var(--dark-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.code-label span {
	color: var(--lita-amber);
}
pre {
	background: var(--code-bg);
	border: 1px solid var(--dark-border);
	padding: 1.5rem;
	overflow-x: auto;
	font-family: var(--mono);
 font-size: .8rem;
	line-height: 1.75;
	margin: 0;
	color: #c9d1d9;
}
code {
	font-family: var(--mono);
	font-size: .85em;
	padding: .1em .4em;
	border-radius: 3px;
}
pre code {
	background: none;
	padding: 0;
	color: inherit;
	font-size: inherit;
}
/* シンタックスカラー */
.hl-tag {
	color: #7eb3e8;
}
.hl-attr {
	color: #c8a469;
}
.hl-val {
	color: #89c788;
}
.hl-cmt {
	color: #4a5568;
	font-style: italic;
}
.hl-key {
	color: #c8a469;
}
.hl-str {
	color: #89c788;
}
.hl-num {
	color: #d48fcc;
}
.hl-punct {
	color: #8899aa;
}
/* ===== 実表示エリア ===== */

.code-preview {
	background: var(--code-bg);
	border: 1px solid var(--dark-border);
	color: #c9d1d9;
	font-size:0.9rem
}
.preview-block {
 padding: .6rem 1rem;
 margin-bottom: .5rem;
}
.preview-header {
 padding: .6rem 1rem;
	margin-bottom: 0;
	border-bottom:1px solid var(--border-dark);
	display:flex;
	justify-content: space-between;
	align-items:center;
}
.preview-hero {
	padding: 1.5rem 1rem;
 margin-bottom: .5rem;
	border-bottom:1px solid var(--border-dark);
}
.preview-gnav ul {
	display:flex;
	gap:1rem;
}
.preview-h1 {
	display:flex;
	gap:0.5rem;
	align-items:center;
	font-size:1.35rem;
	font-weight:500;
}
.preview-h2 {
	font-size:1.8rem;
	font-weight:500;
	border-bottom: 2px solid var(--border);
	margin-bottom:1.5rem;
}
.preview-h3 {
	font-size:1.35rem;
	font-weight:500;
	margin-bottom:0.45rem;
}
.preview-block dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	margin: 0;
	font-size:0.9rem;
	line-height: 1.7;
}
.preview-block dt {
	display: flex;
	justify-content: space-between;
	white-space: nowrap;
	padding-right: .5em;
}
.preview-block dd {
	margin: 0;
}
.link {
	text-decoration: underline;
}
.linkRed {
	color: var(--cRed-text);
	text-decoration: underline;
}
.preview-footer {
	border-top:1px solid var(--border-dark);
	text-align:center;
}
/* カラーバリアント */
.cBlue, .preBlue {
	color: var(--cBlue-text);
}
.cAmber, .cAmber a, .preAmber {
	color: var(--cAmber-text);
}
.cRed, .cRed a, .preRed {
	color: var(--cRed-text);
}
/* インラインボーダー（代表者ブロック内） */
.preLAmber {
	border-left: 3px solid var(--cAmber-border);
padding-left: .5rem;
}
.preLRed {
	border-left: 3px solid var(--cRed-border);
padding-left: .5rem;
}
/* ===== 凡例バー ===== */
.code-legend {
	display: flex;
	align-items: center;
 gap: .25rem;
 padding: .45rem 1rem;
	background: #1a2030;
	border-right: 1px solid var(--dark-border);
	border-left:  1px solid var(--dark-border);
	font-family: var(--mono);
 font-size: .8rem;
	letter-spacing: .08em;
	color: #8a8f9a;
}
.cl-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}
.cl-dotBlue {
	background: var(--cBlue-border);
}
.cl-dotRed {
	background: var(--cRed-border);
}
.cl-dotAmber {
	background: var(--cAmber-border);
}
/* ===== コード行ハイライト（pre 内） ===== */
pre {
	white-space: pre-wrap;
}
pre .hl-Blue, pre .hl-Indigo, pre .hl-Purple, pre .hl-Pink, pre .hl-Red, pre .hl-Orange, pre .hl-Amber, pre .hl-Green, pre .hl-Teal, pre .hl-Gray {
	display: block;
	border-left: 3px solid transparent;
 padding-left: .6rem;
 margin-left: -.6rem;
}
/* 1. Blue (起点: 青) */
pre .hl-Blue {
	background: var(--cBlue-bg);
	border-left-color: var(--cBlue-border);
	color: var(--cBlue-text);
}
/* 2. Indigo (青紫) */
pre .hl-Indigo {
	background: var(--cIndigo-bg);
	border-left-color: var(--cIndigo-border);
	color: var(--cIndigo-text);
}
/* 3. Purple (紫) */
pre .hl-Purple {
	background: var(--cPurple-bg);
	border-left-color: var(--cPurple-border);
	color: var(--cPurple-text);
}
/* 4. Pink (赤紫/マゼンタ) */
pre .hl-Pink {
	background: var(--cPink-bg);
	border-left-color: var(--cPink-border);
	color: var(--cPink-text);
}
/* 5. Red (赤) */
pre .hl-Red {
	background: var(--cRed-bg);
	border-left-color: var(--cRed-border);
	color: var(--cRed-text);
}
/* 6. Orange (橙) */
pre .hl-Orange {
	background: var(--cOrange-bg);
	border-left-color: var(--cOrange-border);
	color: var(--cOrange-text);
}
/* 7. Amber (琥珀/黄) */
pre .hl-Amber {
	background: var(--cAmber-bg);
	border-left-color: var(--cAmber-border);
	color: var(--cAmber-text);
}
/* 8. Green (緑) */
pre .hl-Green {
	background: var(--cGreen-bg);
	border-left-color: var(--cGreen-border);
	color: var(--cGreen-text);
}
/* 9. Teal (青緑/シアン) */
pre .hl-Teal {
	background: var(--cTeal-bg);
	border-left-color: var(--cTeal-border);
	color: var(--cTeal-text);
}
/* 10. Gray (無彩色) */
pre .hl-Gray {
	background: var(--cGray-bg);
	border-left-color: var(--cGray-border);
	color: var(--cGray-text);
}
/* ===== トグルボタン ===== */
.view-toggle {
	margin-left: auto;
	padding: .2em .8em;
	border: 1px solid currentColor;
	border-radius: 3px;
	background: transparent;
 font-size: .75rem;
	color: inherit;
	opacity: .7;
	cursor: pointer;
}
.view-toggle:hover {
	opacity: 1;
}
/* ========== FAQカード ========== */
.faq-card {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--border-light);
}
.faq-card:last-child {
	border-bottom: none;
}
.faq-card h3 {
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 700;
	color: var(--lita-blue);
 margin-bottom: .6rem;
}
.faq-card h3::before {
	content: 'Q. ';
	font-family: var(--mono);
	color: var(--lita-red);
	font-weight: 700;
}
.faq-card p {
	padding-left:2.75rem;
	position:relative;
}
.faq-card p::before {
	position:absolute;
	top:0;
	left:0;
	font-size: 1.5rem;
	transform:translateY(-0.25rem);
	content: 'A. ';
	font-family: var(--mono);
	color: var(--lita-amber);
	font-weight: 700;
}
/* ===== 実表示エリア ===== */
/* ========== ▼▼▼サマリーセクション ========== */
.summary-section {
	background: var(--dark) !important;
	color: #f5f3ee;
}
.summary-section .sec-inner {
	max-width: 1280px;
}
.summary-section h2 {
	color: #f5f3ee;
}
.summary-section > .sec-inner > p {
	color: var(--white);
}
/* プログレスバー */
.summary-section .summary-progress-wrap {
	margin: 1.5rem 0;
}
.summary-section .summary-progress-bar {
	position: relative;
	background: #515151;
	border-radius: 8px;
	height: 2rem;
	overflow: hidden;
}
.summary-section .summary-progress-fill {
	position: absolute;
	inset: 0;
	height: 100%;
	border-radius: 8px;
	width: 0%;
	transition: width 0.3s ease;
}
.summary-section .summary-progress-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #ffffff;
	margin: 0;
	z-index: 1;
	letter-spacing: 0.05em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* チェックカードグリッド */
.summary-section .summary-check-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
.summary-section .summary-check-grid {
	grid-template-columns: 1fr;
}
}
.summary-section .summary-check-card {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	background: #515151;
	border: 1px solid #515151;
	padding: 1rem 1.25rem;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}
.summary-section .summary-check-card:hover {
	border-color: #9ca3af;
}
/* チェックボックス */
.summary-section .summary-check-box {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border: 3px solid #CCC;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.5rem;
	transition: background 0.15s, border-color 0.15s;
}
.summary-section .summary-check-mark {
	display: none;
	width: 12px;
	height: 12px;
}
.summary-section .summary-check-card.is-done .summary-check-mark {
	display: block;
}
/* カード本文 */
.summary-section .summary-check-body {
	flex: 1;
}
.summary-section h3 {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--white);
	margin: 0 0 0.25rem;
}
.summary-section p {
	color: var(--white);
	line-height: 1.6;
	margin: 0;
}


/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
.logoArea img {
	width: 90px;
}
.logoArea span {
}
.headerTop {
	padding: 1.0rem 1.2rem;
}
.hamburger {
	display: flex;
	z-index: 1050;
}
#gnaviArea {
	position: fixed;
	top: 0;
	right: -100%;
	width: 80%;
	max-width: 300px;
	height: 100vh;
	background: white;
	margin-top: 88px;
	transition: right 0.4s ease;
	z-index: 999;
	overflow-y: auto;
}
#gnaviArea.open {
	right: 0;
	border-left: 1px solid var(--border-card);
}
#gnaviArea ul {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}
#gnaviArea ul li {
	border-top: 1px solid var(--border-card);
	width: 100%;
}
#gnaviArea a {
	font-size: 1.1rem;
	width: 100%;
	padding: 0.8rem 1.2rem;
}
#gnaviArea a::after {
	bottom: 0;
	height: 2px;
}
.contact-item {
	padding: 0.8rem 1.2rem;
}
.hamburger.active span:nth-child(1) {
	transform: translateY(10px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hamburger.active span:nth-child(3) {
	transform: translateY(-10px) rotate(-45deg);
}
.screenshot .scr-inner {
	flex-direction: column;
}
.screenshot .scr-inner > *{
	width:100%
}
h2 {
	font-size: 2rem;
}
h2.catchphrase {
}
.cta-section h2 {
	font-size: 1.3rem;
}
.footer-nav ul {
	gap: 1.5rem;
}
.logo-flex .plus {
	font-size: 4rem;
}
#risks .grid {
	grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.card.bg {
	margin-top: 1.2rem;
	padding: 1rem;
}
}
@media (max-width: 480px) {
.headerTop {
	padding: 1rem 3%;
}
h2 {
	font-size: 1.5rem;
}
.grid {
	grid-template-columns: 1fr;
}
.card {
	padding: 0.8rem 1.5rem;
}
.card.bg {
	margin-top: 1.2rem;
	padding: 1rem;
}
}
/*----------------------------------------
 ■PAGER
----------------------------------------*/
.pager {
	display:flex;
	justify-content:center;
	align-items:center;
	height:25px;
	line-height:25px;
}
.pager a, .pager span {
	border:1px solid var(--lita-blue);
	box-sizing:border-box;
	display:inline-block;
	text-align:center;
	height:24px;
	line-height:22px;
	min-width:24px;
	margin:0 2px;
	padding:0 4px;
	text-decoration:none;
}
.pager a {
	background-color: #FFF;
	color:var(--lita-blue);
}
.pager span {
	background-color: var(--lita-blue);
	font-weight:bold;
	color:#FFF;
}
.pager a:hover {
	background-color: #c01649;
	border:1px solid #c01649;
	text-decoration:none;
	color:#FFF;
}