@charset "UTF-8";

textarea {
  width: 100%;
  height: 140px;
  border: 1px solid #000;
}

article a {
  color: #1a0dab;
  text-decoration: underline;
  transition: .4s;
}

article a:hover {
  opacity: .6;
}

.article_p {
  line-height: 1.6;
  font-size: clamp(0.625rem, 3.68vw, 0.875rem);
}

.article_p * {
  word-break: break-all;
}

h2 {
  padding: 0.5rem 1rem;
  color: #fff;
  font-weight: bold;
  font-size: clamp(0.625rem, 4.73vw, 1.125rem);
  background-color: var(--primary);
  border-radius: 0.375rem;
  margin: 3rem 0 1rem;
}

h3 {
  padding: 0.25rem 0 0.25rem 1rem;
  margin: 2rem 0 1rem;
  color: var(--primary);
  font-size: clamp(0.625rem, 4.73vw, 17px);
  font-weight: bold;
  border-left: 4px solid var(--primary);
}

h2+h3 {
  margin-top: 0;
}

h4 {
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  padding-bottom: 0.5rem;
  margin: 2rem 0 1rem;
  border-bottom: 1px solid #e5e7eb;
  color: var(--primary);
}

h3+h4 {
  margin-top: 0;
}

.ttl-sub {
  position: relative;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  font-weight: bold;
  padding-bottom: 0.5rem;
  margin: 2rem 0 1rem;
}

.ttl-sub::before {
  position: absolute;
  bottom: 0;
  content: "";
  display: block;
  width: 8.333333%;
  height: 1px;
  background-color: currentColor;
}

.ttl-check {
  position: relative;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  font-weight: bold;
  padding-left: 1.8rem;
  padding-bottom: 0.5rem;
  margin: 2rem 0 .4rem;
}

.ttl-check::before {
  position: absolute;
  left: 0;
  top: .3em;
  content: "";
  display: block;
  width: 1.2rem;
  aspect-ratio: 1 / 1;
  background: url(../img/check-icon.png) center center / contain no-repeat;
}

.color-pink {
  color: var(--primary);
  font-weight: bold;
}

.color-purple {
  color: var(--purple);
  font-weight: bold;
}

.text-min {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: rgb(107 114 128);
  font-size: clamp(0.625rem, 2.63vw, 11px);
}

.article_p *:has(+.text-min) {
  margin-bottom: 0;
}

.bold {
  font-weight: bold;
}

.marker {
  font-weight: bold;
  background: linear-gradient(transparent 70%, #f1d6d6 70%);
}


.img-100 {
  margin-bottom: 1.5rem;
}

.table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
}

.table thead th {
  background: #ffc9d2;
}

.table tbody th {
  background: #f0f0f1;
}

.table th,
.table td {
  border: 1px dotted #000;
  padding: 0.5em;
  text-align: center;
  vertical-align: middle;
}

.table th>:last-child,
.table td>:last-child {
  margin-bottom: 0;
}

.table td:has(.c-btn) {
  padding: 0.9em;
}

.table td:has(li) {
  text-align-last: left;
}

.table a:has(img) {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.table img {
  margin-left: auto;
  margin-right: auto;
}

.box {
  padding: 1.4rem;
  margin-bottom: 1.5rem;
}

.box>:first-child {
  margin-top: 0;
}

.box>:last-child {
  margin-bottom: 0;
}

.textbox {
  border: 1px solid var(--primary);
}

.box[data-box="bg-p"] {
  border: none;
  background: var(--pinklight);
}

.box[data-box="bg-g"] {
  border: none;
  background: var(--neutral);
}


article ul:not([class]),
article ol:not([class]),
.check-list {
  margin-bottom: 1.5rem;
}

article ul:not([class]) li {
  position: relative;
  padding-left: calc(1em + 0.5rem);
}

article ul:not([class]) li::before {
  position: absolute;
  top: 0.3rem;
  left: 0;
  content: "";
  display: block;
  width: 1em;
  aspect-ratio: 1 / 1;
  background: var(--primary);
  border-radius: 50%;
}

article ol:not([class]) li {
  list-style-type: decimal;
  margin-left: 1.4em;
}

article ul:not([class]) li+li,
article ol:not([class]) li+li,
.check-list li+li {
  margin-top: 0.25rem;
}

.check-list li {
  position: relative;
  padding-left: calc(1em + 0.5rem);
}

.check-list>li::before {
  position: absolute;
  left: 0;
  top: 0.3rem;
  content: '';
  display: block;
  width: 1em;
  aspect-ratio: 1 / 1;
  background: url(../img/check-icon.png) center center / contain no-repeat;
}


.info-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  word-break: break-all;
  border: 1px dotted #000;
}

.info-list dt {
  width: 30%;
  padding: 1em 1.2em;
  border-bottom: 1px dotted #000;
  font-weight: 700;
  background: #ffc9d2;
}

.info-list dd {
  width: 70%;
  padding: 1em 1.2em;
  border-bottom: 1px dotted #000;
}

.info-list dt:last-of-type {
  border-bottom: none;
}

.info-list dd:last-of-type {
  border-bottom: none;
}

.info-list dt>:first-child,
.info-list dd>:first-child {
  margin-top: 0;
}

