*,
*::before,
*::after {
  box-sizing: border-box;
  min-height: 0vw;
}

header *,
header *::before,
header *::after {
  box-sizing: content-box;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
figure,
figcaption,
button,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
  min-height: 0vw;
}

a {
  text-decoration: none;
}

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

a * {pointer-events: none;}

ul,
ol {
  padding-left: 0;
}

li {
  list-style: none;
}

h2 {
  font-family: 'Noto Sans JP', sans-serif;
  margin-block-start: 0;
  margin-block-end: 0;
}

p {
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 767px) {
  p {
    margin-bottom: 0 !important;
  }
}

small, em {
  font-style: normal;
}

img {
  width: 100%;
  border: 0;
  height: auto;
  vertical-align: top;
}

section {
  position: relative;
  width: auto;
  margin: 0;
  padding: 0;
}

.Wrapper {
  overflow: hidden;
}

.WBR {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.container {
  z-index: 1;
  position: relative;
  max-width: 1040px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .container {
    padding-right: calc(12vw / 3.75);
    padding-left: calc(12vw / 3.75);
  }
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp-only {
    display: none !important;
  }
}

img {
  object-fit: contain;
  width: 100%;
}

main {
  padding-top: 86px;
}
@media screen and (max-width: 767px) {
  main {
      padding-top: 44px;
  }
}

footer {
  min-width: auto;
}

.goTop {
  z-index: 400;
}

.fv {
  position: relative;
}

.fv h1 {
  width: 100%;
}

.fv-link-wrapper {
  z-index: 300;
  position: absolute;
  right: 5%;
  top: 9%;
  width: calc(188.3608vw / 14);
  height: calc(188.3608vw / 14);
  filter: drop-shadow(5px 4px 0px rgba(135,131,8,1.0));
  /* transition: .1s; */
}
@media screen and (max-width: 767px) {
  .fv-link-wrapper {
    right: 3%;
    top: calc(15vw / 3.75);
    width: calc(98.3518vw / 3.75);
    height: calc(98.3518vw / 3.75);
  }
}
.fv-link-wrapper:hover {
  filter: drop-shadow(0px 0px 2px rgba(135,131,8,0.8));
}

.fv-link-wrapper img {
    transition: .4s;
}
.fv-link-wrapper:hover img {
  opacity: .9;
}

.fv-link {
  position: relative;
  display: block;
  width: 100%;
}

.fv-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  background-image: url(../images/led_bracelet/bg_fv-link.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transition: .4s;
  filter: blur(0.1px);
  opacity: .4;
}
.fv-link-wrapper:hover .fv-link::before {
  filter: blur(5px);
  mix-blend-mode: luminosity;
  transform: translate(-50%,-50%) scale(1.08);
}
.fv-link::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center 15%,center 85%;
  background-repeat: no-repeat;
  background-image: url(../images/led_bracelet/icon_mail.svg),url(../images/led_bracelet/icon_arrow.svg);
  background-size: 20% ,15%;
}

.fv-link a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: calc(21vw / 14);
  font-weight: 700;
  line-height: calc(21 / 15);
  display: grid;
  grid-template-columns: 100%;
  place-items: center;
  text-align: center;
  background: radial-gradient(rgba(255,255,255,.0), transparent);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: .4s;
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  .fv-link a {
    font-size: calc(10.9651vw / 3.75);
  }
}

.fv-link-wrapper:hover .fv-link a {
    mix-blend-mode: luminosity;
    background: radial-gradient(rgba(255, 255, 255, .4), transparent);
    color: rgba(0, 0, 0, .55);
}

.fv-nav {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap:1.5px;
  column-gap: 1.5px;
}

.fv-nav a {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  height: clamp(60px,calc(76vw / 10),76px);
  flex: 1;
  min-width: 150px;
  transition: .3s;
  filter: drop-shadow(0 0 0px rgba(24, 148, 219, .7));
}
.fv-nav a:hover {
  filter: drop-shadow(0 0 10px rgba(24, 148, 219, .7));
}

.fv-nav a::before ,.fv-nav a::after {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1894DB;
  transition: .3s;
}
.fv-nav a::after {
  opacity: .5;

}
.fv-nav a:hover::after {
  background-image: linear-gradient(rgba(255, 255, 255, .1) ,rgba(255, 255, 255, .1));
  mix-blend-mode: screen;
}

.fv-nav a span {
  z-index: 1;
  position: relative;
  color: rgba(255, 255, 255, 1.0);
  font-size: clamp(16px,calc(18vw / 10),18px);
  font-weight: 700;
  transition: .3s;
  filter: drop-shadow(0 0 7px rgba(13, 29, 89, .0));
}

.fv-nav a:hover span {
  filter: drop-shadow(0 0 10px rgba(13, 29, 89, .4));
}

.common-section {
  position: relative;
  padding: clamp(60px,calc(75vw / 10),75px) 0 clamp(70px,calc(110vw / 10),110px);
  background-position: top center;
  background-size: 100%;
}
.bg-blue-red {
  background-image: linear-gradient(to left, #DB32A5, #2677BD);
}
.bg-navy {
  background-color: #0D1D59;
}

.common-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center 200px;
  background-image: url(../images/led_bracelet/bg_clear.svg);
  background-size: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
@media screen and (max-width: 767px) {
.common-section::before {
  background-image: url(../images/led_bracelet/bg_clear_sp.svg);
}
}

.bright-line-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 60px;
  padding: 15px;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
.bright-line-wrapper {
  padding: 20px;
}
}

.bright-line-wrapper::before ,.bright-line-wrapper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  clip-path: polygon(0% 0%, 0% 100%, 4.5px 100%, 4.5px 4.5px, calc(100% - 4.5px) 4.5px, calc(100% - 4.5px) calc(100% - 4.5px), 4.5px calc(100% - 4.5px), 4.5px 100%, 100% 100%, 100% 0%);
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

