@charset "UTF-8";

/* font-family */
/* font-family: 'Noto Sans CJK JP', ; */
/* font-family: 'Hiragino Kaku Gothic Std' ; */

/**** general ****/

.footer-media{
	display: none;
}

html, body {
	background-image: url('../images/bgimg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
	font-family: -apple-system, blinkMacSystemFont,'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', "Helvetica Neue", "Segoe UI", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", sans-serif;
	line-height: 1.2;
}
* {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
	background-repeat: no-repeat;
    scroll-behavior: smooth;
}
img {
	width: 100%;
}
a {
	transition: .5s;
}
a:hover {
	opacity: .8;
}
.clearfix:after {
	display: block;
	clear: both;
	content: "";
}
.wrap {
    position: relative; 
    margin: 0 auto;
    max-width: 500px;
	min-width:360px;
	width: 100%;
    background: #FFF;
}
.wrap_inner {
	position: relative;
	z-index: 5;
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
	color: #000;
	letter-spacing: 0;
    box-sizing: border-box;
}
.wrap_inner p{
	font-size:16px;
	font-weight:500;
	line-height:1.62;
}
.text_list{
    font-size: 16px;
    font-weight: bold;
    color: #000;
    line-height: 1.62;
    margin-bottom: 27px;
}
.sp_only {
    display: none;
}
.sp_break {
    display: none;
}
.pc_only {
    display: block;
}

.aspect3-2{
aspect-ratio:3/2;
}
.aspect2-1{
aspect-ratio:2/1;
}
.aspect1-1{
aspect-ratio:1/1;
}

@media screen and (max-width: 1160px) { 
    .wrap,
    .wrap_inner {
        margin: 0;
    }
}
@media screen and (max-width: 768px) {
    html, body {
	    background-image: none;
    }
    img {
		max-width: 100%;
	}
    .wrap,
    .wrap_inner {
        margin: 0 auto;
    }
	.wrap .wrap_inner {
		width: 100%;
		/* padding: 0 23px; */
		box-sizing: border-box;
	}
	.sp_only {
		display: block;
    	margin-top: 20px;
	}
	.pc_only {
		display: none;
	}
	.header img {
		width: 100%;
		border: none;
		vertical-align: top;
	}
}
/**** mainvisual ****/
.mainvisual {
	position: relative;
}
.mainInner {
	position: relative;
	max-width: 500px;
	width: 100%;
	margin: -1px auto 0;
	z-index: 1;
    background: #FAFAFA;
    box-sizing: border-box;
}
.mainInner h1 {
    padding: 30px 10px 29px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0;
}
/**** lead text ****/
.leadTxt {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0 14px;
}
.leadTxt h2 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0 19px;
    line-height: 1.6;
}
.leadTxt .lead-sub-title {
    margin-bottom: 20px;
    padding: 20px 0;
    font-size: 16px;
    line-height: 1.6;
    font-weight: bold;
    text-align: center;
    border-top: 1px solid #121212;
    border-bottom: 1px solid #121212;
}
.leadTxt p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
	line-height: 1.62;
}
@media screen and (max-width: 768px) {
    .mainvisual {
        max-height: unset;
		background: none;
    }
    .mainInner {
        margin-top: 0;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .leadTxt {
        padding: 0 10px;
        line-height: 1.5;
    }
}
/**** back to top ****/
/* #back_to_top a {
	display: none;
	position: fixed;
	right: 40px;
	bottom: 40px;
    z-index: 9999;
	width: 80px;
	height: 80px;
	border-radius: 50px;
	background: #333031 url('../images/icon_arrowUp.png') no-repeat center center;
    background-size: 70%;
} */

@media screen and (max-width: 768px) {
	#back_to_top a {
        display: none;
	    position: fixed;
		right: 20px;
		bottom: 20px;
        z-index: 9999;
		width: 48px;
        height: 48px;
	    background: url('../images/arrow-top.png') no-repeat center center;
        background-size: 100%;
	}
	#back_to_top a:after {
		top: 7px;
		left: 14px;
		padding: 3px;
	}
}

