/* =================== shared/css/top.css（全量） =================== */
/* ─────────────────────────────────────────────
初期化 / 変数
────────────────────────────────────────────── */
html, body { margin:0; padding:0; }
:where(ul,ol){ /*list-style:none*/; margin:0; padding:0; }
body{
--site-max: 1170px;
--container: min(var(--site-max), 92vw);
--section-gap: 60px;
--gap: 24px;
--shadow: 0 10px 24px rgba(0,0,0,.12);
--c-text:#0f172a; --c-muted:#475569; --c-primary:#0ea5e9; --c-bg:#f8fafc;
}
@media (max-width: 768px) {
body {
--container: 92vw; /* スマホでは余白を減らす */
}
}
#top .contIn1170{ width:var(--container); margin-inline:auto; }
body {
text-align: left;
}
#VcArea-MainColum .contIn1170 ul, #VcArea-MainColum .contIn1170 ol {
padding-left: 0;
margin-left: 0;
}
/* ─────────────────────────────────────────────
Header
────────────────────────────────────────────── */
#top .site-header{ position:relative; z-index:1000; height:100px; background:#fff; /*border-bottom:1px solid #e6edf2;*/ margin:0; }
#top .site-header__inner{ width: calc(100% - 40px); max-width: 100%;height:100%; display:flex; align-items:center; gap:32px; padding:0; /*padding-right:120px;*/ }
#top .logo img{ height:40px; width:auto; display:block;margin-left: 20px; }
#top .gnav{ margin-left:auto; padding-right: 110px; }
#top .gnav__list{ display:flex; gap:20px; align-items:center; justify-content:flex-end; font-weight: 600;}
#top .gnav .has-mega{position: relative; padding-right: 20px;}
#top .gnav__list > li > a{ position:relative; text-decoration:none; color:#111827; font-size:16px; font-weight:600; display:inline-flex; align-items:center; gap:8px; padding:0 2px; }
#top .gnav__list > li.has-mega::after {
content: "";
display: inline-block;
width: 10px;
height: 6px;
margin-left: 10px;
position: absolute;
top: calc(50% - 3px);
background-image: url("data:image/svg+xml;utf8,");
}#top .gnav__underline{ position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--c-primary); opacity:0; transition:left .18s ease,width .18s ease,opacity .15s ease; pointer-events:none; }
#top .gnav__underline.is-show{ opacity:1; }
#top .header-contact{ position:absolute; top:0; right:0; width:100px; height:100px; background:var(--c-primary); color:#fff; text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
#top .header-contact__icon{ width:28px; height:auto; display:block; }
#top .header-contact .label{ font-size:12px; font-weight:700; }
/* ─────────────────────────────────────────────
Mega menu
────────────────────────────────────────────── */
#top .mega{ position:absolute; left:0; right:0; top:100%; background:transparent; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px); transition:opacity .70s ease, transform .70s cubic-bezier(.16,1,.3,1); }
#top .mega[aria-hidden="false"]{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
#top .mega__inner{ width:var(--container); margin:0 auto; background:#fff; box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 3fr; }
#top .mega__left{ background:var(--c-primary); color:#fff; padding:30px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
#top .mega__title{ font-size:16px; font-weight:800; margin:0; letter-spacing:.06em; }
#top .mega__go{ width:20px; height:20px; background:#fff; position:relative; display:inline-block; border-radius:50%; }
#top .mega__go::after{ content:""; position:absolute; top:50%; left:50%; width:6px; height:6px; border-right:2px solid var(--c-primary); border-top:2px solid var(--c-primary); transform:translate(-50%,-50%) rotate(45deg); }
#top .mega__links{ padding:30px; }
#top .mega__links > ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 40px; }
#top .mega__links a{ display:block; text-decoration:none; color:#0f172a; font-weight:400; font-size:14px; padding:12px 0; border-bottom:1px solid #e5eef5; }
#top .mega__links a::before{ content:""; display:inline-block; width:14px; height:2px; background:#2ea8ea; margin-right:10px; transform:translateY(-2px); }
/* ─────────────────────────────────────────────
共通：丸矢印（20×20px／中の矢印 5×8px、線1px）
────────────────────────────────────────────── */
#top .arrow-circle{
--s: 20px;
position:relative;
inline-size: var(--s);
block-size: var(--s);
border-radius:50%;
background:var(--c-primary);
display:inline-block;
vertical-align:middle;
}
#top .arrow-circle::before,
#top .arrow-circle::after{
content:"";
position:absolute;
left:50%; top:50%;
width:5px; height:0;
border-top:1px solid #fff;
transform-origin:right center;
}
#top .arrow-circle::before{ transform:translate(-50%,-50%) rotate(45deg); }
#top .arrow-circle::after { transform:translate(-50%,-50%) rotate(-45deg); }
/* ─────────────────────────────────────────────
Key Visual
────────────────────────────────────────────── */
#top .kv{ position:relative; background:#fff; margin-block:0; }
#top .kv__viewport{ width:100%; /* aspect-ratio:1300/450; */ overflow:hidden; }
#top .kv__track{ display:flex; height:100%; transition:transform .6s ease; }
#top .kv__slide{ min-width:100%; height:100%; }
#top .kv__slide img{ width:100%; height:100%; display:block; object-fit:cover; }
#top .kv__controls{ position:absolute; right:0; bottom:0; display:flex; align-items:center; gap:12px; }
#top .kv__dots{ display:flex; align-items:center; gap:12px; padding:0 12px; background:transparent; }
#top .kv__dots button{ width:12px; height:12px; border-radius:0; border:2px solid var(--c-primary); background:transparent; padding:0; cursor:pointer; text-indent:-9999px; border-radius: 50% !important;}
#top .kv__dots button.is-active{ background:var(--c-primary); }
#top .kv__toggle{ width:40px; height:40px; border-radius:0; border:0; background:var(--c-primary); display:grid; place-items:center; cursor:pointer; }
#top .kv__toggle-ico{ position:relative; width:12px; height:12px; display:block; }
#top .kv__toggle[aria-pressed="false"] .kv__toggle-ico::before,#top .kv__toggle[aria-pressed="false"] .kv__toggle-ico::after{ content:""; position:absolute; top:0; bottom:0; width:3px; background:#fff; }
#top .kv__toggle[aria-pressed="false"] .kv__toggle-ico::before{ left:0; }
#top .kv__toggle[aria-pressed="false"] .kv__toggle-ico::after{ right:0; }
#top .kv__toggle[aria-pressed="true"] .kv__toggle-ico{ width:0; height:0; border-left:12px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; }
#top .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
@media screen and (max-width: 980px) {
#top .kv__viewport {
overflow: visible;
}
}
/* ─────────────────────────────────────────────
業種から探す
────────────────────────────────────────────── */
#top .industry-nav{ background:var(--c-bg); padding:24px 0; border-bottom:1px solid #e2e8f0; margin-block:0; }
#top .industry-nav__list{ position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; margin-left: 0;}
#top .industry-nav__list::before,#top .industry-nav__list::after{ content:""; position:absolute; top:8px; bottom:8px; width:1px; background:#e6edf2; }
#top .industry-nav__list::before{ left:0; } .industry-nav__list::after{ right:0; }
#top .industry-nav__list li{ position:relative; }
#top .industry-nav__list li + li::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:#e6edf2; }
#top .industry-nav__list a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15px; text-decoration:none; color:#0f172a; padding:16px 10px; background:transparent; box-shadow:none; }
#top .industry-nav__list .ico{ width:56px; height:auto; display:block; }
#top .industry-nav__list .label{ font-size:16px; font-weight:700; letter-spacing:.08em; line-height:1; }
/* ─────────────────────────────────────────────
重要なお知らせ
────────────────────────────────────────────── */
#top .urgent{ background:#fff; margin-block:var(--section-gap); }
#top .urgent__list{ display:grid; gap:10px; }
#top .urgent__item{
display:grid;
grid-template-columns:28px auto 110px 1fr auto;
align-items:center;
gap:16px;
padding:22px 28px;
border:1px solid #e6edf2;
background:#fff;
}
#top .urgent__icon{ width:20px; height:auto; display:block; }
#top .urgent__badge{ font-weight:800; color:#0f172a; }
#top .urgent__time{ color:#64748b; font-variant-numeric:tabular-nums; }
#top .urgent__link{ text-decoration:none; color:#0f172a; text-align: left;}
/* ─────────────────────────────────────────────
ピックアップ 3件
────────────────────────────────────────────── */
#top .quick{ margin-block:var(--section-gap); }
#top .quick__cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
#top .quick__cards a{
display:grid; grid-template-rows:auto 1fr;
min-height:270px;
text-decoration:none; color:inherit;
background:#fff; border:none; overflow:hidden;
box-shadow:var(--shadow);
}
#top .quick__cards .body{
padding:25px 16px;
display:flex; align-items:center; justify-content:space-between;
}
#top .quick__cards h3{ font-size:16px; margin:0; }
#top .quick__cards .arrow-circle{ margin-left:12px; flex-shrink:0; }
#top .quick__cards .media{ margin:0; aspect-ratio:16/9; }
#top .quick__cards .media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* ─────────────────────────────────────────────
About Us
────────────────────────────────────────────── */
#top .about-hero{
position:relative; color:#fff; margin-block:var(--section-gap);
min-height:500px;
background:
linear-gradient(180deg, rgba(2,132,199,.22), rgba(2,132,199,.22)),
url("../img/common/bg_about.png") center center / cover no-repeat;
}
#top .about-hero__inner{
position:absolute; inset:0;
display:flex; flex-direction:column; justify-content:center; align-items:center;
width:var(--container); margin-inline:auto;
}
#top .about-hero__title{
text-align:center; margin:0;
font-size:clamp(24px,3.2vw,32px); line-height:1.4; letter-spacing:.04em;
}
#top .about-hero__title small{
display:block; font-size:12px; opacity:.95; margin-bottom:10px;
letter-spacing:.2em; text-transform:uppercase;
}
#top .about-hero__links{
margin-top:100px;
/*display:grid; */display:flex; grid-template-columns:repeat(3,370px); gap:30px; justify-content:center;
}
#top .about-hero__links a{
width:370px; height:100px; box-sizing:border-box;
background:#fff; color:#0f172a; text-decoration:none;
display:flex; align-items:center; gap:16px;
padding: 0 16px 0 0;
overflow: hidden;
}
#top .about-hero__thumb{
flex: 0 0 100px;
width: 100px; height: 100px;
object-fit: cover; display: block; margin: 0;
}
#top .about-hero__label{ font-weight:700; font-size:16px; }
#top .about-hero__links .arrow-circle{ margin-left:auto; flex-shrink:0; }
/* ─────────────────────────────────────────────
News（右770px・UL切替方式）
────────────────────────────────────────────── */
#top .news-block{ min-height:415px; background: rgba(255,255,255,.5);}
#top .news-block .contIn1170{
display:grid;
grid-template-columns: 1fr 740px;
column-gap: 40px;
row-gap: 0;
align-items:start;
padding-top: 90px;
}
#top .news-block .section-h{
grid-column:1;
grid-row: 1 / span 2;
display:flex; flex-direction:column; gap:16px;
}
#top .news-block .section-h .eyebrow{
color:#0ea5e9; font-size:14px; letter-spacing:.15em; margin:0;
}
#top .news-block .section-h .ttl{
margin:0; font-size:28px; font-weight:700; color:#0f172a; text-align: left; padding: 0px 0px 0px 0px;
}
#top span.link-more,
#top span.btn.btn--primary{
position:relative;
display:inline-flex; align-items:center; justify-content:center;
width:170px; height:50px;
background:var(--c-primary);
color:#fff; text-decoration:none;
overflow:hidden; border-radius:0;
transition: background-color .35s cubic-bezier(.4,0,.2,1);
}
@media (max-width:767px){
#top span.link-more,
#top span.btn.btn--primary{
width:100px; height:2em;font-size: 12px;
}
}
#top span.link-more::after,
#top span.btn.btn--primary::after{
content:"";
position:absolute;
right:0; bottom:0;
width:0; height:0;
border-left:10px solid transparent;
border-bottom:10px solid #333333;
pointer-events:none;
transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s;
}
#top span.link-more:hover,
#top span.btn.btn--primary:hover{
background:#333333;
}
#top a.link-more:hover::after,
#top a.btn.btn--primary:hover::after{
transform: translate(30%, 30%);
}
#top .news-block .news-cat{
grid-column:2;
display:flex; gap:32px;
border-bottom:1px solid #e6edf2;
margin:0 0 30px;
padding:0;
}
#top .news-block .news-cat li {
list-style-type: none;
}
#top .news-block .news-cat button{
appearance:none; background:none; border:0;
padding:12px 0; margin:0;
font-weight:800; font-size:16px; letter-spacing:.02em;
color:#0f172a; position:relative; cursor:pointer;
}
#top .news-block .news-cat button.is-active{ color:var(--c-primary); }
#top .news-block .news-cat button.is-active::after{
content:""; position:absolute; left:0; right:0; bottom:-1px;
height:3px; background:var(--c-primary);
}
#top .news-block .news-lines{ grid-column:2; display:block; margin:0; }
#top .news-block .news-lines .news-line + .news-line{ border-top:1px solid #e6edf2; }
#top .news-block .news-lines a{
display:grid;
grid-template-columns:110px auto 1fr 28px;
gap:16px; align-items:center; padding:18px 0;
color:#0f172a; text-decoration:none; width:100%; min-width:0;
}
#top .news-block .news-date{ color:#334155; font-variant-numeric:tabular-nums; }
#top .news-block ul[hidden]{ display:none !important; }
#top .news-block .news-badge{
display:inline-flex; align-items:center; justify-content:center;
width:110px; height:26px;
font-size:10px; font-weight:400;
color:#fff; background:#00A7EB;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
padding:0; border-radius:0;
}
#top .news-block .news-text{ min-width:0; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#top .news-block .news-lines .arrow-circle{ justify-self:end; }
/* ─────────────────────────────────────────────
Cases / Columns / Recruit（汎用カード部分）
※ 導入事例のスライダー専用CSSは次ブロックで上書き
────────────────────────────────────────────── */
#top .cases-block{ margin-block:var(--section-gap); background:linear-gradient(180deg,#f8fafc,#ffffff); }
#top .cards{ display:grid; gap:var(--gap); }
#top .cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
#top .card{ background:#fff; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.08); border:1px solid #eef2f7; border-radius:0; }
#top .card__link{ display:block; color:inherit; text-decoration:none; }
#top .card__media{ aspect-ratio:16/9; overflow:hidden; }
#top .card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
#top .card__body{ padding:14px 16px 18px; }
#top .card__title{ font-size:clamp(16px,1.8vw,18px); font-weight:700; margin:0 0 6px; color:#0f172a; }
#top .card__text{ font-size:14px; color:#475569; line-height:1.6; }
#top .case-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
#top .case-links a{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid #dbe7f1; background:#fff; text-decoration:none; color:#0f172a; font-weight:700; font-size:14px; border-radius:0; }
#top .case-links .arrow-circle{ margin-left:6px; }
#top .columns-block{ margin-block:var(--section-gap); background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.5) 0%,
#ffffff 100%
); margin-top: 0; margin-bottom: 0; padding-bottom:90px}
/* ============================================================
Columns quick links（コラム：カード下の4リンク）
============================================================ */
#top .cases-cats,
#top .columns-cats{
margin-top: 24px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
#top .cases-cats a,
#top .columns-cats a{
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
background: #fff;
color: #0f172a;
text-decoration: none;
border: 1px solid #eef2f7;
border-radius: 0;
box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
transition: transform .12s ease, box-shadow .12s ease;
}
#top .cases-cats a:hover,
#top .columns-cats a:hover{
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(15, 23, 42, .08);
}
#top .cases-cats a .arrow-circle,
#top .columns-cats a .arrow-circle{
flex: 0 0 auto;
}
@media (max-width:1024px){
#top .cases-cats,
#top .columns-cats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:640px){
#top .cases-cats,
#top .columns-cats{ grid-template-columns: 1fr; }
}
#top .recruit-hero{ margin-block:var(--section-gap); background:linear-gradient(180deg,#eef7fd,#ffffff); }
#top .recruit-hero__box{ position:relative; overflow:hidden; width:var(--container); margin-inline:auto; }
#top .recruit-hero__img{ height:420px; background:url("vc-files/top/img/recruit.jpg") center/cover no-repeat; filter:saturate(1.05); }
#top .recruit-hero__body{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:28px; color:#0f172a; }
#top .btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; text-decoration:none; font-weight:700; border-radius:0; }
#top .btn--primary{ background:var(--c-primary); color:#fff; }
/* ─────────────────────────────────────────────
Footer
────────────────────────────────────────────── */
/* ========== Footer（4カラム＋2本のリンク帯＋コピーライト） ========== */
#top .site-footer{
background:#111827; color:#e5e7eb;
margin-top:0;
}
#top .site-footer a{
color:#e5e7eb; text-decoration:none;
}
#top .site-footer a:hover{ color:#e5e7eb;text-decoration: underline; }
#top .site-footer__upper{ padding:44px 0 32px; }
#top .site-footer .footer-cols{
width:var(--container); margin-inline:auto;
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:34px 36px;
}
#top .site-footer .fcol h3{
font-size:16px; font-weight:800; margin:0 0 16px;
}
#top .site-footer .fcol ul{ margin:0; padding:0; list-style:none; }
#top .site-footer .fcol li + li{ margin-top:10px; }
#top .site-footer .fcol a{ display:inline-block; padding:4px 0; font-size:14px; }
#top .site-footer .fcol h3 a { font-size:16px; font-weight:800; padding: 0; }
#top .site-footer .fcol li a::before {
display: inline;
content: "- ";
}
#top .site-footer .fcol--simple .fcol-simple{ margin-top:0; }
#top .site-footer .fcol--simple .fcol-simple li{
border-bottom:1px solid #2b3340;
}
#top .site-footer .fcol--simple .fcol-simple li a{
display:block; padding:14px 0; font-weight:700;
}
#top .site-footer__middle{
border-top:1px solid #1f2937; border-bottom:1px solid #1f2937;
background:#0f1420;
padding-bottom: 70px;
}
#top .site-footer__middle .contIn1170{ width:var(--container); margin-inline:auto; }
#top .footer-links{ display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; padding:16px 0; }
#top .footer-links--primary li a{ font-weight:500; font-size: 14px; }
#top .site-footer__policies{ background:#0f1420; }
#top .site-footer__policies .contIn1170{ width:var(--container); margin-inline:auto; }
#top .footer-links--policies{
padding:14px 0; gap:14px 22px;
}
#top .footer-links--policies li{
position:relative; padding-left:0; margin-left:0;
}
#top .footer-links--policies li + li{
padding-left:22px;
}
#top .footer-links--policies li + li::before{
content:""; position:absolute; left:0; top:50%;
width:1px; height:14px; background:#2b3340; transform:translateY(-50%);
}
#top .site-footer__bottom{ padding:18px 0 30px; background:#111827; }
#top .site-footer__bottom .contIn1170{ width:var(--container); margin-inline:auto; }
#top .site-footer__bottom small{ color:#94a3b8; }
@media (max-width:1024px){
#top .site-footer .footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
#top .site-footer .footer-cols{ grid-template-columns:1fr; gap: 0;}
#top .footer-links, #top .footer-links--policies{ gap:12px 18px; }
#top .site-footer__upper{
padding-left: 20px;padding-right: 20px;
}
.footer-links footer-links--primary{
padding-left: 20px;padding-right: 20px;
}
.site-footer__policies{
padding-left: 20px;padding-right: 20px;
}
.site-footer__bottom{
text-align: center;
}
}
/* ============================
Footer color theme (overwrite)
============================ */
#top .site-footer { background:#ffffff !important; color:#111827; }
#top .site-footer__upper,
#top .site-footer__middle{
background:#222222 !important;
color:#e5e7eb;
}
#top .site-footer__upper h3,
#top .site-footer__middle h3{ color:#e5e7eb; }
#top .site-footer__upper a,
#top .site-footer__middle a{
color:#e5e7eb;
}
#top .site-footer__middle{
border-top: 1px solid #2b2b2b;
border-bottom: 1px solid #2b2b2b;
}
#top .site-footer__policies,
#top .site-footer__copyright{
background:#ffffff !important;
color:#111827;
}
#top .site-footer__policies a{ color:#111827; }
#top .site-footer__bottom{
background:#ffffff !important;
color:#111827;
}
#top .site-footer__bottom a{ color:#111827; }
#top .site-footer .fcol h3{
margin: 0 0 12px;
padding-bottom: 12px;
border-bottom: 1px solid #2b3340;
}
/* ============================================================
Footer tweaks
============================================================ */
#top .site-footer__middle{ border-top:0; }
#top .site-footer__middle .contIn1170{
position: relative;
padding: 18px 0;
}
#top .site-footer__middle .contIn1170::before{
content:"";
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width: var(--container);
height:1px;
background: rgba(255,255,255,.20);
}
#top .site-footer__middle .contIn1170 > ul{
display:flex;
flex-wrap:wrap;
gap:0;
margin-left: 0;
}
#top .site-footer__middle .contIn1170 > ul > li{
position:relative;
padding:0 16px;
}
#top .site-footer__middle .contIn1170 > ul > li:first-child{ padding-left:0; }
#top .site-footer__middle .contIn1170 > ul > li + li::before{
content:"";
position:absolute;
left:0; top:50%;
transform:translateY(-50%);
width:1px; height:16px;
background: rgba(255,255,255,.25);
}
#top .site-footer__policies{ margin-bottom:20px; }
#top .site-footer__policies .contIn1170 > ul{
display:flex;
flex-wrap:wrap;
gap:0;
margin-left: 0;
font-size: 14px;
}
#top .site-footer__policies .contIn1170 > ul > li{
position:relative;
padding:0 16px;
}
#top .site-footer__policies .contIn1170 > ul > li:first-child{ padding-left:0; }
#top .site-footer__policies .contIn1170 > ul > li + li::before{
content:"";
position:absolute;
left:0; top:50%;
transform:translateY(-50%);
width:1px; height:14px;
background:#d7dbe1;
}
#top .site-footer__bottom small,
#top .site-footer__copyright {
color: #0f172a;
}
/* ─────────────────────────────────────────────
Responsive
────────────────────────────────────────────── */
@media (max-width:1200px){
#top .about-hero__links{ grid-template-columns:repeat(3, minmax(300px, 1fr)); }
#top .about-hero__links a{ width:auto; }
}
@media (max-width:1024px){
#top .cards--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
#top .industry-nav__list{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:760px){
#top .about-hero__links{ grid-template-columns:1fr; }
}
@media (max-width:640px){
#top .cards--3{ grid-template-columns:1fr; }
#top .industry-nav__list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
#top .mega__inner{ width:100%; grid-template-columns: 1fr; }
#top .mega__left{ padding:20px; }
#top .mega__links{ padding:20px; }
#top .mega__links > ul{ grid-template-columns: 1fr; }
}
/* ============================================================
Cases heading & slider（導入事例：見出し＋スライダー）専用
============================================================ */
#top .cases-block{
position: relative !important;
overflow: hidden;
margin-top: 0;
/*background-image: url("../img/common/bg_jirei.png");
background-repeat: no-repeat;
background-position: left top;
background-size: auto;*/
background: none;
background: rgba(255, 255, 255, .5);
margin-bottom: 0;
padding-bottom: 90px;
}
.contMainColumn_01{
background-image: url("../img/common/bg_jirei.png");
background-repeat: no-repeat;
background-position: left bottom;
background-size: auto;
background-attachment: fixed;
}
#top .cases-block .contIn1170{
position: static !important;
z-index: 1;
}
#top .cases-block .section-h--row{
display: flex; align-items: center; justify-content: space-between;
gap: 24px; padding: 12px 0 18px;
}
#top .cases-block .eyebrow{ margin:0 0 6px; font-size:14px; font-weight:700; color:#00A7EB; letter-spacing:.02em; }
#top .cases-block .ttl{ margin:0; font-size:36px; line-height:1.2; font-weight:800; color:#0f172a; padding: 0px 0px 0px 0px; }
#top .cases-block .section-h--row .link-more{ flex:0 0 auto;}
#top .cases-slider{ position: static !important; margin-top:60px; }
#top .cases-slider__viewport{
position: relative; overflow-x:auto; overflow-y:hidden;
-webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#top .cases-slider__viewport::-webkit-scrollbar{ width:0; height:0; display:none; }
#top .cases-slider__track{
display:flex; gap:32px; padding:0px; overflow:visible; scroll-snap-type:x mandatory;
}
#top .cases-card{ flex:0 0 360px; scroll-snap-align:start; border:none; }
#top .cases-card__media{ margin:0 0 16px; aspect-ratio:16/9; background:#f2f5f8; }
#top .cases-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
#top .cases-card__title{
font-size:18px; font-weight:800; margin:0 0 10px; color:#0f172a;
position:relative; padding-right:28px;
}
#top .cases-card__title::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #00a7eb;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 6px 8px;
}
#top .cases-card__text{ color:#475569; font-size:14px; line-height:1.8; }
#top .cases-card__tags{ display:flex; gap:8px; }
#top .cases-slider .cases-card__tags{ display:flex; gap:8px; margin-top:0px; margin-left: 10px; }
#top .columns-block .cases-card .tag,
#top .columns-block .cases-card .tag:link,
#top .columns-block .cases-card .tag:visited,
#top .cases-card .tag{
display:inline-block; padding:1px 10px; background:#00a7eb; border:1px solid #00a7eb; color:#fff; font-size:12px;
}
#top .cases-block .cases-slider__btn{
position: absolute; top:40%; transform:translateY(-50%);
width:40px; height:60px; border:0; background:#fff;
box-shadow:0 6px 18px rgba(2,32,62,.10);
display:grid; place-items:center; cursor:pointer; z-index:3;
}
#top .cases-block .cases-slider__btn--prev{ left:0; border-radius:0 30px 30px 0; }
#top .cases-block .cases-slider__btn--next{ right:0; border-radius:30px 0 0 30px; }
#top .cases-block .cases-slider__btn > span{
position:relative; width:12px; height:20px; display:block;
font-size:0; line-height:0;
}
#top .cases-block .cases-slider__btn::before,
#top .cases-block .cases-slider__btn::after{ content:none !important; }
#top .cases-block .cases-slider__btn > span::before{
position:absolute; inset:0; margin:auto;
width:12px; height:20px;
transform:rotate(45deg);
}
#top .cases-block .cases-slider__btn--next > span::before{
transform:rotate(-135deg);
}
#top .cases-slider__bar{ margin-top:16px; height:6px; background:#e6edf2; position:relative; cursor:pointer; z-index:1; }
#top .cases-slider__thumb{ position:absolute; left:0; top:0; bottom:0; width:120px; background:#111827; cursor:grab; pointer-events:auto; z-index:2; }
/* ============================================================
Cases : 追加スタイル（4リンク / 見出し内丸矢印 / タグ色 / 矢印色 ）
============================================================ */
/* ========== 導入事例：スライダー矢印を画像に差し替え ========== */
#top .cases-block .cases-slider__btn::before,
#top .cases-block .cases-slider__btn::after{
content: none !important;
}
#top .cases-block .cases-slider__btn{
position:absolute; top:40%; transform:translateY(-50%);
width:40px; height:60px; border:0; background:#fff;
box-shadow:0 6px 18px rgba(2,32,62,.10);
display:grid; place-items:center; cursor:pointer; z-index:3;
}
#top .cases-block .cases-slider__btn--prev{ left:0; border-radius:0 30px 30px 0; }
#top .cases-block .cases-slider__btn--next{ right:0; border-radius:30px 0 0 30px; }
#top .cases-block .cases-slider__btn > span{
display:block;
width:12px; height:20px;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
}
#top .cases-block .cases-slider__btn--prev > span{
background-image:url("../img/common/arrow_slider_L.png");
}
#top .cases-block .cases-slider__btn--next > span{
background-image:url("../img/common/arrow_slider_R.png");
}
/* ========== 導入事例：スライダー矢印を画像に差し替え ========== */
#top .cases-block .cases-slider__btn::before,
#top .cases-block .cases-slider__btn::after{
content: none !important;
}
#top .cases-block .cases-slider__btn{
position:absolute; top:40%; transform:translateY(-50%);
width:40px; height:60px; border:0; background:#fff;
box-shadow:0 6px 18px rgba(2,32,62,.10);
display:grid; place-items:center; cursor:pointer; z-index:3;
}
#top .cases-block .cases-slider__btn--prev{ left:0; border-radius:0 30px 30px 0; }
#top .cases-block .cases-slider__btn--next{ right:0; border-radius:30px 0 0 30px; }
#top .cases-block .cases-slider__btn > span{
display:block;
width:12px; height:20px;
background-position:center;
background-repeat:no-repeat;
background-size:contain;
}
#top .cases-block .cases-slider__btn--prev > span{
background-image:url("../img/common/arrow_slider_L.png");
}
#top .cases-block .cases-slider__btn--next > span{
background-image:url("../img/common/arrow_slider_R.png");
}
#top .cases-cats{
margin-top: 26px;
}
#top .cases-cats__list{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
#top .cases-cats__list a{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:20px 18px;
background:#fff;
border:1px solid #eef2f7;
box-shadow: 0 0 16px rgba(0,0,0,.08);
text-decoration:none;
color:#0f172a;
}
#top .cases-cats__list .label{
font-weight:700;
}
#top .cases-cats__list .arrow-circle{ flex:0 0 auto; }
#top .cases-slider__track{
align-items: flex-start;
}
#top .cases-card{
display: flex;
flex-direction: column;
}
#top .cases-card__media{ flex: 0 0 auto; }
#top .cases-card__text { flex: 0 0 auto;}
#top .cases-slider .cases-card__text { flex: 0 0 auto;padding-left: 10px;padding-right: 10px; }
#top .cases-slider a{
text-decoration: none;
}
#top .cases-card__tags { flex: 0 0 auto; }
#top .cases-block .cases-slider{ margin-bottom: 22px; }
#top .cases-cats{ clear: both; }
#top .cases-card__title{ margin-top: 0;}
#top .cases-slider .cases-card__title{ margin-top: 0;padding-left: 10px;padding-right: 10px; }
#top .cases-card__media img{ display:block; }
#top .columns-block .card__title{
font-weight: 700 !important;
}
#top .columns-block .card__text{
color: #475569;
}
#top .columns-block .columns-list{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px;
margin-top: 40px;
}
#top .columns-block .cases-card__media{
aspect-ratio: 16 / 9;
background: #f2f5f8;
margin: 0 0 16px;
}
#top .columns-block .cases-card__media img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#top .columns-block .top_cats{
margin-top: 28px;
}
@media (max-width: 1024px){
#top .columns-block .columns-list{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px){
#top .columns-block .columns-list{
grid-template-columns: 1fr;
}
}
/* ============================================================
共通パーツ：top_cats（4リンクの行）
※ 既存 .cases-block 用の CSS はそのまま、
ここでは .top_cats にも同じ見た目が適用されるように追加
============================================================ */
#top .top_cats { margin-top: 24px; }
#top .cases-block .cases-cats__list,
#top .top_cats .cases-cats__list{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin: 18px 0 0;
padding: 0;
}
#top .cases-block .cases-cats__list a,
#top .top_cats .cases-cats__list a{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
background: #fff;
color: #0f172a;
text-decoration: none;
border: 1px solid #e6edf2;
box-shadow: 0 4px 12px rgba(2, 32, 62, 0.06);
}
#top .cases-block .cases-cats__list .label,
#top .top_cats .cases-cats__list .label{
font-weight: 700;
font-size: 16px;
}
#top .cases-block .cases-cats__list .arrow-circle,
#top .top_cats .cases-cats__list .arrow-circle{
flex-shrink: 0;
}
/* ============================================================
Columns heading（コラムの見出し）＝導入事例と同仕様
※ 既存を壊さないよう .columns-block スコープで追加
============================================================ */
#top .columns-block .section-h--row{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:12px 0 18px;
}
#top .columns-block .eyebrow{
margin:0 0 6px;
font-size:14px;
font-weight:700;
color:#00A7EB;
letter-spacing:.02em;
}
#top .columns-block .ttl{
margin:0;
font-size:36px;
line-height:1.2;
font-weight:800;
color:#0f172a;
padding: 0px 0px 0px 0px;
}
#top .columns-block .section-h--row .link-more{
flex:0 0 auto;
}
/* ============================================================
Column cards：リンク体裁を Cases と完全一致に（青/下線を消す）
※ 追記でOK。差し替え不要
============================================================ */
#top .columns-block .cases-card a{
color:#0f172a;
text-decoration:none;
}
#top .columns-block .cases-card a:visited{
color:#ffffff;
}
#top .columns-block .cases-card a:hover{
text-decoration:none;
}
#top .columns-block .cases-card__title{
margin:0 0 10px;
font-size:18px;
font-weight:800;
color:#0f172a;
position:relative;
padding-right:28px;
}
#top .columns-block .cases-card__title a{
color:#0f172a;
text-decoration:none;
display:inline-block;
}
#top .columns-block .cases-card__media{
aspect-ratio:16/9;
background:#f2f5f8;
margin:0 0 16px;
}
#top .columns-block .cases-card__media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* ============================================================
Recruit（採用情報）調整：サイズ／寄せ／背景
============================================================ */
#top .recruit-block{
position: relative;
margin-block: var(--section-gap) 0;
min-height: 500px;
display: flex;
align-items: center;
--recruitY: 100%;
background-image: url("../img/common/bg_recruit.png");
background-repeat: no-repeat;
background-position: right var(--recruitY);
background-size: cover;
will-change: background-position;
}
@media (min-width: 1200px){
#top .recruit-block{
background-size: cover;
}
}
#top .recruit-block .contIn1170{ position: relative; z-index: 1; }
#top .recruit-block__panel{
width: 570px;
height: 380px;
box-sizing: border-box;
background: rgba(255,255,255,.95);
padding: 36px 40px;
padding: 36px 33px;
box-shadow: 0 10px 24px rgba(0,0,0,.12);
display: flex;
flex-direction: column;
justify-content: center;
}
#top .recruit-block .eyebrow{
margin: 0 0 8px;
font-size: 14px; font-weight: 700; letter-spacing: .02em;
color: var(--c-primary);
text-align: center;
}
#top .recruit-block .ttl{
margin: 0 0 16px;
font-size: 36px; line-height: 1.25; font-weight: 800; color:#0f172a;
text-align: center;
}
@media (max-width: 760px){
#top .recruit-block .ttl{
padding-left: 0;
}
}
#top .recruit-block .lead{
margin: 0 0 24px;
color: #334155; line-height: 1.9; font-size: 15px;
text-align: center;
}
#top .recruit-block .link-more--lg{
width: 255px; height: 80px;
font-size: 18px; line-height: 1;
margin-inline: auto;
}
#top .recruit-block{
--recruitY: 100%;
background-position: right var(--recruitY);
will-change: background-position;
}
@media (prefers-reduced-motion: reduce){
#top .recruit-block{
--recruitY: 100%;
}
}
/* ===========================
About hero（パララックス）
※ 既存の background はそのまま
※ 2レイヤー（1:グラデ, 2:画像）それぞれの position を上書き
=========================== */
#top .about-hero{
--aboutY: 0px;
margin-bottom: 0;
background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, cover;
background-position:
center center,
right calc(100% + var(--aboutY, 0px));
}
/* ============================================================
MOBILE / TABLET RESPONSIVE ADD-ONS（末尾追記）
============================================================ */
/* ---------- 共通トークン微調整（タブレット以下） ---------- */
@media (max-width: 960px){
body{ --section-gap: 48px; --gap: 20px; }
}
/* ---------- 共通トークン微調整（スマホ） ---------- */
@media (max-width: 760px){
body{ --section-gap: 40px; --gap: 16px; }
}
/* ============================================================
News（お知らせ）
============================================================ */
@media (max-width: 960px){
#top .news-block .contIn1170{
grid-template-columns: 1fr;
row-gap: 18px;
display: block;
}
#top .news-block .section-h{ grid-column: 1; grid-row:auto; gap:0;margin-bottom: 15px;}
#top .news-block .news-cat{ grid-column: 1; }
#top .news-block .news-lines{ grid-column: 1; }
}
@media (max-width: 760px){
#top .news-block .news-cat{
gap: 18px;
margin: 0 0 10px;
}
#top .news-block .news-cat button{
font-size: 15px;
padding: 10px 0;
}
#top .news-block .news-lines a{
grid-template-columns: 90px auto 1fr 18px;
gap: 12px;
padding: 14px 0;
}
#top .news-block .news-badge{
height: 22px; padding: 0 8px; font-size: 10px; width: auto;
}
}
/* ============================================================
Cases（導入事例：スライダー）
============================================================ */
@media (max-width: 960px){
#top .cases-slider__track{ gap: 24px; }
#top .cases-card{ flex: 0 0 70vw; background: #FFF;}
}
@media (max-width: 767px){
#top .cases-block .contIn1170{
width: 100%;
padding-left: 20px;
}
#top .cases-block{
margin-left: -20px;
margin-right: -20px;
}
#top .cases-block .cases-slider__btn{ display: none; }
#top .cases-slider__track{ gap: 20px; padding: 0px; }
#top .cases-card{ flex: 0 0 82vw; }
#top .cases-slider__bar{ height: 4px; }
}
@media (max-width: 960px){
#top .cases-block .top_cats{
padding-left: 20px; padding-right: 20px;
}
#top .cases-block .top_cats .contIn1170{
padding-left: 0;
}
#top .top_cats .cases-cats__list{
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
}
@media (max-width: 760px){
#top .top_cats .cases-cats__list{ gap: 12px;display: block; }
#top .top_cats .cases-cats__list a{ height: 56px; padding: 0 12px; }
#top .top_cats .cases-cats__list .label{ font-size: 16px; }
#top .top_cats .arrow-circle{ --s: 16px; }
}
/* ============================================================
Columns（コラム：カードは導入事例と同ルック・静的）
============================================================ */
@media (max-width: 960px){
#top .columns-block .columns-cards{ grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 760px){
#top .columns-block .columns-cards{ grid-template-columns: 1fr; gap: 16px; }
#top .columns-block .cases-card__title{ padding-right: 26px; }
}
/* ============================================================
Recruit（採用情報：パララックス背景＋カード中央）
============================================================ */
@media (max-width: 960px){
#top .recruit-block__card{
width: min(570px, calc(100vw - 64px));
}
}
@media (max-width: 760px){
#top .recruit-block{
min-height: 420px;
padding: 24px 0 0;
}
#top .recruit-block__card{
width: calc(100vw - 32px);
padding: 22px;
}
#top .recruit-block__eyebrow{ font-size: 12px; }
#top .recruit-block__title{ font-size: 26px; }
#top .recruit-block__btn{
width: 100%;
max-width: 255px;
height: 68px;
}
}
/* ============================================================
Header / KV
============================================================ */
@media (max-width: 760px){
#top .kv__dots{ gap: 10px; padding: 0 10px; }
#top .kv__dots button{ width: 10px; height: 10px; }
}
/* ============================================================
Footer（段組み→2段/1段）
============================================================ */
@media (max-width: 960px){
#top .footer-cols{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
}
@media (max-width: 1024px){
#top .footer-cols{ grid-template-columns: 1fr; }
#top .site-footer__middle .footer-menu{
flex-wrap: wrap; gap: 8px 16px;
}
#top .site-footer__middle .footer-menu li+li::before{
margin: 0 8px;
opacity: .5;
}
}
/* ============================================================
SP ヘッダー：ハンバーガー＆ドロワー
============================================================ */
#top .sp-nav-toggle{
display:none;
width:44px; height:44px;
border:1px solid #e6edf2;
background:#fff;
color:#00a7eb;
position:absolute; right:12px; top:8px;
z-index:1100; cursor:pointer;
}
#top .sp-nav-toggle__bar,
#top .sp-nav-toggle__bar::before,
#top .sp-nav-toggle__bar::after{
content:"";
position:absolute; left:50%;
width:18px; height:2px; background:#00a7eb;
transform:translateX(-50%);
}
#top .sp-nav-toggle__bar{ top:50%; }
#top .sp-nav-toggle__bar::before{ top:-6px; }
#top .sp-nav-toggle__bar::after { top: 6px; }
@media (max-width:1024px){
#top .sp-nav-toggle{ display:block; }
#top .gnav{ display:none; }
}
#top .sp-nav{
position:fixed; inset:0; z-index:1200;
background:rgba(15,23,42,.4);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .25s ease, visibility .25s ease;
}
#top .sp-nav.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
#top .sp-nav__inner{
position:absolute; top:0; right:0; bottom:0;
width:min(86vw, 360px);
background:#fff;
transform:translateX(100%);
transition:transform .28s cubic-bezier(.22,1,.36,1);
padding:24px 18px;
display:flex; flex-direction:column; gap:18px;
}
#top .sp-nav.is-open .sp-nav__inner{ transform:translateX(0); }
#top .sp-nav__close{
align-self:flex-end;
width:36px; height:36px; border:0; background:transparent; position:relative;
}
#top .sp-nav__close::before,
#top .sp-nav__close::after{
content:""; position:absolute; inset:0; margin:auto; width:18px; height:2px; background:#0f172a;
}
#top .sp-nav__close::before{ transform:rotate(45deg); }
#top .sp-nav__close::after { transform:rotate(-45deg); }
#top .sp-nav__menu{ list-style:none; margin:0; padding:0; }
#top .sp-nav__menu li + li{ border-top:1px solid #e6edf2; }
#top .sp-nav__menu a{
display:block; padding:14px 2px;
text-decoration:none; color:#0f172a; font-weight:700;
}
@media (max-width: 1024px){
#top .site-header .hamburger,
#top .site-header .sp-nav-toggle,
#top .site-header .gnav-toggle{
appearance: none;
-webkit-appearance: none;
border: 0;
box-shadow: none;
outline: none;
background-color: #fff;
}
/* （任意）キーボード操作時の視認性は保ちたい場合だけ有効化
#top .site-header .hamburger:focus-visible,
#top .site-header .sp-nav-toggle:focus-visible,
#top .site-header .gnav-toggle:focus-visible{
outline: none;
}
*/
}
@media (max-width: 1024px){
#top .sp-nav-toggle{ display:block; }
#top .gnav{ display:none; }
#top .header-contact{ right:56px; }
}
@media (max-width:1024px){
#top .header-contact{ display:none !important; }
}
body.is-locked{ overflow:hidden; }
/* ============================================================
KV：SPでコントローラーを画像の下に
============================================================ */
@media (max-width: 1024px){
#top .kv{ padding-bottom:0; }
#top .kv__controls{
position:static; right:auto; bottom:auto;
display:flex; align-items:center;
gap:12px; margin-top:10px;
}
#top .kv__dots{ padding:0; background:transparent; }
#top .kv__toggle{ margin-left:auto; order:0; }
}
@media (max-width: 1024px){
#top .kv__controls{
display:flex;
align-items:center;
gap:12px;
margin-top:10px;
}
#top .kv__dots{
flex: 1 1 auto;
display:flex;
justify-content:center;
}
#top .kv__toggle{
margin-left:auto;
}
}
/* ============================================================
業種から探す（SPは4列）
============================================================ */
@media (max-width: 1024px){
#top .industry-nav{
padding-top: 10px;
padding-bottom: 10px;
}
#top .industry-nav .contIn1170{
margin: 0;
width: 100%;
padding: 0 !important;
}
#top .industry-nav__list{
grid-template-columns: repeat(4, minmax(0,1fr)) !important;
gap:0;
position:relative;
margin-left: 0;
padding-left: 0;
}
#top .industry-nav__list::before,
#top .industry-nav__list::after,
#top .industry-nav__list li + li::before{ display:none; }
#top .industry-nav__list li{
position:relative;
}
#top .industry-nav__list li:not(:nth-child(4n+1))::after{
content:""; position:absolute; top:12px; bottom:12px; left:0;
width:1px; background:#e6edf2;
}
#top .industry-nav__list a{ padding:14px 6px; }
#top .industry-nav__list .ico{ width:48px; }
#top .industry-nav__list .label{ font-size:12px; }
}
/* ============================================================
SP Global Navigation（ハンバーガー開閉）
- 全幅（100%）で左端から表示
- ＋ボタンのアコーディオン
- 最下部に検索フォーム
============================================================ */
@media (max-width:640px){
#top .sp-nav{ width:100vw; left:0; right:0; }
#top .sp-nav__inner{
width:100vw;
max-width: none;
margin: 0;
box-sizing: border-box;
padding-left: 0;
padding-right: 0;
}
}
@media (max-width: 1024px){
#top .sp-nav{
position: fixed;
inset: 0;
left: 0;
width: 100%;
background:#fff;
transform: translateX(100%);
transition: transform .32s cubic-bezier(.16,1,.3,1);
z-index: 1000;
}
#top .sp-nav.is-open{ transform: translateX(0); }
#top .sp-nav[aria-hidden="true"]{ visibility: hidden; }
#top .sp-nav.is-open[aria-hidden="false"]{ visibility: visible; }
#top .sp-nav__inner{
height: 100%;
overflow: auto;
padding: 10px 14px 20px;
}
#top .sp-menu{ margin: 0; padding: 0; list-style:none; }
#top .sp-menu > li{
border-bottom: 1px solid #e6edf2;
}
#top .sp-menu__toggle{
width: 100%;
margin: 0; padding: 18px 8px;
background: transparent;
border: 0; outline: none; box-shadow:none;
display: flex; align-items: center; justify-content: space-between;
font-size: 16px; font-weight: 600; color: #0f172a;
}
#top .sp-menu__link{
display:block;
padding: 18px 8px;
text-decoration: none;
color:#0f172a;
font-size:16px; font-weight:600;
}
#top .sp-menu__toggle .plus{
position: relative;
width: 24px; height: 24px; flex: 0 0 24px;
}
#top .sp-menu__toggle .plus::before,
#top .sp-menu__toggle .plus::after{
content:""; position:absolute; left:50%; top:50%;
width: 16px; height: 2px; background:#00A7EB;
transform: translate(-50%,-50%);
transition: transform .2s ease, opacity .2s ease;
}
#top .sp-menu__toggle .plus::after{
transform: translate(-50%,-50%) rotate(90deg);
}
#top .sp-menu__toggle[aria-expanded="true"] .plus::after{
transform: translate(-50%,-50%) rotate(0deg);
opacity: 0;
}
#top .sp-menu-has-link {
position: relative;
}
#top .sp-menu-has-link .sp-menu__toggle{
position: absolute;
right: 8px;
width: 24px;
padding: 18px 0;
z-index: 10;
top: 0;
}
#top .sp-sub{
background:#f8fafc;
border-top: 1px solid #e6edf2;
padding: 0px 8px 14px;
}
#top .sp-sub ul{ list-style:none; margin:0; padding:0; }
#top .sp-sub li + li{ border-top:1px dashed #e2e8f0; }
#top .sp-sub a{
display:block; padding:12px 4px 12px 14px;
color:#0f172a; text-decoration:none; font-size:16px; font-weight:600;
position: relative;
}
#top .sp-sub a::before{
content:""; position:absolute; left:4px; top:50%;
width: 10px; height: 2px; background:#00A7EB; transform: translateY(-50%);
}
#top .sp-search{
margin-top: 18px;
padding: 14px 8px 6px;
display:flex; gap:8px; align-items:center;
}
#top .sp-search input[type="search"]{
flex: 1 1 auto; height: 48px;
border:1px solid #dbe7f1; border-radius: 8px;
padding: 0 14px; font-size:16px;
outline:none;
}
#top .sp-search__btn{
flex: 0 0 48px; width:48px; height:48px;
border:0; border-radius:8px;
background:#00A7EB;
mask: url("data:image/svg+xml;utf8,") center/20px 20px no-repeat;
-webkit-mask: url("data:image/svg+xml;utf8,") center/20px 20px no-repeat;
color: transparent;
}
#top .sr-only{ position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); overflow:hidden; white-space:nowrap; }
}
/* =========================
SP Global Nav: 位置とボタン
========================= */
@media (max-width: 1024px){
#top .sp-nav{
position: fixed;
left: 0; right: 0;
top: var(--spnav-top, 64px);
height: calc(100vh - var(--spnav-top, 64px));
width: 100vw;
z-index: 1000;
}
#top .sp-nav__inner{
width: 100vw;
max-width: none;
height: 100%;
overflow: auto;
margin: 0;
box-sizing: border-box;
padding-left: 0;
padding-right: 0;
}
#top .sp-menu-btn{
position: relative;
width: 44px; height: 44px;
border: 0; background: #fff;
}
#top .sp-menu-btn::before,
#top .sp-menu-btn::after,
#top .sp-menu-btn i{
content: "";
position: absolute;
left: 10px; right: 10px;
height: 2px; background: #00a7eb;
top: 50%; transform: translateY(-50%);
}
#top .sp-menu-btn::before{ top: 15px; transform: none; }
#top .sp-menu-btn::after { top: auto; bottom: 15px; transform: none; }
#top .sp-menu-btn i{ display:block; }
#top .sp-menu-btn.is-open i{ background: transparent; }
#top .sp-menu-btn.is-open::before{
top: 50%; transform: translateY(-50%) rotate(45deg);
}
#top .sp-menu-btn.is-open::after{
top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg);
}
}
/* ========== SPメニュー：ハンバーガー → × ========== */
@media (max-width: 1024px){
#top .sp-menu-btn{
position: relative;
width: 44px; height: 44px;
border: 0; background:#fff; outline: none;
}
#top .sp-menu-btn::before,
#top .sp-menu-btn::after,
#top .sp-menu-btn i{
content:"";
position:absolute;
left:10px; right:10px;
height:2px; background:#00a7eb;
transition: transform .2s ease, opacity .15s ease;
}
#top .sp-menu-btn::before{ top:14px; }
#top .sp-menu-btn i{ top:50%; transform:translateY(-50%); }
#top .sp-menu-btn::after { bottom:14px; }
#top .sp-menu-btn.is-open > *,
#top .sp-menu-btn.is-open svg{ opacity:0; visibility:hidden; }
#top .sp-menu-btn.is-open i{ opacity:0; }
#top .sp-menu-btn.is-open::before{
top:50%; transform:translateY(-50%) rotate(45deg);
}
#top .sp-menu-btn.is-open::after{
bottom:auto; top:50%; transform:translateY(-50%) rotate(-45deg);
}
#top .sp-nav__close{
position: absolute; top:8px; right:8px;
width: 44px; height: 44px; border:0; background:#fff; z-index: 1001;
}
#top .sp-nav__close::before,
#top .sp-nav__close::after{
content:""; position:absolute; left:12px; right:12px; top:50%;
height:2px; background:#00a7eb;
}
#top .sp-nav__close::before{ transform:translateY(-50%) rotate(45deg); }
#top .sp-nav__close::after { transform:translateY(-50%) rotate(-45deg); }
}
#top .sp-nav{
transition: transform .32s ease, opacity .32s ease;
}
#top .sp-nav.is-closing{
transform: translateX(100%);
opacity: 0;
visibility: visible;
display: block;
}
/* =========================================================
追記：ハンバーガー（閉＝3本線／開＝X） 完全上書きセット
========================================================= */
@media (max-width: 1024px){
#top .site-header{ position: relative; }
#top .site-header .sp-menu-btn{
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 1001 !important;
width: 44px; height: 44px;
background: #fff;
border: 0; outline: none;
box-shadow: none;
}
#top .sp-menu-btn i,
#top .sp-menu-btn svg,
#top .sp-menu-btn img,
#top .sp-menu-btn span{
display: none !important;
}
#top .sp-menu-btn::before{
content:"";
position:absolute;
left: 10px; right: 10px;
top:50%;
height:2px;
background:#00A7EB;
box-shadow: 0 -7px 0 0 #00A7EB, 0 7px 0 0 #00A7EB;
transform: translateY(-50%) rotate(0deg);
border-radius: 1px;
transition: transform .25s ease, box-shadow .2s ease, opacity .2s ease;
}
#top .sp-menu-btn::after{
content:"";
position:absolute;
left: 10px; right: 10px;
top:50%;
height:2px;
background:#00A7EB;
transform: translateY(-50%) rotate(0deg);
opacity: 0;
border-radius: 1px;
transition: transform .25s ease, opacity .2s ease;
}
#top .sp-menu-btn.is-open::before{
box-shadow: none;
transform: translateY(-50%) rotate(45deg);
}
#top .sp-menu-btn.is-open::after{
opacity: 1;
transform: translateY(-50%) rotate(-45deg);
}
}
/* === ハンバーガー → X を強制（最下部に追記） =================== */
@media (max-width: 1024px){
#top .site-header .sp-menu-btn::before{
box-shadow: 0 -7px 0 0 #00A7EB, 0 7px 0 0 #00A7EB !important;
}
#top .site-header .sp-menu-btn::after{
opacity: 0 !important;
transform: translateY(-50%) rotate(0) !important;
}
#top .site-header .sp-menu-btn.is-open::before{
box-shadow: none !important;
transform: translateY(-50%) rotate(45deg) !important;
}
#top .site-header .sp-menu-btn.is-open::after{
opacity: 1 !important;
transform: translateY(-50%) rotate(-45deg) !important;
}
#top .site-header .sp-menu-btn i,
#top .site-header .sp-menu-btn svg,
#top .site-header .sp-menu-btn img,
#top .site-header .sp-menu-btn span{
display: none !important;
}
}
@media (max-width: 1024px){
#top .sp-menu-btn{
width: 44px;
height: 44px;
background-color: #fff !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
border: 0;
outline: none;
background-image: url("data:image/svg+xml;utf8,") !important;
}
#top .sp-menu-btn::before,
#top .sp-menu-btn::after,
#top .sp-menu-btn i,
#top .sp-menu-btn svg,
#top .sp-menu-btn img,
#top .sp-menu-btn span{
display: none !important;
content: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
#top .sp-menu-btn.is-open{
background-image: url("data:image/svg+xml;utf8,") !important;
}
}
@media (max-width: 1024px){
#top .site-header .sp-menu-btn,
#top .site-header .sp-nav-toggle{
width: 44px;
height: 44px;
background-color: #fff !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
border: 0;
outline: none;
background-image: url("data:image/svg+xml;utf8,") !important;
}
#top .site-header .sp-menu-btn::before,
#top .site-header .sp-menu-btn::after,
#top .site-header .sp-menu-btn i,
#top .site-header .sp-menu-btn svg,
#top .site-header .sp-menu-btn img,
#top .site-header .sp-menu-btn span,
#top .site-header .sp-nav-toggle::before,
#top .site-header .sp-nav-toggle::after,
#top .site-header .sp-nav-toggle i,
#top .site-header .sp-nav-toggle svg,
#top .site-header .sp-nav-toggle img,
#top .site-header .sp-nav-toggle span{
display: none !important;
content: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
#top .site-header .sp-menu-btn.is-open,
#top .site-header .sp-nav-toggle.is-open{
background-image: url("data:image/svg+xml;utf8,") !important;
}
}
/* =========================
SP Global Nav: 小メニュー体裁
========================= */
@media (max-width: 1024px){
#top .sp-nav .sp-sub{
background: none;
margin-left: 0px;
}
#top .sp-nav .sp-sub ul{
margin: 0;
padding: 6px 8px;
list-style: none;
}
#top .sp-nav .sp-sub li{
border-bottom: 1px solid #DCDCDC !important;
border-top: none;
}
#top .sp-nav .sp-sub li:last-child{
border-bottom: none !important;
}
#top .sp-nav .sp-sub a{
display: block;
color: #0f172a;
text-decoration: none;
padding: 12px 8px 12px 28px;
}
#top .sp-nav .sp-sub a::before{
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 12px;
height: 2px;
background: #00A7EB;
transform: translateY(-50%);
}
}
/* =========================
SPグロナビ：検索フォームの体裁
========================= */
@media (max-width: 1024px){
#top .sp-nav .sp-search{
position: relative;
padding: 16px;
}
#top .sp-nav .sp-search__field,
#top .sp-nav .sp-search input[type="search"]{
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 48px;
border: 0;
border-radius: 10px;
background: #F6F6F6;
padding: 0 56px 0 16px;
font-size: 16px;
color: #0f172a;
}
#top .sp-nav .sp-search__field::placeholder,
#top .sp-nav .sp-search input[type="search"]::placeholder{
color: #9AA4AF;
}
#top .sp-nav .sp-search__field:focus,
#top .sp-nav .sp-search input[type="search"]:focus{
outline: none;
background: #fff;
box-shadow: inset 0 0 0 2px #00A7EB;
}
#top .sp-nav .sp-search__btn,
#top .sp-nav .sp-search button[type="submit"]{
position: absolute;
top: 50%; right: 22px;
transform: translateY(-50%);
width: 36px; height: 36px;
border-radius: 50%;
border: 2px solid #00A7EB;
padding: 0;
display: grid; place-items: center;
cursor: pointer;
}
#top .sp-nav .sp-search__btn::before,
#top .sp-nav .sp-search button[type="submit"]::before{
content: "";
width: 12px; height: 12px;
border-radius: 50%;
border: 2px solid #00A7EB;
}
#top .sp-nav .sp-search__btn::after,
#top .sp-nav .sp-search button[type="submit"]::after{
content: "";
position: absolute;
width: 10px; height: 2px;
background: #00A7EB;
transform: rotate(45deg);
right: 8px; bottom: 9px;
}
}
/* =========================
SP Header: 86px / side padding 20px
========================= */
@media (max-width: 1024px){
#top .site-header{
height: 60px;
}
#top .site-header__inner{
height: 60px;
padding: 0 20px;
gap: 16px;
width: auto;
}
#top .sp-menu-btn{ margin-left: auto; }
#top .site-header__inner{ padding-right: 20px; }
#top .logo img{ margin-left: 0; }
}
@media (max-width: 1024px){
#top .sp-nav{
top: var(--spnav-top, 86px) !important;
height: calc(100vh - var(--spnav-top, 86px)) !important;
}
#top .sp-nav__inner{
padding-top: 0 !important;
}
}
/* ==============================
SP: 重要なお知らせ（≦640px）
============================== */
@media (max-width: 1024px){
#top .urgent__item{
display:grid;
grid-template-columns: 28px 1fr 32px;
grid-template-rows: auto auto auto;
align-items:center;
gap: 10px 12px;
padding: 16px;
}
#top .urgent__icon{
grid-column: 1;
grid-row: 1 / 4;
width: 24px; height: auto;
align-self: center;
justify-self: center;
}
#top .urgent__badge{
grid-column: 2;
grid-row: 1;
font-size: 18px;
font-weight: 800;
color: #0f172a;
}
#top .urgent__time{
grid-column: 2;
grid-row: 2;
margin: 2px 0 2px;
color:#334155;
font-variant-numeric: tabular-nums;
font-size: 16px;
}
#top .urgent__link{
grid-column: 2;
grid-row: 3;
color:#0f172a;
text-decoration: none;
font-size: 16px;
line-height: 1.6;
}
#top .urgent__item > .arrow-circle,
#top .urgent__item > .is-arrow{
grid-column: 3;
grid-row: 1 / 4;
justify-self: end;
align-self: center;
}
}
/* ==============================
SP: 重要なお知らせ 微調整（≦640px）
============================== */
@media (max-width: 1024px){
#top .urgent__item{
padding: 16px 20px;
grid-template-columns: 28px 1fr 28px;
}
#top .urgent__item > .arrow-circle,
#top .urgent__item > .is-arrow{
grid-column: 3;
grid-row: 3;
justify-self: end;
align-self: center;
}
}
@media (max-width: 1024px){
#top .urgent__item{
display: grid;
grid-template-columns: 28px 1fr 28px;
grid-template-rows: auto auto auto;
column-gap: 12px;
row-gap: 8px;
padding: 16px 20px;
}
#top .urgent__icon{
grid-column: 1;
grid-row: 1;
justify-self: center;
align-self: start;
margin: 0;
}
#top .urgent__badge{
grid-column: 2;
grid-row: 1;
margin: 0;
}
#top .urgent__time{
grid-column: 2;
grid-row: 2;
margin: 0;
}
#top .urgent__link{
grid-column: 2;
grid-row: 3;
margin: 0;
min-width: 0;
display: inline-flex;
align-items: center;
}
#top .urgent__item > .arrow-circle,
#top .urgent__item > .is-arrow{
grid-column: 3;
grid-row: 3;
justify-self: end;
align-self: center;
}
}
@media (max-width: 768px){
#top .quick__cards{
grid-template-columns: 1fr !important;
row-gap: 24px;
margin-left: 0;
}
#top .quick__cards a{
min-height: auto;
grid-template-rows: auto 1fr;
}
#top .quick__cards .body{ padding: 16px; }
#top .quick__cards .media{ aspect-ratio: 16 / 9; }
#top .cards--3{
grid-template-columns: 1fr !important;
row-gap: 24px;
}
}
/* =========================================================
SP: About us（about-hero）— はみ出し修正（差し替え）
========================================================= */
@media (max-width: 1024px){
#top .about-hero{
background-image: url("../img/common/bg_about_sp.png");
background-position: top center;
background-repeat: no-repeat;
background-size: 100% auto;
padding: 24px 0 24px;
overflow: hidden;
min-height: auto;
}
#top .about-hero .contIn1170{
width: 100%;
margin: 0;
}
#top .about-hero__inner{
position: static;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#top .about-hero__title{
margin: 0 0 16px;
text-align: left;
font-size: clamp(20px, 5.6vw, 28px);
line-height: 1.35;
}
#top .about-hero__links{
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 110px;
padding: 0;
box-sizing: border-box;
}
#top .about-hero__links a{
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
margin: 0;
}
}
@media (max-width: 1024px){
#top .about-hero{
position: relative;
padding-top: 30px;
}
#top .about-hero__title{
/* position: absolute; */
top: 60px;
/* left: 20px;
right: 20px; */
margin: 0;
text-align: center;
font-size: clamp(30px, 6.5vw, 40px);
line-height: 1.3;
}
}
@media (max-width: 767px){
#top .about-hero{
position: relative;
overflow: hidden;
margin-left: -20px;
margin-right: -20px;
}
#top .about-hero::before{
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-image: url("../img/common/bg_about_sp.png");
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
transform: translateZ(0);
}
#top .about-hero__title,
#top .about-hero__inner{
position: relative;
z-index: 1;
}
}
@media (max-width: 1024px){
#top .news-block > .link-more,
#top .cases-block > .link-more,
#top .columns-block > .link-more{
display: inline-flex;
margin: 20px 0 0;
}
#top .news-block .section-h .link-more,
#top .cases-block .section-h--row .link-more,
#top .columns-block .section-h .link-more{
margin: 0;
}
}
@media (max-width: 1024px){
#top .news-block > .link-more,
#top .cases-block > .link-more,
#top .columns-block > .link-more{ display: flex; align-items: center; justify-content: center; width: calc(100% - 40px); margin: 20px 20px 0; box-sizing: border-box;min-height: 40px; }
#top .columns-block > .link-more{width: 100%; margin: 0; }
}
@media (max-width: 1024px){
#top .columns-block .ttl{
font-size:28px;
}
}
@media (max-width: 1024px){
#top .news-block{
/*margin-bottom: 50px;*/
background: none;
padding-top: 30px;
margin-bottom: 50px;
}
#top .cases-block .ttl {
font-size: 28px;
font-weight: 700;
}
#top .cases-block .cases-slider{
margin-top: 0 !important;
}
#top .columns-block{
background: none;
}
#top .columns-block .columns-list {
margin-top: 0 !important;
}
}
/* =========================
News: SP(≤640px)レイアウト調整
========================= */
@media (max-width:640px){
#top .news-block{
margin-bottom: 50px;
padding-top: 0px;
}
#top .news-block .contIn1170{
padding-top: 50px;
}
#top .news-block .news-cat{ display:none; }
#top .news-block .news-cat--select{
display:block;
margin: 0 20px 20px;
}
#top .news-block .news-cat__select{
appearance:none;
width:100%;
height:44px;
padding:0 44px 0 12px;
border:1px solid #dbe7f1;
border-radius:6px;
background:#fff url("data:image/svg+xml;utf8,") right 12px center/12px 8px no-repeat; font-size:16px; font-weight:700; color:#0f172a;
}
#top .news-block .news-lines a{
display:grid;
grid-template-columns: auto 1fr 28px;
grid-template-rows: auto auto;
grid-template-areas:
"date badge arrow"
"title title arrow";
align-items:center;
gap: 6px 12px;
padding:16px 0;
}
#top .news-block .news-date{ grid-area:date; }
#top .news-block .news-badge{
grid-area:badge;
justify-self:start;
white-space:nowrap;
}
#top .news-block .news-text{
grid-area:title;
white-space:normal;
overflow:visible;
text-overflow:clip;
line-height:1.6;
width: 100%;
padding-right: 20px;
}
#top .news-block .news-lines .arrow-circle{
grid-area:arrow;
justify-self:end;
align-self:center;
position: absolute;
top: 58%;
right: 0;
}
}
@media (max-width:640px){
#top .news-block .news-cat--select{
margin: 0 0px 12px;
}
#top .news-block .news-cat__select{
appearance: none;
width: 100%;
height: 42px;
line-height: 42px;
padding: 0 28px 6px 0;
border: 0;
border-bottom: 1px solid #e6edf2;
border-radius: 0;
background:url("data:image/svg+xml;utf8,") right 6px center/10px 6px no-repeat; color:#0f172a; font-size:18px; font-weight:700; background-color:transparent; cursor:pointer;
}
#top .news-block .news-cat__select:focus{
outline: none;
border-bottom-color:#111827;
}
#top .news-block .news-cat__select{
background:url("data:image/svg+xml;utf8,") right 6px center/10px 6px no-repeat !important;
}
}
/* =========================
Recruit（採用情報） SP 調整
========================= */
@media (max-width:640px){
#top .recruit-block{
padding-bottom: 24px;
}
#top .recruit-block__panel{
position: static !important;
transform: none !important;
top:auto; left:auto; right:auto;
box-sizing: border-box;
width: calc(100% - 40px) !important;
margin: 0 20px;
height: auto;
padding: 22px 20px 26px;
}
#top .recruit-block__panel .recruit-title{
text-align: center;
margin: 0 0 10px;
}
#top .recruit-block__panel .recruit-lead{
text-align: left;
}
#top .recruit-block__panel .link-more{
display: block;
width: 255px; height: 80px;
margin: 22px auto 0;
}
}
/* =========================
Recruit（採用情報） SP 専用修正
========================= */
@media (max-width:640px){
#top .recruit-block{
background-image: url("../img/common/bg_recruit_sp.png") !important;
background-repeat: no-repeat;
background-position: top center !important;
background-size: 100vw auto !important;
padding-top: 24px;
}
#top .recruit-block__panel{
position: static !important;
transform: none !important;
width: calc(100% - 40px) !important;
margin: 24px 20px 28px !important;
box-sizing: border-box;
height: auto !important;
}
#top .recruit-block__panel .recruit-title{
text-align: center;
}
#top .recruit-block__panel .link-more{
display: flex;
align-items: center;
justify-content: center;
width: 255px;
height: 80px;
margin: 22px auto 0;
padding: 0;
}
#top .recruit-block{
background-size: cover !important;
background-position: top center !important;
background-repeat: no-repeat !important;
}
}
/* =========================
Footer: SP
========================= */
@media (max-width:640px){
#top .site-footer__middle,
#top .site-footer__middle .contIn1170{
border-top: none !important;
}
#top .site-footer__middle nav ul{
display: flex;
flex-direction: column;
gap: 12px;
}
#top .site-footer__middle nav li{
display: block;
padding: 0;
margin: 0;
border-left: 0 !important;
}
#top .site-footer__middle nav li+li::before{
content: none !important;
}
#top .site-footer__middle nav a{
display: block;
padding: 6px 0;
}
#top .site-footer__policies ul{
display: flex;
flex-direction: column;
gap: 12px;
}
#top .site-footer__policies li{
display: block;
padding: 0;
margin: 0;
border-left: 0 !important;
}
#top .site-footer__policies li+li::before{
content: none !important;
}
#top .site-footer__policies a{
display: block;
padding: 6px 0;
}
}
@media (max-width:640px){
#top footer.site-footer .site-footer__middle,
#top footer.site-footer .site-footer__middle .contIn1170{
border-top: none !important;
box-shadow: none !important;
}
#top footer.site-footer .site-footer__middle::before,
#top footer.site-footer .site-footer__middle::after,
#top footer.site-footer .site-footer__middle .contIn1170::before,
#top footer.site-footer .site-footer__middle .contIn1170::after{
content: none !important;
}
#top footer.site-footer .site-footer__middle hr{
display: none !important;
}
#top footer.site-footer .site-footer__middle{
background-image: none !important;
padding-bottom: 20px;
padding-top: 0px;
margin-top: -40px;
display: none;
}
#top .site-footer .fcol ul {
display: none;
}
#top .site-footer .fcol h3 {
display: none;
}
#top .site-footer .fcol:nth-of-type(3) h3,
#top .site-footer .fcol:nth-of-type(4) h3:nth-of-type(4) {
display: block;
}
#top footer.site-footer .site-footer__middle nav,
#top footer.site-footer .site-footer__middle .footer-links,
#top footer.site-footer .site-footer__middle nav ul{
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 12px !important;
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
}
#top footer.site-footer .site-footer__middle nav li,
#top footer.site-footer .site-footer__middle .footer-links li{
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
#top footer.site-footer .site-footer__middle nav li+li::before,
#top footer.site-footer .site-footer__middle .footer-links li+li::before{
content: none !important;
}
#top footer.site-footer .footer-links--policies{
text-align: left !important;
justify-content: flex-start !important;
align-items: flex-start !important;
margin-left: 0;
}
#top footer.site-footer .footer-links--policies ul{
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
align-items: flex-start !important;
}
#top footer.site-footer .footer-links--policies li{
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
#top footer.site-footer .footer-links--policies li+li::before{
content: none !important;
}
}
/* ===== News：PCではSP用プルダウンを非表示 ===== */
@media (min-width: 641px){
/* セクション内だけを対象に限定して安全に隠す */
#top .news-cat--select {
display: none !important;
}
}
/* ===== .quick__cards（ボックス全体ラップを化） ===== */
#top .quick__cards > li {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
min-height: 270px;
background: #fff;
border: none;
overflow: hidden;
box-shadow: var(--shadow);
}
/* 覆いリンク（最後のa）は透明のカバーだけにする */
#top .quick__cards > li > a:last-child {
position: absolute;
inset: 0;
display: block;
text-decoration: none;
color: inherit;
min-height: 0;
background: transparent;
box-shadow: none;
}
/* 見出し内リンクはインライン表示（既存の a{display:grid} を打ち消し） */
#top .quick__cards > li .body h3 > a {
display: inline;
min-height: auto;
text-decoration: none;
color: inherit;
background: transparent;
box-shadow: none;
}
/* 既存スタイルをに対応させるための補強（レイアウト維持） */
#top .quick__cards > li .body {
padding: 25px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
#top .quick__cards > li h3 { font-size: 16px; margin: 0; }
#top .quick__cards > li .arrow-circle { margin-left: 12px; flex-shrink: 0; }
#top .quick__cards > li .media { margin: 0; aspect-ratio: 16/9; }
#top .quick__cards > li .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ===== .about-hero__links を 本体でレイアウト ===== */
/* 既存では a を箱にしていたため、li を箱化して上書きする */
#top .about-hero__links > li{
width: 370px;
height: 100px;
box-sizing: border-box;
background: #fff;
color: #0f172a;
display: flex;
align-items: center;
gap: 16px;
padding: 0 16px 0 0;
overflow: hidden;
}
/* サムネ（img）サイズを a 依存せずに固定 */
#top .about-hero__links > li > img.about-hero__thumb{
display: block;
width: 120px; /* 必要に応じて調整可。元デザインに合わせる */
height: 100px;
object-fit: cover;
flex: 0 0 120px;
margin: 0;
}
/* ラベル中のリンクはインラインのまま（aを箱にしない） */
#top .about-hero__links .about-hero__label > a{
display: inline;
text-decoration: none;
color: inherit;
}
/* 右端の矢印をフレックス末尾へ */
#top .about-hero__links > li .arrow-circle{
margin-left: auto;
flex-shrink: 0;
}
/* 既存の a を箱にする指定が強い場合に備えた無効化（局所上書き） */
#top .about-hero__links a{
width: auto !important;
height: auto !important;
display: inline !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* レスポンシブ補助：SPでは横幅いっぱいで1列 */
@media (max-width: 1024px){
#top .about-hero__links{
grid-template-columns: 1fr !important;
gap: 16px;
margin-left: 0;
}
#top .about-hero__links > li{
width: 100%;
}
#top .about-hero__links > li > img.about-hero__thumb{
width: 120px;
height: 80px; /* 必要ならSP高さを調整 */
flex-basis: 120px;
}
}
#top .about-hero__links > li { cursor: pointer; }
/* ===== .industry-nav__list を 本体でレイアウト ===== */
/* 既存では a を箱としていたため、li を箱化して上書き */
#top .industry-nav__list > li{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 15px;
padding: 16px 0px;
background: transparent;
box-shadow: none;
cursor: pointer;
}
/* ラベル内リンクはインライン（a を箱にしない） */
#top .industry-nav__list > li .label > a{
display: inline;
text-decoration: none;
color: inherit;
}
/* 既存の「a を箱にする指定」を局所的に打ち消し */
#top .industry-nav__list > li a{
width: auto !important;
height: auto !important;
display: inline !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* ===== .cases-cats__list を 本体でレイアウト ===== */
/* 既存は a を箱にしていたため、li を箱化して上書き */
#top .cases-cats__list > li{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 20px 18px;
background: #fff;
border: 1px solid #eef2f7;
box-shadow: 0 0 16px rgba(0,0,0,.08);
cursor: pointer;
}
@media (max-width: 760px){
#top .cases-cats__list > li{
margin-bottom: 20px;
}
}
/* ラベル中のリンクはインラインのまま（a を箱にしない） */
#top .cases-cats__list > li .label > a{
display: inline;
text-decoration: none;
color: #0f172a;
}
/* 既存の a を箱にする指定を局所無効化（安全上書き） */
#top .cases-cats__list > li a{
width: auto !important;
height: auto !important;
display: inline !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* ===== .news-lines レイアウト最終調整（行に余白／矢印は右端固定） ===== */
#top .news-lines {
list-style: none;
margin: 0;
padding: 0;
}
#top .news-lines .news-line {
position: relative;
display: flex;
align-items: center;
gap: 16px; /* 要素間の間隔 */
padding: 18px 28px; /* 行の上下左右余白（添付2の“しっかり余白”） */
border-bottom: 1px solid #e6edf3;
}
/* 日付は桁を揃えて固定幅に */
#top .news-lines .news-date {
flex: 0 0 auto;
width: 9.2em; /* 2025.10.01 が収まる幅 */
font-variant-numeric: tabular-nums;
line-height: 1.6;
}
/* バッジは可変だが折り返しに備えてauto幅 */
#top .news-lines .news-badge {
flex: 0 0 auto;
}
/* 本文は可変で伸縮、長文は省略せず折り返し */
#top .news-lines .news-text {
flex: 1 1 auto;
min-width: 0;
}
/* テキスト内リンクはインライン（aを箱にしない） */
#top .news-lines .news-text > a {
display: inline;
text-decoration: none;
color: inherit;
}
/* 既存の「aを箱扱い」にしている強い指定があれば無効化 */
#top .news-lines .news-line a {
width: auto !important;
height: auto !important;
display: inline !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
text-decoration: underline;
}
/* 矢印は常に行の一番右へ */
#top .news-lines .arrow-circle {
margin-left: auto; /* これで右端へ押し出す */
flex: 0 0 auto;
position: absolute;
right: 0;
}
/* :hoverの見た目（必要に応じて調整） */
#top .news-lines .news-line:hover {
background: rgba(15, 23, 42, 0.02);
}
.news-line:not(:has(a)) .arrow-circle {
display: none;
}
/* モバイル調整 */
@media (max-width: 640px) {
#top .news-lines .news-line {
padding: 16px 20px;
padding: 16px 0;
gap: 12px;
flex-wrap: wrap;
position: relative;
}
#top .news-lines .news-line a {
padding-right: 20px;
}
#top .news-lines .news-date {
width: 8.8em; /* 余白を少し詰める */
width: 5.5em;
}
}
/* ===== a.class を .class a に読み替える互換レイヤー ===== */
/* 旧: a.logo → 新: .logo a */
.logo a { display: inline-block; }
/* 旧: a.header-contact → 新: .header-contact a / .header-contact 自体の固定位置など */
.header-contact { position: fixed; right: 16px; bottom: 16px; z-index: 1000; }
.header-contact a { display: flex; align-items: center; gap: 8px; text-decoration: none; }
/* 旧: a.sp-menu__link → 新: .sp-menu__link a */
.sp-menu__link a { display: block; padding: 14px 16px; text-decoration: none; }
/* 旧: a.urgent__link → 新: .urgent__link a */
.urgent__link a { text-decoration: underline; }
/* 旧: a.link-more / a.link-more--lg → 新: .link-more a / .link-more--lg a */
.link-more a,
.link-more--lg a { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; }
/* 旧: a.tag → 新: .tag a */
.tag a {text-decoration: none; }
/* 念のため、.logo/.header-contact/.sp-menu__link 等の直下アンカーを優先 */
.logo a, .header-contact a, .sp-menu__link a, .urgent__link a, .link-more a, .link-more--lg a, .tag a {
color: inherit;
}
/* ===== 「一覧を見る」互換レイヤー（a.link-more → .link-more a） ===== */
/* 1) ラッパを右寄せする（セクション見出しの右端配置用）*/
.section-h > .link-more,
.section-h > .link-more--lg {
display: inline-flex; /* テキストと矢印を横並びに */
align-items: center;
gap: .5em;
}
/* 2) 新構造（.link-more a / .link-more--lg a）に旧指定を適用する */
.link-more a,
.link-more--lg a{
display: inline-flex; /* 旧 a.link-more に準拠 */
align-items: center;
gap: .5em;
text-decoration: none;
color: inherit;
line-height: 1; /* 旧指定に寄せる */
}
/* 3) 旧指定が残っていても新構造に後勝ちで効かせる（保険） */
.link-more a:hover,
.link-more--lg a:hover { text-decoration: underline; }
/* 4) 矢印（.arrow-circle）と並べるユースの補助 */
.link-more .arrow-circle,
.link-more--lg .arrow-circle {
flex: 0 0 auto;
}
/* 5) 旧セレクタの保険（混在環境でも同じ見た目に） */
a.link-more,
a.link-more--lg{
display: inline-flex;
align-items: center;
gap: .5em;
text-decoration: none;
color: inherit;
}
#top span.link-more > a,
#top span.btn.btn--primary > a{
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
}
.contMainColumn_01 {
padding-bottom: 0;
}
ul.kv__track {
list-style: none;
padding-left: 0;
margin: 0;
}
/*** スライドフェードイン・フェードアウト ***/
#VcArea-TopPage .kv-slide {
width: 100%;
height: 100%;
margin-left: 0;
position: relative;
margin-bottom: 0;
z-index: 1;
}
.kv-slide img {
width: 100%;
object-fit: cover;
}
.slick-dots li button {
width: 12px;
height: 12px;
border-radius: 0;
border: 2px solid var(--c-primary);
background: transparent;
padding: 0;
cursor: pointer;
text-indent: -9999px;
border-radius: 50% !important;
}
.slick-dots li.slick-active button {
background: var(--c-primary);
}
.slick-dots {
position: absolute;
width: 74px;
right: 60px;
bottom: 5px;
display: flex;
align-items: center;
gap: 0;
z-index: 2;
}
#top .kv__controls {
z-index: 1;
}
@media screen and (max-width: 980px) {
.slick-dots {
left: calc(50% - 37px);
bottom: -43px;
display: flex;
}
}