@font-face {
    font-family: 'Din1451Alt-tuned';
  
    /* ▼A: 気持ち小さく（shift3）にする場合
    src: url('../fonts/din1451alt-shift3.woff2') format('woff2');
    size-adjust: 115%;
    */
  
    /* ▼B: ひらがな(Noto)に高さを完全一致（shift4）にする場合 */
    src: url('../fonts/din1451alt-shift4.woff2') format('woff2');
    size-adjust: 119%;

    font-weight: 400; /* normal */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Din1451Alt-tuned';
  
    /* ▼A と揃えるとき
    src: url('../fonts/din1451alt_g-shift3.woff2') format('woff2');
    size-adjust: 115%;
    */
  
    /* ▼B と揃えるとき */
    src: url('../fonts/din1451alt_g-shift4.woff2') format('woff2');
    size-adjust: 119%;

    font-weight: 700; /* bold */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NotoSansJP-tuned';
    /* normalの場合のNotoのフォントウェイトを完全に固定する為、ウェイトが一つしか無いフォントファイルを使用 */
    /* normalの場合のNotoのフォントウェイトを変更するには、↓のフォントファイルを変更する */
    src: url('../fonts/NotoSansJP-subset-600.woff2') format('woff2');
    font-weight: 400; /* ←normal指定時に↑のフォントファイルを使用 */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'NotoSansJP-tuned';
    /* boldの場合のNotoのフォントウェイトを完全に固定する為、ウェイトが一つしか無いフォントファイルを使用 */
    /* boldの場合のNotoのフォントウェイトを変更するには、↓のフォントファイルを変更する */
    src: url('../fonts/NotoSansJP-subset-800.woff2') format('woff2');
    font-weight: 700; /* ←bold指定時に↑のフォントファイルを使用 */
    font-style: normal;
    font-display: swap;
}


*::-webkit-scrollbar {
    display: none;
}
* {
    scrollbar-width: none;
}

body {
    font-family: 'Din1451Alt-tuned', 'NotoSansJP-tuned', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing:subpixel-antialiased;
    padding-top: 120px;
    line-height: 1.95;
    letter-spacing: 0.02rem;
    font-feature-settings: "palt";
    font-variant-numeric: proportional-nums;
    word-break: keep-all;
    overflow-wrap: break-word;
    font-size: 1500px;
    -webkit-text-size-adjust: 100%;
}
/* 商品一覧ページへフッター追加するまでの暫定対応 */
body:has(#rack_counter) {
    padding-bottom: 200px;
}

/* PC Banner Page Styles */
.pc-banner-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
}

.pc-banner-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

button {
    font-family: 'Din1451Alt-tuned', 'NotoSansJP-tuned', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
}

#elementFormwork,#getCountURL {
    display: none;
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 120px;
    border: #777;
    z-index: 2000;
    background-color: transparent;
    touch-action: manipulation;
}
#header-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(calc(var(--view-frame-width) * 0.0166)) saturate(180%);
    transition: all .3s;
}
#header:has( #menu_open:checked) #header-background {
    background-color: white;
    transition: all .5s;
}
#header .icons_frame {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    background-color: transparent;
    position: relative;
    z-index: 10;
}
#header .icon_position {
    display: inline-block;
    height: 100%;
    width: fit-content;
    margin: 0 auto;
    position: relative;
}
#header #logo.icon_position {
    margin-left: 0;
    width: 33.33%;
}
#header #favorite.icon_position {
    margin-right: 3px;
}
#header #cart.icon_position {
    margin-left: 0;
    margin-right: 3px;
}
#header #menu.icon_position {
    margin-left: 0;
    margin-right: 15px;
}
#header .icon_position a {
    display: flex;
    text-decoration: none;
    color: unset;
    padding: 20px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: 100%;
    position: relative;
}

