@charset "UTF-8";
/*
Theme Name: TREASURES
Author: TREASURES
Version: 1.0.0
*/
/* ==================================================
   TREASURES TOP PAGE
   CSS safely cleaned 2026-09-16
   Current PHP files checked. Cascade order is intentionally preserved.
   Legacy AI CTA / AI improvement rules removed.
================================================== */
:root{
  --content-width:1024px;
  --ink:#1d2530;
  --muted:#65707d;
  --line:#dfe6ed;
  --navy:#172b45;
  --blue:#315f9f;
  --pale:#f5f8fb;
  --white:#fff;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:var(--white);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;
  line-height:1.8;-webkit-font-smoothing:antialiased
}
a{color:inherit;text-decoration:none}
.l-container{width:min(calc(100% - 48px),var(--content-width));margin-inline:auto}


/* ==================================================
   HEADER / GLOBAL NAVIGATION
================================================== */
.site-header {
    height: 94px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
}
.site-header__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px}
.site-brand{display:inline-flex;align-items:baseline;gap:14px;white-space:nowrap}
.site-brand__name{font-size:17px;font-weight:700;letter-spacing:.04em}
.site-brand__tag{color:var(--muted);font-size:10px}
.global-nav__list {
    display: flex;
    align-items: center;
    gap: 38px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
}
.global-nav__list>li>a:not(.global-nav__contact){padding-block:10px}
.global-nav__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 94px;
    padding: 0 30px;
    color: #fff;
    background: var(--navy);
}

/* Current page */
.global-nav__list a.is-current:not(.global-nav__contact) {
    color: #2878c8;
}

.global-nav__list a.is-current:not(.global-nav__contact)::after {
    width: 100%;
}

.global-nav__contact.is-current {
    background-color: #2878c8;
}

.site-brand {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    color: #202733;
}

.site-brand__top {
    display: flex;
    align-items: baseline;
    gap: 14px;
    line-height: 1;
}

.site-brand__name {
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .04em;
}

.site-brand__tag {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    color: #7a828c;
}

.site-brand__sub {
    display: block;
    margin-top: -10px;
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: .16em;
    color: #202733;
}

.site-brand__initial {
    color: #d22;
    font-weight: 700;
}

.menu-toggle {
    display: none;
}

@media screen and (min-width: 721px) {

    .global-nav__list a {
        position: relative;
        transition: color .3s ease;
    }

    .global-nav__list a:not(.global-nav__contact)::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -6px;
        width: 0;
        height: 1px;
        background: #2878c8;
        transform: translateX(-50%);
        transition: width .3s ease;
    }

    .global-nav__list a:not(.global-nav__contact):hover {
        color: #2878c8;
    }

    .global-nav__list a:not(.global-nav__contact):hover::after {
        width: 100%;
    }

    .global-nav__contact {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0 30px;
        transition:
        background-color .3s ease,
        transform .3s ease;
    }

    .global-nav__contact:hover {
        background-color: #2878c8;
        transform: none;
    }
    
    .global-nav,
    .global-nav__list,
    .global-nav__list > li:last-child {
        height: 100%;
    }

    .global-nav__list > li:last-child {
        display: flex;
        align-items: stretch;
    }

    /* 以下、今までのCSS */
    .global-nav__list a {
        position: relative;
        transition: color .3s ease;
    }

}

@media screen and (max-width: 720px) {

    .site-header__inner {
        position: relative;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 8px;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: #202733;
        transition:
            transform .3s ease,
            opacity .3s ease;
    }

    .global-nav {
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        z-index: 100;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);

        background: #fff;
        border-top: 1px solid #dfe6ed;
        border-bottom: 1px solid #dfe6ed;

        transition:
            opacity .3s ease,
            transform .3s ease,
            visibility .3s ease;
    }

    .global-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .global-nav__list {
        display: block;
        margin: 0;
        padding: 10px 20px 20px;
    }

    .global-nav__list li {
        display: block;
        border-bottom: 1px solid #e6e9ec;

        opacity: 0;
        transform: translateY(-8px);

        transition:
            opacity .35s ease,
            transform .35s ease;
    }

    .global-nav__list li:last-child {
        border-bottom: 0;
        margin-top: 12px;
    }

    .global-nav.is-open .global-nav__list li {
        opacity: 1;
        transform: translateY(0);
    }

    .global-nav.is-open .global-nav__list li:nth-child(1) {
        transition-delay: .05s;
    }

    .global-nav.is-open .global-nav__list li:nth-child(2) {
        transition-delay: .10s;
    }

    .global-nav.is-open .global-nav__list li:nth-child(3) {
        transition-delay: .15s;
    }

    .global-nav.is-open .global-nav__list li:nth-child(4) {
        transition-delay: .20s;
    }

    .global-nav.is-open .global-nav__list li:nth-child(5) {
        transition-delay: .25s;
    }

    .global-nav__list a {
        display: block;
        padding: 15px 4px;
        font-size: 15px;
    }

    .global-nav__contact {
        display: flex;
        color: #fff;
        background: #172b45;
    }

    .menu-toggle.is-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

}
/* ==================================================
   HERO
================================================== */
/* Critical hero typography: inline on purpose to prevent cache/override issues */
    @media (min-width: 901px) {
      .hero .hero__inner {
        display: block !important;
      }
      .hero .hero__copy {
        width: 100% !important;
        max-width: none !important;
      }
      .hero .hero__title {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: 44px !important;
        line-height: 1.45 !important;
        letter-spacing: .015em !important;
      }
      .hero .hero__title > span {
        display: block !important;
        white-space: nowrap !important;
      }
    }
    @media (max-width: 900px) {
      .hero .hero__title > span {
        white-space: normal !important;
      }
    }

.hero{
  overflow:hidden;
  min-height:620px;
  background: -webkit-linear-gradient(20deg, #edf3f7 0%, #dfeaf3 48%, #c8dceb 100%);
  background: -o-linear-gradient(20deg, #edf3f7 0%, #dfeaf3 48%, #c8dceb 100%);
  background: linear-gradient(110deg, #edf3f7 0%, #dfeaf3 48%, #c8dceb 100%);;
  border-bottom:1px solid var(--line)
}
.hero__inner{
    position:relative;
    min-height:620px;
    display:grid;
    grid-template-columns:minmax(0,55%) minmax(340px,45%);
    align-items:center;
    gap:40px
}
.hero__copy{position:relative;z-index:2;padding:88px 0 92px}
.hero__title{margin:0;font-size:clamp(34px,3.25vw,50px);line-height:1.45;letter-spacing:.015em;font-weight:700}
.hero__lead{margin:30px 0 0;color:#4c5661;font-size:16px;line-height:2}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.c-button{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;border:1px solid transparent;font-size:14px;font-weight:700;transition:opacity .2s ease}
.c-button:hover{opacity:.78}
.c-button--primary{color:#fff;background:var(--navy)}
.c-button--outline{color:var(--ink);background:rgba(255,255,255,.78);border-color:#99a6b3}

.hero__visual {
    position: absolute;
    top: 0;
    right: calc((1024px - 100vw) / 2);
    width: 100vw;
    height: 620px;
    overflow: hidden;

    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.15) 25%,
        #000 45%,
        #000 100%
    );

    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,.15) 25%,
        #000 45%,
        #000 100%
    );
}
.hero__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 35%, rgba(40,120,200,.18), transparent 28%),
        radial-gradient(circle at 45% 72%, rgba(23,43,69,.10), transparent 34%);
    filter: blur(10px);
}
.hero__grid {
    position: absolute;
    inset: -60% -25% -60% -25%;
    opacity: .48;
    background-image:
        linear-gradient(rgba(61,104,157,.22) 1px, transparent 1px),
        linear-gradient(90deg,rgba(61,104,157,.22) 1px, transparent 1px);
    background-size: 86px 86px;
    transform: rotate(-18deg);
    animation: heroGridMove 18s ease-in-out infinite alternate;
}
.hero__panel {
    position: absolute;
    border: 1px solid rgba(49,95,159,.30);
    background: rgba(255,255,255,.58);
    backdrop-filter: blur(3px);
}

.hero__panel--a {
    width: 390px;
    height: 230px;
    top: 92px;
    right: 8%;
    transform: rotate(-8deg);
}

.hero__panel--b {
    width: 300px;
    height: 185px;
    right: 25%;
    bottom: 65px;
    transform: rotate(9deg);
}
.hero__node {
    position: absolute;
    width: 11px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 11px rgba(49,95,159,.10);
}
.hero__node--1{
    top:22%;
    right:23%
}
.hero__node--2{
    top:53%;
    right:8%;
    background: #d22;
    box-shadow: 0 0 0 11px rgba(210,34,34,.08);
    animation: heroNodeRedPulse 4.5s ease-in-out infinite;
    animation-delay: -1.5s;    
}
.hero__node--3{
    bottom:20%;
    right:42%
}
@keyframes heroNodeRedPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 11px rgba(210,34,34,.08);
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 18px rgba(210,34,34,.04);
    }
}


