/**
 * パターン共通スタイル
 * assets/css/patterns.css
 */

/* 共通セクションスタイル */

.section-description {
  text-align: center;
  color: var(--color-dark-gray);
  margin-bottom: 40px;
}

.page-content{
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* .container は 768px 以下で 20px に縮むが .page-content は 60px のままだったため、
   390px 幅では左右で 120px を占め本文・フォームが極端に狭くなっていた。挙動を .container に揃える */
@media (max-width: 768px) {
    .page-content{
        padding: 0 20px;
    }
}

.page-content h2{
  color: var(--color-main);
  margin: 40px 0px;
  font-size: 36px;
  font-weight: 700;
  position: relative;
}

.page-content ol{
    margin-left: 20px;
}
.page-content li{
    margin-bottom: 10px;
}

/* 料金構造パターン */
.price-structure-section {
  padding: 80px 0;
  background-color: var(--color-background);
  position: relative;
  overflow: hidden;
}

.price-structure-section:before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(111,61,156,0.05);
  z-index: 0;
}

.price-structure-section:after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(201,50,121,0.05);
  z-index: 0;
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.price-structure-container {
  max-width: 800px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 1;
}

.price-structure-box {
  background-color: var(--color-white);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(47,28,64,0.05);
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.price-structure-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(47,28,64,0.1);
}

.price-structure-row {
  display: flex;
  min-height: 90px;
}

.price-structure-col {
  padding: 25px;
  display: flex;
  align-items: center;
}

.price-structure-col:first-child {
  flex: 0 0 30%;
  background: linear-gradient(135deg, rgba(111,61,156,0.05), rgba(132,80,184,0.1));
  border-right: 1px solid rgba(47,28,64,0.05);
  justify-content: center;
}

.price-structure-col:last-child {
  flex: 1;
}

.structure-label {
  color: var(--color-main);
  font-weight: 700;
  font-size: 20px;
}

.structure-content {
  font-size: 16px;
  line-height: 1.6;
}

.price-structure-plus {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  position: relative;
}

.plus-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(111,61,156,0.3);
}

/* プランカード */
.price-plans {
  margin-top: 50px;
  position: relative;
  z-index: 1;
}

.plans-columns {
  gap: 25px;
  display: flex;
}

.plan-card {
  background-color: var(--color-white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(47,28,64,0.05);
  height: 100%;
  position: relative;
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(47,28,64,0.05);
}

.plan-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(47,28,64,0.1);
}

.plan-card.recommended {
  border: none;
  box-shadow: 0 15px 35px rgba(201,50,121,0.15);
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
              linear-gradient(135deg, var(--color-accent), rgba(201,50,121,0.7)) border-box;
  border: 2px solid transparent;
}

.plan-recommend-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: linear-gradient(135deg, var(--color-accent), rgba(201,50,121,0.8));
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  padding: 5px 15px;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(201,50,121,0.3);
  z-index: 2;
}

.plan-header {
  padding: 30px 25px 20px;
  display: flex;
  align-items: center;
  position: relative;
}

.plan-logo {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-main), rgba(132,80,184,0.9));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  box-shadow: 0 4px 10px rgba(111,61,156,0.2);
}

.plan-logo img {
  width: 24px;
  height: auto;
  filter: brightness(0) invert(1);
}

.plan-name {
  margin: 0;
  font-size: 20px;
  color: var(--color-sub-dark);
  font-weight: 700;
}

.plan-card.recommended .plan-name {
  background: linear-gradient(135deg, var(--color-accent), rgba(201,50,121,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.plan-body {
  padding: 15px 25px 25px;
  flex-grow: 1;
  position: relative;
}

.plan-body:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(47,28,64,0.05), transparent);
}

.plan-description {
  font-size: 16px;
  line-height: 1.7;
  min-height: 120px;
  color: var(--color-dark-gray);
}

.plan-footer {
  padding: 25px;
}

.plan-button {
  display: block;
  background: linear-gradient(135deg, var(--color-accent), rgba(201,50,121,0.9));
  color: var(--color-white);
  text-align: center;
  padding: 14px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(201,50,121,0.2);
  position: relative;
  overflow: hidden;
}

.plan-button:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: all 0.6s ease;
}

.plan-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 15px rgba(201,50,121,0.25);
  color: var(--color-white);
  background: linear-gradient(135deg, rgba(201,50,121,0.9), var(--color-accent));
}

.plan-button:hover:before {
  left: 100%;
}

/* サポートフローセクション */
.support-flow-section {
  padding: 80px 0;
  background-color: var(--color-light-gray);
  position: relative;
}

.support-flow-section .section-title {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  color: var(--color-main);
  margin-bottom: 40px;
}

.support-flow-section .section-description {
  text-align: center;
  font-size: 18px;
  color: var(--color-dark-gray);
  margin-bottom: 80px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* フローコンテナ - 横並びレイアウト */
.support-flow-columns {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 40px;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
/* 矢印の追加 */
.support-flow-columns::before {
  content: '';
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  height: 0px;
  background: linear-gradient(to right, 
    transparent 12%, 
    var(--color-main) 12%, 
    var(--color-main) 38%, 
    transparent 38%, 
    transparent 42%, 
    var(--color-main) 42%, 
    var(--color-main) 58%, 
    transparent 58%, 
    transparent 62%, 
    var(--color-main) 62%, 
    var(--color-main) 88%, 
    transparent 88%
  );
  z-index: 1;
}
/* 矢印の先端部分 */
.support-flow-column:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 115px;
  right: -25px;
  width: 0;
  height: 0;
  border-left: 13px solid var(--color-main);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  z-index: 2;
}

.support-flow-column {
  flex: 1;
  position: relative;
  z-index: 3;
}


.support-flow-card {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 8px 30px rgba(47,28,64,0.08);
  border: 1px solid rgba(47,28,64,0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ステップ画像 */
.flow-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.flow-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.support-flow-card:hover .flow-image img {
  transform: scale(1.05);
}


.flow-number {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  box-shadow: 0 4px 15px rgba(111,61,156,0.3);
  z-index: 4;
  border: 4px solid var(--color-white);
  transition: all 0.3s ease;
}

/* STEP ラベル */
.flow-number::before {
  content: 'STEP';
  position: absolute;
  top: -25px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-main);
}


/* カードコンテンツ */
.flow-content {
  padding: 40px 24px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flow-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-main);
  margin-bottom: 16px;
  text-align: center;
  transition: color 0.3s ease;
}

.flow-description {
  font-size: 14px;
  color: var(--color-dark-gray);
  line-height: 1.7;
  text-align: left;
  flex: 1;
}

@media (max-width: 768px) {
  .support-flow-section {
    padding: 60px 0;
  }
  
  .support-flow-section .section-title {
    font-size: 28px;
    margin-bottom: 12px;
  }
  
  .support-flow-section .section-description {
    font-size: 16px;
    margin-bottom: 50px;
  }
  
  /* モバイルでは縦並びに変更 */
  .support-flow-columns {
    flex-direction: column;
    gap: 30px;
    max-width: 400px;
  }
  
  /* 矢印を縦向きに変更 */
  .support-flow-columns::before {
    display: none;
  }
  
  .support-flow-column:not(:last-child)::after {
    top: auto;
    bottom: -20px;
    right: 50%;
    transform: translateX(50%) rotate(90deg);
    border-left: 8px solid var(--color-main);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
  }
  
  .flow-image {
    height: 180px;
  }
  
  .flow-number {
    width: 50px;
    height: 50px;
    font-size: 18px;
    top: -25px;
  }
  
  .flow-number::before {
    top: -22px;
    font-size: 9px;
  }
  
  .flow-content {
    padding: 30px 20px 24px;
  }
  
  .flow-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  
  .flow-description {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .support-flow-section {
    padding: 50px 0;
  }
  
  .support-flow-section .section-title {
    font-size: 24px;
  }
  
  .support-flow-section .section-description {
    font-size: 14px;
    margin-bottom: 40px;
  }
  
  .support-flow-columns {
    gap: 25px;
    max-width: 100%;
  }
  
  .flow-image {
    height: 160px;
  }
  
  .flow-content {
    padding: 25px 16px 20px;
  }
  
  .flow-title {
    font-size: 16px;
    margin-bottom: 10px;
  }
  
  .flow-description {
    font-size: 13px;
  }
}

/* FAQセクション */
.faq-section {
  padding: 60px 0;
  background-color: var(--color-white);
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background-color: var(--color-background);
  border-radius: 5px;
  margin-bottom: 15px;
  overflow: hidden;
}

.faq-question {
  padding: 20px;
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}

.faq-toggle {
  width: 20px;
  height: 20px;
  position: relative;
}

.faq-toggle:before,
.faq-toggle:after {
  content: '';
  position: absolute;
  background-color: var(--color-main);
  transition: transform 0.3s ease;
}

.faq-toggle:before {
  width: 20px;
  height: 2px;
  top: 9px;
  left: 0;
}

.faq-toggle:after {
  width: 2px;
  height: 20px;
  top: 0;
  left: 9px;
}

.faq-item.active .faq-toggle:after {
  transform: rotate(90deg);
}

.faq-answer {
  padding: 0 20px 20px;
  display: none;
}

.faq-item.active .faq-answer {
  display: block;
}

.faq-answer p {
  margin-bottom: 15px;
  line-height: 1.6;
}

.faq-answer ul {
  margin-bottom: 15px;
  padding-left: 20px;
}

.faq-answer li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.faq-answer h4 {
  margin: 25px 0 10px;
  font-size: 16px;
}

/* CTAセクション */
.cta-section {
  padding: 60px 0;
  background: linear-gradient(135deg, var(--color-sub-dark), var(--color-main));
  color: var(--color-white);
  text-align: center;
}

.cta-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: var(--color-white);
}

.cta-description {
  font-size: 16px;
  padding:20px;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.cta-button .wp-block-button__link {
  background-color: var(--color-accent);
  padding: 15px 30px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .price-structure-section {
    padding: 60px 0;
  }
  
  .section-title {
    font-size: 28px;
  }
  
  .price-structure-row {
    flex-direction: column;
  }
  
  .price-structure-col {
    padding: 20px;
  }

  .price-structure-col:first-child {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid rgba(47,28,64,0.05);
  }
  
  .structure-label {
    font-size: 18px;
  }
  
  .plus-icon {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
  
  .plans-columns {
    gap: 20px;
  }
  
  .plan-description {
    min-height: auto;
  }
  
  .plan-header {
    padding: 25px 20px 15px;
  }
  
  .plan-body {
    padding: 10px 20px 20px;
  }
  
  .plan-footer {
    padding: 20px;
  }
  
  .plan-name {
    font-size: 18px;
  }
  
  .plan-logo {
    width: 36px;
    height: 36px;
  }
  
  .plan-button {
    padding: 12px 16px;
    font-size: 14px;
  }
}

  .support-flow-card {
    margin-bottom: 20px;
  }

  .support-item {
    flex-direction: column;
    padding: 20px;
  }

  .support-item.reverse {
    flex-direction: column;
  }

  .support-item-content {
    padding-right: 0;
    margin-bottom: 20px;
  }

  .support-item.reverse .support-item-content {
    padding-left: 0;
  }

  .support-item-number {
    top: -15px;
    left: 20px;
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .support-item-title {
    font-size: 18px;
  }

  .cta-title {
    font-size: 24px;
  }

  .cta-buttons {
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .price-structure-section {
    padding: 50px 0;
  }
  
  .section-title {
    font-size: 24px;
    margin-bottom: 40px;
  }
  
  .section-title:after {
    width: 60px;
    bottom: -12px;
  }
  
  .plan-recommend-badge {
    top: 10px;
    right: 10px;
    font-size: 12px;
    padding: 4px 12px;
  }
}
@media (max-width: 480px) {
  .support-flow-section,
  .support-section,
  .faq-section,
  .cta-section {
    padding: 40px 0;
  }

  .section-title {
    font-size: 22px;
  }
}
/* Hero Section */

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: none;
    background-size: cover;
    opacity: 0.1;
    z-index: -1;
    animation: subtle-float 20s ease-in-out infinite alternate;
}

@keyframes subtle-float {
    0% {
        transform: translateY(0) translateX(0);
    }
    100% {
        transform: translateY(-20px) translateX(20px);
    }
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.hero-text {
    flex: 1;
    max-width: 55%;
}

.hero-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    animation: fade-in-up 0.6s ease-out;
}

.hero-description {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
    max-width: 90%;
    animation: fade-in-up 0.8s ease-out;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    animation: fade-in-up 1s ease-out;
}

.primary-cta-button .wp-block-button__link {
    background-color: #C93279;
    color: #FFFFFF;
    font-weight: 700;
    padding: 16px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(201,50,121,0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.primary-cta-button .wp-block-button__link:hover {
    background-color: #C93279;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201,50,121,0.4);
}

.primary-cta-button .wp-block-button__link:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.6s ease;
}

.primary-cta-button .wp-block-button__link:hover:before {
    left: 100%;
}

.secondary-cta-button .wp-block-button__link {
    background-color: transparent;
    color: #FFFFFF;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.8);
    transition: all 0.3s ease;
}

.secondary-cta-button .wp-block-button__link:hover {
    background-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.hero-image {
    flex: 1;
    max-width: 45%;
    position: relative;
}

.device-mockup {
    margin: 0;
    transform: perspective(1000px) rotateY(-8deg);
    transition: transform 0.5s ease;
    filter: drop-shadow(0 20px 40px rgba(47,28,64,0.2));
}

.device-mockup:hover {
    transform: perspective(1000px) rotateY(-2deg);
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-15px);
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* レスポンシブデザイン */
@media (max-width: 992px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap:5px;
    }
    
    .hero-text, .hero-image {
        max-width: 100%;
        text-align: center;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-description {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-buttons {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: 60px 0;
    }
    .hero-text {
        text-align: center;
    }    
    .hero-title {
        font-size: 32px;
    }
    .hero-description {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 50px 0;
    }
    .hero-text {
        text-align: center;
    }
    .hero-title {
        font-size: 28px;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .hero-buttons .wp-block-button {
        width: 100%;
    }
    
    .hero-buttons .wp-block-button__link {
        width: 100%;
        text-align: center;
    }
    
    .device-mockup {
        transform: perspective(1000px) rotateY(0);
    }
}

/* プロワンサポートナビゲーションセクション */
.proone-support-navigation-section {
    padding: 80px 0;
    background-color: var(--color-white);
    position: relative;
}

.proone-support-navigation-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(111,61,156,0.03) 0%, transparent 50%);
    pointer-events: none;
}

.proone-support-nav-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.proone-support-nav-header .proone-support-section-title {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-main);
    margin-bottom: 16px;
    position: relative;
}

.proone-support-nav-header .proone-support-section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-main), var(--color-sub-light));
    border-radius: 2px;
}

.proone-support-nav-header .proone-support-section-subtitle {
    font-size: 18px;
    color: var(--color-dark-gray);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* カードグリッド */
.proone-support-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 2;
}

/* カードベーススタイル */
.proone-support-nav-card {
    position: relative;
    height: 320px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: white;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 15px 40px rgba(47,28,64,0.15);
    border: 1px solid rgba(255,255,255,0.1);
}

.proone-support-nav-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(47,28,64,0.25);
    text-decoration: none;
    color: white;
}

/* グラデーションオーバーレイ */
.proone-support-nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(111,61,156,0.85) 0%, rgba(84,49,139,0.65) 100%);
    z-index: 2;
    transition: all 0.4s ease;
}

.proone-support-nav-card:hover::before {
    background: linear-gradient(135deg, rgba(111,61,156,0.7) 0%, rgba(84,49,139,0.5) 100%);
}

/* 背景画像 */
.proone-support-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    z-index: 1;
}

.proone-support-nav-card:hover .proone-support-card-bg {
    transform: scale(1.08);
}

/* 個別背景画像設定 */
.proone-support-nav-card.proone-support-system .proone-support-card-bg {
    background-image: url("/lp-collection-assets/v1/proone-assets/2a96f3158ac1c5.png");
}

.proone-support-nav-card.proone-support-faq .proone-support-card-bg {
    background-image: url("/lp-collection-assets/v1/proone-assets/144919427e6549.png");
}

.proone-support-nav-card.proone-support-security .proone-support-card-bg {
    background-image: url("/lp-collection-assets/v1/proone-assets/ab72823ee5372d.png");
}

/* カードコンテンツ */
.proone-support-card-content {
    position: relative;
    z-index: 3;
    padding: 35px 30px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.proone-support-card-main {
    flex: 1;
}

.proone-support-card-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 16px;
    color: white;
    line-height: 1.3;
    transition: all 0.3s ease;
}

.proone-support-nav-card:hover .proone-support-card-title {
    transform: translateY(-3px);
}

.proone-support-card-description {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.9);
    margin-bottom: 25px;
    font-weight: 400;
}

/* タグエリア */
.proone-support-card-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
}

.proone-support-tag {
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.3);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.proone-support-nav-card:hover .proone-support-tag {
    background: rgba(255,255,255,0.35);
    border-color: rgba(255,255,255,0.5);
    transform: translateY(-2px);
}

/* 矢印アイコン */
.proone-support-card-arrow {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 4;
}

.proone-support-nav-card:hover .proone-support-card-arrow {
    background: var(--color-accent);
    transform: translateX(8px) scale(1.1);
    border-color: var(--color-accent);
    box-shadow: 0 8px 20px rgba(201,50,121,0.4);
}

.proone-support-card-arrow svg {
    transition: transform 0.3s ease;
}

.proone-support-nav-card:hover .proone-support-card-arrow svg {
    transform: translateX(2px);
}

/* レスポンシブデザイン */
@media (max-width: 992px) {
    .proone-support-navigation-section {
        padding: 60px 0;
    }
    
    .proone-support-nav-header {
        margin-bottom: 50px;
    }
    
    .proone-support-nav-header .proone-support-section-title {
        font-size: 28px;
    }
    
    .proone-support-nav-header .proone-support-section-subtitle {
        font-size: 16px;
    }
    
    .proone-support-nav-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .proone-support-navigation-section {
        padding: 50px 0;
    }
    
    .proone-support-nav-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .proone-support-nav-card {
        height: 280px;
    }
    
    .proone-support-card-content {
        padding: 30px 25px 25px;
    }
    
    .proone-support-card-title {
        font-size: 22px;
        margin-bottom: 12px;
    }
    
    .proone-support-card-description {
        font-size: 15px;
        margin-bottom: 20px;
    }
    
    .proone-support-tag {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .proone-support-card-arrow {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
    }
}

@media (max-width: 480px) {
    .proone-support-navigation-section {
        padding: 40px 0;
    }
    
    .proone-support-nav-header .proone-support-section-title {
        font-size: 24px;
    }
    
    .proone-support-nav-header .proone-support-section-subtitle {
        font-size: 14px;
    }
    
    .proone-support-nav-card {
        height: 260px;
    }
    
    .proone-support-card-content {
        padding: 25px 20px 20px;
    }
    
    .proone-support-card-title {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .proone-support-card-description {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 18px;
    }
    
    .proone-support-card-tags {
        gap: 8px;
    }
    
    .proone-support-tag {
        font-size: 12px;
        padding: 5px 10px;
    }
    
    .proone-support-card-arrow {
        width: 40px;
        height: 40px;
    }
    
    .proone-support-card-arrow svg {
        width: 16px;
        height: 16px;
    }
}

/* アニメーション効果 */
@keyframes prooneCardAppear {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.proone-support-nav-card {
    animation: prooneCardAppear 0.6s ease-out;
}

.proone-support-nav-card:nth-child(1) {
    animation-delay: 0.1s;
}

.proone-support-nav-card:nth-child(2) {
    animation-delay: 0.2s;
}

.proone-support-nav-card:nth-child(3) {
    animation-delay: 0.3s;
}

/* フォーカス状態 */
.proone-support-nav-card:focus {
    outline: 3px solid var(--color-main);
    outline-offset: 4px;
}

/* 減速モーションの設定 */
@media (prefers-reduced-motion: reduce) {
    .proone-support-nav-card,
    .proone-support-card-bg,
    .proone-support-card-title,
    .proone-support-tag,
    .proone-support-card-arrow,
    .proone-support-card-arrow svg {
        animation: none;
        transition: none;
    }
    
    .proone-support-nav-card:hover {
        transform: none;
    }
    
    .proone-support-nav-card:hover .proone-support-card-bg {
        transform: none;
    }
}

/* モダン料金プランセクション */
.price-structure-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #FCF6FB 0%, #FCF6FB 100%);
  position: relative;
  overflow: hidden;
}

.price-structure-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,50,121,0.03) 0%, transparent 70%);
  z-index: 0;
}

.section-title {
  text-align: center;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
  width:100%;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-main), var(--color-sub-light));
  border-radius: 2px;
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* 料金体系説明 */
.price-structure-explanation {
  max-width: 900px;
  margin: 0 auto 80px;
  position: relative;
  z-index: 2;
}

.structure-formula {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 40px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(111,61,156,0.1);
  box-shadow: 0 10px 40px rgba(47,28,64,0.05);
}

.formula-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  justify-content: center;
}

.formula-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 8px 20px rgba(111,61,156,0.2);
}

.formula-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-main);
  margin-bottom: 4px;
}

.formula-content p {
  font-size: 14px;
  color: var(--color-dark-gray);
  margin: 0;
}

.formula-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.plus-symbol {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--color-accent), rgba(201,50,121,0.8));
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 6px 15px rgba(201,50,121,0.3);
}

/* モダンプランカード */
.modern-price-plans {
  position: relative;
  z-index: 2;
}

.plans-scroll-container {
  display: flex;
  gap: 24px;
  padding: 20px 0 40px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* PCでは横スクロールなし、モバイルで横スクロール有効 */
@media (min-width: 1400px) {
  .plans-scroll-container {
    justify-content: center;
    overflow-x: visible;
  }
}

@media (max-width: 1399px) and (min-width: 769px) {
  .plans-scroll-container {
    overflow-x: auto;
  }
  
  .plans-scroll-container::-webkit-scrollbar {
    height: 8px;
  }

  .plans-scroll-container::-webkit-scrollbar-track {
    background: rgba(47,28,64,0.05);
    border-radius: 4px;
  }

  .plans-scroll-container::-webkit-scrollbar-thumb {
    background: var(--color-main);
    border-radius: 4px;
  }
}

@media (max-width: 768px) {
  .plans-scroll-container {
    overflow-x: auto;
  }
  
  .plans-scroll-container::-webkit-scrollbar {
    height: 8px;
  }

  .plans-scroll-container::-webkit-scrollbar-track {
    background: rgba(47,28,64,0.05);
    border-radius: 4px;
  }

  .plans-scroll-container::-webkit-scrollbar-thumb {
    background: var(--color-main);
    border-radius: 4px;
  }
}

.modern-plan-card {
  min-width: 320px;
  max-width: 320px;
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(47,28,64,0.08);
  border: 1px solid rgba(47,28,64,0.05);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  scroll-snap-align: start;
  position: relative;
  display: flex;
  flex-direction: column;
}

.modern-plan-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 60px rgba(47,28,64,0.15);
  border-color: var(--color-main);
}

/* 人気プランのたすき掛けリボン */
.modern-plan-card.popular {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, var(--color-main), var(--color-sub-light)) border-box;
}

.popular-ribbon {
  position: absolute;
  top: 30px;
  right: -45px;
  background: linear-gradient(135deg, var(--color-accent), rgba(201,50,121,0.9));
  color: white;
  padding: 8px 45px;
  font-size: 12px;
  font-weight: 700;
  transform: rotate(45deg);
  box-shadow: 0 4px 12px rgba(201,50,121,0.3);
  z-index: 10;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.popular-ribbon::before,
.popular-ribbon::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border-style: solid;
}

.popular-ribbon::before {
  left: 0;
  border-width: 5px 0 0 5px;
  border-color: transparent transparent transparent rgba(201,50,121,0.8);
}

.popular-ribbon::after {
  right: 0;
  border-width: 0 5px 5px 0;
  border-color: transparent rgba(201,50,121,0.8) transparent transparent;
}

/* プランカードヘッダー */
.plan-card-header {
  padding: 32px 24px 20px;
  text-align: center;
  position: relative;
}

.plan-badge {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.plan-badge.basic {
  background: linear-gradient(135deg, #77677F, #AA96B6);
  color: white;
}

.plan-badge.standard {
  background: linear-gradient(135deg, #6F3D9C, #8450B8);
  color: white;
}

.plan-badge.advance {
  background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
  color: white;
}

.plan-badge.professional {
  background: linear-gradient(135deg, #6F3D9C, #6F3D9C);
  color: white;
}

.plan-price {
  margin-bottom: 8px;
}

.price-label {
  display: block;
  font-size: 14px;
  color: var(--color-dark-gray);
  margin-bottom: 4px;
}

.price-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-sub-dark);
}

/* プランカードボディ */
.plan-card-body {
  padding: 0 24px 24px;
  flex: 1;
}

.plan-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-sub-dark);
  margin-bottom: 8px;
  text-align: center;
}

.plan-target {
  font-size: 14px;
  color: var(--color-main);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  padding: 6px 12px;
  background: rgba(111,61,156,0.1);
  border-radius: 20px;
  display: inline-block;
  width: 100%;
}

.plan-description {
  font-size: 15px;
  color: var(--color-dark-gray);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.6;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
}

.plan-features li::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
  border-radius: 50%;
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
}

.plan-features li::after {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 1px;
  color: white;
  font-size: 10px;
  font-weight: 700;
  margin-left: -16px;
  margin-top: 1px;
}

/* プランカードフッター */
.plan-card-footer {
  padding: 0 24px 32px;
}

.plan-cta-button {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
  color: white;
  text-align: center;
  padding: 16px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(111,61,156,0.2);
  position: relative;
  overflow: hidden;
}

.plan-cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.6s ease;
}

.plan-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(111,61,156,0.3);
  color: white;
  text-decoration: none;
}

.plan-cta-button:hover::before {
  left: 100%;
}

.plan-cta-button.popular-cta {
  background: linear-gradient(135deg, var(--color-accent), rgba(201,50,121,0.9));
  box-shadow: 0 6px 20px rgba(201,50,121,0.2);
}

.plan-cta-button.popular-cta:hover {
  box-shadow: 0 8px 25px rgba(201,50,121,0.4);
}

/* 補足説明 */
.price-note {
  margin-top: 60px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.price-note p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.8);
  padding: 16px 24px;
  border-radius: 50px;
  font-size: 14px;
  color: var(--color-dark-gray);
  margin: 0;
  border: 1px solid rgba(111,61,156,0.1);
}

.price-note svg {
  color: var(--color-main);
  flex-shrink: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .price-structure-section {
    padding: 80px 0;
  }
  
  .section-title {
    font-size: 28px;
    margin-bottom: 40px;
  }
  
  .structure-formula {
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
  }
  
  .formula-item {
    justify-content: center;
    text-align: center;
  }
  
  .formula-plus {
    transform: rotate(90deg);
  }
  
  .plans-scroll-container {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .modern-plan-card {
    min-width: 280px;
    max-width: 280px;
  }
  
  .plan-card-header {
    padding: 24px 20px 16px;
  }
  
  .plan-card-body {
    padding: 0 20px 20px;
  }
  
  .plan-card-footer {
    padding: 0 20px 24px;
  }
  
  .price-note p {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .price-structure-section {
    padding: 60px 0;
  }
  
  .section-title {
    font-size: 24px;
    margin-bottom: 30px;
  }
  
  .structure-formula {
    padding: 24px 16px;
  }
  
  .formula-icon {
    width: 48px;
    height: 48px;
  }
  
  .formula-content h3 {
    font-size: 18px;
  }
  
  .plus-symbol {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .plans-scroll-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .modern-plan-card {
    min-width: 260px;
    max-width: 260px;
  }
  
  .popular-ribbon {
    font-size: 12px;
    padding: 6px 35px;
  }
  
  .plan-title {
    font-size: 20px;
  }
  
  .price-value {
    font-size: 24px;
  }
}

/* アニメーション効果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modern-plan-card {
  animation: fadeInUp 0.6s ease-out;
}

.modern-plan-card:nth-child(1) { animation-delay: 0.1s; }
.modern-plan-card:nth-child(2) { animation-delay: 0.2s; }
.modern-plan-card:nth-child(3) { animation-delay: 0.3s; }
.modern-plan-card:nth-child(4) { animation-delay: 0.4s; }

/* フォーカス状態 */
.plan-cta-button:focus {
  outline: 3px solid var(--color-main);
  outline-offset: 2px;
}

/* 減速モーション対応 */
@media (prefers-reduced-motion: reduce) {
  .modern-plan-card,
  .plan-cta-button {
    animation: none;
    transition: none;
  }
  
  .modern-plan-card:hover,
  .plan-cta-button:hover {
    transform: none;
  }
}

/**
 * ProOne Features Showcase Component
 * assets/css/features-showcase.css
 */

.proone-features-showcase {
  padding: 80px 0;
  background: 
    linear-gradient(135deg, rgba(111,61,156,0.02) 0%, rgba(255,255,255,0.95) 40%, #FFFFFF 100%),
    radial-gradient(circle at 20% 30%, rgba(111,61,156,0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(132,80,184,0.02) 0%, transparent 50%);
  position: relative;
  overflow: hidden;
}

/* 先進的な背景要素 */
.proone-features-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M0 0h60v60H0z" fill="none" stroke="rgba(111,61,156,0.02)" stroke-width="1"/></pattern></defs><rect width="60" height="60" fill="url("%23grid")"/></svg>'),
    radial-gradient(circle at 15% 25%, rgba(111,61,156,0.04) 0%, transparent 30%),
    radial-gradient(circle at 85% 75%, rgba(201,50,121,0.03) 0%, transparent 30%);
  opacity: 0.6;
  z-index: 1;
}

.proone-features-showcase::after {
  content: '';
  position: absolute;
  top: 10%;
  right: 5%;
  width: 200px;
  height: 200px;
  background: 
    radial-gradient(circle, transparent 30%, rgba(111,61,156,0.02) 31%, rgba(111,61,156,0.02) 32%, transparent 33%),
    radial-gradient(circle, transparent 40%, rgba(111,61,156,0.01) 41%, rgba(111,61,156,0.01) 42%, transparent 43%);
  border-radius: 50%;
  z-index: 1;
  animation: float-subtle 20s ease-in-out infinite;
}

@keyframes float-subtle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

/* セクションタイトル */
.proone-features-showcase__title {
  font-size: 36px;
  font-weight: 800;
  text-align: center;
  color: var(--color-sub-dark);
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.proone-features-showcase__title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-main), var(--color-sub-light));
  border-radius: 2px;
}

.proone-features-showcase__subtitle {
  font-size: 18px;
  text-align: center;
  color: var(--color-dark-gray);
  margin-bottom: 60px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}

/* グリッドレイアウト */
.proone-features-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

/* カードデザイン */
.proone-features-showcase__card {
  display: block;
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%);
  border-radius: 20px;
  border: 1px solid rgba(111,61,156,0.08);
  box-shadow: 
    0 8px 32px rgba(47,28,64,0.04),
    0 2px 8px rgba(47,28,64,0.02);
  text-decoration: none;
  text-align: center;
  color: inherit;
  overflow: hidden;
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.proone-features-showcase__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-main), var(--color-sub-light));
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.proone-features-showcase__card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 40px rgba(111,61,156,0.12),
    0 8px 16px rgba(47,28,64,0.04);
  border-color: rgba(111,61,156,0.15);
}

.proone-features-showcase__card:hover::before {
  opacity: 1;
}

/* カードヘッダー */
.proone-features-showcase__card-header {
  padding: 36px 32px 24px;
  margin: 0 auto;
  background: linear-gradient(135deg, 
    rgba(111,61,156,0.01) 0%, 
    rgba(255,255,255,0.8) 100%);
}

.proone-features-showcase__icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto 0;
  background: linear-gradient(135deg, 
    rgba(111,61,156,0.08) 0%, 
    rgba(132,80,184,0.06) 100%);
  border: 2px solid rgba(111,61,156,0.1);
  transition: all 0.3s ease;
}

.proone-features-showcase__icon::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, 
    rgba(111,61,156,0.12),
    rgba(132,80,184,0.08));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.proone-features-showcase__card:hover .proone-features-showcase__icon::before {
  opacity: 1;
}

.proone-features-showcase__icon svg {
  color: var(--color-main);
  transition: all 0.3s ease;
  width: 36px;
  height: 36px;
}

.proone-features-showcase__card:hover .proone-features-showcase__icon svg {
  color: var(--color-sub-light);
  transform: scale(1.05);
}

/* カードボディ */
.proone-features-showcase__card-body {
  padding: 8px 32px 32px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.proone-features-showcase__card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-sub-dark);
  margin-bottom: 16px;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.proone-features-showcase__card:hover .proone-features-showcase__card-title {
  color: var(--color-main);
}

.proone-features-showcase__card-desc {
  font-size: 15px;
  color: var(--color-dark-gray);
  line-height: 1.7;
  margin: 0 0 24px 0;
  flex-grow: 1;
}

/* アクション誘導要素 */
.proone-features-showcase__card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-main);
  font-size: 14px;
  font-weight: 700;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(111,61,156,0.08);
  transition: all 0.3s ease;
  opacity: 0.7;
}

.proone-features-showcase__card:hover .proone-features-showcase__card-action {
  opacity: 1;
  color: var(--color-sub-light);
}

.proone-features-showcase__card-action svg {
  transition: transform 0.3s ease;
  width: 16px;
  height: 16px;
}

.proone-features-showcase__card:hover .proone-features-showcase__card-action svg {
  transform: translateX(4px);
}

/* CTAボタン */
.proone-features-showcase__cta {
  text-align: center;
  position: relative;
  z-index: 2;
}

.proone-features-showcase__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  padding: 18px 36px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    0 8px 24px rgba(111,61,156,0.25),
    0 4px 12px rgba(47,28,64,0.1);
  position: relative;
  overflow: hidden;
}

.proone-features-showcase__cta-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.proone-features-showcase__cta-button:hover::before {
  width: 300px;
  height: 300px;
}

.proone-features-showcase__cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 12px 32px rgba(111,61,156,0.35),
    0 6px 16px rgba(47,28,64,0.15);
  color: var(--color-white);
  text-decoration: none;
}

.proone-features-showcase__cta-button svg {
  transition: transform 0.3s ease;
}

.proone-features-showcase__cta-button:hover svg {
  transform: translateX(4px);
}

/* レスポンシブデザイン */
@media (max-width: 1200px) {
  .proone-features-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  
  .proone-features-showcase__card {
    min-height: 280px;
  }
  
  .proone-features-showcase__icon {
    width: 72px;
    height: 72px;
  }
  
  .proone-features-showcase__icon svg {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 992px) {
  .proone-features-showcase {
    padding: 60px 0;
  }
  
  .proone-features-showcase__title {
    font-size: 36px;
  }
  
  .proone-features-showcase__subtitle {
    font-size: 16px;
    margin-bottom: 50px;
  }
  
  .proone-features-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 50px;
  }
  
  .proone-features-showcase__card {
    min-height: 260px;
  }
  
  .proone-features-showcase__card-header {
    padding: 32px 28px 20px;
  }
  
  .proone-features-showcase__card-body {
    padding: 8px 28px 28px;
  }
  
  .proone-features-showcase__card-title {
    font-size: 18px;
  }
  
  .proone-features-showcase__card-desc {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .proone-features-showcase {
    padding: 50px 0;
  }
  
  .proone-features-showcase__title {
    font-size: 28px;
  }
  
  .proone-features-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }
  
  .proone-features-showcase__card {
    min-height: auto;
  }
  
  .proone-features-showcase__card-header {
    padding: 28px 24px 16px;
  }
  
  .proone-features-showcase__card-body {
    padding: 8px 24px 24px;
  }
  
  .proone-features-showcase__icon {
    width: 64px;
    height: 64px;
  }
  
  .proone-features-showcase__icon svg {
    width: 28px;
    height: 28px;
  }
  
  .proone-features-showcase__cta-button {
    font-size: 16px;
    padding: 16px 32px;
  }
}

