@charset "utf-8";

.c-products_nav {
    width: 100%;
    max-width: calc(1920px + min(6.0416vw, 116px));
    margin: 0 auto min(16.697vw, 71.8px);
}
@media screen and (min-width: 920px) {
    .c-products_nav {
        padding: 0 min(3.0208vw, 58px);
        margin: 0 auto min(11.979vw, 230px);
    }
}

.c-products_nav_title {
    display: block;
    font-family: var(--font-catch);
    font-size: min(8.372vw, 36px);
    line-height: 1;
    padding: 0 min(100.069vw, 30px);
    margin-bottom: min(4.186vw, 18px);
}
@media screen and (min-width: 920px){
    .c-products_nav_title {
        font-size: min(2.135vw, 41px);
        padding: 0;
        margin-bottom: min(1.4583vw, 28px);
    }
}

.c-products_nav_link {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0 0 0 min(100.069vw, 30px);
    background-color: #F5F5F5;
}
@media screen and (min-width: 920px){
    .c-products_nav_link {
        flex-direction: row;
        padding: 0;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
    }
}

.c-products_nav_textArea {
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: min(11.883vw, 51.1px) min(100.069vw, 30px) min(5.279vw, 22.7px) 0;
}
@media screen and (min-width: 920px){
    .c-products_nav_textArea {
        width: min(36.614vw, 703px);
        padding: 0 min(2.453vw, 47.1px) min(2.343vw, 45px) min(2.526vw, 48.5px);
    }
}

.c-products_nav_catch {
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
@media screen and (min-width: 920px){
    .c-products_nav_catch {
        gap: clamp(0.5rem, 0.098rem + 0.7vw, 0.938rem);
    }
}

.c-products_nav_catch_en {
    font-family: var(--font-catch);
    font-size: min(7.674vw, 33px);
    line-height: 1;
}
@media screen and (min-width: 920px){
    .c-products_nav_catch_en {
        font-size: min(2.083vw, 40px);
    }
}

.c-products_nav_catch_ja {
    font-size: min(3.0232vw, 13px);
    font-weight: 700;
    line-height: 1;
}
@media screen and (min-width: 920px){
    .c-products_nav_catch_ja {
        font-size: clamp(0.625rem, 0.453rem + 0.3vw, 0.813rem);
    }
}

.c-products_nav_icon {
    width: fit-content;
    height: auto;
    display: flex;
    align-items: baseline;
    gap: 8.7px;
    color: #000000;
}
@media screen and (min-width: 920px){
    .c-products_nav_icon {
        gap: min(0.72916vw, 14px);
    }
}

.c-products_nav_icon small {
    font-family: var(--font-en);
    font-size: min(3.023vw, 13px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
}
@media screen and (min-width: 920px){
    .c-products_nav_icon small {
        font-size: min(0.781vw, 15px);
    }
}

.c-products_nav_icon .c-icon {
    width: min(7.86vw, 33px);
    flex: 0 1 min(7.86vw, 33px);
    background-color: #000000;
}
@media screen and (min-width: 920px){
    .c-products_nav_icon .c-icon {
        width: min(2.413vw, 46.33px);
        flex: 0 1 min(2.413vw, 46.33px);
    }
}

.c-products_nav_icon .c-icon::before {
    width: 8px;
    background-color: #000000;
}
@media screen and (min-width: 920px){
    .c-products_nav_icon .c-icon::before {
        width: 10px;
    }
}

.c-products_nav_img {
    display: block;
    width: 100%;
    height: 44.458vw;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
}
@media screen and (min-width: 920px){
    .c-products_nav_img {
        /* width: min(57.343vw, 1101px); */
        height: min(17.2916vw, 332px);
    }
}

.c-products_nav_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
}

.c-products_nav_link:hover .c-products_nav_img img {
    scale: 1.07;
}

/*-------------------- Fishing apparel --------------------*/

.apparel_contents {
    padding-top: min(7.023vw, 30.2px);
}

@media screen and (min-width: 920px){
    .apparel_contents {
        padding-top: min(7.916vw, 152px);
    }
}

.apparel_contents_head {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: min(7.906vw, 34px);
    margin: 0 0 min(8.372vw, 36px);
}
@media screen and (min-width: 920px){
    .apparel_contents_head {
        flex-direction: row;
        justify-content: space-between;
        margin: 0 0 min(4.322vw, 83px);
    }
}

.apparel_contents_title {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
@media screen and (min-width: 920px){
    .apparel_contents_title {
        width: fit-content;
        gap: clamp(0.75rem, 0.463rem + 0.5vw, 1.063rem);
    }
}

.apparel_contents_title_en {
    font-family: var(--font-catch);
    font-size: min(6.976vw, 30px);
    line-height: 1;
    letter-spacing: 0.02em;
}
@media screen and (min-width: 920px){
    .apparel_contents_title_en {
        font-size: min(2.083vw, 40px);
    }
}

.apparel_contents_title_ja {
    font-family: var(--font-serif);
    font-size: min(4.418vw, 19px);
    line-height: 1;
}
@media screen and (min-width: 920px){
    .apparel_contents_title_ja {
        font-size: min(1.14583vw, 22px);
    }
}

@media screen and (min-width: 920px){
    .apparel_contents_text {
        width: min(52.343vw, 1005px);
    }
}

.apparel_contents_text p {
    font-size: min(3.255vw, 14px);
    line-height: 2;
    letter-spacing: 0.04em;
}
@media screen and (min-width: 920px){
    .apparel_contents_text p {
        font-size: min(0.9375vw, 18px);
    }
}

.apparel_contents_nav {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 min(5.581vw, 24px);
}
@media screen and (min-width: 920px){
    .apparel_contents_nav {
        margin: 0 0 min(3.02083vw, 58px);
    }
}

.apparel_contents_link {
    width: 100%;
    height: 42.79vw;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
}
@media screen and (min-width: 920px){
    .apparel_contents_link {
        height: min(23.4375vw, 450px);
    }
}

.apparel_contents_link-04,
.apparel_contents_link-05 {
    width: calc((100% - 2px) / 2);
}
@media screen and (min-width: 920px){
    .apparel_contents_link-04,
    .apparel_contents_link-05 {
        width: 100%;
    }
}

@media screen and (min-width: 920px){
    .apparel_contents_link-01,
    .apparel_contents_link-02 {
        width: calc((100% - 2px) / 2);
    }
}

@media screen and (min-width: 920px){
    .apparel_contents_link-03,
    .apparel_contents_link-04,
    .apparel_contents_link-05 {
        width: calc((100% - 4px) / 3);
    }
}

.apparel_contents_link_img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
}

.apparel_contents_link_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
}