/* ========================================
   HERO MOTION
======================================== */

/* グリッドがゆっくり漂う */
.hero__grid {
    animation: heroGridMove 18s ease-in-out infinite alternate;
}

@keyframes heroGridMove {
    0% {
        transform: rotate(-18deg) translate3d(0, 0, 0);
    }
    100% {
        transform: rotate(-18deg) translate3d(-28px, 18px, 0);
    }
}


/* 白いパネルを別々の速度で浮かせる */
.hero__panel--a {
    animation: heroPanelA 9s ease-in-out infinite alternate;
}

.hero__panel--b {
    animation: heroPanelB 11s ease-in-out infinite alternate;
}

@keyframes heroPanelA {
    0% {
        transform: rotate(-8deg) translate3d(0, 0, 0);
    }
    100% {
        transform: rotate(-6deg) translate3d(-14px, 12px, 0);
    }
}

@keyframes heroPanelB {
    0% {
        transform: rotate(9deg) translate3d(0, 0, 0);
    }
    100% {
        transform: rotate(7deg) translate3d(16px, -12px, 0);
    }
}


/* 青いノードが静かに呼吸する */
.hero__node {
    animation: heroNodePulse 4.5s ease-in-out infinite;
}

.hero__node--2 {
    animation-delay: -1.5s;
}

.hero__node--3 {
    animation-delay: -3s;
}

@keyframes heroNodePulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 11px rgba(49,95,159,.08);
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 18px rgba(49,95,159,.04);
    }
}


/* 動きを減らす設定の人にはアニメーションさせない */
@media (prefers-reduced-motion: reduce) {
    .hero__grid,
    .hero__panel,
    .hero__node {
        animation: none !important;
    }
}


/* ==================================================
   OUR APPROACH
================================================== */
.approach{padding:112px 0 126px;background:#fff}
.approach__inner{text-align:center}
.section-title__en{margin:0 0 0px;color:var(--blue);font-size:13px;font-weight:700;letter-spacing:.14em}
.section-title__ja{margin:0;font-size:36px;line-height:1.5;letter-spacing:.02em}
.approach__note{max-width:760px;margin:34px auto 0;color:#8b3f3f;font-size:14px}
.approach__flow{display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:center;gap:0;margin-top:70px}
.approach__item{min-width:0}
.approach__icon{width:92px;height:92px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:#f2f6fa;border:1px solid #d9e3ec;color:var(--blue);font-size:32px}
.approach__item h3{margin:0;font-size:18px}
.approach__arrow{color:#7d8a98;font-size:28px}

@media(max-width:900px){
  .site-brand__tag{display:none}
  .global-nav__list{gap:18px}
  .hero__inner{grid-template-columns:1fr;min-height:520px}
  .hero__copy{width:min(690px,80%);padding:76px 0 84px}
  .hero__visual{right:-280px;width:720px;opacity:.58}
}
@media(max-width:720px){
  .l-container{width:min(calc(100% - 32px),var(--content-width))}
  .site-header{height:64px}
  .hero,.hero__inner{min-height:auto}
  .hero__copy{width:100%;padding:64px 0 68px}
  .hero__title{font-size:clamp(29px,8vw,40px);line-height:1.55}
  .hero__lead{font-size:14px}.hero__lead br{display:none}
  .hero__visual{right:-440px;opacity:.35}
  .hero__actions{display:grid;grid-template-columns:1fr}
  .approach{padding:80px 0 90px}
  .section-title__ja{font-size:30px}
  .approach__flow{grid-template-columns:1fr;gap:28px;margin-top:52px}
  .approach__arrow{transform:rotate(90deg)}
}

.approach__subheading {
    margin: 0 0 28px;
    font-size: 26px;
    line-height: 1.6;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--ink);
}

.approach p {
    font-size: 18px;
    line-height: 1.9;
}

.approach__flow {
    display: grid;
    grid-template-columns: 1fr 60px 1fr 60px 1fr;
    align-items: start;
    margin-top: 70px;
    text-align: center;
}

.approach__icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #f1f3f5;
}

.approach__icon img {
    width: 90px;
    height: auto;
}

.approach__step h3 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
}

.approach__step p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
}

.approach__arrow {
    padding-top: 38px;
    font-size: 30px;
    font-weight: 300;
}


/* ==================================================
   WEB SOLUTIONS / WEB FUNCTIONS
================================================== */
.web-function {
    padding: 100px 0;
    background: #f7f9fb;
}

.web-function__intro {
    margin: 30px auto 50px;
    text-align: center;
}

.web-function__intro p {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.9;
}

.web-function__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.web-function__item {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 28px;
    align-items: center;
    padding: 18px;
    background: #fff;
    border: 1px solid #dfe4e8;
    border-radius: 6px;
}

.web-function__image {
    border: 1px solid #dfe3e7;
    overflow: hidden;
    box-sizing: border-box;
}

.web-function__image img {
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    display: block;
}

.web-function__body h3 {
    margin: 0 0 16px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
}

.web-function__body p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .web-function__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .web-function__item {
        grid-template-columns: 1fr;
    }

    .web-function__image img {
        height: auto;
    }
}


/* ==================================================
   COMMON SECTION TITLE
================================================== */
.section-title {
    margin: 0 0 50px;
    text-align: center;
}

.section-title__en {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .12em;
    color: #2878c8;
}

.section-title__ja {
    margin: 0;
    font-size: 36px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: .02em;
    color: #202733;
}


/* ==================================================
   WEB SERVICES
================================================== */
.web-service {
    padding: 100px 0;
    background: #fff;
}

.web-service__intro {
    margin: 0 0 50px;
    text-align: center;
}

.web-service__intro p {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.9;
}

.web-service__list {
    border: 1px solid #dfe4e8;
    border-radius: 6px;
    overflow: hidden;
}

.web-service__item {
    display: grid;
    grid-template-columns: 70px 250px 1fr;
    gap: 30px;
    align-items: center;
    padding: 30px 36px;
    border-bottom: 1px solid #dfe4e8;
}

.web-service__item:last-child {
    border-bottom: none;
}

.web-service__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.web-service__icon img {
    display: block;
    width: 48px;
    height: 48px;
}

.web-service__item h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
}

.web-service__text h4 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 700;
}

.web-service__text p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
}

@media (max-width: 800px) {
    .web-service__item {
        grid-template-columns: 50px 1fr;
    }

    .web-service__text {
        grid-column: 2;
    }
}



/* ==================================================
   CONTACT CTA
================================================== */
.contact-cta {
    width: 100%;
    padding: 55px 0;
    background: #f3f5f7;
}

.contact-cta__inner {
    display: grid;
    grid-template-columns: 110px 1fr 220px;
    gap: 40px;
    align-items: center;
}

.contact-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fff;
}

.contact-cta__icon img {
    width: 42px;
    height: 42px;
}

.contact-cta__text h2 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.5;
}

.contact-cta__text p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
}

.contact-cta__button a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: #202733;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.contact-cta__button a:hover {
    opacity: .8;
}


/* ==================================================
   COMMON HOVER EFFECTS
================================================== */
.hover-lift {
    transition: transform .3s ease, box-shadow .3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
}

.hover-lift-simple {
    transition: transform .3s ease;
}

.hover-lift-simple:hover {
    transform: translateY(-5px);
}

.web-service__item {
    transition: background-color .3s ease;
}

.web-service__item:hover {
    background-color: #f5f7f9;
}


.web-function__heading {
    margin: 0 0 18px;
}

.web-function__en {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .12em;
    color: #2878c8;
}

.web-function__ja {
    display: block;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.web-function__body p {
    font-size: 15px;
    line-height: 1.8;
}


/* ==================================================
   SPECIALTY
================================================== */
.specialty {
    padding: 100px 0;
    background: #fff;
}

.specialty__intro {
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}

.specialty__intro p {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.9;
}

.specialty__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px;
}

.specialty__item {
    padding: 36px 0 42px;
    border-top: 1px solid #d9dde1;
}

.specialty__item h3 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 20px;
    line-height: 1.5;
}

.specialty__en {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #2878c8;
}

.specialty__ja {
    padding-left: 10px;
    border-left: 1px solid #9aa1a8;
    font-size: 20px;
    font-weight: 700;
    color: #202733;
}

