@charset "utf-8";
@import url("https://use.typekit.net/jqd3mxh.css");
main { max-width: 1200px; margin: 0 auto; padding: 0 15px;}

main img { 
    display: block;
    width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto 15px;}

section { 
    max-width: 840px; margin: 0 auto; padding: 80px 0 0;
    font-size: 16px; line-height: 1.8em; text-align: center;}


/**============================================================================================**/
main h2 {
    margin: 0 0 30px; 
    font-family: "avenir-next-world", sans-serif;
    font-style: normal;
    color: #c01f2e; font-size: 50px; font-weight: 700; line-height: 1.4em;}

main h2 span { color: #262626; font-size: 98px; line-height: 1.4em;}

@media screen and (max-width:699px){
    main h2 { font-size: 33px;}
    main h2 span { font-size: 65px;}
}

@media screen and (max-width:499px){
    main h2 { font-size: 25px;}
    main h2 span { font-size: 49px;}
}


section > p { margin: 0 0 50px;}

main ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto;}

.gear-finder,
.recommend {
    -webkit-justify-content: center;
    justify-content: center;}

main li { box-sizing: border-box; width: 100%; padding: 10px;}
.gear-finder a,
.recommend a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%; height: 50px;
    border-radius: 50px;
    background: #000;
    color: #fff; font-size: 18px; line-height: 1.0em; text-decoration: none;}

.gear-finder a:hover,
.recommend a:hover { background: #d9534f; color: #fff;}

/* ギアファインダー（TOP） */
.gear-finder { margin-bottom: 60px;}
.gear-finder li { max-width: 220px;}

/* ギアファインダー（TOP以外の選択肢） */
.recommend li { max-width: 420px;}

@media screen and (max-width:869px){
    .recommend { max-width: 420px;}
}

/* おすすめ商品一覧 */
 h3 {
    margin: 0 0 20px; padding: 5px 10px;
    background: #000;
    color: #fff; font-size: 16px; font-weight: 600; text-align: left;}

.item { margin-bottom: 60px; color: #666; font-size: 13px; line-height: 1.4em;}
.item li { width: 33.33%; margin: 0 0 10px;}
.item p { margin: 10px 0 0;}
.item a { font-size: 16px; font-weight: 600; line-height: 1.0em;}
.item a span { display: block;}

@media screen and (max-width:599px){
    .item li { width: 50%;}
}

@media screen and (max-width:399px){
    .item li { width: 100%;}
}

/* 前の質問に戻る */
.pageback { 
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    width: 100%; margin: 60px 0 100px;}

.pageback a { color: #54595f; font-size: 18px; font-weight: 600; line-height: 1.0em;}
.pageback a:hover { color: #d9534f;}

/* 矢印（前の質問に戻る） */
.pageback span {
    display: inline-block; position: relative; top: -3px;
    width: 20px; height: 6px; margin: 0 12px 0 0; 
    border-radius: 9999px;
    background-color: #54595f;}

.pageback span::before, 
.pageback span::after {
    content: "";
    position: absolute; top: calc(50% - 3px); left: 0;
    width: 16px; height: 6px;
    border-radius: 9999px;
    background-color: #54595f; 
    transform-origin: 3px 50%;}

.pageback span::before { transform: rotate(45deg);}
.pageback span::after { transform: rotate(-45deg);}

.pageback span,
.pageback span::before, 
.pageback span::after {
	-webkit-transition: all 0.5s;
	transition: all 0.5s;}

.pageback a:hover span,
.pageback a:hover span::before, 
.pageback a:hover span::after { background-color: #d9534f;}