@charset "UTF-8"; /*主に記事内で使用するスタイル 見出し/ボタン/ボックス/リスト/ショートコード/カエレバ等 */ /** 評価ボックス **/ .rate-title { padding: 5px; margin-top: 1em; font-weight: bold; font-size: 1.25em; text-align: center; } .rate-title:before { content: "\f02e"; padding-right: 5px; } .rate-box { margin-bottom: 1em; font-size: 15px; border: solid 2px #e6e6e6; } .rateline { padding: 7px 4px 7px 10px; } .rate-box .rateline:nth-child(even) { background: #f3f3f3; } .rate-thing { display: inline-block; padding-right: 10px; width: calc(100% - 125px); max-width: 250px; font-weight: bold; vertical-align: middle; } .rate-star { display: inline-block; margin: 0; width: 125px; color: rgba(0, 0, 0, 0.15); vertical-align: middle; } .fa5 .rate-star { font-size: 0.95em; } .rate-star .fa, .rate-star .fa-star-half-alt { color: #ffb500; } .rate-box .rateline.end-rate { background: #e8f4ff; } /*見出し*/ #inner-content .hh { margin: 2.5em 0 1em; padding: 0; border: 0; background: transparent; box-shadow: none; font-weight: bold; } #inner-content p.hh { font-size: 1.1em; } #inner-content .hh:before, #inner-content .hh:after { top: auto; right: auto; bottom: auto; left: auto; border: 0; background: transparent; box-shadow: none; content: none; } #inner-footer .hh.hhq, #inner-footer .hh.hha, #inner-content .hh.hhq, #inner-content .hh.hha { position: relative; margin: 0; padding: 0 0 0 55px; font-size: 18px; } #inner-content .hh.hhq + *, #inner-content .hh.hha + * { margin-top: 1.5em; } #inner-content .hh.hhq:before, #inner-content .hh.hha:before { content: "Q"; position: absolute; left: 0; top: -6px; display: inline-block; width: 45px; height: 45px; line-height: 45px; vertical-align: middle; text-align: center; font-family: Arial, sans-serif; font-size: 21px; background: #75bbff; color: #fff; border-radius: 50%; } #inner-footer .hh.hhq + .hh.hha, #inner-content .hh.hhq + .hh.hha { margin-top: 2em; font-size: 17px; } #inner-footer .hh.hha:before, #inner-content .hh.hha:before { content: "A"; background: #ff8d8d; } #inner-footer .btn, #inner-content .btn { margin: 0.5em 0.5em 0.5em 0; text-decoration: none; } #inner-footer a.btn:hover, #inner-content a.btn:hover { text-decoration: none; } .btn, .btn-wrap a { border-radius: var(--wp--custom--rounded--small); } .btn.normal, .btn-normal a { font-size: 18px; line-height: 1.7; padding: 0.4em 1.3em; text-decoration: none; vertical-align: middle; transition: var(--wp--custom--transition--default); border-radius: var(--wp--custom--rounded--medium); display: inline-block; font-weight: bold; color: #fff; background-color: var(--wp--custom--preset--sango-main); } .btn-normal a, .btn-cubic1 a, .btn-cubic2 a, .btn-cubic3 a { background-color: var(--sgb--btn--bg-color); } .btntext { display: inline-block; padding: 3px 15px; } .btntext:hover { background: #efefef; } /** ボックス **/ .sng-box p { margin: 0; padding: 0; } .sng-box .say { margin-bottom: 0; } .sng-box .faceicon { padding-right: 20px; } #inner-content .sng-box > *:first-child { margin-top: 0; } /** その他のスタイル・装飾 **/ .orange { color: #ffb36b; } .green { color: #75c375; } .blue { color: #009EF3; } .red { color: #ee7b7b; } .silver { color: silver; } .keiko_blue { background: linear-gradient(transparent 50%, rgba(107, 182, 255, 0.24) 50%); } .keiko_yellow { background: linear-gradient(transparent 50%, rgba(255, 252, 107, 0.69) 50%); } .keiko_green { background: linear-gradient(transparent 50%, rgba(151, 232, 154, 0.69) 50%); } .keiko_red { background: linear-gradient(transparent 50%, rgba(255, 88, 88, 0.24) 50%); } .labeltext { display: inline-block; margin-right: 5px; padding: 5px; color: #fff; font-size: 0.9em; font-weight: bold; line-height: 1; } /*画像のサイズ*/ .entry-content img.img_so_small { max-width: 250px; } .entry-content img.img_small { max-width: 100%; width: 350px; } img.img_border { border: solid 3px #eaedf2; } .shadow, .wp-block-sgb-btn .shadow { box-shadow: var(--wp--custom--shadow--medium); } .bigshadow, .wp-block-sgb-btn .bigshadow { box-shadow: var(--wp--custom--shadow--large); } .smallspace { margin: 1em 0 !important; } .nospace { margin: 0 !important; } /*引用別スタイル*/ .entry-content .quote_silver { padding: 35px 1.5em; border: none; background: whitesmoke; } .entry-content .quote_silver:before { top: 10px; left: 15px; color: #dadada; } .entry-content .quote_silver:after { position: absolute; right: 15px; bottom: 10px; color: #dadada; font-family: FontAwesome; font-size: 25px; line-height: 1; content: "\f10e"; } /*線を引く*/ .entry-content hr { margin: 3em 0; border: solid 3px #dadada; border-width: 2px 0 0 0; } .entry-content hr.dotted { border-top: dotted 2px #dadada; } /*記事内関連[kanren]*/ .table { display: table; } .tbcell { display: table-cell; vertical-align: middle; } .tbcell img { width: 100%; } .sng-link-time { display: block; margin-bottom: 5px; font-size: 13.5px; color: #b5b5b5; } .sng-link-time i { margin-right: 3px; } .linkto { max-width: 550px; width: 100%; margin: 1em 0 1.5em; padding: 10px; border: solid 2px #eaedf2; border-radius: 3px; background: #fff; color: #555; font-weight: bold; text-decoration: none !important; } .linkto:hover { background: #eaedf2; text-decoration: none; } .linkto img { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); transition: 0.3s; } .linkto:hover img { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35); } .linkto .tbimg { width: 100px; } .linkto figure { width: 110px; padding-right: 10px; /*for old ver*/ } .linkto .tbtext { padding-left: 10px; line-height: 1.5; text-align: left; } .sidebar .textwidget .linkto { border: none; margin: 0; } .sidebar .textwidget .linkto:last-child { padding-bottom: 1em; } /*他サイトへのリンクカード[sanko]*/ .reference { display: table; max-width: 450px; width: 100%; margin: 1em 0 1.5em; padding: 13px 10px 13px 0; border-radius: var(--wp--custom--rounded--small); background: #f5f5f5; box-shadow: var(--wp--custom--shadow--solid); color: #555; font-weight: bold; text-decoration: none !important; } .reference:hover { box-shadow: var(--wp--custom--shadow--solid-hover); color: #888; text-decoration: none; } .reference .refttl { width: 70px; margin: 10px; border-right: solid 2px #dadada; text-align: center; line-height: 1.5; } .reference .refttl:before { display: block; color: #ffb36b; font-family: FontAwesome; font-size: 1.5em; content: "\f02e"; } .reference .refcite { width: 200px; width: calc(100% - 70px); padding-left: 10px; font-size: 0.95em; line-height: 1.5; } .reference .refcite span { display: block; color: #ababab; font-size: 0.9em; } /*補足説明[memo]*/ .memo { margin-bottom: 1.5em; padding: 1em; background: #fff9e5; color: #545454; } .memo_ttl { margin-bottom: 5px; color: #ffb36b; font-size: 1.2em; font-weight: bold; } .memo_ttl:before { display: inline-block; width: 30px; height: 30px; line-height: 30px; margin: 0 3px 0 0; border-radius: 50%; background: #ffb36b; color: #fff; font-family: FontAwesome; font-weight: normal; text-align: center; vertical-align: middle; content: "\f040"; } .fa5 .memo_ttl:before { content: "\f303"; font-size: 17px; } .memo p { margin: 0 0 5px; } /*注意説明 [alert]*/ .memo.alert { background: #ffebeb; } .memo.alert .memo_ttl { color: #ff8376; } .memo.alert .memo_ttl:before { background: #ff8376; content: "\f12a"; } /*タグ付きのコードに[codebox]*/ .pre_tag { margin: 1em 0 1.5em; } .pre_tag > span { display: inline-block; padding: 2px 10px; border-radius: 10px 10px 0 0; color: #fff; font-size: 0.9em; } .pre_tag p { margin: 0; } /** 目次:TOC+とEasyTableOfContentsに対応 **/ #toc_container, #ez-toc-container { position: relative; width: 100% !important; margin: 2.5em 0; padding: 20px 15px; font-size: 0.95em; background: #f9f9f9; border-radius: var(--wp--custom--rounded--small); box-shadow: var(--wp--custom--shadow--solid); } #toc_container .toc_title, .entry-content .ez-toc-title-container { display: inline-block; position: relative; margin: 0; padding: 5px 0 5px 58px; font-size: 23px; font-weight: bold; } #toc_container .toc_title:before, .entry-content .ez-toc-title-container:before { display: inline-block; position: absolute; top: 0; left: 0; width: 50px; height: 50px; border-radius: 50%; color: #fff; font-family: FontAwesome; font-size: 20px; font-weight: normal; text-align: center; line-height: 50px; content: "\f0ca"; } .toc_toggle { display: inline-block; vertical-align: middle; width: 75px; height: 25px; margin-left: 10px; border-radius: 5px; background: #cbcbcb; color: #fff; font-size: 14px; text-align: center; line-height: 25px; } #toc_container .toc_toggle a { color: #fff; text-decoration: none; } #toc_container ul, #ez-toc-container ul { list-style-type: disc; padding: 0; border: none; } #toc_container .toc_list, #ez-toc-container .ez-toc-list { margin-bottom: 0; margin-left: 18px; color: #585858; } #toc_container .toc_list li, .ez-toc-list li { font-weight: bold; } #toc_container .toc_list li a, .ez-toc-list li a { color: #555; } .toc_list a { text-decoration: none; } #toc_container .toc_list li ul, #ez-toc-container .ez-toc-list li ul { margin: 5px; padding-left: 15px; } #toc_container .toc_list li ul li, .ez-toc-list li ul li { margin: 0; font-size: 0.95em; font-weight: normal; } .toc_number { padding-right: 2px; font-family: Quicksand, sans-serif; font-size: 1.1em; font-weight: bold; } #ez-toc-container p { margin: 0; } .ez-toc-list .active { background: #efefef; } /* END 目次 */ /*ボックス内の箇条書きの線を消す*/ .sc ul, .sc ol, .list-raw ul, .list-raw ol, .sng-box ul, .sng-box ol, .memo ul, .memo ol { margin: 5px 0; padding: 0 0 0 1.4em; border: none; box-shadow: none; background: transparent; } .amazonjs_info ul { border: none; } /*箇条書き内のアイコンの余白調整*/ blockquote .li-chevron li:before, blockquote .li-check li:before, blockquote .li-yubi li:before, blockquote .li-niku li:before, .sng-box .li-chevron li:before, .sng-box .li-check li:before, .sng-box .li-yubi li:before, .sng-box .li-niku li:before, .memo .li-chevron li:before, .memo .li-check li:before, .memo .li-yubi li:before, .memo .li-niku li:before, .alert .li-chevron li:before, .alert .li-check li:before, .alert .li-yubi li:before, .alert .li-niku li:before, .li-chevron li li:before, .li-check li li:before, .li-yubi li li:before, .li-niku li li:before { left: 0; } blockquote .ol-circle ol, .sng-box .ol-circle ol, .memo .ol-circle ol, .alert .ol-circle ol { padding-left: 0; } /** 上記で指定したスタイルのタブレットサイズ〜の上書き **/ @media only screen and (min-width: 481px) { .rate-box { max-width: 580px; margin: 0 auto 1em; font-size: 17px; } .rateline { padding: 10px 10px 10px 20px; } .rate-thing { max-width: 380px; width: calc(100% - 144px); } .rate-star { width: 144px; } #inner-content p.hh { font-size: 1.3em; } /*目次*/ #toc_container, #ez-toc-container { padding: 20px 25px; } .fixed-sidebar .toc_widget_list a { font-size: 0.9em; padding: 4px 5px 4px 7px; } /*END 481px~*/ } /*消しちゃダメ*/ /** その他優先的に指定するスタイル **/ .small, #inner-content .small { font-size: 0.75em; } .big, #inner-content .big { font-size: 1.3em; } .sobig, #inner-content .sobig { font-size: 2.3em; } .noborder { border: none; }