/* CSS Document */ @-ms-viewport { width: device-width; } .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media print, screen and (min-width: 769px) { .scanner_special { font-feature-settings: "palt" 1; -webkit-font-kerning: none; font-kerning: none; } .scanner_special img { max-width: 100%; height: auto; vertical-align: middle; } .scanner_special .sp_item { display: none; } .scanner_special .mv h3 { text-align: center; margin-top: 30px; } .scanner_special .mv p { margin-top: 40px; text-align: center; } .scanner_special .mv ul { text-align: center; margin-top: 38px; } .scanner_special .mv ul li { display: inline-block; vertical-align: top; margin-left: 15px; margin-right: 15px; } .scanner_special .user { margin-top: 63px; } .scanner_special .user div.user_inner { max-width: 996px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .scanner_special .user .user_head { background-repeat: no-repeat; } .scanner_special .user .user_head .user_inner div { text-align: center; width: 50%; } .scanner_special .user .user_head .user_left { padding-left: 62px; padding-right: 62px; } .scanner_special .user .user_head h6 { margin-top: 14px; } .scanner_special .user .user_long { text-align: center; padding-top: 22px; padding-bottom: 43px; background-color: #0D2EA0; } .scanner_special .user .user_left_img { max-width: 996px; margin-right: auto; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .scanner_special .user .user_left_img div { width: 50%; } .scanner_special .user .user_left_img_txt { padding-left: 30px; text-align:center; font-size:28px; line-height:1.53; color:#fff; font-weight:700; } .scanner_special .user .user_right_img { max-width: 996px; margin-right: auto; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .scanner_special .user .user_right_img div { width: 50%; } .scanner_special .user .user_right_img_txt { padding-right: 30px; text-align:center; font-size:28px; line-height:1.53; color:#fff; font-weight:700; } .scanner_special .user .user_movie { text-align: center; max-width: 655px; margin-left: auto; margin-right: auto; } .scanner_special .user .user_movie .movie_wrap { width: 100%; margin-left: auto; margin-right: auto; margin-top: 20px; padding-top: 56.25%; position: relative; } .scanner_special .user .user_movie .movie_wrap iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .scanner_special .user01 .user_head { background: url("../img/left_bg.png"), url("../img/right_bg.png"), linear-gradient(to right, #0050FF 0%, #00C8FF 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-size: 30%, 30%, cover; background-position: left, right, center; } .scanner_special .user01 .user_bottom { background: url("../img/left_bg.png"), url("../img/right_bg.png"), linear-gradient(to right, #0050FF 0%, #00C8FF 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-size: 30%, 30%, cover; background-position: left, right, center; } .scanner_special .user02 .user_head { background: url("../img/left_bg.png"), url("../img/right_bg.png"), linear-gradient(to right, #64FF00 0%, #03A300 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-size: 30%, 30%, cover; background-position: left, right, center; } .scanner_special .user02 .user_bottom { background: url("../img/left_bg.png"), url("../img/right_bg.png"), linear-gradient(to right, #64FF00 0%, #00A000 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-size: 30%, 30%, cover; background-position: left, right, center; } .scanner_special .what { background: url("../img/left_bg.png"), url("../img/right_bg.png"), linear-gradient(to right, #ff80ff 0%, #ff0064 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-size: 34%, 34%, cover; background-position: left, right, center; text-align: center; margin-top: 175px; padding-bottom: 35px; } .scanner_special .what h3 { position: relative; top: -108px; margin-bottom: -108px; } .scanner_special .what h6 { margin-top: 20px; } .scanner_special .what ul { max-width: 996px; margin-left: auto; margin-right: auto; margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .scanner_special .what ul li { width: 23%; } .scanner_special .recommend { text-align: center; padding-top: 35px; padding-bottom: 68px; } .scanner_special .recommend h6 { margin-top: 40px; margin-bottom: 18px; } .scanner_special .point h5 { background-color: #0D2EA0; padding-top: 15px; padding-bottom: 15px; } .scanner_special .point h5 span { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; max-width: 812px; margin-left: auto; margin-right: auto; } .scanner_special .point h5 i { margin-right: 28px; } .scanner_special .point .point_txt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; max-width: 812px; margin-left: auto; margin-right: auto; margin-top: 54px; margin-bottom: 54px; } .scanner_special .point .point_txt_box { width: 60%; } .scanner_special .point .point_txt_box h6 { font-size: 18px; color: #0D2EA0; margin-bottom: 0.8em; line-height: 1.8; font-weight: 500; letter-spacing: 0.03em; } .scanner_special .point .point_txt_box p,.note-tex { font-size: 10px; line-height: 1.4; word-break: break-all; letter-spacing: 0.03em; } .note-tex { text-align: left; margin-top: 1%; font-size: 12px; } .scanner_special .point .point_txt img { width: 34%; } .scanner_special .lp_foot { margin-bottom: 70px; } .scanner_special .lp_foot .more_btn { text-align: center; max-width: 486px; margin-left: auto; margin-right: auto; } .scanner_special .lp_foot .more_btn a { display: block; background-color: #C1C1C1; padding-bottom: 1.3em; padding-top: 1.4em; font-size: 16px; letter-spacing: 0.025em; } .scanner_special .lp_foot h6 { text-align: center; font-size: 18px; letter-spacing: 0.025em; font-weight: 500; margin-top: 50px; } .scanner_special .lp_foot ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; max-width: 996px; margin-left: auto; margin-right: auto; margin-top: 20px; } .scanner_special .lp_foot ul li { width: 48%; } } @media (min-width: 769px) { .hidden-md { display: none !important; } } @media only screen and (max-width: 768px) { .scanner_special { width: 100%; font-feature-settings: "palt" 1; -webkit-font-kerning: none; font-kerning: none; } .scanner_special .pc_item { display: none; } .scanner_special .mv h3 { text-align: center; margin-top: 20px; } .scanner_special .mv p { margin-top: 20px; text-align: center; } .scanner_special .mv ul { display: none; } .scanner_special .user { margin-top: 20px; } .scanner_special .user div.user_inner { max-width: 996px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .scanner_special .user .user_head { background-repeat: no-repeat; } .scanner_special .user .user_head .user_inner div { text-align: center; width: 50%; } .scanner_special .user .user_head .user_left { padding-left: 6vw; padding-right: 6vw; } .scanner_special .user .user_head h6 { margin-top: 14px; } .scanner_special .user .user_long { text-align: center; padding: 2% 8% 4%; background-color: #0D2EA0; } .scanner_special .user .user_left_img { max-width: 996px; margin-right: auto; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .scanner_special .user .user_left_img div { width: 50%; } .scanner_special .user .user_left_img_txt { padding-right: 0%; padding-left: 0%; font-size:2.9vw; text-align:center; color:#fff; font-weight:700; } .scanner_special .user .user_right_img { max-width: 996px; margin-right: auto; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .scanner_special .user .user_right_img div { width: 50%; } .scanner_special .user .user_right_img_txt { padding-right: 0%; padding-left: 0%; font-size:2.9vw; text-align:center; color:#fff; font-weight:700; } .scanner_special .user .user_movie { text-align: center; max-width: 655px; margin-left: auto; margin-right: auto; width: 65%; } .scanner_special .user .user_movie .movie_wrap { width: 100%; margin-left: auto; margin-right: auto; margin-top: 10px; padding-top: 56.25%; position: relative; } .scanner_special .user .user_movie .movie_wrap h6 { width: 32%; margin-left: auto; margin-right: auto; } .scanner_special .user .user_movie .movie_wrap iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; } .scanner_special .user01 .user_head { background: url("../img/left_bg.png"), url("../img/right_bg.png"), linear-gradient(to right, #0050FF 0%, #00C8FF 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-size: 40%, 40%, cover; background-position: left, right, center; } .scanner_special .user01 .user_bottom { background: url("../img/left_bg.png"), url("../img/right_bg.png"), linear-gradient(to right, #0050FF 0%, #00C8FF 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-size: 40%, 40%, cover; background-position: left, right, center; } .scanner_special .user02 .user_head { background: url("../img/left_bg.png"), url("../img/right_bg.png"), linear-gradient(to right, #AAFF00 0%, #00AA00 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-size: 40%, 40%, cover; background-position: left, right, center; } .scanner_special .user02 .user_bottom { background: url("../img/left_bg.png"), url("../img/right_bg.png"), linear-gradient(to right, #64FF00 0%, #03A300 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-size: 40%, 40%, cover; background-position: left, right, center; } .scanner_special .what { background: url("../img/left_bg.png"), url("../img/right_bg.png"), linear-gradient(to right, #ff80ff 0%, #ff0064 100%); background-repeat: repeat-y, repeat-y, no-repeat; background-size: 40%, 40%, cover; background-position: left, right, center; text-align: center; margin-top: 30px; padding: 8% 12%; } .scanner_special .what h3 { position: relative; } .scanner_special .what h6 { margin-top: 20px; } .scanner_special .what ul { max-width: 996px; margin-left: auto; margin-right: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .scanner_special .what ul li { width: 46%; margin-top: 20px; } .scanner_special .recommend { text-align: center; padding: 8% 12%; } .scanner_special .recommend h3 { width: 60%; margin-left: auto; margin-right: auto; } .scanner_special .recommend h6 { margin-top: 20px; margin-bottom: 20px; } .scanner_special .point h5 { background-color: #0D2EA0; padding-top: 15px; padding-bottom: 15px; } .scanner_special .point h5 span { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; max-width: 812px; margin-left: auto; margin-right: auto; padding-left: 4%; padding-right: 4%; } .scanner_special .point h5 span > img { width: 66%; } .scanner_special .point h5 i { width: 18%; margin-right: 3%; } .scanner_special .point .point_txt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; flex-direction: column-reverse; max-width: 812px; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 55px; padding-left: 10%; padding-right: 10%; } .scanner_special .point .point_txt:last-of-type { margin-bottom: 30px; } .scanner_special .point .point_txt_box { width: 100%; } .scanner_special .point .point_txt_box h6 { font-size: 13px; color: #0D2EA0; margin-bottom: 0.8em; line-height: 1.8; font-weight: 500; letter-spacing: 0.03em; } .scanner_special .point .point_txt_box p { font-size: 8px; line-height: 1.4; word-break: break-all; letter-spacing: 0.03em; } .note-tex { text-align: left; margin-top: 3%; font-size: 12px; } .scanner_special .point .point_txt img { width: 60%; margin-left: auto; margin-right: auto; display: block; margin-bottom: 20px; } .scanner_special .lp_foot { margin-bottom: 40px; padding-left: 12%; padding-right: 12%; } .scanner_special .lp_foot .more_btn { text-align: center; max-width: 486px; margin-left: auto; margin-right: auto; } .scanner_special .lp_foot .more_btn a { display: block; background-color: #C1C1C1; padding-bottom: 1.3em; padding-top: 1.4em; font-size: 12px; letter-spacing: 0.025em; } .scanner_special .lp_foot h6 { text-align: center; font-size: 14px; letter-spacing: 0.025em; font-weight: 500; margin-top: 30px; } .scanner_special .lp_foot ul { display: block; max-width: 996px; margin-left: auto; margin-right: auto; } .scanner_special .lp_foot ul li { width: 100%; margin-top: 10px; } } @media (max-width: 420px) { .hidden-xs { display: none !important; } } @media (min-width: 420px) and (max-width: 768px) { .hidden-sm { display: none !important; } } /*202303追記*/ .denshi-bnr{ max-width: 996px; margin-left: auto; margin-right: auto; margin-top: 70px; } @media (max-width: 420px) { .denshi-bnr{ margin-top: 8vw; } } /*202303追記ここまで*/