/* =========================================================
   AIプリントサービス 下層汎用コンテンツ
========================================================= */

.ai-guide-page,
.ai-guide-page *,
.ai-guide-page *::before,
.ai-guide-page *::after{
  box-sizing:border-box;
}

.ai-guide-page{
  --guide-text:#111827;
  width:100%;
  overflow:hidden;
  color:var(--guide-text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Noto Sans JP",
    "Yu Gothic",
    YuGothic,
    Meiryo,
    sans-serif;
}

.ai-guide-page img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

.ai-guide-page a{
  text-decoration:none;
}


/* =========================================================
   下層FV
========================================================= */

.ai-guide-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(129,140,248,.2),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 15%,
      rgba(168,85,247,.18),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #fbfbff 0%,
      #f4f3ff 100%
    );
}

.ai-guide-hero__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  align-items:center;
  gap:30px;
  width:min(1080px,calc(100% - 48px));
  min-height:520px;
  margin:0 auto;
  padding:75px 0 85px;
}

.ai-guide-hero__decoration{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.ai-guide-hero__orb{
  position:absolute;
  border-radius:50%;
}

.ai-guide-hero__orb--01{
  top:40px;
  right:-110px;
  width:350px;
  height:350px;
  background:
    linear-gradient(
      145deg,
      rgba(79,70,229,.13),
      rgba(168,85,247,.17)
    );
}

.ai-guide-hero__orb--02{
  bottom:-190px;
  left:-110px;
  width:360px;
  height:360px;
  background:
    linear-gradient(
      145deg,
      rgba(6,182,212,.1),
      rgba(79,70,229,.1)
    );
}

.ai-guide-hero__grid{
  position:absolute;
  inset:0;
  opacity:.35;
  background-image:
    linear-gradient(rgba(99,102,241,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,102,241,.055) 1px,transparent 1px);
  background-size:43px 43px;
}

.ai-guide-hero__content{
  min-width:0;
}

.ai-guide-hero__status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:31px;
  margin-bottom:19px;
  padding:6px 13px;
  border:1px solid rgba(79,70,229,.2);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#4f46e5;
  box-shadow:0 8px 22px rgba(79,70,229,.08);
  font-size:10px;
  font-weight:800;
  line-height:1;
  letter-spacing:.12em;
}

.ai-guide-hero__status .material-symbols-outlined{
  font-size:17px;
}

.ai-guide-page .ai-guide-hero__eyebrow{
  margin:0 0 10px;
  color:#6366f1;
  font-size: 16px;
  font-weight:700;
  line-height:1.7;
}

.ai-guide-page .ai-guide-hero__title{
  margin:0 0 21px;
  padding:0;
  border:0;
  color:#111827;
  font-size:clamp(37px,4.2vw,47px);
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.045em;
}

.ai-guide-page .ai-guide-hero__title::after{
  display:none;
}

.ai-guide-hero__title span{
  background:
    linear-gradient(
      90deg,
      #4f46e5,
      #7c3aed,
      #a855f7,
      #ec4899
    );
  color:transparent;
  background-clip:text;
  -webkit-background-clip:text;
}

.ai-guide-page .ai-guide-hero__lead{
  max-width:650px;
  margin:0 0 25px;
  color:#4b5563;
  font-size: 16px;
  line-height:2;
}

.ai-guide-hero__points{
  display:flex;
  flex-wrap:wrap;
  gap:9px 17px;
}

.ai-guide-hero__point{
  display:flex;
  align-items:center;
  gap:6px;
  color:#374151;
  font-size: 16px;
  font-weight:700;
}

.ai-guide-hero__point .material-symbols-outlined{
  color:#6366f1;
  font-size:18px;
}

.ai-guide-hero__visual{
  position:relative;
  min-width:0;
}

.ai-guide-hero__image{
  overflow:hidden;
  border:1px solid rgba(99,102,241,.16);
  border-radius:28px;
  background:#fff;
  box-shadow:
    0 28px 58px rgba(49,46,129,.14),
    0 7px 17px rgba(49,46,129,.06);
}

.ai-guide-hero__image img{
  aspect-ratio:1 / 1;
  object-fit:cover;
}