.info-list dt>:last-child,
.info-list dd>:last-child {
  margin-bottom: 0;
}


.list_01 {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list_01-item {
  border: 1px dotted #000;
  border-radius: 4px;
  background-color: var(--neutral);
  padding: 1em 1.2em;
  display: table;
  width: 100%;
}

.list_01-item p {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0;
}

.list_01-item p::before {
  content: '';
  position: absolute;
  top: 0.3em;
  left: 0;
  display: block;
  width: 1em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  margin-right: 8px;
  background-color: #ffc9d2;
}

.list_02 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.list_02 li {
  display: flex;
  align-items: center;
  padding: 0.5rem 0 0.75rem 1rem;
  border-left: 4px solid #ffc9d2;
}

.flexbox {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 1.5rem;
  text-align: justify;
}

.flexbox img {
  width: 50%;
  height: auto;
}


article .flexbox-inner>:first-child {
  margin-top: 0;
}

article .flexbox-inner>:last-child {
  margin-bottom: 0;
}

.floatbox {
  margin-bottom: 1.5rem;
  text-align: justify;
}

.floatbox::after {
  content: "";
  display: table;
  clear: both;
}

.floatbox img {
  float: left;
  width: 100%;
  max-width: 50%;
  height: auto;
  margin: 0 16px 10px 0;
}

article .floatbox-inner>:first-child {
  margin-top: 0;
}

article .floatbox-inner>:last-child {
  margin-bottom: 0;
}


.arrow {
  width: fit-content;
  margin: 1.2rem auto;
}

.arrow::before {
  content: '';
  display: block;
  color: #333;
  line-height: 1;
  width: 30px;
  height: 30px;
  border: 3px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

.arrow_min {
  width: fit-content;
  margin: .6rem auto;
}

.arrow_min::before {
  content: '';
  display: block;
  color: #333;
  line-height: 1;
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}

.quote {
  position: relative;
  padding: 1.4rem 1.4rem 1.4rem 3.4rem;
  font-style: italic;
  color: #707070;
}

.quote::before {
  position: absolute;
  left: 1rem;
  top: .8rem;
  content: "";
  display: block;
  width: 1.8rem;
  aspect-ratio: 1 / 1;
  background: url(../img/quote.png) center center / contain no-repeat;
}

.quotebox>:first-child {
  margin-top: 0;
}

.quotebox>:last-child {
  margin-bottom: 0;
}

.fukidashi {
  position: relative;
  width: fit-content;
  min-width: 50%;
  max-width: 100%;
  padding: .6em 1.6em;
  margin: 2rem auto 1.4rem;
  text-align: center;
  font-weight: bold;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  background: var(--pinkdark);
  color: #fff;
  border-radius: 0.375rem;
}

.fukidashi::after {
  position: absolute;
  content: "";
  border-top: 20px solid var(--pinkdark);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  z-index: 1;
}

.matomebox {
  border: 1px dashed var(--primary);
  border-radius: 0.5rem;
}

.matomebox-ttl {
  color: var(--primary);
  font-size: clamp(0.625rem, 4.73vw, 1.125rem);
  font-weight: bold;
  text-align: center;
  margin-bottom: .8rem;

}

.surveybox_ttl {
  font-weight: bold;
  margin-bottom: .8em;
  text-align: center;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
}

.surveybox_list li {
  position: relative;
  padding-left: 1.4em;
}

.surveybox_list li+li {
  margin-top: 0.25rem;
}

.surveybox_list li::before {
  position: absolute;
  top: .45em;
  left: 0;
  content: "";
  width: .8em;
  aspect-ratio: 1 / 1;
  background: #333;
}

article .mintextbox {
  padding: 0;
  font-size: clamp(0.625rem, 3.15vw, 0.75rem);
}

.mintextbox-ttl {
  font-weight: bold;
  padding: 10px 20px;
  font-size: clamp(0.625rem, 3.68vw, 0.875rem);
  color: #fff;
  background: var(--pinkdark);
}

.mintextbox-inner {
  padding: 14px 20px;
}

.mintextbox-inner *,
.mintextbox-inner p {
  font-size: clamp(0.625rem, 3.15vw, 0.75rem);
}

.matomebox>:first-child,
.matomebox-inner>:first-child,
.mintextbox-inner>:first-child,
.surveybox>:first-child,
.surveybox-inner>:first-child {
  margin-top: 0;
}

.matomebox-inner>:last-child,
.mintextbox-inner>:last-child,
.surveybox>:last-child,
.surveybox-inner>:last-child {
  margin-bottom: 0;
}

.c-btn {
  width: fit-content;
  margin: 1.5rem auto 2rem;
  transition: .4s;
}

.c-btn a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #ebc2a7;
  box-shadow: 0.2rem 0.2rem 0px 0.1rem #caa085;
  border-radius: 9999px;
  overflow: hidden;
  font-weight: bold;
  width: fit-content;
  min-width: 300px;
  max-width: 100%;
  padding: 1.2rem 2.4rem 1.2rem 2rem;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  text-decoration: none;
  transition: .4s;
  text-align: center;
}

.c-btn a::after {
  content: '';
  display: block;
  position: absolute;
  right: 0.6rem;
  width: 1.4rem;
  aspect-ratio: 1 / 1;
  background: url(../img/botann_w_o-1.png) center center / contain no-repeat;
}

.tag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  font-size: clamp(0.625rem, 3.15vw, 0.75rem);
}

