@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');

#seiton_ew {
  font-size: 62.5%;
  font-family: 'Noto Sans JP';
  font-weight: 300;
  color: var(--theme-txt);
  --theme-txt: #464545;
  --theme-grn: #19aaa3;
  --theme-org: #fa9032;
  --theme-blk: #080404;
  --theme-ylw: #fffb8c;
  --theme-bglgr: #c8ebe9;
  --theme-bgdgr: #108781;
  --theme-bgtgr: #e6f8f7;
  --theme-tagbl: #90b2d9;
}

@media screen and (max-width: 768px){
  #seiton_ew {
    font-size: calc(100vw / 54);
  }
}

@media screen and (max-width: 540px){
  #seiton_ew {
    font-size: calc(100vw / 37.5);
  }
}

@media screen and (max-width: 375px){
  #seiton_ew {
    font-size: calc(100vw / 32);
  }
}

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

#seiton_ew li {
  list-style: none;
}

#seiton_ew picture {
  display: flex;
  justify-content: center;
  align-items: center;
}

#seiton_ew picture > img {
  width: 100%;
}

#seiton_ew a,
#seiton_ew a:visited {
  color: var(--theme-grn);
  text-decoration: none;
}

#seiton_ew .wrapper > section {
  max-width: 768px;
  width: 100%;
  padding-bottom: 1px;
  margin-inline: auto;
}

#seiton_ew #mv,
#seiton_ew #usage > figure {
  position: relative;
}

#seiton_ew #mv > *:not(picture),
#seiton_ew #usage > figure > *:not(picture){
  position: absolute;
  width: 99%;
  height: 99%;
}

#seiton_ew #mv > picture,
#seiton_ew #usage > figure > picture {
  width: 100%;
  background-color: #ffffff;
  position: relative;
  z-index: 1;
}

#seiton_ew #mv > picture {
  aspect-ratio: 1200 / 650;
}

#seiton_ew #features {
  text-align: center;
  background-color: var(--theme-bglgr);
}

#seiton_ew #features h2 {
  padding-block: 0.4em 0.6em;
  font-weight: 900;
  color: var(--theme-grn);
  line-height: 1;
}

#seiton_ew #features h2 span {
  display: inline-block;
}

#seiton_ew #features h2 .small {
  font-size: 0.6em;
}

#seiton_ew #features h2 .lg {
  font-size: 1.83em;
}

#seiton_ew #features h2 .blk {
  font-size: 0.66em;
  font-family: 'Montserrat';
  font-weight: 800;
  color: var(--theme-blk);
}

#seiton_ew #features h2 .shift {
  transform: translateY(-0.2em);
}

#seiton_ew #features h2 .org,
#seiton_ew ol .order {
  display: inline-block;
  font-weight: 700;
  font-family: 'League Spartan';
  line-height: 1;
  color: var(--theme-org);
}

#seiton_ew ol .order {
  transform-origin: bottom;
  transform: scaleY(0.9);
}


#seiton_ew #features ol {
  margin-inline: 5em;
}

#seiton_ew #features ol li {
  padding-bottom: 6em;
  margin-bottom: 8em;
  background-color: #ffffff;
  border-radius: 5em;
}

#seiton_ew section ol li h4,
#seiton_ew section h3 {
  text-align: center;
  font-weight: 900;
  color: var(--theme-grn);
}

#seiton_ew section h3 {
  line-height: 1;
  margin-bottom: 1.3em;
}

#seiton_ew #features li h4 {
  margin-bottom: 1em;

}

#seiton_ew #features li small {
  display: block;
  margin-top: 1.3em;
  line-height: 1.7;
}

#seiton_ew ol .order {
  font-family: 'Hind';
  transform: scaleY(0.833);
}

#seiton_ew #features ol li .order {
  margin-bottom: -0.5em;
  transform: scaleY(0.833) translateY(-0.7em);
}

#seiton_ew #usage {
  padding: 8em 5em 9em;
}

