/**
 * About Page - Business Section Styles
 * supportセクションの亜種（横長画像対応）
 */

/* ===================================
   c-list--wide: 横長画像対応バリエーション
   =================================== */

/* テキストを上、画像を下に配置、中央揃え */
.c-list.c-list--wide .c-list-content {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
}

/* テキストは左揃え */
.c-list.c-list--wide .c-list-content .txtarea,
.c-list.c-list--wide .c-list-content .pht {
    text-align: left;
}

/* 横長画像エリア - メインコンテンツ幅に収める */
.c-list.c-list--wide .c-list-content .pht.pht--wide {
    width: 80%;
    position: relative;
    left: 0;
    transform: none;
    /* 親の.phtスタイルを上書き */
    overflow: visible;
    height: auto;
    padding-bottom: 0;
}

.c-list.c-list--wide .c-list-content .pht.pht--wide img {
    width: 100%;
    height: auto;
    display: block;
    /* imgの位置指定をリセット */
    position: static;
}

/* テキストエリア調整 - 詳細度を上げてcommon.cssを上書き */
.c-list.c-list--wide .c-list-content .txtarea {
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
    /* 縦書き番号用のスペースを確保 */
    padding-left: 30px;
}

/* 縦書き番号をセクションタイトルと左端揃え */
.c-list.c-list--wide .c-list-content .txtarea .list-number {
    left: 0;
}

/* タイトルと説明文の余白を詰める */
.c-list.c-list--wide .c-list-content .txtarea .c-txt {
    margin-top: 0;
}


/* ===================================
   Desktop (768px+)
   =================================== */
@media screen and (min-width: 768px) {
    .c-list.c-list--wide .c-list-content .txtarea {
        margin-bottom: 24px;
    }
}

/* ===================================
   Mobile (767px-)
   =================================== */
@media screen and (max-width: 767px) {
    .c-list.c-list--wide .c-list-content .pht.pht--wide {
        width: 100%;
        position: relative;
        left: 0;
        transform: none;
        overflow: visible;
        height: auto;
        padding-bottom: 0;
    }
}