.tag.center {
  justify-content: center;
}

.tag .item {
  padding: 8px 12px;
  border: 1px solid var(--primary);
  border-radius: 8px;
}

.tag .item.on {
  background: var(--pinkdark);
  color: #fff;
}

.scroll-x,
.table-scroll {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.scroll-x .table,
.table-scroll .table {
  min-width: 110%;
  margin-bottom: 4px;
}

.table .c-btn {
  width: 100%;
  max-width: 250px;
  margin: 0 auto;
}

.table .c-btn a {
  min-width: 100%;
  width: 100%;
  padding: 1rem 2rem 1rem 1.6rem;
  font-size: clamp(0.625rem, 3.68vw, 0.875rem);
}

.table .c-btn a::after {
  width: 1.2rem;
}

.scroll-x .table thead th {
  width: min(52vw, 220px);
}

.scroll-x .table thead th:first-child {
  width: min(40vw, 180px);
}


.table.sticky-top thead {
  position: sticky;
  top: -1px;
  left: 0;
  z-index: 10;
}

.table.sticky-top thead th:not(:first-child) {
  position: relative;
}

.table.sticky-top thead th:not(:first-child)::before {
  position: absolute;
  top: 0;
  left: -1px;
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  background: #b5b5b5;
}

.table.sticky-top .c-btn {}

.table.sticky-top .c-btn a {
  padding: 10px;
  border-radius: 20px;
  min-height: 4em;
}

.table.sticky-top .c-btn a::after {
  display: none;
}

.table.sticky-top thead th {
  position: relative;
}

.table.sticky-left {
  will-change: transform;
}

.table.sticky-left thead th:first-of-type,
.table.sticky-left tbody th {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}

.table.sticky-left thead th:first-of-type::before,
.table.sticky-left tbody th::before,
.table.sticky-left thead th:first-of-type::after,
.table.sticky-left tbody th::after {
  content: "";
  display: block;
  width: 1px;
  height: 100%;
}

.table.sticky-left thead th:first-of-type::before {
  background: #dadada;
  position: absolute;
  top: 0;
  left: 0;
}

.table.sticky-left tbody th::before {
  background: #dadada;
  position: absolute;
  top: 0;
  left: 0;
}

.table.sticky-left thead th:first-of-type::after {
  background: #dadada;
  position: absolute;
  top: 0;
  right: 0;
}

.table.sticky-left tbody th::after {
  background: #dadada;
  position: absolute;
  top: 0;
  right: 0;
}


.jump {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .8em;
  margin-bottom: 1.5rem;
}

.jump .item {
  display: flex;
  text-align: center;
}

.jump .item a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.4rem .8rem 2.2rem;
  width: 100%;
  border: 1px solid var(--primary);
  border-radius: 999px;
  text-decoration: none;
  color: var(--primary);
}

.jump .item a::before {
  position: absolute;
  content: "";
  border-top: .8rem solid var(--primary);
  border-left: .4rem solid transparent;
  border-right: .4rem solid transparent;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.jump .item a:hover {
  opacity: 1;
  background: rgb(243 244 246);
}


.numbering {
  margin-bottom: 1.5rem;
}

.numbering-wrap {
  margin-bottom: 1.5rem;
}

.numbering-ttl {
  position: relative;
  font-size: clamp(0.625rem, 4.73vw, 17px);
  font-weight: bold;
  margin: 1.6rem 0 .8rem;
  padding-left: 2.2em;
  color: var(--primary);
}

.numbering-num {
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  aspect-ratio: 1 / 1;
  background: var(--primary);
  border-radius: 50%;
  color: #fff;
}

.pickup-ttl {
  padding: 12px;
  border-top: 4px solid var(--primary);
  margin: 2rem 0 1rem;
  font-weight: bold;
  font-size: clamp(0.625rem, 4.73vw, 1.125rem);
  background: var(--pinklight);
  color: var(--primary);
}

.pickup-text {
  display: block;
  font-weight: normal;
  font-size: clamp(0.625rem, 3.15vw, 0.75rem);
  margin-bottom: 4px;
  color: #333;
}



.rank-i {
  margin-bottom: 1.5rem;
}

.rank a {
  font-size: clamp(0.625rem, 4.73vw, 17px);
  font-weight: bold;
}

.rank-inner {
  font-size: clamp(0.625rem, 4.73vw, 17px);
}

.rank-catch {
  display: block;
  font-size: clamp(0.625rem, 3.15vw, 0.75rem);
}

.rank-icon-block {
  position: relative;
  padding-top: .8em;
  padding-left: 4em;
  margin: 2rem 0 1rem;
  border-top: 3px dotted #ffc9d2;
}

.rank-icon {
  position: absolute;
  left: 0;
  top: 62%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
  background: url(../img/rank-04.svg) center center / contain no-repeat;
  width: 3em;
  aspect-ratio: 1 / 1;
}

.rank-icon-block .rank-icon_01 {
  background: url(../img/rank-01.svg) center center / contain no-repeat;
}

.rank-icon-block .rank-icon_02 {
  background: url(../img/rank-02.svg) center center / contain no-repeat;
}

.rank-icon-block .rank-icon_03 {
  background: url(../img/rank-03.svg) center center / contain no-repeat;
}


.flow {
  margin-bottom: 1.5rem;
}

.flow-ttl {
  position: relative;
  font-weight: bold;
  padding-left: 3.4em;
  font-size: clamp(0.625rem, 4.73vw, 17px);
  margin: 26px 0 14px;
  color: var(--primary);
}

.box .flow-ttl {
  margin: 12px 0 20px;
}

.flow-wrap {}

.flow-num {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  text-align: center;
  font-size: 2em;
  aspect-ratio: 1 / 1;
  color: var(--primary);
  line-height: 1;
}

.flow-step {
  display: block;
  font-size: 0.5em;
  line-height: 1;
}

.flow-wrap:has(+.flow-wrap) {
  margin-bottom: 20px;
}

.flow-inner>:last-child {
  margin-bottom: 0;
}

.map {
  margin-bottom: 1.5rem;
}

.map-ttl {
  position: relative;
  width: fit-content;
  min-width: 50%;
  max-width: 100%;
  padding: .6em 1.6em;
  margin: 2rem auto 1.4rem;
  text-align: center;
  font-weight: bold;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  border: 2px solid var(--pinkdark);
  color: var(--primary);
  border-radius: 0.375rem;
}

.map-ttl::before {
  content: "";
  position: absolute;
  bottom: -23px;
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.map-ttl::after {
  content: "";
  position: absolute;
  bottom: -27px;
  left: 50%;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-top: 14px solid var(--pinkdark);
  z-index: 1;
}

.accordion {
  margin-bottom: 1.5rem;
}

.accordion:has(+.accordion) {
  margin-bottom: 0.5rem;
}

.accordion-ttl {
  position: relative;
  background: var(--pinkdark);
  padding: 0.5rem 1rem;
  color: #fff;
  font-weight: bold;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  border-radius: 0.375rem;
  cursor: pointer;
}

.accordion-btn {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: block;
  width: 1rem;
  aspect-ratio: 1 / 1;
}

.accordion-btn::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
}

.accordion-btn::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  height: 100%;
  width: 2px;
  background: #fff;
}

