@charset 'UTF-8';
/* ■モジュール
 ファイル   ： web/frontend/sp/scss/module.scss 適用範囲 ： サイト全体 概要    ： モジュールｾｯﾄ
*/
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
sass ulility file & base setting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.clearfix:after, .btnList02:after, .column:after, .colSet01:after, .statusMeter:after, #mainStatus .statusList:after { content: ""; display: block; clear: both; }

.emoji02, .inlineFlash .mainPresentBtn, .inlineFlash .mainChangeFarmBtn1, .inlineFlash .mainChangeFarmBtn2, #otherspage .mainChangeFarmBtn1, #otherspage .mainChangeFarmBtn2, .btn.delete:after, .backLink.ic:before, #wrap .blockLink.arrow:after, .getMore > a:after, .searchMore > a:after, .pageTop > a:after, .autopagerBtn > a:before, .autopagerBtn > a:after, .autopagerBtn > span:before, .autopagerBtn > span:after, .list02 > li > a:after, .list02.ic > li:after, .list03 > li:before, .list03 > li > a.new:before, .list04 > li > a:after, .list04.ic > li:after, #othersMenu:after, .nextKameGrow > p:before, .nextKameGrow > p:after, .expandWindow a.close, .statusMeter > dt:after, .meter2:before, .meter2:after, .fvMttl .anm { background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/common-sd248064f92.png') no-repeat; -moz-background-size: 196px 3011px; -o-background-size: 196px 3011px; -webkit-background-size: 196px 3011px; background-size: 196px 3011px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pages file
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/** Color type type00  => green type01  => pink type02  => orange type03  => yellow type04  => blue
*--------------------------------------------*/
/* ■[module]animation
 ファイル ： web/frontend/scss/sp/_modules/_animation.scss 概要 ： アニメーションモジュール
*/
/* #擬似ブリンク
 `.blink`       ブリンクType1 `.blinkType02` ブリンクType1

```
<ul> <li class="blink">お知らせがあります</li> <li class="blinkType02">お知らせがあります</li>
</ul>
```
*/
.blink { -webkit-animation: blink 0.8s linear infinite alternate; -moz-animation: blink 0.8s linear infinite alternate; -ms-animation: blink 0.8s linear infinite alternate; -o-animation: blink 0.8s linear infinite alternate; animation: blink 0.8s linear infinite alternate; background-color: inherit; /* android対策 */ }

@-moz-keyframes blink { 0% { opacity: 1; }
  100% { opacity: 0.2; } }
@-webkit-keyframes blink { 0% { opacity: 1; }
  100% { opacity: 0.2; } }
@keyframes blink { 0% { opacity: 1; }
  100% { opacity: 0.2; } }
.blinkType02 { -webkit-animation: blinkType02 0.8s linear 3s infinite alternate; -moz-animation: blinkType02 0.8s linear 3s infinite alternate; -ms-animation: blinkType02 0.8s linear 3s infinite alternate; -o-animation: blinkType02 0.8s linear 3s infinite alternate; animation: blinkType02 0.8s linear 3s infinite alternate; background-color: inherit; /* android対策 */ }

@-moz-keyframes blinkType02 { 0% { opacity: 1; }
  100% { opacity: 0.5; } }
@-webkit-keyframes blinkType02 { 0% { opacity: 1; }
  100% { opacity: 0.5; } }
@keyframes blinkType02 { 0% { opacity: 1; }
  100% { opacity: 0.5; } }
/* ■[module]絵文字・カメ農園専用(SP独自)
 ファイル   ： web/frontend/scss/sp/_modules/_icon.scss 概要    ： カメ農園専用絵文字
*/
/* #.emoji02
 カメ農園固有の絵文字。
 `.emoji02.act`     行動力 `.emoji02.heart`   カメ(所有しているカメの情報) `.emoji02.ocean`   クエスト `.emoji02.team`    チーム `.emoji02.level`   レベル `.emoji02.gold`    通貨（カメG？） `.emoji02.ranking` ランキング `.emoji02.fellow`  カメ友 `.emoji02.cheerPt` 連携ポイント `.emoji02.book`    図鑑 `.emoji02.leader`  リーダー `.emoji02.present` プレゼント

```
<ul> <li><span class="emoji02 act"></span>行動力</li> <li><span class="emoji02 heart"></span>カメ</li> <li><span class="emoji02 ocean"></span>クエスト</li> <li><span class="emoji02 team"></span>チーム</li> <li><span class="emoji02 level"></span>レベル</li> <li><span class="emoji02 gold"></span>カメG</li> <li><span class="emoji02 ranking"></span>ランキング</li> <li><span class="emoji02 fellow"></span>カメ友</li> <li><span class="emoji02 cheerPt"></span>連携ポイント</li> <li><span class="emoji02 book"></span>図鑑</li> <li><span class="emoji02 leader"></span>リーダー</li> <li><span class="emoji02 present"></span>プレゼント</li>
</ul>
```
*/
.emoji02 { position: relative; top: -2px; display: inline-block; vertical-align: middle; width: 20px; height: 20px; }
.emoji02.act { background-position: 0 -499px; }
.emoji02.heart { background-position: 0 -599px; }
.emoji02.ocean { background-position: 0 -659px; }
.emoji02.team { background-position: 0 -719px; }
.emoji02.level { background-position: 0 -639px; }
.emoji02.gold { background-position: 0 -579px; }
.emoji02.ranking { background-position: 0 -699px; }
.emoji02.fellow { background-position: 0 -559px; }
.emoji02.cheerPt { background-position: 0 -539px; }
.emoji02.book { background-position: 0 -519px; }
.emoji02.leader { background-position: 0 -619px; }
.emoji02.present { background-position: 0 -679px; }

/* #.decoTxt
 両端に文字（絵文字的な）を入れる
 `.decoTxt.melody` ♪ `.decoTxt.star` ★

```
<ul class="alignC"> <li class="decoTxt melody">収穫個数が2倍</li> <li class="decoTxt melody">捕獲匹数が2倍</li> <li class="decoTxt star">star</li>
</ul>
```
*/
.decoTxt { /* ♪ */ /* ★ */ }
.decoTxt:before, .decoTxt:after { display: inline; }
.decoTxt.melody:before, .decoTxt.melody:after { content: "\266a"; }
.decoTxt.star:before, .decoTxt.star:after { content: "\2605"; }

