@charset "UTF-8";

/* page-subscription.php 専用: スマートフォン */
@media (max-width: 667px) {
  /* subscription landing page */
  .subscription_body .wrapper {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0 2.5vw 10vw;
  }
  .subscription_page {
    width: 100%;
    margin-inline: auto;
    padding: 6.75vw 0 10vw;
    border-radius: 5.8vw;
    overflow: visible;
  }
  .subscription_page .subscription_panel {
    width: 95%;
    margin-top: max(7vw,50px);
    padding: 7.5vw 5% 10vw;
    border-radius: 6.05vw;
  }
  .subscription_section_header h2 {
    font-size: 5.8vw;
    line-height: 1.45;
  }
  .subscription_section_en {
    gap: 1.5vw;
    margin-bottom: 2.6vw;
    font-size: max(1.1rem, 3.14vw);
  }
  .subscription_section_en::before {
    width: max(1.1rem, 3.14vw);
    height: max(1.1rem, 3.14vw);
  }
  .subscription_btn {
    width: max(14rem, 34vw);
    height: max(4rem, 9.7vw);
    padding: 0 9vw 0 4.3vw;
    border-radius: 50vw;
    font-size: max(1.2rem, 2.9vw);
  }
  .subscription_btn::after {
    right: 4.35vw;
    width: 1.05em;
    height: 1.05em;
  }

  /* hero */
  .subscription_hero {
    width: 92.5%;
    margin: 0 2.5% 0 5%;
    aspect-ratio: 373 / 502.615;
  }
  .subscription_hero_label {
    top: 0;
    width: fit-content;
    height: 5.65cqw;
    padding: 0 2.45cqw;
    border-radius: 3cqw;
    font-size: max(10px, 2.68cqw);
  }
  .subscription_hero_title {
    top: 7.5cqw;
    font-size: 11.8cqw;
    line-height: 1.2;
  }
  .subscription_hero_cost {
    top: 42.9cqw;
    gap: 2.05cqw;
  }
  .subscription_hero_cost > div {
    width: 24.65cqw;
    height: 11cqw;
    padding: 0 1.8cqw;
    gap: 1cqw;
    border-radius: 2.7cqw;
    align-items: baseline;
    align-content: center;
    justify-content: center;
  }
  .subscription_hero_cost dt,
  .subscription_hero_cost dd {
    font-size: 2.4cqw;
  }
  .subscription_hero_cost strong {
    margin-right: .6cqw;
    font-size: 6.25cqw;
  }
  .subscription_hero_lead {
    top: 59cqw;
    font-size: max(3.75cqw,1.4rem);
    line-height: 1.55;
  }
  .subscription_hero .subscription_btn {
    top: 121.4cqw;
    width: 46.65cqw;
    height: 13.4cqw;
    padding: 0 11cqw 0 4cqw;
    font-size: 3.75cqw;
  }
  .subscription_hero_visual {
    top: 59.4cqw;
    left: 21.4cqw;
    width: 78.5cqw;
    height: auto;
  }
  .subscription_hero_visual img {
    height: auto;
  }

  /* sliding work screenshots */
  .subscription_showcase {
    width: 100vw;
    max-width: 100vw;
    height: 68.24vw;
    margin: 8.7vw 0 0 calc(50% - 50vw);
    padding: 0;
    position: relative;
    z-index: 3;
    contain: inline-size;
    overflow: hidden;
  }
  .subscription_showcase_track {
    animation-duration: 46s;
  }
  .subscription_showcase_group {
    gap: 10.6vw;
    padding-right: 10.6vw;
  }
  .subscription_showcase_item {
    width: 31.4vw;
    border-radius: 2.4vw;
    box-shadow: 1.93vw 1.93vw 0 var(--sub-panel-light);
  }
  .subscription_showcase_item img {
    width: 100%;
    height: auto;
  }
  .subscription_showcase_item01,
  .subscription_showcase_item02,
  .subscription_showcase_item03,
  .subscription_showcase_item04,
  .subscription_showcase_item05,
  .subscription_showcase_item06,
  .subscription_showcase_item07 {
    transform: translateY(2.5vw) rotate(12deg);
  }

  /* concerns */
  .subscription_concerns .subscription_section_header {
    min-height: 19vw;
  }
  .subscription_concerns_illust {
    right: 13%;
    bottom: -1vw;
    width: 19.5cqw;
  }
  .subscription_concerns_list {
    grid-template-columns: 1fr;
    gap: 2.4vw;
    margin-top: 3.6vw;
  }
  .subscription_concerns_list li {
    min-height: 0;
    padding: 3.15vw 3.4vw;
    border-radius: 3.6vw;
    font-size: max(1.4rem, 3.38vw);
    line-height: 1.65;
  }
  .subscription_concerns_message {
    margin-top: 6.3vw;
    font-size: max(1.4rem, 3.38vw);
    line-height: 1.75;
  }

  /* price */
  .subscription_price .subscription_section_header {
    padding-right: 0;
  }
  .subscription_price_illust {
    top: 8.8vw;
    right: 5%;
    width: 22cqw;
  }
  .subscription_price_lead {
    margin-top: 5.6vw;
    padding-right: 16%;
    font-size: max(1.4rem, 3.5vw);
    line-height: 1.8;
  }
  .subscription_price_note {
    margin-top: 5vw;
    font-size: max(1.2rem, 2.65vw);
    line-height: 1.7;
  }
  .subscription_plan_list {
    grid-template-columns: 1fr;
    gap: 3.4vw;
    margin-top: 6.2vw;
  }
  .subscription_plan {
    padding: 4vw 3.5vw 4.5vw;
    border-width: 1.08cqw;
    border-radius: 3.9vw;
  }
  .subscription_plan h3 {
    margin-bottom: 4.8vw;
    padding: 2.1vw 3vw;
    border-radius: 50vw;
    font-size: max(1.4rem, 3.38vw);
  }
  .subscription_plan_price {
    margin-bottom: 4.8vw;
    font-size: max(1.3rem, 2.9vw);
  }
  .subscription_plan_price strong {
    font-size: max(3.1rem, 8.2vw);
  }
  .subscription_plan_pages {
    margin-bottom: 5vw;
    font-size: max(1.4rem, 3.38vw);
  }
  .subscription_plan_text {
    margin: 0 0 5vw;
    font-size: max(1.4rem, 3.38vw);
    line-height: 1.65;
  }
  .subscription_plan_btn {
    width: 43.6vw;
    min-height: 11.2vw;
    padding: 0 4vw;
    border-radius: 50vw;
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
  }
  .subscription_page .subscription_plan_btn {
    font-size: max(1.4rem, 3.38vw);
  }
  .subscription_common {
    margin-top: 8vw;
  }
  .subscription_common h3 {
    margin-bottom: 4.6vw;
    padding-bottom: 1.2vw;
    font-size: max(1.35rem, 3.38vw);
  }
  .subscription_common ul {
    gap: 1.9vw;
  }
  .subscription_common li {
    padding: 1.45vw 2.7vw;
    border-radius: 50vw;
    font-size: max(1rem, 2.42vw);
  }
  .subscription_common > p {
    margin-top: 6.5vw;
    font-size: max(1.2rem, 2.42vw);
    line-height: 1.65;
  }
  .subscription_works_link a {
    width: 100%;
    padding: 2.4vw 4vw;
    font-size: max(1.2rem, 2.9vw);
  }

  /* features */
  .subscription_feature_list {
    gap: max(10vw,30px);
    margin-top: 12vw;
  }
  .subscription_feature {
    min-height: 0;
    padding: 9vw 4vw 4vw;
    display: block;
    border-radius: 4.8vw;
  }
  .subscription_feature_number {
    top: -5.65vw;
    left: 3.3vw;
    width: 11.3vw;
    font-size: max(2rem, 6.9vw);
  }
  .subscription_feature_text h3 {
    margin-bottom: 3vw;
    font-size: max(1.4rem, 4.35vw);
    line-height: 1.45;
  }
  .subscription_feature_text p {
    font-size: clamp(1.4rem, 3.38vw, 2rem);
    line-height: 1.7;
  }
  .subscription_feature > picture,
  .subscription_feature > img,
  .subscription_feature_network {
    position: static;
    display: block;
    width: 46.25%;
    height: auto;
    margin: 4vw auto 0;
    transform: none;
  }
  .subscription_feature > picture > img {
    width: 100%;
    height: auto;
  }

  /* process */
  .subscription_process {
    display: block;
  }
  .subscription_process_list {
    --subscription-process-marker: max(3.8rem, 11.352657vw);
    --subscription-process-number: max(1.6rem, 4.830918vw);
    gap: 5.5vw;
    margin-top: 7vw;
  }
  .subscription_process_list li {
    grid-template-columns: var(--subscription-process-marker) minmax(0, 1fr);
    gap: 3.1vw;
    min-height: 0;
  }
  .subscription_process_list li:not(:last-child)::after {
    top: calc(var(--subscription-process-marker) / 2);
    left: calc(var(--subscription-process-marker) / 2);
    height: calc(100% + 5.5vw);
    border-left-width: max(1px, .32vw);
  }
  .subscription_process_list li > span {
    width: var(--subscription-process-marker);
    height: var(--subscription-process-marker);
    font-size: var(--subscription-process-number);
  }
  .subscription_process_list h3 {
    min-height: var(--subscription-process-marker);
    font-size: max(1.6rem, 4.35vw);
    line-height: 1.35;
  }
  .subscription_process_list p {
    margin-top: 1.2vw;
    font-size: clamp(1.4rem, 3.38vw,2rem);
    line-height: 1.7;
  }

  /* FAQ */
  .subscription_faq {
    width: 90%;
    margin-top: max(12vw,70px);
    display: block;
    padding-bottom: 9vw;
  }
  .subscription_faq_list {
    gap: 2.9vw;
    margin-top: 8vw;
  }
  .subscription_faq_item {
    border-radius: 3.6vw;
  }
  .subscription_faq_item button {
    grid-template-columns: 6.3vw minmax(0, 1fr);
    gap: 2.6vw;
    padding: 4vw 12vw 4vw 3vw;
    font-size: clamp(1.4rem, 3.38vw,2rem);
    line-height: 1.45;
  }
  .subscription_faq_item button > span,
  .subscription_faq_answer span {
    font-size: max(1.8rem, 5.1vw);
  }
  .subscription_faq_item button > i {
    right: 4.4vw;
    width: 4.5vw;
    height: 4.5vw;
  }
  .subscription_faq_item button > i::before,
  .subscription_faq_item button > i::after {
    height: max(1px, .6vw);
  }
  .subscription_faq_answer {
    padding: 0 5vw 0 3vw;
  }
  .subscription_faq_answer p {
    grid-template-columns: 6.3vw minmax(0, 1fr);
    gap: 2.6vw;
    padding-bottom: 4vw;
    font-size: clamp(1.4rem, 3.38vw,2rem);
    line-height: 1.65;
  }

  /* contact */
  .subscription_contact_lead {
    max-width: none;
    margin-top: 5vw;
    font-size: max(1.4rem, 3.38vw);
    line-height: 1.8;
  }
  .subscription_contact_form {
    margin-top: 8vw;
/*    gap: 5.3vw;*/
  }
  .subscription_contact_form label,
  .subscription_contact_form legend {
    font-size: max(1.2rem, 3.38vw);
  }
  .subscription_contact_purpose legend {
    margin-bottom: 2.6vw;
  }
  .subscription_contact_purpose label {
    margin-right: 1.9vw;
  }
  .subscription_contact_purpose label > span {
    min-height: 10.9vw;
    padding: 2.7vw 4vw 2.7vw 10vw;
    border-radius: 50vw;
  }
  .subscription_contact_purpose label > span::before {
    left: 2.7vw;
    width: 5.3vw;
    height: 5.3vw;
    border-width: 1.45vw;
  }
  .subscription_contact_field {
/*    gap: 2.5vw;*/
  }
  .subscription_contact_field input,
  .subscription_contact_field textarea {
    border-radius: 50vw;
    font-size: max(1.2rem, 3.38vw);
  }
  .subscription_contact_field input {
    height: 12.1vw;
    padding: 2vw 4vw;
  }
  .subscription_contact_field textarea {
    min-height: 31.9vw;
    padding: 3vw 4vw;
    border-radius: 3.6vw;
  }
  .subscription_contact_required {
    font-size: max(1.4rem, 2.42vw,1.6rem);
  }
  .subscription_submit,
  .subscription_line_btn {
    width: max(14rem, 42vw);
    height: max(4rem, 12.1vw);
  }
  .subscription_page .subscription_submit {
    font-size: max(1.2rem, 2.9vw);
    font-weight: 900;
  }
  .subscription_line_btn {
    margin-top: 4.5vw;
    gap: 2.3vw;
  }
  .subscription_line_btn img {
    width: 7.4vw;
  }
  .subscription_page .subscription_contact_field_label,
.subscription_page .subscription_contact_purpose legend {
  font-size: 1.4rem;
}

  /* demo modal */
  .subscription_modal {
    box-sizing: border-box;
    height: 100dvh;
    align-items: stretch;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .subscription_modal_window {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 14px;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background-color: var(--sub-panel-light);
    overflow: hidden;
  }
  .subscription_modal_close {
    top: 12px;
    right: 12px;
    width: 46px;
    height: 46px;
  }
  .subscription_modal_close::before,
  .subscription_modal_close::after {
    top: 21px;
    left: 11px;
    width: 24px;
  }
  .subscription_modal_head {
    flex: 0 0 auto;
    min-height: 46px;
    padding-right: 56px;
    display: block;
  }
  .subscription_modal_head h2 {
    font-size: clamp(1.4rem, 4.2vw, 1.8rem);
    line-height: 46px;
    white-space: nowrap;
  }
  .subscription_modal_device {
    display: none;
  }
  .subscription_modal_preview {
    min-height: 0;
    margin: 10px 0 12px;
    padding: 8px;
    flex: 1 1 auto;
    border: 2px solid var(--sub-blue);
    border-radius: 14px;
    background-color: var(--sub-blue);
    overflow: hidden;
  }
  .subscription_modal_frame_stage,
  .subscription_modal_frame_stage.is-sp {
    width:100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    border: 2px solid var(--sub-white);
    border-radius: 8px;
    background-color: var(--sub-white);
    box-shadow: 0 4px 16px rgba(51, 51, 51, 0.25);
  }
  .subscription_modal_frame_stage iframe,
  .subscription_modal_frame_stage.is-sp iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 393px;
    max-width: none;
    height: 892px;
    border: 0;
    transform-origin: center;
  }
  .subscription_modal_placeholder {
    font-size: 1.4rem;
  }
}