#seiton_ew #flow {
  padding: 9em 5em;
}

#seiton_ew #usage > figure > picture {
  aspect-ratio: 1308 / 1528;
}

@media screen and (max-width:540px){
  #seiton_ew #seiton_ew #mv > picture {
    aspect-ratio: 15 / 24;
  }
}

#seiton_ew #flow {
  background-color: var(--theme-bglgr);
}

#seiton_ew #flow h3 {
  margin-bottom: 1em;
}

#seiton_ew #flow ol li {
  display: flex;
  flex-wrap: wrap;
  padding-top: 4em;
  margin-bottom: 5em;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

#seiton_ew #flow ol li > figure,
#seiton_ew #flow ol li > p {
  margin-inline: 5em;
}

#seiton_ew #flow ol li > p {
  padding-bottom: 4em;
}

#seiton_ew #flow ol > li:not(:last-of-type)::before,
#seiton_ew #flow ol > li:not(:last-of-type)::after {
  display: block;
  content: '';
  width: 50%;
  height: 6em;
  background-color: var(--theme-bglgr);
}

#seiton_ew #flow ol > li:not(:last-of-type)::before {
  order: 5;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

#seiton_ew #flow ol > li:not(:last-of-type)::after {
  order: 6;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform: translateX(1px);
}

#seiton_ew #flow li .order {
  width: 22.46%;
  padding-block: 0;
  padding-inline: 1.5% 0;
  aspect-ratio: 1 / 1;
  background-color: var(--theme-grn);
  color: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  transform: initial;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

#seiton_ew #flow li .order > span {
  display: inline-flex;
  justify-content: flex-start;
  width: 1.3em;
  height: 0.8em;
  line-height: 1;
  transform: scaleY(0.8);
}

#seiton_ew #flow ol li h4 {
  width: 100%;
  margin-bottom: 0.9em;
}

#seiton_ew #flow ol li > figure {
  margin-bottom: 5em;
  position: relative;
}

#seiton_ew #flow ol li > figure > picture {
  aspect-ratio: 1116 / 508;
}

#seiton_ew #flow ol li > figure h5 {
  display: flex;
  column-gap: 12px;
  height: fit-content;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  position: absolute;
  left: 12px;
  bottom: 12px;
}

#seiton_ew #flow ol li > figure h5 span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 0.2em 0.3em;
  padding-inline: 0.8em;
  border-radius: 2em;
  font-feature-settings: 'palt';
}

#seiton_ew #flow ol li > figure h5 span.site {
  background-color: var(--theme-org);
}

#seiton_ew #flow ol li > figure h5 span.logi {
  background-color: var(--theme-tagbl);
}

#seiton_ew #flow ol li > figure h5 span.depot {
  background-color: var(--theme-blk);
}

#seiton_ew #flow ol li > p {
  margin-bottom: 1em;
  text-align: justify;
  font-feature-settings: 'palt';
}

#seiton_ew .note li {
  text-align: justify;
  font-feature-settings: 'palt';
}

#seiton_ew .note li::before {
  display: inline;
  content: '\203b';
}

#seiton_ew #flow .note li {
  line-height: 1.7;
}

#seiton_ew #detail {
  padding: 7.5em 5em;
}

#seiton_ew #detail dl {
  margin-bottom: 4em;
}

#seiton_ew #detail dl > div {
  display: flex;
  height: 2.5em;
  margin-bottom: 3px;
}

#seiton_ew #detail dl > div dt,
#seiton_ew #detail dl > div dd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 900;
  line-height: 1.3;
}

#seiton_ew #detail dl > div dt {
  width: 47.5%;
  background-color: var(--theme-grn);
  color: #ffffff;
}

#seiton_ew #detail dl > div:nth-of-type(even) dt {
  background-color: var(--theme-bgdgr);
}

#seiton_ew #detail dl > div dd {
  width: 52.5%;
  background-color: var(--theme-bgtgr);
  color: var(--theme-grn);
}