.ai-guide-hero__visual-label{
    position:absolute;
    right: 5px;
    bottom: -58px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:46px;
    padding:10px 18px;
    border:1px solid rgba(255,255,255,.6);
    border-radius:14px;
    background:linear-gradient(110deg,#4338ca,#7c3aed);
    color:#fff;
    text-decoration:none;
    font-size: 16px;
    font-weight:700;
    box-shadow:0 13px 25px rgba(79,70,229,.25);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}




.ai-guide-hero__visual-label .material-symbols-outlined{
    font-size:20px;
}

.ai-guide-hero__visual-label,
.ai-guide-hero__visual-label:link,
.ai-guide-hero__visual-label:visited{
    color:#fff !important;
    text-decoration:none;
}

.ai-guide-hero__visual-label:hover,
.ai-guide-hero__visual-label:focus-visible{
  color:#fff !important;
  text-decoration:none;
  background:linear-gradient(110deg,#3730a3,#6d28d9);
  box-shadow:0 18px 32px rgba(79,70,229,.32);
  transform:translateY(-2px);
}

.ai-guide-hero__visual-label:active{
    color:#fff !important;
}

/* =========================================================
   ページ内ナビ
========================================================= */

.ai-guide-nav{
  position:relative;
  z-index:4;
  margin-top:25px;
}

.ai-guide-nav__inner{
  width:min(1080px,calc(100% - 48px));
  margin:0 auto;
  padding:22px;
  border:1px solid rgba(99,102,241,.15);
  border-radius:23px;
  background:rgba(255,255,255,.94);
  box-shadow:
    0 25px 55px rgba(49,46,129,.11),
    0 4px 12px rgba(49,46,129,.04);
  backdrop-filter:blur(15px);
}

.ai-guide-nav__heading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  margin-bottom:16px;
  text-align:left;
}

.ai-guide-nav__heading > .material-symbols-outlined{
  color:#6366f1;
  font-size:26px;
}

.ai-guide-page .ai-guide-nav__heading p{
  margin:0 0 2px;
  color:#818cf8;
  font-size:8px;
  font-weight:800;
  line-height:1;
  letter-spacing:.15em;
}

.ai-guide-page .ai-guide-nav__heading h2{
  margin:0;
  padding:0;
  border:0;
  color:#374151;
  font-size: 16px;
  font-weight:800;
  line-height:1.4;
}

.ai-guide-page .ai-guide-nav__heading h2::after{
  display:none;
}

.ai-guide-nav__list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.ai-guide-nav__list a{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-height:67px;
  padding:10px 27px 10px 10px;
  border:1px solid #ececf5;
  border-radius:12px;
  background:#fff;
  color:#374151;
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.ai-guide-nav__list a:hover{
  border-color:#c7d2fe;
  box-shadow:0 9px 20px rgba(79,70,229,.09);
  transform:translateY(-3px);
}

.ai-guide-nav__number{
  color:#818cf8;
  font-size: 16px;
  font-weight:800;
}

.ai-guide-nav__text{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}

.ai-guide-nav__text b{
  overflow:hidden;
  color:#374151;
  font-size: 16px;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ai-guide-nav__text small{
  overflow:hidden;
  color:#9ca3af;
  font-size:10px;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ai-guide-nav__list a > .material-symbols-outlined{
  position:absolute;
  right:8px;
  bottom:8px;
  color:#a5b4fc;
  font-size: 16px;
}


/* =========================================================
   共通セクション
========================================================= */

.ai-guide-main{
  background:#fff;
}

.ai-guide-section{
  position:relative;
  padding:105px 0;
  scroll-margin-top:110px;
}

.ai-guide-section--soft{
  background:
    linear-gradient(
      180deg,
      #f8f8ff 0%,
      #f4f5ff 100%
    );
}

.ai-guide-section__inner{
  width:min(1080px,calc(100% - 48px));
  margin:0 auto;
}

.ai-guide-heading{
  display:grid;
  grid-template-columns:80px minmax(0,1fr);
  align-items:start;
  gap:27px;
  margin-bottom:52px;
}

.ai-guide-heading__number{
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:80px;
  border:1px solid rgba(79,70,229,.16);
  border-radius:24px;
  background:
    linear-gradient(
      145deg,
      #fff,
      #f1efff
    );
  color:#6366f1;
  box-shadow:0 14px 34px rgba(79,70,229,.1);
  font-size:23px;
  font-weight:800;
}

.ai-guide-page .ai-guide-heading__label{
  margin:0 0 7px;
  color:#6366f1;
  font-size: 16px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:.14em;
}

.ai-guide-page .ai-guide-heading h2{
  margin:0 0 15px;
  padding:0;
  border:0;
  color:#111827;
  font-size:clamp(28px,3.2vw,42px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:-.035em;
}

.ai-guide-page .ai-guide-heading h2::after{
  display:none;
}

.ai-guide-page .ai-guide-heading__content > p:last-child{
  max-width:760px;
  margin:0;
  color:#5b6474;
  font-size: 16px;
  line-height:2;
}


/* =========================================================
   要点カード
========================================================= */

.ai-guide-summary{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:19px;
  margin-bottom:32px;
  padding:25px 27px;
  border:1px solid #dddafe;
  border-radius:20px;
  background:
    linear-gradient(
      120deg,
      #f5f3ff,
      #eef2ff
    );
}

.ai-guide-summary__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:17px;
  background:
    linear-gradient(
      135deg,
      #4f46e5,
      #9333ea
    );
  color:#fff;
  box-shadow:0 9px 20px rgba(79,70,229,.2);
}

.ai-guide-summary__icon .material-symbols-outlined{
  font-size:27px;
}

.ai-guide-page .ai-guide-summary__label{
  margin:0 0 4px;
  color:#818cf8;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
}

.ai-guide-page .ai-guide-summary h3{
  margin:0 0 7px;
  padding:0;
  border:0;
  color:#312e81;
  font-size:17px;
  font-weight:800;
  line-height:1.5;
}

.ai-guide-page .ai-guide-summary h3::before,
.ai-guide-page .ai-guide-summary h3::after{
  display:none;
}

.ai-guide-page .ai-guide-summary__content > p:last-child{
  margin:0;
  color:#565f70;
  font-size: 16px;
  line-height:1.9;
}


/* =========================================================
   汎用カード
========================================================= */

.ai-guide-column{
  display:grid;
  gap:22px;
}

.ai-guide-column--2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.ai-guide-card{
  position:relative;
  padding:27px;
  border:1px solid #e6e6f2;
  border-radius:20px;
  background:#fff;
  box-shadow:
    0 16px 37px rgba(49,46,129,.07);
}

.ai-guide-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin-bottom:17px;
  border-radius:14px;
  background:#eef2ff;
  color:#4f46e5;
}

.ai-guide-card__icon .material-symbols-outlined{
  font-size:28px;
}

.ai-guide-page .ai-guide-card__label{
  margin:0 0 6px;
  color:#818cf8;
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
}

.ai-guide-page .ai-guide-card h3{
  margin:0 0 11px;
  padding:0;
  border:0;
  color:#1f2937;
  font-size:20px;
  font-weight:800;
  line-height:1.5;
}

.ai-guide-page .ai-guide-card h3::before,
.ai-guide-page .ai-guide-card h3::after{
  display:none;
}

.ai-guide-page .ai-guide-card > p:not(.ai-guide-card__label){
  margin:0 0 18px;
  color:#5b6474;
  font-size: 16px;
  line-height:1.9;
}

.ai-guide-text-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#4338ca !important;
  font-size: 16px;
  font-weight:800;
}

.ai-guide-text-link:visited{
  color:#4338ca !important;
}

.ai-guide-text-link span:last-child{
  transition:transform .25s ease;
}

.ai-guide-text-link:hover span:last-child{
  transform:translateX(4px);
}


/* =========================================================
   注意・補足
========================================================= */

.ai-guide-notice{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-top:28px;
  padding:20px 22px;
  border-radius:16px;
}

.ai-guide-notice > .material-symbols-outlined{
  flex:0 0 auto;
  margin-top:1px;
  font-size:22px;
}

.ai-guide-notice--info{
  border:1px solid #c7d2fe;
  background:#eef2ff;
}

.ai-guide-notice--info > .material-symbols-outlined{
  color:#4f46e5;
}

.ai-guide-notice--warning{
  border:1px solid #fde68a;
  background:#fffbeb;
}

.ai-guide-notice--warning > .material-symbols-outlined{
  color:#d97706;
}

.ai-guide-notice--success{
  border:1px solid #bbf7d0;
  background:#f0fdf4;
}

.ai-guide-notice--success > .material-symbols-outlined{
  color:#16a34a;
}

.ai-guide-page .ai-guide-notice h3{
  margin:0 0 6px;
  padding:0;
  border:0;
  color:#1f2937;
  font-size: 16px;
  font-weight:800;
  line-height:1.6;
}

.ai-guide-page .ai-guide-notice h3::before,
.ai-guide-page .ai-guide-notice h3::after{
  display:none;
}

.ai-guide-page .ai-guide-notice p{
  margin:0;
  color:#565f70;
  font-size: 16px;
  line-height:1.85;
}


/* =========================================================
   詳細ステップ
========================================================= */

.ai-guide-step{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);
  align-items:center;
  gap:48px;
  margin-bottom:35px;
  padding:40px;
  border:1px solid rgba(99,102,241,.14);
  border-radius:24px;
  background:#fff;
  box-shadow:
    0 20px 45px rgba(49,46,129,.08);
}

.ai-guide-step--reverse .ai-guide-step__content{
  order:2;
}

.ai-guide-step--reverse .ai-guide-step__visual{
  order:1;
}

.ai-guide-step__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}

