@charset "utf-8";

/* -------------------
common 
---------------------- */
html {
    height: 100%;
}

body {
    position: relative;
    min-width: 1140px;
    height: 100%;
    box-sizing: border-box;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, Meiryo, sans-serif;
    font-feature-settings: "palt";
    letter-spacing: 1px;
    color: #2f2f2f;
}

.fs-l-main {
    margin: 146px auto;
    min-width: 1520px;
}

.inner {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.SP {
    display: none;
}

.isHidden {
    overflow: hidden;
}

/* -------------------
header 
---------------------- */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    min-width: 1520px;
    padding: 56px 50px;
    box-sizing: border-box;
    transition: 0.6s;
}

.main-header.on {
    background-color: #fff;
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.1);
}

.main-header ul,
.main-header ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1420px;
    margin: 0 auto;
}

.header__logo a {
    display: block;
    width: 200px;
}

.header__logo a img {
    width: 100%;
    height: auto;
}

.header__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header__nav ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 800px;
}
.header__nav ul li:first-of-type{
	width: 64px;
}
.header__nav ul li:nth-of-type(2){
	width: 90px;
}
.header__nav ul li:nth-of-type(3){
	width: 90px;
}
.header__nav ul li:nth-of-type(4){
	width: 55px;
}
.header__nav ul li:nth-of-type(5){
	width: 43px;
}
.header__nav ul li:last-of-type{
	width: 97px;
}



.header__nav ul li + li {
    margin-left: 72px;
}

.header__nav ul li a,
.header__nav ul li a:visited,
.header__nav ul li a:link,
.header__nav ul li a:hover {
    font-size: 18px;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 2px;
    color: #2f2f2f;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.header__action {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 56px;
    width: 120px;
}
.header__action div{
	width: 34px;
}

.header__cart {
    margin-left: 52px;
}

.header__user a,
.header__cart a {
    display: block;
}

.header__user a img,
.header__cart a img {
    width: auto;
    height: 34px;
}

/* -------------------
footer 
---------------------- */
footer {
    border-top: solid 1px #e5e5e5;
    padding: 100px 0 36px;
    width: 100%;
    min-width: 1520px;
}

footer ul,
footer ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer__inner {
    max-width: 1000px;
    margin: 0 auto;
}

.footer__mainnav {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
}

.footer__logo {
    width: 240px;
}

.footer__mainnav nav {
    width: calc(100% - 240px);
}

.footer__mainnav nav ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.footer__mainnav nav ul li + li {
    margin-left: 68px;
}

.footer__mainnav nav ul li a,
.footer__mainnav nav ul li a:visited,
.footer__mainnav nav ul li a:link,
.footer__mainnav nav ul li a:hover {
    font-size: 18px;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 2px;
    color: #2f2f2f;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.footer__subnav {
    margin-bottom: 48px;
}

.footer__subnav nav {
    display: flex;
    justify-content: flex-start;
}

.footer__subnav nav ul + ul {
    margin-left: 86px;
}

.footer__subnav nav ul li + li {
    margin-top: 24px;
}

.footer__subnav nav ul li a,
.footer__subnav nav ul li a:visited,
.footer__subnav nav ul li a:link,
.footer__subnav nav ul li a:hover {
    font-size: 14px;
    font-weight: 200;
    color: #2f2f2f;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.footer__sns {
    margin-bottom: 54px;
}

.footer__sns ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer__sns ul li {
    width: 48px;
    height: 48px;
}

.footer__sns ul li + li {
    margin-left: 28px;
}

.footer__sns ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border: solid 1px #c7c7c7;
    border-radius: 50%;
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.footer__bottom nav ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer__bottom nav ul li a,
.footer__bottom nav ul li a:visited,
.footer__bottom nav ul li a:link,
.footer__bottom nav ul li a:hover {
    display: block;
    padding-left: 24px;
    padding-right: 24px;
    font-size: 14px;
    font-weight: 200;
    color: #989797;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
}

.footer__bottom nav ul li:first-child a {
    padding-left: 0;
}

.footer__bottom nav ul li:last-child a {
    padding-right: 0;
}

