@charset "utf-8";

/*スポーツカードの集め方*/

/*----------------------------
    contents
------------------------------*/
.contents_title{
    padding: 0;
    background: #703d8f;
    /*height: 360px;*/
    height: 100%;
    margin-bottom:50px;
}
.contents_title img{
    width: 100%;
    /*height: 360px;*/
    max-height: 360px;
    /*object-fit:none;*/
    object-fit:cover;
}
@media screen and (max-width:416px){
    .contents_title{
        padding: 83px 0 0;
        background: #106a33;
        /*height: 216px;*/
        height: 100%;
    }
    .contents_title img{
        width: 100%;
        height: 216px;
        object-fit:fill;
    }
}
.text-caution{
    text-align: center;
    padding: 1rem 0;
    background: #ccc;
    margin-top: -50px;
    margin-bottom: 50px;
}
.anchor {
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}

.wrap {
	width:712px;
	margin:0 auto;
}
@media screen and (max-width:475px){
    .wrap {
        width:inherit;
        padding-left:1.5rem;
        padding-right:1.5rem;
    }
}

/*new ---------*/
/*----------------------------
    select genre
------------------------------*/
.select-genre {
    box-sizing: border-box;
    /*border: 3px solid #333;*/
    margin-bottom: 1rem;
	.genre-title {
        border-bottom: 3px solid #333;
        padding: 1rem;
        text-align: center;
        color: #fff;
        font-weight: 600;
        background: #1a4472;
        position: relative;
        @media screen and (max-width:416px){
            padding:.5rem;
        }
        &::before{
            content: "★";
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            background: #ff553c;
            width: 60px;
            height: 100%;
            aspect-ration: 1/1;
            position: absolute;
            left: 0;
            top: 0;
            @media screen and (max-width:416px){
                width: 36px;
                font-size:16px;
            }
        }
	}
	.genre-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
        /*grid-column-gap: 8px;
        grid-row-gap: 8px;*/
        align-items:baseline;
        @media screen and (max-width:416px){
            grid-template-columns: repeat(4, 1fr);
        }
        .item-all ,.item-baseball,.item-j-league,.item-succer-jp,
        .item-women-golf,.item-other,.item-character,.item-storage-supplies{
            text-align: center;
            padding: 1rem 0.5rem;
            @media screen and (max-width:416px){
                padding:0;
            }
            img {
                width: 100%;
                max-width:70px;
                @media screen and (max-width:416px){
                    max-width:50px;
                }
			}
			p {
                font-size: calc(12px + 2 * (100vw - 320px) / 960);
                @media screen and (max-width:416px){
                    font-size: calc(10px + 2 * (100vw - 320px) / 960);
                }
			}
            &:hover{
                background: #8acbc7;
            }
            &:active{
                background:#1a4472 ;
                color: #fff;
            }
        }
        .genre-active{
            background:#1a4472 ;
            color: #fff;
        }
		.item-all {
		}
		.item-baseball {
		}
		.item-j-league {
		}
		.item-succer-jp {
		}
		.item-women-golf {
		}
		.item-other {
            grid-column-start: 2;
		}
		.item-character {
            grid-column-start: 3;
		}
		.item-storage-supplies {
            grid-column-start: 4;
			}
		}
	}

