@import url("base_three.css");

/* ==========================================
全体設定・CSS変数
========================================== */
:root {
    --folder-bg: #EFF4F4; /* フォルダの背景色 */
    --text-main: #333D41;
    --text-title: #284e78;
    --text-date: #708a9f;
}
@media screen and (max-width: 768px) {
    :root {
        --folder-radius: 20px;
    }
}
@media screen and (min-width: 769px) {
    :root {
        --folder-radius: 20px;
    }
}
/* ==========================================
画面幅依存の倍率設定
========================================== */
:root {
  --fluid-w: 375;
}
@media screen and (min-width: 769px) {
    :root {
    --fluid-w: 1381;
    }
}

/* ==========================================
共通部分のオーバーライド
========================================== */
.header_main{
    padding-bottom: calc(70 / var(--fluid-w)*100vw);
}
@media screen and (max-width: 768px) {
    .header_main{
        padding-bottom: calc(92 / var(--fluid-w)*100vw);
    }
}
/* ==========================================
記事詳細
========================================== */
/* フルリキッドなレイアウトコンテナ */
.folder-main{
    padding:0 6.154960173787111vw;
}
.folder-wrapper {
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 768px) {
    .folder-layout-container {
        padding: 6vw 4vw; /* 左右の余白（可変） */
    }
}
@media screen and (min-width: 769px) {
    .folder-layout-container {
        padding: 5vw 8vw; /* 左右の余白（可変） */
    }
}

/* ==========================================
タブデザイン（SVGパス結合方式）
========================================== */
.folder-tab {
    display: flex;
    align-items: flex-end; /* 下揃えで結合 */
    /* 下のコンテンツとの間にできる1pxの隙間を消す */
    margin-bottom: -1px; 
    position: relative;
    z-index: 2;
}
/* 左側の本体（四角 ＋ 左上角丸） */
.folder-tab-main {
    background-color: var(--folder-bg);
    height: 30px;
    width: 80px;
    /* 右側はSVGに任せるため、padding-rightは少なめに */
    padding: 0 8px 0 24px; 
    border-radius: var(--folder-radius) 0 0 0;
    display: flex;
    align-items: center;
}
/* 右側のS字カーブ（インラインSVG） */
.tab-curve {
    height: 30px; /* 本体の高さと完全に一致させる */
    width: 70px; /* 傾斜角度調整用 */
    color: var(--folder-bg); /* currentColorでfillされる */
    /* 本体との間にできる横の隙間を消すためのネガティブマージン */
    margin-left: -1px; 
    display: block;
}
/* SP用SVGはPCでは隠す */
.sp-curve { display: none; }

@media screen and (max-width: 768px) {
    .folder-tab-main {
        height: 34px;
        width: 60px;
        padding: 0 6px 0 16px;
        border-radius: var(--folder-radius) 0 0 0;
    }
    .tab-curve {
        height: 34px; /* SP用の高さに合わせる */
        width: 90px; /* 傾斜角度調整用 */
    }
    .pc-curve { display: none; }
    .sp-curve { display: block; }
}


