/* ********************************** トピックスページ（コンセプトページ）の設定 ********************************** */

.concept .inner_wrapper {
    padding:0;
}

.concept_wrapper{
    display: grid;
    background-color: #C5C4B1;
}

.concept .concept_wrapper .message_box{
    background-image: url('../../images/systems/other/concept_bg.svg');
    background-position: center; /* 画像の位置を中央に設定 */
    background-repeat: no-repeat; /* 画像の繰り返しを防止 */
    background-size: cover; /* 画像をコンテナ全体に拡大・縮小 */
}


.concept .concept_wrapper .message_box > ul >li{
    width: 60%; /* 各liの幅を60%に設定 */
    box-sizing: border-box; /* パディングやボーダーを含めた幅の計算を正しくする */
}

.concept .concept_wrapper .concept_text{
    text-align: center;
}

.concept .concept_wrapper .logo_warapper{
    max-width: 220px;
    margin: 150px auto 50px auto;
}

.concept .concept_wrapper .concept_text p{
    line-height: 2.5em;
}

.concept .concept_wrapper .image_box_wrapper{
    display: block;
    width: 100% !important;
}

.concept .concept_wrapper .image_box{
    display: flex;
    align-items: end;
    margin: 0 auto 3em auto;
    padding: 0em 4em;
    justify-content: center; /* 左右中央揃え */
}






.concept .category_box{
    background: url(../../images/systems/other/concept_bg_text.svg) no-repeat bottom center / 70%;
    background-position: center calc(100% + 15px);
    position: relative;
}


.concept .genre_wrapper{
	width: 80%;
    max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
    margin: 0 auto 300px auto;
    border: 10px solid white;
    background-color: white;
    position: relative;
}

.concept .genre_wrapper li {
    width: calc(100% / 3);
    height: 300px;
    background-size: cover;
    position: relative;
    overflow: hidden; /* コンテンツがはみ出さないように */
}

.concept .category_name {
    position: absolute;
    left: 1em;
    top: 1em;
    padding: 0.4em 2em;
    border: 3px solid var(--maincolor);
    background-color: white;
    z-index: 2; /* オーバーレイの上に表示するためにz-indexを指定 */
}

.concept .genre_wrapper li a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative; /* relativeを指定 */
    z-index: 1; /* オーバーレイの下に表示 */
}

.concept .hobby_toy {
    background: url('../../images/systems/category/hobby_toy.jpg') no-repeat center;
}

.concept .party_goods {
    background: url(../../images/systems/category/party_goods.jpg) no-repeat center;
}

.concept .sundry {
    background: url(../../images/systems/category/sundry.jpg) no-repeat center;
}

.concept .gadget {
    background: url(../../images/systems/category/gadget.jpg) no-repeat center;
}

.concept .sport {
    background: url(../../images/systems/category/sport.jpg) no-repeat center;
}

.concept .other {
    background: url(../../images/systems/category/other.jpg) no-repeat center;
}

/* オーバーレイの設定 */
.concept .genre_wrapper li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* グレーのオーバーレイ */
    opacity: 0; /* 初期状態は透明 */
    transition: opacity 0.5s ease; /* なめらかに変化 */
    z-index: 0; /* リンクの下に表示 */
}

.concept .genre_wrapper li:hover::before {
    opacity: 1; /* ホバー時にオーバーレイを表示 */
}

/* GIF画像の設定 */
.concept .genre_wrapper li::after {
    content: '';
    position: absolute;
    bottom: -50px; /* 初期状態で画面の下に配置 */
    left: 50%; /* 中央に配置 */
    width: 226px; /* GIFの幅 */
    height: 180px; /* GIFの高さ */
    background: url(../../images/systems/illust/more.gif) no-repeat center; /* GIFのパスを指定 */
    background-size: contain; /* 画像が枠内に収まるようにする */
    opacity: 0; /* 初期状態は透明 */
    transform: translate(-50%, 0); /* 中央に配置するために移動 */
    transition: opacity 0.5s ease, bottom 0.5s ease; /* なめらかに変化 */
    z-index: 1; /* オーバーレイの上に表示 */
    pointer-events: none; /* クリックイベントを無効化 */
}

.concept .genre_wrapper li:hover::after {
    opacity: 1; /* ホバー時にGIFを表示 */
    bottom: 0px; /* ホバー時に下から出てくる */
}

.concept .hobby_toy:hover,
.concept .party_goods:hover,
.concept .sundry:hover,
.concept .gadget:hover,
.concept .sport:hover,
.concept .other:hover {
    transform: scale(0.9, 0.9);
    transition: 0.5s;
}

.concept .hobby_toy:hover .category_name,
.concept .party_goods:hover .category_name,
.concept .sundry:hover .category_name,
.concept .gadget:hover .category_name,
.concept .sport:hover .category_name,
.concept .other:hover  .category_name{
    background-color: var(--maincolor);
    color: white;
    border: 3px solid white;
}

.concept .hobby_toy:hover .category_name::after,
.concept .party_goods:hover .category_name::after,
.concept .sundry:hover .category_name::after,
.concept .gadget:hover .category_name::after,
.concept .sport:hover .category_name::after,
.concept .other:hover  .category_name::after{
    content: "を見る";
}