/* ============================================================
   CVO Inc. Landing Page
   Fonts: Manrope (EN/numerals), Noto Sans JP (JP)
   ============================================================ */ :root {
 --bg: #dfdfdf;
 --ink: #111111;
 --ink-2: #525252;
 --gray: #737373;
 --gray-2: #9CA3AF;
 --line: #E5E5E5;
 --line-gray: #E5E5E5;
 --line-soft: #D9D9D9;
 --white: #FFFFFF;
 --dark: #111111;
 --req: #EF4444;
 --container: 1280px;
 --pad: 24px;
 /* font sizes */
 --fs-10: 10px;
 --fs-11: 11px;
 --fs-12: 12px;
 --fs-13: 13px;
 --fs-14: 14px;
 --fs-15: 15px;
 --fs-16: 16px;
 --fs-17: 17px;
 --fs-18: 18px;
 --fs-19: 19px;
 --fs-20: 20px;
 --fs-22: 22px;
 --fs-24: 24px;
 --fs-26: 26px;
 --fs-29: 29px;
 --fs-30: 30px;
 --fs-34: 34px;
 --fs-36: 36px;
 --fs-40: 40px;
 --fs-48: 48px;
 --fs-52: 52px;
 --fs-54: 54px;
 --fs-60: 60px;
}
*, *::before, *::after {
 box-sizing: border-box;
}
* {
 margin: 0;
 padding: 0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 display: block;
 margin: 0;
 padding: 0;
}
html {
 scroll-behavior: smooth;
 -webkit-text-size-adjust: 100%;
}
html {
 scroll-padding-top: 100px;
 scroll-behavior: smooth;
}
body {
 margin: 0;
 font-family: "Noto Sans JP", "Manrope", system-ui, sans-serif;
 color: var(--ink);
 background: var(--white);
 line-height: 1.7;
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
 letter-spacing: 0.4px;
}
img {
 max-width: 100%;
 display: block;
}
a {
 color: inherit;
 text-decoration: none;
}
ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
button {
 font-family: inherit;
 cursor: pointer;
}
.container {
 width: 100%;
 max-width: var(--container);
 margin-inline: auto;
 padding-inline: var(--pad);
}
/* ---------- Logo ---------- */
.logo {
 display: inline-flex;
 align-items: center;
 gap: 2px;
 font-family: "Manrope", sans-serif;
}
.logo-img {
 display: block;
 height: 23px;
 width: auto;
}
.logo-main {
 font-weight: 800;
 font-size: var(--fs-26);
 letter-spacing: .04em;
 line-height: 1;
 color: var(--ink);
}
.logo-sup {
 font-weight: 600;
 font-size: var(--fs-11);
 line-height: 1;
 margin-top: 2px;
 color: var(--ink);
}
.logo--light .logo-main, .logo--light .logo-sup {
 color: #fff;
}
/* ============================================================
   HEADER
   ============================================================ */
.site-header {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 100;
 background: rgba(255, 255, 255, .9);
 backdrop-filter: saturate(180%) blur(12px);
 -webkit-backdrop-filter: saturate(180%) blur(12px);
 transition: box-shadow .25s ease;
 width: 100%;
 border-bottom: 1px solid #F5F5F5;
}
.admin-bar .site-header {
 top: 32px;
}
.site-header.is-scrolled {}
.header-inner {
 height: 80px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}
@media (max-width:1000px) {
 #wpadminbar {
  overflow: hidden;
 }
}
@media (max-width:762px) {
 .admin-bar .site-header {
  top: 46px;
 }
 .admin-bar .gnav {
  padding-top: 50px;
 }
}
@media (max-width:600px) {
 .admin-bar .site-header.is-scrolled {
  top: 0;
 }
 .admin-bar .site-header.is-scrolled .gnav {
  padding-top: 16px;
 }
}
.gnav {
 display: flex;
 align-items: center;
 gap: 40px;
}
.gnav-list {
 display: flex;
 align-items: center;
 gap: 40px;
}
.gnav-list .nav_a, .gnav-list a {
 font-weight: 500;
 font-size: var(--fs-14);
 letter-spacing: .02em;
 color: var(--ink);
 transition: opacity .2s;
}
.gnav-list .nav_a:hover, .gnav-list a:hover {
 opacity: .55;
}
.caret {
 display: inline-block;
 width: 7px;
 height: 7px;
 margin-left: 7px;
 vertical-align: 2px;
 border-right: 1.6px solid currentColor;
 border-bottom: 1.6px solid currentColor;
 transform: rotate(45deg);
 transition: transform .25s ease;
}
main {
 padding-top: 80px;
}
/* WORKS dropdown */
.has-submenu {
 position: relative;
}
.has-submenu:hover > a {
 opacity: 1;
}
.has-submenu:hover .caret {
 transform: rotate(-135deg);
}
.submenu {
 position: absolute;
 top: 100%;
 left: -28px;
 padding-top: 30px;
 opacity: 0;
 visibility: hidden;
 transform: translateY(6px);
 transition: opacity .22s ease, transform .22s ease, visibility .22s;
 z-index: 120;
}
.has-submenu:hover .submenu, .has-submenu:focus-within .submenu {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
.submenu-inner {
 list-style: none;
 margin: 0;
 padding: 20px;
 min-width: 250px;
 background: #fff;
 border: 1px solid var(--line);
 box-shadow: 0 18px 40px rgba(17, 17, 17, .08);
}
.submenu-inner a {
 display: block;
 padding: 6px 0;
 font-size: var(--fs-14);
 font-weight: 400;
 color: var(--ink-2);
 white-space: nowrap;
 transition: color .2s;
}
.submenu-inner a:hover {
 color: var(--ink);
 background: #FAFAFA;
 opacity: 1;
}
.btn-contact {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 background: var(--ink);
 color: #fff !important;
 font-weight: 500;
 font-size: var(--fs-14);
 letter-spacing: .04em;
 padding: 11px 26px;
 border-radius: 999px;
 transition: opacity .2s, transform .2s;
}
.btn-contact:hover {
 opacity: .85;
}
/* hamburger */
.hamburger {
 display: none;
 width: 40px;
 height: 40px;
 border: none;
 background: transparent;
 padding: 8px;
}
.hamburger span {
 display: block;
 height: 2px;
 background: var(--ink);
 border-radius: 2px;
 margin: 5px 0;
 transition: .3s;
}
.nav-close {
 display: none;
}
/* ============================================================
   Shared section heading
   ============================================================ */
.sec-head {
 margin-bottom: 25px;
}
.devcase .sec-head {
 margin-bottom: 110px;
}
.sec-title {
 font-family: "Manrope", sans-serif;
 font-weight: 800;
 font-size: var(--fs-36);
 letter-spacing: .01em;
 line-height: 1.1;
 margin: 0;
 color: var(--ink);
}
.sec-sub {
 margin: 14px 0 0;
 font-size: var(--fs-16);
 color: var(--gray);
}
.sec-head--split {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 position: relative;
}
.sec-aside {
 font-family: "Manrope", sans-serif;
 font-size: var(--fs-16);
 color: var(--gray);
 margin: 0;
 position: absolute;
 right: 0;
 top: 1em;
}
.sec-head--center {
 text-align: center;
}
.sec-head--center .sec-title {
 font-size: var(--fs-40);
}
/* ============================================================
   MV / HERO
   ============================================================ */
.mv_cvo {
 padding: 100px 0 120px 0;
 background-size: 16px auto;
 height: calc(100vh - 80px);
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 700px;
 box-sizing: border-box;
 position: relative;
}
.mv_cvo:after {
 content: "";
 position: absolute;
 background-image: url(../down.svg);
 background-repeat: no-repeat;
 bottom: 40px;
 width: 14px;
 height: 14px;
 background-position: center;
 background-size: 100% auto;
 left: calc(50% - 7px);
 animation: mvArrowBounce 1.6s ease-in-out infinite;
}
@keyframes mvArrowBounce {
 0%, 20%, 50%, 80%, 100% {
  transform: translateY(0);
 }
 40% {
  transform: translateY(6px);
 }
 60% {
  transform: translateY(3px);
 }
}
.admin-bar .mv {
 height: calc(100vh - 80px - 32px);
}
.mv-inner {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
 gap: 48px;
 align-items: center;
}
.eyebrow {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-14);
 letter-spacing: .1em;
 color: var(--gray-2);
 margin: 0 0 10px;
}
.mv-title {
 font-weight: 700;
 font-size: var(--fs-60);
 line-height: 1.5;
 margin: 0 0 20px;
 letter-spacing: .01em;
}
.mv-title ruby rt {
 font-size: .22em;
 font-weight: 700;
 letter-spacing: 0.5em;
 text-align: center;
 position: relative;
 left: 3px;
}
@supports (-webkit-touch-callout: none) {
 .mv-title ruby rt span {
  position: relative;
  top: 8px;
 }
}
.mv-lead {
 font-size: var(--fs-18);
 line-height: 1.65;
 color: var(--ink-2);
 margin: 0 0 40px;
 letter-spacing: 0.2px;
}
.mv-cta {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-size: var(--fs-16);
 font-weight: 500;
 padding-bottom: 4px;
 border-bottom: 1px solid var(--ink);
 transition: gap .2s;
 letter-spacing: 0;
}
.mv-cta:hover {
 gap: 16px;
}
.arrow {
 display: inline-block;
}
.mv-visual img {
 width: 100%;
 height: auto;
}
/* ============================================================
   OUR STRENGTH
   ============================================================ */
.strength {
 background: #FAFAFA;
 padding: 90px 0;
}
.strength-body {
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: 64px;
 align-items: stretch;
}
.strength-h {
 font-weight: 700;
 font-size: var(--fs-30);
 line-height: 1.4;
 margin: 0 0 28px;
}
.strength-p {
 font-size: var(--fs-16);
 line-height: 2;
 color: var(--ink-2);
 margin: 0 0 29px;
}
.mb-0 {
 margin-bottom: 0;
}
.strength-stat {
 border-left: 3px solid var(--ink);
 padding-left: 18px;
}
.strength-stat-label {
 line-height: 1em;
 font-weight: 700;
 font-size: var(--fs-12);
 letter-spacing: .06em;
 color: var(--gray-2);
 margin: 0px 0 3px;
}
.strength-stat-val {
 font-weight: 700;
 font-size: var(--fs-20);
 margin: 0;
}
/* card */
.strength-card {
 position: relative;
 background: #fff;
 padding: 56px 40px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
}
.bracket {
 position: absolute;
 width: 26px;
 height: 26px;
 border: 2px solid var(--ink);
}
.bracket-tl {
 top: 0;
 left: 0;
 border-right: none;
 border-bottom: none;
}
.bracket-br {
 bottom: 0;
 right: 0;
 border-left: none;
 border-top: none;
}
.crown {
 margin-bottom: 15px;
}
.nasdaily-logo {
 width: 200px;
 height: auto;
 margin: 0 auto;
}
.card-divider {
 display: block;
 width: 60px;
 height: 1px;
 background: #111;
 margin: 28px auto;
}
.card-line {
 font-weight: 700;
 font-size: var(--fs-14);
 letter-spacing: .22em;
 margin: 0 0 8px;
}
.card-follow {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-10);
 letter-spacing: .2em;
 color: var(--gray);
 margin: 26px 0 5px;
}
.card-ig {
 display: inline-flex;
 transition: opacity .2s;
}
.card-ig:hover {
 opacity: .6;
}
/* ============================================================
   DEVELOPMENT CASE
   ============================================================ */
.worksSlide2 {
 opacity: 0;
 .workS {
  max-width: 230px;
  margin: 0 10px;
 }
 .slick-list.draggable {
  padding: 0 !important;
 }
 .workS dd {
  text-align: center;
  line-height: 1.4em;
 }
 .workS dd a {
  text-decoration: none;
  color: initial;
 }
 .workS dd h3 {
  margin: 15px 0 0 0;
  font-size: var(--fs-18);
 }
 .workS dd .number {
  font-size: var(--fs-10);
  margin: 15px 0 2px 0;
  strong {
   font-size: var(--fs-16);
  }
 }
 .workS dd .service {
  font-size: var(--fs-12);
  line-height: 1.3em;
  display: inline-block;
  padding: 4px 20px;
  color: var(--gray);
  margin: 10px 0 0 0;
 }
}
.worksSlide2 .workS dd .service {
 background-color: #F5F5F5;
}
.devcase {
 padding: 90px 0;
 transition: 0.3s ease-in-out;
}
.dc-tabs {
 display: flex;
 margin-top: -24px;
}
.dc-tab {
 background: none;
 border: none;
 padding: 0 35px 12px 35px;
 font-size: var(--fs-16);
 color: var(--gray-2);
 position: relative;
 font-family: inherit;
 font-weight: 400;
 border-bottom: 1px solid var(--gray-2);
}
.dc-tab.is-active {
 color: var(--ink);
 font-weight: 700;
}
.dc-tab.is-active::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: -1px;
 height: 2px;
 background: var(--ink);
}
.dc-scroll {
 overflow-x: auto;
 padding: 48px 0 8px;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
}
.dc-row {
 display: flex;
 gap: 32px;
 width: max-content;
 padding-inline: max(var(--pad), calc((100vw - var(--container))/2 + var(--pad)));
}
.dc-card {
 margin: 0;
 width: 250px;
 flex: 0 0 auto;
}
.dc-card img {
 width: 100%;
 height: auto;
}
/* ============================================================
   WORKS
   ============================================================ */
.works {
 padding: 60px 0 20px 0;
}
#works .sec-head {
 margin-bottom: 85px;
}
.work-row {
 display: grid;
 grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
 gap: 48px;
 padding: 28px 0 100px 0;
 border-top: 1px solid var(--ink);
}
.tag {
 display: inline-block;
 border: 2px solid #D4D4D4;
 border-radius: 4px;
 font-weight: 700;
 font-size: var(--fs-12);
 letter-spacing: .08em;
 padding: 4px 12px;
 margin-bottom: 15px;
}
.work-title {
 font-weight: 700;
 font-size: var(--fs-24);
 line-height: 1.5;
 margin: 0;
}
.work-no {
 margin-right: 10px;
}
.work-indent {
 padding-left: 46px;
}
.work-desc {
 font-weight: 500;
 font-size: var(--fs-18);
 line-height: 1.7;
 margin: 0 0 24px;
}
.work-stats {
 display: flex;
 flex-wrap: wrap;
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 padding: 24px 0;
}
.work-stats .stat {
 width: 33.33%;
 box-sizing: border-box;
 padding-right: 2em;
}
.stat-label {
 font-size: var(--fs-12);
 color: var(--gray);
 margin: 0 0 6px;
}
.stat-num {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-30);
 line-height: 1;
 margin: 0;
}
.stat-num span {
 font-size: var(--fs-14);
 margin-left: 3px;
}
.view-details {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 30px;
 float: right;
 font-weight: 700;
 font-size: var(--fs-14);
 letter-spacing: .04em;
 border-bottom: 1px solid var(--ink);
 padding-bottom: 3px;
 transition: gap .2s;
}
.view-details.doc {
 clear: both;
 margin-top: 7px;
}
.view-details:hover {
 gap: 14px;
}
.work-right::after {
 content: "";
 display: block;
 clear: both;
}
/* ============================================================
   PROCESS
   ============================================================ */