.bright-line-wrapper::before {
    background-image: linear-gradient(#E85498, #A77FB6, rgba(255, 255, 255, .2));
}

.bright-line-wrapper::after {
  background-color: #fff;
  mix-blend-mode: overlay;
}

.bright-gauss {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  filter: blur(5px);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.bright-line {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  clip-path: polygon(0% 0%, 0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px), 5px 100%, 100% 100%, 100% 0%);
  background-image: linear-gradient(#E85498, #A77FB6, #00B6ED);
}

.common-title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(20px,calc(25vw / 10),25px);
  line-height: calc(24 / 20);
}

.about-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 300px));
  grid-auto-rows: auto;
  gap: 40px;
  place-items: center;
  margin: 0 auto;
  justify-content: center;
}

.about-list * {
  color: #fff;
}

.about-list li {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: 1fr;
  grid-row: span 3;
  gap: 5px;
  place-items: center;
  text-align: center;
}

.about-list-img {
  position: relative;
  width: 100%;
  max-width: 75%;
  height: auto;
  aspect-ratio: 1;
}

.about-list-img-shadow {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .2));
  background-color: #F1E1FA;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.about-list-img-shadow--over::after {
  content:"";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  aspect-ratio: 171 / 150;
  background-image: url(../images/led_bracelet/about_2_2.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.about-list-img-shadow--3 {
  background-image: linear-gradient(to right,#fff,#F1E1FA,#F1E1FA);
} 

.about-list-text {
  font-size: clamp(18px,calc(20vw / 10),20px);
  font-weight: 700;
  line-height: calc(24 / 20);
  padding: 10px 0;
  min-height: clamp(60px,calc(75vw / 10),75px);
  display: grid;
  place-items: center;
}

.about-list-title-bg {
  position: relative;
  width: 100%;
  min-height: clamp(46px,calc(51vw / 10),51px);
  margin-top: 5px;
}

.about-list-title-bg::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#fff ,#fff) ,linear-gradient(#fff ,#fff),linear-gradient(#fff ,#fff),linear-gradient(#fff ,#fff);
  background-repeat: no-repeat;
  background-size: calc(100% - 12px) 1px ,1px calc(100% - 10px) ,calc(100% - 12px) 1px,1px calc(100% - 10px);
  background-position: top left ,bottom right,bottom right,top left;
  pointer-events: none;
}

.about-list-title {
    background-image: linear-gradient(to right ,#E300C5, #A86ADE, #00AAEA);
    font-weight: 700;
    padding: 4px 8px 8px;
}

.features {
  text-align: center;
}

.features * {
  color: #fff;
}

.features-wrapper {
  background-color: #232229;
  padding: clamp(30px,calc(40vw / 10),40px) clamp(20px,calc(40vw / 10),40px);
  margin-top: 75px;
}

.features-title {
  position: relative;
  font-size: clamp(20px,calc(30vw / 10),30px);
  font-weight: 700;
  line-height: calc(20 / 16);
  display: inline-block;
  margin: 0 auto;
}

.bright-line-vertical--pos {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 10px;
}

.bright-line-vertical--pos span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 12px;
}

.bright-line-vertical--pos span.bright-line-vertical--1 {
    mix-blend-mode: lighten;
    filter: blur(1px);
    z-index: 1;
    opacity: .7;
}
.bright-line-vertical--pos span.bright-line-vertical--2 {
  mix-blend-mode: lighten;
  filter: blur(5px);
  z-index: 1;
}
/* .bright-line-vertical--pos span.bright-line-vertical--3 {
    filter: blur(5px);
} */

.bright-line-vertical--1::before ,.bright-line-vertical--1::after ,.bright-line-vertical--2::before ,.bright-line-vertical--2::after,.bright-line-vertical--3::before ,.bright-line-vertical--3::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(50% - 15px);
  height: 4.5px;
  background-image: linear-gradient(to left ,#E300C5, #A86ADE, #00AAEA);
}
.bright-line-vertical--1::after,.bright-line-vertical--2::after,.bright-line-vertical--3::after {
  left: auto;
  right: 0;
  width: calc(50% + 15px);
  height: 16px;
  clip-path: polygon(100% 4.5px, 12px 4.5px, 4.5px 100%, 1px calc(100% - 2px), 10px 0, 100% 0);
}

.bright-line-vertical--1::before ,.bright-line-vertical--1::after {
  background-image: linear-gradient(#fff, #fff);
  mix-blend-mode: lighten;
}

.bright-line-vertical--2::before ,.bright-line-vertical--2::after {
  width: calc(50% - 14px);
  height: 9.5px;
  top: -2.5px;
  left: -1.5px;
}
.bright-line-vertical--2::after {
  width: calc(50% + 15.5px);
  left: auto;
  right: -1.5px;
  clip-path: polygon(100% 9.5px, 9.5px 9.5px, 12px 100%, 0 100%, 9px 0, 100% 0);
}

.features-point {
  position: relative;
  padding: 35px 0;
}

.features-point-img {
  max-width: 429.7745px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .features-point-img {
    padding: 30px 0;
  }
}

.features-point-text {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  text-align: center;
  padding: clamp(30px, calc(45vw / 10), 45px) clamp(10px, calc(35vw / 10), 35px);
  font-size: clamp(14px,calc(20vw / 10),20px);
  font-weight: 700;
  line-height: calc(19 / 14);
}
@media screen and (max-width: 767px) {
  .features-point-text {
    border: 1px solid #fff;
    font-size: min(calc(14vw / 3.75),14px);
  }
  .features-point-text--1 {
    top: 30px;
  }
}

.features-point-text--2 {
  top: auto;
  bottom: 0;
  left: -15px;
}
@media screen and (max-width: 767px) {
.features-point-text--2 {
  left: 0;
  bottom: -15px;
}
}

.features-point-text--3 {
  left: auto;
  right: 0;
  top: 50%;
  transform: translateY(-60%);
}
@media screen and (max-width: 767px) {
.features-point-text--3 {
  top: auto;
  bottom: 0;
  transform: translate(10px, -70%);

}
}


.features-kurukuru {
  position: relative;
}
.features-kurukuru::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 100%;
  pointer-events: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68.02 40.43"><path fill="%23ffffff" d="M50.25,40.43c-.93,0-1.87-.02-2.82-.07-8.26-.39-14.56-2.63-18.71-6.66-2.26-2.2-3.89-5.34-4.46-8.61-5.53,.4-11.95-.3-17.24-4.1C3.42,18.43,.87,14.23,.18,9.79-.39,6.13,.4,2.66,2.39,0l1.6,1.2c-1.67,2.22-2.32,5.17-1.84,8.28,.61,3.93,2.86,7.63,6.02,9.89,4.81,3.45,10.72,4.1,15.87,3.73-.12-3.05,.74-6.06,2.9-8.4,1.68-1.81,4.4-2.81,6.79-2.48,1.7,.23,3.03,1.14,3.75,2.54,1.28,2.49,.07,5.42-1.78,7.02-1.82,1.58-4.16,2.2-6.41,2.64-.97,.19-1.99,.35-3.07,.48,.52,2.79,1.93,5.47,3.89,7.37,3.79,3.68,9.65,5.73,17.41,6.1,7.39,.35,14.03-.7,19.72-3.11l.78,1.84c-5.23,2.21-11.2,3.33-17.77,3.33ZM32.83,14.16c-1.58,0-3.35,.75-4.42,1.9-1.76,1.9-2.47,4.35-2.4,6.85,1.02-.12,1.99-.28,2.91-.46,1.98-.38,4.01-.91,5.47-2.18,1.23-1.07,2.11-3.05,1.31-4.6-.53-1.03-1.51-1.37-2.25-1.47-.2-.03-.41-.04-.62-.04Z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  width: 68.02px;
  height: 40.43px;
  pointer-events: none;
}
.features-point-text--1 .features-kurukuru::after {
  transform: translate(-10px, 10px);
}
.features-point-text--2 .features-kurukuru::after {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 45.24 68.78"><path fill="%23ffffff" d="M8.97,68.78C1.23,62.92-1.96,51.64,1.22,41.35c2.69-8.72,9.75-16.67,19.35-21.83,.45-.24,.92-.48,1.41-.72,.31-2.43,1.3-4.97,2.96-7.61C28.9,4.93,36.71-.92,45.24,.12l-.24,1.99c-7.66-.94-14.74,4.42-18.36,10.15-1.23,1.95-2.05,3.83-2.46,5.62,1.82-.65,3.82-1.05,5.87-.79,3.45,.44,6.98,3.42,6.74,7.15-.11,1.72-1.07,3.34-2.65,4.44-1.78,1.24-4.09,1.65-6.04,1.06-3.39-1.01-5.93-4.52-6.2-8.53v-.12c-.14,.07-.26,.13-.39,.2-9.15,4.91-15.85,12.43-18.39,20.65-2.89,9.35,.07,19.97,7.05,25.25l-1.21,1.59ZM23.88,20.14c0,.32,0,.63,.02,.94,.21,3.19,2.18,5.97,4.78,6.75,1.38,.41,3.03,.11,4.32-.79,1.09-.76,1.73-1.8,1.8-2.92,.16-2.57-2.51-4.72-5-5.04-2.03-.26-4.08,.3-5.91,1.07Z"/></svg>');
  width: 45.24px;
  height: 68.78px;
  top: 0;
  transform: translate(-15px, -100%);
}
.features-point-text--3 .features-kurukuru::after {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 78.57 53.19"><path fill="%23ffffff" d="M5.94,53.19c-1.98,0-3.97-.13-5.94-.39l.26-1.98c11.42,1.5,23.26-1.61,32.48-8.53,1.82-1.36,4.28-3.44,5.5-6.18-1.34,.23-2.72,.31-4.12,.05-2.54-.48-5.29-2.57-5.41-5.51-.07-1.72,.89-3.34,2.55-4.34,1.94-1.16,4.34-1.25,6.12-.21,2.63,1.53,3.66,4.53,3.52,7.32,0,0,.01,0,.02,0,8.28-2.24,17.67-4.77,24.97-10.24,6.52-4.89,12.23-13.82,10.3-22.76l1.96-.42c2.11,9.8-4.03,19.51-11.06,24.78-7.6,5.7-17.19,8.29-25.64,10.57-.29,.08-.59,.16-.89,.24-.04,.13-.08,.25-.12,.37-1.24,3.65-4.3,6.27-6.5,7.93-8.04,6.04-17.98,9.3-28,9.3Zm28.66-25.81c-.78,0-1.59,.22-2.31,.65-.49,.3-1.64,1.14-1.58,2.55,.07,1.83,1.97,3.28,3.78,3.62,1.42,.27,2.92,.07,4.37-.25,.3-2.31-.44-4.92-2.48-6.11-.51-.3-1.13-.45-1.78-.45Z"/></svg>');
  width: 78.57px;
  height: 53.19px;
  left: 0;
  transform: translate(-70%, 10px);
}
@media screen and (max-width: 767px) {
  .features-point-text--1 .features-kurukuru::after {
    width: 46.6424px;
    height: 27.1843px;
        left: 65%;
        top: 135%;
  }
  .features-point-text--2 .features-kurukuru::after {
    width: 50.484px;
    height: 41.5807px;
    left: 20%;
    top: -10px;
  }
  .features-point-text--3 .features-kurukuru::after {
    width: 30.8658px;
    height: 46.8889px;
    left: 50%;
    transform: translate(-50%, -70px) rotate(30deg) scale(1, -1);
    top: 0;
  }
}

.common-title--features-colors {
    margin: 35px auto;
    display: inline-block;
    position: relative;
}
.common-title--features-colors::before ,.common-title--features-colors::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%);
    width: clamp(30px,calc(40vw / 10),40px);
    height: clamp(37.5px,calc(50vw / 10),50px);
    background-image: url(../images/led_bracelet/features_deco.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}