.specialty__item p {
    margin: 0;
    font-size: 16px;
    line-height: 1.9;
    color: #555d66;
}

@media (max-width: 700px) {
    .specialty__grid {
        grid-template-columns: 1fr;
    }

    .specialty__item h3 {
        display: block;
    }

    .specialty__en,
    .specialty__ja {
        display: block;
    }

    .specialty__ja {
        margin-top: 6px;
        padding-left: 0;
        border-left: none;
    }
}



/* ==================================================
   WORKS
================================================== */
.works {
    padding: 140px 0 150px;
    background: #172b45;
    color: #fff;
}

.works__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 55px 32px;
}

.works .section-title__ja {
    color: #fff;
}

.works__image {
    overflow: hidden;
    aspect-ratio: 16 / 7;
    background: #fff;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.works__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works__item h3 {
    margin: 16px 0 0;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 700;
}


/* 専門分野にも、長く。 */

.works-long {
    margin-top: 140px;
}

.works-long__title {
    margin-bottom: 55px;
    text-align: center;
}

.works-long__title h3 {
    margin: 0 0 20px;
    font-size: 28px;
    line-height: 1.5;
    font-weight: 700;
}

.works-long__title p {
    margin: 0;
    font-size: 18px;
    line-height: 1.9;
    color: rgba(255,255,255,.68);
}

.works-long__list {
    border-top: 1px solid rgba(255,255,255,.22);
}

.works-long__item {
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid rgba(255,255,255,.22);
}

.works-long__item h4 {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 700;
}

.works-long__item p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,.68);
    white-space: nowrap;
    text-align: left;
}

/* =========================================
   WORKS LONG / TABLET
========================================= */

@media screen and (min-width: 701px) and (max-width: 1100px) {

    .works-long__item {
        grid-template-columns: 44% 56%;
        gap: 24px;
    }

    .works-long__item p {
        white-space: normal;
        font-size: 15px;
        line-height: 1.7;
    }

}


/* SP */

@media (max-width: 700px) {

    .works__grid {
        grid-template-columns: 1fr;
    }

    .works-long {
        margin-top: 80px;
    }

    .works-long__item {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .works-long__item p {
        white-space: normal;
        font-size: 16px;
        line-height: 1.8;
    }
}



/* ==================================================
   FIELDS / SYSTEMS
================================================== */
.fields {
    padding: 110px 0;
    background: #fff;
}

.fields__title {
    margin-bottom: 65px;
    text-align: center;
}

.fields__title h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.5;
    font-weight: 700;
}

.fields__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px;
}

.fields__item {
    padding: 30px 0 45px;
    border-top: 1px solid #d9dde1;
}

.fields__item h3 {
    margin: 0 0 14px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
}

.fields__item p {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: #666;
}


/* 仕組みをつくる力 */

.systems {
    margin-top: 110px;
}

.systems__title {
    margin-bottom: 55px;
    text-align: center;
}

.systems__title h2 {
    margin: 0 0 18px;
    font-size: 28px;
    line-height: 1.5;
    font-weight: 700;
}

.systems__title p {
    margin: 0;
    font-size: 18px;
    line-height: 1.9;
    color: #666;
}

.systems__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
}

.systems__item {
    padding-top: 26px;
    border-top: 1px solid #d9dde1;
}

.systems__item h3 {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
}

.systems__item p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #777;
}


/* SP */

@media (max-width: 700px) {

    .fields__grid {
        grid-template-columns: 1fr;
    }

    .systems__grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }
}

@media (max-width: 480px) {

    .systems__grid {
        grid-template-columns: 1fr;
    }
}




/* ==================================================
   AI × WEB
================================================== */
.ai-web {
    position: relative;
    overflow: hidden;
    padding: 130px 0 140px;

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(40,120,200,.16) 0,
            rgba(40,120,200,.05) 28%,
            transparent 55%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(40,120,200,.10) 0,
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #edf5fa 18%,
            #edf5fa 82%,
            #fff 100%
        );
}

.ai-web__intro {
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}

.ai-web__intro p {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.9;
}

.ai-web__list {
    border-top: 1px solid #d9dde1;
}

.ai-web__item {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 60px;
    padding: 38px 0;
    border-bottom: 1px solid #d9dde1;
}

.ai-web__item h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 700;
}

.ai-web__text p {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.8;
    color: #555d66;
}

.ai-web__closing {
    margin-top: 100px;
    text-align: center;
}

.ai-web__closing h3 {
    margin: 0 0 18px;
    font-size: 28px;
    line-height: 1.5;
    font-weight: 700;
}

.ai-web__closing p {
    margin: 0 0 35px;
    font-size: 18px;
    line-height: 1.9;
}

.ai-web__button {
    display: inline-block;
    padding: 18px 38px;
    border: 1px solid #202733;
    color: #202733;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease;
}

.ai-web__button:hover {
    background: #202733;
    color: #fff;
}

@media (max-width: 700px) {
    .ai-web__item {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}



/* ==================================================
   PARTNER
================================================== */
.partner {
    padding: 110px 0;
    background: #f3f6f9;
}

.partner__intro {
    max-width: 860px;
    margin: 0 auto 55px;
    text-align: center;
}

.partner__intro p {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.9;
}

.partner__list {
    max-width: 850px;
    margin: 0 auto 55px;
    border: 1px solid #d9dde1;
    background: #fff;
}

.partner__item {
    position: relative;
    padding: 22px 30px 22px 58px;
    border-bottom: 1px solid #e3e6e9;
    font-size: 18px;
    line-height: 1.7;
    background: #fff;
}

.partner__item:last-child {
    border-bottom: none;
}

.partner__item::before {
    content: "•";
    position: absolute;
    left: 30px;
    top: 22px;
    font-size: 20px;
}

.partner__closing {
    margin: 0 0 32px;
    text-align: center;
    font-size: 18px;
    line-height: 1.9;
}

.partner__cta {
    text-align: center;
}

.partner__cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 35px;

    min-width: 330px;
    min-height: 72px;
    padding: 18px 35px;

    color: #fff;
    background: #172b45;
    border: 1px solid #172b45;

    font-size: 17px;
    font-weight: 700;
    text-decoration: none;

    transition: background-color .3s ease, border-color .3s ease;
}


.partner__cta a:hover {
    background: #2878c8;
    border-color: #2878c8;
}


/* ==================================================
   CONSULTATION
================================================== */
.consultation {
    padding: 110px 0 120px;
    background: #fff;
}

.consultation__ideas {
    margin: 0 auto 60px;
    text-align: center;
}

.consultation__ideas p {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.8;
    color: #555d66;
}

.consultation__message {
    text-align: center;
}

.consultation__message p {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.9;
    color: #555d66;
}

.consultation__message h3 {
    margin: 12px 0 18px;
    font-size: 24px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
}

.consultation__cta {
    margin-top: 55px;
    text-align: center;
}

.consultation__cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    min-width: 320px;
    padding: 20px 34px;
    background: #172b45;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .3s ease, transform .3s ease;
}

.consultation__cta a:hover {
    background: #2878c8;
    transform: translateY(-3px);
}




/* ==================================================
   FOOTER
================================================== */
.site-footer {
    padding: 85px 0 35px;
    background: #222;
    color: #fff;
}

.site-footer__main {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 100px;
    padding-bottom: 80px;
}

.site-footer__logo {
    margin: 0 0 20px;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .05em;
}

.site-footer__en {
    margin: 0 0 45px;
    font-size: 16px;
    letter-spacing: .04em;
    color: #aaa;
}

.site-footer__message {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    font-weight: 500;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    gap: 40px;
}

.site-footer__nav-group h2 {
    margin: 0 0 28px;
    font-size: 18px;
    font-weight: 700;
}

.site-footer__nav-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__nav-group li {
    margin-bottom: 20px;
}

.site-footer__nav-group a {
    color: #aaa;
    font-size: 15px;
    line-height: 1.6;
    text-decoration: none;
    transition: color .3s ease;
}

.site-footer__nav-group a:hover {
    color: #fff;
}


/* 下段 */

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 32px;
    border-top: 1px solid #555;
}

.site-footer__company {
    display: flex;
    gap: 35px;
    color: #aaa;
    font-size: 14px;
}

.site-footer__links {
    display: flex;
    align-items: center;
    gap: 22px;
}

.site-footer__links a {
    color: #aaa;
    font-size: 14px;
    text-decoration: none;
    transition: color .3s ease;
}

.site-footer__links a:hover {
    color: #fff;
}

.site-footer__separator {
    color: #666;
}

.site-footer__nav-group a {
    white-space: nowrap;
}


/* =========================================
   FOOTER / TABLET
========================================= */

