/*
 * カスタム投稿「olegsgallery」アーカイブページ用CSS
 * (archive-olegsgallery.php のみで読み込む)
 * 既存サイトのSCSSをCSSに変換し、SWELLのHTML構造にマッピング
 * レイアウト調整: テキスト左、写真右、文章下部100%幅
 */

/* ----------------------------------------------------
  全体的なレイアウト調整
---------------------------------------------------- */

/* ページタイトル */
.c-pageTitle {
    text-align: center;
    margin-bottom: 50px;
}

.c-pageTitle .c-pageTitle__en {
    font-size: 3rem; /* 48px */
    font-weight: bold;
    color: #333;
    display: block;
    /* font-family: var(--font-outfit); // 必要に応じてstyle.cssで定義した変数を指定 */
}

.c-pageTitle .c-pageTitle__jp {
    font-size: 1.8rem; /* 28.8px */
    color: #666;
    display: block;
    margin-top: 5px;
}

/* 左右2カラムレイアウトのコンテナ (メインコンテンツとサイドバー) */
.post-type-archive-olegsgallery #content.u-pt-40 > .l-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
}

/* 左カラム (メインコンテンツエリア - 記事一覧) */
.post-type-archive-olegsgallery main#main_content.l-contents__main {
    flex: 1;
    min-width: 0;
}

/* 右カラム (サイドバーエリア) - SWELLのデフォルトを活かすため、ここでは幅以外は定義しない */
.post-type-archive-olegsgallery aside#sidebar.l-sidebar {
    width: 300px;
    flex-shrink: 0;
}

/* レスポンシブ対応 (サイドバーを下に配置) */
@media screen and (max-width: 991px) { /* SWELLのPC/タブレットの境界 */
    .post-type-archive-olegsgallery #content.u-pt-40 > .l-container {
        flex-direction: column;
    }
    .post-type-archive-olegsgallery main#main_content.l-contents__main,
    .post-type-archive-olegsgallery aside#sidebar.l-sidebar {
        width: 100%;
        margin-bottom: 30px;
    }
    .post-type-archive-olegsgallery aside#sidebar.l-sidebar {
        order: 1; /* サイドバーを記事の上に持ってくる (既存サイトのスマホ表示に合わせる) */
    }
    .post-type-archive-olegsgallery main#main_content.l-contents__main {
        order: 2;
    }
}


/* ----------------------------------------------------
  各投稿アイテムのスタイル (.case-list の再現)
---------------------------------------------------- */
/* 投稿リスト全体 (SWELLの .c-postList を使用) */
.post-type-archive-olegsgallery .c-postList {
    display: grid;
    grid-template-columns: 1fr !important; /* 記事一覧は強制的に1カラム */
    gap: 30px; /* アイテム間の余白 */
}

/* 各投稿アイテム (.c-postList__item を .item として再現) */
.post-type-archive-olegsgallery .c-postList__item {
    
    background-color: #f5f5f5;
    padding: 50px; /* PCでのパディング */
    margin-bottom: 30px;
    display: flex; /* 内部要素を縦に並べるためのFlexbox */
    flex-direction: column;
    align-items: flex-start; /* 左寄せ */
}
/* 最後のアイテムに margin-bottom をつけない */
.post-type-archive-olegsgallery .c-postList__item:last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) { /* スマホ */
    .post-type-archive-olegsgallery .c-postList__item {
        padding: 30px 30px 35px;
        align-items: center; /* スマホでは中央寄せ */
    }
}


/* 記事リンク部分 (.c-postList__link) */
/* リンク全体がFlexコンテナ。情報と画像、そしてタイトルを横並びにするため */
.post-type-archive-olegsgallery .c-postList__item > .c-postList__link {
    display: flex;
    flex-direction: column; /* トップレベルはまず縦積み (情報+画像ブロック) と (タイトル) */
    width: 100%; /* 親要素の幅いっぱい */
    text-decoration: none; /* リンクの下線削除 */
    color: inherit; /* リンク色継承 */
}


