@charset "UTF-8";
/*
Theme Name: 小樽Fish
Theme URI:
Description:
Version:  1.0
Author:
Tags:
*/
* {
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

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

img {
  vertical-align: bottom;
  max-width: 100%;
}

.cf {
  width: 100%;
}

.cf:after {
  content: "";
  display: block;
  clear: both;
}

.fs10 {
  font-size: 10px !important;
}

.fs11 {
  font-size: 11px !important;
}

.fs12 {
  font-size: 12px !important;
}

.fs13 {
  font-size: 13px !important;
}

.fs14 {
  font-size: 14px !important;
}

.fs15 {
  font-size: 15px !important;
}

.fs16 {
  font-size: 16px !important;
}

.fs17 {
  font-size: 17px !important;
}

.fs18 {
  font-size: 18px !important;
}

.fs19 {
  font-size: 19px !important;
}

.fs20 {
  font-size: 20px !important;
}

.fs21 {
  font-size: 21px !important;
}

.fs22 {
  font-size: 22px !important;
}

.fs23 {
  font-size: 23px !important;
}

.fs24 {
  font-size: 24px !important;
}

.fs25 {
  font-size: 25px !important;
}

.fs26 {
  font-size: 26px !important;
}

.fs27 {
  font-size: 27px !important;
}

.fs28 {
  font-size: 28px !important;
}

.fs29 {
  font-size: 29px !important;
}

.fs30 {
  font-size: 30px !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.mr0 {
  margin-right: 0 !important;
}

.mr5 {
  margin-right: 5px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mr60 {
  margin-right: 60px !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.ml0 {
  margin-left: 0;
}

.ml5 {
  margin-left: 5px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.ml60 {
  margin-left: 60px !important;
}

.alignCenter {
  text-align: center;
}

.alignLeft {
  text-align: left;
}

.alignRight {
  text-align: right;
}

.colorWht {
  color: #fff;
}

.hover:hover img {
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

a {
  text-decoration: none;
}
a:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* 横幅を978pxから変更(画像をレスポンシブ対応させるため) */
.box {
  margin: 0 auto;
  width: 1000px;
  max-width: 100%;
  padding: 0 10px;
}

#header {
  background: #000;
  height: 410px;
  position: relative;
}
#header #slider {
  background: #000;
}
#header #slider .sp-image {
  display: none;
}
#header #slider .sp-arrows {
  z-index: 100;
}
#header #slider .sp-fade-arrows {
  opacity: 0.5;
}
#header #slider .sp-buttons {
  bottom: 50px;
  right: 20px;
  text-align: right;
  z-index: 100;
}
#header #slider .sp-buttons .sp-button {
  background: #fff;
  border: 1px solid #ccc;
}
#header #slider .sp-buttons .sp-button.sp-selected-button {
  background: #000;
}
#header #sliderCover {
  background: url(../img/cover.png);
  height: 626px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#header .loader {
  left: 50%;
  color: #fff;
  margin: -10px 0 0 -10px;
  position: absolute;
  top: 50%;
}
#header .loader i {
  color: #fff;
  font-size: 20px;
}
#header h1 {
  left: 60px;
  position: absolute;
  top: 30px;
}
#header h2 {
  bottom: 50px;
  left: 50%;
  margin-left: -203px;
  position: absolute;
}

#nav {
  background: #000;
}
#nav ul li.parent {
  display: block;
  float: left;
  height: 45px;
  position: relative;
  width: 163px;
}
#nav ul li.parent img.hide {
  left: 0;
  position: absolute;
  bottom: -45px;
  transition: 0.2s;
}
#nav ul li.parent:hover img.hide {
  bottom: 0;
}
#nav ul li.parent > a {
  display: block;
  height: 45px;
  overflow: hidden;
  position: relative;
  width: 163px;
}
#nav ul li.parent > ul {
  background: rgba(0, 0, 0, 0.7);
  bottom: 45px;
  display: none;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 110;
}
#nav ul li.parent > ul li {
  font-size: 11px;
  text-align: center;
}
#nav ul li.parent > ul li a {
  border-bottom: 1px dashed #666;
  color: #fff;
  display: block;
  padding: 15px 0;
  text-decoration: none;
}
#nav ul li.parent > ul li a:hover {
  background: #444;
}

#content {
  padding: 15px 0;
}
#content #main {
  float: left;
  width: 644px;
}
#content #side {
  float: right;
  margin-top: 30px;
  width: 315px;
}

