@charset "utf-8";

/* CSSプロパティの順序
 *
 * display
 * list-style
 * position
 * float
 * clear
 * width
 * height
 * margin
 * padding
 * border
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * line-height
 * other text
 * overflow
 * content
 * CSS 3
 */


/* 基本レイアウト
================================================== */

/* 全体 */
html {
  font-size: 62.5%;
}

body {
  background-color: #F5F5F5;
  color: #222;
  font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, verdana, sans-serif;
  font-size: 1.6em;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

#wrap {
  position: relative;
  max-width: 1000px;
  min-width: 748px;
  margin: 0 auto 20px;
}

#wrap:after {
  content: "";
  clear: both;
  display: block;
}

main {
  clear: both;
  padding-top: 5px;
  overflow: hidden;
}

article {
  padding: 0 0 15px;
  font-size: 16px;
  font-size: 1.6rem;
  box-sizing: border-box;
}

article h1 {
  font-size: 16px;
  font-size: 1.6rem;
}

article > section:first-child h1 {
  margin-bottom: 10px;
  font-size: 20px;
  font-size: 2.0rem;
}

article h2 {
  font-size: 18px;
  font-size: 1.8rem;
  margin-bottom: 5px;
}

article .movie{
  margin:auto;
  text-align:center;
  margin-bottom:30px;
}

article .btn.attn {
  font-size: 18px;
  font-size: 1.8rem;
}

article > section,
article > .group > section {
  margin-bottom: 15px;
  padding: 10px 15px;
  border: #CCC solid 2px;
  background-color: #FFF;
  box-sizing: border-box;
  border-radius: 10px;
}

article > section > section {
  padding: 5px 0;
}

article > section > section:last-of-type {
  padding-bottom: 0;
}

.column2 article {
  float: left;
  width: 68.5%;
  margin-right: 1.5%;
}

.column2 aside {
  float: right;
  width: 30%;
  margin-bottom: 100px;
}

.inner {
  max-width: 1000px;
  margin: 0 auto;
}

#myH_kiji {
  margin: 0 auto;
}

/* 汎用
================================================== */

.blockLink a {
  display: block;
}

.blockLink a:hover {
  background-color: #FFF7EE;
}

.line li {
  border-top: #DDD solid 1px;
}

.line li:first-child {
  border-top: none;
}

.btnLink li {
  display: inline-block;
  border: #CCC solid 1px;
  background-color: #EEE;
  text-align: center;
  box-sizing: border-box;
}

.btnList {
  overflow: hidden;
}

.btnList li {
  float: left;
  margin: 0 1% 5px 0;
  border: #CCC solid 1px;
  text-align: center;
  border-radius: 4px;
}

.btnList li a {
  display: block;
  padding: 5px;
}

.btnList li a:hover {
  background-color: #FFF7EE;
}

.arrowList li {
  margin-bottom: 5px;
}

.arrowList li a {
  display: inline-block;
  position: relative;
  padding-left: 20px;
}

.arrowList li a:before {
  position: absolute;
  top: 0.35em;
  left: 5px;
  content: '';
  border: 7px solid transparent;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-color: #444;
  transition: all .3s;
}

.txtList {

}

.txtList li {
  text-indent: -1em;
  margin: 0 0 5px 2em;
}

.pageBottom {
  text-align: center;
  margin: 1em 0;
}

.imgTxtBox,
.imgTxtBox a {
  overflow: hidden;
}

.imgTxtBox .imgArea,
.imgTxtBox .txtArea {
  float: left;
}

.imgArea img {
  vertical-align: bottom;
}

.imgArea.table{
  margin: 0 auto;
}

.imgArea.table > p {
  width: 50%;
  display: table-cell;
}

.lineUpTmp h2,
.attnTitle {
  margin: 5px 0 10px;
  border-bottom: #CCC solid 7px;
}

.lineUpTmp h3 {
  font-size: 16px;
  font-size: 1.6rem;
}

.lineUpTmp h2:first-letter,
.attnTitle span:first-child {
  padding: 4px 0.4em 0;
  margin-right: 5px;
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 1;
  vertical-align: bottom;
}

.lineUpTmp .imgTxtBox {
  margin-bottom: 10px;
}

.lineUpTmp .imgTxtBox .imgArea {
  margin: 0 2% 5px 5px;
  width: 23%;
}

.lineUpTmp .imgTxtBox .txtArea {
  width: 70%;
}

.lineUpTmp li a,
.lineUpTmp li .noLink {
  padding: 5px 0;
}

.sentence ul {
  list-style: disc;
  margin: 0 0 1em 1.5em;
}

.sentence ol {
  list-style: decimal;
  margin: 0 0 1em 1.5em;
}

.sentence ol li:nth-child(n+10) {
  margin-left: 0.5em;
}

.sentence a {
  text-decoration: underline;
}

.sentence a.btn {
  text-decoration: none;
}

.simpleBox {
  padding: 5px;
  border: #f5f5f5 solid 2px;
}

.thisDayArea .attnTitle span:first-child {
  padding: 6px 0.6em 0;
  font-size: 14px;
  font-size: 1.4rem;
}

#mainArea .basic h1 {
  margin-bottom: 25px;
  padding: 5px 0;
  border-bottom: #CCC solid 7px;
}

#mainArea .basic h2.attnTitle {
  padding: 0 0 3px 0;
}

#mainArea .basic h2.attnTitle span {
  font-size: 18px;
  font-size: 1.8rem;
}

#mainArea .btn {
  position: relative;
  padding: 7px 25px 7px 15px;
  border: #CCC solid 2px;
  background-color: #FFF;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  border-radius: 5px;
}

#mainArea .btn:after {
  position: absolute;
  top: 50%;
  right: 2px;
  content: '';
  margin-top: -5px;
  border: 7px solid transparent;
  border-top-width: 5px;
  border-bottom-width: 5px;
  border-left-color: #444;
  transition: all .3s;
}

.btnMore {
  display: block;
  position: relative;
  bottom: -12px;
  width: 50%;
  min-width: 200px;
  margin: 0 auto;
  padding: 5px;
  background-color: #CCC;
  font-size: 16px;
  font-size: 1.6rem;
  color: #FFF;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  box-sizing: border-box;
}


/* ヘッダー
================================================== */

/* 共通 */
#gHeader {
/*  height: 30px;*/
  overflow: hidden;
}

#gHeader.delay {
  overflow: visible;
}

#header {
  position: relative;
  padding: 0 0 20px 0;
  margin-bottom: 20px;
  background: #FFF url(../img/bg.png) repeat-x center bottom;
}

#header .table {
  width: 100%;
  table-layout: fixed;
}

#header .inner {
  position: relative;
}

#logo {
  display: table-cell;
  width: 30%;
  padding: 15px 10px 5px;
  line-height: 1;
  vertical-align: middle;
}

#casterPhoto {
  display: table-cell;
  width: 200px;
  height: 90px;
  background: url(../img/caster.png) no-repeat center bottom;
}

#casterPhoto img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
}

#info {
  display: table-cell;
  padding: 10px 5px;
  line-height: 1.4;
  vertical-align: top;
}

.adjustSize #info {
  padding-bottom: 45px;
}

#info strong:first-child {
  display: block;
}

#info strong:first-child span {
  display: inline-block;
}

#header .js_trigger {
  display: none;
}

#header .js_accordionBody {
  display: block;
}

/* 検索 */

#searchArea {
  position: absolute;
  top: 55px;
  right: 0;
}

.adjustSize #searchArea {
  top: auto;
  bottom: 3px;
}

#searchArea #input {
  width: 180px;
  padding: 4px 0;
  border: none;
  background-color: #f2f2f2;
  font-size: 14px;
  font-size: 1.4rem;
  border-radius: 4px;
}

#searchArea #submit {
  padding: 4px 10px;
  border: none;
  background-color: #4fb6ec;
  font-weight: bold;
  box-sizing: border-box;
  border-radius: 4px;
  -webkit-appearance: none;
}