.footer__bottom nav ul li + li {
    border-left: solid 1px #c7c7c7;
}

.footer__bottom .copyright {
    font-size: 14px;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 300;
    color: #989797;
    letter-spacing: 2px;
}

/* -------------------
fv.underlayer 
---------------------- */
#fv.underlayer {
    padding: 84px 0;
}

#fv.underlayer h1 {
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 4px;
    text-align: center;
}

#fv.underlayer h1 span {
    display: table;
    margin: 0 auto 16px;
    font-size: 65px;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 6px;
}

/* -------------------
pager 
---------------------- */
#pager ol {
    display: flex;
    justify-content: center;
    align-items: center;
}

#pager ol li {
    width: 60px;
    height: 60px;
    margin: 0 10px;
}

#pager ol li span,
#pager ol li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-weight: 200;
}

#pager ol li span {
    background-color: #626262;
    color: #fff;
}

#pager ol li a {
    border: solid 1px #bfbfbf;
}

/* -------------
tags
---------------- */
#tags .inner {
    border-top: solid 1px #dcdcdc;
    border-bottom: solid 1px #dcdcdc;
    padding: 48px;
}

#tags .tags__list {
    font-size: 0;
}

#tags .tags__list li {
    display: inline-block;
    background-color: #e5e5e5;
    border-radius: 1000px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 8px 20px;
    font-size: 14px;
    text-align: center;
}

/* -------------------
title 
---------------------- */
.en-jp-title {
    margin-bottom: 68px;
    font-size: 18px;
    color: #2f2f2f;
    text-align: center;
    letter-spacing: 3px;
}
.en-jp-title span {
    display: table;
    margin: 0 auto 16px;
    font-size: 45px;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 6px;
}

/* -------------------
button 
---------------------- */
.see-more-btn a {
    position: relative;
    padding-right: 80px;
    font-size: 16px;
    font-family: futura-pt, sans-serif;
    font-style: normal;
    font-weight: 300;
    color: #2f2f2f;
    letter-spacing: 1px;
    transition: 0.3s;
}
.see-more-btn a::before,
.see-more-btn a::after {
    position: absolute;
    content: "";
    right: 0;
    height: 1px;
    background-color: #535353;
}
.see-more-btn a::before {
    bottom: 6px;
    width: 68px;
}
.see-more-btn a::after {
    bottom: 9px;
    width: 8px;
    transform: rotate(45deg);
}

.btn.center {
    text-align: center;
}