.accordion-ttl.action .accordion-btn::after {
  display: none;
}

.accordion-inner {
  padding: 1rem;
  display: none;
}

.accordion-inner>:first-child {
  margin-top: 0;
}

.accordion-inner>:last-child {
  margin-bottom: 0;
}

.accordion-inner.action {
  display: block;
}

.info {
  display: flex;
  gap: 0.6rem;
}

.info-ttl {
  min-width: 20%;
  font-weight: bold;
}

.relatedArticle {
  margin: 2rem 0 1.5rem;
}

.relatedArticle-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto .6rem;
  padding: 0 1.6;
  margin-bottom: 10px;
  font-size: clamp(0.625rem, 4.73vw, 17px);
  font-weight: bold;
}

.relatedArticle-head::before,
.relatedArticle-head::after {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 2px;
  background: var(--primary);
}

.relatedArticle-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.relatedArticle-img {
  margin-bottom: 8px;
}

.relatedArticle-img img {
  display: block;
  width: 100%;
  height: auto;
}

.relatedArticle-ttl {
  margin-bottom: 0;
  line-height: 1.6;
}

.faq_wrap {
  margin-bottom: 1.5rem;
}

.faq+.faq,
div:has(.faq)+div:has(.faq) {
  margin-top: 0.5rem;
}

.faqQ {
  padding: 1.4rem;
  background: var(--neutral);
  margin-bottom: 0.5rem;
}

.faqQ::before {
  content: "Q.";
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-size: clamp(0.625rem, 5.26vw, 1.25rem);
}

.faqA {
  padding: 1.4rem;
  background: var(--pinklight);
}

.faqA::before {
  content: "A.";
  display: inline-block;
  margin-bottom: 8px;
  color: var(--primary);
  font-weight: bold;
  font-size: clamp(0.625rem, 5.26vw, 1.25rem);
}


.link-r,
.link-r_i {
  font-size: clamp(0.625rem, 3.15vw, 0.75rem);
  text-align: right;
  margin-bottom: 20px;
}

.link-r:has(+.link-r),
.link-r:has(+.link-r_i),
.link-r_i:has(+.link-r_i),
.link-r_i:has(+.link-r) {
  margin-bottom: 8px;
}


.link-r_i a {
  position: relative;
  padding-left: 1.2em;
}

.link-r_i a::before {
  position: absolute;
  top: 0.15em;
  left: 0;
  content: "";
  display: block;
  width: 1em;
  aspect-ratio: 1 / 1;
  background: url(../img/link-icon.png) center center / contain no-repeat;
}



.merideme {
  margin-bottom: 1.5rem;
}

.merideme:has(+.merideme) {
  margin-bottom: 10px;
}

.merideme[data-type="merit"] {
  border: 2px solid var(--pinkdark);
}

.merideme[data-type="merit"] .merideme-ttl {
  background: var(--pinkdark);
  border-bottom: 2px solid var(--pinkdark);
  color: #fff;
}

.merideme[data-type="demerit"] {
  border: 2px solid #bfbbbe;
}

.merideme[data-type="demerit"] .merideme-ttl {
  background: #F9F9F9;
  border-bottom: 2px solid #bfbbbe;
}

