@charset "utf-8";
:root {
  --color-base: #212121;
  --color-maroon: #d80c18;
  --color-pink: #eb50a0;
  --color-pink-light: #f9eef3;
  --color-orange: #fa6e1e;
  --color-orange-light: #fff6ed;
  --color-iris: #826ebe;
  --color-violet: #8246a0;
  --font-maru: "Zen Maru Gothic", sans-serif;
}
html {
  scroll-behavior: smooth;
}
main {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 26px;
  line-height: 1.615;
  color: var(--color-base);
}
main img {
  width: auto;
  max-width: 100%;
  height: auto;
}
/*------------------------------

Component
------------------------------*/
main .font-maru {
  font-family: var(--font-maru);
}
main .maroon {
  color: var(--color-maroon);
}
main .pink {
  color: var(--color-pink);
}
main .orange {
  color: var(--color-orange);
}
main .indent,
main .indent-list li {
  text-indent: -1em;
  margin-left: 1em;
  list-style: none;
  text-align: justify;
}
main .indent:first-letter,
main .indent-list li:first-letter {
  font-feature-settings: normal;
}
main .external {
  color: var(--color-pink);
  font-weight: bold;
}
main .external:after {
  content: "";
  display: inline-block;
  width: 24px;
  aspect-ratio: 1/1;
  margin-inline: 5px;
  background: var(--color-pink);
  mask: url(/cp/takashimaya-tomonokai/assets/img/ico-newtab.svg) no-repeat center center/ contain;
}
.area-campaign-item {
  background: var(--color-orange-light);
  padding-bottom: 45px;
  text-align: center;
}
.area-campaign-item .label {
  display: block;
  padding: 16px 0 60px;
  margin-bottom: -50px;
  background: var(--color-orange);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-decoration: none;
}
.area-campaign-item .label:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: 10px auto 0;
  border-inline: 6px solid transparent;
  border-top: 10px solid #fdd3bb;
  pointer-events: none;
}
.area-campaign-item .item {
  width: 650px;
  padding: 30px 50px 35px;
  margin-inline: auto;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0 0 0 / 10%);
  position: relative;
  z-index: 1;
}
.area-campaign-item .item .tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.area-campaign-item .item .tags li {
  flex: 0 0 170px;
  height: 40px;
  line-height: 40px;
  background-color: var(--color-pink);
  color: #fff;
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%);
  font-size: 23px;
  font-weight: bold;
  letter-spacing: .05em;
}
.area-campaign-item .item .tags:has(li + li) li {
  margin-top: 10px;
  flex: 0 0 140px;
  height: 35px;
  line-height: 35px;
  font-size: 18px;
}
.area-campaign-item .item .tags li.iris {
  background-color: var(--color-iris);
}
.area-campaign-item .item .tags li.violet {
  background-color: var(--color-violet);
}
.area-campaign-item .item dl {
  text-align: center;
  line-height: 1.4;
  margin-top: 16px;
}
.area-campaign-item .item dt {
  margin: 0 0 10px;
  color: var(--color-orange);
  font-family: var(--font-maru);
  font-size: 34px;
  font-weight: bold;
  line-height: 1.2;
}
.area-campaign-item .item dd {
  display: inline-block;
  text-align: left;
  font-weight: bold;
}
.area-campaign-item figure {
  margin: 20px auto 0;
}
.area-campaign-item .item > p {
  margin-top: 20px;
  text-align: justify;
}
.area-campaign-item .item .indent-list {
  font-size: 22px;
}
.area-campaign-item .item .external {
  display: inline-block;
  margin: 30px auto;
  font-size: 24px;
}
.area-campaign-item .item .block {
  margin: 25px auto;
  padding: 20px;
  background: #fef0e8;
}

.link-black{
  color: var(--color-base);
}

