@charset "utf-8";
/* ============================================================
   2620 hashgift.org/en/ 下層ページ（動画制作・Web制作・会社概要）の見やすさ調整
   ・各ページの CSS と ../common.css のあとに読み込む（内容・文言は変えず、見た目だけ）。
   ・<body> の class でページを見分ける：pg-video（動画）／ pg-web（Web）／ pg-about（会社概要）
   ・分類タグの色：プロモーション＝オレンジ／ボイス＝ブルー／ストーリー＝パープル
   ============================================================ */
:root{
    --ink: #3a3230;          /* 本文の文字色 */
    --ink-sub: #6b625e;      /* 補足の文字色 */
    --line: #e6dfdb;         /* 罫線 */
    --paper: #ffffff;        /* カードの地 */
    --brand: #8c3b2e;        /* サイトの基調色（すべて・見出しのアクセント） */
    --accent: #eb6100;       /* リンクの色 */
    --c-promo: #e2602a;      /* プロモーション */
    --c-promo-bg: #fdeee6;
    --c-voice: #1f7fae;      /* ボイス */
    --c-voice-bg: #e7f2f8;
    --c-story: #2e8b57;      /* ストーリー */
    --c-story-bg: #e8f4ec;
    --c-site: #1f7fae;       /* Web制作：Website */
    --c-site-bg: #e7f2f8;
    --c-svc: #2e8b57;        /* Web制作：Web Service */
    --c-svc-bg: #e8f5ee;
}

body.pg-video, body.pg-web, body.pg-about{ color: var(--ink); }

/* ------------------------------------------------------------
   最初の大きな写真：スマホでは画面いっぱいにせず、すぐ下の内容が見えるように
   ------------------------------------------------------------ */
@media screen and (max-width:768px){
    body.pg-video #slider, body.pg-web #slider, body.pg-about #slider{ height: 58vh; min-height: 300px; }
}

/* ------------------------------------------------------------
   見出し（Portfolio / 制作事例・Overview・News など）
   ------------------------------------------------------------ */
.pg-video .smalltitle, .pg-web .smalltitle,
.pg-about .microtitle{
    font-family: 'Marcellus', "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem);
    line-height: 1.4;
    letter-spacing: .08em;
    color: var(--ink);
    text-align: center;
    padding: clamp(36px, 5vw, 64px) 16px 0;
}
.pg-video .smalltitle br{ display: none; }
.pg-video .smalltitle::after, .pg-web .smalltitle::after,
.pg-about .microtitle::after{
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: var(--brand);
}

/* 本文の中の小見出し（Graphics / Workflow / Our Strengths など） */
.pg-video .microtitle-left, .pg-web .smalltitle-left{
    font-family: 'Marcellus', "Hiragino Mincho ProN", "Yu Mincho", serif;
    font-size: clamp(1.2rem, 1rem + .7vw, 1.5rem);
    line-height: 1.5;
    letter-spacing: .05em;
    color: var(--ink);
    margin: 2.2em 0 .7em;
    padding: 0 0 0 14px;
    border-left: 4px solid var(--brand);
}
.pg-video .microtitle-left br{ display: none; }
.pg-video .boxout > .microtitle-left:first-child, .pg-web .boxout > .smalltitle-left:first-child{ margin-top: .6em; }

/* 本文のまとまり：1行が長くなりすぎないよう幅をおさえて中央に */
.pg-video .boxout, .pg-web .boxout{
    max-width: 880px;
    margin: 0 auto;
    padding: 12px 20px 56px;
    font-size: 16px;
    line-height: 1.95;
    color: var(--ink);
}
.pg-web .boxout:empty{ display: none; }
.pg-video .boxout a, .pg-web .boxout a{ color: var(--ink); }
.pg-video .boxout a u{ text-decoration: none; border-bottom: 1px solid rgba(140,59,46,.45); transition: border-color .2s, color .2s; }
.pg-video .boxout a:hover u{ color: var(--brand); border-bottom-color: var(--brand); }
@media screen and (max-width:768px){
    .pg-video .boxout, .pg-web .boxout{ font-size: 15px; line-height: 1.9; padding: 8px 18px 44px; }
}