/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 1024px) {

    /* -------------------
    common 
    ---------------------- */
    body {
        min-width: inherit;
        letter-spacing: 1px;
    }
    .fs-l-main {
        margin: 56px auto 80px;
        min-width: auto;
    }
    .inner {
        max-width: 90%;
        padding-left: 0;
        padding-right: 0;
    }
    .PC {
        display: none;
    }
    .SP {
        display: block;
    }

    /* -------------------
    header 
    ---------------------- */
    .main-header {
        min-width: auto;
        padding: 8px 20px;
    }

    .header__inner {
        max-width: 100%;
    }

    .header__left {
        width: 120px;
    }

    .header__logo a {
        width: 100%;
    }

    .header__logo a img {
        width: 100%;
        height: auto;
    }

    .header__right {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: calc(100% - 120px);
        margin-left: 20px;
    }

    .header__action {
        justify-content: flex-end;
        width: 100%;
        margin-left: 0;
    }

    .header__cart {
        margin-left: 12px;
    }

    .header__user a,
    .header__cart a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
    }

    .header__user a img,
    .header__cart a img {
        height: 20px;
    }

    .header__menu {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 40px;
        height: 40px;
        margin-left: 12px;
    }

    .header__menu span {
        position: relative;
        display: block;
        width: 23px;
        height: 2px;
    }

    .header__menu span::before,
    .header__menu span::after {
        position: absolute;
        content: "";
        left: 0;
        width: 100%;
        height: 2px;
        margin: 0 auto;
        background-color: #231815;
    }

    .header__menu span::before {
        top: -6px;
    }

    .header__menu span::after {
        top: 5px;
    }

    /* -------------------
    footer 
    ---------------------- */
    footer {
        padding: 32px 0 20px;
        min-width: auto;
    }

    .footer__inner {
        max-width: 90%;
        margin: 0 auto;
    }

    .footer__mainnav {
        display: block;
        margin-bottom: 32px;
    }

    .footer__logo {
        width: 100%;
        margin-bottom: 28px;
    }

    .footer__logo a img {
        width: 120px;
    }

    .footer__mainnav nav {
        width: 100%;
    }

    .footer__mainnav nav ul {
        display: block;
    }

    .footer__mainnav nav ul li {
        border-top: solid 1px #e5e5e5;
    }

    .footer__mainnav nav ul li:last-child {
        border-bottom: solid 1px #e5e5e5;
    }

    .footer__mainnav nav ul li + li {
        margin-left: 0;
    }

    .footer__mainnav nav ul li a {
        position: relative;
        display: block;
        padding: 12px 0;
        font-size: 16px;
        letter-spacing: 2px;
    }

    .footer__mainnav nav ul li a::before {
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        margin: auto 0;
        right: 8px;
        display: block;
        width: 7px;
        height: 7px;
        border-top: solid 1px #2f2f2f;
        border-right: solid 1px #2f2f2f;
        transform: rotate(45deg);
    }

    .footer__subnav {
        margin-bottom: 28px;
    }
	
	.footer__subnav nav  { 
		 display: block;
		  }
	
    .footer__subnav nav ul {
        width: 100%;
        font-size: 0;
        padding: 0 0 20px;
    }

    .footer__subnav nav ul + ul {
        margin-left: 0;
    }

    .footer__subnav nav ul li + li {
        position: relative;
        margin-top: 20px;
    }

    .footer__subnav nav ul li + li::before {
        display: none;
    }

    .footer__subnav nav ul li a,
    .footer__subnav nav ul li a:visited,
    .footer__subnav nav ul li a:link,
    .footer__subnav nav ul li a:hover {
        font-size: 12px;
    }

    .footer__sns {
        margin-bottom: 36px;
    }

    .footer__sns ul li {
        width: 40px;
        height: 40px;
    }

    .footer__sns ul li + li {
        margin-left: 16px;
    }

    .footer__bottom {
        display: block;
    }

    .footer__bottom nav {
        margin-bottom: 28px;
    }

    .footer__bottom nav ul li a,
    .footer__bottom nav ul li a:visited,
    .footer__bottom nav ul li a:link,
    .footer__bottom nav ul li a:hover {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 10px;
    }

    .footer__bottom nav ul li + li {
        border-left: solid 1px #c7c7c7;
    }

    .footer__bottom .copyright {
        display: block;
        font-size: 10px;
        letter-spacing: 2px;
        text-align: center;
    }

    /* -------------------
    fv.underlayer 
    ---------------------- */
    #fv.underlayer {
        padding: 40px 0 60px;
    }

    #fv.underlayer h1 {
        font-size: 14px;
        letter-spacing: 2px;
    }

    #fv.underlayer h1 span {
        margin: 0 auto 12px;
        font-size: 40px;
        letter-spacing: 3px;
    }

    /* -------------------
    pager 
    ---------------------- */
    #pager ol li {
        width: 32px;
        height: 32px;
        margin: 0 8px;
    }

    #pager ol li span,
    #pager ol li a {
        font-size: 13px;
    }

    /* -------------
    tags
    ---------------- */
    #tags .inner {
        padding: 24px 16px 16px;
    }

    #tags .tags__list {
        font-size: 0;
    }

    #tags .tags__list li {
        margin-right: 8px;
        margin-bottom: 8px;
        padding: 8px 12px;
        font-size: 10px;
    }

    /* -------------------
    title 
    ---------------------- */
    .en-jp-title {
        margin-bottom: 28px;
        font-size: 14px;
        letter-spacing: 4px;
    }
    .en-jp-title span {
        display: table;
        margin: 0 auto 12px;
        font-size: 32px;
        letter-spacing: 6px;
    }

    /* -------------------
    button 
    ---------------------- */
    .see-more-btn a {
        padding-right: 42px;
        font-size: 14px;
    }
    .see-more-btn a::before {
        width: 32px;
    }
    .see-more-btn a::after {
        width: 6px;
    }

    /* 
    .btn a {
        width: 300px;
        padding: 16px;
        font-size: 16px;
    }

    .btn.plus a::before,
    .btn.plus a::after {
        right: 20px;
        width: 15px;
    }

    .btn.cart a {
        background: #fff url(../images/product_detail/cart.svg) no-repeat right 30px center / 24px;
    }

    .btn.backtop {
        margin-bottom: 80px;
    }

    .btn.backtop a {
        padding: 0 16px;
        line-height: 60px;
    } */

    /* -------------------
    menu  
    ---------------------- */
    #menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: #fff;
    }

    .menu__close {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
    }

    .menu__close img {
        width: 24px;
        height: auto;
    }

    .menu__logo {
        padding: 36px 0;
        text-align: center;
    }

    .menu__logo a {
        display: block;
    }

    .menu__logo a img {
        width: 160px;
        height: auto;
    }

    .menu__mainnav {
        margin-bottom: 28px;
    }

    .menu__mainnav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .menu__mainnav ul li {
        border-top: solid 1px #e5e5e5;
        font-size: 18px;
        font-family: futura-pt, sans-serif;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 2px;
    }

    .menu__mainnav ul li:last-child {
        border-bottom: solid 1px #e5e5e5;
    }

    .menu__mainnav ul li a,
    .menu__mainnav ul li a:visited,
    .menu__mainnav ul li a:link,
    .menu__mainnav ul li a:hover {
        position: relative;
        display: block;
        padding: 16px 28px 16px 12px;
        color: #2f2f2f;
        text-decoration: none;
    }

    .menu__mainnav ul li a::before {
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        margin: auto 0;
        right: 12px;
        display: block;
        width: 8px;
        height: 8px;
        border-top: solid 1px #2f2f2f;
        border-right: solid 1px #2f2f2f;
        transform: rotate(45deg);
    }

    .menu__sns {
        margin-bottom: 32px;
    }

    .menu__sns ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .menu__sns ul li {
        width: 48px;
        height: 48px;
    }

    .menu__sns ul li + li {
        margin-left: 12px;
    }

    .menu__sns ul li a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border: solid 1px #c7c7c7;
        border-radius: 50%;
    }

    .menu__subnav ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .menu__subnav ul li {
        margin-bottom: 20px;
    }

    .menu__subnav ul li a,
    .menu__subnav ul li a:visited,
    .menu__subnav ul li a:link,
    .menu__subnav ul li a:hover {
        position: relative;
        padding-left: 16px;
        font-size: 12px;
        color: #989797;
        text-decoration: none;
    }

    .menu__subnav ul li a::before {
        position: absolute;
        content: "";
        left: 0;
        top: 6px;
        width: 8px;
        height: 1px;
        margin: 0 auto;
        background-color: #989797;
    }
    #fs_form .fs-c-slick .slick-prev {
        display: none !important;
    }
    #fs_form .fs-c-slick .slick-next {
        display: none !important;
    }
}

@property --scroll {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --scroll-delayed {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --scroll-direction {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}


@keyframes setScrollProps {
  to {
    --scroll: 1000;
    --scroll-delayed: 1000;
  }
}

:root {
  animation: setScrollProps linear both;
  animation-timeline: scroll(root);
   --header-effect-duration: .5s;
}

body {
   transition: --scroll-delayed calc(var(--header-effect-duration) + .01s);   
   --scroll-velocity: calc(var(--scroll) - var(--scroll-delayed));
   --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
   --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));
}

.main-header {
   will-change: transform;
   transition: transform var(--header-effect-duration);
   transform: translateY(var(--translate));

   @container style(--scroll-direction: 0) {
      transition-delay: calc(infinity * 1s);  
   }

   @container style(not (--scroll-direction: 0)) {
      transition-delay: 0s;  
   }

   @container style(--scroll-direction: -1) {
      --translate: 0;
   }

   @container style(--scroll-direction: 1) { 
      --translate: -100%;
   }
}