:root {
  --col-text: #4d4d4d;
  --col-text-link: #b9c2de;
  --col-text-link-sub: #247aef;
}

@media screen and (min-width: 769px) {
  .u-hide-on-pc {
    display: none !important
  }
}

@media screen and (max-width: 768px) {
  .u-hide-on-mobile {
    display: none !important
  }
}

#header {
  display: flex;
  justify-content: center;
}

#header-utility {
  width: 950px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (min-width: 768px) {
  #header-utility .leadTxt {
    font-size: 12px;
  }
}

.c-breadcrumb {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 768px) {
  .c-breadcrumb .c-breadcrumb__list {
    padding: 20px 28px;
  }

  .c-breadcrumb .c-breadcrumb__list .c-breadcrumb__link {
    font-size: 16px;
    padding-right: 30px;
  }

  .c-breadcrumb .c-breadcrumb__list .c-breadcrumb__link:not(.--current)::after {
    top: 1px;
    width: 24px;
    height: 24px;
  }
}

.l-footer {
  padding-top: 0 !important;
}

main {
  overflow: hidden;
}

/* .select-club {
  overflow: hidden;
  color: #fff;
  background: #06102f;
  line-height: 1.6;
} */

.select-club__section {
  position: relative;
  background-position: center top;
  background-repeat: no-repeat;
  /* background-size: cover; */
}

.select-club__content {
  box-sizing: border-box;
  width: 1000px;
  margin: 0 auto;
}

.select-club__image {
  display: block;
  width: 100%;
  height: auto;
}

.select-club__text-link {
  color: var(--col-text-link);
  text-decoration: underline;
}

.select-club__text-sub-link {
  color: var(--col-text-link-sub);
  text-decoration: underline;
}

.select-club__hero {
  padding-top: 48px;
  height: calc(641px + 48px);
  background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/hero-bg--pc.png");
  background-position: center bottom;
  z-index: 1;
  overflow: hidden;
}

.select-club__hero-label {
  display: block;
  width: 1920px;
  position: absolute;
  top: 0;
  left: 50%;
  margin: auto;
  transform: translateX(-50%);
}

.select-club__hero-image {
  width: 990px;
  margin: 32px 0 0;
  transform: translateX(-50%);
  left: 50%;
  position: relative;
}

.select-club__hero-text {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  column-gap: 24px;
  width: 1000px;
  margin: 18px 0 0;
  padding: 0;
  font-size: 12px;
  color: #fff;
  list-style: none;
  counter-reset: hero-footnote;
  transform: translateX(-50%);
  left: 50%;
  position: relative;
  line-height: 1.25;
}

.select-club__hero-text li {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr);
  align-items: start;
  counter-increment: hero-footnote;
}

.select-club__hero-text li::before {
  content: "※" counter(hero-footnote);
  white-space: nowrap;
}

.select-club__introduction {
  padding: 116px 0 72px;
  background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/introduction-bg--pc.png");
  margin-top: -81px;
  z-index: 0;
  height: 820px;
  display: flex;
}

.select-club__introduction-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.select-club__introduction-title {
  width: 537px;
  margin-bottom: 48px;
}

.select-club__introduction-text {
  width: 775px;
  margin-bottom: 40px;
}

.select-club__introduction-footnote {
  font-size: 13px;
  color: #fff;
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 18px;
}

.select-club__introduction-checklist {
  width: 649px;
}

.select-club__benefits {
  padding: 32px 0 0;
  background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/benefits-bg--pc.png");
  color: #06102f;
  height: 1827px;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.select-club__benefits-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.select-club__benefits-title {
  width: 387px;
  margin-bottom: 48px;
}

.select-club__benefits-text {
  width: 772px;
  margin-bottom: 56px;
}

.select-club__benefits-item {
  width: 960px;
  position: relative;
}

.select-club__benefits-footnote {
  position: absolute;
  padding: 0;
  font-size: 13px;
  line-height: 1.25;
  color: #4d4d4d;
  list-style: none;
}

.select-club__benefits-footnote li {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr);
}

.select-club__benefits-footnote li::before {
  content: "※";
}

.select-club__benefits-footnote[aria-label='おトク定期便の優待割引の注意事項'] {
  bottom: calc(44px + 24px);
  left: 24px;
}

