@charset "utf-8";

/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
*/


html {
    font-family: 'Noto Sans JP', sans-serif;
    caret-color: transparent;
}
body {
    background: #ffffff;
    color: #1e1e1e;
    min-width: auto;
    margin: 0 auto;
}
.inner {max-width: 1180px;width: 100%;margin: 0 auto;box-sizing: border-box;}
.inner_s {max-width: 1080px;width: 100%;margin: 0 auto;box-sizing: border-box;}

.marker {background: linear-gradient(transparent 60%, rgba(249, 240, 78, 0.8) 60%);}

.fmctr {
    caret-color: #1e1e1e;
    border-radius: 0.3em
}
a{
  text-decoration: none!important;
}

/* **************************************************************** */
/* ヘッダー
*/
header {
    text-align: left;
}
/* **************************************************************** */
/* フッター
*/
footer {
	background: #fff;
    padding: 0;
}
footer .logo {
    padding: 2em 0;
}
footer .copy {
    display: block;
    background: #00a0fc;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    padding: 1em 0 1em;
}

/* **************************************************************** */
/* 個別CSS
*/

.btn_bloc {

}
.btn_bloc a {
    display:inline-block;
}
.btn_bloc p {
    font-size: 24px;
    line-height: 1em;
    font-weight: 900;
    animation: purupuru_anim 1.2s infinite alternate;
}
@keyframes purupuru_anim {
    0% {
        transform: translate(0, 0);
    }
    5% {
        transform: translate(-3px, 0);
    }
    10% {
        transform: translate(3px, 0);
    }
    15% {
        transform: translate(-3px, 0);
    }
    20% {
        transform: translate(3px, 0);
    }
    25% {
        transform: translate(-3px, 0);
    }
    30% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.mv {
    padding: 1em 1em 3em;
}
.mv .inner {
    max-width: 1300px;
}
.mv_uppre {

}
.mv_uppre h1 {
    width: 58.384615384%;
}
.mv_uppre .box {
    position: relative;
    padding: 1em 1em;
    flex: 1 0 0%;
}
.mv_uppre .box figure {
    
}
.mv_uppre .box ul {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    align-items: flex-start;
    justify-content: center;
    gap: 1em;
}
.mv_uppre .box ul li {
    width: calc(100% / 3 - 1em);
    max-width: 150px;
}

.mv_bottom {
    align-items: center;
    justify-content: space-between;
    gap: 2em;
}
.mv_bottom .btn_bloc {
    max-width: 469px;
    flex: 1 0 0%;
    margin: 0 auto;
}
.mv_bottom .btn_bloc a {
    display: inline-block;
}

.mv_bottom figure {
    width: 58.307692307%;
}


.about {
    background: #fff;
    padding: 3em 0;
}
.about h2 {
    margin-bottom: 2em;
}
.about h2 em {
    width: 63.728813559%;
}
.about h2 figure {
    flex: 1 0 0%;
    max-width: 311px;
    margin-left: auto;
}

.about_bloc {
    margin-bottom: 3em;
}

.about_item {
    align-items: center;
    justify-content: space-between;
}
.about_item + .about_item {
    margin-top: 4em;
}
.about_item:nth-child(odd) {
    flex-direction: row-reverse;
}
.about_item figure {
    flex: 0 0 35%;
}
.about_box {
 flex: 0 0 60%;
}
.about_box h3 {
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem;
    gap: 1em;
}
.about_box h3 i {

}
.about_box h3 em {
    position: relative;
}
.about_box h3 em span {
    display: inline-block;
    background: #00a0fc;
    color: #fff;
    font-size: 42px;
    line-height: 1em;
    font-weight: 900;
    padding: 0.25em 0.5em 0.35em;
    position: relative;
    z-index: 2;
}
.about_box h3 em:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #0a6193;
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
}

.about_box h4 {
    font-size: 30px;
    line-height: 1.4em;
    font-weight: 900;
    text-align: left;
    margin-bottom: 1rem;
}
.about_box h4 em {
    color:#ff6860;
}

.about_box p {
    font-size: 18px;
    line-height: 1.8em;
    font-weight: bold;
    text-align: left;
}


.trouble {
    background: #00a0fc;
    padding: 3em 0 0;
    position: relative;
}
.trouble:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 70px 150px 0 150px;
    border-color: #00a0fc transparent transparent transparent;
    position: absolute;
    bottom: -70px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.trouble h2 {
    color: #fff;
    font-size: 48px;
    line-height: 1.2em;
    font-weight: 900;
    margin-bottom: 2rem;
}
.trouble h2 em {
    display: inline-block;
    background: #fff;
    color: #00a0fc;
    padding: 0.1em 0.25em 0.2em;
    margin: 0 0.25em;
}

.trouble_bloc {
    position: relative;
    padding-top: 14em;
}
.trouble_bloc ul {
    
}
.trouble_bloc ul li {
    position: absolute;
}
.trouble_bloc ul li:nth-child(1) {
    bottom: 5em;
    left: 0;
}
.trouble_bloc ul li:nth-child(2) {
    top: 0;
    left: 8em;
}
.trouble_bloc ul li:nth-child(3) {
    top: 0;
    left: 0;
    right: 0;
}
.trouble_bloc ul li:nth-child(4) {
    top: 2em;
    right: 7em;
}
.trouble_bloc ul li:nth-child(5) {
    right: 0;
    bottom: 5em;
}

.trouble_bloc figure {
    
}

.cv {
    padding: 6em 0 4em;
}
.cv_bloc {

}
.cv_bloc h2 {
    margin-bottom:2em;
}


