@charset "utf-8";

#lpContents {
  --color-purple: #409;
  --color-purple-light: #6e38d5;
  --color-aqua: #2ed7de;
  --color-gray: #626262;
}
#lpContents *,
#lpContents *::before,
#lpContents *::after {
  box-sizing: border-box;
}

#lpContents {
  color: #000;
}
@media screen and (min-width:750px){
  #lpContents .only-sp {display: none;}
}
@media screen and (max-width: 749.98px) {
  #lpContents .only-pc {display: none;}
}

.text-aqua { color: var(--color-aqua); }

.lp-hero {
  position: relative;
  padding: min(7.6vw,48px);
  min-height: 630px;
  color: #fff;
  background-color: var(--color-purple);
  z-index: 1;
}
.lp-hero .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.lp-hero .bg img {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-hero .lp-inner {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 1320px;
  min-height: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--color-purple);
}
.lp-hero .ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-hero .info {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-hero .info-inner {
  display: flex;
  flex-direction: column;
}
.lp-hero .copy {
  font-weight: 700;
  line-height: 1.37;
}
.lp-hero .desc {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
}
@media screen and (min-width:750px){
  .lp-hero .lp-inner { min-height: 534px; }
  .lp-hero .ph, .lp-hero .info { width: 50%; }
  .lp-hero .info {
    padding: 24px;
    padding: min(3.2vw,48px);
  }
  .lp-hero .info-inner {
    gap: 24px;
    max-width: 532px;
  }
  .lp-hero .copy {
    font-size: 42px;
    font-size: min(4.2vw,42px);
  }
}
@media screen and (max-width: 749.98px) {
  .lp-hero { padding: 4%; }
  .lp-hero .lp-inner { flex-direction: column; }
  .lp-hero .info-inner {
    padding: 48px 6%;
    gap: 24px;
  }
  .lp-hero .copy {
    font-size: 25px;
    font-size: min(6.66vw,25px);
  }
  .lp-hero .desc { font-size: 14px; }
}

.app-disclaimer {
  display: flex;
  margin-top: 0;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}
.app-disclaimer > * {
  opacity: .6;
}
.app-disclaimer a {
  text-decoration: underline;
}
.app-disclaimer a:hover {
  opacity: .7;
  text-decoration: none;
}
@media screen and (min-width:750px){
  .app-disclaimer > * {
    font-size: 12px;
    font-size: min(1.3vw,12px);
  }
}
@media screen and (max-width: 749.98px) {
  .app-disclaimer > * { font-size: 11px; }
}

.lp-offer {
  width: 92%;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 60px;
  text-align: center;
}
.lp-offer-heading .first {
  margin-bottom: 10px;
}
.lp-offer-heading .first > span {
  display: inline-block;
  line-height: 1;
  padding: .25em 1em;
  font-weight: 700;
  border-radius: 4px;
  color: var(--color-purple);
  background-color: var(--color-aqua);
}
.lp-offer-heading .ttl {
  margin-bottom: .25em;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
}
.lp-offer-flow {
  display: flex;
  justify-content: center;
  margin: 48px auto;
  padding: 8px;
  font-size: 14px;
  color: #2d2926;
  overflow: hidden;
}
.lp-offer-flow .step {
  position: relative;
  width: 40px;
  z-index: 1;
}
.lp-offer-flow .step::before,
.lp-offer-flow .step::after {
  content: "";
  display: block;
  position: absolute;
  height: 6px;
  top: 17px;
  background-color: #e5e7eb;
  z-index: -1;
}
.lp-offer-flow .step::before {
  right: 100%;
}
.lp-offer-flow .step::after {
  left: 100%;
}
.lp-offer-flow .step:first-of-type::before,
.lp-offer-flow .step:last-of-type::after {
  display: none;
}
.lp-offer-flow .icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  z-index: 1;
}
.lp-offer-flow .icon::before,
.lp-offer-flow .icon::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
}
.lp-offer-flow .icon::before {
  width: 40px;
  height: 40px;
  left: 0;
  top: 0;
  background-color: #e5e7eb;
  z-index: 2;
}
.lp-offer-flow .icon::after {
  width: 56px;
  height: 56px;
  left: -8px;
  top: -8px;
  opacity: 0;
  background-color: var(--color-purple);
  z-index: 1;
}
.lp-offer-flow .icon > * {
  position: relative;
  z-index: 3;
}
.lp-offer-flow[data-crstep="0"] .step:first-of-type .icon,
.lp-offer-flow[data-crstep="1"] .step:first-of-type .icon,
.lp-offer-flow[data-crstep="1"] .step:nth-of-type(2) .icon {
  color: #fff;
}
.lp-offer-flow[data-crstep="2"] .step .icon {
  color: #fff;
}
.lp-offer-flow[data-crstep="0"] .step:first-of-type .icon::before,
.lp-offer-flow[data-crstep="0"] .step:first-of-type::after,
.lp-offer-flow[data-crstep="1"] .step:first-of-type .icon::before,
.lp-offer-flow[data-crstep="1"] .step:first-of-type::after,
.lp-offer-flow[data-crstep="1"] .step:nth-of-type(2) .icon::before,
.lp-offer-flow[data-crstep="1"] .step:nth-of-type(2)::before,
.lp-offer-flow[data-crstep="1"] .step:nth-of-type(2)::after,
.lp-offer-flow[data-crstep="2"] .step .icon::before,
.lp-offer-flow[data-crstep="2"] .step::before,
.lp-offer-flow[data-crstep="2"] .step::after {
  background-color: var(--color-purple-light);
}
.lp-offer-flow[data-crstep="0"] .step:first-of-type .icon::after,
.lp-offer-flow[data-crstep="1"] .step:nth-of-type(2) .icon::after,
.lp-offer-flow[data-crstep="2"] .step:nth-of-type(3) .icon::after {
  opacity: .15;
}
.lp-offer-flow .name {
  margin: 1em -2em 0;
}
.lp-offer-flow[data-crstep="2"] .step:first-of-type .icon,
.lp-offer-flow.step-hv .step:first-of-type .icon,
.lp-offer-flow.step-hv .step:nth-of-type(2) .icon {
  cursor: pointer;
}
@media screen and (min-width:750px){
  .lp-offer-flow { gap: 150px; }
  .lp-offer-flow .step::before,
  .lp-offer-flow .step::after {
    width: 75px;
  }
}
@media screen and (max-width: 749.98px) {
  .lp-offer-heading { text-align: left; }
  .lp-offer-heading .ttl { font-size: 24px; }
  .lp-offer-flow { gap: 84px; font-size: 12px; }
  .lp-offer-flow .step::before,
  .lp-offer-flow .step::after {
    width: 42px;
  }
}

