/* ------------------------------------ */
/* ページ全体のスクロール制御 */
/* ------------------------------------ */
/* html, body に直接適用しない - upcycleセクションのみに適用 */
.upcycle-article-section {
    overflow-x: hidden;/* 横方向のはみ出しを隠す（セクション内のみ） */
}
#upcycle .detail-btn {
    margin-top: 0!important;
}
/* ==================================== */
/* 1. 共通・スマホ用レイアウト (デフォルト) */
/* ==================================== */
.upcycle-article-section {
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
    margin-top: 105px; /* .carousel-navの下端から105px */
}

.upcycle-article-section .page-main-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 30px;
}

.upcycle-article-section .content-wrapper {
    display: flex;
    flex-direction: column;/* スマホでは縦並び */
    gap: 0;
}
.upcycle-article-section .article-image-box .fixedsp-photo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 10px;
}
.upcycle-article-section .article-image-box .placeholder {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
}
/* ------------------------------------ */
/* 1-1. 記事リストエリア */
/* ------------------------------------ */
.upcycle-article-section .article-list-area .featured-list {
    list-style-type: none;
    padding: 0;
    counter-reset: article-counter;
}
.upcycle-article-section .article-list-area .featured-list li {
    list-style-type: none;
    counter-increment: article-counter;
}

.upcycle-article-section .article-item {
    border-bottom: 3px solid #039639;
    padding: 20px 0;
}
.upcycle-article-section .article-item:first-child {
    border-top: 3px solid #039639;
}
/* 記事番号 */
.upcycle-article-section .article-number {
    position: absolute;
    left: 0;
    top: 20px;
    font-size: 2.4rem;
    font-weight: bold;
    color: #039639;
}
.upcycle-article-section .article-item a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding-left: 35px;
    position: relative;
    z-index: 500;
    text-decoration: none;
    color: inherit;
}
/* タイトル・画像エリア */
.upcycle-article-section .article-content-wrapper-inner {
    display: flex;
    /* width: calc(100% - 50px); */
    align-items: flex-start;
    margin-bottom: 5px;
}

/* 記事コンテンツと画像の配置 */
.upcycle-article-section .article-content-body {
    flex: 1;
    padding-right: 15px;
}

