:root {
  --white-100: #ffffff;
  --neutrals-050: #fefaef;
  --neutrals-100: #f3e1b1;
  --neutrals-200: #bcccdc;
  --neutrals-300: #9eb2c7;
  --neutrals-500: #617d98;
  --neutrals-700: #324d67;
  --neutrals-900: #102a42;
  --yellow-100: #fceec5;
  --yellow-400: #f7d06e;
  --yellow-700: #a27c1a;
  --pink-500: #921482;
  --green-050: #ecfdf5;
  --green-600: #059669;
  --main-wrap: 390px;
  --link: #1a73e8;
  --line-height-sm: 1.35 --line-height-md: 1.5
}
*, *:after, *:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}
html {
  scroll-behavior: smooth
}
img, picture {
  display: block;
  max-width: 100%;
  height: auto
}
dl, dt, dd, ul, li {
  list-style: none
}
button, input, textarea {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  outline: 0;
  background-color: transparent
}
a {
  color: var(--link);
  cursor: pointer;
  text-decoration: none;
  background-color: transparent
}
html {
  font-size: 62.5%;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif
}
body {
  font-size: 1.4rem;
  line-height: var(--line-height-md);
  color: var(--neutrals-700);
  background-color: var(--neutrals-050)
}
#layout-wrap {
  max-width: var(--main-wrap);
  margin: 0 auto
}
header {
  width: 100%;
  margin: 0 auto;
  background-color: var(--white-100)
}
header .logo {
  height: 40px;
  margin: 0 auto;
  padding: 0 12px
}
header .logo img {
  height: 40px;
  margin: 0 auto
}
footer {
  background-color: var(--neutrals-900);
  width: 100%;
  height: 120px;
  display: grid;
  grid-gap: 16px;
  justify-content: center
}
footer nav {
  display: flex;
  align-items: flex-end;
  grid-gap: 16px
}
footer nav button {
  font-size: 1.2rem;
  color: var(--neutrals-050)
}
footer .copyright {
  font-size: 1.2rem;
  color: var(--neutrals-200);
  text-align: center
}
.main-visual {
  position: relative;
  overflow: hidden
}
.main-visual .top, .main-visual .bottom {
  display: block;
  height: 200px;
  background-size: cover
}
.main-visual .title-belt {
  background-color: #fff;
  text-align: center;
  position: absolute;
  top: calc(50% - 10px);
  left: -8px;
  transform: translateY(-50%) rotate(-5deg);
  width: calc(100% + 16px);
  padding: 10px 0;
  font-weight: bold;
  font-size: 2.1rem
}
.main-visual .title-belt strong {
  color: var(--pink-500)
}
#services-area {
  margin: 40px auto 0
}
#services-area .title-wrap {
  background-color: var(--white-100);
  padding: 40px 0 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
}
#services-area .services-area-title {
  position: relative;
  width: fit-content;
  width: -moz-fit-content;
  margin: 0 auto
}
#services-area .services-area-title .services-title-text {
  position: relative;
  margin: 0 auto;
  height: 32px;
  padding: 0 20px;
  font-size: 1.6rem;
  border-radius: 16px;
  line-height: 1;
  color: var(--white-100);
  background-color: var(--pink-500);
  display: flex;
  justify-content: center;
  align-items: center
}
#services-area .services-area-title .services-title-svg {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  fill: var(--pink-500)
}
.services {
  width: 100%;
  margin: 0 auto 40px;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--white-100);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
}
.services:nth-of-type(1) {
  border-radius: 0 0 8px 8px
}
.services .services-title {
  margin: 10px auto
}
.services .services-title .name {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1
}
.services .services-title .copy {
  font-size: 1.2rem;
  margin-top: 6px;
  padding: 0 0 0 2px
}
.services .score-wrap {
  margin: 12px auto;
  display: grid;
  grid-gap: 12px;
  grid-template-columns: max-content auto;
  align-items: center
}
.services .score-wrap .score {
  padding: 0 8px;
  border-radius: 8px;
  color: var(--yellow-700);
  font-size: 1.3rem;
  background-color: var(--yellow-100);
  width: fit-content;
  width: -moz-fit-content
}
.services .tags {
  display: flex;
  flex-wrap: nowrap;
  grid-gap: 8px;
  margin: 12px auto;
  overflow-x: scroll;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none
}
.services .tags::-webkit-scrollbar {
  display: none
}
.services .tags li {
  padding: 0 12px;
  background-color: var(--green-050);
  border-radius: 2px;
  font-size: 1.3rem;
  color: var(--green-600)
}
.services .points {
  margin: 12px auto;
  counter-reset: count 0
}
.services .points li {
  display: flex;
  align-items: center;
  margin: 6px auto
}
.services .points li p:not(.counter) {
  padding-left: 12px;
  font-size: 1.5rem
}
.services .points li p:not(.counter) strong {
  color: var(--pink-500);
  text-decoration: underline
}
.services .points li .counter {
  font-size: 1rem;
  color: var(--pink-500);
  text-align: center;
  padding-right: 12px;
  border-right: 1px solid var(--neutrals-200)
}
.services .points li .counter span {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  display: block
}
.services .specTable .tbl1 {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 12px auto
}
.services .specTable .tbl1 th, .services .specTable .tbl1 td {
  padding: 8px 0;
  border: 1px solid var(--neutrals-100);
  text-align: center;
  vertical-align: middle
}
.services .specTable .tbl1 th {
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 400;
  color: var(--neutrals-500);
  background-color: var(--neutrals-050)
}
.services .specTable .tbl1 td {
  font-size: 1.4rem;
  line-height: var(--line-height-sm)
}
.services .specTable .tbl1 td .jobType li {
  margin: 4px 0 0 40px;
  text-align: left
}
.services .specTable .tbl1 td .jobType li span {
  position: relative;
  padding-left: 20px
}
.services .specTable .tbl1 td .jobType li span::before {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 16px;
  height: 16px
}
.services .specTable .tbl1 td .jobType1::before {
  background: url(images/01.png) no-repeat;
  background-size: contain
}
.services .specTable .tbl1 td .jobType2::before {
  background: url(images/02.png) no-repeat;
  background-size: contain
}
.services .specTable .tbl1 td .jobType3::before {
  background: url(images/03.png) no-repeat;
  background-size: contain
}
.services .specTable .tbl1 td .jobType4::before {
  background: url(images/04.png) no-repeat;
  background-size: contain
}
.services .specTable .tbl2 {
  width: 100%;
  font-size: 85%;
  border-spacing: 0 10px
}
.services .specTable .tbl2 .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 5px
}
.services .specTable .tbl2 dl {
  width: 49.5%;
  border: 1px solid var(--neutrals-100)
}
.services .specTable .tbl2 dl dt {
  background-color: var(--neutrals-050);
  text-align: center;
  padding: 4px 0;
  color: var(--neutrals-500);
  border-bottom: 1px solid var(--neutrals-100)
}
.services .specTable .tbl2 dl dd {
  text-align: center;
  padding: 6px 0
}
.services .specTable .tbl2 dl dd.scoreNum {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 6px;
  min-height: 30px
}
.services .specTable .tbl2 dl dd .rate {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 14px;
  font-size: 14px;
  text-align: left
}
.services .specTable .tbl2 dl dd .rate::before, .services .specTable .tbl2 dl dd .rate::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  display: inline-block;
  height: 14px;
  line-height: 14px
}
.services .specTable .tbl2 dl dd .rate::before {
  color: #fffbef
}
.services .specTable .tbl2 dl dd .rate::after {
  color: #FFD739;
  overflow: hidden;
  white-space: nowrap
}
.services .specTable .tbl2 dl dd .rate00::after {
  width: 0
}
.services .specTable .tbl2 dl dd .rate05::after {
  width: 7px
}
.services .specTable .tbl2 dl dd .rate10::after {
  width: 14px
}
.services .specTable .tbl2 dl dd .rate15::after {
  width: 21px
}
.services .specTable .tbl2 dl dd .rate20::after {
  width: 28px
}
.services .specTable .tbl2 dl dd .rate25::after {
  width: 35px
}
.services .specTable .tbl2 dl dd .rate30::after {
  width: 42px
}
.services .specTable .tbl2 dl dd .rate35::after {
  width: 49px
}
.services .specTable .tbl2 dl dd .rate40::after {
  width: 56px
}
.services .specTable .tbl2 dl dd .rate45::after {
  width: 63px
}
.services .specTable .tbl2 dl dd .rate50::after {
  width: 70px
}
.services .specTable .tbl2 dl dd span.flg1, .services .specTable .tbl2 dl dd span.flg2, .services .specTable .tbl2 dl dd span.flg3 {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: middle;
  margin-right: 4px
}
.services .specTable .tbl2 dl dd span.flg1 {
  background: url(images/06.png) no-repeat;
  background-size: contain
}
.services .specTable .tbl2 dl dd span.flg2 {
  background: url(images/07.png) no-repeat;
  background-size: contain
}
.services .specTable .tbl2 dl dd span.flg3 {
  background: url(images/08.png) no-repeat;
  background-size: contain
}
.services .toggle {
  border: 1px solid var(--neutrals-100)
}
.services .toggle dt {
  display: grid;
  grid-template-columns: 24px 1fr 8px;
  grid-gap: 8px;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  font-size: 1.4rem
}
.services .toggle dt::before {
  display: block;
  height: 24px;
  width: 24px
}
.services .toggle dt::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid var(--neutrals-200);
  border-right: 1px solid var(--neutrals-200);
  transform: rotate(225deg) translateY(-4px);
  transition: all .3s
}
.services .toggle dd {
  padding: 20px 16px;
  display: none
}
.services .toggle.cases dt::before {
  content: "";
  background-image: url("images/icon3.svg")
}
.services .toggle.reviews {
  margin: 12px auto
}
.services .toggle.reviews dt::before {
  content: "";
  background-image: url("images/icon4.svg")
}
.services .toggle.reviews .reviews-inner {
  display: grid;
  grid-gap: 0 8px;
  grid-template-areas: "icon age date""text text text";
  grid-template-columns: 40px auto 1fr;
  align-items: center
}
.services .toggle.reviews .reviews-inner:not(:nth-child(1)) {
  border-top: 1px solid var(--neutrals-050);
  margin-top: 24px;
  padding-top: 24px
}
.services .toggle.reviews .reviews-inner .icon {
  grid-area: icon;
  border: 1px solid var(--neutrals-700);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center
}
.services .toggle.reviews .reviews-inner .icon svg {
  width: 24px;
  height: 24px
}
.services .toggle.reviews .reviews-inner .age {
  grid-area: age
}
.services .toggle.reviews .reviews-inner .date {
  grid-area: date;
  font-size: 1.2rem;
	display: none
}
.services .toggle.reviews .reviews-inner .text {
  grid-area: text;
  margin-top: 8px
}
.services .toggle.isActive dt {
  border-bottom: 1px solid var(--neutrals-050)
}
.services .toggle.isActive dt::after {
  transform: rotate(45deg) translateY(-4px)
}
.services .toggle:first-of-type {
  border-radius: 8px 8px 0 0;
  border-bottom: none
}
.services .toggle:last-of-type {
  border-radius: 0 0 8px 8px
}
.services .toggle:only-of-type {
  border: 1px solid var(--neutrals-100);
  border-radius: 8px
}
.services .cta {
  margin: 12px auto 4px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--neutrals-500);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-gap: 8px
}
.services .cta::before {
  content: '＼'
}
.services .cta::after {
  content: '／'
}
.services .caution {
  margin: 12px auto 0;
  font-size: 1.1rem;
  color: var(--neutrals-500)
}
.services.num1 .services-title, .services.num2 .services-title, .services.num3 .services-title {
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: 76px 1fr;
  grid-column-gap: 12px;
  align-items: center
}
.services.num1 .services-title .name, .services.num2 .services-title .name, .services.num3 .services-title .name {
  grid-column: 2 / 3;
  grid-row: 1 / 2
}
.services.num1 .services-title .copy, .services.num2 .services-title .copy, .services.num3 .services-title .copy {
  grid-column: 2 / 3;
  grid-row: 2 / 3
}
.services.num1 .services-title::before, .services.num2 .services-title::before, .services.num3 .services-title::before {
  content: "";
  display: block;
  width: 76px;
  height: 50px;
  grid-column: 1 / 2;
  grid-row: 1 / 3
}
.services.num1 .services-title::before {
  background: url("images/rank1.jpeg");
  background-size: contain
}
.services.num2 .services-title::before {
  background: url("images/rank2.jpeg");
  background-size: contain
}
.services.num3 .services-title::before {
  background: url("images/rank3.jpeg");
  background-size: contain
}
.conclusion {
  background: var(--white-100)
}
.conclusion .conclusion-text {
  margin: 20px auto 0
}
.conclusion .conclusion-header {
  position: relative
}
.conclusion .conclusion-header .base-image::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0, #fff 90%)
}
.conclusion .conclusion-header .header .header-label {
  font-size: 1.3rem;
  color: var(--neutrals-900);
  margin: 0 0 0 4px;
  padding: 0 4px;
  border: 1px solid var(--neutrals-700)
}
.conclusion .conclusion-header .header .header-text {
  margin: 0 4px 0 4px;
  font-size: 1.3rem;
  color: var(--neutrals-900)
}
.conclusion .conclusion-header .header hr {
  margin: 8px auto;
  border-bottom: 1px solid var(--white-100);
  border-top: none;
  width: 98%
}
.conclusion .conclusion-header .header .header-title {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 1px var(--neutrals-900);
  text-stroke: 1px var(--neutrals-900);
  text-shadow: 1px 1px 0 var(--neutrals-100);
  color: var(--white-100)
}
.conclusion .conclusion-header .icon-wreath {
  width: 72px;
  height: 72px;
  filter: drop-shadow(1px 1px 1px var(--neutrals-300));
  fill: var(--neutrals-050);
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}
.conclusion .conclusion-header .icon-wreath.wreathL {
  left: 24px
}
.conclusion .conclusion-header .icon-wreath.wreathR {
  right: 24px
}
.conclusion .conclusion-header .header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  width: -moz-fit-content
}
.conclusion .conclusion-content {
  margin: 0 auto;
  padding: 0 12px 40px;
  z-index: 10;
  counter-reset: number 0
}
.conclusion .conclusion-content .point-title {
  position: relative;
  margin: 20px auto 40px
}
.conclusion .conclusion-content .point-title p {
  position: relative;
  margin: 0 auto;
  width: fit-content;
  width: -moz-fit-content;
  height: 32px;
  padding: 0 20px;
  font-size: 1.6rem;
  border-radius: 16px;
  line-height: 1;
  color: var(--white-100);
  background-color: var(--pink-500);
  display: flex;
  justify-content: center;
  align-items: center
}
.conclusion .conclusion-content .point-title svg {
  position: absolute;
  top: -20px;
  right: 0;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  fill: var(--pink-500)
}
.conclusion .conclusion-content .clinic-points {
  position: relative;
  padding: 0 0 0 48px;
  margin-bottom: 40px
}
.conclusion .conclusion-content .clinic-points::before {
  position: absolute;
  counter-increment: number 1;
  content: counter(number) " ";
  top: 4px;
  left: 52px;
  font-size: 4rem;
  font-weight: 700;
  color: var(--pink-500);
  line-height: 1;
  border-bottom: 2px solid
}
.conclusion .conclusion-content .clinic-points .base-image img {
  aspect-ratio: 800/400;
  object-fit: cover
}
.conclusion .conclusion-content .clinic-points .title {
  margin: 12px 0 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--neutrals-900)
}
.conclusion .conclusion-content .clinic-points .text {
  margin: 12px 0 0;
  font-size: 1.4rem;
  color: #333333
}
.conclusion .conclusion-content .clinic-points .text strong {
  font-weight: 700;
  color: var(--pink-500);
  text-decoration: underline
}
.conclusion .conclusion-content .clinic-points:first-of-type::after {
  content: "Recommend Point";
  position: absolute;
  top: -42px;
  left: 12px;
  width: max-content;
  transform: rotate(90deg);
  transform-origin: center left;
  color: var(--neutrals-100);
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  z-index: 2
}
.compa-chart {
  background: var(--white-100);
  padding: 40px 0 0
}
.compa-chart .compa-title {
  position: relative;
  width: fit-content;
  width: -moz-fit-content;
  margin: 20px auto
}
.compa-chart .compa-title p {
  position: relative;
  margin: 0 auto;
  height: 32px;
  padding: 0 20px;
  font-size: 1.6rem;
  border-radius: 16px;
  line-height: 1;
  color: var(--white-100);
  background-color: var(--pink-500);
  display: flex;
  justify-content: center;
  align-items: center
}
.compa-chart .compa-title svg {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  fill: var(--pink-500)
}
.compa-chart .compa-tbl-wrap {
  overflow: auto
}
.compa-chart .compa-tbl-wrap #compa-tbl {
  margin: 16px auto 0;
  border: 1px solid #dae2ec;
  border-collapse: collapse;
  table-layout: fixed;
  width: var(--main-wrap)
}
.compa-chart .compa-tbl-wrap #compa-tbl th, .compa-chart .compa-tbl-wrap #compa-tbl td {
  border: 1px solid #dae2ec;
  text-align: center;
  font-weight: normal;
  font-size: 1.1rem;
  padding: 8px
}
.compa-chart .compa-tbl-wrap #compa-tbl th {
  background-color: #f1f5f8;
  color: #617d98;
  width: 56px;
  word-wrap: break-word
}
.compa-chart .compa-tbl-wrap #compa-tbl td {
  line-height: 1.2;
  vertical-align: baseline;
  width: 120px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .logo-img {
  height: 74px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .logo-img img {
  width: auto;
  height: 100%;
  object-fit: contain;
  margin: 0 auto
}
.compa-chart .compa-tbl-wrap #compa-tbl td .links {
  margin-top: 6px;
  display: block
}
.compa-chart .compa-tbl-wrap #compa-tbl td .class1 {
  color: #617d98
}
.compa-chart .compa-tbl-wrap #compa-tbl td .class2 {
  color: #f59e0b
}
.compa-chart .compa-tbl-wrap #compa-tbl td .class3 {
  color: #c86262
}
.compa-chart .compa-tbl-wrap #compa-tbl td .icon1, .compa-chart .compa-tbl-wrap #compa-tbl td .icon2, .compa-chart .compa-tbl-wrap #compa-tbl td .icon3 {
  width: 32px;
  height: 32px;
  position: relative;
  margin: 0 auto 6px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .icon1 {
  border-bottom: 32px solid #617d98;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent
}
.compa-chart .compa-tbl-wrap #compa-tbl td .icon1::before {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translate(-50%, 0);
  border-bottom: 20px solid #fff;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent
}
.compa-chart .compa-tbl-wrap #compa-tbl td .icon2 {
  border: 4px solid #f59e0b;
  border-radius: 50%
}
.compa-chart .compa-tbl-wrap #compa-tbl td .icon3 {
  border: 3px solid #c86262;
  border-radius: 50%
}
.compa-chart .compa-tbl-wrap #compa-tbl td .icon3::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #c86262;
  border-radius: 50%
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 14px;
  font-size: 14px;
  text-align: left
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate::before, .compa-chart .compa-tbl-wrap #compa-tbl td .rate::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  display: inline-block;
  height: 14px;
  line-height: 14px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate::before {
  color: #fffbef
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate::after {
  color: #FFD739;
  overflow: hidden;
  white-space: nowrap
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate00::after {
  width: 0
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate05::after {
  width: 7px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate10::after {
  width: 14px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate15::after {
  width: 21px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate20::after {
  width: 28px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate25::after {
  width: 35px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate30::after {
  width: 42px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate35::after {
  width: 49px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate40::after {
  width: 56px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate45::after {
  width: 63px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .rate50::after {
  width: 70px
}
.compa-chart .compa-tbl-wrap #compa-tbl td .link-btn p {
  color: var(--white-100)
}
.howto {
  background: var(--white-100);
  padding: 40px 0 0
}
.howto .howto-title {
  position: relative;
  margin: 0 auto 40px
}
.howto .howto-title p {
  position: relative;
  margin: 0 auto;
  width: fit-content;
  width: -moz-fit-content;
  height: 32px;
  padding: 0 20px;
  font-size: 1.6rem;
  border-radius: 16px;
  line-height: 1;
  color: var(--white-100);
  background-color: var(--pink-500);
  display: flex;
  justify-content: center;
  align-items: center
}
.howto .howto-title svg {
  position: absolute;
  top: -20px;
  right: 0;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  fill: var(--pink-500)
}
.howto .howto-content {
  margin: 0 auto;
  padding: 0 12px 12px;
  z-index: 10;
  counter-reset: number 0
}
.howto .howto-content .clinic-howto {
  position: relative;
  padding: 0 0 0 48px;
  margin-bottom: 40px
}
.howto .howto-content .clinic-howto::before {
  position: absolute;
  counter-increment: number 1;
  content: counter(number) " ";
  top: 4px;
  left: 52px;
  font-size: 4rem;
  font-weight: 700;
  color: var(--pink-500);
  line-height: 1;
  border-bottom: 2px solid
}
.howto .howto-content .clinic-howto .base-image img {
  aspect-ratio: 800/400;
  object-fit: cover
}
.howto .howto-content .clinic-howto .title {
  margin: 12px 0 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--neutrals-900)
}
.howto .howto-content .clinic-howto .text {
  margin: 12px 0 0;
  font-size: 1.4rem;
  color: #333333
}
.howto .howto-content .clinic-howto .text strong {
  font-weight: 700;
  color: var(--pink-500);
  text-decoration: underline
}
.howto .howto-content .clinic-howto:first-of-type::after {
  content: "How to choose";
  position: absolute;
  top: -42px;
  left: 12px;
  width: max-content;
  transform: rotate(90deg);
  transform-origin: center left;
  color: var(--neutrals-100);
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  z-index: 2
}
.scroll-top {
  margin: 80px auto;
  text-align: center
}
.scroll-top svg {
  fill: var(--neutrals-300);
  width: 32px;
  height: 32px
}
.scroll-top .text {
  color: var(--neutrals-300);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 8px auto 0
}
#drawer {
  max-width: 420px;
  width: 100%;
  max-height: calc(90% - 30px);
  position: fixed;
  bottom: calc((90% - 30px) * -1);
  left: 50%;
  transform: translateX(-50%) translate3d(0, 0, 0);
  box-shadow: 0 -2px 20px 0 rgba(0, 0, 0, calc(1 * 0.4));
  padding: 0;
  border-radius: 10px 0 0 0;
  z-index: 20;
  background-color: var(--neutrals-050);
  overflow-y: auto;
  display: none
}
#drawer.isActive {
  bottom: 0
}
#drawer .drawer-header {
  padding: 0 12px;
  height: 56px;
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  background-color: var(--white-100);
  border-bottom: 1px solid var(--neutrals-050);
  border-radius: inherit
}
#drawer .drawer-header .button-close {
  stroke: var(--neutrals-700);
  width: 16px;
  height: 16px
}
#drawer .drawer-header .title {
  font-size: 1.5rem;
  text-align: center
}
#drawer .drawer-content-wrap {
  padding: 0 12px 120px
}
#drawer .drawer-content-wrap .drawer-content {
  background-color: var(--white-100);
  padding: 0 12px 12px;
  margin-top: 24px
}
#drawer .drawer-content-wrap .drawer-content h2 {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  font-size: 1.6rem;
  border-bottom: 1px solid var(--neutrals-050)
}
#drawer .drawer-content-wrap .drawer-content h3 {
  margin-top: 16px;
  font-size: 1.4rem
}
#drawer .drawer-content-wrap .drawer-content .content-inner {
  margin: 12px auto 0
}
#drawer .drawer-content-wrap .drawer-content .content-inner table {
  border-collapse: collapse;
  border-spacing: 0
}
#drawer .drawer-content-wrap .drawer-content .content-inner table th, #drawer .drawer-content-wrap .drawer-content .content-inner table td {
  border-top: 2px solid var(--white-100);
  padding: 8px
}
#drawer .drawer-content-wrap .drawer-content .content-inner table th {
  width: 6em;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--neutrals-500);
  background-color: var(--neutrals-050)
}
#drawer .drawer-content-wrap .drawer-content .content-inner table td {
  font-size: 1.3rem
}
#drawer .drawer-content-wrap .drawer-content .content-inner p {
  margin: 8px auto 0;
  font-size: 1.4rem
}
#cover-mask {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  -webkit-transition: .3s;
  transition: .3s
}
#cover-mask.isActive {
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  visibility: visible;
  z-index: 10
}
.link-btn {
  position: relative;
  width: 100%;
  height: 64px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 4px;
  background-image: linear-gradient(120deg, #f093fb, #f5576c);
  box-shadow: 0 4px 8px 0 rgba(19, 12, 2, 0.2)
}
.link-btn::before {
  position: absolute;
  content: "";
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  transition: .2s;
  -webkit-animation: shiny 3s ease-in-out infinite;
  animation: shiny 3s ease-in-out infinite
}
.link-btn span {
  display: flex;
  align-items: center;
  grid-gap: 12px;
  font-size: 2rem;
  font-weight: 700;
  color: var(--white-100);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  line-height: 1
}
.link-btn span::after {
  content: "";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-color: transparent transparent transparent var(--white-100);
  border-width: 6px 0px 6px 6px
}
#voices-changedjobs {
  margin: 40px auto 0;
  background-color: var(--white-100);
  padding: 40px 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
}
#voices-changedjobs .voices-area-title {
  position: relative;
  width: fit-content;
  width: -moz-fit-content;
  margin: 0 auto
}
#voices-changedjobs .voices-area-title .voices-title-text {
  position: relative;
  margin: 0 auto;
  height: 32px;
  padding: 0 20px;
  font-size: 1.6rem;
  border-radius: 16px;
  line-height: 1;
  color: var(--white-100);
  background-color: var(--pink-500);
  display: flex;
  justify-content: center;
  align-items: center
}
#voices-changedjobs .voices-area-title .voices-title-svg {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  fill: var(--pink-500)
}
#voices-changedjobs .eyecatch {
  margin: 20px auto
}
#voices-changedjobs .voices-title {
  margin: 12px 0 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--neutrals-900)
}
#voices-changedjobs .voices-text {
  margin: 12px 0 0;
  font-size: 1.4rem;
  color: #333333
}
#voices-changedjobs .voices-text strong {
  font-weight: 700;
  color: var(--pink-500);
  text-decoration: underline
}
@-webkit-keyframes shiny {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: .5
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1
  }
  to {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0
  }
}
.rate {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 16px;
  font-size: 16px
}
.rate::before, .rate::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  display: inline-block;
  height: 16px;
  line-height: 16px
}
.rate::before {
  color: var(--neutrals-100)
}
.rate::after {
  color: var(--yellow-400);
  overflow: hidden;
  white-space: nowrap
}
.rate0::after {
  width: 0
}
.rate1::after {
  width: 16px
}
.rate2::after {
  width: 32px
}
.rate3::after {
  width: 48px
}
.rate4::after {
  width: 64px
}
.rate5::after {
  width: 80px
}
/*# sourceMappingURL=style.css.map */