/* 比較セクション */
.comparison-section {
    background-color: #F8F9FA;
    padding: 4.5vw 0;
}

.comparison-section .container {
    max-width: 72vw;
    margin: 0 auto;
}

/* 見出し */
.comparison-heading {
    font-size: 1.8vw;
    font-weight: bold;
    color: var(--black);
    text-align: center;
    margin-bottom: 1.8vw;
    line-height: 1.3;
}

/* 表のコンテナ */
.comparison-table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 3vw;
}

/* 表 */
.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.6vw;
    margin: 0 auto;
}

.comparison-table td {
    padding: 1.7vw;
    vertical-align: middle;
    text-align: center;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 1列目1段目（空のセル）はシャドウなし */
.comparison-table tr:first-child td:first-child {
    box-shadow: none;
}

/* 1列目のスタイル */
.comparison-table .col1 {
    background-color: #FFF5D5;
    border: 2px solid #FAC922;
    width: 16.67%;
}

.comparison-table .col1-row2 {
    border-top-left-radius: 0.8vw;
}

.comparison-table .col1-row4 {
    border-bottom-left-radius: 0.8vw;
}

.comparison-table .col1 .english {
    font-family: 'Futura', 'Arial Black', 'Arial', sans-serif;
    font-size: 1.1vw;
    color: #F47F2D;
    font-weight: bold;
    display: block;
    margin-bottom: 0.2vw;
}

.comparison-table .col1 .japanese {
    font-size: 1.54vw;
    color: var(--black);
    font-weight: bold;
}

/* 2列目のスタイル */
.comparison-table .col2 {
    width: 33.33%;
}

.comparison-table .col2-row1 {
    background-color: #FFF5D5;
    border: 2px solid #FAC922;
    border-top-left-radius: 0.8vw;
    font-size: 1.21vw;
    color: var(--black);
    font-weight: bold;
}

.comparison-table .col2-content {
    background-color: white;
    font-size: 1.1vw;
    color: var(--black);
    font-weight: normal;
    line-height: 1.5;
    text-align: left;
}

/* 3列目のスタイル */
.comparison-table .col3 {
    width: 50%;
}

.comparison-table .col3-row1 {
    background-color: #F47F2D;
    border: 2px solid #F47F2D;
    border-top-right-radius: 0.8vw;
    font-size: 1.32vw;
    color: white;
    font-weight: bold;
}

.comparison-table .col3-content {
    background-color: #FFF6EF;
    border: 2px solid #FFF6EF;
    font-size: 1.2vw;
    color: var(--black);
    font-weight: bold;
    line-height: 1.5;
    text-align: left;
    padding: 0;
}

/* 3列目の内部カラム構造 */
.col3-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 1.7vw;
}

