/*-----------------------------------------------------------------------/
	common
/*----------------------------------------------------------------------*/
:root {
	--black: #000;
	--gray: #222;
	--light-gray: #f5f5f7;
	--white: #ffffff;
	--yellow: #FFD81F;
	--yellow-deep: #d5a707;
	--yellow-trans: rgba(255,221,3,0.25);
	--radius: 22px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
	color: var(--black); background: var(--white); line-height: 1.5;
	-webkit-font-smoothing: antialiased; letter-spacing: 0.01em;
	font-size:16px;
}
.wrap { max-width: 1024px; margin: 0 auto; padding: 0 24px; }
a:visited{}

/* NAV */
nav {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,0.8);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav-inner { max-width: 1024px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.logo { font-weight: 600; letter-spacing: 0.02em; padding: 10px 0;}
.logo span { color: var(--yellow-deep); }
.nav-cta{
	background: #C72830 url("https://www.anpi-system.net/_cmn/icn_trial.png") no-repeat 15px 14px /23px auto;
	border-bottom: 2px solid #920012;
	border-radius: 100px;
	border-style: none none solid;
	color: #fff;
	font-size:16px;
	display: block;
	font-weight: bold;
	padding:0.5em 1.2em 0.5em 3em;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 -1px 0 #920012;
	letter-spacing: -1px;
}
.nav-cta:hover{
	border-bottom: 1px solid #920012;
	color: #fff;
	padding:0.6em 1.2em 0.4em 3em;
	background: #A81222 url("https://www.anpi-system.net/_cmn/icn_trial.png") no-repeat 15px 16px /23px auto;
}

/* HERO */
.hero { text-align: left; padding: 88px 0 88px 8%; background:var(--yellow); max-width:100%;
	background-image: url(smartwatch.webp);
	background-position: right center;
	background-position-x: 99%;
/*	background-position-y: 100.5%;*/
	background-size: 25vw;
	background-repeat: no-repeat;
	padding-left: 10%;
	min-width: 960px;
}
.hero h1 { font-size: clamp(40px, 7vw, 80px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 26px; color: var(--black);  margin: 0 0 0.6em; }
.hero .sub { font-size: clamp(19px, 2.8vw, 30px); color: var(--black); font-weight: 600; line-height: 1.1; max-width: 660px; margin: 0 0 18px; letter-spacing: -0.01em; }
.hero .sub .light { color: var(--gray); font-weight: 500; display:block; font-size: 0.78em; margin-top: 12px; }
.hero .patent {}
.hero .patent ul {  margin: 0;}
.hero .patent ul li { display:inline-block; font-size: 14px; font-weight: 600; color: var(--black); background: var(--white); padding: 7px 16px; border-radius: 980px; margin: 0 3px 2px 0;}
.hero .brand { font-size: clamp(15px, 2vw, 19px); color: var(--gray); margin: 28px 0 40px; }
.hero .brand strong { color: var(--black); font-weight: 600; }
.hero .brand img{ width:360px; }

.cta-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;}
.hero .cta-row {justify-content: flex-start; }
a.btn { display: inline-block; text-decoration: none; font-size: 17px; font-weight: 500; padding: 13px 28px; border-radius: 980px; transition: all .2s; cursor: pointer; border: none; }
a.btn:visited{color: #fff;}

a.btn-primary{
	background: #C72830 url("https://www.anpi-system.net/_cmn/icn_trial.png") no-repeat 18px 20px /23px auto;
	border-bottom: 2px solid #920012;
	border-radius: 100px;
	border-style: none none solid;
	color: #fff !important;
	display: block;
	font-weight: bold;
	padding:1.2em 1.5em 1.1em 3em;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 -1px 0 #920012;
	letter-spacing: -1px;
	width: 14em;  line-height: 1;
}
a.btn-primary:hover{
	border-bottom: 1px solid #920012;
	color: #fff !important;
	padding:1.3em 1.5em 1.0em 3em;
	background: #A81222 url("https://www.anpi-system.net/_cmn/icn_trial.png") no-repeat 18px 22px /23px auto;
}
a.btn-secondary  {
	background: #D96831 url("https://www.anpi-system.net/_cmn/icn_shiryo.png") no-repeat 18px 16px;
	border-bottom: 2px solid #B3431C;
	border-bottom-style: solid;
	border-radius: 100px;
	border-style: none none solid;
	color: #fff !important;
	display: block;
	font-weight: bold;
	padding:1.2em 1.5em 1.1em 3em;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 -1px 0 #B3431C;
	width: 14em;  line-height: 1;
}
a.btn-secondary:hover {
		border-bottom: 1px solid #B3431C;
	color: #fff !important;
	padding:1.3em 1.5em 1.0em 3em;
	background: #CC5225 url("https://www.anpi-system.net/_cmn/icn_shiryo.png") no-repeat 18px 18px;
	}

.video-stage { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 16/9; box-shadow: 0 30px 80px rgba(0,0,0,0.18); margin-top: 56px; }
.video-stage video, .video-stage iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.video-cap { text-align:center; font-size: 13px; color: var(--gray); margin-top: 16px; }

section { padding: 100px 0 !important; }
.section-head { color: var(--black); text-align: center; font-size: clamp(32px, 5vw, 56px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 28px; }
.lead { text-align: center; /*font-size: clamp(17px, 2.4vw, 21px); */font-size:16px;color: var(--gray); max-width: 640px; margin: 0 auto 56px; line-height: 1.7; }
.lead strong { color: var(--black); font-weight: 600; }


/**/
.hero_u{
	background-color: var(--yellow-trans);
	padding: 2em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.hero_u h3{
	background-color: var(--yellow);
	padding: 1.2em 32px;
	font-size:1.1rem;
	font-weight:800;
	border: none;
	border-radius: var(--radius);
	margin: 0 1em 0 0;
	text-shadow: none;
}
.hero_u txtB{
}
.hero_u p{
	font-weight:800;
	line-height:1.4;
}
.hero_u p.mtxt{
	font-size: 1.1em;
}
.hero_u p.tno{
	/*	font-weight:500;*/
	margin-top: 0.3em;
	font-size: 0.8em;
}
.hero_u p br{
	display:none;
}
.hero_u p.tno span{
	display:inline-block;
	margin-right:2em;
}



/* CARDS */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;   margin-bottom: 5em;}
.card { background: var(--light-gray); border-radius: var(--radius); padding: 44px 32px; text-align: center; }
.card .icon { width: 56px; height: 56px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; }
.card .icon svg { width: 100%; height: 100%; }
.card h3 { font-size: 22px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.01em;   border: none;}
.card p { font-size: 16px; color: var(--gray); line-height: 1.65; }

/* SECTION 2 realize */
section.realize {/* background: var(--light-gray);*//*   padding-bottom: 0 !important;*/}
.realize .card {/* background: var(--white); */}
section.realize .cards-3 {	margin-bottom: 2em;}

/* SECTION 3 outcome */
.outcome {/* background: var(--light-gray); */  padding-bottom: 50px !important;}
.outcome .mini-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 760px; margin: 0 auto; }
.mini { background: var(--light-gray); border-radius: 18px; padding: 30px 20px; text-align: center; }
.mini .num { font-size: 16px; font-weight: 700; color: var(--yellow-deep); letter-spacing: .08em; margin-bottom: 12px; }
.mini p { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }

/* REASONS 4 */
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.reason { text-align: center; padding: 40px 20px; border-radius: var(--radius); background:var(--yellow-trans); }
.reason .icon { width: 48px; height: 48px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; color: var(--black); }
.reason .icon svg { width: 100%; height: 100%; }
.reason h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 6px;   border: none;}
.reason p { font-size: 13px; color: var(--gray); line-height: 1.4; }

/* SECTION 6 story */
.storywrap {background:var(--yellow-trans);}


/* SIGNAGE */
.signage{background:var(--yellow-trans);margin: 4.5em 0 0;}

.panchor{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 10px;
}
.panchor a{
	font-weight: 800;
	color: var(--black) !important;
	background: var(--yellow);
	padding: 5px 12px;
	border-radius: 980px;
	margin: 0 6px 6px;
	box-shadow: 0 2px 0 var(--yellow-deep);
}
.panchor a:hover{
	color: var(--black) !important;
}


.signage .intro { text-align: center; font-size: clamp(17px, 2.4vw, 21px); color: var(--gray); max-width: 620px; margin: 0 auto 40px; line-height: 1.7; }
.accordion {/* max-width: 720px; */margin: 0 auto; background: var(--white); border-radius: var(--radius); overflow: hidden; }
.accordion summary { list-style: none; cursor: pointer; padding: 24px 32px; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .chev { transition: transform .3s; color: var(--gray); }
.accordion[open] summary .chev { transform: rotate(180deg); }
.accordion .body { padding: 0 32px 32px; }
.fac-group { margin-bottom: 22px; }
.fac-listblk .check{font-size:0.72em;  text-align: right;}
.fac-group h4 { font-size: 18px; font-weight: 800; color: var(--yellow-deep); letter-spacing: 0.04em; margin-bottom: 10px;   text-shadow: 1px 1px 0 rgb(255, 255, 255);}
.fac-group ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0;}
.fac-group li { font-size: 12px; color: var(--black); background: var(--light-gray); padding: 6px 12px 6px 6px; border-radius: 980px; display: inline-block; font-weight: 500; }
.fac-group li a { font-size: 16px; color:  var(--black); background: var(--yellow); padding: 6px 12px; border-radius: 980px; font-weight: 400; text-decoration:none;  display: inline-block; margin-right: 6px;  box-shadow: 0 2px 0 var(--yellow-deep);}
.fac-group li a:hover { background: var(--yellow-deep);}
.fac-listblk{}
.fac-group li span{  white-space: nowrap;}


/* STORIES */
.stories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.story { border-radius: var(--radius); overflow: hidden; background: var(--white); }
.story-thumb { aspect-ratio: 3/2; background: #ddd; position: relative; overflow: hidden; }
.story-thumb video, .story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-thumb .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.story-thumb .play svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.3)); }
.story-body { padding: 32px; }
.story-body .period { display: inline-block; font-size: 13px; font-weight: 600; color: var(--black); background: var(--yellow); padding: 5px 12px; border-radius: 980px; margin-bottom: 16px; }
.story-body h3 { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 12px;   border: none;}
.story-body p { font-size: 16px; color: var(--gray); line-height: 1.6; }

