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

/* モバイルレ : 480 px およびそれ以下. */

/* ##################################################################### */
/*	スマートフォン
/* ##################################################################### */
/* ===================================================================== */
/*	スマホ　グローバルナビゲーション
/* ===================================================================== */

/* 見出しデザイン　リボン */
.h_ribon h1 {
    position: relative;
    padding-top: .20em;
    padding-right: .10em;
    padding-left: 0.5em;
    padding-bottom: .20em;
    margin-bottom: 30px!important;
    background-color: #D90003;
    color: #FFFFFF;
    clear: both;
}
.h_ribon h1::before, .h_ribon h1::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent;
}
.h_ribon h1::before {
    top: 100%;
    left: 0;
    border-width: 0 15px 15px 0;
    border-right-color: #ccc;
}
.soy h2 {
    margin-bottom: 15px;
    border-left: 10px solid #DF0003;
    font-size: 120%;
    background-color: #F3F3F3;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 10px;
}
.soy h3 {
    margin-bottom: 10px;
    border-bottom: 1px solid #DF0003;
    font-size: 140%;
    background-color: #F3F3F3;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 0.5em;
    clear: both;
}
.btnRed,
.btnRedSp {
    background-color: #DD0003;
    border-radius: 4px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #FFFFFF;
}
.btnRed {
    display: none;
}
.far {
    color: #FFFFFF;
}
.soySpec {
    width: 100%;
    float: left;
}
.soySpec .leftArea {
    background-color: #FCFCFC;
    border: 1px solid #CDCDCD;
    text-align: center;
    margin-bottom: 25px;
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.soySpec .leftArea img {
    width: 95%;
    height: auto;
}
.soySpec .rightArea {
    width: 100%;
    float: left;
}
.genreTitle {
}
.genreTitle p {
    line-height: 1em;
    padding-bottom: 0px;
    font-size: 140%;
    font-weight: bold;
    margin-bottom: 0px;
}
.genre {
}
p.prize1 {
    line-height: 1em;
    margin-bottom: 0px;
    font-weight: bold;
}
p.prize1 img {
    padding-bottom: 10px;
}
p.prize2 {
    font-weight: bold;
}
.soy {
    clear: both;
}
.categoryTitle {
    line-height: 1em;
    margin-bottom: 5px;
    font-weight: bold;
}

/* ===================================================================== */
/*	タブ
/* ===================================================================== */
.tabSoy {
    margin-bottom: 25px;
    display: inline-block;
    float: left;
    width: 100%;
    border-bottom: 1px solid #E00003!important;
}
.tabSoy ul {
    width: 100%;
    list-style: none;
}
.tabSoy li {
    background-color: #CBCBCB;
    color: #FFFFFF;
    padding-top: 5px;
    padding-right: 8px;
    padding-left: 8px;
    padding-bottom: 5px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    float: left;
    margin-right: 3px;
}
.tabSoy li.on {
    background-color: #DD0003!important;
}
.tabSoy li:hover {
    background-color: #DD0003!important;
}
.tabSoy li a {
    color: #FFFFFF;
}
/* ===================================================================== */
/*	タブ2
/* ===================================================================== */
.btnTAB .tabSoy2 {
}
.btnTAB .tabSoy2 li {
    background-color: #CBCBCB;
    border-radius: 8px;
    margin-bottom: 5px;
}
.btnTAB .tabSoy2 {
    border-bottom: 0px solid #E00003!important;
}
.btnTAB .tabSoy2 li.on {
    background-color: #DD0003!important;
}
.btnTAB .tabSoy2 li:hover {
    background-color: #DD0003!important;
}
.btnTAB .tabSoy2 li a {
    color: #FFFFFF;
}
.tabSoy2 {
    margin-bottom: 25px;
    display: inline-block;
    float: left;
    width: 100%;
    border-bottom: 1px solid #E00003!important;
}
.tabSoy2 ul {
    width: 100%;
    list-style: none;
}
.tabSoy2 li {
    background-color: #CBCBCB;
    color: #FFFFFF;
    padding-top: 5px;
    padding-right: 8px;
    padding-left: 8px;
    padding-bottom: 5px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    float: left;
    margin-right: 3px;
}
.tabSoy2 li.on {
    background-color: #DD0003!important;
}
.tabSoy2 li:hover {
    background-color: #DD0003!important;
}
.tabSoy2 li a {
    color: #FFFFFF;
}
/* ===================================================================== */
/*	テーブル
/* ===================================================================== */
.tableSOY{
    margin-bottom: 30px;
}
.tableSOY table {
    width: 100%;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #CCC;
    float: left;
    font-style: normal;
    font-size: 98%;
    margin-bottom: 0px;
}
.tableSOY tbody th, .tableSOY tbody td {
    text-align: left;
    vertical-align: middle;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1.5em;
}
.tableSOY tbody td {
    background-color: #FFFFFF;
}
.tableSOY tbody td.detail {
    text-align: center;
}
.tableSOY tbody th.side {
    background-color: #F3F3F3;
}
.tableSOY tbody th.side img {
    width: 18px;
    height: 18px;
}
.iconDescription{
    clear: both;
    float: right;
    font-size: 94%;
    line-height: 2.0em;
    vertical-align: bottom;
}
.iconDescription img{
    width: 18px;
    height: 18px;
}

/* タブレット: 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
/* ##################################################################### */
/*	タブレット
/* ##################################################################### */
/* ===================================================================== */
/*	タブレット　グローバルナビゲーション
/* ===================================================================== */
.soy h2 {
    font-size: 160%;
}
.soySpec {
}
.soySpec .leftArea {
    background-color: #FCFCFC;
    border: 1px solid #CDCDCD;
    text-align: center;
    margin-bottom: 25px;
    float: left;
    width: 25%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 2%;
}
.soySpec .leftArea img {
    width: 95%;
    height: auto;
}
.soySpec .rightArea {
    width: 72%;
    float: left;
}
.soySpec table td, .soySpec table th {
    padding-bottom: 4px;
    padding-top: 4px;
    font-size: 110%;
}
}