@media (max-width: 480px) {
  .proone-features-showcase {
    padding: 40px 0;
  }
  
  .proone-features-showcase__title {
    font-size: 24px;
  }
  
  .proone-features-showcase__subtitle {
    font-size: 15px;
    margin-bottom: 40px;
  }
  
  .proone-features-showcase__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
  }
  
  .proone-features-showcase__card-header {
    padding: 24px 20px 12px;
  }
  
  .proone-features-showcase__card-body {
    padding: 8px 20px 20px;
  }
  
  .proone-features-showcase__card-title {
    font-size: 18px;
  }
  
  .proone-features-showcase__card-desc {
    display: none;
  }
  
  .proone-features-showcase__icon {
    width: 56px;
    height: 56px;
  }
  
  .proone-features-showcase__icon svg {
    width: 24px;
    height: 24px;
  }
  
  .proone-features-showcase__cta-button {
    font-size: 15px;
    padding: 14px 28px;
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* アクセシビリティ */
.proone-features-showcase__card:focus {
  outline: 3px solid var(--color-main);
  outline-offset: 2px;
}

.proone-features-showcase__cta-button:focus {
  outline: 3px solid var(--color-white);
  outline-offset: 2px;
}

/* アニメーション制御 */
@media (prefers-reduced-motion: reduce) {
  .proone-features-showcase__card,
  .proone-features-showcase__cta-button,
  .proone-features-showcase__icon svg,
  .proone-features-showcase::after {
    transition: none;
    animation: none;
  }
  
  .proone-features-showcase__card:hover,
  .proone-features-showcase__cta-button:hover {
    transform: none;
  }
}

        /* Value Proposition Section */
        .value-proposition-section {
            padding: 80px 0;
            background-color: var(--color-white);
            position: relative;
            overflow: hidden;
        }

        .value-proposition-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(111,61,156,0.03) 0%, transparent 70%);
            border-radius: 50%;
        }

        .value-proposition-section::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(201,50,121,0.02) 0%, transparent 70%);
            border-radius: 50%;
        }

        .value-section-header {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
            z-index: 2;
        }

        .value-section-badge {
            display: inline-block;
            background-color: rgba(111,61,156,0.1);
            color: var(--color-main);
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 20px;
        }

        .value-section-title {
            font-size: 36px;
            font-weight: 800;
            color: var(--color-sub-dark);
            margin-bottom: 20px;
            line-height: 1.3;
        }

        .value-section-subtitle {
            font-size: 18px;
            color: var(--color-dark-gray);
            max-width: 1000px;
            margin: 0 auto;
            line-height: 1.8;
        }

        /* Carousel Container */
        .value-carousel-container {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            z-index: 2;
        }

        .value-carousel {
            position: relative;
            overflow: visible;
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(47,28,64,0.08);
            background: linear-gradient(135deg, #FCF6FB 0%, #FFFFFF 100%);
        }

        .carousel-track {
            display: flex;
            transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: transform;
        }

        .carousel-slide {
            flex: 0 0 100%;
            width: 100%;
            min-height: 450px;
        }

        .slide-content {
            display: flex;
            align-items: center;
            height: 100%;
            padding: 60px;
            gap: 60px;
        }

        .slide-image {
            flex: 0 0 50%;
            position: relative;
            min-height: 350px;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(47,28,64,0.1);
        }

        .slide-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .carousel-slide.active .slide-image img {
            transform: scale(1.02);
        }

        .slide-text {
            flex: 1;
            padding-left: 20px;
        }

        .slide-number {
            display: inline-block;
            background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
            color: var(--color-white);
            font-size: 14px;
            font-weight: 700;
            padding: 8px 20px;
            border-radius: 50px;
            margin-bottom: 24px;
            box-shadow: 0 4px 12px rgba(111,61,156,0.3);
        }

        .slide-title {
            font-size: 36px;
            font-weight: 800;
            color: var(--color-sub-dark);
            margin-bottom: 24px;
            line-height: 1.3;
        }

        .slide-description {
            font-size: 18px;
            color: var(--color-text);
            line-height: 1.8;
            margin-bottom: 32px;
        }

        .slide-benefits {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
        }

        .benefit-tag {
            background-color: rgba(111,61,156,0.1);
            color: var(--color-main);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .benefit-icon {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Carousel Controls */
        .carousel-controls {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
            z-index: 10;
        }

        .carousel-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgb(196 196 196 / 50%);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .carousel-dot.active {
            background-color: var(--color-main);
            transform: scale(1.2);
            box-shadow: 0 4px 12px rgba(111,61,156,0.4);
        }

        .carousel-dot:hover:not(.active) {
            background-color: rgba(255,255,255,0.8);
            transform: scale(1.1);
        }

        /* Navigation Arrows */
        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.95);
            border: 2px solid var(--color-mid-gray);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
            opacity: 0.7;
        }

        .carousel-nav:hover {
            background: var(--color-white);
            border-color: var(--color-main);
            opacity: 1;
            transform: translateY(-50%) scale(1.1);
        }

        .carousel-nav.prev {
            left: 20px;
        }

        .carousel-nav.next {
            right: 20px;
        }

        .carousel-nav svg {
            width: 30px;
            height: 30px;
            fill: var(--color-main);
        }

        /* Progress Bar */
        .carousel-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--color-main), var(--color-sub-light));
            transform-origin: left;
            transition: transform 0.1s linear;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .slide-content {
                flex-direction: column;
                padding: 40px;
                gap: 40px;
                text-align: center;
            }

            .slide-image {
                flex: 0 0 auto;
                width: 100%;
                max-width: 500px;
                min-height: 280px;
            }

            .slide-text {
                padding-left: 0;
            }

            .slide-title {
                font-size: 28px;
            }

            .slide-description {
                font-size: 16px;
            }

            .carousel-nav {
                width: 44px;
                height: 44px;
            }

            .carousel-nav.prev {
                left: 15px;
            }

            .carousel-nav.next {
                right: 15px;
            }
        }

        @media (max-width: 768px) {
            .value-proposition-section {
                padding: 60px 0;
            }

            .section-title {
                font-size: 28px;
            }

            .section-subtitle {
                font-size: 16px;
            }

            .carousel-slide {
                min-height: 400px;
            }

            .slide-content {
                padding: 30px 20px;
                gap: 30px;
            }

            .slide-image {
                min-height: 220px;
            }

            .slide-title {
                font-size: 24px;
            }

            .slide-description {
                font-size: 15px;
            }

            .carousel-nav {
                width: 40px;
                height: 40px;
            }

            .carousel-nav svg {
                width: 18px;
                height: 18px;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 0 20px;
            }

            .slide-content {
                padding: 25px 15px;
            }

            .slide-title {
                font-size: 22px;
            }

            .slide-description {
                font-size: 14px;
            }

            .benefit-tag {
                font-size: 12px;
                padding: 6px 12px;
            }

            .carousel-nav {
                display: none;
            }
        }

        /* Animation */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .carousel-slide.active .slide-text > * {
            animation: fadeInUp 0.8s ease-out;
        }

        .carousel-slide.active .slide-number {
            animation-delay: 0.2s;
        }

        .carousel-slide.active .slide-title {
            animation-delay: 0.4s;
        }

        .carousel-slide.active .slide-description {
            animation-delay: 0.6s;
        }

        .carousel-slide.active .slide-benefits {
            animation-delay: 0.8s;
        }

/* ===================================
   プロワン用 CTAボタンスタイル
   =================================== */

.hero-cta-button-wrapper {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 25px;
}

.proone-cta-button {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--color-accent), #C93279);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 50px;
  padding: 20px 24px;
  box-shadow: 0 8px 25px rgba(201,50,121,0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  min-height: 80px;
  max-width: 420px;
  width: 100%;
}

.proone-cta-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.proone-cta-button:hover::before {
  width: 100px;
  height: 100px;
}

.proone-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(201,50,121,0.4);
  color: var(--color-white);
  text-decoration: none;
}

.proone-cta-button__accent {
  position: absolute;
  top: -5px;
  left: -30px;
  width: 105px;
  height:90px;
  object-fit: contain;
  z-index: 2;
}

.proone-cta-button__content {
  flex: 1;
  padding-left: 60px;
  position: relative;
  z-index: 3;
}

.proone-cta-button__subtitle {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: 4px;
  line-height: 1.2;
}

.proone-cta-button__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.3;
}

.proone-cta-button__badge {
  background: var(--color-white);
  color: var(--color-accent);
  font-size: 14px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 20px;
  margin-left: 16px;
  position: relative;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(47,28,64,0.1);
}

/* ===================================
   レスポンシブ対応
   =================================== */

/* タブレット */
@media (max-width: 991px) {
  .hero-cta-button-wrapper {
    justify-content: center;
  }
  
  .proone-cta-button {
    max-width: 380px;
    padding: 18px 20px;
  }
    
  .proone-cta-button__content {
    padding-left: 35px;
  }
  
  .proone-cta-button__title {
    font-size: 18px;
  }
}

/* スマートフォン */
@media (max-width: 767px) {
  .hero-cta-button-wrapper {
    width: 100%;
  }
  
  .proone-cta-button {
    width: 100%;
    max-width: 100%;
    padding: 16px 20px;
    min-height: 70px;
  }
  
  .proone-cta-button__accent {
    top: -8px;
    left: -8px;
  }
  
  .proone-cta-button__content {
    padding-left: 30px;
  }
  
  .proone-cta-button__subtitle {
    font-size: 13px;
  }
  
  .proone-cta-button__title {
    font-size: 16px;
  }
  
  .proone-cta-button__badge {
    font-size: 13px;
    padding: 6px 14px;
    margin-left: 12px;
  }
}

/* 小さなスマートフォン */
@media (max-width: 479px) {
  .proone-cta-button {
    padding: 14px 16px;
    min-height: 65px;
  }
    
  .proone-cta-button__content {
    padding-left: 25px;
  }
  
  .proone-cta-button__subtitle {
    font-size: 12px;
  }
  
  .proone-cta-button__title {
    font-size: 15px;
  }
  
  .proone-cta-button__badge {
    font-size: 12px;
    padding: 5px 12px;
    margin-left: 8px;
  }
}

/* フォーカス状態 */
.proone-cta-button:focus {
  outline: 3px solid var(--color-main);
  outline-offset: 2px;
}

/* モーション無効化対応 */
@media (prefers-reduced-motion: reduce) {
  .proone-cta-button,
  .proone-cta-button::before {
    transition: none;
  }
  
  .proone-cta-button:hover {
    transform: none;
  }
}

/* ------------------------------------------------ */
/* column */
/* ------------------------------------------------ */

/* 全体 */
#toc_container {
    background-color: #FCF6FB; /* 背景を薄いグレーに */
    border-radius: 8px;        /* 角を丸くする */
    padding: 16px;             /* 内側の余白を広めに確保 */
    margin: 2em 0;             /* 周囲のコンテンツとのマージン */
}

#toc_container .toc_title{
 font-size: var(--fs-h3);    /* 18px。デザインルールの段階にそろえる（もとは 1.2em＝19.2px。2026-10-29） */
 font-weight: 700;     /* 太字にする */
 color: #77677F;      /* ご指定のカラー */
 text-align: left; 
}

/* リスト全体 */
#toc_container .toc_list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* リスト項目 */
#toc_container .toc_list li {
    margin-bottom: 4px; /* 項目間の余白 */
}

#toc_container .toc_list li:last-child {
    margin-bottom: 0;
}

/* リンクテキスト */
#toc_container .toc_list li a {
    display: flex;         /* 番号とテキストを垂直中央揃え */
    align-items: center;
    color: #53405F;
    text-decoration: none;
    font-weight: 500;      /* 少し太くして読みやすく */
    padding: 6px 8px 6px 4px;;
    border-radius: 6px;    /* ホバー時の背景が角丸になるように */
    transition: all 0.25s ease-in-out; /* スムーズなアニメーション */
}

#toc_container .toc_list li a:hover {
    background-color: #FCF6FB; /* ホバー時の背景色 */
    color: #8450B8;            /* ホバー時の文字色 */
}

/* 番号 */
#toc_container .toc_list .toc_number {
    color: #8450B8;     /* ご指定のカラー */
    font-size: var(--fs-h3);    /* 18px。デザインルールの段階にそろえる（もとは 1.2em＝19.2px。2026-10-29） */
    font-weight: bold;     /* 太字にする */
    min-width: 25px;     /* 番号の桁数が変わってもテキストの開始位置を揃える */
    text-align: left;    /* 左揃えに変更 */
    margin-right: 0px;  /* 番号とテキストの間隔 */
    flex-shrink: 0;
    transition: all 0.25s ease-in-out;
}

#toc_container .toc_list li a:hover .toc_number {
    color: #8450B8;
}
/* ------------------------------------------------ */


/* ==================================================================
   機能ページ（single-features.php）
   2026-08-07 改修：outputs/2026-08-07_機能ページ改修提案_顧客管理.md

   トークンは /about/（page-about.php）・/plan/（page-plan.php）に合わせる。
   カード = #FFFFFF / 1px rgba(111,61,156,.14) / radius 18-20px /
   shadow 0 8px 28px rgba(47,28,64,.05)。セクションは padding 80px 0。

   ※このファイルの末尾には長らく </style> が1行残っていた（<style> から
     貼った名残）。トップレベルの不正トークンは直後のルールを1本まるごと
     捨てるため、この改修で削除した。末尾に追記するときは戻さないこと。
   ================================================================== */

/* --- ヒーロー -----------------------------------------------------
   下端で弧を描いていた .curve-separator を single-features.php から撤去した。
   弧は機能ページにしか無く、/plan/ ・ /about/ はフラットな帯で終わっていて、
   サイト内で下端の処理が割れていたため。main.css の .curve-separator の
   定義自体は残置している。

   背景は /about/ ・ /plan/ のヒーロー（feat/about-page-renewal-v2 の
   .plan-hero / .about-hero）と同じ値。あちらが main にマージされたら、
   ここは消して向こうのセレクタ列に .feature-hero-section を足すのが正しい。
   いまは main にその定義がないので、同じ値をこちらに持つ。
   レイアウトは2カラム（テキスト左・実画面右）のまま変えない */
.feature-hero-section {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  margin-bottom: 0;
  background-color: var(--color-main);
  background-image: linear-gradient(-45deg, #6F3D9C, #8450B8, #54318B, #6F3D9C);
  background-size: 400% 400%;
  animation: featureHeroGradient 15s ease infinite;
}

@keyframes featureHeroGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .feature-hero-section {
    animation: none;
    background-position: 0% 50%;
  }
}

/* 光源。背景をアニメーションさせるため別レイヤーに分けて固定する */
.feature-hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 100% at 82% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

/* 細いグリッド。画像を足さずに面のテクスチャだけ作る */
.feature-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #2F1C40 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #2F1C40 30%, transparent 78%);
  pointer-events: none;
}

.feature-hero-section .container,
.feature-hero-content {
  position: relative;
  z-index: 1;
}

/* --- FVのCTA 2本立て --------------------------------------------- */
/* 旧版は資料DL 1本のみで、Clarity で7位（索引カード・FV画像・パンくずより
   下）だった。2本目を「料金を見る」にしたのは、このページから最も押されて
   いる行き先がナビの「料金」（2位・26クリック）だったため */
.feature-buttons--duo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}


.feature-detail-button--outline {
  background-color: transparent;
  border: 2px solid rgba(255,255,255,0.85);
  color: var(--color-white);
}

.feature-detail-button--outline:hover {
  background-color: rgba(255,255,255,0.14);
  color: var(--color-white);
}

/* --- 製品スクショの拡大（ライトボックス） ------------------------- */
/* FVのスクショが Clarity 5位（19クリック）。押しても何も起きない画像を
   読者は拡大しようとして押していた。押せる見た目にする。
   .is-zoomable は assets/js/feature-page.js が付ける＝JSが無い環境では
   カーソルも変わらないので、期待させて裏切ることはない */
.feature-hero-image img.is-zoomable,
.feature-section-media img.is-zoomable,
.entry-content .wp-block-image img.is-zoomable {
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-hero-image img.is-zoomable:hover,
.feature-section-media img.is-zoomable:hover,
.entry-content .wp-block-image img.is-zoomable:hover {
  transform: scale(1.01);
  box-shadow: 0 14px 36px rgba(47,28,64,0.18);
}

.feature-hero-image img.is-zoomable:focus-visible,
.feature-section-media img.is-zoomable:focus-visible,
.entry-content .wp-block-image img.is-zoomable:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.proone-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(47,28,64,0.86);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.proone-zoom-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.proone-zoom-image {
  max-width: min(1200px, 100%);
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(47,28,64,0.45);
  cursor: zoom-out;
  /* 2026-08-23 図版は透過PNGなので、暗いオーバーレイの上だと透けて読めなくなる
     （拡大したのに内容が分からない状態だった）。掲載時と同じ淡い色面を敷く。
     不透明なスクショに対しては薄い額縁になるだけで害はない。
     背景は img の透明部分から透けるので、これだけで両方に効く */
  background: #FCF6FB;
  padding: 24px;
  box-sizing: border-box;
}

.proone-zoom-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #FFFFFF;
  cursor: pointer;
}

.proone-zoom-close:hover {
  background: rgba(255,255,255,0.26);
}

body.proone-zoom-open {
  overflow: hidden;
}

/* --- こんなお悩みありませんか ------------------------------------- */
/* 上下の余白は .feature-cases-section / .feature-next-section と同じ 80px に
   揃える。当初は下を 8px にしていたが、直後の「主な機能」と詰まって見えた
   （2026-08-07 本人指摘） */
.feature-problems-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCF6FB 100%);
}

.feature-problems-title {
  margin: 0 0 40px;
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  color: var(--color-sub-dark);
}

/* <mark> の既定の黄色背景を消す。
   お悩みの見出しは主題を示すので緑＋下線の強調を残す。
   導入事例のリード「業務改善を実現」は 2026-08-07 の本人指示で強調を外し、
   周囲と同じ見え方にする（要素は残してあるので、戻すなら
   .feature-cases-mark に box-shadow を足すだけでよい） */
.feature-problems-mark {
  background: none;
  color: var(--color-main);
  box-shadow: inset 0 -0.34em 0 rgba(201,50,121,0.28);
}

.feature-cases-mark {
  background: none;
  color: inherit;
  font-weight: inherit;
}

/* 2枚のカードを横並びに。イラストは各カードの中（文字の下）に置く
   （2026-08-07 本人指示）。当初は中央に1枚置く3カラムだった */
.feature-problems-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

/* 文字の下・中央。高さを固定しているので、2枚の縦横比が多少違っても
   カードの高さは揃う（元データは 230x380 と 248x380） */
.feature-problem-illust {
  margin: 0;
  text-align: center;
}

/* inline-block だと行のベースラインぶん数pxの隙間が下に残るので block にする。
   2026-08-21 人物が小さく見えたので 150px → 190px（SP 130 → 158）。
   高さ固定なので、素材を縦に短く切るほど人物は大きく見える。
   **2枚の人物の見た目を揃えるには「頭の高さ ÷ 画像の高さ」を一致させる。**
   素材をそのまま入れると、頭の比率が違うぶんだけ人物の大きさがズレる
   （実測: 0.430 と 0.380）。共通比率0.4150で切り出して、表示190px時の
   頭を78.8pxに揃えてある。
   **上の余白も頭の高さの10%で揃える。** 素材の一番上は「人物の頭頂」ではなく
   汗マーク等の装飾を含めた位置で測ること。頭頂だけ見て切ると装飾が切れて
   「上が切れている」と読まれる（実際にそうなった）。1枚目は頭の上に10pxしか
   無いので、透明行を足して余白を作ってある。
   差し替えるときも同じ手順で測ってから切ること。 */
.feature-problem-illust img {
  display: block;
  width: auto;
  height: 190px;
  margin: 0 auto;
}

/* 2枚の高さを揃え、イラストを下端に寄せる。
   下の padding は 0。イラストがカードの底に接しているほうが自然に見える
   （2026-08-07 本人指摘）。文字だけの機能ページでは
   .feature-problem-text の margin が下端を作る */
.feature-problem-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 0;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.22);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(47,28,64,0.04);
}

.feature-problem-label {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  color: var(--color-main);
}

.feature-problem-label span {
  margin-left: 4px;
  font-size: 28px;
  line-height: 1;
}

.feature-problem-text {
  /* イラストが無い項目では、これがカード下端の余白になる */
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
}

.feature-problem-text strong {
  color: var(--color-main);
}

.feature-problem-illust {
  margin-top: auto;
}

/* --- 「主な機能」の索引カードを1行に畳む --------------------------- */
/* 実体はタブでもアコーディオンでもなく #feature1〜3 へ飛ぶだけのアンカー。
   それでも Clarity ではページ内で最も押されている要素（3位 見出し25 /
   4位 ⌄ 20）で、削るのではなく畳む。

   SPでは3枚で 850px＝1画面（812px）以上を、リンク3本のためだけに
   使っていた。ここを1行のチップ列にして約700px を返す。

   本文（features CPT の投稿本文）は wp-admin 側なので DOM は組み替えず、
   見た目だけで畳む。セレクタは「.entry-content 直下で最初の div」＝索引
   ブロック（詳細ブロックは id="featureN" を持つ）。

   ブロックエディタが要素に直接 style="" を吐いているので !important が要る
   （line-height:.9 / padding: var(--wp--preset--spacing--large) など）。
   font-size のプリセットクラス（.has-x-large-font-size）も !important 付き */
.feature-detail-page .entry-content > div.wp-block-columns:first-of-type {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 44px !important;
  padding: 0 !important;
}

.feature-detail-page .entry-content > div.wp-block-columns:first-of-type > .wp-block-column {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0 !important;
  box-shadow: none !important;
}

.feature-detail-page .entry-content > div.wp-block-columns:first-of-type .wp-block-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.16);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(47,28,64,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-detail-page .entry-content > div.wp-block-columns:first-of-type .wp-block-group:hover {
  transform: translateY(-2px);
  border-color: rgba(111,61,156,0.4);
  box-shadow: 0 10px 24px rgba(47,28,64,0.08);
}

/* 01 / 02 / 03 */
.feature-detail-page .entry-content > div.wp-block-columns:first-of-type .wp-block-group > p:first-of-type {
  flex: 0 0 auto;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-main);
}

.feature-detail-page .entry-content > div.wp-block-columns:first-of-type .wp-block-group > h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

.feature-detail-page .entry-content > div.wp-block-columns:first-of-type .wp-block-group > h3 a {
  color: var(--color-sub-dark);
  text-decoration: none;
}

/* カード全面を押せるようにする。旧版は見出しの文字と ⌄ だけがリンクで、
   当たり判定が狭いのにそれでも押されていた */
.feature-detail-page .entry-content > div.wp-block-columns:first-of-type .wp-block-group > h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

/* ⌄ は文字（U+2304）。横並びのチップになったので右向きに倒す */
.feature-detail-page .entry-content > div.wp-block-columns:first-of-type .wp-block-group > p:last-of-type {
  flex: 0 0 auto;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  color: var(--color-main);
  transform: rotate(-90deg);
}

/* --- 「主な機能」本体 --------------------------------------------- */
/* main.css の .feature-content-section は padding: 20px 0 で、前後のセクション
   （80px）と噛み合っていなかった。h2「主な機能」の上下も含めて揃える。
   article.feature-detail-page が持つ margin-bottom: 60px も、セクション側で
   余白を持つ設計に変えたぶん二重になるので消す（実測で「主な機能」と
   「導入事例」の間だけ 60px 広かった） */
.feature-detail-page {
  margin-bottom: 0;
}

.feature-detail-page .feature-content-section {
  padding: 80px 0;
}

.feature-detail-page .entry-content {
  margin-bottom: 0;
}

.feature-detail-page .entry-content > h2:first-child {
  margin-top: 0;
}

/* ヘッダーが sticky なので、索引から飛んだ先の見出しが隠れていた。
   feature-page.js 側でも同じ 100px で補正している */
.feature-detail-page .entry-content > div.wp-block-columns[id] {
  scroll-margin-top: 100px;
}

@media (max-width: 781px) {
  /* PCでは 01=テキスト左/画像右、02=画像左/テキスト右 と交互（ジグザグ）に
     置かれているが、SPで縦積みになると02だけ「何の画像か分からないまま
     画像が先に来る」形になっていた。画像列を必ず後ろへ送る */
  .feature-detail-page .entry-content > div.wp-block-columns[id] > .wp-block-column:has(> figure) {
    order: 2;
  }

  .feature-detail-page .entry-content > div.wp-block-columns:first-of-type > .wp-block-column {
    flex: 1 1 100%;
  }
}

/* --- 主な機能（テーマ側・template-parts/feature-sections.php） -------
   投稿本文から移した版。ブロックエディタの出力を !important で抑えていた
   下の「索引カードを1行に畳む」節は、まだ移していない10本のための
   フォールバックとして残してある。11本の移行が終わったら両方消せる。 */
.feature-sections {
  padding: 80px 0;
  background: #FFFFFF;
}

/* 節の番号。塗りなし・輪郭だけの数字。
   2026-08-19 本人指示で、全幅の帯（番号＋両側の点線）をやめ、見出しの左隣に
   置いた。節は線で区切らず、余白だけで分ける。
   -webkit-text-stroke が効かない環境では color: transparent のせいで
   数字が消えてしまうので、既定は薄い緑の塗りにしておき、
   @supports が通ったときだけ塗りを外して輪郭に切り替える */
.feature-section-num {
  grid-column: 1;
  /* 2026-08-19 本人指示。見出しの行と本文の行の両方をまたぐ。
     見出しの行だけに置くと、行の高さが番号（60px）に引き上げられて、
     見出しと本文の間が row-gap 16px ＋ 番号のはみ出し18px＝34px 空いていた。
     またがせると行の高さは見出し（41px）で決まり、間は row-gap だけになる。 */
  grid-row: 1 / span 2;
  /* align-items: start の残差（上のコメント）を打ち消して、字面の上端を
     見出しに合わせる。自分のフォントサイズ基準なので、clamp で番号が
     縮んでも比例して効く。実測のズレは
       1,200px以上（番号60・見出し28）… 0.1px
       1,000px（50・24）… 0.5px
       800px（40・22）… 2.3px
     見出しも番号も clamp の傾きが違うため完全には揃わないが、
     PCの大半（1,200px以上）は両方とも上限で固定なので、そこを合わせている */
  margin: -0.03em 0 0;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(111,61,156,0.32);
}

@supports (-webkit-text-stroke: 2px currentColor) {
  .feature-section-num span {
    color: transparent;
    -webkit-text-stroke: 2px rgba(111,61,156,0.5);
  }
}

/* 各節。PCは図版とテキストを左右2カラムにし、図版を交互に置く
   （01=右・02=左・03=右）。2026-08-19 いちど「テキスト全幅 → 図版全幅」の
   縦積みにしたが、本人指示で交互配置に戻した。節の中の組み方（番号を見出しの
   左隣・本文の開始位置を見出しに揃える）は縦積みのときのまま残している。
   SPは常に1カラムで「見出し → 図版」。 */
.feature-section {
  padding: 40px 0 56px;
  /* ヘッダーが sticky なので、他ページから #feature2 等で飛ばれても
     見出しが隠れないようにしておく */
  scroll-margin-top: 100px;
}

.feature-section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}

.feature-section.is-reversed .feature-section-body {
  order: 2;
}

/* 番号を左の列に出し、見出しと本文を同じ位置から始める（ぶら下げ・
   2026-08-19 本人指示）。列幅は .feature-section-inner の半分なので
   max-width は置かない */
.feature-section-body {
  display: grid;
  grid-template-columns: auto 1fr;
  /* 2026-08-19 本人指示で、番号と見出しの「上端」を揃える（ベースライン揃えから
     変更）。ベースラインで揃えると、番号60px・見出し28pxの字面の差そのままに
     数字の上端が見出しより21.6px上に飛び出していた（Chrome実測）。
     start は行ボックスの上辺を揃えるので、字面の上端は完全には一致しない。
     Noto Sans JP の実測（canvas の actualBoundingBoxAscent）では
       番号  60px : 字面の上端は行ボックス上辺から 11.3px 下
       見出し28px : 同 8.5px 下
     で、番号が 1.9px 低く出る。これを打ち消すのが下の margin-top。 */
  align-items: start;
  column-gap: 20px;
  row-gap: 16px;
}

/* 見出しは文節で折る（word-break: auto-phrase）。短いので途中で切れると
   読みにくく、行長のガタつきも数行ぶんしか出ない */
.feature-section-title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-sub-dark);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.feature-section-title strong {
  font-weight: 800;
  color: var(--color-main);
}

/* 本文は通常の折り返し。
   2026-08-07：当初は見出しと同じ auto-phrase にしていたが、1行20字ほどの幅では
   文節を守るぶん右端が大きくガタつく。実測の行長は
     auto-phrase : 20 / 19 / 20 / 17 / 17 / 12 字
     通常        : 20 / 20 / 20 / 20 / 20 /  5 字
   日本語の本文は右端が揃うほうが読みやすいので、文節折りは短い見出しだけに残す
   （本人指摘）。事例カードの課題文・お悩みの本文も同じ理由で指定していない */
.feature-section-text {
  /* 見出しと同じ列。開始位置が揃う（2026-08-19 本人指示） */
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  /* 交互配置に戻して列幅が556pxになったので 17px から元の16pxへ。
     番号の列（60px＋20px）を引いた476pxで、16pxなら約29字/行 */
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text);
}

/* 子ページへの導線（2026-11-05・プロワンAIの入口から3機能へ）。本文と同じ列に置き、「すべて見る」と同じ緑の太字 */
.feature-section-link {
  grid-column: 2;
  grid-row: 3;
  margin: 12px 0 0;
}

.feature-section-link a {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-main);
}

.feature-section-link a::after {
  content: " →";
}

/* 図版は薄い色面の上に置く（2026-08-19）。
   ・ページの中央が白の平原になっていた（主な機能1,699px＋導入事例993pxが純白）。
     色は お悩み・次に見ていただきたいページ と同じ系統＝ブランド緑の薄い面
   ・図解（透過PNG）に差し替えたとき、この面がそのまま図解の地になる
   ・影は付けない。box-shadow は画像のアルファではなく要素の矩形に落ちるので、
     透過PNGだと透明な余白の外に矩形の影が出る。画像自身が白地と影を持つ
     素材に外から影を足すと二重の枠になる（本人指摘）。輪郭は面と枠線で作る */
.feature-section-media {
  padding: 20px;
  background: rgba(111,61,156,0.06);
  border-radius: 20px;
}

.feature-section-media img,
.feature-section-media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  /* 素の画面キャプチャは、色面の上でウィンドウの端が分かるように髪の毛1本だけ */
  border: 1px solid rgba(111,61,156,0.14);
}

/* 図解（透過PNG）は枠線も無しで、色面に直接置く */
.feature-section-media--figure img,
.feature-section-media--figure video {
  border: 0;
  border-radius: 0;
}

/* --- 導入事例（課題 → 導入効果） ---------------------------------- */
/* 2026-08-24 本人指示。白のままだと「主な機能」も白で、ページ中央が白一色に
   なっていた（2026-08-18の指摘4〜7のうち5番。「主な機能」側は
   .feature-section-media に薄緑を敷いて対応済みだったが、このセクション自体は
   未対応だった）。値は rgba(111,61,156,.06) 相当で、このテーマの他セクション
   （.feature-problems-section・.feature-next-section）が使っている
   薄緑トークン #FCF6FB と同系色なので、それに合わせて固定値で持つ */
.feature-cases-section {
  padding: 80px 0;
  background: #FCF6FB;
}

.feature-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 44px;
}

.feature-case-card {
  display: flex;
  flex-direction: column;
  padding: 0 0 22px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(47,28,64,0.05);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(47,28,64,0.1);
}

.feature-case-image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-light-gray, #FCF6FB);
}

.feature-case-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 業種。写真の上に重ねる。カードの中で「課題」ラベルの真上に同じ形の
   チップとして並んでいたため、業種と課題が対のように見えていた
   （2026-08-07 本人指摘）。対にすべきなのは 課題 と 導入効果 のほう */
.feature-case-image {
  position: relative;
}

.feature-case-industry {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.94);
  color: var(--color-main);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 10px rgba(47,28,64,0.16);
}

/* 下の余白は、課題の箱に被さるラベル（top: -11px）のぶんを見込んだ値。
   16px だと見た目の間隔が実測7pxしかなく、社名とラベルが近すぎた
   （2026-08-07 本人指摘）。26px で約17px になる */
.feature-case-name {
  margin: 20px 24px 26px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-main);
}

/* 課題と導入効果を同じ型の箱にして、対であることを見た目で示す。
   ラベルはどちらも箱の左上・同じ位置。旧版は「導入効果」だけが枠に被さる
   ラベルで、しかも枠の内側12px＝カード基準36pxにあり、他の要素（24px）と
   12pxずれていた */
.feature-case-block {
  position: relative;
  display: block;
  margin: 0 24px;
  padding: 22px 18px 16px;
  border-radius: 14px;
}

/* 導入効果の箱は 2px のボーダーを持つ。同じ padding でも内容の開始位置が
   2px 内側にずれてラベルの左端が揃わないので、こちらにも同じ太さの
   透明ボーダーを持たせて枠の形を完全に一致させる */
.feature-case-block--problem {
  border: 2px solid transparent;
  background: rgba(84,49,139,0.045);
}

.feature-case-block--result {
  border: 2px solid var(--color-main);
  background: rgba(111,61,156,0.04);
}

.feature-case-label {
  position: absolute;
  top: -11px;
  left: 16px;
  padding: 3px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.feature-case-label--problem {
  background: #77677F;
  color: #FFFFFF;
}

.feature-case-label--result {
  background: var(--color-main);
  color: #FFFFFF;
}

.feature-case-problem {
  display: block;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text);
}

.feature-case-arrow {
  display: block;
  margin: auto 0 10px;
  padding-top: 14px;
  color: rgba(111,61,156,0.35);
  text-align: center;
}

.feature-case-result-text {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--color-sub-dark);
}

.feature-cases-all {
  margin: 40px 0 0;
  text-align: center;
}

.feature-cases-all a,
.related-features-all a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-main);
}

/* --- 関連する機能（旧「その他の機能」10本を3本に） ----------------- */
.features-grid--related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.related-features-all {
  margin: 32px 0 0;
  text-align: center;
}

/* --- 次に見ていただきたいページ ----------------------------------- */
/* /about/ の about-next-steps.php と同じ型。クラスは .feature-next-* で
   独立させている（.about-next-* は feat/about-page-renewal-v2 側にしか
   まだ無いため） */
.feature-next-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #FCF6FB 0%, #FFFFFF 100%);
}

/* カードは2枚。3枚のとき（〜2026-08-19）は container 幅いっぱいだったが、
   2枚で同じ幅にすると1枚が570pxまで伸びて間延びするので、2枚ぶんで抑えて
   中央に置く（370px × 2 ＋ gap 20px） */
.feature-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 760px;
  margin: 44px auto 0;
}

.feature-next-card {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 26px 24px 22px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(47,28,64,0.04);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-next-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(47,28,64,0.08);
}

.feature-next-label {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-main);
}

.feature-next-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text);
}

.feature-next-arrow {
  display: inline-flex;
  margin-top: 14px;
  color: var(--color-main);
  transition: transform 0.2s ease;
}

.feature-next-card:hover .feature-next-arrow {
  transform: translateX(3px);
}

.feature-next-action {
  margin-top: 44px;
  text-align: center;
}

