@charset "utf-8";

* {
    line-height: 1.5;
}

.guide_wrapper section {
    margin: 0;
    padding: 54px 0 0;
}

.guide_wrapper section:not(:nth-of-type(1)) {
    border-top: 2px solid var(--color-main);
}

.guide_wrapper section + section {
    margin-top: 64px;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

.common-title,
.common-subtitle,
.common-teriarytitle {
    position: relative;
    font-weight: bold;
    line-height: 1;
}

.common-title {
    font-size: 48px;
}

.common-subtitle {
    font-size: 40px;
}

.common-teriarytitle {
    font-size: 20px;
}

.changeOrder_wrap {
    display: flex;
    flex-wrap: wrap;
}

.guide_wrapper[data-type="new"] .changeOrder_wrap {
    flex-direction: column-reverse;
}

/* ご利用開始の流れ
-----------------------------------------------------------*/
.typeTab_wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 30px;
}

.typeTab_wrap label {
    display: block;
    width: 592px;
}

.typeTab_wrap label input {
    display: none;
}

.typeTab_wrap .typeTab {
    display: block;
    width: 100%;
    height: 64px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background-color: #f2f2f2;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    line-height: 64px;
    color: #666666;
    cursor: pointer;
}

.typeTab_wrap input[type="radio"]:checked + .typeTab {
    background-color: var(--color-main);
    color: white;
    cursor: default;
}

/* 新規お申し込み・乗り換え（MNP）
-----------------------------------------------------------*/
.flow_wrap {
    width: 100%;
    margin-top: 64px;
    padding: 60px 0 0;
    border-top: 1px solid #aaaaaa;
}

.flow_wrap[data-step="1"] {
    margin-top: 0;
    padding-top: 36px;
    border-top: none;
}

.subTitle_wrap {
    width: 100%;
    margin: 0;
    padding: 0;
}

.subTitle_wrap .stepNum {
    display: block;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    color: var(--color-main);
}

.subTitle_wrap .common-subtitle {
    margin-top: 16px;
}

.alertBox {
    padding: 36px 40px;
}

.alertBox p {
    font-size: 16px;
}

.alertBox strong {
    display: block;
    font-size: 16px;
    font-weight: bold;
}

.alertBox p + strong {
    margin-top: 12px;
}

.alertBox a {
    font-size: 16px;
    text-decoration: underline;
}

p + .alertBox {
    margin-top: 36px;
}

.flow_image + .alertBox {
    margin-top: 24px;
}

.alertBox + .alertBox {
    margin-top: 16px;
}

.flow_lead {
    font-size: 16px;
}

.subTitle_wrap + .flow_lead {
    margin-top: 26px;
}

.flow_image {
    margin-top: 40px;
    text-align: center;
}

p + .flow_image {
    margin-top: 36px;
}

.flow_image + .flow_image {
    margin-top: 24px;
}

.orderFlow .orderFlow_text {
    width: 580px;
    margin-top: 16px;
    padding-left: 1em;
    text-indent: -1em;
}

.orderFlow .orderFlow_text span {
    display: inline-block;
    padding-left: 1.3em;
    font-size: 14px;
    text-indent: -1.3em;
    color: #666666;
}

.mnp_image {
    position: relative;
}

.mnp_text {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: var(--color-main);
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
}

/* ============ 本人確認書類・クレジットカードの準備 ============ */
.flowDocument_image {
    display: flex;
    justify-content: center;
}

.flowDocument_image > div {
    width: 160px;
}

.flowDocument_image > div + div {
    margin-left: 20px;
}

.flowDocument_image p {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    color: var(--color-main);
}

.flowDocument_image img {
    display: block;
    margin-top: 8px;
}

.paymentPattern {
    margin-top: 16px;
    padding: 40px;
}

.paymentPattern_note {
    margin-top: 12px;
}

.paymentPattern h4 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.paymentMethod {
    display: flex;
    margin-top: 24px;
}

.paymentMethod .paymentMethod_text {
    width: 664px;
    padding-left: 1.3em;
}

.paymentMethod .paymentMethod_text p {
    text-indent: -1.3em;
}

.paymentMethod .paymentMethod_text .cautionList {
    margin-top: 8.5px;
}

.paymentMethod .paymentMethod_text .cautionList li,
.paymentMethod .paymentMethod_text .cautionList li a {
    font-size: 14px;
    color: #666666;
}

.paymentMethod .paymentMethod_image {
    width: 456px;
    padding: 40px;
    background-color: white;
}

.paymentMethod .paymentMethod_image.-paidy {
    text-align: center;
}

.paymentMethod .paymentMethod_image .paymentMethod_cards {
    display: flex;
    justify-content: space-between;
}

/* ============ お申し込みフォームからお手続き ============ */
.orderFlow {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-right: 20px;
    margin-top: 36px;
}

.orderFlow li {
    position: relative;
}

.orderFlow li:nth-of-type(n + 3) {
    margin-top: 36px;
}

.orderFlow li .orderFlow_num {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 40px;
    height: 40px;
    border: 2px solid #666666;
    background-color: var(--color-main);
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    color: white;
}