#header #logo.icon_position a span {
    display: block;
    background-image: url("../img/sc-logo.svg");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    box-sizing: border-box;
    width: 150px;
    height: 100%;
}
#header #cart.icon_position a span {
    display: block;
    background-image: url("../img/cart.svg");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 50px;
    height: 100%;
    position: relative;
    right: 8px;
}
#header #favorite.icon_position a span {
    display: block;
    background-image: url("../img/like.svg");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 50px;
    height: 100%;
    position: relative;
    right: 8px;
}
#header #menu.icon_position a {
    padding: 0;
    width: 70px;
}
#header #menu.icon_position a span,#header #menu.icon_position a::before,#header #menu.icon_position a::after {
    display: block;
    height: 4px;
    width: 38px;
    transform: translate(-50%, -50%) rotate(0deg);
    top: 50%;
    left: 50%;
    position: absolute;
    background-color: #000;
    content: '';
    transition: all .3s;
}
#header #menu.icon_position a::before {
    transform: translate(-50%, calc(-50% + 15px)) rotate(0deg);
}
#header #menu.icon_position a::after {
    transform: translate(-50%, calc(-50% - 15px)) rotate(0deg);
}

#header #menu.icon_position a:has( #menu_open:checked) span {
    /* transform: translate(-50%, -50%) rotate(0deg); */
    /* width: 6px; */
    transform: translate(-50%, -50%) rotate(-45deg);
}
#header #menu.icon_position a:has( #menu_open:checked)::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
#header #menu.icon_position a:has( #menu_open:checked)::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

#itemsNum,#favoritesNum {
    position: absolute;
    top: 23px;
    right: 0px;
    color: #fff;
    background-color: #000;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 27px;
    height: 27px;
    font-size: 20px;
    line-height: 27px;
}

#menu_open {
    display: block;
    opacity: 0;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


#menu-itself_back {
    position: fixed;
    width: 100%;
    top: 120px;
    left: 0;
    height: 100%;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;
    background-color: #77777799;
    transition: all .3s;
    opacity: 0;
    overflow: scroll;
}
#menu-itself {
    position: relative;
    width: 100%;
    max-width: 1200px;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    transition: all .3s;
    background-color: white;
    padding-top: 80px;
}
#menu-itself > div {
    margin: 0 auto;
    width: 88%;
}
#menu-itself .main_links {
    padding-bottom: 40px;
    border-bottom:  var(--border-line-weight) solid gray;
}

#menu-itself .main_links a {
    margin-bottom: 60px;
    display: block;
    font-size: 56px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    transition: all .3s cubic-bezier(.4,0,.6,1);
    transition-delay: 0s;
    transform: translateY(calc(var(--view-frame-width) * -0.025));
    opacity: 0;
}
#header:has( #menu_open:checked) #menu-itself .main_links a {
    transition: all .5s cubic-bezier(.4,0,.6,1);
    transform: translateY(0);
    opacity: 1;
}
#menu-itself .main_links a:nth-child(1) {
    transition-delay: 0.025s;
}
#menu-itself .main_links a:nth-child(2) {
    transition-delay: 0.05s;
}
#menu-itself .main_links a:nth-child(3) {
    transition-delay: 0.075s;
}
#menu-itself .sub_links {
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 80px;
}
#menu-itself .sub_links a {
    margin-bottom: 60px;
    display: block;
    font-size: 28px;
    text-decoration: none;
    color: #000;
    transition: all .3s cubic-bezier(.4,0,.6,1);
    transition-delay: 0s;
    transform: translateY(calc(var(--view-frame-width) * -0.025));
    opacity: 0;
}
#header:has( #menu_open:checked) #menu-itself .sub_links a {
    transition: all .5s cubic-bezier(.4,0,.6,1);
    transform: translateY(0);
    opacity: 1;
}
#header:has( #menu_open:checked) #menu-itself_back {
    visibility: visible;
    pointer-events: all;
    opacity: 1;
}
#header:has( #menu_open:checked) #menu-itself {
    top: 0;
}
#header:has( #menu_open:checked) #menu-itself .sub_links a:nth-child(1) {
    transition-delay: 0.1s;
}
#header:has( #menu_open:checked) #menu-itself .sub_links a:nth-child(2) {
    transition-delay: 0.125s;
}
#header:has( #menu_open:checked) #menu-itself .sub_links a:nth-child(3) {
    transition-delay: 0.15s;
}
#header:has( #menu_open:checked) #menu-itself .sub_links a:nth-child(4) {
    transition-delay: 0.175s;
}
#header:has( #menu_open:checked) #menu-itself .sub_links a:nth-child(5) {
    transition-delay: 0.2s;
}
#header:has( #menu_open:checked) #menu-itself .sub_links a:nth-child(6) {
    transition-delay: 0.225s;
}
#header:has( #menu_open:checked) #menu-itself .sub_links a:nth-child(7) {
    transition-delay: 0.25s;
}
#header:has( #menu_open:checked) #menu-itself .sub_links a:nth-child(8) {
    transition-delay: 0.275s;
}

