@charset "UTF-8";

/* =========================================
   METHOD (メソッド・なぜ結果が出るのか) 
========================================= */
.method { 
    background: var(--primary); 
    color: var(--white); 
    position: relative; 
    overflow: hidden; 
}

.method .section-title { color: var(--white); }
.method .section-lead { color: rgba(255,255,255,0.7); }

/* 背後の透かし文字 */
.method::before {
    content: 'METHOD';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Inter', sans-serif;
    font-size: clamp(120px, 20vw, 280px);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    letter-spacing: 10px;
    pointer-events: none;
}

/* ▼▼▼ PC：オリジナルの「洗練された縦並び」に戻す！ ▼▼▼ */
.method-list {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.method-item {
    display: flex;
    gap: 32px;
    padding: 40px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08); /* 高級感のある薄い罫線 */
    align-items: flex-start;
    transition: transform 0.3s ease;
}

.method-item:last-child { 
    border-bottom: none; 
}
/* ▼▼▼ 数字（吉田さんのオリジナルデザイン） ▼▼▼ */
.method-num {
    flex-shrink: 0;
    width: 80px;
    font-family: 'Noto Serif JP', serif;
    font-size: 48px;
    font-weight: 900;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-top: 5px; /* タイトルの高さと綺麗に合わせる */
}

/* ▼▼▼ テキスト＆アイコンエリア ▼▼▼ */
.method-body {
    flex: 1;
}

.method-body h3 {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    margin-bottom: 12px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 寂しさを消すための「アイコン」は維持！ */
.method-body h3::before {
    content: '';
    flex-shrink: 0;
    width: 24px; /* アイコンを少し控えめなサイズに */
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
}

/* 各項目（01〜05）のアイコン指定（SClassレッド） */
.method-item:nth-child(1) .method-body h3::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23d32f2f" viewBox="0 0 24 24"%3E%3Cpath d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5s-3 1.34-3 3 1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"%3E%3C/path%3E%3C/svg%3E');
}
.method-item:nth-child(2) .method-body h3::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23d32f2f" viewBox="0 0 24 24"%3E%3Cpath d="M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14zm-5-3.5c1.38 0 2.5-1.12 2.5-2.5S13.38 10.5 12 10.5 9.5 11.62 9.5 13s1.12 2.5 2.5 2.5zM12 2H8.5c-.28 0-.5.22-.5.5s.22.5.5.5h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5H12z"%3E%3C/path%3E%3C/svg%3E');
}
.method-item:nth-child(3) .method-body h3::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23d32f2f" viewBox="0 0 24 24"%3E%3Cpath d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm1.42 13.51a5.98 5.98 0 01-5.42-.71l-1.46 1.46C7.96 19.54 9.42 20 11 20h2v-2h-.58c1.32 0 2.58-.33 3.68-.96l-1.47-1.47zM4 12c0 1.01.25 1.97.7 2.8L3.24 16.26C2.46 14.97 2 13.53 2 12c0-4.42 3.58-8 8-8h2v2h-.58C10.1 6 8.84 6.33 7.74 6.96l1.46 1.46c-1.15.83-1.95 1.96-1.95 3.42h-.01c0 .01.01.02.01.03z"%3E%3C/path%3E%3C/svg%3E');
}
.method-item:nth-child(4) .method-body h3::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23d32f2f" viewBox="0 0 24 24"%3E%3Cpath d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM12.5 13H11v3h-2v3h6v-2h-1.5zM12 6.13a2.38 2.38 0 00-1.78.78c-.28.28-.56.63-.78 1.03-.23.4-.41.87-.53 1.4-.11.53-.18 1.1-.18 1.68v.03h2.1c0-.46.06-.9.18-1.32.11-.42.26-.8.44-1.12.18-.32.4-.58.65-.77.26-.19.54-.28.84-.28s.58.11.84.32c.26.22.48.51.65.88.17.38.3.79.41 1.25.11.46.16.9.16 1.34h2.1v-.01c0-.58-.07-1.15-.19-1.68-.11-.53-.31-1.02-.56-1.47s-.56-.81-.91-1.1c-.35-.29-.75-.44-1.2-.44zm-.5 1.7c1.38 0 2.5-1.12 2.5-2.5S12.88 2.83 11.5 2.83 9 3.95 9 5.33s1.12 2.5 2.5 2.5z"%3E%3C/path%3E%3C/svg%3E');
}
.method-item:nth-child(5) .method-body h3::before {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23d32f2f" viewBox="0 0 24 24"%3E%3Cpath d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5-10-5-10 5z"%3E%3C/path%3E%3C/svg%3E');
}

.method-body p {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 2;
}

/* ▼▼▼ スマホ対応（良い感じだった調整を残す） ▼▼▼ */
@media (max-width: 640px) {
    .method-item { 
        flex-direction: column; 
        gap: 16px; 
        padding: 32px 0;
    }
    .method-num { 
        font-size: 40px; 
        width: auto;
        margin-top: 0;
    }
    .method-body h3 {
        font-size: 18px;
    }
    .method-body h3::after {
        width: 20px;
        height: 20px;
    }
}