@charset "utf-8";
/* ============================================================
   2609 hashgift.org/en/ 共通の読みやすさ調整（各ページのCSSのあとに読み込む）
   ・本文の書体：見出し用の飾り書体（Marcellus など）が本文にも効いていて
     読みにくかったため、本文・説明文は読みやすい書体にそろえた。
     見出しはこれまでどおり飾り書体のまま。
   ・文字を少し大きく（15〜16px）、行間を広め（1.8〜1.9）にした。
   ・日本語表示のときの改行位置を整えた。
   ============================================================ */
:root{
    --font-body: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
        "Noto Sans JP", Meiryo, system-ui, sans-serif;
}
body,
p, li, dd, dt, td, th, span, small, figcaption, label, input, textarea, button{
    font-family: var(--font-body);
}
body{
    font-size: 16px;
    line-height: 1.9;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* 見出し・ロゴ・ボタンの飾り文字はそのまま */
h1, h2, h3, .logo, .btn span, .sub, #menu a{
    font-family: 'Marcellus', 'Oswald', serif;
}
h2{ line-height: 1.5; letter-spacing: .04em; }
h3{ line-height: 1.6; }
p{ margin-bottom: 1em; }
/* 作品一覧のキャプション。以前は小さすぎて読みにくかった */
.grid span, .list span, .img-box + span{
    font-size: 14px;
    line-height: 1.8;
}
/* 日本語のときは、単語の途中で折り返さない */
html[lang="ja"] body,
.l-ja{ word-break: normal; overflow-wrap: anywhere; line-break: strict; }
@media screen and (max-width:768px){
    body{ font-size: 15px; line-height: 1.85; }
    .grid span, .list span, .img-box + span{ font-size: 13px; }
}
/* 2609 動くサムネイル（もとはGIF）。動画に差し替えて軽くしている */
.gifv{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #efeae7;
}

/* ============================================================
   2609 作品一覧（Web制作ページ・動画紹介ページ）のカードレイアウト
   ・画像と説明文がつながって見えず、どこまでが1件か分かりにくかったので、
     1件ずつ白いカードにまとめ、画像の縦横比をそろえた。
   ・説明文は左ぞろえにして、行間と文字の大きさを読みやすくした。
   ・画像の左上に分類（Story / Voice / Promotion など）を出す。
     文言は各ページ側で指定する。
   ・横幅が広い画面では4列、ふつうのPCは3列、タブレット2列、スマホ1列。
   ============================================================ */
.grid .item{ width: 33.3333%; }
@media screen and (min-width:1500px){ .grid .item{ width: 25%; } }
@media screen and (max-width:768px){ .grid .item{ width: 50%; } }
@media screen and (max-width:480px){ .grid .item{ width: 100%; } }

.grid .item-content{
    position: relative;
    margin: 10px;
    padding: 0;
    width: auto;
    background: #fff;
    border: 1px solid #ece7e4;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(60,40,30,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.grid .item-content:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(60,40,30,.16);
}
.grid .item-content a{ display: block; color: #4a4340; text-decoration: none; }
.grid .img-box{
    position: relative;
    aspect-ratio: 16 / 9;
    background: #f3efec;
    overflow: hidden;
}
.grid .img-box img,
.grid .img-box video,
.grid .item-content > a > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.grid .item-content > a > img{ aspect-ratio: 16 / 9; height: auto; }
.grid .item-content span{
    display: block;
    text-align: left;
    padding: 12px 14px 14px;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: .01em;
    color: #4a4340;
}
.grid .item-content span u{ text-decoration: none; border-bottom: 1px solid currentColor; }
/* 分類のラベル（文言は各ページのCSSで指定） */
.grid .item-content::before{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 2px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,.92);
    color: #8c3b2e;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: .04em;
    line-height: 1.8;
    box-shadow: 0 1px 4px rgba(60,40,30,.12);
}
/* 絞り込みボタンを押しやすいボタン型に */
.sort-btn li{
    border: 1px solid #d8cdc8;
    border-radius: 20px;
    padding: 6px 18px !important;
    margin: 4px 6px !important;
    font-size: 14px;
    line-height: 1.6;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.sort-btn li::after{ display: none !important; }
.sort-btn li:hover{ background: #f6efec; }
.sort-btn li.active{ background: #8c3b2e; border-color: #8c3b2e; color: #fff; }


/* 2609 制作事例のカードの出しかた

   もともとは .item{opacity:0}（透明）で、スクロールして画面に近づいたときに
   初めて出る作りだった。ところがJS側の「ProgressBar is not defined」という
   エラーで表示処理が止まり、スクロールしても出ないことがあった。

   いまの作り
   ・土台は opacity:1。JSが動かない・止まった環境でも、必ず見える
   ・JSが動く環境では <html> に jsCards が付き、いったん透明にしてから、
     読み込み直後に1枚目から順に fadeUp を当てて流して出す
   ・万一アニメーションが始まらなかったときは、2.5秒後に jsCards を外して全部出す
     （各ページ <head> の保険のJS） */
.grid .item{ opacity: 1; }
html.jsCards .grid .item{ opacity: 0; }
/* fadeUp は animation-fill-mode:forwards なので、動き出せば上の 0 より優先される */