@charset "utf-8"; .recommend-area-btn-box, .usage-fee-area-bnr-recommend { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .usage-fee-area-bnr-recommend-morebtn::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .usage-fee-area-bnr-btn:hover, .usage-fee-area-bnr-recommend-btn:hover { background-color: #ffe26e; } .usage-fee-area-bnr-recommend-morebtn { position: relative; padding: 12px 40px 12px 16px; width: 130px; font-weight: bold; } .usage-fee-area-bnr { padding: 16px; background-color: #CCEFFC; border-radius: 8px; } .usage-fee-area-bnr-recommend-morebtn { border: 1px solid #fff; box-shadow: 0 0 4px 0 rgba(0,0,0,0.08); margin: 0 16px 0 0; min-width: 130px; height: 42px; } .usage-fee-area-bnr-btn, .usage-fee-area-bnr-recommend-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; } .usage-fee-area-bnr-recommend-btn { max-width: 130px; margin: 0; height: 42px; } .usage-fee-area-bnr-txt, .usage-fee-area-bnr-recommend-txt { font-size: 14px; font-weight: bold; position: relative; padding: 2px 0 12px 80px; max-width: 244px; margin: 0 auto; width: 100%; letter-spacing: -1px; min-height: 76px; } .usage-fee-area-bnr-txt::before, .usage-fee-area-bnr-recommend-txt::before { width: 64px; height: 64px; background-image: url(../images_20m4/common/icons/icn_graph_oncolor.png); top: 0; left: 0; } .usage-fee-area-bnr-recommend-txt { max-width: initial; text-align: center; padding: 0 0 12px 0; } /****************************** ahamoユーザーお知らせ ******************************/ .home-recommend-ahamo-area { padding: 32px 0; } .home-recommend-ahamo-area-inner { margin: 0 8px; padding: 16px; } .home-recommend-ahamo-txt { font-size: 14px; line-height: 20px; position: relative; padding-left: 36px; } .home-recommend-ahamo-txt::before { content: ''; display: inline-block; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-image: url(../images_20m4/common/icons/icn_information@2x.png); position: absolute; top: 0; left: 0; } .home-recommend-ahamo-txtlink { color: #007AFF!important; } .home-recommend-ahamo-txtlink:hover { text-decoration: underline; } /****************************** おすすめバナーエリア(中部) ******************************/ .contract-recommend-area { margin: 40px auto; max-width: 304px; } .contract-recommend-area-btn-box { text-align: center; } .contract-recommend-area-btn-img { box-shadow: 0 0 4px 0 rgba(0,0,0,0.12); border-radius: 16px; max-width: 304px; } .contract-recommend-area-btn { margin: 0 0 16px 0; display: inline-block; } .contract-recommend-info-box { text-align: right; } .contract-recommend-area-info-img { width: 24px; height: 24px; box-shadow: 0 0 4px 0 rgba(0,0,0,0.12); border-radius: 24px; } /****************************** おすすめバナーエリア(下部) ******************************/ .recommend-area { max-width: 304px; margin: 0 auto 40px; } .recommend-area-inner { text-align: center; } .recommend-area-btn-box { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .recommend-area-btn-img { box-shadow: 0 0 4px 0 rgba(0,0,0,0.12); border-radius: 16px; width: 304px; } .recommend-area-btn { margin: 0 0 16px 0; display: inline-block; } .recommend-info-box { text-align: right; } .recommend-area-info-img { width: 24px; height: 24px; box-shadow: 0 0 4px 0 rgba(0,0,0,0.12); border-radius: 24px; } .home-recommend-optout-area-inner { margin: 40px 8px; padding: 16px; } .home-recommend-optout-txt { font-size: 14px; line-height: 20px; position: relative; padding-left: 36px; } .home-recommend-optout-txt::before { content: ''; display: inline-block; width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-image: url(../images_20m4/common/icons/icn_information@2x.png); position: absolute; top: 0; left: 0; } .home-recommend-optout-txtlink { color: #007AFF!important; } .home-recommend-optout-txtlink:hover { text-decoration: underline; } /****************************** お祭り広告エリア ******************************/ .banner-area { background: #fff; width: 100%; z-index: 1093; position: relative; } .banner-area-inner { width: 100%; height: 100%; margin: 0 auto; text-align: center; position: relative; } .banner-area-img { width: auto; max-height: 48px; } .banner-area-inner a.mydcm-ua-pcTabAll { display: table-cell; height: 48px; vertical-align: middle; } .banner-area-inner a.mydcm-ua-pcTabAll .banner-area-img { width: 100%; } @media screen and (min-width: 768px) { .banner-area-inner { max-width: 768px; } } @media screen and (min-width: 980px) { .banner-area-inner { max-width: 960px; } } .banner-area-close { background: #8D959F; width: 24px; height: 24px; border-radius: 16px; position: absolute; top: 2px; right: 2px; box-shadow: 0 0 4px 0 rgba(0,0,0,0.08); cursor: pointer; } .banner-area-close-img { width: 16px; height: 16px; margin: 4px; } @media screen and (min-width: 768px) { .banner-area-close { background: #8D959F; width: 32px; height: 32px; border-radius: 16px; position: absolute; top: 50%; right: 4px; margin-top: -16px; } .banner-area-close-img { width: 20px; height: 20px; margin: 6px; } } /****************************** 全画面広告エリア ******************************/ .ad-area{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .ad-area-bg{ background: #000000; z-index: 1200; position: fixed; width: 100%; height: 200%; top: 0; left: 0; opacity: 0.75; } .ad-area-ttl { font-size: 14px; color: #FFFFFF; letter-spacing: 0; line-height: 14px; text-align: center; margin-bottom: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .ad-area-ttl::before { content: ''; width: 24px; height: 24px; background-image: url(../images_20m4/common/icons/icn_information_ondark@2x.png); background-size: contain; display: inline-block; vertical-align: middle; background-repeat: no-repeat; margin-right: 6px; } .ad-area-img { max-width: 343px; width: 100%; border-radius: 16px; } .ad-area-btn-box { max-width: 272px; width: 100%; margin: 16px auto 0; } .ad-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; width: 100%; line-height: 1; display: inline-block; margin: 0 0 16px; } .ad-area-btn-yellow:hover { background-color: #FFE26E; } .ad-area-btn-box-white { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .ad-area-btn-whiteL { background: #FFFFFF; border: 1px solid #DFE4E9; border-radius: 24px; width: 47%; height: 48px; text-align: center; line-height: 1; font-weight: bold; padding: 9px 0; color: #31353A; } .ad-area-btn-whiteR { background: #FFFFFF; border: 1px solid #DFE4E9; border-radius: 24px; width: 47%; height: 48px; text-align: center; line-height: 1; font-weight: bold; padding: 16px 0; color: #31353A; } .ad-area-btn-whiteL:hover, .ad-area-btn-whiteR:hover { background-color: #DFE4E9; } .ad-area-btn-smalltxt { font-size: 11px; color: #31353A; font-weight: normal; line-height: 1; } .ad-area-contents { width: 100%; height: 100%; z-index: 1250; display: -webkit-box; display: -ms-flexbox; display: flex; top: 0; left: 0; position: relative; } .ad-area-contents-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: 100%; padding: 12px 16px; } .ad-area-contents-inner { overflow: auto; height: 100%; border-radius: 16px; text-align: center; } /****************************** おすすめの人気サービス ******************************/ .popular-services-area-list-box { border-bottom: 1px solid #DFE4E9; } .popular-services-area-list { padding: 0 16px; } .popular-services-area-list-box:last-child { border-bottom: none; } .popular-services-area-btn-box { 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; font-size: 16px; font-weight: bold; position: relative; margin: 16px 0 12px 0; } .popular-services-area-btn-txt { padding: 12px 12px 12px 60px; } .popular-services-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; } .popular-services-area-btn-txt-more { margin: 16px 0; line-height: 20px; } .popular-services-area-box { padding: 8px 0; margin: 0 8px 16px 8px; } .popular-services-area-btn-txt::before { background-image: url(../images_20m4/common/icons/icn_related_services_dtv@2x.png); } .popular-services-area-btn-dshopping::before { background-image: url(../images_20m4/common/icons/icn_related_services_dshopping@2x.png); } .popular-services-area-btn-tab::after { right: 10px; background-image: url(../images_20m4/common/icons/icn_blank.png); } .popular-services-area-btn-tab { min-width: 88px; margin: 0; } .popular-services-area-bk-arrow::after { right: 10px; background-image: url(../images_20m4/common/btn/btn_arrow_right@2x.png); } .popular-services-area-bk-arrow { min-width: 88px; margin: 0; } /****************************** テキストレコメンド ******************************/ .text-recommend-area{ padding-top: 8px; padding-bottom: 8px; } .text-recommend-area-inner{ padding: 0; margin-bottom: 0; overflow: hidden; } .text-recommend-area-list{ border-bottom: 1px solid #DFE4E9; } .text-recommend-area-list:hover{ background-color: #f6f7f8; } .text-recommend-area-list:first-child:hover{ background-color: #ffffff; } .text-recommend-area-list:last-child{ border-bottom: none; } .text-recommend-area-list-inner-title, .text-recommend-area-list-inner-link, .text-recommend-area-list-inner { font-size: 14px; color: #31353A; position: relative; padding: 16px 44px 16px 16px; } .text-recommend-area-list-inner-title { font-weight: bold; } .text-recommend-area-list-inner-link { margin: 0 0 0 auto; color: #007AFF; } .text-recommend-area-list-inner-title::before, .text-recommend-area-list-inner-link::before, .text-recommend-area-list-inner::before { display: inline-block; background-size: contain; background-repeat: no-repeat; position: absolute; vertical-align: middle; } .text-recommend-area-box { display: flex; justify-content: space-between; align-items: center; } .text-recommend-area-close-box { margin-right: 10px; } .text-recommend-area-close-box:hover { cursor: pointer; } .text-recommend-area-close { width: 24px; height: 24px; } /****************************** TAB ******************************/ @media screen and (min-width: 768px) { /****************************** ahamoユーザーお知らせ ******************************/ .home-recommend-ahamo-area { padding: 56px 0 48px; } .home-recommend-ahamo-area-inner { margin: 0 auto; max-width: 536px; width: 100%; padding: 32px 16px; } /****************************** ご利用料金エリア ******************************/ .usage-fee-area-recommend-morebtn-box { margin: -21px 0 0 14px; width: 144px; } .usage-fee-area-bnr { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; margin: 0; width: 100%; padding: 20px; } .usage-fee-area-bnr-btn { max-width: 214px; } .usage-fee-area-bnr-txt, .usage-fee-area-bnr-recommend-txt { padding: 12px 0 12px 80px; max-width: 360px; margin: 0 auto 12px auto; min-height: 64px; } .usage-fee-area-bnr-recommend-txt { padding: 0; margin: 0 auto 16px; } /****************************** おすすめバナーエリア ******************************/ .recommend-area { max-width: 630px; margin: 0 auto 64px auto; } .recommend-area-btn { margin: 0 16px 16px 0; } .recommend-area-btn:last-child { margin: 0 0 16px 0; } .home-recommend-optout-area-inner { margin: 64px auto; max-width: 536px; width: 100%; padding: 32px 16px; } /****************************** バナーエリア(Amazonプライム) ******************************/ .plan-area-bnr-box { max-width: 623px; margin: 32px auto 0; } /****************************** 全画面広告エリア ******************************/ .ad-area-contents-inner-wrap { height: 88%; } /****************************** おすすめの人気サービス ******************************/ .popular-services-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; } .popular-services-area-list-box { width: 373px; border-bottom: none; border-right: 1px solid #DFE4E9; } .popular-services-area-list-box:nth-child(even) { border-right: none; } .popular-services-area-box { max-width: 746px; width: 100%; margin: 24px auto; } } /****************************** PC ******************************/ @media screen and (min-width: 980px) { /****************************** ahamoユーザーお知らせ ******************************/ .home-recommend-ahamo-area { padding: 56px 0 40px; } .home-recommend-ahamo-area-inner { max-width: 624px; } /****************************** おすすめバナーエリア ******************************/ .home-recommend-optout-area-inner { max-width: 624px; } /****************************** おすすめの人気サービス ******************************/ .popular-services-area-box { max-width: 960px; } .popular-services-area-list-box { width: 480px; } /************************ テキストレコメンドエリア *************************/ .text-recommend-area { padding-top: 24px; } .text-recommend-area-inner { max-width: 960px; } } /****************************** iPhone SE ******************************/ @media screen and (max-width:320px) { /************************ 全画面広告エリア *************************/ .ad-area-ttl { margin-bottom: 8px; } .ad-area-btn-yellow { padding: 10px; } .ad-area-btn-whiteL { height: 44px; padding: 7px 0; } .ad-area-btn-whiteR { height: 44px; padding: 14px 0; } .ad-area-contents-inner-wrap { padding: 8px 16px; } } .recommend-area { max-width: 304px; margin: 0 auto 40px; } #mydcm_reco-home-payment-sim { width:100%; -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; margin: 0; width: 100%; margin: 0 0 16px 0; } /*= TAB =*/ @media screen and (min-width:768px) { /* 下部レコメンド */ .recommend-area { max-width: 630px; margin: 0 auto 64px auto; } #mydcm_reco-home-payment-sim { margin: 0 0 0 0; } #mydcm_reco-home-payment-sim .usage-fee-area-bnr-txt { padding: 12px 0 12px 80px; max-width: 360px; margin: 0 auto 12px auto; } #mydcm_reco-contract-payment-sim .usage-fee-area-bnr { max-width: 623px; width: 100%; margin: 32px auto; } } /*= PC =*/ @media screen and (min-width:980px) { } /*= iPhone SE =*/ @media screen and (max-width:320px) { }