.col3-image-column {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col3-text-column {
    flex: 3;
    padding-left: 1vw;
}

.col3-image {
    width: 50%;
    height: auto;
    max-width: 100%;
}

.comparison-table .col3-row4 {
    border-bottom-right-radius: 0.8vw;
}

/* 強調テキスト */
.comparison-highlight {
    color: #F47F2D;
    font-size: 1.2vw;
    font-weight: bold;
}

/* 小見出しエリア */
.comparison-summary {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.comparison-summary-header {
    background-color: #FFF2E8;
    padding: 2.1vw;
    text-align: center;
    border-top-left-radius: 0.8vw;
    border-top-right-radius: 0.8vw;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comparison-summary-title {
    font-size: 1.44vw;
    color: var(--black);
    font-weight: 600;
    margin: 0;
}

.comparison-summary-content {
    background-color: white;
    padding: 2.8vw;
    text-align: center;
    border-bottom-left-radius: 0.8vw;
    border-bottom-right-radius: 0.8vw;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comparison-summary-text {
    font-size: 1.98vw;
    color: #F47F2D;
    font-weight: bold;
    margin: 0;
    line-height: 1.3;
}

/* 画像配置 */
.comparison-image-1 {
    position: absolute;
    top: 4vw;
    right: 2vw;
    width: 8.5vw;
    height: auto;
    z-index: 10;
}

.comparison-image-2 {
    position: absolute;
    top: 3vw;
    left: 2vw;
    width: 8.5vw;
    height: auto;
    z-index: 10;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .comparison-section {
        padding: 13.5vw 0;
    }
    
    .comparison-section .container {
        max-width: 216vw;
    }
    
    .comparison-heading {
        font-size: 5.4vw;
        margin-bottom: 5.4vw;
        line-height: 1.3;
    }
    
    .comparison-heading br {
        display: block;
    }
    
    .comparison-table {
        border-spacing: 1.8vw;
    }
    
    .comparison-table td {
        padding: 5.1vw;
    }
    
    .comparison-table .col1-row2 {
        border-top-left-radius: 2.4vw;
    }
    
    .comparison-table .col1-row4 {
        border-bottom-left-radius: 2.4vw;
    }
    
    .comparison-table .col1 .english {
        font-size: 3.3vw;
        margin-bottom: 0.6vw;
    }
    
    .comparison-table .col1 .japanese {
        font-size: 4.62vw;
    }
    
    .comparison-table .col2-row1 {
        border-top-left-radius: 2.4vw;
        font-size: 3.63vw;
    }
    
    .comparison-table .col2-content {
        font-size: 3.3vw;
        line-height: 1.5;
    }
    
    .comparison-table .col3-row1 {
        border-top-right-radius: 2.4vw;
        font-size: 3.96vw;
    }
    
    .comparison-table .col3-content {
        font-size: 3.6vw;
        line-height: 1.5;
    }
    
    .col3-inner {
        padding: 5.1vw;
    }
    
    .col3-text-column {
        padding-left: 3vw;
    }
    
    .comparison-table .col3-row4 {
        border-bottom-right-radius: 2.4vw;
    }
    
    .comparison-highlight {
        font-size: 3.6vw;
    }
    
    .comparison-summary-header {
        padding: 6.3vw;
        border-top-left-radius: 2.4vw;
        border-top-right-radius: 2.4vw;
    }
    
    .comparison-summary-title {
        font-size: 4.32vw;
    }
    
    .comparison-summary-content {
        padding: 8.4vw;
        border-bottom-left-radius: 2.4vw;
        border-bottom-right-radius: 2.4vw;
    }
    
    .comparison-summary-text {
        font-size: 5.94vw;
        line-height: 1.3;
    }
    
    .comparison-image-1 {
        top: -32vw;
        right: 6vw;
        width: 25.5vw;
    }
    
    .comparison-image-2 {
        top: -34vw;
        left: 6vw;
        width: 25.5vw;
    }
}

@media (max-width: 576px) {
    .comparison-section {
        padding: 13.5vw 0;
    }
    
    .comparison-heading {
        font-size: 5.4vw;
        margin-bottom: 5.4vw;
    }
    
    .comparison-table-container {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin-bottom: 40vw;
    }
    
    .comparison-table {
        min-width: 150vw;
        border-spacing: 1.8vw;
    }
    
    .comparison-table td {
        padding: 5.1vw;
    }
    
    .comparison-table .col1 {
        width: 16.67%;
    }
    
    .comparison-table .col2 {
        width: 33.33%;
    }
    
    .comparison-table .col3 {
        width: 50%;
    }
    
    .comparison-table .col1 .english {
        font-size: 3.3vw;
    }
    
    .comparison-table .col1 .japanese {
        font-size: 4.62vw;
    }
    
    .comparison-table .col2-row1 {
        font-size: 3.63vw;
    }
    
    .comparison-table .col2-content {
        font-size: 3.3vw;
    }
    
    .comparison-table .col3-row1 {
        font-size: 3.96vw;
    }
    
    .comparison-table .col3-content {
        font-size: 3.6vw;
    }
    
    .col3-inner {
        padding: 5.1vw;
    }
    
    .col3-text-column {
        padding-left: 3vw;
    }
    
    .comparison-highlight {
        font-size: 3.6vw;
    }
    
    .comparison-summary-title {
        font-size: 4.32vw;
    }
    
    .comparison-summary-text {
        font-size: 5.94vw;
    }
    
    .comparison-summary {
        width: 94vw;
        margin: 0 auto;
    }
    
    .comparison-image-1,
    .comparison-image-2 {
        width: 25.5vw;
    }
}