@charset "utf-8";


/*ちまきちゃんのスマートフォン版CSS*/

/*timakiboxはちまきちゃんの画像とライターさんのコメント全体をかこっているボックスです*/
#timakibox
{width: 100%; height: auto;}
#timakibox:after
{content: ""; display: block; clear: both;}

/*767px以下になると以下のCSSを適応するとおいう意味です。*/
@media(max-width:767px)
{

/*timakicomeはライターさんのコメントと、吹き出しを囲っているボックスです*/
.timakicome
{
width: 100%; height: auto; float: right;
padding: 15px;
border-radius: 20px;
background: #fff;
border: 3px solid #dc7094;
position: relative;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}

/*timakiはちまきちゃんの画像を囲っっているボックスです*/
.timaki
{
width: 100%; height: auto; float: right;
margin:auto;
margin-top: 10px;
padding: 5px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box
}

/*timaki01～05はちまきちゃんの画像を変えれるクラス名をそれぞれ用意しています*/
/*ライターさんのコメントの箇所に<div>系の要素をいくつか入れてもらうのですがその時に<div class="timaki01">という箇所があります。*/
/*そこを01～05に変えるだけで以下のCSSは働き、画像を変更できるという事です。*/
.timaki01{width: 200px; height: 200px;background: url("../images/timaki/timaki001.png") no-repeat; margin: 0 auto;}
.timaki02{width: 200px; height: 200px;background: url("../images/timaki/timaki002.png") no-repeat; margin: 0 auto;}
.timaki03{width: 200px; height: 200px;background: url("../images/timaki/timaki003.png") no-repeat; margin: 0 auto;}
.timaki04{width: 200px; height: 200px;background: url("../images/timaki/timaki004.png") no-repeat; margin: 0 auto;}
.timaki05{width: 200px; height: 200px;background: url("../images/timaki/timaki005.png") no-repeat; margin: 0 auto;}
.timaki06{width: 200px; height: 200px;background: url("../images/timaki/timaki006.png") no-repeat; margin: 0 auto;}
.timaki07{width: 200px; height: 200px;background: url("../images/timaki/timaki007.png") no-repeat; margin: 0 auto;}
.timaki08{width: 200px; height: 200px;background: url("../images/timaki/timaki008.png") no-repeat; margin: 0 auto;}
.timaki09{width: 200px; height: 200px;background: url("../images/timaki/timaki009.png") no-repeat; margin: 0 auto;}
.timaki10{width: 200px; height: 200px;background: url("../images/timaki/timaki010.png") no-repeat; margin: 0 auto;}
.timaki11{width: 200px; height: 200px;background: url("../images/timaki/timaki011.png") no-repeat; margin: 0 auto;}
.timaki12{width: 200px; height: 200px;background: url("../images/timaki/timaki012.png") no-repeat; margin: 0 auto;}
.timaki13{width: 200px; height: 200px;background: url("../images/timaki/timaki013.png") no-repeat; margin: 0 auto;}
.timaki14{width: 200px; height: 200px;background: url("../images/timaki/timaki014.png") no-repeat; margin: 0 auto;}
.timaki15{width: 200px; height: 200px;background: url("../images/timaki/timaki015.png") no-repeat; margin: 0 auto;}
.timaki16{width: 200px; height: 200px;background: url("../images/timaki/timaki016.png") no-repeat; margin: 0 auto;}
.timaki17{width: 200px; height: 200px;background: url("../images/timaki/timaki017.png") no-repeat; margin: 0 auto;}
.timaki18{width: 200px; height: 200px;background: url("../images/timaki/timaki018.png") no-repeat; margin: 0 auto;}
.timaki19{width: 200px; height: 200px;background: url("../images/timaki/timaki019.png") no-repeat; margin: 0 auto;}
.timaki20{width: 200px; height: 200px;background: url("../images/timaki/timaki020.png") no-repeat; margin: 0 auto;}
.timaki21{width: 200px; height: 200px;background: url("../images/timaki/timaki021.png") no-repeat; margin: 0 auto;}
.timaki22{width: 200px; height: 200px;background: url("../images/timaki/timaki022.png") no-repeat; margin: 0 auto;}
.timaki23{width: 200px; height: 200px;background: url("../images/timaki/timaki023.png") no-repeat; margin: 0 auto;}
.timaki24{width: 200px; height: 200px;background: url("../images/timaki/timaki024.png") no-repeat; margin: 0 auto;}
.timaki25{width: 200px; height: 200px;background: url("../images/timaki/timaki025.png") no-repeat; margin: 0 auto;}
.timaki26{width: 200px; height: 200px;background: url("../images/timaki/timaki026.png") no-repeat; margin: 0 auto;}
.timaki27{width: 200px; height: 200px;background: url("../images/timaki/timaki027.png") no-repeat; margin: 0 auto;}
.timaki28{width: 200px; height: 200px;background: url("../images/timaki/timaki028.png") no-repeat; margin: 0 auto;}
.timaki29{width: 200px; height: 200px;background: url("../images/timaki/timaki029.png") no-repeat; margin: 0 auto;}
.timaki30{width: 200px; height: 200px;background: url("../images/timaki/timaki030.png") no-repeat; margin: 0 auto;}
.timaki31{width: 200px; height: 200px;background: url("../images/timaki/timaki031.png") no-repeat; margin: 0 auto;}
.timaki32{width: 200px; height: 200px;background: url("../images/timaki/timaki032.png") no-repeat; margin: 0 auto;}

/*下の吹き出し三角形*/
.timakicome:after
{
border: 10px solid transparent;
border-top-color: #dc7094;
content: '';
position: absolute;
bottom: -20px;
right: 100px;}
}