.merideme-ttl {
  padding: 0.5rem 1rem;
  font-weight: bold;
  line-height: 1.1;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
}

.merideme-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  padding: 1em 1.7em;
  margin: 0;
}

.merideme-list li {
  padding-left: 1em;
  position: relative;
}

.merideme-list li:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.6em;
  aspect-ratio: 1 / 1;
  border-radius: 100px;
}

.merideme[data-type="merit"]>.merideme-list li:before {
  background-color: var(--primary);
}

.merideme[data-type="demerit"]>.merideme-list li:before {
  background-color: #45303e;
}

.scroll-wrap {
  overflow-x: scroll;
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 1.5rem;
}

.comment {
  width: 80%;
  padding: 20px;
  flex-shrink: 0;
  background: #F9F9F9;
}

.comment-top {
  margin-bottom: 1em;
}

.comment-profile {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 1em;
}

.comment-icon-w,
.comment-icon-m {
  display: block;
  width: 3em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.comment-icon-w {
  background: #dedede url(../img/review-icon-woman.svg) center center / 74% no-repeat;
}

.comment-icon-m {
  background: #dedede url(../img/review-icon-man.svg) center center / 74% no-repeat;
}

.comment-name {
  font-weight: bold;
}

.comment-plan {}

.comment-plan span {
  display: inline-block;
  padding: .4em .8em;
  background: var(--primary);
  color: #fff;
  font-size: 0.875em;
  font-weight: bold;
  border-radius: .7em;
  margin-right: .8em;
}

.comment-plan li+li {
  margin-top: 6px;
}

.comment-bottom {
  display: flex;
  align-items: start;
  gap: 10px;
}

.comment-bottom img {
  width: 40%;
}


.tab-section {
  margin-bottom: 1.5rem;
}

.tab-list {
  display: flex;
  gap: 4px;
}

.tab-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 5px;
  border-bottom: 2px solid var(--primary);
  padding: 0 20px;
  margin: 24px 0 10px;
}

.tab.active {
  color: var(--primary);
  background-color: #fff;
  position: relative;
}

.tab {
  border-radius: 5px 5px 0 0;
  flex: auto;
  text-align: center;
  border: 2px solid var(--primary);
  border-bottom: none;
  background-color: #f0f0f1;
  cursor: pointer;
  width: 100%;
  min-height: 2.5rem;
  padding: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.4;
  font-size: clamp(0.725rem, 2.63vw, 11px);

}

.tab-wrap {
  display: none;
  border: 2px solid var(--primary);
  border-top: none;
  padding: 12px 10px 14px;

}

.tab-wrap>:first-child {
  margin-top: 0;
}

.tab-wrap>:last-child {
  margin-bottom: 0;
}

.tab-wrap.show {
  display: block;
}



/* 診断パーツ */
.simulation {
  position: relative;
  background: var(--pinklight);
  padding: 3%;
  border: 1px solid var(--primary);
  border-radius: 10px;
  margin-bottom: 1.5rem;
}

.simulation .ttl {
  background-color: #fff;
  margin: -1% -1% 20px !important;
  padding: 1em;
  text-align: center;
  border-radius: 5px;
  border: double .6em #f3a9a9;
  box-shadow: 2px 2px 0 #f3a9a9;
}

.simulation .ttl .sub {
  font-weight: bold;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  line-height: 1.2em;
  margin-bottom: 0.2em;
}

.simulation .ttl .main {
  display: block;
  font-size: clamp(0.625rem, 6.31vw, 1.5rem);
  line-height: 1.2em;
  color: var(--primary);
}

.simulation dl {
  margin: 0;
  padding: 0;
}

.simulation dl dt {
  position: relative;
  background: var(--primary);
  color: #fff;
  font-weight: bold;
  padding: .5em 2em;
  margin: 0;
  line-height: 1.2em;
  border-radius: 30px;
}

.simulation dl dt span,
.simulation .ttl span {
  display: inline-block;
}

.simulation dl dd+dt {
  margin-top: .8em;
}


.simulation dl dd {
  border: 0;
  padding: .8em 0px;
  position: relative;
  display: flex;
  gap: 2%;

}

.simulation dl dd>label {
  position: relative;
  padding: 10px 12px;
  background: #fff;
  border-radius: 30px;
  font-weight: bold;
  line-height: 1.2em;
  border: 1px solid var(--primary);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s linear;
  box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 3px;
  font-size: clamp(0.625rem, 3.15vw, 0.93em);
  flex: 1;
}

.simulation dl dd>label:has(input[type="checkbox"]) input[type="checkbox"] {
  margin-right: .8em;
  transform: scale(1.5, 1.5);
  box-shadow: #fff 0 0 1px 1px;
  accent-color: var(--primary);
}

.simulation dl dd>label:hover,
.simulation dl dd>label:has(input[type="radio"]:checked),
.simulation dl dd>label:has(input[type="checkbox"]:checked) {
  background: #ffc9d2;
  /* color: #fff; */
  transition: all 0.2s linear;
}

.simulation dl dd label input[type="radio"],
.simulation .sim-result>label input[name="result"] {
  display: none;
}