#seiton_ew #detail dl > div:nth-of-type(even) dd {
  background-color: var(--theme-bglgr);
}


#seiton_ew #detail dl > div dd small {
  font-size: 0.55em;
  font-weight: 400;
}

#seiton_ew #detail .note {
  line-height: 1.6;
}

#seiton_ew #detail .note li {
  margin-bottom: 1em;
}

#seiton_ew #detail .note a {
  font-weight: 600;
}

#seiton_ew #trial {
  padding: 5em;
  background-color: var(--theme-grn);
  color: #ffffff;
}

#seiton_ew #trial hgroup {
  display: flex;
  flex-direction: column;
  ;align-items: center;
  padding-block: 3.5em;
  background-color: var(--theme-org);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

#seiton_ew #trial h2 {
  display: flex;
  justify-content: center;
  column-gap: 0.4em;
  line-height: 1;
}

#seiton_ew #trial h2::before,
#seiton_ew #trial h2::after {
  display: inline-flex;
  content: '/';
  font-weight: 300;
  transform: scaleX(-1.667);
}

#seiton_ew #trial h2::after {
  transform: scaleX(1.667);
}

#seiton_ew #trial > hgroup > p {
  display: flex;
  align-items: center;
  width: calc(100% - 5em);
  margin-block: 1.5em 1em;
}

#seiton_ew #trial > hgroup > p > picture {
  width: 28%;
}

#seiton_ew #trial > hgroup > p > .desc {
  width: 70%;
  padding-left: 0.5em;
  font-weight: 900;
  font-feature-settings: 'palt';
}

#seiton_ew #trial > hgroup > p > .desc > span {
  display: block;
  padding-bottom: 0.25em;
  background-image: url(../img/dotted.png);
  background-size: 16px 10px;
  background-repeat: repeat-x;
  background-position: bottom;
}

#seiton_ew #trial > hgroup > p > .desc .ylw {
  color: var(--theme-ylw);
}

#seiton_ew #trial > hgroup > p > .desc sup {
  display: inline-block;
  font-size: 0.33em;
  transform: translateY(-0.833em);
}

#seiton_ew #trial > hgroup > p > .desc small {
  display: inline;
  font-size: 0.7em;
}

#seiton_ew #trial > div {
  padding: 4em  5em;
  background-color: #ffffff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  font-weight: 300;
  color: var(--theme-blk);
}

#seiton_ew #trial > div .note {
  margin-bottom: 5em;
}

#seiton_ew #trial > div > .note:last-of-type {
  margin-top: 5em;
}

#seiton_ew #trial div .note li {
  margin-bottom: 0.8em;
}

#seiton_ew #trial div .note > li:last-of-type {
  margin-bottom: 0;
}

#seiton_ew #trial > div > a {
  display: flex;
  justify-content: space-evenly;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3.5em;
  padding-inline: 0.5em 0;
  /*margin-block: 1.125em;*/
  background-color: var(--theme-bglgr);
  border-radius: 2em;
  font-weight: 900;
  line-height: 1;
  color: var(--theme-grn);
  filter: drop-shadow(0px 1px 3px rgba(0,0,0,0.15));
}

#seiton_ew #trial > div > a.mpass {
  height: 3em;
  background-color: var(--theme-tagbl);
  font-weight: 800;
  color: #ffffff;
}

#seiton_ew #trial > div > a .blk {
  font-size: 1.1em;
  font-family: 'Montserrat';
  font-weight: 800;
  color: var(--theme-blk);
}

#seiton_ew #trial > div > a > span {
  margin-right: 0.667em;
}

#seiton_ew #trial > div > a::after {
  content: '\ff1e';
  display: inline-flex;
  width: fit-content;
  height: fit-content;
  font-size: 0.667em;
  font-weight: 500;
  color: var(--theme-blk);
  transform: scaleY(1.667);
}

#seiton_ew #trial > div > a.mpass::after {
  color: inherit;
  font-size: 0.833em;
}