#main .largeBnr {
  margin-bottom: 20px;
}
#main #topTopics h2 {
  margin-bottom: 10px;
}
#main #topTopics #postFirst {
  background: #ede8d1;
  border: 1px solid #ccc;
  float: left;
  height: 200px;
  width: 206px;
}
#main #topTopics #postFirst a img {
  width: 100%;
}
#main #topTopics #postFirst a .topicsDate {
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 3px 5px;
}
#main #topTopics #postFirst a .topicsDate:before {
  content: "▶ ";
  font-size: 10px;
}
#main #topTopics #postFirst a h3 {
  color: #333;
  font-size: 12px;
  line-height: 1.4;
  padding: 5px;
}
#main #topTopics #postOffset {
  float: right;
  border: 1px solid #ccc;
  height: 200px;
  overflow-y: scroll;
  padding: 10px;
  width: 430px;
}
#main #topTopics #postOffset ul li {
  border-bottom: 1px dashed #ccc;
  font-size: 12px;
  padding: 5px;
}
#main #topTopics #postOffset ul li:before {
  content: "・";
  margin-right: 5px;
}
#main #topTopics #postOffset ul li a {
  color: #444;
}
#main #topTopics #topicsMore {
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
  padding: 10px;
  text-align: right;
}
#main #topTopics #topicsMore a {
  font-size: 12px;
  color: #333;
}
#main #topTopics #topicsMore a:before {
  content: "▼";
  margin-right: 5px;
}
#main .smallBnr {
  width: 657px;
}
#main .smallBnr ul li {
  float: left;
  min-height: 100px;
  margin: 0 13px 5px 0;
  width: 206px;
}
#main .smallBnr ul li a {
  color: #333;
  font-size: 10px;
  text-decoration: none;
}
#main .middleBnr {
  width: 657px;
}
#main .middleBnr ul li {
  float: left;
  margin: 0 13px 5px 0;
  width: 206px;
}
#main .middleBnr ul li a {
  color: #333;
  font-size: 10px;
  text-decoration: none;
}
#side .sideBox {
  margin-bottom: 10px;
}

#footer #footerCnt {
  height: 57px;
  margin-bottom: 10px;
  padding-left: 50px;
}
#footer #footerCnt h3, #footer #footerCnt h4, #footer #footerCnt p {
  float: left;
}
#footer #footerCnt h3 {
  margin-right: 10px;
}
#footer #footerCnt h4 {
  height: 57px;
  margin-right: 10px;
  padding-top: 17px;
}
#footer #footerCnt p {
  font-size: 12px;
  line-height: 140%;
  margin-top: 14px;
}
#footer #copy {
  background: #000;
  padding: 20px 0;
}
#footer #copy p {
  color: #fff;
  font-size: 10px;
  text-align: center;
}

#page #header {
  height: 250px;
  overflow: hidden;
}
#page #header #pageImg {
  left: 0;
  min-width: 1574px;
  position: absolute;
  top: 0;
  width: 100%;
}
#page #box404 {
  padding: 80px 0;
  text-align: center;
}
#page #box404 h2 {
  font-size: 24px;
  margin-bottom: 40px;
}
#page #box404 p {
  line-height: 180%;
}

.sent {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#pageCnt .pageTxt .halfImgBox .halfImg_new_product {
  margin-bottom: 10px;
}

.innerBox .pr dt { font-size: 15px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; width: 30%;float: left; }
.innerBox .pr dd { font-size: 15px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; width: 70%;padding-left:10px;float:left; }

