@charset "UTF-8";

/* ######################################################################################

　表示

###################################################################################### */

@media print, screen and (min-width: 768px) {
div.pc { display: block; }
div.sp { display: none; }
span.pc { display: inline-block; }
span.sp { display: none; }
img.pc { display: inline-block; }
img.sp { display: none; }
}

@media screen and (max-width: 767px) {
div.pc { display: none; }
div.sp { display: block; }
span.pc { display: none; }
span.sp { display: inline-block; }
img.pc { display: none; }
img.sp { display: inline-block; }
}


/* ######################################################################################

　button

###################################################################################### */
.button {
  opacity: 1;
  display: inline-block;
  position: relative;
  border: none;
  -webkit-appearance: none;
  border: 1px solid #999999;
  border-radius: 4px;
  background: #999999;
  font-size: 14px;
  font-weight: normal;
  font-family: "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  color: #ffffff;
  vertical-align: middle;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  padding:1em;
}

.button.orange {
    border-color:#db5424;
    background:#db5424;
}
.button.orange:hover {
    border-color:#db5424;
    background:#ffffff;
    color:#db5424;
}
.button.orange:before {
    content: "\f0da";
    font-family: FontAwesome;
    font-size: 1em;
    margin-right: 0.5em;
}
@media screen and (max-width: 767px) {
    .button.orange:before {
        position:absolute;
        left:1em;
        top:50%;
        transform:translateY(-50%);
    }
}




/* ######################################################################################

　タイトル

###################################################################################### */