.common-title--features-colors::after {
    transform: translate(-10px,-50%) scale(-1,1);
    right: auto;
    left: calc(100% + 10px);
}


.features-colors {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit,minmax(clamp(150px,calc(200vw / 10),200px),1fr));
}

.example-list {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: auto;
  gap: 65px;
  padding: clamp(30px,calc(50vw / 10),50px) 0 clamp(50px,calc(100vw / 10),110px);
}

.example-list * {
  color: #fff;
}

.example-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 507px 1fr;
  grid-template-rows: auto;
  gap: 35px 75px;
  place-items: center;
  justify-content: center;
}
.example-list-item-right {
  grid-template-columns: 1fr 507px;
}
@media screen and (max-width: 1000px) {
  .example-list-item {
    grid-template-columns: 100%;
    max-width: 450px;
    margin: 0 auto;
  }
}

.example-list-item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: calc(100% - 40px);
  width: clamp(365px,100vw,1400px);
  background-image: linear-gradient(to right,#B31793,#B31793,transparent);
  background-size: 75%;
  pointer-events: none;
  background-position: right bottom;
  background-repeat: no-repeat;
  opacity: .7;
}
.example-list-item-right::before {
  background-image: linear-gradient(to left,#32AEDB,#32AEDB,transparent);
  background-position: left bottom;
}
@media screen and (max-width: 1000px) {
  .example-list-item::before {
    content: none;
  }
}

.example-img-wrapper {
  position: relative;
  width: 100%;
  transform: translateX(-15px);
}
@media screen and (min-width: 1000.1px) {
  .example-list-item-right .example-img-wrapper {
    grid-area: 1 / 2 / 2 / 3;
  }
}
@media screen and (max-width: 1000px) {
  .example-img-wrapper {
    transform: translateX(0);
  }
}
@media screen and (max-width: 767px) {
  .example-img-wrapper {
    padding: 0 20px;
  }
}

.example-img-wrapper::before ,.example-img-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
  transform: translate(calc(-50% + clamp(10px, calc(20vw / 10), 20px)), calc(-50% - 7px));
  background-color: #00AAEA;
}
.example-img-wrapper::after {
  background-color: #DB32A5;
  transform: translate(calc(-50% + clamp(20px,calc(30vw / 10),30px)),calc(-50% + 7px));
}
@media screen and (max-width: 767px) {
  .example-img-wrapper::before ,.example-img-wrapper::after {
    width: calc(100% - 40px);
      transform: translate(calc(-50% + 5px), calc(-50% - 7px));
  }
  .example-img-wrapper::after {
    transform: translate(calc(-50% + 16px), calc(-50% + 7px));
  }
}

