@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");
}
/*
タグ部分)のデザイン*/
.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 */
}
}
|