@import url(https://fonts.googleapis.com/css?family=Lato:400,700); /************************************************* 全ブロックの共通設定 *************************************************/ /*BODY全体に関する設定*/ body { text-align:center; font-size: 14px; color:#333333; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; background: #ffffff url("//director.blog.shinobi.jp/File/page_back1.gif"); } /*の全ての設定*/ td { text-align:center; } /*table全ての設定*/ table{ border-collapse: collapse; vertical-align:middle; font-size:12px; } /*通常のリンクの設定*/ a{ text-decoration: none;} a:link {color:#105D89;} /*過去に見たことがあるページのリンクの設定*/ a:visited{color:#105D89} /*カーソルが合っている状態のリンクの設定*/ a:hover {color:#601882;text-decoration:underline;} /*アクティブ状態のリンクの設定*/ a:active {color:#105D89;} /*全体の設定*/ #mainBlock { width:1100px; text-align: center; margin:0 auto; border: solid 1px #DCDCDC; background-color:#FDFDFD; } #WraperBlock { width: 330px; text-align: left; float: right;} img,emoji{margin:0px; padding:0px; border:0px;} ul,ol,dl,dt,dd{margin:0px; padding:0px;} /*テキスト左寄せ*/ .left { text-align:left; } /*テキスト中央寄せ*/ .center { text-align:center; } /*テキスト右寄せ*/ .right { text-align:right; } / /************************************************* トップブロック用デザイン *************************************************/ /*一番上のブロック(タイトルが書かれる場所)の設定*/ #TopBlock { width:1100px; border: solid 0px #666; } table.TopBox{ width:1100px; height: 140px; text-align: left; background-image:url('//director.blog.shinobi.jp/File/top_mtf4_202209.png'); background-repeat:no-repeat; background-position: center top; background-color:#222222; } td.AdminBlock { text-align:left; vertical-align: top; font-size:11px; padding: 0px 10px; } /*ページタイトル文字部分の設定*/ td.TopTitle { height:40px; background-color:062048; font-weight:bold; font-size:24px; text-align:right; padding-right: 15px; } .TopTitle a:link {color:#fff;} .TopTitle a:visited {color:#fff;} .TopTitle a:hover {color:#000;background-color:#fff;} /*ページタイトル文字色の設定*/ .TopTitleFont { } /*ページタイトルの下に来るブログの説明文書*/ #TopExplanation { } /*TOPページのロゴボタンの設定*/ td.LogoBlock { text-align:left; vertical-align: top; font-size:11px; padding:0px 0px 0px 0px; background-repeat: no-repeat; background-position: left top; } /*TOPページのロゴボタンの設定(マウスオーバー)*/ a.top-logo{ background-image:url(//director.blog.shinobi.jp/File/log_bgwhite4_2.png); display:block; width:560px; height:108px; text-indent:-9999px; } a.top-logo:hover{ background-position:left bottom; } /************************************************* フッターブロック用デザイン *************************************************/ /*一番下のブロック(著作権表示が書かれる場所)の設定*/ #FooterBlock {clear:both; text-align:centert; font-size:11px; } /************************************************* プラグインブロック用デザイン *************************************************/ /*プラグイン表示箇所全体の設定*/ .PluginBlock { text-align: left; line-height: 180% } /*プラグイン表示箇所の背景や余白設定*/ .PluginInnerBlock { padding: 5px 0px 0px 0px; } /*プラグインのタイトル(名称)部分の設定*/ .PluginTitle { color:#4D760B; border-bottom: solid 1px #DCDCDC; font-weight:bold; font-size:105%; } ul{list-style:none;} li{ list-style:none; padding-left:20px; background:url(//director.blog.shinobi.jp/File/pink_point03_2.gif) no-repeat left center; } /*プラグインの説明部分の設定*/ .PluginExplanation { padding: 0px 10px; font-size:100%; } /*プラグインが表示される場所の設定*/ .PluginContents { padding: 10px; font-size:95%; } /*コメント返信したときの装飾*/ .plugin_cm_with_res{ background:url(//director.blog.shinobi.jp/File/comment03_m_2.gif) no-repeat right bottom; } /*ブログ内検索の設定*/ .box{ padding:0 2px; border:1px solid #666; } .btn{ margin-bottom: 3px; border:1px solid #666; background-color:#999; color:#fff; } /*忍者式メルフォームの設定*/ .PluginContents .main br{ line-height: 1px; } .PluginContents .main input{ width: 90%; padding: 0 2px; border:1px solid #666; } .PluginContents .main textarea{ width: 90%; padding: 0 2px; border:1px solid #666; } div.PluginContents div.main input.submit_button{ width: 50px; margin-bottom: 3px; border:1px solid #666; background-color:#999; color:#fff; } /************************************************* 記事ブロック用デザイン *************************************************/ /*記事内の画像の設定*/ #image1 { float: left; margin: 5px 15px 5px 5px; } #image2 { float: left; margin: 0px 11px 3px 20px; } #image3 { float: left; margin: 35px 11px 3px 20px; } #image4 { float: left; margin: 0px 11px 40px 20px; } /*記事内の引用*/ .quote_block { color: #b6cc82; font-size: 87%; line-height: 170%; margin:0px 20px 0px 20px; } /*記事内の引用_見出し*/ .quote_title { font-weight:bold; color:#b6cc82; font-size:105%; line-height: 160%; letter-spacing: 0.03em; padding-left: 0px; width:518px; background-color: #ffffff; } /*記事の「引用(小)」の設定*/ blockquote#simple01 { width: 280px; margin: 0px 0px 20px 220px; padding: 5px 0px 10px 30px; border: #b39aaf dotted; border-width: 0px 0px 1px 0px; color: #b6cc82; font-size: 90%; line-height: 150%; background: url(//director.blog.shinobi.jp/File/blockquote1_2.jpg) no-repeat 0 0; } blockquote#simple01 p { margin: 0; line-height: 150%; font-size: 90%; } /*記事の「引用(大)」の設定*/ blockquote#simple02 { width: 500px; margin: 0px 0px 10px 00px; padding: 5px 10px 10px 30px; border: #b39aaf dotted; border-width: 0px 0px 1px 0px; color: #b6cc82; font-size: 90%; line-height: 150%; background: url(//director.blog.shinobi.jp/File/899cf783.jpeg) no-repeat 0 0; } blockquote#simple02 p { margin: 0; line-height: 150%; font-size: 90%; } /*記事繰り返し処理全ての部分の設定*/ #EntryBlock { width: 750px; float: left; text-align: left; } /*記事表示部分の背景や余白等の設定*/ .EntryInnerBlock { padding:0px 20px 0px 20px; margin:10px 0px 10px 0px; text-align: left; border-top: solid 1px #DCDCDC; border-right: solid 1px #DCDCDC; border-bottom: solid 1px #DCDCDC; border-left: none; } /*各記事タイトル部分の設定*/ .EntryTitle { text-align: left; padding: 10px 10px 2px 0px; margin: 0px 10px 0px 10px; border-bottom: solid 5px #666666; font-size:230%; letter-spacing: 0.0em; line-height: 130%; } /*各記事タイトル部分の文字色設定*/ .EntryTitleFont { font-weight:bold; } .EntryDate { color:#b366cc; text-align:right; padding:5px; margin: 0px 5px 0px 0px; } /*各記事やコメント、トラックバックなどの総合のブロック部分*/ .EntryTextBox { margin: 5px 0px; } /*記事本文が記載される部分*/ .EntryText { padding: 10px; font-size:115%; line-height: 1.85; letter-spacing: 0.05em; font-feature-settings: "palt" 1; font-kerning: auto; } /*記事本文で強調したい部分1*/ .PointText { font-weight:bold; color:#DAA520; font-size:125%; line-height: 180%; letter-spacing: 0.03em; } /*記事本文で強調したい部分2*/ .PointText2 { font-weight:bold; color:#daa520; font-size:120%; line-height: 160%; letter-spacing: 0.03em; padding-left: 5px; border-left: 7px solid #c2131c; border-bottom: 1px solid #c2131c; background-color: #ffffff; } /*記事本文で強調したい部分3*/ .pt3 { font-weight:bold; color:#daa520; font-size:120%; line-height: 160%; letter-spacing: 0.03em; padding-left: 5px; border-left: 7px solid #c2131c; border-bottom: 1px solid #c2131c; background-color: #ffffff; } /*記事本文で強調したい部分4*/ .pt4 { font-weight:bold; font-size:130%; line-height: 160%; letter-spacing: 0.0em; padding-left: 0px; border-top: 1px solid #666666; border-bottom: 1px solid #666666; background-color: #; } /*記事本文で強調したい部分5*/ .pt5 { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #3399cc; border-style:solid; background:#0c5e8d; color:#ffffff; font-weight:bold; text-align:left; font-size:130%; line-height: 160%; letter-spacing: 0.0em; } /*記事本文で強調したい部分6*/ .pt6 { margin:0 0 10px 0; padding:2px 8px; border-width:5px 0; border-color: #0c5e8d; border-style:solid; background:#ebf8fe; color:#992e5a; font-weight:bold; text-align:left; font-size:140%; line-height: 230%; letter-spacing: 0.0em; } /*記事本文で強調したい部分7*/ .pt7 { border-left: 14px double #6aa30f; border-bottom: 1px dotted #6aa30f; text-align: left; background-color: #eff0ef; color: #992e5a; margin:0 0 10px 0; padding:10px 8px 2px 8px; font-weight:bold; text-align:left; font-size:150%; line-height: 160%; letter-spacing: 0.0em; } /*記事本文で強調したい部分8(あとがき)*/ .pt8 { margin:0 0 10px 0; padding:8px 8px 2px 8px; border-left:7px double #6aa30f; border-bottom: 1px dotted #6aa30f; background:#eff0ef; color:#992e5a; font-weight:bold; text-align:left; font-size:140%; line-height: 160%; letter-spacing: 0.0em; } /*記事本文で強調したい部分9*/ .pt9 { border-bottom: 1px dotted #aebfae; text-align: left; color: #333333; background-color: #eff0ef; font-size: 120%; font-weight:bold; margin:30px 0 30px 5px; padding: 3px 4px 2px 8px; width: ; } .pt9 span.s9{display:block; border-left:8px solid #6aa30f; padding-left:10px;} /*記事本文で強調したい部分10(追記)*/ .pt10 { margin:0 0 10px 0; padding:8px 8px 2px 8px; border-left:7px dotted #6aa30f; border-bottom: 1px dotted #6aa30f; background:#eff0ef; color:#992e5a; font-weight:bold; text-align:left; font-size:140%; line-height: 160%; letter-spacing: 0.0em; } /*追記文書が記載される部分*/ .EntryPsText { padding: 20px; text-align: right; font-size:110%; line-height: 180%; letter-spacing: 0.03em; } .closebutton { background-color:#666; color:#fff; } /*記事へのリンク(コメントやトラックバック等)の背景*/ .EntryFooter { text-align:right; padding:10px; margin: 0px 10px 0px 10px; font-size:100%; border-top: dashed 1px #B0B0B0; } /*記事の投稿者名が記載されている部分*/ .EntryUserName { } /*記事を投稿した日が記載されている部分*/ .EntryWriteDate { margin-left: 5px; } /*記事のカテゴリ名が記載されている部分*/ .EntryCategory { margin-left: 5px; } /*記事へのコメントリンクが記載されている部分*/ .EntryComment { margin-left: 5px; } /*記事へのトラックバックリンクが記載されている部分*/ .EntryTrackback { margin-left: 5px; } .PageTopLink{margin-left: 5px;} /*次の記事やHOMEへのリンクが表示される背景部分*/ .PageLinkBlock{ text-align:center; padding: 5px 10px 0px 10px; color: #C0C0C0; } /*記事本文(プライバシーポリシー枠・下部)*/ div.policybox { width: 510px; margin-bottom: 10px; } /*記事本文(プライバシーポリシー枠・上部)*/ div.policybox .inner { padding: 10px 20px; } /*記事本文(プライバシーポリシー・リスト)*/ ul.policybox { padding: 3px 10px 0px 10px; margin: 0; } ul.policybox li { list-style: none; text-indent: 0em; padding: 0 0 1em 1.2em; line-height: 1.2em; background-image : url(//director.blog.shinobi.jp/File/pink_point01_2.gif); background-repeat : no-repeat; background-position : left 15%; } /*記事本文末のまとめ部分*/ .matome { padding: 0px; font-size:100%; line-height: 190%; letter-spacing: 0.05em; color:#555555; background:#; } /*記事本文末のまとめ部分*/ .matome2 { padding: 0px; font-size:100%; line-height: 150%; letter-spacing: 0.00em; color:#555555; background:#f5f5f5; } /************************************************* 各コメント表示部分の設定 *************************************************/ /*コメント全体の設定*/ .CommentBlock{ padding:10px 40px; background-color:#FDFDFD; font-size:110%; } /*この記事にコメントする と書かれてる部分の設定*/ .CommentMenuTitle{ text-align: left; font-weight:bold; } /*コメントのタイトル、コメント、コメント情報の全ての背景部分*/ .CommentTextBox{ padding:10px; margin: 5px 0px; border: solid 1px #DCDCDC; } /*コメントのタイトル部分*/ .CommentTitle{ text-align: left; font-weight:bold; border-bottom:solid 1px #cc6699; } .CommentTitle ul{list-style:none;} .CommentTitle li{ list-style:none; padding-left:22px; background:url(//director.blog.shinobi.jp/File/comment04_m1.gif) no-repeat left center; } /*コメント部分*/ .CommentText{ padding: 10px; } /*投稿者や投稿時間などが表示されている部分*/ .CommentFooter{ text-align:right; padding:5px; } /*投稿者名の部分*/ .CommentUserName{ margin-left: 5px; font-weight:bold; } /*投稿者のホームページへのリンク部分*/ .CommentURL{ margin-left: 5px; } /*投稿された時間が記載されている部分*/ .CommentWriteDate{ margin-left: 5px; } /*コメント編集へのリンク部分*/ .CommentEdit{ margin-left: 5px; } /*コメントを投稿するフォーム全体の設定*/ .CommentFormBlock{ margin-bottom:20px; } /*コメントフォーム用テーブル*/ .CommentFormTable{ font-size:100%; } /*コメントフォームTHタグ設定*/ .CommentFormTh{ padding-top:5px; text-align:right; } /*コメントフォームTDタグ設定*/ .CommentFormTd{ padding-top:5px; text-align:left; } /*コメントフォーム送信ボタンのTDタグ設定*/ .CommentFormSubmit{ text-align:left; } /*inputタグやtextareaの設定*/ .CommentForms{ font-size:12px; border:1px solid #666; color:#666; } .button{ border:1px solid #666; background-color:#999; color:#fff; } /************************************************* トラックバック表示部分の設定 *************************************************/ /*トラックバック全体の設定*/ .TrackbackBlock{ padding:10px; } /*トラックバックメニューのタイトル部分*/ .TrackbackMenuTitle{ text-align: left; font-weight:bold; } /*トラックバックのタイトル、記事、リンク部分の総合設定*/ .TrackbackTextBox{ padding:10px; margin: 5px 0px; border: solid 1px #666; } /*トラックバックタイトルの部分*/ .TrackbackTitle{ text-align: left; font-weight:bold; border-bottom: solid 1px #e06897; } .TrackbackTitle ul{list-style:none;} .TrackbackTitle li{ list-style:none; padding-left:15px; background:url(//director.blog.shinobi.jp/File/pink_point01.gif) no-repeat left center; } /*トラックバックの記事部分*/ .TrackbackText{ padding: 10px; line-height:140%; } /*投稿されたブログ名やリンクなどを表示する部分の設定*/ .TrackbackFooter{ text-align:right; padding:5px; } /*トラックバック元のブログ名部分*/ .TrackbackUserName{ margin-left: 5px; font-weight:bold; } /*トラックバック元へのリンク部分*/ .TrackbackFromURL{ margin-left: 5px; } /*トラックバックされた日付部分*/ .TrackbackWriteDate{ margin-left: 5px; } /*この記事のトラックバック と書かれた部分の設定*/ .TrackbackURLTitle{ text-align: left; font-size: 12px; } /*トラックバックする為のURLが記載されているフォーム部分の設定*/ .TrackbackURL{ width:350px; border:1px solid #666; } /************************************************* 各プラグイン共通項目用設定 *************************************************/ /*各プラグイン処理内の基本デザイン*/ .Plugin_data { text-align:left; padding:1px; border-bottom: dashed 1px #DCDCDC; } /*各プラグイン処理内基本デザインの下に記載する日付など*/ .Plugin_data_date { text-align:right; } /************************************************* カレンダープラグイン用デザイン *************************************************/ /*カレンダー日付移動用テーブル(前月、次月へのリンクなど)*/ .CalendarMoveTable { padding:3px; width:150px; margin:0 auto; } /*カレンダー日付移動用テーブル、タグ部分のデザイン*/ .CalendarMoveTr { } /*カレンダー日付移動用テーブル内、左側td部分のデザイン*/ .CalendarPrevTd { } /*カレンダー日付移動用テーブル内、中央td部分のデザイン*/ .CalendarNowTd { } /*カレンダー日付移動用テーブル内、右側td部分のデザイン*/ .CalendarNextTd { } /*カレンダー表示用テーブル*/ .CalendarTable { width:150px; padding:3px; margin:0 auto; border: solid 1px #666; } /*------------------------------------------------------- カレンダーテーブル -> 曜日表示部分デザイン -------------------------------------------------------*/ /*曜日表示部分(タグ部分)のデザイン*/ .CalendarWdayTr { } /*曜日表示部分、日曜日のタグ部分デザイン*/ .CalendarWdaySun { } /*曜日表示部分、平日のタグ部分デザイン*/ .CalendarWday { } /*曜日表示部分、土曜日のタグ部分デザイン*/ .CalendarWdaySat { } /*------------------------------------------------------- カレンダーテーブル -> 日付表示部分デザイン -------------------------------------------------------*/ /*日付表示部分(タグ部分)のデザイン*/ .CalendarTr { border: solid 1px #666; } /*日付表示部分、日曜日のタグ部分デザイン*/ .CalendarTdSun { border: solid 1px #666; } /*日付表示部分、土曜日のタグ部分デザイン*/ .CalendarTdSat { border: solid 1px #666; } /*日付表示部分、平日曜日のタグ部分デザイン*/ .CalendarTd { border: solid 1px #666; } /*記事が存在する場所の設定*/ .CalendarTdLink { background-color:#666; } /*記事が存在する日付の文字色の設定*/ .CalendarTdLinkFont { color:#FFF; } /*------------------------------------------------------- コメント -> 管理者返信部分デザイン -------------------------------------------------------*/ .CommentResBlock { padding:10px 0px 10px 50px; } .CommentResBox { } .CommentResTitle { font-size:12px; font-weight:700; border-bottom: solid 1px #99cc33; } .CommentResTitle ul{list-style:none;} .CommentResTitle li{ list-style:none; padding-left:100px; background:url(//director.blog.shinobi.jp/File/comment04_m2.gif) no-repeat left center; } .CommentResText { padding:10px; } .CommentResFooter { text-align:right; padding:5px; } .nickname{margin-left: 5px;} .commentresdate{margin-left: 5px;} .sorry_tb { font-size:90%; color:#505050; background-color:#; border : solid 1px #DCDCDC; padding: 3px 10px 3px 10px; line-height:140%; width: 600px; } /************************************************* 引用デザイン.simple03 *************************************************/ blockquote.simple03{ background-color:#fef6f7; padding:1em 1em 1em 2em; position:relative; border-left:5px solid #bb6f8e; } blockquote.simple03:before{ content:"“"; font-size:500%; line-height:1em; color:#b7b7b7; position:absolute; left:0; top:0; } blockquote.simple03:after{ content:"”"; font-size:500%; line-height:1em; color:#b7b7b7; position:absolute; right:0; bottom:-45; } /************************************************* <p>タグの設定 *************************************************/ #EntryBlock p{ position:relative;top:0px;left:20px; width:660px; margin-top: 30px; margin-bottom: 30px; } /************************************************* ヨメレバ用ボタンの設定 *************************************************/ /*ヨメレバ用ボタンのリンクの設定*/ a.css_btn_class_yomereba:link {text-decoration: none; color: fff;} a.css_btn_class_yomereba:visited {text-decoration: none; color: fff;} a.css_btn_class_yomereba:active {text-decoration: none; color: fff;} a.css_btn_class_yomereba:hover {text-decoration: none; color: fff;} /*ヨメレバ用ボタンのCSSの設定*/ #css_btn_class_yomereba { background-color:#3bb3e0; font-size:14px; text-decoration:none; color:#fff; position:relative; padding:5px 20px; padding-right:50px; background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)) ); -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; } #css_btn_class_yomereba:active { top:3px; background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(62,184,229)), color-stop(1, rgb(44,160,202)) ); -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; } #css_btn_class_yomereba::before { background-color:#2591b4; background-image:url(//director.blog.shinobi.jp/File/right_arrow.png); background-repeat:no-repeat; background-position:center center; content:""; width:20px; height:20px; position:absolute; right:15px; top:50%; margin-top:-9px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0; } #css_btn_class_yomereba:active::before { top:50%; margin-top:-12px; -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6; } /************************************************* 拍手返信下部の「楽天」の文字設定 *************************************************/ p.rakuten { font-style:mormal;font-weight:mormal;font-size:85%;line-height:140%; } /************************************************* Yahoo!ドラマの「あらすじ」の引用文字設定 *************************************************/ p.arasuji { font-style:mormal;font-weight:mormal;font-size:90%;line-height:180%; } /************************************************* 画像を「左右中央揃え」にする設定 *************************************************/ .tac { text-align: center; } /************************************************* ページ分割の、ページングナビゲーション *************************************************/ .btn { display: inline-block; padding: 10px; border-radius: 5px; /*optional*/ color: #aaa; font-size: .875em; } .pagination { background: #f2f2f2; padding: 20px; margin: 20px; } .page { display: inline-block; padding: 5px 20px; margin-right: 20px; border-radius: 3px; border: solid 1px #c0c0c0; background: #e9e9e9; box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1); font-size: 150%; font-weight: bold; text-decoration: none; color: #717171; text-shadow: 0px 1px 0px rgba(255,255,255, 1); } .page:hover, .page.gradient:hover { background: #fefefe; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEFEFE), to(#f0f0f0)); background: -moz-linear-gradient(0% 0% 270deg,#FEFEFE, #f0f0f0); } .page.active { border: none; background: #616161; box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8); color: #f0f0f0; text-shadow: 0px 0px 3px rgba(0,0,0, .5); } .page.gradient { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f8f8f8), to(#e9e9e9)); background: -moz-linear-gradient(0% 0% 270deg,#f8f8f8, #e9e9e9); } /************************************************* 共通タグ「記事下」の文字設定 *************************************************/ p.kijishita { font-style:mormal;font-weight:mormal;font-size:90%;line-height:170%; } /************************************************* BabyLinkのカスタマイズ設定 *************************************************/ /* BabyLinkのカスタマイズ設定 */ .babylink-box { border: 1px solid #ccc !important; padding: 15px 10px 0px 10px !important; width: 300px; } .babylink-image { width: 100px !important; height: 100px !important; } .babylink-title, .babylink-manufacturer, .babylink-description { font-size:small !important; margin-bottom: 10px !important; } /************************************************* ヨメレバのカスタマイズ20190113 *************************************************/ .cstmreba { width:98%; height:auto; margin:36px auto; font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif; line-height: 1.5; word-wrap: break-word; box-sizing: border-box; display: block; } .cstmreba a { transition: 0.8s ; color:#285EFF; /* テキストリンクカラー */ } .cstmreba a:hover { color:#FFCA28; /* テキストリンクカラー(マウスオーバー時) */ } .cstmreba .booklink-box, .cstmreba .kaerebalink-box, .cstmreba .osusumelink-box, .cstmreba .tomarebalink-box { width: 100%; background-color: #fafafa; /* 全体の背景カラー */ overflow: hidden; border-radius: 0px; box-sizing: border-box; padding: 12px 8px; box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26); } /* サムネイル画像ボックス */ .cstmreba .booklink-image, .cstmreba .kaerebalink-image, .cstmreba .tomarebalink-image { width:150px; float:left; margin:0 14px 0 0; text-align: center; background: #fff; } .cstmreba .booklink-image a, .cstmreba .kaerebalink-image a, .cstmreba .tomarebalink-image a { width:100%; display:block; } .cstmreba .booklink-image a img, .cstmreba .kaerebalink-image a img, .cstmreba .tomarebalink-image a img { margin:0 ; padding: 0; text-align:center; background: #fff; } .cstmreba .booklink-info,.cstmreba .kaerebalink-info,.cstmreba .tomarebalink-info { overflow:hidden; line-height:170%; color: #333; } /* infoボックス内リンク下線非表示 */ .cstmreba .booklink-info a, .cstmreba .kaerebalink-info a, .cstmreba .tomarebalink-info a { text-decoration: none; } /* 作品・商品・ホテル名 リンク */ .cstmreba .booklink-name>a, .cstmreba .kaerebalink-name>a, .cstmreba .tomarebalink-name>a { font-size:16px; } /* タイトル下にPタグ自動挿入された際の余白を小さく */ .cstmreba .kaerebalink-name p, .cstmreba .booklink-name p, .cstmreba .tomarebalink-name p { margin: 0; } /* powered by */ .cstmreba .booklink-powered-date, .cstmreba .kaerebalink-powered-date, .cstmreba .tomarebalink-powered-date { font-size:10px; line-height:150%; } .cstmreba .booklink-powered-date a, .cstmreba .kaerebalink-powered-date a, .cstmreba .tomarebalink-powered-date a { color:#333; border-bottom: none ; } .cstmreba .booklink-powered-date a:hover, .cstmreba .kaerebalink-powered-date a:hover, .cstmreba .tomarebalink-powered-date a:hover { color:#333; border-bottom: 1px solid #333 ; } /* 著者・住所 */ .cstmreba .booklink-detail,.cstmreba .kaerebalink-detail,.cstmreba .tomarebalink-address { font-size:12px; } .cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img,.cstmreba .tomarebalink-link1 div img { display:none !important; } .cstmreba .kaerebalink-link1, .cstmreba .booklink-link2,.cstmreba .tomarebalink-link1 { display: inline-block; width: 100%; margin-top: 5px; } .cstmreba .booklink-link2>div, .cstmreba .kaerebalink-link1>div, .cstmreba .tomarebalink-link1>div { float:left; width:24%; min-width:128px; margin:0.5%; } /***** ボタンデザインここから ******/ .cstmreba .booklink-link2 a, .cstmreba .kaerebalink-link1 a, .cstmreba .tomarebalink-link1 a { width: 100%; display: inline-block; text-align: center; box-sizing: border-box; margin: 1px 0; padding:3% 0.5%; border-radius: 8px; font-size: 13px; font-weight: bold; line-height: 180%; color: #fff; box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); } /* トマレバ */ .cstmreba .tomarebalink-link1 .shoplinkrakuten a {background: #76ae25; border: 2px solid #76ae25; }/* 楽天トラベル */ .cstmreba .tomarebalink-link1 .shoplinkjalan a { background: #ff7a15; border: 2px solid #ff7a15;}/* じゃらん */ .cstmreba .tomarebalink-link1 .shoplinkjtb a { background: #c81528; border: 2px solid #c81528;}/* JTB */ .cstmreba .tomarebalink-link1 .shoplinkknt a { background: #0b499d; border: 2px solid #0b499d;}/* KNT */ .cstmreba .tomarebalink-link1 .shoplinkikyu a { background: #bf9500; border: 2px solid #bf9500;}/* 一休 */ .cstmreba .tomarebalink-link1 .shoplinkrurubu a { background: #000066; border: 2px solid #000066;}/* るるぶ */ .cstmreba .tomarebalink-link1 .shoplinkyahoo a { background: #ff0033; border: 2px solid #ff0033;}/* Yahoo!トラベル */ .cstmreba .tomarebalink-link1 .shoplinkhis a { background: #004bb0; border: 2px solid #004bb0;}/*** HIS ***/ /* カエレバ */ .cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;} /* Yahoo!ショッピング */ .cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;} /* ベルメゾン */ .cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;} /* セシール */ .cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;} /* 価格コム */ /* ヨメレバ */ .cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;} /* Kindle */ .cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;} /* 楽天kobo */ .cstmreba .booklink-link2 .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;} /* honto */ .cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;} /* ehon */ .cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;} /* 紀伊國屋書店 */ .cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;} /* 図書館 */ /* カエレバ・ヨメレバ共通 */ .cstmreba .kaerebalink-link1 .shoplinkamazon a, .cstmreba .booklink-link2 .shoplinkamazon a { background:#FF9901; border: 2px solid #ff9901; } /* Amazon */ .cstmreba .kaerebalink-link1 .shoplinkrakuten a, .cstmreba .booklink-link2 .shoplinkrakuten a { background: #bf0000; border: 2px solid #bf0000; } /* 楽天 */ .cstmreba .kaerebalink-link1 .shoplinkseven a, .cstmreba .booklink-link2 .shoplinkseven a { background:#225496; border: 2px solid #225496; } /* 7net */ /****** ボタンカラー ここまで *****/ /***** ボタンデザイン マウスオーバー時ここから *****/ .cstmreba .booklink-link2 a:hover, .cstmreba .kaerebalink-link1 a:hover, .cstmreba .tomarebalink-link1 a:hover { background: #fff; } /* トマレバ */ .cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color: #76ae25; }/* 楽天トラベル */ .cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color: #ff7a15; }/* じゃらん */ .cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color: #c81528; }/* JTB */ .cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color: #0b499d; }/* KNT */ .cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color: #bf9500; }/* 一休 */ .cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color: #000066; }/* るるぶ */ .cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color: #ff0033; }/* Yahoo!トラベル */ .cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color: #004bb0; }/*** HIS ***/ /* カエレバ */ .cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;} /* Yahoo!ショッピング */ .cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; } /* ベルメゾン */ .cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; } /* セシール */ .cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;} /* 価格コム */ /* ヨメレバ */ .cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;} /* Kindle */ .cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; } /* 楽天kobo */ .cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; } /* honto */ .cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; } /* ehon */ .cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; } /* 紀伊國屋書店 */ .cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; } /* 図書館 */ /* カエレバ・ヨメレバ共通 */ .cstmreba .kaerebalink-link1 .shoplinkamazon a:hover, .cstmreba .booklink-link2 .shoplinkamazon a:hover { color:#FF9901; } /* Amazon */ .cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover, .cstmreba .booklink-link2 .shoplinkrakuten a:hover { color: #bf0000; } /* 楽天 */ .cstmreba .kaerebalink-link1 .shoplinkseven a:hover, .cstmreba .booklink-link2 .shoplinkseven a:hover { color:#225496;} /* 7net */ /***** ボタンデザイン マウスオーバー時ここまで *****/ .cstmreba .booklink-footer { clear:both; } /***** 解像度768px以下のスタイル *****/ @media screen and (max-width:768px){ .cstmreba .booklink-image, .cstmreba .kaerebalink-image, .cstmreba .tomarebalink-image { width:100%; float:none; } .cstmreba .booklink-link2>div, .cstmreba .kaerebalink-link1>div, .cstmreba .tomarebalink-link1>div { width: 32.33%; margin: 0.5%; } .cstmreba .booklink-info, .cstmreba .kaerebalink-info, .cstmreba .tomarebalink-info { text-align:center; padding-bottom: 1px; } } /***** 解像度480px以下のスタイル *****/ @media screen and (max-width:480px){ .cstmreba .booklink-link2>div, .cstmreba .kaerebalink-link1>div, .cstmreba .tomarebalink-link1>div { width: 49%; margin: 0.5%; } } /***** jQueryで作る「ページトップへ戻る」 *****/ .scrollTop { position: fixed; right: 20px; bottom: 30px; opacity: 0; transition: all 0.4s ease-in-out 0s; } .scrollTop a { font-size: 18px; color: #fff; background: #; padding: 20px; } .scrollTop a:hover{ background: #; } /***** マーカー太い線・ピンク色 細字 *****/ .marker-pink { background: linear-gradient(transparent 60%, #ff99cc 0%); } /***** マーカー太い線・黄色 細字 *****/ .marker-yellow { background: linear-gradient(transparent 60%, #ffff00 0%); } /***** マーカー太い線・オレンジ色 細字 *****/ .marker-P-orange { background: linear-gradient(transparent 60%, #ffddbc 0%); } /***** めくれたテープ風の枠 *****/ .box25{ position:relative; background: #fff0cd; box-shadow: 0px 0px 0px 5px #fff0cd; border: dashed 2px white; padding: 0.2em 0.5em; color: #454545; margin: 20 50px; word-wrap: break-word; } .box25:after{ position: absolute; content: ''; right: -7px; top: -7px; border-width: 0 15px 15px 0; border-style: solid; border-color: #ffdb88 #fff #ffdb88; box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15); } .box25 p { margin: 0; padding: 0; } /************************************************* 引用デザイン.simple06(ツイッター用) *************************************************/ blockquote.simple06{ background-color:#f5f8fa; padding:1em 1em 1em 2em; position:relative; border-left:5px solid #1da1f2; } blockquote.simple06:before{ content:"“"; font-size:400%; line-height:1em; color:#8ed0f9; position:absolute; left:0; top:0; } blockquote.simple06:after{ content:"”"; font-size:400%; line-height:1em; color:#8ed0f9; position:absolute; right:0; bottom:-45; } /************************************************* チャット風『吹き出し』の共通設定 *************************************************/ /* 全体 */ .sb-box { position: relative; overflow: hidden; } /* アイコン画像 */ .icon-img { position: absolute; overflow: hidden; top: 0; /* 画像の位置を上から0に */ width: 80px; /* 画像の幅 */ height: 80px; /* 画像の高さ */ } /* アイコン画像(左) */ .icon-img-left { left: 0; /* 画像の位置を左から0に */ } /* アイコン画像(右) */ .icon-img-right { right: 0; /* 画像の位置を右から0に */ } /* アイコン画像 */ .icon-img img { border-radius: 50%; /* 画像を丸く表示する */ border: 2px solid #eee; /* 画像の縁取りの太さとカラー */ } /* アイコンネーム */ .icon-name { position: absolute; width: 80px; /* ネームの最大幅を画像と同じに */ text-align: center; /* ネームの位置をセンターに */ top: 83px; /* ネームの位置を上から83に */ color: #777; /* ネームのカラー */ font-size: 10px; /* ネームのフォントサイズ */ } /* アイコンネーム(左) */ .icon-name-left { left: 0; /* ネームの位置を左から0に */ } /* アイコンネーム(右) */ .icon-name-right { right: 0; /* ネームの位置を右から0に */ } /* 吹き出し */ .sb-side { position: relative; float: left; margin: 0 105px 40px 105px; /* 吹き出しの上下左右の余白 */ } .sb-side-right { float: right; } /* 吹き出し内のテキスト */ .sb-txt { position: relative; border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */ border-radius: 6px; /* 吹き出しを角丸に */ background: #fff; /* 吹き出しの背景色 */ color: #333; /* 吹き出し内のテキストのカラー */ font-size: 15px; /* 吹き出し内のフォントサイズ */ line-height: 1.7; /* 吹き出し内のテキストが2行以上になった時の行間 */ padding: 18px; /* 吹き出し内の上下左右の余白 */ } .sb-txt > p:last-of-type { padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */ margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */ } /* 吹き出しの三角 */ .sb-txt:before { content: ""; position: absolute; border-style: solid; top: 16px; /* 吹き出し内の三角の位置 */ z-index: 3; } .sb-txt:after { content: ""; position: absolute; border-style: solid; top: 15px; /* beforeより-1px */ z-index: 2; /* beforeより-1 */ } /* 吹き出しの三角(左) */ .sb-txt-left:before { left: -7px; border-width: 7px 10px 7px 0; border-color: transparent #fff transparent transparent; /* 背景色と同じカラーに */ } .sb-txt-left:after { left: -10px; /* beforeより-3px */ border-width: 8px 10px 8px 0; /* beforeより上下+1px */ border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */ } /* 吹き出しの三角(右) */ .sb-txt-right:before { right: -7px; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent #fff; /* 背景色と同じカラーに */ } .sb-txt-right:after { right: -10px; /* beforeより-3px */ border-width: 8px 0 8px 10px; /* beforeより上下+1px */ border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */ } /* 767px(iPad)以下 */ @media (max-width: 767px) { /* アイコン画像 */ .icon-img { width: 60px; /* 画像の幅を-20px */ height: 60px; /* 画像の高さを-20px */ } /* アイコンネーム */ .icon-name { width: 60px; /* 画像の幅に合わせて-20px */ top: 62px; /* ネームの位置を上から62に */ font-size: 9px; /* ネームのフォントサイズを-1px */ } /* 吹き出し(左) */ .sb-side-left { margin: 0 0 30px 78px; /* 吹き出し(左)の上下左右の余白を狭く */ } /* 吹き出し(右) */ .sb-side-right { margin: 0 78px 30px 0; /* 吹き出し(右)の上下左右の余白を狭く */ } /* 吹き出し内のテキスト */ .sb-txt { padding: 12px; /* 吹き出し内の上下左右の余白を-6px */ } }