@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* math-article-common.css */
.math-article{
 max-width: 800px; 
 margin: 0 auto; 
 font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; 
 line-height: 1.8; color: #333;
 background-color: #FFFDF7;
 padding: 2rem 1.5rem;
 box-sizing: border-box;
}
    .math-article {
      background-color: #FFFDF7;
      padding: 2rem 1.5rem;
      box-sizing: border-box;
    }
    .math-article * {
      box-sizing: border-box;
    }
    .math-article h1 {
      font-size: 1.75rem;
      color: #2D3748;
      border-bottom: 3px solid #4299E1;
      padding-bottom: 0.75rem;
      margin-bottom: 1.5rem;
    }
    .math-article h2 {
      font-size: 1.35rem;
      color: #2D3748;
      margin-top: 2.5rem;
      margin-bottom: 1rem;
      padding-left: 0.75rem;
      border-left: 4px solid #48BB78;
    }
    .math-article h3 {
      font-size: 1.15rem;
      color: #2D3748;
      margin-top: 1.5rem;
      margin-bottom: 0.75rem;
    }
    .math-article p {
      margin-bottom: 1rem;
      max-width: 100%;
    }
    .math-article .intro-box {
      background: linear-gradient(135deg, #EBF8FF 0%, #E6FFFA 100%);
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 2rem;
    }
    .math-article .intro-meta {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 1rem;
      font-size: 0.9rem;
      color: #4A5568;
    }
    .math-article .intro-meta span {
      background: #fff;
      padding: 0.25rem 0.75rem;
      border-radius: 20px;
    }
    .math-article .goal-box {
      background: #F0FFF4;
      border: 2px solid #48BB78;
      border-radius: 12px;
      padding: 1rem 1.5rem;
      margin: 1.5rem 0;
    }
    .math-article .goal-box::before {
      content: "🎯 このセクションのゴール";
      display: block;
      font-weight: bold;
      color: #276749;
      margin-bottom: 0.5rem;
    }
    .math-article .step-container {
      background: #fff;
      border-radius: 12px;
      padding: 1.5rem;
      margin: 1.5rem 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .math-article .step {
      display: flex;
      align-items: flex-start;
      margin-bottom: 1rem;
      gap: 1rem;
    }
    .math-article .step:last-child {
      margin-bottom: 0;
    }
    .math-article .step-number {
      background: #4299E1;
      color: #fff;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      flex-shrink: 0;
    }
    .math-article .step-content {
      flex: 1;
      padding-top: 0.25rem;
    }
    .math-article .point-box {
      background: #FFFBEB;
      border-left: 4px solid #ED8936;
      border-radius: 0 12px 12px 0;
      padding: 1rem 1.5rem;
      margin: 1.5rem 0;
    }
    .math-article .point-box::before {
      content: "💡 ポイント";
      display: block;
      font-weight: bold;
      color: #C05621;
      margin-bottom: 0.5rem;
    }
    .math-article .svg-container {
      background: #fff;
      border-radius: 12px;
      padding: 1rem;
      margin: 1.5rem 0;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .math-article .svg-container svg {
      max-width: 100%;
      height: auto;
    }
    .math-article .control-btn {
      background: #4299E1;
      color: #fff;
      border: none;
      padding: 0.5rem 1.5rem;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      margin: 0.5rem 0.25rem;
      transition: background 0.2s;
    }
    .math-article .control-btn:hover {
      background: #3182CE;
    }
    .math-article .control-btn:focus {
      outline: 3px solid #90CDF4;
      outline-offset: 2px;
    }
    .math-article .practice-section {
      background: #EBF8FF;
      border-radius: 12px;
      padding: 1.5rem;
      margin: 2rem 0;
    }
    .math-article .practice-section h3 {
      color: #2B6CB0;
      margin-top: 0;
    }
    .math-article .practice-problem {
      background: #fff;
      border-radius: 8px;
      padding: 1rem 1.5rem;
      margin: 1rem 0;
    }
    .math-article details {
      margin-top: 0.75rem;
    }
    .math-article summary {
      background: #4299E1;
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
      display: inline-block;
    }
    .math-article summary:hover {
      background: #3182CE;
    }
    .math-article .answer-content {
      background: #F7FAFC;
      border-radius: 8px;
      padding: 1rem;
      margin-top: 0.75rem;
      border: 1px solid #E2E8F0;
    }
    .math-article .equation-block {
      font-family: 'Times New Roman', serif;
      font-size: 1.2rem;
      text-align: center;
      margin: 1rem 0;
      line-height: 2;
    }
    .math-article .insight-section {
      background: linear-gradient(135deg, #FED7E2 0%, #FEEBC8 100%);
      border-radius: 12px;
      padding: 1.5rem;
      margin: 2rem 0;
    }
    .math-article .drill-section {
      background: linear-gradient(135deg, #C6F6D5 0%, #B2F5EA 100%);
      border-radius: 12px;
      padding: 2rem;
      margin: 2rem 0;
      text-align: center;
    }
    .math-article .drill-features {
      text-align: left;
      max-width: 500px;
      margin: 1.5rem auto;
    }
    .math-article .drill-features li {
      margin-bottom: 0.75rem;
      padding-left: 0.5rem;
    }
    .math-article .cta-button {
      display: inline-block;
      background: #48BB78;
      color: #fff;
      text-decoration: none;
      padding: 1rem 2rem;
      border-radius: 8px;
      font-size: 1.1rem;
      font-weight: bold;
      transition: background 0.2s, transform 0.2s;
      min-height: 44px;
    }
    .math-article .cta-button:hover {
      background: #38A169;
      transform: translateY(-2px);
    }
    .math-article .cta-button:focus {
      outline: 3px solid #9AE6B4;
      outline-offset: 2px;
    }
    .math-article .cta-small {
      color: #2F855A;
      text-decoration: underline;
      font-weight: bold;
    }
    .math-article .cta-small:hover {
      color: #276749;
    }
    .math-article .closing-section {
      background: #F7FAFC;
      border-radius: 12px;
      padding: 1.5rem;
      margin-top: 2rem;
      border: 2px solid #E2E8F0;
    }
    .math-article .target-list {
      background: #fff;
      border-radius: 8px;
      padding: 1rem 1.5rem;
      margin: 1rem 0;
    }
    .math-article .target-list li {
      margin-bottom: 0.5rem;
    }
    .math-article .note-text {
      font-size: 0.9rem;
      color: #718096;
      margin-top: 0.75rem;
    }
    @keyframes fadeInStep {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes highlight {
      0%, 100% { fill: #2D3748; }
      50% { fill: #4ECDC4; }
    }
    @keyframes scaleBalance {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(-5deg); }
      100% { transform: rotate(0deg); }
    }
/* 以下省略（今回の出力からコピー） */