/* WORRIES */
.worries { background: var(--white); }
.check-list { max-width: 620px; margin: 0 auto 48px; }
.check-item { display: flex; align-items: center; gap: 16px;  background: var(--light-gray); border-radius: 16px; padding: 20px 24px; margin-bottom: 14px; font-size: 16px; font-weight: 500; }
.check-item .mark { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow); display: flex; align-items: center; justify-content: center; }
.check-item .mark svg { width: 16px; height: 16px; }
.worries .resolve { text-align: center; font-size: clamp(20px, 3vw, 28px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.5; max-width: 620px; margin: 0 auto; }
.worries .resolve .hl { color: var(--yellow-deep); }

/* FINAL */
.final { background: var(--yellow); color: var(--black); text-align: center; }
.final h2 { font-size: clamp(30px, 5vw, 54px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 24px; max-width: 760px; margin-left: auto; margin-right: auto;   color: var(--black);  text-shadow: 1px 1px 0px rgba(255,255,255,0.4);}
.final p {/* font-size: clamp(17px, 2.4vw, 22px);*/ color: var(--black); line-height: 1.7; max-width: 560px; margin: 0 auto 16px; }
.final .restate { color: var(--black); font-weight: 600; margin-bottom: 44px; }

footer { padding: 40px 0; text-align: center; font-size: 13px; color: var(--gray); }
footer .logo { font-size: 15px; margin-bottom: 8px; font-weight: 600; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
p.reveal.in{text-align:left;}

@media (min-width: 1600px) {
	.hero {
		background-size: 20%;
		background-position-x: 90%;
	}
}
/*@media (max-width: 1410px) {
	.hero {
		background-size: 25vw;
		background-position: right 102%;
	}
}*/
@media (max-width: 767px) {
	.logo img{max-width:40vw;}
	.nav-cta{  font-size: 14px;  padding: 0.5em 1em 0.5em 3em; background-position: 13px 12px;	background-size: 18px;}
	.cards-3, .mini-cards, .stories { grid-template-columns: 1fr !important; }
	.cards-4 { grid-template-columns: repeat(2, 1fr); }
	section { padding: 72px 0; }
	.hero { padding: 100px 10px  50px;	min-width: auto;}

	.hero h1{  font-size: clamp(32px, 6vw, 64px); text-align: center;    font-size: 7.1vw;}
	.hero .sub{ text-align: center;  font-size: 5vw;    margin: 0 0 1em;}
	.section-head{  font-size: clamp(27px, 4.2vw, 46px);}
	.cta-row {	justify-content:center;  gap: 8px; width:60%;}
	
	.hero {
		background-size: 44%;
		background-position: 101% 110%;
	}

	.hero .brand {
		margin-bottom: 20px;
	}
	a.btn-primary,
	a.btn-secondary{
		font-size: 0.94rem;
		width: 13em;
		padding: 1.2em 0.5em 1.1em 2em;
	}
	a.btn-primary{background-size:18px auto;}
	.hero .brand img{
		width:50vw;
		max-width:200px;
	}
	.hero .patent ul {/* text-align: center;margin-bottom:2em;*/}
	.hero .patent ul li{/*display: table;font-size: 0.6rem;*/}

	.hero_u{
		padding: 2em 10%;
	}
	.hero_u ul li{
		padding: 0.8em 32px;
		font-size:1rem;
	}
	.hero_u h3{
		margin: 0 0 0.5em ;
	}
/*	.hero_u p br{
		display:inline;
	}
	.txtB{
		justify-content: center;
		flex-wrap: wrap;
		display: flex;
	}
	.hero_u p.tno{
		flex-wrap: wrap;
		display: flex;
	}*/

	
	.fac-group h4{ margin-left: 0.3em; margin-bottom: 8px;}
	.accordion .body.fac-listblk{  padding: 0 14px 20px;}
	.fac-group li {padding:0;display: flex;	align-items: center; background: none;}
	.fac-group li a{font-size: 14px; margin-right:4px; white-space: nowrap;}
	.fac-group li span {font-size: 11px;    white-space: normal;line-hegiht:1.2;}
}


/*@media (max-width: 800px) {
	.hero {
		background-size: 35vw;
		background-position: right 102%;
	}
}*/