@media screen and (min-width: 920px){
    .apparel_contents_link:hover .apparel_contents_link_img img {
        scale: 1.07;
    }
}

.apparel_contents_link_title {
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    top: 40.7%;
    left: 23px;
}
@media screen and (min-width: 920px){
    .apparel_contents_link_title {
        gap: clamp(0.625rem, 0.338rem + 0.5vw, 0.938rem);
        top: 43%;
        left: min(5vw, 96px);
    }
}

.apparel_contents_link_title_en {
    font-family: var(--font-catch);
    font-size: min(5.58vw, 24px);
    line-height: 1;
    letter-spacing: 0.02em;
}
@media screen and (min-width: 920px){
    .apparel_contents_link_title_en {
        font-size: min(2.135vw, 41px);
    }
}

.apparel_contents_link_title_en p {
    display: none;
}
@media screen and (min-width: 920px){
    .apparel_contents_link_title_en p {
        display: inline;
    }
}

.apparel_contents_link_title_ja {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
}
@media screen and (min-width: 920px){
    .apparel_contents_link_title_ja {
        font-size: clamp(0.625rem, 0.395rem + 0.4vw, 0.875rem);
    }
}

.apparel_contents_link_icon {
    width: fit-content;
    height: auto;
    display: flex;
    align-items: baseline;
    gap: 8.7px;
    color: #ffffff;
    position: absolute;
    right: min(4.302vw, 18.5px);
    bottom: min(3.023vw, 13px);
}
@media screen and (min-width: 920px){
    .apparel_contents_link_icon {
        gap: min(0.72916vw, 14px);
        right: min(2.2916vw, 44px);
        bottom: min(2.1875vw, 32px);
    }
}