#seiton_ew #trial > div > p,
#seiton_ew #trial > div > address {
  text-align: center;
  font-style: normal;
}

#seiton_ew #trial > div > p {
  margin-block: 0.5em;
  font-weight: 900;
  color: var(--theme-grn);
  /*font-feature-settings: 'palt';*/
}

#seiton_ew #trial > div > hr {
  margin-block: 5em 3em;
}

#seiton_ew #trial > div > address dl > div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.5em;
  line-height: 1;
}

#seiton_ew #trial > div > address dl dt,
#seiton_ew #trial > div > address dl dd {
  width: fit-content;
}

#seiton_ew #trial > div > address dl dt::after {
  display: inline;
  content: '\ff1a';
}

#seiton_ew #trial > div > address dl dd {
  letter-spacing: 0.1em;
}

#seiton_ew #trial > div > address dl dd a {
  letter-spacing: initial;
}

@media screen and (max-width: 768px){
  #seiton_ew #features ol {
    margin-inline: 3em;
  }

  #seiton_ew #features ol li {
    border-radius: 3em;
  }

  #seiton_ew #usage {
    padding: 4em 3em 6em;
  }

  #seiton_ew #flow {
    padding: 7em 3em;
  }

  #seiton_ew #flow ol li > figure,
  #seiton_ew #flow ol li > p {
    margin-inline: 3em;
  }

  #seiton_ew #detail {
    padding: 6em 3em;
  }

  #seiton_ew #trial {
    padding: 3em;
  }

  #seiton_ew #trial > div {
    padding: 2.8em 3em;
  }

  #seiton_ew #trial > hgroup > p {
    width: calc(100% - 3em);
  }

  #seiton_ew #trial > hgroup > p > .desc {
    padding-left: 0.35em;
  }

  #seiton_ew #trial > hgroup > p > .desc > span {
    background-size: 10px 6.67px;
  }

  #seiton_ew #trial > div > a > span {
    margin-right: 0.5em;
  }
}

@media screen and (max-width: 540px){
  #seiton_ew #features ol {
    margin-inline: 2.4em;
  }

  #seiton_ew #features ol li {
    padding-bottom: 3em;
    margin-bottom: 4.8em;
    border-radius: 2.4em;
  }

  #seiton_ew #usage {
    padding: 6em 2.4em;
  }

  #seiton_ew #flow {
    padding: 7em 2.4em;
  }

  #seiton_ew #flow ol li {
    padding-top: 2em;
    margin-bottom: 3.5em;
  }

  #seiton_ew #flow ol > li:last-of-type {
    margin-bottom: 2.1em;
  }

  #seiton_ew #flow ol li > figure,
  #seiton_ew #flow ol li > p {
    margin-inline: 2.4em;
  }

  #seiton_ew #flow ol li > figure {
    margin-bottom: 2em;
  }

  #seiton_ew #flow ol li > p {
    padding-bottom: 2em;
    margin-bottom: 0.5em;
  }

  #seiton_ew #flow ol > li:not(:last-of-type)::before,
  #seiton_ew #flow ol > li:not(:last-of-type)::after {
    height: 3em;
  }

  #seiton_ew #detail {
    padding: 6em 2.4em 3.2em;
  }

  #seiton_ew #detail dl {
    margin-bottom: 1.8em;
  }

  #seiton_ew #detail dl > div {
    height: 2.8em;
  }

  #seiton_ew #trial {
    padding: 2.1em;
  }

  #seiton_ew #trial > div {
    padding: 2.8em 1.7em;
  }

  #seiton_ew #trial hgroup {
    padding-block: 3em 2.2em;
  }

  #seiton_ew #trial > hgroup > p {
    width: calc(100% - 2.4em);
  }

  #seiton_ew #trial > hgroup > p > .desc {
    padding-left: 0.3em;
  }

  #seiton_ew #trial > hgroup > p > .desc > span {
    background-size: 10px 6.67px;
  }

  #seiton_ew #trial > div > a > span {
    margin-right: 0.5em;
  }

  #seiton_ew #trial > div .note {
    margin-bottom: 2.8em;
  }

  #seiton_ew #trial > div > .note:last-of-type {
    margin-top: 2.8em;
  }

  #seiton_ew #trial > div > hr {
    margin-block: 2.8em 1.7em;
  }
}