@media screen and (min-width: 701px) and (max-width: 1100px) {

    .site-footer__main {
        grid-template-columns: 1fr;
        gap: 55px;
        padding-bottom: 60px;
    }

    .site-footer__brand {
        max-width: 520px;
    }

    .site-footer__nav {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    .site-footer__nav-group a {
        white-space: normal;
    }

    .site-footer__bottom {
        align-items: flex-start;
        gap: 30px;
    }

    .site-footer__company {
        flex-wrap: wrap;
        gap: 12px 30px;
    }

    .site-footer__links {
        flex-shrink: 0;
    }
}


/* SP */

@media (max-width: 700px) {

    .site-footer {
        padding: 65px 0 30px;
    }

    .site-footer__main {
        grid-template-columns: 1fr;
        gap: 60px;
        padding-bottom: 60px;
    }

    .site-footer__nav {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .site-footer__bottom,
    .site-footer__company {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .site-footer__bottom {
        gap: 25px;
    }
}



/* ==================================================
   PAGE TOP BUTTON
================================================== */
.page-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 100;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.25);
    background: #202733;
    color: #fff;
    font-size: 20px;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background-color .3s ease;
}

.page-top.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.page-top:hover {
    background: #2878c8;
    transform: translateY(-3px);
}


@media screen and (max-width: 767px) {

    .approach__flow {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .approach__step {
        width: 100%;
        max-width: 340px;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .approach__icon {
        margin: 0 auto;
    }

    .approach__step h3 {
        margin: 12px 0 8px;
    }

    .approach__step p {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        padding: 0;
        line-height: 1.8;
    }

    .approach__step p br {
        display: none;
    }

    .approach__arrow {
        width: 100%;
        margin: 20px 0;
        padding: 0;
        text-align: center;
        font-size: 0;
        line-height: 1;
        transform: none;
    }

    .approach__arrow::after {
        content: "↓";
        display: block;
        font-size: 28px;
        line-height: 1;
        text-align: center;
        color: #8799ab;
    }

}


@media screen and (max-width: 767px) {

    .contact-cta {
        padding: 50px 20px;
    }

    .contact-cta__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        width: 100%;
    }

    .contact-cta__icon {
        flex: none;
        margin: 0 auto;
    }

    .contact-cta__text {
        width: 100%;
        text-align: center;
    }

    .contact-cta__text h2 {
        margin: 0 0 12px;
        white-space: normal;
    }

    .contact-cta__text p {
        margin: 0;
        white-space: normal;
        line-height: 1.8;
    }

    .contact-cta__button {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        box-sizing: border-box;
        justify-content: center;
    }

}



/* ==================================================
   AI × HUMAN PROCESS
================================================== */
.ai-process {
    display: grid;
    grid-template-columns: 1fr 42px 1fr 42px 1fr 42px 1fr;
    align-items: center;
    gap: 18px;
    max-width: 1024px;
    margin: 60px auto 70px;
    padding: 34px 36px;
    background: #f4f8fc;
    border-radius: 10px;
}

.ai-process__item {
    text-align: center;
}

.ai-process__step {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .12em;
    color: #2878c8;
}

.ai-process__item h3 {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.ai-process__role {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    color: #202733;
}

.ai-process__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    background: #fff;
}

.ai-process__icon img {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: contain;
}

.ai-process__arrow {
    font-size: 30px;
    line-height: 1;
    text-align: center;
    color: #2878c8;
}
.ai-process__description {
    margin: 20px auto 0;
    font-size: 13px;
    line-height: 1.8;
    color: #59616b;
    
}


@media screen and (min-width: 768px) and (max-width: 1100px) {

    .ai-process {
        display: grid;
        grid-template-columns: 1fr 50px 1fr;
        gap: 40px 20px;
        margin: 50px 24px 60px;
        padding: 40px 30px;
    }

    .ai-process__item {
        width: 100%;
    }

    .ai-process__icon {
        width: 140px;
        height: 140px;
    }

    .ai-process__icon img {
        width: 100px;
        height: 100px;
    }

    /* STEP2とSTEP3の間は改行 */
    .ai-process__arrow:nth-child(4) {
        display: none;
    }

    /* STEP3を2段目左へ */
    .ai-process__item:nth-child(5) {
        grid-column: 1;
    }

    /* STEP3 → STEP4 */
    .ai-process__arrow:nth-child(6) {
        grid-column: 2;
    }

    .ai-process__item:nth-child(7) {
        grid-column: 3;
    }
}

@media screen and (max-width: 767px) {

    .ai-process {
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: none;
        margin: 40px 20px 50px;
        padding: 30px 20px;
        gap: 0;
        box-sizing: border-box;
    }

    .ai-process__item {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        text-align: center;
    }

    .ai-process__step {
        margin-bottom: 8px;
    }

    .ai-process__item h3 {
        margin: 0 0 6px;
        font-size: 20px;
        line-height: 1.5;
    }

    .ai-process__role {
        margin: 0 0 14px;
    }

    .ai-process__icon {
        width: 160px;
        height: 160px;
        margin: 0 auto;
    }

    .ai-process__icon img {
        width: 120px;
        height: 120px;
        object-fit: contain;
    }

    .ai-process__description {
        max-width: 300px;
        margin: 16px auto 0;
        font-size: 15px;
        line-height: 1.8;
    }

    .ai-process__description br {
        display: none;
    }

    .ai-process__arrow {
        width: 100%;
        margin: 18px 0;
        padding: 0;
        text-align: center;
        font-size: 0;
        line-height: 1;
        transform: none;
    }

    .ai-process__arrow::after {
        content: "↓";
        display: block;
        font-size: 28px;
        line-height: 1;
        text-align: center;
        color: #2878c8;
    }

}


/* ==================================================
   SCROLL REVEAL ANIMATION
================================================== */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 {
    transition-delay: .1s;
}

.reveal-delay-2 {
    transition-delay: .2s;
}

.reveal-delay-3 {
    transition-delay: .3s;
}

.reveal-delay-4 {
    transition-delay: .4s;
}


/* ==================================================
   NEWS
================================================== */
.news {
    padding: 100px 0;
    background: #fff;
}

.news__inner {
    max-width: 1024px;
    margin: 0 auto;
}

.news .section-heading {
    margin-bottom: 50px;
    text-align: center;
}

.news .section-heading__en {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .14em;
    color: #2878c8;
}

.news .section-heading h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.news__list {
    border-top: 1px solid #d9dde1;
}

.news__item {
    display: grid;
    grid-template-columns: 140px 1fr 30px;
    align-items: center;
    gap: 20px;
    padding: 24px 10px;
    border-bottom: 1px solid #d9dde1;
    color: #202733;
    text-decoration: none;
    transition: background-color .3s ease;
}

.news__item:hover {
    background: #f7f9fb;
}

.news__item time {
    font-size: 14px;
    color: #7a828c;
}

.news__title {
    font-size: 18px;
    line-height: 1.7;
}

.news__arrow {
    font-size: 20px;
    text-align: right;
    color: #2878c8;
    transition: transform .3s ease;
}

.news__item:hover .news__arrow {
    transform: translateX(4px);
}

.news__more {
    margin-top: 28px;
    text-align: right;
}

.news__more a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #202733;
    text-decoration: none;
}

.news__more a span {
    color: #2878c8;
    transition: transform .3s ease;
}

.news__more a:hover span {
    transform: translateX(4px);
}


@media screen and (max-width: 767px) {

    .news {
        padding: 70px 20px;
    }

    .news .section-heading {
        margin-bottom: 35px;
    }

    .news .section-heading h2 {
        font-size: 28px;
    }

    .news__item {
        grid-template-columns: 1fr 24px;
        gap: 6px 10px;
        padding: 20px 4px;
    }

    .news__item time {
        grid-column: 1;
        font-size: 13px;
    }

    .news__title {
        grid-column: 1;
        font-size: 16px;
        line-height: 1.7;
    }

    .news__arrow {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
    }

    .news__more {
        margin-top: 24px;
    }

}



/* ==================================================
   PAGE WORKS
================================================== */
.works-page-hero {
    position: relative;
    overflow: hidden;
    padding: 95px 0;
    background: #f7faff;
}

.works-page-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.works-page-hero__en {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #2878c8;
}

.works-page-hero h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1.4;
    font-weight: 700;
    color: #202733;
}


/* TOPと同じ空気感の背景 */

.works-page-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.works-page-hero__grid {
    position: absolute;
    inset: -80px -40px;
    opacity: .5;
    background-image:
        linear-gradient(rgba(40,120,200,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40,120,200,.09) 1px, transparent 1px);
    background-size: 90px 90px;
    transform: rotate(-8deg);
}