/* 新しいラッパー: 情報と画像を含む上部セクション */
.post-type-archive-olegsgallery .c-postList__item .item__top_section {
    display: flex;
    flex-direction: row; /* PC: 情報(左)と画像(右)を横並び */
    flex-wrap: wrap;
    width: 100%; /* 親要素 (c-postList__item) の幅いっぱい */
    margin-bottom: 35px; /* タイトルとの間に余白 */
    align-items: flex-start; /* 上揃え */
}
@media screen and (max-width: 767px) { /* スマホ */
    .post-type-archive-olegsgallery .c-postList__item .item__top_section {
        flex-direction: column; /* スマホでは縦積み */
        align-items: center; /* 中央寄せ */
        margin-bottom: 28px; /* 既存サイトのスマホ時の間隔 */
    }
}


/* 情報セクション (.item__info) */
.post-type-archive-olegsgallery .c-postList__item .item__info {
    width: 42%; /* PCでの幅 (元の .info の幅) */
    padding-right: 39px; /* 元の .info のパディング */
    box-sizing: border-box;
    order: 1; /* **情報部分を先に表示（左側）** */
    flex-shrink: 0;
    text-align: left; /* テキスト左寄せ */
}
@media screen and (max-width: 991px) { /* タブレット以下 */
    .post-type-archive-olegsgallery .c-postList__item .item__info {
        width: 100%; /* 幅を100%に */
        padding-right: 0; /* パディングをリセット */
        text-align: center; /* スマホでは中央寄せ */
    }
}


/* Before/After画像部分 (.item__img_wrapper) */
.post-type-archive-olegsgallery .c-postList__item .item__img_wrapper {
    width: 58%; /* PCでの幅 (元の .img の幅) */
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    align-items: flex-end;
    box-sizing: border-box;
    order: 2; /* **画像部分を後に表示（右側）** */
    margin-bottom: 0; /* PCではマージンなし */
    flex-shrink: 0;
}
@media screen and (max-width: 767px) { /* スマホ */
    .post-type-archive-olegsgallery .c-postList__item .item__img_wrapper {
        width: 100%;
        margin-bottom: 25px; /* スマホでの下マージン */
        max-width: 350px; /* 大きくなりすぎないように制限 */
        order: 1; /* スマホでは画像を上部（先）に持ってくる */
    }
}


/* Before/After画像間の矢印再現 (HTMLの img_wrapper::after で実装) */
.post-type-archive-olegsgallery .c-postList__item .item__img_wrapper::after {
    content: "";
    width: 24px;
    height: 13px;
    position: absolute;
    left: calc(50% - 12px);
    top: calc(50% - 20px); /* 上下中央から少し上に調整 */
    background-repeat: no-repeat;
    background-position: center;
    /* Base64 SVGを直接埋め込む */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='13' viewBox='0 0 24 13'%3E%3Cg id='arw' transform='translate(-597 -670)'%3E%3Cpath id='Polygon_9' data-name='Polygon 9' d='M5.822.626a1,1,0,0,1,1.357,0l3.942,3.639A1,1,0,0,1,10.442,6H2.558a1,1,0,0,1-.678-1.735Z' transform='translate(612 670) rotate(90)' fill='%23b4b4b4'/%3E%3Cpath id='Polygon_10' data-name='Polygon 10' d='M5.822.626a1,1,0,0,1,1.357,0l3.942,3.639A1,1,0,0,1,10.442,6H2.558a1,1,0,0,1-.678-1.735Z' transform='translate(621 670) rotate(90)' fill='%23b4b4b4'/%3E%3Cpath id='Polygon_11' data-name='Polygon 11' d='M5.822.626a1,1,0,0,1,1.357,0l3.942,3.639A1,1,0,0,1,10.442,6H2.558a1,1,0,0,1-.678-1.735Z' transform='translate(603 670) rotate(90)' fill='%23b4b4b4'/%3E%3C/g%3E%3C/svg%3E%0A");
    z-index: 2;
}
@media screen and (max-width: 767px) {
    .post-type-archive-olegsgallery .c-postList__item .item__img_wrapper::after {
        width: 19px;
        height: 10px;
        background-size: 100%;
        left: calc(50% - 9px);
        top: calc(50% - 20px);
    }
}