.upcycle-article-section .article-image-box {
    width: 120px;
    height: 100px;
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upcycle-article-section .article-category-tag {
    background-color: #ffcc00;
    padding: 2px 6px;
    font-size: 1.3rem;
    border-radius: 3px;
    margin-bottom: 5px;
    display: inline-block;
}
.upcycle-article-section .article-title {
    font-size: 1.5rem;
    line-height: 1.4;
    margin: 0 0 5px 0;
}

.upcycle-article-section .article-excerpt {
    display: flex;
    width: 95%;
    margin-bottom: 0;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    color: #039639;

}
/* PC用矢印 (article-item-arrow を利用) */
    .upcycle-article-section .article-item-arrow {
        position: absolute;
        right: 0; /* aタグ右端に配置 */
        top: 50%;
        transform: translateY(-50%);
        z-index: 1000;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        transition: background-color 0.3s ease;
    }
/* ------------------------------------ */
/* 1-2. 右側固定画像エリア (スマホ) */
/* ------------------------------------ */
.upcycle-article-section .right-sidebar-column {
    display: none;
}

/* スマホでは固定画像を非表示（ボタンは表示） */
.upcycle-article-section .fixed-images-container {
    display: block;
    position: relative;
    width: 100%;
}



/* ==================================== */
/* 2. PC用レイアウト (695px 以上で適用) */
/* ==================================== */
@media (min-width: 695px) {
    .upcycle-article-section {
        overflow: hidden; /* 親要素からはみ出た部分を隠す */
        width: 100vw; /* 画面幅いっぱい */
        max-width: none; /* 最大幅制限なし */
        margin-bottom: 210px; /* バナーまでの空白210px(figmaより)*/
        padding-left: 68px; /* 画面端から68px */
        padding-right: 0;
        padding-top: 79px; /* 上側画像が左カラムより79px上に配置されるための余白 */
        padding-bottom: 20px;
        position: relative; /* 子要素の絶対配置の基準 */
    }

    /* 記事リストと右側カラムを横並びに */
    .upcycle-article-section .content-wrapper {
        flex-direction: row;
        gap: 0; /* gapを0にして、位置を正確に制御 */
        position: relative;
    }
    /* タイトル・画像エリア */
    .upcycle-article-section .article-content-wrapper-inner {
        display: flex;
        width: calc(100% - 61px);
        align-items: flex-start;
        margin-bottom: 5px;
    }
    /* カラム幅の設定 */
    .upcycle-article-section .article-list-column {
        width: 62%; /* 左カラム62% */
        /* min-height: 500px; */
    }
    .upcycle-article-section .right-sidebar-column {
        display: block;
        width: 38%; /* 右カラム38% - 幅の確保用 */
        position: relative; /* 相対配置に変更 */
    }

    /* 固定画像コンテナ（画面全体を基準に絶対配置） */
    .upcycle-article-section .fixed-images-container {
        display: block; /* PC版では表示 */
        position: absolute;
        top: 0; /* セクション上端に配置（padding-top: 79pxにより記事リストより79px上になる） */
        left: 0; /* 画面左端を基準 */
        width: 100vw; /* 画面全体を基準 */
        height: 100%;
        pointer-events: none; /* クリックイベントを無効化（画像のみ有効化） */
    }

    .upcycle-article-section .fixed-images-container > * {
        pointer-events: auto; /* 子要素（画像）はクリック可能 */
    }

    /* ------------------------------------ */
    /* 2-1. 記事リストエリア (PC) */
    /* ------------------------------------ */
    .upcycle-article-section .article-item {
        /* 下側画像の左端より十分左側に収まるように幅を計算 */
        /* 下側画像の左端 = calc(100vw - 38vw * 0.85 - (100vw * 400 / 1365) * 0.25) */
        /* 記事の幅 = 下側画像の左端 - padding-left(68px) - 余白(40px) */
        width: calc(100vw - 38vw * 0.85 - (100vw * 400 / 1365) * 0.25 - 68px - 40px);
        max-width: 48.35vw; /* 1365pxでの660px相当最大幅を維持 */
        padding-top: 35px;
        padding-bottom: 35px; /* または適切な値に統一 */
    }

    /* 記事を4本のみ表示（5本目以降を非表示） */
    .upcycle-article-section .article-item:nth-child(n+5) {
        display: none;
    }
    .upcycle-article-section .article-image-box {
        display: none;
    }
    .upcycle-article-section .article-item a {
        padding-left: 40px;
    }
    .upcycle-article-section .article-item::before {
        font-size: 1.5rem;
        top: 25px;
    }
    .upcycle-article-section .article-title {
        font-size: 2.5vw; /* 文字サイズ22px -> 2.5vw*/
        letter-spacing: 0.05em; /* 文字間隔5% */
        text-align: left; /* 左揃え */
        vertical-align: top; /* 上揃え */
        height: auto; /* 高さは可変 */
    }

    /* PCでの抜粋の初期状態を非表示 */
    .upcycle-article-section .article-excerpt {
        display: none;
    }
    .upcycle-article-section .article-item:hover .article-excerpt {
        display: block;
        width: calc(100% - 61px);
        font-size: 1.4rem;
        font-weight:600;
        color: #039639;
        opacity: 1;
        border-top-color: #039639;
        border-bottom-color: #039639;
    }
    .upcycle-article-section .article-list-area .featured-list:hover .article-item {
        opacity: 0.5;
    }

    .upcycle-article-section .article-list-area .featured-list:hover .article-item:hover {
        opacity: 1;
    }
    .upcycle-article-section .article-list-area .article-item .article-number {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 2.4rem;
        font-weight: bold;
        color: #039639;
    }
    /* カテゴリータグ */
    .upcycle-article-section .article-list-area .article-item .article-category-tag {
        background-color: #FFE55D;
        border: 1px solid #444B81;
        color: #444B81;
        padding-top:3px;
        padding-bottom:4px;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0.05em;
        border-radius: 5px;
        margin-bottom: 8px;
        display: inline-block;
        width: auto;
        text-align: center;
        line-height: 1.0;
        margin-top: 0; /* 記事番号と上端を揃える */
    }
    /* 記事タイトル */
    .upcycle-article-section .article-list-area .article-item .article-title {
        font-size: 22px;
        font-weight: bold;
        line-height: 1.3;
        letter-spacing: 0.05em;
        color: #643200;
        margin-bottom: 0;
        width:100%;
        /* 幅は親要素のpadding-rightで制御 */
    }
    /* PC版矢印 (article-item-arrow を利用) */
    .upcycle-article-section .article-item-arrow {
        position: absolute;
        right: 11px;
        top: 50%; /* 既存 */
        transform: translateY(-50%); /* 既存 */
        /* ↓ 追加: 他の要素より前面に表示 */
        z-index: 1000;
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .upcycle-article-section .article-item-arrow img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .upcycle-article-section .article-excerpt-arrow {
        display: none;
    }
    /* ------------------------------------ */
    /* 2-2. 右側固定画像エリア (PC) */
    /* ------------------------------------ */

    /* PC版では画像を表示 */
    .upcycle-article-section .fixed-photo-large,
    .upcycle-article-section .fixed-photo-small {
        display: block;
    }

    /* 固定写真1 (画像大・上側) */
    .upcycle-article-section .fixed-photo-large {
        /* ブラウザ幅に応じて拡大縮小、右端が画面外にはみ出す */
        width: calc(38vw * 0.85); /* 右カラムの85% = 全体の32.3% */
        aspect-ratio: 448 / 500; /* 元画像の縦横比を維持 width448,height500*/
        height: auto; /* aspect-ratioで自動計算 */
        /* 画面幅1240px時を最大とする */
        /* max-width: 401px; */
        /* max-height: 447px; */
        position: absolute;
        top: 0; /* fixed-images-containerが既に-79pxなので、ここは0 */
        right: 0; /* 右端揃え */
        z-index: 5; /* 下側画像より後ろ */
        opacity: 0; /* 初期状態は非表示 */
        transition: opacity 0.3s ease; /* スムーズな切り替え */
    }

    /* 固定写真2 (画像小・下側) */
    .upcycle-article-section .fixed-photo-small {
        width: calc(100vw * 400 / 1365); /* 1365px時に400px、ブラウザ幅に応じて拡大縮小 */
        aspect-ratio: 400 / 333; /* アスペクト比維持 width400 height333*/
        height: auto; /* aspect-ratioで自動計算 */
        /* 画面幅1240px時を最大とする */
        max-width:363px;
        max-height: 302px;
        /* ｰｰｰｰｰｰｰｰｰｰ */
        position: absolute;
        z-index: 10; /* 上側画像より前 */
        opacity: 0; /* 初期状態は非表示 */
        transition: opacity 0.3s ease; /* スムーズな切り替え */

        /* 横方向の位置計算 */
        /* 下側画像の右側75%が上側画像と重なる */
        /* 上側画像の幅 = 38vw × 0.85 = 32.3vw */
        /* 上側画像の左端 = 100vw - 32.3vw = 67.7vw */
        /* 下側画像の幅 = 100vw × 400/1365 ≈ 29.3vw */
        /* 下側画像の右端 = 上側画像の左端 + 下側画像の幅 × 75% */
        /* 下側画像の左端 = 下側画像の右端 - 下側画像の幅 */
        /*                = 上側画像の左端 + 下側画像の幅 × 0.75 - 下側画像の幅 */
        /*                = 上側画像の左端 - 下側画像の幅 × 0.25 */
        /*                   幅がmax-width:363pxになったので100vw * 363 / 1365 に変更 */
        /*                = (100vw - 38vw × 0.85) - (100vw × 400/1365) × 0.25 */
        /* left: calc(100vw - 38vw * 0.85 - (100vw * 363 / 1365) * 0.25); */

        /*    1240px基準時の見えている範囲が448px 1240pxだと  401             */
        left: calc(100vw - 38vw * 0.85 - (100vw * 363 / 1240) * 0.25);

        /* 縦方向の位置計算 */
        /* 下側画像の上側43%が上側画像の下端に重なる */
        /* 上側画像の高さ = (38vw × 0.85) × (500/688) */
        /* 下側画像の高さ = (100vw × 400/1365) × (333/400) */
        /* 下側画像の上端 = 上側画像の下端 - 下側画像の高さ × 43% */
        /*                = 上側画像の高さ - 下側画像の高さ × 0.5 */

        /* top: calc((38vw * 0.85) * (500 / 448) - (100vw * 363 / 1365) * (302 / 363) * 0.5); */
        /*    1240px基準時の見えている範囲が448px 1240pxだと  401             */
        top: calc((38vw * 0.80) * (447 / 401) - (100vw * 302 / 1240) * (302 / 363) * 0.5);

    }
    
    /* 内部の画像がコンテナに収まるように確認 */
    .upcycle-article-section .fixed-photo-large .fixed-photo-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px 0 0 20px; 
    }
    .upcycle-article-section .fixed-photo-small .fixed-photo-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }

    /* ------------------------------------ */
    /* 2-3. 詳しく見るボタン (PC) */
    /* ------------------------------------ */
    .upcycle-article-section .fixed-images-container .detail-btn {
        position: absolute;
        /* スマホ版のmarginをリセット */
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;

        /* 右端を下側画像の右端に揃えるが、左カラムに侵食しないように制限 */
        /* 下画像に揃える値 = 38vw * 0.85 - (100vw * 400 / 1365) * 0.8 */
        /* 侵食しない最小right = 38vw - 418px（左カラム62vw + padding 68px + ボタン幅350px） */
        /* 小さい方（より右に寄せる）を採用 */
        /* right: calc(38vw * 0.8 - (100vw * 363 / 1240) * 0.75); */

        top: 0;

    }

    .upcycle-article-section .fixed-images-container .detail-btn a {
        display: block;
        /* ボタン幅を動的に調整: 右カラムの幅から余白を引いた値と350pxの小さい方 */
        /* 右カラムの幅 = 38vw, 左右の余白を考慮して safe width = 38vw - 40px */
        /* width: 350px;
        max-width: calc(100vw - 40px); */
    }

    .upcycle-article-section .fixed-images-container .detail-btn a svg {
        width: 100%;
        height: auto;
    }

    /* ホバー効果 */
    .upcycle-article-section .fixed-images-container .detail-btn a:hover svg rect:nth-child(2) {
        fill: #039639;
        transition: fill 0.3s ease;
    }

    .upcycle-article-section .fixed-images-container .detail-btn a:hover svg rect:nth-child(3) {
        stroke: #039639;
        transition: stroke 0.3s ease;
    }

    .upcycle-article-section .fixed-images-container .detail-btn a:hover svg path:nth-child(4) {
        fill: white;
        transition: fill 0.3s ease;
    }

    .upcycle-article-section .fixed-images-container .detail-btn a svg rect:nth-child(2),
    .upcycle-article-section .fixed-images-container .detail-btn a svg rect:nth-child(3),
    .upcycle-article-section .fixed-images-container .detail-btn a svg path:nth-child(4) {
        transition: fill 0.3s ease, stroke 0.3s ease;
    }
}