@media (max-width: 667px) {
  .subscription_contact_pages_note {
    font-size: max(1.2rem, 3.38vw);
    margin-bottom: 2.6vw;
  }
  .subscription_contact_pages_list {
    gap: 2vw;
  }
  .subscription_contact_pages_list label > span {
    min-height: 9.5vw;
    padding: 2vw 4vw 2vw 9vw;
  }
  .subscription_contact_pages_list label > span::before {
    left: 2.7vw;
    width: 4.2vw;
    height: 4.2vw;
  }
  .subscription_contact_pages_other {
    margin-top: 3vw;
  }
}

@media (max-width: 667px) {
  .subscription_faq_answer .subscription_faq_note {
    margin: -2.5vw 0 5vw 8.9vw;
    font-size: max(1.1rem, 2.9vw);
  }
}

@media (max-width: 667px) {
  .subscription_body .subscription_foot { width: 100%; padding: 40px 16px 32px; }
}

@media (max-width: 667px) {
  .subscription_top_logo { width: 48px; margin-bottom: 10px; }
}

@media (max-width: 667px) {
  .subscription_top_head { gap: 8px; margin-bottom: 10px; }
  .subscription_top_text { font-size: 1.1rem; }
}

@media (max-width: 667px) {
  .subscription_works_link a {
    gap: 8px;
    padding: 12px 14px;
    font-size: min(1.8rem, calc((80.7vw - 60px) / 22.5));
    letter-spacing: 0;
    border-radius: 36px;
  }
  .subscription_ext_icon { width: 16px; height: 16px; }
}

@media (max-width: 667px) {
  .subscription_works_link a { display: flex; }
  .subscription_works_link a > span:first-child { flex: 1; }
}

@media (max-width: 667px) {
  .subscription_pagetop { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}