.example-img-num {
  position: absolute;
  width: clamp(120px,calc(180vw / 10),180px);
  top: 0;
  left: 0;
  transform: translate(0, -35%);
  z-index: 5;
  pointer-events: none;
}

.example-list-title {
  z-index: 2;
  position: absolute;
  bottom: 20px;
  left: 0;
}

.example-list-title h3 {
  position: relative;
  z-index: 1;
  font-size: clamp(18.5px,calc(30vw / 10),30px);
  font-weight: 700;
  color: #D00080;
  width: clamp(225px,calc(345vw / 10),345px);
  height: clamp(35px,calc(60vw / 10),60px);
  display: grid;
  place-items: center;
}

.example-list-title h3::before ,.example-list-title h3::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%);
  background-color: #fff;
}
.example-list-title h3::before {
  top: 5px;
  left: 5px;
  background-image: linear-gradient(to right,#006E96,#E966A0);
  background-repeat: no-repeat;
  background-size: 100%;
}

.example-img-clip {
  z-index: 1;
  position: relative;
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
  transform: translateX(clamp(15px,calc(25vw / 10),25px));
}
@media screen and (max-width: 767px) {
  .example-img-clip {
    transform: translateX(10px);
  }
}

.example-text {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: auto;
  gap: 15px;
}
@media screen and (min-width: 1000.1px) {
  .example-list-item-right .example-text {
    grid-area: 1 / 1 / 2 / 2;
    transform: translateX(45px);
  }
}

@media screen and (max-width: 1000px) {
  .example-text {
    padding: 0 20px 40px;
    text-align: justify;
  }
  .example-text::before {
    content: "";
    z-index: -1;
    position: absolute;
    bottom: 0;
    left: -22px;
    height: calc(100% + 60px);
    width: 100vw;
    background-image: linear-gradient(to right, #B31793 35%, transparent);
    background-size: 100%;
    pointer-events: none;
    background-position: right bottom;
    background-repeat: no-repeat;
    opacity: .7;
  }
  .example-list-item-right .example-text::before {
    left: auto;
    right: -22px;
    background-image: linear-gradient(to left, #32AEDB 35%, transparent);
  }
}

.example-text p {
  position: relative;
  padding-left: 25px;
  font-size: clamp(16px,calc(20vw / 10),20px);
  font-weight: 700;
  line-height: calc(26 / 20);
}

.example-text p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -10%);
    width: clamp(35px, calc(50vw / 10), 50px);
    height: 44px;
    background-image: url(../images/led_bracelet/example_icon_check.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    pointer-events: none;
}

.common-link {
  position: relative;
  z-index: 1;
  margin-bottom: 15px;
}

.common-link::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #FFF70F;
  transform: translate(-50%,-50%);
  width: calc(100% - 30px);
  height: calc(100% + 10px);
  transition: .3s;
  opacity: 0;
  filter: blur(7px);
  mix-blend-mode: lighten;
  border-radius: 15px;
  pointer-events: none;
}
.common-link:hover::before {
  opacity: 0.7;
}

.common-link a {
  position: relative;
  display: grid;
  place-items: center;
  justify-content: center;
  grid-template-columns: 100%;
  grid-auto-rows: auto;
  width: 100%;
  padding: 20px clamp(10px,calc(20vw / 10),20px) 20px clamp(30px,calc(40vw / 10),40px);
  background-color: #FFF70F;
  border-radius: 15px;
  transition: .3s;
  transform: translateY(-5px);
  box-shadow: 0 5px 0 rgba(135,131,8,1.0);
}
.common-link:hover a {
  transform: translateY(0);
  mix-blend-mode: screen;
  opacity: .98;
  box-shadow: 0 0px 0 rgba(135,131,8,1.0);
}

.common-link a span {
  position: relative;
  pointer-events: none;
  font-size: clamp(20px,calc(30vw / 10),30px);
  font-weight: 700;
  line-height: 1.25;
}

.common-link a span::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translate(-5px,-50%);
  display: block;
  width: clamp(22.2484px,calc(45vw / 10),45px);
  height: clamp(16.4226px,calc(32vw / 10),32px);
  background-image: url(../images/led_bracelet/icon_mail.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right;
}

.bright-gauss--product {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));
  background-size: calc(100% - 10px) calc(100% - 10px);
  background-repeat: no-repeat;
  background-position: center center;
  filter: blur(.3px);
  border-radius: 0.5px;
}