.select-club__benefits-footnote[aria-label='店頭購入でうれしい特典の注意事項'] {
  top: 248px;
  left: 24px;
}

.select-club__benefits-item--text-01 {
  bottom: calc(44px + 50px);
  right: 62px;
}

.select-club__benefits-item--text-02 {
  bottom: -.5em;
  left: 0;
}

.select-club__benefits-next {
  width: 118px;
  margin: 33px auto 0;
}

.select-club__support {
  padding: 106px 0 56px;
  background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/support-bg--pc.png");
  margin-top: -60px;
  display: flex;
  justify-content: center;
}

.select-club__support-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.select-club__support-title {
  width: 568px;
  margin-bottom: 56px;
}

.select-club__support-item {
  width: 960px;
  position: relative;
}

.select-club__support-footnote {
  position: absolute;
  bottom: calc(40px + 24px);
  left: 26px;
  padding: 0;
  font-size: 13px;
  line-height: 1.25;
  color: #4d4d4d;
  list-style: none;
  counter-reset: support-footnote 4;
}

.select-club__support-footnote li {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr);
  counter-increment: support-footnote;
}

.select-club__support-footnote li::before {
  content: "※" counter(support-footnote);
  white-space: nowrap;
}

.select-club__support-line {
  width: 384px;
  margin: 0 auto;
}

.select-club__recommendation {
  padding: 80px 0 0;
  background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/recommendation-bg--pc.png");
  height: 754px;
  display: flex;
  justify-content: center;
  margin-top: -1px;
}

.select-club__recommendation-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.select-club__recommendation-title {
  width: 438px;
}

.select-club__recommendation-checklist {
  width: 649px;
  position: relative;
}

.select-club__recommendation-footnote {
  position: absolute;
  bottom: calc(-2.5em - 16px);
  padding: 0;
  font-size: 13px;
  line-height: 1.25;
  color: #fff;
  list-style: none;
}

.select-club__recommendation-footnote li {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr);
}

.select-club__recommendation-footnote li::before {
  content: "※";
}

.select-club__reasons {
  padding: 0;
  background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/reasons-bg--pc.png");
  height: 813px;
  display: flex;
  justify-content: center;
  margin-top: -4px;
}

.select-club__reasons-content {
  position: relative;
}

.select-club__reasons-title {
  width: 390px;
  margin: 0 auto 56px;
}

.select-club__reasons-grid {
  display: grid;
  grid-template-columns: repeat(2, 488px);
  gap: 24px;
}

.select-club__reasons-description {
  margin: 13px 109px 0 auto;
  text-align: right;
  font-size: 16px;
  color: #fff;
}

.select-club__reasons-footnote {
  margin-top: 36px;
  padding: 0;
  font-size: 13px;
  line-height: 1.25;
  color: #fff;
  list-style: none;
  counter-reset: support-footnote 6;
}

.select-club__reasons-footnote li {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr);
  counter-increment: support-footnote;
}

.select-club__reasons-footnote li::before {
  content: "※" counter(support-footnote);
  white-space: nowrap;
}

.select-club__product {
  padding: 195px 0 0;
  background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/product-bg--pc.png");
  height: 917px;
  display: flex;
  justify-content: center;
  margin-top: -2px;
}

.select-club__product-title {
  width: 970px;
  margin: 0;
}

.select-club__product-description {
  width: 1020px;
  margin-top: -46px;
  position: relative;
}

.select-club__product-text-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.select-club__product-text {
  font-size: 16px;
  line-height: 1.25;
  color: #fff;
}

.select-club__product-footnote {
  margin-top: 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1.25;
  color: #fff;
  list-style: none;
}

.select-club__product-footnote li {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr);
}

.select-club__product-footnote li::before {
  content: "※";
}

.select-club__technology {
  padding: 0 0 72px;
  background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/technology-bg--pc.png");
  background-color: #040c22;
  display: flex;
  justify-content: center;
  margin-top: -.5px;
}

.select-club__technology-title {
  width: 415px;
  margin: 0 auto 68px;
}