/* PCでの表示 */
@media screen and (min-width: 641px) {
  .sp {
    display: none !important;
  }
}
/* スマートフォンでの表示 */
@media screen and (min-width: 480px) {
  .floatLeft {
    float: left;
    margin-bottom: 0;
  }
  .floatRight {
    float: right;
    margin-bottom: 0;
  }
  #pageCnt .pageTxt .halfImgBox .halfImg_new_product {
    font-size: 15px;
    width: 49%;
    margin-bottom: 0;
  }
}
@media screen and (max-width: 640px) {
  .pc {
    display: none !important;
  }

  .box {
    width: 100%;
  }

  #header {
    height: auto;
  }
  #header h1 {
    left: 20px;
    top: 20px;
  }
  #header h1 img {
    height: auto;
    width: 100px;
  }
  #header #slider_sp .sp-buttons {
    display: none;
  }
  #header #slider_sp .sp-fade-arrows {
    display: none;
  }

  #spNav {
    background: #000;
    position: relative;
    z-index: 100;
  }
  #spNav #navOpen {
    border-bottom: 1px solid #333;
  }
  #spNav #navOpen a {
    color: #ddd;
    display: block;
    padding: 20px 0;
    text-align: center;
    text-decoration: none;
  }
  #spNav ul.cf {
    display: none;
  }
  #spNav ul.cf a {
    color: #ddd;
    display: block;
    padding: 20px;
    text-decoration: none;
  }
  #spNav ul.cf a i {
    margin-right: 10px;
  }
  #spNav ul.cf > li {
    border-bottom: 1px solid #333;
  }
  #spNav ul.cf > li > a {
    background: #111;
  }
  #spNav ul.cf > li > ul {
    display: none;
  }
  #spNav ul.cf > li > ul > li {
    border-bottom: 1px solid #666;
  }
  #spNav ul.cf > li > ul > li a {
    background: #222;
    padding-left: 40px;
  }

  #content #main {
    float: none;
    padding: 0 10px;
    width: auto;
  }
  #content #main .largeBnr {
    text-align: center;
  }
  #content #main .largeBnr img {
    max-width: 100%;
    width: 100%;
  }
  #content #main .smallBnr {
    display: inline;
    width: auto;
  }
  #content #main .smallBnr ul li {
    display: inline-block;
    min-height: 0;
    margin: 0 0 20px;
    padding: 0 5px;
    width: 50%;
  }
  #content #main .smallBnr ul li a {
    font-size: 12px;
  }
  #content #main .smallBnr ul li img {
    max-width: 100%;
    width: 100%;
  }
  #content #main .smallBnr ul li span {
    display: none;
  }
  #content #main .middleBnr {
    display: inline;
    width: auto;
  }
  #content #main .middleBnr ul li {
    display: inline-block;
    min-height: 0;
    margin: 0 0 20px;
    padding: 0 5px;
    width: 30%;
  }
  #content #main .middleBnr ul li a {
    font-size: 12px;
  }
  #content #main .middleBnr ul li img {
    max-width: 100%;
    width: 100%;
  }
  #content #main .middleBnr ul li span {
    display: none;
  }
  #content #side {
    float: none;
    margin-bottom: 30px;
    padding: 0 10px;
    width: auto;
  }
  #content #side #fbBox {
    margin: 0 auto;
    max-width: 340px;
    width: 100%;
  }

  #footer #footerCnt {
    height: auto;
    padding: 0 10px;
  }

  #page #header {
    height: 180px;
    overflow: hidden;
  }
  #page #header #spPageImg {
    overflow: hidden;
    width: 100%;
  }
  #page #content #box404 {
    padding: 40px 20px;
  }
}
#pageCnt #crumbRap {
  border-bottom: 1px solid #666;
  font-size: 12px;
  padding-bottom: 15px;
}
#pageCnt #crumbRap h1 {
  display: inline;
}
#pageCnt #crumbRap span {
  padding: 0 10px;
}
#pageCnt #topicsBox {
  margin: 0 auto 80px;
  width: 400px;
}
#pageCnt #topicsBox h2 {
  padding: 80px 0 30px;
  text-align: center;
}
#pageCnt #topicsBox ul li {
  border-bottom: 1px dashed #333;
  display: block;
  font-size: 13px;
}
#pageCnt #topicsBox ul li a {
  color: #333;
  display: block;
  padding: 10px 2px;
}
#pageCnt #topicsBox ul li a span {
  display: block;
}
#pageCnt #topicsBox ul li a .listDate {
  width: 80px;
  float: left;
}
#pageCnt #topicsBox ul li a .listTtl {
  width: 310px;
  float: right;
}
#pageCnt #topicsBox ul li a:hover {
  background: rgba(0, 0, 0, 0.1);
}
#pageCnt .pageTxt {
  color: #333;
  padding: 30px 0 80px;
}
#pageCnt .pageTxt .box {
  width: 700px;
}
#pageCnt .pageTxt .sec {
  margin-bottom: 40px;
}
#pageCnt .pageTxt h2 {
  background: url(img/single_ttl_bg.png) 0 5px no-repeat;
  font-size: 20px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 31px;
  margin-bottom: 20px;
  padding: 10px 0 10px 60px;
}
#pageCnt .pageTxt h3 {
  border-bottom: 5px solid #222;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 18px;
  margin-bottom: 20px;
  padding: 10px 5px;
  position: relative;
}
#pageCnt .pageTxt h3:after {
  bottom: -10px;
  border-bottom: 1px solid #222;
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
}
#pageCnt .pageTxt h3 span {
  font-size: 12px;
  margin-left: 10px;
}
#pageCnt .pageTxt h4 {
  border-bottom: 1px dashed #222;
  font-size: 16px;
  margin-bottom: 20px;
  padding: 10px 5px;
}
#pageCnt .pageTxt p {
  font-size: 15px;
  line-height: 1.8;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#pageCnt .pageTxt p.new_product_place {
  font-size: 15px;
  line-height: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
