@charset "utf-8"; p { word-break: break-all; } .box-in-title { font-size: 16px; font-weight: bold; line-height: 16px; min-width: 110px; } .common-contents-area .icon-24px::after { top: 50%; width: 24px; height: 24px; margin: -12px 0 0 0; } @media screen and (min-width:768px) { .box-in-title { font-size: 20px; line-height: 22px; min-width: 140px; } .box-in-title-error, .usage-fee-area-morebtn-nosim-recommend-box .box-in-title-disaster { font-size: 16px; } } /****************************** リスト・ボックス共通部分 ******************************/ .home-data-area-title, .home-data-area-representative-list, .dpoint-area-point-rank, .dpoint-area-point-rank-no-lost, .docomo-shop-area-link-box, .home-data-area-graph-tsukai-houdai-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .usage-fee-area-title, .dpoint-area-title, .usage-fee-area-month, .usage-fee-area-month-no-dbarai, .usage-fee-area-month-txt-box, .dpoint-area-lostpoint, .home-data-area-representative-list-txt, .home-data-area-btn-box, .home-data-area-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .usage-fee-area-month-fee-yen, .dpoint-area-lostpoint-p, .dpoint-area-now-point-p { font-size: 12px; padding: 0 0 0 2px; font-weight: bold; } /****************************** ボタン共通エリア ******************************/ .usage-fee-area-morebtn::after, .usage-fee-area-morebtn-nosim-recommend::after, .usage-fee-area-error-morebtn::after, .conf-area-list-txt-box::after, .docomo-shop-area-link::after, .info-area-list::after, .info-area-more-info::after, .search-result-morebtn::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .home-data-area-btn:hover, .home-info-display-btn:hover { background-color: #fff4a2; } .conf-area-list-box-link:hover, .important-point-area-btn:hover, .info-area-list-link:hover, .info-area-maintenance:hover, .info-area-more-info:hover, .careerfree-yellow-area-white-btn:hover, .home-saigai-area-white-btn:hover, .all-fukuso-area-listbtn:hover, .home-opan-all-area-btn-menu:hover, .home-opan-all-area-btn-another-login:hover { background-color: #f6f7f8; } .info-area-list-link { display: block; } .careerfree-yellow-area-yellow-btn:hover { background-color: #ffe26e; } .home-opan-all-area-btn-login:hover { background-color: #B4002D; } .info-area-maintenance, .info-area-more-info { display: block; margin: 0 auto; position: relative; font-size: 14px; padding: 10px 42px 9px 14px; border: 1px solid #DFE4E9; width: 214px; border-radius: 24px; font-weight: bold; } .info-area-maintenance { padding: 9px 0px 10px 65px; margin: 0 auto 16px auto; } .info-area-more-info { margin: 24px auto 16px; } .info-area-more-info::after { top: 8px; right: 10px; width: 24px; height: 24px; background-image: url(../images_20m4/common/icons/icn_arrow_textlink_right.png); } .info-area-maintenance::before { top: 50%; left: 40px; width: 16px; height: 16px; background-image: url(../images_20m4/common/icons/icn_maintenance.png); margin-top: -8px; } @media screen and (min-width:768px) { .mw350_pc_211110 { max-width: 350px!important; } .mw410_pc_211222 { max-width: 410px!important; } } .btn_icon_arrow_211110:after { background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png)!important; } /****************************** 輻輳エリア ******************************/ .all-fukuso-area-listbtn.all-fukuso-area-listbtn-first { border-top: none; border-radius: 16px 16px 0 0; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-first .all-fukuso-area-listbtn-inner { margin-top: 8px!important; } .all-fukuso-area-listbtn-first::after { margin-top: -8px!important; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-last { border-radius: 0 0 16px 16px; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-last .all-fukuso-area-listbtn-inner { margin-bottom: 8px!important; } .all-fukuso-area-listbtn-last::after { margin-top: -16px!important; } .all-fukuso-area-listbtn.mydcm-ua-sp { display: block!important; } .all-fukuso-area-listbtn.mydcm-ua-pcTabAll { display: none!important; } .home-docomo-online-shop-bannerArea-border { border-bottom: 1px solid #DFE4E9; margin: 0 16px; } .home-docomo-online-shop-bannerArea-wrap { padding: 0 40px 24px; } .home-docomo-online-shop-bannerArea { width: 100%; max-width: 295px; margin: 16px auto 0; display: block; } .home-docomo-online-shop-bannerArea-img { width: 100%; } /****************************** データ通信量エリア ******************************/ .home-data-area { padding: 8px 0; } .home-data-area-title, .dpoint-area-lostpoint-box.home-error { margin: 0 0 8px 0; line-height: 16px; } .home-data-area-title-txt { font-size: 14px; font-weight: bold; } .home-data-area-automatic-billing, .home-data-area-speedmode_active { box-shadow: none; background-color: #00B0F3; color: #fff; 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; text-align: center; font-weight: bold; padding: 10px 8px; margin: 0; border-radius: 8px 8px 0 0; } .home-data-area-speedmode_active { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 8px; } .home-data-area-speedmode_active-txt { margin: 0 auto; } .home-data-area-automatic-billing-icon { background-color: #fff; color: #00B0F3; max-width: 40px; border-radius: 4px; padding: 4px 0; font-size: 11px; width: 100%; line-height: 16px; margin: 0 0 0 10px; } .home-data-area-speedmode_active-icon { font-size: 14px; background-color: #fff; color: #00B0F3; border-radius: 4px; padding: 8px; line-height: 12px; margin: 0 0 0 8px; letter-spacing: 1px; } .home-data-area-automatic-billing-icon-value { font-size: 14px; } .home-data-area-automatic-billing-icon-small { font-size: 9px; } .home-data-area-speedmode_active-icon-small { font-size: 11px; } .home-data-area-title-ready-to-speedlimit, .home-data-area-title-speedlimit { background-color: #FFCC00; border-radius: 8px 8px 0 0; padding: 10px 8px; text-align: center; font-weight: bold; margin: 0; } .home-data-area-title-speedlimit { background-color: #EF4050; color: #fff; } .home-data-area-title-disaster { margin: 0 0 28px 0; } .home-data-area-more-btn, .home-data-area-error-more-btn, .home-data-area-more-btn-flex { position: relative; padding: 12px 40px 12px 16px; width: 130px; margin: 0 auto; font-weight: bold; } .home-data-area-more-btn.home-error { width: 186px; } .usage-fee-area-morebtn.home-error { width: 172px; } .home-data-area-more-btn-flex { margin: 0; max-width: 130px; width: 100%; } .home-data-area-more-btn::after, .home-data-area-error-more-btn::after, .home-data-area-more-btn-flex::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .home-data-area-error-more-btn { width: 186px; } .home-data-area-graph, .home-data-area-graph-ultra { text-align: center; border-radius: 0 0 8px 8px; } .home-data-area-graph-ultra { border-radius: 0; } .home-data-area-graph-tsukai-houdai-box { background-color: #DFE4E9; border-radius: 6px; padding: 8px; margin: 0 0 16px; } .home-data-area-graph-tsukai-houdai { background-color: #fff; padding: 0 16px; border-radius: 4px; } .home-data-area-graph-tsukai-houdai-list-box { border-bottom: 1px solid #DFE4E9; } .home-data-area-graph-tsukai-houdai-list-box:last-child { border: none; } .home-data-area-graph-tsukai-houdai-list { font-size: 12px; padding: 8px 0; } .home-data-area-graph-tsukai-houdai-list-txt { padding: 0 8px 0 0; } .home-data-area-graph-tsukai-houdai-list-value { font-size: 24px; letter-spacing: -0.75px; font-weight: bold; line-height: 24px; } .home-data-area-graph-tsukai-houdai-list-gb { font-weight: bold; padding: 0 0 0 2px; } .home-data-area-graph-tsukai-houdai-campaign-box { padding: 8px 0 0 0; } .home-data-area-graph-tsukai-houdai-campaign { background-color: #00B0F3; color: #fff; border-radius: 4px; padding: 8px; text-align: center; line-height: 16px; font-weight: bold; } .home-data-area-representative-list { margin: 16px 0; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 16px; font-weight: bold; } .home-data-area-representative-list-txt { letter-spacing: -0.5px; min-width: 170px; padding: 0 12px 0 0; } .home-data-area-representative-list-txt-mark { font-size: 10px; border-radius: 9px; background-color: #EEF1F4; padding: 2px 4px; margin: 0 4px 0 0; } .home-data-area-representative-list-graph-box { -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; } .home-data-area-representative-list-gb { padding: 0 0 0 8px; margin: 0 0 0 auto; text-align: right; } .home-data-area-representative-list-slowing-down { padding: 0 0 0 12px; margin: 0 0 0 auto; min-width: 65px; text-align: right; font-size: 12px; color: #EF4050; } .home-data-area-representative-list-gb .home-data-area-representative-list-gb-txt { font-size: 10px; font-weight: bold; padding: 0 0 0 2px; } .home-data-area-representative-list-txt-small { font-size: 12px; letter-spacing: -0.38px; } .home-data-area-representative-list-used { font-size: 12px; font-weight: normal; max-width: 100px; margin: 0 0 0 auto; } .home-data-area-error { text-align: center; margin: 0 0 24px 0; } .usage-fee-area-error { text-align: center; padding: 8px 0 24px 0; } .dpoint-area-error { text-align: center; padding: 8px 0; width: 100%; } .home-data-area-error-img, .usage-fee-area-error-img, .dpoint-area-error-img { width: 64px; } .home-data-area-disaster { font-size: 16px; text-align: center; margin: 0 0 24px 0; } .home-data-area-btn-box { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 16px auto 0; } .home-data-area-btn-box-2 { display: block; } .home-data-area-btn { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; background-color: #FFE26E; border: 4px solid #fff; box-shadow: 0 0 4px 0 rgba(0,0,0,0.08); padding: 8px 10px; border-radius: 24px; font-weight: bold; max-width: 152px; text-align: center; letter-spacing: -0.7px; line-height: 12px; height: 42px; width: 100%; margin: 0 16px 0 0; } .home-data-area-btn:last-child { margin: 0; } .home-data-area-btn.mydcm-ua-sp { display: flex!important; display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important; } .home-data-area-btn.mydcm-ua-pcTabAll { display: none; } .home-data-area-long-btn { max-width: 180px; } .home-data-area-box.home-error, .usage-fee-area-wrap.home-error { padding: 20px 16px 24px 16px; } .home-data-area-box { margin-bottom: 0; } .usage-fee-area-wrap { margin-bottom: 0; } .usage-fee-area-wrap #mydcm_reco-home-payment-sim { margin-bottom: 0; } .usage-fee-area { padding-bottom: 8px; } .home-data-area-infinity-icon { width: 168px; } /****************************** ご利用料金エリア ******************************/ .usage-fee-area-title, .dpoint-area-title, .usage-fee-area-month, .usage-fee-area-month-no-dbarai { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .usage-fee-area-dbarai-yen { font-size: 10px; font-weight: bold; padding: 0 0 0 2px; } .dpoint-area-title { width: 100%; } .dpoint-area-title.dpoint-area-title-error { padding: 0 0 8px 0; } .usage-fee-area-attention, .usage-fee-area-dbarai-txt, .usage-fee-area-month-icon { font-size: 11px; } .usage-fee-area-attention::before { content: "\203b"; } .usage-fee-area-month-icon { background-color: #8D959F; color: #fff; padding: 2px 4px; border-radius: 4px; } .usage-fee-area-month-txt { font-size: 12px; } .usage-fee-area-month-txt { padding-right: 8px; } .usage-fee-area-month { padding: 6px 0 8px 0; } .usage-fee-area-month-no-dbarai { padding: 6px 0 16px; } .usage-fee-area-month-txt-box { margin: 0 14px 0 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .usage-fee-area-dbarai { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .usage-fee-area-month-fee, .dpoint-area-now-point { background-color: #DFE4E9; border-radius: 6px; padding: 2px 10px; -webkit-box-flex: 3; -ms-flex-positive: 3; flex-grow: 3; text-align: right; font-size: 24px; font-weight: bold; letter-spacing: -1.8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .usage-fee-area-dbarai { padding: 0 11px 8px 0; } .usage-fee-area-dbarai-value { font-size: 16px; font-weight: bold; padding: 0 0 0 10px; letter-spacing: -1px; } .usage-fee-area-morebtn, .usage-fee-area-error-morebtn, .usage-fee-area-morebtn-nosim-recommend { position: relative; padding: 12px 40px 12px 16px; width: 130px; font-weight: bold; } .usage-fee-area-morebtn-nosim-recommend { width: auto; display: inline-block; } .usage-fee-area-morebtn-nosim-recommend-box { text-align: center; margin-top: 16px; } .usage-fee-area-error-morebtn { width: 172px; } .careerfree-yellow-area-yellow-btn { background-color: #FFCC00; border: 4px solid #fff; padding: 6px 10px; display: block; border-radius: 24px; max-width: 228px; margin: 0 auto; text-align: center; font-size: 14px; font-weight: bold; color: #31353A!important; box-shadow: 0 0 4px 0 rgba(0,0,0,0.08); width: 100%; height: 42px; } .info-area-btn-link { padding: 24px 0 16px; } .usage-fee-area-hojin, .dpoint-area-hojin { margin: 22px 0 6px 0; text-align: center; font-size: 16px; line-height: 22px; } .dpoint-area-hojin { margin: 24px 0 14px 0; } /****************************** dポイントエリア ******************************/ .dpoint-area-inner { padding: 20px 16px 24px 16px; } .dpoint-area-btn, .dpoint-area-bk-arrow { padding: 11px 38px 11px 16px; width: 144px; margin: 16px auto 0; } .dpoint-area-btn-hojin { /*padding: 4px 44px 4px 16px;*/ width: 100%; max-width: 164px; } .dpoint-area-btn::after { right: 10px; background-image: url(../images_20m4/common/icons/icn_blank.png); } .dpoint-area-bk-arrow::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .dpoint-area-btn-img { width: 86px; vertical-align: initial; } .dpoint-area-btn-img-hojin { width: 102px; vertical-align: middle; } .dpoint-area-lostpoint { margin: 8px 0; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; line-height: 14px; } .dpoint-area-lostpoint-txt-title { font-size: 11px; padding: 0 8px 0 0; } .dpoint-area-lostpoint-txt { font-size: 14px; font-weight: bold; } .dpoint-area-lostpoint-mark { font-size: 12px; } .dpoint-area-lostpoint-value, .dpoint-area-lostpoint-p { font-weight: bold; color: #CF1131; } .dpoint-area-lostpoint-value { font-size: 16px; letter-spacing: -0.5px; max-width: 75px; } .dpoint-area-now-point-value { font-weight: bold; letter-spacing: -0.75px; word-break: break-all; } .dpoint-area-point-rank-no-lost { padding: 8px 0 0 0; } .dpoint-area-point-rank-no-dpoint { max-width: 143px; margin: 0 auto; } .dpoint-area .stage-area { position: relative; top: 0; right: 0; margin: 0 16px 0 0; } .dpoint-area-now-rank-txt { border: 3px solid #EEF1F4; border-radius: 8px; position: relative; width: 126px; display: block; font-size: 14px; font-weight: bold; padding: 7px 0 6px 42px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; margin: 0 16px 0 0; min-width: 126px; } .dpoint-area-now-rank-txt::before { top: 50%; left: 19px; width: 20px; height: 20px; margin: -10px 0 0 0; background-image: url(../images_20m4/common/icons/icn_dpoint_stage_05.png); } .stage-area-home-txt-pt-span.home-careerfree { font-weight: bold; } /* dポイントランク_星 */ .dpoint-area .common-rank-area { position: relative; top: 0; right: 0; margin: 0 16px 0 0; } .rank-area-home-icon { image-rendering: -webkit-optimize-contrast; } .rank-area-home-icon { width: 23px; height: 22px; position: absolute; top: 8px; left: 8px; } .rank-area-home { height: 40px; min-width: 126px; } .rank-area-home .common-rank-area-inner{ border: 1px solid #DFE4E9; border-radius: 8px; height: 100%; align-items: center; } .rank-area-home-txt-wrap { font-size: 16px; padding: 6px 8px 2px 37px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .rank-area-home-txt { font-size: 14px; line-height: 14px; margin-right: 10px; } .rank-area-home-txt-mgn-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .rank-area-home-mgn { font-size: 12px; line-height: 16px; } /* dポイントケーキアイコン */ .rank-area-cake-icon { position: absolute; top: 3px; right: 12px; width: 18px; height: 18px; image-rendering: -webkit-optimize-contrast; } /****************************** お手続き・各種設定エリア ******************************/ .conf-area-box { padding: 0; } .conf-area-list-txt-box { position: relative; padding: 16px 44px 16px 86px; } .conf-area-list-txt-box::before { width: 56px; height: 56px; left: 16px; top: 50%; margin: -28px 0 0 0; } .conf-area-contact::before { background-image: url(../images_20m4/common/icons/icn_contract.png?220720); } .conf-area-procedure::before { background-image: url(../images_20m4/common/icons/icn_procedure.png?220720); } .conf-area-setting::before { background-image: url(../images_20m4/common/icons/icn_setting.png?220720); } .conf-area-list-txt-box::after { top: 50%; width: 24px; height: 24px; margin: -12px 0 0 0; } .conf-area-list-txt { color: #31353A; font-size: 16px; font-weight: bold; margin: 0 0 4px 0; line-height: 18px; } .conf-area-list-more-txt { font-size: 12px; line-height: 16px; } .conf-area-list-box { border-bottom: 1px solid #DFE4E9; } .conf-area-list-box:first-child .conf-area-list-txt-box { padding: 24px 44px 16px 86px; } .conf-area-list-box:last-child .conf-area-list-txt-box { padding: 16px 44px 24px 86px; } .conf-area-list-box:last-child { border-bottom: none; } .conf-area-list-box:first-child .conf-area-list-box-link { border-radius: 16px 16px 0 0; } .conf-area-list-box:last-child .conf-area-list-box-link { border-radius: 0 0 16px 16px; } .conf-area-list-box-link { display: block; } /****************************** ドコモショップエリア ******************************/ .docomo-shop-area-box { margin: 40px 8px; padding: 16px; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box { margin: 40px 8px; padding: 0; } .docomo-shop-area-link-txt, .docomo-online-shop-area-link-txt { position: relative; padding: 16px 16px 16px 56px; letter-spacing: -1px; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .docomo-shop-area-link-txt { padding: 0 0 0 56px; position: relative; height: 48px; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .common-list-btn-normal-txt-box.home-docomo-shop-area-inner .common-list-btn-normal-txt { padding-top: 24px; border-radius: 16px 16px 0 0; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .docomo-online-shop-area-link-txt { padding: 16px 0 16px 56px; } .docomo-shop-area-link-txt::before, .docomo-online-shop-area-link-txt::before { left: 0; width: 48px; height: 48px; top: 50%; margin: -24px 0 0 0; background-image: url(../images_20m4/common/icons/icn_related_services_docomoshop.png?220201); } .docomo-online-shop-area-link-txt::before { background-image: url(../images_20m4/common/icons/icn_related_services_onlineshop.png); } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .docomo-shop-area-link-txt .home-docomo-shop-area-shopname-wrap, .common-list-btn-normal-box.common-outside.docomo-shop-area-box .docomo-shop-area-link-txt .home-docomo-shop-area-shopsearch { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } .docomo-shop-area-link { width: 88px; padding: 12px 42px 12px 16px; margin: 0; font-weight: bold; } .docomo-shop-area-link::after { right: 8px; } .docomo-shop-area-link-box { margin: 0 0 12px 0; line-height: 18px; } .docomo-shop-area-txt { font-size: 14px; line-height: 20px; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .application_movieArea { padding: 0 16px; } @media screen and (min-width:768px) { .common-list-btn-normal-box.common-outside.docomo-shop-area-box .docomo-shop-area-txt { border-bottom: 1px solid #DFE4E9; margin: 0 16px; } } /****************************** 注意事項エリア ******************************/ .important-point-area { margin: 40px auto; } .home-important-point-area { margin: 40px auto; text-align: center; } .important-point-area-btn { padding: 14px 30px 14px 56px; width: 263px; display: block; text-align: center; 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; line-height: 20px; } .important-point-area-btn::before { display: inline-block; content: ''; position: absolute; top: 50%; left: 36px; width: 16px; height: 16px; margin-top: -8px; background-size: contain; background-repeat: no-repeat; background-image: url(../images_20m4/common/icons/icn_attention.png); } /****************************** お知らせエリア ******************************/ .info-area-h3 { margin: 16px 0 0 0; border-bottom: 1px solid #DFE4E9; padding: 0 0 16px 0; } .info-area-box { padding: 8px 0px; } .info-area-list { position: relative; padding: 18px 44px 18px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .info-area-txt { font-size: 12px; color: #4A4F55; line-height: 12px; -ms-flex-preferred-size: auto; flex-basis: auto; } .info-area-txt-wrap { -ms-flex-preferred-size: 100%; flex-basis: 100%; } .info-area-txt-wrap-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .info-area-box .oshirase-btn-link-area-list-important { padding: 0; margin-left: 8px; -ms-flex-preferred-size: 34px; flex-basis: 34px; } .info-area-more-txt { font-size: 14px; font-weight: bold; color: #31353A; line-height: 18px; margin-top: 8px; -ms-flex-preferred-size: 100%; flex-basis: 100%; } .info-area-list-box, .home-info-area-list-box { border-bottom: 1px solid #DFE4E9; } .info-area-maintenance, .info-area-more-info { display: block; margin: 0 auto; position: relative; font-size: 14px; padding: 10px 42px 9px 14px; border: 1px solid #DFE4E9; width: 214px; border-radius: 24px; font-weight: bold; } .info-area-maintenance { padding: 9px 0px 10px 65px; margin: 0 auto 16px auto; } .info-area-more-info { margin: 24px auto 16px; } .info-area-maintenance::before { top: 50%; left: 40px; width: 16px; height: 16px; margin: -8px 0 0 0; background-image: url(../images_20m4/common/icons/icn_maintenance.png); } /****************************** My docomo アプリエリア ******************************/ .mydocomo-app-area { padding: 0 0 40px 0; } .mydocomo-app-area-txt { position: relative; padding: 10px 0px 10px 106px; font-weight: bold; font-size: 16px; margin: 0 auto; max-width: 325px; } .mydocomo-app-area-txt-span { font-weight: normal; } .mydocomo-app-area-txt::before { top: 50%; left: 0; width: 90px; height: 90px; margin: -45px 0 0 0; background-image: url(../images_20m4/common/icons/icn_appIcon_about_app_90.png); box-shadow: 0 0 4px 0 rgba(0,0,0,0.12); border-radius: 24px; } .mydocomo-app-area-btn-appstore { width: 109px; } .mydocomo-app-area-btn-googleplay { width: 135px; } .mydocomo-app-area-btn-box { padding: 16px 0 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mydocomo-app-area-btn-list { margin: 0 10px 0 0; } .mydocomo-app-area-btn-list:last-child { margin: 0; } .mydocomo-app-area-btn-list-mr00 { margin: 0; } .mydocomo-app-area-box { margin: 40px 8px 0px 8px; padding: 24px 16px; } /****************************** メインエリア出し分け ******************************/ .careerfree-yellow-area, .home-saigai-area, .all-fukuso-area, .login-nonoptout-area, .home-cancel-3months-area { padding: 8px 0 0 0; } .home-reregistration-area { padding-top: 8px; } .careerfree-yellow-area-inner, .home-saigai-area-inner, .all-fukuso-area-inner, .login-nonoptout-area-inner, .home-cancel-3months-area-inner { padding: 26px 18px; background-color: #FFF0B2; border: 6px solid #fff; } .home-saigai-area-inner, .all-fukuso-area-inner, .login-nonoptout-area-inner, .home-cancel-3months-area-inner { margin: 0 8px; padding: 26px 18px; } .all-fukuso-area-inner { margin: 0 8px; padding: 26px 10px; } .careerfree-yellow-area-txt, .home-saigai-area-txt, .all-fukuso-area-txt, .login-nonoptout-area-txt, .home-opan-all-area-txt, .home-sign-up-area-txt, .home-hojin-area-txt, .home-cancel-3months-area-txt { font-size: 18px; color: #1A1C1E; letter-spacing: 0; text-align: center; line-height: 24px; font-weight: bold; } .careerfree-yellow-area-subtxt, .home-saigai-area-subtxt, .all-fukuso-area-subtxt, .home-cancel-3months-area-subtxt { font-size: 16px; color: #1A1C1E; letter-spacing: 0; text-align: center; line-height: 22px; margin-top: 16px } .careerfree-yellow-area-txt::before, .home-saigai-area-txt::before, .all-fukuso-area-txt::before, .login-nonoptout-area-txt::before, .home-cancel-3months-area-txt::before, .home-data-area-more-btn-box.home-error::before, .usage-fee-area-morebtn-box.home-error::before, .dpoint-area-point-rank-box.home-error::before { content: ''; display: block; width: 64px; height: 64px; margin: 0 auto 16px; background-size: contain; background-repeat: no-repeat; vertical-align: middle; background-image: url(../images_20m4/common/icons/icn_64_information_oncolor@2x.png); } .all-fukuso-area-txt::before, .login-nonoptout-area-txt::before { background-image: url(../images_20m4/common/icons/icn_64_error_oncolor@2x.png); } .home-data-area-more-btn-box.home-error::before, .usage-fee-area-morebtn-box.home-error::before, .dpoint-area-point-rank-box.home-error::before { background-image: url(../images_20m4/common/icons/icn_64_error@2x.png); margin: 0 auto 24px; } .careerfree-yellow-area-yellow-btn { max-width: 284px; height: 48px; line-height: 18px; padding: 11px 16px; margin: 24px auto 0; font-size: 16px; } .careerfree-yellow-area-white-btn, .home-saigai-area-white-btn { padding: 12px 44px 12px 16px; margin: 32px auto 0; max-width: 284px; display: block; text-align: center; border-radius: 24px; font-weight: bold; font-size: 14px; position: relative; box-shadow: 0 0 4px 0 rgba(0,0,0,0.12); background-color: #fff; width: 100%; line-height: 18px; } .home-saigai-area-white-btn { max-width: inherit; margin: 24px auto 0; width: auto; display: inline-block; } .careerfree-yellow-area-white-btn::after { right: 10px; background-image: url(../images_20m4/common/icons/icn_blank.png); } .home-saigai-area-white-btn::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .usage-fee-area-title.home-error { display: block; margin: 0; } .box-in-title.home-error { margin: 0 0 10px 0; } .all-fukuso-area-listbtn { position: relative; text-align: left; border-top: 1px solid #DFE4E9; font-size: 16px; padding: 16px 34px 16px 16px; border-radius: 0; line-height: 16px; } .all-fukuso-area-listbtn::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .all-fukuso-area-listbtn-tab::after { background-image: url(../images_20m4/common/icons/icn_blank.png) } .all-fukuso-area-listbtn-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-weight: bold; margin: 24px 0 0 0; } .all-fukuso-area-listbtn-txt { font-size: 18px; font-weight: bold; padding: 0 0 24px 0; } .home-opan-all-area-inner, .home-sign-up-area-inner, .home-hojin-area-inner, .home-reregistration-area-inner { padding: 24px 16px; margin: 8px; } .home-reregistration-area-inner { margin-top: 0px; } .home-opan-all-area-inner.home-nologin { margin: 0 8px; } .home-opan-all-area.home-nologin { padding: 8px 0 0 0; } .home-opan-all-area-btn-another-login, .home-opan-all-area-btn-login { border: 1px solid #CC0033; border-radius: 24px; font-size: 16px; color: #CC0033!important; letter-spacing: 1px; text-align: center; font-weight: bold; padding: 8px 14px 8px 50px; position: relative; display: block; max-width: 318px; width: 100%; margin: 24px auto; } .home-opan-all-area-btn-another-login { padding: 8px 14px 8px 46px; } .home-opan-all-area-btn-login { background-color: #CC0033; border: 1px solid #CC0033; color: #fff!important; width: 238px; line-height: 18px; margin: 16px auto; border-radius: 30px; padding: 11px 14px 11px 50px; } .home-opan-all-area-btn-another-login::after, .home-opan-all-area-btn-login::after { top: 50%; width: 30px; height: 30px; margin: -15px 0 0 0; left: 6px; background-image: url(../images_20m4/common/btn/btn_login_red@2x.png); } .home-opan-all-area-btn-login::after { background-image: url(../images_20m4/common/btn/btn_login_white@2x.png); } .home-opan-all-area-btn-menu-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-weight: bold; margin: 24px 0 0 0; border: 1px solid #DFE4E9; border-radius: 8px; } .home-opan-all-area-btn-menu { position: relative; text-align: left; border-top: 1px solid #DFE4E9; font-size: 16px; padding: 16px 44px 16px 16px; border-radius: 0; line-height: 18px; display: block; } .home-opan-all-area-btn-menu:first-child { border-radius: 8px 8px 0 0; border-top: none; } .home-opan-all-area-btn-menu:last-child { border-radius: 0 0 8px 8px; } .home-opan-all-area-btn-menu::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .account-area-name.home-login-nonoptout { font-size: 12px; line-height: 16px; } .stage-area.home-login-nonoptout { right: 0; } .home-opan-all-area.home-login-nonoptout { padding-top: 8px; } .home-opan-all-area-inner.home-login-nonoptout { margin-top: 0; } .home-info-display-btn { background-color: #FFE26E; border-radius: 24px; font-size: 12px; line-height: 14px; width: 100%; display: block; max-width: 92px; text-align: center; padding: 11px 10px; margin: 0 8px 0 auto; height: 37px; font-weight: bold; color: #31353A!important; } .home-opan-all-area-btn-login.home-login-optout, .home-opan-all-area-btn-login.home-nologin { padding: 11px 14px 11px 50px; border-radius: 24px; max-width: 204px; } .home-opan-all-area-btn-login.home-nologin { max-width: 170px; } .home-opan-all-area-txt.home-login-optout { font-size: 14px; font-weight: normal; line-height: 20px; padding: 0 16px; text-align: left; margin: 16px 0 24px; } .home-opan-all-area-txtlink.home-login-optout, .home-opan-all-area-txtlink.home-nologin, .home-houjin-parent-on-area-link { color: #007AFF!important; } .home-opan-all-area-txtlink.home-login-optout:hover, .home-opan-all-area-txtlink.home-nologin:hover, .home-houjin-parent-on-area-link:hover { text-decoration: underline; } .usage-fee-area-txt-box.home-houjin-parent-on, .usage-fee-area-txt-box.home-houjin-parent-off, .dpoint-area-lostpoint-txt.home-houjin-parent-off, .dpoint-area-point-rank.home-houjin-parent-off, .dpoint-area-point-rank.home-houjin-children-off, .usage-fee-area-txt-box.home-houjin-children-off { font-size: 16px; text-align: center; margin: 22px 0 4px 0; font-weight: normal; display: block; } .dpoint-area-point-rank.home-houjin-parent-off, .dpoint-area-point-rank.home-houjin-children-off { margin: 24px 0 0; } .dpoint-area-btn-img.home-houjin-parent-on, .dpoint-area-btn-img.home-houjin-parent-off, .dpoint-area-btn-img.home-houjin-children-off { width: 102px; } .dpoint-area-btn.home-houjin-parent-on, .dpoint-area-btn.home-houjin-parent-off, .dpoint-area-btn.home-houjin-children-off, .dpoint-area-bk-arrow.home-houjin-parent-on, .dpoint-area-bk-arrow.home-houjin-parent-off, .dpoint-area-bk-arrow.home-houjin-children-off { padding: 2px 36px 2px 4px; } .dpoint-area-btn.home-houjin-parent-off, .dpoint-area-btn.home-houjin-children-off, .dpoint-area-bk-arrow.home-houjin-parent-off, .dpoint-area-bk-arrow.home-houjin-children-off { margin: 14px auto 0; } .home-houjin-parent-on-area-txt{ font-size: 12px; line-height: 18px; text-align: center; } .dpoint-area-lostpoint-box.home-houjin-parent-on { padding: 0 0 12px 0; } .home-houjin-parent-on-area.home-houjin-parent-off, .home-houjin-parent-on-area.home-houjin-children-off { padding: 8px 0 0 0; } .home-houjin-parent-on-area-inner.home-houjin-parent-off, .home-houjin-parent-on-area-inner.home-houjin-children-off { margin: 0 8px; padding: 16px; } .dpoint-area-lostpoint-box { padding: 0 0 16px 0; } .dpoint-area-inner.home-careerfree .dpoint-area-lostpoint-box.home-careerfree { padding-bottom: 0; } .dpoint-area-inner.home-careerfree .dpoint-area-lostpoint.home-careerfree { margin-top: 8px; margin-bottom: 16px; } .dpoint-area.home-careerfree .dpoint-area-inner { margin-top: 8px; } /****************************** アンケートのお願いエリア ******************************/ .survey-area { width: 100%; height: 100%; z-index: 1250; display: -webkit-box; display: -ms-flexbox; display: flex; top: 0; left: 0; position: relative; } .survey-area-inner-wrap { position: fixed; max-width: 375%; width: 100%; z-index: 1350; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 83%; padding: 12px 16px; } .survey-area-inner { overflow: auto; height: 100%; border-radius: 16px; text-align: center; } .survey-area-bg{ background: #000000; z-index: 1200; position: fixed; width: 100%; height: 100%; top: 0; left: 0; opacity: 0.75; } .survey-area-contents { width: 100%; height: 100%; z-index: 1250; display: -webkit-box; display: -ms-flexbox; display: flex; top: 0; left: 0; } .survey-area-box { max-width: 762px; width: 100%; padding: 26px 10px; background: #FFF0B2; border: 6px solid #FFFFFF; box-shadow: 0 0 4px 0 rgba(0,0,0,0.08); border-radius: 16px; margin: 0 auto; } .survey-area-ttl { font-size: 18px; font-weight: bold; color: #1A1C1E; letter-spacing: 0; text-align: center; line-height: 24px; } .survey-area-txt { font-size: 16px; color: #1A1C1E; letter-spacing: 0; text-align: center; line-height: 22px; margin-top: 16px; } .survey-area-btn-box { width: 100%; max-width: 284px; margin: 0 auto; } .survey-area-btn-yellow { font-size: 16px; color: #31353A; letter-spacing: 0; font-weight: bold; text-align: center; background: #FFCC00; border: 4px solid #FFFFFF; box-shadow: 0 0 4px 0 rgba(0,0,0,0.08); border-radius: 24px; padding: 12px 0; width: 100%; height: 48px; line-height: 1; margin: 24px 0 0; display: block; } .survey-area-btn-yellow:hover { background-color: #FFE26E; } .survey-area-btn-white { font-size: 14px; background: #FFFFFF; box-shadow: 0 0 4px 0 rgba(0,0,0,0.08); border-radius: 24px; width: 100%; height: 42px; text-align: center; line-height: 1; font-weight: bold; padding: 14px 0; margin-top: 32px; color: #31353A; display: block; } .survey-area-btn-white:hover { background-color: #F6F7F8; } /****************************** npsアンケートエリア ******************************/ .nps-questionnaire-1-area { width: 100%; height: 100%; position: relative; } .nps-questionnaire-1-area-bg { background: rgba(0,0,0,0.7); z-index: 1300; position: fixed; width: 100%; height: 100%; top: 0; left: 0; } .nps-questionnaire-1-area-contents { width: 100%; height: 100%; z-index: 1350; display: -webkit-box; display: -ms-flexbox; display: flex; top: 0; left: 0; position: relative; } .nps-questionnaire-1-area-contents-inner-wrap { position: fixed; max-width: 337px; width: 95%; z-index: 1350; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 85.2%; } .nps-questionnaire-1-area-contents-inner { background: #EEF1F4; padding: 0 16px; overflow: auto; height: 100%; border-radius: 16px; } .nps-questionnaire-1-area-contents-inner p { -webkit-transform: translateZ(0) scale(1.0, 1.0); -webkit-font-smoothing: subpixel-antialiased; } .nps-questionnaire-1-area-contents-inner.nps-questionnaire-3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 0; } .nps-questionnaire-1-area-question-answer-level input[type="radio"] { display: none; } .nps-questionnaire-1-area-ttl, .nps-questionnaire-1-area-ttl-answered { font-size: 18px; line-height: 22px; text-align: center; margin-top: 40px; margin-bottom: 32px; font-weight: bold; } .nps-questionnaire-1-area-ttl-answered { margin-bottom: 0; padding-top: 80px; position: relative; } .nps-questionnaire-1-area-ttl-answered::before { content: ''; background-image: url(../images_20m4/common/icons/icn_64_bright_oncolor@2x.png); background-size: contain; background-repeat: no-repeat; display: inline-block; position: absolute; top: 0; left: 50%; width: 64px; height: 64px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .nps-questionnaire-1-area-ttl-answered-txt { font-size: 16px; color: #1A1C1E; text-align: center; line-height: 26px; font-weight: normal; margin-top: 16px; } .nps-questionnaire-1-area-question-box { margin: 32px auto; max-width: 600px; } .nps-questionnaire-1-area-question-title-box, .nps-questionnaire-1-area-question-title-box-center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 16px; } .nps-questionnaire-1-area-question-title-box-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nps-questionnaire-1-area-question-leveltxt-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 12px; line-height: 18px; color: #4A4F55; margin-bottom: 4px; } .nps-questionnaire-1-area-question-no-box { margin-right: 14px; width: 40px; } .nps-questionnaire-1-area-question-no { font-size: 20px; color: #FFFFFF; text-align: center; line-height: 16px; background: #31353A; border-radius: 2px; padding: 12px 13px; font-weight: bold; width: 40px; height: 40px; } .nps-questionnaire-1-area-question-no-annotation { font-size: 12px; color: #1A1C1E; text-align: center; line-height: 16px; margin-top: 4px; width: 40px; letter-spacing: -1px; } .nps-questionnaire-1-area-question-title { font-size: 16px; font-weight: bold; line-height: 22px; max-width: 544px; width: 100%; } .nps-questionnaire-1-area-question-answer-level { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .nps-questionnaire-1-area-question-answer-label { width: 8.3%; } .nps-questionnaire-1-area-question-answer-label input[type="radio"]:checked + .nps-questionnaire-1-area-question-answer-btn { cursor: default; } .nps-questionnaire-1-area-question-answer-label input[type="radio"]:checked + .nps-questionnaire-1-area-question-answer-btn, .nps-questionnaire-1-area-question-answer-btn:hover { background-color: #ffe26e; font-weight: bold; } .nps-questionnaire-1-area-question-answer-btn { font-size: 12px; text-align: center; line-height: 44px; border: 2px solid #ffe26e; border-radius: 24px; height: 48px; background-color: #fff; font-family: SFProText; max-width: 40px; } .nps-questionnaire-1-area-question-answer-comment textarea { -webkit-appearance: none; appearance: none; background: #fff; overflow: auto; resize: none; width: 100%; height: 122px; padding: 6px 12px; border: 1px solid #4A4F55; border-radius: 6px; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN","メイリオ", Meiryo, sans-serif; line-height: 20px; } .nps-questionnaire-1-area-question-answer-comment.nps-questionnaire-2 textarea { border: 2px solid #CC0033; } .nps-questionnaire-1-area-question-answer-comment-attention { position: relative; line-height: 22px; padding-left: 16px; margin-top: 8px; } .nps-questionnaire-1-area-question-answer-comment-attention::before { content: "※"; display: inline; position: absolute; top: 0; left: 0; } .nps-questionnaire-1-area-question-answer-comment-attention-red { display: none; font-weight: bold; color: #CC0033; margin-bottom: 16px; } .nps-questionnaire-1-area-question-answer-comment-attention-red.nps-questionnaire-2 { display: block; } .nps-questionnaire-1-area-question-checkbox-box, .nps-questionnaire-1-area-question-radiobox-box { font-size: 16px; line-height: 24px; text-align: center; } .nps-questionnaire-1-area-question-checkbox, .nps-questionnaire-1-area-question-radiobox { display: none; } .nps-questionnaire-1-area-question-checkbox-txt, .nps-questionnaire-1-area-question-radiobox-txt { padding: 0px 0 0px 32px; position: relative; font-size: 16px; line-height: 22px; margin: 0 0 24px 0; display: inline-block; margin-bottom: 12px; } .nps-questionnaire-1-area-question-checkbox-txt::before, .nps-questionnaire-1-area-question-radiobox-txt::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 22px; height: 22px; background-image: url(../images_20m4/common/icons/icn_checkbox_small_off@2x.png); background-size: contain; background-repeat: no-repeat; } .nps-questionnaire-1-area-question-radiobox-txt::before { background-image: url(../images_20m4/common/icons/checkbox_radiobutton_off.png); } .nps-questionnaire-1-area-question-checkbox:checked + .nps-questionnaire-1-area-question-checkbox-txt::after, .nps-questionnaire-1-area-question-radiobox:checked + .nps-questionnaire-1-area-question-radiobox-txt::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 22px; height: 22px; background-image: url(../images_20m4/common/icons/icn_checkbox_large_on@2x.png); background-size: contain; background-repeat: no-repeat; } .nps-questionnaire-1-area-question-radiobox:checked + .nps-questionnaire-1-area-question-radiobox-txt::after { background-image: url(../images_20m4/common/icons/checkbox_radiobutton_on.png); } .nps-questionnaire-1-area-question-submitbtn { background: #CED4DC; border: 3px solid #FFFFFF; box-shadow: 0 0 4px 0 rgba(0,0,0,0.08); border-radius: 24px!important; color: #fff; display: block; max-width: 263px; width: 100%; margin: 0 auto 40px; line-height: 16px; height: 48px; font-weight: bold; font-size: 16px; padding: 12px; } .nps-questionnaire-1-area-question-submitbtn.nps-questionnaire-2 { background-color: #FFCC00; color: #31353A; -webkit-transform: translateZ(0) scale(1.0, 1.0); -webkit-font-smoothing: subpixel-antialiased; } .nps-questionnaire-1-area-question-submitbtn:hover { cursor: default; } .nps-questionnaire-1-area-question-submitbtn.nps-questionnaire-2:hover { cursor: pointer; } .nps-questionnaire-1-area-contents-close-btn-box { position: absolute; top: -4px; right: -4px; } .nps-questionnaire-1-area-contents-close-btn-img { width: 32px; height: 32px; } .nps-questionnaire-1-area-question-answer-comment textarea:focus::-webkit-input-placeholder { color: white; } /* Chrome・Safari・Opera用(※Edge) */ .nps-questionnaire-1-area-question-answer-comment textarea:focus:-moz-placeholder { color: white; } /* Firefox18以前用 */ .nps-questionnaire-1-area-question-answer-comment textarea:focus::-moz-placeholder { color: white; } /* Firefox19以上用 */ .nps-questionnaire-1-area-question-answer-comment textarea:focus::placeholder { color: white; } /****************************** TAB ******************************/ @media screen and (min-width:768px) { .home-area { max-width: 960px; width: 100%; margin: 0 auto; } /****************************** リスト・ボックス共通部分 ******************************/ .dpoint-area-box, .dpoint-area-lostpoint-box, .info-area-h3-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .mydocomo-app-area-btn-box, .mydocomo-app-area-box, .dpoint-area-point-rank-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .dpoint-area-point-rank-box.home-error { display: block; } .info-area-list, .info-area-box-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /****************************** 注意事項エリア ******************************/ .important-point-area { margin: 64px auto; } .home-important-point-area { margin: 64px auto; text-align: center; } /****************************** データ通信量エリア ******************************/ .home-data-area { padding: 16px 0; } .home-data-area-title { margin: 0 0 10px 0; } .home-data-area-title-txt { font-size: 16px; } .home-data-area-title-error { margin: 0 0 8px 0; } .home-data-area-title-disaster { margin: 0 0 28px 0; } .home-data-area-graph-tsukai-houdai-list { font-size: 14px; padding: 12px 0; } .home-data-area-graph-tsukai-houdai-list-value { font-size: 28px; line-height: 28px; letter-spacing: -1px; } .home-data-area-graph-tsukai-houdai-campaign-box { padding: 12px 0 0 0; } .home-data-area-representative-list-gb { margin: 0; } .home-data-area-btn.mydcm-ua-sp { display: none!important; } .home-data-area-btn.mydcm-ua-pcTabAll { display: flex!important; } /****************************** ご利用料金エリア ******************************/ .usage-fee-area { padding-bottom: 16px; } .usage-fee-area-box { display: -webkit-box; display: -ms-flexbox; display: flex; } .usage-fee-area-box, .dpoint-area-box { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .usage-fee-area-month-box, .usage-fee-area-month-box-hojin, .dpoint-area-month-box, .dpoint-area-hojin, .usage-fee-area-month-error-box { padding: 0 14px 0 0; border-right: 1px solid #EEF1F4; margin: 0 0 24px 0; width: 346px; } .usage-fee-area-morebtn-nosim-recommend-box { margin: 0 auto; } .usage-fee-area-month-box-hojin { width: 100%; border-right: none; padding: 0; margin: 0 0 26px 0; } .dpoint-area-month-box, .dpoint-area-hojin { padding: 0; } .dpoint-area-hojin { margin: 0; } .usage-fee-area-month-error-box, .dpoint-area-month-error-box { margin: 0; padding: 0; } .usage-fee-area-month { padding: 10px 0; } .usage-fee-area-month-no-dbarai { padding: 10px 0 0 0; } .usage-fee-area-morebtn-box, .usage-fee-area-error-morebtn-box { margin: 0 0 24px 14px; width: 144px; } .usage-fee-area-morebtn-box.home-error { width: auto; margin: 0; } .usage-fee-area-error-morebtn-box { margin: 0 0 0 14px; } .usage-fee-area-error-morebtn { width: 130px; } .usage-fee-area-dbarai-txt { font-size: 14px; } .usage-fee-area-month-icon { font-size: 14px; min-width: 50px; } .usage-fee-area-month-txt { padding-right: 3px; font-size: 16px; } .usage-fee-area-month-fee, .dpoint-area-now-point { max-width: 158px; width: 100%; padding: 2px 10px; font-size: 24px; } .dpoint-area-now-point-value { font-size: 24px; } .usage-fee-area-dbarai { padding: 0; } .usage-fee-area-dbarai-value { font-size: 20px; padding: 0 0 0 10px; max-width: 180px; } .usage-fee-area-dbarai-yen { font-size: 12px; } .usage-fee-area-morebtn, .usage-fee-area-error-morebtn { width: 144px; } .usage-fee-area-error, .dpoint-area-error { padding: 0; } .usage-fee-area-hojin { padding: 0; margin: 0 0 16px 0; } /* 一括請求親ボタン_20211105 */ .usage-fee-area-morebtn-box { order: 2; } .usage-fee-area-parent-btn-box { order: 3; margin: 0 auto; width: 100%; } .usage-fee-area-morebtn-nosim-recommend-box { order: 4; } .home-careerfree-docomo-denki { margin-bottom: 16px; } /****************************** dポイントエリア ******************************/ .dpoint-area-inner { margin: 0 auto; } .home-careerfree-cancel-dpoint-member .common-box { margin-bottom: 16px!important; } .dpoint-area-lostpoint { line-height: 14px; margin: 0; } .dpoint-area-inner.home-careerfree .dpoint-area-lostpoint.home-careerfree { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 0; margin-bottom: 0; } .dpoint-area-lostpoint.home-careerfree { padding: 0 0 16px 0; } .dpoint-area-lostpoint-box.dpoint-area-no-point { padding: 0 0 12px 0; } .dpoint-area-lostpoint-box.home-careerfree { display: block; } .dpoint-area-lostpoint-box .box-in-title { margin-bottom: 0; white-space: nowrap; } .dpoint-area-lostpoint { padding: 0; } .dpoint-area-lostpoint-txt-title { font-size: 14px; margin: 0 0 0 auto; padding: 0; line-height: 20px; } .dpoint-area-lostpoint-txt, .dpoint-area-lostpoint-mark { font-size: 18px; letter-spacing: -0.64px; } .dpoint-area-lostpoint-value { font-size: 20px; max-width: 95px; letter-spacing: -0.5px; } .dpoint-area-lostpoint-p { font-size: 14px; } .dpoint-area-point-rank-box { align-items: center; } .dpoint-area-point-rank, .dpoint-area-point-rank-no-lost { align-items: center; border-right: 1px solid #EEF1F4; padding: 0 14px 0 0; width: 342px; } .dpoint-area-point-rank-no-dpoint { max-width: 185px; } .dpoint-area-now-rank-txt { width: 153px; padding: 7px 0 7px 55px; } .dpoint-area-now-rank-txt::before { left: 32px; } .dpoint-area-btn, .dpoint-area-btn-hojin, .dpoint-area-bk-arrow { margin: 0 0 0 14px; } .common-btn-area.dpoint-area-dpoint-perks-btn { flex-basis: 169px; margin-left: 14px; } .dpoint-area-btn.home-error, .dpoint-area-bk-arrow.home-error { margin: 0 auto; } .dpoint-area .stage-area { min-width: 154px; } .dpoint-area .stage-area-home-icon.home-careerfree { top: 8px; left: 24px; } .dpoint-area .stage-area-home-icon-pt { top: 8px; left: 36px; } .stage-area-home-txt.home-careerfree { padding: 0 8px 0 46px; } .dpoint-area .stage-area-home-color-pt { padding: 0 8px 0 60px; } .dpoint-area-lostpoint-wrap.home-careerfree { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .dpoint-area-inner.home-careerfree .dpoint-area-lostpoint-wrap.home-careerfree { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .dpoint-area-lostpoint-txt-box { margin: 0 0 0 auto; padding-left: 10px; line-height: 20px; } /* dポイントランク_星 */ .dpoint-area .common-rank-area { min-width: 154px; } .rank-area-home-icon { left: 12px; } .rank-area-home-txt-wrap { padding: 6px 8px 2px 42px; } .dpoint-area.home-careerfree .dpoint-area-inner { margin-top: 16px; } /****************************** お手続き・各種設定エリア ******************************/ .conf-area-box { padding: 0; max-width: 746px; width: 100%; } .conf-area-list-txt-box { padding: 88px 46px 16px 24px; margin: 8px 0; border-right: 1px solid #EEF1F4; height: 210px; } .conf-area-list-txt-box::before { left: 94.5px; top: 16px; margin: 0; } .conf-area-list-txt-box::after { top: 75%; } .conf-area-list-box:first-child .conf-area-list-txt-box { padding: 88px 46px 16px 24px; margin: 8px 0; } .conf-area-list-box:last-child .conf-area-list-txt-box { padding: 88px 46px 16px 24px; margin: 8px 0; } .conf-area-list-box { border-bottom: none; width: 250px; } .conf-area-list-box:last-child .conf-area-list-box-link { border-radius: 0 16px 16px 0; } .conf-area-list-box:first-child .conf-area-list-box-link { border-radius: 16px 0 0 16px; } .conf-area-list-box-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .conf-area-list-box-link { display: inline-block; } /****************************** ドコモショップエリア ******************************/ .docomo-shop-area-box { margin: 64px auto; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box { max-width: 746px; margin: 64px auto; } .docomo-shop-area-link-txt, .docomo-online-shop-area-link-txt { font-size: 16px; padding: 5px 16px 5px 56px; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .docomo-online-shop-area-link-txt { padding: 13px 0 13px 56px; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .application_movieArea { padding: 0; margin-bottom: 24px; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .common-list-btn-normal { display: -webkit-box; display: -ms-flexbox; display: flex; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .common-list-btn-normal-txt-box { -ms-flex-preferred-size: 50%; flex-basis: 59%; border-bottom: none; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .common-list-btn-normal-txt-box.home-docomo-shop-area-inner { border-right: 1px solid #DFE4E9; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .common-list-btn-normal-txt-box.home-docomo-shop-area-inner .common-list-btn-normal-txt { border-radius: 16px 0 0 0!important; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box .common-list-btn-normal-txt-box.home-docomo-online-shop-area .common-list-btn-normal-txt { border-radius: 0 16px 0 0!important; padding-top: 24px!important; padding-bottom: 16px; } /****************************** お知らせエリア ******************************/ .info-area-h3 { margin: 0 auto; border-bottom: none; padding: 0; } .info-area-h3-box { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; align-items: center; margin: 0; width: 100%; padding: 0 0 16px 0; border-bottom: 1px solid #DFE4E9; } .home-info-area-h3 { margin: 0; line-height: 42px; } .home-info-area-h3-box { position: relative; width: 100%; margin-bottom: 16px; } .info-area-more-info { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin: 24px auto 0; } .info-area-list-box-wrap { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 100%; } .info-area-maintenance, .home-info-area-maintenance { margin: 0; width: 160px; padding: 9px 0 10px 36px; } .info-area-maintenance.home-info-area-maintenance { margin: 0; position: absolute; top: 0; right: 0; width: auto; padding: 9px 12px 10px 36px; } .info-area-maintenance.home-info-area-maintenance::before { left: 12px; } .home-info-area-list-box:first-child { border-top: 1px solid #DFE4E9; } .info-area-box { padding: 40px 24px 48px; max-width: 746px; width: 100%; } .info-area-list { padding: 16px 44px 16px 16px; } .info-area-txt-wrap { -ms-flex-preferred-size: 140px; flex-basis: 140px; margin-right: 8px; } .info-area-txt { -ms-flex-preferred-size: 104px; flex-basis: 104px; } .info-area-more-txt { -ms-flex-preferred-size: 490px; flex-basis: 490px; margin-top: 0; } .info-area-box-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .info-area-box .oshirase-btn-link-area-list-important { margin-left: 0; } .info-area-maintenance::before { left: 12px; } /****************************** My docomo アプリエリア ******************************/ .mydocomo-app-area { padding: 0 0 64px 0; } .mydocomo-app-area-txt { padding: 10px 16px 10px 106px; max-width: 350px; margin: 0; } .mydocomo-app-area-btn-box { align-items: center; padding: 0; } .mydocomo-app-area-btn-list { margin: 10px 10px 10px 0; } .mydocomo-app-area-btn-list-mr00 { margin: 0 10px 0 0; } .mydocomo-app-area-box { margin: 64px auto 0px auto; padding: 32px 0; max-width: 746px; align-items: center; width: 100%; } .mydocomo-app-area_qr_img { width: 92px; } /****************************** メインエリア出し分け ******************************/ .home-cancel-3months-area, .home-saigai-area, .all-fukuso-area, .login-nonoptout-area, .home-houjin-parent-on-area.home-houjin-parent-off, .home-houjin-parent-on-area.home-houjin-children-off { padding: 16px 0 0 0; } .all-fukuso-area-inner { max-width: 746px; } .careerfree-yellow-area { padding: 0; } .home-reregistration-area { padding-top: 24px; } .home-cancel-3months-area-inner, .home-saigai-area-inner, .all-fukuso-area-inner, .login-nonoptout-area-inner, .home-opan-all-area-inner.home-nologin, .home-houjin-parent-on-area-inner.home-houjin-parent-off, .home-houjin-parent-on-area-inner.home-houjin-children-off { margin: 0 auto; } .careerfree-yellow-area-column2-box { max-width: 536px; margin: 0 auto; padding-top: 8px; } .careerfree-yellow-area-inner { max-width: 746px; } .all-fukuso-area-inner, .login-nonoptout-area-inner { padding: 26px 24px; } .home-data-area-title.home-error, .usage-fee-area-title.home-error, .dpoint-area-lostpoint-box.home-error { margin: 0 0 8px 0; padding: 0; } .usage-fee-area-box.home-error { display: block; } .home-opan-all-area-inner, .home-sign-up-area-inner, .home-hojin-area-inner, .home-reregistration-area-inner { margin: 16px auto; } .home-reregistration-area-inner { margin-top: 0; } .account-area-name.home-login-nonoptout { font-size: 14px; } .home-opan-all-area-txt.home-login-optout { padding: 0 8px; text-align: center; } .home-opan-all-area.home-nologin { padding: 16px 0 0 0; } .home-houjin-parent-on-area-inner { padding: 16px; margin: 16px auto; } .usage-fee-area-month-box.home-houjin-parent-on, .usage-fee-area-month-box.home-houjin-parent-off, .usage-fee-area-month-box.home-houjin-children-off { width: 100%; border-right: none; margin: 0; padding: 0; } .usage-fee-area-title.home-houjin-parent-on, .usage-fee-area-title.home-houjin-parent-off, .usage-fee-area-title.home-houjin-children-off { display: block; } .box-in-title.home-houjin-parent-on, .box-in-title.home-houjin-parent-off, .dpoint-area-point-rank.home-houjin-parent-off, .dpoint-area-point-rank.home-houjin-children-off { margin: 0; } .dpoint-area-point-rank.home-houjin-parent-off, .dpoint-area-point-rank.home-houjin-children-off { padding: 8px 0; } .dpoint-area-lostpoint-box.home-houjin-parent-off, .dpoint-area-lostpoint-box.home-houjin-children-off { padding: 0 0 12px 0; } .dpoint-area-btn.home-houjin-parent-off, .dpoint-area-btn.home-houjin-children-off, .dpoint-area-bk-arrow.home-houjin-parent-off, .dpoint-area-bk-arrow.home-houjin-children-off { margin: 0 0 0 16px; } .usage-fee-area-txt-box.home-houjin-children-off { margin: 24px 0 0 0; } .home-opan-all-area.home-login-nonoptout { padding-top: 16px; } /****************************** 輻輳エリア ******************************/ .all-fukuso-area-listbtn.all-fukuso-area-listbtn-first .all-fukuso-area-listbtn-inner { margin-top: 8px!important; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-last .all-fukuso-area-listbtn-inner { margin-bottom: 8px!important; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-last-tab-only { border-radius: 0 0 16px 16px; } .all-fukuso-area-listbtn.mydcm-ua-sp { display: none!important; } .all-fukuso-area-listbtn.mydcm-ua-pcTabAll { display: block!important; } .all-fukuso-area-2column-listbtn.all-fukuso-area-listbtn-first::after, .all-fukuso-area-2column-listbtn.all-fukuso-area-listbtn-last::after { margin-top: -12px!important; } .home-docomo-online-shop-bannerArea { max-width: 304px; padding-left: 0; padding-right: 0; } /****************************** npsアンケートエリア ******************************/ .nps-questionnaire-1-area-ttl { font-size: 20px; line-height: 24px; margin-top: 88px; } .nps-questionnaire-1-area-ttl-answered { top: -80px; margin-top: 0; } .nps-questionnaire-1-area-contents-inner-wrap { max-width: 746px; width: 100%; max-height: 700px; height: 96%; } .nps-questionnaire-1-area-contents-inner-wrap.nps-questionnaire-2 { max-height: 738px; } .nps-questionnaire-1-area-contents-inner-wrap.nps-questionnaire-3 { max-height: 640px; } .nps-questionnaire-1-area-contents-inner { padding: 0px 76px; } .nps-questionnaire-1-area-question-box { margin: 40px 0; max-width: inherit; } .nps-questionnaire-1-area-question-answer-label { width: 40px; } .nps-questionnaire-1-area-contents-close-btn-box { top: -6px; right: -6px; } .nps-questionnaire-1-area-question-answer-btn { border-radius: 32px; } .nps-questionnaire-1-area-question-submitbtn { margin-bottom: 88px; } /****************************** アンケートのお願いエリア ******************************/ .survey-area-inner-wrap { height: 56%; } } /****************************** PC ******************************/ @media screen and (min-width:980px) { /****************************** PCレイアウト関連 ******************************/ .column3-box, .home-saigai-area-column2-box, .home-cancel-3months-area-column2-box, .careerfree-yellow-area-column2-box { padding: 24px 0 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; } /****************************** 横幅調整 ******************************/ .conf-area-box, .info-area-box, .mydocomo-app-area-box, .column3-box, .home-saigai-area-column2-box, .home-cancel-3months-area-column2-box, .careerfree-yellow-area-column2-box { max-width: 960px; width: 100%; } /****************************** データ通信量エリア ******************************/ .home-data-area-box { margin: 0; } .home-data-area { margin: 0 16px 0 0; max-width: 408px; width: 100%; padding: 0; } /****************************** ご利用料金エリア ******************************/ .usage-fee-area-wrap { width: 536px; } .usage-fee-area-wrap.usage-fee-small-area-wrap { width: auto; } .usage-fee-area-wrap.usage-fee-small-area-wrap .usage-fee-area-month-box { border-right: none; width: 100%; padding-right: 0; } .usage-fee-area-wrap.usage-fee-small-area-wrap .usage-fee-area-month-box .usage-fee-area-month-fee, .dpoint-area-now-point { max-width: 206px; } .usage-fee-area-wrap.usage-fee-small-area-wrap .usage-fee-area-morebtn-box { margin: 6px auto 24px; } .usage-fee-area-wrap.usage-fee-small-area-wrap .usage-fee-area-title.home-error { border-right: none; margin-right: 0; flex-basis: 100%; } .usage-fee-area-wrap.usage-fee-small-area-wrap .usage-fee-area-morebtn.home-error { margin: 18px auto; } .home-careerfree-docomo-denki { max-width: 408px; width: 100%; margin-bottom: 0; } .home-careerfree-cancel .common-box { margin: 0 0 0 20px!important; } .home-careerfree-cancel-dpoint-member .common-box { margin: 0 0 16px 16px!important; max-width: 536px; } .home-careerfree-cancel-dpoint-member .common-box .box-in-title span { display: inline-block; } /****************************** dポイントエリア ******************************/ .stage-area-home.home-careerfree { height: 24px; margin: 0 0 8px 0; min-width: inherit; width: 100%; text-align: left; } .dpoint-area-inner { margin: 0; } .dpoint-area.home-careerfree .dpoint-area-inner { margin-left: 16px; margin-top: 0; max-width: 532px; } .dpoint-area.home-careerfree .dpoint-area-inner.home-houjin-children-off { width: 408px; } .dpoint-area.home-careerfree .dpoint-area-inner.home-houjin-children-off.home-careerfree { width: 536px; } .dpoint-area-point-rank-box.home-careerfree { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 100%; } .dpoint-area-point-rank.home-careerfree { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; width: 100%; border-right: none; padding: 0; } .dpoint-area-now-point.home-careerfree { max-width: inherit; padding: 12px 10px!important; height: 52px; } .dpoint-area-now-point-value.home-careerfree { font-size: 28px; line-height: 28px; } .stage-area-inner.home-careerfree { border: none; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .dpoint-area .stage-area-home-icon-pt.home-careerfree, .dpoint-area .stage-area-home-icon.home-careerfree { left: 0; top: 0; } .stage-area-home-txt.home-careerfree, .stage-area-home-txt-pt.stage-area-home-color-pt.home-careerfree { padding: 0 0 0 30px; line-height: 24px; } .stage-area-home-txt-span.home-careerfree, .stage-area-home-txt-pt-span.home-careerfree { font-size: 16px; line-height: 24px; } .dpoint-area-inner.home-careerfree { width: 532px; margin: 0 0 0 16px; } .dpoint-area-inner.home-careerfree .common-rank-area-wrap.dpoint-area-point-rank-box { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin-top: 16px; } .dpoint-area-inner.home-careerfree .common-rank-area-wrap.dpoint-area-point-rank-box .dpoint-area-point-rank { -ms-flex-wrap: wrap; flex-wrap: wrap; width: 100%; border-right: none; padding-right: 0; } .dpoint-area-inner.home-careerfree .dpoint-area-btn.mydcm-ua-pcTabAll, .dpoint-area-inner.home-careerfree .dpoint-area-bk-arrow.mydcm-ua-pcTabAll { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; margin: 16px auto 0; } .dpoint-area-inner.home-careerfree .dpoint-area-lostpoint-txt-box { padding-left: 0; } .dpoint-area-inner.home-careerfree .dpoint-area-now-point { margin-top: 8px; max-width: inherit; height: 52px; padding: 5px 10px; } .dpoint-area-inner.home-careerfree .dpoint-area-now-point .dpoint-area-now-point-value { font-size: 28px; } .dpoint-area-inner.home-careerfree .dpoint-area-now-point .dpoint-area-now-point-p { font-size: 16px; line-height: 14px; } .dpoint-area-inner.home-careerfree .dpoint-area-lostpoint.home-careerfree { margin-top: 16px; padding-bottom: 0; } .dpoint-area-now-point-p.home-careerfree { font-size: 16px; line-height: 14px; } .dpoint-area-lostpoint-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 100%; } .dpoint-area-btn.home-careerfree, .dpoint-area-bk-arrow.home-careerfree { margin: auto auto 0; -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .dpoint-area-lostpoint-txt-title.home-careerfree { width: 100%; } .dpoint-area-lostpoint-txt.home-careerfree, .dpoint-area-lostpoint-p.home-careerfree { line-height: 14px; } .dpoint-area-lostpoint-mark.home-careerfree, .dpoint-area-lostpoint-value.home-careerfree { line-height: 20px; } .dpoint-area-lostpoint-box.home-careerfree { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 100%; } .dpoint-area-lostpoint.home-careerfree { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; padding: 0 0 8px 0; width: 100%; } .dpoint-area-lostpoint-wrap.home-careerfree { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .dpoint-area-inner-careerfree-docomo-denki { margin-left: 20px; } /****************************** お手続き・各種設定エリア ******************************/ .conf-area-list-txt-box { height: 170px; width: 320px; padding: 88px 54px 16px 24px; } .conf-area-list-box:first-child .conf-area-list-txt-box { padding: 88px 54px 16px 24px; } .conf-area-list-box:last-child .conf-area-list-txt-box { padding: 88px 54px 16px 24px; } .conf-area-list-txt-box::after { right: 18px; } .conf-area-list-txt-box::before { left: 132px; } .conf-area-list-box { max-width: 320px; width: 100%; padding: 0; } .conf-area-list-box:last-child .conf-area-list-box-link { border-right: none; } /****************************** ドコモショップエリア ******************************/ .docomo-shop-area-box { max-width: 624px; width: 100%; } .common-list-btn-normal-box.common-outside.docomo-shop-area-box { max-width: 960px; } /****************************** お知らせエリア ******************************/ .info-area-box { padding: 40px 64px 48px; } .info-area-more-txt { -ms-flex-preferred-size: 624px; flex-basis: 624px; } /****************************** My docomo アプリエリア ******************************/ .mydocomo-app-area-btn-list { margin: 10px 10px 10px 11px; } .mydocomo-app-area-btn-list:first-child { margin-right: 0; } .mydocomo-app-area-btn-list:last-child { margin: 0 0 0 8px; } /****************************** メインエリア出し分け ******************************/ .careerfree-yellow-area { padding: 0; width: 100%; max-width: 960px; margin: 0 auto; } .careerfree-yellow-area-column2-box .careerfree-yellow-area { max-width: 408px; } .home-saigai-area, .all-fukuso-area, .login-nonoptout-area, .home-cancel-3months-area { max-width: 960px; width: 100%; margin: 0 auto; padding: 24px 0 0 0; } .home-saigai-area-inner, .all-fukuso-area-inner, .login-nonoptout-area-inner, .home-cancel-3months-area-inner, .careerfree-yellow-area-inner { max-width: 668px; padding: 34px 18px; margin: 0; } .careerfree-yellow-area-inner { max-width: inherit; } .home-saigai-area-inner, .all-fukuso-area-inner, .login-nonoptout-area-inner, .home-cancel-3months-area-inner { max-width: 960px; } .home-data-area-box.home-error { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .usage-fee-area-morebtn-box.home-error { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .usage-fee-area-morebtn.home-error, .dpoint-area-btn.home-error, .dpoint-area-bk-arrow.home-error { width: 144px; margin: 12px 0; } .usage-fee-area-morebtn.home-error { margin: 18px 0; } .usage-fee-area-title.home-error { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-right: 1px solid #EEF1F4; width: 344px; margin: 0 16px 0 0; } .box-in-title.home-error { width: 100%; margin: 0; } .usage-fee-area-box.home-error { display: -webkit-box; display: -ms-flexbox; display: flex; } .dpoint-area-btn-box.home-error { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .dpoint-area-point-rank-box.home-error::before, .usage-fee-area-morebtn-box.home-error::before { margin: 0 auto; } .dpoint-area-point-rank-box.home-error { border-right: 1px solid #EEF1F4; width: 344px; margin: 0 16px 0 0; } .home-data-area-box.home-error, .usage-fee-area-wrap.home-error { padding: 24px 16px; } .dpoint-area-inner.home-error { padding: 24px 16px 20px; } .dpoint-area-lostpoint-box.home-error { margin: 0 0 12px; } /****************************** 輻輳エリア ******************************/ .all-fukuso-area-listbtn-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; max-width: 650px; margin: 24px auto 0; } .all-fukuso-area-listbtn { width: 50%; display: block; padding: 0!important; } .all-fukuso-area-listbtn-inner { width: 100%; padding: 16px 34px 16px 16px; height: 48px; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-first { border-radius: 16px 0 0 0; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-2nd { border-radius: 0 16px 0 0; border-top: none; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-2nd::after, .all-fukuso-area-listbtn.all-fukuso-area-listbtn-2nd.mydcm-ua-pcTabAll::after { margin-top: -8px; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-2nd .all-fukuso-area-listbtn-inner, .all-fukuso-area-listbtn.all-fukuso-area-listbtn-2nd.mydcm-ua-pcTabAll .all-fukuso-area-listbtn-inner { margin-top: 8px; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-last-2nd::after { margin-top: -16px!important; } .all-fukuso-area-listbtn-last-kara { border-radius: 0 0 16px 0; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-last.mydcm-ua-pcTabAll { border-radius: 0 0 16px 0; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-last-2nd { border-radius: 0 0 0 16px; } .all-fukuso-area-listbtn-last-kara:hover { background-color: #fff; } .all-fukuso-area-listbtn-last-kara::after { display: none; } .all-fukuso-area-listbtn-last-kara .all-fukuso-area-listbtn-inner { margin-bottom: 8px; } .all-fukuso-area-listbtn.all-fukuso-area-listbtn-br .all-fukuso-area-listbtn-inner { border-right: 1px solid #DFE4E9; } .home-opan-all-area-inner, .home-sign-up-area-inner, .home-hojin-area-inner, .home-reregistration-area-inner { max-width: 960px; padding: 32px 155px; margin: 24px auto; } .home-reregistration-area-inner { margin-top: 0; } .home-info-display-btn { margin: 0 0 0 auto; } .usage-fee-area-txt-box.home-houjin-parent-on, .usage-fee-area-txt-box.home-houjin-parent-off, .usage-fee-area-txt-box.home-houjin-children-off { margin: 38px 0 24px 0; } .home-houjin-parent-on-area-inner { max-width: 960px; margin: 24px auto; } .dpoint-area-inner.home-houjin-parent-on, .dpoint-area-inner.home-houjin-parent-off, .dpoint-area-inner.home-houjin-children-off { padding: 24px 16px 54px; } .dpoint-area-inner.home-houjin-parent-off, .dpoint-area-inner.home-houjin-children-off { padding: 24px 16px 40px; } .home-houjin-parent-on-area.home-houjin-parent-off, .home-houjin-parent-on-area.home-houjin-children-off { padding: 24px 0 0 0; } .home-opan-all-area-btn-login { margin: 24px auto; } .home-opan-all-area-btn-login.home-nologin { margin: 16px auto 24px; } } /****************************** iPhone SE ******************************/ @media screen and (max-width:320px) { .usage-fee-area-month-fee, .dpoint-area-now-point { padding: 7px 10px; font-size: 18px; } .careerfree-yellow-area-white-btn, .careerfree-yellow-area-yellow-btn { font-size: 13px; } .careerfree-yellow-area-white-btn { padding: 12px 38px 12px 10px; } .stage-area.home-login-nonoptout { top: 16px; } .home-opan-all-area-btn-another-login { max-width: 208px; line-height: 20px; padding: 9px 14px 9px 42px; border-radius: 32px; } .home-opan-all-area-txt.home-login-optout { padding: 0; } .home-opan-all-area-btn-menu { font-size: 14px; } }