/* 共通ナビ */
#navArea {
  border-top: #999 solid 1px;
  padding: 7px 0;
}

#navArea .js_trigger {
  display: none;
}

#gNav {
  display: block;
}

#gNav ul {
  display: table;
  margin: 0 auto;
  text-align: center;
}

#gNav li {
  display: table-cell;
}

#gNav li a:after {
  content: "|";
  position: absolute;
  right: -0.25em;
  font-weight: normal;
}

#gNav li:last-child a:after {
  content: "";
}

#gNav a {
  display: block;
  position: relative;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
}

.showSP {
  display: none;
}

/* 共有・印刷
================================================== */

#supportTop {
  min-height: 40px;
  margin-bottom: 5px;
  text-align: right;
}

#supportTop #js_fix > div {
  display: inline-block;
  vertical-align: bottom;
}

#supportTop #js_fix > div > p:first-child span {
  display: none;
}

#supportTop .snsBtn {
  margin-right: 5px;
  font-size: 12px;
  font-size: 1.2rem;
}

#supportTop .snsBtn > div{
  margin-bottom: 0;
}

#supportTop .nodBtn img {
  width: 70px;
}

#supportTop .printBtn img {
  width: 70px;
  cursor: pointer;
}

#supportBottom {
  text-align: center;
}

#supportBottom > div{
  display: inline-block;
  padding-bottom: 6px;
  vertical-align: bottom;
}

#supportBottom > div > p:first-child span {
  display: none;
}

#supportBottom .nodBtn img,
#supportBottom .printBtn img {
  width: 70px;
  cursor: pointer;
}

#supportBottom .snsBtn {
  padding: 0 10px 0 0;
  text-align: center;
}

#supportBottom .snsBtn p {
  margin-bottom: 5px;
}

#supportBottom .nhk-snsbtn {
  margin-bottom: 0;
}

#js_fix.fixed {
  position: static;
}

.js_copyGuard {
  position: relative;
}

.js_copyGuard .js_spImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

@media screen and (min-width:1240px) {

  #js_fix.fixed {
    position: fixed;
  }

  #supportTop .fixed .snsBtn {
    margin-right: 0;
  }

  #supportTop .fixed {
    top: 30px;
    left: 0;
    width: 110px;
  }

  #supportTop #js_fix.fixed > div {
    display: block;
    margin-bottom: 7px;
    padding: 10px 0;
    background-color: #FFF;
    text-align: center;
  }

  #supportTop #js_fix.fixed div > p:first-child span {
    display: block;
  }

  #supportTop .fixed p {
    font-size: 10px;
    font-size: 1.0rem;
    text-align: center;
  }

  #supportTop .fixed span {
    display: block;
    margin-bottom: 5px;
  }
}


/* トップ
================================================== */

/* ヘッドライン */

.headlineArea {
  padding: 0;
  border-color: #4fb6ec;
}

.headlineArea a {
  display: block;
  padding: 5px;
}

.headlineArea .table {
  width: 97%;
  margin-left: 1.5%;
}

.headlineArea .imgArea {
  display: table-cell;
  width: 70px;
}

.headlineArea .imgArea img {
  width: 60px;
}

.headlineArea .txtArea {
  display: table-cell;
  vertical-align: middle;
}

.headlineArea h2 {
  display: inline-block;
  margin: 0;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.2;
}

.headlineArea .sub {
  display: inline-block;
  font-size: 12px;
  font-size: 1.2rem;
}

/* トピックス */

#load_topics,
#load_enquete {
  display: none;
}

#load_topics_side,
#load_enquete_side {
  display: block;
}

.topicsArea {
  padding: 0;
  border: none;
  background: none;
}

.topicsArea li {
  margin-bottom: 10px;
}

.bnrForm {
  margin-bottom: 15px;
  background-color: #4fb6ec;
  box-sizing: border-box;
  border-radius: 10px;
}

.bnrForm a {
  padding: 5px;
  color: #222;
}

.bnrForm a:hover {
  background-color: #4fb6ec;
  border-radius: 10px;
}

.bnrForm dl {
  display: table;
  width: 100%;
  min-height: 52px;
  table-layout: fixed;
  padding:  5px;
  background-color: #FFF;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
}

.bnrForm dt {
  display: table-cell;
  width: 28%;
  vertical-align: middle;
}

.bnrForm dd {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
}

.bnrForm img {
  width: 80px;
  vertical-align: bottom;
}

.bnrMail {
  padding: 0;
}

.topicsArea .bnrMail a {
  padding: 10px 5px;
  background-color: #ff3ca0;
  color: #FFF;
  border-radius: 10px;
}

.bnrMail .txtArea {
  max-width: 240px;
  margin: 0 auto;
  text-align: center;
}

.bnrMail h2 {
  margin-bottom: 5px;
  border-bottom: #FFF solid 3px;
  font-size: 20px;
  font-size: 2.0rem;
  line-height: 1.3;
}

.bnrMail p {
  margin-bottom: 0.5em;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: -1px;
}

.bnrMail .table {
  width: 240px;
  margin: 0 auto;
}

.bnrMail dl {
  display: table-cell;
  font-weight: bold;
  vertical-align: middle;
  box-sizing: border-box;
}

.bnrMail dt {
  display: block;
}

.faxBox {
  width: 58%;
  padding: 0 5px;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.3;
}

.mailBox {
  width: 42%;
  padding: 0 2px;
  text-align: center;
  background-color: #FFF;
  color: #ff3ca0;
  font-size: 12px;
  font-size: 1.2rem;
}

.mailBox img {
  vertical-align: middle;
}

.bnrPresent {
  text-align: center;
}

.topicsArea .bnrPresent a {
  padding: 5px;
  background-color: #b4f132;
  color: #000;
  border-radius: 10px;
}

.bnrPresent a > strong {
  display: block;
  padding: 15px 5px;
  border: #4d4d4d solid 1px;
  border-radius: 8px;
  font-size: 1.6rem;
}


#latestArea {
  border-color: #ff3ca0;
  margin-bottom: 15px;
}

#scheduleArea {
  border-color: #4fb6ec;
}

#lineUpArea {
  margin-bottom: 0;
}

#lineUpArea .table {
  border-collapse: separate;
  border-spacing: 5px 0;
}

#lineUpArea h3 + p {
  font-weight: bold;
}

#latestArea h2:first-letter {
  background-color: #ff3ca0;
  color: #FFF;
}

#latestArea .table a,
#latestArea .table .pause {
  display: table-cell;
  width: 48%;
}

#latestArea .table.pauseAll {
  display: block;
}

#latestArea .table.pauseAll .pause {
  display: block;
  width: auto;
  padding: 20px 0;
  text-align: center;
}

#latestArea .table a img {
  width: 100%;
}

#latestArea a,
#latestArea .pause {
  padding: 10px;
  background-color: #f2f2f2;
}

#latestArea .pause {
  vertical-align: middle;
}

#latestArea h2 {
  border-color: #ff3ca0;
}

#latestArea h3 {
  margin-top: 5px;
}

#latestArea h3 + p {
  font-size: 16px;
  font-size: 1.6rem;
}

#scheduleArea h2 {
  border-color: #4fb6ec;
}

#scheduleArea h2:first-letter {
  background-color: #4fb6ec;
  color: #FFF;
}

#latestArea .imgTxtBox a {
  display: block;
  margin: 5px;
}

#latestArea .imgTxtBox a .imgArea {
  width: 25%;
  margin-right: 0;
  margin-left: 0;
}

#latestArea .imgTxtBox a .txtArea {
  width: 73%;
  margin-left: 2%;
}

.enqueteArea {
  border-color: #b4f132;
}

.enqueteArea > div {
  padding: 10px 15px;
  border: #b4f132 solid 3px;
  background-color: #FFF;
  box-sizing: border-box;
  border-radius: 10px;
}

.enqueteArea h1 {
  margin-bottom: 10px;
  padding-bottom: 2px;
  border-bottom: #b4f132 solid 7px;
  text-align: center;
}

.enqueteArea li a {
  display: block;
  border-bottom: #DDD solid 1px;
  padding: 5px;
}