#pageCnt .pageTxt .imgBox {
  margin-bottom: 20px;
}
#pageCnt .pageTxt .imgBox img {
  max-width: 100%;
  height: auto;
}
#pageCnt .pageTxt .imgBox .menu_photo {
  max-width: 80%;
  height: auto;
}
#pageCnt .pageTxt .halfImgBox {
  max-width: 100%;
  height: auto;
}
#pageCnt .pageTxt .halfImgBox:after {
  content: "";
  display: block;
  clear: both;
}
#pageCnt .pageTxt .halfImgBox .halfImg {
  font-size: 12px;
  width: 49%;
}
#pageCnt .pageTxt .halfImgBox .halfImg {
  font-size: 12px;
  width: 49%;
}
#pageCnt .pageTxt .halfImgBox .halfImg img {
  margin-bottom: 3px;
  width: 100%;
  height: auto;
}
#pageCnt .pageTxt .halfImg .jigyo_link, #pageCnt .pageTxt .halfImg_new_product .jigyo_link {
  display: block;
  color: #000;
  cursor: pointer;
  transition: 0.3s;
}
#pageCnt .pageTxt .halfImg .jigyo_link span, #pageCnt .pageTxt .halfImg_new_product .jigyo_link span {
  color: #000;
  display: block;
  text-align: center;
  font-size: 0.8rem;
}
#pageCnt .pageTxt .halfImg .jigyo_link:hover, #pageCnt .pageTxt .halfImg_new_product .jigyo_link:hover {
  background: #fff;
  opacity: 0.8;
}
#pageCnt #calendar #calendarLink {
  position: relative;
  text-align: center;
}
#pageCnt #calendar #calendarLink ul {
  left: 0;
  position: absolute;
  top: 36px;
}
#pageCnt #calendar #calendarLink ul li a {
  display: block;
  height: 28px;
  margin-bottom: 1px;
  width: 94px;
}
#pageCnt #calendar #calendarLink ul li a:hover {
  background: rgba(255, 255, 255, 0.5);
}
#pageCnt #later #profile {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  margin: 20px 0 30px;
  padding: 20px 0;
}
#pageCnt #later #profile img {
  float: left;
  margin-right: 20px;
}
#pageCnt #later #profile p strong {
  font-weight: bold;
}
#pageCnt #recipe .sec p {
  margin-bottom: 20px;
}
#pageCnt #recipe .sec p span{
  border-bottom: 1px solid #000;
}
#pageCnt #recipe .sec p:last-child {
  margin-bottom: 0;
}

#pageCnt #preparation .sec img {
  max-width: 100%;
} 

#singleCnt #crumbRap {
  border-bottom: 1px solid #666;
  font-size: 12px;
  padding-bottom: 15px;
}
#singleCnt #crumbRap h1 {
  display: inline;
}
#singleCnt #crumbRap span {
  padding: 0 10px;
}
#singleCnt #postCnt {
  margin: 0 auto;
  padding: 50px 0 30px;
  width: 750px;
}
#singleCnt #postCnt > h2 {
  background: url(img/single_ttl_bg.png) no-repeat;
  font-size: 26px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  line-height: 140%;
  margin-bottom: 30px;
  padding: 0 0 25px 70px;
  position: relative;
}
#singleCnt #postCnt > h2 .postDate {
  border-top: 1px solid #ccc;
  bottom: 0;
  font-size: 13px;
  line-height: 100%;
  padding: 2px 0;
  position: absolute;
  right: 0;
  text-align: right;
  width: 680px;
}
#singleCnt #postCnt #postTxt h3 {
  border-left: 5px solid #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 140%;
  margin-bottom: 20px;
  text-indent: 0.6em;
}
#singleCnt #postCnt #postTxt p {
  color: #333;
  font-size: 15px;
  line-height: 180%;
  margin-bottom: 30px;
}
#singleCnt #postCnt #postTxt ul, #singleCnt #postCnt #postTxt ol {
  margin-bottom: 20px;
  padding-left: 40px;
}
#singleCnt #postCnt #postTxt ul li, #singleCnt #postCnt #postTxt ol li {
  font-size: 15px;
  line-height: 180%;
}
#singleCnt #postCnt #postTxt ul {
  list-style: square;
}
#singleCnt #postCnt #postTxt ol {
  list-style: decimal;
}
#singleCnt #snsCnt {
  margin-bottom: 40px;
}
#singleCnt #snsCnt ul {
  text-align: center;
}
#singleCnt #snsCnt ul li {
  background: #111;
  border-radius: 50%;
  display: inline-block;
  font-size: 26px;
  line-height: 50px;
  margin: 0 10px;
  height: 50px;
  width: 50px;
}
#singleCnt #snsCnt ul li a {
  color: #fff;
  display: block;
}
#singleCnt #snsCnt ul li a:hover {
  background: none;
}

