@charset "utf-8"; p { word-break: break-all; } /****************************** コンテンツエリア ******************************/ .contracts-area { padding: 40px 0; } /****************************** タイトルエリア ******************************/ .title-area-contracts { margin: 0 16px; } /****************************** リスト共通部分 ******************************/ .all-service-area-box, .change-contract-area-box, .change-option-area-box, .plan-area-career-free-box { padding: 0; position: relative; } .change-contract-area-box { margin-top: 40px; } .all-service-area-list, .plan-area-career-free-list { padding: 24px 44px 24px 16px; } .all-service-area-link, .dcard-area-link, .plan-area-bnr-link, .plan-area-career-free-link { display: block; border-radius: 16px; } .change-contract-area-list-link, .change-option-area-list-link { display: block; } .change-option-area-list-link.mydcm-ua-sp { display: block!important; } .change-option-area-list-link.mydcm-ua-pcTabAll { display: none; } .all-service-area-link:hover, .change-contract-area-list-link:hover, .change-option-area-list-link:hover, .plan-area-career-free-link:hover { background-color: #f6f7f8; } .change-contract-area-list-box, .change-option-area-list-box, .free-service-area-list-box, .under-contract-area-list-box { border-bottom: 1px solid #DFE4E9; } .free-service-area-list, .procedure-support-area-list, .tetsuduki-support-area-list, .under-contract-area-list { padding: 0 16px; } .change-contract-area-list, .change-option-area-list { position: relative; padding: 16px 44px 16px 16px; } .change-contract-area-list-txt, .change-option-area-list-txt { font-size: 16px; color: #31353A; font-weight: bold; line-height: 18px; } .change-contract-area-list-txt-small, .change-option-area-list-txt-small { font-size: 12px; font-weight: normal; color: #1A1C1E; margin: 6px 0 0 0; line-height: 16px; } .all-service-area-list .change-contract-area-list-txt-small { line-height: 12px; } .change-contract-area-list::after, .change-option-area-list::after, .all-service-area-list::after, .plan-area-career-free-list::after { top: 50%; right: 10px; width: 24px; height: 24px; margin-top: -12px; content: ''; display: inline-block; background-size: contain; background-repeat: no-repeat; position: absolute; vertical-align: middle; } .free-service-area-btn-box, .procedure-support-area-btn-box, .tetsuduki-support-area-btn-box, .under-contract-area-btn-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; font-weight: bold; position: relative; margin: 16px 0 12px 0; } .free-service-area-btn-txt, .under-contract-area-btn-txt { padding: 12px 12px 12px 60px; } .under-contract-area a.under-contract-area-btn-txt { color: #007AFF; } .under-contract-area a.under-contract-area-btn-txt:hover { text-decoration: underline; } .free-service-area-btn-txt::before, .procedure-support-area-btn-txt::before, .tetsuduki-support-area-btn-txt::before, .under-contract-area-btn-txt::before { background-image: url(../images_20m4/common/icons/icn_related_services_map_navi@2x.png); width: 48px; height: 48px; top: 50%; left: 0; margin: -24px 0 0 0; } .free-service-area-btn-txt-more, .procedure-support-area-btn-txt-more, .tetsuduki-support-area-btn-txt-more, .under-contract-area-btn-txt-more { margin: 16px 0; line-height: 20px; } .free-service-area-box, .under-contract-area-box { padding: 8px 0; margin: 0 8px 16px 8px; } .under-contract-area-error-box { padding: 24px 16px; } .under-contract-area-btn-txt::before { background-image: url(../images_20m4/common/icons/icn_related_services_dgourmet@2x.png); } .under-contract-area-btn-dcard::before { background-image: url(../images_20m4/common/icons/icn_related_services_d_card.png); } /****************************** ボタン共通部分 ******************************/ .bk-yellow-btn { display: block; background-color: #FFE26E; border-radius: 24px; padding: 8px 10px; font-weight: bold; font-size: 12px; } .under-contract-area-btn-box .bk-yellow-btn { min-width: 68px; } .bk-yellow-btn:hover { background-color: #fff4a2; } .icon-24px::after { top: 50%; width: 24px; height: 24px; margin: -12px 0 0 0; } .plan-area-btn-tab::after, .free-service-area-btn-tab::after, .all-service-area-btn-tab::after, .services-and-functions-area-btn-tab::after, .plan-area-recommend-btn-tab::after { right: 10px; background-image: url(../images_20m4/common/icons/icn_blank.png); } .plan-area-recommend-btn-box { margin: 24px 0; } .change-contract-area-bk-arrow::after, .change-option-area-bk-arrow::after, .free-service-area-more-btn::after, .procedure-support-area-more-btn::after, .tetsuduki-support-area-more-btn::after, .plan-area-career-free-bk-arrow::after, .all-service-area-bk-arrow::after, .services-and-functions-area-bk-arrow::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .free-service-area-btn-tab, .procedure-support-area-btn-tab, .tetsuduki-support-area-btn-tab { min-width: 88px; margin: 0; } .change-option-area-list-box:first-child .change-option-area-list, .change-contract-area-list-box:first-child .change-contract-area-list { padding: 24px 44px 16px 16px; } .change-option-area-list-box:last-child .change-option-area-list, .change-contract-area-list-box:last-child .change-contract-area-list { padding: 16px 44px 24px 16px; } .change-option-area-list-box:first-child .change-option-area-list-link, .change-contract-area-list-box:first-child .change-contract-area-list-link { border-radius: 16px 16px 0 0; } .change-option-area-list-box:last-child .change-option-area-list-link, .change-contract-area-list-box:last-child .change-contract-area-list-link { border-radius: 0 0 16px 16px; } /****************************** ご契約プランエリア ******************************/ .plan-area-tell { padding: 10px 8px; border-radius: 6px; margin: 0 auto; width: 100%; background-color: #EEF1F4; text-align: center; line-height: 16px; font-size: 16px; } .plan-area-box { padding: 24px 16px; margin: 0 8px 40px; } .plan-area-list-txt { min-width: 98px; } .plan-area-list-subtxt, .plan-area-list-subtxt-no-btn { font-weight: bold; margin: 0 12px; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; -ms-flex-preferred-size: 38%; flex-basis: 38%; } .plan-area-list-subtxt-no-btn { margin: 0 0 0 12px; } .plan-area-list-btn-box { min-width: 44px; } .plan-area-list-bg-wrap { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .plan-area-list-subtxt-small { font-size: 12px; font-weight: normal; color: #4A4F55; } .plan-area-list-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #DFE4E9; padding: 12px 0; line-height: 20px; position: relative; } .plan-area-list-box-1column { border-bottom: none; padding: 0; } .plan-area-list-box-set-icon { border-top: 1px solid #DFE4E9; margin-top: 16px; padding-top: 16px; } .plan-area-btn-box { margin: 24px 0 0; } .plan-area-btn, .plan-area-btn-tab, .plan-area-recommend-btn-tab { max-width: 256px; width: 100%; margin: 16px auto; padding: 12px 36px 12px 16px; } .plan-area-btn::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .plan-area-box-inner-device-model { border-bottom: 1px solid #DFE4E9; } .contract-device-model-txt { min-width: 112px; } .plan-area-list-device-model-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .plan-area-list-device-model-inner-wrap{ -ms-flex-preferred-size: 70%; flex-basis: 70%; margin-right: 4%; } .plan-area-list-device-model-inner-wrap .common-notice-box { margin-right: 12px; line-height: 18px; } .plan-area-list-device-model-box { border-bottom: none; } .plan-area-list-device-model-image { -ms-flex-preferred-size: 26%; flex-basis: 26%; } .plan-area-list-device-model-image img { width: 100%; image-rendering: -webkit-optimize-contrast; } .contract-plan-area-reco-sim-box .common-btn-area a.common-btn-basic.width256 { width: 256px!important; } .contract-plan-area-reco-sim-box .common-btn-area a.common-btn-basic { width: 100%; max-width: 256px; text-align: left!important; } /****************************** ドコモでんきエリア ******************************/ .plan-area-docomo-denki .plan-area-list-box .plan-area-list-btn-box { -webkit-box-flex: none; -ms-flex: none; flex: none; } .plan-area-docomo-denki .plan-area-list-box:first-child { padding-top: 0; padding-bottom: 16px; } .plan-area-docomo-denki .plan-area-list-box:last-child { border: none; padding-bottom: 0px; padding-top: 16px; } .plan-area-docomo-denki .plan-area-list-txt { margin-right: 12px; } /****************************** ドコモ光エリア ******************************/ .plan-area-docomo-hikari .plan-area-list-box .plan-area-list-btn-box { -webkit-box-flex: none; -ms-flex: none; flex: none; } .plan-area-docomo-hikari .plan-area-list-box:first-child { padding-top: 0; padding-bottom: 16px; } .plan-area-docomo-hikari .plan-area-list-box:last-child { border: none; padding-bottom: 0px; padding-top: 16px; } .plan-area-docomo-hikari .plan-area-list-txt { margin-right: 12px; } /****************************** 現在契約中の主なサービスエリア ******************************/ .under-contract-area-box-inner-btn { text-align: center; margin: 28px 16px 20px; } .under-contract-area-box-inner-btn li a.common-btn-basic { width: 100%; max-width: 256px; text-align: left!important; } .under-contract-area-box-inner-btn li a.common-btn-basic.width256 { width: 256px!important; } /****************************** キャリアフリーお客様情報エリア ******************************/ .plan-area-career-free-box { margin: 40px 8px 8px 8px; } /****************************** 取得エラーエリア ******************************/ .plan-area-acquisition-error-box { background-color: #FFF0B2; text-align: center; border: 6px solid #fff; padding: 26px 18px; margin: 40px 8px 8px; } .plan-area-acquisition-error-txt { font-size: 18px; font-weight: bold; position: relative; padding: 80px 0 0; } .plan-area-acquisition-error-txt::before { background-image: url(../images_20m4/common/icons/icn_64_error_oncolor@2x.png); width: 64px; height: 64px; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .under-contract-area-error-box-inner-btn li a.common-btn-basic.width256 { width: 256px!important; } .under-contract-area-error-box-inner-btn li a.common-btn-basic { width: 100%; max-width: 256px; text-align: left!important; } /****************************** 無料サービスエリア ******************************/ .free-service-area-more-btn, .procedure-support-area-more-btn, .tetsuduki-support-area-more-btn { max-width: 130px; width: 100%; margin: 24px auto 16px; } .free-service-area-btn-dbarai::before { background-image: url(../images_20m4/common/icons/icn_related_services_d_barai.png); } /****************************** お手続き方法のサポートエリア ******************************/ .procedure-support-area-list-box{ padding-bottom: 16px; border-bottom: 1px solid #DFE4E9; } .tetsuduki-support-area-list-box{ padding-top: 16px; } .procedure-support-area-btn-box, .tetsuduki-support-area-btn-box { margin: 0; } .procedure-support-area-btn-txt-more, .tetsuduki-support-area-btn-txt-more { margin: 14px 0 0 0; } .procedure-support-area-btn-txt::before { background-image: url(../images_20m4/common/icons/icn_related_support@2x.png); } .tetsuduki-support-area-btn-txt::before { background-image: url(../images_20m4/common/icons/icn_related_tetsuduki_support.png); } .procedure-support-area-btn-tab::after, .tetsuduki-support-area-btn-tab::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .procedure-support-area-box, .tetsuduki-support-area-box { margin: 40px 8px; padding: 18px 0 16px; } .procedure-support-area-btn-txt, .tetsuduki-support-area-btn-txt { padding: 0 12px 0 60px; display: inline-block; min-width: 184px; } /****************************** ご契約プランエリア内バナー・dカードエリア ******************************/ .plan-area-bnr-img, .dcard-area-bnr-img { width: 100%; } .plan-area-bnr-img { box-shadow: 0 0 4px 0 rgba(0,0,0,0.12); border-radius: 12px; } .dcard-area-box { padding: 0; } /****************************** 注意事項・サービス機能についてエリア ******************************/ .services-and-functions-area { margin: 40px auto; } .services-and-functions-area-btn-tab, .services-and-functions-area-bk-arrow { width: 263px; display: block; text-align: left; border-radius: 24px; font-weight: bold; font-size: 14px; position: relative; margin: 0 auto; box-shadow: 0 0 4px 0 rgba(0,0,0,0.12); border: none; padding: 14px 42px 14px 16px; line-height: 20px; } .contract-important-point-area { margin: 40px auto; } /****************************** TAB ******************************/ @media screen and (min-width:768px) { /****************************** コンテンツエリア ******************************/ .contracts-area { max-width: 960px; width: 100%; margin: 0 auto; padding: 16px 0 24px; } /****************************** リスト共通部分 ******************************/ .change-contract-area-box-inner, .under-contract-area-box-inner, .change-option-area-box-inner, .free-service-area-box-inner, .procedure-support-area-box-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .change-contract-area-box { margin-top: 64px; } .change-contract-area-list-box, .change-option-area-list-box, .free-service-area-list-box, .under-contract-area-list-box { width: 373px; border-bottom: none; border-right: 1px solid #DFE4E9; } .change-option-area-list-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 84px; } /*-- ↓URL出し分け対策↓ --*/ .change-option-area-list-link.mydcm-ua-pcTabAll { display: flex!important; } .change-option-area-list-link.mydcm-ua-sp { display: none!important; } .change-contract-area-list-box:nth-child(even), .change-option-area-list-box:nth-child(even), .under-contract-area-list-box:nth-child(even), .free-service-area-list-box:nth-child(even), .procedure-support-area-list-box:nth-child(even), .tetsuduki-support-area-list-box:nth-child(even){ border-right: none; } .free-service-area-box, .under-contract-area-box, .plan-area-acquisition-error-box { max-width: 746px; width: 100%; margin: 24px auto; } .change-option-area-list-box:first-child .change-option-area-list-link, .change-contract-area-list-box:first-child .change-contract-area-list-link { border-radius: 16px 0 0 16px; } .change-option-area-list-box:last-child .change-option-area-list-link, .change-contract-area-list-box:last-child .change-contract-area-list-link { border-radius: 0 16px 16px 0; } .change-option-area-list-box:last-child .change-option-area-list, .change-contract-area-list-box:last-child .change-contract-area-list, .change-option-area-list-box:first-child .change-option-area-list, .change-contract-area-list-box:first-child .change-contract-area-list { padding: 24px 44px 24px 16px; } .change-option-area-list { width: 480px; } /****************************** ボックス横幅指定 ******************************/ .change-contract-area-box, .change-option-area-box { max-width: 746px; } .dcard-area-box { max-width: 746px; } .dcard-area-bnr-img { max-width: 746px; } .all-service-area-box, .plan-area-career-free-box { max-width: 480px; } /****************************** ご契約プランエリア ******************************/ .plan-area-box { max-width: 746px; padding: 32px 24px; margin: 0 auto 64px; } .plan-area-tell { margin: 0 0 4px 0; } .plan-area-box-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .plan-area-list-box-1column-wrap { width: 100%!important; } .plan-area-list-box { width: 336px; height: 64px; } .plan-area-list-box:nth-child(even) { margin: 0; } .plan-area-list-box-1column { width: 100%!important; } .plan-area-list-box-1column-caution { height: 36px; margin-top: 14px; } .plan-area-list-box-set-icon { margin-top: 0; padding-bottom: 16px; } .plan-area-btn-box { margin: 24px 0 0; } .plan-area-btn-inner-top .plan-area-btn { margin: 0 auto!important; } .plan-area-btn-inner-bottom { margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .plan-area-btn, .plan-area-btn-tab { margin: 0 24px 0 0; } .plan-area-btn:nth-child(even), .plan-area-btn-tab:nth-child(even) { margin: 0; } .plan-area-recommend-btn-tab { margin: 0 auto; } .plan-area-box.internet-plan-area-box { padding: 8px 24px; } .plan-area-list-device-model-box { padding: 4px 0; height: 44px; } .plan-area-list-device-model-inner-wrap .plan-area-list-device-model-box { width: auto; } .plan-area-list-device-model-wrap { width: 336px; } .contract-plan-area-reco-sim-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contract-plan-area-reco-sim-box .common-btn-area { margin-right: 24px; } .contract-plan-area-reco-sim-box .common-btn-area:last-child { margin-right: 0; } /****************************** ドコモでんきエリア ******************************/ .plan-area-docomo-denki .plan-area-box { padding: 8px 24px; } .plan-area-docomo-denki .plan-area-list-box { border: none; height: 64px; } .plan-area-docomo-denki .plan-area-list-box:first-child { padding-top: 0; padding-bottom: 0; } .plan-area-docomo-denki .plan-area-list-box:last-child { padding-top: 0; padding-bottom: 0; } .plan-area-docomo-denki .plan-area-box-inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /****************************** ドコモ光エリア ******************************/ .plan-area-docomo-hikari .plan-area-box { padding: 8px 24px; } .plan-area-docomo-hikari .plan-area-list-box { border: none; height: 64px; } .plan-area-docomo-hikari .plan-area-list-box:first-child { padding-top: 0; padding-bottom: 0; } .plan-area-docomo-hikari .plan-area-list-box:last-child { padding-top: 0; padding-bottom: 0; } .plan-area-docomo-hikari .plan-area-box-inner { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .plan-area-docomo-hikari .plan-area-list-box-1column-caution { margin-top: 0; } /****************************** キャリアフリーお客様情報エリア ******************************/ .plan-area-career-free-box { margin: 48px auto; } /****************************** 現在契約中の主なサービスエリア ******************************/ .under-contract-area-box-inner-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 24px; } .under-contract-area-box-inner-btn li a.common-btn-basic { width: auto; max-width: none; } .under-contract-area-box-inner-btn li { margin-right: 24px; } .under-contract-area-box-inner-btn li:last-of-type { margin-right: 0; } /****************************** 取得エラーエリア ******************************/ .plan-area-acquisition-error-box { margin: 48px auto; } .under-contract-area-error-box-inner-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .under-contract-area-error-box-inner-btn li { margin-right: 24px; } .under-contract-area-error-box-inner-btn li a.common-btn-basic { width: auto; max-width: none; } /****************************** 無料サービスエリア ******************************/ .free-service-area-list-box { border-bottom: 1px solid #DFE4E9; height: 139px; } /****************************** お手続き方法のサポートエリア ******************************/ .procedure-support-area-box { max-width: 480px; width: 100%; margin: 64px auto; } } /****************************** PC ******************************/ @media screen and (min-width:980px) { /****************************** コンテンツエリア ******************************/ .contracts-area { padding: 16px 0 24px; } /****************************** 横幅指定 ******************************/ .plan-area-box, .change-contract-area-box, .change-option-area-box, .free-service-area-box, .under-contract-area-box, .plan-area-acquisition-error-box { max-width: 960px; } .plan-area-list-box, .plan-area-list-device-model-wrap { width: 442px; } .change-contract-area-list-box, .change-option-area-list-box, .free-service-area-list-box, .procedure-support-area-list-box, .tetsuduki-support-area-list-box, .under-contract-area-list-box { width: 480px; } /****************************** ご契約プランエリア ******************************/ /* 2021/11/11 HTMLモック作成 */ .plan-area-list-device-model-inner-wrap { -ms-flex-preferred-size: 310px; flex-basis: 310px; margin-right: 16px; } .plan-area-list-device-model-image { -ms-flex-preferred-size: 105px; flex-basis: 105px; } }