/* jds*/

@charset "UTF-8";


@font-face {
    font-family: 'TTCR';
    src: url('/fonts/TTCR.woff2') format('woff2');
}


:root {
    --padding: 5vw;
    --productPadding: 11.5vw;
    --pcPadding: 5vw;
    --backgroundColor: #fff;
    --mainColor: #00268D;
    --textColor: #001299;
    --blackColor: #1F1F1F;
    --footerColor: #e9e7e6;

    --linkBlue:#3154E6;
    --soldRed: #C90000;

    --heading-font: system-ui, sans-serif;
    --text-font: system-ui, sans-serif;

    /* Design token aliases (use existing colours) */
    --background: var(--backgroundColor);
    --white: #FFFFFF;
    --black: var(--blackColor);
    --key: var(--mainColor);

    /* Typography – font sizes (adjust here to change site-wide) */
    --h1-font-size: 22.5px;
    --h2-font-size: 20px;
    --h3-font-size: 18px;
    --h4-font-size: 16px;
    --h5-font-size: 14px;
    --h6-font-size: 12.5px;
    --p-font-size: 14px;

    --shuffle-height: 15vh;
}

@media screen and (max-width: 834px) {
    :root {
        --padding: 7.5vw;
        --h1-font-size: 24.5px;
        --h2-font-size: 18px;
        --h3-font-size: 16px;
        --h4-font-size: 14px;
        --h5-font-size: 12px;
    }
}

:lang(en) {
    --heading-font: "Marcellus", NeueHaasUnicaPro-Regular, "Neue Haas Unica W1G", system-ui, sans-serif;
       --text-font: "TTCR", NeueHaasUnicaPro-Regular, "Neue Haas Unica W1G", system-ui, sans-serif;
       font-weight: 400;
       letter-spacing: 0.035em;
       -webkit-text-stroke: calc(0.1px + 0.01em) var(--textColor);
       text-transform: uppercase;
  }
  :lang(ja) {
    --heading-font: TazuganeGothicStdN-Regular, "Tazugane Gothic StdN", TazuganeGothicStdN-Medium, "MT たづがね角ゴシック StdN Medium",  system-ui, sans-serif;
       --text-font: TazuganeGothicStdN-Regular, "Tazugane Gothic StdN", TazuganeGothicStdN-Mediun, "MT たづがね角ゴシック StdN Regular", system-ui, sans-serif;
       --bold-font: TazuganeGothicStdN-Regular, "Tazugane Gothic StdN", TazuganeGothicStdN-Mediun, "FOT-筑紫ゴシック Pro B",TsukuGoPr5-B, system-ui, sans-serif;
    letter-spacing: 0.025em;
  }
  :lang(zh) {
    --heading-font: Inter, "Inter", NeueHaasUnicaPro-Medium, FZFW-ZhuZiHeiS-B--GB1, TsukuGoPr5-B, system-ui, sans-serif;
       --text-font: Inter, "Inter", NeueHaasUnicaPro-Regular, FZFW-ZhuZiHeiS-D--GB1, TsukuGoPr5-D, system-ui, sans-serif;
  }


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {font-size: 62.5%;}
html, body {
    width: 100vw;
    background-color: var(--backgroundColor);
}
html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;  /* ← これだけでOK */
    height: auto !important;
    min-height: 100% !important;
  }