/**** common ****/
.sectionBlock {
    padding-top: 30px;
}
.sectionBlock:last-child {
    padding-bottom: 80px;
}
.sectionBlock p {
    font-weight: 500;
    line-height: 1.62;
}
.brand .wrap_inner {
    padding: 0;
}
.brand-section,
.maintenance, 
.article {
    padding: 40px 10px 20px;
}
.playstyle-section{
    padding: 0 10px 20px;
}
.recommend {
    padding: 19px 10px 11px;
}
.recommend.sectionBlock:last-child {
    padding-bottom: 64px;
}
.ladies-reco .mainTitle {
    font-size: 24px;
    font-weight: bold;
    padding-left: 10px;
    border-left: 5px solid #000000;
    margin-bottom: 21px;
    line-height: 1.55;
}
.ladies-reco .recommend .desc {
    padding-top: 19px;
    gap: 19px;
}
.ladies-reco .recommend .desc .descTitle {
    margin-bottom: 2px;
}
.ladies-reco .recommend.sectionBlock:last-child {
    padding-bottom: 80px;
}
.shoes-maintenance .descContent a{
    display: block;
    font-size: 16px;
    color: #003DA6;
    margin: 9px 0 0;
    font-weight: 500;
}
.shoes-maintenance .allBtn a {
    padding: 23px 14px 21px;
    margin-top: 42px;
}
.shoes-maintenance .recommend.sectionBlock:last-child {
    padding-bottom: 59px;
}
.shoes-maintenance .recommend.sectionBlock .ttl{
    font-size: 24px;
    color: #000;
    font-weight: bold;
    line-height: 1.4;
}
.shoes-maintenance .recommend .desc {
    padding-top: 0;
    gap: 20px;
}
.shoes-maintenance .recommend .desc .descTitle {
    margin-bottom: 4px;
}
.ranking-automatically {
    margin: 0!important;
}
.mainTitle {
    font-size: 24px;
    font-weight: bold;
    padding-left: 15px;
    border-left: 5px solid #000000;
    margin-bottom: 29px;
    line-height: 1.55;
}
.main_ttl3 {
    font-size: 24px;
    font-weight: bold;
    border-bottom: 3px solid #000000;
    margin: 3px 0 0;
    line-height: 1.5;
    padding-bottom: 5px;
}
.sub-title {
    font-size: 20px!important;
    font-weight: bold!important;
    margin-bottom: 4px;
}
.sub-title span {
    display: inline-block;
    font-size: 16px;
    margin-left: 6px;
    font-weight: 500;
}
.text-feature {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}
.text-feature p {
    font-size: 16px;
    font-weight: 500;
}
.black-title {
    background: #121212;
    font-size: 24px;
    font-weight: bold;
    color: #FFF;
    text-align: center;
    padding: 15px 10px;
}
.beginner-reco .black-title {
    padding: 13px 10px;
}
.beginner-reco .mainTitle {
    font-size: 24px;
    font-weight: bold;
    padding-left: 10px;
    border-left: 5px solid #000000;
    margin-bottom: 20px;
    line-height: 1.55;
}
.maintenance-text .desc {
    padding-top: 13px;
}
.recommend .desc {
    padding-top: 24px;
    gap: 24px;
}
.recommend .desc.desc01 {
    padding-top: 8px;
}
.recommend .desc .descTitle {
    line-height: 1.5;
}
.recommend.sectionBlock p {
    line-height: 1.5;
}
.recommend .styleBtn {
    margin-bottom: 16px;
}
.maintenance-text {
    padding-top: 40px;
}
.conclusion-text {
        padding: 19px 10px;
}
.conclusion .main_ttl3 {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 3px solid #000000;
    margin: 0;
    line-height: 1.6;
    padding-bottom: 5px;
}
.conclusion-text .mainTitle{
    font-size: 24px;
    font-weight: bold;
    margin: 18px 0 20px;
    line-height: 1.4;
    padding-left: 10px;
}
.conclusion-text .txt{
    line-height: 1.5;
    margin-bottom: 20px;
}
.conclusion .allBtn a{
    padding: 22px 14px 22px;
    margin-top: 0;
}
.conclusion .recommend .styleBtn {
    margin-bottom: 39px;
}
@media screen and (max-width: 768px) {

}
.ranking_content.sectionBlock {
    padding-top: 0;
}
.ranking_content .wrap_inner{
    padding: 0 10px;
}
.ranking_content h3{
    font-size: 24px;
    font-weight: bold;
    color: #000;
    text-align: center;
}
.ranking_content ul{
    margin-top: 25px;
}
.ranking_content ul li{
   margin-bottom: 16px;
}
/**** anchor *****/
.anchorList {
    margin: 19px 0 0;
    padding: 10px 10px 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 9px;
    box-sizing: border-box;
}
.anchorList li {
    display: flex;
    width: calc(100% / 2 - 5px);
    border-radius: 12px;
    border: 1px solid #676767;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background: #FFFFFF;
    line-height: 1.1em;
    box-sizing: border-box;
    height: 121px;
}
.anchorList li a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: 15px 20px;
    color: #000;
    box-sizing: border-box;
	font-weight: 700;
	font-size:16px;
}
.anchorList li:nth-child(1) img {
    width: 109px;
    margin: auto;
}
.anchorList li:nth-child(2) img {
    width: 138px;
    margin: auto;
}
.anchorList li:nth-child(3) img {
    width: 102px;
    margin: auto;
}
.anchorList li:nth-child(4) img {
    width: 138px;
    margin: auto;
}
/**** shoes / popular ****/
.shoes{
margin-bottom:32px;
}

