/* ========================================
   About Page Styling
   /about/ ページ専用CSS
======================================== */

/* #about_pageのボーダー削除 */
#about_page {
    border-left: none !important;
    border-right: none !important;
}

/* main_colを全幅に設定（サイドバーなし） */
body.page-template-page-about #main_col {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
}

/* キャッチコピー */
.catch.rich_font_2 {
    font-family: 'Roboto', sans-serif !important;
    font-size: 32px !important;
}

/* 見出しスタイル（design_headline） */
.design_headline {
    display: block !important;
    visibility: visible !important;
    text-align: center !important;
}

.design_headline.clearfix::after {
    content: none !important;
}

.design_headline.clearfix::before {
    content: none !important;
}

/* 会社紹介テキストセクション */
.about-introduction {
    margin: 0 auto 40px auto;
    max-width: 800px;
    padding: 0 20px;
}

.about-introduction p {
    text-align: left !important;
    margin-bottom: 20px;
    line-height: 1.8;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
}

/* 工場画像セクション */
.factory-images {
    margin: 60px 0;
    text-align: center;
}

.factory-images figure {
    margin: 0 0 30px 0;
}

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

/* aboutページ内のaligncenter画像（.post_contentの外でも適用） */
#about_page img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* エルクラシコメダリオンセクション */
.medallion-section {
    margin: 60px auto;
    max-width: 800px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.medallion-section figure {
    margin: 0 0 20px 0;
}

.medallion-section img {
    max-width: 100%;
    height: auto;
}

.medallion-section p {
    text-align: left !important;
    line-height: 1.8;
    width: 100%;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
}

/* 営業時間・会社情報セクション */
.business-info {
    margin: 60px auto;
    max-width: 800px;
    padding: 20px;
    border: 0.5px solid #000;
    text-align: center;
}

.business-info p {
    text-align: center !important;
    margin-bottom: 0;
    line-height: 1.8;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
}

/* 認証情報セクション */
.certifications-info {
    margin: 60px auto;
    max-width: 800px;
    padding: 0 20px;
    text-align: center;
}

.certifications-info p {
    text-align: center !important;
    margin-bottom: 0;
    line-height: 1.8;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
}

/* ========================================
   レスポンシブ対応
======================================== */

/* タブレット (651px〜1079px) */
@media (min-width: 651px) and (max-width: 1079px) {

    .about-introduction,
    .factory-images,
    .medallion-section,
    .business-info,
    .certifications-info {
        padding: 0 20px;
    }
}

/* モバイル (650px以下) */
@media (max-width: 650px) {

    /* wide_page_header_innerを削除 */
    .wide_page_header_inner {
        display: none !important;
    }

    /* モバイル用ヘッダー画像に切り替え */
    body #about_page #about_header,
    #about_page #about_header,
    div#about_header {
        background: url('../images/headers/SP_about.png') no-repeat center center !important;
        background-image: url('../images/headers/SP_about.png') !important;
        background-size: cover !important;
        background-position: center center !important;
    }

    .about-introduction,
    .factory-images,
    .medallion-section,
    .business-info,
    .certifications-info {
        padding: 0 10px;
        margin: 40px 0;
    }

    .about-introduction p,
    .medallion-section p,
    .business-info p,
    .certifications-info p {
        font-size: 14px;
    }
}