.orderFlow .orderFlow_image {
    position: relative;
    width: 580px;
    height: 360px;
    border: 2px solid #666666;
}

.orderFlow li:not(:last-child) .orderFlow_image::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%) translateX(100%);
    width: 20px;
    height: 2px;
    background-color: #666666;
}

.orderFlow .orderFlow_image img {
    width: 100%;
    height: auto;
}

/* お申し込み完了後の流れ
-----------------------------------------------------------*/
.doneFlow {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.doneFlow > li {
    position: relative;
    width: 285px;
    min-height: 268px;
    border: 2px solid #666666;
}

.doneFlow > li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%) translateX(100%);
    width: 20px;
    height: 2px;
    background-color: #666666;
}

.doneFlow > li .attention_list {
    padding: 0 20px 24px;
    margin-top: 0;
}

.doneFlow .doneFlow_step {
    position: relative;
    top: -2px;
    left: -2px;
    display: block;
    width: 40px;
    height: 40px;
    border: 2px solid #666666;
    background-color: var(--color-main);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    color: white;
}

.doneFlow .doneFlow_image {
    display: block;
    width: 100%;
    text-align: center;
}

.doneFlow .doneFlow_image img {
    width: 245px;
    height: 120px;
    margin: 0 auto;
}

.doneFlow .doneFlow_title {
    display: block;
    margin-top: 11px;
    padding: 0 20px;
    font-size: 20px;
    font-weight: bold;
}

.doneFlow .doneFlow_text {
    display: block;
    margin-top: 0;
    padding: 0 20px;
    font-size: 16px;
    font-weight: normal;
}

/* au・povoから変更をご希望のお客様
-----------------------------------------------------------*/
.auPovoNote_list li {
    font-size: 16px;
}

.auPovoNote_list .-dot {
    color: #333;
}

/* お申し込み・契約のよくある質問
-----------------------------------------------------------*/
.faq_inner {
    width: 800px;
    margin: 40px auto 0;
}

.faq_inner ul {
    width: 776px;
    margin: -16px 40px 0 auto;
}

.faq_inner li {
    padding: 16px 0 0 43px;
    background: url(https://mvno.geo-mobile.jp/v2/img/pc/cmn/faq/Q.svg) no-repeat top 30px left/ 27px auto;
}

.faq_inner li + li {
    margin-top: 16px;
    border-top: 1px solid #dbdbdb;
}

.faq_icons {
    display: flex;
}

.faq_icons [class^="icon_"] {
    color: #fff;
    display: block;
    font-size: 14px;
    line-height: 21px;
    padding: 0 8px;
    margin-left: 5px;
}

.faq_icons .icon_uqmobile {
    background: var(--color-uqmobile);
}

.faq_icons .icon_uqwimax {
    background: var(--color-uqwimax);
}

.faq_list .switch_text {
    display: inline-block;
    font-size: 16px;
    line-height: calc(27 / 16);
    margin-top: 3px;
}

/* footer
-----------------------------------------------------------*/
footer {
    margin-top: 120px;
}

/* 機種変更(ご利用開始の流れ)
-----------------------------------------------------------*/
.change {
    margin-top: 34px;
    padding-bottom: 64px;
}

.change_content + .change_content {
    margin-top: 34px;
}

.change_lead {
    color: var(--color-uqmobile);
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* こんな症状でお困りの方は機種変更がオススメです！ */
.changeList {
    display: flex;
    justify-content: space-between;
}

.changeList > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 386px;
    border: 2px solid #666;
    padding: 40px;
}

.changeList_detail {
    width: 220px;
}

.changeList_title {
    font-size: 16px;
    color: #333;
    line-height: 1;
    font-weight: bold;
}

.changeList_text {
    color: var(--color-uqmobile);
    font-size: 20px;
    font-weight: bold;
    margin-top: 8px;
}

.changeList_underline {
    background: linear-gradient(transparent 70%, #FFEC04 30%);
    display: inline-block;
    font-weight: bold;
    line-height: 1.2;
}

.changeList_image {
    width: 54px;
}

.changeList_image > img {
    display: block;
    margin: 0 auto;
}

/* 必要な費用 */
.changeCost {
    display: flex;
    align-items: center;
    background: var(--color-bg-light);
    padding: 40px;
}

.changeCost_lead {
    font-size: 20px;
    font-weight: bold;
    margin-right: 40px;
}

.changeCostList > li + li {
    margin-top: 12px;
}

.changeCostList_title {
    display: flex;
    align-items: center;
    color: var(--color-uqmobile);
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
}

.changeCostList_title::before {
    display: inline-block;
    content: "";
    background: url(https://mvno.geo-mobile.jp/v2/img/pc/uqmobile/guide/icon_1.svg) no-repeat center / contain;
    width: 38px;
    height: 22px;
    margin-right: 8px;
}

.changeCostList > li:nth-child(2) .changeCostList_title:before {
    background: url(https://mvno.geo-mobile.jp/v2/img/pc/uqmobile/guide/icon_2.svg) no-repeat center / contain;
}

.changeCostList .attention_list {
    margin-top: 4px;
    margin-left: 46px;
}

.changeCost .attention_list {
    font-size: 16px;
}