.enqueteArea ul strong {
  display: block;
}

.enqueteArea ul .icon {
  margin-right: 5px;
  background-color: #ff3ca0;
}

.enqueteArea ul .sub {
  color: #333;
  font-size: 12px;
  font-size: 1.2rem;
}

/* コーナー紹介 */

.cornerArea {
  border-color: #ff3ca0;
}

.cornerArea h1 {
  margin-bottom: 15px;
  padding-bottom: 2px;
  border-bottom: #ff3ca0 solid 7px;
}

.cornerArea ul {
  overflow: hidden;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.cornerArea li {
  width: 49%;
  margin: 0 1% 10px 0;
  overflow: hidden;
}

.cornerArea .imgArea {
  margin-right: 2%;
  width: 46%;
}

.cornerArea .imgArea a {
  display: block;
  border: #CCC solid 1px;
  border-radius: 3px;
}

.cornerArea .txtArea {
  width: 52%;
}

.cornerArea h2 {
  margin-bottom: 0;
  font-size:14px;
  font-size: 1.4rem;
}

.cornerArea .arrow {
  font-size:14px;
  font-size: 1.4rem;
}

/* お知らせ */

.newsArea {
  border-color: #999;
}

.newsArea h1 {
  margin-bottom: 10px;
  padding-bottom: 2px;
  border-bottom: #999 solid 7px;
}

.newsArea li a,
.newsArea li .noLink {
  display: block;
  padding: 5px 0;
}


/* これまでの放送
================================================== */

#archiveArea {
  position: relative;
  border-color: #ff3ca0;
}

#archiveArea h1 {
  padding-right: 160px;
  margin-bottom: 1em;
}

#archiveArea h2 {
  border-color: #ff3ca0;
}

#archiveArea h2:first-letter {
  background-color: #ff3ca0;
  color: #FFF;
}

#archiveArea .btnMore {
  background-color: #ff3ca0;
}

#archiveArea #runAll {
  display: none;
  padding-right: 15px;
  border-color: #ff3ca0;
  color: #ff3ca0;
}

#archiveArea #runAll:after {
  display: none;
}


/* フィルター */

#filterArea {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
}

#filterArea .btnToggle {
  width: 155px;
  padding: 5px;
  border: #ff3ca0 solid 2px;
  background-color: #FFF;
  color: #ff3ca0;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  box-sizing: border-box;
}

#filterArea .btnToggle:after {
  content: "▼";
  margin-left: 5px;
}

#filterArea.open .btnToggle:after {
  content: "▲";
}

#filterArea.open .btnToggle {
  background-color: #ff3ca0;
  color: #FFF;
}

#filter {
  position: absolute;
  right: 0;
  width: 490px;
  margin-top: 15px;
  padding: 5px;
  background-color: #ff3ca0;
  color: #FFF;
  border-radius: 6px;
  box-sizing: border-box;
}

#filter:before {
  content: "";
  display: block;
  position: absolute;
  top: -14px;
  right: 60px;
  width: 0px;
  height: 0px;
  margin-left: -15px;
  border-style: solid;
  border-width: 0 15px 15px 15px;
  border-color: transparent transparent #ff3ca0 transparent;
}

#filter li {
  float: left;
  width: 110px;
  margin: 5px;
  border: none;
  background-color: #FFF;
  color: #ff3ca0;
  cursor: pointer;
  border-radius: 3px;
}

#filter li:last-child {
  float: right;
}

#filter li img {
  vertical-align: bottom;
  line-height: 1;
}

#load_archive.filtering {
  min-height: 200px;
}

#load_archive.filtering li a {
  font-size: 18px;
  font-size: 1.8rem;
}

#load_archive .missing {
  padding: 70px 0;
  text-align: center;
}

.filtering + #append_archive {
  display: none;
}

.filtering + #append_archive + p #runAll {
  display: inline-block;
}

.filtering + #append_archive + p #runAppend {
  display: none;
}


/* 記事
================================================== */

#articleArea {
  border-color: #ff3ca0;
}

#articleArea h1 {
  padding: 0 5px;
  border-bottom: #f5f5f5 solid 2px;
}

.attnTitle {
  border-color: #ff3ca0;
  font-weight: bold;
}

.attnTitle span:first-child {
  margin-bottom: 5px;
  background-color: #ff3ca0;
  color: #FFF;
}

.attnTitle + .kome {
  position: relative;
  top: -3px;
  margin: 0 0 7px 1.4em;
  color: #666;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.5;
}

#articleBody {
  clear: both;
}

#articleBody.sentence {
  overflow: hidden;
}

#articleBody h2 {
  clear: both;
  margin-bottom: 1em;
  padding: 0 5px;
  border-bottom: #ff3ca0 solid 3px;
}

#articleBody h3 {
  clear: both;
  margin-bottom: 1em;
  padding: 0 5px;
  border-bottom: #b3b3b3 solid 1px;
  font-size: 16px;
  font-size: 1.6rem;
}

#articleBody p {
  margin-bottom: 1em;
  padding: 0 5px;
}

#articleBody p:first-child {
  clear: both;
}

#articleBody p:first-child img {
  display: block;
  margin: 0 auto;
}

#articleBody p.noMargin {
  margin-bottom: 0;
}

#articleBody ul {
  margin-bottom: 1em;
}

#articleBody .sideImg {
  float: right;
  width: 35%;
  margin-left: 5px;
}

#guestBox {
  margin: 2em 0;
  font-size: 14px;
  font-size: 1.4rem;
}

h1 + #supportTop {
  float: right;
}

#supportTop + #guestBox {
  float: left;
  margin: 0 0 1em;
}

#guestBox + #articleBody {
  clear: both;
}

.thisDayArea ul {
  margin: 0 5px 1em;
}

.thisDayArea li a {
  padding: 5px 0;
}

#footNote {
  margin: 2em 0 1em;
  padding: 5px 10px;
  font-size: 12px;
  font-size: 1.2rem;
}

#footNote p {
  margin-bottom: 0.5em;
}

#footNote p:last-child {
  margin-bottom: 0;
}

#footNote a {
  text-decoration: underline;
}

#footNote .sub {
  display: inline-block;
  font-size: 12px;
  font-size: 1.2rem;
  color: #444;
}


.sideImageSection {
  overflow: hidden;
}

/* 予告 */

.notice #articleArea {
  border-color: #4fb6ec;
}

.notice .attnTitle {
  border-color: #4fb6ec;
}

.notice .attnTitle span:first-child {
  background-color: #4fb6ec;
}

.notice #articleBody h2 {
  border-color: #4fb6ec;
}


/* レシピ集
================================================== */

/* 一覧 */
#recipeAllArea {
  border-color: #b4f132;
}

#mainArea #recipeAllArea h1 {
  border-color: #b4f132;
}

#recipeAllArea .flexbox {
  -webkit-flex-wrap : wrap;
  flex-wrap: wrap;

}

#recipeAllArea .flexbox li {
  position: relative;
  width: 32%;
  margin: 0 0.5% 5px;
  padding: 10px 1% 1.5em;
  background-color: #f2f2f2;
  list-style: none;
  box-sizing: border-box;
  border:3px solid transparent;
}

#recipeAllArea .flexbox li.new {
  background-color: transparent;
  border:3px solid #b4f132;
}

#recipeAllArea .flexbox .imgArea {
  margin-bottom: 5px;
}

#recipeAllArea .flexbox h2 {
  font-size: 14px;
  font-size: 1.4rem;
}

#recipeAllArea .flexbox p {
  font-size: 12px;
  font-size: 1.2rem;
}

#recipeAllArea .flexbox p.date {
  position: absolute;
  bottom: 3px;
  right: 0;
}

#recipeAllArea .flexbox .job {
  display: inline-block;
}

/* レシピ内容 */
#recipeArea {
  border-color: #b4f132;
}

#recipehead {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 4px;
  overflow: hidden;
}

#recipehead .date {
  display: table-cell;
  padding-left: 5px;
  font-size: 12px;
  font-size: 1.2rem;
  vertical-align: bottom;
}