.works-page-hero__panel {
    position: absolute;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(40,120,200,.18);
}

.works-page-hero__panel--a {
    width: 280px;
    height: 115px;
    right: 12%;
    top: 35px;
    transform: rotate(-5deg);
}

.works-page-hero__panel--b {
    width: 190px;
    height: 90px;
    left: 8%;
    bottom: -30px;
    transform: rotate(7deg);
}

.works-page-hero__node {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2878c8;
    box-shadow: 0 0 0 9px rgba(40,120,200,.08);
}

.works-page-hero__node--1 {
    right: 18%;
    top: 58px;
}

.works-page-hero__node--2 {
    left: 19%;
    bottom: 38px;
}

.works-page-hero {
    padding: 90px 0 80px;
    text-align: center;
}

.works-page-hero .section-title {
    margin-bottom: 35px;
}

.works-page-hero__intro {
    max-width: 760px;
    margin: 0 auto 60px;
}

.works-page-hero__intro h2 {
    margin: 0 0 28px;
    font-size: 28px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
    text-align: center;
}

.works-page-hero__intro p {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #59616b;
    text-align: center;
}

.works-page-latest {
    padding: 20px 0 110px;
}

.works-page-latest .section-title {
    margin-bottom: 60px;
}

.works-page-project {
    display: grid;
    grid-template-columns:
        calc((100vw - 1024px) / 2 + 512px)
        512px;
    align-items: center;
    gap: 0;
    margin-bottom: 110px;
}

.works-page-project__image {
    width: 100%;
    overflow: hidden;
    background: #f3f4f5;
}

.works-page-project__image img {
    display: block;
    width: 100%;
    height: auto;
}

.works-page-project__content {
    padding-left: 70px;
    padding-right: 30px;
}

.works-page-project--image-right {
    width: 100vw;
    grid-template-columns:
        calc((100vw - 1024px) / 2 + 512px)
        calc((100vw - 1024px) / 2 + 512px);
}

.works-page-project--image-right .works-page-project__content {
    padding-left: max(30px, calc((100vw - 1024px) / 2));
    padding-right: 70px;
}

.works-page-project--image-right .works-page-project__image {
    grid-column: 2;
    width: 100%;
    margin: 0;
}

.works-page-project--image-right .works-page-project__image img {
    width: 100%;
    height: auto;
    display: block;
}

.works-system {
    padding: 120px 0;
}

.works-system__heading {
    margin-bottom: 90px;
    text-align: center;
}

.works-system__heading h2 {
    margin: 0 0 30px;
    font-size: 36px;
    line-height: 1.4;
    font-weight: 500;
}

.works-system__lead {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.8;
    font-weight: 700;
}

.works-system__intro {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    color: #68717b;
}

.works-system__item + .works-system__item {
    margin-top: 80px;
}
/* 健康保険料シミュレーション */

.works-system__item {
    display: grid;
    grid-template-columns: 480px 1fr;
    gap: 70px;
    align-items: center;
}

.works-system__image {
    overflow: hidden;
    background: #f3f4f5;
    border: 1px solid #e1e5e9;
}

.works-system__image img {
    display: block;
    width: 100%;
    height: auto;
}

.works-system__content h3 {
    margin: 0 0 24px;
    font-size: 26px;
    line-height: 1.5;
    font-weight: 700;
}

.works-system__content h4 {
    margin: 0 0 30px;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 700;
}

.works-system__content p {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.works-longterm {
    padding: 120px 0;
    background: #f7f9fb;
}

.works-longterm__heading {
    margin-bottom: 65px;
    text-align: center;
}

.works-longterm__heading h2 {
    margin: 0 0 25px;
    font-size: 36px;
    line-height: 1.4;
    font-weight: 500;
}

.works-longterm__heading p {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.works-longterm__list {
    border-top: 1px solid #dfe4e8;
}

.works-longterm__item {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 60px;
    align-items: center;
    padding: 32px 20px;
    border-bottom: 1px solid #dfe4e8;
}

.works-longterm__item h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 700;
}

.works-longterm__item p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    color: #68717b;
}

.works-fields {
    padding: 120px 0;
    background: #fff;
}

.works-fields__heading {
    margin-bottom: 65px;
    text-align: center;
}

.works-fields__heading h2 {
    margin: 0;
    font-size: 36px;
    line-height: 1.4;
    font-weight: 500;
}

.works-fields__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
/*    border-top: 1px solid #dfe4e8;*/
/*    border-left: 1px solid #dfe4e8;*/
    gap: 0 30px;
}

.works-fields__item {
    display: flex;
    align-items: center;
    min-height: 110px;
    padding: 28px 35px;
/*    border-right: 1px solid #dfe4e8;*/
    border-top: 1px solid #dfe4e8;
}

.works-fields__item h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
}

.works-fields__item {
    display: block;
}

.works-fields__item p {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.8;
    color: #68717b;
}
.works-contact {
    padding: 110px 0;
    background: #f7f9fb;
}

.works-contact__inner {
    text-align: center;
}

.works-contact__inner h2 {
    margin: 0 0 28px;
    font-size: 34px;
    line-height: 1.5;
    font-weight: 500;
    color: #202733;
}

.works-contact__inner p {
    margin: 0 0 40px;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.works-contact__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    min-width: 280px;
    padding: 18px 28px;
    color: #fff;
    background: #172b45;
    text-decoration: none;
    transition:
        background-color .3s ease,
        transform .3s ease;
}

.works-contact__button:hover {
    background: #2878c8;
    transform: translateY(-2px);
}


@media screen and (max-width: 720px) {

    .works-page-hero {
        padding: 70px 0;
    }

    .works-page-hero h1 {
        font-size: 32px;
    }

    .works-page-hero__panel--a {
        width: 170px;
        height: 80px;
        right: -40px;
    }

    .works-page-hero__panel--b {
        width: 130px;
        height: 65px;
        left: -35px;
    }

    .works-page-hero {
        padding: 60px 0 55px;
    }

    .works-page-hero__intro h2 {
        font-size: 22px;
        line-height: 1.6;
    }

    .works-page-hero__intro p {
        font-size: 16px;
        line-height: 1.9;
        text-align: left;
    }

    .works-page-hero__intro p br {
        display: none;
    }

    .works-page-latest {
        padding: 10px 0 80px;
    }

    .works-page-latest .section-title {
        margin-bottom: 40px;
    }
    
    .works-page-project {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-bottom: 70px;
    }

    .works-page-project__content h3 {
        font-size: 22px;
    }

    .works-page-project__content h4 {
        font-size: 17px;
    }

    .works-page-project__content p {
        font-size: 16px;
    }
    
    .works-page-project,
    .works-page-project--image-right {
        grid-template-columns: 1fr;
    }

    .works-page-project--image-right .works-page-project__content {
        padding: 0 20px;
    }

    .works-page-project--image-right .works-page-project__image {
        grid-column: auto;
    }
    
    .works-system {
        padding: 80px 0;
    }

    .works-system__heading {
        margin-bottom: 55px;
    }

    .works-system__heading h2 {
        font-size: 30px;
        margin-bottom: 22px;
    }

    .works-system__lead {
        font-size: 18px;
    }

    .works-system__intro {
        font-size: 16px;
    }

    .works-system__item {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .works-system__content h3 {
        font-size: 23px;
    }
    
    .works-longterm {
        padding: 80px 0;
    }

    .works-longterm__heading {
        margin-bottom: 45px;
    }

    .works-longterm__heading h2 {
        font-size: 30px;
    }

    .works-longterm__heading p {
        font-size: 16px;
    }

    .works-longterm__heading p br {
        display: none;
    }

    .works-longterm__item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 25px 5px;
    }

    .works-longterm__item h3 {
        font-size: 17px;
    }

    .works-longterm__item p {
        font-size: 16px;
    }
    
    .works-fields {
        padding: 80px 0;
    }

    .works-fields__heading {
        margin-bottom: 45px;
    }

    .works-fields__heading h2 {
        font-size: 30px;
    }

    .works-fields__grid {
        grid-template-columns: 1fr;
    }

    .works-fields__item {
        min-height: 80px;
        padding: 22px 25px;
    }

    .works-fields__item h3 {
        font-size: 17px;
    }
    .works-contact {
        padding: 80px 0;
    }

    .works-contact__inner h2 {
        font-size: 28px;
    }

    .works-contact__inner p {
        font-size: 16px;
    }

    .works-contact__inner p br {
        display: none;
    }
}


/* ==================================================
   PAGE AI
================================================== */
.ai-page-hero {
    position: relative;
    overflow: hidden;
    padding: 95px 0;
    background: #f7faff;
}

.ai-page-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
}

.ai-page-hero__en {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #2878c8;
}