/* Before/After個別の画像コンテナ */
.post-type-archive-olegsgallery .c-postList__item .img_before,
.post-type-archive-olegsgallery .c-postList__item .img_after {
    width: calc(50% - 24px); /* PC */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media screen and (max-width: 767px) {
    .post-type-archive-olegsgallery .c-postList__item .img_before,
    .post-type-archive-olegsgallery .c-postList__item .img_after {
        width: calc(50% - 18px); /* スマホ */
    }
}

.post-type-archive-olegsgallery .c-postList__item .img_before {
    margin-right: 48px; /* PC */
}
@media screen and (max-width: 767px) {
    .post-type-archive-olegsgallery .c-postList__item .img_before {
        margin-right: 36px; /* スマホ */
    }
}

.post-type-archive-olegsgallery .c-postList__item .item__img_wrapper img {
    object-fit: cover;
    height: 300px;
    width: 180px;
}

/* Before/Afterラベル (画像の真下、かつ画像と一体化しない独立したテキスト) */
.post-type-archive-olegsgallery .c-postList__item .img_before .txtLab,
.post-type-archive-olegsgallery .c-postList__item .img_after .txtLab {
    position: static;
    margin-top: 10px;
    display: block;
    font-size: 1.9rem; /* 19px */
    line-height: 2.4rem; /* 24px */
    font-weight: 300;
    color: #1a68b2; /* Beforeの色 */
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    text-align: center;
    /* font-family: Outfit, sans-serif; // 必要に応じてstyle.cssで定義した変数を指定 */
    white-space: nowrap;
}
.post-type-archive-olegsgallery .c-postList__item .img_after .txtLab {
    color: #b2433f; /* Afterの色 */
}
@media screen and (max-width: 767px) {
    .post-type-archive-olegsgallery .c-postList__item .img_before .txtLab,
    .post-type-archive-olegsgallery .c-postList__item .img_after .txtLab {
        margin-top: 8px;
    }
}

/* メタ情報 (カテゴリ、年齢、性別) */
.post-type-archive-olegsgallery .c-postList__item .item__info .item__meta { /* 親セレクタを追加 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 1.5rem; /* 15px */
    line-height: 2.1rem; /* 21px */
    font-weight: bold;
    /* font-family: Outfit, sans-serif; // 必要に応じてstyle.cssで定義した変数を指定 */
    border-bottom: 1px solid #d5d5d5;
    margin-bottom: 30px;
    padding-bottom: 20px;
    width: 100%; /* 情報エリア内で幅いっぱい */
    box-sizing: border-box;
    justify-content: flex-start; /* PCでは左寄せ */
}
@media screen and (max-width: 767px) {
    .post-type-archive-olegsgallery .c-postList__item .item__info .item__meta {
        font-size: 1.3rem; /* 13px */
        line-height: 1.8rem; /* 18px */
        padding-bottom: 15px;
        margin-bottom: 25px;
        justify-content: center; /* スマホで中央寄せ */
    }
}

/* カテゴリタグ */
.post-type-archive-olegsgallery .c-postList__item .item__info .item__category { /* 親セレクタを追加 */
    margin-right: 15px;
}
@media screen and (max-width: 767px) {
    .post-type-archive-olegsgallery .c-postList__item .item__info .item__category {
        margin-right: 12px;
    }
}
.post-type-archive-olegsgallery .c-postList__item .item__info .item__category span {
    color: #fff;
    background-color: #f7931e; /* $orange の色コード */
    display: inline-block;
    padding: 5px 9px;
    border-radius: 3px;
}
@media screen and (max-width: 767px) {
    .post-type-archive-olegsgallery .c-postList__item .item__info .item__category span {
        padding: 3px 9px;
    }
}

/* 年齢・性別 */
.post-type-archive-olegsgallery .c-postList__item .item__info .item__meta .item__age,
.post-type-archive-olegsgallery .c-postList__item .item__info .item__meta .item__gender { /* 親セレクタを追加 */
    color: var(--color_main); /* $green の色コード */
    font-size: 2.1rem; /* 21px */
    line-height: 3rem; /* 30px */
    font-weight: 500;
    /* font-family: Outfit, sans-serif; // 必要に応じてstyle.cssで定義した変数を指定 */
    letter-spacing: 0.08em; /* 80 の再現 */
}
.post-type-archive-olegsgallery .c-postList__item .item__info .item__meta .num { /* 親セレクタを追加 */
    font-size: 2.2rem; /* 22px */
    line-height: 3rem; /* 30px */
    font-weight: 500;
    /* font-family: Outfit, sans-serif; // 必要に応じてstyle.cssで定義した変数を指定 */
    letter-spacing: 0.03em; /* 30 の再現 */
}

/* 各詳細情報 (通院期間、施術回数) */
.post-type-archive-olegsgallery .c-postList__item .item__info .item__detail_row { /* 親セレクタを追加 */
    margin-bottom: 30px;
    display: flex;
    justify-content: flex-start; /* PCでは左寄せ */
    align-items: center;
    width: 100%; /* 情報エリア内で幅いっぱい */
    box-sizing: border-box;
}
.post-type-archive-olegsgallery .c-postList__item .item__info .item__detail_row:last-child {
    margin-bottom: 0;
}
@media screen and (max-width: 767px) { /* スマホ */
    .post-type-archive-olegsgallery .c-postList__item .item__info .item__detail_row {
        margin-bottom: 15px;
        flex-direction: column; /* スマホで縦積み */
        align-items: center; /* スマホで中央寄せ */
    }
}

/* 詳細ラベル (通院期間:, 施術回数:) */
.post-type-archive-olegsgallery .c-postList__item .item__info .item__label { /* 親セレクタを追加 */
    color: var(--color_main); /* $green の色コード */
    font-size: 1.5rem; /* 15px */
    line-height: 2.1rem; /* 21px */
    font-weight: 500;
    letter-spacing: 0.01em; /* 100 の再現 */
    margin-bottom: 10px; /* PCでは下の値との間に余白 */
    display: block;
    flex-shrink: 0;
    min-width: 90px; /* ある程度の幅を確保し、右の値を押し出す */
    text-align: left; /* PCでは左寄せ */
}
@media screen and (max-width: 767px) {
    .post-type-archive-olegsgallery .c-postList__item .item__info .item__label {
        width: auto;
        margin-right: 0;
        margin-bottom: 5px;
        text-align: center; /* スマホでは中央寄せ */
    }
}

/* 詳細値 (4ヶ月, 17回など) */
.post-type-archive-olegsgallery .c-postList__item .item__info .item__value {
    background-color: #fff;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2.9rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    padding: 0px 10px 5px 10px;
    margin-left: 10px;
    display: block;
    flex-grow: 1;
    box-sizing: border-box;
}
@media screen and (max-width: 767px) {
    .post-type-archive-olegsgallery .c-postList__item .item__info .item__value {
        width: 100%; /* スマホ */
        text-align: center; /* スマホで中央寄せ */
    }
}

/* 記事コンテンツの抜粋 (__txt を再現) */
/* **HTML構造の変更に伴い、.c-postList__link の外にあることを想定** */
.post-type-archive-olegsgallery .c-postList__item > .item__content { /* 親セレクタを article の直接の子に */
    font-size: 1.2rem; /* 15px */
    line-height: 1.5rem; /* 32px */
    font-weight: 500;
    letter-spacing: 0.005em;
    padding: 0 0 0 0; /* paddingをリセット */
    color: #333;
    width: 100%; /* **幅を100%にする** */
    box-sizing: border-box;
    text-align: left; /* PCでは左寄せ */
}
@media screen and (max-width: 767px) { /* スマホ */
    .post-type-archive-olegsgallery .c-postList__item > .item__content {
        line-height: 2.6rem; /* 26px */
        letter-spacing: 0.03em;
        text-align: left; /* スマホでも左寄せ */
    }
}

#sidebar{
    display: none;
}