@charset "UTF-8";

/*
  Styled-List
*/
:is(ol, ul)[data-styled] {
  --bullet-width: 2em;

  list-style: none;
  padding: 0;
}

:is(ol, ul)[data-styled]:not([data-styled=""]) > li {
  position: relative;
  padding: 0 0 0 var(--bullet-width);
}

:is(ol, ul)[data-styled]:not([data-styled=""]) > li:before {
  display: inline-block;
  width: var(--bullet-width);
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}

:is(ol, ul)[data-styled="dashed"] > li:before {
  content: '\f068';
}

:is(ol, ul)[data-styled="angled"] > li:before {
  content: '\f105';
}

:is(ol, ul)[data-styled="squared"] > li:before {
  content: '\f0c8';
  font-weight: bold;
}



/*
  Input: Checkbox
*/
input[data-styled][type="checkbox"] {
  appearance: none;
  font-size: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

input[data-styled][type="checkbox"]:before {
  content: '\f111';
  display: inline-block;
  margin: 0 0.25em 0 0;
  font-weight: 500;
}

input[data-styled][type="checkbox"]:checked:before {
  content: '\f058';
}



/*
  <a>
*/
a[data-styled="single-color-fill"] {
  display: inline-block;
  color: #ffffff;
  line-height: 1;
  padding: clamp(0.75em, 1vw, 1em) clamp(1.25em, 2vw, 2em);
  font-weight: bold;
  text-decoration: none;
}

a[data-styled="single-color-fill"][data-variant="gray-60"] {
  background: var(--theme_color_common_gray_60);
}



[data-styled="bullet"] {
  --bullet-size: 1em;
  --buller-after-space: 0.5em;
  padding-left: calc( (var(--bullet-size) * 1.25) + var(--buller-after-space) );
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
}

[data-styled="bullet"][data-variant="home"] {
  background-image: url(../img/common/symbol_home.svg);
}

[data-styled="bullet"][data-variant="mail"] {
  background-image: url(../img/common/symbol_mail.svg);
}

[data-styled="bullet"][data-variant="mail-white"] {
  background-image: url(../img/common/symbol_mail-white.svg);
}

[data-styled="bullet"][data-variant="external"] {
  background-image: url(../img/common/symbol_external.svg);
}

[data-styled="bullet"][data-variant="external-white"] {
  background-image: url(../img/common/symbol_external-white.svg);
}

[data-styled="bullet"][data-variant="entry-white"] {
  --bullet-size: 3.5em;  
  background-image: url(../img/common/symbol_entry-white.svg);
  background-size: auto 0.75em;
  background-position: left center;
}



/*
  a - large-gray-fill-next
*/
a[data-styled="large-gray-fill-next"] {
  display: inline-block;
  font-size: clamp(1em, 1.5vw, 1.5em);
  padding: 0.75em 2em;
  line-height: 1;
  color: #ffffff;
  background: var(--theme_color_common_gray_60);
  font-weight: bold;
  text-decoration: none;
}

a[data-styled="large-gray-fill-next"]:after {
  content: '\f105';
  margin: 0 0.5em;
}