/* =============================================================================
	CSS
============================================================================= */

/* -------------------------------------------------------------------
	右バナーエリア制御
------------------------------------------------------------------- */

.right-box {
	position: absolute;
	/*left: calc(50% + 487px + 10px);*/
    left: calc(50% + 377px + 10px);
	width: 200px;
}
@media screen and (max-width:1024px){
    .right-box {
        display: none;
    }
}


/* -------------------------------------------------------------------
	メインイメージ
------------------------------------------------------------------- */
.left-box{
    /*width: calc(100% - 210px);*/
    min-height: 1200px;
    padding-right: 206px;
    background: var(--offwhite-color);
}
.mainimage {
  background: var(--offwhite-color);
	padding:25px 0;
	height:288px;
}

.h-reset {
	height: initial;
}

.mainimage_category {
	height:336px;
    margin-top: -25px;
}
.mainimage_category .wrap{
		width: 100%;
		height: 336px;
}
.mainimage_category .wrap img{
		width: 100%;
		height: 336px;
		object-fit:none;
}

.mainimage_slider a {
	display: none;
}

.bx-viewport .mainimage_slider a {
	display: block !important;
	background-color:var(--white-color);
	height:288px;
}
.bx-viewport .mainimage_slider img{
    height: 288px;
    max-width: 288px;
    object-fit: contain;
    transition-duration: 0.3s;
}
.bx-viewport .mainimage_slider img:hover{
    filter:opacity(70%);
	transition-duration: 0.3s;
}

.timeline-Footer{
    display: none!important;
}

/* -------------------------------------------------------------------
	大分類
------------------------------------------------------------------- */

.category {
    margin:0;
    padding:0;
    height:120px;
    background: var(--white-color);
}

.category .wrap {
	width:960px;
}

.category p,
.category span {
	display:block;
	float:left;
}
.category .category_list p a,
.category .category_list span {
	background:url("./common/img/category-link.png") no-repeat 0 0;
	height:120px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*すべて*/
.category p.force a {
    background-position:0 0;
    width:80px;
    height:120px;
}

.category p.force a:hover,
.category p.force a.current {
  background-position:0 -120px;
}

.category span.force {
  background-position:0 -240px;
}

.category p.category1 a,
.category p.category2 a,
.category p.category3 a,
.category p.category4 a,
.category p.category5 a,
.category p.category6 a,
.category p.category7 a{
  width:112px;
	height:120px;
}
.category p.category8 a{
  width:96px;
	height:120px;
}
/*プロ野球*/
.category p.category1 a {
  background-position:-80px 0;
}
.category p.category1 a:hover,
.category p.category1 a.current {
  background-position:-80px -120px;
}
/*Jリーグ*/
.category p.category2 a {
  background-position:-192px 0;
}
.category p.category2 a:hover,
.category p.category2 a.current {
  background-position:-192px -120px;
}
/*サッカー日本代表*/
.category p.category3 a {
  background-position:-304px 0;
}
.category p.category3 a:hover,
.category p.category3 a.current {
  background-position:-304px -120px;
}
/*女子プロゴルフ*/
.category p.category4 a {
  background-position:-416px 0;
}
.category p.category4 a:hover,
.category p.category4 a.current {
  background-position:-416px -120px;
}
/*その他*/
.category p.category5 a {
  background-position:-528px 0;
}
.category p.category5 a:hover,
.category p.category5 a.current {
  background-position:-528px -120px;
}
/*収集用品*/
.category p.category6 a {
  background-position:-640px 0;
}
.category p.category6 a:hover,
.category p.category6 a.current {
  background-position:-640px -120px;
}
/*アーカイブ*/
.category p.category7 a {
  background-position:-752px 0;
}
.category p.category7 a:hover,
.category p.category7 a.current {
  background-position:-752px -120px;
}
/*coming soon*/
.category p.category8 a {
  background-position:-864px 0;
}
.category p.category8 a:hover,
.category p.category8 a.current {
  background-position:-864px -120px;
}

/* -------------------------------------------------------------------
	カレンダー
------------------------------------------------------------------- */

.date {
    margin:0;
    padding:0;
    height:80px;
    background: var(--white-color);
}

.date .wrap {
	width:960px;
}

.date p,
.date span {
	display:block;
	float:left;
}

.date_list {
	display:none;
}

.date .y2015 p a,
.date .y2015 span {
	background:url("./common/img/date_2015.png") no-repeat 0 0;
	width:73px;
	height:85px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

.date .y2016 p a,
.date .y2016 span {
	background:url("./common/img/date_2016.png") no-repeat 0 0;
	width:73px;
	height:85px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2017*/
.date .y2017 p a,
.date .y2017 span {
	background:url("./common/img/date_2017.png") no-repeat 0 0;
	width:73px;
	height:85px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2018*/
.date .y2018 p a,
.date .y2018 span {
	background:url("./common/img/date_2018.png") no-repeat 0 0;
	width:73px;
	height:85px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2019*/
.date .y2019 p a,
.date .y2019 span {
	background:url("./common/img/date_2019.png") no-repeat 0 0;
	width:73px;
	height:85px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2020*/
.date .y2020 p a,
.date .y2020 span {
	background:url("./common/img/date_2020.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2021*/
.date .y2021 p a,
.date .y2021 span {
	background:url("./common/img/date_2021.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2022*/
.date .y2022 p a,
.date .y2022 span {
	background:url("./common/img/date_2022.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2023*/
.date .y2023 p a,
.date .y2023 span {
	background:url("./common/img/date_2023.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2024*/
.date .y2024 p a,
.date .y2024 span {
	background:url("./common/img/date_2024.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2025*/
.date .y2025 p a,
.date .y2025 span {
	background:url("./common/img/date_2025.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2026*/
.date .y2026 p a,
.date .y2026 span {
	background:url("./common/img/date_2026.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2027*/
.date .y2027 p a,
.date .y2027 span {
	background:url("./common/img/date_2027.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2028*/
.date .y2028 p a,
.date .y2028 span {
	background:url("./common/img/date_2028.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2029*/
.date .y2029 p a,
.date .y2029 span {
	background:url("./common/img/date_2029.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*2030*/
.date .y2030 p a,
.date .y2030 span {
	background:url("./common/img/date_2030.png") no-repeat 0 0;
	height:80px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

/*すべて*/
.date p.force a {
	background-position:0 0;
  width:96px;
	height:80px;
}

.date p.force a:hover,
.date p.force a.current {
  background-position:0 -80px;
}

.date span.force {
	background-position:0 0;
  width:96px;
	height:80px;
}

.date p.color1 a,.date p.color2 a,.date p.color3 a,.date p.color4 a,.date p.color5 a,.date p.color6 a,
.date p.color7 a,.date p.color8 a,.date p.color9 a,.date p.color10 a,.date p.color11 a,.date p.color12 a{
  width:72px;
	height:80px;
}

/*1月*/
.date p.color1 a {
  background-position:-96px 0;
}

.date p.color1 a:hover,
.date p.color1 a.current {
  background-position:-96px -80px;
}

.date span.color1 {
  background-position:-96px -160px;
}

.date p.color1,
.date p.color1 a,
.date span.color1 {
	width:72px;
}

/*2月*/
.date p.color2 a {
  background-position:-168px 0;
}

.date p.color2 a:hover,
.date p.color2 a.current {
  background-position:-168px -80px;
}

.date span.color2 {
  background-position:-168px -160px;
}

.date p.color2,
.date p.color2 a,
.date span.color2 {
	width:72px;
}

/*3月*/
.date p.color3 a {
  background-position:-240px 0;
}

.date p.color3 a:hover,
.date p.color3 a.current {
  background-position:-240px -80px;
}

.date span.color3 {
  background-position:-240px -160px;
}

.date p.color3,
.date p.color3 a,
.date span.color3 {
	width:72px;
}

/*4月*/
.date p.color4 a {
  background-position:-312px 0;
}

.date p.color4 a:hover,
.date p.color4 a.current {
  background-position:-312px -80px;
}

.date span.color4 {
  background-position:-312px -160px;
}

.date p.color4,
.date p.color4 a,
.date span.color4 {
	width:72px;
}

/*5月*/
.date p.color5 a {
  background-position:-384px 0;
}

.date p.color5 a:hover,
.date p.color5 a.current {
  background-position:-384px -80px;
}

.date span.color5 {
  background-position:-384px -160px;
}

.date p.color5,
.date p.color5 a,
.date span.color5 {
	width:72px;
}

/*6月*/
.date p.color6 a {
  background-position:-456px 0;
}

.date p.color6 a:hover,
.date p.color6 a.current {
  background-position:-456px -80px;
}

.date span.color6 {
  background-position:-456px -160px;
}

.date p.color6,
.date p.color6 a,
.date span.color6 {
	width:72px;
}

/*7月*/
.date p.color7 a {
  background-position:-528px 0;
}

.date p.color7 a:hover,
.date p.color7 a.current {
  background-position:-528px -80px;
}

.date span.color7 {
  background-position:-528px -160px;
}

.date p.color7,
.date p.color7 a,
.date span.color7 {
	width:72px;
}

/*8月*/
.date p.color8 a {
  background-position:-600px 0;
}

.date p.color8 a:hover,
.date p.color8 a.current {
  background-position:-600px -80px;
}

.date span.color8 {
  background-position:-600px -160px;
}

.date p.color8,
.date p.color8 a,
.date span.color8 {
	width:72px;
}

/*9月*/
.date p.color9 a {
  background-position:-672px 0;
}

.date p.color9 a:hover,
.date p.color9 a.current {
  background-position:-672px -80px;
}

.date span.color9 {
  background-position:-672px -160px;
}

.date p.color9,
.date p.color9 a,
.date span.color9 {
	width:72px;
}

/*10月*/
.date p.color10 a {
  background-position:-744px 0;
}

.date p.color10 a:hover,
.date p.color10 a.current {
  background-position:-744px -80px;
}

.date span.color10 {
  background-position:-744px -160px;
}

.date p.color10,
.date p.color10 a,
.date span.color10 {
	width:72px;
}


/*11月*/
.date p.color11 a {
  background-position:-816px 0;
}

.date p.color11 a:hover,
.date p.color11 a.current {
  background-position:-816px -80px;
}

.date span.color11 {
  background-position:-816px -160px;
}

.date p.color11,
.date p.color11 a,
.date span.color11 {
	width:72px;
}


/*12月*/
.date p.color12 a {
  background-position:-888px 0;
}

.date p.color12 a:hover,
.date p.color12 a.current {
  background-position:-888px -80px;
}

.date span.color12 {
  background-position:-888px -160px;
}

.date p.color12,
.date p.color12 a,
.date span.color12 {
	width:72px;
}

/* -------------------------------------------------------------------
	カレンダーコントロール
------------------------------------------------------------------- */

.date_control {
	background:var(--white-color);
	padding:25px 0 10px;
}

.date_control .wrap {
	width:960px;
	position:relative;
}

.date_control p.prev_year {
	float:left;
}

.date_control p.prev_year a {
	background:url("./common/img/parent.png") no-repeat 0 0;
	width:84px;
	height:20px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

.date_control p.prev_year a:hover {
	background-position:0 -20px;
}

.date_control p.prev_year span {
	background:url("./common/img/parent.png") no-repeat 0 -40px;
	width:84px;
	height:20px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

.date_control p.next_year {
	float:right;
}

.date_control p.next_year a {
	background:url("./common/img/next.png") no-repeat 0 0;
	width:84px;
	height:20px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

.date_control p.next_year a:hover {
	background-position:0 -20px;
}

.date_control p.next_year span {
	background:url("./common/img/next.png") no-repeat 0 -40px;
	width:84px;
	height:20px;
	display:block;
	text-indent:-9876px;
	outline:none;
}

.all_btn_wrap {
	padding:15px 0 0;
}

.all_btn {
	display:block;
	margin:0 auto;
	padding:0;
	width:180px;
	height:40px;
}

/* -------------------------------------------------------------------
	検索フォーム（TOPページカレンダー下）
------------------------------------------------------------------- */

.search .search_form {
	margin:0 auto;
	width:616px;
	padding:10px 0;
    background: var(--white-color);
}

.search .search_form .search_top {
	background:url("./common/img/search_top.png") no-repeat 0 0;
	font-size:0;
	line-height:0;
	height:8px;
}

.search .search_form .search_bottom {
	background:url("./common/img/search_bottom.png") no-repeat 0 0;
	font-size:0;
	line-height:0;
	height:8px;
}

.search .search_form .search_middle {
	padding:0 8px;
	background:url("./common/img/search_middle.png") repeat-y;
}

.search .search_form input.search_input {
	width:440px;
	padding:1px 5px 1px 35px;
}

.search .search_form input.search_btn {
	padding:6px 0;
	width:120px;
}

/* -------------------------------------------------------------------
	カテゴリで選ぶ
------------------------------------------------------------------- */

.select .select_title {
	background:url("./common/img/select-top.png") no-repeat 0 0;
	/*height:32px;*/
    height:27px;
	color: white;
	font-weight: 900;
	padding-top: 5px;
	padding-left: 50px;
}

.select .select_btn {
	padding:8px 0 0 16px;
    background: var(--offwhite2-color);
    border-radius: 6px;
}

.select .select_btn span,
.select .select_btn a {
	display:block;
	float:left;
	/*width:128px;*/
    width:126px;
	height:35px;
	line-height:35px;
	margin-right:8px;
	margin-bottom:8px;
	text-align:center;
	font-size:12px;
    font-weight: 800;
    color: var(--main-color);
}

.select .select_btn span {
	background:var(--offwhite-color);
}

.select .select_btn .sub_category_group {
	float:left;
	width: 100%;
	color:var(--main-color);
	font-weight:bold;
}

.select .select_btn .sub_category a:hover,
.select .select_btn .sub_category a.current {
	background:var(--main-color);
	color:var(--white-color);
    text-decoration: none;
}
.select .select_btn .sub_category .category-group.group3{
    clear: left;
}

/* -------------------------------------------------------------------
	検索結果テキスト
------------------------------------------------------------------- */

.result_header {
	position:relative;
}

.result_num {
	/*display:inline-block;
	position:absolute;
	top:23px;
	left:10px;*/
    display: block;
    margin:1em auto 3em;
    text-align: center;
    font-size: 1.3em;
}

/* -------------------------------------------------------------------
	ページャー
------------------------------------------------------------------- */

.pager {
	padding:20px 0;
	text-align:center;
	/*height:26px;*/
    margin-bottom: 24px;
}

.pager a {
	display:inline-block;
	width:20px;
	padding:8px;
	background-color:var(--gray-color);
	color:var(--black-color);
	margin-right:8px;
    font-size: 14px;
}

.pager a:hover {
  background:var(--accent-color);
	color:var(--white-color);
    text-decoration: none;
}

.pager a.current {
  background:var(--black-color);
	color:var(--white-color);
}

.pager span {
	display:inline-block;
	width:20px;
	padding:8px;
	background-color:var(--gray-color);
	color:#aaa;
	margin-right:8px;
    font-size: 14px;
}

.pager a.p_prev,
.pager span.p_prev,
.pager a.p_next,
.pager span.p_next {
	width:100px;
}

/* -------------------------------------------------------------------
	コンテンツボックス 表示
------------------------------------------------------------------- */
.result-product{
    display: flex;
    flex-wrap: wrap;
    gap:10px;/*正方形商品対策*/
}
.box {
    display: flex;
    flex-direction: column;
	/*width:324px;*/
    /*width:319px;*/
    width:310px;/*正方形商品対策*/
    padding-bottom: 32px;
    transition-duration: 0.3s;
}
.box a:hover{
    text-decoration: none;
}
.box img{
    /*height: 320px;*/
    max-height: 320px;/*正方形商品対策*/
    width: auto;
}
.box img:hover{
    filter:opacity(70%);
	transition-duration: 0.3s;
}

.box .box_date {
	display: inline-block;
	height: 28px;
	line-height: 28px;
	padding: 0 6px;
	margin-bottom: 12px;
	border-radius: 5px;
	color:var(--white-color);
    font-size: 14px;
    font-weight: 600;
}
.box .image {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.box .textset {
	font-weight:normal;
	font-size:16px;
    line-height: 1.3;
	height:auto;
	padding:0 18px 10px;
	color:var(--black-color);
    flex-grow: 1;
}

.box .list {
	display: block;
	height: 60px;
	position: relative;
}
.box .list a:hover {
    background: var(--black-color);
    color: var(--white-color);
}

.box .list div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	line-height: 32px;
	border: 2px solid var(--black-color);
	border-radius: 16px;
	padding: 0 16px;
	color:var(--black-color);
    font-size: 14px;
}
.box .list div:hover {
    background: var(--black-color);
    color: var(--white-color);
}
    @media screen and (max-width:1024px){
        .box .list div {
            width: 70%;
            text-align: center;
        }
    }

.old-archive_button {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    display: block;
    width: calc(100vw/4);
    background: var(--white-color);
    border: 2px solid var(--black-color);
    text-align: center;
    padding: 1rem 2rem;
    border-radius: 50rem;
    margin: 0 auto;
    font-weight: bold;
    color: var(--black-color);
    text-decoration: none;
	transition: .4s;
	}
.old-archive_button:hover {
	background: var(--black-color);
    color: var(--white-color);
    text-decoration: none;
}

/* -------------------------------------------------------------------
	コンテンツボックス 配置制御
------------------------------------------------------------------- */

.box1 {
	margin-bottom:1px;
	margin-right:1px;
}

.box2 {
	margin-bottom:1px;
}

.box3 {
	margin-bottom:1px;
	margin-right:1px;
}

.box4 {
	margin-bottom:1px;
}

.box5,
.box8,
.box11,
.box14 {
	margin-bottom:1px;
	margin-right:1px;
}

.box6,
.box9,
.box12,
.box15 {
	margin-bottom:1px;
}

.box7,
.box10,
.box13,
.box16 {
	/*float:right;*/
	margin-bottom:1px;
}

.margin {
	margin-bottom:1px;
}

h1.timeline-Header-title {
  color: #fff !important;
  font-size: 1em !important;
}