.simulation dl dd>label:has(:not(input[type="radio"]:checked)):hover {
  top: -2px;
  left: -1px;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 4px 3px;
  transition: all 0.2s linear;
}

.simulation dl dd>p.fukidasi strong {
  font-size: 120%;
  color: #fb3;
}

.simulation dl dd nav,
.simulation .sim-result nav {
  text-align: center;
  margin: .8em auto 0;
  padding: 0;
  width: 100%;
}

.simulation .sim-result nav {
  margin: 1.4em auto 0;
}

.simulation dl dd nav>label,
.simulation .sim-result nav a {
  box-sizing: border-box;
  display: inline-block;
  padding: .7em 1em;
  min-width: 15em;
  background: var(--primary);
  color: #fff;
  font-size: clamp(0.625rem, 6.31vw, 1.2rem);
  font-weight: bold;
  line-height: 1.3em;
  border-radius: 100px;
  border: 1px solid #333;
  box-shadow: rgba(0, 0, 0, 0.3) -1px -3px 1px 2px inset, rgba(255, 255, 255, 0.4) 1px 2px 1px 2px inset;
  text-shadow: rgba(0, 0, 0, 0.7) -1px -1px 1px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  max-width: 100%;
  transition: opacity 0.5s linear;
}

.simulation .sim-result nav a {
  background: #FE6060;
}


@media (max-width: 768px) {
  .simulation .ttl:before {
    width: 80px;
    height: 120px;
    left: -5px;
  }

  .simulation dl dd {
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .simulation dl dd>label {
    width: 49%;
    margin-bottom: 2%;
    padding: 10px 5px;
  }

  .simulation dl dd:has(.fukidasi) {
    padding-right: 45%;
  }

  .simulation dl dd:has(.fukidasi)>label {
    width: 100%;
  }

  .simulation dl dd>p.fukidasi {
    right: -25px;
    padding: 25px 15px;
    font-size: 110%;
    line-height: 1.7em;
  }

  .simulation dl dd>p.fukidasi:before {
    border-width: 8px 20px 8px 0;
  }

  .simulation dl dd nav>label,
  .simulation .sim-result nav a {
    padding: .6em 1.2em;
    width: fit-content;
    max-width: 100%;
    min-width: 300px;
  }

  .simulation dl dd>label:has(input[type="checkbox"]) input[type="checkbox"] {
    margin-right: 6px;
    transform: scale(1.2, 1.2);
  }
}


/* 結果 */
.simulation .sim-result div[id*="sim-result-"] {
  display: none;
}

.simulation:has(input[name="other_conditions"][value="0"]:checked) .sim-result div#sim-result-1,
.simulation:has(input[name="other_conditions"][value="1"]:checked) .sim-result div#sim-result-2,
.simulation:has(input[name="other_conditions"][value="2"]:checked) .sim-result div#sim-result-3 {
  display: block;
}

.simulation .sim-result {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  overflow: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.simulation .sim-result.show {
  visibility: visible;
  opacity: 1;
}


.simulation .sim-result:has(input[name="result"]:checked) {
  z-index: -10;
  opacity: 0;
  top: -100%;
  left: 100%;
  width: 0;
  height: 0;
  transition: opacity 0.5s linear;
}

.simulation .sim-result>label:has(input[name="result"]) {
  position: absolute;
  right: 2%;
  top: 2%;
  color: #fff;
  font-size: 60px;
  line-height: 60px;
  font-weight: bold;
  cursor: pointer;
}

.simulation .sim-result .sim-result-inner {
  width: 60%;
  max-width: 600px;
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -100%);
  background: #fff;
  padding: 1.2em;
  text-align: center;
  border-radius: 10px;
  opacity: 0;
  transition: transform 1s ease;
  overflow-y: auto;
}

.simulation .sim-result.show .sim-result-inner {
  max-height: 90vh;
  overflow-y: auto;
  opacity: 1;
  top: 50%;
  transform: translate(-50%, -50%);
}

.simulation .sim-result:has(input[name="result"]:checked) .sim-result-inner {
  top: -10%;
  opacity: 0;
  transition: all 0.7s ease-out;
}

.sim-result-inner .banner {
  width: 80%;
  margin: 0 auto 15px;
}

.sim-result-ttl {
  position: relative;
  margin: 0 auto 15px;
  padding: 0 5px;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(0.625rem, 5.31vw, 1.5rem);
  font-weight: bold;
  line-height: 1.1em;
  color: var(--primary);
  vertical-align: middle;
  z-index: 1;
}

.sim-result-ttl span {
  display: inline-block;
}

.sim-result-ttl>span {
  vertical-align: middle;
  max-width: calc(100% - 60px);
}

.sim-result-ttl:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--primary);
  width: 100%;
  height: .5em;
  z-index: -1;
  opacity: 0.3;
}

.sim-result-ttl.name {
  font-size: 26px;
}

.simulation .sim-result {
  line-height: 1.4em;
}

.simulation .sim-result p {
  margin-bottom: .8em;
}

.simulation .sim-result p b {
  display: inline-block;
  margin: 0 5px;
  font-size: 115%;
  color: var(--purple);
}

.simulation .sim-result p i {
  display: inline-block;
  padding: 3px 5px;
  background: #777;
  color: #fff;
  font-weight: bold;
  font-style: normal;
  margin: 0 5px;
  vertical-align: middle;
  border-radius: 3px;
}