/* フォルダコンテンツ ***************************************************/
/* フォルダコンテンツの共通設定 */
.folder-content {
    background-color: var(--folder-bg);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* テキスト要素 */
.folder-content .post-date {
    display: block;
    color: var(--text-date);
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size:calc(10 / var(--fluid-w)*100vw);
}

.folder-content .post-title {
    color: var(--text-title);
    line-height: 1.4;
}

.folder-content .post-body p {
    color: var(--text-main);
    line-height: 1.8;
    margin: 0;
    /* リキッドレイアウトにおいて両端揃えにすると綺麗に見えます */
    text-align: justify; 
    font-size:calc(16 / var(--fluid-w)*100vw);
    font-weight: bold;
    letter-spacing: 0.01em;
}
@media screen and (max-width: 768px) {
    .folder-content {
        border-radius: 0 var(--folder-radius) var(--folder-radius) var(--folder-radius);
        padding: 6vw 7vw 14vw; /* フォルダ内の余白（可変） */
    }
    
    .folder-content .post-date {
        margin-bottom: 3vw;
    }
    .folder-content .post-title {
        margin: 0 0 6vw 0;
        font-size:calc(18 / var(--fluid-w)*100vw);
        font-weight: bold;
    }
    .folder-content .post-body {
        display: flex;
        flex-direction: column;
        gap: 4vw;
    }
    .folder-content .post-body p {
    }
    .folder-content .post-image {
        margin-top: 6vw;
    }
}
@media screen and (min-width: 769px) {
    .folder-content {
        border-radius: 0 var(--folder-radius) var(--folder-radius) var(--folder-radius);
        padding: 5vw 6vw; /* フォルダ内の余白（可変） */
    }
    
    .folder-content .post-date {
        margin-bottom: 1.5vw;
    }
    .folder-content .post-title {
        margin: 0 0 3vw 0;
        letter-spacing: 0.08em;
        font-size:calc(35 / var(--fluid-w)*100vw);
    }
    .folder-content .post-body {
        display: flex;
        flex-direction: column;
        gap: 2vw;
    }
    .folder-content .post-body p {
    }
    .folder-content .post-image {
        margin-top: 4vw;
    }
}

/* 一覧に戻るボタン ***************************************************/
.folder-bottombutton {
    position: relative;
    display: block;
    z-index: 1;
    padding-top: calc(50 / var(--fluid-w)*100vw);
    padding-bottom: calc(140 / var(--fluid-w)*100vw);
}
.folder-bottombutton .btn {
  margin:0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 100vmax;
  background-color: #fff;
  font-weight: 700;
  color: var(--primary);
}
.folder-bottombutton .btn::before {
  content: "";
  border-radius: 50%;
  background-color: #fff;
}
@media screen and (min-width: 769px) {
  .folder-bottombutton .btn {
    width: 17.4904831625vw;
    height: 5.1636896047vw;
    padding: 0 2.8184480234vw 0 2.9282576867vw;
    font-size: 0.9516837482vw;
  }
  .folder-bottombutton .btn::before {
    width: 2.2693997072vw;
    height: 2.2693997072vw;
    border: 0.878477306vw solid var(--primary);
  }
}
@media screen and (max-width: 768px) {
  .folder-bottombutton .btn {
    width: 60.5333333333vw;
    height: 20.2666666667vw;
    padding: 0 8.2666666667vw;
    font-size: 3.4666666667vw;
  }
  .folder-bottombutton .btn::before {
    width: 8.2666666667vw;
    height: 8.2666666667vw;
    border: 3.2vw solid var(--primary);
  }
}




/* ==========================================
記事一覧
========================================== */
/* フルリキッドなレイアウトコンテナ */
.topics-archive-container {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 0 120px 0; /* 上下の大きな余白 */
}

.topicslist-layout-container {
    margin: 0 auto;
    --pr-min: 80;
    --pr-max: 90;
    padding-right: var(--pr-val);
    --pl-min: 80;
    --pl-max: 90;
    padding-left: var(--pl-val);
}

/* 記事リスト全体 */
.topics-list {
    display: flex;
    flex-direction: column;
    gap: 32px; /* 記事同士の縦の隙間 */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* リストアイテムデザイン（横長タブとコンテンツ）*/
.topicslist-wrapper {
    display: flex;
    flex-direction: column;
}
@media screen and (max-width: 768px) {
    :root {
        --slope-angle: 25deg;
        --fillet-radius: 14px;
        --overlap: 12px;
        --corner-smoothing: 6px;
    }
    .topicslist-layout-container {
        --pr-min: 20;
        --pr-max: 40;
        padding-right: var(--pr-val);
        --pl-min: 20;
        --pl-max: 40;
        padding-left: var(--pl-val);
    }
}
@media screen and (min-width: 769px) {
    :root {
        --slope-angle: 25deg;
        --fillet-radius: 20px;
        --overlap: 16px;
        --corner-smoothing: 8px;
    }
    .topicslist-layout-container {
    }
}


/* タブ要素 ***********************************************/
.topicslist-tab {
    display: flex;
    align-items: flex-end; /* 下揃えで結合 */
    /* 下のコンテンツとの間にできる1pxの隙間を消す */
    margin-bottom: -1px; 
    position: relative;
    z-index: 2;
}
/* 左側の本体（四角 ＋ 左上角丸） */
.topicslist-tab-main {
    font-size: 8pt;
    background-color: var(--folder-bg);
    height: 30px;
    width: 80px;
    /* 右側はSVGに任せるため、padding-rightは少なめに */
    padding: 0 8px 0 24px; 
    border-radius: var(--folder-radius) 0 0 0;
    display: flex;
    align-items: center;
}
/* 右側のS字カーブ（インラインSVG） */
.topicslist-tab .tab-curve {
    height: 30px; /* 本体の高さと完全に一致させる */
    width: 70px; /* 傾斜角度調整用 */
    color: var(--folder-bg); /* currentColorでfillされる */
    /* 本体との間にできる横の隙間を消すためのネガティブマージン */
    margin-left: -1px; 
    display: block;
}
/* SP用SVGはPCでは隠す */
.topicslist-tab .sp-curve { display: none; }
/* 日付部分 */
.topicslist-tab-date {
    margin-left:-120px;
    margin-bottom:-5px;
    font-size:8pt;
    letter-spacing:0;
}
@media screen and (max-width: 768px) {
    .topicslist-tab .topicslist-tab-main {
        height: 34px;
        width: 60px;
        padding: 0 6px 0 16px;
        border-radius: var(--folder-radius) 0 0 0;
    }
    .topicslist-tab .tab-curve {
        height: 34px; /* SP用の高さに合わせる */
        width: 90px; /* 傾斜角度調整用 */
    }
    .topicslist-tab .pc-curve { display: none; }
    .topicslist-tab .sp-curve { display: block; }
    .topicslist-tab-date {
        margin-bottom:-3px;
        margin-left:-130px;
    }
}

/* contents部分 ***********************************************/
:root {
    --topicslist-bg: #f4f7f8;  /* リストアイテムの背景色 */
    --topicslist-text-title: #223f5e;     /* 紺色のテキスト（タイトル・ボタン） */
    --topicslist-text-date: #6385a6;      /* 少し薄い青（日付用） */
}
.topicslist-content {
    background-color: var(--topicslist-bg);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    display: flex; /* タイトルとボタンを横並びにするため */
}

/* --- テキスト・ボタン要素 --- */
/* 同名クラスの競合を防ぐため、親要素を指定 */
.topicslist-tab .post-date {
    position: relative;
    z-index: 3; /* 背景・3Dパーツより上に配置 */
    color: var(--topicslist-text-date);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.topicslist-content .post-title {
    margin: 0;
    color: var(--topicslist-text-title);
    line-height: 1.5;
    font-weight: bold;
}

.topicslist-content .post-title a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s;
}

.topicslist-content .post-title a:hover {
    opacity: 0.7;
}

.topicslist-content .view-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--topicslist-text-title);
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0; /* タイトルが長くてもボタンが潰れないようにする */
    transition: opacity 0.3s;
}

