/*body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif, Arial; }*/ #AS-SPECIAL-contents #qr_top_area { background-color:#f2f2f2; border-radius:6px; width:100%; text-align:center; margin-top:8px; margin-bottom:15px; padding-top:6px; -moz-box-shadow: 0px 2px 4px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 2px 4px 3px rgba(0,0,0,0.2); -o-box-shadow: 0px 2px 4px 3px rgba(0,0,0,0.2); -ms-box-shadow: 0px 2px 4px 3px rgba(0,0,0,0.2);} #AS-SPECIAL-contents #qr_top_area .bar { background-color:#3c3c3c; width:98%; border-radius:5px; text-align:left; margin:auto;} #AS-SPECIAL-contents #qr_top_area .bar img { width:160px; height:auto; margin:2px;} #AS-SPECIAL-contents #qr_top_area #cont { width:96%; margin:auto; text-align:center;} #AS-SPECIAL-contents #qr_top_area #cont .app_icon { float:left; width:24%; margin-top:5px;} #AS-SPECIAL-contents #qr_top_area #cont .app_text { float:left; width:76%; margin-top:25px; text-align:left; font-size:15px;} #AS-SPECIAL-contents #qr_top_area #cont .app_text h2 { font-size:24px; font-weight:700; text-shadow: 1px 2px 2px #a0a0a0;} #AS-SPECIAL-contents #qr_top_area #cont .to_detail { float:left; width:33%; margin-top:6px; margin-bottom:5px; text-align:center;} #AS-SPECIAL-contents #qr_top_area #cont .to_windows { width:55%; margin-bottom:40px !important; text-align:center; clear:both;} #AS-SPECIAL-contents #qr_top_area #cont .to_detail img, #AS-SPECIAL-contents #qr_top_area #cont .to_windows img {width:100%;} #AS-SPECIAL-contents .clr {clear:both; height:0; line-height:0; display:block;} #AS-SPECIAL-contents .dotline { border-bottom:dotted 1px #8c8c8c; margin:12px auto;} #AS-SPECIAL-contents .copy { border-bottom:dotted 1px #8c8c8c; border-top:dotted 1px #8c8c8c; margin:12px auto; padding-top:10px; } #AS-SPECIAL-contents .license {text-align:right;} #AS-SPECIAL-contents h1 { margin:0; padding:0;} #AS-SPECIAL-contents h1 img {width:100%; height:auto;} #AS-SPECIAL-contents h1 span { position: absolute; top: 0px; left: -1800px; width: 100px; margin: 0px; padding: 0px; } #AS-SPECIAL-contents .top_pic { float:left; width:150px; text-align:center; margin-top:20px;} #AS-SPECIAL-contents .top_text { float:left; width:590px; margin-top:20px; padding-left:10px;} #AS-SPECIAL-contents .top_text p {padding-bottom:0px !important; margin-bottom:0 !important;} #AS-SPECIAL-contents h2.blue { font-size:18px; font-weight:700; color:#0061c4; } #AS-SPECIAL-contents .fl_50 { float:left; width:375px; margin-right:40px;} #AS-SPECIAL-contents .fl_50 .qr { float:left; width:141px; } #AS-SPECIAL-contents .fl_50 .qr_txt { float:left; width:230px; padding-left:4px; padding-top:10px;} #AS-SPECIAL-contents .fl_50b { float:left; width:300px; margin-top:15px;} #AS-SPECIAL-contents .img_h2 { margin: 20px 0px 0px 0px; padding: 2px 0px 5px 35px; font-size:24px; font-weight:600; color:#000000; text-shadow: 0.1em 0.1em #ceddda; background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/h2.gif); background-repeat:no-repeat; overflow: visible; line-height:1.4;} #AS-SPECIAL-contents h3 {font-size:16px; font-weight:600; color:#000000; text-shadow: 0.1em 0.1em #9adfd3; margin-top:10px; margin-bottom:8px;} #AS-SPECIAL-contents ul.list { margin-left:0; padding-left:1.5em; margin-top:1em;} #AS-SPECIAL-contents #joken { background-color:#eaeaea; margin-top:3em; margin-bottom:2em; padding:15px 15px 10px 0px;} #AS-SPECIAL-contents #joken2 { background-color:#fff2bf; margin-top:1em; margin-bottom:2em; padding:15px 10px 15px 0px;} #AS-SPECIAL-contents #joken ul, #AS-SPECIAL-contents #joken2 ul { margin-left:0; padding-left:2.2em;} #AS-SPECIAL-contents h3.adr_menu { background-color:#00b3d6; line-height:12px; padding:6px 8px 3px 8px; font-size:12px; color:#fff; font-weight:700; display:block; border-bottom:solid 2px #0093b0; margin-top:20px;} #AS-SPECIAL-contents .number { background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/number_line.gif); background-repeat:repeat-x; height:31px; margin-bottom:5px;} #AS-SPECIAL-contents .number2 { background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/number_line2.gif); background-repeat:repeat-x; height:31px; margin-bottom:5px;} #AS-SPECIAL-contents .img_cnt { text-align:center;} #AS-SPECIAL-contents .fleft { float:left; width:50%;} #AS-SPECIAL-contents .fleft ul { margin-left:0; padding-left:1.5em;} #AS-SPECIAL-contents .tdp { margin:5px auto;} #AS-SPECIAL-contents .tbl1 { margin-bottom:30px;} #AS-SPECIAL-contents .tbl1 table { border-top:solid 1px #b6b6b6 !important; border-right:solid 1px #b6b6b6 !important; margin-top:10px; margin-left:0; width:100%;} #AS-SPECIAL-contents .tbl1 th { padding:3px; border-bottom:solid 1px #b6b6b6 !important; border-left:solid 1px #b6b6b6 !important; background-color:#ff8400; vertical-align:middle; font-weight:normal; color:#ffffff;} #AS-SPECIAL-contents .tbl1 td { padding:3px; border-bottom:solid 1px #b6b6b6 !important; border-left:solid 1px #b6b6b6 !important; vertical-align:middle;} /* panel */ .panel, .panelcollapsed { background: #ffffff; margin: 5px; padding: 0px 0px 5px; width: 100%;} /* panel heading */ .panel h2, .panelcollapsed h2 {font-size: 110%; line-height:1.4; font-weight: bold; margin: 0px; padding: 6px 6px 6px 26px; background: #e7e7e7 url(../img/arrow-up.png) no-repeat 5px; border: 1px solid #e7e7e7; -moz-border-radius: 4px;-webkit-border-radius: 4px;} /* panel heading on rollover */ .panel h2:hover, .panelcollapsed h2:hover { background-color: #c6e9ff; } /* heading of a collapsed panel */ .panelcollapsed h2 { background: #e7e7e7 url(../img/arrow-dn.png) no-repeat 5px; border-color: #CCC;} /* panel content - do not set borders or paddings */ .panelcontent { background: #ffffff; overflow: hidden; padding:10px;} /* collapsed panel content */ .panelcollapsed .panelcontent { display: none; } .license{text-align:right; margin: 10px 0px;} /*=============================================== ●画面の横幅が769px以上 ===============================================*/ @media screen and (min-width: 769px){ #AS-SPECIAL-contents .nav_flt1 a, #AS-SPECIAL-contents .nav_flt2 a, #AS-SPECIAL-contents .nav_flt3 a, #AS-SPECIAL-contents .nav_flt4 a, #AS-SPECIAL-contents .nav_flt1_on a, #AS-SPECIAL-contents .nav_flt2_on a, #AS-SPECIAL-contents .nav_flt3_on a, #AS-SPECIAL-contents .nav_flt4_on a {float:left; width:25%; height:59px; background-repeat:no-repeat; background-size:contain; -webkit-transition:all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} #AS-SPECIAL-contents .nav_flt1 a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi1.gif);} #AS-SPECIAL-contents .nav_flt1 a:hover {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi1_on.gif);} #AS-SPECIAL-contents .nav_flt1_on a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi1_on.gif);} #AS-SPECIAL-contents .nav_flt2 a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi2.gif);} #AS-SPECIAL-contents .nav_flt2 a:hover {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi2_on.gif);} #AS-SPECIAL-contents .nav_flt2_on a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi2_on.gif);} #AS-SPECIAL-contents .nav_flt3 a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi3.gif);} #AS-SPECIAL-contents .nav_flt3 a:hover {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi3_on.gif);} #AS-SPECIAL-contents .nav_flt3_on a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi3_on.gif);} #AS-SPECIAL-contents .nav_flt4 a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi4.gif);} #AS-SPECIAL-contents .nav_flt4 a:hover {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi4_on.gif);} #AS-SPECIAL-contents .nav_flt4_on a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi4_on.gif);} #AS-SPECIAL-contents .nav_flt1 a img, #AS-SPECIAL-contents .nav_flt2 a img, #AS-SPECIAL-contents .nav_flt3 a img, #AS-SPECIAL-contents .nav_flt4 a img, #AS-SPECIAL-contents .nav_flt1_on a img, #AS-SPECIAL-contents .nav_flt2_on a img, #AS-SPECIAL-contents .nav_flt3_on a img, #AS-SPECIAL-contents .nav_flt4_on a img { width:100%; height:59px;} #AS-SPECIAL-contents a.button-continue .button-blue {display:none;} #AS-SPECIAL-contents .button-blue span {display:none;} } /*=============================================== ●画面の横幅が768pxまで ===============================================*/ @media screen and (max-width: 768px){ #AS-SPECIAL-contents .top_pic { float:left; width:20%; text-align:center; margin-top:20px;} #AS-SPECIAL-contents .top_text { float:left; width:76%; margin-top:20px; padding-left:3%;} #AS-SPECIAL-contents .nav_flt1 a, #AS-SPECIAL-contents .nav_flt2 a, #AS-SPECIAL-contents .nav_flt3 a, #AS-SPECIAL-contents .nav_flt4 a, #AS-SPECIAL-contents .nav_flt1_on a, #AS-SPECIAL-contents .nav_flt2_on a, #AS-SPECIAL-contents .nav_flt3_on a, #AS-SPECIAL-contents .nav_flt4_on a {float:left; width:25%; height:59px; background-repeat:no-repeat; background-size:contain; -webkit-transition:all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} #AS-SPECIAL-contents .nav_flt1 a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi1.gif);} #AS-SPECIAL-contents .nav_flt1 a:hover {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi1_on.gif);} #AS-SPECIAL-contents .nav_flt1_on a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi1_on.gif);} #AS-SPECIAL-contents .nav_flt2 a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi2.gif);} #AS-SPECIAL-contents .nav_flt2 a:hover {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi2_on.gif);} #AS-SPECIAL-contents .nav_flt2_on a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi2_on.gif);} #AS-SPECIAL-contents .nav_flt3 a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi3.gif);} #AS-SPECIAL-contents .nav_flt3 a:hover {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi3_on.gif);} #AS-SPECIAL-contents .nav_flt3_on a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi3_on.gif);} #AS-SPECIAL-contents .nav_flt4 a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi4.gif);} #AS-SPECIAL-contents .nav_flt4 a:hover {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi4_on.gif);} #AS-SPECIAL-contents .nav_flt4_on a {background-image:url(/product/atermstation/special/rakuraku_qr_ios/img/navi4_on.gif);} #AS-SPECIAL-contents .nav_flt1 a img, #AS-SPECIAL-contents .nav_flt2 a img, #AS-SPECIAL-contents .nav_flt3 a img, #AS-SPECIAL-contents .nav_flt4 a img, #AS-SPECIAL-contents .nav_flt1_on a img, #AS-SPECIAL-contents .nav_flt2_on a img, #AS-SPECIAL-contents .nav_flt3_on a img, #AS-SPECIAL-contents .nav_flt4_on a img { width:100%; height:59px;} #AS-SPECIAL-contents a.button-continue .button-blue {display:none;} #AS-SPECIAL-contents .button-blue span {display:none;} } /*=============================================== ●画面の横幅が640pxまで ===============================================*/ @media screen and (max-width:640px){ #AS-SPECIAL-contents #qr_top_area #cont .app_icon { float:none; width:35%; margin-top:0px;} #AS-SPECIAL-contents #qr_top_area #cont .app_text { float:none; width:96%; margin-top:0px; text-align:left; font-size:15px; padding-left:2%;} #AS-SPECIAL-contents #qr_top_area #cont .app_text h2 { font-size:21px; font-weight:700; text-shadow: 1px 2px 2px #a0a0a0;} #AS-SPECIAL-contents #qr_top_area #cont .to_detail { float:left; width:50%; margin-top:0px; margin-bottom:10px; text-align:center;} #AS-SPECIAL-contents #qr_top_area #cont .to_windows { width:80%; margin-bottom:40px !important; text-align:center; clear:both; margin-left:auto; margin-right:auto;} #AS-SPECIAL-contents #qr_top_area #cont .to_detail img, #AS-SPECIAL-contents #qr_top_area #cont .to_windows img {width:98%;} /* Android Page */ #AS-SPECIAL-contents .top_pic { float:none; width:141px; text-align:left; margin-top:20px;} #AS-SPECIAL-contents .top_text { float:none; width:100%; margin-top:4px; padding-left:0;} #AS-SPECIAL-contents .fl_50 { float:none; width:100%; margin-right:0;} #AS-SPECIAL-contents .fl_50 .qr { float:left; width:141px; } #AS-SPECIAL-contents .fl_50 .qr_txt { float:none; margin-left:141px; padding-top:10px; width:auto;} #AS-SPECIAL-contents .fl_50b { float:none; width:100%; margin-top:15px;} #AS-SPECIAL-contents .img_h2 { margin: 10px 0px 0px 0px; padding: 2px 0px 5px 0px; font-size:18px; font-weight:600; color:#000000; text-shadow: 0.1em 0.1em #9adfd3; background-image:none; background-repeat:no-repeat; overflow: visible; line-height:1.4; } #AS-SPECIAL-contents #tbl1 table { border-top:solid 1px #666666; border-right:solid 1px #666666; margin-top:10px; width:100%;} #AS-SPECIAL-contents .nav_flt1, #AS-SPECIAL-contents .nav_flt2, #AS-SPECIAL-contents .nav_flt3, #AS-SPECIAL-contents .nav_flt4 {display:none;} #AS-SPECIAL-contents .nav_flt1 a, #AS-SPECIAL-contents .nav_flt2 a, #AS-SPECIAL-contents .nav_flt3 a, #AS-SPECIAL-contents .nav_flt4 a, #AS-SPECIAL-contents .nav_flt1_on a, #AS-SPECIAL-contents .nav_flt2_on a, #AS-SPECIAL-contents .nav_flt3_on a, #AS-SPECIAL-contents .nav_flt4_on a {display:none; background-image:none; width:0; height:0; margin:0;} #AS-SPECIAL-contents .nav_flt1_tx, #AS-SPECIAL-contents .nav_flt2_tx, #AS-SPECIAL-contents .nav_flt3_tx, #AS-SPECIAL-contents .nav_flt4_tx {float:left; width:50%;} #AS-SPECIAL-contents .button-blue span, #AS-SPECIAL-contents .button-blue {display:block;} #AS-SPECIAL-contents .img_cnt { text-align:left; margin-left:8px;} #AS-SPECIAL-contents .fleft { float:left; width:50%; font-size:11px;} /*========================================================================= Site Buttons ========================================================================= */ #AS-SPECIAL-contents .button-continue { display:inline-block; color:#fff; font-size:14px; text-transform: uppercase; padding: 0.8em 0.5em; background-color:#1fb1e2; border-radius:3px; text-decoration:none; display:block; margin-right:1px; margin-left:1px; margin-top:3px; } *+html #AS-SPECIAL-contents .button-continue { display:block;}/* for IE7 */ #AS-SPECIAL-contents .button-continue:hover { background-color:#1fb1e2; } #AS-SPECIAL-contents .button-blue { background: #1fb1e2; } #AS-SPECIAL-contents .button-blue, #AS-SPECIAL-contents .button-blue:visited, { color: #fff; border-radius: 3px 3px 3px 3px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(255, 255, 255, 0.3); -webkit-box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(255, 255, 255, 0.3); -moz-box-shadow: 0px 1px 0 rgba(0, 0, 0, 0.3), inset 0px 1px 0px rgba(255, 255, 255, 0.3); display: inline-block; font-size: 12px; padding: 10px 15px; text-shadow: 0 1px 1px #555; } *+html #AS-SPECIAL-contents .button-blue, *+html #AS-SPECIAL-contents .button-blue:visited {display:block;}/* for IE7 */ #AS-SPECIAL-contents .button-blue:hover { background: #444; color: #fff; display:block; text-shadow: 0 1px 1px #000; text-decoration:none; } #AS-SPECIAL-contents .button-blue:active {background: #2e1ba4;} #AS-SPECIAL-contents .button-radius-50 { border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; } }