@charset "UTF-8"; body { background: #fff; color: #333; font-family:"Meiryo", "メイリオ", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif; font-size: 14px; line-height: 1.7; word-break: break-all; } img { line-height: 1; vertical-align: top; } a { color: #333; text-decoration: none; } a:hover, a:focus { opacity: 0.6; } input, textarea { font-size: 100%; } .st-siteHeader { height: 60px; position: relative; } .st-siteHeader_2 { height: 50px; position: relative; border-bottom: solid 1px #d2d4d9; } @media screen and (max-width: 1024px) { .st-siteHeader_2 { display: none; } } .st-blueBar { color: #fff; background: #0d2ea1; padding: 0 35px; position: relative; height: 100%; } .st-blueBar a { color: #fff; } .st-blueBar_inner { height: 100%; display: flex; align-items: center; margin: 0 auto; } .st-blueBar_logo { margin: 0 auto 0 -10px; flex: 0 0 auto; padding-right: 30px; } .st-blueBar_logo a { display: block; padding: 12px 10px 9px; } .st-blueBar_logo a:hover, .st-blueBar_logo a:focus { opacity: 1; } .st-blueBar_logo img { display: block; width: 102px; height: 39px; } .st-blueBar_menu { border: none; margin: 0; padding: 0; background: transparent; display: none; flex: 0 0 auto; position: relative; width: 49px; height: 60px; color: #fff; outline: none; margin-right: -11px; } .st-blueBar_menu span { content: ""; display: block; width: 27px; height: 3px; position: absolute; top: 50%; left: 11px; margin-top: -1px; background: #fff; transition-property: transform; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .st-blueBar_menu span:before, .st-blueBar_menu span:after { content: ""; display: block; width: 100%; height: 3px; position: absolute; background: #fff; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } .st-blueBar_menu span:before { top: -10px; transition: top 0.1s 0.14s ease, opacity 0.1s ease; } .st-blueBar_menu span:after { bottom: -10px; transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .st-blueBar_menu.is-active:after { content: ""; display: block; position: absolute; width: 0; border: solid 10px transparent; border-bottom-color: #fff; bottom: 0; left: 15px; } .st-blueBar_menu.is-active span { width: 34px; left: 8px; transform: rotate(45deg); transition-delay: 0.14s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .st-blueBar_menu.is-active span:before { top: 0; opacity: 0; transition: top 0.1s ease, opacity 0.1s 0.14s ease; } .st-blueBar_menu.is-active span:after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); } .st-blueBar_search { border: none; margin: 0; padding: 0; background: transparent; display: none; flex: 0 0 auto; position: relative; width: 44px; height: 60px; color: #fff; outline: none; } .st-blueBar_search img { width: 22px; height: 22px; vertical-align: middle; } .st-blueBar_search.is-active:after { content: ""; display: block; position: absolute; width: 0; border: solid 10px transparent; border-bottom-color: #fff; bottom: 0; left: 13px; } .st-blueBar_search.is-active img { opacity: 0.6; } @media screen and (max-width: 1024px) { .st-blueBar_inner { justify-content: space-between; max-width: none; min-width: 0; } .st-blueBar_menu, .st-blueBar_search { display: block; } html.no-js .st-blueBar_menu, html.no-js .st-blueBar_search { display: none; } } .st-blueBar_2 { padding: 0 35px; position: relative; height: 100%; } .st-globalNav { display: flex; flex: 0 0 auto; } .st-globalNav .st-globalNav_category { list-style: none; margin: 0; padding: 0; display: flex; flex: 1 1 auto; margin: 2px 0 0 0; } .st-globalNav .st-globalNav_category:after { content: ""; display: block; clear: both; } .st-globalNav .st-globalNav_category li { margin-left: 5px; font-size: 14px; } .st-globalNav .st-globalNav_category .nav-font { margin-left: 5px; font-size: 16px; } .st-globalNav .st-globalNav_category a { display: block; padding: 6px 10px 4px; } .st-globalNav .st-globalNav_category a:after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; margin-left: 7px; box-sizing: border-box; width: 4px; height: 4px; border: 4px solid transparent; border-top-color: #9eabd9; vertical-align: -1px; } html.no-js .st-globalNav .st-globalNav_category a:after { content: normal; } .st-globalNav .st-globalNav_category a.is-active:after { border-top-color: transparent; border-bottom-color: #9eabd9; vertical-align: 5px; } .st-globalNav_utility { list-style: none; margin: 0; padding: 0; display: flex; flex: 0 0 auto; align-items: center; } .st-globalNav_category + .st-globalNav_utility { margin-left: 7px; } .st-globalNav_utility li { margin-left: 6px; } .st-globalNav_utility li:first-child { margin-left: 7px; } .st-globalNav_utility a { display: block; padding: 5px; } .st-globalNav_utility img { display: block; padding-bottom: 4px; } .st-globalNav_search { border: none; margin: 0; padding: 0; background: transparent; display: block; padding: 5px; cursor: pointer; } .st-globalNav_search_s { border: none; margin: 0; padding: 0; background: transparent; display: block; padding: 5px; cursor: pointer; } .st-globalNav_search_s:hover { opacity: 0.6; } .no-js .st-globalNav_search_s { display: none; } .globalnav-search-pc { display: flex; align-items: center; margin-right: 3px; } .globalnav-search-pc span { color: #fff; font-size: 14px; margin-left: 1px; } .st-globalNav_search:hover { opacity: 0.6; } .no-js .st-globalNav_search { display: none; } @media screen and (max-width: 1024px) { .st-globalNav { display: none; } } .st-megaMenu { position: relative; z-index: 1000; display: block; } .st-megaMenu_backdrop { position: absolute; right: 0; left: 0; visibility: hidden; height: 0; background-color: #fff; border-bottom: 3px solid #0d2ea1; transition: 0.15s ease-out; transition-property: visibility, opacity, height, background-color, border-bottom-width; border-top: solid 1px #bfbfbf; } .st-megaMenu_backdrop.st-megaMenu_backdrop-search { background-color: #d9d9d9; border-bottom-width: 0; } .st-megaMenu_category { position: absolute; right: 0; left: 0; display: none; /*overflow: hidden; marsカスタムエレメント化対応のため削除*/ width: 1072px; margin: 0 auto; transition: 0.1ms ease-out; /*marsカスタムエレメント化対応のため0.15sから0.1msに修正*/ transition-property: opacity, height; } @media screen and (max-width: 1092px) { .st-megaMenu_category { width: 100%; } } .st-megaMenu_categoryInner { /*overflow: hidden; marsカスタムエレメント化対応のため削除*/ padding: 28px 30px 40px; } .st-megaMenu_close { border: none; margin: 0; padding: 0; background: transparent; position: absolute; top: 20px; right: 0; width: 45px; height: 45px; } .st-megaMenu_close:before, .st-megaMenu_close:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; width: 35.35px; height: 0; margin: auto; border-top: 1px solid #000; } .st-megaMenu_close:before { transform: rotate(45deg); } .st-megaMenu_close:after { transform: rotate(-45deg); } .st-megaMenu_close span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .st-megaMenu_title { margin: 0 0 0 -16px; font-size: 20px; line-height: 30px; font-weight: bold; display: block; } .st-megaMenu_title a:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); margin-top: -0.25em; margin-right: 13px; margin-left: -7px; } .st-megaMenu_sectionRow { margin-left: -40px; } .st-megaMenu_sectionRow:after { content: ""; display: block; clear: both; } .st-megaMenu_section { float: left; box-sizing: border-box; width: 50%; padding-left: 40px; } .st-megaMenu_sectionTitle { margin: 0; padding: 18px 0 6px; border-bottom: 1px solid #bfbfbf; font-size: 16px; line-height: 20px; font-weight: normal; display: block; } .st-megaMenu_sectionTitle ~ .st-megaMenu_sectionTitle { padding-top: 44px; } .st-megaMenu_imgLinkList { list-style: none; margin: 0; padding: 0; margin-top: 19px; margin-left: -20px; font-size: 0; } .st-megaMenu_imgLinkList li { display: inline-block; box-sizing: border-box; width: 50%; padding-left: 20px; vertical-align: top; font-size: 14px; } .st-megaMenu_imgLinkList a { display: block; } .st-megaMenu_imgLinkList img { display: block; width: 233px; height: 100px; } .st-megaMenu_imgLinkList span { display: block; margin-top: 10px; margin-left: 16px; font-size: 14px; line-height: 24px; } .st-megaMenu_imgLinkList span:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); margin-top: -0.25em; margin-right: 11px; margin-left: -18px; } .st-megaMenu_linkList { list-style: none; margin: 0; padding: 0; margin-top: 8px; margin-left: -20px; font-size: 0; } .st-megaMenu_imgLinkList + .st-megaMenu_linkList { margin-top: 15px; } .st-megaMenu_linkList li { display: inline-block; margin-top: 16px; vertical-align: top; box-sizing: border-box; width: 25%; padding-left: 20px; font-size: 14px; line-height: 24px; } .st-megaMenu_section .st-megaMenu_linkList li { width: 50%; } .st-megaMenu_linkList a { position: relative; display: inline-block; margin-left: 16px; } .st-megaMenu_linkList a:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); margin-top: -0.25em; margin-right: 11px; margin-left: -18px; } .st-megaMenu_small { display: block; margin-left: 26px; font-size: 10px; } .st-megaMenu_separator { margin: 21px 0 0; height: 1px; border: 0; background-color: #bfbfbf; } .st-megaMenu_important { position: absolute; top: -2px; left: -23px; width: 20px; height: 20px; } .st-megaMenu_searchLabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .st-megaMenu .st-megaMenu_searchInput { display: block; box-sizing: border-box; width: 100%; height: 41px; padding: 5px 45px 5px 5px; border: none; background-color: #fff; font-size: 16px; line-height: 31px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .st-megaMenu_searchButton { border: none; margin: 0; padding: 0; background: transparent; position: absolute; top: 28px; right: 30px; padding: 9px; } .st-megaMenu_searchButton img { display: block; width: 23px; height: 23px; } @media screen and (max-width: 1024px) { .st-megaMenu { display: none; } } .st-megaMenu_s { position: relative; z-index: 1000; display: block; } .st-megaMenu_backdrop_s { position: absolute; right: 0; left: 0; visibility: hidden; height: 0; background-color: #fff; border-bottom: 3px solid #0d2ea1; transition: 0.15s ease-out; transition-property: visibility, opacity, height, background-color, border-bottom-width; border-top: solid 1px #bfbfbf; } .st-megaMenu_backdrop_s.st-megaMenu_backdrop-search { background-color: #d9d9d9; border-bottom-width: 0; } .st-megaMenu_category_s { position: absolute; right: 0; left: 0; display: none; /*overflow: hidden; marsカスタムエレメント化対応のため削除*/ max-width: 1072px; margin: 0 auto; transition: 0.1ms ease-out; /*marsカスタムエレメント化対応のため0.15sから0.1msに修正*/ } .st-megaMenu_categoryInner_s { /*overflow: hidden; marsカスタムエレメント化対応のため削除*/ padding: 28px 30px 40px; } .st-mobileMenu { position: relative; z-index: 1000; display: none; width: 100%; border-top: 1px solid #fff; background: #fff; } .st-mobileMenu ul { list-style: none; margin: 0; padding: 0; } .st-mobileMenu_level0Item, .st-mobileMenu_level0Item-link { position: relative; display: block; padding: 11px 28px 10px 35px; border-bottom: 1px solid #d9d9d9; color: #fff; background-color: #0d2ea1; font-size: 12px; line-height: 18px; } .st-mobileMenu_level0Item:before, .st-mobileMenu_level0Item-link:before, .st-mobileMenu_level0Item:after, .st-mobileMenu_level0Item-link:after { content: ""; position: absolute; top: 0; right: 30px; bottom: 0; margin: auto 10px; width: 20px; height: 1px; background-color: #fff; } .st-mobileMenu_level0Item:after, .st-mobileMenu_level0Item-link:after { transform: rotate(90deg); } .st-mobileMenu_level0Item.is-expanded:after, .is-expanded.st-mobileMenu_level0Item-link:after { width: 0; } .st-mobileMenu_level0Item-link { padding-right: 10px; padding-left: 52px; } .st-mobileMenu_level0Item-link:before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; margin: auto 10px; width: 9px; height: 9px; border-top: 1px solid; border-right: 1px solid; background-color: transparent; transform: rotate(45deg); } .st-mobileMenu_level0Item-link:after { content: normal; } .st-mobileMenu_category { display: none; } .st-mobileMenu_title { margin: 0; font-size: 12px; line-height: 18px; font-weight: normal; } .st-mobileMenu_sectionTitle { margin: 0; padding: 6px 10px 5px 50px; color: #fff; background-color: #000; border-bottom: 1px solid #d9d9d9; font-size: 12px; line-height: 18px; font-weight: normal; } .st-mobileMenu_item { position: relative; display: block; padding: 11px 28px 10px 10px; color: #000; border-bottom: 1px solid #d9d9d9; background-color: #fff; font-size: 12px; line-height: 18px; } .st-mobileMenu_item:before { content: ""; position: absolute; top: 0; right: 35px; bottom: 0; margin: auto 10px; width: 9px; height: 9px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); } .st-mobileMenu_item-level1 { padding-left: 40px; } .st-mobileMenu_item-level2 { padding-left: 30px; } .st-mobileMenu_item-level3 { padding-left: 60px; } .st-mobileMenu_small { display: block; font-size: 8px; line-height: 11px; } .st-mobileMenu_important { position: absolute; top: 0; bottom: 0; left: 13px; width: 15px; height: 15px; margin: auto; padding-bottom: 3px; } .st-mobileMenu_search { position: relative; padding: 9px 10px 10px; background-color: #d9d9d9; } .st-mobileMenu_searchLabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .st-mobileMenu .st-mobileMenu_searchInput { display: block; box-sizing: border-box; width: 100%; height: 30px; padding: 5px 35px 5px 5px; border: none; border-radius: 0; background-color: #fff; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .st-mobileMenu_searchButton { border: none; margin: 0; padding: 0; background: transparent; position: absolute; top: 9px; right: 10px; padding: 6px; } .st-mobileMenu_searchButton img { display: block; width: 18px; height: 18px; } .st_globalLink { color: #fff; background: #000; } .st_globalLink a { color: #fff; } .st_globalLink_inner { max-width: 1052px; padding: 0 10px; margin: 0 auto; display: flex; align-items: center; height: 40px; } .st_globalLink_country { flex: 1 1 auto; } .st_globalLink_country img { margin-right: 10px; vertical-align: middle; margin-top: -0.25em; } .st_globalLink_global { list-style: none; margin: 0; padding: 0; flex: 0 0 auto; } .st_globalLink_global:after { content: ""; display: block; clear: both; } .st_globalLink_global li { float: left; margin-left: 30px; line-height: 1.2; } .st_globalLink_global li img { margin-right: 5px; vertical-align: middle; margin-top: -0.35em; } @media screen and (max-width: 640px) { .st_globalLink_inner { height: auto; padding: 8px 10px; } .st_globalLink_country { padding-right: 20px; } .st_globalLink_global li { float: none; line-height: 1.2; margin: 17px 0; } } .st-siteFooter { padding: 10px 0; } .st-siteFooter_inner { max-width: 1052px; padding: 0 10px; margin: 0 auto; } .st-siteFooter-category { list-style: none; margin: 0; padding: 0; letter-spacing: -0.45em !important; font-size: 0; margin: 30px 0 30px -30px; line-height: 1; } .st-siteFooter-category > li, .st-siteFooter-category > div { display: inline-block; letter-spacing: 0; font-size: 14px; text-align: left; vertical-align: top; } .st-siteFooter-category li { font-size: 16px; margin-left: 30px; } .st-siteFooter-category li a { white-space: nowrap; } .st-siteFooter_utility { list-style: none; margin: 0; padding: 0; letter-spacing: -0.45em !important; font-size: 0; margin: 30px 0 30px -15px; line-height: 1.2; } .st-siteFooter_utility > li, .st-siteFooter_utility > div { display: inline-block; letter-spacing: 0; font-size: 14px; text-align: left; vertical-align: top; } .st-siteFooter_utility li { margin-left: 15px; padding-right: 15px; border-right: solid 1px #d2d4d9; font-size: 12px; } .st-siteFooter_utility li:last-child { padding-right: 0; border-right: none; } .st-siteFooter_utility li a { white-space: nowrap; } .st-siteFooter_logo { margin: 40px 0 -15px; text-align: center; } .st-siteFooter_logo img { width: 136px; } .st-siteFooter_copyright { margin: 28px 0; text-align: center; } .st-siteFooter_copyright small { font-size: 12px; } .st-backToTopFixed { box-sizing: border-box; width: 50px; height: 50px; position: fixed; right: 20px; bottom: 20px; background: #fff; border: solid 1px #ccc; } .st-backToTopFixed:before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #333; border-right: 2px solid #333; transform: rotate(-45deg); border-color: #333; position: absolute; top: 2px; right: 0; bottom: 0; left: 0; margin: auto; } @media screen and (max-width: 1024px) { .st-siteFooter-category { margin: 30px 0 30px -30px; text-align: center; } .st-siteFooter-category li { margin-bottom: 20px; } .st-siteFooter_utility { margin: 30px 0 40px -1em; text-align: center; } .st-siteFooter_utility li { margin-bottom: 20px; } .st-backToTopFixed { width: 40px; height: 40px; } } .st_globalLink_global .mod-inIcon { height: 8px; margin: -0.25em 0 0 5px; } .mod-inIcon { vertical-align: middle; margin: -0.25em 0 0 10px; height: 20px; width: auto !important; } /*common:全ページ共通設定*/ /*マージントップボトム*/ .mar_tb0 { margin-top: 0px !important; margin-bottom: 0px !important; } /*マージントップ*/ .mar_t0 { margin-top: 0px !important; } .mar_t5 { margin-top: 5px !important; } .mar_t10 { margin-top: 10px !important; } .mar_t15 { margin-top: 15px !important; } .mar_t20 { margin-top: 20px !important; } .mar_t25 { margin-top: 25px !important; } .mar_t30 { margin-top: 30px !important; } .mar_t35 { margin-top: 35px !important; } .mar_t40 { margin-top: 40px !important; } /*マージンボトム*/ .mar_b0 { margin-bottom: 0px !important; } .mar_b5 { margin-bottom: 5px !important; } .mar_b10 { margin-bottom: 10px !important; } .mar_b15 { margin-bottom: 15px !important; } .mar_b20 { margin-bottom: 20px !important; } .mar_b25 { margin-bottom: 25px !important; } .mar_b30 { margin-bottom: 30px !important; } .mar_b35 { margin-bottom: 35px !important; } .mar_b40 { margin-bottom: 40px !important; } /*マージンレフト*/ .mar_l0 { margin-left: 0px !important; } .mar_l5 { margin-left: 5px !important; } .mar_l10 { margin-left: 10px !important; } .mar_l15 { margin-left: 15px !important; } .mar_l20 { margin-left: 20px !important; } .mar_l25 { margin-left: 25px !important; } .mar_l30 { margin-left: 30px !important; } .mar_l35 { margin-left: 35px !important; } .mar_l40 { margin-left: 40px !important; } /*マージンライト*/ .mar_r0 { margin-right: 0px !important; } .mar_r5 { margin-right: 5px !important; } .mar_r10 { margin-right: 10px !important; } .mar_r15 { margin-right: 15px !important; } .mar_r20 { margin-right: 20px !important; } .mar_r25 { margin-right: 25px !important; } .mar_r30 { margin-right: 30px !important; } .mar_r35 { margin-right: 35px !important; } .mar_r40 { margin-right: 40px !important; } /*パディングトップボトム*/ .pad_tb0 { padding-top: 0px !important; padding-bottom: 0px !important; } /*パディングトップ*/ .pad_t0 { padding-top: 0px !important; } .pad_t5 { padding-top: 5px !important; } .pad_t10 { padding-top: 10px !important; } .pad_t15 { padding-top: 15px !important; } .pad_t20 { padding-top: 20px !important; } .pad_t25 { padding-top: 25px !important; } .pad_t30 { padding-top: 30px !important; } .pad_t35 { padding-top: 35px !important; } .pad_t40 { padding-top: 40px !important; } /*パディングボトム*/ .pad_b0 { padding-bottom: 0px !important; } .pad_b5 { padding-bottom: 5px !important; } .pad_b10 { padding-bottom: 10px !important; } .pad_b15 { padding-bottom: 15px !important; } .pad_b20 { padding-bottom: 20px !important; } .pad_b25 { padding-bottom: 25px !important; } .pad_b30 { padding-bottom: 30px !important; } .pad_b35 { padding-bottom: 35px !important; } .pad_b40 { padding-bottom: 40px !important; } /*パディングレフト*/ .pad_l0 { padding-left: 0px !important; } .pad_l5 { padding-left: 5px !important; } .pad_l10 { padding-left: 10px !important; } .pad_l15 { padding-left: 15px !important; } .pad_l20 { padding-left: 20px !important; } .pad_l25 { padding-left: 25px !important; } .pad_l30 { padding-left: 30px !important; } .pad_l35 { padding-left: 35px !important; } .pad_l40 { padding-left: 40px !important; } /*パディングライト*/ .pad_r0 { padding-right: 0px !important; } .pad_r5 { padding-right: 5px !important; } .pad_r10 { padding-right: 10px !important; } .pad_r15 { padding-right: 15px !important; } .pad_r20 { padding-right: 20px !important; } .pad_r25 { padding-right: 25px !important; } .pad_r30 { padding-right: 30px !important; } .pad_r35 { padding-right: 35px !important; } .pad_r40 { padding-right: 40px !important; } /* フロート */ .fl-r { float: right; } .fl-l { float: left; } /* clear */ .clear { clear: both; } /* mixin */ body { margin: 0; padding: 0; } .bsn * { box-sizing: border-box; } .bsn h1, .bsn h2, .bsn h3, .bsn h4, .bsn h5, .bsn h6, .bsn p, .bsn figure, .bsn blockquote, .bsn dl, .bsn dd { margin: 0; } .bsn ul, .bsn ol { list-style-type: none; margin: 0; padding: 0; } .bsn html:focus-within { scroll-behavior: smooth; } .bsn input, .bsn button, .bsn textarea, .bsn select { font: inherit; } .bsn button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .bsn picture { display: block; line-height: 1; } .bsn img { vertical-align: inherit; line-height: 1; display: block; } /* vars */ :root { --blue: #0065e7; --mint: #89f0be; --lime: #83de4a; --orange: #fca400; --pink: #ff87b4; --yellow: #ebd800; --orange2: #ffb403; --purple: #9a74c0; --turquoise: #36cbcf; --copper: #d87228; --gray: #959595; --olive: #a6bc36; --violet: #5d48ac; --brown: #c0952e; } .bg-blue { background-color: var(--blue); } .bg-mint { background-color: var(--mint); } .bg-lime { background-color: var(--lime); } .bg-orange { background-color: var(--orange); } .bg-orange2 { background-color: var(--orange2); } .bg-pink { background-color: var(--pink); } .bg-yellow { background-color: var(--yellow); } .bg-purple { background-color: var(--purple); } .bg-turquoise { background-color: var(--turquoise); } .bg-copper { background-color: var(--copper); } .bg-gray { background-color: var(--gray); } .bg-olive { background-color: var(--olive); } .bg-brown { background-color: var(--brown); } .bg-violet { background-color: var(--violet); } .bg-gradation { background-image: linear-gradient(90deg, rgb(9, 180, 234) 9%, rgb(185, 51, 231) 25%, rgb(255, 20, 210) 55%, rgb(255, 123, 104) 81%, rgb(255, 168, 59)); } .bsn .product__model, .bsn .mv, .bsn .header, .bsn .btn_grad, .bsn .heading-lv4::after, .bsn .heading-lv2::after { background: linear-gradient(105.02deg, rgb(0, 199, 239) 6.02%, rgb(0, 97, 239) 66.96%, rgb(0, 44, 137) 99.37%); color: #fff; } .bsn { font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック", YuGothic, sans-serif; font-size: 16px; /* Heading */ /* Buttons */ /* Header */ /* contents */ /* 関連リンク */ /* 記事 */ } .bsn .brpc { display: inline; } .bsn .brsp { display: none; } @media screen and (max-width: 639px) { .bsn .brsp { display: inline; } } .bsn .brtab { display: none; } @media screen and (max-width: 767px) { .bsn .brtab { display: inline; } } .bsn .pc { display: block; } @media screen and (max-width: 639px) { .bsn .pc { display: none; } } .bsn .sp { display: none; } @media screen and (max-width: 639px) { .bsn .sp { display: block; } } .bsn a { transition: 0.2s; } .bsn .container, .bsn .sec_shindan { max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: content-box; padding: 0 40px; } @media screen and (max-width: 767px) { .bsn .container, .bsn .sec_shindan { padding-left: 8vw; padding-right: 8vw; } } .bsn .heading-lv2 { position: relative; font-size: clamp(14px, 3.8vw, 29px); font-weight: 400; display: flex; align-items: center; color: #fff; margin-top: 2.8em; margin-bottom: 1em; } @media screen and (max-width: 639px) { .bsn .heading-lv2 { min-height: 3em; } } .bsn .heading-lv2__inner { position: relative; z-index: 1; margin-left: 1em; font-style: italic; line-height: 1.2; padding: 0.28em 0.5em; display: flex; width: 100%; justify-content: space-between; } .bsn .heading-lv2::before { content: ""; position: absolute; top: -0.5em; left: -1em; height: 2.665em; width: 1.7586em; background: linear-gradient(197.9deg, rgb(0, 230, 203) 3.87%, rgb(0, 174, 255) 92.21%); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: skewX(-2deg); } .bsn .heading-lv2::after { content: ""; position: absolute; top: 0; left: 0.6em; width: 100%; height: 100%; display: block; z-index: 0; transform: skewX(-20deg); } .bsn .heading-lv2.green::after { background: linear-gradient(197.9deg, rgb(182, 255, 122) 0%, rgb(177, 254, 124) 6.16%, rgb(162, 252, 131) 13.61%, rgb(159, 252, 132) 14.82%, rgb(150, 251, 136) 17.27%, rgb(124, 247, 148) 21.35%, rgb(82, 241, 166) 26.57%, rgb(25, 233, 192) 32.65%, rgb(0, 230, 203) 35.07%, rgb(0, 221, 207) 44.87%, rgb(0, 195, 219) 61.22%, rgb(0, 153, 237) 81.96%, rgb(0, 114, 255) 99.11%); } .bsn .heading-lv2.green .link_arrow { color: var(--blue); } .bsn .heading-lv2__wrapper { position: relative; } .bsn .heading-lv2__wrapper .baloon { position: absolute; z-index: 2; right: 0.5em; top: -50%; } @media screen and (max-width: 639px) { .bsn .heading-lv2__wrapper .baloon { position: relative; width: 100%; z-index: 2; right: inherit; top: inherit; margin-bottom: 0; } .bsn .heading-lv2__wrapper .baloon::before, .bsn .heading-lv2__wrapper .baloon::after { display: none; } } .bsn .heading-lv3 { font-size: clamp(14px, 3.8vw, 29px); font-weight: bold; color: #6e6e6e; } .bsn .heading-lv4 { font-size: clamp(12px, 3.5vw, 24px); font-weight: normal; position: relative; display: flex; align-items: center; z-index: 0; padding: 0 1em; min-height: 1.55em; color: #fff; } .bsn .heading-lv4::after { content: ""; transform: skewX(-20deg); display: block; width: 100%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; } .bsn .heading-lv5 { font-weight: bold; color: var(--blue); font-size: clamp(12px, 3vw, 21px); } .bsn .heading-lv5::before { content: "■ "; } .bsn .btn_round_grad { display: block; border-radius: 2em; font-size: clamp(16px, 4vw, 32px); font-weight: bold; text-align: center; color: var(--blue); padding: 0.3125em; max-width: 600px; margin: 0 auto; background: linear-gradient(90deg, rgb(0, 199, 239) 6.02%, rgb(0, 97, 239) 55.61%, rgb(0, 44, 137) 99.37%); } .bsn .btn_round_grad__inner { border-radius: 2em; background-color: #fff; padding: 0.3em; } .bsn .btn_square { border: clamp(1.5px, 0.5vw, 3px) var(--blue) solid; color: var(--blue); line-height: 1; margin: 3.5em auto; padding: 0.5em 5em; text-align: center; font-size: clamp(12px, 3.5vw, 24px); font-weight: bold; position: relative; display: block; max-width: 695px; } .bsn .btn_square::after { content: ""; width: 3em; height: 1.5em; min-width: 32px; display: block; background: url(../img/link-arrow.svg) no-repeat left center/100% auto; position: absolute; right: 1em; top: 50%; transform: translateY(-50%); } .bsn .btn_grad { padding: 0.5em 1em 0.5em 1em; font-size: clamp(14px, 2.5vw, 25px); position: relative; display: inline-flex; margin: 0 auto; justify-content: center; align-items: center; border-radius: 5px; } .bsn .btn_grad::after { content: ""; display: block; width: 1em; height: 1em; background: url(../img/ico-play.svg) no-repeat center center; margin-left: 0.5em; } .bsn .btn_blue { padding: 0.5em 1em 0.5em 1em; color: #fff; border-radius: 5px; background-color: var(--blue); display: block; } .bsn .link_arrow { background: url(../img/ico-play.svg) no-repeat right center/max(10px, 0.58em) auto; padding-right: calc(max(10px, 0.58em) + 0.4em); } .bsn .header { position: static; z-index: 9; width: 100%; backface-visibility: hidden; } .bsn .header .container, .bsn .header .sec_shindan { display: flex; align-items: center; min-height: 60px; } .bsn .header__logo { flex: 0 0 104px; } @media screen and (max-width: 1023px) { .bsn .header { padding: 0; background: #2762f8; position: relative; } .bsn .header .container, .bsn .header .sec_shindan { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 40px; padding: 0 35px; } .bsn .header .container::before, .bsn .header .sec_shindan::before, .bsn .header .container::after, .bsn .header .sec_shindan::after { content: ""; display: inline-block !important; width: 24px; height: 1px; background-color: #fff; position: absolute; right: 30px; left: auto; top: 50%; } .bsn .header .container::after, .bsn .header .sec_shindan::after { transform: rotate(90deg); } .bsn .header__logo { flex: 0 0 auto; } .bsn .header__logo img { filter: brightness(0) invert(1); width: 62px; } .bsn .header .hnav { width: 100%; background: #2762f8; position: absolute; left: 0; top: 40px; margin-left: 0; transition: all 0.3s ease; height: 100px; max-height: 0px; overflow: hidden; } .bsn .header .hnav__list { display: block; position: relative; padding-left: 0; } .bsn .header .hnav__list li { padding: 0; } .bsn .header .hnav__list li::before { display: none; } .bsn .header .hnav__list li a { display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 30px 0 35px; border-top: 1px #fff solid; } .bsn .header .hnav__list li .arrow_down { position: relative; display: inline-block; width: 25px; height: 13px; transform: scaleX(0.9); } .bsn .header .hnav__list li .arrow_down::before, .bsn .header .hnav__list li .arrow_down::after { content: ""; position: absolute; bottom: 0; left: calc(50% - 0.5px); width: 1px; height: 18px; border-radius: 9999px; background-color: #fff; transform-origin: 50% calc(100% - 0.5px); } .bsn .header .hnav__list li .arrow_down::before { transform: rotate(45deg); } .bsn .header .hnav__list li .arrow_down::after { transform: rotate(-45deg); } .bsn .header.active .hnav { height: 245px; max-height: 245px; display: block; } } .bsn .hnav { color: #fff; flex: 1 1 100%; margin-left: 8.6330800164px; } .bsn .hnav__list { display: flex; justify-content: space-between; padding-left: 8.6330800164px; } .bsn .hnav__list > li { position: relative; padding: 10px; line-height: 1.2; font-size: clamp(12px, 1.1vw, 14px); text-align: center; font-weight: bold; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* &:last-of-type { &::after { content: ""; display: block; position: absolute; height: 100%; width: 1px; background-color: #fff; transform: skewX($slashDeg); top: 0; right: -$itemGap; } } */ } .bsn .hnav__list > li a { color: #fff; text-decoration: none; transition: 0.2s; } .bsn .hnav__list > li a:hover { opacity: 0.7; } .bsn .hnav__list > li .arrow_down { display: none; } .bsn .hnav__list > li::before { content: ""; display: block; position: absolute; height: 100%; width: 1px; background-color: #fff; transform: skewX(-31.66deg); top: 0; left: -8.6330800164px; } .bsn .mv__banner { display: block; width: 100%; position: absolute; z-index: 10; transition: 0.2s; } .bsn .mv__banner a { position: absolute; right: 0; } .bsn .mv__banner img { width: 8.59375vw; height: auto; } @media screen and (max-width: 1023px) { .bsn .mv__banner { display: none; } } .bsn .mv { display: block; } .bsn .mv .container, .bsn .mv .sec_shindan { padding: 0 8.59375vw 0 0; } @media screen and (max-width: 767px) { .bsn .mv .container, .bsn .mv .sec_shindan { padding: 0; } } .bsn .mv img { width: 100%; height: auto; } .bsn .bsn_main { padding-top: 1px; margin-top: -1px; padding-bottom: 100px; background: url(../img/main_bg.png) repeat-y center 15.6vw/100% auto, linear-gradient(90deg, rgb(222, 241, 253) 0%, rgb(245, 251, 255) 100%); line-height: 1.5; position: relative; } @media screen and (max-width: 639px) { .bsn .bsn_main { background: linear-gradient(90deg, rgb(222, 241, 253) 0%, rgb(245, 251, 255) 100%); } } .bsn.doc .bsn_main { background: url(../img/main_bg_green.png) repeat-y center top/100% auto, #f1ffe5; } .bsn.top .section { padding: 0 8.59375vw; box-sizing: content-box; } .bsn .top_read { font-size: clamp(12px, 2.4vw, 21px); line-height: 1.7; padding-top: 1.5em; margin-bottom: -1em; text-align: center; color: var(--blue); } .bsn .baloon { position: relative; display: inline-block; margin-bottom: 20px; padding: 0.5em 1.5em; border: 1px solid var(--blue); border-radius: 100px; background-color: #b6ff7a; text-align: center; font-size: clamp(11px, 2.4vw, 19px); font-weight: bold; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1; color: var(--blue); } .bsn .baloon::before { content: ""; position: absolute; bottom: 0; left: 50%; border-style: solid; border-width: 20px 20px 0 0; border-color: var(--blue) transparent transparent; translate: -50% 100%; transform: skew(-25deg); transform-origin: top; } .bsn .baloon::after { content: ""; position: absolute; bottom: 0; left: 50%; border-style: solid; border-width: 17.6px 17.6px 0 0; border-color: #b6ff7a transparent transparent; translate: calc(-50% - 0.4px) 100%; transform: skew(-25deg); transform-origin: top; } .bsn .num_header { color: var(--blue); display: flex; align-items: flex-end; position: relative; font-size: clamp(12.5px, 4vw, 25px); margin-top: 1.6em; margin-bottom: 1.2em; } .bsn .num_header__title { font-weight: bold; margin-left: 0.5em; margin-right: 1em; flex: 0 0 auto; align-self: center; font-size: 100%; } .bsn .num_header__title::after { content: ""; width: calc(100% - 2.4em); height: 1px; background-color: var(--blue); display: block; position: absolute; } .bsn .num_header__description { font-size: clamp(16px, 1.2vw, 20px); align-self: center; line-height: 1.4; } .bsn .num_header__img { flex: 0 0 auto; height: 2.24em; width: auto; } @media screen and (max-width: 1279px) { .bsn .num_header { display: block; } .bsn .num_header__img { float: left; height: 46px; } .bsn .num_header__title { padding-top: 3px; margin-left: 50px; margin-right: 0; } .bsn .num_header__title::after { width: calc(100% - 50px); } .bsn .num_header__description { font-size: clamp(10px, 2vw, 20px); margin-top: 1em; margin-left: 50px; } } .bsn .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); place-content: center; -moz-column-gap: 30px; column-gap: 30px; margin-bottom: 30px; } @media screen and (max-width: 767px) { .bsn .grid-3 { grid-template-columns: 1fr; row-gap: 3.125vw; } } .bsn .card { background-color: #fff; display: grid; padding: 20px; } .bsn .num_block__card { grid-template-rows: subgrid; grid-row: span 3; padding: 0 10% 30px; } .bsn .num_block__card__header { display: flex; justify-content: center; align-items: center; gap: 6%; border-bottom: 1px currentColor solid; color: var(--blue); font-weight: bold; font-size: clamp(14px, 3.5vw, 22px); margin: 0 0 1em; line-height: 1.2; min-height: 4em; } .bsn .num_block__card__header__ico { display: flex; align-items: center; justify-content: center; margin: 6% 0; max-width: 33%; } .bsn .num_block__card__header__ico img { max-width: 100%; width: 100%; height: auto; } .bsn .num_block__card__subheading { color: #6e6e6e; font-weight: bold; font-size: clamp(13px, 2.4vw, 20px); margin-bottom: 0.8em; align-self: center; } .bsn .num_block__card__body { font-size: clamp(11px, 2.2vw, 15px); } @media screen and (max-width: 767px) { .bsn .num_block__card { grid-template-rows: auto; padding: 0 5vw 20px; } .bsn .num_block__card__header { justify-content: center; } .bsn .num_block__card__header__ico { max-width: auto; } .bsn .num_block__card__header__ico img { zoom: 0.65; } } .bsn .col_point { background-color: var(--mint); color: var(--blue); text-align: center; font-weight: bold; border-radius: 2em; font-size: clamp(11px, 4vw, 22px); line-height: 1.85em; margin-bottom: 20px; } @media screen and (min-width: 768px) { .bsn .col_point { margin-bottom: 0; } .bsn .col_point + .grid-3 .num_block__card { position: relative; margin-top: 24px; } .bsn .col_point + .grid-3 .num_block__card::before { content: ""; position: absolute; display: block; top: -25px; left: 50%; height: 32px; width: 25px; background: var(--mint); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); } } @media screen and (max-width: 767px) { .bsn .col_point + .grid-3 .num_block__card { position: relative; } .bsn .col_point + .grid-3 .num_block__card::before { content: "POINT"; font-size: 10px; position: absolute; width: 4em; height: 4em; background-color: var(--mint); color: var(--blue); border-radius: 50%; display: flex; justify-content: center; align-items: center; left: 10px; top: 10px; } } .bsn .hashtag { color: #fff; display: inline-block; font-size: clamp(10px, 2vw, 15px); font-weight: normal; padding: 0.3em 1em; line-height: 1; } .bsn .articles { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -15px; } .bsn .articles__col { flex: 0 0 33%; display: flex; } @media screen and (max-width: 767px) { .bsn .articles__col { flex: 0 0 50%; } } @media screen and (min-width: 768px) { .bsn .articles:has(> :nth-child(4):last-child) { margin-left: auto; margin-right: auto; width: calc(65.1% + 30px); } .bsn .articles:has(> :nth-child(4):last-child) .articles__col { flex-basis: 50%; } } @media screen and (max-width: 639px) { .bsn .articles .articles__col { flex-basis: 100%; } } .bsn .article_card { padding: 20px; display: flex; flex-direction: column; margin: 15px; position: relative; } .bsn .article_card__title { order: 2; font-weight: bold; color: #6e6e6e; font-size: clamp(13px, 2vw, 20px); } .bsn .article_card__pic { order: 1; margin: -20px; margin-bottom: 20px; } .bsn .article_card__pic img { width: 100%; height: auto; } .bsn .article_card__footer { order: 3; display: flex; align-items: center; margin-top: auto; padding-top: 10px; gap: 5%; position: relative; } .bsn .article_card__footer .hashtag { min-width: 50%; } .bsn .article_card__footer__link { margin-left: auto; flex: 0 0 24%; align-self: flex-end; justify-self: flex-end; font-size: clamp(10px, 2vw, 15px); padding-bottom: 0.8em; } .bsn .article_card__footer__link img { margin-left: auto; width: 100%; max-width: 77px; height: auto; } @media screen and (max-width: 639px) { .bsn .article_card { padding: 5vw; } .bsn .article_card__pic { margin: -5vw; margin-bottom: 5.5vw; } } .bsn .heading_slash { color: var(--blue); text-align: center; width: -moz-fit-content; width: fit-content; position: relative; font-size: clamp(14.5px, 2.5vw, 22px); font-weight: bold; margin: 0 auto 30px; padding: 0.5em 1em; } .bsn .heading_slash::before, .bsn .heading_slash::after { content: ""; display: block; background-color: var(--blue); width: 1px; height: 100%; position: absolute; top: 0; } .bsn .heading_slash::before { transform: rotate(-25deg); left: -0.5em; } .bsn .heading_slash::after { transform: rotate(25deg); right: -0.5em; } .bsn .sec_shindan { margin-top: 6%; margin-bottom: 7.5%; padding-top: 1px; } .bsn .sec_shindan__contents { background-color: #fff; border-radius: 40px; padding: 0 20px 60px; } .bsn .sec_shindan__heading { background: linear-gradient(90deg, rgb(0, 199, 239) 6.02%, rgb(0, 97, 239) 55.61%, rgb(0, 44, 137) 99.37%); font-size: clamp(14px, 3.8vw, 29px); border-radius: 40px; text-align: center; font-style: italic; display: block; margin-top: 0; margin-left: -20px; margin-right: -20px; position: relative; font-weight: 500; color: #fff; } .bsn .sec_shindan__heading__inner { position: relative; width: -moz-fit-content; width: fit-content; max-width: calc(100% - 8.8em); margin: 0 auto; padding: 0.5em; } .bsn .sec_shindan__heading__inner::before { content: ""; width: 4.4em; height: 5.4em; display: block; position: absolute; background: url(../img/icon_shindan.png) no-repeat center center/100% auto; top: -1em; left: -4.4em; } @media screen and (max-width: 639px) { .bsn .sec_shindan__heading { margin-left: -8vw; margin-right: -8vw; } .bsn .sec_shindan__heading__contents { padding: 0 5vw; } .bsn .sec_shindan__heading__inner { max-width: 100%; width: 100%; align-items: center; justify-content: center; display: flex; padding: 0 2vw; text-align: left; } .bsn .sec_shindan__heading__inner::before { flex: 0 0 auto; position: relative; left: -2.5vw; top: inherit; margin-top: -2vw; margin-bottom: -2vw; } } .bsn .sec_shindan__heading.outline { padding: 0.3125em; } .bsn .sec_shindan__heading.outline .sec_shindan__heading__inner { color: var(--blue); } .bsn .sec_shindan__heading.outline .sec_shindan__heading__inner__wrapper { background-color: #fff; border-radius: 40px; } .bsn .sec_shindan__footer { margin-top: 52px; } .bsn .sec_shindan__read { margin: 2em auto; color: var(--blue); font-weight: bold; text-align: center; font-size: clamp(13px, 3.5vw, 24px); } .bsn .sec_shindan__read .notes { text-align: center; font-weight: normal; display: block; margin: 1em auto 0; color: #6e6e6e; font-size: clamp(10px, 1.5vw, 20px); } .bsn .sec_shindan + .article__footer { margin-top: -6%; } .bsn .qa_item { counter-increment: question-counter; padding: 0 2em; font-size: clamp(14px, 3.8vw, 29px); margin: 0 auto 3em; width: -moz-fit-content; width: fit-content; } .bsn .qa_item dt { line-height: clamp(16px, 4vw, 45px); color: #6e6e6e; font-weight: 500; display: flex; } .bsn .qa_item dt::before { flex: 0 0 auto; color: var(--blue); font-weight: bold; font-size: clamp(19px, 4vw, 45px); margin-right: 0; margin-bottom: 0.5em; content: "Q" counter(question-counter) "."; } .bsn .qa_item .btn_blue { margin: 1em auto; text-align: center; font-weight: 500; font-size: clamp(16px, 4vw, 30px); max-width: 480px; position: relative; border: 4px var(--blue) solid; color: var(--blue); background-color: #fff; padding-top: 0.4em; padding-bottom: 0.4em; } .bsn .qa_item .btn_blue input[type=radio] { position: absolute; opacity: 0; } .bsn .qa_item .btn_blue:has(input:checked) { background-color: var(--blue); color: #fff; } @media screen and (max-width: 639px) { .bsn .qa_item { text-align: center; } .bsn .qa_item dt { flex-direction: column; line-height: 1.4; } } .bsn .sec_result .sec_shindan__heading { margin-bottom: 100px; } @media screen and (max-width: 767px) { .bsn .sec_result .sec_shindan__heading { margin-bottom: 50px; } } .bsn .sec_result .sec_shindan__heading__inner::before { background: url(../img/icon_result.png) no-repeat center center/100% auto; } .bsn.recommend .sec_shindan__read { font-size: clamp(14px, 3.5vw, 26px); } .bsn .product { margin: 0 auto 50px; } .bsn .product__model { font-size: clamp(17px, 4vw, 33px); font-weight: bold; border-radius: 50px; text-align: center; padding: 10px; margin-bottom: 1em; } .bsn .product__overview { margin-bottom: 30px; } .bsn .product__explain { font-size: clamp(12px, 3vw, 20px); margin-bottom: 1.5em; } .bsn .product__img img { max-width: 100%; width: 100%; height: auto; } .bsn .product__tags { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .bsn .product__tag { color: #fff; font-size: clamp(11px, 3vw, 18px); text-align: center; padding: 0.2em 0.5em; } .bsn .product__tag.bg-gray { padding: 0.2em 0.4em; } .bsn .product__specs p small { font-size: 11px; } .bsn .product__features { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px; margin: 12px 0 0; text-align: center; align-items: center; line-height: 1.3; background-color: #cde4fc; } .bsn .product__features small { font-size: 10px; } .bsn .product__features dt { text-align: center; line-height: 1.1; } .bsn .product__features dt div:has(small) { text-align: left; display: table; margin: 0 auto; } .bsn .product__features dt b { font-size: clamp(12px, 3.5vw, 24px); font-weight: normal; } .bsn .product__features dd { font-size: clamp(12px, 3.4vw, 23px); } .bsn .product__features dd b { font-size: clamp(12px, 3.2vw, 21px); font-weight: normal; } .bsn .product__feature { font-size: clamp(11px, 3vw, 20px); } .bsn .product__feature:nth-child(2) { border-left: 1px currentColor solid; border-right: 1px currentColor solid; } .bsn .product__feature__fax { font-size: clamp(11px, 3vw, 20px); background-color: #cde4fc; margin: 10px 0; padding: 0.25em; line-height: 1.3; text-align: center; } .bsn .product__functions { display: grid; gap: 8px; margin: 12px 0 0; } .bsn .product__function { background-color: #cde4fc; font-size: clamp(10px, 2.5vw, 18px); line-height: 1.3; padding: 0.25em 0em; text-align: center; position: relative; } .bsn .product__function__notes { margin-top: -10px; line-height: 1.2; text-align: right; } .bsn .product__function__notes small { font-size: 10px; } @media screen and (min-width: 768px) { .bsn .product__function__notes { text-align: left; order: 1; } .bsn .product__function__notes small { font-size: 11px; } } .bsn .product__function.disabled { color: rgba(255, 255, 255, 0.9); background-image: linear-gradient(to left top, transparent 50%, #ffffff 50%, #ffffff calc(50% + 1px), transparent calc(50% + 1px)); } .bsn .product .tax { font-size: 0.65em; } @media screen and (min-width: 768px) { .bsn .product { display: grid; grid-template-columns: 48% auto; grid-template-rows: auto auto; grid-column-gap: 0px; grid-row-gap: 0px; max-width: 1070px; margin: 0 auto 65px; } .bsn .product__model { font-size: clamp(17px, 4vw, 33px); font-weight: bold; border-radius: 50px; padding: 0 1em; text-align: center; grid-column: span 2; margin-bottom: 1em; } .bsn .product__overview { margin-right: 40px; margin-bottom: 0; } .bsn .product__tags { grid-template-columns: repeat(3, 1fr); gap: 15px; } .bsn .product__features { margin: 20px 0 0; } .bsn .product__functions { margin: 25px 0 0; grid-template-columns: repeat(2, 1fr); gap: 10px; } .bsn .product__function.wide { grid-column: span 2; } } @media screen and (max-width: 767px) { .bsn .product__specs p small { text-align: right; display: block; font-size: 10px; } } @media screen and (min-width: 1024px) { .bsn .product__price { margin-top: 1em; font-size: clamp(13px, 2vw, 23px); border-bottom: 1px #333 solid; display: flex; justify-content: space-between; align-items: center; } .bsn .product__price small { font-size: 11px; } } @media screen and (max-width: 1023px) { .bsn .product__price { margin-top: 1em; font-size: clamp(13px, 4vw, 23px); } .bsn .product__price p { border-bottom: 1px #333 solid; } .bsn .product__price small { display: block; margin-top: 0.5em; font-size: 10px; } } .bsn .related_links__list { display: flex; flex-wrap: wrap; gap: 2%; } .bsn .related_links__list__item { flex: 1 1 48%; margin-bottom: 2%; font-size: clamp(12px, 3.5vw, 24px); } .bsn .related_links__list__item a { text-align: center; padding: 0.55em; line-height: 1; display: block; background-color: #d5d5d5; color: #fff; } @media screen and (max-width: 639px) { .bsn .related_links__list__item { flex: 1 1 100%; margin-bottom: 10px; } } .bsn .article__contents { background: #fff; padding: max(3.334%, 15px); font-size: clamp(10px, 2vw, 19px); z-index: -1; } .bsn .article__header { margin-bottom: 2em; } .bsn .article__header .heading-lv3 { margin-bottom: 0.65em; } .bsn .article .heading-lv4 { margin-bottom: 1em; } .bsn .article .heading-lv4:not(:first-of-type) { margin-top: 3em; } .bsn .article .heading-lv5 { margin-top: 1.5em; margin-bottom: 0.5em; } .bsn .article .heading-lv5 + p { margin-top: 0; } .bsn .article p, .bsn .article figure { margin-top: max(1em, 15px); margin-bottom: max(1em, 15px); } .bsn .article p { line-height: 1.7; } .bsn .article .col-2 figure img { width: 100%; max-width: 100%; height: auto; } @media screen and (min-width: 640px) { .bsn .article .col-2 { display: flex; } .bsn .article .col-2 figure { flex: 0 0 min(40%, 355px); margin-left: 4%; } } .bsn .article__column { background-color: #eeeeee; border-radius: 10px; padding: 1em; margin-top: 1em; } .bsn .article__column dt { color: var(--blue); font-weight: bold; font-size: clamp(10px, 2.5vw, 18px); text-align: center; margin-bottom: 0.5em; } .bsn .article__column dd { font-size: clamp(10px, 2.2vw, 15px); } @media screen and (min-width: 640px) { .bsn .article__column { display: flex; } .bsn .article__column dt { display: flex; align-items: center; flex: 1 0 7em; margin-right: 1em; margin-bottom: 0; padding: 0.5em 1em 0.5em 0; border-right: 1px #ddd solid; text-align: left; } .bsn .article__column dd { padding: 0.5em 0; flex: 2 1 auto; } } .bsn .article__step { margin-top: 3em; } .bsn .article__step__item { margin-bottom: 2em; } .bsn .article__step__item dt { color: var(--blue); font-weight: bold; font-size: clamp(10px, 2.5vw, 18px); margin-bottom: 1em; } .bsn .article__step__item dt .step { position: relative; background-color: var(--blue); color: #fff; height: 2em; display: inline-flex; align-items: center; margin-right: 1em; padding: 0 0.5em; } .bsn .article__step__item dt .step::after { content: ""; position: absolute; top: 0; right: -0.98em; border-width: 1em 0.5em; border-color: transparent transparent transparent var(--blue); border-style: solid; } .bsn .article__step__item dd { font-size: clamp(10px, 2vw, 19px); } @media screen and (min-width: 768px) { .bsn .article__step { display: flex; gap: 3.334%; } .bsn .article__step__item { margin-bottom: 0; } } .bsn .article table { width: 100%; border-collapse: collapse; } .bsn .article table th, .bsn .article table td { padding: 10px; border: solid 1px black; } .bsn .article table th { width: 40%; color: #ffffff; background: #0065e7; text-align: left; font-weight: normal; } .bsn .article table td { width: 60%; } .bsn .article table .table_sp_br { display: none; } @media screen and (max-width: 1023px) { .bsn .article table .table_sp_br { display: block; } .bsn .article table .table_sp_none { display: none; } } .bsn .article .item_Wrap { margin: 40px 0 0; display: flex; justify-content: space-evenly; flex-wrap: wrap; } .bsn .article .item_Wrap .item_Box { width: 100%; max-width: 310px; height: auto; font-size: clamp(10px, 2vw, 16px); } .bsn .article .item_Wrap .item_Box + .item_Box { margin-top: 20px; } @media screen and (min-width: 768px) { .bsn .article .item_Wrap .item_Box + .item_Box { margin-top: 0px; } } .bsn .article .item_Wrap .item_Img img { width: 100%; height: auto; } .bsn .article .article__kakomi { background-color: #eeeeee; border-radius: 10px; padding: 1em; margin-top: 1em; } .bsn .article .article__kakomi h5 { font-size: clamp(10px, 3vw, 18px); } .bsn .article .article__kakomi p { font-size: clamp(10px, 2.2vw, 15px); margin-bottom: 0; } .bsn .article__footer { display: flex; justify-content: center; } .bsn .article__footer .btn_grad { margin-bottom: 2em; margin-top: 3em; } .bsn .article__footer .btn_square { margin-bottom: 2em; } .bsn .doc_banner { position: fixed; z-index: 99; bottom: 0; left: 0; width: 100%; } @media screen and (min-width: 1024px) { .bsn .doc_banner { display: none; } } .bsn .doc_banner a { display: block; background-color: #b6ff7a; text-align: center; padding: max(10px, 1%); } .bsn .doc_banner img { margin: 0 auto; width: clamp(212px, 70%, 350px); height: auto; } .bsn .reference { font-size: clamp(10px, 3vw, 18px); font-weight: bold; color: #333333; } .bsn .article .reference { margin-top: 3em; } .bsn .anchor { display: block; margin-top: -50px; padding-top: 50px; } @media screen and (max-width: 767px) { .bsn .anchor { margin-top: -10px; padding-top: 10px; } } @media screen and (max-width: 767px) { .st-backToTopFixed { bottom: 58px; z-index: 99; } }/*# sourceMappingURL=bussiness_start_navi.css.map */