.topicslist-content .view-more:hover {
    opacity: 0.7;
}
@media screen and (max-width: 768px) {
    :root {
        --topicslist-radius: 18px;
    }
    .topics-list {
        gap: 30px;
    }
    .topicslist-content {
        border-radius: 0 var(--topicslist-radius) var(--topicslist-radius) var(--topicslist-radius);
        padding: 24px calc(20 / var(--fluid-w)*100vw);
        flex-direction: column; /* SPは縦並び */
        align-items: flex-start;
        gap: 20px;
    }
    .topicslist-content .post-title a {
        font-size: 10.5pt;
    }
    .topicslist-content .view-more {
        font-size: 13px;
        align-self: flex-end; /* SPでは右下に配置 */
    }
}
@media screen and (min-width: 769px) {
    :root {
        --topicslist-radius: 18px;
    }
    .topicslist-content {
        border-radius: 0 var(--topicslist-radius) var(--topicslist-radius) var(--topicslist-radius);
        padding: 30px 28px;
        justify-content: space-between; /* PCは左右に散らす */
        align-items: center;
    }
    
    .topicslist-content .post-title {
        font-size: 20px;
    }
    .topicslist-content .view-more {
        font-size: 9pt;
    }
}
/* ページネーション部分 ***********************************************/
:root {
    --pagination-bg: #cedbe3;  /* ページネーションのグレー背景 */
}
/*ページネーション（丸いボタン） */
.topics-pagination {
    margin-top: 80px;
    margin-bottom: 50px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.nav-links {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* ボタン同士の隙間 */
}

.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--pagination-bg);
    color: var(--text-title);
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
}

.page-numbers:hover {
    background-color: #b8c8d4; /* ホバー時は少し濃く */
}

/* 現在のページ */
.page-numbers.current {
    background-color: #ffffff;
    cursor: default;
}

.page-numbers.current:hover {
    background-color: #ffffff; /* 現在ページはホバー色を変えない */
}

/* 次へ・前への矢印 */
.page-numbers.next,
.page-numbers.prev {
    background-color: transparent;
    width: auto;
    border-radius: 0;
    padding: 0 5px;
    font-weight: normal;
    display: inline-flex;
    align-items: center;
}

.page-numbers.next:hover,
.page-numbers.prev:hover {
    background-color: transparent;
    opacity: 0.6;
}
@media screen and (max-width: 768px) {
    .topics-pagination {
        margin-top: 45px;
        margin-bottom: 0px;
    }
}