@charset "UTF-8"; /* */ /* footer 非表示 */ #supportcommon-gfooter .supportcommon-gfooter-menu, #supportcommon-gfooter .supportcommon-gfooter-aside{ display: none; } .c-icon-notice { display: inline-block; width: 48px; height: 48px; position: relative; } .c-icon-notice::before { content: ''; display: block; width: 48px; height: 48px; background: url(../img/switch/notice.svg) 50% 50% no-repeat; background-size: 48px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-icon-notice--rev { display: inline-block; width: 48px; height: 48px; position: relative; } .c-icon-notice--rev::before { content: ''; display: block; width: 48px; height: 48px; background: url(../img/switch/notice-rev.svg) 50% 50% no-repeat; background-size: 48px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-icon-info { display: inline-block; width: 48px; height: 48px; position: relative; } .c-icon-info::before { content: ''; display: block; width: 48px; height: 48px; background: url(../img/switch/info.svg) 50% 50% no-repeat; background-size: 48px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-icon-info--rev { display: inline-block; width: 48px; height: 48px; position: relative; } .c-icon-info--rev::before { content: ''; display: block; width: 48px; height: 48px; background: url(../img/switch/info-rev.svg) 50% 50% no-repeat; background-size: 48px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-icon-caution { display: inline-block; width: 48px; height: 48px; position: relative; } .c-icon-caution::before { content: ''; display: block; width: 48px; height: 48px; background: url(../img/switch/caution.svg) 50% 50% no-repeat; background-size: 48px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-icon-caution--rev { display: inline-block; width: 48px; height: 48px; position: relative; } .c-icon-caution--rev::before { content: ''; display: block; width: 48px; height: 48px; background: url(../img/switch/caution-rev.svg) 50% 50% no-repeat; background-size: 48px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-text-icon { vertical-align: bottom; } .c-icon-set { display: inline-block; width: 32px; height: 32px; position: relative; } .c-icon-set::before { content: ''; display: block; width: 32px; height: 32px; background: url(../img/switch/set.svg) 50% 50% no-repeat; background-size: 32px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-icon-power-charging-finished { display: inline-block; width: 32px; height: 32px; position: relative; } .c-icon-power-charging-finished::before { content: ''; display: block; width: 32px; height: 32px; background: url(../img/switch/power-charging-finished.svg) 50% 50% no-repeat; background-size: 32px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-icon-power-charging-start { display: inline-block; width: 40px; height: 32px; position: relative; } .c-icon-power-charging-start::before { content: ''; display: block; width: 40px; height: 32px; background: url("../img/switch/power-charging-start.svg") 50% 50% no-repeat; background-size: 40px 32px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-icon-available { width: 48px; height: 48px; position: relative; text-indent: 100%; white-space: nowrap; overflow: hidden; font-size: 0px; display: block; line-height: 0px; display: inline-block; } .c-icon-available::before { content: ''; display: block; width: 48px; height: 48px; background: url(../img/switch/table-available.svg) 50% 50% no-repeat; background-size: 48px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-icon-unavailable { width: 48px; height: 48px; position: relative; text-indent: 100%; white-space: nowrap; overflow: hidden; font-size: 0px; display: block; line-height: 0px; display: inline-block; } .c-icon-unavailable::before { content: ''; display: block; width: 48px; height: 48px; background: url(../img/switch/table-unavailable.svg) 50% 50% no-repeat; background-size: 48px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-icon-attention { width: 48px; height: 48px; position: relative; text-indent: 100%; white-space: nowrap; overflow: hidden; font-size: 0px; display: block; line-height: 0px; display: inline-block; } .c-icon-attention::before { content: ''; display: block; width: 48px; height: 48px; background: url(../img/switch/table-attention.svg) 50% 50% no-repeat; background-size: 48px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-lv1 { padding-top: 20px; margin-bottom: 70px; } .c-heading-lv1__body { text-align: center; position: relative; } .c-heading-lv1__body::before { content: ''; width: 100%; height: 1px; background: #e6e6e6; display: block; position: absolute; bottom: 3px; z-index: 1; } .c-heading-lv1__text { font-size: 34px; line-height: 50px; display: inline-block; border-bottom: #e60012 4px solid; position: relative; z-index: 2; margin-left: 14px; margin-right: 14px; padding-bottom: 20px; } .c-heading-lv1__icon { display: inline-block; width: 50px; height: 50px; vertical-align: text-bottom; margin-right: 10px; } .c-heading-icon-power { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 8px; } .c-heading-icon-power::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/power.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-user { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 0px; } .c-heading-icon-user::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/user.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-internet { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 3px; } .c-heading-icon-internet::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/internet.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-parentalcontrols { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 5px; } .c-heading-icon-parentalcontrols::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/parentalcontrols.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-data { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 4px; } .c-heading-icon-data::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/set.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-eshop { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 5px; } .c-heading-icon-eshop::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/eshop.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-controller { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 5px; } .c-heading-icon-controller::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/controller.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-controller { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 5px; } .c-heading-icon-controller::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/controller.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-friends { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 5px; } .c-heading-icon-friends::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/friends.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-accessories { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 5px; } .c-heading-icon-accessories::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/accessories.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-overseas { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 5px; } .c-heading-icon-overseas::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/overseas.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-playmode { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 8px; } .c-heading-icon-playmode::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/playmode-tabletop.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-icon-software { display: inline-block; width: 50px; height: 50px; position: relative; margin-right: 0px; } .c-heading-icon-software::before { content: ''; display: block; width: 50px; height: 50px; background: url(../img/switch/software.svg) 50% 50% no-repeat; background-size: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .c-heading-lv2 { position: relative; margin-bottom: 60px; } .c-heading-lv2::before { content: ''; width: 100%; height: 4px; background: #e60012; display: block; position: absolute; bottom: 0px; z-index: 1; } .c-heading-lv2 .c-heading__text, .c-heading-lv2__text { font-weight: bold; font-size: 30px; line-height: 46px; display: inline-block; padding-bottom: 9px; position: relative; z-index: 2; } .c-heading-lv3 { font-weight: bold; font-size: 24px; line-height: 40px; margin-bottom: 30px; margin-top: -8px; } .c-heading-lv3 .c-heading__text, .c-heading-lv3__text { display: inline-block; position: relative; padding-left: 14px; } .c-heading-lv3 .c-heading__text::before, .c-heading-lv3__text::before { content: ''; width: 4px; height: calc(100% - 8px * 2); background: #e60012; position: absolute; left: 0; top: 8px; display: block; } .c-heading-lv4 { font-size: 20px; line-height: 28px; font-weight: bold; } .c-heading-lv5--en { font-weight: bold; color: #999999; font-size: 18px; line-height: 18px; text-transform: uppercase; margin-bottom: 20px; font-family: "Roboto", sans-serif; font-weight: 900; } .c-heading-lv5__text { padding: 0 0 5px 0; border-bottom: #e60012 4px solid; } .c-heading-lv6--en { text-transform: uppercase; font-family: "Roboto", sans-serif; font-weight: 900; color: #999999; } .c-text--l { font-size: 24px; line-height: 40px; } .c-text, .c-list-text li, .c-list-block-link li { font-size: 18px; line-height: 32px; } .c-list-text li, .c-list-block-link li { margin-top: 5px; } .c-list-text li:first-child, .c-list-block-link li:first-child { margin-top: 0; } .c-note { font-size: 18px; line-height: 32px; } .c-text--s, .c-note--s, .c-list-text--s li { font-size: 16px; line-height: 30px; } .c-text--xs, .c-note--xs, .c-list-text--xs li { font-size: 14px; line-height: 28px; } .c-text--xxs, .c-note--xxs, .c-list-text--xs li { font-size: 12px; line-height: 18px; } .c-note, .c-note--s, .c-note--xs, .c-note--xxs { color: #737373; } .c-note::after, .c-note--s::after, .c-note--xs::after, .c-note--xxs::after { content: ""; display: block; clear: both; } .c-note__icon { display: block; float: left; width: 1.3em; } .c-note__icon--num { display: block; float: left; width: 2em; } .c-note__icon + .c-note__text { display: block; margin-left: 1.3em; } .c-note__icon--num + .c-note__text { display: block; margin-left: 2em; } .c-list-text li:not(.c-list-text--noicon) { position: relative; padding-left: 13px; } .c-list-text li:not(.c-list-text--noicon)::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 2px; background: #3c3c3c; vertical-align: middle; position: absolute; left: 0; top: 15px; } .c-list-text--s li:not(.c-list-text--noicon) { position: relative; padding-left: 11px; } .c-list-text--s li:not(.c-list-text--noicon)::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 2px; background: #3c3c3c; vertical-align: middle; position: absolute; left: 0; top: 13px; } .c-list-text--noicon::after { content: ""; display: block; clear: both; } .c-list-text__icon { display: block; float: left; width: 3em; text-align: right; } .c-list-text__icon + .c-list-text__text { display: block; margin-left: 3em; } .c-dl-text dl { border-bottom: #c8c8c8 1px solid; } .c-dl-text dl:first-child { border-top: #c8c8c8 1px solid; } .c-dl-text dt { padding: 15px 0; font-weight: bold; float: left; width: 6em; } .c-dl-text dd { padding: 15px 0 15px 15px; margin-left: 6em; border-left: #c8c8c8 1px solid; } .c-text a, .c-text-link { text-decoration: underline; } .c-text a > i, .c-text-link > i { display: none; } .c-text .c-link-bold { font-weight: bold; text-decoration: none; } .c-text .c-link-bold > i { display: inline-block; background: #e60012; width: 18px; height: 18px; border-radius: 9px; vertical-align: -2px; margin: 0 6px 0 6px; } .c-text .c-link-bold > i::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 18px; width: 18px; height: 18px; } .c-text .c-link-sub { color: #e60012; text-decoration: none; } .c-text .c-link-sub > i { display: inline-block; background: #e60012; width: 14px; height: 14px; border-radius: 7px; vertical-align: -1px; margin: 0 6px 0 6px; } .c-text .c-link-sub > i::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 14px; width: 14px; height: 14px; } .c-list-text a { text-decoration: underline; } .c-list-text a > i { display: none; } .c-list-block-link a { font-weight: bold; } .c-list-block-link a > i { display: inline-block; background: #e60012; width: 18px; height: 18px; border-radius: 9px; vertical-align: -2px; margin: 0 6px 0 6px; } .c-list-block-link a > i::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 18px; width: 18px; height: 18px; } .c-note a, .c-note-link { text-decoration: underline; } .c-note a > i, .c-note-link > i { display: none; } .c-text--l a, .c-text-link--l { text-decoration: underline; } .c-text--l a > i, .c-text-link--l > i { display: none; } .c-text--s a, .c-text-link--s { text-decoration: underline; } .c-text--s a > i, .c-text-link--s > i { display: none; } .c-text--s .c-link-bold { font-weight: bold; text-decoration: none; } .c-text--s .c-link-bold > i { display: inline-block; background: #e60012; width: 16px; height: 16px; border-radius: 8px; vertical-align: -2px; margin: 0 5px 0 5px; } .c-text--s .c-link-bold > i::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .c-text--xs a, .c-text-link--xs { text-decoration: underline; } .c-text--xs a > i, .c-text-link--xs > i { display: none; } .c-text--xxs a, .c-text-link--xxs { text-decoration: underline; } .c-text--xxs a > i, .c-text-link--xxs > i { display: none; } .no-touchevents .c-text .c-link-bold, .no-touchevents .c-text--s .c-link-bold, .no-touchevents .c-note a, .no-touchevents .c-text a, .no-touchevents .c-text--l a, .no-touchevents .c-text--s a, .no-touchevents .c-text--xs a, .no-touchevents .c-text--xxs a, .no-touchevents .c-list-text a, .no-touchevents .c-list-block-link a, .no-touchevents .c-text-link, .no-touchevents .c-text-link--l, .no-touchevents .c-text-link--s, .no-touchevents .c-text-link--xs, .no-touchevents .c-text-link--xxs { color: #3c3c3c; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .c-text .c-link-bold:hover, .no-touchevents .c-text--s .c-link-bold:hover, .no-touchevents .c-note a:hover, .no-touchevents .c-text a:hover, .no-touchevents .c-text--l a:hover, .no-touchevents .c-text--s a:hover, .no-touchevents .c-text--xs a:hover, .no-touchevents .c-text--xxs a:hover, .no-touchevents .c-list-text a:hover, .no-touchevents .c-list-block-link a:hover, .no-touchevents .c-text-link:hover, .no-touchevents .c-text-link--l:hover, .no-touchevents .c-text-link--s:hover, .no-touchevents .c-text-link--xs:hover, .no-touchevents .c-text-link--xxs:hover { color: #e60012; } .no-touchevents .c-note__text .c-note-link, .no-touchevents .c-note__text .c-text-link, .no-touchevents .c-note__text .c-text-link--l, .no-touchevents .c-note__text .c-text-link--s, .no-touchevents .c-note__text .c-text-link--xs, .no-touchevents .c-note__text .c-text-link--xxs { color: #737373; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .c-note__text .c-note-link:hover, .no-touchevents .c-note__text .c-text-link:hover, .no-touchevents .c-note__text .c-text-link--l:hover, .no-touchevents .c-note__text .c-text-link--s:hover, .no-touchevents .c-note__text .c-text-link--xs:hover, .no-touchevents .c-note__text .c-text-link--xxs:hover { color: #e60012; } .no-touchevents .c-text .c-link-sub { color: #e60012; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .c-text .c-link-sub:hover { color: #3c3c3c; } .c-order-arrow { width: 50px; margin: 20px auto; } .c-order-arrow::before { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 20px 25px 0 25px; border-color: #e60012 transparent transparent transparent; } /* --- name: button1 category: - component - component/button --- ## 色ベタボタン ```html
``` */ .c-button { display: inline-block; } .c-button__body { border-radius: 2px; border: #e60012 2px solid; background: #FFF; color: #e60012; display: inline-block; font-weight: bold; padding: 14px 50px; font-size: 18px; line-height: 18px; } .c-button__icon { margin: 0 8px 0 0; vertical-align: -2px; position: relative; display: inline-block; background: #e60012; width: 18px; height: 18px; border-radius: 9px; } .c-button__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 18px; width: 18px; height: 18px; } .c-button__icon::before { position: absolute; left: 0; top: 0; } .c-button__icon > i { opacity: 0; position: absolute; left: 0; top: 0; display: block; background: url("../img/arrow/right-stroke-support.svg") 50% 50% no-repeat; background-size: 18px; width: 18px; height: 18px; } .c-button__icon.arrow-left { display: inline-block; background: #e60012; width: 18px; height: 18px; border-radius: 9px; } .c-button__icon.arrow-left::before { content: ''; display: block; background: url(../img/arrow/left-stroke-support.svg) 50% 50% no-repeat; background-size: 18px; width: 18px; height: 18px; } .c-button__icon.arrow-left > i { background: url("../img/arrow/left-stroke-white.svg") 50% 50% no-repeat; background-size: 18px; } .no-touchevents .c-button__body { -webkit-transition: background 0.15s linear, color 0.15s linear; transition: background 0.15s linear, color 0.15s linear; } .no-touchevents .c-button__body:hover { background: #e60012; color: #FFF; } .no-touchevents .c-button__body .c-button__icon { -webkit-transition: background 0.15s linear; transition: background 0.15s linear; } .no-touchevents .c-button__body .c-button__icon::before { opacity: 1; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .c-button__body .c-button__icon > i { -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .c-button__body:hover .c-button__icon { background: #FFF; } .no-touchevents .c-button__body:hover .c-button__icon::before { opacity: 0; } .no-touchevents .c-button__body:hover .c-button__icon > i { opacity: 1; } .c-button-s, .c-button-s--gray { display: inline-block; } .c-button-s__body { border-radius: 2px; display: inline-block; font-weight: bold; padding: 7px 25px; min-width: 76px; text-align: center; font-size: 16px; line-height: 16px; } .c-button-s__body { border: #e60012 2px solid; background: #e60012; color: #FFF; } .c-button-s--gray .c-button-s__body { border: #e6e6e6 2px solid; background: #e6e6e6; color: #3c3c3c; } .c-button-s__icon { margin: 0 8px 0 0; vertical-align: -2px; position: relative; display: inline-block; background: #FFF; width: 16px; height: 16px; border-radius: 8px; } .c-button-s__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-support.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .c-button-s--gray .c-button-s__icon { display: inline-block; background: #FFF; width: 16px; height: 16px; border-radius: 8px; } .c-button-s--gray .c-button-s__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-8c8c8c.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .c-button-s__icon::before { position: absolute; left: 0; top: 0; } .c-button-s__icon > i { opacity: 0; position: absolute; left: 0; top: 0; display: block; background: url("../img/arrow/right-stroke-white.svg") 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .no-touchevents .c-button-s__body { -webkit-transition: background 0.15s linear, color 0.15s linear; transition: background 0.15s linear, color 0.15s linear; } .no-touchevents .c-button-s__body:hover { background: #FFF; color: #e60012; } .no-touchevents .c-button-s--gray .c-button-s__body { -webkit-transition: background 0.15s linear, color 0.15s linear; transition: background 0.15s linear, color 0.15s linear; } .no-touchevents .c-button-s--gray .c-button-s__body:hover { background: #FFF; color: #8c8c8c; } .no-touchevents .c-button-s__body .c-button-s__icon { -webkit-transition: background 0.15s linear; transition: background 0.15s linear; } .no-touchevents .c-button-s__body .c-button-s__icon::before { opacity: 1; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .c-button-s__body .c-button-s__icon > i { -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .c-button-s__body:hover .c-button-s__icon { background: #e60012; } .no-touchevents .c-button-s__body:hover .c-button-s__icon::before { opacity: 0; } .no-touchevents .c-button-s__body:hover .c-button-s__icon > i { opacity: 1; } .no-touchevents .c-button-s--gray .c-button-s__body:hover .c-button-s__icon { background: #8c8c8c; } .no-touchevents .c-button-s--gray .c-button-s__body:hover .c-button-s__icon::before { opacity: 0; } .no-touchevents .c-button-s--gray .c-button-s__body:hover .c-button-s__icon > i { opacity: 1; } .power-tab-block { padding-bottom: 20px; border-bottom: #e6e6e6 1px solid; margin-bottom: 120px; } .power-tab-block__body { padding-left: 40px; padding-right: 40px; } .power-tab-block__body::after { content: ""; display: block; clear: both; } .power-tab-block__body li { width: 34%; float: left; text-align: center; } .power-tab-block__body li a { display: block; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: right top; background-size: 1px 4px; } .power-tab-block__body li:first-child { width: 33%; } .power-tab-block__body li:last-child { width: 33%; } .power-tab-block__body li:last-child a { background-image: none; } .power-tab-block__body a { display: inline-block; height: 77px; } .power-tab-block__icon { width: 64px; height: 64px; display: inline-block; vertical-align: middle; margin-right: 10px; position: relative; } .power-tab-block__icon::before { content: ''; display: block; width: 64px; height: 64px; position: absolute; left: 0; top: 0; z-index: 2; } .power-tab-block__icon::after { content: ''; display: block; width: 64px; height: 64px; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; } .power-tab-switch .power-tab-block__icon::before { background: url("../img/switch/power-tab-switch.svg") 50% 50% no-repeat; background-size: 64px; } .power-tab-switch .power-tab-block__icon::after { background: url("../img/switch/power-tab-switch-support.svg") 50% 50% no-repeat; background-size: 64px; } .power-tab-joy-con .power-tab-block__icon::before { background: url("../img/switch/power-tab-joy-con.svg") 50% 50% no-repeat; background-size: 64px; } .power-tab-joy-con .power-tab-block__icon::after { background: url("../img/switch/power-tab-joy-con-support.svg") 50% 50% no-repeat; background-size: 64px; } .power-tab-pro-controller .power-tab-block__icon::before { background: url("../img/switch/power-tab-pro-controller.svg") 50% 50% no-repeat; background-size: 64px; } .power-tab-pro-controller .power-tab-block__icon::after { background: url("../img/switch/power-tab-pro-controller-support.svg") 50% 50% no-repeat; background-size: 64px; } .power-tab-block__label { display: inline-block; vertical-align: middle; font-weight: bold; font-size: 15px; line-height: 20px; text-align: left; } .no-touchevents .power-tab-block__item a .power-tab-block__icon::before { opacity: 1; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .power-tab-block__item a .power-tab-block__icon::after { opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .power-tab-block__item a:hover .power-tab-block__icon::before { opacity: 0; } .no-touchevents .power-tab-block__item a:hover .power-tab-block__icon::after { opacity: 1; } .no-touchevents .power-tab-block__item a .power-tab-block__label { color: #3c3c3c; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .power-tab-block__item a:hover .power-tab-block__label { color: #e60012; } .playmode-tab-block { padding-bottom: 20px; border-bottom: #e6e6e6 1px solid; margin-bottom: 120px; } .playmode-tab-block__body { padding-left: 40px; padding-right: 40px; } .playmode-tab-block__body::after { content: ""; display: block; clear: both; } .playmode-tab-block__body li { width: 34%; float: left; text-align: center; } .playmode-tab-block__body li a { display: block; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: right top; background-size: 1px 4px; } .playmode-tab-block__body li:first-child { width: 33%; } .playmode-tab-block__body li:last-child { width: 33%; } .playmode-tab-block__body li:last-child a { background-image: none; } .playmode-tab-block__body a { display: inline-block; height: 77px; } .playmode-tab-block__icon { width: 56px; height: 56px; display: inline-block; vertical-align: middle; margin-right: 15px; position: relative; } .playmode-tab-block__icon::before { content: ''; display: block; width: 56px; height: 56px; position: absolute; left: 0; top: 0; z-index: 2; } .playmode-tab-block__icon::after { content: ''; display: block; width: 56px; height: 56px; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; } .playmode-tab-tv .playmode-tab-block__icon::before { background: url("../img/switch/playmode-tv-8c8c8c.svg") 50% 50% no-repeat; background-size: 56px; } .playmode-tab-tv .playmode-tab-block__icon::after { background: url("../img/switch/playmode-tv-support.svg") 50% 50% no-repeat; background-size: 56px; } .playmode-tab-tabletop .playmode-tab-block__icon::before { background: url("../img/switch/playmode-tabletop-8c8c8c.svg") 50% 50% no-repeat; background-size: 56px; } .playmode-tab-tabletop .playmode-tab-block__icon::after { background: url("../img/switch/playmode-tabletop-support.svg") 50% 50% no-repeat; background-size: 56px; } .playmode-tab-handheld .playmode-tab-block__icon::before { background: url("../img/switch/playmode-handheld-8c8c8c.svg") 50% 50% no-repeat; background-size: 56px; } .playmode-tab-handheld .playmode-tab-block__icon::after { background: url("../img/switch/playmode-handheld-support.svg") 50% 50% no-repeat; background-size: 56px; } .playmode-tab-block__label { display: inline-block; vertical-align: middle; text-align: left; } .playmode-tab-block__label em { font-weight: bold; font-size: 16px; line-height: 24px; } .playmode-tab-block__label span { font-size: 13px; line-height: 20px; } .no-touchevents .playmode-tab-block__item a .playmode-tab-block__icon::before { opacity: 1; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .playmode-tab-block__item a .playmode-tab-block__icon::after { opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .playmode-tab-block__item a:hover .playmode-tab-block__icon::before { opacity: 0; } .no-touchevents .playmode-tab-block__item a:hover .playmode-tab-block__icon::after { opacity: 1; } .no-touchevents .playmode-tab-block__item a .playmode-tab-block__label { color: #3c3c3c; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .playmode-tab-block__item a:hover .playmode-tab-block__label { color: #e60012; } .menu-4tab-block { margin-bottom: 120px; } .menu-4tab-block__body { padding-left: 40px; padding-right: 40px; } .menu-4tab-block__body::after { content: ""; display: block; clear: both; } .menu-4tab-block__body li { width: 25%; float: left; text-align: center; } .menu-4tab-block__body li a { display: block; } .menu-4tab-block__body li:last-child a { background-image: none; } .menu-4tab-block__body a { display: inline-block; } .menu-4tab-block__icon { width: 18px; height: 18px; position: relative; background-color: #e60012; border-radius: 9px; display: block; margin-right: auto; margin-left: auto; margin-top: 10px; } .menu-4tab-block__icon::before { content: ''; display: block; width: 18px; height: 18px; position: absolute; left: 0; top: 0; z-index: 2; background: url("../img/arrow/down-stroke-white.svg") 50% 50% no-repeat; background-size: 18px; } .menu-4tab-block__label { display: block; text-align: center; font-weight: bold; } .no-touchevents .menu-4tab-block__item a .menu-4tab-block__label { color: #3c3c3c; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .menu-4tab-block__item a:hover .menu-4tab-block__label { color: #e60012; } .menu-3tab-block { margin-bottom: 20px; } .menu-3tab-block__body { padding-left: 40px; padding-right: 40px; } .menu-3tab-block__body::after { content: ""; display: block; clear: both; } .menu-3tab-block__body li { width: 34%; float: left; text-align: center; position: relative; } .menu-3tab-block__body li:first-child { width: 33%; } .menu-3tab-block__body li:last-child { width: 33%; } .menu-3tab-block__body li a { display: block; } .menu-3tab-block__body li:last-child a { background-image: none; } .menu-3tab-block__body a { display: inline-block; } .menu-3tab-block__icon { width: 18px; height: 18px; position: relative; background-color: #e60012; border-radius: 9px; display: block; margin-right: auto; margin-left: auto; margin-top: 10px; } .menu-3tab-block__icon::before { content: ''; display: block; width: 18px; height: 18px; position: absolute; left: 0; top: 0; z-index: 2; background: url("../img/arrow/down-stroke-white.svg") 50% 50% no-repeat; background-size: 18px; } .menu-3tab-block__label { display: block; text-align: center; font-weight: bold; } .no-touchevents .menu-3tab-block__item a .menu-3tab-block__label { color: #3c3c3c; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .menu-3tab-block__item a:hover .menu-3tab-block__label { color: #e60012; } .c-youtube-button { margin-bottom: 80px; } .c-youtube-button a:focus { outline: none; } .c-youtube-button__body { border: #ddd 4px solid; background: #FFF; border-radius: 2px; padding: 39px; } .c-youtube-button__body::after { content: ""; display: block; clear: both; } .c-youtube-button__text .c-text { font-weight: bold; float: right; width: calc(100% - 180px); font-size: 20px; } .c-youtube-button__text .c-note--s { float: right; width: calc(100% - 180px); } .c-youtube-button__img { float: left; width: 180px; position: relative; } .c-youtube-button__thumb img { width: 135px; height: auto; border: #ddd 1px solid; vertical-align: top; } .no-touchevents .c-youtube-button a .c-youtube-button__body { border: #ddd 4px solid; } .no-touchevents .c-youtube-button a:hover .c-youtube-button__body { border: #e60012 4px solid; } .c-area { background: #F3F3F1; border-radius: 2px; padding: 39px; } .c-area--s { background: #F3F3F1; border-radius: 2px; padding: 15px 24px; } .c-area-border { border: #969696 1px solid; background: #FFF; border-radius: 2px; padding: 39px; } .c-area-border--s { border: #969696 1px solid; background: #FFF; border-radius: 2px; padding: 15px 24px; } .c-area-border-bold { border: #ddd 4px solid; background: #FFF; border-radius: 2px; padding: 39px; } .c-area-border-bold--s { border: #ddd 4px solid; background: #FFF; border-radius: 2px; padding: 15px 24px; } .c-img-max { max-width: 550px; margin-right: auto; margin-left: auto; } .c-img-microsd { max-width: 150px; margin-right: auto; margin-left: auto; margin-bottom: 5px; } .c-img-microsd img, .c-img-border img, .c-img-max img, .c-img img { max-width: 100%; width: 100%; height: auto; vertical-align: bottom; } .c-img-border { border: #969696 1px solid; border-radius: 2px; } .c-table { border-spacing: 0; border-top: #c8c8c8 1px solid; width: 100%; } .c-table td, .c-table th { font-weight: normal; border-bottom: #c8c8c8 1px solid; border-left: #c8c8c8 1px solid; vertical-align: middle; text-align: center; padding-top: 10px; padding-bottom: 10px; } .c-table td:first-child, .c-table th:first-child { border-left: none; } .c-scroll-table-note { background: #999999; text-align: right; } .c-scroll-table-note span { padding: 3px 5px 2px 5px; display: inline-block; color: #FFF; font-weight: bold; font-size: 9px; } .c-scroll-table-note span::after { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 4px; border-color: transparent transparent transparent #FFF; margin-left: 5px; } .c-table-heading-lv1 { font-size: 16px; line-height: 22px; font-weight: bold; padding-left: 5px; padding-right: 5px; } .c-table-heading-lv2 { font-size: 15px; line-height: 24px; font-weight: bold; padding-left: 5px; padding-right: 5px; } .c-table-heading-lv3 { font-size: 13px; line-height: 21px; font-weight: bold; padding-left: 5px; padding-right: 5px; } .c-table-text--l { font-size: 18px; line-height: 32px; padding-left: 5px; padding-right: 5px; } .c-table-text { font-size: 13px; line-height: 21px; padding-left: 5px; padding-right: 5px; } .c-table-note { font-size: 12px; line-height: 16px; padding-left: 5px; padding-right: 5px; } .c-table-icon-note { font-size: 12px; line-height: 12px; vertical-align: top; display: inline-block; margin-left: -5px; } .c-table .c-table-td-pad-l { padding-top: 25px; padding-bottom: 25px; } .c-table-td-w5 { width: 5%; } .c-table-td-w7_5 { width: 7.5%; } .c-table-td-w8 { width: 8%; } .c-table-td-w10 { width: 10%; } .c-table-td-w15 { width: 15%; } .c-table-td-w16 { width: 16%; } .c-table-td-w20 { width: 20%; } .c-table-td-w30 { width: 30%; } .c-table-td-w40 { width: 40%; } .ncommon-search { padding-left: 40px; padding-right: 40px; margin-bottom: 40px; } .ncommon-search::after { content: ""; display: block; clear: both; } .ncommon-search__title { font-weight: bold; line-height: 40px; } .ncommon-search__body { position: relative; padding-left: 42px; border: 1px solid #dedede; border-radius: 2px; background-color: #f5f5f5; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) inset; } .ncommon-search__body:before { content: ''; position: absolute; top: 11px; left: 14px; width: 18px; height: 18px; background: url("../img/faq/icon-search-b3b3b3.svg") no-repeat; background-size: contain; } .ncommon-search__text { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; box-sizing: border-box; border-radius: 0; background-color: transparent; outline: 0; resize: none; margin: 0; padding: 0; zoom: 1; border: none; font-size: inherit; font-family: inherit; height: 40px; line-height: 40px; font-size: 14px; } .ncommon-search__bt { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; box-sizing: border-box; background-color: transparent; outline: 0; resize: none; margin: 0; padding: 0; zoom: 1; border: none; font-size: inherit; font-family: inherit; cursor: pointer; position: absolute; top: 3px; right: 3px; bottom: 3px; height: 34px; border-radius: 2px; font-size: 14px; font-weight: bold; line-height: 34px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); background-color: #3c3c3c; color: #fff; } .no-touchevents .ncommon-search__bt { background-color: #3c3c3c; -webkit-transition: background-color 0.15s linear; transition: background-color 0.15s linear; } .no-touchevents .ncommon-search__bt:hover { background-color: #e60012; } .top-category-container { padding-left: 40px; padding-right: 40px; } .faq-section { margin-bottom: 50px; } .top-category-grid--2 { width: 100%; } .top-category-grid--2::after { content: ""; display: block; clear: both; } .top-category-grid--2 .top-category-grid-col { width: 50%; float: left; } .top-category__item { text-align: center; } .top-category__logo { position: relative; z-index: 2; } .top-category__logo img { width: 100%; vertical-align: top; } .top-category__img img { width: 100%; vertical-align: top; } .top-category__item--app { padding-top: 63px; } .top-category__label i { display: inline-block; background: #e60012; width: 16px; height: 16px; border-radius: 8px; vertical-align: -2px; margin-right: 6px; } .top-category__label i::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .top-category__label { display: block; } .top-category__label-text { font-size: 18px; font-weight: bold; position: relative; z-index: 5; } .no-touchevents .top-category__item a .top-category__label-text { color: #3c3c3c; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .top-category__item a:hover .top-category__label-text { color: #e60012; } .no-touchevents .top-category__item a .top-category__img { opacity: 1; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .top-category__item a:hover .top-category__img { opacity: 0.7; } .top-info { padding: 40px 0; } .top-info-header { margin-bottom: 30px; } .top-info-header__button { font-weight: bold; color: #FFF; font-size: 18px; line-height: 18px; padding: 10px 20px; background: #8c8c8c; } .top-info-header__icon { display: inline-block; background: #FFF; width: 18px; height: 18px; border-radius: 9px; vertical-align: -2px; margin-right: 10px; } .top-info-header__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-8c8c8c.svg) 50% 50% no-repeat; background-size: 18px; width: 18px; height: 18px; } .top-info__body { padding-left: 40px; padding-right: 40px; } .top-info__item { margin-top: 10px; } .top-info__item a { position: relative; display: inline-block; font-weight: bold; font-size: 16px; line-height: 32px; padding-left: 26px; } .no-touchevents .top-info__item a { color: #3c3c3c; -webkit-transition: color 150ms linear; transition: color 150ms linear; } .no-touchevents .top-info__item a:hover { color: #e60012; } .top-info__icon { display: inline-block; background: #e60012; width: 16px; height: 16px; border-radius: 8px; position: absolute; left: 0; top: 8px; } .top-info__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .top-bottom-link { border-top: #e6e6e6 1px solid; padding: 40px 0; } .top-bottom-link-section { padding-left: 40px; padding-right: 40px; } .top-bottom-link__body { padding-left: 40px; padding-right: 40px; } .no-touchevents .top-bottom-link__item a { color: #3c3c3c; -webkit-transition: color 150ms linear; transition: color 150ms linear; } .no-touchevents .top-bottom-link__item a:hover { color: #e60012; } .top-bottom-link__icon { display: inline-block; background: #FFF; width: 16px; height: 16px; border-radius: 8px; position: absolute; left: 0; top: 2px; } .top-bottom-link__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-8c8c8c.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .top-bottom-link__item a { position: relative; display: inline-block; font-size: 13px; line-height: 21px; padding-left: 21px; padding-right: 14px; text-align: left; } .top-tab-block { margin-bottom: 10px; } .top-tab-block__body { padding-left: 40px; padding-right: 40px; } .top-tab-block__body::after { content: ""; display: block; clear: both; } .top-tab-block__icon { width: 56px; height: 56px; display: block; position: relative; margin: 0 auto 15px auto; } .top-tab-block__icon::before { content: ''; display: block; width: 56px; height: 56px; position: absolute; left: 0; top: 0; z-index: 2; } .top-tab-block__icon::after { content: ''; display: block; width: 56px; height: 56px; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; } .top-tab-block__label i { display: inline-block; background: #e60012; width: 16px; height: 16px; border-radius: 8px; vertical-align: -2px; margin-right: 6px; } .top-tab-block__label i::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .top-tab-block__label { display: block; } .top-tab-block__label-text { font-size: 15px; font-weight: bold; } .no-touchevents .top-tab-block__item a .top-tab-block__icon::before { opacity: 1; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .top-tab-block__item a .top-tab-block__icon::after { opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .top-tab-block__item a:hover .top-tab-block__icon::before { opacity: 0; } .no-touchevents .top-tab-block__item a:hover .top-tab-block__icon::after { opacity: 1; } .no-touchevents .top-tab-block__item a .top-tab-block__label { color: #3c3c3c; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .top-tab-block__item a:hover .top-tab-block__label { color: #e60012; } .how-to-section .c-heading-lv1 { margin-bottom: 50px; } .how-to-section-lead { margin-bottom: 70px; text-align: center; } .how-to-section-button { display: inline-block; } .how-to-section-button__body { border-radius: 2px; border: #e60012 2px solid; background: #e60012; color: #FFF; display: inline-block; font-weight: bold; padding: 14px 120px; font-size: 30px; line-height: 30px; } .how-to-section-button__icon { margin: 0 8px 0 0; vertical-align: -2px; position: relative; display: inline-block; background: #FFF; width: 26px; height: 26px; border-radius: 13px; } .how-to-section-button__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-support.svg) 50% 50% no-repeat; background-size: 26px; width: 26px; height: 26px; } .how-to-section-button__icon::before { position: absolute; left: 0; top: 0; } .how-to-section-button__icon > i { opacity: 0; position: absolute; left: 0; top: 0; display: block; background: url("../img/arrow/right-stroke-white.svg") 50% 50% no-repeat; background-size: 26px; width: 26px; height: 26px; } .no-touchevents .how-to-section-button__body { -webkit-transition: background 0.15s linear, color 0.15s linear; transition: background 0.15s linear, color 0.15s linear; } .no-touchevents .how-to-section-button__body:hover { background: #FFF; color: #e60012; } .no-touchevents .how-to-section-button__body .how-to-section-button__icon { -webkit-transition: background 0.15s linear; transition: background 0.15s linear; } .no-touchevents .how-to-section-button__body .how-to-section-button__icon::before { opacity: 1; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .how-to-section-button__body .how-to-section-button__icon > i { -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .how-to-section-button__body:hover .how-to-section-button__icon { background: #e60012; } .no-touchevents .how-to-section-button__body:hover .how-to-section-button__icon::before { opacity: 0; } .no-touchevents .how-to-section-button__body:hover .how-to-section-button__icon > i { opacity: 1; } .how-to-section-list-block-link { text-align: center; margin-bottom: 30px; } .how-to-section-list-block-link p { display: inline-block; margin: 0 10px; } .how-to-section-footer.l-container { margin-bottom: 0; } .how-to-section-footer { text-align: center; } .faq-section-list { padding-left: 40px; padding-right: 40px; margin-bottom: 20px; } .faq-section-list-item__title { position: relative; display: inline-block; padding-left: 20px; } .faq-section-list-item__icon { display: inline-block; background: #e60012; width: 14px; height: 14px; border-radius: 7px; position: absolute; left: 0; top: 6.5px; } .faq-section-list-item__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 14px; width: 14px; height: 14px; } .faq-section-list-item__title { display: block; font-weight: bold; } .faq-section-list-item__text { display: block; } .faq-section-list-more { padding-left: 40px; padding-right: 40px; text-align: center; margin-bottom: 80px; } .faq-section-utility { padding-left: 40px; padding-right: 40px; text-align: center; margin-bottom: 20px; } .faq-section-utility__icon { display: block; margin: 0 auto 10px auto; background: #bebebe; } .faq-section-utility__label { text-align: center; display: block; font-weight: bold; } .faq-section-utility .l-grid-col { margin-bottom: 25px; } .faq-section-utility__partstext a { margin-right: 4px; display: inline-block; } .top-header__body { position: relative; width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; text-align: center; height: 156px; } .top-header-heading { position: absolute; left: 0; top: 80px; text-align: center; width: 100%; } .top-header-heading__text { font-size: 42px; line-height: 42px; } .top-header-network-info { text-align: center; } .top-hero__body { position: relative; width: 100%; max-width: 1300px; margin-left: auto; margin-right: auto; text-align: center; } .top-hero__img { width: 100%; max-width: 1300px; margin-left: auto; margin-right: auto; background-image: url("../../../switch/img/index/hero-img.jpg"); background-position: 50% 100%; background-size: cover; background-repeat: no-repeat; } .top-hero__img::before { content: ''; display: block; padding-top: 56%; } .top-hero-heading { position: absolute; left: 0; top: 80px; text-align: center; width: 100%; } .top-hero-heading__text { font-size: 42px; line-height: 42px; } .top-hero-network-info { text-align: center; } .how-to-section { margin-top: -100px; margin-bottom: 100px; } .faq-section { margin-bottom: 50px; } .top-info { padding: 40px 0; } .top-info-header { margin-bottom: 30px; } .top-info-header__button { font-weight: bold; color: #FFF; font-size: 18px; line-height: 18px; padding: 10px 20px; background: #8c8c8c; } .no-touchevents .top-info-header__button { background: #8c8c8c; -webkit-transition: background 0.15s linear; transition: background 0.15s linear; } .no-touchevents .top-info-header__button:hover { background: #737373; } .top-info-header__icon { display: inline-block; background: #FFF; width: 18px; height: 18px; border-radius: 9px; vertical-align: -2px; margin-right: 10px; } .top-info-header__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-8c8c8c.svg) 50% 50% no-repeat; background-size: 18px; width: 18px; height: 18px; } .top-info__body { padding-left: 40px; padding-right: 40px; } .top-info__item { margin-top: 10px; } .top-info__item a { position: relative; display: inline-block; font-weight: bold; font-size: 16px; line-height: 32px; padding-left: 26px; } .no-touchevents .top-info__item a { color: #3c3c3c; -webkit-transition: color 150ms linear; transition: color 150ms linear; } .no-touchevents .top-info__item a:hover { color: #e60012; } .top-info__icon { display: inline-block; background: #e60012; width: 16px; height: 16px; border-radius: 8px; position: absolute; left: 0; top: 8px; } .top-info__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .top-bottom-link { border-top: #e6e6e6 1px solid; padding: 40px 0; } .top-bottom-link__body { padding-left: 40px; padding-right: 40px; } .no-touchevents .top-bottom-link__item a { color: #3c3c3c; -webkit-transition: color 150ms linear; transition: color 150ms linear; } .no-touchevents .top-bottom-link__item a:hover { color: #e60012; } .top-bottom-link__icon { display: inline-block; background: #FFF; width: 16px; height: 16px; border-radius: 8px; position: absolute; left: 0; top: 2px; } .top-bottom-link__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-8c8c8c.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .top-bottom-link__item a { position: relative; display: inline-block; font-size: 13px; line-height: 21px; padding-left: 21px; text-align: left; } .top-tab-block { margin-bottom: 10px; } .top-tab-block__body { padding-left: 40px; padding-right: 40px; } .top-tab-block__body::after { content: ""; display: block; clear: both; } .top-tab-block__icon { width: 56px; height: 56px; display: block; position: relative; margin: 0 auto 15px auto; } .top-tab-block__icon::before { content: ''; display: block; width: 56px; height: 56px; position: absolute; left: 0; top: 0; z-index: 2; } .top-tab-block__icon::after { content: ''; display: block; width: 56px; height: 56px; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; } .top-tab-block__label i { display: inline-block; background: #e60012; width: 16px; height: 16px; border-radius: 8px; vertical-align: -2px; margin-right: 6px; } .top-tab-block__label i::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .top-tab-block__label { display: block; } .top-tab-block__label-text { font-size: 15px; font-weight: bold; } .no-touchevents .top-tab-block__item a .top-tab-block__icon::before { opacity: 1; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .top-tab-block__item a .top-tab-block__icon::after { opacity: 0; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .top-tab-block__item a:hover .top-tab-block__icon::before { opacity: 0; } .no-touchevents .top-tab-block__item a:hover .top-tab-block__icon::after { opacity: 1; } .no-touchevents .top-tab-block__item a .top-tab-block__label { color: #3c3c3c; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .top-tab-block__item a:hover .top-tab-block__label { color: #e60012; } .how-to-section .c-heading-lv1 { margin-bottom: 50px; } .how-to-section-lead { margin-bottom: 70px; text-align: center; } .how-to-section-button { display: inline-block; } .how-to-section-button__body { border-radius: 2px; border: #e60012 2px solid; background: #e60012; color: #FFF; display: inline-block; font-weight: bold; padding: 14px 120px; font-size: 30px; line-height: 30px; } .how-to-section-button__icon { margin: 0 8px 0 0; vertical-align: -2px; position: relative; display: inline-block; background: #FFF; width: 26px; height: 26px; border-radius: 13px; } .how-to-section-button__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-support.svg) 50% 50% no-repeat; background-size: 26px; width: 26px; height: 26px; } .how-to-section-button__icon::before { position: absolute; left: 0; top: 0; } .how-to-section-button__icon > i { opacity: 0; position: absolute; left: 0; top: 0; display: block; background: url("../img/arrow/right-stroke-white.svg") 50% 50% no-repeat; background-size: 26px; width: 26px; height: 26px; } .no-touchevents .how-to-section-button__body { -webkit-transition: background 0.15s linear, color 0.15s linear; transition: background 0.15s linear, color 0.15s linear; } .no-touchevents .how-to-section-button__body:hover { background: #FFF; color: #e60012; } .no-touchevents .how-to-section-button__body .how-to-section-button__icon { -webkit-transition: background 0.15s linear; transition: background 0.15s linear; } .no-touchevents .how-to-section-button__body .how-to-section-button__icon::before { opacity: 1; -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .how-to-section-button__body .how-to-section-button__icon > i { -webkit-transition: opacity 0.15s linear; transition: opacity 0.15s linear; } .no-touchevents .how-to-section-button__body:hover .how-to-section-button__icon { background: #e60012; } .no-touchevents .how-to-section-button__body:hover .how-to-section-button__icon::before { opacity: 0; } .no-touchevents .how-to-section-button__body:hover .how-to-section-button__icon > i { opacity: 1; } .how-to-section-list-block-link { text-align: center; margin-bottom: 30px; } .how-to-section-list-block-link p { display: inline-block; margin: 0 10px; } .how-to-section-footer.l-container { margin-bottom: 0; } .how-to-section-footer { text-align: center; } .faq-section-list { padding-left: 40px; padding-right: 40px; margin-bottom: 20px; } .faq-section-list-item__title { position: relative; display: inline-block; padding-left: 20px; } .faq-section-list-item__icon { display: inline-block; background: #e60012; width: 14px; height: 14px; border-radius: 7px; position: absolute; left: 0; top: 6.5px; } .faq-section-list-item__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 14px; width: 14px; height: 14px; } .faq-section-list-item__title { display: block; font-weight: bold; } .faq-section-list-item__text { display: block; } .faq-section-list-more { padding-left: 40px; padding-right: 40px; text-align: center; margin-bottom: 80px; } .faq-section-utility { padding-left: 40px; padding-right: 40px; text-align: center; margin-bottom: 20px; } .faq-section-utility__icon { display: block; margin: 0 auto 10px auto; background: #bebebe; } .no-touchevents .l-grid-col a .faq-section-utility__icon { background: #bebebe; -webkit-transition: background 0.15s linear; transition: background 0.15s linear; } .no-touchevents .l-grid-col a .faq-section-utility__icon.faq-section-utility__icon--account, .no-touchevents .l-grid-col a .faq-section-utility__icon.faq-section-utility__icon--nso, .no-touchevents .l-grid-col a .faq-section-utility__icon.faq-section-utility__icon--mnp { background: #e60012; -webkit-transition: background 0.15s linear; transition: 0.15s linear; } .no-touchevents .l-grid-col a .faq-section-utility__label { color: #3c3c3c; -webkit-transition: color 0.15s linear; transition: color 0.15s linear; } .no-touchevents .l-grid-col a:hover .faq-section-utility__icon { background: #737373; } .no-touchevents .l-grid-col a:hover .faq-section-utility__icon.faq-section-utility__icon--account, .no-touchevents .l-grid-col a:hover .faq-section-utility__icon.faq-section-utility__icon--nso, .no-touchevents .l-grid-col a:hover .faq-section-utility__icon.faq-section-utility__icon--mnp { background: #e60012; opacity: 0.7; } .no-touchevents .l-grid-col a:hover .faq-section-utility__label { color: #e60012; } .faq-section-utility__label { text-align: center; display: block; font-weight: bold; } .faq-section-utility .l-grid-col { margin-bottom: 25px; } .faq-section-utility__partstext a { margin-right: 4px; display: inline-block; } .supportInfo-block_no-border_no-padding { padding: 0; border: 0px; } .supportInfo-important-red dt, .supportInfo-important-gray dt, .supportInfo-important dt { text-align: center; color: #fff; font-weight: bold; } .supportInfo-important-red dd, .supportInfo-important-gray dd, .supportInfo-important dd { text-align: left; } .supportInfo-important-red { background: #ce181e; } .supportInfo-important-gray { background: #dddddd; } .supportInfo-important-gray dt { color: #5e5e5e; } .supportInfo-important { background: #434a53; } .image-supportCat { display: block; } .text-supportCat { text-align: center; height: 75px; font-size: 18px; } .text-supportCat-last { text-align: center; height: 50px; font-size: 18px; } .link-arrow { text-decoration: underline; } .top-footer-link { border-top: #e6e6e6 1px solid; padding: 40px 0; } .top-footer-link__body { padding-left: 40px; padding-right: 40px; } .l-container { padding-left: 40px; padding-right: 40px; max-width: 1200px; margin-bottom: 120px; } .top-footer-link-section { padding-left: 40px; padding-right: 40px; margin-bottom: 20px; } .no-touchevents .top-footer-link__item a { color: #3c3c3c; -webkit-transition: color 150ms linear; transition: color 150ms linear; } .no-touchevents .top-footer-link__item a:hover { color: #e60012; } .top-footer-link__icon { display: inline-block; background: #FFF; width: 16px; height: 16px; border-radius: 8px; position: absolute; left: 0; top: 2px; } .top-footer-link__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-8c8c8c.svg) 50% 50% no-repeat; background-size: 16px; width: 16px; height: 16px; } .top-footer-link__item a { position: relative; display: inline-block; font-size: 12px; line-height: 21px; padding-left: 21px; text-align: left; } .faq-section-list { padding-left: 40px; padding-right: 40px; margin-bottom: 20px; } .faq-section-list-item__title { position: relative; display: inline-block; padding-left: 20px; } .faq-section-list-item__icon { display: inline-block; background: #e60012; width: 14px; height: 14px; border-radius: 7px; position: absolute; left: 0; top: 6.5px; } .faq-section-list-item__icon::before { content: ''; display: block; background: url(../img/arrow/right-stroke-white.svg) 50% 50% no-repeat; background-size: 14px; width: 14px; height: 14px; } .faq-section-list-item__title { display: block; font-weight: bold; } .faq-section-list-item__text { display: block; } .faq-section-list-more { padding-left: 40px; padding-right: 40px; text-align: center; margin-bottom: 80px; } .faq-section-utility { padding-left: 40px; padding-right: 40px; text-align: center; margin-bottom: 20px; } .faq-section-utility__icon { display: block; margin: 0 auto 10px auto; background: #bebebe; } .faq-section-utility__label { text-align: center; display: block; font-weight: bold; } .faq-section-utility .l-grid-col { margin-bottom: 25px; } .faq-section-utility__partstext a { margin-right: 4px; display: inline-block; } @media all and (min-width: 760px){ body{ /**/ } .c-heading-icon-power::before{ top: 16px; } .c-heading-icon-internet::before{ top: 12px; } .c-heading-icon-data::before{ top: 12px; } .c-heading-icon-eshop::before{ top: 4px; } .c-heading-icon-friends::before{ top: 12px; } .c-heading-icon-accessories::before{ top: 14px; } .c-heading-icon-overseas::before{ top: 12px; } .c-heading-icon-playmode{ top: 4px; } .c-heading-icon-software{ top: 6px; } .c-heading-lv6--en{ display: inline-block; vertical-align: top; font-size: 18px; line-height: 18px; } .c-heading-lv6--en span{ padding: 0 20px 0 10px; border-right: #c8c8c8 4px solid; } .c-heading-lv6__text{ padding: 0 20px 0 10px; border-right: #c8c8c8 4px solid; } .c-list-text{ padding-left: 18px; } .c-list-text--s{ padding-left: 16px; } .c-dl-text::after{ content: ""; display: block; clear: both; } .power-tab-block__body{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .menu-4tab-block{ padding-bottom: 20px; border-bottom: #e6e6e6 1px solid; } .menu-4tab-block__body li a{ background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: right top; background-size: 1px 4px; } .menu-4tab-block__body a{ height: 80px; } .menu-4tab-block__label{ font-size: 16px; line-height: 24px; min-height: 48px; } .menu-3tab-block{ padding-bottom: 20px; border-bottom: #e6e6e6 1px solid; } .menu-3tab-block__body li a{ background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: right top; background-size: 1px 4px; } .menu-3tab-block__body a{ height: 80px; } .menu-3tab-block__label{ font-size: 16px; line-height: 24px; min-height: 48px; } .c-scroll-table-note{ display: none; } .ncommon-search{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 960px; } .ncommon-search__title{ float: left; width: 160px; } .ncommon-search__body{ margin-left: 160px; } .ncommon-search__bt{ width: 97px; } .top-category-container{ max-width: 1200px; margin-left: auto; margin-right: auto; margin-bottom: 80px; box-sizing: border-box; } .top-category-container:nth-child(1) { margin-bottom: 120px; } .top-category__item--switch .top-category__logo{ width: 88px; margin: 0 auto; } .top-category__item--3ds .top-category__logo, .top-category__item--game_watch .top-category__logo { width: 324px; margin: 0 auto; } .top-category__item--wiiu .top-category__logo{ width: 136px; margin: 0 auto; } .top-category__item--clv .top-category__logo{ width: 270px; margin: 0 auto; } .top-category__img{ max-width: 460px; margin: 0 auto 0 auto; } .top-category__item--switch .top-category__img{ max-width: 880px; margin: -10px auto 0 auto; } .top-category__item--3ds .top-category__img{ margin-top: 25px; } .top-category__item--game_watch .top-category__img { margin-top: 25px; } .top-category__item--wiiu .top-category__img{ margin-top: 25px; } .top-category__item--clv .top-category__img{ margin-top: -35px; } .top-category__item--app .top-category__img{ margin-top: -35px; } .top-category__item--3ds .top-category__label{ margin-top: -10px; } .top-category__item--game_watch .top-category__label { margin-top: -15px; } .top-category__item--wiiu .top-category__label{ margin-top: -10px; } .top-category__item--clv .top-category__label{ margin-top: 5px; } .top-category__item--app .top-category__label{ margin-top: 5px; } .top-info__body{ max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .top-bottom-link-section{ max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .top-bottom-link__body{ max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .top-bottom-link__item{ margin-top: 10px; } .top-tab-block__body li{ width: 32.5%; float: left; text-align: center; padding-bottom: 19px; margin-bottom: 20px; border-bottom: #b4b4b4 1px solid; } .top-tab-block__body li:nth-child(3n + 2){ width: 35%; } .top-tab-block__body li:nth-child(3n + 1){ clear: left; } .top-tab-block__body li:nth-child(3n + 1) a{ background-image: -webkit-linear-gradient( top, #999, #999 1px, transparent 1px, transparent 3px ), -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient( to bottom, #999, #999 1px, transparent 1px, transparent 3px ), linear-gradient( to bottom, #999, #999 1px, transparent 1px, transparent 3px ); background-repeat: repeat-y,repeat-y; background-position: right top,left top; background-size: 1px 4px,1px 4px; } .top-tab-block__body li a{ display: block; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: right top; background-size: 1px 4px; } .faq-section-list{ margin-left: auto; margin-right: auto; box-sizing: border-box; } .faq-section-list{ max-width: 1200px; } .faq-section-list-item__title{ font-size: 13px; line-height: 27px; margin-bottom: 10px; } .faq-section-list-item__text{ font-size: 16px; line-height: 28px; } .faq-section-list-more{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .faq-section-list-more::before{ content: ''; width: 100%; height: 1px; background: #e6e6e6; display: block; margin-bottom: 20px; } .faq-section-utility{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 960px; } .faq-section-utility__icon{ width: 140px; height: 140px; border-radius: 4px; position: relative; } .faq-section-utility__icon::before{ content: ''; width: 120px; height: 120px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .faq-section-utility__icon--parents::before{ background: url("../img/switch/top-parents.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--repair::before{ background: url("../img/switch/top-repair.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--inquiry::before{ background: url("../img/switch/top-inquiry.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--buy::before{ background: url("../img/switch/top-buy.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--mnp::before{ background: url("../img/switch/top-mnp.png") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--nso::before{ background: url("../../../switch/img/index/switch-online.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__label{ font-size: 16px; line-height: 28px; } .faq-section-utility__label-note{ display: inline-block; font-size: 12px; line-height: 18px; } .faq-section-utility .l-grid--2 { margin-bottom: 30px; } .top-header-network-info{ position: absolute; right: 10px; top: 0; } .top-header-network-info .category-header-network-info{ top: 70px; } .top-hero-network-info{ position: absolute; right: 10px; top: 0; } .top-hero-network-info .category-header-network-info{ top: 70px; } .top-info__body{ max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .top-bottom-link__body{ max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .top-bottom-link__list{ text-align: center; } .top-bottom-link__item{ display: inline-block; margin-top: 10px; margin-right: 25px; vertical-align: top; } .top-bottom-link__item:nth-child(1){ margin-right: 40px; margin-left: 50px; } .top-bottom-link__item:nth-child(2){ margin-right: 30px; margin-left: 30px; } .top-bottom-link__item:nth-child(3){ margin-right: 50px; margin-left: 40px; } .top-bottom-link__item:nth-child(4){ margin-right: 25px; margin-left: 0; } .top-bottom-link__item:last-child{ margin-right: 0; margin-left: 0; } .top-tab-block__body li{ width: 32.5%; float: left; text-align: center; padding-bottom: 19px; margin-bottom: 20px; border-bottom: #b4b4b4 1px solid; } .top-tab-block__body li:nth-child(3n + 2){ width: 35%; } .top-tab-block__body li:nth-child(3n + 1){ clear: left; } .top-tab-block__body li:nth-child(3n + 1) a { background-image: -webkit-linear-gradient( top, #999, #999 1px, transparent 1px, transparent 3px ), -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient( to bottom, #999, #999 1px, transparent 1px, transparent 3px ), linear-gradient( to bottom, #999, #999 1px, transparent 1px, transparent 3px ); background-repeat: repeat-y, repeat-y; background-position: right top, left top; background-size: 1px 4px, 1px 4px; } .top-tab-block__body li a{ display: block; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: right top; background-size: 1px 4px; } .faq-section-list{ margin-left: auto; margin-right: auto; box-sizing: border-box; } .faq-section-list{ max-width: 1200px; } .faq-section-list-item__title{ font-size: 13px; line-height: 27px; margin-bottom: 10px; } .faq-section-list-item__text{ font-size: 16px; line-height: 28px; } .faq-section-list-more{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .faq-section-list-more::before{ content: ''; width: 100%; height: 1px; background: #e6e6e6; display: block; margin-bottom: 20px; } .faq-section-utility{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .faq-section-utility__icon{ width: 140px; height: 140px; border-radius: 4px; position: relative; } .faq-section-utility__icon::before{ content: ''; width: 120px; height: 120px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .faq-section-utility__icon--errorcode::before{ background: url("../img/switch/top-errorcode.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--chart::before{ background: url("../img/switch/top-chart.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--repair::before{ background: url("../img/switch/top-repair.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--inquiry::before{ background: url("../img/switch/top-inquiry.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__label{ font-size: 16px; line-height: 28px; } .supportInfo-block{ position: absolute; left: 10px; right: 10px; top: 180px; } .supportInfo-important-red, .supportInfo-important-gray, .supportInfo-important{ display: table; table-layout: fixed; width: 100%; max-width: 960px; border-radius: 6px; margin: 0 auto 0 auto; box-sizing: border-box; } .supportInfo-important-red dt, .supportInfo-important-gray dt, .supportInfo-important dt{ display: table-cell; width: 221px; font-size: 18px; line-height: 24px; vertical-align: middle; padding: 0 15px; } .supportInfo-important-red dd, .supportInfo-important-gray dd, .supportInfo-important dd{ display: table-cell; padding: 3px 3px 3px 0; vertical-align: middle; font-size: 18px; line-height: 28px; } .supportInfo-important-red dd ul, .supportInfo-important-gray dd ul, .supportInfo-important dd ul{ background: #FFF; border-radius: 0 4px 4px 0; padding: 15px 15px 15px 18px; } .top-footer-link__body{ max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .l-container{ margin-left: auto; margin-right: auto; box-sizing: border-box; } .top-footer-link-section{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .top-footer-link__item{ margin-top: 10px; margin-right: 25px; vertical-align: top; } .faq-section-list{ margin-left: auto; margin-right: auto; box-sizing: border-box; } .faq-section-list{ max-width: 1200px; } .faq-section-list-item__title{ font-size: 13px; line-height: 27px; margin-bottom: 10px; } .faq-section-list-item__text{ font-size: 16px; line-height: 28px; } .faq-section-list-more{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .faq-section-list-more::before{ content: ''; width: 100%; height: 1px; background: #e6e6e6; display: block; margin-bottom: 20px; } .faq-section-utility{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 960px; } .faq-section-utility__icon{ width: 140px; height: 140px; border-radius: 4px; position: relative; } .faq-section-utility__icon::before{ content: ''; width: 120px; height: 120px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .faq-section-utility__icon--point::before{ background: url("../img/switch/point.png") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--gift::before{ background: url("../img/switch/gift.png") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--point_number::before{ background: url("../img/switch/point_number.png") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--download::before{ background: url("../img/switch/download.png") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--parents::before{ background: url("../img/switch/top-parents.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--account::before{ background: url("../img/switch/top-account.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--repair::before{ background: url("../img/switch/top-repair.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__icon--inquiry::before{ background: url("../img/switch/top-inquiry.svg") 50% 50% no-repeat; background-size: 120px; } .faq-section-utility__label{ font-size: 16px; line-height: 28px; } .faq-section-utility { max-width: 1125px; margin-top: 130px; margin-bottom: 80px; padding-left: 0; padding-right: 0; } .tw-section { max-width: 750px; width: 74.67%; margin: 0 auto 40px; } .tw-btn , .wide-care-btn { transition: 0.15s; } .tw-btn img , .wide-care-btn img { width: 100%; } .tw-btn:hover , .wide-care-btn:hover { opacity: 0.8; } .wide-care-section { margin-bottom: 40px; border-top: #e6e6e6 1px solid; border-bottom: #e6e6e6 1px solid; } .wide-care-section .c-text { text-align: center; margin: 20px 0 40px 0; } .wide-care { max-width: 400px; width: 40.995%; margin: 0 auto; padding: 40px 0 0 0; } } @media all and (min-width: 980px){ body{ /**/ } .playmode-tab-block__body{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .menu-4tab-block__body{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .menu-3tab-block__body{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .top-tab-block__body{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .faq-section-list-grid{ display: table; } .faq-section-list-grid li{ display: table-cell; width: 25%; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: right top; background-size: 1px 4px; } .faq-section-list-grid li:first-child{ background-image: -webkit-linear-gradient( top, #999, #999 1px, transparent 1px, transparent 3px ), -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient( to bottom, #999, #999 1px, transparent 1px, transparent 3px ), linear-gradient( to bottom, #999, #999 1px, transparent 1px, transparent 3px ); background-repeat: repeat-y,repeat-y; background-position: right top,left top; background-size: 1px 4px,1px 4px; } .faq-section-list-grid a{ display: block; margin: 0 18px; } .top-tab-block__body{ margin-left: auto; margin-right: auto; box-sizing: border-box; max-width: 1200px; } .faq-section-list-grid{ display: table; } .faq-section-list-grid li{ display: table-cell; width: 25%; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: right top; background-size: 1px 4px; } .faq-section-list-grid li:first-child{ background-image: -webkit-linear-gradient( top, #999, #999 1px, transparent 1px, transparent 3px ), -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient( to bottom, #999, #999 1px, transparent 1px, transparent 3px ), linear-gradient( to bottom, #999, #999 1px, transparent 1px, transparent 3px ); background-repeat: repeat-y,repeat-y; background-position: right top,left top; background-size: 1px 4px,1px 4px; } .faq-section-list-grid a{ display: block; margin: 0 18px; } .faq-section-list-grid{ display: table; } .faq-section-list-grid li{ display: table-cell; width: 25%; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: right top; background-size: 1px 4px; } .faq-section-list-grid li:first-child{ background-image: -webkit-linear-gradient( top, #999, #999 1px, transparent 1px, transparent 3px ), -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient( to bottom, #999, #999 1px, transparent 1px, transparent 3px ), linear-gradient( to bottom, #999, #999 1px, transparent 1px, transparent 3px ); background-repeat: repeat-y,repeat-y; background-position: right top,left top; background-size: 1px 4px,1px 4px; } .faq-section-list-grid a{ display: block; margin: 0 18px; } } @media all and (min-width: 1200px){ body{ /**/ } } @media all and (max-width: 1199px){ body{ /**/ } } @media all and (min-width: 980px) and (max-width: 1199px){ body{ /**/ } } @media all and (max-width: 979px){ body{ /**/ } .playmode-tab-block__body{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; } .menu-4tab-block__body{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; } .menu-3tab-block__body{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; } .top-category__label i{ display: none; } .top-tab-block__body{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; } .top-tab-block__label i{ display: none; } .faq-section-list-grid li{ padding: 15px 0 20px 0; background-image: -webkit-linear-gradient(left, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to right, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-x; background-position: left bottom; background-size: 4px 1px; } .faq-section-list-grid li:first-child{ background-image: -webkit-linear-gradient( left, #999, #999 1px, transparent 1px, transparent 3px ), -webkit-linear-gradient(left, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient( to right, #999, #999 1px, transparent 1px, transparent 3px ), linear-gradient( to right, #999, #999 1px, transparent 1px, transparent 3px ); background-repeat: repeat-x,repeat-x; background-position: left bottom,left top; background-size: 4px 1p,4px 1px; } .top-tab-block__body{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; } .top-tab-block__label i{ display: none; } .faq-section-list-grid li{ padding: 15px 0 20px 0; background-image: -webkit-linear-gradient(left, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to right, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-x; background-position: left bottom; background-size: 4px 1px; } .faq-section-list-grid li:first-child{ background-image: -webkit-linear-gradient( left, #999, #999 1px, transparent 1px, transparent 3px ), -webkit-linear-gradient(left, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient( to right, #999, #999 1px, transparent 1px, transparent 3px ), linear-gradient( to right, #999, #999 1px, transparent 1px, transparent 3px ); background-repeat: repeat-x,repeat-x; background-position: left bottom,left top; background-size: 4px 1p,4px 1px; } .faq-section-list-grid li{ padding: 15px 0 20px 0; background-image: -webkit-linear-gradient(left, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to right, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-x; background-position: left bottom; background-size: 4px 1px; } .faq-section-list-grid li:first-child{ background-image: -webkit-linear-gradient( left, #999, #999 1px, transparent 1px, transparent 3px ), -webkit-linear-gradient(left, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient( to right, #999, #999 1px, transparent 1px, transparent 3px ), linear-gradient( to right, #999, #999 1px, transparent 1px, transparent 3px ); background-repeat: repeat-x,repeat-x; background-position: left bottom,left top; background-size: 4px 1p,4px 1px; } } @media all and (min-width: 760px) and (max-width: 979px){ body{ /**/ } .top-category__label-text{ font-size: 16px; } .top-tab-block__label{ height: 40px; display: table-cell; vertical-align: middle; } .top-tab-block__label-text{ font-size: 14px; } .top-header-heading{ top: 30px; } .top-header-heading__text{ font-size: 36px; line-height: 44px; } .top-hero__img::before{ padding-top: 78%; } .top-hero-heading{ top: 7.5%; } .top-hero-heading__text{ font-size: 36px; line-height: 44px; } .top-tab-block__label{ height: 40px; display: table-cell; vertical-align: middle; } .top-tab-block__label-text{ font-size: 14px; } } @media all and (max-width: 759px){ body{ /**/ } .c-icon-available{ width: 24px; height: 24px; } .c-icon-available::before{ width: 24px; height: 24px; background-size: 24px; } .c-icon-unavailable{ width: 24px; height: 24px; } .c-icon-unavailable::before{ width: 24px; height: 24px; background-size: 24px; } .c-icon-attention{ width: 24px; height: 24px; } .c-icon-attention::before{ width: 24px; height: 24px; background-size: 24px; } .c-heading-lv1{ padding-top: 10px; margin-bottom: 25px; } .c-heading-lv1__text{ font-size: 22px; line-height: 33px; padding-bottom: 10px; } .c-heading-lv1__icon{ width: 36px; height: 36px; } .c-heading-icon-power{ width: 36px; height: 36px; } .c-heading-icon-power::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-power::before{ top: 6px; } .c-heading-icon-user{ width: 36px; height: 36px; } .c-heading-icon-user::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-internet{ width: 36px; height: 36px; } .c-heading-icon-internet::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-internet::before{ top: 3px; } .c-heading-icon-parentalcontrols{ width: 36px; height: 36px; } .c-heading-icon-parentalcontrols::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-data{ width: 36px; height: 36px; } .c-heading-icon-data::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-data::before{ top: 3px; } .c-heading-icon-eshop{ width: 36px; height: 36px; } .c-heading-icon-eshop::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-controller{ width: 36px; height: 36px; } .c-heading-icon-controller::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-controller{ width: 36px; height: 36px; } .c-heading-icon-controller::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-friends{ width: 36px; height: 36px; } .c-heading-icon-friends::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-friends::before{ top: 3px; } .c-heading-icon-accessories{ width: 36px; height: 36px; } .c-heading-icon-accessories::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-accessories::before{ top: 4px; } .c-heading-icon-overseas{ width: 36px; height: 36px; } .c-heading-icon-overseas::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-overseas::before{ top: 3px; } .c-heading-icon-playmode{ width: 36px; height: 36px; } .c-heading-icon-playmode::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-playmode{ top: 2px; } .c-heading-icon-software{ width: 36px; height: 36px; } .c-heading-icon-software::before{ width: 36px; height: 36px; background-size: 36px; } .c-heading-icon-software{ top: 2px; } .c-heading-lv2{ margin-bottom: 20px; } .c-heading-lv2 .c-heading__text, .c-heading-lv2__text{ font-size: 20px; line-height: 30px; padding-bottom: 11px; } .c-heading-lv3{ font-size: 18px; line-height: 30px; margin-bottom: 15px; margin-top: -6px; } .c-heading-lv3 .c-heading__text, .c-heading-lv3__text{ padding-left: 12px; } .c-heading-lv3 .c-heading__text::before, .c-heading-lv3__text::before{ height: calc(100% - 6px * 2); top: 5px; } .c-heading-lv4{ font-size: 15px; line-height: 24px; } .c-heading-lv6--en{ font-size: 18px; } .c-heading-lv6--en::after{ content: ''; display: block; width: 24px; margin: 10px auto 15px auto; height: 3px; background: #e60012; } .c-text--l{ font-size: 16px; line-height: 26px; } .c-text, .c-list-text li, .c-list-block-link li{ font-size: 16px; line-height: 26px; } .c-list-text li, .c-list-block-link li{ margin-top: 0; } .c-note{ font-size: 14px; line-height: 21px; } .c-text--s, .c-note--s, .c-list-text--s li{ font-size: 14px; line-height: 26px; } .c-text--xs, .c-note--xs, .c-list-text--xs li{ font-size: 14px; line-height: 22px; } .c-text--xxs, .c-note--xxs, .c-list-text--xs li{ font-size: 10px; line-height: 15px; } .c-list-text li:not(.c-list-text--noicon){ padding-left: 11px; } .c-list-text li:not(.c-list-text--noicon)::before{ top: 12px; } .c-list-text--s li:not(.c-list-text--noicon){ padding-left: 10px; } .c-list-text--s li:not(.c-list-text--noicon)::before{ top: 11px; } .c-list-text{ padding-left: 0; } .c-list-text--s{ padding-left: 0; } .c-text .c-link-bold > i{ width: 16px; height: 16px; border-radius: 8px; } .c-text .c-link-bold > i::before{ background-size: 16px; width: 16px; height: 16px; } .c-text .c-link-bold > i{ margin: 0 5px 0 5px; } .c-text .c-link-sub > i{ width: 14px; height: 14px; border-radius: 7px; } .c-text .c-link-sub > i::before{ background-size: 14px; width: 14px; height: 14px; } .c-text .c-link-sub > i{ margin: 0 5px 0 5px; } .c-list-block-link a > i{ width: 16px; height: 16px; border-radius: 8px; } .c-list-block-link a > i::before{ background-size: 16px; width: 16px; height: 16px; } .c-list-block-link a > i{ margin: 0 5px 0 5px; } .c-text--s .c-link-bold > i{ width: 14px; height: 14px; border-radius: 7px; } .c-text--s .c-link-bold > i::before{ background-size: 14px; width: 14px; height: 14px; } .c-text--s .c-link-bold > i{ margin: 0 4px 0 4px; } .c-order-arrow{ margin: 10px auto; } .c-button__body{ padding: 12px 20px; font-size: 16px; line-height: 16px; } .c-button__icon{ width: 16px; height: 16px; border-radius: 8px; } .c-button__icon::before{ background-size: 16px; width: 16px; height: 16px; } .c-button__icon > i{ width: 16px; height: 16px; } .c-button__icon.arrow-left{ width: 16px; height: 16px; border-radius: 8px; } .c-button__icon.arrow-left::before{ background-size: 16px; width: 16px; height: 16px; } .c-button-s__body{ min-width: 70px; padding: 8px 10px; font-size: 14px; line-height: 16px; } .c-button-s__icon{ width: 14px; height: 14px; border-radius: 7px; } .c-button-s__icon::before{ background-size: 14px; width: 14px; height: 14px; } .c-button-s--gray .c-button-s__icon{ width: 14px; height: 14px; border-radius: 7px; } .c-button-s--gray .c-button-s__icon::before{ background-size: 14px; width: 14px; height: 14px; } .c-button-s__icon > i{ background-size: 14px; width: 14px; height: 14px; } .power-tab-block{ margin-bottom: 80px; } .power-tab-block__body{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; } .power-tab-block__body a{ height: 120px; } .power-tab-block__icon{ display: block; margin-right: auto; margin-left: auto; margin-bottom: 3px; } .power-tab-block__label{ display: block; text-align: center; font-size: 11px; line-height: 16px; } .playmode-tab-block{ margin-bottom: 80px; } .playmode-tab-block__body a{ height: 84px; } .playmode-tab-block__icon{ display: block; margin-right: auto; margin-left: auto; margin-bottom: 3px; } .playmode-tab-block__label{ display: block; text-align: center; } .playmode-tab-block__label em{ font-size: 11px; line-height: 16px; } .playmode-tab-block__label span{ font-size: 10px; line-height: 16px; } .menu-4tab-block{ margin-bottom: 55px; } .menu-4tab-block__body li{ width: 50%; margin-bottom: 15px; position: relative; } .menu-4tab-block__body li a{ margin-left: 15px; margin-right: 15px; padding-bottom: 15px; border-bottom: #e6e6e6 1px solid; } .menu-4tab-block__body li:nth-child(2n)::before{ content: ''; width: 1px; height: 60px; display: block; position: absolute; left: 0; top: 0; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: left top; background-size: 1px 4px; } .menu-4tab-block__body a{ height: 60px; } .menu-4tab-block__icon{ display: block; margin-right: auto; margin-left: auto; margin-top: 5px; } .menu-4tab-block__label{ font-size: 13px; line-height: 18px; } .menu-3tab-block{ margin-bottom: 30px; } .menu-3tab-block__body li a{ margin-right: 6px; margin-left: 6px; padding-bottom: 15px; border-bottom: #e6e6e6 1px solid; } .menu-3tab-block__body li:first-child a{ margin-left: 0px; } .menu-3tab-block__body li:last-child a{ margin-right: 0; } .menu-3tab-block__body li::before{ content: ''; width: 1px; height: 69px; display: block; position: absolute; left: 0; top: 0; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: left top; background-size: 1px 4px; } .menu-3tab-block__body li:first-child::before{ display: none; } .menu-3tab-block__body a{ height: 69px; } .menu-3tab-block__icon{ display: block; margin-right: auto; margin-left: auto; margin-top: 5px; } .menu-3tab-block__label{ font-size: 11px; line-height: 16px; } .c-youtube-button__body{ padding: 20px; } .c-youtube-button__text .c-text{ width: calc(100% - 90px); font-size: 16px; } .c-youtube-button__text .c-note--s{ width: calc(100% - 90px); line-height: 24px; } .c-youtube-button__img{ width: 70px; } .c-youtube-button__thumb img{ width: 70px; } .c-area{ padding: 20px; } .c-area--s{ padding: 7px 14px; } .c-area-border{ padding: 20px; } .c-area-border--s{ padding: 6px 13px; } .c-area-border-bold{ padding: 20px; } .c-area-border-bold--s{ padding: 6px 13px; } .c-table-heading-lv1{ font-size: 14px; line-height: 21px; } .c-table-heading-lv2{ font-size: 12px; line-height: 18px; } .c-table-heading-lv3{ font-size: 11px; line-height: 16px; } .c-table-text--l{ font-size: 14px; line-height: 28px; } .c-table-text{ font-size: 12px; line-height: 16px; } .c-table-note{ font-size: 11px; line-height: 15px; } .c-table-icon-note{ font-size: 9px; line-height: 9px; } .c-scroll-table__area{ width: 100%; overflow: hidden; } .c-scroll-table__body{ overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; } .c-scroll-table__body .c-table{ width: 760px; } .ncommon-search{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 20px; } .ncommon-search__title{ margin-bottom: 5px; } .ncommon-search__body{ display: block; } .ncommon-search__bt{ width: 62px; } .top-category-container{ margin-left: auto; margin-right: auto; padding-left: 7px; padding-right: 7px; margin-bottom: 30px; } .top-category-container:nth-child(1) { margin-bottom: 60px; } .faq-section{ margin-bottom: 30px; } .top-category-grid--2 .top-category-grid-col:nth-child(2n) .top-category__img{ margin-left: 7px; } .top-category-grid--2 .top-category-grid-col:nth-child(2n + 1) .top-category__img{ margin-right: 7px; } .top-category__item--switch .top-category__logo{ width: 48px; margin: 0 auto; } .top-category__item--3ds .top-category__logo, .top-category__item--game_watch .top-category__logo { width: 124px; margin: 0 auto; } .top-category__item--wiiu .top-category__logo{ width: 52px; margin: 0 auto; } .top-category__item--clv .top-category__logo{ width: 120px; margin: 0 auto; position: relative; z-index: 2; } .top-category__item--3ds .top-category__img{ margin-top: 10px; } .top-category__item--game_watch .top-category__img { margin-top: 10px; } .top-category__item--wiiu .top-category__img{ margin-top: 10px; } .top-category__item--clv .top-category__img{ margin-top: -8px; } .top-category__item--app .top-category__img{ margin-top: -8px; } .top-category__item--app{ padding-top: 28px; } .top-category__label i{ width: 12px; height: 12px; border-radius: 6px; } .top-category__label i::before{ background-size: 12px; width: 12px; height: 12px; } .top-category__item--clv .top-category__label{ margin-top: 5px; } .top-category__item--app .top-category__label{ margin-top: 5px; } .top-category__label-text{ font-size: 10px; line-height: 14px; display: block; } .top-info-header__button{ font-size: 14px; line-height: 14px; padding: 6px 10px; } .top-info-header__icon{ width: 14px; height: 14px; border-radius: 7px; } .top-info-header__icon::before{ background-size: 14px; width: 14px; height: 14px; } .top-info__body{ margin: 0 auto; padding-left: 14px; padding-right: 14px; } .top-info__item a{ font-size: 14px; line-height: 28px; padding-left: 24px; } .top-info__icon{ width: 14px; height: 14px; border-radius: 7px; } .top-info__icon::before{ background-size: 14px; width: 14px; height: 14px; } .top-info__icon{ top: 7px; } .top-bottom-link-section{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; } .top-bottom-link__body{ margin: 0 auto; padding-left: 14px; padding-right: 14px; } .top-bottom-link__item{ margin-top: 8px; } .top-bottom-link__icon{ width: 14px; height: 14px; border-radius: 7px; } .top-bottom-link__icon::before{ background-size: 14px; width: 14px; height: 14px; } .top-bottom-link__icon{ top: 2px; } .top-bottom-link__item a{ font-size: 12px; line-height: 18px; padding-left: 19px; } .top-tab-block__body li{ width: 50%; float: left; margin-bottom: 15px; text-align: center; } .top-tab-block__body li:nth-child(2n){ clear: right; position: relative; } .top-tab-block__body li:nth-child(2n)::before{ content: ''; width: 1px; height: 100px; display: block; position: absolute; left: 0; top: 0; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: left top; background-size: 1px 4px; } .top-tab-block__body li a{ display: block; margin-right: 7px; border-bottom: #b4b4b4 1px solid; padding-bottom: 14px; } .top-tab-block__body li:nth-child(2n) a{ margin-left: 7px; margin-right: 0; } .top-tab-block__body li:nth-child(2n + 1) a{ margin-right: 7px; margin-left: 0; } .top-tab-block__icon{ display: block; margin-right: auto; margin-left: auto; margin-bottom: 3px; } .top-tab-block__label i{ width: 12px; height: 12px; border-radius: 6px; } .top-tab-block__label i::before{ background-size: 12px; width: 12px; height: 12px; } .top-tab-block__label{ height: 36px; display: table-cell; vertical-align: middle; } .top-tab-block__label-text{ font-size: 10px; line-height: 14px; display: block; } .how-to-section-lead{ margin-bottom: 50px; } .how-to-section-button__body{ padding: 12px 36px; font-size: 16px; line-height: 16px; } .how-to-section-button__icon{ width: 16px; height: 16px; border-radius: 8px; } .how-to-section-button__icon::before{ background-size: 16px; width: 16px; height: 16px; } .how-to-section-button__icon > i{ width: 16px; height: 16px; } .faq-section-list{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 20px; } .faq-section-list-item__title{ font-size: 14px; line-height: 28px; padding-left: 18px; } .faq-section-list-item__icon{ width: 14px; height: 14px; border-radius: 7px; } .faq-section-list-item__icon::before{ background-size: 14px; width: 14px; height: 14px; } .faq-section-list-item__icon{ top: 7px; } .faq-section-list-item__title{ font-size: 14px; line-height: 28px; margin-bottom: 5px; } .faq-section-list-item__text{ font-size: 16px; line-height: 28px; } .faq-section-list-more{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 60px; } .faq-section-utility{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 30px; } .faq-section-utility__icon{ width: 80px; height: 80px; border-radius: 4px; position: relative; } .faq-section-utility__icon.faq-section-utility__icon--account, .faq-section-utility__icon.faq-section-utility__icon--nso, .faq-section-utility__icon.faq-section-utility__icon--mnp { display: block; margin: 0 auto 10px auto; background: #e00012;} .faq-section-utility__icon::before{ content: ''; width: 70px; height: 70px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .faq-section-utility__icon--point::before{ background: url("../img/switch/point.png") 50% 50% no-repeat; background-size: 70px; } .faq-section-utility__icon--gift::before{ background: url("../img/switch/gift.png") 50% 50% no-repeat; background-size: 70px; } .faq-section-utility__icon--point_number::before{ background: url("../img/switch/point_number.png") 50% 50% no-repeat; background-size: 70px; } .faq-section-utility__icon--download::before{ background: url("../img/switch/download.png") 50% 50% no-repeat; background-size: 70px; } .faq-section-utility__icon--parents::before{ background: url("../img/switch/top-parents.svg") 50% 50% no-repeat; background-size: 70px; } .faq-section-utility__icon--repair::before{ background: url("../img/switch/top-repair.svg") 50% 50% no-repeat; background-size: 70px; } .faq-section-utility__icon--inquiry::before{ background: url("../img/switch/top-inquiry.svg") 50% 50% no-repeat; background-size: 70px; } .faq-section-utility__label{ font-size: 10px; line-height: 16px; } .faq-section-utility__partstext a{ font-weight: normal; } .top-header__body{ height: 86px; } .top-header__body::before{ padding-top: 90%; } .top-header-heading{ top: 30px; } .top-header-heading__text{ font-size: 26px; line-height: 32px; } .top-header-network-info{ display: none; position: absolute; width: 100%; left: 0; bottom: 10px; } .top-hero__img::before{ padding-top: 90%; } .top-hero-heading{ top: 5.5%; } .top-hero-heading__text{ font-size: 26px; line-height: 32px; } .top-hero-network-info{ position: absolute; width: 100%; left: 0; bottom: 10px; } .how-to-section{ margin-top: -40px; margin-bottom: 80px; } .faq-section{ margin-bottom: 30px; } .top-info-header__button{ font-size: 14px; line-height: 14px; padding: 6px 10px; } .top-info-header__icon{ width: 14px; height: 14px; border-radius: 7px; } .top-info-header__icon::before{ background-size: 14px; width: 14px; height: 14px; } .top-info__body{ margin: 0 auto; padding-left: 14px; padding-right: 14px; } .top-info__item a{ font-size: 14px; line-height: 28px; padding-left: 24px; } .top-info__icon{ width: 14px; height: 14px; border-radius: 7px; } .top-info__icon::before{ background-size: 14px; width: 14px; height: 14px; } .top-info__icon{ top: 7px; } .top-bottom-link__body{ margin: 0 auto; padding-left: 14px; padding-right: 14px; } .top-bottom-link__item{ margin-top: 15px; } .top-bottom-link__item:nth-child(1){ margin-top: 0; } .top-bottom-link__icon{ width: 14px; height: 14px; border-radius: 7px; } .top-bottom-link__icon::before{ background-size: 14px; width: 14px; height: 14px; } .top-bottom-link__icon{ top: 2px; } .top-bottom-link__item a{ font-size: 12px; line-height: 18px; padding-left: 19px; } .top-tab-block__body li{ width: 50%; float: left; margin-bottom: 15px; text-align: center; } .top-tab-block__body li:nth-child(2n){ clear: right; position: relative; } .top-tab-block__body li:nth-child(2n)::before{ content: ''; width: 1px; height: 100px; display: block; position: absolute; left: 0; top: 0; background-image: -webkit-linear-gradient(top, #999, #999 1px, transparent 1px, transparent 3px); background-image: linear-gradient(to bottom, #999, #999 1px, transparent 1px, transparent 3px); background-repeat: repeat-y; background-position: left top; background-size: 1px 4px; } .top-tab-block__body li a{ display: block; margin-right: 7px; border-bottom: #b4b4b4 1px solid; padding-bottom: 14px; } .top-tab-block__body li:nth-child(2n) a{ margin-left: 7px; margin-right: 0; } .top-tab-block__body li:nth-child(2n + 1) a{ margin-right: 7px; margin-left: 0; } .top-tab-block__icon{ display: block; margin-right: auto; margin-left: auto; margin-bottom: 3px; } .top-tab-block__label i{ width: 12px; height: 12px; border-radius: 6px; } .top-tab-block__label i::before{ background-size: 12px; width: 12px; height: 12px; } .top-tab-block__label{ height: 36px; display: table-cell; vertical-align: middle; } .top-tab-block__label-text{ font-size: 10px; line-height: 14px; display: block; } .how-to-section-lead{ margin-bottom: 50px; } .how-to-section-button__body{ padding: 12px 36px; font-size: 16px; line-height: 16px; } .how-to-section-button__icon{ width: 16px; height: 16px; border-radius: 8px; } .how-to-section-button__icon::before{ background-size: 16px; width: 16px; height: 16px; } .how-to-section-button__icon > i{ width: 16px; height: 16px; } .faq-section-list{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 20px; } .faq-section-list-item__title{ font-size: 14px; line-height: 28px; padding-left: 18px; } .faq-section-list-item__icon{ width: 14px; height: 14px; border-radius: 7px; } .faq-section-list-item__icon::before{ background-size: 14px; width: 14px; height: 14px; } .faq-section-list-item__icon{ top: 7px; } .faq-section-list-item__title{ font-size: 14px; line-height: 28px; margin-bottom: 5px; } .faq-section-list-item__text{ font-size: 16px; line-height: 28px; } .faq-section-list-more{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 60px; } .faq-section-utility{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 30px; } .faq-section-utility__icon{ width: 100px; height: 100px; border-radius: 4px; position: relative; } .faq-section-utility__icon::before{ content: ''; width: 80px; height: 80px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .faq-section-utility__icon--errorcode::before{ background: url("../img/switch/top-errorcode.svg") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--chart::before{ background: url("../img/switch/top-chart.svg") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--repair::before{ background: url("../img/switch/top-repair.svg") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--inquiry::before{ background: url("../img/switch/top-inquiry.svg") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__label{ font-size: 12px; line-height: 28px; } .faq-section-utility__partstext a{ font-weight: normal; } .supportInfo-block{ position: absolute; top: 30%; } .supportInfo-important-red, .supportInfo-important-gray, .supportInfo-important{ display: table; table-layout: fixed; border-radius: 6px; margin: 0 14px 20px 14px; box-sizing: border-box; } .supportInfo-important-red dt, .supportInfo-important-gray dt, .supportInfo-important dt{ font-size: 12px; line-height: 18px; vertical-align: middle; padding: 6px 0; } .supportInfo-important-red dd, .supportInfo-important-gray dd, .supportInfo-important dd{ font-size: 14px; line-height: 21px; padding: 0 3px 3px 3px; } .supportInfo-important-red dd ul, .supportInfo-important-gray dd ul, .supportInfo-important dd ul{ background: #FFF; border-radius: 0 0 4px 4px; padding: 10px 14px; } .text-supportCat-last{ font-size: 16px; line-height: 24px; } .top-footer-link__body{ margin: 0 auto; padding-left: 14px; padding-right: 14px; } .l-container{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 80px; } .top-footer-link-section{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 20px; } .top-footer-link__item{ margin-top: 15px; } .top-footer-link__icon{ width: 14px; height: 14px; border-radius: 7px; } .top-footer-link__icon::before{ background-size: 14px; width: 14px; height: 14px; } .top-footer-link__icon{ top: 2px; } .top-footer-link__item a{ font-size: 12px; line-height: 18px; padding-left: 19px; } .faq-section-list{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 20px; } .faq-section-list-item__title{ font-size: 14px; line-height: 28px; padding-left: 18px; } .faq-section-list-item__icon{ width: 14px; height: 14px; border-radius: 7px; } .faq-section-list-item__icon::before{ background-size: 14px; width: 14px; height: 14px; } .faq-section-list-item__icon{ top: 7px; } .faq-section-list-item__title{ font-size: 14px; line-height: 28px; margin-bottom: 5px; } .faq-section-list-item__text{ font-size: 16px; line-height: 28px; } .faq-section-list-more{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 60px; } .faq-section-utility{ margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; margin-bottom: 30px; } .faq-section-utility__icon{ width: 100px; height: 100px; border-radius: 4px; position: relative; } .faq-section-utility__icon::before{ content: ''; width: 80px; height: 80px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .faq-section-utility__icon--point::before{ background: url("../img/switch/point.png") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--gift::before{ background: url("../img/switch/gift.png") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--point_number::before{ background: url("../img/switch/point_number.png") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--download::before{ background: url("../img/switch/download.png") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--parents::before{ background: url("../img/switch/top-parents.svg") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--account::before{ background: url("../img/switch/top-account.svg") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--repair::before{ background: url("../img/switch/top-repair.svg") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--inquiry::before{ background: url("../img/switch/top-inquiry.svg") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--buy::before{ background: url("../img/switch/top-buy.svg") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--mnp::before{ background: url("../img/switch/top-mnp.png") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__icon--nso::before{ background: url("../../../switch/img/index/switch-online.svg") 50% 50% no-repeat; background-size: 80px; } .faq-section-utility__label{ font-size: 12px; line-height: 18px; } .faq-section-utility__label-note{ display: inline-block; font-weight: normal; font-size: 11px; line-height: 18px; } .faq-section-utility__partstext a{ font-weight: normal; } .faq-section-utility { margin-top: 80px; } .wide-care-section { margin-bottom: 60px; border-top: #e6e6e6 1px solid; border-bottom: #e6e6e6 1px solid; text-align: center; } .tw-section , .wide-care { width: 74.67%; margin: 30px auto; } .tw-btn img , .wide-care-btn img { width: 100%; } } @media all and (min-width: 375px) and (max-width: 759px){ body{ /**/ } } @media all and (max-width: 374px){ body{ /**/ } } @media all and (-ms-high-contrast: none){ .c-heading-lv1__text{ padding-bottom: 11px; } .c-heading-lv1__icon{ vertical-align: -5px; } .c-heading-lv2 .c-heading__text, .c-heading-lv2__text{ line-height: 40px; } .c-heading-lv3{ line-height: 50px; } .c-heading-lv3 .c-heading__text::before, .c-heading-lv3__text::before{ top: 10px; height: calc(100% - 14px * 2); } .c-list-text li:not(.c-list-text--noicon)::before{ top: 11px; } .c-list-text--s li:not(.c-list-text--noicon)::before{ top: 10px; } .c-button__body{ padding: 14px 50px 10px 50px; } .c-button-s__body{ padding: 7px 25px 5px 25px; } .how-to-section-button__body{ padding: 14px 120px 10px 120px; } .how-to-section-button__body{ padding: 14px 120px 10px 120px; } }