.lp-offer-search {
  margin: 0 auto;
  padding: 0 4%;
}
.lp-offer-search .ttl {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 1.25em;
}
.lp-offer-search .search-block {
  max-width: 530px;
  margin: 0 auto;
  position: relative;
}
.lp-offer-search .search-block input[type="text"] {
  width: 100%;
  background-color: #f8f8f8;
  border-radius: 18px;
  box-sizing: border-box;
  font-size: 20px;
  font-style: normal;
  line-height: 1.2;
  padding: .75em 4em .75em 1em;
  border: 1px solid #d8d8d8;
  color: #2d2926;
  box-shadow: 0 0 0 rgba(0,0,0,0.3) inset;
  outline: none;
}
.lp-offer-search .search-block input[type="text"]::placeholder {
  color: var(--color-gray);
  transition: color .3s ease-in-out;
}
.lp-offer-search .search-block input[type="text"]:focus::placeholder {
  color: transparent;
}
.lp-offer-search .search-block #gym-search-button {
  position: absolute;
  right: 0;
  top: 0;
  width: 4em;
  height: 100%;
  background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMSAzQzYuNTgxNzIgMyAzIDYuNTgxNzIgMyAxMUMzIDE1LjQxODMgNi41ODE3MiAxOSAxMSAxOUMxMi44NDg3IDE5IDE0LjU1MSAxOC4zNzI5IDE1LjkwNTYgMTcuMzE5OUwxOS4yOTI5IDIwLjcwNzFDMTkuNjgzNCAyMS4wOTc2IDIwLjMxNjYgMjEuMDk3NiAyMC43MDcxIDIwLjcwNzFDMjEuMDk3NiAyMC4zMTY2IDIxLjA5NzYgMTkuNjgzNCAyMC43MDcxIDE5LjI5MjlMMTcuMzE5OSAxNS45MDU2QzE4LjM3MjkgMTQuNTUxIDE5IDEyLjg0ODcgMTkgMTFDMTkgNi41ODE3MiAxNS40MTgzIDMgMTEgM1pNNSAxMUM1IDcuNjg2MjkgNy42ODYyOSA1IDExIDVDMTQuMzEzNyA1IDE3IDcuNjg2MjkgMTcgMTFDMTcgMTQuMzEzNyAxNC4zMTM3IDE3IDExIDE3QzcuNjg2MjkgMTcgNSAxNC4zMTM3IDUgMTFaIiBmaWxsPSIjZmZmZmZmIi8+PC9zdmc+") no-repeat center center var(--color-purple-light);
  background-size: 2.5em auto;
  text-indent: -999em;
  border: none;
  box-shadow: none;
  border-radius: 0 18px 18px 0;
}
.lp-offer-search .search-block #gym-search-button.disabled {
  pointer-events: none;
  background: url(/assets/img/loading_gray.gif) no-repeat center center;
  background-size: 50% auto;
}
@media screen and (max-width: 749.98px) {
  .lp-offer-search .search-block input[type="text"] {
    padding: .65em 3.25em .65em .75em;
    font-size: 16px;
    border-radius: 12px;
  }
  .lp-offer-search .search-block #gym-search-button {
    width: 3.25em;
    background-size: 1.75em auto;
    border-radius: 0 12px 12px 0;
  }
}