#recipehead .btn {
  float: right;
  border-color: #b4f132;
}

#recipeArea h1 {
  margin-bottom: 3px;
  padding: 5px;
  background-color: #b4f132;
}

#recipeArea .name {
  margin: 0 5px 5px;
  font-size: 12px;
  font-size: 1.2rem;
}

#recipeArea h1 + #articleBody {
  margin-top: 1em;
}

#recipeArea h2 {
  border-color: #b4f132;
  font-size: 16px;
  font-size: 1.6rem;
}

.cooking {
  font-size: 14px;
  font-size: 1.4rem;
  overflow: hidden;
}

.ingredient {
  float: left;
  width: 46%;
}

.ingredient ul {
  margin: 0 0 1em 5px;
}

.ingredient li {
  padding: 3px 0;
  border-bottom: #DDD solid 1px;
  overflow: hidden;
}

.ingredient li span:last-child {
  float: right;
  margin-left: 10px;
}

.ingredient dl {
  margin-bottom: 1em;
  padding: 5px;
  background-color: #f2f2f2;
}

.ingredient dt {
  padding-left: 5px;
  border-bottom: #DDD solid 1px;
  font-weight: bold;
}

.howToMake {
  float: right;
  width: 50%;
}

.howToMake ol {
  margin-left: 25px;
}

.howToMake li {
  margin-bottom: 2em;
}

#recipeArea .attnTitle span:first-child {
  background-color: #b4f132;
  color: #222;
}

#recipeArea .thisDayArea ul {
  overflow: hidden;
}

#recipeArea .thisDayArea li {
  float: left;
  width: 30%;
  text-align: center;
  margin: 0 3% 10px 0;
}

#recipeArea .thisDayArea li span {
  display: inline-block;
  min-height: 3em;
  text-decoration: underline;
}

#articleBody .cooking h2 {
  border-color: #b4f132;
}


/* アンケート一覧
================================================== */

.enqueteAllArea {
  border-color: #b4f132;
}

#mainArea .enqueteAllArea h1 {
  border-color: #b4f132;
}

.enqueteAllArea li {
  position: relative;
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
  border-bottom: #DDD solid 1px;
}

.enqueteAllArea li a {
  display: inline;
}

#mainArea .enqueteAllArea .btn {
  position: absolute;
  right: 0;
  width: 7em;
  padding-top: 3px;
  padding-bottom: 3px;
  background-color: #b4f132;
  border: none;
  box-sizing: border-box;
}

.enqueteAllArea .icon {
  margin: 0 7px;
  padding: 2px 5px;
  border: none;
  border-radius: 4px;
}

.enqueteAllArea .sub {
  font-size: 12px;
  font-size: 1.2rem;
}


/* 番組紹介
================================================== */

#aboutArea {
  border-color: #4fb6ec;
}

#mainArea #aboutArea h1 {
  border-color: #4fb6ec;
}

#aboutArea h1 + .catch {
  margin-bottom: 1em;
  color: #ff3ca0;
  font-size: 20px;
  font-size: 2.0rem;
  font-weight: bold;
}

#aboutArea h1 + .catch + p {
  margin-bottom: 1.5em;
}

#aboutArea h2.attnTitle {
  border-color: #4fb6ec;
}

#aboutArea h2.attnTitle span {
  background-color: #4fb6ec;
}

#aboutArea .cornerArea li {
  width: 100%;
  padding-top: 1em;
  border-top: #f5f5f5 solid 1px;
}

#aboutArea .cornerArea li:first-child {
  border-top: none;
}

#aboutArea .cornerArea .imgArea {
  width: 23%;
}

#aboutArea .cornerArea .txtArea {
  width: 75%;
}

#casterArea .imgTxtBox {
  display: table;
  width:100%;
  table-layout: fixed;
}

#casterArea .imgTxtBox li {
  display: table-cell;
  width: 33%;
  border: #FFF solid 3px;
  background-color: #f2f2f2;
  vertical-align: top;
  box-sizing: border-box;
}

#casterArea .imgTxtBox li.empty {
  background-color: transparent;
}

#casterArea .solo.imgTxtBox {
  display: block;
  width: 33%;
}

#casterArea .solo.imgTxtBox li {
  display: block;
  width: auto;
  overflow: hidden;
}

#casterArea .imgArea {
  width: 100%;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}

#casterArea #inohara {
  position: relative;
  width: 100%;
  height: 100%;
}

#casterArea #inohara .guard {
  position: absolute;
  width: 100%;
  height: 100%;
}

#casterArea p {
  margin: 5px;
}

#casterArea .imgTxtBox .name {
  display: block;
  padding: 7px 5px;
  margin: 0 0 10px;
  text-align: center;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2;
}

#casterArea .imgTxtBox li:nth-child(3n-2) .name,
#casterArea .imgTxtBox li:nth-child(3n-2) .job {
  background-color: #4fb6ec;
  color: #FFF;
}

#casterArea .imgTxtBox li:nth-child(3n-1) .name,
#casterArea .imgTxtBox li:nth-child(3n-1) .job {
  background-color: #ff3ca0;
  color: #FFF;
}

#casterArea .imgTxtBox li:nth-child(3n) .name,
#casterArea .imgTxtBox li:nth-child(3n) .job {
  background-color: #b4f132;
}

#casterArea .imgTxtBox .name .sub {
  display: inline-block;
  font-size: 12px;
  font-size: 1.2rem;
}

#casterArea .imgTxtBox .catch {
  font-weight: bold;
}

#casterArea .imgTxtBox p:last-child {
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

#casterArea .imgTxtBox {
  margin-bottom: 0;
}

#casterArea .imgTxtBox:last-child {
  margin-bottom: 1em;
}

#casterArea #neo3shefArea .name {
  margin-bottom: 2px;
}

#casterArea #neo3shefArea .name span:first-child {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-size: 1.2rem;
}

#neo3shefArea .job {
  margin: 0;
  padding: 5px;
  font-size: 12px;
  font-size: 1.2rem;
  text-align: center;
}

#neo3shefArea .job span {
  display: block;
}


/* よくある質問
================================================== */

#qaArea {
  border-color: #ff3ca0;
}

#mainArea #qaArea h1 {
  border-color: #ff3ca0;
}

#mainArea #qaArea .toIndex {
  margin-bottom: 15px;
  text-align: center;
}

#mainArea #qaArea .toIndex .btn {
  padding: 7px 15px;
  border-color: #ff3ca0;
  color: #ff3ca0;
  text-align: center;
}

#mainArea #qaArea .toIndex .btn:after {
  border: none;
}

#qaArea .arrowList {
  margin-bottom: 1.5em;
}

#qaArea .arrowList li {
  margin-bottom: 10px;
}

.qaSet dt,
.qaSet h4 {
  position: relative;
  padding: 5px 0 15px 3.3em;
  font-weight: normal;
}

.qaSet .icon {
  position: absolute;
  top: 0;
  left: 5px;
  width: 2em;
  padding: 0.2em;
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
  border-radius: 0;
  box-sizing: border-box;
}

.qaSet dd .icon {
  background-color: #4fb6ec;
}

.qaSet dd > div {
  padding: 5px;
  background-color: #f2f2f2;
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 2em;
}

.qaSet a {
  text-decoration: underline;
}


/* プレゼント
================================================== */

#presentArea {
  border-color: #ff3ca0;
}

#mainArea #presentArea h1 {
  border-color: #ff3ca0;
}

#presentArea #articleBody p:first-child {
  margin: 2em 0;
}

#presentArea .flexbox {
  width: 100%;

  -webkit-flex-wrap : wrap;
  flex-wrap: wrap;
  margin-bottom: 2em;
}

#presentArea .flexbox section {
  width: 100%;
}

#presentArea .imgArea {
  position: relative;
  width: 220px;
  margin-right: 3%;
}

#presentArea .imgArea img {
  width: 210px;
}

#presentArea .pcView .view {
  position: absolute;
  width: 180px;
  top: 17px;
  left: 14px;
}

