@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;}

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