/*------------------------------

Mainvisual
------------------------------*/
#sec-mainvisual {
  text-align: center;
}
#sec-mainvisual h1 {
  color: var(--color-pink);
  font-family: var(--font-maru);
  font-weight: 500;
}
#sec-mainvisual h1 + p {
  font-family: var(--font-maru);
  font-weight: bold;
  color: #424242;
}
#sec-mainvisual .area-campaign-item {
  margin-top: 50px;
  padding: 30px 0 0;
}
#sec-mainvisual .area-campaign-item .title {
  width: fit-content;
  margin: 0 auto 20px;
  padding-inline: 45px;
  background: #fff;
  border-radius: 999rem;
  border: 2px solid var(--color-orange);
  color: var(--color-orange);
  font-family: var(--font-maru);
  font-weight: bold;
  text-align: center;
}
#sec-mainvisual .area-campaign-item .item {
  width: 540px;
}
#sec-mainvisual .area-campaign-item figure {
  width: 300px;
}
#sec-mainvisual .area-campaign-item .label {
  padding: 60px 0 16px;
  margin: -40px 0 0;
  font-size: 27px;
  letter-spacing: 0;
}

/*------------------------------

Members
------------------------------*/
#sec-member .area-intro {
  padding: 50px 0;
  text-align: center;
}
#sec-member .area-intro h2 {
  width: fit-content;
  margin: 0 auto 30px;
  padding: 3px 40px;
  background: var(--color-pink);
  border-radius: 999rem;
  color: #fff;
  font-family: var(--font-maru);
  font-weight: 500;
  font-size: 27px;
  letter-spacing: 0.05em;
}
#sec-member .area-intro p {
  margin: 20px auto 30px;
  font-weight: bold;
}
#sec-member .area-intro figure:nth-of-type(2) img {
  width: 270px;
  margin: 0 auto 10px;
}
#sec-member .area-intro figcaption {
  font-weight: bold;
  font-size: 20px;
}
#sec-member .area-price {
  background: var(--color-pink-light);
  padding: 30px 50px;
}
#sec-member .area-price h3 {
  font-family: var(--font-maru);
  font-size: 32px;
  color: var(--color-pink);
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
}
#sec-member .area-price table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  background: #fff;
  border: 1px solid #ccc;
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-weight: bold;
}
#sec-member .area-price th {
  border-block: 1px solid #ccc;
  font-size: 15px;
  text-align: center;
  font-weight: 500;
  padding: 5px 0;
  letter-spacing: .05em;
}
#sec-member .area-price td {
  padding: 15px 10px;
  border-block: 1px solid #ccc;
  font-family: var(--font-maru);
  font-weight: bikd;
  font-size: 26px;
  text-align: right;
  line-height: 1.2;
}
#sec-member .area-price td small {
  font-size: 0.8em;
  line-height: 1;
}
#sec-member .area-price td span {
  background: var(--color-pink-light);
  padding: 2px 5px;
}
#sec-member .area-price td:nth-of-type(1) {
  text-align: center;
  font-size: 26px;
  color: var(--color-pink);
}
#sec-member .area-price td:nth-of-type(1) small:nth-of-type(2) {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.15em;
  display: block;
}
#sec-member .area-price td:nth-of-type(2) {
  font-size: 30px;
}
#sec-member .area-price td:nth-of-type(4) span {
  display: block;
  line-height: 1;
}
#sec-member .area-price td:nth-of-type(5) {
  color: var(--color-pink);
  font-size: 30px;
  padding-inline: 15px;
}

#sec-member .area-shop {
  padding: 50px 0;
  text-align: center;
}
#sec-member .area-shop h3 {
  font-family: var(--font-maru);
  font-size: 32px;
  color: var(--color-pink);
  font-weight: bold;
  line-height: 1.3;
}
#sec-member .area-shop h3 small {
  font-size: 70%;
}
#sec-member .area-shop figure {
  margin: 30px auto;
}
#sec-member .area-shop .block {
  display: inline-block;
  text-align: left;
  font-size: 20px;
}
#sec-member .area-shop .block sup {
  font-size: 12px;
}
#sec-member .area-shop .block p + p {
  margin-top: 10px;
  font-size: 18px;
}
#sec-member .area-shop a {
  display: block;
  width: fit-content;
  margin: 30px auto 0;
}
#sec-member .area-points {
  border-top: 2px solid var(--color-pink);
  padding: 50px 0 50px 30px;
}