.product-wrapper {
  padding: clamp(30px, calc(40vw / 10), 40px) clamp(20px, calc(40vw / 10), 40px);
  margin-top: 75px;
  text-align: center;
}
.product-wrapper::before {
  background-image: linear-gradient(#E85498, #A77FB6, rgba(255, 255, 255, .5));
}
.product-wrapper::after {
  background-image: none;
  background-color: rgba(255, 255, 255, .2);
  mix-blend-mode: normal;
}

.product-title {
  display: inline-block;
  min-width: clamp(182px, calc(340vw / 10), 340px);
  margin-bottom: clamp(35px,calc(55vw / 10),55px);
}

.product-size {
  width: 100%;
  overflow-x: scroll;
}
@media screen and (max-width: 767px) {
.product-size {
  overflow-x: scroll;
}
}

.product-size img {
  width: auto;
  height: 240px;
}

.product-list {
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: auto;
    gap: 27px 0;
}
@media screen and (max-width: 767px) {
  .product-list {
      gap: 55px 0;
  }
}

.product-contents {
  position: relative;
}

.scroll-hint.is-left-scrollable ,.scroll-hint.is-right-scrollable.is-left-scrollable ,.scroll-hint.is-right-scrollable {
  background: none;
}

.product-spec-title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(20px,calc(30vw / 10),30px);
  text-align: center;
  background-color: #000;
  padding: 20px 0;
  pointer-events: none;
}

.accordion-content {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transform: .1s;
}
.accordion-ac .accordion-content {
  height: auto;
  opacity: 1;
  overflow: visible;
}

.product-spec.accordion-ac .accordion-content {
  background-color: #fff;
  padding: 50px 20px;
}

.product-spec-list {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-auto-rows: auto;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, .3);
}
@media screen and (max-width: 767px) {
  .product-spec-list {
    grid-template-columns: 100%;
    border-top: none;
  }
}

.product-spec-list * {
  font-weight: 400;
  line-height: calc(28 / 16);
}

.product-spec-list-item {
  position: relative;
  padding: clamp(20px,calc(30vw / 10),30px) 0;
}
.product-spec-list-last div:first-of-type {
  position: relative;
}

h4.product-spec-list-item {
  font-size: clamp(16px,calc(18vw / 10),18px);
  font-weight: 500;
}
h4.product-spec-list-item::after ,.product-spec-list-last div:first-of-type::after  {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(calc(-50% - 1px));
  height: 6px;
  width: 100%;
  font-size: clamp(16px,calc(18vw / 10),18px);
  background-image: linear-gradient(to left, #00AAEA,#E3007F 50%);
  background-size: 130%;
  background-position: left center;
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
}

.product-spec-text {
  font-size: clamp(14px,calc(16vw / 10),16px);
  font-weight: 400;
  line-height: calc(28 / 16);
  text-align: left;
}

.product-spec-list-item.product-spec-text,.product-spec-list-item--block {
  padding-left: 50px;
}
@media screen and (max-width: 767px) {
  .product-spec-list-item.product-spec-text {
    border-top: 1px solid rgba(0, 0, 0, .3);
  }
  .product-spec-list-item.product-spec-text,.product-spec-list-item--block {
    padding-left: 0;
    
  }
}

.product-spec-list-item--block {
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: auto;
  gap: 3px;
}
@media screen and (max-width: 767px) {
  .product-spec-list-item--block {
    border-top: 1px solid rgba(0, 0, 0, .3);
  }
}

.product-spec-list-item--block .product-spec-text {
  position: relative;
  padding-left: clamp(16px, calc(20vw / 10), 20px);
}

.product-spec-list-item--block .product-spec-text::after {
  content: "■";
  position: absolute;
  top: 0;
  left: 0;
  font-size: clamp(14px,calc(16vw / 10),16px);
}

.product-price-list {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-auto-rows: auto;
  gap: 5px 0;
  place-items: center;
}

.product-price-list * {
  display: grid;
  width: 100%;
  height: 100%;
  text-align: center;
  place-items: center;
  padding: 10px;
}

.price-dt {
  color: #fff;
  font-size: clamp(16px,calc(25vw / 10),25px);
  font-weight: 500;
  background-color: #1894DB;
}

.price-dd {
  font-size: clamp(20px,calc(30vw / 10),30px);
  font-weight: 500;
  background-color: #F0F6F0;
}

.product-price-note {
  font-size: clamp(11px,calc(14vw / 10),14px);
  font-weight: 400;
  line-height: calc(18 / 11);
  margin-top: 1rem;
}

.flow-list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 75px;
  margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
  .flow-list {
    margin-bottom: 35px;
  }
}