.ai-guide-step__number{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:8px 12px;
  border-radius:8px;
  background: linear-gradient(135deg, #6279ff, #d56bdf);
  color:#fff;
  font-size: 16px;
  font-weight:800;
  letter-spacing:.1em;
}

.ai-guide-step__head .material-symbols-outlined{
  color:#818cf8;
  font-size:36px;
}

.ai-guide-page .ai-guide-step h3{
  margin:0 0 13px;
  padding:0;
  border:0;
  color:#1f2937;
  font-size:22px;
  font-weight:800;
  line-height:1.55;
}

.ai-guide-page .ai-guide-step h3::before,
.ai-guide-page .ai-guide-step h3::after{
  display:none;
}

.ai-guide-page .ai-guide-step__content > p{
  margin:0 0 18px;
  color:#5b6474;
  font-size: 16px;
  line-height:1.95;
}

.ai-guide-image-card{
  margin:0;
  overflow:hidden;
  border:1px solid #e4e4ef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 13px 28px rgba(49,46,129,.09);
}

.ai-guide-image-card img{
  aspect-ratio:4 / 4;
  object-fit:cover;
}

.ai-guide-image-card figcaption{
  padding:11px 13px;
  border-top:1px solid #eeeeF5;
  color:#8b93a1;
   font-size:13px;
  line-height:1.6;
  text-align:center;
}

.ai-guide-check-list{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.ai-guide-check-list li{
  position:relative;
  padding-left:27px;
  color:#374151;
  font-size: 14px;
  font-weight:700;
  line-height:1.75;
}

.ai-guide-check-list li::before{
  position:absolute;
  top:.18em;
  left:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:
    linear-gradient(
      135deg,
      #4f46e5,
      #9333ea
    );
  color:#fff;
  content:"✓";
  font-size:8px;
}

.ai-guide-tip{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:20px;
  padding:15px 16px;
  border:1px solid #dddafe;
  border-radius:12px;
  background:#f5f3ff;
}

.ai-guide-tip .material-symbols-outlined{
  flex:0 0 auto;
  color:#7c3aed;
  font-size:20px;
}

.ai-guide-page .ai-guide-tip p{
  margin:0;
  color:#565f70;
  font-size: 16px;
  line-height:1.8;
}


/* =========================================================
   設定カード
========================================================= */

.ai-guide-settings{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-bottom:35px;
}

.ai-guide-setting-card{
  padding:20px;
  border:1px solid #e6e6f2;
  border-radius:20px;
  background:#fff;
  box-shadow:0 15px 35px rgba(49,46,129,.07);
}

.ai-guide-setting-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:17px;
}

.ai-guide-setting-card__number{
  color:#818cf8;
  font-size:16px;
  font-weight:800;
}

.ai-guide-setting-card__head .material-symbols-outlined{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:13px;
  background:#eef2ff;
  color:#4f46e5;
  font-size:22px;
}

.ai-guide-page .ai-guide-setting-card h3{
  margin:0 0 10px;
  padding:0;
  border:0;
  color:#1f2937;
  font-size:16px;
  font-weight:800;
  line-height:1.5;
}

.ai-guide-page .ai-guide-setting-card h3::before,
.ai-guide-page .ai-guide-setting-card h3::after{
  display:none;
}

.ai-guide-page .ai-guide-setting-card > p{
  margin:0 0 18px;
  color:#5b6474;
  font-size: 16px;
  line-height:1.9;
}

.ai-guide-setting-card__example{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.ai-guide-setting-card__example span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 8px;
  border:1px solid #dddafe;
  border-radius:999px;
  background:#f5f3ff;
  color:#5b21b6;
  font-size:13px;
  font-weight:700;
}


/* =========================================================
   プロンプト例
========================================================= */

.ai-guide-prompt-example{
  margin-bottom:30px;
  overflow:hidden;
  border:1px solid rgba(99,102,241,.16);
  border-radius:22px;
  background:#fff;
  box-shadow:0 19px 40px rgba(49,46,129,.08);
}

.ai-guide-prompt-example__heading{
  display:flex;
  align-items:center;
  gap:12px;
  padding:19px 22px;
  border-bottom:1px solid #e9e9f3;
  background:
    linear-gradient(
      120deg,
      #eef2ff,
      #faf5ff
    );
}

.ai-guide-prompt-example__heading > .material-symbols-outlined{
  color:#6366f1;
  font-size:34px;
}

.ai-guide-page .ai-guide-prompt-example__heading p{
  margin:0 0 2px;
  color:#818cf8;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
}

.ai-guide-page .ai-guide-prompt-example__heading h3{
  margin:0;
  padding:0;
  border:0;
  color:#1f2937;
  font-size: 20px;
  font-weight:800;
}

.ai-guide-prompt-example__body{
  padding:25px;
}

.ai-guide-prompt-example blockquote{
  margin:0 0 20px;
  padding:21px 22px;
  border:1px solid #dddafe;
  border-radius:14px;
  background:#fafaff;
  color:#312e81;
  font-size: 16px;
  font-weight:700;
  line-height:2;
}

.ai-guide-prompt-example__points{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}

.ai-guide-prompt-example__points span{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px;
  border-radius:10px;
  background:#f5f3ff;
  color:#565f70;
  font-size:16px;
  line-height:1.6;
}

.ai-guide-prompt-example__points b{
  color:#6366f1;
  font-size: 18px;
}


/* =========================================================
   比較
========================================================= */

.ai-guide-comparison{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.ai-guide-comparison__item{
  padding:23px;
  border-radius:18px;
}

.ai-guide-comparison__item--bad{
  border:1px solid #fecaca;
  background:#fef2f2;
}

.ai-guide-comparison__item--good{
  border:1px solid #bbf7d0;
  background:#f0fdf4;
}

.ai-guide-page .ai-guide-comparison__label{
  margin:0 0 8px;
  font-size: 16px;
  font-weight:800;
  letter-spacing:.08em;
}

.ai-guide-comparison__item--bad .ai-guide-comparison__label{
  color:#dc2626;
}

.ai-guide-comparison__item--good .ai-guide-comparison__label{
  color:#16a34a;
}

.ai-guide-page .ai-guide-comparison h3{
  margin:0 0 9px;
  padding:0;
  border:0;
  color:#1f2937;
  font-size: 18px;
  font-weight:800;
  line-height:1.7;
}

.ai-guide-page .ai-guide-comparison h3::before,
.ai-guide-page .ai-guide-comparison h3::after{
  display:none;
}

.ai-guide-page .ai-guide-comparison__item > p:last-child{
  margin:0;
  color:#565f70;
  font-size: 16px;
  line-height:1.8;
}




/* =========================================================
   注文フロー
========================================================= */

.ai-guide-order-flow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
}

.ai-guide-order-flow__item{
  position:relative;
  padding:23px 18px;
  border:1px solid #e5e5f1;
  border-radius:18px;
  background:#fff;
  text-align:center;
  box-shadow:0 13px 30px rgba(49,46,129,.07);
}



.ai-guide-order-flow__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  margin:0 auto 15px;
  border-radius:16px;
  background:
    linear-gradient(
      135deg,
      #eef2ff,
      #f5f3ff
    );
  color:#4f46e5;
}

