@charset "UTF-8";

#feature-brand-etos {
  /* ---------------------------------------------
  *   Custom Properties
  --------------------------------------------- */
}

#feature-brand-etos {
  --design-width: 1350;
  --contents-width: 1142;
  --contents-side-padding: 10;
  --minwidth: calc(var(--contents-width) + var(--contents-side-padding) * 2);
  --fixed-header-height: 70;
  --root-fz: 16;
  --line-height: 1.5;
  --hover-opacity-ratio: 0.5;
  --hover-duration: .3s;
  --color-base-1: #333;
  --color-base-1-rgb: 51, 51, 51;
  --color-black-1: #000;
  --color-black-1-rgb: 0, 0, 0;
  --color-black-2: #111;
  --color-black-2-rgb: 17, 17, 17;
  --color-white-1: #fff;
  --color-white-1-rgb: 255, 255, 255;
  --color-white-2: #fefefe;
  --color-white-2-rgb: 254, 254, 254;
  --color-gray-1: #E8DFD5;
  --color-gray-1-rgb: 232, 223, 213;
  --color-gray-2: #DDE2E4;
  --color-gray-2-rgb: 221, 226, 228;
  --color-gold-1: #91804F;
  --color-gold-1-rgb: 145, 128, 79;
  --color-gold-2: #825E15;
  --color-gold-2-rgb: 130, 94, 21;
  --color-gold-3: #92805A;
  --color-gold-3-rgb: 146, 128, 90;
  --color-orange-1: #E07E41;
  --color-orange-1-rgb: 224, 126, 65;
  --color-orange-2: #FABA7C;
  --color-orange-2-rgb: 250, 186, 124;
  --color-purple-1: #9B73A4;
  --color-purple-1-rgb: 155, 115, 164;
  --color-purple-2: #BEBCD7;
  --color-purple-2-rgb: 190, 188, 215;
  --color-purple-3: #9277D1;
  --color-purple-3-rgb: 146, 119, 209;
  --color-brown-1: #A98044;
  --color-brown-1-rgb: 169, 128, 68;
  --color-brown-2: #CC8D0F;
  --color-brown-2-rgb: 204, 141, 15;
  --color-brown-3: #D59061;
  --color-brown-3-rgb: 213, 144, 97;
  --color-brown-4: #A05F00;
  --color-brown-4-rgb: 160, 95, 0;
  --color-brown-5: #793C30;
  --color-brown-5-rgb: 121, 60, 48;
  --color-brown-6: #6A4700;
  --color-brown-6-rgb: 106, 71, 0;
  --color-brown-7: #BD8943;
  --color-brown-7-rgb: 189, 137, 67;
  --color-yellow-1: #FFC96F;
  --color-yellow-1-rgb: 255, 201, 111;
  --color-red-1: #CD272E;
  --color-red-1-rgb: 205, 39, 46;
  --color-pink-1: #F0A38E;
  --color-pink-1-rgb: 240, 163, 142;
  --color-beige-1: #E4DBD1;
  --color-beige-1-rgb: 228, 219, 209;
  --color-beige-2: #91785A;
  --color-beige-2-rgb: 145, 120, 90;
  --ff-root: "Shippori Mincho", serif;
  --ff-noto: "Noto Sans JP", sans-serif;
  --ff-cinzel: "Cinzel", serif;
  --ff-cormorant: "Cormorant", serif;
  --ff-montserrat: "Montserrat", sans-serif;
}

@media screen and (max-width: 768px) {
  #feature-brand-etos {
    --design-width: 375;
    --contents-width: 315;
    --contents-side-padding: 10;
    --minwidth: 320;
    --fixed-header-height: 45;
    --root-fz: 16;
    --line-height: 1.5;
  }
}

#feature-brand-etos {
  /* ---------------------------------------------
  *   Universal selector
  --------------------------------------------- */
}

#feature-brand-etos *,
#feature-brand-etos *::before,
#feature-brand-etos *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#feature-brand-etos {
  /* ---------------------------------------------
  *   html, body → 結界自身に置き換え
  --------------------------------------------- */
}

#feature-brand-etos {
  color: var(--color-base-1);
  font-size: calc(var(--root-fz) * 1px);
  font-family: var(--ff-root);
  -webkit-text-size-adjust: 100%;
  line-height: var(--line-height);
}

@media screen and (max-width: 768px) {
  #feature-brand-etos {
    font-size: calc(var(--root-fz) / var(--design-width) * 100vw);
  }
}

#feature-brand-etos {
  /* ---------------------------------------------
  *   <a> tag
  --------------------------------------------- */
}

#feature-brand-etos a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

#feature-brand-etos {
  /* ---------------------------------------------
  *   <img> tag
  --------------------------------------------- */
}

#feature-brand-etos img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

#feature-brand-etos {
  /* ---------------------------------------------
  *   <hr> tag as anchor target
  --------------------------------------------- */
}

#feature-brand-etos hr[id^=anchor-] {
  display: block;
  width: auto;
  height: 0;
  padding: calc(var(--fixed-header-height) * 1px) 0 0 0;
  border: 0;
  margin: calc(var(--fixed-header-height) * -1px) 0 0 0;
  background: 0;
  pointer-events: none;
}