#gym-search-result.loading {
  position: relative;
}
#gym-search-result.loading::before,
#gym-search-result.loading::after {
  content: "";
  display: block;
  pointer-events: none;
}
#gym-search-result.loading::before {
  width: 100%;
  height: 120px;
}
#gym-search-result.loading::after {
  position: absolute;
  left: calc(50% - 20px);
  top: 60px;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNkUzOEQ1RkYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zz48cmVjdCB4PSIxMSIgeT0iMSIgd2lkdGg9IjIiIGhlaWdodD0iNSIgb3BhY2l0eT0iLjE0Ii8+PHJlY3QgeD0iMTEiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIHRyYW5zZm9ybT0icm90YXRlKDMwIDEyIDEyKSIgb3BhY2l0eT0iLjI5Ii8+PHJlY3QgeD0iMTEiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDEyIDEyKSIgb3BhY2l0eT0iLjQzIi8+PHJlY3QgeD0iMTEiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIHRyYW5zZm9ybT0icm90YXRlKDkwIDEyIDEyKSIgb3BhY2l0eT0iLjU3Ii8+PHJlY3QgeD0iMTEiIHk9IjEiIHdpZHRoPSIyIiBoZWlnaHQ9IjUiIHRyYW5zZm9ybT0icm90YXRlKDEyMCAxMiAxMikiIG9wYWNpdHk9Ii43MSIvPjxyZWN0IHg9IjExIiB5PSIxIiB3aWR0aD0iMiIgaGVpZ2h0PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgMTIgMTIpIiBvcGFjaXR5PSIuODYiLz48cmVjdCB4PSIxMSIgeT0iMSIgd2lkdGg9IjIiIGhlaWdodD0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDEyIDEyKSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBjYWxjTW9kZT0iZGlzY3JldGUiIGR1cj0iMC43NXMiIHZhbHVlcz0iMCAxMiAxMjszMCAxMiAxMjs2MCAxMiAxMjs5MCAxMiAxMjsxMjAgMTIgMTI7MTUwIDEyIDEyOzE4MCAxMiAxMjsyMTAgMTIgMTI7MjQwIDEyIDEyOzI3MCAxMiAxMjszMDAgMTIgMTI7MzMwIDEyIDEyOzM2MCAxMiAxMiIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2c+PC9zdmc+") no-repeat center center;
  background-size: 100% auto;
}
#gym-search-result .listarea,
#gym-search-result .formarea {
  display: none;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
}
#gym-search-result .listarea.active,
#gym-search-result .formarea.active{
  display: block;
}
#gym-search-result.loading .listarea,
#gym-search-result.loading .formarea
#gym-search-result.loading .listarea.active,
#gym-search-result.loading .formarea.active {
  display: none;
}
#gym-search-result .listarea {
  max-width: 704px;
  position: relative;
}
#gym-search-result .listarea.has-scr::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
  width: 100%;
  padding-bottom: 10%;
  background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 20;
}
#gym-search-result .result-list {
  position: relative;
  overflow-y: auto;
  max-height: 440px;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, .05);;
}
#gym-search-result .result-list.nodata {
  border: none;
  border-radius: 0px;
  box-shadow: none;
}
#gym-search-result .result-ttl {
  margin-bottom: 1em;
  text-align: left;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
}
#gym-search-result .result-ttl > span {
  display: inline-block;
  font-size: 16px;
}
#gym-search-result .result-list .item {
  position: relative;
  display: flex;
  align-items: center;
  text-align:left;
  padding: 24px;
  cursor: pointer;
  transition: background-color .15s linear, color .15s linear;
}
#gym-search-result .result-list .item[data-hidden="1"] {
  cursor: default;
  pointer-events: none;
}
#gym-search-result .result-list .item[data-hidden="1"] .shop-btn {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
#gym-search-result .result-list .item + .item {
  border-top:1px solid #ddd;
}
/* #gym-search-result .result-list .item:hover {
  color: var(--color-purple);
  background: #f6f4fc;
} */
#gym-search-result .result-list .name {
  margin: 0 0 .35em;
  /* width: 250px; */
  font-size: 120%;
  font-weight: 700;
}
#gym-search-result .result-list .name > span {
	display: block;
	color: var(--color-purple);
	font-size: 75%;
}
#gym-search-result .result-list .info {
  width: calc(100% - 125px);
  padding: 0 24px 0 0;
  flex-grow: 1;
}
#gym-search-result .result-list .info .address,
#gym-search-result .result-list .info .access {
  font-size: 80%;
  margin: 0;
}
#gym-search-result .result-list .info .access {
  margin-top: .25em;
}
#gym-search-result .result-list .shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 125px;
	height: 40px;
  color: #fff;
	font-size: 14px;
  font-weight: 700;
  border-radius: 40px;
  text-align: center;
  background-color: var(--color-purple-light);
  border: 2px solid var(--color-purple-light);
  transition: color .15s linear, background-color .15s linear, border .15s linear;
}
#gym-search-result .result-list .item:hover .shop-btn {
  background: var(--color-purple);
}
#gym-search-result .formarea .left {
  text-align: left;
  padding: 40px 0;
}
#gym-search-result .formarea .left .ttl {
  margin-bottom: .75em;
  font-weight: 700;
  font-size: 20px;
}
#gym-search-result .formarea .left .ttl::after {
  content: "";
  display: block;
  width: 75px;
  height: 10px;
  border-radius: 10px;
  margin-top: 1em;
  background: linear-gradient(to right, rgb(46, 215, 222), rgb(164, 42, 249), rgb(68, 0, 153));
}
#gym-search-result .formarea .form-wrap iframe {
  background-color: #f8f8f8;
  border-radius: 8px;
}
#gym-selected-data .name {
  margin-bottom: .25em;
  font-weight: 700;
  font-size: 110%;
}
#gym-selected-data .name > span {
	display: block;
	color: var(--color-purple);
	font-size: 75%;
}
#gym-selected-data .address {
  margin-bottom: .25em;
}
#gym-selected-data .access {
  font-size: 80%;
}
#gym-selected-data .shop-btn {
  display: none;
}
#gym-selected-back {
  margin-top: 30px;
  font-size: 90%;
}
#gym-selected-back.disabled {
  display: none;
}
#gym-selected-back > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding:.5em 1em;
  color: var(--color-purple);
  background-color:#fff;
  cursor: pointer;
  border-radius: 100vh;
  border: 1px solid var(--color-purple);
  transition: color .15s linear, background-color .15s linear, border .15s linear;
}
#gym-selected-back > span::before {
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3Ryb2tlLXdpZHRoPSIxIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zIDEwYS43NS43NSAwIDAgMSAuNzUtLjc1aDEwLjYzOEwxMC4yMyA1LjI5YS43NS43NSAwIDEgMSAxLjA0LTEuMDhsNS41IDUuMjVhLjc1Ljc1IDAgMCAxIDAgMS4wOGwtNS41IDUuMjVhLjc1Ljc1IDAgMSAxLTEuMDQtMS4wOGw0LjE1OC0zLjk2SDMuNzVBLjc1Ljc1IDAgMCAxIDMgMTBaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjwvcGF0aD48L3N2Zz4=");
  mask-position: center center;
  mask-size: 100% auto;
  transform: rotate(180deg);
}