.ai-page-hero h1 {
    margin: 0;
    font-size: 40px;
    line-height: 1.4;
    font-weight: 700;
    color: #202733;
}

.ai-page-hero__visual {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.ai-page-hero__grid {
    position: absolute;
    inset: -80px -40px;
    opacity: .5;
    background-image:
        linear-gradient(rgba(40,120,200,.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40,120,200,.09) 1px, transparent 1px);
    background-size: 90px 90px;
    transform: rotate(-8deg);
}

.ai-page-hero__panel {
    position: absolute;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(40,120,200,.18);
}

.ai-page-hero__panel--a {
    width: 280px;
    height: 115px;
    right: 12%;
    top: 35px;
    transform: rotate(-5deg);
}

.ai-page-hero__panel--b {
    width: 190px;
    height: 90px;
    left: 8%;
    bottom: -30px;
    transform: rotate(7deg);
}

.ai-page-hero__node {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #2878c8;
    box-shadow: 0 0 0 9px rgba(40,120,200,.08);
}

.ai-page-hero__node--1 {
    right: 18%;
    top: 58px;
}

.ai-page-hero__node--2 {
    left: 19%;
    bottom: 38px;
}

.ai-intro {
    padding: 95px 0 120px;
    background: #fff;
}

.ai-intro__top {
    margin-bottom: 115px;
    text-align: center;
}

.ai-intro__top h2 {
    margin: 0 0 24px;
    font-size: 36px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.ai-intro__top p {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.ai-intro__content {
    text-align: center;
}

.ai-intro__content h3 {
    margin: 0 0 30px;
    font-size: 30px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.ai-intro__text {
    margin: 0 0 45px;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.ai-intro__box {
    max-width: 900px;
    margin: 0 auto 65px;
    padding: 55px 40px;
    background: #f7f7f7;
}

.ai-intro__box-title {
    margin-bottom: 18px;
    font-size: 38px;
    line-height: 1;
    font-weight: 700;
    color: #202733;
}

.ai-intro__box-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 45px;
}

.ai-intro__box-list span {
    font-size: 16px;
    line-height: 1.6;
    color: #4f5964;
}

.ai-intro__message p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.8;
    color: #68717b;
}

.ai-intro__message strong {
    display: block;
    font-size: 20px;
    line-height: 1.8;
    font-weight: 700;
    color: #202733;
}
.ai-intro__skill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 110px;
}

.ai-intro__skill img {
    width: 48px;
    height: 48px;
}

.ai-intro__skill span {
    font-size: 15px;
}

.ai-options {
    padding: 120px 0;
    border-top: 1px solid #e6e9ec;
    background: #fff;
}

.ai-options__heading {
    margin-bottom: 65px;
    text-align: center;
}

.ai-options__heading h2 {
    margin: 0 0 30px;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.ai-options__heading p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.ai-options__samples {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 55px;
}

.ai-options__sample {
    display: block;
}

.ai-options__sample img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #d9dee4;
}

.ai-options__sample p {
    margin: 18px 0 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.7;
    color: #68717b;
}

.ai-options__sample p span {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #2878c8;
}
.ai-options__message {
    text-align: center;
}









.ai-update {
    padding: 120px 0;
    background: #f7f7f7;
}

.ai-update__inner {
    width: 100%;
    text-align: center;
}

.ai-update__title {
    margin: 0 0 30px;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.ai-update__lead {
    margin: 0 0 60px;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}


/* 4つの項目 */

.ai-update__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 65px;
}

.ai-update__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.ai-update__item img {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 0 18px;
}

.ai-update__item p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 500;
    color: #202733;
}


/* 下の説明 */

.ai-update__text {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.ai-human {
    padding: 125px 0;
    background: #fff;
}

.ai-human__inner {
    text-align: center;
}

.ai-human h2 {
    margin: 0 0 35px;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.ai-human__lead {
    margin: 0 0 70px;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}


/* 人が考える流れ */

.ai-human__flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    max-width: 850px;
    margin: 0 auto 65px;
}

.ai-human__flow::before {
    content: "";
    position: absolute;
    top: 29px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: #b9c1ca;
}

.ai-human__step {
    position: relative;
    z-index: 1;
    text-align: center;
}

.ai-human__circle {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border: 1px solid #8f99a4;
    border-radius: 50%;
    background: #fff;
}

.ai-human__step p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    color: #202733;
}

.ai-human__message {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 700;
    color: #202733;
}

.ai-experience {
    padding: 120px 0;
    background: #fff;
}

.ai-experience__inner {
    text-align: center;
}

.ai-experience h2 {
    margin: 0 0 45px;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.ai-experience__lead {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.8;
    color: #68717b;
}

.ai-experience__message {
    margin: 0;
    font-size: 20px;
    line-height: 1.8;
    font-weight: 700;
    color: #202733;
}

.ai-cta {
    width: 100%;
    padding: 90px 0;
    background: #f4f4f4;
}





.ai-cta h2 {
    margin: 0 0 25px;
    font-size: 30px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.ai-cta p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    color: #68717b;
}





.about-policy {
    padding: 110px 0 120px;
    background: #f7f7f7;
}

.about-policy__heading {
    text-align: center;
}

.about-policy__heading h2 {
    margin: 0 0 35px;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.about-policy__heading > p {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.about-policy__items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 45px;
    max-width: 900px;
    margin: 65px auto 0;
}

.about-policy__item {
    text-align: center;
}

.about-policy__icon {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    border: 1px solid #aeb6bf;
    border-radius: 50%;
}

.about-policy__item h3 {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
}

.about-policy__item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #7a828c;
}

.about-history {
    padding: 120px 0;
    background: #fff;
}

.about-history__heading {
    margin-bottom: 70px;
    text-align: center;
}

.about-history__en {
    margin: 0 0 18px;
    font-size: 13px;
    color: #7a828c;
}

.about-history__heading h2 {
    margin: 0 0 25px;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.about-history__heading > p:last-child {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.about-history__timeline {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding-left: 42px;
}

.about-history__timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 5px;
    width: 1px;
    background: #cfd5db;
}

.about-history__item {
    position: relative;
    padding: 0 0 48px;
}

.about-history__item:last-child {
    padding-bottom: 0;
}

.about-history__item::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -42px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #202733;
}

.about-history__year {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 500;
    color: #68717b;
}

.about-history__item h3 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
}

.about-history__item > p:last-child {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #68717b;
}

.about-fields {
    width: 100%;
    padding: 120px 0;
    background: #f7f7f7;
}


/* 見出し */

.about-fields__heading {
    text-align: center;
}

.about-fields__en {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.6;
    color: #7a828c;
}

.about-fields__heading h2 {
    margin: 0 0 30px;
    font-size: 32px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
}

.about-fields__lead {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}


/* 6つの分野 */

.about-fields__list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    margin: 65px 0 35px;
}

.about-fields__item {
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: center;
}

.about-fields__item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid #d9dee4;
}

.about-fields__item p {
    margin: 14px 0 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    color: #202733;
}


/* 最後の文章 */

.about-fields__message {
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 500;
    color: #202733;
}

.about-future {
    width: 100%;
    padding: 120px 0;
    background: #fff;
}

.about-future__heading {
    text-align: center;
}

.about-future__en {
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.6;
    color: #7a828c;
}

.about-future__heading h2 {
    margin: 0 0 35px;
    font-size: 32px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
}

