h2 { font-size: 20px !important; text-align: center; padding: 1em 0; margin: 0 !important; } h2.h2first { padding-bottom: 0 !important; } h2.h2faq { padding-bottom: 0 !important; } h2.h2ans { padding-top: 2em !important; padding-bottom: 1em !important; } /* 背景色 */ div.backblue { background-color: #EFFAFF; } div.backwhite { height: 2em; background-color: #FFF; } /* ボタン設定画面 */ div.tab-contentA input[type="radio"] { display: none; } div.tab-contentB input[type="radio"] { display: none; } div.tab-contentC input[type="radio"] { display: none; } /* ボタンを選択するときの宣言 */ div.tab-contentA { text-align: center; } div.tab-contentA label { padding: 2px; } div.tab-contentA label img { width: 170px; background-color: #FFF; border: 2px solid #888; border-radius: 10% 10% 10% 10%; margin-bottom: 1em; box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.3); } div.tab-contentB label img, div.tab-contentC label img { width: 320px; background-color: #FFF; border: 2px solid #888; border-radius: 10px; margin-bottom: 1em; } /* ボタンがマウスオーバーのとき */ div.tab-contentA label img:hover { background-color: #F1F8EC; border-radius: 10% 10% 10% 10%; } div.tab-contentB label img:hover { background-color: #F1F8EC; border-radius: 10px; } /* ボタンをクリックしたとき */ div.tab-contentA label img:active { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); /*下に動く*/ box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7); /*影を小さく*/ border-bottom: solid 1px #000; } /* ボタンが選択中のとき */ div.tab-contentA input[type="radio"]:checked + label img { background-color: #E3F7F6; border-radius: 10% 10% 10% 10%; } div.tab-contentB input[type="radio"]:checked + label img { background-color: #E3F7F6; border-radius: 10px; } div.tab-contentC input[type="radio"]:checked + label { background-color: #E3F7F6; border-radius: 0; } div.tab-contentA .tab-boxA { box-sizing: border-box; text-align: left; } div.tab-contentB .tab-boxB { box-sizing: border-box; text-align: left; } /* ボタン選択前 */ div.tab-contentA .tab-boxA li { display: none; } div.tab-contentB .tab-boxB li { display: none; } div.tab-contentC .tab-boxC li { display: none; } /* 左幅がずれないようにと、点が付かないよう宣言する */ ul.nopoint { list-style-type: none; position: relative; margin: 0; padding: 0; text-align: center; } ul.nopointwhite { list-style-type: none; position: relative; margin: 0; padding: 0; text-align: center; background-color: #FFF; } div.contact_channel_select_css_area { text-align: left; margin-right: 1em; } /* 手順を選択するごとに次の手順を表示する */ #buttonA1pc:checked ~ .tab-boxA li.buttonA1 { display: block; } #buttonA2pc:checked ~ .tab-boxA li.buttonA2 { display: block; } #buttonA3pc:checked ~ .tab-boxA li.buttonA3 { display: block; } #buttonA4pc:checked ~ .tab-boxA li.buttonA4 { display: block; } #buttonA1sp:checked ~ .tab-boxA li.buttonA1 { display: block; } #buttonA2sp:checked ~ .tab-boxA li.buttonA2 { display: block; } #buttonA3sp:checked ~ .tab-boxA li.buttonA3 { display: block; } #buttonA4sp:checked ~ .tab-boxA li.buttonA4 { display: block; } #buttonB1:checked ~ .tab-boxB li.buttonB1 { display: block; } #buttonB2:checked ~ .tab-boxB li.buttonB2 { display: block; } #buttonB3:checked ~ .tab-boxB li.buttonB3 { display: block; } #buttonB4:checked ~ .tab-boxB li.buttonB4 { display: block; } #buttonB5:checked ~ .tab-boxB li.buttonB5 { display: block; } #buttonB6:checked ~ .tab-boxB li.buttonB6 { display: block; } #buttonB7:checked ~ .tab-boxB li.buttonB7 { display: block; } #buttonB8:checked ~ .tab-boxB li.buttonB8 { display: block; } #buttonB9:checked ~ .tab-boxB li.buttonB9 { display: block; } #buttonB10:checked ~ .tab-boxB li.buttonB10 { display: block; } #buttonB11:checked ~ .tab-boxB li.buttonB11 { display: block; } #buttonB12:checked ~ .tab-boxB li.buttonB12 { display: block; } #buttonB13:checked ~ .tab-boxB li.buttonB13 { display: block; } #buttonB14:checked ~ .tab-boxB li.buttonB14 { display: block; } #buttonB15:checked ~ .tab-boxB li.buttonB15 { display: block; } #buttonB16:checked ~ .tab-boxB li.buttonB16 { display: block; } #buttonB17:checked ~ .tab-boxB li.buttonB17 { display: block; } #buttonB18:checked ~ .tab-boxB li.buttonB18 { display: block; } #buttonB19:checked ~ .tab-boxB li.buttonB19 { display: block; } #buttonB20:checked ~ .tab-boxB li.buttonB20 { display: block; } #buttonB21:checked ~ .tab-boxB li.buttonB21 { display: block; } #buttonB22:checked ~ .tab-boxB li.buttonB22 { display: block; } #buttonB23:checked ~ .tab-boxB li.buttonB23 { display: block; } #buttonB24:checked ~ .tab-boxB li.buttonB24 { display: block; } #buttonB25:checked ~ .tab-boxB li.buttonB25 { display: block; } #buttonB26:checked ~ .tab-boxB li.buttonB26 { display: block; } #buttonB27:checked ~ .tab-boxB li.buttonB27 { display: block; } #buttonB28:checked ~ .tab-boxB li.buttonB28 { display: block; } #buttonB29:checked ~ .tab-boxB li.buttonB29 { display: block; } #buttonB30:checked ~ .tab-boxB li.buttonB30 { display: block; } #buttonB31:checked ~ .tab-boxB li.buttonB31 { display: block; } #buttonB32:checked ~ .tab-boxB li.buttonB32 { display: block; } #buttonC1:checked ~ .tab-boxC li.buttonC1 { display: block; } #buttonC2:checked ~ .tab-boxC li.buttonC2 { display: block; } #buttonC3:checked ~ .tab-boxC li.buttonC3 { display: block; } #buttonC4:checked ~ .tab-boxC li.buttonC4 { display: block; } #buttonC5:checked ~ .tab-boxC li.buttonC5 { display: block; } #buttonC6:checked ~ .tab-boxC li.buttonC6 { display: block; } #buttonC7:checked ~ .tab-boxC li.buttonC7 { display: block; } #buttonC8:checked ~ .tab-boxC li.buttonC8 { display: block; } #buttonC9:checked ~ .tab-boxC li.buttonC9 { display: block; } #buttonC10:checked ~ .tab-boxC li.buttonC10 { display: block; } #buttonC11:checked ~ .tab-boxC li.buttonC11 { display: block; } #buttonC12:checked ~ .tab-boxC li.buttonC12 { display: block; } #buttonC13:checked ~ .tab-boxC li.buttonC13 { display: block; } #buttonC14:checked ~ .tab-boxC li.buttonC14 { display: block; } #buttonC15:checked ~ .tab-boxC li.buttonC15 { display: block; } #buttonC16:checked ~ .tab-boxC li.buttonC16 { display: block; } /* パソコンで見ているときのみ改行や表示を行う */ @media screen and (min-width: 640px) { div.pcdisplay { display: block; } div.spdisplay { display: none; } } /* スマートフォンで見ているときのみ改行や表示を行う */ @media screen and (max-width: 640px) { div.pcdisplay { display: none; } div.spdisplay { display: block; } } /* ボタン表示 */ a.nextbtn { display: inline-block; padding: 6px; margin-bottom: 5px; font-weight: bold; color: #000; font-size: 14px; text-align: center; background-color: #FFF; cursor: pointer; border-radius: 5px; box-sizing: border-box; border: solid 1px #000; box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2); } a.nextbtn:hover { opacity: 0.8; background-color: #EFEFEF; } a.nextbtn:active { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7); border-bottom: solid 1px #000; } /* トップ画面中央配置 */ p.textcenter { text-align: center; } img.TopImg { max-width: 97%; } a.OtherProduct { text-decoration: underline; color: #0a96d5; font-size: 14px !important; } /* FAQリンク先の配置 */ p.faqans { text-align: left; margin: 5px 25px; background-color: #FFF; padding: 1em; } p.faqans a:before { content: ""; background: url(https://faq.brother.co.jp/euf/assets/images/linkpoint.png) no-repeat; display: inline-block; width: 10px; height: 10px; vertical-align: middle; margin-right: 10px; background-size: contain; } /* PC版動物ボタンの配置宣言 */ @media screen and (min-width: 601px) and (max-width: 820px) { div.tab-contentA label img { width: 21% !important; } } @media screen and (min-width: 541px) and (max-width: 600px) { div.tab-contentA label img { width: 45% !important; border-radius: 10px !important; padding: 1px !important; } } /* PC版症状別ボタンの配置宣言 */ @media screen and (min-width: 741px) and (max-width: 880px) { div.tab-contentB label img { width: 320px !important; padding: 2px !important; } a.nextbtn { width: 49% !important; padding: 2px !important; } } @media screen and (min-width: 541px) and (max-width: 740px) { div.tab-contentB label img { width: 45% !important; padding: 1px !important; } a.nextbtn { width: 49% !important; padding: 2px !important; } } /* スマホ版各ボタンの配置宣言 */ @media screen and (min-width: 341px) and (max-width: 540px) { div.tab-contentA label img { width: 300px !important; border-radius: 10px !important; padding: 1px !important; } div.tab-contentB label img { width: 300px !important; padding: 1px !important; } a.nextbtn { width: 97% !important; padding: 2px !important; } } @media screen and (max-width: 340px) { div.tab-contentA label img { width: 90% !important; border-radius: 10px !important; padding: 1px !important; } div.tab-contentB label img { width: 90% !important; padding: 1px !important; } } /* スマホ版で見たときのURL配置 */ @media screen and (max-width: 600px) { p.faqans { margin-left: 1em !important; } h2.h2first { padding-bottom: 1em !important; } } /* パソコンサイズで見ているときのみ表示 */ @media screen and (min-width: 601px) { img.spdisplay { display: none; } } /* スマホサイズで見ているときのみ表示 */ @media screen and (max-width: 600px) { img.pcdisplay { display: none; } } .rn_staticContents *, .rn_staticContents *::after, .rn_staticContents *::before { /* font-family: 'Noto Sans JP', sans-serif; */ line-height: 1.7em; } html { scroll-behavior: smooth; font-feature-settings: "palt"; margin: 0; /* font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; */ } .rn_staticContents .main-wrap p { /* font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; */ color: #333; } .rn_staticContents .main-wrap { width: 640px; margin: 0 auto; } .rn_staticContents .main-wrap p { line-height: 1.8em; font-size: 14px; margin-bottom: 40px; } .rn_staticContents .main-wrap a { font-size: 14px; transition: 0.3s; } .rn_staticContents .main-wrap a:hover, .rn_staticContents .main-wrap a:active { transition: 0.3s; } .rn_staticContents .main-wrap h3 { font-size: 20px; font-weight: 600; letter-spacing: 0.23em; } .rn_staticContents .contact_channel_l img { width: 150px; } /* span start */ .rn_staticContents .product_select_stext { font-size: 10px; } .rn_staticContents .product_select_btext { font-size: 16px; font-weight: 600; } .rn_staticContents .product_select_bbtext { font-size: 24px; font-weight: 600; } .rn_staticContents .product_select_bbmtext { font-size: 34px; font-weight: 600; } .rn_staticContents .product_select_blue { color: #0b298d; font-weight: 600; } .rn_staticContents .product_select_red { color: #e81c24; font-weight: 500; } .rn_staticContents .product_select_red_bold { color: #e81c24; font-weight: 600; } .rn_staticContents .product_select_a_underline { text-decoration: underline; color: #0a96d5; font-size: 18px !important; font-weight: 600; } .rn_staticContents .product_select_a_underline-r { text-decoration: underline; color: #e81c24; } .rn_staticContents .product_select_underline { font-weight: 500; } .rn_staticContents .product_select_underline::after { content: ''; border-bottom: 1px solid #666; display: block; padding-bottom: 24px; margin-bottom: 42px; } /* span end */ .rn_staticContents .contact_channel { border-bottom: #aeaeae 1px dotted; display: grid; grid-template-columns: 150px 420px; grid-gap: 50px; padding: 0 0 80px; margin-bottom: 80px; align-items: flex-start; } .rn_staticContents .contact_channel:last-child { border-bottom: none; } .rn_staticContents .contact_channel h3 { border-bottom: #aeaeae 1px solid; padding-bottom: 28px; margin-bottom: 28px; } .rn_staticContents .contact_channel p { margin-bottom: 0; } .rn_staticContents .contact_channel_r a:hover { transition: 0.3s; opacity: 0.6; } .rn_staticContents .contact_channel_r img { width: 100%; } .rn_staticContents .contact_channel_no { display: block; padding: 0 0 80px; } .rn_staticContents .contact_channel_no h3 { border-bottom: #aeaeae 1px solid; padding-bottom: 28px; margin-bottom: 28px; } .rn_staticContents .contact_channel_no p { margin-bottom: 0; } .rn_staticContents .search_container { display: grid; grid-template-columns: auto 110px; border: 1px solid #aeaeae; margin-bottom: 20px; width: 100%; } .rn_staticContents .bg-gray { background: #f2f2f2; padding: 20px } /* 追加要望No.16対応 ここから*/ .rn_contactChanelSelect{ width: 100%; } .contact_channel_product_name{ color: #0d2ea1; margin-bottom: 20px; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_channel_title{ font-size: 24px; font-weight: 600; letter-spacing: 0.1em; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_channel { border-bottom: none; padding: 0px; margin-bottom: 80px; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_channel:last-child{ margin-bottom: 40px; } .contact_channel_select_css_area .faq_top3{ font-weight: bold; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_channel_content_title { background-color: #0d2ea1; font-size: 16px; color: #FFF; text-align: center; padding: 5px 0px; margin-bottom: 20px; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit{ /* background-color:#e4fbff; */ padding: 0 20px 20px 0px; margin-top: -20px; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit_contents{ display:flex; align-items: baseline; font-weight: bold; font-size: 18px; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit_contents .contact_chanel_merit_contents_icon::before{ font-family: 'FontAwesome'; content: "\f058"; color: #0b97d3; margin: 0 20px; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit_title { color: #1F4E79; font-size: 20px; text-align: center; margin-top: 20px; font-weight: bold; text-decoration: underline #5195D3; } .contact_channel_select_css_area .contact_channel_border { border-bottom: #aeaeae 2px dotted; margin-bottom: 40px; } .rn_contactChanelSelect .contact_channel { border-bottom: #aeaeae 1px dotted; display: grid; grid-template-columns: auto 500px; grid-gap: 50px; margin-bottom: 80px; align-items: flex-start; } .rn_staticContents .main-wrap .direct_chat_css_area .contact_channel{ margin-bottom: 0px; } .rn_staticContents .main-wrap .direct_chat_css_area .interview_btn_area{ margin: 80px 0px; } .rn_staticContents .main-wrap .direct_chat_css_area .description_chat_guide_a{ color: #0a96d5; text-decoration: underline; font-weight: 600; } /* 追加要望No.16対応 ここまで*/ /* お問い合わせ先ボタン */ .rn_staticContents .btn_blk a { margin: 10px; background: #5B9BD5; color: #FFF; padding: 10px 30px 10px 0; border-radius: 10px; position: relative; display: flex; text-align: center; font-size: 16px; font-weight: bold; text-decoration: none; justify-content: space-around; box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.3); transition: 0.3s ease-in-out; } .rn_staticContents .btn_blk a:after { content: ""; position: absolute; top: 50%; bottom: 0; right: 1.5rem; font-size: 90%; display: flex; justify-content: center; align-items: center; transition: right 0.3s; width: 6px; height: 6px; border-top: solid 2px currentColor; border-right: solid 2px currentColor; transform: translateY(-50%) rotate(45deg); } /* ボタンがマウスオーバーのとき */ .rn_staticContents .btn_blk a:hover { background: #0D3D70; color: #FFF; opacity: 1 !important; } .rn_staticContents .btn_blk a:hover:after { right: 1rem; } /* ボタンをクリックしたとき */ .rn_staticContents .btn_blk a:active { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); -ms-transform: translateY(4px); transform: translateY(4px); /*下に動く*/ box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7); /*影を小さく*/ border-bottom: solid 1px #000; } /* おすすめ順タイトル部分 */ .rn_staticContents .contact_recommendation { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 10px; } .rn_staticContents .contact_recommendation .number { width: 160px; padding-top: 6px; height: 40px; font-size: 20px; font-weight: bold; text-align: center; background-color: #0D2EA1; } .rn_staticContents .contact_recommendation .title { width: calc(100% - 162px); padding-top: 6px; height: 40px; font-size: 20px; font-weight: bold; text-align: center; background-color: #E7E6E6; } .rn_staticContents .contact_recommendation .title span { font-size: 120%; color: #1058B8; } /* スマホ・タブレット時の表示方法変更 */ @media screen and (min-width: 500px) and (max-width: 650px) { div.contact_channel_select_css_area { margin-right: 0.5em; } .rn_staticContents .main-wrap { width: 100%; padding: 0 10px; } .rn_staticContents .contact_channel { display: grid; grid-template-columns: 120px 1fr; grid-gap: 20px; padding: 0 0 60px; margin-bottom: 60px; align-items: flex-start; } .rn_staticContents .contact_channel_l img { width: 120px !important; } } @media screen and (min-width: 420px) and (max-width: 500px) { div.contact_channel_select_css_area { margin-right: 0.2em; } .rn_staticContents .main-wrap { width: 100%; padding: 0 5px; } .rn_staticContents .contact_channel { display: grid; grid-template-columns: 100px 1fr; grid-gap: 10px; padding: 0 0 60px; margin-bottom: 60px; align-items: flex-start; } .rn_staticContents .contact_channel_l img { width: 100px !important; } .rn_staticContents .contact_recommendation .number { width: 140px !important; height: 36px !important; font-size: 18px !important; } .rn_staticContents .contact_recommendation .title { width: calc(100% - 142px); height: 36px !important; font-size: 18px !important; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit{ padding-right: 5px !important; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit_title { font-size: 18px !important; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit_contents { font-size: 16px !important; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit_contents .contact_chanel_merit_contents_icon::before { margin-left: 0 !important; margin-right: 15px !important; } .rn_staticContents .btn_blk a { font-size: 14px; } } @media screen and (max-width: 420px) { .rn_staticContents .main-wrap { width: 100%; padding: 0 5px; } .rn_staticContents .contact_channel { display: grid; grid-template-columns: 70px 1fr; grid-gap: 5px; align-items: flex-start; } .rn_staticContents .contact_channel_l img { width: 70px !important; } .rn_staticContents .contact_recommendation .number { width: 100% !important; height: 36px !important; font-size: 18px !important; } .rn_staticContents .contact_recommendation .title { width: 100% !important; height: 40px !important; font-size: 20px !important; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit{ padding-right: 5px !important; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit_title { font-size: 18px !important; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit_contents { font-size: 16px !important; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit_contents .contact_chanel_merit_contents_icon { font-size: 12px !important; } .rn_staticContents .main-wrap .contact_channel_select_css_area .contact_chanel_merit_contents .contact_chanel_merit_contents_icon::before { margin-left: 0 !important; margin-right: 10px !important; } .rn_staticContents .btn_blk { margin-left: -60px; } .rn_staticContents .btn_blk a { font-size: 16px; } } /* おすすめ表記のグラデーション */ .no1font { background: linear-gradient(45deg, #FFCE08 0%, #FCF60C 37%, #FEFEB2 47%, #FAFAD6 50%, #FEFEB2 53%, #F9F045 63%, #F7E219 100%); background: -webkit-linear-gradient(45deg, #FFCE08 0%, #FCF60C 37%, #FEFEB2 47%, #FAFAD6 50%, #FEFEB2 53%, #F9F045 63%, #F7E219 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .no2font { background: linear-gradient(45deg, #B9B9B9 0%, #D8DCDC 37%, #F1F1F1 47%, #FAFAFA 50%, #F1F1F1 53%, #D8DCDC 63%, #B9B9B9 100%); background: -webkit-linear-gradient(45deg, #B9B9B9 0%, #D8DCDC 37%, #F1F1F1 47%, #FAFAFA 50%, #F1F1F1 53%, #D8DCDC 63%, #B9B9B9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .no3font { background: linear-gradient(45deg, #D2813E 0%, #EDAF5B 37%, #F1C778 47%, #F6E0C6 50%, #F1C778 53%, #EDAF5B 63%, #E29B48 100%); background: -webkit-linear-gradient(45deg, #D2813E 0%, #EDAF5B 37%, #F1C778 41%, #F6E0C6 50%, #F1C778 53%, #EDAF5B 63%, #E29B48 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .no4font { background: #FFFFFF; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }