@charset 'utf-8';
/*
 * name:category.css
 * author:nulo lab

/* category
------------------------------------------------ */

#breadcrumb { margin-bottom: 0; }
#contents { padding: 100px 0 150px; }
#pagination { margin-top: 65px; }

#contents{ padding-top: 50px; }

.category--post-count{ margin-bottom: 85px; font-size: 1.6rem; font-weight: 300; text-align: center; letter-spacing: 0.01em; line-height: 1.75; }
.category--post-count span{ font-weight: 600; color: #011e41; }

.category--sort { margin-top: 50px; padding: 17px 30px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: #F4F4F4; }
.category--post-total{ font-size: 1.6rem; letter-spacing: 0.04em; line-height: calc(30 / 16); color:#2B2828; }
.category--select {position: relative; width: 210px; font-size: 1.6rem; font-weight: 300; letter-spacing: 0.04em; line-height: 1.87; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; }
.category--select--list { position: absolute; left: 0; top: 40px; width: calc(100% - 2px); z-index: 9; display: none; padding:0; border:1px solid #989898; border-top:0; background-color: #fff; }
.category__keyword--head { padding:7.5px 20px; font-size: 1.3rem; font-weight: 600; color: #7E0000; background:url(../../img/share/select_arrow2.png) no-repeat calc(100% - 14px) center / 15px auto; }
.category__keyword--head.on { background-image: url(../../img/share/select_arrow3.png); }

.category--select li a { display: block; padding: 8px 12px; font-size: 1.3rem; }
.category--select li a:hover{ background-color: #F4F4F4; }
.category--select--head { padding: 7.5px 12px; font-size: 1.3rem; font-weight: 600; background:url(../../img/share/select_arrow.png) no-repeat calc(100% - 14px) center / 15px auto; border:1px solid #989898; }

.category-list{ padding-top: 50px; }

.category__brands{ padding: 50px 0 109px; background-color: #011e41; }
.category__brands--title{ display: table; margin: 0 auto; font-size: 3.2rem; letter-spacing: 0.148em; line-height: 1; font-weight: bold; color:#fff; }
.category__brands--title .en{ display: block; font-family: 'Oswald'; }
.category__brands--title .ja{ margin-top: 10px; padding: 4px 0; display: block; font-size: 1.6rem; font-weight: 600; color:#011e41; letter-spacing: 0.14em; line-height: 1.5; text-align: center; background-color: #fff; }
.category__brands--list a{ display: block; }
.category__brands--list li{ overflow: hidden; border-radius: 4px; background-color: #fff; }
.category__brands--list figcaption{ padding: 8.5px 0; font-size: 1.6rem; font-weight: 600; color:#011e41; letter-spacing: 0.048em; line-height: 1.87; text-align: center; }

.category__brand-desc{  }
.category__brand-desc--logo{ margin:0 0 25px; }
.category__brand-desc--logo.wwf{ margin-bottom: 0; width: 204px; }
.category__brand-desc--logo.moomin { width: 150px; }
.category__brand-desc--logo--kabankobo { width: 214px; }
.category__brand-desc--logo.kabankobo-x-ikedanasa{ width: 214px; }
.category__brand-desc--logo.shufunotomo{ width: 214px; }
.category__brand-desc--logo--sisyu { width: 323px; margin-bottom: 100px; }
.category__brand-desc--logo.nasa{ width: 105px; }
.category__brand-desc--logo a{ display: block; }
.category__brand-desc--tit { margin-bottom: 15px; font-size: 2rem; font-weight: bold; letter-spacing: 0.052em; color:#011E41; line-height: calc(30 / 20); }
.category__brand-desc--txt{ font-size: 1.6rem; letter-spacing: 0.072em; line-height: calc(28 / 16); color:#011E41; }
.category__brand-desc--txt--nasa { max-width: 636px; }

.category__brand-desc--txt--moomin { max-width: 590px; }
.category__brand-desc--tit--kabankobo { font-family: 'Tsukushi A Round Gothic'; color: #272727; }
.category__brand-desc--txt--kabankobo { font-family: 'Tsukushi A Round Gothic'; max-width: 435px; }
.category__brand-desc--tit--sisyu { max-width: 908px; display: block; margin-left: auto; margin-right: auto; }
.category__brand-desc--txt.d-table{ display: table; }
.category__brand-desc--btn { font-size: 16px; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.048em; max-width: 360px; margin: 45px 0 0; }
.category__brand-desc--btn a { position: relative; display: block; overflow: hidden;background-color: #011E41; color: #fff; -webkit-border-radius: 4px; border-radius: 4px; padding: 18px 40px; border:2px solid #011E41; }
.category__brand-desc--btn a:hover{ background-color: #fff; color:#011E41; }
.category__brand-desc--btn a:after { content: ''; display: block; width: 8px; height: 15px; position: absolute; right: 35px; top: 50%; transform: translateY(-50%); background: url(../../img/share/icon_arrow_w.svg) no-repeat; background-size: 100%; }
.category__brand-desc--btn a:hover:after { background: url(../../img/share/icon_arrow_b_2.svg) no-repeat; background-size: 100%; }
.category__brand-desc--btn--shufunotomo a{ padding: 18px 24px; }
.category__brand-desc--btn--kabankobo a{ padding: 18px 24px; }
.category__brand-desc--btn--nasa a{ padding: 18px 24px; }

.category__brand-desc--block{ margin-top: 77px; }
.category__brand-desc .page--title-2{ margin-bottom: 35px; }
.category__brand-desc--accordion{ max-width: 887px; margin: 85px auto 0; }
.category__brand-desc--accordion dt{ position: relative; height: 156px; font-size: 2.8rem; font-weight: 600; letter-spacing: 0.11em; cursor: pointer; line-height: 1.53; color:#fff; text-align: center; background: url(../../img/brands/earth_01.jpg) no-repeat center center / cover; }
.category__brand-desc--accordion dt span{ min-width: 320px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-block; padding-right: 60px; background: url(../../img/share/icon_arrow_up.svg) no-repeat right center / 30px auto;  text-shadow: -1px 6px 6px rgba(0,0,0,0.43); }
.category__brand-desc--accordion dt.on span{ background-image: url(../../img/share/icon_arrow_down.svg); }
.category__brand-desc--accordion dd{ display: none; }
.category__brand-desc--accordion dd figure{ margin-top: 30px; }

.category__brand--copyright { font-size: 8px; font-size: .8rem; width: 100%; text-align: right; position: absolute; bottom: 15px; left: -20px; margin: 0 20px; }

/* custome search */
.category--search .woocommerce-result-count{ display: none; }
.category--search .woocommerce-ordering{ text-align: left; float: none !important; margin-bottom: 32px; }
.category--search .woocommerce-ordering .orderby{ padding: 0 26px; height: 40px; width: 210px; font-size: 1.6rem; font-weight: 300; letter-spacing: 0.04em; line-height: 1.87; border-radius: 0; border:1px solid #C7C7C7; background:url(../../img/share/select_arrow.png) no-repeat calc(100% - 17px) center / 14px auto; -moz-appearance: none; -webkit-appearance: none; appearance: none; }


/* responsive style
------------------------------------------------ */
@media screen and (min-width: 769px) {
	.mb-mt-0{ margin-top: 30px !important; }
	.category__brands--list{ max-width: 1170px; margin: 40px auto 0; display: flex; flex-wrap: wrap; }
	.category__brands--list li{ width: 31.624%; margin-right: 2.564%; }
	.category__brands--list li:nth-child(3n) { margin-right: 0; }
	.category__brands--list li:nth-child(n+4) { margin-top: 2.564%; }
	
	.category__brand-desc{ width: 515px; margin-left: 70px; }
	.category__visualImage{ width: calc(100% - 666px); min-height: 500px; }
	.category__visualImage img{ object-fit: cover; object-position: center 0; width: 100%; height: 100%; }
	.category__visual02{ align-items: center; }
	.category__visual02.wwf-brand{ align-items: flex-start; }
}
@media screen and (max-width: 1240px) {
	.category__brand--copyright { padding: 0 20px; -webkit-box-sizing: border-box; box-sizing: border-box; }
}
@media screen and (max-width: 768px) {
	
	#contents { padding: 30px 0 120px; }
	#pagination { margin-top: 18px; }
	.mb-mt-0{ margin-top: 0 !important; }

	.category--post-count { font-size: 13px; font-size: 1.3rem; margin-bottom: 25px; padding: 0; border:0; }

	.category-list{ padding-top: 25px; }
	.category--select { width: 115px; position: relative; }
	.category--sort{ padding: 14px 12px; margin-top: 40px; }
	.category--post-total{ font-size: 1.3rem; }
	.category--select--head{ padding: 3px 10px; font-size: 1rem; background-size: 10px auto; background-position: calc(100% - 10px) center; }
	.category--select--list{ position: absolute; left: 0; top: 24px; width: calc(100% - 2px); }
	.category--select li a{ font-size: 1rem; }

	.category__brands{ padding: 27px 0 23px; }
	.category__brands--title{ font-size: 2.2rem; }
	.category__brands--title .ja{ padding: 3px 0; margin-top: 8px; font-size: 1.1rem; }
	.category__brands--list { margin-top: 20px; }
	.category__brands--list li{ border-radius: 2px; }
	.category__brands--list li+li{ margin-top: 15px; }
	.category__brands--list figcaption{ padding: 5px 0; font-size: 1.3rem; }

	.category__visual {  }
	.category__visual .wrap { padding: 0; }
	.category__brand-desc{ padding: 0 20px 0; margin: 25px auto 0; }
	.category__brand-desc--accordion dt{ height: 78px; }
	.category__brand-desc--logo{ margin:0 0 16px; }
	/* .category__brand-desc--logo.wwf{ width: 68px; } */
	.category__brand-desc--logo.moomin { width: 132px; }
	.category__brand-desc--logo--kabankobo { width: 240px; }
	.category__brand-desc--logo.shufunotomo{ width: 189px; }
	.category__brand-desc--logo.kabankobo-x-ikedanasa{ width: 189px; }
	.category__brand-desc--logo.nasa{ width: 93px; }
	.category__brand-desc--logo--sisyu { width: 220px; }
	.category__brand-desc--tit { font-size: 17px; font-size: 1.7rem; margin-bottom: 5px; }
	.category__brand-desc--tit:after { width: 30px; height: 1px; margin: 18px auto 0; }
	.category__brand-desc--txt{ font-size: 1.3rem; letter-spacing: 0.032em; line-height: 1.92; }
	
	.category__brand-desc--txt--sisyu { text-align: center; }
	.category__brand-desc--tit--sisyu { max-width: 328px; }
	.category__brand-desc--btn { max-width: 290px; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.048em; margin: 13px auto 0; }
	.category__brand-desc--btn a{ padding: 14px 10px; }
	.category__brand-desc--btn a:after { right: 15px;  }
	.category__brand-desc--block{ margin-top: 30px; }
	.category__brand-desc .page--title-2{ margin-bottom: 15px; text-align: left; }
	 
	.category__brand-desc--accordion{ margin-top: 25px; }
	.category__brand-desc--accordion dt span{ padding-right: 30px; min-width: 200px; font-size: 1.6rem; background-size:15px auto; }
	.category__brand-desc--accordion dd figure{ margin-top: 15px; }

	.category__brand-desc--wwf { padding-bottom: 65px; }
	.category__brand--copyright { text-align: left; }

	.category--search .woocommerce-ordering{ width: 100% !important; display: none; }
	.category--search .woocommerce-ordering .orderby{ padding: 0 20px; margin-bottom: 30px; width: 100% !important; height: 35px; font-size: 13px !important; font-size: 1.3rem !important; background: url(../../img/share/select_arrow.png) no-repeat calc(100% - 14px) center / 15px auto; }
	.category--search .woocommerce-ordering .orderby:focus{ background-image: url(../../img/share/select_arrow.png); }
}

/* renew 2022 */
.category--search-form{ padding-bottom: 37px; }
.category--search-input{ position: relative; border:1px solid #011E41; background-color: #011E41; }
.category--search-input .search-box{ padding: 0 30px; width: 433px; color:#011E41; background-color: #fff; font-size: 1.6rem; letter-spacing: 0.072em; }
.category--search-input .search-btn{ width: 100px; background:url(../../img/share/search_icon.svg) no-repeat center / 27px auto; color:transparent; cursor: pointer; }
.category--search-input .search-box,
.category--search-input .search-btn{ border:0; border-radius: 0; outline: none; height: 62px; }
.category--search-txt{ margin-right: 34px; font-size: 2rem; letter-spacing: 0.14em; line-height: calc(34 / 20); color:#011E41; }
.category--search-clear{ margin-left: 40px; font-size: 1.6rem; color:#011E41; border-bottom: 1px solid #011E41; }
.category--search-clear:hover{ border-bottom-color:transparent; }
.category--search-note{ position: absolute; left: 0; bottom:-38px; font-size: 1.3rem; font-weight: 400; letter-spacing: 0.072em; line-height: calc(23 / 13); color:#2B2828; }

@media screen and (min-width: 769px) {
	.category--search-group{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
	.cateogory--search-input{ width: 530px; }
	.cateogory--search-input{ display: inline-flex; }
	.category--search-input{ display: inline-flex; flex-wrap: wrap; }
	.category__visual02{ display: flex; flex-wrap: wrap; }
}

@media screen and (max-width: 768px) {
	.category--search-input{ display: flex; flex-wrap: wrap; justify-content: space-between; }
	.category--search-input .search-box{ width: calc(100% - 2px); }
	.category--search-txt{ font-size: 1.5rem; }
	.category--search-input .search-box, .category--search-input .search-btn{ height: 48px; }
	.category--search-input .search-btn{ width: 46px; background-position: 11px center; background-size: 22px auto; font-size: 1.3rem; }
	.category--search-input .search-box{ width: calc(100% - 72px); padding: 0 10px; }
	.category--search-clear{ position: absolute; right: 0; bottom: 12px; font-size: 1.3rem; }
	.category--search-note{ bottom:-52px; font-size: 1.1rem; line-height: calc(34 / 22); }
	.category--search-form{ position: relative; padding-bottom: 50px; }
}

/* category hastag */
.category--hastag{ display: block; margin-top: 40px; }
.category--hastag-title{ display: table; margin: 0 auto; padding: 0 0 0 50px; font-size: 2.2rem; font-weight: 500; text-align: center; letter-spacing: 0.14em; line-height: calc(37 / 22); color:#011E41; background: url(../../img/share/color-search.png) no-repeat 0 center / 27px auto; }
.category--hastag-group{ margin: 40px auto 0; max-width: 650px; display: flex; flex-wrap: wrap; align-items: flex-start; }
.category--hastag-group span{ padding: 0.72em 0.5em; min-width: 102px; margin: 0 5px 20px; border-radius: 8px; text-align: center; font-size: 1.6rem; font-weight: 500; line-height: calc(27 / 16); letter-spacing: 0.072em; cursor: pointer; color:#fff; border: 1px solid transparent; }
.category--hastag .key-clear{ display: table; margin: 12px auto 0; padding: 0 5px 12px; line-height: 1; color:#090707; border-bottom: 1px solid #090707; cursor: pointer; }

@media screen and (max-width: 768px) {
	.category--hastag{ margin-top: 0; }
	.category--hastag-group {
		margin: 20px 0 0 -6px;
		width: calc(100% + 6px);
	}
	.category--hastag-group span{
		padding: 0.7em 0.5em;
		min-width: calc(25% - 18px);
		margin: 0 3px 15px;
		border-radius: 4px;
		font-size: 1rem;
	}
	.category--hastag-title{ padding-left: 37px; font-size: 1.5rem; background-size: 22px auto; }
	.category--hastag .key-clear{ padding:0 1px 8px; margin-top: 5px; font-size: 1.3rem; letter-spacing: 0.032em; }
}

/* 2025 */
.category__brand-tab-btn { font-size: 16px; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.048em; max-width: 360px; margin: 45px 0 0; }
.category__brand-tab-btn .btn { width: 100%; font-size: 16px; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.048em; text-align: left; position: relative; display: block; overflow: hidden;background-color: #011E41; color: #fff; -webkit-border-radius: 4px; border-radius: 4px; padding: 18px 40px; border:2px solid #011E41; cursor: pointer; }
.category__brand-tab-btn .btn:after { content: ''; display: block; width: 8px; height: 15px; position: absolute; right: 35px; top: 50%; transform: translateY(-50%) rotate(90deg); background: url(../../img/share/icon_arrow_w.svg) no-repeat; background-size: 100%; }
.categorybrandlist .category__brand-desc--btn{ margin-top: 0; }
.categorybrandlist{ display: none; max-width: 360px; padding-top: 12px; background-color: #EFEFEF; }
.categorybrandlist li+li{ margin-top: 12px !important; }
.categorybrandlist li:last-child{ margin-top: 8px !important; }
.categorybrandlist li a{ text-align: center; }
.categorybrandlist-close-btn{ padding: 15.5px 10px; display: block; width: 100%; font-size: 12px; font-size: 1.2rem; text-align: center; color:#011E41; border:none; cursor: pointer; }
.category__brand-desc--btn .red-color{ border-color: #A52029; background-color: #A52029; }
.category__brand-desc--btn .blue-color{ border-color: #004091; background-color: #004091; }
.category__brand-desc--btn .blue-color--2{ border-color: #183060 ; background-color: #183060 ; }
.category__brand-desc--btn .black-color{ border-color: #1e1e1e; background-color: #1e1e1e; }

@media screen and (min-width: 769px) {
	.category_visual_sports{ align-items: flex-start; }
	.category_visual_sports .category__brand-desc{ padding-top: 80px; }
	.category__brand-tab-btn .btn:hover{ background-color: #fff; color:#011E41; }
	.category__brand-tab-btn .btn:hover:after { background: url(../../img/share/icon_arrow_b_2.svg) no-repeat; background-size: 100%; }
	.category__brand-desc--btn .red-color:hover{ color: #A52029; }
	.category__brand-desc--btn .blue-color:hover{ color: #004091; }
	.category__brand-desc--btn .blue-color--2:hover{ color: #183060; }
	.category__brand-desc--btn .black-color:hover{ color: #1e1e1e; }
	.categorybrandlist-close-btn:hover{ background-color: rgba(255,255,255,.3); }
}
@media screen and (max-width: 768px) {
	.categorybrandlist{ max-width: 290px; margin: 0 auto; }
    .category__brand-tab-btn { max-width: 290px; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.048em; margin: 13px auto 0; }
	.category__brand-tab-btn .btn{ padding: 13px 18px; font-size: 14px; font-size: 1.4rem; }
	.category__brand-tab-btn .btn:after { right: 15px;  }
	.categorybrandlist li a{ padding: 12px 18px !important; }
}