.about-future__lead {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.about-future__items {
    max-width: 760px;
    margin: 75px auto 0;
}

.about-future__item {
    padding: 50px 20px;
    border-top: 1px solid #d9dee4;
    text-align: center;
}

.about-future__item:last-child {
    border-bottom: 1px solid #d9dee4;
}

.about-future__item h3 {
    margin: 0 0 20px;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
}

.about-future__item p {
    margin: 0;
    font-size: 16px;
    line-height: 2;
    color: #68717b;
}

.about-company {
    width: 100%;
    padding: 110px 0;
    background: #f7f7f7;
    margin-bottom: 80px;
}

.about-company__title {
    margin: 0 0 55px;
    text-align: center;
    font-size: 32px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.about-company__table {
    max-width: 820px;
    margin: 0 auto;
}

.about-company__table > div {
    display: grid;
    grid-template-columns: 170px 1fr;
    border-bottom: 1px solid #d9dee4;
}

.about-company__table > div:first-child {
    border-top: 1px solid #d9dee4;
}

.about-company__table dt,
.about-company__table dd {
    margin: 0;
    padding: 20px 15px;
    font-size: 15px;
    line-height: 1.8;
}

.about-company__table dt {
    font-weight: 700;
    color: #202733;
}

.about-company__table dd {
    color: #555f69;
}



.common-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.common-cta__text {
    text-align: left;
}

.common-cta__text h2 {
    margin: 0 0 20px;
    font-size: 30px;
    line-height: 1.5;
    font-weight: 700;
    color: #202733;
}

.common-cta__text p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    color: #68717b;
}

.common-cta__button {
    flex: 0 0 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    min-height: 88px;
    padding: 20px 30px;
    background: #202020;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .3s ease, transform .3s ease;
}

.common-cta__button:hover {
    background: #2878c8;
    transform: translateY(-2px);
}


/* ========================================
   NEWS
======================================== */

.news-list {
    width: 100%;
    padding: 110px 0 130px;
    background: #fff;
}

.news-list__inner {
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid #d9dee4;
}

.news-list__item {
    margin: 0;
    border-bottom: 1px solid #d9dee4;
}

.news-list__item a {
    display: grid;
    grid-template-columns: 140px 1fr 30px;
    align-items: center;
    gap: 30px;
    padding: 30px 10px;
    color: #202733;
    text-decoration: none;
    transition: background-color .3s ease;
}

.news-list__item a:hover {
    background: #f7f9fb;
}

.news-list__item time {
    font-size: 14px;
    line-height: 1.6;
    color: #7a828c;
}

.news-list__item h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 500;
}

.news-list__item a > span {
    font-size: 18px;
    color: #2878c8;
    transition: transform .3s ease;
}

.news-list__item a:hover > span {
    transform: translateX(4px);
}


/* ========================================
   CONTACT
======================================== */

.contact-form {
    width: 100%;
    padding: 110px 0 130px;
    background: #fff;
}

.contact-form__intro {
    margin: 0 0 65px;
    text-align: center;
}

.contact-form__intro p {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.contact-form__body {
    max-width: 820px;
    margin: 0 auto;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 35px;
    align-items: start;
    padding: 25px 0;
    border-bottom: 1px solid #d9dee4;
}

.contact-form__row:first-child {
    border-top: 1px solid #d9dee4;
}

.contact-form__row label {
    padding-top: 13px;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
}

.contact-form__row label span {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    background: #2878c8;
    color: #fff;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 500;
}

.contact-form__row .wpcf7-form-control-wrap {
    width: 100%;
}

.contact-form__row input,
.contact-form__row textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #cfd5db;
    border-radius: 0;
    background: #fff;
    color: #202733;
    font: inherit;
    font-size: 16px;
    transition: border-color .25s ease, background-color .25s ease, outline-color .25s ease;
}

.contact-form__row textarea {
    resize: vertical;
    line-height: 1.8;
}

.contact-form__row input:focus,
.contact-form__row textarea:focus {
    border-color: #2878c8;
    outline: 2px solid rgba(40, 120, 200, .12);
    outline-offset: 0;
}

.contact-form__submit {
    margin-top: 55px;
    text-align: center;
}

.contact-form__submit input[type="submit"],
.contact-form__submit input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    min-width: 280px;
    min-height: 72px;
    padding: 18px 35px;
    border: 0;
    background: #202020;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .3s ease;
}

.contact-form__submit input[type="submit"]:hover,
.contact-form__submit input[type="button"]:hover {
    background: #2878c8;
}

.contact-form__row input:hover,
.contact-form__row textarea:hover {
    border-color: #8bb8e3;
    background-color: #fafcff;
}

.contact-confirm .contact-form__submit {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.contact-confirm .contact-form__submit input {
    min-width: 220px;
}

.contact-confirm .contact-form__row {
    align-items: center;
}

.contact-confirm .contact-form__row p,
.contact-confirm .contact-confirm__value {
    margin: 0;
    padding: 0;
}

.contact-confirm .contact-form__row > div {
    white-space: pre-wrap;
}

@media screen and (max-width: 720px) {
    .ai-page-hero {
        padding: 70px 0;
    }

    .ai-page-hero h1 {
        font-size: 32px;
    }

    .ai-page-hero__panel--a {
        width: 170px;
        height: 80px;
        right: -40px;
    }

    .ai-page-hero__panel--b {
        width: 130px;
        height: 65px;
        left: -35px;
    }
    
    .ai-intro {
        padding: 70px 0 85px;
    }

    .ai-intro__top {
        margin-bottom: 75px;
    }

    .ai-intro__top h2 {
        font-size: 28px;
    }

    .ai-intro__top p,
    .ai-intro__text {
        font-size: 16px;
    }

    .ai-intro__content h3 {
        font-size: 25px;
    }

    .ai-intro__text br {
        display: none;
    }

    .ai-intro__box {
        padding: 40px 20px;
        margin-bottom: 50px;
    }

    .ai-intro__box-list {
        gap: 14px 24px;
    }

    .ai-intro__message strong {
        font-size: 18px;
    }
    
    .ai-options {
        padding: 80px 0;
    }

    .ai-options__heading h2 {
        font-size: 27px;
    }

    .ai-options__heading p {
        font-size: 16px;
    }

    .ai-options__heading p br {
        display: none;
    }

    .ai-options__samples {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ai-options__sample {
        height: 160px;
    }

    .ai-options__message {
        font-size: 17px;
    }
    
    

    

    

    
    
    .ai-update {
        padding: 80px 0;
    }

    .ai-update__title {
        font-size: 27px;
    }

    .ai-update__lead {
        margin-bottom: 45px;
        font-size: 16px;
    }

    .ai-update__items {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
        margin-bottom: 50px;
    }

    .ai-update__item img {
        width: 52px;
        height: 52px;
        margin-bottom: 14px;
    }

    .ai-update__item p {
        font-size: 15px;
    }

    .ai-update__text {
        font-size: 16px;
    }

    .ai-update__text br {
        display: none;
    }
    
    .ai-human {
        padding: 85px 0;
    }

    .ai-human h2 {
        font-size: 27px;
    }

    .ai-human__lead {
        margin-bottom: 55px;
        font-size: 16px;
    }

    .ai-human__lead br {
        display: none;
    }

    .ai-human__flow {
        grid-template-columns: 1fr;
        gap: 28px;
        max-width: 260px;
        margin-bottom: 55px;
    }

    .ai-human__flow::before {
        top: 20px;
        bottom: 20px;
        left: 29px;
        right: auto;
        width: 1px;
        height: auto;
    }

    .ai-human__step {
        display: flex;
        align-items: center;
        gap: 20px;
        text-align: left;
    }

    .ai-human__circle {
        flex: 0 0 58px;
        margin: 0;
    }

    .ai-human__message {
        font-size: 17px;
    }
    
    .ai-cta {
        padding: 70px 0;
    }

    

    .ai-cta h2 {
        font-size: 26px;
    }

    .ai-cta p {
        font-size: 16px;
    }

    
    
    .about-policy {
        padding: 80px 0;
    }

    .about-policy__heading h2 {
        font-size: 27px;
    }

    .about-policy__heading > p {
        font-size: 16px;
    }

    .about-policy__heading br {
        display: none;
    }

    .about-policy__items {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 20px;
        margin-top: 50px;
    }
    
    .about-history {
        padding: 80px 0;
    }

    .about-history__heading {
        margin-bottom: 55px;
    }

    .about-history__heading h2 {
        font-size: 27px;
    }

    .about-history__heading > p:last-child {
        font-size: 16px;
    }

    .about-history__timeline {
        padding-left: 32px;
    }

    .about-history__item::before {
        left: -32px;
    }
    
    
    .about-fields {
        padding: 80px 0;
    }

    .about-fields__heading h2 {
        font-size: 27px;
    }

    .about-fields__lead {
        font-size: 16px;
    }

    .about-fields__lead br,
    .about-fields__heading h2 br {
        display: none;
    }

    .about-fields__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 18px;
        margin: 50px 0 35px;
    }

    .about-fields__item p {
        margin-top: 10px;
        font-size: 14px;
    }

    .about-fields__message {
        font-size: 14px;
    }
    
    .about-future {
        padding: 80px 0;
    }

    .about-future__heading h2 {
        font-size: 27px;
    }

    .about-future__lead {
        font-size: 16px;
    }

    .about-future__lead br,
    .about-future__item p br {
        display: none;
    }

    .about-future__items {
        margin-top: 55px;
    }

    .about-future__item {
        padding: 40px 10px;
    }

    .about-future__item p {
        font-size: 15px;
    }
    
    .about-company {
        padding: 80px 0;
    }

    .about-company__title {
        margin-bottom: 40px;
        font-size: 27px;
    }

    .about-company__table > div {
        display: block;
        padding: 18px 0;
    }

    .about-company__table dt,
    .about-company__table dd {
        padding: 0;
    }

    .about-company__table dt {
        margin-bottom: 6px;
        font-size: 14px;
    }

    .about-company__table dd {
        font-size: 15px;
    }
    
    

    .common-cta__inner {
        display: block;
    }

    .common-cta__text h2 {
        font-size: 26px;
    }

    .common-cta__text p {
        font-size: 16px;
    }

    .common-cta__button {
        width: 100%;
        min-height: 72px;
        margin-top: 35px;
    }
    
    
    .news-list {
        padding: 75px 0 90px;
    }

    .news-list__item a {
        grid-template-columns: 1fr 20px;
        gap: 8px 15px;
        padding: 24px 5px;
    }

    .news-list__item time {
        grid-column: 1 / 2;
        font-size: 13px;
    }

    .news-list__item h2 {
        grid-column: 1 / 2;
        font-size: 16px;
    }

    .news-list__item a > span {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
    }
    
    
    .contact-form {
        padding: 75px 0 90px;
    }

    .contact-form__intro {
        margin-bottom: 50px;
    }

    .contact-form__intro p {
        font-size: 16px;
    }

    .contact-form__intro br {
        display: none;
    }

    .contact-form__row {
        display: block;
        padding: 22px 0;
    }

    .contact-form__row label {
        display: block;
        padding: 0;
        margin-bottom: 10px;
    }

    .contact-form__submit {
        margin-top: 40px;
    }

    .contact-form__submit button {
        width: 100%;
    }
    
}


/* AIボックス：タブレット */
@media screen and (min-width: 721px) and (max-width: 900px) {

    .ai-intro__box-list {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        row-gap: 45px;
    }

    .ai-intro__box-list > * {
        grid-column: span 2;
    }

    .ai-intro__box-list > *:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .ai-intro__box-list > *:nth-child(5) {
        grid-column: 4 / span 2;
    }
}


/* ========================================
   WORKS：タブレット 721〜900px
======================================== */

@media screen and (min-width: 721px) and (max-width: 900px) {

    .works-page-project {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        width: 100% !important;
        padding: 70px 0 !important;
        gap: 35px !important;
    }

    .works-page-project__image,
    .works-page-project__content {
        width: 100% !important;
        max-width: none !important;
    }

    .works-page-project__image {
        order: 1 !important;
    }

    .works-page-project__content {
        order: 2 !important;
        padding: 0 5vw !important;
    }

    .works-page-project__image img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }
}

