/* ■サイト定義
 ファイル   ： web/frontend/sp/scss/common.scss 適用範囲 ： サイト全体 概要    ： リセット、サイト定義、絵文字で構成。
*/
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
sass ulility file & base setting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.clearfix:after, .othersMenu .navList:after { content: ""; display: block; clear: both; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pages file
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ■[module]html要素初期化設定
 ファイル   ： web/frontend/sp/scss/_common/_reset.scss 適用範囲 ： サイト全体 概要    ： html要素初期化設定
*/
body, div, dl, dt, dd, ul, ol, menu, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, button { border: 0; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

ol, ul, menu { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6, big, small { font-size: 100%; font-weight: normal; }

select, input, textarea { font-size: 100%; }

/*b,strong{font-weight:bold;}*/
em { font-style: normal; }

a:link, a:visited, a:active { color: #008ebd; text-decoration: none; }

address, article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; margin: 0; padding: 0; }

img { border: 0; vertical-align: bottom; }

/* ■[module]structure
 ファイル   ： web/frontend/sp/scss/_common/_structure.scss 適用範囲 ： サイト全体 概要    ： html要素初期化設定
*/
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
DEFAULT SETTING
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html { -webkit-text-size-adjust: none; height: 100%; overflow-x: hidden; }

body { height: 100%; background: #fff; color: #783300; font-size: 15px; line-height: 1.5; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, Arial, Helvetica; overflow-x: hidden; max-width: 100vw; }

a:link, a:visited, a:hover, a:active { color: #00a1f3; text-decoration: underline; line-height: 1.2; }

input { vertical-align: middle; font-family: inherit; font-size: 100%; }

input[type=text], textarea { width: 100%; padding: 8px; border: 1px solid #aaa; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

textarea { display: block; }

input[type=radio], input[type=checkbox] { position: relative; top: -0.15em; margin-right: 0.4em; }

/* 高さは決め打ちにしない。padding を足した select (アイテムを使う・設定・
   リサイクル等) で中身より低くなり、文字が縦に切れるため。
   素の select が潰れないように下限だけ残す。 */
select { min-height: 1.9em; }

noscript p { margin: 5px; padding: 5px; border: 2px solid #f00; color: #f00; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
common, wrapper
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#wrap { position: relative; width: 100%; min-height: 100%; margin: 0 auto; overflow: hidden; word-wrap: break-word; word-break: break-all; }

#wrapInner { position: relative; }
#wrapInner.valid { padding-bottom: 0; }
#wrapInner.invalid { padding-bottom: 200px; }

/*define class - change from js
--------------------------------------- */
.invalid, .invalid * { -webkit-pointer-events: none; pointer-events: none; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; }

.valid, .valid * { -webkit-pointer-events: auto; pointer-events: auto; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Sprite extend
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.globalNav .navList > li > a:before, .globalNav .navList > li.shop.sale > a:after, .actionMenu .navList a:after, .pickupMenu .navList a:after, .actionMenu1 .navList a:after, .actionMenu .navList a .care_ico, .actionMenu .navList a .instal_ico, .othersMenu .navList a.top:after, #menu > .inner #menuClose:after, #careNav .tab .navList > li.care a:after, #careNav .tab .navList > li.care.active a:after, #careNav .tab .navList > li.instal a:after, #careNav .tab .navList > li.instal.active a:after { background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/structure-s68cccf910c.png') no-repeat; -moz-background-size: 94px 2496px; -o-background-size: 94px 2496px; -webkit-background-size: 94px 2496px; background-size: 94px 2496px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#header, #footer
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.globalNav .navList { display: table; table-layout: fixed; width: 100%; }
.globalNav .navList > li { display: table-cell; vertical-align: middle; }
.globalNav .navList { border-top: 2px solid #7da16e; border-bottom: 2px solid #57972d; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzlmZDM1YiIvPjxzdG9wIG9mZnNldD0iNzAlIiBzdG9wLWNvbG9yPSIjN2RiOTI5Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjODhiZTQyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9fd35b), color-stop(70%, #7db929), color-stop(100%, #88be42)); background: -moz-linear-gradient(#9fd35b, #7db929 70%, #88be42 100%); background: -webkit-linear-gradient(#9fd35b, #7db929 70%, #88be42 100%); background: linear-gradient(#9fd35b, #7db929 70%, #88be42 100%); }
.globalNav .navList > li { border-left: 1px solid #c3de9e; border-right: 1px solid #6aaf0c; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.globalNav .navList > li:first-child { border-left: none; }
.globalNav .navList > li:last-child { border-right: none; }
.globalNav .navList > li.top { width: 22%; }
.globalNav .navList > li.mypage { width: 22%; }
.globalNav .navList > li.mypage > a { letter-spacing: -0.1em; }
.globalNav .navList > li > a { position: relative; display: block; text-align: center; line-height: 1.2; position: relative; width: 100%; height: 40px; padding: 3px 0 7px; color: #fff; font-size: 12px; line-height: 1 !important; text-decoration: none !important; }
.globalNav .navList > li > a:before { content: ""; display: block; margin-left: auto; margin-right: auto; }
.globalNav .navList > li.top > a:before { background-position: 0 -199px; width: 64px; height: 29px; margin-top: 2px; }
.globalNav .navList > li.mypage > a:before { background-position: 0 -124px; width: 30px; height: 24px; margin-top: 2px; margin-bottom: 5px; }
.globalNav .navList > li.info > a:before { background-position: 0 -59px; width: 24px; height: 17px; margin-top: 7px; }
.globalNav .navList > li.info .ct { position: relative; left: 15px; display: block; width: 1.8em; background-color: #ff4c7c; border: 1px #ffd7e2 solid; margin: -22px auto 13px; padding: 1px 0; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.globalNav .navList > li.info .ct.hide { background-color: transparent; border-color: transparent; color: transparent; }
.globalNav .navList > li.quest > a:before { background-position: 0 -148px; width: 38px; height: 25px; margin-top: 2px; margin-bottom: 4px; }
.globalNav .navList > li.shop > a:before { background-position: 0 -173px; width: 25px; height: 26px; margin-top: 2px; margin-bottom: 3px; }
.globalNav .navList > li.shop.sale > a { padding-top: 0; }
.globalNav .navList > li.shop.sale > a:before { background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/structure/gnav_shop_anim.gif'); -moz-background-size: 51px 34px; -o-background-size: 51px 34px; -webkit-background-size: 51px 34px; background-size: 51px 34px; width: 51px; height: 34px; margin-top: 0; margin-bottom: -1px; }
.globalNav .navList > li.shop.sale > a:after { position: absolute; top: 0; right: 0; content: ""; background-position: 0 -228px; width: 21px; height: 22px; width: 21px; height: 22px; -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; }
.globalNav .navList > li.gacha > a:before { background-position: 0 -38px; width: 20px; height: 21px; margin-top: 3px; margin-bottom: 7px; }
.globalNav .navList > li.item > a:before { background-position: 0 -76px; width: 32px; height: 27px; margin-top: 1px; margin-bottom: 3px; }
.globalNav .navList > li.menu > a:before, .globalNav .navList > li.menu > button:before { background-position: 0 -103px; width: 24px; height: 21px; margin-top: 4px; margin-bottom: 6px; }
/* メニューボタン: アンカーと同等のスタイルを適用 */
.globalNav .navList > li > button { position: relative; display: block; text-align: center; line-height: 1.2; width: 100%; height: 40px; padding: 3px 0 7px; color: #fff; font-size: 12px; line-height: 1 !important; text-decoration: none !important; background: none; border: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.globalNav .navList > li > button:before { content: ""; display: block; margin-left: auto; margin-right: auto; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/structure-s68cccf910c.png') no-repeat; -moz-background-size: 94px 2496px; -o-background-size: 94px 2496px; -webkit-background-size: 94px 2496px; background-size: 94px 2496px; }

#copyright { padding: 10px 0 20px; border-top: 2px solid #57972d; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzljZDY0YyIvPjxzdG9wIG9mZnNldD0iODklIiBzdG9wLWNvbG9yPSIjNzViMjIwIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9cd64c), color-stop(89%, #75b220)); background: -moz-linear-gradient(#9cd64c, #75b220 89%); background: -webkit-linear-gradient(#9cd64c, #75b220 89%); background: linear-gradient(#9cd64c, #75b220 89%); color: #fff; text-align: center; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
.actionMenu, .pickupMenu, .othersMenu, .othersMenu02
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.actionMenu, .pickupMenu, .othersMenu, .actionMenu1 { position: relative; margin: 10px 5px; }
.actionMenu .navList, .pickupMenu .navList, .othersMenu .navList, .actionMenu1 .navList { margin-bottom: 5px; }
.actionMenu .navList > li, .pickupMenu .navList > li, .othersMenu .navList > li, .actionMenu1 .navList > li { padding-bottom: 4px; }
.actionMenu .navList + .navList, .pickupMenu .navList + .navList, .othersMenu .navList + .navList, .actionMenu1 .navList + .navList { margin-top: 10px; }

.actionMenu .navList a, .pickupMenu .navList a, .othersMenu .navList a, .actionMenu1 .navList a { position: relative; display: block; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; line-height: inherit; text-decoration: none; }
.actionMenu .navList a:before, .pickupMenu .navList a:before, .othersMenu .navList a:before, .actionMenu1 .navList a:before { content: ""; display: block; position: relative; }

.actionMenu .navList > li, .pickupMenu .navList > li, .actionMenu1 .navList > li { line-height: 1; }
.actionMenu .navList a, .pickupMenu .navList a, .actionMenu1 .navList a { color: transparent; font-size: 1px; }
.actionMenu .navList a:after, .pickupMenu .navList a:after, .actionMenu1 .navList a:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; }

.actionMenu .navList { display: table; table-layout: fixed; width: 100%; }
.actionMenu .navList > li { display: table-cell; vertical-align: top; }
.actionMenu .navList > li { position: relative; }
.actionMenu .navList > li:first-child > a { -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px; border-radius: 6px 0 0 6px; border-left: 2px #ff7e92 solid; }
.actionMenu .navList > li:last-child > a { -moz-border-radius: 0 6px 6px 0; -webkit-border-radius: 0; border-radius: 0 6px 6px 0; border-right: 2px #ff7e92 solid; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmODI5ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNTY3YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff829e), color-stop(100%, #ff567c)); background-image: -moz-linear-gradient(#ff829e, #ff567c); background-image: -webkit-linear-gradient(#ff829e, #ff567c); background-image: linear-gradient(#ff829e, #ff567c); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; background-position: left top; background-repeat: repeat; }
.actionMenu .navList > li:only-child > a { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border-left: 2px #ff7e92 solid; border-right: 2px #ff7e92 solid; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmODI5ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNTY3YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff829e), color-stop(100%, #ff567c)); background-image: -moz-linear-gradient(#ff829e, #ff567c); background-image: -webkit-linear-gradient(#ff829e, #ff567c); background-image: linear-gradient(#ff829e, #ff567c); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; background-position: left top; background-repeat: repeat; }
.actionMenu .navList a { height: 52px; border-top: 2px #ff7e92 solid; border-bottom: 2px #ff7e92 solid; background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line_actionmenu.png?1427080066'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmODI5ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNTY3YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line_actionmenu.png?1427080066'), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff829e), color-stop(100%, #ff567c)); background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line_actionmenu.png?1427080066'), -moz-linear-gradient(#ff829e, #ff567c); background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line_actionmenu.png?1427080066'), -webkit-linear-gradient(#ff829e, #ff567c); background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line_actionmenu.png?1427080066'), linear-gradient(#ff829e, #ff567c); -moz-background-size: 3px 11px, 100% 100%; -o-background-size: 3px 11px, 100% 100%; -webkit-background-size: 3px 11px, 100% 100%; background-size: 3px 11px, 100% 100%; background-position: right 1px, left top; background-repeat: repeat-y, repeat; -moz-box-shadow: 0 4px 1px #c11e40; -webkit-box-shadow: 0 4px 1px #c11e40; box-shadow: 0 4px 1px #c11e40; }
.actionMenu .navList a:before { height: 16px; top: 3px; margin: 0 6px; background-color: #ff9fb5; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.actionMenu .navList a.care:after { width: 36px; height: 52px; margin-top: -26px; margin-left: -18px; background-position: 0 -426px; }
.actionMenu .navList a .care_ico { content: ""; display: block; position: absolute; top: 5px; left: 10px; width: 20px; height: 20px; width: 21px; height: 22px; margin-top: -11px; margin-left: -11px; background-position: 0 -250px; }
.actionMenu .navList a.instal:after { width: 25px; height: 52px; margin-top: -26px; margin-left: -13px; background-position: 0 -1356px; }
.actionMenu .navList a .instal_ico { content: ""; display: block; position: absolute; top: 5px; left: 15px; width: 20px; height: 20px; width: 21px; height: 22px; margin-top: -11px; margin-left: -11px; background-position: 0 -228px; }
.actionMenu .navList a.pick:after { width: 42px; height: 52px; margin-top: -26px; margin-left: -21px; background-position: 0 -1722px; }
.actionMenu .navList a.quest:after { width: 44px; height: 52px; margin-top: -26px; margin-left: -22px; background-position: 0 -1850px; }
.actionMenu .navList a.off { border-color: #cdcdcd !important; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NmY2ZjZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IzYjNiMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') !important; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cfcfcf), color-stop(100%, #b3b3b3)) !important; background: -moz-linear-gradient(#cfcfcf, #b3b3b3) !important; background: -webkit-linear-gradient(#cfcfcf, #b3b3b3) !important; background: linear-gradient(#cfcfcf, #b3b3b3) !important; -moz-box-shadow: 0 4px 1px #8a8a8a !important; -webkit-box-shadow: 0 4px 1px #8a8a8a !important; box-shadow: 0 4px 1px #8a8a8a !important; color: #4e4e4e; }
.actionMenu .navList a.off:before { background-color: #cfcfcf !important; }

.pickupMenu .navList { display: table; table-layout: fixed; width: 100%; }
.pickupMenu .navList > li { display: table-cell; vertical-align: top; }
.pickupMenu .navList > li:first-child > a { -moz-border-radius: 16px 0 0 16px; -webkit-border-radius: 16px; border-radius: 16px 0 0 16px; border-left: 2px #bee42d solid; }
.pickupMenu .navList > li:last-child > a { -moz-border-radius: 0 16px 16px 0; -webkit-border-radius: 0; border-radius: 0 16px 16px 0; border-right: 2px #bee42d solid; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0ZGYwNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc4YzkwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b4df07), color-stop(100%, #78c900)); background-image: -moz-linear-gradient(#b4df07, #78c900); background-image: -webkit-linear-gradient(#b4df07, #78c900); background-image: linear-gradient(#b4df07, #78c900); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; background-position: left top; background-repeat: repeat; }
.pickupMenu .navList > li:only-child > a { -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; border-left: 2px #bee42d solid; border-right: 2px #bee42d solid; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0ZGYwNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc4YzkwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b4df07), color-stop(100%, #78c900)); background-image: -moz-linear-gradient(#b4df07, #78c900); background-image: -webkit-linear-gradient(#b4df07, #78c900); background-image: linear-gradient(#b4df07, #78c900); -moz-background-size: 100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; background-position: left top; background-repeat: repeat; }
.pickupMenu .navList a { height: 34px; border-top: 2px #bee42d solid; border-bottom: 2px #bee42d solid; background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line_actionmenu2.png?1427080066'), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0ZGYwNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc4YzkwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line_actionmenu2.png?1427080066'), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b4df07), color-stop(100%, #78c900)); background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line_actionmenu2.png?1427080066'), -moz-linear-gradient(#b4df07, #78c900); background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line_actionmenu2.png?1427080066'), -webkit-linear-gradient(#b4df07, #78c900); background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line_actionmenu2.png?1427080066'), linear-gradient(#b4df07, #78c900); -moz-background-size: 3px 11px, 100% 100%; -o-background-size: 3px 11px, 100% 100%; -webkit-background-size: 3px 11px, 100% 100%; background-size: 3px 11px, 100% 100%; background-position: right 1px, left top; background-repeat: repeat-y, repeat; -moz-box-shadow: 0 4px 1px #6b8600; -webkit-box-shadow: 0 4px 1px #6b8600; box-shadow: 0 4px 1px #6b8600; }
.pickupMenu .navList a:before { height: 11px; top: 2px; margin: 0 10%; background-color: #b4e14c; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
.pickupMenu .navList a.status:after { width: 37px; height: 20px; margin-top: -10px; margin-left: -19px; background-position: 0 -2476px; }
.pickupMenu .navList a.heal:after { width: 36px; height: 20px; margin-top: -10px; margin-left: -18px; background-position: 0 -2369px; }
.pickupMenu .navList a.set:after { width: 37px; height: 19px; margin-top: -10px; margin-left: -19px; background-position: 0 -2457px; }
.pickupMenu .navList a.pick:after { width: 61px; height: 20px; margin-top: -10px; margin-left: -31px; background-position: 0 -2409px; }
.pickupMenu .navList a.quest:after { width: 94px; height: 28px; margin-top: -14px; margin-left: -47px; background-position: 0 -2429px; }
.pickupMenu .navList.type2 > li:first-child > a { border-left-color: #ffd152; }
.pickupMenu .navList.type2 > li:last-child > a { border-right-color: #ffd152; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2QzNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmOGQwMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffcd35), color-stop(100%, #ff8d02)); background-image: -moz-linear-gradient(#ffcd35, #ff8d02); background-image: -webkit-linear-gradient(#ffcd35, #ff8d02); background-image: linear-gradient(#ffcd35, #ff8d02); }
.pickupMenu .navList.type2 > li:only-child > a { border-left-color: #ffd152; border-right-color: #ffd152; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2QzNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmOGQwMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffcd35), color-stop(100%, #ff8d02)); background-image: -moz-linear-gradient(#ffcd35, #ff8d02); background-image: -webkit-linear-gradient(#ffcd35, #ff8d02); background-image: linear-gradient(#ffcd35, #ff8d02); }
.pickupMenu .navList.type2 a { border-top-color: #ffd152; border-bottom-color: #ffd152; -moz-box-shadow: 0 4px 1px #b66e00; -webkit-box-shadow: 0 4px 1px #b66e00; box-shadow: 0 4px 1px #b66e00; }
.pickupMenu .navList.type2 a:before { height: 11px; top: 2px; margin: 0 10%; background-color: #ffca4d; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }

.othersMenu .navList > li { float: left; width: 49%; margin: 0 2% 5px 0; }
.othersMenu .navList > li:nth-child(2n) { margin-right: 0; }
.othersMenu .navList > li { line-height: 1.2; margin-bottom: 10px; }
.othersMenu .navList.menuType02 > li:last-child { float: none; width: 100%; margin-right: 0; }
.othersMenu .navList a { height: 32px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 2px #fed143 solid; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2Y1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3OWYxOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffcf52), color-stop(100%, #f79f18)); background: -moz-linear-gradient(#ffcf52, #f79f18); background: -webkit-linear-gradient(#ffcf52, #f79f18); background: linear-gradient(#ffcf52, #f79f18); -moz-box-shadow: 0 4px 1px #c67800; -webkit-box-shadow: 0 4px 1px #c67800; box-shadow: 0 4px 1px #c67800; color: #783300; }
.othersMenu .navList a:before { height: 10px; top: 2px; margin: 0 6px; background-color: #ffd746; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: -0.35em; }
.othersMenu .navList a.top { height: 37px; border-color: #fe9832; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmOGMzNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y3NmMwMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff8c34), color-stop(100%, #f76c02)); background: -moz-linear-gradient(#ff8c34, #f76c02); background: -webkit-linear-gradient(#ff8c34, #f76c02); background: linear-gradient(#ff8c34, #f76c02); -moz-box-shadow: 0 4px 1px #924d00; -webkit-box-shadow: 0 4px 1px #924d00; box-shadow: 0 4px 1px #924d00; color: transparent; font-size: 1px; line-height: 1; }
.othersMenu .navList a.top:after { content: ""; position: absolute; top: 50%; left: 50%; width: 76px; height: 17px; margin-top: -9px; margin-left: -38px; background-position: 0 -2226px; }
.othersMenu .navList a.top:before { background-color: #ff9f36; }
.othersMenu .navList a.off { border-color: #cdcdcd !important; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NmY2ZjZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IzYjNiMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') !important; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cfcfcf), color-stop(100%, #b3b3b3)) !important; background: -moz-linear-gradient(#cfcfcf, #b3b3b3) !important; background: -webkit-linear-gradient(#cfcfcf, #b3b3b3) !important; background: linear-gradient(#cfcfcf, #b3b3b3) !important; -moz-box-shadow: 0 4px 1px #8a8a8a !important; -webkit-box-shadow: 0 4px 1px #8a8a8a !important; box-shadow: 0 4px 1px #8a8a8a !important; color: #4e4e4e; }
.othersMenu .navList a.off:before { background-color: #cfcfcf !important; }
.othersMenu .navList a > span { position: relative; z-index: 2; }
.othersMenu + .othersMenu { margin-top: -10px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#menu
━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#menu { display: none; /* JS control */ position: absolute; width: 100%; top: auto; left: 0; z-index: 500; background-color: #454545; padding-bottom: 40px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#menu > .inner { position: relative; margin: 0; padding: 1px 0 23px; border: 2px #cb934b solid; background-color: #ffec82; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
#menu > .inner:after, #menu > .inner:before { content: " "; display: block; height: 0; width: 0; border: solid transparent; position: absolute; bottom: 100%; }
#menu > .inner:before { border-color: rgba(203, 147, 75, 0); border-bottom-color: #cb934b; border-width: 11px; right: 15px; }
#menu > .inner:after { border-color: rgba(255, 236, 130, 0); border-bottom-color: #ffec82; border-width: 8px; right: 18px; }
#menu > .inner > *:first-child { margin-top: 9px; }
#menu > .inner #menuClose { position: absolute; bottom: -19px; left: 50%; display: block; width: 38px; height: 38px; margin-left: -19px; margin-top: 0; font-size: 1px !important; color: transparent !important; text-decoration: none !important; }
#menu > .inner #menuClose:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 38px; height: 38px; background-position: 0 0; }

#careWindow .tabIn { padding: 5px 5px 0 5px; }
#careWindow .tabIn .tabHead { padding: 0 5px 12px 5px; background-image: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/bg/line01.png'); background-repeat: repeat-x; background-position: center bottom; -webkit-background-size: 5px 3px; -moz-background-size: 5px 3px; -o-background-size: 5px 3px; background-size: 5px 3px; }
#careWindow .tabIn .tabHead .message { padding: 5px 10px; background-color: #fbf4d7; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; border-radius: 6px 6px 6px 6px; -webkit-box-shadow: inset 0 1px #e5daad; -moz-box-shadow: inset 0 1px #e5daad; box-shadow: inset 0 1px #e5daad; }
#careWindow .tabIn .tabHead .message span { color: #ff005a; }
#careWindow .tabIn .tabHead .installation { text-align: right; }
#careWindow .tabIn .tabHead .installation span { padding: 5px 10px; background-color: #fbf4d7; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; border-radius: 6px 6px 6px 6px; -webkit-box-shadow: inset 0 1px #e5daad; -moz-box-shadow: inset 0 1px #e5daad; box-shadow: inset 0 1px #e5daad; font-size: 14px; }
#careWindow .tabIn .tabHead .installation span em { color: #ff005a; }
#careWindow .tabIn .tabInner { padding: 5px 5px 0 5px; }

/*お世話・設置モーダル
--------------------------------------- */
#care .navList { padding-bottom: 48px; }

#careNav .tab { -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px; border-radius: 5px 5px 0 0; background-color: #9d6f34; }
#careNav .tab .navList { display: table; table-layout: fixed; width: 100%; }
#careNav .tab .navList > li { display: table-cell; vertical-align: bottom; }
#careNav .tab:after { position: relative; content: ""; display: block; width: 100%; height: 2px; margin-bottom: 10px; background-color: #ffffff; }
#careNav .tab .navList { position: relative; top: 2px; padding: 5px 5px 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#careNav .tab .navList > li { text-align: center; line-height: 1.2; }
#careNav .tab .navList > li.care a { display: block; position: relative; text-indent: -9999px; }
#careNav .tab .navList > li.care a:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 34px; height: 12px; margin-top: -6px; margin-left: -17px; background-position: 0 -2331px; }
#careNav .tab .navList > li.care.active a:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 42px; height: 14px; margin-top: -7px; margin-left: -21px; background-position: 0 -2317px; }
#careNav .tab .navList > li.instal a { display: block; position: relative; text-indent: -9999px; }
#careNav .tab .navList > li.instal a:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 24px; height: 12px; margin-top: -6px; margin-left: -12px; background-position: 0 -2357px; }
#careNav .tab .navList > li.instal.active a:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 28px; height: 14px; margin-top: -7px; margin-left: -14px; background-position: 0 -2343px; }
#careNav .tab .navList > li > a { display: block; width: 98%; padding: 6px 0; margin-left: auto; margin-right: auto; background-color: #ddbf98; border-top: 2px solid #ddbf98; border-left: 2px solid #ddbf98; border-right: 2px solid #ddbf98; -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: #783300; }
#careNav .tab .navList > li.active { position: relative; z-index: 5; }
#careNav .tab .navList > li.active > a { padding: 10px 0; background-color: #fff !important; border-color: #ffffff; }
#careNav .tab .navList > li.off > a { background-color: #ddd !important; border-color: #ccc !important; color: #999 !important; }

.actionMenu1 .navList { display: table; table-layout: fixed; width: 100%; }
.actionMenu1 .navList > li { display: table-cell; vertical-align: top; }
.actionMenu1 .navList > li { float: left; margin: 0 5px 5px 0; width: 23%; }
.actionMenu1 .navList > li:nth-child(4n) { margin-right: 0; }
.actionMenu1 .navList.list2 { margin-bottom: -10px !important; }
.actionMenu1 .navList.list2 > li { float: left; margin: 0 5px 5px 0; width: 32%; }
.actionMenu1 .navList.list2 > li:nth-child(3n) { margin-right: 0; }
.actionMenu1 .navList a { height: 48px; border-top: 2px #faea79 solid; border-bottom: 2px #faea79 solid; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjA1MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YzY2ExOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff051), color-stop(100%, #f3ca18)); background-image: -moz-linear-gradient(#fff051, #f3ca18); background-image: -webkit-linear-gradient(#fff051, #f3ca18); background-image: linear-gradient(#fff051, #f3ca18); -moz-box-shadow: 0 4px 1px #c6a300; -webkit-box-shadow: 0 4px 1px #c6a300; box-shadow: 0 4px 1px #c6a300; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px; border-radius: 5px 5px 5px 5px; }
.actionMenu1 .navList a.off { border-color: #e5e5e5 !important; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U3ZTdlNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2QxZDFkMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==') !important; background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e7e7e7), color-stop(100%, #d1d1d1)) !important; background-image: -moz-linear-gradient(#e7e7e7, #d1d1d1) !important; background-image: -webkit-linear-gradient(#e7e7e7, #d1d1d1) !important; background-image: linear-gradient(#e7e7e7, #d1d1d1) !important; -moz-box-shadow: 0 4px 1px #b2b2b2 !important; -webkit-box-shadow: 0 4px 1px #b2b2b2 !important; box-shadow: 0 4px 1px #b2b2b2 !important; }
.actionMenu1 .navList a.fertilizer:after { width: 26px; height: 36px; margin-top: -18px; margin-left: -13px; background-position: 0 -1034px; }
.actionMenu1 .navList a.off.fertilizer:after { background-position: 0 -1070px; }
.actionMenu1 .navList a.capture:after { width: 30px; height: 36px; margin-top: -18px; margin-left: -15px; background-position: 0 -272px; }
.actionMenu1 .navList a.off.capture:after { background-position: 0 -390px; }
.actionMenu1 .navList a.colon:after { width: 37px; height: 38px; margin-top: -19px; margin-left: -19px; background-position: 0 -478px; }
.actionMenu1 .navList a.off.colon:after { background-position: 0 -516px; }
.actionMenu1 .navList a.synthesis:after { width: 25px; height: 38px; margin-top: -19px; margin-left: -13px; background-position: 0 -2150px; }
.actionMenu1 .navList a.off.synthesis:after { background-position: 0 -2188px; }
.actionMenu1 .navList a.seed:after { width: 34px; height: 36px; margin-top: -18px; margin-left: -17px; background-position: 0 -1902px; }
.actionMenu1 .navList a.off.seed:after { background-position: 0 -2026px; }
.actionMenu1 .navList a.water:after { width: 34px; height: 37px; margin-top: -19px; margin-left: -17px; background-position: 0 -2243px; }
.actionMenu1 .navList a.off.water:after { background-position: 0 -2280px; }
.actionMenu1 .navList a.harvest:after { width: 25px; height: 38px; margin-top: -19px; margin-left: -13px; background-position: 0 -1194px; }
.actionMenu1 .navList a.off.harvest:after { background-position: 0 -1318px; }
.actionMenu1 .navList a.plow:after { width: 33px; height: 38px; margin-top: -19px; margin-left: -17px; background-position: 0 -1774px; }
.actionMenu1 .navList a.off.plow:after { background-position: 0 -1812px; }
.actionMenu1 .navList a.deco_instal:after { width: 49px; height: 40px; margin-top: -20px; margin-left: -25px; background-position: 0 -554px; }
.actionMenu1 .navList a.off.deco_instal:after { background-position: 0 -594px; }
.actionMenu1 .navList a.deco_move:after { width: 49px; height: 40px; margin-top: -20px; margin-left: -25px; background-position: 0 -634px; }
.actionMenu1 .navList a.off.deco_move:after { background-position: 0 -674px; }
.actionMenu1 .navList a.deco_put:after { width: 56px; height: 40px; margin-top: -20px; margin-left: -28px; background-position: 0 -714px; }
.actionMenu1 .navList a.off.deco_put:after { background-position: 0 -754px; }
.actionMenu1 .navList a.farm_instal:after { width: 50px; height: 40px; margin-top: -20px; margin-left: -25px; background-position: 0 -794px; }
.actionMenu1 .navList a.off.farm_instal:after { background-position: 0 -834px; }
.actionMenu1 .navList a.farm_move:after { width: 50px; height: 40px; margin-top: -20px; margin-left: -25px; background-position: 0 -874px; }
.actionMenu1 .navList a.off.farm_move:after { background-position: 0 -914px; }
.actionMenu1 .navList a.farm_put:after { width: 57px; height: 40px; margin-top: -20px; margin-left: -29px; background-position: 0 -954px; }
.actionMenu1 .navList a.off.farm_put:after { background-position: 0 -994px; }
.actionMenu1 .navList a.make_instal:after { width: 58px; height: 40px; margin-top: -20px; margin-left: -29px; background-position: 0 -1564px; }
.actionMenu1 .navList a.off.make_instal:after { background-position: 0 -1604px; }
.actionMenu1 .navList a.make_put:after { width: 57px; height: 39px; margin-top: -20px; margin-left: -29px; background-position: 0 -1644px; }
.actionMenu1 .navList a.off.make_put:after { background-position: 0 -1683px; }
.actionMenu1 .navList a.location_move:after { width: 50px; height: 39px; margin-top: -20px; margin-left: -25px; background-position: 0 -1486px; }
.actionMenu1 .navList a.off.location_move:after { background-position: 0 -1525px; }
.actionMenu1 .navList a.location_back:after { width: 49px; height: 39px; margin-top: -20px; margin-left: -25px; background-position: 0 -1408px; }
.actionMenu1 .navList a.off.location_back:after { background-position: 0 -1447px; }

/* ■[module]絵文字
 ファイル ： web/frontend/scss/sp/_modules/_emoji.scss 概要 ： 絵文字モジュール
*/
/* #.emoji
 絵文字モジュール
 PHPテンプレートに`((i:xxxx))`という記述をすると、helperが変換を行って `<span class="emoji xxxx"></span>`という形でHTML展開されます。
 絵文字指定はFP版互換。（ですが、SPの場合は意図した画像がでない場合があります。）   絵文字は、i絵文字から秀丸のマクロ機能で変換します。(FP版同様)

```
<ul>
<li><span class="emoji f89f"></span></li>
<li><span class="emoji f8a0"></span></li>
<li><span class="emoji f8a1"></span></li>
</ul>
```
*/
.emoji { position: relative; top: -2px; display: inline-block; width: 15px; height: 15px; vertical-align: middle; background: url('https://assets.prd.kamefarm.sonicmoov.com/images/sp/common/icon_emoji.png?1414060171') no-repeat; }

.emoji.f89f { background-position: 0 0; }

.emoji.f8a0 { background-position: -15px 0; }

.emoji.f8a1 { background-position: -30px 0; }

.emoji.f8a2 { background-position: -45px 0; }

.emoji.f8a3 { background-position: -60px 0; }

.emoji.f8a4 { background-position: -75px 0; }

.emoji.f8a5 { background-position: -90px 0; }

.emoji.f8a6 { background-position: -105px 0; }

.emoji.f8a7 { background-position: -120px 0; }

.emoji.f8a8 { background-position: -135px 0; }

.emoji.f8a9 { background-position: -150px 0; }

.emoji.f8aa { background-position: -165px 0; }

.emoji.f8ab { background-position: -180px 0; }

.emoji.f8ac { background-position: -195px 0; }

.emoji.f8ad { background-position: -210px 0; }

.emoji.f8ae { background-position: -225px 0; }

.emoji.f8af { background-position: 0 -15px; }

.emoji.f8b0 { background-position: -15px -15px; }

.emoji.f8b1 { background-position: -30px -15px; }

.emoji.f8b2 { background-position: -45px -15px; }

.emoji.f8b3 { background-position: -60px -15px; }

.emoji.f8b4 { background-position: -75px -15px; }

.emoji.f8b5 { background-position: -90px -15px; }

.emoji.f8b6 { background-position: -105px -15px; }

.emoji.f8b7 { background-position: -120px -15px; }

.emoji.f8b8 { background-position: -135px -15px; }

.emoji.f8b9 { background-position: -150px -15px; }

.emoji.f8ba { background-position: -165px -15px; }

.emoji.f8bb { background-position: -180px -15px; }

.emoji.f8bc { background-position: -195px -15px; }

.emoji.f8bd { background-position: -210px -15px; }

.emoji.f8be { background-position: -225px -15px; }

.emoji.f8bf { background-position: 0 -30px; }

.emoji.f8c0 { background-position: -15px -30px; }

.emoji.f8c1 { background-position: -30px -30px; }

.emoji.f8c2 { background-position: -45px -30px; }

.emoji.f8c3 { background-position: -60px -30px; }

.emoji.f8c4 { background-position: -75px -30px; }

.emoji.f8c5 { background-position: -90px -30px; }

.emoji.f8c6 { background-position: -105px -30px; }

.emoji.f8c7 { background-position: -120px -30px; }

.emoji.f8c8 { background-position: -135px -30px; }

.emoji.f8c9 { background-position: -150px -30px; }

.emoji.f8ca { background-position: -165px -30px; }

.emoji.f8cb { background-position: -180px -30px; }

.emoji.f8cc { background-position: -195px -30px; }

.emoji.f8cd { background-position: -210px -30px; }

.emoji.f8ce { background-position: -225px -30px; }

.emoji.f8cf { background-position: 0 -45px; }

.emoji.f8d0 { background-position: -15px -45px; }

.emoji.f8d1 { background-position: -30px -45px; }

.emoji.f8d2 { background-position: -45px -45px; }

.emoji.f8d3 { background-position: -60px -45px; }

.emoji.f8d4 { background-position: -75px -45px; }

.emoji.f8d5 { background-position: -90px -45px; }

.emoji.f8d6 { background-position: -105px -45px; }

.emoji.f8d7 { background-position: -120px -45px; }

.emoji.f8d8 { background-position: -135px -45px; }

.emoji.f8d9 { background-position: -150px -45px; }

.emoji.f8da { background-position: -165px -45px; }

.emoji.f8db { background-position: -180px -45px; }

.emoji.f8dc { background-position: -195px -45px; }

.emoji.f8dd { background-position: -210px -45px; }

.emoji.f8de { background-position: -225px -45px; }

.emoji.f8df { background-position: 0 -60px; }

.emoji.f8e0 { background-position: -15px -60px; }

.emoji.f8e1 { background-position: -30px -60px; }

.emoji.f8e2 { background-position: -45px -60px; }

.emoji.f8e3 { background-position: -60px -60px; }

.emoji.f8e4 { background-position: -75px -60px; }

.emoji.f8e5 { background-position: -90px -60px; }

.emoji.f8e6 { background-position: -105px -60px; }

.emoji.f8e7 { background-position: -120px -60px; }

.emoji.f8e8 { background-position: -135px -60px; }

.emoji.f8e9 { background-position: -150px -60px; }

.emoji.f8ea { background-position: -165px -60px; }

.emoji.f8eb { background-position: -180px -60px; }

.emoji.f8ec { background-position: -195px -60px; }

.emoji.f8ed { background-position: -210px -60px; }

.emoji.f8ee { background-position: -225px -60px; }

.emoji.f8ef { background-position: 0 -75px; }

.emoji.f8f0 { background-position: -15px -75px; }

.emoji.f8f1 { background-position: -30px -75px; }

.emoji.f8f2 { background-position: -45px -75px; }

.emoji.f8f3 { background-position: -60px -75px; }

.emoji.f8f4 { background-position: -75px -75px; }

.emoji.f8f5 { background-position: -90px -75px; }

.emoji.f8f6 { background-position: -105px -75px; }

.emoji.f8f7 { background-position: -120px -75px; }

.emoji.f8f8 { background-position: -135px -75px; }

.emoji.f8f9 { background-position: -150px -75px; }

.emoji.f8fa { background-position: -165px -75px; }

.emoji.f8fb { background-position: -180px -75px; }

.emoji.f8fc { background-position: -195px -75px; }

.emoji.f940 { background-position: -210px -75px; }

.emoji.f941 { background-position: -225px -75px; }

.emoji.f942 { background-position: 0 -90px; }

.emoji.f943 { background-position: -15px -90px; }

.emoji.f944 { background-position: -30px -90px; }

.emoji.f945 { background-position: -45px -90px; }

.emoji.f946 { background-position: -60px -90px; }

.emoji.f947 { background-position: -75px -90px; }

.emoji.f948 { background-position: -90px -90px; }

.emoji.f949 { background-position: -105px -90px; }

.emoji.f972 { background-position: -120px -90px; }

.emoji.f973 { background-position: -135px -90px; }

.emoji.f974 { background-position: -150px -90px; }

.emoji.f975 { background-position: -165px -90px; }

.emoji.f976 { background-position: -180px -90px; }

.emoji.f977 { background-position: -195px -90px; }

.emoji.f978 { background-position: -210px -90px; }

.emoji.f979 { background-position: -225px -90px; }

.emoji.f97a { background-position: 0 -105px; }

.emoji.f97b { background-position: -15px -105px; }

.emoji.f97c { background-position: -30px -105px; }

.emoji.f97d { background-position: -45px -105px; }

.emoji.f97e { background-position: -60px -105px; }

.emoji.f980 { background-position: -75px -105px; }

.emoji.f981 { background-position: -90px -105px; }

.emoji.f982 { background-position: -105px -105px; }

.emoji.f983 { background-position: -120px -105px; }

.emoji.f984 { background-position: -135px -105px; }

.emoji.f985 { background-position: -150px -105px; }

.emoji.f986 { background-position: -165px -105px; }

.emoji.f987 { background-position: -180px -105px; }

.emoji.f988 { background-position: -195px -105px; }

.emoji.f989 { background-position: -210px -105px; }

.emoji.f98a { background-position: -225px -105px; }

.emoji.f98b { background-position: 0 -120px; }

.emoji.f98c { background-position: -15px -120px; }

.emoji.f98d { background-position: -30px -120px; }

.emoji.f98e { background-position: -45px -120px; }

.emoji.f98f { background-position: -60px -120px; }

.emoji.f990 { background-position: -75px -120px; }

.emoji.f9b0 { background-position: -90px -120px; }

.emoji.f991 { background-position: -105px -120px; }

.emoji.f992 { background-position: -120px -120px; }

.emoji.f993 { background-position: -135px -120px; }

.emoji.f994 { background-position: -150px -120px; }

.emoji.f995 { background-position: -165px -120px; }

.emoji.f996 { background-position: -180px -120px; }

.emoji.f997 { background-position: -195px -120px; }

.emoji.f998 { background-position: -210px -120px; }

.emoji.f999 { background-position: -225px -120px; }

.emoji.f99a { background-position: 0 -135px; }

.emoji.f99b { background-position: -15px -135px; }

.emoji.f99c { background-position: -30px -135px; }

.emoji.f99d { background-position: -45px -135px; }

.emoji.f99e { background-position: -60px -135px; }

.emoji.f99f { background-position: -75px -135px; }

.emoji.f9a0 { background-position: -90px -135px; }

.emoji.f9a1 { background-position: -105px -135px; }

.emoji.f9a2 { background-position: -120px -135px; }

.emoji.f9a3 { background-position: -135px -135px; }

.emoji.f9a4 { background-position: -150px -135px; }

.emoji.f9a5 { background-position: -165px -135px; }

.emoji.f9a6 { background-position: -180px -135px; }

.emoji.f9a7 { background-position: -195px -135px; }

.emoji.f9a8 { background-position: -210px -135px; }

.emoji.f9a9 { background-position: -225px -135px; }

.emoji.f9aa { background-position: 0 -150px; }

.emoji.f9ab { background-position: -15px -150px; }

.emoji.f9ac { background-position: -30px -150px; }

.emoji.f9ad { background-position: -45px -150px; }

.emoji.f9ae { background-position: -60px -150px; }

.emoji.f9af { background-position: -75px -150px; }

.emoji.f950 { background-position: -90px -150px; }

.emoji.f951 { background-position: -105px -150px; }

.emoji.f952 { background-position: -120px -150px; }

.emoji.f955 { background-position: -135px -150px; }

.emoji.f956 { background-position: -150px -150px; }

.emoji.f957 { background-position: -165px -150px; }

.emoji.f95b { background-position: -180px -150px; }

.emoji.f95c { background-position: -195px -150px; }

.emoji.f95d { background-position: -210px -150px; }

.emoji.f95e { background-position: -225px -150px; }

.emoji.f9b1 { background-position: 0 -165px; }

.emoji.f9b2 { background-position: -15px -165px; }

.emoji.f9b3 { background-position: -30px -165px; }

.emoji.f9b4 { background-position: -45px -165px; }

.emoji.f9b5 { background-position: -60px -165px; }

.emoji.f9b6 { background-position: -75px -165px; }

.emoji.f9b7 { background-position: -90px -165px; }

.emoji.f9b8 { background-position: -105px -165px; }

.emoji.f9b9 { background-position: -120px -165px; }

.emoji.f9ba { background-position: -135px -165px; }

.emoji.f9bb { background-position: -150px -165px; }

.emoji.f9bc { background-position: -165px -165px; }

.emoji.f9bd { background-position: -180px -165px; }

.emoji.f9be { background-position: -195px -165px; }

.emoji.f9bf { background-position: -210px -165px; }

.emoji.f9c0 { background-position: -225px -165px; }

.emoji.f9c1 { background-position: 0 -180px; }

.emoji.f9c2 { background-position: -15px -180px; }

.emoji.f9c3 { background-position: -30px -180px; }

.emoji.f9c4 { background-position: -45px -180px; }

.emoji.f9c5 { background-position: -60px -180px; }

.emoji.f9c6 { background-position: -75px -180px; }

.emoji.f9c7 { background-position: -90px -180px; }

.emoji.f9c8 { background-position: -105px -180px; }

.emoji.f9c9 { background-position: -120px -180px; }

.emoji.f9ca { background-position: -135px -180px; }

.emoji.f9cb { background-position: -150px -180px; }

.emoji.f9cc { background-position: -165px -180px; }

.emoji.f9cd { background-position: -180px -180px; }

.emoji.f9ce { background-position: -195px -180px; }

.emoji.f9cf { background-position: -210px -180px; }

.emoji.f9d0 { background-position: -225px -180px; }

.emoji.f9d1 { background-position: 0 -195px; }

.emoji.f9d2 { background-position: -15px -195px; }

.emoji.f9d3 { background-position: -30px -195px; }

.emoji.f9d4 { background-position: -45px -195px; }

.emoji.f9d5 { background-position: -60px -195px; }

.emoji.f9d6 { background-position: -75px -195px; }

.emoji.f9d7 { background-position: -90px -195px; }

.emoji.f9d8 { background-position: -105px -195px; }

.emoji.f9d9 { background-position: -120px -195px; }

.emoji.f9da { background-position: -135px -195px; }

.emoji.f9db { background-position: -150px -195px; }

.emoji.f9dc { background-position: -165px -195px; }

.emoji.f9dd { background-position: -180px -195px; }

.emoji.f9de { background-position: -195px -195px; }

.emoji.f9df { background-position: -210px -195px; }

.emoji.f9e0 { background-position: -225px -195px; }

.emoji.f9e1 { background-position: 0 -210px; }

.emoji.f9e2 { background-position: -15px -210px; }

.emoji.f9e3 { background-position: -30px -210px; }

.emoji.f9e4 { background-position: -45px -210px; }

.emoji.f9e5 { background-position: -60px -210px; }

.emoji.f9e6 { background-position: -75px -210px; }

.emoji.f9e7 { background-position: -90px -210px; }

.emoji.f9e8 { background-position: -105px -210px; }

.emoji.f9e9 { background-position: -120px -210px; }

.emoji.f9ea { background-position: -135px -210px; }

.emoji.f9eb { background-position: -150px -210px; }

.emoji.f9ec { background-position: -165px -210px; }

.emoji.f9ed { background-position: -180px -210px; }

.emoji.f9ee { background-position: -195px -210px; }

.emoji.f9ef { background-position: -210px -210px; }

.emoji.f9f0 { background-position: -225px -210px; }

.emoji.f9f1 { background-position: 0 -225px; }

.emoji.f9f2 { background-position: -15px -225px; }

.emoji.f9f3 { background-position: -30px -225px; }

.emoji.f9f4 { background-position: -45px -225px; }

.emoji.f9f5 { background-position: -60px -225px; }

.emoji.f9f6 { background-position: -75px -225px; }

.emoji.f9f7 { background-position: -90px -225px; }

.emoji.f9f8 { background-position: -105px -225px; }

.emoji.f9f9 { background-position: -120px -225px; }

.emoji.f9fa { background-position: -135px -225px; }

.emoji.f9fb { background-position: -150px -225px; }

.emoji.f9fc { background-position: -165px -225px; }

/* お知らせモーダル: インラインstyleをCSSクラス化（CSP style-src 'self' 対応） */
.notice-banner-title { color: red; }
.notice-detail-title { color: #4aaf00; }

.js-hidden { display: none; }
.d-inline { display: inline; }
.js-error-text { color: #c00; }
.u-text-error { color: #FF0000; }
.careMenu.is-spaced { margin: 16px 0; }
.swf-canvas-container { margin: 0 auto; text-align: center; }
.swf-canvas-container canvas { display: block; margin: 0 auto; }
.swf-reveal-link { text-align: center; margin-top: 16px; }
.form-input-wide { width: 98%; }
.farm-view-inline { text-align: center; margin: 8px auto; }

/* アクセシビリティ: スクリーンリーダー専用テキスト（視覚的に非表示） */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* othersMenu: 未実装項目を <span class="off"> に差し替えてクリック不能にする */
.othersMenu .navList span.off { position: relative; display: block; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; line-height: 32px; height: 32px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 2px #cdcdcd solid; background: #cfcfcf; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cfcfcf), color-stop(100%, #b3b3b3)); background: -moz-linear-gradient(#cfcfcf, #b3b3b3); background: -webkit-linear-gradient(#cfcfcf, #b3b3b3); background: linear-gradient(#cfcfcf, #b3b3b3); -moz-box-shadow: 0 4px 1px #8a8a8a; -webkit-box-shadow: 0 4px 1px #8a8a8a; box-shadow: 0 4px 1px #8a8a8a; color: #4e4e4e; pointer-events: none; cursor: not-allowed; }

/* モーダル共通の「とじる」は components/ui-close.blade.php +
   ui-modal.css の .uiBtnClose に統合した (旧 .uiCloseBtn は廃止)。 */

/* ■ボタンを押したときの弾み (ボヨヨーン)
   public/js/bgm.js が、押した要素に .is-tapped / .is-tapped--wide を付ける
   (アニメーションが終わったら外す)。

   transform ではなく scale プロパティで動かしている。
   :active { transform: translateY(1px); } を持つボタンが 100 個以上あり、
   transform で書くと押し込みが消えてしまう。scale は transform と合成される
   ので、押し込みと弾みが両立する。
   scale を解さないブラウザでは、これまでどおり押し込みだけになる。

   画面幅いっぱいの行やボタンは、大きく膨らませると隣とぶつかるので
   控えめの --wide を使う (どこまで膨らむかだけの違い)。 */
@keyframes uiTapBounce {
    0%   { scale: 1; }
    18%  { scale: 0.86; }
    42%  { scale: 1.10; }
    62%  { scale: 0.95; }
    80%  { scale: 1.04; }
    92%  { scale: 0.99; }
    100% { scale: 1; }
}

@keyframes uiTapBounceWide {
    0%   { scale: 1; }
    20%  { scale: 0.94; }
    45%  { scale: 1.03; }
    70%  { scale: 0.98; }
    100% { scale: 1; }
}

.is-tapped {
    animation: uiTapBounce 420ms cubic-bezier(0.25, 0.8, 0.35, 1);
    transform-origin: center center;
}

.is-tapped--wide {
    animation: uiTapBounceWide 340ms cubic-bezier(0.25, 0.8, 0.35, 1);
    transform-origin: center center;
}

/* 動きを減らす設定の端末では弾ませない */
@media (prefers-reduced-motion: reduce) {
    .is-tapped,
    .is-tapped--wide { animation: none; }
}