div, h1, h2, h3, h4, h5, h6, a, span, input, button, tspan, tr, td,th {
    font-family: var(--heading-font);
    font-weight: 400;
    color: var(--textColor);
    font-display: swap;
    font-feature-settings: "palt";
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

.color {color: var(--mainColor);}

.h0 {font-size: 24px;}
h1, .h1 {font-size: var(--h1-font-size);}
h2, .h2 {font-size: var(--h2-font-size);}
h3, .h3 {font-size: var(--h3-font-size);}
h4, .h4 {font-size: var(--h4-font-size);}
h5, .h5 {font-size: var(--h5-font-size);}
h6, .h6 {font-size: var(--h6-font-size);}
.h7 {font-size: 10.5px;}

.h0.heading {font-size: 38px;}
.h1.heading {font-size: 32px;}
.heading {
  line-height: 1.3;
  letter-spacing: 0;
}
h1, .h1,
h2, .h2,
h3,
h4 {
    line-height: 1.4;
    color: var(--textColor);
}
h1,h2,.h1,.h2 {
    font-family: var(--heading-font);
    line-height: 1.2;
}

.sp {display: block;}
.pc {display: none;}

.white:lang(en) {-webkit-text-stroke: calc(0.1px + 0.01em) white;}

.sans:lang(en),
.sans:lang(en) * {
    font-family: var(--text-font);
    -webkit-text-stroke: 0;
    letter-spacing: 0;
    font-family: var(--text-font)
}
p, .p {
    font-family: var(--text-font);
    font-size: var(--p-font-size);
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
    text-align: justify;
    text-align: left;
    word-wrap: break-word;
    hyphens: none;
    -webkit-hyphens: none;
    overflow-wrap: break-word;
    hyphenate-character: '-';
}

p:lang(en),
.sans:lang(en),
p.white:lang(en),
.sans.white:lang(en) {
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-align: justify;
    text-align: left;
    text-transform: none;
    -webkit-text-stroke: 0;
}


li {
    text-decoration: none;
    list-style: none;
}
a {
    text-decoration: none;
    display: inline-block;
    transition: .75s ease-in-out;
}
a:hover {opacity: .65;}

section {
    padding-left: var(--padding);
    padding-right: var(--padding);
}
section.shopify-section--main-list-collections {padding:0;}
img {
    width: 100%;
    object-fit: cover;
    object-position: 50%;
}

input {
    background-color: transparent;
    border: none;
    outline: none;
}
input::placeholder {
    color: var(--textColor);
    opacity: .25;
}
button {
    background-color: transparent;
    border: none;
    outline: none;
}

ul li {text-decoration: none;list-style: none;}
.flex {display: flex; justify-content: center; align-items: center;}

.w100 {
    width: 100vw;
    margin-left: calc(-1 * var(--padding));
}

.white {color: white;}

main {margin: auto;}
.mar {margin-top: 8rem;}


.button {
    display: inline-block;
    font-size: var(--h5-font-size);
    padding: 14px 28px 12px;
    background-color: var(--mainColor);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    margin-left: -5px;
}








#HomeCompany .underline,
#HomeCompany .underline span {color: white;}
#HomeCompany .underline svg path {fill: white;}




@media screen and (min-width: 720px) {
    html {font-size: 62.5%;}
    :root {
        --h1-font-size: 38.5px;
        --h2-font-size: 28px;
        --h3-font-size: 21.5px;
        --h4-font-size: 18px;
        --h5-font-size: 15px;
        --h6-font-size: 12px;
        --p-font-size: 15px;
    }
    .h0 {font-size: 52px;line-height: 1.2;}
h1, .h1 {font-size: var(--h1-font-size);}
h2, .h2 {font-size: var(--h2-font-size);}
h3, .h3 {font-size: var(--h3-font-size);}
h4, .h4 {font-size: var(--h4-font-size);}
h5, .h5 {font-size: var(--h5-font-size);}
h6, .h6 {font-size: var(--h6-font-size);}
.h7 {font-size: 10.5px;}
p {
    font-size: var(--p-font-size);
    line-height: 2.0;
    text-align: left;
}
.sp {display: none;}
.pc {display: block;}


section {
    padding-left: var(--pcPadding);
    padding-right: var(--pcPadding);
}


.w100 {
    width: 100vw;
    margin-left: calc(-1 * var(--pcPadding));
}

.pcflex{display: flex; justify-content: space-between; align-items: center;}

#HomeTop .underline * {
    color:white;
    fill: white;
}
#HomeTop .underline::after {background-color: white;}





}

@media only screen and (min-width: 481px) and (max-width: 720px) {
    html {font-size: 50%;}
}
  
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
        /* For portrait layouts only */
}


/* jds */
  



.uppercase {text-transform: uppercase;}
.link {
    text-transform: uppercase;
    position: relative;
}
.link::after {
    display: block;
    content: "";
    position: absolute;
    top: auto;
    bottom: -.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: .8px;
    background-color: var(--textColor);
}
.center {text-align: center;}
.half {opacity: .55;}