.feature-next-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.feature-next-button:hover {
  background: #C93279;
  color: #FFFFFF;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .feature-problems-section,
  .feature-cases-section,
  .feature-next-section {
    padding-left: 0;
    padding-right: 0;
  }

  .feature-hero-section {
    padding: 48px 0 52px;
  }

  .feature-problems-section,
  .feature-cases-section,
  .feature-next-section,
  .feature-sections {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* 1カラムに落とし、交互配置をやめて常に「見出し → 図版」に揃える */
  .feature-section {
    padding: 24px 0 32px;
  }

  .feature-section-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 335pxしかないので色面の余白は詰める */
  .feature-section-media {
    padding: 12px;
    border-radius: 14px;
  }

  .feature-section.is-reversed .feature-section-body {
    order: 0;
  }

  /* SPでは番号を見出しの上に置く。335px幅で番号を左に出すと、
     本文の1行が20字 → 17字に減って読みにくくなる */
  .feature-section-body {
    display: block;
    max-width: none;
  }

  /* SPは縦積み（display:block）なので、PC用の上端合わせは効かせない */
  .feature-section-num {
    margin: 0 0 4px;
    font-size: 36px;
  }

  .feature-section-title {
    margin-bottom: 12px;
  }

  .feature-detail-page .feature-content-section {
    padding: 56px 0;
  }

  .feature-problems-layout {
    grid-template-columns: 1fr;
  }

  .feature-problem-illust img {
    height: 158px;
  }

  .proone-zoom-overlay {
    padding: 16px;
  }
}


/* ==================================================
   料金ページ（/plan/）
   層1: 価格の決まり方 ／ 層2: プランと機能の比較表
   価格カード（月額 要問合せ ×4）から差し替えたもの。
   旧カードの .modern-plan-card / .plans-scroll-container 系は
   マークアップが無くなったため未使用。
   ================================================== */

/* --- ヒーロー（.plan-hero / .about-hero は /plan/ ・ /about/ に付く修飾クラス。
       共通の .page-header-section の見た目は変えない）
       2026-08-05: 特徴ページを同じフォーマットに揃えるため .about-hero を併記した。
       見た目の定義は1箇所に保ちたいので、CSSを複製せずセレクタを足している --- */
.plan-hero,
.about-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 72px;
  /* トップページの .hero-section と同じ手法。4色のグラデーションを
     400%に広げ、背景位置を動かして色をゆっくり変化させる。
     キーフレーム名は main.css の gradientAnimation と衝突させないため別名にする */
  background: linear-gradient(-45deg, #6F3D9C, #8450B8, #54318B, #6F3D9C);
  background-size: 400% 400%;
  animation: planHeroGradient 15s ease infinite;
}

@keyframes planHeroGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 動きを減らす設定の環境では止める */
@media (prefers-reduced-motion: reduce) {
  .plan-hero,
  .about-hero {
    animation: none;
    background-position: 0% 50%;
  }
}

/* 光源。背景をアニメーションさせるため、別レイヤーに分けて固定する */
.plan-hero::after,
.about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 100% at 82% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

/* 細いグリッド。画像を足さずに面のテクスチャだけ作る */
.plan-hero::before,
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #2F1C40 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #2F1C40 30%, transparent 78%);
  pointer-events: none;
}

.plan-hero .container,
.about-hero .container {
  position: relative;
  z-index: 1;
}

.plan-hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 18px;
}

.plan-hero-eyebrow span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.78);
}

/* ラベルの左右に伸びる細い罫。中央寄せの見出しに軸を通す */
.plan-hero-eyebrow::before,
.plan-hero-eyebrow::after {
  content: '';
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.35);
}

.plan-hero-title {
  margin: 0 0 20px;
  font-size: clamp(32px, 4.4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.plan-hero-lead {
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: 18px;
  line-height: 1.9;
  color: rgba(255,255,255,0.92);
}

.page-header-section .header-cta-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  /* .header-cta はヘッダー用に左寄せのまま。ヒーローは中央寄せの組みなので揃える */
  justify-content: center;
}

/* --- 層1: 価格の決まり方 --- */
.price-factors-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCF6FB 100%);
}

/* 共通の .section-description は max-width:600px。
   この2セクションのリード文は <br> で改行位置を決めているので、
   600px だと意図しない位置で折り返す。上限を上げて指定どおりに改行させる */
.price-factors-section .section-description,
.price-structure-section .section-description {
  max-width: 760px;
  line-height: 1.9;
}

.price-factors-grid {
  display: grid;
  /* 3列 → 2列 → 1列。カードは固定幅を持たないのでコンテナからはみ出さない */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.price-factor-card {
  position: relative;
  /* 数字を枠の内側に敷くので、はみ出しを切る */
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  border-radius: 20px;
  padding: 32px 28px 28px;
  box-shadow: 0 8px 28px rgba(47,28,64,0.05);
}

/* 番号は丸バッジで載せず、枠の右上に薄い大きな数字として敷く。
   読ませる要素ではなく、順番を示す背景として置く */
.price-factor-num {
  position: absolute;
  top: -18px;
  right: 14px;
  z-index: 0;
  font-size: 104px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(111,61,156,0.09);
  pointer-events: none;
  user-select: none;
}

/* 本文は数字より前面に置く */
.price-factor-title,
.price-factor-lead,
.price-factor-body {
  position: relative;
  z-index: 1;
}

.price-factor-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-sub-dark);
  margin: 0 0 10px;
}

.price-factor-lead {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-main);
  margin: 0 0 12px;
}

.price-factor-body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}

.price-factor-body strong {
  font-weight: 700;
  color: var(--color-sub-dark);
  background: linear-gradient(transparent 66%, rgba(132,80,184,0.25) 66%);
}

.price-factors-note {
  margin-top: 28px;
}

/* flex にすると <strong> や地の文が個別のフレックスアイテムになり、
   狭い画面で「1年 / 単 / 位」のように縦積みになる。インラインで組む */
.price-factors-note p {
  margin: 0;
  padding: 16px 24px;
  border-radius: 14px;
  background: rgba(111,61,156,0.06);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
}

.price-factors-note svg {
  vertical-align: -3px;
  margin-right: 8px;
  color: var(--color-main);
}

/* --- IT導入補助金 --- */
.price-subsidy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  padding: 32px;
  border-radius: 20px;
  background: #FCF6FB;
  border: 1px solid rgba(111,61,156,0.22);
  box-shadow: 0 10px 28px rgba(111,61,156,0.06);
}

/* 同じブロック内に塗りのピル型CTAがあるため、
   バッジを同じ「塗り＋ピル」にするとボタンに見えてしまう。
   枠線と文字だけのラベルにして、押せる要素と見分けがつくようにする */
.price-subsidy-badge {
  display: inline-flex;
  align-items: center;
  /* 見出しの直上に置く。左の別カラムに独立させると
     行の先頭で押せる要素のように見えるため */
  margin: 0 0 12px;
  padding: 6px 14px 6px 12px;
  border: 1.5px solid rgba(111,61,156,0.4);
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--color-main);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: default;
}

/* ラベルであることを示す小さな認定マーク */
/* 2026-11-05 先頭のアイコン（14pxの塗りの認定マーク）は形が読めず「よくわからない」と本人指摘。札の文字だけで足りるので外した */

.price-subsidy-body {
  flex: 1 1 340px;
  min-width: 0;
}

.price-subsidy-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-sub-dark);
  margin: 0 0 8px;
}

.price-subsidy-text {
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
  margin: 0;
}

.price-subsidy-action {
  flex-shrink: 0;
}

.price-subsidy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 50px;
  background: var(--color-main);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.price-subsidy-button:hover {
  background: #6F3D9C;
  color: #FFFFFF;
}

/* --- 層2: プランと機能の比較表 --- */
.plan-table-wrap {
  /* 表は必ずこの枠の中でスクロールさせる。
     旧カード（固定320px×4=1352px）がコンテナ1160pxを超えて
     はみ出していた問題を、ここで構造的に断つ */
  margin-top: 40px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 12px 40px rgba(47,28,64,0.07);
}

.plan-table-wrap:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.plan-table {
  width: 100%;
  /* 4プラン分を読める最小幅。これ未満は横スクロールに逃がす */
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
}

/* 機能名の列は横スクロール中も貼り付けておく */
.plan-table th[scope="row"],
.plan-table .plan-table-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #FFFFFF;
  text-align: left;
}

.plan-table-corner {
  width: 240px;
  min-width: 240px;
  padding: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-dark-gray, #77677F);
  border-bottom: 2px solid rgba(111,61,156,0.15);
  vertical-align: bottom;
  z-index: 3;
}

.plan-table-head {
  min-width: 145px;
  padding: 24px 12px 20px;
  text-align: center;
  vertical-align: bottom;
  background: #FFFFFF;
  border-bottom: 2px solid rgba(111,61,156,0.15);
  border-left: 1px solid rgba(47,28,64,0.05);
  position: relative;
}

.plan-table-head.is-popular {
  background: rgba(111,61,156,0.06);
}

/* 塗りのオレンジのピル型にすると、ページ内のCTAと同じ見た目になり
   押せる要素に見えてしまう。補助金ラベルと同じ「枠線＋マーク」の
   ラベル表現に揃え、色は列のハイライトと同じ緑にする */
.plan-table-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 auto 10px;
  width: fit-content;
  padding: 4px 10px 4px 8px;
  border: 1.5px solid rgba(111,61,156,0.5);
  border-radius: 6px;
  background: rgba(111,61,156,0.08);
  color: var(--color-main);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: default;
}

.plan-table-ribbon::before {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E");
}

.plan-table-head .plan-table-name.plan-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 10px;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: none;
  white-space: nowrap;
}

.plan-table-for {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-sub-dark);
  line-height: 1.6;
}

.plan-table-desc {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-dark-gray, #77677F);
  line-height: 1.6;
}

.plan-table-group th {
  padding: 14px 20px;
  background: rgba(111,61,156,0.08);
  color: var(--color-main);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  letter-spacing: 0.5px;
}

/* 分類の行は表の全幅にまたがるので、横スクロールすると見出しの文字が
   左へ流れて切れる。文字だけを機能名の列と同じく左に貼り付ける */
.plan-table-group-label {
  position: sticky;
  left: 20px;
  display: inline-block;
}

.plan-table-label {
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.6;
  border-bottom: 1px solid rgba(47,28,64,0.06);
}

/* 機能名だけでは何をするのか判断できない行に添える説明。
   sticky な機能名列は幅が固定なので、必ず折り返させる */
.plan-table-sublabel {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-dark-gray, #77677F);
  line-height: 1.7;
  white-space: normal;
}

.plan-table-cell {
  padding: 16px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(47,28,64,0.06);
  border-left: 1px solid rgba(47,28,64,0.05);
}

.plan-table-cell.is-popular {
  background: rgba(111,61,156,0.04);
}

.plan-cell-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(111,61,156,0.12);
  color: var(--color-main);
}

.plan-cell-no {
  color: #E4D8EC;
  font-size: 18px;
}

.plan-cell-text {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 50px;
  background: rgba(111,61,156,0.1);
  color: var(--color-main);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.plan-table-scroll-hint {
  display: none;
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-dark-gray, #77677F);
}

.plan-premium-note {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px dashed rgba(84,49,139,0.3);
  background: rgba(84,49,139,0.03);
}

.plan-premium-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text);
}

.plan-premium-note strong {
  color: var(--color-sub-dark);
}

/* --- 料金ページ専用FAQ --- */
.plan-faq-more {
  margin: 28px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-dark-gray, #77677F);
}

.plan-faq-more a {
  color: var(--color-main);
  font-weight: 700;
}

/* --- 締め：お見積りまでの流れ --- */
.quote-steps-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #FCF6FB 0%, #FFFFFF 100%);
}

.quote-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  /* カード間に矢印を置くので、矢印の左右に均等な余白が残る幅を取る
     （20pxだと矢印の両脇が5pxずつしか空かず窮屈だった） */
  gap: 48px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.quote-step {
  position: relative;
  padding: 32px 26px 28px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(47,28,64,0.04);
}

/* 3枚を矢印で繋ぐ。48pxのgapの中央に置く。1列に落ちたら消す */
.quote-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -29px;
  width: 10px;
  height: 10px;
  border-top: 2px solid rgba(111,61,156,0.45);
  border-right: 2px solid rgba(111,61,156,0.45);
  transform: translateY(-50%) rotate(45deg);
}

.quote-step-num {
  display: block;
  margin-bottom: 12px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  background: linear-gradient(135deg, var(--color-main), var(--color-sub-light));
  -webkit-background-clip: text;
  background-clip: text;
}

.quote-step-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-sub-dark);
}

.quote-step-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--color-text);
}

.quote-steps-action {
  margin-top: 44px;
  text-align: center;
}

/* 特徴ページの締めのボタンも同じ見た目。CSSを複製せずセレクタを併記する */
.quote-steps-button,
.about-next-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 48px;
  border-radius: 50px;
  background: var(--color-accent);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(47,28,64,0.04) 100%);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 6px 18px rgba(201,50,121,0.28);
  transition: background-color 0.3s ease, transform 0.06s ease;
}

.quote-steps-button:hover,
.about-next-button:hover {
  background-color: #C93279;
  color: #FFFFFF;
}

.quote-steps-button:active,
.about-next-button:active {
  transform: translateY(1px);
}

.quote-steps-button svg,
.about-next-button svg {
  transition: transform 0.3s ease;
}

.quote-steps-button:hover svg,
.about-next-button:hover svg {
  transform: translateX(3px);
}

.quote-steps-sub,
.about-next-sub {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--color-dark-gray, #77677F);
}

.quote-steps-sub a,
.about-next-sub a {
  color: var(--color-main);
  font-weight: 700;
}

/* --- レスポンシブ --- */
@media (max-width: 1024px) {
  .price-subsidy {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  /* 横並び用の flex-basis:340px が縦並びでは「高さ340px」として効き、
     本文とボタンの間に大きな空白ができるため解除する */
  .price-subsidy-body {
    flex: 0 0 auto;
  }

  .price-subsidy-button {
    width: 100%;
  }
}

@media (max-width: 900px) {
  /* 表がスクロールし始める幅からヒントを出す */
  .plan-table-scroll-hint {
    display: block;
  }
}

@media (max-width: 768px) {
  .price-factors-section {
    padding: 60px 0;
  }

  .price-factors-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: 48px;
  }

  .price-factor-card {
    padding: 36px 22px 24px;
  }

  .price-subsidy {
    padding: 24px 20px;
  }

  /* コンテナの左右padding分だけ外へ広げ、狭い画面でも表に使える幅を稼ぐ。
     390px幅だと枠内が310pxしかなく、機能名の列を引くと
     プランが1列分しか見えなくなるため */
  .plan-table-wrap {
    margin-left: -20px;
    margin-right: -20px;
    border-radius: 0;
  }

  .plan-table-corner {
    width: 150px;
    min-width: 150px;
    padding: 16px 12px;
  }

  .plan-table {
    min-width: 640px;
    font-size: 14px;
  }

  .plan-table-label {
    padding: 14px 12px;
    font-size: 14px;
  }

  .plan-table-group th {
    padding: 12px;
  }

  .plan-table-group-label {
    left: 12px;
  }

  .page-header-section .header-cta-duo {
    flex-direction: column;
    align-items: stretch;
  }

  .page-header-section .header-cta-duo .header-cta-button {
    width: 100%;
  }

  .plan-hero {
    padding: 48px 0 52px;
  }

  .plan-hero-eyebrow::before,
  .plan-hero-eyebrow::after {
    width: 24px;
  }

  .quote-steps-section {
    padding: 60px 0;
  }

  /* 1列に落ちたら横向きの矢印は成立しないので消す。
     矢印用に取っていた48pxのgapも詰める */
  .quote-steps {
    gap: 20px;
  }

  .quote-step:not(:last-child)::after {
    display: none;
  }

  .quote-steps-button,
  .about-next-button {
    width: 100%;
    justify-content: center;
    padding: 18px 24px;
  }
}


/* ==================================================
   特徴ページ（/about/）
   2026-08-05 改修（outputs/2026-08-05_特徴ページ改修提案.md）

   旧 .about-* 系（main.css 6924行〜）はマークアップが無くなったため未使用。
   emoji アイコン（📦🎯⚙️・WordPressの置換で s.w.org の外部SVGを13件読んでいた）と
   Unsplash のストック写真4枚も同時に消えている。

   ヒーローは .plan-hero とセレクタを共有（このファイル上部）。
   締めのボタンは .quote-steps-button とセレクタを共有。
   ================================================== */

/* ヒーローの lead は36字で max-width:640px にギリギリ収まる長さのため、
   環境によって末尾だけが次行へ落ちる。意図した位置で2行にする。
   SPは幅が足りず自然に折り返すのでこの改行は消す */
.about-hero-br {
  display: inline;
}

@media (max-width: 768px) {
  .about-hero-br {
    display: none;
  }
}

/* --- 導入企業ロゴ帯 ---
   共通の .logo-slider-section はトップページで単独セクションとして使う前提の
   余白設計（padding: 40px 0 60px ＋ 見出し下 35px）。そのまま持ってくると
   帯だけで308pxになり、実測の内訳は「ロゴ100px + 見出し29px + 余白179px」で
   58%が余白だった。結果、機能円図の見出しが一般的なビューポート高
   （720/800/860/900px）すべてで折り返しより下に押し出されていた。
   Clarityが示した「読者は具体を探している」という前提に対して代償が大きい。

   ここでは内側の余白を打ち消し、この帯自身で上下を管理する。
   下は0にして、次セクションの padding-top 80px だけを効かせる
   （セクション間の基準は80px。料金ページの price-factors / price-structure /
   support-flow / quote-steps と同じ）。ロゴは1枚も減らしていない --- */
.about-logo-band {
  /* Core Vision の宣言文と1セットで読ませるブロック。
     上は32px（44pxはヒーローが直上だったときの値。あいだに宣言文が
     入ったので詰める）。下に区切り線を置いて、ここまでが導入部だと示す */
  padding: 28px 0 36px;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(111,61,156,0.12);
}

.about-logo-band .logo-slider-section {
  padding: 0;
}

/* ロゴが並んでいる時点で意味は自明なので、見出しは主張を落とす */
/* 2026-08-07：Core Vision との区切り線を外して1セットにしたため、この一言が
   宣言文の続きに見えやすくなった。丸囲みにして「本文ではなくラベル」だと
   一目で分かるようにする。緑文字＋700は .about-value-tags li と同じだが、
   あちらが塗りなのに対しこちらは枠線（塗ると主張が強すぎ、ロゴの邪魔になる）。
   h4 のままだと幅いっぱいの帯になるので inline-block で文字幅に合わせる。
   .logo-slider-title 自体はトップページ等と共有なので、必ず
   .about-logo-band で絞ること */
.about-logo-band .logo-slider-title {
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 20px;
  border-radius: 999px;
  /* 地を塗らず枠線だけにする（本人指示・メリハリを出すため）。
     .about-value-tags li は塗り、こちらは枠線、と役割で描き分けている。
     枠線は 0.3。0.12（区切り線と同値）だと白地に埋もれて枠に見えない */
  border: 1px solid rgba(111,61,156,0.3);
  color: var(--color-main);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* h4 を inline-block にすると中央寄せが効かなくなるので、親側で中央に置く */
.about-logo-band .logo-slider-section {
  text-align: center;
}

/* --- プロワンでできること（機能円図） ---
   Clarity実測で「次へ」561クリック・ナビ「機能」193・「料金」109。
   読者が探しているものを最初に出すセクション --- */
.about-overview-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCF6FB 100%);
}

.about-overview-section .section-description {
  max-width: 760px;
  line-height: 1.9;
}

.about-overview-figure {
  max-width: 740px;
  margin: 40px auto 0;
  padding: 0;
}

.about-overview-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.about-overview-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 36px;
}

/* CTA（オレンジの塗り）と見分けがつくよう、枠線のリンク表現にする */
.about-overview-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border: 2px solid var(--color-main);
  border-radius: 50px;
  background: #FFFFFF;
  color: var(--color-main);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.about-overview-link:hover {
  background: rgba(111,61,156,0.08);
  color: var(--color-main);
}

.about-overview-link svg {
  transition: transform 0.2s ease;
}

.about-overview-link:hover svg {
  transform: translateX(3px);
}

/* --- Core Vision（プロワンが何者かの宣言）---
   ヒーロー直下・ロゴ帯の上。淡い緑地にしているのは、続く白のロゴ帯と
   境目が消えるのを防ぐため（濃緑ヒーロー → 淡緑ビジョン → 白ロゴ帯と
   明度が段階的に上がる）。白にすると2ブロックが1つの間延びした帯に見える。
   セクション余白は基準の80pxではなく64px。ここは読ませる宣言文が3行だけで、
   前後（ヒーロー・ロゴ帯）と合わせて「最初の画面」を構成するブロックなので、
   基準どおり取ると最初のスクロールが余白だけで終わる --- */
.about-vision-section {
  /* 下は28px。宣言文と「多くの企業様にご導入いただいています」を
     1セットとして読ませるので、ロゴ帯との間はセクション間より明確に狭くする。
     このあいだ 28+28=56px に対し、区切り線の先（できること）までは80px。
     72pxにすると80pxとの差が8pxしかなく、間隔ではグループが読めない */
  padding: 64px 0 28px;
  /* 白で終わらせて、白地のロゴ帯へ継ぎ目なくつなぐ。
     区切り線はここではなくロゴ帯の下に置く（.about-logo-band の
     border-bottom）。ここに線を引くと宣言文とロゴが分断される */
  background: linear-gradient(180deg, #FCF6FB 0%, #FFFFFF 100%);
}

.about-vision-inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

/* 1行目＝何者かの宣言。ここだけ見出し級の大きさにして、
   残り2行は補足として落とす。h2 にはしていない（このページの
   見出し階層は「プロワンでできること」以降のセクション名で、
   宣言文をそこに混ぜると目次構造が崩れるため） */
.about-vision-lead {
  margin: 0 0 22px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--color-sub-dark);
  /* 各行の長さを揃え、最終行が「す。」だけになるのを防ぐ。
     未対応ブラウザでは単に無視されるので、SP側の font-size でも保険をかける */
  text-wrap: balance;
}

.about-vision-body {
  margin: 0;
  font-size: 16px;
  line-height: 2.1;
  color: var(--color-text);
}

/* 強調は em を色替えで使う（斜体にはしない。和文の斜体は可読性が落ちる）。
   b/strong ではなく em なのは、太字は既に .about-vision-lead 全体が
   700 なので、太さでは差がつかないため */
.about-vision-lead em,
.about-vision-body em {
  font-style: normal;
  color: var(--color-main);
}

.about-vision-lead em {
  /* 宣言の核。下線ではなく淡い帯で受ける（下線は和文だと窮屈になる） */
  background: linear-gradient(transparent 62%, rgba(132,80,184,0.22) 62%);
}

.about-vision-body em {
  font-weight: 700;
}

/* --- 提供する価値（旧カルーセルを4枚とも見せる形に） --- */
.about-value-section {
  padding: 80px 0;
  background: #FFFFFF;
}

.about-value-grid {
  display: grid;
  /* 6枚を3列×2行に収める。コンテナ1150pxで minmax(300px,1fr) だと
     3列になり、旧4枚構成では3+1の変則になっていた */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 44px;
}

/* カードの高さを揃える。5・6枚目は注記が付くので、
   タグと注記が下端に寄るようにする */
.about-value-card {
  display: flex;
  flex-direction: column;
}

.about-value-tags {
  margin-top: auto;
}

.about-value-card {
  position: relative;
  overflow: hidden;
  /* 左右28pxは据え置き（横は詰まっていない）。上下だけ、
     下の「見出し内 < 見出し外」の余白設計に合わせて少し足す */
  padding: 34px 28px 28px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  border-radius: 20px;
  box-shadow: 0 8px 28px rgba(47,28,64,0.05);
}

/* 2026-08-07：ゴースト数字（.about-value-num）と 52px のアイコンタイル
   （.about-value-icon）をやめ、線画アイコンそのものを大きく薄く敷く形にした。

   やめた理由：「右上に薄い大きな数字」は .price-factor-num・旧 .about-reason-num
   と同じ型で、サイト内のカード列がどれも同じ顔になっていた。ここは手順ではなく
   「6つの価値」なので、順序を示す数字よりカードの中身を示すアイコンを大きく
   置くほうが情報として正しい。数字は順序に意味がある
   「次に見ていただきたいページ」（.about-next-num）へ移した。

   位置：右上から少しはみ出させ、.about-value-card の overflow:hidden で切る。
   枠内に丸ごと収めると「大きなアイコンが貼ってある」ように見えてしまい、
   背景として沈まないため。数字のときと同じ考え方。 */
.about-value-ghost {
  position: absolute;
  top: -22px;
  right: -24px;
  z-index: 0;
  display: block;
  width: 200px;
  height: 200px;
  /* 色は不透明・要素全体を opacity で薄くする（グループopacity）。
     線の色を rgba の10%にすると、線が交差する箇所（人物2人の肩の弧、
     トレンド線とデータ点など）だけ約2倍の濃さに見える。
     背景なので重なりの濃淡は出さない（本人指示） */
  color: var(--color-main);
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}

/* アイコンは 48 グリッド・stroke-width 2 で描いてある（inc/template-tags.php）。
   ここで 3 に上書きして 3 × (200/48) ≒ 12.5px。
   廃止した 92px/weight800 のゴースト数字の縦棒（約13px）とほぼ同じ存在感。
   200px＋この太さは「もっと太く・見出しに被るくらいが見栄えがいい」という
   本人指示で決めた値（2.6 と比較して 3 を採用。10% の不透明度なので
   被っても可読性は落ちない）。サイズを変えたら太さの見え方も変わる */
.about-value-ghost svg {
  width: 100%;
  height: 100%;
  stroke-width: 3;
}

/* クリップボード（標準化）だけ右に15度傾ける。垂直・水平線しか無い
   唯一のアイコンで、直立だと硬いため（本人指示・15度くらい）。
   -15度（左倒し）は見出しへ倒れ込んで見えたので右倒しにした */
.about-value-ghost.is-tilted svg {
  transform: rotate(15deg);
}

.about-value-title,
.about-value-text,
.about-value-tags {
  position: relative;
  z-index: 1;
}

/* 2026-08-07：カードが詰まって見える件の修正。原因は余白の絶対量ではなく
   「見出しの内側と外側の余白が同値」だったこと。実測：
     見出し2行のあいだ 12px（line-height 1.6 − font-size 20px）
     見出し→本文       12px  ← 同じ
     本文の行間        13.5px ← むしろ広い
   等間隔に並ぶので見出しがブロックとして閉じず、塊が分かれて見えなかった。
   料金ページの .price-factor-title / .quote-step-title は見出し下10pxだが、
   あちらは見出しが1行なのでこの問題が起きない。2行見出しに同じ値を
   持ってきたのが誤り。内側を狭く・外側を広くして階段を作る。
   見出しの行数を変えるときは、この関係が崩れていないか確認すること */
.about-value-title {
  /* 見出し内の行間10pxを明確に上回らせる */
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700;
  /* 1.6→1.5。2行を互いに引き寄せて1つの塊にする（白 12px→10px） */
  line-height: 1.5;
  color: var(--color-sub-dark);
}

.about-value-text {
  margin: 0;
  font-size: 15px;
  /* 1.9→2.0。和文の可読性を上げつつ、見出し下20pxとの差も保てる */
  line-height: 2;
  color: var(--color-text);
}

/* 旧版は emoji（📈🎯📊 等）のアイコン付きだった。
   WordPressの置換で s.w.org へ外部SVGを読むため、文字だけのタグにする */
.about-value-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* タグは別ブロックなので、本文の行間15pxより明確に広く取る */
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.about-value-tags li {
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(111,61,156,0.08);
  color: var(--color-main);
  font-size: 13px;
  font-weight: 700;
}

/* --- サービス紹介動画 ---
   旧版は 545px 幅・height=315 固定で、SP 390px では 300×315px になり
   16:9の映像に対して上下へ大きな余白が出ていた --- */
.about-video-section {
  padding: 80px 0;
  background: var(--color-light-gray, #FCF6FB);
}

.about-video-frame {
  position: relative;
  max-width: 960px;
  margin: 44px auto 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: #2F1C40;
  box-shadow: 0 16px 48px rgba(47,28,64,0.16);
}

.about-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* aspect-ratio 未対応ブラウザ向けの保険 */
@supports not (aspect-ratio: 16 / 9) {
  .about-video-frame {
    height: 0;
    padding-top: 56.25%;
  }
}

/* --- 他社システム・自社開発との違い（このページの主役） --- */
.about-compare-section {
  padding: 80px 0;
  background: #FFFFFF;
}

.about-compare-section .section-description {
  max-width: 760px;
  line-height: 1.9;
}

/* 表は必ずこの枠の中でスクロールさせる（料金ページの .plan-table-wrap と同じ） */
.about-compare-wrap {
  margin-top: 40px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 12px 40px rgba(47,28,64,0.07);
}

.about-compare-wrap:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

.about-compare-table {
  width: 100%;
  /* 3列分を読める最小幅。これ未満は横スクロールに逃がす */
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

/* 観点の列は横スクロール中も貼り付けておく */
.about-compare-table th[scope="row"],
.about-compare-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #FFFFFF;
  text-align: left;
}

.about-compare-corner {
  width: 130px;
  min-width: 130px;
  padding: 20px;
  border-bottom: 2px solid rgba(111,61,156,0.15);
  z-index: 3;
}

/* 旧版はヘッダーが真っ黒（rgb(47,28,64)）でブランド外だった。
   料金ページの .plan-table-head に合わせて白地にする */
.about-compare-head {
  min-width: 230px;
  padding: 24px 18px 20px;
  text-align: center;
  vertical-align: bottom;
  background: #FFFFFF;
  border-bottom: 2px solid rgba(111,61,156,0.15);
  border-left: 1px solid rgba(47,28,64,0.05);
  font-weight: 700;
}

.about-compare-head.is-own {
  background: rgba(111,61,156,0.06);
}

.about-compare-name {
  display: block;
  font-size: 18px;
  color: var(--color-sub-dark);
}

.about-compare-head.is-own .about-compare-name {
  color: var(--color-main);
}

.about-compare-for {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-dark-gray, #77677F);
}

.about-compare-label {
  width: 130px;
  min-width: 130px;
  padding: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-sub-dark);
  border-bottom: 1px solid rgba(47,28,64,0.06);
  vertical-align: top;
}

.about-compare-cell {
  padding: 20px 18px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text);
  vertical-align: top;
  border-bottom: 1px solid rgba(47,28,64,0.06);
  border-left: 1px solid rgba(47,28,64,0.05);
}

.about-compare-cell.is-own {
  background: rgba(111,61,156,0.04);
}

/* 各セルの先頭に一語の結論を置く。広告LP（/lp/bsc-00/）の比較表と同じ構造。
   旧版はラベルが無く長文だけで、一目で優劣がわからなかった */
.about-compare-cell strong {
  font-weight: 700;
  color: var(--color-sub-dark);
}

.about-compare-cell.is-own strong {
  color: var(--color-main);
}

.about-compare-tag {
  display: block;
  width: fit-content;
  margin-bottom: 8px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--color-main);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.about-compare-tag.is-other {
  background: rgba(119,103,127,0.1);
  color: var(--color-dark-gray, #77677F);
}

/* SPで横スクロールが必要なことの案内。旧版は案内が無かった */
.about-compare-scroll-hint {
  display: none;
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-main);
}

.about-compare-note {
  max-width: 860px;
  margin: 20px auto 0;
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-dark-gray, #77677F);
}

/* 05のオプション注記・06のサポートリンク。
   旧 about-reasons.php の .about-reason-note を引き継いだもの */
.about-value-note {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-dark-gray, #77677F);
}

.about-value-note a {
  color: var(--color-main);
  font-weight: 700;
}

/* --- FAQ（共通 .faq-section の見た目を使い、余白だけ揃える） --- */
.about-faq-section {
  padding: 80px 0;
  background: #FFFFFF;
}

/* 共通の .faq-answer p は margin:0（回答＝1段落の前提）。この面だけは
   段落を積む回答があるので、2段落目以降に間隔を入れる。
   .about-faq-section で絞り、トップ・料金ページのFAQには影響させない */
.about-faq-section .faq-answer p + p {
  margin-top: 14px;
}

/* 回答の最後に置く事例への導線（2026-08-18）。

   面（塗り・枠線）は持たせない。いちど薄緑地＋1px枠＋radius 12px の帯に
   したが、すぐ上の .faq-question がまさに同じ「角丸12px・1px枠のボックス」で、
   回答の中にもう1枚同じ形が入って冗長だった（本人指摘）。
   デザインの重さは「導入事例」バッジ1つに寄せて、あとは本文と同じ地に置く。

   バッジは飛び先の種類を先に見せるためのもの。.about-value-tags li が
   薄い塗りなのに対しこちらは濃い塗り。地が白なので、薄い塗りでは
   タグに見えて「事例」というラベルとして読まれない。

   枠線のピル（.about-overview-link と同型）にしないのは、機能円図の下に
   同じ形が既にあり、1ページに2回出るため。 */
.about-faq-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--color-main);
  text-decoration: none;
}

.about-faq-link__badge {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--color-main);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.about-faq-link__text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* 下線はテキストだけに出す。バッジまで下線が伸びると帯が汚れる */
.about-faq-link:hover {
  color: var(--color-main);
}

.about-faq-link:hover .about-faq-link__text {
  text-decoration: underline;
}

.about-faq-link__arrow {
  flex-shrink: 0;
  display: flex;
}

/* SPは1行に収まらないので、バッジを1行目・文言を2行目に分ける。

   flex-wrap では駄目だった。折り返すと矢印がバッジの隣（1行目の右）に残り、
   面が無いぶん文末から離れて宙に浮く。ブロックに切り替えて、文言と矢印を
   ひとつづきのインラインとして2行目に流す。矢印は最後の文字のうしろに付く。
   width: fit-content はバッジを自分の幅のまま1行占有させるため
   （display: block だけだと横いっぱいの帯になる） */
@media (max-width: 767px) {
  .about-faq-link {
    display: block;
  }

  .about-faq-link__badge {
    display: block;
    width: fit-content;
    margin-bottom: 8px;
  }

  .about-faq-link__text {
    display: inline;
  }

  .about-faq-link__arrow {
    display: inline;
    margin-left: 6px;
  }

  .about-faq-link__arrow svg {
    vertical-align: -3px;
  }
}

/* --- 次に見ていただきたいページ --- */
.about-next-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #FCF6FB 0%, #FFFFFF 100%);
}

.about-next-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.about-next-card {
  position: relative;
  /* 数字を枠の内側に敷くので、はみ出しを切る */
  overflow: hidden;
  display: block;
  padding: 26px 24px 22px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(47,28,64,0.04);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-next-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(47,28,64,0.08);
}

/* 2026-08-07：線画アイコン（.about-next-icon）から差し替え。
   この面は「機能 → 事例 → 料金」と検討が進む順に並べてあるので、
   中身を示すアイコンより順序を示す数字が合う。
   提供価値カード（.about-value-ghost）と役割を振り分けることで、
   縦に続く2つのカード列が同じ顔にならないようにしている。
   提供価値カードより一回り小さいのは、こちらの主役が文言＋リンクだから */
.about-next-num {
  position: absolute;
  /* 2026-08-07 本人指示で「少しだけ下に」。-10px → 0px */
  top: 0;
  right: 14px;
  z-index: 0;
  font-size: 78px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-main);
  opacity: 0.09;
  pointer-events: none;
  user-select: none;
}

.about-next-label,
.about-next-text,
.about-next-arrow {
  position: relative;
  z-index: 1;
}

.about-next-label {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-main);
}

.about-next-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text);
}

.about-next-arrow {
  display: inline-flex;
  margin-top: 14px;
  color: var(--color-main);
}

.about-next-card:hover .about-next-arrow {
  transform: translateX(3px);
}

.about-next-action {
  margin-top: 44px;
  text-align: center;
}

