@charset "UTF-8";
/* ----------------------------------------------------------------------------  
　Clearfix：float解除
----------------------------------------------------------------------------  */
.clearfix:before, .clearfix:after { clear: both; display: block; height: 0; visibility: hidden; content: "\0020"; }

/** ホバーエフェクトの mixin<br> 効果：中央からラインが伸びる（下）<br> 参考：http://www.nxworld.net/tips/15-text-link-hover-effect-and-design.html @param {String} color ラインのカラー　デフォルトは #888 @param {String} border_height ラインの高さ　デフォルトは 1px @param {String} transition トランジション　デフォルトは 0.3s */
/** ホバーエフェクトの mixin で「中央からラインが伸びる（下）」のホバーじと同じ効果を上書きする<br> 効果：中央からラインが伸びる（下）：ホバー<br> */
/** ボックス型のボタン ボタンのテキストにはクラスを設定したタグに data-button-text プロパティを設定して before と after にボタン名として入れられる テキストは before に設定される。 ホバー時にはテキストがせり上がるようにしながら after が表示される。 */
/** ボタンクラスの基本を作る mixin<br> @param {String} element ボタンにするエレメント　デフォルトは .btn @param {Boolean} responsive レスポンシブにする場合に true　デフォルトは false */
/** スライドスイッチのクラスを構築 mixin<br> 参考：https://proto.io/freebies/onoff/ @param {String} cl クラス名 @param {String} h 高さ @param {String} w 幅 @param {String} b ボーダーの幅 @param {String} offBgClr OFF の時のボタン背景色 @param {String} onBgClr ON の時のボタン背景色 @param {String} offBdClr OFF の時のボーダー色 @param {String} onBdClr ON の時のボーダー色 @param {String} swClr スライドするボタンの色 */
/** スライドスイッチのクラスを構築 mixin<br> 参考：https://proto.io/freebies/onoff/ こちらは ON, OFF のテキストがスイッチの右側に表示される @param {String} cl クラス名 @param {String} h 高さ @param {String} w 幅 @param {String} b ボーダーの幅 @param {String} offBgClr OFF の時のボタン背景色 @param {String} onBgClr ON の時のボタン背景色 @param {String} offBdClr OFF の時のボーダー色 @param {String} onBdClr ON の時のボーダー色 @param {String} swClr スライドするボタンの色 */
/*********************************************************************************************
version : 0.1.1
modification date : 2017/12/12
*********************************************************************************************/
body h1 { margin: 0 auto; padding: 2em 0; text-align: center; font-size: 1.2em; }

/* START : Shop list ***********************************************************************/
#shopList ul, #shop-list ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 -5px; }

#shopList ul li, #shop-list ul li { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; position: relative; margin: 0 0 10px; padding: 0 5px; min-width: 50%; }

#shopList ul li .permalink, #shop-list ul li .permalink { display: block; border-radius: 6px; background: white; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }

#shopList ul li .permalink a, #shop-list ul li .permalink a { text-decoration: none; }

#shopList ul li:active, #shop-list ul li:active { top: 2px; -webkit-box-shadow: none; box-shadow: none; }

#shopList ul li .permalink .linkArea { display: block; padding: 6px 8px; border-width: 1px; border-style: solid; border-color: gray; -webkit-box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.2) inset; border-radius: 5px; background: #204054; color: white; text-align: center; }

#shopList ul li:hover .permalink .linkArea { background: #30546c; }

#shopList ul li:active .permalink .linkArea { border-color: #6090e0; -webkit-box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5) inset; box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5) inset; background: #f8fcff; color: #204054; }

#shopList ul li dl dt { float: left; }

/* END : Shop list ***********************************************************************/
/*# sourceMappingURL=front-page.css.map */