@charset "UTF-8";

:root{
  --color-text-default: #333;
  --color-theme-main: #AAAA7D;
  --color-theme-sub: #666;
  --color-theme-bg1: #FAFAFA;
  --color-theme-bg2: #FBFAF5;
  --color-theme-bg3: #EBEBE5;
  --color-emphasis: #D56363;
  --color-border: #A5A5A5;
  --color-red: #d56363;
  --color-danger: #d56363;

  --font-shippori: 'Shippori Mincho';
  --font-notosans: 'Noto Sans JP';
  --font-inter: 'Inter';
  
  --font-en: var(--font-shippori), serif;
  --font-ja: var(--font-inter), var(--font-notosans), sans-seif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

body{
  font-family: var(--font-ja);
  color: var(--color-text-default);
}

:where(#rootTemplate){
  overflow: clip;
}

.c-btn{
  padding-inline: 0;
  display: grid;
  place-content: center;
  border-radius: 0;
  border-color: var(--color-black);
  background-color: var(--color-text-default);
}

.c-btn-cart,
.c-btn-progress:not(.c-btn-progress--white):not(.c-btn-progress--gray-middle){
  background-color: var(--color-text-default);
  border-color: var(--color-text-default);
}

.c-btn--white{
  color: var(--color-text-default)!important;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .c-btn{
    font-size: 1.3rem;
    font-weight: var(--fw-medium);
  }
}

input[type=text],
input[type=password],
input[type=tel],
input[type=email],
input[type=text],
input[type=number],
textarea{
  padding: 1.5rem;
  font-size: 1.3rem;
  letter-spacing: 0.025em;
  line-height: 1;
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  input[type=text],
  input[type=password],
  input[type=tel],
  input[type=email],
  input[type=text],
  input[type=number],
  textarea{
    font-size: 1.5rem;
  }

  textarea{
    line-height: inherit;
  }
}

select{
  padding: 1.7rem 1.5rem;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.025em;
  border: 1px solid var(--color-border);
  border-radius: 0.4rem;
}

@media (min-width: 768px) {
  select{
    font-size: 1.5rem;
  }
}

input[type="radio"]{
  width: 1.8rem;
  height: 1.8rem;
  border-color: var(--color-border);
  background-color: var(--color-white);
}

input[type="radio"]:checked{
  border-color: var(--color-text-default);
}

input[type="radio"]:checked::after{
  background-color: var(--color-text-default);
}

label:has(input[type="radio"]){
  gap: 0 0.6rem;
}

label:has(input[type="radio"]) input[type="radio"] + span{
  font-size: 1.3rem;
  font-weight: var(--fw-regular);
  letter-spacing: 0.025em;
  line-height: 1;
}

@media (min-width: 768px) {
  label:has(input[type="radio"]) input[type="radio"] + span{
    font-size: 1.5rem;
  }
}

input[type="checkbox"]{
  margin: 0;
  width: 1.8rem;
  height: 1.8rem;
}

input[type="checkbox"]:checked{
  background-color: var(--color-text-default);
  border-color: var(--color-text-default);
}

label:has(input[type="checkbox"]){
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

label:has(input[type="checkbox"]) input[type="checkbox"] + span{
  font-size: 1.3rem;
}

@media (min-width: 768px) {
  label:has(input[type="checkbox"]) input[type="checkbox"] + span{
    font-size: 1.5rem;
  }
}