/* スマホでの記事内デザイン書き換え */
div.article-body-outer div.article-body .htm{font-size:16px;text-align:center;}
div.article-body-outer div.article-body .htm [class^="capture"]{text-align:center;margin:32px 0;}
div.article-body-outer div.article-body .htm [class^="capture"] a{color:#004B91;text-decoration:underline;font-size:14px;display:inline-block;word-break:break-all;}
div.article-body-outer div.article-body .htm [class^="capture"] p{font-weight:normal;color:#CC3969;border:none;margin:0 0 8px;padding:0;}
div.article-body-outer div.article-body .htm [class^="capture"] img{border:1px solid #004B91;display:block;margin-top:8px;}
div.article-body-outer div.article-body .htm [class^="capture"] a:hover img{border-color:#CC3969;}
div.article-body-outer div.article-body .htm [class^="capture"] img{border:1px solid rgba(0,0,0,0.1);max-width:100%;height:auto;display:block;margin:8px auto 0;}
div.article-body-outer div.article-body .htm .capture-gray{border:1px solid #ECECEC;padding:24px;background-color:#FCFCFC;}
div.article-body-outer div.article-body .htm .capture-small{width:100%;display:table;border-collapse:separate;border:1px solid #ECECEC;margin-bottom:40px;}
div.article-body-outer div.article-body .htm .capture-small > div{display:table-cell;vertical-align:middle;text-align:left;}
div.article-body-outer div.article-body .htm .capture-small .capture-img img{padding:8px;max-width:120px;height:auto;margin:auto;display:block;border:none;}
div.article-body-outer div.article-body .htm .capture-small .capture-text{max-width:100%;height:auto;}
div.article-body-outer div.article-body .htm .capture-small br{display:none;}
div.article-body-outer div.article-body .htm .capture-text{padding:12px;}
div.article-body-outer div.article-body .htm .h2{text-align:left;font-size:24px;font-weight:bold;border-bottom:2px solid #D76F92;padding:8px 0;margin-bottom:16px;}
div.article-body-outer div.article-body .htm .h3{text-align:left;font-size:22px;font-weight:bold;border-bottom:1px solid #D5D5D5;padding:8px 0;margin-bottom:16px;}
div.article-body-outer div.article-body .htm .h4{text-align:left;font-size:18px;font-weight:bold;border:none;padding:0;margin-bottom:16px;}
div.article-body-outer div.article-body .htm .reaction{margin:32px 0;}
div.article-body-outer div.article-body .htm ul,div.article-body-outer div.article-body .htm ol{margin:32px 0;text-align:left;}
div.article-body-outer div.article-body .htm ul li{text-align:left;position:relative;line-height:1.4;margin-bottom:24px;list-style:none;padding:0;margin-left:0;}
div.article-body-outer div.article-body .htm ul.dot li:before{counter-increment:list;content:"";display:block;position:absolute;left:0px;height:5px;width:5px;border-radius:50%;background:#545454;top:12px;-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
div.article-body-outer div.article-body .htm .reaction li:nth-child(6n+1){color:#CC0000;}
div.article-body-outer div.article-body .htm .reaction li:nth-child(6n+2){color:#0000ff;}
div.article-body-outer div.article-body .htm .reaction li:nth-child(6n+3){color:#006633;}
div.article-body-outer div.article-body .htm .reaction li:nth-child(6n+4){color:#FF0033;}
div.article-body-outer div.article-body .htm .reaction li:nth-child(6n+5){color:#800080;}
div.article-body-outer div.article-body .htm .reaction li:nth-child(6n+6){color:#FF00FF;}
div.article-body-outer div.article-body .htm ul.dot{padding:0;}
div.article-body-outer div.article-body .htm ul.dot li{list-style:none;padding:0 0 0 16px;position:relative;padding:0 0 0 16px;line-height:1.4;font-weight:normal;margin:32px 0;}
div.article-body-outer div.article-body .htm ol.number{padding:0;}
div.article-body-outer div.article-body .htm ol.number li{padding:0;margin:0 0 16px 0;line-height:1.4;list-style-type:none;list-style-position:inside;counter-increment:cnt;}
div.article-body-outer div.article-body .htm ol.number li:before{display:marker;content:"("counter(cnt) ") ";margin-right:4px;}
div.article-body-outer div.article-body .htm ol.ranking{padding:0;}
div.article-body-outer div.article-body .htm ol.ranking li{padding:0;margin:0 0 16px 0;line-height:1.4;list-style-type:none;list-style-position:inside;counter-increment:rank;}
div.article-body-outer div.article-body .htm ol.ranking li:before{display:marker;content:counter(rank) "位 ";margin-right:4px;color:#CC3969;}
div.article-body-outer div.article-body .htm twitterwidget,div.article-body-outer div.article-body .htm iframe,div.article-body-outer div.article-body .htm .twitter-tweet-rendered{margin:16px auto!important;}
div.article-body-outer div.article-body .htm [class^="related"]{margin:32px 0;text-align:left;}
div.article-body-outer div.article-body .htm .related-strong{margin-bottom:40px;border:2px solid #D76F92;background-color:#fdfaf3;}
div.article-body-outer div.article-body .htm .related-strong .h4{margin:0;display:inline-block;background-color:#D76F92;color:#FFF;padding:4px 8px;font-weight:normal;font-size:16px;}
div.article-body-outer div.article-body .htm .related-strong .list{padding:16px;}
div.article-body-outer div.article-body .htm .list{margin:-8px 0 0 0;}
div.article-body-outer div.article-body .htm .list li{padding:0;margin:0 0 12px 0;}
div.article-body-outer div.article-body .htm .list li a{color:#004B91;text-decoration:underline;}
div.article-body-outer div.article-body .htm .list li:before{display:none;}
div.article-body-outer div.article-body .htm .wiki{background-color:#FFF;text-align:left;margin:32px 0;position:relative;margin:2em 0;padding:40px 20px;border:1px dotted #CCC;border-radius:6px;font-size:16px;}
div.article-body-outer div.article-body .htm .wiki a{margin:10px 0;display:block;}
div.article-body-outer div.article-body .htm .wiki p{margin:8px 0 16px;}
div.article-body-outer div.article-body .htm .wiki ul,div.article-body-outer div.article-body .htm .wiki li{margin:8px 0!important;}
div.article-body-outer div.article-body .htm .wiki:before,div.article-body-outer div.article-body .htm .wiki:after{position:absolute;font-size:38px;font-family:arial black;line-height:1;}
div.article-body-outer div.article-body .htm .wiki:before{top:8px;left:16px;content:'“';}
div.article-body-outer div.article-body .htm .wiki:after{bottom:0;right:16px;content:'”';}
div.article-body-outer div.article-body .htm .overview{background-color:#FFF;border:1px dashed #CCC;padding:24px 16px;margin:32px 0;text-align:left;}
div.article-body-outer div.article-body .htm .overview ul,div.article-body-outer div.article-body .htm .overview li{margin-top:0!important;}
div.article-body-outer div.article-body .htm .overview cite a{color:#004B91;font-size:16px;}
div.article-body-outer div.article-body .htm > img.pict{display:block;margin:32px auto;}
div.article-body-outer div.article-body .htm #timakibox{margin:0px 0;}
div.article-body-outer div.article-body .htm .amazlet-box{margin:32px 0!important;border:1px dotted #CCC;padding:16px;font-size:14px;text-align:left;}
div.article-body-outer div.article-body .htm p{margin:32px auto 32px;line-height:1.8;}
div.article-body-outer div.article-body .htm b{font-weight:bold}
div.article-body-outer div.article-body .htm .small{font-size:70%;}
div.article-body-outer div.article-body .htm .big{font-size:150%;}
div.article-body-outer div.article-body .htm .left{text-align:left;}
article.comment-list p.comment-body {overflow: hidden!important;}