.band {
    background: #00a0fc;
    color: #fff;
}
.band .inner {
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.band h2 {
    font-size: 1.8em;
    line-height: 1em;
    font-weight: 900;
}
.band .inner:after {
    content: "";
    color: rgb(246 248 251 / 18%);
    font-size: 150px;
    line-height: 1em;
    font-weight: 900;;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 0;
    text-align: left;
}
.band figure {
    position: relative;
    z-index: 2;
}

.content {
    padding: 3em 0 6em;
}



.comparison {

}
.comparison .band figure {
    margin-top: -3em;
}
.comparison .band .inner:after {
    content:"Comparison";
}
.comparison_bloc {

}


.flow {

}
.flow .band figure {
    margin-top: -3em;
    margin-bottom: 1em;
}
.flow .band .inner:after {
    content:"Flow";
}


.flow_bloc {

}
.flow_bloc h3 {
    margin-bottom: 2em;
}
.flow_bloc ol {
    max-width: 950px;
    margin: 0 auto;
}
.flow_bloc ol li {
    position: relative;
    background: #d0ebfb;
    padding: 1em;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}
.flow_bloc ol li + li {
    margin-top: 3em;
}
.flow_bloc ol li + li:before {
    content: "";
    width: 48px;
    height: 28px;
    background: url(../images/icon_arrow.png);
    position: absolute;
    top: -2.25em;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.flow_bloc ol li .meta {
    align-items: center;
    justify-content: flex-start;
    gap: 1em;
}
.flow_bloc ol li .meta i {

}
.flow_bloc ol li .meta h4 {
    text-align: left;
}
.flow_bloc ol li .meta h4 span {
    display: inline-block;
    background: #00a0fc;
    color: #fff;
    font-size: 30px;
    line-height: 1em;
    padding: 0.25em 0.25em 0.35em;
}
.flow_bloc ol li .meta h4 span:last-child {
    margin-top: 5px;
}

.flow_bloc ol li .box {
    text-align: left;
    width: 50%;
}
.flow_bloc ol li .box p {
    font-size: 18px;
    line-height: 1.6em;
    font-weight: bold;
}

.flow_bloc ol li:nth-child(4) {
    background: #fed9d7;
}
.flow_bloc ol li:nth-child(4) .meta h4 span {
    background: #ff6860;
}







.advisor {

}
.advisor .band figure {
    margin-top: -4em;
}
.advisor .band .inner:after {
    content:"Career Advisor";
}
.advisor_bloc {
    overflow: hidden;
}
.advisor_slider {
    
}
.advisor_slider_item {
    
}



.voice {
    background: url(../images/bg_slash.png);
}
.voice .band {
    background: no-repeat;
}
.voice .band figure {
    margin-top: -4em;
}
.voice .band .inner:after {
    content:"Voice";
}

.voice_bloc {
    max-width: 1065px;
    margin: 0 auto 3em;
}

.voice_item {
    background: #fff;
    padding: 1em;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
}
.voice_item:after {
    content:"";

}
.voice_item + .voice_item {
    margin-top: 3em;
}
.voice_item figure {
    margin-top: -3em;
}
.voice_box {
    flex: 1 0 0%;
    text-align: left;
}
.voice_box h3 {
    margin-bottom: 1rem;
}
.voice_box h3 span {
    display: inline-block;
    background: #00a0fc;
    color: #fff;
    font-size: 30px;
    line-height: 1em;
    padding: 0.25em 0.25em 0.35em;
}
.voice_box p {
    font-size: 18px;
    line-height: 1.6em;
    font-weight: bold;
}

.voice .btn_bloc p {
    color:#fff;
}


.faq {
    background: #fff;
}
.faq .band {
    background: no-repeat;
    color: initial;
    padding: 1em 0 0;
}
.faq .band .inner:after {
    content:"FAQ";
    color: #00a0fc2e;
}
.faq .content {
    padding:3em 0;
}

.faq_bloc {
    margin-bottom:3em;
}

.faq_bloc dl {
    
}
.faq_bloc dl + dl {
    margin-top: 2em;
}
.faq_bloc dl dt {
    background: #00a0fc;
    color: #fff;
    position: relative;
    font-size: 22px;
    line-height: 1.2em;
    font-weight: bold;
    text-align: left;
    padding: 1em 3em 1em 3em;
    cursor: pointer;
}
.faq_bloc dl dd {
    position: relative;
    background: #d0ebfb;
    position: relative;
    font-size: 18px;
    line-height: 1.6em;
    font-weight: bold;
    text-align: left;
    padding: 1em 1em 1em 4em;
    display: none;
}
.faq_bloc dl dt:before {
    content: "";
    width: 37px;
    height: 42px;
    background: url(../images/icon_q.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0.8rem;
    left: 0.7rem;
}
.faq_bloc dl dd:before {
    content: "";
    width: 37px;
    height: 42px;
    background: url(../images/icon_a.png) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0.6rem;
    left: 0.8rem;
}
.faq_bloc dl dt:after {
    content: "＋";
    font-size: 1.5em;
    line-height: 1;
    position: absolute;
    top: 0.4em;
    right: 0.4em;
    font-weight: bold;
}
.faq_bloc dl dt.active:after {
    content:"－";

}


.contact {
    background: #fff;
    padding: 3em 0;
}
.contact_content {

}


.thanks .detail figure {
    margin-bottom: 2em;
}
.thanks .detail .t1 {
    display: inline-block;
    border: solid 1px #000;
    padding: 0.5em;
    margin-bottom: 2em;
}
.thanks .detail .t1 span.red {
    color:red;
}
.thanks .detail .t1 em {

}
.thanks .detail .t1 em:after {

}

.thanks .detail h1 {

}
.thanks .detail .t2 {
    
}

/* slick用フォント（woff/ttf）を使わない：404/読み込みエラーを抑止 */
@font-face {
  font-family: "slick";
  src: local("Arial");
}

/* ローディング背景を無効化：ajax-loader.gif を不要化 */
.slick-loading .slick-list {
  background: none !important;
}

/* ====== コンテナ幅とガターを静的LPに強制合わせ ====== */
:root {
  --container: 1180px;   /* 静的LPと同じ狭さにする幅（必要なら1300→1180へ） */
  --gutter: 0px;         /* 横の内側余白。静的に合わせて増減してOK（例: 20px） */
}

/* すべてのセクションの外側パディングをリセット（親側の差を消す） */
.mv, .about, .trouble, .cv, .comparison, .flow, .advisor, .voice, .faq, .contact {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* WP側を静的LPと同じ縮尺に */
body {
  zoom: 0.9;               /* 全体を90%に縮小 */
  -moz-transform: scale(0.9); /* Firefox対策 */
  -moz-transform-origin: 0 0;
}

/* ========== Header (corporate) ========== */
.site-header { position: sticky; top: 0; z-index: 1000; }
.site-header__bar {
  backdrop-filter: saturate(140%) blur(12px);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));

}
.site-header .inner { display:flex; align-items:center; justify-content:space-between; height:64px; max-width:1440px; margin:0 auto; padding:0 16px; }

.site-header__logo img { height:32px; width:auto; display:block; }

/* PCナビ */
.site-header__nav { display:flex; align-items:center; gap:24px; }
.site-menu { display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.site-menu li { margin:0; font-size: 0.9rem;}
.site-menu a {
  display:inline-block; padding:8px 4px; font-weight:700; text-decoration:none; color:#222;
}
.site-menu a:hover { opacity:.7; }

.site-header__cta {
  display:inline-block; padding:10px 16px; border-radius:9999px;
  background:#2e2e2e; color:#fff; text-decoration:none; font-weight:700;
}

/* ハンバーガー（SP用） */
.site-header__hamburger { display:none; width:40px; height:40px; position:relative; border:0; background:transparent; }
.site-header__hamburger span {
  position:absolute; left:8px; right:8px; height:2px; background:#222; border-radius:2px; transition:transform .25s, top .25s, opacity .25s;
}
.site-header__hamburger span:nth-child(1){ top:12px; }
.site-header__hamburger span:nth-child(2){ top:19px; }
.site-header__hamburger span:nth-child(3){ top:26px; }
.site-header__hamburger.is-open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.site-header__hamburger.is-open span:nth-child(2){ opacity:0; }
.site-header__hamburger.is-open span:nth-child(3){ top:19px; transform:rotate(-45deg); }

/* SPドロワー */
.sp-drawer { position:fixed; inset:64px 0 0 0; background:rgba(255,255,255,.98); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.sp-drawer.is-open { opacity:1; transform:none; pointer-events:auto; }
.sp-drawer__inner { padding:16px; }
.sp-menu { list-style:none; margin:0; padding:8px 0 16px; display:flex; flex-direction:column; gap:8px; }
.sp-menu a { display:block; padding:12px 8px; font-weight:700; color:#222; text-decoration:none; }
.sp-menu a:active { background:#f5f5f5; border-radius:8px; }
.sp-drawer__cta {
  display:block; margin-top:8px; padding:14px 16px; text-align:center; border-radius:12px; background:#2e2e2e; color:#fff; text-decoration:none; font-weight:700;
}

/* レスポンシブ */
@media (max-width: 1024px){
  .site-header .inner{ height:60px; }
}
@media (max-width: 768px){
  .site-header__nav { display:none; }
  .site-header__hamburger { display:block; }
}
/* ===== Transparent → White header ===== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
}
.site-header__bar {
  /* 初期は完全透明（背景と影なし） */
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled .site-header__bar {
  /* スクロール後は白＋影ON */

  box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
}

/* ロゴを2枚切り替える場合（任意。用意していないなら無視してOK） */
.site-header__logo img.light-logo { display: block; }
.site-header__logo img.dark-logo  { display: none;  }
.site-header.scrolled .site-header__logo img.light-logo { display: none; }
.site-header.scrolled .site-header__logo img.dark-logo  { display: block; }

/* 本文がヘッダーに隠れないよう上マージンを確保（高さを合わせて） */
body { padding-top: 64px; }

/* 高さ・レイアウト（あなたの既存に合わせておく） */
.site-header .inner { 
  height: 64px; max-width: 1440px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
}

.archive__title { font-size: 28px; font-weight: 900; margin: 24px 0; }

.post-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card a { display: block; text-decoration: none; color: inherit; border: 1px solid #eee; border-radius: 16px; overflow: hidden; background: #fff; transition: transform .12s, box-shadow .12s; }
.post-card a:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.post-card .thumb img { width: 100%; height: auto; display: block; }
.post-card .title { font-size: 18px; font-weight: 800; line-height: 1.5; padding: 12px 16px 0; }
.post-card .date { display:block; color:#888; font-size:12px; padding: 0 16px 8px; }
.post-card .excerpt { font-size: 14px; color:#444; padding: 0 16px 16px; }

@media (max-width: 1024px){ .post-cards{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .post-cards{ grid-template-columns: 1fr; } }


/* ===== About page ===== */
.about-page section { padding: 64px 0; }
.about-page .sec-title { font-size: 28px; font-weight: 900; margin-bottom: 24px; }

/* Hero */
.about-hero { position: relative; padding: 96px 0 64px; overflow: hidden; }
.about-hero__bg {
  position: absolute; inset: 0;
  background: radial-gradient(1200px 600px at 70% -10%, #e8f3ff 0%, transparent 60%),
              radial-gradient(800px 400px at -10% 10%, #f7f7ff 0%, transparent 60%);
  z-index: 0;
}
.about-hero .inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; }
.about-hero__content h1 { line-height: 1.2; margin: 0 0 8px; }
.about-hero__content .eyebrow { display:block; font-size:12px; letter-spacing:.12em; color:#6b7280; font-weight:800; }
.about-hero__content em { display:block; font-size:40px; font-weight:900; }
.about-hero__content .lead { margin: 16px 0 24px; font-size:16px; color:#374151; }
.about-hero__visual img { width:100%; height:auto; display:block; border-radius:24px; box-shadow: 0 20px 50px rgba(0,0,0,.08); }

.btn-primary {
  display:inline-block; padding:12px 20px; border-radius:9999px;
  background:#111827; color:#fff; font-weight:800; text-decoration:none;
  transition: transform .1s ease, opacity .1s ease;
}
.btn-primary:hover { transform: translateY(-1px); opacity: .92; }

/* MVV */
.about-mvv .mvv-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.about-mvv .card {
  border-radius:20px; padding:24px; background:rgba(255,255,255,.9);
  box-shadow: 0 8px 30px rgba(0,0,0,.06); backdrop-filter: blur(8px);
}
.about-mvv .card h2 { font-size:18px; font-weight:900; margin-bottom:8px; }
.about-mvv .card ul { margin:0; padding-left:1.2em; color:#374151; }
.about-mvv .m { border:1px solid #dbeafe; }
.about-mvv .v { border:1px solid #e9d5ff; }
.about-mvv .val { border:1px solid #dcfce7; }

/* Numbers */
.about-numbers { background: linear-gradient(180deg,#fff, #f9fafb); }
.num-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; list-style:none; padding:0; margin:0; }
.num-cards li { text-align:center; border-radius:20px; background:#fff; padding:24px; border:1px solid #f3f4f6; box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.num-cards .num { display:block; font-size:36px; font-weight:900; letter-spacing:.02em; }
.num-cards .cap { display:block; color:#6b7280; margin-top:6px; font-size:13px; }
.about-numbers .notes { margin-top:8px; color:#9ca3af; font-size:12px; }

/* Why */
.why-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.why-item { background:#fff; border:1px solid #f3f4f6; border-radius:20px; padding:20px; text-align:center; box-shadow: 0 6px 20px rgba(0,0,0,.04); }
.why-item img { width:72px; height:72px; object-fit:contain; display:block; margin:0 auto 12px; }
.why-item h3 { font-size:16px; font-weight:900; margin:0 0 6px; }

/* Process */
.about-process { background:#fff; }
.flow-list { list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
.flow-list li { background:#fff; border:1px solid #eef2f7; border-radius:16px; padding:16px; display:flex; gap:12px; align-items:flex-start; box-shadow: 0 6px 18px rgba(0,0,0,.04); }
.flow-list i { display:inline-block; min-width:32px; height:32px; border-radius:50%; background:#111827; color:#fff; font-style:normal; text-align:center; line-height:32px; font-weight:900; }
.flow-list h4 { margin:0 0 4px; font-weight:900; }

/* Team */
.about-team .team-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
.member { background:#fff; border:1px solid #f3f4f6; border-radius:20px; padding:20px; text-align:left; box-shadow:0 6px 20px rgba(0,0,0,.04); }
.member img { width:100%; border-radius:12px; margin-bottom:12px; }
.member .role { color:#6b7280; margin:0 0 6px; font-size:12px; }

/* CTA */
.about-cta { padding:80px 0; background: linear-gradient(180deg,#f9fafb, #fff); }
.cta-card { text-align:center; border-radius:24px; padding:32px 24px; background:#111827; color:#fff; box-shadow: 0 20px 50px rgba(0,0,0,.1); }
.cta-card h2 { font-size:24px; font-weight:900; margin:0 0 8px; }
.cta-card p { color:#cbd5e1; margin:0 0 16px; }

/* Responsive */
@media (max-width: 1024px){
  .about-hero .inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .about-page section { padding: 48px 0; }
  .about-mvv .mvv-grid, .why-grid { grid-template-columns: 1fr; }
  .num-cards { grid-template-columns: 1fr; }
  .flow-list { grid-template-columns: 1fr 1fr; }
  .about-team .team-grid { grid-template-columns: 1fr; }
  .about-hero__content em { font-size:32px; }
}


/* ===== Corporate TOP ===== */
.corp-home .inner { max-width:1260px; margin:0 auto; padding:0 16px; }
.btn-primary{display:inline-block;padding:12px 20px;border-radius:9999px;background:#111827;color:#fff;text-decoration:none;font-weight:800}
.btn-outline{display:inline-block;padding:10px 18px;border-radius:9999px;border:2px solid #111827;font-weight:800;color:#111827;text-decoration:none;background:#fff}
.btn-more{margin-left:auto;display:inline-block;padding:8px 14px;border-radius:12px;background:#f3f4f6;text-decoration:none;color:#111827;font-weight:700}

/* Side rail */
.rail{position:fixed;left:29px;top:40%;transform:translateY(-50%);z-index:900;display:none}
.rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.rail a{writing-mode:vertical-rl;text-orientation:mixed;text-decoration:none;color:#6b7280;font-weight:800;letter-spacing:.08em;font-size:0.8em;opacity:.8}
.rail a.is-active{color:#111827}
@media(min-width:1100px){ .rail{display:block} }

/* Hero */
.hero{position:relative; padding:120px 0 80px; overflow:hidden; background:#f5fbff}
.hero__bg{position:absolute;inset:0;background:radial-gradient(1100px 500px at 70% -10%, #e1f1ff 0%, transparent 60%), radial-gradient(900px 400px at -10% 10%, #f7f7ff 0%, transparent 60%);z-index:0}
.hero .inner{position:relative;z-index:1}




/* About */
.about{background:#fff}
.about__lead h2{font-size:28px;font-weight:900;margin:0 0 6px}
.about__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.about__cards .card{background:#fff;border:1px solid #eef2f7;border-radius:20px;padding:20px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.about__cards .card img{width:72px;height:72px;object-fit:contain;margin:0 auto 10px;display:block}

/* Works */
.works{background:#f6fbff}
.sec-head{display:flex;align-items:flex-end;gap:12px;margin-bottom:16px}
.sec-head h2{font-size:1.8em;font-weight:900;margin:0}
.sec-head p{color:#6b7280;margin:0}
.works__slider{margin-top:12px}
.work{background:#fff;border:1px solid #eef2f7;border-radius:20px; padding:14px; margin:0 10px; box-shadow:0 6px 20px rgba(0,0,0,.04)}
.work img{width:100%;height:180px;object-fit:cover;border-radius:12px}
.work h3{font-size:16px;margin:10px 0 4px;font-weight:800}
.work .meta{color:#6b7280;font-size:12px}

/* Service */
.service{background:#fff}
.service__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc{display:block;background:#fff;border:1px solid #eef2f7;border-radius:20px;padding:16px;text-align:center;text-decoration:none;color:inherit;box-shadow:0 6px 20px rgba(0,0,0,.04)}
.svc img{width:64px;height:64px;object-fit:contain;margin:0 auto 8px}
.svc h3{font-size:14px;font-weight:900}

/* News */
.news{background:#fff}
.news__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.news__item a{display:flex;gap:12px;align-items:center;text-decoration:none;color:#111827;background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:12px 14px}
.news__item time{color:#6b7280;font-size:12px;min-width:90px}

/* Business */
.business{background:#e7f1ff}
.sec-head.white h2,.sec-head.white p{color:#0b2545}
.biz__list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:10px}
.biz{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid #dbe7ff;border-radius:18px;padding:12px}
.biz img{width:120px;height:80px;object-fit:cover;border-radius:12px}

/* Project */
.project{background:#fff}
.proj__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.proj{background:#fff;border:1px solid #eef2f7;border-radius:18px;padding:12px;box-shadow:0 6px 20px rgba(0,0,0,.04)}
.proj img{width:100%;height:160px;object-fit:cover;border-radius:12px;margin-bottom:8px}
.proj h3{font-size:16px;margin:0 0 4px;font-weight:900}

/* CTA + Illustration band */
.contact-cta{background:#f9fafb; padding-bottom:0}
.cta-card{background:#111827;color:#fff;border-radius:20px;padding:24px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.12)}
.cta-card h2{margin:0 0 12px;font-size:22px;font-weight:900}
.illust-band{margin-top:40px}
.illust-band img{width:100%;height:auto;display:block}

/* Responsive */
@media(max-width:1024px){
  .service__grid{grid-template-columns:repeat(2,1fr)}
  .proj__grid{grid-template-columns:repeat(2,1fr)}
  .biz__list{grid-template-columns:1fr}
}
@media(max-width:640px){
  .corp-home .sec{}
  .about__cards{grid-template-columns:1fr}
  .proj__grid{grid-template-columns:1fr}
}
/* ===== Reveal Animations (base) ===== */
[data-anim] { opacity: 0; will-change: opacity, transform, filter; }

/* 初期状態（type別） */
[data-anim="fade-up"]    { transform: translateY(18px); }
[data-anim="fade-right"] { transform: translateX(-18px); }
[data-anim="zoom-in"]    { transform: scale(.96); }
[data-anim="tilt-fade"]  { transform: translateY(8px) rotate(-1.2deg); filter: blur(2px); }
[data-anim="pop"]        { transform: scale(.94); }

/* 発火後の共通状態（JSで .is-in を付与） */
.is-in[data-anim] { opacity: 1; transform: none; filter: none; }

/* スタッガー親に少し間隔 */
[data-stagger] > * { transition-delay: 0s; }

/* 好みで少し柔らかく見せたい要素 */
.hero__visual img { transform-origin: 50% 60%; }
/* ===== ABOUT creative ===== */
.about--creative { background: linear-gradient(180deg,#ffffff 0%, #f6fbff 100%); }
.about--creative .about-head { text-align:center; margin-bottom: 22px; }
.about--creative .about-head .eyebrow{font-size:12px;letter-spacing:.14em;color:#6b7280;font-weight:900}
.about--creative .about-head h2{font-size:28px;font-weight:900;margin:6px 0}
.about--creative .about-head .lead{color:#374151}

.about--creative .about-stage{
  position:relative; margin: 24px auto 14px;
  border-radius: 28px; overflow: hidden;
  padding: clamp(16px, 3.5vw, 28px);
  background: #fff;
  border:1px solid #eef2f7;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
}
.about--creative .about-visual img{
  width:100%; height:auto; display:block;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}

/* 有機的な背景の塊 */
.about--creative .blob{ position:absolute; border-radius:50%; filter: blur(24px); opacity:.8; }
.about--creative .blob-a{ width:38vw; height:38vw; max-width:620px; max-height:620px;
  background: radial-gradient(closest-side, #e1f1ff, transparent);
  right:-12%; top:-10%; }
.about--creative .blob-b{ width:30vw; height:30vw; max-width:520px; max-height:520px;
  background: radial-gradient(closest-side, #fff7e6, transparent);
  left:-10%; bottom:-12%; }

/* 浮遊バッジ */
.about--creative .badge{
  position:absolute; display:flex; gap:10px; align-items:center;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
  border:1px solid rgba(255,255,255,.8);
  border-radius: 16px; padding:10px 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transform: translateZ(0);
}
.about--creative .badge .badge-icon img{ width:40px; height:40px; object-fit:contain; }
.about--creative .badge .badge-body h3{ font-size:14px; font-weight:900; margin:0 0 2px; }
.about--creative .badge .badge-body p{ font-size:12px; color:#4b5563; margin:0; }

/* 位置（PC） */
.about--creative .badge.b1{ top: 8%;  left: 6%; }
.about--creative .badge.b2{ top: 50%; right: 6%; transform: translateY(-50%); }
.about--creative .badge.b3{ bottom: 6%; left: 10%; }

/* 点線のコネクタ */
.about--creative .connector{ position:absolute; width:160px; height:80px; border-radius: 80px;
  border: 2px dashed #d1d5db; opacity:.8; }
.about--creative .connector.c1{ top: 16%; left: 18%; transform: rotate(-12deg); }
.about--creative .connector.c2{ bottom: 14%; right: 16%; transform: rotate(14deg); }

/* 数字ハイライト（横スクロール可） */
.about--creative .about-metrics{
  margin-top: 16px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr);
  gap: 12px; overflow-x: auto; padding: 8px 2px; scrollbar-width: thin;
}
.about--creative .about-metrics li{
  list-style:none; text-align:center; border:1px solid #eef2f7; background:#fff;
  border-radius:16px; padding:14px 10px; box-shadow:0 8px 24px rgba(0,0,0,.04);
}
.about--creative .about-metrics strong{ display:block; font-size:22px; font-weight:900; letter-spacing:.02em; }
.about--creative .about-metrics span{ display:block; font-size:12px; color:#6b7280; margin-top:2px; }
.about--creative .metrics-note{ text-align:right; color:#9ca3af; font-size:12px; margin-top:6px; }

/* レスポンシブ */
@media (max-width: 1024px){
  .about--creative .badge{ transform: none; }
}
@media (max-width: 768px){
  .about--creative .about-stage{ padding: 14px; border-radius:20px; }
  .about--creative .blob{ display:none; }
  .about--creative .badge{ position:relative; margin:10px 0 0; }
  .about--creative .badge.b1,
  .about--creative .badge.b2,
  .about--creative .badge.b3{ top:auto; left:auto; right:auto; bottom:auto; }
  .about--creative .connector{ display:none; }
  .about--creative .about-metrics{ grid-auto-columns: 150px; }
}
.sp-only{ display:none; }
@media (max-width: 640px){ .sp-only{ display:inline; } }
/* ===== ABOUT: 4-grid with center vertical panel ===== */
.about--grid4 { padding-top: 48px; padding-bottom: 48px; }
.about--grid4 .inner { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.about-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.about-grid .cell{
  position: relative; overflow: hidden; border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  aspect-ratio: 16 / 10; /* 画像比率の目安。変更可 */
}
.about-grid .cell img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
}
.about-panel{
  position:absolute;
  /* ←中央固定（親 .about-grid を基準） */
  top:50%;
  left:50%;
  transform: translate(-50%, -50%); /* ここはレイアウト用なので死守 */
  width: clamp(260px, 30vw, 420px);
  background:#fff;
  border-radius:18px;
  border:1px solid #eef2f7;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
  margin:0; /* 念のため */
}
.about-panel .panel-inner{
  padding:22px 22px 18px;
  display:grid; gap:14px; justify-items:center;
}
/* 中央パネル：縦書きコピー／サブ文／ボタン */
.about-panel .copy-v{
  margin: 0;
  line-height: 1.5;
  writing-mode: vertical-rl;   /* ←縦書き */
  text-orientation: upright;   /* ←縦中横を縦向きに */
  font-weight: 900;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: .06em;
  text-align: center;
}
.about-panel .sub{
  margin: 6px 0 0;
  color: #4b5563;
  font-size: 13px;
  text-align: center;
}
.about-panel .btn-read{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 9999px;
  background: #111827;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.about-panel .btn-read span{ transform: translateY(1px); }

/* スマホ時は横書きに切り替え */
@media (max-width: 768px){
  .about-panel .copy-v{
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: clamp(18px, 5vw, 22px);
    text-align: left;
  }
  .about-panel .sub{ text-align: left; }
}


/* ===== Right Follow Rail ===== */
.rail--right{
  position: fixed;
  right: 8px; top: 40%;
  transform: translateY(-50%);
  z-index: 950;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.rail--right .rail-vlabel{
  writing-mode: vertical-rl; text-orientation: mixed;
  font-weight: 900; letter-spacing: .12em;
  color: #6b7280; font-size: 0.8em;
  margin: 0 auto;
}
.rail-icon{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:#fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); border:1px solid #e5e7eb; }
.rail-icon svg{ display:block; }
.rail-icon--yt:hover{ transform: translateY(-1px); }

/* SPでは非表示（左と同じ運用） */
@media (max-width: 1100px){
  .rail--right{ display:none; }
}

/* YouTubeボタンの見た目とホバー */
.rail-icon--yt { transition: transform .15s ease, box-shadow .15s ease; }
.rail-icon--yt:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }

/* 位置：右端・高さ */
.rail--right{ right:14px; top:45%; }   /* ←好みで微調整 */

/* アイコン大きめ */
.rail-icon{ width:64px; height:64px; }
.rail-icon svg{ width:32px; height:32px; }

/* フォーカスリング（キーボード操作/アクセシビリティ） */
.rail-icon:focus-visible{
  outline: 3px solid #60a5fa; outline-offset: 3px; border-radius: 9999px;
}
.rail-icon--yt{ transition: transform .15s, box-shadow .15s; }
.rail-icon--yt:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.rail-icon--yt:active{ transform: translateY(0); box-shadow:0 8px 18px rgba(0,0,0,.10); }


.rail--right .rail-vlabel{ margin-bottom: 6px; letter-spacing:.14em; }

body{ --hdr:64px; }                 /* ヘッダー高 */
.rail--right{ top: calc(45% + var(--hdr)/4); }
/* ===============================
   Follow Us (右サイド追従)
   =============================== */
.rail--right {
  position: fixed;
  top: 50%;
  right: 12px; /* ← 画面の右端位置 */
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.rail--right .rail-vlabel {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .12em;
  color: #6b7280;
  font-weight: 800;
  font-size: 0.8em;
  margin-bottom: 6px;
}

/* アイコン本体 */
.rail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  transition: all .2s ease;
}

.rail-icon--yt svg {
  width: 26px;
  height: 26px;
}

.rail-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}

/* スマホでは非表示（任意） */
@media (max-width: 768px){
  .rail--right { display: none; }
}
/* =========================
   Follow Us (右サイド追従) FINAL
   ========================= */
.rail--right{
  position: fixed;
  top: 50%;
  right: 14px;         /* 画面の右端に寄せる */
  left: auto;          /* ← 左レールの left:8px を確実に打ち消す */
  transform: translateY(-50%);
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.rail--right .rail-vlabel{
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: .12em;
  color: #6b7280;
  font-weight: 900;
  font-size: 0.8em;
  margin-bottom: 6px;
}

/* アイコン（丸・影・ホバー） */
.rail-icon{
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.rail-icon svg{
  width: 28px;
  height: 28px;
  display: block;
}
.rail-icon:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.rail-icon:focus-visible{
  outline: 3px solid #60a5fa;
  outline-offset: 3px;
  border-radius: 9999px;
}

/* スマホでは非表示（必要なら調整可） */
@media (max-width: 1100px){
  .rail--right{ display: none; }
}

/* ===== Hero: 画像のみレイアウト ===== */
.hero--imgonly {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.hero--imgonly picture,
.hero--imgonly img {
  display: block;
  width: 100%;
  height: auto;
}
.hero--imgonly img {
  object-fit: cover;
  max-height: 100vh;
}
/* ===== Sticky Morph Header ===== */
:root{ --hdr-gap:24px; }              /* 初期の上余白（お好みで） */

.site-header{
  position:absolute;                   /* 最初はページ内で浮かせる */
  left:0; right:0; top:var(--hdr-gap);
  z-index:1000;
  background-color: white;
}
.site-header__bar{
  width: min(1400px, calc(100% - 32px));  /* 中央寄せ・左右16px余白 */
  margin:0 auto;
  border-radius:16px;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition:
    width .28s ease, max-width .28s ease,
    border-radius .28s ease,
    background-color .2s ease, box-shadow .2s ease,
    transform .22s ease;
  transform-origin: center;
  transform: scaleX(.985);             /* ほんの少しだけ縮めておく（広がり演出） */
}

/* ===== スクロール後（吸着＆フル幅） ===== */
.site-header.is-stuck{
  position:fixed; top:0; left:0; right:0;  /* 画面上に吸着 */
}
.site-header.is-stuck .site-header__bar{
  width:100%; max-width:none;              /* 横幅100%へふわっと拡張 */
  border-radius:0;                         /* 角丸→フラット */
  background: rgba(255,255,255,.97);
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  transform: none;                         /* scaleX戻す＝“ふわっ”と広がる */
}

/* 旧「透明→白」ルールが残っている場合の競合対策（任意） */
.site-header__bar{  }
.site-header.is-stuck .site-header__bar{ background: rgba(255,255,255,.97) !important; }
/* ===== Scroll Fade-in Header ===== */
.site-header {
  position: absolute;
  top: 0px;          /* 最初は少し下げて浮かせる */
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.4s ease;
}

/* 内部バーの初期状態（透明・影なし） */
.site-header__bar {
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transition: all 0.4s ease;
}

/* === スクロール後：ふわっと白背景＋上に吸着 === */
.site-header.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.site-header.is-stuck .site-header__bar {
  width: 100%;
  max-width: none;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  backdrop-filter: saturate(140%) blur(10px);
}
/* ===============================
   Header CTA Button（刷新）
   =============================== */
.site-header__cta {
  display: flex;
  justify-content: center;
  align-items: center;
    padding: 0.3em 0.8em;
  border: 2px solid #2589d0;
  border-radius: 3px;
  background-color: #fff;
  color: #2589d0;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,.05);
}

/* hover時：青塗り・文字白 */
.site-header__cta:hover {
  background-color: #2589d0;
  border-color: #2589d0;
  color: #fff;
  font-weight: 800;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37,137,208,.25);
}

/* active時：少し押し込み */
.site-header__cta:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(37,137,208,.15);
}

/* レスポンシブ：SP時は幅いっぱい＆フォント少し大きめ */
@media (max-width: 768px) {
  .site-header__cta {
    width: 100%;
    padding: 0.9em 1.2em;
    font-size: 1rem;
  }
}
/* ===== FVフェードイン（暗→明） ===== */
.hero__visual img {
  opacity: 0.8;                  /* 初期：やや暗く */
  filter: brightness(0.7);       /* 初期：暗めトーン */
  transform: scale(1.03);        /* わずかに拡大 */
  transition: filter 2s ease, opacity 2s ease, transform 3s ease;
}

/* ページ読み込み後に適用されるクラス */
body.loaded .hero__visual img {
  opacity: 1;
  filter: brightness(1);
  transform: scale(1);
}
/* ==============================
   FV（Hero）フェードイン演出
   ============================== */
.hero--imgonly picture img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.4);
  opacity: 0;
  transform: scale(1.03);
  transition: filter 2s ease, opacity 2s ease, transform 2s ease;
}

/* 読み込み完了後に明るく・透明解除 */
body.loaded .hero--imgonly picture img {
  filter: brightness(1);
  opacity: 1;
  transform: scale(1);
}
/* ===== ABOUT : Split Creative ===== */
.about--split { padding: clamp(48px, 6vw, 84px) 0; background: linear-gradient(180deg,#fff 0%, #f7fbff 100%); }

.about--split .inner { position: relative; }

.split-wrap{
  position: relative;
  display: grid;
  grid-template-columns: 58% 42%;  /* ← 5:5じゃなく 58:42 でメリハリ */
  align-items: center;
  gap: clamp(12px, 2.6vw, 28px);
}

/* 左：画像ボード（斜めカット＋立体） */
.split-media{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.10);
  isolation: isolate;
}
.split-media img{
  display: block; width: 100%; height: auto; object-fit: cover;
  transform: scale(1.04) translateY(6px);  /* 初期：少し寄せ＆後でパララックス */
  filter: saturate(1.02) contrast(1.02);
  transition: transform 1s ease, filter 1s ease, opacity .6s ease;
}

/* 右辺を斜めに見せる（モダンブラウザ） */
.split-media{
  --clip: polygon(0 0, 100% 0, 86% 100%, 0% 100%);
  -webkit-clip-path: var(--clip);
          clip-path: var(--clip);
}

/* 装飾：リング＆ドット */
.accent-ring, .accent-dot { position:absolute; z-index:2; pointer-events:none; }
.accent-ring{
  right: -32px; top: -32px; width: 140px; height: 140px;
  border-radius: 50%; border: 10px solid rgba(0,160,252,.18);
  filter: blur(.2px);
}
.accent-dot{
  left: -18px; bottom: -18px; width: 22px; height: 22px;
  border-radius: 50%; background: #00a0fc;
  box-shadow: 0 8px 26px rgba(0,160,252,.35);
}

/* 右：縦書きの浮遊パネル */
.split-copy{ position: relative; }
.split-panel{
  position: relative;
  margin-right: clamp(0px, 1vw, 10px);
  margin-left: clamp(0px, .6vw, 8px);
  border-radius: 18px;
  padding: clamp(18px, 2.2vw, 24px) clamp(16px, 2vw, 22px);
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.78));
  transform: translateY(8px);
  transition: transform .8s ease, box-shadow .4s ease, background-color .4s ease;
}

/* 縦書きコピー（PC） */
.split-panel .copy-v{
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-weight: 900;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.6;
  letter-spacing: .06em;
  margin: 0 auto;
  font-size: 1.8em;
}

/* 補助文＆ボタン */
.split-panel .sub{
  margin: 10px 0 12px;
  color: #4b5563; font-size: 13px; line-height: 1.7;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.split-panel .btn-read{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 9999px;
  background:#111827; color:#fff; font-weight:800; text-decoration:none;
  transition: transform .12s ease, opacity .12s ease;
}
.split-panel .btn-read:hover{ transform: translateY(-1px); opacity:.92; }

/* スクロールで in */
.is-in[data-anim] .split-panel,
.split-panel.is-in{ transform: translateY(0); }

/* PC〜タブレットの微調整 */
@media (max-width: 1100px){
  .split-wrap{ grid-template-columns: 1fr; }
  .split-media{ order: 1; }
  .split-copy{ order: 2; }
  .split-panel{ margin-top: 12px; }
  .split-panel .copy-v{
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: clamp(18px, 5vw, 22px);
    text-align: left;
  }
}

/* さらにSPでは装飾を抑える */
@media (max-width: 640px){
  .accent-ring, .accent-dot{ display:none; }
  .split-media{ border-radius: 16px; }
  .split-panel{ border-radius: 14px; }
}

/* 既存のアニメ基盤に馴染ませる */
.about--split [data-anim]{ opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .8s ease; }
.about--split .is-in[data-anim]{ opacity: 1; transform: none; }
/* 共通：画像の下地 */
.shape{
  display:block; width:100%; max-width:720px; aspect-ratio: 16/10;
  object-fit: cover; filter: saturate(1.02);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  border-radius: 18px;          /* 古いブラウザの無難な見た目 */
  overflow: clip;               /* Safari対策 */
}
.shape--blob{
  transition: clip-path .8s ease;
  clip-path: path("M20,10 C40,0 60,0 80,10 95,25 95,75 80,90 60,100 40,100 20,90 5,75 5,25 20,10 Z");
}
.shape--blob:hover{
  clip-path: path("M18,12 C38,-2 62,2 82,12 96,28 94,72 82,88 62,102 38,98 18,88 4,72 6,28 18,12 Z");
}
/* ===== About Split Section（画像縦幅調整） ===== */
.about--split {
  padding: 60px 0; /* セクション全体の余白を減らす（従来より-40px程度） */
}

.split-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.split-media {
  position: relative;
  flex: 1 1 50%;
  max-width: 50%;
  overflow: hidden;
  border-radius: 16px;
}

/* 画像の縦幅を固定＋トリミング */
.split-media img {
  width: 100%;
  height: 600px;              /* ←ここで縦幅を指定（お好みで 320〜420px に調整） */
  object-fit: cover;          /* 画像を自然にトリミング */
  object-position: center;    /* 中央基準でトリミング */
  border-radius: 16px;
}

/* テキスト側 */
.split-copy {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.split-panel {
  background: #fff;
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 420px;
  text-align: center;
}

.copy-v {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.4rem;
  font-weight: 900;
  margin: 0 auto 16px;
}

.sub {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.6;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .split-wrap {
    flex-direction: column;
    gap: 32px;
  }
  .split-media img {
    height: 260px; /* SP時はさらに低く */
  }
  .copy-v {
    writing-mode: horizontal-tb;
  }
}
/* ===== 改良版 split-panel（右側のコピー部分） ===== */
.split-panel {
  position: relative;
  border-radius: 20px;
  padding: 40px 36px 36px;
  max-width: 440px;
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}





/* 右上に小さなアクセント円 */
.split-panel::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #93c5fd);
  box-shadow: 0 0 12px rgba(96,165,250,0.8);
}

/* コピー文字 */
.copy-v {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  margin: 0 auto 16px;
  line-height: 1.6;
  color: #111827;
  text-shadow: 0 2px 8px rgba(37, 137, 208, 0.15);
}

/* サブコピー */
.sub {
  font-size: 0.9rem;
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* ボタン */
.split-panel .btn-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 24px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #2589d0 0%, #0ea5e9 100%);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37,137,208,.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.split-panel .btn-read:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(37,137,208,.35);
}
.split-panel::before {
  animation: glow 6s ease-in-out infinite alternate;
}
@keyframes glow {
  0% { opacity: 0.2; }
  100% { opacity: 0.6; }
}
/* =========================
   転職ノウハウ（安定版スライダー）
   ========================= */
.kh-slider{
  position: relative;
  overflow: hidden;
}
.kh{
background: transparent;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  /* slickが幅を管理するので margin は外す */
}
/* スライド間の余白（そのままでOK。ただし変えたら上の --kh-slide-gap も同じに） */
.slick-slide{ padding: 0 var(--kh-slide-gap); box-sizing: border-box; }
/* =========================
   転職ノウハウ：ホバー演出（ピコッと浮く）
   ========================= */

/* 通常状態 */
.kh__thumb {
  position: relative;
  flex: 1 1 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, box-shadow;
    image-rendering: pixelated;
  filter: contrast(1.1) saturate(1.05);
}

/* ホバー解除時も“ピコッ”と戻る感 */
.kh__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s steps(4, end);
}
.kh__cat{
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255,255,255,0.85);
  font-size: 11px;
  font-weight: 900;
  border-radius: 8px;
  padding: 4px 8px;
  z-index: 2;
  line-height: 1;
  color: #1f91dc;
}
.kh__meta{
  text-align: left;
  padding: 10px;
  background: transparent;
}
.kh__ttl{
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  color: #111827;
  margin: 0;
  transition: color .25s ease;
}
.kh:hover .kh__ttl{ color: #0b6fbf; }

/* slick矢印 */
.kh-controls{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.kh-prev, .kh-next{
  width: 40px; height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-weight: 900;
  transition: all .2s ease;
}
.kh-prev:hover, .kh-next:hover{
  background: #f3f4f6;
  transform: translateY(-1px);
}
/* =========================
   転職ノウハウレイアウト修正版（横並び）
   ========================= */
.knowhow {
    background: linear-gradient(180deg, #f6d14f 0%, #ffc218 100%);
  padding: 30px 0;
}
.knowhow__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 左：記事スライダー部分 */
.knowhow__left {
  flex: 0 0 74%; /* 3/4幅 */
  min-width: 0; /* slickのoverflow対策 */
}

/* 右：イラスト */
.knowhow__right {
  flex: 0 0 26%; /* 1/4幅 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.knowhow__right img {
  max-width: 100%;
  height: auto;
}

/* レスポンシブ：SP時は縦並び */
@media (max-width: 768px) {
  .knowhow__inner {
    flex-direction: column;
    align-items: center;
  }
  .knowhow__left,
  .knowhow__right {
    flex: 0 0 100%;
  }
  .knowhow__right {
    margin-top: 20px;
  }
}
/* =========================
   転職ノウハウ：右矢印をスライダー横に固定
   ========================= */

/* 矢印をスライダーの右側に配置 */
.kh-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-top: 12px;
}

.kh-next-wrap{
  position: absolute;
  right: -30px; /* スライダー右端の外側に出す */
  top: 50%;
  transform: translateY(-160%);
  z-index: 10;
}

/* 右矢印ボタン */
.kh-next{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(90deg, #2589d0 0%, #0ea5e9 100%);
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.kh-next:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* 「一覧を見る」ボタン */
.kh-more{
  margin-left: auto;
}

/* SPでは下に移動 */
@media (max-width: 900px){
  .kh-next-wrap{
    position: static;
    transform: none;
    margin-left: auto;
  }
  .kh-controls{
    justify-content: flex-end;
    gap: 12px;
  }
}
/* =========================
   転職ノウハウ：右矢印を縦中央に固定
   ========================= */

.kh-slider{
  position: relative; /* ← 矢印の基準に */
  overflow: hidden;
}

.kh-slider-wrap {
  position: relative;
}

.kh-next {
  position: absolute;
  top: 50%;
  right: -52px; /* ← 外に少し出す。内側なら 10px に調整 */
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(90deg, #2589d0 0%, #0ea5e9 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.kh-next:hover {
  transform: translateY(-50%) scale(1.07);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

@media (max-width:900px){
  .kh-next{
    position: static;
    transform: none;
    margin: 12px auto 0;
  }
}

/* 「一覧を見る」ボタンはそのまま下部 */
.kh-controls{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
}
.kh-more{
  margin-left: auto;
}

/* スマホ時：右矢印をスライダー下へ移動 */
@media (max-width: 900px){
  .kh-next-wrap{
    position: static;
    transform: none;
    margin-left: auto;
  }
  .kh-controls{
    justify-content: flex-end;
    gap: 10px;
  }
}
/* =========================
   転職ノウハウ：右矢印をスライダー右端・縦中央に配置
   ========================= */

/* スライダーコンテナを基準にする */
.kh-slider {
  position: relative;

}

/* 右矢印の位置：スライダーの右端・上下中央 */
.kh-next-wrap {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%); /* ← 半分外にはみ出させて中央に */
  z-index: 10;
}

/* 矢印ボタンのデザイン */
.kh-next {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(90deg, #2589d0 0%, #0ea5e9 100%);
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* slickが生成する領域からはみ出す演出を許可 */
.kh-slider-wrap .slick-list { overflow: visible; }

/* slickの器はdisplay:blockに固定（grid/flexの干渉を防ぐ） */
.kh-slider { display: block; }

/* 1スライド（記事カード） */
.kh { position: relative; margin: 0 10px; overflow: visible; }

/* サムネだけ動かす＆黒影（見切れ防止・スムーズ化） */
.kh__thumb{ position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:visible;
  transition: transform .28s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.kh__thumb img{ width:100%; height:100%; object-fit:cover; border-radius:inherit;
  transition: transform .28s cubic-bezier(.22,.61,.36,1); }
.kh__thumb::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:#000;
  opacity:0; transform:translate(0,0); z-index:-1;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .2s linear; }
.kh:hover .kh__thumb{ transform: translate(-10px,-10px); }
.kh:hover .kh__thumb::before{ opacity:1; transform: translate(14px,14px); }
.kh:hover .kh__thumb img{ transform: scale(1.015); }

/* 右矢印（スライダー外・縦中央固定） */
.kh-slider-wrap{ position: relative; }
.kh-next{
  position:absolute; top:50%; right:-22px; transform:translateY(-50%);
  z-index:10; width:48px; height:48px; border:none; border-radius:50%;
  background:linear-gradient(90deg,#2589d0 0%,#0ea5e9 100%); color:#fff; font-weight:900; font-size:22px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.15); transition:transform .2s ease, box-shadow .2s ease;
}
.kh-next:hover{ transform:translateY(-50%) scale(1.07); box-shadow:0 4px 12px rgba(0,0,0,.25); }

@media (max-width:900px){
  .kh-next{ position:static; transform:none; margin:12px auto 0; }
}
/* ==== 左上にずらしても切れない版 ==== */
.kh{
  position: relative;
  /* 上と左に “持ち上げ量” の余白を確保しておく */
  --lift: 12px;                  /* ← 左上へ動かす距離（調整可） */
  --shadow-shift: 10px;          /* ← 影の右下ずらし（調整可） */
  padding-top: var(--lift);
  padding-left: var(--lift);
  margin: 0 10px;
  overflow: visible;
}

/* サムネイル本体（動かすのはここだけ） */
.kh__thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: visible;
  will-change: transform;
  /* 初期は余白の中に収まる位置＝切れない */
  transform: translate(0,0);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}

/* 画像 */
.kh__thumb img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  border-radius: inherit;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  border: 3px solid white;
}

/* 黒い“板影”はサムネイルの背面だけに */
.kh__thumb::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:#000;
  opacity:0;
  transform: translate(0,0);
  z-index:-1;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .1s linear;
}

/* ホバー：サムネイルを左上へ、影は右下へ（切れない） */
.kh:hover .kh__thumb{
  transform: translate(calc(-1 * var(--lift)), calc(-1 * var(--lift)));
}
.kh:hover .kh__thumb::before{
  opacity:1;
  transform: translate(var(--shadow-shift), var(--shadow-shift));
}
.kh:hover .kh__thumb img{
  transform: scale(1.015);
}

/* slick ではみ出し演出を許可（念のため） */
.kh-slider-wrap .slick-list{ overflow: visible; }

/* 右矢印ボタン：ゆっくり色が変わる */
.kh-slider-wrap{ position: relative; }

.kh-next{
  position:absolute; top:50%; right:-42px; transform:translateY(-50%);
  z-index:10;
  width:48px; height:48px; border:none; border-radius:50%;
  /* 初期色（文字色＝矢印色） */
  color:#ffffff;
  /* グラデ背景（ゆっくり変えるために background-position をアニメ） */
  background: linear-gradient(90deg, #2589d0, #0ea5e9);
  background-size: 200% 100%;
  background-position: 0% 50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.15);
  /* ← ここが“ゆっくり”の肝 */
  transition:
    background-position .55s ease,  /* 背景のスライドでなめらかに変色 */
    color .45s ease,                 /* 矢印の色もゆっくり */
    transform .25s ease, box-shadow .25s ease;
  font-weight:900; font-size:22px;
}
.kh-next:hover{
  /* グラデをスライドさせて色がじわっと変わる */
  background-position: 100% 50%;
  color:#0b2545;                     /* ← 矢印色も変更（お好みで） */
  transform:translateY(-50%) scale(1.07);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.kh-next:active{
  transform:translateY(-50%) scale(1.02);
}

/* 画面幅が狭いときは下に移動（既存ならそのまま） */
@media (max-width:900px){
  .kh-next{ position:static; transform:none; margin:12px auto 0; }
}
/* =========================
   ABOUT 背景：薄いテキストが流れる演出
   ========================= */
#about { position: relative; overflow: hidden; } /* 親を基準にする */

.about-bgflow{
  position: absolute; inset: 0;
  z-index: 0;                    /* コンテンツの奥へ */
  pointer-events: none;          /* クリックを邪魔しない */
  user-select: none;
  opacity: .18;                  /* かなり薄く */
  /* エッジをフェードさせる（対応ブラウザで） */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.about-bgflow .flow-row{
  position: absolute; left: -5vw; right: -5vw;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: .08em;
  color: #0b2545;                /* ベース色（ネイビー） */
  mix-blend-mode: multiply;      /* 下地色となじませる（好みで外してOK） */
  /* グラデ文字にしたい場合： */
  background: linear-gradient(90deg, #93c5fd, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-bgflow .flow-row span{
  display: inline-block;
  padding-right: 4rem;           /* ループ間の隙間 */
}

/* 1行目（やや大きく・右へ） */
.about-bgflow .r1{
  top: 12%;
  font-size: clamp(26px, 4.4vw, 56px);
  transform: rotate(-2deg);
  animation: flow-right 38s linear infinite;
}

/* 2行目（小さめ・左へ・遅らせる） */
.about-bgflow .r2{
  bottom: 10%;
  font-size: clamp(22px, 3.6vw, 46px);
  transform: rotate(-2deg);
  opacity: .9;
  animation: flow-left 46s linear infinite 0.6s;
}

/* アニメーション（テキストをループさせる） */
@keyframes flow-right {
  from { transform: translateX(-50%) rotate(-2deg); }
  to   { transform: translateX(0)     rotate(-2deg); }
}
@keyframes flow-left {
  from { transform: translateX(0)     rotate(-2deg); }
  to   { transform: translateX(-50%)  rotate(-2deg); }
}

/* コンテンツを前面へ（奥のテキストより上） */
#about .split-wrap,
#about .about__lead,
#about .about-head { position: relative; z-index: 1; }

/* 端末負荷＆視認性対策 */
@media (max-width: 768px){
  .about-bgflow{ opacity:.14; }
  .about-bgflow .r1{ font-size: clamp(20px, 6vw, 34px); }
  .about-bgflow .r2{ font-size: clamp(18px, 5.2vw, 30px); }
}
/* 動きが苦手なユーザー設定を尊重 */
@media (prefers-reduced-motion: reduce){
  .about-bgflow .flow-row{ animation: none; }
}
/* パネルの中にも“流れ文字”を敷く */
.split-panel{
  position: relative;              /* 内部絶対配置の基準にする */
  overflow: hidden;                /* はみ出しを隠す */
}

/* 背景レイヤー（クリック不可・選択不可） */
.bgflow-panel{
  position: absolute; inset: 0;
  z-index: 0;                      /* ← パネル内の本文より下 */
  pointer-events: none;
  user-select: none;
  opacity: .16;                    /* かなり薄く */
  /* 端をフェード（対応ブラウザ） */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* 行ごとの見た目（全体用と同テイスト） */
.bgflow-panel .flow-row{
  position: absolute; left: -6vw; right: -6vw;
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: .08em;
  /* ブルー系グラデ文字（サイトのトーン） */
  background: linear-gradient(90deg, #93c5fd, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  mix-blend-mode: multiply;        /* 背景と馴染ませる（不要なら外す） */
}

.bgflow-panel .flow-row span{ display:inline-block; padding-right: 3.5rem; }

/* 上段：右へ流れる（やや小さめ） */
.bgflow-panel .r1{
  top: 12%;
  font-size: clamp(18px, 2.4vw, 26px);
  transform: rotate(-2deg);
  animation: flow-right 36s linear infinite;
}
/* 下段：左へ流れる（少し遅らせる） */
.bgflow-panel .r2{
  bottom: 10%;
  font-size: clamp(16px, 2.0vw, 22px);
  transform: rotate(-2deg);
  opacity: .95;
  animation: flow-left 44s linear infinite .6s;
}

/* パネル内の本文は前面へ */
.split-panel > *{ position: relative; z-index: 1; }

/* すでに無ければキーフレームを定義 */
@keyframes flow-right {
  from { transform: translateX(-50%) rotate(-2deg); }
  to   { transform: translateX(0)     rotate(-2deg); }
}
@keyframes flow-left {
  from { transform: translateX(0)     rotate(-2deg); }
  to   { transform: translateX(-50%)  rotate(-2deg); }
}

/* モバイル/負荷配慮 */
@media (max-width: 768px){
  .bgflow-panel{ opacity:.12; }
  .bgflow-panel .r1{ font-size: clamp(16px, 3.4vw, 20px); }
  .bgflow-panel .r2{ font-size: clamp(14px, 3.0vw, 18px); }
}
@media (prefers-reduced-motion: reduce){
  .bgflow-panel .flow-row{ animation: none; }
}
.about-bgflow{ z-index: 2; }
#about .split-wrap{ position: relative; z-index: 1; }
/* 転職ノウハウ：見出しとスライダー左端を合わせる */
.knowhow__inner {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 0; /* ← 左右間隔をゼロに（必要に応じて再調整） */
}

/* スライダー部分を同じ位置に揃える */
.kh-slider-wrap {
  margin-left: 0;
}

/* slick-list の左右paddingがある場合をリセット */
.kh-slider-wrap .slick-list {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.kh-slider-wrap {
  margin-left: 0;
}

.kh-slider-wrap .slick-list {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* 投稿タイトルの色を固定 */
.kh__ttl {
  color: #111827 !important;
}

.kh:hover .kh__ttl {
  color: #111827 !important;
}
/* ==== 転職ノウハウ：見出しとカードの左端を完全に揃える ==== */
.kh-slider .slick-list{
  margin-left: calc(-1 * (var(--kh-slide-gap) + var(--kh-lift)));
  overflow: visible; /* ホバー演出ではみ出し許可 */
}

/* もし左右の余白値を変更したら、-10px の値も同じだけ変えてください */
:root{
  --kh-slide-gap: 10px; /* .slick-slide の左右padding と揃える */
  --kh-lift: 12px;      /* .kh の --lift と同じ値 */
}
/* .kh のリフト量は変えずにOK（今まで通り） */
.kh{ --lift: var(--kh-lift); }

.outline-shadow {
  color:#fff;
  text-shadow:
    -2px -2px 0 #000,
     0   -2px 0 #000,
     2px -2px 0 #000,
    -2px  0   0 #000,
     2px  0   0 #000,
    -2px  2px 0 #000,
     0    2px 0 #000,
     2px  2px 0 #000;
  font-weight: 900;
}


/* ===== KNOWHOW（右上がりカット）===== */
/* ===== KNOWHOW：上も下も右上がりの1枚板 ===== */
#knowhow {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f6d14f 0%, #ffc218 100%);
  padding: 80px 0;
  z-index: 1;

  /* ここでセクション自体を斜めにカット */
  /* 左上より少し下 → 右上、左下 → 右下より少し上 ＝ どちらも右上がり */
  clip-path: polygon(
    0 10%,   /* 左上を少し下げる */
    100% 0,  /* 右上（高い位置）    → 上辺：右上がり */
    100% 90%,/* 右下を少し上げる   */
    0 100%   /* 左下（低い位置）    → 下辺：右上がり */
  );
}

/* カット角度（変更してOK） */
:root {
  --cut-height: 90px;  /* 斜め部分の高さ */
  --next-bg: #ffffff;  /* 上下の背景色（次のセクションが白なら白） */
}



@keyframes waveMove {
  from { background-position-x: 0; }
  to   { background-position-x: 1000px; }
}
/* =========================
   転職ノウハウセクション 波演出 有効化版
   ========================= */

/* =========================
   YouTube セクション
   ========================= */
#youtube {
  position: relative;
  padding: 60px 0;
  background: #0f172a; /* 濃いネイビー */
  color: #fff;
}


/* 見出し */
#youtube .yt__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 32px;
}

#youtube .yt__head h2 {
  font-size: 32px;
  margin: 0;
}

#youtube .yt__head p {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* 本体レイアウト：左メイン動画 + 右ミニリスト */
#youtube .yt__body {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
}

/* ===== メイン動画カード ===== */
#youtube .yt-feature {
  background: #020617;
  border-radius: 20px;
  padding: 18px 18px 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
}

#youtube .yt-feature__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

#youtube .yt-feature__thumb {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111827;
}

#youtube .yt-feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

/* 再生ボタン */
#youtube .yt-feature__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

#youtube .yt-feature__play::before {
  content: "";
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: rgba(15,23,42,.75);
  box-shadow: 0 0 0 4px rgba(15,23,42,.35);
}

#youtube .yt-feature__play::after {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent #f97316;
}

/* NEW バッジ */
#youtube .yt-feature__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fb923c, #f97316);
  color: #0f172a;
}

/* メイン動画：テキスト部分 */
#youtube .yt-feature__meta {
  margin-top: 16px;
}

#youtube .yt-feature__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: rgba(148,163,184,.18);
  color: #e5e7eb;
}

#youtube .yt-feature__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #22c55e;
}

#youtube .yt-feature__ttl {
  margin: 8px 0 6px;
  font-size: 20px;
  line-height: 1.5;
}

#youtube .yt-feature__date {
  display: block;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 8px;
}

#youtube .yt-feature__excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: #e5e7eb;
}

/* ホバー時の動き */
#youtube .yt-feature__link:hover .yt-feature__img {
  transform: scale(1.04);
}

/* ===== 右側ミニリスト ===== */
#youtube .yt-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#youtube .yt-item {
  background: rgba(15,23,42,.85);
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#youtube .yt-item__link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* サムネ（小） */
#youtube .yt-item__thumb {
  position: relative;
  flex: 0 0 120px;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #020617;
}

#youtube .yt-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .28s ease;
}

/* 小さい再生アイコン */
#youtube .yt-item__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

#youtube .yt-item__play::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15,23,42,.72);
}

#youtube .yt-item__play::after {
  content: "";
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #f97316;
}

/* テキスト */
#youtube .yt-item__meta {
  flex: 1 1 auto;
  min-width: 0;
}

#youtube .yt-item__ttl {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 4px;
}

#youtube .yt-item__date {
  font-size: 12px;
  color: #9ca3af;
}

/* ミニカードのホバー */
#youtube .yt-item:hover {
  background: rgba(30,64,175,.9);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(15,23,42,.6);
}

#youtube .yt-item:hover .yt-item__img {
  transform: scale(1.04);
}

/* ===== フッターのボタン／リンク ===== */
#youtube .yt__footer {
  margin-top: 28px;
  display: flex;
  gap: 16px;
  align-items: center;
}

#youtube .yt-more {
  margin-left: 0;
  border-radius: 999px;
  padding-inline: 28px;
  font-weight: 700;
}

#youtube .yt-channel {
  font-size: 13px;
  color: #bfdbfe;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== SPレイアウト ===== */
@media (max-width: 900px) {
  #youtube {
    padding: 40px 0;
  }

  #youtube .yt__body {
    grid-template-columns: 1fr;
  }

  #youtube .yt-list {
    margin-top: 18px;
  }
}
/* ベースボタン */
.btn.btn-border {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;              /* コンパクトめ */
  font-size: 14px;
  font-weight: 700;
  border-radius: 9999px;          /* 角丸。四角が良ければ 4px くらいに */
  border: 1px solid #2589d0;      /* 枠色：ブランドブルー想定 */
  background-color: #ffffff;      /* 最初は白背景 */
  color: #2589d0;                 /* 文字は枠と同じ色 */
  text-decoration: none;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

/* ホバー：少しゆっくり反転 */
.btn.btn-border:hover {
  background-color: #2589d0;      /* 背景がブルーに */
  color: #ffffff;                 /* 文字が白に */
  border-color: #2589d0;
}

/* フォーカス（キーボード操作用に任意） */
.btn.btn-border:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}