/* --- レスポンシブ --- */
@media (max-width: 900px) {
  /* 表が枠に収まらない幅からスクロールの案内を出す */
  .about-compare-scroll-hint {
    display: block;
  }
}

@media (max-width: 768px) {
  /* SPは意図した位置の改行（.about-vision-br）を消して自然改行に任せる。
     PCの改行位置のままだと1行が極端に短くなる */
  .about-vision-br {
    display: none;
  }

  .about-vision-section {
    padding: 48px 0 32px;
  }

  .about-vision-lead {
    font-size: 22px;
    line-height: 1.6;
  }

  .about-vision-body {
    font-size: 15px;
    line-height: 2;
    text-align: left;
  }

  .about-overview-section,
  .about-value-section,
  .about-video-section,
  .about-compare-section,
  .about-faq-section,
  .about-next-section {
    padding: 56px 0;
  }

  .about-logo-band {
    padding: 24px 0 28px;
  }

  .about-value-card {
    padding: 24px 20px 22px;
  }

  /* SPはカードが低くなるぶん、PCの200pxのままだと本文の大半を横断する。
     見出しに被る程度に留める */
  .about-value-ghost {
    top: -18px;
    right: -20px;
    width: 156px;
    height: 156px;
  }

  .about-next-num {
    font-size: 66px;
    top: 2px;
    right: 12px;
  }

  .about-overview-figure,
  .about-video-frame {
    margin-top: 32px;
  }

  .about-overview-link {
    width: 100%;
    justify-content: center;
  }

  /* sticky な1列目は狭い画面では場所を取りすぎるので解除する */
  .about-compare-table th[scope="row"],
  .about-compare-corner {
    position: static;
  }

  .about-compare-corner,
  .about-compare-label {
    width: 100px;
    min-width: 100px;
    padding: 16px 12px;
  }

  .about-compare-cell,
  .about-compare-head {
    padding: 16px 14px;
  }

  .about-next-action {
    margin-top: 36px;
  }

  .about-next-button {
    width: 100%;
    justify-content: center;
    padding: 18px 24px;
  }
}

/* ==================================================================
   機能ページ：導入効果 ／ 安心して使える仕組み ／ よくある質問
   2026-09-16 新設（Notion 施策14-1・プロワンAI）

   トークンは同ファイルの機能ページ節と同じ。
   カード = #FFFFFF / 1px rgba(111,61,156,.14) / radius 18-20px /
   shadow 0 8px 24px rgba(47,28,64,.04)。セクションは padding 80px 0。
   背景は前後の節と交互になるようにする
   （主な機能=#FFFFFF → 導入効果=#FCF6FB → 安心=#FFFFFF → 次に見る=グラデ）。
   ================================================================== */

.feature-effects-section {
  padding: 80px 0;
  background: #FCF6FB;
}

/* 単位は3枚の外に1回だけ置く。カードごとに「1日あたり」と書くと、
   同じ語が3回並んで数値より目立つ */
.feature-effects-unit {
  margin: 28px 0 0;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--color-main);
}

.feature-effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 16px auto 0;
  max-width: 900px;
}

.feature-effect-card {
  padding: 26px 22px 22px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(47,28,64,0.04);
  text-align: center;
}

.feature-effect-label {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-sub-dark);
}

.feature-effect-change {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

.feature-effect-before {
  font-size: 20px;
  font-weight: 700;
  color: #77677F;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.feature-effect-arrow {
  font-size: 16px;
  color: #77677F;
}

.feature-effect-after {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-main);
}

.feature-effect-delta {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-main);
}

/* 書類の転記は単位が違う（1日ではなく1件あたり）ので、3枚の外に1行で置く */
.feature-effects-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
  margin: 20px auto 0;
  padding: 18px 22px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  border-radius: 18px;
}

.feature-effects-extra-label {
  margin-right: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-sub-dark);
}

.feature-effects-extra .feature-effect-after {
  font-size: 20px;
}

/* 注記。数値と同じ視線の流れの中に置く（小さくしすぎない・薄くしすぎない）。
   ガイドの注記をそのまま持ってきている。外さないこと */
.feature-effects-note {
  max-width: 900px;
  margin: 18px auto 0;
  font-size: 13px;
  line-height: 1.7;
  color: #77677F;
}

.feature-trust-section {
  padding: 80px 0;
  background: #FFFFFF;
}

.feature-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.feature-trust-card {
  padding: 26px 24px 22px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(47,28,64,0.04);
}

.feature-trust-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-main);
}

.feature-trust-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-sub-dark);
}

/* FAQは開閉させない。質問文の見出し＋結論を先に書く形をそのまま出す
   （Notion 施策14-7）。開閉に隠すとAI検索・AI Overview に読まれない */
.feature-faq {
  max-width: 900px;
  margin: 56px auto 0;
}

.feature-faq-heading {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  color: var(--color-sub-dark);
}

.feature-faq-list {
  margin: 0;
}

.feature-faq-item {
  padding: 20px 0;
  border-top: 1px solid rgba(111,61,156,0.14);
}

.feature-faq-item:last-child {
  border-bottom: 1px solid rgba(111,61,156,0.14);
}

.feature-faq-q {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--color-sub-dark);
}

.feature-faq-a {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #53405F;
}

@media (max-width: 767px) {
  .feature-effects-section,
  .feature-trust-section {
    padding: 56px 0;
  }

  .feature-effects-extra {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .feature-faq {
    margin-top: 40px;
  }
}

/* --- トップの機能一覧：プロワンAIの帯 -------------------------------
   2026-09-16（Notion 施策14-1）。12枚のグリッドに1枚足すと 4列・3列・2列の
   どれでも1枚あまるので、AIだけ行いっぱいに広げて先頭に置く。
   AIは11機能と横並びの1機能ではなく、3機能（AI OCR・AIアシスタント・
   AI分析）をまとめた面なので、扱いを変えること自体に意味がある。 */
.proone-features-showcase__card--wide {
  grid-column: 1 / -1;
  display: flex;
  /* 既定のカードは display:flex + flex-direction:column（縦積み）。
     ここを row に戻さないと、子の flex-basis が「高さ」として効いて
     帯が481pxまで伸びる（実測） */
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 0;
  text-align: left;
}

.proone-features-showcase__card--wide .proone-features-showcase__card-header {
  padding: 24px 8px 24px 28px;
}

.proone-features-showcase__card--wide .proone-features-showcase__card-body {
  display: flex;
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 24px 28px 24px 8px;
}

.proone-features-showcase__card--wide .proone-features-showcase__card-title {
  margin: 0;
}

/* 説明文は縮んでよい。min-width を残すと見出し＋説明＋「詳細を見る」が
   1行に収まらず3段に折れて、帯の高さが287pxまで伸びた（実測） */
.proone-features-showcase__card--wide .proone-features-showcase__card-desc {
  flex: 1 1 220px;
  min-width: 0;
  margin: 0;
}

.proone-features-showcase__card--wide .proone-features-showcase__card-action {
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  .proone-features-showcase__card--wide {
    display: block;
  }

  .proone-features-showcase__card--wide .proone-features-showcase__card-header,
  .proone-features-showcase__card--wide .proone-features-showcase__card-body {
    padding: 24px 24px 0;
  }

  .proone-features-showcase__card--wide .proone-features-showcase__card-body {
    display: block;
    padding-bottom: 24px;
  }

  .proone-features-showcase__card--wide .proone-features-showcase__card-desc {
    flex-basis: auto;
  }

  .proone-features-showcase__card--wide .proone-features-showcase__card-desc {
    margin: 8px 0 12px;
  }
}


/* --- 2026-09-27 機能ページを4本追加（AI OCR・電子受発注・定期契約・電子署名）----
   トップの機能一覧は通常のカードが16枚になった。4列・2列は割り切れるが、3列
   （993〜1200px）だけ1枚あまるので、その幅でだけ最後の1枚をAIと同じ帯にする。 */
/* 3列のときに最後の1枚を帯にする規則は削除（2026-10-11 プロワンAIもほかと同じ大きさにしたため） */

/* ヘッダーの「機能」メニュー。17項目を1列に積むと画面の高さを超えるので、
   PC（1025px以上）では2列に組む。モバイルは main.css のアコーディオンのまま。
   列の幅はそれぞれの列でいちばん長い項目に合わせる。並び替えで長い項目が右列に寄っても、
   左列が間延びして真ん中が空かないように（2026-10-20） */
@media (min-width: 1025px) {
  .dropdown-menu.dropdown-menu--features {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 20px;
    min-width: 0;
  }
  .dropdown-menu--features .dropdown-link.dropdown-link--icon {
    padding-right: 8px;
    white-space: nowrap;      /* 「レポート・ダッシュボード」が最後の1字だけ折り返すのを防ぐ */
  }
}

/* ヘッダーの「機能」メニューの項目に、トップの機能一覧と同じアイコンを小さく添える
   （2026-09-27 本人指示）。17項目を目で探しやすくするため */
.dropdown-link.dropdown-link--icon {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dropdown-link--icon .dropdown-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(111,61,156,0.08);
  color: var(--color-main, #6F3D9C);
}

/* 機能ページの「関連する機能」と /features/ の一覧は、トップの機能一覧と同じカード
   （inc/feature-cards.php）。関連は3枚なので3列、狭い幅では1列に積む */
.feature-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 24px;
}
@media (max-width: 768px) {
  .feature-related-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.feature-archive-grid {
  margin-top: 48px;
}

/* 機能カードのサムネイル版（/features/ の一覧と「関連する機能」。inc/feature-cards.php）。
   アイコンの代わりにFV動画の1コマを置き、PCでカーソルを乗せたカードだけ動画を流す */
.proone-feature-thumb {
  position: relative;
  aspect-ratio: 1200 / 816;   /* 動画と同じ比率。サムネイルは動画の0秒目そのもの（切り抜かない）。乗せても絵がずれない */
  background: #FCF6FB;
  border-bottom: 1px solid rgba(111,61,156,0.08);
  overflow: hidden;
}
.proone-feature-thumb img,
.proone-feature-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.proone-feature-thumb video {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.proone-feature-thumb.is-playing video {
  opacity: 1;
}
.proone-features-showcase__card--thumb {
  min-height: 0;
}
.proone-features-showcase__card--thumb .proone-features-showcase__card-body {
  padding-top: 20px;
}
/* 横長の帯（プロワンAI・3列のときの最後の1枚）はサムネイルを左に置く */
.proone-features-showcase__card--wide.proone-features-showcase__card--thumb .proone-feature-thumb {
  flex: 0 0 280px;
  align-self: center;
  aspect-ratio: 1200 / 816;
  min-height: 0;
  border-bottom: 0;
  border-right: 1px solid rgba(111,61,156,0.08);
}
.proone-features-showcase__card--wide.proone-features-showcase__card--thumb .proone-features-showcase__card-body {
  padding: 24px 28px;
}
@media (max-width: 767px) {
  .proone-features-showcase__card--wide.proone-features-showcase__card--thumb .proone-feature-thumb {
    aspect-ratio: 1200 / 816;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(111,61,156,0.08);
  }
}

/* 「関連する機能」の見出しを他の面と同じく中央に（見出しが inline-block で、親が左寄せだった） */
.related-features {
  text-align: center;
}
.related-features .feature-related-grid {
  text-align: left;
}

/* 「導入事例をすべて見る」「機能一覧をすべて見る」は緑で塗ったボタン（2026-10-11 本人指示で塗りを既定に）。乗せると濃い緑 */
.feature-cases-all,
.related-features-all {
  text-align: center;
  margin-top: 40px;
}
.feature-cases-all a,
.related-features-all a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px 14px 34px;
  border: 1.5px solid var(--color-main, #6F3D9C);
  border-radius: 999px;
  background: var(--color-main, #6F3D9C);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(111,61,156,0.22);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.feature-cases-all a::after,
.related-features-all a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.feature-cases-all a:hover,
.related-features-all a:hover {
  background: #6F3D9C;
  border-color: #6F3D9C;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(111,61,156,0.28);
}
.feature-cases-all a:hover::after,
.related-features-all a:hover::after {
  transform: translateX(3px) rotate(45deg);
}

/* 主な機能の図を部品ごとに順に出す（feature-page.js の initFigureAnimation）。
   JS が動くまでは元の1枚の図。画面の手前でレイヤーに切り替え、見えているあいだループする */
.fig-anim {
  position: relative;
}
.fig-anim .fig-layers {
  visibility: hidden;   /* display:none だと loading=lazy の画像が読み込まれない */
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fig-anim.is-live .fig-layers {
  visibility: visible;
}
.fig-anim.is-live > img {
  opacity: 0;
}
.fig-anim .fig-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.fig-anim .fig-layer.on {
  opacity: 1;
  transform: none;
}
.fig-anim.is-fading .fig-layer {
  transition: opacity 0.4s ease;
  transform: none;
}
/* 帯（上から順に出す）は、帯の継ぎ目が動いて見えないよう縦には動かさない */
.fig-anim--bands .fig-layer {
  transform: none;
}

/* 現場アプリのFV動画はスマホの形に切り抜いてあるので、周りの背景を出さずに端末の角に合わせて丸める
   （動画 416×800。端末の角の半径は幅の13.6%・高さの7.1%） */
.feature-hero-image video.feature-hero-video--phone {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 470px;
  margin: 0 auto;
  border-radius: 13.6% / 7.1%;
  background: transparent;
  box-shadow: 0 16px 32px rgba(47,28,64,0.22);
}
@media (max-width: 767px) {
  .feature-hero-image video.feature-hero-video--phone {
    max-height: 420px;
  }
}

/* 「関連する機能」の見出しを、ほかの面の見出し（.section-title）と同じ短い線に。
   main.css の .related-features h2:after（文字幅いっぱいの下線）を打ち消す */
.related-features h2.section-title {
  display: inline-block;
  margin-bottom: 40px;
}
.related-features h2.section-title::after {
  bottom: -16px;
  left: 50%;
  width: 80px;
  height: 4px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--color-main), var(--color-sub-light));
  border-radius: 2px;
}

/* 導入効果・導入事例の前のCTA（single-features.php）。淡い緑の帯に、資料DL（FVと同じ）と相談 */
.feature-mid-cta {
  padding: 0 0 72px;
}
.feature-mid-cta__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 36px 44px;
  border-radius: 18px;
  background: linear-gradient(135deg, #F1E8F6 0%, #FCF6FB 100%);
  border: 1px solid rgba(111,61,156,0.16);
}
.feature-mid-cta__title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  color: var(--color-sub-dark, #2F1C40);
}
.feature-mid-cta__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #53405F;
}
.feature-mid-cta__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.feature-mid-cta__buttons .feature-detail-button {
  margin: 0;
}
.feature-mid-cta__sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-main, #6F3D9C);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .feature-mid-cta { padding-bottom: 48px; }
  .feature-mid-cta__box { flex-direction: column; align-items: stretch; text-align: center; padding: 28px 20px; gap: 20px; }
  .feature-mid-cta__title { font-size: 20px; }
}

/* ==================================================================
   活用シーン（新しい構成）  template-parts/scene-page.php
   2026-10-12 新設・10-13 作り直し。部品は機能ページのクラスを使い回し、
   ここにはシーンだけにあるもの（FV3案・ロゴ帯・4つの使い方・声・ほかの業種）を置く
   ================================================================== */

/* --- ファーストビュー ---------------------------------------------- */
/* H1 は検索語（「ビルメンテナンス業の案件管理システム」）を持たせ、
   目に入る大きな一文は案ごとのキャッチにする */
.scene-fv-h1 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
}

.scene-fv-catch {
  margin: 0 0 18px;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.35;
  color: #FFFFFF;
  word-break: auto-phrase;
  text-wrap: balance;
}

.scene-fv-visual {
  flex: 1;
  max-width: 50%;
  min-width: 0;
}

.scene-fv-visual .image-caption {
  margin-top: 10px;
}

/* 案aの動画は機能ページと同じ .feature-hero-image に入れている。あちらの max-width:50% は
   横並びの列としての幅なので、ここでは外側（.scene-fv-visual）に任せて全幅にする */
.scene-fv-visual .feature-hero-image {
  max-width: 100%;
}

/* ヒーローの数字。広告っぽくならないよう、白の薄い面に控えめに置く */
.scene-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
}

.scene-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
  color: #FFFFFF;
}

.scene-hero-stat__label { font-size: 12px; line-height: 1.5; opacity: 0.9; }
.scene-hero-stat__value { font-size: 18px; font-weight: 800; line-height: 1.4; word-break: auto-phrase; }
.scene-hero-stat__source { font-size: 11px; line-height: 1.5; opacity: 0.8; }
/* 札が2枚のシーン（建設・プラント・製造販売）は2列。数字の出典は札ごとでなく下に1行だけ */
.scene-hero-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scene-hero-stats__note { margin: -14px 0 22px; font-size: 11px; color: rgba(255,255,255,0.75); }

/* 順に出す部品。JS（assets/js/scene-page.js）が .is-live を付けたときだけ隠す。
   JSが無い・動きを減らす設定では、最初から全部出たまま */
[data-scene-steps].is-live [data-step] {
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

[data-scene-steps].is-live [data-step].on {
  opacity: 1;
  transform: none;
}

[data-scene-steps].is-live.is-fading [data-step] {
  opacity: 0;
  transition-duration: 0.5s;
}

/* 背景：業種の写真を白黒で敷き、機能ページと同じ緑のグラデーションを透かして重ねる
   （2026-10-13 本人指示。機能ページのFVとの見分け）。luminosity で写真の明暗だけを取り、
   色は下の緑のまま。文字の読みやすさを優先して薄めにしてある */
.scene-hero-section {
  background-color: #54318B;
}

/* 白文字の読みやすさ（2026-10-13 本人指摘「白文字が見えにくいときがある」）。
   写真の明るいところ（空・白い壁）と、グラデーションの明るい色が重なると文字が沈む。
   背景全体は濃くせず、文字の載る左側だけに暗い層を重ねる（::after は写真より上・文字より下）。
   右の動画の側は今の明るさのまま。光源の白は少し弱める */
.scene-hero-section::after {
  background:
    linear-gradient(90deg, rgba(111,61,156,0.62) 0%, rgba(111,61,156,0.48) 38%, rgba(111,61,156,0.12) 62%, rgba(111,61,156,0) 80%),
    radial-gradient(120% 100% at 82% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 55%);
}

.scene-hero-section .scene-fv-catch,
.scene-hero-section .scene-fv-h1,
.scene-hero-section .feature-description { text-shadow: 0 1px 14px rgba(47,28,64,0.35); }

/* 1列（文字の下に動画）になる幅では、左右でなく全体を一様に少し暗くする */
@media (max-width: 992px) {
  .scene-hero-section::after {
    background: linear-gradient(180deg, rgba(111,61,156,0.5) 0%, rgba(111,61,156,0.38) 60%, rgba(111,61,156,0.2) 100%);
  }
}

.scene-fv-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 35%;
  opacity: 0.38;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

/* 案b：導入企業の写真と声 */
.bm-voice {
  position: relative;
  margin: 0;
}

.bm-voice__photo {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(111,61,156,0.25);
}

.bm-voice__photo img {
  display: block;
  width: 100%;
  height: auto;
  animation: bmKenBurns 18s ease-in-out infinite alternate;
}

@keyframes bmKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.bm-voice__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: -56px 18px 0;
  padding: 16px 18px;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(111,61,156,0.18);
  color: var(--color-text);
  animation: bmRise 0.8s 0.3s ease both;
}

@keyframes bmRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.bm-voice__label { font-size: 12px; font-weight: 800; color: var(--color-main); }
.bm-voice__text { font-size: 15px; font-weight: 700; line-height: 1.75; }
.bm-voice__speaker { font-size: 12px; text-align: right; color: #53405F; }

.bm-voice__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 18px 0;
  padding: 0;
  list-style: none;
}

.bm-voice__stats li {
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  color: #FFFFFF;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 12px;
}

.bm-voice__stats span { font-size: 12px; opacity: 0.9; }
.bm-voice__stats strong { font-size: 20px; font-weight: 800; }
.bm-voice__stats small { font-size: 11px; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  .bm-voice__photo img,
  .bm-voice__card { animation: none; }
}

/* 案c：取引先別の売り上げ */
.bm-numbers {
  padding: 20px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(111,61,156,0.22);
  color: var(--color-sub-dark, #54318B);
}

.bm-numbers__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 800;
}

.bm-numbers__legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #77677F;
}

.bm-numbers__legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border-radius: 2px;
}

.bm-numbers .is-clean { background: #6F3D9C; }
.bm-numbers .is-facility { background: #8450B8; }

.bm-numbers__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bm-numbers__row {
  display: grid;
  grid-template-columns: 136px 1fr 84px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.bm-numbers__name { font-weight: 700; }

.bm-numbers__bars {
  display: flex;
  height: 18px;
  background: #FCF6FB;
  border-radius: 4px;
  overflow: hidden;
}

/* 棒は出る段で左から伸びる */
.bm-numbers__bars b {
  display: block;
  width: var(--w);
  transition: width 0.7s ease;
}

.bm-numbers.is-live .bm-numbers__row:not(.on) .bm-numbers__bars b { width: 0; }

.bm-numbers__margin { font-size: 12px; font-weight: 700; text-align: right; color: #53405F; }

.bm-numbers__row.is-flag .bm-numbers__margin { color: #C93279; }

.bm-numbers__note {
  margin: 14px 0 0;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #C93279;
  background: #FCF6FB;
  border-radius: 8px;
}

/* --- 導入企業のロゴ（導入事例のカードと「すべて見る」のあいだ） ----------- */
/* ロゴ帯は6社ぶんしか無く、幅が広いと同じロゴが2つ映るので幅を絞る */
.scene-logos {
  margin: 40px 0 8px;
}

.scene-logos .po-logo-band {
  max-width: 820px;
  margin: 0 auto;
}

/* --- お悩み（3枚） --------------------------------------------------- */
.scene-problems-layout {
  max-width: 1080px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scene-problem-source {
  margin: auto 0 22px;
  font-size: 12px;
  color: #77677F;
  text-align: right;
}

/* --- 4つの使い方 ---------------------------------------------------- */
.scene-points {
  padding: 80px 0 40px;
  background: #FFFFFF;
}

.scene-point {
  padding: 48px 0;
  border-top: 1px solid rgba(111,61,156,0.12);
  scroll-margin-top: 100px;
}

.scene-point:first-of-type { border-top: 0; }

.scene-point__head {
  max-width: 880px;
  margin: 0 0 28px;
}

.scene-point__num {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-main);
}

/* 読み手の言葉の見出し。いちばん大きく */
.scene-point__want {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.45;
  color: var(--color-sub-dark);
  word-break: auto-phrase;
  text-wrap: pretty;
}

.scene-point__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}


.scene-point__body {
  display: flex;
  flex-direction: column;
  gap: 24px;  /* 2026-10-13 本人指摘「若干窮屈」で 16→24。行間は変えない */
}

.scene-point__title {
  margin: 0;
  padding-left: 12px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-main);
  border-left: 4px solid var(--color-main);
}

.scene-point__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.95;
  color: var(--color-text);
}

/* 本文の大事な1か所の下線（2026-10-13 本人指示）。お悩み見出しの強調（.feature-problems-mark）と
   同じオレンジの太い線を文字の下側に敷き、少しだけ太字に。折り返しても行ごとに線が付く */
.scene-point__mark {
  font-weight: 700;
  color: var(--color-sub-dark);
  background: linear-gradient(transparent 64%, rgba(201,50,121,0.3) 64%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.scene-point__media {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* PCでは本文のほうが長いので、画面を追従させて横の空きを減らす */
@media (min-width: 961px) {
  .scene-point__media {
    position: sticky;
    top: 100px;
  }
}

/* 実画面。薄緑の面に置き、見えたときに下から出す */
.scene-point__screen {
  margin: 0;
  padding: 16px;
  background: rgba(111,61,156,0.06);
  border-radius: 20px;
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.scene-point__screen.is-hidden { opacity: 0; transform: translateY(24px); }
.scene-point__screen.is-hidden.is-shown { opacity: 1; transform: none; }

.scene-point__screen img {
  display: block;
  width: 100%;
  height: auto;
}

.scene-point__screen figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: #77677F;
  text-align: center;
}

.scene-point__features-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #53405F;
}

.scene-point__features ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scene-point__features a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-sub-dark);
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.22);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.scene-point__features a:hover {
  border-color: var(--color-main);
  transform: translateY(-1px);
}

.scene-point__features-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-main);
  background: rgba(111,61,156,0.08);
  border-radius: 8px;
}

.scene-point__features-icon svg { width: 20px; height: 20px; }

/* 業種ならではの周期の例。表のように、名前と周期を左右に並べる */
.scene-point__cycles {
  padding: 14px 18px;
  background: #FCF6FB;
  border-radius: 12px;
}

.scene-point__cycles-label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-sub-dark);
}

.scene-point__cycles ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.scene-point__cycles li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
  border-top: 1px dashed rgba(111,61,156,0.2);
}

.scene-point__cycles li:first-child { border-top: 0; }
.scene-point__cycles strong { font-weight: 800; color: var(--color-main); white-space: nowrap; }

.scene-point__cycles-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #77677F;
}

/* 数字・声・事例へのリンク */
.scene-solution-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scene-solution-chips li {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-main);
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.32);
  border-radius: 999px;
}

/* 導入後の声。コラムの導入事例と同じ薄緑（#FCF6FB） */
.scene-solution-voice {
  margin: 0;
  padding: 22px 26px;
  background: #FCF6FB;
  border-radius: 12px;
}

.scene-solution-voice__label { margin: 0 0 10px; font-size: 13px; font-weight: 800; color: var(--color-main); }

.scene-solution-voice__text {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text);
}

.scene-solution-voice__speaker { margin: 16px 0 0; font-size: 13px; text-align: right; color: #53405F; }

/* 話した人の名前を、そのまま導入事例へのリンクにする（2026-10-13 本人指示「あまり目立たなくてよい」「矢印はいらない」）。
   文字の色は名前のまま。乗せると緑の下線 */
.scene-solution-voice__case {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.scene-solution-voice__case:hover { color: var(--color-main); text-decoration: underline; text-underline-offset: 3px; }

/* 会社名と「部署・名前」の2段。会社名を少し太く */
.voice-speaker__company,
.voice-speaker__person { display: block; }
.voice-speaker__company { font-weight: 700; color: var(--color-sub-dark); }
.voice-speaker__person { margin-top: 2px; }

.scene-solution-case { margin: 0; font-size: 14px; }
.scene-solution-case a { color: var(--color-main); font-weight: 700; }

/* --- よくある質問・よく使われる機能 ------------------------------- */
.scene-faq-section {
  padding: 80px 0;
  background: #FFFFFF;
}

.scene-faq-section .feature-faq { margin-top: 0; text-align: center; }
.scene-faq-section .feature-faq-list { text-align: left; }

.scene-features { padding: 80px 0 40px; }


@media (max-width: 992px) {
  .scene-fv-visual { max-width: 100%; width: 100%; }
}

@media (max-width: 960px) {
  .scene-problems-layout {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  /* 1列のときは「小見出し → 本文 → 画面 → 周期・数字・声・事例」。本文の箱を
     ほどいて画面を本文の直後に出す。そのままだと画面が声の下まで離れる */
  .scene-point__inner { display: flex; flex-direction: column; gap: 16px; }
  .scene-point__body { display: contents; }
  .scene-point__title { order: 1; }
  .scene-point__text { order: 2; }
  .scene-point__media { order: 3; margin: 8px 0; }
  .scene-point__cycles { order: 4; }
  .scene-point .scene-solution-chips { order: 5; }
  .scene-point .scene-solution-voice { order: 6; }
  .scene-point .scene-solution-case { order: 7; }
}

@media (max-width: 767px) {
  .scene-hero-stats { grid-template-columns: 1fr; }

  .scene-hero-stat {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
  }

  .bm-numbers { padding: 14px; }
  .bm-numbers__row { grid-template-columns: 88px 1fr 72px; font-size: 12px; }

  .bm-voice__card { margin: -32px 10px 0; }
  .bm-voice__stats { margin: 12px 0 0; }

  .scene-points { padding: 56px 0 24px; }
  .scene-point { padding: 32px 0; }
  .scene-point__screen { padding: 10px; }

  .scene-faq-section,
  .scene-features { padding: 56px 0; }
}

/* --- 活用シーンの一覧（archive-scene.php） ------------------------------
   機能一覧と同じカード（.proone-features-showcase__card--thumb）。事例の会社名だけ足す */
.scene-archive-grid {
  margin-bottom: 80px;
}

.scene-archive-card .proone-features-showcase__card-title {
  font-size: 20px;
}

/* 事例は薄い緑の枠に入れてカードの下端にそろえる。写真を丸く重ね、会社名は1社1行（長い社名は折り返す） */
.scene-archive-card .proone-features-showcase__card-desc {
  margin-bottom: 16px;
}

.scene-archive-cases {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: #FCF6FB;
  color: var(--color-sub-dark);
}

.scene-archive-cases__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.scene-archive-cases__faces {
  display: flex;
}

.scene-archive-cases__faces img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FCF6FB;
  background: #F1E8F6;
  margin-left: -8px;
}

.scene-archive-cases__faces img:first-child {
  margin-left: 0;
}

.scene-archive-cases__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-main);
  letter-spacing: 0.02em;
}

.scene-archive-cases__names {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scene-archive-cases__names li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}

.scene-archive-cases__names li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--color-sub-light);
}

/* =====================================================================
   サポート系のページ（/support/ と配下3ページ。template-parts/support/）
   2026-10-13 新設。機能ページ・活用シーンと同じ部品（緑のFV・白いカード・FAQ・中間CTA）を使い回し、
   ここにはサポートだけの部品を置く
   ===================================================================== */

.support-hero-section .feature-hero-content { align-items: center; }
.support-fv-visual .image-caption { margin-top: 10px; }

/* --- サポート体制のFV: 導入スケジュール（例）が1段ずつ済みになる ------------ */
.support-schedule {
  padding: 20px 20px 18px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(111,61,156,0.22);
  color: var(--color-sub-dark, #54318B);
}

.support-schedule__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 800;
}

.support-schedule__legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #77677F;
}

.support-schedule__legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border-radius: 2px;
}