/* ------------------------------------------------------------
   絞り込みボタン（すべて／ストーリー／ボイス／プロモーション など）
   ・色の丸で分類の色を見せる。選ぶとその色で塗る。
   ・スマホで文字の途中で折り返さないようにした（以前は「すべ／て」のように折れていた）
   ------------------------------------------------------------ */
.pg-video .sort-btn, .pg-web .sort-btn{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 22px auto 18px !important;
    padding: 0 12px !important;
}
.pg-video .sort-btn li, .pg-web .sort-btn li{
    --c: var(--brand);
    --c-bg: #f6efec;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 8px 18px !important;
    min-height: 40px;
    white-space: nowrap;
    word-break: keep-all;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-sizing: border-box;
}
.pg-video .sort-btn li::before, .pg-web .sort-btn li::before{
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c);
    flex: 0 0 auto;
}
.pg-video .sort-btn li.sort00::before, .pg-web .sort-btn li.sort00::before{ display: none; }
.pg-video .sort-btn li:hover, .pg-web .sort-btn li:hover{ background: var(--c-bg); border-color: var(--c); }
.pg-video .sort-btn li.active, .pg-web .sort-btn li.active{ background: var(--c); border-color: var(--c); color: #fff; }
.pg-video .sort-btn li.active::before, .pg-web .sort-btn li.active::before{ background: #fff; }
.pg-video .sort-btn li.sort01{ --c: var(--c-promo); --c-bg: var(--c-promo-bg); }
.pg-video .sort-btn li.sort02{ --c: var(--c-story); --c-bg: var(--c-story-bg); }
.pg-video .sort-btn li.sort03{ --c: var(--c-voice); --c-bg: var(--c-voice-bg); }
.pg-web .sort-btn li.sort01{ --c: var(--c-site); --c-bg: var(--c-site-bg); }
.pg-web .sort-btn li.sort02{ --c: var(--c-svc); --c-bg: var(--c-svc-bg); }
@media screen and (max-width:480px){
    .pg-video .sort-btn, .pg-web .sort-btn{ gap: 6px; padding: 0 10px !important; }
    .pg-video .sort-btn li, .pg-web .sort-btn li{ padding: 7px 13px !important; font-size: 13px; min-height: 38px; gap: 6px; }
}

/* ------------------------------------------------------------
   作品カード
   ・分類のラベルを色分け（文言は各ページの CSS のまま）
   ・作品名（1行目）を太字に、発注元（2行目）は細字にして区別しやすく
   ------------------------------------------------------------ */
.pg-video .grid .item-content::before, .pg-web .grid .item-content::before{
    color: #fff;
    background: var(--brand);
    padding: 3px 11px;
    font-size: 11.5px;
    letter-spacing: .06em;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.pg-video .grid .item.sort01 .item-content::before{ background: var(--c-promo); }
.pg-video .grid .item.sort02 .item-content::before{ background: var(--c-story); }
.pg-video .grid .item.sort03 .item-content::before{ background: var(--c-voice); }
.pg-web .grid .item.sort01 .item-content::before{ background: var(--c-site); }
.pg-web .grid .item.sort02 .item-content::before{ background: var(--c-svc); }

/* カードの下の線で分類の色を見せる（タグが隠れる小さな画面でも分かるように） */
.pg-video .grid .item-content, .pg-web .grid .item-content{ border-bottom-width: 3px; }
.pg-video .grid .item.sort01 .item-content{ border-bottom-color: var(--c-promo); }
.pg-video .grid .item.sort02 .item-content{ border-bottom-color: var(--c-story); }
.pg-video .grid .item.sort03 .item-content{ border-bottom-color: var(--c-voice); }
.pg-web .grid .item.sort01 .item-content{ border-bottom-color: var(--c-site); }
.pg-web .grid .item.sort02 .item-content{ border-bottom-color: var(--c-svc); }

.pg-video .grid .item-content span, .pg-web .grid .item-content span{
    font-size: 14.5px;
    line-height: 1.75;
    font-weight: 500;
    color: var(--ink);
    padding: 12px 16px 16px;
}
@media screen and (min-width:769px){
    .pg-video .grid .item-content, .pg-web .grid .item-content{ margin: 12px; }
}
@media screen and (max-width:480px){
    .pg-video .grid .item-content, .pg-web .grid .item-content{ margin: 8px 14px 14px; }
    .pg-video .grid .item-content span, .pg-web .grid .item-content span{ font-size: 14px; padding: 10px 14px 14px; }
}

/* ------------------------------------------------------------
   会社概要
   ------------------------------------------------------------ */
.pg-about #about{ margin: 0 0 72px 0; }
.pg-about #about .about-list{
    width: auto;
    max-width: 880px;
    margin: 24px auto 0;
    padding: 0 20px;
    background: transparent;
}
.pg-about #about .about-list li{
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.pg-about #about .about-list li:first-child{ border-top: 1px solid var(--line); }
.pg-about #about .about-list dl{
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 6px 28px;
    align-items: start;
}
.pg-about #about .about-list dt{
    width: auto;
    padding: 0 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--brand);
    line-height: 1.9;
}
.pg-about #about .about-list dd{
    width: auto;
    font-size: 16px;
    line-height: 1.9;
    color: var(--ink);
}
.pg-about #about .about-list dd img{
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 10px 0;
}
.pg-about #about .about-list dd a{ color: var(--ink); }
.pg-about #about .about-list dd a u{ text-decoration: none; border-bottom: 1px solid rgba(140,59,46,.45); }
.pg-about #about .about-list dd a:hover u{ color: var(--brand); border-bottom-color: var(--brand); }
@media screen and (max-width:640px){
    .pg-about #about .about-list{ padding: 0 18px; }
    .pg-about #about .about-list li{ padding: 14px 0; }
    .pg-about #about .about-list dl{ grid-template-columns: 1fr; gap: 2px; }
    .pg-about #about .about-list dt{ font-size: 12.5px; padding: 0; }
    .pg-about #about .about-list dd{ font-size: 15px; }
}