/* #.txtIcon
 テキストをアイコンっぽいデザインにする

```
<p class="txtIcon">あなたの順位</p>
```
*/
.txtIcon { display: inline-block; padding: 0.2em 0.7em; background-color: #ffb10b; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; white-space: nowrap; line-height: 1; color: #fff; text-align: center; font-size: 93%; }

/* ■[module]インライン
 ファイル ： web/frontend/scss/sp/_modules/_inline.scss 概要 ： フォントカラー、サイズ、テキスト配置などインライン系のCSS
*/
/* #Contents Text Color
 コンテンツ固有のテキストカラー指定
 `.goldAmeG`   アメG・コインの通貨カラー `.goldUnit`   ゲーム内通貨のカラー `.actSuccess` 成功アクション `.actFail`    失敗アクション

```
<ul> <li>000<span class="goldAmeG">コイン</span></li> <li>000<span class="goldUnit">カメG</span></p></li> <li><p class="actSuccess">成功</p></li> <li><p class="actFail">失敗</p></li>
</ul>
```
*/
/* アメG */
.goldAmeG { color: #ff6600 !important; }

/* カメG */
.goldUnit { color: #0066ff !important; }

/* 成功 */
.actSuccess { color: #FF0000 !important; }

/* 失敗 */
.actFail { color: #0066ff !important; }

/* #.font[Size]
 フォントサイズ調整用モジュール
 `fontS` 83% `fontM` 100% `fontL` 138%
```
```
*/
.fontS { font-size: 83% !important; }

.fontM { font-size: 100% !important; }

.fontL { font-size: 138% !important; }

/* #.align[Align], .valign[vAlign]
 inline, inline-block用配置モジュール
 `.alignC`  横に対して中央揃え `.alignL`  左寄せ `.alignR`  右寄せ `.valignT` 縦に対して中央揃え `.valignM` 上寄せ `.valignB` 下寄せ

```
<ul> <li class="alignC">.alignC</li> <li class="alignL">.alignL</li> <li class="alignR">.alignR</li>
</ul>

<ul class="colSet02"> <li class="valignT" style="height:50px;">.valignT</li> <li class="valignM" style="height:50px;">.valignM</li> <li class="valignB" style="height:50px;">.valignB</li>
</ul>
```
*/
.alignC { text-align: center !important; }

.alignL { text-align: left !important; }

.alignR { text-align: right !important; }

.valignT { vertical-align: top !important; }

.valignM { vertical-align: middle !important; }

.valignB { vertical-align: bottom !important; }

/* #.txtColor
 テキスト色の便利モジュール
 `<strong>`    基本強調色 $HIGHLIGHT_COLOR `.txtColor01` 基本強調色 $HIGHLIGHT_COLOR `.txtColor02` 紺色 `.txtColor03` オレンジ色 `.off`        グレー $FontOffColor `.txtOff`     グレー $FontOffColor `.txtColorO`  グレー $FontOffColor `.txtColorT`  透明 `.txtColorW`   白
```
<ul> <li><strong>strong</strong></li> <li class="txtColor01">.txtColor01</li> <li class="txtColor02">.txtColor02</li> <li class="txtColor03">.txtColor03</li> <li class="off">.off</li> <li class="txtOff">.txtOff</li> <li class="txtColorO">.txtColorO</li> <li class="txtColorT">.txtColorT</li> <li class="txtColorW">.txtColorW</li>
</ul>
```
*/
#wrap strong { color: #f00; }

.txtColor01 { color: #f00 !important; }

.txtColor02 { color: #005eb5 !important; }

.txtColor03 { color: #ff8a00 !important; }

.off { color: #999; }

.txtOff, .txtColorO { color: #999 !important; }

.txtColorT { color: transparent !important; }

.txtColorW { color: #fff !important; }

/* #.linkType
 下線＋リンク色の形状にする。   主に.blockLink内にリンクがあることを明示するために利用する。
 `.linkType01` $LINK_COLOR `.txtColor01` 黄色

```
<div class="colSet01"> <a href="#" class="colSet01 blockLink arrow"> <p class="col1"> <img width="65" height="65" src="/images/sp/common/no_img.png"> </p> <div class="col2"> <p><span class="emoji f9bf"></span>1位  <span class="linkType01">むっく</span></p> <p><span class="emoji f8ba"></span>レベル:72</p> <p><span class="emoji f9ba"></span>144カメG獲得</p> </div> </a>
</div>

<p class="linkType02">.linkType02</p>
```
*/
.linkType01 { color: #00a1f3 !important; text-decoration: underline; }

.linkType02 { color: #ff9600 !important; text-decoration: underline; }

/* ■[module]background
 ファイル ： web/frontend/scss/sp/_modules/_background.scss 概要 ： 背景モジュール
*/
/* #Background Color
 背景色モジュール
 `.bgNoColor`     透明 `.bgColor01`     ピンク `.bgColor02`     クリーム `.bgColor03`     黄色 `.bgcType03_02`  黄色 

```
<ul> <li class="bgNoColor">.bgNoColor</li> <li class="bgColor01">.bgColor01</li> <li class="bgColor02">.bgColor02</li> <li class="bgColor03">.bgColor03</li> <li class="bgcType03_02">.bgcType03_02</li>
</ul>
```
*/
.bgNoColor { background-color: transparent !important; }

.bgColor01 { background-color: #ffeaf0 !important; }

.bgColor02 { background-color: #fdf9de !important; }

.bgColor03 { background-color: #ffea5d !important; }

.bgcType03_02 { background-color: #fffaa6 !important; }

/* #Background Image
 背景画像モジュール。
 `.bgNoImage` background-image指定をなくす
*/
.bgNoImage { background-image: none !important; }

/* #border（擬似border）
 backgroundもプロパティ擬似border
 ##.line01, .line01Top, .line01TB
 ボーダータイプ1

```
<p class="line01Top">.line01Top</p>
<p class="line01">.line01</p>
<br>
<p class="line01TB">.line01TB</p>
```
*/
.line01, .line01Top { background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line01.png') left bottom repeat-x; -moz-background-size: 5px 3px; -o-background-size: 5px 3px; -webkit-background-size: 5px 3px; background-size: 5px 3px; }

.line01Top { background-position: left top; }

.line01TB { background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line01.png'), url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line01.png'); background-position: left bottom , left top; background-repeat: repeat-x , repeat-x; -moz-background-size: 5px 3px,5px 3px; -o-background-size: 5px 3px,5px 3px; -webkit-background-size: 5px 3px,5px 3px; background-size: 5px 3px,5px 3px; }

/* ##.line02
 ボーダータイプ2

```
<p class="line02">.line02</p>
```
*/
.line02:after { content: ""; display: block; height: 5px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line02.png') repeat-x center bottom; background-color: #ff9900; -moz-background-size: 5px 5px; -o-background-size: 5px 5px; -webkit-background-size: 5px 5px; background-size: 5px 5px; }

/* ##.line03, .line03Top, .line03TB
 ボーダータイプ3

```
<p class="line03Top">.line03Top</p>
<p class="line03">.line03</p>
<br>
<p class="line03TB">.line03TB</p>
```
*/
.line03:after { content: ""; display: block; height: 6px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line03.png') left top repeat-x; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; }

.line03Top:before { content: ""; display: block; height: 6px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line03.png') left top repeat-x; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; }

.line03TB:after { content: ""; display: block; height: 6px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line03.png') left top repeat-x; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
.line03TB:before { content: ""; display: block; height: 6px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line03.png') left top repeat-x; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; }

#contents > .line03:last-child:after, #contents > .line03TB:last-child:after { display: none; }

/* ■[module]余白
 ファイル ： web/frontend/scss/sp/_modules/_margin.scss 概要 ： 余白調整
*/
/* #.mt, .mb
 marginの便利モジュール。*にはピクセル単位の値を指定。   （例：.mb10 -> margin-bottom:10px）
 `.mt` margin-top `.mb` margin-bottom `.ml` margin-left  `.mr` margin-right `.m` margin

```
<p>便利だけど</p>
<p class="mb10">乱用しないで</p>
<p>ほしいねー</p>
```
*/
.mt0 { margin-top: 0 !important; }

.mt5 { margin-top: 5px !important; }

.mt10 { margin-top: 10px !important; }

.mt15 { margin-top: 15px !important; }

.mt20 { margin-top: 20px !important; }

.mb0 { margin-bottom: 0 !important; }

.mb5 { margin-bottom: 5px !important; }

.mb10 { margin-bottom: 10px !important; }

.mb15 { margin-bottom: 15px !important; }

.mb20 { margin-bottom: 20px !important; }

.ml0 { margin-left: 0 !important; }

.mr0 { margin-right: 0 !important; }

.mtb5 { margin-top: 5px  !important; margin-bottom: 5px  !important; }

.mtb10 { margin-top: 10px !important; margin-bottom: 10px !important; }

.m0 { margin: 0 !important; }

.m5 { margin: 5px !important; }

/* #.mt, .mb
 paddingの便利モジュール。*にはピクセル単位の値を指定。  （例：.pt0 -> padding-top:0）
 `.pd` padding `.pdt` padding-top
*/
.pd0 { padding: 0 !important; }

.pd5 { padding: 5px !important; }

.pd10 { padding: 10px !important; }

.pdt0 { padding-top: 0 !important; }

.pdb0 { padding-bottom: 0 !important; }

.pdtb5 { padding: 5px 0 !important; }

/* ■[module]name
 ファイル   ： web/frontend/scss/sp/_modules/_.scss 概要    ：
*/
/* #.inlineFlash
 インラインFlashを表示する際、このclass指定の要素内にFlashを展開します。   ※JswfPlayerの指定はコーダー側ではできないので、システムGに依頼。
 ##Javascript
 Flashを画面幅100％に表示をするため、 デバイス幅を取得し、Flashの縦横比から高さを算出して、.inlineFlashに width, height値をセットする、ということをJavascriptで行います。
 `kame.flash.setHeightFlash('.inlineFlash', 乗数)`   ※`kame.flash.setHeight`の第2引数は、横幅に対する縦幅の割合を指定（乗数指定）   ※詳しくは`/js/sp/common.js` の `kame.flash.setHeight`参照。

```
<div class="inlineFlash"> <script> //kame.flash.setHeightの第2引数は、横幅に対する縦幅の割合を指定（乗数指定） $(function(){ kame.flash.setHeight('.inlineFlash', [乗数] ); }); </script> <!-- ▼JswfPlayerの指定 --> <!-- ▲JswfPlayerの指定 -->
<!-- /.inlineFlash --></div>
```
*/
.inlineFlash { position: relative; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/loader.gif') center center no-repeat; }
.inlineFlash .mainPresentBtn { display: block; position: absolute; top: 3px; right: 3px; z-index: 100; width: 55px; height: 54px; text-indent: -9999px; background-position: 0 -1483px; width: 55px; height: 54px; }
.inlineFlash .mainChangeFarmBtn1 { display: block; position: absolute; top: 50%; right: 6px; margin-top: -10.5px; z-index: 100; width: 55px; height: 54px; text-indent: -9999px; background-position: 0 -825px; width: 19px; height: 25px; }
.inlineFlash .mainChangeFarmBtn2 { display: block; position: absolute; top: 50%; left: 6px; margin-top: -10.5px; z-index: 100; width: 55px; height: 54px; text-indent: -9999px; background-position: 0 -875px; width: 19px; height: 25px; }

#otherspage .mainChangeFarmBtn1 { display: block; position: absolute; top: 50%; right: 6px; margin-top: -10.5px; z-index: 100; width: 55px; height: 54px; text-indent: -9999px; background-position: 0 -775px; width: 19px; height: 25px; }
#otherspage .mainChangeFarmBtn2 { display: block; position: absolute; top: 50%; left: 6px; margin-top: -10.5px; z-index: 100; width: 55px; height: 54px; text-indent: -9999px; background-position: 0 -800px; width: 19px; height: 25px; }

/* ■[module]リンク
 ファイル ： web/frontend/scss/sp/_modules/_link.scss 概要 ： リンク関連モジュール
*/
/* #.btn
 ボタン

*/
.btn, .btn02 { position: relative; display: inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: middle; text-align: center; }

#wrap .btn, #wrap .btn02 { text-decoration: none; line-height: 1.2; }

/* ##.btn
 `.btn.btnType02`     ボタンカラー2 `.btn.btnOff`        ボタンOFF `.btn.off`           ボタンOFF `.btn.btnSizeS`      ボタンサイズを小さくする `.btn.delete`        ゴミ箱ボタン `.btn.delete.btnOff` ゴミ箱ボタンOFF

```
<div id="wrap">
<ul class="btnList02"> <li><a href="#" class="btn">.btn</a></li> <li><a href="#" class="btn btnType02">.btn.btnType02</a></li> <li><a href="#" class="btn btnOff">.btn.btnOff</a></li> <li><a href="#" class="btn off">.btn.off</a></li> <li><a href="#" class="btn btnSizeS">.btn.btnSizeS</a></li> <li><a href="#" class="btn delete">.btn.delete</a></li> <li><a href="#" class="btn delete btnOff">.btn.delete.btnOff</a></li>
</ul>
</div>
```
*/
.btn { padding: 6px 10px; border: 2px solid #e37600; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZDQ2MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZjYTcwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fed462), color-stop(100%, #fca701)); background: -moz-linear-gradient(#fed462, #fca701); background: -webkit-linear-gradient(#fed462, #fca701); background: linear-gradient(#fed462, #fca701); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* off style */ /* size */ }
.btn.btnType02 { border-color: #a9a9a9; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M2YzZjNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e5e5e5), color-stop(100%, #c6c6c6)); background: -moz-linear-gradient(#e5e5e5, #c6c6c6); background: -webkit-linear-gradient(#e5e5e5, #c6c6c6); background: linear-gradient(#e5e5e5, #c6c6c6); }
.btn.btnOff, .btn.off { border-color: #a9a9a9 !important; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M2YzZjNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') !important; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e5e5e5), color-stop(100%, #c6c6c6)) !important; background: -moz-linear-gradient(#e5e5e5, #c6c6c6) !important; background: -webkit-linear-gradient(#e5e5e5, #c6c6c6) !important; background: linear-gradient(#e5e5e5, #c6c6c6) !important; color: #999 !important; }
.btn.btnSizeS { padding: 3px 5px; border-width: 2px; }
.btn.delete { width: 36px; height: 2.28em; border-color: #b2d971; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZmRlYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NlZWU5OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f6fdeb), color-stop(100%, #ceee98)); background: -moz-linear-gradient(#f6fdeb, #ceee98); background: -webkit-linear-gradient(#f6fdeb, #ceee98); background: linear-gradient(#f6fdeb, #ceee98); color: transparent !important; text-decoration: none !important; }
.btn.delete:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; background-position: 0 -1208px; width: 16px; height: 21px; margin-top: -11px; margin-left: -8px; }
.btn.delete.btnOff:after { background-position: 0 -1229px; }

#wrap .btn { color: #793400; }
#wrap .btn.btnOff, #wrap .btn.off { color: #999 !important; }
#wrap .btn.delete.btnOff { color: transparent !important; }

/* ##.btn02
 ボタンデザイン2

```
<div id="wrap">
<p><a href="#" class="btn02">.btn02</a></p>
</div>
```
*/
.btn02 { padding: 6px 10px; border: 1px #ffe58f solid; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjg4YiIvPjxzdG9wIG9mZnNldD0iMjglIiBzdG9wLWNvbG9yPSIjZmZmMDAwIi8+PHN0b3Agb2Zmc2V0PSI4NiUiIHN0b3AtY29sb3I9IiNlZDkxMDAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=') !important; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff88b), color-stop(28%, #fff000), color-stop(86%, #ed9100)) !important; background: -moz-linear-gradient(#fff88b 0%, #fff000 28%, #ed9100 86%) !important; background: -webkit-linear-gradient(#fff88b 0%, #fff000 28%, #ed9100 86%) !important; background: linear-gradient(#fff88b 0%, #fff000 28%, #ed9100 86%) !important; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.btn02.raid { padding: 10px; margin-bottom: 2px; border-color: #ffad60; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYmY0ZiIvPjxzdG9wIG9mZnNldD0iODYlIiBzdG9wLWNvbG9yPSIjZmY1YjAwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g') !important; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffbf4f), color-stop(86%, #ff5b00)) !important; background: -moz-linear-gradient(#ffbf4f 0%, #ff5b00 86%) !important; background: -webkit-linear-gradient(#ffbf4f 0%, #ff5b00 86%) !important; background: linear-gradient(#ffbf4f 0%, #ff5b00 86%) !important; color: #fff !important; -moz-box-shadow: 0 2px 1px #b54000; -webkit-box-shadow: 0 2px 1px #b54000; box-shadow: 0 2px 1px #b54000; }

#wrap .btn02 { color: #783300; }

/* ##.btnList02
 ボタンを横並びで配置する。※プレビューは.btn参照。

*/
.btnList02 > li { float: left; margin-right: 5px; }
.btnList02 > li:last-child { margin-right: 0 !important; }

/* #.[category]Link 基本型
 `.wireLink`     導線リンク(中央配置) `.mypageLink`   マイカメ農園へのリンク(中央配置) `.backLink`     前のページに戻る系の遷移(左配置) `.relationLink` 関連ページへのリンク(左配置) `.faqLink`      FAQへのリンク(右配置)

```
<div class="wireLink"> <p><a href="#">.wireLink</a></p>
</div>
<ul class="wireLink"> <li><a href="#">ul.wireLink</a></li> <li><a href="#">ul.wireLink</a></li>
</ul>

<div class="mypageLink"> <p><a href="#">.mypageLink</a></p>
</div>

<div class="backLink"> <p><a href="#">.backLink</a></p>
</div>
<ul class="backLink"> <li><a href="#">ul.backLink</a></li> <li><a href="#">ul.backLink</a></li>
</ul>

<div class="relationLink"> <p><a href="#">.relationLink</a></p>
</div>
<ul class="relationLink"> <li><a href="#">ul.relationLink</a></li> <li><a href="#">ul.relationLink</a></li>
</ul>

<div class="faqLink"> <p><a href="#">.faqLink</a></p>
</div>
<ul class="faqLink"> <li><a href="#">ul.faqLink</a></li> <li><a href="#">ul.faqLink</a></li>
</ul>

```
*/
.wireLink, .mypageLink, .backLink, .relationLink, .faqLink { line-height: 1.2; margin: 10px 0; }
.wireLink > li, .mypageLink > li, .backLink > li, .relationLink > li, .faqLink > li { margin-bottom: 10px; }

.wireLink, .mypageLink { text-align: center; }
.wireLink.clear, .mypageLink.clear { clear: both; }

.backLink, .relationLink { text-align: left; padding: 0 5px; }

.backLink.ic:before { content: ""; display: inline-block; vertical-align: middle; position: relative; top: -0.15em; margin-right: 7px; width: 10px; height: 16px; background-position: 0 -1104px; }

.faqLink { text-align: right; padding: 0 5px; }

#contents > .wireLink:last-child, #contents > .mypageLink:last-child, #contents > .backLink:last-child, #contents > .relationLink:last-child { border-top: 2px solid #ccc; margin-top: 0; padding-top: 20px; padding-bottom: 10px; }

/* #.txtLinkList
 テキストリンクのリスト

```
<ul class="txtLinkList"> <li><a href="#">ul.txtLinkList</a></li> <li><a href="#">ul.txtLinkList</a></li> <li><a href="#">ul.txtLinkList</a></li>
</ul>
```
*/
.txtLinkList > li { margin-top: 10px; margin-bottom: 10px; line-height: 1.2; }

/* #.blockLink
 a要素内にフローコンテンツ（ブロック要素）が入る場合に使う。

```
<div class="colSet01"> <a href="#" class="colSet01 blockLink arrow"> <p class="col1"> <img width="65" height="65" src="/images/sp/common/no_img.png"> </p> <div class="col2"> <p><span class="emoji f9bf"></span>1位  <span class="linkType01">むっく</span></p> <p><span class="emoji f8ba"></span>レベル:72</p> <p><span class="emoji f9ba"></span>144カメG獲得</p> </div> </a>
</div>
```
*/
.blockLink { position: relative; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

#wrap .blockLink.arrow { padding-right: 15px; }
#wrap .blockLink.arrow:after { content: ""; display: block; position: absolute; top: 50%; right: 5px; width: 7px; height: 12px; margin-top: -6px; background-position: 0 -972px; }

a.blockLink { color: inherit; text-decoration: inherit; line-height: inherit; }

/* #.getMore, .searchMore
 「もっと見る」リンク
 `.getMore` ページ遷移型リンク（右寄せになる） `.searchMore` ページを遷移させずにリロード処理（中央揃えになる）

```
<p class="getMore"> <a href="#"><span>もっと見る</span></a>
</p>
<p class="searchMore"> <a href="#"><span>もっと見る</span></a>
</p>
```
*/
.getMore, .searchMore { display: block; padding: 14px 5px 11px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line01.png') left top repeat-x; -moz-background-size: 5px 3px; -o-background-size: 5px 3px; -webkit-background-size: 5px 3px; background-size: 5px 3px; text-align: right; line-height: 1.2; }
.getMore > a, .searchMore > a { display: block; padding: inherit; margin: -14px -5px -11px; text-decoration: none; line-height: inherit; }
.getMore > a > span, .searchMore > a > span { color: inherit; text-decoration: underline; }
.getMore > a:after, .searchMore > a:after { content: ""; position: relative; top: -2px; display: inline-block; vertical-align: middle; width: 18px; height: 17px; }

.getMore > a:after { background-position: 0 -1288px; }

.searchMore { text-align: center; }
.searchMore > a:after { text-align: center; background-position: 0 -1566px; }

/* #.pageTop
 ページTOP

```
<p class="pageTop"> <a href="#wrap" class="ancLink"><span>ページTOPへ</span></a>
</p>
```
*/
.pageTop { display: block; padding: 11px 5px 11px; text-align: right; line-height: 1.2; }
.pageTop > a { display: inline-block; padding: 11px 0; margin: -11px 0; text-decoration: none; line-height: inherit; }
.pageTop > a > span { color: inherit; text-decoration: underline; }
.pageTop > a:after { content: ""; position: relative; top: -2px; display: inline-block; vertical-align: middle; width: 18px; height: 17px; background-position: 0 -1451px; }

/* #.autopagerBtn
 オートページャー型の「もっと見る」ボタン。   ※Symfonyモジュールの`<?php //include_partial('global/autopager') ?>`で HTML展開するので、こちらは、どこのページャーが入るか指示するだけでOK。

```

<div class="autopagerBtn"> <a rel="next" href="#"><span>もっと見る</span></a>
</div>
```
*/
.autopagerBtn { margin-top: 10px; background: #ffffff; border-top: 3px solid #9ed73e; text-align: center; }
.autopagerBtn > a, .autopagerBtn > span { overflow: hidden; position: relative; top: -4px; display: inline-block; vertical-align: top; height: 28px; padding: 1px 18px 0; background-color: #ffffff; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 13px; text-decoration: none; line-height: 1; }
.autopagerBtn > a:before, .autopagerBtn > a:after, .autopagerBtn > span:before, .autopagerBtn > span:after { content: ""; display: block; position: absolute; }
.autopagerBtn > a:before, .autopagerBtn > span:before { bottom: 0; left: 0; width: 18px; height: 27px; background-position: 0 -29px; }
.autopagerBtn > a:after, .autopagerBtn > span:after { bottom: 0; right: 0; width: 18px; height: 27px; background-position: 0 -218px; }
.autopagerBtn > a > span, .autopagerBtn > span > span { display: block; height: 27px; padding: 2px 15px 0; border-bottom: 3px solid #9ed73e; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: underline; }
.autopagerBtn > a > span.off, .autopagerBtn > span > span.off { text-decoration: none; }

#contents > .sec:last-child > .autopagerBtn:last-child { margin-bottom: 10px; }

/* #.tab
 サブナビゲーション（タブ）

```
<div class="tab"> <nav> <ul class="navList"> <li><a href="#">.tab</a></li> <li class="active"><a>.tab .active</a></li> <li class="off"><a>.tab .off</a></li> <!-- /.navList --></ul> </nav>
<!-- /.tab --></div>
```
*/
.tab .navList { display: table; table-layout: fixed; width: 100%; }
.tab .navList > li { display: table-cell; vertical-align: bottom; }
.tab:after { position: relative; content: ""; display: block; width: 100%; height: 2px; margin-bottom: 10px; background-color: #9ed73e; }
.tab .navList { position: relative; top: 2px; padding: 5px 5px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.tab .navList > li { text-align: center; line-height: 1.2; }
.tab .navList > li > a { display: block; width: 98%; padding: 6px 0; margin-left: auto; margin-right: auto; background-color: #c3f078; border-top: 2px solid #9ed73e; border-left: 2px solid #9ed73e; border-right: 2px solid #9ed73e; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px; border-radius: 5px 5px 0 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 85%; text-decoration: none; color: #3f9400; }
.tab .navList > li.active { position: relative; z-index: 5; }
.tab .navList > li.active > a { padding: 10px 0; background-color: #ffffff !important; }
.tab .navList > li.off > a { background-color: #ddd !important; border-color: #ccc !important; color: #999 !important; }

/* #.changeBtn
 サブナビゲーション（ボタン切り替え型）

```
<div class="changeBtn"> <nav> <ul class="navList"> <li><a href="#">.changeBtn</a></li> <li class="active"><a>.changeBtn .active</a></li> <li class="off"><a>.changeBtn .off</a></li> </ul> </nav>
</div>
```
*/
.changeBtn { margin: -10px 0 10px 0; padding: 10px 0 0 0; }
.changeBtn .navList { display: table; table-layout: fixed; width: 100%; }
.changeBtn .navList > li { display: table-cell; vertical-align: middle; }
.changeBtn .navList { padding: 0 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.changeBtn .navList > li { text-align: center; line-height: 1.2; }
.changeBtn .navList > li > a { display: block; padding: 8px 0; border-top: 1px solid #ffc209; border-bottom: 1px solid #ffc209; border-left: 1px solid #ffd966; border-right: 1px solid #f1a809; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZGU3YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYzIwOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffde7a), color-stop(100%, #ffc209)); background: -moz-linear-gradient(#ffde7a, #ffc209); background: -webkit-linear-gradient(#ffde7a, #ffc209); background: linear-gradient(#ffde7a, #ffc209); text-align: center; font-size: 85%; color: #622e08; text-decoration: none; line-height: inherit; }
.changeBtn .navList > li.active > a { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYTQwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiZDA1ZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0a400), color-stop(100%, #fbd05f)); background: -moz-linear-gradient(#f0a400, #fbd05f); background: -webkit-linear-gradient(#f0a400, #fbd05f); background: linear-gradient(#f0a400, #fbd05f); }
.changeBtn .navList > li.off > a { border-color: #aaa !important; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') !important; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bbbbbb), color-stop(100%, #cccccc)) !important; background: -moz-linear-gradient(#bbbbbb, #cccccc) !important; background: -webkit-linear-gradient(#bbbbbb, #cccccc) !important; background: linear-gradient(#bbbbbb, #cccccc) !important; color: #999 !important; }
.changeBtn .navList > li:first-child > a { -moz-border-radius: 7px 0 0 7px; -webkit-border-radius: 7px; border-radius: 7px 0 0 7px; }
.changeBtn .navList > li:last-child > a { -moz-border-radius: 0 7px 7px 0; -webkit-border-radius: 0; border-radius: 0 7px 7px 0; }

/* #.selectNav
 サブナビゲーション（セレクトタイプ）

```
<div class="selectNav line01"> <select> <option value="#">全て</option> <option value="#">おねだり</option> <option value="#">イベント</option> </select>
<!-- /.selectNav --></div>
```
*/
.selectNav { margin: 10px 5px; }
.selectNav.line01 { margin: 10px 0 0; padding: 0 5px 10px; }
.selectNav select, .selectNav select option { width: 100%; }

/* #.pager
 ページャー ※現在使用していないので、プレビューは作成しません。

*/
.pager { padding: 8px 0; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line01.png') left top repeat-x; -moz-background-size: 5px 3px; -o-background-size: 5px 3px; -webkit-background-size: 5px 3px; background-size: 5px 3px; text-align: center; }

/* #.bnrType01
 バナー表示レギュレーション

```
<div class="bnrType01"> <a href="#"> <dl> <dt> <img src="/images/sp/shop/bnr_perperson.png" alt="お一人様個数限定アイテム" width="220"> </dt> <dd> <p class="eventDetail"> <span class="emoji f9a0"></span><span style="color:#ff0600">お得なアイテム販売中</span><span class="emoji f9a0"></span> </p> </dd> </dl> </a>
<!-- /.bnrType01 --></div>
```
*/
.bnrType01 { display: block; text-align: center; margin: 10px 0; }
.bnrType01 > a { display: inline-block; text-decoration: none; }
.bnrType01 dt { margin-bottom: 5px; }
.bnrType01 .eventDetail { color: #00a1f3; line-height: 1.2; }
.bnrType01 .eventDetail > span { text-decoration: underline; }

/* #.textMenu
 テキストメニュー。テキストリンクを横に並べて表示。

```
<ul class="textMenu"> <li><a href="#">.textMenu</a></li> <li><a href="#">.textMenu</a></li> <li><a href="#">.textMenu</a></li>
</ul>
```
*/
.textMenu { text-align: center; }
.textMenu > li { display: inline-block; margin-right: 5px; }
.textMenu > li:after { content: "\ff5c"; /* ｜ */ display: inline-block; margin-left: 5px; }
.textMenu > li:last-child { margin-right: 0; }
.textMenu > li:last-child:after { display: none; }
.textMenu dl.param { display: inline-block; }

/* #.linkEventBonus
 ガチャ連のイベントボーナス状況へのリンク

```
<div class="linkEventBonus"> <a href="eventst/index"> <span class="emoji f9a0"></span> イベントボーナス発生状況 <span class="emoji f9a0"></span> </a>
<!-- /.linkEventBonus --></div>
```
*/
.linkEventBonus { clear: both; padding: 12px 5px; background-color: #ffe5ec; text-align: center; line-height: 1.2; }
.linkEventBonus > a { display: block; margin: -12px -5px; padding: 12px 5px; line-height: inherit; }

.sec .inner > .linkEventBonus { margin-left: -5px; margin-right: -5px; }

/* ■[module]リスト
 ファイル ： web/frontend/scss/sp/_modules/_list.scss 概要 ： リストモジュール
*/
/* #list
 ##.listDisc
 黒丸リスト

```
<ul class="listDisc"> <li>リストlistDisc</li> <li>リストlistDisc</li> <li>リストlistDisc</li>
</ul>
```
*/
.listDisc > li { margin-left: 1em; text-indent: -1em; }
.listDisc > li:before { content: "\30fb"; /* ・ */ }

/* ##dl.listTree
 ツリー型リスト

```
<dl class="listTree"> <dt>行動力</dt> <dd>00</dd> <dt>経験値</dt> <dd class="noTree">00</dd>
</dl>
```
*/
dl.listTree > dd:before { content: "\2514"; /* └ */ }
dl.listTree > dd.noTree:before { content: "" !important; }

.listTree > li:before { content: "\2523"; }
.listTree > li:last-child:before { content: "\2517"; }
.listTree > li.noTree:before { content: "" !important; }

/* ##.list01
 li要素をインラインにして、句読点区切りで横並びで表示する。

```
<ul class="list01"> <li>リストlist01</li> <li>リストlist01</li> <li>リストlist01</li>
</ul>
```
*/
.list01 > li { display: inline; }
.list01 > li:after { content: "\3001"; }
.list01 > li:last-child:after { display: none; }

/* ##.list02
 背景クリーム色、白ボーダー区切りのリスト
 `.list02.ic.committee` 運営よりのアイコン付与 `.list02.ic.new`       NEWのアイコン

```
<ul class="list02"> <li><a href="#">list02</a></li> <li>list02</li> <li><a href="#">list02</a></li> <li>list02</li>
<!-- /.list02.committee --></ul>

<ul class="list02 ic committee"> <li> <a href="/render?render_id=73">十五夜イベント選定セットを受け取る</a> </li> <li> <a href="/render?render_id=74">かぐやちゃんおませセット受け取る</a> </li>
<!-- /.list02.committee --></ul>

<ul class="list02 ic new"> <li> <a href="/mypage/news?id=76">カメ友達申請があります。</a> </li> <li> <a href="/mypage/news?id=77">連絡帳への書き込みがあります。</a> </li>
<!-- /.list02.new --></ul>
```
*/
.list02 { background-color: #fff; }
.list02 > li { position: relative; padding: 12px 5px; margin-bottom: 2px; background-color: #fff5c0; line-height: 1.2; }
.list02 > li > a { position: relative; z-index: 2; display: block; margin: -12px -5px; padding: 12px 13px 12px 5px; color: inherit; line-height: inherit; text-decoration: none; }
.list02 > li > a:after { content: ""; display: block; position: absolute; top: 50%; right: 5px; background-position: 0 -1056px; width: 8px; height: 12px; margin-top: -6px; }
.list02.ic > li:after { content: ""; display: block; position: absolute; top: 50%; left: 0; }
.list02.ic.committee > li { padding-left: 59px; }
.list02.ic.committee > li:after { background-position: 0 -1132px; width: 54px; height: 24px; margin-top: -12px; }
.list02.ic.committee > li > a { margin-left: -59px; padding-left: 59px; }
.list02.ic.new > li { padding-left: 59px; }
.list02.ic.new > li:after { background-position: 0 -1404px; width: 54px; height: 24px; margin-top: -12px; }
.list02.ic.new > li > a { margin-left: -59px; padding-left: 59px; }

/* ##.list03
 リストタイプ3

```
<ul class="list03"> <li> <a href="#"> <dl class="colSet01"> <dt class="col1 ic new">10/28</dt> <dd class="linkType01">すももももももももも</dd> </dl> </a> </li> <li> <a href="#"> <dl class="colSet01"> <dt class="col1 ic new">10/28</dt> <dd class="linkType01">すももももももももも</dd> </dl> </a> </li>
<!-- /.inner --></ul>
```
*/
.list03 > li { position: relative; padding: 12px 5px; padding-left: 59px; line-height: 1.2; border-top: 1px dotted #e0be93; }
.list03 > li:last-child { border-bottom: 1px dotted #e0be93; }
.list03 > li:before { content: ""; display: block; width: 8px; height: 12px; position: absolute; top: 50%; right: 10px; margin-top: -4px; background-position: 0 -1056px; width: 8px; height: 12px; }
.list03 > li > a { display: block; margin: -12px -5px; margin-left: -59px; padding: 5px 25px 5px 5px; padding-left: 59px; color: inherit; line-height: inherit; text-decoration: none; }
.list03 > li > a.new:before { content: ""; display: block; position: absolute; top: 50%; left: 0; background-position: 0 -1404px; width: 54px; height: 24px; margin-top: -12px; }

/* ##.list04
 運営からのお知らせ用リスト
 `.list04.ic.committee` 運営よりのアイコン付与 `.list04.ic.new`       NEWのアイコン

```
<ul class="list04"> <li><a href="#">list04</a></li> <li>list04</li> <li><a href="#">list04</a></li> <li>list04</li>
<!-- /.list02.committee --></ul>

<ul class="list04 ic committee"> <li> <a href="/render?render_id=73">十五夜イベント選定セットを受け取る</a> </li> <li> <a href="/render?render_id=74">かぐやちゃんおませセット受け取る</a> </li>
<!-- /.list02.committee --></ul>

<ul class="list04 ic new"> <li> <a href="/mypage/news?id=76">カメ友達申請があります。</a> </li> <li> <a href="/mypage/news?id=77">連絡帳への書き込みがあります。</a> </li>
<!-- /.list04.new --></ul>
```
*/
.list04 { background-color: #fff; }
.list04 > li { position: relative; padding: 12px 5px; margin-bottom: 2px; background-color: #fff; line-height: 1.2; border-bottom: 2px dotted #e0be93; }
.list04 > li:last-child { border-bottom: none; }
.list04 > li > a { position: relative; z-index: 2; display: block; margin: -12px -5px; padding: 12px 13px 12px 5px; color: inherit; line-height: inherit; text-decoration: none; }
.list04 > li > a:after { content: ""; display: block; position: absolute; top: 50%; right: 5px; background-position: 0 -1056px; width: 8px; height: 12px; margin-top: -6px; }
.list04.ic > li:after { content: ""; display: block; position: absolute; top: 50%; left: 0; }
.list04.ic.committee > li { padding-left: 59px; }
.list04.ic.committee > li:after { background-position: 0 -1132px; width: 54px; height: 24px; margin-top: -12px; }
.list04.ic.committee > li > a { margin-left: -59px; padding-left: 59px; }
.list04.ic.new { border-top: 1px dotted #e0be93; }
.list04.ic.new > li { padding-left: 59px; }
.list04.ic.new > li:after { background-position: 0 -1404px; width: 54px; height: 24px; margin-top: -12px; }
.list04.ic.new > li > a { margin-left: -59px; padding-left: 59px; }

/* ■[module]カラム
 ファイル ： web/frontend/scss/sp/_modules/_column.scss 概要 ： カラムモジュール
*/
/* #.colSet01, .column
 カラムモジュール。※.columnは`.colSet01`に移行していく予定。
 `.colSet01.columnType01 > dt` `.column.columnType01 > dt` width:65px;をセットする。   ※.columnをdisplay:tableで設定していた時の名残なので、あまり使わないと思うが一応。。

```
<div class="colSet01"> <p class="col1"> <img src="/images/sp/common/no_img.png" width="65" height="65" alt=""> </p> <div class="col2"> <p>ユーザー名</p> <dl class="param"> <dt>レベル</dt> <dd>00</dd> </dl> <div class="wireLink alignR"> <p><a class="btn">ボタン</a></p> </div> </div>
<!-- /.colSet01 --></div>

<dl class="column"> <dt><img src="/images/sp/common/no_img.png" width="65" height="65" alt=""></dt> <dd> <p>ユーザー名</p> <dl class="param"> <dt>レベル</dt> <dd>00</dd> </dl> <div class="wireLink alignR"> <p><a class="btn">ボタン</a></p> </div> </dd>
<!-- /.column --></dl>
```
*/
.column, .colSet01 { /*
> * { display:table-cell; vertical-align:top;
}
> dt { padding-right:5px;
}
*/ }
.column.blockLink, .colSet01.blockLink { overflow: hidden; }
.column > dt, .column > .col1, .colSet01 > dt, .colSet01 > .col1 { float: left; margin-right: 5px; }
.column > dd, .column > .col2, .colSet01 > dd, .colSet01 > .col2 { overflow: hidden; }
.column > .col3, .colSet01 > .col3 { float: right; margin-left: 5px; }
.column.columnType01 > dt, .colSet01.columnType01 > dt { width: 65px; }

label.colSet01 { overflow: hidden; display: block; }

/* #.colSet02
 カラムモジュール。   `.colSet02`の要素がdisplay:tableになり、直下の子要素はすべて`display:table-cell`になる。
 `.columnType01 > dt` width:70px;をセットする。

```
<dl class="colSet02"> <dt><img src="/images/sp/common/navigator/kamomen_01.png" width="80" height="80" alt=""></dt> <dd> <p>新しいカメがやってきたメン。</p> <p>これからは新しいカメもよろしくメン!!</p> </dd>
<!-- /.colSet02 --></dl>
```
*/
.colSet02 { display: table; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.colSet02 > * { display: table-cell; vertical-align: middle; }
.colSet02.columnType01 > dt { width: 70px; }

/* #.float[Align]
 floatの便利モジュール
 `.floatL` float: left `.floatR` float: right
*/
.floatL { float: left; margin: 5px 5px 5px 0; }

.floatR { float: right; margin: 5px 0 5px 5px; }

/* #.imgList
 ※利用時は、<li>を並べる際に改行や空白を入れないように記述（余計なスペースがはいるため）
 `.imgList.column3` 3カラムで改行

```
<p>■デフォルト</p>
<ul class="imgList"> <li> <a href="#"> <img src="/images/sp/common/no_img.png" alt="" width="65" height="65"> </a> </li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li>
</ul>

<p style="margin-top:15px;">■.column3</p>
<ul class="imgList column3"> <li> <a href="#"> <img src="/images/sp/common/no_img.png" alt="" width="65" height="65"> </a> </li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li> <li><img src="/images/sp/common/no_img.png" alt="" width="65" height="65"></li>
</ul>
```
*/
.imgList { text-align: center; }
.imgList > li { display: inline-block; vertical-align: middle; margin: 5px; }
.imgList.column3 { width: 225px; margin-left: auto; margin-right: auto; }

/* ■[module]name
 ファイル ： web/frontend/scss/sp/_modules/_form.scss 概要 ： form用、またformが入るデザインのCSS
*/
/* #.settingForm
 `dl.settingForm > dd`に対してmargin-bottomをつける。

```
<dl class="settingForm"> <dt><span class="emoji f995"></span>ひとことコメント</dt> <dd> <p><textarea rows="3" cols="28" style="width:98%;" name="comment" id="comment">よろしくね!</textarea></p> <p><strong>(全角100文字以内)</strong></p> </dd> <dt><span class="emoji f9e6"></span>マイカメ農園に表示するカメを選択</dt> <dd> <select name="default_farm" id="default_farm"> <option value="12" selected="selected">ココエのカメ</option> </select> </dd> <dt><span class="emoji f8f2"></span>マイカメ農園の表示方法</dt> <dd><input name="type" type="radio" value="0" id="type_0" checked="checked"><label for="type_0">全景</label><br><input name="type" type="radio" value="1" id="type_1"><label for="type_1">農園</label><br><input name="type" type="radio" value="2" id="type_2"><label for="type_2">ランダム</label></dd>
<!-- /.settingForm --></dl>
```
*/
dl.settingForm > dd { margin-bottom: 10px; }

/* # #levelSearch
 「レベルから探す」という検索フォームで使う。

```
<div id="wrap">
<div id="levelSearch" class="inner"> <form action="/fellow/serch" method="post"> レベル<input type="text" name="level" value="" size="3" istyle="4" format="*N" mode="numeric">からカメ友達を <input type="submit" value="探す" class="btn btnSizeS"> </form>
<!-- /#levelSearch --></div>
<!-- /#wrap--></div>
```
*/
#levelSearch { text-align: center; }
#levelSearch input[type=text] { display: inline-block; width: 4em; margin: 0 5px; }

/* ■[module]name
 ファイル ： web/frontend/scss/sp/_modules/_title.scss 概要 ： 
*/
/* #見出し
 見出しモジュール

*/
#mttl, .mttl, .ttl, .sttl { position: relative; text-align: center; line-height: 1.2; }
#mttl > .emoji, .mttl > .emoji, .ttl > .emoji, .sttl > .emoji { margin: 0 5px; }

/* ##.mttl
 h1(page title)   ※ちなみに、#mttlは廃止する方向で動きたい。。。.mttlで。
 `#mttl.bgImg` このIDを指定すると、中のテキストなどを透明にします。（背景表示前提の処理） `.mttl.bgImg` このclassを指定すると、中のテキストなどを透明にします。（背景表示前提の処理）

```
<h1 class="mttl img"> <img src="/images/sp/gacha/144/header.png" alt="十五夜うさぎのだんごガチャ">
</h1>
<br>
<h1 class="mttl bgImg" style="height: 69px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/shop/mttl.png') no-repeat center top #FFEFAB;"> アイテムショップ
</h1>
```
*/
#mttl, .mttl { padding: 8px 5px; background-color: #9cda34; color: #fff; font-size: 123%; }
#mttl.bgImg, .mttl.bgImg { padding: 0; color: transparent !important; line-height: 1 !important; font-size: 1px !important; }
#mttl + .ttl, #mttl + .sec > .ttl:first-child, .mttl + .ttl, .mttl + .sec > .ttl:first-child { background-color: #c1e980; border-top: 1px solid #7cb51b; border-bottom: 1px solid #9cda34; color: #783300; }
#mttl.img + .ttl, #mttl.img + .sec > .ttl:first-child, #mttl.bgImg + .ttl, #mttl.bgImg + .sec > .ttl:first-child, .mttl.img + .ttl, .mttl.img + .sec > .ttl:first-child, .mttl.bgImg + .ttl, .mttl.bgImg + .sec > .ttl:first-child { background-color: #9cda34; border-top: none; border-bottom: none; color: #fff; }

/* ##.ttl
 h2(section title)
 `.mttl`の下に`.ttl`が配置される場合は、通常レギュレーションとデザインを変えている。   `.mttl + .ttl` `.mttl + .sec > .ttl:first-child`

```
<h2 class="ttl">section title</h2>

<br>
<h1 class="mttl">page title</h1>
<h2 class="ttl">section title</h2>
```
*/
.ttl { padding: 5px; background-color: #9cda34; color: #fff; font-size: 108%; }

/* ##.sttl
 h3(section title2)

```
<h3 class="sttl">section title2</h3>
```
*/
.sttl { padding: 5px; background-color: #c1e980; color: #783300; font-size: 100%; }

/* ##.sttl2
 h4(section title3)

```
<h4 class="sttl2">section title3</h4>
```
*/
.sttl2 { margin-bottom: 5px; text-align: center; line-height: 1.2; color: #ff6c00; font-size: 100%; }

/* ##見出し装飾モジュール
 見出しの装飾モジュール   ※.sttl2には設定していません。
 `.img`    このclassを指定した中の画像は、width:100%で表示。 `.deco01` 上下に線 `.deco02` 上下に線その2 `.deco03` 下に線

```
<h1 class="mttl deco01">.mttl.deco01</h1>
<br>
<h1 class="mttl deco02">.mttl.deco02</h1>
<br>
<h1 class="mttl deco03">.mttl.deco03</h1>
<br>

<h2 class="ttl deco01">.ttl.deco01</h2>
<br>
<h2 class="ttl deco02">.ttl.deco02</h2>
<br>
<h2 class="ttl deco03">.ttl.deco03</h2>
<br>

<h3 class="sttl deco01">.sttl.deco01</h3>
<br>
<h3 class="sttl deco02">.sttl.deco02</h3>
<br>
<h3 class="sttl deco03">.sttl.deco03</h3>
<br>
```
*/
#mttl.img, .mttl.img, .ttl.img, .sttl.img { padding: 0; line-height: 1; }
#mttl.img > img, .mttl.img > img, .ttl.img > img, .sttl.img > img { width: 100%; }
#mttl.deco01, .mttl.deco01, .ttl.deco01, .sttl.deco01 { border-top: 1px solid #7cb51b; border-bottom: 1px solid #588c00; }
#mttl.deco01:before, #mttl.deco01:after, .mttl.deco01:before, .mttl.deco01:after, .ttl.deco01:before, .ttl.deco01:after, .sttl.deco01:before, .sttl.deco01:after { position: absolute; left: 0; content: ""; display: block; width: 100%; height: 1px; }
#mttl.deco01:before, .mttl.deco01:before, .ttl.deco01:before, .sttl.deco01:before { top: 0; background-color: #588c00; }
#mttl.deco01:after, .mttl.deco01:after, .ttl.deco01:after, .sttl.deco01:after { bottom: 0; background-color: #7cb51b; }
#mttl.deco02, .mttl.deco02, .ttl.deco02, .sttl.deco02 { background-color: #edfbd6; border-top: 2px solid #9cda34; border-bottom: 2px solid #9cda34; }
#mttl.deco03, .mttl.deco03, .ttl.deco03, .sttl.deco03 { border-bottom: 1px solid #9cda34; }

/* ■[module]セクション
 ファイル ： web/frontend/scss/sp/_modules/_section.scss 概要 ： セクションモジュール
*/
/* #.sec
 sectionの変わり。と思った作ったのだが、あまりsectionっぽい動きをしていない。   とりあえず、.innerを使うためのWrapみたいな？以下ページ記述の基本型

```
<div id="wrap">
<h1 class="mttl">ページタイトル</h1>

<div class="sec"> <h2 class="ttl">セクションタイトル</h2> <div class="inner"> <p>文言</p> <p class="wireLink"> <a href="#" class="btn">ボタン</a> </p> </div> <h3 class="sttl">セクション小タイトル</h3> <ul class="inner"> <li class="colSet01"> <a href="#" class="blockLink arrow colSet01"> <p class="col1"> <img src="/images/sp/common/no_img.png" width="65" height="65" alt=""> </p> <div class="col2"> <p class="linkType01">項目</p> </div> </a> <!-- /.colSet01 --></li> <li class="colSet01"> <p class="col1"> <img src="/images/sp/common/no_img.png" width="65" height="65" alt=""> </p> <div class="col2"> <p>項目</p> <div class="alignR"> <p><a href="#" class="btn">ボタン</a></p> </div> </div> <!-- /.colSet01 --></li> <!-- /.inner --></ul> <div class="autopagerBtn"> <span rel="next"><a href="#">もっと見る</a></span> </div>
<!-- /.sec --></div>

<div id="ctFooter"> <p class="backLink"> <a href="#">xxxxへ戻る</a> </p>
<!-- /#ctFooter --></div>
</div>
```
*/
.sec { position: relative; background-color: #fff; }
.sec .inner { padding: 5px; }
.sec .inner.line01 { padding-bottom: 8px; }
.sec .inner.line01Top { padding-top: 8px; }
.sec ul.inner, .sec ol.inner { padding: 0; }
.sec ul.inner.line01, .sec ol.inner.line01 { padding-bottom: 3px; }
.sec ul.inner.line01Top, .sec ol.inner.line01Top { padding-top: 3px; }
.sec ul.inner:last-child > li:last-child .col2 .btn, .sec ul.inner:last-child > li:last-child dd .btn, .sec ol.inner:last-child > li:last-child .col2 .btn, .sec ol.inner:last-child > li:last-child dd .btn { margin-bottom: 10px; }
.sec .inner > li { padding: 8px 5px 5px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line01.png') left top repeat-x; -moz-background-size: 5px 3px; -o-background-size: 5px 3px; -webkit-background-size: 5px 3px; background-size: 5px 3px; }
.sec .inner > li:first-child { padding-top: 5px; background-image: none; }

.inner > .blockLink, .inner > li > .blockLink { padding: 5px; margin: -5px; }
.inner > #mttl, .inner > .mttl, .inner > .ttl, .inner > .sttl, .inner > .autopagerBtn, .inner > li > #mttl, .inner > li > .mttl, .inner > li > .ttl, .inner > li > .sttl, .inner > li > .autopagerBtn { margin-left: -5px; margin-right: -5px; }
.inner > #mttl:first-child, .inner > .mttl:first-child, .inner > .ttl:first-child, .inner > .sttl:first-child, .inner > li > #mttl:first-child, .inner > li > .mttl:first-child, .inner > li > .ttl:first-child, .inner > li > .sttl:first-child { margin-top: -5px; margin-bottom: 5px; }
.inner > .floatL:first-child, .inner > .floatR:first-child, .inner > li > .floatL:first-child, .inner > li > .floatR:first-child { margin-top: 0; }
.inner > .backLink, .inner > li > .backLink { margin-bottom: 0; }

 /*
.box02 { $padding: 3px; padding: $padding; background-color: inherit; border: 3px solid #9ed73e; @include border-radius(15px); @include box-sizing(border-box); color: #ff0000; text-align: center; margin: $BASE_MARGIN auto;
 > a { display: block; color: inherit; padding: $padding; margin: -$padding; }

} */
/* #.box03
 ボックスモジュール1
 `.box03.box03Type01`  `.box03.box03Type03` 

```
<div class="sec">
<div class="box03"> <div class="inner"> <p>.box03</p> <!-- /.inner --></div>
<!-- /.box03 --></div>

<div class="box03 box03Type01"> <div class="inner"> <p>.box03.box03Type01</p> <!-- /.inner --></div>
<!-- /.box03 --></div>

<div class="box03 box03Type03"> <div class="inner"> <p>.box03.box03Type03</p> <!-- /.inner --></div>
<!-- /.box03 --></div>
<!-- /.sec --></div>
```
*/
.box03 { padding: 1px 0; margin-bottom: 5px; background-color: #9cda34; }
.box03 > .inner { background-color: #edfbd6; border-top: 1px solid #9ed73e; border-bottom: 1px solid #9ed73e; padding: 5px 0; }
.box03.box03Type01 { background-color: #ffaac2; }
.box03.box03Type01 > .inner { background-color: #fff3f7; border-top-color: #ffaac2; border-bottom-color: #ffaac2; }
.box03.box03Type03 { background-color: #fce73d; }
.box03.box03Type03 > .inner { background-color: #fcf9df; border-top-color: #fad230; border-bottom-color: #fad230; }

/* #.box04
 ボックスモジュール2

```
<div class="sec">
<div class="box04"> <h2 class="ttl"><span class="emoji f9bf"></span>今日の収穫ランキング<span class="emoji f9bf"></span></h2> <ul class="inner"> <li class="colSet01"> <a href="#" class="blockLink arrow colSet01"> <p class="col1"> <img width="65" height="65" src="/images/sp/common/no_img.png"> </p> <div class="col2"> <p><span class="emoji f9bf"></span>1位 <span class="linkType01">むっく</span></p> <p><span class="emoji f8ba"></span>レベル:72</p> <p><span class="emoji f9ba"></span>144カメG獲得</p> </div> </a> </li> </ul> <p class="getMore"> <a href="/ranking?type=Daily"><span>もっと見る</span></a> </p>
 <h2 class="ttl"><span class="emoji f9bf"></span>今日の収穫ランキング<span class="emoji f9bf"></span></h2> <ul class="inner"> <li class="colSet01"> <a href="#" class="blockLink arrow colSet01"> <p class="col1"> <img width="65" height="65" src="/images/sp/common/no_img.png"> </p> <div class="col2"> <p><span class="emoji f9bf"></span>1位 <span class="linkType01">むっく</span></p> <p><span class="emoji f8ba"></span>レベル:72</p> <p><span class="emoji f9ba"></span>144カメG獲得</p> </div> </a> </li> </ul> <p class="getMore"> <a href="/ranking?type=Daily"><span>もっと見る</span></a> </p>
<!-- /.box04 --></div>
<!-- /.sec --></div>
```
*/
.box04 { margin: 5px 5px 7px; background-color: #fff; border: 3px #cb934b solid; -moz-box-shadow: 0 2px 1px #a66818; -webkit-box-shadow: 0 2px 1px #a66818; box-shadow: 0 2px 1px #a66818; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.box04 > *:first-child { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px; border-radius: 5px 5px 0 0; }
.box04 > *:last-child { -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0; border-radius: 0 0 5px 5px; }
.box04 > *:only-child { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.box04 .inner > li { background-image: none; padding-top: 5px; border-top: 1px #e0be93 dashed; }
.box04 .inner > li:first-child { border-top: none; }
.box04 .getMore { background-image: none; border-top: 1px #e0be93 dashed; }

/* #.bannerSec
 バナー表示セクション

```
<div class="bannerSec sec"> <div class="bnrType01"> <a href="/transit?transit_id=4"> <dl> <dt><img src="/images/sp/transit/4/banner.png" width="220"></dt> <dd>2周年記念イベント開催中</dd> </dl> </a> <!-- /.bnrType01 --></div> <div class="bnrType01"> <a href="/transit?transit_id=4"> <dl> <dt><img src="/images/sp/transit/4/banner.png" width="220"></dt> <dd>2周年記念イベント開催中</dd> </dl> </a> <!-- /.bnrType01 --></div>
<!-- /.bannerSec --></div>
```
*/
.bannerSec { padding: 10px 0; }
.bannerSec > .bnrType01:first-child { margin-top: 0; }
.bannerSec.line03:after { margin-top: 10px; margin-bottom: -10px; }

/* # #attention.sec
 注意事項表示セクション

```
<div id="attention" class="sec"> <h2 class="ttl"><span class="emoji f9dc"></span>注意事項<span class="emoji f9dc"></span></h2> <div class="inner"> <ul> <li><span class="emoji f9dc"></span>ガチャから出るアイテムは、重複する可能性があります。</li> <li><span class="emoji f9dc"></span>ガチャを行うには「ガチャをする」ボタンを押してください。</li> <li><span class="emoji f9dc"></span>ガチャで手に入れたデコレーションアイテム・カメイクはプレゼントで他人に贈ることはできません。</li> </ul> <!-- /.inner --></div>
<!-- /#attention.sec --></div>
```
*/
.sec#attention { background-color: #fff3de !important; color: #783300 !important; }
.sec#attention .ttl, .sec#attention .sttl { color: #ff0000 !important; background-color: #fced71 !important; border-top: 2px solid #ffd45a !important; border-bottom: 2px solid #ffd45a !important; }

/* # #ctFooter

```
<div id="wrap">
<h1 class="mttl">ページタイトル</h1>

<div class="sec"> <h2 class="ttl">セクションタイトル</h2> <div class="inner"> <p>文言</p> <p class="wireLink"> <a href="#" class="btn">ボタン</a> </p> </div>
<!-- /.sec --></div>

<div id="ctFooter"> <p class="backLink"> <a href="#">xxxxへ戻る</a> </p>
<!-- /#ctFooter --></div>
<!-- /#wrap --></div>
```
*/
#ctFooter { margin-top: 10px; padding: 0 5px 5px; }
#ctFooter:before { content: ""; display: block; height: 6px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line03.png') left top repeat-x; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
#ctFooter:before { margin: 0 -5px 5px; }
#ctFooter > .wireLink, #ctFooter > .mypageLink, #ctFooter > .backLink, #ctFooter > .relationLink, #ctFooter > .faqLink { margin: 17px 0 12px; }

/* # #othersMenu

```
<div class="othersMenu"> <nav> <ul class="navList"> <li> <a class="off"><span>.othersMenu</span></a> </li> <li> <a href="#"><span>.othersMenu</span></a> </li> <li> <a class="off"><span>.othersMenu</span></a> </li> <li> <a href="#"><span>.othersMenu</span></a> </li> <!-- /.navList --></ul> </nav>
<!-- /.othersMenu --></div>
```
*/
#othersMenu { position: relative; padding-bottom: 32px; background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/ct_footer_place.png'), url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/ct_footer_bg.png'); background-position: -36px bottom, 53px bottom; background-repeat: no-repeat, repeat-x; -moz-background-size: 99px 82px,212px 61px; -o-background-size: 99px 82px,212px 61px; -webkit-background-size: 99px 82px,212px 61px; background-size: 99px 82px,212px 61px; background-color: #ffec82; }
#othersMenu:before { content: ""; display: block; height: 6px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line03.png') left top repeat-x; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
#othersMenu:after { content: ""; position: absolute; bottom: 62px; right: 2px; background-position: 0 -925px; width: 19px; height: 17px; }

.line03 + #othersMenu, .line03TB + #othersMenu { padding-top: 1px; }
.line03 + #othersMenu:before, .line03TB + #othersMenu:before { display: none; }

/* ■[module]color type1 - pink
 ファイル ： web/frontend/scss/sp/_modules/_color1.scss 概要 ： 基本モジュールの色替え
*/
/* #color type1 pink
 ピンクに色替え

```
<h1 class="mttl mttlType01">.mttl.mttlType01</h1>
<br>

<h1 class="mttl mttlType01 deco03">.mttl.mttlType01.deco03</h1>
<br>

<h1 class="mttl">.mttl.mttlType01</h1>
<div class="sec secType01"> <h2 class="ttl">.mttl + .sec.secType01 > .ttl:first-child</h2>
<!-- /.sec --></div>
<br>

<div class="sec secType01"> <h2 class="ttl">.ttl</h2> <br> <h3 class="sttl">.sttl</h3> <br> <h2 class="ttl deco01">.ttl.deco01</h2> <br> <h3 class="sttl deco01">.sttl.deco01</h3> <br>
 <p class="getMore"> <a href="#"><span>もっと見る</span></a> </p> <p class="searchMore"> <a href="#"><span>もっと見る</span></a> </p> <div class="autopagerBtn"> <a rel="next" href="#"><span>もっと見る</span></a> </div>
<!-- /.sec --></div>

<div class="tab tabType01"> <nav> <ul class="navList"> <li><a href="#">.tab</a></li> <li class="active"><a>.tab .active</a></li> <li class="off"><a>.tab .off</a></li> <!-- /.navList --></ul> </nav>
<!-- /.tab --></div>
```
*/
#mttl.mttlType01, .mttl.mttlType01 { background-color: #ff7ca1; }

#wrap .mttlType01.deco03 { border-bottom-color: #e72f53; }

#mttl + .sec.secType01 > .ttl:first-child, .mttl + .sec.secType01 > .ttl:first-child { border-top-color: #eb6586; border-bottom-color: #ff92aa; background-color: #fdc9d8; }

.sec.secType01 .ttl { background-color: #ff7ca1; }
.sec.secType01 .sttl { background-color: #fda8c0; }
.sec.secType01 .ttl.deco01, .sec.secType01 .sttl.deco01 { border-top-color: #f3577b; border-bottom-color: #e72f53; }
.sec.secType01 .ttl.deco01:before, .sec.secType01 .sttl.deco01:before { background-color: #e72f53; }
.sec.secType01 .ttl.deco01:after, .sec.secType01 .sttl.deco01:after { background-color: #f3577b; }
.sec.secType01 .blockLink.arrow:after { background-position: 0 -984px !important; }
.sec.secType01 .getMore > a:after { background-position: 0 -1305px; }
.sec.secType01 .searchMore > a:after { background-position: 0 -1584px; }
.sec.secType01 .autopagerBtn { border-top-color: #f75a88; }
.sec.secType01 .autopagerBtn > a:before, .sec.secType01 .autopagerBtn > span:before { background-position: 0 -56px; }
.sec.secType01 .autopagerBtn > a:after, .sec.secType01 .autopagerBtn > span:after { background-position: 0 -245px; }
.sec.secType01 .autopagerBtn > a > span, .sec.secType01 .autopagerBtn > span > span { border-bottom-color: #f75a88; }

.tab.tabType01:after { background-color: #f75987; }
.tab.tabType01 .navList > li > a { background-color: #ffb9cd; border-top-color: #f75987; border-left-color: #f75987; border-right-color: #f75987; color: #793400; }

/* ■[module]その他
 ファイル ： web/frontend/scss/sp/_modules/_others.scss 概要 ： その他のモジュール
*/
/* #.wBase, wFull
 `.wBase` 横幅を$BASE_WIDTHにして中央配置にする。 `.wFull` 横幅100％にセット

```
<div class="sec wBase bgColor2"> <p>wBase</p>
</div>

<p><img src="/images/sp/gacha/144/header.png" alt="十五夜うさぎのだんごガチャ" class="wFull"></p>
```
*/
.wBase { width: 320px; margin-left: auto; margin-right: auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.sec .inner > .wBase { width: 310px; }

.wFull { width: 100%; }

/* #.param
 パラメーター系で利用。dl要素につけると、dt:afterにコロンを挿入。
 `.param.inline`   インラインブロックにする `.param.paramSub` カッコをつける

```
<dl class="param"> <dt>レベル</dt> <dd>10</dd>
</dl>

<div> <dl class="param inline"> <dt>経験値</dt> <dd>10</dd> </dl> を獲得しました。
</div>

<dl class="param paramSub"> <dt>レベル</dt> <dd>10</dd>
</dl>
```
*/
dl.param { display: block; text-decoration: inherit; }
dl.param > * { display: inline; }
dl.param.inline { display: inline-block; padding-right: 5px; }
dl.param.paramSub:before { content: "("; }
dl.param.paramSub:after { content: ")"; }
dl.param > dt { padding-right: 0; }
dl.param > dt:after { content: ":"; }
dl.param > dd.block { display: block; }

/* #.attentionWord
 注意事項系の文言をつかう場合に付与する。 んだが、すごく廃止したい。。。あんまし使う意味がないので。   `#contents`の直下の最後にこの要素があると、灰色の線を上にひく。

*/
.attentionWord { padding: 5px; }

#contents > .attentionWord:last-child { border-top: 2px solid #ccc; }

.sec .inner .attentionWord { margin: 5px -5px; }

.sec > .inner .attentionWord:last-child { margin-bottom: -5px; }

/* #purse
 アメG、カメG、リサイクルポイントの所持金額表示のレギュレーション

```
<div id="purse"> <div> <dl class="purseContent param"> <dt class="goldUnit">カメG</dt> <dd><span class="goldUnit">2019</span>カメG</dd> </dl> </div>
<!-- /#purse --></div>
```
*/
#purse { display: table; table-layout: fixed; border-collapse: separate; width: 100%; margin: 5px auto; font-size: 92%; }
#purse > * { display: table-cell; vertical-align: middle; padding: 0 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#purse .purseContent { padding: 3px 10px; background-color: #fff6ab; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; }
#purse.recycle .purseContent > dt { color: #ff6600; }

/* #footBookInputSec
 連絡帳へ書き込むセクション

```
<div id="wrap">
<div id="footBookInputSec" class="inner"> <div class="writeFootbook"> <form action="#" method="post"> <input type="text" placeholder="全角50文字以内" required="required" name="comment"> <p class="wireLink"> <input type="submit" value="連絡帳に書き込む" class="btn"> </p> </form> <!-- /.writeFootbook --></div>
<!-- /#footBookInputSec --></div>
<!-- /#wrap --></div>
```
*/
#footBookInputSec { border-bottom: 1px #e0be93 dashed; }
#footBookInputSec .writeFootbook .wireLink { margin-bottom: 5px; }

.writeFootbook .btn { width: 80%; padding-top: 8px; padding-bottom: 8px; }

/* .raidBtnSet
 レイドイベント、「ボスXXXが出現中」+残り時間表示セット

```
<dl class="feedMeetBoss"> <dt> <a href="/raid/top" class="btn02 raid">bossが出現中</a> </dt> <dd class="restTime">残り時間<strong>MM分SS秒</strong></dd>
<!-- /.feedMeetBoss --></dl>
```
*/
.feedMeetBoss { text-align: center; }
.feedMeetBoss .restTime { margin-top: 2px; }
.feedMeetBoss .restTime:before { content: "\2514"; }
.feedMeetBoss .restTime:after { content: "\2518"; }

/* .nextKameGrow
 LvNでカメが成長

```
<div class="nextKameGrow"> <p>Lv10でカメが成長！</p>
<!-- /.nextKameGrow --></div>
```
*/
.nextKameGrow { margin: 0 0 10px 0; }
.inner > .nextKameGrow:first-child { margin-top: 0; }
.nextKameGrow > p { position: relative; padding: 5px 25px; background-color: #fff1cb; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #ff005a; text-align: center; line-height: 1.2; font-size: 116%; border: 2px solid #e3bc81; }
.nextKameGrow > p:before, .nextKameGrow > p:after { content: ""; display: block; position: absolute; top: 50%; }
.nextKameGrow > p:before { left: 0; background-position: 0 -407px; width: 35px; height: 25px; margin-top: -13px; }
.nextKameGrow > p:after { right: 0; background-position: 0 -432px; width: 30px; height: 27px; margin-top: -14px; }

/* ■[module]モーダルウィンドウ
 ファイル ： web/frontend/scss/_modules/_expand.scss 概要  ： モーダルウィンドウを表示するためのCSS
*/
/* #モーダルウィンドウ基本型
 onload, onclick, onsubmitいずれかに対応。   利用例は、以下参照。
 ###onload

```
<script> //init $(function(){ cp.expand.expandWindow(window, "load", "#idName"); });
</script>

```
 ###onclick, onsubmit
```
<script> //init $(function(){ cp.expand.expandWindow(".trigger"); });
</script>

<a class="trigger" href="#idName"></a>

```
*/
#wrap > #expandBaseLayer { position: absolute; top: 0; left: 0; z-index: 998; background-color: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.expandWindow { display: none; position: relative; z-index: 999; margin: 0 10px 3px; padding-bottom: 20px; border: 3px #cb934b solid; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 3px 1px #a66818; -webkit-box-shadow: 0 3px 1px #a66818; box-shadow: 0 3px 1px #a66818; }
#wrap .expandWindow { background-color: #fff; }
.expandWindow .sec { background-color: inherit; }
.expandWindow > *:first-child { -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px; border-radius: 8px 8px 0 0; }
.expandWindow > *:nth-last-child(2) { -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0; border-radius: 0 0 8px 8px; }
.expandWindow a.close { display: block; position: absolute; bottom: -20px; left: 50%; color: transparent; font-size: 1px; text-decoration: none; background-position: 0 -459px; width: 37px; height: 40px; margin-left: -19px; }
.expandWindow a.close.btn { display: inline-block; width: auto; height: auto; position: relative; top: auto; right: auto; color: #fff; font-size: 14px; background: none !important; }
.expandWindow .iScrollWrap { position: absolute; top: 0; left: 0; bottom: 20px; width: 100%; overflow: hidden; }
.expandWindow .iScrollWrap .iScroller { position: absolute; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.expandWindow .backLink { margin-top: 20px; }

/*form.invalidForm
---------------------------------------*/
.invalid form.invalidForm select, .invalid form.invalidForm input, .invalid form.invalidForm textarea { display: none !important; }
.invalid object { display: none !important; }

/* ■[module]メーター
 ファイル ： web/frontend/scss/sp/_modules/_meter.scss 概要 ： メーターモジュール
*/
/* #LV, 行動力メーター

```
<ul class="statusList"> <li> <dl class="statusMeter level"> <dt> <span class="img">LV.</span> <span class="txt">8</span> </dt> <dd> <div class="meter level"> <span class="meterBar" style="width:38%"> <span class="meterTxt">あと528pt</span> </span> <!-- /.meter --></div> </dd> <!-- /.level --></dl> </li> <li> <dl class="statusMeter actPoint"> <dt> <span class="img">行動力</span> </dt> <dd> <div class="meter actPoint"> <span class="meterBar" style="width:100%"> <span class="meterTxt">62/62</span> <!-- /.meter --></span> </div> </dd> <!-- /.actPoint --></dl> </li> <li> <dl class="statusMeter satisfaction"> <dt> <span class="img">満足度</span> </dt> <dd> <div class="meter satisfaction"> <span class="meterBar" style="width:100%"> <span class="meterTxt">62/62</span> <!-- /.meter --></span> </div> </dd> <!-- /.actPoint --></dl> </li>
<!-- /.statusList --></ul>
```
*/
.statusMeter > dt { float: left; position: relative; width: 31%; height: 28px; margin-right: -7%; background-color: #733e0e; -moz-border-radius: 5px 5px 0 5px; -webkit-border-radius: 5px; border-radius: 5px 5px 0 5px; color: #fff; line-height: 1; }
.statusMeter > dt:after { content: ""; display: block; position: absolute; z-index: 2; }
.statusMeter > dt .img { position: absolute; left: -9999px; color: transparent; font-size: 1px; }
.statusMeter > dt .txt { position: absolute; bottom: 3px; right: 23%; text-align: right; }
.statusMeter.level > dt:after { top: -2px; left: 1px; background-position: 0 -1390px; width: 23px; height: 14px; }
.statusMeter.actPoint > dt:after { top: -3px; left: 4px; background-position: 0 -942px; width: 32px; height: 30px; }
.statusMeter.satisfaction > dt:after { top: -2px; left: 47%; background-position: 0 -1537px; width: 36px; height: 29px; margin-left: -18px; }
.statusMeter > dd { float: right; width: 76%; }
.statusMeter > dd .meter { margin-top: 3px; }

.meter { overflow: hidden; position: relative; height: 19px; border: 3px #733e0e solid; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JhODEzNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q4YTg2MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ba8135), color-stop(100%, #d8a862)); background: -moz-linear-gradient(#ba8135, #d8a862); background: -webkit-linear-gradient(#ba8135, #d8a862); background: linear-gradient(#ba8135, #d8a862); -moz-box-shadow: 0 2px 1px #9c6225 inset; -webkit-box-shadow: 0 2px 1px #9c6225 inset; box-shadow: 0 2px 1px #9c6225 inset; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; color: #fff; text-align: center; font-size: 13px; }
.meter .meterBar { position: static; display: block; height: 19px; -moz-border-radius: 9px 0 0 9px; -webkit-border-radius: 9px; border-radius: 9px 0 0 9px; }
.meter .meterBar[style="width:100%"] { -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px; }
.meter .meterTxt { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 16px; padding-top: 3px; color: inherit; line-height: 1; }
.meter.level .meterBar { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYzlkNiIvPjxzdG9wIG9mZnNldD0iMTMlIiBzdG9wLWNvbG9yPSIjNTlkY2U0Ii8+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9IiM1OWRjZTQiLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzAwYzlkNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYzlkNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00c9d6), color-stop(13%, #59dce4), color-stop(35%, #59dce4), color-stop(45%, #00c9d6), color-stop(100%, #00c9d6)); background: -moz-linear-gradient(#00c9d6 0%, #59dce4 13%, #59dce4 35%, #00c9d6 45%, #00c9d6 100%); background: -webkit-linear-gradient(#00c9d6 0%, #59dce4 13%, #59dce4 35%, #00c9d6 45%, #00c9d6 100%); background: linear-gradient(#00c9d6 0%, #59dce4 13%, #59dce4 35%, #00c9d6 45%, #00c9d6 100%); -moz-box-shadow: 0 0 5px #00776b inset; -webkit-box-shadow: 0 0 5px #00776b inset; box-shadow: 0 0 5px #00776b inset; }
.meter.actPoint .meterBar { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmNjlhNSIvPjxzdG9wIG9mZnNldD0iMTMlIiBzdG9wLWNvbG9yPSIjZmY4N2I3Ii8+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9IiNmZjg3YjciLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iI2ZmNjlhNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNjlhNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff69a5), color-stop(13%, #ff87b7), color-stop(35%, #ff87b7), color-stop(45%, #ff69a5), color-stop(100%, #ff69a5)); background: -moz-linear-gradient(#ff69a5 0%, #ff87b7 13%, #ff87b7 35%, #ff69a5 45%, #ff69a5 100%); background: -webkit-linear-gradient(#ff69a5 0%, #ff87b7 13%, #ff87b7 35%, #ff69a5 45%, #ff69a5 100%); background: linear-gradient(#ff69a5 0%, #ff87b7 13%, #ff87b7 35%, #ff69a5 45%, #ff69a5 100%); -moz-box-shadow: 0 0 5px #d52b4f inset; -webkit-box-shadow: 0 0 5px #d52b4f inset; box-shadow: 0 0 5px #d52b4f inset; }
.meter.satisfaction .meterBar { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM4YTJmNCIvPjxzdG9wIG9mZnNldD0iMTMlIiBzdG9wLWNvbG9yPSIjNjBiNWY1Ii8+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9IiM2MGI1ZjUiLz48c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzM3YTRmMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM2YTVlZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #38a2f4), color-stop(13%, #60b5f5), color-stop(35%, #60b5f5), color-stop(45%, #37a4f1), color-stop(100%, #36a5ee)); background: -moz-linear-gradient(#38a2f4 0%, #60b5f5 13%, #60b5f5 35%, #37a4f1 45%, #36a5ee 100%); background: -webkit-linear-gradient(#38a2f4 0%, #60b5f5 13%, #60b5f5 35%, #37a4f1 45%, #36a5ee 100%); background: linear-gradient(#38a2f4 0%, #60b5f5 13%, #60b5f5 35%, #37a4f1 45%, #36a5ee 100%); -moz-box-shadow: 0 0 5px #008bb3 inset; -webkit-box-shadow: 0 0 5px #008bb3 inset; box-shadow: 0 0 5px #008bb3 inset; }

#mainStatus { margin: 0 5px; }
#mainStatus .statusList > li { float: left; width: 49%; margin: 0 2% 0 0; }
#mainStatus .statusList > li:nth-child(2n) { margin-right: 0; }

/* #.meter2

```
<p class="meter2"> <img src="/images/sp/raid/hp_meter/raid_hp_meter09.png" alt="" width="112" height="19">
</p>
```
*/
.meter2 { position: relative; display: inline-block; vertical-align: middle; height: 27px; padding-top: 4px; margin-left: 12px; margin-right: 12px; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/bg_meter.png') repeat-x; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
.meter2 > img { position: relative; z-index: 2; vertical-align: top; }
.meter2:before, .meter2:after { content: ""; position: absolute; top: 0; display: block; width: 12px; height: 27px; }
.meter2:before { left: -12px; background-position: 0 -2855px; }
.meter2:after { right: -12px; background-position: 0 -2828px; }

/* ■[module]カモメン表示
 ファイル ： web/frontend/scss/sp/_modules/_navigator.scss 概要 ： カモメン表示モジュール
*/
/* #カモメン表示
 ##基本的な利用方法
 Symfonyモジュールを利用。 apps/frontend/templates/_navigator.php 

```

<!-- ■HTML展開 -->
<div class="navigator line01"> <a href="/mypage/index"> <dl class="navigatorInner"> <dt class="charaImgWrap"> <img src="/images/sp/common/navigator/kamomen_02.png" alt="カモメン" width="65" height="65"> </dt> <dd class="commentArea"> <div class="comment"> カモメンだよ～ </div> </dd> <!-- /.navigatorInner --></dl> </a>
<!-- /.navigator --></div>
<br>

<p>■.navigator.type02</p>
<div class="navigator type02"> <a href="/mypage/index"> <dl class="navigatorInner"> <dt class="charaImgWrap"> <img src="/images/sp/common/navigator/kamomen_02.png" alt="カモメン" width="65" height="65"> </dt> <dd class="commentArea"> <div class="comment"> カモメンだよ～ </div> </dd> <!-- /.navigatorInner --></dl> </a>
<!-- /.navigator --></div>
```
*/
.navigator { padding: 5px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.navigator > .blockLink { margin: -5px; padding: 5px; }
.navigator .navigatorInner { display: table; width: 100%; }
.navigator .navigatorInner > .charaImgWrap, .navigator .navigatorInner > .commentArea { display: table-cell; }
.navigator .charaImgWrap { vertical-align: top; width: 70px; }
.navigator .commentArea { vertical-align: middle; padding-left: 7px; }
.navigator .commentArea .comment { position: relative; padding: 5px; border: 3px solid #2571C5; background-color: #e9f7ff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #783300; line-height: 1.2; }
.navigator .commentArea .comment:before, .navigator .commentArea .comment:after { content: ""; position: absolute; top: 50%; margin-top: -6px; border-top: 6px solid transparent; border-right: 10px solid #2571C5; border-bottom: 6px solid transparent; }
.navigator .commentArea .comment:before { left: -13px; border-right-color: #2571c5; }
.navigator .commentArea .comment:after { left: -8px; border-right-color: #e9f7ff; }
.navigator.type02 { background-color: #fcf9df; }
.navigator.type02 .commentArea .comment { border-color: #fff; background-color: #fff; color: #7a5b3a; }
.navigator.type02 .commentArea .comment:before { border-right-color: #fff; }
.navigator.type02 .commentArea .comment:after { border-right-color: #fff; }

/* ■[module]name
 ファイル ： web/frontend/scss/sp/_modules/_stamp.scss 概要 ： AmebaAPIのスタンプ用CSS
*/
/* ##stamp
 AmebaAPIのスタンプ用CSS
 Symfonyモジュール   apps/frontend/modules/stamp/templates/_stamp.php

*/
/* stamp
--------------------------------------------------------*/
.inner .amebaAPI_stampSec { margin: 0 -5px !important; }

.amebaAPI_stampSec { position: relative; background-color: #fffaa5 !important; }
.amebaAPI_stampSec:before, .amebaAPI_stampSec:after { content: ""; display: block; width: 100%; height: 1px; background-color: #ffc000; border-bottom: 1px #d0a600 solid; }
.amebaAPI_stampSec .ttl { background-color: #fced71 !important; color: #ff0000 !important; }

/* ■[module]ボーナスモード
 ファイル ： web/frontend/scss/sp/_modules/_fever.scss 概要 ： ボーナスモードモジュール
*/
/* # #feverSec
 Symfonyモジュール   apps/frontend/modules/mypage/templates/_fever.php

```
<div id="feverSec" class="sec">
 <div class="fvMttl"> <h2 class="fvMttlTxt"> <img src="/images/sp/fever/fever_ttl.png" width="197" height="28" alt="ボーナスエリアに突入"> <span class="anm star st1"></span><span class="anm star st2"></span><span class="anm star st3"></span><span class="anm star st4"></span> <span class="anm bright br1"></span><span class="anm bright br2"></span><span class="anm bright br3"></span><span class="anm bright br4"></span><span class="anm bright br5"></span><span class="anm bright br6"></span><span class="anm bright br7"></span><span class="anm bright br8"></span> <!-- /.fvMttlTxt --></h2> <!-- /.fvMttl --></div>
 <script> $(function(){ kame.countdown(".feverCount", ".feverH", ".feverM", ".feverS" , "none"); }); </script> <dl class="feverCount param"> <dt>残り時間</dt> <dd> <strong class="feverH">59</strong>時間 <strong class="feverM">59</strong>分 <strong class="feverS">59</strong>秒 </dd> </dl>
 <div class="inner"> <ul class="alignC"> <li class="decoTxt melody">収穫個数が2倍</li> <li class="decoTxt melody">捕獲匹数が2倍</li> </ul> <ul class="attentionWord"> <li>※肥料と栄養剤の使用回数制限が解除されます。</li> <li>※使用した肥料・栄養剤の個数は減ります。</li> </ul> <!-- /.inner --></div>

<!-- /#feverSec --></div>
```
*/
#feverSec { background-color: #ff93a2; color: #fff; }
#feverSec a, #feverSec .bnrType01 .eventDetail, #feverSec .bnrType01 .eventDetail > span { color: #fff !important; }
#feverSec .fvMttl { position: relative; padding: 2px 0; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/fever/fever_bg.png') center 2px no-repeat #ff909f; -moz-background-size: 387px 36px; -o-background-size: 387px 36px; -webkit-background-size: 387px 36px; background-size: 387px 36px; border-bottom: 2px #d93b51 solid; text-align: center; }
#feverSec .fvMttl:before, #feverSec .fvMttl:after { content: ""; display: block; width: 100%; height: 2px; position: absolute; left: 0; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/fever/fever_ttl_line.png') left top no-repeat #ffed00; -moz-background-size: 147px 2px; -o-background-size: 147px 2px; -webkit-background-size: 147px 2px; background-size: 147px 2px; }
#feverSec .fvMttl:before { top: 0; background-position: 50% 0; }
#feverSec .fvMttl:after { bottom: 0; background-position: 41% 0; }
#feverSec .fvMttl .fvMttlTxt { position: relative; width: 320px; padding: 4px 0; margin: 0 auto; }
#feverSec .feverCount { padding: 5px 5px; background-color: #fe6177; text-align: center; font-size: 108%; }
#feverSec .feverCount strong { color: #fff600; }

.fvMttl .anm { display: block; position: absolute; z-index: 2; }
.fvMttl .anm.star { background-position: 0 -17px; width: 11px; height: 12px; }
.fvMttl .anm.st1 { top: 3px; left: 11px; -webkit-transform: scale(0.8, 0.8); -webkit-animation: fvStar 5s linear 0 infinite normal; }
.fvMttl .anm.st2 { top: 17px; left: 40px; -webkit-animation: fvStar 5s linear 0.5s infinite normal; }
.fvMttl .anm.st3 { top: 7px; right: 41px; -webkit-animation: fvStar 5s linear 1s infinite normal; }
.fvMttl .anm.st4 { top: 4px; right: 4px; -webkit-transform: scale(0.8, 0.8) rotateZ(44deg); -webkit-animation: fvStar 5s linear 0.3s infinite normal; }
.fvMttl .anm.bright { background-position: 0 0; width: 16px; height: 17px; }
.fvMttl .anm.br1 { top: 15px; left: 12px; -webkit-animation: fvBright 1s ease 0 infinite alternate; }
.fvMttl .anm.br2 { top: 4px; left: 27px; -webkit-animation: fvBright 1s ease 1s infinite alternate; }
.fvMttl .anm.br3 { top: 12px; left: 57px; -webkit-animation: fvBright 1s ease 2s infinite alternate; }
.fvMttl .anm.br4 { top: 0; left: 100px; -webkit-animation: fvBright 1s ease 3s infinite alternate; }
.fvMttl .anm.br5 { top: 16px; left: 155px; -webkit-animation: fvBright 1s ease 0 infinite alternate; }
.fvMttl .anm.br6 { top: 0; right: 98px; -webkit-animation: fvBright 1s ease 1s infinite alternate; }
.fvMttl .anm.br7 { top: 16px; right: 57px; -webkit-animation: fvBright 1s ease 2s infinite alternate; }
.fvMttl .anm.br8 { top: 12px; right: 6px; -webkit-animation: fvBright 1s ease 3s infinite alternate; }

@-webkit-keyframes fvStar { 0% { opacity: 1; }
  5% { opacity: 0; }
  10% { opacity: 1; } }
/* .memberAvatar
   メンバーアバター画像。<x-member-avatar> コンポーネントで使用。
   image_url が空のときは既定の絵 (緑のカメ / 200x200 の丸) を出すため、
   CSS でサイズを固定する。
   デフォルトは colSet01 / columnType01 レイアウトに合わせた 65x65 正方形。
   --lg: マイページ/他者ページ の大きいプロフィール (縦長)
   --sq: レイドランキング等の正方形アイコン (90x90)
   --sm: レイドトップ等の小さい正方形アイコン (33x33)
------------------------------------------------- */
.memberAvatar { display: block; width: 65px; height: 65px; object-fit: cover; }
/* 既定の絵 (丸いカメ) は切らずに全体を見せる */
.memberAvatar--default { object-fit: contain; }
.memberAvatar--lg { width: 120px; height: 160px; }
.memberAvatar--sq { width: 90px; height: 90px; }
.memberAvatar--sm { width: 33px; height: 33px; }

@-webkit-keyframes fvBright { 0% { opacity: 1; }
  100% { opacity: 0; } }