body {
    font-family: "Noto Sans JP",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

a,
a:hover,
a:visited,
a:active {
    color: inherit;
    text-decoration: none;
}

.contents {
    padding: 48px;
}

/**********************
  タブ
 *********************/

/* 切り替えは隠したラジオボタンで行う。キーボードで選べるよう、display: none にはしない */
.tab-list .tab-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tab-list {
    position: relative; /* 隠したラジオボタンの位置（フォーカスしたときにページが飛ばないように） */
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

/* タブ 2 枚 */
.tab-label-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    margin-bottom: 48px;
}

.tab-label-list label {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 18px 22px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-bottom-width: 4px;
    background-color: #fff;
    transition: border-color 0.15s;
}

.tab-label-list label:hover {
    border-color: #bbb;
}

#tab1:checked ~ .tab-label-list label[for="tab1"],
#tab2:checked ~ .tab-label-list label[for="tab2"] {
    border-color: #333;
    border-bottom-color: #D7302D;
}

#tab1:focus-visible ~ .tab-label-list label[for="tab1"],
#tab2:focus-visible ~ .tab-label-list label[for="tab2"] {
    outline: 2px solid #D7302D;
    outline-offset: 3px;
}

/* 新しいタイトルの画像。選んでいないタブは白黒にして、マウスを乗せると色を付ける */
.tab-pics {
    flex: none;
    display: flex;
    align-items: center;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.2s, opacity 0.2s;
}

.tab-label-list label:hover .tab-pics,
#tab1:checked ~ .tab-label-list label[for="tab1"] .tab-pics,
#tab2:checked ~ .tab-label-list label[for="tab2"] .tab-pics {
    filter: none;
    opacity: 1;
}

/* 左の（新しい）画像ほど手前に重ねる */
.tab-pics img {
    position: relative;
    display: block;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tab-pics img:nth-child(1) { z-index: 4; }
.tab-pics img:nth-child(2) { z-index: 3; }
.tab-pics img:nth-child(3) { z-index: 2; }
.tab-pics img:nth-child(4) { z-index: 1; }

.tab-pics.social img {
    width: 92px;
    height: 50px;
    object-fit: cover;
}

.tab-pics.social img + img {
    margin-left: -28px;
}

.tab-pics.casual img {
    width: 48px;
    height: 48px;
    border-radius: 22%;
}

.tab-pics.casual img + img {
    margin-left: -14px;
}

.tab-name {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #222;
}

.tab-desc {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: #707070;
}

/* 選択中のコンテンツを表示 */
#tab1:checked ~ #tab-content1,
#tab2:checked ~ #tab-content2 {
    display: block;
}

/* コンテンツ */
.tab-content {
    display: none;
    width: 100%;
}

/**********************
  プロダクト一覧
 *********************/

.product-list {
    display: grid;
    gap: 60px;
    grid-template-columns: repeat(2, 1fr);
    margin: 16px 0 48px 0;
}

.product-thumbnail {
    width: 100%;
    max-width: 550px;
    aspect-ratio: 550 / 300;
    object-fit: cover;
    align-self: center;
    display: block;
    margin-bottom: 8px;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-thumbnail:hover {
    transform: scale(1.05);
}

/* サ終済みなら拡大を無効化 */
.product-thumbnail.disabled:hover {
    transform: none;
}

.product-thumbnail.border {
    border: 1px solid #ddd;
}

.product-title {
    font-size: 1.7em;
    font-weight: 700;
    margin-bottom: 4px;
}

.product-tag-list {
    display: flex;
    align-items: center;
    gap: 14px;
}

.product-tag {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    border-radius: 4px;
}

.product-tag.role {
    background-color: #323232;
    padding: 6px 30px 6px 30px;
}

.product-tag.area {
    background-color: #AA64FF;
    padding: 6px 14px 6px 14px;
}

.product-store-list a,
.product-store-list a:hover,
.product-store-list a:visited,
.product-store-list a:active {
    color: inherit;
    text-decoration: underline;
}

.product-store-list {
    display: flex;
    align-items: center;
    gap: 14px;
}

.product-store {
    display: inline-flex;
    align-items: center;
    font-size: 0.85em;
}

.product-store img {
    height: 2.5em;
    width: auto;
}

/**********************
  カジュアルゲーム一覧
 *********************/

.casual-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* 上下のページ送り。上はソーシャルゲームの一覧と同じくタブから 64px（タブの下 48px + 16px）で始め、
   一覧との間は上下とも 32px にそろえる */
.tab-content > .pager {
    margin: 16px 0 32px 0;
}

.tab-content > .casual-list + .pager {
    margin: 32px 0 48px 0;
}

.casual-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e3e3e3;
    background-color: #fff;
    transition: border-color 0.15s;
}

.casual-card:hover {
    border-color: #ccc;
}

/* アイコンと文章。アイコンは 2 行のキャッチコピーと高さがそろう 100px */
.casual-main {
    flex: 1;
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 20px;
    align-items: start;
    padding: 22px 24px 20px 24px;
}

.casual-icon {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 22%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s;
}

.casual-main > a:hover .casual-icon {
    transform: translateY(-2px);
}

.casual-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: #707070;
    letter-spacing: 0.02em;
}

.casual-new {
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #fff;
    background-color: #D7302D;
    border-radius: 2px;
}

.casual-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    color: #222;
    margin: 2px 0 6px 0;
}

.casual-title a:hover,
.casual-card:has(.casual-main > a:hover) .casual-title a {
    color: #D7302D;
}

.casual-catch {
    font-size: 0.84rem;
    line-height: 1.7;
    color: #555;
    margin: 0;
    word-break: auto-phrase;
    text-wrap: pretty;
    /* 長い説明文は 3 行で切る */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ストアへのボタン。文章の長さが違っても、カードの下の同じ位置に並ぶ */
.casual-stores {
    display: flex;
    gap: 6px;
    margin: 0 24px;
    padding: 12px 0 14px 0;
    border-top: 1px solid #eee;
}

.casual-stores a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 500;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 999px;
    background-color: #fff;
    transition: border-color 0.15s, background-color 0.15s;
}

.casual-stores a:hover {
    color: #333;
    border-color: #333;
    background-color: #f8f8f8;
}

.casual-stores i {
    font-size: 0.9rem;
}

/**********************
  レスポンシブ対応
 *********************/

@media (max-width: 1100px) {
    .contents {
        padding: 48px 24px;
    }

    .product-list {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .product-thumbnail {
        width: 550px;
    }

    .product-store-list {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .casual-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .product-thumbnail {
        width: 100%;
    }
}

@media (max-width: 550px) {
    .product-store {
        display: inline-flex;
        align-items: center;
        font-size: 0.75em;
    }
}