#presentArea .spView .view {
  position: absolute;
  width: 63px;
  top: 19px;
  left: 75px;
}

#presentArea .txtArea {
  margin-top: 7px;
}

#presentArea .btn {
  border-color: #ff3ca0;
  color: #ff3ca0;
  margin-bottom: 5px;
  font-size: 12px;
  font-size: 1.2rem;
}

#presentArea .btn span {
  display: inline-block;
  min-width: 120px;
  font-size: 16px;
  font-size: 1.6rem;
}

#presentArea .btn:after {
  border-left-color: #ff3ca0;
}

#presentArea .explanation {
  list-style: disc;
  margin-left: 1.5em;
}

#presentArea .explanation li {
  margin-bottom: 10px;
}


/* フォーム
================================================== */

#form article {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

#formArea {
  border-color: #ff3ca0;
}

.cornerForm #formArea {
  padding-top: 0;
}

#mainArea #formArea h1 {
  border-color: #ff3ca0;
  padding-bottom: 0;
}

.cornerForm #formArea h1 {
  display: table;
  width: 100%;
  table-layout: fixed;
  box-sizing: border-box;
}

#mainArea #formArea #cornerLogo {
  width: 120px;
  padding-right: 10px;
}

.cornerForm #mainArea #formArea h1 span {
  display: table-cell;
  vertical-align: middle;
}

#mainArea #formArea h2 {
  font-size: 16px;
  font-size: 1.6rem;
}

#formArea .required {
  color: #ff3ca0;
  font-size: 12px;
  font-size: 1.2rem;
}

#formArea form section {
  padding-bottom: 1.5em;
}

#formArea input[type="text"] {
  width: 25rem;
  margin-left: 5px;
  padding: 2px;
  font-size: 16px;
  font-size: 1.6rem;
  border: 1px solid #AAA;
  border-radius: 3px;
  -webkit-appearance: none;
}

#formArea select {
  margin-left: 5px;
  padding: 2px;
  font-size: 16px;
  font-size: 1.6rem;
  border: 1px solid #AAA;
  border-radius: 3px;
}

#formArea .label label {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5%;
}

#formArea textarea {
  display: block;
  width: 97%;
  margin: 0 5px;
  border: 1px solid #AAA;
  font-size: 16px;
  font-size: 1.6rem;
  border-radius: 3px;
  box-sizing: border-box;
}

#formArea #inputImg {
  display: none;
}

.green #formArea #inputImg {
  display: block;
}

#formArea .explanation {
  display: none;
}

.green #formArea .explanation {
  display: block;
  margin-left: 5px;
  font-size: 14px;
  font-size: 1.4rem;
}

#formArea .btnToggle {
  display: inline-block;
  padding: 3px 5px;
  border: #ff3ca0 solid 2px;
  background-color: #FFF;
  color: #ff3ca0;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  box-sizing: border-box;
}

#formArea .btnToggle:after {
  content: "▼";
  margin-left: 5px;
}

#formArea .open .btnToggle:after {
  content: "▲";
}

#formArea .explanation ul {
  list-style: disc;
  margin-left: 1.5em;
}

#formArea .explanation li {
  margin-bottom: 5px
}

#formArea #inputImg p {
  margin-bottom: 5px;
}

#formArea #inputImg .sub {
  font-size: 12px;
  font-size: 1.2rem;
}

#agreeArea .simpleBox {
  margin-bottom: 1em;
  border: 1px solid #CCC;
  border-radius: 3px;
}

#agreeArea .simpleBox p {
  margin-bottom: 5px;
  font-size: 14px;
  font-size: 1.4rem;
}

#agreeArea .simpleBox p:last-child {
  margin-bottom: 0;
}

#formArea #submitBtn {
  padding: 8px 50px;
  border-color: #ff3ca0;
  color: #ff3ca0;
  box-sizing: border-box;
  -webkit-appearance: none;
}

#formArea #submitBtn:disabled {
  opacity: 0.6;
  border-color: #999;
  color: #999;
}

#formArea.result {
  padding: 30px 10px 0;
  text-align: center;
}

#formArea.result h1 {
  margin-bottom: 1em;
}

#formArea.result p {
  margin-bottom: 2em;
}

#formArea.result .btn {
  margin-bottom: 0;
  padding: 8px 50px;
  border-color: #ff3ca0;
  color: #ff3ca0;
  box-sizing: border-box;
}

#formArea.result .btn:after {
  display: none;
}

#formArea.result .thanks h1 {
  margin: 3em 0 4em;
}

#formArea input[type="radio"] {
  cursor: pointer;
}

#formArea input + label {
  padding: 2px 5px;
  cursor: pointer;
}

/*
label.radio_text {
  display: inline-block;
  position: relative;
  margin-right: 20px;
  padding-left: 20px;
  overflow: hidden;
  cursor: pointer;
}

label.radio_text:before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 15px;
  height: 15px;
  border: 1px solid #666;
  z-index: 3;
  border-radius: 50%;
}

label.radio_text:after {
  content: '';
  position: absolute;
  left: 3px;
  top: 7px;
  width: 11px;
  height: 11px;
  background-color: #ff3ca0;
  z-index: 1;
  border-radius: 100%;
}

label.radio_text input[type="radio"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: -23px;
  top: 1px;
  margin: 0px;
  width: 20px;
  height: 20px;
  z-index: 2;
  box-shadow : 20px -1px #FFF;
}

label.radio_text input[type="radio"]:checked {
  box-shadow: none;
}

label.radio_text input[type="radio"]:focus {
  opacity: 0.2;
  box-shadow: 20px -1px #FFF;
}
*/

/* サイド
================================================== */

aside > section {
  margin-bottom: 15px;
  padding: 5px 10px;
  border: #CCC solid 2px;
  background-color: #FFF;
  font-size: 14px;
  font-size: 1.4rem;
  box-sizing: border-box;
  border-radius: 10px;
}

aside h1 {
  margin-bottom: 10px;
  padding-bottom: 2px;
  border-bottom: #CCC solid 7px;
  font-size: 16px;
  font-size: 1.6rem;
  text-align: center;
}

aside h2 {
  font-size: 16px;
  font-size: 1.6rem;
}

aside .imgTxtBox.line li {
  padding: 5px 0;
  border-top: #DDD solid 1px;
}

aside .imgTxtBox.line li:first-child {
  border-top: none;
}

aside .imgTxtBox .imgArea {
  width: 28%;
  max-width: 150px;
  margin-right: 2%;
}

aside .imgTxtBox .txtArea {
  width: 70%;
}

/* キーワード */

.keywordArea {
  border: #4fb6ec;
  background-color: #4fb6ec;
}

.keywordArea h1 {
  border-color: #FFF;
}

.keywordArea li {
  width: 49%;
  margin-right: 2%;
  background-color: #FFF;
  border: none;
}

.keywordArea li a:hover {
  background: none;
}

.keywordArea li:nth-child(even) {
  margin-right: 0;
}

/* リコメンド */

.recommendArea {
  border-color: #ff3ca0;
}

.recommendArea h1 {
  border-color: #ff3ca0;
}

/* その他 */

.otherArea {
  border: none;
  background: none;
}

#sideSNS {
  text-align: center;
}

#bnrList li {
  margin-bottom: 5px;
  line-height: 1;
  text-align: center;
}

/* 次回予告 */

.nextArea {
  border-color: #4fb6ec;
}

.nextArea h1 {
  margin-top: 7px;
  border-color: #4fb6ec;
  font-size: 18px;
  font-size: 1.8rem;
  text-align: left;
}

#wrap .nextArea h1 span {
  background-color: #4fb6ec;
}

.nextArea li a,
.nextArea li .noLink {
  padding: 5px 0;
  border-top: #DDD solid 1px;
  font-weight: bold;
}

.nextArea li:first-child a {
  border-top: none;
}

/* アコーディオン
================================================== */

.js_trigger {
  cursor: pointer;
}

.js_accordionBody,
.js_accordion .js_closeBtn,
.js_accordion.open .js_openBtn {
  display: none;
}