/* Footer */
#footer {
    position: relative;
    width: 100%;
    margin-top: calc(var(--view-frame-width) * 0.065);
    box-sizing: border-box;
    background-color: #f4f4f4;
    touch-action: manipulation;
}
#footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#footer-content-menu {
    display: flex;
    flex-direction: column;
    gap: calc(var(--view-frame-width) * 0.052);
    align-items: flex-start;
    max-width: 1200px;
    width: 100%;
    padding-top: calc(var(--view-frame-width) * 0.086);
    padding-bottom: calc(var(--view-frame-width) * 0.061);
}
#footer-content-menu a {
    position: relative;
    display: block;
    width: 100%;
    text-decoration: none;
    color: #000;
    padding-left: calc(var(--view-frame-width) * 0.07);
    cursor: pointer;
    box-sizing: border-box;
}
#footer-content-menu a span {
    font-size: calc(var(--view-frame-width) * 0.031);
    font-weight: normal;
}
#footer-copyright {
    padding-top: calc(var(--view-frame-width) * 0.044);
    padding-bottom: calc(var(--view-frame-width) * 0.114);
    font-size: calc(var(--view-frame-width) * 0.026);
    font-weight: bold;
    color: #777;
    text-align: center;
}
/* FavoriteMenu */
#favorite-itself_back.display-none {
    display: none;
}
#favorite-itself_back {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
    background-color: #77777799;
    transition: all .3s;
    opacity: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}