.simulation .sim-result p.average {
  font-size: 160%;
  font-weight: bold;
  line-height: 1.4em;
}

.simulation .sim-result p.average em {
  display: inline-block;
  padding: 3px 5px;
  background: #ffd6cf;
  color: #FE6060;
  font-size: 130%;
  font-style: normal;
  margin: 0 5px;
  border: 1px solid #FE6060;
  border-radius: 3px;
}

@media (max-width: 768px) {
  .simulation .sim-result .sim-result-inner {
    padding: 1em .8em;
    width: 90%;
  }
}


.sim-result .close-modal {
  position: absolute;
  right: 2%;
  top: 2%;
  color: #fff;
  font-size: 60px;
  line-height: 60px;
  font-weight: bold;
  cursor: pointer;
}

.sim-result-item {
  display: none;
}

.post-info {
  margin-bottom: 1rem;
}

.post-info * {
  display: inline-block;
}

.post-info .pr {
  border: 1px solid #333;
  padding: 1px 4px;
  margin-left: 0.5rem;
  font-size: clamp(0.625rem, 3.15vw, 0.75rem);
}


.scrollBoxImg {
  width: 100%;
  background: #F0F0F0;
  padding: 1.5rem 2.4rem;
  box-sizing: textbox;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 1.5rem;
}

.scrollBoxImg-wrap {
  width: fit-content;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
}

.scrollBoxImg-list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.scrollBoxImg-ttl {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  min-height: 4em;
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
  font-weight: bold;
  margin-bottom: 10px;
}

.scrollBoxImg-ttl .num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2em;
  margin-right: 0.6em;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  color: #fff;
  background: var(--primary);
}

.scrollBoxImg-list li {
  flex: 1 0 calc(50% - 5vw);
  max-width: calc(50% - 5vw);
  margin: 0 1.4vw;
  text-align: center;
  position: relative;
}

.scrollBoxImg-list li:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  height: 1px;
  width: 3.4rem;
  background-color: transparent;
}

.scrollBoxImg-list img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 8px;
}

.scrollBoxImg-list .caption {
  display: block;
  max-width: 100%;
  font-size: 0.9em;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
}

.positioning {
  margin-bottom: 1.5rem;
}

.positioning-top {
  margin-bottom: 10px;
}

.positioning-subttl {
  text-align: center;
  font-weight: bold;
}

.positioning-ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(0.625rem, 4.73vw, 1.125rem);
  font-weight: bold;
}

.positioning-ttl::before {
  display: block;
  content: '';
  height: 3px;
  background: var(--primary);
  flex-grow: 1;
}

.positioning-ttl::after {
  display: block;
  content: '';
  height: 3px;
  background: var(--primary);
  flex-grow: 1;
}

.positioning-notes {
  font-size: clamp(0.625rem, 3.15vw, 0.75rem);
  text-align: right;
}

.positioning-inner {
  background: repeating-linear-gradient(90deg, #F4F5F0, #F4F5F0 1px, transparent 1px, transparent 32px), repeating-linear-gradient(0deg, #F4F5F0, #F4F5F0 1px, #fff 1px, #fff 32px);
  background-size: 32px 32px;
  background-position: 50% 50%;
  width: 86%;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  position: relative;
}

.positioning-inner::before {
  content: "";
  display: inline-block;
  background: #ffb5b5;
  border-radius: 50%;
  width: 38%;
  aspect-ratio: 1 / 1;
  position: absolute;
  top: 4%;
  right: 5%;
}

.positioning-bg {
  display: inline-block;
  width: 66%;
  height: 100%;
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/posiMap-bg.png) center center / contain no-repeat;
}

.positioning-subLabel {
  font-size: 0.875em;
  font-weight: bold;
  line-height: 1;
  top: 4%;
  left: 50%;
  transform: translateX(-50%);
}

.positioning-label,
.positioning-subLabel {
  position: absolute;
  z-index: 2;
}

.positioning-label-01,
.positioning-label-02 {
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  font-weight: bold;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 2.6em;
  aspect-ratio: 1 / 1;
}

.positioning-label-03,
.positioning-label-04 {
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  padding: 8px;
  font-weight: bold;
  line-height: 1.17;
  color: #fff;
  text-align: center;
  display: inline-block;
}

.positioning-label-01 {
  background: var(--primary);
  top: 7.5%;
  left: 50%;
  transform: translateX(-50%);
}

.positioning-label-02 {
  background: #707F89;
  top: 89%;
  left: 50%;
  transform: translateX(-50%);
}

.positioning-label-03 {
  background: var(--primary);
  top: 55.8%;
  transform: translateY(-50%);
  right: 16px;
}

.positioning-label-04 {
  background: #707F89;
  top: 55.8%;
  transform: translateY(-50%);
  left: 20px;
}

.positioning-item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #707F89;
  border-radius: 4px;
  box-shadow: 0 4px #707F89;
  padding: 8px 12px;
  position: absolute;
  z-index: 1;
}

.positioning-item-logo {
  width: auto;
  height: 2em;
  border: none;
}

.positioning-item-02 {
  border-color: #a71616;
  box-shadow: 0 4px #A71616;
  z-index: 1;
}