.shoesList {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
.shoesList li {
    width: calc((100% - 23px) / 2);
}
.shoesList section {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start;
}
.shoesList a {
    text-decoration: none;
    color: #000000;
}
.shoesImg {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.shoesRank {
    font-size: 20px;
    font-weight: bold!important;
}
.shoesName {
    font-size: 16px;
}

/* ===== カルーセル ===== */
.rankingCarousel {
    position: relative;
}

.rankingList {
    display: flex;
    gap: 31px;
    margin-top: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.rankingList::-webkit-scrollbar {
    display: none;
}

/* ★ PC/SP 共通：常に2品番表示 */
.rankingItem {
    flex: 0 0 calc(50% - 27px);
    scroll-snap-align: start;
}

.rankingItem a {
    display: block;
    text-decoration: none;
    color: #000;
}
.rankingItem .shoesRank{
    font-size: 20px;
    margin-top: 4px;
}
.rankingItem .shoesName{
    font-size: 20px;
    margin-top: 4px;
}
/* ===== 矢印 ===== */
.rankingArrow {
    position: absolute;
    top: 40%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(120,120,120,.9);
    cursor: pointer;
    z-index: 2;
}

.rankingArrow::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.rankingArrow.prev {
    left: 4px;
}
.rankingArrow.prev::before {
    transform: rotate(-135deg);
}

.rankingArrow.next {
    right: 4px;
}
.rankingArrow.next::before {
    transform: rotate(45deg);
}

.popularList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 11px;
    margin: 10px 0;
}
.popularList li {
    background: #F4F4F4;
    padding: 10px 9px 8px;
}
.popularList li a {
    text-decoration: none;
}

.popularList li a .name {
    color: #000;
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    line-height: 1.4;
}
.popularList.popularList01 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 11px;
    margin: 12px 0;
}
.popularList.popularList01 li {
    background: #F4F4F4;
    padding: 13px 9px;
}
.popularList.popularList01 li a {
    text-decoration: none;
}
.popularContent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
    align-items: center;
}
.popularContent .left_content .txt{
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #000;
	line-height:1.3;
    margin-top: -5px;
}
.popularShoes p {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #000;
	line-height:1.2;
}
.popularShoes p span{
    display:inline !important;
	font-size:16px;
}
.popularContent .popularShoes .popularTxt {
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    line-height: 1.62;
}
.btn {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
/**** style ****/
.style .black-title {
    margin-bottom: 38px;
}
.style .anchorList li a {
    padding: 20px 5px;
    text-decoration: none;
}
.styleTitle {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
}
.styleImg {
    padding-top: 15px;
}
.limited {
    padding: 0 10px;
}
.limitedText {
    margin-bottom: 26px;
}
.limitedText p{
    line-height: 1.5;
}
.desc {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.desc.desc01 {
    gap: 10px;
}
.desc.desc01 .descContent .descTitle {
    font-weight: bold;
    margin-bottom: 10px;
}
.desc.desc01 .descContent p {
    font-weight: 500;
    line-height: 1.5;
}
.descTitle {
    font-weight: 700!important;
}
.descTitle span{
    font-size: 20px;
}
.descContent a {
    color:#003da6;
}
.descContent ul li {
    list-style: disc;
    margin-left: 20px;
}
.styleBtn a,
.recoBtn a,
.conBtn a,
.availBtn a {
    display: block;
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 0 auto 0;
    padding: 11px;
    border: 1px solid #141110;
    border-radius: 29px;
    background: #FFF;
    color: #141110;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.6;
    box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.15);
}

.CtABtn a {
    display: block;
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 20px auto;
    padding: 14px;
    border: 1px solid #141110;
    border-radius:0;
    background: #FFF;
    color: #141110;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.5;
    box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.15);
}

.allBtn a{
    display: block;
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 0 auto 0;
    padding: 8px 14px 7px;
    border: none;
    letter-spacing: 0;
    border-radius: 36px;
    background: #121212;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 1.45;
    box-shadow: 0 4px 3px 0 rgba(0, 0, 0, 0.15);
    margin-top: 30px;
}

