/*-------------------------------- base ---------------------------------*/ /*リンク　アイコン*/ a.link_txtp{ color: #e7198c; text-decoration: underline; background:url(/campaign/share_no1/img/link_txtp.png) left center no-repeat; background-size: 11px; padding: 0 0 0 14px; cursor: pointer; } a.link_txtp:hover{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } /*リンク ブランク　アイコン*/ a.link_bl{ color: #e7198c; text-decoration: underline; background:url(/campaign/share_no1/img/link_bl.png) left center no-repeat; background-size: 11px; padding: 0 0 0 12px; cursor: pointer; } a.link_bl:hover{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } #no1_co_wrapper a{ color: #e7198c; text-decoration: underline; cursor: pointer; transition: 0.3s; } #no1_co_wrapper a img{ transition: 0.3s; } .no1_dtxt{margin-top:1rem; line-height: 1.5; color: #666; font-size: 12px; } a.no1_dlink, #no1_co_wrapper a.no1_dlink{ color: #444; text-decoration: none; } a.no1_dlink::after, #no1_co_wrapper a.no1_dlink::after{ content: ""; display: inline-block; width: 12px; height: 11px; background: url(/campaign/share_no1/img/com_icon.png) no-repeat; } /*-------------------------------- wrapper ---------------------------------*/ /*-------------------------------- メインイメージ ---------------------------------*/ #no1_main_BOX, #no1_main_BOX_af{width:100%; margin:0px auto 0 auto; min-height:621px; background:url(/campaign/share_no1/img/no1_main_100.jpg) center top no-repeat; overflow: hidden; position: relative; } #no1_main_BOX .no1_main_btn, #no1_main_BOX_af .no1_main_btn{ position: absolute; bottom: 36px; left: 50%; margin-left: -152px; max-width: 305px; } #no1_main_BOX .no1_main_btn img, #no1_main_BOX_af .no1_main_btn img{ width: 100%; } #no1_main_BOX .sp, #no1_main_BOX_af .sp{ display: none; } @media screen and (max-width: 1130px) { #no1_main_BOX, #no1_main_BOX_af{width:100%; margin:0px auto 0 auto; min-height:621px; background:url(/campaign/share_no1/img/no1_main_M.jpg) center top no-repeat; overflow: hidden; position: relative; } }/*end*/ @media screen and (max-width: 640px) { #no1_main_BOX, #no1_main_BOX_af{width:100%; margin:0px auto 0 auto; height:auto; background:none; overflow: hidden; position: relative; } #no1_main_BOX .no1_main_btn, #no1_main_BOX_af .no1_main_btn{ position: absolute; bottom: 9.8%; left: 50%; margin-left: -40%; width: 80%; max-width: inherit; } #no1_main_BOX .main_M, #no1_main_BOX_af .main_M{ display: none; } #no1_main_BOX .sp, #no1_main_BOX_af .sp{ display: block; } }/*end*/ /* AF追加 */ @media screen and (min-width: 641px) {#no1_main_BOX_af {min-height: 1008px;background: url(/campaign/share_no1/img/no1_main-af.jpg) center top no-repeat;}} #no1_main_BOX_af .no1_main_btn{bottom: auto;top: 350px; opacity: 0;} #no1_main_BOX_af {background: url(/campaign/share_no1/img/no1_main-af.jpg) center top no-repeat;} #no1_main_BOX_af .no1_main_footer{ background: #eddfbf url(/campaign/share_no1/img/af-top-bg.png);background-size:cover; width: 100%; text-align: center; margin-top: 462px; } #no1_main_BOX_af .no1_btn_box{ background: none; } .no1_main_footer_sp{ background: #eddfbf url(/campaign/share_no1/img/af-top-bg.png); background-size: cover; padding: 50px 14px 20px; } @media screen and (max-width: 640px) { .no1_main_af_sp{position: relative;} .no1_main_af_sp.bg-blue{background:#B5E0F0;} .no1_main_af_sp.bg-white{background: #FFF;} .no1_main_af_sp>.-link{display: block;position: absolute;bottom: 15px;left: 0;width: 80%; margin: 0 10%;} .no1_main_af_sp>.-widelink{display: block;width: 94%; margin: 0 3%;padding: 10px 0;} } /*-------------------------------- banner300 ---------------------------------*/ #no1_banner300{width:100%; margin:0px auto 0 auto; height:396px; background:url(/campaign/share_no1/img/no1_banner300.jpg) center top no-repeat; overflow: hidden; position: relative; } #no1_banner300 .banner300_btn{ position: absolute; bottom: 64px; left: 50%; margin-left: -152px; max-width: 305px; } #no1_banner300 .banner300_btn img{ width: 100%; } @media screen and (max-width: 640px) { #no1_banner300{width:100%; margin:0px auto 0 auto; height:auto; background:none; overflow: hidden; position: relative; } #no1_banner300 .banner300_btn{ position: absolute; bottom: 10.5%; left: 50%; margin-left: -35%; width: 70%; max-width: inherit; } }/*end*/ /*-------------------------------- no1_btn_box ---------------------------------*/ .no1_btn_box{ background: #f8f5f0; padding: 35px 0; } .no1_btn_box a{ width: 90%; max-width:715px; margin: 0 auto; display: block; } @media screen and (max-width: 640px) { .no1_btn_box{ background: #f8f5f0; padding: 5% 0; } }/*end*/ /*-------------------------------- no1_lineup ---------------------------------*/ #no1_lineup{ background: #FDFCF8; padding: 15px 0 10px; } #no1_lineup h2{ width: 95%; margin: 0 auto; font-size: 24px; line-height: 1.6; letter-spacing: 1.5px; text-align: center; font-weight: bold; } #no1_lineup p.txt{ width: 95%; margin: 20px auto 0; font-size: 18px; line-height: 1.6; text-align: center; } #no1_lineup p.annotation{text-align: right; max-width: 920px; margin: 1em auto 0; font-size: 0.8em;} @media screen and (max-width: 640px) {#no1_lineup .lineup_an{width: 100%; max-width: none; clear: both; float: none; margin: auto;}} #no1_lineup .lineup_annotation{height: 458px; border: 6px solid #FFD527; padding: 28px 15px; box-sizing: border-box;} #no1_lineup .lineup_annotation-head{display:flex;color:#F00;margin-bottom: 28px;} #no1_lineup h2 span{ display: inline-block; font-weight: bold; } #no1_lineup .restock { color: #fff; background: #F175BA; padding: 1px 5px 0 10px; font-size: 22px; font-weight: normal;} #no1_lineup p.txt span{ display: inline-block; } #no1_lineup .package_attention{width: 850px;margin: 30px auto; padding: 0 60px; box-sizing:border-box;border: solid 1px #555; border-radius:10px; background: #fff;} #no1_lineup .package_attention p.attentionText{margin:0;font-size: 16px; line-height: 27px; padding: 10px 0 10px 40px; background: url(/campaign/share_no1/img/icon_attention.png) center left no-repeat;} @media screen and (max-width: 640px) { #no1_lineup .package_attention{width: 95%;margin: 20px auto; padding: 0 10px; box-sizing:border-box;border: solid 1px #555; border-radius:10px; background: #fff;} #no1_lineup .package_attention p.attentionText{margin:0;font-size: 14px; line-height: 20px; padding: 10px 0 10px 40px; background: url(/campaign/share_no1/img/icon_attention.png) center left no-repeat;} }/*end*/ #no1_lineup ul{ width: 100%; max-width: 920px; margin: 6px auto 0; background: #;position: relative; } #no1_lineup ul::after { content:" "; display:block; clear:both; }/*clearfix*/ /*#no1_lineup ul li{ float: left; width: 22.8%; max-width: 284px; margin: 0 1.1% 40px; background: #fff; }*/ #no1_lineup ul li{ float: left; width: 284px; max-width: 284px; margin: 0 10px 17px; background: #fff; -webkit-box-shadow: 0 4px 6px -6px #000; box-shadow: 0 4px 6px -6px #000; } #no1_lineup ul li .lineup_img img{ width: 100%; max-width: 284px; } @media screen and (min-width: 641px) { #no1_lineup.af-content .lineup_annotation{height: 406px;padding: 14px 15px;} } /*lineup_btn*/ #no1_lineup ul li .lineup_btn{ width: 95%; margin: 5px auto; } #no1_lineup ul li .lineup_btn a{ transition: 0.3s; } /*詳しくはこちら*/ #no1_lineup ul li .lineup_more_btn{ text-align: center; padding: 11px 0 20px; } #no1_lineup ul li .lineup_more_btn a{ font-size: 14px; padding-left: 19px; color: #3f63ab; background:url(/campaign/share_no1/img/arrow_blu.png) center left no-repeat; background-size: 14px; transition: 0.2s; } #no1_lineup ul li .lineup_more_btn a:hover{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } @media screen and (max-width: 640px) { #no1_lineup ul{ width: 97.5%; max-width: 460px; margin: 30px auto 0; background: #;position: relative; } #no1_lineup ul::after { content:" "; display:block; clear:both; }/*clearfix*/ #no1_lineup ul li{ float: left; width: 45.6%; max-width: 284px; margin: 0 2.2% 20px; background: #fff; -webkit-box-shadow: 0 4px 6px -6px #000; box-shadow: 0 4px 6px -6px #000; } }/*end*/ #no1_lineup .package_attention p.attentionTitle{margin:0;font-size: 16px; font-weight:bold;line-height: 27px; padding-top: 20px;text-align: center;} #no1_lineup .package_attention p.attentionText2{margin:0;font-size: 15px; line-height: 27px; padding: 10px 0 20px;} @media screen and (max-width: 640px) { #no1_lineup .package_attention p.attentionTitle{margin:0;font-size: 15px; font-weight:bold;line-height: 20px; padding: 20px 10px 0;text-align: center;} #no1_lineup .package_attention p.attentionText2{margin:0;font-size: 14px; line-height: 20px; padding: 10px 10px 20px;} } @media screen and (min-width: 640px) { #no1_lineup ul li .close_btn { background: #CCCCCC; color: #fff; border-radius: 3px; text-align: center; height: 40px; box-sizing: border-box; margin-top: 1px; padding-top: 9px; font-size: 15px; cursor: not-allowed; } } @media screen and (max-width: 640px) { #no1_lineup ul li .close_btn { background: #CCCCCC; color: #fff; border-radius: 3px; text-align: center; box-sizing: border-box; margin-top: 1px; padding: 4.8%; font-size: 3.2vw; } } @media screen and (min-width:426px) and ( max-width:640px) { #no1_lineup ul li .close_btn { font-size: 13px; } } /*-------------------------------- キャンペーン価格でお申し込みするには？ ---------------------------------*/ #no1_Howto_apply{ width: 100%; background: #f8f5f0; padding: 1px 0 40px 0; } @media screen and (max-width: 640px) { #no1_Howto_apply{ width: 100%; background: #f8f5f0; padding: 1px 0 7% 0; } }/*end*/ #no1_Howto_apply .inner{ width: 95%; max-width: 896px; margin: 0px auto 0; padding-bottom: 12px; background: #f1e2b9; background: #f1e2b9; -webkit-box-shadow: 0 4px 6px -6px #000; box-shadow: 0 4px 6px -6px #000; } #no1_Howto_apply .inner h2{ font-size: 18px; line-height: 25px; text-align: center; padding: 13px 0 10px; color: #000; } #no1_Howto_apply .inner .no1_Howto_apply_attention{ width: 95%; margin: 0 auto; border: solid 1px #da0000; background: #fff; text-align: center; } #no1_Howto_apply .inner .no1_Howto_apply_attention p{ font-size: 16px; line-height: 27px; padding: 10px 0 10px 40px; color: #da0000; background: url(/campaign/share_no1/img/icon_attention.png) center left no-repeat; display: inline-block; } #no1_Howto_apply .inner .no1_Howto_apply_attention p br{ display: none; } @media screen and (max-width: 640px) { #no1_Howto_apply .inner .no1_Howto_apply_attention p br{ display: inherit; } #no1_Howto_apply .inner .no1_Howto_apply_attention p{ font-size: 14px; line-height: 20px; text-align: left; padding: 10px 0 10px 40px; color: #da0000; background: url(/campaign/share_no1/img/icon_attention.png) center left no-repeat; display: inline-block; } }/*end*/ @media screen and (max-width: 390px) { #no1_Howto_apply .inner h2{ font-size: 4.4vw; line-height: 25px; text-align: center; padding: 11px 0 8px; } #no1_Howto_apply .inner .no1_Howto_apply_attention p{ font-size: 3.7vw; line-height: 1.6; text-align: left; padding: 10px 0 10px 40px; color: #da0000; background: url(/campaign/share_no1/img/icon_attention.png) center left no-repeat; display: inline-block; } }/*end*/ #no1_Howto_apply .inner .more{ text-align: center; } #no1_Howto_apply .inner .more .more_btn{ padding: 0px; margin-top:10px; font-size: 14px; line-height: 18px; color: #da0000; display: inline-block; text-align: center; } #no1_Howto_apply .inner .more .more_btn.more_open span, #no1_Howto_apply .inner .more .more_btn.more_close span{ padding-left: 20px; cursor: pointer; } #no1_Howto_apply .inner .more .more_btn.more_open span{ background: url(/campaign/share_no1/img/more_open.jpg) center left no-repeat; background-size: 15px; } #no1_Howto_apply .inner .more .more_btn.more_close span{ background: url(/campaign/share_no1/img/more_close.jpg) center left no-repeat; background-size: 15px; } #no1_Howto_apply .inner .more .more_btn:hover{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } #no1_Howto_apply .inner .more .more_box{ width: 95%; height: inherit; margin: 0 auto; padding: 0px 0; margin-top: 10px; } #no1_Howto_apply .inner .more .more_box .inner{ width: 100%; margin: 0 auto; background: #fff; padding: 10px 0; margin:10px 0 0px; text-align: left; } #no1_Howto_apply .inner .more .more_box .inner::after { content:" "; display:block; clear:both; }/*clearfix*/ .no1_pnk{ color: #ec44a3; } #Howto_step{ width: 95%; margin: 0 auto; background: #; } #Howto_step ul{ padding: 0; margin: 0; } #Howto_step ul li{ border-bottom: solid 1px #ccc; padding: 10px 0 10px; position: relative; } #Howto_step ul::after { content:" "; display:block; clear:both; }/*clearfix*/ #Howto_step ul li::after { content:" "; display:block; clear:both; }/*clearfix*/ #Howto_step ul li::before { background:url(/campaign/share_no1/img/more_step_arrow.png) left top no-repeat ; background-size: 20px; right: 50%; bottom: -10.5px; width: 20px; height: 20px; margin-left: -10px; position: absolute; content:" "; display:block; z-index: 5; } #Howto_step li:last-child{ border-bottom: none; } #Howto_step li:last-child::before{ display: none; } #Howto_step::after { content:" "; display:block; clear:both; }/*clearfix*/ #Howto_step .inner_L{ float: left; width: 10%; background: #; } #Howto_step .inner_R{ float: right; width: 87%; background: #; } #Howto_step .inner_R::after { content:" "; display:block; clear:both; }/*clearfix*/ #Howto_step .inner_R .inner_R_L{ float: left; width: 485px; font-size: 16px; line-height: 1.6; } #Howto_step .inner_R .inner_R_R{ float: right; width: 190px; } #Howto_step li:nth-child(1) .inner_L img{ padding-top: 0px; } #Howto_step li:nth-child(2) .inner_L img{ padding-top: 10px; } #Howto_step li:nth-child(3) .inner_L img{ padding-top: 15px; } /*txt位置*/ #Howto_step li:nth-child(1) .inner_R .inner_R_L{padding-top: 10px; } #Howto_step li:nth-child(2) .inner_R .inner_R_L{padding-top: 40px; } #Howto_step li:nth-child(3) .inner_R .inner_R_L{padding-top: 20px; } #Howto_step li .inner_R .inner_R_R .more_step03_btn{ margin-top: 10px; } #Howto_step .inner_R .inner_R_L a{ margin-top: 7px; font-size: 14px; line-height: 1.6; text-align: left; padding-left: 19px; color: #4865a9; background:url(/campaign/share_no1/img/arrow_blu.png) left 5px no-repeat; background-size: 14px; transition: 0.2s; } #Howto_step .inner_R .inner_R_L a span{ display: inline-block; text-decoration: underline; } #Howto_step .inner_R .inner_R_L a:hover{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } @media screen and (max-width: 640px) { #Howto_step .inner_L{ float: left; width: 25%; background: #; text-align: center; } #Howto_step .inner_L img{ max-width: 80%; } #Howto_step .inner_R{ float: right; width: 75%; background: #; } #Howto_step .inner_R .inner_R_L{ float: none; width: 95%; font-size: 15px; line-height: 1.6; } #Howto_step .inner_R .inner_R_R{ float: none; width: 100%; padding: 15px 0; } /*txt位置*/ #Howto_step li:nth-child(1) .inner_R .inner_R_L{padding-top: 10px; } #Howto_step li:nth-child(2) .inner_R .inner_R_L{padding-top: 20px; } #Howto_step li:nth-child(3) .inner_R .inner_R_L{padding-top: 20px; } }/*end*/ @media screen and (max-width: 500px) { #Howto_step .inner_L{ float: left; width: 25%; background: #; text-align: left; } }/*end*/ /*-------------------------------- etc_dev_banner ---------------------------------*/ .etc_dev_banner{ margin: 35px auto 0; width: 95%; text-align: center; } .etc_dev_banner a{ margin: 0px auto 0 auto; display: inline-block; } /*-------------------------------- banner300_2 ---------------------------------*/ #no1_banner300_2{ width: 100%; background: #f8f5f0; padding: 0 0 0px 0; } #no1_banner300_2 .no1_banner300_2_read{ text-align: center; padding-top: 1em; } #no1_banner300_2 .inner{width:100%; margin:0px auto 0 auto; height:469px; background:url(/campaign/share_no1/img/no1_banner300_2.jpg) center top no-repeat; overflow: hidden; position: relative; } @media screen and (max-width: 640px) { #no1_banner300_2 .no1_banner300_2_read{ width: 90%; margin: 0 auto; padding-bottom: 2%; text-align: center; } #no1_banner300_2 .inner{width:100%; margin:0px auto 0 auto; height:auto; background:none; overflow: hidden; position: relative; } }/*end*/ /*-------------------------------- 音声SIMなら3ヵ月間［月額1,300円割引］ ＋ 全てのSIMで1年間［データ量1GB増量］ ---------------------------------*/ #no1_plan{ background: #fdfcf8; width: 100%; padding-bottom: 50px; } #no1_plan .plan_read{ font-size: 24px; line-height: 1.5; letter-spacing: 2px; font-weight: bold; text-align: center; margin: 0 auto; padding: 45px 0 45px; width: 90%; display: block; background: #; } #no1_plan .plan_read span{ display: inline-block; font-weight: bold;} #no1_plan .inner{ max-width: 907px; margin: 0 auto; text-align: center; } #no1_plan .inner .more_btn{ cursor: pointer; width: 100%; max-width: 900px; background: #b68a41; padding: 0px; margin:10px auto 0; padding: 8px 0; font-size: 14px; line-height: 18px; color: #fff; display: block; text-align: center; background: #b68a41; -webkit-box-shadow: 0 4px 10px -6px #000; box-shadow: 0 4px 10px -6px #000; } #no1_plan .inner .more_btn.more_open span, #no1_plan .inner .more_btn.more_close span{ padding-left: 20px; } #no1_plan .inner .more_btn.more_open span{ background: url(/campaign/share_no1/img/more_open_w.png) center left no-repeat; background-size: 15px; } #no1_plan .inner .more_btn.more_close span{ background: url(/campaign/share_no1/img/more_close_w.png) center left no-repeat; background-size: 15px; } #no1_plan .inner .more_btn:hover{ filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } @media screen and (max-width: 640px) { #no1_plan{ background: #fdfcf8; width: 100%; padding-bottom: 8%; } #no1_plan .plan_read{ font-size: 22px; line-height: 1.5; letter-spacing: 2px; text-align: center; margin: 0 auto; padding: 20px 0 0px; width: 90%; display: block; background: #; } #no1_plan .inner{ max-width: 907px; width: 95%; margin: 0 auto; text-align: center; } #no1_plan .inner .more_btn{ width: 97%; max-width: 895px; background: #b68a41; padding: 0px; margin:10px auto 0; padding: 12px 0; font-size: 14px; line-height: 18px; color: #fff; display: block; text-align: center; background: #b68a41; -webkit-box-shadow: 0 4px 10px -6px #000; box-shadow: 0 4px 10px -6px #000; } }/*end*/ /*初期費用 ------------------------*/ #no1_plan .no1_initial{ text-align: center; margin: 0 auto; padding: 45px 0 0px; width: 92%; display: block; background: #; } #no1_plan .no1_initial_txts{ font-size: 11px; line-height: 1.6; text-align: center; width: 90%; margin: 10px auto 0; } @media screen and (max-width: 640px) { #no1_plan .no1_initial{ text-align: center; margin: 0 auto; padding: 6% 0 0px; width: 92%; display: block; background: #; } #no1_plan .no1_initial_txts{ font-size: 11px; line-height: 1.6; text-align: left; width: 90%; margin: 7px auto 0; } }/*end*/ /*-------------------------------- シミュレーター ---------------------------------*/ .no1_simulator{background: #fdfcf8; width: 100%; } .no1_simulator .inner{ background: #fdfcf8; width: 95%; max-width: 907px; margin: 0 auto; padding-bottom: 50px; } @media screen and (max-width: 640px) { .no1_simulator{background: #fdfcf8; width: 100%; } .no1_simulator .inner{ background: #fdfcf8; width: 95%; max-width: 907px; margin: 0 auto; padding-bottom: 20px; } }/*end*/ /*head*/ .no1_simulator .inner .head{ background: #3f63ab; color: #fff; text-align: center; padding: 20px 0; position: relative;} .no1_simulator .inner .head h2{ margin:0 auto; width: 90%; font-size: 30px; line-height: 1.6; font-weight: bold;} .no1_simulator .inner .head p.read{ margin: 5px auto 0; width: 90%; font-size: 18px; line-height: 1.6; } @media screen and (max-width: 640px) { .no1_simulator .inner .head{ padding: 20px 0;} .no1_simulator .inner .head h2{ font-size: 20px; line-height: 1.6; font-weight: bold;} .no1_simulator .inner .head p.read{ font-size: 14px; line-height: 1.6; } .no1_simulator .inner .head span{ display: block; } }/*end*/ /*天使*/ .no1_simulator .inner .head .angel{ position: absolute; left: -55px; top:20px; width:208px; height: 202px; background: url(/campaign/share_no1/img/simulator/angel.png) left top no-repeat; background-size: contain; z-index: 2; } @media screen and (max-width: 1050px) { .no1_simulator .inner .head .angel{ position: absolute; left: -55px; top:20px; width:208px; height: 202px; background: url(/campaign/share_no1/img/simulator/angel_M.png) left top no-repeat; background-size: contain; z-index: 2;} }/*end*/ @media screen and (max-width: 640px) { .no1_simulator .inner .head .angel{ position: absolute; left: -3%; top:0px; width:28%; height: 102px; background: url(/campaign/share_no1/img/simulator/angel_M.png) left top no-repeat; background-size: contain; z-index: 2; } }/*end*/ @media screen and (max-width: 500px) { .no1_simulator .inner .head .angel{ position: absolute; left: -3%; top:40px; width:28%; height: 102px; background: url(/campaign/share_no1/img/simulator/angel_M.png) left top no-repeat; background-size: contain; z-index: 2; } }/*end*/ @media screen and (max-width: 400px) { .no1_simulator .inner .head .angel{ position: absolute; left: -5%; top:45px; width:28%; height: 102px; background: url(/campaign/share_no1/img/simulator/angel_M.png) left top no-repeat; background-size: contain; z-index: 2; } }/*end*/ @media screen and (max-width: 350px) { .no1_simulator .inner .head .angel{ position: absolute; left: -8%; top:45px; width:28%; height: 102px; background: url(/campaign/share_no1/img/simulator/angel_M.png) left top no-repeat; background-size: contain; z-index: 2; } }/*end*/ /*select_box --------------------*/ .no1_simulator .inner .select_box{ position: relative; border: solid 3px #3f63ab; border-top: none; box-sizing: border-box; padding: 20px 0;} /*table*/ .no1_simulator .inner .select_box table{ width: 95%; margin: 0 auto;} .no1_simulator .inner .select_box table th{ width: 220px; font-size: 16px; line-height: 1.6; font-weight: bold; text-align: right; padding-right: 15px; vertical-align: middle;} .no1_simulator .inner .select_box table td{ display: flex; padding: 5px 0; /*justify-content: center; align-items: center; */} @media screen and (max-width: 640px) { .no1_simulator .inner .select_box table th{ display: block; width: 100%; font-size: 15px; line-height: 1.6; font-weight: bold; text-align: left; padding-right: 0px;} .no1_simulator .inner .select_box table td{ padding: 5px 0 20px; } }/*end*/ @media screen and (max-width: 500px) { }/*end*/ /*btn*/ .no1_simulator .inner .select_box table td .btn{display: flex; justify-content: center; align-items: center;background: #e5e5e5;color: #222; position: relative; font-size: 16px; line-height: 1.6; text-align: center; width: 100%; padding: 10px 0px; margin: 0 7px; border-radius: 8px; -webkit-border-radius: 8px;  -moz-border-radius: 8px; cursor: pointer; transition: 0.3s;} .no1_simulator .inner .select_box table td .btn:hover, .no1_simulator .inner .select_box table td .btn.active{ background: #eb4e99; color: #fff; } .no1_simulator .inner .select_box table td .btn:hover.active{ background: #d6307f; color: #fff; } .no1_simulator .inner .select_box table tr:nth-child(1) td div{ padding-left: 15px;} .no1_simulator .inner .select_box table tr:nth-child(2) td div{ padding-left: 0px;} .no1_simulator .inner .select_box table tr:nth-child(3) td div{ padding-left: 0px; } .no1_simulator .inner .select_box table tr:nth-child(3) td .btn{ width: 50%;} .no1_simulator .inner .select_box table tr .none{display: none;} .no1_simulator .inner .select_box table tr:nth-child(3) td .btn div{width: 74%; text-align: center; margin: 0 auto; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 640px) { .no1_simulator .inner .select_box table tr:nth-child(3) td{ display: block; width: 100%; padding: 5px 0 0px; } .no1_simulator .inner .select_box table tr:nth-child(3) td .btn{ width: auto; margin-bottom: 7px;} .no1_simulator .inner .select_box table tr:nth-child(3) td .btn div{width: 74%; text-align: center; margin: 0 auto; display: block; white-space: inherit; overflow: inherit; text-overflow: inherit; }}/*end*/ .no1_simulator .inner .select_box table td .no_line{text-decoration: line-through;} @media screen and (max-width: 640px) { .no1_simulator .inner .select_box table td .btn{ background: #e5e5e5;color: #222; position: relative; font-size: 13px; line-height: 1.6; text-align: center; width: 100%; padding: 10px 10px; margin: 0 3px; border-radius: 8px; -webkit-border-radius: 8px;  -moz-border-radius: 8px; cursor: pointer; transition: 0.3s;} .no1_simulator .inner .select_box table tr:nth-child(1) td div{ padding-left: 15px;} .no1_simulator .inner .select_box table tr:nth-child(2) td div{ padding-left: 10px;} .no1_simulator .inner .select_box table tr:nth-child(3) td div{ padding-left: 0px;} }/*end*/ /*btn arrow*/ .no1_simulator .inner .select_box table td .btn .arrow{ display: inline-block; position: relative; padding: 0 10px; height: 8px;} .no1_simulator .inner .select_box table td .btn .arrow::after { left: 50%; top: 0px; margin: -2px 0 0 -2.5px; position: absolute; content:" "; display:block; width: 0; height: 0;border-style: solid; border-width: 4px 0 4px 5px; border-color: transparent transparent transparent #222; transition: 0.3s;} .no1_simulator .inner .select_box table td .btn:hover .arrow::after, .no1_simulator .inner .select_box table td .btn.active .arrow::after { border-color: transparent transparent transparent #fff;} @media screen and (max-width: 640px) { .no1_simulator .inner .select_box table td .btn .arrow{ display:block; position: relative; padding: 0 6px; height: 8px;} .no1_simulator .inner .select_box table td .btn .arrow::after { left: 50%; top: 0px; margin: -1px 0 0 -2.5px; position: absolute; content:" "; display:block; width: 0; height: 0;border-style: solid; border-width: 5px 4px 0 4px; border-color: #222 transparent transparent transparent; transition: 0.3s;} .no1_simulator .inner .select_box table td .btn:hover .arrow::after, .no1_simulator .inner .select_box table td .btn.active .arrow::after { border-color: #fff transparent transparent transparent; } }/*end*/ .no1_simulator .inner .select_box table td .btn.md_arrow::after { right: 13px; top: 50%; margin: -5px 0 0 0; position: absolute; content:" "; display:block; width: 0; height: 0;border-style: solid; border-width: 9px 5.5px 0 5.5px; border-color: #222 transparent transparent transparent; transition: 0.3s;} .no1_simulator .inner .select_box table td .btn.md_arrow:hover::after { border-color: #fff transparent transparent transparent; } .no1_simulator .inner .select_box table td .btn.active.md_arrow::after { border-color: #fff transparent transparent transparent; } .no1_simulator .inner .select_box table td .btn::before { left: 10px; top: 50%; margin: -11px 0 0 0; background: url(/campaign/share_no1/img/simulator/check_off.png) left top no-repeat; background-size: cover; position: absolute; content:" "; display:block; width: 22px; height: 22px; transition: 0.3s;} /*.no1_simulator .inner .select_box table td .btn:hover::before,*/ .no1_simulator .inner .select_box table td .btn.active::before { background: url(/campaign/share_no1/img/simulator/check_on.png) left top no-repeat; background-size: cover; } /*result_box -----------------*/ .pnk{ color: #eb4e99;} .no1_simulator .inner .result_box { position: relative; border: solid 3px #3f63ab; border-top: none; box-sizing: border-box; padding: 0px 0 3px ;} .no1_simulator .inner .result_box .inner { width: 95%; height: auto; margin: 0 auto; padding: 0;} .no1_simulator .inner .result_box .inner::after { content:" "; display:block; clear:both; }/*clearfix*/ /*plan*/ .no1_simulator .inner .result_box .inner .plan {float: left; width: 35%; padding-top: 18px; text-align: center;} .no1_simulator .inner .result_box .inner .plan .plan_name{ font-size: 22px; line-height: 1.6; font-weight: bold;} .no1_simulator .inner .result_box .inner .plan .plan_name_sub, .no1_simulator .inner .result_box .inner .plan .plan_name_sub span{ font-size: 17px; line-height: 1.6; font-weight: bold;} @media screen and (max-width: 640px) { .no1_simulator .inner .result_box .inner .plan {float: none; width: 100%; padding-top: 20px; text-align: center;} }/*end*/ /*table*/ .no1_simulator .inner .result_box .inner table {float: right; width: 60%; margin: 3px 0 0 0 ; padding: 0;} .no1_simulator .inner .result_box .inner table th, .no1_simulator .inner .result_box .inner table td { font-size: 20px; line-height: 1.4; font-weight: bold; border-bottom: solid 1px #ccc; padding: 0px 5px;} .no1_simulator .inner .result_box .inner table tr:nth-child(3) th, .no1_simulator .inner .result_box .inner table tr:nth-child(3) td { border-bottom: none; } .no1_simulator .inner .result_box .inner table th{ font-weight: bold; color: #434343;} .no1_simulator .inner .result_box .inner table th sup{ font-size: 10px; font-weight: bold; } .no1_simulator .inner .result_box .inner table td span{ font-weight: bold;} .no1_simulator .inner .result_box .inner table th:nth-child(3) { padding-left: 30px;} .no1_simulator .inner .result_box .inner table td:nth-child(4) {color: #eb4e99;} .no1_simulator .inner .result_box .inner table td .yen { font-size: 36px; line-height: 1.6; font-family: 'Barlow', sans-serif; font-weight: 500;} .no1_simulator .inner .result_box .inner table td {text-align: right;} .gry{ color: #ccc!important;} @media screen and (max-width: 640px) { .no1_simulator .inner .result_box .inner table {float: none; width: auto; margin: 3px auto 0 auto ; padding: 15px 0 0 0;} .no1_simulator .inner .result_box .inner table th, .no1_simulator .inner .result_box .inner table td { font-size: 14px; line-height: 1.4; font-weight: bold; border-bottom: solid 1px #ccc; padding: 0px 0px;} .no1_simulator .inner .result_box .inner table tr:nth-child(3) th, .no1_simulator .inner .result_box .inner table tr:nth-child(3) td {border-bottom: solid 1px #ccc; } .no1_simulator .inner .result_box .inner table th:nth-child(3) { padding-left: 20px;} .no1_simulator .inner .result_box .inner table td .yen { font-size: 28px; line-height: 1.6; font-family: 'Barlow', sans-serif; font-weight: 500;} }/*end*/ @media screen and (max-width: 400px) { .no1_simulator .inner .result_box .inner table {float: none; width: auto; margin: 3px auto 0 auto ; padding: 15px 0 0 0;} .no1_simulator .inner .result_box .inner table th, .no1_simulator .inner .result_box .inner table td { font-size: 3.8vw; line-height: 1.4; font-weight: bold; border-bottom: solid 1px #ccc; padding: 0px 0px;} .no1_simulator .inner .result_box .inner table tr:nth-child(3) th, .no1_simulator .inner .result_box .inner table tr:nth-child(3) td {border-bottom: solid 1px #ccc; } .no1_simulator .inner .result_box .inner table th:nth-child(3) { padding-left: 10px;} .no1_simulator .inner .result_box .inner table td .yen { font-size: 7.5vw; line-height: 1.6; font-family: 'Barlow', sans-serif; font-weight: 500;} }/*end*/ /*plan*/ .no1_simulator .inner .result_box .inner .bottom_txt { float: left; width: 35%; font-size: 11px; line-height: 1.4; padding: 10px 0 10px;} @media screen and (max-width: 640px) { .no1_simulator .inner .result_box .inner .bottom_txt { float: none; width: 100%; font-size: 11px; line-height: 1.4; padding: 20px 0 10px;} }/*end*/ /*---------------------------------------- シミュレーター [ md ] ----------------------------------------*/ #md{display: none; overflow: visible; } /* ------- inline window ------ */ .md_box{ overflow: visible; background:#fff; position:relative; max-width:874px; width:100% !important; padding:0px 0 20px; height: 90%; margin:10px auto 0 auto; text-align:center; } /*h3*/ .md_box h3 { font-size: 18px; line-height: 1.6; position: relative; display: inline-block; text-align: center; padding-left: 30px; margin-top: 20px;} .md_box h3::before { position: absolute; left: 0px; top: 2px; width: 25px; height: 22px; background: url(/campaign/share_no1/img/simulator/md_box_h3.png) left top no-repeat; background-size: 25px; content:" "; display:block; } @media screen and (max-width:520px){ .md_box h3 { font-size: 3.5vw; line-height: 1.6; position: relative; display: inline-block; text-align: center; padding-left: 30px; margin-top: 20x;} .md_box h3::before { position: absolute; left: 0px; top: 0px; } }/*END*/ .md_box .inner{ width: 96%; margin: 20px auto 0; } .md_box .inner::after { content:" "; display:block; clear:both; }/*clearfix*/ .md_box .inner .inner_1kai{ width: 49%; float: left;} .md_box .inner .inner_24kai{ width: 49%; float: right;} @media screen and (max-width:640px){ .md_box .inner .inner_1kai{ width: 100%; float: none;} .md_box .inner .inner_24kai{ width: 100%; float: none; margin-top: 20px;} }/*END*/ .md_box .inner h4{ background: #3f63ab; color: #fff; padding: 10px 0; } .md_box .inner ul{ } .md_box .inner ul li .dev{ margin: 4px 0 0 0; padding: 10px; display: flex; border-radius: 5px; -webkit-border-radius: 5px;  -moz-border-radius: 5px;} .md_box .inner ul li .dev:hover{ background: #eb4e99; color: #fff;} .md_box .inner ul li .dev:hover .pnk{ color: #fff;} .md_box .inner ul li .md_dev{ width: 40px; text-align: left; } .md_box .inner ul li .md_txt{ width: calc(100% - 40px); text-align: left; display: flex; align-items: center; } .md_txt_name{ font-size: 15px; line-height: 1.6; } .md_txt_price{ font-size: 15px; line-height: 1.6; font-weight: bold; } .md_txt_price span{ font-weight: bold; } @media screen and (max-width:640px){ .md_txt_name{ font-size: 13px; line-height: 1.6; } .md_txt_price{ font-size: 13px; line-height: 1.6; font-weight: bold; } }/*END*/ /*-------------------------------- IIJmioを利用出来るスマホは？ ---------------------------------*/ #no1_enabled_device{ background: #fdfcf8; width: 100%; padding: 0px 0 40px 0; } #no1_enabled_device h2{ width: 90%; margin: 0px auto; padding: 60px 0 0px 0; font-size: 24px; line-height: 1.5; letter-spacing: 2px; text-align: center; color: #484848; font-weight: bold; } #no1_enabled_device h2 span{ display: inline-block; font-weight: bold; } #no1_enabled_device p.read{ padding: 20px 0 0px 0; font-size: 19px; line-height: 1.5; letter-spacing: 2px; text-align: center; color: #484848; } #no1_enabled_device ul{ text-align: center; width: 940px; margin: 30px auto 0; background: #; } #no1_enabled_device ul::after { content:" "; display:block; clear:both; }/*clearfix*/ #no1_enabled_device ul li{ float: left; width: 440px; position: relative; margin: 15px 15px 15px; padding: 0 0 15px; border: solid 10px #f8f5f0; box-sizing: border-box; background: #fff; text-align: center; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1) ; } #no1_enabled_device ul li h3{ width: 162px; font-size: 16px; line-height: 1; letter-spacing: 1.5px; padding: 6px 0; margin-top: 20px; color: #fff; background: #3f63ab; display: inline-block; border-radius: 30px; -webkit-border-radius: 30px;  -moz-border-radius: 30px; } #no1_enabled_device ul li p{ width: 90%; font-size: 18px; line-height: 1.6; letter-spacing: 1.5px; padding: 6px 0; margin-top: 20px; color: #333; } #no1_enabled_device ul li p span{display: inline-block; } #no1_enabled_device ul li .img_box{ width: 93%; max-width: 386px; position: relative; margin: 15px auto 0; } #no1_enabled_device ul li .img_box .tenshi{ max-width:116px; position:absolute; right: -60px; top: -20px; } #no1_enabled_device ul li .img_box img{ width: 100%; } #no1_enabled_device ul li p.no1_enabled_device_txt_s{ width: 92%; font-size: 11px; line-height: 1.6; text-align: left; padding: 6px 0; margin: 10px auto 0; color: #333; } #no1_enabled_device .no1_enabled_device_btn{ width: 90%; margin: 20px auto 0; text-align: center; } @media screen and (max-width: 640px) { #no1_enabled_device{ background: #fdfcf8; width: 100%; padding: 0px 0 30px 0; } #no1_enabled_device h2{ width: 90%; margin: 0px auto; padding: 40px 0 0px 0; font-size: 22px; line-height: 1.5; letter-spacing: 2px; text-align: center; color: #484848; } #no1_enabled_device h2 span{ display: inline-block; } #no1_enabled_device p.read{ width: 92%; margin: 0 auto; padding: 20px 0 0px 0; font-size: 14px; line-height: 1.5; letter-spacing: 2px; text-align: center; color: #484848; } #no1_enabled_device p.read span{ display: inline-block; } #no1_enabled_device p.read br{ display:none; } #no1_enabled_device ul{ text-align: center; width: 90%!important; margin: 25px auto 0; background: #; } #no1_enabled_device ul li{ float: none; max-width: 440px; width: 90%; position: relative; margin: 0px auto 20px!important; padding: 0 0 15px; border: solid 10px #f8f5f0; box-sizing: border-box; background: #fff; text-align: center; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1) ; } #no1_enabled_device ul li h3{ width: 162px; font-size: 16px; line-height: 1; letter-spacing: 1.5px; padding: 6px 0; margin-top: 20px; color: #fff; background: #3f63ab; display: inline-block; border-radius: 30px; -webkit-border-radius: 30px;  -moz-border-radius: 30px; } #no1_enabled_device ul li p{ width: 90%; font-size: 18px; line-height: 1.6; letter-spacing: 1.5px; padding: 6px 0 0; margin: 10px auto 0 ; color: #333; } #no1_enabled_device ul li p.no1_enabled_device_txt_s{ width: 90%; font-size: 12px; line-height: 1.6; text-align: left; padding: 6px 0; margin: 10px auto 0; color: #333; } #no1_enabled_device ul li .img_box{ width: 93%; margin: 10px auto 0 ; } #no1_enabled_device ul li .img_box img{ width: 100%; } #no1_enabled_device ul li .img_box .tenshi{ max-width: 116px; width: 30%; position:absolute; right: -15%; top: -10px; } #no1_enabled_device .no1_enabled_device_btn{ width: 85%; margin: 10px auto 0; text-align: center; } }/*end*/ /*-------------------------------- IIJmioをオススメする4つの理由 ---------------------------------*/ #osusume4 { width: 100%; height: auto; margin: 0px auto; background:url(/campaign/share_no1/img/point_bg.png) center top; padding: 0px 0 40px 0; position: relative; } #osusume4::before { background:url(/campaign/share_no1/img/point_bg_head.png) left top repeat-x ; left: 0px; top: 0px; width: 100%; height: 6px; margin-bottom: -10.5px; position: absolute; content:" "; display:block; z-index: 5; } #osusume4 .osusume4_inner{ width: 100%; height: auto; margin: 0px auto 0px auto; text-align: center; } #osusume4 .osusume4_inner h2{ width: 90%; margin: 0px auto; padding: 60px 0 40px 0; font-size: 24px; line-height: 1.5; font-weight: bold; letter-spacing: 2px; text-align: center; color: #fff; text-shadow:0px 1px 2px rgba(0,0,0,0.5); } #osusume4 .osusume4_inner h2 span{ display: inline-block; font-weight: bold; } #osusume4 .osusume4_inner ul{ text-align: center; width: 940px; margin: 0px auto 0; background: #; } #osusume4 .osusume4_inner ul::after { content:" "; display:block; clear:both; }/*clearfix*/ #osusume4 .osusume4_inner ul li{ float: left; max-width: 440px; position: relative; margin: 15px 15px 15px; padding: 0!important; border: solid 10px #f5f1e9; box-sizing: border-box; background: #fff; text-align: center; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3) ; } #osusume4 .osusume4_inner ul li h3{ text-align: center; font-size: 21px; line-height: 1; padding: 30px 0 0px 0; color: #e75096; } #osusume4 .osusume4_inner ul li p{ width: 88%; text-align: center; font-size: 15px; line-height: 1.6; padding: 18px 0 5px 0; display: inline-block; } #osusume4 .osusume4_inner ul li ul.none_list::after { content:" "; display:block; clear:both; }/*clearfix*/ #osusume4 .osusume4_inner ul li ul.none_list{ width: 88%; padding: 3px 0 0 0; display: block; margin: 0 auto; } #osusume4 .osusume4_inner ul li ul.none_list li{ font-size: 11.5px; line-height: 1.4; text-indent: -11.5px; text-align: left; margin: 0 ; padding: 3px 0 0 11.5px!important; float: none; background:none; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important; } #osusume4 .osusume4_inner .osusume4_bottom_txt{ max-width: 910px; width: 95%; margin: 0px auto 0; padding: 0; font-size: 11px; line-height: 1.5; color: #fff; text-align: left; } @media screen and (max-width: 640px) { #osusume4 { width: 100%; height: auto; margin: 0px auto; background:url(/campaign/share_no1/img/point_bg.png) center top; padding: 0px 0 5px 0; position: relative; } #osusume4 .osusume4_inner h2{ width: 90%; margin: 0px auto; padding: 40px 0 0px 0; font-size: 24px; line-height: 1.5; letter-spacing: 2px; text-align: center; color: #fff; text-shadow:0px 1px 2px rgba(0,0,0,0.5); ; } #osusume4 .osusume4_inner ul{ text-align: center; width: 90%; margin: 25px auto 0; } #osusume4 .osusume4_inner ul::after { content:" "; display:block; clear:both; }/*clearfix*/ #osusume4 .osusume4_inner ul li{ float: none; max-width: 440px; width: 90%; position: relative; margin: 0px auto 20px!important; padding-bottom: 0px!important; background: #fff; text-align: center; box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3) ; } #osusume4 .osusume4_inner ul li:last-child { float: none; max-width: 440px; width: 90%; position: relative; margin: 0px auto 10px!important; padding-bottom: 0px!important; background: #fff; text-align: center; box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.3) ; } #osusume4 .osusume4_inner ul li h3{ width: 90%; margin: 0 auto; text-align: center; font-size: 18px; line-height: 1.4; padding: 25px 0 0px 0; } #osusume4 .osusume4_inner ul li h3 span{ display: inline-block; } #osusume4 .osusume4_inner ul li p{ width: 88%; text-align: center; font-size: 14px; line-height: 1.6; padding: 15px 0 0px 0; display: inline-block; } #osusume4 .osusume4_inner ul li p br{ display:none; } #osusume4 .osusume4_inner ul li ul.none_list::after { content:" "; display:block; clear:both; }/*clearfix*/ #osusume4 .osusume4_inner ul li ul.none_list{ width: 88%; padding: 3px 0 0 0; display: block; margin: 0 auto; } #osusume4 .osusume4_inner ul li ul.none_list li{ font-size: 11.5px; line-height: 1.4; text-indent: -11.5px; text-align: left; margin: 0!important ; padding: 3px 0 0 11.5px!important; float: none; background:none; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important; } #osusume4 .osusume4_inner .osusume4_bottom_txt{ max-width: 910px; width: 90%; margin: 0px auto 0; padding: 0 0 20px; font-size: 11px; line-height: 1.5; color: #fff; text-align: left; } }/*end*/ /*-------------------------------- 乗り換え体験レビュー ---------------------------------*/ #no1_review{ background: #fdfcf8; width: 100%; padding: 0px 0 40px 0; } #no1_review h2{ width: 90%; margin: 0px auto; padding: 60px 0 0px 0; font-size: 24px; line-height: 1.5; letter-spacing: 2px; text-align: center; color: #484848; font-weight: bold; } #no1_review h2 span{ display: inline-block; } #no1_review p.read{ padding: 20px 0 0px 0; font-size: 19px; line-height: 1.5; letter-spacing: 2px; text-align: center; color: #484848; } #no1_review ul { width: 939px; margin: 40px auto 0; } #no1_review ul::after { content:" "; display:block; clear:both; }/*clearfix*/ #no1_review ul li{ float: left; width: 273px; margin: 0 20px; background: #f8f5f0; padding-bottom: 183px; position: relative; } #no1_review ul li .review_img{} #no1_review ul li p{ width: 92%; margin: 0 auto; } #no1_review ul li p.read{ margin: 0 auto; font-size: 18px; line-height: 1.7; color: #e75096; } #no1_review ul li p.txt{ margin: 10px auto 0; font-size: 13px; line-height: 1.7; } #no1_review ul li .review_data_img{ position: absolute; left: 0px; bottom:0px; } @media screen and (max-width: 640px) { #no1_review{ background: #fdfcf8; width: 100%; padding: 0px 0 10px 0; } #no1_review h2{ width: 90%; margin: 0px auto; padding: 40px 0 0px 0; font-size: 22px; line-height: 1.5; letter-spacing: 2px; text-align: center; color: #484848; } #no1_review h2 span{ display: inline-block; } #no1_review p.read{ width: 92%; margin: 0 auto; padding: 15px 0 0px 0; font-size: 15px; line-height: 1.5; letter-spacing: 2px; text-align: center; color: #484848; } #no1_review p.read span{ display: inline-block; } #no1_review p.read br{ display:none; } #no1_review ul { width: 90%; margin: 30px auto 0; } #no1_review ul::after { content:" "; display:block; clear:both; }/*clearfix*/ #no1_review ul li{ float: none; width: 273px; margin: 0 auto 25px; background: #f8f5f0; padding-bottom: 183px; position: relative; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2); } }/*end*/ /*-------------------------------- ［他にもお得なキャンペーン実施中］ ---------------------------------*/ #no1_campaign { width: 100%; height: auto; margin: 0px auto; background:#fdfcf8; padding: 0px 0 40px 0; border-top: solid #c6c6c6 1px; } #no1_campaign h2{ width: 90%; margin: 0px auto; padding: 50px 0 0px 0; font-size: 24px; line-height: 1.5; letter-spacing: 2px; text-align: center; color: #484848; font-weight: bold; } #no1_campaign h2 span{ display: inline-block; font-weight: bold; } #no1_campaign ul { width: 900px; margin: 45px auto 0; } #no1_campaign ul::after { content:" "; display:block; clear:both; }/*clearfix*/ #no1_campaign ul li:nth-child(odd), #no1_campaign ul li:nth-child(even){ width: 434px; } #no1_campaign ul li:nth-child(odd){ float: left; } #no1_campaign ul li:nth-child(even){ float: right; } #no1_campaign ul li h3{ margin-bottom: 18px; position: relative; } #no1_campaign ul li h3 div{ font-size: 17px; line-height: 1.6; color: #fff; text-align: center; padding: 15px 0; width: 90%; margin: 0 auto; } #no1_campaign ul li:nth-child(odd) h3{ background: #f39800; } #no1_campaign ul li:nth-child(even) h3{ background: #e3017f; } #no1_campaign ul li:nth-child(odd) h3::after{ left:50%; bottom: -8px; margin-left: -8px; position: absolute; content:" "; display:block; width: 0; height: 0; border-style: solid; border-width: 8px 8px 0 8px; border-color: #f39800 transparent transparent transparent; } #no1_campaign ul li:nth-child(even) h3::after{ left:50%; bottom: -8px; margin-left: -8px; position: absolute; content:" "; display:block; width: 0; height: 0; border-style: solid; border-width: 8px 8px 0 8px; border-color: #e3017f transparent transparent transparent; } @media screen and (max-width: 640px) { #no1_campaign { width: 100%; height: auto; margin: 0px auto; background:#fdfcf8; padding: 0px 0 35px 0; border-top: solid #c6c6c6 1px; } #no1_campaign ul { width: 90%; margin: 0 auto; } #no1_campaign ul li:nth-child(odd), #no1_campaign ul li:nth-child(even){ float: none; width: 100%; max-width: 434px; margin: 8% auto 0; } #no1_campaign ul li h3{ margin-bottom: 12px; position: relative; } #no1_campaign ul li h3 div{ font-size: 15px; line-height: 1.6; color: #fff; text-align: center; padding: 12px 0; width: 90%; margin: 0 auto; } }/*end*/ @media screen and (max-width: 430px) { #no1_campaign ul li h3 div span{ display: inline-block; } #no1_campaign ul li h3 div br{ display: none; } }/*end*/ /*-------------------------------- ［お申し込みの流れ］ ---------------------------------*/ #no1_pp_step { width: 100%; height: auto; margin: 0px auto; background:#f8f5f0; padding: 60px 0 60px 0; } #no1_pp_step .no1_pp_step_inner{ width: 100%; height: auto; margin: 0px auto 0px auto; text-align: center; } #no1_pp_step .no1_pp_step_inner h2{ width: 90%; margin: 0px auto; padding: 0 0 25px 0; font-size: 24px; line-height: 1.5; letter-spacing: 2px; text-align: center; font-weight: bold; } #no1_pp_step .no1_pp_step_inner h2 span{ display: inline-block; } #no1_pp_step .no1_pp_step_inner p.read { margin-top: 0; font-size: 16px; line-height: 1.8; letter-spacing: 1px; text-align: center; } #no1_pp_step .no1_pp_step_inner ul{ text-align: center; width: 960px; margin: 40px auto 0; } #no1_pp_step .no1_pp_step_inner ul::after { content:" "; display:block; clear:both; }/*clearfix*/ #no1_pp_step .no1_pp_step_inner ul li{ float: left; max-width: 300px; width: 32%; border: solid 2px #8ca1cd; box-sizing: border-box; position: relative; margin: 0 30px 0 0; padding: 0!important; background: #fff; text-align: center; border-radius: 10px; -webkit-border-radius: 10px;  -moz-border-radius: 10px; } #no1_pp_step .no1_pp_step_inner ul li:nth-child(3){ margin: 0 0 0 0; } #no1_pp_step .no1_pp_step_inner ul li div.step_li_inner{ width: 90%; margin: 0 auto; padding: 15px 0; } #no1_pp_step .no1_pp_step_inner ul li h3{ height: 78px; text-align: left; font-size: 18px; line-height: 1.5; color: #3e64a9; padding: 0 0 0 99px; display: table-cell; vertical-align: middle; } #no1_pp_step .no1_pp_step_inner ul li:nth-child(1) h3 { background:url(/campaign/share_no1/img/step_01.png) left center no-repeat; } #no1_pp_step .no1_pp_step_inner ul li:nth-child(2) h3 { background:url(/campaign/share_no1/img/step_02.png) left center no-repeat; } #no1_pp_step .no1_pp_step_inner ul li:nth-child(3) h3 { background:url(/campaign/share_no1/img/step_03.png) left center no-repeat; } #no1_pp_step .no1_pp_step_inner ul li::after { background:url(/campaign/share_no1/img/step_next.png) left top no-repeat ; right: -24px; top: 55px; position: absolute; content:" "; display:block; z-index: 1; position: width: 0; height: 0; border-style: solid; border-width: 7.5px 0 7.5px 14px; border-color: transparent transparent transparent #5578bd; } #no1_pp_step .no1_pp_step_inner ul li:nth-child(3)::after { display: none; } #no1_pp_step .no1_pp_step_inner ul li p{ width: 100%; text-align: left; font-size: 13.5px; line-height: 1.6; padding: 18px 0 0px 0; display: inline-block; } #no1_pp_step .no1_pp_step_inner ul li ul.none_list::after { content:" "; display:block; clear:both; }/*clearfix*/ #no1_pp_step .no1_pp_step_inner ul li ul.none_list{ width: 100%; padding: 3px 0 0 0; display: block; margin: 0 auto; } #no1_pp_step .no1_pp_step_inner ul li ul.none_list li{ font-size: 11.5px; line-height: 1.6; text-align: left; margin: 0 ; padding: 2px 0 0 0; float: none; background:none; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important; } #no1_pp_step .no1_pp_step_inner .mt_st01{ margin: 10px 0 0 0; } #no1_pp_step .no1_pp_step_inner .step01_inner{ margin: 14px 0 0 0 ; width: 260px; } #no1_pp_step .no1_pp_step_inner .step01_inner::after { content:" "; display:block; clear:both; }/*clearfix*/ #no1_pp_step .no1_pp_step_inner .step01_inner .step01_img{ float: left; width: 55px; } #no1_pp_step .no1_pp_step_inner .step01_inner p{ float: right; width: 190px; padding: 0; } .step01_inner_line{ padding: 10px 0 10px; border-bottom: dotted 1px #ddd; } @media screen and (max-width: 640px) { #no1_pp_step .no1_pp_step_inner .step01_inner{ margin: 20px auto 0 auto ; width: 280px; } #no1_pp_step .no1_pp_step_inner .step01_inner .step01_img{ float: left; width: 55px; } #no1_pp_step .no1_pp_step_inner .step01_inner p{ float: right; width: 284px; padding: 0; } }/*end*/ @media screen and (max-width: 640px) { #no1_pp_step { width: 100%; height: auto; margin: 0px auto; background:#f8f5f0; padding: 40px 0 1px 0; } #no1_pp_step .no1_pp_step_inner h2{ width: 90%; margin: 0px auto; padding: 0 0 10px 0; font-size: 22px; line-height: 1.5; letter-spacing: 2px; text-align: center; } #no1_pp_step .no1_pp_step_inner p.read { width: 90%; margin: 0 auto; font-size: 15px; line-height: 1.8; letter-spacing: 1px; text-align: center; } #no1_pp_step .no1_pp_step_inner p.read span { display: inline-block; } #no1_pp_step .no1_pp_step_inner ul{ text-align: center; width: 90%; max-width: 350px; margin: 30px auto 0; } #no1_pp_step .no1_pp_step_inner ul::after { content:" "; display:block; clear:both; }/*clearfix*/ #no1_pp_step .no1_pp_step_inner ul li{ float: none; max-width: 400px; width: 100%; position: relative; margin: 0 auto 40px ; padding: 0!important; background: #fff; text-align: center; } #no1_pp_step .no1_pp_step_inner ul li:nth-child(3){ margin: 0 auto 20px; } #no1_pp_step .no1_pp_step_inner ul li h3{ height: auto; text-align: center; font-size: 18px; line-height: 1.5; color: #3e64a9; padding: 90px 0 0 0px; display:block; vertical-align: middle; } #no1_pp_step .no1_pp_step_inner ul li h3 br{ display: none; } #no1_pp_step .no1_pp_step_inner ul li:nth-child(1) h3 { background:url(/campaign/share_no1/img/step_01.png) center top no-repeat; } #no1_pp_step .no1_pp_step_inner ul li:nth-child(2) h3 { background:url(/campaign/share_no1/img/step_02.png) center top no-repeat; } #no1_pp_step .no1_pp_step_inner ul li:nth-child(3) h3 { background:url(/campaign/share_no1/img/step_03.png) center top no-repeat; } #no1_pp_step .no1_pp_step_inner ul li::after { background:url(/campaign/share_no1/img/step_next.png) left top no-repeat ; right:50%; top: inherit; margin-right: -10px; bottom: -30px; position: absolute; content:" "; display:block; z-index: 1; position: width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #5578bd transparent transparent transparent; } #no1_pp_step .no1_pp_step_inner ul li p{ width: 88%; text-align: left; font-size: 13.5px; line-height: 1.6; padding: 10px 0 0px 0; display: inline-block; } #no1_pp_step .no1_pp_step_inner ul li ul.none_list::after { content:" "; display:block; clear:both; }/*clearfix*/ #no1_pp_step .no1_pp_step_inner ul li ul.none_list{ width: 88%; padding: 3px 0 0 0; display: block; margin: 0 auto; } #no1_pp_step .no1_pp_step_inner ul li ul.none_list li{ font-size: 11.5px; line-height: 1.6; text-align: left; margin: 0 ; padding: 2px 0 0 0; float: none; background:none; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0) !important; } }/*end*/ /*-------------------------------- キャンペーン概要 ---------------------------------*/ #no1_gaiyo, .no1_gaiyo-af{ background: #fdfcf8; padding: 30px 0 40px; } #no1_gaiyo h2, .no1_gaiyo-af h2 { width: 90%; margin: 0px auto; padding:30px 0 30px 0; font-size: 24px; line-height: 1.5; letter-spacing: 2px; text-align: center; font-weight: bold; } #no1_gaiyo .inner, .no1_gaiyo-af .inner { display:block; width:90%; max-width: 920px; margin:40px auto; padding:0; } #no1_gaiyo .inner2, .no1_gaiyo-af .inner2 { display:block; width:90%; max-width: 920px; margin:50px auto 0px auto; padding:0; } #no1_gaiyo h3, .no1_gaiyo-af h3{ width: 100%; margin:10px 0 0 0px; padding:5px 0px ; font-size:16px; line-height:1.6; font-weight: bold; background: #3f64ab; color: #fff; text-align: center; } #no1_gaiyo h3 p, .no1_gaiyo-af h3 p{ width: 95%; margin: 0 auto;} #no1_gaiyo h3 p span, .no1_gaiyo-af h3 p span{ display: inline-block;} .overview_restock { background: #F075B8; padding: 0 2px 0 8px;} #no1_gaiyo table, .no1_gaiyo-af table{ width: 100%; border-collapse:separate; border-spacing: 0; border-bottom: solid 1px #cecece; box-sizing: border-box; } #no1_gaiyo table th, .no1_gaiyo-af table th{ width: 135px; } #no1_gaiyo table th, #no1_gaiyo table td, .no1_gaiyo-af table th, .no1_gaiyo-af table td{ padding: 15px 20px; border-top:#cecece solid 1px !important; font-size: 13px; line-height: 1.5; } #no1_gaiyo table th, .no1_gaiyo-af table th{ background: #f7f7f6; } #no1_gaiyo table td .dev_name, .no1_gaiyo-af table td .dev_name{ font-weight: bold; position: relative; padding-left: 15px; } #no1_gaiyo table td .dev_name::before, .no1_gaiyo-af table td .dev_name::before{ content:""; width: 10px; height: 10px; background: #999; display: inline-block; margin-right:5px; position: absolute; left: 0px; top: 4px; } @media screen and (max-width: 640px) { #no1_gaiyo, .no1_gaiyo-af{ padding: 0px 0 8% 0; } #no1_gaiyo h2, .no1_gaiyo-af h2{ width: 90%; margin: 0px auto; padding:55px 0 30px 0; font-size: 22px; line-height: 1.5; letter-spacing: 2px; text-align: center; } #no1_gaiyo table th, .no1_gaiyo-af table th{ width: 60px; } #no1_gaiyo table th, .no1_gaiyo-af table th, #no1_gaiyo table td, .no1_gaiyo-af table td{ padding: 15px 10px; border-top:#cecece solid 1px !important; font-size: 13px; line-height: 1.5; } /*#no1_gaiyo table tr:nth-child(3) th{ white-space: nowrap; }*/ }/*END*/ .no1_gaiyo-af #no1_gaiyo table.table2, .no1_gaiyo-af table.table2{ margin: 0 0 10px 0; border-left:solid 1px #cecece; box-sizing: border-box; } #no1_gaiyo table.table2 thead th, .no1_gaiyo-af table.table2 thead th{ text-align: center; padding: 7px 20px; border-right:solid 1px #cecece; background: #eee; } #no1_gaiyo table.table2 tbody th, .no1_gaiyo-af table.table2 tbody th, #no1_gaiyo table.table2 tbody td, .no1_gaiyo-af table.table2 tbody td{ text-align: center; padding: 12px 20px; border-right:solid 1px #cecece; } @media screen and (max-width: 640px) { #no1_gaiyo table.table2 thead th, .no1_gaiyo-af table.table2 thead th{ text-align: center; padding: 7px 5px; border-right:solid 1px #cecece; background: #eee; } #no1_gaiyo table.table2 tbody th, .no1_gaiyo-af table.table2 tbody th, #no1_gaiyo table.table2 tbody td, .no1_gaiyo-af table.table2 tbody td{ text-align: center; padding: 10px 5px; border-right:solid 1px #cecece; } }/*END*/ .no1_gaiyo-af{padding: 70px 0 40px; margin-top: -50px;} /*-------------------------------- よくあるご質問 ---------------------------------*/ #no1_QA{ padding: 30px 0 30px 0; background: #fdfcf8; } #no1_QA.no1_QA2{ padding: 0px 0 50px 0; } #no1_QA h2{ width: 90%; margin: 0px auto; padding:30px 0 30px 0; font-size: 24px; line-height: 1.5; letter-spacing: 2px; text-align: center; font-weight: bold; } #no1_QA .inner{} #no1_QA .inner2{ margin-top: 60px;} #no1_QA h3{ width: 90%; max-width: 920px; margin:0px auto; padding:10px 20px ; font-size:16px; line-height:1.6; font-weight: bold; background: #3f64ab; color: #fff; text-align: center; } #no1_QA h3 p{ width: 95%; margin: 0 auto;} #no1_QA h3 p span{ display: inline-block;} @media screen and (max-width: 640px) { #no1_QA h3{ width: 90%; max-width: 920px; margin:0px auto; padding:10px 10px ; font-size:16px; line-height:1.6; font-weight: bold; background: #3f64ab; color: #fff; text-align: center; } }/*END*/ #no1_QA h4{ width: 100%; margin:20px 0 0 -20px; padding:10px 20px ; font-size:16px; line-height:1.6; font-weight: bold; background: #e75096; color: #fff; } .no1_QA_inner { display:block; width:90%; max-width: 920px; margin:0px auto; padding:0; } .no1_QA_inner dl { width: 100%; list-style-type:none; display:block; margin-left: -20px; padding:20px ; } .no1_QA_inner dl:nth-child(odd){ background: #f1f1f1; }/*奇数　色変え*/ .no1_QA_inner dl:after { content:" "; display:block; clear:both; }/*clearfix*/ .no1_QA_inner dl dt { width:30px; float: left; font-size:14px !important; line-height:22px !important; list-style-type:none; padding:0px 0; text-align:left; clear: both; } .no1_QA_inner dl dd { width:97%; float: left; margin-left:-30px; padding:0px 0; list-style-type:none; text-align:left; } .no1_QA_inner dl dd p{ margin-left:30px; font-size:14px !important; line-height:22px !important; } .no1_QA_inner dl dt.otk_QA_Q{ color: #00baef; } .no1_QA_inner dl dt.otk_QA_A{ color: #f03a8a; } @media screen and (max-width: 640px) { /*#no1_QA{ padding: 30px 0 10% 0; }*/ #no1_QA{ padding: 0px 0 8% 0; } #no1_QA h2{ width: 90%; margin: 0px auto; padding:55px 0 30px 0; font-size: 22px; line-height: 1.5; letter-spacing: 2px; text-align: center; } .no1_QA_inner dl { width: 100%; list-style-type:none; display:block; margin-left: -10px; padding:10px ; } #no1_QA h4{ width: 100%; margin-left: -10px; padding:6px 10px ; font-size:16px; line-height:1.6; font-weight: bold; background: #e75096; color: #fff; } }/*END*/ .no1_QA_Q{ color: #1fbbed; } .no1_QA_A{ color: #ed3f8a; } /*-------------------------------- iot_bottom ---------------------------------*/ #no1_bottom{ width: 100%; border-bottom: solid 1px #ccc; padding: 18px 0; background: #fdfcf8; } #no1_bottom ul { max-width: 950px; width: 95%; margin: 0 auto; } #no1_bottom ul li{ font-size: 13px; line-height: 1.5; margin: 7px 0; padding-left: 13px; text-indent: -13px; } @media screen and (max-width: 640px) { #no1_bottom ul { max-width: 950px; width: 95%; margin: 0 auto; } #no1_bottom ul li{ font-size: 11px; line-height: 1.5; margin: 7px 0; padding-left: 11px; text-indent: -11px; } }/*END*/ /*---------------------------------------- [ POPUP ] ----------------------------------------*/ #popup01, #popup02, #popup03, #popup04, #popup_r15neo3g, #popup_xperia_xz_premium, #popup_p20lite, #confirmation{display: none; overflow: visible; } /* ------- inline window ------ */ .vbox-inline{ max-width:862px!important; width:95% !important; min-height: 315px; text-align: left; margin: 0 auto; padding: 0px; background: #; } .popup_co{ overflow: visible; background:#fff; position:relative; max-width:862px; width:100% !important; padding:0px 0; height: 90%; margin:10px auto 0 auto; text-align:center; } @media screen and (max-width:800px){ .popup_co{ position:relative; max-width:862px; width:100% !important; padding:0px 0% ; height: 90%; margin:10px auto 0 auto; text-align:center; } }/*END*/ .img_box{ width: 100%; } .img_box img{ width: 50%; } .img_box2{ width: 100%; background: #333; margin-top: 55px; } .img_box2 img{ width: 50%; } .md_inner{ padding-bottom: 40px; } .md_inner .dev_btn{ max-width: 554px; width: 80%; margin: 24px auto 0; } .md_inner ul{ max-width: 840px; width: 97.5%; margin: 26px auto 0; } .md_inner ul::after { content:" "; display:block; clear:both; }/*clearfix*/ .md_inner ul li{ float: left; width: 33.33%; text-align: center; border-right: dotted #ccc 1px; box-sizing: border-box; } .md_inner ul li:first-child{ margin-right: ; } .md_inner ul li:last-child{ margin-right: ; border-right:none; } .md_inner ul li h3{ max-width: 86%; margin: 0 auto; background: #fbf9f1; } .md_inner ul li img{ max-width: 86%; margin: 0 auto; } .md_inner ul li p{ max-width: 86%; margin: 0 auto; text-align: center; font-size: 15px; line-height: 1.7; margin: 15px 0 15px 0; display: inline-block; } @media screen and (max-width:640px){ .md_inner .dev_btn{ max-width: 554px; width: 75%; margin: 20px auto 0; } .md_inner ul li{ float: none; width: 100%; text-align: center; border-right:none; box-sizing: border-box; } .md_inner ul li h3 img{max-width: 200px; } .md_inner ul li .dev_img{ padding-bottom: 20px; } }/*END*/ /*md_data*/ .md_inner .md_data{ max-width: 800px; width: 93%; margin: 26px auto 0; } .md_inner .md_data::after { content:" "; display:block; clear:both; }/*clearfix*/ .md_inner .md_data .md_inner_L{ float: left; width: 61%; text-align: left; } .md_inner .md_data .md_inner_R{ float: right; width: 36%; text-align: left; } .md_inner .md_data .md_inner_L table{ width: 100%; border-collapse:separate; border-spacing: 0; border-bottom: solid 1px #cecece; box-sizing: border-box; } .md_inner .md_data .md_inner_L table th, .md_inner .md_data .md_inner_L table td{ padding: 7px 8px 7px 12px; border-top:#cecece solid 1px !important; font-size: 12px; line-height: 1.5; } .md_inner .md_data .md_inner_L table th{ background: #fbf9f1; } .md_inner .md_data .md_inner_R p{ font-size: 12px; line-height:1.6; margin-top: 10px; } @media screen and (max-width:640px){ .md_inner .md_data{ max-width: 800px; width: 93%; margin: 10px auto 0; } .md_inner .md_data .md_inner_L{ float: none; width: 100%; text-align: left; } .md_inner .md_data .md_inner_R{ float: none; width: 100%; text-align: left; margin: 30px auto 0; } .md_inner .md_data .md_inner_R .dev_col_img{ width: 100%; text-align: center; } }/*END*/ .no1-deviceslideshow{margin-top: 3rem;} #no1_co_wrapper a.lpd-slider-item-dvlink-btn{text-decoration: none;} /* 追加分 */ .fw{font-weight: bold;} #no1_co_wrapper a.page_link{text-decoration: none;} #no1_co_wrapper a.page_link:hover{text-decoration: none;} .page_link_btn{color: #FFF; background: #b68a41; padding: 8px; text-align: center; border-radius: 2px;} .page_link_btn:hover{opacity: 0.8;} @media screen and (min-width: 641px) { #no1_main_BOX .no1_main_btn, #no1_banner300.af-content .banner300_btn{ margin-left: -100px;} } .no1_lineup_warningbox{text-align: center;padding: 1em 40px;border:1px solid #CCC;border-radius: 8px;max-width: 880px;margin: 1em auto;background: #FFF; box-sizing: border-box;} .no1_lineup_warningbox h4{ font-size: 16px; line-height: 27px; padding: 10px 0 10px 40px; background: url(/campaign/share_no1/img/icon_attention.png) center left no-repeat; display: inline-block; } .left{text-align: left;} @media screen and (max-width: 640px) { .no1_lineup_warningbox{ width: 94%; padding: 1em; } } .sankakuwohyoujisurudake{ background: #b1dae8; height: 36px; width: 36px; position: absolute; top: -20px; left: calc(50% - 18px); transform: rotate(45deg); } /* アンカーリンク調整用トップマージン */ #no1_gaiyo #no1_gaiyo-af{padding-top: 78px;margin-top: -78px;} .finish { color: red; padding: 7px 0 6px; margin: 20px 0 ; text-align: center; font-size: 18px; font-weight: bold; } @media screen and (max-width: 640px) { .finish { color: red; width: 90%; padding: 7px 0 6px; margin: 10px auto; text-align: center; font-size: 3.9vw; } } @media screen and (min-width: 640px) { #no1_lineup .finishImg { position: absolute; top: 13%; padding: 30px; margin-left: -425px; font-size: 17px; line-height: 1.8; color: red; width: 850px; font-weight: bold; left: 50%; text-align: center; border: 1px solid #ccc; background: rgba(255,255,255,0.8); box-sizing: border-box; } } @media screen and (max-width: 640px) { #no1_lineup .finishImg { position: absolute; width: 90%; padding: 3%; color: red; font-size: 3.5vw; top: 7%; left: 5%; font-weight: bold; border: 1px solid #ccc; text-align: center; background: rgba(255,255,255,0.8); box-sizing: border-box; } #no1_lineup .finishImg2 { position: absolute; width: 90%; padding: 3%; color: red; font-size: 3.5vw; top: 57%; left: 5%; font-weight: bold; border: 1px solid #ccc; text-align: center; background: rgba(255,255,255,0.8); box-sizing: border-box; } } /*-------------------------------- gift_banner ---------------------------------*/ .gift_inner{width:100%; margin:0px auto 0 auto; height:469px; background:url(/campaign/share_no1/img/no1_gift.jpg) center top no-repeat; overflow: hidden; position: relative; } @media screen and (max-width: 640px) { .gift_inner{width:100%; margin:0px auto 0 auto; height:auto; background:none; overflow: hidden; position: relative; } }/*end*/ #no1_banner100 { width: 100%; margin: 0px auto 0 auto; height: 420px; background: url(/campaign/share_no1/img/no1_banner300_2_af.jpg) center top no-repeat; overflow: hidden; position: relative; } @media screen and (max-width: 640px) { #no1_banner100 { width: 100%; margin: 0px auto 0 auto; height: auto; background: none; overflow: hidden; position: relative; } } .lineup_btn a,.dev_btn a { pointer-events: none; cursor: not-allowed; } .lineup_btn img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } .dev_btn img { -webkit-filter: grayscale(100%)!important; -moz-filter: grayscale(100%)!important; -ms-filter: grayscale(100%)!important; -o-filter: grayscale(100%)!important; filter: grayscale(100%)!important; } .etc_dev_banner, #device_check_r2 { display: none!important; }