.select-club__technology-item {
  width: 1000px;
  margin: 0 0 68px;
  padding: 8px;
  background: linear-gradient(135deg, #fff, #d8bb87);
  color: #06102f;
  position: relative;
}

.select-club__technology-item[aria-label='シリコーンハイドロゲル素材で酸素をよく通す'] {
  margin-bottom: 0;
}

.select-club__technology-item-wrapper {
  position: relative;
  border: 1px solid #d8b875;
  margin: auto;
  padding: 0 20px 30px;
}

.select-club__technology-item-top-square::before,
.select-club__technology-item-top-square::after,
.select-club__technology-item-bottom-square::before,
.select-club__technology-item-bottom-square::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: #a48a57;
}

.select-club__technology-item-top-square::before {
  position: absolute;
  top: 0;
  left: 0;
}

.select-club__technology-item-top-square::after {
  position: absolute;
  top: 0;
  right: 0;
}

.select-club__technology-item-bottom-square::before {
  position: absolute;
  bottom: 0;
  left: 0;
}

.select-club__technology-item-bottom-square::after {
  position: absolute;
  bottom: 0;
  right: 0;
}

.select-club__technology-item:last-child {
  margin-bottom: 0;
}

.select-club__technology-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 340px);
  margin: 40px auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .select-club__technology-toggle:hover {
    opacity: 0.8;
  }
}

.select-club__technology-toggle-off {
  width: 340px;
}

.select-club__technology-toggle-on {
  display: none;
  width: 340px;
}

.select-club__technology-toggle[aria-expanded="true"] .select-club__technology-toggle-off {
  display: none;
}

.select-club__technology-toggle[aria-expanded="true"] .select-club__technology-toggle-on {
  display: block;
}

.select-club__technology-item-title {
  margin: -40px auto 0;
}

.select-club__technology-item[aria-label='うるおってやわらかい。そして扱いやすい'] .select-club__technology-item-title {
  width: 579px;
}

.select-club__technology-item[aria-label='乾きが気になる方にも、夜まで快適なつけ心地'] .select-club__technology-item-title {
  width: 596px;
}

.select-club__technology-item[aria-label='シリコーンハイドロゲル素材で酸素をよく通す'] .select-club__technology-item-title {
  width: 553px;
}

.select-club__technology-item-content {
  margin-top: 20px;
}

.select-club__technology-footnote {
  margin-top: 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1.25;
  color: #fff;
  list-style: none;
  counter-reset: support-footnote 11;
}

.select-club__technology-footnote li {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr);
  counter-increment: support-footnote;
}

.select-club__technology-footnote li::before {
  content: "※" counter(support-footnote);
  white-space: nowrap;
}

.select-club__faq {
  padding: 72px 0;
  background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/faq-bg--pc.png");
  background-size: 1920px 100%;
  display: flex;
  justify-content: center;
}

.select-club__faq-title {
  width: 282px;
  margin: 0 auto 47px;
}

.select-club__faq-item {
  width: 1000px;
}

.select-club__faq-item+.select-club__faq-item {
  margin-top: 32px;
}

.select-club__faq-footnote {
  margin-top: 16px;
  padding: 0;
  font-size: 13px;
  line-height: 1.25;
  color: #4d4d4d;
  list-style: none;
}

.select-club__faq-footnote li {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr);
}

.select-club__faq-footnote li::before {
  content: "※";
}

.select-club__cta {
  background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/cta-bg--pc.png");
  height: 447px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.select-club__cta-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.select-club__cta-product,
.select-club__cta-action {
  flex: 1 1 0;
}

.select-club__cta-product {
  width: 469px;
  position: relative;
  top: 80px;
  left: 20px;
}

.select-club__cta-action {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.select-club__cta-title {
  width: 477px;
}

.select-club__cta-button {
  display: block;
  width: 520px;
  margin: 16px auto 0;
  transition: opacity 0.2s ease;
  margin-right: -20px;
}

.select-club__cta-button:hover {
  opacity: 0.8;
}

.select-club__cta-footnote {
  margin-top: 24px;
  padding: 0;
  font-size: 13px;
  line-height: 1.25;
  color: #fff;
  list-style: none;
}

.select-club__cta-footnote li {
  display: grid;
  grid-template-columns: 1.5em minmax(0, 1fr);
}

.select-club__cta-footnote li::before {
  content: "※";
}

.select-club a:focus-visible,
.select-club button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.select-club__fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(2, 10, 37, .7);
  z-index: 100;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform 0.3s ease, visibility 0.3s;
}

.select-club__fixed.is-visible {
  visibility: visible;
  transform: translateY(0);
}

.select-club__fixed-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1000px;
  margin: 0 auto 10px;
}