.support-schedule .is-proone { --lead: #6F3D9C; }
.support-schedule .is-you { --lead: #C93279; }
.support-schedule .is-both { --lead: linear-gradient(90deg, #6F3D9C 50%, #C93279 50%); }
.support-schedule__legend .is-proone { background: #6F3D9C; }
.support-schedule__legend .is-you { background: #C93279; }

.support-schedule__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.support-schedule__row {
  display: grid;
  grid-template-columns: 22px 74px 1fr 64px;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #FCF6FB;
  font-size: 13px;
}

.support-schedule__check {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #E4D8EC;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* 済みの印。段が出ると緑の丸に白いチェック */
.support-schedule__check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.support-schedule__row .support-schedule__check { background: #6F3D9C; border-color: #6F3D9C; }
.support-schedule__when { font-size: 12px; font-weight: 700; color: #77677F; white-space: nowrap; }
.support-schedule__title { font-weight: 700; line-height: 1.4; }

.support-schedule__bar {
  display: block;
  height: 8px;
  background: #F1E8F6;
  border-radius: 4px;
  overflow: hidden;
}

.support-schedule__bar b {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--lead);
  transition: width 0.6s ease;
}

/* 動いているあいだは、まだの段を「未」の見た目にしておき、出た段から済みにする */
[data-scene-steps].is-live .support-schedule__row { opacity: 1; transform: none; }
[data-scene-steps].is-live .support-schedule__row:not(.on) .support-schedule__check { background: #FFFFFF; border-color: #E4D8EC; }
[data-scene-steps].is-live .support-schedule__row:not(.on) .support-schedule__bar b { width: 0; }
[data-scene-steps].is-live .support-schedule__row:not(.on) { color: #AA96B6; }
[data-scene-steps].is-live.is-fading .support-schedule__row { opacity: 1; }

.support-schedule__done {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #F1E8F6;
  color: #6F3D9C;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

/* --- サポート体制のFV: 導入ステップ（2026-10-18 全面改訂。回数・期間は出さない） --- */
.support-schedule--steps .support-schedule__row {
  grid-template-columns: 22px 34px 1fr;
  padding: 10px 12px;
}
.support-schedule__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #F1E8F6;
  color: #6F3D9C;
}
.support-schedule__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.support-schedule__text b { font-size: 14px; font-weight: 800; }
.support-schedule__text small { font-size: 12px; color: #77677F; }
.support-schedule--steps .support-schedule__row.is-goal { background: #6F3D9C; color: #FFFFFF; }
.support-schedule--steps .support-schedule__row.is-goal .support-schedule__icon { background: rgba(255,255,255,0.18); color: #FFFFFF; }
.support-schedule--steps .support-schedule__row.is-goal small { color: rgba(255,255,255,0.85); }
.support-schedule--steps .support-schedule__row.is-goal .support-schedule__check { background: #FFFFFF; border-color: #FFFFFF; }
.support-schedule--steps .support-schedule__row.is-goal .support-schedule__check::after { border-color: #6F3D9C; }
[data-scene-steps].is-live .support-schedule--steps .support-schedule__row:not(.on) small,
[data-scene-steps].support-schedule--steps.is-live .support-schedule__row:not(.on) small { color: #AA96B6; }
[data-scene-steps].support-schedule--steps.is-live .support-schedule__row:not(.on) { background: #FCF6FB; color: #AA96B6; }
[data-scene-steps].support-schedule--steps.is-live .support-schedule__row:not(.on) .support-schedule__icon { background: #F1E8F6; color: #AA96B6; }
.support-schedule__row { transition: background 0.35s ease, color 0.35s ease; }
.support-schedule__done { transition: opacity 0.4s ease; }
[data-scene-steps].is-live .support-schedule__done:not(.on) { opacity: 0; }

/* --- サポート体制: 導入ステップ（1本の道＋伴走から自走への帯） ------------ */
.sys-steps, .sys-feats { padding: 88px 0; }
.sys-steps { background: #FFFFFF; }
.sys-steps .section-description { line-height: 1.9; }
.sys-nowrap { display: inline-block; }
@media (max-width: 767px) { .sys-steps__lead br { display: none; } }

.sys-journey { max-width: 1120px; margin: 48px auto 0; }

.sys-journey__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 道。丸の中心を通る細い線。見えたときに左から引かれる */
.sys-journey__steps::before {
  content: '';
  position: absolute;
  top: 35px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, #F8D8EB, #6F3D9C);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
}

/* 道の上を1回だけ走る光 */
.sys-journey__steps::after {
  content: '';
  position: absolute;
  top: 30px;
  left: 10%;
  width: 60px;
  height: 12px;
  margin-left: -30px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,1), rgba(189,239,250,.7) 45%, rgba(189,239,250,0));
  opacity: 0;
  pointer-events: none;
}

.sys-journey.is-hidden .sys-journey__steps::before { transform: scaleX(0); }
.sys-journey.is-hidden.is-shown .sys-journey__steps::before { transform: scaleX(1); }
.sys-journey.is-hidden.is-shown .sys-journey__steps::after { animation: sysJourneyGlint 1.9s cubic-bezier(.4, 0, .2, 1) .9s 1 both; }

@keyframes sysJourneyGlint {
  0% { left: 10%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 90%; opacity: 0; }
}

.sys-journey__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--i) * .16s + .2s);
}

.sys-journey.is-hidden .sys-journey__step { opacity: 0; transform: translateY(14px); }
.sys-journey.is-hidden.is-shown .sys-journey__step { opacity: 1; transform: none; }

.sys-journey__dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #F8D8EB;
  color: #6F3D9C;
}

.sys-journey__step.is-goal .sys-journey__dot {
  background: #6F3D9C;
  border-color: #6F3D9C;
  color: #FFFFFF;
  box-shadow: 0 0 0 8px rgba(111,61,156,.12);
}

.sys-journey__num { margin-top: 16px; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: #6F3D9C; }
.sys-journey__title { margin: 6px 0 6px; font-size: 18px; font-weight: 800; line-height: 1.45; color: var(--color-sub-dark, #54318B); text-wrap: balance; }
.sys-journey__sub { margin: 0; font-size: 14px; line-height: 1.7; color: #53405F; text-wrap: pretty; }

/* 伴走から自走へ。CSの面が細り、お客様の面が太っていく */
.sys-journey__shift {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
}

.sys-journey__lanes {
  position: relative;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
}

.sys-journey__lane {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 0 20px;
  font-size: 14px;
}

.sys-journey__lane b { font-weight: 800; letter-spacing: .04em; }

.sys-journey__lane.is-cs {
  align-items: center;
  background: linear-gradient(90deg, #6F3D9C, #8450B8);
  color: #FFFFFF;
  clip-path: polygon(0 0, 100% 0, 100% 34%, 0 100%);
}

.sys-journey__lane.is-cs b { transform: translateY(-6px); }

.sys-journey__lane.is-you {
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 10px;
  background: #F1E8F6;
  color: #6F3D9C;
  clip-path: polygon(0 calc(100% + 4px), 100% calc(34% + 4px), 100% 100%, 0 100%);
}

/* 見えたとき、帯が左から伸びる */
.sys-journey__lanes::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(.4, 0, .2, 1) .5s;
}

.sys-journey.is-hidden .sys-journey__lanes::after { transform: scaleX(1); }
.sys-journey.is-hidden.is-shown .sys-journey__lanes::after { transform: scaleX(0); }

.sys-journey__end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: #6F3D9C;
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  white-space: nowrap;
}

.sys-journey__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- サポート体制: 3つのゴール（実写を緑に溶かした全幅の帯） ---------------
   2026-10-19 本人「もう1段デザイン的に」「背景にサポートの写真を入れて緑のマスクに」「人が見えないデザインになっている」。
   前後の白い節の間に、人の見える深い緑の帯を1本はさむ。左に一言、右にすりガラスの板に3行 */
.sys-goals {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  background: linear-gradient(120deg, #6F3D9C 0%, #6F3D9C 55%, #54318B 100%);
  color: #FFFFFF;
}

.sys-goals__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--sys-goals-photo) 30% 40% / cover no-repeat;
  opacity: .5;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, #2F1C40 0%, #2F1C40 40%, rgba(47,28,64,.35) 75%, rgba(47,28,64,.2) 100%);
  mask-image: linear-gradient(90deg, #2F1C40 0%, #2F1C40 40%, rgba(47,28,64,.35) 75%, rgba(47,28,64,.2) 100%);
  pointer-events: none;
}

.sys-goals > .container { position: relative; z-index: 2; }

.sys-goals__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  max-width: 1120px;
  transition: opacity .6s ease, transform .6s ease;
}

.sys-goals__inner.is-hidden { opacity: 0; transform: translateY(20px); }
.sys-goals__inner.is-hidden.is-shown { opacity: 1; transform: none; }

.sys-goals__title {
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #FFFFFF;
}

.sys-goals__catch { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.6; color: rgba(255,255,255,.9); text-shadow: 0 2px 16px rgba(47,28,64,.25); }

/* 「自走できる運用体制」を大きく。下に引いた明るい線が、見えたときに左から伸びる */
.sys-goals__em {
  position: relative;
  display: inline-block;
  margin-top: 4px;
  padding-bottom: 10px;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.35;
  color: #FFFFFF;
}

.sys-goals__em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #BDEFFA, rgba(189,239,250,0));
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.4, 0, .2, 1) .4s;
}

.sys-goals__inner.is-hidden .sys-goals__em::after { transform: scaleX(0); }
.sys-goals__inner.is-hidden.is-shown .sys-goals__em::after { transform: scaleX(1); }

/* 右の3行。すりガラスの板に、線で区切って並べる */
.sys-goals__list {
  margin: 0;
  padding: 8px 32px;
  list-style: none;
  border-radius: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 48px rgba(111,61,156,.25);
}

.sys-goals__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  padding: 22px 0;
}

.sys-goals__item + .sys-goals__item { border-top: 1px solid rgba(255,255,255,.2); }

/* チェックの丸。見えたとき、上から順に白く埋まる */
.sys-goals__check {
  position: relative;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.6);
  background: #FFFFFF;
  transition: background .4s ease;
  transition-delay: calc(var(--i) * .35s + .6s);
}

.sys-goals__check::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #6F3D9C;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.sys-goals__inner.is-hidden .sys-goals__check { background: transparent; }
.sys-goals__inner.is-hidden.is-shown .sys-goals__check { background: #FFFFFF; }

.sys-goals__name { margin: 0 0 6px; font-size: 20px; font-weight: 800; line-height: 1.5; color: #FFFFFF; text-wrap: pretty; }
.sys-goals__text { margin: 0; font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.86); text-wrap: pretty; }

@media (max-width: 960px) {
  .sys-goals { padding: 72px 0; }
  .sys-goals__inner { grid-template-columns: 1fr; gap: 32px; max-width: 600px; }
  .sys-goals__photo {
    opacity: .4;
    -webkit-mask-image: linear-gradient(180deg, #2F1C40 0%, #2F1C40 35%, rgba(47,28,64,.3) 70%);
    mask-image: linear-gradient(180deg, #2F1C40 0%, #2F1C40 35%, rgba(47,28,64,.3) 70%);
  }
}

@media (max-width: 767px) {
  .sys-goals { padding: 56px 0; }
  .sys-goals__catch { font-size: 18px; }
  .sys-goals__em { font-size: 28px; }
  .sys-goals__list { padding: 4px 20px; border-radius: 16px; }
  .sys-goals__name { font-size: 18px; }
}

/* --- サポート体制のFV: 実写を緑に溶かす（特徴・料金のFVと同じ重ね方） --- */
.support-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--support-hero-photo) 20% 38% / cover no-repeat;
  opacity: .6;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, #2F1C40 0%, #2F1C40 55%, rgba(47,28,64,.3) 80%, rgba(47,28,64,.15) 100%);
  mask-image: linear-gradient(90deg, #2F1C40 0%, #2F1C40 55%, rgba(47,28,64,.3) 80%, rgba(47,28,64,.15) 100%);
  pointer-events: none;
}

@media (max-width: 960px) {
  .support-hero__photo {
    opacity: .35;
    background-position: center 30%;
    -webkit-mask-image: linear-gradient(180deg, #2F1C40 0%, rgba(47,28,64,.5) 50%, rgba(47,28,64,.1) 100%);
    mask-image: linear-gradient(180deg, #2F1C40 0%, rgba(47,28,64,.5) 50%, rgba(47,28,64,.1) 100%);
  }
}

/* --- サポート体制: 導入支援の特徴（線で区切った3行） -------------------------- */
.sys-feats { background: #FFFFFF; }

.sys-feats__list { max-width: 980px; margin: 40px auto 0; padding: 0; list-style: none; }

.sys-feat {
  display: grid;
  grid-template-columns: 110px minmax(0, 0.9fr) minmax(0, 1.3fr);
  gap: 32px;
  align-items: center;
  padding: 32px 8px;
  border-top: 1px solid #F1E8F6;
  transition: opacity .6s ease, transform .6s ease;
}

.sys-feat:last-child { border-bottom: 1px solid #F1E8F6; }
.sys-feat.is-hidden { opacity: 0; transform: translateY(16px); }
.sys-feat.is-hidden.is-shown { opacity: 1; transform: none; }

.sys-feat__num {
  font-size: 64px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px #6F3D9C;
}

.sys-feat__title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.55; color: var(--color-sub-dark, #54318B); word-break: keep-all; overflow-wrap: anywhere; }
.sys-feat__text { margin: 0; font-size: 15px; line-height: 1.9; color: #53405F; }

@media (max-width: 960px) {
  .sys-journey__steps { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin: 0 auto; }
  .sys-journey__steps::before { top: 36px; bottom: 36px; left: 35px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, #F8D8EB, #6F3D9C); transform-origin: center top; }
  .sys-journey.is-hidden .sys-journey__steps::before { transform: scaleY(0); }
  .sys-journey.is-hidden.is-shown .sys-journey__steps::before { transform: scaleY(1); }
  .sys-journey__steps::after { display: none; }
  .sys-journey__step {
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 18px;
    align-items: start;
    padding: 0 0 22px;
    text-align: left;
  }
  .sys-journey__dot { grid-row: 1 / 4; }
  .sys-journey__num { margin-top: 8px; }
  .sys-journey__title { margin: 2px 0 2px; }
  .sys-journey__shift { grid-template-columns: 1fr; max-width: 520px; margin: 16px auto 0; justify-items: center; }
  .sys-journey__lanes { width: 100%; }
  .sys-feat { grid-template-columns: 80px 1fr; gap: 8px 20px; }
  .sys-feat__num { grid-row: 1 / 3; font-size: 48px; align-self: start; }
}

@media (max-width: 767px) {
  .sys-steps, .sys-feats { padding: 56px 0; }
  .sys-feat { grid-template-columns: 1fr; padding: 24px 4px; }
  .sys-feat__num { grid-row: auto; font-size: 40px; }
  .sys-feat__title { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sys-journey__steps::after { display: none; }
}

/* --- 導入前の不安 ---------------------------------------------------- */
.support-worries__layout {
  max-width: 1080px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-worries .feature-problem-card { padding-bottom: 22px; }
.support-worries .feature-problem-text { flex: 1; text-align: center; font-weight: 700; }

.support-worries__answer {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: #F1E8F6;
  color: var(--color-main);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.support-worries__answer::after { content: ' ↓'; }
.support-worries__answer:hover { background: #F1E8F6; }

/* --- 導入の流れ（縦のタイムライン） ----------------------------------- */
.support-flow { padding: 80px 0; background: #FFFFFF; }

.support-flow__list {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* 左の縦線 */
.support-flow__list::before {
  content: '';
  position: absolute;
  left: 63px;
  top: 12px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, #6F3D9C, #8450B8);
}

/* 縦線の先の矢印。運用開始のあと、サポート期間へ続くことを示す */
.support-flow__list::after {
  content: '';
  position: absolute;
  left: 58px;
  bottom: 0;
  border-top: 10px solid #8450B8;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.support-flow__step {
  position: relative;
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 24px;
  padding: 0 0 28px;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.support-flow__step.is-hidden { opacity: 0; transform: translateY(24px); }
.support-flow__step.is-hidden.is-shown { opacity: 1; transform: none; }

.support-flow__mark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  align-self: start;
  padding: 10px 0;
  border-radius: 14px;
  background: #6F3D9C;
  color: #FFFFFF;
}

.support-flow__num { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; }
.support-flow__when { font-size: 15px; font-weight: 800; }

.support-flow__body {
  padding: 20px 24px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.18);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(47,28,64,0.04);
}

.support-flow__title { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--color-sub-dark); }

.support-flow__lead {
  display: inline-block;
  margin: 0 0 12px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #F1E8F6;
  color: #6F3D9C;
}

.support-flow__step.is-you .support-flow__lead { background: #FFF0F7; color: #9D245F; }
.support-flow__step.is-both .support-flow__lead { background: #F1E8F6; color: #53405F; }

.support-flow__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.support-flow__role { padding: 12px 14px; border-radius: 12px; background: #FCF6FB; }
.support-flow__role dt { margin: 0 0 4px; font-size: 13px; font-weight: 800; }
.support-flow__role.is-proone dt { color: #6F3D9C; }
.support-flow__role.is-you dt { color: #9D245F; }
.support-flow__role dd { margin: 0; font-size: 14px; line-height: 1.75; color: #53405F; }

.support-flow__note {
  max-width: 920px;
  margin: 8px auto 0;
  font-size: 14px;
  line-height: 1.8;
  color: #53405F;
  text-align: center;
}

/* --- カード（導入後のサポート・セキュリティの各節） ---------------------- */
.support-after,
.support-sec-settings,
.support-sec-ops { padding: 80px 0; background: linear-gradient(180deg, #FFFFFF 0%, #FCF6FB 100%); }
.support-sec-data { padding: 80px 0; background: #FFFFFF; }

.support-cards {
  display: grid;
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.support-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; }
.support-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.support-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.support-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.16);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(47,28,64,0.04);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.support-card.is-hidden { opacity: 0; transform: translateY(20px); }
.support-card.is-hidden.is-shown { opacity: 1; transform: none; }

.support-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(111,61,156,0.1);
  color: var(--color-main);
}

.support-card__title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.5; color: var(--color-sub-dark); }
.support-card__text { margin: 0; font-size: 14px; line-height: 1.8; color: #53405F; }

.support-card__link {
  margin-top: auto;
  padding-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-main);
}

.support-card__link::after { content: ' →'; }

.support-note {
  max-width: 1120px;
  margin: 20px auto 0;
  font-size: 13px;
  line-height: 1.8;
  color: #77677F;
  text-align: center;
}

.support-note a { color: var(--color-main); font-weight: 700; }

/* --- 導入企業の声 ----------------------------------------------------- */
.support-voices { padding: 80px 0; background: #FFFFFF; }

.support-voices__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
}

.support-voice { display: flex; flex-direction: column; margin: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.support-voice.is-hidden { opacity: 0; transform: translateY(20px); }
.support-voice.is-hidden.is-shown { opacity: 1; transform: none; }
.support-voice .scene-solution-voice__text { flex: 1; }

/* 導入事例のアイキャッチ。カードの上端いっぱいに敷く */
.support-voice__photo {
  display: block;
  margin: -16px -20px 14px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  aspect-ratio: 16 / 9;
}

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

/* --- 有償のオプション -------------------------------------------------- */
.support-options { padding: 0 0 72px; background: #FFFFFF; }

.support-options__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 32px;
  border-radius: 16px;
  background: #FCF6FB;
}

.support-options__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--color-sub-dark); }

.support-options__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 700;
  color: #53405F;
}

.support-options__list li { display: inline-flex; align-items: center; gap: 8px; }
.support-options__list svg { color: var(--color-main); }

/* --- セキュリティ: 第三者認証 ------------------------------------------ */
.support-cert { padding: 80px 0; background: #FFFFFF; }

.support-cert__box {
  display: grid;
  grid-template-columns: 340px 1fr;
  max-width: 1040px;
  margin: 0 auto;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.16);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(111,61,156,0.08);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.support-cert__box.is-hidden { opacity: 0; transform: translateY(20px); }
.support-cert__box.is-hidden.is-shown { opacity: 1; transform: none; }

/* 左: 深い緑の面に印章。面の色は特徴・料金のFVと同じくゆっくり変わる */
.support-cert__mark {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 40px 28px 32px;
  background: linear-gradient(-45deg, #54318B, #6F3D9C, #6F3D9C, #54318B);
  background-size: 400% 400%;
  animation: planHeroGradient 15s ease infinite;
  color: #FFFFFF;
  text-align: center;
}

.support-cert__seal { grid-area: 1 / 1; width: 220px; height: 220px; overflow: visible; }
.support-cert__ring { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1; }
.support-cert__ring.is-inner { stroke: rgba(255,255,255,0.16); }
.support-cert__ticks line { stroke: rgba(255,255,255,0.35); stroke-width: 1; }
.support-cert__orbit { mix-blend-mode: screen; }
.support-cert__orbit circle { fill: none; }
@media (prefers-reduced-motion: reduce) { .support-cert__orbit { display: none; } .support-cert__mark { animation: none; } }

.support-cert__seal-text { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.support-cert__std { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: rgba(255,255,255,0.78); }
.support-cert__num { font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.support-cert__badge {
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.support-cert__sub { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.8); }

/* 右: 説明・大きな登録番号・4項目の枠 */
.support-cert__body { padding: 36px 40px; }
.support-cert__lead { margin: 0 0 20px; font-size: 15px; line-height: 1.9; color: #53405F; }

.support-cert__reg {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(111,61,156,0.16);
  border-bottom: 1px solid rgba(111,61,156,0.16);
}
.support-cert__reg-label { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--color-main); }
.support-cert__reg-num { font-size: 26px; font-weight: 800; letter-spacing: 0.04em; color: var(--color-sub-dark); font-variant-numeric: tabular-nums; }

.support-cert__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.support-cert__grid div { padding: 12px 14px; border-radius: 12px; background: #FCF6FB; }
.support-cert__grid dt { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #77677F; }
.support-cert__grid dd { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--color-sub-dark); }

.support-cert__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; font-size: 14px; }
.support-cert__links a { font-weight: 700; color: var(--color-main); }
.support-cert__links a::after { content: ' ↗'; }

/* 動画が無いときのFV（認証の札） */
.support-isms-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  margin: 0 auto;
  padding: 36px 24px;
  border-radius: 20px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  color: #FFFFFF;
  text-align: center;
}

.support-isms-badge__name { font-size: 28px; font-weight: 800; }
.support-isms-badge__no { font-size: 13px; opacity: 0.85; }

.support-checksheet { padding: 0 0 80px; background: linear-gradient(180deg, #FCF6FB 0%, #FFFFFF 100%); }
.support-sec-ops + .support-checksheet { padding-top: 0; }

/* --- よくある質問 ----------------------------------------------------- */
.support-faq-list .feature-faq-a p { margin: 0 0 6px; }
.support-faq-list .feature-faq-a ul { margin: 6px 0 0; padding-left: 1.2em; }
.support-faq-list .feature-faq-a li { margin: 2px 0; }

.support-faq-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-main);
}

.support-faq-link::after { content: ' →'; }


/* --- よくある質問のページ（/support/faq/） -------------------------------
   2026-10-13 本人指摘「メリハリがなくてのっぺり」で作り直し。FVの右に「よく聞かれる質問」の札、
   本文は左に分類の目次（固定）・右に Q/A の白いカード、地は薄い緑 */
.support-faq-hero__title { margin-bottom: 12px; }
.support-faq-hero__lead { margin: 0; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,0.92); }

.support-faq-top {
  padding: 22px 22px 18px;
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(111,61,156,0.22);
}

.support-faq-top__head { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--color-sub-dark); }
.support-faq-top__list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }

.support-faq-top__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #FCF6FB;
  color: var(--color-sub-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.support-faq-top__list a:hover { background: #F1E8F6; transform: translateX(3px); }
.support-faq-top__list a::after { content: '→'; margin-left: auto; padding-left: 8px; color: var(--color-main); font-weight: 800; }

/* Q・A の丸い印 */
.support-faq-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-main);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  font-family: Arial, sans-serif;
}

.support-faq-badge--a { background: #FFF0F7; color: #C93279; }

.support-faq-page { padding: 56px 0 72px; background: #FCF6FB; }

.support-faq-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 40px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: start;
}

.support-faq-layout > * { min-width: 0; }  /* 狭い幅で横並びの目次が列を押し広げないように */
.support-faq-nav { position: sticky; top: 96px; }
.support-faq-chips__label { white-space: nowrap; }
.support-faq-nav__head { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: #77677F; }
.support-faq-chips { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }

.support-faq-chips a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  color: var(--color-sub-dark);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.support-faq-chips__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(111,61,156,0.1);
  color: var(--color-main);
}

.support-faq-chips__count {
  margin-left: auto;
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #FCF6FB;
  color: #77677F;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.support-faq-chips a:hover { border-color: var(--color-main); }
.support-faq-chips a.is-current { background: var(--color-main); border-color: var(--color-main); color: #FFFFFF; }
.support-faq-chips a.is-current .support-faq-chips__icon { background: rgba(255,255,255,0.18); color: #FFFFFF; }
.support-faq-chips a.is-current .support-faq-chips__count { background: #FFFFFF; color: var(--color-main); }

.support-faq-group { scroll-margin-top: 96px; }
.support-faq-group + .support-faq-group { margin-top: 48px; }

.support-faq-group__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 800;
  color: var(--color-sub-dark);
}

.support-faq-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6F3D9C, #54318B);
  color: #FFFFFF;
}

.support-faq-group__count { font-size: 14px; font-weight: 700; color: #77677F; }

/* Q/A のカード */
.support-faq-list--cards { display: flex; flex-direction: column; gap: 14px; }

.support-faq-list--cards .feature-faq-item,
.support-faq-list--cards .feature-faq-item:last-child {
  padding: 22px 26px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.12);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(111,61,156,0.05);
  scroll-margin-top: 96px;
}

.support-faq-list--cards .feature-faq-q {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.6;
}

.support-faq-list--cards .feature-faq-q .support-faq-badge { margin-top: -1px; }

.support-faq-list--cards .feature-faq-a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(111,61,156,0.2);
}

.support-faq-a-body { flex: 1; min-width: 0; }
.support-faq-a-body p:last-of-type { margin-bottom: 0; }

/* 問いへ飛んだときに、その問いのカードを光らせる */
.support-faq-list--cards .feature-faq-item:target { border-color: var(--color-main); box-shadow: 0 0 0 3px rgba(111,61,156,0.18); }

.support-faq-list--cards .support-faq-link {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #F1E8F6;
  font-size: 13px;
  text-decoration: none;
}

.support-faq-contact { padding: 0 0 80px; background: #FCF6FB; }
.support-faq-contact .feature-mid-cta__box { max-width: 1120px; margin: 0 auto; background: #FFFFFF; }

@media (max-width: 960px) {
  .support-faq-layout { grid-template-columns: 1fr; gap: 24px; }
  /* 狭い幅では目次を横にスクロールする1列に */
  .support-faq-nav { position: static; }
  .support-faq-chips { flex-direction: row; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .support-faq-chips li { flex: 0 0 auto; }
  .support-faq-chips a { padding: 8px 12px; font-size: 14px; white-space: nowrap; }
  .support-faq-chips__icon { width: 26px; height: 26px; }
}

@media (max-width: 767px) {
  .support-faq-page { padding: 32px 0 56px; }
  .support-faq-group__title { font-size: 20px; }
  .support-faq-group__icon { width: 38px; height: 38px; }
  .support-faq-list--cards .feature-faq-item, .support-faq-list--cards .feature-faq-item:last-child { padding: 18px 16px; }
  .support-faq-list--cards .feature-faq-q { font-size: 16px; gap: 10px; }
  .support-faq-list--cards .feature-faq-a { gap: 10px; }
  .support-faq-badge { width: 26px; height: 26px; font-size: 13px; }
  .support-faq-top__list a { font-size: 14px; }
}

/* --- /support/ の入口カード（FVの右） ---------------------------------- */
.support-hub-cards { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }

.support-hub-card {
  display: grid;
  grid-template-columns: 48px 1fr 20px;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 14px 32px rgba(111,61,156,0.18);
  color: var(--color-sub-dark);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.support-hub-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(111,61,156,0.24); }

.support-hub-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(111,61,156,0.1);
  color: var(--color-main);
}

.support-hub-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.support-hub-card__title { font-size: 18px; font-weight: 800; }
.support-hub-card__desc { font-size: 13px; line-height: 1.6; color: #77677F; }
.support-hub-card__points { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.support-hub-card__points span {
  padding: 2px 8px;
  border-radius: 6px;
  background: #FCF6FB;
  font-size: 12px;
  font-weight: 700;
  color: #6F3D9C;
}

.support-hub-card__arrow { font-size: 18px; font-weight: 800; color: var(--color-main); }

@media (max-width: 1100px) {
  .support-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .support-worries__layout { grid-template-columns: 1fr; max-width: 560px; }
  .support-cards--2,
  .support-cards--3 { grid-template-columns: 1fr; max-width: 560px; }
  .support-voices__grid { grid-template-columns: 1fr; max-width: 640px; }
  .support-cert__box { grid-template-columns: 1fr; }
  .support-cert__body { padding: 28px 22px; }
  .support-cert__seal { width: 190px; height: 190px; }
}

@media (max-width: 767px) {
  .support-flow, .support-after, .support-sec-settings, .support-sec-ops, .support-sec-data,
  .support-voices, .support-cert { padding: 56px 0; }
  .support-cards--4 { grid-template-columns: 1fr; max-width: 560px; }
  .support-flow__list::before { left: 15px; }
  .support-flow__list::after { left: 10px; }
  .support-flow__step { grid-template-columns: 1fr; gap: 10px; padding-left: 36px; }
  .support-flow__mark { flex-direction: row; align-self: flex-start; gap: 10px; padding: 6px 14px; border-radius: 999px; }
  .support-flow__roles { grid-template-columns: 1fr; }
  .support-flow__body { padding: 16px 18px; }
  .support-schedule__row { grid-template-columns: 22px 64px 1fr; }
  .support-schedule__bar { display: none; }
  .support-options__box { padding: 20px; }
  .support-faq-group__title { font-size: 20px; }
  .support-hub-card { grid-template-columns: 40px 1fr 16px; gap: 12px; padding: 16px; }
  .support-hub-card__icon { width: 40px; height: 40px; }
}

/* --- 一覧ページ（/features/・/scene/）のFVも、機能ページと同じ動く緑に -----------
   2026-10-13 本人指示。値は .feature-hero-section と同じ（グラデーションが15秒で巡る・光源・細いグリッド） */
.page-header-section--motion {
  position: relative;
  overflow: hidden;
  background-color: var(--color-main);
  background-image: linear-gradient(-45deg, #6F3D9C, #8450B8, #54318B, #6F3D9C);
  background-size: 400% 400%;
  animation: featureHeroGradient 15s ease infinite;
}

.page-header-section--motion::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 100% at 82% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.page-header-section--motion::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #2F1C40 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #2F1C40 30%, transparent 78%);
  pointer-events: none;
}

.page-header-section--motion > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .page-header-section--motion { animation: none; background-position: 0% 50%; }
}


/* --- セキュリティ: データの守り方（データの通り道の図） ------------------------ */
.sec-route {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.25fr) 120px minmax(0, 1fr);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sec-route.is-hidden { opacity: 0; transform: translateY(20px); }
.sec-route.is-hidden.is-shown { opacity: 1; transform: none; }

.sec-route__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 20px 24px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.18);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(111,61,156,0.06);
}

.sec-route__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #F1E8F6;
  color: var(--color-main);
}

.sec-route__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--color-sub-dark); }
.sec-route__text { margin: 0; font-size: 13px; line-height: 1.75; color: #53405F; }

/* 真ん中（東京リージョン）は緑で目立たせる */
.sec-route__node.is-core {
  padding: 36px 24px 26px;
  background: linear-gradient(160deg, #6F3D9C 0%, #6F3D9C 100%);
  border-color: transparent;
  box-shadow: 0 18px 40px rgba(111,61,156,0.22);
}

.sec-route__node.is-core .sec-route__icon { background: rgba(255,255,255,0.16); color: #FFFFFF; }
.sec-route__node.is-core .sec-route__title { font-size: 20px; color: #FFFFFF; }
.sec-route__node.is-core .sec-route__text { color: rgba(255,255,255,0.86); }

.sec-route__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.3);
  font-size: 12px;
  font-weight: 800;
  color: var(--color-main);
  white-space: nowrap;
}

.sec-route__seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  white-space: nowrap;
}

.sec-route__places { display: flex; gap: 8px; margin: 2px 0 0; }

.sec-route__places span {
  padding: 4px 14px;
  border-radius: 8px;
  background: #FCF6FB;
  border: 1px solid rgba(111,61,156,0.2);
  font-size: 13px;
  font-weight: 800;
  color: var(--color-main);
}

/* つなぎの線。点線が右へ流れ、データが送られている様子を出す */
.sec-route__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.sec-route__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #8450B8 0 8px, transparent 8px 14px);
  background-size: 14px 2px;
  animation: secRouteFlow 0.9s linear infinite;
}

.sec-route__line::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 8px solid #8450B8;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

@keyframes secRouteFlow {
  from { background-position: 0 0; }
  to { background-position: 14px 0; }
}

.sec-route__tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.3);
  font-size: 12px;
  font-weight: 800;
  color: var(--color-main);
  white-space: nowrap;
}

/* 図の矢印の意味は読み上げ用の文で伝える */
.sec-route__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- セキュリティ: 運用と体制（2枚のパネル） ------------------------------- */
.sec-ops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}

.sec-ops__panel {
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.16);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(111,61,156,0.06);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sec-ops__panel.is-hidden { opacity: 0; transform: translateY(20px); }
.sec-ops__panel.is-hidden.is-shown { opacity: 1; transform: none; }

.sec-ops__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 16px 24px;
  background: linear-gradient(120deg, #6F3D9C 0%, #6F3D9C 100%);
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
}

.sec-ops__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.16);
}

.sec-ops__list { margin: 0; padding: 8px 24px; list-style: none; }

.sec-ops__item {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 0;
}

.sec-ops__item + .sec-ops__item { border-top: 1px dashed rgba(111,61,156,0.25); }

.sec-ops__figure {
  margin: 0;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-main);
}

.sec-ops__figure span { display: block; }

.sec-ops__body { display: flex; flex-direction: column; gap: 6px; }
.sec-ops__title { margin: 0; font-size: 16px; font-weight: 800; color: var(--color-sub-dark); }
.sec-ops__text { margin: 0; font-size: 14px; line-height: 1.8; color: #53405F; }

@media (max-width: 960px) {
  .sec-route { grid-template-columns: 1fr; max-width: 440px; }
  .sec-route__link { height: 56px; }
  .sec-route__line {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, #8450B8 0 8px, transparent 8px 14px);
    background-size: 2px 14px;
    animation-name: secRouteFlowY;
  }
  .sec-route__line::after {
    right: auto;
    top: auto;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #8450B8;
    border-bottom: 0;
  }
  .sec-route__node.is-core { margin-top: 10px; }
  .sec-ops { grid-template-columns: 1fr; max-width: 560px; }
}

@keyframes secRouteFlowY {
  from { background-position: 0 0; }
  to { background-position: 0 14px; }
}

@media (max-width: 767px) {
  .sec-ops__list { padding: 4px 18px; }
  .sec-ops__item { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .sec-ops__figure { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sec-route__line { animation: none; }
}


/* --- セキュリティ: 会社ごとの設定（目的別の3つのまとまり） ------------------- */
.sec-set {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}

.sec-set__group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.16);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(111,61,156,0.06);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.sec-set__group.is-hidden { opacity: 0; transform: translateY(20px); }
.sec-set__group.is-hidden.is-shown { opacity: 1; transform: none; }

.sec-set__head {
  position: relative;
  padding: 22px 24px 18px;
  background: linear-gradient(160deg, #FCF6FB 0%, #F1E8F6 100%);
  border-bottom: 1px solid rgba(111,61,156,0.14);
}

.sec-set__num {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: rgba(111,61,156,0.16);
}

.sec-set__ask {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--color-main);
  font-size: 12px;
  font-weight: 800;
  color: #FFFFFF;
}

.sec-set__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--color-sub-dark); }

.sec-set__list { margin: 0; padding: 6px 24px 10px; list-style: none; }

.sec-set__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 16px 0;
}

.sec-set__item + .sec-set__item { border-top: 1px dashed rgba(111,61,156,0.22); }

.sec-set__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(111,61,156,0.1);
  color: var(--color-main);
}

.sec-set__name { margin: 0 0 4px; font-size: 15px; font-weight: 800; line-height: 1.5; color: var(--color-sub-dark); }
.sec-set__text { margin: 0; font-size: 13px; line-height: 1.8; color: #53405F; }

.sec-set__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }

.sec-set__chips span {
  padding: 4px 10px;
  border-radius: 999px;
  background: #FCF6FB;
  border: 1px solid rgba(111,61,156,0.22);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-main);
}

@media (max-width: 960px) {
  .sec-set { grid-template-columns: 1fr; max-width: 560px; }
}

/* サポートのFVの動画。高さが端数になると、最下段に動画の白い地が1px透けるので、
   地を消して枠いっぱいに描く（比率は width/height 属性と同じなので切れない） */
.support-hero-section .feature-hero-image video {
  background-color: transparent;
  object-fit: cover;
}


/* --- サポート体制: 導入前の不安 → プロワンの答え ---------------------------
   2026-10-19 本人「もう少しデザイン的に」。カード3枚・番号・「〜を見る」をやめ、
   声（左）→ 流れる点線（セキュリティの経路図と同じ）→ 答え（右）を線で区切った3行に */
.worry-rows {
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
}

.worry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1.05fr);
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid #F1E8F6;
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i) * .12s);
}

.worry-row:last-child { border-bottom: 1px solid #F1E8F6; }
.worry-row.is-hidden { opacity: 0; transform: translateY(16px); }
.worry-row.is-hidden.is-shown { opacity: 1; transform: none; }

/* 声。大きな引用符を添えた、地の色の吹き出し */
.worry-row__voice {
  position: relative;
  margin: 0;
  padding: 18px 22px 18px 52px;
  border-radius: 16px;
  background: #FCF6FB;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  color: #53405F;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.worry-row__voice::before {
  content: '\201C';
  position: absolute;
  left: 16px;
  top: 6px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 44px;
  line-height: 1;
  color: #BDEFFA;
}

/* つなぎ。点線が右へ流れ、先に矢じり */
.worry-row__link { position: relative; height: 20px; }

.worry-row__line {
  position: absolute;
  left: 12px;
  right: 14px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #8450B8 0 8px, transparent 8px 14px);
  background-size: 14px 2px;
  animation: secRouteFlow .9s linear infinite;
}

.worry-row__line::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 8px solid #8450B8;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* 答え。行そのものがリンク。右端の矢印だけが動く */
.worry-row__answer {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 14px;
  border-radius: 16px;
  color: var(--color-sub-dark, #54318B);
  text-decoration: none;
  transition: background .2s ease;
}

.worry-row__answer:hover { background: #FCF6FB; color: var(--color-sub-dark, #54318B); }

.worry-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #6F3D9C;
  color: #FFFFFF;
}

.worry-row__text { font-size: 18px; font-weight: 800; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }

.worry-row__go {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #F8D8EB;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.worry-row__go::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid #6F3D9C;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -65%) rotate(45deg);
}

.worry-row__answer:hover .worry-row__go { transform: translateY(2px); background: #6F3D9C; border-color: #6F3D9C; }
.worry-row__answer:hover .worry-row__go::after { border-color: #FFFFFF; }

@media (max-width: 860px) {
  .worry-rows { max-width: 560px; }
  .worry-row { grid-template-columns: 1fr; padding: 20px 0; }
  .worry-row__link { height: 28px; }
  .worry-row__line {
    left: 50%;
    right: auto;
    top: 2px;
    bottom: 8px;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, #8450B8 0 6px, transparent 6px 10px);
    background-size: 2px 10px;
    animation: worryFlowDown .9s linear infinite;
  }
  .worry-row__line::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -6px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #8450B8;
    border-bottom: 0;
  }
  .worry-row__answer { padding: 10px 6px; }
  .worry-row__text { font-size: 16px; }
}

@keyframes worryFlowDown {
  from { background-position: 0 0; }
  to { background-position: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .worry-row__line { animation: none; }
}

/* --- サポート体制: 使い始めてからのサポート ------------------------------- */
.after-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}

.after-panel {
  position: relative;
  padding: 30px 30px 28px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.16);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(111,61,156,0.06);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.after-panel.is-hidden,
.after-news.is-hidden { opacity: 0; transform: translateY(20px); }
.after-panel.is-hidden.is-shown,
.after-news.is-hidden.is-shown { opacity: 1; transform: none; }

.after-panel__tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--color-main);
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
}

.after-panel__title { margin: 0 0 18px; font-size: 20px; font-weight: 800; color: var(--color-sub-dark); }

.after-panel__figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 16px;
  border-radius: 14px;
  background: #FCF6FB;
}

.after-panel__figs > div { padding: 16px 18px; }
.after-panel__figs > div + div { border-left: 1px solid rgba(111,61,156,0.16); }
.after-panel__figs dt { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #77677F; }
.after-panel__figs dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--color-sub-dark); }

.after-panel__figs b {
  margin: 0 2px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-main);
}

.after-panel__text { margin: 0; font-size: 15px; line-height: 1.8; color: #53405F; }

.after-news {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: 1040px;
  margin: 20px auto 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(111,61,156,0.16);
  border-radius: 16px;
  background: rgba(255,255,255,0.7);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.after-news__item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 24px;
}

.after-news__item + .after-news__item { border-left: 1px solid rgba(111,61,156,0.16); }

.after-news__fig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border-radius: 12px;
  background: #F1E8F6;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
  color: var(--color-main);
}

.after-news__text { margin: 0; font-size: 14px; line-height: 1.75; color: #53405F; }
.after-news__text b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 800; color: var(--color-sub-dark); }

@media (max-width: 960px) {
  .worry-grid { grid-template-columns: 1fr; max-width: 520px; gap: 32px; }
  .after-main { grid-template-columns: 1fr; max-width: 560px; }
  .after-news { grid-template-columns: 1fr; max-width: 560px; }
  .after-news__item + .after-news__item { border-left: 0; border-top: 1px solid rgba(111,61,156,0.16); }
}

@media (max-width: 767px) {
  .after-panel { padding: 24px 20px 22px; }
  .after-panel__figs > div { padding: 14px; }
  .after-panel__figs b { font-size: 22px; }
  .after-news__item { grid-template-columns: 68px 1fr; padding: 16px 18px; }
  .after-news__fig { height: 56px; font-size: 14px; }
}


/* --- セキュリティ: データの守り方の下の補足（取り出し・国外のサービス） ------------ */
.sec-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1080px;
  margin: 32px auto 0;
  border: 1px solid rgba(111,61,156,0.16);
  border-radius: 14px;
  background: #FCF6FB;
}

.sec-notes__item { display: flex; flex-direction: column; gap: 6px; padding: 16px 22px; }
.sec-notes__item + .sec-notes__item { border-left: 1px solid rgba(111,61,156,0.16); }

.sec-notes dt {
  align-self: flex-start;
  margin: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: #F1E8F6;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-main);
}

.sec-notes dd { margin: 0; font-size: 13px; line-height: 1.7; color: #53405F; }
.sec-notes dd a { color: var(--color-main); font-weight: 700; }

@media (max-width: 960px) {
  .sec-notes { grid-template-columns: 1fr; max-width: 440px; }
  .sec-notes__item + .sec-notes__item { border-left: 0; border-top: 1px solid rgba(111,61,156,0.16); }
}

/* ============================================================
   運営会社（/company/）2026-10-15 新設、同日に作り直し
   ほかの製品ページ（緑の帯・白いカード）とは分けて、会社の世界観を出す作り（本人指示。参考は andpad.co.jp）。
   現場の写真を全面に敷いたFV・大きなミッション・英字ラベル＋左寄せの見出し・余白と罫線。
   影付きの箱とグラデーションの文字は使わない。クラスは .co- で始め、ページの外に影響させない
   ============================================================ */

.company-main { color: #2F1C40; }
.company-main .container { max-width: 1120px; }

/* 節の見出し：英字ラベル（緑の短い帯つき）＋黒い左寄せの見出し */
.co-head { margin: 0 0 40px; }
/* 英字ラベルの左の棒は、光の糸の線と重なって見えるので置かない（本人指示） */
.co-head__en { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--color-main); text-transform: uppercase; transition: color 0.5s ease, text-shadow 0.5s ease; }
.co-head__ja { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; color: #2F1C40; text-wrap: balance; }

.co-section { padding: 104px 0; }
.co-section--gray { background: #FCF6FB; }
.co-section--dark { background: #2F1C40; color: #FFFFFF; }
.co-section--dark .co-head__ja { color: #FFFFFF; }
.co-section--dark .co-head__en { color: #8450B8; }
.co-section__lead { margin: -16px 0 32px; font-size: 16px; line-height: 1.9; color: #53405F; }

.co-more { margin: 40px 0 0; }
.co-more a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #2F1C40; text-decoration: none; border-bottom: 1px solid #2F1C40; padding-bottom: 4px; }
.co-more a::after { content: "→"; color: var(--color-main); }
.co-more a:hover { color: var(--color-main); border-color: var(--color-main); }

/* 光の糸（assets/js/company-page.js が置く）：各節の見出しの左を1本の線でつなぎ、スクロールに合わせて光の粒が流れ落ちる。
   光が届いた節は英字ラベルの文字が光る。余白の狭いスマホ・タブレットでは線を出さず、文字が光るだけ */
.company-main { position: relative; }
.co-thread { position: absolute; z-index: 3; width: 2px; pointer-events: none;
  background: linear-gradient(180deg, rgba(111,61,156,0) 0%, rgba(111,61,156,0.32) 3%, rgba(111,61,156,0.32) 97%, rgba(111,61,156,0) 100%); }
.co-thread[hidden] { display: none; }
/* 芯は緑（白い節で溶けないように）、先端だけ明るく */
.co-thread__spark { position: absolute; left: -2px; top: 0; width: 6px; height: 180px; border-radius: 3px; opacity: 0; will-change: transform;
  background: linear-gradient(180deg, rgba(111,61,156,0) 0%, rgba(111,61,156,0.85) 70%, #8450B8 92%, #FFF0F7 100%);
  box-shadow: 0 0 18px 3px rgba(132,80,184,0.55); transition: opacity 0.3s ease; }
/* 光が届いた節は、英字ラベルの文字がふっと光る */
.co-head.is-lit .co-head__en { color: #8450B8; text-shadow: 0 0 10px rgba(189,239,250,0.9); }
.co-section--dark .co-head.is-lit .co-head__en { color: #F8D8EB; }
@media (prefers-reduced-motion: reduce) { .co-thread__spark { display: none; } }

/* 下から出る動き（scene-page.js の [data-scene-reveal]） */
.co-reveal { transition: opacity 0.8s ease, transform 0.8s ease; }
.co-reveal.is-hidden { opacity: 0; transform: translateY(24px); }
.co-reveal.is-hidden.is-shown { opacity: 1; transform: none; }

/* FV */
/* ミッションは縦の真ん中より少し上（下の余白を多めに）に置く（2026-10-16 本人決定） */
.co-hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; background: #2F1C40; color: #FFFFFF; }
.co-hero--photo { min-height: 640px; }
/* 写真が無いときの、左上の緑の帯（andpad.co.jp の色の帯と同じ役割） */
.co-hero:not(.co-hero--photo)::before { content: ""; position: absolute; left: 0; top: 0; width: 38%; height: 6px; background: var(--color-main); }
/* 写真はトップのFVと同じPIXTAの実写（作業員の後ろ姿・顔なし）。白黒にする（本人指示。経営陣の写真とそろう）。人物が右に来るよう寄せ、左の文字とぶつけない */
.co-hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 0%; filter: grayscale(1); }
.co-hero--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(47,28,64,0.82) 0%, rgba(47,28,64,0.55) 45%, rgba(47,28,64,0.15) 100%); }
/* パンくず：FVに重ねる。位置と余白はほかのページと同じにし、色だけ白にする（幅もサイト共通の .container のまま） */
.company-main .co-hero__crumbs { position: absolute; top: 0; left: 0; right: 0; z-index: 2; max-width: var(--container-width); }
.co-hero__crumbs .breadcrumbs, .co-hero__crumbs .breadcrumbs .current, .co-hero__crumbs .breadcrumbs .separator { color: rgba(255,255,255,0.75); }
.co-hero__crumbs .breadcrumbs a { color: #FFFFFF; }
.co-hero__inner { position: relative; z-index: 1; width: 100%; padding: 72px 0 104px; }
.co-hero__mission { margin: 0; font-size: 64px; font-weight: 700; line-height: 1.4; letter-spacing: 0.06em; }
.co-hero__mission span { display: block; }
.co-hero__by { margin: 28px 0 0; font-size: 16px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.85); }

/* 関係の直答 */
.co-intro { padding: 104px 0 96px; }
.co-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.co-intro__lead { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.6; letter-spacing: 0.04em; color: #2F1C40; }
.co-intro__body p { margin: 0 0 20px; font-size: 16px; line-height: 2; color: #53405F; }
.co-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; }
/* 本文の列に2つは横に収まらないので、同じ幅でそろえて縦に並べる */
.co-buttons .button { width: 300px; justify-content: space-between; margin: 0; padding-left: 24px; padding-right: 24px; }
.co-button-line { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border: 2px solid #2F1C40; border-radius: 4px; color: #2F1C40; font-weight: 700; text-decoration: none; background: #FFFFFF; }
.co-button-line:hover { border-color: var(--color-main); color: var(--color-main); }

/* 数字：箱に入れず、縦の罫線で区切る */
.co-numbers { padding: 0 0 72px; }
/* 数字と会社概要はどちらも白い節なので、余白が重なって空きすぎる。続く節の上の余白を詰める */
.co-numbers + .co-section { padding-top: 24px; }
/* 代表メッセージ（グレーの節）の後に来るときは、上にも節の余白をとる（2026-10-19 本人） */
.co-message + .co-numbers { padding-top: 104px; }
@media (max-width: 767px) { .co-message + .co-numbers { padding-top: 64px; } }
.co-numbers__list { list-style: none; margin: 0; padding: 32px 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #2F1C40; border-bottom: 1px solid #E4D8EC; }
.co-numbers__list li { padding: 8px 28px; border-left: 1px solid #E4D8EC; }
.co-numbers__list li:first-child { padding-left: 0; border-left: 0; }
.co-numbers__figure { margin: 0; font-size: 52px; font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; color: #2F1C40; font-feature-settings: "palt"; }
.co-numbers__figure small { margin-left: 4px; font-size: 18px; font-weight: 700; }
.co-numbers__label { margin: 12px 0 0; font-size: 14px; color: #53405F; }

/* 会社概要：罫線だけの表 */
.co-profile { margin: 0; border-top: 1px solid #2F1C40; }
.co-profile div { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid #E4D8EC; }
.co-profile dt { font-size: 14px; font-weight: 700; color: #53405F; }
.co-profile dd { margin: 0; font-size: 16px; line-height: 1.8; }

/* 経営チーム */
.co-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.co-team__photo { display: block; width: 100%; height: auto; aspect-ratio: 13 / 12; object-fit: cover; background: #F1E8F6; margin-bottom: 20px; }
.co-team__role { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--color-main); }
.co-team__name { margin: 6px 0 12px; font-size: 24px; font-weight: 700; letter-spacing: 0.08em; color: #2F1C40; }
.co-team__bio { margin: 0; font-size: 13px; line-height: 1.9; color: #53405F; }

/* 事業の基盤 */
.co-foundation { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.co-foundation__title { margin: 0 0 8px; padding-bottom: 16px; font-size: 18px; font-weight: 700; border-bottom: 1px solid #2F1C40; }
.co-foundation__list { list-style: none; margin: 0; padding: 0; }
.co-foundation__list li { display: grid; grid-template-columns: 168px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid #E4D8EC; }
.co-foundation__figure { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--color-main); }
.co-foundation__name { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.6; }
.co-foundation__text { margin: 0; font-size: 14px; line-height: 1.8; color: #53405F; }

/* 動画 */
.co-movie { position: relative; aspect-ratio: 16 / 9; max-width: 960px; background: #2F1C40; }
.co-movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 導入企業：トップのロゴの帯を流用。帯の見出しは節の見出しと重なるので隠す */
.co-clients .logo-slider-section { margin: 0; padding: 0; }
.co-clients .logo-slider-title { display: none; }
/* 縦線（光の糸）より左にはロゴを出さず、線の手前から右へ少しずつ濃くする（2026-10-19 本人） */
.company-main.has-thread .co-clients .logo-slider-section {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--co-line-x, 0px) + 12px), #2F1C40 calc(var(--co-line-x, 0px) + 140px));
  mask-image: linear-gradient(90deg, transparent 0, transparent calc(var(--co-line-x, 0px) + 12px), #2F1C40 calc(var(--co-line-x, 0px) + 140px));
}

/* 違い：特徴ページの比較表をそのまま使う */
.company-main .about-compare-wrap { margin: 0; }

/* セキュリティとサポート */
.co-trust { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #2F1C40; }
.co-trust__item { position: relative; display: block; padding: 32px 56px 32px 0; border-bottom: 1px solid #E4D8EC; color: #2F1C40; text-decoration: none; }
.co-trust__item + .co-trust__item { padding-left: 40px; border-left: 1px solid #E4D8EC; }
.co-trust__item::after { content: "→"; position: absolute; right: 16px; top: 32px; font-size: 20px; color: var(--color-main); transition: transform 0.2s ease; }
.co-trust__item:hover::after { transform: translateX(4px); }
.co-trust__name { display: block; margin-bottom: 10px; font-size: 20px; font-weight: 700; }
.co-trust__text { display: block; font-size: 14px; line-height: 1.8; color: #53405F; }

/* よくある質問 */
.co-faq { margin: 0; border-top: 1px solid #2F1C40; }
.co-faq div { padding: 28px 0; border-bottom: 1px solid #E4D8EC; }
.co-faq dt { display: flex; gap: 16px; margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.6; }
.co-faq dt::before { content: "Q"; flex: none; font-weight: 700; color: var(--color-main); }
.co-faq dd { display: flex; gap: 16px; margin: 0; font-size: 15px; line-height: 1.9; color: #53405F; }
.co-faq dd::before { content: "A"; flex: none; font-weight: 700; color: #AA96B6; }

/* ミツモアの発信 */
.co-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid #2F1C40; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.co-links a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid #E4D8EC; color: #2F1C40; text-decoration: none; }
.co-links a::after { content: "↗"; color: #77677F; }
.co-links a:hover .co-links__name { color: var(--color-main); }
/* 公式アイコンは同じ大きさの角丸の枠に入れる（note は「n」を正方形の中で使う決まり） */
.co-links__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #F1E8F6; border-radius: 10px; background: #FFFFFF; color: #53405F; }
.co-links__icon img { display: block; width: 24px; height: 24px; object-fit: contain; }
.co-links__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-links__name { font-size: 16px; font-weight: 700; }
.co-links__desc { font-size: 13px; color: #77677F; }

@media (max-width: 960px) {
  .co-hero__mission { font-size: 44px; }
  .co-intro__grid, .co-foundation { grid-template-columns: 1fr; gap: 40px; }
  .co-numbers__list { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .co-numbers__list li:nth-child(3) { padding-left: 0; border-left: 0; }
  .co-team { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}
@media (max-width: 767px) {
  .co-section { padding: 72px 0; }
  .co-head { margin-bottom: 28px; }
  .co-head__ja { font-size: 24px; }
  .co-hero { min-height: 440px; }
  .co-hero--photo { min-height: 560px; }
  .co-hero__photo { object-position: 80% center; }
  .co-hero--photo::after { background: linear-gradient(0deg, rgba(47,28,64,0.88) 0%, rgba(47,28,64,0.55) 60%, rgba(47,28,64,0.35) 100%); }
  .co-hero__inner { padding: 56px 0 80px; }
  .co-hero__mission { font-size: 26px; letter-spacing: 0.02em; }
  .co-intro { padding: 64px 0; }
  .co-intro__lead { font-size: 24px; }
  .co-buttons { align-items: stretch; }
  .co-buttons .button, .co-button-line { width: 100%; justify-content: center; }
  .co-numbers { padding-bottom: 48px; }
  .co-numbers + .co-section { padding-top: 16px; }
  .co-numbers__list li { padding: 4px 0 4px 16px; }
  .co-numbers__list li:first-child, .co-numbers__list li:nth-child(3) { padding-left: 0; }
  .co-numbers__figure { font-size: 34px; }
  .co-numbers__figure small { font-size: 14px; }
  .co-numbers__label { font-size: 12px; }
  .co-profile div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .co-foundation__list li { grid-template-columns: 1fr; gap: 6px; }
  .co-foundation__figure { font-size: 26px; }
  .co-trust, .co-links { grid-template-columns: 1fr; }
  .co-trust__item + .co-trust__item { padding-left: 0; border-left: 0; }
}

/* --- 導入企業のロゴの帯（2026-10-15）：19社・面積をそろえた大きさ（inc/customer-logos.php）---------
   main.css の .logo-slide（1コマ160px固定・高さ60まで）と .po-logo-band（高さ32px）を上書きする。
   ロゴごとの高さは img の --h。1周が長くなったので、流れる速さが変わらないよう時間を延ばす */
.logo-slider-section .logo-track { animation-duration: 130s; }
.logo-slider-section .logo-slide { min-width: 0; height: 64px; margin: 0 28px; }
.logo-slider-section .logo-slide img { height: var(--h, 44px); width: auto; max-width: none; max-height: none; }
.po-logo-band .po-logo-band__track { animation-duration: 110s; }
.po-logo-band .po-logo-band__slide { margin: 0 14px; }
.po-logo-band .po-logo-band__slide img { height: calc(var(--h, 44px) * .72); }
@media (max-width: 768px) {
  .logo-slider-section .logo-slide { height: 48px; margin: 0 18px; }
  .logo-slider-section .logo-slide img { height: calc(var(--h, 44px) * .72); }
}

/* ロゴの帯の見出しは、どのページも紺にそろえる（2026-10-15 本人決定。トップ・フォーム面と同じ #54318B） */
.logo-slider-section .logo-slider-title,
.about-logo-band .logo-slider-section .logo-slider-title { color: var(--color-sub-dark); }

/* よくある質問の推奨環境の表（template-parts/faq-section.php）。入れ子の箇条書きだった（2026-10-15 本人「デザイン的ではない」） */
.faq-spec{width:100%;margin:12px 0 4px;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.7;
  border:1px solid #F1E8F6;border-radius:10px;overflow:hidden}
.faq-spec th,.faq-spec td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid #F1E8F6}
.faq-spec tbody tr:last-child th,.faq-spec tbody tr:last-child td{border-bottom:0}
.faq-spec thead th{background:#FCF6FB;color:var(--color-main);font-weight:700;font-size:13px}
.faq-spec tbody th{width:96px;color:var(--color-sub-dark);font-weight:700;background:#FFFFFF}
@media (max-width:767px){
  .faq-spec{font-size:13px}
  .faq-spec th,.faq-spec td{padding:10px}
  .faq-spec tbody th{width:64px}
}

/* 導入事例カードの人数は折り返さない。業種が長いと「20／名」と縦に割れていた（2026-10-15 本人指摘） */
.case-study-tags .case-study-result{flex:none;white-space:nowrap}

/* フッター：機能の列を外したので、サービス／活用シーン／サポート／お役立ちの4列を同じ幅に（2026-10-16 本人「列のバランスが悪い」） */
.footer-navigation{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){ .footer-navigation{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:768px){ .footer-navigation{grid-template-columns:1fr} }

/* よくある質問の答えの続きのリンク（template-parts/faq-section.php） */
.faq-answer .faq-answer__more{margin-top:12px}
.faq-answer .faq-answer__more a{font-size:14px;font-weight:700;color:var(--color-main);text-decoration:none}
.faq-answer .faq-answer__more a:hover{text-decoration:underline}
/* よくある質問のページの表は、カードの答えの幅いっぱいに */
.support-faq-list .faq-spec{margin-top:10px}


/* --- 導入から本番運用までの伴走（template-parts/support-flow.php）。写真＋緑のマスクの帯 --- */
.flow-band {
  position: relative;
  overflow: hidden;
  padding: 88px 0;
  color: #FFFFFF;
}

.flow-band__photo {
  position: absolute;
  inset: 0;
  background-image: var(--flow-band-photo);
  background-size: cover;
  background-position: center;
}

/* 左は文字が読めるよう濃く、右へいくほど写真を見せる */
.flow-band__mask {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(84,49,139,0.15) 0%, rgba(84,49,139,0.45) 100%),
    linear-gradient(90deg, rgba(84,49,139,0.94) 0%, rgba(111,61,156,0.86) 42%, rgba(111,61,156,0.55) 100%);
}

.flow-band__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
}

.flow-band__eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.flow-band__title { margin: 0 0 16px; font-size: 36px; font-weight: 800; line-height: 1.45; color: #FFFFFF; }
.flow-band__lead { margin: 0 0 24px; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,0.9); }

.flow-band__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border: 1.5px solid rgba(255,255,255,0.8);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.flow-band__more::after { content: '→'; }
.flow-band__more:hover { background: #FFFFFF; color: var(--color-main); }

/* 6段の札。半透明の白で写真を少し透かす */
.flow-band__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.flow-band__step {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.flow-band__num {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 900;
  color: var(--color-main);
}

.flow-band__when { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.78); }
.flow-band__name { font-size: 15px; font-weight: 800; line-height: 1.45; color: #FFFFFF; }

/* 段の下の注記。右の列に収める */
.flow-band__note {
  grid-column: 2;
  margin: -36px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  text-align: right;
}

/* 最後の段（運用開始・定着）だけ白く抜いて、ゴールを示す */
.flow-band__step:last-child { background: #FFFFFF; border-color: #FFFFFF; }
.flow-band__step:last-child .flow-band__num { background: var(--color-main); color: #FFFFFF; }
.flow-band__step:last-child .flow-band__when { color: #77677F; }
.flow-band__step:last-child .flow-band__name { color: var(--color-sub-dark); }

@media (max-width: 960px) {
  .flow-band { padding: 64px 0; }
  .flow-band__inner { grid-template-columns: 1fr; gap: 32px; }
  .flow-band__note { grid-column: 1; margin-top: -20px; text-align: left; }
  .flow-band__title { font-size: 26px; }
  .flow-band__mask {
    background: linear-gradient(180deg, rgba(84,49,139,0.92) 0%, rgba(111,61,156,0.88) 60%, rgba(111,61,156,0.8) 100%);
  }
}

@media (max-width: 560px) {
  .flow-band__steps { grid-template-columns: 1fr; }
  .flow-band__title { font-size: 22px; }
}

/* 活用シーンの見出しにも下の緑の線を出す（2026-10-16 に外したが、2026-10-20 本人「基本下線部ありできらりと」で戻した） */


/* FVの説明文は文節の切れ目で折り返す（「つなぎま／す」のような途中の改行を防ぐ。2026-10-16） */
.scene-hero-section .feature-description p { word-break: auto-phrase; }

/* 活用シーンの POINT の3つの面は、役割ごとに色を分ける（2026-10-16 本人判断）。
   図の枠は機能ページの図（.feature-section-media）と同じ薄い緑、法定の周期は無彩色のグレー、
   導入後の変化はひとつ濃い緑の面。導入後の変化は線で囲まない（上の数字の札と見た目が重なるため） */
.scene-point__screen { background: rgba(111,61,156,0.06); }
.scene-point__cycles { background: #FCF6FB; }
.scene-solution-voice { background: #F1E8F6; }

/* POINT の番号は見出しの頭に添える大きな薄い数字（2026-10-16 本人指示）。見出しと1行目の高さをそろえる */
.scene-point__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.scene-point__num {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(40px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(111,61,156,0.22);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
  .scene-point__head { gap: 10px; }
}

/* FVの H1（「設備工事業の案件管理システム」）を目立たせる（2026-10-16 本人指示） */
.scene-hero-section .scene-fv-h1,
.support-hero-section .scene-fv-h1 {
  margin-bottom: 12px;
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 800;
  color: #FFFFFF;
}

/* POINT の番号は、見出しの1行目のまんなかにそろえる（2026-10-16 本人指摘「縦位置がずれている」）。
   見出しの字の大きさを変数にし、番号の行の高さを見出しの1行分にそろえる（字面の上下のまんなかが見出し1行目とそろうことを実測で確認） */
.scene-point__head { --want-size: clamp(22px, 2.6vw, 30px); align-items: flex-start; }
.scene-point__want { font-size: var(--want-size); }
.scene-point__num {
  font-size: calc(var(--want-size) * 1.75);
  line-height: calc(var(--want-size) * 1.45);
}

/* 活用シーンのまんなかの資料DLの帯。まわりの薄い緑の面と同化しないよう、FVと同じ濃い緑にする（2026-10-16 本人指摘） */
.single-scene .feature-mid-cta__box {
  background: linear-gradient(120deg, #54318B 0%, #6F3D9C 100%);
  border: 0;
  box-shadow: 0 18px 40px rgba(111,61,156,0.18);
}
.single-scene .feature-mid-cta__title { color: #FFFFFF; }
.single-scene .feature-mid-cta__desc { color: rgba(255,255,255,0.86); }
.single-scene .feature-mid-cta__sub { color: #FFFFFF; }



/* ==========================================================================
   2026-10-17 サイト全体の「控えめに流れる光」（assets/js/light-line.js が差し込む .pl-light）
   目的: サイト全体の一貫性と、飽きさせず期待させる演出（本人）。トップと運営会社は対象外
   ========================================================================== */
.has-pl-light { position: relative; overflow: hidden; }
.pl-light { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.pl-light__line { fill: none; stroke: rgba(248,216,235,0.08); stroke-width: 0.8; }
.pl-light.is-onlight .pl-light__line { stroke: rgba(111,61,156,0.06); }
/* 白い面の光の糸：糸そのものも運営会社と同じく見える緑に */
.pl-light.is-thread .pl-light__line { stroke: rgba(111,61,156,0.22); }
/* 流れ出す前の粒は隠す（面が画面に入ってから流す） */
.pl-light__dot { opacity: 0; }
.pl-light.is-running .pl-light__dot { opacity: 1; }
.pl-light__glow { mix-blend-mode: screen; }
.pl-light.is-onlight .pl-light__glow { mix-blend-mode: normal; }
.pl-light__tr { fill: none; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .pl-light__glow { display: none; } }

/* 光より手前に出す中身 */
.has-pl-light > .container,
.has-pl-light > .csx-wrap,
.has-pl-light > .flow-band__inner,
.footer-cta-section.has-pl-light .container { position: relative; z-index: 2; }

/* --- 特徴・料金のFV：機能ページと同じ「色がゆっくり変わる緑」＋実写を溶け込ませる。グリッドはやめる。文字は中央揃えのまま（右に画像の枠が無いので） --- */
.plan-hero,
.about-hero {
  padding: 96px 0 104px;
  background: linear-gradient(-45deg, #6F3D9C, #8450B8, #54318B, #6F3D9C);
  background-size: 400% 400%;
  animation: planHeroGradient 15s ease infinite;
}
.plan-hero::before,
.about-hero::before { display: none; }
.plan-hero:not(.about-hero--photo)::after { display: none; }

/* 実写（トップFV用に購入したPIXTA。特徴=現場でタブレット、料金=ノートPCで数字を確かめる2人）。
   動く緑に暗い所だけを重ね（multiply。明るくしないので、上を流れる光が沈まない）。文字が中央なので、中央を少し薄くして全体に敷く */
.about-hero--photo::after {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--about-hero-photo) var(--about-hero-pos, 72% 30%) / cover no-repeat;
  opacity: 0.55;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(60% 75% at 50% 50%, rgba(47,28,64,0.45) 0%, #2F1C40 100%);
  mask-image: radial-gradient(60% 75% at 50% 50%, rgba(47,28,64,0.45) 0%, #2F1C40 100%);
}

@media (max-width: 767px) {
  .plan-hero,
  .about-hero { padding: 56px 0 60px; }
  .about-hero--photo::after {
    opacity: 0.3;
    background-position: center;
    -webkit-mask-image: linear-gradient(180deg, rgba(47,28,64,0.4) 0%, #2F1C40 100%);
    mask-image: linear-gradient(180deg, rgba(47,28,64,0.4) 0%, #2F1C40 100%);
  }
}

/* --- 特徴：提供する価値。透かしアイコンとタグをやめ、小さな番号と短い見出しに --- */
.about-value-num {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-main);
}
.about-value-num::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-left: 10px;
  vertical-align: middle;
  background: rgba(111,61,156,0.4);
}
.about-value-section .about-value-card { padding-top: 30px; }
.about-value-section .about-value-note { margin-top: auto; padding-top: 12px; }

/* --- 料金：3つの要素を「×」「＋」でつなぎ、「＝ 貴社のお見積もり」へ --- */
.price-factors-grid {
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.price-factor-op {
  align-self: center;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: var(--color-main);
}
.price-factor-card { padding-top: 30px; }
.price-factors-sum {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 28px auto 0;
  padding: 12px 28px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.25);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-sub-dark);
}
.price-factors-sum span { font-size: 20px; font-weight: 400; color: var(--color-main); }

@media (max-width: 960px) {
  .price-factors-grid { grid-template-columns: 1fr; gap: 8px; }
  .price-factor-op { padding: 2px 0; }
}

/* --- サポート体制：導入の流れの縦線に、上から下へ光を流す --- */
.support-flow__list::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%) 0 -120px / 100% 120px no-repeat,
    linear-gradient(180deg, #6F3D9C, #8450B8);
  animation: plFlowDown 5s cubic-bezier(.3, .15, .35, 1) infinite;
}
@keyframes plFlowDown {
  from { background-position: 0 -120px, 0 0; }
  to { background-position: 0 calc(100% + 120px), 0 0; }
}
@media (prefers-reduced-motion: reduce) { .support-flow__list::before { animation: none; } }

/* FVの動画の下の言葉。いま映っている場面の言葉を1行だけ出し、場面が変わると下からふわっと入れ替わる
   （2026-10-17 本人指示。並べず、番号も付けない） */
.scene-fv-steps {
  position: relative;
  height: 1.8em;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.scene-fv-steps li {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.scene-fv-steps li.is-on { opacity: 1; transform: none; }


/* --- フッターCTA：「資料ダウンロード」のボタンを、数秒おきに光がすっと横切る（2026-10-17 本人 案B）。
       写真には何も足さない（窓の光は写真の切り取りが画面幅で変わり、天井から差して見えたため）。全ページ共通・CSSのみ --- */
.footer-cta-button:not(.footer-cta-button--outline),
.footer-cta-dl {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.footer-cta-button:not(.footer-cta-button--outline)::after,
.footer-cta-dl::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-130%) skewX(-12deg);
  animation: footerButtonShine 5.5s ease-in-out infinite;
}
.footer-cta-button:not(.footer-cta-button--outline) > *,
.footer-cta-dl > * { position: relative; z-index: 1; }

/* 5.5秒のうち、最初の約1秒で横切り、あとは止まって待つ */
@keyframes footerButtonShine {
  0% { transform: translateX(-130%) skewX(-12deg); }
  18% { transform: translateX(260%) skewX(-12deg); }
  100% { transform: translateX(260%) skewX(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-cta-button:not(.footer-cta-button--outline)::after,
  .footer-cta-dl::after { display: none; }
}

/* 導入事例へのリンク（話した人の名前）は、いつも下線を引いて押せることを示す（2026-10-17 本人指示） */
.scene-solution-voice__case {
  text-decoration: underline;
  text-decoration-color: rgba(111,61,156,0.5);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.scene-solution-voice__case:hover { text-decoration-color: var(--color-main); }



/* 料金表（プランと機能の比較）の背景の飾りの丸はやめる（2026-10-17 本人「料金表の背景の丸はいらない」） */
.price-structure-section::before,
.price-structure-section::after { display: none; }


/* ==========================================================================
   2026-10-17 白い面の「1回だけ光る」演出（assets/js/light-accents.js が .pl-on を付ける）
   A 見出しの下線のきらめき／B カードの縁をなぞる光／C 数字がふっと光る／D おすすめの列に回る光
   ========================================================================== */

/* お悩みの見出しにも、節の見出しと同じ下の線を引く（2026-10-20 本人「基本下線部ありできらりと」） */
.feature-problems-title { position: relative; margin-bottom: 56px; }
.feature-problems-title::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--color-main), var(--color-sub-light));
  border-radius: 2px;
}

/* A 見出しの下の緑の線を、光が1回走る */
.section-title.pl-on::after,
.feature-problems-title.pl-on::after,
.related-features h2.section-title.pl-on::after {
  background:
    linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,240,247,0.95) 50%, rgba(255,255,255,0) 100%) -120% 0 / 45% 100% no-repeat,
    linear-gradient(90deg, var(--color-main), var(--color-sub-light));
  animation: plTitleGlint 1.5s cubic-bezier(.3, .15, .35, 1) var(--pl-delay, 0s) 1 both;
}
@keyframes plTitleGlint {
  0% { background-position: -120% 0, 0 0; box-shadow: 0 0 0 rgba(132,80,184,0); }
  45% { box-shadow: 0 0 12px rgba(132,80,184,0.65); }
  100% { background-position: 220% 0, 0 0; box-shadow: 0 0 0 rgba(132,80,184,0); }
}

/* B カードの縁を、細い光が1周なぞる（芯は明るいミント、まわりに淡いにじみ） */
.pl-trace-host { position: relative; }
.pl-trace { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pl-trace rect {
  x: 0.75px; y: 0.75px;
  width: calc(100% - 1.5px); height: calc(100% - 1.5px);
  fill: none;
  stroke-dasharray: 16 84;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  opacity: 0;
}
.pl-trace__glow { stroke: rgba(132,80,184,0.35); stroke-width: 5px; }
.pl-trace__core { stroke: #8450B8; stroke-width: 1.6px; }
.pl-on > .pl-trace rect { animation: plTrace 2s cubic-bezier(.4, .1, .3, 1) var(--pl-delay, 0s) 1 both; }
@keyframes plTrace {
  0% { stroke-dashoffset: 0; opacity: 0; }
  8% { opacity: 1; }
  80% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* C 大事な数字がふっと光る */
.after-panel__figs b.pl-on,
.sec-ops__figure.pl-on,
.support-cert__num.pl-on,
.support-cert__reg-num.pl-on { animation: plNumberGlow 1.8s ease-out var(--pl-delay, 0s) 1 both; }
@keyframes plNumberGlow {
  0% { text-shadow: 0 0 0 rgba(132,80,184,0); }
  35% { text-shadow: 0 0 14px rgba(132,80,184,0.85), 0 0 2px rgba(255,240,247,0.9); }
  100% { text-shadow: 0 0 0 rgba(132,80,184,0); }
}
.price-factors-sum.pl-on { animation: plPillGlow 1.8s ease-out var(--pl-delay, 0s) 1 both; }
@keyframes plPillGlow {
  0% { box-shadow: 0 0 0 0 rgba(132,80,184,0); }
  35% { box-shadow: 0 0 0 4px rgba(132,80,184,0.18), 0 0 22px rgba(132,80,184,0.55); }
  100% { box-shadow: 0 0 0 0 rgba(132,80,184,0); }
}

/* D 料金表の「最も選ばれています」の列の見出しの縁を、光がゆっくり回る */
@property --pl-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.plan-table-head.is-popular::after {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: 0;
  border-radius: 14px;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--pl-angle), rgba(132,80,184,0) 0deg, rgba(132,80,184,0) 250deg, rgba(132,80,184,0.9) 320deg, #FFF0F7 345deg, rgba(132,80,184,0) 360deg);
  -webkit-mask: linear-gradient(#2F1C40 0 0) content-box, linear-gradient(#2F1C40 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#2F1C40 0 0) content-box exclude, linear-gradient(#2F1C40 0 0);
  animation: plSpin 6s linear infinite;
}
.plan-table-head.is-popular > * { position: relative; z-index: 1; }
@keyframes plSpin { to { --pl-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .plan-table-head.is-popular::after { animation: none; }
}

/* スマホのメニュー（ドロワー）で開いた一覧の地が灰色の面になり、グレーアウトに見えていた（2026-10-17 本人指摘）。
   地は白のままにし、左に細い緑の線を引いて「この見出しの中身」とわかるようにする。
   今いるページの見出しも面で塗らず、文字の色だけで示す */
@media (max-width: 1024px) {
  .main-navigation .dropdown-menu {
    background-color: transparent;
    border-left: 2px solid rgba(111,61,156,0.25);
    margin-left: 4px;
  }
  .main-navigation .has-dropdown.active .dropdown-menu { padding: 4px 0 12px; }
  .main-navigation .dropdown-link {
    padding: 12px 12px 12px 16px;
    border-bottom-color: rgba(111,61,156,0.08);
  }
  .main-navigation .dropdown-link:hover { background-color: rgba(111,61,156,0.06); }
  .main-navigation .nav-item.current-menu-item > .nav-link,
  .main-navigation .nav-item.current-menu-ancestor > .nav-link { background-color: transparent; }
}



/* 特徴・料金のFVのボタン並び：スマホではメニュー用の .header-cta の下線と余白が付いてしまうので消す（2026-10-17 本人） */
.page-header-section .header-cta-duo { border-bottom: 0; padding-bottom: 0; }


/* ==========================================================================
   お役立ち資料の一覧（archive-materials.php・2026-10-17 作り直し）
   ========================================================================== */
.mat-page { background: #FFFFFF; }

/* サービス資料の帯（主役） */
.mat-service { padding: 64px 0 24px; }
.mat-service__box {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px;
  border-radius: 24px;
  background: linear-gradient(135deg, #FCF6FB 0%, #F1E8F6 100%);
  border: 1px solid rgba(111,61,156,0.14);
}
.mat-service__img { display: block; overflow: hidden; border-radius: 14px; box-shadow: 0 18px 40px rgba(111,61,156,0.14); background: #FFFFFF; }
.mat-service__img img { display: block; width: 100%; height: auto; transition: transform 0.4s ease; }
.mat-service__img:hover img { transform: scale(1.03); }
.mat-service__eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--color-main); }
.mat-service__title { margin: 0 0 14px; font-size: 28px; font-weight: 800; color: var(--color-sub-dark); }
.mat-service__text { margin: 0 0 26px; font-size: 15px; line-height: 1.9; color: #53405F; }
.mat-service__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(201,50,121,0.7);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.mat-service__button:hover { transform: translateY(-2px); background: #C93279; color: #FFFFFF; }

/* よく読まれている・すべての資料 */
.mat-popular { padding: 64px 0 24px; }
.mat-list { padding: 56px 0 96px; }
.mat-popular .section-title,
.mat-list .section-title { margin-bottom: 48px; }

.mat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}
.mat-grid__item[hidden] { display: none; }

.mat-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(111,61,156,0.14);
  box-shadow: 0 8px 22px rgba(111,61,156,0.05);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(111,61,156,0.1); color: inherit; }
.mat-card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #FCF6FB; }
.mat-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mat-card:hover .mat-card__img img { transform: scale(1.04); }
.mat-card__body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 18px 20px 20px; }
.mat-card__tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: #F1E8F6;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-main);
}
.mat-card__title { flex: 1; font-size: 16px; font-weight: 800; line-height: 1.6; color: var(--color-sub-dark); }
.mat-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--color-main); }
.mat-card:hover .mat-card__cta svg { transform: translateX(3px); }
.mat-card__cta svg { transition: transform 0.2s ease; }

/* 分類の札（導入事例一覧・よくある質問と同じ考え方） */
.mat-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 36px; }
.mat-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(111,61,156,0.25);
  background: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-sub-dark);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.mat-filter__chip span { font-size: 12px; font-weight: 800; color: var(--color-main); }
.mat-filter__chip:hover { border-color: var(--color-main); background: #FCF6FB; color: var(--color-sub-dark); }
.mat-filter__chip.is-active { background: var(--color-main); border-color: var(--color-main); color: #FFFFFF; }
.mat-filter__chip.is-active span { color: rgba(255,255,255,0.85); }

@media (max-width: 960px) {
  .mat-service__box { grid-template-columns: 1fr; gap: 28px; padding: 24px; }
  .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mat-grid { grid-template-columns: 1fr; }
  .mat-service__title { font-size: 24px; }
  .mat-service__button { width: 100%; justify-content: center; }
  .mat-filter { justify-content: flex-start; }
}


/* 「多くの企業様にご導入いただいています」をトップ（.top-fv .logos__title）と同じ見せ方に：
   両脇に、外へ向かって薄れる緑の横線（2026-10-17 本人「トップと同じように横棒が欲しい」）。特徴ページの丸囲みもこれにそろえる */
.logo-slider-title,
.po-logo-band__title,
.about-logo-band .logo-slider-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 0 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-sub-dark);
  text-align: center;
}
.logo-slider-title::before,
.logo-slider-title::after,
.po-logo-band__title::before,
.po-logo-band__title::after {
  content: '';
  flex: none;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, rgba(132,80,184,0), #8450B8);
}
.logo-slider-title::after,
.po-logo-band__title::after { background: linear-gradient(90deg, #8450B8, rgba(132,80,184,0)); }
@media (max-width: 600px) {
  .logo-slider-title,
  .po-logo-band__title,
  .about-logo-band .logo-slider-title { gap: 12px; font-size: 13px; margin-bottom: 20px; }
  .logo-slider-title::before,
  .logo-slider-title::after,
  .po-logo-band__title::before,
  .po-logo-band__title::after { width: 36px; }
}

/* =====================================================================
   ニュースの一覧（/news/）。いちばん新しい1件を大きく → 分類の札 → 年ごとの行
   札は資料一覧の .mat-filter を使い回す。文字の大きさは docs/design-rules.md の段階から選ぶ
   ===================================================================== */
.nws-page { background: #FFFFFF; }
.nws { padding: 64px 0 88px; }
.nws .container { max-width: 1040px; }

/* 分類の札（行の中・最新の1件の中で共用） */
.nws-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #F1E8F6;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--color-main);
  white-space: nowrap;
}

/* いちばん新しいニュース。画像と題を横に並べた1枚の面 */
.nws-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  margin: 0 0 56px;
  border: 1px solid #F1E8F6;
  border-radius: 20px;
  overflow: hidden;
  background: #FFFFFF;
  color: var(--color-sub-dark);
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(111,61,156,.06);
  transition: box-shadow .25s ease, transform .25s ease;
}

.nws-lead:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(111,61,156,.12); color: var(--color-sub-dark); }

.nws-lead__img { display: block; background: #FCF6FB; aspect-ratio: 16 / 9; }
.nws-lead__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nws-lead__body { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 36px 40px; }
.nws-lead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: #77677F; }

.nws-lead__new {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-main);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
  color: #FFFFFF;
}

/* ニュースの題は長い1文なので、読点ではなく普通に折り返し、最後の行が短くなりすぎないようにする */
.nws-lead__title { font-size: 20px; font-weight: 800; line-height: 1.6; line-break: strict; text-wrap: pretty; }

.nws-lead__more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--color-main); }
.nws-lead__more svg { transition: transform .2s ease; }
.nws-lead:hover .nws-lead__more svg { transform: translateX(3px); }

.nws-filter { margin-bottom: 24px; }

/* 年の見出しを左、行を右に置く */
.nws-year {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 0 24px;
  padding-top: 24px;
}

.nws-year[hidden] { display: none; }

.nws-year__label {
  position: sticky;
  top: 96px;
  align-self: start;
  margin: 0;
  padding-top: 18px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--color-main);
}

.nws-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #F1E8F6; }
.nws-row { border-bottom: 1px solid #F1E8F6; }
.nws-row[hidden] { display: none; }

.nws-row__link {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 144px;
  align-items: center;
  gap: 24px;
  padding: 20px 12px;
  color: var(--color-sub-dark);
  text-decoration: none;
  transition: background .2s ease;
}

.nws-row__link:hover { background: #FCF6FB; color: var(--color-sub-dark); }

.nws-row__date { font-size: 16px; font-weight: 800; color: #77677F; font-variant-numeric: tabular-nums; }

.nws-row__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.nws-row__title { font-size: 16px; font-weight: 700; line-height: 1.7; line-break: strict; text-wrap: pretty; }
.nws-row__link:hover .nws-row__title { color: var(--color-main); }

.nws-row__img { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #FCF6FB; }
.nws-row__img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nws-empty { margin: 0; padding: 40px 0; text-align: center; font-size: 16px; color: #77677F; }

@media (max-width: 960px) {
  .nws-lead { grid-template-columns: 1fr; }
  .nws-lead__body { padding: 24px; }
  .nws-year { grid-template-columns: 1fr; }
  .nws-year__label { position: static; padding: 8px 0 12px; font-size: 22px; }
}

@media (max-width: 767px) {
  .nws { padding: 40px 0 56px; }
  .nws-lead { margin-bottom: 40px; border-radius: 16px; }
  .nws-lead__title { font-size: 18px; }
  .nws-row__link { grid-template-columns: 1fr 96px; grid-template-areas: "date img" "body img"; gap: 6px 16px; padding: 16px 4px; }
  .nws-row__date { grid-area: date; font-size: 14px; }
  .nws-row__body { grid-area: body; }
  .nws-row__img { grid-area: img; align-self: start; }
  .nws-row__title { font-size: 15px; }
}

/* =====================================================================
   ニュースの記事（/news/<スラッグ>/）。薄い面の見出し → 画像を半分重ねる → 本文（読み物の段階）→ 前後 → ほかのニュース
   本文の大きさは docs/design-rules.md「8. 例外」の読み物（スマホの段階を PC でも使う）
   ===================================================================== */
.nwsd-page { background: #FFFFFF; }

/* display: flow-root で、パンくずの上の余白が面の外へ押し出されてヘッダーとの間に白い隙間ができるのを防ぐ */
.nwsd-head { display: flow-root; background: #FCF6FB; padding: 0 0 48px; }
.nwsd-head.has-img { padding-bottom: 140px; }
.nwsd-head__inner { max-width: 800px; margin: 0 auto; }
.nwsd-head__inner .breadcrumbs, .nwsd-head__inner nav { margin-bottom: 24px; }
.nwsd-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 14px; color: #77677F; }
.nwsd-title { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.5; color: var(--color-sub-dark); line-break: strict; text-wrap: pretty; }

/* 本文の幅を見出しと同じ 800px に（container の左右の余白 60px を足す） */
.nwsd .container { max-width: 920px; }

.nwsd-img {
  margin: -110px 0 48px;
  border-radius: 20px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(111,61,156,.12);
}

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

/* 本文。プレスリリースの見出し・画像・リスト・表を、文言はそのままに読みやすく */
/* 余白は上側だけで取る（下側は 0）。画像の下・段落の間・見出しの前で、それぞれの間を決める */
.nwsd-body { font-size: 16px; line-height: 2; color: #53405F; }
.nwsd-body > * { margin-top: 0; margin-bottom: 0; }
.nwsd-body > * + * { margin-top: 1.6em; }
.nwsd-body > figure + *, .nwsd-body > .wp-block-image + * { margin-top: 2em; }

.nwsd-body > h2 {
  margin: 3.2em 0 0;
  padding: 0 0 12px;
  border-bottom: 1px solid #F1E8F6;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-sub-dark);
}

.nwsd-body > h3 {
  margin: 2.4em 0 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
  color: var(--color-sub-dark);
}

.nwsd-body > h2 + *, .nwsd-body > h3 + * { margin-top: 1em; }

.nwsd-body > figure, .nwsd-body > .wp-block-image { margin-top: 2.2em; }
.nwsd-body img { max-width: 100%; height: auto; border-radius: 12px; }
.nwsd-body figcaption { margin-top: 8px; font-size: 13px; color: #77677F; text-align: center; }

.nwsd-body ul, .nwsd-body ol { padding-left: 1.4em; }
.nwsd-body li + li { margin-top: .4em; }
.nwsd-body a { color: var(--color-main); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.nwsd-body strong { font-weight: 700; }

.nwsd-body table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nwsd-body th, .nwsd-body td { padding: 10px 14px; border: 1px solid #F1E8F6; text-align: left; vertical-align: top; }
.nwsd-body th { width: 30%; background: #FCF6FB; font-weight: 700; }

/* 前後の記事。左に新しいニュース、右に前のニュース */
.nwsd-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 64px 0 0;
  padding-top: 32px;
  border-top: 1px solid #F1E8F6;
}

.nwsd-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid #F1E8F6;
  border-radius: 16px;
  color: var(--color-sub-dark);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}

.nwsd-nav__link.is-prev { text-align: right; }
.nwsd-nav__link.is-empty { border: 0; padding: 0; }
.nwsd-nav__link:hover { background: #FCF6FB; border-color: #F8D8EB; color: var(--color-sub-dark); }
.nwsd-nav__dir { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--color-main); }
.nwsd-nav__link.is-next .nwsd-nav__dir::before { content: '← '; }
.nwsd-nav__link.is-prev .nwsd-nav__dir::after { content: ' →'; }
.nwsd-nav__title { font-size: 15px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ほかのニュース（一覧の行の型を使い回す） */
.nwsd-more { padding: 72px 0 88px; }
.nwsd-more .container { max-width: 960px; }
.nwsd-more__title { margin: 0 0 24px; font-size: 24px; font-weight: 800; color: var(--color-sub-dark); }
.nwsd-more .nws-row__link { grid-template-columns: 100px minmax(0, 1fr) 144px; }
.nwsd-more .nws-row__date { font-size: 14px; }
.nwsd-more__all { margin: 24px 0 0; text-align: right; }
.nwsd-more__all a { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--color-main); text-decoration: none; }
.nwsd-more__all a:hover svg { transform: translateX(3px); }
.nwsd-more__all svg { transition: transform .2s ease; }

@media (max-width: 767px) {
  .nwsd-head { padding-bottom: 32px; }
  .nwsd-head.has-img { padding-bottom: 88px; }
  .nwsd-title { font-size: 24px; }
  .nwsd-img { margin: -64px 0 32px; border-radius: 14px; }
  .nwsd-body h2 { font-size: 20px; }
  .nwsd-body h3 { font-size: 16px; }
  .nwsd-nav { grid-template-columns: 1fr; margin-top: 48px; }
  .nwsd-nav__link.is-prev { text-align: left; }
  .nwsd-nav__link.is-empty { display: none; }
  .nwsd-more { padding: 48px 0 56px; }
  .nwsd-more__title { font-size: 20px; }
  .nwsd-more .nws-row__link { grid-template-columns: 1fr 96px; }
}


/* --- 運営会社: 代表メッセージ・受賞歴・投資家・SNS（2026-10-19 パンフレットの最後のページから） --- */
.co-message__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; align-items: center; }
.co-message__catch { margin: 0 0 32px; font-size: 28px; font-weight: 800; line-height: 1.6; letter-spacing: .04em; color: #2F1C40; }
.co-message__catch span { color: var(--color-main); }
.co-message__body p { margin: 0; font-size: 16px; line-height: 2.1; color: #53405F; }
.co-message__by { display: flex; align-items: baseline; gap: 14px; margin: 32px 0 0; font-size: 20px; font-weight: 800; letter-spacing: .08em; color: #2F1C40; }
.co-message__by span { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #53405F; }
.co-message__photo { margin: 0; border-radius: 4px; overflow: hidden; }
.co-message__photo img { display: block; width: 100%; height: auto; }

.co-funding { padding: 24px 0; border-bottom: 1px solid #E4D8EC; }
.co-funding .co-foundation__figure { margin-bottom: 12px; }

.co-awards { list-style: none; margin: 0; padding: 0; }
.co-awards li { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid #E4D8EC; }
.co-awards__name { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; }
.co-awards__img { display: flex; align-items: center; justify-content: center; height: 64px; }
.co-awards__img img { max-width: 100%; max-height: 64px; width: auto; height: auto; }

.co-investors { margin-top: 64px; }
.co-investors__grid { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; }
.co-investors__grid li { display: flex; align-items: center; justify-content: center; height: 88px; padding: 12px 14px; border: 1px solid #E4D8EC; border-radius: 4px; background: #FFFFFF; }
.co-investors__grid img { max-width: 100%; max-height: 52px; width: auto; height: auto; }


@media (max-width: 960px) {
  .co-message__grid { grid-template-columns: 1fr; gap: 40px; }
  .co-message__photo { max-width: 480px; }
  .co-investors__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .co-message__catch { font-size: 22px; }
  .co-message__body p { font-size: 15px; }
  .co-message__body br { display: none; }
  .co-awards li { grid-template-columns: minmax(0, 1fr) 88px; gap: 14px; }
  .co-awards__img { height: 52px; }
  .co-awards__img img { max-height: 52px; }
  .co-investors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .co-investors__grid li { height: 72px; }
  .co-investors__grid img { max-height: 40px; }
}

/* 運営会社のFV：メッセージの下のタグライン（2026-10-19） */
.co-hero__tagline { margin: 28px 0 0; font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: .06em; color: rgba(255,255,255,.88); }
@media (max-width: 767px) { .co-hero__tagline { margin-top: 20px; font-size: 15px; } }

/* 違いの節に混ぜた「プロワンは、株式会社ミツモアが開発・運営しています。」（2026-10-19） */
/* 説明文は横いっぱいに（大きな見出しは外した。2026-10-19 本人） */
.co-diff__intro { max-width: 1040px; margin: 0 auto 48px; }
.co-diff__intro p { margin: 0 0 16px; font-size: 16px; line-height: 2; color: #53405F; }
.co-diff__intro p:last-child { margin-bottom: 0; }

/* 運営会社：プロワンとミツモアの違い（運営会社から2つのサービスへ線が分かれる図。2026-10-19） */
.co-diff { max-width: 1040px; margin: 0 auto; }
.co-diff__parent { display: flex; flex-direction: column; align-items: center; gap: 2px; width: max-content; margin: 0 auto; padding: 14px 40px; border: 1px solid #2F1C40; border-radius: 999px; background: #FFFFFF; }
.co-diff__parent span { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #53405F; }
.co-diff__parent b { font-size: 18px; font-weight: 800; letter-spacing: .06em; color: #2F1C40; }
.co-diff__branch { position: relative; height: 56px; }
.co-diff__branch::before { content: ''; position: absolute; left: 50%; top: 0; height: 28px; border-left: 1px solid #2F1C40; }
.co-diff__branch::after { content: ''; position: absolute; left: calc(25% - 6px); right: calc(25% - 6px); top: 28px; height: 28px; border: 1px solid #2F1C40; border-bottom: 0; }
.co-diff__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.co-diff__card { padding: 32px 32px 20px; border: 1px solid #E4D8EC; border-radius: 16px; background: #FFFFFF; }
.co-diff__card.is-own { border-color: rgba(111,61,156,.5); box-shadow: 0 18px 40px -24px rgba(111,61,156,.35); } /* 上の太い線は付けない（2026-10-19 本人） */
.co-diff__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.co-diff__logo { display: block; height: 36px; width: auto; max-width: 70%; }
.co-diff__name { font-size: 24px; font-weight: 800; color: #2F1C40; }
.co-diff__here { flex: none; padding: 4px 12px; border-radius: 999px; background: #F1E8F6; font-size: 12px; font-weight: 800; color: var(--color-main); }
.co-diff__kind { margin: 16px 0 12px; font-size: 18px; font-weight: 800; line-height: 1.5; color: #2F1C40; }
.co-diff__card.is-own .co-diff__kind { color: var(--color-main); }
.co-diff__rows { margin: 0; }
.co-diff__rows div { padding: 14px 0; border-top: 1px solid #F1E8F6; }
.co-diff__rows dt { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: #53405F; }
.co-diff__rows dd { margin: 0; font-size: 15px; line-height: 1.8; color: #53405F; }
@media (max-width: 767px) {
  .co-diff__branch { height: 32px; }
  .co-diff__branch::before { height: 32px; }
  .co-diff__branch::after { display: none; }
  .co-diff__cards { grid-template-columns: 1fr; gap: 16px; }
  .co-diff__card { padding: 24px 20px 12px; }
  .co-diff__logo { height: 30px; }
}

/* ==========================================================================
   2026-10-20 機能・活用シーンの「資料でもっと詳しく」と、機能の「次に見ていただきたいページ」（本人指示）
   白→薄緑→薄いグレーと続いて単調だったので、深い緑にしてメリハリを付ける。
   緑はFVと同じくゆっくり色を変え、ボタン・カードにはフッターCTAと同じ光を数秒おきに横切らせる
   ========================================================================== */
.single-features .feature-mid-cta__box,
.single-scene .feature-mid-cta__box {
  position: relative;
  overflow: hidden;
  border: 0;
  background-color: #6F3D9C;
  background-image: linear-gradient(-45deg, #54318B, #6F3D9C, #6F3D9C, #54318B);
  background-size: 300% 300%;
  animation: featureHeroGradient 15s ease infinite;
  box-shadow: 0 18px 40px rgba(111,61,156,0.18);
}
.single-features .feature-mid-cta__title { color: #FFFFFF; }
.single-features .feature-mid-cta__desc { color: rgba(255,255,255,0.86); }
.single-features .feature-mid-cta__sub { color: #FFFFFF; }
/* 料金ページの料金表の直後の帯（2026-11-05・template-parts/plan-table-cta.php）。機能ページと同じ白い文字 */
.feature-mid-cta--plan .feature-mid-cta__title { color: #FFFFFF; }
.feature-mid-cta--plan .feature-mid-cta__desc { color: rgba(255,255,255,0.86); }
.feature-mid-cta--plan .feature-mid-cta__sub { color: #FFFFFF; }
/* 料金表の区画の中に置く。上は注記との間をあけ、下は区画の余白に任せる */
.feature-mid-cta.feature-mid-cta--plan { position: relative; z-index: 1; margin-top: 56px; padding: 0; }
@media (max-width: 767px) { .feature-mid-cta.feature-mid-cta--plan { margin-top: 40px; padding: 0; } }

/* 光が横切るボタン（フッターCTAの footerButtonShine と同じ動き） */
.single-features .feature-mid-cta__buttons .feature-detail-button,
.single-scene .feature-mid-cta__buttons .feature-detail-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.single-features .feature-mid-cta__buttons .feature-detail-button::after,
.single-scene .feature-mid-cta__buttons .feature-detail-button::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-130%) skewX(-12deg);
  animation: footerButtonShine 5.5s ease-in-out infinite;
}
.single-features .feature-mid-cta__buttons .feature-detail-button > *,
.single-scene .feature-mid-cta__buttons .feature-detail-button > * { position: relative; z-index: 1; }

/* 2026-11-05 本人「資料でもっと詳しく、をもう少しデザイン的に」: 右に資料の表紙を置き、深い緑の面に白い芯の光を流す。
   ・緑の変化は15秒で動いていたが色の差が小さく気づかれなかったので、差を広げて12秒にする
   ・資料のうしろに明るみ（ゆっくり脈打つ）と細いグリッドを敷き、目を資料へ向ける
   ・光は light-line.js の TARGETS（通り道5：下端から右上へ上がる＝文字を横切らない）
   ・見出しの上の札や光る点は足さない（本人「AI臭い・文言も不要」）
   重なり順：明るみ・グリッド(0) → 流れる光 .pl-light(1) → 文字・ボタン・資料(2) */
.feature-mid-cta .feature-mid-cta__box--docs {
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: "text docs" "btns docs";
  align-items: center;
  column-gap: 40px;
  row-gap: 24px;
  min-height: 248px;
  padding: 44px 48px;
  border-radius: 22px;
  background-color: #6F3D9C;
  background-image: linear-gradient(-45deg, #54318B 0%, #6F3D9C 35%, #8450B8 50%, #6F3D9C 70%, #54318B 100%);
  background-size: 260% 260%;
  animation: midCtaGradient 12s ease-in-out infinite;
  box-shadow: 0 22px 48px rgba(111,61,156,0.22);
}
@keyframes midCtaGradient { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
.feature-mid-cta__box--docs::before,
.feature-mid-cta__box--docs::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}
.feature-mid-cta__box--docs::before {
  background: radial-gradient(42% 70% at 80% 52%, rgba(248,216,235,0.30) 0%, rgba(248,216,235,0) 70%);
  animation: midCtaPool 6s ease-in-out infinite;
}
@keyframes midCtaPool { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.feature-mid-cta__box--docs::after {
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(70% 100% at 82% 50%, #2F1C40 20%, transparent 75%);
  mask-image: radial-gradient(70% 100% at 82% 50%, #2F1C40 20%, transparent 75%);
}
.feature-mid-cta__box--docs > .feature-mid-cta__text,
.feature-mid-cta__box--docs > .feature-mid-cta__buttons,
.feature-mid-cta__box--docs > .feature-mid-cta__docs { position: relative; z-index: 2; }
.feature-mid-cta__box--docs .feature-mid-cta__text { grid-area: text; align-self: end; }
.feature-mid-cta__box--docs .feature-mid-cta__title { margin-bottom: 10px; font-size: 26px; line-height: 1.5; }
.feature-mid-cta__box--docs .feature-mid-cta__buttons { grid-area: btns; align-self: start; flex-direction: row; justify-content: flex-start; gap: 22px; flex-wrap: wrap; }
.feature-mid-cta__box--docs .feature-mid-cta__buttons .feature-detail-button {
  padding: 15px 28px;
  border-radius: 999px;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px rgba(47,28,64,.18);
}
.feature-mid-cta__box--docs .feature-mid-cta__buttons .feature-detail-button .button-icon { display: inline-flex; margin-left: 10px; }
/* 資料はゆっくり浮き沈みさせる。画像は横360pxなので、それより大きくは出さない（ぼやけるため） */
.feature-mid-cta__docs { grid-area: docs; align-self: stretch; position: relative; }
.feature-mid-cta__docs img {
  position: absolute;
  right: -4px;
  top: 50%;
  width: 360px;
  max-width: 100%;
  height: auto;
  transform: translateY(-56%) rotate(-3deg);
  filter: drop-shadow(0 18px 24px rgba(47,28,64,.45));
  animation: midCtaFloat 6s ease-in-out infinite;
}
@keyframes midCtaFloat { 0%, 100% { transform: translateY(-56%) rotate(-3deg); } 50% { transform: translateY(-60%) rotate(-3deg); } }
@media (max-width: 860px) {
  .feature-mid-cta .feature-mid-cta__box--docs {
    grid-template-columns: 1fr;
    grid-template-areas: "docs" "text" "btns";
    row-gap: 20px;
    padding: 24px 20px 32px;
    text-align: center;
  }
  .feature-mid-cta__box--docs::before { background: radial-gradient(70% 40% at 50% 14%, rgba(248,216,235,0.30) 0%, rgba(248,216,235,0) 70%); }
  .feature-mid-cta__box--docs .feature-mid-cta__title { font-size: 20px; }
  .feature-mid-cta__box--docs .feature-mid-cta__buttons { flex-direction: column; align-items: stretch; gap: 14px; }
  .feature-mid-cta__box--docs .feature-mid-cta__sub { align-self: center; }
  .feature-mid-cta__docs { height: 150px; }
  .feature-mid-cta__docs img { left: 50%; right: auto; top: auto; bottom: 0; width: min(320px, 92%); transform: translateX(-50%) rotate(-3deg); animation-name: midCtaFloatSp; }
  @keyframes midCtaFloatSp { 0%, 100% { transform: translateX(-50%) rotate(-3deg); } 50% { transform: translate(-50%, -4px) rotate(-3deg); } }
}
@media (prefers-reduced-motion: reduce) {
  .feature-mid-cta .feature-mid-cta__box--docs, .feature-mid-cta__box--docs::before, .feature-mid-cta__docs img { animation: none; }
}

/* 次に見ていただきたいページ：深い緑の帯に白いカード */
.feature-next-section {
  position: relative;
  overflow: hidden;
  background-color: #6F3D9C;
  background-image: linear-gradient(-45deg, #54318B, #6F3D9C, #6F3D9C, #54318B);
  background-size: 300% 300%;
  animation: featureHeroGradient 15s ease infinite;
}
.feature-next-section .section-title.text-gradient {
  background: none;
  -webkit-text-fill-color: #FFFFFF;
  color: #FFFFFF;
}
.feature-next-section .section-description { color: rgba(255,255,255,0.86); }
.feature-next-card {
  isolation: isolate;
  border: 0;
  box-shadow: 0 14px 32px rgba(111,61,156,0.22);
}
.feature-next-card:hover { box-shadow: 0 20px 40px rgba(111,61,156,0.3); }
.feature-next-card > * { position: relative; z-index: 1; }
/* カードを光が横切る。2枚が同時に光らないよう2枚目は遅らせる */
.feature-next-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(132,80,184,0) 0%, rgba(132,80,184,0.16) 50%, rgba(132,80,184,0) 100%);
  transform: translateX(-130%) skewX(-12deg);
  animation: footerButtonShine 7s ease-in-out infinite;
}
.feature-next-card:nth-child(2)::after { animation-delay: 1.4s; }

@media (prefers-reduced-motion: reduce) {
  .single-features .feature-mid-cta__box,
  .single-scene .feature-mid-cta__box,
  .feature-next-section { animation: none; background-position: 0% 50%; }
  .single-features .feature-mid-cta__buttons .feature-detail-button::after,
  .single-scene .feature-mid-cta__buttons .feature-detail-button::after,
  .feature-next-card::after { display: none; }
}

/* 活用シーンのよくある質問（導入事例の前・Q/Aのカード。2026-10-20） */
.scene-faq-section .support-faq-list--cards { max-width: 880px; margin: 40px auto 0; }
/* 運営会社のよくある質問も同じカードに（2026-10-27）。見出しは運営会社の型のまま */
#faq.co-section .support-faq-list--cards { margin: 0; }

/* コラムの記事ページ：右に目次とCTA（導入事例の記事ページ .csx-side と同じ見た目。2026-10-20 本人指示） */
.col-layout { display: block; }
.col-side { display: none; }
@media (min-width: 1024px) {
  .col-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; }
  .col-side { display: block; height: 100%; }
  .col-side__inner { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
  .col-main { min-width: 0; }
}
.col-box { border: 1px solid #F1E8F6; border-radius: 12px; padding: 18px 20px; background: #FFFFFF; }
.col-box__title { margin: 0 0 10px; font-size: 14px; font-weight: 800; color: var(--color-sub-dark); }
.col-toc { max-height: calc(100vh - 340px); overflow-y: auto; }
.col-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: col-toc; font-size: 13px; line-height: 1.6; display: flex; flex-direction: column; gap: 8px; }
.col-toc li { counter-increment: col-toc; display: flex; gap: 8px; }
.col-toc li::before { content: counter(col-toc, decimal-leading-zero); flex: none; color: var(--color-main); font-weight: 700; font-variant-numeric: tabular-nums; }
.col-toc a { color: var(--color-text); text-decoration: none; }
.col-toc a:hover { color: var(--color-main); }
.col-toc li.is-on a { color: var(--color-main); font-weight: 700; }
.col-side-cta { background: #FCF6FB; border: 0; }
.col-side-cta p { margin: 0 0 12px; font-size: 13px; line-height: 1.7; }
.col-side-cta .col-box__title { margin-bottom: 8px; }
.col-side-cta__btn { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 999px; background: var(--color-accent); color: #FFFFFF !important; font-size: 14px; font-weight: 700; text-decoration: none; }
.col-side-cta__btn:hover { opacity: .9; }
/* 2026-10-28 フッターCTAの資料ボタンと同じ形（表紙＋正円の「無料」＋2行）にそろえる（本人指示） */
.col-side-cta__cover { display: block; width: 100%; height: auto; margin: 4px 0 10px; }
.col-side-cta__cover-link { display: block; transition: opacity .2s; }
.col-side-cta__cover-link:hover { opacity: .85; }
.col-side-cta__btn--dl { height: auto; justify-content: flex-start; gap: 10px; padding: 10px 16px 10px 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 8px rgba(47,28,64,.12); }
.col-side-cta__free { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; color: var(--color-accent); font-size: 12px; font-weight: 800; line-height: 1; }
.col-side-cta__label { font-size: 16px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.col-side-cta__arrow { flex: none; margin-left: auto; }

/* アイキャッチは本文の列の幅いっぱい（PCで720pxに抑えていたのは1列のときの決まり） */
@media (min-width: 1024px) {
  .col-main .column-featured-image { max-width: none; margin-left: 0; margin-right: 0; }
}

/* 次に見ていただきたいページ：いま見ている機能から2つの行き先へ線が分かれる図（2026-10-20 本人「もう一段階デザイン的に」） */
.fnx {
  display: grid;
  grid-template-columns: 220px 140px minmax(0, 1fr);
  align-items: center;
  max-width: 980px;
  margin: 48px auto 0;
}
.fnx__from {
  position: relative;
  padding: 22px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  text-align: center;
}
.fnx__from-dot {
  position: absolute;
  right: -7px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: #FFF0F7;
  box-shadow: 0 0 0 4px rgba(255,240,247,0.18), 0 0 14px rgba(248,216,235,0.8);
}
.fnx__from-label { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: rgba(255,255,255,0.7); }
.fnx__from-name { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.45; color: #FFFFFF; }
.fnx__lines { width: 100%; height: 300px; overflow: visible; }
.fnx__lines path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fnx__line { stroke: rgba(255,255,255,0.28); stroke-width: 2; }
/* 行き先へ向かって進む光。太さと濃さの違う5本を screen で重ね、外ほど尾を長くしてにじませる（2026-10-20 本人「もう少し光っぽく」） */
.fnx__lines { mix-blend-mode: screen; }
.fnx__beam { stroke-dashoffset: 0; animation: fnxFlow 4.2s cubic-bezier(.3, .15, .35, 1) infinite; }
.fnx__beam-1 { stroke: rgba(189,239,250,0.08); stroke-width: 18; --fnx-len: 30; stroke-dasharray: 30 200; }
.fnx__beam-2 { stroke: rgba(189,239,250,0.16); stroke-width: 11; --fnx-len: 24; stroke-dasharray: 24 200; }
.fnx__beam-3 { stroke: rgba(248,216,235,0.32); stroke-width: 6.5; --fnx-len: 19; stroke-dasharray: 19 200; }
.fnx__beam-4 { stroke: rgba(255,240,247,0.75); stroke-width: 3.4; --fnx-len: 14; stroke-dasharray: 14 200; }
.fnx__beam-5 { stroke: #FFFFFF; stroke-width: 1.8; --fnx-len: 9; stroke-dasharray: 9 200; }
.fnx__beam--2 { animation-delay: 2.1s; }
/* 先頭をそろえるため、どの線も「先頭が 0 → 100 に進む」ように長さぶん後ろから出す */
@keyframes fnxFlow {
  0% { stroke-dashoffset: var(--fnx-len); opacity: 0; }
  6% { opacity: 1; }
  55% { stroke-dashoffset: calc(var(--fnx-len) - 100); opacity: 1; }
  62%, 100% { stroke-dashoffset: calc(var(--fnx-len) - 100); opacity: 0; }
}
.fnx__orb-glow { fill: rgba(189,239,250,0.18); }
.fnx__orb-mid { fill: rgba(248,216,235,0.55); }
.fnx__orb-core { fill: #FFFFFF; }
.fnx__orb { opacity: 0; }

.fnx__to { display: flex; flex-direction: column; gap: 20px; }
/* 2026-11-05 本人「サムネが今ひとつ・光が走るのはいい」: 白いカードをやめ、深い緑のガラスのカードにした。
   光の玉（4.2秒の55%＝2.31秒でカードの左端に着く）に合わせて、カードが灯る → 縁を光が走る → サムネの線が灯る → 矢印の輪が広がる。
   2枚目は --d で2.1秒遅らせる（線の光と同じ） */
.fnx-card {
  --d: 0s;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 140px;
  padding: 18px 22px 18px 18px;
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(111,61,156,0.22);
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  animation: fnxCardGlow 4.2s ease-out infinite;
  animation-delay: var(--d);
}
.fnx-card:nth-child(2) { --d: 2.1s; }
.fnx-card:hover { transform: translateY(-3px); border-color: rgba(248,216,235,0.5); background-color: rgba(255,255,255,0.04); }
@keyframes fnxCardGlow {
  0%, 53%, 100% { box-shadow: 0 14px 32px rgba(111,61,156,0.22), 0 0 0 0 rgba(189,239,250,0); }
  62% { box-shadow: 0 14px 32px rgba(111,61,156,0.22), 0 0 28px 0 rgba(189,239,250,0.22); }
}
/* 縁の光。縁の形に切り抜いた層の中を明るい帯が左から右へ動く。帯が左端にいる間は左の縁全体が光り、
   そのあと上と下の縁を同時に右へ走る（線の光が2つに分かれて回り込む見え方）。__halo は同じ帯をぼかして外ににじませる */
.fnx-card__ring,
.fnx-card__halo {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(#2F1C40 0 0) content-box, linear-gradient(#2F1C40 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#2F1C40 0 0) content-box exclude, linear-gradient(#2F1C40 0 0);
}
.fnx-card__ring { inset: -1px; z-index: 2; padding: 2px; border-radius: inherit; }
.fnx-card__halo { inset: -6px; z-index: 0; padding: 10px; border-radius: 24px; filter: blur(8px); }
.fnx-card__ring::before,
.fnx-card__halo::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(90deg, rgba(189,239,250,0) 0%, rgba(248,216,235,0.7) 65%, #FFFFFF 94%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  opacity: 0;
  animation: fnxRing 4.2s cubic-bezier(.45, .05, .35, 1) infinite;
  animation-delay: var(--d);
}
@keyframes fnxRing {
  0%, 54% { transform: translateX(-96%); opacity: 0; }
  56% { opacity: 1; }
  80% { transform: translateX(300%); opacity: 1; }
  84%, 100% { transform: translateX(300%); opacity: 0; }
}
/* サムネ：光の終点として奥が淡く光る面。玉が着くと奥がふわっと明るくなる */
.fnx-card__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  border-radius: 12px;
  background: radial-gradient(90% 90% at 50% 50%, rgba(189,239,250,0.16) 0%, rgba(189,239,250,0) 72%), rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
.fnx-card__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(70% 80% at 50% 50%, rgba(248,216,235,0.34) 0%, rgba(248,216,235,0) 70%);
  opacity: 0;
  animation: fnxVisualGlow 4.2s ease-out infinite;
  animation-delay: var(--d);
}
.fnx-card__visual > * { position: relative; }
@keyframes fnxVisualGlow {
  0%, 56%, 100% { opacity: 0; }
  64% { opacity: 1; }
  88% { opacity: 0; }
}
.fnx-card__body { display: flex; flex-direction: column; gap: 6px; }
.fnx-card__label { font-size: 18px; font-weight: 800; line-height: 1.5; color: #FFFFFF; }
.fnx-card__text { font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.8); }
/* 矢印は白い丸（暗い面でも押せるとわかる）。縁の光が右端に着いたところで輪が広がる */
.fnx-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--color-main);
  transition: transform 0.2s ease;
  animation: fnxArrive 4.2s ease-out infinite;
  animation-delay: var(--d);
}
.fnx-card:hover .fnx-card__arrow { transform: translateX(4px); }
@keyframes fnxArrive {
  0%, 76%, 100% { box-shadow: 0 0 0 0 rgba(248,216,235,0); }
  82% { box-shadow: 0 0 0 8px rgba(248,216,235,0.35); }
  94% { box-shadow: 0 0 0 14px rgba(248,216,235,0); }
}

/* サムネの線のアイコン（本・円のコイン・建物と吹き出し）。いつもは淡い線、玉が着くと白い光が線をなぞって灯る */
.fnx-icon { display: block; width: 132px; height: 106px; overflow: visible; }
.fnx-icon path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fnx-icon__base path { stroke: rgba(248,216,235,0.7); stroke-width: 2.2; }
.fnx-icon__lit { filter: drop-shadow(0 0 3px rgba(248,216,235,0.95)) drop-shadow(0 0 8px rgba(189,239,250,0.5)); }
.fnx-icon__lit path {
  stroke: #FFFFFF;
  stroke-width: 2.2;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: fnxDraw 4.2s ease-out infinite;
  animation-delay: var(--d);
}
@keyframes fnxDraw {
  0%, 56% { stroke-dashoffset: 1; opacity: 1; }
  76% { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* AIの印のキラキラだけ塗りで残し、静かにまたたかせる（2026-10-21 本人「AIならキラキラマーク」）。
   .fnx-icon path の fill:none に負けないよう .fnx-icon を前に付ける */
.fnx-icon .fnx-icon__spark { fill: #F8D8EB; stroke: none; transform-box: fill-box; transform-origin: center; animation: fnxAiTwinkle 2.8s ease-in-out infinite; }
.fnx-icon .fnx-icon__spark--2 { fill: #FFF0F7; animation-delay: 1.2s; }
@keyframes fnxAiTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 860px) {
  .fnx { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
  .fnx__from-dot { right: auto; left: 50%; top: auto; bottom: -7px; margin: 0 0 0 -7px; }
  .fnx__lines { display: none; }
  .fnx__to { position: relative; padding-top: 40px; }
  .fnx__to::before { content: ''; position: absolute; left: 50%; top: 0; height: 40px; border-left: 2px solid rgba(255,255,255,0.28); }
  .fnx-card { grid-template-columns: 1fr auto; }
  .fnx-card__visual { grid-column: 1 / -1; height: auto; min-height: 96px; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fnx__beam, .fnx__orb { animation: none; display: none; }
  .fnx-card, .fnx-card__arrow, .fnx-icon .fnx-icon__spark { animation: none; }
  .fnx-card__ring, .fnx-card__halo, .fnx-card__visual::before, .fnx-icon__lit { display: none; }
}

/* ==========================================================================
   規約・ポリシー（page-legal.php。2026-10-20 本人「新しいデザインに」）
   本文は読み物の決まり（行間2・段落の間1.6em）。見出しは大きさと太さ、区切りは細い線。右に目次（コラムの .col-box と同じ箱）
   ========================================================================== */
.legal-hero { padding: 56px 0; text-align: center; }
.legal-hero .page-title { margin: 0; color: #FFFFFF; }
.legal-hero__updated { margin: 12px 0 0; font-size: 14px; color: rgba(255,255,255,0.85); }
.legal-layout { padding-top: 56px; padding-bottom: 88px; }
.legal-side { display: none; } /* スマホは本文だけ。PCは下の指定で右に出す */
@media (min-width: 1024px) {
  .legal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
  .legal-side { display: block; height: 100%; }
  .legal-side__inner { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
}
.legal-body { max-width: 780px; font-size: 16px; line-height: 2; color: #53405F; }
.legal-body p { margin: 0 0 1.6em; }
.legal-body h2 {
  margin: 2.8em 0 1em;
  padding-top: 1.6em;
  border-top: 1px solid #F1E8F6;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.55;
  color: var(--color-sub-dark);
  scroll-margin-top: 96px;
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { margin: 2em 0 .8em; font-size: 16px; font-weight: 700; line-height: 1.7; color: var(--color-sub-dark); }
.legal-body ol, .legal-body ul { margin: 0 0 1.6em; padding-left: 1.6em; }
.legal-body li { margin: 0 0 .6em; padding-left: .2em; }
.legal-body li::marker { color: var(--color-main); font-weight: 700; }
.legal-body ol ol { list-style: lower-roman; margin: .6em 0 .4em; }
.legal-body strong { font-weight: 700; color: var(--color-sub-dark); }
.legal-body a { color: var(--color-main); text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.legal-body .post-password-form input[type="password"] { padding: 10px 14px; border: 1px solid #F1E8F6; border-radius: 8px; }
.legal-body .post-password-form input[type="submit"] { padding: 10px 20px; border: 0; border-radius: 999px; background: var(--color-main); color: #FFFFFF; font-weight: 700; cursor: pointer; }
.legal-toc ol { max-height: calc(100vh - 470px); min-height: 120px; overflow-y: auto; margin: 0; padding: 0 4px 0 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.6; } /* 見出し「目次」は残し、条文の並びだけをスクロール */
.legal-toc a { color: var(--color-text); text-decoration: none; }
.legal-toc a:hover, .legal-toc li.is-on a { color: var(--color-main); }
.legal-toc li.is-on a { font-weight: 700; }
.legal-links ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.6; }
.legal-links a { color: var(--color-text); text-decoration: none; }
.legal-links a:hover { color: var(--color-main); }
.legal-links a[aria-current="page"] { color: var(--color-main); font-weight: 700; }
.legal-side__btn { display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 999px; border: 2px solid var(--color-main); color: var(--color-main) !important; font-size: 14px; font-weight: 700; text-decoration: none; background: #FFFFFF; }
.legal-side__btn:hover { background: var(--color-main); color: #FFFFFF !important; }
@media (max-width: 767px) {
  .legal-hero { padding: 40px 0; }
  .legal-layout { padding-top: 40px; padding-bottom: 56px; }
}

/* 機能ページの導入事例：写真の無い事例（noimg_ok）はロゴの面で出す（2026-10-20） */
.feature-case-image--nophoto { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #F1E8F6 0%, #FCF6FB 100%); }
.feature-case-image--nophoto img { width: 38%; max-width: 140px; height: auto; object-fit: contain; opacity: .35; }

/* 導入企業のロゴ：「視差効果を減らす」がオンの人向けの、6社ずつふわっと入れ替える見せ方（assets/js/logo-fade.js が作る。2026-10-21） */
.logo-fade { display: grid; width: 100%; }
.logo-fade__group { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; justify-items: stretch; gap: 16px 24px; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.logo-fade__group.is-on { opacity: 1; pointer-events: auto; }
.logo-fade__item { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 56px; }
/* 横長のロゴも枠の幅に収める（幅と高さの上限の小さい方で縮む） */
.logo-fade__item img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(var(--h, 40px), 44px); }
/* トップの帯は top-fv.css の「.top-fv .logos__list img」（幅の上限なし・高さ固定）が後から効くので、強い指定で上書きする。
   帯の両端はぼかしてあるので、左右に余白をとって端のロゴが消えないようにする */
.top-fv .logos__list .logo-fade { padding: 0 6%; box-sizing: border-box; }
.top-fv .logos__list .logo-fade__item img { width: auto; height: auto; max-width: 100%; max-height: min(var(--h, 40px), 44px); }
@media (max-width: 767px) { .top-fv .logos__list .logo-fade__item img { max-height: calc(min(var(--h, 40px), 44px) * .7); } }
.po-logo-band .logo-fade__group { gap: 12px 16px; }
.po-logo-band .logo-fade__item { min-height: 40px; }
.po-logo-band .logo-fade__item img { max-height: 28px; }
@media (max-width: 767px) {
  .logo-fade__group { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
  .logo-fade__item { min-height: 44px; }
  .logo-fade__item img { max-height: calc(min(var(--h, 40px), 44px) * .7); }
}

/* コラムのExcelテンプレートのそばの資料の案内（inc/excel-cta.php。2026-10-29） */
.wp-block-buttons.has-xl-note { flex-direction: column; align-items: center; }
/* Excelのボタンは下の資料の枠と同じ440pxにそろえる。ボタンの文字の長さで幅がばらつくため（2026-10-30 本人）。スマホは画面の幅に合わせる */
.wp-block-buttons.has-xl-note .wp-block-button { width: 100%; max-width: 440px; }
.wp-block-buttons.has-xl-note .wp-block-button__link { display: block; width: 100%; box-sizing: border-box; }
.xl-note { width: 100%; max-width: 440px; margin: 0 auto; }
.xl-note__free { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 0; font-size: var(--fs-label); line-height: 1.6; color: var(--color-dark-gray); }
/* 「登録不要」はExcelのボタンの話なので、ボタンと同じ系統のオレンジにする（白地で読めるよう濃いめ。2026-10-29 本人） */
.xl-note__check { display: inline-flex; align-items: center; gap: 4px; color: #C93279; font-weight: 700; }
.xl-note__box { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 12px 16px 12px 12px; border: 1px solid #F1E8F6; border-radius: 16px; background: #FCF6FB; color: var(--color-text); text-decoration: none !important; transition: border-color .2s, box-shadow .2s; }
.xl-note__box:hover { border-color: var(--color-main); box-shadow: 0 4px 12px rgba(111,61,156,.12); }
.xl-note__cover { width: 72px; height: auto; flex: none; border-radius: 3px; box-shadow: 0 2px 6px rgba(47,28,64,.15); }
.xl-note__txt { flex: 1; min-width: 0; text-align: left; line-height: 1.5; }
.xl-note__lead { display: block; font-size: var(--fs-label); color: var(--color-dark-gray); }
.xl-note__name { display: block; font-size: var(--fs-card); font-weight: 700; color: var(--color-main); }
.xl-note__arrow { flex: none; color: var(--color-main); }
.xl-card { position: fixed; right: 24px; bottom: 24px; z-index: 900; width: 380px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 16px 18px 18px; border-radius: 12px; color: #FFFFFF; background: linear-gradient(120deg, rgba(84,49,139,.98) 0%, rgba(111,61,156,.96) 100%); box-shadow: 0 12px 32px rgba(47,28,64,.28); font-size: var(--fs-sub); line-height: 1.6; animation: xl-card-in .35s ease-out; }
.xl-card[hidden] { display: none; }
@keyframes xl-card-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.xl-card__head { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding-right: 24px; font-size: var(--fs-meta); color: rgba(255,255,255,.85); }
.xl-card__check { display: inline-flex; color: #BDEFFA; }
.xl-card__x { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: rgba(255,255,255,.8); font-size: var(--fs-h3-m); line-height: 1; cursor: pointer; }
.xl-card__body { display: flex; gap: 14px; align-items: center; }
.xl-card__cover { width: 96px; height: auto; flex: none; border-radius: 4px; box-shadow: 0 4px 10px rgba(47,28,64,.3); }
.xl-card__title { margin: 0 0 4px; font-size: var(--fs-h4); font-weight: 700; line-height: 1.5; }
.xl-card__desc { margin: 0; font-size: var(--fs-meta); color: rgba(255,255,255,.85); }
.xl-card__btn { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 11px 16px; border-radius: 999px; background: var(--color-accent); color: #FFFFFF !important; font-weight: 700; font-size: var(--fs-card); text-decoration: none; }
.xl-card__btn:hover { background: #C93279; }
.xl-card__free { padding: 1px 8px; border-radius: 999px; background: #FFFFFF; color: var(--color-accent); font-size: var(--fs-label); }
/* カードが出ている間は、右のサイドバーの資料ボックスを隠して案内を重ねない */
body.xl-card-open .col-side-cta { opacity: 0; pointer-events: none; transition: opacity .2s; }
@media (max-width: 767px) {
  .xl-card { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
  .xl-card__cover { width: 80px; }
}

/* 本文の資料CTAの部品（proone-hero／proone-cta／proone-footer）。もとは wp-admin のショートコード（記事末尾）が出していた CSS を写したもの。
   テーマのショートコード [proone_cta_exit] が使う（inc/excel-cta.php。2026-10-29） */
/* 共通リセット */
.proone-cta,
.proone-inline,
.proone-footer,
.proone-hero {
    box-sizing: border-box !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}
.proone-cta *,
.proone-inline *,
.proone-footer *,
.proone-hero * {
    box-sizing: border-box !important;
}
/* 既存のstrong（bold）の下線を防ぐ */
.proone-cta strong,
.proone-inline strong,
.proone-footer strong,
.proone-hero strong,
.proone-cta b,
.proone-inline b,
.proone-footer b,
.proone-hero b,
.proone-cta .proone-inline-text strong,
.proone-inline .proone-inline-text strong {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
}
/* ─── 【目次上】コンパクトヒーローCTA ─── */
.proone-hero {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: #FCF6FB !important;
    border: 1px solid #EA8FBC !important;
    border-radius: 8px !important;
    padding: 14px 18px 14px 14px !important;
    margin: 28px 0 !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.2s, border-color 0.2s !important;
}
.proone-hero:hover {
    background: #FFF0F7 !important;
    border-color: #C93279 !important;
}
.proone-hero-img {
    flex-shrink: 0 !important;
    width: 80px !important;
    height: auto !important;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(47,28,64,0.08)) !important;
    transition: transform 0.2s !important;
}
.proone-hero:hover .proone-hero-img {
    transform: translateY(-2px) !important;
}
.proone-hero-text {
    flex: 1 !important;
    min-width: 0 !important;
}
.proone-hero-micro {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #9D245F !important;
    background: #FFF0F7 !important;
    padding: 3px 10px !important;
    border-radius: 3px !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.04em !important;
}
.proone-hero-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2F1C40 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}
.proone-hero-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #C93279 !important;
    color: #FFFFFF !important;
    padding: 14px 36px !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(201,50,121,0.3) !important;
    transition: background-color 0.2s, transform 0.1s !important;
}
.proone-hero:hover .proone-hero-btn {
    background-color: #C93279 !important;
    transform: translateY(-1px) !important;
}
/* ─── 【記事内①】【最下部】共通ベース ─── */
.proone-cta,
.proone-footer {
    background: #FCF6FB !important;
    border: 1px solid #EA8FBC !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 32px 0 !important;
    display: flex !important;
    align-items: stretch !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}
.proone-cta-img-link,
.proone-footer-img-link {
    flex-shrink: 0 !important;
    width: 45% !important;
    background: #FFF0F7 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    text-decoration: none !important;
    transition: background 0.2s !important;
    cursor: pointer !important;
}
.proone-cta-img-link:hover,
.proone-footer-img-link:hover {
    background: #F8D8EB !important;
}
.proone-cta-img-link img,
.proone-footer-img-link img {
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    display: block !important;
    filter: drop-shadow(0 4px 10px rgba(47,28,64,0.08)) !important;
    transition: transform 0.2s, filter 0.2s !important;
}
.proone-cta-img-link:hover img,
.proone-footer-img-link:hover img {
    transform: translateY(-3px) scale(1.02) !important;
    filter: drop-shadow(0 6px 14px rgba(47,28,64,0.12)) !important;
}
.proone-cta-body,
.proone-footer-body {
    flex: 1 !important;
    padding: 20px 24px 18px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
}
.proone-cta-badge,
.proone-footer-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #FFF0F7 !important;
    border: 1px solid #EA8FBC !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #9D245F !important;
    letter-spacing: 0.05em !important;
    line-height: 1.5 !important;
}
.proone-cta-title,
.proone-footer-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2F1C40 !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}
.proone-cta-sub,
.proone-footer-sub {
    font-size: 14px !important;
    color: #C93279 !important;
    margin: 0 !important;
    line-height: 1.75 !important;
}
.proone-cta-stats,
.proone-footer-stats {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    align-items: stretch !important;
}
.proone-cta-stat,
.proone-footer-stat {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
.proone-cta-stat-num,
.proone-footer-stat-num {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #C93279 !important;
    line-height: 1 !important;
}
.proone-cta-stat-label,
.proone-footer-stat-label {
    font-size: 12px !important;
    color: #C93279 !important;
    line-height: 1.4 !important;
}
.proone-cta-divider,
.proone-footer-divider {
    width: 1px !important;
    background: #EA8FBC !important;
    align-self: stretch !important;
}
.proone-cta-btn,
.proone-footer-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background-color: #C93279 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    padding: 16px 22px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 8px rgba(201,50,121,0.3) !important;
    width: 100% !important;
    line-height: 1.4 !important;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s !important;
}
.proone-cta-btn:hover,
.proone-footer-btn:hover {
    background-color: #C93279 !important;
    box-shadow: 0 4px 16px rgba(201,50,121,0.45) !important;
    transform: translateY(-1px) !important;
    color: #FFFFFF !important;
}
.proone-cta-btn:active,
.proone-footer-btn:active {
    background-color: #C93279 !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(201,50,121,0.3) !important;
}
.proone-cta-note,
.proone-footer-note {
    margin: 0 !important;
    font-size: 13px !important;
    color: #C93279 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    line-height: 1.5 !important;
}
@media (max-width: 640px) {
    .proone-hero {
        flex-wrap: wrap !important;
        padding: 12px !important;
    }
    .proone-hero-img {
        width: 90px !important;
    }
    .proone-hero-btn {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 8px !important;
    }
    .proone-inline {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .proone-inline-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    .proone-cta,
    .proone-footer {
        flex-direction: column !important;
    }
    .proone-cta-img-link,
    .proone-footer-img-link {
        width: 100% !important;
        padding: 20px 40px 12px !important;
    }
    .proone-cta-img-link img,
    .proone-footer-img-link img {
        max-width: 240px !important;
        margin: 0 auto !important;
    }
    .proone-cta-body,
    .proone-footer-body {
        padding: 8px 20px 20px !important;
    }
    .proone-cta-title,
    .proone-footer-title {
        font-size: 16px !important;
    }
}

/* コラムの本文中の目次。single-column.php が Table of Contents Plus の目次を、右の目次と同じ形（この記事の内容／01 02 03）に差し替える。
   右の目次が出るPC（1024px〜）では隠し、スマホ・タブレットでだけ見せる（2026-10-29 本人） */
.col-toc--inline { max-height: none; overflow: visible; margin: 2em 0; }
.col-toc--inline ol { font-size: 14px; gap: 10px; }
@media (min-width: 1024px) {
  .col-toc--inline { display: none; }
}

/* コラムのボタンを丸（999px）にそろえる。デザインルール「札・ボタン 999px」に合わせる（2026-10-29 本人）。
   本文のExcelのボタン（WordPress のボタンブロック）と、本文の資料CTAのボタン（wp-admin のショートコードとテーマの [proone_cta_exit]）。
   ショートコードは記事の中の <style> で角を !important 付きで決めているので、こちらは強い指定で上書きする */
.column-single .entry-content .wp-block-button__link,
.column-single .entry-content .proone-hero-btn,
.column-single .entry-content .proone-inline-btn,
.column-single .entry-content .proone-cta-btn,
.column-single .entry-content .proone-footer-btn { border-radius: 999px !important; }

/* コラムの本文の資料CTAの下に出す、機能ページへの帯（inc/column-feature-link.php。2026-10-30）。資料より一段控えめにする */
.entry-content .col-feature-strip { display: flex; align-items: center; gap: 12px; margin: -14px 0 32px; padding: 12px 18px; border: 1px solid #F1E8F6; border-radius: 12px; background: #FFFFFF; color: var(--color-text); text-decoration: none !important; transition: border-color .2s, background .2s; }
.entry-content .col-feature-strip:hover { border-color: var(--color-main); background: #FCF6FB; }
.col-feature-strip__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #F1E8F6; color: var(--color-main); }
.col-feature-strip__icon svg { width: 18px; height: 18px; }
.col-feature-strip__txt { flex: 1; min-width: 0; line-height: 1.5; }
.col-feature-strip__lead { display: block; font-size: var(--fs-label); color: var(--color-dark-gray); }
.col-feature-strip__name { display: block; font-size: var(--fs-card); font-weight: 700; color: var(--color-main); }
.col-feature-strip__arrow { flex: none; display: flex; color: var(--color-main); }

/* コラムのスマホ・タブレットの追従バー（施策3。2026-11-02 本人指示）。本文の資料CTAと同じ資料を、最初の見出しを過ぎてから下に出す */
.col-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: flex; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #FFFFFF; border-top: 1px solid #F1E8F6; box-shadow: 0 -6px 20px rgba(47,28,64,.08); transform: translateY(110%); visibility: hidden; transition: transform .3s ease-out, visibility 0s .3s; }
.col-bar.is-on { transform: none; visibility: visible; transition: transform .3s ease-out; }
.col-bar__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--color-text); text-decoration: none !important; }
.col-bar__cover { flex: none; width: 76px; height: auto; border-radius: 4px; box-shadow: 0 2px 6px rgba(47,28,64,.15); }
.col-bar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.col-bar__lead { font-size: var(--fs-label); font-weight: 700; color: #C93279; line-height: 1.4; }
.col-bar__name { font-size: var(--fs-meta); font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.col-bar__btn { flex: none; padding: 10px 16px; border-radius: 999px; background: var(--color-accent); color: #FFFFFF; font-size: var(--fs-sub); font-weight: 700; line-height: 1; white-space: nowrap; }
.col-bar__x { flex: none; width: 32px; height: 32px; margin: -4px -6px -4px 2px; padding: 0; border: 0; background: none; color: #77677F; font-size: var(--fs-h3); line-height: 1; cursor: pointer; }
@media (min-width: 1024px) {
  .col-bar { display: none; }
}


/* 診断ツール（コラム本文に埋め込んだ .diag-app-wrapper。53本が同じ作り）。2026-11-04 本人OK
   白いカード・5つの選択肢・深い緑の結果の帯・記事に合う資料の枠（assets/js/column-diag.js）。監修の表示は出さない（本人「意味がない」）
   本文側のCSSより強い指定で上書きする。スライダーなどを隠すのは JS が .is-dx を付けた後だけ */
.single-column .entry-content .diag-app-wrapper:has(#answerSlider) {
    max-width: 680px;
    margin: 32px auto;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #F1E8F6;
    border-radius: 20px;
    box-shadow: 0 10px 28px rgba(111,61,156,.06);
    font-family: inherit;
    overflow: hidden;
}
.single-column .entry-content .diag-app-wrapper:has(#answerSlider) .diag-app-header {
    margin: 0;
    padding: 28px 28px 22px;
    background: linear-gradient(180deg, #FCF6FB, #FFFFFF);
    border-bottom: 1px solid #F1E8F6;
    color: #53405F;
}
.single-column .entry-content .diag-app-wrapper:has(#answerSlider) .header-title {
    margin: 0 0 6px;
    font-size: var(--fs-h3-m);
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-sub-dark);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.single-column .entry-content .diag-app-wrapper:has(#answerSlider) .header-desc {
    margin: 0;
    font-size: var(--fs-card);
    line-height: 1.7;
    color: #53405F;
    opacity: 1;
}
.single-column .entry-content .diag-app-wrapper:has(#answerSlider) .diag-supervisor-footer {
    display: none;
}
.single-column .entry-content .diag-app-wrapper:has(#answerSlider) .diag-main-card {
    padding: 28px;
    border-radius: 0;
    box-shadow: none;
}
.single-column .entry-content .diag-app-wrapper.is-dx :is(.q-icon-wrapper, .progress-label-row, .progress-container, .slider-box, #nextBtn, .result-intro-text, .score-visual-wrapper, #rankTitle) {
    display: none !important;
}
.diag-app-wrapper .dx-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.diag-app-wrapper .dx-pill {
    padding: 4px 12px;
    border: 1px solid #F8D8EB;
    border-radius: 999px;
    background: #FFFFFF;
    font-size: var(--fs-label);
    font-weight: 800;
    color: var(--color-main);
}
.diag-app-wrapper .dx-pill--solid {
    border-color: var(--color-main);
    background: var(--color-main);
    color: #FFFFFF;
}
.single-column .entry-content .diag-app-wrapper.is-dx .progress-section {
    margin-bottom: 24px;
}
.diag-app-wrapper .dx-prog {
    display: flex;
    align-items: center;
    gap: 12px;
}
.diag-app-wrapper .dx-steps {
    display: flex;
    flex: 1;
    gap: 4px;
}
.diag-app-wrapper .dx-steps i {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: #F1E8F6;
}
.diag-app-wrapper .dx-steps i.on {
    background: var(--color-main);
}
.diag-app-wrapper .dx-steps i.now {
    background: var(--color-sub-light);
}
.diag-app-wrapper .dx-count {
    font-size: var(--fs-meta);
    font-weight: 700;
    color: #53405F;
    white-space: nowrap;
}
.diag-app-wrapper .dx-count b {
    font-size: var(--fs-body);
    color: var(--color-main);
}
.diag-app-wrapper .dx-qno {
    margin-bottom: 8px;
    font-size: var(--fs-label);
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--color-main);
}
.single-column .entry-content .diag-app-wrapper.is-dx .q-title {
    min-height: 3.2em;
    margin: 0 0 24px;
    font-size: var(--fs-h3);
    font-weight: 800;
    line-height: 1.6;
    text-align: left;
    color: #53405F;
}
.diag-app-wrapper .dx-choices {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.diag-app-wrapper .dx-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 4px 12px;
    border: 1.5px solid #F1E8F6;
    border-radius: 14px;
    background: #FFFFFF;
    font: inherit;
    cursor: pointer;
    transition: border-color .2s, background-color .2s, transform .2s;
}
.diag-app-wrapper .dx-choice:hover,
.diag-app-wrapper .dx-choice:focus-visible {
    border-color: var(--color-sub-light);
    background: #FCF6FB;
}
.diag-app-wrapper .dx-choice__dot {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid #E4D8EC;
    border-radius: 50%;
}
.diag-app-wrapper .dx-choice__dot::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.diag-app-wrapper .dx-choice__t {
    font-size: var(--fs-meta);
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: #53405F;
    word-break: keep-all;
}
.diag-app-wrapper .dx-choice.is-sel {
    border-color: var(--color-main);
    background: #FCF6FB;
    transform: translateY(-2px);
}
.diag-app-wrapper .dx-choice.is-sel .dx-choice__dot {
    border-color: var(--color-main);
}
.diag-app-wrapper .dx-choice.is-sel .dx-choice__dot::after {
    background: var(--color-main);
}
.diag-app-wrapper .dx-choice.is-sel .dx-choice__t {
    color: var(--color-main);
}
.single-column .entry-content .diag-app-wrapper.is-dx .diag-action-row {
    justify-content: flex-start;
    min-height: 0;
    margin-top: 20px;
}
.single-column .entry-content .diag-app-wrapper.is-dx .diag-prev-btn {
    padding: 8px 0;
    border: 0;
    background: none;
    font-size: var(--fs-sub);
    font-weight: 700;
    color: #53405F;
}
.single-column .entry-content .diag-app-wrapper.is-dx .diag-prev-btn::before {
    content: "← ";
}
/* 結果 */
.single-column .entry-content .diag-app-wrapper.is-dx .result-score-box {
    margin-bottom: 28px;
    text-align: left;
}
.diag-app-wrapper .dx-res-head {
    position: relative;
    margin: -28px -28px 24px;
    padding: 28px;
    overflow: hidden;
    background: linear-gradient(135deg, #6F3D9C, #6F3D9C);
    color: #FFFFFF;
}
.diag-app-wrapper .dx-res-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.diag-app-wrapper .dx-res-label {
    margin-bottom: 6px;
    font-size: var(--fs-label);
    font-weight: 800;
    letter-spacing: .08em;
    opacity: .85;
}
.diag-app-wrapper .dx-res-rank {
    font-size: var(--fs-h3-m);
    font-weight: 800;
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.diag-app-wrapper .dx-score {
    white-space: nowrap;
}
.diag-app-wrapper .dx-score b {
    font-size: var(--fs-display);
    font-weight: 800;
    line-height: 1;
}
.diag-app-wrapper .dx-score span {
    margin-left: 4px;
    font-size: var(--fs-sub);
    opacity: .85;
}
.diag-app-wrapper .dx-res-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    overflow: hidden;
}
.diag-app-wrapper .dx-res-bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: #FFFFFF;
    transition: width 1s ease-out;
}
.single-column .entry-content .diag-app-wrapper.is-dx .rank-desc-display {
    margin: 0;
    font-size: var(--fs-card);
    line-height: 1.8;
    color: #53405F;
}
.single-column .entry-content .diag-app-wrapper.is-dx .analysis-title {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    font-size: var(--fs-h4);
    font-weight: 800;
    color: var(--color-sub-dark);
}
.single-column .entry-content .diag-app-wrapper.is-dx .weak-list-container {
    border-top: 1px solid #F1E8F6;
}
.single-column .entry-content .diag-app-wrapper.is-dx .weak-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    padding: 16px 0;
    border-bottom: 1px solid #F1E8F6;
}
.single-column .entry-content .diag-app-wrapper.is-dx .weak-badge-row {
    grid-row: span 2;
    margin: 2px 0 0;
}
.single-column .entry-content .diag-app-wrapper.is-dx .weak-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--fs-label);
    font-weight: 800;
    white-space: nowrap;
}
.single-column .entry-content .diag-app-wrapper.is-dx .risk-high { background: #FFF0F7; color: #C93279; }
.single-column .entry-content .diag-app-wrapper.is-dx .risk-mid { background: #FFF0F7; color: #C93279; }
.single-column .entry-content .diag-app-wrapper.is-dx .risk-low { background: #F1E8F6; color: var(--color-main); }
.single-column .entry-content .diag-app-wrapper.is-dx .weak-q-text {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.6;
    color: #53405F;
}
.single-column .entry-content .diag-app-wrapper.is-dx .weak-hint-text {
    font-size: var(--fs-sub);
    line-height: 1.7;
    color: #53405F;
}
.diag-app-wrapper .dx-cta {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 28px;
    padding: 20px;
    border: 1px solid #F8D8EB;
    border-radius: 16px;
    background: #FCF6FB;
}
.diag-app-wrapper .dx-cta__cover {
    display: block;
    transition: opacity .2s;
}
.diag-app-wrapper .dx-cta__cover:hover {
    opacity: .85;
}
.diag-app-wrapper .dx-cta__cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(111,61,156,.15);
}
.diag-app-wrapper .dx-cta__cover--plain img {
    border-radius: 0;
    box-shadow: none;
}
.single-column .entry-content .diag-app-wrapper .dx-cta p {
    margin: 0;
}
.single-column .entry-content .diag-app-wrapper .dx-cta .dx-cta__lead {
    margin-bottom: 4px;
    font-size: var(--fs-label);
    font-weight: 800;
    color: #C93279;
}
.single-column .entry-content .diag-app-wrapper .dx-cta .dx-cta__name {
    margin-bottom: 4px;
    font-size: var(--fs-h4);
    font-weight: 800;
    line-height: 1.5;
    color: var(--color-sub-dark);
}
.single-column .entry-content .diag-app-wrapper .dx-cta .dx-cta__desc {
    margin-bottom: 14px;
    font-size: var(--fs-sub);
    line-height: 1.6;
    color: #53405F;
}
.single-column .entry-content .diag-app-wrapper .dx-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--color-accent);
    box-shadow: 0 6px 16px rgba(201,50,121,.3);
    font-size: var(--fs-body);
    font-weight: 800;
    color: #FFFFFF;
    text-decoration: none;
}
.single-column .entry-content .diag-app-wrapper .dx-cta__btn::after {
    content: "→";
}
.single-column .entry-content .diag-app-wrapper.is-dx .diag-footer {
    margin-top: 20px;
}
.single-column .entry-content .diag-app-wrapper.is-dx .diag-reset-btn {
    padding: 8px;
    border: 0;
    background: none;
    font-size: var(--fs-sub);
    font-weight: 700;
    color: #53405F;
    text-decoration: underline;
}
@media (max-width: 639px) {
    .single-column .entry-content .diag-app-wrapper:has(#answerSlider) .diag-app-header {
        padding: 22px 20px 18px;
    }
    .single-column .entry-content .diag-app-wrapper:has(#answerSlider) .diag-main-card {
        padding: 22px 20px;
    }
    .diag-app-wrapper .dx-res-head {
        margin: -22px -20px 22px;
        padding: 24px 20px;
    }
    .diag-app-wrapper .dx-choices {
        grid-template-columns: 1fr;
    }
    .diag-app-wrapper .dx-choice {
        flex-direction: row;
        justify-content: flex-start;
        padding: 12px 16px;
    }
    .diag-app-wrapper .dx-choice__t {
        font-size: var(--fs-sub);
        text-align: left;
    }
    .diag-app-wrapper .dx-cta {
        grid-template-columns: 1fr;
    }
    .diag-app-wrapper .dx-cta__cover {
        max-width: 240px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .diag-app-wrapper .dx-choice,
    .diag-app-wrapper .dx-res-bar i {
        transition: none;
    }
}

/* 実機のデモ（コラム本文に埋め込んだタブレット枠＋iframe srcdoc。12本）。2026-11-04 本人OK
   サイドバーを付けて本文が狭くなり、横長の枠（幅いっぱい×高さ620px）が正方形に近くなってタブレットに見えなくなった
   PCは幅600pxで縦3:4の縦向きタブレットにする（中身は幅768px未満の並びなので縦向きと合う）。スマホは元の高さ620pxのまま */
@media (min-width: 640px) {
    .single-column .entry-content div:has(> div > div > iframe[srcdoc]) {
        max-width: 600px;
        margin-inline: auto;
    }
    .single-column .entry-content div:has(> div > div > iframe[srcdoc]) iframe[srcdoc] {
        height: auto !important;
        aspect-ratio: 3 / 4;
    }
}