.flow-list * {
  width: 100%;
  color: #fff;
}

.flow-list li {
  position: relative;
  display: grid;
  grid-template-columns: clamp(67.5px,calc(75vw / 10),75px) 1fr;
  grid-auto-rows: auto;
  gap: 5px clamp(15px,calc(40vw / 10),40px);
  justify-content: center;
  background-image: linear-gradient(to right , rgba(50,174,219,0.7) 35%, transparent);
  background-repeat: no-repeat;
  background-size: 100%;
  padding: 10px 70px;
}
@media screen and (max-width: 767px) {
.flow-list li {
    padding: 20px 10px;
}
}

.flow-free::before ,.flow-list li:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 75%);
  display: grid;
  place-items: center;
  width: 150px;
  height: 30px;
  clip-path: polygon(100% 0%, 100% 6px, 50% 100%, 0 6px, 0 0, 50% calc(100% - 6px));
}
 .flow-list li:not(:last-of-type)::after {
  background-image: linear-gradient(to right,#E300C5,#A86ADE,#00AAEA);
}
.flow-free::before {
  content: "無料";
  top: 0;
  left: 0;
  transform: translate(-30%, -25%);
  width: clamp(60.331px,calc(81.0935vw / 10),81.0935px);
  height: clamp(34.547px,calc(52.4383vw / 10),52.4383px);
  clip-path: polygon(15% 0, 100% 0, 85% 80%, 65% 80%, 65% 100%, 50% 80%, 0 80%);
  background-color: #D00080;
  color: #fff;
  font-size: clamp(16px,calc(20vw / 10),20px);
  font-weight: 700;
  padding-bottom: 10px;
}
@media screen and (max-width: 767px) {
  .flow-free::before {
      transform: translate(5%, -70%);
  }
}

.flow-list li.flow-list-contact {
  background-image: none;
  display: block;
  padding: 0;
}

.flow-list li.flow-list-contact .common-link a span {
  color: #000;
  width: auto;
}

.flow-icon {
  height: clamp(67.5px,calc(75vw / 10),75px);
  background-color: #F1E1FA;
  border-radius: 50%;
}
@media screen and (max-width: 767px) {
  .flow-icon {
      margin: auto;
  }
}

.flow-list h3 {
  display: grid;
  place-items: center;
  height: 100%;
}
.flow-list h3 {
  font-size: clamp(18px,calc(30vw / 10),30px);
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  .flow-list h3 {
    place-items: flex-start;
    align-items: center;
  }
}

.flow-list p {
  font-size: clamp(14px,calc(16vw / 10),16px);
  font-weight: 700;
  line-height: calc(21 / 14);
  display: inline-block;
  margin: auto auto auto 0;
  height: auto;
}

@media screen and (min-width: 768px) {
  .flow-text {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-auto-rows: auto;
    gap: 5px clamp(20px,calc(40vw / 10),40px);
  }
}
@media screen and (max-width: 767px) {
  .flow-text {
    display: grid;
    place-items: center;
    grid-auto-flow: row;
    height: 100%;
  }
}

.flow-text small {
  text-indent: -.5rem;
  padding-left: .5rem;
  line-height: 1.4;
}


.flow-design-list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(clamp(330px,calc(450vw / 10),450px),1fr));
  grid-auto-rows: auto;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: clamp(45px,calc(55vw / 10),55px);
}

.flow-design-list-item--pink {
  border: #D00080 2px solid;
}
.flow-design-list-item--blue {
  border: #1894DB 2px solid;
}

.flow-design-list-item--pink h3 {
  background-color: #D00080;
}
.flow-design-list-item--blue h3 {
  background-color: #1894DB;
}

.flow-design-list * {
  color: #fff;
}