.ai-guide-order-flow__icon .material-symbols-outlined{
  font-size:25px;
}

.ai-guide-page .ai-guide-order-flow h3{
  margin:0 0 8px;
  padding:0;
  border:0;
  color:#1f2937;
  font-size: 16px;
  font-weight:800;
  line-height:1.5;
}

.ai-guide-page .ai-guide-order-flow h3::before,
.ai-guide-page .ai-guide-order-flow h3::after{
  display:none;
}

.ai-guide-page .ai-guide-order-flow p{
  margin:0;
  color:#6b7280;
   font-size:16px;
  line-height:1.75;
}


/* =========================================================
   CTA
========================================================= */

.ai-guide-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
  align-items:center;
  gap:35px;
  margin-top:48px;
  padding:37px;
  overflow:hidden;
  border-radius:25px;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(129,140,248,.32),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #111827 0%,
      #1e1b4b 52%,
      #312e81 100%
    );
  box-shadow:0 27px 55px rgba(30,27,75,.24);
}

.ai-guide-page .ai-guide-cta__label{
  margin:0 0 8px;
  color:#a5b4fc;
   font-size:12px;
  font-weight:800;
  letter-spacing:.15em;
}

.ai-guide-page .ai-guide-cta h2{
  margin:0 0 12px;
  padding:0;
  border:0;
  color:#fff;
  font-size:clamp(25px,3vw,36px);
  font-weight:800;
  line-height:1.5;
}