.js_accordion.open .js_accordionBody,
.js_accordion.open .js_closeBtn,
.js_accordion .js_openBtn {
  display: block;
}

.js_accordion .changeArrow {
  background: url(../img/icon_arrow_13.png) no-repeat 10px 10px;
  color: #03C;
}

.js_accordion.open .changeArrow {
  background: url(../img/icon_arrow_13.png) no-repeat 10px -40px;
  color: #03C;
}

/* モーダルウインドウ
================================================== */

#js_modalOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0,0,0,0.7);
  z-index: 5100;
}

#js_modalOverlay.fadeIn {
  display: block;
  opacity: 1;
  -webkit-animation: fadeIn 0.3s;
  animation: fadeIn 0.3s;
}

.modalopen #js_modalOverlay {
  display: none;
}

.js_modal .js_closeBtn,
.js_modal.open .js_openBtn {
  display: none;
}

.js_modal.open .js_closeBtn,
.js_modal .js_openBtn {
  display: block;
}

/* アニメーション
================================================== */

.fadeIn {
  display: inherit;
  opacity: 1;
  -webkit-animation: fadeIn 0.3s;
  animation: fadeIn 0.3s;
}

.fadeIn.flexbox {
  display: -webkit-flex;
  display: flex;
}

.fadeOut {
  display: inherit;
  opacity: 1;
  -webkit-animation: fadeOut 0.3s;
  animation: fadeOut 0.3s;
}

@-webkit-keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: inherit;
    opacity: 0;
  }

  100% {
    display: inherit;
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }

  1% {
    display: inherit;
    opacity: 0;
  }

  100% {
    display: inherit;
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    display: inherit;
    opacity: 1;
  }

  1% {
    display: inherit;
    opacity: 1;
  }

  100% {
    display: none;
    opacity: 0;
  }
}

.nowLoading {
  padding: 20px 0;
  text-align: center;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

.nowLoading img {
  width: 36px;
}

.spin {
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}


/* 遅延読み込み高さ調整
================================================== */

.nowLoading {
  width: inherit !important;
  border: none !important;
  box-sizing: border-box;
}

#load_schedule .nowLoading {
  min-height: 700px;
}

#load_news .nowLoading {
  min-height: 160px;
}

#load_keyword .nowLoading {
  min-height: 70px;
}

#load_recommend .nowLoading {
  min-height: 170px;
}

#load_archive .nowLoading {
  min-height: 800px;
}

.enqueteAllArea .nowLoading {
  min-height: 500px;
}

#recipeAllArea .flexbox li.nowLoading {
  margin: 0 auto;
  min-height: 800px;
  background-color: inherit;
}


/* フッター
================================================== */

#immunity {
  max-width: 1000px;
  margin: 1em 5px;
  padding: 5px;
  border: #CCC solid 1px;
  color: #444;
  box-sizing: border-box;
}

#immunity h1{
  margin-bottom: 5px;
  font-size: 14px;
  font-size: 1.4rem;
}

#immunity p {
  font-size: 12px;
  font-size: 1.2rem;
}

#toTopArea {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

#toTop {
  position: absolute;
  bottom: 0;
  right: 50px;
  width: 150px;
  padding-top: 10px;
  overflow: hidden;
  cursor: pointer;
}

#toTop img {
  position: relative;
  vertical-align: bottom;
}

#toTop .person {
  transform: translate(0,5px);
}

#toTop .serif {
  position: absolute;
  top: 0;
  right: 0;
}

#toTop .person:hover{
  animation: upup 0.3s linear 2;
}

@keyframes upup{
  0%	{transform: translate(0,5px);}
  50%	{transform: translate(0,0);}
  100%	{transform: translate(0,5px);}
}


/* おまけ
================================================== */

#sideParson {
  display: none;
}

@keyframes anima2{
  0%	{transform: translate(-40px,0) rotate(35deg);}
  10%	{transform: translate(-40px,0) rotate(35deg);}
  35%	{transform: translate(-40px,0) rotate(15deg);}
  50%	{transform: translate(-40px,0) rotate(10deg) scale(1.2,1.2);}
  65%	{transform: translate(-40px,0) rotate(15deg);}
  100%	{transform: translate(-40px,0) rotate(35deg);}
/*
  0%	{transform: translate(-60px,0) rotate(35deg);}
  30%	{transform: translate(-40px,0) rotate(35deg);}
  40%	{transform: translate(-40px,0) rotate(30deg);}
  50%	{transform: translate(-40px,0) rotate(35deg);}
  60%	{transform: translate(-40px,0) rotate(30deg);}
  70%	{transform: translate(-40px,0) rotate(35deg);}
  100%	{transform: translate(-60px,0) rotate(35deg);}
*/
}
/*

@keyframes anima3{
  0%	{transform: translate(-60px,0) rotate(25deg);}
  50%	{transform: translate(20px,-80px) rotate(25deg) scale(0.7);}
  100%	{transform: translate(-60px,0) rotate(25deg);}
}

*/
@keyframes anima4{
  0%	{transform: translate(-30px,0) rotate(25deg);}
  20%	{transform: translate(-30px,0) rotate(25deg);}
  40%	{transform: translate(-20px,-40px) rotate(45deg);}
  100%	{transform: translate(-40px,0) rotate(25deg);}
}

@keyframes anima5{
  0%	{transform: translate(-60px,0) rotate(35deg);}
  30%	{transform: translate(-40px,0) rotate(35deg);}
  40%	{transform: translate(-40px,0) rotate(30deg);}
  50%	{transform: translate(-40px,0) rotate(35deg);}
  60%	{transform: translate(-40px,0) rotate(30deg);}
  70%	{transform: translate(-40px,0) rotate(35deg);}
  100%	{transform: translate(-60px,0) rotate(30deg);}
}

/*
@keyframes anima6{
  0%	{transform: translate(-30px,0) rotate(15deg);}
  40%	{transform: translate(10px,0) rotate(20deg);}
  100%	{transform: translate(-60px,0) rotate(15deg);}
}

@keyframes anima7{
  0%	{transform: translate(-60px,0) rotate(25deg);}
  25%	{transform: translate(-40px,-30px) rotate(25deg);}
  60%	{transform: translate(-60px,0) rotate(25deg);}
  70%	{transform: translate(-60px,0) rotate(22deg);}
  90%	{transform: translate(-60px,0) rotate(28deg);}
  100%	{transform: translate(-60px,0) rotate(25deg);}
}

@keyframes anima8{
  0%	{transform: translate(-65px,0) rotate(30deg);}
  10%	{transform: translate(-65px,0) rotate(28deg);}
  30%	{transform: translate(-65px,0) rotate(32deg);}
  50%	{transform: translate(-65px,0) rotate(28deg);}
  60%	{transform: translate(-65px,0) rotate(30deg);}
  80%	{transform: translate(-55px,-15px) rotate(30deg);}
  100%	{transform: translate(-65px,0) rotate(30deg);}
}
*/

@media screen and (min-width:1000px) {
  body {
    position: relative;
    overflow-x: hidden;
  }

  #sideParson {
    display: block;
    position: absolute;
    right: -300px;
    top: -20px;
    width: 300px;
    height: 300px;
    overflow: hidden;
    opacity: 1;
    animation: fadeIn 0.3s;
  }

  #sideParson p {
    position: absolute;
    width: 150px;
    overflow: hidden;
  }

  #sideParson p img {
    width: 300px;
    max-width: none;
    margin-top: 30px;
  }

  #sideParson p:hover img {
    margin-left: -150px;
  }

  #person2 {
    transform: translate(-40px,0) rotate(35deg);
  }

  #person2:hover{
    animation: anima2 1.5s ease-out 1;
  }

  #person3 {
    transform: translate(-60px,0) rotate(25deg);
  }

  #person3:hover{
    animation: anima3 0.6s ease-out 1;
  }

  #person4 {
    transform: translate(-40px,0) rotate(25deg);
  }

  #person4:hover{
    animation: anima4 2s ease-in-out 1;
  }

  #person5 {
    transform: translate(-60px,0) rotate(30deg);
  }

  #person5:hover{
    animation: anima5 1.5s ease-in-out 1;
  }

  #person6 {
    transform: translate(-60px,0) rotate(15deg);
  }

  #person6:hover{
    animation: anima6 1s ease 1;
  }

  #person7 {
    transform: translate(-60px,0) rotate(25deg);
  }

  #person7:hover{
    animation: anima7 1s ease 1;
  }

  #person8 {
    transform: translate(-65px,0) rotate(30deg);
  }

  #person8:hover{
    animation: anima8 1s ease 1;
  }

}