.process {
 padding: 0px 0 90px 0;
}
#stock-flow {
 padding-top: 60px;
}
#stock-flow .sec-head, #stock-flow .pr-heading {
 margin-bottom: 40px;
}
#process .sec-head {
 margin-bottom: 85px;
}
.pr-tabs {
 display: flex;
 gap: 0;
 border-bottom: 1px solid var(--line);
 margin-bottom: 50px;
}
.pr-tab {
 background: none;
 border: none;
 padding: 0 35px 12px 35px;
 font-size: var(--fs-16);
 color: var(--gray-2);
 position: relative;
 font-family: inherit;
 font-weight: 400;
}
.pr-tab.is-active {
 color: var(--ink);
 font-weight: 700;
}
.pr-tab.is-active::after {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: -1px;
 height: 2px;
 background: var(--ink);
}
.pr-panel[hidden] {
 display: none;
}
.pr-heading {
 font-weight: 700;
 font-size: var(--fs-24);
 margin: 0 0 65px;
}
.pr-heading-no {
 margin-right: 8px;
}
.pr-steps {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 40px;
 align-items: stretch;
}
.pr-step {
 display: grid;
 grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.pr-step-top {
 display: flex;
 align-items: center;
 margin-bottom: 24px;
}
.pr-dot {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: var(--ink);
 flex: 0 0 auto;
}
.pr-line {
 flex: 1;
 height: 2px;
 background: var(--ink);
}
.pr-num {
 font-family: "Manrope", sans-serif;
 font-weight: 800;
 font-size: var(--fs-60);
 line-height: 1;
 margin: 0 0 25px;
 letter-spacing: .02em;
}
.pr-title {
 font-weight: 700;
 font-size: var(--fs-17);
 margin: 0 0 16px;
 letter-spacing: 0px;
}
.pr-desc {
 font-size: var(--fs-14);
 line-height: 1.7;
 color: var(--ink-2);
 margin: 0 0 24px;
}
.pr-meta {
 border-top: 1px solid var(--line-gray);
 padding-top: 15px;
}
.pr-meta-label {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-10);
 letter-spacing: .16em;
 color: var(--gray);
 margin: 0 0 4px;
}
.pr-meta-label:nth-of-type(2) {
 margin-top: 16px;
}
.pr-meta-val {
 font-family: "Manrope", sans-serif;
 font-weight: 700;
 font-size: var(--fs-24);
 line-height: 1.2;
 margin: 0 0 15px 0;
}
.pr-meta-val span {
 font-family: "Noto Sans JP", sans-serif;
 font-weight: 400;
 font-size: var(--fs-14);
 margin-left: 4px;
}
.pr-meta-val--sm {
 font-size: var(--fs-22);
}
/* ============================================================
   CONTACT
   ============================================================ */
.contact {
 padding: 60px 0;
}
.contact-inner {
 max-width: 512px;
 margin-inline: auto;
 padding-inline: var(--pad);
 box-sizing: unset;
 width: auto;
}
.contact-title {
 font-weight: 700;
 font-size: var(--fs-48);
 text-align: center;
 margin: 0 0 20px;
 letter-spacing: .01em;
}
.contact-lead {
 text-align: center;
 font-size: var(--fs-16);
 color: var(--ink-2);
 margin: 0 0 37px;
}
.contact-form {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0px 24px;
}
.field {
 display: flex;
 flex-direction: column;
}
.field p {
 margin: 10px 0;
}
.field--full {
 grid-column: 1 / -1;
}
.field label {
 font-weight: 700;
 font-size: var(--fs-12);
 letter-spacing: .06em;
 color: var(--ink-2);
 margin-bottom: 10px;
 display: inline-block;
}
.field label em {
 color: var(--req);
 font-style: normal;
 margin-left: 3px;
}
.field input, .field textarea, .field select {
 font-family: inherit;
 font-size: var(--fs-16);
 color: var(--ink);
 border: none;
 border-bottom: 1px solid var(--line-soft);
 background: transparent;
 padding: 6px 2px 10px;
 outline: none;
 transition: border-color .2s;
 width: 100%;
 border-bottom: 1px solid #999da2;
}
.field input::placeholder, .field textarea::placeholder {
 color: var(--gray-2);
}
.field input:focus, .field textarea:focus, .field select:focus {
 /*border-color: var(--ink);*/
}
.field textarea {
 resize: vertical;
 line-height: 1.7;
 height: 6em;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
 width: 100%;
 grid-column: 1 / -1;
 border-radius: 150px;
 padding: 15px 2em;
 text-align: center;
 font-weight: bold;
 color: #af7100;
 box-sizing: border-box;
 width: auto;
}
.wpcf7 form.sent .wpcf7-response-output {
 border-color: #46b450; /* Green */
 width: 100%;
 grid-column: 1 / -1;
 border-radius: 150px;
 padding: 15px 2em;
 text-align: center;
 font-weight: bold;
 color: #33933c;
}
.select-wrap {
 position: relative;
}
.select-wrap::after {
 content: "";
 position: absolute;
 right: 4px;
 top: 50%;
 width: 8px;
 height: 8px;
 border-right: 1.5px solid var(--gray);
 border-bottom: 1.5px solid var(--gray);
 transform: translateY(-70%) rotate(45deg);
 pointer-events: none;
}
.field select {
 appearance: none;
 -webkit-appearance: none;
 color: var(--gray-2);
 padding-right: 24px;
}
.contact-submit {
 display: flex;
 justify-content: center;
 margin-top: 22px;
}
.btn-send {
 background: var(--ink);
 color: #fff;
 border: none;
 border-radius: 999px;
 font-weight: 700;
 font-size: var(--fs-16);
 letter-spacing: .08em;
 padding: 20px 0;
 transition: opacity .2s, transform .2s;
 margin: 35px auto 0 auto;
 display: block;
 cursor: pointer;
 width: 222px;
 box-sizing: border-box;
}
.btn-send:hover {
 opacity: .88;
 transform: translateY(-1px);
}
/* ============================================================
   COMPANY
   ============================================================ */
.company {
 background: #FAFAFA;
 padding: 90px 0;
}
.company-table {
 max-width: 592px;
 margin: 0 auto;
}
.company-row {
 display: grid;
 grid-template-columns: 160px 1fr;
 gap: 24px;
 padding: 22px 0;
 border-bottom: 1px solid var(--line-gray);
 align-items: start;
}
.company-row dt {
 font-weight: 700;
 font-size: var(--fs-14);
 color: var(--gray);
 margin: 0;
}
.company-row dd {
 font-weight: 500;
 font-size: var(--fs-16);
 margin: 0;
}
/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
 background: var(--dark);
 padding: 36px 0;
}
.footer-inner {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
}
.copyright {
 font-family: "Manrope", sans-serif;
 font-size: var(--fs-14);
 color: rgba(255, 255, 255, .55);
 margin: 0;
}
/* ============================================================
   FLOATING CTA
   ============================================================ */
.fixed-cta {
 position: fixed;
 right: 28px;
 bottom: 28px;
 z-index: 90;
 display: block;
 width: 122px;
 line-height: 0;
 transition: transform .25s, filter .25s;
}
.fixed-cta img {
 width: 100%;
 height: auto;
}
.fixed-cta:hover {
 transform: translateY(-4px) scale(1.03);
 filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .2));
}
.fixed-cta .circle {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 122px;
 background-image: url(../contact-btfix1.png);
 background-position: center top;
 background-repeat: no-repeat;
 background-size: 100% auto;
 z-index: 1;
 animation: spin 10s linear infinite;
 display: block;
}
/* 回転アニメーションの定義 */
@keyframes spin {
 0% {
  transform: rotate(0deg);
 }
 100% {
  transform: rotate(360deg);
 }
}
.fixed-cta .yubi {
 position: relative;
 z-index: 2;
 display: block;
}
.sp_br {
 display: none;
}
/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */
@media (max-width:1100px) {
 .mv-title {
  font-size: var(--fs-36);
 }
 .pr-steps {
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 36px;
 }
 .work-row {
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 32px;
 }
}
/* ============================================================
   RESPONSIVE — Mobile (SP design: 390px)
   ============================================================ */
@media (max-width:768px) {
 :root {
  --pad: 24px;
 }
 body {
  background-color: #fff;
 }
 span.sp2 {
  padding-left: 39px;
 }
 /* header */
 .hamburger {
  display: block;
 }
 body.nav-open {
  overflow: hidden;
 }
 body.nav-open .hamburger {
  opacity: 0;
  pointer-events: none;
 }
 /* let the full-screen menu (inside header) paint over the top: drop the header's
     blurred/translucent layer while open so it doesn't composite above the menu */
 body.nav-open .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
 }
 /* in-flow close (X) button at the top of the full-screen menu (Figma: 48px, top16 / right24) */
 .nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0 -12px 46px 0;
  line-height: 0;
 }
 .nav-close svg {
  display: block;
 }
 /* full-screen menu sliding in from the right (Figma: items left 60, X right 24, top 16) */
 .gnav {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  background: #fff;
  padding: 16px 36px 48px 60px;
  overflow-y: auto;
  transition: .35s ease;
  z-index: 200;
  left: 100%;
  opacity: 0;
  visibility: hidden;
 }
 body.nav-open .gnav {
  left: 0;
  opacity: 1;
  visibility: visible;
 }
 .gnav-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
 }
 .gnav-list li {
  width: 100%;
 }
 .gnav-list .nav_a, .gnav-list a {
  display: block;
  width: 100%;
  padding: 24px 0;
  font-size: var(--fs-20);
  font-weight: 500;
  border: none;
  letter-spacing: .02em;
 }
 .gnav-list .nav_a:hover, .gnav-list a:hover {
  opacity: 1;
 }
 .btn-contact {
  background: none;
  color: var(--ink);
  border-radius: 0;
  width: auto;
  margin: 0;
  padding: 24px 0;
  font-size: var(--fs-20);
  font-weight: 500;
  justify-content: flex-start;
  letter-spacing: .02em;
 }
 .btn-contact:hover {
  opacity: 1;
 }
 /* WORKS submenu: hidden by default, tap to toggle */
 .has-submenu {
  position: static;
 }
 .gnav-list .has-submenu > a {
  display: flex;
  align-items: center;
 }
 .caret {
  display: none;
 }
 li.has-submenu .nav_a:after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 12px;
  vertical-align: 0;
  transform: rotate(45deg);
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transition: transform .25s ease;
  display: inline-block;
  top: -3px;
  position: relative;
 }
 li.has-submenu.is-open .nav_a:after, .has-submenu.is-open .caret {
  transform: rotate(-135deg);
 }
 .submenu {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  padding-top: 0;
  display: none;
  width: 100%;
 }
 .has-submenu.is-open .submenu {
  display: block;
 }
 .submenu-inner {
  border: none;
  box-shadow: none;
  padding: 0 0 10px;
  min-width: 0;
  background: transparent;
 }
 .submenu-inner a {
  padding: 6px 0;
  border: none;
  color: var(--gray);
  font-size: var(--fs-14);
  font-weight: 400;
  white-space: normal;
 }
 /* generic section spacing */
 .strength, .devcase, .works, .process, .contact, .company {
  padding: 64px 0;
 }
 .sec-head {
  margin-bottom: 60px;
 }
 .sec-sub, .sec-title {
  text-align: center;
 }
 .sec-head--split {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
 }
 .sec-aside {
  text-align: center;
  position: static;
  margin: 40px 0 0 0;
 }
 /* MV */
 .mv_cvo {
  padding: 32px 0 56px;
  align-items: flex-start;
 }
 .mv-inner {
  grid-template-columns: 1fr;
  gap: 36px;
 }
 .eyebrow {
  font-weight: 200;
  font-size: var(--fs-10);
  margin-bottom: 15px;
 }
 .mv-title ruby rt {
  font-size: var(--fs-10);
  letter-spacing: 1.5px;
  margin-bottom: 0;
 }
 .mv-title {
  margin-bottom: 17px;
 }
 .mv-lead {
  font-size: var(--fs-14);
  margin-bottom: 20px;
 }
 /* strength */
 .strength {
  text-align: left;
 }
 .strength .sec-head {
  text-align: center;
  align-items: center;
 }
 .strength .sec-head--split {
  align-items: center;
 }
 .strength-body {
  grid-template-columns: 1fr;
  gap: 48px;
 }
 .sp_rm_br br {
  display: none;
 }
 .sp_br {
  display: block;
 }
 .strength-h {
  font-size: var(--fs-26);
 }
 .strength-card {
  padding: 48px 28px;
 }
 .nasdaily-logo {
  width: 130px;
 }
 .card-divider {
  width: 96px;
  margin: 25px auto;
 }
 .card-follow {
  margin-top: 16px;
 }
 /* devcase */
 .devcase .sec-head {
  text-align: center;
  margin-bottom: 80px;
 }
 .dc-tabs {
  justify-content: flex-start;
 }
 .dc-scroll {
  padding-top: 36px;
 }
 .dc-row {
  gap: 20px;
  padding-inline: var(--pad);
 }
 .dc-card {
  width: 226px;
 }
 /* works */
 .work-row {
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 34px 0 60px 0;
 }
 .work-title {}
 .work-indent {}
 .work-desc {
  font-size: var(--fs-15);
  margin-bottom: 28px;
 }
 .work-stats {
  gap: 40px;
 }
 .stat-num {
  font-size: var(--fs-26);
 }
 .view-details {
  margin-top: 28px;
 }
 /* process */
 .pr-tabs {
  flex-direction: column;
  gap: 0;
  border-bottom: none;
  margin-bottom: 40px;
 }
 .pr-tab {
  text-align: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
 }
 .pr-tab.is-active::after {
  display: none;
 }
 .pr-tab.is-active {
  border-bottom-color: var(--ink);
 }
 .pr-heading {
  margin-bottom: 36px;
 }
 .pr-steps {
  grid-template-columns: 1fr;
  gap: 24px;
 }
 /* contact */
 .contact-inner {
  max-width: 100%;
 }
 .contact-title {
  font-size: var(--fs-34);
 }
 .contact-lead {
  margin-bottom: 40px;
 }
 .contact-form {
  grid-template-columns: 1fr;
  gap: 0;
 }
 .btn-send {
  margin-top: 0;
  width: 220px;
  text-align: center;
  display: block;
  padding: 18px;
  box-sizing: border-box;
 }
 /* company */
 .company .sec-title {
  font-size: var(--fs-34);
 }
 .company-row {
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 18px 0;
 }
 .company-row dd {
  font-size: var(--fs-15);
 }
 /* footer */
 .footer-inner {
  flex-direction: column;
  gap: 14px;
 }
 .copyright {
  font-size: var(--fs-12);
 }
 /* floating cta */
 .fixed-cta {
  width: 92px;
  right: 16px;
  bottom: 16px;
 }
 .fixed-cta .circle {
  height: 92px;
 }
}
@media (max-width:380px) {
 .mv-title {}
 .contact-title {
  font-size: var(--fs-30);
 }
}
/* ============================================================
   BLOG
   ============================================================ */
.gnav-list a[aria-current="page"] {
 font-weight: 700;
}
.blog-hero {
 padding: 104px 0;
 /*border-bottom: 1px solid var(--line);*/
 background: #fff;
}
.blog-heading {
 margin: 0;
 text-align: center;
}
.blog-heading-label {
 margin: 0 0 10px;
 font-family: "Manrope", sans-serif;
 font-size: var(--fs-12);
 font-weight: 700;
 letter-spacing: .18em;
 color: var(--gray);
}
.blog-heading h1 {
 margin: 0;
 font-family: "Manrope", sans-serif;
 font-size: clamp(var(--fs-36), 5vw, var(--fs-48));
 font-weight: 800;
 line-height: 1.05;
 letter-spacing: -.01em;
}
.blog-heading > p:last-child {
 margin: 30px 0 0;
 font-size: var(--fs-17);
 font-weight: 500;
 letter-spacing: .04em;
}
.blog-listing {
 padding: 0px 0 140px;
}
.blog-filters {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 8px;
 margin-bottom: 54px;
}
.blog-filter {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 104px;
 padding: 10px 18px;
 border: 1px solid var(--line-soft);
 border-radius: 999px;
 color: var(--ink);
 font-size: var(--fs-13);
 font-weight: 500;
}
.blog-filter.is-active {
 background: var(--ink);
 border-color: var(--ink);
 color: #fff;
}
.blog-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 column-gap: 24px;
 row-gap: 64px;
}
.blog-card {
 min-width: 0;
}
.blog-card-link {
 display: block;
}
.blog-card-media {
 position: relative;
 overflow: hidden;
 aspect-ratio: 16/10;
 background: #ddd;
}
.blog-card-media::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .25));
 pointer-events: none;
}
.blog-card-media img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 /*filter: grayscale(1);*/
 transition: transform .55s ease, filter .35s ease;
}
.blog-card-link:hover .blog-card-media img {
 transform: scale(1.035);
 filter: grayscale(.2);
}
.blog-card-body {
 padding: 22px 2px 0;
}
.blog-card-meta {
 display: flex;
 align-items: center;
 gap: 16px;
 font-family: "Manrope", "Noto Sans JP", sans-serif;
 font-size: var(--fs-12);
}
.blog-card-meta span {
 padding: 4px 10px;
 border: 1px solid var(--ink);
 font-weight: 600;
}
.blog-card-meta time {
 color: var(--gray);
 letter-spacing: .04em;
}
.blog-card h3 {
 min-height: 3.5em;
 margin: 18px 0 28px;
 font-size: var(--fs-18);
 line-height: 1.75;
 font-weight: 700;
}
.blog-card-more {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 12px;
 margin: 0;
 padding-top: 16px;
 border-top: 1px solid var(--line);
 font-family: "Manrope", sans-serif;
 font-size: var(--fs-11);
 font-weight: 700;
 letter-spacing: .1em;
}
.blog-card-more span {
 display: grid;
 place-items: center;
 width: 28px;
 height: 28px;
 font-size: var(--fs-14);
 transition: background .2s, color .2s;
}
.blog-card-link:hover .blog-card-more span {}
@media (max-width:900px) {
 .blog-hero {
  padding-bottom: 80px;
 }
 .blog-listing {
  padding: 76px 0 110px;
 }
 .blog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}
@media (max-width:600px) {
 .blog-hero {
  padding: 22px 0 58px;
 }
 .blog-heading h1 {
  font-size: var(--fs-34);
 }
 .blog-heading > p:last-child {
  margin-top: 22px;
  font-size: var(--fs-14);
 }
 .blog-listing {
  padding: 58px 0 88px;
 }
 .blog-filters {
  gap: 6px;
  margin-bottom: 38px;
 }
 .blog-filter {
  min-width: 0;
  padding: 9px 14px;
  font-size: var(--fs-12);
 }
 .blog-grid {
  grid-template-columns: 1fr;
  row-gap: 48px;
 }
 .blog-card h3 {
  min-height: 0;
  font-size: var(--fs-17);
 }
}
/* ============================================================
   BLOG SINGLE
   ============================================================ */
.single-header {
 padding: 36px 0 60px;
 background: #fff;
 border-bottom: 1px solid var(--line);
}
.single-header-inner {
 max-width: 1080px;
}
.single-breadcrumb ol {
 display: flex;
 align-items: center;
 gap: 0;
 margin: 0;
 padding: 0;
 list-style: none;
 color: var(--gray);
 font-size: var(--fs-12);
 line-height: 1.6;
}
.single-breadcrumb li {
 display: flex;
 align-items: center;
 min-width: 0;
}
.single-breadcrumb li:not(:last-child)::after {
 content: "/";
 margin: 0 12px;
 color: var(--gray-2);
}
.single-breadcrumb li:last-child {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.single-breadcrumb a {
 color: var(--ink);
 transition: opacity .2s;
}
.single-breadcrumb a:hover {
 opacity: .55;
}
.single-title-wrap {
 max-width: 900px;
 margin-top: 88px;
}
.single-kicker {
 margin: 0 0 20px;
 font-family: "Manrope", sans-serif;
 font-size: var(--fs-12);
 font-weight: 700;
 letter-spacing: .2em;
 color: var(--gray);
}
.single-title-wrap h1 {
 margin: 0;
 font-size: clamp(var(--fs-30), 4vw, var(--fs-40));
 line-height: 1.48;
 letter-spacing: .01em;
 font-weight: 700;
}
.single-meta {
 display: flex;
 align-items: center;
 gap: 18px;
 margin-top: 36px;
 font-family: "Manrope", "Noto Sans JP", sans-serif;
 font-size: var(--fs-13);
}
.single-category {
 padding: 5px 13px;
 background: var(--ink);
 color: #fff;
 font-weight: 600;
}
.single-meta time {
 color: var(--gray);
 letter-spacing: .06em;
}
.single-visual {
 max-width: 1080px;
 margin-top: 72px;
}
.single-visual img {
 width: 100%;
 max-height: 580px;
 aspect-ratio: 16/9;
 object-fit: cover;
}
.single-body {
 max-width: 900px;
 padding-bottom: 140px;
}
.content_post {
 font-size: var(--fs-16);
 line-height: 2.05;
 letter-spacing: .02em;
 padding-top: 2em;
}
.content_post > *:first-child {
 margin-top: 0;
}
.content_post p {
 margin: 0 0 2em;
}
.content_post .article-lead {
 margin-bottom: 56px;
 font-size: var(--fs-18);
 line-height: 2.1;
 font-weight: 500;
}
.content_post h2 {
 margin: 2em 0 34px;
 padding: 0 0 20px;
 border-bottom: 1px solid var(--ink);
 font-size: var(--fs-30);
 line-height: 1.55;
 letter-spacing: .01em;
}
.content_post h2 span {
 display: block;
 margin-bottom: 8px;
 font-family: "Manrope", sans-serif;
 font-size: var(--fs-12);
 letter-spacing: .16em;
 color: var(--gray);
}
.content_post h3 {
 margin: 58px 0 24px;
 padding-left: 18px;
 border-left: 3px solid var(--ink);
 font-size: var(--fs-22);
 line-height: 1.65;
}
.content_post h4 {
 margin: 44px 0 20px;
 font-size: var(--fs-18);
}
.content_post a:not(.article-toc a) {
 text-decoration: underline;
 text-underline-offset: 4px;
}
.content_post ul, .content_post ol {
 margin: 0 0 2.2em;
 padding-left: 1.5em;
}
.content_post li {
 margin: .5em 0;
 padding-left: .25em;
}
.content_post ul {
 list-style: disc;
}
.content_post figure {
 margin: 60px 0;
}
.content_post figure img {
 width: 100%;
 filter: grayscale(1);
}
.content_post figcaption {
 margin-top: 12px;
 color: var(--gray);
 font-size: var(--fs-12);
 text-align: center;
}
.content_post blockquote {
 margin: 52px 0;
 padding: 32px 38px;
 border-left: 4px solid var(--ink);
 background: #f1f1f1;
}
.content_post blockquote p {
 margin: 0;
 font-size: var(--fs-18);
 font-weight: 500;
}
.content_post table {
 width: 100%;
 margin: 48px 0;
 border-collapse: collapse;
 font-size: var(--fs-14);
}
.content_post th, .content_post td {
 padding: 16px;
 border: 1px solid var(--line-soft);
 text-align: left;
}
.content_post th {
 background: #f1f1f1;
}
.article-toc {
 margin: 0 0 84px;
 padding: 38px 44px;
 border: 1px solid var(--line-soft);
 background: #fff;
}
.article-toc-title {
 margin: 0 0 18px !important;
 font-family: "Manrope", sans-serif;
 font-size: var(--fs-13);
 font-weight: 800;
 letter-spacing: .16em;
}
.article-toc ol {
 margin: 0;
 padding-left: 1.35em;
}
.article-toc li {
 margin: 8px 0;
}
.article-toc a {
 border-bottom: 1px solid transparent;
 transition: border-color .2s;
}
.article-toc a:hover {
 border-color: var(--ink);
}
.article-note {
 margin: 52px 0;
 padding: 32px 38px;
 border: 1px solid var(--ink);
}
.article-note strong {
 display: block;
 margin-bottom: 12px;
 font-family: "Manrope", sans-serif;
 font-size: var(--fs-12);
 letter-spacing: .16em;
}
.article-note p {
 margin: 0;
}
.single-footer-nav {
 margin-top: 30px;
 padding-top: 40px;
 border-top: 1px solid var(--line);
}
.back-to-blog {
 display: inline-flex;
 align-items: center;
 gap: 14px;
 font-family: "Manrope", sans-serif;
 font-size: var(--fs-12);
 font-weight: 700;
 letter-spacing: .12em;
}
.back-to-blog span {
 display: grid;
 place-items: center;
 width: 38px;
 height: 38px;
 border: 1px solid var(--line-soft);
 border-radius: 50%;
 transition: background .2s, color .2s;
}
.back-to-blog:hover span {
 background: var(--ink);
 color: #fff;
}
@media (max-width:768px) {
 .single-visual img {
  max-width: 100%;
  height: auto;
 }
 .single-header {
  padding: 24px 0 64px;
 }
 .single-title-wrap {
  margin-top: 58px;
 }
 .single-title-wrap h1 {
  font-size: var(--fs-29);
  line-height: 1.55;
 }
 .single-meta {
  margin-top: 26px;
 }
 .single-visual {
  margin-top: 40px;
  padding-inline: 0;
 }
 .single-body {
  padding-top: 58px;
  padding-bottom: 96px;
 }
 .content_post {
  font-size: var(--fs-15);
  line-height: 1.95;
 }
 .content_post .article-lead {
  margin-bottom: 42px;
  font-size: var(--fs-16);
 }
 .content_post h2 {
  margin-top: 68px;
  font-size: var(--fs-24);
 }
 .content_post h3 {
  margin-top: 46px;
  font-size: var(--fs-19);
 }
 .content_post figure {
  margin: 44px 0;
 }
 .content_post blockquote, .article-note {
  padding: 24px 22px;
 }
 .article-toc {
  margin-bottom: 58px;
  padding: 28px 24px;
 }
}
/* ===== BLOG pagination / empty (WordPress) ===== */
.blog-pagination {
 margin-top: 80px;
}
.blog-pagination .nav-links {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 10px;
}
.blog-pagination .page-numbers {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 44px;
 height: 44px;
 padding: 0 12px;
 border: 1px solid var(--line-soft);
 font-family: "Manrope", sans-serif;
 font-size: var(--fs-14);
 font-weight: 600;
 color: var(--ink);
 transition: background .2s, color .2s, border-color .2s;
}
.blog-pagination .page-numbers:hover {
 background: var(--ink);
 border-color: var(--ink);
 color: #fff;
}
.blog-pagination .page-numbers.current {
 background: var(--ink);
 border-color: var(--ink);
 color: #fff;
}
.blog-pagination .page-numbers.dots {
 border-color: transparent;
}
.blog-empty {
 padding: 0px 0 80px 0;
 text-align: center;
 color: var(--gray);
}
@media (max-width:768px) {
 .blog-pagination {
  margin-top: 56px;
 }
 .blog-pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  font-size: var(--fs-13);
 }
}
/* ===================== Scroll Reveal (heading / block fade-in) ===================== */
.js-reveal {
 opacity: 0;
 transform: translateY(28px);
 transition: opacity .7s ease, transform .7s ease;
}
.js-reveal.is-inview {
 opacity: 1;
 transform: none;
}