/* ==========================================================================
   access.css
   「創報堂」ACCESS特設ページ（/access/）専用スタイル
   サイト共通の style.css を土台に、このページだけのビジュアルを追加する。
   ========================================================================== */

:root{
	--ac-navy:#0d263f;
	--ac-navy-soft:#486581;
	--ac-teal:#31aa97;
	--ac-teal-dark:#1f7d6f;
	--ac-orange:#f2711c;
	--ac-orange-dark:#d9560a;
	--ac-bg-soft:#f6f9fb;
	--ac-red:#c0392b;
	--ac-green:#1e7145;
	--ac-blue:#2f6fed;
	--ac-line:#e3ebf0;
}

.p-access{ background:#fff; }

.p-access section{ position:relative; }

/* ---------- 共通見出し ---------- */
.p-access .c-headline--9{
	text-align:center;
	margin-bottom:40px;
	font-weight:bold;
}
.p-access .c-headline--9 span.-jp{
	font-size:1.8em;
	color:var(--ac-navy);
	display:block;
}
.p-access .c-headline--9 span.-en{
	font-size:1em;
	letter-spacing:.15em;
	color:var(--ac-teal);
	display:block;
	margin-bottom:8px;
}
@media screen and (max-width:899px){
	.p-access .c-headline--9 span.-jp{ font-size:1.3em; }
}

/* ---------- HERO ---------- */
.p-access__hero{
	background:linear-gradient(180deg,var(--ac-bg-soft) 0%, #ffffff 100%);
	padding:60px 20px 70px;
}
.p-access__hero__inner{
	max-width:1200px;
	margin:0 auto;
	display:grid;
	grid-template-columns:.52fr .48fr;
	gap:40px;
	align-items:center;
}
@media screen and (max-width:899px){
	.p-access__hero{ padding:40px 15px 40px; }
	.p-access__hero__inner{ grid-template-columns:1fr; gap:30px; }
}
.p-access__hero__tag{
	display:inline-flex;
	align-items:center;
	gap:6px;
	background:#fff;
	border:1px solid var(--ac-teal);
	color:var(--ac-teal-dark);
	font-weight:bold;
	font-size:.85em;
	padding:6px 16px;
	border-radius:30px;
	margin-bottom:20px;
}
.p-access__hero h1{
	font-size:2.6em;
	line-height:1.4;
	font-weight:bold;
	color:var(--ac-navy);
	margin-bottom:18px;
	font-feature-settings:"palt";
}
.p-access__hero h1 strong{
	color:var(--ac-teal-dark);
}
.p-access__hero__sub{
	font-size:1.15em;
	font-weight:bold;
	color:var(--ac-navy-soft);
	margin-bottom:20px;
	line-height:1.7;
}
.p-access__hero__txt{
	color:var(--ac-navy-soft);
	line-height:1.9;
	margin-bottom:30px;
}
@media screen and (max-width:899px){
	.p-access__hero h1{ font-size:1.7em; }
	.p-access__hero__sub{ font-size:1em; }
}
.p-access__hero__btns{
	display:flex;
	gap:16px;
	flex-wrap:wrap;
}
.p-access-btn{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-weight:bold;
	padding:16px 30px;
	border-radius:8px;
	transition:all .25s;
	font-size:1.02em;
}
.p-access-btn--primary{
	background:linear-gradient(135deg,var(--ac-orange) 0%, var(--ac-orange-dark) 100%);
	color:#fff;
	box-shadow:0 8px 20px rgba(242,113,28,.35);
}
.p-access-btn--primary:hover{
	transform:translateY(-2px);
	box-shadow:0 10px 24px rgba(242,113,28,.45);
	opacity:1;
}
.p-access-btn--outline{
	background:#fff;
	color:var(--ac-navy);
	border:2px solid var(--ac-navy);
}
.p-access-btn--outline:hover{
	background:var(--ac-navy);
	color:#fff;
	opacity:1;
}
@media screen and (max-width:899px){
	.p-access-btn{ padding:13px 22px; font-size:.95em; width:100%; justify-content:center; }
}

/* ---------- HERO ILLUSTRATION (CSSのみで再現) ---------- */
.p-access__illust{
	position:relative;
	width:100%;
	max-width:480px;
	margin:0 auto;
	aspect-ratio:1/.82;
}
.p-access__laptop{
	position:absolute;
	left:8%;
	top:6%;
	width:78%;
}
.p-access__laptop__screen{
	background:#1c2b3a;
	border-radius:10px 10px 0 0;
	padding:10px 10px 14px;
	box-shadow:0 20px 40px rgba(13,38,63,.25);
}
.p-access__laptop__window{
	background:#fff;
	border-radius:6px;
	overflow:hidden;
}
.p-access__laptop__window__bar{
	background:var(--ac-navy);
	color:#fff;
	font-size:.68em;
	font-weight:bold;
	padding:6px 10px;
	display:flex;
	align-items:center;
	gap:5px;
}
.p-access__laptop__window__bar::before{
	content:"";
	width:7px;height:7px;border-radius:100%;
	background:#e0e0e0;
	box-shadow:10px 0 0 #e0e0e0, 20px 0 0 #e0e0e0;
	margin-right:6px;
}
.p-access__laptop table{
	width:100%;
	border-collapse:collapse;
	font-size:.62em;
}
.p-access__laptop table th,
.p-access__laptop table td{
	border:1px solid #e3ebf0;
	padding:4px 6px;
	text-align:left;
	white-space:nowrap;
}
.p-access__laptop table th{
	background:#eef4f7;
	color:var(--ac-navy);
}
.p-access__laptop__base{
	height:12px;
	background:#c9d3da;
	border-radius:0 0 10px 10px;
	position:relative;
}
.p-access__laptop__base::after{
	content:"";
	position:absolute;
	left:50%;top:0;
	width:16%;height:100%;
	background:#b3c0c9;
	transform:translateX(-50%);
	border-radius:0 0 4px 4px;
}
.p-access__excel{
	position:absolute;
	right:2%;
	bottom:4%;
	width:52%;
	background:#fff;
	border:2px solid var(--ac-green);
	border-radius:8px;
	box-shadow:0 16px 30px rgba(13,38,63,.2);
	overflow:hidden;
}
.p-access__excel__bar{
	background:var(--ac-green);
	color:#fff;
	font-size:.66em;
	font-weight:bold;
	padding:6px 10px;
}
.p-access__excel table{
	width:100%;
	border-collapse:collapse;
	font-size:.6em;
}
.p-access__excel table th,
.p-access__excel table td{
	border:1px solid #dff0e6;
	padding:4px 5px;
	white-space:nowrap;
}
.p-access__excel table th{
	background:#e7f6ee;
	color:var(--ac-green);
}
.p-access__badge{
	position:absolute;
	width:64px;height:64px;
	border-radius:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	font-size:1.5em;
	box-shadow:0 10px 20px rgba(13,38,63,.18);
}
.p-access__badge--access{ background:var(--ac-red); left:2%; top:2%; }
.p-access__badge--excel{ background:var(--ac-green); right:6%; top:0; }
.p-access__badge--gear{ background:var(--ac-blue); right:-2%; top:46%; }
.p-access__badge--wrench{ background:var(--ac-blue); left:-2%; bottom:10%; }
@media screen and (max-width:899px){
	.p-access__illust{ max-width:340px; }
	.p-access__badge{ width:46px;height:46px;font-size:1.1em; }
}

/* ---------- こんなお困りごと ---------- */
.p-access__pain{
	padding:70px 20px;
	max-width:1200px;
	margin:0 auto;
}
.p-access__pain__list{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
}
@media screen and (max-width:899px){
	.p-access__pain{ padding:40px 15px; }
	.p-access__pain__list{ grid-template-columns:repeat(2,1fr); gap:14px; }
}
.p-access__pain__item{
	background:#fff;
	border:1px solid var(--ac-line);
	border-radius:14px;
	padding:34px 18px 26px;
	text-align:center;
	transition:all .25s;
}
.p-access__pain__item:hover{
	box-shadow:0 14px 30px rgba(13,38,63,.1);
	transform:translateY(-4px);
}
.p-access__pain__item .-ico{
	width:64px;height:64px;
	margin:0 auto 16px;
	border-radius:100%;
	background:var(--ac-bg-soft);
	color:var(--ac-navy);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.7em;
}
.p-access__pain__item p{
	font-weight:bold;
	font-size:1.05em;
	color:var(--ac-navy);
	line-height:1.6;
}
@media screen and (max-width:899px){
	.p-access__pain__item{ padding:22px 12px 18px; }
	.p-access__pain__item .-ico{ width:50px;height:50px;font-size:1.3em;margin-bottom:10px; }
	.p-access__pain__item p{ font-size:.92em; }
}

/* ---------- できること ---------- */
.p-access__can{
	background:var(--ac-bg-soft);
	padding:70px 20px;
}
.p-access__can__inner{ max-width:1200px; margin:0 auto; }
.p-access__can__list{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:24px;
}
@media screen and (max-width:899px){
	.p-access__can{ padding:40px 15px; }
	.p-access__can__list{ grid-template-columns:1fr 1fr; gap:14px; }
}
.p-access__can__item{
	background:#fff;
	border-radius:14px;
	padding:30px 22px;
	box-shadow:0 8px 24px rgba(13,38,63,.06);
}
.p-access__can__item .-ico{
	width:56px;height:56px;
	border-radius:100%;
	background:var(--ac-teal);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.5em;
	margin-bottom:16px;
}
.p-access__can__item h3{
	font-size:1.1em;
	font-weight:bold;
	color:var(--ac-navy);
	margin-bottom:10px;
	line-height:1.5;
}
.p-access__can__item p{
	color:var(--ac-navy-soft);
	font-size:.92em;
	line-height:1.7;
}

/* ---------- 対応の流れ ---------- */
.p-access__flow{
	padding:70px 20px;
	max-width:1200px;
	margin:0 auto;
}
.p-access__flow__list{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:0;
	position:relative;
}
@media screen and (max-width:899px){
	.p-access__flow{ padding:40px 15px; }
	.p-access__flow__list{ grid-template-columns:1fr; gap:20px; }
}
.p-access__flow__item{
	position:relative;
	padding:0 20px;
	text-align:center;
}
.p-access__flow__list > .p-access__flow__item:not(:last-child)::after{
	content:"\f054";
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	position:absolute;
	right:-4px;
	top:34px;
	color:var(--ac-teal);
	font-size:1.1em;
}
@media screen and (max-width:899px){
	.p-access__flow__list > .p-access__flow__item:not(:last-child)::after{
		content:"\f078";
		right:auto;
		left:50%;
		top:auto;
		bottom:-16px;
		transform:translateX(-50%);
	}
}
.p-access__flow__num{
	width:70px;height:70px;
	line-height:70px;
	border-radius:100%;
	background:var(--ac-navy);
	color:#fff;
	font-weight:bold;
	font-size:1.3em;
	margin:0 auto 18px;
}
.p-access__flow__item h3{
	font-weight:bold;
	color:var(--ac-navy);
	margin-bottom:10px;
	font-size:1.05em;
}
.p-access__flow__item p{
	color:var(--ac-navy-soft);
	font-size:.9em;
	line-height:1.7;
}

/* ---------- FAQ ---------- */
.p-access__faq{
	background:var(--ac-bg-soft);
	padding:70px 20px;
}
.p-access__faq__inner{ max-width:900px; margin:0 auto; }
.p-access__faq dl{
	background:#fff;
	border-radius:10px;
	margin-bottom:16px;
	overflow:hidden;
	box-shadow:0 6px 16px rgba(13,38,63,.06);
}
.p-access__faq dt{
	display:flex;
	align-items:center;
	gap:12px;
	padding:20px 50px 20px 22px;
	font-weight:bold;
	color:var(--ac-navy);
	cursor:pointer;
	position:relative;
}
.p-access__faq dt .-q{
	color:var(--ac-teal);
	font-size:1.2em;
}
.p-access__faq dt::after{
	content:"\f078";
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	position:absolute;
	right:22px;
	top:0;bottom:0;margin:auto;
	color:var(--ac-teal);
	transition:transform .25s;
}
.p-access__faq dt.is-active::after{ transform:rotate(180deg); }
.p-access__faq dd{
	display:none;
	padding:0 22px 22px 22px;
}
.p-access__faq dd > div{ display:flex; gap:12px; color:var(--ac-navy-soft); line-height:1.8; }
.p-access__faq dd .-a{ color:var(--ac-orange); font-weight:bold; font-size:1.1em; }

/* ---------- キーワード補足エリア（SEO用テキスト） ---------- */
.p-access__seo-text{
	max-width:1000px;
	margin:0 auto;
	padding:60px 20px 20px;
	color:var(--ac-navy-soft);
	line-height:2;
}
.p-access__seo-text h2{
	font-size:1.4em;
	color:var(--ac-navy);
	margin-bottom:16px;
	font-weight:bold;
}
.p-access__seo-text p + p{ margin-top:16px; }

/* ---------- 内部リンク ---------- */
.p-access__links{
	max-width:1200px;
	margin:0 auto;
	padding:20px 20px 70px;
}
.p-access__links ul{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:16px;
}
@media screen and (max-width:899px){
	.p-access__links ul{ grid-template-columns:1fr 1fr; }
}
.p-access__links a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:#fff;
	border:1px solid var(--ac-line);
	border-radius:8px;
	padding:16px 18px;
	font-weight:bold;
	color:var(--ac-navy);
}
.p-access__links a:hover{ border-color:var(--ac-teal); color:var(--ac-teal-dark); opacity:1; }

/* ---------- CTAコールアウト ---------- */
.p-access__ctabox{
	max-width:1200px;
	margin:0 auto 70px;
	background:linear-gradient(135deg,#eef6f4 0%, #e9f2fb 100%);
	border:1px solid #d9e9e5;
	border-radius:18px;
	padding:40px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	flex-wrap:wrap;
}
.p-access__ctabox__icon{
	width:70px;height:70px;
	border-radius:100%;
	background:var(--ac-teal);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.8em;
	flex:none;
}
.p-access__ctabox__txt{ flex:1; min-width:260px; }
.p-access__ctabox__txt h2{
	font-size:1.3em;
	font-weight:bold;
	color:var(--ac-navy);
	margin-bottom:10px;
	line-height:1.6;
}
.p-access__ctabox__txt p{
	color:var(--ac-navy-soft);
	line-height:1.8;
}
@media screen and (max-width:899px){
	.p-access__ctabox{ padding:26px 20px; flex-direction:column; text-align:center; }
	.p-access__ctabox__txt{ text-align:center; }
}