#favorite-itself_back.open {
    visibility: visible;
    pointer-events: all;
    opacity: 1;
}
#favorite-itself {
    position: relative;
    display: table;
    max-width: 1200px;
    width: 88%;
    font-size: min(calc(var(--view-frame-width) * 0.08888), 1200px);
    height: auto;
    margin: 5% auto;
    background-color: #fff;
    box-sizing: border-box;
    padding-left: min(calc(100% * 0.0364), 1200px * 0.0364);
    padding-right: min(calc(100% * 0.0364), 1200px * 0.0364);
    --border-radius-calc: 5; /* Calculate and apply rounded corners to a rectangle based on its width.(auto brc) */
    -ms-overflow-style: none;
    scrollbar-width: none;
    pointer-events: all;
    overscroll-behavior: contain;
}
.favorite-menu-sticky-button {
    position: sticky;
    top: calc(var(--favorite-itself-width) * 0.044);
    width: calc(var(--favorite-itself-width) * 0.044);
    height: calc(var(--favorite-itself-width) * 0.044);
    margin-top: calc(var(--favorite-itself-width) * 0.044);
    z-index: 9998;
    pointer-events: all;
}
/* メニューの中のクローズ・ハートアイコンサイズ制御用 */
/* TODO:absoluteの位置指定をJSで書いてあげないと行けないかも？ */
.favorite-menu-icon {
    aspect-ratio: 1/1;
    width: calc(var(--favorite-itself-width) * 0.044);
}
#favorite-menu-close {
    position: sticky;
    top: calc(var(--favorite-itself-width) * 0.044);
    left: 100%;
    width: calc(var(--favorite-itself-width) * 0.044);
    height: calc(var(--favorite-itself-width) * 0.044);
    z-index: 9998;
}
#favorite-menu-close-button {
    margin-right: calc(var(--favorite-itself-width) * 0.0456);
}
#favorite-compare-back-button {
    visibility: hidden;
    margin-left: calc(var(--favorite-itself-width) * 0.0456);
}
#favorite-compare-back-button > img {
    z-index: 9998;
    position: absolute;
}
#favorite-menu-button-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    position: absolute;
    width: 100%;
    transform: translateX(min(calc(100% * -0.0364), 1200px * -0.0364));
    z-index: 2;
    pointer-events: none;
}
#favorite-itself_back.item-compare-settings #favorite-compare-back-button {
    visibility: visible;
}
#favorite-menu-close::before,#favorite-menu-close::after {
    display: block;
    height: calc(100% * 0.1538);
    width: calc(100% * 1.1414);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
    background-color: #000;
    content: '';
}
#favorite-menu-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
#favorite-menu-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
#favorite-menu-button-collision {
    position: absolute;
    width: 200%;
    height: 200%;
    left: -50%;
    top: -50%;
    z-index: 9999;
    cursor: pointer;
}
#favorite-menu {
    position: relative;
    overflow: visible;
    z-index: 1;
}
#favorite-str {
    position: relative;
    font-size: calc(var(--favorite-itself-width) * 0.07);
    padding-top: calc(var(--favorite-itself-width) * 0.146);
    display: flex;
    justify-content: center;
    font-weight: 600;
}
#favorite-compare {
    display: flex;
    justify-content: center;
    padding-top: calc(100% * 0.0825);
    cursor: pointer;
    font-weight: 600;
}
#button-favorite-compare {
    padding-top: calc(100% * 0.0321);
    padding-bottom: calc(100% * 0.0321);
    padding-left: calc(100% * 0.0945);
    padding-right: calc(100% * 0.0945);
    width: fit-content;
    display: block;
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 999px;
    font-size: calc(var(--favorite-itself-width) * 0.035);
    font-weight: 600;
    cursor: pointer;
}
#favorite-items-count-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
#favorite-items-count {
    padding-top: calc(100% * 0.0558);
    padding-bottom: calc(100% * 0.023); 
    font-size: calc(var(--favorite-itself-width) * 0.035);
    color: #000;
    font-weight: 600;
}
/* #favorite-items {
    お気に入りアイテムのコンテナ
} */
.favorite-item {
    padding-top: calc(var(--favorite-itself-width, 400) * 0.0584);
    padding-bottom: calc(var(--favorite-itself-width, 400) * 0.0584);
    border-top: var(--border-line-weight) solid gray;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    position: relative;
}
#favorite-item0.favorite-item {
    display: none;
}
.favorite-item:nth-last-of-type(1) {
    border-bottom: var(--border-line-weight) solid gray;
    margin-bottom: 25%;
}
.favorite-item-leftside {
    width: 50%;
    padding-left: 8%;
}
.favorite-item-rightside {
    width: 50%;
    padding-left: 8%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    object-fit: contain;
    font-size: calc(var(--favorite-itself-width, 400) * 0.04964);
    padding-top: calc((var(--favorite-itself-width, 400) * 0.03));
    padding-bottom: calc(var(--favorite-itself-width, 400) * 0.03 + 0.25em);
}
.favorite-item-name {
    font-size: calc(var(--favorite-itself-width, 400) * 0.04964);
    line-height: 1.5em;
    font-weight: bold;
    padding-bottom: calc(var(--favorite-itself-width, 400) * 0.028 - 0.13em);
}
.favorite-item-gender {
    font-size: calc(var(--favorite-itself-width, 400) * 0.0409);
    line-height: 0.6em;
    color: #666;
    padding-bottom: calc(var(--favorite-itself-width, 400) * 0.0365);
}
.favorite-item-price {
    font-size: calc(var(--favorite-itself-width, 400) * 0.04964);
    line-height: 0.8em;
    font-weight: bold;
    color: #000;
    padding-bottom: calc(var(--favorite-itself-width, 400) * 0.0423);
}
.favorite-item-detail {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    background-color: #000;
    border-radius: 999px;
    height: calc(var(--favorite-itself-width, 400) * 0.0876);
    align-items: center;
    width: calc(var(--favorite-itself-width, 400) * 0.3251);
    justify-content: space-around;
    transition: background-color 0.3s ease;
    position: relative;
}
.favorite-item-detail:hover {
    background-color: #333;
}
.favorite-to-detail {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 999;
}
.favorite-item-detail-icon {
    aspect-ratio: 1/1;
    width: calc(var(--favorite-itself-width, 400) * 0.0905);
    position: relative;
    /* left: 2%; */
}
.favorite-item-detail-icon > img {
    width: calc(var(--favorite-itself-width) * 0.0876);
}
.favorite-item-detail-str {
    font-size: calc(var(--favorite-itself-width, 400) * 0.035);
    color: white;
    word-break: keep-all;
    width: auto;
    text-align: center;
    padding-right: calc(var(--favorite-itself-width, 400) * 0.05);
}
.favorite-item-picture {
    aspect-ratio: 1/1;
}
.favorite-item-picture > img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
}
.favorite-icon {
    position: absolute;
    width: calc(var(--favorite-itself-width)* 0.078);
    top: 0px;
    right: 0px;
    cursor: pointer;
}
.favorite-icon a::before {
    border: var(--border-line-weight) solid #000;
}
.favorite-icon::before,.favorite-icon::after {
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-radius: 9999px;
    overflow: hidden;
    transition: all .3s;
    background-position: center center;
    background-size: cover;
}
.favorite-icon::before {
    background-image: URL('../img/like_hollow.svg');
}
.favorite-icon::after {
    background-color: rgba(255,80,120,0);
    mask: url('../img/like_act.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('../img/like_act.svg') no-repeat center;
    -webkit-mask-size: contain;
}
.favorite-icon.favorited::after {
    background-color: rgba(255,80,120,1);
}
.favorite-icon.favorited::before {
    opacity: 0;
}
.base {
    position: relative;
}

#view_frame {
    width: 100%;
    max-width: 1200px;
    /* height: calc(100vh - 120px);
    top: 120px; */
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
    font-size: 1500px;
    margin: 0 auto;
    touch-action: manipulation;
}
#view_frame::-webkit-scrollbar{
    display: none;
}
#favorite-itself_back #favorite-compare-settings-title {
    display: none;
}
#favorite-itself_back #favorite-compare-settings-description {
    display: none;
}
#favorite-itself_back .favorite-item-picture-secondary {
    display: none;
}
#favorite-itself_back .favorite-compare-select {
    display: none;
}
#favorite-compare-start,#favorite-all-check {
    display: none;
}