.apparel_contents_link_icon small {
    font-family: var(--font-en);
    font-size: min(3.023vw, 13px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
}
@media screen and (min-width: 920px){
    .apparel_contents_link_icon small {
        font-size: min(0.833vw, 16px);
    }
}

.apparel_contents_link_icon .c-icon {
    width: min(7.86vw, 33px);
    flex: 0 1 min(7.86vw, 33px);
    background-color: #ffffff;
}
@media screen and (min-width: 920px){
    .apparel_contents_link_icon .c-icon {
        width: min(2.413vw, 46.33px);
        flex: 0 1 min(2.413vw, 46.33px);
    }
}

.apparel_contents_link_icon .c-icon::before {
    width: 8px;
    background-color: #ffffff;
}
@media screen and (min-width: 920px){
    .apparel_contents_link_icon .c-icon::before {
        width: 10px;
    }
}

.apparel_contents_link-04 .apparel_contents_link_title,
.apparel_contents_link-05 .apparel_contents_link_title {
    left: 15px;
}
@media screen and (min-width: 920px){
    .apparel_contents_link-04 .apparel_contents_link_title,
    .apparel_contents_link-05 .apparel_contents_link_title {
        left: min(5vw, 96px);
    }
}

@media screen and (min-width: 920px){
    .apparel_contents_link-03 .apparel_contents_link_title,
    .apparel_contents_link-04 .apparel_contents_link_title,
    .apparel_contents_link-05 .apparel_contents_link_title {
        top: 42.5%;
        left: min(2.2916vw, 44px);
    }
}

@media screen and (min-width: 920px){
    .apparel_contents_link-03 .apparel_contents_link_icon,
    .apparel_contents_link-05 .apparel_contents_link_icon {
        color: #000000;
    }
}

@media screen and (min-width: 920px){
    .apparel_contents_link-03 .apparel_contents_link_icon .c-icon,
    .apparel_contents_link-03 .apparel_contents_link_icon .c-icon::before,
    .apparel_contents_link-05 .apparel_contents_link_icon .c-icon,
    .apparel_contents_link-05 .apparel_contents_link_icon .c-icon::before {
        background-color: #000000;
    }
}

.apparel_contents .c-btn {
    margin: 0 auto;
}
@media screen and (min-width: 920px){
    .apparel_contents .c-btn {
        width: min(45.468vw, 873px);
    }
}

.apparel_contents .c-btn p {
    display: none;
}
@media screen and (min-width: 920px){
    .apparel_contents .c-btn p {
        display: inline;
    }
}

.apparel_contents_collection {
    padding-top: min(16.744vw, 72px);
    /* margin-bottom: min(20.046vw, 86.2px); */
}
@media screen and (min-width: 920px){
    .apparel_contents_collection {
        padding-top: min(9.84375vw, 189px);
        /* margin-bottom: min(9.531vw, 183px); */
    }
}

.apparel_contents_collection_container {
    position: relative;
    display: block;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-start;
        gap: min(7.994vw, 153.5px);
    }
}

.apparel_contents_collection_thumb {
    width: 100%;
    height: 125.116vw;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_thumb {
        width: min(60.9375vw, 1170px);
        height: min(40.677vw, 781px);
        flex: 0 1 min(60.9375vw, 1170px);
    }
}

.apparel_contents_collection_thumb::before {
    content: "";
    position: absolute;
    background: rgb(4,40,59);
    background: linear-gradient(0deg, rgba(4,40,59,1) 0%, rgba(255,255,255,1) 100%);
    opacity: 0.6;
    mix-blend-mode: multiply;
    width: 100%;
    height: min(45.116vw,194px);
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_thumb::before {
        content: none;
    }
}

.apparel_contents_collection_thumb_inner {
    display: block;
    width: 100%;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
}

.apparel_contents_collection_thumb_inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
}

.apparel_contents_collection_textArea {
    width: calc(100% - 60px);
    height: auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_textArea {
        width: min(18.125vw, 348px);
        flex-direction: column;
        align-items: normal;
        justify-content: flex-start;
        gap: min(2.5468vw, 48.9px);
        transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
    }
}

.apparel_contents_collection_textArea-sp {
    pointer-events: none;
    position: absolute;
    bottom: 26px;
    left: 50%;
    translate: -50% 0;
    z-index: 2;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_textArea-sp {
        display: none;
    }
}

.apparel_contents_collection_textArea-pc {
    display: none;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_textArea-pc {
        display: flex;
    }
}

.apparel_contents_collection_catch {
    font-family: var(--font-catch);
    font-size: min(5.813vw, 25px);
    line-height: 1.4;
    color: #ffffff;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_catch {
        font-size: min(2.083vw, 40px);
        color: #000000;
    }
}

.apparel_contents_collection_icon {
    width: fit-content;
    height: auto;
    display: flex;
    align-items: baseline;
    gap: 8.7px;
    color: #ffffff;
    padding-bottom: 6px;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_icon {
        gap: min(0.72916vw, 14px);
        color: #000000;
        padding-bottom: 0;
    }
}

.apparel_contents_collection_icon small {
    font-family: var(--font-en);
    font-size: min(3.023vw, 13px);
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.05em;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_icon small {
        font-size: min(0.781vw, 15px);
    }
}

.apparel_contents_collection_icon .c-icon {
    width: min(7.86vw, 33px);
    flex: 0 1 min(7.86vw, 33px);
    background-color: #ffffff;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_icon .c-icon {
        width: min(2.413vw, 46.33px);
        flex: 0 1 min(2.413vw, 46.33px);
        background-color: #000000;
    }
}