.ai-guide-page .ai-guide-cta h2::after{
  display:none;
}

.ai-guide-page .ai-guide-cta__content > p:last-child{
  margin:0;
  color:rgba(255,255,255,.7);
  font-size: 16px;
  line-height:1.8;
}

.ai-guide-cta__actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ai-guide-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:58px;
  padding:11px 17px;
  border-radius:14px;
  font-size: 16px;
  font-weight:800;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.ai-guide-button:hover{
  transform:translateY(-2px);
}

.ai-guide-button--primary{
  justify-content:flex-start;
  background:
    linear-gradient(
      110deg,
      #6366f1,
      #9333ea
    ) !important;
  color:#fff !important;
  box-shadow:0 15px 30px rgba(79,70,229,.28);
}

.ai-guide-button--primary:visited{
  color:#fff;
}

.ai-guide-button--primary > span:nth-child(2){
  display:flex;
  flex:1;
  flex-direction:column;
  gap:2px;
}

.ai-guide-button--primary small{
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:500;
}

.ai-guide-button--primary > span:last-child{
  font-size:17px;
}

.ai-guide-button--secondary{
  min-height:45px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.09);
  color:#fff !important;
}

.ai-guide-button--secondary:visited{
  color:#fff;
}




/* =========================================================
   タブレット
========================================================= */

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

  .ai-guide-hero__inner{
    grid-template-columns:1fr;
    gap:30px;
    width:calc(100% - 40px);
    min-height:0;
    padding:52px 0 72px;
  }


  .ai-guide-step{
    grid-template-columns:1fr;
    gap:25px;
  }

  .ai-guide-step--reverse .ai-guide-step__content,
  .ai-guide-step--reverse .ai-guide-step__visual{
    order:initial;
  }

  .ai-guide-settings{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ai-guide-order-flow{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ai-guide-cta{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   スマートフォン
========================================================= */

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



  .ai-guide-hero__status{
    min-height:28px;
    margin-bottom:15px;
    font-size:8px;
  }

  .ai-guide-page .ai-guide-hero__eyebrow{
    font-size: 16px;
  }

  .ai-guide-page .ai-guide-hero__title{
    margin-bottom:17px;
    font-size:clamp(32px,10vw,43px);
  }

  .ai-guide-page .ai-guide-hero__lead{
    margin-bottom:20px;
    font-size: 16px;
    line-height:1.9;
  }

  .ai-guide-hero__points{
    display:grid;
    grid-template-columns:1fr;
  }

  .ai-guide-hero__visual{
    width:92%;
    margin:0 auto;
  }

  .ai-guide-hero__image{
    border-radius:19px;
  }

  .ai-guide-hero__visual-label{
        right: -6px;
        bottom: -39px;
      padding:9px 14px;
      font-size: 16px;
  }


  /* ナビ */

  .ai-guide-nav{
    margin-top:-28px;
  }

  .ai-guide-nav__inner{
    width:calc(100% - 28px);
    padding:15px;
    border-radius:17px;
  }

  .ai-guide-nav__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .ai-guide-nav__list a{
    min-height:60px;
  }

  .ai-guide-nav__text b{
    font-size: 16px;
  }

  .ai-guide-nav__text small{
    font-size:11px;
  }


  /* セクション */

  .ai-guide-section{
    padding:75px 0;
  }

  .ai-guide-section__inner{
    width:calc(100% - 28px);
  }

  .ai-guide-heading{
    grid-template-columns:52px minmax(0,1fr);
    gap:15px;
    margin-bottom:35px;
  }

  .ai-guide-heading__number{
    width:52px;
    height:52px;
    border-radius:16px;
    font-size:16px;
  }

  .ai-guide-page .ai-guide-heading h2{
    margin-bottom:10px;
    font-size:25px;
  }

  .ai-guide-page .ai-guide-heading__content > p:last-child{
    font-size: 16px;
    line-height:1.85;
    margin-left:-50px;
  }


  /* カード */

  .ai-guide-summary{
    grid-template-columns:43px minmax(0,1fr);
    gap:13px;
    padding:18px;
    border-radius:16px;
  }

  .ai-guide-summary__icon{
    width:43px;
    height:43px;
    border-radius:13px;
  }

  .ai-guide-summary__icon .material-symbols-outlined{
    font-size:22px;
  }

  .ai-guide-page .ai-guide-summary h3{
    font-size: 16px;
  }

  .ai-guide-column--2,
  .ai-guide-settings,
  .ai-guide-comparison{
    grid-template-columns:1fr;
  }

  .ai-guide-card,
  .ai-guide-setting-card{
    padding:21px;
    border-radius:17px;
  }


  /* ステップ */

  .ai-guide-step{
    margin-bottom:23px;
    padding:30px 25px;
    border-radius:18px;
  }

  .ai-guide-page .ai-guide-step h3{
    font-size:18px;
  }

  .ai-guide-page .ai-guide-step__content > p{
    font-size: 16px;
    line-height:1.85;
  }

  .ai-guide-image-card{
    border-radius:14px;
  }

.ai-guide-step__head .material-symbols-outlined{
  font-size:36px;
}

.ai-guide-step__number {
    font-size: 13px;
}

  /* プロンプト */

  .ai-guide-prompt-example{
    border-radius:17px;
  }

  .ai-guide-prompt-example__body{
    padding:18px;
  }

  .ai-guide-prompt-example blockquote{
    padding:17px;
    font-size: 20px;
    line-height:1.9;
  }

  .ai-guide-prompt-example__points{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }




  /* 注文フロー */

  .ai-guide-order-flow{
    grid-template-columns:1fr;
  }

  .ai-guide-order-flow__item{
    display:grid;
    grid-template-columns:45px minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:1px 13px;
    padding:17px;
    text-align:left;
  }


  .ai-guide-order-flow__icon{
    grid-row:1 / 3;
    width:45px;
    height:45px;
    margin:0;
  }

  .ai-guide-page .ai-guide-order-flow h3{
    margin:2px 0 2px;
  }


  /* CTA */

  .ai-guide-cta{
    gap:24px;
    margin-top:35px;
    padding:26px 20px;
    border-radius:19px;
  }

  .ai-guide-page .ai-guide-cta h2{
    font-size:24px;
  }




}


/* =========================================================
   小型スマートフォン
========================================================= */

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

  .ai-guide-nav__list{
    grid-template-columns:1fr;
  }

  .ai-guide-prompt-example__points{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   アニメーション軽減
========================================================= */

@media (prefers-reduced-motion:reduce){

  .ai-guide-page *,
  .ai-guide-page *::before,
  .ai-guide-page *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }

}