.styleBtn a::after,
.recoBtn a::after,
.conBtn a::after,
.availBtn a::after,
.allBtn a::after,
.CtABtn a::after{
    background: url(../images/reco_arrow.png) no-repeat center;
    background-size: 100%;
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 28px;
    width: 11px;
    height: 25px;
    content: "";
    transform: translateY(-50%);
}
.recoBtn a::after,
.conBtn a::after,
.availBtn a::after,
.allBtn a::after,
.CtABtn a::after{
    background: url(../images/reco_arrow.png) no-repeat center;
    width: 15px;
    height: 17px;
    background-size: 70%;
}

.allBtn a::after{
    background: url(../images/reco_arrow_wt.png) no-repeat center;
    width: 15px;
    height: 17px;
    background-size: 70%;
}

.playstyle-content,
.recommend-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.playstyle .anchorList{
    margin: 38px 0 0;
    padding: 0 8px;
}
.playstyle .anchorList li{
    display: flex;
    width: calc(100% / 3 - 6px);
    border-radius: 12px;
    border: 1px solid #676767;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    background: #FFFFFF;
    line-height: 1.1em;
    box-sizing: border-box;
    height: 59px;
}
.playstyle .style{
    padding-bottom: 40px;
}

.playstyle .mainTitle{
    margin-bottom: 15px;
}
.playstyle .allBtn a{
    margin: 0 0 20px;
}
.playstyle .sectionBlock:last-child {
    padding-bottom: 60px;
}
.styleBtn{
    margin-bottom: 39px;
}
@media screen and (max-width: 768px) {
    /*.recoBtn a {
        text-align: justify;
    }*/
    .recoBtn a::after,
    .conBtn a::after,
	.allBtn a::after{
        right: 27px;
    }
}
/**** article *****/
.article h2 {
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}
.article ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/**** category - nav ****/
.cat-nav-sp {
}
.cat-nav-pc {
    display: block;
}
.cat-nav-pc {
    position: relative;
    z-index: 1200;
    font-family: inherit;
}
.nav-brand {
    border-bottom: 1px solid #676767;
}
.content {
    background: #FFF;
    border: 1px solid #121212;
    border-top: none;
    padding: 18px 13px;
    line-height: 1.5;
}
.content a {
    font-size: 20px;
    color: #000;
    font-weight: 700;
    text-decoration: none;
}
.content .brandList {
    display: flex;
    flex-direction: column;
    margin-left: 36px;
    padding: 6px 0 4px;
}
.content .brandList li {
    list-style: disc;
    margin-bottom: 2px;
}
.content .brandList li a {
    font-size: 16px;
}
.contentTitle {
    background: #121212;
    font-size: 20px;
    font-weight: bold;
    color: #FFF;
    text-align: justify;
    padding: 12px 16px;
    letter-spacing: 0;  
}
.typeList {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.typeList li {
    border-bottom: 1px solid #676767;
    padding: 10px 0 5px;
}
/**** desktop nav ****/
.cat-desktop {
    display: block;
    position: fixed;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    z-index: 1000;
}
.cat-list-desktop {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 0;
    margin: 0;
}
/* Some dynamic widths for responsiveness */
@media screen and (max-width: 1600px) {
    .cat-list-desktop .cat-link {
        width: calc(20vw + 40px);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .cat-text {
        display: flex;
        flex-direction: column;
        line-height: 1.3;
        text-align: left;
    }
    .cat-text span {
        display: block;
    }
}

@media screen and (max-width: 1280px) {
    .cat-desktop {
        right: 6px;
    }
    .cat-list-desktop .cat-link {
        width: calc(19vw + 80px);
    }
    
}

@media screen and (max-width: 1160px) {
    .cat-desktop {
        right: 40px;
    }
    .cat-list-desktop .cat-link {
        width: calc(27vw + 111px);
    }
}

@media screen and (max-width: 880px) {
    .cat-desktop {
        right: 20px;
    }
    .cat-list-desktop .cat-link {
        width: calc(21vw + 120px);
        /* padding: 16px 35px 16px 19px; */
    }
    .cat-text span {
        font-size: 13px;
    }
}
@media screen and (max-width: 768px) {
    .cat-nav-pc{
        display: none;
    }
}

    .cat-nav-sp {
        padding: 15px 10px 0;
    }
    .cat-mobile {
        width: 100%;
        max-width: 500px;
        box-sizing: border-box;
        margin: 0 auto;
        background: #FAFAFA;
        border: 1px solid #333031;
    }

    .cat-list-sp {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
        padding: 0;
        margin: 0;
    }