@media screen and (min-width:750px){
  #gym-search-result .formarea.active { display: flex; justify-content: space-between; }
  #gym-search-result .formarea .left,
  #gym-search-result .formarea .right{ width: calc(50% - 20px); }
  #gym-search-result .formarea .left { max-width: 480px; }
}
@media screen and (max-width: 749.98px) {
  #gym-search-result .result-ttl { font-size: 20px; }
  #gym-search-result .result-list .item { flex-direction: column; }
  #gym-search-result .result-list .info {
    margin: 0 0 .25em;
    width: 100%;
    padding: 0;
  }
  #gym-search-result .result-list .shop-btn {
    display: inline-flex;
    margin: 10px auto;
    width: 100%;
    text-align: center;
    border-width: 1px;
    margin-bottom: 0;
  }
}

.lp-video {
  position: relative;
  overflow: hidden;
  margin-top: 160px;
  color: #fff;
  background-color: var(--color-purple);
}
.lp-video::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
}
.lp-video .lp-inner {
  position: relative;
  max-width: 992px;
  margin: 0 auto;
  text-align: center;
  z-index: 5;
}
.lp-video .video-area {
  position: relative;
  padding-top: 56.17021276595745%;
}
.lp-video .text-area {
  padding: 40px 0 120px;
}
.lp-video .ttl {
  margin-bottom: .5em;
  font-weight: 900;
  font-size: 38px;
  line-height: 1.125;
}
.lp-video .copy {
  font-size: 15px;
  font-weight: 700;
  line-height: 2;
}
.lp-video .bg {
  position: absolute;
  left: 0;
  top: 50px;
  width: 100%;
  height: 50px;
  z-index: 1;
}
.lp-video .info {
  display: flex;
  justify-content: center;
  gap: 50px;
  margin: 48px auto 0;
  font-size: 15px;
  font-weight: 700;
}
.lp-video .info .desc {
  margin-top: 1em;
  line-height: 1.67;
}
.lp-video .bg .bg-svg {
  background-image: url("../img/apple-fitness-offer/bg_line.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 50px;
  position: static;
  inset: 40px 0% auto;
}
@media screen and (min-width:750px){
  .lp-video .info .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
  }
}
@media screen and (max-width: 991.98px) {
  .lp-video .lp-inner {
    width: calc(100% - 48px);
  }
}
@media screen and (max-width: 749.98px) {
  .lp-video .lp-inner { width: 92%; }
  .lp-video { margin-top: 80px; }
  .lp-video::before { height: 30px; }
  .lp-video .lp-inner { text-align: left; }
  .lp-video .bg { top: 30px; }
  .lp-video .text-area { padding-bottom: 80px; }
  .lp-video .ttl { font-size: 28px; font-size: min(7.46vw, 28px); }
  .lp-video .copy { font-size: 13px; }
  .lp-video .info { flex-direction: column; font-size: 13px; }
}

