@charset "utf-8";
/* CSS Document */

.maipat {
  max-width: 700px;
  margin: 0 auto;
}
.maipat .data {
  margin: 24px 0 24px 90px;
}
@media screen and (max-width: 640px) {
  .maipat .data { margin-left: 0 !important;}
}

	.u-ml100{ margin-left:100px !important;}
	.maine , .patona{ padding:0; margin:5px auto 0 auto; }
	.u-mra{margin-right:auto;}
	.u-mla{margin-left: auto;}
	@media screen and (max-width: 640px) { 
		.maine , .patona{ line-height:1.7;text-aligin:left;  }
		}

/* 吹き出し */
span.fukidashi{ display: block; position: relative; border-radius: 8px; padding:15px 20px; margin: 0px;}
  .maine span.fukidashi{ 
    background: #FFF;
    border: solid 1px #D1D1D1;
    margin-left: 90px;
  }
	.patona span.fukidashi{
    background: #D2F1CC;
    margin-right: 90px;
  }
@media screen and (max-width: 640px) {
  span.fukidashi{ padding:8px 14px;}
  .maine span.fukidashi{ margin-left: 65px; }
	.patona span.fukidashi{ margin-right: 65px; }
}

/* 吹き出しのしっぽ - マイネ */
.maine[class*="icon--"]:not([class~="icon--none"]) span.fukidashi::before {
  content: "";
  position: absolute;
  top: 35px;
  left: 0;
  border-style: solid;
  border-width: 7px 13px 7px 0;
  border-color: transparent #D1D1D1 transparent transparent;
  translate: -100% -50%;
}
.maine[class*="icon--"]:not([class~="icon--none"]) span.fukidashi::after {
  content: "";
  position: absolute;
  top: 35px;
  left: 0;
  border-style: solid;
  border-width: 5.9px 10.9px 5.9px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% -50%;
}

/* 吹き出しのしっぽ - パトナ */
.patona[class*="icon--"]:not([class~="icon--none"]) span.fukidashi::after {
  content: "";
  position: absolute;
  top: 35px;
  right: 0;
  border-style: solid;
  border-width: 7px 0 7px 14px;
  border-color: transparent transparent transparent #D2F1CC;
  translate: 100% -50%;
}
@media screen and (max-width: 640px) {
  /* 吹き出しのしっぽ位置をアイコンの半分サイズに */
  .maine[class*="icon--"]:not([class~="icon--none"]) span.fukidashi::before { top: 25px; }
  .maine[class*="icon--"]:not([class~="icon--none"]) span.fukidashi::after { top: 25px; }
  .patona[class*="icon--"]:not([class~="icon--none"]) span.fukidashi::after { top: 25px; }
}

/* icon--指定がnone以外（アイコン画像あり）の場合 */
  .maine[class*="icon--"]:not([class~="icon--none"]),
  .patona[class*="icon--"]:not([class~="icon--none"]){
    background-repeat:no-repeat;
    background-size: 70px 70px;
    padding:0 0 8px 0 !important;
    margin:32px auto -8px auto;
  }
  .maine[class*="icon--"]:not([class~="icon--none"]) {background-position:left top;}
  .patona[class*="icon--"]:not([class~="icon--none"]){background-position:right top;}
  @media screen and (max-width: 640px) {
    .maine[class*="icon--"]:not([class~="icon--none"]),
    .patona[class*="icon--"]:not([class~="icon--none"]){ background-size: 50px 50px; }
  }

  .maine[class*="--normal"]  { background-image: url(/assets/img/mplab/mp_ficon/ico_maine-normal.png);}
	.maine[class*="--smile"]   { background-image: url(/assets/img/mplab/mp_ficon/ico_maine-smile.png);}
	.maine[class*="--tokuige"] { background-image: url(/assets/img/mplab/mp_ficon/ico_maine-tokuige.png);}
	.maine[class*="--komari"]  { background-image: url(/assets/img/mplab/mp_ficon/ico_maine-komari.png);}
	.maine[class*="--shobo"]   { background-image: url(/assets/img/mplab/mp_ficon/ico_maine-shobo.png);}
	.maine[class*="--age"]     { background-image: url(/assets/img/mplab/mp_ficon/ico_maine-age.png);}
	.maine[class*="--sage"]    { background-image: url(/assets/img/mplab/mp_ficon/ico_maine-sage.png);}
	.maine[class*="--oko"]     { background-image: url(/assets/img/mplab/mp_ficon/ico_maine-oko.png);}
	
	.patona[class*="--normal"]  { background-image: url(/assets/img/mplab/mp_ficon/ico_patona-nomal.png);}
	.patona[class*="--smile"]   { background-image: url(/assets/img/mplab/mp_ficon/ico_patona-smile.png);}
	.patona[class*="--tokuige"] { background-image: url(/assets/img/mplab/mp_ficon/ico_patona-tokuige.png);}
	.patona[class*="--komari"]  { background-image: url(/assets/img/mplab/mp_ficon/ico_patona-komari.png);}
	.patona[class*="--shobo"]   { background-image: url(/assets/img/mplab/mp_ficon/ico_patona-shobo.png);}
	.patona[class*="--age"]     { background-image: url(/assets/img/mplab/mp_ficon/ico_patona-age.png);}
	.patona[class*="--sage"]    { background-image: url(/assets/img/mplab/mp_ficon/ico_patona-sage.png);}
	.patona[class*="--oko"]     { background-image: url(/assets/img/mplab/mp_ficon/ico_patona-oko.png);}
	.patona[class*="--akire"]   { background-image: url(/assets/img/mplab/mp_ficon/ico_patona-akire.png);}
	.patona[class*="--odoroki"] { background-image: url(/assets/img/mplab/mp_ficon/ico_patona-odoroki.png);}
	.patona[class*="--thinking"]{ background-image: url(/assets/img/mplab/mp_ficon/ico_patona-thinking.png);}

/* PC表示の時は、div.data直後のセリフ（icon--xxxx-sponly）をicon-none相当のスタイルにする */
@media screen and (min-width: 641px){
  .maine[class*="--sponly"],.patona[class*="--sponly"] { background-image: none !important; margin-top: 5px !important;}
  .maine[class*="--sponly"] span.fukidashi::before { content: none !important ; }
  .maine[class*="--sponly"] span.fukidashi::after { content: none !important ; }
  .patona[class*="--sponly"] span.fukidashi::after { content: noen !important ; }
}