@media screen and (max-width: 375px){
  #seiton_ew #features ol {
    margin-inline: 2em;
  }

  #seiton_ew #features ol li {
    padding-bottom: 2.5em;
    margin-bottom: 4em;
    border-radius: 2em;
  }

  #seiton_ew #usage {
    padding: 5em 2em;
  }

  #seiton_ew #flow {
    padding: 5.83em 2em;
  }

  #seiton_ew #flow ol li {
    padding-top: 1.667em;
    margin-bottom: 2.917em;
  }

  #seiton_ew #flow ol > li:last-of-type {
    margin-bottom: 1.75em;
  }

  #seiton_ew #flow ol li > figure,
  #seiton_ew #flow ol li > p {
    margin-inline: 2em;
  }

  #seiton_ew #flow ol li > figure {
    margin-bottom: 1.667em;
  }

  #seiton_ew #flow ol li > p {
    padding-bottom: 1.667em;
    margin-bottom: 0.417em;
  }

  #seiton_ew #flow ol > li:not(:last-of-type)::before,
  #seiton_ew #flow ol > li:not(:last-of-type)::after {
    height: 2.5em;
  }

  #seiton_ew #detail {
    padding: 5em 2em 2.667em;
  }

  #seiton_ew #detail dl {
    margin-bottom: 1.5em;
  }

  #seiton_ew #detail dl > div {
    height: 2.333em;
  }

  #seiton_ew #trial {
    padding: 2em;
  }

  #seiton_ew #trial > div {
    padding: 2.333em 1.8em;
  }

  #seiton_ew #trial hgroup {
    padding-block: 2.5em 1.83em;
  }

  #seiton_ew #trial > hgroup > p {
    width: calc(100% - 2em);
  }

  #seiton_ew #trial > hgroup > p > .desc {
    padding-left: 0.3em;
  }

  #seiton_ew #trial > hgroup > p > .desc > span {
    background-size: 10px 6.67px;
  }

  #seiton_ew #trial > div > a > span {
    margin-right: 0.5em;
  }

  #seiton_ew #trial > div .note {
    margin-bottom: 2.333em;
  }

  #seiton_ew #trial > div > .note:last-of-type {
    margin-top: 2.333em;
  }

  #seiton_ew #trial > div > hr {
    margin-block: 2.333em 1.417em;
  }
}

/* font-size */
#seiton_ew #features h2,
#seiton_ew #features ol li .order {
  font-size: 10em;
}

#seiton_ew ol .order > span {
  font-size: 8em;
}

#seiton_ew section h3 {
  font-size: 5.5em;
}

#seiton_ew section ol li h4,
#seiton_ew #trial > hgroup > p > .desc,
#seiton_ew #trial > div > a {
  font-size: 4.5em;
}

#seiton_ew #detail dl > div {
  font-size: 4em;
}

#seiton_ew #detail dl > div dt,
#seiton_ew #detail dl > div dd {
  font-size: inherit;
}

#seiton_ew #flow ol li > figure h5,
#seiton_ew #trial h2 {
  font-size: 3.5em;
}

#seiton_ew #features li p,
#seiton_ew #flow ol li > p > span,
#seiton_ew #trial > div > a.mpass,
#seiton_ew #trial > div > p {
  font-size: 3.2em;
}

#seiton_ew .note li,
#seiton_ew #features li small,
#seiton_ew #trial > div > address dl > div {
  font-size: 2.3em;
}

