/*
Theme Name: Aito AI Support
Theme URI: https://ai-to.com/
Author: 有限会社アイト
Description: 中小企業向けAI活用支援サイト用のシンプルな企業テーマ
Version: 1.0.0
Text Domain: aito-ai
*/
:root{--ink:#19324a;--sub:#526477;--bg:#f6f8fa;--accent:#1877c9;--white:#fff;--line:#dfe6ec}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Yu Gothic",sans-serif;color:var(--ink);line-height:1.8;background:#fff}a{color:inherit;text-decoration:none}.wrap{max-width:1100px;margin:auto;padding:0 22px}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);z-index:10}.nav{height:72px;display:flex;align-items:center;justify-content:space-between}.logo{font-weight:800;font-size:22px}.logo span{color:var(--accent)}.menu a{margin-left:24px;font-size:14px;font-weight:700}.btn{display:inline-block;background:var(--accent);color:#fff;padding:13px 24px;border-radius:8px;font-weight:800}
.hero{background:linear-gradient(135deg,#eef7ff,#fff);padding:90px 0 85px}.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:55px;align-items:center}.eyebrow{font-weight:800;color:var(--accent);letter-spacing:.12em}.hero h1{font-size:clamp(32px,5vw,54px);line-height:1.35;margin:12px 0 20px}.hero p{font-size:19px;color:var(--sub)}.hero-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 15px 40px #19324a12}.check{padding:12px 0;border-bottom:1px solid var(--line)}
section{padding:78px 0}.alt{background:var(--bg)}h2{font-size:34px;text-align:center;margin:0 0 14px}.lead{text-align:center;color:var(--sub);max-width:720px;margin:0 auto 40px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{padding:28px;background:#fff;border:1px solid var(--line);border-radius:14px}.card h3{margin-top:0}.icon{font-size:30px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.step{background:#fff;border-radius:14px;padding:25px;border:1px solid var(--line)}.num{color:var(--accent);font-size:14px;font-weight:900}.price{font-size:27px;font-weight:900;color:var(--accent)}.note{font-size:13px;color:var(--sub)}.company{max-width:760px;margin:auto}.company dl{display:grid;grid-template-columns:180px 1fr;border-top:1px solid var(--line)}.company dt,.company dd{margin:0;padding:15px;border-bottom:1px solid var(--line)}.company dt{font-weight:800;background:var(--bg)}.cta{background:var(--ink);color:#fff;text-align:center}.cta p{color:#d9e5ef}.cta .btn{background:#fff;color:var(--ink)}.contact-form{max-width:700px;margin:35px auto 0;text-align:left;background:#fff;color:var(--ink);padding:30px;border-radius:14px}.contact-form label{display:block;font-weight:700;margin:16px 0 6px}.contact-form input,.contact-form textarea{width:100%;padding:13px;border:1px solid #ccd7e0;border-radius:7px;font:inherit}.contact-form textarea{min-height:150px}.contact-form button{border:0;cursor:pointer;font:inherit}.site-footer{padding:30px 0;text-align:center;color:#718090;font-size:13px}
@media(max-width:800px){.menu{display:none}.hero{padding:60px 0}.hero-grid,.cards,.steps{grid-template-columns:1fr}.company dl{grid-template-columns:1fr}.company dt{padding-bottom:4px}.company dd{padding-top:4px}section{padding:58px 0}}

.aito-contact-form{max-width:760px;margin:0 auto;text-align:left}
.aito-contact-form .form-row{margin:0 0 18px}
.aito-contact-form label{display:block;font-weight:700;margin-bottom:7px}
.aito-contact-form label span{font-size:12px;font-weight:600;margin-left:6px}
.aito-contact-form input,.aito-contact-form textarea{box-sizing:border-box;width:100%;padding:12px 14px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font:inherit}
.aito-contact-form textarea{resize:vertical}
.aito-contact-form input:focus,.aito-contact-form textarea:focus{outline:2px solid #94a3b8;outline-offset:1px}
.aito-contact-form .form-note{font-size:13px;line-height:1.7;margin:8px 0 18px}
.aito-contact-form .form-submit{border:0;cursor:pointer}
.aito-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-message{padding:14px 16px;border-radius:8px;margin:0 auto 20px;max-width:760px}
.form-success{background:#ecfdf5;border:1px solid #a7f3d0}
.form-error{background:#fef2f2;border:1px solid #fecaca}
/* ===== Aito トップメインビジュアル ===== */

.aito-main-hero {
  padding: 0;
  background: #eef8ff;
  overflow: hidden;
}

.aito-main-hero-inner {
  max-width: 1200px;
  min-height: 540px;
  display: grid;
  grid-template-columns: 48% 52%;
  align-items: stretch;
  padding: 0;
}

.aito-main-copy {
  position: relative;
  z-index: 2;
  padding: 65px 25px 55px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aito-main-copy .eyebrow {
  color: #0876d1;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 20px;
}

.aito-main-copy h1 {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.35;
  margin: 0 0 22px;
  color: #0d2c49;
}

.aito-main-copy h1 strong {
  color: #0876d1;
}

.aito-main-lead {
  font-size: 17px;
  line-height: 2;
  color: #43566a;
  margin-bottom: 25px;
}

.aito-main-copy .btn {
  align-self: flex-start;
  font-size: 17px;
  padding: 15px 28px;
}

.aito-main-points {
  margin-top: 20px;
  font-weight: 600;
  color: #173750;
  line-height: 2;
}

.aito-main-photo {
  min-height: 540px;
}

.aito-main-photo img {
  width: 100%;
  height: 100%;
  min-height: 540px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* スマートフォン */
@media (max-width: 800px) {

  .aito-main-hero-inner {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .aito-main-copy {
    padding: 45px 20px 35px;
  }

  .aito-main-copy h1 {
    font-size: 34px;
  }

  .aito-main-lead br {
    display: none;
  }

  .aito-main-photo {
    min-height: auto;
  }

  .aito-main-photo img {
    height: auto;
    min-height: 0;
  }
}
/* ===== Aito ヒーロー修正版 ===== */

.aito-main-hero .aito-main-hero-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    display: grid !important;
    grid-template-columns: 48% 52% !important;
    align-items: stretch;
}

.aito-main-hero .aito-main-copy {
    box-sizing: border-box;
    padding: 55px 45px 50px 55px;
    background: linear-gradient(90deg, #eef8ff 0%, #f5faff 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.aito-main-hero .aito-main-photo {
    width: 100%;
    min-width: 0;
    height: 540px;
    overflow: hidden;
}

.aito-main-hero .aito-main-photo img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    display: block;
}

@media (max-width: 800px) {
    .aito-main-hero .aito-main-hero-inner {
        display: flex !important;
        flex-direction: column;
    }

    .aito-main-hero .aito-main-copy {
        padding: 40px 20px 30px;
    }

    .aito-main-hero .aito-main-photo {
        height: auto;
    }

    .aito-main-hero .aito-main-photo img {
        width: 100%;
        height: auto;
    }
}
/* =========================================
   TOP HERO - Aito
========================================= */

.hero.hero-photo {
    position: relative;
    min-height: 575px;
    padding: 0;
    background-image:
        linear-gradient(
            90deg,
            rgba(238, 248, 255, 0.98) 0%,
            rgba(238, 248, 255, 0.94) 25%,
            rgba(238, 248, 255, 0.72) 39%,
            rgba(238, 248, 255, 0.15) 53%,
            rgba(238, 248, 255, 0) 67%
        ),
        url('http://ai-to.com/wp-content/uploads/2026/09/ChatGPT-Image-2026年9月17日-12_43_18.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero.hero-photo .wrap {
    max-width: 1500px;
    min-height: 575px;
    margin: 0 auto;
    padding: 62px 70px;
    display: flex;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 57%;
    max-width: 760px;
}

.hero-content .eyebrow {
    margin-bottom: 20px;
    color: #0877c9;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .08em;
}

.hero-content h1 {
    margin: 0 0 24px;
    color: #092b4b;
    font-size: clamp(38px, 4vw, 62px);
    line-height: 1.28;
    letter-spacing: .01em;
    font-weight: 700;
}

.hero-content h1 span {
    color: #0877d1;
}

.hero-lead {
    margin: 0 0 24px;
    color: #294966;
    font-size: 18px;
    line-height: 1.9;
    font-weight: 500;
}

.hero-btn {
    display: inline-block;
    margin-bottom: 20px;
    padding: 17px 32px;
    border-radius: 10px;
    background: #087fd1;
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 100, 180, .15);
}

.hero-btn:hover {
    opacity: .9;
}

.hero-points {
    color: #123653;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 600;
}

.hero-points div {
    margin: 3px 0;
}

/* タブレット */
@media (max-width: 1000px) {

    .hero.hero-photo {
        min-height: 560px;
        background-position: 60% center;
    }

    .hero.hero-photo .wrap {
        min-height: 560px;
        padding: 50px 35px;
    }

    .hero-content {
        width: 65%;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    .hero-lead {
        font-size: 16px;
    }
}

/* スマートフォン */
@media (max-width: 700px) {

    .hero.hero-photo {
        min-height: auto;
        background-image: none;
        background-color: #eef8ff;
    }

    .hero.hero-photo .wrap {
        min-height: auto;
        padding: 38px 22px 0;
        display: block;
    }

    .hero-content {
        width: 100%;
        max-width: none;
    }

    .hero-content h1 {
        font-size: 34px;
        line-height: 1.4;
    }

    .hero-lead br {
        display: none;
    }

    .hero-points {
        padding-bottom: 30px;
    }

    .hero.hero-photo::after {
        content: "";
        display: block;
        width: 100%;
        height: 300px;
        background-image:
            url('http://ai-to.com/wp-content/uploads/2026/09/ChatGPT-Image-2026年9月17日-12_43_18.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
}
/* ヒーロー文字を読みやすくする */
.hero.hero-photo {
    background-image:
        linear-gradient(
            90deg,
            rgba(242, 249, 255, 1) 0%,
            rgba(242, 249, 255, 0.99) 20%,
            rgba(242, 249, 255, 0.96) 32%,
            rgba(242, 249, 255, 0.88) 40%,
            rgba(242, 249, 255, 0.58) 48%,
            rgba(242, 249, 255, 0.18) 58%,
            rgba(242, 249, 255, 0) 68%
        ),
        url('http://ai-to.com/wp-content/uploads/2026/09/ChatGPT-Image-2026年9月17日-12_43_18.png');
}

.hero-content {
    width: 54%;
    max-width: 720px;
}

.hero-content h1 {
    font-size: clamp(38px, 3.6vw, 56px);
    line-height: 1.3;
    letter-spacing: 0;
}

.hero-content .hero-lead {
    color: #29445c;
    font-weight: 500;
}

.hero-points {
    color: #123653;
    font-weight: 700;
}
/* =========================================
   HEADER LOGO
========================================= */

.site-header .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.site-header .logo img {
    display: block;
    width: 100px;
    height: auto;
    object-fit: contain;
}

.site-header .logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.3;
}

.site-header .logo-text strong {
    color: #092b4b;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
}

.site-header .logo-text small {
    margin-top: 5px;
    color: #526a7d;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* スマホ */
@media (max-width: 700px) {

    .site-header .logo {
        gap: 8px;
    }

    .site-header .logo img {
        width: 120px;
    }

    .site-header .logo-text strong {
        font-size: 15px;
    }

    .site-header .logo-text small {
        display: none;
    }
}
/* =========================================
   PC・IT SUPPORT
========================================= */

.pc-support {
    padding: 80px 0;
    background: #f5faff;
}

.pc-support .section-head {
    text-align: center;
    margin-bottom: 45px;
}

.pc-support .section-head h2 {
    color: #092b4b;
    font-size: 36px;
    margin-bottom: 15px;
}

.pc-support .section-head p {
    color: #526a7d;
    font-size: 17px;
    line-height: 1.8;
}

.pc-support-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.pc-support-cards .card {
    background: #fff;
    padding: 35px 30px;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(20, 70, 110, 0.08);
}

.pc-support-cards .service-icon {
    font-size: 38px;
    margin-bottom: 15px;
}

.pc-support-cards h3 {
    color: #0877c9;
    font-size: 23px;
    margin: 0 0 18px;
}

.pc-support-cards p {
    color: #294966;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 12px;
}

@media (max-width: 800px) {
    .pc-support-cards {
        grid-template-columns: 1fr;
    }

    .pc-support {
        padding: 55px 0;
    }

    .pc-support .section-head h2 {
        font-size: 30px;
    }

    .pc-support .section-head p br {
        display: none;
    }
}
.support-price {
    margin-top: 20px;
    padding: 16px 18px;
    background: #eef8ff;
    border-left: 4px solid #0877c9;
    border-radius: 6px;
}

.support-price strong {
    display: block;
    color: #0877c9;
    font-size: 19px;
    margin-bottom: 8px;
}

.support-price span {
    display: block;
    color: #526a7d;
    font-size: 14px;
    line-height: 1.7;
}