/*
Theme Name: Storefront Child
Theme URI: https://woocommerce.com/products/storefront/
Template: storefront
Author: Automattic
Author URI: https://woocommerce.com/
Description: Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooCommerce Core developers, it features a bespoke integration with WooCommerce itself plus many of the most popular customer facing WooCommerce extensions. There are several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love its lean and extensible codebase making it a joy to customize and extend. Looking for a WooCommerce theme? Look no further!
Tags: e-commerce,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,full-width-template,threaded-comments,accessibility-ready,rtl-language-support,footer-widgets,sticky-post,theme-options,editor-style
Version: 6.5.0
Updated: 14-12-2024 at 21:45 PM

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

:root {
    --color-primary: #000;
    --color-secondary: #ddd;
    --color-light: #fff;
    --color-dark: #000;
    --container-height: 89.5%;
}

html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}



body {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.4em;
    letter-spacing: 0;
}

html[lang="ja"] body {
    font-family: "M PLUS 1p", sans-serif;
}

html:not([lang="ja"]) body {
    font-family: "Yantramanav", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

p {
    margin: 0 !important;
}

.container {
    width: 100%;
    margin: 0 auto;
}

.language-wrapper a.ja {
    font-size: 0.8em;
}

.contact-wrap address {
    font-style: normal !important;
}

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

.dir-column {
    flex-direction: column;
}

.pointer {
    cursor: pointer;
}

.fw-bold {
    font-weight: 700;
}

.d-flex {
    display: flex;
}

.align-items-center {
    align-items: center;
}

.align-items-end {
    align-items: flex-end;
}

div.spacer-2 {
	min-height: 2rem;
	clear: both;
}

div.spacer-3 {
	min-height: 3rem;
	clear: both;
}

div.spacer-5 {
	min-height: 5rem;
	clear: both;
}

.w-25 {
    width: 25%;
}

.w-75 {
    width: 75%;
}

.my-1 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-2 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.mb-1 {
    margin-bottom: 1rem !important;
}

.mb-2 {
    margin-bottom: 2rem !important;
}

.mb-3 {
    margin-bottom: 3rem !important;
}

.mt-1 {
    margin-top: 1rem !important;
}

.mt-2 {
    margin-top: 2rem !important;
}

.fade-in {
    animation: fade-in ease-in-out;
}

.fade-in.animated {
    animation: none;
}

.m-hidden {
    display: none !important;
}

.rko-mb-2 {
    margin-bottom: 2rem !important;
}

#page-scroller-1 {
    height: 8000px;
    visibility: hidden;
}

#page-scroller-2 {
    width: 100%;
    height: 9000px;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* =========== Typography Ends Here =========== */

/* Tablet Style */
@media (min-width: 768px) {
    .m-hidden {
        display: block !important;
    }

    .t-hidden {
        display: none !important;
    }

    #page-scroller-1 {
        display: none;
    }

    #page-scroller-2 {
        display: none;
    }
}

/* Notebook Style */
@media (min-width: 1024px) {
    body {
        font-size: 1.2rem;
        line-height: 1.2em;
    }
}

/* Laptop Style */
@media (min-width: 1366px) {
    body {
        font-size: 1.4rem;
        line-height: 1.2em;
    }
}

/* Desktop Style */
@media (min-width: 1512px) {
    body {
        font-size: 1.5rem;
        line-height: 1.4em;
    }
}

/* Large Screen Style */
@media (min-width: 1920px) {
    body {
        font-size: 1.8rem;
        line-height: 1.3em;
    }
}




/* ────────────────────────────────────────────────────────────────────────────────
 Only on Japanese pages, use M PLUS 1p Thin at 100 weight, slightly smaller text
 ──────────────────────────────────────────────────────────────────────────────── */
html[lang="ja"] body {
  font-family: 'M PLUS 1p', sans-serif !important;
  font-weight: 300 !important;     /* ultra-thin strokes */
  font-size: 12px !important;      /* base text size minus 2px */
  line-height: 1.6 !important;     /* keep it readable */
  color: #43454B; /* color not black */
}

/* If you want to scope it to header/footer/content only */
html[lang="ja"] #content,
html[lang="ja"] .site-header,
html[lang="ja"] .site-footer {
  font-family: 'M PLUS 1p', sans-serif !important;
}

/* Headings two steps smaller on Japanese pages */
html[lang="ja"] h1 { font-size: 1.2rem !important; }
html[lang="ja"] h2 { font-size: 1.2rem !important; }
html[lang="ja"] h3 { font-size: 1.2rem !important; }






	
/* Only target the imprint template */
body.page-template-template-imprint .form-container {
    white-space: normal !important;        /* keep wrapping behaviour */
}

body.page-template-template-imprint .form-container p {
    display: block !important;             /* ensure <p> acts like a block */
    margin-bottom: 1.4rem !important;      /* add space after each group */
}

body.page-template-template-imprint .form-container br {
    display: block !important;             /* force <br> to break line */
    margin-top: 0.2rem;                    /* fine‑tune line spacing */