/* News：1件ずつカードにして読みやすく */
.pg-about #news{ max-width: 880px; padding: 8px 20px 0; box-sizing: border-box; width: 100%; }
.pg-about #news .news-list li{
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    padding: 18px 20px 14px;
    margin: 0 0 16px 0;
}
.pg-about #news .news-body{
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--ink);
}
.pg-about #news .news-link{ font-size: 14px; color: var(--ink-sub); margin: 0; }
@media screen and (max-width:640px){
    .pg-about #news{ padding: 0 16px; }
    .pg-about #news .news-list li{ padding: 14px 16px 10px; }
    .pg-about #news .news-body{ font-size: 15px; }
}

/* ------------------------------------------------------------
   フッター：文字を少し大きく、スマホでは押しやすい間隔に
   ------------------------------------------------------------ */
.pg-video .footer-area, .pg-web .footer-area, .pg-about .footer-area{ max-width: 1100px; margin: 0 auto; font-size: 14.5px; }
.pg-video .footer-area a, .pg-web .footer-area a, .pg-about .footer-area a{ color: var(--ink); }
.pg-video .footer-area a:hover, .pg-web .footer-area a:hover, .pg-about .footer-area a:hover{ color: var(--brand); }
@media screen and (max-width:545px){
    .pg-video .footer-area li, .pg-web .footer-area li, .pg-about .footer-area li{ line-height: 2.6; }
}