@media only screen and (min-width: 769px) {
/* ##################################################################### */
/*	スマートフォン
/* ##################################################################### */
/* ===================================================================== */
/*	テーブル
/* ===================================================================== */
	
.btnTAB .tabSoy2 li {
    margin-bottom: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.btnTAB .tabSoy2 {
    border-bottom: 1px solid #E00003!important;
}
.tableSOY tbody th.side {
    background-color: #FFFFFF;
}
.tableSOY tbody th.side img {
    width: 20px;
    height: 20px;
    padding-bottom: 6px;
}
.tableSOY tbody th.list01 {
    width: 25%!important;
}
.tableSOY tbody th.list02 {
    width: 35%!important;
}
.tableSOY tbody th.list03 {
    width: 30%!important;
}
.tableSOY tbody th.list04 {
    width: 10%;
    text-align: center;
    font-size: 92%;
}
.btnRed,
.btnRedSp {
    font-size: 92%;
}
}

@media only screen and (max-width:769px) {
/* ##################################################################### */
/*	タブレット・PC　共通設定 テーブル
/* ##################################################################### */
/* ===================================================================== */
/*	タブレット・PC　共通設定 テーブル　基本設定
/* ===================================================================== */
.tableSOY {
    font-size: 120%;
}
.tableSOY tbody {
    display: block;
}
.tableSOY tbody tr {
    display: block;
    margin-bottom: 0.5em;
    text-align: left;
}
.tableSOY tbody th, .tableSOY tbody td {
    display: list-item;
    border: none;
    list-style-type: none;
    margin-left: 0px!important;
}
.tableSOY tbody th {
    font-weight: bold;
}
.tableSOY tbody th.top {
    display: none;
}
.tableSOY tbody td:nth-of-type(1):before {
    content: " [店舗名] ";
}
.tableSOY tbody td:nth-of-type(2):before {
    content: " [ダブル受賞] ";
}
}

@media only screen and (min-width:769px) {
/* ##################################################################### */
/*	タブレット・PC　共通設定 テーブル
/* ##################################################################### */
/* ===================================================================== */
/*	タブレット・PC　共通設定 テーブル　基本設定
/* ===================================================================== */
.btnRed {
    display: inherit;
}
.btnRedSp {
    display: none;
}
}

@media only screen and (max-width:970px) {
/* ##################################################################### */
/*	PC　共通設定 テーブル
/* ##################################################################### */

}