/* ========================================
   WORKS / 仕組みをつくる力：タブレット
======================================== */

@media screen and (min-width: 721px) and (max-width: 900px) {

    .works-system__item {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        margin-bottom: 80px;
    }

    .works-system__image,
    .works-system__content {
        width: 100% !important;
        max-width: none !important;
    }

    .works-system__image {
        margin-bottom: 30px;
    }

    .works-system__image img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    .works-system__content {
        padding: 0 !important;
    }
}

/* ========================================
   AI CTA：タブレット
======================================== */

@media screen and (min-width: 721px) and (max-width: 900px) {

    .ai-cta {
        padding: 75px 0;
    }

    

    

    .ai-cta h2 {
        margin-bottom: 20px;
        font-size: 28px;
        white-space: normal;
    }

    .ai-cta p {
        font-size: 17px;
        line-height: 1.8;
    }

    
}

/* ========================================
   AI CTA：スマホ
======================================== */

@media screen and (max-width: 720px) {

    .ai-cta {
        padding: 70px 0;
    }

    

    

    .ai-cta h2 {
        margin: 0 0 18px;
        font-size: 26px;
        line-height: 1.5;
    }

    .ai-cta p {
        margin: 0;
        font-size: 16px;
        line-height: 1.8;
    }

    
}

@media screen and (max-width: 720px) {

    .about-fields__list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 32px 18px !important;
        width: 100%;
        margin: 50px 0 40px;
    }

    .about-fields__item {
        width: 100% !important;
        min-width: 0;
    }

    .about-fields__item img {
        display: block;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    .about-fields__item p {
        margin: 10px 0 0;
        font-size: 15px;
        line-height: 1.5;
        text-align: center;
    }
}

@media screen and (max-width: 720px) {

    .ai-cta .common-cta__inner {
        display: block;
        width: 100%;
    }

    .ai-cta .common-cta__text {
        width: 100%;
    }

    .ai-cta .common-cta__text h2 {
        font-size: 26px;
        line-height: 1.5;
    }

    .ai-cta .common-cta__text p {
        font-size: 16px;
        line-height: 1.8;
    }

    .ai-cta .common-cta__button {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-top: 35px;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 720px) {

    .contact-form__row {
        display: block !important;
        padding: 24px 0 !important;
    }

    .contact-form__row label {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 12px !important;
    }

    .contact-form__row input,
    .contact-form__row textarea {
        display: block;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    .contact-form__row textarea {
        min-height: 220px;
    }

    .contact-form__submit button {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    
    /* 確認画面 */
    .contact-confirm .contact-form__row {
        display: block;
    }

    .contact-confirm .contact-form__row p {
        margin: 0 0 10px;
    }

    .contact-confirm .contact-confirm__value {
        width: 100%;
    }

    .contact-confirm .contact-form__submit {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .contact-confirm .contact-form__submit input {
        width: 100%;
        min-width: 0;
    }
}


/* ========================================
   CONTACT COMPLETE
======================================== */

.contact-complete {
    padding: 110px 0 130px;
    background: #fff;
}

.contact-complete__inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.contact-complete__inner h2 {
    margin: 0 0 30px;
    font-size: 28px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
}

.contact-complete__inner p {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.contact-complete__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    min-width: 280px;
    min-height: 72px;
    margin-top: 55px;
    padding: 18px 35px;
    background: #202020;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .3s ease;
}

.contact-complete__button:hover {
    background: #2878c8;
}

@media screen and (max-width: 720px) {

    .contact-complete {
        padding: 70px 0 90px;
    }

    .contact-complete__inner h2 {
        font-size: 22px;
    }

    .contact-complete__inner p {
        font-size: 16px;
    }

    .contact-complete__button {
        width: 100%;
        min-width: 0;
    }
}


/* ========================================
   PRIVACY POLICY
======================================== */

.privacy-content {
    padding: 100px 0 130px;
    background: #fff;
}

.privacy-content__inner {
    max-width: 900px;
    margin: 0 auto;
}

.privacy-content__lead {
    margin: 0 0 70px;
    font-size: 18px;
    line-height: 2;
    color: #68717b;
}

.privacy-content__inner section {
    margin-top: 55px;
}

.privacy-content__inner section:first-of-type {
    margin-top: 0;
}

.privacy-content__inner h2 {
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #d9dee4;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 700;
    color: #202733;
}

.privacy-content__inner section p {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #4f5964;
}

@media screen and (max-width: 720px) {

    .privacy-content {
        padding: 70px 0 90px;
    }

    .privacy-content__lead {
        margin-bottom: 55px;
        font-size: 16px;
        line-height: 1.9;
    }

    .privacy-content__inner section {
        margin-top: 45px;
    }

    .privacy-content__inner h2 {
        margin-bottom: 18px;
        font-size: 20px;
    }

    .privacy-content__inner section p {
        font-size: 16px;
        line-height: 1.9;
    }
}


/* --------------------------------------------------
   404
-------------------------------------------------- */
.page-404 {
    padding: 150px 0 170px;
    background: #fff;
}

.page-404__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.page-404__number {
    margin: 0 0 25px;
    color: #2878c8;
    font-size: 90px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .04em;
}

.page-404 h1 {
    margin: 0;
    color: #202733;
    font-size: 30px;
    line-height: 1.5;
    font-weight: 700;
}

.page-404__text {
    margin: 30px 0 0;
    color: #68717b;
    font-size: 18px;
    line-height: 2;
}

.page-404__button {
    margin: 55px 0 0;
}

.page-404__button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 280px;
    min-height: 72px;
    padding: 18px 35px;

    background: #172b45;
    border: 1px solid #172b45;
    color: #fff;

    font-size: 17px;
    font-weight: 700;
    text-decoration: none;

    transition: background-color .3s ease, border-color .3s ease;
}

.page-404__button a:hover {
    background: #2878c8;
    border-color: #2878c8;
}

@media screen and (max-width: 720px) {

    .page-404 {
        padding: 100px 0 120px;
    }

    .page-404__number {
        font-size: 70px;
    }

    .page-404 h1 {
        font-size: 24px;
    }

    .page-404__text {
        font-size: 16px;
        line-height: 1.9;
    }

    .page-404__button {
        margin-top: 45px;
    }

    .page-404__button a {
        min-width: 260px;
        min-height: 64px;
        font-size: 16px;
    }
}