/* ================================================
   経理AX by TOKIUM サイト — style.css
   Figma 5i7zT19Nrk2TM0famrS1Vt / node 13196:8726
   ベース実装: pj_AI明細入力サイト の構造を踏襲
   PC: 1440px 基準 / TAB: zoom縮小 / SP: 別途調整（後段）
   ================================================ */

:root{
  --tokium-green: #008D97;
  --tokium-green-dark: #006d74;
  --tokium-light-green: #00CC99;
  --tokium-orange: #F98938;
  --tokium-text: #222229;
  --tokium-black: #191414;
  --tokium-white: #FFFFFF;
  --tokium-gray: #F6F6F6;
  --tokium-pale-blue: #EDF7F8;
  --tokium-border: #D7D7DA;
  --tokium-border-light: #E2E2E2;
  --tokium-muted: #B2B7B8;
  --tokium-line: #BAB9B9;
  --font-base: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --header-h: 79px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
br.sp-only{ display:none; }
picture{ display:contents; }
body{
  font-family: var(--font-base);
  color: var(--tokium-text);
  font-size:16px;
  line-height:1.8;
  background:#fff;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
.sp-only{ display:none; }

/* セクション英文ラベル / Eyebrow（タイトル上の小さなラベル）
   - 左の短い線で平坦さを和らげるアクセント
   - PC: header が absolute 配置のため、eyebrow を header の上に絶対配置して
     タイトル/リード文の位置を変えずに上空に表示
   - text-indent で letter-spacing による右側余白ぶんを左側に再配分 */
.section-eyebrow{
  position:absolute;
  left:0;
  top:-24px;
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.18em;
  line-height:1;
  color: var(--tokium-green);
  text-transform:uppercase;
  text-indent:-0.09em;
}
.section-eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background: currentColor;
  flex-shrink:0;
  transform: translateY(0.5px);
}
/* contact ヘッダーは PC で static のため、eyebrow の絶対配置起点を作る */
.contact__header{ position:relative; }
/* cta-band は中央寄せ＋背景が緑のため白色表示 */
.cta-band__header .section-eyebrow{
  left:0;
  right:0;
  justify-content:center;
  color:#fff;
}
/* cta-band / contact は左の線を表示しない */
.cta-band__header .section-eyebrow::before,
.contact__header .section-eyebrow::before{ display:none; }
.cta-band__header .section-eyebrow,
.contact__header .section-eyebrow{ text-indent:0; }
/* contact (DOWNLOAD) ラベルは中央配置 */
.contact__header .section-eyebrow{
  left:0;
  right:0;
  justify-content:center;
}

/* PC stages */
.site-header,
.hero,
.problem,
.purpose{
  position:relative;
  width:100%;
  min-width: 1440px;
}

/* ==========================================================
   HEADER (流用: サービスサイト)
   ========================================================== */
.tokium_green {
    color: #008D97;
}
.header_pc_renew {
    background: #fff;
    box-sizing: border-box;
    z-index: 10000;
    border-bottom: solid 2px #d7d7da;
    position: sticky;
    top: 0;
}

.header_pc_renew .header_main_flex {
    padding: 0 35px;
    height: 79px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: #fff;
}

.header_pc_renew .header_main_flex .header_logo {
    width: 156px;
}

.header_pc_renew .header_main_flex .header_logo img {
    width: 100%;
    height: auto;
}

.header_pc_renew .header_main_flex .header_logo.tk_logo {
    width: 248px;
}

.header_pc_renew .header_main_flex .header_logo.ti_logo {
    width: 256px;
}

.header_pc_renew .header_main_flex .header_logo.td_logo {
    width: 280px;
}

.header_pc_renew .header_main_flex .header_logo.tc_logo {
    width: 247px;
}

.header_pc_renew .header_main_flex .header_nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header_pc_renew .header_main_flex .header_nav .nav_link {
    margin-left: 24px;
    padding: 0 5px;
    font-size: 14px;
    font-weight: 700;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .underline {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .underline::after {
    content: "";
    width: 100%;
    height: 2px;
    background: #008d97;
    position: absolute;
    bottom: -28px;
    left: 0;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .3s;
    z-index: 1100;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .underline:hover {
    color: #008d97;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .underline:hover::after {
    transform: scale(1, 1);
}

.header_pc_renew .header_main_flex .header_nav .nav_link.link_btn a {
    padding: 8px 10px;
    border: solid 1px #b2b7b8;
    border-radius: 20px;
    transition: .3s;
    font-size: 17px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.link_btn a:hover {
    background: #f98938;
    color: #fff;
    border: solid 1px #f98938;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.link_btn .underline::after {
    background: #f98938;
    bottom: -26px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.btn_left a {
    background: #f98938;
    color: #fff;
    border: solid 1px #f98938;
}

.header_pc_renew .header_main_flex .header_nav .link_more {
    transition: .3s;
}

.header_pc_renew .header_main_flex .header_nav .link_more:hover {
    cursor: pointer;
}

.header_pc_renew .header_main_flex .header_nav .link_more:hover .header_pc_renew .header_main_flex .header_nav .link_more:hover .underline::after {
    transform: scale(1, 1);
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f6f6f6;
    width: 100%;
    height: 120px;
    position: absolute;
    top: 80px;
    left: 0;
    z-index: 1000;
    transition: .3s;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu:hover {
    cursor: default;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 40px;
    font-weight: 400;
    line-height: 170%;
    letter-spacing: 10%;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li .hide_item {
    width: 35%;
    margin: 10px 0;
    display: flex;
    align-items: center;
    line-height: 100%;
    letter-spacing: .1em;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li .hide_item .side_line {
    margin-top: 0;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li .side_line {
    margin-top: 12px;
    margin-right: 10px;
    display: inline-block;
    width: 16px;
    height: 1px;
    background: #008d97;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li .side_line.line_fee {
    margin-top: 10px;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li .side_line.line_other {
    margin-top: 10px;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li .side_line.line_login {
    margin-top: 10px;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li .text_s {
    font-size: 10px;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li.last_item {
    position: relative;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li.last_item::after {
    content: "";
    width: 1px;
    height: 62px;
    background: #008d97;
    position: absolute;
    top: 50%;
    left: -80px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li a.menu_link {
    position: relative;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li a.menu_link::after {
    content: "";
    width: 100%;
    height: 1px;
    background: #008d97;
    position: absolute;
    bottom: -2px;
    left: 0;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: .3s;
    z-index: 1000;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li a.menu_link:hover {
    color: #008d97;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu li a.menu_link:hover::after {
    transform: scale(1, 1);
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu.and_th li {
    justify-content: flex-start;
    margin: 0;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu.and_th li .hide_item {
    width: 30%;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu.price_menu {
    max-width: 1000px;
    padding: 22px 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    flex-wrap: wrap;
    justify-content: flex-start;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu.price_menu::before {
    content: "";
    background: #f6f6f6;
    width: 10000px;
    height: 120px;
    position: absolute;
    top: 0;
    left: -5000px;
    z-index: -999;
}

.header_pc_renew .header_main_flex .header_nav .link_more .hide_menu.price_menu li {
    width: 33.3%;
    margin: 0;
    justify-content: flex-start;
    letter-spacing: 10%;
    line-height: 170%;
}

.header_pc_renew .header_main_flex .right_menu .nav_link {
    margin-left: 14px;
    padding: 0;
}

.header_sp_renew {
    display: none;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .underline .vector_bottom {
    position: absolute;
    top: 50%;
    right: -13px;
    transform: translateY(-50%);
    transition: .3s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link:hover .underline .vector_bottom {
    margin-top: 2px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu {
    display: none;
    height: inherit;
    padding: 30px 0;
    font-weight: 500;
    top: 81px;
    overflow: hidden;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful {
    display: none;
    padding: 30px 0;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_left {
    width: 154px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_left .left_sub {
    margin-bottom: 16px;
    font-size: 18px;
    color: #008D97;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_left .s_list .top {
    width: 100%;
    padding: 11px 15px 11px 43px;
    display: block;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_left .s_list .top .top_ul {
    text-decoration: underline;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_left .s_list .h_service {
    width: 100%;
    padding: 11px 15px;
    display: flex;
    align-items: center;
    font-weight: 700;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_left .s_list .h_service.h_active {
    background: #fff;
    border-radius: 8px 0 0 8px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_left .s_list .h_service.h_active .vector_right {
    display: none;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_left .s_list .h_service:hover .vector_right {
    margin-left: 6px;
    transition: .1s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_left .s_list .h_service .s_icon {
    margin-right: 8px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_left .s_list .h_service .vector_right {
    margin-left: 4px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle {
    width: 552px;
    background: #fff;
    border-radius: 8px;
    margin-top: 10px;
    margin-left: -14px;
    padding: 20px 0;
    display: flex;
    align-items: center;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents {
    display: none;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show {
    display: block;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_flex {
    display: flex;
    justify-content: space-between;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_flex .service_menu {
    width: 50%;
    padding-left: 38px;
    align-content: center;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_flex .service_menu .main_service {
    margin-bottom: 32px;
    display: block;
    position: relative;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_flex .service_menu .main_service::before {
    content: '';
    width: 218px;
    height: 2px;
    background: #D7D7DA;
    position: absolute;
    bottom: -12px;
    left: 0;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_flex .service_menu .main_service::after {
    content: '';
    width: 218px;
    height: 2px;
    background: #008D97;
    position: absolute;
    bottom: -12px;
    left: 0;
    transform: scale(0,1);
    transform-origin: left top;
    transition: 0.3s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_flex .service_menu .main_service:hover::after {
    transform: scale(1,1);
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_flex .service_menu .main_service .catch_copy {
    margin-bottom: 8px;
    white-space: nowrap;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_flex .service_menu .main_service .service_flex {
    display: flex;
    align-items: center;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_flex .service_menu .main_service .service_flex .service_logo {
    width: 192px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_flex .service_menu .main_service .service_flex .circle_right {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    transition: 0.3s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents.show .service_moc {
    width: 254px;
    align-content: end;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents .other_service {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    position: relative;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents .other_service.last {
    margin-bottom: inherit;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents .other_service::after {
    content: '';
    width: 190px;
    height: 1px;
    background: #008D97;
    position: absolute;
    bottom: -6px;
    left: 0;
    transform: scale(0,1);
    transform-origin: left top;
    transition: 0.3s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents .other_service .circle_right {
    width: 16px;
    height: 16px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents .other_service:hover::after {
    transform: scale(1,1);
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_middle .h_service_contents .other_service .service_name {
    width: max-content;
    margin: 0 8px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_right {
    width: 258px;
    margin-left: 8px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_right .option .option_sub {
    margin-bottom: 10px;
    font-size: 18px;
    color: #008D97;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_right .option_flex .option_menu {
    display: inline-block;
    position: relative;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_right .option_flex .option_menu.left {
    margin-right: 16px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_right .option_flex .option_menu.last {
    margin-top: 16px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_right .eyecatch_menu::after,.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_right .option_flex .option_menu::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #008D97;
    position: absolute;
    bottom: -6px;
    left: 0;
    transform: scale(0,1);
    transform-origin: left top;
    transition: 0.3s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_right .eyecatch_menu:hover::after,.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .h_menu_flex .h_menu_right .option_flex .option_menu:hover::after {
    transform: scale(1,1);
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .pickup {
    margin-bottom: 8px;
    text-align: center;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .pickup .pickup_sub {
    margin-bottom: -10px;
    font-size: 18px;
    font-weight: 700;
    font-family: "Neuzeit Grotesk",sans-serif;
    color: #008D97;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .eyecatch {
    margin-bottom: 15px;
    display: block;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .eyecatch img {
    width: 100%;
    height: auto;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .eyecatch_menu {
    margin-bottom: 15px;
    display: inline-block;
    position: relative;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu .eyecatch:hover img {
    box-shadow: 0 0 9px gray;
    transition: 0.3s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu {
    max-width: inherit;
    width: 100%;
    padding: 30px 0;
    left: 0;
    transform: inherit;
    -webkit-transform: inherit;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu::before {
    display: none;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_left {
    width: 70%;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_left .fee_sub {
    margin-bottom: 28px;
    font-size: 18px;
    color: #008D97;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_left .menu_list {
    display: flex;
    justify-content: space-between;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_left .menu_list .list_left {
    width: 50%;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_left .menu_list .list_right {
    width: 50%;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_left .menu_list .fee_menu_link {
    margin-bottom: 30px;
    display: inline-block;
    align-items: center;
    font-size: 16px;
    line-height: 16px;
    position: relative;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_left .menu_list .fee_menu_link .circle_right {
    width: 16px;
    height: 16px;
    margin-left: 6px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_left .menu_list .fee_menu_link::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #008D97;
    position: absolute;
    bottom: -6px;
    left: 0;
    transform: scale(0,1);
    transform-origin: left top;
    transition: 0.3s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_left .menu_list .fee_menu_link:hover::after {
    transform: scale(1,1);
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_right {
    width: 22%;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.price_menu .fee_menu_flex .fee_right .pickup_txt {
    margin-top: -20px;
    text-align: center;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content {
    max-width: 1000px;
    margin: 0 auto;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content .menu_sub {
    margin-bottom: 28px;
    font-size: 18px;
    color: #008D97;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content .menu_flex {
    display: flex;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content .menu_flex .useful_menu {
    width: 45%;
    display: flex;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content .menu_flex .useful_menu .menu_link {
    margin-right: 16px;
    display: inline-block;
    font-size: 16px;
    height: 16px;
    line-height: 16px;
    position: relative;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content .menu_flex .useful_menu .menu_link .circle_right {
    width: 16px;
    height: 16px;
    margin-left: 6px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content .menu_flex .useful_menu .menu_link::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #008D97;
    position: absolute;
    bottom: -8px;
    left: 0;
    transform: scale(0,1);
    transform-origin: left top;
    transition: 0.3s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content .menu_flex .useful_menu .menu_link:hover::after {
    transform: scale(1,1);
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content .menu_flex .useful_menu .menu_img {
    width: 220px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content .menu_flex .useful_menu .menu_img img {
    width: 100%;
    height: auto;
}

.header_pc_renew .header_main_flex .header_nav .nav_link .hide_menu.useful .useful_content .menu_flex .useful_menu .menu_img.blog {
    margin-left: 8px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.link_more {
    margin-right: 10px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.link_more.m_active .underline .vector_bottom {
    margin-top: 3px;
    transform: rotate(180deg);
    transform-origin: top center;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.link_more.m_active .hide_menu {
    display: block;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.link_more.m_active .hide_menu::after {
    content: '';
    position: fixed;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    background: #0009;
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0,.7,0,1);
    margin-top: 30px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.login_menu .hide_menu {
    transition: 2s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.login_menu .hide_menu .menu_box {
    position: relative;
    height: 100px;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.login_menu .hide_menu .menu_box .menu_box_content {
    position: absolute;
    top: 50%;
    right: 135px;
    transform: translateY(-50%);
}

.header_pc_renew .header_main_flex .header_nav .nav_link.login_menu .hide_menu .menu_box .menu_box_content .menu_nav {
    margin: 30px 0;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.login_menu .hide_menu .menu_box .menu_box_content .menu_nav .menu_link {
    position: relative;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.login_menu .hide_menu .menu_box .menu_box_content .menu_nav .menu_link::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #008D97;
    position: absolute;
    bottom: -8px;
    left: 0;
    transform: scale(0,1);
    transform-origin: left top;
    transition: 0.3s;
}

.header_pc_renew .header_main_flex .header_nav .nav_link.login_menu .hide_menu .menu_box .menu_box_content .menu_nav .menu_link:hover::after {
    transform: scale(1,1);
}

.header_pc_renew .header_main_flex .header_nav .nav_link.login_menu .hide_menu .menu_box .menu_box_content .menu_nav .menu_link .circle_right {
    width: 16px;
    height: 16px;
    margin-left: 6px;
}

.mai_menu {
    width: 158px;
    margin: -5px auto 20px;
    display: flex;
    text-decoration: underline;
}

@media screen and (max-width: 1000px) {
    .header_pc_renew {
        display: none;
    }

    .header_sp_renew {
        display: block;
        height: 49px;
    }

    .header_sp_renew .header_main_flex {
        width: 100%;
        border-bottom: solid 1px #d7d7da;
        padding: 0 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        z-index: 10000;
        background: #fff;
    }

    .header_sp_renew .header_main_flex:has(.active) {
        border-bottom: inherit;
    }

    .header_sp_renew .header_main_flex .header_logo {
        width: 120px;
    }

    .header_sp_renew .header_main_flex .header_logo img {
        width: 100%;
        height: auto;
    }

    .header_sp_renew .header_main_flex .header_logo.tk_logo {
        width: 192px;
    }

    .header_sp_renew .header_main_flex .header_logo.ti_logo {
        width: 198px;
    }

    .header_sp_renew .header_main_flex .header_logo.td_logo {
        width: 216px;
    }

    .header_sp_renew .header_main_flex .header_logo.tc_logo {
        width: 200px;
    }

    .header_sp_renew .header_main_flex .header_menu_btn {
        width: 48px;
        height: 48px;
        position: relative;
    }

    .header_sp_renew .header_main_flex .header_menu_btn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 13px;
        height: 2px;
        background-color: #222229;
    }

    .header_sp_renew .header_main_flex .header_menu_btn span:nth-of-type(1) {
        top: 22px;
        width: 50%;
    }

    .header_sp_renew .header_main_flex .header_menu_btn span:nth-of-type(2) {
        top: 29px;
        width: 50%;
    }

    .header_sp_renew .header_main_flex .header_menu_btn.active span:nth-of-type(1) {
        top: 20px;
        left: 16px;
        transform: translateY(6px) rotate(-45deg);
    }

    .header_sp_renew .header_main_flex .header_menu_btn.active span:nth-of-type(2) {
        top: 32px;
        left: 16px;
        transform: translateY(-6px) rotate(45deg);
    }

    .header_sp_renew .menu_fixed {
        max-height: 100vh;
        width: 100%;
        padding: 0 16px 80px 16px;
        background: #f6f6f6;
        overflow-y: auto;
        position: fixed;
        z-index: 1000;
        top: -120%;
        left: 0;
        transition: all .6s;
    }

    .header_sp_renew .menu_fixed.open_menu {
        top: 48px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link {
        padding: 40px 18px;
        border-top: solid 1px #b2b7b8;
        font-size: 16px;
        font-weight: 500;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link a {
        display: block;
        width: 100%;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu li {
        display: flex;
        margin-top: 23px;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: 0,4em;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu li .side_line {
        margin-top: 8px;
        margin-right: 10px;
        display: inline-block;
        width: 16px;
        height: 1px;
        background: #008d97;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu li .side_line.line_other {
        margin-top: 10px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu li .text_s {
        font-size: 12px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu li.last_item {
        margin-top: 36px;
        font-size: 15px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .bottom_menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .bottom_menu li.bottom_item {
        display: flex;
        align-items: center;
        width: 50%;
        margin-top: 23px;
        font-size: 14px;
        font-weight: 400;
        line-height: 120%;
        letter-spacing: 0,4em;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .bottom_menu li.bottom_item .side_line {
        margin-right: 10px;
        display: inline-block;
        width: 16px;
        height: 1px;
        background: #008d97;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .bottom_menu li.last_item {
        width: 100%;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .link_more_sp {
        position: relative;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .link_more_sp .hide_menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height .7s;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .link_more_sp.open .hide_menu {
        max-height: 100vh;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .link_more_sp.open::before {
        opacity: 0;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .link_more_sp.open::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .header_sp_renew .menu_fixed .header_nav_sp .link_more_sp::before,.header_sp_renew .menu_fixed .header_nav_sp .link_more_sp::after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 2px;
        background-color: #b2b7b8;
        position: absolute;
        top: 49px;
        right: 20px;
        transition: opacity .7s;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .link_more_sp::after {
        top: 50px;
        transform: translateY(-50%) rotate(90deg);
        transition: transform .7s;
    }

    .header_sp_renew .menu_fixed .btn_section {
        padding-bottom: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header_sp_renew .menu_fixed .btn_section .header_cta_btn {
        max-width: 320px;
        max-height: 44px;
        width: 48%;
        padding: 10px 0;
        border-radius: 24px;
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        line-height: 100%;
    }

    .header_sp_renew .menu_fixed .btn_section .header_cta_btn.sp_orange {
        background: #f98938;
        color: #fff;
    }

    .header_sp_renew .menu_fixed .btn_section .header_cta_btn.sp_white {
        margin-left: 8px;
        background: #fff;
        border: solid 1px #d7d7da;
        box-sizing: border-box;
    }
}

@media screen and (max-width:1080px) {
    .header_pc_renew .header_main_flex .header_nav .nav_link .underline {
        font-size: 12px;
    }
}

@media screen and (max-width:1000px) {
    .header_sp_renew .menu_fixed .header_nav_sp .nav_link {
        padding: 20px 18px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link.link_more_sp::before {
        display: none;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link.link_more_sp::after {
        display: none;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link.link_more_sp .underline {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link.link_more_sp .underline .vector_bottom {
        transition: .7s;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link.link_more_sp.open .underline .vector_bottom {
        transition: .3s;
        transform: rotate(180deg);
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link.link_more_sp.open .hide_menu {
        max-height: 200vh!important;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .bottom_menu {
        margin-bottom: 20px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .bottom_menu li.bottom_item {
        width: 48%;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .bottom_menu li.bottom_item .square {
        margin-right: 4px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu {
        font-weight: 400;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu.open {
        max-height: 200vh!important;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .top {
        margin-top: 30px;
        display: block;
        color: #008D97;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .service_name {
        margin-top: 40px;
        color: #008D97;
        display: flex;
        align-items: center;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .service_name .s_icon {
        margin-right: 4px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .main_service {
        margin-top: 20px;
        margin-left: 20px;
        display: block;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .main_service .catch_copy {
        margin-bottom: 6px;
        font-size: 14px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .main_service .service_flex {
        display: flex;
        align-items: center;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .main_service .service_flex .service_logo {
        margin-right: 6px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .other_service {
        margin-top: 20px;
        margin-left: 20px;
        display: flex;
        align-items: center;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .other_service .service_name {
        margin: 0 6px;
        color: #191414;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .menu_link {
        display: flex;
        align-items: center;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .hide_menu .menu_link .circle_right {
        margin-left: 6px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .menu_icon {
        width: 20px;
        height: 20px;
    }

    .header_sp_renew .menu_fixed .header_nav_sp .nav_link .circle_right {
        width: 16px;
        height: 16px;
    }

    .header_sp_renew .menu_fixed .btn_section .header_cta_btn {
        max-height: inherit;
        padding: 14px 0;
        position: relative;
    }

    .header_sp_renew .menu_fixed .btn_section .header_cta_btn::after {
        content: '';
        width: 20px;
        height: 20px;
        background-image: url(../images/renew_btn/dl_o.svg);
        background-size: cover;
        vertical-align: middle;
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
    }

    .header_sp_renew .menu_fixed .btn_section .sp_white::after {
        background-image: url(../images/renew_btn/btn_arrow_wb.svg);
    }
}

/* ==========================================================
   HERO  (Figma 1440×700 → 画面いっぱいフルウィンドウ)
   - 高さ: viewport - header
   - 1440px ステージを中央に配置し、ステージ内は Figma座標で絶対配置
   ========================================================== */
.hero{
  /* 1440px基準でinner(640px)+padding。body zoom と vh の相性問題を回避するため固定値に
     CTAが縦短(720px等)ビューポートでも fold 内に収まるよう、Figmaの700→640に圧縮 */
  min-height: 660px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;
}
.hero__bg{
  position:absolute;
  /* Figma: dot pattern (back) at left:317.22 top:-17 w:1122.78 h:550 — 主要部分の右半分背景。-6px下げ調整 */
  left: calc(50% - 720px + 317px);
  top: -21px;          /* さらに1px上 */
  width: 1123px;
  height: 550px;
  background-image: url("assets/hero/dots.svg");
  background-size: 1123px 550px;
  background-repeat: no-repeat;
  background-position: top left;
  pointer-events:none;
  z-index:0;
  clip-path: inset(0 100% 0 0);
  animation: heroBgReveal 1.1s cubic-bezier(.25,.1,.25,1) .15s both;
}
.hero__inner{
  position:relative;
  width:1440px;
  height:640px;          /* Figma基準700pxから-60px。下部の余白を詰めCTAをfold内に */
  flex-shrink:0;
  z-index:1;
}

/* チップ "経理AX by TOKIUM" — Figma: (217, 180), 197×40 */
.hero__chip{
  position:absolute;
  left:217px;
  top:140px;
  width:auto;
  min-width:197px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  background:#fff;
  border-radius:20px;
  box-shadow: 0 0 16px rgba(0,204,153,0.35);
  letter-spacing:2px;
  white-space:nowrap;
  z-index:3;
  opacity:0;
  animation: heroFadeUp .55s ease-out .25s both;
}
.hero__chip-main{
  font-size:20px;
  font-weight:500;
  line-height:1.2;
  color: var(--tokium-green);
  margin-right:6px;
}
.hero__chip-sub{
  font-size:14px;
  font-weight:300;
  line-height:1.2;
  color: var(--tokium-text);
  position:relative;
  top:4px;
}

/* 水平ライン — Figma: top:254, 画面端〜画面端 */
.hero__line{
  position:absolute;
  left: calc(50% - 50vw);
  top:214px;
  width:100vw;
  height:1px;
  background: var(--tokium-line);
  transform: scaleX(0);
  transform-origin: left center;
  animation: heroLineDraw .8s cubic-bezier(.4,0,.2,1) 1.4s both;
  z-index:0;
}
.hero__line::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:320px;
  height:1px;
  background: linear-gradient(90deg, transparent 0%, #00CC99 28%, #00CC99 72%, transparent 100%);
  box-shadow: 0 0 4px rgba(0,204,153,.55), 0 0 10px rgba(0,204,153,.25);
  opacity:0;
  transform: translateX(-320px);
  animation: heroLineStreak 1.4s ease-out 2.25s both;
  pointer-events:none;
}

/* 右ビジュアル (PIVOT/動画想定) — Figma基準550×310を縮小し、下辺をタイトル1行目ベースラインに合わせる */
.hero__visual{
  position:absolute;
  left:690px;          /* -12px左寄せ */
  top:45px;            /* +2px下げ */
  width:479px;         /* 550→479 (aspect 1.774 維持) */
  height:270px;        /* 310→270, 下辺=309pxで title 1行目ベースライン付近 */
  z-index:3;
  border-radius:6px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 12px 40px rgba(34, 34, 41, 0.18);
  opacity:0;
  animation: heroFadeUp .75s ease-out 2.0s both;
}
.visual_innar{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.hero__visual iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 主要素: heading + subtitle + CTAs — Figma: 50%中央, top:270, w:1000 */
.hero__main{
  position:absolute;
  left:50%;
  top:230px;
  width:1000px;
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  z-index:2;
}
.hero__title{
  /* title line-height 1.2 によるグリフ下余白(~14px)を考慮し、margin-bottomは14pxに圧縮。
     lead→CTAの視覚距離(34.8px)とほぼ等しい視覚距離になる */
  margin:0 0 14px;
  width:958px;
  font-size:88px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:0;
  color: var(--tokium-text);
  font-feature-settings:'palt' 1;
}
.hero__title > span{
  display:block;
  opacity:0;
  animation: heroTitleSlide .9s cubic-bezier(.2,.8,.2,1) both;
}
.hero__title > span:nth-child(1){ animation-delay: .7s; }
.hero__title > span:nth-child(2){ animation-delay: 1.05s; }
.hero__title-x{
  display:inline-block;
  font-size:0.7em;
  font-weight:100;        /* Noto Sans JP Thin */
  vertical-align:baseline;
  position:relative;
  bottom:10px;
  margin:0 0.1em;
  animation:none;
  opacity:inherit;
}
.hero__lead{
  margin:0 0 28px;     /* gap廃止に伴いリード→CTA間距離を明示 */
  max-width:1000px;
  font-size:17px;
  font-weight:500;
  line-height:1.8;
  color: var(--tokium-text);
  opacity:0;
  animation: heroFadeUp .6s ease-out 1.7s both;
}
.hero__ctas{
  display:flex;
  gap:40px;
  opacity:0;
  animation: heroFadeUp .6s ease-out 2.1s both;
}
.hero-btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8.89px;
  width:253px;
  padding:17.78px 24.9px 21.34px;
  background: var(--tokium-green);
  color:#fff;
  font-size:17px;
  line-height:1.2;
  white-space:nowrap;
  isolation:isolate;
}
.hero-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--tokium-green-dark);   /* hover: 黒 → 濃いめの緑 #006d74 */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}
.hero-btn:hover::before{
  transform: scaleX(1);
}
.hero-btn--primary{
  font-weight:600;
}
.hero-btn--secondary{
  font-weight:600;
}
.hero-btn__arrow{
  width:34.1px;
  height:auto;
  flex-shrink:0;
  color:#fff;
  transition: transform .25s ease, color .35s ease;
}
.hero-btn:hover .hero-btn__arrow{
  transform: translateX(4px);
  color:#00CC99;
}

/* ==========================================================
   PROBLEM (Figma 1440×797)
   ========================================================== */
.problem{
  height: 751px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  background:#fff;
}
.problem__inner{
  position:relative;
  width:1440px;
  height:751px;
  flex-shrink:0;
}
.problem__bg{
  position:absolute;
  /* inner(1440px)の左端基準で -199px の Figma座標。
     ワイドモニタでも inner中央基準で配置するため calc で換算 */
  left: calc(50% - 720px - 199px);
  top:111px;
  width:1122.78px;
  height:550px;
  background-image: url("assets/hero/dots.svg");
  background-size: 1122.78px 550px;
  background-repeat: no-repeat;
  background-position: top left;
  transform: rotate(180deg);
  pointer-events:none;
  z-index:0;
}

/* Header */
.problem__header{
  position:absolute;
  left:220px;
  top:37px;
  z-index:2;
}
.problem__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  color: var(--tokium-text);
  white-space:nowrap;
}
.problem__lead{
  margin:0;
  margin-top:17px;
  font-size:18px;
  font-weight:400;
  line-height:1.6;
  color:#000;
  width:1004px;
}

/* Horizontal lines (1000px centered) */
.problem__hline{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width:1000px;
  height:1px;
  margin:0;
  border:0;
  background: var(--tokium-line);
  z-index:1;
}
.problem__hline--top{ top:102px; }
.problem__hline--bottom{ top:696px; }

/* Cards layout */
.problem__cards{
  position:absolute;
  left:220px;
  top:135px;
  width:1000px;
  display:flex;
  align-items:flex-start;
  z-index:2;
}
.problem-card{
  width:432px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.problem-card:first-of-type{ margin-right:0; }

/* Vertical divider between cards */
.problem__vline{
  flex:1;
  align-self:stretch;
  position:relative;
  min-height:509.5px;
}
.problem__vline::before{
  content:"";
  position:absolute;
  left:50%;
  top:9px;             /* Figma: top:190 - cards top:181 = 9 */
  width:1px;
  height:509.5px;
  background: var(--tokium-line);
  transform: translateX(-50%);
}

/* Card title & body */
.problem-card__title{
  margin:0;
  font-size:26px;
  font-weight:500;
  line-height:1.5;
  color:#0a5257;
}
.problem-card__body{
  margin:0;
  font-size:16px;
  font-weight:300;
  line-height:1.8;
  color:#000;
}

/* ===== Legend (shared) ===== */
.legend{
  display:flex;
  flex-direction:column;
  gap:0;
  font-size:14px;
  font-weight:300;
  line-height:1.8;
  color:#000;
}
.legend li{
  display:flex;
  align-items:center;
  gap:0;
  white-space:nowrap;
}
.legend__mark{
  display:inline-block;
  width:0.85em;
  height:0.85em;
  margin-right:0;
  flex-shrink:0;
}
.legend__mark--sys{ background:#a3a1a1; }
.legend__mark--hr{ background:#757272; }
.legend__mark--profit{ background:#008d97; }
.legend__mark--severe{ background:#0a5257; }
.legend__mark--some{ background:#008d97; }
.legend__mark--other{ background:#bab9b9; }

/* ===== Bar chart ===== */
.bar-chart{
  margin:0;
  width:431px;
  height:294px;
  position:relative;
}
.bar-chart .legend{
  position:absolute;
  left:3px;
  top:43px;
}
.bar-chart__plot{
  position:absolute;
  left:3px;
  top:30px;
  width:437px;
  height:221px;        /* 220 bars + 1 axis line */
}
.bar-chart__bars{
  position:absolute;
  left:18.05px;
  bottom:1px;          /* sit ON the x-axis line */
  width:calc(429px - 18.05px);
  height:220px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:28px;
  margin:0;
  padding:0;
}
.bar{
  width:60px;
  display:flex;
  flex-direction:column;
}
.bar-chart .seg{
  display:block;
  width:100%;
  height:0;
}
.seg--sys{ background:#a3a1a1; }
.seg--hr{ background:#757272; }
.seg--profit{ background:#008d97; }
.bar-chart__axis{
  position:absolute;
  left:0;
  bottom:0;
  width:429px;
  height:1px;
  background:#222229;
}
.bar-chart__axis::after{
  content:"";
  position:absolute;
  right:-7px;
  bottom:-2.5px;
  width:0;
  height:0;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-left:7px solid #222229;
}

/* === Card entrance (left first, then right) === */
.problem-card{
  opacity:0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.problem.is-active .problem-card:nth-of-type(1){
  opacity:1;
  transform:none;
  transition-delay: 0.05s;
}
.problem.is-active .problem-card:nth-of-type(2){
  opacity:1;
  transform:none;
  transition-delay: 0.45s;
}

/* === Bar chart entrance animation ===
   Phase 1: profit bars grow left-to-right (each bar to its profit value)
   Phase 2: sys/hr segments grow from Y=0 (stack on top of profit) */
.problem.is-active .bar-chart .seg--profit{
  animation: barProfitFill 1.1s cubic-bezier(.4,0,.2,1) calc(1s + var(--bar-delay,0s)) forwards;
}
.problem.is-active .bar-chart .seg--sys{
  animation: barSysGrow 1.4s cubic-bezier(.4,0,.2,1) 3.2s forwards;
}
.problem.is-active .bar-chart .seg--hr{
  animation: barHrGrow 1.4s cubic-bezier(.4,0,.2,1) 3.2s forwards;
}

/* === Donut arc clockwise drawing (gray → green → dark green) === */
.problem.is-active .donut-arc--gray{
  animation: donutDraw 1.0s cubic-bezier(.4,0,.2,1) 1.1s forwards;
}
.problem.is-active .donut-arc--green{
  animation: donutDraw 0.9s cubic-bezier(.4,0,.2,1) 2.1s forwards;
}
.problem.is-active .donut-arc--dark{
  animation: donutDraw 0.5s cubic-bezier(.4,0,.2,1) 3.0s forwards;
}
@keyframes donutDraw{
  to { stroke-dashoffset: 0; }
}
@keyframes barProfitFill{
  from { height: 0; }
  to   { height: var(--profit); }
}
@keyframes barSysGrow{
  from { height: 0; }
  to   { height: var(--sys); }
}
@keyframes barHrGrow{
  from { height: 0; }
  to   { height: var(--hr); }
}

/* Stagger: left-to-right sweep on phase 1 */
.bar-chart .bar:nth-child(1){ --bar-delay: 0s; }
.bar-chart .bar:nth-child(2){ --bar-delay: 0.28s; }
.bar-chart .bar:nth-child(3){ --bar-delay: 0.56s; }
.bar-chart .bar:nth-child(4){ --bar-delay: 0.84s; }

@media (prefers-reduced-motion: reduce){
  .problem-card{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .problem.is-active .bar-chart .seg--profit,
  .problem.is-active .bar-chart .seg--sys,
  .problem.is-active .bar-chart .seg--hr,
  .problem.is-active .donut-arc{
    animation: none !important;
  }
  .bar-chart .seg--sys{ height: var(--sys); }
  .bar-chart .seg--hr{ height: var(--hr); }
  .bar-chart .seg--profit{ height: var(--profit); }
  .donut-arc{ stroke-dashoffset: 0; }
}
.bar-chart__caption{
  position:absolute;
  left:168px;
  top:255px;
  width:96px;
  margin:0;
  font-size:16px;
  font-weight:300;
  line-height:1.8;
  color:#000;
  text-align:center;
}

/* ===== Donut chart ===== */
.donut-chart{
  margin:0;
  width:432px;
  height:294px;
  position:relative;
}
.donut-chart__row{
  display:flex;
  align-items:flex-start;
  position:relative;
  width:432px;
  height:269.918px;
}
.donut-chart__plot{
  position:absolute;
  left:8.09px;
  top:-20px;
  width:269.918px;
  height:269.918px;
}
.donut-chart__svg{
  width:269.918px;
  height:269.918px;
  display:block;
}
.donut-arc{
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
}
.donut-chart__center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.donut-chart__pct{
  margin:0;
  font-size:0;
  font-weight:500;
  color: var(--tokium-text);
  line-height:1;
  text-align:center;
}
.donut-chart__pct .num{
  font-size:45px;
  line-height:1.8;
}
.donut-chart__pct .unit{
  font-size:32px;
  line-height:1.8;
}
.donut-chart__label{
  margin:0;
  margin-top:-10px;
  font-size:20px;
  font-weight:500;
  line-height:1.3;
  color: var(--tokium-text);
  text-align:center;
}
.donut-chart .legend--donut{
  position:absolute;
  left:286px;
  top:72px;
}
.donut-chart__source{
  position:absolute;
  left:3.01px;
  top:255px;
  width:428px;
  margin:0;
  font-size:12px;
  font-weight:300;
  line-height:1.8;
  color:#000;
  text-align:center;
  text-decoration:underline;
}
.donut-chart__source:hover{ color: var(--tokium-green); }

/* ==========================================================
   PURPOSE (Figma 1440×797) — 第3セクション
   ========================================================== */
.purpose{
  height:797px;
  margin-top:72px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  background:#fff;
}
.purpose__inner{
  position:relative;
  width:1440px;
  height:797px;
  flex-shrink:0;
}
.purpose__bg{
  position:absolute;
  /* inner(1440px)の左端基準で 933px の Figma座標。inner中央基準で配置 */
  left: calc(50% - 720px + 933px);
  top:225px;
  width:1122.78px;
  height:550px;
  background-image: url("assets/hero/dots.svg");
  background-size: 1122.78px 550px;
  background-repeat: no-repeat;
  pointer-events:none;
  z-index:0;
}
.purpose__header{
  position:absolute;
  left:220px;
  top:37px;
  z-index:2;
}
.purpose__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  color: var(--tokium-text);
  white-space:nowrap;
}
.purpose__lead{
  margin:0;
  margin-top:17px;
  font-size:18px;
  font-weight:400;
  line-height:1.6;
  color:#000;
  width:1004px;
}
.purpose__hline{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  width:1000px;
  height:1px;
  margin:0;
  border:0;
  background: var(--tokium-line);
  z-index:1;
}
.purpose__hline--top{ top:148px; }
.purpose__hline--bottom{ top:742px; }
.purpose__cards{
  position:absolute;
  left:220px;
  top:181px;
  width:1000px;
  display:flex;
  align-items:flex-start;
  z-index:2;
}
.purpose-card{
  width:432px;
  display:flex;
  flex-direction:column;
  gap:20px;
  opacity:0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.purpose.is-active .purpose-card:nth-of-type(1){
  opacity:1;
  transform:none;
  transition-delay: 0.05s;
}
.purpose.is-active .purpose-card:nth-of-type(2){
  opacity:1;
  transform:none;
  transition-delay: 0.45s;
}
.purpose__vline{
  flex:1;
  align-self:stretch;
  position:relative;
  min-height:509.5px;
}
.purpose__vline::before{
  content:"";
  position:absolute;
  left:50%;
  top:9px;
  width:1px;
  height:509.5px;
  background: var(--tokium-line);
  transform: translateX(-50%);
}
.purpose-card__title{
  margin:0;
  font-size:26px;
  font-weight:500;
  line-height:1.5;
  color:#0a5257;
}
.purpose-card__body{
  margin:0;
  font-size:16px;
  font-weight:300;
  line-height:1.8;
  color:#000;
}

/* === Cost graphic (左カード) === */
.legend__mark--bpo{ background:#757272; }
.cost-graphic{
  margin:0;
  position:relative;
  width:431px;
  height:294px;
}
.cost-graphic__legend{
  position:absolute;
  left:0;
  top:13px;
  width:431px;
  margin:0;
  text-align:center;
  font-size:14px;
  font-weight:300;
  line-height:1.8;
  color:#000;
}
.cost-bar{
  position:absolute;
  bottom:37px;
  width:77px;
  display:flex;
  flex-direction:column;
}
.cost-bar--legacy{ left:90px; }
.cost-bar--ax{ left:265px; }
.cost-bar__seg{
  display:block;
  width:100%;
  height:0;
}
.cost-bar__seg--sys{ background:#a3a1a1; }
.cost-bar__seg--bpo{ background:#757272; }
.cost-graphic__axis{
  position:absolute;
  left:72px;
  bottom:36px;
  width:284.5px;
  height:1px;
  background:#222229;
}
.cost-graphic__axis::after{
  content:"";
  position:absolute;
  right:-7px;
  bottom:-2.5px;
  width:0;
  height:0;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  border-left:7px solid #222229;
}
.cost-arrow{
  position:absolute;
  left:216px;
  top:76px;
  width:175px;
  height:86px;
}
.cost-arrow__shape{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.cost-arrow__text{
  position:absolute;
  top:8px;
  left:35.68px;
  width:104px;
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  color:#fff;
  text-align:center;
}
.cost-graphic__label{
  position:absolute;
  top:261px;
  margin:0;
  width:96px;
  font-size:16px;
  font-weight:300;
  line-height:1.8;
  color:#000;
  text-align:center;
}
.cost-graphic__label--left{ left:81px; }
.cost-graphic__label--right{ left:255.68px; }

/* === Cost graphic delta (削減量を表す斜めスロープ) === */
.cost-delta{
  position:absolute;
  left:167px;        /* legacy bar 右端 */
  top:63px;          /* legacy bar 上端 */
  width:98px;        /* ax bar 左端 - legacy bar 右端 (265 - 167) */
  height:194px;      /* baseline - legacy bar 上端 (257 - 63) */
  pointer-events:none;
  z-index:0;
  display:block;
}

/* === Labor graphic (右カード) === */
.labor-graphic{
  margin:0;
  position:relative;
  width:431px;
  height:294px;
}
.labor-graphic__heading{
  position:absolute;
  width:209.62px;
  margin:0;
  font-size:16px;
  font-weight:500;
  line-height:1.4;
  color: var(--tokium-text);
  text-align:center;
}
.labor-graphic__heading--left{ left:4px; top:27px; }
.labor-graphic__heading--right{ left:216.56px; top:26px; }
.labor-graphic__person{
  position:absolute;
  left:90px;
  top:125px;
  width:37px;
  height:58px;
}
.labor-graphic__divider{
  position:absolute;
  left:213.62px;
  top:34px;
  width:1px;
  height:226px;
  background: var(--tokium-line);
}
.labor-graphic__tags{
  position:absolute;
  inset:0;
  list-style:none;
  margin:0;
  padding:0;
}
.tag{
  position:absolute;
  width:51px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#008d97;
  color:#fff;
  font-size:10px;
  font-weight:500;
  line-height:1.4;
  text-align:center;
}
.tag:nth-child(1){ left:243px; top:105px; }
.tag:nth-child(2){ left:297px; top:105px; }
.tag:nth-child(3){ left:352px; top:105px; }
.tag:nth-child(4){ left:243px; top:142px; }
.tag:nth-child(5){ left:297px; top:142px; }
.tag:nth-child(6){ left:352px; top:142px; }
.tag:nth-child(7){ left:243px; top:180px; }
.tag:nth-child(8){ left:297px; top:180px; }
.tag:nth-child(9){ left:352px; top:180px; }
.labor-graphic__caption{
  position:absolute;
  top:261px;
  margin:0;
  width:96px;
  font-size:16px;
  font-weight:300;
  line-height:1.8;
  color:#000;
  text-align:center;
}
.labor-graphic__caption--left{ left:60.81px; }
.labor-graphic__caption--right{ left:273.37px; }

/* === Cost graphic animations === */
.purpose.is-active .cost-bar--legacy .cost-bar__seg--sys{
  animation: costGrowSys 0.8s cubic-bezier(.4,0,.2,1) 0.7s forwards;
}
.purpose.is-active .cost-bar--legacy .cost-bar__seg--bpo{
  animation: costGrowBpo 0.8s cubic-bezier(.4,0,.2,1) 0.7s forwards;
}
.purpose.is-active .cost-bar--ax .cost-bar__seg--sys{
  animation: costGrowSys 0.7s cubic-bezier(.4,0,.2,1) 1.95s forwards;
}
.purpose.is-active .cost-bar--ax .cost-bar__seg--bpo{
  animation: costGrowBpo 0.7s cubic-bezier(.4,0,.2,1) 1.95s forwards;
}
@keyframes costGrowSys{ to { height: var(--sys); } }
@keyframes costGrowBpo{ to { height: var(--bpo); } }

.cost-arrow{
  opacity:0;
  transform: translate(-12px, -8px) scale(0.85);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.purpose.is-active .cost-arrow{
  transition-delay: 1.6s;
  opacity:1;
  transform: none;
}

.cost-delta{
  opacity:0;
  transition: opacity .6s cubic-bezier(.2,.8,.2,1);
}
.purpose.is-active .cost-delta{
  transition-delay: 2.7s;
  opacity:1;
}

/* === Labor graphic animations === */
.labor-graphic__person{
  opacity:0;
  transform: scale(0.7);
  transform-origin: center bottom;
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.purpose.is-active .labor-graphic__person{
  transition-delay: 1.0s;
  opacity:1;
  transform:none;
}
.tag{
  opacity:0;
  transform: scale(0.6);
  transition: opacity .4s cubic-bezier(.2,.8,.2,1), transform .4s cubic-bezier(.2,.8,.2,1);
}
.purpose.is-active .tag{
  opacity:1;
  transform:none;
}
.purpose.is-active .tag:nth-child(1){ transition-delay: 1.30s; }
.purpose.is-active .tag:nth-child(2){ transition-delay: 1.36s; }
.purpose.is-active .tag:nth-child(3){ transition-delay: 1.42s; }
.purpose.is-active .tag:nth-child(4){ transition-delay: 1.48s; }
.purpose.is-active .tag:nth-child(5){ transition-delay: 1.54s; }
.purpose.is-active .tag:nth-child(6){ transition-delay: 1.60s; }
.purpose.is-active .tag:nth-child(7){ transition-delay: 1.66s; }
.purpose.is-active .tag:nth-child(8){ transition-delay: 1.72s; }
.purpose.is-active .tag:nth-child(9){ transition-delay: 1.78s; }

@media (prefers-reduced-motion: reduce){
  .purpose-card,
  .cost-arrow,
  .cost-delta,
  .labor-graphic__person,
  .tag{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .purpose.is-active .cost-bar__seg--sys,
  .purpose.is-active .cost-bar__seg--bpo{
    animation:none !important;
  }
  .cost-bar__seg--sys{ height: var(--sys); }
  .cost-bar__seg--bpo{ height: var(--bpo); }
}

/* ==========================================================
   HERO 入場アニメーション
   ========================================================== */
@keyframes heroBgReveal{
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes heroTitleSlide{
  from { opacity:0; transform: translateX(80px); }
  to   { opacity:1; transform: translateX(0); }
}
@keyframes heroLineDraw{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes heroLineStreak{
  0%   { opacity:0; transform: translateX(-320px); }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { opacity:0; transform: translateX(100vw); }
}
@keyframes heroFadeUp{
  from { opacity:0; transform: translateY(12px); }
  to   { opacity:1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .hero__bg,
  .hero__chip,
  .hero__visual,
  .hero__title > span,
  .hero__lead,
  .hero__ctas,
  .hero__line,
  .hero__line::before{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ==========================================================
   PC/TABLET (769px以上) — 1440px基準を viewport に合わせて等比スケール
   - 1440px未満: 縮小
   - 1440px超: 拡大（ワイドモニターでフルスクリーン化）
   ========================================================== */
@media (min-width: 769px){
  body{
    zoom: calc(100vw / 1440px);
  }
}

/* ==========================================================
   SP (≤768px) — 後段で実装。一旦最低限の崩れ防止のみ。
   ========================================================== */
@media (max-width: 768px){
  /* SP実装は別途。横スクロール抑制のためminを解除 */
  .site-header,
  .hero{ min-width:0; }
}

/* ==========================================================
   AGENT (4th section: 左が右になる)
   ========================================================== */
.agent{
  margin-top:80px;
  height:587px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
  background:#fff;
}
.agent__inner{
  position:relative;
  width:1440px;
  height:587px;
  flex-shrink:0;
}
.agent__header{
  position:absolute;
  left:220px;
  top:37px;
  z-index:2;
}
.agent__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  color: var(--tokium-text);
  white-space:nowrap;
}
.agent__lead{
  margin:0;
  margin-top:17px;
  font-size:18px;
  font-weight:400;
  line-height:1.6;
  color:#000;
  width:1004px;
}
.agent__col-label{
  position:absolute;
  top:144px;
  margin:0;
  font-size:16px;
  font-weight:500;
  line-height:1.2;
  z-index:2;
}
.agent__col-label--left{
  left:342px;
  width:200px;
  text-align:left;
  color:#5e5b5b;
}
.agent__col-label--right{
  left:782px;
  width:236px;
  color: var(--tokium-green);
}
.agent__rows{
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  inset:0;
}
.agent-row{
  position:absolute;
  left:0;
  width:100%;
  height:55px;
}
.agent-row:nth-child(1){ top:181px; }
.agent-row:nth-child(2){ top:254px; }
.agent-row:nth-child(3){ top:327px; }
.agent-row:nth-child(4){ top:400px; }
.agent-row:nth-child(5){ top:473px; }
.agent-row__bar{
  position:absolute;
  height:55px;
  display:flex;
  align-items:center;
  z-index:1;
}
.agent-row__bar--legacy{
  left:290px;
  width:440px;
  background: linear-gradient(to right, #8c8989 0%, #8c8989 60%, #fff 100%);
  justify-content:flex-start;
  padding-left:52px;
}
.agent-row__bar--ax{
  left:730px;
  width:439px;
  background: linear-gradient(to right, #008d97 0%, #008d97 60%, #fff 100%);
  justify-content:flex-start;
  padding-left:52px;
}
.agent-row__text{
  color:#fff;
  font-size:18px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}
.agent-row__arrow{
  position:absolute;
  left:699.5px;
  top:50%;
  transform: translateY(-50%);
  width:61px;
  height:12px;
  z-index:2;
}
.agent-row__arrow path{
  stroke:#00ccc9;
}
/* SP専用ブロック (PCでは非表示) */
.agent__sp{ display:none; }
.scope-table-sp{ display:none; }

/* === AGENT entrance animations === */
.agent__title,
.agent__lead,
.agent__col-label{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.agent.is-active .agent__title{ transition-delay:0.05s; opacity:1; transform:none; }
.agent.is-active .agent__lead{ transition-delay:0.20s; opacity:1; transform:none; }
.agent.is-active .agent__col-label--left{ transition-delay:0.45s; opacity:1; transform:none; }
.agent.is-active .agent__col-label--right{ transition-delay:0.55s; opacity:1; transform:none; }

/* Each row: legacy → arrow → ax slide-in (左が右になる) */
.agent-row__bar--legacy{
  opacity:0;
  transform: translateX(-30px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
.agent-row__bar--ax{
  opacity:0;
  transform: translateX(-30px);
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1);
}
.agent-row__arrow .agent-row__arrow-line{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition: stroke-dashoffset .5s cubic-bezier(.4,0,.2,1);
}
.agent-row__arrow .agent-row__arrow-head{
  opacity:0;
  transition: opacity .25s ease-out;
}
.agent.is-active .agent-row__bar--legacy{ opacity:1; transform:none; }
.agent.is-active .agent-row__arrow .agent-row__arrow-line{ stroke-dashoffset:0; }
.agent.is-active .agent-row__arrow .agent-row__arrow-head{ opacity:1; }
.agent.is-active .agent-row__bar--ax{ opacity:1; transform:none; }

/* Stagger per row: legacy → arrow line → arrow head → ax */
.agent.is-active .agent-row:nth-child(1) .agent-row__bar--legacy{ transition-delay:0.65s; }
.agent.is-active .agent-row:nth-child(1) .agent-row__arrow-line{ transition-delay:1.00s; }
.agent.is-active .agent-row:nth-child(1) .agent-row__arrow-head{ transition-delay:1.45s; }
.agent.is-active .agent-row:nth-child(1) .agent-row__bar--ax{ transition-delay:1.55s; }

.agent.is-active .agent-row:nth-child(2) .agent-row__bar--legacy{ transition-delay:0.85s; }
.agent.is-active .agent-row:nth-child(2) .agent-row__arrow-line{ transition-delay:1.20s; }
.agent.is-active .agent-row:nth-child(2) .agent-row__arrow-head{ transition-delay:1.65s; }
.agent.is-active .agent-row:nth-child(2) .agent-row__bar--ax{ transition-delay:1.75s; }

.agent.is-active .agent-row:nth-child(3) .agent-row__bar--legacy{ transition-delay:1.05s; }
.agent.is-active .agent-row:nth-child(3) .agent-row__arrow-line{ transition-delay:1.40s; }
.agent.is-active .agent-row:nth-child(3) .agent-row__arrow-head{ transition-delay:1.85s; }
.agent.is-active .agent-row:nth-child(3) .agent-row__bar--ax{ transition-delay:1.95s; }

.agent.is-active .agent-row:nth-child(4) .agent-row__bar--legacy{ transition-delay:1.25s; }
.agent.is-active .agent-row:nth-child(4) .agent-row__arrow-line{ transition-delay:1.60s; }
.agent.is-active .agent-row:nth-child(4) .agent-row__arrow-head{ transition-delay:2.05s; }
.agent.is-active .agent-row:nth-child(4) .agent-row__bar--ax{ transition-delay:2.15s; }

.agent.is-active .agent-row:nth-child(5) .agent-row__bar--legacy{ transition-delay:1.45s; }
.agent.is-active .agent-row:nth-child(5) .agent-row__arrow-line{ transition-delay:1.80s; }
.agent.is-active .agent-row:nth-child(5) .agent-row__arrow-head{ transition-delay:2.25s; }
.agent.is-active .agent-row:nth-child(5) .agent-row__bar--ax{ transition-delay:2.35s; }

@media (prefers-reduced-motion: reduce){
  .agent__title,
  .agent__lead,
  .agent__col-label,
  .agent-row__bar--legacy,
  .agent-row__bar--ax{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .agent-row__arrow .agent-row__arrow-line{ stroke-dashoffset:0 !important; }
  .agent-row__arrow .agent-row__arrow-head{ opacity:1 !important; }
}

/* =====================================================
   SOLUTION (Figma: 13205:12004 / 1440×814)
   ===================================================== */
.solution{
  margin-top:40px;
  height:786px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:#f6f6f6;
  overflow:hidden;
}
.solution__inner{
  position:relative;
  width:1440px;
  height:786px;
  flex-shrink:0;
}
.solution__header{
  position:absolute;
  left:220px;
  top:82px;
  z-index:2;
}
.solution__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  color:#222229;
}
.solution__lead{
  margin:12px 0 0;
  font-size:18px;
  line-height:1.6;
  color:#222229;
  max-width:1004px;
}

/* --- Scope table --- */
.scope{
  position:absolute;
  left:220px;
  top:185px;
  width:1000px;
}
.scope__label{
  margin:0 0 17.5px;
  font-size:16px;
  font-weight:500;
  line-height:1.2;
  color:#222229;
}
.scope-table{
  width:1000px;
  background:#fff;
}
.scope-table__head,
.scope-table__row{
  display:grid;
  grid-template-columns: 365px 1fr 1fr 1fr;
}
.scope-table__row--span{
  grid-template-columns: 365px 1fr;
}
.scope-table__head{
  height:55px;
  background:#5e5b5b;
  color:#fff;
  font-size:16px;
  font-weight:600;
}
.scope-table__row{
  height:82px;
  background:#fff;
  border-top:1px solid #e6e6e6;
}
.scope-table__row:first-of-type{ border-top:none; }
.scope-cell{
  display:flex;
  align-items:center;
  justify-content:center;
}
.scope-cell--label{
  justify-content:flex-end;
  padding-right:137px;
  font-weight:600;
}
.scope-cell--logo img{
  width:144px;
  height:40px;
  object-fit:contain;
}
.scope-cell--span{
  justify-content:flex-start;
  padding-left:44px;
  font-size:18px;
  font-weight:400;
  color:#222229;
}
.scope-layer{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  padding-left:52px;
}
.scope-badge{
  background:#edf7f8;
  border:1px solid #70cdc7;
  color:#0a5257;
  padding:8px 12px;
  border-radius:4px;
  font-size:14px;
  font-weight:500;
  line-height:1.2;
  white-space:nowrap;
}
.scope-layer__name{
  font-size:18px;
  font-weight:400;
  color:#222229;
  white-space:nowrap;
}
.scope-layer__chevron{
  position:absolute;
  right:0;
  top:50%;
  transform: translateY(-50%);
  width:11px;
  height:51px;
}

/* --- Solution cards --- */
.solution-cards{
  position:absolute;
  left:220px;
  top:501px;
  display:flex;
  align-items:flex-start;
  gap:31px;
  width:1000px;
}
.solution-card{
  width:292px;
  display:flex;
  flex-direction:column;
  gap:20px;
  flex-shrink:0;
}
.solution-card__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  width:100%;
}
.solution-card__title{
  margin:0;
  font-size:20px;
  font-weight:500;
  line-height:1.4;
  color:#222229;
}
.solution-card__icon{
  width:56px;
  height:56px;
  object-fit:contain;
  flex-shrink:0;
}
.solution-card__body{
  margin:0;
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  color:#000;
}
.solution-cards__divider{
  width:1px;
  height:176px;
  background:#d9d9d9;
  flex-shrink:0;
  align-self:center;
}

/* --- SOLUTION entrance animations --- */
.solution__title,
.solution__lead,
.scope__label,
.scope-table,
.solution-card{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.solution.is-active .solution__title{ transition-delay:0.05s; opacity:1; transform:none; }
.solution.is-active .solution__lead{ transition-delay:0.20s; opacity:1; transform:none; }
.solution.is-active .scope__label{ transition-delay:0.35s; opacity:1; transform:none; }
.solution.is-active .scope-table{ transition-delay:0.50s; opacity:1; transform:none; }
.solution.is-active .solution-card:nth-child(1){ transition-delay:0.75s; opacity:1; transform:none; }
.solution.is-active .solution-card:nth-child(3){ transition-delay:0.90s; opacity:1; transform:none; }
.solution.is-active .solution-card:nth-child(5){ transition-delay:1.05s; opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .solution__title,
  .solution__lead,
  .scope__label,
  .scope-table,
  .solution-card{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =====================================================
   CASES (Figma: 13206:14072 / 1440×971)
   ===================================================== */
.cases{
  position:relative;
  margin-top:60px;
  height:971px;
  background:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
}
.cases__inner{
  position:relative;
  width:1440px;
  height:971px;
  flex-shrink:0;
}
.cases__bg{
  position:absolute;
  left:-200px;
  top:60px;
  width:900px;
  height:550px;
  background-image: radial-gradient(circle, #c8c8c8 1px, transparent 1.5px);
  background-size: 14px 14px;
  opacity:0.4;
  pointer-events:none;
  z-index:0;
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 70%);
          mask-image: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 70%);
}
.cases__header{
  position:absolute;
  left:220px;
  top:37px;
  z-index:2;
}
.cases__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  color:#222229;
}
.cases__lead{
  margin:12px 0 0;
  font-size:18px;
  line-height:1.6;
  color:#000;
  max-width:1004px;
}
.cases__list{
  position:absolute;
  left:220px;
  top:138px;
  width:1004px;
  display:flex;
  flex-direction:column;
  gap:34px;
  z-index:1;
}

/* --- Case card --- */
.case-card{
  display:flex;
  align-items:stretch;
  width:1004px;
  height:235px;
}
.case-card__tag{
  width:185px;
  flex-shrink:0;
  background:#008d97;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:0 20px;
  box-sizing:border-box;
}
.case-card__company{
  margin:0;
  font-size:20px;
  font-weight:500;
  line-height:1.4;
  white-space:nowrap;
}
.case-card__divider{
  display:block;
  width:52px;
  height:1px;
  background:#fff;
  opacity:0.6;
}
.case-card__industry{
  margin:0;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  text-align:center;
  white-space:nowrap;
}
.case-card__body{
  flex:1;
  background:#f6f6f6;
  padding:32px 36px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.case-card__title{
  margin:0;
  font-size:22px;
  font-weight:500;
  line-height:1.4;
  color:#0a5257;
  white-space:nowrap;
}
.case-card__desc{
  margin:0;
  font-size:16px;
  font-weight:300;
  line-height:1.7;
  color:#000;
}
.case-card__result{
  margin:0;
  display:flex;
  align-items:center;
  gap:14px;
  font-size:18px;
  font-weight:600;
  line-height:1.4;
  color:#222229;
}
.case-card__check{
  width:38px;
  height:38px;
  flex-shrink:0;
}

/* --- CASES entrance animations --- */
.cases__title,
.cases__lead,
.case-card{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.cases.is-active .cases__title{ transition-delay:0.05s; opacity:1; transform:none; }
.cases.is-active .cases__lead{ transition-delay:0.20s; opacity:1; transform:none; }
.cases.is-active .case-card:nth-child(1){ transition-delay:0.40s; opacity:1; transform:none; }
.cases.is-active .case-card:nth-child(2){ transition-delay:0.55s; opacity:1; transform:none; }
.cases.is-active .case-card:nth-child(3){ transition-delay:0.70s; opacity:1; transform:none; }

/* Check icon micro-animation: ring traces clockwise, then tick is drawn */
.case-card__check-ring{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transform: rotate(-90deg);
  transform-origin: 19px 19px;
  transition: stroke-dashoffset .75s cubic-bezier(.5,0,.2,1);
}
.case-card__check-tick{
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition: stroke-dashoffset .35s cubic-bezier(.4,0,.2,1);
}
.cases.is-active .case-card__check-ring{ stroke-dashoffset:0; }
.cases.is-active .case-card__check-tick{ stroke-dashoffset:0; }

.cases.is-active .case-card:nth-child(1) .case-card__check-ring{ transition-delay:0.70s; }
.cases.is-active .case-card:nth-child(1) .case-card__check-tick{ transition-delay:1.45s; }
.cases.is-active .case-card:nth-child(2) .case-card__check-ring{ transition-delay:0.85s; }
.cases.is-active .case-card:nth-child(2) .case-card__check-tick{ transition-delay:1.60s; }
.cases.is-active .case-card:nth-child(3) .case-card__check-ring{ transition-delay:1.00s; }
.cases.is-active .case-card:nth-child(3) .case-card__check-tick{ transition-delay:1.75s; }

@media (prefers-reduced-motion: reduce){
  .cases__title,
  .cases__lead,
  .case-card{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .case-card__check-ring,
  .case-card__check-tick{
    stroke-dashoffset:0 !important;
    transition:none !important;
  }
}

/* =====================================================
   SPEAKERS (Figma: 13207:14264 / 1440×629)
   ===================================================== */
.speakers{
  margin-top:40px;
  height:600px;
  background:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
}
.speakers__inner{
  position:relative;
  width:1440px;
  height:600px;
  flex-shrink:0;
}
.speakers__header{
  position:absolute;
  left:220px;
  top:37px;
  z-index:2;
}
.speakers__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  color:#222229;
}
.speakers__lead{
  margin:12px 0 0;
  font-size:18px;
  font-weight:400;
  line-height:1.6;
  color:#000;
}
.speakers__list{
  position:absolute;
  left:219px;
  top:153px;
  width:1002px;
  display:flex;
  gap:25px;
  z-index:1;
}

/* --- Speaker card --- */
.speaker-card{
  width:317px;
  flex-shrink:0;
}
.speaker-card__visual{
  position:relative;
  width:317px;
  height:239px;
  overflow:hidden;
  background:#edf7f8;
}
.speaker-card__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}
.speaker-card__caption{
  position:absolute;
  left:30px;
  bottom:78px;
  z-index:2;
}
.speaker-card__role{
  margin:0;
  font-size:12px;
  font-weight:400;
  line-height:1.4;
  color:#222229;
}
.speaker-card__name{
  margin:8px 0 0;
  font-size:18px;
  font-weight:500;
  line-height:1.4;
  color:#222229;
}
.speaker-card__bio{
  background:#f6f6f6;
  width:317px;
  height:150px;
  padding:14px 22px;
  box-sizing:border-box;
}
.speaker-card__bio p{
  margin:0;
  font-size:13.5px;
  font-weight:300;
  line-height:1.7;
  color:#000;
  text-align:justify;
}

/* --- SPEAKERS entrance animations --- */
.speakers__title,
.speakers__lead,
.speaker-card{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.speakers.is-active .speakers__title{ transition-delay:0.05s; opacity:1; transform:none; }
.speakers.is-active .speakers__lead{ transition-delay:0.20s; opacity:1; transform:none; }
.speakers.is-active .speaker-card:nth-child(1){ transition-delay:0.40s; opacity:1; transform:none; }
.speakers.is-active .speaker-card:nth-child(2){ transition-delay:0.55s; opacity:1; transform:none; }
.speakers.is-active .speaker-card:nth-child(3){ transition-delay:0.70s; opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .speakers__title,
  .speakers__lead,
  .speaker-card{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =====================================================
   STEPS (Figma: 13212:27574 / 1440×419)
   ===================================================== */
.steps{
  margin-top:40px;
  height:419px;
  background:#fff;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
}
.steps__inner{
  position:relative;
  width:1440px;
  height:419px;
  flex-shrink:0;
}
.steps__header{
  position:absolute;
  left:220px;
  top:37px;
  z-index:2;
}
.steps__title{
  margin:0;
  font-size:28px;
  font-weight:700;
  line-height:1.2;
  color:#000;
}
.steps__lead{
  margin:12px 0 0;
  font-size:18px;
  font-weight:400;
  line-height:1.6;
  color:#000;
}
.steps__track{
  position:absolute;
  left:0;
  top:147px;
  width:1440px;
  height:200px;
}
.steps__line{
  position:absolute;
  left:220px;
  top:16.5px;       /* 円中央(=20)に対し −3.5でラインが円の中央を通過 */
  width:1000px;
  height:8px;
  pointer-events:none;
  z-index:0;
}
/* SP用 縦線 SVG（line.svg をインライン埋め込み） — PC では非表示 */
.steps__line-sp{ display:none; }
.steps__list{
  position:absolute;
  inset:0;
  list-style:none;
  margin:0;
  padding:0;
  z-index:1;
}
.step{
  position:absolute;
  top:0;
  width:210px;
  text-align:center;
}
.step:nth-child(1){ left:219px; }
.step:nth-child(2){ left:485px; }
.step:nth-child(3){ left:751px; }
.step:nth-child(4){ left:1017px; }
.step__num{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#008d97;
  color:#fff;
  font-size:18px;
  font-weight:600;
  line-height:1;
  margin:0 auto;
  position:relative;
  z-index:1;
}
.step__period{
  margin:21px 0 7px;
  font-size:16px;
  font-weight:500;
  line-height:1.7;
  color:#0a5257;
}
.step__title{
  margin:0 0 9px;
  font-size:20px;
  font-weight:500;
  line-height:1.7;
  color:#000;
}
.step__desc{
  margin:0;
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  color:#000;
  text-align:left;
}

/* --- STEPS entrance animations --- */
.steps__title,
.steps__lead,
.step{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.steps__line line,
.steps__line polyline{
  stroke-dasharray:1100;
  stroke-dashoffset:1100;
  transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1);
}

.steps.is-active .steps__title{ transition-delay:0.05s; opacity:1; transform:none; }
.steps.is-active .steps__lead{ transition-delay:0.18s; opacity:1; transform:none; }
.steps.is-active .steps__line line,
.steps.is-active .steps__line polyline{ transition-delay:0.30s; stroke-dashoffset:0; }
.steps.is-active .step:nth-child(1){ transition-delay:0.45s; opacity:1; transform:none; }
.steps.is-active .step:nth-child(2){ transition-delay:0.65s; opacity:1; transform:none; }
.steps.is-active .step:nth-child(3){ transition-delay:0.85s; opacity:1; transform:none; }
.steps.is-active .step:nth-child(4){ transition-delay:1.05s; opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .steps__title,
  .steps__lead,
  .step{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .steps__line line,
  .steps__line polyline{
    stroke-dashoffset:0 !important;
    transition:none !important;
  }
}

/* =====================================================
   CTA BAND (Figma: 13212:27604 / 1440×283)
   ===================================================== */
.cta-band{
  margin-top:40px;
  height:391px;
  background: linear-gradient(135deg, #00CCC9 0%, #008D97 100%);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:hidden;
}
.cta-band__inner{
  position:relative;
  width:1440px;
  height:391px;
  flex-shrink:0;
}
.cta-band__header{
  position:absolute;
  left:0;
  right:0;
  top:98px;
  text-align:center;
  color:#fff;
}
.cta-band__title{
  margin:0;
  font-size:28px;
  font-weight:700;
  line-height:1.2;
}
.cta-band__lead{
  margin:12px 0 0;
  font-size:18px;
  font-weight:400;
  line-height:1.6;
}
.cta-band__actions{
  position:absolute;
  left:0;
  right:0;
  top:236px;       /* 296 → 236 (ボタン1つ分上に戻す) */
  display:flex;
  justify-content:center;
  gap:40px;
}
.cta-band-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  width:253px;
  padding:17.78px 24.9px 21.34px;
  background: var(--tokium-orange);
  color:#fff;
  font-size:17px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
}
.cta-band-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:#ea7825;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}
.cta-band-btn:hover::before{
  transform: scaleX(1);
}
.cta-band-btn__arrow{
  position:absolute;
  right:19px;     /* 22 → 19 (3px右へ) */
  top:50%;
  transform: translateY(-50%);
  width:27px;     /* 31 → 27 (4px短縮) */
  height:3px;
  flex-shrink:0;
  color:#fff;
  transition: transform .25s ease, color .35s ease;
}
.cta-band-btn:hover .cta-band-btn__arrow{
  transform: translate(4px, -50%);
  color:#fff;
}

/* CTA entrance */
.cta-band__title,
.cta-band__lead,
.cta-band-btn{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1), background .2s ease;
}
.cta-band.is-active .cta-band__title{ transition-delay:0.05s; opacity:1; transform:none; }
.cta-band.is-active .cta-band__lead{ transition-delay:0.20s; opacity:1; transform:none; }
.cta-band.is-active .cta-band-btn:nth-child(1){ transition-delay:0.40s; opacity:1; transform:none; }
.cta-band.is-active .cta-band-btn:nth-child(2){ transition-delay:0.55s; opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .cta-band__title,
  .cta-band__lead,
  .cta-band-btn{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =====================================================
   FLOATING CTA (追従サイドボタン)
   ===================================================== */
.floating-cta{
  position:fixed;
  right:0;
  top:50%;
  transform: translate(100%, -50%);
  display:inline-flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:22px 14px;
  background: var(--tokium-orange);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  border-radius:6px 0 0 6px;
  box-shadow: -2px 4px 16px rgba(0,0,0,0.15);
  z-index:80;
  opacity:0;
  pointer-events:none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease, background .2s ease;
}
.floating-cta.is-visible{
  transform: translate(0, -50%);
  opacity:1;
  pointer-events:auto;
}
.floating-cta:hover{
  background:#ea7825;
}
.floating-cta__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  background:#fff;
  border-radius:50%;
  color: var(--tokium-orange);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.floating-cta:hover .floating-cta__icon{
  transform: translateY(6px);   /* hover: アイコンが下に下がる "ダウンロード" 演出 */
}
.floating-cta__icon svg{
  width:18px;
  height:18px;
}
.floating-cta__text{
  writing-mode: vertical-rl;
  font-size:17px;
  letter-spacing:0.12em;
  line-height:1.2;
}

/* =====================================================
   CONTACT FORM (参考: contact.keihi.com/tokium_dlform)
   ===================================================== */
.contact{
  padding:80px 20px 100px;
  background:#fff;
}
.contact__inner{
  max-width:760px;
  margin:0 auto;
}
.contact__header{
  text-align:center;
  margin-bottom:40px;
}
.contact__title{
  margin:0;
  font-size:28px;
  font-weight:700;
  line-height:1.3;
  color:#222229;
}
.contact__lead{
  margin:14px 0 0;
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  color:#222229;
}

.contact-form{
  background:#f6f6f6;
  padding:48px 56px;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.contact-field{
  display:flex;
  flex-direction:column;
}
.contact-field--row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
.contact-field--row > div{
  display:flex;
  flex-direction:column;
}
.contact-field label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:500;
  color:#222229;
  margin-bottom:8px;
  line-height:1.4;
}
.contact-required{
  display:inline-block;
  font-size:11px;
  font-weight:500;
  background:#df5252;
  color:#fff;
  padding:2px 8px;
  border-radius:3px;
  letter-spacing:0.04em;
}
.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"],
.contact-field select,
.contact-field textarea{
  width:100%;
  padding:12px 14px;
  font-size:15px;
  font-family:inherit;
  color:#222229;
  background:#fff;
  border:1px solid #d7d7da;
  border-radius:4px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing:border-box;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
  border-color:#008d97;
  box-shadow: 0 0 0 3px rgba(0,141,151,0.12);
}
.contact-field textarea{
  resize:vertical;
  min-height:120px;
  line-height:1.7;
}
.contact-field select{
  appearance:none;
  -webkit-appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23222229' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right:40px;
}

.contact-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.5;
  color:#222229;
  cursor:pointer;
  margin-top:6px;
}
.contact-consent input[type="checkbox"]{
  flex-shrink:0;
  width:18px;
  height:18px;
  margin:1px 0 0;
  accent-color:#008d97;
  cursor:pointer;
}
.contact-consent a{
  color:#008d97;
  text-decoration:underline;
}

.contact-submit{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  align-self:center;
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:280px;
  padding:18px 24px;
  background: var(--tokium-orange);
  color:#fff;
  font-size:17px;
  font-weight:700;
  line-height:1.2;
  border:none;
  border-radius:4px;
  cursor:pointer;
}
.contact-submit::before{
  content:"";
  position:absolute;
  inset:0;
  background:#ea7825;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}
.contact-submit:hover::before{
  transform: scaleX(1);
}
.contact__lead-link{
  display:inline-block;
  margin-top:6px;
  color: var(--tokium-green);
  text-decoration:underline;
  text-underline-offset:3px;
  transition: opacity .2s;
}
.contact__lead-link:hover{ opacity:.7; }
.contact-submit svg{
  position:absolute;
  right:22px;
  top:50%;
  transform: translateY(-50%);
  width:31px;
  height:3px;
  color:#fff;
  transition: transform .25s ease, color .35s ease;
}
.contact-submit:hover svg{
  transform: translate(4px, -50%);
  color:#fff;
}

/* CONTACT entrance */
.contact__title,
.contact__lead,
.contact-form{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.contact.is-active .contact__title{ transition-delay:0.05s; opacity:1; transform:none; }
.contact.is-active .contact__lead{ transition-delay:0.18s; opacity:1; transform:none; }
.contact.is-active .contact-form{ transition-delay:0.30s; opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .contact__title,
  .contact__lead,
  .contact-form{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* =====================================================
   FOOTER (流用: サービスサイト)
   ===================================================== */
.footer_renew .f_content_top{padding:50px 0;background:#F6F6F6}.footer_renew .f_content_top .f_subheading{margin-bottom:10px;font-weight:600;color:#008D97}.footer_renew .f_content_top .s_name{margin-bottom:10px;font-size:18px;font-weight:600}.footer_renew .f_content_top .s_name.mt{margin-top:40px}.footer_renew .f_content_top .s_name.link{text-decoration:underline}.footer_renew .f_content_top .s_content{margin-bottom:8px}.footer_renew .f_content_top .s_content .s_link{text-decoration:underline;font-size:14px}.footer_renew .f_content_top .s_content .s_link.sub{padding-left:16px;white-space:nowrap}.footer_renew .f_content_top .f_flex1{margin-bottom:50px;display:flex;justify-content:space-between}.footer_renew .f_content_top .f_flex1 .flex1_item{width:22.5%}.footer_renew .f_content_top .f_flex2{padding-bottom:30px;display:flex;justify-content:space-between;border-bottom:solid 2px #B2B7B8}.footer_renew .f_content_top .f_flex2 .flex2_item .s_name{color:#008D97}.footer_renew .f_content_top .f_flex3{padding-top:40px;display:flex}.footer_renew .f_content_top .f_flex3 .f_flex3_txt{margin-bottom:12px}.footer_renew .f_content_top .f_flex3 .f_flex3_left{margin-right:140px}.footer_renew .f_content_top .f_flex3 .f_flex3_left .company_info{margin-bottom:10px;font-size:14px}.footer_renew .f_content_top .f_flex3 .f_flex3_left .company_info .txt_b{font-weight:600}.footer_renew .f_content_bottom{padding:50px 0;background:#fff}.footer_renew .f_content_bottom .f_flex4{padding-bottom:20px;display:flex;justify-content:space-between;border-bottom:solid 2px #B2B7B8}.footer_renew .f_content_bottom .f_flex4 .f_logo:hover{transition:.3s;opacity:.7}.footer_renew .f_content_bottom .f_flex5{padding-top:30px;display:flex;justify-content:space-between}.footer_renew .f_content_bottom .f_flex5 .flex_link{font-size:12px;text-decoration:underline}.footer_renew .f_content_bottom .f_flex5 small{font-size:10px}.footer_renew .f_innar{max-width:1000px;margin:0 auto}.f_content_top_sp{display:none}.f_content_bottom_sp{display:none}@media screen and (max-width:1000px){.footer_renew .f_content_top{display:none}.footer_renew .f_content_bottom{display:none}.footer_renew .f_content_top_sp{padding:30px 0;display:block;background:#f6f6f6}.footer_renew .f_content_top_sp .footer_nav_sp{padding:0 24px 50px}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link{padding:20px 0;border-bottom:solid 1px #b2b7b8}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link.link_more_sp.open .menu_flex .vector_bottom{transition:.3s;transform:rotate(180deg)}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link.link_more_sp.open .hide_menu{max-height:200vh}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link .menu_flex{font-weight:600;color:#008D97;display:flex;justify-content:space-between;align-items:center}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link .menu_flex .vector_bottom{margin-right:6px;transition:.8s}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link .hide_menu{max-height:0;overflow:hidden;transition:max-height .3s}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link .hide_menu .service_name{margin:16px 0;font-weight:600}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link .hide_menu .menu_item{margin-bottom:10px}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link .hide_menu .menu_item .f_link{font-size:14px;text-decoration:underline}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link .hide_menu .menu_item.sub .f_link{margin-left:16px}.footer_renew .f_content_top_sp .footer_nav_sp .nav_link .hide_menu .menu_item.mt{margin-top:16px}.footer_renew .f_company{padding:0 24px;font-size:14px}.footer_renew .f_company .company_sub{margin-bottom:10px;font-size:16px}.footer_renew .f_company .company_info{line-height:1.8rem}.footer_renew .f_company .company_info .txt_b{display:block;font-weight:500}.footer_renew .f_company .company_info.last{margin-bottom:40px}.footer_renew .f_company .s_content{margin-bottom:10px}.footer_renew .f_company .s_content .s_link{text-decoration:underline}.footer_renew .f_content_bottom_sp{display:block;padding:50px 0}.footer_renew .f_content_bottom_sp .f_innar{padding:0 24px}.footer_renew .f_content_bottom_sp .f_images{padding-bottom:30px;border-bottom:solid 1px #b2b7b8}.footer_renew .f_content_bottom_sp .f_images .f_image_logo{max-width:210px;margin:0 auto 30px}.footer_renew .f_content_bottom_sp .f_images .f_image_logo img{width:100%;height:auto}.footer_renew .f_content_bottom_sp .f_images .f_image{max-width:320px;margin:0 auto}.footer_renew .f_content_bottom_sp .f_images .f_image img{width:100%;height:auto}.footer_renew .f_content_bottom_sp .f_link_box{max-width:210px;margin:0 auto;padding:40px 0}.footer_renew .f_content_bottom_sp .f_link_box .link_item{margin-bottom:8px}.footer_renew .f_content_bottom_sp .f_link_box .link_item .flex_link{font-size:12px;text-decoration:underline}.footer_renew .f_content_bottom_sp .f_link_box small{font-size:10px}}

/* ==========================================================
   TABLET / INTERMEDIATE (769px〜1439px)
   1440px基準のPC設計を viewport 幅に合わせて等比縮小
   ========================================================== */
@media (min-width: 769px) and (max-width: 1439px){
  body{
    zoom: calc(100vw / 1440px);
  }
}

/* ==========================================================
   SP (max-width: 768px) — keihi.com準拠 / 左右padding 20px
   ========================================================== */
@media (max-width: 768px){

  /* === Reset min-width & section heights === */
  .site-header,
  .hero,
  .problem,
  .purpose,
  .agent,
  .solution,
  .cases,
  .speakers,
  .steps,
  .cta-band,
  .contact,
  .site-footer{
    min-width:0;
    height:auto;
  }
  /* セクション間のmargin-topをリセット（SPは各section paddingで間隔確保） */
  .agent,
  .solution,
  .cases,
  .speakers,
  .steps,
  .cta-band,
  .contact,
  .site-footer{
    margin-top:0;
  }

  body{ font-size:14px; }

  /* セクション共通の inner ratio reset */
  .hero__inner,
  .problem__inner,
  .purpose__inner,
  .agent__inner,
  .solution__inner,
  .cases__inner,
  .speakers__inner,
  .steps__inner,
  .cta-band__inner{
    width:100%;
    height:auto;
    flex-shrink:1;
  }

  /* === HEADER (pj_AI明細入力サイト と揃え) === */
  .site-header{ height:64px; }
  .site-header__inner{
    height:64px;
    padding:0 20px;
  }
  .site-header__logo{
    position:static;
    left:auto;
    top:auto;
    display:block;
    padding-top:18px;
  }
  .site-header__logo img{ width:168px; height:auto; }
  .site-header__nav{ display:none; }
  .site-header__actions{
    position:absolute;
    right:14px;
    top:16px;
    display:flex;
    align-items:center;
    gap:6px;
  }
  .header-login{ display:none; }
  .header-btn{
    margin-left:6px;
    height:32px;
    font-size:11px;
    padding:0 12px;
  }

  /* === HERO === */
  .hero{
    min-height:0;
    padding: 24px 20px 36px;
    display:block;
  }
  /* SP では PC と同じ SVG ドット（twinkle 付き）を、原寸のまま container に
     クロップ表示する。縮小するとドットサイズ 1.4px が極小化して見えなくなる
     ため、background-size は SVG 原寸を維持し、container を 220×180 に絞って
     右上の一部のみ見せる方針。 */
  .hero__bg{
    display:block;
    left:auto;
    right:0;
    top:0;
    width:220px;
    height:180px;
    background-size: 1123px 550px;
    background-position: top right;
  }
  .hero__inner{
    position:relative;
    width:100%;
    max-width:none;
    height:auto;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:17px;
  }
  .hero__chip{
    position:static;
    left:auto;
    top:auto;
    align-self:flex-start;
    margin:0;
    height:34px;
    min-width:0;
    padding:0 15px;
  }
  .hero__chip-main{ font-size:17px; }
  .hero__chip-sub{ font-size:12px; top:3px; }
  .hero__line{ display:none; }
  .hero__visual{
    position:static;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    margin:0;
    order:3;
    box-shadow: 0 8px 24px rgba(34, 34, 41, 0.12);
  }
  /* hero__main の box を消して、子要素を hero__inner の直接 flex子に → order制御可能に */
  .hero__main{
    position:static;
    left:auto;
    top:auto;
    width:100%;
    transform:none;
    display:contents;
  }
  .hero__title{
    width:100%;
    font-size:30px;
    line-height:1.4;
    order:1;
  }
  .hero__title-x{ bottom:2px; }
  .hero__lead{
    width:100%;
    max-width:none;
    margin-top:-4px;
    font-size:14px;
    line-height:1.85;
    text-align:justify;
    order:2;
  }
  .hero__ctas{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    width:100%;
    order:4;
  }
  .hero-btn{
    width:100%;
    max-width:none;
    padding:16px 20px 18px;
  }

  /* === PROBLEM === */
  .problem{
    padding:30px 20px 6px;
  }
  .problem__bg{ display:none; }
  .problem__header{
    position:static;
    text-align:left;
    margin-bottom:28px;
  }
  .problem__title{ font-size:22px; line-height:1.5; white-space:normal; }
  .problem__lead{
    width:100%;
    margin-top:11px;
    font-size:14px;
  }
  .problem__hline{ display:none; }
  .problem__cards{
    position:static;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .problem__vline{ display:none; }
  .problem-card{
    position:static;
    width:100%;
    padding:24px 0 0;
    gap:12px;
    border-top:1px solid #d7d7da;
  }
  .problem-card__title{ margin-top:-4px; font-size:18px; line-height:1.5; }
  .problem-card__body{
    margin-top:-4px;
    font-size:14px;
    line-height:1.85;
  }
  /* SP: chart を card 内で中央配置（origin を top center に、card flex で align-self:center） */
  .bar-chart{
    align-self:center;
    transform: scale(0.66);
    transform-origin: top center;
    margin: 8px 0 -100px;  /* scale縮小分の下余白を相殺 */
  }
  .donut-chart{
    align-self:center;
    transform: scale(0.78);
    transform-origin: top center;
    margin: 8px 0 -60px;
  }

  /* === PURPOSE === */
  .purpose{
    padding:4px 20px 30px;
  }
  .purpose__bg{ display:none; }
  .purpose__header{
    position:static;
    text-align:left;
    margin-bottom:28px;
  }
  .purpose__title{ font-size:22px; line-height:1.5; white-space:normal; }
  .purpose__lead{
    width:100%;
    font-size:14px;
  }
  .purpose__hline{ display:none; }
  .purpose__cards{
    position:static;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:24px;
  }
  .purpose__vline{ display:none; }
  .purpose-card{
    position:static;
    width:100%;
    padding:24px 0 0;
    gap:12px;
    border-top:1px solid #d7d7da;
  }
  .purpose-card__title{
    margin-top:-4px;
    font-size:18px;
    line-height:1.5;
  }
  .purpose-card__body{
    margin-top:-4px;
    font-size:14px;
    line-height:1.85;
  }
  .cost-graphic,
  .labor-graphic{
    align-self:center;
    transform: scale(0.73);
    transform-origin: top center;
    margin: 8px 0 -80px;
  }

  /* === AGENT === */
  br.sp-only{ display:inline; }
  .agent{
    padding:38px 20px 42px;
  }
  .agent__header{
    position:static;
    text-align:left;
    margin-bottom:24px;
  }
  .agent__title{ font-size:20px; line-height:1.5; }
  .agent__lead{ font-size:14px; }
  .agent__col-label{ display:none; }
  /* PC用の比較行は SP 非表示。代わりに .agent__sp ブロックで縦stack表示 */
  .agent__rows{ display:none; }
  .agent__sp{
    display:block;
    width:100%;
  }
  .agent__sp-label{
    margin:0 0 12px;
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    color:#5e5b5b;
  }
  .agent__sp-label--ax{
    margin-top:8px;
    color: var(--tokium-green);
  }
  .agent__sp-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .agent__sp-list li{
    padding:12px 14px;
    color:#fff;
    font-size:13px;
    line-height:1.4;
    border-radius:4px;
  }
  .agent__sp-list--legacy li{ background:#8c8989; }
  .agent__sp-list--ax li{ background:#008d97; }
  .agent__sp-arrow{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:18px 0;
  }
  .agent__sp-arrow svg{
    width:24px;
    height:32px;
  }

  /* === SOLUTION === */
  .solution{
    padding:42px 20px 30px;
  }
  .solution__header{
    position:static;
    text-align:left;
    margin-bottom:28px;
  }
  .solution__title{ font-size:22px; line-height:1.5; }
  .solution__lead{ font-size:14px; }
  .scope{
    position:static;
    width:100%;
    margin-bottom:32px;
  }
  .scope__label{ font-size:14px; }
  /* SPでは scope-table の代わりに 1枚画像で表示 */
  .scope-table-sp{
    display:block;
    width:100%;
    height:auto;
  }
  .scope-table{ display:none; }
  /* 4列テーブル → 縦stack: ヘッダー帯 + 各列のロゴカード */
  .scope-table__head{
    display:none;
  }
  .scope-table__row,
  .scope-table__row--span{
    display:flex;
    flex-direction:column;
    height:auto;
    grid-template-columns:none;
    padding:16px;
    border-top:1px solid #e6e6e6;
  }
  .scope-table__row:first-of-type{ border-top:none; }
  .scope-layer{
    padding-left:0;
    margin-bottom:12px;
    flex-wrap:wrap;
  }
  .scope-layer__chevron{ display:none; }
  .scope-cell{
    justify-content:center !important;
    padding:8px 0 !important;
  }
  .scope-cell--logo img{ width:120px; height:34px; }
  .scope-cell--span{ font-size:14px; line-height:1.6; padding:0 !important; }
  /* 3 cards stack */
  .solution-cards{
    position:static;
    width:100%;
    flex-direction:column;
    gap:24px;
  }
  .solution-card{
    width:100%;
    gap:12px;  /* PC 20 → SP 12 (見出し+アイコン と 本文 の距離を詰める) */
    padding-bottom:24px;
    border-bottom:1px solid #d7d7da;
  }
  .solution-card:last-child{
    padding-bottom:0;
    border-bottom:none;
  }
  .solution-cards__divider{ display:none; }
  .solution-card__title{ font-size:18px; }
  .solution-card__body{ font-size:14px; }

  /* === CASES === */
  .cases{
    padding:54px 20px 30px;
  }
  .cases__bg{ display:none; }
  .cases__header{
    position:static;
    text-align:left;
    margin-bottom:24px;
  }
  .cases__title{ font-size:22px; line-height:1.5; }
  .cases__lead{ font-size:14px; }
  .cases__list{
    position:static;
    width:100%;
    gap:20px;
  }
  .case-card{
    width:100%;
    height:auto;
    flex-direction:column;
  }
  .case-card__tag{
    width:100%;
    height:auto;
    flex-direction:row;
    justify-content:flex-start;
    gap:14px;
    padding:14px 20px;
  }
  .case-card__divider{
    width:1px;
    height:18px;
  }
  .case-card__company{ font-size:18px; }
  .case-card__industry{ font-size:13px; }
  .case-card__body{
    padding:24px 20px;
  }
  .case-card__title{ font-size:20px; line-height:1.5; }
  .case-card__desc{ font-size:14px; line-height:1.85; }
  .case-card__result{ font-size:15px; }

  /* === SPEAKERS === */
  .speakers{
    padding:30px 20px;
  }
  .speakers__header{
    position:static;
    text-align:left;
    margin-bottom:24px;
  }
  .speakers__title{ font-size:22px; line-height:1.5; }
  .speakers__lead{ font-size:14px; }
  .speakers__list{
    position:static;
    width:100%;
    flex-direction:column;
    gap:24px;
    align-items:center;
  }
  .speaker-card{
    width:100%;
    max-width:360px;
  }
  .speaker-card__visual,
  .speaker-card__bio{
    width:100%;
  }

  /* === STEPS === */
  .steps{
    padding:30px 20px;
  }
  .steps__header{
    position:static;
    text-align:left;
    margin-bottom:28px;
  }
  .steps__title{ font-size:22px; line-height:1.5; }
  .steps__lead{ font-size:14px; }
  .steps__track{
    position:relative;
    top:auto;
    left:auto;
    width:100%;
    height:auto;
    padding-left:56px;
  }
  /* PC の SVG 横線は SP で非表示。代わりに line.svg を縦線として使う */
  .steps__line{ display:none; }
  .steps__track::before,
  .steps__track::after{ display:none; }   /* 旧疑似要素は使わない */

  .steps__line-sp{
    display:block;
    position:absolute;
    left:18px;             /* 線中心に配置（SVG内 path x=0.5 が左端） */
    top:18px;              /* 1個目バッジ中央 */
    bottom:0;
    width:5px;
    height:calc(100% - 18px);
    pointer-events:none;
    z-index:0;
  }
  .steps__list{
    position:static;
    inset:auto;
    display:flex;
    flex-direction:column;
    gap:36px;
    padding-bottom:20px;  /* 最終stepから矢印先端まで 20px 延長 */
  }
  .step{
    position:relative;
    top:auto;
    left:auto;
    width:auto;
    padding:0;
    text-align:left;
  }
  .step:nth-child(1),
  .step:nth-child(2),
  .step:nth-child(3),
  .step:nth-child(4){ left:auto; }
  .step::after{ display:none; }
  .step__num{
    width:36px;
    height:36px;
    font-size:16px;
    position:absolute;
    left:-56px;     /* バッジ中心 = 縦線(18px)中心に揃える */
    top:0;
    margin:0;
  }
  .step__period{ margin:0 0 4px; font-size:14px; }
  .step__title{ font-size:18px; margin:0 0 6px; }
  .step__desc{ font-size:14px; text-align:left; }

  /* === CTA BAND === */
  .cta-band{
    height:auto;
    padding:30px 20px;
  }
  .cta-band__inner{ height:auto; }
  .cta-band__header{
    position:static;
    margin-bottom:24px;   /* ボタン1つ分上に戻す */
  }
  .cta-band__title{ font-size:22px; line-height:1.5; }
  .cta-band__lead{ font-size:14px; line-height:1.85; }
  .cta-band__actions{
    position:static;
    flex-direction:column;
    gap:12px;
    align-items:center;
  }
  .cta-band-btn{
    width:100%;
    max-width:360px;
    padding:16px 20px 18px;
  }

  /* === CONTACT === */
  .contact{
    padding:30px 16px 40px;
  }
  .contact__header{ margin-bottom:28px; }
  .contact__title{ font-size:22px; line-height:1.5; }
  .contact__lead{ font-size:14px; }
  .contact-form{
    padding:28px 20px;
  }
  .contact-field--row{
    grid-template-columns:1fr;
    gap:22px;
  }
  .contact-submit{
    width:100%;
    max-width:360px;
  }

  /* === FOOTER === */
  .site-footer{ background: var(--tokium-gray); }
  .site-footer,
  .site-footer__inner{ height:auto; }
  .site-footer__inner{
    width:100%;
    padding:35px 20px 20px;
  }
  .footer-row1{
    position:static;
    padding:0;
    grid-template-columns:1fr 1fr;
    gap:24px 16px;
    margin-bottom:24px;
  }
  .footer-row2{
    position:static;
    grid-template-columns:1fr 1fr;
    gap:16px;
    padding-top:20px;
    margin-bottom:24px;
    border-top:1px solid var(--tokium-border-light);
  }
  .footer-company{
    position:static;
    flex-direction:column;
    gap:20px;
    padding-top:20px;
    border-top:1px solid var(--tokium-border-light);
    margin-bottom:24px;
  }
  .company-main p,
  .company-group p{
    font-size:12px;
    line-height:1.85;
  }
  .footer-band{
    position:static;
    min-width:0;
    height:auto;
    margin:0 -20px;
    padding:20px 20px;
  }
  .footer-band__inner{
    width:100%;
    height:auto;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .footer-logo{
    position:static;
    height:48px;
  }
  .footer-certs{
    position:static;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-start;
  }
  .footer-certs .cert{ height:44px; }
  .footer-meta{
    position:static;
    padding-top:20px;
  }
  .footer-meta ul{ gap:10px 16px; }
  .footer-meta ul li{ font-size:11px; }
  .footer-divider{ display:none; }

  /* === セクションヘッダー統一（タイトル+リード+下マージン） === */
  .problem__header,
  .purpose__header,
  .agent__header,
  .solution__header,
  .cases__header,
  .speakers__header,
  .steps__header{
    margin-bottom:24px;
  }
  .problem__lead,
  .purpose__lead,
  .agent__lead,
  .solution__lead,
  .cases__lead,
  .speakers__lead,
  .steps__lead{
    margin-top:11px;
  }

  /* SP用 英文ラベル（小さめ・余白控えめ）
     SPでは通常フロー（タイトルの直上）に表示するため position をstatic に戻す */
  .section-eyebrow{
    position:static;
    top:auto;
    left:auto;
    right:auto;
    font-size:11px;
    letter-spacing:0.16em;
    gap:8px;
    margin:0 0 8px;
    text-indent:-0.08em;
  }
  .section-eyebrow::before{
    width:20px;
  }
  /* cta-band の SP も中央寄せ */
  .cta-band__header .section-eyebrow{ justify-content:center; }

  /* === FLOATING CTA (SP: 下辺フルワイド) === */
  .floating-cta{
    right:auto;
    left:0;
    bottom:0;
    top:auto;
    transform: translateY(100%);
    flex-direction:row;
    justify-content:center;
    width:100%;
    padding:14px 16px;
    gap:10px;
    border-radius:0;
    box-shadow: 0 -4px 14px rgba(0,0,0,0.15);
  }
  .floating-cta.is-visible{
    transform: translateY(0);
  }
  .floating-cta__icon{
    width:28px;
    height:28px;
  }
  .floating-cta__icon svg{ width:14px; height:14px; }
  .floating-cta__text{
    writing-mode: horizontal-tb;
    font-size:14px;
    letter-spacing:0.08em;
  }
}

/* === SP small (≤480px) 微調整 === */
@media (max-width: 480px){
  .hero__title{ font-size:30px; }
  .problem__title,
  .purpose__title,
  .solution__title,
  .cases__title,
  .speakers__title,
  .steps__title,
  .cta-band__title,
  .contact__title{ font-size:20px; }
  .case-card__title{ font-size:18px; }
  .step__title{ font-size:17px; }
}