.apparel_contents_collection_icon .c-icon::before {
    width: 8px;
    background-color: #ffffff;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_icon .c-icon::before {
        width: 10px;
        background-color: #000000;
    }
}

.apparel_contents_collection_link:has(.apparel_contents_collection_textArea-pc) {
    display: none;
}
@media screen and (min-width: 920px){
    .apparel_contents_collection_link:has(.apparel_contents_collection_textArea-pc) {
        display: block;
    }
}

@media screen and (min-width: 920px){
    .apparel_contents_collection_container:hover .apparel_contents_collection_thumb_inner img {
        transform: scale(1.07);
    }

    .apparel_contents_collection_container:hover .apparel_contents_collection_textArea {
        opacity: 0.5;
    }
}

/*-------------------- Fishing apparel --------------------*/
/*-------------------- Fishing Gear --------------------*/
.gear_contents {
    width: 100%;
    padding-top: min(14.465vw, 62.2px);
}
@media screen and (min-width: 920px){
    .gear_contents {
        padding-top: min(7.8125vw, 150px);
    }
}

.gear_contents_nav {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: min(10.9302vw, 47px);
    margin-bottom: min(14.465vw, 62.2px);
}
@media screen and (min-width: 920px){
    .gear_contents_nav {
        flex-direction: row;
        gap: min(3.0208vw, 58px);
        margin-bottom: min(10.416vw, 200px);
    }
}

@media screen and (min-width: 920px){
    .gear_contents_nav_item {
        width: calc(100% - min(3.0208vw, 58px) / 2);
    }
}

.gear_contents_nav_title {
    font-family: var(--font-catch);
    font-size: min(100.069vw, 30px);
    line-height: 1;
    letter-spacing: 0.02em;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: min(3.255vw, 14px);
}
@media screen and (min-width: 920px){
    .gear_contents_nav_title {
        font-size: min(2.1354vw, 41px);
        gap: 12px;
        margin-bottom: min(1.4583vw, 28px);
    }
}

.gear_contents_nav_title span {
    width: 12px;
    height: 12px;
    display: block;
    position: relative;
}
@media screen and (min-width: 920px){
    .gear_contents_nav_title span {
        width: clamp(0.5rem, 0.04rem + 0.8vw, 1rem);
        height: clamp(0.5rem, 0.04rem + 0.8vw, 1rem);
    }
}

.gear_contents_nav_title span::before,
.gear_contents_nav_title span::after {
    content: "";
    position: absolute;
    background-color: #000000;
    width: 100%;
    height: 1px;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(45deg);
}

.gear_contents_nav_title span::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.gear_contents_nav_title small {
    font-family: var(--font-catch);
    font-size: min(5.116vw, 22px);
    line-height: 1;
    letter-spacing: 0.02em;
}
@media screen and (min-width: 920px){
    .gear_contents_nav_title small {
        font-size: min(1.5625vw, 30px);
    }
}

.gear_contents_nav_thumb {
    display: block;
    width: 100%;
    height: 44.418vw;
    margin-bottom: min(4.418vw, 19px);
}
@media screen and (min-width: 920px){
    .gear_contents_nav_thumb {
        height: min(23.4375vw, 450px);
        margin-bottom: min(1.66vw, 32px);
        transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
    }
}

.gear_contents_nav_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.3s cubic-bezier(0.18, 0.06, 0.23, 1);
}

.gear_contents_nav_item p {
    font-size: min(3.255vw, 14px);
    line-height: 1.5;
    letter-spacing: 0.08em;
}
@media screen and (min-width: 920px){
    .gear_contents_nav_item p {
        font-size: min(0.833vw, 16px);
        line-height: 1;
    }
}

.gear_contents_nav_item .c-btn {
    width: 100%;
    margin: min(4.418vw, 19px) 0 0;
}
@media screen and (min-width: 920px){
    .gear_contents_nav_item .c-btn {
        margin: min(1.5625vw, 30px) 0 0;
    }
}

.gear_contents_nav_item .c-btn .c-btn_text-ja {
    display: none;
}
@media screen and (min-width: 920px){
    .gear_contents_nav_item .c-btn .c-btn_text-ja {
        display: inline;
    }
}

.gear_contents_nav_item-epic .gear_contents_nav_thumb {
    background-image: image-set(url(../img/gear/nav_epic-open.jpg) 1x, url(../img/gear/nav_epic-open@2x.jpg) 2x);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.gear_contents_nav_item-tiemco .gear_contents_nav_thumb {
    background-image: image-set(url(../img/gear/nav_tiemco-open.jpg) 1x, url(../img/gear/nav_tiemco-open@2x.jpg) 2x);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media screen and (min-width: 920px){
    .gear_contents_nav_thumb:hover img {
        opacity: 0;
    }
}