/* ===============================================
   About Page Styles
   Mobile First Approach - Single breakpoint at 1200px
   =============================================== */

/* ===============================================
   Base styles (Mobile < 1200px)
   =============================================== */

/* Background container with images */
.background-container {
    background-image: url('../images/简介背景1.png'),
        url('../images/简介背景2.png');
    background-repeat: no-repeat, no-repeat;
    background-position: top, bottom;
    background-size: 100% auto, 100% auto;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    padding: 16px;
    padding-bottom: 40px;
    padding-top: 60px;
}

/* Company title area */
.company-title-container {
    margin-top: 0;
    margin-bottom: 0;
    text-align: right;
    font-size: 20px;
    display: flex;
    flex-direction: column;
}

.company-title-wrapper {
    display: flex;
    justify-content: center;
}

.company-title {
    padding-top: 24px;
    color: #0d73bb;
    font-size: 24px;
    text-align: center;
    padding-right: 16px;
}

.title-spacer {
    display: none;
}

.company-slogan-wrapper {
    display: flex;
    justify-content: flex-end;
}

.company-slogan {
    font-style: italic;
    color: #0d73bb;
    padding: 8px 16px;
}

.slogan-prefix {
    display: inline;
}

.stripe-decoration {
    display: none;
}

/* Content container */
.content-container {
    max-width: 100%;
    margin: 0;
    padding: 0 8px;
    font-size: 18px;
}

/* Content sections */
.content-section-introduction {
    position: relative;
    border: 2px solid #60a5fa;
    padding: 16px;
    margin: 16px 0;
}

.content-section {
    position: relative;
    padding: 16px;
    margin: 16px 0;
}

/* Section titles */
.section-title {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    background: none;

    color: #0d73bb;
    font-size: 18px;
    margin-bottom: 16px;
    text-align: left;
}

/* Paragraphs */
.paragraph {
    text-indent: 16px;
    line-height: 28px;
    font-size: 16px;
}

/* Images */
.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Scenario images */
.scenario-images {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.scenario-images img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Text colors */
.text-blue {
    color: #3b82f6;
}

/* Special font */
.kaiti-font {
    font-family: "STXingkai", "KaiTi", "楷体", serif;
    line-height: 28px;
    text-align: center;
    font-size: 18px;
    color: #1d4ed8;
    padding: 0 16px;
}

/* Special font */
.kaiti-font-ja {
    font-family: "Meiryo";
    line-height: 28px;
    text-align: center;
    font-size: 18px;
    color: #1d4ed8;
    padding: 0 16px;
}

/* ===============================================
   Desktop styles (≥ 1200px)
   =============================================== */
@media (min-width: 1200px) {

    /* Override main margin for desktop */
    main {
        margin-top: 70px;
    }

    /* Background container - desktop */
    .background-container {
        background-size: contain, contain;
        padding: 0;
        padding-bottom: 40px;
        padding-top: 0;
    }

    /* Company title area - desktop */
    .company-title-container {
        margin-top: 48px;
        margin-bottom: 64px;
        font-size: 30px;
        line-height: 48px;
        transform: translateX(-33.333333%);
    }

    .company-title-wrapper {
        justify-content: flex-end;
    }

    .company-title {
        padding-top: 0;
        font-size: 40px;
        text-align: right;
    }

    .title-spacer {
        display: block;
        width: 80px;
    }

    .company-slogan {
        color: white;
        background: linear-gradient(to right, #0d73bb, #2d8cc2);
        flex-grow: 1;
    }

    .slogan-prefix {
        display: none;
    }

    .stripe-decoration {
        display: grid;
        width: 80px;
        grid-template-columns: repeat(5, 1fr);
        gap: 0;
    }

    .stripe-decoration div:nth-child(odd) {
        background-color: #2d8cc2;
    }

    /* Content container - desktop */
    .content-container {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }

    /* Content sections - desktop */
    .content-section-introduction {
        padding: 24px;
        margin: 32px 24px;
    }

    .content-section {
        padding: 24px;
        margin: 48px 24px;
    }

    /* Section titles - desktop */
    .section-title {
        position: absolute;
        top: -24px;
        left: -16px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('../images/公司简介标题.png');
        color: white;
        font-size: 20px;
        width: 176px;
        height: 48px;
        text-align: center;
        margin-bottom: 0;
    }

    /* Paragraphs - desktop */
    .paragraph {
        text-indent: 32px;
        line-height: 32px;
        font-size: 18px;
    }

    /* Scenario images - desktop */
    .scenario-images {
        flex-direction: row;
        gap: 48px;
    }

    .scenario-images img {
        width: auto;
        max-width: none;
    }

    /* Special font - desktop */
    .kaiti-font,
    .kaiti-font-ja {
        font-size: 32px;
        line-height: 32px;
        padding: 0;
    }
}