.lp-trial {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 80px 48px;
  text-align: center;
}
.lp-trial .lp-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 92%;
  max-width: 1180px;
  margin: 0 auto 48px;
}
.lp-trial .ttl {
  font-weight: 900;
  font-size: 40px;
  line-height: 1.2;
}
.lp-trial .desc {
  font-size: 14px;
  line-height: 1.57;
  color: var(--color-gray);
}
.lp-trial .gallery {
  background-image: url("../img/apple-fitness-offer/feature_gallery.webp");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: contain;
  justify-content: center;
  align-items: flex-start;
  min-width: 100%;
  min-height: 360px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.lp-trial .trial-img {
  object-fit: contain;
  display: none;
}
.lp-trial .trial-btn {
  display: inline-flex;
  padding: .5em 1.5em;
  border-radius: 100vh;
  background-color: var(--color-purple-light);
  color: #fff;
  text-align: center;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  height: 48px;
  max-height: none;
  font-weight: 700;
  font-size: 20px;
  line-height: normal;
  min-width: 12em;
  transition: background-color .15s linear;
}
.lp-trial .trial-btn:hover {
  background-color: var(--color-purple);
}
@media screen and (min-width:750px){
  .lp-trial .ttl {
    padding: .5em 0 .35em;
  }
}
@media screen and (min-width:1280px){
  .lp-trial .gallery {
    flex: none;
    justify-content: center;
    align-items: flex-start;
    min-height: 360px;
    position: static;
  }
  .lp-trial .trial-img {
    object-fit: cover;
    object-position: 50% 0%;
    position: static;
    inset: 0% 0% auto;
  }
}
@media screen and (max-width: 991.98px) {
  .lp-trial {
    padding-left: 0;
    padding-right: 0;
  }
  .lp-trial .gallery {
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
    min-height: 0;
  }
  .lp-trial .trial-img {
    object-fit: cover;
    display: block;
    height: 300px;
  }
}
@media screen and (max-width: 749.98px) {
  .lp-trial { padding: 48px 0; }
  .lp-trial .trial-img { max-height: 200px; }
  .lp-trial .ttl{font-size: 24px;}
  .lp-trial .desc{text-align: left;}
  .lp-trial .trial-btn {
    height: 36px;
    font-size: 16px;
    min-width: 14em;
  }
}

.lp-app {
  padding: 80px 5% 0;
  color: #fff;
  background-color: var(--color-purple);
}
.lp-app .lp-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 1132px;
  margin-left: auto;
  margin-right: auto;
}
.lp-app .ttl {
  margin-bottom: 24px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.25;
}
.lp-app .desc {
  margin-bottom: 24px;
  font-size: 17px;
}
.lp-app .step-ttl {
  margin-bottom: 12px;
  font-size: 36px;
  font-weight: 700;
}
.lp-app .app-flow {
  counter-reset: steps;
  padding: 0;
  margin: 0 0 24px;
}
.lp-app .app-flow > li {
  display: flex;
  align-items: center;
  counter-increment: steps;
  margin-bottom: 20px;
}
.lp-app .app-flow > li:first-child a {
  font-weight: 700;
}
.lp-app .app-flow > li::before {
  content: counter(steps);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: .75em;
  font-size: 20px;
  font-weight: 900;
  line-height: 18px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: var(--color-purple);
  background-color: var(--color-aqua);
}
.lp-app .app-flow > li small {
  display: block;
}
.lp-app .app-flow a {
  text-decoration: underline;
}
.lp-app .app-flow a:hover {
  text-decoration: none;
}
.lp-app .app-img {
  margin-bottom: 0;
}
@media screen and (min-width:750px){
  .lp-app { padding: 80px 40px 0; }
}
@media screen and (min-width:992px){
  .lp-app {
    position: relative;
    overflow: hidden;
    z-index: 5;
  }
  .lp-app::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 70%;
    height: 100%;
    background: url("../img/apple-fitness-offer/bg_app.svg") no-repeat center bottom;
    background-size: 100% auto;
    margin-bottom: -5%;
    z-index: -1;
  }
  .lp-app .text-area,
  .lp-app .app-img { width: 50%; }
  .lp-app .text-area { padding-bottom: 80px; }
  .lp-app .ttl { font-size: min(4.6vw, 48px); }
  .lp-app .desc { font-size: min(1.6vw, 17px); }
  .lp-app .app-img {
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;
    width: 50%;
    height: auto;
  }
}
@media screen and (max-width: 991.98px) {
  .lp-app {
    background-image: url("../img/apple-fitness-offer/bg_app.svg");
    background-position: 50% 140%;
    background-repeat: no-repeat;
    background-size: auto;
  }
  .lp-app .lp-inner {
    flex-flow: column;
    align-items: center;
  }
}
@media screen and (max-width: 749.98px) {
  .lp-app { padding-top: 48px; }
  .lp-app .ttl { font-size: 28px; font-size: min(7.46vw,48px); }
  .lp-app .desc { font-size: 14px; }
  .lp-app .step-ttl { font-size: 20px; font-size: min(5.33vw,36px); }
  .lp-app .app-img { padding: 0 24px; margin-top: 40px; }
}