/*----------------------------
    select area
------------------------------*/
.select-area {
    background: #efefef;
    border-radius: 20px;
    padding: 1rem;
    margin-bottom: 3rem;
    .area-title{
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 1rem;
    }
	ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        list-style: none;
        grid-row-gap: .75rem;
        grid-column-gap: .5rem;
		li {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(100%/5);
            @media screen and (max-width:475px){
                width:calc(100vw/3.6 - 8px);
            }
			a {
                display: block;
                color: #000;
                text-align: center;
                width: 100%;
                padding: 0.5rem 1rem;
                background: #fff;
                border-radius: 8px;
                text-decoration: none;
                box-shadow: 0 1px 1px 1px rgba(0,0,0,.1);
                @media screen and (max-width:475px){
                    padding:0.25rem .25rem;
                }
                &:hover{
                    background:#8acbc7;
                }
                &:active{
                    background:#1a4472 ;
                    color: #fff;
                }
			}
            .region-active{
                background:#1a4472 ;
                color: #fff;
            }
		}
	}
}
/*----------------------------
    search list
------------------------------*/
.search-list {
	.search-genre {
        /*border: 3px solid #333;*/
       /* background: #1a4472;*/
        position: relative;
        margin-bottom: 2rem;
        .genre-icon{
            position: absolute;
            left: 0;
            top: 0;
            width: 55px;
            height: 100%;
            aspect-ratio:1/1;
            background: #fff;
            border-right: 1px solid #000;
            padding-left: 1rem;
            padding-right: 1rem;
            img{
                max-width: 100%;
                width: 100%;
            }
        }
		.genre-title {
            padding: 1rem 1rem 1rem 7rem;
            text-align: left;
            font-weight: 600;
	    }
	}
	.search-area {
		p {
            display: inline-block;
            background: #000;
            padding: .25rem .75rem;
            color: #fff;
		}
	}
	.search-store {
        border-top: 3px solid #000;
        .ken{
            margin-top: 2rem;
            font-weight:600;
            color:#878787;
            @media screen and (max-width:475px){
                
            }
        }
		.store-item {
            padding-block:1rem 2rem;
            @media screen and (max-width:416px){
                padding-block:1rem 0;
            }
			.item-name {
                font-size: 24px;
                margin-bottom: 1rem;
                @media screen and (max-width:416px){
                    font-size:16px;
                }
			}
			ul {
                list-style: none;
                border: 3px solid #000;
                border-radius: 8px;
                padding: 1rem 1rem .5rem 1rem;
                @media screen and (max-width:416px){
                    border:unset;
                    padding:0 .5rem .5rem;
                }
                li{
                    margin-bottom: .25rem;
                    a{
                        color: #1a4472;
                        word-break: break-word;
                    }
                }
				.address {
                    display: flex;
                    background: url("../common/img/icon-pin.svg") no-repeat;
                    padding-left: 3rem;
                    flex-direction:column;
					a {
					}
				}
				.business-hours {
                    display: flex;
                    background: url("../common/img/icon-oclock.svg") no-repeat;
                    padding-left: 3rem;
                    min-height: 24px;
				}
				.tel {
                    display: flex;
                    background: url("../common/img/icon-mobile.svg") no-repeat;
                    padding-left: 3rem;
                    min-height: 24px;
					a {
					}
				}
				.web {
                    display: flex;
                    background: url("../common/img/icon-www.svg") no-repeat;
                    padding-left: 3rem;
                    margin-bottom: 1rem;
                    @media screen and (max-width:416px){
                        display:block;
                    }
					a {
					}
					span {
                        display: flex;
                        align-items: center;
                        border-left: 1px solid #ddd;
                        margin-left: 1rem;
                        padding-left: 1rem;
                        @media screen and (max-width:416px){
                            border-left:unset;
                            margin:1rem 0 0 0;
                            padding:0;
                        }
                        .icon-x,.icon-instagram,.icon-facebook{
                            display: inline-block;
                            width: 24px;
                            height: 24px;
                        }
                        .icon-x{
                            background: url("../common/img/icon-x.svg") left top no-repeat;
                            background-size: contain;
                            margin-right: .25rem;
                        }
                        .icon-instagram{
                            background: url("../common/img/icon-instagram.svg") left top no-repeat;
                            background-size: contain;
                            margin-right: .5rem;
                        }
                        .icon-facebook{
                            background: url("../common/img/icon-facebook.svg") left top no-repeat;
                            background-size: contain;
                        }
						a {
						}
					}
				}
                .genre-icon{
                    img{
                        width: 40px;
                        height: 40px;
                        background: #f1f1f1;
                        padding: .25rem;
                        border-radius: 8px;
                        @media screen and (max-width:416px){
                            width:30px;
                            height:30px;
                        }
                    }
                }
			}
		}
	}
}
/*--// new-----------*/

/*img setting*/
.contents_title .pc,.ArticleBody-content .pc { display: block !important; }
.contents_title .sp,.ArticleBody-content .sp { display: none !important; }
@media only screen and (max-width: 416px) {
    .contents_title .pc,.ArticleBody-content .pc { display: none !important; }
    /*.contents_title .sp,.ArticleBody-content .sp { display: block !important; }*/
    .contents_title .sp,.ArticleBody-content .sp {
        display: block !important;
        max-height: 150px;
        object-fit: cover;
    }
}
/*----------------------------
    other
------------------------------*/
.back {
    padding: 0 0 30px;
    opacity: 0.7;
    text-align: center;
}