#favorite-itself_back.item-compare-settings #favorite-compare-settings-title {
    padding-top: calc(var(--favorite-itself-width) * 0.146);
    display: block;
    font-size: calc(var(--favorite-itself-width) * 0.0756);
    text-align: center;
    font-weight: 600;
}
#favorite-itself_back.item-compare-settings #favorite-compare-settings-description {
    display: block;
    font-size: calc(var(--favorite-itself-width) * 0.035);
    text-align: center;
    font-weight: 600;
}
#favorite-itself_back.item-compare-settings #favorite-str {
    display: none;
}
#favorite-itself_back.item-compare-settings #favorite-compare {
    display: none;
}
#favorite-itself_back.item-compare-settings .favorite-item-detail {
    display: none;
}
#favorite-itself_back.item-compare-settings .favorite-icon {
    display: none;
}
#favorite-itself_back.item-compare-settings .favorite-item-picture-img {
    display: none;
}
#favorite-itself_back.item-compare-settings .favorite-item-picture-secondary {
    display: block;
}
#favorite-itself_back.item-compare-settings .favorite-item {
    padding: 0;
}
#favorite-itself_back.item-compare-settings .favorite-item-leftside {
    padding-left: 0;
}
#favorite-itself_back.item-compare-settings .favorite-item-price {
    padding-bottom: 0;
}
#favorite-itself_back.item-compare-settings .favorite-compare-select {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 8%;
    background-color: #00000000;
    height: auto;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border: var(--border-line-weight) solid black;
    border-radius: 10%;
    margin-bottom: 15%;
    font-size: calc(var(--favorite-itself-width) * 0.041);
    line-height: 1em;
    color: white;
    font-weight: bold;
}
#favorite-itself_back.item-compare-settings .favorite-compare-select.favorite-compare-select-selected {
    background-color: #000;
}
#favorite-itself_back.item-compare-settings #favorite-compare-start,
#favorite-itself_back.item-compare-settings #favorite-all-check {
    position: relative;
    width: calc(var(--favorite-itself-width) * 0.14);
    height: calc(var(--favorite-itself-width) * 0.06);
    margin-bottom: calc(100% * -0.023);
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    z-index: 9998;
    background-color: #000;
    color: white;
    font-size: calc(var(--favorite-itself-width) * 0.041);
    font-weight: bold;
    text-align: center;
    line-height: 1em;
    border-radius: 999px;
    cursor: pointer;
}
#favorite-itself_back.item-compare-settings #favorite-all-check {
    margin-right: 3%;
    margin-left: auto;
    width: calc(var(--favorite-itself-width) * 0.19);
}

#maincontent {
    font-size: 24px;
}