@media screen and (max-width: 768px){
  #seiton_ew section h3 {
    font-size: 4em;
  }

  #seiton_ew #features h2,
  #seiton_ew #features ol li .order {
    font-size: 7.4em;
  }

  #seiton_ew section ol li h4,
  #seiton_ew #trial > hgroup > p > .desc,
  #seiton_ew #trial > div > a {
    font-size: 3.5em;
  }

  #seiton_ew #features li p,
  #seiton_ew #flow ol li > p > span,
  #seiton_ew #trial > div > a.mpass,
  #seiton_ew #trial > div > p {
    font-size: 2.3em;
  }

  #seiton_ew .note li,
  #seiton_ew #features li small,
  #seiton_ew #trial > div > address dl > div {
    font-size: 1.6em;
  }

  #seiton_ew #flow ol li > figure h5,
  #seiton_ew #trial h2 {
    font-size: 2.7em;
  }

  #seiton_ew ol .order > span {
    font-size: 5.6em;
  }

  #seiton_ew #detail dl > div {
    font-size: 2.6em;
  }

  #seiton_ew #trial > hgroup > p > .desc,
  #seiton_ew #trial > hgroup > p > .desc > span {
    font-size: 1.75em;
  }

  #seiton_ew #trial > div > a {
    font-size: 3.2em;
  }
}

@media screen and (max-width: 540px){
  #seiton_ew #features h2,
  #seiton_ew #features ol li .order {
    font-size: 5em;
  }

  #seiton_ew section ol li h4,
  #seiton_ew #trial > hgroup > p > .desc,
  #seiton_ew #trial > div > a {
    font-size: 2.3em;
  }

  #seiton_ew #features li p,
  #seiton_ew #flow ol li > p > span,
  #seiton_ew #trial > div > a.mpass,
  #seiton_ew #trial > div > p {
    font-size: 1.6em;
  }

  #seiton_ew .note li,
  #seiton_ew #features li small,
  #seiton_ew #trial > div > address dl > div {
    font-size: 1.1em;
  }

  #seiton_ew section h3 {
    font-size: 2.8em;
  }

  #seiton_ew #flow ol .order > span {
    font-size: 3em;
    transform: scaleY(0.8) translateY(0.1em)
  }

  #seiton_ew #flow ol li > figure h5,
  #seiton_ew #trial h2 {
    font-size: 1.8em;
  }

  #seiton_ew #detail dl > div {
    font-size: 1.8em;
  }

  #seiton_ew #detail dl > div dd small {
    font-size: 0.6em;
  }

  #seiton_ew #trial > hgroup > p > .desc,
  #seiton_ew #trial > hgroup > p > .desc > span {
    font-size: 1.42em;
  }

  #seiton_ew #trial > div > a {
    font-size: 2.2em;
  }

  #seiton_ew #trial > div > address dl > div {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 375px){
  #seiton_ew #features h2,
  #seiton_ew #features ol li .order {
    font-size: 4.167em;
  }

  #seiton_ew section ol li h4,
  #seiton_ew #trial > hgroup > p > .desc,
  #seiton_ew #trial > div > a {
    font-size: 1.917em;
  }

  #seiton_ew #features li p,
  #seiton_ew #flow ol li > p > span,
  #seiton_ew #trial > div > a.mpass,
  #seiton_ew #trial > div > p {
    font-size: 1.333em;
  }

  #seiton_ew .note li,
  #seiton_ew #features li small,
  #seiton_ew #trial > div > address dl > div {
    font-size: 0.917em;
  }

  #seiton_ew section h3 {
    font-size: 2.333em;
  }

  #seiton_ew #flow ol .order > span {
    font-size: 2.8em;
  }

  #seiton_ew #flow ol li > figure h5,
  #seiton_ew #trial h2 {
    font-size: 1.5em;
  }

  #seiton_ew #detail dl > div {
    font-size: 1.5em;
  }

  #seiton_ew #trial > hgroup > p > .desc,
  #seiton_ew #trial > hgroup > p > .desc > span {
    font-size: 1.3em;
  }
    #seiton_ew #trial > div > a {
    font-size: 1.833em;
  }
  #seiton_ew #trial > div > address dl > div {
    font-size: 1em;
  }
}