.lp-faq {
  width: 90%;
  max-width: 1132px;
  margin: 80px auto;
}
.lp-faq .faq-ttl {
  margin-bottom: .5em;
  font-weight: 900;
  font-size: 36px;
  font-size: min(5.33vw,36px);
}
.lp-faq .faq-list {
  counter-reset: faqs;
}
.lp-faq .faq-item {
  counter-increment: faqs;
  border-bottom: 1px solid #d8d8d8;
}
.lp-faq .faq-item::details-content {
  content-visibility: unset;
  display: block grid;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-faq .faq-item::details-content {
    transition-duration: 300ms;
    transition-property: grid-template-rows;
  }
}
.lp-faq .faq-item:not([open])::details-content {
  grid-template-rows: 0fr;
}
.lp-faq .faq-item[open]::details-content {
  grid-template-rows: 1fr;
}
.lp-faq .faq-item .answer-wrapper {
  overflow: hidden;
}
.lp-faq .question {
  display: flex;
  padding: 24px 0;
  font-weight: 600;
  font-size: 18px;
  font-size: min(4.26vw,18px);
  cursor: pointer;
}
.lp-faq .question .num,
.lp-faq .question .ico {
  flex-shrink: 0;
}
.lp-faq .question .ttl {
  flex-grow: 1;
  padding: 0 1em;
}
.lp-faq .question .num {
  width: 1.5em;
  text-align: right;
}
.lp-faq .question .num::before {
  content: counter(faqs)".";
}
.lp-faq .question .ico {
  display: block;
  margin-left: auto;
  width: 24px;
  background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjM1MTQ3IDkuNjQzNjZDNi44MjAxIDkuMTc1MDMgNy41Nzk5IDkuMTc1MDMgOC4wNDg1MyA5LjY0MzY2TDEyIDEzLjU5NTFMMTUuOTUxNSA5LjY0MzY2QzE2LjQyMDEgOS4xNzUwMyAxNy4xNzk5IDkuMTc1MDMgMTcuNjQ4NSA5LjY0MzY2QzE4LjExNzIgMTAuMTEyMyAxOC4xMTcyIDEwLjg3MjEgMTcuNjQ4NSAxMS4zNDA3TDEyLjg0ODUgMTYuMTQwN0MxMi4zNzk5IDE2LjYwOTMgMTEuNjIwMSAxNi42MDkzIDExLjE1MTUgMTYuMTQwN0w2LjM1MTQ3IDExLjM0MDdDNS44ODI4NCAxMC44NzIxIDUuODgyODQgMTAuMTEyMyA2LjM1MTQ3IDkuNjQzNjZaIiBmaWxsPSIjMkQyOTI2Ii8+PC9zdmc+") no-repeat center center;
  background-size: 24px auto;
  transition: transform .3s ease-in-out;
}
.lp-faq .faq-item[open] .question {
  color: var(--color-purple);
}
.lp-faq .faq-item[open] .question .ico {
  transform: rotate(90deg);
}
.lp-faq .answer {
  padding: 0 0 24px 2.8em;
  line-height: 1.75;
}
.lp-faq .answer .dot-list {
  padding-left: 1.25em;
  list-style: disc;
}
.lp-faq .answer a {
  text-decoration: underline;
}
.lp-faq .answer a:hover {
  text-decoration: none;
  color: var(--color-purple);
}
@media screen and (max-width: 749.98px) {
  .lp-faq .question {
    padding: 16px 0;
    font-size: 14px;
  }
  .lp-faq .answer {
    font-size: 13px;
    padding: 0 0 16px 2.8em;
  }
}