/* ==================================== */
/* スマホ版詳細レイアウト (694px以下) */
/* ==================================== */
@media (max-width: 694px) {
    .upcycle-article-section {
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 0;
        padding-bottom: 0;
        max-width: 100%;
        margin: 0 auto;
        margin-top: 18px; /* .detail-btnの下端から60px(18px+42px) */
        /* margin-bottom:86px; */
    }

    /* 記事アイテム全体 */
    .upcycle-article-section .article-item {
        position: relative;
        padding-top: 20px;
        padding-bottom: 0px!important;
    }

    /* 記事番号 */
    .upcycle-article-section .article-number {
        position: absolute;
        left: 8.62px;
        top: 8px;
        font-size: 14px;
        font-weight: bold;
        line-height: 110%;
        letter-spacing: 0.05em;
        color: #039639;
        width: auto;
    }
    /* カテゴリータグ */
    .upcycle-article-section .article-list-area .article-item .article-category-tag {
        background-color: #FFE55D;
        border: 1px solid #444B81;
        color: #444B81;
        padding-top:3px;
        padding-bottom:4px;
        padding-right: 10px;
        padding-left: 10px;
        font-size: 10px;
        font-weight: bold;
        letter-spacing: 0.05em;
        border-radius: 5px;
        margin-bottom: 8px;
        display: inline-block;
        width: auto;
        text-align: center;
        line-height: 1.0;
        margin-top: 0; /* 記事番号と上端を揃える */
    }
    /* aタグ */
    .upcycle-article-section .article-item a {
        padding-left: 0;
        display: block;
        position: relative;
    }

    /* タイトル・画像エリア */
    .upcycle-article-section .article-content-wrapper-inner {
        position: relative;
        min-height: 100px;
        margin-bottom: 13px;
    }

    /* 記事コンテンツ（カテゴリー・タイトル） */
    .upcycle-article-section .article-content-body {
        position: absolute;
        /* 記事番号8.62px + 約20px + 14px */
        /* left: 31.24px;  */
        /* figmaから 41px*/
        left:41px;
        top: 0;
        /* 画像エリアに重ならないように右側に余白を確保 */
        padding-right: 131px; /* 画像120px + 余白11px */
    }

    /* カテゴリータグ */
    .upcycle-article-section .article-category-tag {
        background-color: #FFE55D;
        border: 1px solid #444B81;
        color: #444B81;
        padding: 6px 10px; /* paddingを控えめに */
        font-size: 10px;
        font-weight: bold;
        letter-spacing: 0.05em;
        border-radius: 5px;
        margin-bottom: 8px;
        display: inline-block;
        width: auto;
        text-align: center;
        line-height: 1.0;
        margin-top: 0; /* 記事番号と上端を揃える */
    }

    /* 記事タイトル */
    .upcycle-article-section .article-title {
        font-size: 14px;
        font-weight: bold;
        line-height: 1.4;
        letter-spacing: 0.05em;
        color: #643200;
        margin: 0;
        /* 幅は親要素のpadding-rightで制御 */
    }

    /* スマホ画像 */
    .upcycle-article-section .article-image-box {
        width: 120px;
        height: 100px;
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 10px;
        overflow: hidden;
    }

    .upcycle-article-section .article-image-box .fixedsp-photo-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
    /* PC用矢印は非表示 */
    .upcycle-article-section .article-item-arrow {
        display: none;
    }
    /* 概要ラッパー */
    .upcycle-article-section .article-excerpt-wrapper {
        display: flex;
        position: relative;
        align-items: center;
        /* 矢印分の幅2%確保 */
        width: 98%; 
        padding-left: 0;        
        margin-top: 5px;
        margin-bottom: 10px;
        margin-left: 11px;
    }

    /* サマリ */
    .upcycle-article-section .article-excerpt {
        display: block;
        width: 70%;
        /* カテゴリと左を揃える */
        margin-left: 30px;
        margin-right: 0;
        margin-bottom: 0;
        padding-top: 13px;
        padding-bottom: 22px;
        font-size: 10px;
        font-weight: 600;
        line-height: 140%;
        letter-spacing: 0.05em;
        color: #039639;
    }

    .upcycle-article-section .article-excerpt-arrow{
        position: absolute;
        right: 11px;
        width: 25px;
        height: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .upcycle-article-section .article-excerpt-arrow img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    /* スマホ版：固定画像は非表示 */
    .upcycle-article-section .fixed-photo-large,
    .upcycle-article-section .fixed-photo-small {
        display: none;
    }

    /* スマホ版：詳しく見るボタンの配置 */
    .upcycle-article-section .fixed-images-container .detail-btn {
        padding-top: 50px;
        /* 記事04の下側の緑枠線から50px下に配置 */
        margin-top: 50px;
        /* ボタンの左端・右端を記事の緑の枠線と揃える */
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 70px;/* インスタのmargin-topが30pxなので合わせて100px空く*/
    }

    .upcycle-article-section .fixed-images-container .detail-btn a {
        display: block;
        width: 100%;
        max-width: 100%;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .upcycle-article-section .fixed-images-container .detail-btn a svg {
        width: 100%;
        height: auto;
    }
    /* ホバー効果 */
    .upcycle-article-section .fixed-images-container .detail-btn a:active svg rect:nth-child(2) {
        fill: #039639;
        transition: fill 0.6s ease;
    }

    .upcycle-article-section .fixed-images-container .detail-btn a:active svg rect:nth-child(3) {
        stroke: #039639;
        transition: stroke 0.6s ease;
    }

    .upcycle-article-section .fixed-images-container .detail-btn a:active svg path:nth-child(4) {
        fill: white;
        transition: fill 0.6s ease;
    }

    .upcycle-article-section .fixed-images-container .detail-btn a svg rect:nth-child(2),
    .upcycle-article-section .fixed-images-container .detail-btn a svg rect:nth-child(3),
    .upcycle-article-section .fixed-images-container .detail-btn a svg path:nth-child(4) {
        transition: fill 0.6s ease, stroke 0.6s ease;
    }
}