@media screen and (max-width: 767px) {
  .select-club__content {
    width: calc(100% - 64px);
  }

  .select-club__hero-label {
    width: 100%;
    left: 0;
    right: 0;
    transform: none;
    max-width: 750px;
    margin: auto;
  }

  .select-club__hero-text {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    width: calc(100% - 64px);
    font-size: 19px;
    margin: 5px 0 0;
  }

  .select-club__hero {
    height: calc(1453px + 136px);
    max-width: 750px;
    padding-top: 136px;
    background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/hero-bg.png");
  }

  .select-club__hero-image {
    width: 696px;
  }

  .select-club__introduction {
    padding: 202px 0 70px;
    background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/introduction-bg.png");
    height: 1643px;
    max-width: 750px;
    margin-top: -145px;
  }

  .select-club__introduction-title {
    width: 686px;
    margin-bottom: 40px;
  }

  .select-club__introduction-text {
    width: 570px;
    margin-bottom: 50px;
  }

  .select-club__introduction-footnote {
    font-size: 20px;
    margin-bottom: 50px;
    line-height: 1.25;
  }

  .select-club__introduction-checklist {
    width: 686px;
  }

  .select-club__benefits {
    padding: 48px 0 54px;
    background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/benefits-bg.png");
    height: 3999px;
  }

  .select-club__benefits-title {
    width: 687px;
    margin-bottom: 64px;
  }

  .select-club__benefits-text {
    width: 516px;
    margin-bottom: 72px;
  }

  .select-club__benefits-next {
    width: 176px;
    margin: 73px auto 0;
  }

  .select-club__benefits-item {
    width: 100%;
  }

  .select-club__benefits-footnote {
    bottom: calc(44px + 24px);
    left: 40px;
    right: 40px;
    font-size: 20px;
  }

  .select-club__benefits-footnote[aria-label='おトク定期便の優待割引の注意事項'] {
    left: 40px;
  }

  .select-club__benefits-footnote[aria-label='店頭購入でうれしい特典の注意事項'] {
    top: 425px;
    left: 40px;
  }

  .select-club__benefits-item--text-01 {
    bottom: calc(44px + 72px);
    right: auto;
    left: 60px;
  }

  .select-club__benefits-item--text-02 {
    bottom: -1.8em;
  }

  .select-club__support {
    padding: 143px 0 72px;
    background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/support-bg.png");
    height: 1621px;
    margin-top: -75px;
  }

  .select-club__support-title {
    width: 599px;
    margin-bottom: 80px;
  }

  .select-club__support-line {
    width: 683px;
    margin: 20px auto;
  }

  .select-club__support-item {
    width: 100%;
  }

  .select-club__support-footnote {
    bottom: calc(40px + 32px);
    left: 40px;
    right: 40px;
    font-size: 20px;
  }

  .select-club__recommendation {
    padding: 96px 0 72px;
    background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/recommendation-bg.png");
    height: 1333px;
  }

  .select-club__recommendation-content {
    gap: 40px;
  }

  .select-club__recommendation-title {
    width: 669px;
  }

  .select-club__recommendation-checklist {
    width: 686px;
  }

  .select-club__recommendation-footnote {
    bottom: calc(-4.5em - 32px);
    left: 32px;
    right: 32px;
    font-size: 20px;
  }

  .select-club__reasons {
    padding: 70px 0 72px;
    background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/reasons-bg.png");
    height: 1814px;
  }

  .select-club__reasons-title {
    width: 650px;
    margin: 0 auto 96px;
  }

  .select-club__reasons-grid {
    grid-template-columns: repeat(2, 338px);
    gap: 10px;
  }

  .select-club__reasons-description {
    margin: 16px 0 0 auto;
    text-align: right;
    font-size: 22px;
    color: #fff;
  }

  .select-club__reasons-footnote {
    margin-top: 48px;
    padding: 0;
    font-size: 20px;
  }

  .select-club__product {
    padding: 170px 0 120px;
    background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/product-bg.png");
    height: 1695px;
  }

  .select-club__product-title {
    width: 718px;
  }

  .select-club__product-description {
    width: 750px;
    margin-top: -90px;
    margin-left: -32px;
  }

  .select-club__product-text-wrapper {
    right: 32px;
    left: auto;
    text-align: right;
    bottom: calc(-4.5em + -70px + -48px);
  }

  .select-club__product-text {
    font-size: 22px;
  }

  .select-club__product-footnote {
    font-size: 20px;
    margin-top: 48px;
  }

  .select-club__product-footnote li {
    grid-template-columns: 1.5em auto;
    justify-content: end;
  }

  .select-club__technology {
    padding: 0 0 72px;
    background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/technology-bg.png");
  }

  .select-club__technology-title {
    width: 732px;
    margin: 0 0 70px;
  }

  .select-club__technology-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .select-club__technology-item {
    width: 100%;
    margin-bottom: 100px;
    padding: 4px;
  }

  .select-club__technology-toggle {
    width: 100%;
    margin: 64px auto 0;
  }

  .select-club__technology-item-wrapper {
    border: 2px solid #d8b875;
  }

  .select-club__technology-item-content {}

  .select-club__technology-item-top-square::before,
  .select-club__technology-item-top-square::after,
  .select-club__technology-item-bottom-square::before,
  .select-club__technology-item-bottom-square::after {
    width: 10px;
    height: 10px;
  }

  .select-club__technology-item-top-square::before {
    position: absolute;
    top: -2px;
    left: -2px;
  }

  .select-club__technology-item-top-square::after {
    position: absolute;
    top: -2px;
    right: -2px;
  }

  .select-club__technology-item-bottom-square::before {
    position: absolute;
    bottom: -2px;
    left: -2px;
  }

  .select-club__technology-item-bottom-square::after {
    position: absolute;
    bottom: -2px;
    right: -2px;
  }

  .select-club__technology-item-title {
    margin: -50px auto 0;
  }

  .select-club__technology-item[aria-label='うるおってやわらかい。そして扱いやすい'] .select-club__technology-item-title {
    width: 579px;
  }

  .select-club__technology-item[aria-label='乾きが気になる方にも、夜まで快適なつけ心地'] .select-club__technology-item-title {
    width: 609px;
  }

  .select-club__technology-item[aria-label='シリコーンハイドロゲル素材で酸素をよく通す'] .select-club__technology-item-title {
    width: 605px;
  }

  .select-club__technology-toggle-off {
    width: 606px;
  }

  .select-club__technology-toggle-on {
    width: 606px;
  }

  .select-club__technology-footnote {
    margin-top: 30px;
    font-size: 20px;
  }

  .select-club__faq {
    padding: 104px 0 72px;
    background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/faq-bg.png");
  }

  .select-club__faq-item {
    width: 100%;
  }

  .select-club__faq-title {
    width: 379px;
    margin-bottom: 72px;
  }

  .select-club__faq-item+.select-club__faq-item {
    margin-top: 48px;
  }

  .select-club__faq-footnote {
    margin-top: 32px;
    font-size: 20px;
  }

  .select-club__cta {
    background-image: url("/sites/default/files/media/sp/images/service/totaloneselectclub/cta-bg.png");
    height: 893px;
    align-items: flex-start;
  }

  .select-club__cta-content {
    flex-direction: column;
    gap: 10px;
  }

  .select-club__cta-product,
  .select-club__cta-action {
    flex: none;
  }

  .select-club__cta-product {
    width: 514px;
    top: 120px;
  }

  .select-club__cta-action {
    width: 100%;
  }

  .select-club__cta-title {
    width: 672px;
  }

  .select-club__cta-footnote {
    margin-top: 40px;
    font-size: 20px;
  }

  .select-club__cta-button {
    width: 722px;
    margin-top: 48px;
    margin-right: auto;
  }

  .select-club__fixed-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 722px;
    margin: 0 auto;
  }
}