#profile {
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  margin: 20px 0 30px;
  padding: 20px 0;
}
#profile img {
  float: left;
  margin-right: 20px;
}
#profile p strong {
  font-weight: bold;
}

#flow {
  margin-bottom: 40px;
  padding: 30px 0 10px;
}
#flow p {
  font-size: 12px !important;
  margin-bottom: 20px;
}

#grandprix_table {
  width: 100%;
}

#grp_img2 .grand_box {
  width: 100%;
  overflow: hidden;
  max-width: 400px;
}

#grp_img2 .grp_img_box .grand_link {
  width: 100%;
  overflow: hidden;
}

#grp_img2 .grp_img_box .grand_link .grand_images {
  width: 100%;
  overflow: hidden;
}

.btnLink.color2 a {
  background: #dc7373;
}

.btnLink a {
  display: block;
  text-align: center;
  padding: 20px 0;
  background: #9bbb59;
  color: #fff;
  border-radius: 3px;
  box-shadow: 0 3px 0 #999;
  position: relative;
}

.btnLink {
  width: 400px;
  margin: 0 auto;
}

/*Recommend 170906*/

.singleRecommend h2 { position: relative; border-bottom: 1px solid #000; padding-bottom: 10px !important; font-size: 23px !important; font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !important;}
.singleRecommend h2::after { position: absolute; padding: 0 0 25px 70px; border-bottom: 1px solid #000; }
.singleRecommend h3 { font-size: 22px; font-weight: bold; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; line-height: 140%; padding-bottom: .5em; border-bottom: 1px solid #000; margin-bottom: 20px; }
.singleRecommend h4 { font-size: 26px; color: #6c635b; text-align: center; margin-bottom: 20px;  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !important;}

.singleRecommend .date { font-size: 26px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; line-height: 140%; margin-top: 14px;}
.singleRecommend .tac {text-align: center;}
.singleRecommend .mt10 {margin-top: 10px;}
.singleRecommend .mb30 {margin-bottom: 30px;}

.singleRecommend .prBox { margin: 40px auto; overflow: hidden; }
.singleRecommend .innerBox { width: 67%; float: left; margin-right: 1%; margin-bottom: 20px; }
.singleRecommend .imageBox { width: 32%; float: right; }
.singleRecommend .media__heading { font-size: 16px; font-weight: bold; margin-bottom: 10px; }
.singleRecommend .pr p { font-size: 15px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; margin: 14px 0 24px 0; line-height: 25px; }
.singleRecommend .pr p span { font-size: 10px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; margin: 10px 0 24px 0; line-height: 20px; }

.innerBox .pr dl { font-size: 15px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; width: 100%; overflow: hidden;}
.innerBox .pr dt { font-size: 15px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; width: 26%;float: left; }
.innerBox .pr dd { font-size: 15px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; width: 74%;padding-left:10px;float:left; }

.singleRecommend .company_add { display: block; background: #ded8d4; padding:20px; text-align: center; }
.singleRecommend .company_add a { color: #444; }
.singleRecommend .company_add p { font-size: 14px; line-height: 18px; margin-bottom: 4px; }

.singleRecommend .postFoot { background: #eef3f9; }
.singleRecommend .postFootInner { margin: 0 auto; padding: 50px 0 30px; width: 750px; }

/*
.singleRecommend .postFootInner div.recommend_list {zoom: 1;}
.singleRecommend .postFootInner div.recommend_list:after { content:"."; display: block; height:0px; clear:both; line-height:0; visibility:hidden; }
.singleRecommend .postFootInner div.recommend_list div { float: left; margin: 0 12px 0 0; display: block;}
.singleRecommend .postFootInner div.recommend_list div img {width: 171px; height: 124px;}
.singleRecommend .postFootInner div.recommend_list div a:hover {  filter:alpha(opacity=40); -moz-opacity:0.4; opacity:0.4;}
*/

@media screen and (max-width: 640px) {
.singleRecommend .postRecommendInner { padding: 2%; }
.singleRecommend .postFootInner {width: 100% !important; padding: 4% !important;}
.singleRecommend .postFootInner img {width: 100% !important; height: auto !important;}
.singleRecommend .postFootInner li , .postFootInner li a {width: 100%;}
.singleRecommend .postFootInner li { width: 100% !important;}
}

.singleRecommend .postRecommendInner h2 { background: url(img/single_ttl_bg.png) 0 5px no-repeat; font-size: 20px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; line-height: 31px; margin-bottom: 20px;padding: 10px 0 10px 60px;}
.singleRecommend .postFootInner li { width: 23%;}

.singleRecommend .postRecommendInner h2.topics_title {
  background: url(img/single_ttl_bg.png) 0 25px no-repeat; font-size: 20px; font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; line-height: 31px; margin-bottom: 20px;padding: 10px 0 10px 60px;
}

.recommend_list div.recommend_list_box {
  padding: 0 6px;
  box-sizing: border-box;
}

.slick-prev {
  position: absolute;
  top: 50px;
  left: -50px;
  border: none;
  background: none;
  text-indent: -9999px;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  width: 20px;
  height: 20px;
  transform: rotate(-45deg);
  cursor: pointer;
  outline: none;
}
.slick-next {
  position: absolute;
  top: 50px;
  right: -50px;
  border: none;
  background: none;
  text-indent: -9999px;
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  width: 20px;
  height: 20px;
  transform: rotate(135deg);
  cursor: pointer;
  outline: none;
}

@media screen and (max-width: 705px) {
.singleRecommend .postRecommendInner .innerBox , .postRecommendInner .imageBox {width: 100% !important; margin-right: 0 !important;}
}

.topics_span {
  font-size: 0.8rem;
  display: block;
  line-height: 1rem;
  margin-bottom: 5px;
}

.topics_text { 
  font-size: 15px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.topics_text_title {
  font-size: 17px;
  margin-bottom: 5px;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.topics_text_sales_title {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%);
  width: 280px;
  border-radius: 10px;
  text-align: center;
  background: #000;
  color: #fff;
  font-weight: bold;
  display: block;
  font-size: 17px;
  padding: 5px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.topics_text_sales {
  position: relative;
  text-align: center;
  border: 1px dashed #222;
  font-size: 17px;
  margin-bottom: 20px;
  padding: 30px 10px 10px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  width: 98%;
  margin: 0 auto;
}

.mt25 {
  margin-top: 25px;
}

.mb25 {
  margin-bottom: 25px;
}

.mb100 {
  margin-bottom: 100px;
}

.ovh {
  overflow: hidden;
}

.topics_images_content {
  overflow: hidden;
  clear: both;
  margin-top: 20px;
}

.topics_images_wrap {
  overflow: hidden;
  margin-bottom: 10px;
}
@media screen and (min-width: 705px) {
  .topics_images_wrap {
    width: 50%;
    float: left;
    margin-bottom: 0;
    }  
}

.topics_images {
  float: left;
  width: 40%;
  margin-right: 2%;
}

.topics_images_ns {
  float: left;
  width: 30%;
  margin-right: 2%;
}

.topics_images_text {
  float: right;
  width: 58%;
}

.topics_images_text_ns {
  float: right;
  width: 68%;
  font-size: 15px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.topics_images_text {
  font-size: 15px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.topics_images_title {
  font-size: 17px;
  margin-bottom: 5px;
  font-weight: bold;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.topics_link {
  display:block;
  width: 60%;
  margin: -20px auto 0;
  transition: 0.3s;
}

.topics_link:hover {
  opacity: 0.8;
}


/* 2024/06/10 */
.pageCntBox ol,
.pageCntBox ul {
  margin-bottom: 20px;
  padding-left: 40px;
}
.pageCntBox ol li,
.pageCntBox ul li {
  font-size: 15px;
  line-height: 180%;
}
.pageCntBox ul {
  list-style: square;
}
.pageCntBox ol {
  list-style: decimal;
}