.lp-disclaimer {
  padding: 80px 60px;
  color: #221551;
  background-color: #2d2826;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.offer-disclaimer-wrap {
  max-width: 1132px
}
.offer-disclaimer-h2 {
  color: #fff;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.2;
}
.offer-disclaimer-p {
  margin-top: 24px;
  color: #fff;
  font-size: 14px;
  line-height: 150%;
}
.apple-disclaimer-link {
  color: #fff;
  text-decoration: underline;
}
.apple-disclaimer-link:hover {
  opacity: .7;
  color: #fff;
}
@media screen and (max-width: 749.98px) {
  .lp-disclaimer {
    padding: 48px 5%;
  }
}

.lp-howto-app {
  width: 92%;
  max-width: 1320px;
  margin: 0 auto;
  padding-top: 80px;
  text-align: center;
}
.lp-howto-app .howto-app-ttl {
  margin-bottom: 1em;
  font-size: 36px;
  font-weight: 900;
  color: var(--color-purple);
}
.lp-howto-app .howto-app-step {
  padding: 0;
  margin: 0 auto;
  text-align: left;
  font-size: 20px;
  font-size: min(2vw,20px);
  line-height: 1.5;
}
.lp-howto-app .howto-app-step .num {
  font-weight: 900;
  color: var(--color-purple-light);
}
.lp-howto-app .howto-app-step .ttl {
  margin-bottom: .5em;
  font-weight: 700;
}
.lp-howto-app .howto-app-step .desc {
  margin-bottom: 1.5em;
  font-size: 80%;
  color: #757575;
}
.lp-howto-app .howto-app-step .display {
  display: block;
}
@media screen and (min-width:750px) {
  .lp-howto-app .howto-app-step {
    display: flex;
    justify-content: space-between;
  }
  .lp-howto-app .howto-app-step .item {
    display: flex;
    flex-direction: column;
    width: calc(33.33% - 1.6em);
  }
  .lp-howto-app .howto-app-step .display {
    margin-top: auto;
  }
}
@media screen and (max-width: 749.98px) {
  .lp-howto-app {
    padding-top: 48px;
  }
  .lp-howto-app .howto-app-ttl {
    font-size: 25px;
    font-size: min(6.66vw,25px);
  }
  .lp-howto-app .howto-app-step {
    width: 92%;
    font-size: 16px;
  }
  .lp-howto-app .howto-app-step .item + .item {
    margin-top: 32px;
  }
  .lp-howto-app .howto-app-step .display {
    width: 65%;
    max-width: 400px;
    margin: 0 auto;
  }
}

