@charset "utf-8";
/* ============================================================
   トップページ　スライダー／会社紹介（2026-10-08）
   inc/sa-top-hero.php が出すHTML用。色と見出しの形は top-services.css にそろえる。
   ============================================================ */

.sa-hero,
.sa-about{
	--hr-gold:#b8935a;
	--hr-gold-soft:#f6f1e7;
	--hr-ink:#26262a;
	--hr-sub:#5f5c56;
	--hr-line:#e4dfd5;
	--hr-accent:#ff5703;
	--hr-accent-dark:#e04d02;
	--hr-radius:10px;
}

/* ---- スライダー ---- */
#slider.sa-hero{width:100%;background:#fff;margin:0 0 8px;}
.sa-hero__track{display:grid;background:#1d1d20;}
.sa-hero__slide{
	grid-area:1 / 1;
	opacity:0;visibility:hidden;
	transition:opacity .8s ease,visibility 0s linear .8s;
}
.sa-hero__slide.is-active{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s;}
.sa-hero:not(.is-ready) .sa-hero__slide:not(.is-active){display:none;}   /* JSが動かなければ1枚目だけ */
.sa-hero__slide a{display:block;box-shadow:none;}
.sa-hero__slide img{display:block;width:100%;height:auto;margin:0;}
.sa-hero__slide a:focus-visible{outline:3px solid var(--hr-gold);outline-offset:-3px;}

/* 操作部：画像の文字にかからないよう、画像の下に置く */
.sa-hero__ui{
	display:flex;align-items:center;gap:10px;
	max-width:1080px;margin:0 auto;padding:14px 0 6px;
}
.sa-hero__ui[hidden]{display:none;}
.sa-hero__dots{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:16px;margin-right:12px;}
.sa-hero__dot{
	all:unset;box-sizing:border-box;cursor:pointer;
	display:flex;flex-direction:column;gap:7px;padding:4px 0;min-width:0;
}
.sa-hero__bar{display:block;height:3px;border-radius:3px;background:var(--hr-line);overflow:hidden;}
.sa-hero__fill{display:block;height:100%;width:0;background:var(--hr-gold);}
.sa-hero__dot[aria-current] .sa-hero__fill{width:100%;}
.sa-hero.is-running .sa-hero__dot[aria-current] .sa-hero__fill{
	width:0;animation:sa-hero-fill var(--sa-hero-delay,6000ms) linear forwards;
}
@keyframes sa-hero-fill{to{width:100%;}}
.sa-hero__label{
	font-size:12.5px;line-height:1.4;color:var(--hr-sub);
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sa-hero__dot[aria-current] .sa-hero__label{color:var(--hr-ink);font-weight:600;}
.sa-hero__dot:hover .sa-hero__label{color:var(--hr-ink);}
.sa-hero__dot:focus-visible{outline:2px solid var(--hr-gold);outline-offset:4px;border-radius:4px;}

.sa-hero__btn{
	all:unset;box-sizing:border-box;cursor:pointer;flex:none;
	position:relative;width:34px;height:34px;border-radius:50%;
	border:1px solid var(--hr-line);background:#fff;
	transition:border-color .15s,background .15s;
}
.sa-hero__btn:hover{border-color:var(--hr-gold);background:var(--hr-gold-soft);}
.sa-hero__btn:focus-visible{outline:2px solid var(--hr-gold);outline-offset:2px;}
.sa-hero__btn--prev::before,
.sa-hero__btn--next::before{
	content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;
	border-top:1.5px solid var(--hr-ink);border-right:1.5px solid var(--hr-ink);
}
.sa-hero__btn--prev::before{transform:translate(-30%,-50%) rotate(-135deg);}
.sa-hero__btn--next::before{transform:translate(-70%,-50%) rotate(45deg);}
/* 一時停止（‖）と再生（▶） */
.sa-hero__btn--pause::before,
.sa-hero__btn--pause::after{
	content:"";position:absolute;top:50%;width:2px;height:11px;background:var(--hr-ink);transform:translateY(-50%);
}
.sa-hero__btn--pause::before{left:13px;}
.sa-hero__btn--pause::after{left:18px;}
.sa-hero.is-stopped .sa-hero__btn--pause::after{display:none;}
.sa-hero.is-stopped .sa-hero__btn--pause::before{
	left:14px;width:0;height:0;background:none;
	border-left:9px solid var(--hr-ink);border-top:6px solid transparent;border-bottom:6px solid transparent;
}

@media screen and (max-width:1120px){
	.sa-hero__ui{padding-left:20px;padding-right:20px;}
}
@media (prefers-reduced-motion:reduce){
	.sa-hero__slide,.sa-hero__slide.is-active{transition:none;}
}

/* ---- 会社紹介 ---- */
#top_catch.sa-about{
	display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:56px;row-gap:28px;align-items:start;
	margin:56px 0 64px;padding:0;background:none;text-align:left;
}
.sa-about__head{grid-column:1 / -1;}
#top_catch .sa-sec-head__en{   /* 旧 #top_catch p（幅800pxで中央寄せ・灰色）を打ち消す */
	max-width:none;text-align:left;
	margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--hr-gold);
}
#top_catch .sa-about__title{
	margin:0;padding:0;background:none;border:0;
	font-family:"Hiragino Mincho ProN","Yu Mincho","YuMincho",serif;
	font-size:32px;font-weight:600;line-height:1.55;letter-spacing:.03em;color:var(--hr-ink);
	text-align:left;
	text-wrap:balance;word-break:auto-phrase;   /* 狭い幅で折り返すとき、文節の切れ目で・行の長さをそろえて */
}
#top_catch .sa-about__lead{
	margin:0 0 28px;max-width:none;
	font-size:15px;line-height:2;color:var(--hr-sub);text-align:left;
}
.sa-about__cta{display:flex;flex-wrap:wrap;gap:12px;}
.sa-cta{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	min-height:48px;padding:0 24px;border-radius:999px;
	font-size:15px;font-weight:700;letter-spacing:.03em;text-decoration:none;box-shadow:none;
	transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.sa-cta::after{content:"→";font-weight:400;transition:transform .15s;}
.sa-cta:hover::after{transform:translateX(3px);}
.sa-cta--primary{background:var(--hr-accent);color:#fff;border:1px solid var(--hr-accent);}
.sa-cta--primary:hover{background:var(--hr-accent-dark);border-color:var(--hr-accent-dark);color:#fff;}
.sa-cta--ghost{background:#fff;color:var(--hr-ink);border:1px solid var(--hr-line);}
.sa-cta--ghost:hover{border-color:var(--hr-gold);color:var(--hr-ink);background:var(--hr-gold-soft);}
.sa-cta:focus-visible{outline:2px solid var(--hr-gold);outline-offset:3px;}

.sa-about__points{
	list-style:none;margin:0;padding:30px 30px;
	background:var(--hr-gold-soft);border-radius:var(--hr-radius);
	display:grid;gap:22px;
}
.sa-about__point{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;margin:0;padding:0;}
.sa-about__point + .sa-about__point{padding-top:22px;border-top:1px solid #e9e1d1;}
.sa-about__icon{
	display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
	background:#fff;color:var(--hr-gold);
}
.sa-about__icon svg{width:23px;height:23px;display:block;}
.sa-about__ptext{display:block;}
.sa-about__ptitle{display:block;margin:2px 0 4px;font-size:16px;font-weight:700;line-height:1.5;color:var(--hr-ink);}
.sa-about__pdesc{display:block;font-size:13.5px;line-height:1.8;color:var(--hr-sub);}

@media screen and (max-width:1100px){
	#top_catch.sa-about{gap:36px;}
	#top_catch .sa-about__title{font-size:28px;}
}
@media screen and (max-width:62.5em){
	#top_catch.sa-about{grid-template-columns:1fr;gap:28px;margin:36px 0 44px;}
}
@media screen and (max-width:640px){
	#top_catch.sa-about{row-gap:18px;}
	#top_catch .sa-about__title{font-size:22px;line-height:1.6;}
	#top_catch .sa-about__lead{font-size:14px;line-height:1.9;margin-bottom:22px;}
	.sa-about__cta{flex-direction:column;}
	.sa-cta{width:100%;}
	.sa-about__points{padding:22px 18px;gap:18px;}
	.sa-about__point + .sa-about__point{padding-top:18px;}
	.sa-about__point{grid-template-columns:40px 1fr;gap:12px;}
	.sa-about__icon{width:40px;height:40px;}
}