@media screen and (max-width:1000px) {

  #info {
    font-size: 1.4rem;
  }

  #gNav ul {
    width: 100%;
    max-width: 860px;
  }

  #gNav a {
    padding: 10px 0;
  }

  aside h1 {
    font-size: 1.4rem;
  }

  aside section {
    padding: 5px;
    font-size: 1.2rem;
  }

  aside h2 {
    font-size: 1.4rem;
  }

  #info strong:first-child {
    display: inline-block;
  }

  #info .sub {
    display: inline-block;
  }

  .bnrMail p {
    font-size: 1.6rem;
    letter-spacing: 0;
  }

  .bnrMail .table {
    width: 95%;
    box-sizing: border-box;
  }

  .faxBox {
    font-size: 1.4rem;
  }

  #wrap .bnrMail dt img {
    width: 60%;
    max-width: 20px;
  }

  #myH_header,
  #myH_kiji {
    display: none;
  }

}


@media screen and (max-width:768px) {

  /* 基本レイアウト */
  #wrap {
    min-width: inherit;
  }

  main {
    padding-top: 0;
  }

  article {
    font-size: 1.4rem;
    border-radius: 0;
  }

  article > section,
  article > .group > section {
    padding: 10px;
  }

  article > section:first-child h1 {
    margin-bottom: 5px;
  }

  .column2 article {
    float: none;
    width: 100%;
    margin: 0 0 10px;
  }

  .column2 aside {
    float: none;
    width: 100%;
    margin-bottom: 0;
    overflow: hidden;
  }

  aside section {
    float: left;
    width: 48%;
    margin-right: 2%;
    font-size: 1.4rem;
    box-sizing: border-box;
  }

  #sideArea div {
    float: left;
    width: 48%;
    overflow: hidden;
  }

  /* ヘッダー */
  #header {
    margin-bottom: 10px;
  }

  #header .table {
    display: block;
  }

  #logo {
    display:block;
    min-width: 180px;
    margin: 0 auto;
    padding: 5px 0;
  }

  #casterPhoto {
    display: none;
  }

  #info {
    display: block;
    margin: 0;
    padding: 5px;
    background-color: #FFF;
    text-align: center;
  }

  #header .btn {
    position: relative;
    margin: 0;
  }

  #header .js_trigger {
    display: block;
    width: 60px;
    padding: 5px 8px;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
  }

  #header .open .js_trigger {
    position: relative;
    border-bottom: none;
    background: #FFF;
    border-radius: 2px 2px 0 0;
    z-index: 10001;
  }

  #header .js_accordionBody {
    display: none;
  }

  #header .open .js_accordionBody {
    display: block;
    position: relative;
    z-index: 10000;
  }

  /* ナビ */
  #navArea {
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 0;
    border: none;
  }

  #menu {
    position: relative;
    margin: 0;
  }

  #header #navArea .open .js_trigger {
    position: absolute;
    right: 0;
  }

  #gNav {
    position: absolute;
    top: 54px;
    right: 0;
    float: none;
    width: 200px;
    background-color: #FFF;
    border-radius: 2px 0 2px 2px;
    z-index: 10000;
  }

  #gNav li {
    position: relative;
    float: none;
    display: block;
  }

  #gNav li:before{
    position: absolute;
    content: "";
    top: 17px;
    right: 10px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  #gNav a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 0 10px 10px;
    border-top: #DDD solid 1px;
    background-position: 15px 10px;
    text-align: left;
    box-sizing: border-box;
  }

  #gNav li:first-child a {
    border: none;
  }

  /* 検索 */

  #searchArea {
    top: 0;
    left: 0;
    right: auto;
    width: 64px;
  }

  .adjustSize #searchArea {
    top: 0;
    bottom: auto;
  }

  #searchArea.open {
    width: 100%;
  }

  #searchFrom {
    background-color: #FFF;
    width: 70%;
    padding: 10px;
    min-width: 320px;
    box-sizing: border-box;
    border-radius: 0 2px 2px 2px;
  }

  #searchFrom #input {
    width: 80%;
    font-size: 1.8rem;
    padding: 8px 5px;
    box-sizing: border-box;
  }

  #searchFrom #submit {
    width: 18%;
    padding: 10px 0;
    font-size: 1.8rem;
  }

  .modalopen #js_modalOverlay {
    display: block;
  }

  /* 汎用 */

  .lineUpTmp .imgTxtBox .imgArea {
    margin-top: 5px;
  }

  #mainArea .basic h1 {
    margin-bottom: 15px;
    font-size: 2rem;
  }

  #mainArea .basic h2.attnTitle span {
    font-size: 1.6rem;
  }

  /* フッター */

  #toTop {
    position: static;
    width: auto;
    overflow: hidden;
  }

  #toTop .person {
    display: none;
  }

  #toTop .caster {
    display: block;
    width: 200px;
    height: 90px;
    margin: 0 auto;
    padding-right: 40px;
    background: url(../img/caster.png) no-repeat left bottom;
  }

  #toTop .serif {
    left: 50%;
    margin-left: 50px;
  }

  /* トップ */

  #load_topics,
  #load_enquete {
    display: block;
  }

  #load_topics_side,
  #load_enquete_side {
    display: none;
  }
  .bnrMail .txtArea {
    width: 95%;
    max-width: inherit;
    margin-bottom: 5px;
    border-bottom: #FFF solid 3px;
    overflow: hidden;
  }

  .bnrMail h2 {
    float: left;
    border: none;
  }

  .bnrMail p {
    float: left;
  }

  .bnrMail .table {
    width: 80%;
  }

  .cornerArea li {
    width: 100%;
    margin: 0 1% 10px 0;
  }

  .cornerArea .imgArea {
    margin-right: 2%;
    width: 25%;
  }

  .cornerArea .txtArea {
    width: 68%;
  }

  /* よくある質問 */
  .qaSet .icon {
    width: 1.7em;
    padding: 0.1em;
  }

  .hideTB {
    display: none;
  }

  /* サイド */
  aside #bnrAreaTop,
  aside #bnrArea,
  aside #relatedArea {
    float: left;
    width: 48%;
    margin-right: 1.5%;
    box-sizing: border-box;
  }

  .otherArea {
    clear: both;
    float: none;
    width: auto;
    margin: 0;
  }

  #bnrList {
    display: table;
    margin: 0 auto;
    overflow: hidden;
  }

  #bnrList li {
    display: table-cell;
    padding: 0 2%;
  }

}