.scroll-x {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.scroll-x>* {
  margin-bottom: 0px;
  min-width: 110%;
}



/* スライドトグルパーツ */
.toggleSection-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
  margin-bottom: 1.5rem;
}

.toggleSection {
  margin-bottom: 1.5rem;
}

.toggleSection-wrap .toggleSection {
  margin-bottom: 0;
}

.toggleSection .sub-ttl {
  text-align: center;
  margin-bottom: 6px;
  color: var(--primary);
  font-weight: bold;
}

.toggleSection .content {
  padding: 1em;
  border-radius: 10px;
  border: 2px solid var(--primary);
}

.toggleSection .top-inner {
  align-items: center;
  display: grid;
  grid-template-columns: 30% 1fr 23px;
  gap: 10px;
}

.toggleSection .name p {
  font-size: clamp(0.625rem, 4.21vw, 1rem);
  font-weight: bold;
  margin-bottom: 4px;
}

.toggleSection .mintext {
  display: block;
  font-size: clamp(0.625rem, 3.15vw, 0.75rem);
  margin-bottom: 0;
}

.toggleSection-btn {
  clip-path: polygon(20% 7%, 27% 0, 77% 50%, 27% 100%, 20% 93%, 63% 50%, 20% 7%);
  width: 1.2em;
  aspect-ratio: 1;
  background-color: var(--primary);
  transform: rotate(90deg);
  margin: auto;
}

.toggleSection .top-wrap {
  cursor: pointer;
}

.toggleSection .top-wrap.action .toggleSection-btn {
  transform: rotate(270deg);
}

.toggleSection .bottom-wrap {
  display: none;
  margin-top: 20px;
}

.toggleSection .bottom-wrap>:last-child {
  margin-bottom: 0;
}

.toggleSection-wrap .toggleSection .info-list,
.toggleSection-wrap .toggleSection2 .info-list {
  font-size: clamp(0.625rem, 3.15vw, 0.75rem);
}

.toggleSection .info-list {
  display: flex;
  flex-direction: column;
  gap: 1.3em;
  border: none;
}

.toggleSection .info-list .ttl {
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
  padding: 4px;
  background: #f8f8f8;
  color: #333;
}

.toggleSection .bottom-wrap .c-btn,
.toggleSection2 .bottom-wrap .c-btn {
  margin-top: 20px;
}

.toggleSection .bottom-wrap .c-btn a,
.toggleSection2 .bottom-wrap .c-btn a {
  min-width: 230px;
}

.toggleSection .info-list .text {
  width: 100%;
  padding: 0;
}

/* 2 */
.toggleSection2 {
  margin-bottom: 1.5rem;
}

.toggleSection-wrap .toggleSection2 {
  margin-bottom: 0;
}

.toggleSection2 .sub-ttl {
  text-align: center;
  margin-bottom: 6px;
  color: var(--primary);
  font-weight: bold;
}

.toggleSection2 .content {
  padding: 1em;
  border-radius: 10px;
  border: 2px solid var(--primary);
  border-bottom: none;
}

.toggleSection2.action .content {
  border: 2px solid var(--primary);
}

.toggleSection2 .top-inner {
  align-items: center;
  display: grid;
  grid-template-columns: 33% 1fr 23px;
  gap: 10px;
}

.toggleSection2 .top-inner .img {}

.toggleSection2 .name p {
  font-size: 1.15em;
  font-weight: bold;
  margin-bottom: 4px;
}

.toggleSection2 .mintext {
  display: block;
  font-size: 0.875em;
  margin-bottom: 0;
}

.toggleSection-btn_more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: .8em;
  margin: 14px auto 0;
  background: #F0F0F0;
  border: 1px solid #ddd;
  font-size: 0.875em;
}

.toggleSection-btn_more .toggleSection-btn {
  width: 16px;
  margin: 0;
  background: var(--primary);
}

.toggleSection2.action .toggleSection-btn {
  transform: rotate(270deg);
}


.toggleSection2 .top-wrap .toggleSection-btn_more {
  cursor: pointer;
}

.toggleSection2 .bottom-wrap {
  position: relative;
  max-height: 80px;
  overflow: hidden;
  margin-top: 20px;
}

.toggleSection-wrap .toggleSection2 .bottom-wrap {
  max-height: 50px;
}

.toggleSection2 .bottom-wrap>:last-child {
  margin-bottom: 0;
}

.toggleSection2 .bottom-wrap::before {
  background: -webkit-linear-gradient(top, rgb(255 255 255 / 10%) 0%, rgb(255 255 255 / 99%) 50%, rgb(255 255 255) 100%, #fff 100%);
  bottom: 0%;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  opacity: 0.8;
  position: absolute;
  z-index: 1;
}

.toggleSection2.action .bottom-wrap {
  max-height: fit-content;
  overflow: visible;
}

.toggleSection2.action .bottom-wrap::before {
  display: none;
}

.toggleSection2 .info-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: none;
}

.toggleSection2 .info-list .ttl {
  text-align: center;
  margin-bottom: 8px;
  padding: 4px;
  background: #f8f8f8;
  width: 100%;
  color: #333;
}

.toggleSection2 .info-list .text {
  width: 100%;
  padding: 0;
}

.only-pc {
  display: block;
}

.only-sp {
  display: none;
}

.forSP {
  display: none;
}