/* ====================================================
  メインカラータイトル
==================================================== */
.titleMaincolor {
    margin-bottom: 0.25em;
    color: #db5424;
    font-size: 14px;
    font-weight: normal;
}
.titleMaincolor.center { text-align: center; }
/* ====================================================
  帯タイトル
==================================================== */
.titleSolid {
    background: #555555;
    margin-bottom: 2em;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    line-height: 1;
}
.titleSolid.orange { background: #db5424; }

@media print, screen and (min-width: 768px) {
.titleSolid { padding: 0.4em 0.4em 0.3em 0.3em; }
.msie .titleSolid { padding: 0.5em 0.4em 0.3em 0.3em; }
}



@media screen and (max-width: 767px) {
.titleSolid { padding: 0.5em 0.75em; }
.titleSolid.withSubMenu { margin-bottom: 0; }
}
/* ====================================================
  ■アイコンタイトル
==================================================== */
.titleIcoSquare {
    border-bottom: solid;
    margin-bottom: 0.63em;
    font-size: 30px;
}
.titleIcoSquare:before { content: "■"; }
.titleIcoSquare.mini { font-size:22px;}

.titleIcoSquare.noBorder {border:none; padding-bottom:0 !important;}

@media print, screen and (min-width: 768px) {
.titleIcoSquare {
    border-bottom-width:2px;
    border-color: #656464; }
.titleIcoSquare.mini {
    border-bottom-width:1px;
    padding-bottom:15px;
    /*margin-bottom:;*/
}
}

@media screen and (max-width: 767px) {
.titleIcoSquare {
    border-bottom-width:1px;
    border-color: #656464;
    }
}
/* ====================================================
  サイドバータイトル
==================================================== */
.titleSidebar {
    border-left: 7px solid #656464;
    margin-bottom:1em;
    padding-left:0.4em;
    line-height:1;
    font-size: 22px;
}
.msie .titleSidebar {
    padding-top: 0.1em;
}

.titleSidebar small {
    display:block;
    margin-bottom:0.5em;
    font-size:63.6363%;
}
/* ====================================================
  ポッキータイトル
==================================================== */
.titlePockey {
  position: relative;
  line-height: 1.2;
  margin-bottom:1em;
  border-bottom: 2px solid #e0e0e0;
}
.titlePockey a {text-decoration:none;}
.titlePockey a:hover {
    text-decoration:underline;
    color:#333333;
}
.titlePockey span {
  position: relative;
  display: inline-block;
  padding: 0 0.25em 0.5em 0;
}
.titlePockey span:before {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
    .titlePockey {
      font-size: 22px;
      font-weight:bold;
    }
}
@media screen and (max-width: 767px) {
    .titlePockey {
      font-size: 18px;
      font-weight:normal;
    }
}

/* チョコの色 */
.titlePockey span:before {border-bottom: 2px solid #ffc658;}

/* プリッツの色 */
.titlePockey.fix span:before {max-width:120px;}

/* orange */
.titlePockey.orange a,
.titlePockey.orange {border-color: #e0e0e0; color:#db5424;}
.titlePockey.orange a:hover {color:#333333;}
.titlePockey.orange span:before {border-color: #db5424;}

/* ######################################################################################

　パンくずリスト

###################################################################################### */
.topicPath {
    clear: both;
    line-height: 1;
    width: 100%;
    color: #db5424;
}
.topicPath ol {
    text-align: left;
}
.pageRecipes .topicPath ol { margin-bottom:5px;}
.topicPath ol li {
    display: inline-block;
    font-size: 12px;
}
.topicPath ol li:before {
    content: "\f105";
    display: inline-block;
    padding: 0 0.5em;
    font-family: FontAwesome;
}
.topicPath ol li:first-child:before { display: none; }
.topicPath ol li a {
    color: #db5424;
    text-decoration: none;
}

@media print, screen and (min-width: 768px) {
.topicPath { margin: 0 auto 30px; }
.topicPath ol li a:hover { text-decoration: underline; }
}

@media screen and (max-width: 767px) {
.topicPath { margin: 0 auto 20px; }
}
/* ######################################################################################

　サブリスト

###################################################################################### */

/* ====================================================
  共通
==================================================== */
.titleSolid + .subMenu { font-size: 13px; }
.subMenu { line-height: 1; }
.subMenu:after {
    content: "";
    display: table;
    clear: both;
}
.subMenu li { display: inline-block; }
.subMenu a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    vertical-align: bottom;
}

@media print, screen and (min-width: 768px) {
.titleSolid + .subMenu {
    margin-top: -4.55em;
    margin-bottom: 2.5em;
}

.msie .titleSolid + .subMenu {
 /*   margin-top: -4.65em;*/
}
.subMenu {
    text-align: right;
    font-size: 12px;
}
.subMenu a { padding: 0.8em 1em 0.6em 0.75em; }
.msie .subMenu a { padding: 0.7em 1em 0.45em 0.75em; }
    
}

@media screen and (max-width: 767px) {
.subMenu {
    background: #db5424;
    margin-bottom: 40px;
}
.subMenu li {
    float: left;
    margin-bottom: -1px;
}
.subMenu a { padding: 1em 0.5em; }
}
/* ====================================================
　アイコン【>>】※店舗一覧　LINE
==================================================== */
.subMenu.double li a:before {
    content: "\f0da";
    font-family:FontAwesome;
    font-size: 1em;
    margin-right: 0.2em;
}

.subMenub.double li {
    border: solid #ffffff;
    border-width: 1px 1px 1px 0;
    width: 20%;
    text-align: center;
}


@media screen and (max-width: 767px) {
.subMenu.double li {
    border: solid #ffffff;
    border-width: 1px 1px 1px 0;
    width: 33.3333%;
    text-align: center;
}
.subMenu.double li:nth-of-type(3n) { border-right: none; }
}
/* ====================================================
　アイコン【>>】※アーカイブ
==================================================== */
.subMenu.archive { text-align: right; }
.subMenu.archive a {
    display: inline-block;
    border-left: 1px solid #ffffff;
}
.subMenu.archive a:before {
    content: "\f0da";
    font-family:FontAwesome;
    font-size: 1em;
    margin-right: 0.2em;
}

@media screen and (max-width: 767px) {
.subMenu a { padding: 0.8em 0.75em 0.7em; }
.titleSolid + .subMenu.archive {
    margin-top: -4.9em;
    margin-bottom: 2.5em;
}
}
/* ====================================================
　アイコン【△】
==================================================== */
.subMenu.triangle li a:before {
    content: "\f04b";
    margin-right: 0.5em;
    font-family: FontAwesome;
}
@media screen and (max-width: 767px) {
.subMenu.triangle ul { border-top: 1px solid #ffffff; }
.subMenu.triangle li { width: 100%; }
.subMenu.triangle li:nth-of-type(2n) { border-right: none; }
}