@charset "UTF-8";
/**
* CSS Document
* sass 以外での編集禁止
*/
/**
* SASS変数定義
*/
/**
* SASS関数のHelper
*/
/**
* 配列操作
* map-get($map, $key) : 指定したキーの値を取得する関数
* map-merge($map1, $map2) : 2つのマップをマージする関数
* map-keys($map) : 1つのマップ内のすべてのキーをカンマ区切りのリストで返す関数
* map-values($map) : 1つのマップ内のすべての値をカンマ区切りのリストで返す関数
* map-has-key($map, $key) : 1つのマップ内に特定のキーがあるかどうか調べる関数
*/
/**
* グローバル変数定義
* 参照 mg(namespace namespace)
*/
@import url("https://fonts.googleapis.com/css?family=Sorts+Mill+Goudy");
/**
* SASS関数定義
*/
/**
* 関数の上書き
*/
/**
* SASS関数のHelper
*/
/**
* 数値処理系
*/
/**
* Mathクラス定義
* 引数) 数値,桁数=0
*/
/* Round (四捨五入) */
/* Ceil (切り上げ) */
/* Floor (切り捨て) */
/**
* 文字列処理系
*/
/**
* 数値から単位を削除
* @param {[type]} $value [description]
* @return {[type]} [description]
*/
/**
* 文字列置換
* @param {[string]} $string [対象]
* @param {[string]} $search [検索]
* @param {[string]} $replace: '' [置換]
* @return {[string]} [置換後]
*/
/**
* タイポグラフィ
*/
/**
* SASS関数定義
*/
/**
* MIX-INの上書き
*/
/* libsass transitionの修正hack
------------------------------------------------- */
/**
* MIX-INのHelper
*/
/**
* MIX-IN Generator
*/
/**
* マップスタイル生成
* @param {[type]} $hash [ハッシュマップ]
* @param {[type]} $class [クラス名]
* @param {[type]} $property [プロパティ]
* @return {[type]} [スタイル]
*/
/**
* プリフィックス付与
* @param {[type]} $options:() [
* content: 表示内容
* indent: インデント
* offset: 表示内容の余白
* ]
* @return {[type]} [description]
*/
/**
* ボタンジェネレータ
*/
/**
* オートレイアウト
*/
/**
* グリッドレイアウト
*/
/**
* グリッドシステム
*/
/**
* CSSプロパティのMIX-IN
*/
/**
* rem support
* @param {[type]} $size [description]
* @return {[type]} [description]
*/
/**
* タイポグラフィ
*/
@media screen and (max-width: 640px) {
.ingredientsBox > figure {
background-color: #efefef;
text-align: center; }
.ingredientsBox > figure img {
display: inline-block;
max-width: 100%;
min-width: 80%;
width: 300px; }
.ingredientsBox > figure ~ table,
.ingredientsBox > table:nth-child(1n) {
font-size: 1rem; }
.ingredientsBox > figure ~ table .s,
.ingredientsBox > table:nth-child(1n) .s {
font-size: 0.8rem; }
.ingredientsBox > table:nth-child(1n):first-child,
.ingredientsBox > table:nth-child(1n):first-child ~ *,
.ingredientsBox > table > thead:nth-child(1n):first-child,
.ingredientsBox > table > thead:nth-child(1n):first-child ~ *,
.ingredientsBox > table > tbody:nth-child(1n):first-child,
.ingredientsBox > table > tbody:nth-child(1n):first-child ~ *,
.ingredientsBox > table > thead > tr:nth-child(1n):first-child,
.ingredientsBox > table > thead > tr:nth-child(1n):first-child ~ *,
.ingredientsBox > table > tbody > tr:nth-child(1n):first-child,
.ingredientsBox > table > tbody > tr:nth-child(1n):first-child ~ *,
.ingredientsBox > table > thead > tr > th:nth-child(1n):first-child,
.ingredientsBox > table > thead > tr > th:nth-child(1n):first-child ~ *,
.ingredientsBox > table > thead > tr > td:nth-child(1n):first-child,
.ingredientsBox > table > thead > tr > td:nth-child(1n):first-child ~ *,
.ingredientsBox > table > tbody > tr > th:nth-child(1n):first-child,
.ingredientsBox > table > tbody > tr > th:nth-child(1n):first-child ~ *,
.ingredientsBox > table > tbody > tr > td:nth-child(1n):first-child,
.ingredientsBox > table > tbody > tr > td:nth-child(1n):first-child ~ *,
.ingredientsBox > table > tr:nth-child(1n):first-child,
.ingredientsBox > table > tr:nth-child(1n):first-child ~ *,
.ingredientsBox > table > tr > th:nth-child(1n):first-child,
.ingredientsBox > table > tr > th:nth-child(1n):first-child ~ *,
.ingredientsBox > table > tr > td:nth-child(1n):first-child,
.ingredientsBox > table > tr > td:nth-child(1n):first-child ~ * {
display: block;
width: auto; }
.ingredientsBox > table td[colspan="3"] .overscroll {
overflow-x: auto;
padding-bottom: 10px; }
.ingredientsBox > table td[colspan="3"] .overscroll::-webkit-scrollbar {
height: 3px; }
.ingredientsBox > table td[colspan="3"] .overscroll::-webkit-scrollbar-track {
background: #efefef; }
.ingredientsBox > table td[colspan="3"] .overscroll::-webkit-scrollbar-thumb {
background: #b80101; }
.ingredientsBox > table td[colspan="3"] .overscroll > table {
max-width: initial; }
.ingredientsBox > table td[colspan="3"] .overscroll > table,
.ingredientsBox > table td[colspan="3"] .overscroll > table > thead,
.ingredientsBox > table td[colspan="3"] .overscroll > table > tbody {
display: block; }
.ingredientsBox > table td[colspan="3"] .overscroll > table > thead > tr,
.ingredientsBox > table td[colspan="3"] .overscroll > table > tbody > tr,
.ingredientsBox > table td[colspan="3"] .overscroll > table > tr {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: flex-start;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-items: stretch;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-flex-direction: row;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row; }
.ingredientsBox > table td[colspan="3"] .overscroll > table > thead > tr > *,
.ingredientsBox > table td[colspan="3"] .overscroll > table > tbody > tr > *,
.ingredientsBox > table td[colspan="3"] .overscroll > table > tr > * {
min-width: calc(1 / 3 * 125%);
max-width: calc(1 / 3 * 125%);
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; } }