/* ============================================================
   familign. works-post.css
   - 制作実績詳細ページ（/works/[slug]/）固有のスタイル
   - common.css（フォント・変数・リセット・背景・ヘッダー・
     ドロワー・フッター等）と blog-post.css（記事タイトル／メタ／
     アイキャッチ／本文見出しh2・h3／box-list等の「テンプレパーツ」）を
     先に読み込んでからこのファイルを読み込む。
   - 記事系の見た目（.article-title / .article-meta / .article-eyecatch /
     .article-body 等）はblog-post.cssのものをそのまま流用し、
     このファイルでは制作実績特有のパーツ（概要テーブル・画像準備中の
     プレースホルダー・カテゴリタグ・一覧へ戻るリンク）のみを追加する
   ============================================================ */

    .bg__object--asanoha-2{
        display: none;
    }

    @media (max-width: 48em) {
            .bg__object--asanoha-1 {
                display: none;
            }
            .bg__object--shibori-1 {
                        display: none;
            }
    }

/* ============================================================
   Works Info（制作概要テーブル）
   about.css の .company__table と同じ考え方（dl+dt+dd の交互背景）
   ============================================================ */

.main--lower section + section.works-info{
    margin-top: 3em;
    margin-bottom: 2em;
}
.works-info__table {
    max-width: 620px;
    margin-inline: auto;
    border-top: 1px solid var(--color-line);
}

.works-info__row {
    padding: 0 5%;
    display: flex;
    align-items: center;
    line-height: 1.8;
    border-bottom: 1px solid var(--color-line);
}

.works-info__row:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.6);
}

.works-info__label {
    flex-shrink: 0;
    width: 30%;
    min-width: 5em;
    padding: .8em 0;
    font-weight: 500;
}

.works-info__value {
    padding: .8em 0;
    color: var(--color-text-sub);
    font-size: .95em;
}
.works-info__value>a:hover{
    text-decoration: none;
}

@media (max-width: 48em) {
    .works-info__label {
        width: 34%;
        font-size: .9em;
    }
    .works-info__value {
        font-size: .88em;
    }
}

/* ============================================================
   Works Tags（カテゴリタグ）
   ============================================================ */
.works-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6em;
    margin-top: .8em;
}

.works-tags__item {
    padding: .2em 1em;
    border: 1px solid var(--color-accent-dark);
    border-radius: var(--radius-full);
    font-size: .8em;
    color: var(--color-accent-dark);
}

/* ============================================================
   Works Eyecatch Placeholder（画像準備中）
   実際の実績画像は差し替え予定のため、暫定的にプレースホルダーを表示する
   ============================================================ */
.works-eyecatch-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    background-color: var(--color-bg-card);
    border: 1px dashed var(--color-line);
    border-radius: var(--radius-s);
    color: var(--color-text-sub);
    font-size: .9em;
    text-align: center;
    line-height: 1.8;
}

.article-eyecatch__inner{
    border: none;
    filter: drop-shadow(0 0.2rem .5rem rgba(0, 0, 0, 0.17));
}

.article-title__heading>span{
    display: inline-block;
}

.article-title__heading{
    position: relative;
    margin-bottom: 1.2em;
    font-size: 1.5em;
    line-height: 1.5;
    text-align: center;
}

.article-title__heading::before, .article-title__heading::after {
    content: "";
    display: block;
    width: clamp(6rem, 5rem + 4vw, 10rem);
    height: 0.3rem;
    margin: 0 auto;
    background-image: radial-gradient(circle, var(--color-primary) 32%, rgba(0, 0, 0, 0) 33%);
    background-size: 0.7rem 0.7rem;
    background-position: center;
    background-repeat: repeat-x;
}
.article-title__heading::before {
    margin-bottom: 0.5em;
}
.article-title__heading::after {
    margin-top: 0.5em;
}

.article-body h2{
    font-size: 1.5em;
}

/* ============================================================
   Works Link（制作物URLボタン）
   service-block__works-more-link（service.css）と同じゴールドボタン
   デザインに統一する
   ============================================================ */
.works-link {
    margin-top: 1.6em;
    text-align: center;
}

.works-link__item + .works-link__item {
    margin-top: .6em;
}

.works-link a {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 600px;
    padding: .9em 2.4em .9em 1.6em;
    background-color: var(--color-accent);
    font-weight: 700;
    color: var(--color-white);
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease, opacity 0.3s ease;
    text-shadow: none;
}

.works-link a:hover {
    background-color: var(--color-accent-dark);
    opacity: 1;
}

.works-link a::before {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 1.2rem 1.2rem;
    border-color: rgba(0,0,0,0) rgba(0,0,0,0) #fff rgba(0,0,0,0);
}

/* ============================================================
   Works Back（制作実績一覧へ戻る）
   article-nav__arrowと同じCSS実装（右下2辺のみ枠線にして
   45度回転させたシェブロン）を「戻る」向きに使う
   ============================================================ */
.works-back {
    text-align: center;
}

.works-back__link {
    display: inline-flex;
    align-items: center;
    gap: 1em;
}

.works-back__arrow {
    position: relative;
    flex: 0 0 auto;
    width: 2.4em;
    height: 2.4em;
    transition: transform .3s ease;
}

.works-back__link:hover .works-back__arrow {
    transform: translateX(-0.4em);
}

.works-back__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    border-right: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
    transform: translate(-30%, -50%) rotate(135deg);
}

.works-back__text {
    font-weight: 500;
}

.works-info__value>a{
    text-decoration: underline;
}
.works-info__value:hover{
    text-decoration: none;
}