@media screen and (max-width:568px) {

  /* 基本レイアウト */
  #gHeader,
  #header,
  #wrap {
    min-width: 290px;
  }

  #wrap {
    padding: 0 2%;
  }

  .column2 article {
    margin-bottom: 0;
  }

  article h1 {
    font-size: 1.4rem;
  }

  article h2 {
    font-size: 1.6rem;
  }

  article > section {
    padding: 10px 5px;
  }

  /* 汎用 */
  .attnTitle span:first-child {
    font-size: 1.8rem;
  }

  .imgArea.table > p {
    display: block;
    width: auto;
  }

  #mainArea .btn {
    width: 80%;
  }

  .hideSP {
    display: none;
  }

  .showSP {
    display: inherit;
  }

  /* ヘッダー */
  #logo {
    min-width: 150px;
  }

  #info .sub {
    display: inline-block;
    font-size: 1.2rem;
  }

  #header .js_trigger {
    width: 44px;
    padding: 4px 4px;
  }

  #gNav {
    top: 44px;
  }

  #navArea #gNav a {
    font-size: 1.6rem;
  }

  #searchFrom {
    width: 100%;
  }

  /* 印刷・共有 */
  #wrap #supportTop .printBtn,
  #supportBottom .printBtn {
    display: none;
  }

  /* トップ */

  .bnrMail .txtArea {
    width: 80%;
    border: none;
  }

  .bnrMail h2 {
    float: none;
    margin-bottom: 5px;
    border-bottom: #FFF solid 3px;
    overflow: hidden;
  }

  .bnrMail p {
    float: none;
  }

  .bnrMail .table {
    margin-right: 10%;
  }

  .faxBox dt,
  .faxBox dd {
    text-align: center;
  }

  #latestArea h3 + p {
    font-size: 1.6rem;
  }

  /* これまでの放送 */

  #archiveArea h1 {
    padding-right: 120px;
  }

  #archiveArea h2:first-letter {
    font-size: 1.6rem;
  }

  #archiveArea .btnToggle {
    width: 110px;
  }

  #filter {
    width: 298px;
    right: -10px;
  }

  #filter li {
    width: 90px;
    margin: 3px;
  }


  /* レシピ集 */

  #recipeAllArea .flexbox li {
    width: 100%;
    margin: 0 0 5px;
    padding: 10px 1%;
  }

  #recipeAllArea .flexbox .imgArea {
    float: left;
    width: 30%;
    margin-bottom: 0;
  }

  #recipeAllArea .flexbox .txtArea {
    float: right;
    width: 65%;
    padding-bottom: 1.5em;
  }

  #recipeArea h1 {
    font-size: 1.8rem;
  }

  #recipeArea  #recipehead .btn {
    width: 150px;
    margin-top: 5px;
    padding-left: 5px;
    font-size: 1.2rem;
    box-sizing: border-box;
  }

  .ingredient,
  .howToMake {
    float: none;
    width: auto;
  }

  .ingredient ul,
  .ingredient dl {
    max-width: 340px;
    margin: 0 auto 1em;
  }

  #recipeArea .thisDayArea li {
    width: 45%;
    margin: 0 5% 10px 0;
  }

  /* アンケート一覧 */

  #mainArea .enqueteAllArea .sub {
    display: block;
  }

  #mainArea .enqueteAllArea .btn {
    display: block;
    position: relative;
    margin: 5px auto;
  }

  /* 番組紹介 */

  #aboutArea h1 + .catch {
    font-size: 1.6rem;
  }

  #aboutArea .cornerArea .imgArea {
    float: none;
    width: 40%;
    max-width: 160px;
    margin: 0 auto 0.5em;
  }

  #aboutArea .cornerArea .txtArea {
    float: none;
    width: auto;
  }

  #casterArea .imgTxtBox {
    display: block;
  }

  #casterArea .imgTxtBox li {
    display: block;
    width: 100%;
  }

  #casterArea .imgArea {
    float: none;
  }

  #casterArea .txtArea {
    float: none;
  }

  #casterArea .imgTxtBox.solo {
    width: 100%;
  }

  #casterArea section:nth-of-type(1) .imgTxtBox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column;
    flex-flow: column;
  }

  #casterArea section:nth-of-type(1) li:first-child {
    order: 3;
  }

  /* プレゼント */

  #presentArea .flexbox {
    -webkit-flex-flow: column-reverse nowrap;
    flex-flow: column-reverse nowrap;
  }

  #presentArea .imgArea {
    float: none;
    margin: 0 auto;
  }

  #presentArea .txtArea {
    width: 100%;
    text-align: center;
  }

  /* フォーム */

  .cornerForm #mainArea #formArea h1 {
    display: block;
    padding-bottom: 5px;
  }

  .cornerForm #mainArea #formArea #cornerLogo {
    width: 120px;
    margin: 0 auto;
    padding-right: 0;
  }

  .cornerForm #mainArea #formArea h1 span {
    display: block;
  }

  #agreeArea p span:first-child {
    display: block;
    top: 0;
  }

  /* サイド */

  #wrap aside section {
    width: 100%;
  }

  article + article h1 {
    text-align: center;
  }

  aside .more {
    display: block;
  }

  #bnrList {
    display: block;
  }

  #bnrList li {
    display: block;
    padding: 0 2%;
  }

  /* フッター */


}

@media screen and (max-width:480px) {

  /* トップ */

  .headlineArea h2 {
    font-size: 1.8rem;
  }

  .headlineArea .table {
    width: 99%;
    margin-left: 1%;
  }

  .headlineArea .imgArea {
    width: 60px;
  }

  #latestArea .table {
    display: block;
  }

  #latestArea .table a,
  #latestArea .table .pause {
    display: block;
    width: auto;
    margin-bottom: 5px;
  }

  #latestArea .imgArea {
    text-align: center;
  }

  #latestArea .imgTxtBox a {
    margin: 0 0 5px;
  }
}

/* 読み上げ対策
================================================== */

.hideTxt {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* 印刷用
================================================== */

@media print{

  body #wrap {
    width: 172mm !important; /* A4縦の幅 */
    min-width: 172mm !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  body main {
    padding: 0 !important;
  }

  #mainArea {
    width: 100% !important;
    padding-bottom: 0 !important;
  }

  .cooking {
    position: relative;
  }

  article {
    margin: 0 auto !important;
  }

  #mainArea section {
    border-radius: 0 !important;
  }

  #recipeArea {
    padding: 0 5px !important;
    margin: 0 !important;
  }


  header,
  footer,
  aside,
  #immunity,
  #supportTop,
  #supportBottom,
  #sideParson,
  #footNote,
  .btn,
  .date,
  .thisDayArea,
  .btnToggle,
  .pv_Btn {
    display: none !important;
  }

  .recipe .pv_Btn {
    width: 200px;
    margin: 10px auto;
    padding: 3px;
    border: #999 solid 2px;
    background-color: #FFF;
    color: #999;
    font-size: 16px;
    font-size: 1.6rem;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    box-sizing: border-box;
  }

  .pv_Btn.print {
    padding: 5px;
    border-color: #ff3ca0;
    color: #ff3ca0;
  }

  #recipeArea,
  #articleArea,
  article > section {
    border: none !important;
  }

  h1 {
    border: none !important;
    background: none !important;
    font-size: 1.8rem !important;
    margin-bottom: 0 !important;
  }

  .recipe h1 {
    display: inline-block !important;
  }

  h2 {
    border-bottom: #999 solid 1px !important;
  }

  .attnTitle {
    border: none !important;
  }

  .lineUpTmp h2:first-letter,
  .attnTitle span:first-child {
    background: none !important;
    color: #222 !important;
  }

  .notice #articleArea > p:first-child {
    display: none !important;
  }

  .notice img {
    max-width: 420px !important;
  }

  .notice .sideImg img {
    max-width: 100% !important;
  }

  .recipe .name {
    display: inline-block !important;
  }

  .recipe .cooking p:first-child {
    width: 46%;
  }

  .recipe .imgLeft .cooking p:first-child {
    position: absolute;
    left: 0;
  }

  .recipe .imgRight .cooking p:first-child {
    position: absolute;
    right: 0;
  }

  .recipe .sideImgPrint {
    float: right;
    width: 46%;
  }

  .recipe .ingredient{
    clear: both;
  }

  .recipe .imgLeft .ingredient{
    margin-top: 180px;
  }

  .recipe .imgRight .howToMake {
    margin-top: 180px;
  }

  .ingredient li {
    border-bottom: #CCC dashed 1px !important;
  }

  .ingredient li:last-child {
    border-bottom: none !important;
  }

  .ingredient dl {
    border: #CCC solid 1px !important;
    background: none !important;
    margin-bottom: 1em !important;
  }

  .ingredient dl ul {
    margin-bottom: 0 !important;
  }

}

.copyGuard{
  pointer-events:none;
  -moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}


@media print{
  .copyGuard{
    opacity:0 !important;
  }
}