* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        body {
          font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
          line-height: 1.6;
          color: #333;
          background-color: #fff;
        }
        .header {
          /* background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); */
          /* color: white; */
          /* padding: 20px 0; */
          /* box-shadow: 0 2px 10px rgba(0,0,0,0.1); */
        }
        .header-content {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .logo {
          font-size: 28px;
          font-weight: 700;
          background: linear-gradient(135deg, #ff1744 0%, #ff6b9d 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        .page-title {
          text-align: center;
          padding: 50px 20px;
          background: #fff;
          border-bottom: 1px solid #e0e0e0;
        }
        .page-title h1 {
          font-size: 38px;
          font-weight: 700;
          margin-bottom: 15px;
          color: #1a1a1a;
          letter-spacing: 2px;
        }
        .page-title p {
          font-size: 16px;
          color: #666;
          font-weight: 400;
          letter-spacing: 1px;
        }
        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 40px 20px;
        }
        .intro-section {
          background: linear-gradient(135deg, #fff5f8 0%, #f0f8ff 100%);
          border-left: 4px solid #ff1744;
          padding: 30px;
          margin-bottom: 50px;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        .intro-section h2 {
          color: #ff1744;
          font-size: 20px;
          margin-bottom: 15px;
          font-weight: 600;
        }
        .intro-section p {
          color: #555;
          line-height: 1.8;
          margin-bottom: 0;
        }
        .intro-section .back-to-toc {
          margin-top: 20px;
        }
        .back-to-toc {
          display: inline-flex;
          align-items: center;
          margin-top: 30px;
          padding: 10px 20px;
          background: #f8f9fa;
          border: 1px solid #e0e0e0;
          border-radius: 4px;
          text-decoration: none;
          color: #666;
          font-size: 14px;
          font-weight: 500;
          transition: all 0.3s ease;
        }
        .back-to-toc:hover {
          background: #fff;
          border-color: #ff1744;
          color: #ff1744;
          transform: translateY(-2px);
          box-shadow: 0 2px 8px rgba(255, 23, 68, 0.15);
        }
        .back-to-toc::before {
          content: '↑';
          margin-right: 8px;
          font-size: 16px;
        }
        .more-faq-button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin-top: 30px;
          padding: 15px 40px;
          background: linear-gradient(135deg, #ff1744 0%, #ff6b9d 100%);
          border: none;
          border-radius: 30px;
          text-decoration: none;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
          transition: all 0.3s ease;
          box-shadow: 0 4px 15px rgba(255, 23, 68, 0.3);
          cursor: pointer;
        }
        .more-faq-button:hover {
          background: linear-gradient(135deg, #e91e63 0%, #ff8fab 100%);
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(255, 23, 68, 0.4);
        }
        .more-faq-button::after {
          content: '→';
          margin-left: 10px;
          font-size: 18px;
          transition: transform 0.3s ease;
        }
        .more-faq-button:hover::after {
          transform: translateX(5px);
        }
        .toc-section {
          border-radius: 8px;
          margin: 40px 0 0;
        }
        .toc-section h2 {
          color: #1a1a1a;
          font-size: 22px;
          margin-bottom: 20px;
          font-weight: 600;
          padding-bottom: 10px;
          border-bottom: 2px solid #e0e0e0;
        }
        .toc-list {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .toc-list li {
          margin-bottom: 12px;
        }
        .toc-list li:last-child {
          margin-bottom: 0;
        }
        .toc-list a {
          display: flex;
          align-items: center;
          padding: 12px 15px;
          background: #f8f9fa;
          border-left: 3px solid #ff1744;
          border-radius: 4px;
          text-decoration: none;
          color: #333;
          font-weight: 500;
          transition: all 0.3s ease;
        }
        .toc-list a:hover {
          border-left-width: 5px;
          padding-left: 20px;
          color: #ff1744;
        }
        .toc-list a::before {
          content: 'â–¶';
          color: #ff1744;
          font-size: 12px;
          margin-right: 12px;
        }
        .section {
          margin-bottom: -30px;
        }
        .section-title {
          font-size: 28px;
          font-weight: 600;
          color: #1a1a1a;
          margin-bottom: 30px;
          padding-bottom: 15px;
          border-bottom: 3px solid #ff1744;
          position: relative;
        }
        .section-title::after {
          content: '';
          position: absolute;
          bottom: -3px;
          left: 0;
          width: 80px;
          height: 3px;
        }
        .info-box {
          border-radius: 4px;
          padding: 12px 18px;
          margin-bottom: -17px;
          font-size: 14px;
          color: #666;
          line-height: 1.7;
        }
        .info-box p {
          color: #555;
          font-size: 14px;
          margin-bottom: 8px;
        }
        .info-box p:last-child {
          margin-bottom: 0;
        }
        .info-box ul {
          margin: 8px 0 0 20px;
          color: #555;
          font-size: 14px;
        }
        .info-box ul li {
          margin-bottom: 4px;
          line-height: 1.7;
        }
        .tab-info-box {
          padding: 10px 20px;
          margin-bottom: 25px;
          border-radius: 4px;
          line-height: 1.8;
          background: #f7f7f7;
          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
        }
        .table-wrapper {
          width: 100%;
          overflow-x: auto;
          margin-bottom: 20px;
          border-radius: 8px;
          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
        }
        .comparison-table {
          width: 100%;
          min-width: 800px;
          border-collapse: collapse;
          background: white;
        }
        .comparison-table thead {
          background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
          color: white;
        }
        .comparison-table th {
          padding: 18px 15px;
          text-align: center;
          font-weight: 600;
          font-size: 15px;
          border-right: 1px solid rgba(255, 255, 255, 0.1);
        }
        .comparison-table th:last-child {
          border-right: none;
        }
        .comparison-table td {
          padding: 18px 15px;
          text-align: center;
          border-bottom: 1px solid #e0e0e0;
          border-right: 1px solid #e0e0e0;
        }
        .comparison-table td:last-child {
          border-right: none;
        }
        .comparison-table tbody tr:nth-child(even) {
          background: #f9f9f9;
        }
        .comparison-table tbody tr:hover {
          background: #fff5f8;
        }
        .comparison-table td:first-child {
          font-weight: 600;
          color: #1a1a1a;
          text-align: left;
          background: #fafafa;
        }
        .badge-yes {
          display: inline-block;
          background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
          color: white;
          padding: 5px 12px;
          border-radius: 20px;
          font-size: 13px;
          font-weight: 500;
        }
        .badge-no {
          display: inline-block;
          background: linear-gradient(135deg, #f44336 0%, #e57373 100%);
          color: white;
          padding: 5px 12px;
          border-radius: 20px;
          font-size: 13px;
          font-weight: 500;
        }
        .tabs {
          display: flex;
          gap: 0;
          margin-bottom: 30px;
          border-bottom: 2px solid #e0e0e0;
          flex-wrap: nowrap;
          overflow-x: auto;
        }
        .tab-button {
          padding: 15px 30px;
          background: #f5f5f5;
          border: none;
          cursor: pointer;
          font-size: 16px;
          font-weight: 500;
          margin-top: 30px;
          color: #666;
          transition: all 0.3s ease;
          border-bottom: 3px solid transparent;
          font-family: 'Noto Sans JP', sans-serif;
        }
        .tab-button:hover {
          background: #fff;
          color: #ff1744;
        }
        .tab-button.active {
          background: #fff;
          color: #ff1744;
          margin-top: 30px;
          border-bottom: 3px solid #ff1744;
          font-weight: 600;
        }
        .tab-content {
          display: none;
          animation: fadeIn 0.3s ease;
        }
        .tab-content.active {
          display: block;
        }
        button.tab-button.link {
          all: unset;
          /* padding: 0px 0px 0 20px; */
          /* color: #dc143c; */
          cursor: pointer;
          border-bottom: 2px solid transparent;
        }
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .step {
          background: #fff;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          padding: 18px 20px;
          margin-bottom: 15px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          transition: all 0.3s ease;
          position: relative;
          height: auto;
          min-height: 200px;
        }
        .step:hover {
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }
        .step-header {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
        }
        .step-number {
          display: inline-block;
          background: linear-gradient(135deg, #ff1744 0%, #ff6b9d 100%);
          color: white;
          width: 32px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          border-radius: 50%;
          font-weight: 600;
          margin-right: 12px;
          font-size: 16px;
          flex-shrink: 0;
        }
        .step h3 {
          font-size: 17px;
          font-weight: 600;
          color: #1a1a1a;
          margin: 0;
        }
        .step-content {
          display: flex;
          gap: 20px;
          align-items: flex-start;
        }
        .step-text {
          flex: 1;
          min-width: 0;
        }
        .step-text p {
          color: #555;
          line-height: 1.7;
          margin: 0;
          font-size: 14px;
        }
        .step-text li {
          color: #555;
          line-height: 1.7;
          margin: 0;
          font-size: 14px;
        }
        .screenshot-placeholder {
          flex: 0 0 350px;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          background: none;
          border: none;
          padding: 0;
        }
        .screenshot-placeholder img {
          width: 50%;
          height: auto;
          border-radius: 5px;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
          margin: 0 5px;
        }
        .screenshot-placeholder img {
          height: auto;
          border-radius: 5px;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
          display: block;
        }
        .screenshot-placeholder {
          display: flex;
          gap: 16px;
          align-items: center;
        }
        .screenshot-placeholder figure {
          flex: 1;
          margin: 0;
        }
        .screenshot-placeholder figure img {
          width: 100%;
        }
        details {
          /* --------アコーディオンの中身のスタイル-------- */
          &::details-content {
            transition: height 0.4s, opacity 0.4s, content-visibility 0.4s allow-discrete;
            height: 0;
            opacity: 0;
            overflow: clip;
            background-color: #f5f5f5;
          }
          /* --------アコーディオンの中身のスタイル（開いている時）-------- */
          &[open]::details-content {
            opacity: 1;
          }
          /* アコーディオンが開いた時のスタイル */
          &[open] .icon {
            transform: rotate(180deg);
          }
        }
        @supports (interpolate-size: allow-keywords) {
          :root {
            interpolate-size: allow-keywords; /* height:0（数値型） → auto（文字型） のアニメーションを可能にするための指定 */
          }
          details[open]::details-content {
            height: auto;
          }
        }
        @supports not (interpolate-size: allow-keywords) {
          details[open]::details-content {
            height: 150px;
            overflow-y: scroll; /* 溢れる場合はスクロール可能にする */
          }
        }
        summary {
          font-weight: bold;
          cursor: pointer;
        }
        .contact-accordion {
          border: 1px solid #ccc;
          border-radius: 12px;
          margin: 20px 10px;
          overflow: hidden;
          background: #fff;
        }
        /* タイトル */
        .contact-accordion__title {
          list-style: none;
          cursor: pointer;
          padding: 15px 20px;
          font-size: 18px;
          font-weight: bold;
          display: flex;
          border-radius: 12px;
          align-items: center;
          box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
        }
        .contact-accordion__title::-webkit-details-marker {
          display: none;
        }
        /* 先頭マーク */
        .mark {
          color: rgb(255, 99, 71);
          margin-right: 6px;
        }
        /* 三角アイコン */
        .contact-accordion__arrow {
          transform: rotate(90deg);
          margin-left: auto;
          width: 0;
          height: 0;
          border-left: 7px solid #333;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
          transition: transform 0.3s ease;
        }
        .contact-accordion[open] .contact-accordion__arrow {
          transform: rotate(270deg);
        }
        /* 開閉アニメーション */
        .contact-accordion__content {
          overflow: hidden;
          max-height: 0;
          opacity: 0;
          padding: 20px;
          border-radius: 12px;
          transition:
            max-height 0.4s ease, opacity 0.3s ease;
        }
        .contact-accordion[open] .contact-accordion__content {
          max-height: 1000px;
          opacity: 1;
          padding-bottom: 20px;
          background: #fafafa;
          border-radius: 0 0 12px;
          box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
        }
        /* 装飾 */
        .contact-bold {
          font-weight: bold;
        }
        .contact-underline {
          text-decoration: underline;
        }
        /* caption */
        figcaption {
          font-size: 11px;
          text-align: center;
          margin-bottom: 4px;
        }
        .tv_img img {
          width: 100%;
        }
        h3.label {
          font-size: 17px;
          font-weight: 600;
          display: inline-block;
          background: linear-gradient(135deg, #ff1744 0%, #ff6b9d 100%);
          color: white;
          padding: 10px;
          border-radius: 30px;
          margin: 10px 0;
        }
        h3.label_a {
          font-size: 23px;
          font-weight: 600;
          display: inline-block;
          background: linear-gradient(135deg, #ff1744 0%, #ff6b9d 100%);
          color: white;
          padding: 10px;
          border-radius: 10px;
          margin: 11px 0;
          transition: all 0.3s ease;
        }
        .sp_color {
          background: linear-gradient(135deg, #ffad17 0%, #ff6b9d 100%) !important
        }
        .pc_color {
          background: linear-gradient(135deg, #3b17ff 0%, #ff6b9d 100%) !important;
        }
        .column2 {
          display: flex;
          justify-content: center;
          gap: 6%;
        }
        .TV_fiex {
          display: flex;
          gap: 16px;
          flex-direction: column;
        }
        .web_fiex {
          width: 100%;
          display: flex;
          gap: 10px;
          flex-direction: column;
          align-items: center;
        }
        h3.label_a:hover {
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          transform: translateY(-2px);
        }
        .faq-item {
          margin-bottom: 15px;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          overflow: hidden;
          background: #fff;
          transition: all 0.3s ease;
        }
        .faq-item:hover {
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
        .faq-question {
          background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
          padding: 20px 25px;
          cursor: pointer;
          font-weight: 600;
          color: #1a1a1a;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: all 0.3s ease;
          font-size: 16px;
        }
        .faq-question:hover {
          color: #ff1744;
        }
        .faq-question::after {
          content: 'â–¼';
          font-size: 12px;
          color: #ff1744;
          transition: transform 0.3s ease;
        }
        .faq-question.active::after {
          transform: rotate(180deg);
        }
        .faq-answer {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease, padding 0.3s ease;
          background: #fff;
        }
        .faq-answer.active {
          max-height: 500px;
          padding: 20px 25px;
          border-top: 1px solid #e0e0e0;
        }
        .faq-answer p {
          color: #555;
          line-height: 1.8;
        }
        .contact-grid {
          display: flex;
          flex-direction: column;
          gap: 15px;
        }
        .contact-card {
          background: #fff;
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          overflow: hidden;
          transition: all 0.3s ease;
        }
        .contact-card:hover {
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
        .contact-header {
          background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
          padding: 20px 25px;
          cursor: pointer;
          font-weight: 600;
          color: #1a1a1a;
          display: flex;
          justify-content: space-between;
          align-items: center;
          transition: all 0.3s ease;
          font-size: 18px;
        }
        .contact-header:hover {
          background: linear-gradient(135deg, #fff5f8 0%, #f0f8ff 100%);
          color: #ff1744;
        }
        .contact-header::after {
          content: 'â–¼';
          font-size: 12px;
          color: #ff1744;
          transition: transform 0.3s ease;
        }
        .contact-header.active::after {
          transform: rotate(180deg);
        }
        .contact-content {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease, padding 0.3s ease;
          background: #fff;
        }
        .contact-content.active {
          max-height: 600px;
          padding: 20px 25px;
          border-top: 1px solid #e0e0e0;
        }
        .contact-info {
          margin-bottom: 20px;
        }
        .contact-info:last-child {
          margin-bottom: 0;
        }
        .contact-info strong {
          display: block;
          color: #ff1744;
          margin-bottom: 8px;
          font-weight: 600;
        }
        .contact-info p {
          color: #555;
          line-height: 1.8;
        }
        .footer {}
        .footer-content {
          max-width: 1200px;
          margin: 0 auto;
          text-align: center;
        }
        .footer-links {
          display: flex;
          justify-content: center;
          gap: 30px;
          flex-wrap: wrap;
          margin-bottom: 20px;
        }
        .footer-links a {
          color: #ccc;
          text-decoration: none;
          transition: color 0.3s ease;
          font-size: 14px;
        }
        .footer-links a:hover {
          color: #ff6b9d;
        }
        .copyright {
          color: #999;
          font-size: 13px;
          padding-top: 20px;
          border-top: 1px solid #555;
        }
        section.common_footer_section_faq.faq_section {
          margin-top: -10px;
        }
        @media (max-width: 600px) {
          .step {
            height: auto;
            min-height: 200px;
          }
          .step-content {
            position: static;
            flex-direction: column;
            gap: 15px !important;
          }
          .step-text {
            padding-top: 0;
            width: 250px;
            margin: auto;
          }
          .screenshot-placeholder {
            flex: 0 0 auto;
            width: 100%;
            min-height: 150px;
            align-self: auto;
          }
        }
        @media (max-width: 768px) {
          h3.label_a {
            font-size: 13px !important;
            padding: 7px !important;
          }
          .column2 {
            gap: 2% !important;
          }
          h3.label {
            font-size: 12px !important;
          }
          .page-title {
            padding: 40px 20px;
          }
          .page-title h1 {
            font-size: 28px;
            letter-spacing: 1px;
          }
          .page-title p {
            font-size: 14px;
          }
          .section-title {
            font-size: 22px;
          }
          .tab-button {
            font-size: 14px;
            padding: 15px 20px;
            white-space: nowrap;
          }
          .comparison-table {
            font-size: 13px;
          }
          .comparison-table th, .comparison-table td {
            padding: 12px 8px;
          }
          .toc-section {
            padding: 1px;
          }
          .toc-list a {
            font-size: 14px;
            padding: 10px 12px;
          }
          .intro-section {
            padding: 20px;
          }
          .info-box {
            padding: 12px 15px;
          }
          .tab-info-box {
            padding: 12px 15px;
          }
          .contact-header {
            font-size: 15px;
            padding: 15px;
            word-wrap: break-word;
            word-break: break-word;
          }
          .contact-content.active {
            max-height: 1000px;
            padding: 15px;
          }
          .contact-info {
            margin-bottom: 15px;
          }
          .contact-info strong {
            font-size: 14px;
          }
          .contact-info p {
            font-size: 13px;
            word-wrap: break-word;
          }
          .faq-question {
            font-size: 14px;
            padding: 15px;
            word-wrap: break-word;
            word-break: break-word;
          }
          .faq-answer.active {
            max-height: 800px;
            padding: 15px;
          }
          .faq-answer p {
            font-size: 14px;
            word-wrap: break-word;
          }
        }