.flow-design-list-item-icon {
  max-width: 117.5043px;
  max-height: 75px;
  height: 100%;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.flow-design-list-item-icon img {
    height: 100%;
}

.flow-design-list-item {
  max-width: 500px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: 1fr;
  grid-row: span 4;
  gap: 25px;
  padding-bottom: 33px;
}

.flow-design-list-item h3 {
  width: 100%;
  font-weight: 700;
  text-align: center;
  font-size: clamp(20px,calc(25vw / 10),25px);
  padding: 15px 0;
}

.rainbow-bg-text {
  color: #fff;
  font-size: clamp(18px,calc(25vw / 10),25px);
  font-weight: 700;
  line-height: calc(24 / 18);
  background-image: linear-gradient(to right,#E3007F,#00AAEA);
  text-align: center;
  padding: 5px 10px;
}

.flow-design-list-text {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  place-items: stretch;
  gap: 10px;
  padding: 0 clamp(20px,calc(25vw / 10),25px);
}

.flow-design-list-item-text {
  font-size: clamp(14px,calc(16vw / 10),16px);
  font-weight: 700;
  line-height: 2;
}

.flow-design-list-note {
  padding: 0 clamp(20px,calc(25vw / 10),25px);
  font-size: clamp(11px,calc(13vw / 10),13px);
  font-weight: 700;
}

.common-link--dl {
  margin: auto;
  width: 100%;
}
.common-link--dl::before {
  background-color: #1894DB;
  width: 100%;
}
/* .common-link--dl::after {
  background-color: #004FAA;
  width: 100%;
} */

.common-link--dl a {
  padding: 20px clamp(10px, calc(20vw / 10), 20px) 20px clamp(30px, calc(40vw / 10), 40px);
  padding-left: 55px;
  background-color: #1894DB;
  box-shadow: 0 5px 0 #004FAA;
}
.common-link--dl:hover a {
  box-shadow: 0 0 0 #004FAA;
}

.common-link--dl a span {
  font-size: clamp(18px,calc(20vw / 10),20px);
  font-weight: 700;
}
.common-link--dl:hover a span {
  color: rgba(255, 255, 255, .9);
  filter: drop-shadow(0 0 7px rgba(13,29,89,.3));
}

.common-link--dl a span::before {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 33.23 30.3"><g><path fill="%23ffffff" d="M20.16,10.91V.67C20.16,.3,19.86,0,19.49,0h-5.74C13.38,0,13.08,.3,13.08,.67V10.91c0,.37-.3,.67-.67,.67h-4.02c-.56,0-.87,.65-.52,1.09l8.22,10.18c.27,.33,.77,.33,1.04,0l8.22-10.18c.35-.44,.04-1.09-.52-1.09h-4.02c-.37,0-.67-.3-.67-.67Z"/><path fill="%23ffffff" d="M19.16,1V10.91c0,.92,.75,1.67,1.67,1.67h3.32l-7.53,9.31-7.53-9.31h3.32c.92,0,1.67-.75,1.67-1.67V1h5.08m.33-1h-5.74c-.37,0-.67,.3-.67,.67V10.91c0,.37-.3,.67-.67,.67h-4.02c-.56,0-.87,.65-.52,1.09l8.22,10.18c.13,.17,.33,.25,.52,.25s.39-.08,.52-.25l8.22-10.18c.35-.44,.04-1.09-.52-1.09h-4.02c-.37,0-.67-.3-.67-.67V.67c0-.37-.3-.67-.67-.67h0Z"/></g><g><path fill="%23ffffff" d="M29.17,16.18v9.26c0,.44-.35,.79-.79,.79H4.85c-.44,0-.79-.35-.79-.79v-9.26c0-.44-.35-.79-.79-.79H.79c-.44,0-.79,.35-.79,.79v13.32c0,.44,.35,.79,.79,.79h31.65c.44,0,.79-.35,.79-.79v-13.32c0-.44-.35-.79-.79-.79h-2.48c-.44,0-.79,.35-.79,.79Z"/><path fill="%23ffffff" d="M32.23,16.39v12.9H1v-12.9H3.06v9.05c0,.99,.8,1.79,1.79,1.79H28.38c.99,0,1.79-.8,1.79-1.79v-9.05h2.06m.21-1h-2.48c-.44,0-.79,.35-.79,.79v9.26c0,.44-.35,.79-.79,.79H4.85c-.44,0-.79-.35-.79-.79v-9.26c0-.44-.35-.79-.79-.79H.79C.35,15.39,0,15.75,0,16.18v13.32C0,29.94,.35,30.3,.79,30.3h31.65c.44,0,.79-.35,.79-.79v-13.32c0-.44-.35-.79-.79-.79h0Z"/></g></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: clamp(28px,calc(33vw / 10),33px);
  height: 30px;
  transform: translate(-15px, -50%);
}

.common-link--dl:hover a span::before {
  opacity: .9;
}

.flow-design-sales-point {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(300px, calc(330vw / 10), 330px), auto));
  justify-content: center;
  grid-auto-rows: auto;
  place-items: center;
  gap: 20px 3px;
  margin-bottom: 45px;
}

.flow-design-sales-point li {
  display: grid;
  place-items: center;
  clip-path: polygon(20px 0%, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
  background-color: rgba(255, 255, 255, .9);
  font-size: clamp(18px,calc(20vw / 10),20px);
  font-weight: 700;
  line-height: calc(30 / 20);
  color: #0D1D59;
  text-align: center;
  width: 100%;
  height: 100%;
  min-height: 100px;
  max-width: 400px;
  padding: 10px 35px;
}

.flow-support {
  text-align: center;
  padding-top: 30px;
}

.flow-support * { 
  color: #fff;
}

.flow-support .common-note {
  display: grid;
  place-items: center;
  justify-content: center;
  grid-template-columns: auto auto auto;
  gap: 20px;
  margin-bottom: clamp(25px, calc(35vw / 10), 35px) !important;
}

.flow-support .common-note::before ,.flow-support .common-note::after {
  content: "";
  width: 2px;
  height: 30px;
  background-color:#fff;
  transform: translateY(2.5px) rotate(-25deg);
}
.flow-support .common-note::after {
  transform: translateY(2.5px) rotate(25deg);
}

.common-note small {
  font-size: clamp(13px,calc(22vw / 10),22px);
}

.flow-support .rainbow-bg-text {
  display: inline-block;
  line-height: calc(52.5 / 30);
}

.flow-support__flow-support {
  margin-bottom: 13px !important;
}

.flow-support-text {
  font-size: clamp(14px,calc(20vw / 10),20px);
  font-weight: 700;
  line-height: calc(26 / 14);
  /* margin: clamp(20px,calc( 35vw / 10),35px) auto clamp(40px,calc(70vw / 10),70px) !important; */
}

.qa-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 20px;
  margin-bottom: clamp(55px,calc(95vw / 10),95px);
}