.lp-app-dl {
  color: #fff;
  text-align: center;
  background-color: var(--color-purple);
}
.lp-app-dl::before {
  content: "";
  display: block;
  background-image: url("../img/apple-fitness-offer/bg_line.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 50px;
  inset: 40px 0% auto;
}
.lp-app-dl .lp-inner {
  padding: 80px 4%;
}
.lp-app-dl .app-dl-ttl {
  margin: 0;
}
.lp-app-dl .app-dl-ttl .sub {
  display: inline-block;
  line-height: 1;
  padding: .25em 1em;
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  color: var(--color-purple);
  background-color: var(--color-aqua);
}
.lp-app-dl .app-dl-ttl .main {
  display: block;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.125;
}
.lp-app-dl .app-dl-desc {
  margin-top: 1.5em;
  line-height: 1.5;
}
.lp-app-dl .store-bnr {
  margin-top: 1.5em;
}
.lp-app-dl .store-bnr a {
  transition: opacity .3s ease-in-out;
}
@media screen and (max-width: 749.98px) {
  .lp-app-dl .lp-inner {
    padding: 20px 4% 40px;
  }
  .lp-app-dl .app-dl-ttl .main {
    font-size: 32px;
  }
  .lp-app-dl .app-dl-desc {
    font-size: 13px;
  }
}
@media (any-hover: hover) {
  .lp-app-dl .store-bnr a:hover {
    opacity: .7;
  }
}