/* Margin utilities (pixels): 1, 3, 5, 8, 10, 15, 20, 30, 40, 60, 80, 100, 120 */
.mx-1  { margin-left: 1px;   margin-right: 1px; }
.mx-3  { margin-left: 3px;   margin-right: 3px; }
.mx-5  { margin-left: 5px;   margin-right: 5px; }
.mx-8  { margin-left: 8px;   margin-right: 8px; }
.mx-10 { margin-left: 10px;  margin-right: 10px; }
.mx-15 { margin-left: 15px;  margin-right: 15px; }
.mx-20 { margin-left: 20px;  margin-right: 20px; }
.mx-30 { margin-left: 30px;  margin-right: 30px; }
.mx-40 { margin-left: 40px;  margin-right: 40px; }
.mx-60 { margin-left: 60px;  margin-right: 60px; }
.mx-80 { margin-left: 80px;  margin-right: 80px; }
.mx-100 { margin-left: 100px; margin-right: 100px; }
.mx-120 { margin-left: 120px; margin-right: 120px; }

.my-1  { margin-top: 1px;   margin-bottom: 1px; }
.my-3  { margin-top: 3px;   margin-bottom: 3px; }
.my-5  { margin-top: 5px;   margin-bottom: 5px; }
.my-8  { margin-top: 8px;   margin-bottom: 8px; }
.my-10 { margin-top: 10px;  margin-bottom: 10px; }
.my-15 { margin-top: 15px;  margin-bottom: 15px; }
.my-20 { margin-top: 20px;  margin-bottom: 20px; }
.my-30 { margin-top: 30px;  margin-bottom: 30px; }
.my-40 { margin-top: 40px;  margin-bottom: 40px; }
.my-60 { margin-top: 60px;  margin-bottom: 60px; }
.my-80 { margin-top: 80px;  margin-bottom: 80px; }
.my-100 { margin-top: 100px; margin-bottom: 100px; }
.my-120 { margin-top: 120px; margin-bottom: 120px; }

.mt-1  { margin-top: 1px; }
.mt-3  { margin-top: 3px; }
.mt-5  { margin-top: 5px; }
.mt-8  { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mt-80 { margin-top: 80px; }
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }
.mt-160 { margin-top: 160px; }
.mt-200 { margin-top: 200px; }

.mb-1  { margin-bottom: 1px; }
.mb-3  { margin-bottom: 3px; }
.mb-5  { margin-bottom: 5px; }
.mb-8  { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }
.mb-80 { margin-bottom: 80px; }
.mb-100 { margin-bottom: 100px; }
.mb-120 { margin-bottom: 120px; }
.mb-160 { margin-bottom: 160px; }
.mb-200 { margin-bottom: 200px; }

.ml-1  { margin-left: 1px; }
.ml-3  { margin-left: 3px; }
.ml-5  { margin-left: 5px; }
.ml-8  { margin-left: 8px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-30 { margin-left: 30px; }
.ml-40 { margin-left: 40px; }
.ml-60 { margin-left: 60px; }
.ml-80 { margin-left: 80px; }
.ml-100 { margin-left: 100px; }
.ml-120 { margin-left: 120px; }

.mr-1  { margin-right: 1px; }
.mr-3  { margin-right: 3px; }
.mr-5  { margin-right: 5px; }
.mr-8  { margin-right: 8px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-30 { margin-right: 30px; }
.mr-40 { margin-right: 40px; }
.mr-60 { margin-right: 60px; }
.mr-80 { margin-right: 80px; }
.mr-100 { margin-right: 100px; }
.mr-120 { margin-right: 120px; }



@media screen and (max-width: 834px) {

    p {
        font-size: 12.8px;
        line-height: 1.8;
    }
}






/* Prevent FOUC on SplitText .line elements before GSAP initialises.
   Scoped to data-animate containers so other .line classes are unaffected. */
[data-animate] .line,
[data-animate-children] .line {
  transform: translateY(100%);
  will-change: transform;
}