.qa-q ,.qa-a {
  position: relative;
  background-color: #000;
  display: grid;
  place-items: center;
  justify-content: flex-start;
  color: #fff;
  font-size: clamp(18px,calc(20vw / 10),20px);
  font-weight: 700;
}
.qa-q {
  min-height: 70px; 
  padding: 22px 85px 22px clamp(85px,calc(95vw / 10),95px);
}
.accordion-ac .qa-a {
  min-height: 70px;
  background-color: #fff;
  color: #000;
  padding: 22px 20px 22px clamp(85px, calc(95vw / 10), 95px);
  font-size: clamp(14px,calc(16vw / 10),16px);
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .qa-q {
    padding-right: 45px;
  }
  .qa-a {
    padding-right: 25px;
  }
}

.qa-q::before ,.qa-a::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 10px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 45 45"><circle fill="%23d00080" cx="22.5" cy="22.5" r="22.5"/><path fill="%23ffffff" d="M29.69,29.99l3.07,2.62-2.37,2.82-2.98-2.53c-1.41,1.06-3.17,1.57-5.22,1.57-4.96,0-8.45-3.01-8.45-9.76v-3.13c0-6.82,3.49-9.76,8.45-9.76s8.48,2.94,8.48,9.76v3.13c0,2.14-.35,3.87-.99,5.28Zm-11.46-5.28c0,4.22,1.38,5.98,3.97,5.98,.77,0,1.47-.16,2.02-.51l-2.5-2.14,2.43-2.85,1.89,1.66c.1-.64,.16-1.34,.16-2.14v-3.13c0-4.22-1.41-5.98-4-5.98s-3.97,1.76-3.97,5.98v3.13Z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  width: 45px;
  height: 45px;
}
.qa-a::before {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 45 45"><circle fill="%231894db" cx="22.5" cy="22.5" r="22.5"/><path fill="%23ffffff" d="M12.5,34.18l7.68-22.08h4.29l7.68,22.08h-4.77l-1.34-4.19h-7.39l-1.34,4.19h-4.8Zm7.33-7.97h4.99l-2.5-7.78-2.5,7.78Z"/></svg>');
}

.common-note {
  font-size: clamp(20px,calc(30vw / 10),30px);
  font-weight: 900;
  line-height: calc(45 / 30);
  text-align: center;
  color: #fff;
  margin-bottom: clamp(26px, calc(45vw / 10), 45px) !important;
}

.contactWrap {
  padding-top: clamp(20px,calc(45vw / 10),45px);
}

.accordion-trigger {
  position: relative;
  cursor: pointer;
}

.accordion-trigger::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translate(0,-50%);
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 25 25"><path fill="%23ffffff" d="M12.57,16.84c-.24,0-.47-.08-.66-.25l-5-4.42c-.41-.37-.45-1-.09-1.41s1-.45,1.41-.09l4.34,3.83,4.34-3.83c.41-.37,1.05-.33,1.41,.09,.37,.41,.33,1.05-.09,1.41l-5,4.42c-.19,.17-.43,.25-.66,.25Z"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  width: 25px;
  height: 25px;
  background-color: #D00080;
  border-radius: 50%;
  transition: .3s;
}

.accordion-trigger:hover::after {
  transform: translate(0,-50%) scale(1.2);
}

.accordion-ac .accordion-trigger::after {
  transform: translate(0,-50%) rotate(180deg) scale(1.2);
}

.follow-link {
  opacity: 0;
  visibility: hidden;
  z-index: 50;
  position: fixed;
  right: 0;
  background-color: #FFF70F;
  border-radius: 20px 0 0 20px;
  display: grid;
  grid-template-columns: auto;
  grid-auto-rows: auto;
  gap: 10px;
  padding: 30px 0;
  font-size: 21px;
  font-weight: 700;
  transition: .3s;
  place-items: center;
}
@media screen and (min-width: 768px) {
  .follow-link {
    min-width: 80px;
    min-height: 420px;
    top: 50%;
    writing-mode: vertical-lr;
    grid-auto-flow: column;
    transform: translateY(-50%);
    box-shadow: 0 15px 0 #878308;
  }
  .follow-link:hover {
    top: calc(50% + 15px);
    box-shadow: 0 0px 0 #878308;
  }
}
@media screen and (max-width: 767px) {
  .follow-link {
    font-size: min(calc(20vw / 3.75),20px);
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    grid-template-columns: auto auto;
    width: calc(355% / 3.75);
    max-width: 400px;
    border-radius: 20px 20px 0 0;
    justify-content: center;
    padding: 10px 15px;
    min-height: 70px;
  }
}

.follow-link:hover {
  color: rgba(0, 0, 0, .6);
  filter: drop-shadow(0 0 7px rgba(255,247,15,.9));
}

.follow-link::before ,.follow-link::after {
  content:"";
  width: 32px;
  height: 23px;
  background-image: url(../images/led_bracelet/icon_mail.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transition: .3s;
}
.follow-link::after {
  width: 20px;
  height: 20px;
  background-image: url(../images/led_bracelet/icon_arrow.svg);
}
.follow-link:hover::before ,.follow-link:hover::after {
  opacity: .8;
}
@media screen and (max-width: 767px) {
.follow-link::before ,.follow-link::after {
  content:"";
  width: 25px;
  height: 20px;
}
.follow-link::after {
  content: none;
}
}

@media screen and (max-width: 767px) {
.goTop {
    bottom: 5em;
}
}