#sec-member .area-points h3 {
  margin-bottom: 55px;
  font-family: var(--font-maru);
  font-size: 50px;
  color: var(--color-pink);
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.3;
}
#sec-member .area-points h3 em {
  font-style: normal;
  font-size: 54px;
}
#sec-member .area-points p.center {
  margin: 0 0 30px;
  text-align: center;
  font-size: 22px;
}
#sec-member .area-points p.center strong {
  font-size: 26px;
  font-weight: bold;
}
#sec-member .area-points ol {
  margin-top: 20px;
  list-style: none;
}
#sec-member .area-points li {
  padding-left: 40px;
  counter-increment: num;
  font-weight: bold;
  letter-spacing: 0.04em;
  position: relative;
}
#sec-member .area-points li + li {
  margin-top: 10px;
}
#sec-member .area-points li:before {
  content: counter(num);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  padding-bottom: 3px;
  aspect-ratio: 1/1;
  border-radius: 999rem;
  background: var(--color-pink);
  color: #fff;
  font-family: var(--font-maru);
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  left: 0;
  top: 5px;
  pointer-events: none;
}
#sec-member .area-method {
  padding: 50px;
  background: #fac8dc;
  background-image: linear-gradient(#ffd8ea 1px, transparent 1px), linear-gradient(90deg, #ffd8ea 1px, transparent 1px);
  background-size: 20px 20px;
  position: relative;
}
#sec-member .area-method .inner {
  background: #fff;
  margin: auto;
  padding: 30px 0;
  border-radius: 30px;
  text-align: center;
}
#sec-member .area-method h3 {
  padding-bottom: 20px;
  margin: 0 25px 20px;
  border-bottom: 2px solid var(--color-pink);
  font-family: var(--font-maru);
  font-size: 32px;
  color: var(--color-pink);
  font-weight: bold;
  line-height: 1.3;
}
#sec-member .area-method .lead {
  margin-bottom: 20px;
  font-weight: bold;
}
#sec-member .area-method .inner a {
  display: inline-block;
  margin-top: 20px;
}
#sec-member .area-method .inner a + p {
  margin: 5px auto 40px;
  text-align: center;
  color: #e40073;
  font-size: 18px;
}
#sec-member .area-method .indent-list {
  margin: 0 50px;
  text-align: justify;
  font-size: 20px;
  letter-spacing: 0.04em;
}

/*------------------------------

Campaign
------------------------------*/
#sec-campaign {
  padding: 50px 0 0;
}
#sec-campaign h2 {
  width: fit-content;
  margin: 0 auto 30px;
  padding-inline: 45px;
  background: #fff;
  border-radius: 999rem;
  border: 2px solid var(--color-orange);
  color: var(--color-orange);
  font-family: var(--font-maru);
  font-size: 28px;
  font-weight: bold;
  text-align: center;
}
#sec-campaign #campaign01 figure {
  width: 400px;
}
#sec-campaign #campaign02 figure {
  width: 260px;
}
/*------------------------------

Other
------------------------------*/
#sec-other {
  padding-top: 50px;
}
#sec-other .area-user {
  text-align: center;
}
#sec-other .area-user h2 {
  width: fit-content;
  margin: 0 auto 30px;
  padding-inline: 58px;
  background: #91197d;
  border-radius: 999rem;
  color: #fff;
  font-family: var(--font-maru);
  font-weight: 500;
  font-size: 27px;
}
#sec-other .area-user .lead {
  color: #91197d;
  font-family: var(--font-maru);
  font-size: 28px;
  font-weight: bold;
  /* letter-spacing: -0.05em; */
  line-height: 2;
}
#sec-other .area-user .lead + p {
  margin: 30px 0 10px;
  font-weight: bold;
}
#sec-other .area-app {
  margin-top: 50px;
  padding: 50px;
  background: var(--color-orange-light);
  text-align: center;
}
#sec-other .area-app figure {
  margin-bottom: 20px;
}
#sec-other .area-app p strong {
  font-family: var(--font-maru);
  font-size: 33px;
  letter-spacing: -0.08em;
}
#sec-other .area-app p + p {
  margin: 20px 0;
  font-weight: bold;
  text-align: justify;
}
#sec-other .area-app p + p .justify {
  display: block;
  text-align-last: justify;
  white-space: nowrap;
}
#sec-other .area-app .indent-list {
  font-size: 22px;
}
#sec-other .area-app a {
  margin-top: 30px;
  display: inline-block;
  color: var(--color-base);
}
#sec-other .area-app a:after {
  background: var(--color-base);
}